@apteva/apteva-kit 0.1.3 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +4 -2
  2. package/dist/index.d.ts +4 -2
  3. package/dist/index.js +227 -113
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +209 -95
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["/Users/marcoschwartz/Documents/code/frontends/apteva/apteva-kit/dist/index.js","../src/components/Chat/Chat.tsx","../src/components/Chat/MessageList.tsx","../src/utils/cn.ts","../src/utils/mock-data.ts","../src/components/Widgets/Widgets.tsx","../src/components/Widgets/widget-library/Card.tsx","../src/components/Widgets/widget-library/List.tsx","../src/components/Widgets/widget-library/Button.tsx","../src/components/Widgets/WidgetRenderer.tsx","../src/components/Chat/Message.tsx","../src/components/Chat/Composer.tsx","../src/components/Command/Command.tsx","../src/components/Prompt/Prompt.tsx","../src/components/Stream/Stream.tsx","../src/components/Threads/ThreadList.tsx","../src/components/Threads/ThreadItem.tsx","../src/components/Threads/Threads.tsx","../src/utils/theme-script.ts"],"names":["jsxs","jsx","useRef","useState"],"mappings":"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","file":"/Users/marcoschwartz/Documents/code/frontends/apteva/apteva-kit/dist/index.js","sourcesContent":[null,"import { useState, useEffect } from 'react';\nimport { ChatProps } from '../../types/components';\nimport { Message as MessageType } from '../../types/messages';\nimport { MessageList } from './MessageList';\nimport { Composer } from './Composer';\nimport { cn, mockMessages, generateMockResponse } from '../../utils';\n\nexport function Chat({\n agentId,\n threadId,\n initialMessages = [],\n onThreadChange,\n onMessageSent,\n onAction,\n placeholder = 'Type a message...',\n showHeader = true,\n headerTitle = 'Chat',\n className,\n}: ChatProps) {\n const [messages, setMessages] = useState<MessageType[]>(initialMessages.length > 0 ? initialMessages : mockMessages);\n const [isLoading, setIsLoading] = useState(false);\n\n useEffect(() => {\n // Load messages when threadId changes\n if (threadId) {\n // In real implementation, fetch messages from API\n console.log('Loading thread:', threadId);\n onThreadChange?.(threadId);\n }\n }, [threadId, onThreadChange]);\n\n const handleSendMessage = async (text: string) => {\n // Add user message\n const userMessage: MessageType = {\n id: `msg-${Date.now()}`,\n role: 'user',\n content: text,\n timestamp: new Date(),\n };\n\n setMessages((prev) => [...prev, userMessage]);\n onMessageSent?.(userMessage);\n\n // Simulate AI response\n setIsLoading(true);\n try {\n const response = await generateMockResponse(1000);\n setMessages((prev) => [...prev, response]);\n } catch (error) {\n console.error('Error generating response:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n <div className={cn('apteva-chat-container', className)}>\n {showHeader && (\n <div className=\"border-b border-gray-200 dark:border-gray-700 px-4 py-3\">\n <h2 className=\"text-lg font-semibold text-gray-900 dark:text-white\">{headerTitle}</h2>\n <p className=\"text-xs text-gray-500 dark:text-gray-400\">Agent: {agentId}</p>\n </div>\n )}\n\n <MessageList messages={messages} onAction={onAction} />\n\n {isLoading && (\n <div className=\"px-4 py-2 text-sm text-gray-500 italic\">AI is thinking...</div>\n )}\n\n <Composer onSendMessage={handleSendMessage} placeholder={placeholder} disabled={isLoading} />\n </div>\n );\n}\n","import { useEffect, useRef } from 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { Message } from './Message';\nimport { ActionEvent } from '../../types/actions';\n\ninterface MessageListProps {\n messages: MessageType[];\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function MessageList({ messages, onAction }: MessageListProps) {\n const listRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n // Auto-scroll to bottom when new messages arrive\n if (listRef.current) {\n listRef.current.scrollTop = listRef.current.scrollHeight;\n }\n }, [messages]);\n\n return (\n <div ref={listRef} className=\"apteva-message-list\">\n {messages.length === 0 ? (\n <div className=\"flex items-center justify-center h-full text-gray-500\">\n <div className=\"text-center space-y-2\">\n <div className=\"text-4xl\">💬</div>\n <p>No messages yet. Start a conversation!</p>\n </div>\n </div>\n ) : (\n messages.map((message) => <Message key={message.id} message={message} onAction={onAction} />)\n )}\n </div>\n );\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Message, Thread } from '../types/messages';\nimport { Widget } from '../types/widgets';\n\nexport const mockMessages: Message[] = [\n {\n id: 'msg-1',\n role: 'assistant',\n content: 'Hello! I\\'m your AI assistant. How can I help you today?',\n timestamp: new Date(Date.now() - 3600000),\n },\n {\n id: 'msg-2',\n role: 'user',\n content: 'I want to plan a trip to Europe',\n timestamp: new Date(Date.now() - 3500000),\n },\n {\n id: 'msg-3',\n role: 'assistant',\n content: 'Great choice! Europe has amazing destinations. What\\'s your budget and how many days do you have?',\n timestamp: new Date(Date.now() - 3400000),\n },\n {\n id: 'msg-4',\n role: 'user',\n content: 'Around $2000 for 5 days',\n timestamp: new Date(Date.now() - 3300000),\n },\n {\n id: 'msg-5',\n role: 'assistant',\n content: 'Perfect! I found some great destinations that fit your budget:',\n widgets: [\n {\n type: 'list',\n id: 'destinations-1',\n props: {\n items: [\n {\n id: 'paris',\n title: 'Paris, France',\n subtitle: '5 days • $1,850',\n description: 'The City of Light with iconic landmarks',\n metadata: { city: 'Paris', country: 'France', lat: 48.8566, lng: 2.3522, price: 1850, days: 5 },\n },\n {\n id: 'rome',\n title: 'Rome, Italy',\n subtitle: '5 days • $1,650',\n description: 'Ancient history meets modern culture',\n metadata: { city: 'Rome', country: 'Italy', lat: 41.9028, lng: 12.4964, price: 1650, days: 5 },\n },\n {\n id: 'barcelona',\n title: 'Barcelona, Spain',\n subtitle: '5 days • $1,450',\n description: 'Beautiful beaches and Gaudí architecture',\n metadata: { city: 'Barcelona', country: 'Spain', lat: 41.3851, lng: 2.1734, price: 1450, days: 5 },\n },\n ],\n },\n actions: [\n {\n type: 'select_destination',\n label: 'Select',\n handler: 'client',\n payload: {},\n },\n {\n type: 'view_details',\n label: 'Details',\n handler: 'server',\n payload: {},\n },\n ],\n },\n ],\n timestamp: new Date(Date.now() - 3200000),\n },\n];\n\nexport const mockThreads: Thread[] = [\n {\n id: 'thread-1',\n title: 'Trip to Europe',\n preview: 'Planning a 5-day trip...',\n createdAt: new Date(Date.now() - 86400000),\n updatedAt: new Date(Date.now() - 3600000),\n messageCount: 12,\n },\n {\n id: 'thread-2',\n title: 'Restaurant Recommendations',\n preview: 'Looking for good places...',\n createdAt: new Date(Date.now() - 172800000),\n updatedAt: new Date(Date.now() - 86400000),\n messageCount: 8,\n },\n {\n id: 'thread-3',\n title: 'Budget Planning',\n preview: 'Help with monthly budget',\n createdAt: new Date(Date.now() - 259200000),\n updatedAt: new Date(Date.now() - 172800000),\n messageCount: 15,\n },\n];\n\nexport const mockWidgets: Widget[] = [\n {\n type: 'card',\n id: 'card-1',\n props: {\n title: 'Paris, France',\n description: '5-day adventure in the City of Light',\n image: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34',\n footer: 'Total: $1,850',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-paris' },\n },\n ],\n },\n {\n type: 'card',\n id: 'card-2',\n props: {\n title: 'Rome, Italy',\n description: 'Explore ancient wonders',\n image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5',\n footer: 'Total: $1,650',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-rome' },\n },\n ],\n },\n];\n\nexport function generateMockResponse(delay: number = 1000): Promise<Message> {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n id: `msg-${Date.now()}`,\n role: 'assistant',\n content: 'This is a mock response. In production, this would come from your AI agent API.',\n timestamp: new Date(),\n });\n }, delay);\n });\n}\n\nexport function generateMockStreamingResponse(\n text: string,\n onChunk: (chunk: string) => void,\n typingSpeed: number = 30\n): Promise<void> {\n return new Promise((resolve) => {\n const words = text.split(' ');\n let currentIndex = 0;\n\n const interval = setInterval(() => {\n if (currentIndex < words.length) {\n onChunk(words[currentIndex] + ' ');\n currentIndex++;\n } else {\n clearInterval(interval);\n resolve();\n }\n }, typingSpeed);\n });\n}\n","import { useEffect } from 'react';\nimport { WidgetsProps } from '../../types/components';\nimport { WidgetRenderer } from './WidgetRenderer';\nimport { cn } from '../../utils';\n\nexport function Widgets({\n widgets,\n onAction,\n onWidgetMount,\n layout = 'stack',\n spacing = 'normal',\n columns = 3,\n className,\n}: WidgetsProps) {\n useEffect(() => {\n widgets.forEach((widget) => {\n onWidgetMount?.(widget.id);\n });\n }, [widgets, onWidgetMount]);\n\n const layoutClasses = {\n stack: 'flex flex-col',\n grid: `grid grid-cols-1 md:grid-cols-${columns}`,\n masonry: 'columns-1 md:columns-2 lg:columns-3',\n };\n\n const spacingClasses = {\n tight: 'gap-2',\n normal: 'gap-4',\n loose: 'gap-6',\n };\n\n return (\n <div className={cn(layoutClasses[layout], spacingClasses[spacing], className)}>\n {widgets.map((widget) => (\n <WidgetRenderer key={widget.id} widget={widget} onAction={onAction} />\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { CardWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface CardProps {\n widget: CardWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Card({ widget, onAction }: CardProps) {\n const { title, description, image, footer } = widget.props;\n\n return (\n <div className=\"apteva-widget-card\">\n {image && <img src={image} alt={title} className=\"w-full h-48 object-cover\" />}\n\n <div className=\"p-4\">\n <h3 className=\"text-lg font-semibold text-gray-900 dark:text-white\">{title}</h3>\n {description && <p className=\"text-gray-600 dark:text-gray-400 mt-2\">{description}</p>}\n </div>\n\n {(footer || (widget.actions && widget.actions.length > 0)) && (\n <div className=\"border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center\">\n {footer && <span className=\"text-sm text-gray-600 dark:text-gray-400\">{footer}</span>}\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: action.payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"apteva-widget-button\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ListWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface ListProps {\n widget: ListWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function List({ widget, onAction }: ListProps) {\n const { items } = widget.props;\n\n return (\n <div className=\"apteva-widget-list\">\n {items.map((item) => (\n <div key={item.id} className=\"flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\">\n {item.image && <img src={item.image} alt={item.title} className=\"w-16 h-16 rounded object-cover\" />}\n\n <div className=\"flex-1 ml-4\">\n <h4 className=\"font-semibold text-gray-900 dark:text-white\">{item.title}</h4>\n {item.subtitle && <p className=\"text-sm text-gray-600 dark:text-gray-400\">{item.subtitle}</p>}\n {item.description && (\n <p className=\"text-xs text-gray-500 dark:text-gray-500 mt-1\">{item.description}</p>\n )}\n </div>\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: item.metadata || item,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"px-3 py-1.5 text-sm rounded-lg font-medium transition-colors bg-apteva-500 text-white hover:bg-apteva-600\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ButtonWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils';\n\ninterface ButtonProps {\n widget: ButtonWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Button({ widget, onAction }: ButtonProps) {\n const { label, variant = 'primary', disabled = false } = widget.props;\n\n const variantClasses = {\n primary: 'bg-apteva-500 text-white hover:bg-apteva-600',\n secondary: 'bg-gray-500 text-white hover:bg-gray-600',\n outline: 'border-2 border-apteva-500 text-apteva-500 hover:bg-apteva-50',\n ghost: 'text-apteva-500 hover:bg-apteva-50',\n };\n\n return (\n <button\n onClick={() =>\n widget.actions?.[0] &&\n onAction?.({\n type: widget.actions[0].type,\n payload: widget.actions[0].payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n disabled={disabled}\n className={cn('px-4 py-2 rounded-lg font-medium transition-colors', variantClasses[variant], {\n 'opacity-50 cursor-not-allowed': disabled,\n })}\n >\n {label}\n </button>\n );\n}\n","// No direct imports needed 'react';\nimport { Widget } from '../../types/widgets';\nimport { ActionEvent } from '../../types/actions';\nimport { Card, List, Button } from './widget-library';\n\ninterface WidgetRendererProps {\n widget: Widget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function WidgetRenderer({ widget, onAction }: WidgetRendererProps) {\n switch (widget.type) {\n case 'card':\n return <Card widget={widget as any} onAction={onAction} />;\n case 'list':\n return <List widget={widget as any} onAction={onAction} />;\n case 'button':\n return <Button widget={widget as any} onAction={onAction} />;\n default:\n return (\n <div className=\"p-4 border border-yellow-300 bg-yellow-50 rounded-lg\">\n <p className=\"text-sm text-yellow-800\">Unknown widget type: {widget.type}</p>\n <pre className=\"text-xs mt-2 overflow-auto\">{JSON.stringify(widget, null, 2)}</pre>\n </div>\n );\n }\n}\n","// No direct imports needed 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { cn } from '../../utils';\nimport { Widgets } from '../Widgets';\nimport { ActionEvent } from '../../types/actions';\n\ninterface MessageProps {\n message: MessageType;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Message({ message, onAction }: MessageProps) {\n const isUser = message.role === 'user';\n\n return (\n <div className={cn('apteva-message', isUser ? 'apteva-message-user' : 'apteva-message-assistant')}>\n <div className=\"whitespace-pre-wrap\">{message.content}</div>\n\n {message.widgets && message.widgets.length > 0 && (\n <div className=\"mt-4\">\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className=\"text-xs opacity-70 mt-2\">\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n}\n","import { useState, KeyboardEvent, useRef } from 'react';\n\ninterface ComposerProps {\n onSendMessage: (text: string) => void;\n placeholder?: string;\n disabled?: boolean;\n}\n\nexport function Composer({ onSendMessage, placeholder = 'Type a message...', disabled = false }: ComposerProps) {\n const [text, setText] = useState('');\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n };\n\n const handleSend = () => {\n if (text.trim() && !disabled) {\n onSendMessage(text.trim());\n setText('');\n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n }\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setText(e.target.value);\n // Auto-resize textarea\n e.target.style.height = 'auto';\n e.target.style.height = `${e.target.scrollHeight}px`;\n };\n\n return (\n <div className=\"apteva-composer\">\n <div className=\"flex gap-2\">\n <textarea\n ref={textareaRef}\n value={text}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n className=\"apteva-composer-input\"\n rows={1}\n style={{ maxHeight: '200px' }}\n />\n <button\n onClick={handleSend}\n disabled={!text.trim() || disabled}\n className=\"px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n >\n Send\n </button>\n </div>\n <div className=\"text-xs text-gray-500 mt-2\">Press Enter to send, Shift+Enter for new line</div>\n </div>\n );\n}\n","import { useState, useEffect } from 'react';\nimport { CommandProps, CommandResult } from '../../types/components';\nimport { cn, generateMockResponse } from '../../utils';\n\nexport function Command({\n agentId,\n command: initialCommand,\n context,\n autoExecute = false,\n allowInput = true,\n placeholder = 'Enter your command...',\n submitButtonText = 'Execute',\n variant = 'default',\n onStart,\n onProgress,\n onChunk,\n onComplete,\n onError,\n loadingText = 'Processing...',\n showProgress = true,\n enableStreaming = false,\n resultRenderer,\n className,\n}: CommandProps) {\n const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');\n const [result, setResult] = useState<CommandResult | null>(null);\n const [error, setError] = useState<Error | null>(null);\n const [progress, setProgress] = useState(0);\n const [command, setCommand] = useState(initialCommand || '');\n const [streamedContent, setStreamedContent] = useState('');\n\n useEffect(() => {\n if (autoExecute && state === 'idle' && command) {\n executeCommand();\n }\n }, [autoExecute]);\n\n const executeCommand = async () => {\n if (!command.trim()) {\n setError(new Error('Please enter a command'));\n setState('error');\n return;\n }\n setState('loading');\n setError(null);\n setProgress(0);\n setStreamedContent('');\n onStart?.();\n\n try {\n if (enableStreaming) {\n // Simulate streaming response with status messages\n const mockStreamChunks = [\n 'Initializing...',\n 'Connecting to agent...',\n 'Processing your request...',\n 'Analyzing data sources...',\n 'Gathering information...',\n 'Generating response...',\n 'Finalizing results...',\n ];\n\n for (let i = 0; i < mockStreamChunks.length; i++) {\n await new Promise((resolve) => setTimeout(resolve, 600 + Math.random() * 400));\n const chunk = mockStreamChunks[i];\n setStreamedContent(chunk);\n onChunk?.(chunk);\n setProgress(Math.round(((i + 1) / mockStreamChunks.length) * 100));\n onProgress?.(Math.round(((i + 1) / mockStreamChunks.length) * 100));\n }\n\n const mockResult: CommandResult = {\n success: true,\n data: {\n summary: `Successfully processed: \"${command}\"`,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: 'Command executed successfully',\n };\n\n setResult(mockResult);\n setState('success');\n setProgress(100);\n onComplete?.(mockResult);\n } else {\n // Original non-streaming behavior\n const progressInterval = setInterval(() => {\n setProgress((prev) => {\n const next = Math.min(prev + 10, 90);\n onProgress?.(next);\n return next;\n });\n }, 200);\n\n await new Promise((resolve) => setTimeout(resolve, 2000));\n clearInterval(progressInterval);\n\n const mockResult: CommandResult = {\n success: true,\n data: {\n summary: `Command \"${command}\" executed successfully`,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: 'Execution complete',\n };\n\n setResult(mockResult);\n setState('success');\n setProgress(100);\n onComplete?.(mockResult);\n }\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Unknown error');\n setError(error);\n setState('error');\n onError?.(error);\n }\n };\n\n const resetCommand = () => {\n setState('idle');\n setResult(null);\n setError(null);\n setProgress(0);\n setCommand('');\n };\n\n const isCompact = variant === 'compact';\n\n return (\n <div\n className={cn(\n 'relative border-2 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex flex-col',\n state === 'loading' && 'animate-pulse-border',\n state === 'idle' && 'border-gray-300 dark:border-gray-700',\n state === 'loading' && 'border-blue-500',\n state === 'success' && 'border-green-500',\n state === 'error' && 'border-red-500',\n className\n )}\n style={{ minHeight: isCompact ? 'auto' : '180px' }}\n >\n {/* Input/Display Area */}\n <div className={cn('flex-1 flex', isCompact ? 'flex-row items-center p-3 gap-3' : 'flex-col p-4')}>\n {state === 'idle' && allowInput && !isCompact && (\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500\"\n rows={6}\n />\n )}\n\n {state === 'idle' && allowInput && isCompact && (\n <>\n <input\n type=\"text\"\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1\"\n />\n <button\n onClick={executeCommand}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-gray-300 dark:border-gray-600',\n 'bg-white dark:bg-gray-800',\n '!text-gray-700 dark:!text-gray-300',\n 'hover:bg-gray-50 dark:hover:bg-gray-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600'\n )}\n title=\"Execute\"\n >\n ↑\n </button>\n </>\n )}\n\n {state === 'loading' && !isCompact && (\n <div className=\"flex-1 flex flex-col items-center justify-center space-y-4 py-8\">\n <div className=\"w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-gray-600 dark:text-gray-400 text-sm text-center max-w-md\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n {showProgress && (\n <div className=\"w-full max-w-sm\">\n <div className=\"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5\">\n <div\n className=\"bg-blue-500 h-1.5 rounded-full transition-all duration-300\"\n style={{ width: `${progress}%` }}\n />\n </div>\n <p className=\"text-xs text-gray-500 mt-2 text-center\">{progress}%</p>\n </div>\n )}\n </div>\n )}\n\n {state === 'loading' && isCompact && (\n <>\n <div className=\"flex-1 flex items-center gap-3 py-1\">\n <div className=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-gray-600 dark:text-gray-400 text-sm truncate\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n </div>\n <button\n disabled\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-gray-200 dark:border-gray-700',\n 'bg-white dark:bg-gray-800',\n '!text-gray-400 dark:!text-gray-600',\n '!text-lg',\n 'opacity-30 cursor-not-allowed'\n )}\n >\n ↑\n </button>\n </>\n )}\n\n {state === 'error' && (\n <div className=\"flex-1 flex flex-col\">\n <div className=\"mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg\">\n <div className=\"flex items-start gap-2\">\n <svg className=\"w-5 h-5 text-red-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div>\n <h3 className=\"text-sm font-semibold text-red-800 dark:text-red-400\">Error</h3>\n <p className=\"text-red-700 dark:text-red-300 text-sm mt-1\">{error?.message}</p>\n </div>\n </div>\n </div>\n {allowInput && (\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400\"\n rows={4}\n />\n )}\n </div>\n )}\n\n {state === 'success' && result && !isCompact && (\n <div className=\"flex-1 overflow-auto\">\n {resultRenderer ? (\n resultRenderer(result.data)\n ) : (\n <div>\n <div className=\"flex items-start gap-3 mb-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg\">\n <svg className=\"w-5 h-5 text-green-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-green-800 dark:text-green-400 mb-1\">Success</h3>\n <p className=\"text-green-700 dark:text-green-300 text-sm\">{result.message || 'Command executed successfully'}</p>\n </div>\n </div>\n {result.data?.summary && (\n <div className=\"text-gray-700 dark:text-gray-300 text-sm leading-relaxed\">\n {result.data.summary}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n\n {state === 'success' && result && isCompact && (\n <>\n <div className=\"flex-1 flex items-center gap-2 py-1\">\n <svg className=\"w-4 h-4 text-green-600 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"text-green-700 dark:text-green-300 text-sm truncate\">\n {resultRenderer ? resultRenderer(result.data) : (result.message || 'Command executed successfully')}\n </div>\n </div>\n <button\n disabled\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-gray-200 dark:border-gray-700',\n 'bg-white dark:bg-gray-800',\n '!text-gray-400 dark:!text-gray-600',\n '!text-lg',\n 'opacity-30 cursor-not-allowed'\n )}\n >\n ↑\n </button>\n </>\n )}\n </div>\n\n {/* Bottom Action Bar - Only show for default variant when not in compact mode */}\n {!isCompact && (\n <div className=\"p-3 flex items-center justify-end gap-2\">\n {(state === 'success' || state === 'error') && allowInput && (\n <button\n onClick={resetCommand}\n className=\"px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors\"\n >\n Reset\n </button>\n )}\n\n {(state === 'idle' || state === 'error') && (\n <button\n onClick={executeCommand}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all',\n 'border border-gray-300 dark:border-gray-600',\n 'bg-white dark:bg-gray-800',\n '!text-gray-700 dark:!text-gray-300',\n 'hover:bg-gray-50 dark:hover:bg-gray-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600'\n )}\n title={state === 'error' ? 'Retry' : 'Execute'}\n >\n {state === 'error' ? '↻' : '↑'}\n </button>\n )}\n </div>\n )}\n\n\n <style dangerouslySetInnerHTML={{\n __html: `\n @keyframes pulse-border {\n 0%, 100% {\n border-color: rgb(59, 130, 246);\n }\n 50% {\n border-color: rgb(147, 197, 253);\n }\n }\n .animate-pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n `\n }} />\n </div>\n );\n}\n","import { useState, KeyboardEvent } from 'react';\nimport { PromptProps } from '../../types/components';\nimport { cn } from '../../utils';\n\nexport function Prompt({\n agentId,\n placeholder = 'Enter your prompt...',\n initialValue = '',\n submitOn = 'button',\n debounceMs = 0,\n minLength = 0,\n maxLength,\n onSubmit,\n onResult,\n onChange,\n variant = 'inline',\n showSuggestions = false,\n className,\n}: PromptProps) {\n const [value, setValue] = useState(initialValue);\n const [isLoading, setIsLoading] = useState(false);\n const [suggestions] = useState(['Plan a trip', 'Write a description', 'Analyze data']);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!maxLength || newValue.length <= maxLength) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n const handleSubmit = async () => {\n if (value.length < minLength) return;\n\n onSubmit?.(value);\n setIsLoading(true);\n\n try {\n // Mock AI processing\n await new Promise((resolve) => setTimeout(resolve, 1500));\n const mockResult = `Enhanced version: ${value} [AI-generated content]`;\n onResult?.(mockResult);\n setValue('');\n } catch (error) {\n console.error('Error processing prompt:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (submitOn === 'enter' && e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const handleBlur = () => {\n if (submitOn === 'blur' && value.trim()) {\n handleSubmit();\n }\n };\n\n return (\n <div className={cn('space-y-2', className)}>\n <div className=\"flex gap-2\">\n <input\n type=\"text\"\n value={value}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n placeholder={placeholder}\n disabled={isLoading}\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white\"\n />\n\n {submitOn === 'button' && (\n <button\n onClick={handleSubmit}\n disabled={isLoading || value.length < minLength}\n className=\"px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n >\n {isLoading ? 'Processing...' : 'Generate'}\n </button>\n )}\n </div>\n\n {maxLength && (\n <p className=\"text-xs text-gray-500\">\n {value.length} / {maxLength} characters\n </p>\n )}\n\n {showSuggestions && !value && (\n <div className=\"flex flex-wrap gap-2\">\n {suggestions.map((suggestion, idx) => (\n <button\n key={idx}\n onClick={() => setValue(suggestion)}\n className=\"px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full transition-colors\"\n >\n {suggestion}\n </button>\n ))}\n </div>\n )}\n\n {isLoading && (\n <div className=\"flex items-center gap-2 text-sm text-gray-500\">\n <div className=\"w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin\" />\n <span>AI is processing your request...</span>\n </div>\n )}\n </div>\n );\n}\n","import { useState, useEffect } from 'react';\nimport { StreamProps } from '../../types/components';\nimport { cn, generateMockStreamingResponse } from '../../utils';\n\nexport function Stream({\n agentId,\n prompt,\n context,\n autoStart = false,\n onStart,\n onChunk,\n onComplete,\n onError,\n variant = 'prose',\n showCursor = true,\n typingSpeed = 30,\n className,\n}: StreamProps) {\n const [text, setText] = useState('');\n const [isStreaming, setIsStreaming] = useState(false);\n const [isComplete, setIsComplete] = useState(false);\n\n useEffect(() => {\n if (autoStart && !isStreaming && !isComplete) {\n startStreaming();\n }\n }, [autoStart]);\n\n const startStreaming = async () => {\n setIsStreaming(true);\n onStart?.();\n\n const mockText =\n 'This is a simulated streaming response from the AI agent. ' +\n 'In a real implementation, this would stream data from your backend API. ' +\n 'The text appears word by word to simulate the streaming effect. ' +\n 'You can customize the typing speed and styling based on your needs.';\n\n try {\n await generateMockStreamingResponse(\n mockText,\n (chunk) => {\n setText((prev) => prev + chunk);\n onChunk?.(chunk);\n },\n typingSpeed\n );\n\n setIsComplete(true);\n setIsStreaming(false);\n onComplete?.(text + mockText);\n } catch (error) {\n const err = error instanceof Error ? error : new Error('Streaming error');\n onError?.(err);\n setIsStreaming(false);\n }\n };\n\n const variantClasses = {\n prose: 'prose prose-sm max-w-none dark:prose-invert',\n code: 'font-mono text-sm bg-gray-900 text-green-400 p-4 rounded-lg',\n plain: 'text-gray-900 dark:text-gray-100',\n };\n\n if (!isStreaming && !isComplete) {\n return (\n <div className={cn('p-4', className)}>\n <button\n onClick={startStreaming}\n className=\"px-6 py-3 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n Start Streaming\n </button>\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], className)}>\n {text}\n {isStreaming && showCursor && <span className=\"apteva-stream-cursor\" />}\n </div>\n );\n}\n","import { useState } from 'react';\nimport { Thread } from '../../types/messages';\nimport { ThreadItem } from './ThreadItem';\n\ninterface ThreadListProps {\n threads: Thread[];\n currentThreadId?: string;\n onThreadSelect?: (threadId: string) => void;\n onThreadDelete?: (threadId: string) => void;\n showSearch?: boolean;\n groupBy?: 'date' | 'agent' | 'none';\n}\n\nexport function ThreadList({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n showSearch = false,\n groupBy = 'none',\n}: ThreadListProps) {\n const [searchQuery, setSearchQuery] = useState('');\n\n const filteredThreads = threads.filter(\n (thread) =>\n thread.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n const groupedThreads = groupBy === 'date' ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };\n\n return (\n <div className=\"flex flex-col h-full\">\n {showSearch && (\n <div className=\"p-3 border-b border-gray-200 dark:border-gray-700\">\n <input\n type=\"text\"\n placeholder=\"Search conversations...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white\"\n />\n </div>\n )}\n\n <div className=\"flex-1 overflow-y-auto\">\n {Object.entries(groupedThreads).map(([group, groupThreads]) => (\n <div key={group}>\n {groupBy !== 'none' && (\n <div className=\"px-3 py-2 text-xs font-semibold text-gray-500 uppercase\">{group}</div>\n )}\n {groupThreads.map((thread) => (\n <ThreadItem\n key={thread.id}\n thread={thread}\n isActive={thread.id === currentThreadId}\n onSelect={() => onThreadSelect?.(thread.id)}\n onDelete={() => onThreadDelete?.(thread.id)}\n />\n ))}\n </div>\n ))}\n\n {filteredThreads.length === 0 && (\n <div className=\"p-8 text-center text-gray-500\">\n <div className=\"text-4xl mb-2\">💬</div>\n <p>No conversations found</p>\n </div>\n )}\n </div>\n </div>\n );\n}\n\nfunction groupThreadsByDate(threads: Thread[]): Record<string, Thread[]> {\n const now = new Date();\n const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n const lastWeek = new Date(today);\n lastWeek.setDate(lastWeek.getDate() - 7);\n\n return threads.reduce(\n (groups, thread) => {\n const threadDate = new Date(thread.updatedAt);\n let group = 'Older';\n\n if (threadDate >= today) {\n group = 'Today';\n } else if (threadDate >= yesterday) {\n group = 'Yesterday';\n } else if (threadDate >= lastWeek) {\n group = 'Last 7 Days';\n }\n\n if (!groups[group]) groups[group] = [];\n groups[group].push(thread);\n return groups;\n },\n {} as Record<string, Thread[]>\n );\n}\n","// No direct imports needed 'react';\nimport { Thread } from '../../types/messages';\nimport { cn } from '../../utils';\n\ninterface ThreadItemProps {\n thread: Thread;\n isActive?: boolean;\n onSelect?: () => void;\n onDelete?: () => void;\n}\n\nexport function ThreadItem({ thread, isActive = false, onSelect, onDelete }: ThreadItemProps) {\n return (\n <div\n className={cn('apteva-thread-item', {\n 'apteva-thread-item-active': isActive,\n })}\n onClick={onSelect}\n >\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"font-semibold text-gray-900 dark:text-white truncate\">{thread.title}</h4>\n {thread.preview && <p className=\"text-sm text-gray-600 dark:text-gray-400 truncate\">{thread.preview}</p>}\n <div className=\"flex items-center gap-2 mt-1 text-xs text-gray-500\">\n <span>{thread.messageCount} messages</span>\n <span>•</span>\n <span>{formatRelativeTime(thread.updatedAt)}</span>\n </div>\n </div>\n\n {onDelete && (\n <button\n onClick={(e) => {\n e.stopPropagation();\n onDelete();\n }}\n className=\"p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors\"\n title=\"Delete thread\"\n >\n 🗑️\n </button>\n )}\n </div>\n );\n}\n\nfunction formatRelativeTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const minutes = Math.floor(diff / 60000);\n const hours = Math.floor(diff / 3600000);\n const days = Math.floor(diff / 86400000);\n\n if (minutes < 1) return 'Just now';\n if (minutes < 60) return `${minutes}m ago`;\n if (hours < 24) return `${hours}h ago`;\n if (days < 7) return `${days}d ago`;\n return date.toLocaleDateString();\n}\n","// No direct imports needed 'react';\nimport { ThreadsProps } from '../../types/components';\nimport { ThreadList } from './ThreadList';\nimport { cn } from '../../utils';\n\nexport function Threads({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n onNewThread,\n variant = 'sidebar',\n showSearch = false,\n showNewButton = true,\n groupBy = 'none',\n className,\n}: ThreadsProps) {\n const variantClasses = {\n sidebar: 'h-full border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900',\n dropdown: 'absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-hidden',\n tabs: 'flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto',\n };\n\n if (variant === 'tabs') {\n return (\n <div className={cn(variantClasses[variant], className)}>\n {threads.slice(0, 5).map((thread) => (\n <button\n key={thread.id}\n onClick={() => onThreadSelect?.(thread.id)}\n className={cn(\n 'px-4 py-2 whitespace-nowrap font-medium transition-colors',\n thread.id === currentThreadId\n ? 'border-b-2 border-apteva-500 text-apteva-500'\n : 'text-gray-600 hover:text-gray-900'\n )}\n >\n {thread.title}\n </button>\n ))}\n {showNewButton && onNewThread && (\n <button\n onClick={onNewThread}\n className=\"px-4 py-2 text-gray-600 hover:text-apteva-500 transition-colors font-medium\"\n >\n + New\n </button>\n )}\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], 'flex flex-col', className)}>\n {showNewButton && onNewThread && (\n <div className=\"p-3 border-b border-gray-200 dark:border-gray-700\">\n <button\n onClick={onNewThread}\n className=\"w-full px-4 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n + New Conversation\n </button>\n </div>\n )}\n\n <ThreadList\n threads={threads}\n currentThreadId={currentThreadId}\n onThreadSelect={onThreadSelect}\n onThreadDelete={onThreadDelete}\n showSearch={showSearch}\n groupBy={groupBy}\n />\n </div>\n );\n}\n","/**\n * Theme initialization script that runs before React hydration\n * This prevents flickering by setting the theme before the page renders\n * Must be inlined in the HTML <head> as a blocking script\n */\n\nexport const themeScript = `\n(function() {\n try {\n // Get system preference\n const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const colorMode = isDark ? 'dark' : 'light';\n\n // Set attributes before render\n document.documentElement.setAttribute('data-color-mode', colorMode);\n\n // Add dark class for Tailwind\n if (isDark) {\n document.documentElement.classList.add('dark');\n }\n } catch (e) {\n console.error('Failed to initialize theme:', e);\n }\n})();\n`;\n\nexport function getThemeScript() {\n return themeScript;\n}\n"]}
1
+ {"version":3,"sources":["/Users/marcoschwartz/Documents/code/frontends/apteva/apteva-kit/dist/index.js","../src/components/Chat/Chat.tsx","../src/components/Chat/MessageList.tsx","../src/utils/cn.ts","../src/utils/mock-data.ts","../src/components/Widgets/Widgets.tsx","../src/components/Widgets/widget-library/Card.tsx","../src/components/Widgets/widget-library/List.tsx","../src/components/Widgets/widget-library/Button.tsx","../src/components/Widgets/WidgetRenderer.tsx","../src/components/Chat/Message.tsx","../src/components/Chat/Composer.tsx","../src/components/Command/Command.tsx","../src/components/Prompt/Prompt.tsx","../src/components/Stream/Stream.tsx","../src/components/Threads/ThreadList.tsx","../src/components/Threads/ThreadItem.tsx","../src/components/Threads/Threads.tsx","../src/utils/theme-script.ts"],"names":["jsxs","jsx","useRef","useState","Fragment"],"mappings":"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","file":"/Users/marcoschwartz/Documents/code/frontends/apteva/apteva-kit/dist/index.js","sourcesContent":[null,"import { useState, useEffect } from 'react';\nimport { ChatProps } from '../../types/components';\nimport { Message as MessageType } from '../../types/messages';\nimport { MessageList } from './MessageList';\nimport { Composer } from './Composer';\nimport { cn, mockMessages, generateMockResponse } from '../../utils';\n\nexport function Chat({\n agentId,\n threadId,\n initialMessages = [],\n onThreadChange,\n onMessageSent,\n onAction,\n onFileUpload,\n placeholder = 'Type a message...',\n showHeader = true,\n headerTitle = 'Chat',\n className,\n}: ChatProps) {\n const [messages, setMessages] = useState<MessageType[]>(initialMessages.length > 0 ? initialMessages : mockMessages);\n const [isLoading, setIsLoading] = useState(false);\n\n useEffect(() => {\n // Load messages when threadId changes\n if (threadId) {\n // In real implementation, fetch messages from API\n console.log('Loading thread:', threadId);\n onThreadChange?.(threadId);\n }\n }, [threadId, onThreadChange]);\n\n const handleSendMessage = async (text: string) => {\n // Add user message\n const userMessage: MessageType = {\n id: `msg-${Date.now()}`,\n role: 'user',\n content: text,\n timestamp: new Date(),\n };\n\n setMessages((prev) => [...prev, userMessage]);\n onMessageSent?.(userMessage);\n\n // Simulate AI response\n setIsLoading(true);\n try {\n const response = await generateMockResponse(1000);\n setMessages((prev) => [...prev, response]);\n } catch (error) {\n console.error('Error generating response:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n <div className={cn('flex flex-col h-full bg-white dark:bg-gray-900', className)}>\n {showHeader && (\n <div className=\"px-4 py-3 bg-white dark:bg-gray-900\">\n <h2 className=\"!text-lg font-semibold !text-gray-900 dark:!text-white\">{headerTitle}</h2>\n <p className=\"!text-xs !text-gray-500 dark:!text-gray-400\">Agent: {agentId}</p>\n </div>\n )}\n\n <MessageList messages={messages} onAction={onAction} />\n\n {isLoading && (\n <div className=\"px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic\">AI is thinking...</div>\n )}\n\n <Composer onSendMessage={handleSendMessage} placeholder={placeholder} disabled={isLoading} onFileUpload={onFileUpload} />\n </div>\n );\n}\n","import { useEffect, useRef } from 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { Message } from './Message';\nimport { ActionEvent } from '../../types/actions';\n\ninterface MessageListProps {\n messages: MessageType[];\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function MessageList({ messages, onAction }: MessageListProps) {\n const listRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n // Auto-scroll to bottom when new messages arrive\n if (listRef.current) {\n listRef.current.scrollTop = listRef.current.scrollHeight;\n }\n }, [messages]);\n\n return (\n <div ref={listRef} className=\"flex-1 overflow-y-auto px-4 py-4 space-y-3\">\n {messages.length === 0 ? (\n <div className=\"flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400\">\n <div className=\"text-center space-y-2\">\n <div className=\"text-4xl\">💬</div>\n <p>No messages yet. Start a conversation!</p>\n </div>\n </div>\n ) : (\n messages.map((message) => <Message key={message.id} message={message} onAction={onAction} />)\n )}\n </div>\n );\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Message, Thread } from '../types/messages';\nimport { Widget } from '../types/widgets';\n\nexport const mockMessages: Message[] = [\n {\n id: 'msg-1',\n role: 'assistant',\n content: 'Hello! I\\'m your AI assistant. How can I help you today?',\n timestamp: new Date(Date.now() - 3600000),\n },\n {\n id: 'msg-2',\n role: 'user',\n content: 'I want to plan a trip to Europe',\n timestamp: new Date(Date.now() - 3500000),\n },\n {\n id: 'msg-3',\n role: 'assistant',\n content: 'Great choice! Europe has amazing destinations. What\\'s your budget and how many days do you have?',\n timestamp: new Date(Date.now() - 3400000),\n },\n {\n id: 'msg-4',\n role: 'user',\n content: 'Around $2000 for 5 days',\n timestamp: new Date(Date.now() - 3300000),\n },\n {\n id: 'msg-5',\n role: 'assistant',\n content: 'Perfect! I found some great destinations that fit your budget:',\n widgets: [\n {\n type: 'list',\n id: 'destinations-1',\n props: {\n items: [\n {\n id: 'paris',\n title: 'Paris, France',\n subtitle: '5 days • $1,850',\n description: 'The City of Light with iconic landmarks',\n metadata: { city: 'Paris', country: 'France', lat: 48.8566, lng: 2.3522, price: 1850, days: 5 },\n },\n {\n id: 'rome',\n title: 'Rome, Italy',\n subtitle: '5 days • $1,650',\n description: 'Ancient history meets modern culture',\n metadata: { city: 'Rome', country: 'Italy', lat: 41.9028, lng: 12.4964, price: 1650, days: 5 },\n },\n {\n id: 'barcelona',\n title: 'Barcelona, Spain',\n subtitle: '5 days • $1,450',\n description: 'Beautiful beaches and Gaudí architecture',\n metadata: { city: 'Barcelona', country: 'Spain', lat: 41.3851, lng: 2.1734, price: 1450, days: 5 },\n },\n ],\n },\n actions: [\n {\n type: 'select_destination',\n label: 'Select',\n handler: 'client',\n payload: {},\n },\n {\n type: 'view_details',\n label: 'Details',\n handler: 'server',\n payload: {},\n },\n ],\n },\n ],\n timestamp: new Date(Date.now() - 3200000),\n },\n];\n\nexport const mockThreads: Thread[] = [\n {\n id: 'thread-1',\n title: 'Trip to Europe',\n preview: 'Planning a 5-day trip...',\n createdAt: new Date(Date.now() - 86400000),\n updatedAt: new Date(Date.now() - 3600000),\n messageCount: 12,\n },\n {\n id: 'thread-2',\n title: 'Restaurant Recommendations',\n preview: 'Looking for good places...',\n createdAt: new Date(Date.now() - 172800000),\n updatedAt: new Date(Date.now() - 86400000),\n messageCount: 8,\n },\n {\n id: 'thread-3',\n title: 'Budget Planning',\n preview: 'Help with monthly budget',\n createdAt: new Date(Date.now() - 259200000),\n updatedAt: new Date(Date.now() - 172800000),\n messageCount: 15,\n },\n];\n\nexport const mockWidgets: Widget[] = [\n {\n type: 'card',\n id: 'card-1',\n props: {\n title: 'Paris, France',\n description: '5-day adventure in the City of Light',\n image: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34',\n footer: 'Total: $1,850',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-paris' },\n },\n ],\n },\n {\n type: 'card',\n id: 'card-2',\n props: {\n title: 'Rome, Italy',\n description: 'Explore ancient wonders',\n image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5',\n footer: 'Total: $1,650',\n },\n actions: [\n {\n type: 'book_trip',\n label: 'Book Now',\n handler: 'client',\n payload: { tripId: 'trip-rome' },\n },\n ],\n },\n];\n\nexport function generateMockResponse(delay: number = 1000): Promise<Message> {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n id: `msg-${Date.now()}`,\n role: 'assistant',\n content: 'This is a mock response. In production, this would come from your AI agent API.',\n timestamp: new Date(),\n });\n }, delay);\n });\n}\n\nexport function generateMockStreamingResponse(\n text: string,\n onChunk: (chunk: string) => void,\n typingSpeed: number = 30\n): Promise<void> {\n return new Promise((resolve) => {\n const words = text.split(' ');\n let currentIndex = 0;\n\n const interval = setInterval(() => {\n if (currentIndex < words.length) {\n onChunk(words[currentIndex] + ' ');\n currentIndex++;\n } else {\n clearInterval(interval);\n resolve();\n }\n }, typingSpeed);\n });\n}\n","import { useEffect } from 'react';\nimport { WidgetsProps } from '../../types/components';\nimport { WidgetRenderer } from './WidgetRenderer';\nimport { cn } from '../../utils';\n\nexport function Widgets({\n widgets,\n onAction,\n onWidgetMount,\n layout = 'stack',\n spacing = 'normal',\n columns = 3,\n className,\n}: WidgetsProps) {\n useEffect(() => {\n widgets.forEach((widget) => {\n onWidgetMount?.(widget.id);\n });\n }, [widgets, onWidgetMount]);\n\n const layoutClasses = {\n stack: 'flex flex-col',\n grid: `grid grid-cols-1 md:grid-cols-${columns}`,\n masonry: 'columns-1 md:columns-2 lg:columns-3',\n };\n\n const spacingClasses = {\n tight: 'gap-2',\n normal: 'gap-4',\n loose: 'gap-6',\n };\n\n return (\n <div className={cn(layoutClasses[layout], spacingClasses[spacing], className)}>\n {widgets.map((widget) => (\n <WidgetRenderer key={widget.id} widget={widget} onAction={onAction} />\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { CardWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface CardProps {\n widget: CardWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Card({ widget, onAction }: CardProps) {\n const { title, description, image, footer } = widget.props;\n\n return (\n <div className=\"border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden\">\n {image && <img src={image} alt={title} className=\"w-full h-48 object-cover\" />}\n\n <div className=\"p-4\">\n <h3 className=\"!text-lg font-semibold !text-gray-900 dark:!text-white\">{title}</h3>\n {description && <p className=\"!text-gray-600 dark:!text-gray-400 mt-2\">{description}</p>}\n </div>\n\n {(footer || (widget.actions && widget.actions.length > 0)) && (\n <div className=\"border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center\">\n {footer && <span className=\"!text-sm !text-gray-600 dark:!text-gray-400\">{footer}</span>}\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: action.payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ListWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\n\ninterface ListProps {\n widget: ListWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function List({ widget, onAction }: ListProps) {\n const { items } = widget.props;\n\n return (\n <div className=\"border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden\">\n {items.map((item, index) => (\n <div\n key={item.id}\n className={`flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${\n index !== items.length - 1 ? 'border-b border-gray-200 dark:border-gray-700' : ''\n }`}\n >\n {item.image && <img src={item.image} alt={item.title} className=\"w-16 h-16 rounded object-cover\" />}\n\n <div className={`flex-1 ${item.image ? 'ml-4' : ''}`}>\n <h4 className=\"font-semibold !text-gray-900 dark:!text-white\">{item.title}</h4>\n {item.subtitle && <p className=\"!text-sm !text-gray-600 dark:!text-gray-400\">{item.subtitle}</p>}\n {item.description && (\n <p className=\"!text-xs !text-gray-500 dark:!text-gray-500 mt-1\">{item.description}</p>\n )}\n </div>\n\n {widget.actions && widget.actions.length > 0 && (\n <div className=\"flex gap-2\">\n {widget.actions.map((action, idx) => (\n <button\n key={idx}\n onClick={() =>\n onAction?.({\n type: action.type,\n payload: item.metadata || item,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n className=\"px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600\"\n >\n {action.label}\n </button>\n ))}\n </div>\n )}\n </div>\n ))}\n </div>\n );\n}\n","// No direct imports needed 'react';\nimport { ButtonWidget } from '../../../types/widgets';\nimport { ActionEvent } from '../../../types/actions';\nimport { cn } from '../../../utils';\n\ninterface ButtonProps {\n widget: ButtonWidget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Button({ widget, onAction }: ButtonProps) {\n const { label, variant = 'primary', disabled = false } = widget.props;\n\n const variantClasses = {\n primary: 'bg-blue-500 !text-white hover:bg-blue-600',\n secondary: 'bg-gray-500 !text-white hover:bg-gray-600',\n outline: 'border-2 border-blue-500 !text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900',\n ghost: '!text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900',\n };\n\n return (\n <button\n onClick={() =>\n widget.actions?.[0] &&\n onAction?.({\n type: widget.actions[0].type,\n payload: widget.actions[0].payload,\n widgetId: widget.id,\n timestamp: new Date(),\n })\n }\n disabled={disabled}\n className={cn('px-4 py-2 rounded-lg font-medium transition-colors', variantClasses[variant], {\n 'opacity-50 cursor-not-allowed': disabled,\n })}\n >\n {label}\n </button>\n );\n}\n","// No direct imports needed 'react';\nimport { Widget } from '../../types/widgets';\nimport { ActionEvent } from '../../types/actions';\nimport { Card, List, Button } from './widget-library';\n\ninterface WidgetRendererProps {\n widget: Widget;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function WidgetRenderer({ widget, onAction }: WidgetRendererProps) {\n switch (widget.type) {\n case 'card':\n return <Card widget={widget as any} onAction={onAction} />;\n case 'list':\n return <List widget={widget as any} onAction={onAction} />;\n case 'button':\n return <Button widget={widget as any} onAction={onAction} />;\n default:\n return (\n <div className=\"p-4 border border-yellow-300 bg-yellow-50 rounded-lg\">\n <p className=\"text-sm text-yellow-800\">Unknown widget type: {widget.type}</p>\n <pre className=\"text-xs mt-2 overflow-auto\">{JSON.stringify(widget, null, 2)}</pre>\n </div>\n );\n }\n}\n","// No direct imports needed 'react';\nimport { Message as MessageType } from '../../types/messages';\nimport { cn } from '../../utils';\nimport { Widgets } from '../Widgets';\nimport { ActionEvent } from '../../types/actions';\n\ninterface MessageProps {\n message: MessageType;\n onAction?: (action: ActionEvent) => void;\n}\n\nexport function Message({ message, onAction }: MessageProps) {\n const isUser = message.role === 'user';\n\n return (\n <div\n className={cn(\n 'max-w-[80%]',\n isUser\n ? 'px-4 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 !text-gray-900 dark:!text-gray-100 ml-auto'\n : '!text-gray-900 dark:!text-gray-100'\n )}\n >\n <div className=\"whitespace-pre-wrap !text-sm leading-relaxed\">{message.content}</div>\n\n {message.widgets && message.widgets.length > 0 && (\n <div className={cn(isUser ? 'mt-3' : 'mt-2')}>\n <Widgets widgets={message.widgets} onAction={onAction} layout=\"stack\" />\n </div>\n )}\n\n <div className={cn('!text-xs opacity-70', isUser ? 'mt-1.5 !text-gray-500 dark:!text-gray-400' : 'mt-1 !text-gray-500 dark:!text-gray-400')} suppressHydrationWarning>\n {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n </div>\n </div>\n );\n}\n","import { useState, KeyboardEvent, useRef } from 'react';\n\ninterface ComposerProps {\n onSendMessage: (text: string) => void;\n placeholder?: string;\n disabled?: boolean;\n onFileUpload?: (files: FileList) => void;\n}\n\nexport function Composer({ onSendMessage, placeholder = 'Type a message...', disabled = false, onFileUpload }: ComposerProps) {\n const [text, setText] = useState('');\n const [showMenu, setShowMenu] = useState(false);\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n };\n\n const handleSend = () => {\n if (text.trim() && !disabled) {\n onSendMessage(text.trim());\n setText('');\n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n }\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setText(e.target.value);\n // Auto-resize textarea\n e.target.style.height = 'auto';\n e.target.style.height = `${e.target.scrollHeight}px`;\n };\n\n const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n onFileUpload?.(e.target.files);\n setShowMenu(false);\n }\n };\n\n return (\n <div className=\"px-4 py-3 bg-white dark:bg-gray-900 relative\">\n {/* Menu Popup */}\n {showMenu && (\n <>\n <div className=\"fixed inset-0 z-10\" onClick={() => setShowMenu(false)} />\n <div className=\"absolute bottom-full left-4 mb-2 bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-20 min-w-[240px]\">\n <button\n onClick={() => fileInputRef.current?.click()}\n className=\"w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2, 3)\"/>\n </svg>\n <span className=\"!text-sm font-medium\">Add photos & files</span>\n </button>\n </div>\n </>\n )}\n\n <div className=\"relative border-2 border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3\">\n <button\n onClick={() => setShowMenu(!showMenu)}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800\"\n title=\"More options\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 5v10M5 10h10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n\n <textarea\n ref={textareaRef}\n value={text}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n className=\"flex-1 resize-none bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed\"\n rows={1}\n style={{ maxHeight: '120px' }}\n />\n\n <button\n onClick={handleSend}\n disabled={!text.trim() || disabled}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 !text-gray-700 dark:!text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg\"\n title=\"Send message\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n </div>\n );\n}\n","import React, { useState, useEffect } from 'react';\nimport { CommandProps, CommandResult } from '../../types/components';\nimport { cn, generateMockResponse } from '../../utils';\n\nexport function Command({\n agentId,\n command: initialCommand,\n context,\n autoExecute = false,\n allowInput = true,\n placeholder = 'Enter your command...',\n submitButtonText = 'Execute',\n variant = 'default',\n onStart,\n onProgress,\n onChunk,\n onComplete,\n onError,\n onFileUpload,\n loadingText = 'Processing...',\n showProgress = true,\n enableStreaming = false,\n resultRenderer,\n className,\n}: CommandProps) {\n const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');\n const [result, setResult] = useState<CommandResult | null>(null);\n const [error, setError] = useState<Error | null>(null);\n const [progress, setProgress] = useState(0);\n const [command, setCommand] = useState(initialCommand || '');\n const [streamedContent, setStreamedContent] = useState('');\n const fileInputRef = React.useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoExecute && state === 'idle' && command) {\n executeCommand();\n }\n }, [autoExecute]);\n\n const executeCommand = async () => {\n if (!command.trim()) {\n setError(new Error('Please enter a command'));\n setState('error');\n return;\n }\n const currentCommand = command;\n setState('loading');\n setError(null);\n setProgress(0);\n setStreamedContent('');\n setCommand(''); // Clear input for next command\n onStart?.();\n\n try {\n if (enableStreaming) {\n // Simulate streaming response with status messages\n const mockStreamChunks = [\n 'Initializing...',\n 'Connecting to agent...',\n 'Processing your request...',\n 'Analyzing data sources...',\n 'Gathering information...',\n 'Generating response...',\n 'Finalizing results...',\n ];\n\n for (let i = 0; i < mockStreamChunks.length; i++) {\n await new Promise((resolve) => setTimeout(resolve, 600 + Math.random() * 400));\n const chunk = mockStreamChunks[i];\n setStreamedContent(chunk);\n onChunk?.(chunk);\n setProgress(Math.round(((i + 1) / mockStreamChunks.length) * 100));\n onProgress?.(Math.round(((i + 1) / mockStreamChunks.length) * 100));\n }\n\n const mockResult: CommandResult = {\n success: true,\n data: {\n summary: `Successfully processed: \"${currentCommand}\"`,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: 'Command executed successfully',\n };\n\n setResult(mockResult);\n setState('success');\n setProgress(100);\n onComplete?.(mockResult);\n } else {\n // Original non-streaming behavior\n const progressInterval = setInterval(() => {\n setProgress((prev) => {\n const next = Math.min(prev + 10, 90);\n onProgress?.(next);\n return next;\n });\n }, 200);\n\n await new Promise((resolve) => setTimeout(resolve, 2000));\n clearInterval(progressInterval);\n\n const mockResult: CommandResult = {\n success: true,\n data: {\n summary: `Command \"${currentCommand}\" executed successfully`,\n agentId,\n context,\n timestamp: new Date().toISOString(),\n },\n message: 'Execution complete',\n };\n\n setResult(mockResult);\n setState('success');\n setProgress(100);\n onComplete?.(mockResult);\n }\n } catch (err) {\n const error = err instanceof Error ? err : new Error('Unknown error');\n setError(error);\n setState('error');\n onError?.(error);\n }\n };\n\n const resetCommand = () => {\n setState('idle');\n setResult(null);\n setError(null);\n setProgress(0);\n setCommand('');\n };\n\n const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.files && e.target.files.length > 0) {\n onFileUpload?.(e.target.files);\n }\n };\n\n const isCompact = variant === 'compact';\n\n return (\n <div\n className={cn(\n 'relative border-2 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex flex-col',\n state === 'loading' && 'animate-pulse-border',\n state === 'idle' && 'border-gray-300 dark:border-gray-700',\n state === 'loading' && 'border-blue-500',\n state === 'success' && 'border-green-500',\n state === 'error' && 'border-red-500',\n className\n )}\n style={{ minHeight: isCompact ? 'auto' : '180px' }}\n >\n {/* Input/Display Area */}\n <div className={cn('flex-1 flex', isCompact ? 'flex-row items-center p-3 gap-3' : 'flex-col p-4')}>\n {state === 'idle' && allowInput && !isCompact && (\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500\"\n rows={6}\n />\n )}\n\n {state === 'idle' && allowInput && isCompact && (\n <>\n <button\n onClick={() => fileInputRef.current?.click()}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800\"\n title=\"Attach file\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1.6, 2.4)\"/>\n </svg>\n </button>\n <input\n type=\"text\"\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1\"\n />\n <button\n onClick={executeCommand}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-gray-300 dark:border-gray-600',\n 'bg-white dark:bg-gray-800',\n '!text-gray-700 dark:!text-gray-300',\n 'hover:bg-gray-50 dark:hover:bg-gray-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600'\n )}\n title=\"Execute\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n\n {state === 'loading' && !isCompact && (\n <div className=\"flex-1 flex flex-col items-center justify-center space-y-4 py-8\">\n <div className=\"w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-gray-600 dark:text-gray-400 text-sm text-center max-w-md\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n {showProgress && (\n <div className=\"w-full max-w-sm\">\n <div className=\"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5\">\n <div\n className=\"bg-blue-500 h-1.5 rounded-full transition-all duration-300\"\n style={{ width: `${progress}%` }}\n />\n </div>\n <p className=\"text-xs text-gray-500 mt-2 text-center\">{progress}%</p>\n </div>\n )}\n </div>\n )}\n\n {state === 'loading' && isCompact && (\n <>\n <div className=\"flex-1 flex items-center gap-3 py-1\">\n <div className=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n <div className=\"text-gray-600 dark:text-gray-400 text-sm truncate\">\n {enableStreaming && streamedContent ? streamedContent : loadingText}\n </div>\n </div>\n <button\n disabled\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-gray-200 dark:border-gray-700',\n 'bg-white dark:bg-gray-800',\n '!text-gray-400 dark:!text-gray-600',\n '!text-lg',\n 'opacity-30 cursor-not-allowed'\n )}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n\n {state === 'error' && (\n <div className=\"flex-1 flex flex-col\">\n <div className=\"mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg\">\n <div className=\"flex items-start gap-2\">\n <svg className=\"w-5 h-5 text-red-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div>\n <h3 className=\"text-sm font-semibold text-red-800 dark:text-red-400\">Error</h3>\n <p className=\"text-red-700 dark:text-red-300 text-sm mt-1\">{error?.message}</p>\n </div>\n </div>\n </div>\n {allowInput && (\n <textarea\n value={command}\n onChange={(e) => setCommand(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n executeCommand();\n }\n }}\n placeholder={placeholder}\n className=\"flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400\"\n rows={4}\n />\n )}\n </div>\n )}\n\n {state === 'success' && result && !isCompact && (\n <div className=\"flex-1 overflow-auto\">\n {resultRenderer ? (\n resultRenderer(result.data)\n ) : (\n <div>\n <div className=\"flex items-start gap-3 mb-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg\">\n <svg className=\"w-5 h-5 text-green-600 mt-0.5 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"flex-1\">\n <h3 className=\"text-sm font-semibold text-green-800 dark:text-green-400 mb-1\">Success</h3>\n <p className=\"text-green-700 dark:text-green-300 text-sm\">{result.message || 'Command executed successfully'}</p>\n </div>\n </div>\n {result.data?.summary && (\n <div className=\"text-gray-700 dark:text-gray-300 text-sm leading-relaxed\">\n {result.data.summary}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n\n {state === 'success' && result && isCompact && (\n <>\n <div\n className=\"flex-1 flex items-center gap-2 py-1 cursor-text\"\n onClick={() => {\n setState('idle');\n setResult(null);\n }}\n >\n <svg className=\"w-4 h-4 text-green-600 flex-shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <div className=\"text-green-700 dark:text-green-300 text-sm truncate\">\n {resultRenderer ? resultRenderer(result.data) : (result.message || 'Command executed successfully')}\n </div>\n </div>\n <button\n onClick={() => {\n setState('idle');\n setResult(null);\n }}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0',\n 'border border-gray-300 dark:border-gray-600',\n 'bg-white dark:bg-gray-800',\n '!text-gray-700 dark:!text-gray-300',\n 'hover:bg-gray-50 dark:hover:bg-gray-700',\n '!text-lg'\n )}\n title=\"New command\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </button>\n </>\n )}\n </div>\n\n {/* Bottom Action Bar - Only show for default variant when not in compact mode */}\n {!isCompact && (\n <div className=\"p-3 flex items-center justify-between gap-2\">\n {/* Left side - Attachment button */}\n {state === 'idle' && allowInput && (\n <button\n onClick={() => fileInputRef.current?.click()}\n className=\"w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800\"\n title=\"Attach file\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1.6, 2.4)\"/>\n </svg>\n </button>\n )}\n\n {/* Spacer when no attachment button */}\n {!(state === 'idle' && allowInput) && <div />}\n\n {/* Right side - Action buttons */}\n <div className=\"flex items-center gap-2\">\n {(state === 'success' || state === 'error') && allowInput && (\n <button\n onClick={resetCommand}\n className=\"px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors\"\n >\n Reset\n </button>\n )}\n\n {(state === 'idle' || state === 'error') && (\n <button\n onClick={executeCommand}\n disabled={!command.trim()}\n className={cn(\n 'w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all',\n 'border border-gray-300 dark:border-gray-600',\n 'bg-white dark:bg-gray-800',\n '!text-gray-700 dark:!text-gray-300',\n 'hover:bg-gray-50 dark:hover:bg-gray-700',\n 'disabled:opacity-30 disabled:cursor-not-allowed',\n '!text-lg',\n !command.trim() && 'border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600'\n )}\n title={state === 'error' ? 'Retry' : 'Execute'}\n >\n {state === 'error' ? (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n ) : (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3L8 13M8 3L4 7M8 3L12 7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n )}\n </button>\n )}\n </div>\n </div>\n )}\n\n\n {/* Hidden file input */}\n <input\n ref={fileInputRef}\n type=\"file\"\n multiple\n onChange={handleFileSelect}\n className=\"hidden\"\n accept=\"image/*,application/pdf,.doc,.docx,.txt\"\n />\n\n <style dangerouslySetInnerHTML={{\n __html: `\n @keyframes pulse-border {\n 0%, 100% {\n border-color: rgb(59, 130, 246);\n }\n 50% {\n border-color: rgb(147, 197, 253);\n }\n }\n .animate-pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n `\n }} />\n </div>\n );\n}\n","import { useState, KeyboardEvent } from 'react';\nimport { PromptProps } from '../../types/components';\nimport { cn } from '../../utils';\n\nexport function Prompt({\n agentId,\n placeholder = 'Enter your prompt...',\n initialValue = '',\n submitOn = 'button',\n debounceMs = 0,\n minLength = 0,\n maxLength,\n onSubmit,\n onResult,\n onChange,\n variant = 'inline',\n showSuggestions = false,\n className,\n}: PromptProps) {\n const [value, setValue] = useState(initialValue);\n const [isLoading, setIsLoading] = useState(false);\n const [suggestions] = useState(['Plan a trip', 'Write a description', 'Analyze data']);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!maxLength || newValue.length <= maxLength) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n const handleSubmit = async () => {\n if (value.length < minLength) return;\n\n onSubmit?.(value);\n setIsLoading(true);\n\n try {\n // Mock AI processing\n await new Promise((resolve) => setTimeout(resolve, 1500));\n const mockResult = `Enhanced version: ${value} [AI-generated content]`;\n onResult?.(mockResult);\n setValue('');\n } catch (error) {\n console.error('Error processing prompt:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (submitOn === 'enter' && e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const handleBlur = () => {\n if (submitOn === 'blur' && value.trim()) {\n handleSubmit();\n }\n };\n\n return (\n <div className={cn('space-y-2', className)}>\n <div className=\"flex gap-2\">\n <input\n type=\"text\"\n value={value}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n placeholder={placeholder}\n disabled={isLoading}\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white\"\n />\n\n {submitOn === 'button' && (\n <button\n onClick={handleSubmit}\n disabled={isLoading || value.length < minLength}\n className=\"px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n >\n {isLoading ? 'Processing...' : 'Generate'}\n </button>\n )}\n </div>\n\n {maxLength && (\n <p className=\"text-xs text-gray-500\">\n {value.length} / {maxLength} characters\n </p>\n )}\n\n {showSuggestions && !value && (\n <div className=\"flex flex-wrap gap-2\">\n {suggestions.map((suggestion, idx) => (\n <button\n key={idx}\n onClick={() => setValue(suggestion)}\n className=\"px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full transition-colors\"\n >\n {suggestion}\n </button>\n ))}\n </div>\n )}\n\n {isLoading && (\n <div className=\"flex items-center gap-2 text-sm text-gray-500\">\n <div className=\"w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin\" />\n <span>AI is processing your request...</span>\n </div>\n )}\n </div>\n );\n}\n","import { useState, useEffect } from 'react';\nimport { StreamProps } from '../../types/components';\nimport { cn, generateMockStreamingResponse } from '../../utils';\n\nexport function Stream({\n agentId,\n prompt,\n context,\n autoStart = false,\n onStart,\n onChunk,\n onComplete,\n onError,\n variant = 'prose',\n showCursor = true,\n typingSpeed = 30,\n className,\n}: StreamProps) {\n const [text, setText] = useState('');\n const [isStreaming, setIsStreaming] = useState(false);\n const [isComplete, setIsComplete] = useState(false);\n\n useEffect(() => {\n if (autoStart && !isStreaming && !isComplete) {\n startStreaming();\n }\n }, [autoStart]);\n\n const startStreaming = async () => {\n setIsStreaming(true);\n onStart?.();\n\n const mockText =\n 'This is a simulated streaming response from the AI agent. ' +\n 'In a real implementation, this would stream data from your backend API. ' +\n 'The text appears word by word to simulate the streaming effect. ' +\n 'You can customize the typing speed and styling based on your needs.';\n\n try {\n await generateMockStreamingResponse(\n mockText,\n (chunk) => {\n setText((prev) => prev + chunk);\n onChunk?.(chunk);\n },\n typingSpeed\n );\n\n setIsComplete(true);\n setIsStreaming(false);\n onComplete?.(text + mockText);\n } catch (error) {\n const err = error instanceof Error ? error : new Error('Streaming error');\n onError?.(err);\n setIsStreaming(false);\n }\n };\n\n const variantClasses = {\n prose: 'prose prose-sm max-w-none dark:prose-invert',\n code: 'font-mono text-sm bg-gray-900 text-green-400 p-4 rounded-lg',\n plain: 'text-gray-900 dark:text-gray-100',\n };\n\n if (!isStreaming && !isComplete) {\n return (\n <div className={cn('p-4', className)}>\n <button\n onClick={startStreaming}\n className=\"px-6 py-3 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n Start Streaming\n </button>\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], className)}>\n {text}\n {isStreaming && showCursor && <span className=\"apteva-stream-cursor\" />}\n </div>\n );\n}\n","import { useState } from 'react';\nimport { Thread } from '../../types/messages';\nimport { ThreadItem } from './ThreadItem';\n\ninterface ThreadListProps {\n threads: Thread[];\n currentThreadId?: string;\n onThreadSelect?: (threadId: string) => void;\n onThreadDelete?: (threadId: string) => void;\n showSearch?: boolean;\n groupBy?: 'date' | 'agent' | 'none';\n}\n\nexport function ThreadList({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n showSearch = false,\n groupBy = 'none',\n}: ThreadListProps) {\n const [searchQuery, setSearchQuery] = useState('');\n\n const filteredThreads = threads.filter(\n (thread) =>\n thread.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n const groupedThreads = groupBy === 'date' ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };\n\n return (\n <div className=\"flex flex-col h-full\">\n {showSearch && (\n <div className=\"p-3 border-b border-gray-200 dark:border-gray-700\">\n <input\n type=\"text\"\n placeholder=\"Search conversations...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white\"\n />\n </div>\n )}\n\n <div className=\"flex-1 overflow-y-auto\">\n {Object.entries(groupedThreads).map(([group, groupThreads]) => (\n <div key={group}>\n {groupBy !== 'none' && (\n <div className=\"px-3 py-2 text-xs font-semibold text-gray-500 uppercase\">{group}</div>\n )}\n {groupThreads.map((thread) => (\n <ThreadItem\n key={thread.id}\n thread={thread}\n isActive={thread.id === currentThreadId}\n onSelect={() => onThreadSelect?.(thread.id)}\n onDelete={() => onThreadDelete?.(thread.id)}\n />\n ))}\n </div>\n ))}\n\n {filteredThreads.length === 0 && (\n <div className=\"p-8 text-center text-gray-500\">\n <div className=\"text-4xl mb-2\">💬</div>\n <p>No conversations found</p>\n </div>\n )}\n </div>\n </div>\n );\n}\n\nfunction groupThreadsByDate(threads: Thread[]): Record<string, Thread[]> {\n const now = new Date();\n const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n const lastWeek = new Date(today);\n lastWeek.setDate(lastWeek.getDate() - 7);\n\n return threads.reduce(\n (groups, thread) => {\n const threadDate = new Date(thread.updatedAt);\n let group = 'Older';\n\n if (threadDate >= today) {\n group = 'Today';\n } else if (threadDate >= yesterday) {\n group = 'Yesterday';\n } else if (threadDate >= lastWeek) {\n group = 'Last 7 Days';\n }\n\n if (!groups[group]) groups[group] = [];\n groups[group].push(thread);\n return groups;\n },\n {} as Record<string, Thread[]>\n );\n}\n","// No direct imports needed 'react';\nimport { Thread } from '../../types/messages';\nimport { cn } from '../../utils';\n\ninterface ThreadItemProps {\n thread: Thread;\n isActive?: boolean;\n onSelect?: () => void;\n onDelete?: () => void;\n}\n\nexport function ThreadItem({ thread, isActive = false, onSelect, onDelete }: ThreadItemProps) {\n return (\n <div\n className={cn('apteva-thread-item', {\n 'apteva-thread-item-active': isActive,\n })}\n onClick={onSelect}\n >\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"font-semibold text-gray-900 dark:text-white truncate\">{thread.title}</h4>\n {thread.preview && <p className=\"text-sm text-gray-600 dark:text-gray-400 truncate\">{thread.preview}</p>}\n <div className=\"flex items-center gap-2 mt-1 text-xs text-gray-500\">\n <span>{thread.messageCount} messages</span>\n <span>•</span>\n <span>{formatRelativeTime(thread.updatedAt)}</span>\n </div>\n </div>\n\n {onDelete && (\n <button\n onClick={(e) => {\n e.stopPropagation();\n onDelete();\n }}\n className=\"p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors\"\n title=\"Delete thread\"\n >\n 🗑️\n </button>\n )}\n </div>\n );\n}\n\nfunction formatRelativeTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const minutes = Math.floor(diff / 60000);\n const hours = Math.floor(diff / 3600000);\n const days = Math.floor(diff / 86400000);\n\n if (minutes < 1) return 'Just now';\n if (minutes < 60) return `${minutes}m ago`;\n if (hours < 24) return `${hours}h ago`;\n if (days < 7) return `${days}d ago`;\n return date.toLocaleDateString();\n}\n","// No direct imports needed 'react';\nimport { ThreadsProps } from '../../types/components';\nimport { ThreadList } from './ThreadList';\nimport { cn } from '../../utils';\n\nexport function Threads({\n threads,\n currentThreadId,\n onThreadSelect,\n onThreadDelete,\n onNewThread,\n variant = 'sidebar',\n showSearch = false,\n showNewButton = true,\n groupBy = 'none',\n className,\n}: ThreadsProps) {\n const variantClasses = {\n sidebar: 'h-full border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900',\n dropdown: 'absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-hidden',\n tabs: 'flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto',\n };\n\n if (variant === 'tabs') {\n return (\n <div className={cn(variantClasses[variant], className)}>\n {threads.slice(0, 5).map((thread) => (\n <button\n key={thread.id}\n onClick={() => onThreadSelect?.(thread.id)}\n className={cn(\n 'px-4 py-2 whitespace-nowrap font-medium transition-colors',\n thread.id === currentThreadId\n ? 'border-b-2 border-apteva-500 text-apteva-500'\n : 'text-gray-600 hover:text-gray-900'\n )}\n >\n {thread.title}\n </button>\n ))}\n {showNewButton && onNewThread && (\n <button\n onClick={onNewThread}\n className=\"px-4 py-2 text-gray-600 hover:text-apteva-500 transition-colors font-medium\"\n >\n + New\n </button>\n )}\n </div>\n );\n }\n\n return (\n <div className={cn(variantClasses[variant], 'flex flex-col', className)}>\n {showNewButton && onNewThread && (\n <div className=\"p-3 border-b border-gray-200 dark:border-gray-700\">\n <button\n onClick={onNewThread}\n className=\"w-full px-4 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium\"\n >\n + New Conversation\n </button>\n </div>\n )}\n\n <ThreadList\n threads={threads}\n currentThreadId={currentThreadId}\n onThreadSelect={onThreadSelect}\n onThreadDelete={onThreadDelete}\n showSearch={showSearch}\n groupBy={groupBy}\n />\n </div>\n );\n}\n","/**\n * Theme initialization script that runs before React hydration\n * This prevents flickering by setting the theme before the page renders\n * Must be inlined in the HTML <head> as a blocking script\n */\n\nexport const themeScript = `\n(function() {\n try {\n // Get system preference\n const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const colorMode = isDark ? 'dark' : 'light';\n\n // Set attributes before render\n document.documentElement.setAttribute('data-color-mode', colorMode);\n\n // Add dark class for Tailwind\n if (isDark) {\n document.documentElement.classList.add('dark');\n }\n } catch (e) {\n console.error('Failed to initialize theme:', e);\n }\n})();\n`;\n\nexport function getThemeScript() {\n return themeScript;\n}\n"]}