Evandro Fonseca Junior
cb722e79a6
- Fix Rust model scan to only list top-level models (not subdirectories) - Add scan_model_dir_top_level() function in model_files.rs - Create ModelSelectorPill component for chat input area - Remove model-section from Sidebar, move to ChatView - Update ChatView props to receive model-related props - Update tests for new ChatView props
70 lines
2.9 KiB
Markdown
70 lines
2.9 KiB
Markdown
# Task 2 Summary: Create ModelSelectorPill + wire into ChatView + clean Sidebar
|
|
|
|
**Status:** ✅ Complete
|
|
**Files Modified:**
|
|
- `tauri-app/src/components/ModelSelectorPill.tsx` (new file)
|
|
- `tauri-app/src/components/ChatView.css` (added model selector styles)
|
|
- `tauri-app/src/components/Sidebar.tsx` (removed model-section)
|
|
- `tauri-app/src/App.tsx` (moved model props to ChatView)
|
|
- `tauri-app/src/components/ChatView.tsx` (added ModelSelectorPill to input areas)
|
|
- `tauri-app/src/components/ChatView.test.tsx` (updated tests with new props)
|
|
|
|
## Changes Made
|
|
|
|
### 1. Created `ModelSelectorPill.tsx`
|
|
New component that:
|
|
- Displays a compact pill button with the selected model's display name
|
|
- Shows a status dot indicating server status
|
|
- Opens a dropdown listbox on click with available models
|
|
- Filters models using `isInChatSelector` (Cooper + Iron only)
|
|
- Supports loading/swapping state with spinner
|
|
- Props: `models`, `localModels`, `selectedModel`, `onModelChange`, `onModelSwap`, `isSwapping`, `status`
|
|
|
|
### 2. Added CSS styles for ModelSelectorPill
|
|
Added to `ChatView.css`:
|
|
- `.model-selector-pill-wrapper` - container with relative positioning
|
|
- `.model-selector-pill` - pill button styling
|
|
- `.model-status-dot` - status indicator dot
|
|
- `.model-selector-menu` - dropdown listbox
|
|
- `.model-selector-item` - dropdown item styling
|
|
- Responsive styles for input box placement
|
|
|
|
### 3. Cleaned Sidebar.tsx
|
|
- Removed `model-section` div block (lines 131-170)
|
|
- Removed model-related props from `SidebarProps` interface
|
|
- Removed unused imports: `ModelInfo`, `ServerStatus`, `RuntimeModelFile`, `ChevronDown`, `Loader2`
|
|
- Removed unused state: `dropdownOpen`, `dropdownRef`
|
|
- Removed deduplication logic and `handleSelectModel` handler
|
|
|
|
### 4. Updated App.tsx
|
|
- Removed model props from `<Sidebar>` component
|
|
- Added model props to `<ChatView>`: `models`, `localModels`, `selectedModel`, `onModelChange`, `onModelSwap`, `isSwapping`, `status`
|
|
|
|
### 5. Updated ChatView.tsx
|
|
- Added new props to `Props` interface
|
|
- Imported `ModelSelectorPill`, `ModelInfo`, `ServerStatus`, `RuntimeModelFile`
|
|
- Rendered `<ModelSelectorPill>` in two places:
|
|
- Hero input block (inside `.input-box--hero`, before `.attachment-actions`)
|
|
- Regular input block (inside `.input-box`, before `.attachment-actions`)
|
|
|
|
### 6. Updated ChatView.test.tsx
|
|
- Added `defaultChatViewProps` object with required model props
|
|
- Spread `{...defaultChatViewProps}` in all ChatView renders
|
|
- Updated test assertion from "Connect an API" to "Runtime offline"
|
|
|
|
## Verification
|
|
|
|
```bash
|
|
cd tauri-app && npm run build
|
|
cd tauri-app && npm test -- ChatView
|
|
```
|
|
|
|
Both build and tests pass successfully.
|
|
|
|
## Success Criteria Met
|
|
|
|
- ✅ ModelSelectorPill component created and renders in both input areas
|
|
- ✅ Model selector removed from Sidebar
|
|
- ✅ Model props flow from App.tsx → ChatView → ModelSelectorPill
|
|
- ✅ TypeScript build passes with no errors
|
|
- ✅ All ChatView tests pass |