@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.11

package/dist/components/common/GeneralSettings.tsx

@@ -1,24 +1,19 @@
 import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { InputText } from 'primereact/inputtext';
 import { useCallback, useEffect, useState } from 'react'
 import { CancelButton } from './CancelButton';
-import { InputSwitch } from 'primereact/inputswitch';
-import { RadioButton } from 'primereact/radiobutton';
+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 { InputTextarea } from 'primereact/inputtextarea';
 import SolidLogo from '../../resources/images/SolidXLogo.svg'
 import AuthScreenRightBackgroundImage from '../../resources/images/auth/solid-left-layout-bg.png';
 import AuthScreenLeftBackgroundImage from '../../resources/images/auth/solid-right-layout-bg.png';
 import AuthScreenCenterBackgroundImage from '../../resources/images/auth/solid-login-light.png';
 import { useDropzone } from 'react-dropzone';
-import { Divider } from 'primereact/divider';
 import { SettingDropzoneActivePlaceholder } from './SolidSettings/SettingDropzoneActivePlaceholder';
 import { SolidUploadedImage } from './SolidSettings/SolidUploadedImage';
 import { SettingsImageRemoveButton } from './SolidSettings/SettingsImageRemoveButton';
-import { Dropdown } from 'primereact/dropdown';
-import { OpenAiProviderComponent } from './SolidSettings/LlmSettings/OpenAiProviderComponent';
-import { AnthropicProviderComponent } from './SolidSettings/LlmSettings/AnthropicProviderComponent';
+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';
@@ -27,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);
@@ -73,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 ?? {
-            defaultProvider: "",
-            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,
@@ -91,13 +100,6 @@ export const GeneralSettings = () => {
         onSubmit: async (values) => {
             try {
 
-                const profiles = values.solidXGenAiCodeBuilderConfig.availableProviders;
-                console.log("profiles", profiles);
-                // ✅ Only set defaultProvider if it's empty AND there is at least one profile
-                if (!values.solidXGenAiCodeBuilderConfig.defaultProvider && profiles && profiles.length > 0) {
-                    values.solidXGenAiCodeBuilderConfig.defaultProvider = profiles[0].provider;
-                }
-
                 const updatedSettingsArray: Array<{ key: string; value: string; type: string }> = [];
                 const currentSettings = solidSettingsData || {};
 
@@ -353,68 +355,10 @@ export const GeneralSettings = () => {
 
 
 
-    // const [currentProfile, setcurrentProfile] = useState<string>("");
-
-    const handleProviderSelect = (value: string) => {
-        // 🔄 Add profile if doesn't exist
-        const profiles = formik.values.solidXGenAiCodeBuilderConfig.availableProviders;
-        const exists = profiles.some((p: any) => p.provider === value);
-
-        const newProfiles = exists
-            ? profiles
-            : [
-                ...profiles,
-                {
-                    id: Date.now().toString(),
-                    provider: ""
-                },
-            ];
-
-
-        formik.setFieldValue("solidXGenAiCodeBuilderConfig.defaultProvider", value);
-        formik.setFieldValue("solidXGenAiCodeBuilderConfig.availableProviders", newProfiles);
+    const handleAiConfigChange = (newConfig: SolidAiConfig) => {
+        formik.setFieldValue("solidXGenAiCodeBuilderConfig", newConfig);
     };
 
-    const handleProfileUpdate = (key: string, value: string) => {
-        const config = formik.values.solidXGenAiCodeBuilderConfig ?? {
-            availableProviders: [],
-            defaultProvider: "",
-        };
-
-        const profiles = config.availableProviders ?? [];
-        const defaultProvider = config.defaultProvider;
-
-        let updatedProfiles: any[];
-
-        // ✅ If profile exists → update it immutably
-        if (profiles.some((p: any) => p.provider === defaultProvider)) {
-            updatedProfiles = profiles.map((p: any) =>
-                p.provider === defaultProvider ? { ...p, [key]: value } : p
-            );
-        } else {
-            // ✅ If profile doesn't exist → create it and set this key
-            updatedProfiles = [
-                ...profiles,
-                {
-                    id: Date.now().toString(),
-                    provider: defaultProvider,
-                    [key]: value,
-                },
-            ];
-        }
-
-        // ✅ New array reference → Formik dirty check will pass
-        formik.setFieldValue(
-            "solidXGenAiCodeBuilderConfig.availableProviders",
-            updatedProfiles
-        );
-    };
-
-    const currentProfile =
-        (formik.values.solidXGenAiCodeBuilderConfig.availableProviders ?? []).find(
-            (p: any) => p.provider === formik.values.solidXGenAiCodeBuilderConfig.defaultProvider
-        ) || null;
-
 
     return (
         <div className="page-parent-wrapper">
@@ -424,10 +368,12 @@ export const GeneralSettings = () => {
                         <div className="page-header secondary-border-bottom">
                             <div className="form-wrapper-title ">Settings</div>
                             <div className="gap-3 flex">
-                                {formik.dirty &&
-                                    <Button label="Save" size="small" onClick={() => showError()} type="submit" />
-                                }
-                                <CancelButton />
+                                {formik.dirty && (
+                                    <SolidButton size="sm" type="submit" loading={formik.isSubmitting} onClick={() => showError()}>
+                                        Save
+                                    </SolidButton>
+                                )}
+                                {/* <CancelButton /> */}
                             </div>
                         </div>
                         <div className="px-4 py-3 md:p-4 solid-form-content">
@@ -437,7 +383,7 @@ export const GeneralSettings = () => {
                                         <div className='col-12 lg:col-10 xl:col-8'>
                                             <div className="formgrid grid">
                                                 <div className="col-12 md:col-6">
-                                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo </p>
+                                                    <p className="solid-settings-subheading">App Logo</p>
                                                     <div>
                                                         <div {...getAppLogoRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
                                                             <input {...getAppLogoInputProps()} />
@@ -471,7 +417,7 @@ export const GeneralSettings = () => {
                                                     </div>
                                                 </div>
                                                 <div className="col-12 md:col-6">
-                                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Company Logo </p>
+                                                    <p className="solid-settings-subheading">Company Logo</p>
                                                     <div>
                                                         <div {...getCompanyLogoRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
                                                             <input {...getCompanyLogoInputProps()} />
@@ -508,35 +454,24 @@ export const GeneralSettings = () => {
                                             </div>
                                         </div>
                                     </div>
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo Position</p>
+                                    <p className="solid-settings-heading">App Logo Position</p>
                                     <div className='formgrid grid'>
                                         <div className='col-12 lg:col-10 xl:col-8'>
-                                            <div className="flex align-items-center gap-3">
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="appLogoPosition-in_form_view"
-                                                        name="appLogoPosition"
-                                                        value="in_form_view"
-                                                        checked={formik.values.appLogoPosition === "in_form_view"}
-                                                        onChange={(e) => formik.setFieldValue("appLogoPosition", e.value)}
-                                                    />
-                                                    <label htmlFor="appLogoPosition-in_form_view" className="ml-2">In Form View</label>
-                                                </div>
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="appLogoPosition-in_image_view"
-                                                        name="appLogoPosition"
-                                                        value="in_image_view"
-                                                        checked={formik.values.appLogoPosition === "in_image_view"}
-                                                        onChange={(e) => formik.setFieldValue("appLogoPosition", e.value)}
-                                                    />
-                                                    <label htmlFor="appLogoPosition-in_image_view" className="ml-2">In Image View</label>
-                                                </div>
+                                            <div className="flex">
+                                                <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={(value) => formik.setFieldValue("appLogoPosition", value)}
+                                                />
                                             </div>
                                         </div>
                                     </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Title & Description Details </p>
+                                    <SolidDivider className="my-4" />
+                                    <p className="solid-settings-heading">Title & Description Details</p>
                                     <div className='formgrid grid'>
                                         <div className='col-12 lg:col-10 xl:col-8'>
                                             <div className="formgrid grid">
@@ -546,10 +481,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Show Details on Authentication Screen</label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="showAuthContent"
                                                                 checked={formik.values.showAuthContent}
-                                                                onChange={(e) => formik.setFieldValue("showAuthContent", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("showAuthContent", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -560,12 +495,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">App Title</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputText
+                                                            <SolidInput
                                                                 type="text"
                                                                 id="appTitle"
                                                                 name="appTitle"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.appTitle}
+                                                                value={formik.values.appTitle ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -577,12 +512,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">App Subtitle</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputText
+                                                            <SolidInput
                                                                 type="text"
                                                                 id="appSubtitle"
                                                                 name="appSubtitle"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.appSubtitle}
+                                                                value={formik.values.appSubtitle ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -594,12 +529,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Description</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputTextarea
+                                                            <SolidTextarea
                                                                 rows={3}
                                                                 id="appDescription"
                                                                 name="appDescription"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.appDescription}
+                                                                value={formik.values.appDescription ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -611,12 +546,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Copyright</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputTextarea
+                                                            <SolidTextarea
                                                                 rows={3}
                                                                 id="copyright"
                                                                 name="copyright"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.copyright}
+                                                                value={formik.values.copyright ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -625,9 +560,9 @@ export const GeneralSettings = () => {
                                             </div>
                                         </div>
                                     </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    <SolidDivider className="my-4" />
 
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Legal Links</p>
+                                    <p className="solid-settings-heading">Legal Links</p>
                                     <div className='formgrid grid'>
                                         <div className='col-12 lg:col-10 xl:col-8'>
                                             <div className="formgrid grid">
@@ -637,10 +572,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Show Legal Links</label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="showLegalLinks"
                                                                 checked={formik.values.showLegalLinks}
-                                                                onChange={(e) => formik.setFieldValue("showLegalLinks", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("showLegalLinks", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -651,12 +586,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Terms and Conditions Link</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputText
+                                                            <SolidInput
                                                                 type="text"
                                                                 id="appTnc"
                                                                 name="appTnc"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.appTnc}
+                                                                value={formik.values.appTnc ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -668,12 +603,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Privacy Policy Link</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputText
+                                                            <SolidInput
                                                                 type="text"
                                                                 id="appPrivacyPolicy"
                                                                 name="appPrivacyPolicy"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.appPrivacyPolicy}
+                                                                value={formik.values.appPrivacyPolicy ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -682,8 +617,8 @@ export const GeneralSettings = () => {
                                             </div>
                                         </div>
                                     </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Theme</p>
+                                    <SolidDivider className="my-4" />
+                                    <p className="solid-settings-heading">Theme</p>
                                     <div className='formgrid grid'>
                                         <div className='col-12 lg:col-10 xl:col-8'>
                                             <div className="formgrid grid">
@@ -693,10 +628,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Enable Dark Mode</label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="enableDarkMode"
                                                                 checked={formik.values.enableDarkMode}
-                                                                onChange={(e) => formik.setFieldValue("enableDarkMode", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("enableDarkMode", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -708,7 +643,7 @@ export const GeneralSettings = () => {
                             }
                             {pathname.includes("authentication-settings") &&
                                 <>
-                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>User Authentication  </p>
+                                    <p className="solid-settings-heading">User Authentication</p>
                                     <div className='formgrid grid'>
                                         <div className='col-12 lg:col-10 xl:col-8'>
                                             <div className="formgrid grid">
@@ -718,10 +653,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Public Registration</label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="allowPublicRegistration"
                                                                 checked={formik.values.allowPublicRegistration}
-                                                                onChange={(e) => formik.setFieldValue("allowPublicRegistration", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("allowPublicRegistration", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -732,10 +667,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Password Based Authentication</label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="passwordBasedAuth"
                                                                 checked={formik.values.passwordBasedAuth}
-                                                                onChange={(e) => formik.setFieldValue("passwordBasedAuth", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("passwordBasedAuth", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -746,10 +681,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Password Less Authentication</label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="passwordLessAuth"
                                                                 checked={formik.values.passwordLessAuth}
-                                                                onChange={(e) => formik.setFieldValue("passwordLessAuth", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("passwordLessAuth", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -760,10 +695,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Auto Activate User on Registration </label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="activateUserOnRegistration"
                                                                 checked={formik.values.activateUserOnRegistration}
-                                                                onChange={(e) => formik.setFieldValue("activateUserOnRegistration", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("activateUserOnRegistration", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -774,10 +709,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Allow Login/ Signup with Google </label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="iamGoogleOAuthEnabled"
                                                                 checked={formik.values.iamGoogleOAuthEnabled}
-                                                                onChange={(e) => formik.setFieldValue("iamGoogleOAuthEnabled", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("iamGoogleOAuthEnabled", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -788,10 +723,10 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Force Password change on first Login </label>
                                                         </div>
                                                         <div className="col-2 sm:col-3 lg:col-7">
-                                                            <InputSwitch
+                                                            <SolidSwitch
                                                                 name="forceChangePasswordOnFirstLogin"
                                                                 checked={formik.values.forceChangePasswordOnFirstLogin}
-                                                                onChange={(e) => formik.setFieldValue("forceChangePasswordOnFirstLogin", e.value)}
+                                                                onChange={(checked) => formik.setFieldValue("forceChangePasswordOnFirstLogin", checked)}
                                                             />
                                                         </div>
                                                     </div>
@@ -803,28 +738,15 @@ export const GeneralSettings = () => {
                                                                 <label className="form-field-label">Password Less Registration Method</label>
                                                             </div>
                                                             <div className='col-12 sm:col-12 lg:col-6 xl:col-6'>
-                                                                <div className="flex align-items-center gap-3 mt-3 lg:mt-0">
-                                                                    <div className="flex align-items-center">
-                                                                        <RadioButton
-                                                                            inputId="passwordlessRegistrationValidateWhat-email"
-                                                                            name="passwordlessRegistrationValidateWhat"
-                                                                            value="email"
-                                                                            checked={formik.values.passwordlessRegistrationValidateWhat === "email"}
-                                                                            onChange={(e) => formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value)}
-                                                                        />
-                                                                        <label htmlFor="passwordlessRegistrationValidateWhat-email" className="ml-2">Email</label>
-                                                                    </div>
-                                                                    <div className="flex align-items-center">
-                                                                        <RadioButton
-                                                                            inputId="passwordlessRegistrationValidateWhat-mobile"
-                                                                            name="passwordlessRegistrationValidateWhat"
-                                                                            value="mobile"
-                                                                            checked={formik.values.passwordlessRegistrationValidateWhat === "mobile"}
-                                                                            onChange={(e) => formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value)}
-                                                                        />
-                                                                        <label htmlFor="passwordlessRegistrationValidateWhat-mobile" className="ml-2">Mobile</label>
-                                                                    </div>
-                                                                </div>
+                                                                <SolidSegmentedControl
+                                                                    className="solid-settings-segmented mt-3 lg:mt-0"
+                                                                    value={formik.values.passwordlessRegistrationValidateWhat}
+                                                                    options={[
+                                                                        { value: "email", label: "Email" },
+                                                                        { value: "mobile", label: "Mobile" },
+                                                                    ]}
+                                                                    onChange={(value) => formik.setFieldValue("passwordlessRegistrationValidateWhat", value)}
+                                                                />
                                                             </div>
                                                         </div>
                                                     </div>
@@ -836,38 +758,16 @@ export const GeneralSettings = () => {
                                                                 <label className="form-field-label">Password Less Login Method</label>
                                                             </div>
                                                             <div className='col-12 sm:col-12 lg:col-6 xl:col-6'>
-                                                                <div className="flex align-items-center gap-3 mt-3 lg:mt-0">
-                                                                    <div className="flex align-items-center">
-                                                                        <RadioButton
-                                                                            inputId="passwordlessLoginValidateWhat-email"
-                                                                            name="passwordlessLoginValidateWhat"
-                                                                            value="email"
-                                                                            checked={formik.values.passwordlessLoginValidateWhat === "email"}
-                                                                            onChange={(e) => formik.setFieldValue("passwordlessLoginValidateWhat", e.value)}
-                                                                        />
-                                                                        <label htmlFor="passwordlessLoginValidateWhat-email" className="ml-2">Email</label>
-                                                                    </div>
-                                                                    <div className="flex align-items-center">
-                                                                        <RadioButton
-                                                                            inputId="passwordlessLoginValidateWhat-mobile"
-                                                                            name="passwordlessLoginValidateWhat"
-                                                                            value="mobile"
-                                                                            checked={formik.values.passwordlessLoginValidateWhat === "mobile"}
-                                                                            onChange={(e) => formik.setFieldValue("passwordlessLoginValidateWhat", e.value)}
-                                                                        />
-                                                                        <label htmlFor="passwordlessLoginValidateWhat-mobile" className="ml-2">Mobile</label>
-                                                                    </div>
-                                                                    <div className="flex align-items-center">
-                                                                        <RadioButton
-                                                                            inputId="passwordlessLoginValidateWhat-selectable"
-                                                                            name="passwordlessLoginValidateWhat"
-                                                                            value="selectable"
-                                                                            checked={formik.values.passwordlessLoginValidateWhat === "selectable"}
-                                                                            onChange={(e) => formik.setFieldValue("passwordlessLoginValidateWhat", e.value)}
-                                                                        />
-                                                                        <label htmlFor="passwordlessLoginValidateWhat-selectable" className="ml-2">Selectable</label>
-                                                                    </div>
-                                                                </div>
+                                                                <SolidSegmentedControl
+                                                                    className="solid-settings-segmented mt-3 lg:mt-0"
+                                                                    value={formik.values.passwordlessLoginValidateWhat}
+                                                                    options={[
+                                                                        { value: "email", label: "Email" },
+                                                                        { value: "mobile", label: "Mobile" },
+                                                                        { value: "selectable", label: "Selectable" },
+                                                                    ]}
+                                                                    onChange={(value) => formik.setFieldValue("passwordlessLoginValidateWhat", value)}
+                                                                />
                                                             </div>
                                                         </div>
                                                     </div>
@@ -875,42 +775,20 @@ export const GeneralSettings = () => {
                                             </div>
                                         </div>
                                     </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Layout</p>
+                                    <SolidDivider className="my-4" />
+                                    <p className="solid-settings-heading">Authentication Screen Layout</p>
                                     <div className='formgrid grid'>
                                         <div className='col-12 lg:col-10 xl:col-8'>
-                                            <div className="flex align-items-center gap-3">
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="authPagesLayout-left"
-                                                        name="authPagesLayout"
-                                                        value="left"
-                                                        checked={formik.values.authPagesLayout === "left"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
-                                                    />
-                                                    <label htmlFor="authPagesLayout-left" className="ml-2">Left</label>
-                                                </div>
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="authPagesLayout-center"
-                                                        name="authPagesLayout"
-                                                        value="center"
-                                                        checked={formik.values.authPagesLayout === "center"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
-                                                    />
-                                                    <label htmlFor="authPagesLayout-center" className="ml-2">Center</label>
-                                                </div>
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="authPagesLayout-right"
-                                                        name="authPagesLayout"
-                                                        value="right"
-                                                        checked={formik.values.authPagesLayout === "right"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
-                                                    />
-                                                    <label htmlFor="authPagesLayout-right" className="ml-2">Right</label>
-                                                </div>
-                                            </div>
+                                            <SolidSegmentedControl
+                                                className="solid-settings-segmented"
+                                                value={formik.values.authPagesLayout}
+                                                options={[
+                                                    { value: "left", label: "Left" },
+                                                    { value: "center", label: "Center" },
+                                                    { value: "right", label: "Right" },
+                                                ]}
+                                                onChange={(value) => formik.setFieldValue("authPagesLayout", value)}
+                                            />
                                             <p className="mt-3 text-sm font-bold">Note : {positionMap[formik.values.authPagesLayout as 'left' | 'center' | 'right']}</p>
                                         </div>
                                     </div>
@@ -919,7 +797,9 @@ export const GeneralSettings = () => {
                                         <div className='col-12 lg:col-10 xl:col-8'>
                                             <div className="formgrid grid">
                                                 <div className="col-12 md:col-8 lg:col-6">
-                                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>{formik.values.authPagesLayout === "center" ? "Background" : "Banner"} Image</p>
+                                                    <p className="solid-settings-subheading">
+                                                        {formik.values.authPagesLayout === "center" ? "Background" : "Banner"} Image
+                                                    </p>
                                                     {formik.values.authPagesLayout === "left" &&
                                                         <div>
                                                             <div {...getAuthScreenLeftBackgroundImageRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
@@ -1021,34 +901,21 @@ export const GeneralSettings = () => {
                                             </div>
                                         </div>
                                     </div>
-                                    <div className='mt-2 lg:mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    <SolidDivider className="my-4" />
                                     {solidSettingsData?.data?.enableDarkMode === true &&
                                         <>
-                                            <p className='font-bold mt-3 lg:mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Theme</p>
+                                            <p className="solid-settings-heading">Authentication Screen Theme</p>
                                             <div className='formgrid grid'>
                                                 <div className='col-12 lg:col-10 xl:col-8'>
-                                                    <div className="flex align-items-center gap-3">
-                                                        <div className="flex align-items-center">
-                                                            <RadioButton
-                                                                inputId="theme-light"
-                                                                name="authPagesTheme"
-                                                                value="light"
-                                                                checked={formik.values.authPagesTheme === "light"}
-                                                                onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
-                                                            />
-                                                            <label htmlFor="theme-light" className="ml-2">Solid Light</label>
-                                                        </div>
-                                                        <div className="flex align-items-center">
-                                                            <RadioButton
-                                                                inputId="theme-dark"
-                                                                name="authPagesTheme"
-                                                                value="dark"
-                                                                checked={formik.values.authPagesTheme === "dark"}
-                                                                onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
-                                                            />
-                                                            <label htmlFor="theme-dark" className="ml-2">Solid Dark</label>
-                                                        </div>
-                                                    </div>
+                                            <SolidSegmentedControl
+                                                className="solid-settings-segmented"
+                                                value={formik.values.authPagesTheme}
+                                                options={[
+                                                    { value: "light", label: "Solid Light" },
+                                                    { value: "dark", label: "Solid Dark" },
+                                                ]}
+                                                onChange={(value) => formik.setFieldValue("authPagesTheme", value)}
+                                            />
                                                 </div>
                                             </div>
                                         </>
@@ -1096,7 +963,7 @@ export const GeneralSettings = () => {
                                     </div>
                                     <Divider />
                                  */}
-                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Contact Support</p>
+                                    <p className="solid-settings-heading">Contact Support</p>
                                     <div className='formgrid grid'>
                                         <div className="col-12 lg:col-10 xl:col-8">
                                             <div className='formgrid grid'>
@@ -1106,12 +973,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Contact Support Email</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputText
+                                                            <SolidInput
                                                                 type="text"
                                                                 id="contactSupportEmail"
                                                                 name="contactSupportEmail"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.contactSupportEmail}
+                                                                value={formik.values.contactSupportEmail ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -1123,12 +990,12 @@ export const GeneralSettings = () => {
                                                             <label className="form-field-label">Display Name</label>
                                                         </div>
                                                         <div className="col-12 md:col-7">
-                                                            <InputText
+                                                            <SolidInput
                                                                 type="text"
                                                                 id="contactSupportDisplayName"
                                                                 name="contactSupportDisplayName"
                                                                 onChange={formik.handleChange}
-                                                                value={formik.values.contactSupportDisplayName}
+                                                                value={formik.values.contactSupportDisplayName ?? ''}
                                                                 className='w-full'
                                                             />
                                                         </div>
@@ -1140,72 +1007,16 @@ export const GeneralSettings = () => {
                                 </>
                             }
                             {pathname.includes("ai-settings") &&
-                                <>
-                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Ai Details</p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-12 lg:col-10 xl:col-8'>
-                                            <div className="formgrid grid">
-                                                <div className="col-12 md:col-10 lg:col-6 mt-3 md:mt-4">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-12 md:col-3 pb-2 md:pb-0">
-                                                            <label className="form-field-label">Default Provider</label>
-                                                        </div>
-                                                        <div className="col-12 md:col-9">
-                                                            <Dropdown
-                                                                className='w-full'
-                                                                value={formik.values.solidXGenAiCodeBuilderConfig.defaultProvider}
-                                                                options={[
-                                                                    { label: "OpenAI", value: "openai" },
-                                                                    { label: "Anthropic", value: "anthropic" },
-                                                                ]}
-                                                                onChange={(e) => handleProviderSelect(e.value)}
-                                                                placeholder="Select Provider"
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                {/* <div className="col-6 mt-4">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Model Name</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputText
-                                                                type="text"
-                                                                id="llModelName"
-                                                                name="llModelName"
-                                                                onChange={formik.handleChange}
-                                                                value={formik.values.llModelName}
-                                                                className='w-full'
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>  */}
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <Divider />
-                                    <div className='grid'>
-                                        <div className='col-12 md:col-6'>
-                                            {formik.values.solidXGenAiCodeBuilderConfig.defaultProvider && (
-                                                <>
-                                                    {formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "openai" && (
-                                                        <OpenAiProviderComponent
-                                                            profile={currentProfile}
-                                                            onUpdate={handleProfileUpdate}
-                                                        />
-                                                    )}
-                                                    {formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "anthropic" && (
-                                                        <AnthropicProviderComponent
-                                                            profile={currentProfile}
-                                                            onUpdate={handleProfileUpdate}
-                                                        />
-                                                    )}
-                                                </>
-                                            )}
-                                        </div>
-                                    </div>
-                                </>
+                                <AiSettingsSection
+                                    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>
                     </form>
@@ -1214,3 +1025,82 @@ export const GeneralSettings = () => {
         </div>
     )
 }
+
+interface AiSettingsSectionProps {
+    aiConfig: SolidAiConfig;
+    onAiConfigChange: (config: SolidAiConfig) => void;
+}
+
+const DEFAULT_BEHAVIOR: ModelBehavior = { streaming: false, custom: "" };
+const DEFAULT_MODEL_ENTRY: ModelEntry = { providerId: "", model: "", behavior: DEFAULT_BEHAVIOR };
+
+const AiSettingsSection = ({ aiConfig, onAiConfigChange }: AiSettingsSectionProps) => {
+    const [activeTab, setActiveTab] = useState<"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>
+            <p className="solid-settings-heading" style={{ marginBottom: "1rem" }}>
+                AI Model Configuration
+            </p>
+            <SolidTabGroup
+                tabs={tabItems}
+                value={activeTab}
+                onValueChange={(value) => setActiveTab(value as "providers" | "default" | "fast")}
+                tabPosition="left"
+                extra={
+                    activeTab === "providers" ? (
+                        <SolidButton size="sm" onClick={() => setShowAddProvider(true)}>
+                            Add
+                        </SolidButton>
+                    ) : undefined
+                }
+            />
+        </div>
+    );
+};