@pushwoosh/dumb-components 1.1.211 → 1.1.213

package/RadioCard/RadioCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { H4, Paragraph } from '@pushwoosh/kit-typography';
 import { Radio } from '../Radio';
+import { TooltipTrigger } from '../Tooltip';
 import { RootBox } from './styled';
 /**
  * Selectable card with a title, optional description and a radio indicator — a richer
@@ -14,23 +15,37 @@ export function RadioCard(props) {
   const {
     title,
     description,
+    titleTooltip,
     width = '262px',
     isActive,
+    isDisabled,
     onClick,
     children
   } = props;
   return _jsxs(RootBox, {
     "$width": width,
     isActive: isActive,
-    onClick: onClick,
+    isDisabled: isDisabled,
+    onClick: isDisabled ? undefined : onClick,
     children: [_jsxs(Vertical, {
+      "$gap": 0,
       children: [_jsxs(Horizontal, {
         "$alignItems": "center",
         "$justifyContent": "space-between",
-        children: [_jsx(H4, {
-          children: title
+        children: [_jsxs(Horizontal, {
+          "$alignItems": "center",
+          "$gap": 4,
+          children: [_jsx(H4, {
+            children: title
+          }), titleTooltip && _jsx(TooltipTrigger, {
+            content: titleTooltip,
+            position: "top-middle",
+            view: "question"
+          })]
         }), _jsx(Radio, {
-          isChecked: isActive
+          isChecked: isActive,
+          isDisabled: isDisabled,
+          size: "compact"
         })]
       }), description && _jsx(Paragraph, {
         children: description

package/RadioCard/styled.d.ts

@@ -18,5 +18,6 @@ export declare const RootBox: import("styled-components").StyledComponent<"div",
     $gap: number;
 } & {
     isActive?: boolean;
+    isDisabled?: boolean;
     $width: string | number;
 }, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$padding" | "$alignItems" | "$gap">;

package/RadioCard/styled.js

@@ -6,12 +6,20 @@ export const RootBox = styled(Vertical).attrs({
   $alignItems: 'start',
   $bgColor: Color.CLEAR,
   $borderRadius: ShapeRadius.SECTION,
-  $gap: 12
+  $gap: 0
 }).withConfig({
   displayName: "RootBox",
   componentId: "sc-tkztr1-0"
-})(["width:", ";height:100%;box-sizing:border-box;outline:", ";cursor:pointer;&:hover{background:", ";}"], ({
+})(["width:", ";height:100%;box-sizing:border-box;outline:", ";cursor:", ";opacity:", ";pointer-events:", ";&:hover{background:", ";}"], ({
   $width
 }) => toCssValue($width), ({
   isActive
-}) => isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`, Color.ROW_HOVER);
+}) => isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`, ({
+  isDisabled
+}) => isDisabled ? 'default' : 'pointer', ({
+  isDisabled
+}) => isDisabled ? 0.5 : 1, ({
+  isDisabled
+}) => isDisabled ? 'none' : 'auto', ({
+  isDisabled
+}) => isDisabled ? Color.CLEAR : Color.ROW_HOVER);

package/RadioCard/types.d.ts

@@ -5,10 +5,14 @@ export interface RadioCardProps {
     title: string;
     /** Supporting text under the title. */
     description?: string;
+    /** Help tooltip shown via a question-mark icon next to the title. */
+    titleTooltip?: ReactNode;
     /** CSS width of the card (default `"262px"`). */
     width?: string | number;
     /** Whether this card is the selected one (drives the radio + active styling). */
     isActive?: boolean;
+    /** Dim the card and ignore clicks. */
+    isDisabled?: boolean;
     /** Extra content rendered below the description. */
     children?: ReactNode;
     /** Fires when the card is clicked. */

package/WhatsAppPreview/WhatsAppPreview.js

@@ -7,6 +7,7 @@ import { WhatsAppDateChip } from './components/WhatsAppDateChip';
 import { WhatsAppMessageBubble } from './components/WhatsAppMessageBubble';
 import { WhatsAppStatusBar } from './components/WhatsAppStatusBar';
 import { WHATSAPP_COLOR, WHATSAPP_PREVIEW_HEIGHT, WHATSAPP_PREVIEW_WIDTH, WHATSAPP_STATUS_BAR_TIME } from './constants';
+import { isMessageDrawable } from './helpers';
 import { WhatsAppWallpaperPattern } from './icons';
 import { Lang } from './polyglot';
 import { DeviceBox, WallpaperImage, WallpaperLayer } from './styles';
@@ -26,6 +27,7 @@ export function WhatsAppPreview(props) {
     height = WHATSAPP_PREVIEW_HEIGHT,
     isLoading = false
   } = props;
+  const drawnMessages = messages.filter(isMessageDrawable);
   const separator = dateLabel === undefined ? _jsx(Lang, {
     message: "DUMB.WHATSAPP_PREVIEW.TODAY"
   }) : dateLabel;
@@ -63,7 +65,7 @@ export function WhatsAppPreview(props) {
             color: Color.LOCKED,
             size: "medium"
           })
-        }), !isLoading && messages.length === 0 && _jsx(Horizontal, {
+        }), !isLoading && drawnMessages.length === 0 && _jsx(Horizontal, {
           "$alignItems": "center",
           "$inset": 0,
           "$justifyContent": "center",
@@ -76,7 +78,7 @@ export function WhatsAppPreview(props) {
               message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
             })
           })
-        }), !isLoading && messages.length > 0 && _jsx(Vertical, {
+        }), !isLoading && drawnMessages.length > 0 && _jsx(Vertical, {
           "$inset": 0,
           "$overflowY": "auto",
           "$position": "absolute",
@@ -92,7 +94,7 @@ export function WhatsAppPreview(props) {
             },
             children: [separator && _jsx(WhatsAppDateChip, {
               children: separator
-            }), messages.map((message, index) => _jsx(WhatsAppMessageBubble, {
+            }), drawnMessages.map((message, index) => _jsx(WhatsAppMessageBubble, {
               message: message
             }, message.id ?? index))]
           })

package/WhatsAppPreview/__tests__/attachment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/WhatsAppPreview/__tests__/attachment.test.js

@@ -0,0 +1,97 @@
+import { formatAttachmentDuration, formatAttachmentSize, getAttachmentExtension, isMessageDrawable, resolveAttachmentKind, toVideoPosterSource } from '../helpers';
+const SOURCE = 'data:image/jpeg;base64,AAAA';
+describe('resolveAttachmentKind', () => {
+  it('reads the MIME type first', () => {
+    expect(resolveAttachmentKind({
+      name: 'a.pdf',
+      source: SOURCE,
+      mimeType: 'image/png'
+    })).toBe('image');
+    expect(resolveAttachmentKind({
+      name: 'a',
+      source: SOURCE,
+      mimeType: 'video/mp4'
+    })).toBe('video');
+  });
+  it('falls back to the extension', () => {
+    expect(resolveAttachmentKind({
+      name: 'store.JPG',
+      source: SOURCE
+    })).toBe('image');
+    expect(resolveAttachmentKind({
+      name: 'tour.mp4',
+      source: SOURCE
+    })).toBe('video');
+    expect(resolveAttachmentKind({
+      name: 'terms.docx',
+      source: SOURCE
+    })).toBe('document');
+  });
+  it('treats an unknown file as a document', () => {
+    expect(resolveAttachmentKind({
+      name: 'notes',
+      source: SOURCE
+    })).toBe('document');
+  });
+  it('obeys an explicit kind', () => {
+    expect(resolveAttachmentKind({
+      name: 'a.png',
+      source: SOURCE,
+      kind: 'document',
+      mimeType: 'image/png'
+    })).toBe('document');
+  });
+});
+describe('attachment meta', () => {
+  it('reads the extension off the name', () => {
+    expect(getAttachmentExtension({
+      name: 'Price list.pdf',
+      source: SOURCE
+    })).toBe('pdf');
+    expect(getAttachmentExtension({
+      name: 'notes',
+      source: SOURCE
+    })).toBe('');
+  });
+  it('writes sizes the way WhatsApp does', () => {
+    expect(formatAttachmentSize(912)).toBe('912 B');
+    expect(formatAttachmentSize(69_632)).toBe('68 kB');
+    expect(formatAttachmentSize(1_468_006)).toBe('1.4 MB');
+  });
+  it('writes video length as m:ss', () => {
+    expect(formatAttachmentDuration(6.2)).toBe('0:06');
+    expect(formatAttachmentDuration(75)).toBe('1:15');
+  });
+  it('asks the video for a poster frame once', () => {
+    expect(toVideoPosterSource('blob:tour')).toBe('blob:tour#t=0.001');
+    expect(toVideoPosterSource('blob:tour#t=2')).toBe('blob:tour#t=2');
+  });
+});
+describe('isMessageDrawable', () => {
+  it('keeps a message that has a body or a file', () => {
+    expect(isMessageDrawable({
+      direction: 'incoming',
+      text: 'hi'
+    })).toBe(true);
+    expect(isMessageDrawable({
+      direction: 'incoming',
+      attachment: {
+        name: 'a.jpg',
+        source: SOURCE
+      }
+    })).toBe(true);
+  });
+  it('drops a message with nothing to show', () => {
+    expect(isMessageDrawable({
+      direction: 'incoming',
+      time: '11:06'
+    })).toBe(false);
+    expect(isMessageDrawable({
+      direction: 'incoming',
+      attachment: {
+        name: 'a.jpg',
+        source: ''
+      }
+    })).toBe(false);
+  });
+});

package/WhatsAppPreview/components/WhatsAppAttachment/WhatsAppAttachment.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { WhatsAppAttachmentProps } from './types';
+/** Draws an attached file inside a chat bubble: image, video with its play badge, or a document card. */
+export declare function WhatsAppAttachment(props: WhatsAppAttachmentProps): ReactElement;

package/WhatsAppPreview/components/WhatsAppAttachment/WhatsAppAttachment.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { DocumentBox, DocumentGlyph, MediaBox, MediaDuration, MediaMeta, MediaOverlay, PlayButton, PlayGlyph } from './styles';
+import { WHATSAPP_COLOR } from '../../constants';
+import { formatAttachmentDuration, formatAttachmentSize, getAttachmentExtension, resolveAttachmentKind, toVideoPosterSource } from '../../helpers';
+import { WhatsAppDocumentIcon, WhatsAppPlayIcon, WhatsAppVideoIcon } from '../../icons';
+const DOCUMENT_GLYPH_COLOR = {
+  pdf: WHATSAPP_COLOR.DOCUMENT_PDF,
+  doc: WHATSAPP_COLOR.DOCUMENT_TEXT,
+  docx: WHATSAPP_COLOR.DOCUMENT_TEXT
+};
+/** Draws an attached file inside a chat bubble: image, video with its play badge, or a document card. */
+export function WhatsAppAttachment(props) {
+  const {
+    attachment,
+    meta,
+    hasCaption = false
+  } = props;
+  const {
+    name,
+    source,
+    size,
+    duration
+  } = attachment;
+  const [readDuration, setReadDuration] = useState(null);
+  const kind = resolveAttachmentKind(attachment);
+  const extension = getAttachmentExtension(attachment);
+  const handleLoadedMetadata = useCallback(event => {
+    const {
+      duration: length
+    } = event.currentTarget;
+    setReadDuration(Number.isFinite(length) ? length : null);
+  }, []);
+  if (kind === 'document') {
+    const meaning = [size === undefined ? '' : formatAttachmentSize(size), extension].filter(Boolean);
+    return _jsxs(DocumentBox, {
+      "$hasCaption": hasCaption,
+      children: [_jsx(DocumentGlyph, {
+        "$color": DOCUMENT_GLYPH_COLOR[extension] ?? WHATSAPP_COLOR.DOCUMENT_GENERIC,
+        children: _jsx(WhatsAppDocumentIcon, {})
+      }), _jsxs(Vertical, {
+        "$gap": 1,
+        "$minWidth": 0,
+        children: [_jsx(Text, {
+          "$color": WHATSAPP_COLOR.BUBBLE_TEXT,
+          "$ellipsis": true,
+          "$variant": "standard",
+          children: name
+        }), meaning.length > 0 && _jsx(Text, {
+          "$color": WHATSAPP_COLOR.BUBBLE_META,
+          "$variant": "footnote",
+          children: meaning.join(' · ')
+        })]
+      })]
+    });
+  }
+  const length = duration ?? readDuration;
+  const isVideo = kind === 'video';
+  return _jsxs(MediaBox, {
+    "$hasCaption": hasCaption,
+    children: [isVideo ? _jsx("video", {
+      muted: true,
+      playsInline: true,
+      onLoadedMetadata: handleLoadedMetadata,
+      preload: "metadata",
+      src: toVideoPosterSource(source)
+    }) : _jsx("img", {
+      alt: name,
+      src: source
+    }), isVideo && _jsx(PlayButton, {
+      children: _jsx(PlayGlyph, {
+        children: _jsx(WhatsAppPlayIcon, {})
+      })
+    }), (isVideo || meta) && _jsxs(MediaOverlay, {
+      children: [isVideo ? _jsxs(MediaDuration, {
+        children: [_jsx(WhatsAppVideoIcon, {}), length === null ? null : formatAttachmentDuration(length)]
+      }) : _jsx("span", {}), _jsx(MediaMeta, {
+        children: meta
+      })]
+    })]
+  });
+}

package/WhatsAppPreview/components/WhatsAppAttachment/index.d.ts

@@ -0,0 +1 @@
+export { WhatsAppAttachment } from './WhatsAppAttachment';

package/WhatsAppPreview/components/WhatsAppAttachment/index.js

@@ -0,0 +1 @@
+export { WhatsAppAttachment } from './WhatsAppAttachment';

package/WhatsAppPreview/components/WhatsAppAttachment/styles.d.ts

@@ -0,0 +1,132 @@
+export declare const MediaBox: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $position: string;
+    $bgColor: "#0B141A";
+} & {
+    $hasCaption: boolean;
+}, "$gridAutoFlow" | "$bgColor" | "$position">;
+export declare const PlayButton: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $position: string;
+    $inset: number;
+}, "$gridAutoFlow" | "$inset" | "$position" | "$alignItems" | "$justifyContent">;
+export declare const PlayGlyph: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $width: number;
+    $height: number;
+    $borderRadius: string;
+    $bgColor: "rgba(255, 255, 255, 0.85)";
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$height" | "$width" | "$alignItems" | "$justifyContent">;
+export declare const MediaOverlay: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $sizes: import("@pushwoosh/kit-helpers/styled-helpers").StrNum;
+} & {
+    $alignItems: string;
+    $gap: number;
+    $sizes: string;
+    $padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, "$padding" | "$alignItems" | "$gap" | "$sizes">;
+export declare const MediaDuration: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $variant: "footnote";
+    $color: "#FFFFFF";
+}, "$color" | "$variant">;
+export declare const MediaMeta: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $justifyContent: string;
+}, "$gridAutoFlow" | "$justifyContent">;
+export declare const DocumentBox: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $sizes: import("@pushwoosh/kit-helpers/styled-helpers").StrNum;
+} & {
+    $alignItems: string;
+    $gap: number;
+    $sizes: string;
+    $padding: string;
+    $bgColor: "#F5F6F6";
+} & {
+    $hasCaption: boolean;
+}, "$bgColor" | "$padding" | "$alignItems" | "$gap" | "$sizes">;
+export declare const DocumentGlyph: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $color: string;
+}, "$gridAutoFlow">;

package/WhatsAppPreview/components/WhatsAppAttachment/styles.js

@@ -0,0 +1,77 @@
+import styled, { css } from 'styled-components';
+import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { WHATSAPP_COLOR, WHATSAPP_MEDIA_MAX_HEIGHT } from '../../constants';
+const bubbleInset = css(["margin:-3px -5px ", ";border-radius:6px;overflow:hidden;"], ({
+  $hasCaption
+}) => $hasCaption ? '5px' : '-4px');
+export const MediaBox = styled(Vertical).attrs({
+  $position: 'relative',
+  $bgColor: WHATSAPP_COLOR.MEDIA_BACKDROP
+}).withConfig({
+  displayName: "MediaBox",
+  componentId: "sc-1uezfps-0"
+})(["", " img,video{display:block;width:100%;max-height:", "px;object-fit:cover;}"], bubbleInset, WHATSAPP_MEDIA_MAX_HEIGHT);
+export const PlayButton = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'center',
+  $position: 'absolute',
+  $inset: 0
+}).withConfig({
+  displayName: "PlayButton",
+  componentId: "sc-1uezfps-1"
+})(["pointer-events:none;"]);
+export const PlayGlyph = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'center',
+  $width: 44,
+  $height: 44,
+  $borderRadius: '50%',
+  $bgColor: WHATSAPP_COLOR.PLAY_BUTTON
+}).withConfig({
+  displayName: "PlayGlyph",
+  componentId: "sc-1uezfps-2"
+})(["color:", ";svg{display:block;margin-left:3px;}"], WHATSAPP_COLOR.PLAY_GLYPH);
+export const MediaOverlay = styled(Columns).attrs({
+  $alignItems: 'end',
+  $gap: 8,
+  $sizes: 'auto minmax(0, 1fr)',
+  $padding: {
+    top: 24,
+    right: 8,
+    bottom: 5,
+    left: 8
+  }
+}).withConfig({
+  displayName: "MediaOverlay",
+  componentId: "sc-1uezfps-3"
+})(["position:absolute;right:0;bottom:0;left:0;background:linear-gradient(to top,", ",transparent);pointer-events:none;"], WHATSAPP_COLOR.MEDIA_SCRIM);
+export const MediaDuration = styled(Text).attrs({
+  $variant: 'footnote',
+  $color: WHATSAPP_COLOR.MEDIA_META
+}).withConfig({
+  displayName: "MediaDuration",
+  componentId: "sc-1uezfps-4"
+})(["display:inline-flex;align-items:center;gap:4px;svg{display:block;}"]);
+export const MediaMeta = styled(Horizontal).attrs({
+  $justifyContent: 'end'
+}).withConfig({
+  displayName: "MediaMeta",
+  componentId: "sc-1uezfps-5"
+})(["color:", ";svg{color:", ";}"], WHATSAPP_COLOR.MEDIA_META, WHATSAPP_COLOR.MEDIA_META);
+export const DocumentBox = styled(Columns).attrs({
+  $alignItems: 'center',
+  $gap: 10,
+  $sizes: 'auto minmax(0, 1fr)',
+  $padding: '8px 10px',
+  $bgColor: WHATSAPP_COLOR.DOCUMENT_CARD
+}).withConfig({
+  displayName: "DocumentBox",
+  componentId: "sc-1uezfps-6"
+})(["", ""], bubbleInset);
+export const DocumentGlyph = styled(Horizontal).withConfig({
+  displayName: "DocumentGlyph",
+  componentId: "sc-1uezfps-7"
+})(["color:", ";svg{display:block;}"], ({
+  $color
+}) => $color);

package/WhatsAppPreview/components/WhatsAppAttachment/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { WhatsAppAttachment } from '../../types';
+/** Props of {@link WhatsAppAttachment}. */
+export interface WhatsAppAttachmentProps {
+    /** File to draw. */
+    attachment: WhatsAppAttachment;
+    /** Time and ticks overlaid on the media; pass it only when the bubble has no caption below. */
+    meta?: ReactNode;
+    /** Keep the bottom inset of the bubble instead of hugging its padding. */
+    hasCaption?: boolean;
+}

package/WhatsAppPreview/components/WhatsAppAttachment/types.js

@@ -0,0 +1 @@
+export {};

package/WhatsAppPreview/components/WhatsAppMessageBubble/WhatsAppMessageBubble.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { WhatsAppMessageBubbleProps } from './types';
-/** Single chat bubble: body, time and — for outgoing messages — the delivery ticks. */
+/** Single chat bubble: attachment, body, time and — for outgoing messages — the delivery ticks. */
 export declare function WhatsAppMessageBubble(props: WhatsAppMessageBubbleProps): ReactElement;

package/WhatsAppPreview/components/WhatsAppMessageBubble/WhatsAppMessageBubble.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Columns } from '@pushwoosh/kit-helpers';
 import { BubbleBox, BubbleMeta, BubbleText } from './styles';
+import { resolveAttachmentKind } from '../../helpers';
 import { WhatsAppTickIcon, WhatsAppTicksIcon } from '../../icons';
+import { WhatsAppAttachment } from '../WhatsAppAttachment';
 import { WhatsAppFormattedText } from '../WhatsAppFormattedText';
-/** Single chat bubble: body, time and — for outgoing messages — the delivery ticks. */
+/** Single chat bubble: attachment, body, time and — for outgoing messages — the delivery ticks. */
 export function WhatsAppMessageBubble(props) {
   const {
     message
@@ -12,23 +14,33 @@ export function WhatsAppMessageBubble(props) {
     direction,
     text = '',
     content,
+    attachment,
     time,
     status
   } = message;
   const showTicks = direction === 'outgoing' && Boolean(status);
+  const hasBody = Boolean(text || content);
+  const drawnAttachment = attachment?.source ? attachment : undefined;
+  const isMediaOnly = drawnAttachment !== undefined && !hasBody && resolveAttachmentKind(drawnAttachment) !== 'document';
+  const meta = time || showTicks ? _jsxs(BubbleMeta, {
+    "$overlaid": isMediaOnly,
+    "$read": showTicks && status === 'read',
+    children: [time, showTicks && status === 'sent' && _jsx(WhatsAppTickIcon, {}), showTicks && status !== 'sent' && _jsx(WhatsAppTicksIcon, {})]
+  }) : null;
   return _jsx(Columns, {
     "$justifyItems": direction === 'outgoing' ? 'end' : 'start',
     "$sizes": "minmax(0, 1fr)",
     children: _jsxs(BubbleBox, {
       "$direction": direction,
-      children: [_jsx(BubbleText, {
+      children: [drawnAttachment && _jsx(WhatsAppAttachment, {
+        attachment: drawnAttachment,
+        hasCaption: hasBody,
+        meta: isMediaOnly ? meta : undefined
+      }), hasBody && _jsx(BubbleText, {
         children: content ?? _jsx(WhatsAppFormattedText, {
           text: text
         })
-      }), (time || showTicks) && _jsxs(BubbleMeta, {
-        "$read": showTicks && status === 'read',
-        children: [time, showTicks && status === 'sent' && _jsx(WhatsAppTickIcon, {}), showTicks && status !== 'sent' && _jsx(WhatsAppTicksIcon, {})]
-      })]
+      }), !isMediaOnly && meta]
     })
   });
 }

package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.d.ts

@@ -17,7 +17,7 @@ export declare const BubbleMeta: import("styled-components").StyledComponent<"sp
     $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
 } & {
     $variant: "footnote";
-    $color: "#667781";
 } & {
     $read: boolean;
-}, "$color" | "$variant">;
+    $overlaid?: boolean;
+}, "$variant">;

package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.js

@@ -15,11 +15,20 @@ export const BubbleText = styled(Text).attrs({
   componentId: "sc-va3yjo-1"
 })(["white-space:pre-wrap;"]);
 export const BubbleMeta = styled(Text).attrs({
-  $variant: 'footnote',
-  $color: WHATSAPP_COLOR.BUBBLE_META
+  $variant: 'footnote'
 }).withConfig({
   displayName: "BubbleMeta",
   componentId: "sc-va3yjo-2"
-})(["display:inline-flex;align-items:center;gap:3px;float:right;margin:6px 0 -2px 8px;svg{display:block;color:", ";}"], ({
-  $read
-}) => $read ? WHATSAPP_COLOR.READ_TICK : WHATSAPP_COLOR.BUBBLE_META);
+})(["display:inline-flex;align-items:center;gap:3px;color:", ";", " svg{display:block;color:", ";}"], ({
+  $overlaid
+}) => $overlaid ? 'inherit' : WHATSAPP_COLOR.BUBBLE_META, ({
+  $overlaid
+}) => !$overlaid && css(["float:right;margin:6px 0 -2px 8px;"]), ({
+  $read,
+  $overlaid
+}) => {
+  if ($read) {
+    return WHATSAPP_COLOR.READ_TICK;
+  }
+  return $overlaid ? 'inherit' : WHATSAPP_COLOR.BUBBLE_META;
+});

package/WhatsAppPreview/constants.d.ts

@@ -13,6 +13,15 @@ export declare const WHATSAPP_COLOR: {
     readonly AVATAR: "#CFD6DB";
     readonly AVATAR_GLYPH: "#FFFFFF";
     readonly INCOMING_BUBBLE: "#FFFFFF";
+    readonly MEDIA_BACKDROP: "#0B141A";
+    readonly MEDIA_META: "#FFFFFF";
+    readonly MEDIA_SCRIM: "rgba(11, 20, 26, 0.5)";
+    readonly PLAY_BUTTON: "rgba(255, 255, 255, 0.85)";
+    readonly PLAY_GLYPH: "#111B21";
+    readonly DOCUMENT_CARD: "#F5F6F6";
+    readonly DOCUMENT_PDF: "#E7554B";
+    readonly DOCUMENT_TEXT: "#2E7CD6";
+    readonly DOCUMENT_GENERIC: "#8696A0";
     readonly OUTGOING_BUBBLE: "#D9FDD3";
     readonly BUBBLE_TEXT: "#111B21";
     readonly BUBBLE_META: "#667781";
@@ -24,3 +33,8 @@ export declare const WHATSAPP_COLOR: {
 export declare const WHATSAPP_PREVIEW_WIDTH = 340;
 export declare const WHATSAPP_PREVIEW_HEIGHT = 640;
 export declare const WHATSAPP_STATUS_BAR_TIME = "12:02";
+export declare const WHATSAPP_MEDIA_MAX_HEIGHT = 320;
+export declare const WHATSAPP_ATTACHMENT_EXTENSIONS: {
+    readonly image: string[];
+    readonly video: string[];
+};

package/WhatsAppPreview/constants.js

@@ -13,6 +13,15 @@ export const WHATSAPP_COLOR = {
   AVATAR: '#CFD6DB',
   AVATAR_GLYPH: '#FFFFFF',
   INCOMING_BUBBLE: '#FFFFFF',
+  MEDIA_BACKDROP: '#0B141A',
+  MEDIA_META: '#FFFFFF',
+  MEDIA_SCRIM: 'rgba(11, 20, 26, 0.5)',
+  PLAY_BUTTON: 'rgba(255, 255, 255, 0.85)',
+  PLAY_GLYPH: '#111B21',
+  DOCUMENT_CARD: '#F5F6F6',
+  DOCUMENT_PDF: '#E7554B',
+  DOCUMENT_TEXT: '#2E7CD6',
+  DOCUMENT_GENERIC: '#8696A0',
   OUTGOING_BUBBLE: '#D9FDD3',
   BUBBLE_TEXT: '#111B21',
   BUBBLE_META: '#667781',
@@ -23,4 +32,11 @@ export const WHATSAPP_COLOR = {
 };
 export const WHATSAPP_PREVIEW_WIDTH = 340;
 export const WHATSAPP_PREVIEW_HEIGHT = 640;
-export const WHATSAPP_STATUS_BAR_TIME = '12:02';
+export const WHATSAPP_STATUS_BAR_TIME = '12:02';
+export const WHATSAPP_MEDIA_MAX_HEIGHT = 320;
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+const VIDEO_EXTENSIONS = ['mp4', 'mov', 'webm', '3gp'];
+export const WHATSAPP_ATTACHMENT_EXTENSIONS = {
+  image: IMAGE_EXTENSIONS,
+  video: VIDEO_EXTENSIONS
+};

package/WhatsAppPreview/helpers.d.ts

@@ -1,3 +1,16 @@
 import type { WhatsAppTextNode } from './components/WhatsAppFormattedText/types';
+import type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage } from './types';
 /** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
 export declare function parseWhatsAppMarkup(text: string): WhatsAppTextNode[];
+/** Extension of the attached file, lowercase and without the dot; empty when the name carries none. */
+export declare function getAttachmentExtension(attachment: WhatsAppAttachment): string;
+/** Picks how the attachment is drawn: explicit `kind` first, then the MIME type, then the extension. */
+export declare function resolveAttachmentKind(attachment: WhatsAppAttachment): WhatsAppAttachmentKind;
+/** Whether the message has anything to show; a bubble with neither body nor file content is not drawn at all. */
+export declare function isMessageDrawable(message: WhatsAppMessage): boolean;
+/** File size the way WhatsApp writes it on a document card: `912 B`, `68 kB`, `1.4 MB`. */
+export declare function formatAttachmentSize(size: number): string;
+/** Video length as the `m:ss` badge of a WhatsApp video bubble. */
+export declare function formatAttachmentDuration(duration: number): string;
+/** Video source with a time fragment: a frame is only decoded for the poster once a position is asked for. */
+export declare function toVideoPosterSource(source: string): string;

package/WhatsAppPreview/helpers.js

@@ -1,3 +1,4 @@
+import { WHATSAPP_ATTACHMENT_EXTENSIONS } from './constants';
 const MARKERS = [{
   style: 'mono',
   marker: '```'
@@ -53,4 +54,57 @@ export function parseWhatsAppMarkup(text) {
   }
   flush();
   return nodes;
+}
+/** Extension of the attached file, lowercase and without the dot; empty when the name carries none. */
+export function getAttachmentExtension(attachment) {
+  const {
+    name
+  } = attachment;
+  const dot = name.lastIndexOf('.');
+  return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+}
+/** Picks how the attachment is drawn: explicit `kind` first, then the MIME type, then the extension. */
+export function resolveAttachmentKind(attachment) {
+  if (attachment.kind) {
+    return attachment.kind;
+  }
+  const mimeType = (attachment.mimeType || '').toLowerCase();
+  if (mimeType.startsWith('image/')) {
+    return 'image';
+  }
+  if (mimeType.startsWith('video/')) {
+    return 'video';
+  }
+  const extension = getAttachmentExtension(attachment);
+  if (WHATSAPP_ATTACHMENT_EXTENSIONS.image.includes(extension)) {
+    return 'image';
+  }
+  if (WHATSAPP_ATTACHMENT_EXTENSIONS.video.includes(extension)) {
+    return 'video';
+  }
+  return 'document';
+}
+/** Whether the message has anything to show; a bubble with neither body nor file content is not drawn at all. */
+export function isMessageDrawable(message) {
+  return Boolean(message.text || message.content || message.attachment?.source);
+}
+/** File size the way WhatsApp writes it on a document card: `912 B`, `68 kB`, `1.4 MB`. */
+export function formatAttachmentSize(size) {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+  if (size < 1024 * 1024) {
+    return `${Math.round(size / 1024)} kB`;
+  }
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+/** Video length as the `m:ss` badge of a WhatsApp video bubble. */
+export function formatAttachmentDuration(duration) {
+  const total = Math.round(duration);
+  const seconds = total % 60;
+  return `${Math.floor(total / 60)}:${String(seconds).padStart(2, '0')}`;
+}
+/** Video source with a time fragment: a frame is only decoded for the poster once a position is asked for. */
+export function toVideoPosterSource(source) {
+  return source.includes('#') ? source : `${source}#t=0.001`;
 }

package/WhatsAppPreview/icons/WhatsAppDocumentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="32" fill="none"><path fill="#fff" stroke="currentColor" stroke-width="1.4" d="M.7 3.3A2.6 2.6 0 0 1 3.3.7h11.2l10.1 10v18a2.6 2.6 0 0 1-2.6 2.6H3.3A2.6 2.6 0 0 1 .7 28.7V3.3Z"/><path fill="currentColor" d="M14.5.7l10.1 10h-8.7a1.4 1.4 0 0 1-1.4-1.4V.7Z"/><path fill="currentColor" d="M5 17.4h10v1.6H5v-1.6Zm0 4.2h10v1.6H5v-1.6Zm0 4.2h6.6v1.6H5v-1.6Z"/></svg>

package/WhatsAppPreview/icons/WhatsAppPlayIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"><path d="M5.5 3.4a.6.6 0 0 1 .9-.5l8 5.6a.6.6 0 0 1 0 1l-8 5.6a.6.6 0 0 1-.9-.5V3.4Z"/></svg>

package/WhatsAppPreview/icons/WhatsAppVideoIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"><path d="M1.2 3.4A1.2 1.2 0 0 1 2.4 2.2h5.4a1.2 1.2 0 0 1 1.2 1.2v7.2a1.2 1.2 0 0 1-1.2 1.2H2.4a1.2 1.2 0 0 1-1.2-1.2V3.4Zm9 2.7 2.3-1.7a.5.5 0 0 1 .8.4v4.4a.5.5 0 0 1-.8.4l-2.3-1.7V6.1Z"/></svg>

package/WhatsAppPreview/icons/index.d.ts

@@ -2,9 +2,12 @@ export { default as WhatsAppAvatarIcon } from './WhatsAppAvatarIcon.svg';
 export { default as WhatsAppBackIcon } from './WhatsAppBackIcon.svg';
 export { default as WhatsAppBatteryIcon } from './WhatsAppBatteryIcon.svg';
 export { default as WhatsAppCallIcon } from './WhatsAppCallIcon.svg';
+export { default as WhatsAppDocumentIcon } from './WhatsAppDocumentIcon.svg';
 export { default as WhatsAppMenuIcon } from './WhatsAppMenuIcon.svg';
+export { default as WhatsAppPlayIcon } from './WhatsAppPlayIcon.svg';
 export { default as WhatsAppSignalIcon } from './WhatsAppSignalIcon.svg';
 export { default as WhatsAppTickIcon } from './WhatsAppTickIcon.svg';
 export { default as WhatsAppTicksIcon } from './WhatsAppTicksIcon.svg';
+export { default as WhatsAppVideoIcon } from './WhatsAppVideoIcon.svg';
 export { default as WhatsAppWallpaperPattern } from './WhatsAppWallpaperPattern.svg';
 export { default as WhatsAppWifiIcon } from './WhatsAppWifiIcon.svg';

package/WhatsAppPreview/icons/index.js

@@ -2,9 +2,12 @@ export { default as WhatsAppAvatarIcon } from './WhatsAppAvatarIcon.svg';
 export { default as WhatsAppBackIcon } from './WhatsAppBackIcon.svg';
 export { default as WhatsAppBatteryIcon } from './WhatsAppBatteryIcon.svg';
 export { default as WhatsAppCallIcon } from './WhatsAppCallIcon.svg';
+export { default as WhatsAppDocumentIcon } from './WhatsAppDocumentIcon.svg';
 export { default as WhatsAppMenuIcon } from './WhatsAppMenuIcon.svg';
+export { default as WhatsAppPlayIcon } from './WhatsAppPlayIcon.svg';
 export { default as WhatsAppSignalIcon } from './WhatsAppSignalIcon.svg';
 export { default as WhatsAppTickIcon } from './WhatsAppTickIcon.svg';
 export { default as WhatsAppTicksIcon } from './WhatsAppTicksIcon.svg';
+export { default as WhatsAppVideoIcon } from './WhatsAppVideoIcon.svg';
 export { default as WhatsAppWallpaperPattern } from './WhatsAppWallpaperPattern.svg';
 export { default as WhatsAppWifiIcon } from './WhatsAppWifiIcon.svg';

package/WhatsAppPreview/index.d.ts

@@ -1,2 +1,2 @@
 export { WhatsAppPreview } from './WhatsAppPreview';
-export type { WhatsAppMessage, WhatsAppMessageDirection, WhatsAppMessageStatus, WhatsAppPreviewProps, } from './types';
+export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppMessageDirection, WhatsAppMessageStatus, WhatsAppPreviewProps, } from './types';

package/WhatsAppPreview/types.d.ts

@@ -3,6 +3,23 @@ import type { ReactNode } from 'react';
 export type WhatsAppMessageDirection = 'incoming' | 'outgoing';
 /** Delivery state drawn as ticks next to an outgoing message's time. */
 export type WhatsAppMessageStatus = 'sent' | 'delivered' | 'read';
+/** How WhatsApp draws an attachment: media fills the bubble, a document becomes a card inside it. */
+export type WhatsAppAttachmentKind = 'image' | 'video' | 'document';
+/** File attached to a {@link WhatsAppMessage}. */
+export interface WhatsAppAttachment {
+    /** File name; shown on the document card and used to detect the kind. */
+    name: string;
+    /** File content: whatever an `<img>`/`<video>` accepts — a `data:` payload, a `blob:` or an http(s) address. */
+    source: string;
+    /** MIME type; wins over the name extension when the kind is detected. */
+    mimeType?: string;
+    /** File size in bytes, shown in the document card meta line. */
+    size?: number;
+    /** Overrides the kind detected from `mimeType` and `name`. */
+    kind?: WhatsAppAttachmentKind;
+    /** Video length in seconds; read from the file itself when omitted. */
+    duration?: number;
+}
 /** One chat bubble of {@link WhatsAppPreview}. */
 export interface WhatsAppMessage {
     /** Stable key when the list is re-ordered or edited. */
@@ -13,6 +30,8 @@ export interface WhatsAppMessage {
     text?: string;
     /** Custom body rendered instead of `text` — e.g. an inline editor for the welcome message. */
     content?: ReactNode;
+    /** File shown above the text, the way WhatsApp renders images, videos and documents. */
+    attachment?: WhatsAppAttachment;
     /** Time stamp inside the bubble. */
     time?: string;
     /** Tick state; ignored for incoming messages. */

package/index.d.ts

@@ -35,7 +35,7 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview, replaceLocalization, replacePlaceholders } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { WhatsAppPreview } from './WhatsAppPreview';
-export type { WhatsAppMessage, WhatsAppMessageDirection, WhatsAppMessageStatus, WhatsAppPreviewProps, } from './WhatsAppPreview';
+export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppMessageDirection, WhatsAppMessageStatus, WhatsAppPreviewProps, } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.211",
+  "version": "1.1.213",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",