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} />

web-app/src/components/ui/button/delete-button.jsx

@@ -1,9 +1,15 @@
 import { Flame } from "lucide-react";
+import { motion } from "motion/react";
 
 export default function FlameButton({ onClick }) {
   return (
-    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+    <motion.button
+      onClick={onClick}
+      className="bg-gray-700 p-2 rounded-2xl"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
       <Flame />
-    </button>
+    </motion.button>
   );
 }

web-app/src/components/ui/button/down-button.jsx

@@ -1,10 +1,16 @@
 import React from "react";
 import { ArrowDown } from "lucide-react";
+import { motion } from "motion/react";
 
 export default function DownButton({ onClick }) {
   return (
-    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+    <motion.button
+      onClick={onClick}
+      className="bg-gray-700 p-2 rounded-2xl"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
       <ArrowDown />
-    </button>
+    </motion.button>
   );
 }

web-app/src/components/ui/button/schematic-button.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { motion } from "motion/react";
+import { FilePlus2 } from "lucide-react";
+
+export default function SchematicButton({ onClick }) {
+  return (
+    <motion.button
+      onClick={onClick}
+      className=" bg-gray-700 p-2 rounded-2xl"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
+      <FilePlus2 />
+    </motion.button>
+  );
+}

web-app/src/components/ui/chat/chat-header.jsx

@@ -2,10 +2,14 @@ import React from "react";
 
 export default function ChatHeader({ title = "Title of Chat" }) {
   return (
-    <header className="flex justify-center text-slate-100">
-      <h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-4 py-2 rounded-4xl">
-        {title}
-      </h1>
-    </header>
+    <div className="w-full flex justify-center">
+      <header className="text-slate-100 fixed top-4 ">
+        <div>
+          <h1 className="text-lg font-semibold shadow-md shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
+            {title}
+          </h1>
+        </div>
+      </header>
+    </div>
   );
 }

web-app/src/components/ui/chat/chat-window.jsx

@@ -1,15 +1,21 @@
 import React, { useRef, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import { MARKDOWN_COMPONENTS } from "src/config/markdown";
 
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
   return (
-    <div
-      className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
-    >
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
       <div
-        className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
+        className={`p-3 rounded-xl  ${isUser ? "bg-indigo-600 text-white rounded-tr-sm" : "bg-gray-700 text-slate-100 rounded-tl-sm"}`}
       >
-        <div className="text-sm">{message.content}</div>
+        {isUser ? (
+          <div className="text-sm">{message.content}</div>
+        ) : (
+          <ReactMarkdown components={MARKDOWN_COMPONENTS}>
+            {message.content}
+          </ReactMarkdown>
+        )}
       </div>
     </div>
   );
@@ -17,7 +23,7 @@ function MessageBubble({ message }) {
 
 export default function ChatWindow({ messages }) {
   return (
-    <div className="flex-1 overflow-auto p-2">
+    <div className="flex-1 overflow-auto px-2 pt-4 pb-32">
       <div className="">
         {messages.map((m, i) => (
           <MessageBubble key={i} message={m} />

web-app/src/components/ui/chat/message-input.jsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import DeleteButton from "src/components/ui/button/delete-button";
-import DownButton from "../button/down-button";
+import DownButton from "src/components/ui/button/down-button";
+import SchematicButton from "src/components/ui/button/schematic-button";
+import { motion } from "motion/react";
+import { BotMessageSquare } from "lucide-react";
 
 export default function MessageInput({ onSend, onDeleteAll }) {
   const [text, setText] = useState("");
@@ -30,10 +33,25 @@ export default function MessageInput({ onSend, onDeleteAll }) {
             type="submit"
             className="px-4 py-2 bg-gray-700 rounded-xl ml-4"
           >
-            Send
-          </button>
+            <div className="flex p-2 shadow-xl">
+              <input
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                placeholder="Type a message..."
+                className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
+              />
+              <motion.button
+                type="submit"
+                className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+              >
+                <BotMessageSquare />
+              </motion.button>
+            </div>
+          </form>
         </div>
-      </form>
+      </footer>
     </div>
   );
 }