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

feat: add UI tweaks

Browse Source
This commit is contained in:
Tat Dat Duong
2025-03-04 14:12:56 +01:00
parent 727af41b60
commit d65a74ed4f
2 changed files with 17 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -2,11 +2,7 @@ import "./App.css";
import { Thread } from "@/components/thread"; import { Thread } from "@/components/thread";
function App() { function App() {
return ( return <Thread />;
<div>
<Thread />
</div>
);
} }
export default App; export default App;

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

@@ -48,8 +48,8 @@ export function Thread() {
const stream = useStreamContext(); const stream = useStreamContext();
const messages = stream.messages; const messages = stream.messages;
const isLoading = stream.isLoading; const isLoading = stream.isLoading;
const prevMessageLength = useRef(0);
const prevMessageLength = useRef(0);
useEffect(() => { useEffect(() => {
if ( if (
messages.length !== prevMessageLength.current && messages.length !== prevMessageLength.current &&
@@ -75,14 +75,14 @@ export function Thread() {
const toolMessages = ensureToolCallsHaveResponses(stream.messages); const toolMessages = ensureToolCallsHaveResponses(stream.messages);
stream.submit( stream.submit(
{ messages: [...toolMessages, newHumanMessage] }, { messages: [...toolMessages, newHumanMessage] },
{ streamMode: ["values"] } { streamMode: ["values"] },
); );
setInput(""); setInput("");
}; };
const handleRegenerate = ( const handleRegenerate = (
parentCheckpoint: Checkpoint | null | undefined parentCheckpoint: Checkpoint | null | undefined,
) => { ) => {
// Do this so the loading state is correct // Do this so the loading state is correct
prevMessageLength.current = prevMessageLength.current - 1; prevMessageLength.current = prevMessageLength.current - 1;
@@ -95,15 +95,12 @@ export function Thread() {
const chatStarted = isLoading || messages.length > 0; const chatStarted = isLoading || messages.length > 0;
const renderMessages = messages.filter( const renderMessages = messages.filter(
(m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX) (m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX),
); );
return ( return (
<div <div
className={cn( className={cn("flex flex-col w-full h-full", chatStarted && "relative")}
"flex flex-col w-full h-full",
chatStarted ? "relative" : ""
)}
> >
<div className={cn("flex-1 px-4", chatStarted ? "pb-28" : "mt-64")}> <div className={cn("flex-1 px-4", chatStarted ? "pb-28" : "mt-64")}>
{!chatStarted && ( {!chatStarted && (
@@ -121,7 +118,7 @@ export function Thread() {
<div <div
className={cn( className={cn(
"flex flex-col gap-4 max-w-4xl w-full mx-auto mt-12 overflow-y-auto", "flex flex-col gap-4 max-w-4xl w-full mx-auto mt-12 overflow-y-auto",
!chatStarted && "hidden" !chatStarted && "hidden",
)} )}
> >
{renderMessages.map((message, index) => {renderMessages.map((message, index) =>
@@ -138,7 +135,7 @@ export function Thread() {
isLoading={isLoading} isLoading={isLoading}
handleRegenerate={handleRegenerate} handleRegenerate={handleRegenerate}
/> />
) ),
)} )}
{isLoading && !firstTokenReceived && <AssistantMessageLoading />} {isLoading && !firstTokenReceived && <AssistantMessageLoading />}
</div> </div>
@@ -146,29 +143,27 @@ export function Thread() {
<div <div
className={cn( className={cn(
"bg-white rounded-2xl border-[1px] border-gray-200 shadow-md p-3 mx-auto w-full max-w-5xl", "bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl",
chatStarted ? "fixed bottom-6 left-0 right-0" : "" chatStarted && "fixed bottom-6 left-0 right-0",
)} )}
> >
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="flex w-full gap-2 max-w-5xl mx-auto" className="grid grid-rows-[1fr,auto] gap-2 max-w-4xl mx-auto"
> >
<Input <Input
type="text" type="text"
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
placeholder="Type your message..." placeholder="Type your message..."
className="p-5 border-[0px] shadow-none ring-0 outline-none focus:outline-none focus:ring-0" className="px-4 py-6 border-none bg-transparent shadow-none ring-0 outline-none focus:outline-none focus:ring-0"
/> />
<Button <div className="flex items-center justify-end p-2 pt-0">
type="submit" <Button type="submit" disabled={isLoading || !input.trim()}>
className="p-5"
disabled={isLoading || !input.trim()}
>
Send Send
</Button> </Button>
</div>
</form> </form>
</div> </div>
</div> </div>