Upload 65 files

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Create an issue to help us fix bugs
+title: ''
+labels: bug
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,7 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

docs/architecture/README.md

@@ -0,0 +1,11 @@
+## Perplexica's Architecture
+
+Perplexica's architecture consists of the following key components:
+
+1. **User Interface**: A web-based interface that allows users to interact with Perplexica for searching images, videos, and much more.
+2. **Agent/Chains**: These components predict Perplexica's next actions, understand user queries, and decide whether a web search is necessary.
+3. **SearXNG**: A metadata search engine used by Perplexica to search the web for sources.
+4. **LLMs (Large Language Models)**: Utilized by agents and chains for tasks like understanding content, writing responses, and citing sources. Examples include Claude, GPTs, etc.
+5. **Embedding Models**: To improve the accuracy of search results, embedding models re-rank the results using similarity search algorithms such as cosine similarity and dot product distance.
+
+For a more detailed explanation of how these components work together, see [WORKING.md](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/WORKING.md).

docs/architecture/WORKING.md

@@ -0,0 +1,19 @@
+## How does Perplexica work?
+
+Curious about how Perplexica works? Don't worry, we'll cover it here. Before we begin, make sure you've read about the architecture of Perplexica to ensure you understand what it's made up of. Haven't read it? You can read it [here](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/README.md).
+
+We'll understand how Perplexica works by taking an example of a scenario where a user asks: "How does an A.C. work?". We'll break down the process into steps to make it easier to understand. The steps are as follows:
+
+1. The message is sent via WS to the backend server where it invokes the chain. The chain will depend on your focus mode. For this example, let's assume we use the "webSearch" focus mode.
+2. The chain is now invoked; first, the message is passed to another chain where it first predicts (using the chat history and the question) whether there is a need for sources or searching the web. If there is, it will generate a query (in accordance with the chat history) for searching the web that we'll take up later. If not, the chain will end there, and then the answer generator chain, also known as the response generator, will be started.
+3. The query returned by the first chain is passed to SearXNG to search the web for information.
+4. After the information is retrieved, it is based on keyword-based search. We then convert the information into embeddings and the query as well, then we perform a similarity search to find the most relevant sources to answer the query.
+5. After all this is done, the sources are passed to the response generator. This chain takes all the chat history, the query, and the sources. It generates a response that is streamed to the UI.
+
+### How are the answers cited?
+
+The LLMs are prompted to do so. We've prompted them so well that they cite the answers themselves, and using some UI magic, we display it to the user.
+
+### Image and Video Search
+
+Image and video searches are conducted in a similar manner. A query is always generated first, then we search the web for images and videos that match the query. These results are then returned to the user.

src/agents/academicSearchAgent.ts

@@ -0,0 +1,265 @@
+import { BaseMessage } from '@langchain/core/messages';
+import {
+  PromptTemplate,
+  ChatPromptTemplate,
+  MessagesPlaceholder,
+} from '@langchain/core/prompts';
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+import { Document } from '@langchain/core/documents';
+import { searchSearxng } from '../lib/searxng';
+import type { StreamEvent } from '@langchain/core/tracers/log_stream';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import type { Embeddings } from '@langchain/core/embeddings';
+import formatChatHistoryAsString from '../utils/formatHistory';
+import eventEmitter from 'events';
+import computeSimilarity from '../utils/computeSimilarity';
+import logger from '../utils/logger';
+
+const basicAcademicSearchRetrieverPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
+If it is a writing task or a simple hi, hello rather than a question, you need to return \`not_needed\` as the response.
+
+Example:
+1. Follow up question: How does stable diffusion work?
+Rephrased: Stable diffusion working
+
+2. Follow up question: What is linear algebra?
+Rephrased: Linear algebra
+
+3. Follow up question: What is the third law of thermodynamics?
+Rephrased: Third law of thermodynamics
+
+Conversation:
+{chat_history}
+
+Follow up question: {query}
+Rephrased question:
+`;
+
+const basicAcademicSearchResponsePrompt = `
+    You are Perplexica, an AI model who is expert at searching the web and answering user's queries. You are set on focus mode 'Academic', this means you will be searching for academic papers and articles on the web.
+
+    Generate a response that is informative and relevant to the user's query based on provided context (the context consits of search results containg a brief description of the content of that page).
+    You must use this context to answer the user's query in the best way possible. Use an unbaised and journalistic tone in your response. Do not repeat the text.
+    You must not tell the user to open any link or visit any website to get the answer. You must provide the answer in the response itself. If the user asks for links you can provide them.
+    Your responses should be medium to long in length be informative and relevant to the user's query. You can use markdowns to format your response. You should use bullet points to list the information. Make sure the answer is not short and is informative.
+    You have to cite the answer using [number] notation. You must cite the sentences with their relevent context number. You must cite each and every part of the answer so the user can know where the information is coming from.
+    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.
+
+    Aything inside the following \`context\` HTML block provided below is for your knowledge returned by the search engine and is not shared by the user. You have to answer question on the basis of it and cite the relevant information from it but you do not have to 
+    talk about the context in your response. 
+
+    <context>
+    {context}
+    </context>
+
+    If you think there's nothing relevant in the search results, you can say that 'Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?'.
+    Anything between the \`context\` is retrieved from a search engine and is not a part of the conversation with the user. Today's date is ${new Date().toISOString()}
+`;
+
+const strParser = new StringOutputParser();
+
+const handleStream = async (
+  stream: AsyncGenerator<StreamEvent, any, unknown>,
+  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');
+    }
+  }
+};
+
+type BasicChainInput = {
+  chat_history: BaseMessage[];
+  query: string;
+};
+
+const createBasicAcademicSearchRetrieverChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    PromptTemplate.fromTemplate(basicAcademicSearchRetrieverPrompt),
+    llm,
+    strParser,
+    RunnableLambda.from(async (input: string) => {
+      if (input === 'not_needed') {
+        return { query: '', docs: [] };
+      }
+
+      const res = await searchSearxng(input, {
+        language: 'en',
+        engines: [
+          'arxiv',
+          'google scholar',
+          'internetarchivescholar',
+          'pubmed',
+        ],
+      });
+
+      const documents = res.results.map(
+        (result) =>
+          new Document({
+            pageContent: result.content,
+            metadata: {
+              title: result.title,
+              url: result.url,
+              ...(result.img_src && { img_src: result.img_src }),
+            },
+          }),
+      );
+
+      return { query: input, docs: documents };
+    }),
+  ]);
+};
+
+const createBasicAcademicSearchAnsweringChain = (
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const basicAcademicSearchRetrieverChain =
+    createBasicAcademicSearchRetrieverChain(llm);
+
+  const processDocs = async (docs: Document[]) => {
+    return docs
+      .map((_, index) => `${index + 1}. ${docs[index].pageContent}`)
+      .join('\n');
+  };
+
+  const rerankDocs = async ({
+    query,
+    docs,
+  }: {
+    query: string;
+    docs: Document[];
+  }) => {
+    if (docs.length === 0) {
+      return docs;
+    }
+
+    const docsWithContent = docs.filter(
+      (doc) => doc.pageContent && doc.pageContent.length > 0,
+    );
+
+    const [docEmbeddings, queryEmbedding] = await Promise.all([
+      embeddings.embedDocuments(docsWithContent.map((doc) => doc.pageContent)),
+      embeddings.embedQuery(query),
+    ]);
+
+    const similarity = docEmbeddings.map((docEmbedding, i) => {
+      const sim = computeSimilarity(queryEmbedding, docEmbedding);
+
+      return {
+        index: i,
+        similarity: sim,
+      };
+    });
+
+    const sortedDocs = similarity
+      .sort((a, b) => b.similarity - a.similarity)
+      .slice(0, 15)
+      .map((sim) => docsWithContent[sim.index]);
+
+    return sortedDocs;
+  };
+
+  return RunnableSequence.from([
+    RunnableMap.from({
+      query: (input: BasicChainInput) => input.query,
+      chat_history: (input: BasicChainInput) => input.chat_history,
+      context: RunnableSequence.from([
+        (input) => ({
+          query: input.query,
+          chat_history: formatChatHistoryAsString(input.chat_history),
+        }),
+        basicAcademicSearchRetrieverChain
+          .pipe(rerankDocs)
+          .withConfig({
+            runName: 'FinalSourceRetriever',
+          })
+          .pipe(processDocs),
+      ]),
+    }),
+    ChatPromptTemplate.fromMessages([
+      ['system', basicAcademicSearchResponsePrompt],
+      new MessagesPlaceholder('chat_history'),
+      ['user', '{query}'],
+    ]),
+    llm,
+    strParser,
+  ]).withConfig({
+    runName: 'FinalResponseGenerator',
+  });
+};
+
+const basicAcademicSearch = (
+  query: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = new eventEmitter();
+
+  try {
+    const basicAcademicSearchAnsweringChain =
+      createBasicAcademicSearchAnsweringChain(llm, embeddings);
+
+    const stream = basicAcademicSearchAnsweringChain.streamEvents(
+      {
+        chat_history: history,
+        query: query,
+      },
+      {
+        version: 'v1',
+      },
+    );
+
+    handleStream(stream, emitter);
+  } catch (err) {
+    emitter.emit(
+      'error',
+      JSON.stringify({ data: 'An error has occurred please try again later' }),
+    );
+    logger.error(`Error in academic search: ${err}`);
+  }
+
+  return emitter;
+};
+
+const handleAcademicSearch = (
+  message: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = basicAcademicSearch(message, history, llm, embeddings);
+  return emitter;
+};
+
+export default handleAcademicSearch;

src/agents/imageSearchAgent.ts

@@ -0,0 +1,84 @@
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+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 '../lib/searxng';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+
+const imageSearchChainPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question so it is a standalone question that can be used by the LLM to search the web for images.
+You need to make sure the rephrased question agrees with the conversation and is relevant to the conversation.
+
+Example:
+1. Follow up question: What is a cat?
+Rephrased: A cat
+
+2. Follow up question: What is a car? How does it works?
+Rephrased: Car working
+
+3. Follow up question: How does an AC work?
+Rephrased: AC working
+
+Conversation:
+{chat_history}
+
+Follow up question: {query}
+Rephrased question:
+`;
+
+type ImageSearchChainInput = {
+  chat_history: BaseMessage[];
+  query: string;
+};
+
+const strParser = new StringOutputParser();
+
+const createImageSearchChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    RunnableMap.from({
+      chat_history: (input: ImageSearchChainInput) => {
+        return formatChatHistoryAsString(input.chat_history);
+      },
+      query: (input: ImageSearchChainInput) => {
+        return input.query;
+      },
+    }),
+    PromptTemplate.fromTemplate(imageSearchChainPrompt),
+    llm,
+    strParser,
+    RunnableLambda.from(async (input: string) => {
+      const res = await searchSearxng(input, {
+        engines: ['bing images', 'google images'],
+      });
+
+      const images = [];
+
+      res.results.forEach((result) => {
+        if (result.img_src && result.url && result.title) {
+          images.push({
+            img_src: result.img_src,
+            url: result.url,
+            title: result.title,
+          });
+        }
+      });
+
+      return images.slice(0, 10);
+    }),
+  ]);
+};
+
+const handleImageSearch = (
+  input: ImageSearchChainInput,
+  llm: BaseChatModel,
+) => {
+  const imageSearchChain = createImageSearchChain(llm);
+  return imageSearchChain.invoke(input);
+};
+
+export default handleImageSearch;

src/agents/redditSearchAgent.ts

@@ -0,0 +1,260 @@
+import { BaseMessage } from '@langchain/core/messages';
+import {
+  PromptTemplate,
+  ChatPromptTemplate,
+  MessagesPlaceholder,
+} from '@langchain/core/prompts';
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+import { Document } from '@langchain/core/documents';
+import { searchSearxng } from '../lib/searxng';
+import type { StreamEvent } from '@langchain/core/tracers/log_stream';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import type { Embeddings } from '@langchain/core/embeddings';
+import formatChatHistoryAsString from '../utils/formatHistory';
+import eventEmitter from 'events';
+import computeSimilarity from '../utils/computeSimilarity';
+import logger from '../utils/logger';
+
+const basicRedditSearchRetrieverPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
+If it is a writing task or a simple hi, hello rather than a question, you need to return \`not_needed\` as the response.
+
+Example:
+1. Follow up question: Which company is most likely to create an AGI
+Rephrased: Which company is most likely to create an AGI
+
+2. Follow up question: Is Earth flat?
+Rephrased: Is Earth flat?
+
+3. Follow up question: Is there life on Mars?
+Rephrased: Is there life on Mars?
+
+Conversation:
+{chat_history}
+
+Follow up question: {query}
+Rephrased question:
+`;
+
+const basicRedditSearchResponsePrompt = `
+    You are Perplexica, an AI model who is expert at searching the web and answering user's queries. You are set on focus mode 'Reddit', this means you will be searching for information, opinions and discussions on the web using Reddit.
+
+    Generate a response that is informative and relevant to the user's query based on provided context (the context consits of search results containg a brief description of the content of that page).
+    You must use this context to answer the user's query in the best way possible. Use an unbaised and journalistic tone in your response. Do not repeat the text.
+    You must not tell the user to open any link or visit any website to get the answer. You must provide the answer in the response itself. If the user asks for links you can provide them.
+    Your responses should be medium to long in length be informative and relevant to the user's query. You can use markdowns to format your response. You should use bullet points to list the information. Make sure the answer is not short and is informative.
+    You have to cite the answer using [number] notation. You must cite the sentences with their relevent context number. You must cite each and every part of the answer so the user can know where the information is coming from.
+    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.
+
+    Aything inside the following \`context\` HTML block provided below is for your knowledge returned by Reddit and is not shared by the user. You have to answer question on the basis of it and cite the relevant information from it but you do not have to 
+    talk about the context in your response. 
+
+    <context>
+    {context}
+    </context>
+
+    If you think there's nothing relevant in the search results, you can say that 'Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?'.
+    Anything between the \`context\` is retrieved from Reddit and is not a part of the conversation with the user. Today's date is ${new Date().toISOString()}
+`;
+
+const strParser = new StringOutputParser();
+
+const handleStream = async (
+  stream: AsyncGenerator<StreamEvent, any, unknown>,
+  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');
+    }
+  }
+};
+
+type BasicChainInput = {
+  chat_history: BaseMessage[];
+  query: string;
+};
+
+const createBasicRedditSearchRetrieverChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    PromptTemplate.fromTemplate(basicRedditSearchRetrieverPrompt),
+    llm,
+    strParser,
+    RunnableLambda.from(async (input: string) => {
+      if (input === 'not_needed') {
+        return { query: '', docs: [] };
+      }
+
+      const res = await searchSearxng(input, {
+        language: 'en',
+        engines: ['reddit'],
+      });
+
+      const documents = res.results.map(
+        (result) =>
+          new Document({
+            pageContent: result.content ? result.content : result.title,
+            metadata: {
+              title: result.title,
+              url: result.url,
+              ...(result.img_src && { img_src: result.img_src }),
+            },
+          }),
+      );
+
+      return { query: input, docs: documents };
+    }),
+  ]);
+};
+
+const createBasicRedditSearchAnsweringChain = (
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const basicRedditSearchRetrieverChain =
+    createBasicRedditSearchRetrieverChain(llm);
+
+  const processDocs = async (docs: Document[]) => {
+    return docs
+      .map((_, index) => `${index + 1}. ${docs[index].pageContent}`)
+      .join('\n');
+  };
+
+  const rerankDocs = async ({
+    query,
+    docs,
+  }: {
+    query: string;
+    docs: Document[];
+  }) => {
+    if (docs.length === 0) {
+      return docs;
+    }
+
+    const docsWithContent = docs.filter(
+      (doc) => doc.pageContent && doc.pageContent.length > 0,
+    );
+
+    const [docEmbeddings, queryEmbedding] = await Promise.all([
+      embeddings.embedDocuments(docsWithContent.map((doc) => doc.pageContent)),
+      embeddings.embedQuery(query),
+    ]);
+
+    const similarity = docEmbeddings.map((docEmbedding, i) => {
+      const sim = computeSimilarity(queryEmbedding, docEmbedding);
+
+      return {
+        index: i,
+        similarity: sim,
+      };
+    });
+
+    const sortedDocs = similarity
+      .sort((a, b) => b.similarity - a.similarity)
+      .slice(0, 15)
+      .filter((sim) => sim.similarity > 0.3)
+      .map((sim) => docsWithContent[sim.index]);
+
+    return sortedDocs;
+  };
+
+  return RunnableSequence.from([
+    RunnableMap.from({
+      query: (input: BasicChainInput) => input.query,
+      chat_history: (input: BasicChainInput) => input.chat_history,
+      context: RunnableSequence.from([
+        (input) => ({
+          query: input.query,
+          chat_history: formatChatHistoryAsString(input.chat_history),
+        }),
+        basicRedditSearchRetrieverChain
+          .pipe(rerankDocs)
+          .withConfig({
+            runName: 'FinalSourceRetriever',
+          })
+          .pipe(processDocs),
+      ]),
+    }),
+    ChatPromptTemplate.fromMessages([
+      ['system', basicRedditSearchResponsePrompt],
+      new MessagesPlaceholder('chat_history'),
+      ['user', '{query}'],
+    ]),
+    llm,
+    strParser,
+  ]).withConfig({
+    runName: 'FinalResponseGenerator',
+  });
+};
+
+const basicRedditSearch = (
+  query: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = new eventEmitter();
+
+  try {
+    const basicRedditSearchAnsweringChain =
+      createBasicRedditSearchAnsweringChain(llm, embeddings);
+    const stream = basicRedditSearchAnsweringChain.streamEvents(
+      {
+        chat_history: history,
+        query: query,
+      },
+      {
+        version: 'v1',
+      },
+    );
+
+    handleStream(stream, emitter);
+  } catch (err) {
+    emitter.emit(
+      'error',
+      JSON.stringify({ data: 'An error has occurred please try again later' }),
+    );
+    logger.error(`Error in RedditSearch: ${err}`);
+  }
+
+  return emitter;
+};
+
+const handleRedditSearch = (
+  message: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = basicRedditSearch(message, history, llm, embeddings);
+  return emitter;
+};
+
+export default handleRedditSearch;

src/agents/videoSearchAgent.ts

@@ -0,0 +1,90 @@
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+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 '../lib/searxng';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+
+const VideoSearchChainPrompt = `
+  You will be given a conversation below and a follow up question. You need to rephrase the follow-up question so it is a standalone question that can be used by the LLM to search Youtube for videos.
+  You need to make sure the rephrased question agrees with the conversation and is relevant to the conversation.
+  
+  Example:
+  1. Follow up question: How does a car work?
+  Rephrased: How does a car work?
+  
+  2. Follow up question: What is the theory of relativity?
+  Rephrased: What is theory of relativity
+  
+  3. Follow up question: How does an AC work?
+  Rephrased: How does an AC work
+  
+  Conversation:
+  {chat_history}
+  
+  Follow up question: {query}
+  Rephrased question:
+  `;
+
+type VideoSearchChainInput = {
+  chat_history: BaseMessage[];
+  query: string;
+};
+
+const strParser = new StringOutputParser();
+
+const createVideoSearchChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    RunnableMap.from({
+      chat_history: (input: VideoSearchChainInput) => {
+        return formatChatHistoryAsString(input.chat_history);
+      },
+      query: (input: VideoSearchChainInput) => {
+        return input.query;
+      },
+    }),
+    PromptTemplate.fromTemplate(VideoSearchChainPrompt),
+    llm,
+    strParser,
+    RunnableLambda.from(async (input: string) => {
+      const res = await searchSearxng(input, {
+        engines: ['youtube'],
+      });
+
+      const videos = [];
+
+      res.results.forEach((result) => {
+        if (
+          result.thumbnail &&
+          result.url &&
+          result.title &&
+          result.iframe_src
+        ) {
+          videos.push({
+            img_src: result.thumbnail,
+            url: result.url,
+            title: result.title,
+            iframe_src: result.iframe_src,
+          });
+        }
+      });
+
+      return videos.slice(0, 10);
+    }),
+  ]);
+};
+
+const handleVideoSearch = (
+  input: VideoSearchChainInput,
+  llm: BaseChatModel,
+) => {
+  const VideoSearchChain = createVideoSearchChain(llm);
+  return VideoSearchChain.invoke(input);
+};
+
+export default handleVideoSearch;

src/agents/webSearchAgent.ts

@@ -0,0 +1,261 @@
+import { BaseMessage } from '@langchain/core/messages';
+import {
+  PromptTemplate,
+  ChatPromptTemplate,
+  MessagesPlaceholder,
+} from '@langchain/core/prompts';
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+import { Document } from '@langchain/core/documents';
+import { searchSearxng } from '../lib/searxng';
+import type { StreamEvent } from '@langchain/core/tracers/log_stream';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import type { Embeddings } from '@langchain/core/embeddings';
+import formatChatHistoryAsString from '../utils/formatHistory';
+import eventEmitter from 'events';
+import computeSimilarity from '../utils/computeSimilarity';
+import logger from '../utils/logger';
+
+const basicSearchRetrieverPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
+If it is a writing task or a simple hi, hello rather than a question, you need to return \`not_needed\` as the response.
+
+Example:
+1. Follow up question: What is the capital of France?
+Rephrased: Capital of france
+
+2. Follow up question: What is the population of New York City?
+Rephrased: Population of New York City
+
+3. Follow up question: What is Docker?
+Rephrased: What is Docker
+
+Conversation:
+{chat_history}
+
+Follow up question: {query}
+Rephrased question:
+`;
+
+const basicWebSearchResponsePrompt = `
+    You are Perplexica, an AI model who is expert at searching the web and answering user's queries.
+
+    Generate a response that is informative and relevant to the user's query based on provided context (the context consits of search results containg a brief description of the content of that page).
+    You must use this context to answer the user's query in the best way possible. Use an unbaised and journalistic tone in your response. Do not repeat the text.
+    You must not tell the user to open any link or visit any website to get the answer. You must provide the answer in the response itself. If the user asks for links you can provide them.
+    Your responses should be medium to long in length be informative and relevant to the user's query. You can use markdowns to format your response. You should use bullet points to list the information. Make sure the answer is not short and is informative.
+    You have to cite the answer using [number] notation. You must cite the sentences with their relevent context number. You must cite each and every part of the answer so the user can know where the information is coming from.
+    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.
+
+    Aything inside the following \`context\` HTML block provided below is for your knowledge returned by the search engine and is not shared by the user. You have to answer question on the basis of it and cite the relevant information from it but you do not have to 
+    talk about the context in your response. 
+
+    <context>
+    {context}
+    </context>
+
+    If you think there's nothing relevant in the search results, you can say that 'Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?'.
+    Anything between the \`context\` is retrieved from a search engine and is not a part of the conversation with the user. Today's date is ${new Date().toISOString()}
+`;
+
+const strParser = new StringOutputParser();
+
+const handleStream = async (
+  stream: AsyncGenerator<StreamEvent, any, unknown>,
+  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');
+    }
+  }
+};
+
+type BasicChainInput = {
+  chat_history: BaseMessage[];
+  query: string;
+};
+
+const createBasicWebSearchRetrieverChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    PromptTemplate.fromTemplate(basicSearchRetrieverPrompt),
+    llm,
+    strParser,
+    RunnableLambda.from(async (input: string) => {
+      if (input === 'not_needed') {
+        return { query: '', docs: [] };
+      }
+
+      const res = await searchSearxng(input, {
+        language: 'en',
+      });
+
+      const documents = res.results.map(
+        (result) =>
+          new Document({
+            pageContent: result.content,
+            metadata: {
+              title: result.title,
+              url: result.url,
+              ...(result.img_src && { img_src: result.img_src }),
+            },
+          }),
+      );
+
+      return { query: input, docs: documents };
+    }),
+  ]);
+};
+
+const createBasicWebSearchAnsweringChain = (
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const basicWebSearchRetrieverChain = createBasicWebSearchRetrieverChain(llm);
+
+  const processDocs = async (docs: Document[]) => {
+    return docs
+      .map((_, index) => `${index + 1}. ${docs[index].pageContent}`)
+      .join('\n');
+  };
+
+  const rerankDocs = async ({
+    query,
+    docs,
+  }: {
+    query: string;
+    docs: Document[];
+  }) => {
+    if (docs.length === 0) {
+      return docs;
+    }
+
+    const docsWithContent = docs.filter(
+      (doc) => doc.pageContent && doc.pageContent.length > 0,
+    );
+
+    const [docEmbeddings, queryEmbedding] = await Promise.all([
+      embeddings.embedDocuments(docsWithContent.map((doc) => doc.pageContent)),
+      embeddings.embedQuery(query),
+    ]);
+
+    const similarity = docEmbeddings.map((docEmbedding, i) => {
+      const sim = computeSimilarity(queryEmbedding, docEmbedding);
+
+      return {
+        index: i,
+        similarity: sim,
+      };
+    });
+
+    const sortedDocs = similarity
+      .sort((a, b) => b.similarity - a.similarity)
+      .filter((sim) => sim.similarity > 0.5)
+      .slice(0, 15)
+      .map((sim) => docsWithContent[sim.index]);
+
+    return sortedDocs;
+  };
+
+  return RunnableSequence.from([
+    RunnableMap.from({
+      query: (input: BasicChainInput) => input.query,
+      chat_history: (input: BasicChainInput) => input.chat_history,
+      context: RunnableSequence.from([
+        (input) => ({
+          query: input.query,
+          chat_history: formatChatHistoryAsString(input.chat_history),
+        }),
+        basicWebSearchRetrieverChain
+          .pipe(rerankDocs)
+          .withConfig({
+            runName: 'FinalSourceRetriever',
+          })
+          .pipe(processDocs),
+      ]),
+    }),
+    ChatPromptTemplate.fromMessages([
+      ['system', basicWebSearchResponsePrompt],
+      new MessagesPlaceholder('chat_history'),
+      ['user', '{query}'],
+    ]),
+    llm,
+    strParser,
+  ]).withConfig({
+    runName: 'FinalResponseGenerator',
+  });
+};
+
+const basicWebSearch = (
+  query: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = new eventEmitter();
+
+  try {
+    const basicWebSearchAnsweringChain = createBasicWebSearchAnsweringChain(
+      llm,
+      embeddings,
+    );
+
+    const stream = basicWebSearchAnsweringChain.streamEvents(
+      {
+        chat_history: history,
+        query: query,
+      },
+      {
+        version: 'v1',
+      },
+    );
+
+    handleStream(stream, emitter);
+  } catch (err) {
+    emitter.emit(
+      'error',
+      JSON.stringify({ data: 'An error has occurred please try again later' }),
+    );
+    logger.error(`Error in websearch: ${err}`);
+  }
+
+  return emitter;
+};
+
+const handleWebSearch = (
+  message: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = basicWebSearch(message, history, llm, embeddings);
+  return emitter;
+};
+
+export default handleWebSearch;

src/agents/wolframAlphaSearchAgent.ts

@@ -0,0 +1,219 @@
+import { BaseMessage } from '@langchain/core/messages';
+import {
+  PromptTemplate,
+  ChatPromptTemplate,
+  MessagesPlaceholder,
+} from '@langchain/core/prompts';
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+import { Document } from '@langchain/core/documents';
+import { searchSearxng } from '../lib/searxng';
+import type { StreamEvent } from '@langchain/core/tracers/log_stream';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import type { Embeddings } from '@langchain/core/embeddings';
+import formatChatHistoryAsString from '../utils/formatHistory';
+import eventEmitter from 'events';
+import logger from '../utils/logger';
+
+const basicWolframAlphaSearchRetrieverPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
+If it is a writing task or a simple hi, hello rather than a question, you need to return \`not_needed\` as the response.
+
+Example:
+1. Follow up question: What is the atomic radius of S?
+Rephrased: Atomic radius of S
+
+2. Follow up question: What is linear algebra?
+Rephrased: Linear algebra
+
+3. Follow up question: What is the third law of thermodynamics?
+Rephrased: Third law of thermodynamics
+
+Conversation:
+{chat_history}
+
+Follow up question: {query}
+Rephrased question:
+`;
+
+const basicWolframAlphaSearchResponsePrompt = `
+    You are Perplexica, an AI model who is expert at searching the web and answering user's queries. 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.
+
+    Generate a response that is informative and relevant to the user's query based on provided context (the context consits of search results containg a brief description of the content of that page).
+    You must use this context to answer the user's query in the best way possible. Use an unbaised and journalistic tone in your response. Do not repeat the text.
+    You must not tell the user to open any link or visit any website to get the answer. You must provide the answer in the response itself. If the user asks for links you can provide them.
+    Your responses should be medium to long in length be informative and relevant to the user's query. You can use markdowns to format your response. You should use bullet points to list the information. Make sure the answer is not short and is informative.
+    You have to cite the answer using [number] notation. You must cite the sentences with their relevent context number. You must cite each and every part of the answer so the user can know where the information is coming from.
+    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.
+
+    Aything inside the following \`context\` HTML block provided below is for your knowledge returned by Wolfram Alpha and is not shared by the user. You have to answer question on the basis of it and cite the relevant information from it but you do not have to 
+    talk about the context in your response. 
+
+    <context>
+    {context}
+    </context>
+
+    If you think there's nothing relevant in the search results, you can say that 'Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?'.
+    Anything between the \`context\` is retrieved from Wolfram Alpha and is not a part of the conversation with the user. Today's date is ${new Date().toISOString()}
+`;
+
+const strParser = new StringOutputParser();
+
+const handleStream = async (
+  stream: AsyncGenerator<StreamEvent, any, unknown>,
+  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');
+    }
+  }
+};
+
+type BasicChainInput = {
+  chat_history: BaseMessage[];
+  query: string;
+};
+
+const createBasicWolframAlphaSearchRetrieverChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    PromptTemplate.fromTemplate(basicWolframAlphaSearchRetrieverPrompt),
+    llm,
+    strParser,
+    RunnableLambda.from(async (input: string) => {
+      if (input === 'not_needed') {
+        return { query: '', docs: [] };
+      }
+
+      const res = await searchSearxng(input, {
+        language: 'en',
+        engines: ['wolframalpha'],
+      });
+
+      const documents = res.results.map(
+        (result) =>
+          new Document({
+            pageContent: result.content,
+            metadata: {
+              title: result.title,
+              url: result.url,
+              ...(result.img_src && { img_src: result.img_src }),
+            },
+          }),
+      );
+
+      return { query: input, docs: documents };
+    }),
+  ]);
+};
+
+const createBasicWolframAlphaSearchAnsweringChain = (llm: BaseChatModel) => {
+  const basicWolframAlphaSearchRetrieverChain =
+    createBasicWolframAlphaSearchRetrieverChain(llm);
+
+  const processDocs = (docs: Document[]) => {
+    return docs
+      .map((_, index) => `${index + 1}. ${docs[index].pageContent}`)
+      .join('\n');
+  };
+
+  return RunnableSequence.from([
+    RunnableMap.from({
+      query: (input: BasicChainInput) => input.query,
+      chat_history: (input: BasicChainInput) => input.chat_history,
+      context: RunnableSequence.from([
+        (input) => ({
+          query: input.query,
+          chat_history: formatChatHistoryAsString(input.chat_history),
+        }),
+        basicWolframAlphaSearchRetrieverChain
+          .pipe(({ query, docs }) => {
+            return docs;
+          })
+          .withConfig({
+            runName: 'FinalSourceRetriever',
+          })
+          .pipe(processDocs),
+      ]),
+    }),
+    ChatPromptTemplate.fromMessages([
+      ['system', basicWolframAlphaSearchResponsePrompt],
+      new MessagesPlaceholder('chat_history'),
+      ['user', '{query}'],
+    ]),
+    llm,
+    strParser,
+  ]).withConfig({
+    runName: 'FinalResponseGenerator',
+  });
+};
+
+const basicWolframAlphaSearch = (
+  query: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+) => {
+  const emitter = new eventEmitter();
+
+  try {
+    const basicWolframAlphaSearchAnsweringChain =
+      createBasicWolframAlphaSearchAnsweringChain(llm);
+    const stream = basicWolframAlphaSearchAnsweringChain.streamEvents(
+      {
+        chat_history: history,
+        query: query,
+      },
+      {
+        version: 'v1',
+      },
+    );
+
+    handleStream(stream, emitter);
+  } catch (err) {
+    emitter.emit(
+      'error',
+      JSON.stringify({ data: 'An error has occurred please try again later' }),
+    );
+    logger.error(`Error in WolframAlphaSearch: ${err}`);
+  }
+
+  return emitter;
+};
+
+const handleWolframAlphaSearch = (
+  message: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = basicWolframAlphaSearch(message, history, llm);
+  return emitter;
+};
+
+export default handleWolframAlphaSearch;

src/agents/writingAssistant.ts

@@ -0,0 +1,90 @@
+import { BaseMessage } from '@langchain/core/messages';
+import {
+  ChatPromptTemplate,
+  MessagesPlaceholder,
+} from '@langchain/core/prompts';
+import { RunnableSequence } from '@langchain/core/runnables';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+import type { StreamEvent } from '@langchain/core/tracers/log_stream';
+import eventEmitter from 'events';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import type { Embeddings } from '@langchain/core/embeddings';
+import logger from '../utils/logger';
+
+const writingAssistantPrompt = `
+You are Perplexica, an AI model who is expert at searching the web and answering user's queries. You are currently set on focus mode 'Writing Assistant', this means you will be helping the user write a response to a given query. 
+Since you are a writing assistant, you would not perform web searches. If you think you lack information to answer the query, you can ask the user for more information or suggest them to switch to a different focus mode.
+`;
+
+const strParser = new StringOutputParser();
+
+const handleStream = async (
+  stream: AsyncGenerator<StreamEvent, any, unknown>,
+  emitter: eventEmitter,
+) => {
+  for await (const event of stream) {
+    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');
+    }
+  }
+};
+
+const createWritingAssistantChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    ChatPromptTemplate.fromMessages([
+      ['system', writingAssistantPrompt],
+      new MessagesPlaceholder('chat_history'),
+      ['user', '{query}'],
+    ]),
+    llm,
+    strParser,
+  ]).withConfig({
+    runName: 'FinalResponseGenerator',
+  });
+};
+
+const handleWritingAssistant = (
+  query: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = new eventEmitter();
+
+  try {
+    const writingAssistantChain = createWritingAssistantChain(llm);
+    const stream = writingAssistantChain.streamEvents(
+      {
+        chat_history: history,
+        query: query,
+      },
+      {
+        version: 'v1',
+      },
+    );
+
+    handleStream(stream, emitter);
+  } catch (err) {
+    emitter.emit(
+      'error',
+      JSON.stringify({ data: 'An error has occurred please try again later' }),
+    );
+    logger.error(`Error in writing assistant: ${err}`);
+  }
+
+  return emitter;
+};
+
+export default handleWritingAssistant;

src/agents/youtubeSearchAgent.ts

@@ -0,0 +1,261 @@
+import { BaseMessage } from '@langchain/core/messages';
+import {
+  PromptTemplate,
+  ChatPromptTemplate,
+  MessagesPlaceholder,
+} from '@langchain/core/prompts';
+import {
+  RunnableSequence,
+  RunnableMap,
+  RunnableLambda,
+} from '@langchain/core/runnables';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+import { Document } from '@langchain/core/documents';
+import { searchSearxng } from '../lib/searxng';
+import type { StreamEvent } from '@langchain/core/tracers/log_stream';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import type { Embeddings } from '@langchain/core/embeddings';
+import formatChatHistoryAsString from '../utils/formatHistory';
+import eventEmitter from 'events';
+import computeSimilarity from '../utils/computeSimilarity';
+import logger from '../utils/logger';
+
+const basicYoutubeSearchRetrieverPrompt = `
+You will be given a conversation below and a follow up question. You need to rephrase the follow-up question if needed so it is a standalone question that can be used by the LLM to search the web for information.
+If it is a writing task or a simple hi, hello rather than a question, you need to return \`not_needed\` as the response.
+
+Example:
+1. Follow up question: How does an A.C work?
+Rephrased: A.C working
+
+2. Follow up question: Linear algebra explanation video
+Rephrased: What is linear algebra?
+
+3. Follow up question: What is theory of relativity?
+Rephrased: What is theory of relativity?
+
+Conversation:
+{chat_history}
+
+Follow up question: {query}
+Rephrased question:
+`;
+
+const basicYoutubeSearchResponsePrompt = `
+    You are Perplexica, an AI model who is expert at searching the web and answering user's queries. 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 transcript.
+
+    Generate a response that is informative and relevant to the user's query based on provided context (the context consits of search results containg a brief description of the content of that page).
+    You must use this context to answer the user's query in the best way possible. Use an unbaised and journalistic tone in your response. Do not repeat the text.
+    You must not tell the user to open any link or visit any website to get the answer. You must provide the answer in the response itself. If the user asks for links you can provide them.
+    Your responses should be medium to long in length be informative and relevant to the user's query. You can use markdowns to format your response. You should use bullet points to list the information. Make sure the answer is not short and is informative.
+    You have to cite the answer using [number] notation. You must cite the sentences with their relevent context number. You must cite each and every part of the answer so the user can know where the information is coming from.
+    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.
+
+    Aything inside the following \`context\` HTML block provided below is for your knowledge returned by Youtube and is not shared by the user. You have to answer question on the basis of it and cite the relevant information from it but you do not have to 
+    talk about the context in your response. 
+
+    <context>
+    {context}
+    </context>
+
+    If you think there's nothing relevant in the search results, you can say that 'Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?'.
+    Anything between the \`context\` is retrieved from Youtube and is not a part of the conversation with the user. Today's date is ${new Date().toISOString()}
+`;
+
+const strParser = new StringOutputParser();
+
+const handleStream = async (
+  stream: AsyncGenerator<StreamEvent, any, unknown>,
+  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');
+    }
+  }
+};
+
+type BasicChainInput = {
+  chat_history: BaseMessage[];
+  query: string;
+};
+
+const createBasicYoutubeSearchRetrieverChain = (llm: BaseChatModel) => {
+  return RunnableSequence.from([
+    PromptTemplate.fromTemplate(basicYoutubeSearchRetrieverPrompt),
+    llm,
+    strParser,
+    RunnableLambda.from(async (input: string) => {
+      if (input === 'not_needed') {
+        return { query: '', docs: [] };
+      }
+
+      const res = await searchSearxng(input, {
+        language: 'en',
+        engines: ['youtube'],
+      });
+
+      const documents = res.results.map(
+        (result) =>
+          new Document({
+            pageContent: result.content ? result.content : result.title,
+            metadata: {
+              title: result.title,
+              url: result.url,
+              ...(result.img_src && { img_src: result.img_src }),
+            },
+          }),
+      );
+
+      return { query: input, docs: documents };
+    }),
+  ]);
+};
+
+const createBasicYoutubeSearchAnsweringChain = (
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const basicYoutubeSearchRetrieverChain =
+    createBasicYoutubeSearchRetrieverChain(llm);
+
+  const processDocs = async (docs: Document[]) => {
+    return docs
+      .map((_, index) => `${index + 1}. ${docs[index].pageContent}`)
+      .join('\n');
+  };
+
+  const rerankDocs = async ({
+    query,
+    docs,
+  }: {
+    query: string;
+    docs: Document[];
+  }) => {
+    if (docs.length === 0) {
+      return docs;
+    }
+
+    const docsWithContent = docs.filter(
+      (doc) => doc.pageContent && doc.pageContent.length > 0,
+    );
+
+    const [docEmbeddings, queryEmbedding] = await Promise.all([
+      embeddings.embedDocuments(docsWithContent.map((doc) => doc.pageContent)),
+      embeddings.embedQuery(query),
+    ]);
+
+    const similarity = docEmbeddings.map((docEmbedding, i) => {
+      const sim = computeSimilarity(queryEmbedding, docEmbedding);
+
+      return {
+        index: i,
+        similarity: sim,
+      };
+    });
+
+    const sortedDocs = similarity
+      .sort((a, b) => b.similarity - a.similarity)
+      .slice(0, 15)
+      .filter((sim) => sim.similarity > 0.3)
+      .map((sim) => docsWithContent[sim.index]);
+
+    return sortedDocs;
+  };
+
+  return RunnableSequence.from([
+    RunnableMap.from({
+      query: (input: BasicChainInput) => input.query,
+      chat_history: (input: BasicChainInput) => input.chat_history,
+      context: RunnableSequence.from([
+        (input) => ({
+          query: input.query,
+          chat_history: formatChatHistoryAsString(input.chat_history),
+        }),
+        basicYoutubeSearchRetrieverChain
+          .pipe(rerankDocs)
+          .withConfig({
+            runName: 'FinalSourceRetriever',
+          })
+          .pipe(processDocs),
+      ]),
+    }),
+    ChatPromptTemplate.fromMessages([
+      ['system', basicYoutubeSearchResponsePrompt],
+      new MessagesPlaceholder('chat_history'),
+      ['user', '{query}'],
+    ]),
+    llm,
+    strParser,
+  ]).withConfig({
+    runName: 'FinalResponseGenerator',
+  });
+};
+
+const basicYoutubeSearch = (
+  query: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = new eventEmitter();
+
+  try {
+    const basicYoutubeSearchAnsweringChain =
+      createBasicYoutubeSearchAnsweringChain(llm, embeddings);
+
+    const stream = basicYoutubeSearchAnsweringChain.streamEvents(
+      {
+        chat_history: history,
+        query: query,
+      },
+      {
+        version: 'v1',
+      },
+    );
+
+    handleStream(stream, emitter);
+  } catch (err) {
+    emitter.emit(
+      'error',
+      JSON.stringify({ data: 'An error has occurred please try again later' }),
+    );
+    logger.error(`Error in youtube search: ${err}`);
+  }
+
+  return emitter;
+};
+
+const handleYoutubeSearch = (
+  message: string,
+  history: BaseMessage[],
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  const emitter = basicYoutubeSearch(message, history, llm, embeddings);
+  return emitter;
+};
+
+export default handleYoutubeSearch;

src/app.ts

@@ -0,0 +1,30 @@
+import { startWebSocketServer } from './websocket';
+import express from 'express';
+import cors from 'cors';
+import http from 'http';
+import routes from './routes';
+import { getPort } from './config';
+import logger from './utils/logger';
+
+const port = getPort();
+
+const app = express();
+const server = http.createServer(app);
+
+const corsOptions = {
+  origin: '*',
+};
+
+app.use(cors(corsOptions));
+app.use(express.json());
+
+app.use('/api', routes);
+app.get('/api', (_, res) => {
+  res.status(200).json({ status: 'ok' });
+});
+
+server.listen(port, () => {
+  logger.info(`Server is running on port ${port}`);
+});
+
+startWebSocketServer(server);

src/config.ts

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import toml from '@iarna/toml';
+
+const configFileName = 'config.toml';
+
+interface Config {
+  GENERAL: {
+    PORT: number;
+    SIMILARITY_MEASURE: string;
+  };
+  API_KEYS: {
+    OPENAI: string;
+    GROQ: string;
+  };
+  API_ENDPOINTS: {
+    SEARXNG: string;
+    OLLAMA: string;
+  };
+}
+
+type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>;
+};
+
+const loadConfig = () =>
+  toml.parse(
+    fs.readFileSync(path.join(__dirname, `../${configFileName}`), 'utf-8'),
+  ) as any as Config;
+
+export const getPort = () => loadConfig().GENERAL.PORT;
+
+export const getSimilarityMeasure = () =>
+  loadConfig().GENERAL.SIMILARITY_MEASURE;
+
+export const getOpenaiApiKey = () => loadConfig().API_KEYS.OPENAI;
+
+export const getGroqApiKey = () => loadConfig().API_KEYS.GROQ;
+
+export const getSearxngApiEndpoint = () => loadConfig().API_ENDPOINTS.SEARXNG;
+
+export const getOllamaApiEndpoint = () => loadConfig().API_ENDPOINTS.OLLAMA;
+
+export const updateConfig = (config: RecursivePartial<Config>) => {
+  const currentConfig = loadConfig();
+
+  for (const key in currentConfig) {
+    if (!config[key]) config[key] = {};
+
+    if (typeof currentConfig[key] === 'object' && currentConfig[key] !== null) {
+      for (const nestedKey in currentConfig[key]) {
+        if (
+          !config[key][nestedKey] &&
+          currentConfig[key][nestedKey] &&
+          config[key][nestedKey] !== ''
+        ) {
+          config[key][nestedKey] = currentConfig[key][nestedKey];
+        }
+      }
+    } else if (currentConfig[key] && config[key] !== '') {
+      config[key] = currentConfig[key];
+    }
+  }
+
+  fs.writeFileSync(
+    path.join(__dirname, `../${configFileName}`),
+    toml.stringify(config),
+  );
+};

src/lib/providers.ts

@@ -0,0 +1,157 @@
+import { ChatOpenAI, OpenAIEmbeddings } from '@langchain/openai';
+import { ChatOllama } from '@langchain/community/chat_models/ollama';
+import { OllamaEmbeddings } from '@langchain/community/embeddings/ollama';
+import {
+  getGroqApiKey,
+  getOllamaApiEndpoint,
+  getOpenaiApiKey,
+} from '../config';
+import logger from '../utils/logger';
+
+export const getAvailableChatModelProviders = async () => {
+  const openAIApiKey = getOpenaiApiKey();
+  const groqApiKey = getGroqApiKey();
+  const ollamaEndpoint = getOllamaApiEndpoint();
+
+  const models = {};
+
+  if (openAIApiKey) {
+    try {
+      models['openai'] = {
+        'GPT-3.5 turbo': new ChatOpenAI({
+          openAIApiKey,
+          modelName: 'gpt-3.5-turbo',
+          temperature: 0.7,
+        }),
+        'GPT-4': new ChatOpenAI({
+          openAIApiKey,
+          modelName: 'gpt-4',
+          temperature: 0.7,
+        }),
+        'GPT-4 turbo': new ChatOpenAI({
+          openAIApiKey,
+          modelName: 'gpt-4-turbo',
+          temperature: 0.7,
+        }),
+      };
+    } catch (err) {
+      logger.error(`Error loading OpenAI models: ${err}`);
+    }
+  }
+
+  if (groqApiKey) {
+    try {
+      models['groq'] = {
+        'LLaMA3 8b': new ChatOpenAI(
+          {
+            openAIApiKey: groqApiKey,
+            modelName: 'llama3-8b-8192',
+            temperature: 0.7,
+          },
+          {
+            baseURL: 'https://api.groq.com/openai/v1',
+          },
+        ),
+        'LLaMA3 70b': new ChatOpenAI(
+          {
+            openAIApiKey: groqApiKey,
+            modelName: 'llama3-70b-8192',
+            temperature: 0.7,
+          },
+          {
+            baseURL: 'https://api.groq.com/openai/v1',
+          },
+        ),
+        'Mixtral 8x7b': new ChatOpenAI(
+          {
+            openAIApiKey: groqApiKey,
+            modelName: 'mixtral-8x7b-32768',
+            temperature: 0.7,
+          },
+          {
+            baseURL: 'https://api.groq.com/openai/v1',
+          },
+        ),
+        'Gemma 7b': new ChatOpenAI(
+          {
+            openAIApiKey: groqApiKey,
+            modelName: 'gemma-7b-it',
+            temperature: 0.7,
+          },
+          {
+            baseURL: 'https://api.groq.com/openai/v1',
+          },
+        ),
+      };
+    } catch (err) {
+      logger.error(`Error loading Groq models: ${err}`);
+    }
+  }
+
+  if (ollamaEndpoint) {
+    try {
+      const response = await fetch(`${ollamaEndpoint}/api/tags`);
+
+      const { models: ollamaModels } = (await response.json()) as any;
+
+      models['ollama'] = ollamaModels.reduce((acc, model) => {
+        acc[model.model] = new ChatOllama({
+          baseUrl: ollamaEndpoint,
+          model: model.model,
+          temperature: 0.7,
+        });
+        return acc;
+      }, {});
+    } 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`);
+
+      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/lib/searxng.ts

@@ -0,0 +1,47 @@
+import axios from 'axios';
+import { getSearxngApiEndpoint } from '../config';
+
+interface SearxngSearchOptions {
+  categories?: string[];
+  engines?: string[];
+  language?: string;
+  pageno?: number;
+}
+
+interface SearxngSearchResult {
+  title: string;
+  url: string;
+  img_src?: string;
+  thumbnail_src?: string;
+  thumbnail?: string;
+  content?: string;
+  author?: string;
+  iframe_src?: string;
+}
+
+export const searchSearxng = async (
+  query: string,
+  opts?: SearxngSearchOptions,
+) => {
+  const searxngURL = getSearxngApiEndpoint();
+
+  const url = new URL(`${searxngURL}/search?format=json`);
+  url.searchParams.append('q', query);
+
+  if (opts) {
+    Object.keys(opts).forEach((key) => {
+      if (Array.isArray(opts[key])) {
+        url.searchParams.append(key, opts[key].join(','));
+        return;
+      }
+      url.searchParams.append(key, opts[key]);
+    });
+  }
+
+  const res = await axios.get(url.toString());
+
+  const results: SearxngSearchResult[] = res.data.results;
+  const suggestions: string[] = res.data.suggestions;
+
+  return { results, suggestions };
+};

src/routes/config.ts

@@ -0,0 +1,63 @@
+import express from 'express';
+import {
+  getAvailableChatModelProviders,
+  getAvailableEmbeddingModelProviders,
+} from '../lib/providers';
+import {
+  getGroqApiKey,
+  getOllamaApiEndpoint,
+  getOpenaiApiKey,
+  updateConfig,
+} from '../config';
+
+const router = express.Router();
+
+router.get('/', async (_, res) => {
+  const config = {};
+
+  const [chatModelProviders, embeddingModelProviders] = await Promise.all([
+    getAvailableChatModelProviders(),
+    getAvailableEmbeddingModelProviders(),
+  ]);
+
+  config['chatModelProviders'] = {};
+  config['embeddingModelProviders'] = {};
+
+  for (const provider in chatModelProviders) {
+    config['chatModelProviders'][provider] = Object.keys(
+      chatModelProviders[provider],
+    );
+  }
+
+  for (const provider in embeddingModelProviders) {
+    config['embeddingModelProviders'][provider] = Object.keys(
+      embeddingModelProviders[provider],
+    );
+  }
+
+  config['openaiApiKey'] = getOpenaiApiKey();
+  config['ollamaApiUrl'] = getOllamaApiEndpoint();
+  config['groqApiKey'] = getGroqApiKey();
+
+  res.status(200).json(config);
+});
+
+router.post('/', async (req, res) => {
+  const config = req.body;
+
+  const updatedConfig = {
+    API_KEYS: {
+      OPENAI: config.openaiApiKey,
+      GROQ: config.groqApiKey,
+    },
+    API_ENDPOINTS: {
+      OLLAMA: config.ollamaApiUrl,
+    },
+  };
+
+  updateConfig(updatedConfig);
+
+  res.status(200).json({ message: 'Config updated' });
+});
+
+export default router;

src/routes/images.ts

@@ -0,0 +1,46 @@
+import express from 'express';
+import handleImageSearch from '../agents/imageSearchAgent';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import { getAvailableChatModelProviders } from '../lib/providers';
+import { HumanMessage, AIMessage } from '@langchain/core/messages';
+import logger from '../utils/logger';
+
+const router = express.Router();
+
+router.post('/', async (req, res) => {
+  try {
+    let { query, chat_history, chat_model_provider, chat_model } = req.body;
+
+    chat_history = chat_history.map((msg: any) => {
+      if (msg.role === 'user') {
+        return new HumanMessage(msg.content);
+      } else if (msg.role === 'assistant') {
+        return new AIMessage(msg.content);
+      }
+    });
+
+    const chatModels = await getAvailableChatModelProviders();
+    const provider = chat_model_provider || Object.keys(chatModels)[0];
+    const chatModel = chat_model || Object.keys(chatModels[provider])[0];
+
+    let llm: BaseChatModel | undefined;
+
+    if (chatModels[provider] && chatModels[provider][chatModel]) {
+      llm = chatModels[provider][chatModel] as BaseChatModel | undefined;
+    }
+
+    if (!llm) {
+      res.status(500).json({ message: 'Invalid LLM model selected' });
+      return;
+    }
+
+    const images = await handleImageSearch({ query, chat_history }, llm);
+
+    res.status(200).json({ images });
+  } catch (err) {
+    res.status(500).json({ message: 'An error has occurred.' });
+    logger.error(`Error in image search: ${err.message}`);
+  }
+});
+
+export default router;

src/routes/index.ts

@@ -0,0 +1,14 @@
+import express from 'express';
+import imagesRouter from './images';
+import videosRouter from './videos';
+import configRouter from './config';
+import modelsRouter from './models';
+
+const router = express.Router();
+
+router.use('/images', imagesRouter);
+router.use('/videos', videosRouter);
+router.use('/config', configRouter);
+router.use('/models', modelsRouter);
+
+export default router;

src/routes/models.ts

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

src/routes/videos.ts

@@ -0,0 +1,46 @@
+import express from 'express';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import { getAvailableChatModelProviders } from '../lib/providers';
+import { HumanMessage, AIMessage } from '@langchain/core/messages';
+import logger from '../utils/logger';
+import handleVideoSearch from '../agents/videoSearchAgent';
+
+const router = express.Router();
+
+router.post('/', async (req, res) => {
+  try {
+    let { query, chat_history, chat_model_provider, chat_model } = req.body;
+
+    chat_history = chat_history.map((msg: any) => {
+      if (msg.role === 'user') {
+        return new HumanMessage(msg.content);
+      } else if (msg.role === 'assistant') {
+        return new AIMessage(msg.content);
+      }
+    });
+
+    const chatModels = await getAvailableChatModelProviders();
+    const provider = chat_model_provider || Object.keys(chatModels)[0];
+    const chatModel = chat_model || Object.keys(chatModels[provider])[0];
+
+    let llm: BaseChatModel | undefined;
+
+    if (chatModels[provider] && chatModels[provider][chatModel]) {
+      llm = chatModels[provider][chatModel] as BaseChatModel | undefined;
+    }
+
+    if (!llm) {
+      res.status(500).json({ message: 'Invalid LLM model selected' });
+      return;
+    }
+
+    const videos = await handleVideoSearch({ chat_history, query }, llm);
+
+    res.status(200).json({ videos });
+  } catch (err) {
+    res.status(500).json({ message: 'An error has occurred.' });
+    logger.error(`Error in video search: ${err.message}`);
+  }
+});
+
+export default router;

src/utils/computeSimilarity.ts

@@ -0,0 +1,17 @@
+import dot from 'compute-dot';
+import cosineSimilarity from 'compute-cosine-similarity';
+import { getSimilarityMeasure } from '../config';
+
+const computeSimilarity = (x: number[], y: number[]): number => {
+  const similarityMeasure = getSimilarityMeasure();
+
+  if (similarityMeasure === 'cosine') {
+    return cosineSimilarity(x, y);
+  } else if (similarityMeasure === 'dot') {
+    return dot(x, y);
+  }
+
+  throw new Error('Invalid similarity measure');
+};
+
+export default computeSimilarity;

src/utils/formatHistory.ts

@@ -0,0 +1,9 @@
+import { BaseMessage } from '@langchain/core/messages';
+
+const formatChatHistoryAsString = (history: BaseMessage[]) => {
+  return history
+    .map((message) => `${message._getType()}: ${message.content}`)
+    .join('\n');
+};
+
+export default formatChatHistoryAsString;

src/utils/logger.ts

@@ -0,0 +1,22 @@
+import winston from 'winston';
+
+const logger = winston.createLogger({
+  level: 'info',
+  transports: [
+    new winston.transports.Console({
+      format: winston.format.combine(
+        winston.format.colorize(),
+        winston.format.simple(),
+      ),
+    }),
+    new winston.transports.File({
+      filename: 'app.log',
+      format: winston.format.combine(
+        winston.format.timestamp(),
+        winston.format.json(),
+      ),
+    }),
+  ],
+});
+
+export default logger;

src/websocket/connectionManager.ts

@@ -0,0 +1,86 @@
+import { WebSocket } from 'ws';
+import { handleMessage } from './messageHandler';
+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,
+  request: IncomingMessage,
+) => {
+  const searchParams = new URL(request.url, `http://${request.headers.host}`)
+    .searchParams;
+
+  const [chatModelProviders, embeddingModelProviders] = await Promise.all([
+    getAvailableChatModelProviders(),
+    getAvailableEmbeddingModelProviders(),
+  ]);
+
+  const chatModelProvider =
+    searchParams.get('chatModelProvider') || Object.keys(chatModelProviders)[0];
+  const chatModel =
+    searchParams.get('chatModel') ||
+    Object.keys(chatModelProviders[chatModelProvider])[0];
+
+  const 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 (
+    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',
+      }),
+    );
+    ws.close();
+  }
+
+  ws.on(
+    'message',
+    async (message) =>
+      await handleMessage(message.toString(), ws, llm, embeddings),
+  );
+
+  ws.on('close', () => logger.debug('Connection closed'));
+};

src/websocket/index.ts

@@ -0,0 +1,8 @@
+import { initServer } from './websocketServer';
+import http from 'http';
+
+export const startWebSocketServer = (
+  server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>,
+) => {
+  initServer(server);
+};

src/websocket/messageHandler.ts

@@ -0,0 +1,109 @@
+import { EventEmitter, WebSocket } from 'ws';
+import { BaseMessage, AIMessage, HumanMessage } from '@langchain/core/messages';
+import handleWebSearch from '../agents/webSearchAgent';
+import handleAcademicSearch from '../agents/academicSearchAgent';
+import handleWritingAssistant from '../agents/writingAssistant';
+import handleWolframAlphaSearch from '../agents/wolframAlphaSearchAgent';
+import handleYoutubeSearch from '../agents/youtubeSearchAgent';
+import handleRedditSearch from '../agents/redditSearchAgent';
+import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import type { Embeddings } from '@langchain/core/embeddings';
+import logger from '../utils/logger';
+
+type Message = {
+  type: string;
+  content: string;
+  copilot: boolean;
+  focusMode: string;
+  history: Array<[string, string]>;
+};
+
+const searchHandlers = {
+  webSearch: handleWebSearch,
+  academicSearch: handleAcademicSearch,
+  writingAssistant: handleWritingAssistant,
+  wolframAlphaSearch: handleWolframAlphaSearch,
+  youtubeSearch: handleYoutubeSearch,
+  redditSearch: handleRedditSearch,
+};
+
+const handleEmitterEvents = (
+  emitter: EventEmitter,
+  ws: WebSocket,
+  id: string,
+) => {
+  emitter.on('data', (data) => {
+    const parsedData = JSON.parse(data);
+    if (parsedData.type === 'response') {
+      ws.send(
+        JSON.stringify({
+          type: 'message',
+          data: parsedData.data,
+          messageId: id,
+        }),
+      );
+    } else if (parsedData.type === 'sources') {
+      ws.send(
+        JSON.stringify({
+          type: 'sources',
+          data: parsedData.data,
+          messageId: id,
+        }),
+      );
+    }
+  });
+  emitter.on('end', () => {
+    ws.send(JSON.stringify({ type: 'messageEnd', messageId: id }));
+  });
+  emitter.on('error', (data) => {
+    const parsedData = JSON.parse(data);
+    ws.send(JSON.stringify({ type: 'error', data: parsedData.data }));
+  });
+};
+
+export const handleMessage = async (
+  message: string,
+  ws: WebSocket,
+  llm: BaseChatModel,
+  embeddings: Embeddings,
+) => {
+  try {
+    const parsedMessage = JSON.parse(message) as Message;
+    const id = Math.random().toString(36).substring(7);
+
+    if (!parsedMessage.content)
+      return ws.send(
+        JSON.stringify({ type: 'error', data: 'Invalid message format' }),
+      );
+
+    const history: BaseMessage[] = parsedMessage.history.map((msg) => {
+      if (msg[0] === 'human') {
+        return new HumanMessage({
+          content: msg[1],
+        });
+      } else {
+        return new AIMessage({
+          content: msg[1],
+        });
+      }
+    });
+
+    if (parsedMessage.type === 'message') {
+      const handler = searchHandlers[parsedMessage.focusMode];
+      if (handler) {
+        const emitter = handler(
+          parsedMessage.content,
+          history,
+          llm,
+          embeddings,
+        );
+        handleEmitterEvents(emitter, ws, id);
+      } else {
+        ws.send(JSON.stringify({ type: 'error', data: 'Invalid focus mode' }));
+      }
+    }
+  } catch (err) {
+    ws.send(JSON.stringify({ type: 'error', data: 'Invalid message format' }));
+    logger.error(`Failed to handle message: ${err}`);
+  }
+};

src/websocket/websocketServer.ts

@@ -0,0 +1,16 @@
+import { WebSocketServer } from 'ws';
+import { handleConnection } from './connectionManager';
+import http from 'http';
+import { getPort } from '../config';
+import logger from '../utils/logger';
+
+export const initServer = (
+  server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>,
+) => {
+  const port = getPort();
+  const wss = new WebSocketServer({ server });
+
+  wss.on('connection', handleConnection);
+
+  logger.info(`WebSocket server started on port ${port}`);
+};

ui/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_WS_URL=ws://localhost:3001
+NEXT_PUBLIC_API_URL=http://localhost:3001/api

ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

ui/.gitignore

@@ -0,0 +1,34 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

ui/.prettierrc.js

@@ -0,0 +1,11 @@
+/** @type {import("prettier").Config} */
+
+const config = {
+  printWidth: 80,
+  trailingComma: 'all',
+  endOfLine: 'auto',
+  singleQuote: true,
+  tabWidth: 2,
+};
+
+module.exports = config;

ui/app/discover/page.tsx

@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>page</div>;
+};
+
+export default Page;

ui/app/globals.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .overflow-hidden-scrollable {
+    -ms-overflow-style: none;
+  }
+
+  .overflow-hidden-scrollable::-webkit-scrollbar {
+    display: none;
+  }
+}

ui/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from 'next';
+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'],
+  subsets: ['latin'],
+  display: 'swap',
+  fallback: ['Arial', 'sans-serif'],
+});
+
+export const metadata: Metadata = {
+  title: 'Perplexica - Chat with the internet',
+  description:
+    'Perplexica is an AI powered chatbot that is connected to the internet.',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <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/app/page.tsx

@@ -0,0 +1,17 @@
+import ChatWindow from '@/components/ChatWindow';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Chat - Perplexica',
+  description: 'Chat with the internet, chat with Perplexica.',
+};
+
+const Home = () => {
+  return (
+    <div>
+      <ChatWindow />
+    </div>
+  );
+};
+
+export default Home;

ui/components/Chat.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import MessageInput from './MessageInput';
+import { Message } from './ChatWindow';
+import MessageBox from './MessageBox';
+import MessageBoxLoading from './MessageBoxLoading';
+
+const Chat = ({
+  loading,
+  messages,
+  sendMessage,
+  messageAppeared,
+  rewrite,
+}: {
+  messages: Message[];
+  sendMessage: (message: string) => void;
+  loading: boolean;
+  messageAppeared: boolean;
+  rewrite: (messageId: string) => void;
+}) => {
+  const [dividerWidth, setDividerWidth] = useState(0);
+  const dividerRef = useRef<HTMLDivElement | null>(null);
+  const messageEnd = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const updateDividerWidth = () => {
+      if (dividerRef.current) {
+        setDividerWidth(dividerRef.current.scrollWidth);
+      }
+    };
+
+    updateDividerWidth();
+
+    window.addEventListener('resize', updateDividerWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateDividerWidth);
+    };
+  });
+
+  useEffect(() => {
+    messageEnd.current?.scrollIntoView({ behavior: 'smooth' });
+
+    if (messages.length === 1) {
+      document.title = `${messages[0].content.substring(0, 30)} - Perplexica`;
+    }
+  }, [messages]);
+
+  return (
+    <div className="flex flex-col space-y-6 pt-8 pb-44 lg:pb-32 sm:mx-4 md:mx-8">
+      {messages.map((msg, i) => {
+        const isLast = i === messages.length - 1;
+
+        return (
+          <>
+            <MessageBox
+              key={i}
+              message={msg}
+              messageIndex={i}
+              history={messages}
+              loading={loading}
+              dividerRef={isLast ? dividerRef : undefined}
+              isLast={isLast}
+              rewrite={rewrite}
+            />
+            {!isLast && msg.role === 'assistant' && (
+              <div className="h-px w-full bg-[#1C1C1C]" />
+            )}
+          </>
+        );
+      })}
+      {loading && !messageAppeared && <MessageBoxLoading />}
+      <div ref={messageEnd} className="h-0" />
+      {dividerWidth > 0 && (
+        <div
+          className="bottom-24 lg:bottom-10 fixed z-40"
+          style={{ width: dividerWidth }}
+        >
+          <MessageInput loading={loading} sendMessage={sendMessage} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Chat;

ui/components/ChatWindow.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+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;
+  createdAt: Date;
+  content: string;
+  role: 'user' | 'assistant';
+  sources?: Document[];
+};
+
+const useSocket = (url: string) => {
+  const [ws, setWs] = useState<WebSocket | null>(null);
+
+  useEffect(() => {
+    if (!ws) {
+      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 ||
+          !embeddingModel ||
+          !embeddingModelProvider
+        ) {
+          const providers = await fetch(
+            `${process.env.NEXT_PUBLIC_API_URL}/models`,
+            {
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            },
+          ).then(async (res) => await res.json());
+
+          const chatModelProviders = providers.chatModelProviders;
+          const embeddingModelProviders = providers.embeddingModelProviders;
+
+          if (
+            !chatModelProviders ||
+            Object.keys(chatModelProviders).length === 0
+          )
+            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 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);
+          }
+        };
+      };
+
+      connectWs();
+    }
+
+    return () => {
+      ws?.close();
+      console.log('[DEBUG] closed');
+    };
+  }, [ws, url]);
+
+  return ws;
+};
+
+const ChatWindow = () => {
+  const ws = useSocket(process.env.NEXT_PUBLIC_WS_URL!);
+  const [chatHistory, setChatHistory] = useState<[string, string][]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [messageAppeared, setMessageAppeared] = useState(false);
+  const [focusMode, setFocusMode] = useState('webSearch');
+
+  const sendMessage = async (message: string) => {
+    if (loading) return;
+    setLoading(true);
+    setMessageAppeared(false);
+
+    let sources: Document[] | undefined = undefined;
+    let recievedMessage = '';
+    let added = false;
+
+    ws?.send(
+      JSON.stringify({
+        type: 'message',
+        content: message,
+        focusMode: focusMode,
+        history: [...chatHistory, ['human', message]],
+      }),
+    );
+
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      {
+        content: message,
+        id: Math.random().toString(36).substring(7),
+        role: 'user',
+        createdAt: new Date(),
+      },
+    ]);
+
+    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) {
+          setMessages((prevMessages) => [
+            ...prevMessages,
+            {
+              content: '',
+              id: data.messageId,
+              role: 'assistant',
+              sources: sources,
+              createdAt: new Date(),
+            },
+          ]);
+          added = true;
+        }
+        setMessageAppeared(true);
+      }
+
+      if (data.type === 'message') {
+        if (!added) {
+          setMessages((prevMessages) => [
+            ...prevMessages,
+            {
+              content: data.data,
+              id: data.messageId,
+              role: 'assistant',
+              sources: sources,
+              createdAt: new Date(),
+            },
+          ]);
+          added = true;
+        }
+
+        setMessages((prev) =>
+          prev.map((message) => {
+            if (message.id === data.messageId) {
+              return { ...message, content: message.content + data.data };
+            }
+
+            return message;
+          }),
+        );
+
+        recievedMessage += data.data;
+        setMessageAppeared(true);
+      }
+
+      if (data.type === 'messageEnd') {
+        setChatHistory((prevHistory) => [
+          ...prevHistory,
+          ['human', message],
+          ['assistant', recievedMessage],
+        ]);
+        ws?.removeEventListener('message', messageHandler);
+        setLoading(false);
+      }
+    };
+
+    ws?.addEventListener('message', messageHandler);
+  };
+
+  const rewrite = (messageId: string) => {
+    const index = messages.findIndex((msg) => msg.id === messageId);
+
+    if (index === -1) return;
+
+    const message = messages[index - 1];
+
+    setMessages((prev) => {
+      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+    });
+    setChatHistory((prev) => {
+      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+    });
+
+    sendMessage(message.content);
+  };
+
+  return ws ? (
+    <div>
+      {messages.length > 0 ? (
+        <>
+          <Navbar messages={messages} />
+          <Chat
+            loading={loading}
+            messages={messages}
+            sendMessage={sendMessage}
+            messageAppeared={messageAppeared}
+            rewrite={rewrite}
+          />
+        </>
+      ) : (
+        <EmptyChat
+          sendMessage={sendMessage}
+          focusMode={focusMode}
+          setFocusMode={setFocusMode}
+        />
+      )}
+    </div>
+  ) : (
+    <div className="flex flex-row items-center justify-center min-h-screen">
+      <svg
+        aria-hidden="true"
+        className="w-8 h-8 text-[#202020] animate-spin fill-[#ffffff3b]"
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default ChatWindow;

ui/components/EmptyChat.tsx

@@ -0,0 +1,26 @@
+import EmptyChatMessageInput from './EmptyChatMessageInput';
+
+const EmptyChat = ({
+  sendMessage,
+  focusMode,
+  setFocusMode,
+}: {
+  sendMessage: (message: string) => void;
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
+      <h2 className="text-white/70 text-3xl font-medium -mt-8">
+        Research begins here.
+      </h2>
+      <EmptyChatMessageInput
+        sendMessage={sendMessage}
+        focusMode={focusMode}
+        setFocusMode={setFocusMode}
+      />
+    </div>
+  );
+};
+
+export default EmptyChat;

ui/components/EmptyChatMessageInput.tsx

@@ -0,0 +1,65 @@
+import { ArrowRight } from 'lucide-react';
+import { useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Attach, CopilotToggle, Focus } from './MessageInputActions';
+
+const EmptyChatMessageInput = ({
+  sendMessage,
+  focusMode,
+  setFocusMode,
+}: {
+  sendMessage: (message: string) => void;
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
+}) => {
+  const [copilotEnabled, setCopilotEnabled] = useState(false);
+  const [message, setMessage] = useState('');
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        sendMessage(message);
+        setMessage('');
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendMessage(message);
+          setMessage('');
+        }
+      }}
+      className="w-full"
+    >
+      <div className="flex flex-col bg-[#111111] px-5 pt-5 pb-2 rounded-lg w-full border border-[#1C1C1C]">
+        <TextareaAutosize
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          minRows={2}
+          className="bg-transparent placeholder:text-white/50 text-sm text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48"
+          placeholder="Ask anything..."
+        />
+        <div className="flex flex-row items-center justify-between mt-4">
+          <div className="flex flex-row items-center space-x-1 -mx-2">
+            <Focus focusMode={focusMode} setFocusMode={setFocusMode} />
+            {/* <Attach /> */}
+          </div>
+          <div className="flex flex-row items-center space-x-4 -mx-2">
+            <CopilotToggle
+              copilotEnabled={copilotEnabled}
+              setCopilotEnabled={setCopilotEnabled}
+            />
+            <button
+              disabled={message.trim().length === 0}
+              className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+            >
+              <ArrowRight className="bg-background" size={17} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default EmptyChatMessageInput;

ui/components/Layout.tsx

@@ -0,0 +1,9 @@
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <main className="lg:pl-20 bg-[#0A0A0A] min-h-screen">
+      <div className="max-w-screen-lg lg:mx-auto mx-4">{children}</div>
+    </main>
+  );
+};
+
+export default Layout;

ui/components/MessageActions/Copy.tsx

@@ -0,0 +1,29 @@
+import { Check, ClipboardList } from 'lucide-react';
+import { Message } from '../ChatWindow';
+import { useState } from 'react';
+
+const Copy = ({
+  message,
+  initialMessage,
+}: {
+  message: Message;
+  initialMessage: string;
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      onClick={() => {
+        const contentToCopy = `${initialMessage}${message.sources && message.sources.length > 0 && `\n\nCitations:\n${message.sources?.map((source: any, i: any) => `[${i + 1}] ${source.metadata.url}`).join(`\n`)}`}`;
+        navigator.clipboard.writeText(contentToCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+      }}
+      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+    >
+      {copied ? <Check size={18} /> : <ClipboardList size={18} />}
+    </button>
+  );
+};
+
+export default Copy;

ui/components/MessageActions/Rewrite.tsx

@@ -0,0 +1,20 @@
+import { ArrowLeftRight } from 'lucide-react';
+
+const Rewrite = ({
+  rewrite,
+  messageId,
+}: {
+  rewrite: (messageId: string) => void;
+  messageId: string;
+}) => {
+  return (
+    <button
+      onClick={() => rewrite(messageId)}
+      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+    >
+      <ArrowLeftRight size={18} />
+    </button>
+  );
+};
+
+export default Rewrite;

ui/components/MessageBox.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+/* eslint-disable @next/next/no-img-element */
+import React, { MutableRefObject, useEffect, useState } from 'react';
+import { Message } from './ChatWindow';
+import { cn } from '@/lib/utils';
+import { BookCopy, Disc3, Share, Volume2, StopCircle } from 'lucide-react';
+import Markdown from 'markdown-to-jsx';
+import Copy from './MessageActions/Copy';
+import Rewrite from './MessageActions/Rewrite';
+import MessageSources from './MessageSources';
+import SearchImages from './SearchImages';
+import SearchVideos from './SearchVideos';
+import { useSpeech } from 'react-text-to-speech';
+
+const MessageBox = ({
+  message,
+  messageIndex,
+  history,
+  loading,
+  dividerRef,
+  isLast,
+  rewrite,
+}: {
+  message: Message;
+  messageIndex: number;
+  history: Message[];
+  loading: boolean;
+  dividerRef?: MutableRefObject<HTMLDivElement | null>;
+  isLast: boolean;
+  rewrite: (messageId: string) => void;
+}) => {
+  const [parsedMessage, setParsedMessage] = useState(message.content);
+  const [speechMessage, setSpeechMessage] = useState(message.content);
+
+  useEffect(() => {
+    const regex = /\[(\d+)\]/g;
+
+    if (
+      message.role === 'assistant' &&
+      message?.sources &&
+      message.sources.length > 0
+    ) {
+      return setParsedMessage(
+        message.content.replace(
+          regex,
+          (_, number) =>
+            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-[#1C1C1C] px-1 rounded ml-1 no-underline text-xs text-white/70 relative">${number}</a>`,
+        ),
+      );
+    }
+
+    setSpeechMessage(message.content.replace(regex, ''));
+    setParsedMessage(message.content);
+  }, [message.content, message.sources, message.role]);
+
+  const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
+
+  return (
+    <div>
+      {message.role === 'user' && (
+        <div className={cn('w-full', messageIndex === 0 ? 'pt-16' : 'pt-8')}>
+          <h2 className="text-white font-medium text-3xl lg:w-9/12">
+            {message.content}
+          </h2>
+        </div>
+      )}
+
+      {message.role === 'assistant' && (
+        <div className="flex flex-col space-y-9 lg:space-y-0 lg:flex-row lg:justify-between lg:space-x-9">
+          <div
+            ref={dividerRef}
+            className="flex flex-col space-y-6 w-full lg:w-9/12"
+          >
+            {message.sources && message.sources.length > 0 && (
+              <div className="flex flex-col space-y-2">
+                <div className="flex flex-row items-center space-x-2">
+                  <BookCopy className="text-white" size={20} />
+                  <h3 className="text-white font-medium text-xl">Sources</h3>
+                </div>
+                <MessageSources sources={message.sources} />
+              </div>
+            )}
+            <div className="flex flex-col space-y-2">
+              <div className="flex flex-row items-center space-x-2">
+                <Disc3
+                  className={cn(
+                    'text-white',
+                    isLast && loading ? 'animate-spin' : 'animate-none',
+                  )}
+                  size={20}
+                />
+                <h3 className="text-white font-medium text-xl">Answer</h3>
+              </div>
+              <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 && 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">
+                      <Share size={18} />
+                    </button>
+                    <Rewrite rewrite={rewrite} messageId={message.id} />
+                  </div>
+                  <div className="flex flex-row items-center space-x-1">
+                    <Copy initialMessage={message.content} message={message} />
+                    <button
+                      onClick={() => {
+                        if (speechStatus === 'started') {
+                          stop();
+                        } else {
+                          start();
+                        }
+                      }}
+                      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+                    >
+                      {speechStatus === 'started' ? (
+                        <StopCircle size={18} />
+                      ) : (
+                        <Volume2 size={18} />
+                      )}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">
+            <SearchImages
+              query={history[messageIndex - 1].content}
+              chat_history={history.slice(0, messageIndex - 1)}
+            />
+            <SearchVideos
+              chat_history={history.slice(0, messageIndex - 1)}
+              query={history[messageIndex - 1].content}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MessageBox;

ui/components/MessageBoxLoading.tsx

@@ -0,0 +1,11 @@
+const MessageBoxLoading = () => {
+  return (
+    <div className="flex flex-col space-y-2 w-full lg:w-9/12 bg-[#111111] animate-pulse rounded-lg p-3">
+      <div className="h-2 rounded-full w-full bg-[#1c1c1c]" />
+      <div className="h-2 rounded-full w-9/12 bg-[#1c1c1c]" />
+      <div className="h-2 rounded-full w-10/12 bg-[#1c1c1c]" />
+    </div>
+  );
+};
+
+export default MessageBoxLoading;

ui/components/MessageInput.tsx

@@ -0,0 +1,92 @@
+import { cn } from '@/lib/utils';
+import { ArrowUp } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Attach, CopilotToggle } from './MessageInputActions';
+
+const MessageInput = ({
+  sendMessage,
+  loading,
+}: {
+  sendMessage: (message: string) => void;
+  loading: boolean;
+}) => {
+  const [copilotEnabled, setCopilotEnabled] = useState(false);
+  const [message, setMessage] = useState('');
+  const [textareaRows, setTextareaRows] = useState(1);
+  const [mode, setMode] = useState<'multi' | 'single'>('single');
+
+  useEffect(() => {
+    if (textareaRows >= 2 && message && mode === 'single') {
+      setMode('multi');
+    } else if (!message && mode === 'multi') {
+      setMode('single');
+    }
+  }, [textareaRows, mode, message]);
+
+  return (
+    <form
+      onSubmit={(e) => {
+        if (loading) return;
+        e.preventDefault();
+        sendMessage(message);
+        setMessage('');
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey && !loading) {
+          e.preventDefault();
+          sendMessage(message);
+          setMessage('');
+        }
+      }}
+      className={cn(
+        'bg-[#111111] p-4 flex items-center overflow-hidden border border-[#1C1C1C]',
+        mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
+      )}
+    >
+      {mode === 'single' && <Attach />}
+      <TextareaAutosize
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onHeightChange={(height, props) => {
+          setTextareaRows(Math.ceil(height / props.rowHeight));
+        }}
+        className="transition bg-transparent placeholder:text-white/50 placeholder:text-sm text-sm text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink"
+        placeholder="Ask a follow-up"
+      />
+      {mode === 'single' && (
+        <div className="flex flex-row items-center space-x-4">
+          <CopilotToggle
+            copilotEnabled={copilotEnabled}
+            setCopilotEnabled={setCopilotEnabled}
+          />
+          <button
+            disabled={message.trim().length === 0 || loading}
+            className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+          >
+            <ArrowUp className="bg-background" size={17} />
+          </button>
+        </div>
+      )}
+      {mode === 'multi' && (
+        <div className="flex flex-row items-center justify-between w-full pt-2">
+          <Attach />
+          <div className="flex flex-row items-center space-x-4">
+            <CopilotToggle
+              copilotEnabled={copilotEnabled}
+              setCopilotEnabled={setCopilotEnabled}
+            />
+            <button
+              disabled={message.trim().length === 0 || loading}
+              className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+            >
+              <ArrowUp className="bg-background" size={17} />
+            </button>
+          </div>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default MessageInput;

ui/components/MessageInputActions.tsx

@@ -0,0 +1,180 @@
+import {
+  BadgePercent,
+  ChevronDown,
+  CopyPlus,
+  Globe,
+  Pencil,
+  ScanEye,
+  SwatchBook,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Popover, Switch, Transition } from '@headlessui/react';
+import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
+import { Fragment } from 'react';
+
+export const Attach = () => {
+  return (
+    <button
+      type="button"
+      className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+    >
+      <CopyPlus />
+    </button>
+  );
+};
+
+const focusModes = [
+  {
+    key: 'webSearch',
+    title: 'All',
+    description: 'Searches across all of the internet',
+    icon: <Globe size={20} />,
+  },
+  {
+    key: 'academicSearch',
+    title: 'Academic',
+    description: 'Search in published academic papers',
+    icon: <SwatchBook size={20} />,
+  },
+  {
+    key: 'writingAssistant',
+    title: 'Writing',
+    description: 'Chat without searching the web',
+    icon: <Pencil size={16} />,
+  },
+  {
+    key: 'wolframAlphaSearch',
+    title: 'Wolfram Alpha',
+    description: 'Computational knowledge engine',
+    icon: <BadgePercent size={20} />,
+  },
+  {
+    key: 'youtubeSearch',
+    title: 'Youtube',
+    description: 'Search and watch videos',
+    icon: (
+      <SiYoutube
+        className="h-5 w-auto mr-0.5"
+        onPointerEnterCapture={undefined}
+        onPointerLeaveCapture={undefined}
+      />
+    ),
+  },
+  {
+    key: 'redditSearch',
+    title: 'Reddit',
+    description: 'Search for discussions and opinions',
+    icon: (
+      <SiReddit
+        className="h-5 w-auto mr-0.5"
+        onPointerEnterCapture={undefined}
+        onPointerLeaveCapture={undefined}
+      />
+    ),
+  },
+];
+
+export const Focus = ({
+  focusMode,
+  setFocusMode,
+}: {
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
+}) => {
+  return (
+    <Popover className="fixed w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
+      <Popover.Button
+        type="button"
+        className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] active:scale-95 transition duration-200 hover:text-white"
+      >
+        {focusMode !== 'webSearch' ? (
+          <div className="flex flex-row items-center space-x-1">
+            {focusModes.find((mode) => mode.key === focusMode)?.icon}
+            <p className="text-xs font-medium">
+              {focusModes.find((mode) => mode.key === focusMode)?.title}
+            </p>
+            <ChevronDown size={20} />
+          </div>
+        ) : (
+          <ScanEye />
+        )}
+      </Popover.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-150"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute z-10 w-full">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 bg-[#0A0A0A] border rounded-lg border-[#1c1c1c] w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
+            {focusModes.map((mode, i) => (
+              <Popover.Button
+                onClick={() => setFocusMode(mode.key)}
+                key={i}
+                className={cn(
+                  'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition',
+                  focusMode === mode.key
+                    ? 'bg-[#111111]'
+                    : 'hover:bg-[#111111]',
+                )}
+              >
+                <div
+                  className={cn(
+                    'flex flex-row items-center space-x-1',
+                    focusMode === mode.key ? 'text-[#24A0ED]' : 'text-white',
+                  )}
+                >
+                  {mode.icon}
+                  <p className="text-sm font-medium">{mode.title}</p>
+                </div>
+                <p className="text-white/70 text-xs">{mode.description}</p>
+              </Popover.Button>
+            ))}
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export const CopilotToggle = ({
+  copilotEnabled,
+  setCopilotEnabled,
+}: {
+  copilotEnabled: boolean;
+  setCopilotEnabled: (enabled: boolean) => void;
+}) => {
+  return (
+    <div className="group flex flex-row items-center space-x-1 active:scale-95 duration-200 transition cursor-pointer">
+      <Switch
+        checked={copilotEnabled}
+        onChange={setCopilotEnabled}
+        className="bg-[#111111] border border-[#1C1C1C] relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
+      >
+        <span className="sr-only">Copilot</span>
+        <span
+          className={cn(
+            copilotEnabled
+              ? 'translate-x-6 bg-[#24A0ED]'
+              : 'translate-x-1 bg-white/50',
+            'inline-block h-3 w-3 sm:h-4 sm:w-4 transform rounded-full transition-all duration-200',
+          )}
+        />
+      </Switch>
+      <p
+        onClick={() => setCopilotEnabled(!copilotEnabled)}
+        className={cn(
+          'text-xs font-medium transition-colors duration-150 ease-in-out',
+          copilotEnabled
+            ? 'text-[#24A0ED]'
+            : 'text-white/50 group-hover:text-white',
+        )}
+      >
+        Copilot
+      </p>
+    </div>
+  );
+};