Skip to content

components.md

Latest commit

 

History

History
47 lines (37 loc) · 5.27 KB

components.md

File metadata and controls

47 lines (37 loc) · 5.27 KB

Project Components

This document lists and describes the React components present in the project src/components directory.

Root Components

Located in src/components/

  • ApiKeyCheck: Ensures the NEXT_PUBLIC_TAMBO_API_KEY is present. Displays an alert if missing, otherwise renders its children.
  • Footer: The application footer containing product identity, architecture signal, and meta links.
  • Navbar: The main navigation bar with brand, system state indicator, and action buttons.

Hero Components

Located in src/components/hero/

  • AboutSection: A section describing IndentOS with text content and visual blocks.
  • FAQSection: Displays a list of frequently asked questions in an accordion style.
  • Hero: The main hero section of the landing page with title, description, and call-to-action buttons.

UI Components

Located in src/components/ui/

  • DataCard: A multi-select component that displays options as clickable cards with titles, descriptions, and links.

Tambo Components

Located in src/components/tambo/

These components are part of the Tambo AI integration for chat and interaction.

  • DictationButton: A button that enables voice input using useTamboVoice. Handles recording and transcription.
  • ElicitationUI: Dynamically renders form inputs based on a schema to elicit information from the user (Single and Multi-entry modes).
  • Graph: Renders various types of charts (bar, line, pie) using recharts with error handling and loading states.
  • MarkdownComponents: Configuration and custom component definitions for Streamdown markdown rendering (code blocks, primitive elements, etc.).
  • McpComponents: Contains buttons for MCP integration:
    • McpPromptButton: Inserts prompts from MCP servers.
    • McpResourceButton: Inserts resource references from MCP servers.
  • McpConfigModal: A modal dialog for configuring client-side MCP server connections.
  • MessageGenerationStage: Displays the current state of message generation (e.g., "Fetching context", "Generating response").
  • MessageInput: A comprehensive input component for the chat thread. Handles text entry, file attachments (drag & drop), and MCP integrations.
  • MessageSuggestions: Displays AI-generated reply suggestions for the user.
  • MessageThreadFull: A full-screen chat interface composition including the sidebar, thread container, message list, and input area.
  • Message: Renders a single message in the thread, including text content, images, reasoning steps, and tool calls.
  • ScrollableMessageContainer: A wrapper that handles auto-scrolling to the bottom of the chat as new messages arrive.
  • SuggestionsTooltip: A tooltip component wrapper used for displaying suggestion shortcuts.
  • TextEditor: A TipTap-based rich text editor enabling @-mentions for resources and /-commands for prompts.
  • ThreadContainer: Manages the layout of the thread view, adjusting for the sidebar and optional canvas availability.
  • ThreadContent: Renders the list of messages (ThreadContentMessages) using data from the useTambo hook.
  • ThreadHistory: A sidebar component that displays the list of past conversation threads with search and rename capabilities.