@solidxai/core-ui 0.1.7-beta.9 → 0.1.8-beta.0

package/dist/components/common/GeneralSettings.tsx

@@ -13,7 +13,7 @@ import { useDropzone } from 'react-dropzone';
 import { SettingDropzoneActivePlaceholder } from './SolidSettings/SettingDropzoneActivePlaceholder';
 import { SolidUploadedImage } from './SolidSettings/SolidUploadedImage';
 import { SettingsImageRemoveButton } from './SolidSettings/SettingsImageRemoveButton';
-import { AiModelConfigTab, ModelBehavior, ModelEntry, ProviderConfig, SolidAiConfig } from './SolidSettings/LlmSettings/AiModelConfigTab';
+import { ModelConfigTab, ProvidersTab, ModelBehavior, ModelEntry, SolidAiConfig, ensureBuiltInProviders } from './SolidSettings/LlmSettings/AiModelConfigTab';
 import { useDispatch, useSelector } from 'react-redux';
 import { ERROR_MESSAGES } from '../../constants/error-messages';
 import { useBulkUpdateSolidSettingsMutation, useLazyGetSolidSettingsQuery } from '../../redux/api/solidSettingsApi';
@@ -72,8 +72,8 @@ export const GeneralSettings = () => {
         solidXGenAiCodeBuilderConfig: (() => {
             const defaultAiConfig: SolidAiConfig = {
                 models: {
-                    default: { providerKey: "", behavior: { streaming: false, custom: "" } },
-                    fast: { providerKey: "", behavior: { streaming: false, custom: "" } },
+                    default: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
+                    fast: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
                 },
                 providers: {},
             };
@@ -1026,59 +1026,62 @@ export const GeneralSettings = () => {
     )
 }
 
-const AI_TABS = [
-    { key: "fast" as const, label: "Fast Model", title: "Fast Model" },
-    { key: "default" as const, label: "Intelligent Model", title: "Intelligent Model (Reasoning & tool use)" },
-];
-
 interface AiSettingsSectionProps {
     aiConfig: SolidAiConfig;
     onAiConfigChange: (config: SolidAiConfig) => void;
 }
 
 const DEFAULT_BEHAVIOR: ModelBehavior = { streaming: false, custom: "" };
+const DEFAULT_MODEL_ENTRY: ModelEntry = { providerId: "", model: "", behavior: DEFAULT_BEHAVIOR };
 
 const AiSettingsSection = ({ aiConfig, onAiConfigChange }: AiSettingsSectionProps) => {
-    const [activeTab, setActiveTab] = useState<"fast" | "default">("fast");
+    const [activeTab, setActiveTab] = useState<"providers" | "default" | "fast">("providers");
+    const [showAddProvider, setShowAddProvider] = useState(false);
 
-    const tabItems = AI_TABS.map((tab) => {
-        const modelEntry: ModelEntry = aiConfig.models?.[tab.key] ?? { providerKey: "", behavior: DEFAULT_BEHAVIOR };
-        const providerKey = modelEntry.providerKey ?? "";
-        const providerConfig: ProviderConfig = aiConfig.providers?.[providerKey] ?? { provider: providerKey, apiKey: "", model: "" };
-        const behavior: ModelBehavior = modelEntry.behavior ?? DEFAULT_BEHAVIOR;
+    const providers = ensureBuiltInProviders(aiConfig.providers ?? {});
 
-        return {
-            value: tab.key,
-            label: tab.label,
+    const tabItems = [
+        {
+            value: "providers" as const,
+            label: "Providers",
             content: (
-                <AiModelConfigTab
-                    providerKey={providerKey}
-                    providerConfig={providerConfig}
-                    behavior={behavior}
-                    allProviders={aiConfig.providers ?? {}}
-                    onProviderKeyChange={(newKey, newConfig) => {
-                        onAiConfigChange({
-                            ...aiConfig,
-                            models: { ...aiConfig.models, [tab.key]: { ...modelEntry, providerKey: newKey } },
-                            providers: { ...aiConfig.providers, [newKey]: newConfig },
-                        });
+                <ProvidersTab
+                    providers={providers}
+                    onProvidersChange={(newProviders) => {
+                        onAiConfigChange({ ...aiConfig, providers: newProviders });
                     }}
-                    onProviderConfigChange={(pk, config) => {
-                        onAiConfigChange({
-                            ...aiConfig,
-                            providers: { ...aiConfig.providers, [pk]: config },
-                        });
+                    showAddModal={showAddProvider}
+                    onAddModalClose={() => setShowAddProvider(false)}
+                />
+            ),
+        },
+        {
+            value: "default" as const,
+            label: "Intelligent Model",
+            content: (
+                <ModelConfigTab
+                    modelEntry={aiConfig.models?.default ?? DEFAULT_MODEL_ENTRY}
+                    providers={providers}
+                    onModelEntryChange={(entry) => {
+                        onAiConfigChange({ ...aiConfig, models: { ...aiConfig.models, default: entry } });
                     }}
-                    onBehaviorChange={(newBehavior) => {
-                        onAiConfigChange({
-                            ...aiConfig,
-                            models: { ...aiConfig.models, [tab.key]: { ...modelEntry, behavior: newBehavior } },
-                        });
+                />
+            ),
+        },
+        {
+            value: "fast" as const,
+            label: "Fast Model",
+            content: (
+                <ModelConfigTab
+                    modelEntry={aiConfig.models?.fast ?? DEFAULT_MODEL_ENTRY}
+                    providers={providers}
+                    onModelEntryChange={(entry) => {
+                        onAiConfigChange({ ...aiConfig, models: { ...aiConfig.models, fast: entry } });
                     }}
                 />
             ),
-        };
-    });
+        },
+    ];
 
     return (
         <div>
@@ -1088,8 +1091,15 @@ const AiSettingsSection = ({ aiConfig, onAiConfigChange }: AiSettingsSectionProp
             <SolidTabGroup
                 tabs={tabItems}
                 value={activeTab}
-                onValueChange={(value) => setActiveTab(value as "fast" | "default")}
+                onValueChange={(value) => setActiveTab(value as "providers" | "default" | "fast")}
                 tabPosition="left"
+                extra={
+                    activeTab === "providers" ? (
+                        <SolidButton size="sm" onClick={() => setShowAddProvider(true)}>
+                            Add
+                        </SolidButton>
+                    ) : undefined
+                }
             />
         </div>
     );

package/dist/components/common/SolidSettings/LlmSettings/AiModelConfigTab.d.ts

@@ -2,14 +2,14 @@ export interface ModelBehavior {
     streaming: boolean;
     custom: string;
 }
-export interface ProviderConfig {
-    provider: string;
+export interface ProviderEntry {
+    type: string;
     apiKey: string;
-    model: string;
     baseUrl?: string;
 }
 export interface ModelEntry {
-    providerKey: string;
+    providerId: string;
+    model: string;
     behavior: ModelBehavior;
 }
 export interface SolidAiConfig {
@@ -17,17 +17,21 @@ export interface SolidAiConfig {
         default: ModelEntry;
         fast: ModelEntry;
     };
-    providers: Record<string, ProviderConfig>;
+    providers: Record<string, ProviderEntry>;
 }
-interface Props {
-    providerKey: string;
-    providerConfig: ProviderConfig;
-    behavior: ModelBehavior;
-    allProviders: Record<string, ProviderConfig>;
-    onProviderKeyChange: (newProviderKey: string, config: ProviderConfig) => void;
-    onProviderConfigChange: (providerKey: string, config: ProviderConfig) => void;
-    onBehaviorChange: (behavior: ModelBehavior) => void;
+export declare const ensureBuiltInProviders: (providers: Record<string, ProviderEntry>) => Record<string, ProviderEntry>;
+interface ProvidersTabProps {
+    providers: Record<string, ProviderEntry>;
+    onProvidersChange: (providers: Record<string, ProviderEntry>) => void;
+    showAddModal?: boolean;
+    onAddModalClose?: () => void;
+}
+export declare const ProvidersTab: ({ providers, onProvidersChange, showAddModal, onAddModalClose }: ProvidersTabProps) => import("react/jsx-runtime").JSX.Element;
+interface ModelConfigTabProps {
+    modelEntry: ModelEntry;
+    providers: Record<string, ProviderEntry>;
+    onModelEntryChange: (entry: ModelEntry) => void;
 }
-export declare const AiModelConfigTab: ({ providerKey, providerConfig, behavior, allProviders, onProviderKeyChange, onProviderConfigChange, onBehaviorChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ModelConfigTab: ({ modelEntry, providers, onModelEntryChange }: ModelConfigTabProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AiModelConfigTab.d.ts.map

package/dist/components/common/SolidSettings/LlmSettings/AiModelConfigTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiModelConfigTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/SolidSettings/LlmSettings/AiModelConfigTab.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE;QACN,OAAO,EAAE,UAAU,CAAC;QACpB,IAAI,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC3C;AAED,UAAU,KAAK;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC7C,mBAAmB,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9E,sBAAsB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9E,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;CACrD;AAkBD,eAAO,MAAM,gBAAgB,4HAQ1B,KAAK,4CA4FP,CAAC"}
+{"version":3,"file":"AiModelConfigTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/SolidSettings/LlmSettings/AiModelConfigTab.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE;QACN,OAAO,EAAE,UAAU,CAAC;QACpB,IAAI,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CAC1C;AAmBD,eAAO,MAAM,sBAAsB,cAAe,OAAO,MAAM,EAAE,aAAa,CAAC,KAAG,OAAO,MAAM,EAAE,aAAa,CAG5G,CAAC;AA+KH,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,KAAK,IAAI,CAAC;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,oEAAqE,iBAAiB,4CA+E9G,CAAC;AAIF,UAAU,mBAAmB;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,kBAAkB,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,cAAc,kDAAmD,mBAAmB,4CA8DhG,CAAC"}

package/dist/components/common/SolidSettings/LlmSettings/AiModelConfigTab.js

@@ -9,40 +9,144 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SolidInput, SolidSelect, SolidSwitch, SolidTextarea } from "../../../shad-cn-ui";
-var PROVIDER_OPTIONS = [
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogFooter, SolidDialogHeader, SolidDialogTitle, SolidInput, SolidSelect, SolidSwitch, SolidTextarea, } from "../../../shad-cn-ui";
+var PROVIDER_TYPE_OPTIONS = [
     { label: "OpenAI", value: "openai" },
     { label: "Anthropic", value: "anthropic" },
     { label: "OpenAI Compatible", value: "openai-compatible" },
     { label: "Anthropic Compatible", value: "anthropic-compatible" },
 ];
-var COMPATIBLE_PROVIDERS = ["openai-compatible", "anthropic-compatible"];
-var DEFAULT_PROVIDER_CONFIGS = {
-    openai: { provider: "openai", apiKey: "", model: "" },
-    anthropic: { provider: "anthropic", apiKey: "", model: "" },
-    "openai-compatible": { provider: "openai-compatible", apiKey: "", model: "", baseUrl: "" },
-    "anthropic-compatible": { provider: "anthropic-compatible", apiKey: "", model: "", baseUrl: "" },
+var COMPATIBLE_TYPES = ["openai-compatible", "anthropic-compatible"];
+var BUILT_IN_TYPES = ["openai", "anthropic"];
+var DEFAULT_BUILT_IN_PROVIDERS = {
+    openai: { type: "openai", apiKey: "" },
+    anthropic: { type: "anthropic", apiKey: "" },
 };
-export var AiModelConfigTab = function (_a) {
-    var providerKey = _a.providerKey, providerConfig = _a.providerConfig, behavior = _a.behavior, allProviders = _a.allProviders, onProviderKeyChange = _a.onProviderKeyChange, onProviderConfigChange = _a.onProviderConfigChange, onBehaviorChange = _a.onBehaviorChange;
-    var isCompatible = COMPATIBLE_PROVIDERS.includes(providerKey);
-    var handleProviderSelect = function (value) {
-        var _a;
-        var existingConfig = allProviders[value];
-        var newConfig = (_a = existingConfig !== null && existingConfig !== void 0 ? existingConfig : DEFAULT_PROVIDER_CONFIGS[value]) !== null && _a !== void 0 ? _a : { provider: value, apiKey: "", model: "" };
-        onProviderKeyChange(value, newConfig);
+export var ensureBuiltInProviders = function (providers) { return (__assign(__assign({}, DEFAULT_BUILT_IN_PROVIDERS), providers)); };
+var cardStyle = {
+    border: "1px solid var(--solid-border-color, #e2e8f0)",
+    borderRadius: "0.5rem",
+    padding: "1.25rem",
+    background: "var(--solid-card-bg, var(--solid-surface-bg, transparent))",
+};
+var ProviderModal = function (_a) {
+    var _b, _c, _d, _e;
+    var visible = _a.visible, onHide = _a.onHide, providers = _a.providers, onProvidersChange = _a.onProvidersChange, editKey = _a.editKey;
+    var isEdit = !!editKey;
+    var existingEntry = isEdit ? providers[editKey] : null;
+    var _f = useState((_b = existingEntry === null || existingEntry === void 0 ? void 0 : existingEntry.type) !== null && _b !== void 0 ? _b : ""), providerType = _f[0], setProviderType = _f[1];
+    var _g = useState(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : ""), providerName = _g[0], setProviderName = _g[1];
+    var _h = useState((_c = existingEntry === null || existingEntry === void 0 ? void 0 : existingEntry.baseUrl) !== null && _c !== void 0 ? _c : ""), providerBaseUrl = _h[0], setProviderBaseUrl = _h[1];
+    var _j = useState((_d = existingEntry === null || existingEntry === void 0 ? void 0 : existingEntry.apiKey) !== null && _d !== void 0 ? _d : ""), providerApiKey = _j[0], setProviderApiKey = _j[1];
+    var isCompatible = COMPATIBLE_TYPES.includes(providerType);
+    // Reset state when modal opens with new data
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (visible) {
+            var entry = editKey ? providers[editKey] : null;
+            setProviderType((_a = entry === null || entry === void 0 ? void 0 : entry.type) !== null && _a !== void 0 ? _a : "");
+            setProviderName(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : "");
+            setProviderBaseUrl((_b = entry === null || entry === void 0 ? void 0 : entry.baseUrl) !== null && _b !== void 0 ? _b : "");
+            setProviderApiKey((_c = entry === null || entry === void 0 ? void 0 : entry.apiKey) !== null && _c !== void 0 ? _c : "");
+        }
+    }, [visible, editKey]);
+    // In add mode, only show compatible types (built-ins are always pre-added)
+    // In edit mode, show all types but lock the value
+    var typeOptions = isEdit
+        ? PROVIDER_TYPE_OPTIONS
+        : PROVIDER_TYPE_OPTIONS.filter(function (opt) { return COMPATIBLE_TYPES.includes(opt.value); });
+    var handleSave = function () {
+        if (!providerType)
+            return;
+        var key;
+        var entry = { type: providerType, apiKey: providerApiKey };
+        if (isCompatible) {
+            if (!providerName.trim())
+                return;
+            key = providerName.trim();
+            entry.baseUrl = providerBaseUrl;
+        }
+        else {
+            key = providerType;
+        }
+        // In add mode, don't overwrite existing
+        if (!isEdit && providers[key])
+            return;
+        var next = __assign({}, providers);
+        // If editing and key changed (shouldn't happen for built-in), remove old
+        if (isEdit && editKey !== key) {
+            delete next[editKey];
+        }
+        next[key] = entry;
+        onProvidersChange(next);
+        onHide();
     };
-    var handleConfigUpdate = function (key, value) {
-        var _a;
-        onProviderConfigChange(providerKey, __assign(__assign({}, providerConfig), (_a = {}, _a[key] = value, _a)));
+    var handleRemove = function () {
+        if (!editKey)
+            return;
+        var next = __assign({}, providers);
+        delete next[editKey];
+        onProvidersChange(next);
+        onHide();
     };
-    var cardStyle = {
-        border: "1px solid var(--solid-border-color, #e2e8f0)",
-        borderRadius: "0.5rem",
-        padding: "1.25rem",
-        background: "var(--solid-card-bg, var(--solid-surface-bg, transparent))",
+    var canSave = providerType && (isCompatible ? providerName.trim() : true);
+    return (_jsxs(SolidDialog, { open: visible, onOpenChange: function (open) { return !open && onHide(); }, style: { width: "500px" }, children: [_jsx(SolidDialogHeader, { children: _jsx(SolidDialogTitle, { children: isEdit
+                        ? "Edit Provider \u2014 ".concat(BUILT_IN_TYPES.includes(editKey) ? (_e = PROVIDER_TYPE_OPTIONS.find(function (o) { return o.value === editKey; })) === null || _e === void 0 ? void 0 : _e.label : editKey)
+                        : "Add Provider" }) }), _jsx(SolidDialogBody, { children: _jsxs("div", { className: "flex flex-column gap-3", children: [!(isEdit && BUILT_IN_TYPES.includes(editKey)) && (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: "Provider Type" }), _jsx(SolidSelect, { className: "w-full", value: providerType, options: typeOptions, onChange: function (e) {
+                                        setProviderType(e.value);
+                                        if (!isEdit) {
+                                            setProviderName("");
+                                            setProviderBaseUrl("");
+                                        }
+                                    }, placeholder: "Select Provider Type", disabled: isEdit })] })), isCompatible && (_jsxs(_Fragment, { children: [!isEdit && (_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: "Name (unique identifier)" }), _jsx(SolidInput, { placeholder: "e.g. openrouter, together-ai", value: providerName, onChange: function (e) { return setProviderName(e.target.value); }, className: "w-full" })] })), _jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: "Base URL" }), _jsx(SolidInput, { placeholder: "https://openrouter.ai/api/v1", value: providerBaseUrl, onChange: function (e) { return setProviderBaseUrl(e.target.value); }, className: "w-full" })] })] })), _jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: "API Key" }), _jsx(SolidInput, { type: "password", value: providerApiKey, onChange: function (e) { return setProviderApiKey(e.target.value); }, className: "w-full" })] })] }) }), _jsx(SolidDialogFooter, { children: _jsxs("div", { className: "flex justify-content-between w-full", children: [_jsx("div", { children: isEdit && !BUILT_IN_TYPES.includes(editKey) && (_jsx(SolidButton, { variant: "ghost", onClick: handleRemove, style: { color: "var(--solid-danger-color, #ef4444)" }, children: "Remove" })) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(SolidButton, { variant: "outline", onClick: onHide, children: "Cancel" }), _jsx(SolidButton, { onClick: handleSave, disabled: !canSave, children: isEdit ? "Save" : "Add" })] })] }) })] }));
+};
+export var ProvidersTab = function (_a) {
+    var providers = _a.providers, onProvidersChange = _a.onProvidersChange, showAddModal = _a.showAddModal, onAddModalClose = _a.onAddModalClose;
+    var _b = useState(null), editKey = _b[0], setEditKey = _b[1];
+    var _c = useState(false), modalVisible = _c[0], setModalVisible = _c[1];
+    // Ensure built-in providers are always present
+    var allProviders = ensureBuiltInProviders(providers);
+    // Open modal when parent triggers add
+    React.useEffect(function () {
+        if (showAddModal) {
+            setEditKey(null);
+            setModalVisible(true);
+        }
+    }, [showAddModal]);
+    var providerEntries = Object.entries(allProviders);
+    var handleRowClick = function (key) {
+        setEditKey(key);
+        setModalVisible(true);
     };
-    return (_jsxs("div", { className: "flex flex-column gap-4", children: [_jsxs("div", { style: cardStyle, children: [_jsx("p", { className: "solid-settings-subheading", children: "Provider Config" }), _jsxs("div", { className: "flex flex-column gap-3 mt-3", children: [_jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { className: "form-field-label", children: "Provider" }), _jsx(SolidSelect, { className: "w-full", value: providerKey, options: PROVIDER_OPTIONS, onChange: function (e) { return handleProviderSelect(e.value); }, placeholder: "Select Provider" })] }), isCompatible && (_jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { className: "form-field-label", children: "Base URL" }), _jsx(SolidInput, { placeholder: "http://localhost:8000", value: (providerConfig === null || providerConfig === void 0 ? void 0 : providerConfig.baseUrl) || "", onChange: function (e) { return handleConfigUpdate("baseUrl", e.target.value); }, className: "w-full" })] })), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { className: "form-field-label", children: "API Key" }), _jsx(SolidInput, { type: "password", className: "w-full", value: (providerConfig === null || providerConfig === void 0 ? void 0 : providerConfig.apiKey) || "", onChange: function (e) { return handleConfigUpdate("apiKey", e.target.value); } })] }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { className: "form-field-label", children: "Model" }), _jsx(SolidInput, { placeholder: "e.g. gpt-4o-mini", value: (providerConfig === null || providerConfig === void 0 ? void 0 : providerConfig.model) || "", onChange: function (e) { return handleConfigUpdate("model", e.target.value); }, className: "w-full" })] })] })] }), _jsxs("div", { style: cardStyle, children: [_jsx("p", { className: "solid-settings-subheading", children: "Behavior" }), _jsxs("div", { className: "flex flex-column gap-3 mt-3", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidSwitch, { checked: behavior.streaming, onChange: function (val) { return onBehaviorChange(__assign(__assign({}, behavior), { streaming: val })); } }), _jsx("label", { className: "form-field-label", style: { marginBottom: 0 }, children: "Streaming" })] }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { className: "form-field-label", children: "Custom Params (JSON)" }), _jsx(SolidTextarea, { value: behavior.custom, onChange: function (e) { return onBehaviorChange(__assign(__assign({}, behavior), { custom: e.target.value })); }, placeholder: '{ "temperature": 0.7, "maxTokens": 1000 }', rows: 4, className: "w-full" })] })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "solid-simple-table", children: _jsxs("table", { style: { width: "100%" }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: "left", padding: "0.75rem 1rem" }, children: "Name" }), _jsx("th", { style: { textAlign: "left", padding: "0.75rem 1rem" }, children: "Type" }), _jsx("th", { style: { textAlign: "left", padding: "0.75rem 1rem" }, children: "API Key" }), _jsx("th", { style: { textAlign: "left", padding: "0.75rem 1rem" }, children: "Base URL" })] }) }), _jsxs("tbody", { children: [providerEntries.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: 4, style: { textAlign: "center", padding: "2rem 1rem", opacity: 0.5 }, children: "No providers configured." }) })), providerEntries.map(function (_a) {
+                                    var _b, _c;
+                                    var key = _a[0], entry = _a[1];
+                                    var typeLabel = (_c = (_b = PROVIDER_TYPE_OPTIONS.find(function (o) { return o.value === entry.type; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : entry.type;
+                                    var isBuiltIn = BUILT_IN_TYPES.includes(key);
+                                    var displayName = isBuiltIn ? typeLabel : key;
+                                    var maskedKey = entry.apiKey ? "\u2022".repeat(Math.min(entry.apiKey.length, 8)) : "-";
+                                    return (_jsxs("tr", { onClick: function () { return handleRowClick(key); }, style: { cursor: "pointer" }, className: "solid-table-row-hover", children: [_jsx("td", { style: { padding: "0.75rem 1rem", fontWeight: 500 }, children: displayName }), _jsx("td", { style: { padding: "0.75rem 1rem" }, children: typeLabel }), _jsx("td", { style: { padding: "0.75rem 1rem" }, children: maskedKey }), _jsx("td", { style: { padding: "0.75rem 1rem" }, children: entry.baseUrl || "-" })] }, key));
+                                })] })] }) }), _jsx(ProviderModal, { visible: modalVisible, onHide: function () {
+                    setModalVisible(false);
+                    setEditKey(null);
+                    onAddModalClose === null || onAddModalClose === void 0 ? void 0 : onAddModalClose();
+                }, providers: allProviders, onProvidersChange: onProvidersChange, editKey: editKey })] }));
+};
+export var ModelConfigTab = function (_a) {
+    var modelEntry = _a.modelEntry, providers = _a.providers, onModelEntryChange = _a.onModelEntryChange;
+    var providerOptions = Object.entries(providers).map(function (_a) {
+        var _b, _c;
+        var key = _a[0], entry = _a[1];
+        var typeLabel = (_c = (_b = PROVIDER_TYPE_OPTIONS.find(function (o) { return o.value === entry.type; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : entry.type;
+        var label = BUILT_IN_TYPES.includes(key) ? typeLabel : "".concat(key, " (").concat(typeLabel, ")");
+        return { label: label, value: key };
+    });
+    return (_jsxs("div", { className: "flex flex-column gap-4", children: [_jsxs("div", { style: __assign(__assign({}, cardStyle), { width: "50%" }), children: [_jsx("p", { className: "solid-settings-subheading", children: "Model Config" }), _jsxs("div", { className: "flex flex-column gap-3 mt-3", children: [_jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: "Provider" }), _jsx(SolidSelect, { className: "w-full", value: modelEntry.providerId, options: providerOptions, onChange: function (e) { return onModelEntryChange(__assign(__assign({}, modelEntry), { providerId: e.value })); }, placeholder: "Select Provider" })] }), _jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: "Model" }), _jsx(SolidInput, { placeholder: "e.g. gpt-4o-mini", value: modelEntry.model || "", onChange: function (e) { return onModelEntryChange(__assign(__assign({}, modelEntry), { model: e.target.value })); }, className: "w-full" })] })] })] }), _jsxs("div", { style: __assign(__assign({}, cardStyle), { width: "50%" }), children: [_jsx("p", { className: "solid-settings-subheading", children: "Behavior" }), _jsxs("div", { className: "flex flex-column gap-3 mt-3", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidSwitch, { checked: modelEntry.behavior.streaming, onChange: function (val) {
+                                            return onModelEntryChange(__assign(__assign({}, modelEntry), { behavior: __assign(__assign({}, modelEntry.behavior), { streaming: val }) }));
+                                        } }), _jsx("label", { className: "form-field-label", style: { marginBottom: 0 }, children: "Streaming" })] }), _jsxs("div", { children: [_jsx("label", { className: "form-field-label", children: "Custom Params (JSON)" }), _jsx(SolidTextarea, { value: modelEntry.behavior.custom, onChange: function (e) {
+                                            return onModelEntryChange(__assign(__assign({}, modelEntry), { behavior: __assign(__assign({}, modelEntry.behavior), { custom: e.target.value }) }));
+                                        }, placeholder: '{ "temperature": 0.7, "maxTokens": 1000 }', rows: 4, className: "w-full" })] })] })] })] }));
 };
 //# sourceMappingURL=AiModelConfigTab.js.map

package/dist/components/common/SolidSettings/LlmSettings/AiModelConfigTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiModelConfigTab.js","sourceRoot":"","sources":["../../../../../src/components/common/SolidSettings/LlmSettings/AiModelConfigTab.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAqC1F,IAAM,gBAAgB,GAAG;IACvB,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;IAC1C,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,EAAE;IAC1D,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,sBAAsB,EAAE;CACjE,CAAC;AAEF,IAAM,oBAAoB,GAAG,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAC;AAE3E,IAAM,wBAAwB,GAAmC;IAC/D,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,SAAS,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,mBAAmB,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1F,sBAAsB,EAAE,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;CACjG,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAQzB;QAPN,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,mBAAmB,yBAAA,EACnB,sBAAsB,4BAAA,EACtB,gBAAgB,sBAAA;IAEhB,IAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEhE,IAAM,oBAAoB,GAAG,UAAC,KAAa;;QACzC,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAM,SAAS,GAAG,MAAA,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,wBAAwB,CAAC,KAAK,CAAC,mCAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;QAClH,mBAAmB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAG,UAAC,GAAyB,EAAE,KAAa;;QAClE,sBAAsB,CAAC,WAAW,wBAAO,cAAc,gBAAG,GAAG,IAAG,KAAK,OAAG,CAAC;IAC3E,CAAC,CAAC;IAEF,IAAM,SAAS,GAAwB;QACrC,MAAM,EAAE,8CAA8C;QACtD,YAAY,EAAE,QAAQ;QACtB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,4DAA4D;KACzE,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,eAAK,KAAK,EAAE,SAAS,aACnB,YAAG,SAAS,EAAC,2BAA2B,gCAAoB,EAC5D,eAAK,SAAS,EAAC,6BAA6B,aAC1C,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBAAO,SAAS,EAAC,kBAAkB,yBAAiB,EACpD,KAAC,WAAW,IACV,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAA7B,CAA6B,EAC9C,WAAW,EAAC,iBAAiB,GAC7B,IACE,EACL,YAAY,IAAI,CACf,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBAAO,SAAS,EAAC,kBAAkB,yBAAiB,EACpD,KAAC,UAAU,IACT,WAAW,EAAC,uBAAuB,EACnC,KAAK,EAAE,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,KAAI,EAAE,EACpC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,kBAAkB,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA7C,CAA6C,EAC9D,SAAS,EAAC,QAAQ,GAClB,IACE,CACP,EACD,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBAAO,SAAS,EAAC,kBAAkB,wBAAgB,EACnD,KAAC,UAAU,IACT,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,KAAI,EAAE,EACnC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,kBAAkB,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA5C,CAA4C,GAC7D,IACE,EACN,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBAAO,SAAS,EAAC,kBAAkB,sBAAc,EACjD,KAAC,UAAU,IACT,WAAW,EAAC,kBAAkB,EAC9B,KAAK,EAAE,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,KAAI,EAAE,EAClC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA3C,CAA2C,EAC5D,SAAS,EAAC,QAAQ,GAClB,IACE,IACF,IACF,EAEN,eAAK,KAAK,EAAE,SAAS,aACnB,YAAG,SAAS,EAAC,2BAA2B,yBAAa,EACrD,eAAK,SAAS,EAAC,6BAA6B,aAC1C,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,WAAW,IACV,OAAO,EAAE,QAAQ,CAAC,SAAS,EAC3B,QAAQ,EAAE,UAAC,GAAG,IAAK,OAAA,gBAAgB,uBAAM,QAAQ,KAAE,SAAS,EAAE,GAAG,IAAG,EAAjD,CAAiD,GACpE,EACF,gBAAO,SAAS,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,0BAAmB,IAC7E,EACN,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBAAO,SAAS,EAAC,kBAAkB,qCAA6B,EAChE,KAAC,aAAa,IACZ,KAAK,EAAE,QAAQ,CAAC,MAAM,EACtB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,gBAAgB,uBAAM,QAAQ,KAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAG,EAAzD,CAAyD,EAC1E,WAAW,EAAC,2CAA2C,EACvD,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,QAAQ,GAClB,IACE,IACF,IACF,IAEF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { SolidInput, SolidSelect, SolidSwitch, SolidTextarea } from \"../../../shad-cn-ui\";\n\nexport interface ModelBehavior {\n  streaming: boolean;\n  custom: string;\n}\n\nexport interface ProviderConfig {\n  provider: string;\n  apiKey: string;\n  model: string;\n  baseUrl?: string;\n}\n\nexport interface ModelEntry {\n  providerKey: string;\n  behavior: ModelBehavior;\n}\n\nexport interface SolidAiConfig {\n  models: {\n    default: ModelEntry;\n    fast: ModelEntry;\n  };\n  providers: Record<string, ProviderConfig>;\n}\n\ninterface Props {\n  providerKey: string;\n  providerConfig: ProviderConfig;\n  behavior: ModelBehavior;\n  allProviders: Record<string, ProviderConfig>;\n  onProviderKeyChange: (newProviderKey: string, config: ProviderConfig) => void;\n  onProviderConfigChange: (providerKey: string, config: ProviderConfig) => void;\n  onBehaviorChange: (behavior: ModelBehavior) => void;\n}\n\nconst PROVIDER_OPTIONS = [\n  { label: \"OpenAI\", value: \"openai\" },\n  { label: \"Anthropic\", value: \"anthropic\" },\n  { label: \"OpenAI Compatible\", value: \"openai-compatible\" },\n  { label: \"Anthropic Compatible\", value: \"anthropic-compatible\" },\n];\n\nconst COMPATIBLE_PROVIDERS = [\"openai-compatible\", \"anthropic-compatible\"];\n\nconst DEFAULT_PROVIDER_CONFIGS: Record<string, ProviderConfig> = {\n  openai: { provider: \"openai\", apiKey: \"\", model: \"\" },\n  anthropic: { provider: \"anthropic\", apiKey: \"\", model: \"\" },\n  \"openai-compatible\": { provider: \"openai-compatible\", apiKey: \"\", model: \"\", baseUrl: \"\" },\n  \"anthropic-compatible\": { provider: \"anthropic-compatible\", apiKey: \"\", model: \"\", baseUrl: \"\" },\n};\n\nexport const AiModelConfigTab = ({\n  providerKey,\n  providerConfig,\n  behavior,\n  allProviders,\n  onProviderKeyChange,\n  onProviderConfigChange,\n  onBehaviorChange,\n}: Props) => {\n  const isCompatible = COMPATIBLE_PROVIDERS.includes(providerKey);\n\n  const handleProviderSelect = (value: string) => {\n    const existingConfig = allProviders[value];\n    const newConfig = existingConfig ?? DEFAULT_PROVIDER_CONFIGS[value] ?? { provider: value, apiKey: \"\", model: \"\" };\n    onProviderKeyChange(value, newConfig);\n  };\n\n  const handleConfigUpdate = (key: keyof ProviderConfig, value: string) => {\n    onProviderConfigChange(providerKey, { ...providerConfig, [key]: value });\n  };\n\n  const cardStyle: React.CSSProperties = {\n    border: \"1px solid var(--solid-border-color, #e2e8f0)\",\n    borderRadius: \"0.5rem\",\n    padding: \"1.25rem\",\n    background: \"var(--solid-card-bg, var(--solid-surface-bg, transparent))\",\n  };\n\n  return (\n    <div className=\"flex flex-column gap-4\">\n      <div style={cardStyle}>\n        <p className=\"solid-settings-subheading\">Provider Config</p>\n        <div className=\"flex flex-column gap-3 mt-3\">\n          <div className=\"flex flex-column gap-2\">\n            <label className=\"form-field-label\">Provider</label>\n            <SolidSelect\n              className=\"w-full\"\n              value={providerKey}\n              options={PROVIDER_OPTIONS}\n              onChange={(e) => handleProviderSelect(e.value)}\n              placeholder=\"Select Provider\"\n            />\n          </div>\n          {isCompatible && (\n            <div className=\"flex flex-column gap-2\">\n              <label className=\"form-field-label\">Base URL</label>\n              <SolidInput\n                placeholder=\"http://localhost:8000\"\n                value={providerConfig?.baseUrl || \"\"}\n                onChange={(e) => handleConfigUpdate(\"baseUrl\", e.target.value)}\n                className=\"w-full\"\n              />\n            </div>\n          )}\n          <div className=\"flex flex-column gap-2\">\n            <label className=\"form-field-label\">API Key</label>\n            <SolidInput\n              type=\"password\"\n              className=\"w-full\"\n              value={providerConfig?.apiKey || \"\"}\n              onChange={(e) => handleConfigUpdate(\"apiKey\", e.target.value)}\n            />\n          </div>\n          <div className=\"flex flex-column gap-2\">\n            <label className=\"form-field-label\">Model</label>\n            <SolidInput\n              placeholder=\"e.g. gpt-4o-mini\"\n              value={providerConfig?.model || \"\"}\n              onChange={(e) => handleConfigUpdate(\"model\", e.target.value)}\n              className=\"w-full\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div style={cardStyle}>\n        <p className=\"solid-settings-subheading\">Behavior</p>\n        <div className=\"flex flex-column gap-3 mt-3\">\n          <div className=\"flex align-items-center gap-2\">\n            <SolidSwitch\n              checked={behavior.streaming}\n              onChange={(val) => onBehaviorChange({ ...behavior, streaming: val })}\n            />\n            <label className=\"form-field-label\" style={{ marginBottom: 0 }}>Streaming</label>\n          </div>\n          <div className=\"flex flex-column gap-2\">\n            <label className=\"form-field-label\">Custom Params (JSON)</label>\n            <SolidTextarea\n              value={behavior.custom}\n              onChange={(e) => onBehaviorChange({ ...behavior, custom: e.target.value })}\n              placeholder='{ \"temperature\": 0.7, \"maxTokens\": 1000 }'\n              rows={4}\n              className=\"w-full\"\n            />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"AiModelConfigTab.js","sourceRoot":"","sources":["../../../../../src/components/common/SolidSettings/LlmSettings/AiModelConfigTab.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from \"react\";\nimport {\n  SolidButton,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogTitle,\n  SolidInput,\n  SolidSelect,\n  SolidSwitch,\n  SolidTextarea,\n} from \"../../../shad-cn-ui\";\n\n\nexport interface ModelBehavior {\n  streaming: boolean;\n  custom: string;\n}\n\nexport interface ProviderEntry {\n  type: string;\n  apiKey: string;\n  baseUrl?: string;\n}\n\nexport interface ModelEntry {\n  providerId: string;\n  model: string;\n  behavior: ModelBehavior;\n}\n\nexport interface SolidAiConfig {\n  models: {\n    default: ModelEntry;\n    fast: ModelEntry;\n  };\n  providers: Record<string, ProviderEntry>;\n}\n\n\nconst PROVIDER_TYPE_OPTIONS = [\n  { label: \"OpenAI\", value: \"openai\" },\n  { label: \"Anthropic\", value: \"anthropic\" },\n  { label: \"OpenAI Compatible\", value: \"openai-compatible\" },\n  { label: \"Anthropic Compatible\", value: \"anthropic-compatible\" },\n];\n\nconst COMPATIBLE_TYPES = [\"openai-compatible\", \"anthropic-compatible\"];\n\nconst BUILT_IN_TYPES = [\"openai\", \"anthropic\"];\n\nconst DEFAULT_BUILT_IN_PROVIDERS: Record<string, ProviderEntry> = {\n  openai: { type: \"openai\", apiKey: \"\" },\n  anthropic: { type: \"anthropic\", apiKey: \"\" },\n};\n\nexport const ensureBuiltInProviders = (providers: Record<string, ProviderEntry>): Record<string, ProviderEntry> => ({\n  ...DEFAULT_BUILT_IN_PROVIDERS,\n  ...providers,\n});\n\nconst cardStyle: React.CSSProperties = {\n  border: \"1px solid var(--solid-border-color, #e2e8f0)\",\n  borderRadius: \"0.5rem\",\n  padding: \"1.25rem\",\n  background: \"var(--solid-card-bg, var(--solid-surface-bg, transparent))\",\n};\n\n\ninterface ProviderModalProps {\n  visible: boolean;\n  onHide: () => void;\n  providers: Record<string, ProviderEntry>;\n  onProvidersChange: (providers: Record<string, ProviderEntry>) => void;\n  editKey?: string | null; // null = add mode, string = edit mode\n}\n\nconst ProviderModal = ({ visible, onHide, providers, onProvidersChange, editKey }: ProviderModalProps) => {\n  const isEdit = !!editKey;\n  const existingEntry = isEdit ? providers[editKey] : null;\n\n  const [providerType, setProviderType] = useState(existingEntry?.type ?? \"\");\n  const [providerName, setProviderName] = useState(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : \"\");\n  const [providerBaseUrl, setProviderBaseUrl] = useState(existingEntry?.baseUrl ?? \"\");\n  const [providerApiKey, setProviderApiKey] = useState(existingEntry?.apiKey ?? \"\");\n\n  const isCompatible = COMPATIBLE_TYPES.includes(providerType);\n\n  // Reset state when modal opens with new data\n  React.useEffect(() => {\n    if (visible) {\n      const entry = editKey ? providers[editKey] : null;\n      setProviderType(entry?.type ?? \"\");\n      setProviderName(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : \"\");\n      setProviderBaseUrl(entry?.baseUrl ?? \"\");\n      setProviderApiKey(entry?.apiKey ?? \"\");\n    }\n  }, [visible, editKey]);\n\n  // In add mode, only show compatible types (built-ins are always pre-added)\n  // In edit mode, show all types but lock the value\n  const typeOptions = isEdit\n    ? PROVIDER_TYPE_OPTIONS\n    : PROVIDER_TYPE_OPTIONS.filter((opt) => COMPATIBLE_TYPES.includes(opt.value));\n\n  const handleSave = () => {\n    if (!providerType) return;\n\n    let key: string;\n    const entry: ProviderEntry = { type: providerType, apiKey: providerApiKey };\n\n    if (isCompatible) {\n      if (!providerName.trim()) return;\n      key = providerName.trim();\n      entry.baseUrl = providerBaseUrl;\n    } else {\n      key = providerType;\n    }\n\n    // In add mode, don't overwrite existing\n    if (!isEdit && providers[key]) return;\n\n    const next = { ...providers };\n\n    // If editing and key changed (shouldn't happen for built-in), remove old\n    if (isEdit && editKey !== key) {\n      delete next[editKey!];\n    }\n\n    next[key] = entry;\n    onProvidersChange(next);\n    onHide();\n  };\n\n  const handleRemove = () => {\n    if (!editKey) return;\n    const next = { ...providers };\n    delete next[editKey];\n    onProvidersChange(next);\n    onHide();\n  };\n\n  const canSave = providerType && (isCompatible ? providerName.trim() : true);\n\n  return (\n    <SolidDialog open={visible} onOpenChange={(open) => !open && onHide()} style={{ width: \"500px\" }}>\n      <SolidDialogHeader>\n        <SolidDialogTitle>\n          {isEdit\n            ? `Edit Provider — ${BUILT_IN_TYPES.includes(editKey!) ? PROVIDER_TYPE_OPTIONS.find((o) => o.value === editKey)?.label : editKey}`\n            : \"Add Provider\"}\n        </SolidDialogTitle>\n      </SolidDialogHeader>\n      <SolidDialogBody>\n        <div className=\"flex flex-column gap-3\">\n          {!(isEdit && BUILT_IN_TYPES.includes(editKey!)) && (\n            <div>\n              <label className=\"form-field-label\">Provider Type</label>\n              <SolidSelect\n                className=\"w-full\"\n                value={providerType}\n                options={typeOptions}\n                onChange={(e) => {\n                  setProviderType(e.value);\n                  if (!isEdit) {\n                    setProviderName(\"\");\n                    setProviderBaseUrl(\"\");\n                  }\n                }}\n                placeholder=\"Select Provider Type\"\n                disabled={isEdit}\n              />\n            </div>\n          )}\n          {isCompatible && (\n            <>\n              {!isEdit && (\n                <div>\n                  <label className=\"form-field-label\">Name (unique identifier)</label>\n                  <SolidInput\n                    placeholder=\"e.g. openrouter, together-ai\"\n                    value={providerName}\n                    onChange={(e) => setProviderName(e.target.value)}\n                    className=\"w-full\"\n                  />\n                </div>\n              )}\n              <div>\n                <label className=\"form-field-label\">Base URL</label>\n                <SolidInput\n                  placeholder=\"https://openrouter.ai/api/v1\"\n                  value={providerBaseUrl}\n                  onChange={(e) => setProviderBaseUrl(e.target.value)}\n                  className=\"w-full\"\n                />\n              </div>\n            </>\n          )}\n          <div>\n            <label className=\"form-field-label\">API Key</label>\n            <SolidInput\n              type=\"password\"\n              value={providerApiKey}\n              onChange={(e) => setProviderApiKey(e.target.value)}\n              className=\"w-full\"\n            />\n          </div>\n        </div>\n      </SolidDialogBody>\n      <SolidDialogFooter>\n        <div className=\"flex justify-content-between w-full\">\n          <div>\n            {isEdit && !BUILT_IN_TYPES.includes(editKey!) && (\n              <SolidButton variant=\"ghost\" onClick={handleRemove} style={{ color: \"var(--solid-danger-color, #ef4444)\" }}>\n                Remove\n              </SolidButton>\n            )}\n          </div>\n          <div className=\"flex gap-2\">\n            <SolidButton variant=\"outline\" onClick={onHide}>\n              Cancel\n            </SolidButton>\n            <SolidButton onClick={handleSave} disabled={!canSave}>\n              {isEdit ? \"Save\" : \"Add\"}\n            </SolidButton>\n          </div>\n        </div>\n      </SolidDialogFooter>\n    </SolidDialog>\n  );\n};\n\n// --- Providers Tab (List View) ---\n\ninterface ProvidersTabProps {\n  providers: Record<string, ProviderEntry>;\n  onProvidersChange: (providers: Record<string, ProviderEntry>) => void;\n  showAddModal?: boolean;\n  onAddModalClose?: () => void;\n}\n\nexport const ProvidersTab = ({ providers, onProvidersChange, showAddModal, onAddModalClose }: ProvidersTabProps) => {\n  const [editKey, setEditKey] = useState<string | null>(null);\n  const [modalVisible, setModalVisible] = useState(false);\n\n  // Ensure built-in providers are always present\n  const allProviders = ensureBuiltInProviders(providers);\n\n  // Open modal when parent triggers add\n  React.useEffect(() => {\n    if (showAddModal) {\n      setEditKey(null);\n      setModalVisible(true);\n    }\n  }, [showAddModal]);\n\n  const providerEntries = Object.entries(allProviders);\n\n  const handleRowClick = (key: string) => {\n    setEditKey(key);\n    setModalVisible(true);\n  };\n\n  return (\n    <>\n      <div className=\"solid-simple-table\">\n        <table style={{ width: \"100%\" }}>\n          <thead>\n            <tr>\n              <th style={{ textAlign: \"left\", padding: \"0.75rem 1rem\" }}>Name</th>\n              <th style={{ textAlign: \"left\", padding: \"0.75rem 1rem\" }}>Type</th>\n              <th style={{ textAlign: \"left\", padding: \"0.75rem 1rem\" }}>API Key</th>\n              <th style={{ textAlign: \"left\", padding: \"0.75rem 1rem\" }}>Base URL</th>\n            </tr>\n          </thead>\n          <tbody>\n            {providerEntries.length === 0 && (\n              <tr>\n                <td colSpan={4} style={{ textAlign: \"center\", padding: \"2rem 1rem\", opacity: 0.5 }}>\n                  No providers configured.\n                </td>\n              </tr>\n            )}\n            {providerEntries.map(([key, entry]) => {\n              const typeLabel = PROVIDER_TYPE_OPTIONS.find((o) => o.value === entry.type)?.label ?? entry.type;\n              const isBuiltIn = BUILT_IN_TYPES.includes(key);\n              const displayName = isBuiltIn ? typeLabel : key;\n              const maskedKey = entry.apiKey ? \"\\u2022\".repeat(Math.min(entry.apiKey.length, 8)) : \"-\";\n\n              return (\n                <tr\n                  key={key}\n                  onClick={() => handleRowClick(key)}\n                  style={{ cursor: \"pointer\" }}\n                  className=\"solid-table-row-hover\"\n                >\n                  <td style={{ padding: \"0.75rem 1rem\", fontWeight: 500 }}>{displayName}</td>\n                  <td style={{ padding: \"0.75rem 1rem\" }}>{typeLabel}</td>\n                  <td style={{ padding: \"0.75rem 1rem\" }}>{maskedKey}</td>\n                  <td style={{ padding: \"0.75rem 1rem\" }}>{entry.baseUrl || \"-\"}</td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n\n      <ProviderModal\n        visible={modalVisible}\n        onHide={() => {\n          setModalVisible(false);\n          setEditKey(null);\n          onAddModalClose?.();\n        }}\n        providers={allProviders}\n        onProvidersChange={onProvidersChange}\n        editKey={editKey}\n      />\n    </>\n  );\n};\n\n// --- Model Config Tab (used for Intelligent Model & Fast Model) ---\n\ninterface ModelConfigTabProps {\n  modelEntry: ModelEntry;\n  providers: Record<string, ProviderEntry>;\n  onModelEntryChange: (entry: ModelEntry) => void;\n}\n\nexport const ModelConfigTab = ({ modelEntry, providers, onModelEntryChange }: ModelConfigTabProps) => {\n  const providerOptions = Object.entries(providers).map(([key, entry]) => {\n    const typeLabel = PROVIDER_TYPE_OPTIONS.find((o) => o.value === entry.type)?.label ?? entry.type;\n    const label = BUILT_IN_TYPES.includes(key) ? typeLabel : `${key} (${typeLabel})`;\n    return { label, value: key };\n  });\n\n  return (\n    <div className=\"flex flex-column gap-4\">\n      <div style={{ ...cardStyle, width: \"50%\" }}>\n        <p className=\"solid-settings-subheading\">Model Config</p>\n        <div className=\"flex flex-column gap-3 mt-3\">\n          <div>\n            <label className=\"form-field-label\">Provider</label>\n            <SolidSelect\n              className=\"w-full\"\n              value={modelEntry.providerId}\n              options={providerOptions}\n              onChange={(e) => onModelEntryChange({ ...modelEntry, providerId: e.value })}\n              placeholder=\"Select Provider\"\n            />\n          </div>\n          <div>\n            <label className=\"form-field-label\">Model</label>\n            <SolidInput\n              placeholder=\"e.g. gpt-4o-mini\"\n              value={modelEntry.model || \"\"}\n              onChange={(e) => onModelEntryChange({ ...modelEntry, model: e.target.value })}\n              className=\"w-full\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div style={{ ...cardStyle, width: \"50%\" }}>\n        <p className=\"solid-settings-subheading\">Behavior</p>\n        <div className=\"flex flex-column gap-3 mt-3\">\n          <div className=\"flex align-items-center gap-2\">\n            <SolidSwitch\n              checked={modelEntry.behavior.streaming}\n              onChange={(val) =>\n                onModelEntryChange({ ...modelEntry, behavior: { ...modelEntry.behavior, streaming: val } })\n              }\n            />\n            <label className=\"form-field-label\" style={{ marginBottom: 0 }}>Streaming</label>\n          </div>\n          <div>\n            <label className=\"form-field-label\">Custom Params (JSON)</label>\n            <SolidTextarea\n              value={modelEntry.behavior.custom}\n              onChange={(e) =>\n                onModelEntryChange({ ...modelEntry, behavior: { ...modelEntry.behavior, custom: e.target.value } })\n              }\n              placeholder='{ \"temperature\": 0.7, \"maxTokens\": 1000 }'\n              rows={4}\n              className=\"w-full\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}