@langgraph-js/ui 1.1.0 → 1.2.0

package/src/chat/components/FileList.css

@@ -1,116 +1,129 @@
-.file-list {
-    padding: 0.5rem;
-    background-color: #f9fafb;
-    border-radius: 8px;
-    margin-bottom: 1rem;
-}
-
-.file-list-header {
-    margin-bottom: 1rem;
-}
-
-.file-upload-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 80px;
-    height: 80px;
-    background-color: #3b82f6;
-    color: white;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 2rem;
-    transition: background-color 0.2s;
-}
-
-.file-upload-button:hover {
-    background-color: #2563eb;
-}
-
-.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-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 {
-    background-color: #3b82f6;
-    color: white;
-}
-
-.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;
+.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

@@ -1,70 +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 handleFileChange = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
-        const selectedFiles = Array.from(event.target.files || []);
-        const imageFiles = selectedFiles.filter(file => file.type.startsWith('image/'));
-        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);
-            }
-        }
-        
-        // 清空 input 值，允许重复选择相同文件
-        event.target.value = '';
-    }, [onFileUploaded]);
-
-    const removeFile = useCallback((index: number) => {
-        setFiles(prev => prev.filter((_, i) => i !== index));
-    }, []);
-
-    return (
-        <div className="file-list">
-            <div className="file-list-content">
-                <label className="file-upload-button">
-                    <span>+</span>
-                    <input
-                        type="file"
-                        accept="image/*"
-                        multiple
-                        onChange={handleFileChange}
-                        style={{ display: 'none' }}
-                    />
-                </label>
-                {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; 
+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;