feat(settings): add system instructions

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/search/route.ts

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

src/app/settings/page.tsx

@@ -54,6 +54,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 +143,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 +205,8 @@ const Page = () => {
         localStorage.getItem('autoVideoSearch') === 'true',
       );
 
+      setSystemInstructions(localStorage.getItem('systemInstructions')!);
+
       setIsLoading(false);
     };
 
@@ -328,6 +363,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 +510,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">

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/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/search/metaSearchAgent.ts

@@ -6,6 +6,11 @@ import {
   MessagesPlaceholder,
   PromptTemplate,
 } from '@langchain/core/prompts';
+import {
+  RunnableLambda,
+  RunnableMap,
+  RunnableSequence,
+} from '@langchain/core/runnables';
 import { BaseMessage } from '@langchain/core/messages';
 import { StringOutputParser } from '@langchain/core/output_parsers';
 import LineListOutputParser from '../outputParsers/listLineOutputParser';
@@ -19,7 +24,6 @@ import computeSimilarity from '../utils/computeSimilarity';
 import formatChatHistoryAsString from '../utils/formatHistory';
 import eventEmitter from 'events';
 import { StreamEvent } from '@langchain/core/tracers/log_stream';
-import { EventEmitter } from 'node:stream';
 
 export interface MetaSearchAgentType {
   searchAndAnswer: (
@@ -29,6 +33,7 @@ export interface MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    systemInstructions: string,
   ) => Promise<eventEmitter>;
 }
 
@@ -42,7 +47,7 @@ interface Config {
   activeEngines: string[];
 }
 
-type SearchInput = {
+type BasicChainInput = {
   chat_history: BaseMessage[];
   query: string;
 };
@@ -55,240 +60,237 @@ class MetaSearchAgent implements MetaSearchAgentType {
     this.config = config;
   }
 
-  private async searchSources(
+  private async createSearchRetrieverChain(llm: BaseChatModel) {
-    llm: BaseChatModel,
-    input: SearchInput,
-    emitter: EventEmitter,
-  ) {
     (llm as unknown as ChatOpenAI).temperature = 0;
 
-    const chatPrompt = PromptTemplate.fromTemplate(
+    return RunnableSequence.from([
-      this.config.queryGeneratorPrompt,
+      PromptTemplate.fromTemplate(this.config.queryGeneratorPrompt),
-    );
+      llm,
+      this.strParser,
+      RunnableLambda.from(async (input: string) => {
+        const linksOutputParser = new LineListOutputParser({
+          key: 'links',
+        });
 
-    const processedChatPrompt = await chatPrompt.invoke({
+        const questionOutputParser = new LineOutputParser({
-      chat_history: formatChatHistoryAsString(input.chat_history),
+          key: 'question',
-      query: input.query,
+        });
-    });
 
-    const llmRes = await llm.invoke(processedChatPrompt);
+        const links = await linksOutputParser.parse(input);
-    const messageStr = await this.strParser.invoke(llmRes);
+        let question = this.config.summarizer
+          ? await questionOutputParser.parse(input)
+          : input;
 
-    const linksOutputParser = new LineListOutputParser({
+        if (question === 'not_needed') {
-      key: 'links',
+          return { query: '', docs: [] };
-    });
-
-    const questionOutputParser = new LineOutputParser({
-      key: 'question',
-    });
-
-    const links = await linksOutputParser.parse(messageStr);
-    let question = this.config.summarizer
-      ? await questionOutputParser.parse(messageStr)
-      : messageStr;
-
-    if (question === 'not_needed') {
-      return { query: '', docs: [] };
-    }
-
-    if (links.length > 0) {
-      if (question.length === 0) {
-        question = 'summarize';
-      }
-
-      let docs: Document[] = [];
-
-      const linkDocs = await getDocumentsFromLinks({ links });
-
-      const docGroups: Document[] = [];
-
-      linkDocs.map((doc) => {
-        const URLDocExists = docGroups.find(
-          (d) =>
-            d.metadata.url === doc.metadata.url && d.metadata.totalDocs < 10,
-        );
-
-        if (!URLDocExists) {
-          docGroups.push({
-            ...doc,
-            metadata: {
-              ...doc.metadata,
-              totalDocs: 1,
-            },
-          });
         }
 
-        const docIndex = docGroups.findIndex(
+        if (links.length > 0) {
-          (d) =>
+          if (question.length === 0) {
-            d.metadata.url === doc.metadata.url && d.metadata.totalDocs < 10,
+            question = 'summarize';
-        );
+          }
 
-        if (docIndex !== -1) {
+          let docs: Document[] = [];
-          docGroups[docIndex].pageContent =
-            docGroups[docIndex].pageContent + `\n\n` + doc.pageContent;
-          docGroups[docIndex].metadata.totalDocs += 1;
-        }
-      });
 
-      await Promise.all(
+          const linkDocs = await getDocumentsFromLinks({ links });
-        docGroups.map(async (doc) => {
-          const res = await llm.invoke(`
-        You are a web search summarizer, tasked with summarizing a piece of text retrieved from a web search. Your job is to summarize the 
-        text into a detailed, 2-4 paragraph explanation that captures the main ideas and provides a comprehensive answer to the query.
-        If the query is \"summarize\", you should provide a detailed summary of the text. If the query is a specific question, you should answer it in the summary.
-        
-        - **Journalistic tone**: The summary should sound professional and journalistic, not too casual or vague.
-        - **Thorough and detailed**: Ensure that every key point from the text is captured and that the summary directly answers the query.
-        - **Not too lengthy, but detailed**: The summary should be informative but not excessively long. Focus on providing detailed information in a concise format.
 
-        The text will be shared inside the \`text\` XML tag, and the query inside the \`query\` XML tag.
+          const docGroups: Document[] = [];
 
-        <example>
+          linkDocs.map((doc) => {
-        1. \`<text>
+            const URLDocExists = docGroups.find(
-        Docker is a set of platform-as-a-service products that use OS-level virtualization to deliver software in packages called containers. 
+              (d) =>
-        It was first released in 2013 and is developed by Docker, Inc. Docker is designed to make it easier to create, deploy, and run applications 
+                d.metadata.url === doc.metadata.url &&
-        by using containers.
+                d.metadata.totalDocs < 10,
-        </text>
+            );
 
-        <query>
+            if (!URLDocExists) {
-        What is Docker and how does it work?
+              docGroups.push({
-        </query>
+                ...doc,
+                metadata: {
+                  ...doc.metadata,
+                  totalDocs: 1,
+                },
+              });
+            }
 
-        Response:
+            const docIndex = docGroups.findIndex(
-        Docker is a revolutionary platform-as-a-service product developed by Docker, Inc., that uses container technology to make application 
+              (d) =>
-        deployment more efficient. It allows developers to package their software with all necessary dependencies, making it easier to run in 
+                d.metadata.url === doc.metadata.url &&
-        any environment. Released in 2013, Docker has transformed the way applications are built, deployed, and managed.
+                d.metadata.totalDocs < 10,
-        \`
+            );
-        2. \`<text>
-        The theory of relativity, or simply relativity, encompasses two interrelated theories of Albert Einstein: special relativity and general
-        relativity. However, the word "relativity" is sometimes used in reference to Galilean invariance. The term "theory of relativity" was based
-        on the expression "relative theory" used by Max Planck in 1906. The theory of relativity usually encompasses two interrelated theories by
-        Albert Einstein: special relativity and general relativity. Special relativity applies to all physical phenomena in the absence of gravity.
-        General relativity explains the law of gravitation and its relation to other forces of nature. It applies to the cosmological and astrophysical
-        realm, including astronomy.
-        </text>
 
-        <query>
+            if (docIndex !== -1) {
-        summarize
+              docGroups[docIndex].pageContent =
-        </query>
+                docGroups[docIndex].pageContent + `\n\n` + doc.pageContent;
-
+              docGroups[docIndex].metadata.totalDocs += 1;
-        Response:
+            }
-        The theory of relativity, developed by Albert Einstein, encompasses two main theories: special relativity and general relativity. Special
-        relativity applies to all physical phenomena in the absence of gravity, while general relativity explains the law of gravitation and its
-        relation to other forces of nature. The theory of relativity is based on the concept of "relative theory," as introduced by Max Planck in
-        1906. It is a fundamental theory in physics that has revolutionized our understanding of the universe.
-        \`
-        </example>
-
-        Everything below is the actual data you will be working with. Good luck!
-
-        <query>
-        ${question}
-        </query>
-
-        <text>
-        ${doc.pageContent}
-        </text>
-
-        Make sure to answer the query in the summary.
-      `);
-
-          const document = new Document({
-            pageContent: res.content as string,
-            metadata: {
-              title: doc.metadata.title,
-              url: doc.metadata.url,
-            },
           });
 
-          docs.push(document);
+          await Promise.all(
-        }),
+            docGroups.map(async (doc) => {
-      );
+              const res = await llm.invoke(`
+            You are a web search summarizer, tasked with summarizing a piece of text retrieved from a web search. Your job is to summarize the 
+            text into a detailed, 2-4 paragraph explanation that captures the main ideas and provides a comprehensive answer to the query.
+            If the query is \"summarize\", you should provide a detailed summary of the text. If the query is a specific question, you should answer it in the summary.
+            
+            - **Journalistic tone**: The summary should sound professional and journalistic, not too casual or vague.
+            - **Thorough and detailed**: Ensure that every key point from the text is captured and that the summary directly answers the query.
+            - **Not too lengthy, but detailed**: The summary should be informative but not excessively long. Focus on providing detailed information in a concise format.
 
-      return { query: question, docs: docs };
+            The text will be shared inside the \`text\` XML tag, and the query inside the \`query\` XML tag.
-    } else {
-      question = question.replace(/<think>.*?<\/think>/g, '');
 
-      const res = await searchSearxng(question, {
+            <example>
-        language: 'en',
+            1. \`<text>
-        engines: this.config.activeEngines,
+            Docker is a set of platform-as-a-service products that use OS-level virtualization to deliver software in packages called containers. 
-      });
+            It was first released in 2013 and is developed by Docker, Inc. Docker is designed to make it easier to create, deploy, and run applications 
+            by using containers.
+            </text>
 
-      const documents = res.results.map(
+            <query>
-        (result) =>
+            What is Docker and how does it work?
-          new Document({
+            </query>
-            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 }),
-            },
-          }),
-      );
 
-      return { query: question, docs: documents };
+            Response:
-    }
+            Docker is a revolutionary platform-as-a-service product developed by Docker, Inc., that uses container technology to make application 
+            deployment more efficient. It allows developers to package their software with all necessary dependencies, making it easier to run in 
+            any environment. Released in 2013, Docker has transformed the way applications are built, deployed, and managed.
+            \`
+            2. \`<text>
+            The theory of relativity, or simply relativity, encompasses two interrelated theories of Albert Einstein: special relativity and general
+            relativity. However, the word "relativity" is sometimes used in reference to Galilean invariance. The term "theory of relativity" was based
+            on the expression "relative theory" used by Max Planck in 1906. The theory of relativity usually encompasses two interrelated theories by
+            Albert Einstein: special relativity and general relativity. Special relativity applies to all physical phenomena in the absence of gravity.
+            General relativity explains the law of gravitation and its relation to other forces of nature. It applies to the cosmological and astrophysical
+            realm, including astronomy.
+            </text>
+
+            <query>
+            summarize
+            </query>
+
+            Response:
+            The theory of relativity, developed by Albert Einstein, encompasses two main theories: special relativity and general relativity. Special
+            relativity applies to all physical phenomena in the absence of gravity, while general relativity explains the law of gravitation and its
+            relation to other forces of nature. The theory of relativity is based on the concept of "relative theory," as introduced by Max Planck in
+            1906. It is a fundamental theory in physics that has revolutionized our understanding of the universe.
+            \`
+            </example>
+
+            Everything below is the actual data you will be working with. Good luck!
+
+            <query>
+            ${question}
+            </query>
+
+            <text>
+            ${doc.pageContent}
+            </text>
+
+            Make sure to answer the query in the summary.
+          `);
+
+              const document = new Document({
+                pageContent: res.content as string,
+                metadata: {
+                  title: doc.metadata.title,
+                  url: doc.metadata.url,
+                },
+              });
+
+              docs.push(document);
+            }),
+          );
+
+          return { query: question, docs: docs };
+        } else {
+          question = question.replace(/<think>.*?<\/think>/g, '');
+
+          const res = await searchSearxng(question, {
+            language: 'en',
+            engines: this.config.activeEngines,
+          });
+
+          const documents = 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 }),
+                },
+              }),
+          );
+
+          return { query: question, docs: documents };
+        }
+      }),
+    ]);
   }
 
-  private async streamAnswer(
+  private async createAnsweringChain(
     llm: BaseChatModel,
     fileIds: string[],
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
-    input: SearchInput,
+    systemInstructions: string,
-    emitter: EventEmitter,
   ) {
-    const chatPrompt = ChatPromptTemplate.fromMessages([
+    return RunnableSequence.from([
-      ['system', this.config.responsePrompt],
+      RunnableMap.from({
-      new MessagesPlaceholder('chat_history'),
+        systemInstructions: () => systemInstructions,
-      ['user', '{query}'],
+        query: (input: BasicChainInput) => input.query,
-    ]);
+        chat_history: (input: BasicChainInput) => input.chat_history,
+        date: () => new Date().toISOString(),
+        context: RunnableLambda.from(async (input: BasicChainInput) => {
+          const processedHistory = formatChatHistoryAsString(
+            input.chat_history,
+          );
 
-    let docs: Document[] | null = null;
+          let docs: Document[] | null = null;
-    let query = input.query;
+          let query = input.query;
 
-    if (this.config.searchWeb) {
+          if (this.config.searchWeb) {
-      const searchResults = await this.searchSources(llm, input, emitter);
+            const searchRetrieverChain =
+              await this.createSearchRetrieverChain(llm);
 
-      query = searchResults.query;
+            const searchRetrieverResult = await searchRetrieverChain.invoke({
-      docs = searchResults.docs;
+              chat_history: processedHistory,
-    }
+              query,
+            });
 
-    const sortedDocs = await this.rerankDocs(
+            query = searchRetrieverResult.query;
-      query,
+            docs = searchRetrieverResult.docs;
-      docs ?? [],
+          }
-      fileIds,
-      embeddings,
-      optimizationMode,
-    );
 
-    emitter.emit('data', JSON.stringify({ type: 'sources', data: sortedDocs }));
+          const sortedDocs = await this.rerankDocs(
+            query,
+            docs ?? [],
+            fileIds,
+            embeddings,
+            optimizationMode,
+          );
 
-    const context = this.processDocs(sortedDocs);
+          return sortedDocs;
-
+        })
-    const formattedChatPrompt = await chatPrompt.invoke({
+          .withConfig({
-      query: input.query,
+            runName: 'FinalSourceRetriever',
-      chat_history: input.chat_history,
+          })
-      date: new Date().toISOString(),
+          .pipe(this.processDocs),
-      context: context,
+      }),
+      ChatPromptTemplate.fromMessages([
+        ['system', this.config.responsePrompt],
+        new MessagesPlaceholder('chat_history'),
+        ['user', '{query}'],
+      ]),
+      llm,
+      this.strParser,
+    ]).withConfig({
+      runName: 'FinalResponseGenerator',
     });
-
-    const llmRes = await llm.stream(formattedChatPrompt);
-
-    for await (const data of llmRes) {
-      const messageStr = await this.strParser.invoke(data);
-
-      emitter.emit(
-        'data',
-        JSON.stringify({ type: 'response', data: messageStr }),
-      );
-    }
-
-    emitter.emit('end');
   }
 
   private async rerankDocs(
@@ -429,6 +431,39 @@ class MetaSearchAgent implements MetaSearchAgentType {
       .join('\n');
   }
 
+  private async handleStream(
+    stream: AsyncGenerator<StreamEvent, any, any>,
+    emitter: eventEmitter,
+  ) {
+    for await (const event of stream) {
+      if (
+        event.event === 'on_chain_end' &&
+        event.name === 'FinalSourceRetriever'
+      ) {
+        ``;
+        emitter.emit(
+          'data',
+          JSON.stringify({ type: 'sources', data: event.data.output }),
+        );
+      }
+      if (
+        event.event === 'on_chain_stream' &&
+        event.name === 'FinalResponseGenerator'
+      ) {
+        emitter.emit(
+          'data',
+          JSON.stringify({ type: 'response', data: event.data.chunk }),
+        );
+      }
+      if (
+        event.event === 'on_chain_end' &&
+        event.name === 'FinalResponseGenerator'
+      ) {
+        emitter.emit('end');
+      }
+    }
+  }
+
   async searchAndAnswer(
     message: string,
     history: BaseMessage[],
@@ -436,21 +471,30 @@ class MetaSearchAgent implements MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    systemInstructions: string,
   ) {
     const emitter = new eventEmitter();
 
-    this.streamAnswer(
+    const answeringChain = await this.createAnsweringChain(
       llm,
       fileIds,
       embeddings,
       optimizationMode,
+      systemInstructions,
+    );
+
+    const stream = answeringChain.streamEvents(
       {
         chat_history: history,
         query: message,
       },
-      emitter,
+      {
+        version: 'v1',
+      },
     );
 
+    this.handleStream(stream, emitter);
+
     return emitter;
   }
 }