|
| 1 | +# AI Elements Integration - Detailed Task List |
| 2 | + |
| 3 | +## ANALYSIS COMPLETE |
| 4 | + |
| 5 | +### Current State: |
| 6 | + |
| 7 | +- **chat-input.tsx**: Uses simple MicIcon button (line 210) - needs SpeechInput component |
| 8 | +- **chat-messages.tsx**: Has type guards imported from 'ai' but uses custom rendering for file parts (lines 895-903) |
| 9 | +- **Unused 'ai' imports**: Many type guards and helpers available but not actively used for type narrowing |
| 10 | + |
| 11 | +### Files to Modify: |
| 12 | + |
| 13 | +1. `app/chat/components/chat-input.tsx` - Replace MicIcon with SpeechInput |
| 14 | +2. `app/chat/components/chat-messages.tsx` - Integrate Attachments, AudioPlayer components |
| 15 | + |
| 16 | +--- |
| 17 | + |
| 18 | +## TODO LIST |
| 19 | + |
| 20 | +### TASK 001: Update chat-input.tsx - Add SpeechInput Integration |
| 21 | + |
| 22 | +**Status:** COMPLETED ✓ |
| 23 | +**File:** `app/chat/components/chat-input.tsx` |
| 24 | +**Lines:** ~210 (MicIcon button area) |
| 25 | + |
| 26 | +**Sub-tasks:** |
| 27 | + |
| 28 | +- [x] 001a: Import SpeechInput component from '@/src/components/ai-elements/speech-input' |
| 29 | +- [x] 001b: Add useState for speech transcription text (uses existing input state) |
| 30 | +- [x] 001c: Create handleTranscriptionChange callback to append text to input |
| 31 | +- [x] 001d: Replace MicIcon button (lines ~201-211) with SpeechInput component |
| 32 | +- [x] 001e: Add onAudioRecorded callback for MediaRecorder fallback support |
| 33 | +- [x] 001f: Test TypeScript compilation (LSP errors are pre-existing, not from this change) |
| 34 | + |
| 35 | +**Components to integrate:** |
| 36 | + |
| 37 | +- SpeechInput (from speech-input.tsx) |
| 38 | +- Uses: onTranscriptionChange, onAudioRecorded, lang props |
| 39 | + |
| 40 | +--- |
| 41 | + |
| 42 | +### TASK 002: Update chat-messages.tsx - Add Attachments Integration |
| 43 | + |
| 44 | +**Status:** NOT STARTED |
| 45 | +**File:** `app/chat/components/chat-messages.tsx` |
| 46 | +**Lines:** ~895-903 (fileParts rendering) |
| 47 | + |
| 48 | +**Sub-tasks:** |
| 49 | + |
| 50 | +- [ ] 002a: Import Attachments components from '@/src/components/ai-elements/attachments' |
| 51 | +- [ ] 002b: Locate current fileParts rendering code (lines 895-903) |
| 52 | +- [ ] 002c: Replace custom Badge-based file rendering with Attachments component |
| 53 | +- [ ] 002d: Map FileUIPart[] to AttachmentData[] format |
| 54 | +- [ ] 002e: Ensure type imports from 'ai' (FileUIPart, isFileUIPart) are used |
| 55 | +- [ ] 002f: Test TypeScript compilation |
| 56 | + |
| 57 | +**Components to integrate:** |
| 58 | + |
| 59 | +- Attachments, Attachment, AttachmentPreview, AttachmentInfo, AttachmentRemove (from attachments.tsx) |
| 60 | + |
| 61 | +--- |
| 62 | + |
| 63 | +### TASK 003: Update chat-messages.tsx - Add AudioPlayer Integration |
| 64 | + |
| 65 | +**Status:** NOT STARTED |
| 66 | +**File:** `app/chat/components/chat-messages.tsx` |
| 67 | + |
| 68 | +**Sub-tasks:** |
| 69 | + |
| 70 | +- [ ] 003a: Import AudioPlayer from '@/src/components/ai-elements/audio-player' |
| 71 | +- [ ] 003b: Identify where audio FileUIPart messages are rendered |
| 72 | +- [ ] 003c: Add conditional rendering for audio mediaType files |
| 73 | +- [ ] 003d: Integrate AudioPlayer for audio file parts |
| 74 | +- [ ] 003e: Test TypeScript compilation |
| 75 | + |
| 76 | +**Components to integrate:** |
| 77 | + |
| 78 | +- AudioPlayer (from audio-player.tsx) |
| 79 | + |
| 80 | +--- |
| 81 | + |
| 82 | +### TASK 004: Update chat-messages.tsx - Add Transcription Integration |
| 83 | + |
| 84 | +**Status:** NOT STARTED |
| 85 | +**File:** `app/chat/components/chat-messages.tsx` |
| 86 | + |
| 87 | +**Sub-tasks:** |
| 88 | + |
| 89 | +- [ ] 004a: Import Transcription from '@/src/components/ai-elements/transcription' |
| 90 | +- [ ] 004b: Import Experimental_SpeechResult type from 'ai' |
| 91 | +- [ ] 004c: Add Transcription component for speech-to-text display |
| 92 | +- [ ] 004d: Test TypeScript compilation |
| 93 | + |
| 94 | +**Components to integrate:** |
| 95 | + |
| 96 | +- Transcription (from transcription.tsx) |
| 97 | + |
| 98 | +--- |
| 99 | + |
| 100 | +### TASK 005: Verify and Leverage 'ai' Package Type Imports |
| 101 | + |
| 102 | +**Status:** NOT STARTED |
| 103 | +**Files:** `app/chat/components/chat-messages.tsx`, `app/chat/components/chat-input.tsx` |
| 104 | + |
| 105 | +**Sub-tasks:** |
| 106 | + |
| 107 | +- [ ] 005a: List all imported types from 'ai' in chat-messages.tsx |
| 108 | +- [ ] 005b: Identify which types are NOT actively used for type narrowing |
| 109 | +- [ ] 005c: Add active type narrowing using isFileUIPart, isTextUIPart, etc. |
| 110 | +- [ ] 005d: Replace any 'as' type assertions with proper type guards |
| 111 | +- [ ] 005e: Verify all unused imports serve a purpose (keep them as requested) |
| 112 | + |
| 113 | +**Types from 'ai' to leverage:** |
| 114 | + |
| 115 | +- isFileUIPart, isTextUIPart, isReasoningUIPart, isToolUIPart, isDataUIPart, isStaticToolUIPart |
| 116 | +- FileUIPart, TextUIPart, ReasoningUIPart, ToolUIPart, DataUIPart |
| 117 | + |
| 118 | +--- |
| 119 | + |
| 120 | +## PROGRESS TRACKING |
| 121 | + |
| 122 | +| Task | Status | File | Started | Completed | |
| 123 | +| ---- | ----------- | ----------------- | ------- | --------- | |
| 124 | +| 001 | NOT STARTED | chat-input.tsx | - | - | |
| 125 | +| 002 | NOT STARTED | chat-messages.tsx | - | - | |
| 126 | +| 003 | NOT STARTED | chat-messages.tsx | - | - | |
| 127 | +| 004 | NOT STARTED | chat-messages.tsx | - | - | |
| 128 | +| 005 | NOT STARTED | both | - | - | |
| 129 | + |
| 130 | +--- |
| 131 | + |
| 132 | +## COMPONENTS AVAILABLE BUT NOT INTEGRATED (31 total) |
| 133 | + |
| 134 | +### Priority 1 (Chat Input): |
| 135 | + |
| 136 | +1. ~~SpeechInput~~ (TASK 001) |
| 137 | + |
| 138 | +### Priority 2 (Message Rendering): |
| 139 | + |
| 140 | +2. ~~Attachments~~ (TASK 002) |
| 141 | +3. ~~AudioPlayer~~ (TASK 003) |
| 142 | +4. ~~Transcription~~ (TASK 004) |
| 143 | + |
| 144 | +### Priority 3 (Future - Not in current todo): |
| 145 | + |
| 146 | +5. agent.tsx |
| 147 | +6. canvas.tsx |
| 148 | +7. commit.tsx |
| 149 | +8. connection.tsx |
| 150 | +9. controls.tsx |
| 151 | +10. custom/ |
| 152 | +11. edge.tsx |
| 153 | +12. environment-variables.tsx |
| 154 | +13. file-tree.tsx |
| 155 | +14. image.tsx |
| 156 | +15. jsx-preview.tsx |
| 157 | +16. mic-selector.tsx |
| 158 | +17. node.tsx |
| 159 | +18. open-in-chat.tsx |
| 160 | +19. package-info.tsx |
| 161 | +20. panel.tsx |
| 162 | +21. persona.tsx |
| 163 | +22. sandbox.tsx |
| 164 | +23. schema-display.tsx |
| 165 | +24. shimmer.tsx |
| 166 | +25. snippet.tsx |
| 167 | +26. stack-trace.tsx |
| 168 | +27. terminal.tsx |
| 169 | +28. test-results.tsx |
| 170 | +29. tools/ |
| 171 | +30. voice-selector.tsx |
| 172 | +31. toolbar.tsx (partially used) |
| 173 | + |
| 174 | +--- |
| 175 | + |
| 176 | +Last Updated: 2026-02-16 |
0 commit comments