Skip to Content
Client LayerComponent Architecture

Component Architecture

Layer Separation

The components/ directory is split into three distinct layers with different responsibilities:

components/ai-elements/ — All 44 Components

These are AI-interface-specific components that have no use outside a chat/AI context:

ComponentPurpose
agent.tsxAgent execution display
artifact.tsxGenerated artifact display (code, files)
attachments.tsxFile attachment upload UI
audio-player.tsxAudio playback for voice responses
canvas.tsxDrawing/whiteboard canvas
chain-of-thought.tsxReasoning chain expansion
checkpoint.tsxPipeline checkpoint status
code-block.tsxSyntax-highlighted code with copy
commit.tsxGit commit display
confirmation.tsxAction confirmation prompt
connection.tsxService connection status
context.tsxContext window display
controls.tsxChat generation controls
conversation.tsxConversation thread display
edge.tsxGraph edge rendering
environment-variables.tsxEnv var display
file-tree.tsxFile system tree view
image.tsxAI-generated image display
inline-citation.tsxInline RAG source citation [1]
jsx-preview.tsxLive JSX component preview
message.tsxCore chat message renderer
mic-selector.tsxMicrophone input selector
model-selector.tsxLLM model picker
node.tsxGraph node rendering
open-in-chat.tsx”Open in chat” action
package-info.tsxNPM/PyPI package details
panel.tsxSide panel container
persona.tsxAI persona selector
plan.tsxTask plan display
prompt-input.tsxChat input textarea + actions
queue.tsxTask queue status
reasoning.tsxExtended reasoning display
sandbox.tsxCode execution sandbox
schema-display.tsxJSON schema viewer
shimmer.tsxLoading skeleton shimmer
snippet.tsxCode snippet display
sources.tsxRAG sources list panel
speech-input.tsxVoice-to-text input
stack-trace.tsxError stack trace display
suggestion.tsxSuggested prompt chips
task.tsxIndividual task status
terminal.tsxTerminal command output
test-results.tsxTest suite results
tool.tsxTool call display
toolbar.tsxChat action toolbar
transcription.tsxAudio transcription display
voice-selector.tsxTTS voice picker
web-preview.tsxEmbedded web preview

components/core/ — Page Modules

core/auth/

  • constants.ts — AuthView union type: "signin" | "signup" | "verify" | "forgot-password" | "reset-password"
  • sign-in.tsx, sign-up.tsx, verify.tsx, forgot-password.tsx — form components wired to AuthContext
  • otp-input.tsx — 6-digit OTP input with auto-focus advancement
  • protected-route.tsx — HOC that reads isAuthenticated from AuthContext and redirects to / with ?auth=signin if false

core/chat/

  • chat.tsx — top-level chat shell: renders sidebar + main area, handles conversation selection
  • chatarea/chatarea.tsx — message list + input, auto-scroll, streaming state
  • sidebar/ — conversation list with search, new chat button, conversation items

core/dashboard/

  • dashboard.tsx — reads activeDashboardView from UiContext, renders the correct sub-view
  • Sub-views: overview.tsx (stats), conversations.tsx (user’s conversations), sessions.tsx (active sessions), notifications.tsx, profile.tsx, settings.tsx, contributor.tsx (contributor submissions + personal submission history), admin.tsx (admin-only: user management + resource ingestion), queue.tsx (admin review queue for contributor submissions), ingestion-queue.tsx (real-time ingestion task tracking)

core/landing/

  • Full marketing landing page split into section components
  • data/ directory contains static content data (FAQ answers, feature list, etc.) — no API calls

components/ui/ — Design System

72 components following a consistent API pattern. Key categories:

  • Radix UI wrappers: accordion, alert-dialog, dialog, dropdown-menu, popover, select, tabs, tooltip — all use Radix headless primitives with Tailwind styling
  • Animation primitives: animated-beam, border-beam, ripple-button, rainbow-button, shimmer, spotlight-new — CSS/Framer Motion animations
  • Layout: sidebar, resizable, scroll-area, sheet, drawer — structural layout components
  • Data display: table, chart, badge, avatar, carousel
  • Form primitives: button, input, textarea, checkbox, radio-group, switch, slider, calendar
Last updated on
State ManagementOverview & Module Map