@iloveagents/foundry-web-ui 0.3.1 → 0.5.0

package/dist/components/message-timestamp.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+/**
+ * Message send/receive time — revealed on hover in the same row as the
+ * message actions (edit / copy). The short time is shown; the full date
+ * lives in the native tooltip. Shared by the full-page thread and the
+ * compact chat bubble.
+ */
+export declare const MessageTimestamp: FC<{
+    className?: string;
+}>;

package/dist/components/message-timestamp.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuiState } from "@assistant-ui/react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+/**
+ * Message send/receive time — revealed on hover in the same row as the
+ * message actions (edit / copy). The short time is shown; the full date
+ * lives in the native tooltip. Shared by the full-page thread and the
+ * compact chat bubble.
+ */
+export const MessageTimestamp = ({ className }) => {
+    const createdAt = useAuiState((s) => s.message.createdAt);
+    if (!createdAt)
+        return null;
+    const d = createdAt instanceof Date ? createdAt : new Date(createdAt);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return (_jsx("span", { title: d.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }), className: cn("text-xs text-muted-foreground/70 tabular-nums select-none", "opacity-0 transition-opacity group-hover:opacity-100", className), children: d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }) }));
+};

package/dist/components/name-dialog.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export declare function NameDialog({ open, onOpenChange, title, description, placeholder, label, submitLabel, pendingLabel, initialValue, error, pending, extra, onSubmit, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    placeholder: string;
+    label?: ReactNode;
+    submitLabel?: string;
+    pendingLabel?: string;
+    initialValue?: string;
+    error?: ReactNode;
+    pending?: boolean;
+    extra?: ReactNode;
+    onSubmit: (value: string) => void | Promise<void>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/name-dialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { Input } from "@iloveagents/foundry-web-primitives";
+import { FormDialog } from "./form-dialog.js";
+import { Field } from "@iloveagents/foundry-web-primitives";
+export function NameDialog({ open, onOpenChange, title, description, placeholder, label = "Name", submitLabel = "Create", pendingLabel, initialValue = "", error, pending = false, extra, onSubmit, }) {
+    const inputId = useId();
+    const [value, setValue] = useState(initialValue);
+    useEffect(() => {
+        if (open)
+            setValue(initialValue);
+    }, [open, initialValue]);
+    return (_jsx(FormDialog, { open: open, onOpenChange: onOpenChange, title: title, description: description, size: "sm", footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), disabled: pending, children: "Cancel" }), _jsx(Button, { type: "submit", form: `${inputId}-form`, disabled: !value.trim() || pending, children: pending ? (pendingLabel ?? `${submitLabel}...`) : submitLabel })] }), children: _jsxs("form", { id: `${inputId}-form`, className: "space-y-4", onSubmit: (event) => {
+                event.preventDefault();
+                if (pending)
+                    return;
+                const trimmed = value.trim();
+                if (!trimmed)
+                    return;
+                void onSubmit(trimmed);
+            }, children: [_jsx(Field, { label: label, htmlFor: inputId, error: error, children: _jsx(Input, { id: inputId, value: value, onChange: (event) => setValue(event.target.value), placeholder: placeholder, disabled: pending, autoFocus: true }) }), extra] }) }));
+}

package/dist/components/selection-popover.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Floating "Add to chat" button for text selection in the tool panel.
+ *
+ * Appears near the selected text when the user makes a selection within
+ * the panel content area. Clicking adds the selection to the context store.
+ */
+import { type RefObject } from "react";
+interface SelectionPopoverProps {
+    containerRef: RefObject<HTMLDivElement | null>;
+}
+export declare function SelectionPopover({ containerRef }: SelectionPopoverProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/selection-popover.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Floating "Add to chat" button for text selection in the tool panel.
+ *
+ * Appears near the selected text when the user makes a selection within
+ * the panel content area. Clicking adds the selection to the context store.
+ */
+import { useState, useEffect, useCallback, useRef } from "react";
+import { TextSelect } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useAppStore } from "../lib/app-store.js";
+import { useToolPanelStore } from "../lib/tool-panel-store.js";
+const POPOVER_HEIGHT = 36;
+const POPOVER_WIDTH = 126;
+const OFFSET = 8;
+export function SelectionPopover({ containerRef }) {
+    const [position, setPosition] = useState(null);
+    const [selectedText, setSelectedText] = useState("");
+    const addContextItem = useAppStore((s) => s.addContextItem);
+    const buttonRef = useRef(null);
+    const hidePopover = useCallback(() => {
+        setPosition(null);
+        setSelectedText("");
+    }, []);
+    const handleMouseUp = useCallback(() => {
+        // Small delay to let the selection finalize
+        requestAnimationFrame(() => {
+            const selection = window.getSelection();
+            if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+                return;
+            }
+            // Ensure selection is within the container
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const anchorNode = selection.anchorNode;
+            if (!anchorNode || !container.contains(anchorNode)) {
+                return;
+            }
+            const text = selection.toString().trim();
+            if (!text)
+                return;
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            // The tool panel uses CSS transforms (translate-x), which creates
+            // a new containing block -- `position: fixed` becomes relative to
+            // the nearest transformed ancestor, not the viewport. Convert
+            // viewport coords to container-relative coords.
+            const containerRect = container.getBoundingClientRect();
+            // Position above selection
+            let top = rect.top - containerRect.top + container.scrollTop - POPOVER_HEIGHT - OFFSET;
+            let left = rect.left - containerRect.left + rect.width / 2 - POPOVER_WIDTH / 2;
+            // If would go above visible area, place below instead
+            if (rect.top - containerRect.top - POPOVER_HEIGHT - OFFSET < 0) {
+                top = rect.bottom - containerRect.top + container.scrollTop + OFFSET;
+            }
+            // Clamp horizontal within container
+            const maxLeft = containerRect.width - POPOVER_WIDTH - OFFSET;
+            left = Math.max(OFFSET, Math.min(left, maxLeft));
+            setSelectedText(text);
+            setPosition({ top, left });
+        });
+    }, [containerRef]);
+    const handleAddToContext = useCallback(() => {
+        if (!selectedText)
+            return;
+        const source = useToolPanelStore.getState().content?.title ?? "Document";
+        addContextItem({
+            type: "selection",
+            label: selectedText,
+            payload: { kind: "text", text: selectedText },
+            sourcePage: source,
+            persistence: "ephemeral",
+        });
+        // Clear selection and hide popover
+        window.getSelection()?.removeAllRanges();
+        hidePopover();
+    }, [selectedText, addContextItem, hidePopover]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.addEventListener("mouseup", handleMouseUp);
+        // Hide on mousedown (new selection starting), scroll, or Escape.
+        // Skip if the mousedown is on the popover button itself -- React's
+        // synthetic onMouseDown fires after native listeners, so we can't
+        // rely on stopPropagation there.
+        const handleMouseDown = (e) => {
+            if (buttonRef.current?.contains(e.target))
+                return;
+            hidePopover();
+        };
+        const handleScroll = () => hidePopover();
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape")
+                hidePopover();
+        };
+        container.addEventListener("mousedown", handleMouseDown);
+        container.addEventListener("scroll", handleScroll, true);
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            container.removeEventListener("mouseup", handleMouseUp);
+            container.removeEventListener("mousedown", handleMouseDown);
+            container.removeEventListener("scroll", handleScroll, true);
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [containerRef, handleMouseUp, hidePopover]);
+    if (!position)
+        return null;
+    return (_jsxs("button", { ref: buttonRef, type: "button", className: cn("absolute z-50", "flex items-center gap-1.5", "rounded-lg border border-border bg-background shadow-lg", "px-3 py-1.5 text-xs font-medium text-foreground", "hover:bg-muted transition-colors", "animate-in fade-in-0 zoom-in-95 duration-150"), style: { top: position.top, left: position.left }, onMouseDown: (e) => e.preventDefault(), onClick: handleAddToContext, children: [_jsx(TextSelect, { className: "size-3.5 text-primary" }), "Add to chat"] }));
+}

package/dist/components/show-document-tool-ui.d.ts

@@ -0,0 +1 @@
+export declare const ShowDocumentToolUI: import("@assistant-ui/react").AssistantToolUI;

package/dist/components/show-document-tool-ui.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { useRef } from "react";
+import { FileText } from "lucide-react";
+import { useToolPanelStore } from "../lib/tool-panel-store.js";
+import { ToolCallCard } from "./tool-call-card.js";
+export const ShowDocumentToolUI = makeAssistantToolUI({
+    toolName: "show_document",
+    render: ({ args, result, status, toolCallId }) => {
+        const openPanel = useToolPanelStore((state) => state.openPanel);
+        const openedToolCallsRef = useRef(new Set());
+        if (status.type === "complete" &&
+            result?.status === "success" &&
+            args &&
+            !openedToolCallsRef.current.has(toolCallId)) {
+            openedToolCallsRef.current.add(toolCallId);
+            queueMicrotask(() => {
+                openPanel({
+                    title: args.title,
+                    content: args.content,
+                    type: args.type || "markdown",
+                });
+            });
+        }
+        let description = "";
+        if (status.type === "running") {
+            description = "Opening document...";
+        }
+        else if (status.type === "complete" && result) {
+            description =
+                result.message ||
+                    (result.status === "success" ? "Document ready" : "Failed to open document");
+        }
+        else if (status.type === "requires-action") {
+            description = "Action required to display document";
+        }
+        const handleViewDocument = () => {
+            if (args) {
+                openPanel({
+                    title: args.title,
+                    content: args.content,
+                    type: args.type || "markdown",
+                });
+            }
+        };
+        return (_jsx(ToolCallCard, { icon: _jsx(FileText, { className: "size-3.5" }), title: "Document Display", description: description, status: status, className: "w-full", action: status.type === "complete" && result?.status === "success" && args
+                ? {
+                    label: "View Document",
+                    onClick: handleViewDocument,
+                }
+                : undefined, children: args && (_jsxs("div", { className: "text-muted-foreground text-xs", children: [_jsx("span", { className: "font-medium", children: "Title:" }), " ", args.title, args.type && (_jsxs("span", { className: "ml-2", children: [_jsx("span", { className: "font-medium", children: "Type:" }), " ", args.type] }))] })) }));
+    },
+});

package/dist/components/sidebar.d.ts

@@ -0,0 +1,4 @@
+declare function scrollNavRowIntoView(nav: HTMLElement, row: HTMLElement): void;
+export declare const _scrollNavRowIntoViewForTest: typeof scrollNavRowIntoView;
+export declare function Sidebar(): import("react/jsx-runtime").JSX.Element;
+export {};