295 lines
9.4 KiB
TypeScript
295 lines
9.4 KiB
TypeScript
import { v4 as uuidv4 } from "uuid";
|
|
import { ReactNode, useEffect, useRef } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useStreamContext } from "@/providers/Stream";
|
|
import { useState, FormEvent } from "react";
|
|
import { Input } from "../ui/input";
|
|
import { Button } from "../ui/button";
|
|
import { Checkpoint, Message } from "@langchain/langgraph-sdk";
|
|
import { AssistantMessage, AssistantMessageLoading } from "./messages/ai";
|
|
import { HumanMessage } from "./messages/human";
|
|
import {
|
|
DO_NOT_RENDER_ID_PREFIX,
|
|
ensureToolCallsHaveResponses,
|
|
} from "@/lib/ensure-tool-responses";
|
|
import { LangGraphLogoSVG } from "../icons/langgraph";
|
|
import { TooltipIconButton } from "./tooltip-icon-button";
|
|
import {
|
|
ArrowDown,
|
|
LoaderCircle,
|
|
PanelRightOpen,
|
|
SquarePen,
|
|
} from "lucide-react";
|
|
import { BooleanParam, StringParam, useQueryParam } from "use-query-params";
|
|
import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
|
|
import ThreadHistory from "./history";
|
|
import { toast } from "sonner";
|
|
|
|
function StickyToBottomContent(props: {
|
|
content: ReactNode;
|
|
footer?: ReactNode;
|
|
className?: string;
|
|
contentClassName?: string;
|
|
}) {
|
|
const context = useStickToBottomContext();
|
|
return (
|
|
<div
|
|
ref={context.scrollRef}
|
|
style={{ width: "100%", height: "100%" }}
|
|
className={props.className}
|
|
>
|
|
<div ref={context.contentRef} className={props.contentClassName}>
|
|
{props.content}
|
|
</div>
|
|
|
|
{props.footer}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ScrollToBottom(props: { className?: string }) {
|
|
const { isAtBottom, scrollToBottom } = useStickToBottomContext();
|
|
|
|
if (isAtBottom) return null;
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
className={props.className}
|
|
onClick={() => scrollToBottom()}
|
|
>
|
|
<ArrowDown className="w-4 h-4" />
|
|
<span>Scroll to bottom</span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function Thread() {
|
|
const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
|
|
const [_, setChatHistoryOpen] = useQueryParam(
|
|
"chatHistoryOpen",
|
|
BooleanParam,
|
|
);
|
|
const [input, setInput] = useState("");
|
|
const [firstTokenReceived, setFirstTokenReceived] = useState(false);
|
|
|
|
const stream = useStreamContext();
|
|
const messages = stream.messages;
|
|
const isLoading = stream.isLoading;
|
|
|
|
const lastError = useRef<string | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
if (!stream.error) {
|
|
lastError.current = undefined;
|
|
return;
|
|
}
|
|
try {
|
|
const message = (stream.error as any).message;
|
|
if (!message || lastError.current === message) {
|
|
// Message has already been logged. do not modify ref, return early.
|
|
return;
|
|
}
|
|
|
|
// Message is defined, and it has not been logged yet. Save it, and send the error
|
|
lastError.current = message;
|
|
toast.error("An error occurred. Please try again.", {
|
|
description: (
|
|
<p>
|
|
<strong>Error:</strong> <code>{message}</code>
|
|
</p>
|
|
),
|
|
richColors: true,
|
|
closeButton: true,
|
|
});
|
|
} catch {
|
|
// no-op
|
|
}
|
|
}, [stream.error]);
|
|
|
|
// TODO: this should be part of the useStream hook
|
|
const prevMessageLength = useRef(0);
|
|
useEffect(() => {
|
|
if (
|
|
messages.length !== prevMessageLength.current &&
|
|
messages?.length &&
|
|
messages[messages.length - 1].type === "ai"
|
|
) {
|
|
setFirstTokenReceived(true);
|
|
}
|
|
|
|
prevMessageLength.current = messages.length;
|
|
}, [messages]);
|
|
|
|
const handleSubmit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
if (!input.trim() || isLoading) return;
|
|
setFirstTokenReceived(false);
|
|
|
|
const newHumanMessage: Message = {
|
|
id: uuidv4(),
|
|
type: "human",
|
|
content: input,
|
|
};
|
|
|
|
const toolMessages = ensureToolCallsHaveResponses(stream.messages);
|
|
stream.submit(
|
|
{ messages: [...toolMessages, newHumanMessage] },
|
|
{
|
|
streamMode: ["values"],
|
|
optimisticValues: (prev) => ({
|
|
...prev,
|
|
messages: [
|
|
...(prev.messages ?? []),
|
|
...toolMessages,
|
|
newHumanMessage,
|
|
],
|
|
}),
|
|
},
|
|
);
|
|
|
|
setInput("");
|
|
};
|
|
|
|
const handleRegenerate = (
|
|
parentCheckpoint: Checkpoint | null | undefined,
|
|
) => {
|
|
// Do this so the loading state is correct
|
|
prevMessageLength.current = prevMessageLength.current - 1;
|
|
setFirstTokenReceived(false);
|
|
stream.submit(undefined, {
|
|
checkpoint: parentCheckpoint,
|
|
streamMode: ["values"],
|
|
});
|
|
};
|
|
|
|
const chatStarted = !!threadId || !!messages.length;
|
|
|
|
return (
|
|
<div className="flex w-full h-screen overflow-hidden">
|
|
<ThreadHistory />
|
|
<div
|
|
className={cn(
|
|
"flex-1 flex flex-col min-w-0 overflow-hidden",
|
|
!chatStarted && "grid-rows-[1fr]",
|
|
)}
|
|
>
|
|
{chatStarted && (
|
|
<div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
|
|
<div className="flex gap-2 items-center justify-start">
|
|
<button
|
|
className="flex gap-2 items-center cursor-pointer"
|
|
onClick={() => setThreadId(null)}
|
|
>
|
|
<LangGraphLogoSVG width={32} height={32} />
|
|
<span className="text-xl font-semibold tracking-tight">
|
|
LangGraph Chat
|
|
</span>
|
|
</button>
|
|
<Button
|
|
className="flex lg:hidden"
|
|
variant="ghost"
|
|
onClick={() => setChatHistoryOpen((p) => !p)}
|
|
>
|
|
<PanelRightOpen />
|
|
</Button>
|
|
</div>
|
|
|
|
<TooltipIconButton
|
|
size="lg"
|
|
className="p-4"
|
|
tooltip="New thread"
|
|
variant="ghost"
|
|
onClick={() => setThreadId(null)}
|
|
>
|
|
<SquarePen className="size-5" />
|
|
</TooltipIconButton>
|
|
|
|
<div className="absolute inset-x-0 top-full h-5 bg-gradient-to-b from-background to-background/0" />
|
|
</div>
|
|
)}
|
|
|
|
<StickToBottom className="relative flex-1 overflow-hidden">
|
|
<StickyToBottomContent
|
|
className={cn(
|
|
"absolute inset-0 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
|
|
!chatStarted && "flex flex-col items-stretch mt-[25vh]",
|
|
chatStarted && "grid grid-rows-[1fr_auto]",
|
|
)}
|
|
contentClassName="pt-8 pb-16 px-4 max-w-4xl mx-auto flex flex-col gap-4 w-full"
|
|
content={
|
|
<>
|
|
{messages
|
|
.filter((m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX))
|
|
.map((message, index) =>
|
|
message.type === "human" ? (
|
|
<HumanMessage
|
|
key={message.id || `${message.type}-${index}`}
|
|
message={message}
|
|
isLoading={isLoading}
|
|
/>
|
|
) : (
|
|
<AssistantMessage
|
|
key={message.id || `${message.type}-${index}`}
|
|
message={message}
|
|
isLoading={isLoading}
|
|
handleRegenerate={handleRegenerate}
|
|
/>
|
|
),
|
|
)}
|
|
{isLoading && !firstTokenReceived && (
|
|
<AssistantMessageLoading />
|
|
)}
|
|
</>
|
|
}
|
|
footer={
|
|
<div className="sticky flex flex-col items-center gap-8 bottom-8 px-4">
|
|
{!chatStarted && (
|
|
<div className="flex gap-3 items-center">
|
|
<LangGraphLogoSVG className="flex-shrink-0 h-8" />
|
|
<h1 className="text-2xl font-semibold tracking-tight">
|
|
LangGraph Chat
|
|
</h1>
|
|
</div>
|
|
)}
|
|
|
|
<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 w-full max-w-4xl">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"
|
|
>
|
|
<Input
|
|
type="text"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
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"
|
|
/>
|
|
|
|
<div className="flex items-center justify-end p-2 pt-0">
|
|
{stream.isLoading ? (
|
|
<Button key="stop" onClick={() => stream.stop()}>
|
|
<LoaderCircle className="w-4 h-4 animate-spin" />
|
|
Cancel
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="submit"
|
|
disabled={isLoading || !input.trim()}
|
|
>
|
|
Send
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
</StickToBottom>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|