feat(app): lint & beautify

Create new citation component to fix errors with tailwind not compiling CSS classes for the anchor tag

drizzle/0001_acoustic_wild_pack.sql

@@ -0,0 +1,51 @@
+PRAGMA foreign_keys=OFF;
+--> statement-breakpoint
+
+CREATE TABLE `__new_messages` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`type` text NOT NULL,
+	`chatId` text NOT NULL,
+	`createdAt` text DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	`messageId` text NOT NULL,
+	`content` text,
+	`sources` text DEFAULT '[]'
+);
+--> statement-breakpoint
+
+INSERT INTO `__new_messages`("id", "type", "chatId", "createdAt", "messageId", "content", "sources") 
+SELECT 
+    id,
+    COALESCE(type, 'user') as type,
+    chatId,
+    CASE
+        WHEN metadata IS NOT NULL AND instr(metadata, '\"createdAt\":\"') > 0 THEN
+            substr(
+                metadata,
+                instr(metadata, '\"createdAt\":\"') + 14,
+                CASE
+                    WHEN instr(substr(metadata, instr(metadata, '\"createdAt\":\"') + 14), '\"') > 0 THEN
+                        instr(substr(metadata, instr(metadata, '\"createdAt\":\"') + 14), '\"') - 1
+                    ELSE 24
+                END
+            )
+        ELSE CURRENT_TIMESTAMP
+    END as createdAt,
+    messageId,
+    content,
+    '[]' as sources
+FROM `messages`;
+--> statement-breakpoint
+
+DROP TABLE `messages`;
+--> statement-breakpoint
+ALTER TABLE `__new_messages` RENAME TO `messages`;
+--> statement-breakpoint
+
+PRAGMA foreign_keys=ON;
+--> statement-breakpoint
+
+CREATE INDEX IF NOT EXISTS `idx_messages_chatId` ON `messages` (`chatId`);
+--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS `idx_messages_type` ON `messages` (`type`);
+--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS `idx_messages_createdAt` ON `messages` (`createdAt`);

drizzle/meta/0001_snapshot.json

@@ -0,0 +1,125 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "766180d3-caab-4b9e-9f35-61ee7b652903",
+  "prevId": "ef3a044b-0f34-40b5-babb-2bb3a909ba27",
+  "tables": {
+    "chats": {
+      "name": "chats",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "focusMode": {
+          "name": "focusMode",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "files": {
+          "name": "files",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'[]'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "messages": {
+      "name": "messages",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "chatId": {
+          "name": "chatId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "messageId": {
+          "name": "messageId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'[]'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -8,6 +8,13 @@
       "when": 1748405503809,
       "tag": "0000_fuzzy_randall",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1756793457846,
+      "tag": "0001_acoustic_wild_pack",
+      "breakpoints": true
     }
   ]
-}
+}

src/app/api/chat/route.ts

@@ -52,11 +52,10 @@ const handleEmitterEvents = async (
   stream: EventEmitter,
   writer: WritableStreamDefaultWriter,
   encoder: TextEncoder,
-  aiMessageId: string,
   chatId: string,
 ) => {
   let recievedMessage = '';
-  let sources: any[] = [];
+  const aiMessageId = crypto.randomBytes(7).toString('hex');
 
   stream.on('data', (data) => {
     const parsedData = JSON.parse(data);
@@ -83,7 +82,17 @@ const handleEmitterEvents = async (
         ),
       );
 
-      sources = parsedData.data;
+      const sourceMessageId = crypto.randomBytes(7).toString('hex');
+
+      db.insert(messagesSchema)
+        .values({
+          chatId: chatId,
+          messageId: sourceMessageId,
+          role: 'source',
+          sources: parsedData.data,
+          createdAt: new Date().toString(),
+        })
+        .execute();
     }
   });
   stream.on('end', () => {
@@ -91,7 +100,6 @@ const handleEmitterEvents = async (
       encoder.encode(
         JSON.stringify({
           type: 'messageEnd',
-          messageId: aiMessageId,
         }) + '\n',
       ),
     );
@@ -103,10 +111,7 @@ const handleEmitterEvents = async (
         chatId: chatId,
         messageId: aiMessageId,
         role: 'assistant',
-        metadata: JSON.stringify({
-          createdAt: new Date(),
-          ...(sources && sources.length > 0 && { sources }),
-        }),
+        createdAt: new Date().toString(),
       })
       .execute();
   });
@@ -167,9 +172,7 @@ const handleHistorySave = async (
         chatId: message.chatId,
         messageId: humanMessageId,
         role: 'user',
-        metadata: JSON.stringify({
-          createdAt: new Date(),
-        }),
+        createdAt: new Date().toString(),
       })
       .execute();
   } else {
@@ -251,7 +254,6 @@ export const POST = async (req: Request) => {
 
     const humanMessageId =
       message.messageId ?? crypto.randomBytes(7).toString('hex');
-    const aiMessageId = crypto.randomBytes(7).toString('hex');
 
     const history: BaseMessage[] = body.history.map((msg) => {
       if (msg[0] === 'human') {
@@ -290,7 +292,7 @@ export const POST = async (req: Request) => {
     const writer = responseStream.writable.getWriter();
     const encoder = new TextEncoder();
 
-    handleEmitterEvents(stream, writer, encoder, aiMessageId, message.chatId);
+    handleEmitterEvents(stream, writer, encoder, message.chatId);
     handleHistorySave(message, humanMessageId, body.focusMode, body.files);
 
     return new Response(responseStream.readable, {

src/app/discover/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Search } from 'lucide-react';
+import { Globe2Icon } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import Link from 'next/link';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
+import SmallNewsCard from '@/components/Discover/SmallNewsCard';
+import MajorNewsCard from '@/components/Discover/MajorNewsCard';
 
-interface Discover {
+export interface Discover {
   title: string;
   content: string;
   url: string;
@@ -75,29 +76,34 @@ const Page = () => {
   return (
     <>
       <div>
-        <div className="flex flex-col pt-4">
-          <div className="flex items-center">
-            <Search />
-            <h1 className="text-3xl font-medium p-2">Discover</h1>
-          </div>
-          <hr className="border-t border-[#2B2C2C] my-4 w-full" />
-        </div>
-
-        <div className="flex flex-row items-center space-x-2 overflow-x-auto">
-          {topics.map((t, i) => (
-            <div
-              key={i}
-              className={cn(
-                'border-[0.1px] rounded-full text-sm px-3 py-1 text-nowrap transition duration-200 cursor-pointer',
-                activeTopic === t.key
-                  ? 'text-cyan-300 bg-cyan-300/30 border-cyan-300/60'
-                  : 'border-black/30 dark:border-white/30 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white hover:border-black/40 dark:hover:border-white/40 hover:bg-black/5 dark:hover:bg-white/5',
-              )}
-              onClick={() => setActiveTopic(t.key)}
-            >
-              <span>{t.display}</span>
+        <div className="flex flex-col pt-10 border-b border-light-200/20 dark:border-dark-200/20 pb-6 px-2">
+          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+            <div className="flex items-center justify-center">
+              <Globe2Icon size={45} className="mb-2.5" />
+              <h1
+                className="text-5xl font-normal p-2"
+                style={{ fontFamily: 'PP Editorial, serif' }}
+              >
+                Discover
+              </h1>
             </div>
-          ))}
+            <div className="flex flex-row items-center space-x-2 overflow-x-auto">
+              {topics.map((t, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    'border-[0.1px] rounded-full text-sm px-3 py-1 text-nowrap transition duration-200 cursor-pointer',
+                    activeTopic === t.key
+                      ? 'text-cyan-700 dark:text-cyan-300 bg-cyan-300/20 border-cyan-700/60 dar:bg-cyan-300/30 dark:border-cyan-300/40'
+                      : 'border-black/30 dark:border-white/30 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white hover:border-black/40 dark:hover:border-white/40 hover:bg-black/5 dark:hover:bg-white/5',
+                  )}
+                  onClick={() => setActiveTopic(t.key)}
+                >
+                  <span>{t.display}</span>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
 
         {loading ? (
@@ -120,34 +126,141 @@ const Page = () => {
             </svg>
           </div>
         ) : (
-          <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4 pb-28 pt-5 lg:pb-8 w-full justify-items-center lg:justify-items-start">
-            {discover &&
-              discover?.map((item, i) => (
-                <Link
-                  href={`/?q=Summary: ${item.url}`}
-                  key={i}
-                  className="max-w-sm rounded-lg overflow-hidden bg-light-secondary dark:bg-dark-secondary hover:-translate-y-[1px] transition duration-200"
-                  target="_blank"
-                >
-                  <img
-                    className="object-cover w-full aspect-video"
-                    src={
-                      new URL(item.thumbnail).origin +
-                      new URL(item.thumbnail).pathname +
-                      `?id=${new URL(item.thumbnail).searchParams.get('id')}`
+          <div className="flex flex-col gap-4 pb-28 pt-5 lg:pb-8 w-full">
+            <div className="block lg:hidden">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {discover?.map((item, i) => (
+                  <SmallNewsCard key={`mobile-${i}`} item={item} />
+                ))}
+              </div>
+            </div>
+
+            <div className="hidden lg:block">
+              {discover &&
+                discover.length > 0 &&
+                (() => {
+                  const sections = [];
+                  let index = 0;
+
+                  while (index < discover.length) {
+                    if (sections.length > 0) {
+                      sections.push(
+                        <hr
+                          key={`sep-${index}`}
+                          className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
+                        />,
+                      );
                     }
-                    alt={item.title}
-                  />
-                  <div className="px-6 py-4">
-                    <div className="font-bold text-lg mb-2">
-                      {item.title.slice(0, 100)}...
-                    </div>
-                    <p className="text-black-70 dark:text-white/70 text-sm">
-                      {item.content.slice(0, 100)}...
-                    </p>
-                  </div>
-                </Link>
-              ))}
+
+                    if (index < discover.length) {
+                      sections.push(
+                        <MajorNewsCard
+                          key={`major-${index}`}
+                          item={discover[index]}
+                          isLeft={false}
+                        />,
+                      );
+                      index++;
+                    }
+
+                    if (index < discover.length) {
+                      sections.push(
+                        <hr
+                          key={`sep-${index}-after`}
+                          className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
+                        />,
+                      );
+                    }
+
+                    if (index < discover.length) {
+                      const smallCards = discover.slice(index, index + 3);
+                      sections.push(
+                        <div
+                          key={`small-group-${index}`}
+                          className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"
+                        >
+                          {smallCards.map((item, i) => (
+                            <SmallNewsCard
+                              key={`small-${index + i}`}
+                              item={item}
+                            />
+                          ))}
+                        </div>,
+                      );
+                      index += 3;
+                    }
+
+                    if (index < discover.length) {
+                      sections.push(
+                        <hr
+                          key={`sep-${index}-after-small`}
+                          className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
+                        />,
+                      );
+                    }
+
+                    if (index < discover.length - 1) {
+                      const twoMajorCards = discover.slice(index, index + 2);
+                      twoMajorCards.forEach((item, i) => {
+                        sections.push(
+                          <MajorNewsCard
+                            key={`double-${index + i}`}
+                            item={item}
+                            isLeft={i === 0}
+                          />,
+                        );
+                        if (i === 0) {
+                          sections.push(
+                            <hr
+                              key={`sep-double-${index + i}`}
+                              className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
+                            />,
+                          );
+                        }
+                      });
+                      index += 2;
+                    } else if (index < discover.length) {
+                      sections.push(
+                        <MajorNewsCard
+                          key={`final-major-${index}`}
+                          item={discover[index]}
+                          isLeft={true}
+                        />,
+                      );
+                      index++;
+                    }
+
+                    if (index < discover.length) {
+                      sections.push(
+                        <hr
+                          key={`sep-${index}-after-major`}
+                          className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
+                        />,
+                      );
+                    }
+
+                    if (index < discover.length) {
+                      const smallCards = discover.slice(index, index + 3);
+                      sections.push(
+                        <div
+                          key={`small-group-2-${index}`}
+                          className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"
+                        >
+                          {smallCards.map((item, i) => (
+                            <SmallNewsCard
+                              key={`small-2-${index + i}`}
+                              item={item}
+                            />
+                          ))}
+                        </div>,
+                      );
+                      index += 3;
+                    }
+                  }
+
+                  return sections;
+                })()}
+            </div>
           </div>
         )}
       </div>

src/app/globals.css

@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'PP Editorial';
+  src: url('/fonts/pp-ed-ul.otf') format('opentype');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
 @layer base {
   .overflow-hidden-scrollable {
     -ms-overflow-style: none;

src/components/Chat.tsx

@@ -2,13 +2,12 @@
 
 import { Fragment, useEffect, useRef, useState } from 'react';
 import MessageInput from './MessageInput';
-import { File, Message } from './ChatWindow';
 import MessageBox from './MessageBox';
 import MessageBoxLoading from './MessageBoxLoading';
 import { useChat } from '@/lib/hooks/useChat';
 
 const Chat = () => {
-  const { messages, loading, messageAppeared } = useChat();
+  const { sections, chatTurns, loading, messageAppeared } = useChat();
 
   const [dividerWidth, setDividerWidth] = useState(0);
   const dividerRef = useRef<HTMLDivElement | null>(null);
@@ -28,37 +27,36 @@ const Chat = () => {
     return () => {
       window.removeEventListener('resize', updateDividerWidth);
     };
-  });
+  }, []);
 
   useEffect(() => {
     const scroll = () => {
       messageEnd.current?.scrollIntoView({ behavior: 'smooth' });
     };
 
-    if (messages.length === 1) {
-      document.title = `${messages[0].content.substring(0, 30)} - Perplexica`;
+    if (chatTurns.length === 1) {
+      document.title = `${chatTurns[0].content.substring(0, 30)} - Perplexica`;
     }
 
-    if (messages[messages.length - 1]?.role == 'user') {
+    if (chatTurns[chatTurns.length - 1]?.role === 'user') {
       scroll();
     }
-  }, [messages]);
+  }, [chatTurns]);
 
   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;
+      {sections.map((section, i) => {
+        const isLast = i === sections.length - 1;
 
         return (
-          <Fragment key={msg.messageId}>
+          <Fragment key={section.userMessage.messageId}>
             <MessageBox
-              key={i}
-              message={msg}
-              messageIndex={i}
+              section={section}
+              sectionIndex={i}
               dividerRef={isLast ? dividerRef : undefined}
               isLast={isLast}
             />
-            {!isLast && msg.role === 'assistant' && (
+            {!isLast && (
               <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
             )}
           </Fragment>

src/components/ChatWindow.tsx

@@ -9,15 +9,39 @@ import Link from 'next/link';
 import NextError from 'next/error';
 import { useChat } from '@/lib/hooks/useChat';
 
-export type Message = {
-  messageId: string;
+export interface BaseMessage {
   chatId: string;
+  messageId: string;
   createdAt: Date;
+}
+
+export interface AssistantMessage extends BaseMessage {
+  role: 'assistant';
   content: string;
-  role: 'user' | 'assistant';
   suggestions?: string[];
-  sources?: Document[];
-};
+}
+
+export interface UserMessage extends BaseMessage {
+  role: 'user';
+  content: string;
+}
+
+export interface SourceMessage extends BaseMessage {
+  role: 'source';
+  sources: Document[];
+}
+
+export interface SuggestionMessage extends BaseMessage {
+  role: 'suggestion';
+  suggestions: string[];
+}
+
+export type Message =
+  | AssistantMessage
+  | UserMessage
+  | SourceMessage
+  | SuggestionMessage;
+export type ChatTurn = UserMessage | AssistantMessage;
 
 export interface File {
   fileName: string;

src/components/Citation.tsx

@@ -0,0 +1,19 @@
+const Citation = ({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative"
+    >
+      {children}
+    </a>
+  );
+};
+
+export default Citation;

src/components/Discover/MajorNewsCard.tsx

@@ -0,0 +1,70 @@
+import { Discover } from '@/app/discover/page';
+import Link from 'next/link';
+
+const MajorNewsCard = ({
+  item,
+  isLeft = true,
+}: {
+  item: Discover;
+  isLeft?: boolean;
+}) => (
+  <Link
+    href={`/?q=Summary: ${item.url}`}
+    className="w-full group flex flex-row items-stretch gap-6 h-60 py-3"
+    target="_blank"
+  >
+    {isLeft ? (
+      <>
+        <div className="relative w-80 h-full overflow-hidden rounded-2xl flex-shrink-0">
+          <img
+            className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
+            src={
+              new URL(item.thumbnail).origin +
+              new URL(item.thumbnail).pathname +
+              `?id=${new URL(item.thumbnail).searchParams.get('id')}`
+            }
+            alt={item.title}
+          />
+        </div>
+        <div className="flex flex-col justify-center flex-1 py-4">
+          <h2
+            className="text-3xl font-light mb-3 leading-tight line-clamp-3 group-hover:text-cyan-500 dark:group-hover:text-cyan-300 transition duration-200"
+            style={{ fontFamily: 'PP Editorial, serif' }}
+          >
+            {item.title}
+          </h2>
+          <p className="text-black/60 dark:text-white/60 text-base leading-relaxed line-clamp-4">
+            {item.content}
+          </p>
+        </div>
+      </>
+    ) : (
+      <>
+        <div className="flex flex-col justify-center flex-1 py-4">
+          <h2
+            className="text-3xl font-light mb-3 leading-tight line-clamp-3 group-hover:text-cyan-500 dark:group-hover:text-cyan-300 transition duration-200"
+            style={{ fontFamily: 'PP Editorial, serif' }}
+          >
+            {item.title}
+          </h2>
+          <p className="text-black/60 dark:text-white/60 text-base leading-relaxed line-clamp-4">
+            {item.content}
+          </p>
+        </div>
+        <div className="relative w-80 h-full overflow-hidden rounded-2xl flex-shrink-0">
+          <img
+            className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
+            src={
+              new URL(item.thumbnail).origin +
+              new URL(item.thumbnail).pathname +
+              `?id=${new URL(item.thumbnail).searchParams.get('id')}`
+            }
+            alt={item.title}
+          />
+        </div>
+      </>
+    )}
+  </Link>
+);
+
+export default MajorNewsCard;

src/components/Discover/SmallNewsCard.tsx

@@ -0,0 +1,32 @@
+import { Discover } from '@/app/discover/page';
+import Link from 'next/link';
+
+const SmallNewsCard = ({ item }: { item: Discover }) => (
+  <Link
+    href={`/?q=Summary: ${item.url}`}
+    className="rounded-3xl overflow-hidden bg-light-secondary dark:bg-dark-secondary shadow-sm shadow-light-200/10 dark:shadow-black/25 group flex flex-col"
+    target="_blank"
+  >
+    <div className="relative aspect-video overflow-hidden">
+      <img
+        className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
+        src={
+          new URL(item.thumbnail).origin +
+          new URL(item.thumbnail).pathname +
+          `?id=${new URL(item.thumbnail).searchParams.get('id')}`
+        }
+        alt={item.title}
+      />
+    </div>
+    <div className="p-4">
+      <h3 className="font-semibold text-sm mb-2 leading-tight line-clamp-2 group-hover:text-cyan-500 dark:group-hover:text-cyan-300 transition duration-200">
+        {item.title}
+      </h3>
+      <p className="text-black/60 dark:text-white/60 text-xs leading-relaxed line-clamp-2">
+        {item.content}
+      </p>
+    </div>
+  </Link>
+);
+
+export default SmallNewsCard;

src/components/EmptyChatMessageInput.tsx

@@ -54,7 +54,7 @@ const EmptyChatMessageInput = () => {
       }}
       className="w-full"
     >
-      <div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-5 pt-5 pb-2 rounded-lg w-full border border-light-200 dark:border-dark-200">
+      <div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-5 pt-5 pb-2 rounded-2xl w-full border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300">
         <TextareaAutosize
           ref={inputRef}
           value={message}

src/components/MessageActions/Copy.tsx

@@ -1,12 +1,13 @@
 import { Check, ClipboardList } from 'lucide-react';
 import { Message } from '../ChatWindow';
 import { useState } from 'react';
+import { Section } from '@/lib/hooks/useChat';
 
 const Copy = ({
-  message,
+  section,
   initialMessage,
 }: {
-  message: Message;
+  section: Section;
   initialMessage: string;
 }) => {
   const [copied, setCopied] = useState(false);
@@ -14,7 +15,7 @@ const Copy = ({
   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`)}`}`;
+        const contentToCopy = `${initialMessage}${section?.sourceMessage?.sources && section.sourceMessage.sources.length > 0 && `\n\nCitations:\n${section.sourceMessage.sources?.map((source: any, i: any) => `[${i + 1}] ${source.metadata.url}`).join(`\n`)}`}`;
         navigator.clipboard.writeText(contentToCopy);
         setCopied(true);
         setTimeout(() => setCopied(false), 1000);

src/components/MessageBox.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 /* eslint-disable @next/next/no-img-element */
-import React, { MutableRefObject, useEffect, useState } from 'react';
-import { Message } from './ChatWindow';
+import React, { MutableRefObject } from 'react';
 import { cn } from '@/lib/utils';
 import {
   BookCopy,
@@ -20,7 +19,8 @@ import SearchImages from './SearchImages';
 import SearchVideos from './SearchVideos';
 import { useSpeech } from 'react-text-to-speech';
 import ThinkBox from './ThinkBox';
-import { useChat } from '@/lib/hooks/useChat';
+import { useChat, Section } from '@/lib/hooks/useChat';
+import Citation from './Citation';
 
 const ThinkTagProcessor = ({
   children,
@@ -35,91 +35,21 @@ const ThinkTagProcessor = ({
 };
 
 const MessageBox = ({
-  message,
-  messageIndex,
+  section,
+  sectionIndex,
   dividerRef,
   isLast,
 }: {
-  message: Message;
-  messageIndex: number;
+  section: Section;
+  sectionIndex: number;
   dividerRef?: MutableRefObject<HTMLDivElement | null>;
   isLast: boolean;
 }) => {
-  const { loading, messages: history, sendMessage, rewrite } = useChat();
+  const { loading, chatTurns, sendMessage, rewrite } = useChat();
 
-  const [parsedMessage, setParsedMessage] = useState(message.content);
-  const [speechMessage, setSpeechMessage] = useState(message.content);
-  const [thinkingEnded, setThinkingEnded] = useState(false);
-
-  useEffect(() => {
-    const citationRegex = /\[([^\]]+)\]/g;
-    const regex = /\[(\d+)\]/g;
-    let processedMessage = message.content;
-
-    if (message.role === 'assistant' && message.content.includes('<think>')) {
-      const openThinkTag = processedMessage.match(/<think>/g)?.length || 0;
-      const closeThinkTag = processedMessage.match(/<\/think>/g)?.length || 0;
-
-      if (openThinkTag > closeThinkTag) {
-        processedMessage += '</think> <a> </a>'; // The extra <a> </a> is to prevent the the think component from looking bad
-      }
-    }
-
-    if (message.role === 'assistant' && message.content.includes('</think>')) {
-      setThinkingEnded(true);
-    }
-
-    if (
-      message.role === 'assistant' &&
-      message?.sources &&
-      message.sources.length > 0
-    ) {
-      setParsedMessage(
-        processedMessage.replace(
-          citationRegex,
-          (_, capturedContent: string) => {
-            const numbers = capturedContent
-              .split(',')
-              .map((numStr) => numStr.trim());
-
-            const linksHtml = numbers
-              .map((numStr) => {
-                const number = parseInt(numStr);
-
-                if (isNaN(number) || number <= 0) {
-                  return `[${numStr}]`;
-                }
-
-                const source = message.sources?.[number - 1];
-                const url = source?.metadata?.url;
-
-                if (url) {
-                  return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
-                } else {
-                  return ``;
-                }
-              })
-              .join('');
-
-            return linksHtml;
-          },
-        ),
-      );
-      setSpeechMessage(message.content.replace(regex, ''));
-      return;
-    } else if (
-      message.role === 'assistant' &&
-      message?.sources &&
-      message.sources.length === 0
-    ) {
-      setParsedMessage(processedMessage.replace(regex, ''));
-      setSpeechMessage(message.content.replace(regex, ''));
-      return;
-    }
-
-    setSpeechMessage(message.content.replace(regex, ''));
-    setParsedMessage(processedMessage);
-  }, [message.content, message.sources, message.role]);
+  const parsedMessage = section.parsedAssistantMessage || '';
+  const speechMessage = section.speechMessage || '';
+  const thinkingEnded = section.thinkingEnded;
 
   const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
 
@@ -131,32 +61,33 @@ const MessageBox = ({
           thinkingEnded: thinkingEnded,
         },
       },
+      citation: {
+        component: Citation,
+      },
     },
   };
 
   return (
-    <div>
-      {message.role === 'user' && (
-        <div
-          className={cn(
-            'w-full',
-            messageIndex === 0 ? 'pt-16' : 'pt-8',
-            'break-words',
-          )}
-        >
-          <h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
-            {message.content}
-          </h2>
-        </div>
-      )}
+    <div className="space-y-6">
+      <div
+        className={cn(
+          'w-full',
+          sectionIndex === 0 ? 'pt-16' : 'pt-8',
+          'break-words',
+        )}
+      >
+        <h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
+          {section.userMessage.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-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"
+        >
+          {section.sourceMessage &&
+            section.sourceMessage.sources.length > 0 && (
               <div className="flex flex-col space-y-2">
                 <div className="flex flex-row items-center space-x-2">
                   <BookCopy className="text-black dark:text-white" size={20} />
@@ -164,10 +95,12 @@ const MessageBox = ({
                     Sources
                   </h3>
                 </div>
-                <MessageSources sources={message.sources} />
+                <MessageSources sources={section.sourceMessage.sources} />
               </div>
             )}
-            <div className="flex flex-col space-y-2">
+
+          <div className="flex flex-col space-y-2">
+            {section.sourceMessage && (
               <div className="flex flex-row items-center space-x-2">
                 <Disc3
                   className={cn(
@@ -180,100 +113,114 @@ const MessageBox = ({
                   Answer
                 </h3>
               </div>
+            )}
 
-              <Markdown
-                className={cn(
-                  'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
-                  'max-w-none break-words text-black dark:text-white',
-                )}
-                options={markdownOverrides}
-              >
-                {parsedMessage}
-              </Markdown>
-              {loading && isLast ? null : (
-                <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
-                  <div className="flex flex-row items-center space-x-1">
-                    {/*  <button className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black text-black dark:hover:text-white">
-                      <Share size={18} />
-                    </button> */}
-                    <Rewrite rewrite={rewrite} messageId={message.messageId} />
-                  </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-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
-                    >
-                      {speechStatus === 'started' ? (
-                        <StopCircle size={18} />
-                      ) : (
-                        <Volume2 size={18} />
-                      )}
-                    </button>
-                  </div>
-                </div>
-              )}
-              {isLast &&
-                message.suggestions &&
-                message.suggestions.length > 0 &&
-                message.role === 'assistant' &&
-                !loading && (
-                  <>
-                    <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
-                    <div className="flex flex-col space-y-3 text-black dark:text-white">
-                      <div className="flex flex-row items-center space-x-2 mt-4">
-                        <Layers3 />
-                        <h3 className="text-xl font-medium">Related</h3>
-                      </div>
-                      <div className="flex flex-col space-y-3">
-                        {message.suggestions.map((suggestion, i) => (
-                          <div
-                            className="flex flex-col space-y-3 text-sm"
-                            key={i}
-                          >
-                            <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
-                            <div
-                              onClick={() => {
-                                sendMessage(suggestion);
-                              }}
-                              className="cursor-pointer flex flex-row justify-between font-medium space-x-2 items-center"
-                            >
-                              <p className="transition duration-200 hover:text-[#24A0ED]">
-                                {suggestion}
-                              </p>
-                              <Plus
-                                size={20}
-                                className="text-[#24A0ED] flex-shrink-0"
-                              />
-                            </div>
-                          </div>
-                        ))}
-                      </div>
+            {section.assistantMessage && (
+              <>
+                <Markdown
+                  className={cn(
+                    'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
+                    'max-w-none break-words text-black dark:text-white',
+                  )}
+                  options={markdownOverrides}
+                >
+                  {parsedMessage}
+                </Markdown>
+
+                {loading && isLast ? null : (
+                  <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
+                    <div className="flex flex-row items-center space-x-1">
+                      <Rewrite
+                        rewrite={rewrite}
+                        messageId={section.assistantMessage.messageId}
+                      />
                     </div>
-                  </>
+                    <div className="flex flex-row items-center space-x-1">
+                      <Copy
+                        initialMessage={section.assistantMessage.content}
+                        section={section}
+                      />
+                      <button
+                        onClick={() => {
+                          if (speechStatus === 'started') {
+                            stop();
+                          } else {
+                            start();
+                          }
+                        }}
+                        className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark: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}
-              chatHistory={history.slice(0, messageIndex - 1)}
-              messageId={message.messageId}
-            />
-            <SearchVideos
-              chatHistory={history.slice(0, messageIndex - 1)}
-              query={history[messageIndex - 1].content}
-              messageId={message.messageId}
-            />
+
+                {isLast &&
+                  section.suggestions &&
+                  section.suggestions.length > 0 &&
+                  section.assistantMessage &&
+                  !loading && (
+                    <>
+                      <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
+                      <div className="flex flex-col space-y-3 text-black dark:text-white">
+                        <div className="flex flex-row items-center space-x-2 mt-4">
+                          <Layers3 />
+                          <h3 className="text-xl font-medium">Related</h3>
+                        </div>
+                        <div className="flex flex-col space-y-3">
+                          {section.suggestions.map(
+                            (suggestion: string, i: number) => (
+                              <div
+                                className="flex flex-col space-y-3 text-sm"
+                                key={i}
+                              >
+                                <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
+                                <div
+                                  onClick={() => {
+                                    sendMessage(suggestion);
+                                  }}
+                                  className="cursor-pointer flex flex-row justify-between font-medium space-x-2 items-center"
+                                >
+                                  <p className="transition duration-200 hover:text-[#24A0ED]">
+                                    {suggestion}
+                                  </p>
+                                  <Plus
+                                    size={20}
+                                    className="text-[#24A0ED] flex-shrink-0"
+                                  />
+                                </div>
+                              </div>
+                            ),
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  )}
+              </>
+            )}
           </div>
         </div>
-      )}
+
+        {section.assistantMessage && (
+          <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={section.userMessage.content}
+              chatHistory={chatTurns.slice(0, sectionIndex * 2)}
+              messageId={section.assistantMessage.messageId}
+            />
+            <SearchVideos
+              chatHistory={chatTurns.slice(0, sectionIndex * 2)}
+              query={section.userMessage.content}
+              messageId={section.assistantMessage.messageId}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 };

src/components/MessageInput.tsx

@@ -64,8 +64,8 @@ const MessageInput = () => {
         }
       }}
       className={cn(
-        'bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-hidden border border-light-200 dark:border-dark-200',
-        mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
+        'bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300',
+        mode === 'multi' ? 'flex-col rounded-2xl' : 'flex-row rounded-full',
       )}
     >
       {mode === 'single' && <AttachSmall />}

src/components/MessageInputActions/Attach.tsx

@@ -133,7 +133,10 @@ const Attach = ({ showText }: { showText?: boolean }) => {
                   className="flex flex-row items-center justify-start w-full space-x-3 p-3"
                 >
                   <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
-                    <File size={16} className="text-black/70 dark:text-white/70" />
+                    <File
+                      size={16}
+                      className="text-black/70 dark:text-white/70"
+                    />
                   </div>
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25

src/components/Navbar.tsx

@@ -10,7 +10,7 @@ import {
   Transition,
 } from '@headlessui/react';
 import jsPDF from 'jspdf';
-import { useChat } from '@/lib/hooks/useChat';
+import { useChat, Section } from '@/lib/hooks/useChat';
 
 const downloadFile = (filename: string, content: string, type: string) => {
   const blob = new Blob([content], { type });
@@ -26,19 +26,37 @@ const downloadFile = (filename: string, content: string, type: string) => {
   }, 0);
 };
 
-const exportAsMarkdown = (messages: Message[], title: string) => {
-  const date = new Date(messages[0]?.createdAt || Date.now()).toLocaleString();
+const exportAsMarkdown = (sections: Section[], title: string) => {
+  const date = new Date(
+    sections[0]?.userMessage?.createdAt || Date.now(),
+  ).toLocaleString();
   let md = `# 💬 Chat Export: ${title}\n\n`;
   md += `*Exported on: ${date}*\n\n---\n`;
-  messages.forEach((msg, idx) => {
-    md += `\n---\n`;
-    md += `**${msg.role === 'user' ? '🧑 User' : '🤖 Assistant'}**  
+
+  sections.forEach((section, idx) => {
+    if (section.userMessage) {
+      md += `\n---\n`;
+      md += `**🧑 User**  
 `;
-    md += `*${new Date(msg.createdAt).toLocaleString()}*\n\n`;
-    md += `> ${msg.content.replace(/\n/g, '\n> ')}\n`;
-    if (msg.sources && msg.sources.length > 0) {
+      md += `*${new Date(section.userMessage.createdAt).toLocaleString()}*\n\n`;
+      md += `> ${section.userMessage.content.replace(/\n/g, '\n> ')}\n`;
+    }
+
+    if (section.assistantMessage) {
+      md += `\n---\n`;
+      md += `**🤖 Assistant**  
+`;
+      md += `*${new Date(section.assistantMessage.createdAt).toLocaleString()}*\n\n`;
+      md += `> ${section.assistantMessage.content.replace(/\n/g, '\n> ')}\n`;
+    }
+
+    if (
+      section.sourceMessage &&
+      section.sourceMessage.sources &&
+      section.sourceMessage.sources.length > 0
+    ) {
       md += `\n**Citations:**\n`;
-      msg.sources.forEach((src: any, i: number) => {
+      section.sourceMessage.sources.forEach((src: any, i: number) => {
         const url = src.metadata?.url || '';
         md += `- [${i + 1}] [${url}](${url})\n`;
       });
@@ -48,9 +66,11 @@ const exportAsMarkdown = (messages: Message[], title: string) => {
   downloadFile(`${title || 'chat'}.md`, md, 'text/markdown');
 };
 
-const exportAsPDF = (messages: Message[], title: string) => {
+const exportAsPDF = (sections: Section[], title: string) => {
   const doc = new jsPDF();
-  const date = new Date(messages[0]?.createdAt || Date.now()).toLocaleString();
+  const date = new Date(
+    sections[0]?.userMessage?.createdAt || Date.now(),
+  ).toLocaleString();
   let y = 15;
   const pageHeight = doc.internal.pageSize.height;
   doc.setFontSize(18);
@@ -64,57 +84,109 @@ const exportAsPDF = (messages: Message[], title: string) => {
   doc.line(10, y, 200, y);
   y += 6;
   doc.setTextColor(30);
-  messages.forEach((msg, idx) => {
-    if (y > pageHeight - 30) {
-      doc.addPage();
-      y = 15;
-    }
-    doc.setFont('helvetica', 'bold');
-    doc.text(`${msg.role === 'user' ? 'User' : 'Assistant'}`, 10, y);
-    doc.setFont('helvetica', 'normal');
-    doc.setFontSize(10);
-    doc.setTextColor(120);
-    doc.text(`${new Date(msg.createdAt).toLocaleString()}`, 40, y);
-    y += 6;
-    doc.setTextColor(30);
-    doc.setFontSize(12);
-    const lines = doc.splitTextToSize(msg.content, 180);
-    for (let i = 0; i < lines.length; i++) {
-      if (y > pageHeight - 20) {
+
+  sections.forEach((section, idx) => {
+    if (section.userMessage) {
+      if (y > pageHeight - 30) {
         doc.addPage();
         y = 15;
       }
-      doc.text(lines[i], 12, y);
+      doc.setFont('helvetica', 'bold');
+      doc.text('User', 10, y);
+      doc.setFont('helvetica', 'normal');
+      doc.setFontSize(10);
+      doc.setTextColor(120);
+      doc.text(
+        `${new Date(section.userMessage.createdAt).toLocaleString()}`,
+        40,
+        y,
+      );
       y += 6;
-    }
-    if (msg.sources && msg.sources.length > 0) {
-      doc.setFontSize(11);
-      doc.setTextColor(80);
-      if (y > pageHeight - 20) {
-        doc.addPage();
-        y = 15;
-      }
-      doc.text('Citations:', 12, y);
-      y += 5;
-      msg.sources.forEach((src: any, i: number) => {
-        const url = src.metadata?.url || '';
-        if (y > pageHeight - 15) {
+      doc.setTextColor(30);
+      doc.setFontSize(12);
+      const userLines = doc.splitTextToSize(section.userMessage.content, 180);
+      for (let i = 0; i < userLines.length; i++) {
+        if (y > pageHeight - 20) {
           doc.addPage();
           y = 15;
         }
-        doc.text(`- [${i + 1}] ${url}`, 15, y);
-        y += 5;
-      });
+        doc.text(userLines[i], 12, y);
+        y += 6;
+      }
+      y += 6;
+      doc.setDrawColor(230);
+      if (y > pageHeight - 10) {
+        doc.addPage();
+        y = 15;
+      }
+      doc.line(10, y, 200, y);
+      y += 4;
+    }
+
+    if (section.assistantMessage) {
+      if (y > pageHeight - 30) {
+        doc.addPage();
+        y = 15;
+      }
+      doc.setFont('helvetica', 'bold');
+      doc.text('Assistant', 10, y);
+      doc.setFont('helvetica', 'normal');
+      doc.setFontSize(10);
+      doc.setTextColor(120);
+      doc.text(
+        `${new Date(section.assistantMessage.createdAt).toLocaleString()}`,
+        40,
+        y,
+      );
+      y += 6;
       doc.setTextColor(30);
+      doc.setFontSize(12);
+      const assistantLines = doc.splitTextToSize(
+        section.assistantMessage.content,
+        180,
+      );
+      for (let i = 0; i < assistantLines.length; i++) {
+        if (y > pageHeight - 20) {
+          doc.addPage();
+          y = 15;
+        }
+        doc.text(assistantLines[i], 12, y);
+        y += 6;
+      }
+
+      if (
+        section.sourceMessage &&
+        section.sourceMessage.sources &&
+        section.sourceMessage.sources.length > 0
+      ) {
+        doc.setFontSize(11);
+        doc.setTextColor(80);
+        if (y > pageHeight - 20) {
+          doc.addPage();
+          y = 15;
+        }
+        doc.text('Citations:', 12, y);
+        y += 5;
+        section.sourceMessage.sources.forEach((src: any, i: number) => {
+          const url = src.metadata?.url || '';
+          if (y > pageHeight - 15) {
+            doc.addPage();
+            y = 15;
+          }
+          doc.text(`- [${i + 1}] ${url}`, 15, y);
+          y += 5;
+        });
+        doc.setTextColor(30);
+      }
+      y += 6;
+      doc.setDrawColor(230);
+      if (y > pageHeight - 10) {
+        doc.addPage();
+        y = 15;
+      }
+      doc.line(10, y, 200, y);
+      y += 4;
     }
-    y += 6;
-    doc.setDrawColor(230);
-    if (y > pageHeight - 10) {
-      doc.addPage();
-      y = 15;
-    }
-    doc.line(10, y, 200, y);
-    y += 4;
   });
   doc.save(`${title || 'chat'}.pdf`);
 };
@@ -123,29 +195,29 @@ const Navbar = () => {
   const [title, setTitle] = useState<string>('');
   const [timeAgo, setTimeAgo] = useState<string>('');
 
-  const { messages, chatId } = useChat();
+  const { sections, chatId } = useChat();
 
   useEffect(() => {
-    if (messages.length > 0) {
+    if (sections.length > 0 && sections[0].userMessage) {
       const newTitle =
-        messages[0].content.length > 20
-          ? `${messages[0].content.substring(0, 20).trim()}...`
-          : messages[0].content;
+        sections[0].userMessage.content.length > 20
+          ? `${sections[0].userMessage.content.substring(0, 20).trim()}...`
+          : sections[0].userMessage.content;
       setTitle(newTitle);
       const newTimeAgo = formatTimeDifference(
         new Date(),
-        messages[0].createdAt,
+        sections[0].userMessage.createdAt,
       );
       setTimeAgo(newTimeAgo);
     }
-  }, [messages]);
+  }, [sections]);
 
   useEffect(() => {
     const intervalId = setInterval(() => {
-      if (messages.length > 0) {
+      if (sections.length > 0 && sections[0].userMessage) {
         const newTimeAgo = formatTimeDifference(
           new Date(),
-          messages[0].createdAt,
+          sections[0].userMessage.createdAt,
         );
         setTimeAgo(newTimeAgo);
       }
@@ -156,7 +228,7 @@ const Navbar = () => {
   }, []);
 
   return (
-    <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-[104px] lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b bg-light-primary dark:bg-dark-primary border-light-100 dark:border-dark-200">
+    <div className="mx-auto max-w-screen-2xl fixed z-40 top-0 left-0 right-0 px-4 lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b bg-light-primary dark:bg-dark-primary border-light-100 dark:border-dark-200">
       <a
         href="/"
         className="active:scale-95 transition duration-100 cursor-pointer lg:hidden"
@@ -187,14 +259,14 @@ const Navbar = () => {
               <div className="flex flex-col py-3 px-3 gap-2">
                 <button
                   className="flex items-center gap-2 px-4 py-2 text-left hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors text-black dark:text-white rounded-lg font-medium"
-                  onClick={() => exportAsMarkdown(messages, title || '')}
+                  onClick={() => exportAsMarkdown(sections, title || '')}
                 >
                   <FileText size={17} className="text-[#24A0ED]" />
                   Export as Markdown
                 </button>
                 <button
                   className="flex items-center gap-2 px-4 py-2 text-left hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors text-black dark:text-white rounded-lg font-medium"
-                  onClick={() => exportAsPDF(messages, title || '')}
+                  onClick={() => exportAsPDF(sections, title || '')}
                 >
                   <FileDown size={17} className="text-[#24A0ED]" />
                   Export as PDF

src/components/NewsArticleWidget.tsx

@@ -27,7 +27,7 @@ const NewsArticleWidget = () => {
   }, []);
 
   return (
-    <div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3 overflow-hidden">
+    <div className="bg-light-secondary dark:bg-dark-secondary rounded-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-stretch w-full h-24 min-h-[96px] max-h-[96px] p-0 overflow-hidden">
       {loading ? (
         <>
           <div className="animate-pulse flex flex-row items-center w-full h-full">
@@ -43,22 +43,24 @@ const NewsArticleWidget = () => {
       ) : article ? (
         <a
           href={`/?q=Summary: ${article.url}`}
-          className="flex flex-row items-center w-full h-full group"
+          className="flex flex-row items-stretch w-full h-full relative overflow-hidden group"
         >
-          <img
-            className="object-cover rounded-lg w-16 min-w-16 max-w-16 h-16 min-h-16 max-h-16 border border-light-200 dark:border-dark-200 bg-light-200 dark:bg-dark-200 group-hover:opacity-90 transition"
-            src={
-              new URL(article.thumbnail).origin +
-              new URL(article.thumbnail).pathname +
-              `?id=${new URL(article.thumbnail).searchParams.get('id')}`
-            }
-            alt={article.title}
-          />
-          <div className="flex flex-col justify-center flex-1 h-full pl-3 w-0">
-            <div className="font-bold text-xs text-black dark:text-white leading-tight truncate overflow-hidden whitespace-nowrap">
+          <div className="relative w-24 min-w-24 max-w-24 h-full overflow-hidden">
+            <img
+              className="object-cover w-full h-full bg-light-200 dark:bg-dark-200 group-hover:scale-110 transition-transform duration-300"
+              src={
+                new URL(article.thumbnail).origin +
+                new URL(article.thumbnail).pathname +
+                `?id=${new URL(article.thumbnail).searchParams.get('id')}`
+              }
+              alt={article.title}
+            />
+          </div>
+          <div className="flex flex-col justify-center flex-1 px-3 py-2">
+            <div className="font-semibold text-xs text-black dark:text-white leading-tight line-clamp-2 mb-1">
               {article.title}
             </div>
-            <p className="text-black/70 dark:text-white/70 text-xs leading-snug truncate overflow-hidden whitespace-nowrap">
+            <p className="text-black/60 dark:text-white/60 text-[10px] leading-relaxed line-clamp-2">
               {article.content}
             </p>
           </div>

src/components/Sidebar.tsx

@@ -40,7 +40,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
   return (
     <div>
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
-        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8">
+        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8 mx-2 my-2 rounded-2xl shadow-sm shadow-light-200/10 dark:shadow-black/25">
           <a href="/">
             <SquarePen className="cursor-pointer" />
           </a>

src/components/WeatherWidget.tsx

@@ -15,61 +15,61 @@ const WeatherWidget = () => {
 
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    const getApproxLocation = async () => {
-      const res = await fetch('https://ipwhois.app/json/');
-      const data = await res.json();
+  const getApproxLocation = async () => {
+    const res = await fetch('https://ipwhois.app/json/');
+    const data = await res.json();
 
-      return {
-        latitude: data.latitude,
-        longitude: data.longitude,
-        city: data.city,
-      };
+    return {
+      latitude: data.latitude,
+      longitude: data.longitude,
+      city: data.city,
     };
+  };
 
-    const getLocation = async (
-      callback: (location: {
-        latitude: number;
-        longitude: number;
-        city: string;
-      }) => void,
-    ) => {
-      if (navigator.geolocation) {
-        const result = await navigator.permissions.query({
-          name: 'geolocation',
-        });
+  const getLocation = async (
+    callback: (location: {
+      latitude: number;
+      longitude: number;
+      city: string;
+    }) => void,
+  ) => {
+    if (navigator.geolocation) {
+      const result = await navigator.permissions.query({
+        name: 'geolocation',
+      });
 
-        if (result.state === 'granted') {
-          navigator.geolocation.getCurrentPosition(async (position) => {
-            const res = await fetch(
-              `https://api-bdc.io/data/reverse-geocode-client?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}&localityLanguage=en`,
-              {
-                method: 'GET',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
+      if (result.state === 'granted') {
+        navigator.geolocation.getCurrentPosition(async (position) => {
+          const res = await fetch(
+            `https://api-bdc.io/data/reverse-geocode-client?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}&localityLanguage=en`,
+            {
+              method: 'GET',
+              headers: {
+                'Content-Type': 'application/json',
               },
-            );
+            },
+          );
 
-            const data = await res.json();
+          const data = await res.json();
 
-            callback({
-              latitude: position.coords.latitude,
-              longitude: position.coords.longitude,
-              city: data.locality,
-            });
+          callback({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+            city: data.locality,
           });
-        } else if (result.state === 'prompt') {
-          callback(await getApproxLocation());
-          navigator.geolocation.getCurrentPosition((position) => {});
-        } else if (result.state === 'denied') {
-          callback(await getApproxLocation());
-        }
-      } else {
+        });
+      } else if (result.state === 'prompt') {
+        callback(await getApproxLocation());
+        navigator.geolocation.getCurrentPosition((position) => {});
+      } else if (result.state === 'denied') {
         callback(await getApproxLocation());
       }
-    };
+    } else {
+      callback(await getApproxLocation());
+    }
+  };
 
+  const updateWeather = async () => {
     getLocation(async (location) => {
       const res = await fetch(`/api/weather`, {
         method: 'POST',
@@ -100,10 +100,16 @@ const WeatherWidget = () => {
       });
       setLoading(false);
     });
+  };
+
+  useEffect(() => {
+    updateWeather();
+    const intervalId = setInterval(updateWeather, 2 * 60 * 1000);
+    return () => clearInterval(intervalId);
   }, []);
 
   return (
-    <div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3">
+    <div className="bg-light-secondary dark:bg-dark-secondary rounded-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3">
       {loading ? (
         <>
           <div className="flex flex-col items-center justify-center w-16 min-w-16 max-w-16 h-full animate-pulse">
@@ -134,22 +140,24 @@ const WeatherWidget = () => {
               {data.temperature}°{data.temperatureUnit}
             </span>
           </div>
-          <div className="flex flex-col justify-between flex-1 h-full py-1">
+          <div className="flex flex-col justify-between flex-1 h-full py-2">
             <div className="flex flex-row items-center justify-between">
-              <span className="text-xs font-medium text-black dark:text-white">
+              <span className="text-sm font-semibold text-black dark:text-white">
                 {data.location}
               </span>
-              <span className="flex items-center text-xs text-black/60 dark:text-white/60">
+              <span className="flex items-center text-xs text-black/60 dark:text-white/60 font-medium">
                 <Wind className="w-3 h-3 mr-1" />
                 {data.windSpeed} {data.windSpeedUnit}
               </span>
             </div>
-            <span className="text-xs text-black/60 dark:text-white/60 mt-1">
+            <span className="text-xs text-black/50 dark:text-white/50 italic">
               {data.condition}
             </span>
-            <div className="flex flex-row justify-between w-full mt-auto pt-1 border-t border-light-200 dark:border-dark-200 text-xs text-black/60 dark:text-white/60">
-              <span>Humidity: {data.humidity}%</span>
-              <span>Now</span>
+            <div className="flex flex-row justify-between w-full mt-auto pt-2 border-t border-light-200/50 dark:border-dark-200/50 text-xs text-black/50 dark:text-white/50 font-medium">
+              <span>Humidity {data.humidity}%</span>
+              <span className="font-semibold text-black/70 dark:text-white/70">
+                Now
+              </span>
             </div>
           </div>
         </>

src/lib/actions.ts

@@ -1,6 +1,6 @@
 import { Message } from '@/components/ChatWindow';
 
-export const getSuggestions = async (chatHisory: Message[]) => {
+export const getSuggestions = async (chatHistory: Message[]) => {
   const chatModel = localStorage.getItem('chatModel');
   const chatModelProvider = localStorage.getItem('chatModelProvider');
 
@@ -13,7 +13,7 @@ export const getSuggestions = async (chatHisory: Message[]) => {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
-      chatHistory: chatHisory,
+      chatHistory: chatHistory,
       chatModel: {
         provider: chatModelProvider,
         model: chatModel,

src/lib/db/schema.ts

@@ -1,15 +1,23 @@
 import { sql } from 'drizzle-orm';
 import { text, integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+import { Document } from 'langchain/document';
 
 export const messages = sqliteTable('messages', {
   id: integer('id').primaryKey(),
-  content: text('content').notNull(),
+  role: text('type', { enum: ['assistant', 'user', 'source'] }).notNull(),
   chatId: text('chatId').notNull(),
+  createdAt: text('createdAt')
+    .notNull()
+    .default(sql`CURRENT_TIMESTAMP`),
   messageId: text('messageId').notNull(),
-  role: text('type', { enum: ['assistant', 'user'] }),
-  metadata: text('metadata', {
+
+  content: text('content'),
+
+  sources: text('sources', {
     mode: 'json',
-  }),
+  })
+    .$type<Document[]>()
+    .default(sql`'[]'`),
 });
 
 interface File {

src/lib/hooks/useChat.tsx

@@ -1,15 +1,40 @@
 'use client';
 
-import { Message } from '@/components/ChatWindow';
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import {
+  AssistantMessage,
+  ChatTurn,
+  Message,
+  SourceMessage,
+  SuggestionMessage,
+  UserMessage,
+} from '@/components/ChatWindow';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import crypto from 'crypto';
 import { useSearchParams } from 'next/navigation';
 import { toast } from 'sonner';
-import { Document } from '@langchain/core/documents';
 import { getSuggestions } from '../actions';
 
+export type Section = {
+  userMessage: UserMessage;
+  assistantMessage: AssistantMessage | undefined;
+  parsedAssistantMessage: string | undefined;
+  speechMessage: string | undefined;
+  sourceMessage: SourceMessage | undefined;
+  thinkingEnded: boolean;
+  suggestions?: string[];
+};
+
 type ChatContext = {
   messages: Message[];
+  chatTurns: ChatTurn[];
+  sections: Section[];
   chatHistory: [string, string][];
   files: File[];
   fileIds: string[];
@@ -242,22 +267,23 @@ const loadMessages = async (
 
   const data = await res.json();
 
-  const messages = data.messages.map((msg: any) => {
-    return {
-      ...msg,
-      ...JSON.parse(msg.metadata),
-    };
-  }) as Message[];
+  const messages = data.messages as Message[];
 
   setMessages(messages);
 
-  const history = messages.map((msg) => {
+  const chatTurns = messages.filter(
+    (msg): msg is ChatTurn => msg.role === 'user' || msg.role === 'assistant',
+  );
+
+  const history = chatTurns.map((msg) => {
     return [msg.role, msg.content];
   }) as [string, string][];
 
   console.debug(new Date(), 'app:messages_loaded');
 
-  document.title = messages[0].content;
+  if (chatTurns.length > 0) {
+    document.title = chatTurns[0].content;
+  }
 
   const files = data.chat.files.map((file: any) => {
     return {
@@ -287,6 +313,8 @@ export const chatContext = createContext<ChatContext>({
   loading: false,
   messageAppeared: false,
   messages: [],
+  chatTurns: [],
+  sections: [],
   notFound: false,
   optimizationMode: '',
   rewrite: () => {},
@@ -345,6 +373,122 @@ export const ChatProvider = ({
 
   const messagesRef = useRef<Message[]>([]);
 
+  const chatTurns = useMemo((): ChatTurn[] => {
+    return messages.filter(
+      (msg): msg is ChatTurn => msg.role === 'user' || msg.role === 'assistant',
+    );
+  }, [messages]);
+
+  const sections = useMemo<Section[]>(() => {
+    const sections: Section[] = [];
+
+    messages.forEach((msg, i) => {
+      if (msg.role === 'user') {
+        const nextUserMessageIndex = messages.findIndex(
+          (m, j) => j > i && m.role === 'user',
+        );
+
+        const aiMessage = messages.find(
+          (m, j) =>
+            j > i &&
+            m.role === 'assistant' &&
+            (nextUserMessageIndex === -1 || j < nextUserMessageIndex),
+        ) as AssistantMessage | undefined;
+
+        const sourceMessage = messages.find(
+          (m, j) =>
+            j > i &&
+            m.role === 'source' &&
+            (nextUserMessageIndex === -1 || j < nextUserMessageIndex),
+        ) as SourceMessage | undefined;
+
+        let thinkingEnded = false;
+        let processedMessage = aiMessage?.content ?? '';
+        let speechMessage = aiMessage?.content ?? '';
+        let suggestions: string[] = [];
+
+        if (aiMessage) {
+          const citationRegex = /\[([^\]]+)\]/g;
+          const regex = /\[(\d+)\]/g;
+
+          if (processedMessage.includes('<think>')) {
+            const openThinkTag =
+              processedMessage.match(/<think>/g)?.length || 0;
+            const closeThinkTag =
+              processedMessage.match(/<\/think>/g)?.length || 0;
+
+            if (openThinkTag > closeThinkTag) {
+              processedMessage += '</think> <a> </a>';
+            }
+          }
+
+          if (aiMessage.content.includes('</think>')) {
+            thinkingEnded = true;
+          }
+
+          if (sourceMessage && sourceMessage.sources.length > 0) {
+            processedMessage = processedMessage.replace(
+              citationRegex,
+              (_, capturedContent: string) => {
+                const numbers = capturedContent
+                  .split(',')
+                  .map((numStr) => numStr.trim());
+
+                const linksHtml = numbers
+                  .map((numStr) => {
+                    const number = parseInt(numStr);
+
+                    if (isNaN(number) || number <= 0) {
+                      return `[${numStr}]`;
+                    }
+
+                    const source = sourceMessage.sources?.[number - 1];
+                    const url = source?.metadata?.url;
+
+                    if (url) {
+                      return `<citation href="${url}">${numStr}</citation>`;
+                    } else {
+                      return ``;
+                    }
+                  })
+                  .join('');
+
+                return linksHtml;
+              },
+            );
+            speechMessage = aiMessage.content.replace(regex, '');
+          } else {
+            processedMessage = processedMessage.replace(regex, '');
+            speechMessage = aiMessage.content.replace(regex, '');
+          }
+
+          const suggestionMessage = messages.find(
+            (m, j) =>
+              j > i &&
+              m.role === 'suggestion' &&
+              (nextUserMessageIndex === -1 || j < nextUserMessageIndex),
+          ) as SuggestionMessage | undefined;
+
+          if (suggestionMessage && suggestionMessage.suggestions.length > 0) {
+            suggestions = suggestionMessage.suggestions;
+          }
+        }
+
+        sections.push({
+          userMessage: msg,
+          assistantMessage: aiMessage,
+          sourceMessage: sourceMessage,
+          parsedAssistantMessage: processedMessage,
+          speechMessage,
+          thinkingEnded,
+          suggestions: suggestions,
+        });
+      }
+    });
+
+    return sections;
+  }, [messages]);
+
   useEffect(() => {
     checkConfig(
       setChatModelProvider,
@@ -395,16 +539,21 @@ export const ChatProvider = ({
 
   const rewrite = (messageId: string) => {
     const index = messages.findIndex((msg) => msg.messageId === messageId);
+    const chatTurnsIndex = chatTurns.findIndex(
+      (msg) => msg.messageId === messageId,
+    );
 
     if (index === -1) return;
 
-    const message = messages[index - 1];
+    const message = chatTurns[chatTurnsIndex - 1];
 
     setMessages((prev) => {
-      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+      return [
+        ...prev.slice(0, messages.length > 2 ? messages.indexOf(message) : 0),
+      ];
     });
     setChatHistory((prev) => {
-      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+      return [...prev.slice(0, chatTurns.length > 2 ? chatTurnsIndex - 1 : 0)];
     });
 
     sendMessage(message.content, message.messageId, true);
@@ -430,7 +579,10 @@ export const ChatProvider = ({
     setLoading(true);
     setMessageAppeared(false);
 
-    let sources: Document[] | undefined = undefined;
+    if (messages.length <= 1) {
+      window.history.replaceState(null, '', `/c/${chatId}`);
+    }
+
     let recievedMessage = '';
     let added = false;
 
@@ -455,22 +607,19 @@ export const ChatProvider = ({
       }
 
       if (data.type === 'sources') {
-        sources = data.data;
-        if (!added) {
-          setMessages((prevMessages) => [
-            ...prevMessages,
-            {
-              content: '',
-              messageId: data.messageId,
-              chatId: chatId!,
-              role: 'assistant',
-              sources: sources,
-              createdAt: new Date(),
-            },
-          ]);
-          added = true;
+        setMessages((prevMessages) => [
+          ...prevMessages,
+          {
+            messageId: data.messageId,
+            chatId: chatId!,
+            role: 'source',
+            sources: data.data,
+            createdAt: new Date(),
+          },
+        ]);
+        if (data.data.length > 0) {
+          setMessageAppeared(true);
         }
-        setMessageAppeared(true);
       }
 
       if (data.type === 'message') {
@@ -482,7 +631,6 @@ export const ChatProvider = ({
               messageId: data.messageId,
               chatId: chatId!,
               role: 'assistant',
-              sources: sources,
               createdAt: new Date(),
             },
           ]);
@@ -491,7 +639,10 @@ export const ChatProvider = ({
 
         setMessages((prev) =>
           prev.map((message) => {
-            if (message.messageId === data.messageId) {
+            if (
+              message.messageId === data.messageId &&
+              message.role === 'assistant'
+            ) {
               return { ...message, content: message.content + data.data };
             }
 
@@ -529,21 +680,38 @@ export const ChatProvider = ({
             ?.click();
         }
 
+        /* Check if there are sources after message id's index and no suggestions */
+
+        const userMessageIndex = messagesRef.current.findIndex(
+          (msg) => msg.messageId === messageId && msg.role === 'user',
+        );
+
+        const sourceMessage = messagesRef.current.find(
+          (msg, i) => i > userMessageIndex && msg.role === 'source',
+        ) as SourceMessage | undefined;
+
+        const suggestionMessageIndex = messagesRef.current.findIndex(
+          (msg, i) => i > userMessageIndex && msg.role === 'suggestion',
+        );
+
         if (
-          lastMsg.role === 'assistant' &&
-          lastMsg.sources &&
-          lastMsg.sources.length > 0 &&
-          !lastMsg.suggestions
+          sourceMessage &&
+          sourceMessage.sources.length > 0 &&
+          suggestionMessageIndex == -1
         ) {
           const suggestions = await getSuggestions(messagesRef.current);
-          setMessages((prev) =>
-            prev.map((msg) => {
-              if (msg.messageId === lastMsg.messageId) {
-                return { ...msg, suggestions: suggestions };
-              }
-              return msg;
-            }),
-          );
+          setMessages((prev) => {
+            return [
+              ...prev,
+              {
+                role: 'suggestion',
+                suggestions: suggestions,
+                chatId: chatId!,
+                createdAt: new Date(),
+                messageId: crypto.randomBytes(7).toString('hex'),
+              },
+            ];
+          });
         }
       }
     };
@@ -612,6 +780,8 @@ export const ChatProvider = ({
     <chatContext.Provider
       value={{
         messages,
+        chatTurns,
+        sections,
         chatHistory,
         files,
         fileIds,

src/lib/prompts/academicSearch.ts

@@ -1,69 +0,0 @@
-export const academicSearchRetrieverPrompt = `
-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:
-`;
-
-export const academicSearchResponsePrompt = `
-   You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
-
-    Your task is to provide answers that are:
-    - **Informative and relevant**: Thoroughly address the user's query using the given context.
-    - **Well-structured**: Include clear headings and subheadings, and use a professional tone to present information concisely and logically.
-    - **Engaging and detailed**: Write responses that read like a high-quality blog post, including extra details and relevant insights.
-    - **Cited and credible**: Use inline citations with [number] notation to refer to the context source(s) for each fact or detail included.
-    - **Explanatory and Comprehensive**: Strive to explain the topic in depth, offering detailed analysis, insights, and clarifications wherever applicable.
-
-    ### Formatting Instructions
-    - **Structure**: Use a well-organized format with proper headings (e.g., "## Example heading 1" or "## Example heading 2"). Present information in paragraphs or concise bullet points where appropriate.
-    - **Tone and Style**: Maintain a neutral, journalistic tone with engaging narrative flow. Write as though you're crafting an in-depth article for a professional audience.
-    - **Markdown Usage**: Format your response with Markdown for clarity. Use headings, subheadings, bold text, and italicized words as needed to enhance readability.
-    - **Length and Depth**: Provide comprehensive coverage of the topic. Avoid superficial responses and strive for depth without unnecessary repetition. Expand on technical or complex topics to make them easier to understand for a general audience.
-    - **No main heading/title**: Start your response directly with the introduction unless asked to provide a specific title.
-    - **Conclusion or Summary**: Include a concluding paragraph that synthesizes the provided information or suggests potential next steps, where appropriate.
-
-    ### Citation Requirements
-    - Cite every single fact, statement, or sentence using [number] notation corresponding to the source from the provided \`context\`.
-    - Integrate citations naturally at the end of sentences or clauses as appropriate. For example, "The Eiffel Tower is one of the most visited landmarks in the world[1]."
-    - Ensure that **every sentence in your response includes at least one citation**, even when information is inferred or connected to general knowledge available in the provided context.
-    - Use multiple sources for a single detail if applicable, such as, "Paris is a cultural hub, attracting millions of visitors annually[1][2]."
-    - Always prioritize credibility and accuracy by linking all statements back to their respective context sources.
-    - Avoid citing unsupported assumptions or personal interpretations; if no source supports a statement, clearly indicate the limitation.
-
-    ### Special Instructions
-    - If the query involves technical, historical, or complex topics, provide detailed background and explanatory sections to ensure clarity.
-    - If the user provides vague input or if relevant information is missing, explain what additional details might help refine the search.
-    - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
-    - You are set on focus mode 'Academic', this means you will be searching for academic papers and articles on the web.
-    
-    ### User instructions
-    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
-    {systemInstructions}
-
-    ### Example Output
-    - Begin with a brief introduction summarizing the event or query topic.
-    - Follow with detailed sections under clear headings, covering all aspects of the query if possible.
-    - Provide explanations or historical context as needed to enhance understanding.
-    - End with a conclusion or overall perspective if relevant.
-
-    <context>
-    {context}
-    </context>
-
-    Current date & time in ISO format (UTC timezone) is: {date}.
-`;

src/lib/prompts/index.ts

@@ -1,32 +1,13 @@
 import {
-  academicSearchResponsePrompt,
-  academicSearchRetrieverPrompt,
-} from './academicSearch';
-import {
-  redditSearchResponsePrompt,
-  redditSearchRetrieverPrompt,
-} from './redditSearch';
-import { webSearchResponsePrompt, webSearchRetrieverPrompt } from './webSearch';
-import {
-  wolframAlphaSearchResponsePrompt,
-  wolframAlphaSearchRetrieverPrompt,
-} from './wolframAlpha';
+  webSearchResponsePrompt,
+  webSearchRetrieverFewShots,
+  webSearchRetrieverPrompt,
+} from './webSearch';
 import { writingAssistantPrompt } from './writingAssistant';
-import {
-  youtubeSearchResponsePrompt,
-  youtubeSearchRetrieverPrompt,
-} from './youtubeSearch';
 
 export default {
   webSearchResponsePrompt,
   webSearchRetrieverPrompt,
-  academicSearchResponsePrompt,
-  academicSearchRetrieverPrompt,
-  redditSearchResponsePrompt,
-  redditSearchRetrieverPrompt,
-  wolframAlphaSearchResponsePrompt,
-  wolframAlphaSearchRetrieverPrompt,
+  webSearchRetrieverFewShots,
   writingAssistantPrompt,
-  youtubeSearchResponsePrompt,
-  youtubeSearchRetrieverPrompt,
 };

src/lib/prompts/redditSearch.ts

@@ -1,69 +0,0 @@
-export const redditSearchRetrieverPrompt = `
-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:
-`;
-
-export const redditSearchResponsePrompt = `
-    You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
-
-    Your task is to provide answers that are:
-    - **Informative and relevant**: Thoroughly address the user's query using the given context.
-    - **Well-structured**: Include clear headings and subheadings, and use a professional tone to present information concisely and logically.
-    - **Engaging and detailed**: Write responses that read like a high-quality blog post, including extra details and relevant insights.
-    - **Cited and credible**: Use inline citations with [number] notation to refer to the context source(s) for each fact or detail included.
-    - **Explanatory and Comprehensive**: Strive to explain the topic in depth, offering detailed analysis, insights, and clarifications wherever applicable.
-
-    ### Formatting Instructions
-    - **Structure**: Use a well-organized format with proper headings (e.g., "## Example heading 1" or "## Example heading 2"). Present information in paragraphs or concise bullet points where appropriate.
-    - **Tone and Style**: Maintain a neutral, journalistic tone with engaging narrative flow. Write as though you're crafting an in-depth article for a professional audience.
-    - **Markdown Usage**: Format your response with Markdown for clarity. Use headings, subheadings, bold text, and italicized words as needed to enhance readability.
-    - **Length and Depth**: Provide comprehensive coverage of the topic. Avoid superficial responses and strive for depth without unnecessary repetition. Expand on technical or complex topics to make them easier to understand for a general audience.
-    - **No main heading/title**: Start your response directly with the introduction unless asked to provide a specific title.
-    - **Conclusion or Summary**: Include a concluding paragraph that synthesizes the provided information or suggests potential next steps, where appropriate.
-
-    ### Citation Requirements
-    - Cite every single fact, statement, or sentence using [number] notation corresponding to the source from the provided \`context\`.
-    - Integrate citations naturally at the end of sentences or clauses as appropriate. For example, "The Eiffel Tower is one of the most visited landmarks in the world[1]."
-    - Ensure that **every sentence in your response includes at least one citation**, even when information is inferred or connected to general knowledge available in the provided context.
-    - Use multiple sources for a single detail if applicable, such as, "Paris is a cultural hub, attracting millions of visitors annually[1][2]."
-    - Always prioritize credibility and accuracy by linking all statements back to their respective context sources.
-    - Avoid citing unsupported assumptions or personal interpretations; if no source supports a statement, clearly indicate the limitation.
-
-    ### Special Instructions
-    - If the query involves technical, historical, or complex topics, provide detailed background and explanatory sections to ensure clarity.
-    - If the user provides vague input or if relevant information is missing, explain what additional details might help refine the search.
-    - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
-    - You are set on focus mode 'Reddit', this means you will be searching for information, opinions and discussions on the web using Reddit.
-    
-    ### User instructions
-    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
-    {systemInstructions}
-
-    ### Example Output
-    - Begin with a brief introduction summarizing the event or query topic.
-    - Follow with detailed sections under clear headings, covering all aspects of the query if possible.
-    - Provide explanations or historical context as needed to enhance understanding.
-    - End with a conclusion or overall perspective if relevant.
-
-    <context>
-    {context}
-    </context>
-
-    Current date & time in ISO format (UTC timezone) is: {date}.
-`;

src/lib/prompts/webSearch.ts

@@ -1,65 +1,92 @@
+import { BaseMessageLike } from '@langchain/core/messages';
+
 export const webSearchRetrieverPrompt = `
 You are an AI question rephraser. You will be given a conversation and a follow-up question,  you will have to rephrase the follow up question so it is a standalone question and can be used by another LLM to search the web for information to answer it.
 If it is a simple writing task or a greeting (unless the greeting contains a question after it) like Hi, Hello, How are you, etc. than a question then you need to return \`not_needed\` as the response (This is because the LLM won't need to search the web for finding information on this topic).
 If the user asks some question from some URL or wants you to summarize a PDF or a webpage (via URL) you need to return the links inside the \`links\` XML block and the question inside the \`question\` XML block. If the user wants to you to summarize the webpage or the PDF you need to return \`summarize\` inside the \`question\` XML block in place of a question and the link to summarize in the \`links\` XML block.
 You must always return the rephrased question inside the \`question\` XML block, if there are no links in the follow-up question then don't insert a \`links\` XML block in your response.
 
-There are several examples attached for your reference inside the below \`examples\` XML block
+**Note**: All user messages are individual entities and should be treated as such do not mix conversations.
+`;
 
-<examples>
-1. Follow up question: What is the capital of France
-Rephrased question:\`
-<question>
+export const webSearchRetrieverFewShots: BaseMessageLike[] = [
+  [
+    'user',
+    `<conversation>
+</conversation>
+<query>
+What is the capital of France
+</query>`,
+  ],
+  [
+    'assistant',
+    `<question>
 Capital of france
-</question>
-\`
-
-2. Hi, how are you?
-Rephrased question\`
-<question>
+</question>`,
+  ],
+  [
+    'user',
+    `<conversation>
+</conversation>
+<query>
+Hi, how are you?
+</query>`,
+  ],
+  [
+    'assistant',
+    `<question>
 not_needed
-</question>
-\`
-
-3. Follow up question: What is Docker?
-Rephrased question: \`
-<question>
+</question>`,
+  ],
+  [
+    'user',
+    `<conversation>
+</conversation>
+<query>
+What is Docker?
+</query>`,
+  ],
+  [
+    'assistant',
+    `<question>
 What is Docker
+</question>`,
+  ],
+  [
+    'user',
+    `<conversation>
+</conversation>
+<query>
+Can you tell me what is X from https://example.com
+</query>`,
+  ],
+  [
+    'assistant',
+    `<question>
+What is X?
 </question>
-\`
-
-4. Follow up question: Can you tell me what is X from https://example.com
-Rephrased question: \`
-<question>
-Can you tell me what is X?
-</question>
-
 <links>
 https://example.com
-</links>
-\`
-
-5. Follow up question: Summarize the content from https://example.com
-Rephrased question: \`
-<question>
+</links>`,
+  ],
+  [
+    'user',
+    `<conversation>
+</conversation>
+<query>
+Summarize the content from https://example.com
+</query>`,
+  ],
+  [
+    'assistant',
+    `<question>
 summarize
 </question>
-
 <links>
 https://example.com
-</links>
-\`
-</examples>
-
-Anything below is the part of the actual conversation and you need to use conversation and the follow-up question to rephrase the follow-up question as a standalone question based on the guidelines shared above.
-
-<conversation>
-{chat_history}
-</conversation>
-
-Follow up question: {query}
-Rephrased question:
-`;
+</links>`,
+  ],
+];
 
 export const webSearchResponsePrompt = `
     You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.

src/lib/prompts/wolframAlpha.ts

@@ -1,69 +0,0 @@
-export const wolframAlphaSearchRetrieverPrompt = `
-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:
-`;
-
-export const wolframAlphaSearchResponsePrompt = `
-    You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
-
-    Your task is to provide answers that are:
-    - **Informative and relevant**: Thoroughly address the user's query using the given context.
-    - **Well-structured**: Include clear headings and subheadings, and use a professional tone to present information concisely and logically.
-    - **Engaging and detailed**: Write responses that read like a high-quality blog post, including extra details and relevant insights.
-    - **Cited and credible**: Use inline citations with [number] notation to refer to the context source(s) for each fact or detail included.
-    - **Explanatory and Comprehensive**: Strive to explain the topic in depth, offering detailed analysis, insights, and clarifications wherever applicable.
-
-    ### Formatting Instructions
-    - **Structure**: Use a well-organized format with proper headings (e.g., "## Example heading 1" or "## Example heading 2"). Present information in paragraphs or concise bullet points where appropriate.
-    - **Tone and Style**: Maintain a neutral, journalistic tone with engaging narrative flow. Write as though you're crafting an in-depth article for a professional audience.
-    - **Markdown Usage**: Format your response with Markdown for clarity. Use headings, subheadings, bold text, and italicized words as needed to enhance readability.
-    - **Length and Depth**: Provide comprehensive coverage of the topic. Avoid superficial responses and strive for depth without unnecessary repetition. Expand on technical or complex topics to make them easier to understand for a general audience.
-    - **No main heading/title**: Start your response directly with the introduction unless asked to provide a specific title.
-    - **Conclusion or Summary**: Include a concluding paragraph that synthesizes the provided information or suggests potential next steps, where appropriate.
-
-    ### Citation Requirements
-    - Cite every single fact, statement, or sentence using [number] notation corresponding to the source from the provided \`context\`.
-    - Integrate citations naturally at the end of sentences or clauses as appropriate. For example, "The Eiffel Tower is one of the most visited landmarks in the world[1]."
-    - Ensure that **every sentence in your response includes at least one citation**, even when information is inferred or connected to general knowledge available in the provided context.
-    - Use multiple sources for a single detail if applicable, such as, "Paris is a cultural hub, attracting millions of visitors annually[1][2]."
-    - Always prioritize credibility and accuracy by linking all statements back to their respective context sources.
-    - Avoid citing unsupported assumptions or personal interpretations; if no source supports a statement, clearly indicate the limitation.
-
-    ### Special Instructions
-    - If the query involves technical, historical, or complex topics, provide detailed background and explanatory sections to ensure clarity.
-    - If the user provides vague input or if relevant information is missing, explain what additional details might help refine the search.
-    - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
-    - You are set on focus mode 'Wolfram Alpha', this means you will be searching for information on the web using Wolfram Alpha. It is a computational knowledge engine that can answer factual queries and perform computations.
-    
-    ### User instructions
-    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
-    {systemInstructions}
-
-    ### Example Output
-    - Begin with a brief introduction summarizing the event or query topic.
-    - Follow with detailed sections under clear headings, covering all aspects of the query if possible.
-    - Provide explanations or historical context as needed to enhance understanding.
-    - End with a conclusion or overall perspective if relevant.
-
-    <context>
-    {context}
-    </context>
-
-    Current date & time in ISO format (UTC timezone) is: {date}.
-`;

src/lib/prompts/youtubeSearch.ts

@@ -1,69 +0,0 @@
-export const youtubeSearchRetrieverPrompt = `
-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:
-`;
-
-export const youtubeSearchResponsePrompt = `
-    You are Perplexica, an AI model skilled in web search and crafting detailed, engaging, and well-structured answers. You excel at summarizing web pages and extracting relevant information to create professional, blog-style responses.
-
-    Your task is to provide answers that are:
-    - **Informative and relevant**: Thoroughly address the user's query using the given context.
-    - **Well-structured**: Include clear headings and subheadings, and use a professional tone to present information concisely and logically.
-    - **Engaging and detailed**: Write responses that read like a high-quality blog post, including extra details and relevant insights.
-    - **Cited and credible**: Use inline citations with [number] notation to refer to the context source(s) for each fact or detail included.
-    - **Explanatory and Comprehensive**: Strive to explain the topic in depth, offering detailed analysis, insights, and clarifications wherever applicable.
-
-    ### Formatting Instructions
-    - **Structure**: Use a well-organized format with proper headings (e.g., "## Example heading 1" or "## Example heading 2"). Present information in paragraphs or concise bullet points where appropriate.
-    - **Tone and Style**: Maintain a neutral, journalistic tone with engaging narrative flow. Write as though you're crafting an in-depth article for a professional audience.
-    - **Markdown Usage**: Format your response with Markdown for clarity. Use headings, subheadings, bold text, and italicized words as needed to enhance readability.
-    - **Length and Depth**: Provide comprehensive coverage of the topic. Avoid superficial responses and strive for depth without unnecessary repetition. Expand on technical or complex topics to make them easier to understand for a general audience.
-    - **No main heading/title**: Start your response directly with the introduction unless asked to provide a specific title.
-    - **Conclusion or Summary**: Include a concluding paragraph that synthesizes the provided information or suggests potential next steps, where appropriate.
-
-    ### Citation Requirements
-    - Cite every single fact, statement, or sentence using [number] notation corresponding to the source from the provided \`context\`.
-    - Integrate citations naturally at the end of sentences or clauses as appropriate. For example, "The Eiffel Tower is one of the most visited landmarks in the world[1]."
-    - Ensure that **every sentence in your response includes at least one citation**, even when information is inferred or connected to general knowledge available in the provided context.
-    - Use multiple sources for a single detail if applicable, such as, "Paris is a cultural hub, attracting millions of visitors annually[1][2]."
-    - Always prioritize credibility and accuracy by linking all statements back to their respective context sources.
-    - Avoid citing unsupported assumptions or personal interpretations; if no source supports a statement, clearly indicate the limitation.
-
-    ### Special Instructions
-    - If the query involves technical, historical, or complex topics, provide detailed background and explanatory sections to ensure clarity.
-    - If the user provides vague input or if relevant information is missing, explain what additional details might help refine the search.
-    - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
-    - You are set on focus mode 'Youtube', this means you will be searching for videos on the web using Youtube and providing information based on the video's transcrip
-    
-    ### User instructions
-    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
-    {systemInstructions}
-
-    ### Example Output
-    - Begin with a brief introduction summarizing the event or query topic.
-    - Follow with detailed sections under clear headings, covering all aspects of the query if possible.
-    - Provide explanations or historical context as needed to enhance understanding.
-    - End with a conclusion or overall perspective if relevant.
-
-    <context>
-    {context}
-    </context>
-
-    Current date & time in ISO format (UTC timezone) is: {date}.
-`;

src/lib/search/index.ts

@@ -6,54 +6,54 @@ export const searchHandlers: Record<string, MetaSearchAgent> = {
     activeEngines: [],
     queryGeneratorPrompt: prompts.webSearchRetrieverPrompt,
     responsePrompt: prompts.webSearchResponsePrompt,
+    queryGeneratorFewShots: prompts.webSearchRetrieverFewShots,
     rerank: true,
     rerankThreshold: 0.3,
     searchWeb: true,
-    summarizer: true,
   }),
   academicSearch: new MetaSearchAgent({
     activeEngines: ['arxiv', 'google scholar', 'pubmed'],
-    queryGeneratorPrompt: prompts.academicSearchRetrieverPrompt,
-    responsePrompt: prompts.academicSearchResponsePrompt,
+    queryGeneratorPrompt: prompts.webSearchRetrieverPrompt,
+    responsePrompt: prompts.webSearchResponsePrompt,
+    queryGeneratorFewShots: prompts.webSearchRetrieverFewShots,
     rerank: true,
     rerankThreshold: 0,
     searchWeb: true,
-    summarizer: false,
   }),
   writingAssistant: new MetaSearchAgent({
     activeEngines: [],
     queryGeneratorPrompt: '',
+    queryGeneratorFewShots: [],
     responsePrompt: prompts.writingAssistantPrompt,
     rerank: true,
     rerankThreshold: 0,
     searchWeb: false,
-    summarizer: false,
   }),
   wolframAlphaSearch: new MetaSearchAgent({
     activeEngines: ['wolframalpha'],
-    queryGeneratorPrompt: prompts.wolframAlphaSearchRetrieverPrompt,
-    responsePrompt: prompts.wolframAlphaSearchResponsePrompt,
+    queryGeneratorPrompt: prompts.webSearchRetrieverPrompt,
+    responsePrompt: prompts.webSearchResponsePrompt,
+    queryGeneratorFewShots: prompts.webSearchRetrieverFewShots,
     rerank: false,
     rerankThreshold: 0,
     searchWeb: true,
-    summarizer: false,
   }),
   youtubeSearch: new MetaSearchAgent({
     activeEngines: ['youtube'],
-    queryGeneratorPrompt: prompts.youtubeSearchRetrieverPrompt,
-    responsePrompt: prompts.youtubeSearchResponsePrompt,
+    queryGeneratorPrompt: prompts.webSearchRetrieverPrompt,
+    responsePrompt: prompts.webSearchResponsePrompt,
+    queryGeneratorFewShots: prompts.webSearchRetrieverFewShots,
     rerank: true,
     rerankThreshold: 0.3,
     searchWeb: true,
-    summarizer: false,
   }),
   redditSearch: new MetaSearchAgent({
     activeEngines: ['reddit'],
-    queryGeneratorPrompt: prompts.redditSearchRetrieverPrompt,
-    responsePrompt: prompts.redditSearchResponsePrompt,
+    queryGeneratorPrompt: prompts.webSearchRetrieverPrompt,
+    responsePrompt: prompts.webSearchResponsePrompt,
+    queryGeneratorFewShots: prompts.webSearchRetrieverFewShots,
     rerank: true,
     rerankThreshold: 0.3,
     searchWeb: true,
-    summarizer: false,
   }),
 };

src/lib/search/metaSearchAgent.ts

@@ -11,7 +11,7 @@ import {
   RunnableMap,
   RunnableSequence,
 } from '@langchain/core/runnables';
-import { BaseMessage } from '@langchain/core/messages';
+import { BaseMessage, BaseMessageLike } from '@langchain/core/messages';
 import { StringOutputParser } from '@langchain/core/output_parsers';
 import LineListOutputParser from '../outputParsers/listLineOutputParser';
 import LineOutputParser from '../outputParsers/lineOutputParser';
@@ -40,9 +40,9 @@ export interface MetaSearchAgentType {
 interface Config {
   searchWeb: boolean;
   rerank: boolean;
-  summarizer: boolean;
   rerankThreshold: number;
   queryGeneratorPrompt: string;
+  queryGeneratorFewShots: BaseMessageLike[];
   responsePrompt: string;
   activeEngines: string[];
 }
@@ -64,7 +64,22 @@ class MetaSearchAgent implements MetaSearchAgentType {
     (llm as unknown as ChatOpenAI).temperature = 0;
 
     return RunnableSequence.from([
-      PromptTemplate.fromTemplate(this.config.queryGeneratorPrompt),
+      ChatPromptTemplate.fromMessages([
+        ['system', this.config.queryGeneratorPrompt],
+        ...this.config.queryGeneratorFewShots,
+        [
+          'user',
+          `
+        <conversation>
+        {chat_history}
+        </conversation>
+
+        <query>
+        {query}
+        </query>
+       `,
+        ],
+      ]),
       llm,
       this.strParser,
       RunnableLambda.from(async (input: string) => {
@@ -77,9 +92,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
         });
 
         const links = await linksOutputParser.parse(input);
-        let question = this.config.summarizer
-          ? await questionOutputParser.parse(input)
-          : input;
+        let question = (await questionOutputParser.parse(input)) ?? input;
 
         if (question === 'not_needed') {
           return { query: '', docs: [] };

tailwind.config.ts

@@ -2,15 +2,17 @@ import type { Config } from 'tailwindcss';
 import type { DefaultColors } from 'tailwindcss/types/generated/colors';
 
 const themeDark = (colors: DefaultColors) => ({
-  50: '#0a0a0a',
-  100: '#111111',
-  200: '#1c1c1c',
+  50: '#111116',
+  100: '#1f202b',
+  200: '#2d2f3f',
+  300: '#3a3c4c',
 });
 
 const themeLight = (colors: DefaultColors) => ({
-  50: '#fcfcf9',
-  100: '#f3f3ee',
-  200: '#e8e8e3',
+  50: '#ffffff',
+  100: '#f1f5f9',
+  200: '#c4c7c5',
+  300: '#9ca3af',
 });
 
 const config: Config = {