@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/KnowledgeView.js

@@ -0,0 +1,480 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core/api";
+import { ConfirmDeleteControl, formatByteSize, formatShortDate, } from "@elizaos/app-core/components";
+import { useApp } from "@elizaos/app-core/state";
+import { confirmDesktopAction } from "@elizaos/app-core/utils";
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { isKnowledgeImageFile, MAX_KNOWLEDGE_IMAGE_PROCESSING_BYTES, maybeCompressKnowledgeUploadImage, } from "./knowledge-upload-image";
+const MAX_UPLOAD_REQUEST_BYTES = 32 * 1_048_576; // Must match server knowledge route limit
+const BULK_UPLOAD_TARGET_BYTES = 24 * 1_048_576;
+const MAX_BULK_REQUEST_DOCUMENTS = 100;
+const LARGE_FILE_WARNING_BYTES = 8 * 1_048_576;
+const SUPPORTED_UPLOAD_EXTENSIONS = new Set([
+    ".txt",
+    ".md",
+    ".pdf",
+    ".docx",
+    ".json",
+    ".csv",
+    ".xml",
+    ".html",
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".webp",
+    ".gif",
+]);
+export function getKnowledgeUploadFilename(file) {
+    return file.webkitRelativePath?.trim() || file.name;
+}
+export function shouldReadKnowledgeFileAsText(file) {
+    const textTypes = [
+        "text/plain",
+        "text/markdown",
+        "text/html",
+        "text/csv",
+        "application/json",
+        "application/xml",
+    ];
+    return (textTypes.some((t) => file.type.includes(t)) || file.name.endsWith(".md"));
+}
+function isSupportedKnowledgeFile(file) {
+    const lowerName = file.name.toLowerCase();
+    for (const extension of SUPPORTED_UPLOAD_EXTENSIONS) {
+        if (lowerName.endsWith(extension))
+            return true;
+    }
+    return false;
+}
+/* ── Upload Zone ────────────────────────────────────────────────────── */
+function UploadZone({ onFilesUpload, onUrlUpload, uploading, uploadStatus, }) {
+    const { t } = useApp();
+    const [dragOver, setDragOver] = useState(false);
+    const [urlInput, setUrlInput] = useState("");
+    const [showUrlInput, setShowUrlInput] = useState(false);
+    const [includeImageDescriptions, setIncludeImageDescriptions] = useState(true);
+    const fileInputRef = useRef(null);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setDragOver(false);
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0 && !uploading) {
+            onFilesUpload(files, { includeImageDescriptions });
+        }
+    }, [includeImageDescriptions, onFilesUpload, uploading]);
+    const handleFileSelect = useCallback((e) => {
+        const files = e.target.files;
+        if (files && files.length > 0 && !uploading) {
+            onFilesUpload(Array.from(files), {
+                includeImageDescriptions,
+            });
+        }
+        e.target.value = "";
+    }, [includeImageDescriptions, onFilesUpload, uploading]);
+    const handleUrlSubmit = useCallback(() => {
+        const url = urlInput.trim();
+        if (url && !uploading) {
+            onUrlUpload(url, { includeImageDescriptions });
+            setUrlInput("");
+            setShowUrlInput(false);
+        }
+    }, [includeImageDescriptions, urlInput, uploading, onUrlUpload]);
+    return (_jsxs("fieldset", { className: "w-full min-w-[min(22rem,100%)] flex-[1_1_26rem] sm:w-auto sm:flex-none", onDragOver: (e) => {
+            e.preventDefault();
+            setDragOver(true);
+        }, onDragLeave: () => setDragOver(false), onDrop: handleDrop, "aria-label": "Knowledge upload controls", children: [_jsx("input", { ref: fileInputRef, type: "file", className: "hidden", multiple: true, accept: ".txt,.md,.pdf,.docx,.json,.csv,.xml,.html,.png,.jpg,.jpeg,.webp,.gif", onChange: handleFileSelect }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-2 gap-y-1", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-10 px-4 text-[11px] font-semibold", onClick: () => fileInputRef.current?.click(), disabled: uploading, children: t("knowledgeview.ChooseFiles") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-10 px-4 text-[11px] font-semibold hover:text-txt", onClick: () => setShowUrlInput(!showUrlInput), disabled: uploading, children: t("knowledgeview.AddFromURL") }), _jsxs("label", { className: "inline-flex h-10 cursor-pointer items-center gap-2 rounded-md border border-border/30 bg-bg/40 px-3 text-[11px] text-muted/80 transition-colors hover:text-muted", children: [_jsx("input", { type: "checkbox", checked: includeImageDescriptions, onChange: (e) => setIncludeImageDescriptions(e.target.checked), disabled: uploading, className: "accent-accent h-3.5 w-3.5 rounded border-border/50 bg-bg/50" }), t("knowledgeview.IncludeAIImageDes")] })] }), (dragOver || uploading || showUrlInput) && (_jsxs("div", { className: `mt-2 rounded-xl border px-3 py-2.5 transition-colors sm:min-w-[24rem] ${dragOver
+                    ? "border-border/50 bg-card/30"
+                    : "border-border/30 bg-card/15"} ${uploading ? "opacity-60" : ""}`, children: [(dragOver || uploading) && (_jsx("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted/80", children: _jsx("span", { className: "font-medium text-txt/80", children: uploadStatus
+                                ? `Uploading ${uploadStatus.current}/${uploadStatus.total}${uploadStatus.filename ? `: ${uploadStatus.filename}` : ""}`
+                                : "Drop files or folders to upload" }) })), showUrlInput && (_jsxs("div", { className: `${dragOver || uploading ? "mt-2" : ""} animate-in fade-in slide-in-from-top-2 duration-300`, children: [_jsx("div", { className: "mb-2 text-[11px] font-medium leading-relaxed text-muted", children: t("knowledgeview.PasteAURLToImpor") }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [_jsx(Input, { type: "url", placeholder: t("knowledgeview.httpsExampleCom"), value: urlInput, onChange: (e) => setUrlInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && handleUrlSubmit(), disabled: uploading, className: "h-10 flex-1 bg-bg/60 border-border/50 text-xs shadow-none" }), _jsx(Button, { variant: "default", size: "sm", className: "h-10 px-4 text-[11px] font-semibold", onClick: handleUrlSubmit, disabled: !urlInput.trim() || uploading, children: t("knowledgeview.Import") })] })] }))] }))] }));
+}
+/* ── Search Results ─────────────────────────────────────────────────── */
+function SearchResults({ results, onClear, }) {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "mb-8 animate-in fade-in slide-in-from-top-4 duration-300", children: [_jsxs("div", { className: "flex items-center justify-between mb-4 border-b border-border/40 pb-3", children: [_jsxs("h3", { className: "text-sm font-bold text-txt tracking-wide", children: [t("knowledgeview.SearchResults"), _jsx("span", { className: "ml-2 text-[11px] text-muted font-mono bg-black/10 px-2 py-0.5 rounded-full border border-white/5", children: results.length })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "h-7 text-[11px] font-bold text-muted hover:text-danger hover:bg-danger/10", children: t("knowledgeview.Clear") })] }), _jsxs("div", { className: "space-y-3", children: [results.map((result) => (_jsxs("div", { className: "p-4 border border-border/40 bg-card/40 backdrop-blur-md rounded-xl shadow-sm hover:shadow-md transition-all hover:border-accent/40", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 mb-3", children: [_jsx("span", { className: "text-[13px] font-bold text-txt truncate", children: result.documentTitle || "Unknown Document" }), _jsxs("span", { className: "shrink-0 text-[10px] font-bold tracking-wider px-2 py-1 bg-accent/20 text-txt rounded-md border border-accent/20", children: [(result.similarity * 100).toFixed(0), "%", " ", t("knowledgeview.Match")] })] }), _jsx("p", { className: "text-sm text-txt/80 line-clamp-3 leading-relaxed", children: result.text })] }, result.id))), results.length === 0 && (_jsx("div", { className: "text-center py-10 text-muted bg-black/5 rounded-xl border border-white/5", children: t("knowledgeview.NoResultsFound") }))] })] }));
+}
+/* ── Document Card ──────────────────────────────────────────────────── */
+function DocumentCard({ doc, onSelect, onDelete, deleting, }) {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "flex items-center justify-between p-4 border border-border/40 bg-card/40 backdrop-blur-md rounded-xl shadow-sm hover:shadow-[0_0_15px_rgba(var(--accent),0.1)] hover:border-accent/50 transition-all group", children: [_jsxs("button", { type: "button", className: "flex-1 min-w-0 cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded-sm", onClick: () => onSelect(doc.id), "aria-label": `Open ${doc.filename}`, children: [_jsx("div", { className: "font-bold text-sm text-txt truncate mb-2 group-hover:text-txt transition-colors", children: doc.filename }), _jsxs("div", { className: "flex items-center gap-3 text-xs text-muted/80 font-medium", children: [_jsx("span", { className: "uppercase tracking-widest text-[10px]", children: doc.contentType?.split("/").pop() }), _jsx("span", { className: "w-1 h-1 rounded-full bg-border/50" }), _jsx("span", { children: formatByteSize(doc.fileSize) }), _jsx("span", { className: "w-1 h-1 rounded-full bg-border/50" }), _jsx("span", { children: formatShortDate(doc.createdAt, { fallback: "—" }) }), doc.source === "youtube" && (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-1 h-1 rounded-full bg-border/50" }), _jsx("span", { className: "px-2 py-0.5 bg-red-500/10 text-red-500 border border-red-500/20 rounded-md text-[10px] font-bold tracking-wider", children: t("knowledgeview.YouTube") })] })), doc.source === "url" && (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-1 h-1 rounded-full bg-border/50" }), _jsx("span", { className: "px-2 py-0.5 bg-accent/10 text-txt border border-accent/20 rounded-md text-[10px] font-bold tracking-wider", children: t("knowledgeview.URL") })] }))] })] }), _jsx("div", { className: "flex items-center gap-2 ml-4 opacity-0 group-hover:opacity-100 transition-opacity focus-within:opacity-100", children: _jsx(ConfirmDeleteControl, { triggerClassName: "h-8 px-3 text-xs font-bold text-danger hover:bg-danger/10 hover:text-danger rounded-lg transition-all", confirmClassName: "h-8 px-3 text-xs font-bold bg-danger/20 text-danger hover:bg-danger/30 rounded-lg transition-all", cancelClassName: "h-8 px-3 text-xs font-bold text-muted hover:text-txt rounded-lg transition-all", disabled: deleting, busyLabel: "...", onConfirm: () => onDelete(doc.id) }) })] }));
+}
+/* ── Document Detail Modal ──────────────────────────────────────────── */
+function DocumentDetailModal({ documentId, onClose, }) {
+    const { t } = useApp();
+    const [doc, setDoc] = useState(null);
+    const [fragments, setFragments] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        async function load() {
+            setLoading(true);
+            setError(null);
+            const [docRes, fragRes] = await Promise.all([
+                client.getKnowledgeDocument(documentId),
+                client.getKnowledgeFragments(documentId),
+            ]);
+            if (cancelled)
+                return;
+            setDoc(docRes.document);
+            setFragments(fragRes.fragments);
+            setLoading(false);
+        }
+        load().catch((err) => {
+            if (!cancelled) {
+                setError(err instanceof Error ? err.message : "Failed to load document");
+                setLoading(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [documentId]);
+    return (_jsx("div", { className: "fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-6 animate-in fade-in duration-200", children: _jsxs("div", { className: "bg-card/90 border border-border/50 rounded-2xl w-full max-w-4xl max-h-[85vh] flex flex-col shadow-2xl overflow-hidden backdrop-blur-xl", children: [_jsxs("div", { className: "flex items-center justify-between p-5 border-b border-border/30 bg-black/10", children: [_jsx("h2", { className: "text-lg font-bold text-txt tracking-wide", children: loading ? "Loading..." : doc?.filename || "Document" }), _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, className: "h-8 w-8 text-muted hover:bg-white/10 hover:text-txt rounded-full transition-all", children: "\u2715" })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent", children: [loading && (_jsxs("div", { className: "text-center py-12 text-muted font-bold tracking-wide animate-pulse", children: [_jsx("span", { className: "inline-block w-4 h-4 border-2 border-accent border-t-transparent rounded-full animate-spin mr-3 align-middle" }), t("knowledgeview.Loading")] })), error && (_jsx("div", { className: "text-center py-10 bg-danger/10 border border-danger/20 rounded-xl text-danger font-medium mx-auto max-w-lg", children: error })), !loading && !error && doc && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-8 p-5 bg-black/20 border border-white/5 shadow-inner rounded-xl", children: _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 text-xs", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[10px] font-bold tracking-widest uppercase text-muted/70", children: t("knowledgeview.Type") }), " ", _jsx("span", { className: "text-txt font-medium bg-black/20 px-2 py-1 rounded inline-block w-fit", children: doc.contentType })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[10px] font-bold tracking-widest uppercase text-muted/70", children: t("knowledgeview.Source") }), " ", _jsx("span", { className: "text-txt font-medium bg-black/20 px-2 py-1 rounded inline-block w-fit", children: doc.source })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[10px] font-bold tracking-widest uppercase text-muted/70", children: "Size" }), " ", _jsx("span", { className: "text-txt font-medium bg-black/20 px-2 py-1 rounded inline-block w-fit", children: formatByteSize(doc.fileSize) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[10px] font-bold tracking-widest uppercase text-muted/70", children: "Uploaded" }), " ", _jsx("span", { className: "text-txt font-medium bg-black/20 px-2 py-1 rounded inline-block w-fit", children: formatShortDate(doc.createdAt, { fallback: "—" }) })] }), doc.url && (_jsxs("div", { className: "col-span-full mt-2 pt-4 border-t border-white/5 flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[10px] font-bold tracking-widest uppercase text-muted/70", children: t("appsview.URL") }), " ", _jsx("a", { href: doc.url, target: "_blank", rel: "noopener noreferrer", className: "text-txt hover:text-txt/80 font-medium underline decoration-accent/30 underline-offset-4 transition-colors break-all", children: doc.url })] }))] }) }), _jsx("div", { className: "flex items-center justify-between mb-4 border-b border-white/10 pb-2", children: _jsxs("h3", { className: "text-sm font-bold tracking-wide text-txt", children: [t("knowledgeview.Fragments1"), _jsx("span", { className: "ml-2 px-2 py-0.5 rounded-full bg-white/10 text-xs text-muted font-mono", children: fragments.length })] }) }), _jsxs("div", { className: "space-y-4", children: [fragments.map((fragment, index) => (_jsxs("div", { className: "p-4 bg-card/60 border border-white/5 shadow-sm rounded-xl hover:border-accent/30 transition-colors", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("span", { className: "text-[11px] font-bold tracking-widest uppercase text-muted", children: [t("knowledgeview.Fragment"), " ", index + 1] }), fragment.position !== undefined && (_jsxs("span", { className: "text-[10px] text-muted/80 font-mono bg-black/20 px-2 py-0.5 rounded-md border border-white/5", children: [t("knowledgeview.Position"), " ", fragment.position] }))] }), _jsx("p", { className: "text-[13px] text-txt/90 whitespace-pre-wrap leading-relaxed", children: fragment.text })] }, fragment.id))), fragments.length === 0 && (_jsx("div", { className: "text-center py-12 text-muted bg-black/10 rounded-xl border border-dashed border-white/10", children: t("knowledgeview.NoFragmentsFound") }))] })] }))] })] }) }));
+}
+/* ── Main KnowledgeView Component ───────────────────────────────────── */
+export function KnowledgeView({ inModal } = {}) {
+    const { t } = useApp();
+    const { setActionNotice } = useApp();
+    const setActionNoticeRef = useRef(setActionNotice);
+    setActionNoticeRef.current = setActionNotice;
+    const [searchQuery, setSearchQuery] = useState("");
+    const [documents, setDocuments] = useState([]);
+    const [searchResults, setSearchResults] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [uploading, setUploading] = useState(false);
+    const [uploadStatus, setUploadStatus] = useState(null);
+    const [searching, setSearching] = useState(false);
+    const [deleting, setDeleting] = useState(null);
+    const [selectedDocId, setSelectedDocId] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    const [isServiceLoading, setIsServiceLoading] = useState(false);
+    const serviceRetryRef = useRef(0);
+    const loadData = useCallback(async () => {
+        setLoading(true);
+        setLoadError(null);
+        try {
+            const docsRes = await client.listKnowledgeDocuments({ limit: 100 });
+            setDocuments(docsRes.documents);
+            setIsServiceLoading(false);
+            serviceRetryRef.current = 0;
+        }
+        catch (err) {
+            const status = err.status;
+            if (status === 503) {
+                setIsServiceLoading(true);
+            }
+            else {
+                setIsServiceLoading(false);
+                const msg = err instanceof Error ? err.message : "Failed to load knowledge data";
+                setLoadError(msg);
+                setActionNoticeRef.current(msg, "error");
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        loadData().catch((err) => {
+            console.error("[KnowledgeView] Failed to load data:", err);
+            setLoading(false);
+        });
+    }, [loadData]);
+    // Auto-retry with exponential backoff when knowledge service is still loading (503)
+    useEffect(() => {
+        if (!isServiceLoading) {
+            serviceRetryRef.current = 0;
+            return;
+        }
+        const attempt = serviceRetryRef.current;
+        if (attempt >= 5) {
+            setIsServiceLoading(false);
+            setLoadError("Knowledge service did not become available. Please reload the page.");
+            return;
+        }
+        const delayMs = 2000 * 1.5 ** attempt; // 2s, 3s, 4.5s, 6.75s, ~10s
+        const timer = setTimeout(() => {
+            serviceRetryRef.current = attempt + 1;
+            loadData();
+        }, delayMs);
+        return () => clearTimeout(timer);
+    }, [isServiceLoading, loadData]);
+    const readKnowledgeFile = useCallback(async (file) => {
+        const reader = new FileReader();
+        return new Promise((resolve, reject) => {
+            reader.onload = () => {
+                const result = reader.result;
+                if (typeof result === "string") {
+                    resolve(result);
+                    return;
+                }
+                if (result instanceof ArrayBuffer) {
+                    const bytes = new Uint8Array(result);
+                    let binary = "";
+                    for (let i = 0; i < bytes.byteLength; i++) {
+                        binary += String.fromCharCode(bytes[i]);
+                    }
+                    resolve(btoa(binary));
+                    return;
+                }
+                reject(new Error("Failed to read file"));
+            };
+            reader.onerror = () => reject(reader.error);
+            if (shouldReadKnowledgeFileAsText(file)) {
+                reader.readAsText(file);
+            }
+            else {
+                reader.readAsArrayBuffer(file);
+            }
+        });
+    }, []);
+    const buildKnowledgeUploadRequest = useCallback(async (file, options) => {
+        const optimizedImage = await maybeCompressKnowledgeUploadImage(file);
+        const uploadFile = optimizedImage.file;
+        if (isKnowledgeImageFile(uploadFile) &&
+            uploadFile.size > MAX_KNOWLEDGE_IMAGE_PROCESSING_BYTES) {
+            throw new Error(`Image could not be compressed below ${formatByteSize(MAX_KNOWLEDGE_IMAGE_PROCESSING_BYTES)} for processing.`);
+        }
+        const uploadFilename = getKnowledgeUploadFilename(uploadFile);
+        const content = await readKnowledgeFile(uploadFile);
+        const request = {
+            content,
+            filename: uploadFilename,
+            contentType: uploadFile.type || "application/octet-stream",
+            metadata: {
+                includeImageDescriptions: options.includeImageDescriptions,
+                relativePath: uploadFile.webkitRelativePath || undefined,
+            },
+        };
+        const requestBytes = new TextEncoder().encode(JSON.stringify(request)).length;
+        if (requestBytes > MAX_UPLOAD_REQUEST_BYTES) {
+            throw new Error(`Upload payload is ${formatByteSize(requestBytes)}, which exceeds the current limit (${formatByteSize(MAX_UPLOAD_REQUEST_BYTES)}).`);
+        }
+        return {
+            filename: uploadFilename,
+            request,
+            requestBytes,
+        };
+    }, [readKnowledgeFile]);
+    const handleFilesUpload = useCallback(async (files, options) => {
+        const unsupportedFiles = files.filter((file) => !isSupportedKnowledgeFile(file));
+        const uploadQueue = files.filter((file) => file.size > 0 && isSupportedKnowledgeFile(file));
+        if (uploadQueue.length === 0) {
+            setActionNotice(unsupportedFiles.length > 0
+                ? "No supported non-empty files were selected."
+                : "No non-empty files were selected.", "info", 3000);
+            return;
+        }
+        const largeFiles = uploadQueue.filter((file) => file.size >= LARGE_FILE_WARNING_BYTES);
+        if (largeFiles.length > 0) {
+            const shouldContinue = typeof window === "undefined"
+                ? true
+                : await confirmDesktopAction({
+                    title: "Upload Large Files",
+                    message: `${largeFiles.length} large file(s) detected.`,
+                    detail: "Uploading can take longer and may increase embedding or vision costs.",
+                    confirmLabel: "Continue",
+                    cancelLabel: "Cancel",
+                    type: "warning",
+                });
+            if (!shouldContinue)
+                return;
+        }
+        const failures = [];
+        const warnings = [];
+        let successful = 0;
+        const normalizeUploadError = (err) => {
+            const message = err instanceof Error ? err.message : "Unknown upload error";
+            const status = err?.status;
+            return status === 413 || /maximum size|payload is/i.test(message)
+                ? "Upload too large. Try splitting this file."
+                : message;
+        };
+        setUploading(true);
+        setUploadStatus({
+            current: 0,
+            total: uploadQueue.length,
+            filename: "Preparing...",
+        });
+        try {
+            let currentBatch = [];
+            let currentBatchBytes = 0;
+            const flushBatch = async () => {
+                if (currentBatch.length === 0)
+                    return;
+                const batchToUpload = currentBatch;
+                currentBatch = [];
+                currentBatchBytes = 0;
+                const batchLabel = batchToUpload[0]?.filename || "batch";
+                setUploadStatus({
+                    current: successful + failures.length,
+                    total: uploadQueue.length,
+                    filename: `Uploading batch starting with ${batchLabel}`,
+                });
+                try {
+                    const result = await client.uploadKnowledgeDocumentsBulk({
+                        documents: batchToUpload.map((item) => item.request),
+                    });
+                    for (const item of result.results) {
+                        const batchItem = batchToUpload[item.index];
+                        const filename = item.filename || batchItem?.filename || "document";
+                        if (item.ok) {
+                            successful += 1;
+                            if (item.warnings?.[0]) {
+                                warnings.push(`${filename}: ${item.warnings[0]}`);
+                            }
+                        }
+                        else {
+                            failures.push(`${filename}: ${item.error || "Upload failed"}`);
+                        }
+                    }
+                }
+                catch (err) {
+                    const message = normalizeUploadError(err);
+                    for (const batchItem of batchToUpload) {
+                        failures.push(`${batchItem.filename}: ${message}`);
+                    }
+                }
+            };
+            for (const [index, file] of uploadQueue.entries()) {
+                const uploadFilename = getKnowledgeUploadFilename(file);
+                setUploadStatus({
+                    current: index + 1,
+                    total: uploadQueue.length,
+                    filename: `Preparing: ${uploadFilename}`,
+                });
+                try {
+                    const prepared = await buildKnowledgeUploadRequest(file, options);
+                    if (currentBatch.length > 0 &&
+                        (currentBatchBytes + prepared.requestBytes >
+                            BULK_UPLOAD_TARGET_BYTES ||
+                            currentBatch.length >= MAX_BULK_REQUEST_DOCUMENTS)) {
+                        await flushBatch();
+                    }
+                    currentBatch.push(prepared);
+                    currentBatchBytes += prepared.requestBytes;
+                }
+                catch (err) {
+                    failures.push(`${uploadFilename}: ${normalizeUploadError(err)}`);
+                }
+            }
+            await flushBatch();
+            let refreshFailed = false;
+            try {
+                await loadData();
+            }
+            catch (err) {
+                refreshFailed = true;
+                console.error("[KnowledgeView] Failed to refresh after upload:", err);
+            }
+            const skippedSummary = unsupportedFiles.length > 0
+                ? ` Skipped ${unsupportedFiles.length} unsupported file(s).`
+                : "";
+            const refreshSummary = refreshFailed
+                ? " Uploaded, but failed to refresh document list."
+                : "";
+            if (uploadQueue.length === 1 &&
+                successful === 1 &&
+                failures.length === 0) {
+                const onlyFile = getKnowledgeUploadFilename(uploadQueue[0]);
+                const baseMessage = `Uploaded "${onlyFile}"`;
+                if (warnings.length > 0) {
+                    setActionNotice(`${baseMessage}. ${warnings[0]}`, "info", 6000);
+                }
+                else if (refreshFailed) {
+                    setActionNotice(`${baseMessage}. Uploaded, but failed to refresh document list.`, "info", 6000);
+                }
+                else {
+                    setActionNotice(baseMessage, "success", 3000);
+                }
+                return;
+            }
+            if (failures.length === 0) {
+                setActionNotice(`Uploaded ${successful}/${uploadQueue.length} files.${warnings.length > 0 ? ` ${warnings[0]}` : ""}${skippedSummary}${refreshSummary}`, warnings.length > 0 || refreshFailed || unsupportedFiles.length > 0
+                    ? "info"
+                    : "success", 7000);
+                return;
+            }
+            setActionNotice(`Uploaded ${successful}/${uploadQueue.length} files. ${failures.length} failed.${failures.length > 0 ? ` ${failures[0]}` : ""}${skippedSummary}${refreshSummary}`, successful > 0 ? "info" : "error", 7000);
+        }
+        finally {
+            setUploading(false);
+            setUploadStatus(null);
+        }
+    }, [buildKnowledgeUploadRequest, loadData, setActionNotice]);
+    const handleUrlUpload = useCallback(async (url, options) => {
+        setUploading(true);
+        try {
+            const result = await client.uploadKnowledgeFromUrl(url, {
+                includeImageDescriptions: options.includeImageDescriptions,
+            });
+            const baseMessage = result.isYouTubeTranscript
+                ? `Imported YouTube transcript (${result.fragmentCount} fragments)`
+                : `Imported "${result.filename}" (${result.fragmentCount} fragments)`;
+            if (result.warnings && result.warnings.length > 0) {
+                setActionNotice(`${baseMessage}. ${result.warnings[0]}`, "info", 6000);
+            }
+            else {
+                setActionNotice(baseMessage, "success", 3000);
+            }
+            loadData();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Unknown import error";
+            setActionNotice(`Failed to import from URL: ${message}`, "error", 5000);
+        }
+        finally {
+            setUploading(false);
+        }
+    }, [loadData, setActionNotice]);
+    const handleSearch = useCallback(async (query) => {
+        setSearching(true);
+        try {
+            const result = await client.searchKnowledge(query, {
+                threshold: 0.3,
+                limit: 20,
+            });
+            setSearchResults(result.results);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Unknown search error";
+            setActionNotice(`Search failed: ${message}`, "error", 4000);
+            setSearchResults([]);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [setActionNotice]);
+    const handleDelete = useCallback(async (documentId) => {
+        setDeleting(documentId);
+        try {
+            const result = await client.deleteKnowledgeDocument(documentId);
+            if (result.ok) {
+                setActionNotice(`Deleted document (${result.deletedFragments} fragments removed)`, "success", 3000);
+                await loadData();
+            }
+            else {
+                setActionNotice("Failed to delete document", "error", 4000);
+            }
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Unknown delete error";
+            setActionNotice(`Failed to delete document: ${message}`, "error", 5000);
+        }
+        finally {
+            setDeleting(null);
+        }
+    }, [loadData, setActionNotice]);
+    const handleSearchSubmit = useCallback((e) => {
+        e?.preventDefault();
+        const query = searchQuery.trim();
+        if (!query)
+            return;
+        void handleSearch(query);
+    }, [handleSearch, searchQuery]);
+    return (_jsxs("div", { className: inModal ? "h-full w-full overflow-y-auto pb-8" : "w-full", children: [isServiceLoading && (_jsxs("div", { className: "flex items-center gap-2 mb-4 px-3 py-2 rounded border border-[var(--border)] bg-[var(--card)] text-sm text-[var(--muted)]", children: [_jsx("span", { className: "w-4 h-4 border-2 border-[var(--accent)] border-t-transparent rounded-full animate-spin" }), t("knowledgeview.KnowledgeServiceIs")] })), loadError && !isServiceLoading && (_jsxs("div", { className: "flex items-center justify-between mb-4 px-3 py-2 rounded border border-[var(--danger)] bg-[var(--danger)]/10 text-sm text-[var(--danger)]", children: [_jsx("span", { children: loadError }), _jsx("button", { type: "button", onClick: () => loadData(), className: "ml-3 px-2 py-1 text-xs border border-[var(--danger)] rounded hover:bg-[var(--danger)]/20 transition-colors", children: t("common.retry") })] })), _jsxs("div", { className: "mb-6 flex flex-wrap items-start justify-between gap-2", children: [_jsx("form", { className: "w-full max-w-[500px] flex-[1_1_500px]", onSubmit: handleSearchSubmit, children: _jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx(Input, { type: "text", placeholder: t("knowledge.ui.searchPlaceholder"), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), disabled: searching, className: "h-10 bg-bg border-border text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-accent" }), _jsx(Button, { type: "submit", variant: "default", size: "sm", className: "h-10 px-4 shadow-sm", disabled: !searchQuery.trim() || searching, children: searching
+                                        ? t("knowledge.ui.searching")
+                                        : t("knowledge.ui.search") })] }) }), _jsx(UploadZone, { onFilesUpload: handleFilesUpload, onUrlUpload: handleUrlUpload, uploading: uploading, uploadStatus: uploadStatus })] }), searchResults !== null && (_jsx(SearchResults, { results: searchResults, onClear: () => setSearchResults(null) })), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between mb-4 border-b border-border/40 pb-3", children: [_jsxs("h2", { className: "text-sm font-bold tracking-wide text-txt", children: [t("knowledgeview.Documents"), _jsx("span", { className: "ml-2 px-2 py-0.5 rounded-full bg-black/10 text-xs text-muted font-mono", children: documents.length })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 text-[11px] font-bold border border-transparent shadow-inner hover:bg-accent/10 hover:border-accent/30 hover:text-txt transition-all", onClick: () => void loadData(), disabled: loading, children: loading ? "Loading..." : "Refresh" })] }), loading && documents.length === 0 && (_jsx("div", { className: "text-center py-12 text-muted font-bold tracking-wide animate-pulse", children: t("knowledgeview.LoadingDocuments") })), !loading && documents.length === 0 && (_jsxs("div", { className: "text-center py-16 border-2 border-dashed border-border/40 rounded-2xl bg-card/20 backdrop-blur-sm shadow-inner", children: [_jsx("div", { className: "text-muted/80 font-bold mb-2 tracking-wide text-[15px]", children: t("knowledgeview.NoDocumentsYet") }), _jsx("div", { className: "text-xs text-muted/60 font-medium", children: t("knowledgeview.UploadFilesOrImpo") })] })), _jsx("div", { className: "space-y-2", children: documents.map((doc) => (_jsx(DocumentCard, { doc: doc, onSelect: setSelectedDocId, onDelete: handleDelete, deleting: deleting === doc.id }, doc.id))) })] }), selectedDocId && (_jsx(DocumentDetailModal, { documentId: selectedDocId, onClose: () => setSelectedDocId(null) }))] }));
+}

package/components/LanguageDropdown.d.ts

@@ -0,0 +1,30 @@
+/**
+ * LanguageDropdown — language selector used in the app header and settings.
+ *
+ * Fully props-driven; no app context dependency. Takes the current language
+ * and a setter from the caller. Works in both "native" and "companion"
+ * visual variants.
+ */
+import type { UiLanguage } from "../i18n/messages";
+/** Minimal translator function type. Receive key, return string. */
+export type TranslatorFn = (key: string) => string;
+/** Language metadata with flag emoji and native label. */
+export declare const LANGUAGES: {
+    id: UiLanguage;
+    flag: string;
+    label: string;
+}[];
+export interface LanguageDropdownProps {
+    uiLanguage: UiLanguage;
+    setUiLanguage: (language: UiLanguage) => void;
+    /** Optional translator for ARIA labels */
+    t?: TranslatorFn;
+    /** Optional extra className on the root */
+    className?: string;
+    /** Optional extra className on the trigger button */
+    triggerClassName?: string;
+    variant?: "native" | "companion";
+    menuPlacement?: "bottom-end" | "top-end";
+}
+export declare function LanguageDropdown({ uiLanguage, setUiLanguage, t, className, triggerClassName, variant, menuPlacement, }: LanguageDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LanguageDropdown.d.ts.map

package/components/LanguageDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageDropdown.d.ts","sourceRoot":"","sources":["../../src/components/LanguageDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,oEAAoE;AACpE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAEnD,0DAA0D;AAC1D,eAAO,MAAM,SAAS,EAAE;IAAE,EAAE,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAMtE,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACjC,aAAa,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,CAAC,EACD,SAAS,EACT,gBAAgB,EAChB,OAAkB,EAClB,aAA4B,GAC7B,EAAE,qBAAqB,2CAiJvB"}

package/components/LanguageDropdown.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LanguageDropdown — language selector used in the app header and settings.
+ *
+ * Fully props-driven; no app context dependency. Takes the current language
+ * and a setter from the caller. Works in both "native" and "companion"
+ * visual variants.
+ */
+import { Check, ChevronDown } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+/** Language metadata with flag emoji and native label. */
+export const LANGUAGES = [
+    { id: "en", flag: "🇺🇸", label: "English" },
+    { id: "zh-CN", flag: "🇨🇳", label: "中文" },
+    { id: "ko", flag: "🇰🇷", label: "한국어" },
+    { id: "es", flag: "🇪🇸", label: "Español" },
+    { id: "pt", flag: "🇧🇷", label: "Português" },
+];
+export function LanguageDropdown({ uiLanguage, setUiLanguage, t, className, triggerClassName, variant = "native", menuPlacement = "bottom-end", }) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [menuPos, setMenuPos] = useState(null);
+    // Compute dropdown position from trigger button rect (for companion portal)
+    const updateMenuPos = useCallback(() => {
+        if (variant !== "companion" || !triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        if (menuPlacement === "top-end") {
+            setMenuPos({
+                bottom: window.innerHeight - rect.top + 4,
+                right: window.innerWidth - rect.right,
+            });
+            return;
+        }
+        setMenuPos({
+            top: rect.bottom + 4,
+            right: window.innerWidth - rect.right,
+        });
+    }, [menuPlacement, variant]);
+    // Close on outside click
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target)) {
+                // Also check if clicked inside the portaled menu
+                const portalMenu = document.getElementById("lang-dropdown-portal");
+                if (portalMenu?.contains(e.target))
+                    return;
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    // Close on Escape
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [open]);
+    // Update position when opening
+    useEffect(() => {
+        if (open)
+            updateMenuPos();
+    }, [open, updateMenuPos]);
+    const current = LANGUAGES.find((l) => l.id === uiLanguage) ?? LANGUAGES[0];
+    const triggerClass = `inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 h-11 px-3 border border-border/50 bg-bg/50 backdrop-blur-md text-xs font-medium cursor-pointer transition-all duration-300 text-txt hover:border-accent hover:text-txt rounded-md shadow-sm ${open ? "border-accent text-txt bg-accent/5" : ""} ${triggerClassName ?? ""}`;
+    const optionClass = (selected) => `w-full flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-bg-hover cursor-pointer ${selected ? "text-txt bg-accent/5 font-medium" : "text-txt"}`;
+    const inlineMenuPositionClass = menuPlacement === "top-end"
+        ? "absolute bottom-full right-0 mb-1 z-50"
+        : "absolute top-full right-0 mt-1 z-50";
+    const menuContent = open && (_jsx("ul", { id: "lang-dropdown-portal", "data-no-camera-drag": "true", className: `w-36 rounded-lg border border-border/50 bg-bg/50 shadow-xl overflow-hidden py-1 backdrop-blur-md ${variant === "companion" ? "fixed" : inlineMenuPositionClass}`, style: variant === "companion" && menuPos
+            ? {
+                ...(menuPos.top !== undefined ? { top: menuPos.top } : {}),
+                ...(menuPos.bottom !== undefined
+                    ? { bottom: menuPos.bottom }
+                    : {}),
+                right: menuPos.right,
+                zIndex: 10001,
+                backdropFilter: "blur(24px)",
+                WebkitBackdropFilter: "blur(24px)",
+                boxShadow: "var(--shadow-lg)",
+            }
+            : undefined, "aria-label": t?.("settings.language") ?? "Language", children: LANGUAGES.map((lang) => (_jsx("li", { role: "presentation", children: _jsxs("button", { type: "button", role: "option", "aria-selected": lang.id === uiLanguage, className: optionClass(lang.id === uiLanguage), onPointerDown: (event) => event.stopPropagation(), onClick: () => {
+                    setUiLanguage(lang.id);
+                    setOpen(false);
+                }, "data-testid": `language-option-${lang.id}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: lang.flag }), _jsx("span", { children: lang.label })] }), lang.id === uiLanguage && _jsx(Check, { className: "w-4 h-4" })] }) }, lang.id))) }));
+    return (_jsxs("div", { ref: rootRef, className: `relative inline-flex shrink-0 ${className ?? ""}`, "data-testid": "language-dropdown", "data-no-camera-drag": "true", children: [_jsxs("button", { ref: triggerRef, type: "button", className: triggerClass, onPointerDown: (event) => event.stopPropagation(), onClick: () => setOpen((v) => !v), "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": t?.("settings.language") ?? "Language", "data-testid": "language-dropdown-trigger", children: [_jsx("span", { className: "text-sm leading-none", children: current.flag }), _jsx("span", { className: "hidden sm:inline uppercase tracking-widest opacity-80", children: current.id }), _jsx(ChevronDown, { className: `w-3.5 h-3.5 opacity-60 transition-transform ${open ? "rotate-180" : ""}` })] }), variant === "companion" && menuContent
+                ? createPortal(menuContent, document.body)
+                : menuContent] }));
+}