From 366187478939114bea4efc4ffb7b276bb1d20585 Mon Sep 17 00:00:00 2001 From: JK-le-dev Date: Sat, 18 Oct 2025 21:39:02 -0500 Subject: [PATCH 1/7] style(footer+header): made both sticky --- .../src/components/layouts/chat-layout.jsx | 2 +- .../src/components/ui/chat/chat-header.jsx | 14 ++++-- .../src/components/ui/chat/chat-window.jsx | 6 +-- .../src/components/ui/chat/message-input.jsx | 47 ++++++++++--------- 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx index ebb0208..df4f299 100644 --- a/web-app/src/components/layouts/chat-layout.jsx +++ b/web-app/src/components/layouts/chat-layout.jsx @@ -25,7 +25,7 @@ export default function ChatLayout() { } return ( -
+
diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx index 9a329b4..1c57627 100644 --- a/web-app/src/components/ui/chat/chat-header.jsx +++ b/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 ( -
-

- {title} -

-
+
+
+
+

+ {title} +

+
+
+
); } diff --git a/web-app/src/components/ui/chat/chat-window.jsx b/web-app/src/components/ui/chat/chat-window.jsx index 49c689e..a012c6c 100644 --- a/web-app/src/components/ui/chat/chat-window.jsx +++ b/web-app/src/components/ui/chat/chat-window.jsx @@ -3,9 +3,7 @@ import React, { useRef, useEffect } from "react"; function MessageBubble({ message }) { const isUser = message.role === "user"; return ( -
+
@@ -17,7 +15,7 @@ function MessageBubble({ message }) { export default function ChatWindow({ messages }) { return ( -
+
{messages.map((m, i) => ( diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx index 16dbe1c..cdc8e6a 100644 --- a/web-app/src/components/ui/chat/message-input.jsx +++ b/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 "../button/down-button"; +import DownButton from "src/components/ui/button/down-button"; +import { MessageCirclePlus } from "lucide-react"; export default function MessageInput({ onSend }) { const [text, setText] = useState(""); @@ -13,27 +14,31 @@ export default function MessageInput({ onSend }) { } return ( -
-
- - -
-
-
- 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" - /> - +
+
+
+
+ + +
+ +
+ 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" + /> + +
+
- +
); } From 41d0451cce3c5118163ea8221c2bb6205c7a2999 Mon Sep 17 00:00:00 2001 From: JK-le-dev Date: Sat, 18 Oct 2025 22:18:18 -0500 Subject: [PATCH 2/7] style(chat): fixed chat layout + added shadows --- web-app/package-lock.json | 81 +++++++++++++++++++ web-app/package.json | 1 + web-app/src/app/index.jsx | 2 +- .../src/components/layouts/chat-layout.jsx | 2 +- .../components/ui/button/delete-button.jsx | 10 ++- .../src/components/ui/button/down-button.jsx | 10 ++- .../src/components/ui/chat/chat-header.jsx | 4 +- .../src/components/ui/chat/chat-window.jsx | 4 +- .../src/components/ui/chat/message-input.jsx | 18 +++-- 9 files changed, 116 insertions(+), 16 deletions(-) diff --git a/web-app/package-lock.json b/web-app/package-lock.json index 0aabb64..b874e30 100644 --- a/web-app/package-lock.json +++ b/web-app/package-lock.json @@ -18,6 +18,7 @@ "express": "^5.1.0", "helmet": "^8.1.0", "lucide-react": "^0.546.0", + "motion": "^12.23.24", "pg": "^8.16.3", "react": "^19.2.0", "react-bootstrap": "^2.10.10", @@ -3652,6 +3653,39 @@ "node": ">= 0.6" } }, + "node_modules/framer-motion": { + "version": "12.23.24", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz", + "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.23.23", + "motion-utils": "^12.23.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/framer-motion/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/fresh": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz", @@ -5236,6 +5270,53 @@ "node": ">= 18" } }, + "node_modules/motion": { + "version": "12.23.24", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz", + "integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==", + "license": "MIT", + "dependencies": { + "framer-motion": "^12.23.24", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/motion-dom": { + "version": "12.23.23", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz", + "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.23.6" + } + }, + "node_modules/motion-utils": { + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "license": "MIT" + }, + "node_modules/motion/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/web-app/package.json b/web-app/package.json index 7027cf2..2011130 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -23,6 +23,7 @@ "express": "^5.1.0", "helmet": "^8.1.0", "lucide-react": "^0.546.0", + "motion": "^12.23.24", "pg": "^8.16.3", "react": "^19.2.0", "react-bootstrap": "^2.10.10", diff --git a/web-app/src/app/index.jsx b/web-app/src/app/index.jsx index 8ce7147..86a06e6 100644 --- a/web-app/src/app/index.jsx +++ b/web-app/src/app/index.jsx @@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout"; function App() { return ( -
+
); diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx index df4f299..1193aa8 100644 --- a/web-app/src/components/layouts/chat-layout.jsx +++ b/web-app/src/components/layouts/chat-layout.jsx @@ -25,7 +25,7 @@ export default function ChatLayout() { } return ( -
+
diff --git a/web-app/src/components/ui/button/delete-button.jsx b/web-app/src/components/ui/button/delete-button.jsx index 53a5367..61b4df0 100644 --- a/web-app/src/components/ui/button/delete-button.jsx +++ b/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 ( - + ); } diff --git a/web-app/src/components/ui/button/down-button.jsx b/web-app/src/components/ui/button/down-button.jsx index e402e8f..c5a5d9f 100644 --- a/web-app/src/components/ui/button/down-button.jsx +++ b/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 ( - + ); } diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx index 1c57627..97f8dfa 100644 --- a/web-app/src/components/ui/chat/chat-header.jsx +++ b/web-app/src/components/ui/chat/chat-header.jsx @@ -3,9 +3,9 @@ import React from "react"; export default function ChatHeader({ title = "Title of Chat" }) { return (
-
+
-

+

{title}

diff --git a/web-app/src/components/ui/chat/chat-window.jsx b/web-app/src/components/ui/chat/chat-window.jsx index a012c6c..ac9e3ff 100644 --- a/web-app/src/components/ui/chat/chat-window.jsx +++ b/web-app/src/components/ui/chat/chat-window.jsx @@ -5,7 +5,7 @@ function MessageBubble({ message }) { return (
{message.content}
@@ -15,7 +15,7 @@ function MessageBubble({ message }) { export default function ChatWindow({ messages }) { return ( -
+
{messages.map((m, i) => ( diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx index cdc8e6a..654b11b 100644 --- a/web-app/src/components/ui/chat/message-input.jsx +++ b/web-app/src/components/ui/chat/message-input.jsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; import DeleteButton from "src/components/ui/button/delete-button"; import DownButton from "src/components/ui/button/down-button"; -import { MessageCirclePlus } from "lucide-react"; +import { motion } from "motion/react"; +import { BotMessageSquare } from "lucide-react"; export default function MessageInput({ onSend }) { const [text, setText] = useState(""); @@ -15,13 +16,16 @@ export default function MessageInput({ onSend }) { return (
-