@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/components/message-actions/MessageActions.js

@@ -1,163 +1,175 @@
 import { jsxs as o, Fragment as l, jsx as a } from "react/jsx-runtime";
-import c from "../emoji/Emoji.js";
+import t from "../emoji/Emoji.js";
 import i from "../icon-button/IconButton.js";
 import e from "../icon/Icon.js";
-import __R from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const R=__R&&__R.default?__R.default:__R;
-import __t from "@mattermost/compass-icons/components/dots-horizontal.js";const t=__t&&__t.default?__t.default:__t;
-import __m from "@mattermost/compass-icons/components/bookmark-outline.js";const m=__m&&__m.default?__m.default:__m;
-import __j from "@mattermost/compass-icons/components/creation-outline.js";const j=__j&&__j.default?__j.default:__j;
-import __M from "@mattermost/compass-icons/components/apps.js";const M=__M&&__M.default?__M.default:__M;
-import __p from "@mattermost/compass-icons/components/reply-outline.js";const p=__p&&__p.default?__p.default:__p;
-import d from "./MessageActions.module.scss.js";
-function J({
+import __H from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const H=__H&&__H.default?__H.default:__H;
+import __r from "@mattermost/compass-icons/components/dots-horizontal.js";const r=__r&&__r.default?__r.default:__r;
+import __g from "@mattermost/compass-icons/components/bookmark-outline.js";const g=__g&&__g.default?__g.default:__g;
+import __J from "@mattermost/compass-icons/components/creation-outline.js";const J=__J&&__J.default?__J.default:__J;
+import __N from "@mattermost/compass-icons/components/apps.js";const N=__N&&__N.default?__N.default:__N;
+import __h from "@mattermost/compass-icons/components/reply-outline.js";const h=__h&&__h.default?__h.default:__h;
+import z from "./MessageActions.module.scss.js";
+function V({
   type: s = "center-channel",
-  visible: g = !0,
-  collapsedReplyThreads: h = !0,
-  quickReactions: z = !0,
-  className: u = "",
-  ...b
+  visible: u = !0,
+  collapsedReplyThreads: b = !0,
+  quickReactions: f = !0,
+  className: y = "",
+  toolbarLabel: I = "Message actions",
+  reactThumbsUpLabel: j = "React with thumbs up",
+  reactRaisedHandsLabel: R = "React with raised hands",
+  reactOkHandLabel: O = "React with OK hand",
+  addReactionLabel: w = "Add reaction",
+  moreActionsLabel: n = "More actions",
+  saveLabel: m = "Save message",
+  aiActionsLabel: C = "AI actions",
+  pluginActionsLabel: k = "Plugin actions",
+  replyLabel: p = "Reply in thread",
+  jumpLabel: x = "Jump",
+  jumpAriaLabel: B = "Jump to message",
+  ...M
 }) {
-  if (!g) return null;
-  const r = s === "center-channel", f = s === "rhs", n = s === "search-results", y = z && h, I = [d["message-actions"], u].filter(Boolean).join(" ");
+  if (!u) return null;
+  const d = s === "center-channel", S = s === "rhs", c = s === "search-results", A = f && b, E = [z["message-actions"], y].filter(Boolean).join(" ");
   return /* @__PURE__ */ o(
     "div",
     {
-      className: I,
+      className: E,
       role: "toolbar",
-      "aria-label": "Message actions",
-      ...b,
+      "aria-label": I,
+      ...M,
       children: [
-        y && !n && /* @__PURE__ */ o(l, { children: [
+        A && !c && /* @__PURE__ */ o(l, { children: [
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "React with thumbs up",
+              "aria-label": j,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(c, { emoji: "👍", size: "16" })
+              icon: /* @__PURE__ */ a(t, { emoji: "👍", size: "16" })
             }
           ),
-          r && /* @__PURE__ */ o(l, { children: [
+          d && /* @__PURE__ */ o(l, { children: [
             /* @__PURE__ */ a(
               i,
               {
-                "aria-label": "React with raised hands",
+                "aria-label": R,
                 size: "small",
                 padding: "compact",
-                icon: /* @__PURE__ */ a(c, { emoji: "🙌", size: "16" })
+                icon: /* @__PURE__ */ a(t, { emoji: "🙌", size: "16" })
               }
             ),
             /* @__PURE__ */ a(
               i,
               {
-                "aria-label": "React with OK hand",
+                "aria-label": O,
                 size: "small",
                 padding: "compact",
-                icon: /* @__PURE__ */ a(c, { emoji: "👌", size: "16" })
+                icon: /* @__PURE__ */ a(t, { emoji: "👌", size: "16" })
               }
             )
           ] }),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Add reaction",
+              "aria-label": w,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(R, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(H, {}) })
             }
           )
         ] }),
-        n && /* @__PURE__ */ a(
+        c && /* @__PURE__ */ a(
           i,
           {
-            "aria-label": "More actions",
+            "aria-label": n,
             size: "small",
             padding: "compact",
-            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(t, {}) })
+            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(r, {}) })
           }
         ),
-        r && /* @__PURE__ */ o(l, { children: [
+        d && /* @__PURE__ */ o(l, { children: [
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Save message",
+              "aria-label": m,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(m, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(g, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "AI actions",
+              "aria-label": C,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(j, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(J, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Plugin actions",
+              "aria-label": k,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(M, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(N, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Reply in thread",
+              "aria-label": p,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(p, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(h, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "More actions",
+              "aria-label": n,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(t, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(r, {}) })
             }
           )
         ] }),
-        f && /* @__PURE__ */ a(
+        S && /* @__PURE__ */ a(
           i,
           {
-            "aria-label": "More actions",
+            "aria-label": n,
             size: "small",
             padding: "compact",
-            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(t, {}) })
+            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(r, {}) })
           }
         ),
-        n && /* @__PURE__ */ o(l, { children: [
+        c && /* @__PURE__ */ o(l, { children: [
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Save message",
+              "aria-label": m,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(m, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(g, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Reply in thread",
+              "aria-label": p,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(p, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(h, {}) })
             }
           ),
           /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              className: d["message-actions__jump"],
-              "aria-label": "Jump to message",
-              children: "Jump"
+              className: z["message-actions__jump"],
+              "aria-label": B,
+              children: x
             }
           )
         ] })
@@ -166,6 +178,6 @@ function J({
   );
 }
 export {
-  J as default
+  V as default
 };
 //# sourceMappingURL=MessageActions.js.map

package/dist/components/message-actions/MessageActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageActions.js","sources":["../../../src/components/message-actions/MessageActions.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Emoji from '@/components/emoji/Emoji';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport AppsIcon from '@mattermost/compass-icons/components/apps';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport styles from './MessageActions.module.scss';\n\nexport type MessageActionsType = 'center-channel' | 'rhs' | 'search-results';\n\nexport interface MessageActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Context variant. Default: Center Channel. */\n  type?: MessageActionsType;\n  /** Whether the hover toolbar is visible. Default: true. */\n  visible?: boolean;\n  /** Whether collapsed reply threads feature is on. Default: true. */\n  collapsedReplyThreads?: boolean;\n  /** Whether quick reactions are shown. Default: true. */\n  quickReactions?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Message Actions is the floating toolbar that appears on a message when you hover, tab, or\n * long-press it. It bundles the most common per-message actions — react, save, reply, more —\n * into a small, context-aware row that hovers above the post.\n */\nexport default function MessageActions({\n  type = 'center-channel',\n  visible = true,\n  collapsedReplyThreads = true,\n  quickReactions = true,\n  className = '',\n  ...rest\n}: MessageActionsProps) {\n  if (!visible) return null;\n\n  const isCenterChannel = type === 'center-channel';\n  const isRHS = type === 'rhs';\n  const isSearchResults = type === 'search-results';\n  const showQuickReactions = quickReactions && collapsedReplyThreads;\n\n  const rootClass = [styles['message-actions'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"toolbar\"\n      aria-label=\"Message actions\"\n      {...rest}\n    >\n      {/* Quick reaction emojis — center channel + RHS */}\n      {showQuickReactions && !isSearchResults && (\n        <>\n          <IconButton\n            aria-label=\"React with thumbs up\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Emoji emoji=\"👍\" size=\"16\" />}\n          />\n          {isCenterChannel && (\n            <>\n              <IconButton\n                aria-label=\"React with raised hands\"\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"🙌\" size=\"16\" />}\n              />\n              <IconButton\n                aria-label=\"React with OK hand\"\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"👌\" size=\"16\" />}\n              />\n            </>\n          )}\n          <IconButton\n            aria-label=\"Add reaction\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        </>\n      )}\n\n      {/* Search results only: more button first */}\n      {isSearchResults && (\n        <IconButton\n          aria-label=\"More actions\"\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Center channel actions */}\n      {isCenterChannel && (\n        <>\n          <IconButton\n            aria-label=\"Save message\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"AI actions\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<CreationOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"Plugin actions\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<AppsIcon />} />}\n          />\n          <IconButton\n            aria-label=\"Reply in thread\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"More actions\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n          />\n        </>\n      )}\n\n      {/* RHS actions */}\n      {isRHS && (\n        <IconButton\n          aria-label=\"More actions\"\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Search results additional buttons */}\n      {isSearchResults && (\n        <>\n          <IconButton\n            aria-label=\"Save message\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"Reply in thread\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <button\n            type=\"button\"\n            className={styles['message-actions__jump']}\n            aria-label=\"Jump to message\"\n          >\n            Jump\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["MessageActions","type","visible","collapsedReplyThreads","quickReactions","className","rest","isCenterChannel","isRHS","isSearchResults","showQuickReactions","rootClass","styles","jsxs","Fragment","jsx","IconButton","Emoji","Icon","EmoticonPlusOutlineIcon","DotsHorizontalIcon","BookmarkOutlineIcon","CreationOutlineIcon","AppsIcon","ReplyOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"MessageActions.js","sources":["../../../src/components/message-actions/MessageActions.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Emoji from '@/components/emoji/Emoji';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport AppsIcon from '@mattermost/compass-icons/components/apps';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport styles from './MessageActions.module.scss';\n\nexport type MessageActionsType = 'center-channel' | 'rhs' | 'search-results';\n\nexport interface MessageActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Context variant. Default: Center Channel. */\n  type?: MessageActionsType;\n  /** Whether the hover toolbar is visible. Default: true. */\n  visible?: boolean;\n  /** Whether collapsed reply threads feature is on. Default: true. */\n  collapsedReplyThreads?: boolean;\n  /** Whether quick reactions are shown. Default: true. */\n  quickReactions?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Accessible name for the toolbar. Default: \"Message actions\". An explicit `aria-label` still wins. */\n  toolbarLabel?: string;\n  /** Default: \"React with thumbs up\". */\n  reactThumbsUpLabel?: string;\n  /** Default: \"React with raised hands\". */\n  reactRaisedHandsLabel?: string;\n  /** Default: \"React with OK hand\". */\n  reactOkHandLabel?: string;\n  /** Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Default: \"More actions\". */\n  moreActionsLabel?: string;\n  /** Default: \"Save message\". */\n  saveLabel?: string;\n  /** Default: \"AI actions\". */\n  aiActionsLabel?: string;\n  /** Default: \"Plugin actions\". */\n  pluginActionsLabel?: string;\n  /** Default: \"Reply in thread\". */\n  replyLabel?: string;\n  /** Visible Jump button text (search results). Default: \"Jump\". */\n  jumpLabel?: ReactNode;\n  /** Accessible name for the Jump button. Default: \"Jump to message\". */\n  jumpAriaLabel?: string;\n}\n\n/**\n * Message Actions is the floating toolbar that appears on a message when you hover, tab, or\n * long-press it. It bundles the most common per-message actions — react, save, reply, more —\n * into a small, context-aware row that hovers above the post.\n */\nexport default function MessageActions({\n  type = 'center-channel',\n  visible = true,\n  collapsedReplyThreads = true,\n  quickReactions = true,\n  className = '',\n  toolbarLabel = 'Message actions',\n  reactThumbsUpLabel = 'React with thumbs up',\n  reactRaisedHandsLabel = 'React with raised hands',\n  reactOkHandLabel = 'React with OK hand',\n  addReactionLabel = 'Add reaction',\n  moreActionsLabel = 'More actions',\n  saveLabel = 'Save message',\n  aiActionsLabel = 'AI actions',\n  pluginActionsLabel = 'Plugin actions',\n  replyLabel = 'Reply in thread',\n  jumpLabel = 'Jump',\n  jumpAriaLabel = 'Jump to message',\n  ...rest\n}: MessageActionsProps) {\n  if (!visible) return null;\n\n  const isCenterChannel = type === 'center-channel';\n  const isRHS = type === 'rhs';\n  const isSearchResults = type === 'search-results';\n  const showQuickReactions = quickReactions && collapsedReplyThreads;\n\n  const rootClass = [styles['message-actions'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"toolbar\"\n      aria-label={toolbarLabel}\n      {...rest}\n    >\n      {/* Quick reaction emojis — center channel + RHS */}\n      {showQuickReactions && !isSearchResults && (\n        <>\n          <IconButton\n            aria-label={reactThumbsUpLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Emoji emoji=\"👍\" size=\"16\" />}\n          />\n          {isCenterChannel && (\n            <>\n              <IconButton\n                aria-label={reactRaisedHandsLabel}\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"🙌\" size=\"16\" />}\n              />\n              <IconButton\n                aria-label={reactOkHandLabel}\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"👌\" size=\"16\" />}\n              />\n            </>\n          )}\n          <IconButton\n            aria-label={addReactionLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        </>\n      )}\n\n      {/* Search results only: more button first */}\n      {isSearchResults && (\n        <IconButton\n          aria-label={moreActionsLabel}\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Center channel actions */}\n      {isCenterChannel && (\n        <>\n          <IconButton\n            aria-label={saveLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={aiActionsLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<CreationOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={pluginActionsLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<AppsIcon />} />}\n          />\n          <IconButton\n            aria-label={replyLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={moreActionsLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n          />\n        </>\n      )}\n\n      {/* RHS actions */}\n      {isRHS && (\n        <IconButton\n          aria-label={moreActionsLabel}\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Search results additional buttons */}\n      {isSearchResults && (\n        <>\n          <IconButton\n            aria-label={saveLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={replyLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <button\n            type=\"button\"\n            className={styles['message-actions__jump']}\n            aria-label={jumpAriaLabel}\n          >\n            {jumpLabel}\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["MessageActions","type","visible","collapsedReplyThreads","quickReactions","className","toolbarLabel","reactThumbsUpLabel","reactRaisedHandsLabel","reactOkHandLabel","addReactionLabel","moreActionsLabel","saveLabel","aiActionsLabel","pluginActionsLabel","replyLabel","jumpLabel","jumpAriaLabel","rest","isCenterChannel","isRHS","isSearchResults","showQuickReactions","rootClass","styles","jsxs","Fragment","jsx","IconButton","Emoji","Icon","EmoticonPlusOutlineIcon","DotsHorizontalIcon","BookmarkOutlineIcon","CreationOutlineIcon","AppsIcon","ReplyOutlineIcon"],"mappings":";;;;;;;;;;;AAwDA,SAAwBA,EAAe;AAAA,EACrC,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,uBAAAC,IAAwB;AAAA,EACxB,gBAAAC,IAAiB;AAAA,EACjB,WAAAC,IAAY;AAAA,EACZ,cAAAC,IAAe;AAAA,EACf,oBAAAC,IAAqB;AAAA,EACrB,uBAAAC,IAAwB;AAAA,EACxB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,oBAAAC,IAAqB;AAAA,EACrB,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,GAAGC;AACL,GAAwB;AACtB,MAAI,CAAChB,EAAS,QAAO;AAErB,QAAMiB,IAAkBlB,MAAS,kBAC3BmB,IAAQnB,MAAS,OACjBoB,IAAkBpB,MAAS,kBAC3BqB,IAAqBlB,KAAkBD,GAEvCoB,IAAY,CAACC,EAAO,iBAAiB,GAAGnB,CAAS,EACpD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAYjB;AAAA,MACX,GAAGY;AAAA,MAGH,UAAA;AAAA,QAAAI,KAAsB,CAACD,KACtB,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYrB;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAM,gBAAAoB,EAACE,GAAA,EAAM,OAAM,MAAK,MAAK,KAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEnCV,KACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,cAAYpB;AAAA,gBACZ,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,MAAM,gBAAAmB,EAACE,GAAA,EAAM,OAAM,MAAK,MAAK,KAAA,CAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAEpC,gBAAAF;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,cAAYnB;AAAA,gBACZ,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,MAAM,gBAAAkB,EAACE,GAAA,EAAM,OAAM,MAAK,MAAK,KAAA,CAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACpC,GACF;AAAA,UAEF,gBAAAF;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYlB;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOoB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACI,KAAwB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5D,GACF;AAAA,QAIDV,KACC,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,cAAYjB;AAAA,YACZ,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,wBAAOmB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACK,KAAmB,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAKxDb,KACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYhB;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOkB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACM,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAExD,gBAAAN;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYf;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOiB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACO,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAExD,gBAAAP;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYd;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOgB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACQ,KAAS,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAE7C,gBAAAR;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYb;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOe,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACS,KAAiB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAErD,gBAAAT;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYjB;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOmB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACK,KAAmB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QACvD,GACF;AAAA,QAIDZ,KACC,gBAAAO;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,cAAYjB;AAAA,YACZ,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,wBAAOmB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACK,KAAmB,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAKxDX,KACC,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYhB;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOkB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACM,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAExD,gBAAAN;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,cAAYb;AAAA,cACZ,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,wBAAOe,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAH,EAACS,KAAiB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAErD,gBAAAT;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWH,EAAO,uBAAuB;AAAA,cACzC,cAAYP;AAAA,cAEX,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/message-actions/MessageActions.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageActions.module.css');const e={"message-actions":"_message-actions_1ie92_2","message-actions__jump":"_message-actions__jump_1ie92_12"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageActions.css');const e={"message-actions":"_message-actions_cohnb_13","message-actions__jump":"_message-actions__jump_cohnb_23"};exports.default=e;
 //# sourceMappingURL=MessageActions.module.scss.cjs.map

package/dist/components/message-actions/MessageActions.module.scss.js

@@ -1,6 +1,6 @@
-import './MessageActions.module.css';const s = {
-  "message-actions": "_message-actions_1ie92_2",
-  "message-actions__jump": "_message-actions__jump_1ie92_12"
+import './MessageActions.css';const s = {
+  "message-actions": "_message-actions_cohnb_13",
+  "message-actions__jump": "_message-actions__jump_cohnb_23"
 };
 export {
   s as default

package/dist/components/message-actions/index.d.ts

@@ -1,3 +1,3 @@
 export { default as MessageActions } from './MessageActions';
-export type { MessageActionsProps, MessageActionsType, } from './MessageActions';
+export type { MessageActionsProps, MessageActionsType } from './MessageActions';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/message-actions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/message-actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/message-actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/message-header/MessageHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.cjs","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: string;\n  timestamp: string;\n  isBot?: boolean;\n  botLabel?: string;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":"0NAeA,SAAwBA,EAAc,CACpC,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,GACR,SAAAC,EAAW,KACb,EAAuB,CACrB,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,gBAAgB,EACrC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,0BAA0B,EAAI,SAAAL,EAAS,EAC9DE,GAASI,EAAAA,IAACC,EAAAA,QAAA,CAAI,MAAOJ,CAAA,CAAU,QAC/B,OAAA,CAAK,UAAWE,EAAAA,QAAO,2BAA2B,EAAI,SAAAJ,CAAA,CAAU,CAAA,EACnE,CAEJ"}
+{"version":3,"file":"MessageHeader.cjs","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: ReactNode;\n  timestamp: ReactNode;\n  isBot?: boolean;\n  /** Default: \"Bot\". Accepts translated nodes. */\n  botLabel?: ReactNode;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":"0NAiBA,SAAwBA,EAAc,CACpC,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,GACR,SAAAC,EAAW,KACb,EAAuB,CACrB,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,gBAAgB,EACrC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,0BAA0B,EAAI,SAAAL,EAAS,EAC9DE,GAASI,EAAAA,IAACC,EAAAA,QAAA,CAAI,MAAOJ,CAAA,CAAU,QAC/B,OAAA,CAAK,UAAWE,EAAAA,QAAO,2BAA2B,EAAI,SAAAJ,CAAA,CAAU,CAAA,EACnE,CAEJ"}

package/dist/components/message-header/MessageHeader.css

@@ -0,0 +1 @@
+._message-header_ymfb7_13{display:flex;align-items:center;gap:var(--spacing-xxs)}._message-header_ymfb7_13>*{align-self:center}._message-header__username_ymfb7_21{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);white-space:nowrap}._message-header__timestamp_ymfb7_29{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.56);white-space:nowrap}

package/dist/components/message-header/MessageHeader.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 type MessageHeaderProps = {
-    username: string;
-    timestamp: string;
+    username: ReactNode;
+    timestamp: ReactNode;
     isBot?: boolean;
-    botLabel?: string;
+    /** Default: "Bot". Accepts translated nodes. */
+    botLabel?: ReactNode;
 };
 /**
  * The Message Header sits above every message body — username, optional bot or guest tag,

package/dist/components/message-header/MessageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message-header/MessageHeader.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,KAAa,EACb,QAAgB,GACjB,EAAE,kBAAkB,2CAQpB"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message-header/MessageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,KAAa,EACb,QAAgB,GACjB,EAAE,kBAAkB,2CAQpB"}

package/dist/components/message-header/MessageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.js","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: string;\n  timestamp: string;\n  isBot?: boolean;\n  botLabel?: string;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":";;;AAeA,SAAwBA,EAAc;AAAA,EACpC,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AACb,GAAuB;AACrB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,gBAAgB,GACrC,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,0BAA0B,GAAI,UAAAL,GAAS;AAAA,IAC9DE,KAAS,gBAAAI,EAACC,GAAA,EAAI,OAAOJ,EAAA,CAAU;AAAA,sBAC/B,QAAA,EAAK,WAAWE,EAAO,2BAA2B,GAAI,UAAAJ,EAAA,CAAU;AAAA,EAAA,GACnE;AAEJ;"}
+{"version":3,"file":"MessageHeader.js","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: ReactNode;\n  timestamp: ReactNode;\n  isBot?: boolean;\n  /** Default: \"Bot\". Accepts translated nodes. */\n  botLabel?: ReactNode;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":";;;AAiBA,SAAwBA,EAAc;AAAA,EACpC,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AACb,GAAuB;AACrB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,gBAAgB,GACrC,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,0BAA0B,GAAI,UAAAL,GAAS;AAAA,IAC9DE,KAAS,gBAAAI,EAACC,GAAA,EAAI,OAAOJ,EAAA,CAAU;AAAA,sBAC/B,QAAA,EAAK,WAAWE,EAAO,2BAA2B,GAAI,UAAAJ,EAAA,CAAU;AAAA,EAAA,GACnE;AAEJ;"}

package/dist/components/message-header/MessageHeader.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageHeader.module.css');const e={"message-header":"_message-header_1u3ox_2","message-header__username":"_message-header__username_1u3ox_10","message-header__timestamp":"_message-header__timestamp_1u3ox_18"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageHeader.css');const e={"message-header":"_message-header_ymfb7_13","message-header__username":"_message-header__username_ymfb7_21","message-header__timestamp":"_message-header__timestamp_ymfb7_29"};exports.default=e;
 //# sourceMappingURL=MessageHeader.module.scss.cjs.map

package/dist/components/message-header/MessageHeader.module.scss.js

@@ -1,7 +1,7 @@
-import './MessageHeader.module.css';const e = {
-  "message-header": "_message-header_1u3ox_2",
-  "message-header__username": "_message-header__username_1u3ox_10",
-  "message-header__timestamp": "_message-header__timestamp_1u3ox_18"
+import './MessageHeader.css';const e = {
+  "message-header": "_message-header_ymfb7_13",
+  "message-header__username": "_message-header__username_ymfb7_21",
+  "message-header__timestamp": "_message-header__timestamp_ymfb7_29"
 };
 export {
   e as default

package/dist/components/message-separator/MessageSeparator.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../icon/Icon.cjs"),__c=require("@mattermost/compass-icons/components/creation-outline.js"),c=__c?.default??__c,a=require("./MessageSeparator.module.scss.cjs"),g={date:"Today","new-messages":"new-messages","reply-count":"4 replies"};function p({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,className:n="",...d}){const o=t??g[s],u=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],n].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:o}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":"Summarize new messages with AI",children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(m.default,{size:"12",glyph:e.jsx(c,{})})}),"Summarize"]})]});return e.jsx("div",{className:u,role:"separator",...d,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("../icon/Icon.cjs"),__p=require("@mattermost/compass-icons/components/creation-outline.js"),p=__p?.default??__p,a=require("./MessageSeparator.module.scss.cjs"),_={date:"Today","new-messages":"New messages","reply-count":"4 replies"};function f({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,summarizeLabel:n="Summarize",summarizeAriaLabel:d="Summarize new messages with AI",className:o="",...u}){const m=t??_[s],c=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],o].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:m}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":d,children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(g.default,{size:"12",glyph:e.jsx(p,{})})}),n]})]});return e.jsx("div",{className:c,role:"separator",...u,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=f;
 //# sourceMappingURL=MessageSeparator.cjs.map

package/dist/components/message-separator/MessageSeparator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'new-messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAC9C,SAAAF,EACH,EAECN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,iCAAiC,EAAG,cAAW,GACpE,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,EAAG,EACjE,EACCC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}
+{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. Accepts translated nodes. */\n  label?: ReactNode;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Visible Summarize button text. Default: \"Summarize\". */\n  summarizeLabel?: ReactNode;\n  /** Accessible name for the Summarize button. Default: \"Summarize new messages with AI\". */\n  summarizeAriaLabel?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  summarizeLabel = 'Summarize',\n  summarizeAriaLabel = 'Summarize new messages with AI',\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label={summarizeAriaLabel}\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          {summarizeLabel}\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","summarizeLabel","summarizeAriaLabel","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAwBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,eAAAC,EAAiB,YACjB,mBAAAC,EAAqB,iCACrB,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeP,GAASH,EAAeE,CAAI,EAE3CS,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBV,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAM,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAAI,SAAAF,EAAa,EAEjER,IAAS,gBAAkBE,GAC1BU,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASP,EACT,aAAYE,EAEZ,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAEjDX,CAAA,CAAA,CAAA,CACH,EAEJ,EAGF,OACES,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAP,IAAS,cACRY,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,iCAAiC,EACnD,cAAW,GAEX,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,CAAA,CAAG,CAAA,CAAA,EAEhEC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}

package/dist/components/message-separator/MessageSeparator.css

@@ -0,0 +1 @@
+@charset "UTF-8";._message-separator_2us0g_14{display:flex;align-items:center;gap:var(--spacing-m);padding:var(--spacing-xxxs) 0;width:100%}._message-separator__line_2us0g_21{flex:1 0 0;min-width:4px;height:1px;background-color:rgba(var(--center-channel-color-rgb),.12)}._message-separator__label_2us0g_27{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}._message-separator__text_2us0g_33{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);white-space:nowrap}._message-separator__summarize_2us0g_41{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--color-warning-rgb),.08);color:var(--new-message-separator, var(--color-warning));font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-transition)}._message-separator__summarize_2us0g_41:hover{background-color:rgba(var(--color-warning-rgb),.14)}._message-separator__summarize_2us0g_41:focus-visible{outline:2px solid var(--new-message-separator, var(--color-warning));outline-offset:1px}._message-separator__summarize-icon_2us0g_65{display:inline-flex;align-items:center;flex-shrink:0}._message-separator__reply-gutter_2us0g_73{display:flex;flex-shrink:0;align-items:center;width:var(--icon-size-32)}._message-separator__reply-line-start_2us0g_79{width:100%;height:1px;background-color:rgba(var(--center-channel-color-rgb),.12)}._message-separator--date_2us0g_84 ._message-separator__text_2us0g_33{color:var(--center-channel-color)}._message-separator--new_2us0g_87 ._message-separator__line_2us0g_21{background-color:var(--new-message-separator, var(--color-warning))}._message-separator--new_2us0g_87 ._message-separator__text_2us0g_33{color:var(--new-message-separator, var(--color-warning))}._message-separator--reply_2us0g_93{padding:var(--spacing-xxxs) var(--spacing-xxl)}

package/dist/components/message-separator/MessageSeparator.d.ts

@@ -1,14 +1,18 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';
 export interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {
     /** Separator variant. Default: Date. */
     type?: MessageSeparatorType;
-    /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */
-    label?: string;
+    /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. Accepts translated nodes. */
+    label?: ReactNode;
     /** Show AI summarize button (New Messages type only). Default: false. */
     showAiSummary?: boolean;
     /** Called when Summarize button is clicked. */
     onSummarize?: () => void;
+    /** Visible Summarize button text. Default: "Summarize". */
+    summarizeLabel?: ReactNode;
+    /** Accessible name for the Summarize button. Default: "Summarize new messages with AI". */
+    summarizeAriaLabel?: string;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -17,5 +21,5 @@ export interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {
  * count, or to mark the boundary between read and unread. They help readers orient
  * themselves when scrolling back through history or returning to a busy channel.
  */
-export default function MessageSeparator({ type, label, showAiSummary, onSummarize, className, ...rest }: MessageSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export default function MessageSeparator({ type, label, showAiSummary, onSummarize, summarizeLabel, summarizeAriaLabel, className, ...rest }: MessageSeparatorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MessageSeparator.d.ts.map

package/dist/components/message-separator/MessageSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAa,EACb,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAyDvB"}
+{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,8FAA8F;IAC9F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2FAA2F;IAC3F,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAa,EACb,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,cAA4B,EAC5B,kBAAqD,EACrD,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CA0DvB"}

package/dist/components/message-separator/MessageSeparator.js

@@ -1,49 +1,58 @@
 import { jsx as a, jsxs as r, Fragment as i } from "react/jsx-runtime";
-import g from "../icon/Icon.js";
-import __u from "@mattermost/compass-icons/components/creation-outline.js";const u=__u&&__u.default?__u.default:__u;
+import _ from "../icon/Icon.js";
+import __h from "@mattermost/compass-icons/components/creation-outline.js";const h=__h&&__h.default?__h.default:__h;
 import e from "./MessageSeparator.module.scss.js";
-const _ = {
+const N = {
   date: "Today",
-  "new-messages": "new-messages",
+  "new-messages": "New messages",
   "reply-count": "4 replies"
 };
-function w({
+function b({
   type: s = "date",
   label: l,
   showAiSummary: n = !1,
   onSummarize: o,
-  className: m = "",
-  ...c
+  summarizeLabel: m = "Summarize",
+  summarizeAriaLabel: c = "Summarize new messages with AI",
+  className: d = "",
+  ...p
 }) {
-  const d = l ?? _[s], p = [
+  const g = l ?? N[s], u = [
     e["message-separator"],
     e[`message-separator--${s === "new-messages" ? "new" : s === "reply-count" ? "reply" : "date"}`],
-    m
+    d
   ].filter(Boolean).join(" "), t = /* @__PURE__ */ r("div", { className: e["message-separator__label"], children: [
-    /* @__PURE__ */ a("span", { className: e["message-separator__text"], children: d }),
+    /* @__PURE__ */ a("span", { className: e["message-separator__text"], children: g }),
     s === "new-messages" && n && /* @__PURE__ */ r(
       "button",
       {
         type: "button",
         className: e["message-separator__summarize"],
         onClick: o,
-        "aria-label": "Summarize new messages with AI",
+        "aria-label": c,
         children: [
           /* @__PURE__ */ a(
             "span",
             {
               className: e["message-separator__summarize-icon"],
               "aria-hidden": !0,
-              children: /* @__PURE__ */ a(g, { size: "12", glyph: /* @__PURE__ */ a(u, {}) })
+              children: /* @__PURE__ */ a(_, { size: "12", glyph: /* @__PURE__ */ a(h, {}) })
             }
           ),
-          "Summarize"
+          m
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ a("div", { className: p, role: "separator", ...c, children: s === "reply-count" ? /* @__PURE__ */ r(i, { children: [
-    /* @__PURE__ */ a("div", { className: e["message-separator__reply-gutter"], "aria-hidden": !0, children: /* @__PURE__ */ a("div", { className: e["message-separator__reply-line-start"] }) }),
+  return /* @__PURE__ */ a("div", { className: u, role: "separator", ...p, children: s === "reply-count" ? /* @__PURE__ */ r(i, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: e["message-separator__reply-gutter"],
+        "aria-hidden": !0,
+        children: /* @__PURE__ */ a("div", { className: e["message-separator__reply-line-start"] })
+      }
+    ),
     t,
     /* @__PURE__ */ a("div", { className: e["message-separator__line"], "aria-hidden": !0 })
   ] }) : /* @__PURE__ */ r(i, { children: [
@@ -53,6 +62,6 @@ function w({
   ] }) });
 }
 export {
-  w as default
+  b as default
 };
 //# sourceMappingURL=MessageSeparator.js.map

package/dist/components/message-separator/MessageSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'new-messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAC9C,UAAAF,GACH;AAAA,IAECN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWH,EAAO,iCAAiC,GAAG,eAAW,IACpE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,GAAG,GACjE;AAAA,IACCC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. Accepts translated nodes. */\n  label?: ReactNode;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Visible Summarize button text. Default: \"Summarize\". */\n  summarizeLabel?: ReactNode;\n  /** Accessible name for the Summarize button. Default: \"Summarize new messages with AI\". */\n  summarizeAriaLabel?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  summarizeLabel = 'Summarize',\n  summarizeAriaLabel = 'Summarize new messages with AI',\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label={summarizeAriaLabel}\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          {summarizeLabel}\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","summarizeLabel","summarizeAriaLabel","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAwBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,oBAAAC,IAAqB;AAAA,EACrB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeP,KAASH,EAAeE,CAAI,GAE3CS,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBV,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAM;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAAI,UAAAF,GAAa;AAAA,IAEjER,MAAS,kBAAkBE,KAC1B,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASP;AAAA,QACT,cAAYE;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEjDX;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAGF,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAP,MAAS,gBACR,gBAAAY,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,iCAAiC;AAAA,QACnD,eAAW;AAAA,QAEX,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhEC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}