Initial pass on artifacts (#127)
This commit is contained in:
David Duong
@@ -21,7 +21,7 @@
|
||||
"dependencies": {
|
||||
"@langchain/core": "^0.3.44",
|
||||
"@langchain/langgraph": "^0.2.63",
|
||||
"@langchain/langgraph-sdk": "^0.0.66",
|
||||
"@langchain/langgraph-sdk": "^0.0.73",
|
||||
"@radix-ui/react-avatar": "^1.1.3",
|
||||
"@radix-ui/react-dialog": "^1.1.6",
|
||||
"@radix-ui/react-label": "^2.1.2",
|
||||
|
||||
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@@ -15,8 +15,8 @@ importers:
|
||||
specifier: ^0.2.63
|
||||
version: 0.2.63(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))(react@19.0.0)(zod-to-json-schema@3.24.3(zod@3.24.2))
|
||||
'@langchain/langgraph-sdk':
|
||||
specifier: ^0.0.66
|
||||
version: 0.0.66(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))(react@19.0.0)
|
||||
specifier: ^0.0.73
|
||||
version: 0.0.73(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))(react@19.0.0)
|
||||
'@radix-ui/react-avatar':
|
||||
specifier: ^1.1.3
|
||||
version: 1.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
@@ -545,8 +545,8 @@ packages:
|
||||
peerDependencies:
|
||||
'@langchain/core': '>=0.2.31 <0.4.0'
|
||||
|
||||
'@langchain/langgraph-sdk@0.0.66':
|
||||
resolution: {integrity: sha512-l0V4yfKXhHaTRK/1bKMfZ14k3wWZu27DWTlCUnbYJvdo7os5srhONgPCOqQgpazhi5EhXbW2EVgeu/wLW2zH6Q==}
|
||||
'@langchain/langgraph-sdk@0.0.73':
|
||||
resolution: {integrity: sha512-V3E7Bd1KNcTpnEglZqKpnQtth62WHf+Dxq5V+0CqMxbzPHnW9I4eynCO4c1/HSY/rHgEtvgj7fMvCAb6I5R+lQ==}
|
||||
peerDependencies:
|
||||
'@langchain/core': '>=0.2.31 <0.4.0'
|
||||
react: ^18 || ^19
|
||||
@@ -2595,6 +2595,7 @@ packages:
|
||||
node-domexception@1.0.0:
|
||||
resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
|
||||
engines: {node: '>=10.5.0'}
|
||||
deprecated: Use your platform's native DOMException instead
|
||||
|
||||
node-fetch@2.7.0:
|
||||
resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
|
||||
@@ -3699,7 +3700,7 @@ snapshots:
|
||||
'@langchain/core': 0.3.44(openai@4.85.4(zod@3.24.2))
|
||||
uuid: 10.0.0
|
||||
|
||||
'@langchain/langgraph-sdk@0.0.66(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))(react@19.0.0)':
|
||||
'@langchain/langgraph-sdk@0.0.73(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))(react@19.0.0)':
|
||||
dependencies:
|
||||
'@types/json-schema': 7.0.15
|
||||
p-queue: 6.6.2
|
||||
@@ -3713,7 +3714,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@langchain/core': 0.3.44(openai@4.85.4(zod@3.24.2))
|
||||
'@langchain/langgraph-checkpoint': 0.0.16(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))
|
||||
'@langchain/langgraph-sdk': 0.0.66(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))(react@19.0.0)
|
||||
'@langchain/langgraph-sdk': 0.0.73(@langchain/core@0.3.44(openai@4.85.4(zod@3.24.2)))(react@19.0.0)
|
||||
uuid: 10.0.0
|
||||
zod: 3.24.2
|
||||
optionalDependencies:
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { Thread } from "@/components/thread";
|
||||
import { StreamProvider } from "@/providers/Stream";
|
||||
import { ThreadProvider } from "@/providers/Thread";
|
||||
import { ArtifactProvider } from "@/components/thread/artifact";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import React from "react";
|
||||
|
||||
@@ -12,7 +13,9 @@ export default function DemoPage(): React.ReactNode {
|
||||
<Toaster />
|
||||
<ThreadProvider>
|
||||
<StreamProvider>
|
||||
<Thread />
|
||||
<ArtifactProvider>
|
||||
<Thread />
|
||||
</ArtifactProvider>
|
||||
</StreamProvider>
|
||||
</ThreadProvider>
|
||||
</React.Suspense>
|
||||
|
||||
167
src/components/thread/artifact.tsx
Normal file
167
src/components/thread/artifact.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import {
|
||||
HTMLAttributes,
|
||||
ReactNode,
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useId,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
type Setter<T> = (value: T | ((value: T) => T)) => void;
|
||||
|
||||
const ArtifactSlotContext = createContext<{
|
||||
open: [string | null, Setter<string | null>];
|
||||
mounted: [string | null, Setter<string | null>];
|
||||
|
||||
title: [HTMLElement | null, Setter<HTMLElement | null>];
|
||||
content: [HTMLElement | null, Setter<HTMLElement | null>];
|
||||
|
||||
context: [Record<string, unknown>, Setter<Record<string, unknown>>];
|
||||
}>(null!);
|
||||
|
||||
const ArtifactFill = (props: {
|
||||
id: string;
|
||||
children?: ReactNode;
|
||||
title?: ReactNode;
|
||||
}) => {
|
||||
const context = useContext(ArtifactSlotContext);
|
||||
|
||||
const [ctxMounted, ctxSetMounted] = context.mounted;
|
||||
const [content] = context.content;
|
||||
const [title] = context.title;
|
||||
|
||||
const isMounted = ctxMounted === props.id;
|
||||
const isEmpty = props.children == null && props.title == null;
|
||||
|
||||
useEffect(() => {
|
||||
if (isEmpty) {
|
||||
ctxSetMounted((open) => (open === props.id ? null : open));
|
||||
}
|
||||
}, [isEmpty, ctxSetMounted, props.id]);
|
||||
|
||||
if (!isMounted) return null;
|
||||
return (
|
||||
<>
|
||||
{title != null ? createPortal(<>{props.title}</>, title) : null}
|
||||
{content != null ? createPortal(<>{props.children}</>, content) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function ArtifactContent(props: HTMLAttributes<HTMLDivElement>) {
|
||||
const context = useContext(ArtifactSlotContext);
|
||||
|
||||
const [mounted] = context.mounted;
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [, setStateRef] = context.content;
|
||||
|
||||
useLayoutEffect(
|
||||
() => setStateRef?.(mounted ? ref.current : null),
|
||||
[setStateRef, mounted],
|
||||
);
|
||||
|
||||
if (!mounted) return null;
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArtifactTitle(props: HTMLAttributes<HTMLDivElement>) {
|
||||
const context = useContext(ArtifactSlotContext);
|
||||
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [, setStateRef] = context.title;
|
||||
|
||||
useLayoutEffect(() => setStateRef?.(ref.current), [setStateRef]);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArtifactProvider(props: { children?: ReactNode }) {
|
||||
const content = useState<HTMLElement | null>(null);
|
||||
const title = useState<HTMLElement | null>(null);
|
||||
|
||||
const open = useState<string | null>(null);
|
||||
const mounted = useState<string | null>(null);
|
||||
const context = useState<Record<string, unknown>>({});
|
||||
|
||||
return (
|
||||
<ArtifactSlotContext.Provider
|
||||
value={{ open, mounted, title, content, context }}
|
||||
>
|
||||
{props.children}
|
||||
</ArtifactSlotContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useArtifact() {
|
||||
const id = useId();
|
||||
const context = useContext(ArtifactSlotContext);
|
||||
const [ctxOpen, ctxSetOpen] = context.open;
|
||||
const [ctxContext, ctxSetContext] = context.context;
|
||||
const [, ctxSetMounted] = context.mounted;
|
||||
|
||||
const open = ctxOpen === id;
|
||||
const setOpen = useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
if (typeof value === "boolean") {
|
||||
ctxSetOpen(value ? id : null);
|
||||
} else {
|
||||
ctxSetOpen((open) => (open === id ? null : id));
|
||||
}
|
||||
|
||||
ctxSetMounted(id);
|
||||
},
|
||||
[ctxSetOpen, ctxSetMounted, id],
|
||||
);
|
||||
|
||||
const ArtifactContent = useCallback(
|
||||
(props: { title?: React.ReactNode; children: React.ReactNode }) => {
|
||||
return (
|
||||
<ArtifactFill
|
||||
id={id}
|
||||
title={props.title}
|
||||
>
|
||||
{props.children}
|
||||
</ArtifactFill>
|
||||
);
|
||||
},
|
||||
[id],
|
||||
);
|
||||
|
||||
return {
|
||||
open,
|
||||
setOpen,
|
||||
context: ctxContext,
|
||||
setContext: ctxSetContext,
|
||||
content: ArtifactContent,
|
||||
};
|
||||
}
|
||||
|
||||
export function useArtifactOpen() {
|
||||
const context = useContext(ArtifactSlotContext);
|
||||
const [ctxOpen, setCtxOpen] = context.open;
|
||||
|
||||
const open = ctxOpen !== null;
|
||||
const onClose = useCallback(() => setCtxOpen(null), [setCtxOpen]);
|
||||
|
||||
return [open, onClose] as const;
|
||||
}
|
||||
|
||||
export function useArtifactContext() {
|
||||
const context = useContext(ArtifactSlotContext);
|
||||
return context.context;
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
PanelRightOpen,
|
||||
PanelRightClose,
|
||||
SquarePen,
|
||||
XIcon,
|
||||
} from "lucide-react";
|
||||
import { useQueryState, parseAsBoolean } from "nuqs";
|
||||
import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
|
||||
@@ -35,6 +36,12 @@ import {
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "../ui/tooltip";
|
||||
import {
|
||||
useArtifactOpen,
|
||||
ArtifactContent,
|
||||
ArtifactTitle,
|
||||
useArtifactContext,
|
||||
} from "./artifact";
|
||||
|
||||
function StickyToBottomContent(props: {
|
||||
content: ReactNode;
|
||||
@@ -102,7 +109,10 @@ function OpenGitHubRepo() {
|
||||
}
|
||||
|
||||
export function Thread() {
|
||||
const [threadId, setThreadId] = useQueryState("threadId");
|
||||
const [artifactContext, setArtifactContext] = useArtifactContext();
|
||||
const [artifactOpen, closeArtifact] = useArtifactOpen();
|
||||
|
||||
const [threadId, _setThreadId] = useQueryState("threadId");
|
||||
const [chatHistoryOpen, setChatHistoryOpen] = useQueryState(
|
||||
"chatHistoryOpen",
|
||||
parseAsBoolean.withDefault(false),
|
||||
@@ -121,6 +131,14 @@ export function Thread() {
|
||||
|
||||
const lastError = useRef<string | undefined>(undefined);
|
||||
|
||||
const setThreadId = (id: string | null) => {
|
||||
_setThreadId(id);
|
||||
|
||||
// close artifact and reset artifact context
|
||||
closeArtifact();
|
||||
setArtifactContext({});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!stream.error) {
|
||||
lastError.current = undefined;
|
||||
@@ -175,12 +193,17 @@ export function Thread() {
|
||||
};
|
||||
|
||||
const toolMessages = ensureToolCallsHaveResponses(stream.messages);
|
||||
|
||||
const context =
|
||||
Object.keys(artifactContext).length > 0 ? artifactContext : undefined;
|
||||
|
||||
stream.submit(
|
||||
{ messages: [...toolMessages, newHumanMessage] },
|
||||
{ messages: [...toolMessages, newHumanMessage], context },
|
||||
{
|
||||
streamMode: ["values"],
|
||||
optimisticValues: (prev) => ({
|
||||
...prev,
|
||||
context,
|
||||
messages: [
|
||||
...(prev.messages ?? []),
|
||||
...toolMessages,
|
||||
@@ -236,52 +259,36 @@ export function Thread() {
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.div
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex min-w-0 flex-1 flex-col overflow-hidden",
|
||||
!chatStarted && "grid-rows-[1fr]",
|
||||
"grid w-full grid-cols-[1fr_0fr] transition-all duration-500",
|
||||
artifactOpen && "grid-cols-[3fr_2fr]",
|
||||
)}
|
||||
layout={isLargeScreen}
|
||||
animate={{
|
||||
marginLeft: chatHistoryOpen ? (isLargeScreen ? 300 : 0) : 0,
|
||||
width: chatHistoryOpen
|
||||
? isLargeScreen
|
||||
? "calc(100% - 300px)"
|
||||
: "100%"
|
||||
: "100%",
|
||||
}}
|
||||
transition={
|
||||
isLargeScreen
|
||||
? { type: "spring", stiffness: 300, damping: 30 }
|
||||
: { duration: 0 }
|
||||
}
|
||||
>
|
||||
{!chatStarted && (
|
||||
<div className="absolute top-0 left-0 z-10 flex w-full items-center justify-between gap-3 p-2 pl-4">
|
||||
<div>
|
||||
{(!chatHistoryOpen || !isLargeScreen) && (
|
||||
<Button
|
||||
className="hover:bg-gray-100"
|
||||
variant="ghost"
|
||||
onClick={() => setChatHistoryOpen((p) => !p)}
|
||||
>
|
||||
{chatHistoryOpen ? (
|
||||
<PanelRightOpen className="size-5" />
|
||||
) : (
|
||||
<PanelRightClose className="size-5" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute top-2 right-4 flex items-center">
|
||||
<OpenGitHubRepo />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{chatStarted && (
|
||||
<div className="relative z-10 flex items-center justify-between gap-3 p-2">
|
||||
<div className="relative flex items-center justify-start gap-2">
|
||||
<div className="absolute left-0 z-10">
|
||||
<motion.div
|
||||
className={cn(
|
||||
"relative flex min-w-0 flex-1 flex-col overflow-hidden",
|
||||
!chatStarted && "grid-rows-[1fr]",
|
||||
)}
|
||||
layout={isLargeScreen}
|
||||
animate={{
|
||||
marginLeft: chatHistoryOpen ? (isLargeScreen ? 300 : 0) : 0,
|
||||
width: chatHistoryOpen
|
||||
? isLargeScreen
|
||||
? "calc(100% - 300px)"
|
||||
: "100%"
|
||||
: "100%",
|
||||
}}
|
||||
transition={
|
||||
isLargeScreen
|
||||
? { type: "spring", stiffness: 300, damping: 30 }
|
||||
: { duration: 0 }
|
||||
}
|
||||
>
|
||||
{!chatStarted && (
|
||||
<div className="absolute top-0 left-0 z-10 flex w-full items-center justify-between gap-3 p-2 pl-4">
|
||||
<div>
|
||||
{(!chatHistoryOpen || !isLargeScreen) && (
|
||||
<Button
|
||||
className="hover:bg-gray-100"
|
||||
@@ -296,169 +303,207 @@ export function Thread() {
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<motion.button
|
||||
className="flex cursor-pointer items-center gap-2"
|
||||
onClick={() => setThreadId(null)}
|
||||
animate={{
|
||||
marginLeft: !chatHistoryOpen ? 48 : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
}}
|
||||
>
|
||||
<LangGraphLogoSVG
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<span className="text-xl font-semibold tracking-tight">
|
||||
Agent Chat
|
||||
</span>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center">
|
||||
<div className="absolute top-2 right-4 flex items-center">
|
||||
<OpenGitHubRepo />
|
||||
</div>
|
||||
<TooltipIconButton
|
||||
size="lg"
|
||||
className="p-4"
|
||||
tooltip="New thread"
|
||||
variant="ghost"
|
||||
onClick={() => setThreadId(null)}
|
||||
>
|
||||
<SquarePen className="size-5" />
|
||||
</TooltipIconButton>
|
||||
</div>
|
||||
|
||||
<div className="from-background to-background/0 absolute inset-x-0 top-full h-5 bg-gradient-to-b" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<StickToBottom className="relative flex-1 overflow-hidden">
|
||||
<StickyToBottomContent
|
||||
className={cn(
|
||||
"absolute inset-0 overflow-y-scroll px-4 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
|
||||
!chatStarted && "mt-[25vh] flex flex-col items-stretch",
|
||||
chatStarted && "grid grid-rows-[1fr_auto]",
|
||||
)}
|
||||
contentClassName="pt-8 pb-16 max-w-3xl 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}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
{/* Special rendering case where there are no AI/tool messages, but there is an interrupt.
|
||||
We need to render it outside of the messages list, since there are no messages to render */}
|
||||
{hasNoAIOrToolMessages && !!stream.interrupt && (
|
||||
<AssistantMessage
|
||||
key="interrupt-msg"
|
||||
message={undefined}
|
||||
isLoading={isLoading}
|
||||
handleRegenerate={handleRegenerate}
|
||||
/>
|
||||
)}
|
||||
{isLoading && !firstTokenReceived && (
|
||||
<AssistantMessageLoading />
|
||||
)}
|
||||
</>
|
||||
}
|
||||
footer={
|
||||
<div className="sticky bottom-0 flex flex-col items-center gap-8 bg-white">
|
||||
{!chatStarted && (
|
||||
<div className="flex items-center gap-3">
|
||||
<LangGraphLogoSVG className="h-8 flex-shrink-0" />
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Agent Chat
|
||||
</h1>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ScrollToBottom className="animate-in fade-in-0 zoom-in-95 absolute bottom-full left-1/2 mb-4 -translate-x-1/2" />
|
||||
|
||||
<div className="bg-muted relative z-10 mx-auto mb-8 w-full max-w-3xl rounded-2xl border shadow-xs">
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2"
|
||||
>
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (
|
||||
e.key === "Enter" &&
|
||||
!e.shiftKey &&
|
||||
!e.metaKey &&
|
||||
!e.nativeEvent.isComposing
|
||||
) {
|
||||
e.preventDefault();
|
||||
const el = e.target as HTMLElement | undefined;
|
||||
const form = el?.closest("form");
|
||||
form?.requestSubmit();
|
||||
}
|
||||
}}
|
||||
placeholder="Type your message..."
|
||||
className="field-sizing-content resize-none border-none bg-transparent p-3.5 pb-0 shadow-none ring-0 outline-none focus:ring-0 focus:outline-none"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between p-2 pt-4">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="render-tool-calls"
|
||||
checked={hideToolCalls ?? false}
|
||||
onCheckedChange={setHideToolCalls}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="render-tool-calls"
|
||||
className="text-sm text-gray-600"
|
||||
>
|
||||
Hide Tool Calls
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
{stream.isLoading ? (
|
||||
<Button
|
||||
key="stop"
|
||||
onClick={() => stream.stop()}
|
||||
>
|
||||
<LoaderCircle className="h-4 w-4 animate-spin" />
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
{chatStarted && (
|
||||
<div className="relative z-10 flex items-center justify-between gap-3 p-2">
|
||||
<div className="relative flex items-center justify-start gap-2">
|
||||
<div className="absolute left-0 z-10">
|
||||
{(!chatHistoryOpen || !isLargeScreen) && (
|
||||
<Button
|
||||
className="hover:bg-gray-100"
|
||||
variant="ghost"
|
||||
onClick={() => setChatHistoryOpen((p) => !p)}
|
||||
>
|
||||
{chatHistoryOpen ? (
|
||||
<PanelRightOpen className="size-5" />
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
className="shadow-md transition-all"
|
||||
disabled={isLoading || !input.trim()}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
<PanelRightClose className="size-5" />
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<motion.button
|
||||
className="flex cursor-pointer items-center gap-2"
|
||||
onClick={() => setThreadId(null)}
|
||||
animate={{
|
||||
marginLeft: !chatHistoryOpen ? 48 : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
}}
|
||||
>
|
||||
<LangGraphLogoSVG
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<span className="text-xl font-semibold tracking-tight">
|
||||
Agent Chat
|
||||
</span>
|
||||
</motion.button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</StickToBottom>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center">
|
||||
<OpenGitHubRepo />
|
||||
</div>
|
||||
<TooltipIconButton
|
||||
size="lg"
|
||||
className="p-4"
|
||||
tooltip="New thread"
|
||||
variant="ghost"
|
||||
onClick={() => setThreadId(null)}
|
||||
>
|
||||
<SquarePen className="size-5" />
|
||||
</TooltipIconButton>
|
||||
</div>
|
||||
|
||||
<div className="from-background to-background/0 absolute inset-x-0 top-full h-5 bg-gradient-to-b" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<StickToBottom className="relative flex-1 overflow-hidden">
|
||||
<StickyToBottomContent
|
||||
className={cn(
|
||||
"absolute inset-0 overflow-y-scroll px-4 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
|
||||
!chatStarted && "mt-[25vh] flex flex-col items-stretch",
|
||||
chatStarted && "grid grid-rows-[1fr_auto]",
|
||||
)}
|
||||
contentClassName="pt-8 pb-16 max-w-3xl 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}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
{/* Special rendering case where there are no AI/tool messages, but there is an interrupt.
|
||||
We need to render it outside of the messages list, since there are no messages to render */}
|
||||
{hasNoAIOrToolMessages && !!stream.interrupt && (
|
||||
<AssistantMessage
|
||||
key="interrupt-msg"
|
||||
message={undefined}
|
||||
isLoading={isLoading}
|
||||
handleRegenerate={handleRegenerate}
|
||||
/>
|
||||
)}
|
||||
{isLoading && !firstTokenReceived && (
|
||||
<AssistantMessageLoading />
|
||||
)}
|
||||
</>
|
||||
}
|
||||
footer={
|
||||
<div className="sticky bottom-0 flex flex-col items-center gap-8 bg-white">
|
||||
{!chatStarted && (
|
||||
<div className="flex items-center gap-3">
|
||||
<LangGraphLogoSVG className="h-8 flex-shrink-0" />
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Agent Chat
|
||||
</h1>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ScrollToBottom className="animate-in fade-in-0 zoom-in-95 absolute bottom-full left-1/2 mb-4 -translate-x-1/2" />
|
||||
|
||||
<div className="bg-muted relative z-10 mx-auto mb-8 w-full max-w-3xl rounded-2xl border shadow-xs">
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2"
|
||||
>
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (
|
||||
e.key === "Enter" &&
|
||||
!e.shiftKey &&
|
||||
!e.metaKey &&
|
||||
!e.nativeEvent.isComposing
|
||||
) {
|
||||
e.preventDefault();
|
||||
const el = e.target as HTMLElement | undefined;
|
||||
const form = el?.closest("form");
|
||||
form?.requestSubmit();
|
||||
}
|
||||
}}
|
||||
placeholder="Type your message..."
|
||||
className="field-sizing-content resize-none border-none bg-transparent p-3.5 pb-0 shadow-none ring-0 outline-none focus:ring-0 focus:outline-none"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between p-2 pt-4">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="render-tool-calls"
|
||||
checked={hideToolCalls ?? false}
|
||||
onCheckedChange={setHideToolCalls}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="render-tool-calls"
|
||||
className="text-sm text-gray-600"
|
||||
>
|
||||
Hide Tool Calls
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
{stream.isLoading ? (
|
||||
<Button
|
||||
key="stop"
|
||||
onClick={() => stream.stop()}
|
||||
>
|
||||
<LoaderCircle className="h-4 w-4 animate-spin" />
|
||||
Cancel
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
className="shadow-md transition-all"
|
||||
disabled={isLoading || !input.trim()}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</StickToBottom>
|
||||
</motion.div>
|
||||
<div className="relative flex flex-col border-l">
|
||||
<div className="absolute inset-0 flex min-w-[30vw] flex-col">
|
||||
<div className="grid grid-cols-[1fr_auto] border-b p-4">
|
||||
<ArtifactTitle className="truncate overflow-hidden" />
|
||||
<button
|
||||
onClick={closeArtifact}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<XIcon className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<ArtifactContent className="relative flex-grow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ import { isAgentInboxInterruptSchema } from "@/lib/agent-inbox-interrupt";
|
||||
import { ThreadView } from "../agent-inbox";
|
||||
import { useQueryState, parseAsBoolean } from "nuqs";
|
||||
import { GenericInterruptView } from "./generic-interrupt";
|
||||
import { useArtifact } from "../artifact";
|
||||
|
||||
function CustomComponent({
|
||||
message,
|
||||
@@ -21,6 +22,7 @@ function CustomComponent({
|
||||
message: Message;
|
||||
thread: ReturnType<typeof useStreamContext>;
|
||||
}) {
|
||||
const artifact = useArtifact();
|
||||
const { values } = useStreamContext();
|
||||
const customComponents = values.ui?.filter(
|
||||
(ui) => ui.metadata?.message_id === message.id,
|
||||
@@ -34,7 +36,7 @@ function CustomComponent({
|
||||
key={customComponent.id}
|
||||
stream={thread}
|
||||
message={customComponent}
|
||||
meta={{ ui: customComponent }}
|
||||
meta={{ ui: customComponent, artifact }}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
|
||||
@@ -9,6 +9,8 @@ import { useStream } from "@langchain/langgraph-sdk/react";
|
||||
import { type Message } from "@langchain/langgraph-sdk";
|
||||
import {
|
||||
uiMessageReducer,
|
||||
isUIMessage,
|
||||
isRemoveUIMessage,
|
||||
type UIMessage,
|
||||
type RemoveUIMessage,
|
||||
} from "@langchain/langgraph-sdk/react-ui";
|
||||
@@ -31,6 +33,7 @@ const useTypedStream = useStream<
|
||||
UpdateType: {
|
||||
messages?: Message[] | Message | string;
|
||||
ui?: (UIMessage | RemoveUIMessage)[] | UIMessage | RemoveUIMessage;
|
||||
context?: Record<string, unknown>;
|
||||
};
|
||||
CustomEventType: UIMessage | RemoveUIMessage;
|
||||
}
|
||||
@@ -82,10 +85,12 @@ const StreamSession = ({
|
||||
assistantId,
|
||||
threadId: threadId ?? null,
|
||||
onCustomEvent: (event, options) => {
|
||||
options.mutate((prev) => {
|
||||
const ui = uiMessageReducer(prev.ui ?? [], event);
|
||||
return { ...prev, ui };
|
||||
});
|
||||
if (isUIMessage(event) || isRemoveUIMessage(event)) {
|
||||
options.mutate((prev) => {
|
||||
const ui = uiMessageReducer(prev.ui ?? [], event);
|
||||
return { ...prev, ui };
|
||||
});
|
||||
}
|
||||
},
|
||||
onThreadId: (id) => {
|
||||
setThreadId(id);
|
||||
|
||||
Reference in New Issue
Block a user