Merge 7288c97326 into a8d410bc2f

Feat/system instructions

.github/workflows/docker-build.yaml

@@ -114,6 +114,11 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Extract version from release tag
+        if: github.event_name == 'release'
+        id: version
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
+
       - name: Create and push multi-arch manifest for main
         if: github.ref == 'refs/heads/master' && github.event_name == 'push'
         run: |

README.md

@@ -89,6 +89,7 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
    - `OPENAI`: Your OpenAI API key. **You only need to fill this if you wish to use OpenAI's models**.
    - `OLLAMA`: Your Ollama API URL. You should enter it as `http://host.docker.internal:PORT_NUMBER`. If you installed Ollama on port 11434, use `http://host.docker.internal:11434`. For other ports, adjust accordingly. **You need to fill this if you wish to use Ollama's models instead of OpenAI's**.
    - `GROQ`: Your Groq API key. **You only need to fill this if you wish to use Groq's hosted models**.
+   - `OPENROUTER`: Your OpenRouter API key. **You only need to fill this if you wish to use models via OpenRouter**.
    - `ANTHROPIC`: Your Anthropic API key. **You only need to fill this if you wish to use Anthropic models**.
 
      **Note**: You can change these after starting Perplexica from the settings dialog.

sample.config.toml

@@ -11,6 +11,9 @@ API_KEY = ""
 [MODELS.ANTHROPIC]
 API_KEY = ""
 
+[MODELS.OPENROUTER]
+API_KEY = ""
+
 [MODELS.GEMINI]
 API_KEY = ""
 

src/app/api/chat/route.ts

@@ -49,6 +49,7 @@ type Body = {
   files: Array<string>;
   chatModel: ChatModel;
   embeddingModel: EmbeddingModel;
+  systemInstructions: string;
 };
 
 const handleEmitterEvents = async (
@@ -278,6 +279,7 @@ export const POST = async (req: Request) => {
       embedding,
       body.optimizationMode,
       body.files,
+      body.systemInstructions,
     );
 
     const responseStream = new TransformStream();

src/app/api/config/route.ts

@@ -5,6 +5,7 @@ import {
   getCustomOpenaiModelName,
   getGeminiApiKey,
   getGroqApiKey,
+  getOpenrouterApiKey,
   getOllamaApiEndpoint,
   getOpenaiApiKey,
   updateConfig,
@@ -52,6 +53,7 @@ export const GET = async (req: Request) => {
     config['ollamaApiUrl'] = getOllamaApiEndpoint();
     config['anthropicApiKey'] = getAnthropicApiKey();
     config['groqApiKey'] = getGroqApiKey();
+    config['openrouterApiKey'] = getOpenrouterApiKey();
     config['geminiApiKey'] = getGeminiApiKey();
     config['customOpenaiApiUrl'] = getCustomOpenaiApiUrl();
     config['customOpenaiApiKey'] = getCustomOpenaiApiKey();
@@ -79,6 +81,9 @@ export const POST = async (req: Request) => {
         GROQ: {
           API_KEY: config.groqApiKey,
         },
+        OPENROUTER: {
+          API_KEY: config.openrouterApiKey,
+        },
         ANTHROPIC: {
           API_KEY: config.anthropicApiKey,
         },

src/app/api/search/route.ts

@@ -125,6 +125,7 @@ export const POST = async (req: Request) => {
       embeddings,
       body.optimizationMode,
       [],
+      '',
     );
 
     if (!body.stream) {

src/app/settings/page.tsx

@@ -17,6 +17,7 @@ interface SettingsType {
   };
   openaiApiKey: string;
   groqApiKey: string;
+  openrouterApiKey: string;
   anthropicApiKey: string;
   geminiApiKey: string;
   ollamaApiUrl: string;
@@ -54,6 +55,38 @@ const Input = ({ className, isSaving, onSave, ...restProps }: InputProps) => {
   );
 };
 
+interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  isSaving?: boolean;
+  onSave?: (value: string) => void;
+}
+
+const Textarea = ({
+  className,
+  isSaving,
+  onSave,
+  ...restProps
+}: TextareaProps) => {
+  return (
+    <div className="relative">
+      <textarea
+        placeholder="Any special instructions for the LLM"
+        className="placeholder:text-sm text-sm w-full flex items-center justify-between p-3 bg-light-secondary dark:bg-dark-secondary rounded-lg hover:bg-light-200 dark:hover:bg-dark-200 transition-colors"
+        rows={4}
+        onBlur={(e) => onSave?.(e.target.value)}
+        {...restProps}
+      />
+      {isSaving && (
+        <div className="absolute right-3 top-3">
+          <Loader2
+            size={16}
+            className="animate-spin text-black/70 dark:text-white/70"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
 const Select = ({
   className,
   options,
@@ -111,6 +144,7 @@ const Page = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [automaticImageSearch, setAutomaticImageSearch] = useState(false);
   const [automaticVideoSearch, setAutomaticVideoSearch] = useState(false);
+  const [systemInstructions, setSystemInstructions] = useState<string>('');
   const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
@@ -172,6 +206,8 @@ const Page = () => {
         localStorage.getItem('autoVideoSearch') === 'true',
       );
 
+      setSystemInstructions(localStorage.getItem('systemInstructions')!);
+
       setIsLoading(false);
     };
 
@@ -328,6 +364,8 @@ const Page = () => {
         localStorage.setItem('embeddingModelProvider', value);
       } else if (key === 'embeddingModel') {
         localStorage.setItem('embeddingModel', value);
+      } else if (key === 'systemInstructions') {
+        localStorage.setItem('systemInstructions', value);
       }
     } catch (err) {
       console.error('Failed to save:', err);
@@ -473,6 +511,19 @@ const Page = () => {
               </div>
             </SettingsSection>
 
+            <SettingsSection title="System Instructions">
+              <div className="flex flex-col space-y-4">
+                <Textarea
+                  value={systemInstructions}
+                  isSaving={savingStates['systemInstructions']}
+                  onChange={(e) => {
+                    setSystemInstructions(e.target.value);
+                  }}
+                  onSave={(value) => saveConfig('systemInstructions', value)}
+                />
+              </div>
+            </SettingsSection>
+
             <SettingsSection title="Model Settings">
               {config.chatModelProviders && (
                 <div className="flex flex-col space-y-4">
@@ -751,6 +802,25 @@ const Page = () => {
                   />
                 </div>
 
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    OpenRouter API Key
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="OpenRouter API Key"
+                    value={config.openrouterApiKey}
+                    isSaving={savingStates['openrouterApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        openrouterApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('openrouterApiKey', value)}
+                  />
+                </div>
+
                 <div className="flex flex-col space-y-1">
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     Anthropic API Key

src/components/ChatWindow.tsx

@@ -480,6 +480,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
           name: embeddingModelProvider.name,
           provider: embeddingModelProvider.provider,
         },
+        systemInstructions: localStorage.getItem('systemInstructions'),
       }),
     });
 

src/lib/config.ts

@@ -25,6 +25,9 @@ interface Config {
     OLLAMA: {
       API_URL: string;
     };
+    OPENROUTER: {
+      API_KEY: string;
+    };
     CUSTOM_OPENAI: {
       API_URL: string;
       API_KEY: string;
@@ -54,6 +57,8 @@ export const getOpenaiApiKey = () => loadConfig().MODELS.OPENAI.API_KEY;
 
 export const getGroqApiKey = () => loadConfig().MODELS.GROQ.API_KEY;
 
+export const getOpenrouterApiKey = () => loadConfig().MODELS.OPENROUTER.API_KEY;
+
 export const getAnthropicApiKey = () => loadConfig().MODELS.ANTHROPIC.API_KEY;
 
 export const getGeminiApiKey = () => loadConfig().MODELS.GEMINI.API_KEY;

src/lib/prompts/academicSearch.ts

@@ -51,6 +51,10 @@ export const academicSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Academic', this means you will be searching for academic papers and articles on the web.
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/redditSearch.ts

@@ -51,6 +51,10 @@ export const redditSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Reddit', this means you will be searching for information, opinions and discussions on the web using Reddit.
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/webSearch.ts

@@ -92,6 +92,10 @@ export const webSearchResponsePrompt = `
     - If the user provides vague input or if relevant information is missing, explain what additional details might help refine the search.
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
 
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/wolframAlpha.ts

@@ -51,6 +51,10 @@ export const wolframAlphaSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Wolfram Alpha', this means you will be searching for information on the web using Wolfram Alpha. It is a computational knowledge engine that can answer factual queries and perform computations.
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/writingAssistant.ts

@@ -7,6 +7,10 @@ You have to cite the answer using [number] notation. You must cite the sentences
 Place these citations at the end of that particular sentence. You can cite the same sentence multiple times if it is relevant to the user's query like [number1][number2].
 However you do not need to cite it using the same number. You can use different numbers to cite the same sentence multiple times. The number refers to the number of the search result (passed in the context) used to generate that part of the answer.
 
+### User instructions
+These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+{systemInstructions}
+
 <context>
 {context}
 </context>

src/lib/prompts/youtubeSearch.ts

@@ -51,6 +51,10 @@ export const youtubeSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Youtube', this means you will be searching for videos on the web using Youtube and providing information based on the video's transcrip
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

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 { loadOpenrouterChatModels } from '@/lib/providers/openrouter';
 
 export interface ChatModel {
   displayName: string;
@@ -32,6 +33,7 @@ export const chatModelProviders: Record<
   groq: loadGroqChatModels,
   anthropic: loadAnthropicChatModels,
   gemini: loadGeminiChatModels,
+  openrouter: loadOpenrouterChatModels,
 };
 
 export const embeddingModelProviders: Record<

src/lib/providers/openrouter.ts

@@ -0,0 +1,61 @@
+import { ChatOpenAI } from '@langchain/openai';
+import { getOpenrouterApiKey } from '../config';
+import { ChatModel } from '.';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+
+let openrouterChatModels: Record<string, string>[] = [];
+
+async function fetchModelList(): Promise<void> {
+  try {
+    const response = await fetch('https://openrouter.ai/api/v1/models', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`API request failed with status: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    openrouterChatModels = data.data.map((model: any) => ({
+      displayName: model.name,
+      key: model.id,
+    }));
+  } catch (error) {
+    console.error('Error fetching models:', error);
+  }
+}
+
+export const loadOpenrouterChatModels = async () => {
+  await fetchModelList();
+
+  const openrouterApikey = getOpenrouterApiKey();
+
+  if (!openrouterApikey) return {};
+
+  try {
+    const chatModels: Record<string, ChatModel> = {};
+
+    openrouterChatModels.forEach((model) => {
+      chatModels[model.key] = {
+        displayName: model.displayName,
+        model: new ChatOpenAI({
+          openAIApiKey: openrouterApikey,
+          modelName: model.key,
+          temperature: 0.7,
+          configuration: {
+            baseURL: 'https://openrouter.ai/api/v1',
+          },
+        }) as unknown as BaseChatModel,
+      };
+    });
+
+    return chatModels;
+  } catch (err) {
+    console.error(`Error loading Openrouter models: ${err}`);
+    return {};
+  }
+};

src/lib/search/metaSearchAgent.ts

@@ -33,6 +33,7 @@ export interface MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    systemInstructions: string,
   ) => Promise<eventEmitter>;
 }
 
@@ -236,9 +237,11 @@ class MetaSearchAgent implements MetaSearchAgentType {
     fileIds: string[],
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
+    systemInstructions: string,
   ) {
     return RunnableSequence.from([
       RunnableMap.from({
+        systemInstructions: () => systemInstructions,
         query: (input: BasicChainInput) => input.query,
         chat_history: (input: BasicChainInput) => input.chat_history,
         date: () => new Date().toISOString(),
@@ -468,6 +471,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    systemInstructions: string,
   ) {
     const emitter = new eventEmitter();
 
@@ -476,6 +480,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
       fileIds,
       embeddings,
       optimizationMode,
+      systemInstructions,
     );
 
     const stream = answeringChain.streamEvents(