@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/chat/EffortControl.js

@@ -0,0 +1,116 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { cn as a } from "../../lib/cn.js";
+import { Icon as w } from "../Icon.js";
+import { Tooltip as I, Popover as L } from "../Popover.js";
+import { Slider as _ } from "../Slider.js";
+import { useUiStrings as j } from "../../lib/i18n/provider.js";
+const C = ["minimal", "low", "medium", "high", "max"];
+function k({
+  levels: d,
+  value: l,
+  onValueChange: b,
+  help: p,
+  inline: f = !1,
+  side: v = "top",
+  align: y = "start",
+  disabled: c = !1,
+  className: u
+}) {
+  const r = j().chat.effortControl, o = g(
+    () => d ?? C.map((t) => ({ id: t, ...r.levels[t] })),
+    [d, r]
+  ), m = Math.max(
+    0,
+    o.findIndex((t) => t.id === l)
+  ), n = o[m], N = g(
+    () => o.map((t, i) => ({ value: i })),
+    [o]
+  ), x = (
+    /* A stable hook for the overlay gate. Base UI's slider is an
+       `input[type=range]`, not `role="slider"`, and the panel has no other
+       unique selector — a marker class is how the tooltip and toast cases
+       already solve this. */
+    /* @__PURE__ */ s("div", { "data-effort-panel": "", className: a("flex flex-col gap-1", f && u), children: [
+      /* @__PURE__ */ s("div", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-primary", children: r.title }),
+        /* @__PURE__ */ e("span", { className: "text-sm text-secondary", children: n?.label }),
+        p && /* @__PURE__ */ e(I, { content: p, children: /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": r.help,
+            className: "dx-tap ml-auto cursor-pointer rounded-full text-tertiary outline-none transition-colors duration-(--dur-fast) hover:text-secondary focus-visible:ring-2 focus-visible:ring-focus-ring",
+            children: /* @__PURE__ */ e(w, { name: "circle-help", size: "xs" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e(
+        _,
+        {
+          value: m,
+          onValueChange: (t) => {
+            const i = Array.isArray(t) ? t[0] : t, h = o[i];
+            h && b(h.id);
+          },
+          min: 0,
+          max: o.length - 1,
+          step: 1,
+          marks: N,
+          showValue: !1,
+          tooltip: "never",
+          disabled: c,
+          "aria-label": r.title,
+          className: "w-56"
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-2xs text-tertiary", children: [
+        /* @__PURE__ */ e("span", { children: r.faster }),
+        /* @__PURE__ */ e("span", { children: r.smarter })
+      ] }),
+      n?.description && /* @__PURE__ */ e("p", { className: "mt-1 max-w-56 text-2xs text-tertiary", children: n.description })
+    ] })
+  );
+  return f ? x : /* @__PURE__ */ e(
+    L,
+    {
+      side: v,
+      align: y,
+      className: a("w-auto p-3", u),
+      trigger: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          disabled: c,
+          "aria-label": r.triggerLabel(n?.label ?? l),
+          className: a(
+            "dx-tap inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium",
+            "text-secondary transition-colors duration-(--dur-fast)",
+            "hover:bg-surface-hover hover:text-primary",
+            "outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
+            c && "pointer-events-none opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex items-end gap-px", children: o.map((t, i) => /* @__PURE__ */ e(
+              "span",
+              {
+                className: a(
+                  "w-0.5 rounded-full transition-colors duration-(--dur-fast)",
+                  i <= m ? "bg-control" : "bg-border"
+                ),
+                style: { height: `${4 + i * 2}px` }
+              },
+              t.id
+            )) }),
+            n?.label ?? l
+          ]
+        }
+      ),
+      children: x
+    }
+  );
+}
+export {
+  k as EffortControl
+};
+//# sourceMappingURL=EffortControl.js.map

package/dist/components/chat/EffortControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EffortControl.js","sources":["../../../src/components/chat/EffortControl.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { Icon } from \"../Icon\";\nimport { Popover, Tooltip } from \"../Popover\";\nimport { Slider } from \"../Slider\";\n\n/* ============================================================================\n   EFFORT CONTROL\n   How hard the model should think, on a named scale.\n\n   A SLIDER OVER A LIST, deliberately. The levels are ORDERED and the ordering\n   is the whole meaning — every step costs latency and buys quality, and the\n   only question anyone is actually asking is \"further this way, or further\n   that way\". A menu of five names hides the axis and makes the reader\n   reconstruct it from adjectives.\n\n   The ends are labelled with what they DO (\"Faster\" / \"Smarter\"), not with the\n   level names. A person choosing effort is trading two things they care about\n   against each other; \"Minimal → Max\" restates the control's own units back at\n   them and answers nothing.\n   ========================================================================= */\n\nexport interface EffortLevel {\n  id: string;\n  /** \"High\" — appears on the trigger and above the slider. */\n  label: string;\n  /** One line explaining the trade at this stop. */\n  description?: ReactNode;\n}\n\n/** The built-in scale, lowest first. The ids and their order are data owned here; a catalog supplies only the words for each id. */\nconst BUILT_IN_LEVEL_IDS = [\"minimal\", \"low\", \"medium\", \"high\", \"max\"] as const;\n\nexport interface EffortControlProps {\n  /** The scale, lowest first. @default the built-in five-step scale */\n  levels?: EffortLevel[];\n  value: string;\n  onValueChange: (id: string) => void;\n  /** Explains the whole control, behind the header's help affordance. */\n  help?: ReactNode;\n  /** Renders the slider inline instead of behind a trigger button. */\n  inline?: boolean;\n  side?: \"top\" | \"bottom\";\n  align?: \"start\" | \"center\" | \"end\";\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function EffortControl({\n  levels: levelsProp,\n  value,\n  onValueChange,\n  help,\n  inline = false,\n  side = \"top\",\n  align = \"start\",\n  disabled = false,\n  className,\n}: EffortControlProps) {\n  const strings = useUiStrings().chat.effortControl;\n  const levels = useMemo(\n    () => levelsProp ?? BUILT_IN_LEVEL_IDS.map((id): EffortLevel => ({ id, ...strings.levels[id] })),\n    [levelsProp, strings],\n  );\n  const index = Math.max(\n    0,\n    levels.findIndex((level) => level.id === value),\n  );\n  const current = levels[index];\n\n  /* Marks carry no text. The stops are visible as positions, and the name of\n     the one you are on is already in the header — repeating all five under a\n     200px track produces overlapping labels at every size we support. */\n  const marks = useMemo(\n    () => levels.map((_level, position) => ({ value: position })),\n    [levels],\n  );\n\n  const body = (\n    /* A stable hook for the overlay gate. Base UI's slider is an\n       `input[type=range]`, not `role=\"slider\"`, and the panel has no other\n       unique selector — a marker class is how the tooltip and toast cases\n       already solve this. */\n    <div data-effort-panel=\"\" className={cn(\"flex flex-col gap-1\", inline && className)}>\n      <div className=\"flex items-baseline gap-1.5\">\n        <span className=\"text-sm font-semibold text-primary\">{strings.title}</span>\n        <span className=\"text-sm text-secondary\">{current?.label}</span>\n        {help && (\n          <Tooltip content={help}>\n            <button\n              type=\"button\"\n              aria-label={strings.help}\n              className=\"dx-tap ml-auto cursor-pointer rounded-full text-tertiary outline-none transition-colors duration-(--dur-fast) hover:text-secondary focus-visible:ring-2 focus-visible:ring-focus-ring\"\n            >\n              <Icon name=\"circle-help\" size=\"xs\" />\n            </button>\n          </Tooltip>\n        )}\n      </div>\n\n      <Slider\n        value={index}\n        onValueChange={(next) => {\n          const position = Array.isArray(next) ? next[0] : next;\n          const level = levels[position];\n          if (level) onValueChange(level.id);\n        }}\n        min={0}\n        max={levels.length - 1}\n        step={1}\n        marks={marks}\n        showValue={false}\n        /* I18N-ALLOW: Slider tooltip display mode token, not text */\n        tooltip=\"never\"\n        disabled={disabled}\n        aria-label={strings.title}\n        className=\"w-56\"\n      />\n\n      <div className=\"flex items-center justify-between text-2xs text-tertiary\">\n        <span>{strings.faster}</span>\n        <span>{strings.smarter}</span>\n      </div>\n\n      {current?.description && (\n        <p className=\"mt-1 max-w-56 text-2xs text-tertiary\">{current.description}</p>\n      )}\n    </div>\n  );\n\n  if (inline) return body;\n\n  return (\n    <Popover\n      side={side}\n      align={align}\n      className={cn(\"w-auto p-3\", className)}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={strings.triggerLabel(current?.label ?? value)}\n          className={cn(\n            \"dx-tap inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium\",\n            \"text-secondary transition-colors duration-(--dur-fast)\",\n            \"hover:bg-surface-hover hover:text-primary\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\",\n            disabled && \"pointer-events-none opacity-50\",\n          )}\n        >\n          {/* A tiny bar chart of the current level: the value is readable\n              before the popover opens, which is the point of a status control. */}\n          <span aria-hidden className=\"flex items-end gap-px\">\n            {levels.map((level, position) => (\n              <span\n                key={level.id}\n                className={cn(\n                  \"w-0.5 rounded-full transition-colors duration-(--dur-fast)\",\n                  position <= index ? \"bg-control\" : \"bg-border\",\n                )}\n                style={{ height: `${4 + position * 2}px` }}\n              />\n            ))}\n          </span>\n          {current?.label ?? value}\n        </button>\n      }\n    >\n      {body}\n    </Popover>\n  );\n}\n"],"names":["BUILT_IN_LEVEL_IDS","EffortControl","levelsProp","value","onValueChange","help","inline","side","align","disabled","className","strings","useUiStrings","levels","useMemo","id","index","level","current","marks","_level","position","body","jsxs","cn","jsx","Tooltip","Icon","Slider","next","Popover"],"mappings":"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"}

package/dist/components/chat/FileCover.js

@@ -0,0 +1,78 @@
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
+import { useRef as j, useState as b, useEffect as w } from "react";
+import { cn as E } from "../../lib/cn.js";
+import { Icon as F } from "../Icon.js";
+import { VideoPlayer as R } from "../VideoPlayer.js";
+import { isVideoFile as O, isImageFile as U, fileIconFor as V } from "./file-icon.js";
+const P = "400px", S = () => typeof IntersectionObserver < "u";
+function k({
+  file: e,
+  aspect: p = "16 / 9",
+  alt: m,
+  onDownload: u,
+  className: x,
+  ref: n
+}) {
+  const d = j(null), [c, y] = b(!S()), [f, g] = b(null), v = O(e), a = v && !!e.url;
+  w(() => {
+    const t = d.current;
+    if (!a || c || !t) return;
+    const l = new IntersectionObserver(
+      (h) => {
+        h.some((N) => N.isIntersecting) && (y(!0), l.disconnect());
+      },
+      { rootMargin: P }
+    );
+    return l.observe(t), () => l.disconnect();
+  }, [a, c]);
+  const o = U(e) ? e.thumbnailUrl ?? e.url : void 0, I = !!o && f !== o, i = v && e.thumbnailUrl !== f ? e.thumbnailUrl : void 0;
+  let s;
+  return a && c ? s = /* @__PURE__ */ r(
+    R,
+    {
+      src: e.url,
+      title: e.name,
+      poster: e.thumbnailUrl,
+      onDownload: u ? () => u(e) : void 0,
+      className: "size-full rounded-none"
+    }
+  ) : I ? s = /* @__PURE__ */ r(
+    "img",
+    {
+      src: o,
+      alt: m ?? e.name,
+      loading: "lazy",
+      decoding: "async",
+      onError: () => g(o),
+      className: "size-full object-cover"
+    }
+  ) : i ? s = /* @__PURE__ */ r(
+    "img",
+    {
+      src: i,
+      alt: m ?? e.name,
+      loading: "lazy",
+      decoding: "async",
+      onError: () => g(i),
+      className: "size-full object-cover"
+    }
+  ) : s = /* @__PURE__ */ z("div", { className: "flex size-full flex-col items-center justify-center gap-2 bg-surface-inset p-3 text-center", children: [
+    /* @__PURE__ */ r(F, { name: V(e), size: "lg", className: "text-tertiary" }),
+    /* @__PURE__ */ r("span", { className: "max-w-full truncate text-xs text-secondary", children: e.name })
+  ] }), /* @__PURE__ */ r(
+    "div",
+    {
+      ref: (t) => {
+        d.current = t, typeof n == "function" ? n(t) : n && (n.current = t);
+      },
+      "data-file-cover": e.id,
+      style: { aspectRatio: p },
+      className: E("relative w-full overflow-hidden bg-surface-inset", x),
+      children: s
+    }
+  );
+}
+export {
+  k as FileCover
+};
+//# sourceMappingURL=FileCover.js.map

package/dist/components/chat/FileCover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileCover.js","sources":["../../../src/components/chat/FileCover.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Icon } from \"../Icon\";\nimport { VideoPlayer } from \"../VideoPlayer\";\nimport { fileIconFor, isImageFile, isVideoFile } from \"./file-icon\";\nimport type { ChatFile } from \"./types\";\n\n/* ============================================================================\n   FILE COVER\n   A file shown in a box whose size never depends on the file — the Trello-style\n   cover of a card.\n\n   ONE BOX IN EVERY STATE. `aspect-ratio` and `w-full` hold in loading, loaded\n   and failed alike, so a lane of covers does not jump when a picture arrives or\n   a video turns out not to play. The media fills the box: images are cropped\n   (`object-cover`, a cover is a thumbnail, not an inspection), video letterboxes\n   (`object-contain` on black, so the native controls are never cropped).\n\n   WHAT IT RENDERS: an image, an inline VideoPlayer for video, and for anything\n   else — or any image that fails to load — the file-type icon centred with the\n   file name. Never an iframe or an <object>: an embed of an arbitrary\n   attachment is a security surface, and a PDF cover is an icon and a name.\n\n   NO LINK OR BUTTON OF ITS OWN. A consumer wraps image and icon covers in\n   whatever opens the file, and a `<video controls>` inside an `<a>` is invalid,\n   so the cover must stay inert; a video's controls are the video's.\n\n   VIDEO MOUNTS WHEN NEAR THE VIEWPORT. A lane of forty covers must not create\n   forty media elements at once, so the `<video>` is mounted only once the box\n   is within a screenful of the viewport, and the poster or the icon holds the\n   box until then.\n   ========================================================================= */\n\nexport interface FileCoverProps {\n  file: ChatFile;\n  /** CSS `aspect-ratio` of the box. */\n  aspect?: number | string;\n  /** Alt text of an image cover. Defaults to the file name. */\n  alt?: string;\n  /** Offered by a video's can't-play fallback. */\n  onDownload?: (file: ChatFile) => void;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** How far outside the viewport a video cover starts loading. */\nconst NEAR_VIEWPORT = \"400px\";\n\n/* No IntersectionObserver means no way to know what is near the viewport, so\n   every cover counts as near — the same as before this existed. */\nconst canObserve = () => typeof IntersectionObserver !== \"undefined\";\n\nexport function FileCover({\n  file,\n  aspect = \"16 / 9\",\n  alt,\n  onDownload,\n  className,\n  ref,\n}: FileCoverProps) {\n  const boxRef = useRef<HTMLDivElement>(null);\n  const [near, setNear] = useState(!canObserve());\n  const [failedImage, setFailedImage] = useState<string | null>(null);\n\n  const isVideo = isVideoFile(file);\n  const video = isVideo && !!file.url;\n  useEffect(() => {\n    const box = boxRef.current;\n    if (!video || near || !box) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setNear(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: NEAR_VIEWPORT },\n    );\n    observer.observe(box);\n    return () => observer.disconnect();\n  }, [video, near]);\n\n  const imageSrc = isImageFile(file) ? (file.thumbnailUrl ?? file.url) : undefined;\n  const showImage = !!imageSrc && failedImage !== imageSrc;\n  const poster = isVideo && file.thumbnailUrl !== failedImage ? file.thumbnailUrl : undefined;\n\n  let body;\n  if (video && near) {\n    body = (\n      <VideoPlayer\n        src={file.url!}\n        title={file.name}\n        poster={file.thumbnailUrl}\n        onDownload={onDownload ? () => onDownload(file) : undefined}\n        className=\"size-full rounded-none\"\n      />\n    );\n  } else if (showImage) {\n    body = (\n      <img\n        src={imageSrc}\n        alt={alt ?? file.name}\n        loading=\"lazy\"\n        decoding=\"async\"\n        onError={() => setFailedImage(imageSrc!)}\n        className=\"size-full object-cover\"\n      />\n    );\n  } else if (poster) {\n    body = (\n      <img\n        src={poster}\n        alt={alt ?? file.name}\n        loading=\"lazy\"\n        decoding=\"async\"\n        onError={() => setFailedImage(poster)}\n        className=\"size-full object-cover\"\n      />\n    );\n  } else {\n    body = (\n      <div className=\"flex size-full flex-col items-center justify-center gap-2 bg-surface-inset p-3 text-center\">\n        <Icon name={fileIconFor(file)} size=\"lg\" className=\"text-tertiary\" />\n        <span className=\"max-w-full truncate text-xs text-secondary\">{file.name}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={(node) => {\n        boxRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      data-file-cover={file.id}\n      style={{ aspectRatio: aspect }}\n      className={cn(\"relative w-full overflow-hidden bg-surface-inset\", className)}\n    >\n      {body}\n    </div>\n  );\n}\n"],"names":["NEAR_VIEWPORT","canObserve","FileCover","file","aspect","alt","onDownload","className","ref","boxRef","useRef","near","setNear","useState","failedImage","setFailedImage","isVideo","isVideoFile","video","useEffect","box","observer","entries","entry","imageSrc","isImageFile","showImage","poster","body","jsx","VideoPlayer","jsxs","Icon","fileIconFor","node","cn"],"mappings":";;;;;;AA8CA,MAAMA,IAAgB,SAIhBC,IAAa,MAAM,OAAO,uBAAyB;AAElD,SAASC,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,KAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AACF,GAAmB;AACjB,QAAMC,IAASC,EAAuB,IAAI,GACpC,CAACC,GAAMC,CAAO,IAAIC,EAAS,CAACZ,GAAY,GACxC,CAACa,GAAaC,CAAc,IAAIF,EAAwB,IAAI,GAE5DG,IAAUC,EAAYd,CAAI,GAC1Be,IAAQF,KAAW,CAAC,CAACb,EAAK;AAChC,EAAAgB,EAAU,MAAM;AACd,UAAMC,IAAMX,EAAO;AACnB,QAAI,CAACS,KAASP,KAAQ,CAACS,EAAK;AAC5B,UAAMC,IAAW,IAAI;AAAA,MACnB,CAACC,MAAY;AACX,QAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CX,EAAQ,EAAI,GACZS,EAAS,WAAA;AAAA,MAEb;AAAA,MACA,EAAE,YAAYrB,EAAA;AAAA,IAAc;AAE9B,WAAAqB,EAAS,QAAQD,CAAG,GACb,MAAMC,EAAS,WAAA;AAAA,EACxB,GAAG,CAACH,GAAOP,CAAI,CAAC;AAEhB,QAAMa,IAAWC,EAAYtB,CAAI,IAAKA,EAAK,gBAAgBA,EAAK,MAAO,QACjEuB,IAAY,CAAC,CAACF,KAAYV,MAAgBU,GAC1CG,IAASX,KAAWb,EAAK,iBAAiBW,IAAcX,EAAK,eAAe;AAElF,MAAIyB;AACJ,SAAIV,KAASP,IACXiB,IACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAK3B,EAAK;AAAA,MACV,OAAOA,EAAK;AAAA,MACZ,QAAQA,EAAK;AAAA,MACb,YAAYG,IAAa,MAAMA,EAAWH,CAAI,IAAI;AAAA,MAClD,WAAU;AAAA,IAAA;AAAA,EAAA,IAGLuB,IACTE,IACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKL;AAAA,MACL,KAAKnB,KAAOF,EAAK;AAAA,MACjB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,SAAS,MAAMY,EAAeS,CAAS;AAAA,MACvC,WAAU;AAAA,IAAA;AAAA,EAAA,IAGLG,IACTC,IACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKF;AAAA,MACL,KAAKtB,KAAOF,EAAK;AAAA,MACjB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,SAAS,MAAMY,EAAeY,CAAM;AAAA,MACpC,WAAU;AAAA,IAAA;AAAA,EAAA,IAIdC,IACE,gBAAAG,EAAC,OAAA,EAAI,WAAU,8FACb,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAK,MAAMC,EAAY9B,CAAI,GAAG,MAAK,MAAK,WAAU,iBAAgB;AAAA,IACnE,gBAAA0B,EAAC,QAAA,EAAK,WAAU,8CAA8C,YAAK,KAAA,CAAK;AAAA,EAAA,GAC1E,GAKF,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,CAACK,MAAS;AACb,QAAAzB,EAAO,UAAUyB,GACb,OAAO1B,KAAQ,aAAYA,EAAI0B,CAAI,IAC9B1B,QAAS,UAAU0B;AAAA,MAC9B;AAAA,MACA,mBAAiB/B,EAAK;AAAA,MACtB,OAAO,EAAE,aAAaC,EAAA;AAAA,MACtB,WAAW+B,EAAG,oDAAoD5B,CAAS;AAAA,MAE1E,UAAAqB;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/chat/Message.js

@@ -0,0 +1,356 @@
+import { jsxs as a, Fragment as u, jsx as t } from "react/jsx-runtime";
+import { useState as L } from "react";
+import { cn as l } from "../../lib/cn.js";
+import { copyText as V } from "../../lib/clipboard.js";
+import { Icon as d } from "../Icon.js";
+import { Avatar as W } from "../Avatar.js";
+import { Tooltip as $ } from "../Popover.js";
+import { Collapsible as A } from "../Surface.js";
+import { RelativeTime as q } from "../RelativeTime.js";
+import { CodeBlock as F } from "../Markdown.js";
+import { StreamingMarkdown as G } from "./StreamingMarkdown.js";
+import { AttachmentList as J, Attachment as K } from "./Attachment.js";
+import { ChatStatus as O } from "./ContextMeter.js";
+import { useUiStrings as f } from "../../lib/i18n/provider.js";
+const Q = {
+  running: { icon: "loader-circle", className: "animate-spin text-accent-text" },
+  success: { icon: "check", className: "text-success" },
+  error: { icon: "circle-x", className: "text-danger" }
+};
+function X({ part: e, defaultOpen: s = !1, className: n }) {
+  const o = f().chat.message, m = Q[e.status], { added: c, removed: i } = e.stats ?? {}, r = /* @__PURE__ */ a("span", { className: "flex w-full items-center gap-2 text-left", children: [
+    /* @__PURE__ */ t(d, { name: m.icon, size: "xs", className: l("shrink-0", m.className) }),
+    /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-xs text-secondary", children: e.status === "running" ? /* @__PURE__ */ t(O, { children: e.summary }) : e.summary }),
+    c !== void 0 && c > 0 && /* @__PURE__ */ a("span", { className: "shrink-0 font-mono text-2xs text-success", children: [
+      "+",
+      c
+    ] }),
+    i !== void 0 && i > 0 && /* @__PURE__ */ a("span", { className: "shrink-0 font-mono text-2xs text-danger", children: [
+      "−",
+      i
+    ] }),
+    e.detail !== void 0 && /* @__PURE__ */ t(
+      d,
+      {
+        name: "chevron-right",
+        size: "xs",
+        className: "shrink-0 text-tertiary transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-fast) group-data-panel-open/collapsible:rotate-90"
+      }
+    )
+  ] });
+  return e.detail === void 0 ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: l(
+        "my-1 flex items-center rounded-md border border-border-subtle bg-surface-raised px-2.5 py-1.5",
+        n
+      ),
+      children: r
+    }
+  ) : /* @__PURE__ */ t(
+    A,
+    {
+      defaultOpen: s,
+      className: l("my-1", n),
+      chevron: !1,
+      triggerClassName: "dx-ground-raised w-full self-stretch border border-border-subtle bg-surface-raised px-2.5 py-1.5 text-left hover:border-border hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-focus-ring",
+      trigger: r,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          tabIndex: 0,
+          role: "region",
+          "aria-label": o.toolOutput(e.name),
+          className: "mt-1 overflow-x-auto rounded-md border border-border-subtle bg-surface-inset px-3 py-2 font-mono text-2xs whitespace-pre text-secondary outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset",
+          children: e.detail
+        }
+      )
+    }
+  );
+}
+function Y({ text: e, label: s, streaming: n }) {
+  const o = f().chat.message;
+  return /* @__PURE__ */ t(
+    A,
+    {
+      className: "my-1.5",
+      chevron: !1,
+      triggerClassName: "gap-1.5 px-1.5 py-1 text-2xs text-tertiary hover:text-secondary focus-visible:ring-2 focus-visible:ring-focus-ring",
+      trigger: /* @__PURE__ */ a(u, { children: [
+        /* @__PURE__ */ t(d, { name: "brain", size: "xs" }),
+        n ? /* @__PURE__ */ t(O, { children: s ?? o.thinking }) : /* @__PURE__ */ t("span", { children: s ?? o.thought }),
+        /* @__PURE__ */ t(
+          d,
+          {
+            name: "chevron-right",
+            size: "xs",
+            className: "transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-fast) group-data-panel-open/collapsible:rotate-90"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ t("div", { className: "mt-1 border-l-2 border-border-subtle pl-3 text-xs whitespace-pre-wrap text-tertiary", children: e })
+    }
+  );
+}
+function M({ reason: e, name: s }) {
+  const n = f().chat.message;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "note",
+      className: "my-1 flex items-start gap-2 rounded-md border border-dashed border-warning-border bg-warning-subtle px-2.5 py-2 text-2xs text-warning-text",
+      children: [
+        /* @__PURE__ */ t(d, { name: "triangle-alert", size: "xs", className: "mt-px shrink-0" }),
+        /* @__PURE__ */ a("span", { children: [
+          /* @__PURE__ */ t("strong", { className: "font-semibold", children: n.unrenderable }),
+          " ",
+          e,
+          " ",
+          /* @__PURE__ */ t("code", { className: "font-mono", children: s })
+        ] })
+      ]
+    }
+  );
+}
+function Z({
+  part: e,
+  context: s,
+  renderers: n,
+  components: o,
+  onPreviewFile: m,
+  onDownloadFile: c
+}) {
+  const i = f().chat.message;
+  switch (e.type) {
+    case "text":
+      return n?.text ? /* @__PURE__ */ t(u, { children: n.text(e, s) }) : /* @__PURE__ */ t(G, { children: e.text });
+    case "code":
+      return n?.code ? /* @__PURE__ */ t(u, { children: n.code(e, s) }) : /* @__PURE__ */ t(F, { code: e.code, language: e.language, filename: e.filename });
+    case "reasoning":
+      return n?.reasoning ? /* @__PURE__ */ t(u, { children: n.reasoning(e, s) }) : /* @__PURE__ */ t(Y, { text: e.text, label: e.label, streaming: e.streaming });
+    case "tool":
+      return n?.tool ? /* @__PURE__ */ t(u, { children: n.tool(e, s) }) : /* @__PURE__ */ t(X, { part: e });
+    case "file":
+      return n?.file ? /* @__PURE__ */ t(u, { children: n.file(e, s) }) : /* @__PURE__ */ t("div", { className: "my-1.5", children: /* @__PURE__ */ t(
+        K,
+        {
+          file: e.file,
+          layout: "row",
+          onPreview: m,
+          onDownload: c
+        }
+      ) });
+    case "component": {
+      const r = o?.[e.component];
+      return r ? /* @__PURE__ */ t(u, { children: r(e.props ?? {}, s) }) : /* @__PURE__ */ t(
+        M,
+        {
+          reason: i.unregisteredComponent,
+          name: e.component
+        }
+      );
+    }
+    default: {
+      const r = e;
+      return /* @__PURE__ */ t(M, { reason: i.unknownPart, name: String(r.type) });
+    }
+  }
+}
+function pe({
+  message: e,
+  renderers: s,
+  components: n,
+  appContext: o,
+  actions: m,
+  state: c,
+  meta: i,
+  grouped: r = !1,
+  showAvatar: y = !0,
+  showUserAvatar: N = !1,
+  showTimestamp: w = !1,
+  persistentToolbar: k = !1,
+  onPreviewFile: g,
+  onDownloadFile: b,
+  className: p,
+  ref: j
+}) {
+  const I = f().chat.message, v = e.role === "user", E = e.role === "system", U = {
+    message: e,
+    streaming: e.streaming ?? !1,
+    app: o
+  }, z = /* @__PURE__ */ a(u, { children: [
+    e.attachments && e.attachments.length > 0 && /* @__PURE__ */ t(
+      J,
+      {
+        files: e.attachments,
+        layout: v ? "tile" : "row",
+        onPreview: g,
+        onDownload: b,
+        className: "mb-2"
+      }
+    ),
+    e.parts.map((h, H) => /* @__PURE__ */ t(
+      Z,
+      {
+        part: h,
+        context: U,
+        renderers: s,
+        components: n,
+        onPreviewFile: g,
+        onDownloadFile: b
+      },
+      H
+    )),
+    e.error && /* @__PURE__ */ a("p", { className: "mt-1.5 flex items-start gap-1.5 text-xs text-danger-text", children: [
+      /* @__PURE__ */ t(d, { name: "circle-alert", size: "xs", className: "mt-px shrink-0" }),
+      e.error
+    ] }),
+    e.streaming && e.parts.length > 0 && /* @__PURE__ */ t(
+      "span",
+      {
+        "aria-hidden": !0,
+        className: "ml-0.5 inline-block h-3.5 w-[2px] translate-y-0.5 animate-pulse rounded-full bg-accent align-baseline"
+      }
+    )
+  ] });
+  if (E)
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        role: "note",
+        className: l(
+          "mx-auto my-1 flex max-w-prose items-center gap-2 rounded-md border border-border-subtle bg-surface-raised px-3 py-1.5 text-2xs text-tertiary",
+          p
+        ),
+        children: [
+          /* @__PURE__ */ t(d, { name: "info", size: "xs", className: "shrink-0" }),
+          /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: z })
+        ]
+      }
+    );
+  const _ = e.parts.map((h) => h.type === "text" ? h.text : h.type === "code" ? h.code : "").filter(Boolean).join(`
+
+`), T = !r && (v ? N : y), C = r ? void 0 : e.author?.name, B = {
+    message: e,
+    time: w ? e.createdAt : void 0,
+    copyText: _,
+    actions: m,
+    state: c,
+    meta: i,
+    persistent: k
+  }, D = T || !!C || !!e.streaming || ne(B);
+  return /* @__PURE__ */ a(
+    "article",
+    {
+      ref: j,
+      "data-message": e.id,
+      "data-role": e.role,
+      className: l("group/message flex w-full flex-col", r ? "mt-1" : "mt-5 first:mt-0", p),
+      children: [
+        D && /* @__PURE__ */ a(
+          "header",
+          {
+            className: l(
+              "flex min-h-6 min-w-0 items-center gap-2 [@media(pointer:coarse)]:min-h-11",
+              r ? "mb-0.5" : "mb-1.5",
+              v && "flex-row-reverse"
+            ),
+            children: [
+              T && /* @__PURE__ */ t(
+                W,
+                {
+                  size: "sm",
+                  name: e.author?.name ?? I.assistant,
+                  src: e.author?.avatarUrl,
+                  fallback: e.author?.icon ? /* @__PURE__ */ t(d, { name: e.author.icon, size: "sm" }) : void 0
+                }
+              ),
+              C && /* @__PURE__ */ t("span", { className: "min-w-0 truncate text-xs font-semibold text-secondary", children: C }),
+              /* @__PURE__ */ t(se, { ...B })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: l("flex min-w-0", v && "justify-end"), children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: l(
+              "min-w-0 max-w-full",
+              v ? "rounded-2xl rounded-tr-md bg-accent-subtle px-3.5 py-2.5 text-sm text-primary" : "flex-1"
+            ),
+            children: z
+          }
+        ) })
+      ]
+    }
+  );
+}
+const ee = 1600, x = (e) => e != null && typeof e != "boolean", P = ({ time: e, copyText: s, actions: n }) => !!e || s.length > 0 || (n?.length ?? 0) > 0, R = (e) => !e.message.streaming && P(e), te = (e) => R(e) || x(e.state) || x(e.meta), ne = (e) => P(e) || x(e.state) || x(e.meta);
+function se(e) {
+  const { message: s, time: n, copyText: o, actions: m, state: c, meta: i, persistent: r } = e, y = s.role === "user", N = f().chat.message, [w, k] = L(!1), g = R(e);
+  if (!te(e)) return null;
+  const b = l(
+    "flex items-center gap-0.5",
+    y && "flex-row-reverse",
+    "opacity-100 transition-[var(--tx-colors),opacity] duration-(--dur-fast)",
+    !r && [
+      "[@media(hover:hover)]:opacity-0",
+      "[@media(hover:hover)]:group-hover/message:opacity-100",
+      "[@media(hover:hover)]:group-focus-within/message:opacity-100"
+    ]
+  );
+  return /* @__PURE__ */ a("div", { "data-testid": "message-meta", className: l("flex shrink-0 items-center gap-0.5 text-2xs text-tertiary", y && "flex-row-reverse"), children: [
+    g && n && /* @__PURE__ */ t("div", { "data-testid": "message-time", className: b, children: /* @__PURE__ */ t(q, { at: n, className: "px-1" }) }),
+    x(i) && /* @__PURE__ */ t("span", { "data-testid": "message-meta-text", className: "inline-flex shrink-0 items-center px-1", children: i }),
+    g && (o.length > 0 || (m?.length ?? 0) > 0) && /* @__PURE__ */ a("div", { "data-testid": "message-toolbar", className: b, children: [
+      o.length > 0 && /* @__PURE__ */ t(
+        S,
+        {
+          action: {
+            id: "copy",
+            icon: w ? "check" : "copy",
+            label: w ? N.copied : N.copy,
+            onClick: () => {
+              V(o).then(
+                () => {
+                  k(!0), window.setTimeout(() => k(!1), ee);
+                },
+                () => {
+                }
+              );
+            }
+          },
+          message: s
+        }
+      ),
+      m?.map((p) => /* @__PURE__ */ t(S, { action: p, message: s }, p.id))
+    ] }),
+    x(c) && /* @__PURE__ */ t("span", { "data-testid": "message-state", className: "inline-flex shrink-0 items-center", children: c })
+  ] });
+}
+function S({
+  action: e,
+  message: s
+}) {
+  return /* @__PURE__ */ t($, { content: e.label, children: /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      onClick: () => e.onClick(s),
+      "aria-label": e.label,
+      "aria-pressed": e.active,
+      className: l(
+        "dx-tap grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-none",
+        "transition-colors duration-(--dur-fast)",
+        "hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-focus-ring",
+        e.active ? "text-accent-text" : "text-tertiary hover:text-primary"
+      ),
+      children: /* @__PURE__ */ t(d, { name: e.icon, size: "xs" })
+    }
+  ) });
+}
+export {
+  pe as Message,
+  Z as MessagePartView,
+  X as ToolCall
+};
+//# sourceMappingURL=Message.js.map