@smwb/ui-react 2.0.0

package/dist/headless/components/dataDisplay/chat/chatAttachmentImage.js

@@ -0,0 +1,67 @@
+import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
+import { useState as r, useRef as d } from "react";
+import { createPortal as f } from "react-dom";
+import { CSSTransition as g } from "react-transition-group";
+import h from "clsx";
+import { useSafeLayoutEffect as b } from "../../../hooks/useSafeLayoutEffect.js";
+function N({ attachment: e, className: n }) {
+  const [i, a] = r(!1), [m, l] = r(), o = d(null);
+  return b(() => {
+    l(document.body);
+  }, []), e.url ? /* @__PURE__ */ c(u, { children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: h("smwb-chat-attachment-image", n),
+        onClick: () => a(!0),
+        "data-testid": "chat-attachment-image",
+        "aria-label": e.name,
+        children: /* @__PURE__ */ t("img", { src: e.url, alt: e.name, className: "smwb-chat-attachment-image__img" })
+      }
+    ),
+    m ? f(
+      /* @__PURE__ */ t(
+        g,
+        {
+          in: i,
+          timeout: 150,
+          mountOnEnter: !0,
+          unmountOnExit: !0,
+          nodeRef: o,
+          classNames: {
+            enterActive: "smwb-chat-attachment-image__overlay_enter-active",
+            enterDone: "smwb-chat-attachment-image__overlay_enter-done"
+          },
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              ref: o,
+              className: "smwb-chat-attachment-image__overlay smwb-dark",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": e.name,
+              "data-testid": "chat-attachment-image-overlay",
+              onClick: () => a(!1),
+              children: /* @__PURE__ */ t(
+                "img",
+                {
+                  src: e.url,
+                  alt: e.name,
+                  className: "smwb-chat-attachment-image__overlay-img",
+                  onClick: (s) => s.stopPropagation()
+                }
+              )
+            }
+          )
+        }
+      ),
+      m
+    ) : null
+  ] }) : null;
+}
+export {
+  N as ChatAttachmentImage,
+  N as default
+};
+//# sourceMappingURL=chatAttachmentImage.js.map

package/dist/headless/components/dataDisplay/chat/chatAttachmentImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatAttachmentImage.js","sources":["../../../../../src/components/dataDisplay/chat/chatAttachmentImage.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CSSTransition } from \"react-transition-group\";\nimport cn from \"clsx\";\nimport { ChatAttachment } from \"./types\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport interface ChatAttachmentImageProps {\n  attachment: ChatAttachment;\n  className?: string;\n}\n\nexport function ChatAttachmentImage({ attachment, className }: ChatAttachmentImageProps) {\n  const [open, setOpen] = useState(false);\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  if (!attachment.url) {\n    return null;\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        className={cn(\"smwb-chat-attachment-image\", className)}\n        onClick={() => setOpen(true)}\n        data-testid=\"chat-attachment-image\"\n        aria-label={attachment.name}\n      >\n        <img src={attachment.url} alt={attachment.name} className=\"smwb-chat-attachment-image__img\" />\n      </button>\n      {domRoot\n        ? createPortal(\n            <CSSTransition\n              in={open}\n              timeout={150}\n              mountOnEnter\n              unmountOnExit\n              nodeRef={nodeRef}\n              classNames={{\n                enterActive: \"smwb-chat-attachment-image__overlay_enter-active\",\n                enterDone: \"smwb-chat-attachment-image__overlay_enter-done\",\n              }}\n            >\n              <div\n                ref={nodeRef}\n                className=\"smwb-chat-attachment-image__overlay smwb-dark\"\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={attachment.name}\n                data-testid=\"chat-attachment-image-overlay\"\n                onClick={() => setOpen(false)}\n              >\n                <img\n                  src={attachment.url}\n                  alt={attachment.name}\n                  className=\"smwb-chat-attachment-image__overlay-img\"\n                  onClick={(event) => event.stopPropagation()}\n                />\n              </div>\n            </CSSTransition>,\n            domRoot\n          )\n        : null}\n    </>\n  );\n}\n\nexport default ChatAttachmentImage;\n"],"names":["ChatAttachmentImage","attachment","className","open","setOpen","useState","domRoot","setDomRoot","nodeRef","useRef","useSafeLayoutEffect","jsxs","Fragment","jsx","cn","createPortal","CSSTransition","event"],"mappings":";;;;;;AAYO,SAASA,EAAoB,EAAE,YAAAC,GAAY,WAAAC,KAAuC;AACvF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAASC,CAAU,IAAIF,EAAA,GACxBG,IAAUC,EAAuB,IAAI;AAM3C,SAJAC,EAAoB,MAAM;AACxB,IAAAH,EAAW,SAAS,IAAI;AAAA,EAC1B,GAAG,CAAA,CAAE,GAEAN,EAAW,MAKd,gBAAAU,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWC,EAAG,8BAA8BZ,CAAS;AAAA,QACrD,SAAS,MAAME,EAAQ,EAAI;AAAA,QAC3B,eAAY;AAAA,QACZ,cAAYH,EAAW;AAAA,QAEvB,UAAA,gBAAAY,EAAC,SAAI,KAAKZ,EAAW,KAAK,KAAKA,EAAW,MAAM,WAAU,kCAAA,CAAkC;AAAA,MAAA;AAAA,IAAA;AAAA,IAE7FK,IACGS;AAAA,MACE,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,IAAIb;AAAA,UACJ,SAAS;AAAA,UACT,cAAY;AAAA,UACZ,eAAa;AAAA,UACb,SAAAK;AAAA,UACA,YAAY;AAAA,YACV,aAAa;AAAA,YACb,WAAW;AAAA,UAAA;AAAA,UAGb,UAAA,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKL;AAAA,cACL,WAAU;AAAA,cACV,MAAK;AAAA,cACL,cAAW;AAAA,cACX,cAAYP,EAAW;AAAA,cACvB,eAAY;AAAA,cACZ,SAAS,MAAMG,EAAQ,EAAK;AAAA,cAE5B,UAAA,gBAAAS;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKZ,EAAW;AAAA,kBAChB,KAAKA,EAAW;AAAA,kBAChB,WAAU;AAAA,kBACV,SAAS,CAACgB,MAAUA,EAAM,gBAAA;AAAA,gBAAgB;AAAA,cAAA;AAAA,YAC5C;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEFX;AAAA,IAAA,IAEF;AAAA,EAAA,GACN,IA/CO;AAiDX;"}

package/dist/headless/components/dataDisplay/chat/chatAttachments.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import m from "clsx";
+import { isImageAttachment as o } from "./utils.js";
+import { ChatAttachmentImage as t } from "./chatAttachmentImage.js";
+function u({ attachments: e, className: a, enabled: l = !0 }) {
+  return !l || !(e != null && e.length) ? null : /* @__PURE__ */ i("div", { className: m("smwb-chat-attachments", a), "data-testid": "chat-attachments", children: e.map(
+    (r) => o(r) ? /* @__PURE__ */ i(t, { attachment: r }, r.id) : /* @__PURE__ */ i(
+      "a",
+      {
+        className: "smwb-chat-attachments__file",
+        href: r.url,
+        download: r.name,
+        target: "_blank",
+        rel: "noreferrer",
+        "data-testid": "chat-attachment-file",
+        children: r.name
+      },
+      r.id
+    )
+  ) });
+}
+export {
+  u as ChatAttachments,
+  u as default
+};
+//# sourceMappingURL=chatAttachments.js.map

package/dist/headless/components/dataDisplay/chat/chatAttachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatAttachments.js","sources":["../../../../../src/components/dataDisplay/chat/chatAttachments.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { ChatAttachment } from \"./types\";\nimport { isImageAttachment } from \"./utils\";\nimport ChatAttachmentImage from \"./chatAttachmentImage\";\n\nexport interface ChatAttachmentsProps {\n  attachments?: ChatAttachment[];\n  className?: string;\n  enabled?: boolean;\n}\n\nexport function ChatAttachments({ attachments, className, enabled = true }: ChatAttachmentsProps) {\n  if (!enabled || !attachments?.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"smwb-chat-attachments\", className)} data-testid=\"chat-attachments\">\n      {attachments.map((attachment) =>\n        isImageAttachment(attachment) ? (\n          <ChatAttachmentImage key={attachment.id} attachment={attachment} />\n        ) : (\n          <a\n            key={attachment.id}\n            className=\"smwb-chat-attachments__file\"\n            href={attachment.url}\n            download={attachment.name}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            data-testid=\"chat-attachment-file\"\n          >\n            {attachment.name}\n          </a>\n        )\n      )}\n    </div>\n  );\n}\n\nexport default ChatAttachments;\n"],"names":["ChatAttachments","attachments","className","enabled","jsx","cn","attachment","isImageAttachment","ChatAttachmentImage"],"mappings":";;;;AAYO,SAASA,EAAgB,EAAE,aAAAC,GAAa,WAAAC,GAAW,SAAAC,IAAU,MAA8B;AAChG,SAAI,CAACA,KAAW,EAACF,KAAA,QAAAA,EAAa,UACrB,OAIP,gBAAAG,EAAC,SAAI,WAAWC,EAAG,yBAAyBH,CAAS,GAAG,eAAY,oBACjE,UAAAD,EAAY;AAAA,IAAI,CAACK,MAChBC,EAAkBD,CAAU,sBACzBE,GAAA,EAAwC,YAAAF,EAAA,GAAfA,EAAW,EAA4B,IAEjE,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,MAAME,EAAW;AAAA,QACjB,UAAUA,EAAW;AAAA,QACrB,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,eAAY;AAAA,QAEX,UAAAA,EAAW;AAAA,MAAA;AAAA,MARPA,EAAW;AAAA,IAAA;AAAA,EASlB,GAGN;AAEJ;"}

package/dist/headless/components/dataDisplay/chat/chatComposer.js

@@ -0,0 +1,154 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as T, useId as S, useRef as W } from "react";
+import i from "clsx";
+import { Icon as g } from "../../base/icon/icon.js";
+import { TextFieldWrapper as H } from "../../inputs/textField/textFieldWrapper.js";
+import { ChatIconButton as y } from "./chatIconButton.js";
+import { shouldComposerNewlineOnEnter as P } from "./utils.js";
+import { TextField as R } from "../../inputs/textField/textField.js";
+function _(o) {
+  o.stopPropagation();
+}
+function V(o, n, l) {
+  var s, u;
+  const e = (s = o.selectionStart) != null ? s : n.length, h = (u = o.selectionEnd) != null ? u : n.length, m = `${n.slice(0, e)}
+${n.slice(h)}`;
+  l(m), requestAnimationFrame(() => {
+    o.selectionStart = e + 1, o.selectionEnd = e + 1;
+  });
+}
+function J({
+  className: o,
+  onSendMessage: n,
+  placeholder: l = "message",
+  disabled: e = !1,
+  sendAriaLabel: h = "Send message",
+  shiftEnterNewline: m = !0,
+  ctrlEnterNewline: s = !0,
+  fileUpload: u = !1,
+  attachInputId: f,
+  onAttachClick: b,
+  attachAriaLabel: x = "Attach file"
+}) {
+  const [a, d] = T(""), [N, D] = T(!1), C = S(), p = W(null), k = m || s, z = !!n && a.trim().length > 0 && !e, F = u && !!(f || b), A = () => {
+    if (!n)
+      return;
+    const t = a.trim();
+    !t || e || (n(t), d(""));
+  }, B = (t) => {
+    if (P(t, { shiftEnterNewline: m, ctrlEnterNewline: s })) {
+      t.currentTarget instanceof HTMLTextAreaElement && (t.preventDefault(), V(t.currentTarget, a, d));
+      return;
+    }
+    t.key === "Enter" && (t.preventDefault(), A());
+  }, E = i(
+    "smwb-chat-icon-button",
+    "smwb-chat-icon-button_edge-start",
+    e && "smwb-chat-icon-button_disabled"
+  ), c = F ? f ? /* @__PURE__ */ r(
+    "label",
+    {
+      htmlFor: e ? void 0 : f,
+      className: E,
+      "aria-label": x,
+      "aria-disabled": e || void 0,
+      "data-testid": "chat-composer-attach",
+      onMouseDown: _,
+      children: /* @__PURE__ */ r(g, { name: "attach_file", size: 24 })
+    }
+  ) : /* @__PURE__ */ r(
+    y,
+    {
+      edge: "start",
+      "aria-label": x,
+      "data-testid": "chat-composer-attach",
+      disabled: e,
+      onClick: b,
+      onMouseDown: _,
+      children: /* @__PURE__ */ r(g, { name: "attach_file", size: 24 })
+    }
+  ) : null, w = n ? /* @__PURE__ */ r(
+    y,
+    {
+      edge: "end",
+      color: "primary",
+      "aria-label": h,
+      "data-testid": "chat-composer-send",
+      disabled: !z,
+      onClick: A,
+      onMouseDown: _,
+      children: /* @__PURE__ */ r(g, { name: "send", size: 24 })
+    }
+  ) : null;
+  if (F && !n)
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: i("smwb-chat-composer", "smwb-chat-composer_attach-only", o),
+        "data-testid": "chat-composer",
+        children: c
+      }
+    );
+  if (!k)
+    return /* @__PURE__ */ r(
+      R,
+      {
+        className: i("smwb-chat-composer", o),
+        "data-testid": "chat-composer",
+        fullWidth: !0,
+        value: a,
+        disabled: e,
+        placeholder: l,
+        onChange: (t) => d(t.target.value),
+        startAdornment: c,
+        endAdornment: w,
+        onKeyDown: B
+      }
+    );
+  const K = (t) => {
+    p.current && t.currentTarget === t.target && (t.preventDefault(), p.current.focus());
+  };
+  return /* @__PURE__ */ r(
+    H,
+    {
+      className: i("smwb-chat-composer", o),
+      "data-testid": "chat-composer",
+      fullWidth: !0,
+      disabled: e,
+      isFilledState: a.length > 0,
+      isFocused: N,
+      htmlFor: C,
+      shrink: !!c,
+      onHolderMouseDown: K,
+      startAdornment: c,
+      endAdornment: w,
+      children: /* @__PURE__ */ r(
+        "textarea",
+        {
+          id: C,
+          ref: p,
+          className: i(
+            "smwb-text-field__input",
+            "smwb-chat-composer__input",
+            "smwb-text-field__input--show-placeholder",
+            c && "smwb-text-field__input--adornment-start",
+            w && "smwb-text-field__input--adornment-end"
+          ),
+          value: a,
+          disabled: e,
+          placeholder: l,
+          rows: 1,
+          onChange: (t) => d(t.target.value),
+          onFocus: () => D(!0),
+          onBlur: () => D(!1),
+          onKeyDown: B
+        }
+      )
+    }
+  );
+}
+export {
+  J as ChatComposer,
+  J as default
+};
+//# sourceMappingURL=chatComposer.js.map

package/dist/headless/components/dataDisplay/chat/chatComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatComposer.js","sources":["../../../../../src/components/dataDisplay/chat/chatComposer.tsx"],"sourcesContent":["import React, { useId, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { TextField } from \"../../inputs/textField\";\nimport { TextFieldWrapper } from \"../../inputs/textField/textFieldWrapper\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { shouldComposerNewlineOnEnter } from \"./utils\";\n\nexport interface ChatComposerProps {\n  className?: string;\n  onSendMessage?: (text: string) => void | Promise<void>;\n  placeholder?: string;\n  disabled?: boolean;\n  sendAriaLabel?: string;\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n  fileUpload?: boolean;\n  attachInputId?: string;\n  onAttachClick?: () => void;\n  attachAriaLabel?: string;\n}\n\nfunction stopPropagation(event: React.SyntheticEvent) {\n  event.stopPropagation();\n}\n\nfunction insertNewlineAtCursor(element: HTMLTextAreaElement, value: string, setValue: (next: string) => void) {\n  const start = element.selectionStart ?? value.length;\n  const end = element.selectionEnd ?? value.length;\n  const nextValue = `${value.slice(0, start)}\\n${value.slice(end)}`;\n\n  setValue(nextValue);\n\n  requestAnimationFrame(() => {\n    element.selectionStart = start + 1;\n    element.selectionEnd = start + 1;\n  });\n}\n\nexport function ChatComposer({\n  className,\n  onSendMessage,\n  placeholder = \"message\",\n  disabled = false,\n  sendAriaLabel = \"Send message\",\n  shiftEnterNewline = true,\n  ctrlEnterNewline = true,\n  fileUpload = false,\n  attachInputId,\n  onAttachClick,\n  attachAriaLabel = \"Attach file\",\n}: ChatComposerProps) {\n  const [value, setValue] = useState(\"\");\n  const [isFocused, setIsFocused] = useState(false);\n  const inputId = useId();\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const multiline = shiftEnterNewline || ctrlEnterNewline;\n  const canSend = Boolean(onSendMessage) && value.trim().length > 0 && !disabled;\n  const showAttach = fileUpload && Boolean(attachInputId || onAttachClick);\n\n  const handleSend = () => {\n    if (!onSendMessage) {\n      return;\n    }\n\n    const text = value.trim();\n\n    if (!text || disabled) {\n      return;\n    }\n\n    void onSendMessage(text);\n    setValue(\"\");\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline, ctrlEnterNewline })) {\n      if (event.currentTarget instanceof HTMLTextAreaElement) {\n        event.preventDefault();\n        insertNewlineAtCursor(event.currentTarget, value, setValue);\n      }\n\n      return;\n    }\n\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    event.preventDefault();\n    handleSend();\n  };\n\n  const attachClassName = cn(\n    \"smwb-chat-icon-button\",\n    \"smwb-chat-icon-button_edge-start\",\n    disabled && \"smwb-chat-icon-button_disabled\"\n  );\n\n  const attachButton = showAttach ? (\n    attachInputId ? (\n      <label\n        htmlFor={disabled ? undefined : attachInputId}\n        className={attachClassName}\n        aria-label={attachAriaLabel}\n        aria-disabled={disabled || undefined}\n        data-testid=\"chat-composer-attach\"\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"attach_file\" size={24} />\n      </label>\n    ) : (\n      <ChatIconButton\n        edge=\"start\"\n        aria-label={attachAriaLabel}\n        data-testid=\"chat-composer-attach\"\n        disabled={disabled}\n        onClick={onAttachClick}\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"attach_file\" size={24} />\n      </ChatIconButton>\n    )\n  ) : null;\n\n  const sendButton = onSendMessage ? (\n    <ChatIconButton\n      edge=\"end\"\n      color=\"primary\"\n      aria-label={sendAriaLabel}\n      data-testid=\"chat-composer-send\"\n      disabled={!canSend}\n      onClick={handleSend}\n      onMouseDown={stopPropagation}\n    >\n      <Icon name=\"send\" size={24} />\n    </ChatIconButton>\n  ) : null;\n\n  if (showAttach && !onSendMessage) {\n    return (\n      <div\n        className={cn(\"smwb-chat-composer\", \"smwb-chat-composer_attach-only\", className)}\n        data-testid=\"chat-composer\"\n      >\n        {attachButton}\n      </div>\n    );\n  }\n\n  if (!multiline) {\n    return (\n      <TextField\n        className={cn(\"smwb-chat-composer\", className)}\n        data-testid=\"chat-composer\"\n        fullWidth\n        value={value}\n        disabled={disabled}\n        placeholder={placeholder}\n        onChange={(event) => setValue(event.target.value)}\n        startAdornment={attachButton}\n        endAdornment={sendButton}\n        onKeyDown={handleKeyDown}\n      />\n    );\n  }\n\n  const onHolderMouseDown: React.MouseEventHandler<HTMLDivElement> = (event) => {\n    if (textareaRef.current && event.currentTarget === event.target) {\n      event.preventDefault();\n      textareaRef.current.focus();\n    }\n  };\n\n  return (\n    <TextFieldWrapper\n      className={cn(\"smwb-chat-composer\", className)}\n      data-testid=\"chat-composer\"\n      fullWidth\n      disabled={disabled}\n      isFilledState={value.length > 0}\n      isFocused={isFocused}\n      htmlFor={inputId}\n      shrink={Boolean(attachButton)}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={attachButton}\n      endAdornment={sendButton}\n    >\n      <textarea\n        id={inputId}\n        ref={textareaRef}\n        className={cn(\n          \"smwb-text-field__input\",\n          \"smwb-chat-composer__input\",\n          \"smwb-text-field__input--show-placeholder\",\n          attachButton && \"smwb-text-field__input--adornment-start\",\n          sendButton && \"smwb-text-field__input--adornment-end\"\n        )}\n        value={value}\n        disabled={disabled}\n        placeholder={placeholder}\n        rows={1}\n        onChange={(event) => setValue(event.target.value)}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        onKeyDown={handleKeyDown}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default ChatComposer;\n"],"names":["stopPropagation","event","insertNewlineAtCursor","element","value","setValue","start","_a","end","_b","nextValue","ChatComposer","className","onSendMessage","placeholder","disabled","sendAriaLabel","shiftEnterNewline","ctrlEnterNewline","fileUpload","attachInputId","onAttachClick","attachAriaLabel","useState","isFocused","setIsFocused","inputId","useId","textareaRef","useRef","multiline","canSend","showAttach","handleSend","text","handleKeyDown","shouldComposerNewlineOnEnter","attachClassName","cn","attachButton","jsx","Icon","ChatIconButton","sendButton","TextField","onHolderMouseDown","TextFieldWrapper"],"mappings":"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"}

package/dist/headless/components/dataDisplay/chat/chatHeader.js

@@ -0,0 +1,52 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import _ from "clsx";
+import { Icon as h } from "../../base/icon/icon.js";
+import { ChatIconButton as o } from "./chatIconButton.js";
+import { getChatLayoutActions as p } from "./utils.js";
+const b = {
+  floating: "picture_in_picture",
+  fullHeight: "fit_screen",
+  fullscreen: "open_in_full"
+}, w = {
+  floating: "Floating window",
+  fullHeight: "Full height",
+  fullscreen: "Fullscreen"
+};
+function F({
+  className: d,
+  title: i,
+  subtitle: c,
+  actions: m,
+  layout: s,
+  allowedLayouts: u = ["floating"],
+  onLayoutChange: t,
+  onClose: r
+}) {
+  const n = p(u, s), f = !!t && n.length > 0;
+  return /* @__PURE__ */ e("div", { className: _("smwb-chat-header", d), "data-testid": "chat-header", children: [
+    /* @__PURE__ */ e("div", { className: "smwb-chat-header__main", children: [
+      i ? /* @__PURE__ */ a("div", { className: "smwb-chat-header__title", children: i }) : null,
+      c ? /* @__PURE__ */ a("div", { className: "smwb-chat-header__subtitle", children: c }) : null
+    ] }),
+    /* @__PURE__ */ e("div", { className: "smwb-chat-header__actions", children: [
+      m,
+      f ? n.map((l) => /* @__PURE__ */ a(
+        o,
+        {
+          "aria-pressed": s === l,
+          "aria-label": w[l],
+          "data-testid": `chat-layout-${l}`,
+          onClick: () => t == null ? void 0 : t(l),
+          children: /* @__PURE__ */ a(h, { name: b[l], size: 18 })
+        },
+        l
+      )) : null,
+      r ? /* @__PURE__ */ a(o, { "aria-label": "Close chat", "data-testid": "chat-close", onClick: r, children: /* @__PURE__ */ a(h, { name: "close", size: 18 }) }) : null
+    ] })
+  ] });
+}
+export {
+  F as ChatHeader,
+  F as default
+};
+//# sourceMappingURL=chatHeader.js.map

package/dist/headless/components/dataDisplay/chat/chatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatHeader.js","sources":["../../../../../src/components/dataDisplay/chat/chatHeader.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { ChatLayoutMode } from \"./types\";\nimport { getChatLayoutActions } from \"./utils\";\n\nexport interface ChatHeaderProps {\n  className?: string;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  actions?: ReactNode;\n  layout?: ChatLayoutMode;\n  allowedLayouts?: ChatLayoutMode[];\n  onLayoutChange?: (layout: ChatLayoutMode) => void;\n  onClose?: () => void;\n}\n\nconst layoutIcons: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"picture_in_picture\",\n  fullHeight: \"fit_screen\",\n  fullscreen: \"open_in_full\",\n};\n\nconst layoutAriaLabels: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"Floating window\",\n  fullHeight: \"Full height\",\n  fullscreen: \"Fullscreen\",\n};\n\nexport function ChatHeader({\n  className,\n  title,\n  subtitle,\n  actions,\n  layout,\n  allowedLayouts = [\"floating\"],\n  onLayoutChange,\n  onClose,\n}: ChatHeaderProps) {\n  const layoutActions = getChatLayoutActions(allowedLayouts, layout);\n  const showLayoutActions = Boolean(onLayoutChange) && layoutActions.length > 0;\n\n  return (\n    <div className={cn(\"smwb-chat-header\", className)} data-testid=\"chat-header\">\n      <div className=\"smwb-chat-header__main\">\n        {title ? <div className=\"smwb-chat-header__title\">{title}</div> : null}\n        {subtitle ? <div className=\"smwb-chat-header__subtitle\">{subtitle}</div> : null}\n      </div>\n      <div className=\"smwb-chat-header__actions\">\n        {actions}\n        {showLayoutActions\n          ? layoutActions.map((mode) => (\n              <ChatIconButton\n                key={mode}\n                aria-pressed={layout === mode}\n                aria-label={layoutAriaLabels[mode]}\n                data-testid={`chat-layout-${mode}`}\n                onClick={() => onLayoutChange?.(mode)}\n              >\n                <Icon name={layoutIcons[mode]} size={18} />\n              </ChatIconButton>\n            ))\n          : null}\n        {onClose ? (\n          <ChatIconButton aria-label=\"Close chat\" data-testid=\"chat-close\" onClick={onClose}>\n            <Icon name=\"close\" size={18} />\n          </ChatIconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport default ChatHeader;\n"],"names":["layoutIcons","layoutAriaLabels","ChatHeader","className","title","subtitle","actions","layout","allowedLayouts","onLayoutChange","onClose","layoutActions","getChatLayoutActions","showLayoutActions","jsxs","cn","jsx","mode","ChatIconButton","Icon"],"mappings":";;;;;AAkBA,MAAMA,IAAiE;AAAA,EACrE,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd,GAEMC,IAAsE;AAAA,EAC1E,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,SAASC,EAAW;AAAA,EACzB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,gBAAAC,IAAiB,CAAC,UAAU;AAAA,EAC5B,gBAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAAgBC,EAAqBJ,GAAgBD,CAAM,GAC3DM,IAAoB,EAAQJ,KAAmBE,EAAc,SAAS;AAE5E,SACE,gBAAAG,EAAC,SAAI,WAAWC,EAAG,oBAAoBZ,CAAS,GAAG,eAAY,eAC7D,UAAA;AAAA,IAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,MAAAV,IAAQ,gBAAAY,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAM,IAAS;AAAA,MACjEX,IAAW,gBAAAW,EAAC,OAAA,EAAI,WAAU,8BAA8B,aAAS,IAAS;AAAA,IAAA,GAC7E;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,MAAAR;AAAA,MACAO,IACGF,EAAc,IAAI,CAACM,MACjB,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UAEC,gBAAcX,MAAWU;AAAA,UACzB,cAAYhB,EAAiBgB,CAAI;AAAA,UACjC,eAAa,eAAeA,CAAI;AAAA,UAChC,SAAS,MAAMR,KAAA,gBAAAA,EAAiBQ;AAAA,UAEhC,4BAACE,GAAA,EAAK,MAAMnB,EAAYiB,CAAI,GAAG,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,QANpCA;AAAA,MAAA,CAQR,IACD;AAAA,MACHP,IACC,gBAAAM,EAACE,GAAA,EAAe,cAAW,cAAa,eAAY,cAAa,SAASR,GACxE,UAAA,gBAAAM,EAACG,KAAK,MAAK,SAAQ,MAAM,IAAI,GAC/B,IACE;AAAA,IAAA,EAAA,CACN;AAAA,EAAA,GACF;AAEJ;"}

package/dist/headless/components/dataDisplay/chat/chatIconButton.js

@@ -0,0 +1,47 @@
+import { jsxs as b, jsx as p } from "react/jsx-runtime";
+import l from "react";
+import h from "clsx";
+import { Ripple as R } from "../../base/ripple/ripple.js";
+function d({
+  className: i,
+  children: m,
+  disabled: t,
+  edge: o,
+  color: a = "default",
+  onMouseDown: n,
+  ...u
+}) {
+  const e = l.useRef(null), s = (c) => {
+    n == null || n(c);
+  }, f = (c) => {
+    var r;
+    t || (r = e.current) == null || r.onRipple(c);
+  };
+  return /* @__PURE__ */ b(
+    "button",
+    {
+      type: "button",
+      className: h(
+        "smwb-chat-icon-button",
+        o === "start" && "smwb-chat-icon-button_edge-start",
+        o === "end" && "smwb-chat-icon-button_edge-end",
+        a === "primary" && "smwb-chat-icon-button_primary",
+        t && "smwb-chat-icon-button_disabled",
+        i
+      ),
+      disabled: t,
+      onMouseDown: s,
+      onPointerDown: f,
+      ...u,
+      children: [
+        m,
+        t ? null : /* @__PURE__ */ p(R, { actionRef: e, center: !0 })
+      ]
+    }
+  );
+}
+export {
+  d as ChatIconButton,
+  d as default
+};
+//# sourceMappingURL=chatIconButton.js.map

package/dist/headless/components/dataDisplay/chat/chatIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatIconButton.js","sources":["../../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  edge?: \"start\" | \"end\";\n  color?: \"default\" | \"primary\";\n}\n\nexport function ChatIconButton({\n  className,\n  children,\n  disabled,\n  edge,\n  color = \"default\",\n  onMouseDown: onMouseDownProp,\n  ...rest\n}: ChatIconButtonProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"smwb-chat-icon-button\",\n        edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        disabled && \"smwb-chat-icon-button_disabled\",\n        className\n      )}\n      disabled={disabled}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      {!disabled ? <Ripple actionRef={rippleRef} center /> : null}\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"names":["ChatIconButton","className","children","disabled","edge","color","onMouseDownProp","rest","rippleRef","React","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;AAUO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,aAAaC;AAAA,EACb,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAYC,EAAM,OAAyB,IAAI,GAE/CC,IAAc,CAACC,MAA+C;AAClE,IAAAL,KAAA,QAAAA,EAAkBK;AAAA,EACpB,GAEMC,IAAgB,CAACD,MAAiD;;AACtE,IAAKR,MACHU,IAAAL,EAAU,YAAV,QAAAK,EAAmB,SAASF;AAAA,EAEhC;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACAX,MAAS,WAAW;AAAA,QACpBA,MAAS,SAAS;AAAA,QAClBC,MAAU,aAAa;AAAA,QACvBF,KAAY;AAAA,QACZF;AAAA,MAAA;AAAA,MAEF,UAAAE;AAAA,MACA,aAAAO;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAL;AAAA,QACCC,IAAqD,OAA1C,gBAAAa,EAACC,GAAA,EAAO,WAAWT,GAAW,QAAM,IAAC;AAAA,MAAK;AAAA,IAAA;AAAA,EAAA;AAG7D;"}

package/dist/headless/components/dataDisplay/chat/chatLayout.js

@@ -0,0 +1,102 @@
+import { jsxs as l, Fragment as _, jsx as t } from "react/jsx-runtime";
+import { useEffect as E } from "react";
+import n from "clsx";
+import { Icon as b } from "../../base/icon/icon.js";
+import { ChatIconButton as g } from "./chatIconButton.js";
+import { useControllableState as w } from "../../../hooks/useControllableState.js";
+import { Chat as C } from "./chat.js";
+const H = (a) => typeof a == "number" ? `${a}px` : a, S = (a) => a === "left" ? "bottom-left" : "bottom-right";
+function P({
+  className: a,
+  contentClassName: r,
+  chatClassName: i,
+  side: e = "right",
+  chatWidth: x = 400,
+  collapsed: k,
+  defaultCollapsed: I = !1,
+  onCollapsedChange: N,
+  collapseAriaLabel: v = "Collapse chat panel",
+  expandAriaLabel: A = "Expand chat panel",
+  floatingAnchor: c,
+  chat: o,
+  children: u,
+  style: p,
+  ...m
+}) {
+  const [s, h] = w({
+    value: k,
+    defaultValue: I,
+    onChange: N
+  }), [B, d] = w({
+    defaultValue: !1
+  });
+  E(() => {
+    s || d(!1);
+  }, [s, d]);
+  const F = c != null ? c : S(e), L = e === "left" ? "dock_to_left" : "dock_to_right", O = /* @__PURE__ */ t(
+    g,
+    {
+      "aria-label": v,
+      "data-testid": "chat-layout-collapse",
+      onClick: () => h(!0),
+      children: /* @__PURE__ */ t(b, { name: e === "left" ? "left_panel_close" : "right_panel_close", size: 18 })
+    }
+  ), V = /* @__PURE__ */ t(g, { "aria-label": A, "data-testid": "chat-layout-expand", onClick: () => h(!1), children: /* @__PURE__ */ t(b, { name: L, size: 18 }) }), j = /* @__PURE__ */ l(_, { children: [
+    o.headerActions,
+    O
+  ] }), z = /* @__PURE__ */ l(_, { children: [
+    o.headerActions,
+    V
+  ] }), f = {
+    "--smwb-chat-layout-w": H(x)
+  };
+  if (s)
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        className: n("smwb-chat-layout", "smwb-chat-layout_collapsed", a),
+        style: { ...f, ...p },
+        "data-testid": "chat-layout",
+        "data-collapsed": "true",
+        ...m,
+        children: [
+          /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
+          /* @__PURE__ */ t(
+            C,
+            {
+              ...o,
+              className: i,
+              floatingTrigger: !0,
+              anchor: F,
+              allowedLayouts: ["floating"],
+              layout: "floating",
+              open: B,
+              onOpenChange: d,
+              headerActions: z
+            }
+          )
+        ]
+      }
+    );
+  const y = /* @__PURE__ */ t("aside", { className: "smwb-chat-layout__panel", "data-testid": "chat-layout-panel", children: /* @__PURE__ */ t(C, { ...o, className: i, embedded: !0, allowedLayouts: [], headerActions: j }) });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: n("smwb-chat-layout", `smwb-chat-layout_${e}`, a),
+      style: { ...f, ...p },
+      "data-testid": "chat-layout",
+      "data-collapsed": "false",
+      ...m,
+      children: [
+        e === "left" ? y : null,
+        /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
+        e === "right" ? y : null
+      ]
+    }
+  );
+}
+export {
+  P as ChatLayout,
+  P as default
+};
+//# sourceMappingURL=chatLayout.js.map

package/dist/headless/components/dataDisplay/chat/chatLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatLayout.js","sources":["../../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport Chat, { ChatProps } from \"./chat\";\nimport { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"className\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  contentClassName?: string;\n  chatClassName?: string;\n  side?: ChatLayoutSide;\n  chatWidth?: number | string;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n  floatingAnchor?: ChatAnchor;\n  chat: ChatLayoutChatProps;\n}\n\nexport function ChatLayout({\n  className,\n  contentClassName,\n  chatClassName,\n  side = \"right\",\n  chatWidth = 400,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseAriaLabel = \"Collapse chat panel\",\n  expandAriaLabel = \"Expand chat panel\",\n  floatingAnchor,\n  chat,\n  children,\n  style,\n  ...rest\n}: ChatLayoutProps) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = useControllableState<boolean>({\n    defaultValue: false,\n  });\n\n  useEffect(() => {\n    if (!collapsed) {\n      setFloatingOpen(false);\n    }\n  }, [collapsed, setFloatingOpen]);\n\n  const anchor = floatingAnchor ?? floatingAnchorForSide(side);\n  const dockIcon = side === \"left\" ? \"dock_to_left\" : \"dock_to_right\";\n  const collapseIcon = side === \"left\" ? \"left_panel_close\" : \"right_panel_close\";\n\n  const collapseButton = (\n    <ChatIconButton\n      aria-label={collapseAriaLabel}\n      data-testid=\"chat-layout-collapse\"\n      onClick={() => setCollapsed(true)}\n    >\n      <Icon name={collapseIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (\n    <ChatIconButton aria-label={expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (\n    <>\n      {chat.headerActions}\n      {collapseButton}\n    </>\n  );\n\n  const floatingHeaderActions = (\n    <>\n      {chat.headerActions}\n      {expandButton}\n    </>\n  );\n\n  const cssVars = {\n    \"--smwb-chat-layout-w\": len(chatWidth),\n  } as CSSProperties;\n\n  if (collapsed) {\n    return (\n      <div\n        className={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", className)}\n        style={{ ...cssVars, ...style }}\n        data-testid=\"chat-layout\"\n        data-collapsed=\"true\"\n        {...rest}\n      >\n        <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n          {children}\n        </div>\n        <Chat\n          {...chat}\n          className={chatClassName}\n          floatingTrigger\n          anchor={anchor}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions}\n        />\n      </div>\n    );\n  }\n\n  const panel = (\n    <aside className=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n      <Chat {...chat} className={chatClassName} embedded allowedLayouts={[]} headerActions={dockedHeaderActions} />\n    </aside>\n  );\n\n  return (\n    <div\n      className={cn(\"smwb-chat-layout\", `smwb-chat-layout_${side}`, className)}\n      style={{ ...cssVars, ...style }}\n      data-testid=\"chat-layout\"\n      data-collapsed=\"false\"\n      {...rest}\n    >\n      {side === \"left\" ? panel : null}\n      <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n        {children}\n      </div>\n      {side === \"right\" ? panel : null}\n    </div>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","className","contentClassName","chatClassName","chatWidth","collapsedProp","defaultCollapsed","onCollapsedChange","collapseAriaLabel","expandAriaLabel","floatingAnchor","chat","children","style","rest","collapsed","setCollapsed","useControllableState","floatingOpen","setFloatingOpen","useEffect","anchor","dockIcon","collapseButton","jsx","ChatIconButton","Icon","expandButton","dockedHeaderActions","jsxs","Fragment","floatingHeaderActions","cssVars","cn","Chat","panel"],"mappings":"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"}

package/dist/headless/components/dataDisplay/chat/chatMessageAvatar.js

@@ -0,0 +1,12 @@
+import { jsx as m } from "react/jsx-runtime";
+import c from "clsx";
+import { Avatar as n } from "../avatar/avatar.js";
+function p({ author: e, enabled: i = !0, className: l }) {
+  var s, a;
+  return i ? /* @__PURE__ */ m("div", { className: c("smwb-chat-message__avatar", l), "data-testid": "chat-message-avatar", children: /* @__PURE__ */ m(n, { src: e == null ? void 0 : e.avatarSrc, alt: (s = e == null ? void 0 : e.avatarAlt) != null ? s : e == null ? void 0 : e.name, size: "small", children: (a = e == null ? void 0 : e.name) == null ? void 0 : a.slice(0, 1) }) }) : null;
+}
+export {
+  p as ChatMessageAvatar,
+  p as default
+};
+//# sourceMappingURL=chatMessageAvatar.js.map

package/dist/headless/components/dataDisplay/chat/chatMessageAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageAvatar.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageAvatar.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Avatar } from \"../avatar/avatar\";\nimport { ChatAuthor } from \"./types\";\n\nexport interface ChatMessageAvatarProps {\n  author?: ChatAuthor;\n  enabled?: boolean;\n  className?: string;\n}\n\nexport function ChatMessageAvatar({ author, enabled = true, className }: ChatMessageAvatarProps) {\n  if (!enabled) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"smwb-chat-message__avatar\", className)} data-testid=\"chat-message-avatar\">\n      <Avatar src={author?.avatarSrc} alt={author?.avatarAlt ?? author?.name} size=\"small\">\n        {author?.name?.slice(0, 1)}\n      </Avatar>\n    </div>\n  );\n}\n\nexport default ChatMessageAvatar;\n"],"names":["ChatMessageAvatar","author","enabled","className","jsx","cn","Avatar","_a","_b"],"mappings":";;;AAWO,SAASA,EAAkB,EAAE,QAAAC,GAAQ,SAAAC,IAAU,IAAM,WAAAC,KAAqC;;AAC/F,SAAKD,IAKH,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAG,6BAA6BF,CAAS,GAAG,eAAY,uBACtE,UAAA,gBAAAC,EAACE,GAAA,EAAO,KAAKL,KAAA,gBAAAA,EAAQ,WAAW,MAAKM,IAAAN,KAAA,gBAAAA,EAAQ,cAAR,OAAAM,IAAqBN,KAAA,gBAAAA,EAAQ,MAAM,MAAK,SAC1E,WAAAO,IAAAP,KAAA,gBAAAA,EAAQ,SAAR,gBAAAO,EAAc,MAAM,GAAG,GAAC,CAC3B,GACF,IARO;AAUX;"}

package/dist/headless/components/dataDisplay/chat/chatMessageBubble.js

@@ -0,0 +1,60 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import h from "clsx";
+import { Typography as o } from "../typography/typography.js";
+import { ChatAttachments as C } from "./chatAttachments.js";
+import { ChatMessageAvatar as b } from "./chatMessageAvatar.js";
+import { ChatMessageStatus as S } from "./chatMessageStatus.js";
+import { formatChatTimestamp as x } from "./utils.js";
+function k({
+  className: f,
+  align: s,
+  message: c,
+  author: a,
+  text: n,
+  attachments: p,
+  timestamp: _,
+  status: t,
+  showAvatars: i = !1,
+  showAttachments: g = !1,
+  showStatus: u = !1,
+  statusIcons: v,
+  renderStatus: w,
+  bubbleClassName: N
+}) {
+  const l = x(_), d = t != null ? t : c.status, r = u && s === "end" && d;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: h("smwb-chat-message", `smwb-chat-message_${s}`, f),
+      "data-testid": `chat-message-${s}`,
+      children: [
+        s === "start" ? /* @__PURE__ */ e(b, { author: a, enabled: i }) : null,
+        /* @__PURE__ */ m("div", { className: "smwb-chat-message__content", children: [
+          a != null && a.name ? /* @__PURE__ */ e(o, { variant: "caption", className: "smwb-chat-message__author", children: a.name }) : null,
+          /* @__PURE__ */ m("div", { className: h("smwb-chat-message__bubble", N), children: [
+            n ? /* @__PURE__ */ e("div", { className: "smwb-chat-message__text", children: n }) : null,
+            /* @__PURE__ */ e(C, { attachments: p, enabled: g })
+          ] }),
+          l || r ? /* @__PURE__ */ m("div", { className: "smwb-chat-message__meta", "data-testid": "chat-message-meta", children: [
+            l ? /* @__PURE__ */ e(o, { variant: "caption", className: "smwb-chat-message__time", children: l }) : null,
+            r ? /* @__PURE__ */ e(
+              S,
+              {
+                message: c,
+                status: d,
+                statusIcons: v,
+                renderStatus: w
+              }
+            ) : null
+          ] }) : null
+        ] }),
+        s === "end" ? /* @__PURE__ */ e(b, { author: a, enabled: i }) : null
+      ]
+    }
+  );
+}
+export {
+  k as ChatMessageBubble,
+  k as default
+};
+//# sourceMappingURL=chatMessageBubble.js.map

package/dist/headless/components/dataDisplay/chat/chatMessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageBubble.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageBubble.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Typography from \"../typography/typography\";\nimport ChatAttachments from \"./chatAttachments\";\nimport ChatMessageAvatar from \"./chatMessageAvatar\";\nimport ChatMessageStatus from \"./chatMessageStatus\";\nimport {\n  ChatAuthor,\n  ChatAttachment,\n  ChatMessage,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n  ChatMessageStatus as ChatMessageStatusValue,\n} from \"./types\";\nimport { formatChatTimestamp } from \"./utils\";\n\nexport interface ChatMessageBubbleProps {\n  className?: string;\n  align: \"start\" | \"end\";\n  message: ChatMessage;\n  author?: ChatAuthor;\n  text?: ReactNode;\n  attachments?: ChatAttachment[];\n  timestamp?: string | Date;\n  status?: ChatMessageStatusValue;\n  showAvatars?: boolean;\n  showAttachments?: boolean;\n  showStatus?: boolean;\n  statusIcons?: ChatMessageStatusIcons & Record<string, string | undefined>;\n  renderStatus?: (ctx: ChatMessageStatusRenderContext) => ReactNode;\n  bubbleClassName?: string;\n}\n\nexport function ChatMessageBubble({\n  className,\n  align,\n  message,\n  author,\n  text,\n  attachments,\n  timestamp,\n  status,\n  showAvatars = false,\n  showAttachments = false,\n  showStatus = false,\n  statusIcons,\n  renderStatus,\n  bubbleClassName,\n}: ChatMessageBubbleProps) {\n  const time = formatChatTimestamp(timestamp);\n  const deliveryStatus = status ?? message.status;\n  const shouldShowStatus = showStatus && align === \"end\" && deliveryStatus;\n\n  return (\n    <div\n      className={cn(\"smwb-chat-message\", `smwb-chat-message_${align}`, className)}\n      data-testid={`chat-message-${align}`}\n    >\n      {align === \"start\" ? <ChatMessageAvatar author={author} enabled={showAvatars} /> : null}\n      <div className=\"smwb-chat-message__content\">\n        {author?.name ? (\n          <Typography variant=\"caption\" className=\"smwb-chat-message__author\">\n            {author.name}\n          </Typography>\n        ) : null}\n        <div className={cn(\"smwb-chat-message__bubble\", bubbleClassName)}>\n          {text ? <div className=\"smwb-chat-message__text\">{text}</div> : null}\n          <ChatAttachments attachments={attachments} enabled={showAttachments} />\n        </div>\n        {time || shouldShowStatus ? (\n          <div className=\"smwb-chat-message__meta\" data-testid=\"chat-message-meta\">\n            {time ? (\n              <Typography variant=\"caption\" className=\"smwb-chat-message__time\">\n                {time}\n              </Typography>\n            ) : null}\n            {shouldShowStatus ? (\n              <ChatMessageStatus\n                message={message}\n                status={deliveryStatus}\n                statusIcons={statusIcons}\n                renderStatus={renderStatus}\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      {align === \"end\" ? <ChatMessageAvatar author={author} enabled={showAvatars} /> : null}\n    </div>\n  );\n}\n\nexport default ChatMessageBubble;\n"],"names":["ChatMessageBubble","className","align","message","author","text","attachments","timestamp","status","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","bubbleClassName","time","formatChatTimestamp","deliveryStatus","shouldShowStatus","jsxs","cn","jsx","ChatMessageAvatar","Typography","ChatAttachments","ChatMessageStatus"],"mappings":";;;;;;;AAiCO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAOC,EAAoBT,CAAS,GACpCU,IAAiBT,KAAA,OAAAA,IAAUL,EAAQ,QACnCe,IAAmBP,KAAcT,MAAU,SAASe;AAE1D,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,qBAAqB,qBAAqBlB,CAAK,IAAID,CAAS;AAAA,MAC1E,eAAa,gBAAgBC,CAAK;AAAA,MAEjC,UAAA;AAAA,QAAAA,MAAU,UAAU,gBAAAmB,EAACC,GAAA,EAAkB,QAAAlB,GAAgB,SAASK,GAAa,IAAK;AAAA,QACnF,gBAAAU,EAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,UAAAf,KAAA,QAAAA,EAAQ,yBACNmB,GAAA,EAAW,SAAQ,WAAU,WAAU,6BACrC,UAAAnB,EAAO,KAAA,CACV,IACE;AAAA,4BACH,OAAA,EAAI,WAAWgB,EAAG,6BAA6BN,CAAe,GAC5D,UAAA;AAAA,YAAAT,IAAO,gBAAAgB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAK,IAAS;AAAA,YAChE,gBAAAA,EAACG,GAAA,EAAgB,aAAAlB,GAA0B,SAASI,EAAA,CAAiB;AAAA,UAAA,GACvE;AAAA,UACCK,KAAQG,IACP,gBAAAC,EAAC,SAAI,WAAU,2BAA0B,eAAY,qBAClD,UAAA;AAAA,YAAAJ,sBACEQ,GAAA,EAAW,SAAQ,WAAU,WAAU,2BACrC,aACH,IACE;AAAA,YACHL,IACC,gBAAAG;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,SAAAtB;AAAA,gBACA,QAAQc;AAAA,gBACR,aAAAL;AAAA,gBACA,cAAAC;AAAA,cAAA;AAAA,YAAA,IAEA;AAAA,UAAA,EAAA,CACN,IACE;AAAA,QAAA,GACN;AAAA,QACCX,MAAU,QAAQ,gBAAAmB,EAACC,KAAkB,QAAAlB,GAAgB,SAASK,GAAa,IAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF;"}