@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.1

package/dist/components/pages/database-utils.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button } from "@elizaos/ui";
+import { useEffect, useRef } from "react";
+import { useApp } from "../../state/index.js";
+/** Format a cell value for display. */
+export function formatCell(val) {
+    if (val === null || val === undefined)
+        return "NULL";
+    if (typeof val === "boolean")
+        return val ? "true" : "false";
+    if (typeof val === "object") {
+        try {
+            return JSON.stringify(val);
+        }
+        catch {
+            return String(val);
+        }
+    }
+    return String(val);
+}
+/** Abbreviated type label for column badges. */
+export function typeLabel(type) {
+    const t = type.toLowerCase();
+    if (t.includes("int"))
+        return "int";
+    if (t.includes("serial"))
+        return "serial";
+    if (t.includes("bool"))
+        return "bool";
+    if (t.includes("float") ||
+        t.includes("double") ||
+        t.includes("numeric") ||
+        t.includes("real"))
+        return "float";
+    if (t.includes("json"))
+        return "json";
+    if (t.includes("uuid"))
+        return "uuid";
+    if (t.includes("timestamp"))
+        return "time";
+    if (t.includes("date"))
+        return "date";
+    if (t.includes("text") || t.includes("char") || t.includes("varchar"))
+        return "text";
+    if (t.includes("vector"))
+        return "vector";
+    if (t.includes("bytea"))
+        return "bytes";
+    return type.slice(0, 6);
+}
+/** Color for column type badge. */
+export function typeBadgeColor(type) {
+    const t = type.toLowerCase();
+    if (t.includes("int") ||
+        t.includes("serial") ||
+        t.includes("float") ||
+        t.includes("numeric") ||
+        t.includes("real") ||
+        t.includes("double"))
+        return "text-accent-fg bg-accent/12";
+    if (t.includes("bool"))
+        return "text-ok bg-ok/10";
+    if (t.includes("json"))
+        return "text-warn bg-warn/10";
+    if (t.includes("uuid"))
+        return "text-accent bg-accent/10";
+    if (t.includes("timestamp") || t.includes("date"))
+        return "text-danger bg-danger/10";
+    if (t.includes("text") || t.includes("char"))
+        return "text-muted-strong bg-bg-hover";
+    if (t.includes("vector"))
+        return "text-accent bg-accent/12";
+    return "text-muted-strong bg-bg-hover";
+}
+// ── Shared display components ─────────────────────────────────────────
+export function CellPopover({ value, onClose, }) {
+    const { t } = useApp();
+    const ref = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                onClose();
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClose]);
+    return (_jsxs("div", { ref: ref, className: "fixed z-50 bg-card/60 backdrop-blur-md border border-border/40 shadow-[0_8px_30px_rgba(var(--accent-rgb),0.15)] rounded-xl p-4 max-w-[500px] max-h-[300px] overflow-auto", style: { top: "50%", left: "50%", transform: "translate(-50%, -50%)" }, children: [_jsxs("div", { className: "flex items-center justify-between mb-3 pb-2", children: [_jsx("span", { className: "text-xs text-muted uppercase font-bold tracking-wider", children: t("databaseview.CellValue") }), _jsx(Button, { variant: "ghost", size: "icon", className: "w-6 h-6 rounded-full transition-[background-color,color,box-shadow] hover:bg-bg-hover hover:text-txt hover:shadow-[0_0_10px_rgba(var(--accent-rgb),0.2)]", onClick: onClose, children: "\u00D7" })] }), _jsx("pre", { className: "text-xs text-txt font-mono whitespace-pre-wrap break-all m-0 bg-bg/40 p-3 rounded-lg border border-border/40", children: value })] }));
+}
+export function ResultsGrid({ columns, rows, columnMeta, sortCol, sortDir, onSort, onCellClick, }) {
+    const { t } = useApp();
+    return (_jsx("div", { className: "overflow-auto border border-border/40 bg-card/40 backdrop-blur-md rounded-2xl shadow-inner", style: { maxHeight: "calc(100vh - 340px)" }, children: _jsxs("table", { className: "w-full border-collapse text-xs font-mono", children: [_jsx("thead", { className: "sticky top-0 z-10 backdrop-blur-xl bg-bg/80 border-b border-border/40 shadow-sm", children: _jsxs("tr", { children: [_jsx("th", { className: "w-[50px] min-w-[50px] px-3 py-2.5 text-2xs text-muted font-medium text-right border-r border-border/40", children: "#" }), columns.map((col) => {
+                                const meta = columnMeta?.get(col);
+                                const isSorted = sortCol === col;
+                                return (_jsx("th", { className: "px-4 py-2.5 text-left border-r border-border/40 whitespace-nowrap cursor-pointer select-none hover:bg-bg-hover transition-colors group", onClick: () => onSort?.(col), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs-tight text-txt font-semibold group-hover:text-txt transition-colors", children: col }), meta && (_jsx(Badge, { variant: "outline", className: `text-3xs px-1.5 py-0 border-none font-medium ${typeBadgeColor(meta.type)}`, children: typeLabel(meta.type) })), meta?.isPrimaryKey && (_jsx(Badge, { variant: "outline", className: "border-none bg-accent/16 px-1.5 py-0 text-3xs font-bold text-accent-fg shadow-sm", children: "PK" })), isSorted && (_jsx("span", { className: "text-2xs text-accent", children: sortDir === "asc" ? "↑" : "↓" }))] }) }, col));
+                            })] }) }), _jsx("tbody", { children: rows.map((row, i) => (_jsxs("tr", { className: "border-b border-border/20 hover:bg-accent/10 transition-colors group", children: [_jsx("td", { className: "px-3 py-2 text-2xs text-muted text-right border-r border-border/30 bg-bg/20 tabular-nums group-hover:text-txt/70 transition-colors", children: i + 1 }), columns.map((col) => {
+                                const raw = row[col];
+                                const display = formatCell(raw);
+                                const isNull = raw === null || raw === undefined;
+                                const isExpandable = display.length > 40 && !!onCellClick;
+                                return (_jsx("td", { className: "px-4 py-2 border-r border-border/20 max-w-[280px] truncate cursor-default transition-colors", title: display, onClick: () => {
+                                        if (isExpandable)
+                                            onCellClick(display);
+                                    }, onKeyDown: (e) => {
+                                        if (!isExpandable)
+                                            return;
+                                        if (e.key === "Enter" || e.key === " ") {
+                                            e.preventDefault();
+                                            onCellClick(display);
+                                        }
+                                    }, role: isExpandable ? "button" : undefined, tabIndex: isExpandable ? 0 : undefined, children: isNull ? (_jsx("span", { className: "text-muted italic opacity-50", children: t("databaseview.NULL") })) : (_jsx("span", { className: "text-txt", children: display })) }, col));
+                            })] }, JSON.stringify(row)))) })] }) }));
+}
+export function PaginationBar({ total, offset, limit, onPrev, onNext, }) {
+    const { t } = useApp();
+    const start = offset + 1;
+    const end = Math.min(offset + limit, total);
+    const hasPrev = offset > 0;
+    const hasNext = offset + limit < total;
+    return (_jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 bg-card/60 backdrop-blur-md rounded-b-2xl text-xs-tight text-muted", children: [_jsx("span", { className: "font-medium", children: t("databaseview.RowCountSummary", {
+                    count: total.toLocaleString(),
+                    rowLabel: total === 1
+                        ? t("databaseview.row")
+                        : t("common.rows", { defaultValue: "rows" }),
+                    range: total > 0
+                        ? t("databaseview.ShowingRange", {
+                            start,
+                            end,
+                            defaultValue: " · showing {{start}}-{{end}}",
+                        })
+                        : "",
+                    defaultValue: "{{count}} {{rowLabel}}{{range}}",
+                }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] whitespace-normal break-words rounded-lg border-border/50 bg-bg/50 py-1 text-left text-xs-tight backdrop-blur-sm transition-[border-color,color,box-shadow] hover:border-accent hover:text-txt hover:shadow-[0_0_10px_rgba(var(--accent-rgb),0.2)]", disabled: !hasPrev, onClick: onPrev, children: t("common.prev") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] whitespace-normal break-words rounded-lg border-border/50 bg-bg/50 py-1 text-left text-xs-tight backdrop-blur-sm transition-[border-color,color,box-shadow] hover:border-accent hover:text-txt hover:shadow-[0_0_10px_rgba(var(--accent-rgb),0.2)]", disabled: !hasNext, onClick: onNext, children: t("common.next") })] })] }));
+}

package/dist/components/pages/documents-detail.d.ts

@@ -0,0 +1,9 @@
+import type { DocumentRecord } from "../../api/client-types-chat";
+export declare function getDocumentTypeLabel(contentType?: string): string;
+export declare function getDocumentSourceLabel(source: string | undefined, t: (key: string, options?: Record<string, unknown>) => string): string;
+export declare function getDocumentSummary(doc: DocumentRecord, t: (key: string, options?: Record<string, unknown>) => string): string;
+export declare function DocumentViewer({ documentId, onUpdated, }: {
+    documentId: string | null;
+    onUpdated?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=documents-detail.d.ts.map

package/dist/components/pages/documents-detail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"documents-detail.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/documents-detail.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,6BAA6B,CAAC;AAIrC,wBAAgB,oBAAoB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GAC5D,MAAM,CAQR;AAED,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,cAAc,EACnB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GAC5D,MAAM,CAWR;AAgBD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,SAAS,GACV,EAAE;IACD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,2CA2VA"}

package/dist/components/pages/documents-detail.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, PagePanel, Textarea } from "@elizaos/ui";
+import { BadgeCheck, Bot, CalendarDays, FileText, Globe2, Lock, Pencil, Save, Shield, User, } from "lucide-react";
+import { useEffect, useState } from "react";
+import { client } from "../../api/client.js";
+import { useApp } from "../../state/useApp.js";
+import { formatByteSize } from "../../utils/format.js";
+export function getDocumentTypeLabel(contentType) {
+    return contentType?.split("/").pop()?.toUpperCase() || "DOC";
+}
+export function getDocumentSourceLabel(source, t) {
+    if (source === "youtube") {
+        return t("documentsview.YouTube", { defaultValue: "YouTube" });
+    }
+    if (source === "url") {
+        return t("documentsview.FromUrl", { defaultValue: "From URL" });
+    }
+    return t("aria.upload", { defaultValue: "Upload" });
+}
+export function getDocumentSummary(doc, t) {
+    const fragmentLabel = doc.fragmentCount === 1
+        ? t("documentsview.FragmentCountOne", {
+            defaultValue: "1 fragment",
+        })
+        : t("documentsview.FragmentCountMany", {
+            defaultValue: "{{count}} fragments",
+            count: doc.fragmentCount,
+        });
+    return `${getDocumentSourceLabel(doc.source, t)} • ${fragmentLabel} • ${formatByteSize(doc.fileSize)}`;
+}
+function formatDocumentTimestamp(value) {
+    if (!value)
+        return null;
+    const timestamp = value < 1_000_000_000_000 ? value * 1000 : value;
+    const date = new Date(timestamp);
+    if (Number.isNaN(date.getTime()))
+        return null;
+    return date.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+/* ── Document Viewer ────────────────────────────────────────────────── */
+export function DocumentViewer({ documentId, onUpdated, }) {
+    const { t, setActionNotice } = useApp();
+    const [doc, setDoc] = useState(null);
+    const [fragments, setFragments] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [editing, setEditing] = useState(false);
+    const [draftText, setDraftText] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [reloadToken, setReloadToken] = useState(0);
+    useEffect(() => {
+        const id = documentId ?? "";
+        const refreshToken = reloadToken;
+        void refreshToken;
+        if (!id) {
+            setDoc(null);
+            setFragments([]);
+            setLoading(false);
+            setError(null);
+            setEditing(false);
+            setDraftText("");
+            return;
+        }
+        let cancelled = false;
+        async function load() {
+            setLoading(true);
+            setError(null);
+            const [docRes, fragRes] = await Promise.all([
+                client.getDocument(id),
+                client.getDocumentFragments(id),
+            ]);
+            if (cancelled)
+                return;
+            setDoc(docRes.document);
+            setFragments(fragRes.fragments);
+            setDraftText(docRes.document.content?.text ?? "");
+            setEditing(false);
+            setLoading(false);
+        }
+        load().catch((err) => {
+            if (!cancelled) {
+                setError(err instanceof Error
+                    ? err.message
+                    : t("documentsview.FailedToLoadDocument", {
+                        defaultValue: "Failed to load document",
+                    }));
+                setLoading(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [documentId, reloadToken, t]);
+    const previewText = doc?.content?.text?.trim();
+    const documentCreatedLabel = formatDocumentTimestamp(doc?.createdAt);
+    const scopeLabel = doc?.scope === "owner-private"
+        ? t("documentsview.ScopeOwner", { defaultValue: "Owner" })
+        : doc?.scope === "user-private"
+            ? t("documentsview.ScopeUser", { defaultValue: "User" })
+            : doc?.scope === "agent-private"
+                ? t("documentsview.ScopeAgent", { defaultValue: "Agent" })
+                : t("documentsview.ScopeGlobal", { defaultValue: "Global" });
+    const ScopeIcon = doc?.scope === "owner-private"
+        ? Shield
+        : doc?.scope === "user-private"
+            ? User
+            : doc?.scope === "agent-private"
+                ? Bot
+                : Globe2;
+    const handleSave = async () => {
+        if (!documentId || !doc)
+            return;
+        setSaving(true);
+        try {
+            const result = await client.updateDocument(documentId, {
+                content: draftText,
+            });
+            setActionNotice(t("documentsview.DocumentUpdated", {
+                defaultValue: "Updated knowledge document ({{count}} fragments)",
+                count: result.fragmentCount,
+            }), "success", 3000);
+            setEditing(false);
+            setReloadToken((current) => current + 1);
+            onUpdated?.();
+        }
+        catch (saveError) {
+            setActionNotice(saveError instanceof Error
+                ? saveError.message
+                : t("documentsview.FailedToUpdateDocument", {
+                    defaultValue: "Failed to update knowledge document",
+                }), "error", 5000);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsx(PagePanel, { className: "flex flex-col overflow-hidden !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", children: _jsxs("div", { className: "custom-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto px-4 py-4", children: [loading && (_jsxs("div", { className: "py-10 text-center font-bold tracking-wide text-muted animate-pulse", children: [_jsx("span", { className: "mr-3 inline-block h-4 w-4 animate-spin rounded-full border-2 border-accent border-t-transparent align-middle" }), t("appsview.Loading")] })), error && (_jsx("div", { className: "rounded-xl border border-danger/25 bg-danger/10 py-8 text-center text-sm font-medium text-danger", children: error })), !loading && !error && !doc && (_jsx(PagePanel.Empty, { variant: "inset", className: "px-0 py-12 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", description: t("documentsview.NoDocumentSelectedDesc", {
+                        defaultValue: "Select a document from the list to view its fragments and metadata.",
+                    }), title: t("documentsview.NoDocumentSelected", {
+                        defaultValue: "No document selected",
+                    }) })), !loading && !error && doc && (_jsxs("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-4", children: [_jsxs("div", { className: "px-1", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("span", { className: "mt-1 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/40 bg-bg-muted/30 text-muted-strong", children: _jsx(FileText, { className: "h-4.5 w-4.5", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "break-words text-lg font-semibold text-txt", children: doc.filename }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-1.5 text-xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-accent/20 bg-accent/8 px-2 py-0.5 text-accent-fg", children: [_jsx(ScopeIcon, { className: "h-3 w-3", "aria-hidden": true }), scopeLabel] }), _jsx("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/35 bg-bg-muted/25 px-2 py-0.5", children: doc.provenance.label }), _jsx("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/35 bg-bg-muted/25 px-2 py-0.5", children: formatByteSize(doc.fileSize) }), _jsx("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/35 bg-bg-muted/25 px-2 py-0.5", children: doc.fragmentCount === 1
+                                                                ? "1 fragment"
+                                                                : `${doc.fragmentCount} fragments` }), _jsx("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/35 bg-bg-muted/25 px-2 py-0.5", children: getDocumentTypeLabel(doc.contentType) }), doc.canEditText ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-status-success/25 bg-status-success-bg px-2 py-0.5 text-status-success", children: [_jsx(BadgeCheck, { className: "h-3 w-3", "aria-hidden": true }), t("documentsview.Editable", {
+                                                                    defaultValue: "Editable",
+                                                                })] })) : null, !doc.canDelete ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/35 bg-bg-muted/25 px-2 py-0.5", children: [_jsx(Lock, { className: "h-3 w-3", "aria-hidden": true }), t("documentsview.Locked", {
+                                                                    defaultValue: "Locked",
+                                                                })] })) : null, documentCreatedLabel ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/35 bg-bg-muted/25 px-2 py-0.5", children: [_jsx(CalendarDays, { className: "h-3 w-3", "aria-hidden": true }), documentCreatedLabel] })) : null, doc.provenance.detail ? (_jsx("span", { className: "inline-flex min-w-0 max-w-full items-center gap-1 rounded-full border border-border/35 bg-bg-muted/25 px-2 py-0.5", children: _jsx("span", { className: "truncate", children: doc.provenance.detail }) })) : null] })] })] }), _jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: doc.canEditText ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-lg", onClick: () => setEditing((current) => !current), disabled: saving, children: [_jsx(Pencil, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true }), editing ? "Cancel" : "Edit text"] }), editing ? (_jsxs(Button, { type: "button", size: "sm", className: "rounded-lg", onClick: () => void handleSave(), disabled: saving || draftText.trim().length === 0, children: [_jsx(Save, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true }), saving ? "Saving..." : "Save"] })) : null] })) : doc.editabilityReason ? (_jsx("div", { className: "text-xs text-muted", children: doc.editabilityReason })) : null })] }), _jsxs(PagePanel, { variant: "inset", className: "p-4 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", children: [_jsx("div", { className: "mb-3 text-xs font-semibold uppercase tracking-[0.12em] text-muted/70", children: t("common.preview", { defaultValue: "Preview" }) }), editing ? (_jsx(Textarea, { value: draftText, rows: 16, onChange: (event) => setDraftText(event.target.value), className: "min-h-[20rem] resize-y rounded-xl border-border/40 bg-bg-muted/15 font-mono text-sm leading-relaxed" })) : previewText ? (_jsx("pre", { className: "custom-scrollbar max-h-[16rem] overflow-auto whitespace-pre-wrap break-words text-sm leading-relaxed text-txt/88", children: previewText.slice(0, 2000) })) : (_jsx("div", { className: "py-6 text-center text-xs text-muted", children: t("documentsview.NoPreview", {
+                                        defaultValue: "Full text preview is not available",
+                                    }) }))] }), _jsxs(PagePanel, { variant: "inset", className: "p-4 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", children: [_jsx("div", { className: "mb-3 text-xs font-semibold uppercase tracking-[0.12em] text-muted/70", children: t("documentsview.FragmentsLabel", {
+                                        defaultValue: "Fragments",
+                                    }) }), _jsxs("div", { className: "divide-y divide-border/20", children: [fragments.map((fragment, index) => {
+                                            const createdLabel = formatDocumentTimestamp(fragment.createdAt);
+                                            return (_jsxs("article", { className: "grid gap-3 py-4 sm:grid-cols-[4rem_minmax(0,1fr)]", children: [_jsxs("div", { className: "flex items-start gap-2 sm:block", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border/35 bg-bg-muted/20 text-xs font-bold text-muted-strong", children: index + 1 }), _jsx("div", { className: "mt-0.5 text-2xs font-semibold uppercase tracking-[0.12em] text-muted/60 sm:mt-2", children: t("documentsview.Chunk", {
+                                                                    defaultValue: "Chunk",
+                                                                }) })] }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "mb-2 flex flex-wrap items-center gap-2 text-2xs text-muted", children: [fragment.position !== undefined ? (_jsx("span", { children: t("documentsview.FragmentPosition", {
+                                                                            defaultValue: "position {{position}}",
+                                                                            position: fragment.position,
+                                                                        }) })) : null, createdLabel ? (_jsxs(_Fragment, { children: [fragment.position !== undefined ? (_jsx("span", { children: "\u2022" })) : null, _jsx("span", { children: createdLabel })] })) : null, (fragment.position !== undefined ||
+                                                                        createdLabel) && _jsx("span", { children: "\u2022" }), _jsx("span", { children: t("documentsview.CharacterCount", {
+                                                                            defaultValue: "{{count}} chars",
+                                                                            count: fragment.text.length,
+                                                                        }) })] }), _jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-txt/90", children: fragment.text })] })] }, fragment.id));
+                                        }), fragments.length === 0 && (_jsx(PagePanel.Empty, { variant: "inset", className: "min-h-[8rem] py-8 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", title: t("documentsview.NoFragmentsFound") }))] })] })] }))] }) }));
+}

package/dist/components/pages/documents-upload.d.ts

@@ -0,0 +1,31 @@
+import type { DocumentScope } from "../../api/client-types-chat";
+export declare const MAX_UPLOAD_REQUEST_BYTES: number;
+export declare const BULK_UPLOAD_TARGET_BYTES: number;
+export declare const MAX_BULK_REQUEST_DOCUMENTS = 100;
+export declare const LARGE_FILE_WARNING_BYTES: number;
+export declare const SUPPORTED_UPLOAD_EXTENSIONS: Set<string>;
+export declare const DOCUMENT_UPLOAD_ACCEPT: string;
+export type DocumentUploadFile = File & {
+    webkitRelativePath?: string;
+};
+export type DocumentUploadOptions = {
+    includeImageDescriptions: boolean;
+    scope: DocumentScope;
+};
+export declare const DEFAULT_DOCUMENT_UPLOAD_SCOPE: DocumentScope;
+export declare function getDocumentUploadFilename(file: DocumentUploadFile): string;
+export declare function shouldReadDocumentFileAsText(file: Pick<File, "type" | "name">): boolean;
+export declare function isSupportedDocumentFile(file: Pick<File, "name">): boolean;
+export declare function UploadZone({ fileInputId, onFilesUpload, onTextUpload, onUrlUpload, uploading, uploadStatus, }: {
+    fileInputId?: string;
+    onFilesUpload: (files: DocumentUploadFile[], options: DocumentUploadOptions) => void;
+    onTextUpload: (text: string, title: string | undefined, options: DocumentUploadOptions) => void;
+    onUrlUpload: (url: string, options: DocumentUploadOptions) => void;
+    uploading: boolean;
+    uploadStatus: {
+        current: number;
+        total: number;
+        filename: string;
+    } | null;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=documents-upload.d.ts.map

package/dist/components/pages/documents-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"documents-upload.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/documents-upload.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAGjE,eAAO,MAAM,wBAAwB,QAAiB,CAAC;AACvD,eAAO,MAAM,wBAAwB,QAAiB,CAAC;AACvD,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,wBAAwB,QAAgB,CAAC;AACtD,eAAO,MAAM,2BAA2B,aAetC,CAAC;AACH,eAAO,MAAM,sBAAsB,QAExB,CAAC;AAEZ,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,aAA8B,CAAC;AA4C3E,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,kBAAkB,GAAG,MAAM,CAE1E;AAED,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,GAChC,OAAO,CAeT;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAMzE;AAID,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,CACb,KAAK,EAAE,kBAAkB,EAAE,EAC3B,OAAO,EAAE,qBAAqB,KAC3B,IAAI,CAAC;IACV,YAAY,EAAE,CACZ,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,OAAO,EAAE,qBAAqB,KAC3B,IAAI,CAAC;IACV,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC3E,2CA6RA"}

package/dist/components/pages/documents-upload.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Input, Textarea } from "@elizaos/ui";
+import { Bot, FileUp, Globe2, Link2, NotebookPen, Shield, User, } from "lucide-react";
+import { useCallback, useMemo, useRef, useState, } from "react";
+import { useApp } from "../../state/useApp.js";
+export const MAX_UPLOAD_REQUEST_BYTES = 32 * 1_048_576;
+export const BULK_UPLOAD_TARGET_BYTES = 24 * 1_048_576;
+export const MAX_BULK_REQUEST_DOCUMENTS = 100;
+export const LARGE_FILE_WARNING_BYTES = 8 * 1_048_576;
+export const SUPPORTED_UPLOAD_EXTENSIONS = new Set([
+    ".txt",
+    ".md",
+    ".mdx",
+    ".pdf",
+    ".docx",
+    ".json",
+    ".csv",
+    ".xml",
+    ".html",
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".webp",
+    ".gif",
+]);
+export const DOCUMENT_UPLOAD_ACCEPT = Array.from(SUPPORTED_UPLOAD_EXTENSIONS).join(",");
+export const DEFAULT_DOCUMENT_UPLOAD_SCOPE = "user-private";
+const DOCUMENT_UPLOAD_SCOPE_OPTIONS = [
+    {
+        value: "user-private",
+        labelKey: "documentsview.ScopeUser",
+        defaultLabel: "User",
+        titleKey: "documentsview.ScopeUserDescription",
+        defaultTitle: "Visible to this user and the owner.",
+        Icon: User,
+    },
+    {
+        value: "global",
+        labelKey: "documentsview.ScopeGlobal",
+        defaultLabel: "Global",
+        titleKey: "documentsview.ScopeGlobalDescription",
+        defaultTitle: "Visible to everyone who can use this agent.",
+        Icon: Globe2,
+    },
+    {
+        value: "owner-private",
+        labelKey: "documentsview.ScopeOwner",
+        defaultLabel: "Owner",
+        titleKey: "documentsview.ScopeOwnerDescription",
+        defaultTitle: "Owner-only document.",
+        Icon: Shield,
+    },
+    {
+        value: "agent-private",
+        labelKey: "documentsview.ScopeAgent",
+        defaultLabel: "Agent",
+        titleKey: "documentsview.ScopeAgentDescription",
+        defaultTitle: "Private to the agent runtime.",
+        Icon: Bot,
+    },
+];
+export function getDocumentUploadFilename(file) {
+    return file.webkitRelativePath?.trim() || file.name;
+}
+export function shouldReadDocumentFileAsText(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") ||
+        file.name.endsWith(".mdx"));
+}
+export function isSupportedDocumentFile(file) {
+    const lowerName = file.name.toLowerCase();
+    for (const extension of SUPPORTED_UPLOAD_EXTENSIONS) {
+        if (lowerName.endsWith(extension))
+            return true;
+    }
+    return false;
+}
+/* -- Upload Zone ---------------------------------------------------------- */
+export function UploadZone({ fileInputId, onFilesUpload, onTextUpload, onUrlUpload, uploading, uploadStatus, }) {
+    const { t } = useApp();
+    const [dragOver, setDragOver] = useState(false);
+    const [urlInput, setUrlInput] = useState("");
+    const [textInput, setTextInput] = useState("");
+    const [titleInput, setTitleInput] = useState("");
+    const [showUrlInput, setShowUrlInput] = useState(false);
+    const [showTextInput, setShowTextInput] = useState(false);
+    const [includeImageDescriptions, setIncludeImageDescriptions] = useState(true);
+    const [selectedScope, setSelectedScope] = useState(DEFAULT_DOCUMENT_UPLOAD_SCOPE);
+    const fileInputRef = useRef(null);
+    const uploadOptions = useMemo(() => ({
+        includeImageDescriptions,
+        scope: selectedScope,
+    }), [includeImageDescriptions, selectedScope]);
+    const handleDrop = useCallback((event) => {
+        event.preventDefault();
+        setDragOver(false);
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length > 0 && !uploading) {
+            onFilesUpload(files, uploadOptions);
+        }
+    }, [onFilesUpload, uploadOptions, uploading]);
+    const handleFileSelect = useCallback((event) => {
+        const files = event.target.files;
+        if (files && files.length > 0 && !uploading) {
+            onFilesUpload(Array.from(files), uploadOptions);
+        }
+        event.target.value = "";
+    }, [onFilesUpload, uploadOptions, uploading]);
+    const handleUrlSubmit = useCallback(() => {
+        const url = urlInput.trim();
+        if (url && !uploading) {
+            onUrlUpload(url, uploadOptions);
+            setUrlInput("");
+            setShowUrlInput(false);
+        }
+    }, [onUrlUpload, uploadOptions, uploading, urlInput]);
+    const handleTextSubmit = useCallback(() => {
+        const text = textInput.trim();
+        if (text && !uploading) {
+            onTextUpload(text, titleInput.trim() || undefined, uploadOptions);
+            setTextInput("");
+            setTitleInput("");
+            setShowTextInput(false);
+        }
+    }, [onTextUpload, textInput, titleInput, uploadOptions, uploading]);
+    return (_jsxs("fieldset", { className: "w-full", onDragOver: (event) => {
+            event.preventDefault();
+            setDragOver(true);
+        }, onDragLeave: () => setDragOver(false), onDrop: handleDrop, "aria-label": t("aria.documentsUpload"), children: [_jsx("input", { id: fileInputId, ref: fileInputRef, type: "file", className: "hidden", multiple: true, accept: DOCUMENT_UPLOAD_ACCEPT, onChange: handleFileSelect }), _jsxs("div", { className: `rounded-xl border px-3 py-3 transition-colors ${dragOver
+                    ? "border-accent/45 bg-accent/8 shadow-sm"
+                    : "border-border/35 bg-card/62"} ${uploading ? "opacity-60" : ""}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-9 w-9 rounded-lg", onClick: () => fileInputRef.current?.click(), disabled: uploading, "aria-label": t("documentsview.ChooseFiles", {
+                                            defaultValue: "Choose files",
+                                        }), title: t("documentsview.ChooseFiles", {
+                                            defaultValue: "Choose files",
+                                        }), children: _jsx(FileUp, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", className: `h-9 w-9 rounded-lg ${showUrlInput ? "border-accent/45 bg-accent/12 text-txt" : ""}`, onClick: () => setShowUrlInput((current) => !current), disabled: uploading, "aria-label": t("documentsview.AddFromURL", {
+                                            defaultValue: "Add from URL",
+                                        }), title: t("documentsview.AddFromURL", {
+                                            defaultValue: "Add from URL",
+                                        }), children: _jsx(Link2, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", className: `h-9 w-9 rounded-lg ${showTextInput ? "border-accent/45 bg-accent/12 text-txt" : ""}`, onClick: () => setShowTextInput((current) => !current), disabled: uploading, "aria-label": t("documentsview.NewTextDocument", {
+                                            defaultValue: "New text document",
+                                        }), title: t("documentsview.NewTextDocument", {
+                                            defaultValue: "New text document",
+                                        }), children: _jsx(NotebookPen, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "min-w-0 flex-1 truncate text-xs-tight text-muted-strong", children: uploadStatus
+                                    ? t("documentsview.UploadingProgress", {
+                                        defaultValue: "Uploading {{current}}/{{total}}{{filename}}",
+                                        current: uploadStatus.current,
+                                        total: uploadStatus.total,
+                                        filename: uploadStatus.filename
+                                            ? `: ${uploadStatus.filename}`
+                                            : "",
+                                    })
+                                    : dragOver
+                                        ? t("documentsview.DropFilesOrFoldersToUpload", {
+                                            defaultValue: "Drop files or folders to upload",
+                                        })
+                                        : t("documentsview.DropFilesHereToUpload", {
+                                            defaultValue: "Drop files here to upload",
+                                        }) })] }), _jsxs("fieldset", { className: "mt-3 flex min-w-0 flex-wrap items-center gap-1.5 border-0 p-0", children: [_jsx("legend", { className: "sr-only", children: t("documentsview.ScopeSelectorLabel", {
+                                    defaultValue: "Document scope",
+                                }) }), DOCUMENT_UPLOAD_SCOPE_OPTIONS.map(({ value, labelKey, defaultLabel, titleKey, defaultTitle, Icon, }) => {
+                                const active = selectedScope === value;
+                                return (_jsxs("button", { type: "button", "aria-pressed": active, title: t(titleKey, { defaultValue: defaultTitle }), onClick: () => setSelectedScope(value), disabled: uploading, className: `inline-flex h-7 items-center gap-1.5 rounded-full border px-2 text-2xs font-semibold transition-colors ${active
+                                        ? "border-accent/45 bg-accent/12 text-accent-fg"
+                                        : "border-border/30 bg-bg-muted/20 text-muted hover:border-border/55 hover:text-txt"}`, children: [_jsx(Icon, { className: "h-3 w-3", "aria-hidden": true }), t(labelKey, { defaultValue: defaultLabel })] }, value));
+                            })] }), showUrlInput && (_jsx("div", { className: "mt-3 animate-in fade-in slide-in-from-top-2 duration-300", children: _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [_jsx(Input, { type: "url", placeholder: t("documentsview.httpsExampleCom"), value: urlInput, onChange: (event) => setUrlInput(event.target.value), onKeyDown: (event) => event.key === "Enter" && handleUrlSubmit(), disabled: uploading, className: "h-10 flex-1 border-border/55 bg-bg/72 text-xs shadow-none" }), _jsx(Button, { variant: "default", size: "sm", className: "h-10 px-4 text-xs-tight font-semibold", onClick: handleUrlSubmit, disabled: !urlInput.trim() || uploading, children: t("settings.import") })] }) })), showTextInput && (_jsx("div", { className: "mt-3 animate-in fade-in slide-in-from-top-2 duration-300", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { type: "text", placeholder: t("documentsview.TitleOptional", {
+                                        defaultValue: "Title (optional)",
+                                    }), value: titleInput, onChange: (event) => setTitleInput(event.target.value), disabled: uploading, className: "h-10 border-border/55 bg-bg/72 text-xs shadow-none" }), _jsx(Textarea, { placeholder: t("documentsview.PasteText", {
+                                        defaultValue: "Paste knowledge text...",
+                                    }), value: textInput, onChange: (event) => setTextInput(event.target.value), disabled: uploading, className: "min-h-28 resize-y border-border/55 bg-bg/72 text-xs shadow-none" }), _jsx(Button, { variant: "default", size: "sm", className: "h-10 self-end px-4 text-xs-tight font-semibold", onClick: handleTextSubmit, disabled: !textInput.trim() || uploading, children: t("common.save", { defaultValue: "Save" }) })] }) })), _jsxs("div", { className: "mt-3 inline-flex min-h-8 w-full items-center gap-2 text-2xs leading-relaxed text-muted", children: [_jsx(Checkbox, { id: "documents-upload-image-descriptions", checked: includeImageDescriptions, onCheckedChange: (checked) => setIncludeImageDescriptions(!!checked), disabled: uploading }), _jsx("label", { htmlFor: "documents-upload-image-descriptions", className: "inline-flex min-w-0 cursor-pointer items-center rounded-full border border-border/30 bg-bg-muted/20 px-2 py-0.5", children: t("documentsview.IncludeAIImageDes") })] })] })] }));
+}