@langgraph-js/ui 1.0.0

package/dist/assets/index-BAcH-2-3.css

@@ -0,0 +1 @@
+.chat-container{display:flex;height:100vh;width:100%;position:relative}.chat-sidebar{background-color:#f5f5f5;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.history-header{padding:16px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.history-header h3{margin:0;font-size:16px;color:#333}.close-button{background:none;border:none;font-size:20px;cursor:pointer;color:#666}.history-list{flex:none;width:280px;overflow-y:auto;border-right:1px solid #e0e0e0}.history-item{padding:12px;margin-bottom:8px;background-color:#fff;cursor:pointer;transition:background-color .2s}.history-item:hover{background-color:#e8e8e8}.history-item.active{background-color:#e3f2fd;border-left:3px solid #2196f3}.history-title{font-size:14px;color:#333;margin-bottom:4px}.history-time{font-size:12px;color:#666}.chat-main{overflow:hidden;flex:1;display:flex;flex-direction:column}.chat-header{padding:16px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:.5rem}.history-button{padding:8px 16px;background-color:#f0f0f0;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:14px;color:#333}.history-button:hover{background-color:#e0e0e0}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.message{display:flex;max-width:80%}.message.human{margin-left:auto}.message.ai{margin-right:auto}.message-content{padding:.75rem 1rem;border-radius:8px;border:1px solid #e5e7eb;display:flex;flex-direction:column;gap:.5rem}.message-text{word-break:break-word}.message-meta{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:#6b7280;margin-top:.25rem}.message-time{font-family:monospace}.token-info{display:flex;gap:.5rem;align-items:center}.token-item{display:flex;align-items:center;gap:.25rem;background-color:#fff;padding:.125rem .375rem;border-radius:4px;font-family:monospace}.token-emoji{font-size:.875rem}.message.human .message-content{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.message.human .message-meta{color:#fffc}.message.ai .message-content{background-color:#f3f4f6;color:#1f2937}.message.tool{width:100%;max-width:100%}.tool-message{width:100%;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.tool-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:#f9fafb;border-bottom:1px solid #e5e7eb;cursor:pointer}.tool-header:hover{background-color:#f3f4f6}.tool-title{font-weight:500;color:#374151}.tool-content{padding:1rem}.tool-input{background-color:#f9fafb;padding:.75rem;border-radius:4px;margin-bottom:.5rem;font-family:monospace;white-space:pre-wrap;word-break:break-all}.tool-output{background-color:#fff;padding:.75rem;border-radius:4px;font-family:monospace;border:1px solid #e5e7eb;margin-bottom:.5rem}.chat-input{border-top:1px solid #e5e7eb;padding:0 1rem 1rem;background-color:#fff}.chat-input-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.input-container{display:flex;gap:.5rem}.input-textarea{flex:1;padding:.75rem;border:1px solid #e5e7eb;border-radius:8px;resize:none;font-size:.875rem;line-height:1.25rem}.input-textarea:focus{outline:none;border-color:#3b82f6}.send-button{padding:.5rem 1rem;background-color:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.send-button:hover{background-color:#2563eb}.send-button:disabled{background-color:#93c5fd;cursor:not-allowed}.send-button.interrupt{background-color:#ef4444}.send-button.interrupt:hover{background-color:#dc2626}.collapsed .tool-content{display:none}.expand-icon{transition:transform .2s}.collapsed .expand-icon{transform:rotate(-90deg)}.loading-indicator{padding:12px 16px;margin:8px 0;background-color:#f5f5f5;border-radius:8px;color:#666;font-size:14px;text-align:center;animation:pulse 1.5s infinite;display:flex;align-items:center;justify-content:center;gap:12px}.interrupt-button{padding:4px 12px;background-color:#ef4444;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s}.interrupt-button:hover{background-color:#dc2626}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.error-message{padding:12px 16px;margin:8px 0;background-color:#fee2e2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:14px;text-align:center}.login-container{max-width:600px;margin:2rem auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.header-group{display:flex;gap:1rem;align-items:flex-start;padding:1rem;background:#f8f9fa;border-radius:4px;position:relative}.form-group{flex:1}.form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500}.form-group input{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.form-group input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.button-group{display:flex;gap:1rem;margin-top:1rem}button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}button[type=submit]{background-color:#007bff;color:#fff}button[type=submit]:hover{background-color:#0056b3}button[type=button]{background-color:#6c757d;color:#fff}button[type=button]:hover{background-color:#5a6268}.remove-header{background-color:#dc3545;color:#fff;padding:.25rem .5rem;font-size:.875rem}.remove-header:hover{background-color:#c82333}p{margin-bottom:1.5rem;color:#666;text-align:center}

package/dist/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+        <style>
+            body,
+            #root,
+            html {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+      <script type="module" crossorigin src="/assets/index-B6G4BLix.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-BAcH-2-3.css">
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

package/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+        <style>
+            body,
+            #root,
+            html {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./test/main.tsx"></script>
+    </body>
+</html>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@langgraph-js/ui",
+  "version": "1.0.0",
+  "description": "",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "bin": {
+    "langgraph-ui": "./cli.mjs"
+  },
+  "main": "./dist/react/src/index.js",
+  "type": "module",
+  "dependencies": {
+    "@nanostores/react": "^1.0.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "nanostores": "^1.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^6.2.0",
+    "@langgraph-js/sdk": "1.1.5"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublish": "pnpm build"
+  }
+}

package/src/chat/Chat.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import "./chat.css";
+import MessageHuman from "./components/MessageHuman";
+import MessageAI from "./components/MessageAI";
+import MessageTool from "./components/MessageTool";
+import HistoryList from "./components/HistoryList";
+import { ChatProvider, useChat } from "./context/ChatContext";
+import { UsageMetadata } from "./components/UsageMetadata";
+import { formatTime, formatTokens, getMessageContent } from "@langgraph-js/sdk";
+
+const ChatMessages: React.FC = () => {
+    const { renderMessages, loading, inChatError, client, collapsedTools, toggleToolCollapse } = useChat();
+
+    return (
+        <div className="chat-messages">
+            {renderMessages.map((message) =>
+                message.type === "human" ? (
+                    <MessageHuman content={message.content} key={message.unique_id} />
+                ) : message.type === "tool" ? (
+                    <MessageTool
+                        key={message.unique_id}
+                        message={message}
+                        client={client!}
+                        getMessageContent={getMessageContent}
+                        formatTokens={formatTokens}
+                        isCollapsed={collapsedTools.includes(message.id!)}
+                        onToggleCollapse={() => toggleToolCollapse(message.id!)}
+                    />
+                ) : (
+                    <MessageAI key={message.unique_id} message={message} />
+                )
+            )}
+            {loading && <div className="loading-indicator">正在思考中...</div>}
+            {inChatError && <div className="error-message">{inChatError}</div>}
+        </div>
+    );
+};
+
+const ChatInput: React.FC = () => {
+    const { userInput, setUserInput, loading, sendMessage, stopGeneration, currentAgent, setCurrentAgent, client } = useChat();
+    const handleKeyPress = (event: React.KeyboardEvent) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            sendMessage();
+        }
+    };
+
+    return (
+        <div className="chat-input">
+            <div className="chat-input-header">
+                <select value={currentAgent} onChange={(e) => setCurrentAgent(e.target.value)}>
+                    {client?.availableAssistants.map((i) => {
+                        return <option value={i.graph_id}>{i.name}</option>;
+                    })}
+                </select>
+                <UsageMetadata usage_metadata={client?.tokenCounter || {}} />
+            </div>
+            <div className="input-container">
+                <textarea
+                    className="input-textarea"
+                    rows={2}
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    onKeyDown={handleKeyPress}
+                    placeholder="输入消息..."
+                    disabled={loading}
+                />
+                <button className={`send-button ${loading ? "interrupt" : ""}`} onClick={() => (loading ? stopGeneration() : sendMessage())} disabled={!loading && !userInput.trim()}>
+                    {loading ? "中断" : "发送"}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const Chat: React.FC = () => {
+    const { showHistory, toggleHistoryVisible } = useChat();
+
+    return (
+        <div className="chat-container">
+            {showHistory && <HistoryList onClose={() => toggleHistoryVisible()} formatTime={formatTime} />}
+            <div className="chat-main">
+                <div className="chat-header">
+                    <button className="history-button" onClick={() => toggleHistoryVisible()}>
+                        历史记录
+                    </button>
+                    <button
+                        className="history-button"
+                        onClick={() => {
+                            localStorage.setItem("code", "");
+                            location.reload();
+                        }}
+                    >
+                        退出登陆
+                    </button>
+                </div>
+                <ChatMessages />
+                <ChatInput />
+            </div>
+        </div>
+    );
+};
+
+const ChatWrapper: React.FC = () => {
+    return (
+        <ChatProvider>
+            <Chat />
+        </ChatProvider>
+    );
+};
+
+export default ChatWrapper;

package/src/chat/chat.css

@@ -0,0 +1,361 @@
+.chat-container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+    position: relative;
+}
+
+.chat-sidebar {
+    background-color: #f5f5f5;
+    border-right: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+}
+
+.history-header {
+    padding: 16px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.history-header h3 {
+    margin: 0;
+    font-size: 16px;
+    color: #333;
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: #666;
+}
+
+.history-list {
+    flex: none;
+    width: 280px;
+    overflow-y: auto;
+    /* padding: 8px;  */
+    border-right: 1px solid #e0e0e0;
+}
+
+.history-item {
+    padding: 12px;
+    margin-bottom: 8px;
+    background-color: white;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.history-item:hover {
+    background-color: #e8e8e8;
+}
+
+.history-item.active {
+    background-color: #e3f2fd;
+    border-left: 3px solid #2196f3;
+}
+
+.history-title {
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+.history-time {
+    font-size: 12px;
+    color: #666;
+}
+
+.chat-main {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    padding: 16px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+.history-button {
+    padding: 8px 16px;
+    background-color: #f0f0f0;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #333;
+}
+
+.history-button:hover {
+    background-color: #e0e0e0;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.message {
+    display: flex;
+    max-width: 80%;
+}
+
+.message.human {
+    margin-left: auto;
+}
+
+.message.ai {
+    margin-right: auto;
+}
+
+.message-content {
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.message-text {
+    word-break: break-word;
+}
+
+.message-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.75rem;
+    color: #6b7280;
+    margin-top: 0.25rem;
+}
+
+.message-time {
+    font-family: monospace;
+}
+
+.token-info {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.token-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    background-color: #ffffff;
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+    font-family: monospace;
+}
+
+.token-emoji {
+    font-size: 0.875rem;
+}
+
+.message.human .message-content {
+    background-color: #3b82f6;
+    color: white;
+    border-color: #3b82f6;
+}
+
+.message.human .message-meta {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.message.ai .message-content {
+    background-color: #f3f4f6;
+    color: #1f2937;
+}
+
+.message.tool {
+    width: 100%;
+    max-width: 100%;
+}
+
+.tool-message {
+    width: 100%;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.tool-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+    cursor: pointer;
+}
+
+.tool-header:hover {
+    background-color: #f3f4f6;
+}
+
+.tool-title {
+    font-weight: 500;
+    color: #374151;
+}
+
+.tool-content {
+    padding: 1rem;
+}
+
+.tool-input {
+    background-color: #f9fafb;
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.tool-output {
+    background-color: #ffffff;
+    padding: 0.75rem;
+    border-radius: 4px;
+    font-family: monospace;
+    border: 1px solid #e5e7eb;
+    margin-bottom: 0.5rem;
+}
+
+.chat-input {
+    border-top: 1px solid #e5e7eb;
+    padding: 0 1rem 1rem 1rem;
+    background-color: #ffffff;
+}
+.chat-input-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+}
+.input-container {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.input-textarea {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    resize: none;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+.input-textarea:focus {
+    outline: none;
+    border-color: #3b82f6;
+}
+
+.send-button {
+    padding: 0.5rem 1rem;
+    background-color: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.send-button:hover {
+    background-color: #2563eb;
+}
+
+.send-button:disabled {
+    background-color: #93c5fd;
+    cursor: not-allowed;
+}
+
+.send-button.interrupt {
+    background-color: #ef4444;
+}
+
+.send-button.interrupt:hover {
+    background-color: #dc2626;
+}
+
+.collapsed .tool-content {
+    display: none;
+}
+
+.expand-icon {
+    transition: transform 0.2s;
+}
+
+.collapsed .expand-icon {
+    transform: rotate(-90deg);
+}
+
+.loading-indicator {
+    padding: 12px 16px;
+    margin: 8px 0;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    color: #666;
+    font-size: 14px;
+    text-align: center;
+    animation: pulse 1.5s infinite;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+}
+
+.interrupt-button {
+    padding: 4px 12px;
+    background-color: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background-color 0.2s;
+}
+
+.interrupt-button:hover {
+    background-color: #dc2626;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.6;
+    }
+}
+
+.error-message {
+    padding: 12px 16px;
+    margin: 8px 0;
+    background-color: #fee2e2;
+    border: 1px solid #fecaca;
+    border-radius: 8px;
+    color: #dc2626;
+    font-size: 14px;
+    text-align: center;
+}