@smwb/ui-solid 0.3.0 → 0.4.1

package/dist/source/components/dataDisplay/chat/chat.jsx

@@ -0,0 +1,156 @@
+import "@smwb/ui-styles/less/components/chat/chat.entry.less";
+import { Show, createMemo, mergeProps } from "solid-js";
+import cn from "clsx";
+import { FloatingButton } from "../../inputs/floatingButton";
+import { Icon } from "../../base/icon";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { createId } from "../../../primitives/createId";
+import { ChatComposer } from "./chatComposer";
+import { ChatHeader } from "./chatHeader";
+import { ChatMessages } from "./chatMessages";
+import { ChatShell } from "./chatShell";
+import { createChatFileUpload } from "./useChatFileUpload";
+import {
+  CHAT_EXPAND_LAYOUTS
+} from "./types";
+import { pickInitialLayout, resolveAllowedLayouts, shouldShowChatCloseButton } from "./utils";
+function Chat(props) {
+  const p = mergeProps(
+    {
+      showAvatars: false,
+      showAttachments: false,
+      anchor: "bottom-right",
+      themeMode: "inherit",
+      defaultOpen: false,
+      floatingTrigger: false,
+      composerPlaceholder: "message",
+      composerShiftEnterNewline: true,
+      composerCtrlEnterNewline: true,
+      fileUpload: false,
+      embedded: false,
+      overlayContext: false,
+      showStatus: false
+    },
+    props
+  );
+  const allowedLayouts = createMemo(() => resolveAllowedLayouts(p.allowedLayouts ?? CHAT_EXPAND_LAYOUTS));
+  const [open, setOpen] = createControllableState({
+    value: () => p.open,
+    defaultValue: p.defaultOpen,
+    onChange: p.onOpenChange
+  });
+  const [layout, setLayout] = createControllableState({
+    value: () => p.layout,
+    defaultValue: pickInitialLayout(allowedLayouts(), p.defaultLayout),
+    onChange: p.onLayoutChange
+  });
+  const effectiveLayout = () => p.embedded ? "fullHeight" : p.floatingTrigger ? open() ? layout() : "closed" : layout();
+  const handleOpen = () => {
+    setOpen(true);
+    if (layout() === "closed") {
+      setLayout(pickInitialLayout(allowedLayouts(), p.defaultLayout));
+    }
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleLayoutChange = (next) => {
+    setOpen(true);
+    setLayout(next);
+  };
+  const fileUpload = createChatFileUpload({
+    enabled: () => p.fileUpload,
+    accept: p.fileUploadAccept,
+    maxFiles: p.fileUploadMaxFiles,
+    onUploadFiles: p.onUploadFiles,
+    disabled: () => Boolean(p.composerDisabled)
+  });
+  const attachInputId = createId();
+  const showComposer = () => Boolean(p.onSendMessage) || fileUpload.enabled();
+  const fileInput = () => <Show when={fileUpload.enabled()}>
+      <input {...fileUpload.getInputProps({ id: attachInputId })} data-testid="chat-file-input" />
+    </Show>;
+  const resolvedFooter = () => p.footer ?? p.children ?? (showComposer() ? <>
+        {fileInput()}
+        <ChatComposer
+    onSendMessage={p.onSendMessage}
+    placeholder={p.composerPlaceholder}
+    disabled={p.composerDisabled}
+    shiftEnterNewline={p.composerShiftEnterNewline}
+    ctrlEnterNewline={p.composerCtrlEnterNewline}
+    fileUpload={fileUpload.enabled()}
+    attachInputId={fileUpload.enabled() ? attachInputId : void 0}
+    attachAriaLabel={p.attachAriaLabel}
+  />
+      </> : void 0);
+  const closeButtonVisible = () => shouldShowChatCloseButton({
+    floatingTrigger: p.floatingTrigger,
+    embedded: p.embedded,
+    overlayContext: p.overlayContext,
+    effectiveLayout: effectiveLayout(),
+    showCloseButton: p.showCloseButton
+  });
+  return <div
+    class={cn(
+      "smwb-chat",
+      !p.embedded && `smwb-chat_${p.anchor}`,
+      p.embedded && "smwb-chat_embedded",
+      p.overlayContext && "smwb-chat_overlay-context",
+      p.class
+    )}
+    data-testid="chat"
+  >
+      <Show when={p.floatingTrigger && !p.embedded && !open()}>
+        <FloatingButton
+    class="smwb-chat__trigger"
+    aria-label={p.triggerLabel ?? "Open chat"}
+    data-testid="chat-trigger"
+    onClick={handleOpen}
+  >
+          <Show when={p.triggerIcon} fallback={<Icon name="chat" size={24} />}>
+            {p.triggerIcon}
+          </Show>
+        </FloatingButton>
+      </Show>
+      <ChatShell
+    layout={effectiveLayout()}
+    anchor={p.anchor}
+    themeMode={p.themeMode}
+    embedded={p.embedded}
+    overlayContext={p.overlayContext}
+    fileDropzoneRootProps={fileUpload.enabled() ? fileUpload.getRootProps() : void 0}
+    fileDropzoneActive={fileUpload.enabled() && fileUpload.isDragActive()}
+    header={<ChatHeader
+      title={p.headerTitle}
+      subtitle={p.headerSubtitle}
+      actions={p.headerActions}
+      layout={effectiveLayout() === "closed" ? layout() : effectiveLayout()}
+      allowedLayouts={allowedLayouts()}
+      onLayoutChange={handleLayoutChange}
+      onClose={closeButtonVisible() ? handleClose : void 0}
+    />}
+    footer={resolvedFooter()}
+  >
+        <ChatMessages
+    messages={p.messages}
+    showAvatars={p.showAvatars}
+    showAttachments={p.showAttachments}
+    showStatus={p.showStatus}
+    statusIcons={p.statusIcons}
+    renderStatus={p.renderStatus}
+    onLoadMore={p.onLoadMore}
+    hasMore={p.hasMore}
+    loading={p.loading}
+    loadingMore={p.loadingMore}
+    loadingSkeletonCount={p.loadingSkeletonCount}
+    renderMessage={p.renderMessage}
+  />
+      </ChatShell>
+    </div>;
+}
+var chat_default = Chat;
+export {
+  Chat,
+  chat_default as default
+};
+//# sourceMappingURL=chat.jsx.map

package/dist/source/components/dataDisplay/chat/chat.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chat/chat.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/chat/chat.entry.less\";\nimport { type JSX, type ParentProps, Show, createMemo, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { FloatingButton } from \"../../inputs/floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { ChatComposer } from \"./chatComposer\";\nimport { ChatHeader } from \"./chatHeader\";\nimport { ChatMessages } from \"./chatMessages\";\nimport { ChatShell } from \"./chatShell\";\nimport { createChatFileUpload } from \"./useChatFileUpload\";\nimport {\n  type ChatAnchor,\n  type ChatLayoutMode,\n  type ChatMessage,\n  type ChatMessageRenderContext,\n  type ChatThemeMode,\n  CHAT_EXPAND_LAYOUTS,\n} from \"./types\";\nimport { pickInitialLayout, resolveAllowedLayouts, shouldShowChatCloseButton } from \"./utils\";\n\nexport interface ChatProps extends ParentProps, Omit<ChatMessageRenderContext, \"showAvatars\" | \"showAttachments\"> {\n  class?: string | undefined;\n  messages: ChatMessage[];\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  headerTitle?: JSX.Element;\n  headerSubtitle?: JSX.Element;\n  headerActions?: JSX.Element;\n  footer?: JSX.Element;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  layout?: ChatLayoutMode | undefined;\n  defaultLayout?: ChatLayoutMode | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  open?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  floatingTrigger?: boolean | undefined;\n  triggerIcon?: JSX.Element;\n  triggerLabel?: string | undefined;\n  onLoadMore?: (() => void | Promise<void>) | undefined;\n  hasMore?: boolean | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  composerPlaceholder?: string | undefined;\n  composerDisabled?: boolean | undefined;\n  composerShiftEnterNewline?: boolean | undefined;\n  composerCtrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  onUploadFiles?: ((files: File[]) => void | Promise<void>) | undefined;\n  fileUploadAccept?: Record<string, string[]> | string | undefined;\n  fileUploadMaxFiles?: number | undefined;\n  attachAriaLabel?: string | undefined;\n  loading?: boolean | undefined;\n  loadingMore?: boolean | undefined;\n  loadingSkeletonCount?: number | undefined;\n  renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  showCloseButton?: boolean | undefined;\n}\n\nexport function Chat(props: ChatProps): JSX.Element {\n  const p = mergeProps(\n    {\n      showAvatars: false,\n      showAttachments: false,\n      anchor: \"bottom-right\" as const,\n      themeMode: \"inherit\" as const,\n      defaultOpen: false,\n      floatingTrigger: false,\n      composerPlaceholder: \"message\",\n      composerShiftEnterNewline: true,\n      composerCtrlEnterNewline: true,\n      fileUpload: false,\n      embedded: false,\n      overlayContext: false,\n      showStatus: false,\n    },\n    props\n  );\n\n  const allowedLayouts = createMemo(() => resolveAllowedLayouts(p.allowedLayouts ?? CHAT_EXPAND_LAYOUTS));\n\n  const [open, setOpen] = createControllableState<boolean>({\n    value: () => p.open,\n    defaultValue: p.defaultOpen,\n    onChange: p.onOpenChange,\n  });\n\n  const [layout, setLayout] = createControllableState<ChatLayoutMode>({\n    value: () => p.layout,\n    defaultValue: pickInitialLayout(allowedLayouts(), p.defaultLayout),\n    onChange: p.onLayoutChange,\n  });\n\n  const effectiveLayout = (): ChatLayoutMode =>\n    p.embedded ? \"fullHeight\" : p.floatingTrigger ? (open() ? layout() : \"closed\") : layout();\n\n  const handleOpen = (): void => {\n    setOpen(true);\n    if (layout() === \"closed\") {\n      setLayout(pickInitialLayout(allowedLayouts(), p.defaultLayout));\n    }\n  };\n\n  const handleClose = (): void => {\n    setOpen(false);\n  };\n\n  const handleLayoutChange = (next: ChatLayoutMode): void => {\n    setOpen(true);\n    setLayout(next);\n  };\n\n  const fileUpload = createChatFileUpload({\n    enabled: () => p.fileUpload,\n    accept: p.fileUploadAccept,\n    maxFiles: p.fileUploadMaxFiles,\n    onUploadFiles: p.onUploadFiles,\n    disabled: () => Boolean(p.composerDisabled),\n  });\n\n  const attachInputId = createId();\n\n  const showComposer = (): boolean => Boolean(p.onSendMessage) || fileUpload.enabled();\n\n  const fileInput = (): JSX.Element => (\n    <Show when={fileUpload.enabled()}>\n      <input {...fileUpload.getInputProps({ id: attachInputId })} data-testid=\"chat-file-input\" />\n    </Show>\n  );\n\n  const resolvedFooter = (): JSX.Element =>\n    p.footer ??\n    p.children ??\n    (showComposer() ? (\n      <>\n        {fileInput()}\n        <ChatComposer\n          onSendMessage={p.onSendMessage}\n          placeholder={p.composerPlaceholder}\n          disabled={p.composerDisabled}\n          shiftEnterNewline={p.composerShiftEnterNewline}\n          ctrlEnterNewline={p.composerCtrlEnterNewline}\n          fileUpload={fileUpload.enabled()}\n          attachInputId={fileUpload.enabled() ? attachInputId : undefined}\n          attachAriaLabel={p.attachAriaLabel}\n        />\n      </>\n    ) : undefined);\n\n  const closeButtonVisible = (): boolean =>\n    shouldShowChatCloseButton({\n      floatingTrigger: p.floatingTrigger,\n      embedded: p.embedded,\n      overlayContext: p.overlayContext,\n      effectiveLayout: effectiveLayout(),\n      showCloseButton: p.showCloseButton,\n    });\n\n  return (\n    <div\n      class={cn(\n        \"smwb-chat\",\n        !p.embedded && `smwb-chat_${p.anchor}`,\n        p.embedded && \"smwb-chat_embedded\",\n        p.overlayContext && \"smwb-chat_overlay-context\",\n        p.class\n      )}\n      data-testid=\"chat\"\n    >\n      <Show when={p.floatingTrigger && !p.embedded && !open()}>\n        <FloatingButton\n          class=\"smwb-chat__trigger\"\n          aria-label={p.triggerLabel ?? \"Open chat\"}\n          data-testid=\"chat-trigger\"\n          onClick={handleOpen}\n        >\n          <Show when={p.triggerIcon} fallback={<Icon name=\"chat\" size={24} />}>\n            {p.triggerIcon}\n          </Show>\n        </FloatingButton>\n      </Show>\n      <ChatShell\n        layout={effectiveLayout()}\n        anchor={p.anchor}\n        themeMode={p.themeMode}\n        embedded={p.embedded}\n        overlayContext={p.overlayContext}\n        fileDropzoneRootProps={fileUpload.enabled() ? fileUpload.getRootProps() : undefined}\n        fileDropzoneActive={fileUpload.enabled() && fileUpload.isDragActive()}\n        header={\n          <ChatHeader\n            title={p.headerTitle}\n            subtitle={p.headerSubtitle}\n            actions={p.headerActions}\n            layout={effectiveLayout() === \"closed\" ? layout() : effectiveLayout()}\n            allowedLayouts={allowedLayouts()}\n            onLayoutChange={handleLayoutChange}\n            onClose={closeButtonVisible() ? handleClose : undefined}\n          />\n        }\n        footer={resolvedFooter()}\n      >\n        <ChatMessages\n          messages={p.messages}\n          showAvatars={p.showAvatars}\n          showAttachments={p.showAttachments}\n          showStatus={p.showStatus}\n          statusIcons={p.statusIcons}\n          renderStatus={p.renderStatus}\n          onLoadMore={p.onLoadMore}\n          hasMore={p.hasMore}\n          loading={p.loading}\n          loadingMore={p.loadingMore}\n          loadingSkeletonCount={p.loadingSkeletonCount}\n          renderMessage={p.renderMessage}\n        />\n      </ChatShell>\n    </div>\n  );\n}\n\nexport default Chat;\n"],"mappings":"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","names":[],"file":"chat.jsx"}

package/dist/source/components/dataDisplay/chat/chatAttachmentImage.jsx

@@ -0,0 +1,53 @@
+import { Show, createSignal } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import cn from "clsx";
+import { createCssTransition } from "../../../primitives/createCssTransition";
+function ChatAttachmentImage(props) {
+  const [open, setOpen] = createSignal(false);
+  const transition = createCssTransition({
+    in: open,
+    timeout: { enter: 150, exit: 150 },
+    classNames: {
+      enterActive: "smwb-chat-attachment-image__overlay_enter-active",
+      enterDone: "smwb-chat-attachment-image__overlay_enter-done"
+    }
+  });
+  return <Show when={props.attachment.url}>
+      {(url) => <>
+          <button
+    type="button"
+    class={cn("smwb-chat-attachment-image", props.class)}
+    onClick={() => setOpen(true)}
+    data-testid="chat-attachment-image"
+    aria-label={props.attachment.name}
+  >
+            <img src={url()} alt={props.attachment.name} class="smwb-chat-attachment-image__img" />
+          </button>
+          <Show when={transition.mounted()}>
+            <Portal mount={isServer ? void 0 : document.body}>
+              <div
+    class={cn("smwb-chat-attachment-image__overlay", "smwb-dark", transition.classes())}
+    role="dialog"
+    aria-modal="true"
+    aria-label={props.attachment.name}
+    data-testid="chat-attachment-image-overlay"
+    onClick={() => setOpen(false)}
+  >
+                <img
+    src={url()}
+    alt={props.attachment.name}
+    class="smwb-chat-attachment-image__overlay-img"
+    onClick={(event) => event.stopPropagation()}
+  />
+              </div>
+            </Portal>
+          </Show>
+        </>}
+    </Show>;
+}
+var chatAttachmentImage_default = ChatAttachmentImage;
+export {
+  ChatAttachmentImage,
+  chatAttachmentImage_default as default
+};
+//# sourceMappingURL=chatAttachmentImage.jsx.map

package/dist/source/components/dataDisplay/chat/chatAttachmentImage.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chat/chatAttachmentImage.tsx"],"sourcesContent":["import { type JSX, Show, createSignal } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport type { ChatAttachment } from \"./types\";\n\nexport interface ChatAttachmentImageProps {\n  attachment: ChatAttachment;\n  class?: string | undefined;\n}\n\nexport function ChatAttachmentImage(props: ChatAttachmentImageProps): JSX.Element {\n  const [open, setOpen] = createSignal(false);\n\n  const transition = createCssTransition({\n    in: open,\n    timeout: { enter: 150, exit: 150 },\n    classNames: {\n      enterActive: \"smwb-chat-attachment-image__overlay_enter-active\",\n      enterDone: \"smwb-chat-attachment-image__overlay_enter-done\",\n    },\n  });\n\n  return (\n    <Show when={props.attachment.url}>\n      {(url) => (\n        <>\n          <button\n            type=\"button\"\n            class={cn(\"smwb-chat-attachment-image\", props.class)}\n            onClick={() => setOpen(true)}\n            data-testid=\"chat-attachment-image\"\n            aria-label={props.attachment.name}\n          >\n            <img src={url()} alt={props.attachment.name} class=\"smwb-chat-attachment-image__img\" />\n          </button>\n          <Show when={transition.mounted()}>\n            <Portal mount={(isServer ? undefined : document.body) as Node}>\n              <div\n                class={cn(\"smwb-chat-attachment-image__overlay\", \"smwb-dark\", transition.classes())}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={props.attachment.name}\n                data-testid=\"chat-attachment-image-overlay\"\n                onClick={() => setOpen(false)}\n              >\n                <img\n                  src={url()}\n                  alt={props.attachment.name}\n                  class=\"smwb-chat-attachment-image__overlay-img\"\n                  onClick={(event) => event.stopPropagation()}\n                />\n              </div>\n            </Portal>\n          </Show>\n        </>\n      )}\n    </Show>\n  );\n}\n\nexport default ChatAttachmentImage;\n"],"mappings":"AAAA,SAAmB,MAAM,oBAAoB;AAC7C,SAAS,QAAQ,gBAAgB;AACjC,OAAO,QAAQ;AACf,SAAS,2BAA2B;AAQ7B,SAAS,oBAAoB,OAA8C;AAChF,QAAM,CAAC,MAAM,OAAO,IAAI,aAAa,KAAK;AAE1C,QAAM,aAAa,oBAAoB;AAAA,IACrC,IAAI;AAAA,IACJ,SAAS,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,IACjC,YAAY;AAAA,MACV,aAAa;AAAA,MACb,WAAW;AAAA,IACb;AAAA,EACF,CAAC;AAED,SACE,CAAC,KAAK,MAAM,MAAM,WAAW,KAAK;AAAA,OAC/B,CAAC,QACA,EAAE;AAAA,UACA,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,GAAG,8BAA8B,MAAM,KAAK;AAAA,IACnD,SAAS,MAAM,QAAQ,IAAI;AAAA,IAC3B,YAAY;AAAA,IACZ,YAAY,MAAM,WAAW;AAAA,GAC9B;AAAA,YACC,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,WAAW,MAAM,MAAM,kCAAkC,EAAE;AAAA,UACzF,EARC,OAQQ;AAAA,UACT,CAAC,KAAK,MAAM,WAAW,QAAQ,GAAG;AAAA,YAChC,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,MAAe;AAAA,cAC7D,CAAC;AAAA,IACC,OAAO,GAAG,uCAAuC,aAAa,WAAW,QAAQ,CAAC;AAAA,IAClF,KAAK;AAAA,IACL,WAAW;AAAA,IACX,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,KAAK;AAAA,GAC7B;AAAA,gBACC,CAAC;AAAA,IACC,KAAK,IAAI;AAAA,IACT,KAAK,MAAM,WAAW;AAAA,IACtB,MAAM;AAAA,IACN,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,EAC5C,EAAE;AAAA,cACJ,EAdC,IAcK;AAAA,YACR,EAhBC,OAgBQ;AAAA,UACX,EAlBC,KAkBM;AAAA,QACT,IACA;AAAA,IACJ,EAjCC;AAmCL;AAEA,IAAO,8BAAQ;","names":[],"file":"chatAttachmentImage.jsx"}

package/dist/source/components/dataDisplay/chat/chatAttachments.jsx

@@ -0,0 +1,35 @@
+import { For, Show } from "solid-js";
+import cn from "clsx";
+import { isImageAttachment } from "./utils";
+import { ChatAttachmentImage } from "./chatAttachmentImage";
+function ChatAttachments(props) {
+  const enabled = () => props.enabled ?? true;
+  const visible = () => enabled() && Boolean(props.attachments?.length);
+  return <Show when={visible()}>
+      <div class={cn("smwb-chat-attachments", props.class)} data-testid="chat-attachments">
+        <For each={props.attachments}>
+          {(attachment) => <Show
+    when={isImageAttachment(attachment)}
+    fallback={<a
+      class="smwb-chat-attachments__file"
+      href={attachment.url}
+      download={attachment.name}
+      target="_blank"
+      rel="noreferrer"
+      data-testid="chat-attachment-file"
+    >
+                  {attachment.name}
+                </a>}
+  >
+              <ChatAttachmentImage attachment={attachment} />
+            </Show>}
+        </For>
+      </div>
+    </Show>;
+}
+var chatAttachments_default = ChatAttachments;
+export {
+  ChatAttachments,
+  chatAttachments_default as default
+};
+//# sourceMappingURL=chatAttachments.jsx.map

package/dist/source/components/dataDisplay/chat/chatAttachments.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chat/chatAttachments.tsx"],"sourcesContent":["import { type JSX, For, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport type { ChatAttachment } from \"./types\";\nimport { isImageAttachment } from \"./utils\";\nimport { ChatAttachmentImage } from \"./chatAttachmentImage\";\n\nexport interface ChatAttachmentsProps {\n  attachments?: ChatAttachment[] | undefined;\n  class?: string | undefined;\n  enabled?: boolean | undefined;\n}\n\nexport function ChatAttachments(props: ChatAttachmentsProps): JSX.Element {\n  const enabled = (): boolean => props.enabled ?? true;\n  const visible = (): boolean => enabled() && Boolean(props.attachments?.length);\n\n  return (\n    <Show when={visible()}>\n      <div class={cn(\"smwb-chat-attachments\", props.class)} data-testid=\"chat-attachments\">\n        <For each={props.attachments}>\n          {(attachment) => (\n            <Show\n              when={isImageAttachment(attachment)}\n              fallback={\n                <a\n                  class=\"smwb-chat-attachments__file\"\n                  href={attachment.url}\n                  download={attachment.name}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  data-testid=\"chat-attachment-file\"\n                >\n                  {attachment.name}\n                </a>\n              }\n            >\n              <ChatAttachmentImage attachment={attachment} />\n            </Show>\n          )}\n        </For>\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatAttachments;\n"],"mappings":"AAAA,SAAmB,KAAK,YAAY;AACpC,OAAO,QAAQ;AAEf,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAQ7B,SAAS,gBAAgB,OAA0C;AACxE,QAAM,UAAU,MAAe,MAAM,WAAW;AAChD,QAAM,UAAU,MAAe,QAAQ,KAAK,QAAQ,MAAM,aAAa,MAAM;AAE7E,SACE,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,MACrB,CAAC,IAAI,OAAO,GAAG,yBAAyB,MAAM,KAAK,GAAG,YAAY,mBAAmB;AAAA,QACnF,CAAC,IAAI,MAAM,MAAM,aAAa;AAAA,WAC3B,CAAC,eACA,CAAC;AAAA,IACC,MAAM,kBAAkB,UAAU;AAAA,IAClC,UACE,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM,WAAW;AAAA,MACjB,UAAU,WAAW;AAAA,MACrB,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,YAAY;AAAA,KACb;AAAA,mBACE,WAAW,KAAK;AAAA,gBACnB,EATC;AAAA,GAWJ;AAAA,cACC,CAAC,oBAAoB,YAAY,YAAY,EAAE;AAAA,YACjD,EAhBC,MAiBD;AAAA,QACJ,EApBC,IAoBK;AAAA,MACR,EAtBC,IAsBK;AAAA,IACR,EAxBC;AA0BL;AAEA,IAAO,0BAAQ;","names":[],"file":"chatAttachments.jsx"}

package/dist/source/components/dataDisplay/chat/chatComposer.jsx

@@ -0,0 +1,170 @@
+import { Show, createSignal, mergeProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { TextField } from "../../inputs/textField";
+import { TextFieldWrapper } from "../../inputs/textField/textFieldWrapper";
+import { ChatIconButton } from "./chatIconButton";
+import { createId } from "../../../primitives/createId";
+import { shouldComposerNewlineOnEnter } from "./utils";
+function stopPropagation(event) {
+  event.stopPropagation();
+}
+function insertNewlineAtCursor(element, value, setValue) {
+  const start = element.selectionStart ?? value.length;
+  const end = element.selectionEnd ?? value.length;
+  const nextValue = `${value.slice(0, start)}
+${value.slice(end)}`;
+  setValue(nextValue);
+  requestAnimationFrame(() => {
+    element.selectionStart = start + 1;
+    element.selectionEnd = start + 1;
+  });
+}
+function ChatComposer(props) {
+  const merged = mergeProps(
+    {
+      placeholder: "message",
+      disabled: false,
+      sendAriaLabel: "Send message",
+      shiftEnterNewline: true,
+      ctrlEnterNewline: true,
+      fileUpload: false,
+      attachAriaLabel: "Attach file"
+    },
+    props
+  );
+  const [value, setValue] = createSignal("");
+  const [isFocused, setIsFocused] = createSignal(false);
+  const inputId = createId();
+  let textareaRef;
+  const multiline = () => merged.shiftEnterNewline || merged.ctrlEnterNewline;
+  const canSend = () => Boolean(merged.onSendMessage) && value().trim().length > 0 && !merged.disabled;
+  const showAttach = () => merged.fileUpload && Boolean(merged.attachInputId || merged.onAttachClick);
+  const handleSend = () => {
+    if (!merged.onSendMessage) return;
+    const text = value().trim();
+    if (!text || merged.disabled) return;
+    void merged.onSendMessage(text);
+    setValue("");
+  };
+  const handleKeyDown = (event) => {
+    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline: merged.shiftEnterNewline, ctrlEnterNewline: merged.ctrlEnterNewline })) {
+      if (event.currentTarget instanceof HTMLTextAreaElement) {
+        event.preventDefault();
+        insertNewlineAtCursor(event.currentTarget, value(), setValue);
+      }
+      return;
+    }
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    handleSend();
+  };
+  const attachClass = () => cn("smwb-chat-icon-button", "smwb-chat-icon-button_edge-start", merged.disabled && "smwb-chat-icon-button_disabled");
+  const attachButton = () => <Show when={showAttach()}>
+      <Show
+    when={merged.attachInputId}
+    fallback={<ChatIconButton
+      edge="start"
+      aria-label={merged.attachAriaLabel}
+      data-testid="chat-composer-attach"
+      disabled={merged.disabled}
+      onClick={() => merged.onAttachClick?.()}
+      onMouseDown={stopPropagation}
+    >
+            <Icon name="attach_file" size={24} />
+          </ChatIconButton>}
+  >
+        {(id) => <label
+    for={merged.disabled ? void 0 : id()}
+    class={attachClass()}
+    aria-label={merged.attachAriaLabel}
+    aria-disabled={merged.disabled || void 0}
+    data-testid="chat-composer-attach"
+    onMouseDown={stopPropagation}
+  >
+            <Icon name="attach_file" size={24} />
+          </label>}
+      </Show>
+    </Show>;
+  const sendButton = () => <Show when={merged.onSendMessage}>
+      <ChatIconButton
+    edge="end"
+    color="primary"
+    aria-label={merged.sendAriaLabel}
+    data-testid="chat-composer-send"
+    disabled={!canSend()}
+    onClick={handleSend}
+    onMouseDown={stopPropagation}
+  >
+        <Icon name="send" size={24} />
+      </ChatIconButton>
+    </Show>;
+  const onHolderMouseDown = (event) => {
+    if (textareaRef && event.currentTarget === event.target) {
+      event.preventDefault();
+      textareaRef.focus();
+    }
+  };
+  return <Show
+    when={!(showAttach() && !merged.onSendMessage)}
+    fallback={<div class={cn("smwb-chat-composer", "smwb-chat-composer_attach-only", merged.class)} data-testid="chat-composer">
+          {attachButton()}
+        </div>}
+  >
+      <Show
+    when={multiline()}
+    fallback={<TextField
+      class={cn("smwb-chat-composer", merged.class)}
+      data-testid="chat-composer"
+      fullWidth
+      value={value()}
+      disabled={merged.disabled}
+      placeholder={merged.placeholder}
+      onChange={(event) => setValue(event.currentTarget.value)}
+      startAdornment={attachButton()}
+      endAdornment={sendButton()}
+      onKeyDown={handleKeyDown}
+    />}
+  >
+        <TextFieldWrapper
+    class={cn("smwb-chat-composer", merged.class)}
+    data-testid="chat-composer"
+    fullWidth
+    disabled={merged.disabled}
+    isFilledState={value().length > 0}
+    isFocused={isFocused()}
+    for={inputId}
+    shrink={Boolean(merged.attachInputId || merged.onAttachClick) && showAttach()}
+    onHolderMouseDown={onHolderMouseDown}
+    startAdornment={attachButton()}
+    endAdornment={sendButton()}
+  >
+          <textarea
+    id={inputId}
+    ref={(el) => textareaRef = el}
+    class={cn(
+      "smwb-text-field__input",
+      "smwb-chat-composer__input",
+      "smwb-text-field__input--show-placeholder",
+      showAttach() && "smwb-text-field__input--adornment-start",
+      merged.onSendMessage && "smwb-text-field__input--adornment-end"
+    )}
+    value={value()}
+    disabled={merged.disabled}
+    placeholder={merged.placeholder}
+    rows={1}
+    onInput={(event) => setValue(event.currentTarget.value)}
+    onFocus={() => setIsFocused(true)}
+    onBlur={() => setIsFocused(false)}
+    onKeyDown={handleKeyDown}
+  />
+        </TextFieldWrapper>
+      </Show>
+    </Show>;
+}
+var chatComposer_default = ChatComposer;
+export {
+  ChatComposer,
+  chatComposer_default as default
+};
+//# sourceMappingURL=chatComposer.jsx.map

package/dist/source/components/dataDisplay/chat/chatComposer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"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","names":[],"file":"chatComposer.jsx"}

package/dist/source/components/dataDisplay/chat/chatHeader.jsx

@@ -0,0 +1,55 @@
+import { For, Show } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { ChatIconButton } from "./chatIconButton";
+import { getChatLayoutActions } from "./utils";
+const layoutIcons = {
+  floating: "picture_in_picture",
+  fullHeight: "fit_screen",
+  fullscreen: "open_in_full"
+};
+const layoutAriaLabels = {
+  floating: "Floating window",
+  fullHeight: "Full height",
+  fullscreen: "Fullscreen"
+};
+function ChatHeader(props) {
+  const layoutActions = () => getChatLayoutActions(props.allowedLayouts ?? ["floating"], props.layout);
+  const showLayoutActions = () => Boolean(props.onLayoutChange) && layoutActions().length > 0;
+  return <div class={cn("smwb-chat-header", props.class)} data-testid="chat-header">
+      <div class="smwb-chat-header__main">
+        <Show when={props.title}>
+          <div class="smwb-chat-header__title">{props.title}</div>
+        </Show>
+        <Show when={props.subtitle}>
+          <div class="smwb-chat-header__subtitle">{props.subtitle}</div>
+        </Show>
+      </div>
+      <div class="smwb-chat-header__actions">
+        {props.actions}
+        <Show when={showLayoutActions()}>
+          <For each={layoutActions()}>
+            {(mode) => <ChatIconButton
+    aria-pressed={props.layout === mode}
+    aria-label={layoutAriaLabels[mode]}
+    data-testid={`chat-layout-${mode}`}
+    onClick={() => props.onLayoutChange?.(mode)}
+  >
+                <Icon name={layoutIcons[mode]} size={18} />
+              </ChatIconButton>}
+          </For>
+        </Show>
+        <Show when={props.onClose}>
+          <ChatIconButton aria-label="Close chat" data-testid="chat-close" onClick={() => props.onClose?.()}>
+            <Icon name="close" size={18} />
+          </ChatIconButton>
+        </Show>
+      </div>
+    </div>;
+}
+var chatHeader_default = ChatHeader;
+export {
+  ChatHeader,
+  chatHeader_default as default
+};
+//# sourceMappingURL=chatHeader.jsx.map

package/dist/source/components/dataDisplay/chat/chatHeader.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,SAAmB,KAAK,YAAY;AACpC,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAE/B,SAAS,4BAA4B;AAarC,MAAM,cAAiE;AAAA,EACrE,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,MAAM,mBAAsE;AAAA,EAC1E,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,SAAS,WAAW,OAAqC;AAC9D,QAAM,gBAAgB,MACpB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU,GAAG,MAAM,MAAM;AACzE,QAAM,oBAAoB,MAAe,QAAQ,MAAM,cAAc,KAAK,cAAc,EAAE,SAAS;AAEnG,SACE,CAAC,IAAI,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG,YAAY,cAAc;AAAA,MACzE,CAAC,IAAI,MAAM,yBAAyB;AAAA,QAClC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,IAAI,MAAM,2BAA2B,MAAM,MAAM,EAAjD,IAAuD;AAAA,QAC1D,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,IAAI,MAAM,8BAA8B,MAAM,SAAS,EAAvD,IAA6D;AAAA,QAChE,EAFC,KAEM;AAAA,MACT,EAPC,IAOK;AAAA,MACN,CAAC,IAAI,MAAM,4BAA4B;AAAA,SACpC,MAAM,QAAQ;AAAA,QACf,CAAC,KAAK,MAAM,kBAAkB,GAAG;AAAA,UAC/B,CAAC,IAAI,MAAM,cAAc,GAAG;AAAA,aACzB,CAAC,SACA,CAAC;AAAA,IACC,cAAc,MAAM,WAAW;AAAA,IAC/B,YAAY,iBAAiB,IAAI;AAAA,IACjC,aAAa,eAAe,IAAI;AAAA,IAChC,SAAS,MAAM,MAAM,iBAAiB,IAAI;AAAA,GAC3C;AAAA,gBACC,CAAC,KAAK,MAAM,YAAY,IAAI,GAAG,MAAM,IAAI,EAAE;AAAA,cAC7C,EAPC,gBAQD;AAAA,UACJ,EAXC,IAWK;AAAA,QACR,EAbC,KAaM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,UACzB,CAAC,eAAe,WAAW,aAAa,YAAY,aAAa,SAAS,MAAM,MAAM,UAAU,GAAG;AAAA,YACjG,CAAC,KAAK,KAAK,QAAQ,MAAM,IAAI,EAAE;AAAA,UACjC,EAFC,eAEgB;AAAA,QACnB,EAJC,KAIM;AAAA,MACT,EArBC,IAqBK;AAAA,IACR,EA/BC;AAiCL;AAEA,IAAO,qBAAQ;","names":[],"file":"chatHeader.jsx"}

package/dist/source/components/dataDisplay/chat/chatIconButton.jsx

@@ -0,0 +1,38 @@
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Ripple } from "../../base/ripple";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function ChatIconButton(props) {
+  const merged = mergeProps({ color: "default" }, props);
+  const [local, rest] = splitProps(merged, ["class", "children", "disabled", "edge", "color", "ref"]);
+  let rippleActions;
+  const onPointerDown = (event) => {
+    if (!local.disabled) rippleActions?.onRipple(event);
+  };
+  return <button
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    type="button"
+    class={cn(
+      "smwb-chat-icon-button",
+      local.edge === "start" && "smwb-chat-icon-button_edge-start",
+      local.edge === "end" && "smwb-chat-icon-button_edge-end",
+      local.color === "primary" && "smwb-chat-icon-button_primary",
+      local.disabled && "smwb-chat-icon-button_disabled",
+      local.class
+    )}
+    disabled={local.disabled}
+    onPointerDown={onPointerDown}
+  >
+      {local.children}
+      <Show when={!local.disabled}>
+        <Ripple actionRef={(actions) => rippleActions = actions} center />
+      </Show>
+    </button>;
+}
+var chatIconButton_default = ChatIconButton;
+export {
+  ChatIconButton,
+  chatIconButton_default as default
+};
+//# sourceMappingURL=chatIconButton.jsx.map

package/dist/source/components/dataDisplay/chat/chatIconButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AAQ7B,SAAS,eAAe,OAAsD;AACnF,QAAM,SAAS,WAAW,EAAE,OAAO,UAAmB,GAAG,KAAK;AAC9D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,YAAY,YAAY,QAAQ,SAAS,KAAK,CAAC;AAElG,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM,SAAS,WAAW;AAAA,MAC1B,MAAM,SAAS,SAAS;AAAA,MACxB,MAAM,UAAU,aAAa;AAAA,MAC7B,MAAM,YAAY;AAAA,MAClB,MAAM;AAAA,IACR;AAAA,IACA,UAAU,MAAM;AAAA,IAChB,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,EAnBC;AAqBL;AAEA,IAAO,yBAAQ;","names":[],"file":"chatIconButton.jsx"}