@pushwoosh/dumb-components 1.1.225 → 1.1.227

package/WhatsAppPreview/WhatsAppPreview.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { WhatsAppPreviewProps } from './types';
-/** Renders a WhatsApp conversation the way the recipient sees it, WhatsApp markup included. */
+/** Renders a WhatsApp message the way the recipient sees it, WhatsApp markup and attachments included. */
 export declare function WhatsAppPreview(props: WhatsAppPreviewProps): ReactElement;

package/WhatsAppPreview/WhatsAppPreview.js

@@ -1,105 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Color } from '@pushwoosh/kit-constants';
-import { Horizontal, Rows, Vertical } from '@pushwoosh/kit-helpers';
-import { Text } from '@pushwoosh/kit-typography';
-import { WhatsAppChatHeader } from './components/WhatsAppChatHeader';
-import { WhatsAppDateChip } from './components/WhatsAppDateChip';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
 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 { WHATSAPP_BACKDROP_PADDING, WHATSAPP_BACKDROP_WIDTH, WHATSAPP_BUBBLE_PADDING } from './constants';
 import { isMessageDrawable } from './helpers';
-import { WhatsAppWallpaperPattern } from './icons';
 import { Lang } from './polyglot';
-import { DeviceBox, WallpaperImage, WallpaperLayer } from './styles';
+import { Backdrop, Bubble, PreviewText } from './styles';
 import { Spinner } from '../Spinner';
-/** Renders a WhatsApp conversation the way the recipient sees it, WhatsApp markup included. */
+/** Renders a WhatsApp message the way the recipient sees it, WhatsApp markup and attachments included. */
 export function WhatsAppPreview(props) {
   const {
-    messages = [],
-    contactName = '',
-    contactSubtitle,
-    avatarUrl,
-    dateLabel,
-    statusBarTime = WHATSAPP_STATUS_BAR_TIME,
-    wallpaperUrl,
+    message,
     emptyText,
-    width = WHATSAPP_PREVIEW_WIDTH,
-    height = WHATSAPP_PREVIEW_HEIGHT,
     isLoading = false
   } = props;
-  const drawnMessages = messages.filter(isMessageDrawable);
-  const separator = dateLabel === undefined ? _jsx(Lang, {
-    message: "DUMB.WHATSAPP_PREVIEW.TODAY"
-  }) : dateLabel;
-  return _jsx(DeviceBox, {
-    "$height": height,
-    "$width": width,
-    children: _jsxs(Rows, {
-      "$bgColor": WHATSAPP_COLOR.HEADER,
-      "$borderRadius": 39,
-      "$overflow": "hidden",
-      "$sizes": "auto auto minmax(0, 1fr)",
-      children: [_jsx(WhatsAppStatusBar, {
-        time: statusBarTime
-      }), _jsx(WhatsAppChatHeader, {
-        avatarUrl: avatarUrl,
-        name: contactName,
-        subtitle: contactSubtitle ?? _jsx(Lang, {
-          message: "DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT"
+  const isDrawable = message !== undefined && isMessageDrawable(message);
+  return _jsxs(Backdrop, {
+    "$alignContent": "start",
+    "$bgColor": Color.SOFT_LIGHT,
+    "$borderRadius": ShapeRadius.SECTION,
+    "$padding": WHATSAPP_BACKDROP_PADDING,
+    "$width": WHATSAPP_BACKDROP_WIDTH,
+    children: [isLoading && _jsx(Horizontal, {
+      "$alignItems": "center",
+      "$justifyContent": "center",
+      "$padding": WHATSAPP_BUBBLE_PADDING,
+      children: _jsx(Spinner, {
+        color: Color.LOCKED,
+        size: "medium"
+      })
+    }), !isLoading && !isDrawable && _jsx(Bubble, {
+      children: _jsx(PreviewText, {
+        "$color": Color.LOCKED,
+        "$ellipsis": true,
+        children: emptyText ?? _jsx(Lang, {
+          message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
         })
-      }), _jsxs(Vertical, {
-        "$bgColor": WHATSAPP_COLOR.SCREEN,
-        "$overflow": "hidden",
-        "$position": "relative",
-        children: [_jsx(WallpaperLayer, {
-          children: wallpaperUrl ? _jsx(WallpaperImage, {
-            alt: "",
-            src: wallpaperUrl
-          }) : _jsx(WhatsAppWallpaperPattern, {})
-        }), isLoading && _jsx(Horizontal, {
-          "$alignItems": "center",
-          "$inset": 0,
-          "$justifyContent": "center",
-          "$position": "absolute",
-          children: _jsx(Spinner, {
-            color: Color.LOCKED,
-            size: "medium"
-          })
-        }), !isLoading && drawnMessages.length === 0 && _jsx(Horizontal, {
-          "$alignItems": "center",
-          "$inset": 0,
-          "$justifyContent": "center",
-          "$padding": 24,
-          "$position": "absolute",
-          children: _jsx(Text, {
-            "$color": WHATSAPP_COLOR.SUBTITLE,
-            "$variant": "footnote",
-            children: emptyText ?? _jsx(Lang, {
-              message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
-            })
-          })
-        }), !isLoading && drawnMessages.length > 0 && _jsx(Vertical, {
-          "$inset": 0,
-          "$overflowY": "auto",
-          "$position": "absolute",
-          children: _jsxs(Vertical, {
-            "$alignContent": "start",
-            "$gap": 8,
-            "$minHeight": "100%",
-            "$padding": {
-              top: 12,
-              right: 9,
-              bottom: 16,
-              left: 9
-            },
-            children: [separator && _jsx(WhatsAppDateChip, {
-              children: separator
-            }), drawnMessages.map((message, index) => _jsx(WhatsAppMessageBubble, {
-              message: message
-            }, message.id ?? index))]
-          })
-        })]
-      })]
-    })
+      })
+    }), !isLoading && isDrawable && _jsx(WhatsAppMessageBubble, {
+      message: message
+    })]
   });
 }

package/WhatsAppPreview/__tests__/attachment.test.js

@@ -53,6 +53,18 @@ describe('attachment meta', () => {
       source: SOURCE
     })).toBe('');
   });
+  it('falls back to the MIME subtype when the name has no extension', () => {
+    expect(getAttachmentExtension({
+      name: 'Title',
+      source: SOURCE,
+      mimeType: 'application/PDF'
+    })).toBe('pdf');
+    expect(getAttachmentExtension({
+      name: 'Title.docx',
+      source: SOURCE,
+      mimeType: 'application/pdf'
+    })).toBe('docx');
+  });
   it('writes sizes the way WhatsApp does', () => {
     expect(formatAttachmentSize(912)).toBe('912 B');
     expect(formatAttachmentSize(69_632)).toBe('68 kB');
@@ -70,28 +82,22 @@ describe('attachment meta', () => {
 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: {
+      attachments: [{
         name: 'a.jpg',
         source: SOURCE
-      }
+      }]
     })).toBe(true);
   });
   it('drops a message with nothing to show', () => {
+    expect(isMessageDrawable({})).toBe(false);
     expect(isMessageDrawable({
-      direction: 'incoming',
-      time: '11:06'
-    })).toBe(false);
-    expect(isMessageDrawable({
-      direction: 'incoming',
-      attachment: {
+      attachments: [{
         name: 'a.jpg',
         source: ''
-      }
+      }]
     })).toBe(false);
   });
 });

package/WhatsAppPreview/components/WhatsAppAttachment/WhatsAppAttachment.js

@@ -1,29 +1,26 @@
 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 { Color } from '@pushwoosh/kit-constants';
+import { Columns, Vertical } from '@pushwoosh/kit-helpers';
+import { DocumentBox, DocumentGlyph, DocumentThumbnail, MediaBox, MediaDuration, MediaOverlay, PlayButton, PlayGlyph } from './styles';
 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
-};
+import { useLang } from '../../polyglot';
+import { PreviewText } from '../../styles';
 /** 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
+    attachment
   } = props;
   const {
     name,
     source,
     size,
-    duration
+    duration,
+    thumbnailSource,
+    pageCount
   } = attachment;
+  const lang = useLang();
   const [readDuration, setReadDuration] = useState(null);
   const kind = resolveAttachmentKind(attachment);
   const extension = getAttachmentExtension(attachment);
@@ -34,24 +31,32 @@ export function WhatsAppAttachment(props) {
     setReadDuration(Number.isFinite(length) ? length : null);
   }, []);
   if (kind === 'document') {
-    const meaning = [size === undefined ? '' : formatAttachmentSize(size), extension].filter(Boolean);
+    const meaning = [pageCount === undefined ? '' : lang({
+      message: 'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES',
+      count: pageCount
+    }), 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(' · ')
+      children: [thumbnailSource && _jsx(DocumentThumbnail, {
+        alt: name,
+        src: thumbnailSource
+      }), _jsxs(Columns, {
+        "$alignItems": "center",
+        "$gap": 10,
+        "$padding": "8px 10px",
+        "$sizes": "auto minmax(0, 1fr)",
+        "$width": "100%",
+        children: [_jsx(DocumentGlyph, {
+          children: _jsx(WhatsAppDocumentIcon, {})
+        }), _jsxs(Vertical, {
+          "$gap": 1,
+          "$minWidth": 0,
+          children: [_jsx(PreviewText, {
+            "$ellipsis": true,
+            children: name
+          }), meaning.length > 0 && _jsx(PreviewText, {
+            "$color": Color.LOCKED,
+            children: meaning.join(' • ')
+          })]
         })]
       })]
     });
@@ -59,8 +64,8 @@ export function WhatsAppAttachment(props) {
   const length = duration ?? readDuration;
   const isVideo = kind === 'video';
   return _jsxs(MediaBox, {
-    "$hasCaption": hasCaption,
-    children: [isVideo ? _jsx("video", {
+    "$hasOverlay": isVideo,
+    children: [isVideo && !thumbnailSource ? _jsx("video", {
       muted: true,
       playsInline: true,
       onLoadedMetadata: handleLoadedMetadata,
@@ -68,17 +73,15 @@ export function WhatsAppAttachment(props) {
       src: toVideoPosterSource(source)
     }) : _jsx("img", {
       alt: name,
-      src: source
+      src: thumbnailSource ?? source
     }), isVideo && _jsx(PlayButton, {
       children: _jsx(PlayGlyph, {
         children: _jsx(WhatsAppPlayIcon, {})
       })
-    }), (isVideo || meta) && _jsxs(MediaOverlay, {
-      children: [isVideo ? _jsxs(MediaDuration, {
+    }), isVideo && _jsx(MediaOverlay, {
+      children: _jsxs(MediaDuration, {
         children: [_jsx(WhatsAppVideoIcon, {}), length === null ? null : formatAttachmentDuration(length)]
-      }) : _jsx("span", {}), _jsx(MediaMeta, {
-        children: meta
-      })]
+      })
     })]
   });
 }

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

@@ -12,9 +12,11 @@ export declare const MediaBox: import("styled-components").StyledComponent<"div"
 } & {
     $position: string;
     $bgColor: "#0B141A";
+    $borderRadius: number;
+    $justifyItems: string;
 } & {
-    $hasCaption: boolean;
-}, "$gridAutoFlow" | "$bgColor" | "$position">;
+    $hasOverlay: boolean;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$position" | "$justifyItems">;
 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;
@@ -61,18 +63,16 @@ export declare const MediaOverlay: import("styled-components").StyledComponent<"
     $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;
+    $gridAutoFlow: string;
 } & {
     $alignItems: string;
-    $gap: number;
-    $sizes: string;
     $padding: {
         top: number;
         right: number;
         bottom: number;
         left: number;
     };
-}, "$padding" | "$alignItems" | "$gap" | "$sizes">;
+}, "$gridAutoFlow" | "$padding" | "$alignItems">;
 export declare const MediaDuration: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;
@@ -82,20 +82,6 @@ export declare const MediaDuration: import("styled-components").StyledComponent<
     $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;
@@ -106,16 +92,13 @@ export declare const DocumentBox: import("styled-components").StyledComponent<"d
     $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;
+    $gridAutoFlow: string;
 } & {
-    $alignItems: string;
-    $gap: number;
-    $sizes: string;
-    $padding: string;
     $bgColor: "#F5F6F6";
-} & {
-    $hasCaption: boolean;
-}, "$bgColor" | "$padding" | "$alignItems" | "$gap" | "$sizes">;
+    $borderRadius: number;
+    $width: string;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$width">;
+export declare const DocumentThumbnail: import("styled-components").StyledComponent<"img", any, {}, never>;
 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;
@@ -127,6 +110,4 @@ export declare const DocumentGlyph: import("styled-components").StyledComponent<
     $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
-} & {
-    $color: string;
 }, "$gridAutoFlow">;

package/WhatsAppPreview/components/WhatsAppAttachment/styles.js

@@ -1,17 +1,18 @@
-import styled, { css } from 'styled-components';
-import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import styled from 'styled-components';
+import { 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');
+import { WHATSAPP_COLOR, WHATSAPP_MEDIA_MAX_HEIGHT, WHATSAPP_MEDIA_MIN_HEIGHT, WHATSAPP_MEDIA_RADIUS } from '../../constants';
 export const MediaBox = styled(Vertical).attrs({
   $position: 'relative',
-  $bgColor: WHATSAPP_COLOR.MEDIA_BACKDROP
+  $bgColor: WHATSAPP_COLOR.MEDIA_BACKDROP,
+  $borderRadius: WHATSAPP_MEDIA_RADIUS,
+  $justifyItems: 'start'
 }).withConfig({
   displayName: "MediaBox",
   componentId: "sc-1uezfps-0"
-})(["", " img,video{display:block;width:100%;max-height:", "px;object-fit:cover;}"], bubbleInset, WHATSAPP_MEDIA_MAX_HEIGHT);
+})(["overflow:hidden;width:fit-content;max-width:100%;img,video{display:block;width:auto;max-width:100%;max-height:", "px;", "}"], WHATSAPP_MEDIA_MAX_HEIGHT, ({
+  $hasOverlay
+}) => $hasOverlay ? `min-height: ${WHATSAPP_MEDIA_MIN_HEIGHT}px;` : '');
 export const PlayButton = styled(Horizontal).attrs({
   $alignItems: 'center',
   $justifyContent: 'center',
@@ -32,20 +33,18 @@ export const PlayGlyph = styled(Horizontal).attrs({
   displayName: "PlayGlyph",
   componentId: "sc-1uezfps-2"
 })(["color:", ";svg{display:block;margin-left:3px;}"], WHATSAPP_COLOR.PLAY_GLYPH);
-export const MediaOverlay = styled(Columns).attrs({
+export const MediaOverlay = styled(Horizontal).attrs({
   $alignItems: 'end',
-  $gap: 8,
-  $sizes: 'auto minmax(0, 1fr)',
   $padding: {
-    top: 24,
+    top: 12,
     right: 8,
-    bottom: 5,
+    bottom: 4,
     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);
+})(["position:absolute;right:0;bottom:0;left:0;max-height:100%;overflow:hidden;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
@@ -53,25 +52,19 @@ export const MediaDuration = styled(Text).attrs({
   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
+export const DocumentBox = styled(Vertical).attrs({
+  $bgColor: WHATSAPP_COLOR.DOCUMENT_CARD,
+  $borderRadius: WHATSAPP_MEDIA_RADIUS,
+  $width: '100%'
 }).withConfig({
   displayName: "DocumentBox",
+  componentId: "sc-1uezfps-5"
+})(["overflow:hidden;"]);
+export const DocumentThumbnail = styled.img.withConfig({
+  displayName: "DocumentThumbnail",
   componentId: "sc-1uezfps-6"
-})(["", ""], bubbleInset);
+})(["display:block;width:100%;max-height:", "px;object-fit:cover;"], WHATSAPP_MEDIA_MAX_HEIGHT);
 export const DocumentGlyph = styled(Horizontal).withConfig({
   displayName: "DocumentGlyph",
   componentId: "sc-1uezfps-7"
-})(["color:", ";svg{display:block;}"], ({
-  $color
-}) => $color);
+})(["color:", ";svg{display:block;}"], WHATSAPP_COLOR.DOCUMENT_GLYPH);

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

@@ -1,11 +1,6 @@
-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/WhatsAppMessageBubble/WhatsAppMessageBubble.d.ts

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

package/WhatsAppPreview/components/WhatsAppMessageBubble/WhatsAppMessageBubble.js

@@ -1,46 +1,27 @@
 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 { BubbleText } from './styles';
+import { drawableAttachments } from '../../helpers';
+import { Bubble } from '../../styles';
 import { WhatsAppAttachment } from '../WhatsAppAttachment';
 import { WhatsAppFormattedText } from '../WhatsAppFormattedText';
-/** Single chat bubble: attachment, body, time and — for outgoing messages — the delivery ticks. */
+/** Single chat bubble: attachments on top, message body underneath. */
 export function WhatsAppMessageBubble(props) {
   const {
     message
   } = props;
   const {
-    direction,
     text = '',
-    content,
-    attachment,
-    time,
-    status
+    content
   } = 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: [drawnAttachment && _jsx(WhatsAppAttachment, {
-        attachment: drawnAttachment,
-        hasCaption: hasBody,
-        meta: isMediaOnly ? meta : undefined
-      }), hasBody && _jsx(BubbleText, {
-        children: content ?? _jsx(WhatsAppFormattedText, {
-          text: text
-        })
-      }), !isMediaOnly && meta]
-    })
+  const attachments = drawableAttachments(message);
+  return _jsxs(Bubble, {
+    children: [attachments.map((attachment, index) => _jsx(WhatsAppAttachment, {
+      attachment: attachment
+    }, `${attachment.name}:${attachment.source}:${String(index)}`)), hasBody && _jsx(BubbleText, {
+      children: content ?? _jsx(WhatsAppFormattedText, {
+        text: text
+      })
+    })]
   });
 }

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

@@ -1,23 +1,6 @@
-import type { WhatsAppMessageDirection } from '../../types';
-export declare const BubbleBox: import("styled-components").StyledComponent<"div", any, {
-    $direction: WhatsAppMessageDirection;
-}, never>;
 export declare const BubbleText: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;
     $ellipsis?: boolean | undefined;
     $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
-} & {
-    $color: "#111B21";
-}, "$color">;
-export declare const BubbleMeta: import("styled-components").StyledComponent<"span", any, {
-    $color?: string | undefined;
-    $uppercase?: boolean | undefined;
-    $ellipsis?: boolean | undefined;
-    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
-} & {
-    $variant: "footnote";
-} & {
-    $read: boolean;
-    $overlaid?: boolean;
-}, "$variant">;
+}, never>;

package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.js

@@ -1,34 +1,6 @@
-import styled, { css } from 'styled-components';
-import { ShapeRadius } from '@pushwoosh/kit-constants';
-import { Text } from '@pushwoosh/kit-typography';
-import { WHATSAPP_COLOR } from '../../constants';
-export const BubbleBox = styled.div.withConfig({
-  displayName: "BubbleBox",
-  componentId: "sc-va3yjo-0"
-})(["display:flow-root;max-width:82%;padding:6px 8px 7px;box-shadow:0 1px 0.5px ", ";overflow-wrap:anywhere;", ""], WHATSAPP_COLOR.BUBBLE_SHADOW, ({
-  $direction
-}) => $direction === 'outgoing' ? css(["border-radius:", " 2px ", " ", ";background:", ";"], ShapeRadius.SECTION, ShapeRadius.SECTION, ShapeRadius.SECTION, WHATSAPP_COLOR.OUTGOING_BUBBLE) : css(["border-radius:2px ", " ", " ", ";background:", ";"], ShapeRadius.SECTION, ShapeRadius.SECTION, ShapeRadius.SECTION, WHATSAPP_COLOR.INCOMING_BUBBLE));
-export const BubbleText = styled(Text).attrs({
-  $color: WHATSAPP_COLOR.BUBBLE_TEXT
-}).withConfig({
+import styled from 'styled-components';
+import { PreviewText } from '../../styles';
+export const BubbleText = styled(PreviewText).withConfig({
   displayName: "BubbleText",
-  componentId: "sc-va3yjo-1"
-})(["white-space:pre-wrap;"]);
-export const BubbleMeta = styled(Text).attrs({
-  $variant: 'footnote'
-}).withConfig({
-  displayName: "BubbleMeta",
-  componentId: "sc-va3yjo-2"
-})(["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;
-});
+  componentId: "sc-va3yjo-0"
+})(["white-space:pre-wrap;"]);