From 06eb8a45c8c315de0ab3758e9f94f6c9cdf20351 Mon Sep 17 00:00:00 2001 From: bracesproul Date: Mon, 3 Mar 2025 13:18:08 -0800 Subject: [PATCH 1/4] fix: Branching issues --- src/components/thread/messages/ai.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/thread/messages/ai.tsx b/src/components/thread/messages/ai.tsx index 079d67d..189f55d 100644 --- a/src/components/thread/messages/ai.tsx +++ b/src/components/thread/messages/ai.tsx @@ -54,7 +54,7 @@ export function AssistantMessage({ const contentString = getContentString(message.content); const handleRegenerate = () => { - thread.submit(undefined, { checkpoint: parentCheckpoint }); + thread.submit(undefined, { checkpoint: parentCheckpoint, streamMode: ["values"] }); }; return ( From 1c2d96de5ae5428261e062e6f3d2ffef9294a2e0 Mon Sep 17 00:00:00 2001 From: bracesproul Date: Mon, 3 Mar 2025 13:24:24 -0800 Subject: [PATCH 2/4] fix: loading statr --- src/components/icons/langgraph.tsx | 4 ++-- src/components/thread/index.tsx | 15 ++++++++++++++- src/components/thread/messages/ai.tsx | 10 ++++------ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/icons/langgraph.tsx b/src/components/icons/langgraph.tsx index c23aaeb..826927b 100644 --- a/src/components/icons/langgraph.tsx +++ b/src/components/icons/langgraph.tsx @@ -8,8 +8,8 @@ export function LangGraphLogoSVG({ width = 20, height = 20 }) { xmlns="http://www.w3.org/2000/svg" > diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx index c71b9f0..0280276 100644 --- a/src/components/thread/index.tsx +++ b/src/components/thread/index.tsx @@ -5,7 +5,7 @@ import { useStreamContext } from "@/providers/Stream"; import { useState, FormEvent } from "react"; import { Input } from "../ui/input"; import { Button } from "../ui/button"; -import { Message } from "@langchain/langgraph-sdk"; +import { Checkpoint, Message } from "@langchain/langgraph-sdk"; import { AssistantMessage, AssistantMessageLoading } from "./messages/ai"; import { HumanMessage } from "./messages/human"; import { @@ -86,6 +86,18 @@ export function Thread() { 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 = isLoading || messages.length > 0; const renderMessages = messages.filter( (m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX), @@ -128,6 +140,7 @@ export function Thread() { key={"id" in message ? message.id : `${message.type}-${index}`} message={message as Message} isLoading={isLoading} + handleRegenerate={handleRegenerate} /> ), )} diff --git a/src/components/thread/messages/ai.tsx b/src/components/thread/messages/ai.tsx index 189f55d..505eaa8 100644 --- a/src/components/thread/messages/ai.tsx +++ b/src/components/thread/messages/ai.tsx @@ -1,5 +1,5 @@ import { useStreamContext } from "@/providers/Stream"; -import { Message } from "@langchain/langgraph-sdk"; +import { Checkpoint, Message } from "@langchain/langgraph-sdk"; import { getContentString } from "../utils"; import { BranchSwitcher, CommandBar } from "./shared"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; @@ -43,9 +43,11 @@ function CustomComponent({ export function AssistantMessage({ message, isLoading, + handleRegenerate, }: { message: Message; isLoading: boolean; + handleRegenerate: (parentCheckpoint: Checkpoint | null | undefined) => void; }) { const thread = useStreamContext(); const meta = thread.getMessagesMetadata(message); @@ -53,10 +55,6 @@ export function AssistantMessage({ const contentString = getContentString(message.content); - const handleRegenerate = () => { - thread.submit(undefined, { checkpoint: parentCheckpoint, streamMode: ["values"] }); - }; - return (
@@ -80,7 +78,7 @@ export function AssistantMessage({ content={contentString} isLoading={isLoading} isAiMessage={true} - handleRegenerate={handleRegenerate} + handleRegenerate={() => handleRegenerate(parentCheckpoint)} />
From 274930803ca4f5426986042002d255b7aa3151a3 Mon Sep 17 00:00:00 2001 From: Tat Dat Duong Date: Tue, 4 Mar 2025 13:45:02 +0100 Subject: [PATCH 3/4] Cleanup --- src/components/thread/index.tsx | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx index 0280276..0b7d2f7 100644 --- a/src/components/thread/index.tsx +++ b/src/components/thread/index.tsx @@ -44,7 +44,7 @@ export function Thread() { const [input, setInput] = useState(""); const [firstTokenReceived, setFirstTokenReceived] = useState(false); const stream = useStreamContext(); - // const messages = [...dummyMessages, ...stream.messages]; + const messages = stream.messages; const isLoading = stream.isLoading; const prevMessageLength = useRef(0); @@ -71,23 +71,17 @@ export function Thread() { content: input, }; + const toolMessages = ensureToolCallsHaveResponses(stream.messages); stream.submit( - { - messages: [ - ...ensureToolCallsHaveResponses(stream.messages), - newHumanMessage, - ], - }, - { - streamMode: ["values"], - }, + { messages: [...toolMessages, newHumanMessage] }, + { streamMode: ["values"] } ); setInput(""); }; const handleRegenerate = ( - parentCheckpoint: Checkpoint | null | undefined, + parentCheckpoint: Checkpoint | null | undefined ) => { // Do this so the loading state is correct prevMessageLength.current = prevMessageLength.current - 1; @@ -100,14 +94,14 @@ export function Thread() { const chatStarted = isLoading || messages.length > 0; const renderMessages = messages.filter( - (m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX), + (m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX) ); return (
@@ -125,24 +119,24 @@ export function Thread() {
{renderMessages.map((message, index) => message.type === "human" ? ( ) : ( - ), + ) )} {isLoading && !firstTokenReceived && }
@@ -151,7 +145,7 @@ export function Thread() {
+