@langgraph-js/ui 3.0.0 → 3.1.0

package/src/chat/tools/create_artifacts.tsx

@@ -1,47 +1,31 @@
-import { createUITool, ToolRenderData } from "@langgraph-js/sdk";
+import { ArtifactCommand, createUITool, ToolRenderData } from "@langgraph-js/sdk";
 import { FileIcon } from "lucide-react";
-import { useState } from "react";
-import { useArtifacts } from "../../artifacts/ArtifactsContext";
-
-interface ArtifactsInput {
-    filename: string;
-    filetype: string;
-    code: string;
-}
-
-interface ArtifactsResponse {
-    success: boolean;
-    message: string;
-    artifactsPath?: string;
-}
+import { useChat } from "@langgraph-js/sdk/react";
 
 export const create_artifacts = createUITool({
     name: "create_artifacts",
     description: "创建并保存代码文件到 artifacts 目录",
     parameters: {},
     onlyRender: true,
-    render(tool: ToolRenderData<ArtifactsInput, ArtifactsResponse>) {
-        const data = tool.getInputRepaired();
-        const { setCurrentArtifactById, currentArtifact } = useArtifacts();
+    render(tool: any) {
+        const data: ArtifactCommand = tool.getInputRepaired();
+        const { setCurrentArtifactById, setShowArtifact } = useChat();
 
         const toggleExpand = () => {
-            setCurrentArtifactById(tool.message.id!);
+            console.log(data.id, tool.message.id);
+            setCurrentArtifactById(data.id, tool.message.id!);
+            setShowArtifact(true);
         };
 
         return (
             <div className="p-4 space-y-4">
-                <div className="text-sm text-gray-500">
-                    创建文件: {data.filename}.{data.filetype}
-                </div>
+                <div className="text-sm text-gray-500">创建文件: {data.title}</div>
                 <div className="border rounded-lg p-2 hover:bg-gray-50">
                     <div className="flex items-center justify-between select-none cursor-pointer" onClick={toggleExpand}>
                         <div className="flex items-center gap-2">
                             <FileIcon className="w-4 h-4" />
-                            <span className="font-xs">{data.filename}</span>
+                            <span className="font-xs">{data.title}</span> version: {data.id}
                         </div>
-                        <span className="text-gray-400">
-                            {data.filetype} {currentArtifact?.id === tool.message.id ? "▼" : "▶"}
-                        </span>
                     </div>
                 </div>
             </div>

package/src/components/ai-elements/code-block.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { createContext, useContext, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  oneDark,
+  oneLight,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+type CodeBlockContextType = {
+  code: string;
+};
+
+const CodeBlockContext = createContext<CodeBlockContextType>({
+  code: "",
+});
+
+export type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+  code: string;
+  language: string;
+  showLineNumbers?: boolean;
+  children?: ReactNode;
+};
+
+export const CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}: CodeBlockProps) => (
+  <CodeBlockContext.Provider value={{ code }}>
+    <div
+      className={cn(
+        "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative">
+        <SyntaxHighlighter
+          className="overflow-hidden dark:hidden"
+          codeTagProps={{
+            className: "font-mono text-sm",
+          }}
+          customStyle={{
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            background: "hsl(var(--background))",
+            color: "hsl(var(--foreground))",
+          }}
+          language={language}
+          lineNumberStyle={{
+            color: "hsl(var(--muted-foreground))",
+            paddingRight: "1rem",
+            minWidth: "2.5rem",
+          }}
+          showLineNumbers={showLineNumbers}
+          style={oneLight}
+        >
+          {code}
+        </SyntaxHighlighter>
+        <SyntaxHighlighter
+          className="hidden overflow-hidden dark:block"
+          codeTagProps={{
+            className: "font-mono text-sm",
+          }}
+          customStyle={{
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            background: "hsl(var(--background))",
+            color: "hsl(var(--foreground))",
+          }}
+          language={language}
+          lineNumberStyle={{
+            color: "hsl(var(--muted-foreground))",
+            paddingRight: "1rem",
+            minWidth: "2.5rem",
+          }}
+          showLineNumbers={showLineNumbers}
+          style={oneDark}
+        >
+          {code}
+        </SyntaxHighlighter>
+        {children && (
+          <div className="absolute top-2 right-2 flex items-center gap-2">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  </CodeBlockContext.Provider>
+);
+
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export const CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeBlockCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { code } = useContext(CodeBlockContext);
+
+  const copyToClipboard = async () => {
+    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(code);
+      setIsCopied(true);
+      onCopy?.();
+      setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <Button
+      className={cn("shrink-0", className)}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </Button>
+  );
+};

package/src/components/ai-elements/response.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { type ComponentProps, memo } from "react";
+import { Streamdown } from "streamdown";
+
+type ResponseProps = ComponentProps<typeof Streamdown>;
+
+export const Response = memo(
+  ({ className, ...props }: ResponseProps) => (
+    <Streamdown
+      className={cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      )}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+
+Response.displayName = "Response";

package/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/graph/index.tsx

@@ -1,7 +1,7 @@
 import { ReactFlow, Background, Controls, Node, Edge, ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, Panel } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { useCallback, useEffect } from "react";
-import { useChat } from "../chat/context/ChatContext";
+import { useChat } from "@langgraph-js/sdk/react";
 import Dagre from "@dagrejs/dagre";
 import { flattenGraph } from "./flattenGraph";
 import { AssistantGraph } from "@langgraph-js/sdk";

package/src/index.css

@@ -0,0 +1,121 @@
+@source "../node_modules/streamdown/dist/index.js";
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}

package/src/index.ts

@@ -1,4 +1,3 @@
-import "virtual:uno.css";
+import "./index.css";
 import "@andypf/json-viewer/dist/iife/index.js";
 export { default as Chat } from "./chat/Chat";
-export { Toaster, toast } from "./sonner";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/settings/LoginSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, ChangeEvent } from "react";
-import { toast } from "../sonner";
+import { toast } from "sonner";
 
 interface HeaderConfig {
     key: string;

package/src/settings/SettingPanel.tsx

@@ -45,7 +45,7 @@ const SettingPanel: React.FC<SettingPanelProps> = ({ isOpen, onClose, tabs: exte
     if (!isOpen) return null;
 
     return (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm">
+        <div className="fixed inset-0 bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm">
             <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl h-[80vh] flex flex-col relative overflow-hidden ring-1 ring-gray-900/5 dark:ring-white/10">
                 {/* 关闭按钮 */}
                 <button

package/test/main.tsx

@@ -1,5 +1,3 @@
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import "@unocss/reset/tailwind-compat.css";
-import "virtual:uno.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

package/tsconfig.json

@@ -14,7 +14,11 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
-        "jsx": "react-jsx"
+        "jsx": "react-jsx",
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        }
     },
     "include": ["test", "test/**/*.tsx"],
     "references": [{ "path": "./tsconfig.node.json" }]

package/tsconfig.node.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "composite": true,
         "module": "esnext",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "allowSyntheticDefaultImports": true
     },
     "include": ["vite.config.ts"]

package/vite.config.ts

@@ -1,16 +1,16 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import basicSsl from "@vitejs/plugin-basic-ssl";
-import path from "node:path";
-import UnoCSS from "unocss/vite";
+import tailwindcss from "@tailwindcss/vite";
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
     const isHttps = mode === "https";
     return {
-        plugins: [UnoCSS(), react(), isHttps ? basicSsl() : undefined],
+        plugins: [react(), tailwindcss(), isHttps ? basicSsl() : undefined],
         resolve: {
             alias: {
                 "@langgraph-js/sdk": new URL("../langgraph-client/src", import.meta.url).pathname,
+                "@/": new URL("./src/", import.meta.url).pathname,
             },
         },
         optimizeDeps: {