feat(package): bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-backend",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {
@@ -29,7 +29,6 @@
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "langchain": "^0.1.30",
-    "react-text-to-speech": "^0.14.5",
     "winston": "^3.13.0",
     "ws": "^8.16.0",
     "zod": "^3.22.4"

src/lib/providers.ts

@@ -8,7 +8,7 @@ import {
 } from '../config';
 import logger from '../utils/logger';
 
-export const getAvailableProviders = async () => {
+export const getAvailableChatModelProviders = async () => {
   const openAIApiKey = getOpenaiApiKey();
   const groqApiKey = getGroqApiKey();
   const ollamaEndpoint = getOllamaApiEndpoint();
@@ -33,10 +33,6 @@ export const getAvailableProviders = async () => {
           modelName: 'gpt-4-turbo',
           temperature: 0.7,
         }),
-        embeddings: new OpenAIEmbeddings({
-          openAIApiKey,
-          modelName: 'text-embedding-3-large',
-        }),
       };
     } catch (err) {
       logger.error(`Error loading OpenAI models: ${err}`);
@@ -86,10 +82,6 @@ export const getAvailableProviders = async () => {
             baseURL: 'https://api.groq.com/openai/v1',
           },
         ),
-        embeddings: new OpenAIEmbeddings({
-          openAIApiKey: openAIApiKey,
-          modelName: 'text-embedding-3-large',
-        }),
       };
     } catch (err) {
       logger.error(`Error loading Groq models: ${err}`);
@@ -98,7 +90,11 @@ export const getAvailableProviders = 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;
 
@@ -110,17 +106,60 @@ export const getAvailableProviders = async () => {
         });
         return acc;
       }, {});
-
-      if (Object.keys(models['ollama']).length > 0) {
-        models['ollama']['embeddings'] = new OllamaEmbeddings({
-          baseUrl: ollamaEndpoint,
-          model: models['ollama'][Object.keys(models['ollama'])[0]].model,
-        });
-      }
     } catch (err) {
       logger.error(`Error loading Ollama models: ${err}`);
     }
   }
 
+  models['custom_openai'] = {};
+
+  return models;
+};
+
+export const getAvailableEmbeddingModelProviders = async () => {
+  const openAIApiKey = getOpenaiApiKey();
+  const ollamaEndpoint = getOllamaApiEndpoint();
+
+  const models = {};
+
+  if (openAIApiKey) {
+    try {
+      models['openai'] = {
+        'Text embedding 3 small': new OpenAIEmbeddings({
+          openAIApiKey,
+          modelName: 'text-embedding-3-small',
+        }),
+        'Text embedding 3 large': new OpenAIEmbeddings({
+          openAIApiKey,
+          modelName: 'text-embedding-3-large',
+        }),
+      };
+    } catch (err) {
+      logger.error(`Error loading OpenAI embeddings: ${err}`);
+    }
+  }
+
+  if (ollamaEndpoint) {
+    try {
+      const response = await fetch(`${ollamaEndpoint}/api/tags`, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      const { models: ollamaModels } = (await response.json()) as any;
+
+      models['ollama'] = ollamaModels.reduce((acc, model) => {
+        acc[model.model] = new OllamaEmbeddings({
+          baseUrl: ollamaEndpoint,
+          model: model.model,
+        });
+        return acc;
+      }, {});
+    } catch (err) {
+      logger.error(`Error loading Ollama embeddings: ${err}`);
+    }
+  }
+
   return models;
 };

src/routes/config.ts

@@ -1,5 +1,8 @@
 import express from 'express';
-import { getAvailableProviders } from '../lib/providers';
+import {
+  getAvailableChatModelProviders,
+  getAvailableEmbeddingModelProviders,
+} from '../lib/providers';
 import {
   getGroqApiKey,
   getOllamaApiEndpoint,
@@ -12,16 +15,24 @@ const router = express.Router();
 router.get('/', async (_, res) => {
   const config = {};
 
-  const providers = await getAvailableProviders();
+  const [chatModelProviders, embeddingModelProviders] = await Promise.all([
+    getAvailableChatModelProviders(),
+    getAvailableEmbeddingModelProviders(),
+  ]);
 
-  for (const provider in providers) {
-    delete providers[provider]['embeddings'];
+  config['chatModelProviders'] = {};
+  config['embeddingModelProviders'] = {};
+
+  for (const provider in chatModelProviders) {
+    config['chatModelProviders'][provider] = Object.keys(
+      chatModelProviders[provider],
+    );
   }
 
-  config['providers'] = {};
-
-  for (const provider in providers) {
-    config['providers'][provider] = Object.keys(providers[provider]);
+  for (const provider in embeddingModelProviders) {
+    config['embeddingModelProviders'][provider] = Object.keys(
+      embeddingModelProviders[provider],
+    );
   }
 
   config['openaiApiKey'] = getOpenaiApiKey();

src/routes/images.ts

@@ -1,7 +1,7 @@
 import express from 'express';
 import handleImageSearch from '../agents/imageSearchAgent';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { getAvailableProviders } from '../lib/providers';
+import { getAvailableChatModelProviders } from '../lib/providers';
 import { HumanMessage, AIMessage } from '@langchain/core/messages';
 import logger from '../utils/logger';
 
@@ -19,7 +19,7 @@ router.post('/', async (req, res) => {
       }
     });
 
-    const chatModels = await getAvailableProviders();
+    const chatModels = await getAvailableChatModelProviders();
     const provider = chat_model_provider || Object.keys(chatModels)[0];
     const chatModel = chat_model || Object.keys(chatModels[provider])[0];
 

src/routes/models.ts

@@ -1,14 +1,20 @@
 import express from 'express';
 import logger from '../utils/logger';
-import { getAvailableProviders } from '../lib/providers';
+import {
+  getAvailableChatModelProviders,
+  getAvailableEmbeddingModelProviders,
+} from '../lib/providers';
 
 const router = express.Router();
 
 router.get('/', async (req, res) => {
   try {
-    const providers = await getAvailableProviders();
+    const [chatModelProviders, embeddingModelProviders] = await Promise.all([
+      getAvailableChatModelProviders(),
+      getAvailableEmbeddingModelProviders(),
+    ]);
 
-    res.status(200).json({ providers });
+    res.status(200).json({ chatModelProviders, embeddingModelProviders });
   } catch (err) {
     res.status(500).json({ message: 'An error has occurred.' });
     logger.error(err.message);

src/routes/videos.ts

@@ -1,6 +1,6 @@
 import express from 'express';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { getAvailableProviders } from '../lib/providers';
+import { getAvailableChatModelProviders } from '../lib/providers';
 import { HumanMessage, AIMessage } from '@langchain/core/messages';
 import logger from '../utils/logger';
 import handleVideoSearch from '../agents/videoSearchAgent';
@@ -19,7 +19,7 @@ router.post('/', async (req, res) => {
       }
     });
 
-    const chatModels = await getAvailableProviders();
+    const chatModels = await getAvailableChatModelProviders();
     const provider = chat_model_provider || Object.keys(chatModels)[0];
     const chatModel = chat_model || Object.keys(chatModels[provider])[0];
 

src/websocket/connectionManager.ts

@@ -1,10 +1,14 @@
 import { WebSocket } from 'ws';
 import { handleMessage } from './messageHandler';
-import { getAvailableProviders } from '../lib/providers';
+import {
+  getAvailableEmbeddingModelProviders,
+  getAvailableChatModelProviders,
+} from '../lib/providers';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import type { Embeddings } from '@langchain/core/embeddings';
 import type { IncomingMessage } from 'http';
 import logger from '../utils/logger';
+import { ChatOpenAI } from '@langchain/openai';
 
 export const handleConnection = async (
   ws: WebSocket,
@@ -13,25 +17,61 @@ export const handleConnection = async (
   const searchParams = new URL(request.url, `http://${request.headers.host}`)
     .searchParams;
 
-  const models = await getAvailableProviders();
-  const provider =
-    searchParams.get('chatModelProvider') || Object.keys(models)[0];
+  const [chatModelProviders, embeddingModelProviders] = await Promise.all([
+    getAvailableChatModelProviders(),
+    getAvailableEmbeddingModelProviders(),
+  ]);
+
+  const chatModelProvider =
+    searchParams.get('chatModelProvider') || Object.keys(chatModelProviders)[0];
   const chatModel =
-    searchParams.get('chatModel') || Object.keys(models[provider])[0];
+    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];
 
   let llm: BaseChatModel | undefined;
   let embeddings: Embeddings | undefined;
 
-  if (models[provider] && models[provider][chatModel]) {
-    llm = models[provider][chatModel] as BaseChatModel | undefined;
-    embeddings = models[provider].embeddings as 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 (
+    embeddingModelProviders[embeddingModelProvider] &&
+    embeddingModelProviders[embeddingModelProvider][embeddingModel]
+  ) {
+    embeddings = embeddingModelProviders[embeddingModelProvider][
+      embeddingModel
+    ] as Embeddings | undefined;
   }
 
   if (!llm || !embeddings) {
     ws.send(
       JSON.stringify({
         type: 'error',
-        data: 'Invalid LLM or embeddings model selected',
+        data: 'Invalid LLM or embeddings model selected, please refresh the page and try again.',
+        key: 'INVALID_MODEL_SELECTED',
       }),
     );
     ws.close();

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/app/layout.tsx

@@ -3,6 +3,7 @@ import { Montserrat } from 'next/font/google';
 import './globals.css';
 import { cn } from '@/lib/utils';
 import Sidebar from '@/components/Sidebar';
+import { Toaster } from 'sonner';
 
 const montserrat = Montserrat({
   weight: ['300', '400', '500', '700'],
@@ -26,6 +27,15 @@ export default function RootLayout({
     <html className="h-full" lang="en">
       <body className={cn('h-full', montserrat.className)}>
         <Sidebar>{children}</Sidebar>
+        <Toaster
+          toastOptions={{
+            unstyled: true,
+            classNames: {
+              toast:
+                'bg-[#111111] text-white rounded-lg p-4 flex flex-row items-center space-x-2',
+            },
+          }}
+        />
       </body>
     </html>
   );

ui/components/ChatWindow.tsx

@@ -5,6 +5,7 @@ import { Document } from '@langchain/core/documents';
 import Navbar from './Navbar';
 import Chat from './Chat';
 import EmptyChat from './EmptyChat';
+import { toast } from 'sonner';
 
 export type Message = {
   id: string;
@@ -22,11 +23,28 @@ const useSocket = (url: string) => {
       const connectWs = async () => {
         let chatModel = localStorage.getItem('chatModel');
         let chatModelProvider = localStorage.getItem('chatModelProvider');
+        let embeddingModel = localStorage.getItem('embeddingModel');
+        let embeddingModelProvider = localStorage.getItem(
+          'embeddingModelProvider',
+        );
 
-        if (!chatModel || !chatModelProvider) {
-          const chatModelProviders = await fetch(
+        if (
+          !chatModel ||
+          !chatModelProvider ||
+          !embeddingModel ||
+          !embeddingModelProvider
+        ) {
+          const providers = await fetch(
             `${process.env.NEXT_PUBLIC_API_URL}/models`,
-          ).then(async (res) => (await res.json())['providers']);
+            {
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            },
+          ).then(async (res) => await res.json());
+
+          const chatModelProviders = providers.chatModelProviders;
+          const embeddingModelProviders = providers.embeddingModelProviders;
 
           if (
             !chatModelProviders ||
@@ -34,27 +52,73 @@ const useSocket = (url: string) => {
           )
             return console.error('No chat models available');
 
+          if (
+            !embeddingModelProviders ||
+            Object.keys(embeddingModelProviders).length === 0
+          )
+            return console.error('No embedding models available');
+
           chatModelProvider = Object.keys(chatModelProviders)[0];
           chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
 
+          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,
+          );
         }
 
-        const ws = new WebSocket(
-          `${url}?chatModel=${chatModel}&chatModelProvider=${chatModelProvider}`,
-        );
+        const wsURL = new URL(url);
+        const searchParams = new URLSearchParams({});
+
+        searchParams.append('chatModel', chatModel!);
+        searchParams.append('chatModelProvider', chatModelProvider);
+
+        if (chatModelProvider === 'custom_openai') {
+          searchParams.append(
+            'openAIApiKey',
+            localStorage.getItem('openAIApiKey')!,
+          );
+          searchParams.append(
+            'openAIBaseURL',
+            localStorage.getItem('openAIBaseURL')!,
+          );
+        }
+
+        searchParams.append('embeddingModel', embeddingModel!);
+        searchParams.append('embeddingModelProvider', embeddingModelProvider);
+
+        wsURL.search = searchParams.toString();
+
+        const ws = new WebSocket(wsURL.toString());
+
         ws.onopen = () => {
           console.log('[DEBUG] open');
           setWs(ws);
         };
+
+        ws.onmessage = (e) => {
+          const parsedData = JSON.parse(e.data);
+          if (parsedData.type === 'error') {
+            toast.error(parsedData.data);
+            if (parsedData.key === 'INVALID_MODEL_SELECTED') {
+              localStorage.clear();
+            }
+          }
+        };
       };
 
       connectWs();
     }
 
     return () => {
-      1;
       ws?.close();
       console.log('[DEBUG] closed');
     };
@@ -102,6 +166,12 @@ const ChatWindow = () => {
     const messageHandler = (e: MessageEvent) => {
       const data = JSON.parse(e.data);
 
+      if (data.type === 'error') {
+        toast.error(data.data);
+        setLoading(false);
+        return;
+      }
+
       if (data.type === 'sources') {
         sources = data.data;
         if (!added) {

ui/components/MessageBox.tsx

@@ -34,15 +34,13 @@ const MessageBox = ({
   const [speechMessage, setSpeechMessage] = useState(message.content);
 
   useEffect(() => {
+    const regex = /\[(\d+)\]/g;
+
     if (
       message.role === 'assistant' &&
       message?.sources &&
       message.sources.length > 0
     ) {
-      const regex = /\[(\d+)\]/g;
-
-      setSpeechMessage(message.content.replace(regex, ''));
-
       return setParsedMessage(
         message.content.replace(
           regex,
@@ -51,6 +49,8 @@ const MessageBox = ({
         ),
       );
     }
+
+    setSpeechMessage(message.content.replace(regex, ''));
     setParsedMessage(message.content);
   }, [message.content, message.sources, message.role]);
 
@@ -95,7 +95,7 @@ const MessageBox = ({
               <Markdown className="prose max-w-none break-words prose-invert prose-p:leading-relaxed prose-pre:p-0 text-white text-sm md:text-base font-medium">
                 {parsedMessage}
               </Markdown>
-              {!loading && (
+              {loading && isLast ? null : (
                 <div className="flex flex-row items-center justify-between w-full text-white py-4 -mx-2">
                   <div className="flex flex-row items-center space-x-1">
                     <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">

ui/components/SettingsDialog.tsx

@@ -3,7 +3,10 @@ import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
 import React, { Fragment, useEffect, useState } from 'react';
 
 interface SettingsType {
-  providers: {
+  chatModelProviders: {
+    [key: string]: string[];
+  };
+  embeddingModelProviders: {
     [key: string]: string[];
   };
   openaiApiKey: string;
@@ -25,6 +28,17 @@ const SettingsDialog = ({
   const [selectedChatModel, setSelectedChatModel] = useState<string | null>(
     null,
   );
+  const [selectedEmbeddingModelProvider, setSelectedEmbeddingModelProvider] =
+    useState<string | null>(null);
+  const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState<
+    string | null
+  >(null);
+  const [customOpenAIApiKey, setCustomOpenAIApiKey] = useState<string | null>(
+    null,
+  );
+  const [customOpenAIBaseURL, setCustomOpenAIBaseURL] = useState<string | null>(
+    null,
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
 
@@ -32,7 +46,11 @@ const SettingsDialog = ({
     if (isOpen) {
       const fetchConfig = async () => {
         setIsLoading(true);
-        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`);
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
         const data = await res.json();
         setConfig(data);
         setIsLoading(false);
@@ -46,6 +64,12 @@ const SettingsDialog = ({
   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 () => {
@@ -62,6 +86,13 @@ const SettingsDialog = ({
 
       localStorage.setItem('chatModelProvider', selectedChatModelProvider!);
       localStorage.setItem('chatModel', selectedChatModel!);
+      localStorage.setItem(
+        'embeddingModelProvider',
+        selectedEmbeddingModelProvider!,
+      );
+      localStorage.setItem('embeddingModel', selectedEmbeddingModel!);
+      localStorage.setItem('openAIApiKey', customOpenAIApiKey!);
+      localStorage.setItem('openAIBaseURL', customOpenAIBaseURL!);
     } catch (err) {
       console.log(err);
     } finally {
@@ -107,7 +138,7 @@ const SettingsDialog = ({
                 </Dialog.Title>
                 {config && !isLoading && (
                   <div className="flex flex-col space-y-4 mt-6">
-                    {config.providers && (
+                    {config.chatModelProviders && (
                       <div className="flex flex-col space-y-1">
                         <p className="text-white/70 text-sm">
                           Chat model Provider
@@ -116,36 +147,47 @@ const SettingsDialog = ({
                           onChange={(e) => {
                             setSelectedChatModelProvider(e.target.value);
                             setSelectedChatModel(
-                              config.providers[e.target.value][0],
+                              config.chatModelProviders[e.target.value][0],
                             );
                           }}
                           className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                         >
-                          {Object.keys(config.providers).map((provider) => (
-                            <option
-                              key={provider}
-                              value={provider}
-                              selected={provider === selectedChatModelProvider}
-                            >
-                              {provider.charAt(0).toUpperCase() +
-                                provider.slice(1)}
-                            </option>
-                          ))}
+                          {Object.keys(config.chatModelProviders).map(
+                            (provider) => (
+                              <option
+                                key={provider}
+                                value={provider}
+                                selected={
+                                  provider === selectedChatModelProvider
+                                }
+                              >
+                                {provider.charAt(0).toUpperCase() +
+                                  provider.slice(1)}
+                              </option>
+                            ),
+                          )}
                         </select>
                       </div>
                     )}
-                    {selectedChatModelProvider && (
-                      <div className="flex flex-col space-y-1">
-                        <p className="text-white/70 text-sm">Chat Model</p>
-                        <select
-                          onChange={(e) => setSelectedChatModel(e.target.value)}
-                          className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
-                        >
-                          {config.providers[selectedChatModelProvider] ? (
-                            config.providers[selectedChatModelProvider].length >
-                            0 ? (
-                              config.providers[selectedChatModelProvider].map(
-                                (model) => (
+                    {selectedChatModelProvider &&
+                      selectedChatModelProvider != 'custom_openai' && (
+                        <div className="flex flex-col space-y-1">
+                          <p className="text-white/70 text-sm">Chat Model</p>
+                          <select
+                            onChange={(e) =>
+                              setSelectedChatModel(e.target.value)
+                            }
+                            className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                          >
+                            {config.chatModelProviders[
+                              selectedChatModelProvider
+                            ] ? (
+                              config.chatModelProviders[
+                                selectedChatModelProvider
+                              ].length > 0 ? (
+                                config.chatModelProviders[
+                                  selectedChatModelProvider
+                                ].map((model) => (
                                   <option
                                     key={model}
                                     value={model}
@@ -153,11 +195,126 @@ const SettingsDialog = ({
                                   >
                                     {model}
                                   </option>
-                                ),
+                                ))
+                              ) : (
+                                <option value="" disabled selected>
+                                  No models available
+                                </option>
                               )
                             ) : (
                               <option value="" disabled selected>
-                                No models available
+                                Invalid provider, please check backend logs
+                              </option>
+                            )}
+                          </select>
+                        </div>
+                      )}
+                    {selectedChatModelProvider &&
+                      selectedChatModelProvider === 'custom_openai' && (
+                        <>
+                          <div className="flex flex-col space-y-1">
+                            <p className="text-white/70 text-sm">Model name</p>
+                            <input
+                              type="text"
+                              placeholder="Model name"
+                              defaultValue={selectedChatModel!}
+                              onChange={(e) =>
+                                setSelectedChatModel(e.target.value)
+                              }
+                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                            />
+                          </div>
+                          <div className="flex flex-col space-y-1">
+                            <p className="text-white/70 text-sm">
+                              Custom OpenAI API Key (optional)
+                            </p>
+                            <input
+                              type="text"
+                              placeholder="Custom OpenAI API Key"
+                              defaultValue={customOpenAIApiKey!}
+                              onChange={(e) =>
+                                setCustomOpenAIApiKey(e.target.value)
+                              }
+                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                            />
+                          </div>
+                          <div className="flex flex-col space-y-1">
+                            <p className="text-white/70 text-sm">
+                              Custom OpenAI Base URL
+                            </p>
+                            <input
+                              type="text"
+                              placeholder="Custom OpenAI Base URL"
+                              defaultValue={customOpenAIBaseURL!}
+                              onChange={(e) =>
+                                setCustomOpenAIBaseURL(e.target.value)
+                              }
+                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                            />
+                          </div>
+                        </>
+                      )}
+                    {/* Embedding models */}
+                    {config.embeddingModelProviders && (
+                      <div className="flex flex-col space-y-1">
+                        <p className="text-white/70 text-sm">
+                          Embedding model Provider
+                        </p>
+                        <select
+                          onChange={(e) => {
+                            setSelectedEmbeddingModelProvider(e.target.value);
+                            setSelectedEmbeddingModel(
+                              config.embeddingModelProviders[e.target.value][0],
+                            );
+                          }}
+                          className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                        >
+                          {Object.keys(config.embeddingModelProviders).map(
+                            (provider) => (
+                              <option
+                                key={provider}
+                                value={provider}
+                                selected={
+                                  provider === selectedEmbeddingModelProvider
+                                }
+                              >
+                                {provider.charAt(0).toUpperCase() +
+                                  provider.slice(1)}
+                              </option>
+                            ),
+                          )}
+                        </select>
+                      </div>
+                    )}
+                    {selectedEmbeddingModelProvider && (
+                      <div className="flex flex-col space-y-1">
+                        <p className="text-white/70 text-sm">Embedding Model</p>
+                        <select
+                          onChange={(e) =>
+                            setSelectedEmbeddingModel(e.target.value)
+                          }
+                          className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                        >
+                          {config.embeddingModelProviders[
+                            selectedEmbeddingModelProvider
+                          ] ? (
+                            config.embeddingModelProviders[
+                              selectedEmbeddingModelProvider
+                            ].length > 0 ? (
+                              config.embeddingModelProviders[
+                                selectedEmbeddingModelProvider
+                              ].map((model) => (
+                                <option
+                                  key={model}
+                                  value={model}
+                                  selected={model === selectedEmbeddingModel}
+                                >
+                                  {model}
+                                </option>
+                              ))
+                            ) : (
+                              <option value="" disabled selected>
+                                No embedding models available
                               </option>
                             )
                           ) : (

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {
@@ -22,8 +22,9 @@
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "react-speech-kit": "^3.0.1",
+    "react-text-to-speech": "^0.14.5",
     "react-textarea-autosize": "^8.5.3",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
     "yet-another-react-lightbox": "^3.17.2",
     "zod": "^3.22.4"

ui/yarn.lock

@@ -2632,10 +2632,10 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-speech-kit@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/react-speech-kit/-/react-speech-kit-3.0.1.tgz#8bd936adfe064be1c5a07e2992dfdfd772e80d14"
-  integrity sha512-MXNOciISanhmnxpHJkBOev3M3NPDpW1T7nTc/eGw5pO9cXpoUccRxZkmr/IlpTPbPEneDNeTmbwri/YweyctZg==
+react-text-to-speech@^0.14.5:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/react-text-to-speech/-/react-text-to-speech-0.14.5.tgz#f918786ab283311535682011045bd49777193300"
+  integrity sha512-3brr/IrK/5YTtOZSTo+Y8b+dnWelzfZiDZvkXnOct1e7O7fgA/h9bYAVrtwSRo/VxKfdw+wh6glkj6M0mlQuQQ==
 
 react-textarea-autosize@^8.5.3:
   version "8.5.3"
@@ -2839,6 +2839,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+sonner@^1.4.41:
+  version "1.4.41"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.4.41.tgz#ff085ae4f4244713daf294959beaa3e90f842d2c"
+  integrity sha512-uG511ggnnsw6gcn/X+YKkWPo5ep9il9wYi3QJxHsYe7yTZ4+cOd1wuodOUmOpFuXL+/RE3R04LczdNCDygTDgQ==
+
 source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"

yarn.lock

@@ -1291,11 +1291,6 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-text-to-speech@^0.14.5:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/react-text-to-speech/-/react-text-to-speech-0.14.5.tgz#f918786ab283311535682011045bd49777193300"
-  integrity sha512-3brr/IrK/5YTtOZSTo+Y8b+dnWelzfZiDZvkXnOct1e7O7fgA/h9bYAVrtwSRo/VxKfdw+wh6glkj6M0mlQuQQ==
-
 readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"