@smwb/ui-react 2.0.0

package/dist/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/components/dataDisplay/chat/chatAttachments.d.ts

@@ -0,0 +1,8 @@
+import { ChatAttachment } from "./types";
+export interface ChatAttachmentsProps {
+    attachments?: ChatAttachment[];
+    className?: string;
+    enabled?: boolean;
+}
+export declare function ChatAttachments({ attachments, className, enabled }: ChatAttachmentsProps): import("react/jsx-runtime").JSX.Element | null;
+export default ChatAttachments;

package/dist/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/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/components/dataDisplay/chat/chatComposer.d.ts

@@ -0,0 +1,15 @@
+export interface ChatComposerProps {
+    className?: string;
+    onSendMessage?: (text: string) => void | Promise<void>;
+    placeholder?: string;
+    disabled?: boolean;
+    sendAriaLabel?: string;
+    shiftEnterNewline?: boolean;
+    ctrlEnterNewline?: boolean;
+    fileUpload?: boolean;
+    attachInputId?: string;
+    onAttachClick?: () => void;
+    attachAriaLabel?: string;
+}
+export declare function ChatComposer({ className, onSendMessage, placeholder, disabled, sendAriaLabel, shiftEnterNewline, ctrlEnterNewline, fileUpload, attachInputId, onAttachClick, attachAriaLabel, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export default ChatComposer;

package/dist/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/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/components/dataDisplay/chat/chatHeader.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { ChatLayoutMode } from "./types";
+export interface ChatHeaderProps {
+    className?: string;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    layout?: ChatLayoutMode;
+    allowedLayouts?: ChatLayoutMode[];
+    onLayoutChange?: (layout: ChatLayoutMode) => void;
+    onClose?: () => void;
+}
+export declare function ChatHeader({ className, title, subtitle, actions, layout, allowedLayouts, onLayoutChange, onClose, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default ChatHeader;

package/dist/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/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/components/dataDisplay/chat/chatIconButton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    edge?: "start" | "end";
+    color?: "default" | "primary";
+}
+export declare function ChatIconButton({ className, children, disabled, edge, color, onMouseDown: onMouseDownProp, ...rest }: ChatIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default ChatIconButton;

package/dist/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/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/components/dataDisplay/chat/chatLayout.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, PropsWithChildren } from "react";
+import { ChatProps } from "./chat";
+import { ChatAnchor, ChatLayoutSide } from "./types";
+export type ChatLayoutChatProps = Omit<ChatProps, "className" | "embedded" | "floatingTrigger" | "anchor" | "allowedLayouts" | "layout" | "defaultLayout" | "open" | "defaultOpen" | "onOpenChange" | "onLayoutChange">;
+export interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    contentClassName?: string;
+    chatClassName?: string;
+    side?: ChatLayoutSide;
+    chatWidth?: number | string;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    collapseAriaLabel?: string;
+    expandAriaLabel?: string;
+    floatingAnchor?: ChatAnchor;
+    chat: ChatLayoutChatProps;
+}
+export declare function ChatLayout({ className, contentClassName, chatClassName, side, chatWidth, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapseAriaLabel, expandAriaLabel, floatingAnchor, chat, children, style, ...rest }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default ChatLayout;

package/dist/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/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/components/dataDisplay/chat/chatMessageAvatar.d.ts

@@ -0,0 +1,8 @@
+import { ChatAuthor } from "./types";
+export interface ChatMessageAvatarProps {
+    author?: ChatAuthor;
+    enabled?: boolean;
+    className?: string;
+}
+export declare function ChatMessageAvatar({ author, enabled, className }: ChatMessageAvatarProps): import("react/jsx-runtime").JSX.Element | null;
+export default ChatMessageAvatar;

package/dist/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/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/components/dataDisplay/chat/chatMessageBubble.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { ChatAuthor, ChatAttachment, ChatMessage, ChatMessageStatusIcons, ChatMessageStatusRenderContext, ChatMessageStatus as ChatMessageStatusValue } from "./types";
+export interface ChatMessageBubbleProps {
+    className?: string;
+    align: "start" | "end";
+    message: ChatMessage;
+    author?: ChatAuthor;
+    text?: ReactNode;
+    attachments?: ChatAttachment[];
+    timestamp?: string | Date;
+    status?: ChatMessageStatusValue;
+    showAvatars?: boolean;
+    showAttachments?: boolean;
+    showStatus?: boolean;
+    statusIcons?: ChatMessageStatusIcons & Record<string, string | undefined>;
+    renderStatus?: (ctx: ChatMessageStatusRenderContext) => ReactNode;
+    bubbleClassName?: string;
+}
+export declare function ChatMessageBubble({ className, align, message, author, text, attachments, timestamp, status, showAvatars, showAttachments, showStatus, statusIcons, renderStatus, bubbleClassName, }: ChatMessageBubbleProps): import("react/jsx-runtime").JSX.Element;
+export default ChatMessageBubble;