@messenger-box/tailwind-ui-inbox 10.0.3-alpha.77 → 10.0.3-alpha.80

package/src/components/InboxMessage/InputComponent.tsx

@@ -3,21 +3,35 @@ import { useTranslation } from 'react-i18next';
 import { config } from '../../config';
 import { UploadImageButton } from './UploadImageButton';
 import { FilesList } from '../inbox';
+import { ModelConfigPanel, modelOptions, templateOptions, getAllModels } from '../ModelConfigPanel';
+import { ModelConfig } from '../../hooks/usePersistentModelConfig';
 
 type MessageInputProps = {
     channelId?: string;
     handleSend?: (message: string, files: File[]) => Promise<void>;
     placeholder?: string;
+    modelConfig?: ModelConfig;
+    onModelConfigChange?: (config: ModelConfig) => void;
 };
 
-export const InputComponent = ({ handleSend: handleSendProp, placeholder }: MessageInputProps) => {
+export const InputComponent = ({
+    handleSend: handleSendProp,
+    placeholder,
+    modelConfig,
+    onModelConfigChange,
+}: MessageInputProps) => {
     const [message, setMessage] = useState('');
     const [sending, setSending] = useState(false);
     const [files, setFiles] = useState<File[]>([]);
     const [showToast, setShowToast] = useState(false);
     const [toastMessage, setToastMessage] = useState('');
     const [isFocused, setIsFocused] = useState(false);
+    const [showModelDropdown, setShowModelDropdown] = useState(false);
+    const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
+    const [showSettingsModal, setShowSettingsModal] = useState(false);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const modelDropdownRef = useRef<HTMLDivElement>(null);
+    const templateDropdownRef = useRef<HTMLDivElement>(null);
     const { t } = useTranslation('translations');
 
     // Auto-focus the textarea when component mounts
@@ -27,6 +41,20 @@ export const InputComponent = ({ handleSend: handleSendProp, placeholder }: Mess
         }
     }, []);
 
+    // Handle click outside for dropdowns
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
+                setShowModelDropdown(false);
+            }
+            if (templateDropdownRef.current && !templateDropdownRef.current.contains(event.target as Node)) {
+                setShowTemplateDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
     const showToastMessage = useCallback((message: string) => {
         setToastMessage(message);
         setShowToast(true);
@@ -91,6 +119,35 @@ export const InputComponent = ({ handleSend: handleSendProp, placeholder }: Mess
     const canSend = message.trim() || files.length > 0;
     const hasContent = message.trim().length > 0;
 
+    // Get models and templates from ModelConfigPanel
+    const allModelOptions = useMemo(() => {
+        return getAllModels();
+    }, []);
+
+    const templateOptionsList = useMemo(() => {
+        return templateOptions.map((t) => ({ value: t.value, label: t.label, icon: t.icon }));
+    }, []);
+
+    const handleModelSelect = useCallback(
+        (modelValue: string) => {
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, model: modelValue });
+            }
+            setShowModelDropdown(false);
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    const handleTemplateSelect = useCallback(
+        (templateValue: string) => {
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, template: templateValue as any });
+            }
+            setShowTemplateDropdown(false);
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
     return (
         // <div className="bg-gray-50 border-t border-gray-200">
         <div className="bg-gray-50 border border-gray-200">
@@ -142,7 +199,7 @@ export const InputComponent = ({ handleSend: handleSendProp, placeholder }: Mess
                     />
                 </div>
 
-                {/* Toolbar buttons row at bottom */}
+                {/* Simplified Toolbar - Only Template, Model, Upload, Send, and Settings */}
                 <div className="flex items-center gap-2">
                     <UploadImageButton onChange={onUploadImageChange}>
                         <div className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
@@ -156,43 +213,123 @@ export const InputComponent = ({ handleSend: handleSendProp, placeholder }: Mess
                             </svg>
                         </div>
                     </UploadImageButton>
+                    {/* 1. Template Selection Dropdown */}
+                    <div className="relative" ref={templateDropdownRef}>
+                        <button
+                            onClick={() => setShowTemplateDropdown(!showTemplateDropdown)}
+                            className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors min-w-[120px]"
+                        >
+                            {(() => {
+                                if (modelConfig && modelConfig.template) {
+                                    const currentTemplate = templateOptionsList.find(
+                                        (option) => option.value === modelConfig.template,
+                                    );
+                                    return currentTemplate ? (
+                                        <>
+                                            <span className="text-lg">{currentTemplate.icon}</span>
+                                            <span className="text-gray-700">{currentTemplate.label}</span>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <span className="text-lg">📝</span>
+                                            <span className="text-gray-500">Template</span>
+                                        </>
+                                    );
+                                }
+                                return (
+                                    <>
+                                        <span className="text-lg">📝</span>
+                                        <span className="text-gray-500">Template</span>
+                                    </>
+                                );
+                            })()}
+                            <svg
+                                className="w-4 h-4 text-gray-500 ml-auto"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
 
-                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
-                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                            />
-                        </svg>
-                    </button>
+                        {showTemplateDropdown && (
+                            <div className="absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-50">
+                                <div className="py-1">
+                                    {templateOptionsList.map((option) => (
+                                        <button
+                                            key={option.value}
+                                            onClick={() => handleTemplateSelect(option.value)}
+                                            className={`w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors flex items-center gap-2 ${
+                                                modelConfig?.template === option.value ? 'bg-blue-50' : ''
+                                            }`}
+                                        >
+                                            <span className="text-lg">{option.icon}</span>
+                                            <span className="font-medium text-gray-900">{option.label}</span>
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
 
-                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
-                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-                            />
-                        </svg>
-                    </button>
+                    {/* 2. Model Selection Dropdown */}
+                    <div className="relative" ref={modelDropdownRef}>
+                        <button
+                            onClick={() => setShowModelDropdown(!showModelDropdown)}
+                            className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors min-w-[140px]"
+                        >
+                            {(() => {
+                                if (modelConfig && modelConfig.model) {
+                                    const currentModel = allModelOptions.find(
+                                        (option) => option.value === modelConfig.model,
+                                    );
+                                    return currentModel ? (
+                                        <span className="text-gray-700">{currentModel.label}</span>
+                                    ) : (
+                                        <span className="text-gray-500">Model</span>
+                                    );
+                                }
+                                return <span className="text-gray-500">Model</span>;
+                            })()}
+                            <svg
+                                className="w-4 h-4 text-gray-500 ml-auto"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
 
-                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
-                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                            />
-                        </svg>
-                    </button>
+                        {showModelDropdown && (
+                            <div className="absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-60 overflow-y-auto">
+                                <div className="py-1">
+                                    {allModelOptions.map((option) => (
+                                        <button
+                                            key={option.value}
+                                            onClick={() => handleModelSelect(option.value)}
+                                            className={`w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors ${
+                                                modelConfig?.model === option.value ? 'bg-blue-50' : ''
+                                            }`}
+                                        >
+                                            <div className="font-medium text-gray-900">{option.label}</div>
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
 
                     <div className="flex-1"></div>
 
-                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
+                    {/* 3. Upload Button */}
+
+                    {/* 4. Project Settings Button */}
+                    <button
+                        onClick={() => setShowSettingsModal(true)}
+                        className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors"
+                    >
                         <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path
                                 strokeLinecap="round"
@@ -209,7 +346,7 @@ export const InputComponent = ({ handleSend: handleSendProp, placeholder }: Mess
                         </svg>
                     </button>
 
-                    {/* Send button - updated to handle sending messages */}
+                    {/* 5. Send Button */}
                     <button
                         className={`flex items-center justify-center w-8 h-8 rounded-lg border transition-colors ${
                             canSend && !sending
@@ -250,15 +387,76 @@ export const InputComponent = ({ handleSend: handleSendProp, placeholder }: Mess
                 </div>
             </div>
 
-            {/* Beta text and notification icon */}
-            {/* <div className="px-4 py-2 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
-                <span className="text-sm text-gray-500">This feature is in beta. Send feedback</span>
-                <button className="p-1 hover:bg-gray-100 rounded transition-colors">
-                    <svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 19V20H3V19L5 17V11C5 7.9 7.03 5.17 10 4.29C10 4.19 10 4.1 10 4C10 2.9 10.9 2 12 2C13.1 2 14 2.9 14 4C14 4.1 14 4.19 14 4.29C16.97 5.17 19 7.9 19 11V17L21 19ZM14 21C14 22.1 13.1 23 12 23C10.9 23 10 22.1 10 21" />
-                    </svg>
-                </button>
-            </div> */}
+            {/* Simplified Settings Modal - Only API Key and Model */}
+            {showSettingsModal && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+                    <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+                        <div className="p-6 mb-4">
+                            <div className="flex items-center justify-between mb-4">
+                                <h3 className="text-lg font-semibold text-gray-900">Project Settings</h3>
+                                <button
+                                    onClick={() => setShowSettingsModal(false)}
+                                    className="text-gray-400 hover:text-gray-600 transition-colors"
+                                >
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M6 18L18 6M6 6l12 12"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            {modelConfig && onModelConfigChange && (
+                                <div className="space-y-4">
+                                    {/* API Key Input */}
+                                    <div>
+                                        <label className="block text-sm font-medium text-gray-700 mb-2">API Key</label>
+                                        <input
+                                            type="password"
+                                            value={modelConfig.apiKey}
+                                            onChange={(e) =>
+                                                onModelConfigChange({ ...modelConfig, apiKey: e.target.value })
+                                            }
+                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                            placeholder="Enter your API key"
+                                        />
+                                    </div>
+
+                                    {/* Model Selection */}
+                                    <div>
+                                        <label className="block text-sm font-medium text-gray-700 mb-2">Model</label>
+                                        <select
+                                            value={modelConfig.model}
+                                            onChange={(e) =>
+                                                onModelConfigChange({ ...modelConfig, model: e.target.value })
+                                            }
+                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                        >
+                                            {allModelOptions.map((option) => (
+                                                <option key={option.value} value={option.value}>
+                                                    {option.label}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* <div className="mt-6 flex justify-end">
+                                <button
+                                    onClick={() => setShowSettingsModal(false)}
+                                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                                >
+                                    Save Settings
+                                </button>
+                            </div> */}
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };

package/src/components/InboxMessage/message-widgets/ModernMessageGroup.tsx

@@ -183,7 +183,8 @@ const htmlContentStyles = `
     /* Enhanced message container styling */
     .message-container {
         background: #ffffff;
-        padding: 16px;
+        padding-top: 16px;
+        padding-bottom: 16px;
         margin: 12px 0;
         transition: all 0.2s ease-in-out;
     }
@@ -456,28 +457,59 @@ export const groupMessagesByUserAndTime = (messages: IPost[], timeThresholdMinut
     return groups;
 };
 
-// Enhanced HTML detection that recognizes more HTML patterns
-const isProbablyHTML = (value: string): boolean => {
-    if (!value) return false;
-
-    // Check for HTML tags (including self-closing tags)
-    const htmlTagPattern = /<\/?[a-z][\s\S]*>/i;
-
-    // Check for HTML entities
-    const htmlEntityPattern = /&[a-z0-9#]+;/i;
-
-    // Check for common HTML attributes
-    const htmlAttrPattern = /\s+[a-z-]+\s*=\s*["'][^"']*["']/i;
-
-    // Check for HTML-like structure
-    const htmlStructurePattern = /<[^>]+>[^<]*<\/[^>]+>/i;
+// Enhanced content detection that properly identifies different content types
+const detectContentType = (value: string): 'html' | 'markdown' | 'code' | 'text' => {
+    if (!value) return 'text';
+
+    const trimmed = value.trim();
+
+    // Check for code patterns first (most specific)
+    const codePatterns = [
+        /```[\s\S]*?```/g, // Fenced code blocks
+        /`[^`\n]+`/g, // Inline code
+        /---\s*\w+\.\w+\s*---/g, // File separators like "--- src/index.css ---"
+        /@tailwind\s+\w+/g, // Tailwind directives
+        /export\s+default\s*\{/g, // JS/TS exports
+        /import\s+.*\s+from\s+['"]/g, // Import statements
+        /\/\*\*[\s\S]*?\*\//g, // JSDoc comments
+        /\/\*[\s\S]*?\*\//g, // Block comments
+        /\/\/.*$/gm, // Line comments
+    ];
+
+    const hasCodePatterns = codePatterns.some((pattern) => pattern.test(trimmed));
+    if (hasCodePatterns) return 'code';
+
+    // Check for markdown patterns
+    const markdownPatterns = [
+        /^#{1,6}\s+/gm, // Headers
+        /\*\*.*?\*\*/g, // Bold
+        /\*.*?\*/g, // Italic
+        /^\s*[-*+]\s+/gm, // Lists
+        /^\s*\d+\.\s+/gm, // Numbered lists
+        /\[.*?\]\(.*?\)/g, // Links
+        /!\[.*?\]\(.*?\)/g, // Images
+    ];
+
+    const hasMarkdownPatterns = markdownPatterns.some((pattern) => pattern.test(trimmed));
+    if (hasMarkdownPatterns) return 'markdown';
+
+    // Check for HTML patterns
+    const htmlPatterns = [
+        /<\/?[a-z][\s\S]*>/i, // HTML tags
+        /&[a-z0-9#]+;/i, // HTML entities
+        /\s+[a-z-]+\s*=\s*["'][^"']*["']/i, // HTML attributes
+        /<[^>]+>[^<]*<\/[^>]+>/i, // HTML structure
+    ];
+
+    const hasHtmlPatterns = htmlPatterns.some((pattern) => pattern.test(trimmed));
+    if (hasHtmlPatterns) return 'html';
+
+    return 'text';
+};
 
-    return (
-        htmlTagPattern.test(value.trim()) ||
-        htmlEntityPattern.test(value.trim()) ||
-        htmlAttrPattern.test(value.trim()) ||
-        htmlStructurePattern.test(value.trim())
-    );
+// Legacy function for backward compatibility
+const isProbablyHTML = (value: string): boolean => {
+    return detectContentType(value) === 'html';
 };
 
 // Enhanced sanitizer that allows most HTML tags while maintaining security
@@ -636,6 +668,66 @@ const BuilderLikeRenderer: React.FC<{ blocks?: any[] }> = ({ blocks }) => {
     );
 };
 
+// Enhanced code formatter for raw code content
+const CodeFormatter: React.FC<{ content: string }> = ({ content }) => {
+    if (!content) return null;
+
+    // Split content by file separators and format each section
+    const sections = content.split(/(---\s*\w+\.\w+\s*---)/g);
+
+    return (
+        <div className="message-container">
+            <div className="space-y-4">
+                {sections.map((section, index) => {
+                    if (!section.trim()) return null;
+
+                    // Check if this is a file separator
+                    const fileMatch = section.match(/---\s*(\w+\.\w+)\s*---/);
+                    if (fileMatch) {
+                        return (
+                            <div key={index} className="code-block-container">
+                                <div className="code-block-header">📄 {fileMatch[1]}</div>
+                            </div>
+                        );
+                    }
+
+                    // Format the code content
+                    const lines = section.trim().split('\n');
+                    const isCode = lines.some(
+                        (line) =>
+                            line.includes('@tailwind') ||
+                            line.includes('export default') ||
+                            line.includes('import ') ||
+                            line.includes('{') ||
+                            line.includes('}') ||
+                            line.includes('//') ||
+                            line.includes('/*'),
+                    );
+
+                    if (isCode) {
+                        return (
+                            <div key={index} className="code-block-container">
+                                <div className="code-block-content">
+                                    <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap">
+                                        <code>{section.trim()}</code>
+                                    </pre>
+                                </div>
+                            </div>
+                        );
+                    }
+
+                    // Regular text content
+                    return (
+                        <div key={index} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
+                            {section.trim()}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
 // Enhanced markdown renderer using react-markdown with remark-gfm
 const FormattedMessageContent: React.FC<{ content: string }> = ({ content }) => {
     if (!content) return null;
@@ -971,7 +1063,8 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
             >
                 <div className="flex items-start justify-end gap-2">
                     {/* Message content and timestamp on the left */}
-                    <div className="flex flex-col items-end max-w-xs lg:max-w-md">
+                    {/* <div className="flex flex-col items-end max-w-xs lg:max-w-md"> */}
+                    <div className="flex flex-col items-end ">
                         {!isAssistantRole && (
                             <div className="flex items-end space-x-2 mb-0.5">
                                 <span className="text-sm font-semibold text-gray-900">{authorName}</span>
@@ -988,16 +1081,24 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                         >
                             {message.message && (
                                 <div className="max-w-none">
-                                    {isProbablyHTML(message.message) ? (
-                                        <div
-                                            className="text-gray-800 html-content"
-                                            dangerouslySetInnerHTML={{
-                                                __html: prettifyHtmlContent(sanitizeHtml(message.message)),
-                                            }}
-                                        />
-                                    ) : (
-                                        <FormattedMessageContent content={message.message} />
-                                    )}
+                                    {(() => {
+                                        const contentType = detectContentType(message.message);
+
+                                        if (contentType === 'code') {
+                                            return <CodeFormatter content={message.message} />;
+                                        } else if (contentType === 'html') {
+                                            return (
+                                                <div
+                                                    className="text-gray-800 html-content"
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                                    }}
+                                                />
+                                            );
+                                        } else {
+                                            return <FormattedMessageContent content={message.message} />;
+                                        }
+                                    })()}
                                 </div>
                             )}
 
@@ -1058,19 +1159,24 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                             dir={detectTextDirection((message as any)?.message || '')}
                             lang={detectLanguageTag((message as any)?.message || '')}
                         >
-                            {/* Prefer fenced code rendering over HTML when present */}
-                            {message.message.includes('```') ? (
-                                <FormattedMessageContent content={message.message} />
-                            ) : isProbablyHTML(message.message) ? (
-                                <div
-                                    className="max-w-none text-gray-800 html-content"
-                                    dangerouslySetInnerHTML={{
-                                        __html: prettifyHtmlContent(sanitizeHtml(message.message)),
-                                    }}
-                                />
-                            ) : (
-                                <FormattedMessageContent content={message.message} />
-                            )}
+                            {(() => {
+                                const contentType = detectContentType(message.message);
+
+                                if (contentType === 'code') {
+                                    return <CodeFormatter content={message.message} />;
+                                } else if (contentType === 'html') {
+                                    return (
+                                        <div
+                                            className="max-w-none text-gray-800 html-content"
+                                            dangerouslySetInnerHTML={{
+                                                __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                            }}
+                                        />
+                                    );
+                                } else {
+                                    return <FormattedMessageContent content={message.message} />;
+                                }
+                            })()}
                         </div>
                     )}
 

package/src/components/ModelConfigPanel.tsx

@@ -15,7 +15,7 @@ const providerIcons: Record<ModelConfig['provider'], string> = {
     gemini: '✨',
 };
 
-const templateOptions = [
+export const templateOptions = [
     {
         value: 'vite-react' as const,
         label: 'Vite React',
@@ -32,7 +32,7 @@ const templateDetails = {
     'vite-react': { name: 'Vite React', icon: '⚡' },
 };
 
-const modelOptions: Record<ModelConfig['provider'], { value: string; label: string; description: string }[]> = {
+export const modelOptions: Record<ModelConfig['provider'], { value: string; label: string; description: string }[]> = {
     openai: [
         { value: 'gpt-4o', label: 'GPT-4o', description: 'Latest multimodal model' },
         { value: 'gpt-4o-mini', label: 'GPT-4o mini', description: 'Fast and efficient' },
@@ -72,6 +72,17 @@ const providerDetails = {
     gemini: { name: 'Google Vertex AI' },
 };
 
+// Helper function to get all models from all providers
+export const getAllModels = () => {
+    const allModels: { value: string; label: string }[] = [];
+    Object.values(modelOptions).forEach((providerModels) => {
+        providerModels.forEach((model) => {
+            allModels.push({ value: model.value, label: model.label });
+        });
+    });
+    return allModels;
+};
+
 export const ModelConfigPanel: React.FC<ModelConfigPanelProps> = ({
     config,
     onConfigChange,