kexsh/agent-chat-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support multiline input

Browse Source
This commit is contained in:
Tat Dat Duong
2025-03-07 15:18:57 +01:00
parent 2e7587cb96
commit 9fc221e88a
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/thread/index.tsx
View File

@@ -4,7 +4,6 @@ import { motion } from "framer-motion";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useStreamContext } from "@/providers/Stream"; import { useStreamContext } from "@/providers/Stream";
import { useState, FormEvent } from "react"; import { useState, FormEvent } from "react";
import { Input } from "../ui/input";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { Checkpoint, Message } from "@langchain/langgraph-sdk"; import { Checkpoint, Message } from "@langchain/langgraph-sdk";
import { AssistantMessage, AssistantMessageLoading } from "./messages/ai"; import { AssistantMessage, AssistantMessageLoading } from "./messages/ai";
@@ -316,17 +315,24 @@ export function Thread() {
<ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" /> <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />
<div className="bg-background rounded-2xl border shadow-md mx-auto mb-8 w-full max-w-4xl relative z-10"> <div className="bg-muted rounded-2xl border mx-auto mb-8 w-full max-w-4xl relative z-10">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto" className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"
> >
<Input <textarea
type="text"
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey && !e.metaKey) {
e.preventDefault();
const el = e.target as HTMLElement | undefined;
const form = el?.closest("form");
form?.requestSubmit();
}
}}
placeholder="Type your message..." placeholder="Type your message..."
className="px-4 py-6 border-none bg-transparent shadow-none ring-0 outline-none focus:outline-none focus:ring-0" className="p-3.5 pb-0 border-none bg-transparent field-sizing-content shadow-none ring-0 outline-none focus:outline-none focus:ring-0 resize-none"
/> />
<div className="flex items-center justify-end p-2 pt-0"> <div className="flex items-center justify-end p-2 pt-0">
@@ -338,6 +344,7 @@ export function Thread() {
) : ( ) : (
<Button <Button
type="submit" type="submit"
className="transition-all"
disabled={isLoading || !input.trim()} disabled={isLoading || !input.trim()}
> >
Send Send