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

style(footer+header): made both sticky

Browse source
This commit is contained in:
JK-le-dev 2025-10-18 21:39:02 -05:00
commit 3661874789
4 changed files with 38 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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