feat(docker): update searxng build script

README.md

@@ -1,76 +1,74 @@
-# Perplexica 🔍
+# 🚀 Perplexica - An AI-powered search engine 🔎 <!-- omit in toc -->
 
-[![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)
+<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>
 
-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.
+### [Warp, the AI Devtool that lives in your terminal](https://www.warp.dev/perplexica)
 
-![preview](.assets/perplexica-screenshot.png)
-
-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
-
-🤖 **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.
-
-⚡ **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.
-
-🎯 **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.
-
-🔍 **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.
-
-📷 **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>
-
-### **✨ [Try Warp - The AI-Powered Terminal →](https://www.warp.dev/perplexica)**
-
-Warp is revolutionizing development workflows with AI-powered features, modern UX, and blazing-fast performance. Used by developers at top companies worldwide.
+[Available for MacOS, Linux, & Windows](https://www.warp.dev/perplexica)
 
 </div>
 
----
+<hr/>
 
-We'd also like to thank the following partners for their generous support:
+[![Discord](https://dcbadge.limes.pink/api/server/26aArMy8tT?style=flat)](https://discord.gg/26aArMy8tT)
 
-<table>
-  <tr>
-    <td width="100" align="center">
-      <a href="https://dashboard.exa.ai" target="_blank">
-        <img src=".assets/sponsers/exa.png" alt="Exa" width="80" height="80" style="border-radius: .75rem;" />
-      </a>
-    </td>
-    <td>
-      <a href="https://dashboard.exa.ai">Exa</a> • The Perfect Web Search API for LLMs - web search, crawling, deep research, and answer APIs
-    </td>
-  </tr>
-</table>
+![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).
+
+## Preview
+
+![video-preview](.assets/perplexica-preview.gif)
+
+## Features
+
+- **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.
+
+It has many more features like image and video search. Some of the planned features are mentioned in [upcoming features](#upcoming-features).
 
 ## Installation
 
@@ -81,19 +79,19 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 Perplexica can be easily run using Docker. Simply run the following command:
 
 ```bash
-docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:latest
+docker run -p 3000:3000 --name perplexica itzcrazykns1337/perplexica:latest
 ```
 
 This will pull and start the Perplexica container with the bundled SearxNG search engine. Once running, open your browser and navigate to http://localhost:3000. You can then configure your settings (API keys, models, etc.) directly in the setup screen.
 
-**Note**: The image includes both Perplexica and SearxNG, so no additional setup is required. The `-v` flags create persistent volumes for your data and uploaded files.
+**Note**: The image includes both Perplexica and SearxNG, so no additional setup is required.
 
 #### Using Perplexica with Your Own SearxNG Instance
 
 If you already have SearxNG running, you can use the slim version of Perplexica:
 
 ```bash
-docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:slim-latest
+docker run -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 --name perplexica itzcrazykns1337/perplexica:slim-latest
 ```
 
 **Important**: Make sure your SearxNG instance has:
@@ -120,7 +118,7 @@ If you prefer to build from source or need more control:
 
    ```bash
    docker build -t perplexica .
-   docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica perplexica
+   docker run -p 3000:3000 --name perplexica perplexica
    ```
 
 5. Access Perplexica at http://localhost:3000 and configure your settings in the setup screen.

app.dockerfile

@@ -0,0 +1,37 @@
+FROM node:24.5.0-slim AS builder
+
+RUN apt-get update && apt-get install -y python3 python3-pip sqlite3 && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /home/perplexica
+
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile --network-timeout 600000
+
+COPY tsconfig.json next.config.mjs next-env.d.ts postcss.config.js drizzle.config.ts tailwind.config.ts ./
+COPY src ./src
+COPY public ./public
+COPY drizzle ./drizzle
+
+RUN mkdir -p /home/perplexica/data
+RUN yarn build
+
+FROM node:24.5.0-slim
+
+RUN apt-get update && apt-get install -y python3 python3-pip sqlite3 && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /home/perplexica
+
+COPY --from=builder /home/perplexica/public ./public
+COPY --from=builder /home/perplexica/.next/static ./public/_next/static
+
+COPY --from=builder /home/perplexica/.next/standalone ./
+COPY --from=builder /home/perplexica/data ./data
+COPY drizzle ./drizzle
+
+RUN mkdir /home/perplexica/uploads
+
+COPY entrypoint.sh ./entrypoint.sh
+RUN chmod +x ./entrypoint.sh
+RUN sed -i 's/\r$//' ./entrypoint.sh || true
+
+CMD ["/home/perplexica/entrypoint.sh"]

docker-compose.yaml

@@ -1,15 +0,0 @@
-services:
-  perplexica:
-    image: itzcrazykns1337/perplexica:latest
-    ports:
-      - '3000:3000'
-    volumes:
-      - data:/home/perplexica/data
-      - uploads:/home/perplexica/uploads
-    restart: unless-stopped
-
-volumes:
-  data:
-    name: 'perplexica-data'
-  uploads:
-    name: 'perplexica-uploads'

docs/API/SEARCH.md

@@ -17,7 +17,6 @@ Before making search requests, you'll need to get the available providers and th
 Returns a list of all active providers with their available chat and embedding models.
 
 **Response Example:**
-
 ```json
 {
   "providers": [

docs/installation/UPDATING.md

@@ -10,7 +10,7 @@ Simply pull the latest image and restart your container:
 docker pull itzcrazykns1337/perplexica:latest
 docker stop perplexica
 docker rm perplexica
-docker run -d -p 3000:3000 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:latest
+docker run -p 3000:3000 --name perplexica itzcrazykns1337/perplexica:latest
 ```
 
 For slim version:
@@ -19,7 +19,7 @@ For slim version:
 docker pull itzcrazykns1337/perplexica:slim-latest
 docker stop perplexica
 docker rm perplexica
-docker run -d -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 -v perplexica-data:/home/perplexica/data -v perplexica-uploads:/home/perplexica/uploads --name perplexica itzcrazykns1337/perplexica:slim-latest
+docker run -p 3000:3000 -e SEARXNG_API_URL=http://your-searxng-url:8080 --name perplexica itzcrazykns1337/perplexica:slim-latest
 ```
 
 Once updated, go to http://localhost:3000 and verify the latest changes. Your settings are preserved automatically.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.11.2",
+  "version": "1.11.0",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {

src/app/c/[chatId]/page.tsx

@@ -1,10 +1,17 @@
 'use client';
 
 import ChatWindow from '@/components/ChatWindow';
+import { useParams } from 'next/navigation';
 import React from 'react';
+import { ChatProvider } from '@/lib/hooks/useChat';
 
 const Page = () => {
-  return <ChatWindow />;
+  const { chatId }: { chatId: string } = useParams();
+  return (
+    <ChatProvider id={chatId}>
+      <ChatWindow />
+    </ChatProvider>
+  );
 };
 
 export default Page;

src/app/layout.tsx

@@ -9,7 +9,6 @@ import { Toaster } from 'sonner';
 import ThemeProvider from '@/components/theme/Provider';
 import configManager from '@/lib/config';
 import SetupWizard from '@/components/Setup/SetupWizard';
-import { ChatProvider } from '@/lib/hooks/useChat';
 
 const montserrat = Montserrat({
   weight: ['300', '400', '500', '700'],
@@ -37,7 +36,7 @@ export default function RootLayout({
       <body className={cn('h-full', montserrat.className)}>
         <ThemeProvider>
           {setupComplete ? (
-            <ChatProvider>
+            <>
               <Sidebar>{children}</Sidebar>
               <Toaster
                 toastOptions={{
@@ -48,7 +47,7 @@ export default function RootLayout({
                   },
                 }}
               />
-            </ChatProvider>
+            </>
           ) : (
             <SetupWizard configSections={configSections} />
           )}

src/app/page.tsx

@@ -1,5 +1,7 @@
 import ChatWindow from '@/components/ChatWindow';
+import { ChatProvider } from '@/lib/hooks/useChat';
 import { Metadata } from 'next';
+import { Suspense } from 'react';
 
 export const metadata: Metadata = {
   title: 'Chat - Perplexica',
@@ -7,7 +9,15 @@ export const metadata: Metadata = {
 };
 
 const Home = () => {
-  return <ChatWindow />;
+  return (
+    <div>
+      <Suspense>
+        <ChatProvider>
+          <ChatWindow />
+        </ChatProvider>
+      </Suspense>
+    </div>
+  );
 };
 
 export default Home;

src/components/ChatWindow.tsx

@@ -9,7 +9,6 @@ import Link from 'next/link';
 import NextError from 'next/error';
 import { useChat } from '@/lib/hooks/useChat';
 import Loader from './ui/Loader';
-import SettingsButtonMobile from './Settings/SettingsButtonMobile';
 
 export interface BaseMessage {
   chatId: string;
@@ -57,7 +56,9 @@ const ChatWindow = () => {
     return (
       <div className="relative">
         <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
-          <SettingsButtonMobile />
+          <Link href="/settings">
+            <Settings className="cursor-pointer lg:hidden" />
+          </Link>
         </div>
         <div className="flex flex-col items-center justify-center min-h-screen">
           <p className="dark:text-white/70 text-black/70 text-sm">

src/components/MessageInputActions/ChatModelSelector.tsx

@@ -8,16 +8,17 @@ import {
   PopoverPanel,
   Transition,
 } from '@headlessui/react';
-import { Fragment, useEffect, useMemo, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { MinimalProvider } from '@/lib/models/types';
-import { useChat } from '@/lib/hooks/useChat';
 
 const ModelSelector = () => {
   const [providers, setProviders] = useState<MinimalProvider[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-
-  const { setChatModelProvider, chatModelProvider } = useChat();
+  const [selectedModel, setSelectedModel] = useState<{
+    providerId: string;
+    modelKey: string;
+  } | null>(null);
 
   useEffect(() => {
     const loadProviders = async () => {
@@ -29,8 +30,28 @@ const ModelSelector = () => {
           throw new Error('Failed to fetch providers');
         }
 
-        const data: { providers: MinimalProvider[] } = await res.json();
-        setProviders(data.providers);
+        const data = await res.json();
+        setProviders(data.providers || []);
+
+        const savedProviderId = localStorage.getItem('chatModelProviderId');
+        const savedModelKey = localStorage.getItem('chatModelKey');
+
+        if (savedProviderId && savedModelKey) {
+          setSelectedModel({
+            providerId: savedProviderId,
+            modelKey: savedModelKey,
+          });
+        } else if (data.providers && data.providers.length > 0) {
+          const firstProvider = data.providers.find(
+            (p: MinimalProvider) => p.chatModels.length > 0,
+          );
+          if (firstProvider && firstProvider.chatModels[0]) {
+            setSelectedModel({
+              providerId: firstProvider.id,
+              modelKey: firstProvider.chatModels[0].key,
+            });
+          }
+        }
       } catch (error) {
         console.error('Error loading providers:', error);
       } finally {
@@ -41,32 +62,13 @@ const ModelSelector = () => {
     loadProviders();
   }, []);
 
-  const orderedProviders = useMemo(() => {
-    if (!chatModelProvider?.providerId) return providers;
-
-    const currentProviderIndex = providers.findIndex(
-      (p) => p.id === chatModelProvider.providerId,
-    );
-
-    if (currentProviderIndex === -1) {
-      return providers;
-    }
-
-    const selectedProvider = providers[currentProviderIndex];
-    const remainingProviders = providers.filter(
-      (_, index) => index !== currentProviderIndex,
-    );
-
-    return [selectedProvider, ...remainingProviders];
-  }, [providers, chatModelProvider]);
-
   const handleModelSelect = (providerId: string, modelKey: string) => {
-    setChatModelProvider({ providerId, key: modelKey });
+    setSelectedModel({ providerId, modelKey });
     localStorage.setItem('chatModelProviderId', providerId);
     localStorage.setItem('chatModelKey', modelKey);
   };
 
-  const filteredProviders = orderedProviders
+  const filteredProviders = providers
     .map((provider) => ({
       ...provider,
       chatModels: provider.chatModels.filter(
@@ -138,16 +140,15 @@ const ModelSelector = () => {
 
                       <div className="flex flex-col px-2 py-2 space-y-0.5">
                         {provider.chatModels.map((model) => (
-                          <button
+                          <PopoverButton
                             key={model.key}
                             onClick={() =>
                               handleModelSelect(provider.id, model.key)
                             }
-                            type="button"
                             className={cn(
                               'px-3 py-2 flex items-center justify-between text-start duration-200 cursor-pointer transition rounded-lg group',
-                              chatModelProvider?.providerId === provider.id &&
-                                chatModelProvider?.key === model.key
+                              selectedModel?.providerId === provider.id &&
+                                selectedModel?.modelKey === model.key
                                 ? 'bg-light-secondary dark:bg-dark-secondary'
                                 : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
                             )}
@@ -157,9 +158,8 @@ const ModelSelector = () => {
                                 size={15}
                                 className={cn(
                                   'shrink-0',
-                                  chatModelProvider?.providerId ===
-                                    provider.id &&
-                                    chatModelProvider?.key === model.key
+                                  selectedModel?.providerId === provider.id &&
+                                    selectedModel?.modelKey === model.key
                                     ? 'text-sky-500'
                                     : 'text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70',
                                 )}
@@ -167,9 +167,8 @@ const ModelSelector = () => {
                               <p
                                 className={cn(
                                   'text-sm truncate',
-                                  chatModelProvider?.providerId ===
-                                    provider.id &&
-                                    chatModelProvider?.key === model.key
+                                  selectedModel?.providerId === provider.id &&
+                                    selectedModel?.modelKey === model.key
                                     ? 'text-sky-500 font-medium'
                                     : 'text-black/70 dark:text-white/70 group-hover:text-black dark:group-hover:text-white',
                                 )}
@@ -177,7 +176,7 @@ const ModelSelector = () => {
                                 {model.name}
                               </p>
                             </div>
-                          </button>
+                          </PopoverButton>
                         ))}
                       </div>
 

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/AddModelDialog.tsx

@@ -97,7 +97,7 @@ const AddModel = ({
             >
               <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 text-sm">
+                  <h3 className="text-black/90 dark:text-white/90 font-medium">
                     Add new {type === 'chat' ? 'chat' : 'embedding'} model
                   </h3>
                 </div>
@@ -115,7 +115,7 @@ const AddModel = ({
                         <input
                           value={modelName}
                           onChange={(e) => setModelName(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 text-[13px] 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"
+                          className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 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., GPT-4"
                           type="text"
                           required
@@ -128,7 +128,7 @@ const AddModel = ({
                         <input
                           value={modelKey}
                           onChange={(e) => setModelKey(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 text-[13px] 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"
+                          className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 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., gpt-4"
                           type="text"
                           required
@@ -140,7 +140,7 @@ const AddModel = ({
                       <button
                         type="submit"
                         disabled={loading}
-                        className="px-4 py-2 rounded-lg text-[13px] bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
+                        className="px-4 py-2 rounded-lg text-sm bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
                       >
                         {loading ? (
                           <Loader2 className="animate-spin" size={16} />

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);
@@ -96,10 +96,10 @@ const AddProvider = ({
     <>
       <button
         onClick={() => setOpen(true)}
-        className="px-3 md:px-4 py-1.5 md:py-2 rounded-lg text-xs sm:text-xs 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"
+        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 && (
@@ -119,8 +119,8 @@ const AddProvider = ({
               <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">
                 <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 text-sm">
-                      Add new connection
+                    <h3 className="text-black/90 dark:text-white/90 font-medium">
+                      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}
                         />
@@ -178,7 +178,7 @@ const AddProvider = ({
                                 [field.key]: 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-[13px] 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"
+                            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={
                               (field as StringUIConfigField).placeholder
                             }
@@ -194,12 +194,12 @@ const AddProvider = ({
                     <button
                       type="submit"
                       disabled={loading}
-                      className="px-4 py-2 rounded-lg text-[13px] bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
+                      className="px-4 py-2 rounded-lg text-sm bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
                     >
                       {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">
-                    Are you sure you want to delete the connection &quot;
+                  <p className="text-SM text-black/60 dark:text-white/60">
+                    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,157 +66,150 @@ 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="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
+        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)}
+      >
+        <p className="text-sm lg:text-base text-black dark:text-white font-medium">
+          {modelProvider.name}
+        </p>
+        <div className="flex items-center gap-4">
+          <div className="flex flex-row items-center">
+            <UpdateProvider
+              fields={fields}
+              modelProvider={modelProvider}
+              setProviders={setProviders}
+            />
+            <DeleteProvider
+              modelProvider={modelProvider}
+              setProviders={setProviders}
+            />
           </div>
-          <div className="flex flex-col">
-            <p className="text-sm lg:text-sm text-black dark:text-white font-medium">
-              {modelProvider.name}
-            </p>
-            {modelCount > 0 && (
-              <p className="text-[10px] lg:text-[11px] text-black/50 dark:text-white/50">
-                {modelCount} model{modelCount !== 1 ? 's' : ''} configured
-              </p>
+          <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>
-        <div className="flex flex-row items-center gap-1">
-          <UpdateProvider
-            fields={fields}
-            modelProvider={modelProvider}
-            setProviders={setProviders}
-          />
-          <DeleteProvider
-            modelProvider={modelProvider}
-            setProviders={setProviders}
           />
         </div>
       </div>
-      <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-[11px] font-medium text-black/70 dark:text-white/70 uppercase tracking-wide">
-              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') ? (
-              <div className="flex flex-row items-center gap-2 text-xs lg:text-xs 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.chatModels.find((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-xs 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"
-                  >
-                    <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>
+      <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">
+              {modelProvider.chatModels.length > 0 && (
+                <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 text-black/70 dark:text-white/70">
+                      Chat models
+                    </p>
+                    <AddModel
+                      providerId={modelProvider.id}
+                      setProviders={setProviders}
+                      type="chat"
+                    />
                   </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-[11px] font-medium text-black/70 dark:text-white/70 uppercase tracking-wide">
-              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') ? (
-              <div className="flex flex-row items-center gap-2 text-xs lg:text-xs 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')
-                      ?.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-xs 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"
-                  >
-                    <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 className="flex flex-col gap-2">
+                    {modelProvider.chatModels.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.chatModels.find(
+                              (m) => m.key === 'error',
+                            )?.name
+                          }
+                        </span>
+                      </div>
+                    ) : (
+                      <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 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);
+                              }}
+                            >
+                              <X size={12} />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
                   </div>
-                ))}
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
+                </div>
+              )}
+              {modelProvider.embeddingModels.length > 0 && (
+                <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 text-black/70 dark:text-white/70">
+                      Embedding models
+                    </p>
+                    <AddModel
+                      providerId={modelProvider.id}
+                      setProviders={setProviders}
+                      type="embedding"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    {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',
+                            )?.name
+                          }
+                        </span>
+                      </div>
+                    ) : (
+                      <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 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);
+                              }}
+                            >
+                              <X size={12} />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };

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

@@ -1,6 +1,5 @@
 import Select from '@/components/ui/Select';
 import { ConfigModelProvider } from '@/lib/config/types';
-import { useChat } from '@/lib/hooks/useChat';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
@@ -12,40 +11,30 @@ const ModelSelect = ({
   type: 'chat' | 'embedding';
 }) => {
   const [selectedModel, setSelectedModel] = useState<string>(
-    type === 'chat'
-      ? `${localStorage.getItem('chatModelProviderId')}/${localStorage.getItem('chatModelKey')}`
-      : `${localStorage.getItem('embeddingModelProviderId')}/${localStorage.getItem('embeddingModelKey')}`,
+    `${providers[0]?.id}/${providers[0].embeddingModels[0]?.key}`,
   );
   const [loading, setLoading] = useState(false);
-  const { setChatModelProvider, setEmbeddingModelProvider } = useChat();
 
   const handleSave = async (newValue: string) => {
     setLoading(true);
     setSelectedModel(newValue);
-
+    console.log(newValue);
     try {
       if (type === 'chat') {
-        const providerId = newValue.split('/')[0];
-        const modelKey = newValue.split('/').slice(1).join('/');
-
-        localStorage.setItem('chatModelProviderId', providerId);
-        localStorage.setItem('chatModelKey', modelKey);
-
-        setChatModelProvider({
-          providerId: providerId,
-          key: modelKey,
-        });
+        localStorage.setItem('chatModelProviderId', newValue.split('/')[0]);
+        localStorage.setItem(
+          'chatModelKey',
+          newValue.split('/').slice(1).join('/'),
+        );
       } else {
-        const providerId = newValue.split('/')[0];
-        const modelKey = newValue.split('/').slice(1).join('/');
-
-        localStorage.setItem('embeddingModelProviderId', providerId);
-        localStorage.setItem('embeddingModelKey', modelKey);
-
-        setEmbeddingModelProvider({
-          providerId: providerId,
-          key: modelKey,
-        });
+        localStorage.setItem(
+          'embeddingModelProviderId',
+          newValue.split('/')[0],
+        );
+        localStorage.setItem(
+          'embeddingModelKey',
+          newValue.split('/').slice(1).join('/'),
+        );
       }
     } catch (error) {
       console.error('Error saving config:', error);
@@ -59,13 +48,13 @@ const ModelSelect = ({
     <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="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-sm text-black dark:text-white">
+          <h4 className="text-sm lg:text-base text-black dark:text-white">
             Select {type === 'chat' ? 'Chat Model' : 'Embedding Model'}
           </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'
-              : 'Choose which model to use for generating embeddings'}
+              ? 'Select the model to use for chat responses'
+              : 'Select the model to use for embeddings'}
           </p>
         </div>
         <Select
@@ -86,7 +75,7 @@ const ModelSelect = ({
                   })),
                 )
           }
-          className="!text-xs lg:!text-[13px]"
+          className="!text-xs lg:!text-sm"
           loading={loading}
           disabled={loading}
         />

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

@@ -20,7 +20,7 @@ const Models = ({
   return (
     <div className="flex-1 space-y-6 overflow-y-auto py-6">
       <div className="flex flex-col px-6 gap-y-4">
-        <h3 className="text-xs lg:text-xs text-black/70 dark:text-white/70">
+        <h3 className="text-xs lg:text-sm text-black/70 dark:text-white/70">
           Select models
         </h3>
         <ModelSelect
@@ -38,51 +38,23 @@ const Models = ({
       </div>
       <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-xs text-black/70 dark:text-white/70">
-          Manage connections
+        <p className="text-xs lg:text-sm text-black/70 dark:text-white/70">
+          Manage model provider
         </p>
         <AddProvider modelProviders={fields} setProviders={setProviders} />
       </div>
       <div className="flex flex-col px-6 gap-y-4">
-        {providers.length === 0 ? (
-          <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={
-                (fields.find((f) => f.key === provider.type)?.fields ??
-                  []) as UIConfigField[]
-              }
-              modelProvider={provider}
-              setProviders={setProviders}
-            />
-          ))
-        )}
+        {providers.map((provider) => (
+          <ModelProvider
+            key={`provider-${provider.id}`}
+            fields={
+              (fields.find((f) => f.key === provider.type)?.fields ??
+                []) as UIConfigField[]
+            }
+            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);
@@ -109,8 +109,8 @@ const UpdateProvider = ({
               <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">
                 <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 text-sm">
-                      Update connection
+                    <h3 className="text-black/90 dark:text-white/90 font-medium">
+                      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}
                         />
@@ -150,7 +150,7 @@ const UpdateProvider = ({
                                 [field.key]: 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-[13px] 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"
+                            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={
                               (field as StringUIConfigField).placeholder
                             }
@@ -166,12 +166,12 @@ const UpdateProvider = ({
                     <button
                       type="submit"
                       disabled={loading}
-                      className="px-4 py-2 rounded-lg text-[13px] bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
+                      className="px-4 py-2 rounded-lg text-sm bg-sky-500 text-white font-medium disabled:opacity-85 hover:opacity-85 active:scale-95 transition duration-200"
                     >
                       {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/SettingsButtonMobile.tsx

@@ -9,7 +9,7 @@ const SettingsButtonMobile = () => {
   return (
     <>
       <button className="lg:hidden" onClick={() => setIsOpen(true)}>
-        <Settings size={18} />
+        <Settings size={18}/>
       </button>
       <AnimatePresence>
         {isOpen && <SettingsDialogue isOpen={isOpen} setIsOpen={setIsOpen} />}

src/components/Settings/SettingsDialogue.tsx

@@ -4,10 +4,9 @@ import {
   BrainCog,
   ChevronLeft,
   Search,
-  Sliders,
-  ToggleRight,
+  Settings,
 } 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',
-    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: 'general',
+    name: 'General',
+    description: 'Adjust common settings.',
+    icon: Settings,
+    component: General,
+    dataAdd: 'general',
   },
   {
     key: 'models',
     name: 'Models',
-    description: 'Connect to AI services and manage connections.',
+    description: 'Configure model settings.',
     icon: BrainCog,
     component: Models,
     dataAdd: 'modelProviders',
@@ -176,7 +166,7 @@ const SettingsDialogue = ({
                   <div className="flex flex-1 flex-col overflow-hidden">
                     <div className="border-b border-light-200/60 px-6 pb-6 lg:pt-6 dark:border-dark-200/60 flex-shrink-0">
                       <div className="flex flex-col">
-                        <h4 className="font-medium text-black dark:text-white text-sm lg:text-sm">
+                        <h4 className="font-medium text-black dark:text-white text-sm lg:text-base">
                           {selectedSection.name}
                         </h4>
                         <p className="text-[11px] lg:text-xs text-black/50 dark:text-white/50">

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,
@@ -64,7 +62,7 @@ const SettingsSelect = ({
     <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="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-sm text-black dark:text-white">
+          <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">
@@ -135,7 +133,7 @@ const SettingsInput = ({
     <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="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-sm text-black dark:text-white">
+          <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">
@@ -147,7 +145,7 @@ const SettingsInput = ({
             value={value ?? field.default ?? ''}
             onChange={(event) => setValue(event.target.value)}
             onBlur={(event) => handleSave(event.target.value)}
-            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!text-[13px] 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"
+            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!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={field.placeholder}
             type="text"
             disabled={loading}
@@ -211,7 +209,7 @@ const SettingsTextarea = ({
     <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="space-y-3 lg:space-y-5">
         <div>
-          <h4 className="text-sm lg:text-sm text-black dark:text-white">
+          <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">
@@ -223,7 +221,7 @@ const SettingsTextarea = ({
             value={value ?? field.default ?? ''}
             onChange={(event) => setValue(event.target.value)}
             onBlur={(event) => handleSave(event.target.value)}
-            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!text-[13px] 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"
+            className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-3 py-2 lg:px-4 lg:py-3 pr-10 !text-xs lg:!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={field.placeholder}
             rows={4}
             disabled={loading}
@@ -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-sm 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,8 @@ const SetupConfig = ({
     }
   };
 
-  const visibleProviders = providers.filter(
-    (p) => p.name.toLowerCase() !== 'transformers',
-  );
   const hasProviders =
-    visibleProviders.filter((p) => p.chatModels.length > 0).length > 0;
+    providers.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 +82,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 +101,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
-                  </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
+                    No providers configured
                   </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 = () =>
-  getClientConfig('autoMediaSearch', 'true') === 'true';
+export const getAutoImageSearch = () =>
+  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: {},
-    personalization: {},
+    general: {},
     modelProviders: [],
     search: {
       searxngURL: '',
     },
   };
   uiConfigSections: UIConfigSections = {
-    preferences: [
+    general: [
       {
         name: 'Theme',
         key: 'theme',
@@ -41,36 +40,6 @@ class ConfigManager {
         default: 'dark',
         scope: 'client',
       },
-      {
-        name: 'Measurement Unit',
-        key: 'measureUnit',
-        type: 'select',
-        options: [
-          {
-            name: 'Imperial',
-            value: 'Imperial',
-          },
-          {
-            name: 'Metric',
-            value: 'Metric',
-          },
-        ],
-        required: false,
-        description: 'Choose between Metric  and Imperial measurement unit.',
-        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',

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
-  | SwitchUIConfigField;
+  | TextareaUIConfigField;
 
 type ConfigModelProvider = {
   id: string;
@@ -63,10 +57,7 @@ type ConfigModelProvider = {
 type Config = {
   version: number;
   setupComplete: boolean;
-  preferences: {
-    [key: string]: any;
-  };
-  personalization: {
+  general: {
     [key: string]: any;
   };
   modelProviders: ConfigModelProvider[];
@@ -89,8 +80,7 @@ type ModelProviderUISection = {
 };
 
 type UIConfigSections = {
-  preferences: UIConfigField[];
-  personalization: UIConfigField[];
+  general: UIConfigField[];
   modelProviders: ModelProviderUISection[];
   search: UIConfigField[];
 };
@@ -105,5 +95,4 @@ export type {
   ModelProviderUISection,
   ConfigModelProvider,
   TextareaUIConfigField,
-  SwitchUIConfigField,
 };

src/lib/hooks/useChat.tsx

@@ -17,11 +17,10 @@ import {
   useState,
 } from 'react';
 import crypto from 'crypto';
-import { useParams, useSearchParams } from 'next/navigation';
+import { 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;
@@ -49,8 +48,6 @@ type ChatContext = {
   messageAppeared: boolean;
   isReady: boolean;
   hasError: boolean;
-  chatModelProvider: ChatModelProvider;
-  embeddingModelProvider: EmbeddingModelProvider;
   setOptimizationMode: (mode: string) => void;
   setFocusMode: (mode: string) => void;
   setFiles: (files: File[]) => void;
@@ -61,8 +58,6 @@ type ChatContext = {
     rewrite?: boolean,
   ) => Promise<void>;
   rewrite: (messageId: string) => void;
-  setChatModelProvider: (provider: ChatModelProvider) => void;
-  setEmbeddingModelProvider: (provider: EmbeddingModelProvider) => void;
 };
 
 export interface File {
@@ -95,6 +90,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',
@@ -250,24 +256,25 @@ export const chatContext = createContext<ChatContext>({
   sections: [],
   notFound: false,
   optimizationMode: '',
-  chatModelProvider: { key: '', providerId: '' },
-  embeddingModelProvider: { key: '', providerId: '' },
   rewrite: () => {},
   sendMessage: async () => {},
   setFileIds: () => {},
   setFiles: () => {},
   setFocusMode: () => {},
   setOptimizationMode: () => {},
-  setChatModelProvider: () => {},
-  setEmbeddingModelProvider: () => {},
 });
 
-export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
-  const params: { chatId: string } = useParams();
+export const ChatProvider = ({
+  children,
+  id,
+}: {
+  children: React.ReactNode;
+  id?: string;
+}) => {
   const searchParams = useSearchParams();
   const initialMessage = searchParams.get('q');
 
-  const [chatId, setChatId] = useState<string | undefined>(params.chatId);
+  const [chatId, setChatId] = useState<string | undefined>(id);
   const [newChatCreated, setNewChatCreated] = useState(false);
 
   const [loading, setLoading] = useState(false);
@@ -436,19 +443,6 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    if (params.chatId && params.chatId !== chatId) {
-      setChatId(params.chatId);
-      setMessages([]);
-      setChatHistory([]);
-      setFiles([]);
-      setFileIds([]);
-      setIsMessagesLoaded(false);
-      setNotFound(false);
-      setNewChatCreated(false);
-    }
-  }, [params.chatId, chatId]);
-
   useEffect(() => {
     if (
       chatId &&
@@ -472,7 +466,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
       setChatId(crypto.randomBytes(20).toString('hex'));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatId, isMessagesLoaded, newChatCreated, messages.length]);
+  }, []);
 
   useEffect(() => {
     messagesRef.current = messages;
@@ -525,7 +519,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
     messageId,
     rewrite = false,
   ) => {
-    if (loading || !message) return;
+    if (loading) return;
     setLoading(true);
     setMessageAppeared(false);
 
@@ -614,13 +608,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();
@@ -746,10 +743,6 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         setOptimizationMode,
         rewrite,
         sendMessage,
-        setChatModelProvider,
-        chatModelProvider,
-        embeddingModelProvider,
-        setEmbeddingModelProvider,
       }}
     >
       {children}

src/lib/huggingfaceTransformer.ts

@@ -0,0 +1,76 @@
+import { Embeddings, type EmbeddingsParams } from '@langchain/core/embeddings';
+import { chunkArray } from '@langchain/core/utils/chunk_array';
+
+export interface HuggingFaceTransformersEmbeddingsParams
+  extends EmbeddingsParams {
+  modelName: string;
+
+  model: string;
+
+  timeout?: number;
+
+  batchSize?: number;
+
+  stripNewLines?: boolean;
+}
+
+export class HuggingFaceTransformersEmbeddings
+  extends Embeddings
+  implements HuggingFaceTransformersEmbeddingsParams
+{
+  modelName = 'Xenova/all-MiniLM-L6-v2';
+
+  model = 'Xenova/all-MiniLM-L6-v2';
+
+  batchSize = 512;
+
+  stripNewLines = true;
+
+  timeout?: number;
+
+  constructor(fields?: Partial<HuggingFaceTransformersEmbeddingsParams>) {
+    super(fields ?? {});
+
+    this.modelName = fields?.model ?? fields?.modelName ?? this.model;
+    this.model = this.modelName;
+    this.stripNewLines = fields?.stripNewLines ?? this.stripNewLines;
+    this.timeout = fields?.timeout;
+  }
+
+  async embedDocuments(texts: string[]): Promise<number[][]> {
+    const batches = chunkArray(
+      this.stripNewLines ? texts.map((t) => t.replace(/\n/g, ' ')) : texts,
+      this.batchSize,
+    );
+
+    const batchRequests = batches.map((batch) => this.runEmbedding(batch));
+    const batchResponses = await Promise.all(batchRequests);
+    const embeddings: number[][] = [];
+
+    for (let i = 0; i < batchResponses.length; i += 1) {
+      const batchResponse = batchResponses[i];
+      for (let j = 0; j < batchResponse.length; j += 1) {
+        embeddings.push(batchResponse[j]);
+      }
+    }
+
+    return embeddings;
+  }
+
+  async embedQuery(text: string): Promise<number[]> {
+    const data = await this.runEmbedding([
+      this.stripNewLines ? text.replace(/\n/g, ' ') : text,
+    ]);
+    return data[0];
+  }
+
+  private async runEmbedding(texts: string[]) {
+    const { pipeline } = await import('@huggingface/transformers');
+    const pipe = await pipeline('feature-extraction', this.model);
+
+    return this.caller.call(async () => {
+      const output = await pipe(texts, { pooling: 'mean', normalize: true });
+      return output.tolist();
+    });
+  }
+}

src/lib/models/providers/gemini.ts

@@ -48,12 +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,

src/lib/models/providers/transformers.ts

@@ -4,7 +4,8 @@ import BaseModelProvider from './baseProvider';
 import { Embeddings } from '@langchain/core/embeddings';
 import { UIConfigField } from '@/lib/config/types';
 import { getConfiguredModelProviderById } from '@/lib/config/serverRegistry';
-import { HuggingFaceTransformersEmbeddings } from '@langchain/community/embeddings/huggingface_transformers';
+import { HuggingFaceTransformersEmbeddings } from '@/lib/huggingfaceTransformer';
+
 interface TransformersConfig {}
 
 const defaultEmbeddingModels: Model[] = [