@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/chat/ChatSidebarMenu.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { usePathname, useRouter, Link } from "../../../host/navigation.js";
 import {
@@ -78,7 +79,7 @@ function ChatSidebarMenu({ expanded }) {
     // gap-0.5 (= 0.125rem) matches `.shell-sidebar-main-nav` / `route-nav`
     // gap so the chrome rows sit at the exact same rhythm as the main app
     // nav items.
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         className: "flex flex-1 min-h-0 flex-col gap-0.5",
@@ -98,195 +99,215 @@ function ChatSidebarMenu({ expanded }) {
             sourceAgentId: activeAgentId,
             sourceConversationId: activeConversationId
           });
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          href: CHAT_HOME_HREF,
-          title: "Chat",
-          "aria-label": "Chat",
-          "aria-current": isChatHome ? "page" : void 0,
-          className: cn(
-            ROUTE_MENU_NAV_ITEM_CLASS,
-            isChatHome && "shell-active-pill"
-          )
         },
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-icon" }, /* @__PURE__ */ React.createElement(
-          MessageCircle,
-          {
-            size: ROUTE_MENU_ICON_SIZE,
-            strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
-          }
-        )),
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-label" }, "Chat")
-      ),
-      /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          title: "New chat",
-          "aria-label": "New chat",
-          className: ROUTE_MENU_NAV_ITEM_CLASS,
-          onClick: (event) => {
-            if (event.metaKey || event.ctrlKey) {
-              window.open("/chat/new", "_blank", "noopener,noreferrer");
-              return;
-            }
-            handleNewChat();
-          },
-          onAuxClick: (event) => {
-            if (event.button !== 1) return;
-            event.preventDefault();
-            window.open("/chat/new", "_blank", "noopener,noreferrer");
-          }
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-icon" }, /* @__PURE__ */ React.createElement(
-          Plus,
-          {
-            size: ROUTE_MENU_ICON_SIZE,
-            strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
-          }
-        )),
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-label" }, "New chat")
-      ),
-      /* @__PURE__ */ React.createElement(Popover, { open: chatSearchOpen, onOpenChange: setChatSearchOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          title: "Search chats",
-          "aria-label": "Search chats",
-          className: ROUTE_MENU_NAV_ITEM_CLASS
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-icon" }, /* @__PURE__ */ React.createElement(
-          Search,
-          {
-            size: ROUTE_MENU_ICON_SIZE,
-            strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
-          }
-        )),
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-label" }, "Search chats")
-      )), /* @__PURE__ */ React.createElement(
-        PopoverContent,
-        {
-          sizing: "content",
-          side: "right",
-          align: "start",
-          sideOffset: 8,
-          className: "overflow-hidden p-0"
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "flex h-[min(70dvh,560px)] flex-col" }, /* @__PURE__ */ React.createElement(
-          ChatHistorySidebar,
-          {
-            scopeId: CHAT_HISTORY_SEARCH_SCOPE,
-            surfaceId: "chat",
-            activeConversationId,
-            onOpenConversation: (conversation) => {
-              setChatSearchOpen(false);
-              if (host) {
-                host.openConversation(conversation);
-                closeShellMobileMenu();
-              }
-            },
-            openInPlace: !!host,
-            initialSearchOpen: true,
-            className: "h-full"
-          }
-        ))
-      )),
-      /* @__PURE__ */ React.createElement(
-        AgentListDropdown,
-        {
-          navigateTo: "/chat/a/{id}",
-          onSelect: (agentId) => {
-            if (host) {
-              host.startWithAgent(agentId);
-              closeShellMobileMenu();
-              return;
+        children: [
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: CHAT_HOME_HREF,
+              title: "Chat",
+              "aria-label": "Chat",
+              "aria-current": isChatHome ? "page" : void 0,
+              className: cn(
+                ROUTE_MENU_NAV_ITEM_CLASS,
+                isChatHome && "shell-active-pill"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-icon", children: /* @__PURE__ */ jsx(
+                  MessageCircle,
+                  {
+                    size: ROUTE_MENU_ICON_SIZE,
+                    strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-label", children: "Chat" })
+              ]
             }
-            stageChatAgentSwitch({
-              dispatch,
-              router,
-              getState: store.getState,
-              targetAgentId: agentId,
-              sourceAgentId: activeAgentId,
-              sourceConversationId: activeConversationId
-            });
-          },
-          contentSide: "right",
-          triggerSlot: /* @__PURE__ */ React.createElement(
+          ),
+          /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              title: "Search agents",
-              "aria-label": "Search agents",
-              className: ROUTE_MENU_NAV_ITEM_CLASS
-            },
-            /* @__PURE__ */ React.createElement("span", { className: "shell-nav-icon" }, /* @__PURE__ */ React.createElement(
-              Webhook,
+              title: "New chat",
+              "aria-label": "New chat",
+              className: ROUTE_MENU_NAV_ITEM_CLASS,
+              onClick: (event) => {
+                if (event.metaKey || event.ctrlKey) {
+                  window.open("/chat/new", "_blank", "noopener,noreferrer");
+                  return;
+                }
+                handleNewChat();
+              },
+              onAuxClick: (event) => {
+                if (event.button !== 1) return;
+                event.preventDefault();
+                window.open("/chat/new", "_blank", "noopener,noreferrer");
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-icon", children: /* @__PURE__ */ jsx(
+                  Plus,
+                  {
+                    size: ROUTE_MENU_ICON_SIZE,
+                    strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-label", children: "New chat" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Popover, { open: chatSearchOpen, onOpenChange: setChatSearchOpen, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
               {
-                size: ROUTE_MENU_ICON_SIZE,
-                strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
+                type: "button",
+                title: "Search chats",
+                "aria-label": "Search chats",
+                className: ROUTE_MENU_NAV_ITEM_CLASS,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "shell-nav-icon", children: /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      size: ROUTE_MENU_ICON_SIZE,
+                      strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("span", { className: "shell-nav-label", children: "Search chats" })
+                ]
               }
-            )),
-            /* @__PURE__ */ React.createElement("span", { className: "shell-nav-label" }, "Search agents")
-          )
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          href: MESSAGE_TEMPLATES_HREF,
-          title: "Message templates",
-          "aria-label": "Message templates",
-          "aria-current": isMessageTemplatesRoute ? "page" : void 0,
-          className: cn(
-            ROUTE_MENU_NAV_ITEM_CLASS,
-            isMessageTemplatesRoute && "shell-active-pill"
-          )
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-icon" }, /* @__PURE__ */ React.createElement(
-          LayoutTemplate,
-          {
-            size: ROUTE_MENU_ICON_SIZE,
-            strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
-          }
-        )),
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-label" }, "Message templates")
-      ),
-      /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          href: VOICE_AGENT_HREF,
-          title: "Voice agent",
-          "aria-label": "Voice agent",
-          "aria-current": isVoiceRoute ? "page" : void 0,
-          className: cn(
-            ROUTE_MENU_NAV_ITEM_CLASS,
-            isVoiceRoute && "shell-active-pill"
-          )
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-icon" }, /* @__PURE__ */ React.createElement(
-          Mic,
-          {
-            size: ROUTE_MENU_ICON_SIZE,
-            strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
-          }
-        )),
-        /* @__PURE__ */ React.createElement("span", { className: "shell-nav-label" }, "Voice agent")
-      ),
-      expanded && /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 min-h-0 flex-col" }, /* @__PURE__ */ React.createElement(PinnedAgentsSection, { activeAgentId }), /* @__PURE__ */ React.createElement(
-        ChatHistorySidebar,
-        {
-          scopeId: CHAT_HISTORY_SCOPE,
-          activeConversationId,
-          onOpenConversation: host ? (conversation) => host.openConversation(conversation) : void 0,
-          openInPlace: !!host,
-          surfaceId: "chat",
-          hideSearchAffordance: true,
-          className: "bg-transparent min-h-0 flex-1"
-        }
-      ))
+            ) }),
+            /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                sizing: "content",
+                side: "right",
+                align: "start",
+                sideOffset: 8,
+                className: "overflow-hidden p-0",
+                children: /* @__PURE__ */ jsx("div", { className: "flex h-[min(70dvh,560px)] flex-col", children: /* @__PURE__ */ jsx(
+                  ChatHistorySidebar,
+                  {
+                    scopeId: CHAT_HISTORY_SEARCH_SCOPE,
+                    surfaceId: "chat",
+                    activeConversationId,
+                    onOpenConversation: (conversation) => {
+                      setChatSearchOpen(false);
+                      if (host) {
+                        host.openConversation(conversation);
+                        closeShellMobileMenu();
+                      }
+                    },
+                    openInPlace: !!host,
+                    initialSearchOpen: true,
+                    className: "h-full"
+                  }
+                ) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            AgentListDropdown,
+            {
+              navigateTo: "/chat/a/{id}",
+              onSelect: (agentId) => {
+                if (host) {
+                  host.startWithAgent(agentId);
+                  closeShellMobileMenu();
+                  return;
+                }
+                stageChatAgentSwitch({
+                  dispatch,
+                  router,
+                  getState: store.getState,
+                  targetAgentId: agentId,
+                  sourceAgentId: activeAgentId,
+                  sourceConversationId: activeConversationId
+                });
+              },
+              contentSide: "right",
+              triggerSlot: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  title: "Search agents",
+                  "aria-label": "Search agents",
+                  className: ROUTE_MENU_NAV_ITEM_CLASS,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "shell-nav-icon", children: /* @__PURE__ */ jsx(
+                      Webhook,
+                      {
+                        size: ROUTE_MENU_ICON_SIZE,
+                        strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("span", { className: "shell-nav-label", children: "Search agents" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: MESSAGE_TEMPLATES_HREF,
+              title: "Message templates",
+              "aria-label": "Message templates",
+              "aria-current": isMessageTemplatesRoute ? "page" : void 0,
+              className: cn(
+                ROUTE_MENU_NAV_ITEM_CLASS,
+                isMessageTemplatesRoute && "shell-active-pill"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-icon", children: /* @__PURE__ */ jsx(
+                  LayoutTemplate,
+                  {
+                    size: ROUTE_MENU_ICON_SIZE,
+                    strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-label", children: "Message templates" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: VOICE_AGENT_HREF,
+              title: "Voice agent",
+              "aria-label": "Voice agent",
+              "aria-current": isVoiceRoute ? "page" : void 0,
+              className: cn(
+                ROUTE_MENU_NAV_ITEM_CLASS,
+                isVoiceRoute && "shell-active-pill"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-icon", children: /* @__PURE__ */ jsx(
+                  Mic,
+                  {
+                    size: ROUTE_MENU_ICON_SIZE,
+                    strokeWidth: ROUTE_MENU_ICON_STROKE_WIDTH
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "shell-nav-label", children: "Voice agent" })
+              ]
+            }
+          ),
+          expanded && /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 flex-col", children: [
+            /* @__PURE__ */ jsx(PinnedAgentsSection, { activeAgentId }),
+            /* @__PURE__ */ jsx(
+              ChatHistorySidebar,
+              {
+                scopeId: CHAT_HISTORY_SCOPE,
+                activeConversationId,
+                onOpenConversation: host ? (conversation) => host.openConversation(conversation) : void 0,
+                openInPlace: !!host,
+                surfaceId: "chat",
+                hideSearchAffordance: true,
+                className: "bg-transparent min-h-0 flex-1"
+              }
+            )
+          ] })
+        ]
+      }
     )
   );
 }

package/dist/agents/components/chat/ConversationAttachmentsChip.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge, Button } from "@ai-matrx/design-system/controls";
 import { useState } from "react";
 import { AlertTriangle, ExternalLink, Paperclip } from "lucide-react";
@@ -23,37 +24,60 @@ function ConversationAttachmentsChip({
   });
   const items = attachments.items;
   if (items.length === 0 && attachments.status !== "failed") return null;
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      "data-conversation-attachments-trigger": true,
-      "aria-label": `Attached to this chat: ${items.length} item${items.length === 1 ? "" : "s"}`,
-      className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
-    },
-    /* @__PURE__ */ React.createElement(Paperclip, { className: "h-4 w-4", "aria-hidden": true }),
-    /* @__PURE__ */ React.createElement("span", { className: "hidden sm:inline" }, "Attached"),
-    items.length > 0 && /* @__PURE__ */ React.createElement(Badge, { tone: "primary" }, items.length),
-    attachments.status === "failed" && /* @__PURE__ */ React.createElement(
-      AlertTriangle,
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
       {
-        className: "h-3.5 w-3.5 text-amber-500",
-        "aria-hidden": true
+        type: "button",
+        "data-conversation-attachments-trigger": true,
+        "aria-label": `Attached to this chat: ${items.length} item${items.length === 1 ? "" : "s"}`,
+        className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Attached" }),
+          items.length > 0 && /* @__PURE__ */ jsx(Badge, { tone: "primary", children: items.length }),
+          attachments.status === "failed" && /* @__PURE__ */ jsx(
+            AlertTriangle,
+            {
+              className: "h-3.5 w-3.5 text-amber-500",
+              "aria-hidden": true
+            }
+          )
+        ]
       }
-    )
-  )), /* @__PURE__ */ React.createElement(PopoverContent, { sizing: "content", align: "end", className: "p-3" }, /* @__PURE__ */ React.createElement("div", { className: "mb-2 text-sm font-semibold text-foreground" }, "Attached to this chat"), attachments.status === "failed" && /* @__PURE__ */ React.createElement("p", { className: "mb-2 flex items-start gap-1.5 text-xs text-amber-700 dark:text-amber-300" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ React.createElement("span", null, attachments.error, " ", /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: attachments.reload }, "Try again"), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: attachments.error }))), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-1" }, items.map((item) => /* @__PURE__ */ React.createElement("li", { key: attachmentKey(item) }, item.link ? /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      href: item.link,
-      target: "_blank",
-      rel: "noreferrer",
-      "aria-label": `Open ${item.display_name}`,
-      className: "flex items-center gap-2 rounded px-1.5 py-1 text-xs hover:bg-accent"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground" }, item.display_name),
-    /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-[11px] text-muted-foreground" }, item.pending ? "attaching" : item.provider),
-    /* @__PURE__ */ React.createElement(ExternalLink, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
-  ) : /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2 px-1.5 py-1 text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground" }, item.display_name), /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-[11px] text-muted-foreground" }, item.pending ? "attaching" : item.provider))))), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-[11px] leading-tight text-muted-foreground" }, "Edit these in the Connections line under the message box")));
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { sizing: "content", align: "end", className: "p-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-semibold text-foreground", children: "Attached to this chat" }),
+      attachments.status === "failed" && /* @__PURE__ */ jsxs("p", { className: "mb-2 flex items-start gap-1.5 text-xs text-amber-700 dark:text-amber-300", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          attachments.error,
+          " ",
+          /* @__PURE__ */ jsx(Button, { variant: "link", onClick: attachments.reload, children: "Try again" }),
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: attachments.error })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: item.link ? /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: item.link,
+          target: "_blank",
+          rel: "noreferrer",
+          "aria-label": `Open ${item.display_name}`,
+          className: "flex items-center gap-2 rounded px-1.5 py-1 text-xs hover:bg-accent",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: item.display_name }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: item.pending ? "attaching" : item.provider }),
+            /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 px-1.5 py-1 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: item.display_name }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: item.pending ? "attaching" : item.provider })
+      ] }) }, attachmentKey(item))) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] leading-tight text-muted-foreground", children: "Edit these in the Connections line under the message box" })
+    ] })
+  ] });
 }
 export {
   ConversationAttachmentsChip

package/dist/agents/components/chat/ConversationPageMenu.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@ai-matrx/design-system/controls";
 import { useRef } from "react";
 import { ClipboardCopy, Download, MoreHorizontal, Pin, Search, Send, Share, X } from "lucide-react";
@@ -146,44 +147,47 @@ function ConversationPageMenu({
     dispatch,
     onRename: () => openConversationRename(conversationId, title)
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, pinnedOnly && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      variant: "quiet",
-      tone: "warning",
-      className: "shrink-0",
-      onClick: () => setConversationPinnedOnly(conversationId, false),
-      "aria-label": "Showing pinned messages only \u2014 show all messages",
-      title: "Show all messages",
-      icon: /* @__PURE__ */ React.createElement(Pin, { "aria-hidden": "true" }),
-      iconEnd: /* @__PURE__ */ React.createElement(X, { "aria-hidden": "true" })
-    },
-    /* @__PURE__ */ React.createElement(
-      UntrustedCount,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    pinnedOnly && /* @__PURE__ */ jsx(
+      Button,
       {
-        className: "tabular-nums",
-        trustworthy: !pinsReadFailed,
-        label: "Pinned messages",
-        value: pinnedCount
+        type: "button",
+        variant: "quiet",
+        tone: "warning",
+        className: "shrink-0",
+        onClick: () => setConversationPinnedOnly(conversationId, false),
+        "aria-label": "Showing pinned messages only \u2014 show all messages",
+        title: "Show all messages",
+        icon: /* @__PURE__ */ jsx(Pin, { "aria-hidden": "true" }),
+        iconEnd: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+        children: /* @__PURE__ */ jsx(
+          UntrustedCount,
+          {
+            className: "tabular-nums",
+            trustworthy: !pinsReadFailed,
+            label: "Pinned messages",
+            value: pinnedCount
+          }
+        )
       }
-    )
-  ), /* @__PURE__ */ React.createElement(
-    ItemMenu,
-    {
-      config: {
-        ...menuConfig,
-        sections: emailSection ? [viewSection, transferSection, emailSection, ...menuConfig.sections] : [viewSection, transferSection, ...menuConfig.sections]
-      },
-      align: "end",
-      onCloseAutoFocus: (event) => {
-        if (!keepFocusOnCloseRef.current) return;
-        keepFocusOnCloseRef.current = false;
-        event.preventDefault();
+    ),
+    /* @__PURE__ */ jsx(
+      ItemMenu,
+      {
+        config: {
+          ...menuConfig,
+          sections: emailSection ? [viewSection, transferSection, emailSection, ...menuConfig.sections] : [viewSection, transferSection, ...menuConfig.sections]
+        },
+        align: "end",
+        onCloseAutoFocus: (event) => {
+          if (!keepFocusOnCloseRef.current) return;
+          keepFocusOnCloseRef.current = false;
+          event.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}), "aria-label": "Conversation actions", title: "Conversation actions", className: "shrink-0" })
       }
-    },
-    /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(MoreHorizontal, null), "aria-label": "Conversation actions", title: "Conversation actions", className: "shrink-0" })
-  ));
+    )
+  ] });
 }
 ConversationPageMenu.routeHeaderMenu = true;
 var ConversationPageMenu_default = ConversationPageMenu;