Component Library

Reusable React components for IfAI.

Layout Components

Header

Application header with navigation.

import { Header } from '@/components/layout/Header'

<Header 
  title="My Project"
  onBack={() => history.back()}
/>

Props:

• title (string): Page title
• onBack (function): Back button handler

Sidebar

Collapsible sidebar component.

import { Sidebar } from '@/components/layout/Sidebar'

<Sidebar 
  collapsed={false}
  onToggle={() => setCollapsed(!collapsed)}
>
  <Sidebar.Item icon="folder">Projects</Sidebar.Item>
  <Sidebar.Item icon="settings">Settings</Sidebar.Item>
</Sidebar>

Props:

• collapsed (boolean): Collapse state
• onToggle (function): Toggle handler
• children (ReactNode): Sidebar items

Editor Components

MonacoEditor

Monaco Editor wrapper.

import { MonacoEditor } from '@/components/editor/MonacoEditor'

<MonacoEditor
  value={code}
  language="typescript"
  onChange={setCode}
  theme="vs-dark"
  options={{
    minimap: { enabled: false },
    fontSize: 14
  }}
/>

Props:

• value (string): Editor content
• language (string): Programming language
• onChange (function): Change handler
• theme (string): Editor theme
• options (object): Monaco options

MiniMap

Code minimap component.

import { MiniMap } from '@/components/editor/MiniMap'

<MiniMap 
  editor={editorRef}
  position="right"
/>

Props:

• editor (object): Monaco editor instance
• position (string): Position (left/right)

AI Components

ChatPanel

AI chat interface.

import { ChatPanel } from '@/components/AIChat/ChatPanel'

<ChatPanel
  messages={messages}
  onSend={(message) => addMessage(message)}
  onClear={() => clearMessages()}
/>

Props:

• messages (Message[]): Chat history
• onSend (function): Send message handler
• onClear (function): Clear chat handler

MessageList

Display chat messages.

import { MessageList } from '@/components/AIChat/MessageList'

<MessageList 
  messages={messages}
  onRetry={(index) => retryMessage(index)}
/>

Props:

• messages (Message[]): Messages to display
• onRetry (function): Retry message handler

CodeBlock

Display code with syntax highlighting.

import { CodeBlock } from '@/components/AIChat/CodeBlock'

<CodeBlock
  code="function test() { return true; }"
  language="typescript"
  onInsert={(code) => insertCode(code)}
/>

Props:

• code (string): Code to display
• language (string): Programming language
• onInsert (function): Insert code handler

File Components

FileTree

Project file browser.

import { FileTree } from '@/components/FileTree/FileTree'

<FileTree
  root="/path/to/project"
  onFileSelect={(file) => openFile(file)}
  onFolderToggle={(folder) => toggleFolder(folder)}
/>

Props:

• root (string): Project root path
• onFileSelect (function): File selection handler
• onFolderToggle (function): Folder toggle handler

TreeNode

Individual tree node.

import { TreeNode } from '@/components/FileTree/TreeNode'

<TreeNode
  name="src"
  type="folder"
  expanded={true}
  children={[...]}
/>

Props:

• name (string): Node name
• type (string): Node type (folder/file)
• expanded (boolean): Expanded state
• children (ReactNode): Child nodes

Terminal Components

Terminal

Integrated terminal.

import { Terminal } from '@/components/Terminal/Terminal'

<Terminal
  shell="/bin/zsh"
  cwd="/path/to/project"
  onCommandComplete={(output) => handleOutput(output)}
/>

Props:

• shell (string): Shell program
• cwd (string): Working directory
• onCommandComplete (function): Command completion handler

Common Components

Button

Styled button component.

import { Button } from '@/components/common/Button'

<Button 
  variant="primary" 
  size="medium"
  onClick={handleClick}
>
  Click me
</Button>

Props:

• variant (string): Button style (primary/secondary/ghost)
• size (string): Button size (small/medium/large)
• disabled (boolean): Disabled state
• onClick (function): Click handler
• children (ReactNode): Button content

Input

Text input component.

import { Input } from '@/components/common/Input'

<Input
  type="text"
  placeholder="Enter text..."
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

Props:

• type (string): Input type
• placeholder (string): Placeholder text
• value (string): Input value
• onChange (function): Change handler
• disabled (boolean): Disabled state

Modal

Dialog/modal component.

import { Modal } from '@/components/common/Modal'

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Dialog Title"
>
  <p>Modal content</p>
</Modal>

Props:

• isOpen (boolean): Open state
• onClose (function): Close handler
• title (string): Modal title
• children (ReactNode): Modal content

Composer Components

Composer

Multi-file editing interface.

import { Composer } from '@/components/Composer/Composer'

<Composer
  changes={proposedChanges}
  onApply={(selected) => applyChanges(selected)}
  onReject={(selected) => rejectChanges(selected)}
/>

Props:

• changes (Change[]): Proposed changes
• onApply (function): Apply selected changes
• onReject (function): Reject selected changes

DiffView

Show code diff.

import { DiffView } from '@/components/Composer/DiffView'

<DiffView
  original={originalCode}
  modified={modifiedCode}
  language="typescript"
/>

Props:

• original (string): Original code
• modified (string): Modified code
• language (string): Programming language

Styling

All components use Tailwind CSS. Theme colors:

// colors.ts
export const colors = {
  primary: '#3b82f6',
  secondary: '#6b7280',
  success: '#10b981',
  warning: '#f59e0b',
  error: '#ef4444',
}

Next Steps

• Frontend Guide - Using components
• State Management - Component state
• API Reference - Component integration