From 1c3c6890398efa6eabfab7e0fb1744494cb26fec Mon Sep 17 00:00:00 2001
From: Ying-Shan Lin <yslinear@gmail.com>
Date: Fri, 13 Dec 2024 17:24:15 +0800
Subject: [PATCH 01/17] feat(anthropic): update chat models to include Claude
 3.5 Haiku and new version for Sonnet

---
 src/lib/providers/anthropic.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/providers/anthropic.ts b/src/lib/providers/anthropic.ts
index 90460c6..642a6cb 100644
--- a/src/lib/providers/anthropic.ts
+++ b/src/lib/providers/anthropic.ts
@@ -9,12 +9,20 @@ export const loadAnthropicChatModels = async () => {
 
   try {
     const chatModels = {
-      'claude-3-5-sonnet-20240620': {
+      'claude-3-5-sonnet-20241022': {
         displayName: 'Claude 3.5 Sonnet',
         model: new ChatAnthropic({
           temperature: 0.7,
           anthropicApiKey: anthropicApiKey,
-          model: 'claude-3-5-sonnet-20240620',
+          model: 'claude-3-5-sonnet-20241022',
+        }),
+      },
+      'claude-3-5-haiku-20241022': {
+        displayName: 'Claude 3.5 Haiku',
+        model: new ChatAnthropic({
+          temperature: 0.7,
+          anthropicApiKey: anthropicApiKey,
+          model: 'claude-3-5-haiku-20241022',
         }),
       },
       'claude-3-opus-20240229': {

From f30a61c4aa9c0c1289b39aca6d9ac158fdee7efa Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Mon, 16 Dec 2024 18:24:01 +0530
Subject: [PATCH 02/17] feat(metaSearchAgent): handle `undefined` content for
 YT. search

---
 src/search/metaSearchAgent.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/search/metaSearchAgent.ts b/src/search/metaSearchAgent.ts
index b1d8114..1e85cf6 100644
--- a/src/search/metaSearchAgent.ts
+++ b/src/search/metaSearchAgent.ts
@@ -211,7 +211,11 @@ class MetaSearchAgent implements MetaSearchAgentType {
           const documents = res.results.map(
             (result) =>
               new Document({
-                pageContent: result.content,
+                pageContent:
+                  result.content ||
+                  this.config.activeEngines.includes('youtube')
+                    ? result.title
+                    : '' /* Todo: Implement transcript grabbing using Youtubei (source: https://www.npmjs.com/package/youtubei) */,
                 metadata: {
                   title: result.title,
                   url: result.url,
@@ -414,7 +418,10 @@ class MetaSearchAgent implements MetaSearchAgentType {
 
   private processDocs(docs: Document[]) {
     return docs
-      .map((_, index) => `${index + 1}. ${docs[index].pageContent}`)
+      .map(
+        (_, index) =>
+          `${index + 1}. ${docs[index].metadata.title} ${docs[index].pageContent}`,
+      )
       .join('\n');
   }
 

From c3a231a528d969e72cd5d83a83ca4e3ddb9ee849 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Mon, 16 Dec 2024 20:59:21 +0530
Subject: [PATCH 03/17] feat(readme): add discord server

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 721d41c..cf9e459 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
 # 🚀 Perplexica - An AI-powered search engine 🔎 <!-- omit in toc -->
 
+[![Discord](https://dcbadge.vercel.app/api/server/26aArMy8tT?style=flat&compact=true)](https://discord.gg/26aArMy8tT)
+
+
 ![preview](.assets/perplexica-screenshot.png?)
 
 ## Table of Contents <!-- omit in toc -->

From 4cb38148b31eb53db37a9447450847f6d0c8ac96 Mon Sep 17 00:00:00 2001
From: Bart Jaskulski <bjaskulski@protonmail.com>
Date: Thu, 19 Dec 2024 08:07:14 +0100
Subject: [PATCH 04/17] Remove deprecated Groq models

Signed-off-by: Bart Jaskulski <bjaskulski@protonmail.com>
---
 src/lib/providers/groq.ts | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/src/lib/providers/groq.ts b/src/lib/providers/groq.ts
index 62ca2d7..16f251b 100644
--- a/src/lib/providers/groq.ts
+++ b/src/lib/providers/groq.ts
@@ -48,19 +48,6 @@ export const loadGroqChatModels = async () => {
           },
         ),
       },
-      'llama-3.1-70b-versatile': {
-        displayName: 'Llama 3.1 70B',
-        model: new ChatOpenAI(
-          {
-            openAIApiKey: groqApiKey,
-            modelName: 'llama-3.1-70b-versatile',
-            temperature: 0.7,
-          },
-          {
-            baseURL: 'https://api.groq.com/openai/v1',
-          },
-        ),
-      },
       'llama-3.1-8b-instant': {
         displayName: 'Llama 3.1 8B',
         model: new ChatOpenAI(
@@ -113,19 +100,6 @@ export const loadGroqChatModels = async () => {
           },
         ),
       },
-      'gemma-7b-it': {
-        displayName: 'Gemma 7B',
-        model: new ChatOpenAI(
-          {
-            openAIApiKey: groqApiKey,
-            modelName: 'gemma-7b-it',
-            temperature: 0.7,
-          },
-          {
-            baseURL: 'https://api.groq.com/openai/v1',
-          },
-        ),
-      },
       'gemma2-9b-it': {
         displayName: 'Gemma2 9B',
         model: new ChatOpenAI(

From 960e34aa3df48ea85777796f2aa5aa08812f79fb Mon Sep 17 00:00:00 2001
From: Bart Jaskulski <bjaskulski@protonmail.com>
Date: Thu, 19 Dec 2024 08:07:36 +0100
Subject: [PATCH 05/17] Add Llama 3.3 model from Groq

Signed-off-by: Bart Jaskulski <bjaskulski@protonmail.com>
---
 src/lib/providers/groq.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/lib/providers/groq.ts b/src/lib/providers/groq.ts
index 16f251b..41004ec 100644
--- a/src/lib/providers/groq.ts
+++ b/src/lib/providers/groq.ts
@@ -9,6 +9,19 @@ export const loadGroqChatModels = async () => {
 
   try {
     const chatModels = {
+      'llama-3.3-70b-versatile': {
+        displayName: 'Llama 3.3 70B',
+        model: new ChatOpenAI(
+          {
+            openAIApiKey: groqApiKey,
+            modelName: 'llama-3.3-70b-versatile',
+            temperature: 0.7,
+          },
+          {
+            baseURL: 'https://api.groq.com/openai/v1',
+          },
+        ),
+      },
       'llama-3.2-3b-preview': {
         displayName: 'Llama 3.2 3B',
         model: new ChatOpenAI(

From d30f714930e39ddd6192317902b1134899de5dc3 Mon Sep 17 00:00:00 2001
From: hacking-racoon <ckgudwlscjsw@naver.com>
Date: Wed, 25 Dec 2024 15:19:23 +0900
Subject: [PATCH 06/17] feat(SearchVideos): Modify Lightbox to pause the prev
 video when moving to next one, preventing interference with new video.

---
 ui/components/SearchVideos.tsx | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/ui/components/SearchVideos.tsx b/ui/components/SearchVideos.tsx
index 2d820ef..170df61 100644
--- a/ui/components/SearchVideos.tsx
+++ b/ui/components/SearchVideos.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { PlayCircle, PlayIcon, PlusIcon, VideoIcon } from 'lucide-react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import Lightbox, { GenericSlide, VideoSlide } from 'yet-another-react-lightbox';
 import 'yet-another-react-lightbox/styles.css';
 import { Message } from './ChatWindow';
@@ -35,6 +35,8 @@ const Searchvideos = ({
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [slides, setSlides] = useState<VideoSlide[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const videoRefs = useRef<(HTMLIFrameElement | null)[]>([]);
 
   return (
     <>
@@ -182,18 +184,39 @@ const Searchvideos = ({
             open={open}
             close={() => setOpen(false)}
             slides={slides}
+            index={currentIndex}
+            on={{
+              view: ({ index }) => {
+                const previousIframe = videoRefs.current[currentIndex];
+                if (previousIframe?.contentWindow) {
+                  previousIframe.contentWindow.postMessage(
+                    '{"event":"command","func":"pauseVideo","args":""}',
+                    '*',
+                  );
+                }
+
+                setCurrentIndex(index);
+              },
+            }}
             render={{
-              slide: ({ slide }) =>
-                slide.type === 'video-slide' ? (
+              slide: ({ slide }) => {
+                const index = slides.findIndex((s) => s === slide);
+                return slide.type === 'video-slide' ? (
                   <div className="h-full w-full flex flex-row items-center justify-center">
                     <iframe
-                      src={slide.iframe_src}
+                      src={`${slide.iframe_src}${slide.iframe_src.includes('?') ? '&' : '?'}enablejsapi=1`}
+                      ref={(el) => {
+                        if (el) {
+                          videoRefs.current[index] = el;
+                        }
+                      }}
                       className="aspect-video max-h-[95vh] w-[95vw] rounded-2xl md:w-[80vw]"
                       allowFullScreen
                       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                     />
                   </div>
-                ) : null,
+                ) : null;
+              },
             }}
           />
         </>

From b5acf34ef8c7cddebd0b6978a5ab8135e5cfb9dc Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Thu, 26 Dec 2024 18:59:57 +0530
Subject: [PATCH 07/17] feat(chat-window): fix bugs handling custom openai,
 closes #529

---
 ui/components/ChatWindow.tsx | 46 +++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index fd3d0a6..62fa9dc 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -43,6 +43,14 @@ const useSocket = (
         let embeddingModelProvider = localStorage.getItem(
           'embeddingModelProvider',
         );
+        let openAIBaseURL =
+          chatModelProvider === 'custom_openai'
+            ? localStorage.getItem('openAIBaseURL')
+            : null;
+        let openAIPIKey =
+          chatModelProvider === 'custom_openai'
+            ? localStorage.getItem('openAIApiKey')
+            : null;
 
         const providers = await fetch(
           `${process.env.NEXT_PUBLIC_API_URL}/models`,
@@ -62,16 +70,18 @@ const useSocket = (
           if (!chatModel || !chatModelProvider) {
             const chatModelProviders = providers.chatModelProviders;
 
-            chatModelProvider = Object.keys(chatModelProviders)[0];
+            chatModelProvider =
+              chatModelProvider || Object.keys(chatModelProviders)[0];
 
             if (chatModelProvider === 'custom_openai') {
               toast.error(
-                'Seems like you are using the custom OpenAI provider, please open the settings and configure the API key and base URL',
+                'Seems like you are using the custom OpenAI provider, please open the settings and enter a model name to use.',
               );
               setError(true);
               return;
             } else {
               chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
+
               if (
                 !chatModelProviders ||
                 Object.keys(chatModelProviders).length === 0
@@ -108,18 +118,42 @@ const useSocket = (
 
           if (
             Object.keys(chatModelProviders).length > 0 &&
-            !chatModelProviders[chatModelProvider]
+            (((!openAIBaseURL || !openAIPIKey) &&
+              chatModelProvider === 'custom_openai') ||
+              !chatModelProviders[chatModelProvider])
           ) {
-            chatModelProvider = Object.keys(chatModelProviders)[0];
+            const chatModelProvidersKeys = Object.keys(chatModelProviders);
+            chatModelProvider =
+              chatModelProvidersKeys.find(
+                (key) => Object.keys(chatModelProviders[key]).length > 0,
+              ) || chatModelProvidersKeys[0];
+
+            if (
+              chatModelProvider === 'custom_openai' &&
+              (!openAIBaseURL || !openAIPIKey)
+            ) {
+              toast.error(
+                'Seems like you are using the custom OpenAI provider, please open the settings and configure the API key and base URL',
+              );
+              setError(true);
+              return;
+            }
+
             localStorage.setItem('chatModelProvider', chatModelProvider);
           }
 
           if (
             chatModelProvider &&
-            chatModelProvider != 'custom_openai' &&
+            (!openAIBaseURL || !openAIPIKey) &&
             !chatModelProviders[chatModelProvider][chatModel]
           ) {
-            chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
+            chatModel = Object.keys(
+              chatModelProviders[
+                Object.keys(chatModelProviders[chatModelProvider]).length > 0
+                  ? chatModelProvider
+                  : Object.keys(chatModelProviders)[0]
+              ],
+            )[0];
             localStorage.setItem('chatModel', chatModel);
           }
 

From 409c811a4286b2ca17be38acda326faef7e04004 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Thu, 26 Dec 2024 19:02:20 +0530
Subject: [PATCH 08/17] feat(ollama): use axios instead of fetch

---
 src/lib/providers/ollama.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/providers/ollama.ts b/src/lib/providers/ollama.ts
index e23fb76..7277b27 100644
--- a/src/lib/providers/ollama.ts
+++ b/src/lib/providers/ollama.ts
@@ -2,6 +2,7 @@ import { OllamaEmbeddings } from '@langchain/community/embeddings/ollama';
 import { getKeepAlive, getOllamaApiEndpoint } from '../../config';
 import logger from '../../utils/logger';
 import { ChatOllama } from '@langchain/community/chat_models/ollama';
+import axios from 'axios';
 
 export const loadOllamaChatModels = async () => {
   const ollamaEndpoint = getOllamaApiEndpoint();
@@ -10,13 +11,13 @@ export const loadOllamaChatModels = async () => {
   if (!ollamaEndpoint) return {};
 
   try {
-    const response = await fetch(`${ollamaEndpoint}/api/tags`, {
+    const response = await axios.get(`${ollamaEndpoint}/api/tags`, {
       headers: {
         'Content-Type': 'application/json',
       },
     });
 
-    const { models: ollamaModels } = (await response.json()) as any;
+    const { models: ollamaModels } = response.data;
 
     const chatModels = ollamaModels.reduce((acc, model) => {
       acc[model.model] = {
@@ -45,13 +46,13 @@ export const loadOllamaEmbeddingsModels = async () => {
   if (!ollamaEndpoint) return {};
 
   try {
-    const response = await fetch(`${ollamaEndpoint}/api/tags`, {
+    const response = await axios.get(`${ollamaEndpoint}/api/tags`, {
       headers: {
         'Content-Type': 'application/json',
       },
     });
 
-    const { models: ollamaModels } = (await response.json()) as any;
+    const { models: ollamaModels } = response.data;
 
     const embeddingsModels = ollamaModels.reduce((acc, model) => {
       acc[model.model] = {

From d18e88acc97cc26b533778fc74743c93529f130c Mon Sep 17 00:00:00 2001
From: Sainadh Devireddy <saidev@amazon.com>
Date: Fri, 27 Dec 2024 20:55:55 -0800
Subject: [PATCH 09/17] Delete msgs only belonging to the chat

---
 src/websocket/messageHandler.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/websocket/messageHandler.ts b/src/websocket/messageHandler.ts
index 6cb3ddf..8817aae 100644
--- a/src/websocket/messageHandler.ts
+++ b/src/websocket/messageHandler.ts
@@ -5,7 +5,7 @@ import type { Embeddings } from '@langchain/core/embeddings';
 import logger from '../utils/logger';
 import db from '../db';
 import { chats, messages as messagesSchema } from '../db/schema';
-import { eq, asc, gt } from 'drizzle-orm';
+import { eq, asc, gt, and } from 'drizzle-orm';
 import crypto from 'crypto';
 import { getFileDetails } from '../utils/files';
 import MetaSearchAgent, {
@@ -238,7 +238,7 @@ export const handleMessage = async (
           } else {
             await db
               .delete(messagesSchema)
-              .where(gt(messagesSchema.id, messageExists.id))
+              .where(and(gt(messagesSchema.id, messageExists.id), eq(messagesSchema.chatId, parsedMessage.chatId)))
               .execute();
           }
         } catch (err) {

From 5a648f34b8c7f31b051dc9b7b94855a9f57a884f Mon Sep 17 00:00:00 2001
From: Sainadh Devireddy <saidev@amazon.com>
Date: Sat, 4 Jan 2025 10:36:33 -0800
Subject: [PATCH 10/17] Set pageContent correctly

---
 src/search/metaSearchAgent.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/search/metaSearchAgent.ts b/src/search/metaSearchAgent.ts
index 1e85cf6..ee82c10 100644
--- a/src/search/metaSearchAgent.ts
+++ b/src/search/metaSearchAgent.ts
@@ -213,9 +213,9 @@ class MetaSearchAgent implements MetaSearchAgentType {
               new Document({
                 pageContent:
                   result.content ||
-                  this.config.activeEngines.includes('youtube')
+                  (this.config.activeEngines.includes('youtube')
                     ? result.title
-                    : '' /* Todo: Implement transcript grabbing using Youtubei (source: https://www.npmjs.com/package/youtubei) */,
+                    : '') /* Todo: Implement transcript grabbing using Youtubei (source: https://www.npmjs.com/package/youtubei) */,
                 metadata: {
                   title: result.title,
                   url: result.url,

From 5526d5f60f31ec76e01e8f8482cf873ff6522202 Mon Sep 17 00:00:00 2001
From: realies <5107843+realies@users.noreply.github.com>
Date: Sun, 5 Jan 2025 17:29:53 +0000
Subject: [PATCH 11/17] fix(ws-error): add exponential reconnect mechanism

---
 ui/components/ChatWindow.tsx | 102 ++++++++++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 20 deletions(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index 62fa9dc..3968d92 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -9,7 +9,7 @@ import crypto from 'crypto';
 import { toast } from 'sonner';
 import { useSearchParams } from 'next/navigation';
 import { getSuggestions } from '@/lib/actions';
-import Error from 'next/error';
+import NextError from 'next/error';
 
 export type Message = {
   messageId: string;
@@ -32,11 +32,24 @@ const useSocket = (
   setIsWSReady: (ready: boolean) => void,
   setError: (error: boolean) => void,
 ) => {
-  const [ws, setWs] = useState<WebSocket | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
+  const retryCountRef = useRef(0);
+  const isCleaningUpRef = useRef(false);
+  const MAX_RETRIES = 3;
+  const INITIAL_BACKOFF = 1000; // 1 second
+
+  const getBackoffDelay = (retryCount: number) => {
+    return Math.min(INITIAL_BACKOFF * Math.pow(2, retryCount), 10000); // Cap at 10 seconds
+  };
 
   useEffect(() => {
-    if (!ws) {
-      const connectWs = async () => {
+    const connectWs = async () => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.close();
+      }
+
+      try {
         let chatModel = localStorage.getItem('chatModel');
         let chatModelProvider = localStorage.getItem('chatModelProvider');
         let embeddingModel = localStorage.getItem('embeddingModel');
@@ -59,7 +72,10 @@ const useSocket = (
               'Content-Type': 'application/json',
             },
           },
-        ).then(async (res) => await res.json());
+        ).then(async (res) => {
+          if (!res.ok) throw new Error(`Failed to fetch models: ${res.status} ${res.statusText}`);
+          return res.json();
+        });
 
         if (
           !chatModel ||
@@ -202,6 +218,7 @@ const useSocket = (
         wsURL.search = searchParams.toString();
 
         const ws = new WebSocket(wsURL.toString());
+        wsRef.current = ws;
 
         const timeoutId = setTimeout(() => {
           if (ws.readyState !== 1) {
@@ -217,11 +234,14 @@ const useSocket = (
             const interval = setInterval(() => {
               if (ws.readyState === 1) {
                 setIsWSReady(true);
+                retryCountRef.current = 0;
+                setError(false);
+                toast.success('Connection restored');
                 clearInterval(interval);
               }
             }, 5);
             clearTimeout(timeoutId);
-            console.log('[DEBUG] opened');
+            console.debug(new Date(), 'ws:connected');
           }
           if (data.type === 'error') {
             toast.error(data.data);
@@ -230,24 +250,62 @@ const useSocket = (
 
         ws.onerror = () => {
           clearTimeout(timeoutId);
-          setError(true);
+          setIsWSReady(false);
           toast.error('WebSocket connection error.');
         };
 
         ws.onclose = () => {
           clearTimeout(timeoutId);
-          setError(true);
-          console.log('[DEBUG] closed');
+          setIsWSReady(false);
+          console.debug(new Date(), 'ws:disconnected');
+          if (!isCleaningUpRef.current) {
+            toast.error('Connection lost. Attempting to reconnect...');
+            attemptReconnect();
+          }
         };
 
-        setWs(ws);
-      };
+      } catch (error) {
+        console.debug(new Date(), 'ws:error', error);
+        attemptReconnect();
+      }
+    };
 
-      connectWs();
-    }
-  }, [ws, url, setIsWSReady, setError]);
+    const attemptReconnect = () => {
+      retryCountRef.current += 1;
+      if (retryCountRef.current > MAX_RETRIES) {
+        console.debug(new Date(), 'ws:max_retries');
+        setError(true);
+        toast.error('Unable to connect to server after multiple attempts. Please refresh the page to try again.');
+        return;
+      }
 
-  return ws;
+      const backoffDelay = getBackoffDelay(retryCountRef.current);
+      console.debug(new Date(), `ws:retry attempt=${retryCountRef.current}/${MAX_RETRIES} delay=${backoffDelay}ms`);
+
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+
+      reconnectTimeoutRef.current = setTimeout(() => {
+        connectWs();
+      }, backoffDelay);
+    };
+
+    connectWs();
+
+    return () => {
+      isCleaningUpRef.current = true;
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.close();
+      }
+      console.debug(new Date(), 'ws:cleanup');
+    };
+  }, [url, setIsWSReady, setError]);
+
+  return wsRef.current;
 };
 
 const loadMessages = async (
@@ -291,7 +349,7 @@ const loadMessages = async (
     return [msg.role, msg.content];
   }) as [string, string][];
 
-  console.log('[DEBUG] messages loaded');
+  console.debug(new Date(), 'app:messages_loaded');
 
   document.title = messages[0].content;
 
@@ -373,7 +431,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
     return () => {
       if (ws?.readyState === 1) {
         ws.close();
-        console.log('[DEBUG] closed');
+        console.debug(new Date(), 'ws:cleanup');
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -388,12 +446,16 @@ const ChatWindow = ({ id }: { id?: string }) => {
   useEffect(() => {
     if (isMessagesLoaded && isWSReady) {
       setIsReady(true);
-      console.log('[DEBUG] ready');
+      console.debug(new Date(), 'app:ready');
     }
   }, [isMessagesLoaded, isWSReady]);
 
   const sendMessage = async (message: string, messageId?: string) => {
     if (loading) return;
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      toast.error('Cannot send message while disconnected');
+      return;
+    }
 
     setLoading(true);
     setMessageAppeared(false);
@@ -404,7 +466,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
     messageId = messageId ?? crypto.randomBytes(7).toString('hex');
 
-    ws?.send(
+    ws.send(
       JSON.stringify({
         type: 'message',
         message: {
@@ -558,7 +620,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   return isReady ? (
     notFound ? (
-      <Error statusCode={404} />
+      <NextError statusCode={404} />
     ) : (
       <div>
         {messages.length > 0 ? (

From 0ec54fe6c05270dcf03bfc3cc01b07c19b4bd41a Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:43:54 +0530
Subject: [PATCH 12/17] feat(chat-window): remove toast

---
 ui/components/ChatWindow.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index 3968d92..b6f1b30 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -236,7 +236,6 @@ const useSocket = (
                 setIsWSReady(true);
                 retryCountRef.current = 0;
                 setError(false);
-                toast.success('Connection restored');
                 clearInterval(interval);
               }
             }, 5);

From b7f7d25f549fc213b6dc63f17ea9204e41ba9806 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:44:19 +0530
Subject: [PATCH 13/17] feat(chat-window): lint & beautify

---
 ui/components/ChatWindow.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index b6f1b30..ed3594c 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -73,7 +73,10 @@ const useSocket = (
             },
           },
         ).then(async (res) => {
-          if (!res.ok) throw new Error(`Failed to fetch models: ${res.status} ${res.statusText}`);
+          if (!res.ok)
+            throw new Error(
+              `Failed to fetch models: ${res.status} ${res.statusText}`,
+            );
           return res.json();
         });
 
@@ -262,7 +265,6 @@ const useSocket = (
             attemptReconnect();
           }
         };
-
       } catch (error) {
         console.debug(new Date(), 'ws:error', error);
         attemptReconnect();
@@ -274,12 +276,17 @@ const useSocket = (
       if (retryCountRef.current > MAX_RETRIES) {
         console.debug(new Date(), 'ws:max_retries');
         setError(true);
-        toast.error('Unable to connect to server after multiple attempts. Please refresh the page to try again.');
+        toast.error(
+          'Unable to connect to server after multiple attempts. Please refresh the page to try again.',
+        );
         return;
       }
 
       const backoffDelay = getBackoffDelay(retryCountRef.current);
-      console.debug(new Date(), `ws:retry attempt=${retryCountRef.current}/${MAX_RETRIES} delay=${backoffDelay}ms`);
+      console.debug(
+        new Date(),
+        `ws:retry attempt=${retryCountRef.current}/${MAX_RETRIES} delay=${backoffDelay}ms`,
+      );
 
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);

From 99cae076a79f993ba8da5f91d0166f06d67b1ad1 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:49:40 +0530
Subject: [PATCH 14/17] feat(chat-window): display toast when retried

---
 ui/components/ChatWindow.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index ed3594c..a44c550 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -237,8 +237,11 @@ const useSocket = (
             const interval = setInterval(() => {
               if (ws.readyState === 1) {
                 setIsWSReady(true);
-                retryCountRef.current = 0;
                 setError(false);
+                if (retryCountRef.current > 0) {
+                  toast.success('Connection restored.');
+                }
+                retryCountRef.current = 0;
                 clearInterval(interval);
               }
             }, 5);

From 6d9d71279072112243ca45a887830ba2666000e8 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Tue, 7 Jan 2025 12:26:38 +0530
Subject: [PATCH 15/17] feat(chat-window): correctly handle server side WS
 closure

---
 ui/components/ChatWindow.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index a44c550..ac15b37 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -270,12 +270,14 @@ const useSocket = (
         };
       } catch (error) {
         console.debug(new Date(), 'ws:error', error);
+        setIsWSReady(false);
         attemptReconnect();
       }
     };
 
     const attemptReconnect = () => {
       retryCountRef.current += 1;
+
       if (retryCountRef.current > MAX_RETRIES) {
         console.debug(new Date(), 'ws:max_retries');
         setError(true);
@@ -303,14 +305,14 @@ const useSocket = (
     connectWs();
 
     return () => {
-      isCleaningUpRef.current = true;
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
       }
       if (wsRef.current?.readyState === WebSocket.OPEN) {
         wsRef.current.close();
+        isCleaningUpRef.current = true;
+        console.debug(new Date(), 'ws:cleanup');
       }
-      console.debug(new Date(), 'ws:cleanup');
     };
   }, [url, setIsWSReady, setError]);
 
@@ -456,6 +458,8 @@ const ChatWindow = ({ id }: { id?: string }) => {
     if (isMessagesLoaded && isWSReady) {
       setIsReady(true);
       console.debug(new Date(), 'app:ready');
+    } else {
+      setIsReady(false);
     }
   }, [isMessagesLoaded, isWSReady]);
 

From 2dc60d06e3ac1311480f48aef21691d380f84e19 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Sat, 11 Jan 2025 13:10:10 +0530
Subject: [PATCH 16/17] feat(chat-window): show settings during error on mobile

---
 ui/components/ChatWindow.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index 62fa9dc..41a8f90 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -10,6 +10,8 @@ import { toast } from 'sonner';
 import { useSearchParams } from 'next/navigation';
 import { getSuggestions } from '@/lib/actions';
 import Error from 'next/error';
+import { Settings } from 'lucide-react';
+import SettingsDialog from './SettingsDialog';
 
 export type Message = {
   messageId: string;
@@ -344,6 +346,8 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   const [notFound, setNotFound] = useState(false);
 
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
   useEffect(() => {
     if (
       chatId &&
@@ -548,10 +552,19 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   if (hasError) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <p className="dark:text-white/70 text-black/70 text-sm">
-          Failed to connect to the server. Please try again later.
-        </p>
+      <div className="relative">
+        <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
+          <Settings
+            className="cursor-pointer lg:hidden"
+            onClick={() => setIsSettingsOpen(true)}
+          />
+        </div>
+        <div className="flex flex-col items-center justify-center min-h-screen">
+          <p className="dark:text-white/70 text-black/70 text-sm">
+            Failed to connect to the server. Please try again later.
+          </p>
+        </div>
+        <SettingsDialog isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
       </div>
     );
   }

From 5c787bbb55fd71edc3d9d2b8889d8e274f5754b3 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Sat, 11 Jan 2025 13:10:23 +0530
Subject: [PATCH 17/17] feat(app): lint & beautify

---
 src/websocket/messageHandler.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/websocket/messageHandler.ts b/src/websocket/messageHandler.ts
index 8817aae..395c0de 100644
--- a/src/websocket/messageHandler.ts
+++ b/src/websocket/messageHandler.ts
@@ -238,7 +238,12 @@ export const handleMessage = async (
           } else {
             await db
               .delete(messagesSchema)
-              .where(and(gt(messagesSchema.id, messageExists.id), eq(messagesSchema.chatId, parsedMessage.chatId)))
+              .where(
+                and(
+                  gt(messagesSchema.id, messageExists.id),
+                  eq(messagesSchema.chatId, parsedMessage.chatId),
+                ),
+              )
               .execute();
           }
         } catch (err) {