Added Chatbot (#857)

<!-- Explain the changes introduced in your PR -->

## Pull Request approval

You will need to get your PR approved by at least one member of the
Sourcegraph team. For reviews of docs formatting, styles, and component
usage, please tag the docs team via the #docs Slack channel.

Author: zahidalidev

baseai/memory/docs/index.ts

@@ -1,14 +1,24 @@
 import { MemoryI } from '@baseai/core';
-import path from 'path';
 
 const memoryDocs = (): MemoryI => ({
   name: 'docs',
   description: 'Docs folder of sourcegraph docs repository as an auto-synced memory',
-  config: {
-    useGitRepo: true,
-    dirToTrack: path.posix.join('.', 'docs'),
-    extToTrack: [".md", ".mdx"]
-  }
+	git: {
+		enabled: true,
+		include: ['**/*'],
+		gitignore: true,
+		deployedAt: '',
+		embeddedAt: '',
+	},
+  documents: {
+		meta: doc => {
+			const url = `https://sourcegraph.com/docs/${doc.path}`;
+			return {
+				url,
+				name: doc.name,
+			};
+		},
+	},
 });
 
 export default memoryDocs;

package.json

@@ -13,10 +13,11 @@
   "dependencies": {
     "@algolia/autocomplete-core": "^1.9.2",
     "@algolia/client-search": "^4.22.1",
-    "@baseai/core": "^0.9.8",
+    "@baseai/core": "^0.9.40",
     "@docsearch/react": "3",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.18",
+    "@langbase/components": "^0.1.5",
     "@mdx-js/mdx": "^3.0.1",
     "@next/third-parties": "^14.1.4",
     "@radix-ui/react-hover-card": "^1.1.1",
@@ -39,6 +40,7 @@
     "github-slugger": "^2.0.0",
     "js-yaml": "^4.1.0",
     "kbar": "^0.1.0-beta.44",
+    "langbase": "^1.1.11",
     "lucide-react": "^0.372.0",
     "mdx": "^0.3.1",
     "next": "^14.2.3",
@@ -63,7 +65,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "baseai": "^0.9.8",
+    "baseai": "^0.9.40",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.16",
     "prettier": "^3.0.1",

pnpm-lock.yaml

@@ -0,0 +1,21 @@
+import { NextRequest } from 'next/server';
+import { Langbase } from 'langbase';
+
+const langbase = new Langbase({
+	apiKey: process.env.LANGBASE_API_KEY!
+});
+
+export async function POST(req: NextRequest) {
+	const options = await req.json();
+	const { stream, threadId } = await langbase.pipe.run({
+		...options,
+		name: 'docs-agent-cody-api'
+	});
+
+	return new Response(stream, {
+		status: 200,
+		headers: {
+			'lb-thread-id': threadId ?? ''
+		}
+	});
+}

src/app/api/chat/route.ts

@@ -6,9 +6,9 @@ import config from 'docs.config';
 import { type Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import localFont from 'next/font/local';
+import Chatbot from '@/components/ChatBot';
 
-
-
+import '@langbase/components/styles'
 import '@/styles/tailwind.css';
 
 const inter = Inter({
@@ -68,6 +68,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 			className="flex min-h-full bg-light-bg dark:bg-dark-bg"
 			>
 				<Providers>
+					{/* <Chatbot /> */}
 					<Layout>{children}</Layout>
 				</Providers>
 			</body>

src/app/layout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Chatbot } from '@langbase/components';
+
+import './styles.css'
+
+export default function App() {
+
+  return (
+    <Chatbot
+      badge='Experimental'
+      apiRoute="/docs/api/chat"
+      openingMessage='Find precise answers to any question about Sourcegraph documentation with our AI chatbot.'
+      suggestions={[
+        {
+          title: `Explain how to get started in easy steps`,
+          prompt: `Explain how to get started in easy steps?`,
+        },
+        {
+          title: `How do I create an API key?`,
+          prompt: `How do I create an API key?`,
+        },
+        {
+          title: `What are the supported providers?`,
+          prompt: `What are the supported providers?`,
+        },
+        {
+          title: `How do I reset my password?`,
+          prompt: `How do I reset my password?`,
+        },
+      ]}
+      customStyles={{
+        chatBtn: {
+          foregroundColor: '#14171F',
+        },
+      }}
+    />
+  );
+}

src/components/ChatBot/index.tsx

@@ -0,0 +1,90 @@
+.lb-bg-background {
+  background-color: #F9FAFB;
+}
+
+.lb-bg-muted {
+  background-color: #f4f4f5;
+}
+
+.lb-text-primary-foreground {
+  color: #0F172A;
+  background-color: #ffffff;
+  border-width: 1;
+  border-color: rgb(219 226 240);
+}
+
+.light button.hover\:lb-bg-foreground:hover {
+  background-color: #F9FAFB;
+  color: #0F172A !important
+}
+
+button.lb-text-primary-foreground {
+  background-color: #ffffff;
+}
+
+.light .lb-border-muted-foreground\/40 {
+  border-color: rgb(219 226 240) !important;
+}
+
+.light .lb-text-primary-foreground:hover {
+  background-color: #ffffff;
+}
+
+.lb-text-inherit {
+  color: #334155;
+}
+
+.lb-line-clamp-2 {
+  color: #334155 !important;
+}
+.dark .lb-border-border {
+  border-color: rgb(38 43 56);
+}
+
+.dark .lb-text-primary-foreground {
+  color: #F9FAFB;
+  background-color: rgb(29 33 47);
+  border-width: 1;
+  border-color: rgb(38 43 56);
+}
+
+.dark .lb-border-muted-foreground {
+  border-color: rgb(38 43 56);
+}
+
+.dark .lb-bg-background {
+  background-color: #14171F;
+}
+
+.dark .lb-bg-muted {
+  background-color: #171B26;
+}
+
+.dark .lb-bg-border {
+  border-color: rgb(38 43 56);
+  background-color: rgb(38 43 56);
+}
+
+.dark .sm\:lb-border-border {
+  border-color: rgb(38 43 56);
+}
+
+.dark .lb-text-inherit {
+  color: #94A3B8;
+}
+
+.dark .lb-line-clamp-2 {
+  color: #94A3B8 !important;
+}
+
+.dark button.hover\:lb-bg-foreground:hover {
+  color: #F9FAFB !important
+}
+
+.dark .hover\:lb-bg-secondary\/60:hover {
+  background-color: #171B26;
+}
+
+.dark .hover\:lb-bg-accent:hover {
+  background-color: #171B26;
+}