Merge branch 'master' into canary

README.md

@@ -1,57 +1,74 @@
-# Perplexica 🔍
+# 🚀 Perplexica - An AI-powered search engine 🔎 <!-- omit in toc -->
+
+<div align="center" markdown="1">
+   <sup>Special thanks to:</sup>
+   <br>
+   <br>
+   <a href="https://www.warp.dev/perplexica">
+      <img alt="Warp sponsorship" width="400" src="https://github.com/user-attachments/assets/775dd593-9b5f-40f1-bf48-479faff4c27b">
+   </a>
+
+### [Warp, the AI Devtool that lives in your terminal](https://www.warp.dev/perplexica)
+
+[Available for MacOS, Linux, & Windows](https://www.warp.dev/perplexica)
+
+</div>
+
+<hr/>
 
-[![GitHub Repo stars](https://img.shields.io/github/stars/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/stargazers)
-[![GitHub forks](https://img.shields.io/github/forks/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/network/members)
-[![GitHub watchers](https://img.shields.io/github/watchers/ItzCrazyKns/Perplexica?style=social)](https://github.com/ItzCrazyKns/Perplexica/watchers)
-[![Docker Pulls](https://img.shields.io/docker/pulls/itzcrazykns1337/perplexica?color=blue)](https://hub.docker.com/r/itzcrazykns1337/perplexica)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/ItzCrazyKns/Perplexica/blob/master/LICENSE)
-[![GitHub last commit](https://img.shields.io/github/last-commit/ItzCrazyKns/Perplexica?color=green)](https://github.com/ItzCrazyKns/Perplexica/commits/master)
 [![Discord](https://dcbadge.limes.pink/api/server/26aArMy8tT?style=flat)](https://discord.gg/26aArMy8tT)
 
-Perplexica is a **privacy-focused AI answering engine** that runs entirely on your own hardware. It combines knowledge from the vast internet with support for **local LLMs** (Ollama) and cloud providers (OpenAI, Claude, Groq), delivering accurate answers with **cited sources** while keeping your searches completely private.
+![preview](.assets/perplexica-screenshot.png?)
 
-![preview](.assets/perplexica-screenshot.png)
+## Table of Contents <!-- omit in toc -->
+
+- [Overview](#overview)
+- [Preview](#preview)
+- [Features](#features)
+- [Installation](#installation)
+  - [Getting Started with Docker (Recommended)](#getting-started-with-docker-recommended)
+  - [Non-Docker Installation](#non-docker-installation)
+  - [Ollama Connection Errors](#ollama-connection-errors)
+  - [Lemonade Connection Errors](#lemonade-connection-errors)
+- [Using as a Search Engine](#using-as-a-search-engine)
+- [Using Perplexica's API](#using-perplexicas-api)
+- [Expose Perplexica to a network](#expose-perplexica-to-network)
+- [One-Click Deployment](#one-click-deployment)
+- [Upcoming Features](#upcoming-features)
+- [Support Us](#support-us)
+  - [Donations](#donations)
+- [Contribution](#contribution)
+- [Help and Support](#help-and-support)
+
+## Overview
+
+Perplexica is an open-source AI-powered searching tool or an AI-powered search engine that goes deep into the internet to find answers. Inspired by Perplexity AI, it's an open-source option that not just searches the web but understands your questions. It uses advanced machine learning algorithms like similarity searching and embeddings to refine results and provides clear answers with sources cited.
+
+Using SearxNG to stay current and fully open source, Perplexica ensures you always get the most up-to-date information without compromising your privacy.
 
 Want to know more about its architecture and how it works? You can read it [here](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/README.md).
 
-## ✨ Features
+## Preview
 
-🤖 **Support for all major AI providers** - Use local LLMs through Ollama or connect to OpenAI, Anthropic Claude, Google Gemini, Groq, and more. Mix and match models based on your needs.
+![video-preview](.assets/perplexica-preview.gif)
 
-⚡ **Smart search modes** - Choose Balanced Mode for everyday searches, Fast Mode when you need quick answers, or wait for Quality Mode (coming soon) for deep research.
+## Features
 
-🎯 **Six specialized focus modes** - Get better results with modes designed for specific tasks: Academic papers, YouTube videos, Reddit discussions, Wolfram Alpha calculations, writing assistance, or general web search.
+- **Local LLMs**: You can utilize local LLMs such as Qwen, DeepSeek, Llama, and Mistral.
+- **Two Main Modes:**
+  - **Copilot Mode:** (In development) Boosts search by generating different queries to find more relevant internet sources. Like normal search instead of just using the context by SearxNG, it visits the top matches and tries to find relevant sources to the user's query directly from the page.
+  - **Normal Mode:** Processes your query and performs a web search.
+- **Focus Modes:** Special modes to better answer specific types of questions. Perplexica currently has 6 focus modes:
+  - **All Mode:** Searches the entire web to find the best results.
+  - **Writing Assistant Mode:** Helpful for writing tasks that do not require searching the web.
+  - **Academic Search Mode:** Finds articles and papers, ideal for academic research.
+  - **YouTube Search Mode:** Finds YouTube videos based on the search query.
+  - **Wolfram Alpha Search Mode:** Answers queries that need calculations or data analysis using Wolfram Alpha.
+  - **Reddit Search Mode:** Searches Reddit for discussions and opinions related to the query.
+- **Current Information:** Some search tools might give you outdated info because they use data from crawling bots and convert them into embeddings and store them in a index. Unlike them, Perplexica uses SearxNG, a metasearch engine to get the results and rerank and get the most relevant source out of it, ensuring you always get the latest information without the overhead of daily data updates.
+- **API**: Integrate Perplexica into your existing applications and make use of its capibilities.
 
-🔍 **Web search powered by SearxNG** - Access multiple search engines while keeping your identity private. Support for Tavily and Exa coming soon for even better results.
+It has many more features like image and video search. Some of the planned features are mentioned in [upcoming features](#upcoming-features).
-
-📷 **Image and video search** - Find visual content alongside text results. Search isn't limited to just articles anymore.
-
-📄 **File uploads** - Upload documents and ask questions about them. PDFs, text files, images - Perplexica understands them all.
-
-🌐 **Search specific domains** - Limit your search to specific websites when you know where to look. Perfect for technical documentation or research papers.
-
-💡 **Smart suggestions** - Get intelligent search suggestions as you type, helping you formulate better queries.
-
-📚 **Discover** - Browse interesting articles and trending content throughout the day. Stay informed without even searching.
-
-🕒 **Search history** - Every search is saved locally so you can revisit your discoveries anytime. Your research is never lost.
-
-✨ **More coming soon** - We're actively developing new features based on community feedback. Join our Discord to help shape Perplexica's future!
-
-## Sponsors
-
-Perplexica's development is powered by the generous support of our sponsors. Their contributions help keep this project free, open-source, and accessible to everyone.
-
-<div align="center">
-  
-  
-<a href="https://www.warp.dev/perplexica">
-  <img alt="Warp Terminal" src=".assets/sponsers/warp.png" width="100%">
-</a>
-
-**[Warp](https://www.warp.dev/perplexica)** - The AI-powered terminal revolutionizing development workflows
-
-</div>
 
 ## Installation
 

src/components/Settings/Sections/General.tsx

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

src/components/Settings/Sections/Models/AddProviderDialog.tsx

@@ -82,10 +82,10 @@ const AddProvider = ({
 
       setProviders((prev) => [...prev, data]);
 
-      toast.success('Connection added successfully.');
+      toast.success('Provider added successfully.');
     } catch (error) {
       console.error('Error adding provider:', error);
-      toast.error('Failed to add connection.');
+      toast.error('Failed to add provider.');
     } finally {
       setLoading(false);
       setOpen(false);
@@ -99,7 +99,7 @@ const AddProvider = ({
         className="px-3 md:px-4 py-1.5 md:py-2 rounded-lg text-xs sm:text-sm border border-light-200 dark:border-dark-200 text-black dark:text-white bg-light-secondary/50 dark:bg-dark-secondary/50 hover:bg-light-secondary hover:dark:bg-dark-secondary hover:border-light-300 hover:dark:border-dark-300 flex flex-row items-center space-x-1 active:scale-95 transition duration-200"
       >
         <Plus className="w-3.5 h-3.5 md:w-4 md:h-4" />
-        <span>Add Connection</span>
+        <span>Add Provider</span>
       </button>
       <AnimatePresence>
         {open && (
@@ -120,7 +120,7 @@ const AddProvider = ({
                 <form onSubmit={handleSubmit} className="flex flex-col flex-1">
                   <div className="px-6 pt-6 pb-4">
                     <h3 className="text-black/90 dark:text-white/90 font-medium">
-                      Add new connection
+                      Add new provider
                     </h3>
                   </div>
                   <div className="border-t border-light-200 dark:border-dark-200" />
@@ -128,7 +128,7 @@ const AddProvider = ({
                     <div className="flex flex-col space-y-4">
                       <div className="flex flex-col items-start space-y-2">
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Select connection type
+                          Select provider type
                         </label>
                         <Select
                           value={selectedProvider ?? ''}
@@ -149,13 +149,13 @@ const AddProvider = ({
                         className="flex flex-col items-start space-y-2"
                       >
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Connection Name*
+                          Name*
                         </label>
                         <input
                           value={name}
                           onChange={(e) => setName(e.target.value)}
                           className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
-                          placeholder={'e.g., My OpenAI Connection'}
+                          placeholder={'Provider Name'}
                           type="text"
                           required={true}
                         />
@@ -199,7 +199,7 @@ const AddProvider = ({
                       {loading ? (
                         <Loader2 className="animate-spin" size={16} />
                       ) : (
-                        'Add Connection'
+                        'Add Provider'
                       )}
                     </button>
                   </div>

src/components/Settings/Sections/Models/DeleteProviderDialog.tsx

@@ -34,10 +34,10 @@ const DeleteProvider = ({
         return prev.filter((p) => p.id !== modelProvider.id);
       });
 
-      toast.success('Connection deleted successfully.');
+      toast.success('Provider deleted successfully.');
     } catch (error) {
       console.error('Error deleting provider:', error);
-      toast.error('Failed to delete connection.');
+      toast.error('Failed to delete provider.');
     } finally {
       setLoading(false);
     }
@@ -51,7 +51,7 @@ const DeleteProvider = ({
           setOpen(true);
         }}
         className="group p-1.5 rounded-md hover:bg-light-200 hover:dark:bg-dark-200 transition-colors group"
-        title="Delete connection"
+        title="Delete provider"
       >
         <Trash2
           size={14}
@@ -76,15 +76,14 @@ const DeleteProvider = ({
               <DialogPanel className="w-full mx-4 lg:w-[600px] max-h-[85vh] flex flex-col border bg-light-primary dark:bg-dark-primary border-light-secondary dark:border-dark-secondary rounded-lg">
                 <div className="px-6 pt-6 pb-4">
                   <h3 className="text-black/90 dark:text-white/90 font-medium">
-                    Delete connection
+                    Delete provider
                   </h3>
                 </div>
                 <div className="border-t border-light-200 dark:border-dark-200" />
                 <div className="flex-1 overflow-y-auto px-6 py-4">
-                  <p className="text-sm text-black/60 dark:text-white/60">
+                  <p className="text-SM text-black/60 dark:text-white/60">
-                    Are you sure you want to delete the connection &quot;
+                    Are you sure you want to delete the provider &quot;
                     {modelProvider.name}&quot;? This action cannot be undone.
-                    All associated models will also be removed.
                   </p>
                 </div>
                 <div className="px-6 py-6 flex justify-end space-x-2">

src/components/Settings/Sections/Models/ModelProvider.tsx

@@ -1,7 +1,7 @@
 import { UIConfigField, ConfigModelProvider } from '@/lib/config/types';
 import { cn } from '@/lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
-import { AlertCircle, Plug2, Plus, Pencil, Trash2, X } from 'lucide-react';
+import { AlertCircle, ChevronDown, Pencil, Trash2, X } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import AddModel from './AddModelDialog';
@@ -17,7 +17,7 @@ const ModelProvider = ({
   fields: UIConfigField[];
   setProviders: React.Dispatch<React.SetStateAction<ConfigModelProvider[]>>;
 }) => {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   const handleModelDelete = async (
     type: 'chat' | 'embedding',
@@ -66,35 +66,23 @@ const ModelProvider = ({
     }
   };
 
-  const modelCount =
-    modelProvider.chatModels.filter((m) => m.key !== 'error').length +
-    modelProvider.embeddingModels.filter((m) => m.key !== 'error').length;
-  const hasError =
-    modelProvider.chatModels.some((m) => m.key === 'error') ||
-    modelProvider.embeddingModels.some((m) => m.key === 'error');
-
   return (
     <div
       key={modelProvider.id}
-      className="border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden bg-light-primary dark:bg-dark-primary"
+      className="border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden"
+    >
+      <div
+        className={cn(
+          'group px-5 py-4 flex flex-row justify-between w-full cursor-pointer hover:bg-light-secondary hover:dark:bg-dark-secondary transition duration-200 items-center',
+          !open && 'rounded-lg',
+        )}
+        onClick={() => setOpen(!open)}
       >
-      <div className="px-5 py-3.5 flex flex-row justify-between w-full items-center border-b border-light-200 dark:border-dark-200 bg-light-secondary/30 dark:bg-dark-secondary/30">
-        <div className="flex items-center gap-2.5">
-          <div className="p-1.5 rounded-md bg-sky-500/10 dark:bg-sky-500/10">
-            <Plug2 size={14} className="text-sky-500" />
-          </div>
-          <div className="flex flex-col">
         <p className="text-sm lg:text-base text-black dark:text-white font-medium">
           {modelProvider.name}
         </p>
-            {modelCount > 0 && (
+        <div className="flex items-center gap-4">
-              <p className="text-[10px] lg:text-xs text-black/50 dark:text-white/50">
+          <div className="flex flex-row items-center">
-                {modelCount} model{modelCount !== 1 ? 's' : ''} configured
-              </p>
-            )}
-          </div>
-        </div>
-        <div className="flex flex-row items-center gap-1">
             <UpdateProvider
               fields={fields}
               modelProvider={modelProvider}
@@ -105,20 +93,35 @@ const ModelProvider = ({
               setProviders={setProviders}
             />
           </div>
+          <ChevronDown
+            size={16}
+            className={cn(
+              open ? 'rotate-180' : '',
+              'transition duration-200 text-black/70 dark:text-white/70 group-hover:text-sky-500',
+            )}
+          />
         </div>
+      </div>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.1 }}
+          >
+            <div className="border-t border-light-200 dark:border-dark-200" />
             <div className="flex flex-col gap-y-4 px-5 py-4">
               <div className="flex flex-col gap-y-2">
                 <div className="flex flex-row w-full justify-between items-center">
-            <p className="text-[11px] lg:text-xs font-medium text-black/70 dark:text-white/70 uppercase tracking-wide">
+                  <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
-              Chat Models
+                    Chat models
                   </p>
-            {!modelProvider.chatModels.some((m) => m.key === 'error') && (
                   <AddModel
                     providerId={modelProvider.id}
                     setProviders={setProviders}
                     type="chat"
                   />
-            )}
                 </div>
                 <div className="flex flex-col gap-2">
                   {modelProvider.chatModels.some((m) => m.key === 'error') ? (
@@ -126,97 +129,83 @@ const ModelProvider = ({
                       <AlertCircle size={16} className="shrink-0" />
                       <span className="break-words">
                         {
-                    modelProvider.chatModels.find((m) => m.key === 'error')
+                          modelProvider.chatModels.find(
-                      ?.name
+                            (m) => m.key === 'error',
+                          )?.name
                         }
                       </span>
                     </div>
-            ) : modelProvider.chatModels.filter((m) => m.key !== 'error')
+                  ) : (
-                .length === 0 && !hasError ? (
-              <div className="flex flex-col items-center justify-center py-4 px-4 rounded-lg border-2 border-dashed border-light-200 dark:border-dark-200 bg-light-secondary/20 dark:bg-dark-secondary/20">
-                <p className="text-xs text-black/50 dark:text-white/50 text-center">
-                  No chat models configured
-                </p>
-              </div>
-            ) : modelProvider.chatModels.filter((m) => m.key !== 'error')
-                .length > 0 ? (
                     <div className="flex flex-row flex-wrap gap-2">
                       {modelProvider.chatModels.map((model, index) => (
                         <div
                           key={`${modelProvider.id}-chat-${model.key}-${index}`}
-                    className="flex flex-row items-center space-x-1.5 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5 border border-light-200 dark:border-dark-200"
+                          className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
                         >
                           <span>{model.name}</span>
                           <button
                             onClick={() => {
                               handleModelDelete('chat', model.key);
                             }}
-                      className="hover:text-red-500 dark:hover:text-red-400 transition-colors"
                           >
                             <X size={12} />
                           </button>
                         </div>
                       ))}
                     </div>
-            ) : null}
+                  )}
                 </div>
               </div>
-
               <div className="flex flex-col gap-y-2">
                 <div className="flex flex-row w-full justify-between items-center">
-            <p className="text-[11px] lg:text-xs font-medium text-black/70 dark:text-white/70 uppercase tracking-wide">
+                  <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
-              Embedding Models
+                    Embedding models
                   </p>
-            {!modelProvider.embeddingModels.some((m) => m.key === 'error') && (
                   <AddModel
                     providerId={modelProvider.id}
                     setProviders={setProviders}
                     type="embedding"
                   />
-            )}
                 </div>
                 <div className="flex flex-col gap-2">
-            {modelProvider.embeddingModels.some((m) => m.key === 'error') ? (
+                  {modelProvider.embeddingModels.some(
+                    (m) => m.key === 'error',
+                  ) ? (
                     <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
                       <AlertCircle size={16} className="shrink-0" />
                       <span className="break-words">
                         {
-                    modelProvider.embeddingModels.find((m) => m.key === 'error')
+                          modelProvider.embeddingModels.find(
-                      ?.name
+                            (m) => m.key === 'error',
+                          )?.name
                         }
                       </span>
                     </div>
-            ) : modelProvider.embeddingModels.filter((m) => m.key !== 'error')
+                  ) : (
-                .length === 0 && !hasError ? (
-              <div className="flex flex-col items-center justify-center py-4 px-4 rounded-lg border-2 border-dashed border-light-200 dark:border-dark-200 bg-light-secondary/20 dark:bg-dark-secondary/20">
-                <p className="text-xs text-black/50 dark:text-white/50 text-center">
-                  No embedding models configured
-                </p>
-              </div>
-            ) : modelProvider.embeddingModels.filter((m) => m.key !== 'error')
-                .length > 0 ? (
                     <div className="flex flex-row flex-wrap gap-2">
                       {modelProvider.embeddingModels.map((model, index) => (
                         <div
                           key={`${modelProvider.id}-embedding-${model.key}-${index}`}
-                    className="flex flex-row items-center space-x-1.5 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5 border border-light-200 dark:border-dark-200"
+                          className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
                         >
                           <span>{model.name}</span>
                           <button
                             onClick={() => {
                               handleModelDelete('embedding', model.key);
                             }}
-                      className="hover:text-red-500 dark:hover:text-red-400 transition-colors"
                           >
                             <X size={12} />
                           </button>
                         </div>
                       ))}
                     </div>
-            ) : null}
+                  )}
                 </div>
               </div>
             </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };

src/components/Settings/Sections/Models/ModelSelect.tsx

@@ -64,8 +64,8 @@ const ModelSelect = ({
           </h4>
           <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">
             {type === 'chat'
-              ? 'Choose which model to use for generating responses'
+              ? 'Select the model to use for chat responses'
-              : 'Choose which model to use for generating embeddings'}
+              : 'Select the model to use for embeddings'}
           </p>
         </div>
         <Select

src/components/Settings/Sections/Models/Section.tsx

@@ -39,39 +39,12 @@ const Models = ({
       <div className="border-t border-light-200 dark:border-dark-200" />
       <div className="flex flex-row justify-between items-center px-6 ">
         <p className="text-xs lg:text-sm text-black/70 dark:text-white/70">
-          Manage connections
+          Manage model provider
         </p>
         <AddProvider modelProviders={fields} setProviders={setProviders} />
       </div>
       <div className="flex flex-col px-6 gap-y-4">
-        {providers.length === 0 ? (
+        {providers.map((provider) => (
-          <div className="flex flex-col items-center justify-center py-12 px-4 rounded-lg border-2 border-dashed border-light-200 dark:border-dark-200 bg-light-secondary/10 dark:bg-dark-secondary/10">
-            <div className="p-3 rounded-full bg-sky-500/10 dark:bg-sky-500/10 mb-3">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-8 h-8 text-sky-500"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 10V3L4 14h7v7l9-11h-7z"
-                />
-              </svg>
-            </div>
-            <p className="text-sm font-medium text-black/70 dark:text-white/70 mb-1">
-              No connections yet
-            </p>
-            <p className="text-xs text-black/50 dark:text-white/50 text-center max-w-sm mb-4">
-              Add your first connection to start using AI models. Connect to
-              OpenAI, Anthropic, Ollama, and more.
-            </p>
-          </div>
-        ) : (
-          providers.map((provider) => (
           <ModelProvider
             key={`provider-${provider.id}`}
             fields={
@@ -81,8 +54,7 @@ const Models = ({
             modelProvider={provider}
             setProviders={setProviders}
           />
-          ))
+        ))}
-        )}
       </div>
     </div>
   );

src/components/Settings/Sections/Models/UpdateProviderDialog.tsx

@@ -67,10 +67,10 @@ const UpdateProvider = ({
         });
       });
 
-      toast.success('Connection updated successfully.');
+      toast.success('Provider updated successfully.');
     } catch (error) {
       console.error('Error updating provider:', error);
-      toast.error('Failed to update connection.');
+      toast.error('Failed to update provider.');
     } finally {
       setLoading(false);
       setOpen(false);
@@ -110,7 +110,7 @@ const UpdateProvider = ({
                 <form onSubmit={handleSubmit} className="flex flex-col flex-1">
                   <div className="px-6 pt-6 pb-4">
                     <h3 className="text-black/90 dark:text-white/90 font-medium">
-                      Update connection
+                      Update provider
                     </h3>
                   </div>
                   <div className="border-t border-light-200 dark:border-dark-200" />
@@ -121,13 +121,13 @@ const UpdateProvider = ({
                         className="flex flex-col items-start space-y-2"
                       >
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Connection Name*
+                          Name*
                         </label>
                         <input
                           value={name}
                           onChange={(event) => setName(event.target.value)}
                           className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
-                          placeholder={'Connection Name'}
+                          placeholder={'Provider Name'}
                           type="text"
                           required={true}
                         />
@@ -171,7 +171,7 @@ const UpdateProvider = ({
                       {loading ? (
                         <Loader2 className="animate-spin" size={16} />
                       ) : (
-                        'Update Connection'
+                        'Update Provider'
                       )}
                     </button>
                   </div>

src/components/Settings/Sections/Personalization.tsx

@@ -1,29 +0,0 @@
-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/SettingsDialogue.tsx

@@ -4,10 +4,9 @@ import {
   BrainCog,
   ChevronLeft,
   Search,
-  Sliders,
+  Settings,
-  ToggleRight,
 } from 'lucide-react';
-import Preferences from './Sections/Preferences';
+import General from './Sections/General';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -16,29 +15,20 @@ 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: 'preferences',
+    key: 'general',
-    name: 'Preferences',
+    name: 'General',
-    description: 'Customize your application preferences.',
+    description: 'Adjust common settings.',
-    icon: Sliders,
+    icon: Settings,
-    component: Preferences,
+    component: General,
-    dataAdd: 'preferences',
+    dataAdd: 'general',
-  },
-  {
-    key: 'personalization',
-    name: 'Personalization',
-    description: 'Customize the behavior and tone of the model.',
-    icon: ToggleRight,
-    component: Personalization,
-    dataAdd: 'personalization',
   },
   {
     key: 'models',
     name: 'Models',
-    description: 'Connect to AI services and manage connections.',
+    description: 'Configure model settings.',
     icon: BrainCog,
     component: Models,
     dataAdd: 'modelProviders',

src/components/Settings/SettingsField.tsx

@@ -1,7 +1,6 @@
 import {
   SelectUIConfigField,
   StringUIConfigField,
-  SwitchUIConfigField,
   TextareaUIConfigField,
   UIConfigField,
 } from '@/lib/config/types';
@@ -10,7 +9,6 @@ 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,
@@ -239,79 +237,6 @@ 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,
@@ -351,15 +276,6 @@ 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/components/Setup/SetupConfig.tsx

@@ -63,11 +63,7 @@ const SetupConfig = ({
     }
   };
 
-  const visibleProviders = providers.filter(
+  const hasProviders = providers.length > 0;
-    (p) => p.name.toLowerCase() !== 'transformers',
-  );
-  const hasProviders =
-    visibleProviders.filter((p) => p.chatModels.length > 0).length > 0;
 
   return (
     <div className="w-[95vw] md:w-[80vw] lg:w-[65vw] mx-auto px-2 sm:px-4 md:px-6 flex flex-col space-y-6">
@@ -85,10 +81,10 @@ const SetupConfig = ({
             <div className="flex flex-row justify-between items-center mb-4 md:mb-6 pb-3 md:pb-4 border-b border-light-200 dark:border-dark-200">
               <div>
                 <p className="text-xs sm:text-sm font-medium text-black dark:text-white">
-                  Manage Connections
+                  Manage Providers
                 </p>
                 <p className="text-[10px] sm:text-xs text-black/50 dark:text-white/50 mt-0.5">
-                  Add connections to access AI models
+                  Add and configure your model providers
                 </p>
               </div>
               <AddProvider
@@ -104,17 +100,14 @@ const SetupConfig = ({
                     Loading providers...
                   </p>
                 </div>
-              ) : visibleProviders.length === 0 ? (
+              ) : providers.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-8 md:py-12 text-center">
                   <p className="text-xs sm:text-sm font-medium text-black/70 dark:text-white/70">
-                    No connections configured
+                    No providers configured
-                  </p>
-                  <p className="text-[10px] sm:text-xs text-black/50 dark:text-white/50 mt-1">
-                    Click &quot;Add Connection&quot; above to get started
                   </p>
                 </div>
               ) : (
-                visibleProviders.map((provider) => (
+                providers.map((provider) => (
                   <ModelProvider
                     key={`provider-${provider.id}`}
                     fields={

src/lib/config/clientRegistry.ts

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

src/lib/config/index.ts

@@ -13,15 +13,14 @@ class ConfigManager {
   currentConfig: Config = {
     version: this.configVersion,
     setupComplete: false,
-    preferences: {},
+    general: {},
-    personalization: {},
     modelProviders: [],
     search: {
       searxngURL: '',
     },
   };
   uiConfigSections: UIConfigSections = {
-    preferences: [
+    general: [
       {
         name: 'Theme',
         key: 'theme',
@@ -41,6 +40,16 @@ 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',
@@ -60,27 +69,6 @@ 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,17 +38,11 @@ type TextareaUIConfigField = BaseUIConfigField & {
   default?: string;
 };
 
-type SwitchUIConfigField = BaseUIConfigField & {
-  type: 'switch';
-  default?: boolean;
-};
-
 type UIConfigField =
   | StringUIConfigField
   | SelectUIConfigField
   | PasswordUIConfigField
-  | TextareaUIConfigField
+  | TextareaUIConfigField;
-  | SwitchUIConfigField;
 
 type ConfigModelProvider = {
   id: string;
@@ -63,10 +57,7 @@ type ConfigModelProvider = {
 type Config = {
   version: number;
   setupComplete: boolean;
-  preferences: {
+  general: {
-    [key: string]: any;
-  };
-  personalization: {
     [key: string]: any;
   };
   modelProviders: ConfigModelProvider[];
@@ -89,8 +80,7 @@ type ModelProviderUISection = {
 };
 
 type UIConfigSections = {
-  preferences: UIConfigField[];
+  general: UIConfigField[];
-  personalization: UIConfigField[];
   modelProviders: ModelProviderUISection[];
   search: UIConfigField[];
 };
@@ -105,5 +95,4 @@ export type {
   ModelProviderUISection,
   ConfigModelProvider,
   TextareaUIConfigField,
-  SwitchUIConfigField,
 };

src/lib/hooks/useChat.tsx

@@ -21,7 +21,6 @@ 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;
@@ -95,6 +94,17 @@ 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',
@@ -614,13 +624,16 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
 
         const lastMsg = messagesRef.current[messagesRef.current.length - 1];
 
-        const autoMediaSearch = getAutoMediaSearch();
+        const autoImageSearch = localStorage.getItem('autoImageSearch');
+        const autoVideoSearch = localStorage.getItem('autoVideoSearch');
 
-        if (autoMediaSearch) {
+        if (autoImageSearch === 'true') {
           document
             .getElementById(`search-images-${lastMsg.messageId}`)
             ?.click();
+        }
 
+        if (autoVideoSearch === 'true') {
           document
             .getElementById(`search-videos-${lastMsg.messageId}`)
             ?.click();

src/lib/models/providers/gemini.ts

@@ -48,7 +48,7 @@ class GeminiProvider extends BaseModelProvider<GeminiConfig> {
     let defaultChatModels: Model[] = [];
 
     data.models.forEach((m: any) => {
-      if (m.supportedGenerationMethods.some((genMethod: string) => genMethod === 'embedText' || genMethod === 'embedContent')) {
+      if (m.supportedGenerationMethods.includes('embedText')) {
         defaultEmbeddingModels.push({
           key: m.name,
           name: m.displayName,