@smwb/ui-solid 0.1.0

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

@@ -0,0 +1,208 @@
+import { createComponent as a, use as B, setAttribute as c, effect as f, className as v, memo as z, insert as M, template as S, delegateEvents as P } from "solid-js/web";
+import { mergeProps as W, createSignal as T, Show as u } from "solid-js";
+import h from "clsx";
+import { TextFieldWrapper as H } from "../../inputs/textField/textFieldWrapper.js";
+import { ChatIconButton as D } from "./chatIconButton.js";
+import { createId as K } from "../../../primitives/createId.js";
+import { shouldComposerNewlineOnEnter as U } from "./utils.js";
+import { TextField as V } from "../../inputs/textField/textField.js";
+import { Icon as A } from "../../base/icon/icon.js";
+var q = /* @__PURE__ */ S("<label data-testid=chat-composer-attach>"), O = /* @__PURE__ */ S("<textarea rows=1>"), R = /* @__PURE__ */ S("<div data-testid=chat-composer>");
+function E(o) {
+  o.stopPropagation();
+}
+function j(o, e, s) {
+  const i = o.selectionStart ?? e.length, b = o.selectionEnd ?? e.length, m = `${e.slice(0, i)}
+${e.slice(b)}`;
+  s(m), requestAnimationFrame(() => {
+    o.selectionStart = i + 1, o.selectionEnd = i + 1;
+  });
+}
+function ne(o) {
+  const e = W({
+    placeholder: "message",
+    disabled: !1,
+    sendAriaLabel: "Send message",
+    shiftEnterNewline: !0,
+    ctrlEnterNewline: !0,
+    fileUpload: !1,
+    attachAriaLabel: "Attach file"
+  }, o), [s, i] = T(""), [b, m] = T(!1), _ = K();
+  let p;
+  const L = () => e.shiftEnterNewline || e.ctrlEnterNewline, y = () => !!e.onSendMessage && s().trim().length > 0 && !e.disabled, g = () => e.fileUpload && !!(e.attachInputId || e.onAttachClick), C = () => {
+    if (!e.onSendMessage) return;
+    const t = s().trim();
+    !t || e.disabled || (e.onSendMessage(t), i(""));
+  }, k = (t) => {
+    if (U(t, {
+      shiftEnterNewline: e.shiftEnterNewline,
+      ctrlEnterNewline: e.ctrlEnterNewline
+    })) {
+      t.currentTarget instanceof HTMLTextAreaElement && (t.preventDefault(), j(t.currentTarget, s(), i));
+      return;
+    }
+    t.key === "Enter" && (t.preventDefault(), C());
+  }, F = () => h("smwb-chat-icon-button", "smwb-chat-icon-button_edge-start", e.disabled && "smwb-chat-icon-button_disabled"), w = () => a(u, {
+    get when() {
+      return g();
+    },
+    get children() {
+      return a(u, {
+        get when() {
+          return e.attachInputId;
+        },
+        get fallback() {
+          return a(D, {
+            edge: "start",
+            get "aria-label"() {
+              return e.attachAriaLabel;
+            },
+            "data-testid": "chat-composer-attach",
+            get disabled() {
+              return e.disabled;
+            },
+            onClick: () => e.onAttachClick?.(),
+            onMouseDown: E,
+            get children() {
+              return a(A, {
+                name: "attach_file",
+                size: 24
+              });
+            }
+          });
+        },
+        children: (t) => (() => {
+          var r = q();
+          return r.$$mousedown = E, M(r, a(A, {
+            name: "attach_file",
+            size: 24
+          })), f((n) => {
+            var l = e.disabled ? void 0 : t(), d = F(), I = e.attachAriaLabel, N = e.disabled || void 0;
+            return l !== n.e && c(r, "for", n.e = l), d !== n.t && v(r, n.t = d), I !== n.a && c(r, "aria-label", n.a = I), N !== n.o && c(r, "aria-disabled", n.o = N), n;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          }), r;
+        })()
+      });
+    }
+  }), x = () => a(u, {
+    get when() {
+      return e.onSendMessage;
+    },
+    get children() {
+      return a(D, {
+        edge: "end",
+        color: "primary",
+        get "aria-label"() {
+          return e.sendAriaLabel;
+        },
+        "data-testid": "chat-composer-send",
+        get disabled() {
+          return !y();
+        },
+        onClick: C,
+        onMouseDown: E,
+        get children() {
+          return a(A, {
+            name: "send",
+            size: 24
+          });
+        }
+      });
+    }
+  }), $ = (t) => {
+    p && t.currentTarget === t.target && (t.preventDefault(), p.focus());
+  };
+  return a(u, {
+    get when() {
+      return !(g() && !e.onSendMessage);
+    },
+    get fallback() {
+      return (() => {
+        var t = R();
+        return M(t, w), f(() => v(t, h("smwb-chat-composer", "smwb-chat-composer_attach-only", e.class))), t;
+      })();
+    },
+    get children() {
+      return a(u, {
+        get when() {
+          return L();
+        },
+        get fallback() {
+          return a(V, {
+            get class() {
+              return h("smwb-chat-composer", e.class);
+            },
+            "data-testid": "chat-composer",
+            fullWidth: !0,
+            get value() {
+              return s();
+            },
+            get disabled() {
+              return e.disabled;
+            },
+            get placeholder() {
+              return e.placeholder;
+            },
+            onChange: (t) => i(t.currentTarget.value),
+            get startAdornment() {
+              return w();
+            },
+            get endAdornment() {
+              return x();
+            },
+            onKeyDown: k
+          });
+        },
+        get children() {
+          return a(H, {
+            get class() {
+              return h("smwb-chat-composer", e.class);
+            },
+            "data-testid": "chat-composer",
+            fullWidth: !0,
+            get disabled() {
+              return e.disabled;
+            },
+            get isFilledState() {
+              return s().length > 0;
+            },
+            get isFocused() {
+              return b();
+            },
+            for: _,
+            get shrink() {
+              return z(() => !!(e.attachInputId || e.onAttachClick))() && g();
+            },
+            onHolderMouseDown: $,
+            get startAdornment() {
+              return w();
+            },
+            get endAdornment() {
+              return x();
+            },
+            get children() {
+              var t = O();
+              return t.$$keydown = k, t.addEventListener("blur", () => m(!1)), t.addEventListener("focus", () => m(!0)), t.$$input = (r) => i(r.currentTarget.value), B((r) => p = r, t), c(t, "id", _), f((r) => {
+                var n = h("smwb-text-field__input", "smwb-chat-composer__input", "smwb-text-field__input--show-placeholder", g() && "smwb-text-field__input--adornment-start", e.onSendMessage && "smwb-text-field__input--adornment-end"), l = e.disabled, d = e.placeholder;
+                return n !== r.e && v(t, r.e = n), l !== r.t && (t.disabled = r.t = l), d !== r.a && c(t, "placeholder", r.a = d), r;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              }), f(() => t.value = s()), t;
+            }
+          });
+        }
+      });
+    }
+  });
+}
+P(["mousedown", "input", "keydown"]);
+export {
+  ne as ChatComposer
+};
+//# 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 { type JSX, Show, createSignal, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextField } from \"../../inputs/textField\";\nimport { TextFieldWrapper } from \"../../inputs/textField/textFieldWrapper\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createId } from \"../../../primitives/createId\";\nimport { shouldComposerNewlineOnEnter } from \"./utils\";\n\nexport interface ChatComposerProps {\n  class?: string | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  sendAriaLabel?: string | undefined;\n  shiftEnterNewline?: boolean | undefined;\n  ctrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  attachInputId?: string | undefined;\n  onAttachClick?: (() => void) | undefined;\n  attachAriaLabel?: string | undefined;\n}\n\nfunction stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\nfunction insertNewlineAtCursor(element: HTMLTextAreaElement, value: string, setValue: (next: string) => void): 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(props: ChatComposerProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      placeholder: \"message\",\n      disabled: false,\n      sendAriaLabel: \"Send message\",\n      shiftEnterNewline: true,\n      ctrlEnterNewline: true,\n      fileUpload: false,\n      attachAriaLabel: \"Attach file\",\n    },\n    props\n  );\n\n  const [value, setValue] = createSignal(\"\");\n  const [isFocused, setIsFocused] = createSignal(false);\n  const inputId = createId();\n  let textareaRef: HTMLTextAreaElement | undefined;\n\n  const multiline = (): boolean => merged.shiftEnterNewline || merged.ctrlEnterNewline;\n  const canSend = (): boolean => Boolean(merged.onSendMessage) && value().trim().length > 0 && !merged.disabled;\n  const showAttach = (): boolean => merged.fileUpload && Boolean(merged.attachInputId || merged.onAttachClick);\n\n  const handleSend = (): void => {\n    if (!merged.onSendMessage) return;\n    const text = value().trim();\n    if (!text || merged.disabled) return;\n    void merged.onSendMessage(text);\n    setValue(\"\");\n  };\n\n  const handleKeyDown = (event: KeyboardEvent & { currentTarget: HTMLElement }): void => {\n    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline: merged.shiftEnterNewline, ctrlEnterNewline: merged.ctrlEnterNewline })) {\n      if (event.currentTarget instanceof HTMLTextAreaElement) {\n        event.preventDefault();\n        insertNewlineAtCursor(event.currentTarget, value(), setValue);\n      }\n      return;\n    }\n\n    if (event.key !== \"Enter\") return;\n\n    event.preventDefault();\n    handleSend();\n  };\n\n  const attachClass = (): string =>\n    cn(\"smwb-chat-icon-button\", \"smwb-chat-icon-button_edge-start\", merged.disabled && \"smwb-chat-icon-button_disabled\");\n\n  const attachButton = (): JSX.Element => (\n    <Show when={showAttach()}>\n      <Show\n        when={merged.attachInputId}\n        fallback={\n          <ChatIconButton\n            edge=\"start\"\n            aria-label={merged.attachAriaLabel}\n            data-testid=\"chat-composer-attach\"\n            disabled={merged.disabled}\n            onClick={() => merged.onAttachClick?.()}\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </ChatIconButton>\n        }\n      >\n        {(id) => (\n          <label\n            for={merged.disabled ? undefined : id()}\n            class={attachClass()}\n            aria-label={merged.attachAriaLabel}\n            aria-disabled={merged.disabled || undefined}\n            data-testid=\"chat-composer-attach\"\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </label>\n        )}\n      </Show>\n    </Show>\n  );\n\n  const sendButton = (): JSX.Element => (\n    <Show when={merged.onSendMessage}>\n      <ChatIconButton\n        edge=\"end\"\n        color=\"primary\"\n        aria-label={merged.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    </Show>\n  );\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (textareaRef && event.currentTarget === event.target) {\n      event.preventDefault();\n      textareaRef.focus();\n    }\n  };\n\n  return (\n    <Show\n      when={!(showAttach() && !merged.onSendMessage)}\n      fallback={\n        <div class={cn(\"smwb-chat-composer\", \"smwb-chat-composer_attach-only\", merged.class)} data-testid=\"chat-composer\">\n          {attachButton()}\n        </div>\n      }\n    >\n      <Show\n        when={multiline()}\n        fallback={\n          <TextField\n            class={cn(\"smwb-chat-composer\", merged.class)}\n            data-testid=\"chat-composer\"\n            fullWidth\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            onChange={(event) => setValue(event.currentTarget.value)}\n            startAdornment={attachButton()}\n            endAdornment={sendButton()}\n            onKeyDown={handleKeyDown}\n          />\n        }\n      >\n        <TextFieldWrapper\n          class={cn(\"smwb-chat-composer\", merged.class)}\n          data-testid=\"chat-composer\"\n          fullWidth\n          disabled={merged.disabled}\n          isFilledState={value().length > 0}\n          isFocused={isFocused()}\n          for={inputId}\n          shrink={Boolean(merged.attachInputId || merged.onAttachClick) && showAttach()}\n          onHolderMouseDown={onHolderMouseDown}\n          startAdornment={attachButton()}\n          endAdornment={sendButton()}\n        >\n          <textarea\n            id={inputId}\n            ref={(el) => (textareaRef = el)}\n            class={cn(\n              \"smwb-text-field__input\",\n              \"smwb-chat-composer__input\",\n              \"smwb-text-field__input--show-placeholder\",\n              showAttach() && \"smwb-text-field__input--adornment-start\",\n              merged.onSendMessage && \"smwb-text-field__input--adornment-end\"\n            )}\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            rows={1}\n            onInput={(event) => setValue(event.currentTarget.value)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onKeyDown={handleKeyDown}\n          />\n        </TextFieldWrapper>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatComposer;\n"],"names":["stopPropagation","event","insertNewlineAtCursor","element","value","setValue","start","selectionStart","length","end","selectionEnd","nextValue","slice","requestAnimationFrame","ChatComposer","props","merged","mergeProps","placeholder","disabled","sendAriaLabel","shiftEnterNewline","ctrlEnterNewline","fileUpload","attachAriaLabel","createSignal","isFocused","setIsFocused","inputId","createId","textareaRef","multiline","canSend","Boolean","onSendMessage","trim","showAttach","attachInputId","onAttachClick","handleSend","text","handleKeyDown","shouldComposerNewlineOnEnter","currentTarget","HTMLTextAreaElement","preventDefault","key","attachClass","cn","attachButton","_$createComponent","Show","when","children","fallback","ChatIconButton","edge","onClick","onMouseDown","Icon","name","size","id","_el$","_tmpl$","$$mousedown","_$insert","_$effect","_p$","_v$","undefined","_v$2","_v$3","_v$4","e","_$setAttribute","t","_$className","a","o","sendButton","color","onHolderMouseDown","target","focus","_el$3","_tmpl$3","class","TextField","fullWidth","onChange","startAdornment","endAdornment","onKeyDown","TextFieldWrapper","isFilledState","shrink","_$memo","_el$2","_tmpl$2","$$keydown","addEventListener","$$input","_$use","el","_v$5","_v$6","_v$7","_$delegateEvents"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import { type JSX } from "solid-js";
+import type { ChatLayoutMode } from "./types";
+export interface ChatHeaderProps {
+    class?: string | undefined;
+    title?: JSX.Element;
+    subtitle?: JSX.Element;
+    actions?: JSX.Element;
+    layout?: ChatLayoutMode | undefined;
+    allowedLayouts?: ChatLayoutMode[] | undefined;
+    onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;
+    onClose?: (() => void) | undefined;
+}
+export declare function ChatHeader(props: ChatHeaderProps): JSX.Element;
+export default ChatHeader;

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

@@ -0,0 +1,89 @@
+import { insert as n, createComponent as l, effect as g, className as m, template as o } from "solid-js/web";
+import { Show as a, For as _ } from "solid-js";
+import f from "clsx";
+import { ChatIconButton as h } from "./chatIconButton.js";
+import { getChatLayoutActions as w } from "./utils.js";
+import { Icon as s } from "../../base/icon/icon.js";
+var b = /* @__PURE__ */ o("<div class=smwb-chat-header__title>"), C = /* @__PURE__ */ o("<div class=smwb-chat-header__subtitle>"), y = /* @__PURE__ */ o("<div data-testid=chat-header><div class=smwb-chat-header__main></div><div class=smwb-chat-header__actions>");
+const v = {
+  floating: "picture_in_picture",
+  fullHeight: "fit_screen",
+  fullscreen: "open_in_full"
+}, $ = {
+  floating: "Floating window",
+  fullHeight: "Full height",
+  fullscreen: "Fullscreen"
+};
+function x(t) {
+  const u = () => w(t.allowedLayouts ?? ["floating"], t.layout), d = () => !!t.onLayoutChange && u().length > 0;
+  return (() => {
+    var r = y(), i = r.firstChild, c = i.nextSibling;
+    return n(i, l(a, {
+      get when() {
+        return t.title;
+      },
+      get children() {
+        var e = b();
+        return n(e, () => t.title), e;
+      }
+    }), null), n(i, l(a, {
+      get when() {
+        return t.subtitle;
+      },
+      get children() {
+        var e = C();
+        return n(e, () => t.subtitle), e;
+      }
+    }), null), n(c, () => t.actions, null), n(c, l(a, {
+      get when() {
+        return d();
+      },
+      get children() {
+        return l(_, {
+          get each() {
+            return u();
+          },
+          children: (e) => l(h, {
+            get "aria-pressed"() {
+              return t.layout === e;
+            },
+            get "aria-label"() {
+              return $[e];
+            },
+            "data-testid": `chat-layout-${e}`,
+            onClick: () => t.onLayoutChange?.(e),
+            get children() {
+              return l(s, {
+                get name() {
+                  return v[e];
+                },
+                size: 18
+              });
+            }
+          })
+        });
+      }
+    }), null), n(c, l(a, {
+      get when() {
+        return t.onClose;
+      },
+      get children() {
+        return l(h, {
+          "aria-label": "Close chat",
+          "data-testid": "chat-close",
+          onClick: () => t.onClose?.(),
+          get children() {
+            return l(s, {
+              name: "close",
+              size: 18
+            });
+          }
+        });
+      }
+    }), null), g(() => m(r, f("smwb-chat-header", t.class))), r;
+  })();
+}
+export {
+  x as ChatHeader
+};
+//# 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 { type JSX, For, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport type { ChatLayoutMode } from \"./types\";\nimport { getChatLayoutActions } from \"./utils\";\n\nexport interface ChatHeaderProps {\n  class?: string | undefined;\n  title?: JSX.Element;\n  subtitle?: JSX.Element;\n  actions?: JSX.Element;\n  layout?: ChatLayoutMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  onClose?: (() => void) | undefined;\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(props: ChatHeaderProps): JSX.Element {\n  const layoutActions = (): Exclude<ChatLayoutMode, \"closed\">[] =>\n    getChatLayoutActions(props.allowedLayouts ?? [\"floating\"], props.layout);\n  const showLayoutActions = (): boolean => Boolean(props.onLayoutChange) && layoutActions().length > 0;\n\n  return (\n    <div class={cn(\"smwb-chat-header\", props.class)} data-testid=\"chat-header\">\n      <div class=\"smwb-chat-header__main\">\n        <Show when={props.title}>\n          <div class=\"smwb-chat-header__title\">{props.title}</div>\n        </Show>\n        <Show when={props.subtitle}>\n          <div class=\"smwb-chat-header__subtitle\">{props.subtitle}</div>\n        </Show>\n      </div>\n      <div class=\"smwb-chat-header__actions\">\n        {props.actions}\n        <Show when={showLayoutActions()}>\n          <For each={layoutActions()}>\n            {(mode) => (\n              <ChatIconButton\n                aria-pressed={props.layout === mode}\n                aria-label={layoutAriaLabels[mode]}\n                data-testid={`chat-layout-${mode}`}\n                onClick={() => props.onLayoutChange?.(mode)}\n              >\n                <Icon name={layoutIcons[mode]} size={18} />\n              </ChatIconButton>\n            )}\n          </For>\n        </Show>\n        <Show when={props.onClose}>\n          <ChatIconButton aria-label=\"Close chat\" data-testid=\"chat-close\" onClick={() => props.onClose?.()}>\n            <Icon name=\"close\" size={18} />\n          </ChatIconButton>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport default ChatHeader;\n"],"names":["layoutIcons","floating","fullHeight","fullscreen","layoutAriaLabels","ChatHeader","props","layoutActions","getChatLayoutActions","allowedLayouts","layout","showLayoutActions","Boolean","onLayoutChange","length","_el$","_tmpl$3","_el$2","firstChild","_el$5","nextSibling","_$insert","_$createComponent","Show","when","title","children","_el$3","_tmpl$","subtitle","_el$4","_tmpl$2","actions","For","each","mode","ChatIconButton","onClick","Icon","name","size","onClose","_$effect","_$className","cn","class"],"mappings":";;;;;;;AAkBA,MAAMA,IAAiE;AAAA,EACrEC,UAAU;AAAA,EACVC,YAAY;AAAA,EACZC,YAAY;AACd,GAEMC,IAAsE;AAAA,EAC1EH,UAAU;AAAA,EACVC,YAAY;AAAA,EACZC,YAAY;AACd;AAEO,SAASE,EAAWC,GAAqC;AAC9D,QAAMC,IAAgBA,MACpBC,EAAqBF,EAAMG,kBAAkB,CAAC,UAAU,GAAGH,EAAMI,MAAM,GACnEC,IAAoBA,MAAeC,EAAQN,EAAMO,kBAAmBN,EAAAA,EAAgBO,SAAS;AAEnG,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG;AAAAC,WAAAA,EAAAJ,GAAAK,EAGOC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAMmB;AAAAA,MAAK;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACiBrB,EAAMmB,KAAK,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAN,EAAAJ,GAAAK,EAElDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAMuB;AAAAA,MAAQ;AAAA,MAAA,IAAAH,WAAA;AAAA,YAAAI,IAAAC,EAAAA;AAAAV,eAAAA,EAAAS,GAAA,MACiBxB,EAAMuB,QAAQ,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAT,EAAAF,GAAA,MAIxDb,EAAM0B,SAAO,IAAA,GAAAX,EAAAF,GAAAG,EACbC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEb,EAAAA;AAAAA,MAAmB;AAAA,MAAA,IAAAe,WAAA;AAAA,eAAAJ,EAC5BW,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE3B,EAAAA;AAAAA,UAAe;AAAA,UAAAmB,UACtBS,CAAAA,MAAIb,EACHc,GAAc;AAAA,YAAA,IAAA,iBAAA;AAAA,qBACC9B,EAAMI,WAAWyB;AAAAA,YAAI;AAAA,YAAA,IAAA,eAAA;AAAA,qBACvB/B,EAAiB+B,CAAI;AAAA,YAAC;AAAA,YAAA,eACrB,eAAeA,CAAI;AAAA,YAChCE,SAASA,MAAM/B,EAAMO,iBAAiBsB,CAAI;AAAA,YAAC,IAAAT,WAAA;AAAA,qBAAAJ,EAE1CgB,GAAI;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAEvC,EAAYmC,CAAI;AAAA,gBAAC;AAAA,gBAAEK,MAAM;AAAA,cAAA,CAAE;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA,CAE1C;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAnB,EAAAF,GAAAG,EAGJC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAMmC;AAAAA,MAAO;AAAA,MAAA,IAAAf,WAAA;AAAA,eAAAJ,EACtBc,GAAc;AAAA,UAAA,cAAA;AAAA,UAAA,eAAA;AAAA,UAAkDC,SAASA,MAAM/B,EAAMmC,UAAAA;AAAAA,UAAW,IAAAf,WAAA;AAAA,mBAAAJ,EAC9FgB,GAAI;AAAA,cAACC,MAAI;AAAA,cAASC,MAAM;AAAA,YAAA,CAAE;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAE,EAAA,MAAAC,EAAA5B,GA3BvB6B,EAAG,oBAAoBtC,EAAMuC,KAAK,CAAC,CAAA,GAAA9B;AAAAA,EAAA,GAAA;AAiCnD;"}

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

@@ -0,0 +1,9 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface ChatIconButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+    edge?: "start" | "end" | undefined;
+    color?: "default" | "primary" | undefined;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function ChatIconButton(props: ParentProps<ChatIconButtonProps>): JSX.Element;
+export default ChatIconButton;

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

@@ -0,0 +1,42 @@
+import { use as m, spread as p, mergeProps as u, insert as n, createComponent as s, template as b } from "solid-js/web";
+import { mergeProps as f, splitProps as g, Show as h } from "solid-js";
+import w from "clsx";
+import { mergeRefs as _ } from "../../../primitives/mergeRefs.js";
+import { Ripple as P } from "../../base/ripple/ripple.js";
+var y = /* @__PURE__ */ b("<button>");
+function x(i) {
+  const l = f({
+    color: "default"
+  }, i), [e, a] = g(l, ["class", "children", "disabled", "edge", "color", "ref"]);
+  let r;
+  const c = (t) => {
+    e.disabled || r?.onRipple(t);
+  };
+  return (() => {
+    var t = y(), o = _(e.ref);
+    return typeof o == "function" && m(o, t), p(t, u(a, {
+      type: "button",
+      get class() {
+        return w("smwb-chat-icon-button", e.edge === "start" && "smwb-chat-icon-button_edge-start", e.edge === "end" && "smwb-chat-icon-button_edge-end", e.color === "primary" && "smwb-chat-icon-button_primary", e.disabled && "smwb-chat-icon-button_disabled", e.class);
+      },
+      get disabled() {
+        return e.disabled;
+      },
+      onPointerDown: c
+    }), !1, !0), n(t, () => e.children, null), n(t, s(h, {
+      get when() {
+        return !e.disabled;
+      },
+      get children() {
+        return s(P, {
+          actionRef: (d) => r = d,
+          center: !0
+        });
+      }
+    }), null), t;
+  })();
+}
+export {
+  x as ChatIconButton
+};
+//# 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 { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ChatIconButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  edge?: \"start\" | \"end\" | undefined;\n  color?: \"default\" | \"primary\" | undefined;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function ChatIconButton(props: ParentProps<ChatIconButtonProps>): JSX.Element {\n  const merged = mergeProps({ color: \"default\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"children\", \"disabled\", \"edge\", \"color\", \"ref\"]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      type=\"button\"\n      class={cn(\n        \"smwb-chat-icon-button\",\n        local.edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        local.edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        local.color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        local.disabled && \"smwb-chat-icon-button_disabled\",\n        local.class\n      )}\n      disabled={local.disabled}\n      onPointerDown={onPointerDown}\n    >\n      {local.children}\n      <Show when={!local.disabled}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n      </Show>\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"names":["ChatIconButton","props","merged","mergeProps","color","local","rest","splitProps","rippleActions","onPointerDown","event","disabled","onRipple","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","edge","class","_$insert","children","_$createComponent","Show","when","Ripple","actionRef","actions","center"],"mappings":";;;;;;AAWO,SAASA,EAAeC,GAAsD;AACnF,QAAMC,IAASC,EAAW;AAAA,IAAEC,OAAO;AAAA,EAAA,GAAsBH,CAAK,GACxD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CAAC,SAAS,YAAY,YAAY,QAAQ,SAAS,KAAK,CAAC;AAElG,MAAIM;AAEJ,QAAMC,IAAgBA,CAACC,MAA8B;AACnD,IAAKL,EAAMM,YAAUH,GAAeI,SAASF,CAAK;AAAA,EACpD;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAGSC,EAAUX,EAAMY,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBd,GAAI;AAAA,MAAA,MAEH;AAAA,MAAQ,IAAA,QAAA;AAAA,eACNe,EACL,yBACAhB,EAAMiB,SAAS,WAAW,oCAC1BjB,EAAMiB,SAAS,SAAS,kCACxBjB,EAAMD,UAAU,aAAa,iCAC7BC,EAAMM,YAAY,kCAClBN,EAAMkB,KACR;AAAA,MAAC;AAAA,MAAA,IACDZ,WAAQ;AAAA,eAAEN,EAAMM;AAAAA,MAAQ;AAAA,MAAA,eACTF;AAAAA,IAAAA,CAAa,GAAA,IAAA,EAAA,GAAAe,EAAAX,GAAA,MAE3BR,EAAMoB,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACvB,EAAMM;AAAAA,MAAQ;AAAA,MAAA,IAAAc,WAAA;AAAA,eAAAC,EACxBG,GAAM;AAAA,UAACC,WAAYC,OAAavB,IAAgBuB;AAAAA,UAAUC,QAAM;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIzE;"}

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

@@ -0,0 +1,19 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type ChatProps } from "./chat";
+import type { ChatAnchor, ChatLayoutSide } from "./types";
+export type ChatLayoutChatProps = Omit<ChatProps, "class" | "embedded" | "floatingTrigger" | "anchor" | "allowedLayouts" | "layout" | "defaultLayout" | "open" | "defaultOpen" | "onOpenChange" | "onLayoutChange">;
+export interface ChatLayoutProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+    contentClass?: string | undefined;
+    chatClass?: string | undefined;
+    side?: ChatLayoutSide | undefined;
+    chatWidth?: number | string | undefined;
+    collapsed?: boolean | undefined;
+    defaultCollapsed?: boolean | undefined;
+    onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+    collapseAriaLabel?: string | undefined;
+    expandAriaLabel?: string | undefined;
+    floatingAnchor?: ChatAnchor | undefined;
+    chat: ChatLayoutChatProps;
+}
+export declare function ChatLayout(props: ChatLayoutProps): JSX.Element;
+export default ChatLayout;

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

@@ -0,0 +1,147 @@
+import { createComponent as a, spread as C, mergeProps as s, insert as o, effect as b, className as _, template as k, memo as c } from "solid-js/web";
+import { mergeProps as E, splitProps as F, createEffect as H, Show as i } from "solid-js";
+import d from "clsx";
+import { ChatIconButton as w } from "./chatIconButton.js";
+import { createControllableState as A } from "../../../primitives/createControllableState.js";
+import { Chat as h } from "./chat.js";
+import { Icon as $ } from "../../base/icon/icon.js";
+var L = /* @__PURE__ */ k("<div><div data-testid=chat-layout-content>"), x = /* @__PURE__ */ k("<aside class=smwb-chat-layout__panel data-testid=chat-layout-panel>");
+const V = (l) => typeof l == "number" ? `${l}px` : l, j = (l) => l === "left" ? "bottom-left" : "bottom-right";
+function M(l) {
+  const v = E({
+    side: "right",
+    chatWidth: 400,
+    defaultCollapsed: !1,
+    collapseAriaLabel: "Collapse chat panel",
+    expandAriaLabel: "Expand chat panel"
+  }, l), [t, u] = F(v, ["class", "contentClass", "chatClass", "side", "chatWidth", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseAriaLabel", "expandAriaLabel", "floatingAnchor", "chat", "children", "style"]), [p, g] = A({
+    value: () => t.collapsed,
+    defaultValue: t.defaultCollapsed,
+    onChange: t.onCollapsedChange
+  }), [I, f] = A({
+    defaultValue: !1
+  });
+  H(() => {
+    p() || f(!1);
+  });
+  const P = () => t.floatingAnchor ?? j(t.side), S = () => t.side === "left" ? "dock_to_left" : "dock_to_right", B = () => t.side === "left" ? "left_panel_close" : "right_panel_close", O = () => a(w, {
+    get "aria-label"() {
+      return t.collapseAriaLabel;
+    },
+    "data-testid": "chat-layout-collapse",
+    onClick: () => g(!0),
+    get children() {
+      return a($, {
+        get name() {
+          return B();
+        },
+        size: 18
+      });
+    }
+  }), W = () => a(w, {
+    get "aria-label"() {
+      return t.expandAriaLabel;
+    },
+    "data-testid": "chat-layout-expand",
+    onClick: () => g(!1),
+    get children() {
+      return a($, {
+        get name() {
+          return S();
+        },
+        size: 18
+      });
+    }
+  }), m = () => [c(() => t.chat.headerActions), c(O)], z = () => [c(() => t.chat.headerActions), c(W)], y = () => ({
+    "--smwb-chat-layout-w": V(t.chatWidth),
+    ...typeof t.style == "object" && t.style ? t.style : {}
+  });
+  return a(i, {
+    get when() {
+      return p();
+    },
+    get fallback() {
+      return (() => {
+        var e = L(), r = e.firstChild;
+        return C(e, s(u, {
+          get class() {
+            return d("smwb-chat-layout", `smwb-chat-layout_${t.side}`, t.class);
+          },
+          get style() {
+            return y();
+          },
+          "data-testid": "chat-layout",
+          "data-collapsed": "false"
+        }), !1, !0), o(e, a(i, {
+          get when() {
+            return t.side === "left";
+          },
+          get children() {
+            var n = x();
+            return o(n, a(h, s(() => t.chat, {
+              get class() {
+                return t.chatClass;
+              },
+              embedded: !0,
+              allowedLayouts: [],
+              get headerActions() {
+                return m();
+              }
+            }))), n;
+          }
+        }), r), o(r, () => t.children), o(e, a(i, {
+          get when() {
+            return t.side === "right";
+          },
+          get children() {
+            var n = x();
+            return o(n, a(h, s(() => t.chat, {
+              get class() {
+                return t.chatClass;
+              },
+              embedded: !0,
+              allowedLayouts: [],
+              get headerActions() {
+                return m();
+              }
+            }))), n;
+          }
+        }), null), b(() => _(r, d("smwb-chat-layout__content", t.contentClass))), e;
+      })();
+    },
+    get children() {
+      var e = L(), r = e.firstChild;
+      return C(e, s(u, {
+        get class() {
+          return d("smwb-chat-layout", "smwb-chat-layout_collapsed", t.class);
+        },
+        get style() {
+          return y();
+        },
+        "data-testid": "chat-layout",
+        "data-collapsed": "true"
+      }), !1, !0), o(r, () => t.children), o(e, a(h, s(() => t.chat, {
+        get class() {
+          return t.chatClass;
+        },
+        floatingTrigger: !0,
+        get anchor() {
+          return P();
+        },
+        allowedLayouts: ["floating"],
+        layout: "floating",
+        get open() {
+          return I();
+        },
+        onOpenChange: f,
+        get headerActions() {
+          return z();
+        }
+      })), null), b(() => _(r, d("smwb-chat-layout__content", t.contentClass))), e;
+    }
+  });
+}
+export {
+  M as ChatLayout
+};
+//# 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 { type JSX, type ParentProps, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { Chat, type ChatProps } from \"./chat\";\nimport type { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string): 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  | \"class\"\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 ParentProps, JSX.HTMLAttributes<HTMLDivElement> {\n  contentClass?: string | undefined;\n  chatClass?: string | undefined;\n  side?: ChatLayoutSide | undefined;\n  chatWidth?: number | string | undefined;\n  collapsed?: boolean | undefined;\n  defaultCollapsed?: boolean | undefined;\n  onCollapsedChange?: ((collapsed: boolean) => void) | undefined;\n  collapseAriaLabel?: string | undefined;\n  expandAriaLabel?: string | undefined;\n  floatingAnchor?: ChatAnchor | undefined;\n  chat: ChatLayoutChatProps;\n}\n\nexport function ChatLayout(props: ChatLayoutProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      side: \"right\" as const,\n      chatWidth: 400 as number | string,\n      defaultCollapsed: false,\n      collapseAriaLabel: \"Collapse chat panel\",\n      expandAriaLabel: \"Expand chat panel\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"contentClass\",\n    \"chatClass\",\n    \"side\",\n    \"chatWidth\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseAriaLabel\",\n    \"expandAriaLabel\",\n    \"floatingAnchor\",\n    \"chat\",\n    \"children\",\n    \"style\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: local.onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = createControllableState<boolean>({ defaultValue: false });\n\n  createEffect(() => {\n    if (!collapsed()) {\n      setFloatingOpen(false);\n    }\n  });\n\n  const anchor = (): ChatAnchor => local.floatingAnchor ?? floatingAnchorForSide(local.side);\n  const dockIcon = (): string => (local.side === \"left\" ? \"dock_to_left\" : \"dock_to_right\");\n  const collapseIcon = (): string => (local.side === \"left\" ? \"left_panel_close\" : \"right_panel_close\");\n\n  const collapseButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.collapseAriaLabel} data-testid=\"chat-layout-collapse\" onClick={() => setCollapsed(true)}>\n      <Icon name={collapseIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {collapseButton()}\n    </>\n  );\n\n  const floatingHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {expandButton()}\n    </>\n  );\n\n  const rootStyle = (): JSX.CSSProperties => ({\n    \"--smwb-chat-layout-w\": len(local.chatWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <Show\n      when={collapsed()}\n      fallback={\n        <div\n          {...rest}\n          class={cn(\"smwb-chat-layout\", `smwb-chat-layout_${local.side}`, local.class)}\n          style={rootStyle()}\n          data-testid=\"chat-layout\"\n          data-collapsed=\"false\"\n        >\n          <Show when={local.side === \"left\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n          <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n            {local.children}\n          </div>\n          <Show when={local.side === \"right\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n        </div>\n      }\n    >\n      <div\n        {...rest}\n        class={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", local.class)}\n        style={rootStyle()}\n        data-testid=\"chat-layout\"\n        data-collapsed=\"true\"\n      >\n        <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n          {local.children}\n        </div>\n        <Chat\n          {...local.chat}\n          class={local.chatClass}\n          floatingTrigger\n          anchor={anchor()}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen()}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions()}\n        />\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","props","merged","mergeProps","chatWidth","defaultCollapsed","collapseAriaLabel","expandAriaLabel","local","rest","splitProps","collapsed","setCollapsed","createControllableState","defaultValue","onChange","onCollapsedChange","floatingOpen","setFloatingOpen","createEffect","anchor","floatingAnchor","dockIcon","collapseIcon","collapseButton","_$createComponent","ChatIconButton","onClick","children","Icon","name","size","expandButton","dockedHeaderActions","_$memo","chat","headerActions","floatingHeaderActions","rootStyle","style","Show","when","fallback","_el$3","_tmpl$","_el$5","firstChild","_$spread","_$mergeProps","cn","class","_$insert","_el$4","_tmpl$2","Chat","chatClass","embedded","allowedLayouts","_el$6","_$effect","_$className","contentClass","_el$","_el$2","floatingTrigger","layout","open","onOpenChange"],"mappings":";;;;;;;;AAQA,MAAMA,IAAMA,CAACC,MAAoC,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAEtFC,IAAwBA,CAACC,MAAsCA,MAAS,SAAS,gBAAgB;AA+BhG,SAASC,EAAWC,GAAqC;AAC9D,QAAMC,IAASC,EACb;AAAA,IACEJ,MAAM;AAAA,IACNK,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC,mBAAmB;AAAA,IACnBC,iBAAiB;AAAA,EAAA,GAEnBN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,gBACA,aACA,QACA,aACA,aACA,oBACA,qBACA,qBACA,mBACA,kBACA,QACA,YACA,OAAO,CACR,GAEK,CAACS,GAAWC,CAAY,IAAIC,EAAiC;AAAA,IACjEhB,OAAOA,MAAMW,EAAMG;AAAAA,IACnBG,cAAcN,EAAMH;AAAAA,IACpBU,UAAUP,EAAMQ;AAAAA,EAAAA,CACjB,GAEK,CAACC,GAAcC,CAAe,IAAIL,EAAiC;AAAA,IAAEC,cAAc;AAAA,EAAA,CAAO;AAEhGK,EAAAA,EAAa,MAAM;AACjB,IAAKR,OACHO,EAAgB,EAAK;AAAA,EAEzB,CAAC;AAED,QAAME,IAASA,MAAkBZ,EAAMa,kBAAkBvB,EAAsBU,EAAMT,IAAI,GACnFuB,IAAWA,MAAed,EAAMT,SAAS,SAAS,iBAAiB,iBACnEwB,IAAeA,MAAef,EAAMT,SAAS,SAAS,qBAAqB,qBAE3EyB,IAAiBA,MAAeC,EACnCC,GAAc;AAAA,IAAA,IAAA,eAAA;AAAA,aAAalB,EAAMF;AAAAA,IAAiB;AAAA,IAAA,eAAA;AAAA,IAAqCqB,SAASA,MAAMf,EAAa,EAAI;AAAA,IAAC,IAAAgB,WAAA;AAAA,aAAAH,EACtHI,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEP,EAAAA;AAAAA,QAAc;AAAA,QAAEQ,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAAA,EAAA,CAAA,GAIlCC,IAAeA,MAAeP,EACjCC,GAAc;AAAA,IAAA,IAAA,eAAA;AAAA,aAAalB,EAAMD;AAAAA,IAAe;AAAA,IAAA,eAAA;AAAA,IAAmCoB,SAASA,MAAMf,EAAa,EAAK;AAAA,IAAC,IAAAgB,WAAA;AAAA,aAAAH,EACnHI,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAER,EAAAA;AAAAA,QAAU;AAAA,QAAES,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAAA,EAAA,CAAA,GAI9BE,IAAsBA,MAAe,CAAAC,QAEtC1B,EAAM2B,KAAKC,aAAa,GAAAF,EACxBV,CAAc,CAAA,GAIba,IAAwBA,MAAe,CAAAH,QAExC1B,EAAM2B,KAAKC,aAAa,GAAAF,EACxBF,CAAY,CAAA,GAIXM,IAAYA,OAA0B;AAAA,IAC1C,wBAAwB1C,EAAIY,EAAMJ,SAAS;AAAA,IAC3C,GAAI,OAAOI,EAAM+B,SAAU,YAAY/B,EAAM+B,QAAQ/B,EAAM+B,QAAQ,CAAA;AAAA,EAAC;AAGtE,SAAAd,EACGe,GAAI;AAAA,IAAA,IACHC,OAAI;AAAA,aAAE9B,EAAAA;AAAAA,IAAW;AAAA,IAAA,IACjB+B,WAAQ;AAAA,cAAA,MAAA;AAAA,YAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAC,eAAAA,EAAAJ,GAAAK,EAEAvC,GAAI;AAAA,UAAA,IAAA,QAAA;AAAA,mBACDwC,EAAG,oBAAoB,oBAAoBzC,EAAMT,IAAI,IAAIS,EAAM0C,KAAK;AAAA,UAAC;AAAA,UAAA,IAC5EX,QAAK;AAAA,mBAAED,EAAAA;AAAAA,UAAW;AAAA,UAAA,eACN;AAAA,UAAa,kBACV;AAAA,QAAA,CAAO,GAAA,IAAA,EAAA,GAAAa,EAAAR,GAAAlB,EAErBe,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEjC,EAAMT,SAAS;AAAA,UAAM;AAAA,UAAA,IAAA6B,WAAA;AAAA,gBAAAwB,IAAAC,EAAAA;AAAAF,mBAAAA,EAAAC,GAAA3B,EAE5B6B,GAAIN,EAAA,MAAKxC,EAAM2B,MAAI;AAAA,cAAA,IAAA,QAAA;AAAA,uBAAS3B,EAAM+C;AAAAA,cAAS;AAAA,cAAEC,UAAQ;AAAA,cAACC,gBAAgB,CAAA;AAAA,cAAE,IAAErB,gBAAa;AAAA,uBAAEH,EAAAA;AAAAA,cAAqB;AAAA,YAAA,CAAA,CAAA,CAAA,GAAAmB;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAP,CAAA,GAAAM,EAAAN,GAAA,MAIhHrC,EAAMoB,QAAQ,GAAAuB,EAAAR,GAAAlB,EAEhBe,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEjC,EAAMT,SAAS;AAAA,UAAO;AAAA,UAAA,IAAA6B,WAAA;AAAA,gBAAA8B,IAAAL,EAAAA;AAAAF,mBAAAA,EAAAO,GAAAjC,EAE7B6B,GAAIN,EAAA,MAAKxC,EAAM2B,MAAI;AAAA,cAAA,IAAA,QAAA;AAAA,uBAAS3B,EAAM+C;AAAAA,cAAS;AAAA,cAAEC,UAAQ;AAAA,cAACC,gBAAgB,CAAA;AAAA,cAAE,IAAErB,gBAAa;AAAA,uBAAEH,EAAAA;AAAAA,cAAqB;AAAA,YAAA,CAAA,CAAA,CAAA,GAAAyB;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAC,EAAA,MAAAC,EAAAf,GALvGI,EAAG,6BAA6BzC,EAAMqD,YAAY,CAAC,CAAA,GAAAlB;AAAAA,MAAA,GAAA;AAAA,IAAA;AAAA,IAAA,IAAAf,WAAA;AAAA,UAAAkC,IAAAlB,EAAAA,GAAAmB,IAAAD,EAAAhB;AAAAC,aAAAA,EAAAe,GAAAd,EAY7DvC,GAAI;AAAA,QAAA,IAAA,QAAA;AAAA,iBACDwC,EAAG,oBAAoB,8BAA8BzC,EAAM0C,KAAK;AAAA,QAAC;AAAA,QAAA,IACxEX,QAAK;AAAA,iBAAED,EAAAA;AAAAA,QAAW;AAAA,QAAA,eACN;AAAA,QAAa,kBACV;AAAA,MAAA,CAAM,GAAA,IAAA,EAAA,GAAAa,EAAAY,GAAA,MAGlBvD,EAAMoB,QAAQ,GAAAuB,EAAAW,GAAArC,EAEhB6B,GAAIN,EAAA,MACCxC,EAAM2B,MAAI;AAAA,QAAA,IAAA,QAAA;AAAA,iBACP3B,EAAM+C;AAAAA,QAAS;AAAA,QACtBS,iBAAe;AAAA,QAAA,IACf5C,SAAM;AAAA,iBAAEA,EAAAA;AAAAA,QAAQ;AAAA,QAChBqC,gBAAgB,CAAC,UAAU;AAAA,QAC3BQ,QAAM;AAAA,QAAA,IACNC,OAAI;AAAA,iBAAEjD,EAAAA;AAAAA,QAAc;AAAA,QACpBkD,cAAcjD;AAAAA,QAAe,IAC7BkB,gBAAa;AAAA,iBAAEC,EAAAA;AAAAA,QAAuB;AAAA,MAAA,CAAA,CAAA,GAAA,IAAA,GAAAsB,EAAA,MAAAC,EAAAG,GAZ5Bd,EAAG,6BAA6BzC,EAAMqD,YAAY,CAAC,CAAA,GAAAC;AAAAA,IAAA;AAAA,EAAA,CAAA;AAiBvE;"}

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import type { ChatAuthor } from "./types";
+export interface ChatMessageAvatarProps {
+    author?: ChatAuthor | undefined;
+    enabled?: boolean | undefined;
+    class?: string | undefined;
+}
+export declare function ChatMessageAvatar(props: ChatMessageAvatarProps): JSX.Element;
+export default ChatMessageAvatar;