@messenger-box/tailwind-ui-inbox 10.0.3-alpha.0

package/src/components/ModelConfigPanel.tsx

@@ -0,0 +1,1357 @@
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { UploadImageButton } from './InboxMessage/UploadImageButton';
+import { ModelConfig as PersistentModelConfig } from '../hooks/usePersistentModelConfig';
+import { ModelConfig } from '../hooks/usePersistentModelConfig';
+
+interface ModelConfigPanelProps {
+    config: ModelConfig;
+    onConfigChange: (config: ModelConfig) => void;
+    isVisible: boolean;
+    onToggleVisibility: () => void;
+    showTemplate?: boolean;
+}
+
+export interface ModelToolbarProps {
+    modelConfig?: PersistentModelConfig;
+    onModelConfigChange?: (config: PersistentModelConfig) => void;
+    sending: boolean;
+    canSend: boolean;
+    onSend: () => void;
+    onUploadImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    showProjectSettings?: boolean;
+    isShowMeta?: boolean;
+    showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+}
+
+const providerIcons: Record<ModelConfig['provider'], string> = {
+    openai: '🤖',
+    anthropic: '🧠',
+    gemini: '✨',
+    groq: '⚡',
+};
+
+export const templateOptions = [
+    {
+        value: 'vite-react' as const,
+        label: 'Vite React',
+        icon: '⚡',
+        description: 'Vite + React 18 with Visual Editor',
+    },
+    { value: 'nextjs' as const, label: 'Next.js', icon: '⚛️', description: 'React + Next.js 15 with Shadcn UI' },
+    { value: 'vue' as const, label: 'Vue.js', icon: '🟢', description: 'Vue 3 + Nuxt 3 with Tailwind CSS' },
+];
+
+const templateDetails = {
+    nextjs: { name: 'Next.js', icon: '⚛️' },
+    vue: { name: 'Vue.js', icon: '🟢' },
+    'vite-react': { name: 'Vite React', icon: '⚡' },
+};
+
+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' },
+        { value: 'gpt-4-turbo', label: 'GPT-4 Turbo', description: 'Enhanced GPT-4' },
+        { value: 'gpt-4', label: 'GPT-4', description: 'Most capable model' },
+        { value: 'o1', label: 'o1', description: 'Reasoning model' },
+        { value: 'o1-mini', label: 'o1-mini', description: 'Faster reasoning' },
+    ],
+    anthropic: [
+        { value: 'claude-sonnet-4-5-20250929', label: 'Claude Sonnet 4.5', description: 'Most intelligent model' },
+        { value: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5', description: 'Fast and accurate' },
+        { value: 'claude-opus-4-1-20250805', label: 'Claude Opus 4.1', description: 'Powerful reasoning' },
+    ],
+    gemini: [
+        {
+            value: 'gemini-2.5-flash-preview-05-20',
+            label: 'Gemini 2.5 Flash Preview 05-20',
+            description: 'Latest preview model',
+        },
+        {
+            value: 'gemini-2.5-pro-preview-05-06',
+            label: 'Gemini 2.5 Pro Preview 05-06',
+            description: 'Advanced reasoning',
+        },
+        { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash', description: 'Fast generation' },
+        { value: 'gemini-2.0-flash-lite', label: 'Gemini 2.0 Flash Lite', description: 'Lightweight version' },
+        { value: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro', description: 'Most capable' },
+        { value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash', description: 'Fast and efficient' },
+    ],
+    groq: [
+        { value: 'llama-3.3-70b-versatile', label: 'Llama 3.3 70B Versatile', description: 'Plan agent default' },
+        { value: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70B Versatile', description: 'Fast inference' },
+        { value: 'llama-3.1-8b-instant', label: 'Llama 3.1 8B Instant', description: 'Lightweight' },
+        { value: 'mixtral-8x7b-32768', label: 'Mixtral 8x7B', description: 'MoE model' },
+    ],
+};
+
+const providerDetails = {
+    openai: { name: 'OpenAI' },
+    anthropic: { name: 'Anthropic' },
+    gemini: { name: 'Google Vertex AI' },
+    groq: { name: 'Groq' },
+};
+
+// Helper function to get all models from all providers (includes provider for correct config update)
+export const getAllModels = (): { value: string; label: string; provider?: ModelConfig['provider'] }[] => {
+    const allModels: { value: string; label: string; provider?: ModelConfig['provider'] }[] = [];
+    (Object.keys(modelOptions) as ModelConfig['provider'][]).forEach((provider) => {
+        modelOptions[provider].forEach((model) => {
+            allModels.push({ value: model.value, label: model.label, provider });
+        });
+    });
+    return allModels;
+};
+
+export const ModelConfigPanel: React.FC<ModelConfigPanelProps> = ({
+    config,
+    onConfigChange,
+    isVisible,
+    onToggleVisibility,
+    showTemplate = true,
+}) => {
+    const [showApiKey, setShowApiKey] = useState(false);
+    const [showModelDropdown, setShowModelDropdown] = useState(false);
+    const [showApiKeyDropdown, setShowApiKeyDropdown] = useState(false);
+    const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
+    const modelDropdownRef = useRef<HTMLDivElement>(null);
+    const apiKeyDropdownRef = useRef<HTMLDivElement>(null);
+    const templateDropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as HTMLElement | null;
+
+            // If the click is inside any floating dropdown rendered via portal,
+            // do not treat it as an outside click.
+            if (target?.closest?.('[data-model-dropdown]')) {
+                return;
+            }
+
+            if (modelDropdownRef.current && !modelDropdownRef.current.contains(target as Node)) {
+                setShowModelDropdown(false);
+            }
+            if (apiKeyDropdownRef.current && !apiKeyDropdownRef.current.contains(target as Node)) {
+                setShowApiKeyDropdown(false);
+            }
+            if (templateDropdownRef.current && !templateDropdownRef.current.contains(target as Node)) {
+                setShowTemplateDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const handleProviderChange = useCallback(
+        (provider: ModelConfig['provider']) => {
+            const defaultModel = modelOptions[provider][0].value;
+            onConfigChange({ ...config, provider, model: defaultModel });
+        },
+        [config, onConfigChange],
+    );
+
+    const handleModelChange = useCallback(
+        (model: string) => {
+            onConfigChange({ ...config, model });
+        },
+        [config, onConfigChange],
+    );
+
+    const handleApiKeyChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            onConfigChange({ ...config, apiKey: e.target.value });
+        },
+        [config, onConfigChange],
+    );
+
+    const handleTemplateChange = useCallback(
+        (template: ModelConfig['template']) => {
+            onConfigChange({ ...config, template });
+        },
+        [config, onConfigChange],
+    );
+
+    const getApiKeyPlaceholder = () => {
+        switch (config.provider) {
+            case 'openai':
+                return 'sk-...';
+            case 'anthropic':
+                return 'sk-ant-...';
+            case 'gemini':
+                return 'AI...';
+            case 'groq':
+                return 'gsk_...';
+            default:
+                return 'Enter API key';
+        }
+    };
+
+    const currentModels = modelOptions[config.provider] || [];
+    const currentModel = currentModels.find((m) => m.value === config.model);
+    const currentTemplate = templateOptions.find((t) => t.value === config.template);
+
+    return (
+        <div className="relative">
+            {/* <div className="flex items-center gap-2 mb-2">
+                <button
+                    type="button"
+                    className="px-2 py-1 text-xs rounded border border-gray-300 bg-white hover:bg-gray-50"
+                    onClick={onToggleVisibility}
+                >
+                    {isVisible ? 'Hide' : 'Show'} Config
+                </button>
+                {!config.apiKey && <span className="text-xs text-amber-600">API key required</span>}
+            </div> */}
+
+            {isVisible && (
+                <div className="py-2 bg-gray-50 rounded-lg  grid grid-cols-1 md:grid-cols-3 gap-2">
+                    {showTemplate && (
+                        <div className="space-y-1 md:col-span-1">
+                            {/* <label className="block text-xs text-gray-600">Template</label> */}
+                            <div className="relative" ref={templateDropdownRef}>
+                                <input
+                                    type="text"
+                                    readOnly
+                                    value={`${currentTemplate?.icon || '🔧'} ${
+                                        currentTemplate?.label || 'Select Template'
+                                    }`}
+                                    onClick={() => setShowTemplateDropdown(!showTemplateDropdown)}
+                                    className="w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+                                />
+                                <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none">
+                                    ▼
+                                </span>
+                                {showTemplateDropdown && (
+                                    <div className="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow">
+                                        {templateOptions.map((template) => (
+                                            <button
+                                                key={template.value}
+                                                type="button"
+                                                onClick={() => {
+                                                    handleTemplateChange(template.value);
+                                                    setShowTemplateDropdown(false);
+                                                }}
+                                                className={`w-full text-left px-3 py-2 hover:bg-gray-50 ${
+                                                    config.template === template.value ? 'bg-blue-50' : ''
+                                                }`}
+                                            >
+                                                <span className="mr-2">{template.icon}</span>
+                                                <span className="text-sm">{template.label}</span>
+                                            </button>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="space-y-1 md:col-span-1">
+                        {/* <label className="block text-xs text-gray-600">Model</label> */}
+                        <div className="relative" ref={modelDropdownRef}>
+                            <input
+                                type="text"
+                                readOnly
+                                value={`${providerIcons[config.provider]} ${currentModel?.label || 'Select Model'}`}
+                                onClick={() => setShowModelDropdown(!showModelDropdown)}
+                                className="w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+                            />
+                            <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none">
+                                ▼
+                            </span>
+                            {showModelDropdown && (
+                                <div className="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow max-h-60 overflow-y-auto">
+                                    {currentModels.map((model) => (
+                                        <button
+                                            key={model.value}
+                                            type="button"
+                                            onClick={() => {
+                                                handleModelChange(model.value);
+                                                setShowModelDropdown(false);
+                                            }}
+                                            className={`w-full text-left px-3 py-2 hover:bg-gray-50 ${
+                                                config.model === model.value ? 'bg-blue-50' : ''
+                                            }`}
+                                        >
+                                            <span className="mr-2">{providerIcons[config.provider]}</span>
+                                            <span className="text-sm">{model.label}</span>
+                                        </button>
+                                    ))}
+                                    <div className="p-2 border-t border-gray-100 flex gap-2">
+                                        {Object.keys(providerDetails).map((p) => (
+                                            <button
+                                                key={p}
+                                                type="button"
+                                                onClick={() => handleProviderChange(p as ModelConfig['provider'])}
+                                                className={`px-2 py-1 text-xs rounded ${
+                                                    config.provider === p ? 'bg-blue-500 text-white' : 'bg-white border'
+                                                }`}
+                                            >
+                                                {providerDetails[p as ModelConfig['provider']].name}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="space-y-1 md:col-span-1">
+                        {/* <label className="block text-xs text-gray-600">API Key</label> */}
+                        <div className="relative" ref={apiKeyDropdownRef}>
+                            <input
+                                type="text"
+                                readOnly
+                                value={config.apiKey ? 'API Key ••••••••••••••••' : 'API Key'}
+                                onClick={() => setShowApiKeyDropdown(!showApiKeyDropdown)}
+                                className="w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+                            />
+                            <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none">
+                                ▼
+                            </span>
+                            {showApiKeyDropdown && (
+                                <div className="absolute right-0 z-10 mt-1 w-80 bg-white border border-gray-300 rounded shadow">
+                                    <div className="p-3">
+                                        <div className="mb-2">
+                                            <label className="block text-xs text-gray-600 mb-1">API Key</label>
+                                            <div className="relative">
+                                                <input
+                                                    type={showApiKey ? 'text' : 'password'}
+                                                    value={config.apiKey}
+                                                    onChange={handleApiKeyChange}
+                                                    placeholder={getApiKeyPlaceholder()}
+                                                    className="w-full px-2 py-1 border border-gray-300 rounded pr-8"
+                                                />
+                                                <button
+                                                    type="button"
+                                                    onClick={() => setShowApiKey(!showApiKey)}
+                                                    className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400"
+                                                >
+                                                    {showApiKey ? 'Hide' : 'Show'}
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <h4 className="text-xs font-medium text-gray-700 mb-1">Parameters</h4>
+                                            <div className="space-y-1 text-xs text-gray-600">
+                                                <div className="flex justify-between">
+                                                    <span>Output tokens</span>
+                                                    <span className="bg-gray-100 px-2 rounded">Auto</span>
+                                                </div>
+                                                <div className="flex justify-between">
+                                                    <span>Temperature</span>
+                                                    <span className="bg-gray-100 px-2 rounded">Auto</span>
+                                                </div>
+                                                <div className="flex justify-between">
+                                                    <span>Top P</span>
+                                                    <span className="bg-gray-100 px-2 rounded">Auto</span>
+                                                </div>
+                                                <div className="flex justify-between">
+                                                    <span>Top K</span>
+                                                    <span className="bg-gray-100 px-2 rounded">Auto</span>
+                                                </div>
+                                                <div className="flex justify-between">
+                                                    <span>Frequency penalty</span>
+                                                    <span className="bg-gray-100 px-2 rounded">Auto</span>
+                                                </div>
+                                                <div className="flex justify-between">
+                                                    <span>Presence penalty</span>
+                                                    <span className="bg-gray-100 px-2 rounded">Auto</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+ModelConfigPanel.displayName = 'ModelConfigPanel';
+
+export default ModelConfigPanel;
+
+// Toolbar extracted for reuse from InputComponent.tsx (lines 209-394)
+export interface ModelToolbarProps {
+    modelConfig?: PersistentModelConfig;
+    onModelConfigChange?: (config: PersistentModelConfig) => void;
+    sending: boolean;
+    canSend: boolean;
+    onSend: () => void;
+    onUploadImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    showProjectSettings?: boolean;
+    isShowMeta?: boolean;
+    showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+}
+
+type MetadataFieldKey = keyof NonNullable<PersistentModelConfig['metadata']>;
+
+const projectMetadataFields: Array<{ key: MetadataFieldKey; label: string }> = [
+    { key: 'formExtensionE2BAPIKey', label: 'E2B API Key' },
+    { key: 'formExtensionE2BClaudeTemplateId', label: 'E2B Claude Template ID' },
+    { key: 'formExtensionE2BDomain', label: 'E2B Domain' },
+    { key: 'formExtensionE2BTemplateId', label: 'E2B Template ID' },
+    { key: 'formExtensionE2BViteReactTemplateId', label: 'E2B Vite React Template ID' },
+    { key: 'formExtensionE2BVueTemplateId', label: 'E2B Vue Template ID' },
+    { key: 'formExtensionGithubOrg', label: 'GitHub Org' },
+    { key: 'formExtensionGithubReactBase', label: 'GitHub React Base' },
+    { key: 'formExtensionGithubToken', label: 'GitHub Token' },
+];
+
+const FloatingDropdown: React.FC<{
+    anchorRef: React.RefObject<HTMLElement>;
+    open: boolean;
+    onClose?: () => void;
+    minWidth?: number;
+    children: React.ReactNode;
+}> = ({ anchorRef, open, onClose, minWidth = 224, children }) => {
+    const [style, setStyle] = useState<{ top: number; left: number; width: number } | null>(null);
+
+    useEffect(() => {
+        if (!open) return;
+        const update = () => {
+            const el = anchorRef.current as HTMLElement | null;
+            if (!el) return;
+            const rect = el.getBoundingClientRect();
+            const width = Math.max(minWidth, rect.width);
+
+            // Heuristic expected dropdown height (px). Matches header + max-h-60 (15rem = 240px) + paddings.
+            const expectedHeight = 320;
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - rect.bottom;
+            const spaceAbove = rect.top;
+
+            const openAbove = spaceBelow < expectedHeight && spaceAbove > spaceBelow;
+            const top = openAbove ? Math.max(8, rect.top - expectedHeight - 8) : rect.bottom + 8;
+            const left = Math.min(Math.max(8, rect.left), window.innerWidth - width - 8);
+            setStyle({ top, left, width });
+        };
+        update();
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        return () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }, [open, anchorRef, minWidth]);
+
+    useEffect(() => {
+        if (!open) return;
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose?.();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+
+    if (!open || !style) return null;
+    return ReactDOM.createPortal(
+        <div
+            // Mark as model dropdown container so global click handler in ModelToolbar
+            // can detect clicks inside the floating panel (for both toolbar & modal usage).
+            data-model-dropdown
+            style={{ position: 'fixed', top: style.top, left: style.left, width: style.width, zIndex: 9999 }}
+            className="bg-white border border-gray-200 rounded-lg shadow-lg"
+        >
+            {children}
+        </div>,
+        document.body,
+    );
+};
+
+/** Reusable Project Settings modal with Configuration, Other Settings, and Secret tabs. */
+export interface ProjectSettingsModalProps {
+    modelConfig: PersistentModelConfig;
+    onModelConfigChange: (config: PersistentModelConfig) => void;
+    onClose: () => void;
+    isShowMeta?: boolean;
+}
+
+export const ProjectSettingsModal: React.FC<ProjectSettingsModalProps> = ({
+    modelConfig,
+    onModelConfigChange,
+    onClose,
+    isShowMeta = false,
+}) => {
+    const [settingsActiveTab, setSettingsActiveTab] = useState<'model' | 'other_settings' | 'secret'>('model');
+    const [showModelDropdown, setShowModelDropdown] = useState(false);
+    const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
+    const [modelSearch, setModelSearch] = useState('');
+    const [templateSearch, setTemplateSearch] = useState('');
+    const modelDropdownRef = useRef<HTMLDivElement>(null);
+    const templateDropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as HTMLElement;
+            if (target.closest('[data-model-dropdown]')) return;
+            if (modelDropdownRef.current && !modelDropdownRef.current.contains(target as Node)) {
+                setShowModelDropdown(false);
+            }
+            if (templateDropdownRef.current && !templateDropdownRef.current.contains(target as Node)) {
+                setShowTemplateDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const allModelOptions = useMemo(() => getAllModels(), []);
+    const templateOptionsList = useMemo(
+        () => templateOptions.map((t) => ({ value: t.value, label: t.label, icon: t.icon })),
+        [],
+    );
+    const filteredTemplates = useMemo(() => {
+        if (!templateSearch) return templateOptionsList;
+        const q = templateSearch.toLowerCase();
+        return templateOptionsList.filter(
+            (o) => o.label.toLowerCase().includes(q) || String(o.value).toLowerCase().includes(q),
+        );
+    }, [templateOptionsList, templateSearch]);
+    const filteredModels = useMemo(() => {
+        if (!modelSearch) return allModelOptions;
+        const q = modelSearch.toLowerCase();
+        return allModelOptions.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+    }, [allModelOptions, modelSearch]);
+
+    const handleModelSelect = useCallback(
+        (modelValue: string, provider?: ModelConfig['provider']) => {
+            const update: Partial<ModelConfig> = { model: modelValue };
+            if (provider) update.provider = provider;
+            onModelConfigChange({ ...modelConfig, ...update });
+            setShowModelDropdown(false);
+        },
+        [modelConfig, onModelConfigChange],
+    );
+    const handleTemplateSelect = useCallback(
+        (templateValue: PersistentModelConfig['template']) => {
+            onModelConfigChange({ ...modelConfig, template: templateValue });
+            setShowTemplateDropdown(false);
+        },
+        [modelConfig, onModelConfigChange],
+    );
+    const handleMetadataChange = useCallback(
+        (field: MetadataFieldKey, value: string) => {
+            onModelConfigChange({
+                ...modelConfig,
+                metadata: { ...(modelConfig.metadata || {}), [field]: value },
+            });
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    return (
+        <div
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto py-12 px-4"
+            onClick={(e) => e.target === e.currentTarget && onClose()}
+        >
+            <div
+                className="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[calc(100vh-6rem)] overflow-hidden flex flex-col"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="p-6 flex flex-col flex-1 overflow-hidden">
+                    <div className="flex items-center justify-between pb-4">
+                        <h3 className="text-lg font-semibold text-gray-900">Project Settings</h3>
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="text-gray-400 hover:text-gray-600 transition-colors p-1"
+                            aria-label="Close"
+                        >
+                            <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>
+
+                    <div className="mb-4">
+                        <div className="flex border-b border-gray-200">
+                            <button
+                                type="button"
+                                className={`px-3 py-2 text-sm -mb-px border-b-2 transition-colors ${
+                                    settingsActiveTab === 'model'
+                                        ? 'border-blue-500 text-blue-600'
+                                        : 'border-transparent text-gray-600 hover:text-gray-800'
+                                }`}
+                                onClick={() => setSettingsActiveTab('model')}
+                            >
+                                Configuration
+                            </button>
+                            <button
+                                type="button"
+                                className={`ml-2 px-3 py-2 text-sm -mb-px border-b-2 transition-colors ${
+                                    settingsActiveTab === 'other_settings'
+                                        ? 'border-blue-500 text-blue-600'
+                                        : 'border-transparent text-gray-600 hover:text-gray-800'
+                                }`}
+                                onClick={() => setSettingsActiveTab('other_settings')}
+                            >
+                                Other Settings
+                            </button>
+                            <button
+                                type="button"
+                                className={`ml-2 px-3 py-2 text-sm -mb-px border-b-2 transition-colors ${
+                                    settingsActiveTab === 'secret'
+                                        ? 'border-blue-500 text-blue-600'
+                                        : 'border-transparent text-gray-600 hover:text-gray-800'
+                                }`}
+                                onClick={() => setSettingsActiveTab('secret')}
+                            >
+                                Secret
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="flex-1 overflow-y-auto pr-1">
+                        {settingsActiveTab === 'model' && (
+                            <div className="space-y-4 pb-2">
+                                <div className="space-y-2">
+                                    <label className="block text-sm font-medium text-gray-700">Model</label>
+                                    <div className="relative" ref={modelDropdownRef}>
+                                        <button
+                                            type="button"
+                                            onClick={() => setShowModelDropdown(!showModelDropdown)}
+                                            className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors overflow-hidden"
+                                        >
+                                            {allModelOptions.find((o) => o.value === modelConfig.model)?.label || (
+                                                <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>
+                                        <FloatingDropdown
+                                            anchorRef={modelDropdownRef as unknown as React.RefObject<HTMLElement>}
+                                            open={showModelDropdown}
+                                            onClose={() => setShowModelDropdown(false)}
+                                            minWidth={320}
+                                        >
+                                            <div className="p-2 border-b border-gray-100">
+                                                <input
+                                                    autoFocus
+                                                    value={modelSearch}
+                                                    onChange={(e) => setModelSearch(e.target.value)}
+                                                    placeholder="Search model..."
+                                                    className="w-full px-2 py-1 text-xs border border-gray-200 rounded"
+                                                />
+                                            </div>
+                                            <div className="py-1 max-h-60 overflow-y-auto">
+                                                {filteredModels.map((option) => (
+                                                    <button
+                                                        key={option.value}
+                                                        type="button"
+                                                        onClick={() => handleModelSelect(option.value, option.provider)}
+                                                        className={`w-full px-3 py-2 text-left text-xs hover:bg-gray-50 transition-colors ${
+                                                            modelConfig?.model === option.value ? 'bg-blue-50' : ''
+                                                        }`}
+                                                    >
+                                                        <div className="font-medium text-gray-900 truncate">
+                                                            {option.label}
+                                                        </div>
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        </FloatingDropdown>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <label className="block text-sm font-medium text-gray-700">Template</label>
+                                    <div className="relative" ref={templateDropdownRef}>
+                                        <button
+                                            type="button"
+                                            onClick={() => setShowTemplateDropdown(!showTemplateDropdown)}
+                                            className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors overflow-hidden"
+                                        >
+                                            {templateOptionsList.find((o) => o.value === modelConfig.template) ? (
+                                                <>
+                                                    <span className="text-base">
+                                                        {
+                                                            templateOptionsList.find(
+                                                                (o) => o.value === modelConfig.template,
+                                                            )?.icon
+                                                        }
+                                                    </span>
+                                                    <span className="text-gray-700 truncate">
+                                                        {
+                                                            templateOptionsList.find(
+                                                                (o) => o.value === modelConfig.template,
+                                                            )?.label
+                                                        }
+                                                    </span>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <span className="text-base">📝</span>
+                                                    <span className="text-gray-500 truncate">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>
+                                        <FloatingDropdown
+                                            anchorRef={templateDropdownRef as unknown as React.RefObject<HTMLElement>}
+                                            open={showTemplateDropdown}
+                                            onClose={() => setShowTemplateDropdown(false)}
+                                            minWidth={320}
+                                        >
+                                            <div className="p-2 border-b border-gray-100">
+                                                <input
+                                                    autoFocus
+                                                    value={templateSearch}
+                                                    onChange={(e) => setTemplateSearch(e.target.value)}
+                                                    placeholder="Search template..."
+                                                    className="w-full px-2 py-1 text-xs border border-gray-200 rounded"
+                                                />
+                                            </div>
+                                            <div className="py-1 max-h-60 overflow-y-auto">
+                                                {filteredTemplates.map((option) => (
+                                                    <button
+                                                        key={option.value}
+                                                        type="button"
+                                                        onClick={() => handleTemplateSelect(option.value)}
+                                                        className={`w-full px-3 py-2 text-left text-xs hover:bg-gray-50 transition-colors flex items-center gap-2 ${
+                                                            modelConfig?.template === option.value ? 'bg-blue-50' : ''
+                                                        }`}
+                                                    >
+                                                        <span className="text-sm">{option.icon}</span>
+                                                        <span className="font-medium text-gray-900 truncate">
+                                                            {option.label}
+                                                        </span>
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        </FloatingDropdown>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <label className="block text-sm font-medium text-gray-700">
+                                        Domain <span className="text-gray-500 text-xs">(optional)</span>
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={modelConfig.domain || ''}
+                                        onChange={(e) =>
+                                            onModelConfigChange({ ...modelConfig, domain: e.target.value })
+                                        }
+                                        className="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                        placeholder="e.g. https://example.com"
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        {settingsActiveTab === 'other_settings' && (
+                            <div className="space-y-4 pb-2">
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        {modelConfig.provider === 'groq'
+                                            ? 'Groq API Key'
+                                            : modelConfig.provider === 'openai'
+                                            ? 'OpenAI API Key'
+                                            : modelConfig.provider === 'anthropic'
+                                            ? 'Anthropic API Key'
+                                            : modelConfig.provider === 'gemini'
+                                            ? 'Google / Gemini API Key'
+                                            : 'API Key'}{' '}
+                                        <span className="text-red-500">*</span>
+                                    </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={
+                                            modelConfig.provider === 'groq'
+                                                ? 'gsk_... (Groq API key from console.groq.com)'
+                                                : modelConfig.provider === 'openai'
+                                                ? 'sk-...'
+                                                : modelConfig.provider === 'anthropic'
+                                                ? 'sk-ant-...'
+                                                : modelConfig.provider === 'gemini'
+                                                ? 'AI...'
+                                                : 'Enter your API key'
+                                        }
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        Extension ID <span className="text-red-500">*</span>
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={modelConfig.extensionId || ''}
+                                        onChange={(e) =>
+                                            onModelConfigChange({ ...modelConfig, extensionId: 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 extension ID"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        Form ID <span className="text-red-500">*</span>
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={modelConfig.formId || ''}
+                                        onChange={(e) =>
+                                            onModelConfigChange({ ...modelConfig, formId: 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 form ID"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        Function ID <span className="text-red-500">*</span>
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={modelConfig.functionId || ''}
+                                        onChange={(e) =>
+                                            onModelConfigChange({ ...modelConfig, functionId: 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 function ID"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        Step Name <span className="text-gray-500 text-xs">(optional)</span>
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={modelConfig.stepName || ''}
+                                        onChange={(e) =>
+                                            onModelConfigChange({ ...modelConfig, stepName: 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 step name (optional)"
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        {settingsActiveTab === 'secret' && (
+                            <div className="space-y-4 pb-2">
+                                {isShowMeta ? (
+                                    <div>
+                                        <h4 className="text-sm font-semibold text-gray-800 mb-3">Secret Metadata</h4>
+                                        <div className="space-y-3">
+                                            {projectMetadataFields.map((field) => (
+                                                <div key={field.key}>
+                                                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                                                        {field.label}
+                                                    </label>
+                                                    <input
+                                                        type="text"
+                                                        value={modelConfig.metadata?.[field.key] || ''}
+                                                        onChange={(e) =>
+                                                            handleMetadataChange(field.key, 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 text-sm"
+                                                        placeholder={`Enter ${field.label.toLowerCase()}`}
+                                                    />
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className="text-sm text-gray-600">
+                                        Secret metadata configuration is disabled for this environment.
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+ProjectSettingsModal.displayName = 'ProjectSettingsModal';
+
+export const ModelToolbar: React.FC<ModelToolbarProps> = ({
+    modelConfig,
+    onModelConfigChange,
+    sending,
+    canSend,
+    onSend,
+    onUploadImageChange,
+    showProjectSettings = true,
+    isShowMeta = false,
+    showModeSelector = false,
+    showStopButton = false,
+    onStop,
+}) => {
+    const [showModelDropdown, setShowModelDropdown] = useState(false);
+    const [showToolbarModelDropdown, setShowToolbarModelDropdown] = useState(false);
+    const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
+    const [showSettingsModal, setShowSettingsModal] = useState(false);
+    const [settingsActiveTab, setSettingsActiveTab] = useState<'model' | 'other_settings' | 'secret'>('model');
+    const [templateSearch, setTemplateSearch] = useState('');
+    const [modelSearch, setModelSearch] = useState('');
+    const [toolbarModelSearch, setToolbarModelSearch] = useState('');
+    const [mode, setMode] = useState<'plan' | 'build'>(modelConfig?.mode || 'plan');
+    const [showPlanTooltip, setShowPlanTooltip] = useState(false);
+    const [showBuildTooltip, setShowBuildTooltip] = useState(false);
+    const planButtonRef = useRef<HTMLButtonElement>(null);
+    const buildButtonRef = useRef<HTMLButtonElement>(null);
+    const modelDropdownRef = useRef<HTMLDivElement>(null);
+    const toolbarModelButtonRef = useRef<HTMLButtonElement>(null);
+    const templateDropdownRef = useRef<HTMLDivElement>(null);
+
+    // Sync mode with modelConfig
+    useEffect(() => {
+        if (modelConfig?.mode && modelConfig.mode !== mode) {
+            setMode(modelConfig.mode);
+        }
+    }, [modelConfig?.mode, mode]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as HTMLElement;
+
+            // If click is inside any floating dropdown rendered via portal,
+            // ignore it for outside-click logic (both toolbar & modal dropdowns).
+            if (target.closest('[data-model-dropdown]')) {
+                return;
+            }
+
+            if (modelDropdownRef.current && !modelDropdownRef.current.contains(target as Node)) {
+                setShowModelDropdown(false);
+            }
+
+            if (showToolbarModelDropdown) {
+                const isClickInsideButton = toolbarModelButtonRef.current?.contains(target);
+                if (!isClickInsideButton) {
+                    setShowToolbarModelDropdown(false);
+                    setToolbarModelSearch('');
+                }
+            }
+
+            if (templateDropdownRef.current && !templateDropdownRef.current.contains(target as Node)) {
+                setShowTemplateDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [showToolbarModelDropdown]);
+
+    const allModelOptions = useMemo(() => {
+        return getAllModels();
+    }, []);
+
+    const templateOptionsList = useMemo(() => {
+        return templateOptions.map((t) => ({ value: t.value, label: t.label, icon: t.icon }));
+    }, []);
+
+    const filteredTemplates = useMemo(() => {
+        if (!templateSearch) return templateOptionsList;
+        const q = templateSearch.toLowerCase();
+        return templateOptionsList.filter(
+            (o) => o.label.toLowerCase().includes(q) || String(o.value).toLowerCase().includes(q),
+        );
+    }, [templateOptionsList, templateSearch]);
+
+    const filteredModels = useMemo(() => {
+        if (!modelSearch) return allModelOptions;
+        const q = modelSearch.toLowerCase();
+        return allModelOptions.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+    }, [allModelOptions, modelSearch]);
+
+    const filteredToolbarModels = useMemo(() => {
+        if (!toolbarModelSearch) return allModelOptions;
+        const q = toolbarModelSearch.toLowerCase();
+        return allModelOptions.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+    }, [allModelOptions, toolbarModelSearch]);
+
+    const handleModelSelect = useCallback(
+        (modelValue: string) => {
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, model: modelValue });
+            }
+            setShowModelDropdown(false);
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    const handleToolbarModelSelect = useCallback(
+        (modelValue: string, provider?: ModelConfig['provider']) => {
+            if (onModelConfigChange && modelConfig) {
+                const update: Partial<ModelConfig> = { model: modelValue };
+                if (provider) update.provider = provider;
+                onModelConfigChange({ ...modelConfig, ...update });
+            }
+            setShowToolbarModelDropdown(false);
+            setToolbarModelSearch('');
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    const handleTemplateSelect = useCallback(
+        (templateValue: PersistentModelConfig['template']) => {
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, template: templateValue });
+            }
+            setShowTemplateDropdown(false);
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    const handleMetadataChange = useCallback(
+        (field: MetadataFieldKey, value: string) => {
+            if (!onModelConfigChange || !modelConfig) return;
+            onModelConfigChange({
+                ...modelConfig,
+                metadata: {
+                    ...(modelConfig.metadata || {}),
+                    [field]: value,
+                },
+            });
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    const handleModeChange = useCallback(
+        (newMode: 'plan' | 'build') => {
+            setMode(newMode);
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, mode: newMode });
+            }
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    return (
+        <>
+            <div className="flex items-center gap-2 overflow-x-auto overflow-y-visible whitespace-nowrap py-1 px-2 sm:px-0">
+                {/* Mode Selection */}
+                {showModeSelector && (
+                    <div className="flex items-center gap-2 mr-2">
+                        <div className="relative" style={{ overflow: 'visible' }}>
+                            <button
+                                ref={planButtonRef}
+                                type="button"
+                                onClick={() => handleModeChange('plan')}
+                                onMouseEnter={() => setShowPlanTooltip(true)}
+                                onMouseLeave={() => setShowPlanTooltip(false)}
+                                className={`w-7 h-7 rounded-full border border-gray-300 flex items-center justify-center transition-colors ${
+                                    mode === 'plan'
+                                        ? 'bg-gray-800 text-white'
+                                        : 'bg-white text-gray-900 hover:bg-gray-50'
+                                }`}
+                                aria-label="Plan mode"
+                            >
+                                <svg className="w-4 h-4" 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>
+                            {showPlanTooltip &&
+                                planButtonRef.current &&
+                                ReactDOM.createPortal(
+                                    <div
+                                        role="tooltip"
+                                        className="fixed z-[9999] inline-block px-3 py-2 text-sm font-medium text-white bg-gray-800 rounded-lg shadow-sm whitespace-nowrap pointer-events-none"
+                                        style={{
+                                            top: planButtonRef.current.getBoundingClientRect().top - 40,
+                                            left:
+                                                planButtonRef.current.getBoundingClientRect().left +
+                                                planButtonRef.current.offsetWidth / 2,
+                                            transform: 'translateX(-50%)',
+                                        }}
+                                    >
+                                        Plan
+                                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1">
+                                            <div className="w-2 h-2 bg-gray-800 rotate-45"></div>
+                                        </div>
+                                    </div>,
+                                    document.body,
+                                )}
+                        </div>
+                        <div className="relative" style={{ overflow: 'visible' }}>
+                            <button
+                                ref={buildButtonRef}
+                                type="button"
+                                onClick={() => handleModeChange('build')}
+                                onMouseEnter={() => setShowBuildTooltip(true)}
+                                onMouseLeave={() => setShowBuildTooltip(false)}
+                                className={`w-7 h-7 rounded-full border border-gray-300 flex items-center justify-center transition-colors ${
+                                    mode === 'build'
+                                        ? 'bg-gray-800 text-white'
+                                        : 'bg-white text-gray-900 hover:bg-gray-50'
+                                }`}
+                                aria-label="Build mode"
+                            >
+                                <svg
+                                    className="w-4 h-4"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
+                                    <path d="M9 18h6" />
+                                    <path d="M10 22h4" />
+                                </svg>
+                            </button>
+                            {showBuildTooltip &&
+                                buildButtonRef.current &&
+                                ReactDOM.createPortal(
+                                    <div
+                                        role="tooltip"
+                                        className="fixed z-[9999] inline-block px-3 py-2 text-sm font-medium text-white bg-gray-800 rounded-lg shadow-sm whitespace-nowrap pointer-events-none"
+                                        style={{
+                                            top: buildButtonRef.current.getBoundingClientRect().top - 40,
+                                            left:
+                                                buildButtonRef.current.getBoundingClientRect().left +
+                                                buildButtonRef.current.offsetWidth / 2,
+                                            transform: 'translateX(-50%)',
+                                        }}
+                                    >
+                                        Build
+                                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1">
+                                            <div className="w-2 h-2 bg-gray-800 rotate-45"></div>
+                                        </div>
+                                    </div>,
+                                    document.body,
+                                )}
+                        </div>
+                    </div>
+                )}
+
+                {/* Template selection moved to Project Settings modal */}
+
+                {/* 2. Model Selection Dropdown */}
+                {/* Model selection moved to Project Settings modal */}
+
+                <div className="flex-1"></div>
+
+                {showProjectSettings && (
+                    <button
+                        onClick={() => setShowSettingsModal(true)}
+                        className="flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors shrink-0"
+                    >
+                        <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                            />
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                            />
+                        </svg>
+                    </button>
+                )}
+
+                {/* Model Selection Button */}
+                <div className="relative shrink-0">
+                    <button
+                        ref={toolbarModelButtonRef}
+                        onClick={() => setShowToolbarModelDropdown(!showToolbarModelDropdown)}
+                        className="flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors shrink-0"
+                        title={
+                            modelConfig?.model
+                                ? allModelOptions.find((o) => o.value === modelConfig.model)?.label || 'Choose a model'
+                                : 'Choose a model'
+                        }
+                    >
+                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            {/* Outer square */}
+                            <rect x="4" y="4" width="16" height="16" rx="1" strokeWidth="2" />
+                            {/* Inner square */}
+                            <rect x="8" y="8" width="8" height="8" rx="0.5" strokeWidth="2" />
+                            {/* Top pins */}
+                            <line x1="10" y1="4" x2="10" y2="2" strokeWidth="2" />
+                            <line x1="14" y1="4" x2="14" y2="2" strokeWidth="2" />
+                            {/* Bottom pins */}
+                            <line x1="10" y1="20" x2="10" y2="22" strokeWidth="2" />
+                            <line x1="14" y1="20" x2="14" y2="22" strokeWidth="2" />
+                            {/* Left pins */}
+                            <line x1="4" y1="10" x2="2" y2="10" strokeWidth="2" />
+                            <line x1="4" y1="14" x2="2" y2="14" strokeWidth="2" />
+                            {/* Right pins */}
+                            <line x1="20" y1="10" x2="22" y2="10" strokeWidth="2" />
+                            <line x1="20" y1="14" x2="22" y2="14" strokeWidth="2" />
+                        </svg>
+                    </button>
+
+                    <FloatingDropdown
+                        anchorRef={toolbarModelButtonRef as unknown as React.RefObject<HTMLElement>}
+                        open={showToolbarModelDropdown}
+                        onClose={() => {
+                            setShowToolbarModelDropdown(false);
+                            setToolbarModelSearch('');
+                        }}
+                        minWidth={280}
+                    >
+                        <div data-model-dropdown className="bg-white">
+                            <div className="p-2 border-b border-gray-100">
+                                <input
+                                    autoFocus
+                                    value={toolbarModelSearch}
+                                    onChange={(e) => setToolbarModelSearch(e.target.value)}
+                                    placeholder="Search model..."
+                                    className="w-full px-2 py-1.5 text-xs border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                />
+                            </div>
+                            <div className="py-1 max-h-60 overflow-y-auto">
+                                {filteredToolbarModels.map((option) => (
+                                    <button
+                                        key={option.value}
+                                        onClick={() => handleToolbarModelSelect(option.value, option.provider)}
+                                        className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 transition-colors flex items-center justify-between ${
+                                            modelConfig?.model === option.value ? 'bg-blue-50' : ''
+                                        }`}
+                                    >
+                                        <span className="text-gray-900">{option.label}</span>
+                                        {modelConfig?.model === option.value && (
+                                            <svg
+                                                className="w-4 h-4 text-blue-600"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M5 13l4 4L19 7"
+                                                />
+                                            </svg>
+                                        )}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    </FloatingDropdown>
+                </div>
+
+                <UploadImageButton onChange={onUploadImageChange}>
+                    <div className="flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border border-gray-300 bg-white shrink-0 ml-1">
+                        <svg className="w-3 h-3 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M21.44 11.05l-9.19 9.19a6 6 0 11-8.49-8.49l9.19-9.19a4 4 0 115.66 5.66l-9.19 9.19a2 2 0 11-2.83-2.83l8.49-8.49"
+                            />
+                        </svg>
+                    </div>
+                </UploadImageButton>
+
+                {/* Send/Stop Button */}
+                {showStopButton ? (
+                    <button
+                        className="flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border border-red-500 bg-red-500 hover:bg-red-600 text-white transition-colors shrink-0"
+                        onClick={onStop}
+                        type="button"
+                    >
+                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                            <circle cx="12" cy="12" r="8" fill="white" />
+                        </svg>
+                    </button>
+                ) : (
+                    <button
+                        className={`flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border transition-colors shrink-0 ${
+                            canSend && !sending
+                                ? 'border-blue-500 bg-blue-500 hover:bg-blue-600 text-white'
+                                : 'border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed'
+                        }`}
+                        onClick={onSend}
+                        disabled={!canSend || sending}
+                        type="button"
+                    >
+                        {sending ? (
+                            <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                                <circle
+                                    className="opacity-25"
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    strokeWidth="4"
+                                ></circle>
+                                <path
+                                    className="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                ></path>
+                            </svg>
+                        ) : (
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                                />
+                            </svg>
+                        )}
+                    </button>
+                )}
+            </div>
+
+            {/* Settings Modal */}
+            {showProjectSettings && showSettingsModal && modelConfig && onModelConfigChange && (
+                <ProjectSettingsModal
+                    modelConfig={modelConfig}
+                    onModelConfigChange={onModelConfigChange}
+                    onClose={() => setShowSettingsModal(false)}
+                    isShowMeta={isShowMeta}
+                />
+            )}
+        </>
+    );
+};