feat: add more examples for landing page chatbot

app/components/{ChatBot.tsx → LandingPageChatBot.tsx}

@@ -2,6 +2,13 @@
 
 import { useState, useRef, useEffect } from 'react'
 import { useChat } from 'ai/react'
+import {
+  AcademicCapIcon,
+  ClockIcon,
+  BookOpenIcon,
+  LightBulbIcon,
+  BriefcaseIcon,
+} from '@heroicons/react/24/outline'
 
 type MessageWithLoading = {
   content: string;
@@ -11,19 +18,29 @@ type MessageWithLoading = {
 
 const EXAMPLE_PROMPTS = [
   {
-    title: "Personalized Learning",
-    description: "Get tailored explanations",
-    prompt: "Can you help me understand photosynthesis in a simple way?"
+    title: "教案規劃",
+    prompt: "我想規劃一堂關於數學的課程",
+    icon: AcademicCapIcon
   },
   {
-    title: "24/7 Availability",
-    description: "Learn at your own pace",
-    prompt: "I need help solving this quadratic equation: x² + 5x + 6 = 0"
+    title: "英語對話",
+    prompt: "我想練習英語對話",
+    icon: ClockIcon
   },
   {
-    title: "Multiple Subjects",
-    description: "From math to literature",
-    prompt: "What are the main themes in Shakespeare's Macbeth?"
+    title: "作業批改",
+    prompt: "我想批改學生的作文作業",
+    icon: BookOpenIcon
+  },
+  {
+    title: "數學解題",
+    prompt: "我想解數學題目",
+    icon: LightBulbIcon
+  },
+  {
+    title: "我想學程式",
+    prompt: "我想學習如何寫程式",
+    icon: BriefcaseIcon
   }
 ]
 
@@ -31,11 +48,6 @@ export default function LandingPageChatBot() {
   const { messages: rawMessages, input, handleInputChange, handleSubmit, isLoading, append } = useChat({
     api: '/api/landing_page_chat',
     streamProtocol: 'data',
-    headers: {
-      'Accept': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      'Connection': 'keep-alive',
-    },
     onError: (error) => {
       console.error('Chat error:', error);
     },
@@ -82,16 +94,16 @@ export default function LandingPageChatBot() {
   }
 
   return (
-    <section className="w-full h-[800px] bg-gradient-to-b from-background-secondary to-background-primary flex items-center justify-center px-4">
+    <section className="w-full h-[1000px] bg-gradient-to-b from-background-secondary to-background-primary flex items-center justify-center px-4">
       <div className="w-full max-w-5xl mx-auto h-full flex items-center">
         {!hasInteracted && messages.length === 0 ? (
           <div className="text-center space-y-8 w-full">
             <div className="space-y-4">
               <h2 className="text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-                AI Learning Assistant
+                今天你想學什麼？
               </h2>
               <p className="text-text-secondary text-xl max-w-2xl mx-auto leading-relaxed">
-                Explore new topics, get homework help, or discover learning resources
+                探索新主題、獲得教學協助，或發現學習資源
               </p>
             </div>
 
@@ -101,7 +113,7 @@ export default function LandingPageChatBot() {
                   type="text"
                   value={input}
                   onChange={handleInputChange}
-                  placeholder="Ask anything about learning..."
+                  placeholder="請問任何關於學習的問題..."
                   className="w-full p-6 pr-36 rounded-2xl border border-border/50 bg-background-primary/50 
                            backdrop-blur-sm shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50 
                            text-lg transition-all duration-200 placeholder:text-text-secondary/50"
@@ -114,17 +126,17 @@ export default function LandingPageChatBot() {
                            shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50
                            disabled:hover:bg-primary disabled:cursor-not-allowed"
                 >
-                  <svg 
-                    xmlns="http://www.w3.org/2000/svg" 
-                    fill="none" 
-                    viewBox="0 0 24 24" 
-                    strokeWidth="1.5" 
-                    stroke="currentColor" 
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth="1.5"
+                    stroke="currentColor"
                     className={`size-6 ${isLoading ? 'animate-pulse' : ''}`}
                   >
-                    <path 
-                      strokeLinecap="round" 
-                      strokeLinejoin="round" 
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
                       d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" 
                     />
                   </svg>
@@ -133,29 +145,32 @@ export default function LandingPageChatBot() {
             </form>
 
             <div className="mt-12">
-              <h3 className="text-xl font-semibold text-text-primary mb-6">Try these examples:</h3>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
                 {EXAMPLE_PROMPTS.map((prompt, index) => (
                   <button
                     key={index}
                     onClick={() => sendMessage(prompt.prompt)}
-                    className="group p-6 rounded-2xl border border-border/50 bg-background-primary/30 
+                    className="group p-4 rounded-2xl border border-border/50 bg-background-primary/30 
                              hover:bg-background-primary/50 backdrop-blur-sm transition-all duration-200
-                             hover:border-primary/50 hover:shadow-lg text-left"
+                             hover:border-primary/50 hover:shadow-lg text-left w-full"
                   >
-                    <div className="flex items-center justify-between mb-2">
-                      <h4 className="font-semibold text-text-primary">{prompt.title}</h4>
+                    <div className="flex items-center justify-between w-full">
+                      <div className="flex items-center gap-3">
+                        <prompt.icon className="w-8 h-8 text-primary" />
+                        <h4 className="font-semibold text-text-primary text-md">
+                          {prompt.title}
+                        </h4>
+                      </div>
                       <svg
-                        className="w-5 h-5 text-primary opacity-0 group-hover:opacity-100 transition-opacity duration-200" 
+                        className="w-6 h-6 text-primary opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
+                        strokeWidth={2}
                       >
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                       </svg>
                     </div>
-                    <p className="text-text-secondary text-sm mb-2">{prompt.description}</p>
-                    <p className="text-primary text-sm font-medium truncate">{prompt.prompt}</p>
                   </button>
                 ))}
               </div>
@@ -164,7 +179,7 @@ export default function LandingPageChatBot() {
         ) : (
           <div className="bg-background-primary/50 backdrop-blur-sm rounded-2xl shadow-lg border border-border/50 overflow-hidden w-full h-[700px] flex flex-col">
             <div className="p-6 border-b border-border/50 bg-background-secondary/30">
-              <h2 className="text-xl font-semibold text-text-primary">AI Learning Assistant</h2>
+              <h2 className="text-xl font-semibold text-text-primary">PlayGO 導覽員</h2>
             </div>
 
             <div

app/page.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link"
 import { useTheme } from './components/ThemeProvider'
-import ChatBot from './components/ChatBot'
+import ChatBot from './components/LandingPageChatBot'
 
 export default function LandingPage() {
   const { theme, toggleTheme } = useTheme()
@@ -42,35 +42,11 @@ export default function LandingPage() {
         </div>
       </header>
 
-      {/* Add ChatBot right after header */}
-      <div className="pt-20">
-        <ChatBot />
-      </div>
-
       <main className="pt-4">
         {/* Hero Section */}
-        <section className="container mx-auto px-4 py-20 text-center">
-          <h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-            Turn learning into an AI-powered adventure
-          </h1>
-          <p className="text-text-secondary text-xl mb-12 max-w-2xl mx-auto">
-            PlayGo AI is the leading educational platform for building engaging AI-powered learning experiences
-          </p>
-          <div className="flex justify-center gap-4">
-            <Link 
-              href="/get-started" 
-              className="px-6 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 font-medium"
-            >
-              Get Started
-            </Link>
-            <Link 
-              href="/demo" 
-              className="px-6 py-3 rounded-lg border border-border hover:border-primary text-text-primary font-medium"
-            >
-              View Demo
-            </Link>
-          </div>
-        </section>
+        <div className="">
+          <ChatBot />
+        </div>
 
         {/* Features Grid */}
         <section className="bg-background-secondary py-20">

backend/main.py

@@ -8,7 +8,6 @@ from pydantic import BaseModel
 import openai
 from dotenv import load_dotenv
 from typing import List
-import asyncio
 
 # Load environment variables
 load_dotenv()
@@ -74,10 +73,7 @@ async def stream_text(messages: List[Message]):
 async def landing_page_chat(request: ChatRequest):
     response = StreamingResponse(
         stream_text(request.messages),
-        media_type='text/event-stream',
     )
-    response.headers['Cache-Control'] = 'no-cache'
-    response.headers['Connection'] = 'keep-alive'
     response.headers['x-vercel-ai-data-stream'] = 'v1'
     return response
 

next.config.ts

@@ -6,14 +6,7 @@ const nextConfig: NextConfig = {
     return [
       {
         source: '/api/:path*',
-        destination: 'http://localhost:8000/api/:path*',
-        has: [
-          {
-            type: 'header',
-            key: 'accept',
-            value: 'text/event-stream',
-          },
-        ],
+        destination: 'http://localhost:8000/api/:path*' // FastAPI backend
       }
     ]
   },

package-lock.json

@@ -8,10 +8,12 @@
       "name": "playgo_next",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.1.5",
         "ai": "^3.4.31",
         "next": "15.0.2",
         "react": "19.0.0-rc-02c0e824-20241028",
-        "react-dom": "19.0.0-rc-02c0e824-20241028"
+        "react-dom": "19.0.0-rc-02c0e824-20241028",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -211,70 +213,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
-      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/types": "^7.26.0"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -348,6 +286,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
+      "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -798,6 +745,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -812,6 +760,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -821,6 +770,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -830,12 +780,14 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1089,13 +1041,6 @@
       "integrity": "sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==",
       "license": "MIT"
     },
-    "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1401,119 +1346,11 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
-      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.12",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
-      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
-      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.12",
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
-      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/@vue/reactivity": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
-      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/@vue/runtime-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
-      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/@vue/runtime-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
-      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/runtime-core": "3.5.12",
-        "@vue/shared": "3.5.12",
-        "csstype": "^3.1.3"
-      }
-    },
-    "node_modules/@vue/server-renderer": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
-      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12"
-      },
-      "peerDependencies": {
-        "vue": "3.5.12"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
-      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/acorn": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -1532,16 +1369,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-typescript": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
-      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
-      "license": "MIT",
-      "peer": true,
-      "peerDependencies": {
-        "acorn": ">=8.9.0"
-      }
-    },
     "node_modules/ai": {
       "version": "3.4.31",
       "resolved": "https://registry.npmjs.org/ai/-/ai-3.4.31.tgz",
@@ -1672,6 +1499,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
       "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 0.4"
@@ -1872,6 +1700,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
       "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 0.4"
@@ -2147,6 +1976,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -2342,19 +2172,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "license": "BSD-2-Clause",
-      "peer": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -2949,13 +2766,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/esm-env": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
-      "integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -2987,17 +2797,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/esrap": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
-      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@types/estree": "^1.0.1"
-      }
-    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -3021,13 +2820,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3844,16 +3636,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-reference": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/estree": "*"
-      }
-    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -4214,13 +3996,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/locate-character": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4264,16 +4039,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/magic-string": {
-      "version": "0.30.12",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
-      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
-      }
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4783,6 +4548,7 @@
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5750,31 +5516,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/svelte": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.9.tgz",
-      "integrity": "sha512-nzq+PPKGS2PoEWDjAcXSrKSbXmmmOAxd6dAz1IhRusUpVkFS6DMELWPyBPGwu6TpO/gsgtFXwX0M4+pAR5gzKw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@types/estree": "^1.0.5",
-        "acorn": "^8.12.1",
-        "acorn-typescript": "^1.4.13",
-        "aria-query": "^5.3.1",
-        "axobject-query": "^4.1.0",
-        "esm-env": "^1.0.0",
-        "esrap": "^1.2.2",
-        "is-reference": "^3.0.2",
-        "locate-character": "^3.0.0",
-        "magic-string": "^0.30.11",
-        "zimmerframe": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/swrev": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/swrev/-/swrev-4.0.0.tgz",
@@ -6039,7 +5780,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -6089,28 +5830,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/vue": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
-      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-sfc": "3.5.12",
-        "@vue/runtime-dom": "3.5.12",
-        "@vue/server-renderer": "3.5.12",
-        "@vue/shared": "3.5.12"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6354,19 +6073,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/zimmerframe": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
-      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
       "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -9,10 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "ai": "^3.4.31",
     "next": "15.0.2",
     "react": "19.0.0-rc-02c0e824-20241028",
-    "react-dom": "19.0.0-rc-02c0e824-20241028"
+    "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",