Merge branch 'master' of https://github.com/ItzCrazyKns/Perplexica

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',
-    name: 'General',
-    description: 'Adjust common settings.',
-    icon: Settings,
-    component: General,
-    dataAdd: 'general',
+    key: 'preferences',
+    name: 'Preferences',
+    description: 'Customize your application preferences.',
+    icon: Sliders,
+    component: Preferences,
+    dataAdd: 'preferences',
+  },
+  {
+    key: 'personalization',
+    name: 'Personalization',
+    description: 'Customize the behavior and tone of the model.',
+    icon: ToggleRight,
+    component: Personalization,
+    dataAdd: 'personalization',
   },
   {
     key: 'models',

src/components/Settings/SettingsField.tsx

@@ -1,6 +1,7 @@
 import {
   SelectUIConfigField,
   StringUIConfigField,
+  SwitchUIConfigField,
   TextareaUIConfigField,
   UIConfigField,
 } from '@/lib/config/types';
@@ -9,6 +10,7 @@ import Select from '../ui/Select';
 import { toast } from 'sonner';
 import { useTheme } from 'next-themes';
 import { Loader2 } from 'lucide-react';
+import { Switch } from '@headlessui/react';
 
 const SettingsSelect = ({
   field,
@@ -237,6 +239,79 @@ const SettingsTextarea = ({
   );
 };
 
+const SettingsSwitch = ({
+  field,
+  value,
+  setValue,
+  dataAdd,
+}: {
+  field: SwitchUIConfigField;
+  value?: any;
+  setValue: (value: any) => void;
+  dataAdd: string;
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleSave = async (newValue: boolean) => {
+    setLoading(true);
+    setValue(newValue);
+    try {
+      if (field.scope === 'client') {
+        localStorage.setItem(field.key, String(newValue));
+      } else {
+        const res = await fetch('/api/config', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            key: `${dataAdd}.${field.key}`,
+            value: newValue,
+          }),
+        });
+
+        if (!res.ok) {
+          console.error('Failed to save config:', await res.text());
+          throw new Error('Failed to save configuration');
+        }
+      }
+    } catch (error) {
+      console.error('Error saving config:', error);
+      toast.error('Failed to save configuration.');
+    } finally {
+      setTimeout(() => setLoading(false), 150);
+    }
+  };
+
+  const isChecked = value === true || value === 'true';
+
+  return (
+    <section className="rounded-xl border border-light-200 bg-light-primary/80 p-4 lg:p-6 transition-colors dark:border-dark-200 dark:bg-dark-primary/80">
+      <div className="flex flex-row items-center space-x-3 lg:space-x-5 w-full justify-between">
+        <div>
+          <h4 className="text-sm lg:text-base text-black dark:text-white">
+            {field.name}
+          </h4>
+          <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">
+            {field.description}
+          </p>
+        </div>
+        <Switch
+          checked={isChecked}
+          onChange={handleSave}
+          disabled={loading}
+          className="group relative flex h-6 w-12 shrink-0 cursor-pointer rounded-full bg-white/10 p-1 duration-200 ease-in-out focus:outline-none transition-colors disabled:opacity-60 disabled:cursor-not-allowed data-[checked]:bg-sky-500"
+        >
+          <span
+            aria-hidden="true"
+            className="pointer-events-none inline-block size-4 translate-x-0 rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-6"
+          />
+        </Switch>
+      </div>
+    </section>
+  );
+};
+
 const SettingsField = ({
   field,
   value,
@@ -276,6 +351,15 @@ const SettingsField = ({
           dataAdd={dataAdd}
         />
       );
+    case 'switch':
+      return (
+        <SettingsSwitch
+          field={field}
+          value={val}
+          setValue={setVal}
+          dataAdd={dataAdd}
+        />
+      );
     default:
       return <div>Unsupported field type: {field.type}</div>;
   }

src/lib/config/clientRegistry.ts

@@ -6,11 +6,8 @@ const getClientConfig = (key: string, defaultVal?: any) => {
 
 export const getTheme = () => getClientConfig('theme', 'dark');
 
-export const getAutoImageSearch = () =>
-  Boolean(getClientConfig('autoImageSearch', 'true'));
-
-export const getAutoVideoSearch = () =>
-  Boolean(getClientConfig('autoVideoSearch', 'true'));
+export const getAutoMediaSearch = () =>
+  getClientConfig('autoMediaSearch', 'true') === 'true';
 
 export const getSystemInstructions = () =>
   getClientConfig('systemInstructions', '');

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

@@ -38,11 +38,17 @@ type TextareaUIConfigField = BaseUIConfigField & {
   default?: string;
 };
 
+type SwitchUIConfigField = BaseUIConfigField & {
+  type: 'switch';
+  default?: boolean;
+};
+
 type UIConfigField =
   | StringUIConfigField
   | SelectUIConfigField
   | PasswordUIConfigField
-  | TextareaUIConfigField;
+  | TextareaUIConfigField
+  | SwitchUIConfigField;
 
 type ConfigModelProvider = {
   id: string;
@@ -57,7 +63,10 @@ type ConfigModelProvider = {
 type Config = {
   version: number;
   setupComplete: boolean;
-  general: {
+  preferences: {
+    [key: string]: any;
+  };
+  personalization: {
     [key: string]: any;
   };
   modelProviders: ConfigModelProvider[];
@@ -80,7 +89,8 @@ type ModelProviderUISection = {
 };
 
 type UIConfigSections = {
-  general: UIConfigField[];
+  preferences: UIConfigField[];
+  personalization: UIConfigField[];
   modelProviders: ModelProviderUISection[];
   search: UIConfigField[];
 };
@@ -95,4 +105,5 @@ export type {
   ModelProviderUISection,
   ConfigModelProvider,
   TextareaUIConfigField,
+  SwitchUIConfigField,
 };

src/lib/hooks/useChat.tsx

@@ -21,6 +21,7 @@ import { useParams, useSearchParams } from 'next/navigation';
 import { toast } from 'sonner';
 import { getSuggestions } from '../actions';
 import { MinimalProvider } from '../models/types';
+import { getAutoMediaSearch } from '../config/clientRegistry';
 
 export type Section = {
   userMessage: UserMessage;
@@ -94,17 +95,6 @@ const checkConfig = async (
       'embeddingModelProviderId',
     );
 
-    const autoImageSearch = localStorage.getItem('autoImageSearch');
-    const autoVideoSearch = localStorage.getItem('autoVideoSearch');
-
-    if (!autoImageSearch) {
-      localStorage.setItem('autoImageSearch', 'true');
-    }
-
-    if (!autoVideoSearch) {
-      localStorage.setItem('autoVideoSearch', 'false');
-    }
-
     const res = await fetch(`/api/providers`, {
       headers: {
         'Content-Type': 'application/json',
@@ -624,16 +614,13 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
 
         const lastMsg = messagesRef.current[messagesRef.current.length - 1];
 
-        const autoImageSearch = localStorage.getItem('autoImageSearch');
-        const autoVideoSearch = localStorage.getItem('autoVideoSearch');
+        const autoMediaSearch = getAutoMediaSearch();
 
-        if (autoImageSearch === 'true') {
+        if (autoMediaSearch) {
           document
             .getElementById(`search-images-${lastMsg.messageId}`)
             ?.click();
-        }
 
-        if (autoVideoSearch === 'true') {
           document
             .getElementById(`search-videos-${lastMsg.messageId}`)
             ?.click();