[ENH] Chat with your Docs Sample App

examples/sample_apps/chat_with_your_docs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/sample_apps/chat_with_your_docs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/sample_apps/chat_with_your_docs/app/globals.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/sample_apps/chat_with_your_docs/app/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import React from "react";
+import Header from "@/components/header/header";
+import Sidebar from "@/components/sidebar/sidebar";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`h-screen w-full overflow-hidden ${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <div className="relative h-full w-full">
+          <div className="absolute inset-0 bg-[url('/background.jpg')] bg-cover bg-center opacity-10" />
+          <div className="relative z-10 flex flex-col h-full">
+            <Header />
+            <div className="flex items-center w-full h-full">
+              <Sidebar />
+              {children}
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}

examples/sample_apps/chat_with_your_docs/app/page.tsx

@@ -0,0 +1,17 @@
+import ChatContainer from "@/components/chat/chat-container";
+import InputBox from "@/components/chat/input-box";
+
+export default function Home() {
+  return (
+    <div className="flex p-5 items-center justify-center w-full h-full">
+      <ChatContainer>
+        <div className="flex flex-col w-full h-full">
+          <div className="flex-grow"></div>
+          <div className="flex items-center justify-center p-5">
+            <InputBox />
+          </div>
+        </div>
+      </ChatContainer>
+    </div>
+  );
+}

examples/sample_apps/chat_with_your_docs/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

examples/sample_apps/chat_with_your_docs/components/chat/chat-container.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const ChatContainer: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <div className="flex flex-col w-full h-full border border-black">
+      <div className="relative py-2 px-[3px] h-fit border-b-[1px] border-black dark:border-gray-300 dark:bg-gray-950">
+        <div className="flex flex-col gap-0.5">
+          {[...Array(7)].map((_, index) => (
+            <div
+              key={index}
+              className="w-full h-[1px] bg-black dark:bg-gray-300"
+            />
+          ))}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-2 py-1 bg-white dark:bg-gray-950 font-mono select-none">
+            CHROMA CHAT
+          </div>
+        </div>
+      </div>
+      <div className="flex-grow ">{children}</div>
+    </div>
+  );
+};
+
+export default ChatContainer;

examples/sample_apps/chat_with_your_docs/components/chat/input-box.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import ShadowButton from "@/components/ui/shadow-button";
+import { ArrowRight } from "lucide-react";
+
+const InputBox: React.FC = () => {
+  return (
+    <div className="flex items-center justify-between gap-2 h-12 w-full border border-black py-1 px-2">
+      <Input className="border-0 shadow-none rounded-none focus-visible:ring-0" />
+      <ShadowButton>
+        <ArrowRight className="w-4 h-4" />
+      </ShadowButton>
+    </div>
+  );
+};
+
+export default InputBox;

examples/sample_apps/chat_with_your_docs/components/header/discord-link.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Link from "next/link";
+import { DiscordLogoIcon } from "@radix-ui/react-icons";
+import HeaderButton from "@/components/header/header-button";
+
+const DiscordLink: React.FC = async () => {
+    const response = await fetch(
+        `https://discord.com/api/guilds/1073293645303795742/widget.json`,
+        { next: { revalidate: 3600 } },
+    );
+    const onlineUsers = response.ok
+        ? (await response.json()).presence_count
+        : undefined;
+
+    return (
+        <Link
+            href="https://discord.gg/MMeYNTmh3x"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <HeaderButton className="flex items-center gap-2 p-[0.35rem] text-xs">
+                <DiscordLogoIcon className="h-4 w-4" />
+                {onlineUsers ? `${onlineUsers} online` : undefined}
+            </HeaderButton>
+        </Link>
+    );
+};
+
+export default DiscordLink;

examples/sample_apps/chat_with_your_docs/components/header/github-link.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { formatToK } from "@/lib/utils";
+import Link from "next/link";
+import HeaderButton from "@/components/header/header-button";
+
+const GithubLink: React.FC = async () => {
+    const response = await fetch(
+        `https://api.github.com/repos/chroma-core/chroma`,
+    );
+    const stars = response.ok
+        ? (await response.json()).stargazers_count
+        : undefined;
+
+    return (
+        <Link
+            href="https://github.com/chroma-core/chroma"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <HeaderButton className="flex items-center gap-2 p-[0.35rem] text-xs">
+                <GitHubLogoIcon className="h-4 w-4" />
+                {stars && formatToK(stars)}
+            </HeaderButton>
+        </Link>
+    );
+};
+
+export default GithubLink;