64429b19e6
- Added `trillium.py` for searching and creating notes with Trillium's ETAPI. - Implemented `search_notes` and `create_note` functions with appropriate error handling and validation. feat: Add web search functionality using DuckDuckGo - Introduced `web_search.py` for performing web searches without API keys. - Implemented `search_web` function with result handling and validation. feat: Create provider-agnostic function caller for iterative tool calling - Developed `function_caller.py` to manage LLM interactions with tools. - Implemented iterative calling logic with error handling and tool execution. feat: Establish a tool registry for managing available tools - Created `registry.py` to define and manage tool availability and execution. - Integrated feature flags for enabling/disabling tools based on environment variables. feat: Implement event streaming for tool calling processes - Added `stream_events.py` to manage Server-Sent Events (SSE) for tool calling. - Enabled real-time updates during tool execution for enhanced user experience. test: Add tests for tool calling system components - Created `test_tools.py` to validate functionality of code execution, web search, and tool registry. - Implemented asynchronous tests to ensure proper execution and result handling. chore: Add Dockerfile for sandbox environment setup - Created `Dockerfile` to set up a Python environment with necessary dependencies for code execution. chore: Add debug regex script for testing XML parsing - Introduced `debug_regex.py` to validate regex patterns against XML tool calls. chore: Add HTML template for displaying thinking stream events - Created `test_thinking_stream.html` for visualizing tool calling events in a user-friendly format. test: Add tests for OllamaAdapter XML parsing - Developed `test_ollama_parser.py` to validate XML parsing with various test cases, including malformed XML.
110 lines
3.1 KiB
Markdown
110 lines
3.1 KiB
Markdown
# Thinking Stream UI Integration
|
|
|
|
## What Was Added
|
|
|
|
Added a "🧠 Show Work" button to the main chat interface that opens a dedicated thinking stream window.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Main Chat Interface ([core/ui/index.html](core/ui/index.html))
|
|
|
|
Added button to session selector:
|
|
```html
|
|
<button id="thinkingStreamBtn" title="Show thinking stream in new window">🧠 Show Work</button>
|
|
```
|
|
|
|
Added event listener to open stream window:
|
|
```javascript
|
|
document.getElementById("thinkingStreamBtn").addEventListener("click", () => {
|
|
const streamUrl = `/thinking-stream.html?session=${currentSession}`;
|
|
const windowFeatures = "width=600,height=800,menubar=no,toolbar=no,location=no,status=no";
|
|
window.open(streamUrl, `thinking_${currentSession}`, windowFeatures);
|
|
});
|
|
```
|
|
|
|
### 2. Thinking Stream Window ([core/ui/thinking-stream.html](core/ui/thinking-stream.html))
|
|
|
|
New dedicated page for the thinking stream:
|
|
- **Header**: Shows connection status with live indicator
|
|
- **Events Area**: Scrollable list of thinking events
|
|
- **Footer**: Clear button and session info
|
|
|
|
Features:
|
|
- Auto-reconnecting SSE connection
|
|
- Color-coded event types
|
|
- Slide-in animations for new events
|
|
- Automatic scrolling to latest event
|
|
- Session ID from URL parameter
|
|
|
|
### 3. Styling ([core/ui/style.css](core/ui/style.css))
|
|
|
|
Added purple/violet theme for the thinking button:
|
|
```css
|
|
#thinkingStreamBtn {
|
|
background: rgba(138, 43, 226, 0.2);
|
|
border-color: #8a2be2;
|
|
}
|
|
```
|
|
|
|
## How To Use
|
|
|
|
1. **Open Chat Interface**
|
|
- Navigate to http://localhost:7078 (relay)
|
|
- Select or create a session
|
|
|
|
2. **Open Thinking Stream**
|
|
- Click the "🧠 Show Work" button
|
|
- A new window opens showing the thinking stream
|
|
|
|
3. **Send a Message**
|
|
- Type a message that requires tools (e.g., "Calculate 50/2 in Python")
|
|
- Watch the thinking stream window for real-time updates
|
|
|
|
4. **Observe Events**
|
|
- 🤔 Thinking iterations
|
|
- 🔧 Tool calls
|
|
- 📊 Tool results
|
|
- ✅ Completion
|
|
|
|
## Event Types & Colors
|
|
|
|
| Event | Icon | Color | Description |
|
|
|-------|------|-------|-------------|
|
|
| Connected | ✓ | Green | Stream established |
|
|
| Thinking | 🤔 | Light Green | LLM processing |
|
|
| Tool Call | 🔧 | Orange | Tool invocation |
|
|
| Tool Result | 📊 | Blue | Tool output |
|
|
| Done | ✅ | Purple | Task complete |
|
|
| Error | ❌ | Red | Something failed |
|
|
|
|
## Architecture
|
|
|
|
```
|
|
User clicks "Show Work"
|
|
↓
|
|
Opens thinking-stream.html?session=xxx
|
|
↓
|
|
Connects to SSE: /stream/thinking/{session}
|
|
↓
|
|
User sends message in main chat
|
|
↓
|
|
FunctionCaller emits events
|
|
↓
|
|
Events appear in thinking stream window
|
|
```
|
|
|
|
## Mobile Support
|
|
|
|
The thinking stream window is responsive:
|
|
- Desktop: Side-by-side windows
|
|
- Mobile: Use browser's tab switcher to swap between chat and thinking stream
|
|
|
|
## Future Enhancements
|
|
|
|
Potential improvements:
|
|
- **Embedded panel**: Option to show thinking stream in a split panel within main UI
|
|
- **Event filtering**: Toggle event types on/off
|
|
- **Export**: Download thinking trace as JSON
|
|
- **Replay**: Replay past thinking sessions
|
|
- **Statistics**: Show timing, token usage per step
|