Merge branch 'ItzCrazyKns:master' into master

feat(search): add optional systemInstructions to API request body

docs/API/SEARCH.md

@@ -33,6 +33,7 @@ The API accepts a JSON object in the request body, where you define the focus mo
     ["human", "Hi, how are you?"],
     ["assistant", "I am doing well, how can I help you today?"]
   ],
+  "systemInstructions": "Focus on providing technical details about Perplexica's architecture.",
   "stream": false
 }
 ```
@@ -63,6 +64,8 @@ The API accepts a JSON object in the request body, where you define the focus mo
 
 - **`query`** (string, required): The search query or question.
 
+- **`systemInstructions`** (string, optional): Custom instructions provided by the user to guide the AI's response. These instructions are treated as user preferences and have lower priority than the system's core instructions. For example, you can specify a particular writing style, format, or focus area.
+
 - **`history`** (array, optional): An array of message pairs representing the conversation history. Each pair consists of a role (either 'human' or 'assistant') and the message content. This allows the system to use the context of the conversation to refine results. Example:
 
   ```json

package.json

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

sample.config.toml

@@ -22,5 +22,12 @@ MODEL_NAME = ""
 [MODELS.OLLAMA]
 API_URL = "" # Ollama API URL - http://host.docker.internal:11434
 
+[MODELS.DEEPSEEK]
+API_KEY = ""
+
 [API_ENDPOINTS]
 SEARXNG = "" # SearxNG API URL - http://localhost:32768
+TAVILY = "" # Tavily API key
+
+[SEARCH]
+ENGINE = "searxng" # "searxng" or "tavily"

src/app/api/config/route.ts

@@ -7,6 +7,9 @@ import {
   getGroqApiKey,
   getOllamaApiEndpoint,
   getOpenaiApiKey,
+  getDeepseekApiKey,
+  getSearchEngine,
+  getTavilyApiKey,
   updateConfig,
 } from '@/lib/config';
 import {
@@ -53,9 +56,12 @@ export const GET = async (req: Request) => {
     config['anthropicApiKey'] = getAnthropicApiKey();
     config['groqApiKey'] = getGroqApiKey();
     config['geminiApiKey'] = getGeminiApiKey();
+    config['deepseekApiKey'] = getDeepseekApiKey();
     config['customOpenaiApiUrl'] = getCustomOpenaiApiUrl();
     config['customOpenaiApiKey'] = getCustomOpenaiApiKey();
     config['customOpenaiModelName'] = getCustomOpenaiModelName();
+    config['searchEngine'] = getSearchEngine();
+    config['tavilyApiKey'] = getTavilyApiKey();
 
     return Response.json({ ...config }, { status: 200 });
   } catch (err) {
@@ -88,12 +94,21 @@ export const POST = async (req: Request) => {
         OLLAMA: {
           API_URL: config.ollamaApiUrl,
         },
+        DEEPSEEK: {
+          API_KEY: config.deepseekApiKey,
+        },
         CUSTOM_OPENAI: {
           API_URL: config.customOpenaiApiUrl,
           API_KEY: config.customOpenaiApiKey,
           MODEL_NAME: config.customOpenaiModelName,
         },
       },
+      SEARCH: {
+        ENGINE: config.searchEngine,
+      },
+      API_ENDPOINTS: {
+        TAVILY: config.tavilyApiKey || '',
+      },
     };
 
     updateConfig(updatedConfig);

src/app/api/discover/route.ts

@@ -1,4 +1,4 @@
-import { searchSearxng } from '@/lib/searxng';
+import { searchSearxng } from '../../../lib/searchEngines/searxng';
 
 const articleWebsites = [
   'yahoo.com',

src/app/api/search/route.ts

@@ -34,6 +34,7 @@ interface ChatRequestBody {
   query: string;
   history: Array<[string, string]>;
   stream?: boolean;
+  systemInstructions?: string;
 }
 
 export const POST = async (req: Request) => {
@@ -125,7 +126,7 @@ export const POST = async (req: Request) => {
       embeddings,
       body.optimizationMode,
       [],
-      "",
+      body.systemInstructions || '',
     );
 
     if (!body.stream) {

src/app/settings/page.tsx

@@ -20,9 +20,12 @@ interface SettingsType {
   anthropicApiKey: string;
   geminiApiKey: string;
   ollamaApiUrl: string;
+  deepseekApiKey: string;
   customOpenaiApiKey: string;
   customOpenaiApiUrl: string;
   customOpenaiModelName: string;
+  searchEngine: string;
+  tavilyApiKey?: string;
 }
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -144,6 +147,7 @@ const Page = () => {
   const [automaticImageSearch, setAutomaticImageSearch] = useState(false);
   const [automaticVideoSearch, setAutomaticVideoSearch] = useState(false);
   const [systemInstructions, setSystemInstructions] = useState<string>('');
+  const [searchEngine, setSearchEngine] = useState<string>('searxng');
   const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
@@ -206,6 +210,7 @@ const Page = () => {
       );
 
       setSystemInstructions(localStorage.getItem('systemInstructions')!);
+      setSearchEngine(localStorage.getItem('searchEngine') || 'searxng');
 
       setIsLoading(false);
     };
@@ -365,6 +370,10 @@ const Page = () => {
         localStorage.setItem('embeddingModel', value);
       } else if (key === 'systemInstructions') {
         localStorage.setItem('systemInstructions', value);
+      } else if (key === 'searchEngine') {
+        localStorage.setItem('searchEngine', value);
+      } else if (key === 'tavilyApiKey') {
+        localStorage.setItem('tavilyApiKey', value);
       }
     } catch (err) {
       console.error('Failed to save:', err);
@@ -507,6 +516,32 @@ const Page = () => {
                     />
                   </Switch>
                 </div>
+
+                <div className="flex flex-col space-y-1 mt-2">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    Search Engine
+                  </p>
+                  <Select
+                    value={searchEngine}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      setSearchEngine(value);
+                      saveConfig('searchEngine', value);
+                    }}
+                    options={[
+                      { value: 'searxng', label: 'SearxNG' },
+                      ...(config.tavilyApiKey ? [{ value: 'tavily', label: 'Tavily' }] : []),
+                    ]}
+                  />
+                  <p className="text-xs text-black/60 dark:text-white/60 mt-1">
+                    Select which search engine to use for web searches
+                  </p>
+                  {searchEngine === 'tavily' && !config.tavilyApiKey && (
+                    <p className="text-xs text-red-500 mt-1">
+                      Tavily API key is required to use this search engine
+                    </p>
+                  )}
+                </div>
               </div>
             </SettingsSection>
 
@@ -838,6 +873,51 @@ const Page = () => {
                     onSave={(value) => saveConfig('geminiApiKey', value)}
                   />
                 </div>
+
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    Deepseek API Key
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="Deepseek API Key"
+                    value={config.deepseekApiKey}
+                    isSaving={savingStates['deepseekApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        deepseekApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('deepseekApiKey', value)}
+                  />
+                </div>
+
+                <div className="flex flex-col space-y-1 mt-4 pt-4 border-t border-light-200 dark:border-dark-200">
+                  <p className="text-black/90 dark:text-white/90 font-medium">Search Engine API Keys</p>
+                  <p className="text-sm text-black/60 dark:text-white/60 mt-0.5">
+                    API keys for search engines used in the application
+                  </p>
+                </div>
+
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    Tavily API Key
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="Tavily API key"
+                    value={config.tavilyApiKey || ''}
+                    isSaving={savingStates['tavilyApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        tavilyApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('tavilyApiKey', value)}
+                  />
+                </div>
               </div>
             </SettingsSection>
           </div>

src/components/MessageBox.tsx

@@ -48,6 +48,7 @@ const MessageBox = ({
   const [speechMessage, setSpeechMessage] = useState(message.content);
 
   useEffect(() => {
+    const citationRegex = /\[([^\]]+)\]/g;
     const regex = /\[(\d+)\]/g;
     let processedMessage = message.content;
 
@@ -67,11 +68,33 @@ const MessageBox = ({
     ) {
       setParsedMessage(
         processedMessage.replace(
-          regex,
-          (_, number) =>
-            `<a href="${
-              message.sources?.[number - 1]?.metadata?.url
-            }" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
+          citationRegex,
+          (_, capturedContent: string) => {
+            const numbers = capturedContent
+              .split(',')
+              .map((numStr) => numStr.trim());
+
+            const linksHtml = numbers
+              .map((numStr) => {
+                const number = parseInt(numStr);
+
+                if (isNaN(number) || number <= 0) {
+                  return `[${numStr}]`;
+                }
+
+                const source = message.sources?.[number - 1];
+                const url = source?.metadata?.url;
+
+                if (url) {
+                  return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
+                } else {
+                  return `[${numStr}]`;
+                }
+              })
+              .join('');
+
+            return linksHtml;
+          },
         ),
       );
       return;

src/lib/chains/imageSearchAgent.ts

@@ -7,7 +7,7 @@ import { PromptTemplate } from '@langchain/core/prompts';
 import formatChatHistoryAsString from '../utils/formatHistory';
 import { BaseMessage } from '@langchain/core/messages';
 import { StringOutputParser } from '@langchain/core/output_parsers';
-import { searchSearxng } from '../searxng';
+import { searchSearxng } from '../searchEngines/searxng';
 import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
 
 const imageSearchChainPrompt = `

src/lib/chains/videoSearchAgent.ts

@@ -7,7 +7,7 @@ import { PromptTemplate } from '@langchain/core/prompts';
 import formatChatHistoryAsString from '../utils/formatHistory';
 import { BaseMessage } from '@langchain/core/messages';
 import { StringOutputParser } from '@langchain/core/output_parsers';
-import { searchSearxng } from '../searxng';
+import { searchSearxng } from '../searchEngines/searxng';
 import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
 
 const VideoSearchChainPrompt = `

src/lib/config.ts

@@ -25,6 +25,9 @@ interface Config {
     OLLAMA: {
       API_URL: string;
     };
+    DEEPSEEK: {
+      API_KEY: string;
+    };
     CUSTOM_OPENAI: {
       API_URL: string;
       API_KEY: string;
@@ -33,6 +36,10 @@ interface Config {
   };
   API_ENDPOINTS: {
     SEARXNG: string;
+    TAVILY: string;
+  };
+  SEARCH: {
+    ENGINE: string;
   };
 }
 
@@ -61,8 +68,16 @@ export const getGeminiApiKey = () => loadConfig().MODELS.GEMINI.API_KEY;
 export const getSearxngApiEndpoint = () =>
   process.env.SEARXNG_API_URL || loadConfig().API_ENDPOINTS.SEARXNG;
 
+export const getTavilyApiKey = () =>
+  process.env.TAVILY_API_KEY || loadConfig().API_ENDPOINTS.TAVILY;
+
+export const getSearchEngine = () =>
+  process.env.SEARCH_ENGINE || loadConfig().SEARCH?.ENGINE || 'searxng';
+
 export const getOllamaApiEndpoint = () => loadConfig().MODELS.OLLAMA.API_URL;
 
+export const getDeepseekApiKey = () => loadConfig().MODELS.DEEPSEEK.API_KEY;
+
 export const getCustomOpenaiApiKey = () =>
   loadConfig().MODELS.CUSTOM_OPENAI.API_KEY;
 

src/lib/prompts/webSearch.ts

@@ -1,6 +1,6 @@
 export const webSearchRetrieverPrompt = `
 You are an AI question rephraser. You will be given a conversation and a follow-up question,  you will have to rephrase the follow up question so it is a standalone question and can be used by another LLM to search the web for information to answer it.
-If it is a smple writing task or a greeting (unless the greeting contains a question after it) like Hi, Hello, How are you, etc. than a question then you need to return \`not_needed\` as the response (This is because the LLM won't need to search the web for finding information on this topic).
+If it is a simple writing task or a greeting (unless the greeting contains a question after it) like Hi, Hello, How are you, etc. than a question then you need to return \`not_needed\` as the response (This is because the LLM won't need to search the web for finding information on this topic).
 If the user asks some question from some URL or wants you to summarize a PDF or a webpage (via URL) you need to return the links inside the \`links\` XML block and the question inside the \`question\` XML block. If the user wants to you to summarize the webpage or the PDF you need to return \`summarize\` inside the \`question\` XML block in place of a question and the link to summarize in the \`links\` XML block.
 You must always return the rephrased question inside the \`question\` XML block, if there are no links in the follow-up question then don't insert a \`links\` XML block in your response.
 

src/lib/providers/deepseek.ts

@@ -0,0 +1,44 @@
+import { ChatOpenAI } from '@langchain/openai';
+import { getDeepseekApiKey } from '../config';
+import { ChatModel } from '.';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+
+const deepseekChatModels: Record<string, string>[] = [
+  {
+    displayName: 'Deepseek Chat (Deepseek V3)',
+    key: 'deepseek-chat',
+  },
+  {
+    displayName: 'Deepseek Reasoner (Deepseek R1)',
+    key: 'deepseek-reasoner',
+  },
+];
+
+export const loadDeepseekChatModels = async () => {
+  const deepseekApiKey = getDeepseekApiKey();
+
+  if (!deepseekApiKey) return {};
+
+  try {
+    const chatModels: Record<string, ChatModel> = {};
+
+    deepseekChatModels.forEach((model) => {
+      chatModels[model.key] = {
+        displayName: model.displayName,
+        model: new ChatOpenAI({
+          openAIApiKey: deepseekApiKey,
+          modelName: model.key,
+          temperature: 0.7,
+          configuration: {
+            baseURL: 'https://api.deepseek.com',
+          },
+        }) as unknown as BaseChatModel,
+      };
+    });
+
+    return chatModels;
+  } catch (err) {
+    console.error(`Error loading Deepseek models: ${err}`);
+    return {};
+  }
+};

src/lib/providers/gemini.ts

@@ -40,8 +40,12 @@ const geminiChatModels: Record<string, string>[] = [
 
 const geminiEmbeddingModels: Record<string, string>[] = [
   {
-    displayName: 'Gemini Embedding',
-    key: 'gemini-embedding-exp',
+    displayName: 'Text Embedding 004',
+    key: 'models/text-embedding-004',
+  },
+  {
+    displayName: 'Embedding 001',
+    key: 'models/embedding-001',
   },
 ];
 

src/lib/providers/groq.ts

@@ -72,6 +72,14 @@ const groqChatModels: Record<string, string>[] = [
     displayName: 'Llama 3.2 90B Vision Preview (Preview)',
     key: 'llama-3.2-90b-vision-preview',
   },
+  /* {
+    displayName: 'Llama 4 Maverick 17B 128E Instruct (Preview)',
+    key: 'meta-llama/llama-4-maverick-17b-128e-instruct',
+  }, */
+  {
+    displayName: 'Llama 4 Scout 17B 16E Instruct (Preview)',
+    key: 'meta-llama/llama-4-scout-17b-16e-instruct',
+  },
 ];
 
 export const loadGroqChatModels = async () => {

src/lib/providers/index.ts

@@ -12,6 +12,7 @@ import { loadGroqChatModels } from './groq';
 import { loadAnthropicChatModels } from './anthropic';
 import { loadGeminiChatModels, loadGeminiEmbeddingModels } from './gemini';
 import { loadTransformersEmbeddingsModels } from './transformers';
+import { loadDeepseekChatModels } from './deepseek';
 
 export interface ChatModel {
   displayName: string;
@@ -32,6 +33,7 @@ export const chatModelProviders: Record<
   groq: loadGroqChatModels,
   anthropic: loadAnthropicChatModels,
   gemini: loadGeminiChatModels,
+  deepseek: loadDeepseekChatModels,
 };
 
 export const embeddingModelProviders: Record<

src/lib/search/metaSearchAgent.ts

@@ -17,7 +17,9 @@ import LineListOutputParser from '../outputParsers/listLineOutputParser';
 import LineOutputParser from '../outputParsers/lineOutputParser';
 import { getDocumentsFromLinks } from '../utils/documents';
 import { Document } from 'langchain/document';
-import { searchSearxng } from '../searxng';
+import { searchTavily } from '../searchEngines/tavily';
+import { searchSearxng } from '../searchEngines/searxng';
+import { getSearchEngine } from '../config';
 import path from 'node:path';
 import fs from 'node:fs';
 import computeSimilarity from '../utils/computeSimilarity';
@@ -205,25 +207,42 @@ class MetaSearchAgent implements MetaSearchAgentType {
         } else {
           question = question.replace(/<think>.*?<\/think>/g, '');
 
-          const res = await searchSearxng(question, {
+          const searchEngine = getSearchEngine();
+
+          let res;
+          
+          if (searchEngine === 'tavily') {
+            res = await searchTavily(question, {
+              search_depth: 'basic',
+              max_results: 15,
+              include_images: true,
+            });
+          } else {
+            // Default to SearxNG
+            res = await searchSearxng(question, {
               language: 'en',
               engines: this.config.activeEngines,
             });
+          }
 
-          const documents = res.results.map(
+          let documents: Document[] = [];
+          
+          documents = documents.concat(
+            res.results.map(
               (result) =>
                 new Document({
                   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,
-                  ...(result.img_src && { img_src: result.img_src }),
+                    ...(result.img_src ? { img_src: result.img_src } : {}),
                   },
                 }),
+            )
           );
 
           return { query: question, docs: documents };

src/lib/searchEngines/searxng.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { getSearxngApiEndpoint } from './config';
+import { getSearxngApiEndpoint } from '../config';
 
 interface SearxngSearchOptions {
   categories?: string[];

src/lib/searchEngines/tavily.ts

@@ -0,0 +1,79 @@
+import axios from 'axios';
+import { getTavilyApiKey } from '../config';
+
+interface TavilySearchOptions {
+  topic?: 'general' | 'news';
+  search_depth?: 'basic' | 'advanced';
+  chunks_per_source?: number;
+  max_results?: number;
+  time_range?: 'day' | 'week' | 'month' | 'year' | 'd' | 'w' | 'm' | 'y';
+  days?: number;
+  include_answer?: boolean | 'basic' | 'advanced';
+  include_raw_content?: boolean;
+  include_images?: boolean;
+  include_image_descriptions?: boolean;
+  include_domains?: string[];
+  exclude_domains?: string[];
+}
+
+interface TavilySearchResult {
+  title: string;
+  url: string;
+  content: string;
+  score: number;
+  raw_content?: string;
+}
+
+interface TavilySearchResponse {
+  query: string;
+  answer?: string;
+  images?: Array<{
+    url: string;
+    description?: string;
+  }>;
+  results: TavilySearchResult[];
+  response_time: string;
+}
+
+export const searchTavily = async (
+  query: string,
+  opts?: TavilySearchOptions,
+) => {
+  const tavilyApiKey = getTavilyApiKey();
+  
+  if (!tavilyApiKey) {
+    throw new Error('Tavily API key is not configured');
+  }
+
+  const url = 'https://api.tavily.com/search';
+  
+  const response = await axios.post<TavilySearchResponse>(
+    url,
+    {
+      query,
+      ...opts,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${tavilyApiKey}`,
+      },
+    }
+  );
+
+  const results = response.data.results;
+  
+  // Convert Tavily results to match the format expected by the rest of the application
+  const formattedResults = results.map(result => ({
+    title: result.title,
+    url: result.url,
+    content: result.content,
+    img_src: undefined, // Tavily doesn't provide image URLs in the standard response
+  }));
+
+  return { 
+    results: formattedResults, 
+    suggestions: [], // Tavily doesn't provide suggestions, so return empty array
+    answer: response.data.answer, // Include the AI-generated answer if available
+  };
+};