@schlessera/brain-ui-react 0.34.1 → 0.36.0

package/src/components/chat/composer.tsx

@@ -1,18 +1,7 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useState, useRef, useEffect } from "react";
-import {
-  ArrowUp,
-  Square,
-  CornerLeftUp,
-  Paperclip,
-  Camera,
-  X,
-  Check,
-  ChevronDown,
-  Lock,
-} from "lucide-react";
 import type { ClientMessage } from "@schlessera/brain-ui-sdk/protocol";
 import { useChatStore, activeChat } from "../../stores/chat-store.js";
-import { uiConfig } from "../../config.js";
 import { useConnectionStore } from "../../stores/connection-store.js";
 import { deriveConnectionIssue } from "../connectivity/connection-state.js";
 import { useProviderStore } from "../../stores/provider-store.js";
@@ -23,14 +12,14 @@ import {
 } from "../../lib/image-attachments.js";
 import { ShareIntake } from "./share-card.js";
 import { CommandPalette } from "./command-palette.js";
-import { MicButton } from "../voice/mic-button.js";
+import { ComposerView } from "./composer-view.js";
 import { DictationSheet } from "../voice/dictation-sheet.js";
 import { ReviewCard } from "../voice/review-card.js";
 import { useDictation } from "../../voice/use-dictation.js";
 import { useVoiceStore } from "../../voice/voice-store.js";
 import { detectClientEnvironment } from "../../lib/client-environment.js";
 import { useChatCommands } from "./use-chat-commands.js";
-import { cn } from "../../lib/utils.js";
+import { takeComposerTextAsAnswer } from "./ask-user-typed.js";
 
 /**
  * The composer — everything below the transcript: draft text, attachments,
@@ -44,11 +33,19 @@ import { cn } from "../../lib/utils.js";
  *
  * The corollary is a rule for future edits: transcript-scale state does not
  * belong in this file, and draft state does not belong above it.
+ *
+ * This is the container (S7): every store read, the draft, the attachments
+ * and their object URLs, the provider choice and the voice review live here;
+ * `ComposerView` draws the field.
  */
 export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
+  const root = useBrainUiRoot();
   const [input, setInput] = useState("");
   const [lastPrompt, setLastPrompt] = useState("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const frameRef = useRef<HTMLDivElement>(null);
+  const [attachMenuOpen, setAttachMenuOpen] = useState(false);
+  /** The kit owns the textarea; the frame finds it when a recall or a voice edit needs focus. */
+  const focusField = () => frameRef.current?.querySelector("textarea")?.focus();
 
   // Image attachments. `attachmentsRef` mirrors state so async add/merge logic
   // reads the current set synchronously (avoids stale closures / updater races).
@@ -111,16 +108,18 @@ export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
     void loadProviders();
   }, [loadProviders]);
 
-  // Dismiss the provider popover on outside-click / Escape.
+  // Dismiss the provider popover and the attach menu on outside-click / Escape.
   useEffect(() => {
-    if (!providerMenuOpen) return;
+    if (!providerMenuOpen && !attachMenuOpen) return;
     const onDocClick = (e: MouseEvent) => {
-      if (!providerMenuRef.current?.contains(e.target as Node)) {
-        setProviderMenuOpen(false);
-      }
+      if (!providerMenuRef.current?.contains(e.target as Node)) setProviderMenuOpen(false);
+      if (!(e.target as HTMLElement).closest?.('[role="menu"][aria-label="Attach"], [role="dialog"][aria-label="Attach"]')) setAttachMenuOpen(false);
     };
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setProviderMenuOpen(false);
+      if (e.key === "Escape") {
+        setProviderMenuOpen(false);
+        setAttachMenuOpen(false);
+      }
     };
     document.addEventListener("mousedown", onDocClick);
     document.addEventListener("keydown", onKey);
@@ -128,7 +127,7 @@ export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
       document.removeEventListener("mousedown", onDocClick);
       document.removeEventListener("keydown", onKey);
     };
-  }, [providerMenuOpen]);
+  }, [providerMenuOpen, attachMenuOpen]);
 
   /**
    * The draft is whatever is visible above the send button: composer text
@@ -197,12 +196,26 @@ export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
     const hasAttachments = attachments.length > 0;
     if ((!text && !hasAttachments) || wsStatus !== "connected") return;
 
+    // A send while a question is pending is the ANSWER to it, not a new
+    // message (D38 §1): the text binds to the question, the card quotes it,
+    // and nothing goes out as `chat_message`. Attachments are not an answer
+    // to a question, so a send that carries one stays a message.
+    if (
+      text &&
+      !hasAttachments &&
+      takeComposerTextAsAnswer(root.stores.chat.getState(), sessionId, text, send)
+    ) {
+      setInput("");
+      clearReview();
+      return;
+    }
+
     if (text) setLastPrompt(text);
     const messageAttachments = attachments.map((a) => ({
       previewUrl: a.previewUrl,
       mediaType: a.attachment.mediaType,
     }));
-    const chat = useChatStore.getState();
+    const chat = root.stores.chat.getState();
     chat.addUserMessage(
       sessionId,
       text,
@@ -251,7 +264,7 @@ export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
       void dictation.stop(true);
     } else {
       // Defensive: blur composer so the keyboard never fights the mic sheet on Android
-      textareaRef.current?.blur();
+      frameRef.current?.querySelector("textarea")?.blur();
       // Any existing review text stays put — the new capture appends to it.
       void dictation.start();
     }
@@ -269,7 +282,7 @@ export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
   function handleVoiceEdit() {
     setInput((prev) => (prev ? `${prev}\n${reviewText}` : reviewText));
     clearReview();
-    setTimeout(() => textareaRef.current?.focus(), 50);
+    setTimeout(focusField, 50);
   }
 
   function handleVoiceAppend() {
@@ -280,7 +293,7 @@ export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
   function handleRecall() {
     if (lastPrompt && !input.trim()) {
       setInput(lastPrompt);
-      setTimeout(() => textareaRef.current?.focus(), 50);
+      setTimeout(focusField, 50);
     }
   }
 
@@ -352,278 +365,86 @@ export function Composer({ send }: { send: (msg: ClientMessage) => void }) {
             onDiscard={clearReview}
             onAppend={handleVoiceAppend}
           />
+        </div>
 
-          {/* Rejected-file errors */}
-          {attachErrors.length > 0 && (
-            <div className="mb-2 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-[11px] text-destructive">
-              <div className="flex-1 space-y-0.5">
-                {attachErrors.map((e, i) => (
-                  <div key={i}>{e}</div>
-                ))}
-              </div>
-              <button
-                type="button"
-                onClick={() => setAttachErrors([])}
-                title="Dismiss"
-                className="shrink-0 rounded p-0.5 transition-colors hover:text-foreground"
-              >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            </div>
-          )}
-
-          {/* Image attachment preview strip */}
-          {attachments.length > 0 && (
-            <div className="mb-2 flex flex-wrap gap-2">
-              {attachments.map((a, i) => (
-                <div key={i} className="relative h-16 w-16 shrink-0">
-                  <img
-                    src={a.previewUrl}
-                    alt={a.name}
-                    className="h-16 w-16 rounded-lg border border-border object-cover"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => removeAttachment(i)}
-                    title="Remove"
-                    className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full border border-border bg-surface text-muted-foreground shadow transition-colors hover:text-destructive"
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-
-          <div
-            className={cn(
-              "relative rounded-2xl border border-border bg-surface shadow-lg transition-all duration-200",
-              "focus-within:border-primary/40 focus-within:shadow-[0_0_20px_rgba(224,159,62,0.05)]"
-            )}
-          >
-            {/* Command palette */}
-            {showCommandPalette && (
-              <CommandPalette
-                filter={input.slice(1)}
-                onSelect={handleCommand}
-              />
-            )}
-
-            {/* Hidden file inputs for the paperclip / camera buttons */}
-            <input
-              ref={libraryInputRef}
-              type="file"
-              accept="image/*"
-              multiple
-              hidden
-              onChange={onFilePick}
-            />
-            <input
-              ref={cameraInputRef}
-              type="file"
-              accept="image/*"
-              capture="environment"
-              hidden
-              onChange={onFilePick}
-            />
-
-            {/* The textarea grows by CSS, not by JavaScript: the wrapper's
-                ::after mirrors the value and sets the row height, so the
-                composer never reads scrollHeight. That read forced a full
-                document layout on every keystroke, and its cost scaled with
-                the size of the transcript behind it. */}
-            <div className="composer-grow" data-value={input + " "}>
-              <textarea
-                ref={textareaRef}
-                value={input}
-                onChange={(e) => {
-                  setInput(e.target.value);
-                  setPaletteDismissed(false);
-                }}
-                onPaste={(e) => {
-                  const files = e.clipboardData?.files;
-                  if (files && files.length > 0) {
-                    const images = Array.from(files).filter((f) =>
-                      f.type.startsWith("image/")
-                    );
-                    if (images.length > 0) {
-                      e.preventDefault();
-                      void addFiles(images);
-                    }
-                  }
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    if (showCommandPalette) return;
-                    // On desktop (>=768px), Enter sends. On mobile, Enter inserts newline.
-                    if (window.matchMedia("(min-width: 768px)").matches) {
-                      e.preventDefault();
-                      handleSubmit();
-                    }
-                  }
-                  if (e.key === "ArrowUp" && !input.trim()) {
-                    handleRecall();
-                  }
-                  if (e.key === "Escape") {
-                    setPaletteDismissed(true);
-                  }
-                }}
-                placeholder={
-                  wsStatus !== "connected"
-                    ? connectionIssue === "capacity"
-                      ? "Server connection limit reached"
-                      : connectionIssue === "refused"
-                        ? "Server refused the connection"
-                        : "Connecting..."
-                    : uiConfig.composerPlaceholder
+        {/* Hidden file inputs for the paperclip / camera buttons */}
+        <input ref={libraryInputRef} type="file" accept="image/*" multiple hidden onChange={onFilePick} />
+        <input ref={cameraInputRef} type="file" accept="image/*" capture="environment" hidden onChange={onFilePick} />
+
+        <ComposerView
+          value={input}
+          // The kit's `state` drives placeholder, hint and the trailing control
+          // together (D37): streaming shows the stop, reconnecting keeps send
+          // live, offline disables it and keeps the draft.
+          state={
+            wsStatus === "connected"
+              ? isStreaming
+                ? "streaming"
+                : "ready"
+              : wsStatus === "connecting" && connectionIssue === null
+                ? "reconnecting"
+                : "offline"
+          }
+          placeholder={
+            wsStatus !== "connected"
+              ? connectionIssue === "capacity"
+                ? "Server connection limit reached"
+                : connectionIssue === "refused"
+                  ? "Server refused the connection"
+                  : "Connecting..."
+              : root.config.composerPlaceholder
+          }
+          hint={followUpHint ? `${followUpHint} · esc or the stop button ends the run` : undefined}
+          blockedWhy={
+            wsStatus === "connected" ? undefined : `${connectionIssue === "capacity" ? "the host is full" : connectionIssue === "refused" ? "the host refused the connection" : "needs the host"} · your draft is kept`
+          }
+          paletteOpen={showCommandPalette}
+          palette={showCommandPalette ? <CommandPalette filter={input.slice(1)} onSelect={handleCommand} /> : null}
+          attachMenuOpen={attachMenuOpen}
+          attachments={attachments.map((a) => ({ previewUrl: a.previewUrl, name: a.name }))}
+          attachErrors={attachErrors}
+          provider={
+            showProviderPicker
+              ? {
+                  label: displayProviderLabel,
+                  locked: providerLocked,
+                  menuOpen: providerMenuOpen,
+                  options: providers.map((p) => ({ id: p.id, label: p.label })),
+                  selectedId: selectedProviderId,
                 }
-                disabled={wsStatus !== "connected"}
-                rows={1}
-                className="w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground/40 focus:outline-none disabled:opacity-50"
-              />
-            </div>
-
-            <div className="flex items-center justify-between px-4 pb-3">
-              {/* Provider picker + hints */}
-              <div className="flex min-w-0 items-center gap-3 text-[11px] text-muted-foreground/50">
-                {showProviderPicker && (
-                  <div ref={providerMenuRef} className="relative">
-                    <button
-                      type="button"
-                      onClick={() =>
-                        !providerLocked && setProviderMenuOpen((v) => !v)
-                      }
-                      disabled={providerLocked}
-                      title={
-                        providerLocked
-                          ? "Provider is fixed for this conversation"
-                          : "Choose model"
-                      }
-                      className={cn(
-                        "flex max-w-[9rem] items-center gap-1 rounded-lg px-2 py-1 text-[11px] transition-colors md:max-w-[14rem]",
-                        providerLocked
-                          ? "cursor-default text-muted-foreground/60"
-                          : "text-muted-foreground hover:bg-surface-raised hover:text-foreground"
-                      )}
-                    >
-                      {providerLocked && (
-                        <Lock className="h-3 w-3 shrink-0 opacity-70" />
-                      )}
-                      <span className="truncate">
-                        {displayProviderLabel}
-                      </span>
-                      {!providerLocked && (
-                        <ChevronDown className="h-3 w-3 shrink-0 opacity-70" />
-                      )}
-                    </button>
-                    {providerMenuOpen && !providerLocked && (
-                      <div
-                        role="menu"
-                        className="absolute bottom-full left-0 z-50 mb-1 min-w-[14rem] overflow-hidden rounded-xl border border-border bg-surface-overlay py-1 shadow-2xl"
-                      >
-                        {providers.map((p) => (
-                          <button
-                            key={p.id}
-                            role="menuitem"
-                            type="button"
-                            onClick={() => {
-                              setSelectedProvider(p.id);
-                              setProviderMenuOpen(false);
-                            }}
-                            className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-foreground transition-colors hover:bg-surface-raised"
-                          >
-                            <Check
-                              className={cn(
-                                "h-3.5 w-3.5 shrink-0 text-primary",
-                                p.id === selectedProviderId
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            <span className="truncate">{p.label}</span>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                )}
-                {followUpHint ? (
-                  <span className="text-primary/70">{followUpHint}</span>
-                ) : (
-                  <>
-                    <span className="hidden sm:inline">
-                      <span className="font-[family-name:var(--font-mono)]">/</span>{" "}
-                      for commands
-                    </span>
-                    <span className="hidden md:inline">Shift+Enter for newline</span>
-                  </>
-                )}
-              </div>
-
-              {/* Attach + Recall + Mic + Send / Cancel */}
-              <div className="flex items-center gap-1.5">
-                <button
-                  type="button"
-                  onClick={() => libraryInputRef.current?.click()}
-                  disabled={isStreaming || wsStatus !== "connected"}
-                  title="Attach images"
-                  aria-label="Attach images"
-                  className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-surface-raised hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
-                >
-                  <Paperclip className="h-4 w-4" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => cameraInputRef.current?.click()}
-                  disabled={isStreaming || wsStatus !== "connected"}
-                  title="Take a photo"
-                  aria-label="Take a photo"
-                  className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-surface-raised hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
-                >
-                  <Camera className="h-4 w-4" />
-                </button>
-                {lastPrompt && !input.trim() && !isStreaming && (
-                  <button
-                    type="button"
-                    onClick={handleRecall}
-                    title="Recall last prompt"
-                    className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-surface-raised hover:text-foreground"
-                  >
-                    <CornerLeftUp className="h-4 w-4" />
-                  </button>
-                )}
-                <MicButton
-                  active={voiceMode === "dictate"}
-                  disabled={isStreaming || wsStatus !== "connected"}
-                  onTap={handleMicTap}
-                />
-                {isStreaming && !hasDraft ? (
-                  // Streaming with nothing drafted: the primary action is cancel.
-                  <button
-                    type="button"
-                    onClick={handleCancel}
-                    title="Stop the running turn"
-                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-destructive text-primary-foreground transition-all duration-150"
-                  >
-                    <Square className="h-3.5 w-3.5" />
-                  </button>
-                ) : (
-                  // A draft always sends — as a new turn, or a follow-up when a
-                  // session is already running.
-                  <button
-                    type="button"
-                    onClick={handleSubmit}
-                    disabled={!canSend}
-                    title={followUpHint ?? "Send"}
-                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-all duration-150 hover:brightness-110 disabled:opacity-30"
-                  >
-                    <ArrowUp className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
+              : null
+          }
+          frameRef={frameRef}
+          providerMenuRef={providerMenuRef}
+          onChange={(value) => {
+            setInput(value);
+            setPaletteDismissed(false);
+          }}
+          onSend={() => {
+            if (canSend) handleSubmit();
+          }}
+          onStop={handleCancel}
+          onMic={handleMicTap}
+          onAttachToggle={() => setAttachMenuOpen((v) => !v)}
+          onPickLibrary={() => {
+            setAttachMenuOpen(false);
+            libraryInputRef.current?.click();
+          }}
+          onPickCamera={() => {
+            setAttachMenuOpen(false);
+            cameraInputRef.current?.click();
+          }}
+          onPasteFiles={(files) => void addFiles(files)}
+          onRecall={handleRecall}
+          onEscape={() => setPaletteDismissed(true)}
+          onRemoveAttachment={removeAttachment}
+          onDismissErrors={() => setAttachErrors([])}
+          onProviderToggle={() => !providerLocked && setProviderMenuOpen((v) => !v)}
+          onProviderSelect={(id) => {
+            setSelectedProvider(id);
+            setProviderMenuOpen(false);
+          }}
+        />
       </div>
     </>
   );

package/src/components/chat/markdown-content.tsx

@@ -1,5 +1,56 @@
+import type { MessageBlock } from "@schlessera/brain-ui-sdk/protocol";
 import { BrainMarkdown } from "./brain-markdown.js";
+import { BlockCard } from "./tool-cards/block-card.js";
 
-export function MarkdownContent({ content }: { content: string }) {
-  return <BrainMarkdown content={content} fileLinks />;
+/**
+ * A text part of an assistant message, with the blocks the surface
+ * classified out of it drawn in place (D42).
+ *
+ * The blocks are anchored by character span. The part is cut at those
+ * spans and each piece renders as markdown, with the kit block between —
+ * so a table the model typed becomes a comparison table without touching
+ * the markdown renderer, and a message with no blocks renders exactly as it
+ * did before this prop existed. A span that does not fit the text (an
+ * anchor from a text that has since changed) is ignored, never a blank.
+ */
+export function MarkdownContent({
+  content,
+  blocks,
+}: {
+  content: string;
+  blocks?: MessageBlock[];
+}) {
+  const cuts = usableBlocks(content, blocks);
+  if (cuts.length === 0) return <BrainMarkdown content={content} fileLinks />;
+  const pieces: React.ReactNode[] = [];
+  let cursor = 0;
+  cuts.forEach((cut, i) => {
+    const before = content.slice(cursor, cut.start);
+    if (before.trim()) pieces.push(<BrainMarkdown key={`md-${i}`} content={before} fileLinks />);
+    pieces.push(
+      <div key={`block-${i}`} className="my-3" data-classified-block={cut.block.kind}>
+        <BlockCard block={cut.block} />
+      </div>
+    );
+    cursor = cut.end;
+  });
+  const after = content.slice(cursor);
+  if (after.trim()) pieces.push(<BrainMarkdown key="md-tail" content={after} fileLinks />);
+  return <>{pieces}</>;
+}
+
+/** The blocks whose spans fit this text, in order, non-overlapping. */
+export function usableBlocks(content: string, blocks: MessageBlock[] | undefined): MessageBlock[] {
+  if (!blocks || blocks.length === 0) return [];
+  const sorted = [...blocks]
+    .filter((b) => b.start >= 0 && b.end > b.start && b.end <= content.length)
+    .sort((a, b) => a.start - b.start);
+  const out: MessageBlock[] = [];
+  let cursor = 0;
+  for (const block of sorted) {
+    if (block.start < cursor) continue;
+    out.push(block);
+    cursor = block.end;
+  }
+  return out;
 }

package/src/components/chat/mermaid-block.tsx

@@ -1,6 +1,8 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useEffect, useRef, useState } from "react";
 import { Code, ChartNetwork, Expand } from "lucide-react";
 import { peekMermaidSvg, renderMermaidSvg } from "../../lib/mermaid.js";
+import { useColorScheme } from "../../hooks/use-color-scheme.js";
 import { ShareMenu } from "../share/share-menu.js";
 import { CopyButton } from "./copy-button.js";
 import { buildDiagramShareOptions } from "./mermaid-share.js";
@@ -15,9 +17,15 @@ import { MermaidViewer } from "./mermaid-viewer.js";
  * fails keeps the last good diagram instead of flashing an error. Renders
  * are cached module-wide, so the per-token re-render of a streaming message
  * costs a cache lookup, not a mermaid parse.
+ *
+ * The diagram is drawn for the scheme the page is in — mermaid's variables
+ * are literal colours, so a theme switch is a re-render (cached per scheme),
+ * not a stylesheet change.
  */
 export function MermaidBlock({ source }: { source: string }) {
-  const [svg, setSvg] = useState<string | null>(() => peekMermaidSvg(source));
+  const root = useBrainUiRoot();
+  const scheme = useColorScheme();
+  const [svg, setSvg] = useState<string | null>(() => peekMermaidSvg(source, scheme));
   const [showSource, setShowSource] = useState(false);
   const [zoomed, setZoomed] = useState(false);
   const latest = useRef(0);
@@ -25,7 +33,7 @@ export function MermaidBlock({ source }: { source: string }) {
 
   useEffect(() => {
     const id = ++latest.current;
-    const cached = peekMermaidSvg(source);
+    const cached = peekMermaidSvg(source, scheme);
     if (cached) {
       setSvg(cached);
       return;
@@ -37,13 +45,13 @@ export function MermaidBlock({ source }: { source: string }) {
     const wait = Date.now() - lastAttempt.current > 400 ? 0 : 150;
     const t = setTimeout(() => {
       lastAttempt.current = Date.now();
-      void renderMermaidSvg(source).then((result) => {
+      void renderMermaidSvg(source, scheme).then((result) => {
         if (latest.current !== id || !result) return;
         setSvg(result);
       });
     }, wait);
     return () => clearTimeout(t);
-  }, [source]);
+  }, [source, scheme]);
 
   const diagramReady = svg !== null;
   const showDiagram = diagramReady && !showSource;
@@ -77,7 +85,7 @@ export function MermaidBlock({ source }: { source: string }) {
         )}
         {diagramReady && (
           <ShareMenu
-            options={buildDiagramShareOptions(source)}
+            options={buildDiagramShareOptions(root, source)}
             title="Share diagram"
             renderTrigger={({ onClick, busy, icon }) => (
               <button type="button" title="Share diagram" onClick={onClick} disabled={busy} className={iconBtn}>