From 6e3ef109954cc7ef5127ccc677a1446ef0799226 Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Mon, 24 Jun 2024 16:24:52 +0500
Subject: [PATCH 01/19] Added Ask Source Graph bot

---
 src/app/ask-source/page.tsx              | 124 +++++++++++++++++++++++
 src/components/Layout.tsx                |   5 +
 src/components/icons/SourceGraphIcon.tsx |  49 +++++++++
 3 files changed, 178 insertions(+)
 create mode 100644 src/app/ask-source/page.tsx
 create mode 100644 src/components/icons/SourceGraphIcon.tsx

diff --git a/src/app/ask-source/page.tsx b/src/app/ask-source/page.tsx
new file mode 100644
index 000000000..2457bb13b
--- /dev/null
+++ b/src/app/ask-source/page.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
+
+interface Message {
+  sender: 'bot' | 'user';
+  text: string;
+}
+
+const AskSourceChat = () => {
+  const [messages, setMessages] = useState<Message[]>([
+    { sender: 'bot', text: 'Hello! How can I help you today?' },
+    { sender: 'user', text: 'What is Sourcegraph? What is Sourcegraph? What is Sourcegraph? What is Sourcegraph? What is Sourcegraph?' },
+    { sender: 'bot', text: 'Sourcegraph is a code search and intelligence tool. Sourcegraph is a code search and intelligence tool.' }
+  ]);
+  const [inputValue, setInputValue] = useState('');
+  const [charCount, setCharCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(true); // Add state for user login
+  const charLimit = 250;
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setCharCount(e.target.value.length);
+  };
+
+  const handleSendMessage = () => {
+    if (inputValue.trim() === '') return;
+
+    setMessages([...messages, { sender: 'user', text: inputValue }]);
+    setInputValue('');
+    setCharCount(0);
+
+    // Dummy bot response
+    setTimeout(() => {
+      setMessages(prevMessages => [...prevMessages, { sender: 'bot', text: 'Thank you for your message!' }]);
+      scrollToBottom();
+    }, 1000);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSendMessage();
+    }
+  };
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  return (
+    <>
+      <div className="flex flex-col h-[calc(100vh-90px)] p-4">
+        <div className="flex-shrink-0 mb-4">
+          <h1 className="text-2xl font-bold">Ask Sourcegraph</h1>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Get information faster by asking our AI chatbot assistant.</p>
+        </div>
+        <div className="flex-1 no-scrollbar overflow-y-auto mb-4">
+          {messages.map((message, index) => (
+            <div
+              key={index}
+              className={clsx('flex mb-4', {
+                'justify-end': message.sender === 'user',
+                'justify-start': message.sender === 'bot'
+              })}
+            >
+              {message.sender === 'bot' && (
+                <div className="flex-shrink-0 mr-2">
+                  <div className="rounded-full h-10 w-10 p-1.5 flex items-center justify-center bg-gray-200 dark:bg-gray-700">
+                    <SourceGraphIcon />
+                  </div>
+                </div>
+              )}
+              <div className={clsx('p-2 rounded-lg max-w-[90%]', {
+                'bg-[#62BECC] text-white justify-end': message.sender === 'user',
+                'bg-gray-200 dark:bg-gray-600 text-black dark:text-white justify-start': message.sender === 'bot'
+              })}>
+                {message.text}
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+        {!isLoggedIn && (
+          <div className="flex items-center justify-center h-full">
+            <button className="p-3 text-white w-48 bg-[#62BECC] rounded-md shadow-md font-bold">
+              Log in to unlock
+            </button>
+          </div>
+        )}
+          <div className="flex-shrink-0">
+            <div className="flex items-center">
+              <input
+                type="text"
+                className="flex-1 p-2 border border-gray-300 dark:border-gray-700 rounded-md mr-2 focus:outline-none focus:ring-2 focus:ring-[#62BECC] focus:border-transparent"
+                value={inputValue}
+                onChange={handleInputChange}
+                onKeyDown={handleKeyDown}
+                maxLength={charLimit}
+                placeholder="Follow up..."
+                disabled={!isLoggedIn}
+              />
+              <button
+                className="p-2 text-white bg-[#62BECC] rounded-md shadow-md"
+                onClick={handleSendMessage}
+              >
+                Send
+              </button>
+            </div>
+            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{charCount}/{charLimit}</p>
+          </div>
+      </div>
+      <div className="hidden lg:block lg:w-64 xl:w-72"></div>
+    </>
+  );
+};
+
+export default AskSourceChat;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 6afe45b64..b1fe4c290 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -5,6 +5,7 @@ import { Logo } from '@/components/Logo';
 import { MobileNavigation } from '@/components/MobileNavigation';
 import { Navigation } from '@/components/Navigation';
 import { ThemeSelector } from '@/components/ThemeSelector';
+import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -68,6 +69,10 @@ function Header() {
 					<Search />
 				</div>
 				<div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-6 md:flex-grow">
+					<Link href="/ask-source" className="flex items-center gap-2 whitespace-nowrap">
+						<SourceGraphIcon className="h-6 w-6" />
+						<span className="font-semibold">Ask Source</span>
+					</Link>
 					<VersionSelector />
 					<ThemeSelector className="relative z-10" />
 					<Link
diff --git a/src/components/icons/SourceGraphIcon.tsx b/src/components/icons/SourceGraphIcon.tsx
new file mode 100644
index 000000000..a83f36225
--- /dev/null
+++ b/src/components/icons/SourceGraphIcon.tsx
@@ -0,0 +1,49 @@
+// BotIcon.tsx
+import React from 'react';
+
+const BotIcon = ({className = ''}) => (
+  <svg
+    version="1.1"
+    className={className}
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 53.4 55.5"
+    xmlSpace="preserve"
+  >
+    <style type="text/css">
+      {`
+        .st0 { fill: #FF5543; }
+        .st1 { fill: #A112FF; }
+        .st2 { fill: #00CBEC; }
+      `}
+    </style>
+    <g>
+      <g>
+        <path
+          className="st0"
+          d="M31.5,53.5c-2.8,0.5-5.5-1.3-6-4.1L17.8,7.9c-0.5-2.8,1.3-5.5,4.1-6s5.5,1.3,6,4.1l7.6,41.5
+			C36.1,50.3,34.2,53,31.5,53.5z"
+        />
+      </g>
+      <g>
+        <path
+          className="st1"
+          d="M11.6,46.5c-1.7,0.3-3.6-0.3-4.8-1.7c-1.8-2.2-1.6-5.4,0.6-7.2l32.1-27.3c2.2-1.8,5.4-1.6,7.2,0.6
+			c1.8,2.2,1.6,5.4-0.6,7.2L14,45.3C13.3,45.9,12.4,46.3,11.6,46.5z"
+        />
+      </g>
+      <g>
+        <path
+          className="st2"
+          d="M47.5,39.8c-0.9,0.2-1.8,0.1-2.6-0.2L5.1,25.5c-2.7-1-4.1-3.9-3.1-6.6s3.9-4.1,6.6-3.1L48.3,30
+			c2.7,1,4.1,3.9,3.1,6.6C50.8,38.3,49.2,39.5,47.5,39.8z"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default BotIcon;

From e6dce7e2db3497e8af23c4cfb11dc0f199d28bfd Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Thu, 4 Jul 2024 22:16:21 +0500
Subject: [PATCH 02/19] Added ask-source chatbot

---
 package.json                                  |  12 +-
 pnpm-lock.yaml                                | 900 +++++++++++++++++-
 src/app/ask-source/page.tsx                   | 129 +--
 src/components/chatbot/chat-input.tsx         |  75 ++
 src/components/chatbot/chat-list.tsx          |  23 +
 .../chatbot/chat-message-actions.tsx          |  40 +
 src/components/chatbot/chat-message.tsx       |  77 ++
 src/components/chatbot/chatbot-page.tsx       |  56 ++
 src/components/chatbot/header.tsx             |  47 +
 src/components/chatbot/markdown.tsx           |   9 +
 src/components/chatbot/opening.tsx            |  81 ++
 src/components/chatbot/prompt-form.tsx        |  95 ++
 src/components/chatbot/ui/button.tsx          |  70 ++
 src/components/chatbot/ui/codeblock.tsx       | 145 +++
 src/components/chatbot/ui/icons.tsx           | 339 +++++++
 src/components/chatbot/ui/separator.tsx       |  32 +
 src/components/chatbot/ui/textarea.tsx        |  23 +
 src/lib/hooks/use-copy-to-clipboard.tsx       |  33 +
 src/lib/hooks/use-enter-submit.tsx            |  23 +
 src/lib/types.ts                              |  11 +
 src/lib/utils.ts                              |   9 +
 21 files changed, 2107 insertions(+), 122 deletions(-)
 create mode 100644 src/components/chatbot/chat-input.tsx
 create mode 100644 src/components/chatbot/chat-list.tsx
 create mode 100644 src/components/chatbot/chat-message-actions.tsx
 create mode 100644 src/components/chatbot/chat-message.tsx
 create mode 100644 src/components/chatbot/chatbot-page.tsx
 create mode 100644 src/components/chatbot/header.tsx
 create mode 100644 src/components/chatbot/markdown.tsx
 create mode 100644 src/components/chatbot/opening.tsx
 create mode 100644 src/components/chatbot/prompt-form.tsx
 create mode 100644 src/components/chatbot/ui/button.tsx
 create mode 100644 src/components/chatbot/ui/codeblock.tsx
 create mode 100644 src/components/chatbot/ui/icons.tsx
 create mode 100644 src/components/chatbot/ui/separator.tsx
 create mode 100644 src/components/chatbot/ui/textarea.tsx
 create mode 100644 src/lib/hooks/use-copy-to-clipboard.tsx
 create mode 100644 src/lib/hooks/use-enter-submit.tsx
 create mode 100644 src/lib/types.ts

diff --git a/package.json b/package.json
index 9d2b68450..0f8e9b439 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,17 @@
 		"tailwindcss": "^3.3.3",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "5.1.6",
-		"unist-util-visit": "^5.0.0"
+		"unist-util-visit": "^5.0.0",
+		"mxcn": "^2.0.0",
+		"ai": "3.0.16",
+		"@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-switch": "^1.0.3",
+    "react-markdown": "^8.0.7",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-autosize": "^8.4.1",
+    "remark-math": "^5.1.1",
+    "sonner": "^1.5.0"
 	},
 	"devDependencies": {
 		"eslint": "8.45.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 04c8ebb15..cde9fed92 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,12 +23,21 @@ dependencies:
   '@next/third-parties':
     specifier: ^14.1.4
     version: 14.1.4(next@14.2.3)(react@18.3.1)
+  '@radix-ui/react-label':
+    specifier: ^2.0.2
+    version: 2.1.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1)
   '@radix-ui/react-select':
     specifier: ^2.0.0
     version: 2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1)
+  '@radix-ui/react-separator':
+    specifier: ^1.0.3
+    version: 1.1.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1)
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.20)(react@18.3.1)
+  '@radix-ui/react-switch':
+    specifier: ^1.0.3
+    version: 1.1.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1)
   '@tailwindcss/typography':
     specifier: ^0.5.7
     version: 0.5.10(tailwindcss@3.4.0)
@@ -44,6 +53,9 @@ dependencies:
   '@types/react-highlight-words':
     specifier: ^0.16.4
     version: 0.16.7
+  ai:
+    specifier: 3.0.16
+    version: 3.0.16(react@18.3.1)(solid-js@1.8.18)(svelte@4.2.18)(vue@3.4.31)(zod@3.23.8)
   algoliasearch:
     specifier: ^4.22.1
     version: 4.22.1
@@ -80,6 +92,9 @@ dependencies:
   lucide-react:
     specifier: ^0.372.0
     version: 0.372.0(react@18.3.1)
+  mxcn:
+    specifier: ^2.0.0
+    version: 2.0.0
   next:
     specifier: ^14.2.3
     version: 14.2.3(@opentelemetry/api@1.7.0)(react-dom@18.3.1)(react@18.3.1)
@@ -101,6 +116,15 @@ dependencies:
   react-highlight-words:
     specifier: ^0.20.0
     version: 0.20.0(react@18.3.1)
+  react-markdown:
+    specifier: ^8.0.7
+    version: 8.0.7(@types/react@18.2.20)(react@18.3.1)
+  react-syntax-highlighter:
+    specifier: ^15.5.0
+    version: 15.5.0(react@18.3.1)
+  react-textarea-autosize:
+    specifier: ^8.4.1
+    version: 8.5.3(@types/react@18.2.20)(react@18.3.1)
   rehype-autolink-headings:
     specifier: ^7.1.0
     version: 7.1.0
@@ -116,12 +140,18 @@ dependencies:
   remark-gfm:
     specifier: 3.0.1
     version: 3.0.1
+  remark-math:
+    specifier: ^5.1.1
+    version: 5.1.1
   shiki:
     specifier: ^0.14.5
     version: 0.14.7
   simple-functional-loader:
     specifier: ^1.2.1
     version: 1.2.1
+  sonner:
+    specifier: ^1.5.0
+    version: 1.5.0(react-dom@18.3.1)(react@18.3.1)
   tailwind-merge:
     specifier: ^2.3.0
     version: 2.3.0
@@ -334,6 +364,32 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /@ampproject/remapping@2.3.0:
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+    dev: false
+
+  /@babel/helper-string-parser@7.24.7:
+    resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helper-validator-identifier@7.24.7:
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/parser@7.24.7:
+    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.24.7
+    dev: false
+
   /@babel/runtime@7.23.6:
     resolution: {integrity: sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==}
     engines: {node: '>=6.9.0'}
@@ -347,6 +403,15 @@ packages:
       regenerator-runtime: 0.14.1
     dev: false
 
+  /@babel/types@7.24.7:
+    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.24.7
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
+    dev: false
+
   /@contentlayer/cli@0.3.4(esbuild@0.19.10):
     resolution: {integrity: sha512-vNDwgLuhYNu+m70NZ3XK9kexKNguuxPXg7Yvzj3B34cEilQjjzSrcTY/i+AIQm9V7uT5GGshx9ukzPf+SmoszQ==}
     dependencies:
@@ -929,6 +994,15 @@ packages:
       '@jridgewell/trace-mapping': 0.3.20
     dev: false
 
+  /@jridgewell/gen-mapping@0.3.5:
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.25
+    dev: false
+
   /@jridgewell/resolve-uri@3.1.1:
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
@@ -939,6 +1013,11 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: false
 
+  /@jridgewell/set-array@1.2.1:
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
     dev: false
@@ -950,6 +1029,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: false
 
+  /@jridgewell/trace-mapping@0.3.25:
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: false
+
   /@js-temporal/polyfill@0.4.4:
     resolution: {integrity: sha512-2X6bvghJ/JAoZO52lbgyAPFj8uCflhTo2g7nkFzEQdXd/D8rEeD4HtmTEpmtGCva260fcd66YNXBOYdnmHqSOg==}
     engines: {node: '>=12'}
@@ -1392,6 +1478,10 @@ packages:
       '@babel/runtime': 7.24.4
     dev: false
 
+  /@radix-ui/primitive@1.1.0:
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+    dev: false
+
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
@@ -1451,6 +1541,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-context@1.0.1(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
     peerDependencies:
@@ -1465,6 +1568,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-context@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-direction@1.0.1(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
     peerDependencies:
@@ -1556,6 +1672,26 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-label@2.1.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
@@ -1628,6 +1764,26 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-select@2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
     peerDependencies:
@@ -1669,6 +1825,26 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.2.20)(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-separator@1.1.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -1684,6 +1860,46 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-slot@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-switch@1.1.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
@@ -1698,6 +1914,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
     peerDependencies:
@@ -1713,6 +1942,20 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
     peerDependencies:
@@ -1742,6 +1985,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
     peerDependencies:
@@ -1756,6 +2012,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-previous@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-use-rect@1.0.1(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
     peerDependencies:
@@ -1786,6 +2055,20 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-size@1.1.0(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.20)(react@18.3.1)
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
     peerDependencies:
@@ -1856,6 +2139,10 @@ packages:
       '@types/ms': 0.7.34
     dev: false
 
+  /@types/diff-match-patch@1.0.36:
+    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
+    dev: false
+
   /@types/estree-jsx@1.0.3:
     resolution: {integrity: sha512-pvQ+TKeRHeiUGRhvYwRrQ/ISnohKkSJR14fT2yqyZ4e9K5vqc7hrtY2Y1Dw0ZwAzQ6DQsxsaCUuSIIi8v0Cq6w==}
     dependencies:
@@ -1882,6 +2169,10 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/katex@0.16.7:
+    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
+    dev: false
+
   /@types/mdast@3.0.15:
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
     dependencies:
@@ -2016,6 +2307,80 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: false
 
+  /@vue/compiler-core@3.4.31:
+    resolution: {integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==}
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/shared': 3.4.31
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+    dev: false
+
+  /@vue/compiler-dom@3.4.31:
+    resolution: {integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==}
+    dependencies:
+      '@vue/compiler-core': 3.4.31
+      '@vue/shared': 3.4.31
+    dev: false
+
+  /@vue/compiler-sfc@3.4.31:
+    resolution: {integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==}
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.4.31
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.39
+      source-map-js: 1.2.0
+    dev: false
+
+  /@vue/compiler-ssr@3.4.31:
+    resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==}
+    dependencies:
+      '@vue/compiler-dom': 3.4.31
+      '@vue/shared': 3.4.31
+    dev: false
+
+  /@vue/reactivity@3.4.31:
+    resolution: {integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==}
+    dependencies:
+      '@vue/shared': 3.4.31
+    dev: false
+
+  /@vue/runtime-core@3.4.31:
+    resolution: {integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==}
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/shared': 3.4.31
+    dev: false
+
+  /@vue/runtime-dom@3.4.31:
+    resolution: {integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==}
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/runtime-core': 3.4.31
+      '@vue/shared': 3.4.31
+      csstype: 3.1.3
+    dev: false
+
+  /@vue/server-renderer@3.4.31(vue@3.4.31):
+    resolution: {integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==}
+    peerDependencies:
+      vue: 3.4.31
+    dependencies:
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      vue: 3.4.31(typescript@5.1.6)
+    dev: false
+
+  /@vue/shared@3.4.31:
+    resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==}
+    dev: false
+
   /acorn-jsx@5.3.2(acorn@8.11.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -2028,6 +2393,44 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  /ai@3.0.16(react@18.3.1)(solid-js@1.8.18)(svelte@4.2.18)(vue@3.4.31)(zod@3.23.8):
+    resolution: {integrity: sha512-P6GGUYbE8PDUVeGT9D7tT9nF7lufDjbieZ97YVIVL/eZkGcfXQMvJleO1VzJ1eutoI8f5Llazmhg4K66Gs5q3Q==}
+    engines: {node: '>=14.6'}
+    peerDependencies:
+      react: ^18.2.0
+      solid-js: ^1.7.7
+      svelte: ^3.0.0 || ^4.0.0
+      vue: ^3.3.4
+      zod: ^3.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      solid-js:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      zod:
+        optional: true
+    dependencies:
+      eventsource-parser: 1.1.2
+      jsondiffpatch: 0.6.0
+      nanoid: 3.3.6
+      react: 18.3.1
+      secure-json-parse: 2.7.0
+      solid-js: 1.8.18
+      solid-swr-store: 0.10.7(solid-js@1.8.18)(swr-store@0.10.6)
+      sswr: 2.0.0(svelte@4.2.18)
+      svelte: 4.2.18
+      swr: 2.2.0(react@18.3.1)
+      swr-store: 0.10.6
+      swrv: 1.0.4(vue@3.4.31)
+      vue: 3.4.31(typescript@5.1.6)
+      zod: 3.23.8
+      zod-to-json-schema: 3.23.1(zod@3.23.8)
+    dev: false
+
   /ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:
@@ -2116,7 +2519,6 @@ packages:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
@@ -2246,6 +2648,12 @@ packages:
       dequal: 2.0.3
     dev: true
 
+  /axobject-query@4.0.0:
+    resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
+    dependencies:
+      dequal: 2.0.3
+    dev: false
+
   /b4a@1.6.4:
     resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==}
     dev: true
@@ -2370,18 +2778,35 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: false
+
   /character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
     dev: false
 
+  /character-entities-legacy@1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+    dev: false
+
   /character-entities-legacy@3.0.0:
     resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
     dev: false
 
+  /character-entities@1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+    dev: false
+
   /character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
     dev: false
 
+  /character-reference-invalid@1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+    dev: false
+
   /character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
     dev: false
@@ -2442,6 +2867,16 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /code-red@1.0.4:
+    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@types/estree': 1.0.5
+      acorn: 8.11.2
+      estree-walker: 3.0.3
+      periscopic: 3.1.0
+    dev: false
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2466,6 +2901,10 @@ packages:
       color-string: 1.9.1
     dev: true
 
+  /comma-separated-tokens@1.0.8:
+    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+    dev: false
+
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
     dev: false
@@ -2475,6 +2914,11 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
+  /commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: false
+
   /comment-json@4.2.3:
     resolution: {integrity: sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==}
     engines: {node: '>= 6'}
@@ -2521,6 +2965,14 @@ packages:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  /css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.0.2
+    dev: false
+
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2632,6 +3084,10 @@ packages:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: false
 
+  /diff-match-patch@1.0.5:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+    dev: false
+
   /diff@5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
     engines: {node: '>=0.3.1'}
@@ -2696,6 +3152,11 @@ packages:
       tapable: 2.2.1
     dev: true
 
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /es-abstract@1.22.3:
     resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
     engines: {node: '>= 0.4'}
@@ -3148,6 +3609,10 @@ packages:
       '@types/unist': 2.0.10
     dev: false
 
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: false
+
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
@@ -3159,6 +3624,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /eventsource-parser@1.1.2:
+    resolution: {integrity: sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==}
+    engines: {node: '>=14.18'}
+    dev: false
+
   /expand-template@2.0.3:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
@@ -3210,6 +3680,12 @@ packages:
     dependencies:
       reusify: 1.0.4
 
+  /fault@1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+    dependencies:
+      format: 0.2.2
+    dev: false
+
   /fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
     dependencies:
@@ -3550,6 +4026,10 @@ packages:
       '@types/hast': 3.0.3
     dev: false
 
+  /hast-util-parse-selector@2.2.5:
+    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+    dev: false
+
   /hast-util-parse-selector@3.1.1:
     resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
     dependencies:
@@ -3637,6 +4117,16 @@ packages:
     resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
     dev: false
 
+  /hastscript@6.0.0:
+    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
+    dependencies:
+      '@types/hast': 2.3.9
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+    dev: false
+
   /hastscript@7.2.0:
     resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==}
     dependencies:
@@ -3651,6 +4141,10 @@ packages:
     resolution: {integrity: sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==}
     dev: false
 
+  /highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+    dev: false
+
   /html-void-elements@2.0.1:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
     dev: false
@@ -3721,10 +4215,21 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
+  /is-alphabetical@1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+    dev: false
+
   /is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
     dev: false
 
+  /is-alphanumerical@1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+    dev: false
+
   /is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
     dependencies:
@@ -3794,6 +4299,10 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
+  /is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+    dev: false
+
   /is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
     dev: false
@@ -3831,6 +4340,10 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+    dev: false
+
   /is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
     dev: false
@@ -4018,6 +4531,16 @@ packages:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: false
 
+  /jsondiffpatch@0.6.0:
+    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      '@types/diff-match-patch': 1.0.36
+      chalk: 5.3.0
+      diff-match-patch: 1.0.5
+    dev: false
+
   /jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -4028,6 +4551,13 @@ packages:
       object.values: 1.1.7
     dev: true
 
+  /katex@0.16.11:
+    resolution: {integrity: sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==}
+    hasBin: true
+    dependencies:
+      commander: 8.3.0
+    dev: false
+
   /kbar@0.1.0-beta.44(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-hfstBZn/XYhEEobxA6yhMkgu3yHNqAgHbBM/WavC1GvSEMRAVMZAWZBBrNwJCqknSIwu7nS9jsHORENtlrjU1Q==}
     peerDependencies:
@@ -4104,6 +4634,10 @@ packages:
       json5: 2.2.3
     dev: false
 
+  /locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+    dev: false
+
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -4146,6 +4680,13 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /lowlight@1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+    dev: false
+
   /lru-cache@10.1.0:
     resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
     engines: {node: 14 || >=16.14}
@@ -4165,6 +4706,12 @@ packages:
       react: 18.3.1
     dev: false
 
+  /magic-string@0.30.10:
+    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: false
+
   /markdown-extensions@1.1.1:
     resolution: {integrity: sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==}
     engines: {node: '>=0.10.0'}
@@ -4274,6 +4821,14 @@ packages:
       - supports-color
     dev: false
 
+  /mdast-util-math@2.0.2:
+    resolution: {integrity: sha512-8gmkKVp9v6+Tgjtq6SYx9kGPpTf6FVYRa53/DLh479aldR9AyP48qeVOgNZ5X7QUK7nOy4yw7vg6mbiGcs9jWQ==}
+    dependencies:
+      '@types/mdast': 3.0.15
+      longest-streak: 3.1.0
+      mdast-util-to-markdown: 1.5.0
+    dev: false
+
   /mdast-util-mdx-expression@1.3.2:
     resolution: {integrity: sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==}
     dependencies:
@@ -4368,6 +4923,10 @@ packages:
       '@types/mdast': 3.0.15
     dev: false
 
+  /mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: false
+
   /mdx-bundler@9.2.1(esbuild@0.19.10):
     resolution: {integrity: sha512-hWEEip1KU9MCNqeH2rqwzAZ1pdqPPbfkx9OTJjADqGPQz4t9BO85fhI7AP9gVYrpmfArf9/xJZUN0yBErg/G/Q==}
     engines: {node: '>=14', npm: '>=6'}
@@ -4505,6 +5064,18 @@ packages:
       micromark-util-types: 1.1.0
     dev: false
 
+  /micromark-extension-math@2.1.2:
+    resolution: {integrity: sha512-es0CcOV89VNS9wFmyn+wyFTKweXGW4CEvdaAca6SWRWPyYCbBisnjaHLjWO4Nszuiud84jCpkHsqAJoa768Pvg==}
+    dependencies:
+      '@types/katex': 0.16.7
+      katex: 0.16.11
+      micromark-factory-space: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+    dev: false
+
   /micromark-extension-mdx-expression@1.0.8:
     resolution: {integrity: sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw==}
     dependencies:
@@ -4795,6 +5366,14 @@ packages:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
     dev: true
 
+  /mxcn@2.0.0:
+    resolution: {integrity: sha512-v7HUffIn60+mllPxuqTzsZxAixpabEwzs/X45InZWOnT+ylJQ55fLADiwudEmqUhqH37PU3OT8mU755XIKgNgg==}
+    engines: {node: '>=12'}
+    dependencies:
+      clsx: 2.0.0
+      tailwind-merge: 1.14.0
+    dev: false
+
   /mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
     dependencies:
@@ -4803,6 +5382,12 @@ packages:
       thenify-all: 1.6.0
     dev: false
 
+  /nanoid@3.3.6:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: false
+
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5054,6 +5639,17 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-entities@2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+    dev: false
+
   /parse-entities@4.0.1:
     resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
     dependencies:
@@ -5124,6 +5720,10 @@ packages:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: false
 
+  /picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+    dev: false
+
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -5225,6 +5825,15 @@ packages:
       source-map-js: 1.0.2
     dev: false
 
+  /postcss@8.4.39:
+    resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+    dev: false
+
   /prebuild-install@7.1.1:
     resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
     engines: {node: '>=10'}
@@ -5317,6 +5926,16 @@ packages:
       react: 18.3.1
     dev: false
 
+  /prismjs@1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -5324,6 +5943,12 @@ packages:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  /property-information@5.6.0:
+    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
+    dependencies:
+      xtend: 4.0.2
+    dev: false
+
   /property-information@6.4.0:
     resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==}
     dev: false
@@ -5400,6 +6025,37 @@ packages:
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  /react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+    dev: false
+
+  /react-markdown@8.0.7(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+    dependencies:
+      '@types/hast': 2.3.9
+      '@types/prop-types': 15.7.11
+      '@types/react': 18.2.20
+      '@types/unist': 2.0.10
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 2.0.1
+      prop-types: 15.8.1
+      property-information: 6.4.0
+      react: 18.3.1
+      react-is: 18.3.1
+      remark-parse: 10.0.2
+      remark-rehype: 10.1.0
+      space-separated-tokens: 2.0.2
+      style-to-object: 0.4.4
+      unified: 10.1.2
+      unist-util-visit: 4.1.2
+      vfile: 5.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /react-remove-scroll-bar@2.3.6(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
     engines: {node: '>=10'}
@@ -5452,6 +6108,33 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /react-syntax-highlighter@15.5.0(react@18.3.1):
+    resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+    dependencies:
+      '@babel/runtime': 7.24.4
+      highlight.js: 10.7.3
+      lowlight: 1.20.0
+      prismjs: 1.29.0
+      react: 18.3.1
+      refractor: 3.6.0
+    dev: false
+
+  /react-textarea-autosize@8.5.3(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.24.4
+      react: 18.3.1
+      use-composed-ref: 1.3.0(react@18.3.1)
+      use-latest: 1.2.1(@types/react@18.2.20)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-virtual@2.10.4(react@18.3.1):
     resolution: {integrity: sha512-Ir6+oPQZTVHfa6+JL9M7cvMILstFZH/H3jqeYeKI4MSUX+rIruVwFC6nGVXw9wqAw8L0Kg2KvfXxI85OvYQdpQ==}
     peerDependencies:
@@ -5502,6 +6185,14 @@ packages:
       which-builtin-type: 1.1.3
     dev: true
 
+  /refractor@3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+    dev: false
+
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
@@ -5594,6 +6285,15 @@ packages:
       - supports-color
     dev: false
 
+  /remark-math@5.1.1:
+    resolution: {integrity: sha512-cE5T2R/xLVtfFI4cCePtiRn+e6jKMtFDR3P8V3qpv8wpKjwvHoBA4eJzvX+nVrnlNy0911bdGmuspCSwetfYHw==}
+    dependencies:
+      '@types/mdast': 3.0.15
+      mdast-util-math: 2.0.2
+      micromark-extension-math: 2.1.2
+      unified: 10.1.2
+    dev: false
+
   /remark-mdx-frontmatter@1.1.1:
     resolution: {integrity: sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==}
     engines: {node: '>=12.2.0'}
@@ -5731,6 +6431,10 @@ packages:
       kind-of: 6.0.3
     dev: false
 
+  /secure-json-parse@2.7.0:
+    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
+    dev: false
+
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -5743,6 +6447,20 @@ packages:
     dependencies:
       lru-cache: 6.0.0
 
+  /seroval-plugins@1.0.7(seroval@1.0.7):
+    resolution: {integrity: sha512-GO7TkWvodGp6buMEX9p7tNyIkbwlyuAWbI6G9Ec5bhcm7mQdu3JOK1IXbEUwb3FVzSc363GraG/wLW23NSavIw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+    dependencies:
+      seroval: 1.0.7
+    dev: false
+
+  /seroval@1.0.7:
+    resolution: {integrity: sha512-n6ZMQX5q0Vn19Zq7CIKNIo7E75gPkGCFUEqDpa8jgwpYr/vScjqnQ6H09t1uIiZ0ZSK0ypEGvrYK2bhBGWsGdw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /set-function-length@1.1.1:
     resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==}
     engines: {node: '>= 0.4'}
@@ -5838,6 +6556,35 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /solid-js@1.8.18:
+    resolution: {integrity: sha512-cpkxDPvO/AuKBugVv6xKFd1C9VC0XZMu4VtF56IlHoux8HgyW44uqNSWbozMnVcpIzHIhS3vVXPAVZYM26jpWw==}
+    dependencies:
+      csstype: 3.1.3
+      seroval: 1.0.7
+      seroval-plugins: 1.0.7(seroval@1.0.7)
+    dev: false
+
+  /solid-swr-store@0.10.7(solid-js@1.8.18)(swr-store@0.10.6):
+    resolution: {integrity: sha512-A6d68aJmRP471aWqKKPE2tpgOiR5fH4qXQNfKIec+Vap+MGQm3tvXlT8n0I8UgJSlNAsSAUuw2VTviH2h3Vv5g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      solid-js: ^1.2
+      swr-store: ^0.10
+    dependencies:
+      solid-js: 1.8.18
+      swr-store: 0.10.6
+    dev: false
+
+  /sonner@1.5.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /sort-keys@5.0.0:
     resolution: {integrity: sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==}
     engines: {node: '>=12'}
@@ -5850,6 +6597,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
     dependencies:
@@ -5867,6 +6619,10 @@ packages:
     engines: {node: '>= 8'}
     dev: false
 
+  /space-separated-tokens@1.1.5:
+    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+    dev: false
+
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: false
@@ -5875,6 +6631,15 @@ packages:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: false
 
+  /sswr@2.0.0(svelte@4.2.18):
+    resolution: {integrity: sha512-mV0kkeBHcjcb0M5NqKtKVg/uTIYNlIIniyDfSGrSfxpEdM9C365jK0z55pl9K0xAkNTJi2OAOVFQpgMPUk+V0w==}
+    peerDependencies:
+      svelte: ^4.0.0
+    dependencies:
+      svelte: 4.2.18
+      swrev: 4.0.0
+    dev: false
+
   /streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -6038,6 +6803,58 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /svelte@4.2.18:
+    resolution: {integrity: sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==}
+    engines: {node: '>=16'}
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.20
+      '@types/estree': 1.0.5
+      acorn: 8.11.2
+      aria-query: 5.3.0
+      axobject-query: 4.0.0
+      code-red: 1.0.4
+      css-tree: 2.3.1
+      estree-walker: 3.0.3
+      is-reference: 3.0.2
+      locate-character: 3.0.0
+      magic-string: 0.30.10
+      periscopic: 3.1.0
+    dev: false
+
+  /swr-store@0.10.6:
+    resolution: {integrity: sha512-xPjB1hARSiRaNNlUQvWSVrG5SirCjk2TmaUyzzvk69SZQan9hCJqw/5rG9iL7xElHU784GxRPISClq4488/XVw==}
+    engines: {node: '>=10'}
+    dependencies:
+      dequal: 2.0.3
+    dev: false
+
+  /swr@2.2.0(react@18.3.1):
+    resolution: {integrity: sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.3.1
+      use-sync-external-store: 1.2.2(react@18.3.1)
+    dev: false
+
+  /swrev@4.0.0:
+    resolution: {integrity: sha512-LqVcOHSB4cPGgitD1riJ1Hh4vdmITOp+BkmfmXRh4hSF/t7EnS4iD+SOTmq7w5pPm/SiPeto4ADbKS6dHUDWFA==}
+    dev: false
+
+  /swrv@1.0.4(vue@3.4.31):
+    resolution: {integrity: sha512-zjEkcP8Ywmj+xOJW3lIT65ciY/4AL4e/Or7Gj0MzU3zBJNMdJiT8geVZhINavnlHRMMCcJLHhraLTAiDOTmQ9g==}
+    peerDependencies:
+      vue: '>=3.2.26 < 4'
+    dependencies:
+      vue: 3.4.31(typescript@5.1.6)
+    dev: false
+
+  /tailwind-merge@1.14.0:
+    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
+    dev: false
+
   /tailwind-merge@2.3.0:
     resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
     dependencies:
@@ -6149,6 +6966,11 @@ packages:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
     dev: false
 
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: false
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -6414,6 +7236,41 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /use-composed-ref@1.3.0(react@18.3.1):
+    resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.3.1
+    dev: false
+
+  /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.3.1
+    dev: false
+
+  /use-latest@1.2.1(@types/react@18.2.20)(react@18.3.1):
+    resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.3.1
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.20)(react@18.3.1)
+    dev: false
+
   /use-sidecar@1.1.2(@types/react@18.2.20)(react@18.3.1):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
@@ -6430,6 +7287,14 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /use-sync-external-store@1.2.2(react@18.3.1):
+    resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -6495,6 +7360,22 @@ packages:
     resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
     dev: false
 
+  /vue@3.4.31(typescript@5.1.6):
+    resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-sfc': 3.4.31
+      '@vue/runtime-dom': 3.4.31
+      '@vue/server-renderer': 3.4.31(vue@3.4.31)
+      '@vue/shared': 3.4.31
+      typescript: 5.1.6
+    dev: false
+
   /web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
     dev: false
@@ -6581,6 +7462,11 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+    dev: false
+
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -6617,10 +7503,22 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /zod-to-json-schema@3.23.1(zod@3.23.8):
+    resolution: {integrity: sha512-oT9INvydob1XV0v1d2IadrR74rLtDInLvDFfAa1CG0Pmg/vxATk7I2gSelfj271mbzeM4Da0uuDQE/Nkj3DWNw==}
+    peerDependencies:
+      zod: ^3.23.3
+    dependencies:
+      zod: 3.23.8
+    dev: false
+
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
 
+  /zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+    dev: false
+
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false
diff --git a/src/app/ask-source/page.tsx b/src/app/ask-source/page.tsx
index 2457bb13b..bd07928ed 100644
--- a/src/app/ask-source/page.tsx
+++ b/src/app/ask-source/page.tsx
@@ -1,124 +1,13 @@
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
+import React from 'react';
+import { Chatbot } from '@/components/chatbot/chatbot-page';
 
-interface Message {
-  sender: 'bot' | 'user';
-  text: string;
-}
+const AskSourceChat = () => (
+  <>
+    <Chatbot className='overflow-y-auto' />
+    <div className="hidden lg:block lg:w-22 xl:w-22" />
+  </>
+)
 
-const AskSourceChat = () => {
-  const [messages, setMessages] = useState<Message[]>([
-    { sender: 'bot', text: 'Hello! How can I help you today?' },
-    { sender: 'user', text: 'What is Sourcegraph? What is Sourcegraph? What is Sourcegraph? What is Sourcegraph? What is Sourcegraph?' },
-    { sender: 'bot', text: 'Sourcegraph is a code search and intelligence tool. Sourcegraph is a code search and intelligence tool.' }
-  ]);
-  const [inputValue, setInputValue] = useState('');
-  const [charCount, setCharCount] = useState(0);
-  const [isLoggedIn, setIsLoggedIn] = useState(true); // Add state for user login
-  const charLimit = 250;
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    setCharCount(e.target.value.length);
-  };
-
-  const handleSendMessage = () => {
-    if (inputValue.trim() === '') return;
-
-    setMessages([...messages, { sender: 'user', text: inputValue }]);
-    setInputValue('');
-    setCharCount(0);
-
-    // Dummy bot response
-    setTimeout(() => {
-      setMessages(prevMessages => [...prevMessages, { sender: 'bot', text: 'Thank you for your message!' }]);
-      scrollToBottom();
-    }, 1000);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleSendMessage();
-    }
-  };
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  return (
-    <>
-      <div className="flex flex-col h-[calc(100vh-90px)] p-4">
-        <div className="flex-shrink-0 mb-4">
-          <h1 className="text-2xl font-bold">Ask Sourcegraph</h1>
-          <p className="text-sm text-gray-600 dark:text-gray-400">Get information faster by asking our AI chatbot assistant.</p>
-        </div>
-        <div className="flex-1 no-scrollbar overflow-y-auto mb-4">
-          {messages.map((message, index) => (
-            <div
-              key={index}
-              className={clsx('flex mb-4', {
-                'justify-end': message.sender === 'user',
-                'justify-start': message.sender === 'bot'
-              })}
-            >
-              {message.sender === 'bot' && (
-                <div className="flex-shrink-0 mr-2">
-                  <div className="rounded-full h-10 w-10 p-1.5 flex items-center justify-center bg-gray-200 dark:bg-gray-700">
-                    <SourceGraphIcon />
-                  </div>
-                </div>
-              )}
-              <div className={clsx('p-2 rounded-lg max-w-[90%]', {
-                'bg-[#62BECC] text-white justify-end': message.sender === 'user',
-                'bg-gray-200 dark:bg-gray-600 text-black dark:text-white justify-start': message.sender === 'bot'
-              })}>
-                {message.text}
-              </div>
-            </div>
-          ))}
-          <div ref={messagesEndRef} />
-        </div>
-        {!isLoggedIn && (
-          <div className="flex items-center justify-center h-full">
-            <button className="p-3 text-white w-48 bg-[#62BECC] rounded-md shadow-md font-bold">
-              Log in to unlock
-            </button>
-          </div>
-        )}
-          <div className="flex-shrink-0">
-            <div className="flex items-center">
-              <input
-                type="text"
-                className="flex-1 p-2 border border-gray-300 dark:border-gray-700 rounded-md mr-2 focus:outline-none focus:ring-2 focus:ring-[#62BECC] focus:border-transparent"
-                value={inputValue}
-                onChange={handleInputChange}
-                onKeyDown={handleKeyDown}
-                maxLength={charLimit}
-                placeholder="Follow up..."
-                disabled={!isLoggedIn}
-              />
-              <button
-                className="p-2 text-white bg-[#62BECC] rounded-md shadow-md"
-                onClick={handleSendMessage}
-              >
-                Send
-              </button>
-            </div>
-            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{charCount}/{charLimit}</p>
-          </div>
-      </div>
-      <div className="hidden lg:block lg:w-64 xl:w-72"></div>
-    </>
-  );
-};
-
-export default AskSourceChat;
+export default AskSourceChat
diff --git a/src/components/chatbot/chat-input.tsx b/src/components/chatbot/chat-input.tsx
new file mode 100644
index 000000000..5ec9924f0
--- /dev/null
+++ b/src/components/chatbot/chat-input.tsx
@@ -0,0 +1,75 @@
+import { type UseChatHelpers } from 'ai/react'
+
+import { PromptForm } from './prompt-form'
+import { Button } from './ui/button'
+import { IconRegenerate, IconStop } from './ui/icons'
+
+export interface ChatInputProps
+  extends Pick<
+    UseChatHelpers,
+    | 'append'
+    | 'isLoading'
+    | 'reload'
+    | 'messages'
+    | 'stop'
+    | 'input'
+    | 'setInput'
+  > {
+  id?: string
+}
+
+export function ChatInput({
+  id,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages
+}: ChatInputProps) {
+  return (
+    <div className="bottom-0">
+      <div className="xbg-muted mx-auto max-w-3xl sm:max-w-4xl">
+        <div className="flex h-10 items-center justify-center">
+          {isLoading ? (
+            <Button
+              variant="outline"
+              onClick={() => stop()}
+              className="bg-background"
+              size={'sm'}
+            >
+              <IconStop className="text-muted-foreground/50 group-hover:text-background" />
+              Stop generating
+            </Button>
+          ) : (
+            messages?.length > 0 && (
+              <Button
+                variant="outline"
+                onClick={() => reload()}
+                className="bg-background"
+                size={'sm'}
+              >
+                <IconRegenerate className="size-4 text-muted-foreground/50 group-hover:text-background" />
+                Regenerate response
+              </Button>
+            )
+          )}
+        </div>
+        <div className="space-y-4 py-2 md:pb-4 md:pt-2">
+          <PromptForm
+            onSubmit={async value => {
+              await append({
+                content: value,
+                role: 'user'
+              })
+            }}
+            input={input}
+            setInput={setInput}
+            isLoading={isLoading}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
new file mode 100644
index 000000000..446ab2e61
--- /dev/null
+++ b/src/components/chatbot/chat-list.tsx
@@ -0,0 +1,23 @@
+import { type Message } from 'ai'
+
+import { Separator } from './ui/separator'
+import { ChatMessage } from './chat-message'
+
+export interface ChatList {
+  messages: Message[]
+}
+
+export function ChatList({ messages }: ChatList) {
+  return (
+    <div className="relative mx-auto max-w-5xl px-10 w-full h-full overflow-y-auto">
+      {messages?.map((message, index) => (
+        <div key={index}>
+          <ChatMessage message={message} />
+          {index < messages.length - 1 && (
+            <Separator className="my-4 md:my-8" />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/chatbot/chat-message-actions.tsx b/src/components/chatbot/chat-message-actions.tsx
new file mode 100644
index 000000000..1037907b4
--- /dev/null
+++ b/src/components/chatbot/chat-message-actions.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { type Message } from 'ai'
+
+import { Button } from './ui/button'
+import { IconCheck, IconCopy } from './ui/icons'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
+import cn from 'mxcn'
+
+interface ChatMessageActionsProps extends React.ComponentProps<'div'> {
+  message: Message
+}
+
+export function ChatMessageActions({
+  message,
+  className,
+  ...props
+}: ChatMessageActionsProps) {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
+
+  const onCopy = () => {
+    if (isCopied) return
+    copyToClipboard(message.content)
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
+        className
+      )}
+      {...props}
+    >
+      <Button variant="ghost" size="icon" onClick={onCopy}>
+        {isCopied ? <IconCheck /> : <IconCopy />}
+        <span className="sr-only">Copy message</span>
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/chatbot/chat-message.tsx b/src/components/chatbot/chat-message.tsx
new file mode 100644
index 000000000..a9bf39065
--- /dev/null
+++ b/src/components/chatbot/chat-message.tsx
@@ -0,0 +1,77 @@
+import { Message } from 'ai'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+
+import { ChatMessageActions } from './chat-message-actions'
+import { MemoizedReactMarkdown } from './markdown'
+import { CodeBlock } from './ui/codeblock'
+import { IconSparkles, IconUser } from './ui/icons'
+import cn from 'mxcn'
+
+export interface ChatMessageProps {
+  message: Message
+}
+
+export function ChatMessage({ message, ...props }: ChatMessageProps) {
+  return (
+    <div
+      className={cn('group relative mb-4 flex items-start')}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-xl border shadow',
+          message.role === 'user'
+            ? 'bg-background'
+            : 'bg-primary text-primary-foreground bg-[#08b2c9]'
+        )}
+      >
+        {message.role === 'user' ? <IconUser /> : <IconSparkles />}
+      </div>
+      <div className="ml-4 flex-1 space-y-2 px-1">
+        <MemoizedReactMarkdown
+          className="prose rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words prose-pre:rounded-xl"
+          remarkPlugins={[remarkGfm, remarkMath]}
+          components={{
+            p({ children }) {
+              return <p className="mb-2 last:mb-0">{children}</p>
+            },
+            code({ node, inline, className, children, ...props }) {
+              if (children.length) {
+                if (children[0] == '▍') {
+                  return (
+                    <span className="mt-1 animate-pulse cursor-default">▍</span>
+                  )
+                }
+
+                children[0] = (children[0] as string).replace('`▍`', '▍')
+              }
+
+              const match = /language-(\w+)/.exec(className || '')
+
+              if (inline) {
+                return (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                )
+              }
+
+              return (
+                <CodeBlock
+                  key={Math.random()}
+                  language={(match && match[1]) || ''}
+                  value={String(children).replace(/\n$/, '')}
+                  {...props}
+                />
+              )
+            }
+          }}
+        >
+          {message.content}
+        </MemoizedReactMarkdown>
+        <ChatMessageActions message={message} />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/chatbot/chatbot-page.tsx b/src/components/chatbot/chatbot-page.tsx
new file mode 100644
index 000000000..494771ec1
--- /dev/null
+++ b/src/components/chatbot/chatbot-page.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { ChatList } from './chat-list'
+import { useChat, type Message } from 'ai/react'
+import cn from 'mxcn'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { ChatInput } from './chat-input'
+
+export interface ChatProps extends React.ComponentProps<'div'> {
+  id?: string // Optional: Thread ID if you want to persist the chat in a DB
+  initialMessages?: Message[] // Optional: Messages to pre-populate the chat from DB
+}
+
+export function Chatbot({ id, initialMessages, className }: ChatProps) {
+  const [threadId, setThreadId] = useState<null | string>(null)
+  
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useChat({
+      api: '/api/chat',
+      initialMessages,
+      body: { threadId },
+      onResponse(response) {
+        if (response.status !== 200) {
+          console.log('✨ ~ response:', response)
+          toast.error(response.statusText)
+        }
+
+        // Get Thread ID from response header
+        const lbThreadId = response.headers.get('lb-thread-id')
+        setThreadId(lbThreadId)
+      }
+    })
+
+  return (
+    <div className={cn('min-w-0 flex-auto py-16 lg:pl-8 lg:pr-0 xl:px-16 flex flex-col h-[calc(100vh-20px)]', className)}>
+      <div className={cn('flex-1 overflow-y-auto pb-4', className)}>
+        <div className="flex-shrink-0 mb-8">
+          <h1 className="text-2xl font-semibold">Ask Sourcegraph</h1>
+          <p className="subtitle">Get information faster by asking our AI chatbot assistant.</p>
+        </div>
+        <ChatList messages={messages} />
+      </div>
+      <ChatInput
+        id={id}
+        isLoading={isLoading}
+        stop={stop}
+        append={append}
+        reload={reload}
+        messages={messages}
+        input={input}
+        setInput={setInput}
+      />
+    </div>
+  )
+}
diff --git a/src/components/chatbot/header.tsx b/src/components/chatbot/header.tsx
new file mode 100644
index 000000000..a6dfc4948
--- /dev/null
+++ b/src/components/chatbot/header.tsx
@@ -0,0 +1,47 @@
+import { buttonVariants } from './ui/button'
+import cn from 'mxcn'
+import Link from 'next/link'
+import { IconFork, IconGitHub } from './ui/icons'
+
+export async function Header() {
+  return (
+    <header className="bg-background sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between px-4">
+      <div className="flex h-16 shrink-0 items-center">
+        <h1>
+          <Link href="/" className="font-bold">
+            <span
+              aria-hidden="true"
+              className="border-muted-foreground/10 bg-muted mr-1 select-none rounded-lg border px-[0.2rem] py-[0.1rem] text-sm font-bold shadow-2xl"
+            >
+              ⌘
+            </span>
+            Langbase
+          </Link>
+        </h1>
+      </div>
+
+      <div className="flex items-center justify-end space-x-2">
+        <a
+          target="_blank"
+          href="https://github.com/LangbaseInc/langbase-examples/tree/main/examples/ai-chatbot"
+          rel="noopener noreferrer"
+          className={cn(buttonVariants({ variant: 'outline' }))}
+        >
+          <IconGitHub />
+          <span className="hidden md:flex">GitHub</span>
+        </a>
+        <a
+          target="_blank"
+          href="https://beta.langbase.com/examples/ai-chatbot"
+          rel="noopener noreferrer"
+          className={cn(buttonVariants({ variant: 'default' }))}
+        >
+          <IconFork />
+          <span className="hidden md:flex gap-1">
+            Fork on <span className="font-bold">Langbase</span>
+          </span>
+        </a>
+      </div>
+    </header>
+  )
+}
diff --git a/src/components/chatbot/markdown.tsx b/src/components/chatbot/markdown.tsx
new file mode 100644
index 000000000..d4491467a
--- /dev/null
+++ b/src/components/chatbot/markdown.tsx
@@ -0,0 +1,9 @@
+import { FC, memo } from 'react'
+import ReactMarkdown, { Options } from 'react-markdown'
+
+export const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className
+)
diff --git a/src/components/chatbot/opening.tsx b/src/components/chatbot/opening.tsx
new file mode 100644
index 000000000..f14817c25
--- /dev/null
+++ b/src/components/chatbot/opening.tsx
@@ -0,0 +1,81 @@
+import Link from 'next/link'
+
+export function Opening() {
+  return (
+    <div className="mx-auto max-w-3xl px-2 sm:max-w-4xl sm:px-0">
+      <div className="light:ring-ring:ring-border ring-ring/10 relative my-7 rounded-lg py-3.5 pl-[1.625rem] pr-4 ring-1 ring-inset [--callout-border:theme(colors.indigo.400)] [--callout-icon:theme(colors.indigo.400)] [--callout-title:theme(colors.indigo.400)] dark:[--callout-border:theme(colors.indigo.400)] dark:[--callout-icon:theme(colors.indigo.400)] dark:[--callout-title:theme(colors.indigo.400)] [&>*]:my-0 [&>*]:py-0">
+        <div className="absolute inset-y-2 left-2 w-0.5 rounded-full bg-[--callout-border]"></div>
+        <div className="mb-2 mt-0 flex items-center justify-start gap-1">
+          <span className="text-xs font-medium text-[--callout-title]">
+            Chatbot Example
+          </span>
+        </div>
+
+        <div className="mt-2">
+          <header className="mb-8">
+            <h4 className="text-foreground text-sm sm:text-base mt-4 flex gap-1 tracking-wide">
+              <span>AI Chatbot by a</span>
+              <Link
+                target="_blank"
+                className="underline hover:text-indigo-400 mb-2"
+                href="https://beta.langbase.com/examples/ai-chatbot"
+              >
+                <span className="font-bold">pipe on ⌘ Langbase</span>
+              </Link>
+            </h4>
+            <h5 className="text-sm text-muted-foreground">
+              Ship hyper-personalized AI assistants with memory.
+            </h5>
+          </header>
+
+          <div className="mt-4 flex flex-col gap-4 text-sm [&>p]:my-0 [&>p]:py-0">
+            <p>Learn more by checking out:</p>
+            <div className="flex flex-col gap-4 mt-2 text-sm">
+              <Dlink href="https://beta.langbase.com/examples/ai-chatbot">
+                <span>1.</span>
+                <span>Fork this AI Chatbot Pipe on ⌘ Langbase</span>
+              </Dlink>
+              <Dlink href="https://github.com/LangbaseInc/langbase-examples/tree/main/examples/ai-chatbot">
+                <span>2.</span>
+                <span>Use LangUI.dev's open source code compnents</span>
+              </Dlink>
+
+              <Dlink href="https://langbase.com/docs/pipe/quickstart">
+                <span>3.</span>
+                <span>Go through Documentaion: Pipe Quickstart </span>
+              </Dlink>
+              <Dlink href="https://langbase.com/docs">
+                <span>4.</span>
+                <span>
+                  Learn more about Pipes & Memory features on ⌘ Langbase
+                </span>
+              </Dlink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Description Link
+function Dlink({
+  href,
+  children,
+  ...props
+}: {
+  href: string
+  children: React.ReactNode
+  [key: string]: any
+}) {
+  return (
+    <Link
+      href={href}
+      target="_blank"
+      className="flex hover:text-indigo-400 flex items-center gap-2 [&>span:first-child]:text-indigo-400"
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
diff --git a/src/components/chatbot/prompt-form.tsx b/src/components/chatbot/prompt-form.tsx
new file mode 100644
index 000000000..dd7cf0e48
--- /dev/null
+++ b/src/components/chatbot/prompt-form.tsx
@@ -0,0 +1,95 @@
+import { Button } from './ui/button'
+import { IconChat, IconCommand, IconSpinner } from './ui/icons'
+import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
+import { UseChatHelpers } from 'ai/react'
+import * as React from 'react'
+import Textarea from 'react-textarea-autosize'
+
+export interface PromptProps
+  extends Pick<UseChatHelpers, 'input' | 'setInput'> {
+  onSubmit: (value: string) => Promise<void>
+  isLoading: boolean
+}
+
+export function PromptForm({
+  onSubmit,
+  input,
+  setInput,
+  isLoading
+}: PromptProps) {
+  const { formRef, onKeyDown } = useEnterSubmit()
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  return (
+    <form
+      onSubmit={async e => {
+        e.preventDefault()
+        if (!input?.trim()) {
+          return
+        }
+        setInput('')
+        await onSubmit(input)
+      }}
+      ref={formRef}
+    >
+      <div className="bg-background dark:bg-dark-bg relative flex max-h-60 w-full grow flex-col overflow-hidden px-2 pb-2 sm:rounded-2xl sm:border">
+        <div className="flex w-full flex-col">
+          <label
+            htmlFor="playground"
+            className="text-config text-foreground flex justify-between gap-y-4 rounded-xl px-3 py-4 font-medium leading-6 md:flex-row md:items-center md:gap-y-0"
+          >
+            <div className="flex items-center gap-x-2">
+              <IconChat
+                className="text-muted-foreground/50 h-5 w-5"
+                aria-hidden="true"
+              />
+              <h3>Chat</h3>
+            </div>
+
+            <div className="flex items-center justify-center gap-2 md:justify-start">
+              {/* Reset chat */}
+              <Button
+                variant="ghost"
+                className="max-w-xs"
+                onClick={e => {
+                  e.preventDefault()
+                  location.reload()
+                }}
+              >
+                Reset
+              </Button>
+              {/* Send button */}
+              <Button type="submit" className='bg-[#08b2c9] hover:bg-[#3ecde0]' disabled={isLoading || input === ''}>
+                {isLoading ? (
+                  <IconSpinner />
+                ) : (
+                  <IconCommand className="size-4" />
+                )}
+                Send
+                <span className="sr-only">Send message</span>
+              </Button>
+            </div>
+          </label>
+        </div>
+        <Textarea
+          ref={inputRef}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          rows={1}
+          maxRows={10}
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          placeholder="Enter your prompt message..."
+          spellCheck={false}
+          className="bg-muted min-h-[60px] w-full resize-none rounded-lg px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+        />
+      </div>
+    </form>
+  )
+}
diff --git a/src/components/chatbot/ui/button.tsx b/src/components/chatbot/ui/button.tsx
new file mode 100644
index 000000000..05452a9ea
--- /dev/null
+++ b/src/components/chatbot/ui/button.tsx
@@ -0,0 +1,70 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import cn from 'mxcn'
+
+const buttonVariants = cva(
+  'focus-visible:ring-ring-muted-foreground/25 inline-flex cursor-pointer select-none items-center justify-center rounded-lg text-sm font-medium transition-colors focus:ring-1 focus:ring-muted-foreground/25 focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 gap-2 group',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        warn: 'bg-warning text-warning-foreground hover:bg-warning/90 shadow-sm',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        'destructive-hover':
+          'border border-input bg-muted font-bold text-destructive shadow-sm hover:bg-destructive hover:text-destructive-foreground',
+        'outline-background':
+          'border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-foreground hover:text-background',
+        'outline-inverse':
+          'border border-input bg-muted-foreground text-muted shadow-sm hover:bg-foreground hover:text-background',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-foreground hover:text-background',
+        'outline-muted':
+          'border border-input bg-muted text-foreground shadow-sm hover:bg-foreground hover:text-background',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        green:
+          'rounded-lg bg-green-500 text-primary shadow-sm hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-800'
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-6 rounded-lg px-2 text-xs',
+        sm: 'h-8 rounded-lg px-3 text-xs',
+        lg: 'h-10 rounded-lg px-8',
+        xl: 'h-14 rounded-lg px-10',
+        icon: 'h-9 w-9'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))+'bg-[#08b2c9] hover:bg-[#3ecde0]'}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/src/components/chatbot/ui/codeblock.tsx b/src/components/chatbot/ui/codeblock.tsx
new file mode 100644
index 000000000..aa8ddbff7
--- /dev/null
+++ b/src/components/chatbot/ui/codeblock.tsx
@@ -0,0 +1,145 @@
+// Inspired by Chatbot-UI and modified to fit the needs of this project
+// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Markdown/CodeBlock.tsx
+
+'use client'
+
+import { FC, memo } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+
+import { Button } from '@/components/ui/button'
+import { IconCheck, IconCopy, IconDownload } from './icons'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
+
+interface Props {
+  language: string
+  value: string
+}
+
+interface languageMap {
+  [key: string]: string | undefined
+}
+
+export const programmingLanguages: languageMap = {
+  javascript: '.js',
+  python: '.py',
+  java: '.java',
+  c: '.c',
+  cpp: '.cpp',
+  'c++': '.cpp',
+  'c#': '.cs',
+  ruby: '.rb',
+  php: '.php',
+  swift: '.swift',
+  'objective-c': '.m',
+  kotlin: '.kt',
+  typescript: '.ts',
+  go: '.go',
+  perl: '.pl',
+  rust: '.rs',
+  scala: '.scala',
+  haskell: '.hs',
+  lua: '.lua',
+  shell: '.sh',
+  sql: '.sql',
+  html: '.html',
+  css: '.css'
+  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+}
+
+export const generateRandomString = (length: number, lowercase = false) => {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXY3456789' // excluding similar looking characters like Z, 2, I, 1, O, 0
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return lowercase ? result.toLowerCase() : result
+}
+
+const CodeBlock: FC<Props> = memo(({ language, value }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
+
+  const downloadAsFile = () => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    const fileExtension = programmingLanguages[language] || '.file'
+    const suggestedFileName = `file-${generateRandomString(
+      3,
+      true
+    )}${fileExtension}`
+    const fileName = window.prompt('Enter file name' || '', suggestedFileName)
+
+    if (!fileName) {
+      // User pressed cancel on prompt.
+      return
+    }
+
+    const blob = new Blob([value], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.download = fileName
+    link.href = url
+    link.style.display = 'none'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  const onCopy = () => {
+    if (isCopied) return
+    copyToClipboard(value)
+  }
+
+  return (
+    <div className="codeblock relative rounded-xl w-full bg-zinc-950 font-sans">
+      <div className="flex w-full rounded-xl items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100">
+        <span className="text-xs lowercase">{language}</span>
+        <div className="flex items-center space-x-1">
+          <Button
+            variant="ghost"
+            className="hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            onClick={downloadAsFile}
+            size="icon"
+          >
+            <IconDownload />
+            <span className="sr-only">Download</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+            onClick={onCopy}
+          >
+            {isCopied ? <IconCheck /> : <IconCopy />}
+            <span className="sr-only">Copy code</span>
+          </Button>
+        </div>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={coldarkDark}
+        PreTag="div"
+        showLineNumbers
+        customStyle={{
+          margin: 0,
+          width: '100%',
+          background: 'transparent',
+          padding: '1.5rem 1rem'
+        }}
+        codeTagProps={{
+          style: {
+            fontSize: '0.9rem',
+            fontFamily: 'var(--font-mono)'
+          }
+        }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  )
+})
+CodeBlock.displayName = 'CodeBlock'
+
+export { CodeBlock }
diff --git a/src/components/chatbot/ui/icons.tsx b/src/components/chatbot/ui/icons.tsx
new file mode 100644
index 000000000..6d1e7203f
--- /dev/null
+++ b/src/components/chatbot/ui/icons.tsx
@@ -0,0 +1,339 @@
+'use client'
+
+import cn from 'mxcn'
+import * as React from 'react'
+
+function IconOpenAI({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <title>OpenAI icon</title>
+      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+    </svg>
+  )
+}
+
+function IconGitHub({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <title>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  )
+}
+
+function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="none"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z" />
+    </svg>
+  )
+}
+
+function IconUser(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M4 20V19C4 16.7909 5.79086 15 8 15H16C18.2091 15 20 16.7909 20 19V20M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
+        stroke="#08b2c9"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+function IconSpinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    >
+      <path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />
+    </svg>
+  )
+}
+
+function IconMessage({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z" />
+    </svg>
+  )
+}
+
+function IconRefresh({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
+    </svg>
+  )
+}
+
+export function IconRegenerate(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5C8.13401 5 5 8.13401 5 12C5 14.3776 6.18526 16.4797 8 17.7455V15C8 14.4477 8.44772 14 9 14C9.55228 14 10 14.4477 10 15V20C10 20.5523 9.55228 21 9 21H4C3.44772 21 3 20.5523 3 20C3 19.4477 3.44772 19 4 19H6.34293C4.30475 17.3508 3 14.8284 3 12C3 7.02944 7.02944 3 12 3C13.1917 3 14.3316 3.23213 15.3752 3.65458C15.8871 3.8618 16.1342 4.4448 15.9269 4.95673C15.7197 5.46867 15.1367 5.71568 14.6248 5.50845C13.8155 5.18088 12.9301 5 12 5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13 21C13.5523 21 14 20.5523 14 20C14 19.4477 13.5523 19 13 19C12.4477 19 12 19.4477 12 20C12 20.5523 12.4477 21 13 21Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21 11C21 10.4477 20.5523 9.99999 20 9.99999C19.4477 9.99999 19 10.4477 19 11C19 11.5523 19.4477 12 20 12C20.5523 12 21 11.5523 21 11Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.9295 14.2679C20.4078 14.5441 20.5716 15.1557 20.2955 15.634C20.0193 16.1123 19.4078 16.2761 18.9295 16C18.4512 15.7238 18.2873 15.1123 18.5634 14.634C18.8396 14.1557 19.4512 13.9918 19.9295 14.2679Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.3676 19.2942C17.8459 19.0181 18.0098 18.4065 17.7336 17.9282C17.4575 17.4499 16.8459 17.286 16.3676 17.5621C15.8893 17.8383 15.7254 18.4499 16.0016 18.9282C16.2777 19.4065 16.8893 19.5703 17.3676 19.2942Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.9269 7.99998C18.4487 8.27612 17.8371 8.11225 17.5609 7.63396C17.2848 7.15566 17.4487 6.54407 17.9269 6.26793C18.4052 5.99179 19.0168 6.15566 19.293 6.63396C19.5691 7.11225 19.4052 7.72384 18.9269 7.99998Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function IconStop({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
+    </svg>
+  )
+}
+
+function IconCopy({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
+    </svg>
+  )
+}
+
+function IconCheck({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
+    </svg>
+  )
+}
+
+function IconDownload({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
+    </svg>
+  )
+}
+
+function IconClose({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z" />
+    </svg>
+  )
+}
+
+function IconSparkles({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={cn('size-4', className)}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+      />
+    </svg>
+  )
+}
+
+export function IconChat(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 9C2 5.68629 4.68629 3 8 3H16C19.3137 3 22 5.68629 22 9V15C22 18.3137 19.3137 21 16 21H3C2.44772 21 2 20.5523 2 20V9ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H15C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H12C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13H9Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function IconInfo({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={cn('size-4', className)}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.75869 3C7.95372 2.99999 7.28937 2.99998 6.74818 3.04419C6.18608 3.09012 5.66937 3.18868 5.18404 3.43598C4.43139 3.81947 3.81947 4.43139 3.43598 5.18404C3.18868 5.66937 3.09012 6.18608 3.04419 6.74818C2.99998 7.28937 2.99999 7.95372 3 8.75869V15.2413C2.99999 16.0463 2.99998 16.7106 3.04419 17.2518C3.09012 17.8139 3.18868 18.3306 3.43598 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.66937 20.8113 6.18608 20.9099 6.74818 20.9558C7.28937 21 7.95372 21 8.75868 21H15.2413C16.0463 21 16.7106 21 17.2518 20.9558C17.8139 20.9099 18.3306 20.8113 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.8113 18.3306 20.9099 17.8139 20.9558 17.2518C21 16.7106 21 16.0463 21 15.2413V8.75868C21 7.95372 21 7.28936 20.9558 6.74818C20.9099 6.18608 20.8113 5.66937 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43598C18.3306 3.18868 17.8139 3.09012 17.2518 3.04419C16.7106 2.99998 16.0463 2.99999 15.2413 3H8.75869ZM9.5 11C9.5 10.4477 9.94772 10 10.5 10H12C12.5523 10 13 10.4477 13 11V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12H10.5C9.94772 12 9.5 11.5523 9.5 11ZM12 7C11.4477 7 11 7.44772 11 8C11 8.55229 11.4477 9 12 9C12.5523 9 13 8.55229 13 8C13 7.44772 12.5523 7 12 7Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function IconFork({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={cn('size-4', className)}
+    >
+      <path
+        d="M3 5.5C3 3.567 4.567 2 6.5 2C8.433 2 10 3.567 10 5.5C10 7.08551 8.94574 8.42479 7.5 8.85506V11H11C11.3643 11 11.7058 11.0974 12 11.2676C12.2942 11.0974 12.6357 11 13 11H16.5V8.85506C15.0543 8.42479 14 7.08551 14 5.5C14 3.567 15.567 2 17.5 2C19.433 2 21 3.567 21 5.5C21 7.08551 19.9457 8.42479 18.5 8.85506V11C18.5 12.1046 17.6046 13 16.5 13H13V15.1449C14.4457 15.5752 15.5 16.9145 15.5 18.5C15.5 20.433 13.933 22 12 22C10.067 22 8.5 20.433 8.5 18.5C8.5 16.9145 9.55426 15.5752 11 15.1449V13H7.5C6.39543 13 5.5 12.1046 5.5 11V8.85506C4.05426 8.42479 3 7.08551 3 5.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconCommand(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5V8H14V6.5C14 4.567 15.567 3 17.5 3C19.433 3 21 4.567 21 6.5C21 8.433 19.433 10 17.5 10H16V14H17.5C19.433 14 21 15.567 21 17.5C21 19.433 19.433 21 17.5 21C15.567 21 14 19.433 14 17.5V16H10V17.5C10 19.433 8.433 21 6.5 21C4.567 21 3 19.433 3 17.5C3 15.567 4.567 14 6.5 14H8V10H6.5C4.567 10 3 8.433 3 6.5ZM8 8V6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8H8ZM10 10V14H14V10H10ZM8 16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19C7.32843 19 8 18.3284 8 17.5V16ZM16 16V17.5C16 18.3284 16.6716 19 17.5 19C18.3284 19 19 18.3284 19 17.5C19 16.6716 18.3284 16 17.5 16H16ZM16 8H17.5C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5V8Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export {
+  IconArrowRight,
+  IconCheck,
+  IconClose,
+  IconCopy,
+  IconDownload,
+  IconFork,
+  IconGitHub,
+  IconInfo,
+  IconMessage,
+  IconOpenAI,
+  IconRefresh,
+  IconSparkles,
+  IconSpinner,
+  IconStop,
+  IconUser
+}
diff --git a/src/components/chatbot/ui/separator.tsx b/src/components/chatbot/ui/separator.tsx
new file mode 100644
index 000000000..7ba06b3a8
--- /dev/null
+++ b/src/components/chatbot/ui/separator.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import cn from 'mxcn'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal'
+          ? 'h-[2px] w-full border-0 border-b-[1px] border-border bg-muted'
+          : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/components/chatbot/ui/textarea.tsx b/src/components/chatbot/ui/textarea.tsx
new file mode 100644
index 000000000..93b82cb8b
--- /dev/null
+++ b/src/components/chatbot/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import cn from 'mxcn'
+import * as React from 'react'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/src/lib/hooks/use-copy-to-clipboard.tsx b/src/lib/hooks/use-copy-to-clipboard.tsx
new file mode 100644
index 000000000..62f7156dc
--- /dev/null
+++ b/src/lib/hooks/use-copy-to-clipboard.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import * as React from 'react'
+
+export interface useCopyToClipboardProps {
+  timeout?: number
+}
+
+export function useCopyToClipboard({
+  timeout = 2000
+}: useCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = React.useState<Boolean>(false)
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
+      return
+    }
+
+    if (!value) {
+      return
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+    })
+  }
+
+  return { isCopied, copyToClipboard }
+}
diff --git a/src/lib/hooks/use-enter-submit.tsx b/src/lib/hooks/use-enter-submit.tsx
new file mode 100644
index 000000000..d66b2d325
--- /dev/null
+++ b/src/lib/hooks/use-enter-submit.tsx
@@ -0,0 +1,23 @@
+import { useRef, type RefObject } from 'react'
+
+export function useEnterSubmit(): {
+  formRef: RefObject<HTMLFormElement>
+  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
+} {
+  const formRef = useRef<HTMLFormElement>(null)
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>
+  ): void => {
+    if (
+      event.key === 'Enter' &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
+      formRef.current?.requestSubmit()
+      event.preventDefault()
+    }
+  }
+
+  return { formRef, onKeyDown: handleKeyDown }
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 000000000..cd0a5f037
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,11 @@
+import { type Message } from 'ai'
+
+export interface Chat extends Record<string, any> {
+  id: string
+  title: string
+  createdAt: Date
+  userId: string
+  path: string
+  messages: Message[]
+  sharePath?: string
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d084ccade..a1338b0ae 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input)
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}

From b2679b9a7b0ecfe99c6854dea18134c848841078 Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Fri, 5 Jul 2024 01:29:52 +0500
Subject: [PATCH 03/19] Added react-syntax-highlighter package

---
 package.json   |  1 +
 pnpm-lock.yaml | 23 ++++++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 0f8e9b439..a3cb83d75 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "sonner": "^1.5.0"
 	},
 	"devDependencies": {
+		"@types/react-syntax-highlighter": "^15.5.6",
 		"eslint": "8.45.0",
 		"eslint-config-next": "13.4.16",
 		"prettier": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cde9fed92..9badf5ab4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,7 +61,7 @@ dependencies:
     version: 4.22.1
   autoprefixer:
     specifier: ^10.4.12
-    version: 10.4.16(postcss@8.4.32)
+    version: 10.4.16(postcss@8.4.39)
   class-variance-authority:
     specifier: ^0.7.0
     version: 0.7.0
@@ -169,6 +169,9 @@ dependencies:
     version: 5.0.0
 
 devDependencies:
+  '@types/react-syntax-highlighter':
+    specifier: ^15.5.6
+    version: 15.5.13
   eslint:
     specifier: 8.45.0
     version: 8.45.0
@@ -2201,7 +2204,6 @@ packages:
 
   /@types/prop-types@15.7.11:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
-    dev: false
 
   /@types/react-dom@18.2.7:
     resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
@@ -2215,13 +2217,18 @@ packages:
       '@types/react': 18.2.20
     dev: false
 
+  /@types/react-syntax-highlighter@15.5.13:
+    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
+    dependencies:
+      '@types/react': 18.2.20
+    dev: true
+
   /@types/react@18.2.20:
     resolution: {integrity: sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==}
     dependencies:
       '@types/prop-types': 15.7.11
       '@types/scheduler': 0.16.8
       csstype: 3.1.3
-    dev: false
 
   /@types/resolve@1.20.6:
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
@@ -2229,7 +2236,6 @@ packages:
 
   /@types/scheduler@0.16.8:
     resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
-    dev: false
 
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
@@ -2616,7 +2622,7 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
-  /autoprefixer@10.4.16(postcss@8.4.32):
+  /autoprefixer@10.4.16(postcss@8.4.39):
     resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -2628,7 +2634,7 @@ packages:
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.32
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
     dev: false
 
@@ -2970,7 +2976,7 @@ packages:
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
     dependencies:
       mdn-data: 2.0.30
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: false
 
   /cssesc@3.0.0:
@@ -2981,7 +2987,6 @@ packages:
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-    dev: false
 
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -6809,7 +6814,7 @@ packages:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.20
+      '@jridgewell/trace-mapping': 0.3.25
       '@types/estree': 1.0.5
       acorn: 8.11.2
       aria-query: 5.3.0

From 79a73296dba46dba5ef1ac129a0e7da900b112c9 Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Thu, 11 Jul 2024 17:05:03 +0500
Subject: [PATCH 04/19] Fixed scroll issue and added chatbot route

---
 src/app/api/chat/route.ts               | 52 +++++++++++++++++++++++++
 src/components/chatbot/chat-list.tsx    |  4 ++
 src/components/chatbot/chatbot-page.tsx |  4 --
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/app/api/chat/route.ts

diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
new file mode 100644
index 000000000..ae8cdb758
--- /dev/null
+++ b/src/app/api/chat/route.ts
@@ -0,0 +1,52 @@
+export const runtime = 'edge'
+
+/**
+ * Stream AI Chat Messages from Langbase
+ *
+ * @param req
+ * @returns
+ */
+export async function POST(req: Request) {
+  try {
+    console.log('NEXT_LB_PIPE_API_KEY: ', process.env?.NEXT_LB_PIPE_API_KEY)
+    if (!process.env.NEXT_LB_PIPE_API_KEY) {
+      throw new Error(
+        'Please set NEXT_LB_PIPE_API_KEY in your environment variables.'
+      )
+    }
+
+    const endpointUrl = 'https://api.langbase.com/beta/chat'
+    const headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${process.env.NEXT_LB_PIPE_API_KEY}`
+    }
+
+    // Get chat prompt messages and threadId from the client.
+    const body = await req.json()
+    const { messages, threadId } = body
+
+    const requestBody = {
+      messages,
+      ...(threadId && { threadId }) // Only include threadId if it exists
+    }
+
+    // Send the request to Langbase API.
+    const response = await fetch(endpointUrl, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(requestBody)
+    })
+
+    if (!response.ok) {
+      const res = await response.json()
+      throw new Error(`Error ${res.error.status}: ${res.error.message}`)
+    }
+
+    return new Response(response.body as ReadableStream<Uint8Array>, {
+      headers: response.headers
+    })
+  } catch (error: any) {
+    console.error('Uncaught API Error:', error)
+    return new Response(JSON.stringify(error), { status: 500 })
+  }
+}
diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index 446ab2e61..3987928fb 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -10,6 +10,10 @@ export interface ChatList {
 export function ChatList({ messages }: ChatList) {
   return (
     <div className="relative mx-auto max-w-5xl px-10 w-full h-full overflow-y-auto">
+      <div className="flex-shrink-0 mb-8">
+        <h1 className="text-2xl font-semibold">Ask Sourcegraph</h1>
+        <p className="subtitle">Get information faster by asking our AI chatbot assistant.</p>
+      </div>
       {messages?.map((message, index) => (
         <div key={index}>
           <ChatMessage message={message} />
diff --git a/src/components/chatbot/chatbot-page.tsx b/src/components/chatbot/chatbot-page.tsx
index 494771ec1..690b36e3c 100644
--- a/src/components/chatbot/chatbot-page.tsx
+++ b/src/components/chatbot/chatbot-page.tsx
@@ -35,10 +35,6 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
   return (
     <div className={cn('min-w-0 flex-auto py-16 lg:pl-8 lg:pr-0 xl:px-16 flex flex-col h-[calc(100vh-20px)]', className)}>
       <div className={cn('flex-1 overflow-y-auto pb-4', className)}>
-        <div className="flex-shrink-0 mb-8">
-          <h1 className="text-2xl font-semibold">Ask Sourcegraph</h1>
-          <p className="subtitle">Get information faster by asking our AI chatbot assistant.</p>
-        </div>
         <ChatList messages={messages} />
       </div>
       <ChatInput

From c6c397cda9ce012c6942e1243d94ed1c67048e8d Mon Sep 17 00:00:00 2001
From: Ahmad Bilal <ahmadbilaldev@gmail.com>
Date: Thu, 11 Jul 2024 20:07:22 +0500
Subject: [PATCH 05/19] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatbot/ui/icons.tsx | 493 +++++++++-------------------
 src/components/icons/UserIcon.tsx   |  19 ++
 2 files changed, 182 insertions(+), 330 deletions(-)
 create mode 100644 src/components/icons/UserIcon.tsx

diff --git a/src/components/chatbot/ui/icons.tsx b/src/components/chatbot/ui/icons.tsx
index 6d1e7203f..c2950f619 100644
--- a/src/components/chatbot/ui/icons.tsx
+++ b/src/components/chatbot/ui/icons.tsx
@@ -1,339 +1,172 @@
-'use client'
-
-import cn from 'mxcn'
-import * as React from 'react'
-
-function IconOpenAI({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <title>OpenAI icon</title>
-      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-    </svg>
-  )
-}
-
-function IconGitHub({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <title>GitHub</title>
-      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-    </svg>
-  )
-}
-
-function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="none"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z" />
-    </svg>
-  )
-}
-
-function IconUser(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M4 20V19C4 16.7909 5.79086 15 8 15H16C18.2091 15 20 16.7909 20 19V20M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
-        stroke="#08b2c9"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  )
-}
-
-function IconSpinner({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4 animate-spin', className)}
-      {...props}
-    >
-      <path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />
-    </svg>
-  )
-}
-
-function IconMessage({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z" />
-    </svg>
-  )
-}
-
-function IconRefresh({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
-    </svg>
-  )
+'use client';
+
+import cn from 'mxcn';
+import * as React from 'react';
+
+function IconSpinner({className, ...props}: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			fill="currentColor"
+			className={cn('size-4 animate-spin', className)}
+			{...props}
+		>
+			<path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />
+		</svg>
+	);
+}
+
+function IconMessage({className, ...props}: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			fill="currentColor"
+			className={cn('size-4', className)}
+			{...props}
+		>
+			<path d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z" />
+		</svg>
+	);
+}
+
+function IconRefresh({className, ...props}: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			fill="currentColor"
+			className={cn('size-4', className)}
+			{...props}
+		>
+			<path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
+		</svg>
+	);
 }
 
 export function IconRegenerate(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 5C8.13401 5 5 8.13401 5 12C5 14.3776 6.18526 16.4797 8 17.7455V15C8 14.4477 8.44772 14 9 14C9.55228 14 10 14.4477 10 15V20C10 20.5523 9.55228 21 9 21H4C3.44772 21 3 20.5523 3 20C3 19.4477 3.44772 19 4 19H6.34293C4.30475 17.3508 3 14.8284 3 12C3 7.02944 7.02944 3 12 3C13.1917 3 14.3316 3.23213 15.3752 3.65458C15.8871 3.8618 16.1342 4.4448 15.9269 4.95673C15.7197 5.46867 15.1367 5.71568 14.6248 5.50845C13.8155 5.18088 12.9301 5 12 5Z"
-        fill="currentColor"
-      />
-      <path
-        d="M13 21C13.5523 21 14 20.5523 14 20C14 19.4477 13.5523 19 13 19C12.4477 19 12 19.4477 12 20C12 20.5523 12.4477 21 13 21Z"
-        fill="currentColor"
-      />
-      <path
-        d="M21 11C21 10.4477 20.5523 9.99999 20 9.99999C19.4477 9.99999 19 10.4477 19 11C19 11.5523 19.4477 12 20 12C20.5523 12 21 11.5523 21 11Z"
-        fill="currentColor"
-      />
-      <path
-        d="M19.9295 14.2679C20.4078 14.5441 20.5716 15.1557 20.2955 15.634C20.0193 16.1123 19.4078 16.2761 18.9295 16C18.4512 15.7238 18.2873 15.1123 18.5634 14.634C18.8396 14.1557 19.4512 13.9918 19.9295 14.2679Z"
-        fill="currentColor"
-      />
-      <path
-        d="M17.3676 19.2942C17.8459 19.0181 18.0098 18.4065 17.7336 17.9282C17.4575 17.4499 16.8459 17.286 16.3676 17.5621C15.8893 17.8383 15.7254 18.4499 16.0016 18.9282C16.2777 19.4065 16.8893 19.5703 17.3676 19.2942Z"
-        fill="currentColor"
-      />
-      <path
-        d="M18.9269 7.99998C18.4487 8.27612 17.8371 8.11225 17.5609 7.63396C17.2848 7.15566 17.4487 6.54407 17.9269 6.26793C18.4052 5.99179 19.0168 6.15566 19.293 6.63396C19.5691 7.11225 19.4052 7.72384 18.9269 7.99998Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-function IconStop({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
-    </svg>
-  )
-}
-
-function IconCopy({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
-    </svg>
-  )
-}
-
-function IconCheck({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
-    </svg>
-  )
-}
-
-function IconDownload({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
-    </svg>
-  )
-}
-
-function IconClose({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z" />
-    </svg>
-  )
-}
-
-function IconSparkles({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={cn('size-4', className)}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
-      />
-    </svg>
-  )
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M12 5C8.13401 5 5 8.13401 5 12C5 14.3776 6.18526 16.4797 8 17.7455V15C8 14.4477 8.44772 14 9 14C9.55228 14 10 14.4477 10 15V20C10 20.5523 9.55228 21 9 21H4C3.44772 21 3 20.5523 3 20C3 19.4477 3.44772 19 4 19H6.34293C4.30475 17.3508 3 14.8284 3 12C3 7.02944 7.02944 3 12 3C13.1917 3 14.3316 3.23213 15.3752 3.65458C15.8871 3.8618 16.1342 4.4448 15.9269 4.95673C15.7197 5.46867 15.1367 5.71568 14.6248 5.50845C13.8155 5.18088 12.9301 5 12 5Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M13 21C13.5523 21 14 20.5523 14 20C14 19.4477 13.5523 19 13 19C12.4477 19 12 19.4477 12 20C12 20.5523 12.4477 21 13 21Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M21 11C21 10.4477 20.5523 9.99999 20 9.99999C19.4477 9.99999 19 10.4477 19 11C19 11.5523 19.4477 12 20 12C20.5523 12 21 11.5523 21 11Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M19.9295 14.2679C20.4078 14.5441 20.5716 15.1557 20.2955 15.634C20.0193 16.1123 19.4078 16.2761 18.9295 16C18.4512 15.7238 18.2873 15.1123 18.5634 14.634C18.8396 14.1557 19.4512 13.9918 19.9295 14.2679Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M17.3676 19.2942C17.8459 19.0181 18.0098 18.4065 17.7336 17.9282C17.4575 17.4499 16.8459 17.286 16.3676 17.5621C15.8893 17.8383 15.7254 18.4499 16.0016 18.9282C16.2777 19.4065 16.8893 19.5703 17.3676 19.2942Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M18.9269 7.99998C18.4487 8.27612 17.8371 8.11225 17.5609 7.63396C17.2848 7.15566 17.4487 6.54407 17.9269 6.26793C18.4052 5.99179 19.0168 6.15566 19.293 6.63396C19.5691 7.11225 19.4052 7.72384 18.9269 7.99998Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}
+
+function IconStop({className, ...props}: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			fill="currentColor"
+			className={cn('size-4', className)}
+			{...props}
+		>
+			<path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
+		</svg>
+	);
+}
+
+function IconCopy({className, ...props}: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			fill="currentColor"
+			className={cn('size-4', className)}
+			{...props}
+		>
+			<path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" />
+		</svg>
+	);
+}
+
+function IconCheck({className, ...props}: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			fill="currentColor"
+			className={cn('size-4', className)}
+			{...props}
+		>
+			<path d="m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" />
+		</svg>
+	);
+}
+
+function IconDownload({className, ...props}: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 256 256"
+			fill="currentColor"
+			className={cn('size-4', className)}
+			{...props}
+		>
+			<path d="M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" />
+		</svg>
+	);
 }
 
 export function IconChat(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2 9C2 5.68629 4.68629 3 8 3H16C19.3137 3 22 5.68629 22 9V15C22 18.3137 19.3137 21 16 21H3C2.44772 21 2 20.5523 2 20V9ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H15C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H12C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13H9Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-function IconInfo({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      className={cn('size-4', className)}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.75869 3C7.95372 2.99999 7.28937 2.99998 6.74818 3.04419C6.18608 3.09012 5.66937 3.18868 5.18404 3.43598C4.43139 3.81947 3.81947 4.43139 3.43598 5.18404C3.18868 5.66937 3.09012 6.18608 3.04419 6.74818C2.99998 7.28937 2.99999 7.95372 3 8.75869V15.2413C2.99999 16.0463 2.99998 16.7106 3.04419 17.2518C3.09012 17.8139 3.18868 18.3306 3.43598 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.66937 20.8113 6.18608 20.9099 6.74818 20.9558C7.28937 21 7.95372 21 8.75868 21H15.2413C16.0463 21 16.7106 21 17.2518 20.9558C17.8139 20.9099 18.3306 20.8113 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.8113 18.3306 20.9099 17.8139 20.9558 17.2518C21 16.7106 21 16.0463 21 15.2413V8.75868C21 7.95372 21 7.28936 20.9558 6.74818C20.9099 6.18608 20.8113 5.66937 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43598C18.3306 3.18868 17.8139 3.09012 17.2518 3.04419C16.7106 2.99998 16.0463 2.99999 15.2413 3H8.75869ZM9.5 11C9.5 10.4477 9.94772 10 10.5 10H12C12.5523 10 13 10.4477 13 11V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12H10.5C9.94772 12 9.5 11.5523 9.5 11ZM12 7C11.4477 7 11 7.44772 11 8C11 8.55229 11.4477 9 12 9C12.5523 9 13 8.55229 13 8C13 7.44772 12.5523 7 12 7Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-function IconFork({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      className={cn('size-4', className)}
-    >
-      <path
-        d="M3 5.5C3 3.567 4.567 2 6.5 2C8.433 2 10 3.567 10 5.5C10 7.08551 8.94574 8.42479 7.5 8.85506V11H11C11.3643 11 11.7058 11.0974 12 11.2676C12.2942 11.0974 12.6357 11 13 11H16.5V8.85506C15.0543 8.42479 14 7.08551 14 5.5C14 3.567 15.567 2 17.5 2C19.433 2 21 3.567 21 5.5C21 7.08551 19.9457 8.42479 18.5 8.85506V11C18.5 12.1046 17.6046 13 16.5 13H13V15.1449C14.4457 15.5752 15.5 16.9145 15.5 18.5C15.5 20.433 13.933 22 12 22C10.067 22 8.5 20.433 8.5 18.5C8.5 16.9145 9.55426 15.5752 11 15.1449V13H7.5C6.39543 13 5.5 12.1046 5.5 11V8.85506C4.05426 8.42479 3 7.08551 3 5.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-export function IconCommand(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5V8H14V6.5C14 4.567 15.567 3 17.5 3C19.433 3 21 4.567 21 6.5C21 8.433 19.433 10 17.5 10H16V14H17.5C19.433 14 21 15.567 21 17.5C21 19.433 19.433 21 17.5 21C15.567 21 14 19.433 14 17.5V16H10V17.5C10 19.433 8.433 21 6.5 21C4.567 21 3 19.433 3 17.5C3 15.567 4.567 14 6.5 14H8V10H6.5C4.567 10 3 8.433 3 6.5ZM8 8V6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8H8ZM10 10V14H14V10H10ZM8 16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19C7.32843 19 8 18.3284 8 17.5V16ZM16 16V17.5C16 18.3284 16.6716 19 17.5 19C18.3284 19 19 18.3284 19 17.5C19 16.6716 18.3284 16 17.5 16H16ZM16 8H17.5C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5V8Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M2 9C2 5.68629 4.68629 3 8 3H16C19.3137 3 22 5.68629 22 9V15C22 18.3137 19.3137 21 16 21H3C2.44772 21 2 20.5523 2 20V9ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H15C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H12C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13H9Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
 }
 
 export {
-  IconArrowRight,
-  IconCheck,
-  IconClose,
-  IconCopy,
-  IconDownload,
-  IconFork,
-  IconGitHub,
-  IconInfo,
-  IconMessage,
-  IconOpenAI,
-  IconRefresh,
-  IconSparkles,
-  IconSpinner,
-  IconStop,
-  IconUser
-}
+	IconCheck,
+	IconCopy,
+	IconDownload,
+	IconMessage,
+	IconRefresh,
+	IconSpinner,
+	IconStop
+};
diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx
new file mode 100644
index 000000000..6cd3fc163
--- /dev/null
+++ b/src/components/icons/UserIcon.tsx
@@ -0,0 +1,19 @@
+export function IconUser({className}: {className?: string}) {
+	return (
+		<svg
+			className={className}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+		>
+			<path
+				d="M4 20V19C4 16.7909 5.79086 15 8 15H16C18.2091 15 20 16.7909 20 19V20M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
+				stroke="currentColor"
+				strokeWidth="2"
+				strokeLinecap="round"
+			/>
+		</svg>
+	);
+}

From 97f45f93168618afd95e4dcaf9c1b8e341eb4fe9 Mon Sep 17 00:00:00 2001
From: Ahmad Bilal <ahmadbilaldev@gmail.com>
Date: Thu, 11 Jul 2024 20:07:35 +0500
Subject: [PATCH 06/19] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Separator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatbot/ui/separator.tsx | 54 ++++++++++++-------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/chatbot/ui/separator.tsx b/src/components/chatbot/ui/separator.tsx
index 7ba06b3a8..4c1bae7aa 100644
--- a/src/components/chatbot/ui/separator.tsx
+++ b/src/components/chatbot/ui/separator.tsx
@@ -1,32 +1,32 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-import cn from 'mxcn'
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import cn from 'mxcn';
 
 const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal'
-          ? 'h-[2px] w-full border-0 border-b-[1px] border-border bg-muted'
-          : 'h-full w-[1px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+	(
+		{className, orientation = 'horizontal', decorative = true, ...props},
+		ref
+	) => (
+		<SeparatorPrimitive.Root
+			ref={ref}
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				'shrink-0 bg-border',
+				orientation === 'horizontal'
+					? 'h-[2px] w-full border-0 border-b-[1px] border-light-border-2 bg-light-bg dark:border-dark-border dark:bg-dark-bg'
+					: 'h-full w-[1px]',
+				className
+			)}
+			{...props}
+		/>
+	)
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export {Separator};

From 1af3cb21c533b3ceb7a8070b65105690442279c3 Mon Sep 17 00:00:00 2001
From: Ahmad Bilal <ahmadbilaldev@gmail.com>
Date: Thu, 11 Jul 2024 20:08:03 +0500
Subject: [PATCH 07/19] =?UTF-8?q?=F0=9F=90=9B=20FIX:=20Route=20and=20strea?=
 =?UTF-8?q?ming?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/chat/route.ts | 94 +++++++++++++++++++++------------------
 1 file changed, 51 insertions(+), 43 deletions(-)

diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
index ae8cdb758..e8ad7a330 100644
--- a/src/app/api/chat/route.ts
+++ b/src/app/api/chat/route.ts
@@ -1,4 +1,6 @@
-export const runtime = 'edge'
+import {OpenAIStream, StreamingTextResponse} from 'ai';
+
+export const runtime = 'edge';
 
 /**
  * Stream AI Chat Messages from Langbase
@@ -7,46 +9,52 @@ export const runtime = 'edge'
  * @returns
  */
 export async function POST(req: Request) {
-  try {
-    console.log('NEXT_LB_PIPE_API_KEY: ', process.env?.NEXT_LB_PIPE_API_KEY)
-    if (!process.env.NEXT_LB_PIPE_API_KEY) {
-      throw new Error(
-        'Please set NEXT_LB_PIPE_API_KEY in your environment variables.'
-      )
-    }
-
-    const endpointUrl = 'https://api.langbase.com/beta/chat'
-    const headers = {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${process.env.NEXT_LB_PIPE_API_KEY}`
-    }
-
-    // Get chat prompt messages and threadId from the client.
-    const body = await req.json()
-    const { messages, threadId } = body
-
-    const requestBody = {
-      messages,
-      ...(threadId && { threadId }) // Only include threadId if it exists
-    }
-
-    // Send the request to Langbase API.
-    const response = await fetch(endpointUrl, {
-      method: 'POST',
-      headers,
-      body: JSON.stringify(requestBody)
-    })
-
-    if (!response.ok) {
-      const res = await response.json()
-      throw new Error(`Error ${res.error.status}: ${res.error.message}`)
-    }
-
-    return new Response(response.body as ReadableStream<Uint8Array>, {
-      headers: response.headers
-    })
-  } catch (error: any) {
-    console.error('Uncaught API Error:', error)
-    return new Response(JSON.stringify(error), { status: 500 })
-  }
+	try {
+		console.log(
+			'NEXT_LB_PIPE_API_KEY: ',
+			process.env?.NEXT_LB_PIPE_API_KEY
+		);
+		if (!process.env.NEXT_LB_PIPE_API_KEY) {
+			throw new Error(
+				'Please set NEXT_LB_PIPE_API_KEY in your environment variables.'
+			);
+		}
+
+		const endpointUrl = 'https://api.langbase.com/beta/chat';
+		const headers = {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${process.env.NEXT_LB_PIPE_API_KEY}`
+		};
+
+		// Get chat prompt messages and threadId from the client.
+		const body = await req.json();
+		const {messages, threadId} = body;
+
+		const requestBody = {
+			messages,
+			...(threadId && {threadId}) // Only include threadId if it exists
+		};
+
+		// Send the request to Langbase API.
+		const response = await fetch(endpointUrl, {
+			method: 'POST',
+			headers,
+			body: JSON.stringify(requestBody)
+		});
+
+		if (!response.ok) {
+			const res = await response.json();
+			throw new Error(`Error ${res.error.status}: ${res.error.message}`);
+		}
+
+		// Handle Langbase response, which is a stream in OpenAI format.
+		const stream = OpenAIStream(response);
+		// Respond with a text stream.
+		return new StreamingTextResponse(stream, {
+			headers: response.headers
+		});
+	} catch (error: any) {
+		console.error('Uncaught API Error:', error);
+		return new Response(JSON.stringify(error), {status: 500});
+	}
 }

From 22ea118747da5b24267e212e23ac9c22bacc0569 Mon Sep 17 00:00:00 2001
From: Ahmad Bilal <ahmadbilaldev@gmail.com>
Date: Thu, 11 Jul 2024 20:08:19 +0500
Subject: [PATCH 08/19] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/chat/route.ts               |   4 -
 src/components/chatbot/chat-input.tsx   | 134 +++++++++---------
 src/components/chatbot/chat-list.tsx    |  45 +++---
 src/components/chatbot/chat-message.tsx | 140 ++++++++++---------
 src/components/chatbot/chatbot-page.tsx |  99 ++++++++------
 src/components/chatbot/prompt-form.tsx  | 174 ++++++++++++------------
 6 files changed, 308 insertions(+), 288 deletions(-)

diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
index e8ad7a330..737553273 100644
--- a/src/app/api/chat/route.ts
+++ b/src/app/api/chat/route.ts
@@ -10,10 +10,6 @@ export const runtime = 'edge';
  */
 export async function POST(req: Request) {
 	try {
-		console.log(
-			'NEXT_LB_PIPE_API_KEY: ',
-			process.env?.NEXT_LB_PIPE_API_KEY
-		);
 		if (!process.env.NEXT_LB_PIPE_API_KEY) {
 			throw new Error(
 				'Please set NEXT_LB_PIPE_API_KEY in your environment variables.'
diff --git a/src/components/chatbot/chat-input.tsx b/src/components/chatbot/chat-input.tsx
index 5ec9924f0..6abee0397 100644
--- a/src/components/chatbot/chat-input.tsx
+++ b/src/components/chatbot/chat-input.tsx
@@ -1,75 +1,75 @@
-import { type UseChatHelpers } from 'ai/react'
+import {type UseChatHelpers} from 'ai/react';
 
-import { PromptForm } from './prompt-form'
-import { Button } from './ui/button'
-import { IconRegenerate, IconStop } from './ui/icons'
+import {PromptForm} from './prompt-form';
+import {Button} from './ui/button';
+import {IconRegenerate, IconStop} from './ui/icons';
 
 export interface ChatInputProps
-  extends Pick<
-    UseChatHelpers,
-    | 'append'
-    | 'isLoading'
-    | 'reload'
-    | 'messages'
-    | 'stop'
-    | 'input'
-    | 'setInput'
-  > {
-  id?: string
+	extends Pick<
+		UseChatHelpers,
+		| 'append'
+		| 'isLoading'
+		| 'reload'
+		| 'messages'
+		| 'stop'
+		| 'input'
+		| 'setInput'
+	> {
+	id?: string;
 }
 
 export function ChatInput({
-  id,
-  isLoading,
-  stop,
-  append,
-  reload,
-  input,
-  setInput,
-  messages
+	id,
+	isLoading,
+	stop,
+	append,
+	reload,
+	input,
+	setInput,
+	messages
 }: ChatInputProps) {
-  return (
-    <div className="bottom-0">
-      <div className="xbg-muted mx-auto max-w-3xl sm:max-w-4xl">
-        <div className="flex h-10 items-center justify-center">
-          {isLoading ? (
-            <Button
-              variant="outline"
-              onClick={() => stop()}
-              className="bg-background"
-              size={'sm'}
-            >
-              <IconStop className="text-muted-foreground/50 group-hover:text-background" />
-              Stop generating
-            </Button>
-          ) : (
-            messages?.length > 0 && (
-              <Button
-                variant="outline"
-                onClick={() => reload()}
-                className="bg-background"
-                size={'sm'}
-              >
-                <IconRegenerate className="size-4 text-muted-foreground/50 group-hover:text-background" />
-                Regenerate response
-              </Button>
-            )
-          )}
-        </div>
-        <div className="space-y-4 py-2 md:pb-4 md:pt-2">
-          <PromptForm
-            onSubmit={async value => {
-              await append({
-                content: value,
-                role: 'user'
-              })
-            }}
-            input={input}
-            setInput={setInput}
-            isLoading={isLoading}
-          />
-        </div>
-      </div>
-    </div>
-  )
+	return (
+		<div>
+			<div className="mx-auto max-w-3xl sm:max-w-3xl">
+				<div className="flex h-10 items-center justify-center">
+					{isLoading ? (
+						<Button
+							variant="outline"
+							onClick={() => stop()}
+							className="bg-background"
+							size={'sm'}
+						>
+							<IconStop className="h-5 w-5 text-muted-foreground/50 group-hover:text-background" />
+							Stop generating
+						</Button>
+					) : (
+						messages?.length > 0 && (
+							<Button
+								variant="outline"
+								onClick={() => reload()}
+								className="bg-background"
+								size={'sm'}
+							>
+								<IconRegenerate className="h-5 w-5 text-muted-foreground/50 group-hover:text-background" />
+								Regenerate response
+							</Button>
+						)
+					)}
+				</div>
+				<div className="space-y-4 py-2 md:pb-4 md:pt-2">
+					<PromptForm
+						onSubmit={async value => {
+							await append({
+								content: value,
+								role: 'user'
+							});
+						}}
+						input={input}
+						setInput={setInput}
+						isLoading={isLoading}
+					/>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index 3987928fb..3179977eb 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -1,27 +1,30 @@
-import { type Message } from 'ai'
+import {type Message} from 'ai';
 
-import { Separator } from './ui/separator'
-import { ChatMessage } from './chat-message'
+import {Separator} from './ui/separator';
+import {ChatMessage} from './chat-message';
 
 export interface ChatList {
-  messages: Message[]
+	messages: Message[];
 }
 
-export function ChatList({ messages }: ChatList) {
-  return (
-    <div className="relative mx-auto max-w-5xl px-10 w-full h-full overflow-y-auto">
-      <div className="flex-shrink-0 mb-8">
-        <h1 className="text-2xl font-semibold">Ask Sourcegraph</h1>
-        <p className="subtitle">Get information faster by asking our AI chatbot assistant.</p>
-      </div>
-      {messages?.map((message, index) => (
-        <div key={index}>
-          <ChatMessage message={message} />
-          {index < messages.length - 1 && (
-            <Separator className="my-4 md:my-8" />
-          )}
-        </div>
-      ))}
-    </div>
-  )
+export function ChatList({messages}: ChatList) {
+	return (
+		<div className="relative mx-auto w-full max-w-5xl overflow-y-auto px-10">
+			<div className="mb-8 flex-shrink-0">
+				<h1 className="text-2xl font-semibold">Ask Sourcegraph AI</h1>
+				<p className="subtitle mt-4 opacity-70">
+					Find precise answers to any question about Sourcegraph
+					documentation with our AI chatbot.
+				</p>
+			</div>
+			{messages?.map((message, index) => (
+				<div key={index}>
+					<ChatMessage message={message} />
+					{index < messages.length - 1 && (
+						<Separator className="my-4 md:my-8" />
+					)}
+				</div>
+			))}
+		</div>
+	);
 }
diff --git a/src/components/chatbot/chat-message.tsx b/src/components/chatbot/chat-message.tsx
index a9bf39065..0b0bac197 100644
--- a/src/components/chatbot/chat-message.tsx
+++ b/src/components/chatbot/chat-message.tsx
@@ -1,77 +1,83 @@
-import { Message } from 'ai'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
+import {Message} from 'ai';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
 
-import { ChatMessageActions } from './chat-message-actions'
-import { MemoizedReactMarkdown } from './markdown'
-import { CodeBlock } from './ui/codeblock'
-import { IconSparkles, IconUser } from './ui/icons'
-import cn from 'mxcn'
+import {ChatMessageActions} from './chat-message-actions';
+import {MemoizedReactMarkdown} from './markdown';
+import {CodeBlock} from './ui/codeblock';
+import {IconUser} from '../icons/UserIcon';
+import cn from 'mxcn';
+import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
 
 export interface ChatMessageProps {
-  message: Message
+	message: Message;
 }
 
-export function ChatMessage({ message, ...props }: ChatMessageProps) {
-  return (
-    <div
-      className={cn('group relative mb-4 flex items-start')}
-      {...props}
-    >
-      <div
-        className={cn(
-          'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-xl border shadow',
-          message.role === 'user'
-            ? 'bg-background'
-            : 'bg-primary text-primary-foreground bg-[#08b2c9]'
-        )}
-      >
-        {message.role === 'user' ? <IconUser /> : <IconSparkles />}
-      </div>
-      <div className="ml-4 flex-1 space-y-2 px-1">
-        <MemoizedReactMarkdown
-          className="prose rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words prose-pre:rounded-xl"
-          remarkPlugins={[remarkGfm, remarkMath]}
-          components={{
-            p({ children }) {
-              return <p className="mb-2 last:mb-0">{children}</p>
-            },
-            code({ node, inline, className, children, ...props }) {
-              if (children.length) {
-                if (children[0] == '▍') {
-                  return (
-                    <span className="mt-1 animate-pulse cursor-default">▍</span>
-                  )
-                }
+export function ChatMessage({message, ...props}: ChatMessageProps) {
+	return (
+		<div className={cn('group relative mb-4 flex items-start')} {...props}>
+			<div
+				className={cn(
+					'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-xl border bg-light-bg p-1 text-primary shadow dark:bg-dark-bg'
+				)}
+			>
+				{message.role === 'user' ? (
+					<IconUser className="h-5 w-5" />
+				) : (
+					<SourceGraphIcon className="h-5 w-5" />
+				)}
+			</div>
+			<div className="ml-4 flex-1 space-y-2 px-1">
+				<MemoizedReactMarkdown
+					className="prose break-words rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:rounded-xl prose-pre:p-0"
+					remarkPlugins={[remarkGfm, remarkMath]}
+					components={{
+						p({children}) {
+							return <p className="mb-2 last:mb-0">{children}</p>;
+						},
+						code({node, inline, className, children, ...props}) {
+							if (children.length) {
+								if (children[0] == '▍') {
+									return (
+										<span className="mt-1 animate-pulse cursor-default">
+											▍
+										</span>
+									);
+								}
 
-                children[0] = (children[0] as string).replace('`▍`', '▍')
-              }
+								children[0] = (children[0] as string).replace(
+									'`▍`',
+									'▍'
+								);
+							}
 
-              const match = /language-(\w+)/.exec(className || '')
+							const match = /language-(\w+)/.exec(
+								className || ''
+							);
 
-              if (inline) {
-                return (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                )
-              }
+							if (inline) {
+								return (
+									<code className={className} {...props}>
+										{children}
+									</code>
+								);
+							}
 
-              return (
-                <CodeBlock
-                  key={Math.random()}
-                  language={(match && match[1]) || ''}
-                  value={String(children).replace(/\n$/, '')}
-                  {...props}
-                />
-              )
-            }
-          }}
-        >
-          {message.content}
-        </MemoizedReactMarkdown>
-        <ChatMessageActions message={message} />
-      </div>
-    </div>
-  )
+							return (
+								<CodeBlock
+									key={Math.random()}
+									language={(match && match[1]) || ''}
+									value={String(children).replace(/\n$/, '')}
+									{...props}
+								/>
+							);
+						}
+					}}
+				>
+					{message.content}
+				</MemoizedReactMarkdown>
+				<ChatMessageActions message={message} />
+			</div>
+		</div>
+	);
 }
diff --git a/src/components/chatbot/chatbot-page.tsx b/src/components/chatbot/chatbot-page.tsx
index 690b36e3c..0edfa12c6 100644
--- a/src/components/chatbot/chatbot-page.tsx
+++ b/src/components/chatbot/chatbot-page.tsx
@@ -1,52 +1,63 @@
-'use client'
+'use client';
 
-import { ChatList } from './chat-list'
-import { useChat, type Message } from 'ai/react'
-import cn from 'mxcn'
-import { useState } from 'react'
-import { toast } from 'sonner'
-import { ChatInput } from './chat-input'
+import {ChatList} from './chat-list';
+import {useChat, type Message} from 'ai/react';
+import cn from 'mxcn';
+import {useState} from 'react';
+import {toast} from 'sonner';
+import {ChatInput} from './chat-input';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
-  id?: string // Optional: Thread ID if you want to persist the chat in a DB
-  initialMessages?: Message[] // Optional: Messages to pre-populate the chat from DB
+	id?: string; // Optional: Thread ID if you want to persist the chat in a DB
+	initialMessages?: Message[]; // Optional: Messages to pre-populate the chat from DB
 }
 
-export function Chatbot({ id, initialMessages, className }: ChatProps) {
-  const [threadId, setThreadId] = useState<null | string>(null)
-  
-  const { messages, append, reload, stop, isLoading, input, setInput } =
-    useChat({
-      api: '/api/chat',
-      initialMessages,
-      body: { threadId },
-      onResponse(response) {
-        if (response.status !== 200) {
-          console.log('✨ ~ response:', response)
-          toast.error(response.statusText)
-        }
+export function Chatbot({id, initialMessages, className}: ChatProps) {
+	const [threadId, setThreadId] = useState<null | string>(null);
 
-        // Get Thread ID from response header
-        const lbThreadId = response.headers.get('lb-thread-id')
-        setThreadId(lbThreadId)
-      }
-    })
+	const {messages, append, reload, stop, isLoading, input, setInput} =
+		useChat({
+			api: '/api/chat',
+			initialMessages,
+			body: {threadId},
+			onResponse(response) {
+				if (response.status !== 200) {
+					console.log('✨ ~ response:', response);
+					toast.error(response.statusText);
+				}
 
-  return (
-    <div className={cn('min-w-0 flex-auto py-16 lg:pl-8 lg:pr-0 xl:px-16 flex flex-col h-[calc(100vh-20px)]', className)}>
-      <div className={cn('flex-1 overflow-y-auto pb-4', className)}>
-        <ChatList messages={messages} />
-      </div>
-      <ChatInput
-        id={id}
-        isLoading={isLoading}
-        stop={stop}
-        append={append}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-      />
-    </div>
-  )
+				// Get Thread ID from response header
+				const lbThreadId = response.headers.get('lb-thread-id');
+				setThreadId(lbThreadId);
+			}
+		});
+
+	return (
+		<div
+			className={cn(
+				'relative flex min-h-[80vh] min-w-0 flex-auto flex-col py-16 lg:pl-8 lg:pr-0 xl:px-16',
+				className
+			)}
+		>
+			<div
+				className={cn(
+					'relative max-h-[65vh] flex-1 overflow-y-auto pb-4',
+					className
+				)}
+			>
+				<ChatList messages={messages} />
+			</div>
+
+			<ChatInput
+				id={id}
+				isLoading={isLoading}
+				stop={stop}
+				append={append}
+				reload={reload}
+				messages={messages}
+				input={input}
+				setInput={setInput}
+			/>
+		</div>
+	);
 }
diff --git a/src/components/chatbot/prompt-form.tsx b/src/components/chatbot/prompt-form.tsx
index dd7cf0e48..c6216ccba 100644
--- a/src/components/chatbot/prompt-form.tsx
+++ b/src/components/chatbot/prompt-form.tsx
@@ -1,95 +1,99 @@
-import { Button } from './ui/button'
-import { IconChat, IconCommand, IconSpinner } from './ui/icons'
-import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
-import { UseChatHelpers } from 'ai/react'
-import * as React from 'react'
-import Textarea from 'react-textarea-autosize'
+import {Button} from './ui/button';
+import {IconChat, IconCommand, IconSpinner} from './ui/icons';
+import {useEnterSubmit} from '@/lib/hooks/use-enter-submit';
+import {UseChatHelpers} from 'ai/react';
+import * as React from 'react';
+import Textarea from 'react-textarea-autosize';
+import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
 
 export interface PromptProps
-  extends Pick<UseChatHelpers, 'input' | 'setInput'> {
-  onSubmit: (value: string) => Promise<void>
-  isLoading: boolean
+	extends Pick<UseChatHelpers, 'input' | 'setInput'> {
+	onSubmit: (value: string) => Promise<void>;
+	isLoading: boolean;
 }
 
 export function PromptForm({
-  onSubmit,
-  input,
-  setInput,
-  isLoading
+	onSubmit,
+	input,
+	setInput,
+	isLoading
 }: PromptProps) {
-  const { formRef, onKeyDown } = useEnterSubmit()
-  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+	const {formRef, onKeyDown} = useEnterSubmit();
+	const inputRef = React.useRef<HTMLTextAreaElement>(null);
 
-  React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
+	React.useEffect(() => {
+		if (inputRef.current) {
+			inputRef.current.focus();
+		}
+	}, []);
 
-  return (
-    <form
-      onSubmit={async e => {
-        e.preventDefault()
-        if (!input?.trim()) {
-          return
-        }
-        setInput('')
-        await onSubmit(input)
-      }}
-      ref={formRef}
-    >
-      <div className="bg-background dark:bg-dark-bg relative flex max-h-60 w-full grow flex-col overflow-hidden px-2 pb-2 sm:rounded-2xl sm:border">
-        <div className="flex w-full flex-col">
-          <label
-            htmlFor="playground"
-            className="text-config text-foreground flex justify-between gap-y-4 rounded-xl px-3 py-4 font-medium leading-6 md:flex-row md:items-center md:gap-y-0"
-          >
-            <div className="flex items-center gap-x-2">
-              <IconChat
-                className="text-muted-foreground/50 h-5 w-5"
-                aria-hidden="true"
-              />
-              <h3>Chat</h3>
-            </div>
+	return (
+		<form
+			onSubmit={async e => {
+				e.preventDefault();
+				if (!input?.trim()) {
+					return;
+				}
+				setInput('');
+				await onSubmit(input);
+			}}
+			ref={formRef}
+		>
+			<div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-2 pb-2 dark:bg-dark-bg sm:rounded-2xl sm:border">
+				<div className="flex w-full flex-col">
+					<label
+						htmlFor="playground"
+						className="text-config flex justify-between gap-y-4 rounded-xl px-3 py-4 font-medium leading-6 text-foreground md:flex-row md:items-center md:gap-y-0"
+					>
+						<div className="flex items-center gap-x-2">
+							<IconChat
+								className="h-5 w-5 text-muted-foreground/50"
+								aria-hidden="true"
+							/>
+							<h3>Ask</h3>
+						</div>
 
-            <div className="flex items-center justify-center gap-2 md:justify-start">
-              {/* Reset chat */}
-              <Button
-                variant="ghost"
-                className="max-w-xs"
-                onClick={e => {
-                  e.preventDefault()
-                  location.reload()
-                }}
-              >
-                Reset
-              </Button>
-              {/* Send button */}
-              <Button type="submit" className='bg-[#08b2c9] hover:bg-[#3ecde0]' disabled={isLoading || input === ''}>
-                {isLoading ? (
-                  <IconSpinner />
-                ) : (
-                  <IconCommand className="size-4" />
-                )}
-                Send
-                <span className="sr-only">Send message</span>
-              </Button>
-            </div>
-          </label>
-        </div>
-        <Textarea
-          ref={inputRef}
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-          rows={1}
-          maxRows={10}
-          value={input}
-          onChange={e => setInput(e.target.value)}
-          placeholder="Enter your prompt message..."
-          spellCheck={false}
-          className="bg-muted min-h-[60px] w-full resize-none rounded-lg px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
-        />
-      </div>
-    </form>
-  )
+						<div className="flex items-center justify-center gap-2 md:justify-start">
+							{/* Reset chat */}
+							<Button
+								variant="ghost"
+								className="max-w-xs"
+								onClick={e => {
+									e.preventDefault();
+									location.reload();
+								}}
+							>
+								Reset
+							</Button>
+							{/* Send button */}
+							<Button
+								type="submit"
+								disabled={isLoading || input === ''}
+							>
+								{isLoading ? (
+									<IconSpinner />
+								) : (
+									<SourceGraphIcon className="h-5 w-5" />
+								)}
+								Send
+								<span className="sr-only">Send message</span>
+							</Button>
+						</div>
+					</label>
+				</div>
+				<Textarea
+					ref={inputRef}
+					tabIndex={0}
+					onKeyDown={onKeyDown}
+					rows={1}
+					maxRows={10}
+					value={input}
+					onChange={e => setInput(e.target.value)}
+					placeholder="Ask any question related to Sourcegraph documentation..."
+					spellCheck={false}
+					className="min-h-[60px] w-full resize-none rounded-lg bg-light-bg px-4 py-[1.3rem] focus-within:outline-none dark:bg-dark-bg-1 sm:text-sm"
+				/>
+			</div>
+		</form>
+	);
 }

From 2581ed1fe70d3b740c438e0e258271a6b2b31413 Mon Sep 17 00:00:00 2001
From: Ahmad Bilal <ahmadbilaldev@gmail.com>
Date: Thu, 11 Jul 2024 20:47:40 +0500
Subject: [PATCH 09/19] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20responsiveness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout.tsx | 39 ++++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index b1fe4c290..946ffa809 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,18 +1,18 @@
 'use client';
 
-import { Hero } from '@/components/Hero';
-import { Logo } from '@/components/Logo';
-import { MobileNavigation } from '@/components/MobileNavigation';
-import { Navigation } from '@/components/Navigation';
-import { ThemeSelector } from '@/components/ThemeSelector';
+import {Hero} from '@/components/Hero';
+import {Logo} from '@/components/Logo';
+import {MobileNavigation} from '@/components/MobileNavigation';
+import {Navigation} from '@/components/Navigation';
+import {ThemeSelector} from '@/components/ThemeSelector';
 import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
 import clsx from 'clsx';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { LogoMark } from './LogoMark';
+import {usePathname} from 'next/navigation';
+import {useEffect, useState} from 'react';
+import {LogoMark} from './LogoMark';
 import VersionSelector from './VersionSelector';
-import { Search } from './search/Search';
+import {Search} from './search/Search';
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -30,7 +30,7 @@ function Header() {
 			setIsScrolled(window.scrollY > 0);
 		}
 		onScroll();
-		window.addEventListener('scroll', onScroll, { passive: true });
+		window.addEventListener('scroll', onScroll, {passive: true});
 		return () => {
 			window.removeEventListener('scroll', onScroll);
 		};
@@ -46,7 +46,7 @@ function Header() {
 			)}
 		>
 			<div className="mx-auto flex w-full max-w-8xl items-center justify-between sm:px-2 lg:px-8">
-				<div className="mr-6 flex lg:hidden">
+				<div className="mr-2 flex lg:hidden">
 					<MobileNavigation />
 				</div>
 				<div className="relative flex flex-grow basis-0 items-center">
@@ -65,13 +65,18 @@ function Header() {
 						<LogoMark className="h-6 w-6" />
 					</Link>
 				</div>
-				<div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+				<div className="-my-5 mr-0 sm:mr-8 md:mr-0">
 					<Search />
 				</div>
-				<div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-6 md:flex-grow">
-					<Link href="/ask-source" className="flex items-center gap-2 whitespace-nowrap">
-						<SourceGraphIcon className="h-6 w-6" />
-						<span className="font-semibold">Ask Source</span>
+				<div className="relative ml-3 flex basis-0 items-center justify-end gap-3 sm:ml-4 sm:gap-6 md:flex-grow">
+					<Link
+						href="/ask-source"
+						className="flex items-center gap-3 whitespace-nowrap"
+					>
+						<SourceGraphIcon className="hidden h-6 w-6 sm:block" />
+						<span className="font-semibold">
+							Ask <span className="hidden sm:inline">Source</span>
+						</span>
 					</Link>
 					<VersionSelector />
 					<ThemeSelector className="relative z-10" />
@@ -90,7 +95,7 @@ function Header() {
 	);
 }
 
-export function Layout({ children }: { children: React.ReactNode }) {
+export function Layout({children}: {children: React.ReactNode}) {
 	let pathname = usePathname();
 	let isHomePage = pathname === '/';
 

From 690807d9caca97ac3f847e60ce6305dc3d8183cf Mon Sep 17 00:00:00 2001
From: Ahmad Bilal <ahmadbilaldev@gmail.com>
Date: Thu, 11 Jul 2024 20:47:52 +0500
Subject: [PATCH 10/19] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Chat=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatbot/chat-list.tsx    | 15 +++++++--------
 src/components/chatbot/chat-message.tsx |  8 +++++++-
 src/components/chatbot/chatbot-page.tsx | 11 +++++++++--
 src/components/chatbot/prompt-form.tsx  | 12 +++++++++---
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index 3179977eb..bc053dd7e 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -7,16 +7,15 @@ export interface ChatList {
 	messages: Message[];
 }
 
+const exampleMessage: Message = {
+	content: 'Hello, how can I help you today?',
+	role: 'assistant'
+};
+
 export function ChatList({messages}: ChatList) {
 	return (
-		<div className="relative mx-auto w-full max-w-5xl overflow-y-auto px-10">
-			<div className="mb-8 flex-shrink-0">
-				<h1 className="text-2xl font-semibold">Ask Sourcegraph AI</h1>
-				<p className="subtitle mt-4 opacity-70">
-					Find precise answers to any question about Sourcegraph
-					documentation with our AI chatbot.
-				</p>
-			</div>
+		<div className="relative mx-auto w-full max-w-3xl overflow-y-auto">
+			{messages.length === 0 && <ChatMessage message={exampleMessage} />}
 			{messages?.map((message, index) => (
 				<div key={index}>
 					<ChatMessage message={message} />
diff --git a/src/components/chatbot/chat-message.tsx b/src/components/chatbot/chat-message.tsx
index 0b0bac197..10f3ebf94 100644
--- a/src/components/chatbot/chat-message.tsx
+++ b/src/components/chatbot/chat-message.tsx
@@ -15,7 +15,13 @@ export interface ChatMessageProps {
 
 export function ChatMessage({message, ...props}: ChatMessageProps) {
 	return (
-		<div className={cn('group relative mb-4 flex items-start')} {...props}>
+		<div
+			className={cn(
+				'group relative mb-4 flex',
+				message.content.length > 60 ? 'items-start' : 'items-center'
+			)}
+			{...props}
+		>
 			<div
 				className={cn(
 					'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-xl border bg-light-bg p-1 text-primary shadow dark:bg-dark-bg'
diff --git a/src/components/chatbot/chatbot-page.tsx b/src/components/chatbot/chatbot-page.tsx
index 0edfa12c6..49c1461dd 100644
--- a/src/components/chatbot/chatbot-page.tsx
+++ b/src/components/chatbot/chatbot-page.tsx
@@ -35,13 +35,20 @@ export function Chatbot({id, initialMessages, className}: ChatProps) {
 	return (
 		<div
 			className={cn(
-				'relative flex min-h-[80vh] min-w-0 flex-auto flex-col py-16 lg:pl-8 lg:pr-0 xl:px-16',
+				'relative flex min-h-[80vh] min-w-0 flex-auto flex-col px-4 py-16 text-slate-800 dark:text-slate-200 lg:pl-8 lg:pr-0 xl:px-16',
 				className
 			)}
 		>
+			<div className="mx-auto mb-8 w-full max-w-3xl flex-shrink-0">
+				<h1 className="text-2xl font-semibold">Ask Sourcegraph AI</h1>
+				<p className="subtitle my-2 opacity-70">
+					Find precise answers to any question about Sourcegraph
+					documentation with our AI chatbot.
+				</p>
+			</div>
 			<div
 				className={cn(
-					'relative max-h-[65vh] flex-1 overflow-y-auto pb-4',
+					'relative max-h-[50vh] flex-1 overflow-y-auto pb-4',
 					className
 				)}
 			>
diff --git a/src/components/chatbot/prompt-form.tsx b/src/components/chatbot/prompt-form.tsx
index c6216ccba..31b00a1ff 100644
--- a/src/components/chatbot/prompt-form.tsx
+++ b/src/components/chatbot/prompt-form.tsx
@@ -71,11 +71,17 @@ export function PromptForm({
 								disabled={isLoading || input === ''}
 							>
 								{isLoading ? (
-									<IconSpinner />
+									<>
+										<IconSpinner className="h-5 w-5 text-background" />
+										Generating
+									</>
 								) : (
-									<SourceGraphIcon className="h-5 w-5" />
+									<>
+										<SourceGraphIcon className="h-5 w-5" />
+										Send
+									</>
 								)}
-								Send
+
 								<span className="sr-only">Send message</span>
 							</Button>
 						</div>

From d577eb5b0d92acaf0ade5842c595b3136d5b2e49 Mon Sep 17 00:00:00 2001
From: Ahmad Bilal <ahmadbilaldev@gmail.com>
Date: Thu, 11 Jul 2024 21:04:23 +0500
Subject: [PATCH 11/19] =?UTF-8?q?=F0=9F=90=9B=20FIX:=20Build=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatbot/chat-list.tsx   |  1 +
 src/components/chatbot/header.tsx      | 47 --------------------------
 src/components/chatbot/prompt-form.tsx |  2 +-
 3 files changed, 2 insertions(+), 48 deletions(-)
 delete mode 100644 src/components/chatbot/header.tsx

diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index bc053dd7e..2fc623e32 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -8,6 +8,7 @@ export interface ChatList {
 }
 
 const exampleMessage: Message = {
+	id: '1',
 	content: 'Hello, how can I help you today?',
 	role: 'assistant'
 };
diff --git a/src/components/chatbot/header.tsx b/src/components/chatbot/header.tsx
deleted file mode 100644
index a6dfc4948..000000000
--- a/src/components/chatbot/header.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { buttonVariants } from './ui/button'
-import cn from 'mxcn'
-import Link from 'next/link'
-import { IconFork, IconGitHub } from './ui/icons'
-
-export async function Header() {
-  return (
-    <header className="bg-background sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between px-4">
-      <div className="flex h-16 shrink-0 items-center">
-        <h1>
-          <Link href="/" className="font-bold">
-            <span
-              aria-hidden="true"
-              className="border-muted-foreground/10 bg-muted mr-1 select-none rounded-lg border px-[0.2rem] py-[0.1rem] text-sm font-bold shadow-2xl"
-            >
-              ⌘
-            </span>
-            Langbase
-          </Link>
-        </h1>
-      </div>
-
-      <div className="flex items-center justify-end space-x-2">
-        <a
-          target="_blank"
-          href="https://github.com/LangbaseInc/langbase-examples/tree/main/examples/ai-chatbot"
-          rel="noopener noreferrer"
-          className={cn(buttonVariants({ variant: 'outline' }))}
-        >
-          <IconGitHub />
-          <span className="hidden md:flex">GitHub</span>
-        </a>
-        <a
-          target="_blank"
-          href="https://beta.langbase.com/examples/ai-chatbot"
-          rel="noopener noreferrer"
-          className={cn(buttonVariants({ variant: 'default' }))}
-        >
-          <IconFork />
-          <span className="hidden md:flex gap-1">
-            Fork on <span className="font-bold">Langbase</span>
-          </span>
-        </a>
-      </div>
-    </header>
-  )
-}
diff --git a/src/components/chatbot/prompt-form.tsx b/src/components/chatbot/prompt-form.tsx
index 31b00a1ff..8487ac18c 100644
--- a/src/components/chatbot/prompt-form.tsx
+++ b/src/components/chatbot/prompt-form.tsx
@@ -1,5 +1,5 @@
 import {Button} from './ui/button';
-import {IconChat, IconCommand, IconSpinner} from './ui/icons';
+import {IconChat, IconSpinner} from './ui/icons';
 import {useEnterSubmit} from '@/lib/hooks/use-enter-submit';
 import {UseChatHelpers} from 'ai/react';
 import * as React from 'react';

From 4ecfe33b75c95aad13bc61d5d4f4b4987acc6e92 Mon Sep 17 00:00:00 2001
From: Maedah Batool <me@MaedahBatool.com>
Date: Thu, 8 Aug 2024 09:21:20 -0700
Subject: [PATCH 12/19] Add small tweaks

---
 src/components/Layout.tsx               |  24 ++---
 src/components/chatbot/chatbot-page.tsx | 116 ++++++++++++------------
 2 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 946ffa809..e86d7d317 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,18 +1,18 @@
 'use client';
 
-import {Hero} from '@/components/Hero';
-import {Logo} from '@/components/Logo';
-import {MobileNavigation} from '@/components/MobileNavigation';
-import {Navigation} from '@/components/Navigation';
-import {ThemeSelector} from '@/components/ThemeSelector';
+import { Hero } from '@/components/Hero';
+import { Logo } from '@/components/Logo';
+import { MobileNavigation } from '@/components/MobileNavigation';
+import { Navigation } from '@/components/Navigation';
+import { ThemeSelector } from '@/components/ThemeSelector';
 import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
 import clsx from 'clsx';
 import Link from 'next/link';
-import {usePathname} from 'next/navigation';
-import {useEffect, useState} from 'react';
-import {LogoMark} from './LogoMark';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { LogoMark } from './LogoMark';
 import VersionSelector from './VersionSelector';
-import {Search} from './search/Search';
+import { Search } from './search/Search';
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -30,7 +30,7 @@ function Header() {
 			setIsScrolled(window.scrollY > 0);
 		}
 		onScroll();
-		window.addEventListener('scroll', onScroll, {passive: true});
+		window.addEventListener('scroll', onScroll, { passive: true });
 		return () => {
 			window.removeEventListener('scroll', onScroll);
 		};
@@ -75,7 +75,7 @@ function Header() {
 					>
 						<SourceGraphIcon className="hidden h-6 w-6 sm:block" />
 						<span className="font-semibold">
-							Ask <span className="hidden sm:inline">Source</span>
+							Ask <span className="hidden sm:inline">AI</span>
 						</span>
 					</Link>
 					<VersionSelector />
@@ -95,7 +95,7 @@ function Header() {
 	);
 }
 
-export function Layout({children}: {children: React.ReactNode}) {
+export function Layout({ children }: { children: React.ReactNode }) {
 	let pathname = usePathname();
 	let isHomePage = pathname === '/';
 
diff --git a/src/components/chatbot/chatbot-page.tsx b/src/components/chatbot/chatbot-page.tsx
index 49c1461dd..6370202f7 100644
--- a/src/components/chatbot/chatbot-page.tsx
+++ b/src/components/chatbot/chatbot-page.tsx
@@ -1,70 +1,70 @@
 'use client';
 
-import {ChatList} from './chat-list';
-import {useChat, type Message} from 'ai/react';
+import { useChat, type Message } from 'ai/react';
 import cn from 'mxcn';
-import {useState} from 'react';
-import {toast} from 'sonner';
-import {ChatInput} from './chat-input';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { ChatInput } from './chat-input';
+import { ChatList } from './chat-list';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
-	id?: string; // Optional: Thread ID if you want to persist the chat in a DB
-	initialMessages?: Message[]; // Optional: Messages to pre-populate the chat from DB
+  id?: string; // Optional: Thread ID if you want to persist the chat in a DB
+  initialMessages?: Message[]; // Optional: Messages to pre-populate the chat from DB
 }
 
-export function Chatbot({id, initialMessages, className}: ChatProps) {
-	const [threadId, setThreadId] = useState<null | string>(null);
+export function Chatbot({ id, initialMessages, className }: ChatProps) {
+  const [threadId, setThreadId] = useState<null | string>(null);
 
-	const {messages, append, reload, stop, isLoading, input, setInput} =
-		useChat({
-			api: '/api/chat',
-			initialMessages,
-			body: {threadId},
-			onResponse(response) {
-				if (response.status !== 200) {
-					console.log('✨ ~ response:', response);
-					toast.error(response.statusText);
-				}
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useChat({
+      api: '/api/chat',
+      initialMessages,
+      body: { threadId },
+      onResponse(response) {
+        if (response.status !== 200) {
+          console.log('✨ ~ response:', response);
+          toast.error(response.statusText);
+        }
 
-				// Get Thread ID from response header
-				const lbThreadId = response.headers.get('lb-thread-id');
-				setThreadId(lbThreadId);
-			}
-		});
+        // Get Thread ID from response header
+        const lbThreadId = response.headers.get('lb-thread-id');
+        setThreadId(lbThreadId);
+      }
+    });
 
-	return (
-		<div
-			className={cn(
-				'relative flex min-h-[80vh] min-w-0 flex-auto flex-col px-4 py-16 text-slate-800 dark:text-slate-200 lg:pl-8 lg:pr-0 xl:px-16',
-				className
-			)}
-		>
-			<div className="mx-auto mb-8 w-full max-w-3xl flex-shrink-0">
-				<h1 className="text-2xl font-semibold">Ask Sourcegraph AI</h1>
-				<p className="subtitle my-2 opacity-70">
-					Find precise answers to any question about Sourcegraph
-					documentation with our AI chatbot.
-				</p>
-			</div>
-			<div
-				className={cn(
-					'relative max-h-[50vh] flex-1 overflow-y-auto pb-4',
-					className
-				)}
-			>
-				<ChatList messages={messages} />
-			</div>
+  return (
+    <div
+      className={cn(
+        'relative flex min-h-[80vh] min-w-0 flex-auto flex-col px-4 py-16 text-slate-800 dark:text-slate-200 lg:pl-8 lg:pr-0 xl:px-16',
+        className
+      )}
+    >
+      <div className="mx-auto mb-8 w-full max-w-3xl flex-shrink-0">
+        <h1 className="text-2xl font-semibold">Ask AI</h1>
+        <p className="subtitle my-2 opacity-70">
+          Find precise answers to any question about Sourcegraph
+          documentation with our AI chatbot.
+        </p>
+      </div>
+      <div
+        className={cn(
+          'relative max-h-[50vh] flex-1 overflow-y-auto pb-4',
+          className
+        )}
+      >
+        <ChatList messages={messages} />
+      </div>
 
-			<ChatInput
-				id={id}
-				isLoading={isLoading}
-				stop={stop}
-				append={append}
-				reload={reload}
-				messages={messages}
-				input={input}
-				setInput={setInput}
-			/>
-		</div>
-	);
+      <ChatInput
+        id={id}
+        isLoading={isLoading}
+        stop={stop}
+        append={append}
+        reload={reload}
+        messages={messages}
+        input={input}
+        setInput={setInput}
+      />
+    </div>
+  );
 }

From c3924b8fc326c056beb2c4d028564a3198954edf Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Tue, 3 Sep 2024 22:30:33 +0500
Subject: [PATCH 13/19] Added sparkle and loading animation

---
 src/app/{ask-source => ask-ai}/page.tsx |   0
 src/components/Layout.tsx               |   9 +-
 src/components/chatbot/chat-list.tsx    |   5 +-
 src/components/chatbot/chat-message.tsx | 151 +++++++++++++-----------
 src/components/chatbot/chatbot-page.tsx |   2 +-
 src/styles/tailwind.css                 |  15 +++
 6 files changed, 104 insertions(+), 78 deletions(-)
 rename src/app/{ask-source => ask-ai}/page.tsx (100%)

diff --git a/src/app/ask-source/page.tsx b/src/app/ask-ai/page.tsx
similarity index 100%
rename from src/app/ask-source/page.tsx
rename to src/app/ask-ai/page.tsx
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e86d7d317..f083825da 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -13,6 +13,7 @@ import { useEffect, useState } from 'react';
 import { LogoMark } from './LogoMark';
 import VersionSelector from './VersionSelector';
 import { Search } from './search/Search';
+import { Sparkles } from 'lucide-react';
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -70,11 +71,13 @@ function Header() {
 				</div>
 				<div className="relative ml-3 flex basis-0 items-center justify-end gap-3 sm:ml-4 sm:gap-6 md:flex-grow">
 					<Link
-						href="/ask-source"
+						href="/ask-ai"
 						className="flex items-center gap-3 whitespace-nowrap"
 					>
-						<SourceGraphIcon className="hidden h-6 w-6 sm:block" />
-						<span className="font-semibold">
+						<div className="flex items-center gap-3 whitespace-nowrap sparkle-hover">
+							<Sparkles className="hidden h-5 w-5 sm:block sparkle"/>
+						</div>
+						<span className="font-medium">
 							Ask <span className="hidden sm:inline">AI</span>
 						</span>
 					</Link>
diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index 2fc623e32..30a51d78b 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -5,6 +5,7 @@ import {ChatMessage} from './chat-message';
 
 export interface ChatList {
 	messages: Message[];
+	isLoading: boolean
 }
 
 const exampleMessage: Message = {
@@ -13,13 +14,13 @@ const exampleMessage: Message = {
 	role: 'assistant'
 };
 
-export function ChatList({messages}: ChatList) {
+export function ChatList({messages, isLoading}: ChatList) {
 	return (
 		<div className="relative mx-auto w-full max-w-3xl overflow-y-auto">
 			{messages.length === 0 && <ChatMessage message={exampleMessage} />}
 			{messages?.map((message, index) => (
 				<div key={index}>
-					<ChatMessage message={message} />
+					<ChatMessage message={message} isLoading={isLoading} />
 					{index < messages.length - 1 && (
 						<Separator className="my-4 md:my-8" />
 					)}
diff --git a/src/components/chatbot/chat-message.tsx b/src/components/chatbot/chat-message.tsx
index 10f3ebf94..15d23e8c2 100644
--- a/src/components/chatbot/chat-message.tsx
+++ b/src/components/chatbot/chat-message.tsx
@@ -1,89 +1,96 @@
 import {Message} from 'ai';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
+import cn from 'mxcn';
+import {Sparkles} from 'lucide-react';
 
 import {ChatMessageActions} from './chat-message-actions';
 import {MemoizedReactMarkdown} from './markdown';
 import {CodeBlock} from './ui/codeblock';
 import {IconUser} from '../icons/UserIcon';
-import cn from 'mxcn';
-import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
 
 export interface ChatMessageProps {
-	message: Message;
+  message: Message;
+  isLoading?: boolean;
 }
 
-export function ChatMessage({message, ...props}: ChatMessageProps) {
-	return (
-		<div
-			className={cn(
-				'group relative mb-4 flex',
-				message.content.length > 60 ? 'items-start' : 'items-center'
-			)}
-			{...props}
-		>
-			<div
-				className={cn(
-					'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-xl border bg-light-bg p-1 text-primary shadow dark:bg-dark-bg'
-				)}
-			>
-				{message.role === 'user' ? (
-					<IconUser className="h-5 w-5" />
-				) : (
-					<SourceGraphIcon className="h-5 w-5" />
-				)}
-			</div>
-			<div className="ml-4 flex-1 space-y-2 px-1">
-				<MemoizedReactMarkdown
-					className="prose break-words rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:rounded-xl prose-pre:p-0"
-					remarkPlugins={[remarkGfm, remarkMath]}
-					components={{
-						p({children}) {
-							return <p className="mb-2 last:mb-0">{children}</p>;
-						},
-						code({node, inline, className, children, ...props}) {
-							if (children.length) {
-								if (children[0] == '▍') {
-									return (
-										<span className="mt-1 animate-pulse cursor-default">
-											▍
-										</span>
-									);
-								}
+export function ChatMessage({message, isLoading = false, ...props}: ChatMessageProps) {
+  return (
+    <div
+      className={cn(
+        'group relative mb-4 flex',
+        message.content.length > 60 ? 'items-start' : 'items-center'
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-xl border bg-light-bg p-1 text-primary shadow dark:bg-dark-bg'
+        )}
+      >
+        {message.role === 'user' ? (
+          <IconUser className="h-5 w-5" />
+        ) : (
+          <Sparkles color="#62BECC" className="hidden h-5 w-5 sm:block" />
+        )}
+      </div>
+      <div className="ml-4 flex-1 space-y-2 px-1">
+        {isLoading ? (
+          <div className="space-y-2">
+            <div className="h-4 w-3/4 animate-pulse bg-gray-300 dark:bg-gray-700 rounded-md"></div>
+            <div className="h-4 w-2/4 animate-pulse bg-gray-300 dark:bg-gray-700 rounded-md"></div>
+            <div className="h-4 w-1/2 animate-pulse bg-gray-300 dark:bg-gray-700 rounded-md"></div>
+            <p className="text-gray-500 text-sm animate-text-fade">Analyzing...</p>
+          </div>
+        ) : (
+          <>
+            <MemoizedReactMarkdown
+              className="prose break-words rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:rounded-xl prose-pre:p-0"
+              remarkPlugins={[remarkGfm, remarkMath]}
+              components={{
+                p({ children }) {
+                  return <p className="mb-2 last:mb-0">{children}</p>;
+                },
+                code({ node, inline, className, children, ...props }) {
+                  if (children.length) {
+                    if (children[0] === '▍') {
+                      return (
+                        <span className="mt-1 animate-pulse cursor-default">
+                          ▍
+                        </span>
+                      );
+                    }
 
-								children[0] = (children[0] as string).replace(
-									'`▍`',
-									'▍'
-								);
-							}
+                    children[0] = (children[0] as string).replace('`▍`', '▍');
+                  }
 
-							const match = /language-(\w+)/.exec(
-								className || ''
-							);
+                  const match = /language-(\w+)/.exec(className || '');
 
-							if (inline) {
-								return (
-									<code className={className} {...props}>
-										{children}
-									</code>
-								);
-							}
+                  if (inline) {
+                    return (
+                      <code className={className} {...props}>
+                        {children}
+                      </code>
+                    );
+                  }
 
-							return (
-								<CodeBlock
-									key={Math.random()}
-									language={(match && match[1]) || ''}
-									value={String(children).replace(/\n$/, '')}
-									{...props}
-								/>
-							);
-						}
-					}}
-				>
-					{message.content}
-				</MemoizedReactMarkdown>
-				<ChatMessageActions message={message} />
-			</div>
-		</div>
-	);
+                  return (
+                    <CodeBlock
+                      key={Math.random()}
+                      language={(match && match[1]) || ''}
+                      value={String(children).replace(/\n$/, '')}
+                      {...props}
+                    />
+                  );
+                }
+              }}
+            >
+              {message.content}
+            </MemoizedReactMarkdown>
+            <ChatMessageActions message={message} />
+          </>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/chatbot/chatbot-page.tsx b/src/components/chatbot/chatbot-page.tsx
index 6370202f7..fb4958620 100644
--- a/src/components/chatbot/chatbot-page.tsx
+++ b/src/components/chatbot/chatbot-page.tsx
@@ -52,7 +52,7 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
           className
         )}
       >
-        <ChatList messages={messages} />
+        <ChatList messages={messages} isLoading={isLoading} />
       </div>
 
       <ChatInput
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index ef574dc78..cf285f190 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1040,3 +1040,18 @@
 		width: 6rem !important;
 	}
 }
+
+@keyframes sparkle {
+  0%, 100% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+.sparkle-hover:hover .sparkle {
+  animation: sparkle 0.5s infinite;
+}

From a63f4694b68ca5e67dacb49c1edc2086ff23bce5 Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Wed, 4 Sep 2024 23:25:18 +0500
Subject: [PATCH 14/19] Fixed some design issues

---
 src/components/Layout.tsx              | 4 ++--
 src/components/chatbot/prompt-form.tsx | 1 -
 src/components/chatbot/ui/button.tsx   | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f083825da..6f46df515 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -72,9 +72,9 @@ function Header() {
 				<div className="relative ml-3 flex basis-0 items-center justify-end gap-3 sm:ml-4 sm:gap-6 md:flex-grow">
 					<Link
 						href="/ask-ai"
-						className="flex items-center gap-3 whitespace-nowrap"
+						className="flex items-center gap-1 whitespace-nowrap"
 					>
-						<div className="flex items-center gap-3 whitespace-nowrap sparkle-hover">
+						<div className="flex items-center whitespace-nowrap sparkle-hover">
 							<Sparkles className="hidden h-5 w-5 sm:block sparkle"/>
 						</div>
 						<span className="font-medium">
diff --git a/src/components/chatbot/prompt-form.tsx b/src/components/chatbot/prompt-form.tsx
index 8487ac18c..62924a3c7 100644
--- a/src/components/chatbot/prompt-form.tsx
+++ b/src/components/chatbot/prompt-form.tsx
@@ -77,7 +77,6 @@ export function PromptForm({
 									</>
 								) : (
 									<>
-										<SourceGraphIcon className="h-5 w-5" />
 										Send
 									</>
 								)}
diff --git a/src/components/chatbot/ui/button.tsx b/src/components/chatbot/ui/button.tsx
index 05452a9ea..94e4edf6f 100644
--- a/src/components/chatbot/ui/button.tsx
+++ b/src/components/chatbot/ui/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'border border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/90',
+          'border border-transparent bg-violet-700 text-primary-foreground shadow hover:text-violet-700 hover:bg-white dark:bg-white dark:text-violet-700 dark:shadow-none dark:focus-visible:outline-white/50',
         warn: 'bg-warning text-warning-foreground hover:bg-warning/90 shadow-sm',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',

From 5ac54e61d3a76d74297251b932e4ff3002166441 Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Sun, 8 Sep 2024 23:13:56 +0500
Subject: [PATCH 15/19] Fixed chatboat loader

---
 src/components/chatbot/chat-list.tsx    | 8 +++++++-
 src/components/chatbot/chat-message.tsx | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index 30a51d78b..eb1c19c10 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -20,10 +20,16 @@ export function ChatList({messages, isLoading}: ChatList) {
 			{messages.length === 0 && <ChatMessage message={exampleMessage} />}
 			{messages?.map((message, index) => (
 				<div key={index}>
-					<ChatMessage message={message} isLoading={isLoading} />
+					<ChatMessage message={message} />
 					{index < messages.length - 1 && (
 						<Separator className="my-4 md:my-8" />
 					)}
+					{isLoading && messages.length === index + 1 && 
+						<>
+							<Separator className="my-4 md:my-8" />
+							<ChatMessage message={message} isLoading={true} />
+						</>
+					}
 				</div>
 			))}
 		</div>
diff --git a/src/components/chatbot/chat-message.tsx b/src/components/chatbot/chat-message.tsx
index 15d23e8c2..193d30324 100644
--- a/src/components/chatbot/chat-message.tsx
+++ b/src/components/chatbot/chat-message.tsx
@@ -28,7 +28,7 @@ export function ChatMessage({message, isLoading = false, ...props}: ChatMessageP
           'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-xl border bg-light-bg p-1 text-primary shadow dark:bg-dark-bg'
         )}
       >
-        {message.role === 'user' ? (
+        {message.role === 'user' && !isLoading ? (
           <IconUser className="h-5 w-5" />
         ) : (
           <Sparkles color="#62BECC" className="hidden h-5 w-5 sm:block" />

From a79366437419145c1a7ad6fdc6d3827a4b935083 Mon Sep 17 00:00:00 2001
From: Maedah Batool <me@MaedahBatool.com>
Date: Sun, 8 Sep 2024 18:39:58 -0700
Subject: [PATCH 16/19] =?UTF-8?q?=F0=9F=90=9B=20FIX:=20gitignore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 60ce80290..72013eae8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,3 +45,5 @@ next-env.d.ts
 
 # We ignore the generated file as it should always be generated
 public/changelog.rss
+.env*
+.env

From 50c14e41f0c69bee9497d43fe32e8bb08ef7e145 Mon Sep 17 00:00:00 2001
From: Maedah Batool <me@MaedahBatool.com>
Date: Sun, 8 Sep 2024 19:35:49 -0700
Subject: [PATCH 17/19] =?UTF-8?q?=F0=9F=90=9B=20FIX:=20changes=20in=20css?=
 =?UTF-8?q?=20and=20fns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout.tsx               |  35 ++--
 src/components/VersionSelector.tsx      |  24 +--
 src/components/chatbot/chat-input.tsx   |   4 +-
 src/components/chatbot/chat-list.tsx    |  27 ++--
 src/components/chatbot/chat-message.tsx | 206 +++++++++++++++---------
 src/components/chatbot/chatbot-page.tsx | 125 +++++++-------
 src/components/chatbot/prompt-form.tsx  |  22 +--
 src/components/chatbot/ui/button.tsx    | 124 +++++++-------
 src/components/chatbot/ui/separator.tsx |   4 +-
 src/styles/tailwind.css                 |  19 +--
 10 files changed, 326 insertions(+), 264 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 6f46df515..16c3d4abf 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,19 +1,18 @@
 'use client';
 
-import { Hero } from '@/components/Hero';
-import { Logo } from '@/components/Logo';
-import { MobileNavigation } from '@/components/MobileNavigation';
-import { Navigation } from '@/components/Navigation';
-import { ThemeSelector } from '@/components/ThemeSelector';
-import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
+import {Hero} from '@/components/Hero';
+import {Logo} from '@/components/Logo';
+import {MobileNavigation} from '@/components/MobileNavigation';
+import {Navigation} from '@/components/Navigation';
+import {ThemeSelector} from '@/components/ThemeSelector';
 import clsx from 'clsx';
+import {Sparkles} from 'lucide-react';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { LogoMark } from './LogoMark';
+import {usePathname} from 'next/navigation';
+import {useEffect, useState} from 'react';
+import {LogoMark} from './LogoMark';
 import VersionSelector from './VersionSelector';
-import { Search } from './search/Search';
-import { Sparkles } from 'lucide-react';
+import {Search} from './search/Search';
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -31,7 +30,7 @@ function Header() {
 			setIsScrolled(window.scrollY > 0);
 		}
 		onScroll();
-		window.addEventListener('scroll', onScroll, { passive: true });
+		window.addEventListener('scroll', onScroll, {passive: true});
 		return () => {
 			window.removeEventListener('scroll', onScroll);
 		};
@@ -40,7 +39,7 @@ function Header() {
 	return (
 		<header
 			className={clsx(
-				'sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-6 shadow-md shadow-slate-900/5 transition duration-500 dark:border-dark-border dark:shadow-none sm:px-6 lg:border-b lg:border-light-border lg:px-8',
+				'sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-6 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:border-b lg:border-light-border lg:px-8 dark:border-dark-border dark:shadow-none',
 				isScrolled
 					? 'dark:bg-dark-bg-1 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-dark-bg-1/80'
 					: 'dark:bg-transparent'
@@ -72,12 +71,12 @@ function Header() {
 				<div className="relative ml-3 flex basis-0 items-center justify-end gap-3 sm:ml-4 sm:gap-6 md:flex-grow">
 					<Link
 						href="/ask-ai"
-						className="flex items-center gap-1 whitespace-nowrap"
+						className="group flex animate-pulse items-center gap-1 whitespace-nowrap"
 					>
-						<div className="flex items-center whitespace-nowrap sparkle-hover">
-							<Sparkles className="hidden h-5 w-5 sm:block sparkle"/>
+						<div className="flex items-center whitespace-nowrap text-slate-500">
+							<Sparkles className="sparkle hidden h-5 w-5 sm:block" />
 						</div>
-						<span className="font-medium">
+						<span className="font-medium text-slate-300">
 							Ask <span className="hidden sm:inline">AI</span>
 						</span>
 					</Link>
@@ -98,7 +97,7 @@ function Header() {
 	);
 }
 
-export function Layout({ children }: { children: React.ReactNode }) {
+export function Layout({children}: {children: React.ReactNode}) {
 	let pathname = usePathname();
 	let isHomePage = pathname === '/';
 
diff --git a/src/components/VersionSelector.tsx b/src/components/VersionSelector.tsx
index a01d5ba65..feda29ebe 100644
--- a/src/components/VersionSelector.tsx
+++ b/src/components/VersionSelector.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { VersionI, versions } from '@/data/versions';
-import { Menu, Transition } from '@headlessui/react';
-import { ArrowUpRightIcon, ChevronDownIcon } from '@heroicons/react/20/solid';
+import {VersionI, versions} from '@/data/versions';
+import {Menu, Transition} from '@headlessui/react';
+import {ArrowUpRightIcon, ChevronDownIcon} from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
+import {usePathname} from 'next/navigation';
+import {Fragment, useEffect, useState} from 'react';
 
 export default function VersionSelector() {
 	const path = usePathname();
@@ -38,8 +38,8 @@ export default function VersionSelector() {
 		<Menu as="div" className="relative inline-block text-left">
 			<div>
 				<Menu.Button
-					className="inline-flex w-full items-center justify-center gap-x-1.5
-				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-slate-100 dark:bg-dark-bg-2 dark:text-slate-400 dark:ring-inset dark:ring-dark-border"
+					className="hover:bg-light-bg2 inline-flex w-full items-center justify-center gap-x-1.5
+				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 dark:bg-dark-bg-2 dark:text-slate-400 dark:ring-inset dark:ring-dark-border dark:hover:bg-dark-bg-3"
 				>
 					{selectedVersion.name}
 					<ChevronDownIcon
@@ -58,12 +58,12 @@ export default function VersionSelector() {
 				leaveFrom="transform opacity-100 scale-100"
 				leaveTo="transform opacity-0 scale-95"
 			>
-				<Menu.Items className="divide- absolute right-0 z-10 mt-2 flex w-32 origin-top-right flex-col divide-light-border rounded-md bg-light-bg-1 text-xs text-slate-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-dark-border dark:bg-dark-bg-2 dark:text-slate-400 sm:w-48 sm:text-sm">
+				<Menu.Items className="divide- absolute right-0 z-10 mt-2 flex w-32 origin-top-right flex-col divide-light-border rounded-md bg-light-bg-1 text-xs text-slate-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:w-48 sm:text-sm dark:divide-dark-border dark:bg-dark-bg-2 dark:text-slate-400">
 					{/* Versions */}
 					{versions.length > 0 &&
 						versions.map((version, count) => (
 							<Menu.Item key={version.name}>
-								{({ active }) => (
+								{({active}) => (
 									<a
 										href={version.url}
 										target="_blank"
@@ -72,7 +72,7 @@ export default function VersionSelector() {
 										}
 										className={clsx(
 											active &&
-											'bg-light-bg-2 text-slate-900 dark:bg-dark-bg-3 dark:text-white',
+												'bg-light-bg-2 text-slate-900 dark:bg-dark-bg-3 dark:text-white',
 											count === 0 && 'rounded-t-md',
 											'flex w-full items-center justify-between px-3 py-2'
 										)}
@@ -89,12 +89,12 @@ export default function VersionSelector() {
 						))}
 					{/* Legacy versions */}
 					<Menu.Item>
-						{({ active }) => (
+						{({active}) => (
 							<Link
 								href="/legacy"
 								className={clsx(
 									active &&
-									'bg-light-bg-2 text-slate-900 dark:bg-dark-bg-3 dark:text-white',
+										'bg-light-bg-2 text-slate-900 dark:bg-dark-bg-3 dark:text-white',
 									'flex items-center justify-between rounded-b-md px-3 py-2'
 								)}
 							>
diff --git a/src/components/chatbot/chat-input.tsx b/src/components/chatbot/chat-input.tsx
index 6abee0397..a217b4786 100644
--- a/src/components/chatbot/chat-input.tsx
+++ b/src/components/chatbot/chat-input.tsx
@@ -39,7 +39,7 @@ export function ChatInput({
 							className="bg-background"
 							size={'sm'}
 						>
-							<IconStop className="h-5 w-5 text-muted-foreground/50 group-hover:text-background" />
+							<IconStop className="h-5 w-5 text-muted-foreground/50 group-hover:text-background dark:text-dark-bg-3" />
 							Stop generating
 						</Button>
 					) : (
@@ -50,7 +50,7 @@ export function ChatInput({
 								className="bg-background"
 								size={'sm'}
 							>
-								<IconRegenerate className="h-5 w-5 text-muted-foreground/50 group-hover:text-background" />
+								<IconRegenerate className="h-5 w-5 text-muted-foreground/50 group-hover:text-background dark:text-dark-bg-3" />
 								Regenerate response
 							</Button>
 						)
diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index eb1c19c10..a290e90ec 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -1,20 +1,20 @@
 import {type Message} from 'ai';
-
-import {Separator} from './ui/separator';
 import {ChatMessage} from './chat-message';
+import {Separator} from './ui/separator';
 
 export interface ChatList {
 	messages: Message[];
-	isLoading: boolean
+	isLoading: boolean;
+	isStreaming: boolean;
 }
 
 const exampleMessage: Message = {
 	id: '1',
-	content: 'Hello, how can I help you today?',
+	content: 'Hello, ask me anything related to Sourcegraph.',
 	role: 'assistant'
 };
 
-export function ChatList({messages, isLoading}: ChatList) {
+export function ChatList({messages, isLoading, isStreaming}: ChatList) {
 	return (
 		<div className="relative mx-auto w-full max-w-3xl overflow-y-auto">
 			{messages.length === 0 && <ChatMessage message={exampleMessage} />}
@@ -24,12 +24,17 @@ export function ChatList({messages, isLoading}: ChatList) {
 					{index < messages.length - 1 && (
 						<Separator className="my-4 md:my-8" />
 					)}
-					{isLoading && messages.length === index + 1 && 
-						<>
-							<Separator className="my-4 md:my-8" />
-							<ChatMessage message={message} isLoading={true} />
-						</>
-					}
+					{isLoading &&
+						!isStreaming &&
+						messages.length === index + 1 && (
+							<>
+								<Separator className="my-4 md:my-8" />
+								<ChatMessage
+									message={message}
+									isLoading={isLoading}
+								/>
+							</>
+						)}
 				</div>
 			))}
 		</div>
diff --git a/src/components/chatbot/chat-message.tsx b/src/components/chatbot/chat-message.tsx
index 193d30324..03d7f8042 100644
--- a/src/components/chatbot/chat-message.tsx
+++ b/src/components/chatbot/chat-message.tsx
@@ -1,96 +1,142 @@
 import {Message} from 'ai';
+import {Sparkles} from 'lucide-react';
+import cn from 'mxcn';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
-import cn from 'mxcn';
-import {Sparkles} from 'lucide-react';
 
+import {useEffect, useState} from 'react';
+import {IconUser} from '../icons/UserIcon';
 import {ChatMessageActions} from './chat-message-actions';
 import {MemoizedReactMarkdown} from './markdown';
 import {CodeBlock} from './ui/codeblock';
-import {IconUser} from '../icons/UserIcon';
 
 export interface ChatMessageProps {
-  message: Message;
-  isLoading?: boolean;
+	message: Message;
+	isLoading?: boolean;
 }
 
-export function ChatMessage({message, isLoading = false, ...props}: ChatMessageProps) {
-  return (
-    <div
-      className={cn(
-        'group relative mb-4 flex',
-        message.content.length > 60 ? 'items-start' : 'items-center'
-      )}
-      {...props}
-    >
-      <div
-        className={cn(
-          'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-xl border bg-light-bg p-1 text-primary shadow dark:bg-dark-bg'
-        )}
-      >
-        {message.role === 'user' && !isLoading ? (
-          <IconUser className="h-5 w-5" />
-        ) : (
-          <Sparkles color="#62BECC" className="hidden h-5 w-5 sm:block" />
-        )}
-      </div>
-      <div className="ml-4 flex-1 space-y-2 px-1">
-        {isLoading ? (
-          <div className="space-y-2">
-            <div className="h-4 w-3/4 animate-pulse bg-gray-300 dark:bg-gray-700 rounded-md"></div>
-            <div className="h-4 w-2/4 animate-pulse bg-gray-300 dark:bg-gray-700 rounded-md"></div>
-            <div className="h-4 w-1/2 animate-pulse bg-gray-300 dark:bg-gray-700 rounded-md"></div>
-            <p className="text-gray-500 text-sm animate-text-fade">Analyzing...</p>
-          </div>
-        ) : (
-          <>
-            <MemoizedReactMarkdown
-              className="prose break-words rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:rounded-xl prose-pre:p-0"
-              remarkPlugins={[remarkGfm, remarkMath]}
-              components={{
-                p({ children }) {
-                  return <p className="mb-2 last:mb-0">{children}</p>;
-                },
-                code({ node, inline, className, children, ...props }) {
-                  if (children.length) {
-                    if (children[0] === '▍') {
-                      return (
-                        <span className="mt-1 animate-pulse cursor-default">
-                          ▍
-                        </span>
-                      );
-                    }
+export function ChatMessage({
+	message,
+	isLoading = false,
+	...props
+}: ChatMessageProps) {
+	const [analysisState, setAnalysisState] = useState(0);
+	const analysisMessages = ['Thinking...', 'Analyzing...', 'Planning...'];
+
+	useEffect(() => {
+		if (isLoading) {
+			const interval = setInterval(() => {
+				setAnalysisState(prev => (prev + 1) % analysisMessages.length);
+			}, 2000); // Change state every 2 seconds
+			return () => clearInterval(interval);
+		}
+	}, [isLoading]);
+
+	const stateStyles = ['text-cyan-500', 'text-[#ec624d]', 'text-[#9424f5]'];
+	return (
+		<div
+			className={cn(
+				'group relative mb-4 flex',
+				message.content.length > 60 ? 'items-start' : 'items-center'
+			)}
+			{...props}
+		>
+			<div
+				className={cn(
+					'flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-xl border border-light-border bg-light-bg p-1 text-primary shadow dark:border-dark-border dark:bg-dark-bg'
+				)}
+			>
+				{message.role === 'user' && !isLoading ? (
+					<IconUser className="h-5 w-5" />
+				) : (
+					<Sparkles
+						color="#62BECC"
+						className="hidden h-5 w-5 sm:block"
+					/>
+				)}
+			</div>
+			<div className="ml-4 flex-1 space-y-2 px-1">
+				{isLoading ? (
+					<div className="space-y-2">
+						<div className="h-4 w-3/4 animate-pulse rounded-md bg-gray-300 dark:bg-gray-700"></div>
+						<div className="h-4 w-2/4 animate-pulse rounded-md bg-gray-300 dark:bg-gray-700"></div>
+						<div className="h-4 w-1/2 animate-pulse rounded-md bg-gray-300 dark:bg-gray-700"></div>
+
+						<p
+							className={`animate-fade text-sm transition-all duration-500 ease-in-out ${stateStyles[analysisState]}`}
+						>
+							{analysisMessages[analysisState]}
+						</p>
+					</div>
+				) : (
+					<>
+						<MemoizedReactMarkdown
+							className="prose break-words rounded-xl dark:prose-invert prose-p:leading-relaxed prose-pre:rounded-xl prose-pre:p-0"
+							remarkPlugins={[remarkGfm, remarkMath]}
+							components={{
+								p({children}) {
+									return (
+										<p className="mb-2 last:mb-0">
+											{children}
+										</p>
+									);
+								},
+								code({
+									node,
+									inline,
+									className,
+									children,
+									...props
+								}) {
+									if (children.length) {
+										if (children[0] === '▍') {
+											return (
+												<span className="mt-1 animate-pulse cursor-default">
+													▍
+												</span>
+											);
+										}
 
-                    children[0] = (children[0] as string).replace('`▍`', '▍');
-                  }
+										children[0] = (
+											children[0] as string
+										).replace('`▍`', '▍');
+									}
 
-                  const match = /language-(\w+)/.exec(className || '');
+									const match = /language-(\w+)/.exec(
+										className || ''
+									);
 
-                  if (inline) {
-                    return (
-                      <code className={className} {...props}>
-                        {children}
-                      </code>
-                    );
-                  }
+									if (inline) {
+										return (
+											<code
+												className={className}
+												{...props}
+											>
+												{children}
+											</code>
+										);
+									}
 
-                  return (
-                    <CodeBlock
-                      key={Math.random()}
-                      language={(match && match[1]) || ''}
-                      value={String(children).replace(/\n$/, '')}
-                      {...props}
-                    />
-                  );
-                }
-              }}
-            >
-              {message.content}
-            </MemoizedReactMarkdown>
-            <ChatMessageActions message={message} />
-          </>
-        )}
-      </div>
-    </div>
-  );
+									return (
+										<CodeBlock
+											key={Math.random()}
+											language={(match && match[1]) || ''}
+											value={String(children).replace(
+												/\n$/,
+												''
+											)}
+											{...props}
+										/>
+									);
+								}
+							}}
+						>
+							{message.content}
+						</MemoizedReactMarkdown>
+						<ChatMessageActions message={message} />
+					</>
+				)}
+			</div>
+		</div>
+	);
 }
diff --git a/src/components/chatbot/chatbot-page.tsx b/src/components/chatbot/chatbot-page.tsx
index fb4958620..7df2b00fd 100644
--- a/src/components/chatbot/chatbot-page.tsx
+++ b/src/components/chatbot/chatbot-page.tsx
@@ -1,70 +1,79 @@
 'use client';
 
-import { useChat, type Message } from 'ai/react';
+import {useChat, type Message} from 'ai/react';
 import cn from 'mxcn';
-import { useState } from 'react';
-import { toast } from 'sonner';
-import { ChatInput } from './chat-input';
-import { ChatList } from './chat-list';
+import {useState} from 'react';
+import {toast} from 'sonner';
+import {ChatInput} from './chat-input';
+import {ChatList} from './chat-list';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
-  id?: string; // Optional: Thread ID if you want to persist the chat in a DB
-  initialMessages?: Message[]; // Optional: Messages to pre-populate the chat from DB
+	id?: string;
+	initialMessages?: Message[];
 }
 
-export function Chatbot({ id, initialMessages, className }: ChatProps) {
-  const [threadId, setThreadId] = useState<null | string>(null);
+export function Chatbot({id, initialMessages, className}: ChatProps) {
+	const [threadId, setThreadId] = useState<null | string>(null);
+	const [isStreaming, setIsStreaming] = useState(false);
 
-  const { messages, append, reload, stop, isLoading, input, setInput } =
-    useChat({
-      api: '/api/chat',
-      initialMessages,
-      body: { threadId },
-      onResponse(response) {
-        if (response.status !== 200) {
-          console.log('✨ ~ response:', response);
-          toast.error(response.statusText);
-        }
+	const {messages, append, reload, stop, isLoading, input, setInput} =
+		useChat({
+			api: '/docs/api/chat',
+			initialMessages,
+			body: {threadId},
+			onResponse(response) {
+				if (response.status !== 200) {
+					toast.error(response.statusText);
+				}
 
-        // Get Thread ID from response header
-        const lbThreadId = response.headers.get('lb-thread-id');
-        setThreadId(lbThreadId);
-      }
-    });
+				const lbThreadId = response.headers.get('lb-thread-id');
+				setThreadId(lbThreadId);
+				setIsStreaming(true);
+			},
+			onFinish() {
+				setIsStreaming(false);
+			}
+		});
 
-  return (
-    <div
-      className={cn(
-        'relative flex min-h-[80vh] min-w-0 flex-auto flex-col px-4 py-16 text-slate-800 dark:text-slate-200 lg:pl-8 lg:pr-0 xl:px-16',
-        className
-      )}
-    >
-      <div className="mx-auto mb-8 w-full max-w-3xl flex-shrink-0">
-        <h1 className="text-2xl font-semibold">Ask AI</h1>
-        <p className="subtitle my-2 opacity-70">
-          Find precise answers to any question about Sourcegraph
-          documentation with our AI chatbot.
-        </p>
-      </div>
-      <div
-        className={cn(
-          'relative max-h-[50vh] flex-1 overflow-y-auto pb-4',
-          className
-        )}
-      >
-        <ChatList messages={messages} isLoading={isLoading} />
-      </div>
+	return (
+		<div
+			className={cn(
+				'relative flex min-h-[80vh] min-w-0 flex-auto flex-col px-4 pt-16 text-slate-800 lg:pl-8 lg:pr-0 xl:px-16 dark:text-slate-200',
+				className
+			)}
+		>
+			<div className="mx-auto mb-8 w-full max-w-3xl flex-shrink-0">
+				<h1 className="text-2xl font-semibold text-slate-100">
+					Ask AI
+				</h1>
+				<p className="subtitle my-2 opacity-70">
+					Find precise answers to any question about Sourcegraph
+					documentation with our AI chatbot.
+				</p>
+			</div>
+			<div
+				className={cn(
+					'relative max-h-[50vh] flex-1 overflow-y-auto pb-4',
+					className
+				)}
+			>
+				<ChatList
+					messages={messages}
+					isLoading={isLoading}
+					isStreaming={isStreaming}
+				/>
+			</div>
 
-      <ChatInput
-        id={id}
-        isLoading={isLoading}
-        stop={stop}
-        append={append}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-      />
-    </div>
-  );
+			<ChatInput
+				id={id}
+				isLoading={isLoading}
+				stop={stop}
+				append={append}
+				reload={reload}
+				messages={messages}
+				input={input}
+				setInput={setInput}
+			/>
+		</div>
+	);
 }
diff --git a/src/components/chatbot/prompt-form.tsx b/src/components/chatbot/prompt-form.tsx
index 62924a3c7..07c842b91 100644
--- a/src/components/chatbot/prompt-form.tsx
+++ b/src/components/chatbot/prompt-form.tsx
@@ -1,10 +1,9 @@
-import {Button} from './ui/button';
-import {IconChat, IconSpinner} from './ui/icons';
 import {useEnterSubmit} from '@/lib/hooks/use-enter-submit';
 import {UseChatHelpers} from 'ai/react';
 import * as React from 'react';
 import Textarea from 'react-textarea-autosize';
-import SourceGraphIcon from '@/components/icons/SourceGraphIcon';
+import {Button} from './ui/button';
+import {IconChat, IconSpinner} from './ui/icons';
 
 export interface PromptProps
 	extends Pick<UseChatHelpers, 'input' | 'setInput'> {
@@ -39,7 +38,7 @@ export function PromptForm({
 			}}
 			ref={formRef}
 		>
-			<div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-2 pb-2 dark:bg-dark-bg sm:rounded-2xl sm:border">
+			<div className="relative flex max-h-60 w-full grow flex-col overflow-hidden border-light-border bg-background px-2 pb-2 sm:rounded-2xl sm:border dark:border-dark-border dark:bg-dark-bg">
 				<div className="flex w-full flex-col">
 					<label
 						htmlFor="playground"
@@ -47,17 +46,19 @@ export function PromptForm({
 					>
 						<div className="flex items-center gap-x-2">
 							<IconChat
-								className="h-5 w-5 text-muted-foreground/50"
+								className="h-5 w-5 text-muted-foreground/50 dark:text-dark-bg-3"
 								aria-hidden="true"
 							/>
-							<h3>Ask</h3>
+							<h3 className="dark:text-slate-500">
+								Ask your questions
+							</h3>
 						</div>
 
 						<div className="flex items-center justify-center gap-2 md:justify-start">
 							{/* Reset chat */}
 							<Button
 								variant="ghost"
-								className="max-w-xs"
+								className="hover:bg-light-bg2 max-w-xs rounded-md text-slate-100 text-slate-500 ring-light-border-2 hover:ring-1 hover:ring-inset  dark:text-slate-400 dark:ring-dark-border dark:hover:bg-dark-bg-3 dark:hover:ring-inset"
 								onClick={e => {
 									e.preventDefault();
 									location.reload();
@@ -69,6 +70,7 @@ export function PromptForm({
 							<Button
 								type="submit"
 								disabled={isLoading || input === ''}
+								className="hover:bg-light-bg2 rounded-md bg-dark-bg-3 text-slate-100 shadow-sm ring-1 ring-inset ring-light-border-2 dark:bg-dark-bg-2 dark:text-slate-400 dark:ring-inset dark:ring-dark-border dark:hover:bg-dark-bg-3"
 							>
 								{isLoading ? (
 									<>
@@ -76,9 +78,7 @@ export function PromptForm({
 										Generating
 									</>
 								) : (
-									<>
-										Send
-									</>
+									<>Send</>
 								)}
 
 								<span className="sr-only">Send message</span>
@@ -96,7 +96,7 @@ export function PromptForm({
 					onChange={e => setInput(e.target.value)}
 					placeholder="Ask any question related to Sourcegraph documentation..."
 					spellCheck={false}
-					className="min-h-[60px] w-full resize-none rounded-lg bg-light-bg px-4 py-[1.3rem] focus-within:outline-none dark:bg-dark-bg-1 sm:text-sm"
+					className="min-h-[60px] w-full resize-none rounded-lg bg-light-bg px-4 py-[1.3rem] focus-within:outline-none sm:text-sm dark:bg-dark-bg-2"
 				/>
 			</div>
 		</form>
diff --git a/src/components/chatbot/ui/button.tsx b/src/components/chatbot/ui/button.tsx
index 94e4edf6f..96a1b125f 100644
--- a/src/components/chatbot/ui/button.tsx
+++ b/src/components/chatbot/ui/button.tsx
@@ -1,70 +1,72 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import * as React from 'react';
 
-import cn from 'mxcn'
+import cn from 'mxcn';
 
 const buttonVariants = cva(
-  'focus-visible:ring-ring-muted-foreground/25 inline-flex cursor-pointer select-none items-center justify-center rounded-lg text-sm font-medium transition-colors focus:ring-1 focus:ring-muted-foreground/25 focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 gap-2 group',
-  {
-    variants: {
-      variant: {
-        default:
-          'border border-transparent bg-violet-700 text-primary-foreground shadow hover:text-violet-700 hover:bg-white dark:bg-white dark:text-violet-700 dark:shadow-none dark:focus-visible:outline-white/50',
-        warn: 'bg-warning text-warning-foreground hover:bg-warning/90 shadow-sm',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        'destructive-hover':
-          'border border-input bg-muted font-bold text-destructive shadow-sm hover:bg-destructive hover:text-destructive-foreground',
-        'outline-background':
-          'border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-foreground hover:text-background',
-        'outline-inverse':
-          'border border-input bg-muted-foreground text-muted shadow-sm hover:bg-foreground hover:text-background',
-        outline:
-          'border border-input bg-transparent shadow-sm hover:bg-foreground hover:text-background',
-        'outline-muted':
-          'border border-input bg-muted text-foreground shadow-sm hover:bg-foreground hover:text-background',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-        green:
-          'rounded-lg bg-green-500 text-primary shadow-sm hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-800'
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        xs: 'h-6 rounded-lg px-2 text-xs',
-        sm: 'h-8 rounded-lg px-3 text-xs',
-        lg: 'h-10 rounded-lg px-8',
-        xl: 'h-14 rounded-lg px-10',
-        icon: 'h-9 w-9'
-      }
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default'
-    }
-  }
-)
+	'focus-visible:ring-ring-muted-foreground/25 inline-flex cursor-pointer select-none items-center justify-center rounded-lg text-sm font-medium transition-colors focus:ring-1 focus:ring-muted-foreground/25 focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 gap-2 group',
+	{
+		variants: {
+			variant: {
+				default:
+					'border border-transparent bg-violet-700 text-primary-foreground shadow hover:text-violet-700 hover:bg-white dark:bg-white dark:text-violet-700 dark:shadow-none dark:focus-visible:outline-white/50',
+				warn: 'bg-warning text-warning-foreground hover:bg-warning/90 shadow-sm',
+				destructive:
+					'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+				'destructive-hover':
+					'border border-input bg-muted font-bold text-destructive shadow-sm hover:bg-destructive hover:text-destructive-foreground',
+				'outline-background':
+					'border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-foreground hover:text-background',
+				'outline-inverse':
+					'border border-input bg-muted-foreground text-muted shadow-sm hover:bg-foreground hover:text-background',
+				outline:
+					'border border-light-border dark:border-dark-border bg-transparent shadow-sm hover:bg-foreground hover:text-background',
+				'outline-muted':
+					'border border-input bg-muted text-foreground shadow-sm hover:bg-foreground hover:text-background',
+				secondary:
+					'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+				green: 'rounded-lg bg-green-500 text-primary shadow-sm hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-800'
+			},
+			size: {
+				default: 'h-9 px-4 py-2',
+				xs: 'h-6 rounded-lg px-2 text-xs',
+				sm: 'h-8 rounded-lg px-3 text-xs',
+				lg: 'h-10 rounded-lg px-8',
+				xl: 'h-14 rounded-lg px-10',
+				icon: 'h-9 w-9'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	}
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))+'bg-[#08b2c9] hover:bg-[#3ecde0]'}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = 'Button'
+	({className, variant, size, asChild = false, ...props}, ref) => {
+		const Comp = asChild ? Slot : 'button';
+		return (
+			<Comp
+				className={
+					cn(buttonVariants({variant, size, className})) +
+					'bg-[#08b2c9] hover:bg-[#3ecde0]'
+				}
+				ref={ref}
+				{...props}
+			/>
+		);
+	}
+);
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export {Button, buttonVariants};
diff --git a/src/components/chatbot/ui/separator.tsx b/src/components/chatbot/ui/separator.tsx
index 4c1bae7aa..c2e7b8091 100644
--- a/src/components/chatbot/ui/separator.tsx
+++ b/src/components/chatbot/ui/separator.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import cn from 'mxcn';
+import * as React from 'react';
 
 const Separator = React.forwardRef<
 	React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -19,7 +19,7 @@ const Separator = React.forwardRef<
 			className={cn(
 				'shrink-0 bg-border',
 				orientation === 'horizontal'
-					? 'h-[2px] w-full border-0 border-b-[1px] border-light-border-2 bg-light-bg dark:border-dark-border dark:bg-dark-bg'
+					? 'h-[2px] w-full border-0 border-b-[1px] border-light-border bg-light-bg dark:border-dark-border dark:bg-dark-bg'
 					: 'h-full w-[1px]',
 				className
 			)}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index cf285f190..bf38cc75b 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1042,16 +1042,17 @@
 }
 
 @keyframes sparkle {
-  0%, 100% {
-    opacity: 0.7;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
+	0%,
+	100% {
+		opacity: 0.7;
+		transform: scale(0.7);
+	}
+	50% {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 
 .sparkle-hover:hover .sparkle {
-  animation: sparkle 0.5s infinite;
+	animation: sparkle 1s infinite;
 }

From f1cb3fdef9c3ad39a2f2100ab627a05b60b1b2f2 Mon Sep 17 00:00:00 2001
From: Maedah Batool <me@MaedahBatool.com>
Date: Sun, 8 Sep 2024 19:51:56 -0700
Subject: [PATCH 18/19] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20scrolling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout.tsx               |  2 +-
 src/components/chatbot/chat-list.tsx    | 38 +++++++++++++++++++++++--
 src/components/chatbot/chat-message.tsx |  4 ---
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 16c3d4abf..b661ff0d8 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -71,7 +71,7 @@ function Header() {
 				<div className="relative ml-3 flex basis-0 items-center justify-end gap-3 sm:ml-4 sm:gap-6 md:flex-grow">
 					<Link
 						href="/ask-ai"
-						className="group flex animate-pulse items-center gap-1 whitespace-nowrap"
+						className="group flex items-center gap-1 whitespace-nowrap hover:animate-pulse"
 					>
 						<div className="flex items-center whitespace-nowrap text-slate-500">
 							<Sparkles className="sparkle hidden h-5 w-5 sm:block" />
diff --git a/src/components/chatbot/chat-list.tsx b/src/components/chatbot/chat-list.tsx
index a290e90ec..d21fec2cc 100644
--- a/src/components/chatbot/chat-list.tsx
+++ b/src/components/chatbot/chat-list.tsx
@@ -1,4 +1,5 @@
 import {type Message} from 'ai';
+import {useEffect, useRef, useState} from 'react';
 import {ChatMessage} from './chat-message';
 import {Separator} from './ui/separator';
 
@@ -10,13 +11,45 @@ export interface ChatList {
 
 const exampleMessage: Message = {
 	id: '1',
-	content: 'Hello, ask me anything related to Sourcegraph.',
+	content: '👋 Ask me anything about Sourcegraph.',
 	role: 'assistant'
 };
 
 export function ChatList({messages, isLoading, isStreaming}: ChatList) {
+	const messagesEndRef = useRef<HTMLDivElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [autoScroll, setAutoScroll] = useState(true);
+
+	const scrollToBottom = () => {
+		messagesEndRef.current?.scrollIntoView({behavior: 'smooth'});
+	};
+
+	useEffect(() => {
+		if (autoScroll) {
+			scrollToBottom();
+		}
+	}, [messages, isStreaming, autoScroll]);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+
+		const handleScroll = () => {
+			const {scrollTop, scrollHeight, clientHeight} = container;
+			const atBottom = scrollHeight - scrollTop === clientHeight;
+			setAutoScroll(atBottom);
+		};
+
+		container.addEventListener('scroll', handleScroll);
+		return () => container.removeEventListener('scroll', handleScroll);
+	}, []);
+
 	return (
-		<div className="relative mx-auto w-full max-w-3xl overflow-y-auto">
+		<div
+			ref={containerRef}
+			className="relative mx-auto w-full max-w-3xl overflow-y-auto"
+			style={{maxHeight: 'calc(100vh - 200px)'}} // Adjust this value as needed
+		>
 			{messages.length === 0 && <ChatMessage message={exampleMessage} />}
 			{messages?.map((message, index) => (
 				<div key={index}>
@@ -37,6 +70,7 @@ export function ChatList({messages, isLoading, isStreaming}: ChatList) {
 						)}
 				</div>
 			))}
+			<div ref={messagesEndRef} />
 		</div>
 	);
 }
diff --git a/src/components/chatbot/chat-message.tsx b/src/components/chatbot/chat-message.tsx
index 03d7f8042..6ab95bfb1 100644
--- a/src/components/chatbot/chat-message.tsx
+++ b/src/components/chatbot/chat-message.tsx
@@ -58,10 +58,6 @@ export function ChatMessage({
 			<div className="ml-4 flex-1 space-y-2 px-1">
 				{isLoading ? (
 					<div className="space-y-2">
-						<div className="h-4 w-3/4 animate-pulse rounded-md bg-gray-300 dark:bg-gray-700"></div>
-						<div className="h-4 w-2/4 animate-pulse rounded-md bg-gray-300 dark:bg-gray-700"></div>
-						<div className="h-4 w-1/2 animate-pulse rounded-md bg-gray-300 dark:bg-gray-700"></div>
-
 						<p
 							className={`animate-fade text-sm transition-all duration-500 ease-in-out ${stateStyles[analysisState]}`}
 						>

From 6ad9831b2b852b4c281ca15293305207178da2e6 Mon Sep 17 00:00:00 2001
From: Maedah Batool <me@MaedahBatool.com>
Date: Mon, 9 Sep 2024 17:51:05 -0700
Subject: [PATCH 19/19] Add AI chatbot in docs

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index ac5ae9761..77537dad2 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 # Sourcegraph Docs
 
 <!-- Working branch for August Release -->
+<!-- This is the PR to ship AI in docs -->
 
 Welcome to the Sourcegraph documentation! We're excited to have you contribute to our docs. We've recently rearchitectured our docs tech stack — powered by Next.js, TailwindCSS and deployed on Vercel. This guide will walk you through the process of contributing to our documentation using the new tech stack.