Merge pull request #4 from nedhmn/feature/web-chatbot-ui

Feature/web chatbot UI

Author: nedhmn

.github/workflows/lint.yml

@@ -45,10 +45,9 @@ jobs:
       - name: Lint
         run: pnpm lint
 
-      # Need to build before "check-types" for export types to be available
-
-      - name: Build
-        run: pnpm build
-
       - name: Check types
-        run: pnpm check-types
+        run: pnpm build
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          PINECONE_API_KEY: ${{ secrets.PINECONE_API_KEY }}
+          PINECONE_INDEX_NAME: ${{ secrets.PINECONE_INDEX_NAME }}

README.md

@@ -1 +1 @@
-# YGO Ruling AI Chatbot
+# Yu-Gi-Oh! Ruling AI Chatbot

apps/web/README.md

@@ -1,28 +1 @@
-## Getting Started
-
-First, run the development server:
-
-```bash
-yarn dev
-```
-
-Open [http://localhost:3001](http://localhost:3001) with your browser to see the result.
-
-You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
-
-To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3001/api/hello](http://localhost:3001/api/hello).
-
-## 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/foundations/about-nextjs) - 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_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# Yu-Gi-Oh! Ruling Chatbot

apps/web/app/(home)/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import Chat from "@/components/chat";
+
+export default function Page() {
+  return (
+    <div>
+      <Chat />
+    </div>
+  );
+}

apps/web/app/api/chat/route.ts

@@ -0,0 +1,27 @@
+import getOpenAIClient from "@repo/embeddings/openai";
+import { streamText } from "ai";
+
+export const maxDuration = 60;
+
+export async function POST(req: Request) {
+  try {
+    const { messages } = await req.json();
+    const openai = getOpenAIClient();
+
+    const result = streamText({
+      model: openai.responses("gpt-4o-mini"),
+      messages,
+    });
+
+    return result.toDataStreamResponse();
+  } catch (error) {
+    console.error("Error in chat API:", error);
+    return new Response(
+      JSON.stringify({ error: "Failed to process chat request" }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+  }
+}

apps/web/app/env.ts

@@ -0,0 +1,31 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /*
+   * Serverside Environment variables, not available on the client.
+   * Will throw if you access these variables on the client.
+   */
+  server: {
+    OPENAI_API_KEY: z.string(),
+    PINECONE_API_KEY: z.string(),
+    PINECONE_INDEX_NAME: z.string(),
+  },
+  /*
+   * Environment variables available on the client (and server).
+   *
+   * 💡 You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
+   */
+  client: {},
+  /*
+   * Due to how Next.js bundles environment variables on Edge and Client,
+   * we need to manually destructure them to make sure all are included in bundle.
+   *
+   * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
+   */
+  runtimeEnv: {
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    PINECONE_API_KEY: process.env.PINECONE_API_KEY,
+    PINECONE_INDEX_NAME: process.env.PINECONE_INDEX_NAME,
+  },
+});

apps/web/app/globals.css

@@ -2,26 +2,25 @@
 @import "@repo/tailwind-config";
 @import "@repo/ui/styles.css";
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* System markdown styles */
+.system-message-styles p + p {
+  @apply mt-3;
 }

apps/web/app/layout.tsx

@@ -1,8 +1,10 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { Geist } from "next/font/google";
+import { Inter } from "next/font/google";
+import { Provider } from "@repo/ui";
+import Navbar from "@/components/navbar";
 
-const geist = Geist({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Create Turborepo",
@@ -15,8 +17,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={geist.className}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <Provider>
+          <Navbar />
+          {children}
+        </Provider>
+      </body>
     </html>
   );
 }

apps/web/app/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useSendMessage } from "@/hooks/use-send-message";
+import { UseChatHelpers } from "@ai-sdk/react";
+import { Textarea } from "@repo/ui/components/ui/textarea";
+import { KeyboardEvent } from "react";
+
+type ChatInputAreaProps = {
+  chatHelpers: UseChatHelpers;
+  input: string;
+  setInput: (value: string) => void;
+};
+
+const ChatInputArea = ({
+  chatHelpers,
+  input,
+  setInput,
+}: ChatInputAreaProps) => {
+  const { status } = chatHelpers;
+  const isGeneratingResponse = ["streaming", "submitted"].includes(status);
+
+  const { handleSendMessage } = useSendMessage({
+    chatHelpers,
+    isGeneratingResponse,
+    input,
+    setInput,
+  });
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  return (
+    <Textarea
+      value={input}
+      placeholder="How can I help with Yu-Gi-Oh! rulings?"
+      className="pr-12 py-3 min-h-[60px] max-h-[120px] focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none border-0 resize-none"
+      disabled={isGeneratingResponse}
+      autoFocus
+      onChange={(event) => {
+        setInput(event.currentTarget.value);
+      }}
+      onKeyDown={handleKeyDown}
+    />
+  );
+};
+
+export default ChatInputArea;