@smwb/ui-solid 0.1.0

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

@@ -0,0 +1,32 @@
+import { createComponent as e, insert as n, effect as m, className as c, template as l } from "solid-js/web";
+import { Show as o } from "solid-js";
+import s from "clsx";
+import { Avatar as i } from "../avatar/avatar.js";
+var u = /* @__PURE__ */ l("<div data-testid=chat-message-avatar>");
+function f(t) {
+  const r = () => t.enabled ?? !0;
+  return e(o, {
+    get when() {
+      return r();
+    },
+    get children() {
+      var a = u();
+      return n(a, e(i, {
+        get src() {
+          return t.author?.avatarSrc;
+        },
+        get alt() {
+          return t.author?.avatarAlt ?? t.author?.name;
+        },
+        size: "small",
+        get children() {
+          return t.author?.name?.slice(0, 1);
+        }
+      })), m(() => c(a, s("smwb-chat-message__avatar", t.class))), a;
+    }
+  });
+}
+export {
+  f as ChatMessageAvatar
+};
+//# 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 { type JSX, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Avatar } from \"../avatar\";\nimport type { ChatAuthor } from \"./types\";\n\nexport interface ChatMessageAvatarProps {\n  author?: ChatAuthor | undefined;\n  enabled?: boolean | undefined;\n  class?: string | undefined;\n}\n\nexport function ChatMessageAvatar(props: ChatMessageAvatarProps): JSX.Element {\n  const enabled = (): boolean => props.enabled ?? true;\n\n  return (\n    <Show when={enabled()}>\n      <div class={cn(\"smwb-chat-message__avatar\", props.class)} data-testid=\"chat-message-avatar\">\n        <Avatar src={props.author?.avatarSrc} alt={props.author?.avatarAlt ?? props.author?.name} size=\"small\">\n          {props.author?.name?.slice(0, 1)}\n        </Avatar>\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatMessageAvatar;\n"],"names":["ChatMessageAvatar","props","enabled","_$createComponent","Show","when","children","_el$","_tmpl$","_$insert","Avatar","src","author","avatarSrc","alt","avatarAlt","name","size","slice","_$effect","_$className","cn","class"],"mappings":";;;;;AAWO,SAASA,EAAkBC,GAA4C;AAC5E,QAAMC,IAAUA,MAAeD,EAAMC,WAAW;AAEhD,SAAAC,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEH,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAI,WAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAAJ,EAEhBO,GAAM;AAAA,QAAA,IAACC,MAAG;AAAA,iBAAEV,EAAMW,QAAQC;AAAAA,QAAS;AAAA,QAAA,IAAEC,MAAG;AAAA,iBAAEb,EAAMW,QAAQG,aAAad,EAAMW,QAAQI;AAAAA,QAAI;AAAA,QAAEC,MAAI;AAAA,QAAA,IAAAX,WAAA;AAAA,iBAC3FL,EAAMW,QAAQI,MAAME,MAAM,GAAG,CAAC;AAAA,QAAC;AAAA,MAAA,CAAA,CAAA,GAAAC,EAAA,MAAAC,EAAAb,GAFxBc,EAAG,6BAA6BpB,EAAMqB,KAAK,CAAC,CAAA,GAAAf;AAAAA,IAAA;AAAA,EAAA,CAAA;AAO9D;"}

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

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

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

@@ -0,0 +1,122 @@
+import { insert as r, createComponent as a, effect as f, className as o, setAttribute as C, template as i } from "solid-js/web";
+import { Show as n } from "solid-js";
+import v from "clsx";
+import { ChatAttachments as S } from "./chatAttachments.js";
+import { ChatMessageAvatar as w } from "./chatMessageAvatar.js";
+import { ChatMessageStatus as $ } from "./chatMessageStatus.js";
+import { formatChatTimestamp as A } from "./utils.js";
+import { Typography as b } from "../typography/typography.js";
+var x = /* @__PURE__ */ i("<div class=smwb-chat-message__text>"), y = /* @__PURE__ */ i("<div class=smwb-chat-message__meta data-testid=chat-message-meta>"), M = /* @__PURE__ */ i("<div><div class=smwb-chat-message__content><div>");
+function D(t) {
+  const h = () => A(t.timestamp), _ = () => t.status ?? t.message.status, g = () => t.showStatus && t.align === "end" ? _() : void 0;
+  return (() => {
+    var s = M(), m = s.firstChild, u = m.firstChild;
+    return r(s, a(n, {
+      get when() {
+        return t.align === "start";
+      },
+      get children() {
+        return a(w, {
+          get author() {
+            return t.author;
+          },
+          get enabled() {
+            return t.showAvatars;
+          }
+        });
+      }
+    }), m), r(m, a(n, {
+      get when() {
+        return t.author?.name;
+      },
+      get children() {
+        return a(b, {
+          variant: "caption",
+          class: "smwb-chat-message__author",
+          get children() {
+            return t.author?.name;
+          }
+        });
+      }
+    }), u), r(u, a(n, {
+      get when() {
+        return t.text;
+      },
+      get children() {
+        var e = x();
+        return r(e, () => t.text), e;
+      }
+    }), null), r(u, a(S, {
+      get attachments() {
+        return t.attachments;
+      },
+      get enabled() {
+        return t.showAttachments;
+      }
+    }), null), r(m, a(n, {
+      get when() {
+        return h() || g();
+      },
+      get children() {
+        var e = y();
+        return r(e, a(n, {
+          get when() {
+            return h();
+          },
+          get children() {
+            return a(b, {
+              variant: "caption",
+              class: "smwb-chat-message__time",
+              get children() {
+                return h();
+              }
+            });
+          }
+        }), null), r(e, a(n, {
+          get when() {
+            return g();
+          },
+          children: (l) => a($, {
+            get message() {
+              return t.message;
+            },
+            get status() {
+              return l();
+            },
+            get statusIcons() {
+              return t.statusIcons;
+            },
+            get renderStatus() {
+              return t.renderStatus;
+            }
+          })
+        }), null), e;
+      }
+    }), null), r(s, a(n, {
+      get when() {
+        return t.align === "end";
+      },
+      get children() {
+        return a(w, {
+          get author() {
+            return t.author;
+          },
+          get enabled() {
+            return t.showAvatars;
+          }
+        });
+      }
+    }), null), f((e) => {
+      var l = v("smwb-chat-message", `smwb-chat-message_${t.align}`, t.class), c = `chat-message-${t.align}`, d = v("smwb-chat-message__bubble", t.bubbleClass);
+      return l !== e.e && o(s, e.e = l), c !== e.t && C(s, "data-testid", e.t = c), d !== e.a && o(u, e.a = d), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), s;
+  })();
+}
+export {
+  D as ChatMessageBubble
+};
+//# 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 { type JSX, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../typography\";\nimport { ChatAttachments } from \"./chatAttachments\";\nimport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nimport { ChatMessageStatus } from \"./chatMessageStatus\";\nimport type {\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessage,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n  ChatMessageStatus as ChatMessageStatusValue,\n} from \"./types\";\nimport { formatChatTimestamp } from \"./utils\";\n\nexport interface ChatMessageBubbleProps {\n  class?: string | undefined;\n  align: \"start\" | \"end\";\n  message: ChatMessage;\n  author?: ChatAuthor | undefined;\n  text?: JSX.Element;\n  attachments?: ChatAttachment[] | undefined;\n  timestamp?: string | Date | undefined;\n  status?: ChatMessageStatusValue | undefined;\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  showStatus?: boolean | undefined;\n  statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;\n  renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;\n  bubbleClass?: string | undefined;\n}\n\nexport function ChatMessageBubble(props: ChatMessageBubbleProps): JSX.Element {\n  const time = (): string => formatChatTimestamp(props.timestamp);\n  const deliveryStatus = (): ChatMessageStatusValue | undefined => props.status ?? props.message.status;\n  const statusToShow = (): ChatMessageStatusValue | undefined =>\n    props.showStatus && props.align === \"end\" ? deliveryStatus() : undefined;\n\n  return (\n    <div class={cn(\"smwb-chat-message\", `smwb-chat-message_${props.align}`, props.class)} data-testid={`chat-message-${props.align}`}>\n      <Show when={props.align === \"start\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <Show when={props.author?.name}>\n          <Typography variant=\"caption\" class=\"smwb-chat-message__author\">\n            {props.author?.name}\n          </Typography>\n        </Show>\n        <div class={cn(\"smwb-chat-message__bubble\", props.bubbleClass)}>\n          <Show when={props.text}>\n            <div class=\"smwb-chat-message__text\">{props.text}</div>\n          </Show>\n          <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />\n        </div>\n        <Show when={time() || statusToShow()}>\n          <div class=\"smwb-chat-message__meta\" data-testid=\"chat-message-meta\">\n            <Show when={time()}>\n              <Typography variant=\"caption\" class=\"smwb-chat-message__time\">\n                {time()}\n              </Typography>\n            </Show>\n            <Show when={statusToShow()}>\n              {(status) => (\n                <ChatMessageStatus\n                  message={props.message}\n                  status={status()}\n                  statusIcons={props.statusIcons}\n                  renderStatus={props.renderStatus}\n                />\n              )}\n            </Show>\n          </div>\n        </Show>\n      </div>\n      <Show when={props.align === \"end\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageBubble;\n"],"names":["ChatMessageBubble","props","time","formatChatTimestamp","timestamp","deliveryStatus","status","message","statusToShow","showStatus","align","undefined","_el$","_tmpl$3","_el$2","firstChild","_el$3","_$insert","_$createComponent","Show","when","children","ChatMessageAvatar","author","enabled","showAvatars","name","Typography","variant","text","_el$4","_tmpl$","ChatAttachments","attachments","showAttachments","_el$5","_tmpl$2","ChatMessageStatus","statusIcons","renderStatus","_$effect","_p$","_v$","cn","class","_v$2","_v$3","bubbleClass","e","_$className","t","_$setAttribute","a"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { type JSX } from "solid-js";
+import type { ChatMessage, ChatMessageRenderContext } from "./types";
+export interface ChatMessageIncomingProps extends ChatMessageRenderContext {
+    message: ChatMessage;
+    class?: string | undefined;
+}
+export declare function ChatMessageIncoming(props: ChatMessageIncomingProps): JSX.Element;
+export default ChatMessageIncoming;

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

@@ -0,0 +1,36 @@
+import { createComponent as e } from "solid-js/web";
+import { ChatMessageBubble as a } from "./chatMessageBubble.js";
+function n(t) {
+  return e(a, {
+    get class() {
+      return t.class;
+    },
+    align: "start",
+    get message() {
+      return t.message;
+    },
+    get author() {
+      return t.message.author;
+    },
+    get text() {
+      return t.message.text;
+    },
+    get attachments() {
+      return t.message.attachments;
+    },
+    get timestamp() {
+      return t.message.timestamp;
+    },
+    get showAvatars() {
+      return t.showAvatars;
+    },
+    get showAttachments() {
+      return t.showAttachments;
+    },
+    bubbleClass: "smwb-chat-message__bubble_incoming"
+  });
+}
+export {
+  n as ChatMessageIncoming
+};
+//# 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 { type JSX } from \"solid-js\";\nimport { ChatMessageBubble } from \"./chatMessageBubble\";\nimport type { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageIncomingProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  class?: string | undefined;\n}\n\nexport function ChatMessageIncoming(props: ChatMessageIncomingProps): JSX.Element {\n  return (\n    <ChatMessageBubble\n      class={props.class}\n      align=\"start\"\n      message={props.message}\n      author={props.message.author}\n      text={props.message.text}\n      attachments={props.message.attachments}\n      timestamp={props.message.timestamp}\n      showAvatars={props.showAvatars}\n      showAttachments={props.showAttachments}\n      bubbleClass=\"smwb-chat-message__bubble_incoming\"\n    />\n  );\n}\n\nexport default ChatMessageIncoming;\n"],"names":["ChatMessageIncoming","props","_$createComponent","ChatMessageBubble","class","align","message","author","text","attachments","timestamp","showAvatars","showAttachments","bubbleClass"],"mappings":";;AASO,SAASA,EAAoBC,GAA8C;AAChF,SAAAC,EACGC,GAAiB;AAAA,IAAA,IAAA,QAAA;AAAA,aACTF,EAAMG;AAAAA,IAAK;AAAA,IAClBC,OAAK;AAAA,IAAA,IACLC,UAAO;AAAA,aAAEL,EAAMK;AAAAA,IAAO;AAAA,IAAA,IACtBC,SAAM;AAAA,aAAEN,EAAMK,QAAQC;AAAAA,IAAM;AAAA,IAAA,IAC5BC,OAAI;AAAA,aAAEP,EAAMK,QAAQE;AAAAA,IAAI;AAAA,IAAA,IACxBC,cAAW;AAAA,aAAER,EAAMK,QAAQG;AAAAA,IAAW;AAAA,IAAA,IACtCC,YAAS;AAAA,aAAET,EAAMK,QAAQI;AAAAA,IAAS;AAAA,IAAA,IAClCC,cAAW;AAAA,aAAEV,EAAMU;AAAAA,IAAW;AAAA,IAAA,IAC9BC,kBAAe;AAAA,aAAEX,EAAMW;AAAAA,IAAe;AAAA,IACtCC,aAAW;AAAA,EAAA,CAAA;AAGjB;"}

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import type { ChatMessage, ChatMessageRenderContext } from "./types";
+export interface ChatMessageItemProps extends ChatMessageRenderContext {
+    message: ChatMessage;
+    class?: string | undefined;
+    renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;
+}
+export declare function ChatMessageItem(props: ChatMessageItemProps): JSX.Element;
+export default ChatMessageItem;

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

@@ -0,0 +1,103 @@
+import { createComponent as e, insert as n, effect as m, className as g, template as u } from "solid-js/web";
+import { Show as i, Switch as w, Match as r } from "solid-js";
+import c from "clsx";
+import { ChatMessageIncoming as l } from "./chatMessageIncoming.js";
+import { ChatMessageOutgoing as o } from "./chatMessageOutgoing.js";
+import { ChatMessageSystem as d } from "./chatMessageSystem.js";
+var v = /* @__PURE__ */ u("<div data-testid=chat-message-custom>"), A = /* @__PURE__ */ u("<div>");
+function _(t) {
+  const h = () => ({
+    showAvatars: t.showAvatars,
+    showAttachments: t.showAttachments,
+    showStatus: t.showStatus,
+    statusIcons: t.statusIcons,
+    renderStatus: t.renderStatus
+  });
+  return e(i, {
+    get when() {
+      return t.renderMessage;
+    },
+    get fallback() {
+      return e(w, {
+        get fallback() {
+          return e(l, {
+            get message() {
+              return t.message;
+            },
+            get showAvatars() {
+              return t.showAvatars;
+            },
+            get showAttachments() {
+              return t.showAttachments;
+            },
+            get class() {
+              return t.class;
+            }
+          });
+        },
+        get children() {
+          return [e(r, {
+            get when() {
+              return t.message.variant === "outgoing";
+            },
+            get children() {
+              return e(o, {
+                get message() {
+                  return t.message;
+                },
+                get showAvatars() {
+                  return t.showAvatars;
+                },
+                get showAttachments() {
+                  return t.showAttachments;
+                },
+                get showStatus() {
+                  return t.showStatus;
+                },
+                get statusIcons() {
+                  return t.statusIcons;
+                },
+                get renderStatus() {
+                  return t.renderStatus;
+                },
+                get class() {
+                  return t.class;
+                }
+              });
+            }
+          }), e(r, {
+            get when() {
+              return t.message.variant === "system";
+            },
+            get children() {
+              return e(d, {
+                get message() {
+                  return t.message;
+                },
+                get class() {
+                  return t.class;
+                }
+              });
+            }
+          }), e(r, {
+            get when() {
+              return t.message.variant === "custom";
+            },
+            get children() {
+              var s = v();
+              return n(s, () => t.message.content ?? t.message.text), m(() => g(s, c("smwb-chat-message-item", "smwb-chat-message-item_custom", t.class))), s;
+            }
+          })];
+        }
+      });
+    },
+    children: (s) => (() => {
+      var a = A();
+      return n(a, () => s()(t.message, h())), m(() => g(a, c("smwb-chat-message-item", t.class))), a;
+    })()
+  });
+}
+export {
+  _ as ChatMessageItem
+};
+//# 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 { type JSX, Match, Show, Switch } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ChatMessageIncoming } from \"./chatMessageIncoming\";\nimport { ChatMessageOutgoing } from \"./chatMessageOutgoing\";\nimport { ChatMessageSystem } from \"./chatMessageSystem\";\nimport type { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageItemProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  class?: string | undefined;\n  renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;\n}\n\nexport function ChatMessageItem(props: ChatMessageItemProps): JSX.Element {\n  const ctx = (): ChatMessageRenderContext => ({\n    showAvatars: props.showAvatars,\n    showAttachments: props.showAttachments,\n    showStatus: props.showStatus,\n    statusIcons: props.statusIcons,\n    renderStatus: props.renderStatus,\n  });\n\n  return (\n    <Show\n      when={props.renderMessage}\n      fallback={\n        <Switch\n          fallback={\n            <ChatMessageIncoming\n              message={props.message}\n              showAvatars={props.showAvatars}\n              showAttachments={props.showAttachments}\n              class={props.class}\n            />\n          }\n        >\n          <Match when={props.message.variant === \"outgoing\"}>\n            <ChatMessageOutgoing\n              message={props.message}\n              showAvatars={props.showAvatars}\n              showAttachments={props.showAttachments}\n              showStatus={props.showStatus}\n              statusIcons={props.statusIcons}\n              renderStatus={props.renderStatus}\n              class={props.class}\n            />\n          </Match>\n          <Match when={props.message.variant === \"system\"}>\n            <ChatMessageSystem message={props.message} class={props.class} />\n          </Match>\n          <Match when={props.message.variant === \"custom\"}>\n            <div\n              class={cn(\"smwb-chat-message-item\", \"smwb-chat-message-item_custom\", props.class)}\n              data-testid=\"chat-message-custom\"\n            >\n              {props.message.content ?? props.message.text}\n            </div>\n          </Match>\n        </Switch>\n      }\n    >\n      {(render) => <div class={cn(\"smwb-chat-message-item\", props.class)}>{render()(props.message, ctx())}</div>}\n    </Show>\n  );\n}\n\nexport default ChatMessageItem;\n"],"names":["ChatMessageItem","props","ctx","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","_$createComponent","Show","when","renderMessage","fallback","Switch","ChatMessageIncoming","message","class","children","Match","variant","ChatMessageOutgoing","ChatMessageSystem","_el$","_tmpl$","_$insert","content","text","_$effect","_$className","cn","render","_el$2","_tmpl$2"],"mappings":";;;;;;;AAaO,SAASA,EAAgBC,GAA0C;AACxE,QAAMC,IAAMA,OAAiC;AAAA,IAC3CC,aAAaF,EAAME;AAAAA,IACnBC,iBAAiBH,EAAMG;AAAAA,IACvBC,YAAYJ,EAAMI;AAAAA,IAClBC,aAAaL,EAAMK;AAAAA,IACnBC,cAAcN,EAAMM;AAAAA,EAAAA;AAGtB,SAAAC,EACGC,GAAI;AAAA,IAAA,IACHC,OAAI;AAAA,aAAET,EAAMU;AAAAA,IAAa;AAAA,IAAA,IACzBC,WAAQ;AAAA,aAAAJ,EACLK,GAAM;AAAA,QAAA,IACLD,WAAQ;AAAA,iBAAAJ,EACLM,GAAmB;AAAA,YAAA,IAClBC,UAAO;AAAA,qBAAEd,EAAMc;AAAAA,YAAO;AAAA,YAAA,IACtBZ,cAAW;AAAA,qBAAEF,EAAME;AAAAA,YAAW;AAAA,YAAA,IAC9BC,kBAAe;AAAA,qBAAEH,EAAMG;AAAAA,YAAe;AAAA,YAAA,IAAA,QAAA;AAAA,qBAC/BH,EAAMe;AAAAA,YAAK;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAA,CAAAT,EAIrBU,GAAK;AAAA,YAAA,IAACR,OAAI;AAAA,qBAAET,EAAMc,QAAQI,YAAY;AAAA,YAAU;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAAT,EAC9CY,GAAmB;AAAA,gBAAA,IAClBL,UAAO;AAAA,yBAAEd,EAAMc;AAAAA,gBAAO;AAAA,gBAAA,IACtBZ,cAAW;AAAA,yBAAEF,EAAME;AAAAA,gBAAW;AAAA,gBAAA,IAC9BC,kBAAe;AAAA,yBAAEH,EAAMG;AAAAA,gBAAe;AAAA,gBAAA,IACtCC,aAAU;AAAA,yBAAEJ,EAAMI;AAAAA,gBAAU;AAAA,gBAAA,IAC5BC,cAAW;AAAA,yBAAEL,EAAMK;AAAAA,gBAAW;AAAA,gBAAA,IAC9BC,eAAY;AAAA,yBAAEN,EAAMM;AAAAA,gBAAY;AAAA,gBAAA,IAAA,QAAA;AAAA,yBACzBN,EAAMe;AAAAA,gBAAK;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAR,EAGrBU,GAAK;AAAA,YAAA,IAACR,OAAI;AAAA,qBAAET,EAAMc,QAAQI,YAAY;AAAA,YAAQ;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAAT,EAC5Ca,GAAiB;AAAA,gBAAA,IAACN,UAAO;AAAA,yBAAEd,EAAMc;AAAAA,gBAAO;AAAA,gBAAA,IAAA,QAAA;AAAA,yBAASd,EAAMe;AAAAA,gBAAK;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAR,EAE9DU,GAAK;AAAA,YAAA,IAACR,OAAI;AAAA,qBAAET,EAAMc,QAAQI,YAAY;AAAA,YAAQ;AAAA,YAAA,IAAAF,WAAA;AAAA,kBAAAK,IAAAC,EAAAA;AAAAC,qBAAAA,EAAAF,GAAA,MAK1CrB,EAAMc,QAAQU,WAAWxB,EAAMc,QAAQW,IAAI,GAAAC,EAAA,MAAAC,EAAAN,GAHrCO,EAAG,0BAA0B,iCAAiC5B,EAAMe,KAAK,CAAC,CAAA,GAAAM;AAAAA,YAAA;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,IAAAL,UASvFa,QAAM,MAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAR,aAAAA,EAAAO,GAAA,MAA6DD,EAAAA,EAAS7B,EAAMc,SAASb,EAAAA,CAAK,CAAC,GAAAyB,EAAA,MAAAC,EAAAG,GAA1EF,EAAG,0BAA0B5B,EAAMe,KAAK,CAAC,CAAA,GAAAe;AAAAA,IAAA,GAAA;AAAA,EAAA,CAAwC;AAGhH;"}

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

@@ -0,0 +1,8 @@
+import { type JSX } from "solid-js";
+import type { ChatMessage, ChatMessageRenderContext } from "./types";
+export interface ChatMessageOutgoingProps extends ChatMessageRenderContext {
+    message: ChatMessage;
+    class?: string | undefined;
+}
+export declare function ChatMessageOutgoing(props: ChatMessageOutgoingProps): JSX.Element;
+export default ChatMessageOutgoing;

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

@@ -0,0 +1,48 @@
+import { createComponent as e } from "solid-js/web";
+import { ChatMessageBubble as s } from "./chatMessageBubble.js";
+function r(t) {
+  return e(s, {
+    get class() {
+      return t.class;
+    },
+    align: "end",
+    get message() {
+      return t.message;
+    },
+    get author() {
+      return t.message.author;
+    },
+    get text() {
+      return t.message.text;
+    },
+    get attachments() {
+      return t.message.attachments;
+    },
+    get timestamp() {
+      return t.message.timestamp;
+    },
+    get status() {
+      return t.message.status;
+    },
+    get showAvatars() {
+      return t.showAvatars;
+    },
+    get showAttachments() {
+      return t.showAttachments;
+    },
+    get showStatus() {
+      return t.showStatus;
+    },
+    get statusIcons() {
+      return t.statusIcons;
+    },
+    get renderStatus() {
+      return t.renderStatus;
+    },
+    bubbleClass: "smwb-chat-message__bubble_outgoing"
+  });
+}
+export {
+  r as ChatMessageOutgoing
+};
+//# 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 { type JSX } from \"solid-js\";\nimport { ChatMessageBubble } from \"./chatMessageBubble\";\nimport type { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageOutgoingProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  class?: string | undefined;\n}\n\nexport function ChatMessageOutgoing(props: ChatMessageOutgoingProps): JSX.Element {\n  return (\n    <ChatMessageBubble\n      class={props.class}\n      align=\"end\"\n      message={props.message}\n      author={props.message.author}\n      text={props.message.text}\n      attachments={props.message.attachments}\n      timestamp={props.message.timestamp}\n      status={props.message.status}\n      showAvatars={props.showAvatars}\n      showAttachments={props.showAttachments}\n      showStatus={props.showStatus}\n      statusIcons={props.statusIcons}\n      renderStatus={props.renderStatus}\n      bubbleClass=\"smwb-chat-message__bubble_outgoing\"\n    />\n  );\n}\n\nexport default ChatMessageOutgoing;\n"],"names":["ChatMessageOutgoing","props","_$createComponent","ChatMessageBubble","class","align","message","author","text","attachments","timestamp","status","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","bubbleClass"],"mappings":";;AASO,SAASA,EAAoBC,GAA8C;AAChF,SAAAC,EACGC,GAAiB;AAAA,IAAA,IAAA,QAAA;AAAA,aACTF,EAAMG;AAAAA,IAAK;AAAA,IAClBC,OAAK;AAAA,IAAA,IACLC,UAAO;AAAA,aAAEL,EAAMK;AAAAA,IAAO;AAAA,IAAA,IACtBC,SAAM;AAAA,aAAEN,EAAMK,QAAQC;AAAAA,IAAM;AAAA,IAAA,IAC5BC,OAAI;AAAA,aAAEP,EAAMK,QAAQE;AAAAA,IAAI;AAAA,IAAA,IACxBC,cAAW;AAAA,aAAER,EAAMK,QAAQG;AAAAA,IAAW;AAAA,IAAA,IACtCC,YAAS;AAAA,aAAET,EAAMK,QAAQI;AAAAA,IAAS;AAAA,IAAA,IAClCC,SAAM;AAAA,aAAEV,EAAMK,QAAQK;AAAAA,IAAM;AAAA,IAAA,IAC5BC,cAAW;AAAA,aAAEX,EAAMW;AAAAA,IAAW;AAAA,IAAA,IAC9BC,kBAAe;AAAA,aAAEZ,EAAMY;AAAAA,IAAe;AAAA,IAAA,IACtCC,aAAU;AAAA,aAAEb,EAAMa;AAAAA,IAAU;AAAA,IAAA,IAC5BC,cAAW;AAAA,aAAEd,EAAMc;AAAAA,IAAW;AAAA,IAAA,IAC9BC,eAAY;AAAA,aAAEf,EAAMe;AAAAA,IAAY;AAAA,IAChCC,aAAW;AAAA,EAAA,CAAA;AAGjB;"}

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+export interface ChatMessageSkeletonProps {
+    class?: string | undefined;
+    align?: "start" | "end" | undefined;
+    showAvatar?: boolean | undefined;
+    lines?: number | undefined;
+}
+export declare function ChatMessageSkeleton(props: ChatMessageSkeletonProps): JSX.Element;
+export default ChatMessageSkeleton;

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

@@ -0,0 +1,59 @@
+import { insert as a, createComponent as t, memo as h, effect as g, className as c, template as d } from "solid-js/web";
+import { mergeProps as u, Show as s } from "solid-js";
+import w from "clsx";
+import { Skeleton as n } from "../../feedBack/skeleton/skeleton.js";
+var v = /* @__PURE__ */ d("<div data-testid=chat-message-skeleton aria-hidden=true><div class=smwb-chat-message__content><div class=smwb-chat-message-skeleton__bubble>");
+function k(o) {
+  const e = u({
+    align: "start",
+    showAvatar: !1,
+    lines: 2
+  }, o), m = () => e.align === "start" ? "72%" : "64%";
+  return (() => {
+    var r = v(), i = r.firstChild, l = i.firstChild;
+    return a(r, t(s, {
+      get when() {
+        return h(() => e.align === "start")() && e.showAvatar;
+      },
+      get children() {
+        return t(n, {
+          variant: "circular",
+          width: 32,
+          height: 32
+        });
+      }
+    }), i), a(l, t(n, {
+      variant: "rounded",
+      get width() {
+        return m();
+      },
+      height: 14
+    }), null), a(l, t(s, {
+      get when() {
+        return e.lines > 1;
+      },
+      get children() {
+        return t(n, {
+          variant: "rounded",
+          width: "48%",
+          height: 14
+        });
+      }
+    }), null), a(r, t(s, {
+      get when() {
+        return h(() => e.align === "end")() && e.showAvatar;
+      },
+      get children() {
+        return t(n, {
+          variant: "circular",
+          width: 32,
+          height: 32
+        });
+      }
+    }), null), g(() => c(r, w("smwb-chat-message", `smwb-chat-message_${e.align}`, "smwb-chat-message-skeleton", e.class))), r;
+  })();
+}
+export {
+  k as ChatMessageSkeleton
+};
+//# 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 { type JSX, Show, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\n\nexport interface ChatMessageSkeletonProps {\n  class?: string | undefined;\n  align?: \"start\" | \"end\" | undefined;\n  showAvatar?: boolean | undefined;\n  lines?: number | undefined;\n}\n\nexport function ChatMessageSkeleton(props: ChatMessageSkeletonProps): JSX.Element {\n  const merged = mergeProps({ align: \"start\" as const, showAvatar: false, lines: 2 }, props);\n  const bubbleWidth = (): string => (merged.align === \"start\" ? \"72%\" : \"64%\");\n\n  return (\n    <div\n      class={cn(\"smwb-chat-message\", `smwb-chat-message_${merged.align}`, \"smwb-chat-message-skeleton\", merged.class)}\n      data-testid=\"chat-message-skeleton\"\n      aria-hidden=\"true\"\n    >\n      <Show when={merged.align === \"start\" && merged.showAvatar}>\n        <Skeleton variant=\"circular\" width={32} height={32} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <div class=\"smwb-chat-message-skeleton__bubble\">\n          <Skeleton variant=\"rounded\" width={bubbleWidth()} height={14} />\n          <Show when={merged.lines > 1}>\n            <Skeleton variant=\"rounded\" width=\"48%\" height={14} />\n          </Show>\n        </div>\n      </div>\n      <Show when={merged.align === \"end\" && merged.showAvatar}>\n        <Skeleton variant=\"circular\" width={32} height={32} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageSkeleton;\n"],"names":["ChatMessageSkeleton","props","merged","mergeProps","align","showAvatar","lines","bubbleWidth","_el$","_tmpl$","_el$2","firstChild","_el$3","_$insert","_$createComponent","Show","when","_$memo","children","Skeleton","variant","width","height","_$effect","_$className","cn","class"],"mappings":";;;;;AAWO,SAASA,EAAoBC,GAA8C;AAChF,QAAMC,IAASC,EAAW;AAAA,IAAEC,OAAO;AAAA,IAAkBC,YAAY;AAAA,IAAOC,OAAO;AAAA,EAAA,GAAKL,CAAK,GACnFM,IAAcA,MAAeL,EAAOE,UAAU,UAAU,QAAQ;AAEtE,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;AAAAE,WAAAA,EAAAL,GAAAM,EAMKC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,EAAA,MAAAf,EAAOE,UAAU,OAAO,EAAA,KAAIF,EAAOG;AAAAA,MAAU;AAAA,MAAA,IAAAa,WAAA;AAAA,eAAAJ,EACtDK,GAAQ;AAAA,UAACC,SAAO;AAAA,UAAYC,OAAO;AAAA,UAAIC,QAAQ;AAAA,QAAA,CAAE;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAZ,CAAA,GAAAG,EAAAD,GAAAE,EAI/CK,GAAQ;AAAA,MAACC,SAAO;AAAA,MAAA,IAAWC,QAAK;AAAA,eAAEd,EAAAA;AAAAA,MAAa;AAAA,MAAEe,QAAQ;AAAA,IAAA,CAAE,GAAA,IAAA,GAAAT,EAAAD,GAAAE,EAC3DC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEd,EAAOI,QAAQ;AAAA,MAAC;AAAA,MAAA,IAAAY,WAAA;AAAA,eAAAJ,EACzBK,GAAQ;AAAA,UAACC,SAAO;AAAA,UAAWC,OAAK;AAAA,UAAOC,QAAQ;AAAA,QAAA,CAAE;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAT,EAAAL,GAAAM,EAIvDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,EAAA,MAAAf,EAAOE,UAAU,KAAK,EAAA,KAAIF,EAAOG;AAAAA,MAAU;AAAA,MAAA,IAAAa,WAAA;AAAA,eAAAJ,EACpDK,GAAQ;AAAA,UAACC,SAAO;AAAA,UAAYC,OAAO;AAAA,UAAIC,QAAQ;AAAA,QAAA,CAAE;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAC,EAAA,MAAAC,EAAAhB,GAhB7CiB,EAAG,qBAAqB,qBAAqBvB,EAAOE,KAAK,IAAI,8BAA8BF,EAAOwB,KAAK,CAAC,CAAA,GAAAlB;AAAAA,EAAA,GAAA;AAoBrH;"}

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

@@ -0,0 +1,11 @@
+import { type JSX } from "solid-js";
+import type { ChatMessage, ChatMessageStatus as ChatMessageStatusValue, ChatMessageStatusIcons, ChatMessageStatusRenderContext } from "./types";
+export interface ChatMessageStatusProps {
+    class?: string | undefined;
+    message: ChatMessage;
+    status: ChatMessageStatusValue;
+    statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;
+    renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;
+}
+export declare function ChatMessageStatus(props: ChatMessageStatusProps): JSX.Element;
+export default ChatMessageStatus;

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

@@ -0,0 +1,51 @@
+import { createComponent as r, insert as i, effect as o, className as g, setAttribute as h, template as w } from "solid-js/web";
+import { createMemo as S, Show as v } from "solid-js";
+import d from "clsx";
+import { resolveChatMessageStatusLabel as C, resolveChatMessageStatusIcon as M } from "./utils.js";
+import { Icon as I } from "../../base/icon/icon.js";
+var f = /* @__PURE__ */ w("<span data-testid=chat-message-status>");
+function A(t) {
+  const n = S(() => t.renderStatus ? t.renderStatus({
+    message: t.message,
+    status: t.status
+  }) : void 0), _ = () => M(t.status, t.statusIcons), u = () => C(t.status), b = () => t.status === "read";
+  return r(v, {
+    get when() {
+      return n() != null;
+    },
+    get fallback() {
+      return r(v, {
+        get when() {
+          return _();
+        },
+        children: (a) => (() => {
+          var s = f();
+          return i(s, r(I, {
+            get name() {
+              return a();
+            },
+            size: 14,
+            get fill() {
+              return b() ? 1 : 0;
+            }
+          })), o((e) => {
+            var m = d("smwb-chat-message__status", `smwb-chat-message__status_${t.status}`, t.class), c = u(), l = u();
+            return m !== e.e && g(s, e.e = m), c !== e.t && h(s, "aria-label", e.t = c), l !== e.a && h(s, "title", e.a = l), e;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          }), s;
+        })()
+      });
+    },
+    get children() {
+      var a = f();
+      return i(a, n), o(() => g(a, d("smwb-chat-message__status", `smwb-chat-message__status_${t.status}`, t.class))), a;
+    }
+  });
+}
+export {
+  A as ChatMessageStatus
+};
+//# 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 { type JSX, Show, createMemo } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport type {\n  ChatMessage,\n  ChatMessageStatus as ChatMessageStatusValue,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n} from \"./types\";\nimport { resolveChatMessageStatusIcon, resolveChatMessageStatusLabel } from \"./utils\";\n\nexport interface ChatMessageStatusProps {\n  class?: string | undefined;\n  message: ChatMessage;\n  status: ChatMessageStatusValue;\n  statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;\n  renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;\n}\n\nexport function ChatMessageStatus(props: ChatMessageStatusProps): JSX.Element {\n  const custom = createMemo(() =>\n    props.renderStatus ? props.renderStatus({ message: props.message, status: props.status }) : undefined\n  );\n\n  const iconName = (): string | undefined => resolveChatMessageStatusIcon(props.status, props.statusIcons);\n  const label = (): string => resolveChatMessageStatusLabel(props.status);\n  const filled = (): boolean => props.status === \"read\";\n\n  return (\n    <Show when={custom() != null} fallback={\n      <Show when={iconName()}>\n        {(name) => (\n          <span\n            class={cn(\"smwb-chat-message__status\", `smwb-chat-message__status_${props.status}`, props.class)}\n            data-testid=\"chat-message-status\"\n            aria-label={label()}\n            title={label()}\n          >\n            <Icon name={name()} size={14} fill={filled() ? 1 : 0} />\n          </span>\n        )}\n      </Show>\n    }>\n      <span\n        class={cn(\"smwb-chat-message__status\", `smwb-chat-message__status_${props.status}`, props.class)}\n        data-testid=\"chat-message-status\"\n      >\n        {custom()}\n      </span>\n    </Show>\n  );\n}\n\nexport default ChatMessageStatus;\n"],"names":["ChatMessageStatus","props","custom","createMemo","renderStatus","message","status","undefined","iconName","resolveChatMessageStatusIcon","statusIcons","label","resolveChatMessageStatusLabel","filled","_$createComponent","Show","when","fallback","children","name","_el$2","_tmpl$","_$insert","Icon","size","fill","_$effect","_p$","_v$","cn","class","_v$2","_v$3","e","_$className","t","_$setAttribute","a","_el$"],"mappings":";;;;;;AAmBO,SAASA,EAAkBC,GAA4C;AAC5E,QAAMC,IAASC,EAAW,MACxBF,EAAMG,eAAeH,EAAMG,aAAa;AAAA,IAAEC,SAASJ,EAAMI;AAAAA,IAASC,QAAQL,EAAMK;AAAAA,EAAAA,CAAQ,IAAIC,MAC9F,GAEMC,IAAWA,MAA0BC,EAA6BR,EAAMK,QAAQL,EAAMS,WAAW,GACjGC,IAAQA,MAAcC,EAA8BX,EAAMK,MAAM,GAChEO,IAASA,MAAeZ,EAAMK,WAAW;AAE/C,SAAAQ,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEd,OAAY;AAAA,IAAI;AAAA,IAAA,IAAEe,WAAQ;AAAA,aAAAH,EACnCC,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAER,EAAAA;AAAAA,QAAU;AAAA,QAAAU,UAClBC,QAAI,MAAA;AAAA,cAAAC,IAAAC,EAAAA;AAAAC,iBAAAA,EAAAF,GAAAN,EAODS,GAAI;AAAA,YAAA,IAACJ,OAAI;AAAA,qBAAEA,EAAAA;AAAAA,YAAM;AAAA,YAAEK,MAAM;AAAA,YAAE,IAAEC,OAAI;AAAA,qBAAEZ,EAAAA,IAAW,IAAI;AAAA,YAAC;AAAA,UAAA,CAAA,CAAA,GAAAa,EAAAC,CAAAA,MAAA;AAAA,gBAAAC,IAL7CC,EAAG,6BAA6B,6BAA6B5B,EAAMK,MAAM,IAAIL,EAAM6B,KAAK,GAACC,IAEpFpB,EAAAA,GAAOqB,IACZrB,EAAAA;AAAOiB,mBAAAA,MAAAD,EAAAM,KAAAC,EAAAd,GAAAO,EAAAM,IAAAL,CAAA,GAAAG,MAAAJ,EAAAQ,KAAAC,EAAAhB,GAAA,cAAAO,EAAAQ,IAAAJ,CAAA,GAAAC,MAAAL,EAAAU,KAAAD,EAAAhB,GAAA,SAAAO,EAAAU,IAAAL,CAAA,GAAAL;AAAAA,UAAA,GAAA;AAAA,YAAAM,GAAA1B;AAAAA,YAAA4B,GAAA5B;AAAAA,YAAA8B,GAAA9B;AAAAA,UAAAA,CAAA,GAAAa;AAAAA,QAAA,GAAA;AAAA,MAAA,CAIjB;AAAA,IAAA;AAAA,IAAA,IAAAF,WAAA;AAAA,UAAAoB,IAAAjB,EAAAA;AAAAC,aAAAA,EAAAgB,GAOApC,CAAM,GAAAwB,QAAAQ,EAAAI,GAHAT,EAAG,6BAA6B,6BAA6B5B,EAAMK,MAAM,IAAIL,EAAM6B,KAAK,CAAC,CAAA,GAAAQ;AAAAA,IAAA;AAAA,EAAA,CAAA;AAOxG;"}

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

@@ -0,0 +1,8 @@
+import { type JSX } from "solid-js";
+import type { ChatMessage } from "./types";
+export interface ChatMessageSystemProps {
+    message: ChatMessage;
+    class?: string | undefined;
+}
+export declare function ChatMessageSystem(props: ChatMessageSystemProps): JSX.Element;
+export default ChatMessageSystem;

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

@@ -0,0 +1,26 @@
+import { createComponent as a, insert as s, effect as m, className as n, template as o } from "solid-js/web";
+import { Show as c } from "solid-js";
+import i from "clsx";
+import { Typography as g } from "../typography/typography.js";
+var h = /* @__PURE__ */ o("<div data-testid=chat-message-system>");
+function u(e) {
+  const r = () => e.message.content ?? e.message.text;
+  return a(c, {
+    get when() {
+      return r();
+    },
+    get children() {
+      var t = h();
+      return s(t, a(g, {
+        variant: "caption",
+        get children() {
+          return r();
+        }
+      })), m(() => n(t, i("smwb-chat-message-system", e.class))), t;
+    }
+  });
+}
+export {
+  u as ChatMessageSystem
+};
+//# 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 { type JSX, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../typography\";\nimport type { ChatMessage } from \"./types\";\n\nexport interface ChatMessageSystemProps {\n  message: ChatMessage;\n  class?: string | undefined;\n}\n\nexport function ChatMessageSystem(props: ChatMessageSystemProps): JSX.Element {\n  const content = (): JSX.Element => props.message.content ?? props.message.text;\n\n  return (\n    <Show when={content()}>\n      <div class={cn(\"smwb-chat-message-system\", props.class)} data-testid=\"chat-message-system\">\n        <Typography variant=\"caption\">{content()}</Typography>\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatMessageSystem;\n"],"names":["ChatMessageSystem","props","content","message","text","_$createComponent","Show","when","children","_el$","_tmpl$","_$insert","Typography","variant","_$effect","_$className","cn","class"],"mappings":";;;;;AAUO,SAASA,EAAkBC,GAA4C;AAC5E,QAAMC,IAAUA,MAAmBD,EAAME,QAAQD,WAAWD,EAAME,QAAQC;AAE1E,SAAAC,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEL,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAM,WAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAAJ,EAEhBO,GAAU;AAAA,QAACC,SAAO;AAAA,QAAA,IAAAL,WAAA;AAAA,iBAAYN,EAAAA;AAAAA,QAAS;AAAA,MAAA,CAAA,CAAA,GAAAY,EAAA,MAAAC,EAAAN,GAD9BO,EAAG,4BAA4Bf,EAAMgB,KAAK,CAAC,CAAA,GAAAR;AAAAA,IAAA;AAAA,EAAA,CAAA;AAK7D;"}