@smwb/ui-react 2.0.0

package/dist/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/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;"}

package/dist/components/dataDisplay/chat/chatMessageIncoming.d.ts

@@ -0,0 +1,7 @@
+import { ChatMessage, ChatMessageRenderContext } from "./types";
+export interface ChatMessageIncomingProps extends ChatMessageRenderContext {
+    message: ChatMessage;
+    className?: string;
+}
+export declare function ChatMessageIncoming({ message, showAvatars, showAttachments, className }: ChatMessageIncomingProps): import("react/jsx-runtime").JSX.Element;
+export default ChatMessageIncoming;

package/dist/components/dataDisplay/chat/chatMessageIncoming.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { ChatMessageBubble as o } from "./chatMessageBubble.js";
+function i({ message: t, showAvatars: a, showAttachments: e, className: m }) {
+  return /* @__PURE__ */ n(
+    o,
+    {
+      className: m,
+      align: "start",
+      message: t,
+      author: t.author,
+      text: t.text,
+      attachments: t.attachments,
+      timestamp: t.timestamp,
+      showAvatars: a,
+      showAttachments: e,
+      bubbleClassName: "smwb-chat-message__bubble_incoming"
+    }
+  );
+}
+export {
+  i as ChatMessageIncoming,
+  i as default
+};
+//# sourceMappingURL=chatMessageIncoming.js.map

package/dist/components/dataDisplay/chat/chatMessageIncoming.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageIncoming.js","sources":["../../../../src/components/dataDisplay/chat/chatMessageIncoming.tsx"],"sourcesContent":["import React from \"react\";\nimport ChatMessageBubble from \"./chatMessageBubble\";\nimport { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageIncomingProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  className?: string;\n}\n\nexport function ChatMessageIncoming({ message, showAvatars, showAttachments, className }: ChatMessageIncomingProps) {\n  return (\n    <ChatMessageBubble\n      className={className}\n      align=\"start\"\n      message={message}\n      author={message.author}\n      text={message.text}\n      attachments={message.attachments}\n      timestamp={message.timestamp}\n      showAvatars={showAvatars}\n      showAttachments={showAttachments}\n      bubbleClassName=\"smwb-chat-message__bubble_incoming\"\n    />\n  );\n}\n\nexport default ChatMessageIncoming;\n"],"names":["ChatMessageIncoming","message","showAvatars","showAttachments","className","jsx","ChatMessageBubble"],"mappings":";;AASO,SAASA,EAAoB,EAAE,SAAAC,GAAS,aAAAC,GAAa,iBAAAC,GAAiB,WAAAC,KAAuC;AAClH,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAF;AAAA,MACA,OAAM;AAAA,MACN,SAAAH;AAAA,MACA,QAAQA,EAAQ;AAAA,MAChB,MAAMA,EAAQ;AAAA,MACd,aAAaA,EAAQ;AAAA,MACrB,WAAWA,EAAQ;AAAA,MACnB,aAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,iBAAgB;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/dist/components/dataDisplay/chat/chatMessageItem.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { ChatMessage, ChatMessageRenderContext } from "./types";
+export interface ChatMessageItemProps extends ChatMessageRenderContext {
+    message: ChatMessage;
+    className?: string;
+    renderMessage?: (message: ChatMessage, ctx: ChatMessageRenderContext) => ReactNode;
+}
+export declare function ChatMessageItem({ message, showAvatars, showAttachments, showStatus, statusIcons, renderStatus, className, renderMessage, }: ChatMessageItemProps): import("react/jsx-runtime").JSX.Element;
+export default ChatMessageItem;

package/dist/components/dataDisplay/chat/chatMessageItem.js

@@ -0,0 +1,62 @@
+import { jsx as m } from "react/jsx-runtime";
+import a from "clsx";
+import { ChatMessageIncoming as d } from "./chatMessageIncoming.js";
+import { ChatMessageOutgoing as p } from "./chatMessageOutgoing.js";
+import { ChatMessageSystem as h } from "./chatMessageSystem.js";
+function s({
+  message: t,
+  showAvatars: r,
+  showAttachments: e,
+  showStatus: c,
+  statusIcons: o,
+  renderStatus: n,
+  className: i,
+  renderMessage: u
+}) {
+  var f;
+  const g = { showAvatars: r, showAttachments: e, showStatus: c, statusIcons: o, renderStatus: n };
+  if (u)
+    return /* @__PURE__ */ m("div", { className: a("smwb-chat-message-item", i), children: u(t, g) });
+  switch (t.variant) {
+    case "outgoing":
+      return /* @__PURE__ */ m(
+        p,
+        {
+          message: t,
+          showAvatars: r,
+          showAttachments: e,
+          showStatus: c,
+          statusIcons: o,
+          renderStatus: n,
+          className: i
+        }
+      );
+    case "system":
+      return /* @__PURE__ */ m(h, { message: t, className: i });
+    case "custom":
+      return /* @__PURE__ */ m(
+        "div",
+        {
+          className: a("smwb-chat-message-item", "smwb-chat-message-item_custom", i),
+          "data-testid": "chat-message-custom",
+          children: (f = t.content) != null ? f : t.text
+        }
+      );
+    case "incoming":
+    default:
+      return /* @__PURE__ */ m(
+        d,
+        {
+          message: t,
+          showAvatars: r,
+          showAttachments: e,
+          className: i
+        }
+      );
+  }
+}
+export {
+  s as ChatMessageItem,
+  s as default
+};
+//# sourceMappingURL=chatMessageItem.js.map

package/dist/components/dataDisplay/chat/chatMessageItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageItem.js","sources":["../../../../src/components/dataDisplay/chat/chatMessageItem.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport ChatMessageIncoming from \"./chatMessageIncoming\";\nimport ChatMessageOutgoing from \"./chatMessageOutgoing\";\nimport ChatMessageSystem from \"./chatMessageSystem\";\nimport { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageItemProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  className?: string;\n  renderMessage?: (message: ChatMessage, ctx: ChatMessageRenderContext) => ReactNode;\n}\n\nexport function ChatMessageItem({\n  message,\n  showAvatars,\n  showAttachments,\n  showStatus,\n  statusIcons,\n  renderStatus,\n  className,\n  renderMessage,\n}: ChatMessageItemProps) {\n  const ctx = { showAvatars, showAttachments, showStatus, statusIcons, renderStatus };\n\n  if (renderMessage) {\n    return <div className={cn(\"smwb-chat-message-item\", className)}>{renderMessage(message, ctx)}</div>;\n  }\n\n  switch (message.variant) {\n    case \"outgoing\":\n      return (\n        <ChatMessageOutgoing\n          message={message}\n          showAvatars={showAvatars}\n          showAttachments={showAttachments}\n          showStatus={showStatus}\n          statusIcons={statusIcons}\n          renderStatus={renderStatus}\n          className={className}\n        />\n      );\n    case \"system\":\n      return <ChatMessageSystem message={message} className={className} />;\n    case \"custom\":\n      return (\n        <div\n          className={cn(\"smwb-chat-message-item\", \"smwb-chat-message-item_custom\", className)}\n          data-testid=\"chat-message-custom\"\n        >\n          {message.content ?? message.text}\n        </div>\n      );\n    case \"incoming\":\n    default:\n      return (\n        <ChatMessageIncoming\n          message={message}\n          showAvatars={showAvatars}\n          showAttachments={showAttachments}\n          className={className}\n        />\n      );\n  }\n}\n\nexport default ChatMessageItem;\n"],"names":["ChatMessageItem","message","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","className","renderMessage","ctx","jsx","cn","ChatMessageOutgoing","ChatMessageSystem","_a","ChatMessageIncoming"],"mappings":";;;;;AAaO,SAASA,EAAgB;AAAA,EAC9B,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AACF,GAAyB;;AACvB,QAAMC,IAAM,EAAE,aAAAP,GAAa,iBAAAC,GAAiB,YAAAC,GAAY,aAAAC,GAAa,cAAAC,EAAA;AAErE,MAAIE;AACF,WAAO,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAG,0BAA0BJ,CAAS,GAAI,UAAAC,EAAcP,GAASQ,CAAG,EAAA,CAAE;AAG/F,UAAQR,EAAQ,SAAA;AAAA,IACd,KAAK;AACH,aACE,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAAX;AAAA,UACA,aAAAC;AAAA,UACA,iBAAAC;AAAA,UACA,YAAAC;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aAAO,gBAAAG,EAACG,GAAA,EAAkB,SAAAZ,GAAkB,WAAAM,EAAA,CAAsB;AAAA,IACpE,KAAK;AACH,aACE,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAG,0BAA0B,iCAAiCJ,CAAS;AAAA,UAClF,eAAY;AAAA,UAEX,WAAAO,IAAAb,EAAQ,YAAR,OAAAa,IAAmBb,EAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAGlC,KAAK;AAAA,IACL;AACE,aACE,gBAAAS;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,SAAAd;AAAA,UACA,aAAAC;AAAA,UACA,iBAAAC;AAAA,UACA,WAAAI;AAAA,QAAA;AAAA,MAAA;AAAA,EACF;AAGR;"}

package/dist/components/dataDisplay/chat/chatMessageOutgoing.d.ts

@@ -0,0 +1,7 @@
+import { ChatMessage, ChatMessageRenderContext } from "./types";
+export interface ChatMessageOutgoingProps extends ChatMessageRenderContext {
+    message: ChatMessage;
+    className?: string;
+}
+export declare function ChatMessageOutgoing({ message, showAvatars, showAttachments, showStatus, statusIcons, renderStatus, className, }: ChatMessageOutgoingProps): import("react/jsx-runtime").JSX.Element;
+export default ChatMessageOutgoing;

package/dist/components/dataDisplay/chat/chatMessageOutgoing.js

@@ -0,0 +1,36 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ChatMessageBubble as s } from "./chatMessageBubble.js";
+function h({
+  message: t,
+  showAvatars: a,
+  showAttachments: u,
+  showStatus: o,
+  statusIcons: e,
+  renderStatus: b,
+  className: n
+}) {
+  return /* @__PURE__ */ r(
+    s,
+    {
+      className: n,
+      align: "end",
+      message: t,
+      author: t.author,
+      text: t.text,
+      attachments: t.attachments,
+      timestamp: t.timestamp,
+      status: t.status,
+      showAvatars: a,
+      showAttachments: u,
+      showStatus: o,
+      statusIcons: e,
+      renderStatus: b,
+      bubbleClassName: "smwb-chat-message__bubble_outgoing"
+    }
+  );
+}
+export {
+  h as ChatMessageOutgoing,
+  h as default
+};
+//# sourceMappingURL=chatMessageOutgoing.js.map

package/dist/components/dataDisplay/chat/chatMessageOutgoing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageOutgoing.js","sources":["../../../../src/components/dataDisplay/chat/chatMessageOutgoing.tsx"],"sourcesContent":["import React from \"react\";\nimport ChatMessageBubble from \"./chatMessageBubble\";\nimport { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageOutgoingProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  className?: string;\n}\n\nexport function ChatMessageOutgoing({\n  message,\n  showAvatars,\n  showAttachments,\n  showStatus,\n  statusIcons,\n  renderStatus,\n  className,\n}: ChatMessageOutgoingProps) {\n  return (\n    <ChatMessageBubble\n      className={className}\n      align=\"end\"\n      message={message}\n      author={message.author}\n      text={message.text}\n      attachments={message.attachments}\n      timestamp={message.timestamp}\n      status={message.status}\n      showAvatars={showAvatars}\n      showAttachments={showAttachments}\n      showStatus={showStatus}\n      statusIcons={statusIcons}\n      renderStatus={renderStatus}\n      bubbleClassName=\"smwb-chat-message__bubble_outgoing\"\n    />\n  );\n}\n\nexport default ChatMessageOutgoing;\n"],"names":["ChatMessageOutgoing","message","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","className","jsx","ChatMessageBubble"],"mappings":";;AASO,SAASA,EAAoB;AAAA,EAClC,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AACF,GAA6B;AAC3B,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAF;AAAA,MACA,OAAM;AAAA,MACN,SAAAN;AAAA,MACA,QAAQA,EAAQ;AAAA,MAChB,MAAMA,EAAQ;AAAA,MACd,aAAaA,EAAQ;AAAA,MACrB,WAAWA,EAAQ;AAAA,MACnB,QAAQA,EAAQ;AAAA,MAChB,aAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,iBAAgB;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/dist/components/dataDisplay/chat/chatMessageSkeleton.d.ts

@@ -0,0 +1,8 @@
+export interface ChatMessageSkeletonProps {
+    className?: string;
+    align?: "start" | "end";
+    showAvatar?: boolean;
+    lines?: number;
+}
+export declare function ChatMessageSkeleton({ className, align, showAvatar, lines, }: ChatMessageSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default ChatMessageSkeleton;

package/dist/components/dataDisplay/chat/chatMessageSkeleton.js

@@ -0,0 +1,32 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import d from "clsx";
+import { Skeleton as s } from "../../feedBack/skeleton/skeleton.js";
+function o({
+  className: i,
+  align: t = "start",
+  showAvatar: a = !1,
+  lines: h = 2
+}) {
+  const n = t === "start" ? "72%" : "64%";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: d("smwb-chat-message", `smwb-chat-message_${t}`, "smwb-chat-message-skeleton", i),
+      "data-testid": "chat-message-skeleton",
+      "aria-hidden": "true",
+      children: [
+        t === "start" && a ? /* @__PURE__ */ e(s, { variant: "circular", width: 32, height: 32 }) : null,
+        /* @__PURE__ */ e("div", { className: "smwb-chat-message__content", children: /* @__PURE__ */ r("div", { className: "smwb-chat-message-skeleton__bubble", children: [
+          /* @__PURE__ */ e(s, { variant: "rounded", width: n, height: 14 }),
+          h > 1 ? /* @__PURE__ */ e(s, { variant: "rounded", width: "48%", height: 14 }) : null
+        ] }) }),
+        t === "end" && a ? /* @__PURE__ */ e(s, { variant: "circular", width: 32, height: 32 }) : null
+      ]
+    }
+  );
+}
+export {
+  o as ChatMessageSkeleton,
+  o as default
+};
+//# sourceMappingURL=chatMessageSkeleton.js.map

package/dist/components/dataDisplay/chat/chatMessageSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageSkeleton.js","sources":["../../../../src/components/dataDisplay/chat/chatMessageSkeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton/skeleton\";\n\nexport interface ChatMessageSkeletonProps {\n  className?: string;\n  align?: \"start\" | \"end\";\n  showAvatar?: boolean;\n  lines?: number;\n}\n\nexport function ChatMessageSkeleton({\n  className,\n  align = \"start\",\n  showAvatar = false,\n  lines = 2,\n}: ChatMessageSkeletonProps) {\n  const bubbleWidth = align === \"start\" ? \"72%\" : \"64%\";\n\n  return (\n    <div\n      className={cn(\"smwb-chat-message\", `smwb-chat-message_${align}`, \"smwb-chat-message-skeleton\", className)}\n      data-testid=\"chat-message-skeleton\"\n      aria-hidden=\"true\"\n    >\n      {align === \"start\" && showAvatar ? <Skeleton variant=\"circular\" width={32} height={32} /> : null}\n      <div className=\"smwb-chat-message__content\">\n        <div className=\"smwb-chat-message-skeleton__bubble\">\n          <Skeleton variant=\"rounded\" width={bubbleWidth} height={14} />\n          {lines > 1 ? <Skeleton variant=\"rounded\" width=\"48%\" height={14} /> : null}\n        </div>\n      </div>\n      {align === \"end\" && showAvatar ? <Skeleton variant=\"circular\" width={32} height={32} /> : null}\n    </div>\n  );\n}\n\nexport default ChatMessageSkeleton;\n"],"names":["ChatMessageSkeleton","className","align","showAvatar","lines","bubbleWidth","jsxs","cn","jsx","Skeleton"],"mappings":";;;AAWO,SAASA,EAAoB;AAAA,EAClC,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AACV,GAA6B;AAC3B,QAAMC,IAAcH,MAAU,UAAU,QAAQ;AAEhD,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,qBAAqB,qBAAqBL,CAAK,IAAI,8BAA8BD,CAAS;AAAA,MACxG,eAAY;AAAA,MACZ,eAAY;AAAA,MAEX,UAAA;AAAA,QAAAC,MAAU,WAAWC,IAAa,gBAAAK,EAACC,GAAA,EAAS,SAAQ,YAAW,OAAO,IAAI,QAAQ,GAAA,CAAI,IAAK;AAAA,0BAC3F,OAAA,EAAI,WAAU,8BACb,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,UAAA,gBAAAE,EAACC,KAAS,SAAQ,WAAU,OAAOJ,GAAa,QAAQ,IAAI;AAAA,UAC3DD,IAAQ,IAAI,gBAAAI,EAACC,GAAA,EAAS,SAAQ,WAAU,OAAM,OAAM,QAAQ,GAAA,CAAI,IAAK;AAAA,QAAA,EAAA,CACxE,EAAA,CACF;AAAA,QACCP,MAAU,SAASC,IAAa,gBAAAK,EAACC,GAAA,EAAS,SAAQ,YAAW,OAAO,IAAI,QAAQ,GAAA,CAAI,IAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhG;"}

package/dist/components/dataDisplay/chat/chatMessageStatus.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChatMessage, ChatMessageStatus as ChatMessageStatusValue, ChatMessageStatusIcons, ChatMessageStatusRenderContext } from "./types";
+export interface ChatMessageStatusProps {
+    className?: string;
+    message: ChatMessage;
+    status: ChatMessageStatusValue;
+    statusIcons?: ChatMessageStatusIcons & Record<string, string | undefined>;
+    renderStatus?: (ctx: ChatMessageStatusRenderContext) => React.ReactNode;
+}
+export declare function ChatMessageStatus({ className, message, status, statusIcons, renderStatus }: ChatMessageStatusProps): import("react/jsx-runtime").JSX.Element | null;
+export default ChatMessageStatus;

package/dist/components/dataDisplay/chat/chatMessageStatus.js

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import c from "clsx";
+import { Icon as f } from "../../base/icon/icon.js";
+import { resolveChatMessageStatusIcon as h, resolveChatMessageStatusLabel as u } from "./utils.js";
+function p({ className: e, message: n, status: s, statusIcons: r, renderStatus: t }) {
+  if (t) {
+    const o = t({ message: n, status: s });
+    if (o != null)
+      return /* @__PURE__ */ a(
+        "span",
+        {
+          className: c("smwb-chat-message__status", `smwb-chat-message__status_${s}`, e),
+          "data-testid": "chat-message-status",
+          children: o
+        }
+      );
+  }
+  const m = h(s, r);
+  if (!m)
+    return null;
+  const l = u(s), i = s === "read";
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: c("smwb-chat-message__status", `smwb-chat-message__status_${s}`, e),
+      "data-testid": "chat-message-status",
+      "aria-label": l,
+      title: l,
+      children: /* @__PURE__ */ a(f, { name: m, size: 14, fill: i ? 1 : 0 })
+    }
+  );
+}
+export {
+  p as ChatMessageStatus,
+  p as default
+};
+//# sourceMappingURL=chatMessageStatus.js.map

package/dist/components/dataDisplay/chat/chatMessageStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageStatus.js","sources":["../../../../src/components/dataDisplay/chat/chatMessageStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport {\n  ChatMessage,\n  ChatMessageStatus as ChatMessageStatusValue,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n} from \"./types\";\nimport { resolveChatMessageStatusIcon, resolveChatMessageStatusLabel } from \"./utils\";\n\nexport interface ChatMessageStatusProps {\n  className?: string;\n  message: ChatMessage;\n  status: ChatMessageStatusValue;\n  statusIcons?: ChatMessageStatusIcons & Record<string, string | undefined>;\n  renderStatus?: (ctx: ChatMessageStatusRenderContext) => React.ReactNode;\n}\n\nexport function ChatMessageStatus({ className, message, status, statusIcons, renderStatus }: ChatMessageStatusProps) {\n  if (renderStatus) {\n    const custom = renderStatus({ message, status });\n    if (custom != null) {\n      return (\n        <span\n          className={cn(\"smwb-chat-message__status\", `smwb-chat-message__status_${status}`, className)}\n          data-testid=\"chat-message-status\"\n        >\n          {custom}\n        </span>\n      );\n    }\n  }\n\n  const iconName = resolveChatMessageStatusIcon(status, statusIcons);\n\n  if (!iconName) {\n    return null;\n  }\n\n  const label = resolveChatMessageStatusLabel(status);\n  const filled = status === \"read\";\n\n  return (\n    <span\n      className={cn(\"smwb-chat-message__status\", `smwb-chat-message__status_${status}`, className)}\n      data-testid=\"chat-message-status\"\n      aria-label={label}\n      title={label}\n    >\n      <Icon name={iconName} size={14} fill={filled ? 1 : 0} />\n    </span>\n  );\n}\n\nexport default ChatMessageStatus;\n"],"names":["ChatMessageStatus","className","message","status","statusIcons","renderStatus","custom","jsx","cn","iconName","resolveChatMessageStatusIcon","label","resolveChatMessageStatusLabel","filled","Icon"],"mappings":";;;;AAmBO,SAASA,EAAkB,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,aAAAC,GAAa,cAAAC,KAAwC;AACnH,MAAIA,GAAc;AAChB,UAAMC,IAASD,EAAa,EAAE,SAAAH,GAAS,QAAAC,GAAQ;AAC/C,QAAIG,KAAU;AACZ,aACE,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAG,6BAA6B,6BAA6BL,CAAM,IAAIF,CAAS;AAAA,UAC3F,eAAY;AAAA,UAEX,UAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,EAIT;AAEA,QAAMG,IAAWC,EAA6BP,GAAQC,CAAW;AAEjE,MAAI,CAACK;AACH,WAAO;AAGT,QAAME,IAAQC,EAA8BT,CAAM,GAC5CU,IAASV,MAAW;AAE1B,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,6BAA6B,6BAA6BL,CAAM,IAAIF,CAAS;AAAA,MAC3F,eAAY;AAAA,MACZ,cAAYU;AAAA,MACZ,OAAOA;AAAA,MAEP,UAAA,gBAAAJ,EAACO,KAAK,MAAML,GAAU,MAAM,IAAI,MAAMI,IAAS,IAAI,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAG5D;"}

package/dist/components/dataDisplay/chat/chatMessageSystem.d.ts

@@ -0,0 +1,7 @@
+import { ChatMessage } from "./types";
+export interface ChatMessageSystemProps {
+    message: ChatMessage;
+    className?: string;
+}
+export declare function ChatMessageSystem({ message, className }: ChatMessageSystemProps): import("react/jsx-runtime").JSX.Element | null;
+export default ChatMessageSystem;

package/dist/components/dataDisplay/chat/chatMessageSystem.js

@@ -0,0 +1,13 @@
+import { jsx as a } from "react/jsx-runtime";
+import r from "clsx";
+import { Typography as o } from "../typography/typography.js";
+function p({ message: t, className: n }) {
+  var s;
+  const e = (s = t.content) != null ? s : t.text;
+  return e ? /* @__PURE__ */ a("div", { className: r("smwb-chat-message-system", n), "data-testid": "chat-message-system", children: /* @__PURE__ */ a(o, { variant: "caption", children: e }) }) : null;
+}
+export {
+  p as ChatMessageSystem,
+  p as default
+};
+//# sourceMappingURL=chatMessageSystem.js.map

package/dist/components/dataDisplay/chat/chatMessageSystem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageSystem.js","sources":["../../../../src/components/dataDisplay/chat/chatMessageSystem.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport Typography from \"../typography/typography\";\nimport { ChatMessage } from \"./types\";\n\nexport interface ChatMessageSystemProps {\n  message: ChatMessage;\n  className?: string;\n}\n\nexport function ChatMessageSystem({ message, className }: ChatMessageSystemProps) {\n  const content = message.content ?? message.text;\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"smwb-chat-message-system\", className)} data-testid=\"chat-message-system\">\n      <Typography variant=\"caption\">{content}</Typography>\n    </div>\n  );\n}\n\nexport default ChatMessageSystem;\n"],"names":["ChatMessageSystem","message","className","content","_a","jsx","cn","Typography"],"mappings":";;;AAUO,SAASA,EAAkB,EAAE,SAAAC,GAAS,WAAAC,KAAqC;;AAChF,QAAMC,KAAUC,IAAAH,EAAQ,YAAR,OAAAG,IAAmBH,EAAQ;AAE3C,SAAKE,IAKH,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAG,4BAA4BJ,CAAS,GAAG,eAAY,uBACrE,UAAA,gBAAAG,EAACE,GAAA,EAAW,SAAQ,WAAW,aAAQ,GACzC,IANO;AAQX;"}

package/dist/components/dataDisplay/chat/chatMessages.d.ts

@@ -0,0 +1,14 @@
+import { ChatMessageItemProps } from "./chatMessageItem";
+import { ChatMessage, ChatMessageRenderContext } from "./types";
+export interface ChatMessagesProps extends ChatMessageRenderContext {
+    className?: string;
+    messages: ChatMessage[];
+    onLoadMore?: () => void | Promise<void>;
+    hasMore?: boolean;
+    loading?: boolean;
+    loadingMore?: boolean;
+    loadingSkeletonCount?: number;
+    renderMessage?: ChatMessageItemProps["renderMessage"];
+}
+export declare function ChatMessages({ className, messages, showAvatars, showAttachments, showStatus, statusIcons, renderStatus, onLoadMore, hasMore, loading, loadingMore, loadingSkeletonCount, renderMessage, }: ChatMessagesProps): import("react/jsx-runtime").JSX.Element;
+export default ChatMessages;

package/dist/components/dataDisplay/chat/chatMessages.js

@@ -0,0 +1,73 @@
+import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import { useRef as w } from "react";
+import S from "clsx";
+import { ChatMessageItem as v } from "./chatMessageItem.js";
+import { ChatMessageSkeleton as N } from "./chatMessageSkeleton.js";
+import { useChatInfiniteScroll as R } from "./useChatInfiniteScroll.js";
+import { useChatStickToBottom as j } from "./useChatStickToBottom.js";
+function T({
+  className: r,
+  messages: o,
+  showAvatars: l,
+  showAttachments: i,
+  showStatus: c,
+  statusIcons: f,
+  renderStatus: h,
+  onLoadMore: d,
+  hasMore: u = !1,
+  loading: t = !1,
+  loadingMore: m = !1,
+  loadingSkeletonCount: g = 3,
+  renderMessage: p
+}) {
+  const a = w(null), { sentinelRef: k } = R({
+    containerRef: a,
+    onLoadMore: d,
+    hasMore: u,
+    loading: m || t
+  });
+  j({
+    containerRef: a,
+    messages: o
+  });
+  const b = t || m, C = (s) => s % 2 === 0 ? "start" : "end";
+  return /* @__PURE__ */ _("div", { ref: a, className: S("smwb-chat-messages", r), "data-testid": "chat-messages", children: [
+    /* @__PURE__ */ e("div", { ref: k, className: "smwb-chat-messages__sentinel", "data-testid": "chat-messages-sentinel" }),
+    b ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "smwb-chat-messages__skeletons",
+        "data-testid": "chat-messages-skeletons",
+        "aria-busy": "true",
+        "aria-label": "Loading messages",
+        children: Array.from({ length: g }, (s, n) => /* @__PURE__ */ e(
+          N,
+          {
+            align: C(n),
+            showAvatar: l,
+            lines: n % 2 === 0 ? 2 : 1
+          },
+          n
+        ))
+      }
+    ) : null,
+    t ? null : o.map((s) => /* @__PURE__ */ e(
+      v,
+      {
+        message: s,
+        showAvatars: l,
+        showAttachments: i,
+        showStatus: c,
+        statusIcons: f,
+        renderStatus: h,
+        renderMessage: p
+      },
+      s.id
+    ))
+  ] });
+}
+export {
+  T as ChatMessages,
+  T as default
+};
+//# sourceMappingURL=chatMessages.js.map

package/dist/components/dataDisplay/chat/chatMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessages.js","sources":["../../../../src/components/dataDisplay/chat/chatMessages.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport cn from \"clsx\";\nimport ChatMessageItem, { ChatMessageItemProps } from \"./chatMessageItem\";\nimport ChatMessageSkeleton from \"./chatMessageSkeleton\";\nimport { useChatInfiniteScroll } from \"./useChatInfiniteScroll\";\nimport { useChatStickToBottom } from \"./useChatStickToBottom\";\nimport { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessagesProps extends ChatMessageRenderContext {\n  className?: string;\n  messages: ChatMessage[];\n  onLoadMore?: () => void | Promise<void>;\n  hasMore?: boolean;\n  loading?: boolean;\n  loadingMore?: boolean;\n  loadingSkeletonCount?: number;\n  renderMessage?: ChatMessageItemProps[\"renderMessage\"];\n}\n\nexport function ChatMessages({\n  className,\n  messages,\n  showAvatars,\n  showAttachments,\n  showStatus,\n  statusIcons,\n  renderStatus,\n  onLoadMore,\n  hasMore = false,\n  loading = false,\n  loadingMore = false,\n  loadingSkeletonCount = 3,\n  renderMessage,\n}: ChatMessagesProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { sentinelRef } = useChatInfiniteScroll({\n    containerRef,\n    onLoadMore,\n    hasMore,\n    loading: loadingMore || loading,\n  });\n\n  useChatStickToBottom({\n    containerRef,\n    messages,\n  });\n\n  const showSkeletons = loading || loadingMore;\n  const skeletonAligns = (index: number): \"start\" | \"end\" => (index % 2 === 0 ? \"start\" : \"end\");\n\n  return (\n    <div ref={containerRef} className={cn(\"smwb-chat-messages\", className)} data-testid=\"chat-messages\">\n      <div ref={sentinelRef} className=\"smwb-chat-messages__sentinel\" data-testid=\"chat-messages-sentinel\" />\n      {showSkeletons ? (\n        <div\n          className=\"smwb-chat-messages__skeletons\"\n          data-testid=\"chat-messages-skeletons\"\n          aria-busy=\"true\"\n          aria-label=\"Loading messages\"\n        >\n          {Array.from({ length: loadingSkeletonCount }, (_, index) => (\n            <ChatMessageSkeleton\n              key={index}\n              align={skeletonAligns(index)}\n              showAvatar={showAvatars}\n              lines={index % 2 === 0 ? 2 : 1}\n            />\n          ))}\n        </div>\n      ) : null}\n      {!loading\n        ? messages.map((message) => (\n            <ChatMessageItem\n              key={message.id}\n              message={message}\n              showAvatars={showAvatars}\n              showAttachments={showAttachments}\n              showStatus={showStatus}\n              statusIcons={statusIcons}\n              renderStatus={renderStatus}\n              renderMessage={renderMessage}\n            />\n          ))\n        : null}\n    </div>\n  );\n}\n\nexport default ChatMessages;\n"],"names":["ChatMessages","className","messages","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","onLoadMore","hasMore","loading","loadingMore","loadingSkeletonCount","renderMessage","containerRef","useRef","sentinelRef","useChatInfiniteScroll","useChatStickToBottom","showSkeletons","skeletonAligns","index","jsxs","cn","jsx","_","ChatMessageSkeleton","message","ChatMessageItem"],"mappings":";;;;;;;AAmBO,SAASA,EAAa;AAAA,EAC3B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,sBAAAC,IAAuB;AAAA,EACvB,eAAAC;AACF,GAAsB;AACpB,QAAMC,IAAeC,EAAuB,IAAI,GAC1C,EAAE,aAAAC,EAAA,IAAgBC,EAAsB;AAAA,IAC5C,cAAAH;AAAA,IACA,YAAAN;AAAA,IACA,SAAAC;AAAA,IACA,SAASE,KAAeD;AAAA,EAAA,CACzB;AAED,EAAAQ,EAAqB;AAAA,IACnB,cAAAJ;AAAA,IACA,UAAAZ;AAAA,EAAA,CACD;AAED,QAAMiB,IAAgBT,KAAWC,GAC3BS,IAAiB,CAACC,MAAoCA,IAAQ,MAAM,IAAI,UAAU;AAExF,SACE,gBAAAC,EAAC,OAAA,EAAI,KAAKR,GAAc,WAAWS,EAAG,sBAAsBtB,CAAS,GAAG,eAAY,iBAClF,UAAA;AAAA,IAAA,gBAAAuB,EAAC,SAAI,KAAKR,GAAa,WAAU,gCAA+B,eAAY,0BAAyB;AAAA,IACpGG,IACC,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,aAAU;AAAA,QACV,cAAW;AAAA,QAEV,UAAA,MAAM,KAAK,EAAE,QAAQZ,KAAwB,CAACa,GAAGJ,MAChD,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YAEC,OAAON,EAAeC,CAAK;AAAA,YAC3B,YAAYlB;AAAA,YACZ,OAAOkB,IAAQ,MAAM,IAAI,IAAI;AAAA,UAAA;AAAA,UAHxBA;AAAA,QAAA,CAKR;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,IACFX,IAaE,OAZAR,EAAS,IAAI,CAACyB,MACZ,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QAEC,SAAAD;AAAA,QACA,aAAAxB;AAAA,QACA,iBAAAC;AAAA,QACA,YAAAC;AAAA,QACA,aAAAC;AAAA,QACA,cAAAC;AAAA,QACA,eAAAM;AAAA,MAAA;AAAA,MAPKc,EAAQ;AAAA,IAAA,CAShB;AAAA,EACD,GACN;AAEJ;"}

package/dist/components/dataDisplay/chat/chatOverlayLayout.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, PropsWithChildren } from "react";
+import { ChatProps } from "./chat";
+import { ChatLayoutMode, ChatLayoutSide } from "./types";
+export type ChatOverlayLayoutChatProps = Omit<ChatProps, "className" | "overlayContext" | "embedded" | "floatingTrigger" | "anchor" | "allowedLayouts" | "layout" | "defaultLayout" | "onLayoutChange" | "open" | "defaultOpen" | "onOpenChange">;
+export interface ChatOverlayLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    contentClassName?: string;
+    chatClassName?: string;
+    side?: ChatLayoutSide;
+    chatWidth?: number | string;
+    allowedLayouts?: ChatLayoutMode[];
+    defaultLayout?: ChatLayoutMode;
+    defaultOpen?: boolean;
+    chat: ChatOverlayLayoutChatProps;
+}
+export declare function ChatOverlayLayout({ className, contentClassName, chatClassName, side, chatWidth, allowedLayouts, defaultLayout, defaultOpen, chat, children, style, ...rest }: ChatOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default ChatOverlayLayout;

package/dist/components/dataDisplay/chat/chatShell.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren, ReactNode } from "react";
+import { ChatAnchor, ChatLayoutMode, ChatThemeMode } from "./types";
+export interface ChatShellProps extends PropsWithChildren {
+    className?: string;
+    layout: ChatLayoutMode;
+    anchor?: ChatAnchor;
+    themeMode?: ChatThemeMode;
+    embedded?: boolean;
+    overlayContext?: boolean;
+    header?: ReactNode;
+    footer?: ReactNode;
+    fileDropzoneRootProps?: React.HTMLAttributes<HTMLDivElement>;
+    fileDropzoneActive?: boolean;
+}
+export declare function ChatShell({ className, layout, anchor, themeMode, embedded, overlayContext, header, footer, children, fileDropzoneRootProps, fileDropzoneActive, }: ChatShellProps): import("react/jsx-runtime").JSX.Element | null;
+export default ChatShell;

package/dist/components/dataDisplay/chat/chatShell.js

@@ -0,0 +1,63 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import y, { useEffect as N } from "react";
+import p from "clsx";
+import { createPortal as x } from "react-dom";
+import { useSafeLayoutEffect as S } from "../../../hooks/useSafeLayoutEffect.js";
+function g({
+  className: d,
+  layout: e,
+  anchor: o = "bottom-right",
+  themeMode: h = "inherit",
+  embedded: l = !1,
+  overlayContext: n = !1,
+  header: a,
+  footer: c,
+  children: f,
+  fileDropzoneRootProps: s,
+  fileDropzoneActive: i = !1
+}) {
+  const [m, b] = y.useState();
+  if (S(() => {
+    b(document.body);
+  }, []), N(() => {
+    if (e !== "fullscreen")
+      return;
+    const _ = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = _;
+    };
+  }, [e]), e === "closed")
+    return null;
+  const { className: u, ...w } = s != null ? s : {}, r = /* @__PURE__ */ v(
+    "div",
+    {
+      ...w,
+      className: p(
+        "smwb-chat-shell",
+        `smwb-chat-shell_${e}`,
+        !l && `smwb-chat-shell_${o}`,
+        {
+          "smwb-dark": h === "dark",
+          "smwb-chat-shell_embedded": l,
+          "smwb-chat-shell_overlay-context": n,
+          "smwb-chat-dropzone_active": i
+        },
+        u,
+        d
+      ),
+      "data-testid": "chat-shell",
+      "data-layout": e,
+      children: [
+        a ? /* @__PURE__ */ t("div", { className: "smwb-chat-shell__header", children: a }) : null,
+        /* @__PURE__ */ t("div", { className: "smwb-chat-shell__body", children: f }),
+        c ? /* @__PURE__ */ t("div", { className: "smwb-chat-shell__footer", children: c }) : null
+      ]
+    }
+  );
+  return e === "fullscreen" && m ? x(r, m) : r;
+}
+export {
+  g as ChatShell,
+  g as default
+};
+//# sourceMappingURL=chatShell.js.map

package/dist/components/dataDisplay/chat/chatShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatShell.js","sources":["../../../../src/components/dataDisplay/chat/chatShell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ReactNode, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { createPortal } from \"react-dom\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { ChatAnchor, ChatLayoutMode, ChatThemeMode } from \"./types\";\n\nexport interface ChatShellProps extends PropsWithChildren {\n  className?: string;\n  layout: ChatLayoutMode;\n  anchor?: ChatAnchor;\n  themeMode?: ChatThemeMode;\n  embedded?: boolean;\n  overlayContext?: boolean;\n  header?: ReactNode;\n  footer?: ReactNode;\n  fileDropzoneRootProps?: React.HTMLAttributes<HTMLDivElement>;\n  fileDropzoneActive?: boolean;\n}\n\nexport function ChatShell({\n  className,\n  layout,\n  anchor = \"bottom-right\",\n  themeMode = \"inherit\",\n  embedded = false,\n  overlayContext = false,\n  header,\n  footer,\n  children,\n  fileDropzoneRootProps,\n  fileDropzoneActive = false,\n}: ChatShellProps) {\n  const [domRoot, setDomRoot] = React.useState<HTMLElement>();\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (layout !== \"fullscreen\") {\n      return;\n    }\n\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [layout]);\n\n  if (layout === \"closed\") {\n    return null;\n  }\n\n  const { className: dropzoneClassName, ...dropzoneRootProps } = fileDropzoneRootProps ?? {};\n\n  const panel = (\n    <div\n      {...dropzoneRootProps}\n      className={cn(\n        \"smwb-chat-shell\",\n        `smwb-chat-shell_${layout}`,\n        !embedded && `smwb-chat-shell_${anchor}`,\n        {\n          \"smwb-dark\": themeMode === \"dark\",\n          \"smwb-chat-shell_embedded\": embedded,\n          \"smwb-chat-shell_overlay-context\": overlayContext,\n          \"smwb-chat-dropzone_active\": fileDropzoneActive,\n        },\n        dropzoneClassName,\n        className\n      )}\n      data-testid=\"chat-shell\"\n      data-layout={layout}\n    >\n      {header ? <div className=\"smwb-chat-shell__header\">{header}</div> : null}\n      <div className=\"smwb-chat-shell__body\">{children}</div>\n      {footer ? <div className=\"smwb-chat-shell__footer\">{footer}</div> : null}\n    </div>\n  );\n\n  if (layout === \"fullscreen\" && domRoot) {\n    return createPortal(panel, domRoot);\n  }\n\n  return panel;\n}\n\nexport default ChatShell;\n"],"names":["ChatShell","className","layout","anchor","themeMode","embedded","overlayContext","header","footer","children","fileDropzoneRootProps","fileDropzoneActive","domRoot","setDomRoot","React","useSafeLayoutEffect","useEffect","prev","dropzoneClassName","dropzoneRootProps","panel","jsxs","cn","jsx","createPortal"],"mappings":";;;;;AAmBO,SAASA,EAAU;AAAA,EACxB,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,oBAAAC,IAAqB;AACvB,GAAmB;AACjB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAA;AAmBpC,MAjBAC,EAAoB,MAAM;AACxB,IAAAF,EAAW,SAAS,IAAI;AAAA,EAC1B,GAAG,CAAA,CAAE,GAELG,EAAU,MAAM;AACd,QAAId,MAAW;AACb;AAGF,UAAMe,IAAO,SAAS,KAAK,MAAM;AACjC,oBAAS,KAAK,MAAM,WAAW,UAExB,MAAM;AACX,eAAS,KAAK,MAAM,WAAWA;AAAA,IACjC;AAAA,EACF,GAAG,CAACf,CAAM,CAAC,GAEPA,MAAW;AACb,WAAO;AAGT,QAAM,EAAE,WAAWgB,GAAmB,GAAGC,EAAA,IAAsBT,KAAA,OAAAA,IAAyB,CAAA,GAElFU,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG;AAAA,QACT;AAAA,QACA,mBAAmBpB,CAAM;AAAA,QACzB,CAACG,KAAY,mBAAmBF,CAAM;AAAA,QACtC;AAAA,UACE,aAAaC,MAAc;AAAA,UAC3B,4BAA4BC;AAAA,UAC5B,mCAAmCC;AAAA,UACnC,6BAA6BK;AAAA,QAAA;AAAA,QAE/BO;AAAA,QACAjB;AAAA,MAAA;AAAA,MAEF,eAAY;AAAA,MACZ,eAAaC;AAAA,MAEZ,UAAA;AAAA,QAAAK,IAAS,gBAAAgB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,QACpE,gBAAAA,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAd,EAAA,CAAS;AAAA,QAChDD,IAAS,gBAAAe,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIxE,SAAIrB,MAAW,gBAAgBU,IACtBY,EAAaJ,GAAOR,CAAO,IAG7BQ;AACT;"}