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

feat(file input): adding feature to add and remove files

Browse source 
Next up is to create a seperate menu that will show all the files.
Probably as a seperate frame. Needs to be scrollable and can use similar
ui as before
This commit is contained in:
JK-le-dev 2025-10-19 04:32:32 -05:00
commit 7785047976
11 changed files with 182 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,17 @@
import React, { useState } from "react";
import React, { useState, useRef, useEffect } 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";
export default function MessageInput({ onSend }) {
const [text, setText] = useState("");
const textareaRef = useRef(null);
useEffect(() => {
// ensure correct initial height
if (textareaRef.current) textareaRef.current.style.height = "auto";
}, []);
function handleSubmit(e) {
e.preventDefault();
@ -17,29 +22,37 @@ export default function MessageInput({ onSend }) {
return (
<div className="w-full flex justify-center">
<footer className="fixed bottom-6 max-w-2xl w-full px-4">
<div className="flex flex-col gap-2">
<div className="flex justify-between">
<div className="flex gap-2">
<SchematicButton></SchematicButton>
<DeleteButton></DeleteButton>
<footer className="fixed bottom-6 max-w-3xl w-full px-4">
<div className="flex flex-col gap-4">
<div className="flex justify-between items-end">
<div className="flex">
<DownButton></DownButton>
</div>
<DownButton></DownButton>
</div>
<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
<div className="flex p-2 shadow-xl items-center">
<textarea
ref={textareaRef}
value={text}
onChange={(e) => setText(e.target.value)}
onChange={(e) => {
setText(e.target.value);
// auto-resize
const ta = textareaRef.current;
if (ta) {
ta.style.height = "auto";
ta.style.height = `${ta.scrollHeight}px`;
}
}}
placeholder="Type a message..."
className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
rows={1}
className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none resize-none overflow-auto max-h-40"
/>
<motion.button
type="submit"
className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4"
className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4 items-center"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>