@app-studio/web 0.9.30 → 0.9.32

package/docs/components/ChatInput.mdx

@@ -0,0 +1,373 @@
+# ChatInput
+
+
+### **Import**
+  ```tsx
+  import { ChatInput } from '@app-studio/web';
+  ```
+
+### **Basic Usage**
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { View } from 'app-studio';
+
+export const BasicChatInput = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSubmit = (message) => {
+    console.log('Message submitted:', message);
+    setInputValue('');
+  };
+
+  return (
+    <View width="100%">
+      <ChatInput
+        onSubmit={handleSubmit}
+        value={inputValue}
+        onChange={setInputValue}
+        placeholder="Type your message here..."
+      />
+    </View>
+  );
+};
+```
+
+### **File Upload & Attachments**
+
+The ChatInput component uses the integrated Uploader component for seamless file handling:
+
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { View } from 'app-studio';
+
+export const ChatInputWithFileUploads = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSubmit = (message, options) => {
+    console.log('Message submitted:', message);
+    console.log('Options:', options);
+    // Message will include file information automatically
+  };
+
+  return (
+    <View width="100%">
+      <ChatInput
+        onSubmit={handleSubmit}
+        value={inputValue}
+        onChange={setInputValue}
+        placeholder="Upload files and send a message..."
+        hideAttachments={false} // Show attachment button
+      />
+    </View>
+  );
+};
+```
+
+**File Upload Features:**
+- **Multiple File Selection**: Select multiple files at once using Ctrl/Cmd + click
+- **Drag & Drop Support**: Drop files directly into the chat input area
+- **File Size Validation**: 50MB maximum file size with automatic validation
+- **File Type Support**: All file types supported (images, documents, videos, etc.)
+- **Preview & Management**: View uploaded files and remove them before sending
+### **With Prompt Examples**
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { View } from 'app-studio';
+import { PromptExample } from '@app-studio/web';
+
+export const ChatInputWithPromptExamples = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  // Example prompt suggestions
+  const promptExamples: PromptExample[] = [
+    { id: '1', text: 'Tell me a joke' },
+    { id: '2', text: 'What is the weather today?' },
+    { id: '3', text: 'How do I create a React component?' },
+    { id: '4', text: 'Write a poem about coding' },
+  ];
+
+  const handleSubmit = (message) => {
+    console.log('Message submitted:', message);
+    setInputValue('');
+  };
+
+  const handlePromptSelect = (example) => {
+    console.log('Prompt selected:', example);
+  };
+
+  return (
+    <View width="100%">
+      <ChatInput
+        onSubmit={handleSubmit}
+        value={inputValue}
+        onChange={setInputValue}
+        promptExamples={promptExamples}
+        onPromptExampleSelect={handlePromptSelect}
+      />
+    </View>
+  );
+};
+```
+
+### **Drag & Drop File Upload**
+
+The ChatInput supports drag & drop functionality for easy file uploads:
+
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { View } from 'app-studio';
+
+export const ChatInputWithDragDrop = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSubmit = (message, options) => {
+    console.log('Message with files:', message);
+    // Files are automatically processed and included
+  };
+
+  return (
+    <View width="100%">
+      <ChatInput
+        onSubmit={handleSubmit}
+        value={inputValue}
+        onChange={setInputValue}
+        placeholder="Drag files here or click the attachment button..."
+      />
+    </View>
+  );
+};
+```
+
+**Drag & Drop Features:**
+- **Visual Feedback**: Input area highlights when files are dragged over
+- **Multiple Files**: Drop multiple files at once for batch upload
+- **File Validation**: Automatic size and type validation during drop
+- **Error Handling**: Clear feedback for invalid files or size limits
+
+### **Custom Styling**
+```tsx
+import React from 'react';
+import { ChatInput } from '@app-studio/web';
+import { View } from 'app-studio';
+
+export const StyledChatInput = () => {
+  const handleSubmit = (message) => {
+    console.log('Message submitted:', message);
+  };
+
+  return (
+    <View width="100%">
+      <ChatInput
+        onSubmit={handleSubmit}
+        placeholder="Type a message..."
+        shape="pillShaped"
+        variant="outline"
+        views={{
+          container: {
+            backgroundColor: 'color.purple.50',
+          },
+          content: {
+            borderColor: 'color.purple.200',
+          },
+          submitButton: {
+            backgroundColor: 'color.purple.500',
+          },
+        }}
+      />
+    </View>
+  );
+};
+```
+
+### **With Agent Controls**
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { View } from 'app-studio';
+
+export const ChatInputWithAgent = () => {
+  const [isAgentRunning, setIsAgentRunning] = useState(false);
+
+  const handleSubmit = (message, options) => {
+    console.log('Message submitted:', message);
+    console.log('Options:', options);
+
+    // Start the agent
+    setIsAgentRunning(true);
+
+    // Simulate agent running for 5 seconds
+    setTimeout(() => {
+      setIsAgentRunning(false);
+    }, 5000);
+  };
+
+  const handleStopAgent = () => {
+    console.log('Agent stopped');
+    setIsAgentRunning(false);
+  };
+
+  return (
+    <View width="100%">
+      <ChatInput
+        onSubmit={handleSubmit}
+        isAgentRunning={isAgentRunning}
+        onStopAgent={handleStopAgent}
+      />
+    </View>
+  );
+};
+```
+
+### **Props**
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| onSubmit | `(message: string, options?: { model_name?: string; enable_thinking?: boolean }) => void` | required | Callback function when the form is submitted |
+| placeholder | string | 'Say what you want and Kimmy will surprise you' | Placeholder text for the input |
+| loading | boolean | false | Whether the input is in a loading state |
+| disabled | boolean | false | Whether the input is disabled |
+| isAgentRunning | boolean | false | Whether an agent is currently running |
+| onStopAgent | `() => void` | undefined | Callback function to stop the agent |
+| autoFocus | boolean | true | Whether to auto focus the input |
+| value | string | undefined | Controlled value for the input |
+| onChange | `(value: string) => void` | undefined | Callback function when the input value changes |
+| onFileBrowse | `() => void` | undefined | Callback function when the file browser is opened |
+| sandboxId | string | undefined | ID of the sandbox |
+| hideAttachments | boolean | false | Whether to hide the attachment button |
+| title | string | undefined | Title for the chat input |
+| showGuideTip | boolean | false | Whether to show the guide tip |
+| guideVideoUrl | string | undefined | URL for the guide video |
+| onGuideClose | `() => void` | undefined | Callback function when the guide tip is closed |
+| promptExamples | `PromptExample[]` | [] | List of prompt examples |
+| onPromptExampleSelect | `(example: PromptExample) => void` | undefined | Callback function when a prompt example is selected |
+| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | 'md' | Size of the chat input |
+| shape | `'default' \| 'sharp' \| 'rounded' \| 'pillShaped'` | 'rounded' | Shape of the chat input |
+| variant | `'default' \| 'outline' \| 'none'` | 'default' | Visual variant of the chat input |
+| views | object | {} | Custom styling for different parts of the component |
+
+### **File Upload Integration**
+
+The ChatInput component integrates seamlessly with the Uploader component:
+
+- **Automatic File Processing**: Files are automatically processed and added to the message
+- **File Size Validation**: 50MB maximum file size with clear error messages
+- **Multiple File Support**: Upload multiple files simultaneously
+- **Drag & Drop Integration**: Full drag and drop support with visual feedback
+
+### **Customization**
+
+The ChatInput component can be customized using the `views` prop:
+
+```tsx
+<ChatInput
+  // ...other props
+  views={{
+    container: { /* styles for the main container */ },
+    content: { /* styles for the content wrapper */ },
+    editableInput: { /* styles for the editable input */ },
+    header: { /* styles for the header */ },
+    title: { /* styles for the title */ },
+    guideTip: { /* styles for the guide tip */ },
+    promptExamples: { /* styles for the prompt examples container */ },
+    promptExampleItem: { /* styles for each prompt example item */ },
+    attachments: { /* styles for the attachments container */ },
+    attachmentItem: { /* styles for each attachment item */ },
+    attachmentName: { /* styles for attachment file names */ },
+    attachmentSize: { /* styles for attachment file sizes */ },
+    attachmentRemove: { /* styles for attachment remove buttons */ },
+    submitButton: { /* styles for the submit button */ },
+    fileButton: { /* styles for the file upload button */ },
+  }}
+/>
+```
+
+### **Accessibility**
+
+The ChatInput component implements the following accessibility features:
+
+- Keyboard navigation for submitting messages (Enter key)
+- ARIA attributes for interactive elements
+- Focus management for the input field
+- Proper contrast for text and buttons
+
+### **Best Practices**
+
+**General Usage:**
+- Provide clear placeholder text to guide users
+- Use the `loading` state to indicate when a message is being processed
+- Implement proper error handling for message submission
+- Provide feedback to users when messages are sent successfully
+
+**File Upload Best Practices:**
+- Handle file uploads appropriately on the server side
+- Validate file types and sizes on both client and server
+- Provide clear feedback for file upload errors
+- Consider implementing file preview functionality
+
+
+**Accessibility Considerations:**
+- Ensure file upload buttons are keyboard accessible
+- Use proper ARIA labels for interactive elements
+- Test with screen readers for file upload functionality
+
+### **Demo & Testing**
+
+The ChatInput component includes a demo page with simulate upload functionality for testing:
+
+```tsx
+// Available in src/pages/chat.page.tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { Button } from 'app-studio';
+
+export const ChatInputDemo = () => {
+  const [isSimulatingUpload, setIsSimulatingUpload] = useState(false);
+  const [simulationProgress, setSimulationProgress] = useState(0);
+
+  const simulateUpload = () => {
+    // Creates mock files for testing
+    const mockFiles = [
+      new File(['content'], 'document.pdf', { type: 'application/pdf' }),
+      new File(['content'], 'image.jpg', { type: 'image/jpeg' }),
+      new File(['content'], 'spreadsheet.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }),
+    ];
+
+    setIsSimulatingUpload(true);
+    setSimulationProgress(0);
+
+    const interval = setInterval(() => {
+      setSimulationProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          setIsSimulatingUpload(false);
+          console.log('Upload simulation completed!');
+          return 100;
+        }
+        return prev + 10;
+      });
+    }, 300);
+  };
+
+  return (
+    <>
+      <Button onClick={simulateUpload} disabled={isSimulatingUpload}>
+        {isSimulatingUpload ? `Uploading... ${simulationProgress}%` : 'Simulate Upload'}
+      </Button>
+
+      <ChatInput
+        onSubmit={(message) => console.log('Message:', message)}
+      />
+    </>
+  );
+};
+```
+
+**Demo Features:**
+- **Simulate Upload**: Test file upload functionality without real files
+- **Progress Tracking**: Visual progress indication during simulation
+- **Mock File Generation**: Creates realistic test files with proper MIME types
+- **Console Logging**: Detailed logging for debugging and testing

package/docs/components/Checkbox.mdx

@@ -0,0 +1,66 @@
+# Checkbox
+
+A customizable checkbox form element with optional label and various views.
+
+### **Import**
+  ```tsx
+  import { Checkbox } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+
+import { Checkbox } from '../Checkbox';
+
+export const DefaultCheckbox = () => <Checkbox label="option" />;
+
+```
+
+### **colorScheme**
+Optional color scheme string that might allow customization of the checkbox's appearance.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { Checkbox } from '../Checkbox';
+
+export const ColorCheckbox = () => (
+  <Vertical gap={15}>
+    {[
+      'theme.primary',
+      'theme.secondary',
+      'theme.error',
+      'theme.success',
+      'theme.warning',
+    ].map((color) => (
+      <Checkbox
+        key={color}
+        colorScheme={color}
+        label={color}
+        defaultIsSelected
+      />
+    ))}
+  </Vertical>
+);
+
+```
+
+### **shadow**
+An optional shadow or elevation effect that can be applied to the Checkbox component, accepting either a Shadow, Elevation, or generic CSSProperties object.
+
+```tsx
+import React from 'react';
+import { Checkbox } from '../../../Form/Checkbox/Checkbox';
+
+export const ShadowCheckbox = () => (
+  <Checkbox
+    id="shadowCheckbox"
+    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
+    defaultIsSelected
+  />
+);
+
+```
+

package/docs/components/ColorInput.mdx

@@ -0,0 +1,209 @@
+# ColorInput
+
+A form-integrated color picker component that allows users to select colors from a predefined palette or enter custom color values.
+
+### **Import**
+```tsx
+import { ColorInput } from '@app-studio/web';
+```
+
+### **Basic Usage**
+A simple color input with default settings.
+
+```tsx
+import React, { useState } from 'react';
+import { ColorInput } from '../ColorInput';
+
+export const BasicColorInput = () => {
+  const [color, setColor] = useState('color.blue.500');
+
+  return (
+    <ColorInput
+      label="Background Color"
+      value={color}
+      onChange={setColor}
+      placeholder="Select a color"
+      helperText="Choose a background color for your theme"
+    />
+  );
+};
+```
+
+### **Variants**
+Different visual styles for the color input.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+import { ColorInput } from '../ColorInput';
+
+export const ColorInputVariants = () => {
+  return (
+    <Vertical gap={16} width="300px">
+      <ColorInput
+        label="Default Variant"
+        variant="default"
+        defaultValue="color.blue.500"
+      />
+      
+      <ColorInput
+        label="Outline Variant"
+        variant="outline"
+        defaultValue="color.green.500"
+      />
+      
+      <ColorInput
+        label="None Variant"
+        variant="none"
+        defaultValue="color.purple.500"
+      />
+    </Vertical>
+  );
+};
+```
+
+### **Sizes**
+Different sizes for the color input.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+import { ColorInput } from '../ColorInput';
+
+export const ColorInputSizes = () => {
+  return (
+    <Vertical gap={16} width="300px">
+      <ColorInput label="Extra Small" size="xs" defaultValue="color.red.500" />
+      <ColorInput label="Small" size="sm" defaultValue="color.orange.500" />
+      <ColorInput label="Medium" size="md" defaultValue="color.yellow.500" />
+      <ColorInput label="Large" size="lg" defaultValue="color.green.500" />
+      <ColorInput label="Extra Large" size="xl" defaultValue="color.blue.500" />
+    </Vertical>
+  );
+};
+```
+
+### **Custom Colors**
+Color input with custom color palette and options.
+
+```tsx
+import React, { useState } from 'react';
+import { ColorInput } from '../ColorInput';
+
+export const CustomColorInput = () => {
+  const [color, setColor] = useState('');
+  
+  const customColors = [
+    { name: 'Brand Primary', value: '#3B82F6' },
+    { name: 'Brand Secondary', value: '#10B981' },
+    { name: 'Brand Accent', value: '#F59E0B' },
+    { name: 'Brand Dark', value: '#1F2937' },
+  ];
+
+  return (
+    <ColorInput
+      label="Brand Color"
+      value={color}
+      onChange={setColor}
+      predefinedColors={customColors}
+      showCustomInput={true}
+      showRecentColors={true}
+      helperText="Choose from brand colors or enter a custom color"
+    />
+  );
+};
+```
+
+### **Form Integration**
+Color input integrated with form handling.
+
+```tsx
+import React, { useState } from 'react';
+import { Vertical, Horizontal } from 'app-studio';
+import { ColorInput } from '../ColorInput';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+
+export const ColorInputForm = () => {
+  const [backgroundColor, setBackgroundColor] = useState('color.blue.500');
+  const [textColor, setTextColor] = useState('color.white');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert(`Background: ${backgroundColor}, Text: ${textColor}`);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={16} width="400px">
+        <ColorInput
+          label="Background Color"
+          value={backgroundColor}
+          onChange={setBackgroundColor}
+          helperText="Choose the background color"
+        />
+        
+        <ColorInput
+          label="Text Color"
+          value={textColor}
+          onChange={setTextColor}
+          helperText="Choose the text color"
+        />
+
+        {/* Preview */}
+        <div 
+          style={{
+            padding: '16px',
+            borderRadius: '8px',
+            backgroundColor: backgroundColor,
+            color: textColor,
+            border: '1px solid #e5e7eb'
+          }}
+        >
+          <Text fontWeight="bold">Preview</Text>
+          <Text>This is how your theme will look</Text>
+        </div>
+
+        <Horizontal gap={8}>
+          <Button type="submit" variant="filled">
+            Apply Theme
+          </Button>
+          <Button 
+            type="button" 
+            variant="outline"
+            onClick={() => {
+              setBackgroundColor('color.blue.500');
+              setTextColor('color.white');
+            }}
+          >
+            Reset
+          </Button>
+        </Horizontal>
+      </Vertical>
+    </form>
+  );
+};
+```
+
+### **Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Label text for the color input |
+| `value` | `string` | - | Controlled value of the color input |
+| `defaultValue` | `string` | `''` | Default value for uncontrolled usage |
+| `onChange` | `(color: string) => void` | - | Callback when color changes |
+| `placeholder` | `string` | `'Select a color'` | Placeholder text |
+| `helperText` | `string` | - | Helper text below the input |
+| `error` | `boolean \| string` | `false` | Error state or message |
+| `isDisabled` | `boolean` | `false` | Whether the input is disabled |
+| `isReadOnly` | `boolean` | `false` | Whether the input is read-only |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Size of the input |
+| `variant` | `'default' \| 'outline' \| 'none'` | `'default'` | Visual variant |
+| `shape` | `'default' \| 'sharp' \| 'rounded' \| 'pillShaped'` | `'default'` | Border radius style |
+| `predefinedColors` | `PredefinedColor[]` | Default palette | Array of predefined colors |
+| `showCustomInput` | `boolean` | `true` | Whether to show custom color input |
+| `showRecentColors` | `boolean` | `true` | Whether to show recent colors |
+| `maxRecentColors` | `number` | `8` | Maximum number of recent colors |
+| `closeOnSelect` | `boolean` | `true` | Whether to close dropdown on selection |
+| `views` | `ColorInputStyles` | `{}` | Custom styling object |