Merge pull request #857 from skoved/fix-light-mode

make file icon in attachment modal in chat page fit light theme better

README.md

@@ -53,7 +53,7 @@ Want to know more about its architecture and how it works? You can read it [here
 
 ## Features
 
-- **Local LLMs**: You can make use local LLMs such as Llama3 and Mixtral using Ollama.
+- **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.
@@ -87,6 +87,7 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 4. Rename the `sample.config.toml` file to `config.toml`. For Docker setups, you need only fill in the following fields:
 
    - `OPENAI`: Your OpenAI API key. **You only need to fill this if you wish to use OpenAI's models**.
+   - `CUSTOM_OPENAI`: Your OpenAI-API-compliant local server URL, model name, and API key. You should run your local server with host set to `0.0.0.0`, take note of which port number it is running on, and then use that port number to set `API_URL = http://host.docker.internal:PORT_NUMBER`. You must specify the model name, such as `MODEL_NAME = "unsloth/DeepSeek-R1-0528-Qwen3-8B-GGUF:Q4_K_XL"`. Finally, set `API_KEY` to the appropriate value. If you have not defined an API key, just put anything you want in-between the quotation marks: `API_KEY = "whatever-you-want-but-not-blank"` **You only need to configure these settings if you want to use a local OpenAI-compliant server, such as Llama.cpp's [`llama-server`](https://github.com/ggml-org/llama.cpp/blob/master/tools/server/README.md)**.
    - `OLLAMA`: Your Ollama API URL. You should enter it as `http://host.docker.internal:PORT_NUMBER`. If you installed Ollama on port 11434, use `http://host.docker.internal:11434`. For other ports, adjust accordingly. **You need to fill this if you wish to use Ollama's models instead of OpenAI's**.
    - `GROQ`: Your Groq API key. **You only need to fill this if you wish to use Groq's hosted models**.
    - `ANTHROPIC`: Your Anthropic API key. **You only need to fill this if you wish to use Anthropic models**.
@@ -120,7 +121,17 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 
 See the [installation documentation](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/installation) for more information like updating, etc.
 
-### Ollama Connection Errors
+### Troubleshooting
+
+#### Local OpenAI-API-Compliant Servers
+
+If Perplexica tells you that you haven't configured any chat model providers, ensure that:
+
+1. Your server is running on `0.0.0.0` (not `127.0.0.1`) and on the same port you put in the API URL.
+2. You have specified the correct model name loaded by your local LLM server.
+3. You have specified the correct API key, or if one is not defined, you have put *something* in the API key field and not left it empty.
+
+#### Ollama Connection Errors
 
 If you're encountering an Ollama connection error, it is likely due to the backend being unable to connect to Ollama's API. To fix this issue you can:
 

src/app/api/chat/route.ts

@@ -1,11 +1,7 @@
-import prompts from '@/lib/prompts';
-import MetaSearchAgent from '@/lib/search/metaSearchAgent';
 import crypto from 'crypto';
 import { AIMessage, BaseMessage, HumanMessage } from '@langchain/core/messages';
 import { EventEmitter } from 'stream';
 import {
-  chatModelProviders,
-  embeddingModelProviders,
   getAvailableChatModelProviders,
   getAvailableEmbeddingModelProviders,
 } from '@/lib/providers';
@@ -138,6 +134,8 @@ const handleHistorySave = async (
     where: eq(chats.id, message.chatId),
   });
 
+  const fileData = files.map(getFileDetails);
+
   if (!chat) {
     await db
       .insert(chats)
@@ -146,9 +144,15 @@ const handleHistorySave = async (
         title: message.content,
         createdAt: new Date().toString(),
         focusMode: focusMode,
-        files: files.map(getFileDetails),
+        files: fileData,
       })
       .execute();
+  } else if (JSON.stringify(chat.files ?? []) != JSON.stringify(fileData)) {
+    db.update(chats)
+      .set({
+        files: files.map(getFileDetails),
+      })
+      .where(eq(chats.id, message.chatId));
   }
 
   const messageExists = await db.query.messages.findFirst({

src/app/api/config/route.ts

@@ -11,6 +11,7 @@ import {
   getAimlApiKey,
   getLMStudioApiEndpoint,
   updateConfig,
+  getOllamaApiKey,
 } from '@/lib/config';
 import {
   getAvailableChatModelProviders,
@@ -53,6 +54,7 @@ export const GET = async (req: Request) => {
 
     config['openaiApiKey'] = getOpenaiApiKey();
     config['ollamaApiUrl'] = getOllamaApiEndpoint();
+    config['ollamaApiKey'] = getOllamaApiKey();
     config['lmStudioApiUrl'] = getLMStudioApiEndpoint();
     config['anthropicApiKey'] = getAnthropicApiKey();
     config['groqApiKey'] = getGroqApiKey();
@@ -93,6 +95,7 @@ export const POST = async (req: Request) => {
         },
         OLLAMA: {
           API_URL: config.ollamaApiUrl,
+          API_KEY: config.ollamaApiKey,
         },
         DEEPSEEK: {
           API_KEY: config.deepseekApiKey,

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

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

src/app/discover/page.tsx

@@ -91,7 +91,7 @@ const Page = () => {
                 'border-[0.1px] rounded-full text-sm px-3 py-1 text-nowrap transition duration-200 cursor-pointer',
                 activeTopic === t.key
                   ? 'text-cyan-300 bg-cyan-300/30 border-cyan-300/60'
-                  : 'border-white/30 text-white/70 hover:text-white hover:border-white/40 hover:bg-white/5',
+                  : 'border-black/30 dark:border-white/30 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white hover:border-black/40 dark:hover:border-white/40 hover:bg-black/5 dark:hover:bg-white/5',
               )}
               onClick={() => setActiveTopic(t.key)}
             >

src/app/page.tsx

@@ -1,4 +1,5 @@
 import ChatWindow from '@/components/ChatWindow';
+import { ChatProvider } from '@/lib/hooks/useChat';
 import { Metadata } from 'next';
 import { Suspense } from 'react';
 
@@ -11,7 +12,9 @@ const Home = () => {
   return (
     <div>
       <Suspense>
-        <ChatWindow />
+        <ChatProvider>
+          <ChatWindow />
+        </ChatProvider>
       </Suspense>
     </div>
   );

src/app/settings/page.tsx

@@ -21,6 +21,7 @@ interface SettingsType {
   anthropicApiKey: string;
   geminiApiKey: string;
   ollamaApiUrl: string;
+  ollamaApiKey: string;
   lmStudioApiUrl: string;
   deepseekApiKey: string;
   aimlApiKey: string;
@@ -818,6 +819,25 @@ const Page = () => {
                   />
                 </div>
 
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    Ollama API Key (Can be left blank)
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="Ollama API Key"
+                    value={config.ollamaApiKey}
+                    isSaving={savingStates['ollamaApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        ollamaApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('ollamaApiKey', value)}
+                  />
+                </div>
+
                 <div className="flex flex-col space-y-1">
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     GROQ API Key

src/components/Chat.tsx

@@ -5,28 +5,11 @@ import MessageInput from './MessageInput';
 import { File, Message } from './ChatWindow';
 import MessageBox from './MessageBox';
 import MessageBoxLoading from './MessageBoxLoading';
+import { useChat } from '@/lib/hooks/useChat';
+
+const Chat = () => {
+  const { messages, loading, messageAppeared } = useChat();
 
-const Chat = ({
-  loading,
-  messages,
-  sendMessage,
-  messageAppeared,
-  rewrite,
-  fileIds,
-  setFileIds,
-  files,
-  setFiles,
-}: {
-  messages: Message[];
-  sendMessage: (message: string) => void;
-  loading: boolean;
-  messageAppeared: boolean;
-  rewrite: (messageId: string) => void;
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  files: File[];
-  setFiles: (files: File[]) => void;
-}) => {
   const [dividerWidth, setDividerWidth] = useState(0);
   const dividerRef = useRef<HTMLDivElement | null>(null);
   const messageEnd = useRef<HTMLDivElement | null>(null);
@@ -72,12 +55,8 @@ const Chat = ({
               key={i}
               message={msg}
               messageIndex={i}
-              history={messages}
-              loading={loading}
               dividerRef={isLast ? dividerRef : undefined}
               isLast={isLast}
-              rewrite={rewrite}
-              sendMessage={sendMessage}
             />
             {!isLast && msg.role === 'assistant' && (
               <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
@@ -92,14 +71,7 @@ const Chat = ({
           className="bottom-24 lg:bottom-10 fixed z-40"
           style={{ width: dividerWidth }}
         >
-          <MessageInput
+          <MessageInput />
-            loading={loading}
-            sendMessage={sendMessage}
-            fileIds={fileIds}
-            setFileIds={setFileIds}
-            files={files}
-            setFiles={setFiles}
-          />
         </div>
       )}
     </div>

src/components/ChatWindow.tsx

@@ -1,17 +1,13 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
 import { Document } from '@langchain/core/documents';
 import Navbar from './Navbar';
 import Chat from './Chat';
 import EmptyChat from './EmptyChat';
-import crypto from 'crypto';
-import { toast } from 'sonner';
-import { useSearchParams } from 'next/navigation';
-import { getSuggestions } from '@/lib/actions';
 import { Settings } from 'lucide-react';
 import Link from 'next/link';
 import NextError from 'next/error';
+import { useChat } from '@/lib/hooks/useChat';
 
 export type Message = {
   messageId: string;
@@ -29,547 +25,8 @@ export interface File {
   fileId: string;
 }
 
-interface ChatModelProvider {
+const ChatWindow = () => {
-  name: string;
+  const { hasError, isReady, notFound, messages } = useChat();
-  provider: string;
-}
-
-interface EmbeddingModelProvider {
-  name: string;
-  provider: string;
-}
-
-const checkConfig = async (
-  setChatModelProvider: (provider: ChatModelProvider) => void,
-  setEmbeddingModelProvider: (provider: EmbeddingModelProvider) => void,
-  setIsConfigReady: (ready: boolean) => void,
-  setHasError: (hasError: boolean) => void,
-) => {
-  try {
-    let chatModel = localStorage.getItem('chatModel');
-    let chatModelProvider = localStorage.getItem('chatModelProvider');
-    let embeddingModel = localStorage.getItem('embeddingModel');
-    let embeddingModelProvider = localStorage.getItem('embeddingModelProvider');
-
-    const autoImageSearch = localStorage.getItem('autoImageSearch');
-    const autoVideoSearch = localStorage.getItem('autoVideoSearch');
-
-    if (!autoImageSearch) {
-      localStorage.setItem('autoImageSearch', 'true');
-    }
-
-    if (!autoVideoSearch) {
-      localStorage.setItem('autoVideoSearch', 'false');
-    }
-
-    const providers = await fetch(`/api/models`, {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    }).then(async (res) => {
-      if (!res.ok)
-        throw new Error(
-          `Failed to fetch models: ${res.status} ${res.statusText}`,
-        );
-      return res.json();
-    });
-
-    if (
-      !chatModel ||
-      !chatModelProvider ||
-      !embeddingModel ||
-      !embeddingModelProvider
-    ) {
-      if (!chatModel || !chatModelProvider) {
-        const chatModelProviders = providers.chatModelProviders;
-        const chatModelProvidersKeys = Object.keys(chatModelProviders);
-
-        if (!chatModelProviders || chatModelProvidersKeys.length === 0) {
-          return toast.error('No chat models available');
-        } else {
-          chatModelProvider =
-            chatModelProvidersKeys.find(
-              (provider) =>
-                Object.keys(chatModelProviders[provider]).length > 0,
-            ) || chatModelProvidersKeys[0];
-        }
-
-        if (
-          chatModelProvider === 'custom_openai' &&
-          Object.keys(chatModelProviders[chatModelProvider]).length === 0
-        ) {
-          toast.error(
-            "Looks like you haven't configured any chat model providers. Please configure them from the settings page or the config file.",
-          );
-          return setHasError(true);
-        }
-
-        chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
-      }
-
-      if (!embeddingModel || !embeddingModelProvider) {
-        const embeddingModelProviders = providers.embeddingModelProviders;
-
-        if (
-          !embeddingModelProviders ||
-          Object.keys(embeddingModelProviders).length === 0
-        )
-          return toast.error('No embedding models available');
-
-        embeddingModelProvider = Object.keys(embeddingModelProviders)[0];
-        embeddingModel = Object.keys(
-          embeddingModelProviders[embeddingModelProvider],
-        )[0];
-      }
-
-      localStorage.setItem('chatModel', chatModel!);
-      localStorage.setItem('chatModelProvider', chatModelProvider);
-      localStorage.setItem('embeddingModel', embeddingModel!);
-      localStorage.setItem('embeddingModelProvider', embeddingModelProvider);
-    } else {
-      const chatModelProviders = providers.chatModelProviders;
-      const embeddingModelProviders = providers.embeddingModelProviders;
-
-      if (
-        Object.keys(chatModelProviders).length > 0 &&
-        (!chatModelProviders[chatModelProvider] ||
-          Object.keys(chatModelProviders[chatModelProvider]).length === 0)
-      ) {
-        const chatModelProvidersKeys = Object.keys(chatModelProviders);
-        chatModelProvider =
-          chatModelProvidersKeys.find(
-            (key) => Object.keys(chatModelProviders[key]).length > 0,
-          ) || chatModelProvidersKeys[0];
-
-        localStorage.setItem('chatModelProvider', chatModelProvider);
-      }
-
-      if (
-        chatModelProvider &&
-        !chatModelProviders[chatModelProvider][chatModel]
-      ) {
-        if (
-          chatModelProvider === 'custom_openai' &&
-          Object.keys(chatModelProviders[chatModelProvider]).length === 0
-        ) {
-          toast.error(
-            "Looks like you haven't configured any chat model providers. Please configure them from the settings page or the config file.",
-          );
-          return setHasError(true);
-        }
-
-        chatModel = Object.keys(
-          chatModelProviders[
-            Object.keys(chatModelProviders[chatModelProvider]).length > 0
-              ? chatModelProvider
-              : Object.keys(chatModelProviders)[0]
-          ],
-        )[0];
-
-        localStorage.setItem('chatModel', chatModel);
-      }
-
-      if (
-        Object.keys(embeddingModelProviders).length > 0 &&
-        !embeddingModelProviders[embeddingModelProvider]
-      ) {
-        embeddingModelProvider = Object.keys(embeddingModelProviders)[0];
-        localStorage.setItem('embeddingModelProvider', embeddingModelProvider);
-      }
-
-      if (
-        embeddingModelProvider &&
-        !embeddingModelProviders[embeddingModelProvider][embeddingModel]
-      ) {
-        embeddingModel = Object.keys(
-          embeddingModelProviders[embeddingModelProvider],
-        )[0];
-        localStorage.setItem('embeddingModel', embeddingModel);
-      }
-    }
-
-    setChatModelProvider({
-      name: chatModel!,
-      provider: chatModelProvider,
-    });
-
-    setEmbeddingModelProvider({
-      name: embeddingModel!,
-      provider: embeddingModelProvider,
-    });
-
-    setIsConfigReady(true);
-  } catch (err) {
-    console.error('An error occurred while checking the configuration:', err);
-    setIsConfigReady(false);
-    setHasError(true);
-  }
-};
-
-const loadMessages = async (
-  chatId: string,
-  setMessages: (messages: Message[]) => void,
-  setIsMessagesLoaded: (loaded: boolean) => void,
-  setChatHistory: (history: [string, string][]) => void,
-  setFocusMode: (mode: string) => void,
-  setNotFound: (notFound: boolean) => void,
-  setFiles: (files: File[]) => void,
-  setFileIds: (fileIds: string[]) => void,
-) => {
-  const res = await fetch(`/api/chats/${chatId}`, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  if (res.status === 404) {
-    setNotFound(true);
-    setIsMessagesLoaded(true);
-    return;
-  }
-
-  const data = await res.json();
-
-  const messages = data.messages.map((msg: any) => {
-    return {
-      ...msg,
-      ...JSON.parse(msg.metadata),
-    };
-  }) as Message[];
-
-  setMessages(messages);
-
-  const history = messages.map((msg) => {
-    return [msg.role, msg.content];
-  }) as [string, string][];
-
-  console.debug(new Date(), 'app:messages_loaded');
-
-  document.title = messages[0].content;
-
-  const files = data.chat.files.map((file: any) => {
-    return {
-      fileName: file.name,
-      fileExtension: file.name.split('.').pop(),
-      fileId: file.fileId,
-    };
-  });
-
-  setFiles(files);
-  setFileIds(files.map((file: File) => file.fileId));
-
-  setChatHistory(history);
-  setFocusMode(data.chat.focusMode);
-  setIsMessagesLoaded(true);
-};
-
-const ChatWindow = ({ id }: { id?: string }) => {
-  const searchParams = useSearchParams();
-  const initialMessage = searchParams.get('q');
-
-  const [chatId, setChatId] = useState<string | undefined>(id);
-  const [newChatCreated, setNewChatCreated] = useState(false);
-
-  const [chatModelProvider, setChatModelProvider] = useState<ChatModelProvider>(
-    {
-      name: '',
-      provider: '',
-    },
-  );
-
-  const [embeddingModelProvider, setEmbeddingModelProvider] =
-    useState<EmbeddingModelProvider>({
-      name: '',
-      provider: '',
-    });
-
-  const [isConfigReady, setIsConfigReady] = useState(false);
-  const [hasError, setHasError] = useState(false);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    checkConfig(
-      setChatModelProvider,
-      setEmbeddingModelProvider,
-      setIsConfigReady,
-      setHasError,
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const [loading, setLoading] = useState(false);
-  const [messageAppeared, setMessageAppeared] = useState(false);
-
-  const [chatHistory, setChatHistory] = useState<[string, string][]>([]);
-  const [messages, setMessages] = useState<Message[]>([]);
-
-  const [files, setFiles] = useState<File[]>([]);
-  const [fileIds, setFileIds] = useState<string[]>([]);
-
-  const [focusMode, setFocusMode] = useState('webSearch');
-  const [optimizationMode, setOptimizationMode] = useState('speed');
-
-  const [isMessagesLoaded, setIsMessagesLoaded] = useState(false);
-
-  const [notFound, setNotFound] = useState(false);
-
-  useEffect(() => {
-    if (
-      chatId &&
-      !newChatCreated &&
-      !isMessagesLoaded &&
-      messages.length === 0
-    ) {
-      loadMessages(
-        chatId,
-        setMessages,
-        setIsMessagesLoaded,
-        setChatHistory,
-        setFocusMode,
-        setNotFound,
-        setFiles,
-        setFileIds,
-      );
-    } else if (!chatId) {
-      setNewChatCreated(true);
-      setIsMessagesLoaded(true);
-      setChatId(crypto.randomBytes(20).toString('hex'));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const messagesRef = useRef<Message[]>([]);
-
-  useEffect(() => {
-    messagesRef.current = messages;
-  }, [messages]);
-
-  useEffect(() => {
-    if (isMessagesLoaded && isConfigReady) {
-      setIsReady(true);
-      console.debug(new Date(), 'app:ready');
-    } else {
-      setIsReady(false);
-    }
-  }, [isMessagesLoaded, isConfigReady]);
-
-  const sendMessage = async (
-    message: string,
-    messageId?: string,
-    rewrite = false,
-  ) => {
-    if (loading) return;
-    if (!isConfigReady) {
-      toast.error('Cannot send message before the configuration is ready');
-      return;
-    }
-
-    setLoading(true);
-    setMessageAppeared(false);
-
-    let sources: Document[] | undefined = undefined;
-    let recievedMessage = '';
-    let added = false;
-
-    messageId = messageId ?? crypto.randomBytes(7).toString('hex');
-
-    setMessages((prevMessages) => [
-      ...prevMessages,
-      {
-        content: message,
-        messageId: messageId,
-        chatId: chatId!,
-        role: 'user',
-        createdAt: new Date(),
-      },
-    ]);
-
-    const messageHandler = async (data: any) => {
-      if (data.type === 'error') {
-        toast.error(data.data);
-        setLoading(false);
-        return;
-      }
-
-      if (data.type === 'sources') {
-        sources = data.data;
-        if (!added) {
-          setMessages((prevMessages) => [
-            ...prevMessages,
-            {
-              content: '',
-              messageId: data.messageId,
-              chatId: chatId!,
-              role: 'assistant',
-              sources: sources,
-              createdAt: new Date(),
-            },
-          ]);
-          added = true;
-        }
-        setMessageAppeared(true);
-      }
-
-      if (data.type === 'message') {
-        if (!added) {
-          setMessages((prevMessages) => [
-            ...prevMessages,
-            {
-              content: data.data,
-              messageId: data.messageId,
-              chatId: chatId!,
-              role: 'assistant',
-              sources: sources,
-              createdAt: new Date(),
-            },
-          ]);
-          added = true;
-        }
-
-        setMessages((prev) =>
-          prev.map((message) => {
-            if (message.messageId === data.messageId) {
-              return { ...message, content: message.content + data.data };
-            }
-
-            return message;
-          }),
-        );
-
-        recievedMessage += data.data;
-        setMessageAppeared(true);
-      }
-
-      if (data.type === 'messageEnd') {
-        setChatHistory((prevHistory) => [
-          ...prevHistory,
-          ['human', message],
-          ['assistant', recievedMessage],
-        ]);
-
-        setLoading(false);
-
-        const lastMsg = messagesRef.current[messagesRef.current.length - 1];
-
-        const autoImageSearch = localStorage.getItem('autoImageSearch');
-        const autoVideoSearch = localStorage.getItem('autoVideoSearch');
-
-        if (autoImageSearch === 'true') {
-          document
-            .getElementById(`search-images-${lastMsg.messageId}`)
-            ?.click();
-        }
-
-        if (autoVideoSearch === 'true') {
-          document
-            .getElementById(`search-videos-${lastMsg.messageId}`)
-            ?.click();
-        }
-
-        if (
-          lastMsg.role === 'assistant' &&
-          lastMsg.sources &&
-          lastMsg.sources.length > 0 &&
-          !lastMsg.suggestions
-        ) {
-          const suggestions = await getSuggestions(messagesRef.current);
-          setMessages((prev) =>
-            prev.map((msg) => {
-              if (msg.messageId === lastMsg.messageId) {
-                return { ...msg, suggestions: suggestions };
-              }
-              return msg;
-            }),
-          );
-        }
-      }
-    };
-
-    const messageIndex = messages.findIndex((m) => m.messageId === messageId);
-
-    const res = await fetch('/api/chat', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        content: message,
-        message: {
-          messageId: messageId,
-          chatId: chatId!,
-          content: message,
-        },
-        chatId: chatId!,
-        files: fileIds,
-        focusMode: focusMode,
-        optimizationMode: optimizationMode,
-        history: rewrite
-          ? chatHistory.slice(0, messageIndex === -1 ? undefined : messageIndex)
-          : chatHistory,
-        chatModel: {
-          name: chatModelProvider.name,
-          provider: chatModelProvider.provider,
-        },
-        embeddingModel: {
-          name: embeddingModelProvider.name,
-          provider: embeddingModelProvider.provider,
-        },
-        systemInstructions: localStorage.getItem('systemInstructions'),
-      }),
-    });
-
-    if (!res.body) throw new Error('No response body');
-
-    const reader = res.body?.getReader();
-    const decoder = new TextDecoder('utf-8');
-
-    let partialChunk = '';
-
-    while (true) {
-      const { value, done } = await reader.read();
-      if (done) break;
-
-      partialChunk += decoder.decode(value, { stream: true });
-
-      try {
-        const messages = partialChunk.split('\n');
-        for (const msg of messages) {
-          if (!msg.trim()) continue;
-          const json = JSON.parse(msg);
-          messageHandler(json);
-        }
-        partialChunk = '';
-      } catch (error) {
-        console.warn('Incomplete JSON, waiting for next chunk...');
-      }
-    }
-  };
-
-  const rewrite = (messageId: string) => {
-    const index = messages.findIndex((msg) => msg.messageId === messageId);
-
-    if (index === -1) return;
-
-    const message = messages[index - 1];
-
-    setMessages((prev) => {
-      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
-    });
-    setChatHistory((prev) => {
-      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
-    });
-
-    sendMessage(message.content, message.messageId, true);
-  };
-
-  useEffect(() => {
-    if (isReady && initialMessage && isConfigReady) {
-      sendMessage(initialMessage);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConfigReady, isReady, initialMessage]);
-
   if (hasError) {
     return (
       <div className="relative">
@@ -594,31 +51,11 @@ const ChatWindow = ({ id }: { id?: string }) => {
       <div>
         {messages.length > 0 ? (
           <>
-            <Navbar chatId={chatId!} messages={messages} />
+            <Navbar />
-            <Chat
+            <Chat />
-              loading={loading}
-              messages={messages}
-              sendMessage={sendMessage}
-              messageAppeared={messageAppeared}
-              rewrite={rewrite}
-              fileIds={fileIds}
-              setFileIds={setFileIds}
-              files={files}
-              setFiles={setFiles}
-            />
           </>
         ) : (
-          <EmptyChat
+          <EmptyChat />
-            sendMessage={sendMessage}
-            focusMode={focusMode}
-            setFocusMode={setFocusMode}
-            optimizationMode={optimizationMode}
-            setOptimizationMode={setOptimizationMode}
-            fileIds={fileIds}
-            setFileIds={setFileIds}
-            files={files}
-            setFiles={setFiles}
-          />
         )}
       </div>
     )

src/components/EmptyChat.tsx

@@ -5,27 +5,7 @@ import Link from 'next/link';
 import WeatherWidget from './WeatherWidget';
 import NewsArticleWidget from './NewsArticleWidget';
 
-const EmptyChat = ({
+const EmptyChat = () => {
-  sendMessage,
-  focusMode,
-  setFocusMode,
-  optimizationMode,
-  setOptimizationMode,
-  fileIds,
-  setFileIds,
-  files,
-  setFiles,
-}: {
-  sendMessage: (message: string) => void;
-  focusMode: string;
-  setFocusMode: (mode: string) => void;
-  optimizationMode: string;
-  setOptimizationMode: (mode: string) => void;
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  files: File[];
-  setFiles: (files: File[]) => void;
-}) => {
   return (
     <div className="relative">
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
@@ -38,17 +18,7 @@ const EmptyChat = ({
           <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
             Research begins here.
           </h2>
-          <EmptyChatMessageInput
+          <EmptyChatMessageInput />
-            sendMessage={sendMessage}
-            focusMode={focusMode}
-            setFocusMode={setFocusMode}
-            optimizationMode={optimizationMode}
-            setOptimizationMode={setOptimizationMode}
-            fileIds={fileIds}
-            setFileIds={setFileIds}
-            files={files}
-            setFiles={setFiles}
-          />
         </div>
         <div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
           <div className="flex-1 w-full">

src/components/EmptyChatMessageInput.tsx

@@ -1,34 +1,15 @@
 import { ArrowRight } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import CopilotToggle from './MessageInputActions/Copilot';
 import Focus from './MessageInputActions/Focus';
 import Optimization from './MessageInputActions/Optimization';
 import Attach from './MessageInputActions/Attach';
-import { File } from './ChatWindow';
+import { useChat } from '@/lib/hooks/useChat';
 
-const EmptyChatMessageInput = ({
+const EmptyChatMessageInput = () => {
-  sendMessage,
+  const { sendMessage } = useChat();
-  focusMode,
+
-  setFocusMode,
+  /* const [copilotEnabled, setCopilotEnabled] = useState(false); */
-  optimizationMode,
-  setOptimizationMode,
-  fileIds,
-  setFileIds,
-  files,
-  setFiles,
-}: {
-  sendMessage: (message: string) => void;
-  focusMode: string;
-  setFocusMode: (mode: string) => void;
-  optimizationMode: string;
-  setOptimizationMode: (mode: string) => void;
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  files: File[];
-  setFiles: (files: File[]) => void;
-}) => {
-  const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
 
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
@@ -84,20 +65,11 @@ const EmptyChatMessageInput = ({
         />
         <div className="flex flex-row items-center justify-between mt-4">
           <div className="flex flex-row items-center space-x-2 lg:space-x-4">
-            <Focus focusMode={focusMode} setFocusMode={setFocusMode} />
+            <Focus />
-            <Attach
+            <Attach showText />
-              fileIds={fileIds}
-              setFileIds={setFileIds}
-              files={files}
-              setFiles={setFiles}
-              showText
-            />
           </div>
           <div className="flex flex-row items-center space-x-1 sm:space-x-4">
-            <Optimization
+            <Optimization />
-              optimizationMode={optimizationMode}
-              setOptimizationMode={setOptimizationMode}
-            />
             <button
               disabled={message.trim().length === 0}
               className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 disabled:bg-[#e0e0dc] dark:disabled:bg-[#ececec21] hover:bg-opacity-85 transition duration-100 rounded-full p-2"

src/components/MessageBox.tsx

@@ -20,6 +20,7 @@ import SearchImages from './SearchImages';
 import SearchVideos from './SearchVideos';
 import { useSpeech } from 'react-text-to-speech';
 import ThinkBox from './ThinkBox';
+import { useChat } from '@/lib/hooks/useChat';
 
 const ThinkTagProcessor = ({
   children,
@@ -36,22 +37,16 @@ const ThinkTagProcessor = ({
 const MessageBox = ({
   message,
   messageIndex,
-  history,
-  loading,
   dividerRef,
   isLast,
-  rewrite,
-  sendMessage,
 }: {
   message: Message;
   messageIndex: number;
-  history: Message[];
-  loading: boolean;
   dividerRef?: MutableRefObject<HTMLDivElement | null>;
   isLast: boolean;
-  rewrite: (messageId: string) => void;
-  sendMessage: (message: string) => void;
 }) => {
+  const { loading, messages: history, sendMessage, rewrite } = useChat();
+
   const [parsedMessage, setParsedMessage] = useState(message.content);
   const [speechMessage, setSpeechMessage] = useState(message.content);
   const [thinkingEnded, setThinkingEnded] = useState(false);

src/components/MessageInput.tsx

@@ -6,22 +6,11 @@ import Attach from './MessageInputActions/Attach';
 import CopilotToggle from './MessageInputActions/Copilot';
 import { File } from './ChatWindow';
 import AttachSmall from './MessageInputActions/AttachSmall';
+import { useChat } from '@/lib/hooks/useChat';
+
+const MessageInput = () => {
+  const { loading, sendMessage } = useChat();
 
-const MessageInput = ({
-  sendMessage,
-  loading,
-  fileIds,
-  setFileIds,
-  files,
-  setFiles,
-}: {
-  sendMessage: (message: string) => void;
-  loading: boolean;
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  files: File[];
-  setFiles: (files: File[]) => void;
-}) => {
   const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
   const [textareaRows, setTextareaRows] = useState(1);
@@ -79,14 +68,7 @@ const MessageInput = ({
         mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
       )}
     >
-      {mode === 'single' && (
+      {mode === 'single' && <AttachSmall />}
-        <AttachSmall
-          fileIds={fileIds}
-          setFileIds={setFileIds}
-          files={files}
-          setFiles={setFiles}
-        />
-      )}
       <TextareaAutosize
         ref={inputRef}
         value={message}
@@ -113,12 +95,7 @@ const MessageInput = ({
       )}
       {mode === 'multi' && (
         <div className="flex flex-row items-center justify-between w-full pt-2">
-          <AttachSmall
+          <AttachSmall />
-            fileIds={fileIds}
-            setFileIds={setFileIds}
-            files={files}
-            setFiles={setFiles}
-          />
           <div className="flex flex-row items-center space-x-4">
             <CopilotToggle
               copilotEnabled={copilotEnabled}

src/components/MessageInputActions/Attach.tsx

@@ -7,21 +7,11 @@ import {
 } from '@headlessui/react';
 import { CopyPlus, File, LoaderCircle, Plus, Trash } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
-import { File as FileType } from '../ChatWindow';
+import { useChat } from '@/lib/hooks/useChat';
+
+const Attach = ({ showText }: { showText?: boolean }) => {
+  const { files, setFiles, setFileIds, fileIds } = useChat();
 
-const Attach = ({
-  fileIds,
-  setFileIds,
-  showText,
-  files,
-  setFiles,
-}: {
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  showText?: boolean;
-  files: FileType[];
-  setFiles: (files: FileType[]) => void;
-}) => {
   const [loading, setLoading] = useState(false);
   const fileInputRef = useRef<any>();
 
@@ -142,8 +132,8 @@ const Attach = ({
                   key={i}
                   className="flex flex-row items-center justify-start w-full space-x-3 p-3"
                 >
-                  <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
+                  <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
-                    <File size={16} className="text-white/70" />
+                    <File size={16} className="text-black/70 dark:text-white/70" />
                   </div>
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25

src/components/MessageInputActions/AttachSmall.tsx

@@ -8,18 +8,11 @@ import {
 import { CopyPlus, File, LoaderCircle, Plus, Trash } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { File as FileType } from '../ChatWindow';
+import { useChat } from '@/lib/hooks/useChat';
+
+const AttachSmall = () => {
+  const { files, setFiles, setFileIds, fileIds } = useChat();
 
-const AttachSmall = ({
-  fileIds,
-  setFileIds,
-  files,
-  setFiles,
-}: {
-  fileIds: string[];
-  setFileIds: (fileIds: string[]) => void;
-  files: FileType[];
-  setFiles: (files: FileType[]) => void;
-}) => {
   const [loading, setLoading] = useState(false);
   const fileInputRef = useRef<any>();
 
@@ -114,8 +107,8 @@ const AttachSmall = ({
                   key={i}
                   className="flex flex-row items-center justify-start w-full space-x-3 p-3"
                 >
-                  <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
+                  <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
-                    <File size={16} className="text-white/70" />
+                    <File size={16} className="text-black/70 dark:text-white/70" />
                   </div>
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25

src/components/MessageInputActions/Focus.tsx

@@ -15,6 +15,7 @@ import {
 } from '@headlessui/react';
 import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
 import { Fragment } from 'react';
+import { useChat } from '@/lib/hooks/useChat';
 
 const focusModes = [
   {
@@ -55,13 +56,9 @@ const focusModes = [
   },
 ];
 
-const Focus = ({
+const Focus = () => {
-  focusMode,
+  const { focusMode, setFocusMode } = useChat();
-  setFocusMode,
+
-}: {
-  focusMode: string;
-  setFocusMode: (mode: string) => void;
-}) => {
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg mt-[6.5px]">
       <PopoverButton

src/components/MessageInputActions/Optimization.tsx

@@ -7,6 +7,7 @@ import {
   Transition,
 } from '@headlessui/react';
 import { Fragment } from 'react';
+import { useChat } from '@/lib/hooks/useChat';
 
 const OptimizationModes = [
   {
@@ -34,13 +35,9 @@ const OptimizationModes = [
   },
 ];
 
-const Optimization = ({
+const Optimization = () => {
-  optimizationMode,
+  const { optimizationMode, setOptimizationMode } = useChat();
-  setOptimizationMode,
+
-}: {
-  optimizationMode: string;
-  setOptimizationMode: (mode: string) => void;
-}) => {
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
       <PopoverButton

src/components/Navbar.tsx

@@ -10,6 +10,7 @@ import {
   Transition,
 } from '@headlessui/react';
 import jsPDF from 'jspdf';
+import { useChat } from '@/lib/hooks/useChat';
 
 const downloadFile = (filename: string, content: string, type: string) => {
   const blob = new Blob([content], { type });
@@ -118,16 +119,12 @@ const exportAsPDF = (messages: Message[], title: string) => {
   doc.save(`${title || 'chat'}.pdf`);
 };
 
-const Navbar = ({
+const Navbar = () => {
-  chatId,
-  messages,
-}: {
-  messages: Message[];
-  chatId: string;
-}) => {
   const [title, setTitle] = useState<string>('');
   const [timeAgo, setTimeAgo] = useState<string>('');
 
+  const { messages, chatId } = useChat();
+
   useEffect(() => {
     if (messages.length > 0) {
       const newTitle =
@@ -206,7 +203,7 @@ const Navbar = ({
             </PopoverPanel>
           </Transition>
         </Popover>
-        <DeleteChat redirect chatId={chatId} chats={[]} setChats={() => {}} />
+        <DeleteChat redirect chatId={chatId!} chats={[]} setChats={() => {}} />
       </div>
     </div>
   );

src/lib/config.ts

@@ -31,6 +31,7 @@ interface Config {
     };
     OLLAMA: {
       API_URL: string;
+      API_KEY: string;
     };
     DEEPSEEK: {
       API_KEY: string;
@@ -86,6 +87,8 @@ export const getSearxngApiEndpoint = () =>
 
 export const getOllamaApiEndpoint = () => loadConfig().MODELS.OLLAMA.API_URL;
 
+export const getOllamaApiKey = () => loadConfig().MODELS.OLLAMA.API_KEY;
+
 export const getDeepseekApiKey = () => loadConfig().MODELS.DEEPSEEK.API_KEY;
 
 export const getAimlApiKey = () => loadConfig().MODELS.AIMLAPI.API_KEY;

src/lib/hooks/useChat.tsx

@@ -0,0 +1,643 @@
+'use client';
+
+import { Message } from '@/components/ChatWindow';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import crypto from 'crypto';
+import { useSearchParams } from 'next/navigation';
+import { toast } from 'sonner';
+import { Document } from '@langchain/core/documents';
+import { getSuggestions } from '../actions';
+
+type ChatContext = {
+  messages: Message[];
+  chatHistory: [string, string][];
+  files: File[];
+  fileIds: string[];
+  focusMode: string;
+  chatId: string | undefined;
+  optimizationMode: string;
+  isMessagesLoaded: boolean;
+  loading: boolean;
+  notFound: boolean;
+  messageAppeared: boolean;
+  isReady: boolean;
+  hasError: boolean;
+  setOptimizationMode: (mode: string) => void;
+  setFocusMode: (mode: string) => void;
+  setFiles: (files: File[]) => void;
+  setFileIds: (fileIds: string[]) => void;
+  sendMessage: (
+    message: string,
+    messageId?: string,
+    rewrite?: boolean,
+  ) => Promise<void>;
+  rewrite: (messageId: string) => void;
+};
+
+export interface File {
+  fileName: string;
+  fileExtension: string;
+  fileId: string;
+}
+
+interface ChatModelProvider {
+  name: string;
+  provider: string;
+}
+
+interface EmbeddingModelProvider {
+  name: string;
+  provider: string;
+}
+
+const checkConfig = async (
+  setChatModelProvider: (provider: ChatModelProvider) => void,
+  setEmbeddingModelProvider: (provider: EmbeddingModelProvider) => void,
+  setIsConfigReady: (ready: boolean) => void,
+  setHasError: (hasError: boolean) => void,
+) => {
+  try {
+    let chatModel = localStorage.getItem('chatModel');
+    let chatModelProvider = localStorage.getItem('chatModelProvider');
+    let embeddingModel = localStorage.getItem('embeddingModel');
+    let embeddingModelProvider = localStorage.getItem('embeddingModelProvider');
+
+    const autoImageSearch = localStorage.getItem('autoImageSearch');
+    const autoVideoSearch = localStorage.getItem('autoVideoSearch');
+
+    if (!autoImageSearch) {
+      localStorage.setItem('autoImageSearch', 'true');
+    }
+
+    if (!autoVideoSearch) {
+      localStorage.setItem('autoVideoSearch', 'false');
+    }
+
+    const providers = await fetch(`/api/models`, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }).then(async (res) => {
+      if (!res.ok)
+        throw new Error(
+          `Failed to fetch models: ${res.status} ${res.statusText}`,
+        );
+      return res.json();
+    });
+
+    if (
+      !chatModel ||
+      !chatModelProvider ||
+      !embeddingModel ||
+      !embeddingModelProvider
+    ) {
+      if (!chatModel || !chatModelProvider) {
+        const chatModelProviders = providers.chatModelProviders;
+        const chatModelProvidersKeys = Object.keys(chatModelProviders);
+
+        if (!chatModelProviders || chatModelProvidersKeys.length === 0) {
+          return toast.error('No chat models available');
+        } else {
+          chatModelProvider =
+            chatModelProvidersKeys.find(
+              (provider) =>
+                Object.keys(chatModelProviders[provider]).length > 0,
+            ) || chatModelProvidersKeys[0];
+        }
+
+        if (
+          chatModelProvider === 'custom_openai' &&
+          Object.keys(chatModelProviders[chatModelProvider]).length === 0
+        ) {
+          toast.error(
+            "Looks like you haven't configured any chat model providers. Please configure them from the settings page or the config file.",
+          );
+          return setHasError(true);
+        }
+
+        chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
+      }
+
+      if (!embeddingModel || !embeddingModelProvider) {
+        const embeddingModelProviders = providers.embeddingModelProviders;
+
+        if (
+          !embeddingModelProviders ||
+          Object.keys(embeddingModelProviders).length === 0
+        )
+          return toast.error('No embedding models available');
+
+        embeddingModelProvider = Object.keys(embeddingModelProviders)[0];
+        embeddingModel = Object.keys(
+          embeddingModelProviders[embeddingModelProvider],
+        )[0];
+      }
+
+      localStorage.setItem('chatModel', chatModel!);
+      localStorage.setItem('chatModelProvider', chatModelProvider);
+      localStorage.setItem('embeddingModel', embeddingModel!);
+      localStorage.setItem('embeddingModelProvider', embeddingModelProvider);
+    } else {
+      const chatModelProviders = providers.chatModelProviders;
+      const embeddingModelProviders = providers.embeddingModelProviders;
+
+      if (
+        Object.keys(chatModelProviders).length > 0 &&
+        (!chatModelProviders[chatModelProvider] ||
+          Object.keys(chatModelProviders[chatModelProvider]).length === 0)
+      ) {
+        const chatModelProvidersKeys = Object.keys(chatModelProviders);
+        chatModelProvider =
+          chatModelProvidersKeys.find(
+            (key) => Object.keys(chatModelProviders[key]).length > 0,
+          ) || chatModelProvidersKeys[0];
+
+        localStorage.setItem('chatModelProvider', chatModelProvider);
+      }
+
+      if (
+        chatModelProvider &&
+        !chatModelProviders[chatModelProvider][chatModel]
+      ) {
+        if (
+          chatModelProvider === 'custom_openai' &&
+          Object.keys(chatModelProviders[chatModelProvider]).length === 0
+        ) {
+          toast.error(
+            "Looks like you haven't configured any chat model providers. Please configure them from the settings page or the config file.",
+          );
+          return setHasError(true);
+        }
+
+        chatModel = Object.keys(
+          chatModelProviders[
+            Object.keys(chatModelProviders[chatModelProvider]).length > 0
+              ? chatModelProvider
+              : Object.keys(chatModelProviders)[0]
+          ],
+        )[0];
+
+        localStorage.setItem('chatModel', chatModel);
+      }
+
+      if (
+        Object.keys(embeddingModelProviders).length > 0 &&
+        !embeddingModelProviders[embeddingModelProvider]
+      ) {
+        embeddingModelProvider = Object.keys(embeddingModelProviders)[0];
+        localStorage.setItem('embeddingModelProvider', embeddingModelProvider);
+      }
+
+      if (
+        embeddingModelProvider &&
+        !embeddingModelProviders[embeddingModelProvider][embeddingModel]
+      ) {
+        embeddingModel = Object.keys(
+          embeddingModelProviders[embeddingModelProvider],
+        )[0];
+        localStorage.setItem('embeddingModel', embeddingModel);
+      }
+    }
+
+    setChatModelProvider({
+      name: chatModel!,
+      provider: chatModelProvider,
+    });
+
+    setEmbeddingModelProvider({
+      name: embeddingModel!,
+      provider: embeddingModelProvider,
+    });
+
+    setIsConfigReady(true);
+  } catch (err) {
+    console.error('An error occurred while checking the configuration:', err);
+    setIsConfigReady(false);
+    setHasError(true);
+  }
+};
+
+const loadMessages = async (
+  chatId: string,
+  setMessages: (messages: Message[]) => void,
+  setIsMessagesLoaded: (loaded: boolean) => void,
+  setChatHistory: (history: [string, string][]) => void,
+  setFocusMode: (mode: string) => void,
+  setNotFound: (notFound: boolean) => void,
+  setFiles: (files: File[]) => void,
+  setFileIds: (fileIds: string[]) => void,
+) => {
+  const res = await fetch(`/api/chats/${chatId}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (res.status === 404) {
+    setNotFound(true);
+    setIsMessagesLoaded(true);
+    return;
+  }
+
+  const data = await res.json();
+
+  const messages = data.messages.map((msg: any) => {
+    return {
+      ...msg,
+      ...JSON.parse(msg.metadata),
+    };
+  }) as Message[];
+
+  setMessages(messages);
+
+  const history = messages.map((msg) => {
+    return [msg.role, msg.content];
+  }) as [string, string][];
+
+  console.debug(new Date(), 'app:messages_loaded');
+
+  document.title = messages[0].content;
+
+  const files = data.chat.files.map((file: any) => {
+    return {
+      fileName: file.name,
+      fileExtension: file.name.split('.').pop(),
+      fileId: file.fileId,
+    };
+  });
+
+  setFiles(files);
+  setFileIds(files.map((file: File) => file.fileId));
+
+  setChatHistory(history);
+  setFocusMode(data.chat.focusMode);
+  setIsMessagesLoaded(true);
+};
+
+export const chatContext = createContext<ChatContext>({
+  chatHistory: [],
+  chatId: '',
+  fileIds: [],
+  files: [],
+  focusMode: '',
+  hasError: false,
+  isMessagesLoaded: false,
+  isReady: false,
+  loading: false,
+  messageAppeared: false,
+  messages: [],
+  notFound: false,
+  optimizationMode: '',
+  rewrite: () => {},
+  sendMessage: async () => {},
+  setFileIds: () => {},
+  setFiles: () => {},
+  setFocusMode: () => {},
+  setOptimizationMode: () => {},
+});
+
+export const ChatProvider = ({
+  children,
+  id,
+}: {
+  children: React.ReactNode;
+  id?: string;
+}) => {
+  const searchParams = useSearchParams();
+  const initialMessage = searchParams.get('q');
+
+  const [chatId, setChatId] = useState<string | undefined>(id);
+  const [newChatCreated, setNewChatCreated] = useState(false);
+
+  const [loading, setLoading] = useState(false);
+  const [messageAppeared, setMessageAppeared] = useState(false);
+
+  const [chatHistory, setChatHistory] = useState<[string, string][]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  const [files, setFiles] = useState<File[]>([]);
+  const [fileIds, setFileIds] = useState<string[]>([]);
+
+  const [focusMode, setFocusMode] = useState('webSearch');
+  const [optimizationMode, setOptimizationMode] = useState('speed');
+
+  const [isMessagesLoaded, setIsMessagesLoaded] = useState(false);
+
+  const [notFound, setNotFound] = useState(false);
+
+  const [chatModelProvider, setChatModelProvider] = useState<ChatModelProvider>(
+    {
+      name: '',
+      provider: '',
+    },
+  );
+
+  const [embeddingModelProvider, setEmbeddingModelProvider] =
+    useState<EmbeddingModelProvider>({
+      name: '',
+      provider: '',
+    });
+
+  const [isConfigReady, setIsConfigReady] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  const messagesRef = useRef<Message[]>([]);
+
+  useEffect(() => {
+    checkConfig(
+      setChatModelProvider,
+      setEmbeddingModelProvider,
+      setIsConfigReady,
+      setHasError,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (
+      chatId &&
+      !newChatCreated &&
+      !isMessagesLoaded &&
+      messages.length === 0
+    ) {
+      loadMessages(
+        chatId,
+        setMessages,
+        setIsMessagesLoaded,
+        setChatHistory,
+        setFocusMode,
+        setNotFound,
+        setFiles,
+        setFileIds,
+      );
+    } else if (!chatId) {
+      setNewChatCreated(true);
+      setIsMessagesLoaded(true);
+      setChatId(crypto.randomBytes(20).toString('hex'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+
+  useEffect(() => {
+    if (isMessagesLoaded && isConfigReady) {
+      setIsReady(true);
+      console.debug(new Date(), 'app:ready');
+    } else {
+      setIsReady(false);
+    }
+  }, [isMessagesLoaded, isConfigReady]);
+
+  const rewrite = (messageId: string) => {
+    const index = messages.findIndex((msg) => msg.messageId === messageId);
+
+    if (index === -1) return;
+
+    const message = messages[index - 1];
+
+    setMessages((prev) => {
+      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+    });
+    setChatHistory((prev) => {
+      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+    });
+
+    sendMessage(message.content, message.messageId, true);
+  };
+
+  useEffect(() => {
+    if (isReady && initialMessage && isConfigReady) {
+      if (!isConfigReady) {
+        toast.error('Cannot send message before the configuration is ready');
+        return;
+      }
+      sendMessage(initialMessage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConfigReady, isReady, initialMessage]);
+
+  const sendMessage: ChatContext['sendMessage'] = async (
+    message,
+    messageId,
+    rewrite = false,
+  ) => {
+    if (loading) return;
+    setLoading(true);
+    setMessageAppeared(false);
+
+    let sources: Document[] | undefined = undefined;
+    let recievedMessage = '';
+    let added = false;
+
+    messageId = messageId ?? crypto.randomBytes(7).toString('hex');
+
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      {
+        content: message,
+        messageId: messageId,
+        chatId: chatId!,
+        role: 'user',
+        createdAt: new Date(),
+      },
+    ]);
+
+    const messageHandler = async (data: any) => {
+      if (data.type === 'error') {
+        toast.error(data.data);
+        setLoading(false);
+        return;
+      }
+
+      if (data.type === 'sources') {
+        sources = data.data;
+        if (!added) {
+          setMessages((prevMessages) => [
+            ...prevMessages,
+            {
+              content: '',
+              messageId: data.messageId,
+              chatId: chatId!,
+              role: 'assistant',
+              sources: sources,
+              createdAt: new Date(),
+            },
+          ]);
+          added = true;
+        }
+        setMessageAppeared(true);
+      }
+
+      if (data.type === 'message') {
+        if (!added) {
+          setMessages((prevMessages) => [
+            ...prevMessages,
+            {
+              content: data.data,
+              messageId: data.messageId,
+              chatId: chatId!,
+              role: 'assistant',
+              sources: sources,
+              createdAt: new Date(),
+            },
+          ]);
+          added = true;
+        }
+
+        setMessages((prev) =>
+          prev.map((message) => {
+            if (message.messageId === data.messageId) {
+              return { ...message, content: message.content + data.data };
+            }
+
+            return message;
+          }),
+        );
+
+        recievedMessage += data.data;
+        setMessageAppeared(true);
+      }
+
+      if (data.type === 'messageEnd') {
+        setChatHistory((prevHistory) => [
+          ...prevHistory,
+          ['human', message],
+          ['assistant', recievedMessage],
+        ]);
+
+        setLoading(false);
+
+        const lastMsg = messagesRef.current[messagesRef.current.length - 1];
+
+        const autoImageSearch = localStorage.getItem('autoImageSearch');
+        const autoVideoSearch = localStorage.getItem('autoVideoSearch');
+
+        if (autoImageSearch === 'true') {
+          document
+            .getElementById(`search-images-${lastMsg.messageId}`)
+            ?.click();
+        }
+
+        if (autoVideoSearch === 'true') {
+          document
+            .getElementById(`search-videos-${lastMsg.messageId}`)
+            ?.click();
+        }
+
+        if (
+          lastMsg.role === 'assistant' &&
+          lastMsg.sources &&
+          lastMsg.sources.length > 0 &&
+          !lastMsg.suggestions
+        ) {
+          const suggestions = await getSuggestions(messagesRef.current);
+          setMessages((prev) =>
+            prev.map((msg) => {
+              if (msg.messageId === lastMsg.messageId) {
+                return { ...msg, suggestions: suggestions };
+              }
+              return msg;
+            }),
+          );
+        }
+      }
+    };
+
+    const messageIndex = messages.findIndex((m) => m.messageId === messageId);
+
+    const res = await fetch('/api/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        content: message,
+        message: {
+          messageId: messageId,
+          chatId: chatId!,
+          content: message,
+        },
+        chatId: chatId!,
+        files: fileIds,
+        focusMode: focusMode,
+        optimizationMode: optimizationMode,
+        history: rewrite
+          ? chatHistory.slice(0, messageIndex === -1 ? undefined : messageIndex)
+          : chatHistory,
+        chatModel: {
+          name: chatModelProvider.name,
+          provider: chatModelProvider.provider,
+        },
+        embeddingModel: {
+          name: embeddingModelProvider.name,
+          provider: embeddingModelProvider.provider,
+        },
+        systemInstructions: localStorage.getItem('systemInstructions'),
+      }),
+    });
+
+    if (!res.body) throw new Error('No response body');
+
+    const reader = res.body?.getReader();
+    const decoder = new TextDecoder('utf-8');
+
+    let partialChunk = '';
+
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+
+      partialChunk += decoder.decode(value, { stream: true });
+
+      try {
+        const messages = partialChunk.split('\n');
+        for (const msg of messages) {
+          if (!msg.trim()) continue;
+          const json = JSON.parse(msg);
+          messageHandler(json);
+        }
+        partialChunk = '';
+      } catch (error) {
+        console.warn('Incomplete JSON, waiting for next chunk...');
+      }
+    }
+  };
+
+  return (
+    <chatContext.Provider
+      value={{
+        messages,
+        chatHistory,
+        files,
+        fileIds,
+        focusMode,
+        chatId,
+        hasError,
+        isMessagesLoaded,
+        isReady,
+        loading,
+        messageAppeared,
+        notFound,
+        optimizationMode,
+        setFileIds,
+        setFiles,
+        setFocusMode,
+        setOptimizationMode,
+        rewrite,
+        sendMessage,
+      }}
+    >
+      {children}
+    </chatContext.Provider>
+  );
+};
+
+export const useChat = () => {
+  const ctx = useContext(chatContext);
+  return ctx;
+};

src/lib/providers/index.ts

@@ -120,7 +120,11 @@ export const getAvailableChatModelProviders = async () => {
             model: new ChatOpenAI({
               apiKey: customOpenAiApiKey,
               modelName: customOpenAiModelName,
-              temperature: 0.7,
+              ...((() => {
+                const temperatureRestrictedModels = ['gpt-5-nano','gpt-5','gpt-5-mini','o1', 'o3', 'o3-mini', 'o4-mini'];
+                const isTemperatureRestricted = temperatureRestrictedModels.some(restrictedModel => customOpenAiModelName.includes(restrictedModel));
+                return isTemperatureRestricted ? {} : { temperature: 0.7 };
+              })()),
               configuration: {
                 baseURL: customOpenAiApiUrl,
               },

src/lib/providers/ollama.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { getKeepAlive, getOllamaApiEndpoint } from '../config';
+import { getKeepAlive, getOllamaApiEndpoint, getOllamaApiKey } from '../config';
 import { ChatModel, EmbeddingModel } from '.';
 
 export const PROVIDER_INFO = {
@@ -11,6 +11,7 @@ import { OllamaEmbeddings } from '@langchain/ollama';
 
 export const loadOllamaChatModels = async () => {
   const ollamaApiEndpoint = getOllamaApiEndpoint();
+  const ollamaApiKey = getOllamaApiKey();
 
   if (!ollamaApiEndpoint) return {};
 
@@ -33,6 +34,9 @@ export const loadOllamaChatModels = async () => {
           model: model.model,
           temperature: 0.7,
           keepAlive: getKeepAlive(),
+          ...(ollamaApiKey
+            ? { headers: { Authorization: `Bearer ${ollamaApiKey}` } }
+            : {}),
         }),
       };
     });
@@ -46,6 +50,7 @@ export const loadOllamaChatModels = async () => {
 
 export const loadOllamaEmbeddingModels = async () => {
   const ollamaApiEndpoint = getOllamaApiEndpoint();
+  const ollamaApiKey = getOllamaApiKey();
 
   if (!ollamaApiEndpoint) return {};
 
@@ -66,6 +71,9 @@ export const loadOllamaEmbeddingModels = async () => {
         model: new OllamaEmbeddings({
           baseUrl: ollamaApiEndpoint,
           model: model.model,
+          ...(ollamaApiKey
+            ? { headers: { Authorization: `Bearer ${ollamaApiKey}` } }
+            : {}),
         }),
       };
     });

src/lib/providers/openai.ts

@@ -26,6 +26,10 @@ const openaiChatModels: Record<string, string>[] = [
     displayName: 'GPT-4 omni',
     key: 'gpt-4o',
   },
+  {
+    displayName: 'GPT-4o (2024-05-13)',
+    key: 'gpt-4o-2024-05-13',
+  },
   {
     displayName: 'GPT-4 omni mini',
     key: 'gpt-4o-mini',
@@ -47,12 +51,28 @@ const openaiChatModels: Record<string, string>[] = [
     key: 'gpt-5-nano',
   },
   {
-    displayName: 'GPT 5 mini',
+    displayName: 'GPT 5',
+    key: 'gpt-5',
+  },
+  {
+    displayName: 'GPT 5 Mini',
     key: 'gpt-5-mini',
   },
   {
-    displayName: 'GPT 5',
+    displayName: 'o1',
-    key: 'gpt-5',
+    key: 'o1',
+  },
+  {
+    displayName: 'o3',
+    key: 'o3',
+  },
+  {
+    displayName: 'o3 Mini',
+    key: 'o3-mini',
+  },
+  {
+    displayName: 'o4 Mini',
+    key: 'o4-mini',
   },
 ];
 
@@ -76,13 +96,23 @@ export const loadOpenAIChatModels = async () => {
     const chatModels: Record<string, ChatModel> = {};
 
     openaiChatModels.forEach((model) => {
+      // Models that only support temperature = 1
+      const temperatureRestrictedModels = ['gpt-5-nano','gpt-5','gpt-5-mini','o1', 'o3', 'o3-mini', 'o4-mini'];
+      const isTemperatureRestricted = temperatureRestrictedModels.some(restrictedModel => model.key.includes(restrictedModel));
+
+      const modelConfig: any = {
+        apiKey: openaiApiKey,
+        modelName: model.key,
+      };
+
+      // Only add temperature if the model supports it
+      if (!isTemperatureRestricted) {
+        modelConfig.temperature = 0.7;
+      }
+
       chatModels[model.key] = {
         displayName: model.displayName,
-        model: new ChatOpenAI({
+        model: new ChatOpenAI(modelConfig) as unknown as BaseChatModel,
-          apiKey: openaiApiKey,
-          modelName: model.key,
-          temperature: model.key.includes('gpt-5') ? 1 : 0.7,
-        }) as unknown as BaseChatModel,
       };
     });