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

package/lib/components/ModelConfigPanel.js

@@ -0,0 +1,1152 @@
+import React__default,{useState,useRef,useEffect,useMemo,useCallback}from'react';import ReactDOM from'react-dom';import {UploadImageButton}from'./InboxMessage/UploadImageButton.js';const providerIcons = {
+  openai: '🤖',
+  anthropic: '🧠',
+  gemini: '✨',
+  groq: '⚡'
+};
+const templateOptions = [{
+  value: 'vite-react',
+  label: 'Vite React',
+  icon: '⚡',
+  description: 'Vite + React 18 with Visual Editor'
+}, {
+  value: 'nextjs',
+  label: 'Next.js',
+  icon: '⚛️',
+  description: 'React + Next.js 15 with Shadcn UI'
+}, {
+  value: 'vue',
+  label: 'Vue.js',
+  icon: '🟢',
+  description: 'Vue 3 + Nuxt 3 with Tailwind CSS'
+}];
+const modelOptions = {
+  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)
+const getAllModels = () => {
+  const allModels = [];
+  Object.keys(modelOptions).forEach(provider => {
+    modelOptions[provider].forEach(model => {
+      allModels.push({
+        value: model.value,
+        label: model.label,
+        provider
+      });
+    });
+  });
+  return allModels;
+};
+const ModelConfigPanel = ({
+  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(null);
+  const apiKeyDropdownRef = useRef(null);
+  const templateDropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      // 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)) {
+        setShowModelDropdown(false);
+      }
+      if (apiKeyDropdownRef.current && !apiKeyDropdownRef.current.contains(target)) {
+        setShowApiKeyDropdown(false);
+      }
+      if (templateDropdownRef.current && !templateDropdownRef.current.contains(target)) {
+        setShowTemplateDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+  const handleProviderChange = useCallback(provider => {
+    const defaultModel = modelOptions[provider][0].value;
+    onConfigChange({
+      ...config,
+      provider,
+      model: defaultModel
+    });
+  }, [config, onConfigChange]);
+  const handleModelChange = useCallback(model => {
+    onConfigChange({
+      ...config,
+      model
+    });
+  }, [config, onConfigChange]);
+  const handleApiKeyChange = useCallback(e => {
+    onConfigChange({
+      ...config,
+      apiKey: e.target.value
+    });
+  }, [config, onConfigChange]);
+  const handleTemplateChange = useCallback(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 React__default.createElement("div", {
+    className: "relative"
+  }, isVisible && React__default.createElement("div", {
+    className: "py-2 bg-gray-50 rounded-lg  grid grid-cols-1 md:grid-cols-3 gap-2"
+  }, showTemplate && React__default.createElement("div", {
+    className: "space-y-1 md:col-span-1"
+  }, React__default.createElement("div", {
+    className: "relative",
+    ref: templateDropdownRef
+  }, React__default.createElement("input", {
+    type: "text",
+    readOnly: true,
+    value: `${currentTemplate?.icon || '🔧'} ${currentTemplate?.label || 'Select Template'}`,
+    onClick: () => setShowTemplateDropdown(!showTemplateDropdown),
+    className: "w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+  }), React__default.createElement("span", {
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"
+  }, "\u25BC"), showTemplateDropdown && React__default.createElement("div", {
+    className: "absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow"
+  }, templateOptions.map(template => React__default.createElement("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' : ''}`
+  }, React__default.createElement("span", {
+    className: "mr-2"
+  }, template.icon), React__default.createElement("span", {
+    className: "text-sm"
+  }, template.label)))))), React__default.createElement("div", {
+    className: "space-y-1 md:col-span-1"
+  }, React__default.createElement("div", {
+    className: "relative",
+    ref: modelDropdownRef
+  }, React__default.createElement("input", {
+    type: "text",
+    readOnly: true,
+    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"
+  }), React__default.createElement("span", {
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"
+  }, "\u25BC"), showModelDropdown && React__default.createElement("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 => React__default.createElement("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' : ''}`
+  }, React__default.createElement("span", {
+    className: "mr-2"
+  }, providerIcons[config.provider]), React__default.createElement("span", {
+    className: "text-sm"
+  }, model.label))), React__default.createElement("div", {
+    className: "p-2 border-t border-gray-100 flex gap-2"
+  }, Object.keys(providerDetails).map(p => React__default.createElement("button", {
+    key: p,
+    type: "button",
+    onClick: () => handleProviderChange(p),
+    className: `px-2 py-1 text-xs rounded ${config.provider === p ? 'bg-blue-500 text-white' : 'bg-white border'}`
+  }, providerDetails[p].name)))))), React__default.createElement("div", {
+    className: "space-y-1 md:col-span-1"
+  }, React__default.createElement("div", {
+    className: "relative",
+    ref: apiKeyDropdownRef
+  }, React__default.createElement("input", {
+    type: "text",
+    readOnly: true,
+    value: config.apiKey ? 'API Key ••••••••••••••••' : 'API Key',
+    onClick: () => setShowApiKeyDropdown(!showApiKeyDropdown),
+    className: "w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+  }), React__default.createElement("span", {
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"
+  }, "\u25BC"), showApiKeyDropdown && React__default.createElement("div", {
+    className: "absolute right-0 z-10 mt-1 w-80 bg-white border border-gray-300 rounded shadow"
+  }, React__default.createElement("div", {
+    className: "p-3"
+  }, React__default.createElement("div", {
+    className: "mb-2"
+  }, React__default.createElement("label", {
+    className: "block text-xs text-gray-600 mb-1"
+  }, "API Key"), React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("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"
+  }), React__default.createElement("button", {
+    type: "button",
+    onClick: () => setShowApiKey(!showApiKey),
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400"
+  }, showApiKey ? 'Hide' : 'Show'))), React__default.createElement("div", null, React__default.createElement("h4", {
+    className: "text-xs font-medium text-gray-700 mb-1"
+  }, "Parameters"), React__default.createElement("div", {
+    className: "space-y-1 text-xs text-gray-600"
+  }, React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Output tokens"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Temperature"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Top P"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Top K"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Frequency penalty"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Presence penalty"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto"))))))))));
+};
+ModelConfigPanel.displayName = 'ModelConfigPanel';
+const projectMetadataFields = [{
+  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 = ({
+  anchorRef,
+  open,
+  onClose,
+  minWidth = 224,
+  children
+}) => {
+  const [style, setStyle] = useState(null);
+  useEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const el = anchorRef.current;
+      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 => {
+      if (e.key === 'Escape') onClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+  if (!open || !style) return null;
+  return ReactDOM.createPortal(React__default.createElement("div", {
+    "data-model-dropdown": true,
+    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), document.body);
+};
+const ProjectSettingsModal = ({
+  modelConfig,
+  onModelConfigChange,
+  onClose,
+  isShowMeta = false
+}) => {
+  const [settingsActiveTab, setSettingsActiveTab] = useState('model');
+  const [showModelDropdown, setShowModelDropdown] = useState(false);
+  const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
+  const [modelSearch, setModelSearch] = useState('');
+  const [templateSearch, setTemplateSearch] = useState('');
+  const modelDropdownRef = useRef(null);
+  const templateDropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      if (target.closest('[data-model-dropdown]')) return;
+      if (modelDropdownRef.current && !modelDropdownRef.current.contains(target)) {
+        setShowModelDropdown(false);
+      }
+      if (templateDropdownRef.current && !templateDropdownRef.current.contains(target)) {
+        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, provider) => {
+    const update = {
+      model: modelValue
+    };
+    if (provider) update.provider = provider;
+    onModelConfigChange({
+      ...modelConfig,
+      ...update
+    });
+    setShowModelDropdown(false);
+  }, [modelConfig, onModelConfigChange]);
+  const handleTemplateSelect = useCallback(templateValue => {
+    onModelConfigChange({
+      ...modelConfig,
+      template: templateValue
+    });
+    setShowTemplateDropdown(false);
+  }, [modelConfig, onModelConfigChange]);
+  const handleMetadataChange = useCallback((field, value) => {
+    onModelConfigChange({
+      ...modelConfig,
+      metadata: {
+        ...(modelConfig.metadata || {}),
+        [field]: value
+      }
+    });
+  }, [modelConfig, onModelConfigChange]);
+  return React__default.createElement("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()
+  }, React__default.createElement("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()
+  }, React__default.createElement("div", {
+    className: "p-6 flex flex-col flex-1 overflow-hidden"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between pb-4"
+  }, React__default.createElement("h3", {
+    className: "text-lg font-semibold text-gray-900"
+  }, "Project Settings"), React__default.createElement("button", {
+    type: "button",
+    onClick: onClose,
+    className: "text-gray-400 hover:text-gray-600 transition-colors p-1",
+    "aria-label": "Close"
+  }, React__default.createElement("svg", {
+    className: "w-6 h-6",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M6 18L18 6M6 6l12 12"
+  })))), React__default.createElement("div", {
+    className: "mb-4"
+  }, React__default.createElement("div", {
+    className: "flex border-b border-gray-200"
+  }, React__default.createElement("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"), React__default.createElement("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"), React__default.createElement("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"))), React__default.createElement("div", {
+    className: "flex-1 overflow-y-auto pr-1"
+  }, settingsActiveTab === 'model' && React__default.createElement("div", {
+    className: "space-y-4 pb-2"
+  }, React__default.createElement("div", {
+    className: "space-y-2"
+  }, React__default.createElement("label", {
+    className: "block text-sm font-medium text-gray-700"
+  }, "Model"), React__default.createElement("div", {
+    className: "relative",
+    ref: modelDropdownRef
+  }, React__default.createElement("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 || React__default.createElement("span", {
+    className: "text-gray-500"
+  }, "Model"), React__default.createElement("svg", {
+    className: "w-4 h-4 text-gray-500 ml-auto",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M19 9l-7 7-7-7"
+  }))), React__default.createElement(FloatingDropdown, {
+    anchorRef: modelDropdownRef,
+    open: showModelDropdown,
+    onClose: () => setShowModelDropdown(false),
+    minWidth: 320
+  }, React__default.createElement("div", {
+    className: "p-2 border-b border-gray-100"
+  }, React__default.createElement("input", {
+    autoFocus: true,
+    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"
+  })), React__default.createElement("div", {
+    className: "py-1 max-h-60 overflow-y-auto"
+  }, filteredModels.map(option => React__default.createElement("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' : ''}`
+  }, React__default.createElement("div", {
+    className: "font-medium text-gray-900 truncate"
+  }, option.label))))))), React__default.createElement("div", {
+    className: "space-y-2"
+  }, React__default.createElement("label", {
+    className: "block text-sm font-medium text-gray-700"
+  }, "Template"), React__default.createElement("div", {
+    className: "relative",
+    ref: templateDropdownRef
+  }, React__default.createElement("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) ? React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+    className: "text-base"
+  }, templateOptionsList.find(o => o.value === modelConfig.template)?.icon), React__default.createElement("span", {
+    className: "text-gray-700 truncate"
+  }, templateOptionsList.find(o => o.value === modelConfig.template)?.label)) : React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+    className: "text-base"
+  }, "\uD83D\uDCDD"), React__default.createElement("span", {
+    className: "text-gray-500 truncate"
+  }, "Template")), React__default.createElement("svg", {
+    className: "w-4 h-4 text-gray-500 ml-auto",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M19 9l-7 7-7-7"
+  }))), React__default.createElement(FloatingDropdown, {
+    anchorRef: templateDropdownRef,
+    open: showTemplateDropdown,
+    onClose: () => setShowTemplateDropdown(false),
+    minWidth: 320
+  }, React__default.createElement("div", {
+    className: "p-2 border-b border-gray-100"
+  }, React__default.createElement("input", {
+    autoFocus: true,
+    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"
+  })), React__default.createElement("div", {
+    className: "py-1 max-h-60 overflow-y-auto"
+  }, filteredTemplates.map(option => React__default.createElement("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' : ''}`
+  }, React__default.createElement("span", {
+    className: "text-sm"
+  }, option.icon), React__default.createElement("span", {
+    className: "font-medium text-gray-900 truncate"
+  }, option.label))))))), React__default.createElement("div", {
+    className: "space-y-2"
+  }, React__default.createElement("label", {
+    className: "block text-sm font-medium text-gray-700"
+  }, "Domain ", React__default.createElement("span", {
+    className: "text-gray-500 text-xs"
+  }, "(optional)")), React__default.createElement("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"
+  }))), settingsActiveTab === 'other_settings' && React__default.createElement("div", {
+    className: "space-y-4 pb-2"
+  }, React__default.createElement("div", null, React__default.createElement("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', ' ', React__default.createElement("span", {
+    className: "text-red-500"
+  }, "*")), React__default.createElement("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'
+  })), React__default.createElement("div", null, React__default.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Extension ID ", React__default.createElement("span", {
+    className: "text-red-500"
+  }, "*")), React__default.createElement("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"
+  })), React__default.createElement("div", null, React__default.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Form ID ", React__default.createElement("span", {
+    className: "text-red-500"
+  }, "*")), React__default.createElement("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"
+  })), React__default.createElement("div", null, React__default.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Function ID ", React__default.createElement("span", {
+    className: "text-red-500"
+  }, "*")), React__default.createElement("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"
+  })), React__default.createElement("div", null, React__default.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Step Name ", React__default.createElement("span", {
+    className: "text-gray-500 text-xs"
+  }, "(optional)")), React__default.createElement("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)"
+  }))), settingsActiveTab === 'secret' && React__default.createElement("div", {
+    className: "space-y-4 pb-2"
+  }, isShowMeta ? React__default.createElement("div", null, React__default.createElement("h4", {
+    className: "text-sm font-semibold text-gray-800 mb-3"
+  }, "Secret Metadata"), React__default.createElement("div", {
+    className: "space-y-3"
+  }, projectMetadataFields.map(field => React__default.createElement("div", {
+    key: field.key
+  }, React__default.createElement("label", {
+    className: "block text-xs font-medium text-gray-600 mb-1"
+  }, field.label), React__default.createElement("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()}`
+  }))))) : React__default.createElement("div", {
+    className: "text-sm text-gray-600"
+  }, "Secret metadata configuration is disabled for this environment."))))));
+};
+ProjectSettingsModal.displayName = 'ProjectSettingsModal';
+const ModelToolbar = ({
+  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');
+  const [templateSearch, setTemplateSearch] = useState('');
+  const [modelSearch, setModelSearch] = useState('');
+  const [toolbarModelSearch, setToolbarModelSearch] = useState('');
+  const [mode, setMode] = useState(modelConfig?.mode || 'plan');
+  const [showPlanTooltip, setShowPlanTooltip] = useState(false);
+  const [showBuildTooltip, setShowBuildTooltip] = useState(false);
+  const planButtonRef = useRef(null);
+  const buildButtonRef = useRef(null);
+  const modelDropdownRef = useRef(null);
+  const toolbarModelButtonRef = useRef(null);
+  const templateDropdownRef = useRef(null);
+  // Sync mode with modelConfig
+  useEffect(() => {
+    if (modelConfig?.mode && modelConfig.mode !== mode) {
+      setMode(modelConfig.mode);
+    }
+  }, [modelConfig?.mode, mode]);
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      // 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)) {
+        setShowModelDropdown(false);
+      }
+      if (showToolbarModelDropdown) {
+        const isClickInsideButton = toolbarModelButtonRef.current?.contains(target);
+        if (!isClickInsideButton) {
+          setShowToolbarModelDropdown(false);
+          setToolbarModelSearch('');
+        }
+      }
+      if (templateDropdownRef.current && !templateDropdownRef.current.contains(target)) {
+        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
+    }));
+  }, []);
+  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]);
+  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]);
+  useCallback(modelValue => {
+    if (onModelConfigChange && modelConfig) {
+      onModelConfigChange({
+        ...modelConfig,
+        model: modelValue
+      });
+    }
+    setShowModelDropdown(false);
+  }, [modelConfig, onModelConfigChange]);
+  const handleToolbarModelSelect = useCallback((modelValue, provider) => {
+    if (onModelConfigChange && modelConfig) {
+      const update = {
+        model: modelValue
+      };
+      if (provider) update.provider = provider;
+      onModelConfigChange({
+        ...modelConfig,
+        ...update
+      });
+    }
+    setShowToolbarModelDropdown(false);
+    setToolbarModelSearch('');
+  }, [modelConfig, onModelConfigChange]);
+  useCallback(templateValue => {
+    if (onModelConfigChange && modelConfig) {
+      onModelConfigChange({
+        ...modelConfig,
+        template: templateValue
+      });
+    }
+    setShowTemplateDropdown(false);
+  }, [modelConfig, onModelConfigChange]);
+  useCallback((field, value) => {
+    if (!onModelConfigChange || !modelConfig) return;
+    onModelConfigChange({
+      ...modelConfig,
+      metadata: {
+        ...(modelConfig.metadata || {}),
+        [field]: value
+      }
+    });
+  }, [modelConfig, onModelConfigChange]);
+  const handleModeChange = useCallback(newMode => {
+    setMode(newMode);
+    if (onModelConfigChange && modelConfig) {
+      onModelConfigChange({
+        ...modelConfig,
+        mode: newMode
+      });
+    }
+  }, [modelConfig, onModelConfigChange]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "flex items-center gap-2 overflow-x-auto overflow-y-visible whitespace-nowrap py-1 px-2 sm:px-0"
+  }, showModeSelector && React__default.createElement("div", {
+    className: "flex items-center gap-2 mr-2"
+  }, React__default.createElement("div", {
+    className: "relative",
+    style: {
+      overflow: 'visible'
+    }
+  }, React__default.createElement("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"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+  }))), showPlanTooltip && planButtonRef.current && ReactDOM.createPortal(React__default.createElement("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", React__default.createElement("div", {
+    className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1"
+  }, React__default.createElement("div", {
+    className: "w-2 h-2 bg-gray-800 rotate-45"
+  }))), document.body)), React__default.createElement("div", {
+    className: "relative",
+    style: {
+      overflow: 'visible'
+    }
+  }, React__default.createElement("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"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("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"
+  }), React__default.createElement("path", {
+    d: "M9 18h6"
+  }), React__default.createElement("path", {
+    d: "M10 22h4"
+  }))), showBuildTooltip && buildButtonRef.current && ReactDOM.createPortal(React__default.createElement("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", React__default.createElement("div", {
+    className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1"
+  }, React__default.createElement("div", {
+    className: "w-2 h-2 bg-gray-800 rotate-45"
+  }))), document.body))), React__default.createElement("div", {
+    className: "flex-1"
+  }), showProjectSettings && React__default.createElement("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"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4 text-gray-600",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("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"
+  }), React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+  }))), React__default.createElement("div", {
+    className: "relative shrink-0"
+  }, React__default.createElement("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'
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4 text-gray-600",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("rect", {
+    x: "4",
+    y: "4",
+    width: "16",
+    height: "16",
+    rx: "1",
+    strokeWidth: "2"
+  }), React__default.createElement("rect", {
+    x: "8",
+    y: "8",
+    width: "8",
+    height: "8",
+    rx: "0.5",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "10",
+    y1: "4",
+    x2: "10",
+    y2: "2",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "14",
+    y1: "4",
+    x2: "14",
+    y2: "2",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "10",
+    y1: "20",
+    x2: "10",
+    y2: "22",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "14",
+    y1: "20",
+    x2: "14",
+    y2: "22",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "4",
+    y1: "10",
+    x2: "2",
+    y2: "10",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "4",
+    y1: "14",
+    x2: "2",
+    y2: "14",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "20",
+    y1: "10",
+    x2: "22",
+    y2: "10",
+    strokeWidth: "2"
+  }), React__default.createElement("line", {
+    x1: "20",
+    y1: "14",
+    x2: "22",
+    y2: "14",
+    strokeWidth: "2"
+  }))), React__default.createElement(FloatingDropdown, {
+    anchorRef: toolbarModelButtonRef,
+    open: showToolbarModelDropdown,
+    onClose: () => {
+      setShowToolbarModelDropdown(false);
+      setToolbarModelSearch('');
+    },
+    minWidth: 280
+  }, React__default.createElement("div", {
+    "data-model-dropdown": true,
+    className: "bg-white"
+  }, React__default.createElement("div", {
+    className: "p-2 border-b border-gray-100"
+  }, React__default.createElement("input", {
+    autoFocus: true,
+    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"
+  })), React__default.createElement("div", {
+    className: "py-1 max-h-60 overflow-y-auto"
+  }, filteredToolbarModels.map(option => React__default.createElement("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' : ''}`
+  }, React__default.createElement("span", {
+    className: "text-gray-900"
+  }, option.label), modelConfig?.model === option.value && React__default.createElement("svg", {
+    className: "w-4 h-4 text-blue-600",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M5 13l4 4L19 7"
+  })))))))), React__default.createElement(UploadImageButton, {
+    onChange: onUploadImageChange
+  }, React__default.createElement("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"
+  }, React__default.createElement("svg", {
+    className: "w-3 h-3 text-gray-600",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("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"
+  })))), showStopButton ? React__default.createElement("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"
+  }, React__default.createElement("svg", {
+    className: "w-3 h-3",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "8",
+    fill: "white"
+  }))) : React__default.createElement("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 ? React__default.createElement("svg", {
+    className: "w-4 h-4 animate-spin",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("circle", {
+    className: "opacity-25",
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4"
+  }), React__default.createElement("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"
+  })) : React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+  })))), showProjectSettings && showSettingsModal && modelConfig && onModelConfigChange && React__default.createElement(ProjectSettingsModal, {
+    modelConfig: modelConfig,
+    onModelConfigChange: onModelConfigChange,
+    onClose: () => setShowSettingsModal(false),
+    isShowMeta: isShowMeta
+  }));
+};export{ModelConfigPanel,ModelToolbar,ProjectSettingsModal,getAllModels,modelOptions,templateOptions};//# sourceMappingURL=ModelConfigPanel.js.map