@pushwoosh/dumb-components 4.5.1 → 4.6.0

package/ChatPreview/ChatPreview.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { ChatPreviewProps } from './types';
+/** Renders a rich chat message the way the recipient sees it in RCS, WhatsApp, Messenger or LINE. */
+export declare function ChatPreview(props: ChatPreviewProps): ReactElement;

package/ChatPreview/ChatPreview.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlatformLogoIcon } from '@pushwoosh/kit-icons';
+import { ChatText, NativeMessage, NoFallback, StatusNotice } from './components';
+import { CHAT_CHANNELS } from './constants';
+import { droppedPathsOf, errorsOf, fallbackTextOf, hasNativeContent, viewOf } from './helpers';
+import { Lang } from './polyglot';
+import { BlockedMessage, Bubble, EmptyText, Header, Screen, Thread } from './styles';
+/** Renders a rich chat message the way the recipient sees it in RCS, WhatsApp, Messenger or LINE. */
+export function ChatPreview(props) {
+  const {
+    channel,
+    content,
+    status,
+    issues,
+    senderName
+  } = props;
+  const look = CHAT_CHANNELS[channel];
+  const view = viewOf(channel, status);
+  const dropped = droppedPathsOf(issues);
+  const fallbackText = fallbackTextOf(content);
+  const drawable = view === 'fallback' ? Boolean(fallbackText) : hasNativeContent(content);
+  const native = _jsx(NativeMessage, {
+    channel: channel,
+    content: content,
+    dropped: dropped,
+    look: look,
+    rcs: channel === 'rcs' ? content.rcs : undefined
+  });
+  return _jsxs(Screen, {
+    "$skin": look.skin,
+    "data-channel": channel,
+    children: [_jsxs(Header, {
+      "$skin": look.skin,
+      children: [_jsx(PlatformLogoIcon, {
+        size: "medium",
+        type: look.icon
+      }), senderName ?? _jsx(Lang, {
+        message: "DUMB.CHAT_PREVIEW.SENDER"
+      })]
+    }), _jsxs(Thread, {
+      "data-view": view,
+      children: [view !== 'native' && _jsx(StatusNotice, {
+        errors: errorsOf(issues),
+        view: view
+      }), view === 'fallback' && !drawable && _jsx(NoFallback, {
+        children: _jsx(Lang, {
+          message: "DUMB.CHAT_PREVIEW.NO_FALLBACK"
+        })
+      }), view !== 'fallback' && !drawable && _jsx(EmptyText, {
+        children: _jsx(Lang, {
+          message: "DUMB.CHAT_PREVIEW.EMPTY"
+        })
+      }), drawable && view === 'fallback' && _jsx(Bubble, {
+        "$skin": look.skin,
+        children: _jsx(ChatText, {
+          markup: look.markup,
+          text: fallbackText
+        })
+      }), drawable && (view === 'native' || view === 'session') && native, drawable && view === 'blocked' && _jsx(BlockedMessage, {
+        "data-testid": "chat-blocked",
+        children: native
+      })]
+    })]
+  });
+}

package/ChatPreview/components/ChatCardView/ChatCardView.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { ChatCardViewProps } from './types';
+/** One rich card: media, title, text and footer, buttons at the bottom; RCS honours its card layout. */
+export declare function ChatCardView(props: ChatCardViewProps): ReactElement;

package/ChatPreview/components/ChatCardView/ChatCardView.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBody, CardButton, CardButtons, CardFrame, CardTitle, Thumbnail } from './styles';
+import { RCS_MEDIA_HEIGHT } from '../../constants';
+import { rcsLayoutOf } from '../../helpers';
+import { Footer } from '../../styles';
+import { ChatMediaView } from '../ChatMediaView';
+import { ChatText } from '../ChatText';
+import { Deliverable } from '../Deliverable';
+/** One rich card: media, title, text and footer, buttons at the bottom; RCS honours its card layout. */
+export function ChatCardView(props) {
+  const {
+    card,
+    look,
+    rcs,
+    path,
+    dropped
+  } = props;
+  const layout = rcs ? rcsLayoutOf(rcs) : null;
+  const horizontal = layout?.orientation === 'HORIZONTAL';
+  const mediaHeight = layout && !horizontal ? RCS_MEDIA_HEIGHT[layout.height] : undefined;
+  const isDropped = field => dropped.has(`${path}.${field}`);
+  return _jsxs(CardFrame, {
+    "$horizontal": horizontal,
+    "$skin": look.skin,
+    "$thumbnailRight": layout?.thumbnailAlignment === 'RIGHT',
+    "data-orientation": layout?.orientation,
+    "data-testid": "chat-card",
+    children: [card.media && _jsx(Thumbnail, {
+      "$horizontal": horizontal,
+      children: _jsx(ChatMediaView, {
+        height: mediaHeight,
+        media: card.media
+      })
+    }), (card.title || card.body || card.footer) && _jsxs(CardBody, {
+      children: [card.title && _jsx(Deliverable, {
+        dropped: isDropped('title'),
+        children: _jsx(CardTitle, {
+          children: _jsx(ChatText, {
+            markup: look.markup,
+            text: card.title
+          })
+        })
+      }), card.body && _jsx("div", {
+        children: _jsx(ChatText, {
+          markup: look.markup,
+          text: card.body
+        })
+      }), card.footer && _jsx(Deliverable, {
+        dropped: isDropped('footer'),
+        children: _jsx(Footer, {
+          children: card.footer
+        })
+      })]
+    }), Boolean(card.buttons?.length) && _jsx(CardButtons, {
+      children: card.buttons?.map(button => _jsx(CardButton, {
+        "$skin": look.skin,
+        children: button.title
+      }, button.id))
+    })]
+  });
+}

package/ChatPreview/components/ChatCardView/index.d.ts

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

package/ChatPreview/components/ChatCardView/index.js

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

package/ChatPreview/components/ChatCardView/styles.d.ts

@@ -0,0 +1,24 @@
+import { type Skinned } from '../../styles';
+export declare const CardFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, Skinned & {
+    $horizontal: boolean;
+    $thumbnailRight: boolean;
+}>> & string;
+export declare const Thumbnail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $horizontal: boolean;
+}>> & string;
+export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CardButtons: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, Skinned>> & string;

package/ChatPreview/components/ChatCardView/styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { Color, FontWeight } from '@pushwoosh/kit-constants';
+import { CHAT_BUBBLE_PADDING, CHAT_CARD_WIDTH, RCS_THUMBNAIL_SHARE } from '../../constants';
+import { action, surface } from '../../styles';
+export const CardFrame = styled.div.withConfig({
+  displayName: "CardFrame",
+  componentId: "sc-19fjpk-0"
+})(["", " flex:0 0 auto;flex-direction:", ";flex-wrap:", ";width:", "px;border:1px solid ", ";"], surface, ({
+  $horizontal,
+  $thumbnailRight
+}) => {
+  if (!$horizontal) {
+    return 'column';
+  }
+  return $thumbnailRight ? 'row-reverse' : 'row';
+}, ({
+  $horizontal
+}) => $horizontal ? 'wrap' : 'nowrap', CHAT_CARD_WIDTH, Color.DIVIDER);
+export const Thumbnail = styled.div.withConfig({
+  displayName: "Thumbnail",
+  componentId: "sc-19fjpk-1"
+})(["flex:0 0 ", ";"], ({
+  $horizontal
+}) => $horizontal ? `${RCS_THUMBNAIL_SHARE * 100}%` : 'auto');
+export const CardBody = styled.div.withConfig({
+  displayName: "CardBody",
+  componentId: "sc-19fjpk-2"
+})(["display:flex;flex:1 1 0;flex-direction:column;gap:4px;min-width:0;padding:", "px ", "px;"], CHAT_BUBBLE_PADDING.vertical, CHAT_BUBBLE_PADDING.horizontal);
+export const CardTitle = styled.div.withConfig({
+  displayName: "CardTitle",
+  componentId: "sc-19fjpk-3"
+})(["font-weight:", ";"], FontWeight.BOLD);
+export const CardButtons = styled.div.withConfig({
+  displayName: "CardButtons",
+  componentId: "sc-19fjpk-4"
+})(["flex:1 0 100%;"]);
+export const CardButton = styled.div.withConfig({
+  displayName: "CardButton",
+  componentId: "sc-19fjpk-5"
+})(["", " border-top-color:", ";"], action, Color.DIVIDER);

package/ChatPreview/components/ChatCardView/types.d.ts

@@ -0,0 +1,15 @@
+import type { ChatChannelLook } from '../../constants';
+import type { ChatCard, ChatRcsLayout } from '../../types';
+/** Props of {@link ChatCardView}. */
+export type ChatCardViewProps = {
+    /** Card to draw. */
+    card: ChatCard;
+    /** Look of the channel. */
+    look: ChatChannelLook;
+    /** RCS layout; set only for RCS, the other chats have one card shape. */
+    rcs?: ChatRcsLayout;
+    /** Content path of the card, e.g. `cards[1]`. */
+    path: string;
+    /** Content paths the channel drops. */
+    dropped: Set<string>;
+};

package/ChatPreview/components/ChatMediaView/ChatMediaView.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { ChatMediaViewProps } from './types';
+/** Draws an image, a video poster, a document or an audio row. */
+export declare function ChatMediaView(props: ChatMediaViewProps): ReactElement;

package/ChatPreview/components/ChatMediaView/ChatMediaView.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AttachmentIcon, DocumentIcon, PlayRoundIcon } from '@pushwoosh/kit-icons';
+import { FileRow, MediaImage, MediaPlaceholder } from './styles';
+import { DynamicContentText } from '../../../shared/dynamicContent';
+import { CHAT_MEDIA_HEIGHT } from '../../constants';
+import { Lang, useLang } from '../../polyglot';
+const hasToken = url => url.includes('{');
+/** Draws an image, a video poster, a document or an audio row. */
+export function ChatMediaView(props) {
+  const {
+    media,
+    height = CHAT_MEDIA_HEIGHT
+  } = props;
+  const lang = useLang();
+  if (media.kind === 'document' || media.kind === 'audio') {
+    return _jsxs(FileRow, {
+      children: [media.kind === 'document' ? _jsx(DocumentIcon, {
+        size: "medium",
+        view: "lined"
+      }) : _jsx(AttachmentIcon, {
+        size: "medium",
+        view: "lined"
+      }), _jsx(Lang, {
+        message: media.kind === 'document' ? 'DUMB.CHAT_PREVIEW.DOCUMENT' : 'DUMB.CHAT_PREVIEW.AUDIO'
+      })]
+    });
+  }
+  const poster = media.kind === 'video' ? media.preview_url : media.url;
+  if (!poster || hasToken(poster)) {
+    return _jsx(MediaPlaceholder, {
+      "$height": height,
+      "data-testid": "chat-media",
+      children: media.kind === 'video' ? _jsx(PlayRoundIcon, {
+        size: "medium",
+        view: "filled"
+      }) : _jsx(DynamicContentText, {
+        children: media.url
+      })
+    });
+  }
+  return _jsx(MediaImage, {
+    "$height": height,
+    alt: lang({
+      message: 'DUMB.CHAT_PREVIEW.IMAGE_ALT'
+    }),
+    "data-testid": "chat-media",
+    src: poster
+  });
+}

package/ChatPreview/components/ChatMediaView/index.d.ts

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

package/ChatPreview/components/ChatMediaView/index.js

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

package/ChatPreview/components/ChatMediaView/styles.d.ts

@@ -0,0 +1,13 @@
+type Sized = {
+    $height: number;
+};
+export declare const MediaImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, Sized>> & string;
+export declare const MediaPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, Sized>> & string;
+export declare const FileRow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export {};

package/ChatPreview/components/ChatMediaView/styles.js

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components';
+import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
+import { CHAT_GAP } from '../../constants';
+const mediaBox = css(["display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:100%;height:", "px;border-radius:", ";object-fit:cover;background:", ";color:", ";font-size:", ";"], ({
+  $height
+}) => $height, ShapeRadius.SECTION, Color.SOFT_LIGHT, Color.LOCKED, FontSize.SMALL);
+export const MediaImage = styled.img.withConfig({
+  displayName: "MediaImage",
+  componentId: "sc-17o40y-0"
+})(["", ""], mediaBox);
+export const MediaPlaceholder = styled.div.withConfig({
+  displayName: "MediaPlaceholder",
+  componentId: "sc-17o40y-1"
+})(["", ""], mediaBox);
+export const FileRow = styled.div.withConfig({
+  displayName: "FileRow",
+  componentId: "sc-17o40y-2"
+})(["display:flex;gap:", "px;align-items:center;padding:", "px;border-radius:", ";background:", ";font-size:", ";"], CHAT_GAP, CHAT_GAP, ShapeRadius.SECTION, Color.SOFT_LIGHT, FontSize.SMALL);

package/ChatPreview/components/ChatMediaView/types.d.ts

@@ -0,0 +1,8 @@
+import type { ChatMedia } from '../../types';
+/** Props of {@link ChatMediaView}. */
+export type ChatMediaViewProps = {
+    /** Media to draw. */
+    media: ChatMedia;
+    /** Frame height in px; the default chat media height when omitted. */
+    height?: number;
+};

package/ChatPreview/components/ChatMediaView/types.js

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

package/ChatPreview/components/ChatText/ChatText.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { ChatTextProps } from './types';
+/** Message text with personalization tokens as chips; WhatsApp markup is applied on WhatsApp. */
+export declare function ChatText(props: ChatTextProps): ReactElement;

package/ChatPreview/components/ChatText/ChatText.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicContentText } from '../../../shared/dynamicContent';
+import { WhatsAppFormattedText } from '../../../shared/whatsAppMarkup';
+/** Message text with personalization tokens as chips; WhatsApp markup is applied on WhatsApp. */
+export function ChatText(props) {
+  const {
+    markup,
+    text
+  } = props;
+  if (markup === 'whatsapp') {
+    return _jsx(WhatsAppFormattedText, {
+      text: text
+    });
+  }
+  return _jsx(DynamicContentText, {
+    children: text
+  });
+}

package/ChatPreview/components/ChatText/index.d.ts

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

package/ChatPreview/components/ChatText/index.js

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

package/ChatPreview/components/ChatText/types.d.ts

@@ -0,0 +1,8 @@
+import type { ChatChannelLook } from '../../constants';
+/** Props of {@link ChatText}. */
+export type ChatTextProps = {
+    /** Markup rules of the channel. */
+    markup: ChatChannelLook['markup'];
+    /** Text with personalization tokens. */
+    text: string;
+};

package/ChatPreview/components/ChatText/types.js

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

package/ChatPreview/components/Deliverable/Deliverable.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { DeliverableProps } from './types';
+/** Draws a field as is, or dimmed with a "not delivered" mark when the channel drops it. */
+export declare function Deliverable(props: DeliverableProps): ReactElement;

package/ChatPreview/components/Deliverable/Deliverable.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DroppedField, DroppedTag } from './styles';
+import { Lang } from '../../polyglot';
+/** Draws a field as is, or dimmed with a "not delivered" mark when the channel drops it. */
+export function Deliverable(props) {
+  const {
+    dropped,
+    children
+  } = props;
+  if (!dropped) {
+    return _jsx(_Fragment, {
+      children: children
+    });
+  }
+  return _jsxs("div", {
+    "data-dropped": "true",
+    children: [_jsx(DroppedField, {
+      children: children
+    }), _jsx(DroppedTag, {
+      children: _jsx(Lang, {
+        message: "DUMB.CHAT_PREVIEW.NOT_DELIVERED"
+      })
+    })]
+  });
+}

package/ChatPreview/components/Deliverable/index.d.ts

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

package/ChatPreview/components/Deliverable/index.js

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

package/ChatPreview/components/Deliverable/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const DroppedField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const DroppedTag: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/ChatPreview/components/Deliverable/styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+export const DroppedField = styled.div.withConfig({
+  displayName: "DroppedField",
+  componentId: "sc-rsezkh-0"
+})(["opacity:0.45;text-decoration:line-through;"]);
+export const DroppedTag = styled.div.withConfig({
+  displayName: "DroppedTag",
+  componentId: "sc-rsezkh-1"
+})(["color:", ";font-size:", ";font-weight:", ";text-decoration:none;"], Color.WARNING, FontSize.SMALL, FontWeight.MEDIUM);

package/ChatPreview/components/Deliverable/types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+/** Props of {@link Deliverable}. */
+export type DeliverableProps = {
+    /** The channel drops this field. */
+    dropped: boolean;
+    /** The field as drawn. */
+    children: ReactNode;
+};

package/ChatPreview/components/Deliverable/types.js

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

package/ChatPreview/components/ListSheet/ListSheet.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { ListSheetProps } from './types';
+/** Rows of a list picker as the recipient sees them after tapping the list button. */
+export declare function ListSheet(props: ListSheetProps): ReactElement | null;

package/ChatPreview/components/ListSheet/ListSheet.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, RowDescription, RowTitle, Sheet } from './styles';
+import { ChatText } from '../ChatText';
+/** Rows of a list picker as the recipient sees them after tapping the list button. */
+export function ListSheet(props) {
+  const {
+    list,
+    look
+  } = props;
+  if (!list.items.length) {
+    return null;
+  }
+  return _jsx(Sheet, {
+    "$skin": look.skin,
+    "data-testid": "chat-list-sheet",
+    children: list.items.map(item => _jsxs(Row, {
+      children: [_jsx(RowTitle, {
+        children: _jsx(ChatText, {
+          markup: look.markup,
+          text: item.title
+        })
+      }), item.description && _jsx(RowDescription, {
+        children: item.description
+      })]
+    }, item.id))
+  });
+}

package/ChatPreview/components/ListSheet/index.d.ts

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

package/ChatPreview/components/ListSheet/index.js

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

package/ChatPreview/components/ListSheet/styles.d.ts

@@ -0,0 +1,13 @@
+import { type Skinned } from '../../styles';
+export declare const Sheet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, Skinned>> & string;
+export declare const Row: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const RowTitle: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const RowDescription: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/ChatPreview/components/ListSheet/styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+import { CHAT_BUBBLE_MAX_WIDTH, CHAT_BUBBLE_PADDING } from '../../constants';
+import { surface } from '../../styles';
+export const Sheet = styled.div.withConfig({
+  displayName: "Sheet",
+  componentId: "sc-1aa4x11-0"
+})(["", " width:", "px;"], surface, CHAT_BUBBLE_MAX_WIDTH);
+export const Row = styled.div.withConfig({
+  displayName: "Row",
+  componentId: "sc-1aa4x11-1"
+})(["padding:", "px ", "px;& + &{border-top:1px solid ", ";}"], CHAT_BUBBLE_PADDING.vertical, CHAT_BUBBLE_PADDING.horizontal, Color.DIVIDER);
+export const RowTitle = styled.div.withConfig({
+  displayName: "RowTitle",
+  componentId: "sc-1aa4x11-2"
+})(["font-weight:", ";"], FontWeight.MEDIUM);
+export const RowDescription = styled.div.withConfig({
+  displayName: "RowDescription",
+  componentId: "sc-1aa4x11-3"
+})(["color:", ";font-size:", ";"], Color.LOCKED, FontSize.SMALL);

package/ChatPreview/components/ListSheet/types.d.ts

@@ -0,0 +1,9 @@
+import type { ChatChannelLook } from '../../constants';
+import type { ChatList } from '../../types';
+/** Props of {@link ListSheet}. */
+export type ListSheetProps = {
+    /** List whose rows are drawn. */
+    list: ChatList;
+    /** Look of the channel. */
+    look: ChatChannelLook;
+};

package/ChatPreview/components/ListSheet/types.js

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

package/ChatPreview/components/MessageBubble/MessageBubble.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { MessageBubbleProps } from './types';
+/** The text bubble: header, media, body and footer, with in-bubble buttons and the list button. */
+export declare function MessageBubble(props: MessageBubbleProps): ReactElement | null;

package/ChatPreview/components/MessageBubble/MessageBubble.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListIcon } from '@pushwoosh/kit-icons';
+import { InlineButton, InlineButtons } from './styles';
+import { bubbleButtonsOf } from '../../helpers';
+import { Bubble, Footer, HeaderText } from '../../styles';
+import { ChatMediaView } from '../ChatMediaView';
+import { ChatText } from '../ChatText';
+import { Deliverable } from '../Deliverable';
+/** The text bubble: header, media, body and footer, with in-bubble buttons and the list button. */
+export function MessageBubble(props) {
+  const {
+    content,
+    look,
+    dropped
+  } = props;
+  const inlineButtons = look.repliesInsideBubble || content.type === 'call_to_action' ? bubbleButtonsOf(content) : [];
+  const headerMedia = content.header?.media?.url ? content.header.media : undefined;
+  const media = content.type === 'media' && content.media?.url ? content.media : undefined;
+  const headerText = headerMedia ? undefined : content.header?.text;
+  const hasText = Boolean(headerText || content.body || content.footer);
+  if (!media && !headerMedia && !hasText && !inlineButtons.length && !content.list) {
+    return null;
+  }
+  return _jsxs(Bubble, {
+    "$skin": look.skin,
+    children: [headerMedia && _jsx(Deliverable, {
+      dropped: dropped.has('header'),
+      children: _jsx(ChatMediaView, {
+        media: headerMedia
+      })
+    }), media && _jsx(ChatMediaView, {
+      media: media
+    }), headerText && _jsx(Deliverable, {
+      dropped: dropped.has('header'),
+      children: _jsx(HeaderText, {
+        children: _jsx(ChatText, {
+          markup: look.markup,
+          text: headerText
+        })
+      })
+    }), content.body && _jsx(Deliverable, {
+      dropped: dropped.has('body'),
+      children: _jsx("div", {
+        children: _jsx(ChatText, {
+          markup: look.markup,
+          text: content.body
+        })
+      })
+    }), content.footer && _jsx(Deliverable, {
+      dropped: dropped.has('footer'),
+      children: _jsx(Footer, {
+        children: content.footer
+      })
+    }), (inlineButtons.length > 0 || content.list) && _jsxs(InlineButtons, {
+      children: [inlineButtons.map(button => _jsx(InlineButton, {
+        "$skin": look.skin,
+        children: button.title
+      }, button.id)), content.list && _jsxs(InlineButton, {
+        "$skin": look.skin,
+        children: [_jsx(ListIcon, {
+          size: "small",
+          view: "lined"
+        }), ' ', content.list.button_text]
+      })]
+    })]
+  });
+}

package/ChatPreview/components/MessageBubble/index.d.ts

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

package/ChatPreview/components/MessageBubble/index.js

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