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

package/dist/components/common/GeneralSettings.js

@@ -48,6 +48,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormik } from 'formik';
 import { useCallback, useEffect, useState } from 'react';
+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';
@@ -58,21 +60,22 @@ import { useDropzone } from 'react-dropzone';
 import { SettingDropzoneActivePlaceholder } from './SolidSettings/SettingDropzoneActivePlaceholder';
 import { SolidUploadedImage } from './SolidSettings/SolidUploadedImage';
 import { SettingsImageRemoveButton } from './SolidSettings/SettingsImageRemoveButton';
-import { AiModelConfigTab } from './SolidSettings/LlmSettings/AiModelConfigTab';
+import { ModelConfigTab, ProvidersTab, ensureBuiltInProviders } from './SolidSettings/LlmSettings/AiModelConfigTab';
 import { useDispatch } from 'react-redux';
 import { ERROR_MESSAGES } from '../../constants/error-messages';
 import { useBulkUpdateSolidSettingsMutation, useLazyGetSolidSettingsQuery } from '../../redux/api/solidSettingsApi';
 import { env } from "../../adapters/env";
 import { showToast } from '../../redux/features/toastSlice';
 export var GeneralSettings = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46;
-    var _47 = useState(null), appLogoPreview = _47[0], setAppLogoPreview = _47[1];
-    var _48 = useState(null), companyLogoPreview = _48[0], setCompanyLogoPreview = _48[1];
-    var _49 = useState(null), authScreenRightBackgroundImagePreview = _49[0], setAuthScreenRightBackgroundImagePreview = _49[1];
-    var _50 = useState(null), authScreenLeftBackgroundImagePreview = _50[0], setAuthScreenLeftBackgroundImagePreview = _50[1];
-    var _51 = useState(null), authScreenCenterBackgroundImagePreview = _51[0], setAuthScreenCenterBackgroundImagePreview = _51[1];
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45;
+    var session = useSession().data;
+    var _46 = useState(null), appLogoPreview = _46[0], setAppLogoPreview = _46[1];
+    var _47 = useState(null), companyLogoPreview = _47[0], setCompanyLogoPreview = _47[1];
+    var _48 = useState(null), authScreenRightBackgroundImagePreview = _48[0], setAuthScreenRightBackgroundImagePreview = _48[1];
+    var _49 = useState(null), authScreenLeftBackgroundImagePreview = _49[0], setAuthScreenLeftBackgroundImagePreview = _49[1];
+    var _50 = useState(null), authScreenCenterBackgroundImagePreview = _50[0], setAuthScreenCenterBackgroundImagePreview = _50[1];
     var dispatch = useDispatch();
-    var _52 = useLazyGetSolidSettingsQuery(), trigger = _52[0], solidSettingsData = _52[1].data;
+    var _51 = useLazyGetSolidSettingsQuery(), trigger = _51[0], solidSettingsData = _51[1].data;
     useEffect(function () {
         trigger(""); // Fetch settings on mount
     }, [trigger]);
@@ -110,10 +113,26 @@ export var GeneralSettings = function () {
         authScreenRightBackgroundImage: (_29 = (_28 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _28 === void 0 ? void 0 : _28.authScreenRightBackgroundImage) !== null && _29 !== void 0 ? _29 : null,
         authScreenLeftBackgroundImage: (_31 = (_30 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _30 === void 0 ? void 0 : _30.authScreenLeftBackgroundImage) !== null && _31 !== void 0 ? _31 : null,
         authScreenCenterBackgroundImage: (_33 = (_32 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _32 === void 0 ? void 0 : _32.authScreenCenterBackgroundImage) !== null && _33 !== void 0 ? _33 : null,
-        solidXGenAiCodeBuilderConfig: (_35 = (_34 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _34 === void 0 ? void 0 : _34.solidXGenAiCodeBuilderConfig) !== null && _35 !== void 0 ? _35 : {
-            fastModel: { provider: "", availableProviders: [] },
-            defaultProvider: { provider: "", availableProviders: [] },
-        }
+        solidXGenAiCodeBuilderConfig: (function () {
+            var _a;
+            var defaultAiConfig = {
+                models: {
+                    default: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
+                    fast: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
+                },
+                providers: {},
+            };
+            var raw = (_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.solidXGenAiCodeBuilderConfig;
+            if (!raw)
+                return defaultAiConfig;
+            try {
+                var parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+                return (parsed && typeof parsed === "object" ? parsed : defaultAiConfig);
+            }
+            catch (_b) {
+                return defaultAiConfig;
+            }
+        })(),
         // llmProvider: solidSettingsData?.data?.llmProvider ?? null,
         // llModelName: solidSettingsData?.data?.llModelName ?? null,
         // llmProviderApiKey: solidSettingsData?.data?.llmProviderApiKey ?? null,
@@ -226,7 +245,7 @@ export var GeneralSettings = function () {
             setCompanyLogoPreview(URL.createObjectURL(file));
         }
     }, [formik]);
-    var _53 = useDropzone({
+    var _52 = useDropzone({
         accept: {
             'image/png': ['.png'],
             'image/jpeg': ['.jpeg', '.jpg'],
@@ -235,8 +254,8 @@ export var GeneralSettings = function () {
         },
         multiple: false,
         onDrop: onAppLogoDrop
-    }), getAppLogoRootProps = _53.getRootProps, getAppLogoInputProps = _53.getInputProps, isAppLogoDragActive = _53.isDragActive;
-    var _54 = useDropzone({
+    }), getAppLogoRootProps = _52.getRootProps, getAppLogoInputProps = _52.getInputProps, isAppLogoDragActive = _52.isDragActive;
+    var _53 = useDropzone({
         accept: {
             'image/png': ['.png'],
             'image/jpeg': ['.jpeg', '.jpg'],
@@ -245,7 +264,7 @@ export var GeneralSettings = function () {
         },
         multiple: false,
         onDrop: onCompanyLogoDrop
-    }), getCompanyLogoRootProps = _54.getRootProps, getCompanyLogoInputProps = _54.getInputProps, isCompanyLogoDragActive = _54.isDragActive;
+    }), getCompanyLogoRootProps = _53.getRootProps, getCompanyLogoInputProps = _53.getInputProps, isCompanyLogoDragActive = _53.isDragActive;
     var removeAppLogo = function () {
         formik.setFieldValue("appLogo", null);
         if (appLogoPreview) {
@@ -293,7 +312,7 @@ export var GeneralSettings = function () {
             setAuthScreenCenterBackgroundImagePreview(URL.createObjectURL(file));
         }
     }, [formik]);
-    var _55 = useDropzone({
+    var _54 = useDropzone({
         accept: {
             'image/png': ['.png'],
             'image/jpeg': ['.jpeg', '.jpg'],
@@ -302,8 +321,8 @@ export var GeneralSettings = function () {
         },
         multiple: false,
         onDrop: onAuthScreenRightBackgroundImageDrop
-    }), getAuthScreenRightBackgroundImageRootProps = _55.getRootProps, getAuthScreenRightBackgroundImageInputProps = _55.getInputProps, isAuthScreenRightBackgroundImageDragActive = _55.isDragActive;
-    var _56 = useDropzone({
+    }), getAuthScreenRightBackgroundImageRootProps = _54.getRootProps, getAuthScreenRightBackgroundImageInputProps = _54.getInputProps, isAuthScreenRightBackgroundImageDragActive = _54.isDragActive;
+    var _55 = useDropzone({
         accept: {
             'image/png': ['.png'],
             'image/jpeg': ['.jpeg', '.jpg'],
@@ -312,8 +331,8 @@ export var GeneralSettings = function () {
         },
         multiple: false,
         onDrop: onAuthScreenLeftBackgroundImageDrop
-    }), getAuthScreenLeftBackgroundImageRootProps = _56.getRootProps, getAuthScreenLeftBackgroundImageInputProps = _56.getInputProps, isAuthScreenLeftBackgroundImageDragActive = _56.isDragActive;
-    var _57 = useDropzone({
+    }), getAuthScreenLeftBackgroundImageRootProps = _55.getRootProps, getAuthScreenLeftBackgroundImageInputProps = _55.getInputProps, isAuthScreenLeftBackgroundImageDragActive = _55.isDragActive;
+    var _56 = useDropzone({
         accept: {
             'image/png': ['.png'],
             'image/jpeg': ['.jpeg', '.jpg'],
@@ -322,7 +341,7 @@ export var GeneralSettings = function () {
         },
         multiple: false,
         onDrop: onAuthScreenCenterBackgroundImageDrop
-    }), getAuthScreenCenterBackgroundImageRootProps = _57.getRootProps, getAuthScreenCenterBackgroundImageInputProps = _57.getInputProps, isAuthScreenCenterBackgroundImageDragActive = _57.isDragActive;
+    }), getAuthScreenCenterBackgroundImageRootProps = _56.getRootProps, getAuthScreenCenterBackgroundImageInputProps = _56.getInputProps, isAuthScreenCenterBackgroundImageDragActive = _56.isDragActive;
     var removeAuthScreenRightBackgroundImage = function () {
         formik.setFieldValue("authScreenRightBackgroundImage", null);
         if (authScreenRightBackgroundImagePreview) {
@@ -344,9 +363,8 @@ export var GeneralSettings = function () {
             setAuthScreenCenterBackgroundImagePreview(null);
         }
     };
-    var handleModelConfigChange = function (modelType, config) {
-        var _a;
-        formik.setFieldValue("solidXGenAiCodeBuilderConfig", __assign(__assign({}, formik.values.solidXGenAiCodeBuilderConfig), (_a = {}, _a[modelType] = config, _a)));
+    var handleAiConfigChange = function (newConfig) {
+        formik.setFieldValue("solidXGenAiCodeBuilderConfig", newConfig);
     };
     return (_jsx("div", { className: "page-parent-wrapper", children: _jsx("div", { className: "solid-form-wrapper", children: _jsx("div", { className: "solid-form-section", children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [_jsxs("div", { className: "page-header secondary-border-bottom", children: [_jsx("div", { className: "form-wrapper-title ", children: "Settings" }), _jsx("div", { className: "gap-3 flex", children: formik.dirty && (_jsx(SolidButton, { size: "sm", type: "submit", loading: formik.isSubmitting, onClick: function () { return showError(); }, children: "Save" })) })] }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content", children: [pathname.includes("app-settings") &&
                                     _jsxs(_Fragment, { children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsxs("div", { className: "col-12 md:col-6", children: [_jsx("p", { className: "solid-settings-subheading", children: "App Logo" }), _jsxs("div", { children: [_jsxs("div", __assign({}, getAppLogoRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAppLogoInputProps())), _jsx(SettingDropzoneActivePlaceholder, {})] })), _jsx("div", { className: "mt-2", children: (function () {
@@ -376,7 +394,7 @@ export var GeneralSettings = function () {
                                                                                 })() }), formik.values.companylogo && (_jsx(SettingsImageRemoveButton, { onClick: removeCompanyLogo }))] })] })] }) }) }), _jsx("p", { className: "solid-settings-heading", children: "App Logo Position" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "flex", children: _jsx(SolidSegmentedControl, { className: "solid-settings-segmented", value: formik.values.appLogoPosition, options: [
                                                                 { value: "in_form_view", label: "In Form View" },
                                                                 { value: "in_image_view", label: "In Image View" },
-                                                            ], onChange: function (value) { return formik.setFieldValue("appLogoPosition", value); } }) }) }) }), _jsx(SolidDivider, { className: "my-4" }), _jsx("p", { className: "solid-settings-heading", children: "Title & Description Details" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Show Details on Authentication Screen" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "showAuthContent", checked: formik.values.showAuthContent, onChange: function (checked) { return formik.setFieldValue("showAuthContent", checked); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Title" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appTitle", name: "appTitle", onChange: formik.handleChange, value: (_36 = formik.values.appTitle) !== null && _36 !== void 0 ? _36 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Subtitle" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appSubtitle", name: "appSubtitle", onChange: formik.handleChange, value: (_37 = formik.values.appSubtitle) !== null && _37 !== void 0 ? _37 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Description" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidTextarea, { rows: 3, id: "appDescription", name: "appDescription", onChange: formik.handleChange, value: (_38 = formik.values.appDescription) !== null && _38 !== void 0 ? _38 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Copyright" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidTextarea, { rows: 3, id: "copyright", name: "copyright", onChange: formik.handleChange, value: (_39 = formik.values.copyright) !== null && _39 !== void 0 ? _39 : '', className: 'w-full' }) })] }) })] }) }) }), _jsx(SolidDivider, { className: "my-4" }), _jsx("p", { className: "solid-settings-heading", children: "Legal Links" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Show Legal Links" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "showLegalLinks", checked: formik.values.showLegalLinks, onChange: function (checked) { return formik.setFieldValue("showLegalLinks", checked); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 py-2 md:py-0", children: _jsx("label", { className: "form-field-label", children: "Terms and Conditions Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appTnc", name: "appTnc", onChange: formik.handleChange, value: (_40 = formik.values.appTnc) !== null && _40 !== void 0 ? _40 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Privacy Policy Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appPrivacyPolicy", name: "appPrivacyPolicy", onChange: formik.handleChange, value: (_41 = formik.values.appPrivacyPolicy) !== null && _41 !== void 0 ? _41 : '', className: 'w-full' }) })] }) })] }) }) }), _jsx(SolidDivider, { className: "my-4" }), _jsx("p", { className: "solid-settings-heading", children: "Theme" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-10 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Enable Dark Mode" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "enableDarkMode", checked: formik.values.enableDarkMode, onChange: function (checked) { return formik.setFieldValue("enableDarkMode", checked); } }) })] }) }) }) }) })] }), pathname.includes("authentication-settings") &&
+                                                            ], onChange: function (value) { return formik.setFieldValue("appLogoPosition", value); } }) }) }) }), _jsx(SolidDivider, { className: "my-4" }), _jsx("p", { className: "solid-settings-heading", children: "Title & Description Details" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Show Details on Authentication Screen" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "showAuthContent", checked: formik.values.showAuthContent, onChange: function (checked) { return formik.setFieldValue("showAuthContent", checked); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Title" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appTitle", name: "appTitle", onChange: formik.handleChange, value: (_34 = formik.values.appTitle) !== null && _34 !== void 0 ? _34 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Subtitle" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appSubtitle", name: "appSubtitle", onChange: formik.handleChange, value: (_35 = formik.values.appSubtitle) !== null && _35 !== void 0 ? _35 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Description" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidTextarea, { rows: 3, id: "appDescription", name: "appDescription", onChange: formik.handleChange, value: (_36 = formik.values.appDescription) !== null && _36 !== void 0 ? _36 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Copyright" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidTextarea, { rows: 3, id: "copyright", name: "copyright", onChange: formik.handleChange, value: (_37 = formik.values.copyright) !== null && _37 !== void 0 ? _37 : '', className: 'w-full' }) })] }) })] }) }) }), _jsx(SolidDivider, { className: "my-4" }), _jsx("p", { className: "solid-settings-heading", children: "Legal Links" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Show Legal Links" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "showLegalLinks", checked: formik.values.showLegalLinks, onChange: function (checked) { return formik.setFieldValue("showLegalLinks", checked); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 py-2 md:py-0", children: _jsx("label", { className: "form-field-label", children: "Terms and Conditions Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appTnc", name: "appTnc", onChange: formik.handleChange, value: (_38 = formik.values.appTnc) !== null && _38 !== void 0 ? _38 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Privacy Policy Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "appPrivacyPolicy", name: "appPrivacyPolicy", onChange: formik.handleChange, value: (_39 = formik.values.appPrivacyPolicy) !== null && _39 !== void 0 ? _39 : '', className: 'w-full' }) })] }) })] }) }) }), _jsx(SolidDivider, { className: "my-4" }), _jsx("p", { className: "solid-settings-heading", children: "Theme" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-10 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Enable Dark Mode" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "enableDarkMode", checked: formik.values.enableDarkMode, onChange: function (checked) { return formik.setFieldValue("enableDarkMode", checked); } }) })] }) }) }) }) })] }), pathname.includes("authentication-settings") &&
                                     _jsxs(_Fragment, { children: [_jsx("p", { className: "solid-settings-heading", children: "User Authentication" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Public Registration" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "allowPublicRegistration", checked: formik.values.allowPublicRegistration, onChange: function (checked) { return formik.setFieldValue("allowPublicRegistration", checked); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Based Authentication" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "passwordBasedAuth", checked: formik.values.passwordBasedAuth, onChange: function (checked) { return formik.setFieldValue("passwordBasedAuth", checked); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Authentication" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "passwordLessAuth", checked: formik.values.passwordLessAuth, onChange: function (checked) { return formik.setFieldValue("passwordLessAuth", checked); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Auto Activate User on Registration " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "activateUserOnRegistration", checked: formik.values.activateUserOnRegistration, onChange: function (checked) { return formik.setFieldValue("activateUserOnRegistration", checked); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Allow Login/ Signup with Google " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "iamGoogleOAuthEnabled", checked: formik.values.iamGoogleOAuthEnabled, onChange: function (checked) { return formik.setFieldValue("iamGoogleOAuthEnabled", checked); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Force Password change on first Login " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(SolidSwitch, { name: "forceChangePasswordOnFirstLogin", checked: formik.values.forceChangePasswordOnFirstLogin, onChange: function (checked) { return formik.setFieldValue("forceChangePasswordOnFirstLogin", checked); } }) })] }) }), formik.values.passwordLessAuth === true &&
                                                                 _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 sm:col-12 lg:col-5 xl:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Registration Method" }) }), _jsx("div", { className: 'col-12 sm:col-12 lg:col-6 xl:col-6', children: _jsx(SolidSegmentedControl, { className: "solid-settings-segmented mt-3 lg:mt-0", value: formik.values.passwordlessRegistrationValidateWhat, options: [
                                                                                         { value: "email", label: "Email" },
@@ -429,30 +447,46 @@ export var GeneralSettings = function () {
                                                                                         src = "".concat(env("API_URL"), "/").concat(src);
                                                                                     }
                                                                                     return (_jsx(SolidUploadedImage, { src: src, height: 300, width: 600, maxHeight: 300 }));
-                                                                                })() }), formik.values.authScreenCenterBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenCenterBackgroundImage }))] })] }) }) }) }), _jsx(SolidDivider, { className: "my-4" }), ((_42 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _42 === void 0 ? void 0 : _42.enableDarkMode) === true &&
+                                                                                })() }), formik.values.authScreenCenterBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenCenterBackgroundImage }))] })] }) }) }) }), _jsx(SolidDivider, { className: "my-4" }), ((_40 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _40 === void 0 ? void 0 : _40.enableDarkMode) === true &&
                                                 _jsxs(_Fragment, { children: [_jsx("p", { className: "solid-settings-heading", children: "Authentication Screen Theme" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx(SolidSegmentedControl, { className: "solid-settings-segmented", value: formik.values.authPagesTheme, options: [
                                                                         { value: "light", label: "Solid Light" },
                                                                         { value: "dark", label: "Solid Dark" },
                                                                     ], onChange: function (value) { return formik.setFieldValue("authPagesTheme", value); } }) }) })] })] }), pathname.includes("misc-settings") &&
-                                    _jsxs(_Fragment, { children: [_jsx("p", { className: "solid-settings-heading", children: "Contact Support" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: "col-12 lg:col-10 xl:col-8", children: _jsxs("div", { className: 'formgrid grid', children: [_jsx("div", { className: "col-12 md:col-6 pb-3 md:pb-0", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Contact Support Email" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "contactSupportEmail", name: "contactSupportEmail", onChange: formik.handleChange, value: (_43 = formik.values.contactSupportEmail) !== null && _43 !== void 0 ? _43 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Display Name" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "contactSupportDisplayName", name: "contactSupportDisplayName", onChange: formik.handleChange, value: (_44 = formik.values.contactSupportDisplayName) !== null && _44 !== void 0 ? _44 : '', className: 'w-full' }) })] }) })] }) }) })] }), pathname.includes("ai-settings") &&
-                                    _jsx(AiSettingsSection, { fastModelConfig: (_45 = formik.values.solidXGenAiCodeBuilderConfig.fastModel) !== null && _45 !== void 0 ? _45 : { provider: "", availableProviders: [] }, intelligentModelConfig: (_46 = formik.values.solidXGenAiCodeBuilderConfig.defaultProvider) !== null && _46 !== void 0 ? _46 : { provider: "", availableProviders: [] }, onFastModelChange: function (config) { return handleModelConfigChange("fastModel", config); }, onIntelligentModelChange: function (config) { return handleModelConfigChange("defaultProvider", config); } })] })] }) }) }) }));
+                                    _jsxs(_Fragment, { children: [_jsx("p", { className: "solid-settings-heading", children: "Contact Support" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: "col-12 lg:col-10 xl:col-8", children: _jsxs("div", { className: 'formgrid grid', children: [_jsx("div", { className: "col-12 md:col-6 pb-3 md:pb-0", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Contact Support Email" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "contactSupportEmail", name: "contactSupportEmail", onChange: formik.handleChange, value: (_41 = formik.values.contactSupportEmail) !== null && _41 !== void 0 ? _41 : '', className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Display Name" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(SolidInput, { type: "text", id: "contactSupportDisplayName", name: "contactSupportDisplayName", onChange: formik.handleChange, value: (_42 = formik.values.contactSupportDisplayName) !== null && _42 !== void 0 ? _42 : '', className: 'w-full' }) })] }) })] }) }) })] }), pathname.includes("ai-settings") &&
+                                    _jsx(AiSettingsSection, { aiConfig: formik.values.solidXGenAiCodeBuilderConfig, onAiConfigChange: handleAiConfigChange }), pathname.includes("api-keys") && ((_43 = session === null || session === void 0 ? void 0 : session.user) === null || _43 === void 0 ? void 0 : _43.id) &&
+                                    _jsx(ApiKeysTab, { userId: session.user.id, canCreate: (_45 = (_44 = session === null || session === void 0 ? void 0 : session.user) === null || _44 === void 0 ? void 0 : _44.isAllowedToGenerateApiKeys) !== null && _45 !== void 0 ? _45 : false })] })] }) }) }) }));
 };
-var AI_TABS = [
-    { key: "fastModel", label: "Fast Model", title: "Fast Model" },
-    { key: "defaultProvider", label: "Intelligent Model", title: "Intelligent Model (Reasoning & tool use)" },
-];
+var DEFAULT_BEHAVIOR = { streaming: false, custom: "" };
+var DEFAULT_MODEL_ENTRY = { providerId: "", model: "", behavior: DEFAULT_BEHAVIOR };
 var AiSettingsSection = function (_a) {
-    var fastModelConfig = _a.fastModelConfig, intelligentModelConfig = _a.intelligentModelConfig, onFastModelChange = _a.onFastModelChange, onIntelligentModelChange = _a.onIntelligentModelChange;
-    var _b = useState("fastModel"), activeTab = _b[0], setActiveTab = _b[1];
-    var tabItems = AI_TABS.map(function (tab) {
-        var config = tab.key === "fastModel" ? fastModelConfig : intelligentModelConfig;
-        var onChange = tab.key === "fastModel" ? onFastModelChange : onIntelligentModelChange;
-        return {
-            value: tab.key,
-            label: tab.label,
-            content: (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "solid-settings-subheading", children: tab.title }), _jsx(AiModelConfigTab, { config: config, onChange: onChange })] })),
-        };
-    });
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "solid-settings-heading", children: "AI Model Configuration" }), _jsx(SolidTabGroup, { tabs: tabItems, value: activeTab, onValueChange: function (value) { return setActiveTab(value); }, tabPosition: "left" })] }));
+    var _b, _c, _d, _e, _f;
+    var aiConfig = _a.aiConfig, onAiConfigChange = _a.onAiConfigChange;
+    var _g = useState("providers"), activeTab = _g[0], setActiveTab = _g[1];
+    var _h = useState(false), showAddProvider = _h[0], setShowAddProvider = _h[1];
+    var providers = ensureBuiltInProviders((_b = aiConfig.providers) !== null && _b !== void 0 ? _b : {});
+    var tabItems = [
+        {
+            value: "providers",
+            label: "Providers",
+            content: (_jsx(ProvidersTab, { providers: providers, onProvidersChange: function (newProviders) {
+                    onAiConfigChange(__assign(__assign({}, aiConfig), { providers: newProviders }));
+                }, showAddModal: showAddProvider, onAddModalClose: function () { return setShowAddProvider(false); } })),
+        },
+        {
+            value: "default",
+            label: "Intelligent Model",
+            content: (_jsx(ModelConfigTab, { modelEntry: (_d = (_c = aiConfig.models) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : DEFAULT_MODEL_ENTRY, providers: providers, onModelEntryChange: function (entry) {
+                    onAiConfigChange(__assign(__assign({}, aiConfig), { models: __assign(__assign({}, aiConfig.models), { default: entry }) }));
+                } })),
+        },
+        {
+            value: "fast",
+            label: "Fast Model",
+            content: (_jsx(ModelConfigTab, { modelEntry: (_f = (_e = aiConfig.models) === null || _e === void 0 ? void 0 : _e.fast) !== null && _f !== void 0 ? _f : DEFAULT_MODEL_ENTRY, providers: providers, onModelEntryChange: function (entry) {
+                    onAiConfigChange(__assign(__assign({}, aiConfig), { models: __assign(__assign({}, aiConfig.models), { fast: entry }) }));
+                } })),
+        },
+    ];
+    return (_jsxs("div", { children: [_jsx("p", { className: "solid-settings-heading", style: { marginBottom: "1rem" }, children: "AI Model Configuration" }), _jsx(SolidTabGroup, { tabs: tabItems, value: activeTab, onValueChange: function (value) { return setActiveTab(value); }, tabPosition: "left", extra: activeTab === "providers" ? (_jsx(SolidButton, { size: "sm", onClick: function () { return setShowAddProvider(true); }, children: "Add" })) : undefined })] }));
 };
 //# sourceMappingURL=GeneralSettings.js.map