Added Chatbot

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",

src/app/api/chat/route.ts

@@ -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/layout.tsx

@@ -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/components/ChatBot/index.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/styles.css

@@ -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;
+}