impact-nova 3.0.0-alpha.6 → 3.0.0-alpha.7

package/dist/components/flows/iris-chat/iris-chat-thread.js

@@ -1,33 +1,33 @@
 import { jsxs as o, jsx as e, Fragment as W } from "react/jsx-runtime";
-import { useState as g } from "react";
+import { useState as x } from "react";
 import { Cross as U, ChevronRight as z } from "impact-nova-icons";
 import { Popover as K, PopoverTrigger as H, PopoverContent as L, PopoverHeader as R, PopoverTitle as V, PopoverBody as q } from "../../feedback/popover/popover.js";
-import { ButtonIconTooltip as f } from "../../feedback/tooltip/button-icon-tooltip.js";
+import { ButtonIconTooltip as g } from "../../feedback/tooltip/button-icon-tooltip.js";
 import { Alert as J, AlertIcon as Q, AlertTitle as X, AlertDescription as Y } from "../../feedback/alert/alert.js";
 import { Button as p } from "../../primitives/button/button.js";
 import { IrisAlanGradientIcon as _ } from "../../primitives/iris/iris-alan-gradient-icon.js";
 import { useImpactNovaI18n as b } from "../../../i18n/use-impact-nova-i18n.js";
 import { createComponent as d } from "../../../lib/primitives/create-component.js";
 import { cn as c } from "../../../lib/utils.js";
-import { IrisChatLikeIcon as Z, IrisChatDislikeIcon as E, IrisChatCopyIcon as $, IrisChatSpeakIcon as ee, IrisChatRetryIcon as te, IrisChatAttachIcon as ae, IrisChatSuggestIcon as se } from "./iris-chat-icons.js";
-import { useIrisChatOptional as re } from "./iris-chat-context.js";
+import { IrisChatLikeIcon as Z, IrisChatDislikeIcon as E, IrisChatCopyIcon as $, IrisChatSpeakIcon as ee, IrisChatRetryIcon as te, IrisChatAttachIcon as ae, IrisChatSuggestIcon as re } from "./iris-chat-icons.js";
+import { useIrisChatOptional as se } from "./iris-chat-context.js";
 import { irisChatMessageVariants as ie } from "./iris-chat.variants.js";
 import { readIrisGreetingPeriod as ne, readIrisGreetingMark as oe, readIrisGreetingMessageKey as le } from "./read-iris-greeting-period.js";
 const we = d(
   "IrisChatGreeting",
-  ({ className: r, name: a, greeting: t, subtitle: s, children: n, mark: l }, x) => {
-    const { t: u } = b(), C = re(), m = C?.placement === "minimized" || C?.placement === "composer", y = ne(), w = l ?? oe(), i = t ?? u(le(y)), k = m ? "text-lg font-semibold leading-6 text-content" : "text-[26px] font-semibold leading-[46.8px] text-content", v = m ? "bg-clip-text text-lg font-extrabold leading-6 text-transparent" : "bg-clip-text text-[26px] font-extrabold leading-[46.8px] text-transparent";
+  ({ className: s, name: a, greeting: t, subtitle: r, children: n, mark: l }, u) => {
+    const { t: f } = b(), C = se(), m = C?.placement === "minimized" || C?.placement === "composer", I = ne(), w = l ?? oe(), i = t ?? f(le(I)), k = m ? "text-lg font-semibold leading-6 text-content" : "text-[26px] font-semibold leading-[46.8px] text-content", v = m ? "bg-clip-text text-lg font-extrabold leading-6 text-transparent" : "bg-clip-text text-[26px] font-extrabold leading-[46.8px] text-transparent";
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: x,
+        ref: u,
         "data-component": "iris-chat-greeting",
         "data-compact": m ? "" : void 0,
         className: c(
           "relative flex flex-col items-center justify-center text-center",
           m ? "gap-1.5 py-4" : "gap-2 py-8",
           "bg-[radial-gradient(ellipse_80%_70%_at_50%_45%,var(--color-iris-menu-surface-from),transparent_70%),radial-gradient(ellipse_70%_50%_at_50%_85%,color-mix(in_srgb,var(--color-iris-control-glow-cyan)_16%,transparent),transparent_72%)]",
-          r
+          s
         ),
         children: [
           /* @__PURE__ */ e(_, { size: m ? 56 : 84 }),
@@ -49,7 +49,7 @@ const we = d(
             "p",
             {
               className: m ? "max-w-[20rem] text-sm font-medium leading-5 text-content-caption" : "text-base font-medium leading-5 text-content-caption",
-              children: s ?? u("irisChat.greetingSubtitle")
+              children: r ?? f("irisChat.greetingSubtitle")
             }
           ),
           n
@@ -57,16 +57,16 @@ const we = d(
       }
     );
   }
-), ze = d("IrisChatSuggestions", ({ className: r, children: a, ...t }, s) => {
+), ze = d("IrisChatSuggestions", ({ className: s, children: a, ...t }, r) => {
   const { t: n } = b();
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: s,
+      ref: r,
       "data-component": "iris-chat-suggestions",
       className: c(
         "flex flex-col gap-2 bg-[radial-gradient(ellipse_at_center,color-mix(in_srgb,var(--color-iris-control-glow-cyan)_12%,transparent),transparent_72%)] pb-6",
-        r
+        s
       ),
       ...t,
       children: [
@@ -77,7 +77,7 @@ const we = d(
   );
 }), _e = d(
   "IrisChatSuggestion",
-  ({ className: r, children: a, type: t = "button", ...s }, n) => /* @__PURE__ */ o(
+  ({ className: s, children: a, type: t = "button", ...r }, n) => /* @__PURE__ */ o(
     "button",
     {
       ref: n,
@@ -85,24 +85,24 @@ const we = d(
       "data-component": "iris-chat-suggestion",
       className: c(
         "flex h-8 items-center gap-1 rounded-md px-2 text-start text-sm font-medium leading-5 text-content-secondary hover:bg-accent",
-        r
+        s
       ),
-      ...s,
+      ...r,
       children: [
-        /* @__PURE__ */ e(se, { size: 14 }),
+        /* @__PURE__ */ e(re, { size: 14 }),
         /* @__PURE__ */ e("span", { className: "truncate", children: a })
       ]
     }
   )
-), Ae = d("IrisChatWorkflows", ({ className: r, children: a, onShowMore: t, ...s }, n) => {
+), Ae = d("IrisChatWorkflows", ({ className: s, children: a, onShowMore: t, ...r }, n) => {
   const { t: l } = b();
   return /* @__PURE__ */ o(
     "div",
     {
       ref: n,
       "data-component": "iris-chat-workflows",
-      className: c("flex flex-col gap-2 pb-6", r),
-      ...s,
+      className: c("flex flex-col gap-2 pb-6", s),
+      ...r,
       children: [
         /* @__PURE__ */ e("p", { className: "text-xs font-medium capitalize leading-4 text-content-secondary", children: l("irisChat.suggestedWorkflows") }),
         /* @__PURE__ */ e("div", { className: "flex flex-col", children: a }),
@@ -124,15 +124,15 @@ const we = d(
   );
 }), Se = d(
   "IrisChatWorkflow",
-  ({ className: r, title: a, description: t, type: s = "button", ...n }, l) => /* @__PURE__ */ o(
+  ({ className: s, title: a, description: t, type: r = "button", ...n }, l) => /* @__PURE__ */ o(
     "button",
     {
       ref: l,
-      type: s,
+      type: r,
       "data-component": "iris-chat-workflow",
       className: c(
         "flex items-center gap-2 rounded-md py-2 text-start hover:bg-accent",
-        r
+        s
       ),
       ...n,
       children: [
@@ -147,7 +147,7 @@ const we = d(
   )
 ), Te = d(
   "IrisChatThread",
-  ({ className: r, ...a }, t) => /* @__PURE__ */ e(
+  ({ className: s, ...a }, t) => /* @__PURE__ */ e(
     "div",
     {
       ref: t,
@@ -155,88 +155,94 @@ const we = d(
       role: "log",
       "aria-live": "polite",
       "aria-relevant": "additions",
-      className: c("flex min-w-0 w-full flex-col gap-4 py-4", r),
+      className: c("flex min-w-0 w-full flex-col gap-4 py-4", s),
       ...a
     }
   )
 ), je = d(
   "IrisChatDay",
-  ({ className: r, children: a, ...t }, s) => /* @__PURE__ */ e(
+  ({ className: s, children: a, ...t }, r) => /* @__PURE__ */ e(
     "div",
     {
-      ref: s,
+      ref: r,
       "data-component": "iris-chat-day",
-      className: c("flex justify-center", r),
+      className: c("flex justify-center", s),
       ...t,
       children: /* @__PURE__ */ e("span", { className: "rounded-full bg-secondary px-3 py-1 text-xs font-medium text-content-secondary", children: a })
     }
   )
 ), Pe = d(
   "IrisChatMessage",
-  ({ className: r, role: a, time: t, children: s, ...n }, l) => /* @__PURE__ */ o(
+  ({ className: s, role: a, time: t, framed: r, children: n, ...l }, u) => /* @__PURE__ */ e(
     "article",
     {
-      ref: l,
+      ref: u,
       "data-component": "iris-chat-message",
       "data-role": a,
       className: c(
         "flex min-w-0 w-full flex-col gap-1",
         a === "user" ? "items-end" : "items-start",
-        r
+        s
       ),
-      ...n,
-      children: [
-        /* @__PURE__ */ e("div", { "data-slot": "bubble", className: ie({ role: a }), children: s }),
-        t ? /* @__PURE__ */ e("time", { className: "px-1 text-[10px] leading-4 text-content-caption", children: t }) : null
-      ]
+      ...l,
+      children: /* @__PURE__ */ o("div", { "data-slot": "bubble", className: ie({ role: a, framed: r }), children: [
+        n,
+        t ? /* @__PURE__ */ e(
+          "time",
+          {
+            className: "col-start-2 self-end text-[10px] font-medium leading-[10px] text-secondary-foreground",
+            children: t
+          }
+        ) : null
+      ] })
     }
   )
 ), ce = ["notAsked", "tone", "incorrect", "other"], Ee = d(
   "IrisChatActions",
   ({
-    className: r,
+    className: s,
     liked: a,
     disliked: t,
-    copyText: s,
+    copyText: r,
     onLike: n,
     onDislike: l,
-    onCopy: x,
-    onRetry: u,
+    onCopy: u,
+    onRetry: f,
     onSpeak: C,
     onFeedback: m,
-    ...y
+    ...I
   }, w) => {
-    const { t: i } = b(), [k, v] = g(!1), [N, I] = g(!1), [G, A] = g(!1), [S, F] = g("notAsked"), [T, j] = g(""), [M, P] = g(!1), O = {
+    const { t: i } = b(), [k, v] = x(!1), [N, y] = x(!1), [G, A] = x(!1), [S, F] = x("notAsked"), [T, j] = x(""), [M, P] = x(!1), O = {
       notAsked: i("irisChat.feedbackNotAsked"),
       tone: i("irisChat.feedbackTone"),
       incorrect: i("irisChat.feedbackIncorrect"),
       other: i("irisChat.feedbackOther")
     }, B = () => {
-      s && navigator.clipboard?.writeText(s).catch(() => {
-      }), x?.(), v(!0), window.setTimeout(() => v(!1), 1600);
+      r && navigator.clipboard?.writeText(r).catch(() => {
+      }), u?.(), v(!0), window.setTimeout(() => v(!1), 1600);
     }, D = () => {
       if (C) {
         C();
         return;
       }
-      if (!s || typeof window.speechSynthesis > "u")
+      if (!r || typeof window.speechSynthesis > "u")
         return;
       if (N) {
-        window.speechSynthesis.cancel(), I(!1);
+        window.speechSynthesis.cancel(), y(!1);
         return;
       }
-      const h = new SpeechSynthesisUtterance(s);
-      h.onend = () => I(!1), h.onerror = () => I(!1), window.speechSynthesis.speak(h), I(!0);
+      const h = new SpeechSynthesisUtterance(r);
+      h.onend = () => y(!1), h.onerror = () => y(!1), window.speechSynthesis.speak(h), y(!0);
     };
     return /* @__PURE__ */ o(
       "div",
       {
         ref: w,
         "data-component": "iris-chat-actions",
-        className: c("flex items-center gap-0.5", r),
-        ...y,
+        className: c("flex items-center gap-0.5", s),
+        ...I,
         children: [
-          /* @__PURE__ */ e(f, { label: i("irisChat.like"), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(g, { label: i("irisChat.like"), children: /* @__PURE__ */ e(
             p,
             {
               type: "button",
@@ -257,7 +263,7 @@ const we = d(
                 A(h), h || (P(!1), j(""));
               },
               children: [
-                /* @__PURE__ */ e(f, { label: i("irisChat.dislike"), children: /* @__PURE__ */ e(H, { asChild: !0, children: /* @__PURE__ */ e(
+                /* @__PURE__ */ e(g, { label: i("irisChat.dislike"), children: /* @__PURE__ */ e(H, { asChild: !0, children: /* @__PURE__ */ e(
                   p,
                   {
                     type: "button",
@@ -311,7 +317,7 @@ const we = d(
                 ] }) })
               ]
             }
-          ) : /* @__PURE__ */ e(f, { label: i("irisChat.dislike"), children: /* @__PURE__ */ e(
+          ) : /* @__PURE__ */ e(g, { label: i("irisChat.dislike"), children: /* @__PURE__ */ e(
             p,
             {
               type: "button",
@@ -324,7 +330,7 @@ const we = d(
               children: /* @__PURE__ */ e(E, { size: 16 })
             }
           ) }),
-          s || x ? /* @__PURE__ */ e(f, { label: i(k ? "irisChat.copied" : "irisChat.copy"), children: /* @__PURE__ */ e(
+          r || u ? /* @__PURE__ */ e(g, { label: i(k ? "irisChat.copied" : "irisChat.copy"), children: /* @__PURE__ */ e(
             p,
             {
               type: "button",
@@ -336,7 +342,7 @@ const we = d(
               children: /* @__PURE__ */ e($, { size: 16 })
             }
           ) }) : null,
-          /* @__PURE__ */ e(f, { label: i(N ? "irisChat.stopSpeaking" : "irisChat.speak"), children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(g, { label: i(N ? "irisChat.stopSpeaking" : "irisChat.speak"), children: /* @__PURE__ */ e(
             p,
             {
               type: "button",
@@ -348,7 +354,7 @@ const we = d(
               children: /* @__PURE__ */ e(ee, { size: 16 })
             }
           ) }),
-          u ? /* @__PURE__ */ e(f, { label: i("irisChat.retry"), children: /* @__PURE__ */ e(
+          f ? /* @__PURE__ */ e(g, { label: i("irisChat.retry"), children: /* @__PURE__ */ e(
             p,
             {
               type: "button",
@@ -356,7 +362,7 @@ const we = d(
               size: "icon",
               "aria-label": i("irisChat.retry"),
               "data-testid": "iris-chat-retry",
-              onClick: u,
+              onClick: f,
               children: /* @__PURE__ */ e(te, { size: 16 })
             }
           ) }) : null
@@ -366,18 +372,18 @@ const we = d(
   }
 ), Ge = d(
   "IrisChatFollowUps",
-  ({ className: r, ...a }, t) => /* @__PURE__ */ e(
+  ({ className: s, ...a }, t) => /* @__PURE__ */ e(
     "div",
     {
       ref: t,
       "data-component": "iris-chat-follow-ups",
-      className: c("flex w-full flex-col overflow-hidden rounded-xl border border-stroke-subtle", r),
+      className: c("flex w-full flex-col overflow-hidden rounded-xl border border-stroke-subtle", s),
       ...a
     }
   )
 ), Fe = d(
   "IrisChatFollowUp",
-  ({ className: r, children: a, type: t = "button", ...s }, n) => /* @__PURE__ */ o(
+  ({ className: s, children: a, type: t = "button", ...r }, n) => /* @__PURE__ */ o(
     "button",
     {
       ref: n,
@@ -385,9 +391,9 @@ const we = d(
       "data-component": "iris-chat-follow-up",
       className: c(
         "flex w-full items-center justify-between gap-3 border-b border-stroke-subtle px-3 py-2.5 text-start text-sm last:border-b-0 hover:bg-accent",
-        r
+        s
       ),
-      ...s,
+      ...r,
       children: [
         /* @__PURE__ */ o("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
           /* @__PURE__ */ e(_, { size: 14 }),
@@ -399,32 +405,32 @@ const we = d(
   )
 ), Me = d(
   "IrisChatAttachment",
-  ({ className: r, name: a, kind: t = "file", sizeLabel: s, previewUrl: n, onRemove: l }, x) => {
-    const { t: u } = b();
+  ({ className: s, name: a, kind: t = "file", sizeLabel: r, previewUrl: n, onRemove: l }, u) => {
+    const { t: f } = b();
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: x,
+        ref: u,
         "data-component": "iris-chat-attachment",
         "data-kind": t,
         className: c(
           "flex max-w-full items-center gap-2 rounded-xl bg-canvas-elevated px-2 py-1.5 text-xs text-content",
-          r
+          s
         ),
         children: [
           t === "image" && n ? /* @__PURE__ */ e("img", { src: n, alt: "", className: "size-10 shrink-0 rounded-lg object-cover" }) : /* @__PURE__ */ e(ae, { size: 14 }),
           /* @__PURE__ */ o("span", { className: "min-w-0", children: [
             /* @__PURE__ */ e("span", { className: "block truncate font-medium", children: a }),
-            s ? /* @__PURE__ */ e("span", { className: "block text-content-caption", children: s }) : null
+            r ? /* @__PURE__ */ e("span", { className: "block text-content-caption", children: r }) : null
           ] }),
-          l ? /* @__PURE__ */ e(f, { label: u("irisChat.removeAttachment"), children: /* @__PURE__ */ e(
+          l ? /* @__PURE__ */ e(g, { label: f("irisChat.removeAttachment"), children: /* @__PURE__ */ e(
             p,
             {
               type: "button",
               variant: "ghost",
               size: "icon",
               className: "size-6",
-              "aria-label": u("irisChat.removeAttachment"),
+              "aria-label": f("irisChat.removeAttachment"),
               onClick: l,
               children: /* @__PURE__ */ e(U, { size: 12 })
             }
@@ -435,14 +441,14 @@ const we = d(
   }
 ), Oe = d(
   "IrisChatError",
-  ({ className: r, title: a, description: t, onRetry: s }, n) => {
+  ({ className: s, title: a, description: t, onRetry: r }, n) => {
     const { t: l } = b();
-    return /* @__PURE__ */ e("div", { ref: n, "data-component": "iris-chat-error", className: c("w-full", r), children: /* @__PURE__ */ o(J, { variant: "error", children: [
+    return /* @__PURE__ */ e("div", { ref: n, "data-component": "iris-chat-error", className: c("w-full", s), children: /* @__PURE__ */ o(J, { variant: "error", children: [
       /* @__PURE__ */ e(Q, { variant: "error" }),
       /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
         /* @__PURE__ */ e(X, { children: a ?? l("irisChat.generationError") }),
         /* @__PURE__ */ e(Y, { children: t ?? l("irisChat.generationErrorBody") }),
-        s ? /* @__PURE__ */ e(
+        r ? /* @__PURE__ */ e(
           p,
           {
             type: "button",
@@ -450,7 +456,7 @@ const we = d(
             variant: "outline",
             className: "w-fit",
             "data-testid": "iris-chat-error-retry",
-            onClick: s,
+            onClick: r,
             children: l("irisChat.retry")
           }
         ) : null
@@ -459,7 +465,7 @@ const we = d(
   }
 ), Be = d(
   "IrisChatChip",
-  ({ className: r, type: a = "button", variant: t = "default", ...s }, n) => /* @__PURE__ */ e(
+  ({ className: s, type: a = "button", variant: t = "default", ...r }, n) => /* @__PURE__ */ e(
     "button",
     {
       ref: n,
@@ -469,9 +475,9 @@ const we = d(
       className: c(
         "rounded-full px-3 py-1.5 text-sm font-medium leading-5 disabled:pointer-events-none disabled:opacity-50",
         t === "outline" ? "border border-stroke bg-canvas text-content hover:bg-accent" : "border border-stroke-subtle bg-secondary text-content hover:bg-accent",
-        r
+        s
       ),
-      ...s
+      ...r
     }
   )
 );