├── .codespellignore
├── .dockerignore
├── .prettierignore
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── api
    │   │   └── [..._path]
    │   │   │   └── route.ts
    │   ├── layout.tsx
    │   ├── page.tsx
    │   └── globals.css
    ├── lib
    │   ├── utils.ts
    │   ├── api-key.tsx
    │   ├── ensure-tool-responses.ts
    │   ├── agent-inbox-interrupt.ts
    │   └── multimodal-utils.ts
    ├── providers
    │   ├── client.ts
    │   ├── Thread.tsx
    │   └── Stream.tsx
    ├── components
    │   ├── ui
    │   │   ├── skeleton.tsx
    │   │   ├── label.tsx
    │   │   ├── separator.tsx
    │   │   ├── textarea.tsx
    │   │   ├── input.tsx
    │   │   ├── sonner.tsx
    │   │   ├── switch.tsx
    │   │   ├── avatar.tsx
    │   │   ├── password-input.tsx
    │   │   ├── card.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── button.tsx
    │   │   └── sheet.tsx
    │   ├── thread
    │   │   ├── utils.ts
    │   │   ├── markdown-styles.css
    │   │   ├── ContentBlocksPreview.tsx
    │   │   ├── tooltip-icon-button.tsx
    │   │   ├── syntax-highlighter.tsx
    │   │   ├── agent-inbox
    │   │   │   ├── components
    │   │   │   │   ├── tool-call-table.tsx
    │   │   │   │   ├── thread-id.tsx
    │   │   │   │   ├── state-view.tsx
    │   │   │   │   ├── thread-actions-view.tsx
    │   │   │   │   └── inbox-item-input.tsx
    │   │   │   ├── types.ts
    │   │   │   ├── index.tsx
    │   │   │   ├── utils.ts
    │   │   │   └── hooks
    │   │   │   │   └── use-interrupted-actions.tsx
    │   │   ├── MultimodalPreview.tsx
    │   │   ├── messages
    │   │   │   ├── human.tsx
    │   │   │   ├── generic-interrupt.tsx
    │   │   │   ├── shared.tsx
    │   │   │   ├── tool-calls.tsx
    │   │   │   └── ai.tsx
    │   │   ├── history
    │   │   │   └── index.tsx
    │   │   ├── artifact.tsx
    │   │   └── markdown-text.tsx
    │   └── icons
    │   │   ├── github.tsx
    │   │   └── langgraph.tsx
    └── hooks
    │   ├── useMediaQuery.tsx
    │   └── use-file-upload.tsx
├── postcss.config.mjs
├── next.config.mjs
├── prettier.config.js
├── .gitignore
├── components.json
├── .env.example
├── tsconfig.json
├── eslint.config.js
├── LICENSE
├── .github
    └── workflows
    │   └── ci.yml
├── tailwind.config.js
├── package.json
├── public
    └── logo.svg
└── README.md


/.codespellignore:
--------------------------------------------------------------------------------
1 | productionize


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | .git
4 | .env


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Ignore artifacts:
2 | build
3 | coverage
4 | 
5 | #
6 | pnpm-lock.yaml
7 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/langchain-ai/agent-chat-ui/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     "@tailwindcss/postcss": {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/src/providers/client.ts:
--------------------------------------------------------------------------------
1 | import { Client } from "@langchain/langgraph-sdk";
2 | 
3 | export function createClient(apiUrl: string, apiKey: string | undefined) {
4 |   return new Client({
5 |     apiKey,
6 |     apiUrl,
7 |   });
8 | }
9 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   experimental: {
 4 |     serverActions: {
 5 |       bodySizeLimit: "10mb",
 6 |     },
 7 |   },
 8 | };
 9 | 
10 | export default nextConfig;
11 | 


--------------------------------------------------------------------------------
/src/lib/api-key.tsx:
--------------------------------------------------------------------------------
 1 | export function getApiKey(): string | null {
 2 |   try {
 3 |     if (typeof window === "undefined") return null;
 4 |     return window.localStorage.getItem("lg:chat:apiKey") ?? null;
 5 |   } catch {
 6 |     // no-op
 7 |   }
 8 | 
 9 |   return null;
10 | }
11 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @see https://prettier.io/docs/configuration
 3 |  * @type {import("prettier").Config}
 4 |  */
 5 | const config = {
 6 |   endOfLine: "auto",
 7 |   singleAttributePerLine: true,
 8 |   plugins: ["prettier-plugin-tailwindcss"],
 9 | };
10 | 
11 | export default config;
12 | 


--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 4 |   return (
 5 |     <div
 6 |       data-slot="skeleton"
 7 |       className={cn("bg-primary/10 animate-pulse rounded-md", className)}
 8 |       {...props}
 9 |     />
10 |   );
11 | }
12 | 
13 | export { Skeleton };
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | # LangGraph API
27 | .langgraph_api
28 | .env
29 | .next/
30 | next-env.d.ts
31 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }
22 | 


--------------------------------------------------------------------------------
/src/hooks/useMediaQuery.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export function useMediaQuery(query: string) {
 4 |   const [matches, setMatches] = useState(false);
 5 | 
 6 |   useEffect(() => {
 7 |     const media = window.matchMedia(query);
 8 |     setMatches(media.matches);
 9 | 
10 |     const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
11 |     media.addEventListener("change", listener);
12 |     return () => media.removeEventListener("change", listener);
13 |   }, [query]);
14 | 
15 |   return matches;
16 | }
17 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | # LangGraph Configuration
 2 | NEXT_PUBLIC_API_URL=http://localhost:2024
 3 | NEXT_PUBLIC_ASSISTANT_ID=agent
 4 | # Do NOT prefix this with "NEXT_PUBLIC_" as we do not want this exposed in the client.
 5 | LANGSMITH_API_KEY=
 6 | 
 7 | # Production LangGraph Configuration (quickstart) - Uncomment to use
 8 | # NEXT_PUBLIC_ASSISTANT_ID="agent"
 9 | # This should be the deployment URL of your LangGraph server
10 | # LANGGRAPH_API_URL="https://my-agent.default.us.langgraph.app"
11 | # This should be the URL of your website + "/api". This is how you connect to the API proxy
12 | # NEXT_PUBLIC_API_URL="https://my-website.com/api"
13 | # LANGSMITH_API_KEY="lsv2_..."
14 | 


--------------------------------------------------------------------------------
/src/components/thread/utils.ts:
--------------------------------------------------------------------------------
 1 | import type { Message } from "@langchain/langgraph-sdk";
 2 | 
 3 | /**
 4 |  * Extracts a string summary from a message's content, supporting multimodal (text, image, file, etc.).
 5 |  * - If text is present, returns the joined text.
 6 |  * - If not, returns a label for the first non-text modality (e.g., 'Image', 'Other').
 7 |  * - If unknown, returns 'Multimodal message'.
 8 |  */
 9 | export function getContentString(content: Message["content"]): string {
10 |   if (typeof content === "string") return content;
11 |   const texts = content
12 |     .filter((c): c is { type: "text"; text: string } => c.type === "text")
13 |     .map((c) => c.text);
14 |   return texts.join(" ");
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as LabelPrimitive from "@radix-ui/react-label";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Label({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
10 |   return (
11 |     <LabelPrimitive.Root
12 |       data-slot="label"
13 |       className={cn(
14 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
15 |         className,
16 |       )}
17 |       {...props}
18 |     />
19 |   );
20 | }
21 | 
22 | export { Label };
23 | 


--------------------------------------------------------------------------------
/src/app/api/[..._path]/route.ts:
--------------------------------------------------------------------------------
 1 | import { initApiPassthrough } from "langgraph-nextjs-api-passthrough";
 2 | 
 3 | // This file acts as a proxy for requests to your LangGraph server.
 4 | // Read the [Going to Production](https://github.com/langchain-ai/agent-chat-ui?tab=readme-ov-file#going-to-production) section for more information.
 5 | 
 6 | export const { GET, POST, PUT, PATCH, DELETE, OPTIONS, runtime } =
 7 |   initApiPassthrough({
 8 |     apiUrl: process.env.LANGGRAPH_API_URL ?? "remove-me", // default, if not defined it will attempt to read process.env.LANGGRAPH_API_URL
 9 |     apiKey: process.env.LANGSMITH_API_KEY ?? "remove-me", // default, if not defined it will attempt to read process.env.LANGSMITH_API_KEY
10 |     runtime: "edge", // default
11 |   });
12 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import "./globals.css";
 3 | import { Inter } from "next/font/google";
 4 | import React from "react";
 5 | import { NuqsAdapter } from "nuqs/adapters/next/app";
 6 | 
 7 | const inter = Inter({
 8 |   subsets: ["latin"],
 9 |   preload: true,
10 |   display: "swap",
11 | });
12 | 
13 | export const metadata: Metadata = {
14 |   title: "Agent Chat",
15 |   description: "Agent Chat UX by LangChain",
16 | };
17 | 
18 | export default function RootLayout({
19 |   children,
20 | }: Readonly<{
21 |   children: React.ReactNode;
22 | }>) {
23 |   return (
24 |     <html lang="en">
25 |       <body className={inter.className}>
26 |         <NuqsAdapter>{children}</NuqsAdapter>
27 |       </body>
28 |     </html>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Thread } from "@/components/thread";
 4 | import { StreamProvider } from "@/providers/Stream";
 5 | import { ThreadProvider } from "@/providers/Thread";
 6 | import { ArtifactProvider } from "@/components/thread/artifact";
 7 | import { Toaster } from "@/components/ui/sonner";
 8 | import React from "react";
 9 | 
10 | export default function DemoPage(): React.ReactNode {
11 |   return (
12 |     <React.Suspense fallback={<div>Loading (layout)...</div>}>
13 |       <Toaster />
14 |       <ThreadProvider>
15 |         <StreamProvider>
16 |           <ArtifactProvider>
17 |             <Thread />
18 |           </ArtifactProvider>
19 |         </StreamProvider>
20 |       </ThreadProvider>
21 |     </React.Suspense>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Separator({
 7 |   className,
 8 |   orientation = "horizontal",
 9 |   decorative = true,
10 |   ...props
11 | }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
12 |   return (
13 |     <SeparatorPrimitive.Root
14 |       data-slot="separator-root"
15 |       decorative={decorative}
16 |       orientation={orientation}
17 |       className={cn(
18 |         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
19 |         className,
20 |       )}
21 |       {...props}
22 |     />
23 |   );
24 | }
25 | 
26 | export { Separator };
27 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 6 |   return (
 7 |     <textarea
 8 |       data-slot="textarea"
 9 |       className={cn(
10 |         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
11 |         className,
12 |       )}
13 |       {...props}
14 |     />
15 |   );
16 | }
17 | 
18 | export { Textarea };
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     },
23 |     "target": "ES2017"
24 |   },
25 |   "include": [
26 |     "next-env.d.ts",
27 |     "**/*.ts",
28 |     "**/*.tsx",
29 |     ".next/types/**/*.ts",
30 |     "src/hooks/use-threads",
31 |     "src/app/thread/[threadId]"
32 |   ],
33 |   "exclude": ["node_modules"]
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
13 |         className,
14 |       )}
15 |       {...props}
16 |     />
17 |   );
18 | }
19 | 
20 | export { Input };
21 | 


--------------------------------------------------------------------------------
/src/components/thread/markdown-styles.css:
--------------------------------------------------------------------------------
 1 | /* Base markdown styles */
 2 | .markdown-content code:not(pre code) {
 3 |   background-color: rgba(0, 0, 0, 0.05);
 4 |   padding: 0.2em 0.4em;
 5 |   border-radius: 3px;
 6 |   font-size: 0.9em;
 7 | }
 8 | 
 9 | .markdown-content a {
10 |   color: #0070f3;
11 |   text-decoration: none;
12 | }
13 | 
14 | .markdown-content a:hover {
15 |   text-decoration: underline;
16 | }
17 | 
18 | .markdown-content blockquote {
19 |   border-left: 4px solid #ddd;
20 |   padding-left: 1rem;
21 |   color: #666;
22 | }
23 | 
24 | .markdown-content pre {
25 |   overflow-x: auto;
26 | }
27 | 
28 | .markdown-content table {
29 |   border-collapse: collapse;
30 |   width: 100%;
31 | }
32 | 
33 | .markdown-content th,
34 | .markdown-content td {
35 |   border: 1px solid #ddd;
36 |   padding: 8px;
37 | }
38 | 
39 | .markdown-content th {
40 |   background-color: #f2f2f2;
41 | }
42 | 
43 | .markdown-content tr:nth-child(even) {
44 |   background-color: #f9f9f9;
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "next-themes";
 2 | import { Toaster as Sonner, ToasterProps } from "sonner";
 3 | 
 4 | const Toaster = ({ ...props }: ToasterProps) => {
 5 |   const { theme = "system" } = useTheme();
 6 | 
 7 |   return (
 8 |     <Sonner
 9 |       theme={theme as ToasterProps["theme"]}
10 |       className="toaster group"
11 |       toastOptions={{
12 |         classNames: {
13 |           toast:
14 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
15 |           description: "group-[.toast]:text-muted-foreground",
16 |           actionButton:
17 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
18 |           cancelButton:
19 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
20 |         },
21 |       }}
22 |       {...props}
23 |     />
24 |   );
25 | };
26 | 
27 | export { Toaster };
28 | 


--------------------------------------------------------------------------------
/src/components/icons/github.tsx:
--------------------------------------------------------------------------------
 1 | export const GitHubSVG = ({ width = "100%", height = "100%" }) => (
 2 |   <svg
 3 |     role="img"
 4 |     viewBox="0 0 24 24"
 5 |     width={width}
 6 |     height={height}
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <title>GitHub</title>
10 |     <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
11 |   </svg>
12 | );
13 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import reactHooks from "eslint-plugin-react-hooks";
 4 | import reactRefresh from "eslint-plugin-react-refresh";
 5 | import tseslint from "typescript-eslint";
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ["dist"] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ["**/*.{ts,tsx}"],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       "react-hooks": reactHooks,
18 |       "react-refresh": reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       "@typescript-eslint/no-explicit-any": 0,
23 |       "@typescript-eslint/no-unused-vars": [
24 |         "warn",
25 |         { args: "none", argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
26 |       ],
27 |       "react-refresh/only-export-components": [
28 |         "warn",
29 |         { allowConstantExport: true },
30 |       ],
31 |     },
32 |   },
33 | );
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Brace Sproul
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/thread/ContentBlocksPreview.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { MultimodalPreview } from "./MultimodalPreview";
 3 | import { cn } from "@/lib/utils";
 4 | import { ContentBlock } from "@langchain/core/messages";
 5 | 
 6 | interface ContentBlocksPreviewProps {
 7 |   blocks: ContentBlock.Multimodal.Data[];
 8 |   onRemove: (idx: number) => void;
 9 |   size?: "sm" | "md" | "lg";
10 |   className?: string;
11 | }
12 | 
13 | /**
14 |  * Renders a preview of content blocks with optional remove functionality.
15 |  * Uses cn utility for robust class merging.
16 |  */
17 | export const ContentBlocksPreview: React.FC<ContentBlocksPreviewProps> = ({
18 |   blocks,
19 |   onRemove,
20 |   size = "md",
21 |   className,
22 | }) => {
23 |   if (!blocks.length) return null;
24 |   return (
25 |     <div className={cn("flex flex-wrap gap-2 p-3.5 pb-0", className)}>
26 |       {blocks.map((block, idx) => (
27 |         <MultimodalPreview
28 |           key={idx}
29 |           block={block}
30 |           removable
31 |           onRemove={() => onRemove(idx)}
32 |           size={size}
33 |         />
34 |       ))}
35 |     </div>
36 |   );
37 | };
38 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as SwitchPrimitive from "@radix-ui/react-switch";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Switch({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
10 |   return (
11 |     <SwitchPrimitive.Root
12 |       data-slot="switch"
13 |       className={cn(
14 |         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
15 |         className,
16 |       )}
17 |       {...props}
18 |     >
19 |       <SwitchPrimitive.Thumb
20 |         data-slot="switch-thumb"
21 |         className={cn(
22 |           "bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
23 |         )}
24 |       />
25 |     </SwitchPrimitive.Root>
26 |   );
27 | }
28 | 
29 | export { Switch };
30 | 


--------------------------------------------------------------------------------
/src/components/thread/tooltip-icon-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { forwardRef } from "react";
 4 | 
 5 | import {
 6 |   Tooltip,
 7 |   TooltipContent,
 8 |   TooltipProvider,
 9 |   TooltipTrigger,
10 | } from "@/components/ui/tooltip";
11 | import { Button, ButtonProps } from "@/components/ui/button";
12 | import { cn } from "@/lib/utils";
13 | 
14 | export type TooltipIconButtonProps = ButtonProps & {
15 |   tooltip: string;
16 |   side?: "top" | "bottom" | "left" | "right";
17 | };
18 | 
19 | export const TooltipIconButton = forwardRef<
20 |   HTMLButtonElement,
21 |   TooltipIconButtonProps
22 | >(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
23 |   return (
24 |     <TooltipProvider>
25 |       <Tooltip>
26 |         <TooltipTrigger asChild>
27 |           <Button
28 |             variant="ghost"
29 |             size="icon"
30 |             {...rest}
31 |             className={cn("size-6 p-1", className)}
32 |             ref={ref}
33 |           >
34 |             {children}
35 |             <span className="sr-only">{tooltip}</span>
36 |           </Button>
37 |         </TooltipTrigger>
38 |         <TooltipContent side={side}>{tooltip}</TooltipContent>
39 |       </Tooltip>
40 |     </TooltipProvider>
41 |   );
42 | });
43 | 
44 | TooltipIconButton.displayName = "TooltipIconButton";
45 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Avatar({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
10 |   return (
11 |     <AvatarPrimitive.Root
12 |       data-slot="avatar"
13 |       className={cn(
14 |         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
15 |         className,
16 |       )}
17 |       {...props}
18 |     />
19 |   );
20 | }
21 | 
22 | function AvatarImage({
23 |   className,
24 |   ...props
25 | }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
26 |   return (
27 |     <AvatarPrimitive.Image
28 |       data-slot="avatar-image"
29 |       className={cn("aspect-square size-full", className)}
30 |       {...props}
31 |     />
32 |   );
33 | }
34 | 
35 | function AvatarFallback({
36 |   className,
37 |   ...props
38 | }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
39 |   return (
40 |     <AvatarPrimitive.Fallback
41 |       data-slot="avatar-fallback"
42 |       className={cn(
43 |         "bg-muted flex size-full items-center justify-center rounded-full",
44 |         className,
45 |       )}
46 |       {...props}
47 |     />
48 |   );
49 | }
50 | 
51 | export { Avatar, AvatarImage, AvatarFallback };
52 | 


--------------------------------------------------------------------------------
/src/lib/ensure-tool-responses.ts:
--------------------------------------------------------------------------------
 1 | import { v4 as uuidv4 } from "uuid";
 2 | import { Message, ToolMessage } from "@langchain/langgraph-sdk";
 3 | 
 4 | export const DO_NOT_RENDER_ID_PREFIX = "do-not-render-";
 5 | 
 6 | export function ensureToolCallsHaveResponses(messages: Message[]): Message[] {
 7 |   const newMessages: ToolMessage[] = [];
 8 | 
 9 |   messages.forEach((message, index) => {
10 |     if (message.type !== "ai" || message.tool_calls?.length === 0) {
11 |       // If it's not an AI message, or it doesn't have tool calls, we can ignore.
12 |       return;
13 |     }
14 |     // If it has tool calls, ensure the message which follows this is a tool message
15 |     const followingMessage = messages[index + 1];
16 |     if (followingMessage && followingMessage.type === "tool") {
17 |       // Following message is a tool message, so we can ignore.
18 |       return;
19 |     }
20 | 
21 |     // Since the following message is not a tool message, we must create a new tool message
22 |     newMessages.push(
23 |       ...(message.tool_calls?.map((tc) => ({
24 |         type: "tool" as const,
25 |         tool_call_id: tc.id ?? "",
26 |         id: `${DO_NOT_RENDER_ID_PREFIX}${uuidv4()}`,
27 |         name: tc.name,
28 |         content: "Successfully handled tool call.",
29 |       })) ?? []),
30 |     );
31 |   });
32 | 
33 |   return newMessages;
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/thread/syntax-highlighter.tsx:
--------------------------------------------------------------------------------
 1 | import { PrismAsyncLight as SyntaxHighlighterPrism } from "react-syntax-highlighter";
 2 | import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
 3 | import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
 4 | import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 5 | import { FC } from "react";
 6 | 
 7 | // Register languages you want to support
 8 | SyntaxHighlighterPrism.registerLanguage("js", tsx);
 9 | SyntaxHighlighterPrism.registerLanguage("jsx", tsx);
10 | SyntaxHighlighterPrism.registerLanguage("ts", tsx);
11 | SyntaxHighlighterPrism.registerLanguage("tsx", tsx);
12 | SyntaxHighlighterPrism.registerLanguage("python", python);
13 | 
14 | interface SyntaxHighlighterProps {
15 |   children: string;
16 |   language: string;
17 |   className?: string;
18 | }
19 | 
20 | export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
21 |   children,
22 |   language,
23 |   className,
24 | }) => {
25 |   return (
26 |     <SyntaxHighlighterPrism
27 |       language={language}
28 |       style={coldarkDark}
29 |       customStyle={{
30 |         margin: 0,
31 |         width: "100%",
32 |         background: "transparent",
33 |         padding: "1.5rem 1rem",
34 |       }}
35 |       className={className}
36 |     >
37 |       {children}
38 |     </SyntaxHighlighterPrism>
39 |   );
40 | };
41 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/components/tool-call-table.tsx:
--------------------------------------------------------------------------------
 1 | import { ToolCall } from "@langchain/core/messages/tool";
 2 | import { unknownToPrettyDate } from "../utils";
 3 | 
 4 | export function ToolCallTable({ toolCall }: { toolCall: ToolCall }) {
 5 |   return (
 6 |     <div className="max-w-full min-w-[300px] overflow-hidden rounded-lg border">
 7 |       <table className="w-full border-collapse">
 8 |         <thead>
 9 |           <tr>
10 |             <th
11 |               className="bg-gray-100 px-2 py-0 text-left text-sm"
12 |               colSpan={2}
13 |             >
14 |               {toolCall.name}
15 |             </th>
16 |           </tr>
17 |         </thead>
18 |         <tbody>
19 |           {Object.entries(toolCall.args).map(([key, value]) => {
20 |             let valueStr = "";
21 |             if (["string", "number"].includes(typeof value)) {
22 |               valueStr = value.toString();
23 |             }
24 | 
25 |             const date = unknownToPrettyDate(value);
26 |             if (date) {
27 |               valueStr = date;
28 |             }
29 | 
30 |             try {
31 |               valueStr = valueStr || JSON.stringify(value, null);
32 |             } catch (_) {
33 |               // failed to stringify, just assign an empty string
34 |               valueStr = "";
35 |             }
36 | 
37 |             return (
38 |               <tr
39 |                 key={key}
40 |                 className="border-t"
41 |               >
42 |                 <td className="w-1/3 px-2 py-1 text-xs font-medium">{key}</td>
43 |                 <td className="px-2 py-1 font-mono text-xs">{valueStr}</td>
44 |               </tr>
45 |             );
46 |           })}
47 |         </tbody>
48 |       </table>
49 |     </div>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/src/lib/agent-inbox-interrupt.ts:
--------------------------------------------------------------------------------
 1 | import { Interrupt } from "@langchain/langgraph-sdk";
 2 | import { HITLRequest } from "@/components/thread/agent-inbox/types";
 3 | 
 4 | export function isAgentInboxInterruptSchema(
 5 |   value: unknown,
 6 | ): value is Interrupt<HITLRequest> | Interrupt<HITLRequest>[] {
 7 |   const valueAsObject = Array.isArray(value) ? value[0] : value;
 8 |   if (!valueAsObject || typeof valueAsObject !== "object") {
 9 |     return false;
10 |   }
11 | 
12 |   const interrupt = valueAsObject as Interrupt<HITLRequest>;
13 |   if (!interrupt.value || typeof interrupt.value !== "object") {
14 |     return false;
15 |   }
16 | 
17 |   const hitlValue = interrupt.value as Partial<HITLRequest>;
18 |   const { action_requests: actionRequests, review_configs: reviewConfigs } =
19 |     hitlValue;
20 | 
21 |   if (!Array.isArray(actionRequests) || actionRequests.length === 0) {
22 |     return false;
23 |   }
24 |   if (!Array.isArray(reviewConfigs) || reviewConfigs.length === 0) {
25 |     return false;
26 |   }
27 | 
28 |   const hasValidActionRequests = actionRequests.every((request) => {
29 |     return (
30 |       request &&
31 |       typeof request === "object" &&
32 |       "name" in request &&
33 |       typeof request.name === "string" &&
34 |       "args" in request &&
35 |       request.args !== null &&
36 |       typeof request.args === "object"
37 |     );
38 |   });
39 | 
40 |   const hasValidConfigs = reviewConfigs.every((config) => {
41 |     return (
42 |       config &&
43 |       typeof config === "object" &&
44 |       "action_name" in config &&
45 |       typeof config.action_name === "string" &&
46 |       "allowed_decisions" in config &&
47 |       Array.isArray(config.allowed_decisions)
48 |     );
49 |   });
50 | 
51 |   return hasValidActionRequests && hasValidConfigs;
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/ui/password-input.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | import { Input } from "./input";
 7 | import { Button } from "./button";
 8 | import { EyeIcon, EyeOffIcon } from "lucide-react";
 9 | 
10 | export const PasswordInput = React.forwardRef<
11 |   HTMLInputElement,
12 |   React.ComponentProps<"input">
13 | >(({ className, ...props }, ref) => {
14 |   const [showPassword, setShowPassword] = React.useState(false);
15 | 
16 |   return (
17 |     <div className="relative w-full">
18 |       <Input
19 |         type={showPassword ? "text" : "password"}
20 |         className={cn("hide-password-toggle pr-10", className)}
21 |         ref={ref}
22 |         {...props}
23 |       />
24 |       <Button
25 |         type="button"
26 |         variant="ghost"
27 |         size="sm"
28 |         className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
29 |         onClick={() => setShowPassword((prev) => !prev)}
30 |       >
31 |         {showPassword ? (
32 |           <EyeIcon
33 |             className="h-4 w-4"
34 |             aria-hidden="true"
35 |           />
36 |         ) : (
37 |           <EyeOffIcon
38 |             className="h-4 w-4"
39 |             aria-hidden="true"
40 |           />
41 |         )}
42 |         <span className="sr-only">
43 |           {showPassword ? "Hide password" : "Show password"}
44 |         </span>
45 |       </Button>
46 | 
47 |       {/* hides browsers password toggles */}
48 |       <style>{`
49 | 					.hide-password-toggle::-ms-reveal,
50 | 					.hide-password-toggle::-ms-clear {
51 | 						visibility: hidden;
52 | 						pointer-events: none;
53 | 						display: none;
54 | 					}
55 | 				`}</style>
56 |     </div>
57 |   );
58 | });
59 | 
60 | PasswordInput.displayName = "PasswordInput";
61 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className,
12 |       )}
13 |       {...props}
14 |     />
15 |   );
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn("flex flex-col gap-1.5 px-6", className)}
23 |       {...props}
24 |     />
25 |   );
26 | }
27 | 
28 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
29 |   return (
30 |     <div
31 |       data-slot="card-title"
32 |       className={cn("leading-none font-semibold", className)}
33 |       {...props}
34 |     />
35 |   );
36 | }
37 | 
38 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
39 |   return (
40 |     <div
41 |       data-slot="card-description"
42 |       className={cn("text-muted-foreground text-sm", className)}
43 |       {...props}
44 |     />
45 |   );
46 | }
47 | 
48 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
49 |   return (
50 |     <div
51 |       data-slot="card-content"
52 |       className={cn("px-6", className)}
53 |       {...props}
54 |     />
55 |   );
56 | }
57 | 
58 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
59 |   return (
60 |     <div
61 |       data-slot="card-footer"
62 |       className={cn("flex items-center px-6", className)}
63 |       {...props}
64 |     />
65 |   );
66 | }
67 | 
68 | export {
69 |   Card,
70 |   CardHeader,
71 |   CardFooter,
72 |   CardTitle,
73 |   CardDescription,
74 |   CardContent,
75 | };
76 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function TooltipProvider({
 7 |   delayDuration = 0,
 8 |   ...props
 9 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
10 |   return (
11 |     <TooltipPrimitive.Provider
12 |       data-slot="tooltip-provider"
13 |       delayDuration={delayDuration}
14 |       {...props}
15 |     />
16 |   );
17 | }
18 | 
19 | function Tooltip({
20 |   ...props
21 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
22 |   return (
23 |     <TooltipProvider>
24 |       <TooltipPrimitive.Root
25 |         data-slot="tooltip"
26 |         {...props}
27 |       />
28 |     </TooltipProvider>
29 |   );
30 | }
31 | 
32 | function TooltipTrigger({
33 |   ...props
34 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
35 |   return (
36 |     <TooltipPrimitive.Trigger
37 |       data-slot="tooltip-trigger"
38 |       {...props}
39 |     />
40 |   );
41 | }
42 | 
43 | function TooltipContent({
44 |   className,
45 |   sideOffset = 0,
46 |   children,
47 |   ...props
48 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
49 |   return (
50 |     <TooltipPrimitive.Portal>
51 |       <TooltipPrimitive.Content
52 |         data-slot="tooltip-content"
53 |         sideOffset={sideOffset}
54 |         className={cn(
55 |           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
56 |           className,
57 |         )}
58 |         {...props}
59 |       >
60 |         {children}
61 |         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
62 |       </TooltipPrimitive.Content>
63 |     </TooltipPrimitive.Portal>
64 |   );
65 | }
66 | 
67 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
68 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | # Run formatting on all PRs
 2 | 
 3 | name: CI
 4 | 
 5 | on:
 6 |   push:
 7 |     branches: ["main"]
 8 |   pull_request:
 9 |   workflow_dispatch: # Allows triggering the workflow manually in GitHub UI
10 | 
11 | # If another push to the same PR or branch happens while this workflow is still running,
12 | # cancel the earlier run in favor of the next run.
13 | #
14 | # There's no point in testing an outdated version of the code. GitHub only allows
15 | # a limited number of job runners to be active at the same time, so it's better to cancel
16 | # pointless jobs early so that more useful jobs can run sooner.
17 | concurrency:
18 |   group: ${{ github.workflow }}-${{ github.ref }}
19 |   cancel-in-progress: true
20 | 
21 | jobs:
22 |   format:
23 |     name: Check formatting
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |       - uses: actions/checkout@v4
27 |       - uses: pnpm/action-setup@v4
28 |         with:
29 |           version: 10.5.1
30 |       - uses: actions/setup-node@v4
31 |         with:
32 |           node-version: "18.x"
33 |           cache: "pnpm"
34 |       - name: Install dependencies
35 |         run: pnpm install
36 |       - name: Check formatting
37 |         run: pnpm format:check
38 | 
39 |   lint:
40 |     name: Check linting
41 |     runs-on: ubuntu-latest
42 |     steps:
43 |       - uses: actions/checkout@v4
44 |       - uses: pnpm/action-setup@v4
45 |         with:
46 |           version: 10.5.1
47 |       - uses: actions/setup-node@v4
48 |         with:
49 |           node-version: "18.x"
50 |           cache: "pnpm"
51 |       - name: Install dependencies
52 |         run: pnpm install
53 |       - name: Check linting
54 |         run: pnpm lint
55 | 
56 |   readme-spelling:
57 |     name: Check README spelling
58 |     runs-on: ubuntu-latest
59 |     steps:
60 |       - uses: actions/checkout@v4
61 |       - uses: codespell-project/actions-codespell@v2
62 |         with:
63 |           ignore_words_file: .codespellignore
64 |           path: README.md
65 | 
66 |   check-spelling:
67 |     name: Check code spelling
68 |     runs-on: ubuntu-latest
69 |     steps:
70 |       - uses: actions/checkout@v4
71 |       - uses: codespell-project/actions-codespell@v2
72 |         with:
73 |           ignore_words_file: .codespellignore
74 |           path: src
75 | 


--------------------------------------------------------------------------------
/src/providers/Thread.tsx:
--------------------------------------------------------------------------------
 1 | import { validate } from "uuid";
 2 | import { getApiKey } from "@/lib/api-key";
 3 | import { Thread } from "@langchain/langgraph-sdk";
 4 | import { useQueryState } from "nuqs";
 5 | import {
 6 |   createContext,
 7 |   useContext,
 8 |   ReactNode,
 9 |   useCallback,
10 |   useState,
11 |   Dispatch,
12 |   SetStateAction,
13 | } from "react";
14 | import { createClient } from "./client";
15 | 
16 | interface ThreadContextType {
17 |   getThreads: () => Promise<Thread[]>;
18 |   threads: Thread[];
19 |   setThreads: Dispatch<SetStateAction<Thread[]>>;
20 |   threadsLoading: boolean;
21 |   setThreadsLoading: Dispatch<SetStateAction<boolean>>;
22 | }
23 | 
24 | const ThreadContext = createContext<ThreadContextType | undefined>(undefined);
25 | 
26 | function getThreadSearchMetadata(
27 |   assistantId: string,
28 | ): { graph_id: string } | { assistant_id: string } {
29 |   if (validate(assistantId)) {
30 |     return { assistant_id: assistantId };
31 |   } else {
32 |     return { graph_id: assistantId };
33 |   }
34 | }
35 | 
36 | export function ThreadProvider({ children }: { children: ReactNode }) {
37 |   const [apiUrl] = useQueryState("apiUrl");
38 |   const [assistantId] = useQueryState("assistantId");
39 |   const [threads, setThreads] = useState<Thread[]>([]);
40 |   const [threadsLoading, setThreadsLoading] = useState(false);
41 | 
42 |   const getThreads = useCallback(async (): Promise<Thread[]> => {
43 |     if (!apiUrl || !assistantId) return [];
44 |     const client = createClient(apiUrl, getApiKey() ?? undefined);
45 | 
46 |     const threads = await client.threads.search({
47 |       metadata: {
48 |         ...getThreadSearchMetadata(assistantId),
49 |       },
50 |       limit: 100,
51 |     });
52 | 
53 |     return threads;
54 |   }, [apiUrl, assistantId]);
55 | 
56 |   const value = {
57 |     getThreads,
58 |     threads,
59 |     setThreads,
60 |     threadsLoading,
61 |     setThreadsLoading,
62 |   };
63 | 
64 |   return (
65 |     <ThreadContext.Provider value={value}>{children}</ThreadContext.Provider>
66 |   );
67 | }
68 | 
69 | export function useThreads() {
70 |   const context = useContext(ThreadContext);
71 |   if (context === undefined) {
72 |     throw new Error("useThreads must be used within a ThreadProvider");
73 |   }
74 |   return context;
75 | }
76 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     "./index.html",
 6 |     "./src/**/*.{ts,tsx,js,jsx}",
 7 |     "./agent/**/*.{ts,tsx,js,jsx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       borderRadius: {
12 |         lg: "var(--radius)",
13 |         md: "calc(var(--radius) - 2px)",
14 |         sm: "calc(var(--radius) - 4px)",
15 |       },
16 |       components: {
17 |         ".scrollbar-pretty":
18 |           "overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
19 |       },
20 |       colors: {
21 |         background: "hsl(var(--background))",
22 |         foreground: "hsl(var(--foreground))",
23 |         card: {
24 |           DEFAULT: "hsl(var(--card))",
25 |           foreground: "hsl(var(--card-foreground))",
26 |         },
27 |         popover: {
28 |           DEFAULT: "hsl(var(--popover))",
29 |           foreground: "hsl(var(--popover-foreground))",
30 |         },
31 |         primary: {
32 |           DEFAULT: "hsl(var(--primary))",
33 |           foreground: "hsl(var(--primary-foreground))",
34 |         },
35 |         secondary: {
36 |           DEFAULT: "hsl(var(--secondary))",
37 |           foreground: "hsl(var(--secondary-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         destructive: {
48 |           DEFAULT: "hsl(var(--destructive))",
49 |           foreground: "hsl(var(--destructive-foreground))",
50 |         },
51 |         border: "hsl(var(--border))",
52 |         input: "hsl(var(--input))",
53 |         ring: "hsl(var(--ring))",
54 |         chart: {
55 |           1: "hsl(var(--chart-1))",
56 |           2: "hsl(var(--chart-2))",
57 |           3: "hsl(var(--chart-3))",
58 |           4: "hsl(var(--chart-4))",
59 |           5: "hsl(var(--chart-5))",
60 |         },
61 |       },
62 |     },
63 |   },
64 |   plugins: [require("tailwindcss-animate"), require("tailwind-scrollbar")],
65 | };
66 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
16 |         outline:
17 |           "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |         brand: "bg-[#2F6868] hover:bg-[#2F6868]/90 border-[#2F6868] text-white",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   },
36 | );
37 | 
38 | type ButtonProps = React.ComponentProps<"button"> &
39 |   VariantProps<typeof buttonVariants> & {
40 |     asChild?: boolean;
41 |   };
42 | 
43 | function Button({
44 |   className,
45 |   variant,
46 |   size,
47 |   asChild = false,
48 |   ...props
49 | }: ButtonProps) {
50 |   const Comp = asChild ? Slot : "button";
51 | 
52 |   return (
53 |     <Comp
54 |       data-slot="button"
55 |       className={cn(buttonVariants({ variant, size, className }))}
56 |       {...props}
57 |     />
58 |   );
59 | }
60 | 
61 | export { Button, buttonVariants, type ButtonProps };
62 | 


--------------------------------------------------------------------------------
/src/lib/multimodal-utils.ts:
--------------------------------------------------------------------------------
 1 | import { ContentBlock } from "@langchain/core/messages";
 2 | import { toast } from "sonner";
 3 | 
 4 | // Returns a Promise of a typed multimodal block for images or PDFs
 5 | export async function fileToContentBlock(
 6 |   file: File,
 7 | ): Promise<ContentBlock.Multimodal.Data> {
 8 |   const supportedImageTypes = [
 9 |     "image/jpeg",
10 |     "image/png",
11 |     "image/gif",
12 |     "image/webp",
13 |   ];
14 |   const supportedFileTypes = [...supportedImageTypes, "application/pdf"];
15 | 
16 |   if (!supportedFileTypes.includes(file.type)) {
17 |     toast.error(
18 |       `Unsupported file type: ${file.type}. Supported types are: ${supportedFileTypes.join(", ")}`,
19 |     );
20 |     return Promise.reject(new Error(`Unsupported file type: ${file.type}`));
21 |   }
22 | 
23 |   const data = await fileToBase64(file);
24 | 
25 |   if (supportedImageTypes.includes(file.type)) {
26 |     return {
27 |       type: "image",
28 |       mimeType: file.type,
29 |       data,
30 |       metadata: { name: file.name },
31 |     };
32 |   }
33 | 
34 |   // PDF
35 |   return {
36 |     type: "file",
37 |     mimeType: "application/pdf",
38 |     data,
39 |     metadata: { filename: file.name },
40 |   };
41 | }
42 | 
43 | // Helper to convert File to base64 string
44 | export async function fileToBase64(file: File): Promise<string> {
45 |   return new Promise<string>((resolve, reject) => {
46 |     const reader = new FileReader();
47 |     reader.onloadend = () => {
48 |       const result = reader.result as string;
49 |       // Remove the data:...;base64, prefix
50 |       resolve(result.split(",")[1]);
51 |     };
52 |     reader.onerror = reject;
53 |     reader.readAsDataURL(file);
54 |   });
55 | }
56 | 
57 | // Type guard for Base64ContentBlock
58 | export function isBase64ContentBlock(
59 |   block: unknown,
60 | ): block is ContentBlock.Multimodal.Data {
61 |   if (typeof block !== "object" || block === null || !("type" in block))
62 |     return false;
63 |   // file type (legacy)
64 |   if (
65 |     (block as { type: unknown }).type === "file" &&
66 |     "mimeType" in block &&
67 |     typeof (block as { mimeType?: unknown }).mimeType === "string" &&
68 |     ((block as { mimeType: string }).mimeType.startsWith("image/") ||
69 |       (block as { mimeType: string }).mimeType === "application/pdf")
70 |   ) {
71 |     return true;
72 |   }
73 |   // image type (new)
74 |   if (
75 |     (block as { type: unknown }).type === "image" &&
76 |     "mimeType" in block &&
77 |     typeof (block as { mimeType?: unknown }).mimeType === "string" &&
78 |     (block as { mimeType: string }).mimeType.startsWith("image/")
79 |   ) {
80 |     return true;
81 |   }
82 |   return false;
83 | }
84 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/types.ts:
--------------------------------------------------------------------------------
  1 | import { BaseMessage } from "@langchain/core/messages";
  2 | import { Interrupt, Thread, ThreadStatus } from "@langchain/langgraph-sdk";
  3 | 
  4 | export type DecisionType = "approve" | "edit" | "reject";
  5 | 
  6 | export interface Action {
  7 |   name: string;
  8 |   args: Record<string, unknown>;
  9 | }
 10 | 
 11 | export interface ActionRequest {
 12 |   name: string;
 13 |   args: Record<string, unknown>;
 14 |   description?: string;
 15 | }
 16 | 
 17 | export interface ReviewConfig {
 18 |   action_name: string;
 19 |   allowed_decisions: DecisionType[];
 20 |   args_schema?: Record<string, unknown>;
 21 | }
 22 | 
 23 | export interface HITLRequest {
 24 |   action_requests: ActionRequest[];
 25 |   review_configs: ReviewConfig[];
 26 | }
 27 | 
 28 | export type Decision =
 29 |   | { type: "approve" }
 30 |   | { type: "reject"; message?: string }
 31 |   | { type: "edit"; edited_action: Action };
 32 | 
 33 | export type DecisionWithEdits =
 34 |   | { type: "approve" }
 35 |   | { type: "reject"; message?: string }
 36 |   | {
 37 |       type: "edit";
 38 |       edited_action: Action;
 39 |       acceptAllowed?: boolean;
 40 |       editsMade?: boolean;
 41 |     };
 42 | 
 43 | export type Email = {
 44 |   id: string;
 45 |   thread_id: string;
 46 |   from_email: string;
 47 |   to_email: string;
 48 |   subject: string;
 49 |   page_content: string;
 50 |   send_time: string | undefined;
 51 |   read?: boolean;
 52 |   status?: "in-queue" | "processing" | "hitl" | "done";
 53 | };
 54 | 
 55 | export interface ThreadValues {
 56 |   email: Email;
 57 |   messages: BaseMessage[];
 58 |   triage: {
 59 |     logic: string;
 60 |     response: string;
 61 |   };
 62 | }
 63 | 
 64 | export type ThreadData<
 65 |   ThreadValues extends Record<string, any> = Record<string, any>,
 66 | > = {
 67 |   thread: Thread<ThreadValues>;
 68 | } & (
 69 |   | {
 70 |       status: "interrupted";
 71 |       interrupts: Interrupt<HITLRequest>[] | undefined;
 72 |     }
 73 |   | {
 74 |       status: "idle" | "busy" | "error";
 75 |       interrupts?: never;
 76 |     }
 77 | );
 78 | 
 79 | export type ThreadStatusWithAll = ThreadStatus | "all";
 80 | 
 81 | export type SubmitType = DecisionType;
 82 | 
 83 | export interface AgentInbox {
 84 |   /**
 85 |    * A unique identifier for the inbox.
 86 |    */
 87 |   id: string;
 88 |   /**
 89 |    * The ID of the graph.
 90 |    */
 91 |   graphId: string;
 92 |   /**
 93 |    * The URL of the deployment. Either a localhost URL, or a deployment URL.
 94 |    */
 95 |   deploymentUrl: string;
 96 |   /**
 97 |    * Optional name for the inbox, used in the UI to label the inbox.
 98 |    */
 99 |   name?: string;
100 |   /**
101 |    * Whether or not the inbox is selected.
102 |    */
103 |   selected: boolean;
104 | }
105 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/components/thread-id.tsx:
--------------------------------------------------------------------------------
 1 | import { Copy, CopyCheck } from "lucide-react";
 2 | import {
 3 |   Tooltip,
 4 |   TooltipContent,
 5 |   TooltipProvider,
 6 |   TooltipTrigger,
 7 | } from "@/components/ui/tooltip";
 8 | import React from "react";
 9 | import { motion, AnimatePresence } from "framer-motion";
10 | import { TooltipIconButton } from "../../tooltip-icon-button";
11 | 
12 | export function ThreadIdTooltip({ threadId }: { threadId: string }) {
13 |   const firstThreeChars = threadId.slice(0, 3);
14 |   const lastThreeChars = threadId.slice(-3);
15 | 
16 |   return (
17 |     <TooltipProvider>
18 |       <Tooltip>
19 |         <TooltipTrigger>
20 |           <p className="rounded-md bg-gray-100 px-1 py-[2px] font-mono text-[10px] leading-[12px] tracking-tighter">
21 |             {firstThreeChars}...{lastThreeChars}
22 |           </p>
23 |         </TooltipTrigger>
24 |         <TooltipContent>
25 |           <ThreadIdCopyable threadId={threadId} />
26 |         </TooltipContent>
27 |       </Tooltip>
28 |     </TooltipProvider>
29 |   );
30 | }
31 | 
32 | export function ThreadIdCopyable({
33 |   threadId,
34 |   showUUID = false,
35 | }: {
36 |   threadId: string;
37 |   showUUID?: boolean;
38 | }) {
39 |   const [copied, setCopied] = React.useState(false);
40 | 
41 |   const handleCopy = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
42 |     e.stopPropagation();
43 |     navigator.clipboard.writeText(threadId);
44 |     setCopied(true);
45 |     setTimeout(() => setCopied(false), 2000);
46 |   };
47 | 
48 |   return (
49 |     <TooltipIconButton
50 |       onClick={(e) => handleCopy(e)}
51 |       variant="ghost"
52 |       tooltip="Copy thread ID"
53 |       className="flex w-fit flex-grow-0 cursor-pointer items-center gap-1 rounded-md border-[1px] border-gray-200 p-1 hover:bg-gray-50/90"
54 |     >
55 |       <p className="font-mono text-xs">{showUUID ? threadId : "ID"}</p>
56 |       <AnimatePresence
57 |         mode="wait"
58 |         initial={false}
59 |       >
60 |         {copied ? (
61 |           <motion.div
62 |             key="check"
63 |             initial={{ opacity: 0, scale: 0.8 }}
64 |             animate={{ opacity: 1, scale: 1 }}
65 |             exit={{ opacity: 0, scale: 0.8 }}
66 |             transition={{ duration: 0.15 }}
67 |           >
68 |             <CopyCheck className="h-3 max-h-3 w-3 max-w-3 text-green-500" />
69 |           </motion.div>
70 |         ) : (
71 |           <motion.div
72 |             key="copy"
73 |             initial={{ opacity: 0, scale: 0.8 }}
74 |             animate={{ opacity: 1, scale: 1 }}
75 |             exit={{ opacity: 0, scale: 0.8 }}
76 |             transition={{ duration: 0.15 }}
77 |           >
78 |             <Copy className="h-3 max-h-3 w-3 max-w-3 text-gray-500" />
79 |           </motion.div>
80 |         )}
81 |       </AnimatePresence>
82 |     </TooltipIconButton>
83 |   );
84 | }
85 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "agent-chat-ui",
 3 |   "readme": "https://github.com/langchain-ai/agent-chat-ui/blob/main/README.md",
 4 |   "homepage": "https://agentchat.vercel.app",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/langchain-ai/agent-chat-ui.git"
 8 |   },
 9 |   "private": true,
10 |   "version": "0.0.0",
11 |   "type": "module",
12 |   "scripts": {
13 |     "dev": "next dev",
14 |     "build": "next build",
15 |     "start": "next start",
16 |     "lint": "next lint",
17 |     "lint:fix": "next lint --fix",
18 |     "format": "prettier --write .",
19 |     "format:check": "prettier --check ."
20 |   },
21 |   "dependencies": {
22 |     "@langchain/core": "^1.0.2",
23 |     "@langchain/langgraph": "^1.0.1",
24 |     "@langchain/langgraph-sdk": "^1.0.0",
25 |     "@radix-ui/react-avatar": "^1.1.3",
26 |     "@radix-ui/react-dialog": "^1.1.6",
27 |     "@radix-ui/react-label": "^2.1.2",
28 |     "@radix-ui/react-separator": "^1.1.2",
29 |     "@radix-ui/react-slot": "^1.1.2",
30 |     "@radix-ui/react-switch": "^1.1.3",
31 |     "@radix-ui/react-tooltip": "^1.1.8",
32 |     "class-variance-authority": "^0.7.1",
33 |     "clsx": "^2.1.1",
34 |     "date-fns": "^4.1.0",
35 |     "esbuild": "^0.25.0",
36 |     "esbuild-plugin-tailwindcss": "^2.0.1",
37 |     "framer-motion": "^12.4.9",
38 |     "katex": "^0.16.21",
39 |     "langgraph-nextjs-api-passthrough": "^0.0.4",
40 |     "lodash": "^4.17.21",
41 |     "lucide-react": "^0.476.0",
42 |     "next-themes": "^0.4.4",
43 |     "nuqs": "^2.4.1",
44 |     "react": "^19.0.0",
45 |     "react-dom": "^19.0.0",
46 |     "react-markdown": "^10.0.1",
47 |     "react-syntax-highlighter": "^15.5.0",
48 |     "recharts": "^2.15.1",
49 |     "rehype-katex": "^7.0.1",
50 |     "remark-gfm": "^4.0.1",
51 |     "remark-math": "^6.0.0",
52 |     "sonner": "^2.0.1",
53 |     "tailwind-merge": "^3.0.2",
54 |     "tailwindcss-animate": "^1.0.7",
55 |     "use-stick-to-bottom": "^1.0.46",
56 |     "uuid": "^11.1.0",
57 |     "zod": "^4.1.12"
58 |   },
59 |   "devDependencies": {
60 |     "@eslint/js": "^9.19.0",
61 |     "@tailwindcss/postcss": "^4.0.13",
62 |     "@types/lodash": "^4.17.16",
63 |     "@types/node": "^22.13.5",
64 |     "@types/react": "^19.0.8",
65 |     "@types/react-dom": "^19.0.3",
66 |     "@types/react-syntax-highlighter": "^15.5.13",
67 |     "@types/uuid": "^10.0.0",
68 |     "autoprefixer": "^10.4.20",
69 |     "dotenv": "^16.4.7",
70 |     "eslint": "^9.19.0",
71 |     "eslint-config-next": "15.2.2",
72 |     "eslint-plugin-react-hooks": "^5.0.0",
73 |     "eslint-plugin-react-refresh": "^0.4.18",
74 |     "globals": "^15.14.0",
75 |     "next": "^15.4.10",
76 |     "postcss": "^8.5.3",
77 |     "prettier": "^3.5.3",
78 |     "prettier-plugin-tailwindcss": "^0.6.11",
79 |     "tailwind-scrollbar": "^4.0.1",
80 |     "tailwindcss": "^4.0.13",
81 |     "typescript": "~5.7.2",
82 |     "typescript-eslint": "^8.22.0"
83 |   },
84 |   "overrides": {
85 |     "react-is": "^19.0.0-rc-69d4b800-20241021"
86 |   },
87 |   "packageManager": "pnpm@10.5.1"
88 | }
89 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useMemo, useState } from "react";
  2 | import { Interrupt } from "@langchain/langgraph-sdk";
  3 | import { cn } from "@/lib/utils";
  4 | import { useStreamContext } from "@/providers/Stream";
  5 | import { HITLRequest } from "./types";
  6 | import { StateView } from "./components/state-view";
  7 | import { ThreadActionsView } from "./components/thread-actions-view";
  8 | 
  9 | interface ThreadViewProps {
 10 |   interrupt: Interrupt<HITLRequest> | Interrupt<HITLRequest>[];
 11 | }
 12 | 
 13 | export function ThreadView({ interrupt }: ThreadViewProps) {
 14 |   const thread = useStreamContext();
 15 |   const interrupts = useMemo(
 16 |     () =>
 17 |       (Array.isArray(interrupt) ? interrupt : [interrupt]).filter(
 18 |         (item): item is Interrupt<HITLRequest> => !!item,
 19 |       ),
 20 |     [interrupt],
 21 |   );
 22 |   const [activeInterruptIndex, setActiveInterruptIndex] = useState(0);
 23 |   const [showDescription, setShowDescription] = useState(false);
 24 |   const [showState, setShowState] = useState(false);
 25 |   const showSidePanel = showDescription || showState;
 26 | 
 27 |   useEffect(() => {
 28 |     setActiveInterruptIndex(0);
 29 |   }, [interrupts.length]);
 30 | 
 31 |   const activeInterrupt = interrupts[activeInterruptIndex];
 32 |   const activeDescription =
 33 |     activeInterrupt?.value?.action_requests?.[0]?.description ?? "";
 34 | 
 35 |   const handleShowSidePanel = (
 36 |     showStateFlag: boolean,
 37 |     showDescriptionFlag: boolean,
 38 |   ) => {
 39 |     if (showStateFlag && showDescriptionFlag) {
 40 |       console.error("Cannot show both state and description");
 41 |       return;
 42 |     }
 43 |     if (showStateFlag) {
 44 |       setShowDescription(false);
 45 |       setShowState(true);
 46 |     } else if (showDescriptionFlag) {
 47 |       setShowState(false);
 48 |       setShowDescription(true);
 49 |     } else {
 50 |       setShowState(false);
 51 |       setShowDescription(false);
 52 |     }
 53 |   };
 54 | 
 55 |   if (!activeInterrupt) {
 56 |     return null;
 57 |   }
 58 | 
 59 |   return (
 60 |     <div className="flex h-full w-full flex-col rounded-2xl bg-gray-50 p-8 lg:flex-row">
 61 |       {showSidePanel ? (
 62 |         <StateView
 63 |           handleShowSidePanel={handleShowSidePanel}
 64 |           description={activeDescription}
 65 |           values={thread.values}
 66 |           view={showState ? "state" : "description"}
 67 |         />
 68 |       ) : (
 69 |         <div className="flex w-full flex-col gap-6">
 70 |           {interrupts.length > 1 && (
 71 |             <div className="flex flex-wrap items-center gap-2">
 72 |               {interrupts.map((it, idx) => {
 73 |                 const title =
 74 |                   it.value?.action_requests?.[0]?.name ??
 75 |                   `Interrupt ${idx + 1}`;
 76 |                 return (
 77 |                   <button
 78 |                     key={it.id ?? idx}
 79 |                     type="button"
 80 |                     onClick={() => setActiveInterruptIndex(idx)}
 81 |                     className={cn(
 82 |                       "rounded-full border px-3 py-1 text-sm transition-colors",
 83 |                       idx === activeInterruptIndex
 84 |                         ? "border-primary bg-primary/10 text-primary"
 85 |                         : "hover:border-primary hover:text-primary border-gray-300 bg-white text-gray-600",
 86 |                     )}
 87 |                   >
 88 |                     {title}
 89 |                   </button>
 90 |                 );
 91 |               })}
 92 |             </div>
 93 |           )}
 94 |           <ThreadActionsView
 95 |             interrupt={activeInterrupt}
 96 |             handleShowSidePanel={handleShowSidePanel}
 97 |             showState={showState}
 98 |             showDescription={showDescription}
 99 |           />
100 |         </div>
101 |       )}
102 |     </div>
103 |   );
104 | }
105 | 


--------------------------------------------------------------------------------
/src/components/thread/MultimodalPreview.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { File, X as XIcon } from "lucide-react";
  3 | import { ContentBlock } from "@langchain/core/messages";
  4 | import { cn } from "@/lib/utils";
  5 | import Image from "next/image";
  6 | export interface MultimodalPreviewProps {
  7 |   block: ContentBlock.Multimodal.Data;
  8 |   removable?: boolean;
  9 |   onRemove?: () => void;
 10 |   className?: string;
 11 |   size?: "sm" | "md" | "lg";
 12 | }
 13 | 
 14 | export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
 15 |   block,
 16 |   removable = false,
 17 |   onRemove,
 18 |   className,
 19 |   size = "md",
 20 | }) => {
 21 |   // Image block
 22 |   if (
 23 |     block.type === "image" &&
 24 |     typeof block.mimeType === "string" &&
 25 |     block.mimeType.startsWith("image/")
 26 |   ) {
 27 |     const url = `data:${block.mimeType};base64,${block.data}`;
 28 |     let imgClass: string = "rounded-md object-cover h-16 w-16 text-lg";
 29 |     if (size === "sm") imgClass = "rounded-md object-cover h-10 w-10 text-base";
 30 |     if (size === "lg") imgClass = "rounded-md object-cover h-24 w-24 text-xl";
 31 |     return (
 32 |       <div className={cn("relative inline-block", className)}>
 33 |         <Image
 34 |           src={url}
 35 |           alt={String(block.metadata?.name || "uploaded image")}
 36 |           className={imgClass}
 37 |           width={size === "sm" ? 16 : size === "md" ? 32 : 48}
 38 |           height={size === "sm" ? 16 : size === "md" ? 32 : 48}
 39 |         />
 40 |         {removable && (
 41 |           <button
 42 |             type="button"
 43 |             className="absolute top-1 right-1 z-10 rounded-full bg-gray-500 text-white hover:bg-gray-700"
 44 |             onClick={onRemove}
 45 |             aria-label="Remove image"
 46 |           >
 47 |             <XIcon className="h-4 w-4" />
 48 |           </button>
 49 |         )}
 50 |       </div>
 51 |     );
 52 |   }
 53 | 
 54 |   // PDF block
 55 |   if (block.type === "file" && block.mimeType === "application/pdf") {
 56 |     const filename =
 57 |       block.metadata?.filename || block.metadata?.name || "PDF file";
 58 |     return (
 59 |       <div
 60 |         className={cn(
 61 |           "relative flex items-start gap-2 rounded-md border bg-gray-100 px-3 py-2",
 62 |           className,
 63 |         )}
 64 |       >
 65 |         <div className="flex flex-shrink-0 flex-col items-start justify-start">
 66 |           <File
 67 |             className={cn(
 68 |               "text-teal-700",
 69 |               size === "sm" ? "h-5 w-5" : "h-7 w-7",
 70 |             )}
 71 |           />
 72 |         </div>
 73 |         <span
 74 |           className={cn("min-w-0 flex-1 text-sm break-all text-gray-800")}
 75 |           style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}
 76 |         >
 77 |           {String(filename)}
 78 |         </span>
 79 |         {removable && (
 80 |           <button
 81 |             type="button"
 82 |             className="ml-2 self-start rounded-full bg-gray-200 p-1 text-teal-700 hover:bg-gray-300"
 83 |             onClick={onRemove}
 84 |             aria-label="Remove PDF"
 85 |           >
 86 |             <XIcon className="h-4 w-4" />
 87 |           </button>
 88 |         )}
 89 |       </div>
 90 |     );
 91 |   }
 92 | 
 93 |   // Fallback for unknown types
 94 |   return (
 95 |     <div
 96 |       className={cn(
 97 |         "flex items-center gap-2 rounded-md border bg-gray-100 px-3 py-2 text-gray-500",
 98 |         className,
 99 |       )}
100 |     >
101 |       <File className="h-5 w-5 flex-shrink-0" />
102 |       <span className="truncate text-xs">Unsupported file type</span>
103 |       {removable && (
104 |         <button
105 |           type="button"
106 |           className="ml-2 rounded-full bg-gray-200 p-1 text-gray-500 hover:bg-gray-300"
107 |           onClick={onRemove}
108 |           aria-label="Remove file"
109 |         >
110 |           <XIcon className="h-4 w-4" />
111 |         </button>
112 |       )}
113 |     </div>
114 |   );
115 | };
116 | 


--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as SheetPrimitive from "@radix-ui/react-dialog";
  3 | import { XIcon } from "lucide-react";
  4 | 
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  8 |   return (
  9 |     <SheetPrimitive.Root
 10 |       data-slot="sheet"
 11 |       {...props}
 12 |     />
 13 |   );
 14 | }
 15 | 
 16 | function SheetTrigger({
 17 |   ...props
 18 | }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
 19 |   return (
 20 |     <SheetPrimitive.Trigger
 21 |       data-slot="sheet-trigger"
 22 |       {...props}
 23 |     />
 24 |   );
 25 | }
 26 | 
 27 | function SheetClose({
 28 |   ...props
 29 | }: React.ComponentProps<typeof SheetPrimitive.Close>) {
 30 |   return (
 31 |     <SheetPrimitive.Close
 32 |       data-slot="sheet-close"
 33 |       {...props}
 34 |     />
 35 |   );
 36 | }
 37 | 
 38 | function SheetPortal({
 39 |   ...props
 40 | }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
 41 |   return (
 42 |     <SheetPrimitive.Portal
 43 |       data-slot="sheet-portal"
 44 |       {...props}
 45 |     />
 46 |   );
 47 | }
 48 | 
 49 | function SheetOverlay({
 50 |   className,
 51 |   ...props
 52 | }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
 53 |   return (
 54 |     <SheetPrimitive.Overlay
 55 |       data-slot="sheet-overlay"
 56 |       className={cn(
 57 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 58 |         className,
 59 |       )}
 60 |       {...props}
 61 |     />
 62 |   );
 63 | }
 64 | 
 65 | function SheetContent({
 66 |   className,
 67 |   children,
 68 |   side = "right",
 69 |   ...props
 70 | }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 71 |   side?: "top" | "right" | "bottom" | "left";
 72 | }) {
 73 |   return (
 74 |     <SheetPortal>
 75 |       <SheetOverlay />
 76 |       <SheetPrimitive.Content
 77 |         data-slot="sheet-content"
 78 |         className={cn(
 79 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 80 |           side === "right" &&
 81 |             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
 82 |           side === "left" &&
 83 |             "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
 84 |           side === "top" &&
 85 |             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 86 |           side === "bottom" &&
 87 |             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
 88 |           className,
 89 |         )}
 90 |         {...props}
 91 |       >
 92 |         {children}
 93 |         <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
 94 |           <XIcon className="size-4" />
 95 |           <span className="sr-only">Close</span>
 96 |         </SheetPrimitive.Close>
 97 |       </SheetPrimitive.Content>
 98 |     </SheetPortal>
 99 |   );
100 | }
101 | 
102 | function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
103 |   return (
104 |     <div
105 |       data-slot="sheet-header"
106 |       className={cn("flex flex-col gap-1.5 p-4", className)}
107 |       {...props}
108 |     />
109 |   );
110 | }
111 | 
112 | function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
113 |   return (
114 |     <div
115 |       data-slot="sheet-footer"
116 |       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
117 |       {...props}
118 |     />
119 |   );
120 | }
121 | 
122 | function SheetTitle({
123 |   className,
124 |   ...props
125 | }: React.ComponentProps<typeof SheetPrimitive.Title>) {
126 |   return (
127 |     <SheetPrimitive.Title
128 |       data-slot="sheet-title"
129 |       className={cn("text-foreground font-semibold", className)}
130 |       {...props}
131 |     />
132 |   );
133 | }
134 | 
135 | function SheetDescription({
136 |   className,
137 |   ...props
138 | }: React.ComponentProps<typeof SheetPrimitive.Description>) {
139 |   return (
140 |     <SheetPrimitive.Description
141 |       data-slot="sheet-description"
142 |       className={cn("text-muted-foreground text-sm", className)}
143 |       {...props}
144 |     />
145 |   );
146 | }
147 | 
148 | export {
149 |   Sheet,
150 |   SheetTrigger,
151 |   SheetClose,
152 |   SheetContent,
153 |   SheetHeader,
154 |   SheetFooter,
155 |   SheetTitle,
156 |   SheetDescription,
157 | };
158 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/human.tsx:
--------------------------------------------------------------------------------
  1 | import { useStreamContext } from "@/providers/Stream";
  2 | import { Message } from "@langchain/langgraph-sdk";
  3 | import { useState } from "react";
  4 | import { getContentString } from "../utils";
  5 | import { cn } from "@/lib/utils";
  6 | import { Textarea } from "@/components/ui/textarea";
  7 | import { BranchSwitcher, CommandBar } from "./shared";
  8 | import { MultimodalPreview } from "@/components/thread/MultimodalPreview";
  9 | import { isBase64ContentBlock } from "@/lib/multimodal-utils";
 10 | 
 11 | function EditableContent({
 12 |   value,
 13 |   setValue,
 14 |   onSubmit,
 15 | }: {
 16 |   value: string;
 17 |   setValue: React.Dispatch<React.SetStateAction<string>>;
 18 |   onSubmit: () => void;
 19 | }) {
 20 |   const handleKeyDown = (e: React.KeyboardEvent) => {
 21 |     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
 22 |       e.preventDefault();
 23 |       onSubmit();
 24 |     }
 25 |   };
 26 | 
 27 |   return (
 28 |     <Textarea
 29 |       value={value}
 30 |       onChange={(e) => setValue(e.target.value)}
 31 |       onKeyDown={handleKeyDown}
 32 |       className="focus-visible:ring-0"
 33 |     />
 34 |   );
 35 | }
 36 | 
 37 | export function HumanMessage({
 38 |   message,
 39 |   isLoading,
 40 | }: {
 41 |   message: Message;
 42 |   isLoading: boolean;
 43 | }) {
 44 |   const thread = useStreamContext();
 45 |   const meta = thread.getMessagesMetadata(message);
 46 |   const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;
 47 | 
 48 |   const [isEditing, setIsEditing] = useState(false);
 49 |   const [value, setValue] = useState("");
 50 |   const contentString = getContentString(message.content);
 51 | 
 52 |   const handleSubmitEdit = () => {
 53 |     setIsEditing(false);
 54 | 
 55 |     const newMessage: Message = { type: "human", content: value };
 56 |     thread.submit(
 57 |       { messages: [newMessage] },
 58 |       {
 59 |         checkpoint: parentCheckpoint,
 60 |         streamMode: ["values"],
 61 |         streamSubgraphs: true,
 62 |         streamResumable: true,
 63 |         optimisticValues: (prev) => {
 64 |           const values = meta?.firstSeenState?.values;
 65 |           if (!values) return prev;
 66 | 
 67 |           return {
 68 |             ...values,
 69 |             messages: [...(values.messages ?? []), newMessage],
 70 |           };
 71 |         },
 72 |       },
 73 |     );
 74 |   };
 75 | 
 76 |   return (
 77 |     <div
 78 |       className={cn(
 79 |         "group ml-auto flex items-center gap-2",
 80 |         isEditing && "w-full max-w-xl",
 81 |       )}
 82 |     >
 83 |       <div className={cn("flex flex-col gap-2", isEditing && "w-full")}>
 84 |         {isEditing ? (
 85 |           <EditableContent
 86 |             value={value}
 87 |             setValue={setValue}
 88 |             onSubmit={handleSubmitEdit}
 89 |           />
 90 |         ) : (
 91 |           <div className="flex flex-col gap-2">
 92 |             {/* Render images and files if no text */}
 93 |             {Array.isArray(message.content) && message.content.length > 0 && (
 94 |               <div className="flex flex-wrap items-end justify-end gap-2">
 95 |                 {message.content.reduce<React.ReactNode[]>(
 96 |                   (acc, block, idx) => {
 97 |                     if (isBase64ContentBlock(block)) {
 98 |                       acc.push(
 99 |                         <MultimodalPreview
100 |                           key={idx}
101 |                           block={block}
102 |                           size="md"
103 |                         />,
104 |                       );
105 |                     }
106 |                     return acc;
107 |                   },
108 |                   [],
109 |                 )}
110 |               </div>
111 |             )}
112 |             {/* Render text if present, otherwise fallback to file/image name */}
113 |             {contentString ? (
114 |               <p className="bg-muted ml-auto w-fit rounded-3xl px-4 py-2 text-right whitespace-pre-wrap">
115 |                 {contentString}
116 |               </p>
117 |             ) : null}
118 |           </div>
119 |         )}
120 | 
121 |         <div
122 |           className={cn(
123 |             "ml-auto flex items-center gap-2 transition-opacity",
124 |             "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
125 |             isEditing && "opacity-100",
126 |           )}
127 |         >
128 |           <BranchSwitcher
129 |             branch={meta?.branch}
130 |             branchOptions={meta?.branchOptions}
131 |             onSelect={(branch) => thread.setBranch(branch)}
132 |             isLoading={isLoading}
133 |           />
134 |           <CommandBar
135 |             isLoading={isLoading}
136 |             content={contentString}
137 |             isEditing={isEditing}
138 |             setIsEditing={(c) => {
139 |               if (c) {
140 |                 setValue(contentString);
141 |               }
142 |               setIsEditing(c);
143 |             }}
144 |             handleSubmitEdit={handleSubmitEdit}
145 |             isHumanMessage={true}
146 |           />
147 |         </div>
148 |       </div>
149 |     </div>
150 |   );
151 | }
152 | 


--------------------------------------------------------------------------------
/src/components/thread/history/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/components/ui/button";
  2 | import { useThreads } from "@/providers/Thread";
  3 | import { Thread } from "@langchain/langgraph-sdk";
  4 | import { useEffect } from "react";
  5 | 
  6 | import { getContentString } from "../utils";
  7 | import { useQueryState, parseAsBoolean } from "nuqs";
  8 | import {
  9 |   Sheet,
 10 |   SheetContent,
 11 |   SheetHeader,
 12 |   SheetTitle,
 13 | } from "@/components/ui/sheet";
 14 | import { Skeleton } from "@/components/ui/skeleton";
 15 | import { PanelRightOpen, PanelRightClose } from "lucide-react";
 16 | import { useMediaQuery } from "@/hooks/useMediaQuery";
 17 | 
 18 | function ThreadList({
 19 |   threads,
 20 |   onThreadClick,
 21 | }: {
 22 |   threads: Thread[];
 23 |   onThreadClick?: (threadId: string) => void;
 24 | }) {
 25 |   const [threadId, setThreadId] = useQueryState("threadId");
 26 | 
 27 |   return (
 28 |     <div className="flex h-full w-full flex-col items-start justify-start gap-2 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
 29 |       {threads.map((t) => {
 30 |         let itemText = t.thread_id;
 31 |         if (
 32 |           typeof t.values === "object" &&
 33 |           t.values &&
 34 |           "messages" in t.values &&
 35 |           Array.isArray(t.values.messages) &&
 36 |           t.values.messages?.length > 0
 37 |         ) {
 38 |           const firstMessage = t.values.messages[0];
 39 |           itemText = getContentString(firstMessage.content);
 40 |         }
 41 |         return (
 42 |           <div
 43 |             key={t.thread_id}
 44 |             className="w-full px-1"
 45 |           >
 46 |             <Button
 47 |               variant="ghost"
 48 |               className="w-[280px] items-start justify-start text-left font-normal"
 49 |               onClick={(e) => {
 50 |                 e.preventDefault();
 51 |                 onThreadClick?.(t.thread_id);
 52 |                 if (t.thread_id === threadId) return;
 53 |                 setThreadId(t.thread_id);
 54 |               }}
 55 |             >
 56 |               <p className="truncate text-ellipsis">{itemText}</p>
 57 |             </Button>
 58 |           </div>
 59 |         );
 60 |       })}
 61 |     </div>
 62 |   );
 63 | }
 64 | 
 65 | function ThreadHistoryLoading() {
 66 |   return (
 67 |     <div className="flex h-full w-full flex-col items-start justify-start gap-2 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
 68 |       {Array.from({ length: 30 }).map((_, i) => (
 69 |         <Skeleton
 70 |           key={`skeleton-${i}`}
 71 |           className="h-10 w-[280px]"
 72 |         />
 73 |       ))}
 74 |     </div>
 75 |   );
 76 | }
 77 | 
 78 | export default function ThreadHistory() {
 79 |   const isLargeScreen = useMediaQuery("(min-width: 1024px)");
 80 |   const [chatHistoryOpen, setChatHistoryOpen] = useQueryState(
 81 |     "chatHistoryOpen",
 82 |     parseAsBoolean.withDefault(false),
 83 |   );
 84 | 
 85 |   const { getThreads, threads, setThreads, threadsLoading, setThreadsLoading } =
 86 |     useThreads();
 87 | 
 88 |   useEffect(() => {
 89 |     if (typeof window === "undefined") return;
 90 |     setThreadsLoading(true);
 91 |     getThreads()
 92 |       .then(setThreads)
 93 |       .catch(console.error)
 94 |       .finally(() => setThreadsLoading(false));
 95 |   }, []);
 96 | 
 97 |   return (
 98 |     <>
 99 |       <div className="shadow-inner-right hidden h-screen w-[300px] shrink-0 flex-col items-start justify-start gap-6 border-r-[1px] border-slate-300 lg:flex">
100 |         <div className="flex w-full items-center justify-between px-4 pt-1.5">
101 |           <Button
102 |             className="hover:bg-gray-100"
103 |             variant="ghost"
104 |             onClick={() => setChatHistoryOpen((p) => !p)}
105 |           >
106 |             {chatHistoryOpen ? (
107 |               <PanelRightOpen className="size-5" />
108 |             ) : (
109 |               <PanelRightClose className="size-5" />
110 |             )}
111 |           </Button>
112 |           <h1 className="text-xl font-semibold tracking-tight">
113 |             Thread History
114 |           </h1>
115 |         </div>
116 |         {threadsLoading ? (
117 |           <ThreadHistoryLoading />
118 |         ) : (
119 |           <ThreadList threads={threads} />
120 |         )}
121 |       </div>
122 |       <div className="lg:hidden">
123 |         <Sheet
124 |           open={!!chatHistoryOpen && !isLargeScreen}
125 |           onOpenChange={(open) => {
126 |             if (isLargeScreen) return;
127 |             setChatHistoryOpen(open);
128 |           }}
129 |         >
130 |           <SheetContent
131 |             side="left"
132 |             className="flex lg:hidden"
133 |           >
134 |             <SheetHeader>
135 |               <SheetTitle>Thread History</SheetTitle>
136 |             </SheetHeader>
137 |             <ThreadList
138 |               threads={threads}
139 |               onThreadClick={() => setChatHistoryOpen((o) => !o)}
140 |             />
141 |           </SheetContent>
142 |         </Sheet>
143 |       </div>
144 |     </>
145 |   );
146 | }
147 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | :root {
  8 |   --background: oklch(1 0 0);
  9 |   --foreground: oklch(0.145 0 0);
 10 |   --card: oklch(1 0 0);
 11 |   --card-foreground: oklch(0.145 0 0);
 12 |   --popover: oklch(1 0 0);
 13 |   --popover-foreground: oklch(0.145 0 0);
 14 |   --primary: oklch(0.205 0 0);
 15 |   --primary-foreground: oklch(0.985 0 0);
 16 |   --secondary: oklch(0.97 0 0);
 17 |   --secondary-foreground: oklch(0.205 0 0);
 18 |   --muted: oklch(0.97 0 0);
 19 |   --muted-foreground: oklch(0.556 0 0);
 20 |   --accent: oklch(0.97 0 0);
 21 |   --accent-foreground: oklch(0.205 0 0);
 22 |   --destructive: oklch(0.577 0.245 27.325);
 23 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 24 |   --border: oklch(0.922 0 0);
 25 |   --input: oklch(0.922 0 0);
 26 |   --ring: oklch(0.87 0 0);
 27 |   --chart-1: oklch(0.646 0.222 41.116);
 28 |   --chart-2: oklch(0.6 0.118 184.704);
 29 |   --chart-3: oklch(0.398 0.07 227.392);
 30 |   --chart-4: oklch(0.828 0.189 84.429);
 31 |   --chart-5: oklch(0.769 0.188 70.08);
 32 |   --radius: 0.625rem;
 33 |   --sidebar: oklch(0.985 0 0);
 34 |   --sidebar-foreground: oklch(0.145 0 0);
 35 |   --sidebar-primary: oklch(0.205 0 0);
 36 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 37 |   --sidebar-accent: oklch(0.97 0 0);
 38 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 39 |   --sidebar-border: oklch(0.922 0 0);
 40 |   --sidebar-ring: oklch(0.87 0 0);
 41 | }
 42 | 
 43 | .dark {
 44 |   --background: oklch(0.145 0 0);
 45 |   --foreground: oklch(0.985 0 0);
 46 |   --card: oklch(0.145 0 0);
 47 |   --card-foreground: oklch(0.985 0 0);
 48 |   --popover: oklch(0.145 0 0);
 49 |   --popover-foreground: oklch(0.985 0 0);
 50 |   --primary: oklch(0.985 0 0);
 51 |   --primary-foreground: oklch(0.205 0 0);
 52 |   --secondary: oklch(0.269 0 0);
 53 |   --secondary-foreground: oklch(0.985 0 0);
 54 |   --muted: oklch(0.269 0 0);
 55 |   --muted-foreground: oklch(0.708 0 0);
 56 |   --accent: oklch(0.269 0 0);
 57 |   --accent-foreground: oklch(0.985 0 0);
 58 |   --destructive: oklch(0.396 0.141 25.723);
 59 |   --destructive-foreground: oklch(0.637 0.237 25.331);
 60 |   --border: oklch(0.269 0 0);
 61 |   --input: oklch(0.269 0 0);
 62 |   --ring: oklch(0.439 0 0);
 63 |   --chart-1: oklch(0.488 0.243 264.376);
 64 |   --chart-2: oklch(0.696 0.17 162.48);
 65 |   --chart-3: oklch(0.769 0.188 70.08);
 66 |   --chart-4: oklch(0.627 0.265 303.9);
 67 |   --chart-5: oklch(0.645 0.246 16.439);
 68 |   --sidebar: oklch(0.205 0 0);
 69 |   --sidebar-foreground: oklch(0.985 0 0);
 70 |   --sidebar-primary: oklch(0.488 0.243 264.376);
 71 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 72 |   --sidebar-accent: oklch(0.269 0 0);
 73 |   --sidebar-accent-foreground: oklch(0.985 0 0);
 74 |   --sidebar-border: oklch(0.269 0 0);
 75 |   --sidebar-ring: oklch(0.439 0 0);
 76 | }
 77 | 
 78 | @theme inline {
 79 |   --color-background: var(--background);
 80 |   --color-foreground: var(--foreground);
 81 |   --color-card: var(--card);
 82 |   --color-card-foreground: var(--card-foreground);
 83 |   --color-popover: var(--popover);
 84 |   --color-popover-foreground: var(--popover-foreground);
 85 |   --color-primary: var(--primary);
 86 |   --color-primary-foreground: var(--primary-foreground);
 87 |   --color-secondary: var(--secondary);
 88 |   --color-secondary-foreground: var(--secondary-foreground);
 89 |   --color-muted: var(--muted);
 90 |   --color-muted-foreground: var(--muted-foreground);
 91 |   --color-accent: var(--accent);
 92 |   --color-accent-foreground: var(--accent-foreground);
 93 |   --color-destructive: var(--destructive);
 94 |   --color-destructive-foreground: var(--destructive-foreground);
 95 |   --color-border: var(--border);
 96 |   --color-input: var(--input);
 97 |   --color-ring: var(--ring);
 98 |   --color-chart-1: var(--chart-1);
 99 |   --color-chart-2: var(--chart-2);
100 |   --color-chart-3: var(--chart-3);
101 |   --color-chart-4: var(--chart-4);
102 |   --color-chart-5: var(--chart-5);
103 |   --radius-sm: calc(var(--radius) - 4px);
104 |   --radius-md: calc(var(--radius) - 2px);
105 |   --radius-lg: var(--radius);
106 |   --radius-xl: calc(var(--radius) + 4px);
107 |   --color-sidebar: var(--sidebar);
108 |   --color-sidebar-foreground: var(--sidebar-foreground);
109 |   --color-sidebar-primary: var(--sidebar-primary);
110 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
111 |   --color-sidebar-accent: var(--sidebar-accent);
112 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
113 |   --color-sidebar-border: var(--sidebar-border);
114 |   --color-sidebar-ring: var(--sidebar-ring);
115 | }
116 | 
117 | @layer base {
118 |   * {
119 |     @apply border-border outline-ring/50;
120 |   }
121 | 
122 |   body {
123 |     @apply bg-background text-foreground;
124 |   }
125 | 
126 |   :root {
127 |     --chart-1: 12 76% 61%;
128 |     --chart-2: 173 58% 39%;
129 |     --chart-3: 197 37% 24%;
130 |     --chart-4: 43 74% 66%;
131 |     --chart-5: 27 87% 67%;
132 |   }
133 | 
134 |   .dark {
135 |     --chart-1: 220 70% 50%;
136 |     --chart-2: 160 60% 45%;
137 |     --chart-3: 30 80% 55%;
138 |     --chart-4: 280 65% 60%;
139 |     --chart-5: 340 75% 55%;
140 |   }
141 | }
142 | 
143 | @layer utilities {
144 |   .shadow-inner-right {
145 |     box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
146 |   }
147 | 
148 |   .shadow-inner-left {
149 |     box-shadow: inset 9px 0 6px -1px rgb(0 0 0 / 0.02);
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/src/components/thread/artifact.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   HTMLAttributes,
  3 |   ReactNode,
  4 |   createContext,
  5 |   useCallback,
  6 |   useContext,
  7 |   useEffect,
  8 |   useId,
  9 |   useLayoutEffect,
 10 |   useRef,
 11 |   useState,
 12 | } from "react";
 13 | import { createPortal } from "react-dom";
 14 | 
 15 | type Setter<T> = (value: T | ((value: T) => T)) => void;
 16 | 
 17 | const ArtifactSlotContext = createContext<{
 18 |   open: [string | null, Setter<string | null>];
 19 |   mounted: [string | null, Setter<string | null>];
 20 | 
 21 |   title: [HTMLElement | null, Setter<HTMLElement | null>];
 22 |   content: [HTMLElement | null, Setter<HTMLElement | null>];
 23 | 
 24 |   context: [Record<string, unknown>, Setter<Record<string, unknown>>];
 25 | }>(null!);
 26 | 
 27 | /**
 28 |  * Headless component that will obtain the title and content of the artifact
 29 |  * and render them in place of the `ArtifactContent` and `ArtifactTitle` components via
 30 |  * React Portals.
 31 |  */
 32 | const ArtifactSlot = (props: {
 33 |   id: string;
 34 |   children?: ReactNode;
 35 |   title?: ReactNode;
 36 | }) => {
 37 |   const context = useContext(ArtifactSlotContext);
 38 | 
 39 |   const [ctxMounted, ctxSetMounted] = context.mounted;
 40 |   const [content] = context.content;
 41 |   const [title] = context.title;
 42 | 
 43 |   const isMounted = ctxMounted === props.id;
 44 |   const isEmpty = props.children == null && props.title == null;
 45 | 
 46 |   useEffect(() => {
 47 |     if (isEmpty) {
 48 |       ctxSetMounted((open) => (open === props.id ? null : open));
 49 |     }
 50 |   }, [isEmpty, ctxSetMounted, props.id]);
 51 | 
 52 |   if (!isMounted) return null;
 53 |   return (
 54 |     <>
 55 |       {title != null ? createPortal(<>{props.title}</>, title) : null}
 56 |       {content != null ? createPortal(<>{props.children}</>, content) : null}
 57 |     </>
 58 |   );
 59 | };
 60 | 
 61 | export function ArtifactContent(props: HTMLAttributes<HTMLDivElement>) {
 62 |   const context = useContext(ArtifactSlotContext);
 63 | 
 64 |   const [mounted] = context.mounted;
 65 |   const ref = useRef<HTMLDivElement>(null);
 66 |   const [, setStateRef] = context.content;
 67 | 
 68 |   useLayoutEffect(
 69 |     () => setStateRef?.(mounted ? ref.current : null),
 70 |     [setStateRef, mounted],
 71 |   );
 72 | 
 73 |   if (!mounted) return null;
 74 |   return (
 75 |     <div
 76 |       {...props}
 77 |       ref={ref}
 78 |     />
 79 |   );
 80 | }
 81 | 
 82 | export function ArtifactTitle(props: HTMLAttributes<HTMLDivElement>) {
 83 |   const context = useContext(ArtifactSlotContext);
 84 | 
 85 |   const ref = useRef<HTMLDivElement>(null);
 86 |   const [, setStateRef] = context.title;
 87 | 
 88 |   useLayoutEffect(() => setStateRef?.(ref.current), [setStateRef]);
 89 | 
 90 |   return (
 91 |     <div
 92 |       {...props}
 93 |       ref={ref}
 94 |     />
 95 |   );
 96 | }
 97 | 
 98 | export function ArtifactProvider(props: { children?: ReactNode }) {
 99 |   const content = useState<HTMLElement | null>(null);
100 |   const title = useState<HTMLElement | null>(null);
101 | 
102 |   const open = useState<string | null>(null);
103 |   const mounted = useState<string | null>(null);
104 |   const context = useState<Record<string, unknown>>({});
105 | 
106 |   return (
107 |     <ArtifactSlotContext.Provider
108 |       value={{ open, mounted, title, content, context }}
109 |     >
110 |       {props.children}
111 |     </ArtifactSlotContext.Provider>
112 |   );
113 | }
114 | 
115 | /**
116 |  * Provides a value to be passed into `meta.artifact` field
117 |  * of the `LoadExternalComponent` component, to be consumed by the `useArtifact` hook
118 |  * on the generative UI side.
119 |  */
120 | export function useArtifact() {
121 |   const id = useId();
122 |   const context = useContext(ArtifactSlotContext);
123 |   const [ctxOpen, ctxSetOpen] = context.open;
124 |   const [ctxContext, ctxSetContext] = context.context;
125 |   const [, ctxSetMounted] = context.mounted;
126 | 
127 |   const open = ctxOpen === id;
128 |   const setOpen = useCallback(
129 |     (value: boolean | ((value: boolean) => boolean)) => {
130 |       if (typeof value === "boolean") {
131 |         ctxSetOpen(value ? id : null);
132 |       } else {
133 |         ctxSetOpen((open) => (open === id ? null : id));
134 |       }
135 | 
136 |       ctxSetMounted(id);
137 |     },
138 |     [ctxSetOpen, ctxSetMounted, id],
139 |   );
140 | 
141 |   const ArtifactContent = useCallback(
142 |     (props: { title?: React.ReactNode; children: React.ReactNode }) => {
143 |       return (
144 |         <ArtifactSlot
145 |           id={id}
146 |           title={props.title}
147 |         >
148 |           {props.children}
149 |         </ArtifactSlot>
150 |       );
151 |     },
152 |     [id],
153 |   );
154 | 
155 |   return [
156 |     ArtifactContent,
157 |     { open, setOpen, context: ctxContext, setContext: ctxSetContext },
158 |   ] as [
159 |     typeof ArtifactContent,
160 |     {
161 |       open: typeof open;
162 |       setOpen: typeof setOpen;
163 |       context: typeof ctxContext;
164 |       setContext: typeof ctxSetContext;
165 |     },
166 |   ];
167 | }
168 | 
169 | /**
170 |  * General hook for detecting if any artifact is open.
171 |  */
172 | export function useArtifactOpen() {
173 |   const context = useContext(ArtifactSlotContext);
174 |   const [ctxOpen, setCtxOpen] = context.open;
175 | 
176 |   const open = ctxOpen !== null;
177 |   const onClose = useCallback(() => setCtxOpen(null), [setCtxOpen]);
178 | 
179 |   return [open, onClose] as const;
180 | }
181 | 
182 | /**
183 |  * Artifacts may at their discretion provide additional context
184 |  * that will be used when creating a new run.
185 |  */
186 | export function useArtifactContext() {
187 |   const context = useContext(ArtifactSlotContext);
188 |   return context.context;
189 | }
190 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 98 51">
2 | <path
3 |   fillRule="evenodd"
4 |   clipRule="evenodd"
5 |   d="M25.5144 0.394531H73.3011C86.9178 0.394531 97.9949 11.5154 97.9949 25.1847C97.9949 38.8539 86.9178 49.9748 73.3011 49.9748H25.5144C11.8977 49.9748 0.820557 38.8539 0.820557 25.1847C0.820557 11.5154 11.8977 0.394531 25.5144 0.394531ZM47.4544 38.8228C48.0543 39.454 48.9423 39.4228 49.7291 39.2592L49.7369 39.2631C50.1021 38.9659 49.583 38.5896 49.0873 38.2302C48.79 38.0146 48.5012 37.8052 48.4165 37.6226C48.6908 37.2878 47.8793 36.5277 47.2475 35.936C46.9822 35.6875 46.7487 35.4688 46.6404 35.3236C46.1908 34.8341 46.0101 34.2163 45.8283 33.5949C45.7077 33.1826 45.5866 32.7687 45.3862 32.3895C44.1516 29.5216 42.7377 26.6771 40.7552 24.2495C39.4811 22.636 38.027 21.1911 36.5723 19.7457C35.6346 18.8139 34.6967 17.8819 33.8066 16.9044C32.8908 15.9585 32.3396 14.7932 31.7874 13.6259C31.3252 12.6488 30.8624 11.6702 30.1844 10.8179C28.1317 7.77859 21.6506 6.94861 20.7002 11.2427C20.7041 11.3751 20.6613 11.4609 20.5444 11.5466C20.0186 11.9324 19.5512 12.3688 19.1578 12.8987C18.1958 14.243 18.0478 16.5225 19.2474 17.7305C19.2492 17.7046 19.2508 17.6787 19.2525 17.653C19.2926 17.043 19.3301 16.4729 19.8122 16.0355C20.7392 16.8343 22.1452 17.1187 23.2202 16.5225C24.5164 18.3826 24.9292 20.6311 25.3435 22.8873C25.6886 24.7667 26.0347 26.6515 26.8931 28.3214C26.9109 28.351 26.9286 28.3805 26.9464 28.4101C27.451 29.2506 27.9637 30.1046 28.6108 30.8386C28.8459 31.2032 29.3286 31.5967 29.8104 31.9895C30.4462 32.5079 31.0805 33.025 31.1425 33.4727C31.1453 33.6676 31.1445 33.865 31.1436 34.0636C31.1386 35.2395 31.1334 36.4572 31.8864 37.4239C32.3032 38.2695 31.2827 39.1189 30.4609 39.0137C30.0103 39.0762 29.518 38.9574 29.0292 38.8395C28.3604 38.6781 27.6981 38.5182 27.158 38.8267C27.0065 38.9907 26.7889 38.9965 26.5702 39.0022C26.311 39.0091 26.0503 39.016 25.896 39.2865C25.8644 39.3669 25.7903 39.4577 25.7133 39.5521C25.5443 39.7594 25.3611 39.9841 25.5806 40.1554C25.6002 40.1405 25.6198 40.1255 25.6393 40.1106C25.9718 39.8568 26.2885 39.6149 26.7374 39.7658C26.6777 40.0975 26.8918 40.1863 27.1058 40.2751C27.1432 40.2906 27.1805 40.3062 27.2164 40.323C27.2141 40.4 27.199 40.4777 27.1839 40.5548C27.1479 40.739 27.1126 40.9196 27.2554 41.0789C27.3232 41.0099 27.3831 40.9325 27.4431 40.8548C27.5901 40.6649 27.7378 40.4739 28.0032 40.4048C28.5871 41.1849 29.1753 40.8609 29.9134 40.4543C30.7458 39.9958 31.7688 39.4322 33.1912 40.2294C32.646 40.2022 32.1591 40.2684 31.793 40.7204C31.7034 40.8217 31.6255 40.9386 31.7852 41.0711C32.6268 40.5256 32.9769 40.7217 33.3065 40.9062C33.5444 41.0394 33.7715 41.1666 34.165 41.0049C34.258 40.9563 34.351 40.9062 34.4441 40.8559C35.0759 40.5149 35.7167 40.169 36.4669 40.2879C35.9065 40.4496 35.7072 40.8049 35.4896 41.1928C35.382 41.3845 35.2699 41.5843 35.1075 41.7725C35.0219 41.8582 34.9829 41.9595 35.0803 42.1037C36.2536 42.0061 36.6969 41.7085 37.2959 41.3064C37.5817 41.1145 37.903 40.8989 38.3559 40.6698C38.8566 40.3614 39.3573 40.5586 39.8425 40.7498C40.3689 40.9571 40.877 41.1573 41.3472 40.697C41.4957 40.557 41.6819 40.5553 41.8675 40.5536C41.9349 40.553 42.0023 40.5523 42.0678 40.5451C41.9215 39.7609 41.0961 39.7702 40.2582 39.7795C39.2891 39.7903 38.3033 39.8014 38.3325 38.5851C39.233 37.9699 39.2413 36.9021 39.2492 35.8929C39.2511 35.6493 39.2529 35.4091 39.2673 35.1795C39.9296 35.5489 40.6302 35.8376 41.3264 36.1246C41.9813 36.3945 42.6323 36.6628 43.244 36.9953C43.8828 38.024 44.8799 39.3878 46.2081 39.2982C46.2431 39.193 46.2743 39.1033 46.3132 38.9981C46.3898 39.0115 46.4706 39.032 46.5529 39.0528C46.9014 39.1412 47.2748 39.2358 47.4544 38.8228ZM73.48 27.1315C74.249 27.899 75.2921 28.3302 76.3797 28.3302C77.4673 28.3302 78.5103 27.899 79.2794 27.1315C80.0484 26.364 80.4804 25.323 80.4804 24.2375C80.4804 23.1521 80.0484 22.1111 79.2794 21.3436C78.5103 20.5761 77.4673 20.1449 76.3797 20.1449C75.871 20.1449 75.3721 20.2392 74.9064 20.4181L72.5533 16.9819L70.9152 18.1046L73.28 21.558C72.6365 22.2995 72.2789 23.2501 72.2789 24.2375C72.2789 25.323 72.711 26.364 73.48 27.1315ZM66.1213 16.0159C66.6967 16.3004 67.331 16.446 67.9731 16.441C68.8492 16.4343 69.7002 16.1477 70.4012 15.6232C71.1022 15.0987 71.6165 14.3639 71.8687 13.5265C72.1209 12.6891 72.0977 11.7931 71.8025 10.9698C71.5074 10.1465 70.9558 9.43917 70.2285 8.95149C69.6956 8.59407 69.0859 8.36657 68.4487 8.28729C67.8115 8.20802 67.1646 8.27919 66.56 8.49509C65.9554 8.71098 65.4101 9.06555 64.9679 9.53025C64.5257 9.99495 64.1991 10.5568 64.0142 11.1705C63.8294 11.7843 63.7916 12.4327 63.9038 13.0637C64.016 13.6947 64.2751 14.2906 64.6603 14.8034C65.0455 15.3161 65.5459 15.7315 66.1213 16.0159ZM66.1213 39.7813C66.6967 40.0657 67.331 40.2113 67.9731 40.2064C68.8492 40.1996 69.7002 39.913 70.4012 39.3885C71.1022 38.864 71.6165 38.1292 71.8687 37.2918C72.1209 36.4544 72.0977 35.5584 71.8025 34.7351C71.5074 33.9118 70.9558 33.2045 70.2285 32.7168C69.6956 32.3594 69.0859 32.1319 68.4487 32.0526C67.8115 31.9734 67.1646 32.0445 66.56 32.2604C65.9554 32.4763 65.4101 32.8309 64.9679 33.2956C64.5257 33.7603 64.1991 34.3221 64.0142 34.9359C63.8294 35.5496 63.7916 36.1981 63.9038 36.8291C64.016 37.4601 64.2751 38.0559 64.6603 38.5687C65.0455 39.0815 65.5459 39.4968 66.1213 39.7813ZM69.8934 25.2555V23.2207H63.6171C63.4592 22.6038 63.1581 22.0323 62.738 21.5523L65.0993 18.0525L63.382 16.9131L61.0207 20.4128C60.5879 20.2564 60.1317 20.1738 59.6714 20.1686C58.5869 20.1686 57.5469 20.5974 56.7801 21.3606C56.0133 22.1237 55.5825 23.1588 55.5825 24.2381C55.5825 25.3174 56.0133 26.3525 56.7801 27.1156C57.5469 27.8788 58.5869 28.3076 59.6714 28.3076C60.1317 28.3024 60.5879 28.2198 61.0207 28.0634L63.382 31.5631L65.0788 30.4237L62.738 26.9239C63.1581 26.4439 63.4592 25.8724 63.6171 25.2555H69.8934Z"
6 |   fill="#264849"
7 | />
8 | </svg>


--------------------------------------------------------------------------------
/src/components/icons/langgraph.tsx:
--------------------------------------------------------------------------------
 1 | export function LangGraphLogoSVG({
 2 |   className,
 3 |   width,
 4 |   height,
 5 | }: {
 6 |   width?: number;
 7 |   height?: number;
 8 |   className?: string;
 9 | }) {
10 |   return (
11 |     <svg
12 |       width={width}
13 |       height={height}
14 |       viewBox="0 0 98 51"
15 |       fill="none"
16 |       xmlns="http://www.w3.org/2000/svg"
17 |       className={className}
18 |     >
19 |       <path
20 |         fillRule="evenodd"
21 |         clipRule="evenodd"
22 |         d="M25.5144 0.394531H73.3011C86.9178 0.394531 97.9949 11.5154 97.9949 25.1847C97.9949 38.8539 86.9178 49.9748 73.3011 49.9748H25.5144C11.8977 49.9748 0.820557 38.8539 0.820557 25.1847C0.820557 11.5154 11.8977 0.394531 25.5144 0.394531ZM47.4544 38.8228C48.0543 39.454 48.9423 39.4228 49.7291 39.2592L49.7369 39.2631C50.1021 38.9659 49.583 38.5896 49.0873 38.2302C48.79 38.0146 48.5012 37.8052 48.4165 37.6226C48.6908 37.2878 47.8793 36.5277 47.2475 35.936C46.9822 35.6875 46.7487 35.4688 46.6404 35.3236C46.1908 34.8341 46.0101 34.2163 45.8283 33.5949C45.7077 33.1826 45.5866 32.7687 45.3862 32.3895C44.1516 29.5216 42.7377 26.6771 40.7552 24.2495C39.4811 22.636 38.027 21.1911 36.5723 19.7457C35.6346 18.8139 34.6967 17.8819 33.8066 16.9044C32.8908 15.9585 32.3396 14.7932 31.7874 13.6259C31.3252 12.6488 30.8624 11.6702 30.1844 10.8179C28.1317 7.77859 21.6506 6.94861 20.7002 11.2427C20.7041 11.3751 20.6613 11.4609 20.5444 11.5466C20.0186 11.9324 19.5512 12.3688 19.1578 12.8987C18.1958 14.243 18.0478 16.5225 19.2474 17.7305C19.2492 17.7046 19.2508 17.6787 19.2525 17.653C19.2926 17.043 19.3301 16.4729 19.8122 16.0355C20.7392 16.8343 22.1452 17.1187 23.2202 16.5225C24.5164 18.3826 24.9292 20.6311 25.3435 22.8873C25.6886 24.7667 26.0347 26.6515 26.8931 28.3214C26.9109 28.351 26.9286 28.3805 26.9464 28.4101C27.451 29.2506 27.9637 30.1046 28.6108 30.8386C28.8459 31.2032 29.3286 31.5967 29.8104 31.9895C30.4462 32.5079 31.0805 33.025 31.1425 33.4727C31.1453 33.6676 31.1445 33.865 31.1436 34.0636C31.1386 35.2395 31.1334 36.4572 31.8864 37.4239C32.3032 38.2695 31.2827 39.1189 30.4609 39.0137C30.0103 39.0762 29.518 38.9574 29.0292 38.8395C28.3604 38.6781 27.6981 38.5182 27.158 38.8267C27.0065 38.9907 26.7889 38.9965 26.5702 39.0022C26.311 39.0091 26.0503 39.016 25.896 39.2865C25.8644 39.3669 25.7903 39.4577 25.7133 39.5521C25.5443 39.7594 25.3611 39.9841 25.5806 40.1554C25.6002 40.1405 25.6198 40.1255 25.6393 40.1106C25.9718 39.8568 26.2885 39.6149 26.7374 39.7658C26.6777 40.0975 26.8918 40.1863 27.1058 40.2751C27.1432 40.2906 27.1805 40.3062 27.2164 40.323C27.2141 40.4 27.199 40.4777 27.1839 40.5548C27.1479 40.739 27.1126 40.9196 27.2554 41.0789C27.3232 41.0099 27.3831 40.9325 27.4431 40.8548C27.5901 40.6649 27.7378 40.4739 28.0032 40.4048C28.5871 41.1849 29.1753 40.8609 29.9134 40.4543C30.7458 39.9958 31.7688 39.4322 33.1912 40.2294C32.646 40.2022 32.1591 40.2684 31.793 40.7204C31.7034 40.8217 31.6255 40.9386 31.7852 41.0711C32.6268 40.5256 32.9769 40.7217 33.3065 40.9062C33.5444 41.0394 33.7715 41.1666 34.165 41.0049C34.258 40.9563 34.351 40.9062 34.4441 40.8559C35.0759 40.5149 35.7167 40.169 36.4669 40.2879C35.9065 40.4496 35.7072 40.8049 35.4896 41.1928C35.382 41.3845 35.2699 41.5843 35.1075 41.7725C35.0219 41.8582 34.9829 41.9595 35.0803 42.1037C36.2536 42.0061 36.6969 41.7085 37.2959 41.3064C37.5817 41.1145 37.903 40.8989 38.3559 40.6698C38.8566 40.3614 39.3573 40.5586 39.8425 40.7498C40.3689 40.9571 40.877 41.1573 41.3472 40.697C41.4957 40.557 41.6819 40.5553 41.8675 40.5536C41.9349 40.553 42.0023 40.5523 42.0678 40.5451C41.9215 39.7609 41.0961 39.7702 40.2582 39.7795C39.2891 39.7903 38.3033 39.8014 38.3325 38.5851C39.233 37.9699 39.2413 36.9021 39.2492 35.8929C39.2511 35.6493 39.2529 35.4091 39.2673 35.1795C39.9296 35.5489 40.6302 35.8376 41.3264 36.1246C41.9813 36.3945 42.6323 36.6628 43.244 36.9953C43.8828 38.024 44.8799 39.3878 46.2081 39.2982C46.2431 39.193 46.2743 39.1033 46.3132 38.9981C46.3898 39.0115 46.4706 39.032 46.5529 39.0528C46.9014 39.1412 47.2748 39.2358 47.4544 38.8228ZM73.48 27.1315C74.249 27.899 75.2921 28.3302 76.3797 28.3302C77.4673 28.3302 78.5103 27.899 79.2794 27.1315C80.0484 26.364 80.4804 25.323 80.4804 24.2375C80.4804 23.1521 80.0484 22.1111 79.2794 21.3436C78.5103 20.5761 77.4673 20.1449 76.3797 20.1449C75.871 20.1449 75.3721 20.2392 74.9064 20.4181L72.5533 16.9819L70.9152 18.1046L73.28 21.558C72.6365 22.2995 72.2789 23.2501 72.2789 24.2375C72.2789 25.323 72.711 26.364 73.48 27.1315ZM66.1213 16.0159C66.6967 16.3004 67.331 16.446 67.9731 16.441C68.8492 16.4343 69.7002 16.1477 70.4012 15.6232C71.1022 15.0987 71.6165 14.3639 71.8687 13.5265C72.1209 12.6891 72.0977 11.7931 71.8025 10.9698C71.5074 10.1465 70.9558 9.43917 70.2285 8.95149C69.6956 8.59407 69.0859 8.36657 68.4487 8.28729C67.8115 8.20802 67.1646 8.27919 66.56 8.49509C65.9554 8.71098 65.4101 9.06555 64.9679 9.53025C64.5257 9.99495 64.1991 10.5568 64.0142 11.1705C63.8294 11.7843 63.7916 12.4327 63.9038 13.0637C64.016 13.6947 64.2751 14.2906 64.6603 14.8034C65.0455 15.3161 65.5459 15.7315 66.1213 16.0159ZM66.1213 39.7813C66.6967 40.0657 67.331 40.2113 67.9731 40.2064C68.8492 40.1996 69.7002 39.913 70.4012 39.3885C71.1022 38.864 71.6165 38.1292 71.8687 37.2918C72.1209 36.4544 72.0977 35.5584 71.8025 34.7351C71.5074 33.9118 70.9558 33.2045 70.2285 32.7168C69.6956 32.3594 69.0859 32.1319 68.4487 32.0526C67.8115 31.9734 67.1646 32.0445 66.56 32.2604C65.9554 32.4763 65.4101 32.8309 64.9679 33.2956C64.5257 33.7603 64.1991 34.3221 64.0142 34.9359C63.8294 35.5496 63.7916 36.1981 63.9038 36.8291C64.016 37.4601 64.2751 38.0559 64.6603 38.5687C65.0455 39.0815 65.5459 39.4968 66.1213 39.7813ZM69.8934 25.2555V23.2207H63.6171C63.4592 22.6038 63.1581 22.0323 62.738 21.5523L65.0993 18.0525L63.382 16.9131L61.0207 20.4128C60.5879 20.2564 60.1317 20.1738 59.6714 20.1686C58.5869 20.1686 57.5469 20.5974 56.7801 21.3606C56.0133 22.1237 55.5825 23.1588 55.5825 24.2381C55.5825 25.3174 56.0133 26.3525 56.7801 27.1156C57.5469 27.8788 58.5869 28.3076 59.6714 28.3076C60.1317 28.3024 60.5879 28.2198 61.0207 28.0634L63.382 31.5631L65.0788 30.4237L62.738 26.9239C63.1581 26.4439 63.4592 25.8724 63.6171 25.2555H69.8934Z"
23 |         fill="#264849"
24 |       />
25 |     </svg>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/generic-interrupt.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { motion, AnimatePresence } from "framer-motion";
  3 | import { ChevronDown, ChevronUp } from "lucide-react";
  4 | 
  5 | function isComplexValue(value: any): boolean {
  6 |   return Array.isArray(value) || (typeof value === "object" && value !== null);
  7 | }
  8 | 
  9 | function isUrl(value: any): boolean {
 10 |   if (typeof value !== "string") return false;
 11 |   try {
 12 |     new URL(value);
 13 |     return value.startsWith("http://") || value.startsWith("https://");
 14 |   } catch {
 15 |     return false;
 16 |   }
 17 | }
 18 | 
 19 | function renderInterruptStateItem(value: any): React.ReactNode {
 20 |   if (isComplexValue(value)) {
 21 |     return (
 22 |       <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm">
 23 |         {JSON.stringify(value, null, 2)}
 24 |       </code>
 25 |     );
 26 |   } else if (isUrl(value)) {
 27 |     return (
 28 |       <a
 29 |         href={value}
 30 |         target="_blank"
 31 |         rel="noopener noreferrer"
 32 |         className="break-all text-blue-600 underline hover:text-blue-800"
 33 |       >
 34 |         {value}
 35 |       </a>
 36 |     );
 37 |   } else {
 38 |     return String(value);
 39 |   }
 40 | }
 41 | 
 42 | export function GenericInterruptView({
 43 |   interrupt,
 44 | }: {
 45 |   interrupt: Record<string, any> | Record<string, any>[];
 46 | }) {
 47 |   const [isExpanded, setIsExpanded] = useState(false);
 48 | 
 49 |   const contentStr = JSON.stringify(interrupt, null, 2);
 50 |   const contentLines = contentStr.split("\n");
 51 |   const shouldTruncate = contentLines.length > 4 || contentStr.length > 500;
 52 | 
 53 |   // Function to truncate long string values (but preserve URLs)
 54 |   const truncateValue = (value: any): any => {
 55 |     if (typeof value === "string" && value.length > 100) {
 56 |       // Don't truncate URLs so they remain clickable
 57 |       if (isUrl(value)) {
 58 |         return value;
 59 |       }
 60 |       return value.substring(0, 100) + "...";
 61 |     }
 62 | 
 63 |     if (Array.isArray(value) && !isExpanded) {
 64 |       return value.slice(0, 2).map(truncateValue);
 65 |     }
 66 | 
 67 |     if (isComplexValue(value) && !isExpanded) {
 68 |       const strValue = JSON.stringify(value, null, 2);
 69 |       if (strValue.length > 100) {
 70 |         // Return plain text for truncated content instead of a JSON object
 71 |         return `Truncated ${strValue.length} characters...`;
 72 |       }
 73 |     }
 74 | 
 75 |     return value;
 76 |   };
 77 | 
 78 |   // Process entries based on expanded state
 79 |   const processEntries = () => {
 80 |     if (Array.isArray(interrupt)) {
 81 |       return isExpanded ? interrupt : interrupt.slice(0, 5);
 82 |     } else {
 83 |       const entries = Object.entries(interrupt);
 84 |       if (!isExpanded && shouldTruncate) {
 85 |         // When collapsed, process each value to potentially truncate it
 86 |         return entries.map(([key, value]) => [key, truncateValue(value)]);
 87 |       }
 88 |       return entries;
 89 |     }
 90 |   };
 91 | 
 92 |   const displayEntries = processEntries();
 93 | 
 94 |   return (
 95 |     <div className="overflow-hidden rounded-lg border border-gray-200">
 96 |       <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
 97 |         <div className="flex flex-wrap items-center justify-between gap-2">
 98 |           <h3 className="font-medium text-gray-900">Human Interrupt</h3>
 99 |         </div>
100 |       </div>
101 |       <motion.div
102 |         className="min-w-full bg-gray-100"
103 |         initial={false}
104 |         animate={{ height: "auto" }}
105 |         transition={{ duration: 0.3 }}
106 |       >
107 |         <div className="p-3">
108 |           <AnimatePresence
109 |             mode="wait"
110 |             initial={false}
111 |           >
112 |             <motion.div
113 |               key={isExpanded ? "expanded" : "collapsed"}
114 |               initial={{ opacity: 0, y: 20 }}
115 |               animate={{ opacity: 1, y: 0 }}
116 |               exit={{ opacity: 0, y: -20 }}
117 |               transition={{ duration: 0.2 }}
118 |               style={{
119 |                 maxHeight: isExpanded ? "none" : "500px",
120 |                 overflow: "auto",
121 |               }}
122 |             >
123 |               <table className="min-w-full divide-y divide-gray-200">
124 |                 <tbody className="divide-y divide-gray-200">
125 |                   {displayEntries.map((item, argIdx) => {
126 |                     const [key, value] = Array.isArray(interrupt)
127 |                       ? [argIdx.toString(), item]
128 |                       : (item as [string, any]);
129 |                     return (
130 |                       <tr key={argIdx}>
131 |                         <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
132 |                           {key}
133 |                         </td>
134 |                         <td className="px-4 py-2 text-sm text-gray-500">
135 |                           {renderInterruptStateItem(value)}
136 |                         </td>
137 |                       </tr>
138 |                     );
139 |                   })}
140 |                 </tbody>
141 |               </table>
142 |             </motion.div>
143 |           </AnimatePresence>
144 |         </div>
145 |         {(shouldTruncate ||
146 |           (Array.isArray(interrupt) && interrupt.length > 5)) && (
147 |           <motion.button
148 |             onClick={() => setIsExpanded(!isExpanded)}
149 |             className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
150 |             initial={{ scale: 1 }}
151 |             whileHover={{ scale: 1.02 }}
152 |             whileTap={{ scale: 0.98 }}
153 |           >
154 |             {isExpanded ? <ChevronUp /> : <ChevronDown />}
155 |           </motion.button>
156 |         )}
157 |       </motion.div>
158 |     </div>
159 |   );
160 | }
161 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/shared.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   XIcon,
  3 |   SendHorizontal,
  4 |   RefreshCcw,
  5 |   Pencil,
  6 |   Copy,
  7 |   CopyCheck,
  8 |   ChevronLeft,
  9 |   ChevronRight,
 10 | } from "lucide-react";
 11 | import { TooltipIconButton } from "../tooltip-icon-button";
 12 | import { AnimatePresence, motion } from "framer-motion";
 13 | import { useState } from "react";
 14 | import { Button } from "@/components/ui/button";
 15 | 
 16 | function ContentCopyable({
 17 |   content,
 18 |   disabled,
 19 | }: {
 20 |   content: string;
 21 |   disabled: boolean;
 22 | }) {
 23 |   const [copied, setCopied] = useState(false);
 24 | 
 25 |   const handleCopy = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 26 |     e.stopPropagation();
 27 |     navigator.clipboard.writeText(content);
 28 |     setCopied(true);
 29 |     setTimeout(() => setCopied(false), 2000);
 30 |   };
 31 | 
 32 |   return (
 33 |     <TooltipIconButton
 34 |       onClick={(e) => handleCopy(e)}
 35 |       variant="ghost"
 36 |       tooltip="Copy content"
 37 |       disabled={disabled}
 38 |     >
 39 |       <AnimatePresence
 40 |         mode="wait"
 41 |         initial={false}
 42 |       >
 43 |         {copied ? (
 44 |           <motion.div
 45 |             key="check"
 46 |             initial={{ opacity: 0, scale: 0.8 }}
 47 |             animate={{ opacity: 1, scale: 1 }}
 48 |             exit={{ opacity: 0, scale: 0.8 }}
 49 |             transition={{ duration: 0.15 }}
 50 |           >
 51 |             <CopyCheck className="text-green-500" />
 52 |           </motion.div>
 53 |         ) : (
 54 |           <motion.div
 55 |             key="copy"
 56 |             initial={{ opacity: 0, scale: 0.8 }}
 57 |             animate={{ opacity: 1, scale: 1 }}
 58 |             exit={{ opacity: 0, scale: 0.8 }}
 59 |             transition={{ duration: 0.15 }}
 60 |           >
 61 |             <Copy />
 62 |           </motion.div>
 63 |         )}
 64 |       </AnimatePresence>
 65 |     </TooltipIconButton>
 66 |   );
 67 | }
 68 | 
 69 | export function BranchSwitcher({
 70 |   branch,
 71 |   branchOptions,
 72 |   onSelect,
 73 |   isLoading,
 74 | }: {
 75 |   branch: string | undefined;
 76 |   branchOptions: string[] | undefined;
 77 |   onSelect: (branch: string) => void;
 78 |   isLoading: boolean;
 79 | }) {
 80 |   if (!branchOptions || !branch) return null;
 81 |   const index = branchOptions.indexOf(branch);
 82 | 
 83 |   return (
 84 |     <div className="flex items-center gap-2">
 85 |       <Button
 86 |         variant="ghost"
 87 |         size="icon"
 88 |         className="size-6 p-1"
 89 |         onClick={() => {
 90 |           const prevBranch = branchOptions[index - 1];
 91 |           if (!prevBranch) return;
 92 |           onSelect(prevBranch);
 93 |         }}
 94 |         disabled={isLoading}
 95 |       >
 96 |         <ChevronLeft />
 97 |       </Button>
 98 |       <span className="text-sm">
 99 |         {index + 1} / {branchOptions.length}
100 |       </span>
101 |       <Button
102 |         variant="ghost"
103 |         size="icon"
104 |         className="size-6 p-1"
105 |         onClick={() => {
106 |           const nextBranch = branchOptions[index + 1];
107 |           if (!nextBranch) return;
108 |           onSelect(nextBranch);
109 |         }}
110 |         disabled={isLoading}
111 |       >
112 |         <ChevronRight />
113 |       </Button>
114 |     </div>
115 |   );
116 | }
117 | 
118 | export function CommandBar({
119 |   content,
120 |   isHumanMessage,
121 |   isAiMessage,
122 |   isEditing,
123 |   setIsEditing,
124 |   handleSubmitEdit,
125 |   handleRegenerate,
126 |   isLoading,
127 | }: {
128 |   content: string;
129 |   isHumanMessage?: boolean;
130 |   isAiMessage?: boolean;
131 |   isEditing?: boolean;
132 |   setIsEditing?: React.Dispatch<React.SetStateAction<boolean>>;
133 |   handleSubmitEdit?: () => void;
134 |   handleRegenerate?: () => void;
135 |   isLoading: boolean;
136 | }) {
137 |   if (isHumanMessage && isAiMessage) {
138 |     throw new Error(
139 |       "Can only set one of isHumanMessage or isAiMessage to true, not both.",
140 |     );
141 |   }
142 | 
143 |   if (!isHumanMessage && !isAiMessage) {
144 |     throw new Error(
145 |       "One of isHumanMessage or isAiMessage must be set to true.",
146 |     );
147 |   }
148 | 
149 |   if (
150 |     isHumanMessage &&
151 |     (isEditing === undefined ||
152 |       setIsEditing === undefined ||
153 |       handleSubmitEdit === undefined)
154 |   ) {
155 |     throw new Error(
156 |       "If isHumanMessage is true, all of isEditing, setIsEditing, and handleSubmitEdit must be set.",
157 |     );
158 |   }
159 | 
160 |   const showEdit =
161 |     isHumanMessage &&
162 |     isEditing !== undefined &&
163 |     !!setIsEditing &&
164 |     !!handleSubmitEdit;
165 | 
166 |   if (isHumanMessage && isEditing && !!setIsEditing && !!handleSubmitEdit) {
167 |     return (
168 |       <div className="flex items-center gap-2">
169 |         <TooltipIconButton
170 |           disabled={isLoading}
171 |           tooltip="Cancel edit"
172 |           variant="ghost"
173 |           onClick={() => {
174 |             setIsEditing(false);
175 |           }}
176 |         >
177 |           <XIcon />
178 |         </TooltipIconButton>
179 |         <TooltipIconButton
180 |           disabled={isLoading}
181 |           tooltip="Submit"
182 |           variant="secondary"
183 |           onClick={handleSubmitEdit}
184 |         >
185 |           <SendHorizontal />
186 |         </TooltipIconButton>
187 |       </div>
188 |     );
189 |   }
190 | 
191 |   return (
192 |     <div className="flex items-center gap-2">
193 |       <ContentCopyable
194 |         content={content}
195 |         disabled={isLoading}
196 |       />
197 |       {isAiMessage && !!handleRegenerate && (
198 |         <TooltipIconButton
199 |           disabled={isLoading}
200 |           tooltip="Refresh"
201 |           variant="ghost"
202 |           onClick={handleRegenerate}
203 |         >
204 |           <RefreshCcw />
205 |         </TooltipIconButton>
206 |       )}
207 |       {showEdit && (
208 |         <TooltipIconButton
209 |           disabled={isLoading}
210 |           tooltip="Edit"
211 |           variant="ghost"
212 |           onClick={() => {
213 |             setIsEditing?.(true);
214 |           }}
215 |         >
216 |           <Pencil />
217 |         </TooltipIconButton>
218 |       )}
219 |     </div>
220 |   );
221 | }
222 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/utils.ts:
--------------------------------------------------------------------------------
  1 | import { BaseMessage, isBaseMessage } from "@langchain/core/messages";
  2 | import { format } from "date-fns";
  3 | import { startCase } from "lodash";
  4 | import {
  5 |   Action,
  6 |   Decision,
  7 |   DecisionWithEdits,
  8 |   HITLRequest,
  9 |   SubmitType,
 10 | } from "./types";
 11 | 
 12 | export function prettifyText(action: string) {
 13 |   return startCase(action.replace(/_/g, " "));
 14 | }
 15 | 
 16 | export function isArrayOfMessages(
 17 |   value: Record<string, any>[],
 18 | ): value is BaseMessage[] {
 19 |   if (
 20 |     value.every(isBaseMessage) ||
 21 |     (Array.isArray(value) &&
 22 |       value.every(
 23 |         (v) =>
 24 |           typeof v === "object" &&
 25 |           "id" in v &&
 26 |           "type" in v &&
 27 |           "content" in v &&
 28 |           "additional_kwargs" in v,
 29 |       ))
 30 |   ) {
 31 |     return true;
 32 |   }
 33 |   return false;
 34 | }
 35 | 
 36 | export function baseMessageObject(item: unknown): string {
 37 |   if (isBaseMessage(item)) {
 38 |     const contentText =
 39 |       typeof item.content === "string"
 40 |         ? item.content
 41 |         : JSON.stringify(item.content, null);
 42 |     let toolCallText = "";
 43 |     if ("tool_calls" in item) {
 44 |       toolCallText = JSON.stringify(item.tool_calls, null);
 45 |     }
 46 |     if ("type" in item) {
 47 |       return `${item.type}:${contentText ? ` ${contentText}` : ""}${toolCallText ? ` - Tool calls: ${toolCallText}` : ""}`;
 48 |     } else if ("getType" in item) {
 49 |       return `${(item as BaseMessage).getType()}:${contentText ? ` ${contentText}` : ""}${toolCallText ? ` - Tool calls: ${toolCallText}` : ""}`;
 50 |     }
 51 |   } else if (
 52 |     typeof item === "object" &&
 53 |     item &&
 54 |     "type" in item &&
 55 |     "content" in item
 56 |   ) {
 57 |     const contentText =
 58 |       typeof item.content === "string"
 59 |         ? item.content
 60 |         : JSON.stringify(item.content, null);
 61 |     let toolCallText = "";
 62 |     if ("tool_calls" in item) {
 63 |       toolCallText = JSON.stringify(item.tool_calls, null);
 64 |     }
 65 |     return `${item.type}:${contentText ? ` ${contentText}` : ""}${toolCallText ? ` - Tool calls: ${toolCallText}` : ""}`;
 66 |   }
 67 | 
 68 |   if (typeof item === "object") {
 69 |     return JSON.stringify(item, null);
 70 |   } else {
 71 |     return item as string;
 72 |   }
 73 | }
 74 | 
 75 | export function unknownToPrettyDate(input: unknown): string | undefined {
 76 |   try {
 77 |     if (
 78 |       Object.prototype.toString.call(input) === "[object Date]" ||
 79 |       new Date(input as string)
 80 |     ) {
 81 |       return format(new Date(input as string), "MM/dd/yyyy hh:mm a");
 82 |     }
 83 |   } catch (_) {
 84 |     // failed to parse date. no-op
 85 |   }
 86 |   return undefined;
 87 | }
 88 | 
 89 | export function createDefaultHumanResponse(
 90 |   hitlRequest: HITLRequest,
 91 |   initialHumanInterruptEditValue: React.MutableRefObject<
 92 |     Record<string, string>
 93 |   >,
 94 | ): {
 95 |   responses: DecisionWithEdits[];
 96 |   defaultSubmitType: SubmitType | undefined;
 97 |   hasApprove: boolean;
 98 | } {
 99 |   const responses: DecisionWithEdits[] = [];
100 |   const actionRequest = hitlRequest.action_requests?.[0];
101 |   const reviewConfig =
102 |     hitlRequest.review_configs?.find(
103 |       (config) => config.action_name === actionRequest?.name,
104 |     ) ?? hitlRequest.review_configs?.[0];
105 | 
106 |   if (!actionRequest || !reviewConfig) {
107 |     return { responses: [], defaultSubmitType: undefined, hasApprove: false };
108 |   }
109 | 
110 |   const allowedDecisions = reviewConfig.allowed_decisions ?? [];
111 | 
112 |   if (allowedDecisions.includes("edit")) {
113 |     Object.entries(actionRequest.args).forEach(([key, value]) => {
114 |       const stringValue =
115 |         typeof value === "string" || typeof value === "number"
116 |           ? value.toString()
117 |           : JSON.stringify(value, null);
118 |       initialHumanInterruptEditValue.current = {
119 |         ...initialHumanInterruptEditValue.current,
120 |         [key]: stringValue,
121 |       };
122 |     });
123 | 
124 |     const editedAction: Action = {
125 |       name: actionRequest.name,
126 |       args: { ...actionRequest.args },
127 |     };
128 | 
129 |     responses.push({
130 |       type: "edit",
131 |       edited_action: editedAction,
132 |       acceptAllowed: allowedDecisions.includes("approve"),
133 |       editsMade: false,
134 |     });
135 |   }
136 | 
137 |   if (allowedDecisions.includes("approve")) {
138 |     responses.push({ type: "approve" });
139 |   }
140 | 
141 |   if (allowedDecisions.includes("reject")) {
142 |     responses.push({ type: "reject", message: "" });
143 |   }
144 | 
145 |   // Determine default submit type. Priority: approve > reject > edit
146 |   let defaultSubmitType: SubmitType | undefined;
147 | 
148 |   if (allowedDecisions.includes("approve")) {
149 |     defaultSubmitType = "approve";
150 |   } else if (allowedDecisions.includes("reject")) {
151 |     defaultSubmitType = "reject";
152 |   } else if (allowedDecisions.includes("edit")) {
153 |     defaultSubmitType = "edit";
154 |   }
155 | 
156 |   const hasApprove = allowedDecisions.includes("approve");
157 | 
158 |   return { responses, defaultSubmitType, hasApprove };
159 | }
160 | 
161 | export function buildDecisionFromState(
162 |   responses: DecisionWithEdits[],
163 |   selectedSubmitType: SubmitType | undefined,
164 | ): { decision?: Decision; error?: string } {
165 |   if (!responses.length) {
166 |     return { error: "Please enter a response." };
167 |   }
168 | 
169 |   const selectedDecision = responses.find(
170 |     (response) => response.type === selectedSubmitType,
171 |   );
172 | 
173 |   if (!selectedDecision) {
174 |     return { error: "No response selected." };
175 |   }
176 | 
177 |   if (selectedDecision.type === "approve") {
178 |     return { decision: { type: "approve" } };
179 |   }
180 | 
181 |   if (selectedDecision.type === "reject") {
182 |     const message = selectedDecision.message?.trim();
183 |     if (!message) {
184 |       return { error: "Please provide a rejection reason." };
185 |     }
186 |     return { decision: { type: "reject", message } };
187 |   }
188 | 
189 |   if (selectedDecision.type === "edit") {
190 |     if (selectedDecision.acceptAllowed && !selectedDecision.editsMade) {
191 |       return { decision: { type: "approve" } };
192 |     }
193 | 
194 |     return {
195 |       decision: {
196 |         type: "edit",
197 |         edited_action: selectedDecision.edited_action,
198 |       },
199 |     };
200 |   }
201 | 
202 |   return { error: "Unsupported response type." };
203 | }
204 | 
205 | export function constructOpenInStudioURL(
206 |   deploymentUrl: string,
207 |   threadId?: string,
208 | ) {
209 |   const smithStudioURL = new URL("https://smith.langchain.com/studio/thread");
210 |   // trim the trailing slash from deploymentUrl
211 |   const trimmedDeploymentUrl = deploymentUrl.replace(/\/$/, "");
212 | 
213 |   if (threadId) {
214 |     smithStudioURL.pathname += `/${threadId}`;
215 |   }
216 | 
217 |   smithStudioURL.searchParams.append("baseUrl", trimmedDeploymentUrl);
218 | 
219 |   return smithStudioURL.toString();
220 | }
221 | 
222 | export function haveArgsChanged(
223 |   args: unknown,
224 |   initialValues: Record<string, string>,
225 | ): boolean {
226 |   if (typeof args !== "object" || !args) {
227 |     return false;
228 |   }
229 | 
230 |   const currentValues = args as Record<string, string>;
231 | 
232 |   return Object.entries(currentValues).some(([key, value]) => {
233 |     const valueString = ["string", "number"].includes(typeof value)
234 |       ? value.toString()
235 |       : JSON.stringify(value, null);
236 |     return initialValues[key] !== valueString;
237 |   });
238 | }
239 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/hooks/use-interrupted-actions.tsx:
--------------------------------------------------------------------------------
  1 | import { useStreamContext } from "@/providers/Stream";
  2 | import { END } from "@langchain/langgraph/web";
  3 | import { Interrupt } from "@langchain/langgraph-sdk";
  4 | import { toast } from "sonner";
  5 | import {
  6 |   Dispatch,
  7 |   KeyboardEvent,
  8 |   MutableRefObject,
  9 |   SetStateAction,
 10 |   useEffect,
 11 |   useRef,
 12 |   useState,
 13 | } from "react";
 14 | import { Decision, DecisionWithEdits, HITLRequest, SubmitType } from "../types";
 15 | import { buildDecisionFromState, createDefaultHumanResponse } from "../utils";
 16 | 
 17 | interface UseInterruptedActionsInput {
 18 |   interrupt: Interrupt<HITLRequest>;
 19 | }
 20 | 
 21 | interface UseInterruptedActionsValue {
 22 |   handleSubmit: (
 23 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent,
 24 |   ) => Promise<void>;
 25 |   handleResolve: (
 26 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
 27 |   ) => Promise<void>;
 28 |   streaming: boolean;
 29 |   streamFinished: boolean;
 30 |   loading: boolean;
 31 |   supportsMultipleMethods: boolean;
 32 |   hasEdited: boolean;
 33 |   hasAddedResponse: boolean;
 34 |   approveAllowed: boolean;
 35 |   humanResponse: DecisionWithEdits[];
 36 |   selectedSubmitType: SubmitType | undefined;
 37 |   setSelectedSubmitType: Dispatch<SetStateAction<SubmitType | undefined>>;
 38 |   setHumanResponse: Dispatch<SetStateAction<DecisionWithEdits[]>>;
 39 |   setHasAddedResponse: Dispatch<SetStateAction<boolean>>;
 40 |   setHasEdited: Dispatch<SetStateAction<boolean>>;
 41 |   initialHumanInterruptEditValue: MutableRefObject<Record<string, string>>;
 42 | }
 43 | 
 44 | export default function useInterruptedActions({
 45 |   interrupt,
 46 | }: UseInterruptedActionsInput): UseInterruptedActionsValue {
 47 |   const thread = useStreamContext();
 48 |   const [humanResponse, setHumanResponse] = useState<DecisionWithEdits[]>([]);
 49 |   const [loading, setLoading] = useState(false);
 50 |   const [streaming, setStreaming] = useState(false);
 51 |   const [streamFinished, setStreamFinished] = useState(false);
 52 |   const [selectedSubmitType, setSelectedSubmitType] = useState<SubmitType>();
 53 |   const [hasEdited, setHasEdited] = useState(false);
 54 |   const [hasAddedResponse, setHasAddedResponse] = useState(false);
 55 |   const [approveAllowed, setApproveAllowed] = useState(false);
 56 |   const initialHumanInterruptEditValue = useRef<Record<string, string>>({});
 57 | 
 58 |   useEffect(() => {
 59 |     const hitlValue = interrupt.value as HITLRequest | undefined;
 60 |     initialHumanInterruptEditValue.current = {};
 61 | 
 62 |     if (!hitlValue) {
 63 |       setHumanResponse([]);
 64 |       setSelectedSubmitType(undefined);
 65 |       setApproveAllowed(false);
 66 |       setHasEdited(false);
 67 |       setHasAddedResponse(false);
 68 |       return;
 69 |     }
 70 | 
 71 |     try {
 72 |       const { responses, defaultSubmitType, hasApprove } =
 73 |         createDefaultHumanResponse(hitlValue, initialHumanInterruptEditValue);
 74 |       setHumanResponse(responses);
 75 |       setSelectedSubmitType(defaultSubmitType);
 76 |       setApproveAllowed(hasApprove);
 77 |       setHasEdited(false);
 78 |       setHasAddedResponse(false);
 79 |     } catch (error) {
 80 |       console.error("Error formatting and setting human response state", error);
 81 |       setHumanResponse([]);
 82 |       setSelectedSubmitType(undefined);
 83 |       setApproveAllowed(false);
 84 |     }
 85 |   }, [interrupt]);
 86 | 
 87 |   const resumeRun = (decisions: Decision[]): boolean => {
 88 |     try {
 89 |       thread.submit(
 90 |         {},
 91 |         {
 92 |           command: {
 93 |             resume: {
 94 |               decisions,
 95 |             },
 96 |           },
 97 |         },
 98 |       );
 99 |       return true;
100 |     } catch (error) {
101 |       console.error("Error sending human response", error);
102 |       return false;
103 |     }
104 |   };
105 | 
106 |   const handleSubmit = async (
107 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent,
108 |   ) => {
109 |     e.preventDefault();
110 |     const { decision, error } = buildDecisionFromState(
111 |       humanResponse,
112 |       selectedSubmitType,
113 |     );
114 | 
115 |     if (!decision) {
116 |       toast.error("Error", {
117 |         description: error ?? "Unsupported response type.",
118 |         duration: 5000,
119 |         richColors: true,
120 |         closeButton: true,
121 |       });
122 |       return;
123 |     }
124 | 
125 |     if (error) {
126 |       toast.error("Error", {
127 |         description: error,
128 |         duration: 5000,
129 |         richColors: true,
130 |         closeButton: true,
131 |       });
132 |       return;
133 |     }
134 | 
135 |     let errorOccurred = false;
136 |     initialHumanInterruptEditValue.current = {};
137 | 
138 |     try {
139 |       setLoading(true);
140 |       setStreaming(true);
141 | 
142 |       const resumedSuccessfully = resumeRun([decision]);
143 |       if (!resumedSuccessfully) {
144 |         errorOccurred = true;
145 |         return;
146 |       }
147 | 
148 |       toast("Success", {
149 |         description: "Response submitted successfully.",
150 |         duration: 5000,
151 |       });
152 | 
153 |       setStreamFinished(true);
154 |     } catch (error: any) {
155 |       console.error("Error sending human response", error);
156 |       errorOccurred = true;
157 | 
158 |       if ("message" in error && error.message.includes("Invalid assistant")) {
159 |         toast("Error: Invalid assistant ID", {
160 |           description:
161 |             "The provided assistant ID was not found in this graph. Please update the assistant ID in the settings and try again.",
162 |           richColors: true,
163 |           closeButton: true,
164 |           duration: 5000,
165 |         });
166 |       } else {
167 |         toast.error("Error", {
168 |           description: "Failed to submit response.",
169 |           richColors: true,
170 |           closeButton: true,
171 |           duration: 5000,
172 |         });
173 |       }
174 |     } finally {
175 |       setStreaming(false);
176 |       setLoading(false);
177 |       if (errorOccurred) {
178 |         setStreamFinished(false);
179 |       }
180 |     }
181 |   };
182 | 
183 |   const handleResolve = async (
184 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
185 |   ) => {
186 |     e.preventDefault();
187 |     setLoading(true);
188 |     initialHumanInterruptEditValue.current = {};
189 | 
190 |     try {
191 |       thread.submit(
192 |         {},
193 |         {
194 |           command: {
195 |             goto: END,
196 |           },
197 |         },
198 |       );
199 | 
200 |       toast("Success", {
201 |         description: "Marked thread as resolved.",
202 |         duration: 3000,
203 |       });
204 |     } catch (error) {
205 |       console.error("Error marking thread as resolved", error);
206 |       toast.error("Error", {
207 |         description: "Failed to mark thread as resolved.",
208 |         richColors: true,
209 |         closeButton: true,
210 |         duration: 3000,
211 |       });
212 |     } finally {
213 |       setLoading(false);
214 |     }
215 |   };
216 | 
217 |   const supportsMultipleMethods =
218 |     humanResponse.filter((response) =>
219 |       ["edit", "approve", "reject"].includes(response.type),
220 |     ).length > 1;
221 | 
222 |   return {
223 |     handleSubmit,
224 |     handleResolve,
225 |     humanResponse,
226 |     selectedSubmitType,
227 |     streaming,
228 |     streamFinished,
229 |     loading,
230 |     supportsMultipleMethods,
231 |     hasEdited,
232 |     hasAddedResponse,
233 |     approveAllowed,
234 |     setSelectedSubmitType,
235 |     setHumanResponse,
236 |     setHasAddedResponse,
237 |     setHasEdited,
238 |     initialHumanInterruptEditValue,
239 |   };
240 | }
241 | 


--------------------------------------------------------------------------------
/src/components/thread/markdown-text.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import "./markdown-styles.css";
  4 | 
  5 | import ReactMarkdown from "react-markdown";
  6 | import remarkGfm from "remark-gfm";
  7 | import rehypeKatex from "rehype-katex";
  8 | import remarkMath from "remark-math";
  9 | import { FC, memo, useState } from "react";
 10 | import { CheckIcon, CopyIcon } from "lucide-react";
 11 | import { SyntaxHighlighter } from "@/components/thread/syntax-highlighter";
 12 | 
 13 | import { TooltipIconButton } from "@/components/thread/tooltip-icon-button";
 14 | import { cn } from "@/lib/utils";
 15 | 
 16 | import "katex/dist/katex.min.css";
 17 | 
 18 | interface CodeHeaderProps {
 19 |   language?: string;
 20 |   code: string;
 21 | }
 22 | 
 23 | const useCopyToClipboard = ({
 24 |   copiedDuration = 3000,
 25 | }: {
 26 |   copiedDuration?: number;
 27 | } = {}) => {
 28 |   const [isCopied, setIsCopied] = useState<boolean>(false);
 29 | 
 30 |   const copyToClipboard = (value: string) => {
 31 |     if (!value) return;
 32 | 
 33 |     navigator.clipboard.writeText(value).then(() => {
 34 |       setIsCopied(true);
 35 |       setTimeout(() => setIsCopied(false), copiedDuration);
 36 |     });
 37 |   };
 38 | 
 39 |   return { isCopied, copyToClipboard };
 40 | };
 41 | 
 42 | const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
 43 |   const { isCopied, copyToClipboard } = useCopyToClipboard();
 44 |   const onCopy = () => {
 45 |     if (!code || isCopied) return;
 46 |     copyToClipboard(code);
 47 |   };
 48 | 
 49 |   return (
 50 |     <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
 51 |       <span className="lowercase [&>span]:text-xs">{language}</span>
 52 |       <TooltipIconButton
 53 |         tooltip="Copy"
 54 |         onClick={onCopy}
 55 |       >
 56 |         {!isCopied && <CopyIcon />}
 57 |         {isCopied && <CheckIcon />}
 58 |       </TooltipIconButton>
 59 |     </div>
 60 |   );
 61 | };
 62 | 
 63 | const defaultComponents: any = {
 64 |   h1: ({ className, ...props }: { className?: string }) => (
 65 |     <h1
 66 |       className={cn(
 67 |         "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
 68 |         className,
 69 |       )}
 70 |       {...props}
 71 |     />
 72 |   ),
 73 |   h2: ({ className, ...props }: { className?: string }) => (
 74 |     <h2
 75 |       className={cn(
 76 |         "mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
 77 |         className,
 78 |       )}
 79 |       {...props}
 80 |     />
 81 |   ),
 82 |   h3: ({ className, ...props }: { className?: string }) => (
 83 |     <h3
 84 |       className={cn(
 85 |         "mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
 86 |         className,
 87 |       )}
 88 |       {...props}
 89 |     />
 90 |   ),
 91 |   h4: ({ className, ...props }: { className?: string }) => (
 92 |     <h4
 93 |       className={cn(
 94 |         "mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
 95 |         className,
 96 |       )}
 97 |       {...props}
 98 |     />
 99 |   ),
100 |   h5: ({ className, ...props }: { className?: string }) => (
101 |     <h5
102 |       className={cn(
103 |         "my-4 text-lg font-semibold first:mt-0 last:mb-0",
104 |         className,
105 |       )}
106 |       {...props}
107 |     />
108 |   ),
109 |   h6: ({ className, ...props }: { className?: string }) => (
110 |     <h6
111 |       className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)}
112 |       {...props}
113 |     />
114 |   ),
115 |   p: ({ className, ...props }: { className?: string }) => (
116 |     <p
117 |       className={cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className)}
118 |       {...props}
119 |     />
120 |   ),
121 |   a: ({ className, ...props }: { className?: string }) => (
122 |     <a
123 |       className={cn(
124 |         "text-primary font-medium underline underline-offset-4",
125 |         className,
126 |       )}
127 |       {...props}
128 |     />
129 |   ),
130 |   blockquote: ({ className, ...props }: { className?: string }) => (
131 |     <blockquote
132 |       className={cn("border-l-2 pl-6 italic", className)}
133 |       {...props}
134 |     />
135 |   ),
136 |   ul: ({ className, ...props }: { className?: string }) => (
137 |     <ul
138 |       className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)}
139 |       {...props}
140 |     />
141 |   ),
142 |   ol: ({ className, ...props }: { className?: string }) => (
143 |     <ol
144 |       className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)}
145 |       {...props}
146 |     />
147 |   ),
148 |   hr: ({ className, ...props }: { className?: string }) => (
149 |     <hr
150 |       className={cn("my-5 border-b", className)}
151 |       {...props}
152 |     />
153 |   ),
154 |   table: ({ className, ...props }: { className?: string }) => (
155 |     <table
156 |       className={cn(
157 |         "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
158 |         className,
159 |       )}
160 |       {...props}
161 |     />
162 |   ),
163 |   th: ({ className, ...props }: { className?: string }) => (
164 |     <th
165 |       className={cn(
166 |         "bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
167 |         className,
168 |       )}
169 |       {...props}
170 |     />
171 |   ),
172 |   td: ({ className, ...props }: { className?: string }) => (
173 |     <td
174 |       className={cn(
175 |         "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
176 |         className,
177 |       )}
178 |       {...props}
179 |     />
180 |   ),
181 |   tr: ({ className, ...props }: { className?: string }) => (
182 |     <tr
183 |       className={cn(
184 |         "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
185 |         className,
186 |       )}
187 |       {...props}
188 |     />
189 |   ),
190 |   sup: ({ className, ...props }: { className?: string }) => (
191 |     <sup
192 |       className={cn("[&>a]:text-xs [&>a]:no-underline", className)}
193 |       {...props}
194 |     />
195 |   ),
196 |   pre: ({ className, ...props }: { className?: string }) => (
197 |     <pre
198 |       className={cn(
199 |         "max-w-4xl overflow-x-auto rounded-lg bg-black text-white",
200 |         className,
201 |       )}
202 |       {...props}
203 |     />
204 |   ),
205 |   code: ({
206 |     className,
207 |     children,
208 |     ...props
209 |   }: {
210 |     className?: string;
211 |     children: React.ReactNode;
212 |   }) => {
213 |     const match = /language-(\w+)/.exec(className || "");
214 | 
215 |     if (match) {
216 |       const language = match[1];
217 |       const code = String(children).replace(/\n$/, "");
218 | 
219 |       return (
220 |         <>
221 |           <CodeHeader
222 |             language={language}
223 |             code={code}
224 |           />
225 |           <SyntaxHighlighter
226 |             language={language}
227 |             className={className}
228 |           >
229 |             {code}
230 |           </SyntaxHighlighter>
231 |         </>
232 |       );
233 |     }
234 | 
235 |     return (
236 |       <code
237 |         className={cn("rounded font-semibold", className)}
238 |         {...props}
239 |       >
240 |         {children}
241 |       </code>
242 |     );
243 |   },
244 | };
245 | 
246 | const MarkdownTextImpl: FC<{ children: string }> = ({ children }) => {
247 |   return (
248 |     <div className="markdown-content">
249 |       <ReactMarkdown
250 |         remarkPlugins={[remarkGfm, remarkMath]}
251 |         rehypePlugins={[rehypeKatex]}
252 |         components={defaultComponents}
253 |       >
254 |         {children}
255 |       </ReactMarkdown>
256 |     </div>
257 |   );
258 | };
259 | 
260 | export const MarkdownText = memo(MarkdownTextImpl);
261 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/tool-calls.tsx:
--------------------------------------------------------------------------------
  1 | import { AIMessage, ToolMessage } from "@langchain/langgraph-sdk";
  2 | import { useState } from "react";
  3 | import { motion, AnimatePresence } from "framer-motion";
  4 | import { ChevronDown, ChevronUp } from "lucide-react";
  5 | 
  6 | function isComplexValue(value: any): boolean {
  7 |   return Array.isArray(value) || (typeof value === "object" && value !== null);
  8 | }
  9 | 
 10 | export function ToolCalls({
 11 |   toolCalls,
 12 | }: {
 13 |   toolCalls: AIMessage["tool_calls"];
 14 | }) {
 15 |   if (!toolCalls || toolCalls.length === 0) return null;
 16 | 
 17 |   return (
 18 |     <div className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2">
 19 |       {toolCalls.map((tc, idx) => {
 20 |         const args = tc.args as Record<string, any>;
 21 |         const hasArgs = Object.keys(args).length > 0;
 22 |         return (
 23 |           <div
 24 |             key={idx}
 25 |             className="overflow-hidden rounded-lg border border-gray-200"
 26 |           >
 27 |             <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
 28 |               <h3 className="font-medium text-gray-900">
 29 |                 {tc.name}
 30 |                 {tc.id && (
 31 |                   <code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
 32 |                     {tc.id}
 33 |                   </code>
 34 |                 )}
 35 |               </h3>
 36 |             </div>
 37 |             {hasArgs ? (
 38 |               <table className="min-w-full divide-y divide-gray-200">
 39 |                 <tbody className="divide-y divide-gray-200">
 40 |                   {Object.entries(args).map(([key, value], argIdx) => (
 41 |                     <tr key={argIdx}>
 42 |                       <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
 43 |                         {key}
 44 |                       </td>
 45 |                       <td className="px-4 py-2 text-sm text-gray-500">
 46 |                         {isComplexValue(value) ? (
 47 |                           <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
 48 |                             {JSON.stringify(value, null, 2)}
 49 |                           </code>
 50 |                         ) : (
 51 |                           String(value)
 52 |                         )}
 53 |                       </td>
 54 |                     </tr>
 55 |                   ))}
 56 |                 </tbody>
 57 |               </table>
 58 |             ) : (
 59 |               <code className="block p-3 text-sm">{"{}"}</code>
 60 |             )}
 61 |           </div>
 62 |         );
 63 |       })}
 64 |     </div>
 65 |   );
 66 | }
 67 | 
 68 | export function ToolResult({ message }: { message: ToolMessage }) {
 69 |   const [isExpanded, setIsExpanded] = useState(false);
 70 | 
 71 |   let parsedContent: any;
 72 |   let isJsonContent = false;
 73 | 
 74 |   try {
 75 |     if (typeof message.content === "string") {
 76 |       parsedContent = JSON.parse(message.content);
 77 |       isJsonContent = isComplexValue(parsedContent);
 78 |     }
 79 |   } catch {
 80 |     // Content is not JSON, use as is
 81 |     parsedContent = message.content;
 82 |   }
 83 | 
 84 |   const contentStr = isJsonContent
 85 |     ? JSON.stringify(parsedContent, null, 2)
 86 |     : String(message.content);
 87 |   const contentLines = contentStr.split("\n");
 88 |   const shouldTruncate = contentLines.length > 4 || contentStr.length > 500;
 89 |   const displayedContent =
 90 |     shouldTruncate && !isExpanded
 91 |       ? contentStr.length > 500
 92 |         ? contentStr.slice(0, 500) + "..."
 93 |         : contentLines.slice(0, 4).join("\n") + "\n..."
 94 |       : contentStr;
 95 | 
 96 |   return (
 97 |     <div className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2">
 98 |       <div className="overflow-hidden rounded-lg border border-gray-200">
 99 |         <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
100 |           <div className="flex flex-wrap items-center justify-between gap-2">
101 |             {message.name ? (
102 |               <h3 className="font-medium text-gray-900">
103 |                 Tool Result:{" "}
104 |                 <code className="rounded bg-gray-100 px-2 py-1">
105 |                   {message.name}
106 |                 </code>
107 |               </h3>
108 |             ) : (
109 |               <h3 className="font-medium text-gray-900">Tool Result</h3>
110 |             )}
111 |             {message.tool_call_id && (
112 |               <code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
113 |                 {message.tool_call_id}
114 |               </code>
115 |             )}
116 |           </div>
117 |         </div>
118 |         <motion.div
119 |           className="min-w-full bg-gray-100"
120 |           initial={false}
121 |           animate={{ height: "auto" }}
122 |           transition={{ duration: 0.3 }}
123 |         >
124 |           <div className="p-3">
125 |             <AnimatePresence
126 |               mode="wait"
127 |               initial={false}
128 |             >
129 |               <motion.div
130 |                 key={isExpanded ? "expanded" : "collapsed"}
131 |                 initial={{ opacity: 0, y: 20 }}
132 |                 animate={{ opacity: 1, y: 0 }}
133 |                 exit={{ opacity: 0, y: -20 }}
134 |                 transition={{ duration: 0.2 }}
135 |               >
136 |                 {isJsonContent ? (
137 |                   <table className="min-w-full divide-y divide-gray-200">
138 |                     <tbody className="divide-y divide-gray-200">
139 |                       {(Array.isArray(parsedContent)
140 |                         ? isExpanded
141 |                           ? parsedContent
142 |                           : parsedContent.slice(0, 5)
143 |                         : Object.entries(parsedContent)
144 |                       ).map((item, argIdx) => {
145 |                         const [key, value] = Array.isArray(parsedContent)
146 |                           ? [argIdx, item]
147 |                           : [item[0], item[1]];
148 |                         return (
149 |                           <tr key={argIdx}>
150 |                             <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
151 |                               {key}
152 |                             </td>
153 |                             <td className="px-4 py-2 text-sm text-gray-500">
154 |                               {isComplexValue(value) ? (
155 |                                 <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
156 |                                   {JSON.stringify(value, null, 2)}
157 |                                 </code>
158 |                               ) : (
159 |                                 String(value)
160 |                               )}
161 |                             </td>
162 |                           </tr>
163 |                         );
164 |                       })}
165 |                     </tbody>
166 |                   </table>
167 |                 ) : (
168 |                   <code className="block text-sm">{displayedContent}</code>
169 |                 )}
170 |               </motion.div>
171 |             </AnimatePresence>
172 |           </div>
173 |           {((shouldTruncate && !isJsonContent) ||
174 |             (isJsonContent &&
175 |               Array.isArray(parsedContent) &&
176 |               parsedContent.length > 5)) && (
177 |             <motion.button
178 |               onClick={() => setIsExpanded(!isExpanded)}
179 |               className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
180 |               initial={{ scale: 1 }}
181 |               whileHover={{ scale: 1.02 }}
182 |               whileTap={{ scale: 0.98 }}
183 |             >
184 |               {isExpanded ? <ChevronUp /> : <ChevronDown />}
185 |             </motion.button>
186 |           )}
187 |         </motion.div>
188 |       </div>
189 |     </div>
190 |   );
191 | }
192 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/ai.tsx:
--------------------------------------------------------------------------------
  1 | import { parsePartialJson } from "@langchain/core/output_parsers";
  2 | import { useStreamContext } from "@/providers/Stream";
  3 | import { AIMessage, Checkpoint, Message } from "@langchain/langgraph-sdk";
  4 | import { getContentString } from "../utils";
  5 | import { BranchSwitcher, CommandBar } from "./shared";
  6 | import { MarkdownText } from "../markdown-text";
  7 | import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
  8 | import { cn } from "@/lib/utils";
  9 | import { ToolCalls, ToolResult } from "./tool-calls";
 10 | import { MessageContentComplex } from "@langchain/core/messages";
 11 | import { Fragment } from "react/jsx-runtime";
 12 | import { isAgentInboxInterruptSchema } from "@/lib/agent-inbox-interrupt";
 13 | import { ThreadView } from "../agent-inbox";
 14 | import { useQueryState, parseAsBoolean } from "nuqs";
 15 | import { GenericInterruptView } from "./generic-interrupt";
 16 | import { useArtifact } from "../artifact";
 17 | 
 18 | function CustomComponent({
 19 |   message,
 20 |   thread,
 21 | }: {
 22 |   message: Message;
 23 |   thread: ReturnType<typeof useStreamContext>;
 24 | }) {
 25 |   const artifact = useArtifact();
 26 |   const { values } = useStreamContext();
 27 |   const customComponents = values.ui?.filter(
 28 |     (ui) => ui.metadata?.message_id === message.id,
 29 |   );
 30 | 
 31 |   if (!customComponents?.length) return null;
 32 |   return (
 33 |     <Fragment key={message.id}>
 34 |       {customComponents.map((customComponent) => (
 35 |         <LoadExternalComponent
 36 |           key={customComponent.id}
 37 |           stream={thread}
 38 |           message={customComponent}
 39 |           meta={{ ui: customComponent, artifact }}
 40 |         />
 41 |       ))}
 42 |     </Fragment>
 43 |   );
 44 | }
 45 | 
 46 | function parseAnthropicStreamedToolCalls(
 47 |   content: MessageContentComplex[],
 48 | ): AIMessage["tool_calls"] {
 49 |   const toolCallContents = content.filter((c) => c.type === "tool_use" && c.id);
 50 | 
 51 |   return toolCallContents.map((tc) => {
 52 |     const toolCall = tc as Record<string, any>;
 53 |     let json: Record<string, any> = {};
 54 |     if (toolCall?.input) {
 55 |       try {
 56 |         json = parsePartialJson(toolCall.input) ?? {};
 57 |       } catch {
 58 |         // Pass
 59 |       }
 60 |     }
 61 |     return {
 62 |       name: toolCall.name ?? "",
 63 |       id: toolCall.id ?? "",
 64 |       args: json,
 65 |       type: "tool_call",
 66 |     };
 67 |   });
 68 | }
 69 | 
 70 | interface InterruptProps {
 71 |   interrupt?: unknown;
 72 |   isLastMessage: boolean;
 73 |   hasNoAIOrToolMessages: boolean;
 74 | }
 75 | 
 76 | function Interrupt({
 77 |   interrupt,
 78 |   isLastMessage,
 79 |   hasNoAIOrToolMessages,
 80 | }: InterruptProps) {
 81 |   const fallbackValue = Array.isArray(interrupt)
 82 |     ? (interrupt as Record<string, any>[])
 83 |     : (((interrupt as { value?: unknown } | undefined)?.value ??
 84 |         interrupt) as Record<string, any>);
 85 | 
 86 |   return (
 87 |     <>
 88 |       {isAgentInboxInterruptSchema(interrupt) &&
 89 |         (isLastMessage || hasNoAIOrToolMessages) && (
 90 |           <ThreadView interrupt={interrupt} />
 91 |         )}
 92 |       {interrupt &&
 93 |       !isAgentInboxInterruptSchema(interrupt) &&
 94 |       (isLastMessage || hasNoAIOrToolMessages) ? (
 95 |         <GenericInterruptView interrupt={fallbackValue} />
 96 |       ) : null}
 97 |     </>
 98 |   );
 99 | }
100 | 
101 | export function AssistantMessage({
102 |   message,
103 |   isLoading,
104 |   handleRegenerate,
105 | }: {
106 |   message: Message | undefined;
107 |   isLoading: boolean;
108 |   handleRegenerate: (parentCheckpoint: Checkpoint | null | undefined) => void;
109 | }) {
110 |   const content = message?.content ?? [];
111 |   const contentString = getContentString(content);
112 |   const [hideToolCalls] = useQueryState(
113 |     "hideToolCalls",
114 |     parseAsBoolean.withDefault(false),
115 |   );
116 | 
117 |   const thread = useStreamContext();
118 |   const isLastMessage =
119 |     thread.messages[thread.messages.length - 1].id === message?.id;
120 |   const hasNoAIOrToolMessages = !thread.messages.find(
121 |     (m) => m.type === "ai" || m.type === "tool",
122 |   );
123 |   const meta = message ? thread.getMessagesMetadata(message) : undefined;
124 |   const threadInterrupt = thread.interrupt;
125 | 
126 |   const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;
127 |   const anthropicStreamedToolCalls = Array.isArray(content)
128 |     ? parseAnthropicStreamedToolCalls(content)
129 |     : undefined;
130 | 
131 |   const hasToolCalls =
132 |     message &&
133 |     "tool_calls" in message &&
134 |     message.tool_calls &&
135 |     message.tool_calls.length > 0;
136 |   const toolCallsHaveContents =
137 |     hasToolCalls &&
138 |     message.tool_calls?.some(
139 |       (tc) => tc.args && Object.keys(tc.args).length > 0,
140 |     );
141 |   const hasAnthropicToolCalls = !!anthropicStreamedToolCalls?.length;
142 |   const isToolResult = message?.type === "tool";
143 | 
144 |   if (isToolResult && hideToolCalls) {
145 |     return null;
146 |   }
147 | 
148 |   return (
149 |     <div className="group mr-auto flex w-full items-start gap-2">
150 |       <div className="flex w-full flex-col gap-2">
151 |         {isToolResult ? (
152 |           <>
153 |             <ToolResult message={message} />
154 |             <Interrupt
155 |               interrupt={threadInterrupt}
156 |               isLastMessage={isLastMessage}
157 |               hasNoAIOrToolMessages={hasNoAIOrToolMessages}
158 |             />
159 |           </>
160 |         ) : (
161 |           <>
162 |             {contentString.length > 0 && (
163 |               <div className="py-1">
164 |                 <MarkdownText>{contentString}</MarkdownText>
165 |               </div>
166 |             )}
167 | 
168 |             {!hideToolCalls && (
169 |               <>
170 |                 {(hasToolCalls && toolCallsHaveContents && (
171 |                   <ToolCalls toolCalls={message.tool_calls} />
172 |                 )) ||
173 |                   (hasAnthropicToolCalls && (
174 |                     <ToolCalls toolCalls={anthropicStreamedToolCalls} />
175 |                   )) ||
176 |                   (hasToolCalls && (
177 |                     <ToolCalls toolCalls={message.tool_calls} />
178 |                   ))}
179 |               </>
180 |             )}
181 | 
182 |             {message && (
183 |               <CustomComponent
184 |                 message={message}
185 |                 thread={thread}
186 |               />
187 |             )}
188 |             <Interrupt
189 |               interrupt={threadInterrupt}
190 |               isLastMessage={isLastMessage}
191 |               hasNoAIOrToolMessages={hasNoAIOrToolMessages}
192 |             />
193 |             <div
194 |               className={cn(
195 |                 "mr-auto flex items-center gap-2 transition-opacity",
196 |                 "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
197 |               )}
198 |             >
199 |               <BranchSwitcher
200 |                 branch={meta?.branch}
201 |                 branchOptions={meta?.branchOptions}
202 |                 onSelect={(branch) => thread.setBranch(branch)}
203 |                 isLoading={isLoading}
204 |               />
205 |               <CommandBar
206 |                 content={contentString}
207 |                 isLoading={isLoading}
208 |                 isAiMessage={true}
209 |                 handleRegenerate={() => handleRegenerate(parentCheckpoint)}
210 |               />
211 |             </div>
212 |           </>
213 |         )}
214 |       </div>
215 |     </div>
216 |   );
217 | }
218 | 
219 | export function AssistantMessageLoading() {
220 |   return (
221 |     <div className="mr-auto flex items-start gap-2">
222 |       <div className="bg-muted flex h-8 items-center gap-1 rounded-2xl px-4 py-2">
223 |         <div className="bg-foreground/50 h-1.5 w-1.5 animate-[pulse_1.5s_ease-in-out_infinite] rounded-full"></div>
224 |         <div className="bg-foreground/50 h-1.5 w-1.5 animate-[pulse_1.5s_ease-in-out_0.5s_infinite] rounded-full"></div>
225 |         <div className="bg-foreground/50 h-1.5 w-1.5 animate-[pulse_1.5s_ease-in-out_1s_infinite] rounded-full"></div>
226 |       </div>
227 |     </div>
228 |   );
229 | }
230 | 


--------------------------------------------------------------------------------
/src/hooks/use-file-upload.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useRef, useEffect, ChangeEvent } from "react";
  2 | import { toast } from "sonner";
  3 | import { ContentBlock } from "@langchain/core/messages";
  4 | import { fileToContentBlock } from "@/lib/multimodal-utils";
  5 | 
  6 | export const SUPPORTED_FILE_TYPES = [
  7 |   "image/jpeg",
  8 |   "image/png",
  9 |   "image/gif",
 10 |   "image/webp",
 11 |   "application/pdf",
 12 | ];
 13 | 
 14 | interface UseFileUploadOptions {
 15 |   initialBlocks?: ContentBlock.Multimodal.Data[];
 16 | }
 17 | 
 18 | export function useFileUpload({
 19 |   initialBlocks = [],
 20 | }: UseFileUploadOptions = {}) {
 21 |   const [contentBlocks, setContentBlocks] =
 22 |     useState<ContentBlock.Multimodal.Data[]>(initialBlocks);
 23 |   const dropRef = useRef<HTMLDivElement>(null);
 24 |   const [dragOver, setDragOver] = useState(false);
 25 |   const dragCounter = useRef(0);
 26 | 
 27 |   const isDuplicate = (file: File, blocks: ContentBlock.Multimodal.Data[]) => {
 28 |     if (file.type === "application/pdf") {
 29 |       return blocks.some(
 30 |         (b) =>
 31 |           b.type === "file" &&
 32 |           b.mimeType === "application/pdf" &&
 33 |           b.metadata?.filename === file.name,
 34 |       );
 35 |     }
 36 |     if (SUPPORTED_FILE_TYPES.includes(file.type)) {
 37 |       return blocks.some(
 38 |         (b) =>
 39 |           b.type === "image" &&
 40 |           b.metadata?.name === file.name &&
 41 |           b.mimeType === file.type,
 42 |       );
 43 |     }
 44 |     return false;
 45 |   };
 46 | 
 47 |   const handleFileUpload = async (e: ChangeEvent<HTMLInputElement>) => {
 48 |     const files = e.target.files;
 49 |     if (!files) return;
 50 |     const fileArray = Array.from(files);
 51 |     const validFiles = fileArray.filter((file) =>
 52 |       SUPPORTED_FILE_TYPES.includes(file.type),
 53 |     );
 54 |     const invalidFiles = fileArray.filter(
 55 |       (file) => !SUPPORTED_FILE_TYPES.includes(file.type),
 56 |     );
 57 |     const duplicateFiles = validFiles.filter((file) =>
 58 |       isDuplicate(file, contentBlocks),
 59 |     );
 60 |     const uniqueFiles = validFiles.filter(
 61 |       (file) => !isDuplicate(file, contentBlocks),
 62 |     );
 63 | 
 64 |     if (invalidFiles.length > 0) {
 65 |       toast.error(
 66 |         "You have uploaded invalid file type. Please upload a JPEG, PNG, GIF, WEBP image or a PDF.",
 67 |       );
 68 |     }
 69 |     if (duplicateFiles.length > 0) {
 70 |       toast.error(
 71 |         `Duplicate file(s) detected: ${duplicateFiles.map((f) => f.name).join(", ")}. Each file can only be uploaded once per message.`,
 72 |       );
 73 |     }
 74 | 
 75 |     const newBlocks = uniqueFiles.length
 76 |       ? await Promise.all(uniqueFiles.map(fileToContentBlock))
 77 |       : [];
 78 |     setContentBlocks((prev) => [...prev, ...newBlocks]);
 79 |     e.target.value = "";
 80 |   };
 81 | 
 82 |   // Drag and drop handlers
 83 |   useEffect(() => {
 84 |     if (!dropRef.current) return;
 85 | 
 86 |     // Global drag events with counter for robust dragOver state
 87 |     const handleWindowDragEnter = (e: DragEvent) => {
 88 |       if (e.dataTransfer?.types?.includes("Files")) {
 89 |         dragCounter.current += 1;
 90 |         setDragOver(true);
 91 |       }
 92 |     };
 93 |     const handleWindowDragLeave = (e: DragEvent) => {
 94 |       if (e.dataTransfer?.types?.includes("Files")) {
 95 |         dragCounter.current -= 1;
 96 |         if (dragCounter.current <= 0) {
 97 |           setDragOver(false);
 98 |           dragCounter.current = 0;
 99 |         }
100 |       }
101 |     };
102 |     const handleWindowDrop = async (e: DragEvent) => {
103 |       e.preventDefault();
104 |       e.stopPropagation();
105 |       dragCounter.current = 0;
106 |       setDragOver(false);
107 | 
108 |       if (!e.dataTransfer) return;
109 | 
110 |       const files = Array.from(e.dataTransfer.files);
111 |       const validFiles = files.filter((file) =>
112 |         SUPPORTED_FILE_TYPES.includes(file.type),
113 |       );
114 |       const invalidFiles = files.filter(
115 |         (file) => !SUPPORTED_FILE_TYPES.includes(file.type),
116 |       );
117 |       const duplicateFiles = validFiles.filter((file) =>
118 |         isDuplicate(file, contentBlocks),
119 |       );
120 |       const uniqueFiles = validFiles.filter(
121 |         (file) => !isDuplicate(file, contentBlocks),
122 |       );
123 | 
124 |       if (invalidFiles.length > 0) {
125 |         toast.error(
126 |           "You have uploaded invalid file type. Please upload a JPEG, PNG, GIF, WEBP image or a PDF.",
127 |         );
128 |       }
129 |       if (duplicateFiles.length > 0) {
130 |         toast.error(
131 |           `Duplicate file(s) detected: ${duplicateFiles.map((f) => f.name).join(", ")}. Each file can only be uploaded once per message.`,
132 |         );
133 |       }
134 | 
135 |       const newBlocks = uniqueFiles.length
136 |         ? await Promise.all(uniqueFiles.map(fileToContentBlock))
137 |         : [];
138 |       setContentBlocks((prev) => [...prev, ...newBlocks]);
139 |     };
140 |     const handleWindowDragEnd = (e: DragEvent) => {
141 |       dragCounter.current = 0;
142 |       setDragOver(false);
143 |     };
144 |     window.addEventListener("dragenter", handleWindowDragEnter);
145 |     window.addEventListener("dragleave", handleWindowDragLeave);
146 |     window.addEventListener("drop", handleWindowDrop);
147 |     window.addEventListener("dragend", handleWindowDragEnd);
148 | 
149 |     // Prevent default browser behavior for dragover globally
150 |     const handleWindowDragOver = (e: DragEvent) => {
151 |       e.preventDefault();
152 |       e.stopPropagation();
153 |     };
154 |     window.addEventListener("dragover", handleWindowDragOver);
155 | 
156 |     // Remove element-specific drop event (handled globally)
157 |     const handleDragOver = (e: DragEvent) => {
158 |       e.preventDefault();
159 |       e.stopPropagation();
160 |       setDragOver(true);
161 |     };
162 |     const handleDragEnter = (e: DragEvent) => {
163 |       e.preventDefault();
164 |       e.stopPropagation();
165 |       setDragOver(true);
166 |     };
167 |     const handleDragLeave = (e: DragEvent) => {
168 |       e.preventDefault();
169 |       e.stopPropagation();
170 |       setDragOver(false);
171 |     };
172 |     const element = dropRef.current;
173 |     element.addEventListener("dragover", handleDragOver);
174 |     element.addEventListener("dragenter", handleDragEnter);
175 |     element.addEventListener("dragleave", handleDragLeave);
176 | 
177 |     return () => {
178 |       element.removeEventListener("dragover", handleDragOver);
179 |       element.removeEventListener("dragenter", handleDragEnter);
180 |       element.removeEventListener("dragleave", handleDragLeave);
181 |       window.removeEventListener("dragenter", handleWindowDragEnter);
182 |       window.removeEventListener("dragleave", handleWindowDragLeave);
183 |       window.removeEventListener("drop", handleWindowDrop);
184 |       window.removeEventListener("dragend", handleWindowDragEnd);
185 |       window.removeEventListener("dragover", handleWindowDragOver);
186 |       dragCounter.current = 0;
187 |     };
188 |   }, [contentBlocks]);
189 | 
190 |   const removeBlock = (idx: number) => {
191 |     setContentBlocks((prev) => prev.filter((_, i) => i !== idx));
192 |   };
193 | 
194 |   const resetBlocks = () => setContentBlocks([]);
195 | 
196 |   /**
197 |    * Handle paste event for files (images, PDFs)
198 |    * Can be used as onPaste={handlePaste} on a textarea or input
199 |    */
200 |   const handlePaste = async (
201 |     e: React.ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>,
202 |   ) => {
203 |     const items = e.clipboardData.items;
204 |     if (!items) return;
205 |     const files: File[] = [];
206 |     for (let i = 0; i < items.length; i += 1) {
207 |       const item = items[i];
208 |       if (item.kind === "file") {
209 |         const file = item.getAsFile();
210 |         if (file) files.push(file);
211 |       }
212 |     }
213 |     if (files.length === 0) {
214 |       return;
215 |     }
216 |     e.preventDefault();
217 |     const validFiles = files.filter((file) =>
218 |       SUPPORTED_FILE_TYPES.includes(file.type),
219 |     );
220 |     const invalidFiles = files.filter(
221 |       (file) => !SUPPORTED_FILE_TYPES.includes(file.type),
222 |     );
223 |     const isDuplicate = (file: File) => {
224 |       if (file.type === "application/pdf") {
225 |         return contentBlocks.some(
226 |           (b) =>
227 |             b.type === "file" &&
228 |             b.mimeType === "application/pdf" &&
229 |             b.metadata?.filename === file.name,
230 |         );
231 |       }
232 |       if (SUPPORTED_FILE_TYPES.includes(file.type)) {
233 |         return contentBlocks.some(
234 |           (b) =>
235 |             b.type === "image" &&
236 |             b.metadata?.name === file.name &&
237 |             b.mimeType === file.type,
238 |         );
239 |       }
240 |       return false;
241 |     };
242 |     const duplicateFiles = validFiles.filter(isDuplicate);
243 |     const uniqueFiles = validFiles.filter((file) => !isDuplicate(file));
244 |     if (invalidFiles.length > 0) {
245 |       toast.error(
246 |         "You have pasted an invalid file type. Please paste a JPEG, PNG, GIF, WEBP image or a PDF.",
247 |       );
248 |     }
249 |     if (duplicateFiles.length > 0) {
250 |       toast.error(
251 |         `Duplicate file(s) detected: ${duplicateFiles.map((f) => f.name).join(", ")}. Each file can only be uploaded once per message.`,
252 |       );
253 |     }
254 |     if (uniqueFiles.length > 0) {
255 |       const newBlocks = await Promise.all(uniqueFiles.map(fileToContentBlock));
256 |       setContentBlocks((prev) => [...prev, ...newBlocks]);
257 |     }
258 |   };
259 | 
260 |   return {
261 |     contentBlocks,
262 |     setContentBlocks,
263 |     handleFileUpload,
264 |     dropRef,
265 |     removeBlock,
266 |     resetBlocks,
267 |     dragOver,
268 |     handlePaste,
269 |   };
270 | }
271 | 


--------------------------------------------------------------------------------
/src/providers/Stream.tsx:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   createContext,
  3 |   useContext,
  4 |   ReactNode,
  5 |   useState,
  6 |   useEffect,
  7 | } from "react";
  8 | import { useStream } from "@langchain/langgraph-sdk/react";
  9 | import { type Message } from "@langchain/langgraph-sdk";
 10 | import {
 11 |   uiMessageReducer,
 12 |   isUIMessage,
 13 |   isRemoveUIMessage,
 14 |   type UIMessage,
 15 |   type RemoveUIMessage,
 16 | } from "@langchain/langgraph-sdk/react-ui";
 17 | import { useQueryState } from "nuqs";
 18 | import { Input } from "@/components/ui/input";
 19 | import { Button } from "@/components/ui/button";
 20 | import { LangGraphLogoSVG } from "@/components/icons/langgraph";
 21 | import { Label } from "@/components/ui/label";
 22 | import { ArrowRight } from "lucide-react";
 23 | import { PasswordInput } from "@/components/ui/password-input";
 24 | import { getApiKey } from "@/lib/api-key";
 25 | import { useThreads } from "./Thread";
 26 | import { toast } from "sonner";
 27 | 
 28 | export type StateType = { messages: Message[]; ui?: UIMessage[] };
 29 | 
 30 | const useTypedStream = useStream<
 31 |   StateType,
 32 |   {
 33 |     UpdateType: {
 34 |       messages?: Message[] | Message | string;
 35 |       ui?: (UIMessage | RemoveUIMessage)[] | UIMessage | RemoveUIMessage;
 36 |       context?: Record<string, unknown>;
 37 |     };
 38 |     CustomEventType: UIMessage | RemoveUIMessage;
 39 |   }
 40 | >;
 41 | 
 42 | type StreamContextType = ReturnType<typeof useTypedStream>;
 43 | const StreamContext = createContext<StreamContextType | undefined>(undefined);
 44 | 
 45 | async function sleep(ms = 4000) {
 46 |   return new Promise((resolve) => setTimeout(resolve, ms));
 47 | }
 48 | 
 49 | async function checkGraphStatus(
 50 |   apiUrl: string,
 51 |   apiKey: string | null,
 52 | ): Promise<boolean> {
 53 |   try {
 54 |     const res = await fetch(`${apiUrl}/info`, {
 55 |       ...(apiKey && {
 56 |         headers: {
 57 |           "X-Api-Key": apiKey,
 58 |         },
 59 |       }),
 60 |     });
 61 | 
 62 |     return res.ok;
 63 |   } catch (e) {
 64 |     console.error(e);
 65 |     return false;
 66 |   }
 67 | }
 68 | 
 69 | const StreamSession = ({
 70 |   children,
 71 |   apiKey,
 72 |   apiUrl,
 73 |   assistantId,
 74 | }: {
 75 |   children: ReactNode;
 76 |   apiKey: string | null;
 77 |   apiUrl: string;
 78 |   assistantId: string;
 79 | }) => {
 80 |   const [threadId, setThreadId] = useQueryState("threadId");
 81 |   const { getThreads, setThreads } = useThreads();
 82 |   const streamValue = useTypedStream({
 83 |     apiUrl,
 84 |     apiKey: apiKey ?? undefined,
 85 |     assistantId,
 86 |     threadId: threadId ?? null,
 87 |     fetchStateHistory: true,
 88 |     onCustomEvent: (event, options) => {
 89 |       if (isUIMessage(event) || isRemoveUIMessage(event)) {
 90 |         options.mutate((prev) => {
 91 |           const ui = uiMessageReducer(prev.ui ?? [], event);
 92 |           return { ...prev, ui };
 93 |         });
 94 |       }
 95 |     },
 96 |     onThreadId: (id) => {
 97 |       setThreadId(id);
 98 |       // Refetch threads list when thread ID changes.
 99 |       // Wait for some seconds before fetching so we're able to get the new thread that was created.
100 |       sleep().then(() => getThreads().then(setThreads).catch(console.error));
101 |     },
102 |   });
103 | 
104 |   useEffect(() => {
105 |     checkGraphStatus(apiUrl, apiKey).then((ok) => {
106 |       if (!ok) {
107 |         toast.error("Failed to connect to LangGraph server", {
108 |           description: () => (
109 |             <p>
110 |               Please ensure your graph is running at <code>{apiUrl}</code> and
111 |               your API key is correctly set (if connecting to a deployed graph).
112 |             </p>
113 |           ),
114 |           duration: 10000,
115 |           richColors: true,
116 |           closeButton: true,
117 |         });
118 |       }
119 |     });
120 |   }, [apiKey, apiUrl]);
121 | 
122 |   return (
123 |     <StreamContext.Provider value={streamValue}>
124 |       {children}
125 |     </StreamContext.Provider>
126 |   );
127 | };
128 | 
129 | // Default values for the form
130 | const DEFAULT_API_URL = "http://localhost:2024";
131 | const DEFAULT_ASSISTANT_ID = "agent";
132 | 
133 | export const StreamProvider: React.FC<{ children: ReactNode }> = ({
134 |   children,
135 | }) => {
136 |   // Get environment variables
137 |   const envApiUrl: string | undefined = process.env.NEXT_PUBLIC_API_URL;
138 |   const envAssistantId: string | undefined =
139 |     process.env.NEXT_PUBLIC_ASSISTANT_ID;
140 | 
141 |   // Use URL params with env var fallbacks
142 |   const [apiUrl, setApiUrl] = useQueryState("apiUrl", {
143 |     defaultValue: envApiUrl || "",
144 |   });
145 |   const [assistantId, setAssistantId] = useQueryState("assistantId", {
146 |     defaultValue: envAssistantId || "",
147 |   });
148 | 
149 |   // For API key, use localStorage with env var fallback
150 |   const [apiKey, _setApiKey] = useState(() => {
151 |     const storedKey = getApiKey();
152 |     return storedKey || "";
153 |   });
154 | 
155 |   const setApiKey = (key: string) => {
156 |     window.localStorage.setItem("lg:chat:apiKey", key);
157 |     _setApiKey(key);
158 |   };
159 | 
160 |   // Determine final values to use, prioritizing URL params then env vars
161 |   const finalApiUrl = apiUrl || envApiUrl;
162 |   const finalAssistantId = assistantId || envAssistantId;
163 | 
164 |   // Show the form if we: don't have an API URL, or don't have an assistant ID
165 |   if (!finalApiUrl || !finalAssistantId) {
166 |     return (
167 |       <div className="flex min-h-screen w-full items-center justify-center p-4">
168 |         <div className="animate-in fade-in-0 zoom-in-95 bg-background flex max-w-3xl flex-col rounded-lg border shadow-lg">
169 |           <div className="mt-14 flex flex-col gap-2 border-b p-6">
170 |             <div className="flex flex-col items-start gap-2">
171 |               <LangGraphLogoSVG className="h-7" />
172 |               <h1 className="text-xl font-semibold tracking-tight">
173 |                 Agent Chat
174 |               </h1>
175 |             </div>
176 |             <p className="text-muted-foreground">
177 |               Welcome to Agent Chat! Before you get started, you need to enter
178 |               the URL of the deployment and the assistant / graph ID.
179 |             </p>
180 |           </div>
181 |           <form
182 |             onSubmit={(e) => {
183 |               e.preventDefault();
184 | 
185 |               const form = e.target as HTMLFormElement;
186 |               const formData = new FormData(form);
187 |               const apiUrl = formData.get("apiUrl") as string;
188 |               const assistantId = formData.get("assistantId") as string;
189 |               const apiKey = formData.get("apiKey") as string;
190 | 
191 |               setApiUrl(apiUrl);
192 |               setApiKey(apiKey);
193 |               setAssistantId(assistantId);
194 | 
195 |               form.reset();
196 |             }}
197 |             className="bg-muted/50 flex flex-col gap-6 p-6"
198 |           >
199 |             <div className="flex flex-col gap-2">
200 |               <Label htmlFor="apiUrl">
201 |                 Deployment URL<span className="text-rose-500">*</span>
202 |               </Label>
203 |               <p className="text-muted-foreground text-sm">
204 |                 This is the URL of your LangGraph deployment. Can be a local, or
205 |                 production deployment.
206 |               </p>
207 |               <Input
208 |                 id="apiUrl"
209 |                 name="apiUrl"
210 |                 className="bg-background"
211 |                 defaultValue={apiUrl || DEFAULT_API_URL}
212 |                 required
213 |               />
214 |             </div>
215 | 
216 |             <div className="flex flex-col gap-2">
217 |               <Label htmlFor="assistantId">
218 |                 Assistant / Graph ID<span className="text-rose-500">*</span>
219 |               </Label>
220 |               <p className="text-muted-foreground text-sm">
221 |                 This is the ID of the graph (can be the graph name), or
222 |                 assistant to fetch threads from, and invoke when actions are
223 |                 taken.
224 |               </p>
225 |               <Input
226 |                 id="assistantId"
227 |                 name="assistantId"
228 |                 className="bg-background"
229 |                 defaultValue={assistantId || DEFAULT_ASSISTANT_ID}
230 |                 required
231 |               />
232 |             </div>
233 | 
234 |             <div className="flex flex-col gap-2">
235 |               <Label htmlFor="apiKey">LangSmith API Key</Label>
236 |               <p className="text-muted-foreground text-sm">
237 |                 This is <strong>NOT</strong> required if using a local LangGraph
238 |                 server. This value is stored in your browser's local storage and
239 |                 is only used to authenticate requests sent to your LangGraph
240 |                 server.
241 |               </p>
242 |               <PasswordInput
243 |                 id="apiKey"
244 |                 name="apiKey"
245 |                 defaultValue={apiKey ?? ""}
246 |                 className="bg-background"
247 |                 placeholder="lsv2_pt_..."
248 |               />
249 |             </div>
250 | 
251 |             <div className="mt-2 flex justify-end">
252 |               <Button
253 |                 type="submit"
254 |                 size="lg"
255 |               >
256 |                 Continue
257 |                 <ArrowRight className="size-5" />
258 |               </Button>
259 |             </div>
260 |           </form>
261 |         </div>
262 |       </div>
263 |     );
264 |   }
265 | 
266 |   return (
267 |     <StreamSession
268 |       apiKey={apiKey}
269 |       apiUrl={apiUrl}
270 |       assistantId={assistantId}
271 |     >
272 |       {children}
273 |     </StreamSession>
274 |   );
275 | };
276 | 
277 | // Create a custom hook to use the context
278 | export const useStreamContext = (): StreamContextType => {
279 |   const context = useContext(StreamContext);
280 |   if (context === undefined) {
281 |     throw new Error("useStreamContext must be used within a StreamProvider");
282 |   }
283 |   return context;
284 | };
285 | 
286 | export default StreamContext;
287 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/components/state-view.tsx:
--------------------------------------------------------------------------------
  1 | import { ChevronRight, X, ChevronsDownUp, ChevronsUpDown } from "lucide-react";
  2 | import { useEffect, useState } from "react";
  3 | import {
  4 |   baseMessageObject,
  5 |   isArrayOfMessages,
  6 |   prettifyText,
  7 |   unknownToPrettyDate,
  8 | } from "../utils";
  9 | import { motion } from "framer-motion";
 10 | import { cn } from "@/lib/utils";
 11 | import { BaseMessage } from "@langchain/core/messages";
 12 | import { ToolCall } from "@langchain/core/messages/tool";
 13 | import { ToolCallTable } from "./tool-call-table";
 14 | import { Button } from "@/components/ui/button";
 15 | import { MarkdownText } from "../../markdown-text";
 16 | 
 17 | interface StateViewRecursiveProps {
 18 |   value: unknown;
 19 |   expanded?: boolean;
 20 | }
 21 | 
 22 | const messageTypeToLabel = (message: BaseMessage) => {
 23 |   let type = "";
 24 |   if ("type" in message) {
 25 |     type = message.type as string;
 26 |   } else if ("getType" in message) {
 27 |     type = (message as BaseMessage).getType();
 28 |   }
 29 | 
 30 |   switch (type) {
 31 |     case "human":
 32 |       return "User";
 33 |     case "ai":
 34 |       return "Assistant";
 35 |     case "tool":
 36 |       return "Tool";
 37 |     case "System":
 38 |       return "System";
 39 |     default:
 40 |       return "";
 41 |   }
 42 | };
 43 | 
 44 | function MessagesRenderer({ messages }: { messages: BaseMessage[] }) {
 45 |   return (
 46 |     <div className="flex w-full flex-col gap-1">
 47 |       {messages.map((msg, idx) => {
 48 |         const messageTypeLabel = messageTypeToLabel(msg);
 49 |         const content =
 50 |           typeof msg.content === "string"
 51 |             ? msg.content
 52 |             : JSON.stringify(msg.content, null);
 53 |         return (
 54 |           <div
 55 |             key={msg.id ?? `message-${idx}`}
 56 |             className="ml-2 flex w-full flex-col gap-[2px]"
 57 |           >
 58 |             <p className="font-medium text-gray-700">{messageTypeLabel}:</p>
 59 |             {content && <MarkdownText>{content}</MarkdownText>}
 60 |             {"tool_calls" in msg && msg.tool_calls ? (
 61 |               <div className="flex w-full flex-col items-start gap-1">
 62 |                 {(msg.tool_calls as ToolCall[]).map((tc, idx) => (
 63 |                   <ToolCallTable
 64 |                     key={tc.id ?? `tool-call-${idx}`}
 65 |                     toolCall={tc}
 66 |                   />
 67 |                 ))}
 68 |               </div>
 69 |             ) : null}
 70 |           </div>
 71 |         );
 72 |       })}
 73 |     </div>
 74 |   );
 75 | }
 76 | 
 77 | function StateViewRecursive(props: StateViewRecursiveProps) {
 78 |   const date = unknownToPrettyDate(props.value);
 79 |   if (date) {
 80 |     return <p className="font-light text-gray-600">{date}</p>;
 81 |   }
 82 | 
 83 |   if (["string", "number"].includes(typeof props.value)) {
 84 |     return <MarkdownText>{props.value as string}</MarkdownText>;
 85 |   }
 86 | 
 87 |   if (typeof props.value === "boolean") {
 88 |     return <MarkdownText>{JSON.stringify(props.value)}</MarkdownText>;
 89 |   }
 90 | 
 91 |   if (props.value == null) {
 92 |     return <p className="font-light whitespace-pre-wrap text-gray-600">null</p>;
 93 |   }
 94 | 
 95 |   if (Array.isArray(props.value)) {
 96 |     if (props.value.length > 0 && isArrayOfMessages(props.value)) {
 97 |       return <MessagesRenderer messages={props.value} />;
 98 |     }
 99 | 
100 |     const valueArray = props.value as unknown[];
101 |     return (
102 |       <div className="flex w-full flex-row items-start justify-start gap-1">
103 |         <span className="font-normal text-black">[</span>
104 |         {valueArray.map((item, idx) => {
105 |           const itemRenderValue = baseMessageObject(item);
106 |           return (
107 |             <div
108 |               key={`state-view-${idx}`}
109 |               className="flex w-full flex-row items-start whitespace-pre-wrap"
110 |             >
111 |               <StateViewRecursive value={itemRenderValue} />
112 |               {idx < valueArray?.length - 1 && (
113 |                 <span className="font-normal text-black">,&nbsp;</span>
114 |               )}
115 |             </div>
116 |           );
117 |         })}
118 |         <span className="font-normal text-black">]</span>
119 |       </div>
120 |     );
121 |   }
122 | 
123 |   if (typeof props.value === "object") {
124 |     if (Object.keys(props.value).length === 0) {
125 |       return <p className="font-light text-gray-600">{"{}"}</p>;
126 |     }
127 |     return (
128 |       <div className="relative ml-6 flex w-full flex-col items-start justify-start gap-1">
129 |         {/* Vertical line */}
130 |         <div className="absolute top-0 left-[-24px] h-full w-[1px] bg-gray-200" />
131 | 
132 |         {Object.entries(props.value).map(([key, value], idx) => (
133 |           <div
134 |             key={`state-view-object-${key}-${idx}`}
135 |             className="relative w-full"
136 |           >
137 |             {/* Horizontal connector line */}
138 |             <div className="absolute top-[10px] left-[-20px] h-[1px] w-[18px] bg-gray-200" />
139 |             <StateViewObject
140 |               expanded={props.expanded}
141 |               keyName={key}
142 |               value={value}
143 |             />
144 |           </div>
145 |         ))}
146 |       </div>
147 |     );
148 |   }
149 | }
150 | 
151 | function HasContentsEllipsis({ onClick }: { onClick?: () => void }) {
152 |   return (
153 |     <span
154 |       onClick={onClick}
155 |       className={cn(
156 |         "rounded-md p-[2px] font-mono text-[10px] leading-3",
157 |         "bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-800",
158 |         "cursor-pointer transition-colors ease-in-out",
159 |         "inline-block -translate-y-[2px]",
160 |       )}
161 |     >
162 |       {"{...}"}
163 |     </span>
164 |   );
165 | }
166 | 
167 | interface StateViewProps {
168 |   keyName: string;
169 |   value: unknown;
170 |   /**
171 |    * Whether or not to expand or collapse the view
172 |    * @default true
173 |    */
174 |   expanded?: boolean;
175 | }
176 | 
177 | export function StateViewObject(props: StateViewProps) {
178 |   const [expanded, setExpanded] = useState(false);
179 | 
180 |   useEffect(() => {
181 |     if (props.expanded != null) {
182 |       setExpanded(props.expanded);
183 |     }
184 |   }, [props.expanded]);
185 | 
186 |   return (
187 |     <div className="relative flex flex-row items-start justify-start gap-2 text-sm">
188 |       <motion.div
189 |         initial={false}
190 |         animate={{ rotate: expanded ? 90 : 0 }}
191 |         transition={{ duration: 0.2 }}
192 |       >
193 |         <div
194 |           onClick={() => setExpanded((prev) => !prev)}
195 |           className="flex h-5 w-5 cursor-pointer items-center justify-center rounded-md text-gray-500 transition-colors ease-in-out hover:bg-gray-100 hover:text-black"
196 |         >
197 |           <ChevronRight className="h-4 w-4" />
198 |         </div>
199 |       </motion.div>
200 |       <div className="flex w-full flex-col items-start justify-start gap-1">
201 |         <p className="font-normal text-black">
202 |           {prettifyText(props.keyName)}{" "}
203 |           {!expanded && (
204 |             <HasContentsEllipsis onClick={() => setExpanded((prev) => !prev)} />
205 |           )}
206 |         </p>
207 |         <motion.div
208 |           initial={false}
209 |           animate={{
210 |             height: expanded ? "auto" : 0,
211 |             opacity: expanded ? 1 : 0,
212 |           }}
213 |           transition={{
214 |             duration: 0.2,
215 |             ease: "easeInOut",
216 |           }}
217 |           style={{ overflow: "hidden" }}
218 |           className="relative w-full"
219 |         >
220 |           <StateViewRecursive
221 |             expanded={props.expanded}
222 |             value={props.value}
223 |           />
224 |         </motion.div>
225 |       </div>
226 |     </div>
227 |   );
228 | }
229 | 
230 | interface StateViewComponentProps {
231 |   values: Record<string, any>;
232 |   description: string | undefined;
233 |   handleShowSidePanel: (showState: boolean, showDescription: boolean) => void;
234 |   view: "description" | "state";
235 | }
236 | 
237 | export function StateView({
238 |   handleShowSidePanel,
239 |   view,
240 |   values,
241 |   description,
242 | }: StateViewComponentProps) {
243 |   const [expanded, setExpanded] = useState(false);
244 | 
245 |   if (!values) {
246 |     return <div>No state found</div>;
247 |   }
248 | 
249 |   return (
250 |     <div
251 |       className={cn(
252 |         "flex min-w-full flex-row gap-0",
253 |         view === "state" &&
254 |           "border-t-[1px] border-gray-100 lg:border-t-[0px] lg:border-l-[1px]",
255 |       )}
256 |     >
257 |       {view === "description" && (
258 |         <div className="pt-6 pb-2">
259 |           <MarkdownText>
260 |             {description ?? "No description provided"}
261 |           </MarkdownText>
262 |         </div>
263 |       )}
264 |       {view === "state" && (
265 |         <div className="flex flex-col items-start justify-start gap-1">
266 |           {Object.entries(values).map(([k, v], idx) => (
267 |             <StateViewObject
268 |               expanded={expanded}
269 |               key={`state-view-${k}-${idx}`}
270 |               keyName={k}
271 |               value={v}
272 |             />
273 |           ))}
274 |         </div>
275 |       )}
276 |       <div className="flex items-start justify-end gap-2">
277 |         {view === "state" && (
278 |           <Button
279 |             onClick={() => setExpanded((prev) => !prev)}
280 |             variant="ghost"
281 |             className="text-gray-600"
282 |             size="sm"
283 |           >
284 |             {expanded ? (
285 |               <ChevronsUpDown className="h-4 w-4" />
286 |             ) : (
287 |               <ChevronsDownUp className="h-4 w-4" />
288 |             )}
289 |           </Button>
290 |         )}
291 | 
292 |         <Button
293 |           onClick={() => handleShowSidePanel(false, false)}
294 |           variant="ghost"
295 |           className="text-gray-600"
296 |           size="sm"
297 |         >
298 |           <X className="h-4 w-4" />
299 |         </Button>
300 |       </div>
301 |     </div>
302 |   );
303 | }
304 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Agent Chat UI
  2 | 
  3 | Agent Chat UI is a Next.js application which enables chatting with any LangGraph server with a `messages` key through a chat interface.
  4 | 
  5 | > [!NOTE]
  6 | > 🎥 Watch the video setup guide [here](https://youtu.be/lInrwVnZ83o).
  7 | 
  8 | ## Setup
  9 | 
 10 | > [!TIP]
 11 | > Don't want to run the app locally? Use the deployed site here: [agentchat.vercel.app](https://agentchat.vercel.app)!
 12 | 
 13 | First, clone the repository, or run the [`npx` command](https://www.npmjs.com/package/create-agent-chat-app):
 14 | 
 15 | ```bash
 16 | npx create-agent-chat-app
 17 | ```
 18 | 
 19 | or
 20 | 
 21 | ```bash
 22 | git clone https://github.com/langchain-ai/agent-chat-ui.git
 23 | 
 24 | cd agent-chat-ui
 25 | ```
 26 | 
 27 | Install dependencies:
 28 | 
 29 | ```bash
 30 | pnpm install
 31 | ```
 32 | 
 33 | Run the app:
 34 | 
 35 | ```bash
 36 | pnpm dev
 37 | ```
 38 | 
 39 | The app will be available at `http://localhost:3000`.
 40 | 
 41 | ## Usage
 42 | 
 43 | Once the app is running (or if using the deployed site), you'll be prompted to enter:
 44 | 
 45 | - **Deployment URL**: The URL of the LangGraph server you want to chat with. This can be a production or development URL.
 46 | - **Assistant/Graph ID**: The name of the graph, or ID of the assistant to use when fetching, and submitting runs via the chat interface.
 47 | - **LangSmith API Key**: (only required for connecting to deployed LangGraph servers) Your LangSmith API key to use when authenticating requests sent to LangGraph servers.
 48 | 
 49 | After entering these values, click `Continue`. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server.
 50 | 
 51 | ## Environment Variables
 52 | 
 53 | You can bypass the initial setup form by setting the following environment variables:
 54 | 
 55 | ```bash
 56 | NEXT_PUBLIC_API_URL=http://localhost:2024
 57 | NEXT_PUBLIC_ASSISTANT_ID=agent
 58 | ```
 59 | 
 60 | > [!TIP]
 61 | > If you want to connect to a production LangGraph server, read the [Going to Production](#going-to-production) section.
 62 | 
 63 | To use these variables:
 64 | 
 65 | 1. Copy the `.env.example` file to a new file named `.env`
 66 | 2. Fill in the values in the `.env` file
 67 | 3. Restart the application
 68 | 
 69 | When these environment variables are set, the application will use them instead of showing the setup form.
 70 | 
 71 | ## Hiding Messages in the Chat
 72 | 
 73 | You can control the visibility of messages within the Agent Chat UI in two main ways:
 74 | 
 75 | **1. Prevent Live Streaming:**
 76 | 
 77 | To stop messages from being displayed _as they stream_ from an LLM call, add the `langsmith:nostream` tag to the chat model's configuration. The UI normally uses `on_chat_model_stream` events to render streaming messages; this tag prevents those events from being emitted for the tagged model.
 78 | 
 79 | _Python Example:_
 80 | 
 81 | ```python
 82 | from langchain_anthropic import ChatAnthropic
 83 | 
 84 | # Add tags via the .with_config method
 85 | model = ChatAnthropic().with_config(
 86 |     config={"tags": ["langsmith:nostream"]}
 87 | )
 88 | ```
 89 | 
 90 | _TypeScript Example:_
 91 | 
 92 | ```typescript
 93 | import { ChatAnthropic } from "@langchain/anthropic";
 94 | 
 95 | const model = new ChatAnthropic()
 96 |   // Add tags via the .withConfig method
 97 |   .withConfig({ tags: ["langsmith:nostream"] });
 98 | ```
 99 | 
100 | **Note:** Even if streaming is hidden this way, the message will still appear after the LLM call completes if it's saved to the graph's state without further modification.
101 | 
102 | **2. Hide Messages Permanently:**
103 | 
104 | To ensure a message is _never_ displayed in the chat UI (neither during streaming nor after being saved to state), prefix its `id` field with `do-not-render-` _before_ adding it to the graph's state, along with adding the `langsmith:do-not-render` tag to the chat model's configuration. The UI explicitly filters out any message whose `id` starts with this prefix.
105 | 
106 | _Python Example:_
107 | 
108 | ```python
109 | result = model.invoke([messages])
110 | # Prefix the ID before saving to state
111 | result.id = f"do-not-render-{result.id}"
112 | return {"messages": [result]}
113 | ```
114 | 
115 | _TypeScript Example:_
116 | 
117 | ```typescript
118 | const result = await model.invoke([messages]);
119 | // Prefix the ID before saving to state
120 | result.id = `do-not-render-${result.id}`;
121 | return { messages: [result] };
122 | ```
123 | 
124 | This approach guarantees the message remains completely hidden from the user interface.
125 | 
126 | ## Rendering Artifacts
127 | 
128 | The Agent Chat UI supports rendering artifacts in the chat. Artifacts are rendered in a side panel to the right of the chat. To render an artifact, you can obtain the artifact context from the `thread.meta.artifact` field. Here's a sample utility hook for obtaining the artifact context:
129 | 
130 | ```tsx
131 | export function useArtifact<TContext = Record<string, unknown>>() {
132 |   type Component = (props: {
133 |     children: React.ReactNode;
134 |     title?: React.ReactNode;
135 |   }) => React.ReactNode;
136 | 
137 |   type Context = TContext | undefined;
138 | 
139 |   type Bag = {
140 |     open: boolean;
141 |     setOpen: (value: boolean | ((prev: boolean) => boolean)) => void;
142 | 
143 |     context: Context;
144 |     setContext: (value: Context | ((prev: Context) => Context)) => void;
145 |   };
146 | 
147 |   const thread = useStreamContext<
148 |     { messages: Message[]; ui: UIMessage[] },
149 |     { MetaType: { artifact: [Component, Bag] } }
150 |   >();
151 | 
152 |   return thread.meta?.artifact;
153 | }
154 | ```
155 | 
156 | After which you can render additional content using the `Artifact` component from the `useArtifact` hook:
157 | 
158 | ```tsx
159 | import { useArtifact } from "../utils/use-artifact";
160 | import { LoaderIcon } from "lucide-react";
161 | 
162 | export function Writer(props: {
163 |   title?: string;
164 |   content?: string;
165 |   description?: string;
166 | }) {
167 |   const [Artifact, { open, setOpen }] = useArtifact();
168 | 
169 |   return (
170 |     <>
171 |       <div
172 |         onClick={() => setOpen(!open)}
173 |         className="cursor-pointer rounded-lg border p-4"
174 |       >
175 |         <p className="font-medium">{props.title}</p>
176 |         <p className="text-sm text-gray-500">{props.description}</p>
177 |       </div>
178 | 
179 |       <Artifact title={props.title}>
180 |         <p className="p-4 whitespace-pre-wrap">{props.content}</p>
181 |       </Artifact>
182 |     </>
183 |   );
184 | }
185 | ```
186 | 
187 | ## Going to Production
188 | 
189 | Once you're ready to go to production, you'll need to update how you connect, and authenticate requests to your deployment. By default, the Agent Chat UI is setup for local development, and connects to your LangGraph server directly from the client. This is not possible if you want to go to production, because it requires every user to have their own LangSmith API key, and set the LangGraph configuration themselves.
190 | 
191 | ### Production Setup
192 | 
193 | To productionize the Agent Chat UI, you'll need to pick one of two ways to authenticate requests to your LangGraph server. Below, I'll outline the two options:
194 | 
195 | ### Quickstart - API Passthrough
196 | 
197 | The quickest way to productionize the Agent Chat UI is to use the [API Passthrough](https://github.com/bracesproul/langgraph-nextjs-api-passthrough) package ([NPM link here](https://www.npmjs.com/package/langgraph-nextjs-api-passthrough)). This package provides a simple way to proxy requests to your LangGraph server, and handle authentication for you.
198 | 
199 | This repository already contains all of the code you need to start using this method. The only configuration you need to do is set the proper environment variables.
200 | 
201 | ```bash
202 | NEXT_PUBLIC_ASSISTANT_ID="agent"
203 | # This should be the deployment URL of your LangGraph server
204 | LANGGRAPH_API_URL="https://my-agent.default.us.langgraph.app"
205 | # This should be the URL of your website + "/api". This is how you connect to the API proxy
206 | NEXT_PUBLIC_API_URL="https://my-website.com/api"
207 | # Your LangSmith API key which is injected into requests inside the API proxy
208 | LANGSMITH_API_KEY="lsv2_..."
209 | ```
210 | 
211 | Let's cover what each of these environment variables does:
212 | 
213 | - `NEXT_PUBLIC_ASSISTANT_ID`: The ID of the assistant you want to use when fetching, and submitting runs via the chat interface. This still needs the `NEXT_PUBLIC_` prefix, since it's not a secret, and we use it on the client when submitting requests.
214 | - `LANGGRAPH_API_URL`: The URL of your LangGraph server. This should be the production deployment URL.
215 | - `NEXT_PUBLIC_API_URL`: The URL of your website + `/api`. This is how you connect to the API proxy. For the [Agent Chat demo](https://agentchat.vercel.app), this would be set as `https://agentchat.vercel.app/api`. You should set this to whatever your production URL is.
216 | - `LANGSMITH_API_KEY`: Your LangSmith API key to use when authenticating requests sent to LangGraph servers. Once again, do _not_ prefix this with `NEXT_PUBLIC_` since it's a secret, and is only used on the server when the API proxy injects it into the request to your deployed LangGraph server.
217 | 
218 | For in depth documentation, consult the [LangGraph Next.js API Passthrough](https://www.npmjs.com/package/langgraph-nextjs-api-passthrough) docs.
219 | 
220 | ### Advanced Setup - Custom Authentication
221 | 
222 | Custom authentication in your LangGraph deployment is an advanced, and more robust way of authenticating requests to your LangGraph server. Using custom authentication, you can allow requests to be made from the client, without the need for a LangSmith API key. Additionally, you can specify custom access controls on requests.
223 | 
224 | To set this up in your LangGraph deployment, please read the LangGraph custom authentication docs for [Python](https://langchain-ai.github.io/langgraph/tutorials/auth/getting_started/), and [TypeScript here](https://langchain-ai.github.io/langgraphjs/how-tos/auth/custom_auth/).
225 | 
226 | Once you've set it up on your deployment, you should make the following changes to the Agent Chat UI:
227 | 
228 | 1. Configure any additional API requests to fetch the authentication token from your LangGraph deployment which will be used to authenticate requests from the client.
229 | 2. Set the `NEXT_PUBLIC_API_URL` environment variable to your production LangGraph deployment URL.
230 | 3. Set the `NEXT_PUBLIC_ASSISTANT_ID` environment variable to the ID of the assistant you want to use when fetching, and submitting runs via the chat interface.
231 | 4. Modify the [`useTypedStream`](src/providers/Stream.tsx) (extension of `useStream`) hook to pass your authentication token through headers to the LangGraph server:
232 | 
233 | ```tsx
234 | const streamValue = useTypedStream({
235 |   apiUrl: process.env.NEXT_PUBLIC_API_URL,
236 |   assistantId: process.env.NEXT_PUBLIC_ASSISTANT_ID,
237 |   // ... other fields
238 |   defaultHeaders: {
239 |     Authentication: `Bearer ${addYourTokenHere}`, // this is where you would pass your authentication token
240 |   },
241 | });
242 | ```
243 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/components/thread-actions-view.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useEffect, useMemo, useState } from "react";
  2 | import { Interrupt } from "@langchain/langgraph-sdk";
  3 | import { Button } from "@/components/ui/button";
  4 | import { ThreadIdCopyable } from "./thread-id";
  5 | import { InboxItemInput } from "./inbox-item-input";
  6 | import useInterruptedActions from "../hooks/use-interrupted-actions";
  7 | import { cn } from "@/lib/utils";
  8 | import { toast } from "sonner";
  9 | import { useQueryState } from "nuqs";
 10 | import { constructOpenInStudioURL, buildDecisionFromState } from "../utils";
 11 | import { Decision, HITLRequest, DecisionType, ActionRequest } from "../types";
 12 | import { useStreamContext } from "@/providers/Stream";
 13 | 
 14 | interface ThreadActionsViewProps {
 15 |   interrupt: Interrupt<HITLRequest>;
 16 |   handleShowSidePanel: (showState: boolean, showDescription: boolean) => void;
 17 |   showState: boolean;
 18 |   showDescription: boolean;
 19 | }
 20 | 
 21 | function ButtonGroup({
 22 |   handleShowState,
 23 |   handleShowDescription,
 24 |   showingState,
 25 |   showingDescription,
 26 | }: {
 27 |   handleShowState: () => void;
 28 |   handleShowDescription: () => void;
 29 |   showingState: boolean;
 30 |   showingDescription: boolean;
 31 | }) {
 32 |   return (
 33 |     <div className="flex flex-row items-center justify-center gap-0">
 34 |       <Button
 35 |         variant="outline"
 36 |         className={cn(
 37 |           "rounded-l-md rounded-r-none border-r-[0px]",
 38 |           showingState ? "text-black" : "bg-white",
 39 |         )}
 40 |         size="sm"
 41 |         onClick={handleShowState}
 42 |       >
 43 |         State
 44 |       </Button>
 45 |       <Button
 46 |         variant="outline"
 47 |         className={cn(
 48 |           "rounded-l-none rounded-r-md border-l-[0px]",
 49 |           showingDescription ? "text-black" : "bg-white",
 50 |         )}
 51 |         size="sm"
 52 |         onClick={handleShowDescription}
 53 |       >
 54 |         Description
 55 |       </Button>
 56 |     </div>
 57 |   );
 58 | }
 59 | 
 60 | function isValidHitlRequest(
 61 |   interrupt: Interrupt<HITLRequest>,
 62 | ): interrupt is Interrupt<HITLRequest> & { value: HITLRequest } {
 63 |   return (
 64 |     !!interrupt.value &&
 65 |     Array.isArray(interrupt.value.action_requests) &&
 66 |     interrupt.value.action_requests.length > 0 &&
 67 |     Array.isArray(interrupt.value.review_configs) &&
 68 |     interrupt.value.review_configs.length > 0
 69 |   );
 70 | }
 71 | 
 72 | function getDecisionStatus(
 73 |   decision: Decision | undefined,
 74 | ): DecisionType | null {
 75 |   if (!decision) return null;
 76 |   return decision.type;
 77 | }
 78 | 
 79 | function getActionTitle(action?: ActionRequest) {
 80 |   return action?.name ?? "Unknown interrupt";
 81 | }
 82 | 
 83 | export function ThreadActionsView({
 84 |   interrupt,
 85 |   handleShowSidePanel,
 86 |   showDescription,
 87 |   showState,
 88 | }: ThreadActionsViewProps) {
 89 |   const stream = useStreamContext();
 90 |   const [threadId] = useQueryState("threadId");
 91 |   const [apiUrl] = useQueryState("apiUrl");
 92 |   const [currentIndex, setCurrentIndex] = useState(0);
 93 |   const [addressedActions, setAddressedActions] = useState<
 94 |     Map<number, Decision>
 95 |   >(new Map());
 96 |   const [submittingAll, setSubmittingAll] = useState(false);
 97 | 
 98 |   const hitlValue = interrupt.value;
 99 |   const actionRequests = useMemo(
100 |     () => hitlValue?.action_requests ?? [],
101 |     [hitlValue?.action_requests],
102 |   );
103 |   const reviewConfigs = useMemo(
104 |     () => hitlValue?.review_configs ?? [],
105 |     [hitlValue?.review_configs],
106 |   );
107 | 
108 |   const hasMultipleActions = actionRequests.length > 1;
109 |   const currentAction = actionRequests[currentIndex];
110 |   const matchingConfig =
111 |     reviewConfigs.find(
112 |       (config) => config.action_name === currentAction?.name,
113 |     ) ?? reviewConfigs[currentIndex];
114 | 
115 |   const singleActionInterrupt = useMemo(() => {
116 |     if (!currentAction || !matchingConfig) {
117 |       return interrupt;
118 |     }
119 | 
120 |     return {
121 |       ...interrupt,
122 |       value: {
123 |         action_requests: [currentAction],
124 |         review_configs: [matchingConfig],
125 |       },
126 |     };
127 |   }, [interrupt, currentAction, matchingConfig]);
128 | 
129 |   const {
130 |     approveAllowed,
131 |     hasEdited,
132 |     hasAddedResponse,
133 |     streaming,
134 |     supportsMultipleMethods,
135 |     streamFinished,
136 |     loading,
137 |     handleSubmit,
138 |     handleResolve,
139 |     setSelectedSubmitType,
140 |     setHasAddedResponse,
141 |     setHasEdited,
142 |     humanResponse,
143 |     setHumanResponse,
144 |     selectedSubmitType,
145 |     initialHumanInterruptEditValue,
146 |   } = useInterruptedActions({
147 |     interrupt: singleActionInterrupt,
148 |   });
149 | 
150 |   useEffect(() => {
151 |     setCurrentIndex(0);
152 |     setAddressedActions(new Map());
153 |   }, [interrupt]);
154 | 
155 |   const handleOpenInStudio = () => {
156 |     if (!apiUrl) {
157 |       toast.error("Error", {
158 |         description: "Please set the LangGraph deployment URL in settings.",
159 |         duration: 5000,
160 |         richColors: true,
161 |         closeButton: true,
162 |       });
163 |       return;
164 |     }
165 | 
166 |     const studioUrl = constructOpenInStudioURL(apiUrl, threadId ?? undefined);
167 |     window.open(studioUrl, "_blank");
168 |   };
169 | 
170 |   const handleApproveAll = useCallback(() => {
171 |     if (!hasMultipleActions) return;
172 | 
173 |     try {
174 |       const allDecisions: Decision[] = actionRequests.map(() => ({
175 |         type: "approve",
176 |       }));
177 | 
178 |       stream.submit(
179 |         {},
180 |         {
181 |           command: {
182 |             resume: { decisions: allDecisions },
183 |           },
184 |         },
185 |       );
186 | 
187 |       toast("Success", {
188 |         description: "All actions approved successfully.",
189 |         duration: 5000,
190 |       });
191 |     } catch (error) {
192 |       console.error("Error approving all actions", error);
193 |       toast.error("Error", {
194 |         description: "Failed to approve all actions.",
195 |         richColors: true,
196 |         closeButton: true,
197 |         duration: 5000,
198 |       });
199 |     }
200 |   }, [actionRequests, hasMultipleActions, stream]);
201 | 
202 |   const handleSubmitAll = useCallback(() => {
203 |     if (!hasMultipleActions) return;
204 | 
205 |     if (addressedActions.size !== actionRequests.length) {
206 |       toast.error("Error", {
207 |         description: `Please address all ${actionRequests.length} actions before submitting.`,
208 |         richColors: true,
209 |         closeButton: true,
210 |         duration: 5000,
211 |       });
212 |       return;
213 |     }
214 | 
215 |     try {
216 |       setSubmittingAll(true);
217 |       const allDecisions = actionRequests.map((_, index) => {
218 |         const decision = addressedActions.get(index);
219 |         if (!decision) {
220 |           throw new Error(`Missing decision for action ${index + 1}`);
221 |         }
222 |         return decision;
223 |       });
224 | 
225 |       stream.submit(
226 |         {},
227 |         {
228 |           command: {
229 |             resume: { decisions: allDecisions },
230 |           },
231 |         },
232 |       );
233 | 
234 |       toast("Success", {
235 |         description: "All actions submitted successfully.",
236 |         duration: 5000,
237 |       });
238 |       setAddressedActions(new Map());
239 |     } catch (error) {
240 |       console.error("Error submitting all actions", error);
241 |       toast.error("Error", {
242 |         description: "Failed to submit actions.",
243 |         richColors: true,
244 |         closeButton: true,
245 |         duration: 5000,
246 |       });
247 |     } finally {
248 |       setSubmittingAll(false);
249 |     }
250 |   }, [actionRequests, addressedActions, hasMultipleActions, stream]);
251 | 
252 |   const allAllowApprove = useMemo(() => {
253 |     if (!hasMultipleActions) return false;
254 |     return actionRequests.every((actionRequest) => {
255 |       const matching = reviewConfigs.find(
256 |         (config) => config.action_name === actionRequest.name,
257 |       );
258 |       return matching?.allowed_decisions.includes("approve");
259 |     });
260 |   }, [actionRequests, reviewConfigs, hasMultipleActions]);
261 | 
262 |   const handleSaveDecision = () => {
263 |     const { decision, error } = buildDecisionFromState(
264 |       humanResponse,
265 |       selectedSubmitType,
266 |     );
267 | 
268 |     if (!decision || error) {
269 |       toast.error("Error", {
270 |         description: error ?? "Unable to determine decision.",
271 |         richColors: true,
272 |         closeButton: true,
273 |         duration: 5000,
274 |       });
275 |       return;
276 |     }
277 | 
278 |     setAddressedActions((prev) => {
279 |       const next = new Map(prev);
280 |       next.set(currentIndex, decision);
281 |       return next;
282 |     });
283 | 
284 |     toast("Success", {
285 |       description: `Action ${currentIndex + 1} captured.`,
286 |       duration: 3000,
287 |     });
288 | 
289 |     if (currentIndex < actionRequests.length - 1) {
290 |       setCurrentIndex((prev) => Math.min(actionRequests.length - 1, prev + 1));
291 |     }
292 |   };
293 | 
294 |   const currentTitle = getActionTitle(currentAction);
295 |   const actionsDisabled = loading || streaming || submittingAll;
296 |   const hasAllDecisions =
297 |     hasMultipleActions && addressedActions.size === actionRequests.length;
298 | 
299 |   if (!isValidHitlRequest(interrupt)) {
300 |     return (
301 |       <div className="flex min-h-full w-full flex-col items-center justify-center rounded-2xl bg-gray-50/50 p-8">
302 |         <p className="text-sm text-gray-600">
303 |           Unable to render interrupt. The data provided is not in the expected
304 |           HITL format.
305 |         </p>
306 |       </div>
307 |     );
308 |   }
309 |   const interruptValue = singleActionInterrupt.value as HITLRequest;
310 | 
311 |   return (
312 |     <div className="flex min-h-full w-full max-w-full flex-col gap-9">
313 |       <div className="flex w-full flex-wrap items-center justify-between gap-3">
314 |         <div className="flex items-center justify-start gap-3">
315 |           <p className="text-2xl tracking-tighter text-pretty">
316 |             {hasMultipleActions
317 |               ? `${currentTitle} (${currentIndex + 1}/${actionRequests.length})`
318 |               : currentTitle}
319 |           </p>
320 |           {threadId && <ThreadIdCopyable threadId={threadId} />}
321 |         </div>
322 |         <div className="flex flex-row items-center justify-start gap-2">
323 |           {apiUrl && (
324 |             <Button
325 |               size="sm"
326 |               variant="outline"
327 |               className="flex items-center gap-1 bg-white"
328 |               onClick={handleOpenInStudio}
329 |             >
330 |               Studio
331 |             </Button>
332 |           )}
333 |           <ButtonGroup
334 |             handleShowState={() => handleShowSidePanel(true, false)}
335 |             handleShowDescription={() => handleShowSidePanel(false, true)}
336 |             showingState={showState}
337 |             showingDescription={showDescription}
338 |           />
339 |         </div>
340 |       </div>
341 | 
342 |       <div className="flex w-full flex-row flex-wrap items-center justify-start gap-2">
343 |         <Button
344 |           variant="outline"
345 |           className="border-gray-500 bg-white font-normal text-gray-800"
346 |           onClick={handleResolve}
347 |           disabled={actionsDisabled}
348 |         >
349 |           Mark as Resolved
350 |         </Button>
351 |         {hasMultipleActions && allAllowApprove && (
352 |           <Button
353 |             variant="outline"
354 |             className="border-gray-500 bg-white font-normal text-gray-800"
355 |             onClick={handleApproveAll}
356 |             disabled={actionsDisabled}
357 |           >
358 |             Approve All
359 |           </Button>
360 |         )}
361 |       </div>
362 | 
363 |       {hasMultipleActions && (
364 |         <div className="flex w-full items-center gap-2">
365 |           {actionRequests.map((_, index) => {
366 |             const status = getDecisionStatus(addressedActions.get(index));
367 |             return (
368 |               <button
369 |                 type="button"
370 |                 key={index}
371 |                 onClick={() => setCurrentIndex(index)}
372 |                 className={cn(
373 |                   "h-2 flex-1 rounded-full border transition-colors",
374 |                   "border-gray-300 bg-gray-200",
375 |                   status === "approve" && "border-emerald-500 bg-emerald-200",
376 |                   status === "reject" && "border-red-500 bg-red-200",
377 |                   status === "edit" && "border-amber-500 bg-amber-200",
378 |                   index === currentIndex &&
379 |                     "outline-primary outline-2 outline-offset-2",
380 |                 )}
381 |               >
382 |                 <span className="sr-only">Action {index + 1}</span>
383 |               </button>
384 |             );
385 |           })}
386 |         </div>
387 |       )}
388 | 
389 |       <InboxItemInput
390 |         approveAllowed={approveAllowed}
391 |         hasEdited={hasEdited}
392 |         hasAddedResponse={hasAddedResponse}
393 |         interruptValue={interruptValue}
394 |         humanResponse={humanResponse}
395 |         initialValues={initialHumanInterruptEditValue.current}
396 |         setHumanResponse={setHumanResponse}
397 |         supportsMultipleMethods={supportsMultipleMethods}
398 |         setSelectedSubmitType={setSelectedSubmitType}
399 |         setHasAddedResponse={setHasAddedResponse}
400 |         setHasEdited={setHasEdited}
401 |         handleSubmit={hasMultipleActions ? handleSaveDecision : handleSubmit}
402 |         isLoading={hasMultipleActions ? submittingAll : loading}
403 |         selectedSubmitType={selectedSubmitType}
404 |       />
405 | 
406 |       {hasMultipleActions && (
407 |         <div className="flex w-full items-center justify-between">
408 |           <div className="flex gap-2">
409 |             <Button
410 |               variant="outline"
411 |               size="sm"
412 |               disabled={currentIndex === 0}
413 |               onClick={() => setCurrentIndex((prev) => Math.max(0, prev - 1))}
414 |             >
415 |               Previous
416 |             </Button>
417 |             <Button
418 |               variant="outline"
419 |               size="sm"
420 |               disabled={currentIndex === actionRequests.length - 1}
421 |               onClick={() =>
422 |                 setCurrentIndex((prev) =>
423 |                   Math.min(actionRequests.length - 1, prev + 1),
424 |                 )
425 |               }
426 |             >
427 |               Next
428 |             </Button>
429 |           </div>
430 |           <Button
431 |             variant="brand"
432 |             disabled={!hasAllDecisions || submittingAll}
433 |             onClick={handleSubmitAll}
434 |           >
435 |             {submittingAll
436 |               ? "Submitting..."
437 |               : `Submit all ${actionRequests.length} decisions`}
438 |           </Button>
439 |         </div>
440 |       )}
441 | 
442 |       {!hasMultipleActions && streamFinished && (
443 |         <p className="text-base font-medium text-green-600">
444 |           Successfully finished Graph invocation.
445 |         </p>
446 |       )}
447 |     </div>
448 |   );
449 | }
450 | 


--------------------------------------------------------------------------------
/src/components/thread/agent-inbox/components/inbox-item-input.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { DecisionWithEdits, SubmitType, HITLRequest } from "../types";
  3 | import { Textarea } from "@/components/ui/textarea";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Separator } from "@/components/ui/separator";
  6 | import { Undo2 } from "lucide-react";
  7 | import { MarkdownText } from "../../markdown-text";
  8 | import { haveArgsChanged, prettifyText } from "../utils";
  9 | import { toast } from "sonner";
 10 | 
 11 | function ResetButton({ handleReset }: { handleReset: () => void }) {
 12 |   return (
 13 |     <Button
 14 |       onClick={handleReset}
 15 |       variant="ghost"
 16 |       className="flex items-center justify-center gap-2 text-gray-500 hover:text-red-500"
 17 |     >
 18 |       <Undo2 className="h-4 w-4" />
 19 |       <span>Reset</span>
 20 |     </Button>
 21 |   );
 22 | }
 23 | 
 24 | function ArgsRenderer({ args }: { args: Record<string, unknown> }) {
 25 |   return (
 26 |     <div className="flex w-full flex-col items-start gap-6">
 27 |       {Object.entries(args).map(([key, value]) => {
 28 |         const stringValue =
 29 |           typeof value === "string" || typeof value === "number"
 30 |             ? value.toString()
 31 |             : JSON.stringify(value, null);
 32 | 
 33 |         return (
 34 |           <div
 35 |             key={`args-${key}`}
 36 |             className="flex flex-col items-start gap-1"
 37 |           >
 38 |             <p className="text-sm leading-[18px] text-wrap text-gray-600">
 39 |               {prettifyText(key)}
 40 |             </p>
 41 |             <span className="w-full max-w-full rounded-xl bg-zinc-100 p-3 text-[13px] leading-[18px] text-black">
 42 |               <MarkdownText>{stringValue}</MarkdownText>
 43 |             </span>
 44 |           </div>
 45 |         );
 46 |       })}
 47 |     </div>
 48 |   );
 49 | }
 50 | 
 51 | interface InboxItemInputProps {
 52 |   interruptValue: HITLRequest;
 53 |   humanResponse: DecisionWithEdits[];
 54 |   supportsMultipleMethods: boolean;
 55 |   approveAllowed: boolean;
 56 |   hasEdited: boolean;
 57 |   hasAddedResponse: boolean;
 58 |   initialValues: Record<string, string>;
 59 |   isLoading: boolean;
 60 |   selectedSubmitType: SubmitType | undefined;
 61 | 
 62 |   setHumanResponse: React.Dispatch<React.SetStateAction<DecisionWithEdits[]>>;
 63 |   setSelectedSubmitType: React.Dispatch<
 64 |     React.SetStateAction<SubmitType | undefined>
 65 |   >;
 66 |   setHasAddedResponse: React.Dispatch<React.SetStateAction<boolean>>;
 67 |   setHasEdited: React.Dispatch<React.SetStateAction<boolean>>;
 68 | 
 69 |   handleSubmit: (
 70 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent,
 71 |   ) => Promise<void> | void;
 72 | }
 73 | 
 74 | function ApproveOnly({
 75 |   isLoading,
 76 |   actionRequestArgs,
 77 |   handleSubmit,
 78 | }: {
 79 |   isLoading: boolean;
 80 |   actionRequestArgs: Record<string, unknown>;
 81 |   handleSubmit: (
 82 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent,
 83 |   ) => Promise<void> | void;
 84 | }) {
 85 |   return (
 86 |     <div className="flex w-full flex-col items-start gap-4 rounded-lg border border-gray-300 p-6">
 87 |       {Object.keys(actionRequestArgs).length > 0 && (
 88 |         <ArgsRenderer args={actionRequestArgs} />
 89 |       )}
 90 |       <Button
 91 |         variant="brand"
 92 |         disabled={isLoading}
 93 |         onClick={handleSubmit}
 94 |         className="w-full"
 95 |       >
 96 |         Approve
 97 |       </Button>
 98 |     </div>
 99 |   );
100 | }
101 | 
102 | function EditActionCard({
103 |   humanResponse,
104 |   isLoading,
105 |   initialValues,
106 |   onEditChange,
107 |   handleSubmit,
108 |   actionArgs,
109 | }: {
110 |   humanResponse: DecisionWithEdits[];
111 |   isLoading: boolean;
112 |   initialValues: Record<string, string>;
113 |   actionArgs: Record<string, unknown>;
114 |   onEditChange: (
115 |     text: string | string[],
116 |     response: DecisionWithEdits,
117 |     key: string | string[],
118 |   ) => void;
119 |   handleSubmit: (
120 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent,
121 |   ) => Promise<void> | void;
122 | }) {
123 |   const defaultRows = React.useRef<Record<string, number>>({});
124 |   const editResponse = humanResponse.find(
125 |     (response) => response.type === "edit",
126 |   );
127 |   const approveResponse = humanResponse.find(
128 |     (response) => response.type === "approve",
129 |   );
130 | 
131 |   if (
132 |     !editResponse ||
133 |     editResponse.type !== "edit" ||
134 |     typeof editResponse.edited_action !== "object" ||
135 |     !editResponse.edited_action
136 |   ) {
137 |     if (approveResponse) {
138 |       return (
139 |         <ApproveOnly
140 |           actionRequestArgs={actionArgs}
141 |           isLoading={isLoading}
142 |           handleSubmit={handleSubmit}
143 |         />
144 |       );
145 |     }
146 |     return null;
147 |   }
148 | 
149 |   const header = editResponse.acceptAllowed ? "Edit/Approve" : "Edit";
150 |   const buttonText =
151 |     editResponse.acceptAllowed && !editResponse.editsMade
152 |       ? "Approve"
153 |       : "Submit";
154 | 
155 |   const handleReset = () => {
156 |     if (!editResponse.edited_action?.args) {
157 |       return;
158 |     }
159 | 
160 |     const keysToReset: string[] = [];
161 |     const valuesToReset: string[] = [];
162 |     Object.entries(initialValues).forEach(([key, value]) => {
163 |       if (key in editResponse.edited_action.args) {
164 |         const stringValue =
165 |           typeof value === "string" || typeof value === "number"
166 |             ? value.toString()
167 |             : JSON.stringify(value, null);
168 |         keysToReset.push(key);
169 |         valuesToReset.push(stringValue);
170 |       }
171 |     });
172 | 
173 |     if (keysToReset.length > 0 && valuesToReset.length > 0) {
174 |       onEditChange(valuesToReset, editResponse, keysToReset);
175 |     }
176 |   };
177 | 
178 |   const handleKeyDown = (event: React.KeyboardEvent) => {
179 |     if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
180 |       event.preventDefault();
181 |       handleSubmit(event);
182 |     }
183 |   };
184 | 
185 |   return (
186 |     <div className="flex w-full min-w-full flex-col items-start gap-4 rounded-lg border border-gray-300 p-6">
187 |       <div className="flex w-full items-center justify-between">
188 |         <p className="text-base font-semibold text-black">{header}</p>
189 |         <ResetButton handleReset={handleReset} />
190 |       </div>
191 | 
192 |       {Object.entries(editResponse.edited_action.args).map(
193 |         ([key, value], idx) => {
194 |           const stringValue =
195 |             typeof value === "string" || typeof value === "number"
196 |               ? value.toString()
197 |               : JSON.stringify(value, null);
198 | 
199 |           if (defaultRows.current[key] === undefined) {
200 |             defaultRows.current[key] = !stringValue.length
201 |               ? 3
202 |               : Math.max(stringValue.length / 30, 7);
203 |           }
204 | 
205 |           return (
206 |             <div
207 |               className="flex h-full w-full flex-col items-start gap-1 px-[1px]"
208 |               key={`allow-edit-args--${key}-${idx}`}
209 |             >
210 |               <div className="flex w-full flex-col items-start gap-[6px]">
211 |                 <p className="min-w-fit text-sm font-medium">
212 |                   {prettifyText(key)}
213 |                 </p>
214 |                 <Textarea
215 |                   disabled={isLoading}
216 |                   className="h-full w-full max-w-full"
217 |                   value={stringValue}
218 |                   onChange={(event) =>
219 |                     onEditChange(event.target.value, editResponse, key)
220 |                   }
221 |                   onKeyDown={handleKeyDown}
222 |                   rows={defaultRows.current[key] || 8}
223 |                 />
224 |               </div>
225 |             </div>
226 |           );
227 |         },
228 |       )}
229 | 
230 |       <div className="flex w-full items-center justify-end gap-2">
231 |         <Button
232 |           variant="brand"
233 |           disabled={isLoading}
234 |           onClick={handleSubmit}
235 |         >
236 |           {buttonText}
237 |         </Button>
238 |       </div>
239 |     </div>
240 |   );
241 | }
242 | const EditAndApprove = React.memo(EditActionCard);
243 | 
244 | function RejectActionCard({
245 |   humanResponse,
246 |   isLoading,
247 |   onChange,
248 |   handleSubmit,
249 |   showArgs,
250 |   actionArgs,
251 | }: {
252 |   humanResponse: DecisionWithEdits[];
253 |   isLoading: boolean;
254 |   onChange: (value: string, response: DecisionWithEdits) => void;
255 |   handleSubmit: (
256 |     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent,
257 |   ) => Promise<void> | void;
258 |   showArgs: boolean;
259 |   actionArgs: Record<string, unknown>;
260 | }) {
261 |   const rejectResponse = humanResponse.find(
262 |     (response) => response.type === "reject",
263 |   );
264 | 
265 |   if (!rejectResponse) {
266 |     return null;
267 |   }
268 | 
269 |   const handleKeyDown = (event: React.KeyboardEvent) => {
270 |     if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
271 |       event.preventDefault();
272 |       handleSubmit(event);
273 |     }
274 |   };
275 | 
276 |   return (
277 |     <div className="flex w-full max-w-full flex-col items-start gap-4 rounded-xl border border-gray-300 p-6">
278 |       <div className="flex w-full items-center justify-between">
279 |         <p className="text-base font-semibold text-black">Reject</p>
280 |         <ResetButton handleReset={() => onChange("", rejectResponse)} />
281 |       </div>
282 | 
283 |       {showArgs && <ArgsRenderer args={actionArgs} />}
284 | 
285 |       <div className="flex w-full flex-col items-start gap-[6px]">
286 |         <p className="min-w-fit text-sm font-medium">Reason</p>
287 |         <Textarea
288 |           disabled={isLoading}
289 |           className="w-full max-w-full"
290 |           value={rejectResponse.message ?? ""}
291 |           onChange={(event) => onChange(event.target.value, rejectResponse)}
292 |           onKeyDown={handleKeyDown}
293 |           rows={4}
294 |           placeholder="Share feedback with the agent..."
295 |         />
296 |       </div>
297 | 
298 |       <div className="flex w-full items-center justify-end gap-2">
299 |         <Button
300 |           variant="brand"
301 |           disabled={isLoading}
302 |           onClick={handleSubmit}
303 |         >
304 |           Submit rejection
305 |         </Button>
306 |       </div>
307 |     </div>
308 |   );
309 | }
310 | const RejectCard = React.memo(RejectActionCard);
311 | 
312 | export function InboxItemInput({
313 |   interruptValue,
314 |   humanResponse,
315 |   approveAllowed,
316 |   hasEdited,
317 |   hasAddedResponse,
318 |   initialValues,
319 |   isLoading,
320 |   supportsMultipleMethods,
321 |   selectedSubmitType,
322 |   setHumanResponse,
323 |   setSelectedSubmitType,
324 |   setHasAddedResponse,
325 |   setHasEdited,
326 |   handleSubmit,
327 | }: InboxItemInputProps) {
328 |   const allowedDecisions =
329 |     interruptValue.review_configs?.[0]?.allowed_decisions ?? [];
330 |   const actionRequest = interruptValue.action_requests?.[0];
331 |   const actionArgs = actionRequest?.args ?? {};
332 |   const isEditAllowed = allowedDecisions.includes("edit");
333 |   const isRejectAllowed = allowedDecisions.includes("reject");
334 |   const hasArgs = Object.keys(actionArgs).length > 0;
335 |   const showArgsInReject =
336 |     hasArgs && !isEditAllowed && !approveAllowed && isRejectAllowed;
337 |   const showArgsOutsideCards =
338 |     hasArgs && !showArgsInReject && !isEditAllowed && !approveAllowed;
339 | 
340 |   const onEditChange = (
341 |     change: string | string[],
342 |     response: DecisionWithEdits,
343 |     key: string | string[],
344 |   ) => {
345 |     if (
346 |       (Array.isArray(change) && !Array.isArray(key)) ||
347 |       (!Array.isArray(change) && Array.isArray(key))
348 |     ) {
349 |       toast.error("Error", {
350 |         description: "Unable to update edited values.",
351 |         richColors: true,
352 |         closeButton: true,
353 |       });
354 |       return;
355 |     }
356 | 
357 |     let valuesChanged = true;
358 |     if (response.type === "edit" && response.edited_action) {
359 |       const updatedArgs = { ...(response.edited_action.args || {}) };
360 | 
361 |       if (Array.isArray(change) && Array.isArray(key)) {
362 |         change.forEach((value, index) => {
363 |           if (index < key.length) {
364 |             updatedArgs[key[index]] = value;
365 |           }
366 |         });
367 |       } else {
368 |         updatedArgs[key as string] = change as string;
369 |       }
370 | 
371 |       valuesChanged = haveArgsChanged(updatedArgs, initialValues);
372 |     }
373 | 
374 |     if (!valuesChanged) {
375 |       setHasEdited(false);
376 |       if (approveAllowed) {
377 |         setSelectedSubmitType("approve");
378 |       } else if (hasAddedResponse) {
379 |         setSelectedSubmitType("reject");
380 |       }
381 |     } else {
382 |       setSelectedSubmitType("edit");
383 |       setHasEdited(true);
384 |     }
385 | 
386 |     setHumanResponse((prev) => {
387 |       if (response.type !== "edit" || !response.edited_action) {
388 |         console.error("Mismatched response type for edit", response.type);
389 |         return prev;
390 |       }
391 | 
392 |       const newArgs =
393 |         Array.isArray(change) && Array.isArray(key)
394 |           ? {
395 |               ...response.edited_action.args,
396 |               ...Object.fromEntries(key.map((k, index) => [k, change[index]])),
397 |             }
398 |           : {
399 |               ...response.edited_action.args,
400 |               [key as string]: change as string,
401 |             };
402 | 
403 |       const newEdit: DecisionWithEdits = {
404 |         type: "edit",
405 |         edited_action: {
406 |           name: response.edited_action.name,
407 |           args: newArgs,
408 |         },
409 |       };
410 | 
411 |       return prev.map((existing) => {
412 |         if (existing.type !== "edit") {
413 |           return existing;
414 |         }
415 | 
416 |         if (existing.acceptAllowed) {
417 |           return {
418 |             ...newEdit,
419 |             acceptAllowed: true,
420 |             editsMade: valuesChanged,
421 |           };
422 |         }
423 | 
424 |         return newEdit;
425 |       });
426 |     });
427 |   };
428 | 
429 |   const onRejectChange = (change: string, response: DecisionWithEdits) => {
430 |     if (response.type !== "reject") {
431 |       console.error("Mismatched response type for rejection");
432 |       return;
433 |     }
434 | 
435 |     const trimmed = change.trim();
436 |     setHasAddedResponse(!!trimmed);
437 | 
438 |     if (!trimmed) {
439 |       if (hasEdited) {
440 |         setSelectedSubmitType("edit");
441 |       } else if (approveAllowed) {
442 |         setSelectedSubmitType("approve");
443 |       }
444 |     } else {
445 |       setSelectedSubmitType("reject");
446 |     }
447 | 
448 |     setHumanResponse((prev) =>
449 |       prev.map((existing) =>
450 |         existing.type === "reject"
451 |           ? { type: "reject", message: change }
452 |           : existing,
453 |       ),
454 |     );
455 |   };
456 | 
457 |   return (
458 |     <div className="flex w-full max-w-full flex-col items-start justify-start gap-2">
459 |       {showArgsOutsideCards && <ArgsRenderer args={actionArgs} />}
460 | 
461 |       <div className="flex w-full flex-col items-stretch gap-2">
462 |         <EditAndApprove
463 |           humanResponse={humanResponse}
464 |           isLoading={isLoading}
465 |           initialValues={initialValues}
466 |           actionArgs={actionArgs}
467 |           onEditChange={onEditChange}
468 |           handleSubmit={handleSubmit}
469 |         />
470 | 
471 |         {supportsMultipleMethods ? (
472 |           <div className="mx-auto mt-3 flex items-center gap-3">
473 |             <Separator className="w-full" />
474 |             <p className="text-sm text-gray-500">Or</p>
475 |             <Separator className="w-full" />
476 |           </div>
477 |         ) : null}
478 | 
479 |         <RejectCard
480 |           humanResponse={humanResponse}
481 |           isLoading={isLoading}
482 |           showArgs={showArgsInReject}
483 |           actionArgs={actionArgs}
484 |           onChange={onRejectChange}
485 |           handleSubmit={handleSubmit}
486 |         />
487 | 
488 |         {isLoading && (
489 |           <p className="text-sm text-gray-600">Submitting decision...</p>
490 |         )}
491 |         {selectedSubmitType && supportsMultipleMethods && (
492 |           <p className="text-xs text-gray-500">
493 |             Currently selected: {prettifyText(selectedSubmitType)}
494 |           </p>
495 |         )}
496 |       </div>
497 |     </div>
498 |   );
499 | }
500 | 


--------------------------------------------------------------------------------