added a exit button on the chat bot and make sure it still working

app/api/chat/route.ts

@@ -17,7 +17,7 @@ export async function POST(request: Request) {
   catch(error){
     console.error(error);
     return NextResponse.json(
-      {error: "Error with the model response "},
+      {error: "Error with the model response " + String(error)},
       {status : 500}
     );
   }

app/chatbot/page.tsx

@@ -1,20 +1,22 @@
 "use client";
 
 import { useState, useEffect, useRef, useCallback } from "react";
-import { useSearchParams } from "next/navigation";
+import { useSearchParams, useRouter } from "next/navigation";
 import ChatInput from "../utils/component/ui/ChatInput";
 import MessageWindow from "../utils/component/ui/MessageWindow";
 import { ChatHistory, ChatSetting, Message , MessageRole } from "@/app/exportType/types";
 
 export default function Home(){
   const [history, setHistory] = useState<ChatHistory>([])
+  const [loading, setLoading] = useState(false);
   const historyRef = useRef<ChatHistory>([]); // Create a ref for history
   const [settings] = useState<ChatSetting>({
     temperature:1,
     model:"gemini-2.5-pro",
-    sysTemInstructions:"you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
+    systemInstruction:"you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
     
   });
+  const router = useRouter();
   const searchParams = useSearchParams();
   const initialMessageSent = useRef(false);
 
@@ -32,6 +34,7 @@ export default function Home(){
       const currentHistory = [...prevHistory, newUserMessage];
       
       const sendApiRequest = async () => {
+        setLoading(true);
         try{
           const response = await fetch("/api/chat", {
             method: "POST",
@@ -49,6 +52,7 @@ export default function Home(){
 
           if (data.error) {
             console.error("AI Error:", data.error);
+            setLoading(false);
             return;
           }
 
@@ -63,6 +67,7 @@ export default function Home(){
         catch (error) {
           console.error("Request Failed:", error);
         }
+        setLoading(false);
       };
       sendApiRequest();
 
@@ -88,6 +93,7 @@ export default function Home(){
         }, 0);
 
         const sendInitialApiRequest = async () => {
+          setLoading(true);
           try {
             const response = await fetch("/api/chat", {
               method: "POST",
@@ -105,6 +111,7 @@ export default function Home(){
 
             if (data.error) {
               console.error("AI Error:", data.error);
+              setLoading(false);
               return;
             }
 
@@ -117,6 +124,7 @@ export default function Home(){
           } catch (error) {
             console.error("Request Failed:", error);
           }
+          setLoading(false);
         };
 
         sendInitialApiRequest();
@@ -128,7 +136,13 @@ export default function Home(){
 
   return (
     <div className="flex flex-col py-32">
-      <MessageWindow history={history} />
+      <button
+        onClick={() => router.push('/Dashboard')}
+        className="absolute top-4 right-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+      >
+        Exit
+      </button>
+      <MessageWindow history={history} isLoading={loading} />
       <ChatInput onSend={handleSend} onOpenSettings={() => {}} />
     </div>
   );

app/exportType/types.ts

@@ -19,7 +19,7 @@ export interface GenerateConfig{
 export interface ChatSetting{
     temperature :number;
     model: string;
-    sysTemInstructions: string;
+    systemInstruction: string;
 }
 
 export interface CardData {

app/formfile/page.tsx

@@ -34,7 +34,7 @@ export default function Home() {
   const [settings] = useState<ChatSetting>({
     temperature: 1,
     model: "gemini-2.5-flash-lite",
-    sysTemInstructions: `You are an elite hackathon idea generator. Your task is to choose at lease two track and generate five different creative, feasible, and relevant project idea.
+    systemInstruction: `You are an elite hackathon idea generator. Your task is to choose at lease two track and generate five different creative, feasible, and relevant project idea.
 The output MUST be in Markdown format and strictly follow this structure:
 ### Project Idea Title
 **Track** [print out the track you used]

app/page.tsx

@@ -5,11 +5,13 @@ import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import ProtectedNavButton from "../components/ProtectedNavButton";
 import Link from 'next/link';
+import { style } from 'framer-motion/client';
+
 
 export default function Page() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300">
+      <header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300 background-blue-300">
         <Image
           className=""
           src="/logo.svg"
@@ -19,10 +21,10 @@ export default function Page() {
           priority
         />
         <div  className="flex items-center gap-4">
-          <Link href = "/auth/login" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+          <Link href = "/auth/login" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors container">
             Sign in
           </Link>
-          <Link href = "/auth/logout" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+          <Link href = "/auth/logout" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors container">
             Log out
           </Link>
         </div>

app/utils/component/ui/MessageWindow.tsx

@@ -4,11 +4,12 @@ import { ChatHistory } from "@/app/exportType/types";
 import {User, Bot} from "lucide-react"
 
 interface MessageWindowProps{
-    history :ChatHistory
+    history :ChatHistory;
+    isLoading: boolean;
 }
 
-export default function MessageWindow({history}:MessageWindowProps){
+export default function MessageWindow({history, isLoading}:MessageWindowProps){
-    const messageEndRef = useRef<HTMLDivElement>(null);
+    const messageEndRef = useRef<HTMLDivVElement>(null);
 
     useEffect(() =>{
         messageEndRef.current?.scrollIntoView({behavior:"smooth"});
@@ -52,6 +53,20 @@ export default function MessageWindow({history}:MessageWindowProps){
                         );
                     })}
         
+                {isLoading && (
+                    <div className="flex justify-start">
+                        <div className="mr-2">
+                            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray">
+                                <Bot size={15} className="text-gray-700" />
+                            </div>
+                        </div>
+                        <div className="px-4 py-2 shadow-sm rounded-lg bg-white text-gray-800 rounded-bl-none max-w-xs sm:max-w-md">
+                            <div className="whitespace-pre-wrap break-words">
+                                <span>Loading...</span>
+                            </div>
+                        </div>
+                    </div>
+                )}
         {/* Invisible element to help scroll to bottom */}
         <div ref={messageEndRef} />
         </div>

app/utils/geminiHelper.ts

@@ -16,7 +16,7 @@ export async function chatToGemini(
 ):Promise<string>{
         const model = genAI.getGenerativeModel({
             model:settings.model || "gemini-2.5-flash",
-            systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
+            systemInstruction: settings.systemInstruction || "you are going to create a project idea, explain it in summery first before going to detail",
             });
         
         const generationConfig:GenerateConfig = {

package-lock.json

@@ -66,6 +66,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1470,6 +1471,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1526,6 +1528,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.3.tgz",
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -2023,6 +2026,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2341,6 +2345,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -2870,6 +2875,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3047,6 +3053,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5123,6 +5130,7 @@
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5131,6 +5139,7 @@
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5776,6 +5785,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5927,6 +5937,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6187,6 +6198,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }