impact-nova 2.6.3 → 3.0.0-alpha.1

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

@@ -0,0 +1,493 @@
+import { jsxs as o, jsx as e, Fragment as W } from "react/jsx-runtime";
+import { useState as g } 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 { cn as c } from "../../../lib/utils.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 { 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 { 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";
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: x,
+        "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
+        ),
+        children: [
+          /* @__PURE__ */ e(_, { size: m ? 56 : 84 }),
+          /* @__PURE__ */ o("div", { className: "flex flex-wrap items-center justify-center gap-1", children: [
+            /* @__PURE__ */ e("p", { className: k, children: i }),
+            a ? /* @__PURE__ */ e(
+              "p",
+              {
+                className: v,
+                style: {
+                  backgroundImage: "linear-gradient(90deg, var(--color-header-bot-gradient-orange), var(--color-header-bot-gradient-purple))"
+                },
+                children: a
+              }
+            ) : null,
+            /* @__PURE__ */ e("span", { "aria-hidden": !0, className: m ? "text-base" : "text-[23px]", children: w })
+          ] }),
+          /* @__PURE__ */ e(
+            "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")
+            }
+          ),
+          n
+        ]
+      }
+    );
+  }
+), ze = d("IrisChatSuggestions", ({ className: r, children: a, ...t }, s) => {
+  const { t: n } = b();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: s,
+      "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
+      ),
+      ...t,
+      children: [
+        /* @__PURE__ */ e("p", { className: "text-xs font-medium capitalize leading-4 text-content-secondary", children: n("irisChat.suggested") }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: a })
+      ]
+    }
+  );
+}), _e = d(
+  "IrisChatSuggestion",
+  ({ className: r, children: a, type: t = "button", ...s }, n) => /* @__PURE__ */ o(
+    "button",
+    {
+      ref: n,
+      type: t,
+      "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,
+      children: [
+        /* @__PURE__ */ e(se, { size: 14 }),
+        /* @__PURE__ */ e("span", { className: "truncate", children: a })
+      ]
+    }
+  )
+), Ae = d("IrisChatWorkflows", ({ className: r, children: a, onShowMore: t, ...s }, 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,
+      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 }),
+        t ? /* @__PURE__ */ o(
+          p,
+          {
+            type: "button",
+            variant: "link",
+            className: "h-auto justify-start px-0 text-sm",
+            onClick: t,
+            children: [
+              l("irisChat.showMore"),
+              /* @__PURE__ */ e(z, { size: 16, className: "rotate-90" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}), Se = d(
+  "IrisChatWorkflow",
+  ({ className: r, title: a, description: t, type: s = "button", ...n }, l) => /* @__PURE__ */ o(
+    "button",
+    {
+      ref: l,
+      type: s,
+      "data-component": "iris-chat-workflow",
+      className: c(
+        "flex items-center gap-2 rounded-md py-2 text-start hover:bg-accent",
+        r
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ e(_, { size: 16 }),
+        /* @__PURE__ */ o("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ e("span", { className: "block truncate text-sm font-medium text-content", children: a }),
+          t ? /* @__PURE__ */ e("span", { className: "block truncate text-xs text-content-caption", children: t }) : null
+        ] }),
+        /* @__PURE__ */ e(z, { size: 16, className: "text-content-secondary" })
+      ]
+    }
+  )
+), Te = d(
+  "IrisChatThread",
+  ({ className: r, ...a }, t) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: t,
+      "data-component": "iris-chat-thread",
+      role: "log",
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      className: c("flex min-w-0 w-full flex-col gap-4 py-4", r),
+      ...a
+    }
+  )
+), je = d(
+  "IrisChatDay",
+  ({ className: r, children: a, ...t }, s) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: s,
+      "data-component": "iris-chat-day",
+      className: c("flex justify-center", r),
+      ...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(
+    "article",
+    {
+      ref: l,
+      "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
+      ),
+      ...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
+      ]
+    }
+  )
+), ce = ["notAsked", "tone", "incorrect", "other"], Ee = d(
+  "IrisChatActions",
+  ({
+    className: r,
+    liked: a,
+    disliked: t,
+    copyText: s,
+    onLike: n,
+    onDislike: l,
+    onCopy: x,
+    onRetry: u,
+    onSpeak: C,
+    onFeedback: m,
+    ...y
+  }, 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 = {
+      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);
+    }, D = () => {
+      if (C) {
+        C();
+        return;
+      }
+      if (!s || typeof window.speechSynthesis > "u")
+        return;
+      if (N) {
+        window.speechSynthesis.cancel(), I(!1);
+        return;
+      }
+      const h = new SpeechSynthesisUtterance(s);
+      h.onend = () => I(!1), h.onerror = () => I(!1), window.speechSynthesis.speak(h), I(!0);
+    };
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: w,
+        "data-component": "iris-chat-actions",
+        className: c("flex items-center gap-0.5", r),
+        ...y,
+        children: [
+          /* @__PURE__ */ e(f, { label: i("irisChat.like"), children: /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": i("irisChat.like"),
+              "aria-pressed": a,
+              className: c(a && "text-brand"),
+              onClick: n,
+              children: /* @__PURE__ */ e(Z, { size: 16 })
+            }
+          ) }),
+          m ? /* @__PURE__ */ o(
+            K,
+            {
+              open: G,
+              onOpenChange: (h) => {
+                A(h), h || (P(!1), j(""));
+              },
+              children: [
+                /* @__PURE__ */ e(f, { label: i("irisChat.dislike"), children: /* @__PURE__ */ e(H, { asChild: !0, children: /* @__PURE__ */ e(
+                  p,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    "aria-label": i("irisChat.dislike"),
+                    "aria-pressed": t,
+                    className: c(t && "text-brand"),
+                    onClick: l,
+                    children: /* @__PURE__ */ e(E, { size: 16 })
+                  }
+                ) }) }),
+                /* @__PURE__ */ e(L, { align: "start", side: "top", className: "w-[320px] rounded-xl p-4", children: M ? /* @__PURE__ */ e("p", { className: "text-sm font-medium text-content", children: i("irisChat.feedbackThanks") }) : /* @__PURE__ */ o(W, { children: [
+                  /* @__PURE__ */ e(R, { className: "mb-3", children: /* @__PURE__ */ e(V, { className: "text-sm font-semibold", children: i("irisChat.feedbackTitle") }) }),
+                  /* @__PURE__ */ o(q, { className: "flex flex-col gap-3", children: [
+                    /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: ce.map((h) => /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        className: c(
+                          "rounded-full border px-3 py-1 text-xs font-medium",
+                          S === h ? "border-brand bg-brand-subtle text-brand" : "border-stroke-subtle text-content"
+                        ),
+                        onClick: () => F(h),
+                        children: O[h]
+                      },
+                      h
+                    )) }),
+                    /* @__PURE__ */ e(
+                      "textarea",
+                      {
+                        value: T,
+                        placeholder: i("irisChat.feedbackPlaceholder"),
+                        className: "min-h-16 w-full resize-none rounded-lg border border-stroke-subtle bg-transparent px-3 py-2 text-sm outline-none",
+                        onChange: (h) => j(h.target.value)
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      p,
+                      {
+                        type: "button",
+                        size: "sm",
+                        className: "self-end",
+                        onClick: () => {
+                          m({ reason: S, details: T }), P(!0), window.setTimeout(() => A(!1), 1200);
+                        },
+                        children: i("irisChat.feedbackSubmit")
+                      }
+                    )
+                  ] })
+                ] }) })
+              ]
+            }
+          ) : /* @__PURE__ */ e(f, { label: i("irisChat.dislike"), children: /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": i("irisChat.dislike"),
+              "aria-pressed": t,
+              className: c(t && "text-brand"),
+              onClick: l,
+              children: /* @__PURE__ */ e(E, { size: 16 })
+            }
+          ) }),
+          s || x ? /* @__PURE__ */ e(f, { label: i(k ? "irisChat.copied" : "irisChat.copy"), children: /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": i(k ? "irisChat.copied" : "irisChat.copy"),
+              "data-testid": "iris-chat-copy",
+              onClick: B,
+              children: /* @__PURE__ */ e($, { size: 16 })
+            }
+          ) }) : null,
+          /* @__PURE__ */ e(f, { label: i(N ? "irisChat.stopSpeaking" : "irisChat.speak"), children: /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": i(N ? "irisChat.stopSpeaking" : "irisChat.speak"),
+              "aria-pressed": N,
+              onClick: D,
+              children: /* @__PURE__ */ e(ee, { size: 16 })
+            }
+          ) }),
+          u ? /* @__PURE__ */ e(f, { label: i("irisChat.retry"), children: /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": i("irisChat.retry"),
+              "data-testid": "iris-chat-retry",
+              onClick: u,
+              children: /* @__PURE__ */ e(te, { size: 16 })
+            }
+          ) }) : null
+        ]
+      }
+    );
+  }
+), Ge = d(
+  "IrisChatFollowUps",
+  ({ className: r, ...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),
+      ...a
+    }
+  )
+), Fe = d(
+  "IrisChatFollowUp",
+  ({ className: r, children: a, type: t = "button", ...s }, n) => /* @__PURE__ */ o(
+    "button",
+    {
+      ref: n,
+      type: t,
+      "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,
+      children: [
+        /* @__PURE__ */ o("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ e(_, { size: 14 }),
+          /* @__PURE__ */ e("span", { className: "min-w-0 whitespace-normal", children: a })
+        ] }),
+        /* @__PURE__ */ e(z, { size: 16, className: "shrink-0 text-content-secondary" })
+      ]
+    }
+  )
+), Me = d(
+  "IrisChatAttachment",
+  ({ className: r, name: a, kind: t = "file", sizeLabel: s, previewUrl: n, onRemove: l }, x) => {
+    const { t: u } = b();
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: x,
+        "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
+        ),
+        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
+          ] }),
+          l ? /* @__PURE__ */ e(f, { label: u("irisChat.removeAttachment"), children: /* @__PURE__ */ e(
+            p,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "size-6",
+              "aria-label": u("irisChat.removeAttachment"),
+              onClick: l,
+              children: /* @__PURE__ */ e(U, { size: 12 })
+            }
+          ) }) : null
+        ]
+      }
+    );
+  }
+), Oe = d(
+  "IrisChatError",
+  ({ className: r, title: a, description: t, onRetry: s }, 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: [
+      /* @__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(
+          p,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            className: "w-fit",
+            "data-testid": "iris-chat-error-retry",
+            onClick: s,
+            children: l("irisChat.retry")
+          }
+        ) : null
+      ] })
+    ] }) });
+  }
+), Be = d(
+  "IrisChatChip",
+  ({ className: r, type: a = "button", variant: t = "default", ...s }, n) => /* @__PURE__ */ e(
+    "button",
+    {
+      ref: n,
+      type: a,
+      "data-component": "iris-chat-chip",
+      "data-variant": t,
+      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
+    }
+  )
+);
+export {
+  Ee as IrisChatActions,
+  Me as IrisChatAttachment,
+  Be as IrisChatChip,
+  je as IrisChatDay,
+  Oe as IrisChatError,
+  Fe as IrisChatFollowUp,
+  Ge as IrisChatFollowUps,
+  we as IrisChatGreeting,
+  Pe as IrisChatMessage,
+  _e as IrisChatSuggestion,
+  ze as IrisChatSuggestions,
+  Te as IrisChatThread,
+  Se as IrisChatWorkflow,
+  Ae as IrisChatWorkflows
+};

package/dist/components/flows/iris-chat/iris-chat.d.ts

@@ -0,0 +1,43 @@
+import { IrisChatBodyProps, IrisChatFooterProps, IrisChatHeaderProps, IrisChatIconButtonProps, IrisChatPanelProps, IrisChatProps } from './iris-chat.types';
+import * as React from "react";
+declare const IrisChat: {
+    ({ open, defaultOpen, onOpenChange, placement, defaultPlacement, onPlacementChange, className, children, }: IrisChatProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const IrisChatPanel: React.ForwardRefExoticComponent<IrisChatPanelProps & React.RefAttributes<HTMLDivElement>>;
+declare const IrisChatHeader: React.ForwardRefExoticComponent<IrisChatHeaderProps & React.RefAttributes<HTMLElement>>;
+declare const IrisChatHeaderLeading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const IrisChatHeaderTrailing: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const IrisChatHeaderTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
+    showBrand?: boolean;
+} & React.RefAttributes<HTMLHeadingElement>>;
+declare const IrisChatIconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    variant?: "secondary" | "ghost";
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const IrisChatHeaderMenuButton: React.ForwardRefExoticComponent<Omit<IrisChatIconButtonProps, "label"> & {
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const IrisChatHeaderBackButton: React.ForwardRefExoticComponent<Omit<IrisChatIconButtonProps, "label"> & {
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const IrisChatHeaderNewChatButton: React.ForwardRefExoticComponent<Omit<IrisChatIconButtonProps, "label"> & {
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const IrisChatHeaderMinimizeButton: React.ForwardRefExoticComponent<Omit<IrisChatIconButtonProps, "label"> & {
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const IrisChatHeaderCloseButton: React.ForwardRefExoticComponent<Omit<IrisChatIconButtonProps, "label"> & {
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const IrisChatBody: React.ForwardRefExoticComponent<IrisChatBodyProps & React.RefAttributes<HTMLDivElement>>;
+declare const IrisChatFooter: React.ForwardRefExoticComponent<IrisChatFooterProps & React.RefAttributes<HTMLDivElement>>;
+declare const IrisChatDisclaimer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+    href?: string;
+} & React.RefAttributes<HTMLParagraphElement>>;
+declare const IrisChatTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    size?: "sm" | "md" | "lg";
+    shape?: "default" | "pill";
+} & React.RefAttributes<HTMLButtonElement>>;
+export { IrisChat, IrisChatBody, IrisChatDisclaimer, IrisChatFooter, IrisChatHeader, IrisChatHeaderBackButton, IrisChatHeaderCloseButton, IrisChatHeaderLeading, IrisChatHeaderMenuButton, IrisChatHeaderMinimizeButton, IrisChatHeaderNewChatButton, IrisChatHeaderTitle, IrisChatHeaderTrailing, IrisChatIconButton, IrisChatPanel, IrisChatTrigger, };