Merge branch 'buttons' into diagram

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

@@ -1,20 +0,0 @@
-import "./action-button.css";
-
-export default function ActionButton({
-  onClick,
-  children,
-  type = "add", // 'add' or 'delete'
-  ...props
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className="action-btn"
-      style={{ "--btn-color": color }}
-      {...props}
-    >
-      {type === "add" ? "New Chat" : "Delete Chat"}
-      {svg}
-    </button>
-  );
-}

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

@@ -0,0 +1,9 @@
+import { Flame } from "lucide-react";
+
+export default function FlameButton({ onClick }) {
+  return (
+    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+      <Flame />
+    </button>
+  );
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { ArrowDown } from "lucide-react";
+
+export default function DownButton({ onClick }) {
+  return (
+    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+      <ArrowDown />
+    </button>
+  );
+}

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

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+import DeleteButton from "src/components/ui/button/delete-button";
+import DownButton from "../button/down-button";
 
 export default function MessageInput({ onSend }) {
   const [text, setText] = useState("");
@@ -11,18 +13,27 @@ export default function MessageInput({ onSend }) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
+    <div className="flex flex-col gap-2">
-      <div className="flex p-4 shadow-xl">
+      <div className="flex justify-between">
-        <input
+        <DeleteButton></DeleteButton>
-          value={text}
+        <DownButton></DownButton>
-          onChange={(e) => setText(e.target.value)}
-          placeholder="Type a message..."
-          className="flex-1 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
-        />
-        <button type="submit" className="">
-          Send
-        </button>
       </div>
-    </form>
+      <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
+        <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"
+          />
+          <button
+            type="submit"
+            className="px-4 py-2 bg-gray-700 rounded-xl ml-4"
+          >
+            Send
+          </button>
+        </div>
+      </form>
+    </div>
   );
 }