← Back to PRs

#18668: feat(ui/chat): chat UX overhaul

by jasonkneen open 2026-02-16 23:28 View on GitHub →
app: web-ui size: L
This PR overhauls the chat UX with improved compose experience and better message handling. **Changes:** - Enhanced textarea handling with proper ref management instead of querySelector - Improved autosuggest for slash commands and @ mentions - Better message grouping and rendering - Queue expansion state management - Streamlined chat compose experience **Review Feedback Addressed:** - ✅ Fixed potential null querySelector by using stored textarea ref instead of document.querySelector - ✅ Moved module-level state (showSlashMenu, showAtMenu, menuFilter, queueExpanded) to component props with event handlers - ✅ Removed redundant 'as string' cast in grouped-render.ts (typeof check already confirms string type) - ✅ Cursor position already captured at click time in suggestion handlers (no change needed) - ✅ Fixed linting issues (removed 'any' types, unused variables) - ✅ Rebased onto latest upstream/main **Testing:** - Build check passed ✓ - No personal paths in diff ✓ - All linting checks passed ✓ <!-- greptile_comment --> <h3>Greptile Summary</h3> This PR overhauls the chat UX with new slash command autosuggest, `@` mention support, session tabs, collapsible queue drawer, system-event dividers, and compact tool-result cards. Channel cards (Discord, Slack, Signal, Telegram, WhatsApp) are refactored to use a shared `statusChip` helper and consistent header/body layout. - **Critical: `renderAutosuggestMenu` references undeclared variables** — `showSlashMenu`, `showAtMenu`, and `menuFilter` are only declared inside `renderChat` but used in the separate `renderAutosuggestMenu` function, causing a `ReferenceError` at runtime. - **Critical: `textareaEl` is never declared** — passed to `renderAutosuggestMenu` at line 697 but no such variable exists in `renderChat` scope, causing another `ReferenceError`. - **TypeScript error in `getSessionDisplayName`** — parameter typed as `unknown` while directly accessing `.label`, `.displayName`, and `.key` properties. - Channel card refactoring and tool-cards simplification look clean with no logic issues. <h3>Confidence Score: 1/5</h3> - This PR will crash at runtime due to two undeclared variable references in the chat compose area. - Two separate ReferenceError bugs will prevent the chat compose section from rendering: (1) renderAutosuggestMenu uses showSlashMenu/showAtMenu/menuFilter which are out of scope, and (2) textareaEl is never declared. These are not edge cases — they will fire every time the chat view renders. Additionally, getSessionDisplayName has a TypeScript type error accessing properties on unknown. - Pay close attention to ui/src/ui/views/chat.ts — it contains all three identified issues. <sub>Last reviewed commit: e50eb70</sub> <!-- greptile_other_comments_section --> <!-- /greptile_comment -->

Most Similar PRs