feat(settings): separate personalization & preferences

src/components/Settings/Sections/Personalization.tsx

@@ -0,0 +1,29 @@
+import { UIConfigField } from '@/lib/config/types';
+import SettingsField from '../SettingsField';
+
+const Personalization = ({
+  fields,
+  values,
+}: {
+  fields: UIConfigField[];
+  values: Record<string, any>;
+}) => {
+  return (
+    <div className="flex-1 space-y-6 overflow-y-auto px-6 py-6">
+      {fields.map((field) => (
+        <SettingsField
+          key={field.key}
+          field={field}
+          value={
+            (field.scope === 'client'
+              ? localStorage.getItem(field.key)
+              : values[field.key]) ?? field.default
+          }
+          dataAdd="personalization"
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Personalization;

src/components/Settings/Sections/Preferences.tsx

@@ -1,7 +1,7 @@
 import { UIConfigField } from '@/lib/config/types';
 import SettingsField from '../SettingsField';
 
-const General = ({
+const Preferences = ({
   fields,
   values,
 }: {
@@ -19,11 +19,11 @@ const General = ({
               ? localStorage.getItem(field.key)
               : values[field.key]) ?? field.default
           }
-          dataAdd="general"
+          dataAdd="preferences"
         />
       ))}
     </div>
   );
 };
 
-export default General;
+export default Preferences;

src/components/Settings/SettingsDialogue.tsx

@@ -4,9 +4,10 @@ import {
   BrainCog,
   ChevronLeft,
   Search,
-  Settings,
+  Sliders,
+  ToggleRight,
 } from 'lucide-react';
-import General from './Sections/General';
+import Preferences from './Sections/Preferences';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -15,15 +16,24 @@ import { cn } from '@/lib/utils';
 import Models from './Sections/Models/Section';
 import SearchSection from './Sections/Search';
 import Select from '@/components/ui/Select';
+import Personalization from './Sections/Personalization';
 
 const sections = [
   {
-    key: 'general',
+    key: 'preferences',
-    name: 'General',
+    name: 'Preferences',
-    description: 'Adjust common settings.',
+    description: 'Customize your application preferences.',
-    icon: Settings,
+    icon: Sliders,
-    component: General,
+    component: Preferences,
-    dataAdd: 'general',
+    dataAdd: 'preferences',
+  },
+  {
+    key: 'personalization',
+    name: 'Personalization',
+    description: 'Customize the behavior and tone of the model.',
+    icon: ToggleRight,
+    component: Personalization,
+    dataAdd: 'personalization',
   },
   {
     key: 'models',

src/lib/config/index.ts

@@ -13,14 +13,15 @@ class ConfigManager {
   currentConfig: Config = {
     version: this.configVersion,
     setupComplete: false,
-    general: {},
+    preferences: {},
+    personalization: {},
     modelProviders: [],
     search: {
       searxngURL: '',
     },
   };
   uiConfigSections: UIConfigSections = {
-    general: [
+    preferences: [
       {
         name: 'Theme',
         key: 'theme',
@@ -40,16 +41,6 @@ class ConfigManager {
         default: 'dark',
         scope: 'client',
       },
-      {
-        name: 'System Instructions',
-        key: 'systemInstructions',
-        type: 'textarea',
-        required: false,
-        description: 'Add custom behavior or tone for the model.',
-        placeholder:
-          'e.g., "Respond in a friendly and concise tone" or "Use British English and format answers as bullet points."',
-        scope: 'client',
-      },
       {
         name: 'Measurement Unit',
         key: 'measureUnit',
@@ -69,6 +60,27 @@ class ConfigManager {
         default: 'Metric',
         scope: 'client',
       },
+      {
+        name: 'Auto video & image search',
+        key: 'autoMediaSearch',
+        type: 'switch',
+        required: false,
+        description: 'Automatically search for relevant images and videos.',
+        default: true,
+        scope: 'client',
+      },
+    ],
+    personalization: [
+      {
+        name: 'System Instructions',
+        key: 'systemInstructions',
+        type: 'textarea',
+        required: false,
+        description: 'Add custom behavior or tone for the model.',
+        placeholder:
+          'e.g., "Respond in a friendly and concise tone" or "Use British English and format answers as bullet points."',
+        scope: 'client',
+      },
     ],
     modelProviders: [],
     search: [

src/lib/config/types.ts

@@ -63,7 +63,10 @@ type ConfigModelProvider = {
 type Config = {
   version: number;
   setupComplete: boolean;
-  general: {
+  preferences: {
+    [key: string]: any;
+  };
+  personalization: {
     [key: string]: any;
   };
   modelProviders: ConfigModelProvider[];
@@ -86,7 +89,8 @@ type ModelProviderUISection = {
 };
 
 type UIConfigSections = {
-  general: UIConfigField[];
+  preferences: UIConfigField[];
+  personalization: UIConfigField[];
   modelProviders: ModelProviderUISection[];
   search: UIConfigField[];
 };
@@ -101,4 +105,5 @@ export type {
   ModelProviderUISection,
   ConfigModelProvider,
   TextareaUIConfigField,
+  SwitchUIConfigField,
 };