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

package/src/components/ModelConfigPanel.tsx

@@ -0,0 +1,345 @@
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import { ModelConfig } from '../hooks/usePersistentModelConfig';
+
+interface ModelConfigPanelProps {
+    config: ModelConfig;
+    onConfigChange: (config: ModelConfig) => void;
+    isVisible: boolean;
+    onToggleVisibility: () => void;
+    showTemplate?: boolean;
+}
+
+const providerIcons: Record<ModelConfig['provider'], string> = {
+    openai: '🤖',
+    anthropic: '🧠',
+    gemini: '✨',
+};
+
+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-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet', description: 'Most intelligent model' },
+        { value: 'claude-3-5-haiku-20241022', label: 'Claude 3.5 Haiku', description: 'Fast and accurate' },
+        { value: 'claude-3-opus-20240229', label: 'Claude 3 Opus', description: 'Powerful reasoning' },
+        { value: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', description: 'Balanced performance' },
+        { value: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', description: 'Quick responses' },
+    ],
+    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' },
+    ],
+};
+
+const providerDetails = {
+    openai: { name: 'OpenAI' },
+    anthropic: { name: 'Anthropic' },
+    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,
+    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) => {
+            if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
+                setShowModelDropdown(false);
+            }
+            if (apiKeyDropdownRef.current && !apiKeyDropdownRef.current.contains(event.target as Node)) {
+                setShowApiKeyDropdown(false);
+            }
+            if (templateDropdownRef.current && !templateDropdownRef.current.contains(event.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...';
+            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;