@langgraph-js/ui 1.6.0 → 1.7.1

package/src/chat/components/MessageBox.tsx

@@ -3,7 +3,6 @@ import MessageHuman from "./MessageHuman";
 import MessageAI from "./MessageAI";
 import MessageTool from "./MessageTool";
 import { formatTokens, getMessageContent, LangGraphClient, RenderMessage } from "@langgraph-js/sdk";
-import { motion } from "motion/react";
 
 export const MessagesBox = ({
     renderMessages,
@@ -19,7 +18,7 @@ export const MessagesBox = ({
     return (
         <div className="flex flex-col gap-4 w-full">
             {renderMessages.map((message, index) => (
-                <motion.div key={message.unique_id} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, delay: index * 0.1 }}>
+                <div key={message.unique_id}>
                     {message.type === "human" ? (
                         <MessageHuman content={message.content} />
                     ) : message.type === "tool" ? (
@@ -34,7 +33,7 @@ export const MessagesBox = ({
                     ) : (
                         <MessageAI message={message} />
                     )}
-                </motion.div>
+                </div>
             ))}
         </div>
     );

package/src/chat/components/MessageTool.tsx

@@ -4,6 +4,9 @@ import { UsageMetadata } from "./UsageMetadata";
 import { useChat } from "../context/ChatContext";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { Highlight, themes } from "prism-react-renderer";
+
+const TOOL_COLORS = ["border-red-400", "border-blue-400", "border-green-500", "border-yellow-400", "border-purple-400", "border-pink-400", "border-indigo-400"];
 
 interface MessageToolProps {
     message: ToolMessage & RenderMessage;
@@ -14,16 +17,26 @@ interface MessageToolProps {
     onToggleCollapse: () => void;
 }
 
+const getToolColorClass = (tool_name: string) => {
+    let hash = 0;
+    for (let i = 0; i < tool_name.length; i++) {
+        hash = tool_name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const index = Math.abs(hash % TOOL_COLORS.length);
+    return TOOL_COLORS[index];
+};
+
 const MessageTool: React.FC<MessageToolProps> = ({ message, client, getMessageContent, formatTokens, isCollapsed, onToggleCollapse }) => {
     const { getToolUIRender } = useChat();
     const render = getToolUIRender(message.name!);
+    const borderColorClass = getToolColorClass(message.name!);
     return (
         <div className="flex flex-col w-full">
             {render ? (
                 (render(message) as JSX.Element)
             ) : (
-                <div className="flex flex-col w-full bg-white rounded-lg shadow-sm border border-gray-200">
-                    <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 transition-colors" onClick={onToggleCollapse}>
+                <div className={`flex flex-col w-full bg-white rounded-lg shadow-sm border-2 ${borderColorClass} overflow-hidden`}>
+                    <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 transition-colors" onClick={onToggleCollapse}>
                         <div className="text-sm font-medium text-gray-700" onClick={() => console.log(message)}>
                             {message.node_name} | {message.name}
                         </div>
@@ -59,19 +72,24 @@ const Previewer = ({ content }: { content: string }) => {
     };
     const isJSON = content.startsWith("{") && content.endsWith("}") && validJSON();
     const isMarkdown = content.includes("#") || content.includes("```") || content.includes("*");
-    const [jsonMode, setJsonMode] = useState(false);
+    const [jsonMode, setJsonMode] = useState(isJSON);
     const [markdownMode, setMarkdownMode] = useState(false);
-
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(content);
+    };
     return (
         <div className={`flex flex-col`}>
             <div className="flex gap-2 mb-2">
+                <button onClick={copyToClipboard} className="px-2 py-1 text-xs font-medium text-gray-600 bg-green-100 rounded hover:bg-green-200 transition-colors">
+                    copy
+                </button>
                 {isJSON && (
-                    <button onClick={() => setJsonMode(!jsonMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 transition-colors">
+                    <button onClick={() => setJsonMode(!jsonMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-orange-100 rounded hover:bg-orange-200 transition-colors">
                         json
                     </button>
                 )}
                 {isMarkdown && (
-                    <button onClick={() => setMarkdownMode(!markdownMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 transition-colors">
+                    <button onClick={() => setMarkdownMode(!markdownMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-blue-100 rounded hover:bg-blue-200 transition-colors">
                         markdown
                     </button>
                 )}
@@ -79,7 +97,19 @@ const Previewer = ({ content }: { content: string }) => {
 
             <div className="flex flex-col max-h-[300px] overflow-auto border border-gray-200 rounded p-2 w-full text-xs font-mono whitespace-pre-wrap">
                 {jsonMode && isJSON ? (
-                    <pre className="whitespace-pre-wrap">{JSON.stringify(JSON.parse(content), null, 2)}</pre>
+                    <Highlight code={JSON.stringify(JSON.parse(content), null, 2)} language="json" theme={themes.oneLight}>
+                        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                            <pre style={style}>
+                                {tokens.map((line, i) => (
+                                    <div key={i} {...getLineProps({ line })}>
+                                        {line.map((token, key) => (
+                                            <span key={key} {...getTokenProps({ token })} />
+                                        ))}
+                                    </div>
+                                ))}
+                            </pre>
+                        )}
+                    </Highlight>
                 ) : markdownMode && isMarkdown ? (
                     <div className="markdown-body">
                         <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>

package/src/chat/index.css

@@ -0,0 +1,4 @@
+.langgraph-chat-container .token-line {
+    white-space: pre-wrap;
+    overflow: hidden;
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 import "virtual:uno.css";
+import "./index.css";
 export { default as Chat } from "./chat/Chat";