@iloveagents/foundry-web-ui 0.1.0

package/src/__tests__/tool-fallback.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * Unit tests for the error-shape sniffing helpers in
+ * ``tool-fallback.tsx``. The component itself renders a collapsible
+ * card which is awkward to assert from node-land without
+ * ``@testing-library/react`` (not a workspace dep); exercising the
+ * pure helpers covers the interesting logic. The helpers are
+ * exported with an underscore prefix specifically for this use.
+ */
+
+import { describe, expect, it } from "vitest";
+import {
+  _detectErrorResult,
+  _extractErrorMessage,
+} from "../components/tool-fallback.tsx";
+
+describe("_detectErrorResult", () => {
+  it("returns false for null / undefined", () => {
+    expect(_detectErrorResult(null)).toBe(false);
+    expect(_detectErrorResult(undefined)).toBe(false);
+  });
+
+  it("returns false for normal strings", () => {
+    expect(_detectErrorResult("Found 3 documents.")).toBe(false);
+    expect(_detectErrorResult("")).toBe(false);
+  });
+
+  it("detects the agent-framework `Error: ...` serialization", () => {
+    expect(_detectErrorResult("Error: search backend 500")).toBe(true);
+    expect(_detectErrorResult("  Error: with leading whitespace")).toBe(true);
+  });
+
+  it("does NOT false-positive on strings containing the word Error mid-text", () => {
+    // This is the failure the anchored regex exists to prevent.
+    expect(
+      _detectErrorResult("A passage about Error Handling in Python"),
+    ).toBe(false);
+    expect(_detectErrorResult("Error Boundaries in React")).toBe(false);
+  });
+
+  it("detects MCP canonical `{isError: true, content: [...]}`", () => {
+    expect(
+      _detectErrorResult({
+        isError: true,
+        content: [{ type: "text", text: "forbidden" }],
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false when isError is false/undefined", () => {
+    expect(_detectErrorResult({ isError: false, content: [] })).toBe(false);
+    expect(_detectErrorResult({ data: [] })).toBe(false);
+  });
+
+  it("detects structured `{error: 'msg'}`", () => {
+    expect(_detectErrorResult({ error: "boom" })).toBe(true);
+  });
+
+  it("does not treat an empty `error` string as an error", () => {
+    // Avoids false-positives where a tool echoes `error: ""` in a success
+    // envelope. Narrow by design.
+    expect(_detectErrorResult({ error: "" })).toBe(false);
+  });
+
+  it("detects `{error: {message: 'msg'}}`", () => {
+    expect(_detectErrorResult({ error: { message: "timed out" } })).toBe(true);
+  });
+});
+
+describe("_extractErrorMessage", () => {
+  it("strips the `Error: ` prefix from string errors", () => {
+    expect(_extractErrorMessage("Error: search backend 500")).toBe(
+      "search backend 500",
+    );
+  });
+
+  it("returns `Execution failed` when the string is just `Error:`", () => {
+    expect(_extractErrorMessage("Error:")).toBe("Execution failed");
+  });
+
+  it("returns null for normal strings (so caller falls back)", () => {
+    expect(_extractErrorMessage("All good")).toBeNull();
+  });
+
+  it("extracts `error: 'msg'` directly", () => {
+    expect(_extractErrorMessage({ error: "timed out" })).toBe("timed out");
+  });
+
+  it("extracts nested `error.message`", () => {
+    expect(
+      _extractErrorMessage({ error: { message: "invalid token" } }),
+    ).toBe("invalid token");
+  });
+
+  it("extracts the first text item from MCP content arrays", () => {
+    expect(
+      _extractErrorMessage({
+        isError: true,
+        content: [
+          { type: "text", text: "forbidden" },
+          { type: "text", text: "second" },
+        ],
+      }),
+    ).toBe("forbidden");
+  });
+
+  it("returns null when no recognisable payload is present", () => {
+    expect(_extractErrorMessage({ random: "shape" })).toBeNull();
+  });
+});

package/src/components/ag-ui-runtime-provider.tsx

@@ -0,0 +1,59 @@
+import { createContext, useContext, useState, useCallback, useMemo } from "react";
+import { AssistantRuntimeProvider, useLocalRuntime } from "@assistant-ui/react";
+import { TooltipProvider } from "../ui/tooltip.tsx";
+import { AGUIAdapterSDK } from "../lib/ag-ui-adapter.ts";
+import { FileAttachmentAdapter } from "../lib/attachment-adapter.ts";
+import { ShowDocumentToolUI } from "./show-document-tool-ui.tsx";
+import { ClientToolExecutor } from "./client-tool-executor.tsx";
+
+interface AGUIRuntimeProviderProps {
+  children: React.ReactNode;
+  /** Custom fetch for agent requests. Handles URL rewriting + auth in production. */
+  fetchFn?: typeof fetch;
+}
+
+interface AGUIContextValue {
+  adapter: AGUIAdapterSDK;
+  resetThread: () => void;
+}
+
+const AGUIAdapterContext = createContext<AGUIContextValue | null>(null);
+
+export function useAGUIAdapter() {
+  const context = useContext(AGUIAdapterContext);
+  if (!context) {
+    throw new Error("useAGUIAdapter must be used within AGUIRuntimeProvider");
+  }
+  return context;
+}
+
+export function AGUIRuntimeProvider({ children, fetchFn }: AGUIRuntimeProviderProps) {
+  const [resetKey, setResetKey] = useState(0);
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- resetKey triggers new adapter with fresh threadId
+  const adapter = useMemo(
+    () => new AGUIAdapterSDK("/api/agent", fetchFn ? { fetchFn } : undefined),
+    [resetKey, fetchFn],
+  );
+
+  const resetThread = useCallback(() => {
+    setResetKey((prev) => prev + 1);
+  }, []);
+
+  const attachmentAdapter = useMemo(() => new FileAttachmentAdapter(), []);
+
+  const runtime = useLocalRuntime(adapter, {
+    adapters: { attachments: attachmentAdapter },
+  });
+
+  return (
+    <AGUIAdapterContext.Provider value={{ adapter, resetThread }}>
+      <AssistantRuntimeProvider runtime={runtime}>
+        <TooltipProvider>
+          <ShowDocumentToolUI />
+          <ClientToolExecutor />
+          {children}
+        </TooltipProvider>
+      </AssistantRuntimeProvider>
+    </AGUIAdapterContext.Provider>
+  );
+}

package/src/components/app-brand.tsx

@@ -0,0 +1,38 @@
+import { Layers3 } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useThemeRuntime } from "./theme-runtime-provider.tsx";
+
+export function AppBrand({
+  showName = true,
+  className,
+  iconClassName,
+  labelClassName,
+}: {
+  showName?: boolean;
+  className?: string;
+  iconClassName?: string;
+  labelClassName?: string;
+}) {
+  const runtime = useThemeRuntime();
+  const brandName = runtime.branding.appName || "LastSpace.ai";
+  const logoUrl =
+    runtime.mode === "dark"
+      ? runtime.branding.darkLogoUrl || runtime.branding.logoUrl
+      : runtime.branding.logoUrl || runtime.branding.darkLogoUrl;
+  const shouldShowName = showName && !logoUrl;
+
+  return (
+    <span className={cn("flex items-center gap-2", className)}>
+      {logoUrl ? (
+        <img
+          src={logoUrl}
+          alt={brandName}
+          className={cn("h-5 w-auto max-w-[7rem] shrink-0 object-contain", iconClassName)}
+        />
+      ) : (
+        <Layers3 className={cn("size-5 shrink-0 text-primary", iconClassName)} />
+      )}
+      {shouldShowName && <span className={cn("truncate", labelClassName)}>{brandName}</span>}
+    </span>
+  );
+}

package/src/components/assistant-chat.tsx

@@ -0,0 +1,423 @@
+import { type FC, useState, useRef, useCallback } from "react";
+import {
+  ThreadPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ActionBarPrimitive,
+  BranchPickerPrimitive,
+  ErrorPrimitive,
+  useAuiState,
+  useComposerRuntime,
+} from "@assistant-ui/react";
+import {
+  ArrowUp,
+  Copy,
+  Check,
+  RefreshCw,
+  PencilIcon,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  Square,
+  Bot,
+  Paperclip,
+  Minimize2,
+  PanelRightClose,
+  PanelRightOpen,
+} 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 { userAttachmentComponents, composerAttachmentComponents } from "./chat-attachments.tsx";
+import { SentContextBadges, ComposerContextBadges } from "./context-badges.tsx";
+import { ContextPins } from "./context-bar.tsx";
+import { useChatBubbleStore } from "../lib/chat-bubble-store.ts";
+import { MarkdownText } from "./markdown-text.tsx";
+import { ToolFallback } from "./tool-fallback.tsx";
+import { LoadingIndicator, LoadingBar } from "./loading-indicator.tsx";
+
+const BranchPicker: FC = () => (
+  <BranchPickerPrimitive.Root
+    hideWhenSingleBranch
+    className="inline-flex items-center gap-1 text-xs"
+  >
+    <BranchPickerPrimitive.Previous asChild>
+      <TooltipIconButton tooltip="Previous" size="icon">
+        <ChevronLeft className="size-4" />
+      </TooltipIconButton>
+    </BranchPickerPrimitive.Previous>
+    <span className="text-muted-foreground">
+      <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+    </span>
+    <BranchPickerPrimitive.Next asChild>
+      <TooltipIconButton tooltip="Next" size="icon">
+        <ChevronRight className="size-4" />
+      </TooltipIconButton>
+    </BranchPickerPrimitive.Next>
+  </BranchPickerPrimitive.Root>
+);
+
+const UserMessage: FC = () => {
+  const messageId = useAuiState((s) => s.message.id);
+
+  return (
+    <MessagePrimitive.Root className="w-full mb-2 group">
+      <div className="flex flex-col items-end gap-1">
+        <MessagePrimitive.Attachments components={userAttachmentComponents} />
+        <SentContextBadges messageId={messageId} />
+        <div className={cn("max-w-[80%]", "bg-muted rounded-2xl", "px-4 py-3", "text-foreground")}>
+          <MessagePrimitive.Content />
+        </div>
+        <div className="flex items-center justify-end gap-2 pr-2">
+          <BranchPicker />
+          <div className="w-10 flex items-center justify-end">
+            <UserActionBar />
+          </div>
+        </div>
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+const UserActionBar: FC = () => (
+  <ActionBarPrimitive.Root
+    hideWhenRunning
+    className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity"
+  >
+    <ActionBarPrimitive.Edit asChild>
+      <TooltipIconButton tooltip="Edit" size="icon">
+        <PencilIcon className="size-4" />
+      </TooltipIconButton>
+    </ActionBarPrimitive.Edit>
+  </ActionBarPrimitive.Root>
+);
+
+const AssistantMessage: FC = () => (
+  <MessagePrimitive.Root className="w-full mb-2 group">
+    <div className="mx-auto max-w-3xl px-4">
+      <div className="text-foreground leading-relaxed flex flex-col gap-4">
+        <MessagePrimitive.Parts
+          components={{
+            Text: MarkdownText,
+            tools: { Fallback: ToolFallback },
+          }}
+        />
+      </div>
+      <MessageError />
+
+      <div className="flex items-center gap-2 mt-1">
+        <AssistantActionBar />
+        <BranchPicker />
+      </div>
+    </div>
+  </MessagePrimitive.Root>
+);
+
+const AssistantActionBar: FC = () => (
+  <ActionBarPrimitive.Root hideWhenRunning className="flex items-center gap-1 -ml-2">
+    <ActionBarPrimitive.Copy asChild>
+      <TooltipIconButton tooltip="Copy" size="icon">
+        <MessagePrimitive.If copied={false}>
+          <Copy className="size-4" />
+        </MessagePrimitive.If>
+        <MessagePrimitive.If copied>
+          <Check className="size-4 text-primary" />
+        </MessagePrimitive.If>
+      </TooltipIconButton>
+    </ActionBarPrimitive.Copy>
+    <ActionBarPrimitive.Reload asChild>
+      <TooltipIconButton tooltip="Refresh" size="icon">
+        <RefreshCw className="size-4" />
+      </TooltipIconButton>
+    </ActionBarPrimitive.Reload>
+  </ActionBarPrimitive.Root>
+);
+
+const MessageError: FC = () => (
+  <MessagePrimitive.Error>
+    <ErrorPrimitive.Root className="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium text-destructive">Error:</span>
+        <ErrorPrimitive.Message className="text-sm text-destructive" />
+      </div>
+    </ErrorPrimitive.Root>
+  </MessagePrimitive.Error>
+);
+
+const EditComposer: FC = () => (
+  <MessagePrimitive.Root className="w-full mb-2">
+    <div className="flex items-start justify-end">
+      <div className="w-full max-w-[80%]">
+        <ComposerPrimitive.Root
+          className={cn(
+            "flex flex-col gap-2",
+            "rounded-2xl border border-input",
+            "bg-background shadow-sm",
+            "px-4 py-3",
+          )}
+        >
+          <ComposerPrimitive.Input
+            autoFocus
+            className={cn(
+              "w-full bg-transparent",
+              "text-base text-foreground",
+              "outline-none resize-none",
+              "placeholder:text-muted-foreground",
+            )}
+          />
+          <div className="flex items-center justify-end gap-2">
+            <ComposerPrimitive.Cancel asChild>
+              <Button variant="ghost" size="sm">
+                Cancel
+              </Button>
+            </ComposerPrimitive.Cancel>
+            <ComposerPrimitive.Send asChild>
+              <Button size="sm">Update</Button>
+            </ComposerPrimitive.Send>
+          </div>
+        </ComposerPrimitive.Root>
+      </div>
+    </div>
+  </MessagePrimitive.Root>
+);
+
+const ComposerActionButton: FC = () => {
+  return (
+    <>
+      <ThreadPrimitive.If running>
+        <ComposerPrimitive.Cancel asChild>
+          <Button
+            variant="secondary"
+            size="icon"
+            className="rounded-full size-10 flex-shrink-0"
+            aria-label="Stop generating"
+          >
+            <Square className="size-4" />
+          </Button>
+        </ComposerPrimitive.Cancel>
+      </ThreadPrimitive.If>
+
+      <ThreadPrimitive.If running={false}>
+        <ComposerPrimitive.Send asChild>
+          <Button
+            size="icon"
+            className="rounded-full size-10 flex-shrink-0"
+            aria-label="Send message"
+          >
+            <ArrowUp className="size-5" />
+          </Button>
+        </ComposerPrimitive.Send>
+      </ThreadPrimitive.If>
+    </>
+  );
+};
+
+/** Starter prompts shown on empty state. Customize these for your agent's capabilities. */
+const STARTER_SUGGESTIONS = [
+  "Show me a short document about Python",
+  "Summarize what you can help me with here",
+  "Draft a concise release note from bullet points",
+];
+
+const ScrollToBottomButton: FC = () => (
+  <ThreadPrimitive.ScrollToBottom asChild>
+    <Button
+      variant="outline"
+      size="icon"
+      className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md"
+    >
+      <ChevronDown className="size-4" />
+    </Button>
+  </ThreadPrimitive.ScrollToBottom>
+);
+
+const DropZone: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounter = useRef(0);
+  const composerRuntime = useComposerRuntime();
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounter.current++;
+    if (dragCounter.current === 1) setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounter.current--;
+    if (dragCounter.current === 0) setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault();
+      dragCounter.current = 0;
+      setIsDragging(false);
+      const files = Array.from(e.dataTransfer.files);
+      for (const file of files) {
+        await composerRuntime.addAttachment(file);
+      }
+    },
+    [composerRuntime],
+  );
+
+  return (
+    <div
+      className="relative flex flex-col flex-1 overflow-hidden"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {children}
+      {isDragging && (
+        <div
+          className={cn(
+            "absolute inset-0 z-50 flex items-center justify-center pointer-events-none",
+            "bg-background/80 backdrop-blur-sm",
+            "border-2 border-dashed border-primary rounded-xl",
+          )}
+        >
+          <p className="text-lg text-primary font-medium">Drop files here</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Reusable chat content — used by ChatPage and ChatBubble.
+ * Renders inside a ThreadPrimitive.Root context.
+ */
+export function ChatContent() {
+  const isExpanded = useChatBubbleStore((s) => s.isExpanded);
+  const collapseChat = useChatBubbleStore((s) => s.collapse);
+  const showPagePanel = useChatBubbleStore((s) => s.showPagePanel);
+  const togglePagePanel = useChatBubbleStore((s) => s.togglePagePanel);
+
+  return (
+    <ThreadPrimitive.Root
+      className={cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden")}
+    >
+      {/* Collapse header — only in expanded layout mode */}
+      {isExpanded && (
+        <div className="shrink-0 flex items-center justify-between px-4 py-2 border-b border-border">
+          <span className="text-sm font-medium text-foreground flex items-center gap-2">
+            <Bot className="size-4 text-primary" />
+            Chat
+          </span>
+          <div className="flex items-center gap-1">
+            <TooltipIconButton
+              tooltip={showPagePanel ? "Hide page panel" : "Show page panel"}
+              size="icon"
+              onClick={togglePagePanel}
+              className="hidden xl:inline-flex"
+            >
+              {showPagePanel ? (
+                <PanelRightClose className="size-4" />
+              ) : (
+                <PanelRightOpen className="size-4" />
+              )}
+            </TooltipIconButton>
+            <TooltipIconButton tooltip="Minimize to bubble" size="icon" onClick={collapseChat}>
+              <Minimize2 className="size-4" />
+            </TooltipIconButton>
+          </div>
+        </div>
+      )}
+      <DropZone>
+        <div className="relative flex-1 overflow-hidden">
+          <ThreadPrimitive.Viewport className="absolute inset-0 overflow-y-auto bg-background">
+            <ThreadPrimitive.Empty>
+              <div
+                className={cn("flex min-h-full flex-col", "items-center justify-center", "px-4")}
+              >
+                <Bot className="size-16 mb-6 text-primary/70" />
+                <h1 className="text-[2rem] font-normal text-foreground text-center mb-6">
+                  How can I help you today?
+                </h1>
+                <div className="flex flex-wrap justify-center gap-2 max-w-lg">
+                  {STARTER_SUGGESTIONS.map((prompt) => (
+                    <ThreadPrimitive.Suggestion key={prompt} prompt={prompt} send asChild>
+                      <Button variant="outline" className="text-sm">
+                        {prompt}
+                      </Button>
+                    </ThreadPrimitive.Suggestion>
+                  ))}
+                </div>
+              </div>
+            </ThreadPrimitive.Empty>
+
+            <ThreadPrimitive.If empty={false}>
+              <div className="mx-auto max-w-3xl px-4 pt-8">
+                <ThreadPrimitive.Messages
+                  components={{
+                    UserMessage,
+                    EditComposer,
+                    AssistantMessage,
+                  }}
+                />
+                <ThreadPrimitive.If running>
+                  <LoadingIndicator />
+                </ThreadPrimitive.If>
+              </div>
+            </ThreadPrimitive.If>
+          </ThreadPrimitive.Viewport>
+          <ScrollToBottomButton />
+        </div>
+
+        <div className="shrink-0 bg-background">
+          <ThreadPrimitive.If running={false}>
+            <div className="border-t border-border" />
+          </ThreadPrimitive.If>
+          <ThreadPrimitive.If running>
+            <LoadingBar />
+          </ThreadPrimitive.If>
+
+          <div className="mx-auto max-w-3xl px-4 py-4">
+            <ComposerPrimitive.Root
+              className={cn(
+                "flex flex-col gap-2",
+                "rounded-3xl border border-input",
+                "bg-background shadow-sm",
+                "px-4 py-2",
+                "focus-within:border-primary/50 focus-within:shadow-md",
+                "transition-all duration-300",
+              )}
+            >
+              <ComposerContextBadges />
+              <ComposerPrimitive.Attachments components={composerAttachmentComponents} />
+              <div className="flex items-center gap-2">
+                <div className="flex items-center -space-x-1 shrink-0">
+                  <ComposerPrimitive.AddAttachment asChild>
+                    <TooltipIconButton tooltip="Attach file" variant="ghost" className="shrink-0">
+                      <Paperclip className="size-5" />
+                    </TooltipIconButton>
+                  </ComposerPrimitive.AddAttachment>
+                  <ContextPins showPinButton />
+                </div>
+                <ComposerPrimitive.Input
+                  autoFocus
+                  placeholder="Message Assistant..."
+                  rows={1}
+                  className={cn(
+                    "flex-1 bg-transparent",
+                    "py-2 text-base",
+                    "text-foreground outline-none",
+                    "placeholder:text-muted-foreground",
+                    "resize-none max-h-32",
+                  )}
+                />
+                <ComposerActionButton />
+              </div>
+            </ComposerPrimitive.Root>
+          </div>
+        </div>
+      </DropZone>
+    </ThreadPrimitive.Root>
+  );
+}

package/src/components/chat-attachments.tsx

@@ -0,0 +1,68 @@
+/**
+ * Attachment rendering components for chat messages and composer.
+ *
+ * Following the official assistant-ui pattern, attachment components
+ * live in a separate file from the main thread components.
+ *
+ * @see https://www.assistant-ui.com/ - assistant-ui Documentation
+ */
+
+import { type FC } from "react";
+import { AttachmentPrimitive } from "@assistant-ui/react";
+import { FileText, X } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+/** Renders a pending file attachment chip in the composer with a remove button. */
+export const ComposerAttachment: FC = () => (
+  <AttachmentPrimitive.Root
+    className={cn(
+      "inline-flex items-center gap-2 max-w-[250px]",
+      "rounded-lg border border-border bg-muted/50",
+      "px-3 py-2",
+    )}
+  >
+    <FileText className="size-4 text-muted-foreground flex-shrink-0" />
+    <span className="text-sm truncate">
+      <AttachmentPrimitive.Name />
+    </span>
+    <AttachmentPrimitive.Remove asChild>
+      <button
+        type="button"
+        className="p-0.5 rounded hover:bg-muted flex-shrink-0"
+        aria-label="Remove attachment"
+      >
+        <X className="size-3.5" />
+      </button>
+    </AttachmentPrimitive.Remove>
+  </AttachmentPrimitive.Root>
+);
+
+/** Renders a file badge on sent user messages. */
+export const UserMessageAttachment: FC = () => (
+  <AttachmentPrimitive.Root
+    className={cn(
+      "inline-flex items-center gap-2 max-w-[250px]",
+      "rounded-lg border border-border/50 bg-muted/30",
+      "px-3 py-1.5",
+    )}
+  >
+    <FileText className="size-3.5 text-muted-foreground flex-shrink-0" />
+    <span className="text-xs truncate">
+      <AttachmentPrimitive.Name />
+    </span>
+  </AttachmentPrimitive.Root>
+);
+
+/** Component map for MessagePrimitive.Attachments on user messages. */
+export const userAttachmentComponents = {
+  Document: UserMessageAttachment,
+  Image: UserMessageAttachment,
+  File: UserMessageAttachment,
+};
+
+/** Component map for ComposerPrimitive.Attachments in the composer. */
+export const composerAttachmentComponents = {
+  Document: ComposerAttachment,
+  Image: ComposerAttachment,
+  File: ComposerAttachment,
+};