@langgraph-js/ui 1.1.0 → 1.2.0

package/src/chat/components/HistoryList.tsx

@@ -1,192 +1,192 @@
-import React from "react";
-import { useChat } from "../context/ChatContext";
-import { getHistoryContent } from "@langgraph-js/sdk";
-
-interface HistoryListProps {
-    onClose: () => void;
-    formatTime: (date: Date) => string;
-}
-
-const HistoryList: React.FC<HistoryListProps> = ({ onClose, formatTime }) => {
-    const { historyList, currentChatId, refreshHistoryList, createNewChat, deleteHistoryChat, toHistoryChat } = useChat();
-    return (
-        <div className="history-list">
-            <div className="history-header">
-                <div className="header-left">
-                    <h3>历史记录</h3>
-                    <button className="refresh-button" onClick={refreshHistoryList} title="刷新列表">
-                        🔁
-                    </button>
-                </div>
-                <button className="close-button" onClick={onClose} title="关闭">
-                    ❌
-                </button>
-            </div>
-            <div className="history-content">
-                <div
-                    className="history-items"
-                    onClick={() => {
-                        createNewChat();
-                    }}
-                >
-                    <div className="history-item">
-                        <div className="history-title"> New Chat</div>
-                    </div>
-                </div>
-                {historyList.length === 0 ? (
-                    <div className="empty-history">暂无历史记录</div>
-                ) : (
-                    <div className="history-items">
-                        {historyList
-                            .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-                            .map((thread) => (
-                                <div className={`history-item ${thread.thread_id === currentChatId ? "active" : ""}`} key={thread.thread_id}>
-                                    <div className="history-info">
-                                        <div className="history-title">{getHistoryContent(thread)}</div>
-                                        <div className="history-meta">
-                                            <span className="history-time">{formatTime(new Date(thread.created_at))}</span>
-                                            <span className="history-status">{thread.status}</span>
-                                        </div>
-                                    </div>
-                                    <div className="history-actions">
-                                        <button
-                                            className="action-button"
-                                            onClick={() => {
-                                                toHistoryChat(thread);
-                                            }}
-                                            title="恢复对话"
-                                        >
-                                            ⏪
-                                        </button>
-                                        <button
-                                            className="action-button"
-                                            onClick={async () => {
-                                                await deleteHistoryChat(thread);
-                                            }}
-                                            title="删除对话"
-                                        >
-                                            ❌
-                                        </button>
-                                    </div>
-                                </div>
-                            ))}
-                    </div>
-                )}
-            </div>
-            <style>{`
-                .history-list {
-                    background: #fff;
-                    border-radius: 8px;
-                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                }
-
-                .history-header {
-                    padding: 16px;
-                    border-bottom: 1px solid #eee;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-
-                .header-left {
-                    display: flex;
-                    align-items: center;
-                    gap: 12px;
-                }
-
-                .history-header h3 {
-                    margin: 0;
-                    font-size: 18px;
-                    color: #333;
-                }
-
-                .history-content {
-                    flex: 1;
-                    overflow-y: auto;
-                    padding: 16px;
-                }
-
-                .history-items {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 12px;
-                }
-
-                .history-item {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 12px;
-                    border-radius: 6px;
-                    background: #f8f9fa;
-                    transition: all 0.2s ease;
-                }
-
-                .history-item:hover {
-                    background: #f0f2f5;
-                }
-
-                .history-item.active {
-                    background: #e6f7ff;
-                    border: 1px solid #91d5ff;
-                }
-
-                .history-info {
-                    flex: 1;
-                    min-width: 0;
-                }
-
-                .history-title {
-                    font-size: 14px;
-                    color: #333;
-                    margin-bottom: 4px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-
-                .history-meta {
-                    display: flex;
-                    gap: 12px;
-                    color: #666;
-                    font-size: 12px;
-                }
-
-                .history-actions {
-                    display: flex;
-                    gap: 8px;
-                    margin-left: 12px;
-                }
-
-                .action-button, .close-button, .refresh-button {
-                    background: none;
-                    border: none;
-                    cursor: pointer;
-                    padding: 6px;
-                    font-size: 16px;
-                    border-radius: 4px;
-                    transition: all 0.2s ease;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-
-                .action-button:hover, .close-button:hover, .refresh-button:hover {
-                    background: rgba(0, 0, 0, 0.05);
-                    transform: scale(1.1);
-                }
-
-                .empty-history {
-                    text-align: center;
-                    color: #999;
-                    padding: 32px 0;
-                }
-            `}</style>
-        </div>
-    );
-};
-
-export default HistoryList;
+import React from "react";
+import { useChat } from "../context/ChatContext";
+import { getHistoryContent } from "@langgraph-js/sdk";
+
+interface HistoryListProps {
+    onClose: () => void;
+    formatTime: (date: Date) => string;
+}
+
+const HistoryList: React.FC<HistoryListProps> = ({ onClose, formatTime }) => {
+    const { historyList, currentChatId, refreshHistoryList, createNewChat, deleteHistoryChat, toHistoryChat } = useChat();
+    return (
+        <div className="history-list">
+            <div className="history-header">
+                <div className="header-left">
+                    <h3>历史记录</h3>
+                    <button className="refresh-button" onClick={refreshHistoryList} title="刷新列表">
+                        🔁
+                    </button>
+                </div>
+                <button className="close-button" onClick={onClose} title="关闭">
+                    ❌
+                </button>
+            </div>
+            <div className="history-content">
+                <div
+                    className="history-items"
+                    onClick={() => {
+                        createNewChat();
+                    }}
+                >
+                    <div className="history-item">
+                        <div className="history-title"> New Chat</div>
+                    </div>
+                </div>
+                {historyList.length === 0 ? (
+                    <div className="empty-history">暂无历史记录</div>
+                ) : (
+                    <div className="history-items">
+                        {historyList
+                            .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                            .map((thread) => (
+                                <div className={`history-item ${thread.thread_id === currentChatId ? "active" : ""}`} key={thread.thread_id}>
+                                    <div className="history-info">
+                                        <div className="history-title">{getHistoryContent(thread)}</div>
+                                        <div className="history-meta">
+                                            <span className="history-time">{formatTime(new Date(thread.created_at))}</span>
+                                            <span className="history-status">{thread.status}</span>
+                                        </div>
+                                    </div>
+                                    <div className="history-actions">
+                                        <button
+                                            className="action-button"
+                                            onClick={() => {
+                                                toHistoryChat(thread);
+                                            }}
+                                            title="恢复对话"
+                                        >
+                                            ⏪
+                                        </button>
+                                        <button
+                                            className="action-button"
+                                            onClick={async () => {
+                                                await deleteHistoryChat(thread);
+                                            }}
+                                            title="删除对话"
+                                        >
+                                            ❌
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                    </div>
+                )}
+            </div>
+            <style>{`
+                .history-list {
+                    background: #fff;
+                    border-radius: 8px;
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                .history-header {
+                    padding: 16px;
+                    border-bottom: 1px solid #eee;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+
+                .header-left {
+                    display: flex;
+                    align-items: center;
+                    gap: 12px;
+                }
+
+                .history-header h3 {
+                    margin: 0;
+                    font-size: 18px;
+                    color: #333;
+                }
+
+                .history-content {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: 16px;
+                }
+
+                .history-items {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 12px;
+                }
+
+                .history-item {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 12px;
+                    border-radius: 6px;
+                    background: #f8f9fa;
+                    transition: all 0.2s ease;
+                }
+
+                .history-item:hover {
+                    background: #f0f2f5;
+                }
+
+                .history-item.active {
+                    background: #e6f7ff;
+                    border: 1px solid #91d5ff;
+                }
+
+                .history-info {
+                    flex: 1;
+                    min-width: 0;
+                }
+
+                .history-title {
+                    font-size: 14px;
+                    color: #333;
+                    margin-bottom: 4px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .history-meta {
+                    display: flex;
+                    gap: 12px;
+                    color: #666;
+                    font-size: 12px;
+                }
+
+                .history-actions {
+                    display: flex;
+                    gap: 8px;
+                    margin-left: 12px;
+                }
+
+                .action-button, .close-button, .refresh-button {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 6px;
+                    font-size: 16px;
+                    border-radius: 4px;
+                    transition: all 0.2s ease;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                .action-button:hover, .close-button:hover, .refresh-button:hover {
+                    background: rgba(0, 0, 0, 0.05);
+                    transform: scale(1.1);
+                }
+
+                .empty-history {
+                    text-align: center;
+                    color: #999;
+                    padding: 32px 0;
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default HistoryList;

package/src/chat/components/JsonEditorPopup.css

@@ -0,0 +1,81 @@
+.json-editor-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.json-editor-popup-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  width: 80%;
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+}
+
+.json-editor-popup-content h2 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.5rem;
+  color: #333;
+}
+
+.json-editor-popup-content textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9rem;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.json-editor-popup-content .error-message {
+  color: red;
+  font-size: 0.8rem;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.popup-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 15px;
+  gap: 10px;
+}
+
+.popup-actions button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.popup-actions .save-button {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.popup-actions .save-button:hover {
+  background-color: #2563eb;
+}
+
+.popup-actions .cancel-button {
+  background-color: #e5e7eb;
+  color: #374151;
+}
+
+.popup-actions .cancel-button:hover {
+  background-color: #d1d5db;
+} 

package/src/chat/components/JsonEditorPopup.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import './JsonEditorPopup.css';
+
+interface JsonEditorPopupProps {
+  isOpen: boolean;
+  initialJson: object;
+  onClose: () => void;
+  onSave: (jsonData: object) => void;
+}
+
+const JsonEditorPopup: React.FC<JsonEditorPopupProps> = ({ isOpen, initialJson, onClose, onSave }) => {
+  const [jsonString, setJsonString] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setJsonString(JSON.stringify(initialJson, null, 2));
+    setError(null); // Reset error when initialJson changes or popup opens
+  }, [initialJson, isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const handleSave = () => {
+    try {
+      const parsedJson = JSON.parse(jsonString);
+      onSave(parsedJson);
+      onClose();
+    } catch (e) {
+      setError('JSON 格式无效，请检查后重试。');
+      console.error("Invalid JSON format:", e);
+    }
+  };
+
+  return (
+    <div className="json-editor-popup-overlay">
+      <div className="json-editor-popup-content">
+        <h2>编辑 Extra Parameters</h2>
+        <textarea
+          value={jsonString}
+          onChange={(e) => {
+            setJsonString(e.target.value);
+            setError(null); // Clear error on edit
+          }}
+          rows={15}
+        />
+        {error && <p className="error-message">{error}</p>}
+        <div className="popup-actions">
+          <button onClick={onClose} className="cancel-button">取消</button>
+          <button onClick={handleSave} className="save-button">保存</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JsonEditorPopup; 

package/src/chat/components/MessageAI.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-import { RenderMessage } from "@langgraph-js/sdk";
-import { UsageMetadata } from "./UsageMetadata";
-import { getMessageContent } from "@langgraph-js/sdk";
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-interface MessageAIProps {
-    message: RenderMessage;
-}
-
-const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
-    return (
-        <div className="message ai">
-            <div className="message-content">
-                <div className="message-text markdown-body">
-                    <Markdown remarkPlugins={[remarkGfm]}>{getMessageContent(message.content)}</Markdown>
-                </div>
-                <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata||{}} spend_time={message.spend_time} />
-            </div>
-        </div>
-    );
-};
-
-export default MessageAI;
+import React from "react";
+import { RenderMessage } from "@langgraph-js/sdk";
+import { UsageMetadata } from "./UsageMetadata";
+import { getMessageContent } from "@langgraph-js/sdk";
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+interface MessageAIProps {
+    message: RenderMessage;
+}
+
+const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
+    return (
+        <div className="message ai">
+            <div className="message-content">
+                <div className="message-text markdown-body">
+                    <Markdown remarkPlugins={[remarkGfm]}>{getMessageContent(message.content)}</Markdown>
+                </div>
+                <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata||{}} spend_time={message.spend_time} />
+            </div>
+        </div>
+    );
+};
+
+export default MessageAI;