@iloveagents/foundry-web-ui 0.3.1 → 0.4.0

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 {};