ed15279dae
Implemented Story 9: Hidden Scroll Bars
- Added CSS to hide scroll bars globally while maintaining functionality
- Used scrollbar-width: none for Firefox
- Used ::-webkit-scrollbar { display: none; } for Chrome/Safari/Edge
- Set overflow-x: hidden to prevent unwanted horizontal scrolling
- Maintained full scroll functionality (mouse wheel, trackpad, keyboard)
Updated Specs
- Added Scroll Bar Styling section to UI_UX.md
- Documented cross-browser compatibility requirements
- Specified areas affected and implementation approach
Bug Fixes
- Fixed biome linting issues in App.tsx (import organization, button type)
- Applied biome formatter for consistent code style
85 lines
4.3 KiB
Markdown
85 lines
4.3 KiB
Markdown
# Functional Spec: UI/UX Responsiveness
|
|
|
|
## Problem
|
|
Currently, the `chat` command in Rust is an async function that performs a long-running, blocking loop (waiting for LLM, executing tools). While Tauri executes this on a separate thread from the UI, the frontend awaits the *entire* result before re-rendering. This makes the app feel "frozen" because there is no feedback during the 10-60 seconds of generation.
|
|
|
|
## Solution: Event-Driven Feedback
|
|
Instead of waiting for the final array of messages, the Backend should emit **Events** to the Frontend in real-time.
|
|
|
|
### 1. Events
|
|
* `chat:token`: Emitted when a text token is generated (Streaming text).
|
|
* `chat:tool-start`: Emitted when a tool call begins (e.g., `{ tool: "git status" }`).
|
|
* `chat:tool-end`: Emitted when a tool call finishes (e.g., `{ output: "..." }`).
|
|
|
|
### 2. Implementation Strategy (MVP)
|
|
For this story, we won't fully implement token streaming (as `reqwest` blocking/async mixed with stream parsing is complex). We will focus on **State Updates**:
|
|
|
|
* **Refactor `chat` command:**
|
|
* Instead of returning `Vec<Message>` at the very end, it accepts a `AppHandle`.
|
|
* Inside the loop, after every step (LLM response, Tool Execution), emit an event `chat:update` containing the *current partial history*.
|
|
* The Frontend listens to `chat:update` and re-renders immediately.
|
|
|
|
### 3. Visuals
|
|
* **Loading State:** The "Send" button should show a spinner or "Stop" button.
|
|
* **Auto-Scroll:** The chat view should stick to the bottom as new events arrive.
|
|
|
|
## Tool Output Display
|
|
|
|
### Problem
|
|
Tool outputs (like file contents, search results, or command output) can be very long, making the chat history difficult to read. Users need to see the Agent's reasoning and responses without being overwhelmed by verbose tool output.
|
|
|
|
### Solution: Collapsible Tool Outputs
|
|
Tool outputs should be rendered in a collapsible component that is **closed by default**.
|
|
|
|
### Requirements
|
|
|
|
1. **Default State:** Tool outputs are collapsed/closed when first rendered
|
|
2. **Summary Line:** Shows essential information without expanding:
|
|
- Tool name (e.g., `read_file`, `exec_shell`)
|
|
- Key arguments (e.g., file path, command name)
|
|
- Format: "▶ tool_name(key_arg)"
|
|
- Example: "▶ read_file(src/main.rs)"
|
|
- Example: "▶ exec_shell(cargo check)"
|
|
3. **Expandable:** User can click the summary to toggle expansion
|
|
4. **Output Display:** When expanded, shows the complete tool output in a readable format:
|
|
- Use `<pre>` or monospace font for code/terminal output
|
|
- Preserve whitespace and line breaks
|
|
- Limit height with scrolling for very long outputs (e.g., max-height: 300px)
|
|
5. **Visual Indicator:** Clear arrow or icon showing collapsed/expanded state
|
|
6. **Styling:** Consistent with the dark theme, distinguishable from assistant messages
|
|
|
|
### Implementation Notes
|
|
* Use native `<details>` and `<summary>` HTML elements for accessibility
|
|
* Or implement custom collapsible component with proper ARIA attributes
|
|
* Tool outputs should be visually distinct (border, background color, or badge)
|
|
* Multiple tool calls in sequence should each be independently collapsible
|
|
|
|
## Scroll Bar Styling
|
|
|
|
### Problem
|
|
Visible scroll bars create visual clutter and make the interface feel less polished. Standard browser scroll bars can be distracting and break the clean aesthetic of the dark theme.
|
|
|
|
### Solution: Hidden Scroll Bars with Maintained Functionality
|
|
Scroll bars should be hidden while maintaining full scroll functionality.
|
|
|
|
### Requirements
|
|
|
|
1. **Visual:** Scroll bars should not be visible to the user
|
|
2. **Functionality:** Scrolling must still work perfectly:
|
|
- Mouse wheel scrolling
|
|
- Trackpad scrolling
|
|
- Keyboard navigation (arrow keys, page up/down)
|
|
- Auto-scroll to bottom for new messages
|
|
3. **Cross-browser:** Solution must work on Chrome, Firefox, and Safari
|
|
4. **Areas affected:**
|
|
- Main chat message area (vertical scroll)
|
|
- Tool output content (both vertical and horizontal)
|
|
- Any other scrollable containers
|
|
|
|
### Implementation Notes
|
|
* Use CSS `scrollbar-width: none` for Firefox
|
|
* Use `::-webkit-scrollbar { display: none; }` for Chrome/Safari/Edge
|
|
* Maintain `overflow: auto` or `overflow-y: scroll` to preserve scroll functionality
|
|
* Ensure `overflow-x: hidden` where horizontal scroll is not needed
|
|
* Test with very long messages and large tool outputs to ensure no layout breaking
|