@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/Chat/ChatComposerChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposerChip.js","sources":["../../../src/components/Chat/ChatComposerChip.tsx"],"sourcesContent":["import React from 'react';\nimport PillButton from '../PillButton';\n\nexport interface ChatComposerChipProps {\n    label: string;\n    icon?: React.ReactNode;\n    /** Sits after the label — a caret on a chip that opens a menu. */\n    trailingIcon?: React.ReactNode;\n    /** Makes the chip a control. Without it, the chip reports rather than acts. */\n    onClick?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * One item in the row under a composer — a clear action, a model picker, a meter.\n *\n * A `PillButton` in `tab` shape: the row hangs off the bottom edge of the field, so the tops\n * are square and the whole row reads as attached to it rather than floating beneath it.\n */\nconst ChatComposerChip: React.FC<ChatComposerChipProps> = ({\n    label,\n    icon,\n    trailingIcon,\n    onClick,\n    disabled = false,\n    className = '',\n}) => (\n    <PillButton\n        label={label}\n        icon={icon}\n        trailingIcon={trailingIcon}\n        shape=\"tab\"\n        size=\"small\"\n        interactive={Boolean(onClick)}\n        disabled={disabled}\n        onClick={onClick}\n        className={className}\n    />\n);\n\nexport default ChatComposerChip;\nexport { ChatComposerChip };\n"],"names":["ChatComposerChip","label","icon","trailingIcon","onClick","disabled","className","jsx","PillButton"],"mappings":";;AAoBA,MAAMA,IAAoD,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,OAAAP;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAM;AAAA,IACN,MAAK;AAAA,IACL,aAAa,EAAQC;AAAA,IACrB,UAAAC;AAAA,IACA,SAAAD;AAAA,IACA,WAAAE;AAAA,EAAA;AACJ;"}

package/dist/components/Chat/ChatContext.js

@@ -0,0 +1,55 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import c from "../CustomIcons/ArrowUpRightIcon.js";
+import s from "../CustomIcons/PlusIcon.js";
+import { PillButton as p } from "../PillButton.js";
+import { Tag as m } from "../Tag.js";
+import { Typography as f } from "../Typography/index.js";
+const v = ({
+  label: a = "Context",
+  items: l,
+  onAdd: r,
+  className: n = ""
+}) => /* @__PURE__ */ i("div", { className: `flex flex-wrap items-center gap-2 ${n}`, children: [
+  /* @__PURE__ */ o(f.Text, { size: "xsmall", color: "secondary", children: a }),
+  l.map((e) => /* @__PURE__ */ o(
+    m,
+    {
+      value: e.label,
+      type: "default",
+      fontSize: "xsmall",
+      paddingSize: "compact",
+      textTransform: "none",
+      iconPosition: "right",
+      ...e.href ? {
+        icon: /* @__PURE__ */ o(
+          "a",
+          {
+            href: e.href,
+            target: "_blank",
+            rel: "noreferrer",
+            "aria-label": `Open ${e.label} in a new tab`,
+            className: "inline-flex items-center opacity-70 hover:opacity-100 text-current",
+            onClick: (t) => t.stopPropagation(),
+            children: /* @__PURE__ */ o(c, { size: 9 })
+          }
+        )
+      } : {},
+      ...e.onRemove ? { onRemove: e.onRemove } : {}
+    },
+    e.id
+  )),
+  r ? /* @__PURE__ */ o(
+    p,
+    {
+      label: "Add context",
+      size: "xsmall",
+      icon: /* @__PURE__ */ o(s, { size: 11 }),
+      onClick: r
+    }
+  ) : null
+] });
+export {
+  v as ChatContext,
+  v as default
+};
+//# sourceMappingURL=ChatContext.js.map

package/dist/components/Chat/ChatContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContext.js","sources":["../../../src/components/Chat/ChatContext.tsx"],"sourcesContent":["import React from 'react';\nimport ArrowUpRightIcon from '../CustomIcons/ArrowUpRightIcon';\nimport PlusIcon from '../CustomIcons/PlusIcon';\nimport PillButton from '../PillButton';\nimport Tag from '../Tag';\nimport Typography from '../Typography';\n\nexport interface ChatContextItem {\n    id: string;\n    label: string;\n    /** Shows a remove control on the item. Without it, the item reports rather than can be dropped. */\n    onRemove?: () => void;\n    /**\n     * Opens what the item names, in a new tab. A reader deciding whether context is the right\n     * context has to be able to look at it, and following the link in place would cost them the\n     * conversation it belongs to.\n     */\n    href?: string;\n}\n\nexport interface ChatContextProps {\n    label?: string;\n    items: ChatContextItem[];\n    /** Renders the \"Add context\" control. Without it, the row only lists what is already in scope. */\n    onAdd?: () => void;\n    className?: string;\n}\n\n/**\n * What a conversation can see: the row under a chat header naming the policy, account or other\n * context a turn was given, plus an affordance to add more.\n *\n * Each item is a static `PillButton` (the same chip shape `Chat.ComposerChip` and\n * `Chat.ModelPicker` already use) rather than a bespoke chip — the remove control is its own\n * `Button`, the way a message's copy/rating actions are, so a chip is never the accessible name\n * for \"remove this\".\n */\nconst ChatContext: React.FC<ChatContextProps> = ({\n    label = 'Context',\n    items,\n    onAdd,\n    className = '',\n}) => (\n    <div className={`flex flex-wrap items-center gap-2 ${className}`}>\n        {/* Smaller than the header it sits under: this row names what the conversation can\n            see, which is context for the title rather than a heading of its own.\n            `Text`, not `SecondaryText`: the latter keeps a local scale where `xsmall` is\n            12px, where the shared scale this needs puts it at 11. */}\n        <Typography.Text size=\"xsmall\" color=\"secondary\">\n            {label}\n        </Typography.Text>\n        {/* `Tag`, not an inert `PillButton`: these name what the conversation can see, and a\n            de-activated button is a button pretending to be a label. Removal is `Tag`'s own\n            trailing control rather than a `Button` beside it — outside the chip it reads as a\n            second object floating next to the label, and an outline button draws a bordered box\n            around a glyph that is already a circle. */}\n        {items.map((item) => (\n            <Tag\n                key={item.id}\n                value={item.label}\n                type=\"default\"\n                fontSize=\"xsmall\"\n                paddingSize=\"compact\"\n                textTransform=\"none\"\n                iconPosition=\"right\"\n                {...(item.href\n                    ? {\n                          icon: (\n                              <a\n                                  href={item.href}\n                                  target=\"_blank\"\n                                  rel=\"noreferrer\"\n                                  aria-label={`Open ${item.label} in a new tab`}\n                                  className=\"inline-flex items-center opacity-70 hover:opacity-100 text-current\"\n                                  onClick={(event) => event.stopPropagation()}\n                              >\n                                  <ArrowUpRightIcon size={9} />\n                              </a>\n                          ),\n                      }\n                    : {})}\n                {...(item.onRemove ? { onRemove: item.onRemove } : {})}\n            />\n        ))}\n        {onAdd ? (\n            <PillButton\n                label=\"Add context\"\n                size=\"xsmall\"\n                icon={<PlusIcon size={11} />}\n                onClick={onAdd}\n            />\n        ) : null}\n    </div>\n);\n\nexport default ChatContext;\nexport { ChatContext };\n"],"names":["ChatContext","label","items","onAdd","className","jsxs","jsx","Typography","item","Tag","event","ArrowUpRightIcon","PillButton","PlusIcon"],"mappings":";;;;;;AAqCA,MAAMA,IAA0C,CAAC;AAAA,EAC7C,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAW,qCAAqCD,CAAS,IAK1D,UAAA;AAAA,EAAA,gBAAAE,EAACC,EAAW,MAAX,EAAgB,MAAK,UAAS,OAAM,aAChC,UAAAN,GACL;AAAA,EAMCC,EAAM,IAAI,CAACM,MACR,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEG,OAAOD,EAAK;AAAA,MACZ,MAAK;AAAA,MACL,UAAS;AAAA,MACT,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,cAAa;AAAA,MACZ,GAAIA,EAAK,OACJ;AAAA,QACI,MACI,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAME,EAAK;AAAA,YACX,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,cAAY,QAAQA,EAAK,KAAK;AAAA,YAC9B,WAAU;AAAA,YACV,SAAS,CAACE,MAAUA,EAAM,gBAAA;AAAA,YAE1B,UAAA,gBAAAJ,EAACK,GAAA,EAAiB,MAAM,EAAA,CAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/B,IAGR,CAAA;AAAA,MACL,GAAIH,EAAK,WAAW,EAAE,UAAUA,EAAK,SAAA,IAAa,CAAA;AAAA,IAAC;AAAA,IAvB/CA,EAAK;AAAA,EAAA,CAyBjB;AAAA,EACAL,IACG,gBAAAG;AAAA,IAACM;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAM,gBAAAN,EAACO,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,MAC1B,SAASV;AAAA,IAAA;AAAA,EAAA,IAEb;AAAA,EAAA,CACR;"}

package/dist/components/Chat/ChatContextMeter.js

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { Progress as p } from "../Progress.js";
+import { compactOrDash as n, compactCount as l } from "./tokenText.js";
+const m = "inline-flex h-[var(--malachite-control-height-small,28px)] shrink-0 items-center gap-2 rounded-b-[var(--malachite-radius-10,10px)] rounded-t-none bg-[var(--malachite-pillbutton-background)] px-2.5 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-pillbutton-foreground)] whitespace-nowrap", f = ({
+  used: e,
+  limit: a,
+  cached: r,
+  label: o = "Context",
+  className: s = ""
+}) => {
+  const h = e ?? 0, c = a > 0 ? Math.min(100, Math.max(0, h / a * 100)) : 0;
+  return /* @__PURE__ */ i("span", { className: `${m} ${s}`, children: [
+    /* @__PURE__ */ t("span", { children: o }),
+    /* @__PURE__ */ t("span", { style: { width: 96, flexShrink: 0 }, children: /* @__PURE__ */ t(
+      p,
+      {
+        value: c,
+        height: 6,
+        "aria-label": `${o}: ${n(e)} of ${l(a)} tokens`
+      }
+    ) }),
+    /* @__PURE__ */ t("span", { children: `${n(e)}/${l(a)}` }),
+    r === void 0 ? null : /* @__PURE__ */ t("span", { children: `· Cached: ${n(r)}` })
+  ] });
+};
+export {
+  f as ChatContextMeter,
+  f as default
+};
+//# sourceMappingURL=ChatContextMeter.js.map

package/dist/components/Chat/ChatContextMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContextMeter.js","sources":["../../../src/components/Chat/ChatContextMeter.tsx"],"sourcesContent":["import React from 'react';\nimport Progress from '../Progress';\nimport { compactCount, compactOrDash } from './tokenText';\n\nexport interface ChatContextMeterProps {\n    /** Tokens spent. Absent reads as a dash: nothing has been measured yet. */\n    used?: number | null;\n    /** The model's context window. */\n    limit: number;\n    /** Tokens served from cache, when the provider reports them. */\n    cached?: number | null;\n    label?: string;\n    className?: string;\n}\n\n// The same surface and shape `Chat.ComposerChip` gets from PillButton's `tab`, so the row\n// under the field reads as one strip. Not PillButton itself: this one holds a bar and three\n// pieces of text, where a pill holds a label.\nconst CHIP_CLASSES =\n    'inline-flex h-[var(--malachite-control-height-small,28px)] shrink-0 items-center gap-2 rounded-b-[var(--malachite-radius-10,10px)] rounded-t-none bg-[var(--malachite-pillbutton-background)] px-2.5 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-pillbutton-foreground)] whitespace-nowrap';\n\n/**\n * How much of a model's context a conversation has spent.\n *\n * Its own chip rather than something to wrap, since it sits in the same row as the composer's\n * other chips and has to line up with them.\n */\nconst ChatContextMeter: React.FC<ChatContextMeterProps> = ({\n    used,\n    limit,\n    cached,\n    label = 'Context',\n    className = '',\n}) => {\n    const spent = used ?? 0;\n    // Clamped: a provider that reports more than the window would otherwise overflow the bar.\n    const percent = limit > 0 ? Math.min(100, Math.max(0, (spent / limit) * 100)) : 0;\n\n    return (\n        <span className={`${CHIP_CLASSES} ${className}`}>\n            <span>{label}</span>\n            {/* `flexShrink: 0`, or a narrow row crushes the track to a few pixels: a flex\n                item shrinks below its own width by default, and this one carries the reading. */}\n            <span style={{ width: 96, flexShrink: 0 }}>\n                <Progress\n                    value={percent}\n                    height={6}\n                    aria-label={`${label}: ${compactOrDash(used)} of ${compactCount(limit)} tokens`}\n                />\n            </span>\n            <span>{`${compactOrDash(used)}/${compactCount(limit)}`}</span>\n            {cached === undefined ? null : <span>{`· Cached: ${compactOrDash(cached)}`}</span>}\n        </span>\n    );\n};\n\nexport default ChatContextMeter;\nexport { ChatContextMeter };\n"],"names":["CHIP_CLASSES","ChatContextMeter","used","limit","cached","label","className","spent","percent","jsx","Progress","compactOrDash","compactCount"],"mappings":";;;AAkBA,MAAMA,IACF,4TAQEC,IAAoD,CAAC;AAAA,EACvD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAQL,KAAQ,GAEhBM,IAAUL,IAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAII,IAAQJ,IAAS,GAAG,CAAC,IAAI;AAEhF,2BACK,QAAA,EAAK,WAAW,GAAGH,CAAY,IAAIM,CAAS,IACzC,UAAA;AAAA,IAAA,gBAAAG,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,IAGb,gBAAAI,EAAC,UAAK,OAAO,EAAE,OAAO,IAAI,YAAY,KAClC,UAAA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAOF;AAAA,QACP,QAAQ;AAAA,QACR,cAAY,GAAGH,CAAK,KAAKM,EAAcT,CAAI,CAAC,OAAOU,EAAaT,CAAK,CAAC;AAAA,MAAA;AAAA,IAAA,GAE9E;AAAA,IACA,gBAAAM,EAAC,QAAA,EAAM,UAAA,GAAGE,EAAcT,CAAI,CAAC,IAAIU,EAAaT,CAAK,CAAC,GAAA,CAAG;AAAA,IACtDC,MAAW,SAAY,OAAO,gBAAAK,EAAC,UAAM,UAAA,aAAaE,EAAcP,CAAM,CAAC,GAAA,CAAG;AAAA,EAAA,GAC/E;AAER;"}

package/dist/components/Chat/ChatHeader.js

@@ -0,0 +1,44 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import n from "../CustomIcons/SparkleIcon.js";
+import { Typography as t } from "../Typography/index.js";
+const r = {
+  color: "var(--malachite-assistant-foreground)"
+}, x = ({
+  title: c,
+  tone: s = "default",
+  trailing: l,
+  children: i,
+  className: o = ""
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: `flex shrink-0 flex-col gap-3 px-4 pb-3 pt-4 ${o}`,
+    style: {
+      backgroundColor: "var(--malachite-card-background)",
+      boxShadow: "0 4px 6px -4px var(--malachite-card-shadow)"
+    },
+    children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ a("span", { className: "flex items-center gap-1.5", children: [
+          s === "assistant" ? /* @__PURE__ */ e("span", { style: r, className: "flex items-center", children: /* @__PURE__ */ e(n, { size: 14 }) }) : null,
+          /* @__PURE__ */ e(
+            t.Text,
+            {
+              size: "small",
+              fontWeight: "semi-bold",
+              ...s === "assistant" && { style: r },
+              children: c
+            }
+          )
+        ] }),
+        l === void 0 ? null : /* @__PURE__ */ e(t.SecondaryText, { size: "xsmall", children: l })
+      ] }),
+      i
+    ]
+  }
+);
+export {
+  x as ChatHeader,
+  x as default
+};
+//# sourceMappingURL=ChatHeader.js.map

package/dist/components/Chat/ChatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.js","sources":["../../../src/components/Chat/ChatHeader.tsx"],"sourcesContent":["import React from 'react';\nimport SparkleIcon from '../CustomIcons/SparkleIcon';\nimport Typography from '../Typography';\n\nexport interface ChatHeaderProps {\n    /** Names the surface, e.g. \"Policy chat\". */\n    title: string;\n    /**\n     * Marks the surface as AI-owned: the title takes the assistant violet and a sparkle\n     * leads it. Defaults to `'default'`, so a chat that is not assistant-authored does not\n     * inherit the treatment.\n     */\n    tone?: 'default' | 'assistant';\n    /** Sits opposite the title — a model name, a token count. */\n    trailing?: React.ReactNode;\n    /** Rows travelling with the header, e.g. `Chat.Context`. Pinned along with it. */\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst TITLE_ASSISTANT_STYLE: React.CSSProperties = {\n    color: 'var(--malachite-assistant-foreground)',\n};\n\n/**\n * The pinned top of a chat: a title, whatever belongs opposite it, and any rows that travel\n * with them.\n *\n * Opaque, because the transcript scrolls underneath it and has to disappear rather than\n * show through. The soft shadow below is what keeps that from reading as a rendering fault:\n * without it a message is sliced off at a hard edge. A shadow rather than a border, so the\n * boundary is felt rather than drawn.\n */\nconst ChatHeader: React.FC<ChatHeaderProps> = ({\n    title,\n    tone = 'default',\n    trailing,\n    children,\n    className = '',\n}) => (\n    <div\n        // Padding of its own, rather than borrowed from a padded parent: it spans the full\n        // width of the column so that the frost reaches both edges, which means nothing\n        // outside it is insetting its content any more.\n        className={`flex shrink-0 flex-col gap-3 px-4 pb-3 pt-4 ${className}`}\n        style={{\n            backgroundColor: 'var(--malachite-card-background)',\n            boxShadow: '0 4px 6px -4px var(--malachite-card-shadow)',\n        }}\n    >\n        <div className=\"flex items-center justify-between gap-2\">\n            <span className=\"flex items-center gap-1.5\">\n                {tone === 'assistant' ? (\n                    <span style={TITLE_ASSISTANT_STYLE} className=\"flex items-center\">\n                        <SparkleIcon size={14} />\n                    </span>\n                ) : null}\n                <Typography.Text\n                    size=\"small\"\n                    fontWeight=\"semi-bold\"\n                    {...(tone === 'assistant' && { style: TITLE_ASSISTANT_STYLE })}\n                >\n                    {title}\n                </Typography.Text>\n            </span>\n            {trailing === undefined ? null : (\n                <Typography.SecondaryText size=\"xsmall\">{trailing}</Typography.SecondaryText>\n            )}\n        </div>\n        {children}\n    </div>\n);\n\nexport default ChatHeader;\nexport { ChatHeader };\n"],"names":["TITLE_ASSISTANT_STYLE","ChatHeader","title","tone","trailing","children","className","jsxs","jsx","SparkleIcon","Typography"],"mappings":";;;AAoBA,MAAMA,IAA6C;AAAA,EAC/C,OAAO;AACX,GAWMC,IAAwC,CAAC;AAAA,EAC3C,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IAIG,WAAW,+CAA+CD,CAAS;AAAA,IACnE,OAAO;AAAA,MACH,iBAAiB;AAAA,MACjB,WAAW;AAAA,IAAA;AAAA,IAGf,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2CACX,UAAA;AAAA,QAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,6BACX,UAAA;AAAA,UAAAJ,MAAS,cACN,gBAAAK,EAAC,QAAA,EAAK,OAAOR,GAAuB,WAAU,qBAC1C,UAAA,gBAAAQ,EAACC,GAAA,EAAY,MAAM,GAAA,CAAI,EAAA,CAC3B,IACA;AAAA,UACJ,gBAAAD;AAAA,YAACE,EAAW;AAAA,YAAX;AAAA,cACG,MAAK;AAAA,cACL,YAAW;AAAA,cACV,GAAIP,MAAS,eAAe,EAAE,OAAOH,EAAA;AAAA,cAErC,UAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACL,GACJ;AAAA,QACCE,MAAa,SAAY,OACtB,gBAAAI,EAACE,EAAW,eAAX,EAAyB,MAAK,UAAU,UAAAN,EAAA,CAAS;AAAA,MAAA,GAE1D;AAAA,MACCC;AAAA,IAAA;AAAA,EAAA;AACL;"}

package/dist/components/Chat/ChatMessage.js

@@ -0,0 +1,127 @@
+import { jsxs as l, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { Avatar as N } from "../Avatar.js";
+import { Button as S } from "../Button.js";
+import y from "../CustomIcons/CopyIcon.js";
+import B from "../CustomIcons/ThumbsDownIcon.js";
+import T from "../CustomIcons/ThumbsUpIcon.js";
+import { Typography as c } from "../Typography/index.js";
+import { ChatThinking as $ } from "./ChatThinking.js";
+import { compactCount as h } from "./tokenText.js";
+const k = {
+  streaming: "Streaming",
+  completed: "Completed",
+  error: "Failed"
+}, z = "rounded-tl-[12px] rounded-tr-[12px] rounded-br-[4px] rounded-bl-[12px]", A = "rounded-tl-[12px] rounded-tr-[12px] rounded-br-[12px] rounded-bl-[4px]", C = ({ model: i, inputTokens: r, outputTokens: a, totalTokens: n }) => {
+  const o = [
+    r === void 0 ? void 0 : `${h(r)} in`,
+    a === void 0 ? void 0 : `${h(a)} out`,
+    n === void 0 ? void 0 : `${h(n)} total`
+  ].filter((m) => m !== void 0);
+  return [i, ...o].join(" · ");
+}, x = ({
+  label: i,
+  icon: r,
+  onClick: a
+}) => /* @__PURE__ */ e(
+  S,
+  {
+    variant: "outline",
+    size: "xsmall",
+    iconOnly: !0,
+    icon: r,
+    tooltip: i,
+    "aria-label": i,
+    onClick: a
+  }
+), q = ({
+  role: i,
+  variant: r = "plain",
+  content: a,
+  children: n,
+  name: o,
+  avatarSrc: m,
+  status: b,
+  loading: f = !1,
+  onCopy: u,
+  onFeedback: d,
+  usage: p,
+  className: t = ""
+}) => {
+  const s = /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-col gap-2", children: [
+    a ? /* @__PURE__ */ e(c.MarkdownBlock, { text: a, variant: "flow", omitMargin: !0 }) : null,
+    n,
+    f && !a ? /* @__PURE__ */ e($, {}) : null
+  ] });
+  if (i === "user") {
+    const v = r === "bubble" ? `${z} border-[var(--malachite-chat-user-bubble-border)] bg-[var(--malachite-chat-user-bubble-background)]` : "rounded-lg border-[var(--malachite-accent-border)] bg-[var(--malachite-accent-background-glass)]";
+    return /* @__PURE__ */ l("div", { className: `flex min-w-0 items-start justify-end gap-2 ${t}`, children: [
+      /* @__PURE__ */ e("div", { className: `min-w-0 max-w-[85%] border border-solid px-3 py-2 ${v}`, children: s }),
+      /* @__PURE__ */ e("div", { className: "shrink-0 pt-[2px]", children: /* @__PURE__ */ e(N, { src: m, name: o, size: 24, shape: "square" }) })
+    ] });
+  }
+  const g = u || d || p;
+  return r === "plain" ? /* @__PURE__ */ e("div", { className: `flex min-w-0 flex-col ${t}`, children: s }) : r === "bubble" ? /* @__PURE__ */ e("div", { className: `flex min-w-0 items-start ${t}`, children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: `min-w-0 max-w-[85%] border border-solid px-3 py-2 text-[var(--malachite-chat-assistant-bubble-foreground)] ${A} border-[var(--malachite-chat-assistant-bubble-border)] bg-[var(--malachite-chat-assistant-bubble-background)]`,
+      children: s
+    }
+  ) }) : /* @__PURE__ */ l(
+    "div",
+    {
+      className: `flex min-w-0 flex-col gap-3 rounded-[var(--malachite-radius-xxl,14px)] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] p-4 ${t}`,
+      children: [
+        (o || b) && /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+          o ? /* @__PURE__ */ e("span", { className: "rounded-md bg-[var(--malachite-card-dimmed-background)] px-2 py-1 leading-none", children: /* @__PURE__ */ e(c.Text, { size: "small", fontWeight: "semi-bold", children: o }) }) : null,
+          b ? /* @__PURE__ */ e(c.SecondaryText, { size: "xsmall", textTransform: "uppercase", children: k[b] }) : null
+        ] }),
+        s,
+        g ? /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+            u ? /* @__PURE__ */ e(
+              x,
+              {
+                label: "Copy",
+                icon: /* @__PURE__ */ e(y, { size: 13 }),
+                onClick: u
+              }
+            ) : null,
+            d ? /* @__PURE__ */ l(w, { children: [
+              /* @__PURE__ */ e(
+                x,
+                {
+                  label: "Good response",
+                  icon: /* @__PURE__ */ e(T, { size: 13 }),
+                  onClick: () => d("up")
+                }
+              ),
+              /* @__PURE__ */ e(
+                x,
+                {
+                  label: "Bad response",
+                  icon: /* @__PURE__ */ e(B, { size: 13 }),
+                  onClick: () => d("down")
+                }
+              )
+            ] }) : null
+          ] }),
+          p ? /* @__PURE__ */ l("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "h-2 w-2 shrink-0 rounded-full bg-[var(--malachite-warning-background)]"
+              }
+            ),
+            /* @__PURE__ */ e(c.SecondaryText, { size: "xsmall", children: C(p) })
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+};
+export {
+  q as ChatMessage,
+  q as default
+};
+//# sourceMappingURL=ChatMessage.js.map

package/dist/components/Chat/ChatMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.js","sources":["../../../src/components/Chat/ChatMessage.tsx"],"sourcesContent":["import React from 'react';\nimport Avatar from '../Avatar';\nimport Button from '../Button';\nimport CopyIcon from '../CustomIcons/CopyIcon';\nimport ThumbsDownIcon from '../CustomIcons/ThumbsDownIcon';\nimport ThumbsUpIcon from '../CustomIcons/ThumbsUpIcon';\nimport Typography from '../Typography';\nimport ChatThinking from './ChatThinking';\nimport { compactCount } from './tokenText';\n\nexport type ChatRole = 'user' | 'assistant';\n\n/**\n * Three distinct treatments, not two plus a repaint of one: `plain` is the bare turn, `card`\n * frames a reply with its own status, copy/rating actions and a token line, and `bubble` is a\n * message-app chat style with no chrome beyond the bubble itself. All three appear in the\n * design-sync previews — keep them that way rather than folding `bubble` back into `card`.\n */\nexport type ChatMessageVariant = 'plain' | 'card' | 'bubble';\n\nexport type ChatMessageStatus = 'streaming' | 'completed' | 'error';\n\nexport type ChatFeedback = 'up' | 'down';\n\nexport interface ChatMessageUsage {\n    /** The model as a reader would name it, e.g. \"Claude Haiku 4.5\". */\n    model: string;\n    inputTokens?: number;\n    outputTokens?: number;\n    totalTokens?: number;\n}\n\nexport interface ChatMessageProps {\n    role: ChatRole;\n    /**\n     * `card` frames the turn with a header and a footer — for a surface where a reply carries\n     * its own status and cost. `plain` is the bare turn. `bubble` wraps the turn in a coloured,\n     * asymmetrically-rounded bubble instead — no header, no footer, just the shape.\n     */\n    variant?: ChatMessageVariant;\n    /** Markdown. Rendered through `Typography.MarkdownBlock`, so a reply may carry formatting. */\n    content?: string;\n    /** Anything belonging with the message — tool calls, reasoning, a busy indicator. */\n    children?: React.ReactNode;\n    /** Names a user turn and its avatar; labels an assistant turn's header. */\n    name?: string;\n    avatarSrc?: string;\n    /** Shown in a `card` header. Omitted means the turn reports no state. */\n    status?: ChatMessageStatus;\n    /**\n     * The reply has been asked for but nothing has arrived. Renders the same placeholder\n     * `Chat.Thinking` does, in the body's place, so the turn does not jump when text lands.\n     */\n    loading?: boolean;\n    /**\n     * Offers a copy control. The handler decides what to copy: a turn may hold tool calls and\n     * reasoning this component never sees, so it cannot honestly claim to know the text.\n     */\n    onCopy?: () => void;\n    /** Offers thumbs up and down. */\n    onFeedback?: (feedback: ChatFeedback) => void;\n    usage?: ChatMessageUsage;\n    className?: string;\n}\n\nconst STATUS_LABELS: Record<ChatMessageStatus, string> = {\n    streaming: 'Streaming',\n    completed: 'Completed',\n    error: 'Failed',\n};\n\n/**\n * The flattened corner points at its author — bottom-right on a right-aligned user bubble,\n * bottom-left on a left-aligned assistant one — so who spoke is legible before a word is read.\n * Not decoration: swapping these would point every bubble at the wrong side of the transcript.\n */\nconst USER_BUBBLE_RADIUS = 'rounded-tl-[12px] rounded-tr-[12px] rounded-br-[4px] rounded-bl-[12px]';\nconst ASSISTANT_BUBBLE_RADIUS =\n    'rounded-tl-[12px] rounded-tr-[12px] rounded-br-[12px] rounded-bl-[4px]';\n\nconst usageText = ({ model, inputTokens, outputTokens, totalTokens }: ChatMessageUsage): string => {\n    const counts = [\n        inputTokens === undefined ? undefined : `${compactCount(inputTokens)} in`,\n        outputTokens === undefined ? undefined : `${compactCount(outputTokens)} out`,\n        totalTokens === undefined ? undefined : `${compactCount(totalTokens)} total`,\n    ].filter((part): part is string => part !== undefined);\n\n    return [model, ...counts].join(' · ');\n};\n\n/**\n * `outline` rather than `ghost`: a bare glyph does not read as something to press, and ghost\n * only draws its border on hover, which a pointer finds and nothing else does.\n */\nconst MessageAction = ({\n    label,\n    icon,\n    onClick,\n}: {\n    label: string;\n    icon: React.ReactNode;\n    onClick: () => void;\n}) => (\n    <Button\n        variant=\"outline\"\n        size=\"xsmall\"\n        iconOnly\n        icon={icon}\n        tooltip={label}\n        aria-label={label}\n        onClick={onClick}\n    />\n);\n\n/**\n * One turn in a transcript.\n *\n * A user turn sits to the right and hugs its own text, the way a sent message reads. An\n * assistant turn runs the full width in `plain`/`card`, so a long reply is not read through a\n * narrow column; in `bubble` both roles hug their own text instead, the way a messaging app reads.\n */\nconst ChatMessage: React.FC<ChatMessageProps> = ({\n    role,\n    variant = 'plain',\n    content,\n    children,\n    name,\n    avatarSrc,\n    status,\n    loading = false,\n    onCopy,\n    onFeedback,\n    usage,\n    className = '',\n}) => {\n    const body = (\n        <div className=\"flex min-w-0 flex-col gap-2\">\n            {content ? <Typography.MarkdownBlock text={content} variant=\"flow\" omitMargin /> : null}\n            {children}\n            {loading && !content ? <ChatThinking /> : null}\n        </div>\n    );\n\n    if (role === 'user') {\n        const boxClasses =\n            variant === 'bubble'\n                ? `${USER_BUBBLE_RADIUS} border-[var(--malachite-chat-user-bubble-border)] bg-[var(--malachite-chat-user-bubble-background)]`\n                : 'rounded-lg border-[var(--malachite-accent-border)] bg-[var(--malachite-accent-background-glass)]';\n\n        return (\n            <div className={`flex min-w-0 items-start justify-end gap-2 ${className}`}>\n                <div className={`min-w-0 max-w-[85%] border border-solid px-3 py-2 ${boxClasses}`}>\n                    {body}\n                </div>\n                <div className=\"shrink-0 pt-[2px]\">\n                    <Avatar src={avatarSrc} name={name} size={24} shape=\"square\" />\n                </div>\n            </div>\n        );\n    }\n\n    const footer = onCopy || onFeedback || usage;\n\n    if (variant === 'plain') {\n        return <div className={`flex min-w-0 flex-col ${className}`}>{body}</div>;\n    }\n\n    if (variant === 'bubble') {\n        // Hugs its content rather than filling the column: a flex row (not the plain/card\n        // column) so the bubble's width tracks its text and only caps at the same 85% the\n        // user turn already uses, instead of stretching to the full transcript width.\n        return (\n            <div className={`flex min-w-0 items-start ${className}`}>\n                <div\n                    className={`min-w-0 max-w-[85%] border border-solid px-3 py-2 text-[var(--malachite-chat-assistant-bubble-foreground)] ${ASSISTANT_BUBBLE_RADIUS} border-[var(--malachite-chat-assistant-bubble-border)] bg-[var(--malachite-chat-assistant-bubble-background)]`}\n                >\n                    {body}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={`flex min-w-0 flex-col gap-3 rounded-[var(--malachite-radius-xxl,14px)] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] p-4 ${className}`}\n        >\n            {(name || status) && (\n                <div className=\"flex items-center gap-2\">\n                    {name ? (\n                        <span className=\"rounded-md bg-[var(--malachite-card-dimmed-background)] px-2 py-1 leading-none\">\n                            <Typography.Text size=\"small\" fontWeight=\"semi-bold\">\n                                {name}\n                            </Typography.Text>\n                        </span>\n                    ) : null}\n                    {status ? (\n                        <Typography.SecondaryText size=\"xsmall\" textTransform=\"uppercase\">\n                            {STATUS_LABELS[status]}\n                        </Typography.SecondaryText>\n                    ) : null}\n                </div>\n            )}\n            {body}\n            {footer ? (\n                <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                    <div className=\"flex items-center gap-1\">\n                        {onCopy ? (\n                            <MessageAction\n                                label=\"Copy\"\n                                icon={<CopyIcon size={13} />}\n                                onClick={onCopy}\n                            />\n                        ) : null}\n                        {onFeedback ? (\n                            <>\n                                <MessageAction\n                                    label=\"Good response\"\n                                    icon={<ThumbsUpIcon size={13} />}\n                                    onClick={() => onFeedback('up')}\n                                />\n                                <MessageAction\n                                    label=\"Bad response\"\n                                    icon={<ThumbsDownIcon size={13} />}\n                                    onClick={() => onFeedback('down')}\n                                />\n                            </>\n                        ) : null}\n                    </div>\n                    {usage ? (\n                        <span className=\"flex min-w-0 items-center gap-1.5\">\n                            {/* Decorative, so it is hidden: the model is named in the text\n                                beside it and a screen reader gains nothing from a dot. */}\n                            <span\n                                aria-hidden=\"true\"\n                                className=\"h-2 w-2 shrink-0 rounded-full bg-[var(--malachite-warning-background)]\"\n                            />\n                            <Typography.SecondaryText size=\"xsmall\">\n                                {usageText(usage)}\n                            </Typography.SecondaryText>\n                        </span>\n                    ) : null}\n                </div>\n            ) : null}\n        </div>\n    );\n};\n\nexport default ChatMessage;\nexport { ChatMessage };\n"],"names":["STATUS_LABELS","USER_BUBBLE_RADIUS","ASSISTANT_BUBBLE_RADIUS","usageText","model","inputTokens","outputTokens","totalTokens","counts","compactCount","part","MessageAction","label","icon","onClick","jsx","Button","ChatMessage","role","variant","content","children","name","avatarSrc","status","loading","onCopy","onFeedback","usage","className","body","jsxs","Typography","ChatThinking","boxClasses","Avatar","footer","CopyIcon","Fragment","ThumbsUpIcon","ThumbsDownIcon"],"mappings":"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"}

package/dist/components/Chat/ChatModelPicker.js

@@ -0,0 +1,207 @@
+import { jsxs as g, Fragment as k, jsx as n } from "react/jsx-runtime";
+import { useState as x, useRef as I, useCallback as q, useEffect as J, useInsertionEffect as Q } from "react";
+import { createPortal as X } from "react-dom";
+import { Avatar as O } from "../Avatar.js";
+import Z from "../CustomIcons/CaretDownIcon.js";
+import ee from "../CustomIcons/CaretRightIcon.js";
+import te from "../CustomIcons/CaretUpIcon.js";
+import D from "../CustomIcons/CheckIcon.js";
+import { PillButton as ne } from "../PillButton.js";
+import { pushEscapeLayer as re } from "../escapeLayers.js";
+import { ensureOverlayStyles as ie, overlayIdentity as M } from "../portalOverlay.js";
+import { useTopLayer as oe } from "../topLayer.js";
+const h = 8, _ = 220, C = 240, B = (r, a) => ({
+  position: "fixed",
+  top: (r == null ? void 0 : r.top) ?? 0,
+  left: (r == null ? void 0 : r.left) ?? 0,
+  minWidth: a,
+  background: "var(--malachite-card-background, rgb(255, 255, 255))",
+  border: "1px solid var(--malachite-card-border, rgb(232, 232, 232))",
+  borderRadius: 12,
+  boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.08)",
+  padding: 4,
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  visibility: r ? "visible" : "hidden",
+  opacity: r ? 1 : 0
+}), N = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "6px 10px",
+  borderRadius: 8,
+  border: "none",
+  background: "transparent",
+  textAlign: "left",
+  width: "100%",
+  cursor: "pointer",
+  fontSize: "var(--malachite-font-size-small, 13px)",
+  color: "var(--malachite-text-primary, rgb(10, 10, 10))"
+}, le = {
+  fontSize: "var(--malachite-font-size-xsmall, 11px)",
+  color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
+}, W = {
+  marginLeft: "auto",
+  display: "inline-flex",
+  color: "var(--malachite-text-success, rgb(2, 122, 66))"
+}, ye = ({
+  models: r,
+  value: a,
+  optionValue: A,
+  onChange: H,
+  disabled: F = !1,
+  openUp: y = !0,
+  "aria-label": U = "Model"
+}) => {
+  var T;
+  const [f, b] = x(!1), [Y, j] = x(null), [G, w] = x(null), [K, z] = x(
+    null
+  ), E = I(null), d = I(null), R = I(null);
+  oe(d, f);
+  const l = r.find((e) => e.value === a), L = q(() => {
+    const e = E.current, t = d.current;
+    if (!e)
+      return;
+    const i = e.getBoundingClientRect(), o = (t == null ? void 0 : t.offsetWidth) || _, s = (t == null ? void 0 : t.offsetHeight) || 0, v = window.innerWidth - o - h, u = Math.max(h, Math.min(i.right - o, v)), m = i.top - s - 4, p = i.bottom + 4, V = m >= h, $ = s === 0 || p + s <= window.innerHeight - h;
+    j({ top: y ? V ? m : p : $ ? p : m, left: u });
+  }, [y]);
+  J(() => {
+    if (!f) {
+      w(null), z(null);
+      return;
+    }
+    L();
+    const e = () => L(), t = (o) => {
+      const s = o.composedPath();
+      [E.current, d.current, R.current].some(
+        (u) => u !== null && s.includes(u)
+      ) || b(!1);
+    }, i = re(() => b(!1));
+    return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), document.addEventListener("mousedown", t, !0), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), document.removeEventListener("mousedown", t, !0), i();
+    };
+  }, [f, L]), Q(() => {
+    f && ie();
+  }, [f]);
+  const P = (e, t) => {
+    var u, m, p;
+    if (!((u = e.options) != null && u.length)) {
+      w(null);
+      return;
+    }
+    const i = t.getBoundingClientRect(), s = (((m = d.current) == null ? void 0 : m.getBoundingClientRect().left) ?? i.left) - C - 4, v = s >= h ? s : Math.min(
+      (((p = d.current) == null ? void 0 : p.getBoundingClientRect().right) ?? i.right) + 4,
+      window.innerWidth - C - h
+    );
+    w(e.value), z({ top: i.top, left: v });
+  }, S = (e, t) => {
+    H(e.value, t == null ? void 0 : t.value), b(!1);
+  }, c = r.find((e) => e.value === G);
+  return /* @__PURE__ */ g(k, { children: [
+    /* @__PURE__ */ n("div", { ref: E, className: "inline-flex", children: /* @__PURE__ */ n(
+      ne,
+      {
+        label: (l == null ? void 0 : l.label) ?? a,
+        icon: l != null && l.iconSrc ? /* @__PURE__ */ n(O, { src: l.iconSrc, name: l.label, size: 14 }) : void 0,
+        trailingIcon: y ? /* @__PURE__ */ n(te, { size: 10 }) : /* @__PURE__ */ n(Z, { size: 10 }),
+        shape: "tab",
+        size: "small",
+        disabled: F,
+        onClick: () => b((e) => !e)
+      }
+    ) }),
+    f && X(
+      /* @__PURE__ */ g(k, { children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ref: d,
+            role: "menu",
+            "aria-label": U,
+            ...M("actionmenu"),
+            style: B(Y, _),
+            children: r.map((e) => {
+              var t, i;
+              return /* @__PURE__ */ g(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  "aria-haspopup": (t = e.options) != null && t.length ? "menu" : void 0,
+                  style: N,
+                  onMouseEnter: (o) => P(e, o.currentTarget),
+                  onFocus: (o) => P(e, o.currentTarget),
+                  onClick: () => {
+                    var o;
+                    return (o = e.options) != null && o.length ? S(e, e.options[0]) : S(e);
+                  },
+                  children: [
+                    e.iconSrc ? /* @__PURE__ */ n(O, { src: e.iconSrc, name: e.label, size: 14 }) : null,
+                    e.label,
+                    e.value === a ? /* @__PURE__ */ n("span", { style: W, children: /* @__PURE__ */ n(D, { size: 11 }) }) : null,
+                    (i = e.options) != null && i.length ? /* @__PURE__ */ n(
+                      "span",
+                      {
+                        style: {
+                          marginLeft: e.value === a ? 4 : "auto",
+                          display: "inline-flex",
+                          color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
+                        },
+                        children: /* @__PURE__ */ n(ee, { size: 10 })
+                      }
+                    ) : null
+                  ]
+                },
+                e.value
+              );
+            })
+          }
+        ),
+        (T = c == null ? void 0 : c.options) != null && T.length ? /* @__PURE__ */ n(
+          "div",
+          {
+            ref: R,
+            role: "menu",
+            "aria-label": `${c.label} options`,
+            ...M("actionmenu"),
+            style: B(K, C),
+            children: c.options.map((e) => /* @__PURE__ */ g(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                style: { ...N, alignItems: "flex-start" },
+                onClick: () => S(c, e),
+                children: [
+                  /* @__PURE__ */ g(
+                    "span",
+                    {
+                      style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 2
+                      },
+                      children: [
+                        e.label,
+                        e.description ? /* @__PURE__ */ n("span", { style: le, children: e.description }) : null
+                      ]
+                    }
+                  ),
+                  c.value === a && e.value === A ? /* @__PURE__ */ n("span", { style: W, children: /* @__PURE__ */ n(D, { size: 11 }) }) : null
+                ]
+              },
+              e.value
+            ))
+          }
+        ) : null
+      ] }),
+      document.body
+    )
+  ] });
+};
+export {
+  ye as ChatModelPicker,
+  ye as default
+};
+//# sourceMappingURL=ChatModelPicker.js.map

package/dist/components/Chat/ChatModelPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatModelPicker.js","sources":["../../../src/components/Chat/ChatModelPicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport Avatar from '../Avatar';\nimport CaretDownIcon from '../CustomIcons/CaretDownIcon';\nimport CaretRightIcon from '../CustomIcons/CaretRightIcon';\nimport CaretUpIcon from '../CustomIcons/CaretUpIcon';\nimport CheckIcon from '../CustomIcons/CheckIcon';\nimport PillButton from '../PillButton';\nimport { pushEscapeLayer } from '../escapeLayers';\nimport { ensureOverlayStyles, overlayIdentity } from '../portalOverlay';\nimport { useTopLayer } from '../topLayer';\n\nexport interface ChatModelSubOption {\n    value: string;\n    label: string;\n    description?: string;\n}\n\nexport interface ChatModelOption {\n    value: string;\n    label: string;\n    /** The provider's mark. A URL, since providers ship logos rather than icon fonts. */\n    iconSrc?: string;\n    /** A second choice the model offers, e.g. how long it may think. */\n    options?: ChatModelSubOption[];\n}\n\nexport interface ChatModelPickerProps {\n    models: ChatModelOption[];\n    value: string;\n    /** The chosen sub-option, when the current model offers them. */\n    optionValue?: string;\n    /** Called with the model, and its sub-option when it has them. */\n    onChange: (model: string, option?: string) => void;\n    disabled?: boolean;\n    /**\n     * Opens upward. On by default: this sits under a composer at the bottom of a column, so\n     * downward is almost always off-screen.\n     */\n    openUp?: boolean;\n    'aria-label'?: string;\n}\n\nconst VIEWPORT_PADDING = 8;\nconst PANEL_MIN_WIDTH = 220;\nconst SUBMENU_MIN_WIDTH = 240;\n\n/**\n * Inline rather than Tailwind: the panel is portalled to `document.body`, which the scoped\n * shadow stylesheet does not reach. Same reason `ActionMenu` styles its popover inline.\n */\nconst panelStyle = (\n    position: { top: number; left: number } | null,\n    minWidth: number,\n): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    minWidth,\n    background: 'var(--malachite-card-background, rgb(255, 255, 255))',\n    border: '1px solid var(--malachite-card-border, rgb(232, 232, 232))',\n    borderRadius: 12,\n    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.08)',\n    padding: 4,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n\nconst ROW_STYLE: React.CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    padding: '6px 10px',\n    borderRadius: 8,\n    border: 'none',\n    background: 'transparent',\n    textAlign: 'left',\n    width: '100%',\n    cursor: 'pointer',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n};\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n    fontSize: 'var(--malachite-font-size-xsmall, 11px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nconst CHECK_STYLE: React.CSSProperties = {\n    marginLeft: 'auto',\n    display: 'inline-flex',\n    color: 'var(--malachite-text-success, rgb(2, 122, 66))',\n};\n\n/**\n * Which model answers, and how hard it may think.\n *\n * Its own component rather than a `Dropdown`: that one is a form select bound to\n * react-hook-form, and this is a menu whose rows open a second menu. Portalled for the same\n * reason `ActionMenu` is — a panel inside the composer would be clipped by it.\n */\nconst ChatModelPicker: React.FC<ChatModelPickerProps> = ({\n    models,\n    value,\n    optionValue,\n    onChange,\n    disabled = false,\n    openUp = true,\n    'aria-label': ariaLabel = 'Model',\n}) => {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<{ top: number; left: number } | null>(null);\n    const [submenuFor, setSubmenuFor] = useState<string | null>(null);\n    const [submenuPosition, setSubmenuPosition] = useState<{ top: number; left: number } | null>(\n        null,\n    );\n    const triggerRef = useRef<HTMLDivElement>(null);\n    const panelRef = useRef<HTMLDivElement>(null);\n    const submenuRef = useRef<HTMLDivElement>(null);\n\n    useTopLayer(panelRef, open);\n\n    const selected = models.find((model) => model.value === value);\n\n    const place = useCallback(() => {\n        const trigger = triggerRef.current;\n        const panel = panelRef.current;\n\n        if (!trigger) {\n            return;\n        }\n\n        const rect = trigger.getBoundingClientRect();\n        const width = panel?.offsetWidth || PANEL_MIN_WIDTH;\n        const height = panel?.offsetHeight || 0;\n        const maxLeft = window.innerWidth - width - VIEWPORT_PADDING;\n        const left = Math.max(VIEWPORT_PADDING, Math.min(rect.right - width, maxLeft));\n        // Flips when the chosen side has no room, so the panel is never off-screen.\n        const above = rect.top - height - 4;\n        const below = rect.bottom + 4;\n        const fitsAbove = above >= VIEWPORT_PADDING;\n        const fitsBelow = height === 0 || below + height <= window.innerHeight - VIEWPORT_PADDING;\n        const top = openUp ? (fitsAbove ? above : below) : fitsBelow ? below : above;\n\n        setPosition({ top, left });\n    }, [openUp]);\n\n    useEffect(() => {\n        if (!open) {\n            setSubmenuFor(null);\n            setSubmenuPosition(null);\n            return;\n        }\n\n        place();\n\n        const reposition = () => place();\n        const closeOnOutside = (event: MouseEvent) => {\n            // `composedPath`, not `event.target`: this listener is on `document`, and the\n            // trigger lives in a shadow root, so the target is retargeted to the shadow HOST.\n            // `contains` then says the trigger was not clicked, the menu closes on mousedown,\n            // and the click that follows toggles it straight back open.\n            const path = event.composedPath();\n            const insideOwnUi = [triggerRef.current, panelRef.current, submenuRef.current].some(\n                (node) => node !== null && path.includes(node),\n            );\n\n            if (!insideOwnUi) {\n                setOpen(false);\n            }\n        };\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n\n        window.addEventListener('scroll', reposition, true);\n        window.addEventListener('resize', reposition);\n        document.addEventListener('mousedown', closeOnOutside, true);\n\n        return () => {\n            window.removeEventListener('scroll', reposition, true);\n            window.removeEventListener('resize', reposition);\n            document.removeEventListener('mousedown', closeOnOutside, true);\n            popEscapeLayer();\n        };\n    }, [open, place]);\n\n    useInsertionEffect(() => {\n        if (open) {\n            ensureOverlayStyles();\n        }\n    }, [open]);\n\n    const openSubmenu = (model: ChatModelOption, row: HTMLElement) => {\n        if (!model.options?.length) {\n            setSubmenuFor(null);\n            return;\n        }\n\n        const rect = row.getBoundingClientRect();\n        const panelLeft = panelRef.current?.getBoundingClientRect().left ?? rect.left;\n        // To the left of the parent panel by default, flipping right when that would clip.\n        const toLeft = panelLeft - SUBMENU_MIN_WIDTH - 4;\n        const left =\n            toLeft >= VIEWPORT_PADDING\n                ? toLeft\n                : Math.min(\n                      (panelRef.current?.getBoundingClientRect().right ?? rect.right) + 4,\n                      window.innerWidth - SUBMENU_MIN_WIDTH - VIEWPORT_PADDING,\n                  );\n\n        setSubmenuFor(model.value);\n        setSubmenuPosition({ top: rect.top, left });\n    };\n\n    const choose = (model: ChatModelOption, option?: ChatModelSubOption) => {\n        onChange(model.value, option?.value);\n        setOpen(false);\n    };\n\n    const submenuModel = models.find((model) => model.value === submenuFor);\n\n    return (\n        <>\n            <div ref={triggerRef} className=\"inline-flex\">\n                <PillButton\n                    label={selected?.label ?? value}\n                    icon={\n                        selected?.iconSrc ? (\n                            <Avatar src={selected.iconSrc} name={selected.label} size={14} />\n                        ) : undefined\n                    }\n                    trailingIcon={\n                        openUp ? (\n                            <CaretUpIcon size={10} />\n                        ) : (\n                            <CaretDownIcon size={10} />\n                        )\n                    }\n                    shape=\"tab\"\n                    size=\"small\"\n                    disabled={disabled}\n                    onClick={() => setOpen((wasOpen) => !wasOpen)}\n                />\n            </div>\n            {open &&\n                createPortal(\n                    <>\n                        <div\n                            ref={panelRef}\n                            role=\"menu\"\n                            aria-label={ariaLabel}\n                            // `actionmenu` rather than a new kind: the identity is a\n                            // host-facing allow-list, so a new class would need every host to\n                            // update its CSS, and this panel is an action menu in shape.\n                            {...overlayIdentity('actionmenu')}\n                            style={panelStyle(position, PANEL_MIN_WIDTH)}\n                        >\n                            {models.map((model) => (\n                                <button\n                                    key={model.value}\n                                    type=\"button\"\n                                    role=\"menuitem\"\n                                    aria-haspopup={model.options?.length ? 'menu' : undefined}\n                                    style={ROW_STYLE}\n                                    onMouseEnter={(event) =>\n                                        openSubmenu(model, event.currentTarget)\n                                    }\n                                    onFocus={(event) => openSubmenu(model, event.currentTarget)}\n                                    onClick={() =>\n                                        model.options?.length\n                                            ? choose(model, model.options[0])\n                                            : choose(model)\n                                    }\n                                >\n                                    {model.iconSrc ? (\n                                        <Avatar src={model.iconSrc} name={model.label} size={14} />\n                                    ) : null}\n                                    {model.label}\n                                    {model.value === value ? (\n                                        <span style={CHECK_STYLE}>\n                                            <CheckIcon size={11} />\n                                        </span>\n                                    ) : null}\n                                    {model.options?.length ? (\n                                        <span\n                                            style={{\n                                                marginLeft: model.value === value ? 4 : 'auto',\n                                                display: 'inline-flex',\n                                                color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n                                            }}\n                                        >\n                                            <CaretRightIcon size={10} />\n                                        </span>\n                                    ) : null}\n                                </button>\n                            ))}\n                        </div>\n                        {submenuModel?.options?.length ? (\n                            <div\n                                ref={submenuRef}\n                                role=\"menu\"\n                                aria-label={`${submenuModel.label} options`}\n                                {...overlayIdentity('actionmenu')}\n                                style={panelStyle(submenuPosition, SUBMENU_MIN_WIDTH)}\n                            >\n                                {submenuModel.options.map((option) => (\n                                    <button\n                                        key={option.value}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        style={{ ...ROW_STYLE, alignItems: 'flex-start' }}\n                                        onClick={() => choose(submenuModel, option)}\n                                    >\n                                        <span\n                                            style={{\n                                                display: 'flex',\n                                                flexDirection: 'column',\n                                                gap: 2,\n                                            }}\n                                        >\n                                            {option.label}\n                                            {option.description ? (\n                                                <span style={DESCRIPTION_STYLE}>\n                                                    {option.description}\n                                                </span>\n                                            ) : null}\n                                        </span>\n                                        {submenuModel.value === value &&\n                                        option.value === optionValue ? (\n                                            <span style={CHECK_STYLE}>\n                                                <CheckIcon size={11} />\n                                            </span>\n                                        ) : null}\n                                    </button>\n                                ))}\n                            </div>\n                        ) : null}\n                    </>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default ChatModelPicker;\nexport { ChatModelPicker };\n"],"names":["VIEWPORT_PADDING","PANEL_MIN_WIDTH","SUBMENU_MIN_WIDTH","panelStyle","position","minWidth","ROW_STYLE","DESCRIPTION_STYLE","CHECK_STYLE","ChatModelPicker","models","value","optionValue","onChange","disabled","openUp","ariaLabel","open","setOpen","useState","setPosition","submenuFor","setSubmenuFor","submenuPosition","setSubmenuPosition","triggerRef","useRef","panelRef","submenuRef","useTopLayer","selected","model","place","useCallback","trigger","panel","rect","width","height","maxLeft","left","above","below","fitsAbove","fitsBelow","useEffect","reposition","closeOnOutside","event","path","node","popEscapeLayer","pushEscapeLayer","useInsertionEffect","ensureOverlayStyles","openSubmenu","row","_a","toLeft","_b","_c","choose","option","submenuModel","jsxs","Fragment","jsx","PillButton","Avatar","CaretUpIcon","CaretDownIcon","wasOpen","createPortal","overlayIdentity","CheckIcon","CaretRightIcon"],"mappings":"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"}

package/dist/components/Chat/ChatRoot.js

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+const e = ({ children: l, className: o = "" }) => /* @__PURE__ */ t("div", { className: `flex h-full min-h-0 min-w-0 flex-col ${o}`, children: l });
+export {
+  e as default
+};
+//# sourceMappingURL=ChatRoot.js.map

package/dist/components/Chat/ChatRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatRoot.js","sources":["../../../src/components/Chat/ChatRoot.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ChatProps {\n    children?: React.ReactNode;\n    className?: string;\n}\n\n/**\n * A chat column: a transcript that takes the available height above a composer that keeps its\n * own.\n *\n * `min-h-0` on the column is what lets `Chat.Thread` scroll rather than the page. Without it,\n * a flex child's implied `min-height: auto` grows the column past its parent and the scroll\n * moves to whichever ancestor can take it — which is not the same element in every engine.\n */\nconst ChatRoot: React.FC<ChatProps> = ({ children, className = '' }) => (\n    <div className={`flex h-full min-h-0 min-w-0 flex-col ${className}`}>{children}</div>\n);\n\nexport default ChatRoot;\n"],"names":["ChatRoot","children","className","jsx"],"mappings":";AAeA,MAAMA,IAAgC,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,GAAA,MAC3D,gBAAAC,EAAC,OAAA,EAAI,WAAW,wCAAwCD,CAAS,IAAK,UAAAD,EAAA,CAAS;"}

package/dist/components/Chat/ChatSuggestion.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { FOCUS_RING as o } from "../focusRing.js";
+const i = "self-start max-w-full text-left whitespace-normal transition-colors cursor-pointer text-[12px] leading-[1.45] rounded-[var(--malachite-radius-lg,8px)] border border-solid px-2.5 py-[7px] disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none", n = "bg-[var(--malachite-assistant-surface-background)] hover:bg-[var(--malachite-tag-assistant-background)] border-[var(--malachite-assistant-surface-border)] text-[var(--malachite-assistant-surface-foreground)]", d = ({
+  text: a,
+  onPick: t,
+  disabled: r = !1,
+  className: e = ""
+}) => /* @__PURE__ */ s(
+  "button",
+  {
+    type: "button",
+    className: `${o} ${i} ${n} ${e}`,
+    disabled: r,
+    onClick: () => t(a),
+    children: a
+  }
+);
+export {
+  d as ChatSuggestion,
+  d as default
+};
+//# sourceMappingURL=ChatSuggestion.js.map

package/dist/components/Chat/ChatSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSuggestion.js","sources":["../../../src/components/Chat/ChatSuggestion.tsx"],"sourcesContent":["import React from 'react';\nimport { FOCUS_RING } from '../focusRing';\n\nexport interface ChatSuggestionProps {\n    text: string;\n    /** Fills the composer — never sends. A suggestion is a starting point the reader edits,\n     *  not a message the component decides to submit on their behalf. */\n    onPick: (text: string) => void;\n    disabled?: boolean;\n    className?: string;\n}\n\nconst BASE_CLASSES =\n    'self-start max-w-full text-left whitespace-normal transition-colors cursor-pointer text-[12px] leading-[1.45] rounded-[var(--malachite-radius-lg,8px)] border border-solid px-2.5 py-[7px] disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none';\n\nconst COLOR_CLASSES =\n    'bg-[var(--malachite-assistant-surface-background)] hover:bg-[var(--malachite-tag-assistant-background)] border-[var(--malachite-assistant-surface-border)] text-[var(--malachite-assistant-surface-foreground)]';\n\n/**\n * A tappable example prompt under `Chat.Thread`'s empty state — click fills the composer,\n * it never sends. `onPick` receives its own `text` so a caller wires it with no closure.\n */\nconst ChatSuggestion: React.FC<ChatSuggestionProps> = ({\n    text,\n    onPick,\n    disabled = false,\n    className = '',\n}) => (\n    <button\n        type=\"button\"\n        className={`${FOCUS_RING} ${BASE_CLASSES} ${COLOR_CLASSES} ${className}`}\n        disabled={disabled}\n        onClick={() => onPick(text)}\n    >\n        {text}\n    </button>\n);\n\nexport default ChatSuggestion;\nexport { ChatSuggestion };\n"],"names":["BASE_CLASSES","COLOR_CLASSES","ChatSuggestion","text","onPick","disabled","className","jsx","FOCUS_RING"],"mappings":";;AAYA,MAAMA,IACF,2QAEEC,IACF,mNAMEC,IAAgD,CAAC;AAAA,EACnD,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,MAAK;AAAA,IACL,WAAW,GAAGC,CAAU,IAAIR,CAAY,IAAIC,CAAa,IAAIK,CAAS;AAAA,IACtE,UAAAD;AAAA,IACA,SAAS,MAAMD,EAAOD,CAAI;AAAA,IAEzB,UAAAA;AAAA,EAAA;AACL;"}