@tightknitai/block-kitchen 0.9.3 → 0.9.4

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { T as SupportedBlock } from './palette-DIbvAzRA.cjs';
-export { U as SupportedBlockType } from './palette-DIbvAzRA.cjs';
+import { T as SupportedBlock } from './palette-inX8F01o.cjs';
+export { U as SupportedBlockType } from './palette-inX8F01o.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { T as SupportedBlock } from './palette-DIbvAzRA.js';
-export { U as SupportedBlockType } from './palette-DIbvAzRA.js';
+import { T as SupportedBlock } from './palette-inX8F01o.js';
+export { U as SupportedBlockType } from './palette-inX8F01o.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -2647,8 +2647,10 @@ function JsonDrawer({
   const [value, setValue] = React.useState("");
   const [parseError, setParseError] = React.useState(null);
   const [validationErrors, setValidationErrors] = React.useState([]);
+  const [copied, setCopied] = React.useState(false);
   const textareaRef = React.useRef(null);
   const gutterRef = React.useRef(null);
+  const copyResetRef = React.useRef(null);
   const blocksRef = React.useRef(blocks);
   React.useEffect(() => {
     blocksRef.current = blocks;
@@ -2658,8 +2660,27 @@ function JsonDrawer({
       setValue(JSON.stringify(blocksRef.current, null, 2));
       setParseError(null);
       setValidationErrors([]);
+      setCopied(false);
     }
   }, [open]);
+  React.useEffect(
+    () => () => {
+      if (copyResetRef.current) {
+        clearTimeout(copyResetRef.current);
+      }
+    },
+    []
+  );
+  const handleCopy = () => {
+    navigator.clipboard?.writeText(value).then(() => {
+      setCopied(true);
+      if (copyResetRef.current) {
+        clearTimeout(copyResetRef.current);
+      }
+      copyResetRef.current = setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
   const handleChange = (next) => {
     setValue(next);
     if (next.length > MAX_JSON_BYTES) {
@@ -2706,7 +2727,17 @@ function JsonDrawer({
       /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Block Kit JSON" }),
       /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: "Edits update the preview as you type. Parse errors show below." })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden rounded-md border border-input bg-muted/30 shadow-sm focus-within:ring-1 focus-within:ring-ring", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 overflow-hidden rounded-md border border-input bg-muted/30 shadow-sm focus-within:ring-1 focus-within:ring-ring", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          "aria-label": copied ? "Copied to clipboard" : "Copy JSON",
+          className: "absolute right-2 top-2 z-10 inline-flex items-center justify-center rounded-md border border-input bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-emerald-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -2855,6 +2886,79 @@ var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var POLL_INTERVAL_MS = 2500;
+var MAX_POLLS = 24;
+function useSlackSignIn(loadStatus, { open, enabled }) {
+  const [userStatus, setUserStatus] = React.useState(null);
+  const [polling, setPolling] = React.useState(false);
+  const loadStatusRef = React.useRef(loadStatus);
+  React.useEffect(() => {
+    loadStatusRef.current = loadStatus;
+  });
+  const refresh = React.useCallback(() => {
+    loadStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
+  }, []);
+  const pollRef = React.useRef(null);
+  const stopPolling = React.useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    setPolling(false);
+  }, []);
+  const startSignIn = React.useCallback(() => {
+    const url = userStatus?.oauthUrl;
+    if (!url || !isSafeHref(url)) {
+      return;
+    }
+    window.open(url, "_blank", "noopener,noreferrer");
+    stopPolling();
+    setPolling(true);
+    let tries = 0;
+    pollRef.current = setInterval(() => {
+      tries += 1;
+      loadStatusRef.current().then((next) => {
+        setUserStatus(next);
+        if (next.canSendAsUser) {
+          stopPolling();
+        }
+      }).catch(() => {
+      }).finally(() => {
+        if (tries >= MAX_POLLS) {
+          stopPolling();
+        }
+      });
+    }, POLL_INTERVAL_MS);
+  }, [userStatus, stopPolling]);
+  React.useEffect(() => {
+    if (!open || !enabled) {
+      setUserStatus(null);
+      stopPolling();
+      return;
+    }
+    setUserStatus(null);
+    refresh();
+    return stopPolling;
+  }, [open, enabled, refresh, stopPolling]);
+  React.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    const handler = () => refresh();
+    window.addEventListener("focus", handler);
+    return () => window.removeEventListener("focus", handler);
+  }, [open, enabled, refresh]);
+  return { userStatus, polling, startSignIn };
+}
+function SlackSignInButton({ onClick, polling }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick, disabled: polling, children: polling ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }),
+    " Waiting for Slack\u2026"
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    "Sign in with Slack ",
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, {})
+  ] }) });
+}
 function recentToResult(msg) {
   return {
     ok: true,
@@ -2868,6 +2972,17 @@ function recentToResult(msg) {
     iconUrl: msg.iconUrl
   };
 }
+function previewText(m) {
+  if (m.label) {
+    return m.label;
+  }
+  for (const b of m.blocks) {
+    if ((b.type === "header" || b.type === "section") && "text" in b && b.text && "text" in b.text) {
+      return b.text.text;
+    }
+  }
+  return `${m.blocks.length} block${m.blocks.length === 1 ? "" : "s"}`;
+}
 function LoadMessageDialog({
   open,
   onOpenChange,
@@ -2884,7 +2999,10 @@ function LoadMessageDialog({
   const [channelId, setChannelId] = React.useState("");
   const [recent, setRecent] = React.useState(null);
   const [recentError, setRecentError] = React.useState(null);
+  const [selectedRecent, setSelectedRecent] = React.useState(null);
+  const [signInPolling, setSignInPolling] = React.useState(false);
   const inputRef = React.useRef(null);
+  const signInPollRef = React.useRef(null);
   const onLoadMessageRef = React.useRef(onLoadMessage);
   const loadRecentMessagesRef = React.useRef(loadRecentMessages);
   const loadChannelsRef = React.useRef(loadChannels);
@@ -2903,6 +3021,7 @@ function LoadMessageDialog({
     setChannelId("");
     setRecent(null);
     setRecentError(null);
+    setSelectedRecent(null);
     if (!loadRecentMessagesRef.current) {
       setChannels([]);
       setChannelsError(null);
@@ -2930,6 +3049,7 @@ function LoadMessageDialog({
     }
     setRecent(null);
     setRecentError(null);
+    setSelectedRecent(null);
     let cancelled = false;
     loadRecentMessagesRef.current(channelId).then((list) => {
       if (!cancelled) {
@@ -2944,7 +3064,25 @@ function LoadMessageDialog({
       cancelled = true;
     };
   }, [open, channelId]);
+  const stopSignInPoll = React.useCallback(() => {
+    if (signInPollRef.current) {
+      clearInterval(signInPollRef.current);
+      signInPollRef.current = null;
+    }
+    setSignInPolling(false);
+  }, []);
+  React.useEffect(() => {
+    if (!open) {
+      stopSignInPoll();
+    }
+    return stopSignInPoll;
+  }, [open, stopSignInPoll]);
   const handleLoad = async () => {
+    stopSignInPoll();
+    if (selectedRecent) {
+      onLoaded(recentToResult(selectedRecent));
+      return;
+    }
     const trimmed = link.trim();
     if (!trimmed) {
       setStatus({ kind: "error", error: "Paste a Slack message link first." });
@@ -2957,12 +3095,42 @@ function LoadMessageDialog({
         onLoaded(result);
         return;
       }
-      setStatus({ kind: "not-editable", reason: result.reason, blocks: result.blocks });
+      setStatus({ kind: "not-editable", reason: result.reason, blocks: result.blocks, oauthUrl: result.oauthUrl });
     } catch (e) {
       setStatus({ kind: "error", error: e instanceof Error ? e.message : "Failed to load message." });
     }
   };
+  const startFindSignIn = (oauthUrl) => {
+    if (!isSafeHref(oauthUrl)) {
+      return;
+    }
+    const trimmed = link.trim();
+    if (!trimmed) {
+      return;
+    }
+    window.open(oauthUrl, "_blank", "noopener,noreferrer");
+    stopSignInPoll();
+    setSignInPolling(true);
+    let tries = 0;
+    const POLL_INTERVAL_MS2 = 2500;
+    const MAX_POLLS2 = 24;
+    signInPollRef.current = setInterval(() => {
+      tries += 1;
+      onLoadMessageRef.current({ link: trimmed }).then((result) => {
+        if (result.ok) {
+          stopSignInPoll();
+          onLoaded(result);
+        }
+      }).catch(() => {
+      }).finally(() => {
+        if (tries >= MAX_POLLS2) {
+          stopSignInPoll();
+        }
+      });
+    }, POLL_INTERVAL_MS2);
+  };
   const notEditable = status.kind === "not-editable" ? status : null;
+  const signInUrl = notEditable?.oauthUrl && isSafeHref(notEditable.oauthUrl) ? notEditable.oauthUrl : null;
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
     DialogContent,
     {
@@ -2973,7 +3141,7 @@ function LoadMessageDialog({
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Edit an existing message" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Find an existing message" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1.5 text-left", children: [
             /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: hasRecent ? "Paste a Slack message link, or pick a recent message your app posted." : `Paste a Slack message link (Slack's "Copy link") to load its blocks for editing.` }),
             /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
@@ -3007,6 +3175,8 @@ function LoadMessageDialog({
                 value: link,
                 onChange: (e) => {
                   setLink(e.target.value);
+                  setSelectedRecent(null);
+                  stopSignInPoll();
                   if (status.kind !== "idle" && status.kind !== "loading") {
                     setStatus({ kind: "idle" });
                   }
@@ -3029,7 +3199,8 @@ function LoadMessageDialog({
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: notEditable.reason })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            signInUrl && /* @__PURE__ */ jsxRuntime.jsx(SlackSignInButton, { onClick: () => startFindSignIn(signInUrl), polling: signInPolling }),
+            notEditable.blocks && notEditable.blocks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 type: "button",
@@ -3075,26 +3246,52 @@ function LoadMessageDialog({
             channelId && recent && recent.length === 0 && !recentError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "No recent messages from this app in this channel." }),
             channelId && recent && recent.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-h-48 min-w-0 flex-col gap-1 overflow-y-auto", children: recent.map((m) => {
               const asUser = (m.editableVia ?? "bot") === "user";
+              const authorName = m.username || (asUser ? "You" : "App bot");
+              const safeIcon = isSafeImageSrc(m.iconUrl) ? m.iconUrl : void 0;
+              const isSelected = selectedRecent?.channelId === m.channelId && selectedRecent?.ts === m.ts;
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => onLoaded(recentToResult(m)),
-                  className: "flex min-w-0 flex-col gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  "aria-pressed": isSelected,
+                  onClick: () => {
+                    setSelectedRecent(m);
+                    setLink("");
+                    if (status.kind !== "idle" && status.kind !== "loading") {
+                      setStatus({ kind: "idle" });
+                    }
+                  },
+                  className: cn(
+                    // Inset rings so the scroll container's overflow clip
+                    // can't shave the corners off the selected outline.
+                    "flex min-w-0 items-start gap-2.5 rounded-md border border-input bg-background px-3 py-2 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                    isSelected && "border-primary! bg-accent ring-1 ring-inset ring-primary"
+                  ),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-baseline justify-between gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: asUser ? "You" : "Bot" }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: new Date(Number(m.ts) * 1e3).toLocaleString() }),
+                    safeIcon ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: safeIcon, alt: "", className: "h-9 w-9 shrink-0 rounded-md object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground",
+                        children: authorName.charAt(0).toUpperCase()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: authorName }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: asUser ? "You" : "Bot" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                        new Date(Number(m.ts) * 1e3).toLocaleString(),
                         " ",
                         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
                           "(",
                           m.ts,
                           ")"
                         ] })
-                      ] })
-                    ] }),
-                    m.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm text-muted-foreground", children: m.label })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 text-sm text-foreground", children: previewText(m) })
+                    ] })
                   ]
                 },
                 `${m.channelId}:${m.ts}`
@@ -3104,7 +3301,15 @@ function LoadMessageDialog({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: handleLoad, disabled: status.kind === "loading" || !link.trim(), children: status.kind === "loading" ? "Loading\u2026" : "Load message" })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              onClick: handleLoad,
+              disabled: status.kind === "loading" || !selectedRecent && !link.trim(),
+              children: status.kind === "loading" ? "Loading\u2026" : "Find message"
+            }
+          )
         ] })
       ]
     }
@@ -3323,18 +3528,13 @@ function SendDialog({
   const [channels, setChannels] = React.useState(null);
   const [channelsError, setChannelsError] = React.useState(null);
   const [channelId, setChannelId] = React.useState("");
-  const [userStatus, setUserStatus] = React.useState(null);
   const [sendAs, setSendAs] = React.useState("bot");
   const [status, setStatus] = React.useState({ kind: "idle" });
+  const { userStatus, polling, startSignIn } = useSlackSignIn(loadSendAsUserStatus, { open, enabled: true });
   const loadChannelsRef = React.useRef(loadChannels);
-  const loadSendAsUserStatusRef = React.useRef(loadSendAsUserStatus);
   React.useEffect(() => {
     loadChannelsRef.current = loadChannels;
-    loadSendAsUserStatusRef.current = loadSendAsUserStatus;
   });
-  const refreshSendAsUser = React.useCallback(() => {
-    loadSendAsUserStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
-  }, []);
   React.useEffect(() => {
     if (!open) {
       return;
@@ -3342,7 +3542,6 @@ function SendDialog({
     setStatus({ kind: "idle" });
     setChannels(null);
     setChannelsError(null);
-    setUserStatus(null);
     setChannelId("");
     setSendAs("bot");
     let cancelled = false;
@@ -3358,19 +3557,10 @@ function SendDialog({
       }
       setChannelsError(e instanceof Error ? e.message : "Failed to load channels");
     });
-    refreshSendAsUser();
     return () => {
       cancelled = true;
     };
-  }, [open, refreshSendAsUser]);
-  React.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const handler = () => refreshSendAsUser();
-    window.addEventListener("focus", handler);
-    return () => window.removeEventListener("focus", handler);
-  }, [open, refreshSendAsUser]);
+  }, [open]);
   const handleSubmit = async () => {
     if (!channelId) {
       setStatus({ kind: "error", error: "Please pick a channel." });
@@ -3424,22 +3614,9 @@ function SendDialog({
             ]
           }
         ),
-        userStatus && !userStatus.canSendAsUser && userStatus.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: userStatus.oauthUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "inline-flex items-center gap-1 text-primary hover:underline",
-              children: [
-                "Sign in with Slack ",
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
-              ]
-            }
-          ),
-          " ",
-          "to post as yourself."
+        userStatus && !userStatus.canSendAsUser && userStatus.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Connect your Slack account to post as yourself." }),
+          /* @__PURE__ */ jsxRuntime.jsx(SlackSignInButton, { onClick: startSignIn, polling })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
@@ -9213,7 +9390,7 @@ function Toolbar2({
   onOpenLoad,
   onOpenUpdate,
   onExitEdit,
-  loadButtonLabel = "Load message",
+  loadButtonLabel = "Find message",
   updateButtonLabel = "Review & update"
 }) {
   const activeTheme = THEME_OPTIONS.find((t) => t.value === previewTheme) ?? THEME_OPTIONS[0];
@@ -9497,33 +9674,13 @@ function UpdateDialog({
   onShowIssues
 }) {
   const asUser = target.editableVia === "user";
-  const [userStatus, setUserStatus] = React.useState(null);
   const [status, setStatus] = React.useState({ kind: "idle" });
-  const loadSendAsUserStatusRef = React.useRef(loadSendAsUserStatus);
-  React.useEffect(() => {
-    loadSendAsUserStatusRef.current = loadSendAsUserStatus;
-  });
-  const refreshSendAsUser = React.useCallback(() => {
-    loadSendAsUserStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
-  }, []);
+  const { userStatus, polling, startSignIn } = useSlackSignIn(loadSendAsUserStatus, { open, enabled: asUser });
   React.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setStatus({ kind: "idle" });
-    if (asUser) {
-      setUserStatus(null);
-      refreshSendAsUser();
-    }
-  }, [open, asUser, refreshSendAsUser]);
-  React.useEffect(() => {
-    if (!open || !asUser) {
-      return;
+    if (open) {
+      setStatus({ kind: "idle" });
     }
-    const handler = () => refreshSendAsUser();
-    window.addEventListener("focus", handler);
-    return () => window.removeEventListener("focus", handler);
-  }, [open, asUser, refreshSendAsUser]);
+  }, [open]);
   const needsSignIn = asUser && userStatus !== null && !userStatus.canSendAsUser;
   const handleSubmit = async () => {
     setStatus({ kind: "updating" });
@@ -9558,22 +9715,9 @@ function UpdateDialog({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Posting as" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex h-9 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground", children: asUser ? "Your account" : "App bot" }),
-        needsSignIn && userStatus?.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: userStatus.oauthUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "inline-flex items-center gap-1 text-primary hover:underline",
-              children: [
-                "Sign in with Slack ",
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
-              ]
-            }
-          ),
-          " ",
-          "to update your own message."
+        needsSignIn && userStatus?.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Connect your Slack account to edit your own messages." }),
+          /* @__PURE__ */ jsxRuntime.jsx(SlackSignInButton, { onClick: startSignIn, polling })
         ] }),
         needsSignIn && !userStatus?.oauthUrl && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Sign in with Slack to update your own message." })
       ] }),