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

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 { AiModelConfigTab, ModelBehavior, ModelEntry, ProviderConfig, SolidAiConfig } 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: { providerKey: "", behavior: { streaming: false, custom: "" } },
+                    fast: { providerKey: "", 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>
@@ -1010,46 +1027,68 @@ 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)" },
+    { 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 {
-    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 AiSettingsSection = ({ aiConfig, onAiConfigChange }: AiSettingsSectionProps) => {
+    const [activeTab, setActiveTab] = useState<"fast" | "default">("fast");
+
+    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;
+
+        return {
+            value: tab.key,
+            label: tab.label,
+            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 },
+                        });
+                    }}
+                    onProviderConfigChange={(pk, config) => {
+                        onAiConfigChange({
+                            ...aiConfig,
+                            providers: { ...aiConfig.providers, [pk]: config },
+                        });
+                    }}
+                    onBehaviorChange={(newBehavior) => {
+                        onAiConfigChange({
+                            ...aiConfig,
+                            models: { ...aiConfig.models, [tab.key]: { ...modelEntry, behavior: newBehavior } },
+                        });
+                    }}
+                />
+            ),
+        };
+    });
 
     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 "fast" | "default")}
                 tabPosition="left"
             />
         </div>

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

@@ -1,11 +1,33 @@
-export interface ModelConfig {
+export interface ModelBehavior {
+    streaming: boolean;
+    custom: string;
+}
+export interface ProviderConfig {
     provider: string;
-    availableProviders: any[];
+    apiKey: string;
+    model: string;
+    baseUrl?: string;
+}
+export interface ModelEntry {
+    providerKey: string;
+    behavior: ModelBehavior;
+}
+export interface SolidAiConfig {
+    models: {
+        default: ModelEntry;
+        fast: ModelEntry;
+    };
+    providers: Record<string, ProviderConfig>;
 }
 interface Props {
-    config: ModelConfig;
-    onChange: (config: ModelConfig) => void;
+    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 AiModelConfigTab: ({ config, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AiModelConfigTab: ({ providerKey, providerConfig, behavior, allProviders, onProviderKeyChange, onProviderConfigChange, onBehaviorChange, }: Props) => 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":"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"}

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

@@ -9,52 +9,40 @@ 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";
+import { SolidInput, SolidSelect, SolidSwitch, SolidTextarea } from "../../../shad-cn-ui";
 var PROVIDER_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: "" },
+};
 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 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 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 _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);
     };
-    var handleProfileUpdate = function (key, value) {
+    var handleConfigUpdate = 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;
-            });
-        }
-        else {
-            updatedProfiles = __spreadArray(__spreadArray([], profiles, true), [
-                (_a = { id: Date.now().toString(), provider: provider }, _a[key] = value, _a),
-            ], false);
-        }
-        onChange(__assign(__assign({}, config), { availableProviders: updatedProfiles }));
+        onProviderConfigChange(providerKey, __assign(__assign({}, providerConfig), (_a = {}, _a[key] = value, _a)));
+    };
+    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 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("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" })] })] })] })] }));
 };
 //# 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 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"]}

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

@@ -1,76 +1,155 @@
-import { SolidSelect } from "../../../shad-cn-ui";
-import { OpenAiProviderComponent } from "./OpenAiProviderComponent";
-import { AnthropicProviderComponent } from "./AnthropicProviderComponent";
+import React from "react";
+import { SolidInput, SolidSelect, SolidSwitch, SolidTextarea } from "../../../shad-cn-ui";
 
-export interface ModelConfig {
+export interface ModelBehavior {
+  streaming: boolean;
+  custom: string;
+}
+
+export interface ProviderConfig {
   provider: string;
-  availableProviders: any[];
+  apiKey: string;
+  model: string;
+  baseUrl?: string;
+}
+
+export interface ModelEntry {
+  providerKey: string;
+  behavior: ModelBehavior;
+}
+
+export interface SolidAiConfig {
+  models: {
+    default: ModelEntry;
+    fast: ModelEntry;
+  };
+  providers: Record<string, ProviderConfig>;
 }
 
 interface Props {
-  config: ModelConfig;
-  onChange: (config: ModelConfig) => void;
+  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;
 }
 
 const PROVIDER_OPTIONS = [
   { label: "OpenAI", value: "openai" },
   { label: "Anthropic", value: "anthropic" },
+  { label: "OpenAI Compatible", value: "openai-compatible" },
+  { label: "Anthropic Compatible", value: "anthropic-compatible" },
 ];
 
-export const AiModelConfigTab = ({ config, onChange }: Props) => {
-  const profiles = config.availableProviders ?? [];
-  const provider = config.provider;
+const COMPATIBLE_PROVIDERS = ["openai-compatible", "anthropic-compatible"];
+
+const DEFAULT_PROVIDER_CONFIGS: Record<string, ProviderConfig> = {
+  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: "" },
+};
+
+export const AiModelConfigTab = ({
+  providerKey,
+  providerConfig,
+  behavior,
+  allProviders,
+  onProviderKeyChange,
+  onProviderConfigChange,
+  onBehaviorChange,
+}: Props) => {
+  const isCompatible = COMPATIBLE_PROVIDERS.includes(providerKey);
 
   const handleProviderSelect = (value: string) => {
-    const exists = profiles.some((p: any) => p.provider === value);
-    const newProfiles = exists
-      ? profiles
-      : [...profiles, { id: Date.now().toString(), provider: value }];
-    onChange({ ...config, provider: value, availableProviders: newProfiles });
+    const existingConfig = allProviders[value];
+    const newConfig = existingConfig ?? DEFAULT_PROVIDER_CONFIGS[value] ?? { provider: value, apiKey: "", model: "" };
+    onProviderKeyChange(value, newConfig);
   };
 
-  const handleProfileUpdate = (key: string, value: string) => {
-    let updatedProfiles: any[];
-    if (profiles.some((p: any) => p.provider === provider)) {
-      updatedProfiles = profiles.map((p: any) =>
-        p.provider === provider ? { ...p, [key]: value } : p
-      );
-    } else {
-      updatedProfiles = [
-        ...profiles,
-        { id: Date.now().toString(), provider, [key]: value },
-      ];
-    }
-    onChange({ ...config, availableProviders: updatedProfiles });
+  const handleConfigUpdate = (key: keyof ProviderConfig, value: string) => {
+    onProviderConfigChange(providerKey, { ...providerConfig, [key]: value });
   };
 
-  const currentProfile =
-    profiles.find((p: any) => p.provider === provider) || null;
+  const cardStyle: React.CSSProperties = {
+    border: "1px solid var(--solid-border-color, #e2e8f0)",
+    borderRadius: "0.5rem",
+    padding: "1.25rem",
+    background: "var(--solid-card-bg, var(--solid-surface-bg, transparent))",
+  };
 
   return (
-    <div className="ai-model-config-tab">
-      <div className="flex flex-column gap-2">
-        <label className="form-field-label">Provider</label>
-        <SolidSelect
-          className="w-full"
-          value={provider}
-          options={PROVIDER_OPTIONS}
-          onChange={(e) => handleProviderSelect(e.value)}
-          placeholder="Select Provider"
-        />
+    <div className="flex flex-column gap-4">
+      <div style={cardStyle}>
+        <p className="solid-settings-subheading">Provider Config</p>
+        <div className="flex flex-column gap-3 mt-3">
+          <div className="flex flex-column gap-2">
+            <label className="form-field-label">Provider</label>
+            <SolidSelect
+              className="w-full"
+              value={providerKey}
+              options={PROVIDER_OPTIONS}
+              onChange={(e) => handleProviderSelect(e.value)}
+              placeholder="Select Provider"
+            />
+          </div>
+          {isCompatible && (
+            <div className="flex flex-column gap-2">
+              <label className="form-field-label">Base URL</label>
+              <SolidInput
+                placeholder="http://localhost:8000"
+                value={providerConfig?.baseUrl || ""}
+                onChange={(e) => handleConfigUpdate("baseUrl", e.target.value)}
+                className="w-full"
+              />
+            </div>
+          )}
+          <div className="flex flex-column gap-2">
+            <label className="form-field-label">API Key</label>
+            <SolidInput
+              type="password"
+              className="w-full"
+              value={providerConfig?.apiKey || ""}
+              onChange={(e) => handleConfigUpdate("apiKey", e.target.value)}
+            />
+          </div>
+          <div className="flex flex-column gap-2">
+            <label className="form-field-label">Model</label>
+            <SolidInput
+              placeholder="e.g. gpt-4o-mini"
+              value={providerConfig?.model || ""}
+              onChange={(e) => handleConfigUpdate("model", e.target.value)}
+              className="w-full"
+            />
+          </div>
+        </div>
       </div>
-      {provider === "openai" && (
-        <OpenAiProviderComponent
-          profile={currentProfile}
-          onUpdate={handleProfileUpdate}
-        />
-      )}
-      {provider === "anthropic" && (
-        <AnthropicProviderComponent
-          profile={currentProfile}
-          onUpdate={handleProfileUpdate}
-        />
-      )}
+
+      <div style={cardStyle}>
+        <p className="solid-settings-subheading">Behavior</p>
+        <div className="flex flex-column gap-3 mt-3">
+          <div className="flex align-items-center gap-2">
+            <SolidSwitch
+              checked={behavior.streaming}
+              onChange={(val) => onBehaviorChange({ ...behavior, streaming: val })}
+            />
+            <label className="form-field-label" style={{ marginBottom: 0 }}>Streaming</label>
+          </div>
+          <div className="flex flex-column gap-2">
+            <label className="form-field-label">Custom Params (JSON)</label>
+            <SolidTextarea
+              value={behavior.custom}
+              onChange={(e) => onBehaviorChange({ ...behavior, custom: e.target.value })}
+              placeholder='{ "temperature": 0.7, "maxTokens": 1000 }'
+              rows={4}
+              className="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
     </div>
   );
 };

package/dist/components/core/chatter/SolidChatter.d.ts

@@ -1,9 +1,10 @@
-export declare const SolidChatter: ({ modelSingularName, id, refreshChatterMessage, setRefreshChatterMessage, actionsAllowed, title }: {
+export declare const SolidChatter: ({ modelSingularName, id, refreshChatterMessage, setRefreshChatterMessage, actionsAllowed, title, modelUserKey }: {
     modelSingularName: any;
     id: any;
     refreshChatterMessage: boolean;
     setRefreshChatterMessage: (value: boolean) => void;
     actionsAllowed?: string[] | undefined;
     title?: string | undefined;
+    modelUserKey?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidChatter.d.ts.map

package/dist/components/core/chatter/SolidChatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidChatter.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidChatter.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY;uBAAiI,GAAG;QAAM,GAAG;2BAAyB,OAAO;sCAAoC,OAAO,KAAK,IAAI;;;6CAqPzP,CAAA"}
+{"version":3,"file":"SolidChatter.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidChatter.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY;uBAA+I,GAAG;QAAM,GAAG;2BAAyB,OAAO;sCAAoC,OAAO,KAAK,IAAI;;;;6CAsPvQ,CAAA"}

package/dist/components/core/chatter/SolidChatter.js

@@ -46,7 +46,7 @@ import { permissionExpression } from '../../../helpers/permissions';
 import { SolidButton, SolidMessage } from '../../shad-cn-ui';
 import { Inbox, Loader2 } from 'lucide-react';
 export var SolidChatter = function (_a) {
-    var modelSingularName = _a.modelSingularName, id = _a.id, refreshChatterMessage = _a.refreshChatterMessage, setRefreshChatterMessage = _a.setRefreshChatterMessage, _b = _a.actionsAllowed, actionsAllowed = _b === void 0 ? [] : _b, title = _a.title;
+    var modelSingularName = _a.modelSingularName, id = _a.id, refreshChatterMessage = _a.refreshChatterMessage, setRefreshChatterMessage = _a.setRefreshChatterMessage, _b = _a.actionsAllowed, actionsAllowed = _b === void 0 ? [] : _b, title = _a.title, modelUserKey = _a.modelUserKey;
     var _c = useState('email-message'), activeTab = _c[0], setActiveTab = _c[1];
     var _d = useState(null), visibleBox = _d[0], setVisibleBox = _d[1];
     var _e = useState([]), messages = _e[0], setMessages = _e[1];
@@ -206,7 +206,7 @@ export var SolidChatter = function (_a) {
                 var showDateDivider = index === 0 || message.date !== messages[index - 1].date;
                 return (_jsxs("div", { children: [showDateDivider && _jsx(SolidChatterDateDivider, { date: message.date }), _jsx(SolidChatterMessageBox, { user: message.user, messageType: message.messageType, message: message.message, time: message.time, auditRecord: message.auditRecord, media: message.media, messageSubType: message.messageSubType, modelDisplayName: message.modelDisplayName, modelUserKey: message.modelUserKey })] }, message.id));
             }), totalRecords > messages.length && (_jsx("div", { className: 'flex justify-content-center', children: _jsx(SolidButton, { type: 'button', size: 'sm', variant: 'outline', onClick: handleLoadMore, children: "Load more" }) }))] })); };
-    return (_jsxs("div", { className: 'h-full', children: [_jsx(SolidChatterHeader, { id: id, refetch: fetchData, modelSingularName: modelSingularName, activeTab: activeTab, handleTabClick: handleTabClick, visibleBox: visibleBox, onFilterChange: handleFilterChange, onComposerCancel: function () { return setVisibleBox(null); }, title: title }), _jsx("div", { className: 'solid-chatter-body', style: {
+    return (_jsxs("div", { className: 'h-full', children: [_jsx(SolidChatterHeader, { id: id, refetch: fetchData, modelSingularName: modelSingularName, activeTab: activeTab, handleTabClick: handleTabClick, visibleBox: visibleBox, onFilterChange: handleFilterChange, onComposerCancel: function () { return setVisibleBox(null); }, title: title, modelUserKey: modelUserKey }), _jsx("div", { className: 'solid-chatter-body', style: {
                     height: visibleBox === 'email-message'
                         ? 'calc(100vh - 196px)'
                         : visibleBox === 'log'