@langgraph-js/ui 1.0.0 → 1.2.0

package/src/chat/components/FileList.css

@@ -0,0 +1,129 @@
+.file-list {
+    display: flex;
+    gap: 0.5rem;
+    border-radius: 8px;
+    flex:1;
+}
+
+.file-list-header {
+    margin-bottom: 1rem;
+}
+
+.file-upload-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    color: #929292;
+    background-color: #ebebeb;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.file-upload-button svg {
+    width: 32px;
+    height: 32px;
+}
+
+.file-upload-button.empty {
+    width: 32px;
+    height: 32px;
+}
+
+.file-upload-button.empty svg {
+    width: 20px;
+    height: 20px;
+}
+
+.file-list-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.file-item {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    border-radius: 6px;
+    overflow: hidden;
+}
+.file-item img{
+    border: 1px solid #e5e7eb;
+    overflow: hidden;
+}
+
+.file-preview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.file-info {
+    padding: 0.75rem;
+}
+
+.file-name {
+    display: block;
+    font-size: 0.875rem;
+    color: #374151;
+    margin-bottom: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.upload-button,
+.remove-button {
+    flex: 1;
+    padding: 0.375rem 0.75rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.upload-button {
+    color: black;
+}
+
+.upload-button:hover {
+    background-color: #2563eb;
+}
+
+.remove-button {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.remove-button:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.upload-button:disabled,
+.remove-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+} 

package/src/chat/components/FileList.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useCallback } from "react";
+import { TmpFilesClient } from "../FileUpload";
+import "./FileList.css";
+
+interface FileListProps {
+    onFileUploaded: (url: string) => void;
+}
+
+const FileList: React.FC<FileListProps> = ({ onFileUploaded }) => {
+    const [files, setFiles] = useState<File[]>([]);
+    const client = new TmpFilesClient();
+    const MAX_FILES = 3;
+
+    const handleFileChange = useCallback(
+        async (event: React.ChangeEvent<HTMLInputElement>) => {
+            const selectedFiles = Array.from(event.target.files || []);
+            const imageFiles = selectedFiles.filter((file) => file.type.startsWith("image/"));
+            
+            // 检查是否超过最大数量限制
+            if (files.length + imageFiles.length > MAX_FILES) {
+                alert(`最多只能上传${MAX_FILES}张图片`);
+                event.target.value = "";
+                return;
+            }
+
+            setFiles((prev) => [...prev, ...imageFiles]);
+
+            for (const file of imageFiles) {
+                try {
+                    const result = await client.upload(file);
+                    if (result.data?.url) {
+                        onFileUploaded(result.data.url);
+                    }
+                } catch (error) {
+                    console.error("Upload failed:", error);
+                }
+            }
+
+            event.target.value = "";
+        },
+        [onFileUploaded, files.length]
+    );
+
+    const removeFile = useCallback((index: number) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+
+    return (
+        <div className="file-list">
+            {files.length < MAX_FILES && (
+                <label className={`file-upload-button ${files.length === 0 ? "empty" : ""}`}>
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                        <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
+                        <path d="M20 4h-3.17l-1.24-1.35A1.99 1.99 0 0 0 14.12 2H9.88c-.56 0-1.1.24-1.48.65L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
+                    </svg>
+                    <input type="file" accept="image/*" multiple onChange={handleFileChange} style={{ display: "none" }} />
+                </label>
+            )}
+            <div className="file-list-content">
+                {files.map((file, index) => (
+                    <div key={index} className="file-item">
+                        <img src={URL.createObjectURL(file)} alt={file.name} className="file-preview" />
+                        <button className="remove-button" onClick={() => removeFile(index)}>
+                            ×
+                        </button>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default FileList;

package/src/chat/components/HistoryList.tsx

@@ -1,192 +1,192 @@
-import React from "react";
-import { useChat } from "../context/ChatContext";
-
-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">{thread?.values?.messages?.[0]?.content as string}</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;
+}