feat(package): bump version

README.md

@@ -10,6 +10,7 @@
 - [Installation](#installation)
   - [Getting Started with Docker (Recommended)](#getting-started-with-docker-recommended)
   - [Non-Docker Installation](#non-docker-installation)
+    - [Ollama connection errors](#ollama-connection-errors)
 - [One-Click Deployment](#one-click-deployment)
 - [Upcoming Features](#upcoming-features)
 - [Support Us](#support-us)
@@ -90,6 +91,16 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 
 **Note**: Using Docker is recommended as it simplifies the setup process, especially for managing environment variables and dependencies.
 
+#### Ollama connection errors
+
+If you're facing an Ollama connection error, it is often related to the backend not being able to connect to Ollama's API. How can you fix it? You can fix it by updating your Ollama API URL in the settings menu to the following:
+
+On Windows: `http://host.docker.internal:11434`<br>
+On Mac: `http://host.docker.internal:11434`<br>
+On Linux: `http://private_ip_of_computer_hosting_ollama:11434`
+
+You need to edit the ports accordingly.
+
 ## One-Click Deployment
 
 [![Deploy to RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploylobe.svg)](https://repocloud.io/details/?app_id=267)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-backend",
-  "version": "1.3.1",
+  "version": "1.3.4",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {

src/lib/providers.ts

@@ -90,7 +90,11 @@ export const getAvailableChatModelProviders = async () => {
 
   if (ollamaEndpoint) {
     try {
-      const response = await fetch(`${ollamaEndpoint}/api/tags`);
+      const response = await fetch(`${ollamaEndpoint}/api/tags`, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
 
       const { models: ollamaModels } = (await response.json()) as any;
 
@@ -137,7 +141,11 @@ export const getAvailableEmbeddingModelProviders = async () => {
 
   if (ollamaEndpoint) {
     try {
-      const response = await fetch(`${ollamaEndpoint}/api/tags`);
+      const response = await fetch(`${ollamaEndpoint}/api/tags`, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
 
       const { models: ollamaModels } = (await response.json()) as any;
 

src/websocket/connectionManager.ts

@@ -14,73 +14,87 @@ export const handleConnection = async (
   ws: WebSocket,
   request: IncomingMessage,
 ) => {
-  const searchParams = new URL(request.url, `http://${request.headers.host}`)
-    .searchParams;
+  try {
+    const searchParams = new URL(request.url, `http://${request.headers.host}`)
+      .searchParams;
 
-  const [chatModelProviders, embeddingModelProviders] = await Promise.all([
-    getAvailableChatModelProviders(),
-    getAvailableEmbeddingModelProviders(),
-  ]);
+    const [chatModelProviders, embeddingModelProviders] = await Promise.all([
+      getAvailableChatModelProviders(),
+      getAvailableEmbeddingModelProviders(),
+    ]);
 
-  const chatModelProvider =
-    searchParams.get('chatModelProvider') || Object.keys(chatModelProviders)[0];
-  const chatModel =
-    searchParams.get('chatModel') ||
-    Object.keys(chatModelProviders[chatModelProvider])[0];
+    const chatModelProvider =
+      searchParams.get('chatModelProvider') ||
+      Object.keys(chatModelProviders)[0];
+    const chatModel =
+      searchParams.get('chatModel') ||
+      Object.keys(chatModelProviders[chatModelProvider])[0];
 
-  const embeddingModelProvider =
-    searchParams.get('embeddingModelProvider') ||
-    Object.keys(embeddingModelProviders)[0];
-  const embeddingModel =
-    searchParams.get('embeddingModel') ||
-    Object.keys(embeddingModelProviders[embeddingModelProvider])[0];
+    const embeddingModelProvider =
+      searchParams.get('embeddingModelProvider') ||
+      Object.keys(embeddingModelProviders)[0];
+    const embeddingModel =
+      searchParams.get('embeddingModel') ||
+      Object.keys(embeddingModelProviders[embeddingModelProvider])[0];
 
-  let llm: BaseChatModel | undefined;
-  let embeddings: Embeddings | undefined;
+    let llm: BaseChatModel | undefined;
+    let embeddings: Embeddings | undefined;
 
-  if (
-    chatModelProviders[chatModelProvider] &&
-    chatModelProviders[chatModelProvider][chatModel] &&
-    chatModelProvider != 'custom_openai'
-  ) {
-    llm = chatModelProviders[chatModelProvider][chatModel] as
-      | BaseChatModel
-      | undefined;
-  } else if (chatModelProvider == 'custom_openai') {
-    llm = new ChatOpenAI({
-      modelName: chatModel,
-      openAIApiKey: searchParams.get('openAIApiKey'),
-      temperature: 0.7,
-      configuration: {
-        baseURL: searchParams.get('openAIBaseURL'),
-      },
-    });
-  }
+    if (
+      chatModelProviders[chatModelProvider] &&
+      chatModelProviders[chatModelProvider][chatModel] &&
+      chatModelProvider != 'custom_openai'
+    ) {
+      llm = chatModelProviders[chatModelProvider][chatModel] as
+        | BaseChatModel
+        | undefined;
+    } else if (chatModelProvider == 'custom_openai') {
+      llm = new ChatOpenAI({
+        modelName: chatModel,
+        openAIApiKey: searchParams.get('openAIApiKey'),
+        temperature: 0.7,
+        configuration: {
+          baseURL: searchParams.get('openAIBaseURL'),
+        },
+      });
+    }
 
-  if (
-    embeddingModelProviders[embeddingModelProvider] &&
-    embeddingModelProviders[embeddingModelProvider][embeddingModel]
-  ) {
-    embeddings = embeddingModelProviders[embeddingModelProvider][
-      embeddingModel
-    ] as Embeddings | undefined;
-  }
+    if (
+      embeddingModelProviders[embeddingModelProvider] &&
+      embeddingModelProviders[embeddingModelProvider][embeddingModel]
+    ) {
+      embeddings = embeddingModelProviders[embeddingModelProvider][
+        embeddingModel
+      ] as Embeddings | undefined;
+    }
 
-  if (!llm || !embeddings) {
+    if (!llm || !embeddings) {
+      ws.send(
+        JSON.stringify({
+          type: 'error',
+          data: 'Invalid LLM or embeddings model selected, please refresh the page and try again.',
+          key: 'INVALID_MODEL_SELECTED',
+        }),
+      );
+      ws.close();
+    }
+
+    ws.on(
+      'message',
+      async (message) =>
+        await handleMessage(message.toString(), ws, llm, embeddings),
+    );
+
+    ws.on('close', () => logger.debug('Connection closed'));
+  } catch (err) {
     ws.send(
       JSON.stringify({
         type: 'error',
-        data: 'Invalid LLM or embeddings model selected',
+        data: 'Internal server error.',
+        key: 'INTERNAL_SERVER_ERROR',
       }),
     );
     ws.close();
+    logger.error(err);
   }
-
-  ws.on(
-    'message',
-    async (message) =>
-      await handleMessage(message.toString(), ws, llm, embeddings),
-  );
-
-  ws.on('close', () => logger.debug('Connection closed'));
 };

src/websocket/messageHandler.ts

@@ -57,7 +57,13 @@ const handleEmitterEvents = (
   });
   emitter.on('error', (data) => {
     const parsedData = JSON.parse(data);
-    ws.send(JSON.stringify({ type: 'error', data: parsedData.data }));
+    ws.send(
+      JSON.stringify({
+        type: 'error',
+        data: parsedData.data,
+        key: 'CHAIN_ERROR',
+      }),
+    );
   });
 };
 
@@ -73,7 +79,11 @@ export const handleMessage = async (
 
     if (!parsedMessage.content)
       return ws.send(
-        JSON.stringify({ type: 'error', data: 'Invalid message format' }),
+        JSON.stringify({
+          type: 'error',
+          data: 'Invalid message format',
+          key: 'INVALID_FORMAT',
+        }),
       );
 
     const history: BaseMessage[] = parsedMessage.history.map((msg) => {
@@ -99,11 +109,23 @@ export const handleMessage = async (
         );
         handleEmitterEvents(emitter, ws, id);
       } else {
-        ws.send(JSON.stringify({ type: 'error', data: 'Invalid focus mode' }));
+        ws.send(
+          JSON.stringify({
+            type: 'error',
+            data: 'Invalid focus mode',
+            key: 'INVALID_FOCUS_MODE',
+          }),
+        );
       }
     }
   } catch (err) {
-    ws.send(JSON.stringify({ type: 'error', data: 'Invalid message format' }));
+    ws.send(
+      JSON.stringify({
+        type: 'error',
+        data: 'Invalid message format',
+        key: 'INVALID_FORMAT',
+      }),
+    );
     logger.error(`Failed to handle message: ${err}`);
   }
 };

ui/components/ChatWindow.tsx

@@ -50,13 +50,13 @@ const useSocket = (url: string) => {
             !chatModelProviders ||
             Object.keys(chatModelProviders).length === 0
           )
-            return console.error('No chat models available');
+            return toast.error('No chat models available');
 
           if (
             !embeddingModelProviders ||
             Object.keys(embeddingModelProviders).length === 0
           )
-            return console.error('No embedding models available');
+            return toast.error('No embedding models available');
 
           chatModelProvider = Object.keys(chatModelProviders)[0];
           chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
@@ -108,6 +108,9 @@ const useSocket = (url: string) => {
           const parsedData = JSON.parse(e.data);
           if (parsedData.type === 'error') {
             toast.error(parsedData.data);
+            if (parsedData.key === 'INVALID_MODEL_SELECTED') {
+              localStorage.clear();
+            }
           }
         };
       };

ui/components/SettingsDialog.tsx

@@ -33,12 +33,8 @@ const SettingsDialog = ({
   const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState<
     string | null
   >(null);
-  const [customOpenAIApiKey, setCustomOpenAIApiKey] = useState<string | null>(
-    null,
-  );
-  const [customOpenAIBaseURL, setCustomOpenAIBaseURL] = useState<string | null>(
-    null,
-  );
+  const [customOpenAIApiKey, setCustomOpenAIApiKey] = useState<string>('');
+  const [customOpenAIBaseURL, setCustomOpenAIBaseURL] = useState<string>('');
   const [isLoading, setIsLoading] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
 
@@ -51,8 +47,49 @@ const SettingsDialog = ({
             'Content-Type': 'application/json',
           },
         });
-        const data = await res.json();
+
+        const data = (await res.json()) as SettingsType;
         setConfig(data);
+
+        const chatModelProvidersKeys = Object.keys(
+          data.chatModelProviders || {},
+        );
+        const embeddingModelProvidersKeys = Object.keys(
+          data.embeddingModelProviders || {},
+        );
+
+        const defaultChatModelProvider =
+          chatModelProvidersKeys.length > 0 ? chatModelProvidersKeys[0] : '';
+        const defaultEmbeddingModelProvider =
+          embeddingModelProvidersKeys.length > 0
+            ? embeddingModelProvidersKeys[0]
+            : '';
+
+        const chatModelProvider =
+          localStorage.getItem('chatModelProvider') ||
+          defaultChatModelProvider ||
+          '';
+        const chatModel =
+          localStorage.getItem('chatModel') ||
+          (data.chatModelProviders &&
+            data.chatModelProviders[chatModelProvider]?.[0]) ||
+          '';
+        const embeddingModelProvider =
+          localStorage.getItem('embeddingModelProvider') ||
+          defaultEmbeddingModelProvider ||
+          '';
+        const embeddingModel =
+          localStorage.getItem('embeddingModel') ||
+          (data.embeddingModelProviders &&
+            data.embeddingModelProviders[embeddingModelProvider]?.[0]) ||
+          '';
+
+        setSelectedChatModelProvider(chatModelProvider);
+        setSelectedChatModel(chatModel);
+        setSelectedEmbeddingModelProvider(embeddingModelProvider);
+        setSelectedEmbeddingModel(embeddingModel);
+        setCustomOpenAIApiKey(localStorage.getItem('openAIApiKey') || '');
+        setCustomOpenAIBaseURL(localStorage.getItem('openAIBaseUrl') || '');
         setIsLoading(false);
       };
 
@@ -61,17 +98,6 @@ const SettingsDialog = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
-  useEffect(() => {
-    setSelectedChatModelProvider(localStorage.getItem('chatModelProvider'));
-    setSelectedChatModel(localStorage.getItem('chatModel'));
-    setSelectedEmbeddingModelProvider(
-      localStorage.getItem('embeddingModelProvider'),
-    );
-    setSelectedEmbeddingModel(localStorage.getItem('embeddingModel'));
-    setCustomOpenAIApiKey(localStorage.getItem('openAIApiKey'));
-    setCustomOpenAIBaseURL(localStorage.getItem('openAIBaseUrl'));
-  }, []);
-
   const handleSubmit = async () => {
     setIsUpdating(true);
 
@@ -226,7 +252,7 @@ const SettingsDialog = ({
                           </div>
                           <div className="flex flex-col space-y-1">
                             <p className="text-white/70 text-sm">
-                              Custom OpenAI API Key (optional)
+                              Custom OpenAI API Key
                             </p>
                             <input
                               type="text"

ui/package.json

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