devaine/CodeRED-Astra
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(chat): fixed chat layout + added shadows

Browse source
This commit is contained in:
JK-le-dev 2025-10-18 22:18:18 -05:00
commit 41d0451cce
9 changed files with 116 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

81
web-app/package-lock.json generated
View file

@ -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",

1
web-app/package.json
View file

@ -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",

2
web-app/src/app/index.jsx
View file

@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout";
function App() {
return (
<div className="dark min-h-screen bg-gray-950 text-white flex items-center justify-center p-6">
<div className="dark min-h-screen bg-gray-950 text-white flex justify-center pt-12">
<ChatLayout />
</div>
);

2
web-app/src/components/layouts/chat-layout.jsx
View file

@ -25,7 +25,7 @@ export default function ChatLayout() {
}
return (
<div className="flex flex-col justify-between h-full w-full max-w-4xl gap-4 p-4">
<div className="w-full max-w-4xl gap-4 p-4">
<ChatHeader />
<ChatWindow messages={messages} />
<MessageInput onSend={handleSend} />

10
web-app/src/components/ui/button/delete-button.jsx
View file

@ -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>
);
}

10
web-app/src/components/ui/button/down-button.jsx
View file

@ -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>
);
}

4
web-app/src/components/ui/chat/chat-header.jsx
View file

@ -3,9 +3,9 @@ import React from "react";
export default function ChatHeader({ title = "Title of Chat" }) {
return (
<div className="w-full flex justify-center">
<header className="text-slate-100 fixed top-2">
<header className="text-slate-100 fixed top-4 ">
<div>
<h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-6 py-2 rounded-4xl">
<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">
{title}
</h1>
</div>

4
web-app/src/components/ui/chat/chat-window.jsx
View file

@ -5,7 +5,7 @@ function MessageBubble({ message }) {
return (
<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-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
>
<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-16">
<div className="flex-1 overflow-auto px-2 pb-20">
<div className="">
{messages.map((m, i) => (
<MessageBubble key={i} message={m} />

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

@ -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 (
<div className="w-full flex justify-center">
<footer className="fixed bottom-2 max-w-2xl w-full px-4">
<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>
<DownButton></DownButton>
</div>
<form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
<form
onSubmit={handleSubmit}
className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
>
<div className="flex p-2 shadow-xl">
<input
value={text}
@ -29,12 +33,14 @@ export default function MessageInput({ onSend }) {
placeholder="Type a message..."
className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
/>
<button
<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 }}
>
Send
</button>
<BotMessageSquare />
</motion.button>
</div>
</form>
</div>