Merge branch 'diagram'

web-app/src/components/layouts/chat-layout.jsx

@@ -2,7 +2,21 @@ import React, { useState } from "react";
 import ChatHeader from "src/components/ui/chat/chat-header";
 import ChatWindow from "src/components/ui/chat/chat-window";
 import MessageInput from "src/components/ui/chat/message-input";
-import '../../index.css'
+
+import { GoogleGenAI } from "@google/genai"
+
+const ai = new GoogleGenAI({ apiKey: import.meta.env.GEMINI_API_KEY })
+
+async function AIRepsponse(userInputArray) {
+    const response = await ai.models.generateContent({
+        model: "gemini-2.5-flash",
+        contents: userInputArray
+    })
+    return response.text
+  }
+
+let userInput = []
+
 export default function ChatLayout() {
   const [messages, setMessages] = useState([
     {
@@ -11,15 +25,17 @@ export default function ChatLayout() {
     },
   ]);
 
-  function handleSend(text) {
+  async function handleSend(text) {
+    userInput.push(text)
+    const res = await AIRepsponse(userInput)
+
     const userMsg = { role: "user", content: text };
     setMessages((s) => [...s, userMsg]);
 
-    // fake assistant reply after short delay
     setTimeout(() => {
       setMessages((s) => [
         ...s,
-        { role: "assistant", content: `You said: ${text}` },
+        { role: "assistant", content: res },
       ]);
     }, 600);
   }
@@ -30,7 +46,7 @@ export default function ChatLayout() {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className="w-full max-w-4xl gap-4 p-4">
       <ChatHeader />
       <ChatWindow messages={messages} />
       <MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll} />