feat: console chat

[sergiofilhowz]

Summary by CodeRabbit

Release Notes

• New Features
  • Launched a complete chat application with real-time streaming responses.
  • Added conversation management with persistent sidebar, create/rename/delete functionality.
  • Integrated rich text editor with function mentions and file attachment support.
  • Implemented message variants including thoughts, function calls, and interactive approval flows.
  • Added dark/light theme toggle with local persistence.
  • Created interactive examples and documentation playground.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 185c6147-5ef2-4356-9e4d-526bc5d08b03

📥 Commits

Reviewing files that changed from the base of the PR and between 24f5941 and e2597fc.

📒 Files selected for processing (60)

• console/web/.gitignore
• console/web/PLAYGROUND.md
• console/web/README.md
• console/web/biome.json
• console/web/index.html
• console/web/package.json
• console/web/src/App.tsx
• console/web/src/components/chat/AttachmentButton.tsx
• console/web/src/components/chat/AttachmentChip.tsx
• console/web/src/components/chat/ChatView.tsx
• console/web/src/components/chat/Composer.tsx
• console/web/src/components/chat/FunctionCallMessage.tsx
• console/web/src/components/chat/LexicalShell.tsx
• console/web/src/components/chat/Message.tsx
• console/web/src/components/chat/MessageList.tsx
• console/web/src/components/chat/ModePicker.tsx
• console/web/src/components/chat/ModelPicker.tsx
• console/web/src/components/chat/ThoughtMessage.tsx
• console/web/src/components/chat/lexical/FunctionMentionNode.tsx
• console/web/src/components/chat/lexical/FunctionMentionTransformPlugin.tsx
• console/web/src/components/chat/lexical/MentionsPlugin.tsx
• console/web/src/components/sidebar/ConversationRow.tsx
• console/web/src/components/sidebar/ConversationSidebar.tsx
• console/web/src/components/ui/Button.tsx
• console/web/src/components/ui/Caret.tsx
• console/web/src/components/ui/ModeToggle.tsx
• console/web/src/components/ui/Prompt.tsx
• console/web/src/components/ui/Select.tsx
• console/web/src/components/ui/Sheet.tsx
• console/web/src/components/ui/StatusDot.tsx
• console/web/src/components/ui/Wordmark.tsx
• console/web/src/hooks/use-conversations.ts
• console/web/src/hooks/use-hash-route.ts
• console/web/src/hooks/use-theme.ts
• console/web/src/index.css
• console/web/src/lib/backend/index.ts
• console/web/src/lib/backend/mock.ts
• console/web/src/lib/backend/real.ts
• console/web/src/lib/backend/types.ts
• console/web/src/lib/functions.ts
• console/web/src/lib/markdown.tsx
• console/web/src/lib/storage.ts
• console/web/src/lib/syntax.tsx
• console/web/src/lib/utils.ts
• console/web/src/main.tsx
• console/web/src/pages/Chat.tsx
• console/web/src/pages/Examples/Section.tsx
• console/web/src/pages/Examples/index.tsx
• console/web/src/pages/Examples/sections/color-tokens.tsx
• console/web/src/pages/Examples/sections/composer-variants.tsx
• console/web/src/pages/Examples/sections/loading-states.tsx
• console/web/src/pages/Examples/sections/message-variants.tsx
• console/web/src/pages/Examples/sections/primitives.tsx
• console/web/src/pages/Examples/sections/typography.tsx
• console/web/src/types/chat.ts
• console/web/src/vite-env.d.ts
• console/web/tsconfig.app.json
• console/web/tsconfig.json
• console/web/tsconfig.node.json
• console/web/vite.config.ts

---

📝 Walkthrough

Walkthrough

A complete React + Vite web chat application scaffold with TypeScript, featuring a Lexical-based rich text editor, streaming message types (user/assistant/thought/function-call), conversation persistence, file attachments, function-mention typeahead, theme switching, and comprehensive UI component system. Backend streaming contract (StreamEvent) defined with mock and real stubs; design system and example pages included.

Changes

Web Chat Application Scaffold

Layer / File(s)	Summary
Project Setup & Build Configuration console/web/.gitignore, package.json, biome.json, tsconfig.*.json, vite.config.ts, index.html	Build tooling, package manager configuration, TypeScript strict compiler settings, Vite bundler, HTML entry point with localStorage theme initialization.
Type System & Domain Model src/types/chat.ts, src/vite-env.d.ts	Core chat domain types: Mode (plan/ask/agent), ModelId union, message role/variant interfaces (UserMessage/AssistantMessage/ThoughtMessage/FunctionCallMessage), Message union, MessagePatch contract, Conversation with persistence metadata, Attachment structure.
Backend Streaming Contract & Mock Implementation src/lib/backend/types.ts, mock.ts, real.ts, index.ts	Defines StreamEvent discriminated union (thought/fcall/assistant tokens) and ChatBackend interface; mock backend emits staged thought/function-call/assistant responses; real backend stub throws configuration error with guidance; conditional backend selection via VITE_PLAYGROUND flag.
UI Primitives & Theme Foundation src/lib/utils.ts, src/index.css, src/components/ui/*.tsx	Utility class merging (cn), custom CSS theme variables (light/dark), Tailwind utilities (pulse-dot, blink, wiggle, thinking-shimmer animations), base UI components (Button with variants, Select, ModeToggle, Prompt, Caret, StatusDot, Wordmark, Sheet).
Lexical Editor Infrastructure with Function Mentions src/components/chat/LexicalShell.tsx, lexical/FunctionMentionNode.tsx, FunctionMentionTransformPlugin.tsx, MentionsPlugin.tsx	Lexical composer wrapper managing plain-text editing, submit-on-enter, clear-on-demand, disabled state; FunctionMentionNode decorator for @fn(id) inline mentions with selection/deletion behavior; transform plugin auto-converting text patterns to nodes; mentions typeahead plugin with FlipMenu dropdown handling viewport overflow.
Message Types & Content Rendering src/components/chat/Message.tsx, ThoughtMessage.tsx, FunctionCallMessage.tsx, MessageList.tsx, src/lib/markdown.tsx, syntax.tsx, src/lib/functions.ts	Message role-dispatching component with role-specific subcomponents; Markdown component with @fn() mention parsing and JSON fenced-block syntax highlighting; function entry registry with fuzzy filtering; MessageList with auto-scroll and empty-state UI.
Composer Input with Attachments & Model/Mode Selection src/components/chat/Composer.tsx, AttachmentButton.tsx, AttachmentChip.tsx, ModePicker.tsx, ModelPicker.tsx	Composer managing Lexical-based text editing, attachment state, mode/model selection, and submit/stop callbacks; file picker with metadata and preview generation (images/text); attachment display chips with remove action; mode/model dropdown pickers.
ChatView Streaming Orchestration src/components/chat/ChatView.tsx	Orchestrates backend streaming: appends user message, starts AbortController, iteratively processes StreamEvent arrivals (thought/fcall/assistant tokens), patches message state, handles abort/error cleanup, renders message list and composer with streaming UI feedback.
Conversation State Management & Persistence src/hooks/use-conversations.ts, src/lib/storage.ts	useConversations hook managing conversation CRUD (createNew, select, rename, remove), model/mode updates, message append/patch with auto-title derivation; localStorage persistence (loadConversations, saveConversations, loadActiveId, saveActiveId) with validation; id generation and title normalization.
Conversation Sidebar & List Management src/components/sidebar/ConversationRow.tsx, ConversationSidebar.tsx	ConversationSidebar rendering conversation list with create-new button; ConversationRow with inline title editing (F2 to edit, Enter/Escape to commit/cancel), relative timestamps, and delete button; integrated with conversation callbacks.
App Shell, Routing & Theme Management src/App.tsx, src/main.tsx, src/hooks/use-hash-route.ts, use-theme.ts	Root App component with hash-based routing (chat/examples/playground), feature-gated lazy loading of Playground/Examples via VITE_PLAYGROUND flag, Header display; useHashRoute and useTheme hooks managing view/theme state; React DOM bootstrap with StrictMode.
Chat Page Integration src/pages/Chat.tsx	Chat page component wiring ConversationSidebar and ChatView via conversation state, rendering active conversation interface or "no selection" prompt.
Examples & Playground Pages src/pages/Examples/index.tsx, Section.tsx, sections/*.tsx	Examples page with table-of-contents and showcase sections (ColorTokensSection, ComposerVariantsSection, LoadingStatesSection, MessageVariantsSection, PrimitivesSection, TypographySection); layout components (Section, VariantCard) for structured page composition.
Documentation & Contracts README.md, PLAYGROUND.md	README describing project structure, quickstart, features, backend implementation guidance with OpenAI example, design system reference; PLAYGROUND.md defining streaming contract, scenario registry, VITE_PLAYGROUND flag behavior, and scenario addition instructions.

🎯 4 (Complex) | ⏱️ ~60 minutes

In the garden of code, seeds of chat now bloom so bright,
With Lexical mention-nodes dancing in the light,
Streaming thoughts and function calls, a tapestry complete,
A rabbit's scaffold hops with joy—the web app's now so neat! 🐰✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/console-chat

[github-actions]

skill-check — worker

0 verified, 25 skipped (no docs/).

Layer	Result
structure	✓
vale	✓
ai	✓

Three for three. Nicely done.