@messenger-box/tailwind-ui-inbox 10.0.3-alpha.122 → 10.0.3-alpha.124

package/src/components/ModelConfigPanel.tsx

@@ -1,4 +1,7 @@
 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 {
@@ -341,3 +344,666 @@ export const ModelConfigPanel: React.FC<ModelConfigPanelProps> = ({
 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;
+}
+
+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
+            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,
+    );
+};
+
+export const ModelToolbar: React.FC<ModelToolbarProps> = ({
+    modelConfig,
+    onModelConfigChange,
+    sending,
+    canSend,
+    onSend,
+    onUploadImageChange,
+}) => {
+    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'>('model');
+    const [templateSearch, setTemplateSearch] = useState('');
+    const [modelSearch, setModelSearch] = useState('');
+    const [toolbarModelSearch, setToolbarModelSearch] = useState('');
+    const modelDropdownRef = useRef<HTMLDivElement>(null);
+    const toolbarModelButtonRef = useRef<HTMLButtonElement>(null);
+    const templateDropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
+                setShowModelDropdown(false);
+            }
+            const target = event.target as HTMLElement;
+            if (showToolbarModelDropdown) {
+                const isClickInsideButton = toolbarModelButtonRef.current?.contains(target);
+                const isClickInsideDropdown = target.closest('[data-model-dropdown]');
+                if (!isClickInsideButton && !isClickInsideDropdown) {
+                    setShowToolbarModelDropdown(false);
+                    setToolbarModelSearch('');
+                }
+            }
+            if (templateDropdownRef.current && !templateDropdownRef.current.contains(event.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) => {
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, model: modelValue });
+            }
+            setShowToolbarModelDropdown(false);
+            setToolbarModelSearch('');
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    const handleTemplateSelect = useCallback(
+        (templateValue: PersistentModelConfig['template']) => {
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, template: templateValue });
+            }
+            setShowTemplateDropdown(false);
+        },
+        [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">
+                {/* Template selection moved to Project Settings modal */}
+
+                {/* 2. Model Selection Dropdown */}
+                {/* Model selection moved to Project Settings modal */}
+
+                <div className="flex-1"></div>
+
+                {/* Settings Button */}
+                <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)}
+                                        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 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 - Only API Key and Model + IDs */}
+            {showSettingsModal && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+                    <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+                        <div className="p-6 mb-4">
+                            <div className="flex items-center justify-between mb-4">
+                                <h3 className="text-lg font-semibold text-gray-900">Project Settings</h3>
+                                <button
+                                    onClick={() => setShowSettingsModal(false)}
+                                    className="text-gray-400 hover:text-gray-600 transition-colors"
+                                >
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M6 18L18 6M6 6l12 12"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            {/* Tabs */}
+                            <div className="mb-4">
+                                <div className="flex border-b border-gray-200">
+                                    <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')}
+                                        type="button"
+                                    >
+                                        Configuration
+                                    </button>
+                                    <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')}
+                                        type="button"
+                                    >
+                                        Other Settings
+                                    </button>
+                                </div>
+                            </div>
+
+                            {modelConfig && onModelConfigChange && (
+                                <div className="space-y-4">
+                                    {settingsActiveTab === 'model' ? (
+                                        <div className="space-y-4">
+                                            <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"
+                                                    >
+                                                        {(() => {
+                                                            if (modelConfig && modelConfig.model) {
+                                                                const currentModel = allModelOptions.find(
+                                                                    (option) => option.value === modelConfig.model,
+                                                                );
+                                                                return currentModel ? (
+                                                                    <span className="text-gray-700 truncate">
+                                                                        {currentModel.label}
+                                                                    </span>
+                                                                ) : (
+                                                                    <span className="text-gray-500 truncate">
+                                                                        Model
+                                                                    </span>
+                                                                );
+                                                            }
+                                                            return (
+                                                                <span className="text-gray-500 truncate">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}
+                                                                    onClick={() => handleModelSelect(option.value)}
+                                                                    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"
+                                                    >
+                                                        {(() => {
+                                                            if (modelConfig && modelConfig.template) {
+                                                                const currentTemplate = templateOptionsList.find(
+                                                                    (option) => option.value === modelConfig.template,
+                                                                );
+                                                                return currentTemplate ? (
+                                                                    <>
+                                                                        <span className="text-base">
+                                                                            {currentTemplate.icon}
+                                                                        </span>
+                                                                        <span className="text-gray-700 truncate">
+                                                                            {currentTemplate.label}
+                                                                        </span>
+                                                                    </>
+                                                                ) : (
+                                                                    <>
+                                                                        <span className="text-base">📝</span>
+                                                                        <span className="text-gray-500 truncate">
+                                                                            Template
+                                                                        </span>
+                                                                    </>
+                                                                );
+                                                            }
+                                                            return (
+                                                                <>
+                                                                    <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}
+                                                                    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>
+                                    ) : (
+                                        <>
+                                            <div>
+                                                <label className="block text-sm font-medium text-gray-700 mb-2">
+                                                    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="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>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};