feat(docker): update searxng build script

README.md

@@ -79,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:
@@ -118,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/Models/ModelProvider.tsx

@@ -112,96 +112,100 @@ const ModelProvider = ({
           >
             <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 text-black/70 dark:text-white/70">
-                    Chat models
-                  </p>
-                  <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-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);
-                            }}
+              {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 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"
                           >
-                            <X size={12} />
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  )}
+                            <span>{model.name}</span>
+                            <button
+                              onClick={() => {
+                                handleModelDelete('chat', model.key);
+                              }}
+                            >
+                              <X size={12} />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
                 </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 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);
-                            }}
+              )}
+              {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"
                           >
-                            <X size={12} />
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  )}
+                            <span>{model.name}</span>
+                            <button
+                              onClick={() => {
+                                handleModelDelete('embedding', model.key);
+                              }}
+                            >
+                              <X size={12} />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           </motion.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);

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/Setup/SetupConfig.tsx

@@ -63,7 +63,8 @@ const SetupConfig = ({
     }
   };
 
-  const hasProviders = providers.length > 0;
+  const hasProviders =
+    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">

src/lib/config/index.ts

@@ -50,25 +50,6 @@ class ConfigManager {
           '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',
-        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',
-      },
     ],
     modelProviders: [],
     search: [

src/lib/hooks/useChat.tsx

@@ -17,7 +17,7 @@ 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';
@@ -48,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;
@@ -60,8 +58,6 @@ type ChatContext = {
     rewrite?: boolean,
   ) => Promise<void>;
   rewrite: (messageId: string) => void;
-  setChatModelProvider: (provider: ChatModelProvider) => void;
-  setEmbeddingModelProvider: (provider: EmbeddingModelProvider) => void;
 };
 
 export interface File {
@@ -260,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);
@@ -446,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 &&
@@ -482,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;
@@ -535,7 +519,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
     messageId,
     rewrite = false,
   ) => {
-    if (loading || !message) return;
+    if (loading) return;
     setLoading(true);
     setMessageAppeared(false);
 
@@ -759,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/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[] = [