@iloveagents/foundry-web-ui 0.3.1 → 0.4.0

package/src/components/chat-bubble.tsx

@@ -1,373 +0,0 @@
-import { useRef, useState } from "react";
-import {
-  ThreadPrimitive,
-  ComposerPrimitive,
-  MessagePrimitive,
-  ActionBarPrimitive,
-  useAuiState,
-  useThreadViewport,
-} from "@assistant-ui/react";
-import {
-  MessageSquare,
-  X,
-  Maximize2,
-  SquarePen,
-  ArrowUp,
-  Square,
-  ChevronDown,
-  Copy,
-  Check,
-  Paperclip,
-} from "lucide-react";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { Button } from "@iloveagents/foundry-web-primitives";
-import { TooltipIconButton } from "./tooltip-icon-button.tsx";
-import { ContextPins } from "./context-bar.tsx";
-import { ComposerContextBadges, SentContextBadges } from "./context-badges.tsx";
-import { ComposerSubmitBridge } from "./composer-submit-bridge.tsx";
-import { MarkdownText } from "./markdown-text.tsx";
-import { LoadingIndicator } from "./loading-indicator.tsx";
-import { useAppStore } from "../lib/app-store.ts";
-import { useChatBubbleStore } from "../lib/chat-bubble-store.ts";
-import { useNewConversation } from "../lib/use-new-conversation.ts";
-import { RAIL_WIDTH, useSidebarStore } from "../lib/sidebar-store.ts";
-
-const CHAT_BUBBLE_INSET = 8;
-
-function BubbleAssistantMessage() {
-  return (
-    <MessagePrimitive.Root className="w-full mb-2 group">
-      <div className="text-foreground text-sm leading-relaxed flex flex-col gap-2">
-        <MessagePrimitive.Parts
-          components={{
-            Text: MarkdownText,
-          }}
-        />
-      </div>
-      <div className="flex h-7 w-8 items-center mt-1">
-        <ActionBarPrimitive.Root
-          hideWhenRunning
-          className={cn(
-            "pointer-events-none flex items-center gap-1 opacity-0 transition-opacity",
-            "group-hover:pointer-events-auto group-hover:opacity-100",
-            "group-focus-within:pointer-events-auto group-focus-within:opacity-100",
-          )}
-        >
-          <ActionBarPrimitive.Copy asChild>
-            <TooltipIconButton tooltip="Copy" size="icon" className="size-7">
-              <MessagePrimitive.If copied={false}>
-                <Copy className="size-3" />
-              </MessagePrimitive.If>
-              <MessagePrimitive.If copied>
-                <Check className="size-3 text-primary" />
-              </MessagePrimitive.If>
-            </TooltipIconButton>
-          </ActionBarPrimitive.Copy>
-        </ActionBarPrimitive.Root>
-      </div>
-    </MessagePrimitive.Root>
-  );
-}
-
-function BubbleUserMessage() {
-  const messageId = useAuiState((s) => s.message.id);
-
-  return (
-    <MessagePrimitive.Root className="w-full mb-2">
-      <div className="flex flex-col items-end gap-1">
-        <SentContextBadges messageId={messageId} />
-        <div className="max-w-[85%] bg-muted rounded-2xl px-3 py-2 text-sm text-foreground">
-          <MessagePrimitive.Content />
-        </div>
-      </div>
-    </MessagePrimitive.Root>
-  );
-}
-
-function BubbleScrollToBottomButton() {
-  const isAtBottom = useThreadViewport((s) => s.isAtBottom);
-  const scrollToBottom = useThreadViewport((s) => s.scrollToBottom);
-
-  if (isAtBottom) return null;
-
-  return (
-    <Button
-      variant="outline"
-      size="icon"
-      className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md size-7"
-      onClick={() => scrollToBottom({ behavior: "smooth" })}
-    >
-      <ChevronDown className="size-3" />
-    </Button>
-  );
-}
-
-export function ChatBubble() {
-  const isOpen = useChatBubbleStore((s) => s.isOpen);
-  const isExpanded = useChatBubbleStore((s) => s.isExpanded);
-  const openBubble = useChatBubbleStore((s) => s.open);
-  const closeBubble = useChatBubbleStore((s) => s.close);
-  const expandChat = useChatBubbleStore((s) => s.expand);
-  const startNewThread = useNewConversation({ navigateToChat: false, preserveNavigation: true });
-  const isSidebarOpen = useSidebarStore((s) => s.isOpen);
-  const sidebarWidth = useSidebarStore((s) => s.width);
-  const pageLabel = useAppStore((s) => s.navContext.label);
-  const currentPage = useAppStore((s) => s.currentPage);
-  const threadActive = useAppStore((s) => s.threadActive);
-
-  // Draggable position: null = use default CSS anchored with equal left/bottom inset.
-  const [dragPos, setDragPos] = useState<{ x: number; y: number } | null>(null);
-  const dragStart = useRef<{ mx: number; my: number; px: number; py: number } | null>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  // Close and reset drag position so it reopens at the default spot
-  const handleClose = () => {
-    setDragPos(null);
-    closeBubble();
-  };
-
-  const onHeaderPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    // Don't start drag when clicking header buttons
-    if ((e.target as HTMLElement).closest("button")) return;
-    const panel = panelRef.current;
-    if (!panel) return;
-    e.preventDefault();
-    const rect = panel.getBoundingClientRect();
-    dragStart.current = { mx: e.clientX, my: e.clientY, px: rect.left, py: rect.top };
-    // Capture the initial position so first pointer-move works correctly
-    setDragPos({ x: rect.left, y: rect.top });
-    e.currentTarget.setPointerCapture(e.pointerId);
-  };
-
-  const onHeaderPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (!dragStart.current) return;
-    const panel = panelRef.current;
-    const panelW = panel?.offsetWidth ?? 380;
-    const panelH = panel?.offsetHeight ?? 600;
-    const dx = e.clientX - dragStart.current.mx;
-    const dy = e.clientY - dragStart.current.my;
-    // Clamp within viewport so the panel can't be dragged fully off-screen
-    const x = Math.max(0, Math.min(window.innerWidth - panelW, dragStart.current.px + dx));
-    const y = Math.max(0, Math.min(window.innerHeight - panelH, dragStart.current.py + dy));
-    setDragPos({ x, y });
-  };
-
-  const onHeaderPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (!dragStart.current) return;
-    dragStart.current = null;
-    e.currentTarget.releasePointerCapture(e.pointerId);
-  };
-
-  const onHeaderLostPointerCapture = () => {
-    dragStart.current = null;
-  };
-
-  // Hide bubble on chat page (already full-screen) and in expanded mode
-  if (currentPage === "/" || isExpanded) return null;
-
-  return (
-    <>
-      {!isOpen && (
-        <div
-          aria-hidden="true"
-          className={cn(
-            "pointer-events-none fixed bottom-0 left-0 z-40 hidden md:block",
-            "border-r border-sidebar-border",
-            "bg-gradient-to-b from-sidebar/0 via-sidebar/88 to-sidebar/96",
-            "supports-[backdrop-filter]:backdrop-blur",
-          )}
-          style={{
-            width: isSidebarOpen ? sidebarWidth : RAIL_WIDTH,
-            height: 64,
-          }}
-        />
-      )}
-
-      {/* Trigger button — bottom-left corner */}
-      {!isOpen && (
-        <button
-          type="button"
-          onClick={openBubble}
-          className={cn(
-            "fixed bottom-4 z-50",
-            "size-10 rounded-full",
-            "bg-primary text-primary-foreground shadow-lg",
-            "flex items-center justify-center",
-            "hover:bg-primary/90 transition-all duration-200",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          )}
-          style={{ left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }}
-          aria-label="Open chat"
-        >
-          <MessageSquare className="size-4" />
-        </button>
-      )}
-
-      {/* Chat panel — draggable, anchored bottom-left by default */}
-      {isOpen && (
-        <div
-          ref={panelRef}
-          className={cn(
-            "fixed z-50",
-            "rounded-2xl border border-border",
-            "bg-background shadow-2xl",
-            "flex flex-col overflow-hidden",
-            "w-95 h-150",
-          )}
-          style={
-            dragPos
-              ? { left: dragPos.x, top: dragPos.y }
-              : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }
-          }
-        >
-          {/* Header — drag handle */}
-          <div
-            className={cn(
-              "flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0",
-              "cursor-grab active:cursor-grabbing select-none",
-            )}
-            style={{ touchAction: "none" }}
-            onPointerDown={onHeaderPointerDown}
-            onPointerMove={onHeaderPointerMove}
-            onPointerUp={onHeaderPointerUp}
-            onLostPointerCapture={onHeaderLostPointerCapture}
-          >
-            <div className="flex flex-col min-w-0">
-              <div className="flex items-center gap-1.5 text-sm">
-                <MessageSquare className="size-3.5 text-primary shrink-0" />
-                <span className="font-semibold text-foreground truncate">{pageLabel}</span>
-              </div>
-              <span className="text-xs text-muted-foreground">
-                {threadActive ? "Active thread" : "New conversation"}
-              </span>
-            </div>
-            <div className="flex items-center gap-0.5">
-              <TooltipIconButton
-                tooltip="New Thread"
-                size="icon"
-                className="size-7"
-                onClick={startNewThread}
-              >
-                <SquarePen className="size-3.5" />
-              </TooltipIconButton>
-              <TooltipIconButton
-                tooltip="Expand chat"
-                size="icon"
-                className="size-7"
-                onClick={expandChat}
-              >
-                <Maximize2 className="size-3.5" />
-              </TooltipIconButton>
-              <TooltipIconButton
-                tooltip="Close"
-                size="icon"
-                className="size-7"
-                onClick={handleClose}
-              >
-                <X className="size-4" />
-              </TooltipIconButton>
-            </div>
-          </div>
-
-          {/* Thread */}
-          <ThreadPrimitive.Root className="flex flex-col flex-1 overflow-hidden">
-            <div className="relative flex-1 overflow-hidden">
-              <ThreadPrimitive.Viewport className="absolute inset-0 overflow-y-auto">
-                <ThreadPrimitive.Empty>
-                  <div className="flex h-full items-center justify-center p-4">
-                    <p className="text-sm text-muted-foreground text-center">
-                      Ask the agent about this page
-                    </p>
-                  </div>
-                </ThreadPrimitive.Empty>
-
-                <ThreadPrimitive.If empty={false}>
-                  <div className="px-4 pt-4">
-                    <ThreadPrimitive.Messages
-                      components={{
-                        UserMessage: BubbleUserMessage,
-                        AssistantMessage: BubbleAssistantMessage,
-                      }}
-                    />
-                    <ThreadPrimitive.If running>
-                      <LoadingIndicator />
-                    </ThreadPrimitive.If>
-                  </div>
-                </ThreadPrimitive.If>
-              </ThreadPrimitive.Viewport>
-              <ThreadPrimitive.If empty={false}>
-                <BubbleScrollToBottomButton />
-              </ThreadPrimitive.If>
-            </div>
-
-            {/* Composer — same pattern as full chat: clip + pin + input + send */}
-            <div className="shrink-0 border-t border-border px-3 py-3">
-              <ComposerPrimitive.Root
-                className={cn(
-                  "flex flex-col gap-1",
-                  "rounded-2xl border border-input",
-                  "bg-background shadow-sm",
-                  "px-3 py-2",
-                  "focus-within:border-primary/50",
-                  "transition-all duration-200",
-                )}
-              >
-                <ComposerSubmitBridge />
-                <ComposerContextBadges />
-                <div className="flex items-center gap-2">
-                  <div className="flex items-center -space-x-1 shrink-0">
-                    <ComposerPrimitive.AddAttachment asChild>
-                      <TooltipIconButton
-                        tooltip="Attach file"
-                        size="icon"
-                        className="size-7 shrink-0"
-                      >
-                        <Paperclip className="size-3.5" />
-                      </TooltipIconButton>
-                    </ComposerPrimitive.AddAttachment>
-                    <ContextPins compact showPinButton />
-                  </div>
-                  <ComposerPrimitive.Input
-                    autoFocus
-                    placeholder="Message..."
-                    rows={1}
-                    className={cn(
-                      "flex-1 bg-transparent",
-                      "py-1 text-sm",
-                      "text-foreground outline-none",
-                      "placeholder:text-muted-foreground",
-                      "resize-none max-h-20",
-                    )}
-                  />
-                  <ThreadPrimitive.If running>
-                    <ComposerPrimitive.Cancel asChild>
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        className="rounded-full size-8 shrink-0"
-                        aria-label="Stop"
-                      >
-                        <Square className="size-3" />
-                      </Button>
-                    </ComposerPrimitive.Cancel>
-                  </ThreadPrimitive.If>
-                  <ThreadPrimitive.If running={false}>
-                    <ComposerPrimitive.Send asChild>
-                      <Button
-                        size="icon"
-                        className="rounded-full size-8 shrink-0"
-                        aria-label="Send"
-                      >
-                        <ArrowUp className="size-4" />
-                      </Button>
-                    </ComposerPrimitive.Send>
-                  </ThreadPrimitive.If>
-                </div>
-              </ComposerPrimitive.Root>
-            </div>
-          </ThreadPrimitive.Root>
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/chat-header.tsx

@@ -1,44 +0,0 @@
-import { type FC } from "react";
-import { Link } from "react-router";
-import { SquarePen, Menu } from "lucide-react";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { AppBrand } from "./app-brand.tsx";
-import { TooltipIconButton } from "./tooltip-icon-button.tsx";
-import { ThemeToggle } from "./theme-toggle.tsx";
-import { UserMenu } from "./user-menu.tsx";
-import { useSidebarStore } from "../lib/sidebar-store.ts";
-import { useNewConversation } from "../lib/use-new-conversation.ts";
-
-export const ChatHeader: FC = () => {
-  const handleNewConversation = useNewConversation();
-  const toggleMobile = useSidebarStore((s) => s.toggleMobile);
-  const isSidebarOpen = useSidebarStore((s) => s.isOpen);
-
-  return (
-    <div className={cn("shrink-0", "bg-background border-b border-border")}>
-      <div className="px-4 py-3 flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <TooltipIconButton tooltip="Open sidebar" onClick={toggleMobile} className="md:hidden">
-            <Menu className="size-5" />
-          </TooltipIconButton>
-          <Link
-            to="/"
-            className={cn(
-              "flex items-center gap-2.5 hover:opacity-80 transition-opacity",
-              isSidebarOpen && "md:hidden",
-            )}
-          >
-            <AppBrand labelClassName="text-sm font-semibold text-foreground" />
-          </Link>
-        </div>
-        <div className="flex items-center gap-1">
-          <ThemeToggle />
-          <TooltipIconButton tooltip="New Thread" size="icon" onClick={handleNewConversation}>
-            <SquarePen className="size-4 text-primary" />
-          </TooltipIconButton>
-          <UserMenu />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/client-tool-executor.tsx

@@ -1,230 +0,0 @@
-/**
- * Client Tool Executor — registers custom UIs for client-side tools.
- *
- * Tool execution happens in the AGUIRunner (client-side tools intercepted at
- * `tool-call-end`). This component only registers the UI rendering and
- * injects the navigate function (which requires React Router context).
- *
- * Modern assistant-ui v0.12 pattern: each tool UI is a top-level
- * `makeAssistantToolUI(...)` component. We mount them as children of
- * `<ClientToolExecutor>` inside the AssistantRuntimeProvider tree.
- */
-
-import { makeAssistantToolUI } from "@assistant-ui/react";
-import { useNavigate } from "react-router";
-import { useEffect } from "react";
-import { setNavigateFunction } from "../lib/client-tools.ts";
-import { useToolPanelStore } from "../lib/tool-panel-store.ts";
-import { ConfirmationCard } from "./confirmation-card.tsx";
-import { ToolCallCard } from "./tool-call-card.tsx";
-import {
-  Navigation,
-  Palette,
-  PanelRight,
-  MousePointerClick,
-  PenLine,
-  Highlighter,
-  ShieldCheck,
-  Info,
-} from "lucide-react";
-
-const NavigateUI = makeAssistantToolUI<{ path: string }, { status: string }>({
-  toolName: "ui_navigate",
-  render: ({ args, result, status }) => {
-    const navigate = useNavigate();
-    return (
-      <ToolCallCard
-        icon={<Navigation className="size-3.5" />}
-        title="Navigate"
-        description={
-          status.type === "running"
-            ? "Navigating..."
-            : result?.status === "success"
-              ? `Navigated to ${args?.path}`
-              : "Navigation failed"
-        }
-        status={status}
-        action={
-          status.type === "complete" && args?.path
-            ? { label: "Go to page", onClick: () => navigate(args.path) }
-            : undefined
-        }
-        className="w-full"
-      />
-    );
-  },
-});
-
-const SetThemeUI = makeAssistantToolUI<{ mode: string }, { status: string }>({
-  toolName: "ui_set_theme",
-  render: ({ args, result, status }) => (
-    <ToolCallCard
-      icon={<Palette className="size-3.5" />}
-      title="Set Theme"
-      description={
-        status.type === "running"
-          ? "Changing theme..."
-          : result?.status === "success"
-            ? `Theme set to ${args?.mode}`
-            : "Theme change failed"
-      }
-      status={status}
-      className="w-full"
-    />
-  ),
-});
-
-const OpenPanelUI = makeAssistantToolUI<
-  { title: string; path?: string; content?: string; type?: string },
-  { status: string }
->({
-  toolName: "ui_open_panel",
-  render: ({ args, result, status }) => {
-    const handleReopen = () => {
-      if (args?.path) {
-        useToolPanelStore.getState().openPanel({
-          title: args.title,
-          content: args.path,
-          type: "page",
-        });
-      } else if (args?.content) {
-        useToolPanelStore.getState().openPanel({
-          title: args.title,
-          content: args.content,
-          type: (args.type as "markdown" | "text" | "page" | "pdf") || "markdown",
-        });
-      }
-    };
-
-    return (
-      <ToolCallCard
-        icon={<PanelRight className="size-3.5" />}
-        title="Open Panel"
-        description={
-          status.type === "running"
-            ? "Opening panel..."
-            : result?.status === "success"
-              ? `Panel: ${args?.title}`
-              : "Panel failed"
-        }
-        status={status}
-        action={
-          status.type === "complete" && result?.status === "success"
-            ? { label: "View", onClick: handleReopen }
-            : undefined
-        }
-        className="w-full"
-      />
-    );
-  },
-});
-
-const SelectItemUI = makeAssistantToolUI<{ itemId?: string }, unknown>({
-  toolName: "ui_select_item",
-  render: ({ args, status }) => (
-    <ToolCallCard
-      icon={<MousePointerClick className="size-3.5" />}
-      title="Select Item"
-      description={
-        status.type === "running"
-          ? "Selecting..."
-          : args?.itemId
-            ? `Selected: ${args.itemId}`
-            : "Selection cleared"
-      }
-      status={status}
-      className="w-full"
-    />
-  ),
-});
-
-const UpdateContentUI = makeAssistantToolUI<{ fields?: Record<string, unknown> }, unknown>({
-  toolName: "ui_update_content",
-  render: ({ args, status }) => {
-    const fieldNames = args?.fields ? Object.keys(args.fields).join(", ") : "";
-    return (
-      <ToolCallCard
-        icon={<PenLine className="size-3.5" />}
-        title="Update Content"
-        description={status.type === "running" ? "Updating..." : `Updated: ${fieldNames}`}
-        status={status}
-        className="w-full"
-      />
-    );
-  },
-});
-
-const HighlightUI = makeAssistantToolUI<{ entityId?: string }, unknown>({
-  toolName: "ui_highlight",
-  render: ({ args, status }) => (
-    <ToolCallCard
-      icon={<Highlighter className="size-3.5" />}
-      title="Highlight"
-      description={
-        status.type === "running" ? "Highlighting..." : `Highlighted: ${args?.entityId}`
-      }
-      status={status}
-      className="w-full"
-    />
-  ),
-});
-
-const ConfirmUI = makeAssistantToolUI<
-  { action?: string; details?: string },
-  { status?: string }
->({
-  toolName: "ui_confirm",
-  render: ({ args, result, status }) => {
-    if (result?.status === "pending") {
-      return (
-        <ConfirmationCard
-          action={args?.action ?? "Unknown action"}
-          details={args?.details}
-          status={status}
-        />
-      );
-    }
-    return (
-      <ToolCallCard
-        icon={<ShieldCheck className="size-3.5" />}
-        title="Confirmation Required"
-        description={args?.action ?? "Confirmation requested"}
-        status={status}
-        className="w-full"
-      />
-    );
-  },
-});
-
-const GetContextUI = makeAssistantToolUI<unknown, unknown>({
-  toolName: "ui_get_context",
-  render: ({ status }) => (
-    <ToolCallCard
-      icon={<Info className="size-3.5" />}
-      title="Get Context"
-      description={status.type === "running" ? "Reading context..." : "Context loaded"}
-      status={status}
-      className="w-full"
-    />
-  ),
-});
-
-export function ClientToolExecutor() {
-  const navigate = useNavigate();
-  useEffect(() => {
-    setNavigateFunction(navigate);
-  }, [navigate]);
-
-  return (
-    <>
-      <NavigateUI />
-      <SetThemeUI />
-      <OpenPanelUI />
-      <SelectItemUI />
-      <UpdateContentUI />
-      <HighlightUI />
-      <ConfirmUI />
-      <GetContextUI />
-    </>
-  );
-}

package/src/components/collection-empty-state.tsx

@@ -1,37 +0,0 @@
-import type { ReactNode } from "react";
-import type { LucideIcon } from "lucide-react";
-import { SearchX } from "lucide-react";
-
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export function CollectionEmptyState({
-  icon: Icon = SearchX,
-  title,
-  description,
-  action,
-  className,
-}: {
-  icon?: LucideIcon | null;
-  title: string;
-  description?: string;
-  action?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex min-h-[18rem] flex-col items-center justify-center rounded-[1.75rem] bg-muted/18 px-6 py-10 text-center ring-1 ring-border/35",
-        className,
-      )}
-    >
-      {Icon ? (
-        <div className="mb-4 flex size-14 items-center justify-center rounded-2xl bg-background/85 text-primary shadow-[0_8px_24px_-18px_rgb(15_23_42/0.35)]">
-          <Icon className="size-6" />
-        </div>
-      ) : null}
-      <div className="text-base font-semibold text-foreground">{title}</div>
-      {description ? <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">{description}</p> : null}
-      {action ? <div className="mt-5">{action}</div> : null}
-    </div>
-  );
-}