feat(skematic): added skematic 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

@@ -5,7 +5,7 @@ export default function ChatHeader({ title = "Title of Chat" }) {
     <div className="w-full flex justify-center">
       <header className="text-slate-100 fixed top-4 ">
         <div>
-          <h1 className="text-lg font-semibold shadow-lg shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
+          <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>

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

@@ -5,7 +5,7 @@ function MessageBubble({ message }) {
   return (
     <div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
       <div
-        className={`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>
       </div>
@@ -15,7 +15,7 @@ function MessageBubble({ message }) {
 
 export default function ChatWindow({ messages }) {
   return (
-    <div className="flex-1 overflow-auto px-2 pb-20">
+    <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,7 @@
 import React, { useState } from "react";
 import DeleteButton from "src/components/ui/button/delete-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";
 
@@ -19,7 +20,10 @@ export default function MessageInput({ onSend }) {
       <footer className="fixed bottom-6 max-w-2xl w-full px-4">
         <div className="flex flex-col gap-2">
           <div className="flex justify-between">
-            <DeleteButton></DeleteButton>
+            <div className="flex gap-2">
+              <SchematicButton></SchematicButton>
+              <DeleteButton></DeleteButton>
+            </div>
             <DownButton></DownButton>
           </div>
           <form