@solidxai/core-ui 0.1.7-beta.8 → 0.1.7

package/dist/components/common/GeneralSettings.tsx

@@ -1,6 +1,8 @@
 import { useFormik } from 'formik';
 import { useCallback, useEffect, useState } from 'react'
 import { CancelButton } from './CancelButton';
+import { ApiKeysTab } from '../core/users/ApiKeysTab';
+import { useSession } from '../../hooks/useSession';
 import { SolidButton, SolidDivider, SolidInput, SolidSegmentedControl, SolidSwitch, SolidTabGroup, SolidTextarea } from '../shad-cn-ui';
 import { usePathname } from "../../hooks/usePathname";
 import SolidLogo from '../../resources/images/SolidXLogo.svg'
@@ -11,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, ModelConfig } 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';
@@ -20,6 +22,7 @@ import { showToast } from '../../redux/features/toastSlice';
 
 
 export const GeneralSettings = () => {
+    const { data: session } = useSession();
     const [appLogoPreview, setAppLogoPreview] = useState<string | null>(null);
     const [companyLogoPreview, setCompanyLogoPreview] = useState<string | null>(null);
     const [authScreenRightBackgroundImagePreview, setAuthScreenRightBackgroundImagePreview] = useState<string | null>(null);
@@ -66,10 +69,23 @@ export const GeneralSettings = () => {
         authScreenRightBackgroundImage: solidSettingsData?.data?.authScreenRightBackgroundImage ?? null,
         authScreenLeftBackgroundImage: solidSettingsData?.data?.authScreenLeftBackgroundImage ?? null,
         authScreenCenterBackgroundImage: solidSettingsData?.data?.authScreenCenterBackgroundImage ?? null,
-        solidXGenAiCodeBuilderConfig: solidSettingsData?.data?.solidXGenAiCodeBuilderConfig ?? {
-            fastModel: { provider: "", availableProviders: [] },
-            defaultProvider: { provider: "", availableProviders: [] },
-        }
+        solidXGenAiCodeBuilderConfig: (() => {
+            const defaultAiConfig: SolidAiConfig = {
+                models: {
+                    default: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
+                    fast: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
+                },
+                providers: {},
+            };
+            const raw = solidSettingsData?.data?.solidXGenAiCodeBuilderConfig;
+            if (!raw) return defaultAiConfig;
+            try {
+                const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+                return (parsed && typeof parsed === "object" ? parsed : defaultAiConfig) as SolidAiConfig;
+            } catch {
+                return defaultAiConfig;
+            }
+        })(),
         // llmProvider: solidSettingsData?.data?.llmProvider ?? null,
         // llModelName: solidSettingsData?.data?.llModelName ?? null,
         // llmProviderApiKey: solidSettingsData?.data?.llmProviderApiKey ?? null,
@@ -339,11 +355,8 @@ export const GeneralSettings = () => {
 
 
 
-    const handleModelConfigChange = (modelType: "fastModel" | "defaultProvider", config: ModelConfig) => {
-        formik.setFieldValue("solidXGenAiCodeBuilderConfig", {
-            ...formik.values.solidXGenAiCodeBuilderConfig,
-            [modelType]: config,
-        });
+    const handleAiConfigChange = (newConfig: SolidAiConfig) => {
+        formik.setFieldValue("solidXGenAiCodeBuilderConfig", newConfig);
     };
 
 
@@ -995,10 +1008,14 @@ export const GeneralSettings = () => {
                             }
                             {pathname.includes("ai-settings") &&
                                 <AiSettingsSection
-                                    fastModelConfig={formik.values.solidXGenAiCodeBuilderConfig.fastModel ?? { provider: "", availableProviders: [] }}
-                                    intelligentModelConfig={formik.values.solidXGenAiCodeBuilderConfig.defaultProvider ?? { provider: "", availableProviders: [] }}
-                                    onFastModelChange={(config) => handleModelConfigChange("fastModel", config)}
-                                    onIntelligentModelChange={(config) => handleModelConfigChange("defaultProvider", config)}
+                                    aiConfig={formik.values.solidXGenAiCodeBuilderConfig as SolidAiConfig}
+                                    onAiConfigChange={handleAiConfigChange}
+                                />
+                            }
+                            {pathname.includes("api-keys") && session?.user?.id &&
+                                <ApiKeysTab
+                                    userId={session.user.id}
+                                    canCreate={session?.user?.isAllowedToGenerateApiKeys ?? false}
                                 />
                             }
                         </div>
@@ -1009,48 +1026,80 @@ export const GeneralSettings = () => {
     )
 }
 
-const AI_TABS = [
-    { key: "fastModel" as const, label: "Fast Model", title: "Fast Model" },
-    { key: "defaultProvider" as const, label: "Intelligent Model", title: "Intelligent Model (Reasoning & tool use)" },
-];
-
 interface AiSettingsSectionProps {
-    fastModelConfig: ModelConfig;
-    intelligentModelConfig: ModelConfig;
-    onFastModelChange: (config: ModelConfig) => void;
-    onIntelligentModelChange: (config: ModelConfig) => void;
+    aiConfig: SolidAiConfig;
+    onAiConfigChange: (config: SolidAiConfig) => void;
 }
 
-const AiSettingsSection = ({ fastModelConfig, intelligentModelConfig, onFastModelChange, onIntelligentModelChange }: AiSettingsSectionProps) => {
-    const [activeTab, setActiveTab] = useState<"fastModel" | "defaultProvider">("fastModel");
-
-            const tabItems = AI_TABS.map((tab) => {
-                const config = tab.key === "fastModel" ? fastModelConfig : intelligentModelConfig;
-                const onChange = tab.key === "fastModel" ? onFastModelChange : onIntelligentModelChange;
-                return {
-                    value: tab.key,
-                    label: tab.label,
-                    content: (
-                        <div className="space-y-4">
-                            <p className="solid-settings-subheading">
-                                {tab.title}
-                            </p>
-                            <AiModelConfigTab config={config} onChange={onChange} />
-                        </div>
-                    ),
-                };
-            });
+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<"providers" | "default" | "fast">("providers");
+    const [showAddProvider, setShowAddProvider] = useState(false);
+
+    const providers = ensureBuiltInProviders(aiConfig.providers ?? {});
+
+    const tabItems = [
+        {
+            value: "providers" as const,
+            label: "Providers",
+            content: (
+                <ProvidersTab
+                    providers={providers}
+                    onProvidersChange={(newProviders) => {
+                        onAiConfigChange({ ...aiConfig, providers: newProviders });
+                    }}
+                    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 } });
+                    }}
+                />
+            ),
+        },
+        {
+            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 className="space-y-4">
-            <p className="solid-settings-heading">
+        <div>
+            <p className="solid-settings-heading" style={{ marginBottom: "1rem" }}>
                 AI Model Configuration
             </p>
             <SolidTabGroup
                 tabs={tabItems}
                 value={activeTab}
-                onValueChange={(value) => setActiveTab(value as "fastModel" | "defaultProvider")}
+                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

@@ -1,11 +1,37 @@
-export interface ModelConfig {
-    provider: string;
-    availableProviders: any[];
+export interface ModelBehavior {
+    streaming: boolean;
+    custom: string;
 }
-interface Props {
-    config: ModelConfig;
-    onChange: (config: ModelConfig) => void;
+export interface ProviderEntry {
+    type: string;
+    apiKey: string;
+    baseUrl?: string;
 }
-export declare const AiModelConfigTab: ({ config, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export interface ModelEntry {
+    providerId: string;
+    model: string;
+    behavior: ModelBehavior;
+}
+export interface SolidAiConfig {
+    models: {
+        default: ModelEntry;
+        fast: ModelEntry;
+    };
+    providers: Record<string, ProviderEntry>;
+}
+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 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":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,GAAG,EAAE,CAAC;CAC3B;AAED,UAAU,KAAK;IACb,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAOD,eAAO,MAAM,gBAAgB,yBAA0B,KAAK,4CAwD3D,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,52 +9,144 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SolidSelect } from "../../../shad-cn-ui";
-import { OpenAiProviderComponent } from "./OpenAiProviderComponent";
-import { AnthropicProviderComponent } from "./AnthropicProviderComponent";
-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" },
 ];
-export var AiModelConfigTab = function (_a) {
-    var _b;
-    var config = _a.config, onChange = _a.onChange;
-    var profiles = (_b = config.availableProviders) !== null && _b !== void 0 ? _b : [];
-    var provider = config.provider;
-    var handleProviderSelect = function (value) {
-        var exists = profiles.some(function (p) { return p.provider === value; });
-        var newProfiles = exists
-            ? profiles
-            : __spreadArray(__spreadArray([], profiles, true), [{ id: Date.now().toString(), provider: value }], false);
-        onChange(__assign(__assign({}, config), { provider: value, availableProviders: newProfiles }));
-    };
-    var handleProfileUpdate = function (key, value) {
-        var _a;
-        var updatedProfiles;
-        if (profiles.some(function (p) { return p.provider === provider; })) {
-            updatedProfiles = profiles.map(function (p) {
-                var _a;
-                return p.provider === provider ? __assign(__assign({}, p), (_a = {}, _a[key] = value, _a)) : p;
-            });
+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 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 {
-            updatedProfiles = __spreadArray(__spreadArray([], profiles, true), [
-                (_a = { id: Date.now().toString(), provider: provider }, _a[key] = value, _a),
-            ], false);
+            key = providerType;
         }
-        onChange(__assign(__assign({}, config), { availableProviders: updatedProfiles }));
+        // 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 handleRemove = function () {
+        if (!editKey)
+            return;
+        var next = __assign({}, providers);
+        delete next[editKey];
+        onProvidersChange(next);
+        onHide();
+    };
+    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);
     };
-    var currentProfile = profiles.find(function (p) { return p.provider === provider; }) || null;
-    return (_jsxs("div", { className: "ai-model-config-tab", children: [_jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { className: "form-field-label", children: "Provider" }), _jsx(SolidSelect, { className: "w-full", value: provider, options: PROVIDER_OPTIONS, onChange: function (e) { return handleProviderSelect(e.value); }, placeholder: "Select Provider" })] }), provider === "openai" && (_jsx(OpenAiProviderComponent, { profile: currentProfile, onUpdate: handleProfileUpdate })), provider === "anthropic" && (_jsx(AnthropicProviderComponent, { profile: currentProfile, onUpdate: handleProfileUpdate }))] }));
+    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":"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","sourcesContent":["import { SolidSelect } from \"../../../shad-cn-ui\";\nimport { OpenAiProviderComponent } from \"./OpenAiProviderComponent\";\nimport { AnthropicProviderComponent } from \"./AnthropicProviderComponent\";\n\nexport interface ModelConfig {\n  provider: string;\n  availableProviders: any[];\n}\n\ninterface Props {\n  config: ModelConfig;\n  onChange: (config: ModelConfig) => void;\n}\n\nconst PROVIDER_OPTIONS = [\n  { label: \"OpenAI\", value: \"openai\" },\n  { label: \"Anthropic\", value: \"anthropic\" },\n];\n\nexport const AiModelConfigTab = ({ config, onChange }: Props) => {\n  const profiles = config.availableProviders ?? [];\n  const provider = config.provider;\n\n  const handleProviderSelect = (value: string) => {\n    const exists = profiles.some((p: any) => p.provider === value);\n    const newProfiles = exists\n      ? profiles\n      : [...profiles, { id: Date.now().toString(), provider: value }];\n    onChange({ ...config, provider: value, availableProviders: newProfiles });\n  };\n\n  const handleProfileUpdate = (key: string, value: string) => {\n    let updatedProfiles: any[];\n    if (profiles.some((p: any) => p.provider === provider)) {\n      updatedProfiles = profiles.map((p: any) =>\n        p.provider === provider ? { ...p, [key]: value } : p\n      );\n    } else {\n      updatedProfiles = [\n        ...profiles,\n        { id: Date.now().toString(), provider, [key]: value },\n      ];\n    }\n    onChange({ ...config, availableProviders: updatedProfiles });\n  };\n\n  const currentProfile =\n    profiles.find((p: any) => p.provider === provider) || null;\n\n  return (\n    <div className=\"ai-model-config-tab\">\n      <div className=\"flex flex-column gap-2\">\n        <label className=\"form-field-label\">Provider</label>\n        <SolidSelect\n          className=\"w-full\"\n          value={provider}\n          options={PROVIDER_OPTIONS}\n          onChange={(e) => handleProviderSelect(e.value)}\n          placeholder=\"Select Provider\"\n        />\n      </div>\n      {provider === \"openai\" && (\n        <OpenAiProviderComponent\n          profile={currentProfile}\n          onUpdate={handleProfileUpdate}\n        />\n      )}\n      {provider === \"anthropic\" && (\n        <AnthropicProviderComponent\n          profile={currentProfile}\n          onUpdate={handleProfileUpdate}\n        />\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"]}