@app-studio/web 0.9.80 → 0.9.82

package/docs/components/ChatInput.mdx

@@ -1,1039 +0,0 @@
-# ChatInput
-
-A customizable chat input component with file upload support, mentions, suggestions, audio recording, and model selection.
-
-## **Import**
-```tsx
-import { ChatInput } from '@app-studio/web';
-```
-
-## **Overview**
-
-The ChatInput component is a feature-rich, production-ready chat input with comprehensive file handling capabilities. It provides:
-
-- **File Upload Management**: Support for single and multiple file uploads with drag-and-drop
-- **Progress Tracking**: Real-time upload progress monitoring
-- **File Validation**: Built-in file size validation (50MB limit)
-- **Audio Recording**: Optional audio recording with automatic file conversion
-- **Mentions & Suggestions**: Auto-completion for mentions and suggestions
-- **Agent Integration**: Support for running agents with stop functionality
-- **Customizable Styling**: Flexible theming through the `views` prop
-- **Accessibility**: Keyboard shortcuts and screen reader support
-
-### **Key Features**
-
-1. **Automatic File Queue Management**: Files are automatically queued and uploaded sequentially
-2. **Drag-and-Drop Support**: Built-in drag-and-drop with visual feedback
-3. **File Attachments Display**: Uploaded files are displayed as removable attachments
-4. **Error Handling**: Comprehensive error handling with customizable error messages
-5. **Model Selection**: Support for AI model selection with thinking mode
-6. **Prompt Examples**: Display clickable prompt examples for quick input
-
-## **Basic Usage**
-
-### **Default**
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const DefaultChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      onSubmit={(message) => console.log('Message:', message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-## **Required Props**
-
-### **getPendingFiles**
-Function to retrieve the current list of pending files. This is required for the component to access files that are staged for upload.
-
-- **Type:** `() => File[]`
-- **Required:** `true`
-
-### **clearPendingFiles**
-Function to clear all pending files. This is typically called after a successful submission or when files need to be reset.
-
-- **Type:** `() => void`
-- **Required:** `true`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const FileManagementExample = () => {
-  const [pendingFiles, setPendingFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      onSubmit={(message) => {
-        console.log('Message:', message);
-        console.log('Files:', pendingFiles);
-        // Clear files after submission
-        setPendingFiles([]);
-      }}
-      getPendingFiles={() => pendingFiles}
-      clearPendingFiles={() => setPendingFiles([])}
-    />
-  );
-};
-```
-
-## **Core Props**
-
-### **onSubmit**
-Callback function when the form is submitted.
-
-- **Type:** `(message: string, options?: { model_name?: string; enable_thinking?: boolean }) => void`
-- **Required:** `true`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const SubmitChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      onSubmit={(message, options) => {
-        console.log('Message:', message);
-        console.log('Model:', options?.model_name);
-        console.log('Thinking:', options?.enable_thinking);
-      }}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **placeholder**
-Placeholder text for the input.
-
-- **Type:** `string`
-- **Default:** `'Type a message...'`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const PlaceholderChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      placeholder="Ask me anything..."
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **loading**
-Whether the input is in a loading state.
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const LoadingChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [loading, setLoading] = useState(false);
-  
-  return (
-    <ChatInput 
-      loading={loading}
-      onSubmit={(message) => {
-        setLoading(true);
-        setTimeout(() => setLoading(false), 2000);
-      }}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **disabled**
-Whether the input is disabled.
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const DisabledChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      disabled
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **value & onChange**
-Controlled input value.
-
-- **Type:** `string` & `(value: string) => void`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const ControlledChatInput = () => {
-  const [value, setValue] = useState('');
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      value={value}
-      onChange={setValue}
-      onSubmit={(message) => {
-        console.log(message);
-        setValue('');
-      }}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **onFileUpload**
-Function to execute file upload. The parent component should provide this to handle the actual file upload logic.
-
-- **Type:** `(file: File) => void`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { UploadService } from 'src/services/api';
-
-export const FileUploadChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  const uploadFileRequest = UploadService.useUploadControllerFileService({
-    onProgress: (p) => console.log('Progress:', p),
-    onSuccess: (data) => console.log('Success:', data),
-    onError: (err) => console.error('Error:', err),
-  });
-  
-  return (
-    <ChatInput 
-      onFileUpload={(file) => uploadFileRequest.run({ file })}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **onUploadProgress**
-Callback when file upload progress changes.
-
-- **Type:** `(progress: number) => void`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { UploadService } from 'src/services/api';
-
-export const UploadProgressChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [progress, setProgress] = useState(0);
-  
-  const uploadFileRequest = UploadService.useUploadControllerFileService({
-    onProgress: (p) => setProgress(p),
-    onSuccess: () => setProgress(0),
-    onError: () => setProgress(0),
-  });
-  
-  return (
-    <>
-      {progress > 0 && <div>Upload Progress: {progress}%</div>}
-      <ChatInput 
-        onFileUpload={(file) => uploadFileRequest.run({ file })}
-        onUploadProgress={(p) => console.log('Upload progress:', p)}
-        onSubmit={(message) => console.log(message)}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-    </>
-  );
-};
-```
-
-### **onUploadSuccess**
-Callback when file upload succeeds.
-
-- **Type:** `(data: any) => void`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { UploadService } from 'src/services/api';
-
-export const UploadSuccessChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  const uploadFileRequest = UploadService.useUploadControllerFileService({});
-  
-  return (
-    <ChatInput 
-      onFileUpload={(file) => uploadFileRequest.run({ file })}
-      onUploadSuccess={(data) => {
-        console.log('Upload successful:', data);
-        // Perform additional actions on success
-      }}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **onUploadError**
-Callback when file upload fails.
-
-- **Type:** `(error: any) => void`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { UploadService } from 'src/services/api';
-
-export const UploadErrorChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [error, setError] = useState<string>('');
-  
-  const uploadFileRequest = UploadService.useUploadControllerFileService({});
-  
-  return (
-    <>
-      {error && <div style={{ color: 'red' }}>{error}</div>}
-      <ChatInput 
-        onFileUpload={(file) => uploadFileRequest.run({ file })}
-        onUploadError={(err) => {
-          console.error('Upload failed:', err);
-          setError('Failed to upload file. Please try again.');
-        }}
-        onSubmit={(message) => console.log(message)}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-    </>
-  );
-};
-```
-
-## **File Upload Management**
-
-The ChatInput component provides comprehensive file upload capabilities with support for drag-and-drop, multiple file selection, progress tracking, and file validation. Here's how to properly manage file uploads:
-
-### **Complete File Upload Example**
-
-This example demonstrates the complete file upload workflow with all features:
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { UploadService } from 'src/services/api';
-
-export const CompleteFileUploadExample = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [error, setError] = useState<string>('');
-  
-  const uploadFileRequest = UploadService.useUploadControllerFileService({
-    onProgress: (progress) => {
-      setUploadProgress(progress);
-      console.log(`Upload progress: ${progress}%`);
-    },
-    onSuccess: (data) => {
-      console.log('Upload successful:', data);
-      setUploadProgress(0);
-      setError('');
-    },
-    onError: (err) => {
-      console.error('Upload failed:', err);
-      setError('Failed to upload file. Please try again.');
-      setUploadProgress(0);
-    },
-  });
-  
-  return (
-    <>
-      {error && <div style={{ color: 'red', marginBottom: 8 }}>{error}</div>}
-      {uploadProgress > 0 && (
-        <div style={{ marginBottom: 8 }}>
-          Upload Progress: {uploadProgress}%
-        </div>
-      )}
-      
-      <ChatInput 
-        onFileUpload={(file) => uploadFileRequest.run({ file })}
-        onUploadProgress={setUploadProgress}
-        onUploadSuccess={(data) => {
-          console.log('File uploaded:', data);
-          setError('');
-        }}
-        onUploadError={(err) => {
-          setError(err.message || 'Upload failed');
-        }}
-        onSubmit={(message) => {
-          console.log('Message:', message);
-          console.log('Attached files:', files);
-          setFiles([]);
-        }}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-    </>
-  );
-};
-```
-
-### **Drag and Drop Support**
-
-The ChatInput component automatically supports drag-and-drop file uploads. Simply drag files over the input area:
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const DragDropExample = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      onFileUpload={(file) => {
-        console.log('File dropped:', file.name);
-        // Handle file upload
-      }}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-      // The component automatically handles drag-over visual feedback
-    />
-  );
-};
-```
-
-### **Multiple File Upload**
-
-The ChatInput supports uploading multiple files at once. Files are processed sequentially:
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const MultipleFilesExample = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
-  
-  const handleFileUpload = (file: File) => {
-    console.log('Uploading file:', file.name);
-    
-    // Simulate upload
-    setTimeout(() => {
-      setUploadedFiles(prev => [...prev, file]);
-      console.log('File uploaded successfully:', file.name);
-    }, 1000);
-  };
-  
-  return (
-    <div>
-      <div style={{ marginBottom: 8 }}>
-        Uploaded files: {uploadedFiles.length}
-      </div>
-      
-      <ChatInput 
-        onFileUpload={handleFileUpload}
-        onSubmit={(message) => {
-          console.log('Message:', message);
-          console.log('All files:', uploadedFiles);
-          setUploadedFiles([]);
-        }}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-    </div>
-  );
-};
-```
-
-### **File Size Validation**
-
-The component includes built-in file size validation (50MB limit by default):
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const FileSizeValidationExample = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [error, setError] = useState<string>('');
-  
-  const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
-  
-  return (
-    <>
-      {error && <div style={{ color: 'red' }}>{error}</div>}
-      
-      <ChatInput 
-        onFileUpload={(file) => {
-          if (file.size > MAX_FILE_SIZE) {
-            setError(`File "${file.name}" exceeds 50MB limit`);
-            return;
-          }
-          
-          setError('');
-          console.log('Uploading file:', file.name);
-          // Proceed with upload
-        }}
-        onUploadError={(err) => {
-          setError('Upload failed: ' + err.message);
-        }}
-        onSubmit={(message) => console.log(message)}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-    </>
-  );
-};
-```
-
-### **File Upload Lifecycle**
-
-Understanding the file upload lifecycle is crucial for proper implementation:
-
-1. **File Selection**: User selects files via button click or drag-and-drop
-2. **Validation**: Files are validated for size (50MB limit)
-3. **Queue**: Valid files are added to the upload queue
-4. **Upload**: Files are uploaded sequentially using `onFileUpload`
-5. **Progress**: `onUploadProgress` is called with progress updates (0-100)
-6. **Success/Error**: `onUploadSuccess` or `onUploadError` is called
-7. **Display**: Uploaded files are displayed as attachments in the input
-8. **Submission**: Files are included when the message is submitted
-9. **Cleanup**: Files are cleared using `clearPendingFiles`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const FileLifecycleExample = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [uploadStatus, setUploadStatus] = useState<string>('idle');
-  
-  return (
-    <>
-      <div>Status: {uploadStatus}</div>
-      
-      <ChatInput 
-        onFileUpload={(file) => {
-          setUploadStatus(`Uploading ${file.name}...`);
-          // Upload logic here
-        }}
-        onUploadProgress={(progress) => {
-          setUploadStatus(`Upload progress: ${progress}%`);
-        }}
-        onUploadSuccess={(data) => {
-          setUploadStatus('Upload complete!');
-          setTimeout(() => setUploadStatus('idle'), 2000);
-        }}
-        onUploadError={(error) => {
-          setUploadStatus(`Upload failed: ${error.message}`);
-        }}
-        onSubmit={(message) => {
-          console.log('Submitting with files:', files);
-          setFiles([]);
-          setUploadStatus('idle');
-        }}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => {
-          setFiles([]);
-          setUploadStatus('idle');
-        }}
-      />
-    </>
-  );
-};
-```
-
-### **Removing Uploaded Files**
-
-Users can remove files before submission by clicking the remove button on each file attachment. The component handles this automatically.
-
-## **Other Props**
-
-
-### **hideAttachments**
-Whether to hide the attachment button.
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const NoAttachmentsChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      hideAttachments
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-
-### **sandboxId**
-ID of the sandbox environment for file uploads. Used when integrating with sandbox-based file systems.
-
-- **Type:** `string`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const SandboxChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      sandboxId="my-sandbox-123"
-      onFileUpload={(file) => {
-        console.log('Uploading to sandbox:', file.name);
-        // File will be uploaded to the specified sandbox
-      }}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **onFileBrowse**
-Callback function when the file browser is opened. Useful for tracking user interactions.
-
-- **Type:** `() => void`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const FileBrowseChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      onFileBrowse={() => {
-        console.log('User opened file browser');
-        // Track analytics or perform other actions
-      }}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **autoFocus**
-Whether to automatically focus the input on mount.
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const AutoFocusChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      autoFocus={false}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **errorMessage**
-Error message to display at the bottom of the input.
-
-- **Type:** `string`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const ErrorMessageChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [error, setError] = useState<string>('');
-  
-  return (
-    <ChatInput 
-      errorMessage={error}
-      onSubmit={(message) => {
-        if (!message.trim()) {
-          setError('Message cannot be empty');
-          return;
-        }
-        setError('');
-        console.log(message);
-      }}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **shape**
-Shape of the input container.
-
-- **Type:** `Shape`
-- **Default:** `'rounded'`
-- **Possible Values:** `'rounded' | 'square'`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { Vertical } from 'app-studio';
-
-export const ShapeChatInputs = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <Vertical gap={15}>
-      <ChatInput 
-        shape="rounded"
-        onSubmit={(message) => console.log(message)}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-      <ChatInput 
-        shape="square"
-        onSubmit={(message) => console.log(message)}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-    </Vertical>
-  );
-};
-```
-
-### **enableAudioRecording**
-Enable audio recording button. When enabled, users can record audio which is automatically converted to a file and uploaded using the same file upload workflow.
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-### **onAudioRecordingStart**
-Callback when audio recording starts.
-
-- **Type:** `() => void`
-- **Required:** `false`
-
-### **onAudioRecordingStop**
-Callback when audio recording stops. The recorded audio is provided as a Blob and is automatically added to the upload queue.
-
-- **Type:** `(audio: Blob) => void`
-- **Required:** `false`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const AudioChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [isRecording, setIsRecording] = useState(false);
-  
-  return (
-    <>
-      {isRecording && <div>🎤 Recording...</div>}
-      
-      <ChatInput 
-        enableAudioRecording
-        onAudioRecordingStart={() => {
-          console.log('Recording started');
-          setIsRecording(true);
-        }}
-        onAudioRecordingStop={(audioBlob) => {
-          console.log('Recording stopped, audio blob:', audioBlob);
-          setIsRecording(false);
-          // The audio file is automatically added to the upload queue
-        }}
-        onFileUpload={(file) => {
-          console.log('Uploading file (could be audio):', file.name);
-          // Handle upload for both regular files and audio recordings
-        }}
-        onSubmit={(message) => {
-          console.log('Message:', message);
-          console.log('Files (including audio):', files);
-        }}
-        getPendingFiles={() => files}
-        clearPendingFiles={() => setFiles([])}
-      />
-    </>
-  );
-};
-```
-
-
-### **suggestions**
-List of suggestions for auto-completion.
-
-- **Type:** `Suggestion[]`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const SuggestionsChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  const suggestions = [
-    { text: 'How do I...', value: 'how-to' },
-    { text: 'What is...', value: 'what-is' },
-    { text: 'Can you help me...', value: 'help' },
-  ];
-  
-  return (
-    <ChatInput 
-      suggestions={suggestions}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **mentionData**
-Data for mention auto-completion.
-
-- **Type:** `Array<{ id: string; name: string; avatar?: string; description?: string }>`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const MentionsChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  const mentionData = [
-    { id: '1', name: 'John Doe', avatar: '/avatars/john.jpg' },
-    { id: '2', name: 'Jane Smith', avatar: '/avatars/jane.jpg' },
-    { id: '3', name: 'Bob Johnson', description: 'Developer' },
-  ];
-  
-  return (
-    <ChatInput 
-      mentionData={mentionData}
-      mentionTrigger="@"
-      onMentionSelect={(mention) => console.log('Mentioned:', mention)}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **promptExamples**
-List of prompt examples to display.
-
-- **Type:** `PromptExample[]`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const PromptExamplesChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  const promptExamples = [
-    { title: 'Write a story', prompt: 'Write a short story about...' },
-    { title: 'Explain a concept', prompt: 'Explain quantum physics in simple terms' },
-    { title: 'Code help', prompt: 'Help me debug this code...' },
-  ];
-  
-  return (
-    <ChatInput 
-      promptExamples={promptExamples}
-      onPromptExampleSelect={(example) => console.log('Selected:', example)}
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **isAgentRunning & onStopAgent**
-Agent running state and stop callback.
-
-- **Type:** `boolean` & `() => void`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const AgentChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [isRunning, setIsRunning] = useState(false);
-  
-  return (
-    <ChatInput 
-      isAgentRunning={isRunning}
-      onStopAgent={() => {
-        console.log('Stopping agent');
-        setIsRunning(false);
-      }}
-      onSubmit={(message) => {
-        console.log(message);
-        setIsRunning(true);
-      }}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-    />
-  );
-};
-```
-
-### **size**
-Size of the input.
-
-- **Type:** `Size`
-- **Default:** `'md'`
-- **Possible Values:** `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { Vertical } from 'app-studio';
-
-export const SizedChatInputs = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <Vertical gap={15}>
-      {['sm', 'md', 'lg'].map((size) => (
-        <ChatInput 
-          key={size}
-          size={size as any}
-          onSubmit={(message) => console.log(message)}
-          getPendingFiles={() => files}
-          clearPendingFiles={() => setFiles([])}
-        />
-      ))}
-    </Vertical>
-  );
-};
-```
-
-### **variant**
-Variant of the input.
-
-- **Type:** `Variant`
-- **Possible Values:** `'default' | 'outlined' | 'filled'`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { Vertical } from 'app-studio';
-
-export const VariantChatInputs = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <Vertical gap={15}>
-      {['default', 'outlined', 'filled'].map((variant) => (
-        <ChatInput 
-          key={variant}
-          variant={variant as any}
-          onSubmit={(message) => console.log(message)}
-          getPendingFiles={() => files}
-          clearPendingFiles={() => setFiles([])}
-        />
-      ))}
-    </Vertical>
-  );
-};
-```
-
-### **views**
-Custom styles for different parts of the chat input.
-
-- **Type:** `ChatInputStyles`
-
-```tsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-
-export const StyledChatInput = () => {
-  const [files, setFiles] = useState<File[]>([]);
-  
-  return (
-    <ChatInput 
-      onSubmit={(message) => console.log(message)}
-      getPendingFiles={() => files}
-      clearPendingFiles={() => setFiles([])}
-      views={{
-        container: {
-          borderRadius: 16,
-          borderColor: '#3b82f6',
-        },
-        input: {
-          fontSize: 16,
-          padding: 12,
-        },
-        button: {
-          backgroundColor: '#3b82f6',
-        }
-      }}
-    />
-  );
-};
-```
-