@pushwoosh/dumb-components 4.5.1 → 4.7.0

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

@@ -0,0 +1,7 @@
+import { type Skinned } from '../../styles';
+export declare const InlineButtons: 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 InlineButton: 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/MessageBubble/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { CHAT_BUBBLE_PADDING } from '../../constants';
+import { action } from '../../styles';
+export const InlineButtons = styled.div.withConfig({
+  displayName: "InlineButtons",
+  componentId: "sc-1md0nso-0"
+})(["display:flex;flex-direction:column;margin:2px -", "px -", "px;"], CHAT_BUBBLE_PADDING.horizontal, CHAT_BUBBLE_PADDING.vertical);
+export const InlineButton = styled.div.withConfig({
+  displayName: "InlineButton",
+  componentId: "sc-1md0nso-1"
+})(["", ""], action);

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

@@ -0,0 +1,3 @@
+import type { ChatPartProps } from '../types';
+/** Props of {@link MessageBubble}. */
+export type MessageBubbleProps = ChatPartProps;

package/ChatPreview/components/MessageBubble/types.js

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

package/ChatPreview/components/NativeMessage/NativeMessage.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { NativeMessageProps } from './types';
+/** The message drawn the way the channel renders it natively. */
+export declare function NativeMessage(props: NativeMessageProps): ReactElement;

package/ChatPreview/components/NativeMessage/NativeMessage.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Carousel, FlexBox } from './styles';
+import { cardsOf, fallbackTextOf } from '../../helpers';
+import { Lang } from '../../polyglot';
+import { ChatCardView } from '../ChatCardView';
+import { ChatText } from '../ChatText';
+import { ListSheet } from '../ListSheet';
+import { MessageBubble } from '../MessageBubble';
+import { ReplyChips } from '../ReplyChips';
+/** The message drawn the way the channel renders it natively. */
+export function NativeMessage(props) {
+  const {
+    channel,
+    content,
+    look,
+    dropped,
+    rcs
+  } = props;
+  const cards = cardsOf(content);
+  if (content.type === 'custom_flex') {
+    return _jsxs(FlexBox, {
+      children: [_jsx("strong", {
+        children: _jsx(Lang, {
+          message: "DUMB.CHAT_PREVIEW.FLEX"
+        })
+      }), fallbackTextOf(content) && _jsx(ChatText, {
+        markup: look.markup,
+        text: fallbackTextOf(content)
+      })]
+    });
+  }
+  return _jsxs(_Fragment, {
+    children: [content.type !== 'card' && _jsx(MessageBubble, {
+      channel: channel,
+      content: content,
+      dropped: dropped,
+      look: look
+    }), content.type === 'list_picker' && content.list && _jsx(ListSheet, {
+      list: content.list,
+      look: look
+    }), cards.length > 0 && _jsx(Carousel, {
+      "data-testid": "chat-carousel",
+      children: cards.map((card, index) => _jsx(ChatCardView, {
+        card: card,
+        dropped: dropped,
+        look: look,
+        path: `cards[${String(index)}]`,
+        rcs: rcs
+      }, `${card.title ?? ''}:${card.media?.url ?? ''}:${String(index)}`))
+    }), _jsx(ReplyChips, {
+      content: content,
+      look: look
+    })]
+  });
+}

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

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

package/ChatPreview/components/NativeMessage/index.js

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

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

@@ -0,0 +1,6 @@
+export declare const Carousel: 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 FlexBox: 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/NativeMessage/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Color, FontSize } from '@pushwoosh/kit-constants';
+import { CHAT_BUBBLE_RADIUS, CHAT_CARD_WIDTH, CHAT_GAP } from '../../constants';
+export const Carousel = styled.div.withConfig({
+  displayName: "Carousel",
+  componentId: "sc-1c28n9d-0"
+})(["display:flex;gap:", "px;align-items:flex-start;max-width:100%;padding-bottom:4px;overflow-x:auto;"], CHAT_GAP);
+export const FlexBox = styled.div.withConfig({
+  displayName: "FlexBox",
+  componentId: "sc-1c28n9d-1"
+})(["display:flex;flex-direction:column;gap:4px;width:", "px;padding:12px;border:1px dashed ", ";border-radius:", "px;background:", ";color:", ";font-size:", ";"], CHAT_CARD_WIDTH, Color.LOCKED, CHAT_BUBBLE_RADIUS, Color.CLEAR, Color.MAIN, FontSize.SMALL);

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

@@ -0,0 +1,7 @@
+import type { ChatRcsLayout } from '../../types';
+import type { ChatPartProps } from '../types';
+/** Props of {@link NativeMessage}. */
+export type NativeMessageProps = ChatPartProps & {
+    /** RCS card layout, passed only on RCS. */
+    rcs?: ChatRcsLayout;
+};

package/ChatPreview/components/NativeMessage/types.js

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

package/ChatPreview/components/ReplyChips/ReplyChips.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { ReplyChipsProps } from './types';
+/** Quick replies drawn as chips under the message, for the chats that do not put them in the bubble. */
+export declare function ReplyChips(props: ReplyChipsProps): ReactElement | null;

package/ChatPreview/components/ReplyChips/ReplyChips.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Chips } from './styles';
+/** Quick replies drawn as chips under the message, for the chats that do not put them in the bubble. */
+export function ReplyChips(props) {
+  const {
+    content,
+    look
+  } = props;
+  if (content.type !== 'quick_reply' || look.repliesInsideBubble || !content.buttons?.length) {
+    return null;
+  }
+  return _jsx(Chips, {
+    children: content.buttons.map(button => _jsx(Chip, {
+      "$skin": look.skin,
+      children: button.title
+    }, button.id))
+  });
+}

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

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

package/ChatPreview/components/ReplyChips/index.js

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

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

@@ -0,0 +1,7 @@
+import type { Skinned } from '../../styles';
+export declare const Chips: 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 Chip: 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/ReplyChips/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+import { CHAT_CHIP_RADIUS, CHAT_SCREEN_WIDTH, CHAT_SMALL_GAP, CHAT_THREAD_PADDING } from '../../constants';
+export const Chips = styled.div.withConfig({
+  displayName: "Chips",
+  componentId: "sc-oglekn-0"
+})(["display:flex;flex-wrap:wrap;gap:", "px;max-width:", "px;"], CHAT_SMALL_GAP, CHAT_SCREEN_WIDTH - CHAT_THREAD_PADDING * 2);
+export const Chip = styled.div.withConfig({
+  displayName: "Chip",
+  componentId: "sc-oglekn-1"
+})(["padding:", "px 12px;border:1px solid ", ";border-radius:", "px;background:", ";color:", ";font-size:", ";font-weight:", ";"], CHAT_SMALL_GAP, ({
+  $skin
+}) => $skin.chipBorder, CHAT_CHIP_RADIUS, Color.CLEAR, ({
+  $skin
+}) => $skin.accent, FontSize.SMALL, FontWeight.MEDIUM);

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

@@ -0,0 +1,3 @@
+import type { ChatPartProps } from '../types';
+/** Props of {@link ReplyChips}. */
+export type ReplyChipsProps = Pick<ChatPartProps, 'content' | 'look'>;

package/ChatPreview/components/ReplyChips/types.js

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

package/ChatPreview/components/StatusNotice/StatusNotice.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { StatusNoticeProps } from './types';
+/** Badge over a message the channel does not deliver as drawn; a blocked one lists its errors. */
+export declare function StatusNotice(props: StatusNoticeProps): ReactElement;

package/ChatPreview/components/StatusNotice/StatusNotice.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IssueLine, Notice, NoticeTitle } from './styles';
+import { CHAT_MAX_LISTED_ISSUES } from '../../constants';
+import { Lang } from '../../polyglot';
+const NOTICE = {
+  session: {
+    tone: 'warning',
+    message: 'DUMB.CHAT_PREVIEW.SESSION_ONLY'
+  },
+  fallback: {
+    tone: 'warning',
+    message: 'DUMB.CHAT_PREVIEW.FALLBACK_PARTIAL'
+  },
+  blocked: {
+    tone: 'danger',
+    message: 'DUMB.CHAT_PREVIEW.FALLBACK_INCOMPATIBLE'
+  }
+};
+/** Badge over a message the channel does not deliver as drawn; a blocked one lists its errors. */
+export function StatusNotice(props) {
+  const {
+    view,
+    errors
+  } = props;
+  const {
+    tone,
+    message
+  } = NOTICE[view];
+  const listed = view === 'blocked' ? errors.slice(0, CHAT_MAX_LISTED_ISSUES) : [];
+  return _jsxs(Notice, {
+    "$tone": tone,
+    "data-testid": "chat-status-notice",
+    children: [_jsx(NoticeTitle, {
+      children: _jsx(Lang, {
+        message: message
+      })
+    }), listed.map(issue => _jsx(IssueLine, {
+      children: issue.path ? `${issue.path}: ${issue.code}` : issue.code
+    }, `${issue.path}:${issue.code}`)), errors.length > listed.length && view === 'blocked' && _jsx(Lang, {
+      count: errors.length - listed.length,
+      message: "DUMB.CHAT_PREVIEW.MORE_ISSUES"
+    })]
+  });
+}

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

@@ -0,0 +1,2 @@
+export { StatusNotice } from './StatusNotice';
+export { NoFallback } from './styles';

package/ChatPreview/components/StatusNotice/index.js

@@ -0,0 +1,2 @@
+export { StatusNotice } from './StatusNotice';
+export { NoFallback } from './styles';

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

@@ -0,0 +1,15 @@
+export type NoticeTone = 'warning' | 'danger';
+export declare const Notice: 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;
+}, {
+    $tone: NoticeTone;
+}>> & string;
+export declare const NoticeTitle: 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 IssueLine: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const NoFallback: 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/StatusNotice/styles.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+export const Notice = styled.div.withConfig({
+  displayName: "Notice",
+  componentId: "sc-ifm2q0-0"
+})(["display:flex;flex-direction:column;gap:2px;padding:2px 8px;border-radius:", ";background:", ";color:", ";font-size:", ";"], ShapeRadius.CONTROL, ({
+  $tone
+}) => $tone === 'warning' ? Color.WARNING_LIGHT : Color.DANGER_LIGHT, ({
+  $tone
+}) => $tone === 'warning' ? Color.WARNING : Color.DANGER, FontSize.SMALL);
+export const NoticeTitle = styled.div.withConfig({
+  displayName: "NoticeTitle",
+  componentId: "sc-ifm2q0-1"
+})(["font-weight:", ";"], FontWeight.MEDIUM);
+export const IssueLine = styled.code.withConfig({
+  displayName: "IssueLine",
+  componentId: "sc-ifm2q0-2"
+})(["font-size:", ";"], FontSize.SMALL);
+export const NoFallback = styled.div.withConfig({
+  displayName: "NoFallback",
+  componentId: "sc-ifm2q0-3"
+})(["color:", ";font-size:", ";font-weight:", ";"], Color.DANGER, FontSize.SMALL, FontWeight.MEDIUM);

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

@@ -0,0 +1,9 @@
+import type { ChatView } from '../../helpers';
+import type { ChatIssue } from '../../types';
+/** Props of {@link StatusNotice}. */
+export type StatusNoticeProps = {
+    /** What the recipient gets. */
+    view: Exclude<ChatView, 'native'>;
+    /** Validator errors listed under a blocked message. */
+    errors: ChatIssue[];
+};

package/ChatPreview/components/StatusNotice/types.js

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

package/ChatPreview/components/index.d.ts

@@ -0,0 +1,4 @@
+export { NativeMessage } from './NativeMessage';
+export { NoFallback, StatusNotice } from './StatusNotice';
+export { ChatText } from './ChatText';
+export type { ChatPartProps } from './types';

package/ChatPreview/components/index.js

@@ -0,0 +1,3 @@
+export { NativeMessage } from './NativeMessage';
+export { NoFallback, StatusNotice } from './StatusNotice';
+export { ChatText } from './ChatText';

package/ChatPreview/components/types.d.ts

@@ -0,0 +1,13 @@
+import type { ChatChannelLook } from '../constants';
+import type { ChatChannel, ChatContent } from '../types';
+/** What every part of the drawn message needs to know. */
+export type ChatPartProps = {
+    /** Channel whose look is replicated. */
+    channel: ChatChannel;
+    /** Message to draw. */
+    content: ChatContent;
+    /** Look of the channel. */
+    look: ChatChannelLook;
+    /** Content paths the channel drops. */
+    dropped: Set<string>;
+};

package/ChatPreview/components/types.js

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

package/ChatPreview/constants.d.ts

@@ -0,0 +1,47 @@
+import type { ChatChannel, ChatRcsHeight, ChatRcsOrientation, ChatRcsThumbnailAlignment } from './types';
+/** Colours of a replicated chat app; they are the channel's, not Pushwoosh design tokens. */
+export type ChatSkin = {
+    headerBackground: string;
+    headerText: string;
+    chatBackground: string;
+    bubble: string;
+    bubbleText: string;
+    accent: string;
+    chipBorder: string;
+};
+/** Everything that differs between the replicated chat apps. */
+export type ChatChannelLook = {
+    skin: ChatSkin;
+    icon: 'sms' | 'whatsapp' | 'messenger' | 'line';
+    /** WhatsApp draws quick replies inside the bubble; the other chats draw them as chips under it. */
+    repliesInsideBubble: boolean;
+    /** WhatsApp applies its `*bold*`/`_italic_` markup; the other chats show the text as typed. */
+    markup: 'whatsapp' | 'plain';
+};
+export declare const CHAT_CHANNELS: Record<ChatChannel, ChatChannelLook>;
+export declare const CHAT_SCREEN_WIDTH = 320;
+export declare const CHAT_SCREEN_HEIGHT = 560;
+export declare const CHAT_SCREEN_RADIUS = 24;
+export declare const CHAT_THREAD_PADDING = 12;
+export declare const CHAT_BUBBLE_MAX_WIDTH = 260;
+export declare const CHAT_BUBBLE_RADIUS = 12;
+export declare const CHAT_BUBBLE_PADDING: {
+    vertical: number;
+    horizontal: number;
+};
+export declare const CHAT_CARD_WIDTH = 220;
+export declare const CHAT_MEDIA_HEIGHT = 140;
+export declare const CHAT_GAP = 8;
+export declare const CHAT_SMALL_GAP = 6;
+export declare const CHAT_CHIP_RADIUS = 16;
+/** Shown issues are capped so a broken message does not push the preview off screen. */
+export declare const CHAT_MAX_LISTED_ISSUES = 3;
+/** RCS rich card media heights from the RBM spec: 112, 168 and 264 dp. */
+export declare const RCS_MEDIA_HEIGHT: Record<ChatRcsHeight, number>;
+/** Share of a horizontal RCS card the thumbnail takes. */
+export declare const RCS_THUMBNAIL_SHARE = 0.4;
+export declare const RCS_DEFAULT_LAYOUT: {
+    orientation: ChatRcsOrientation;
+    height: ChatRcsHeight;
+    thumbnailAlignment: ChatRcsThumbnailAlignment;
+};

package/ChatPreview/constants.js

@@ -0,0 +1,89 @@
+import { WHATSAPP_COLOR } from '../WhatsAppPreview/constants';
+export const CHAT_CHANNELS = {
+  whatsapp: {
+    skin: {
+      headerBackground: '#008069',
+      headerText: '#FFFFFF',
+      chatBackground: '#EFEAE2',
+      bubble: WHATSAPP_COLOR.INCOMING_BUBBLE,
+      bubbleText: '#111B21',
+      accent: '#027EB5',
+      chipBorder: '#E9EDEF'
+    },
+    icon: 'whatsapp',
+    repliesInsideBubble: true,
+    markup: 'whatsapp'
+  },
+  rcs: {
+    skin: {
+      headerBackground: '#FFFFFF',
+      headerText: '#1F1F1F',
+      chatBackground: '#FFFFFF',
+      bubble: '#E9EEF6',
+      bubbleText: '#1F1F1F',
+      accent: '#0B57D0',
+      chipBorder: '#C4C7C5'
+    },
+    icon: 'sms',
+    repliesInsideBubble: false,
+    markup: 'plain'
+  },
+  fbmessenger: {
+    skin: {
+      headerBackground: '#FFFFFF',
+      headerText: '#050505',
+      chatBackground: '#FFFFFF',
+      bubble: '#F0F0F0',
+      bubbleText: '#050505',
+      accent: '#0084FF',
+      chipBorder: '#0084FF'
+    },
+    icon: 'messenger',
+    repliesInsideBubble: false,
+    markup: 'plain'
+  },
+  line: {
+    skin: {
+      headerBackground: '#06C755',
+      headerText: '#FFFFFF',
+      chatBackground: '#8CABD9',
+      bubble: '#FFFFFF',
+      bubbleText: '#111111',
+      accent: '#06C755',
+      chipBorder: '#06C755'
+    },
+    icon: 'line',
+    repliesInsideBubble: false,
+    markup: 'plain'
+  }
+};
+export const CHAT_SCREEN_WIDTH = 320;
+export const CHAT_SCREEN_HEIGHT = 560;
+export const CHAT_SCREEN_RADIUS = 24;
+export const CHAT_THREAD_PADDING = 12;
+export const CHAT_BUBBLE_MAX_WIDTH = 260;
+export const CHAT_BUBBLE_RADIUS = 12;
+export const CHAT_BUBBLE_PADDING = {
+  vertical: 8,
+  horizontal: 10
+};
+export const CHAT_CARD_WIDTH = 220;
+export const CHAT_MEDIA_HEIGHT = 140;
+export const CHAT_GAP = 8;
+export const CHAT_SMALL_GAP = 6;
+export const CHAT_CHIP_RADIUS = 16;
+/** Shown issues are capped so a broken message does not push the preview off screen. */
+export const CHAT_MAX_LISTED_ISSUES = 3;
+/** RCS rich card media heights from the RBM spec: 112, 168 and 264 dp. */
+export const RCS_MEDIA_HEIGHT = {
+  SHORT: 112,
+  MEDIUM: 168,
+  TALL: 264
+};
+/** Share of a horizontal RCS card the thumbnail takes. */
+export const RCS_THUMBNAIL_SHARE = 0.4;
+export const RCS_DEFAULT_LAYOUT = {
+  orientation: 'VERTICAL',
+  height: 'MEDIUM',
+  thumbnailAlignment: 'LEFT'
+};

package/ChatPreview/helpers.d.ts

@@ -0,0 +1,22 @@
+import { RCS_DEFAULT_LAYOUT } from './constants';
+import type { ChatButton, ChatCard, ChatChannel, ChatCompatibility, ChatContent, ChatHeader, ChatIssue, ChatRcsLayout } from './types';
+/** What the preview draws for a channel status. */
+export type ChatView = 'native'
+/** WhatsApp: the template does not fit, the 24h session message does. */
+ | 'session' | 'fallback' | 'blocked';
+/** Maps a compatibility status to what the recipient actually gets. */
+export declare function viewOf(channel: ChatChannel, status: ChatCompatibility | undefined): ChatView;
+/** Text the channel receives when it cannot render the content type. */
+export declare function fallbackTextOf(content: ChatContent): string;
+/** Buttons drawn below the bubble text: quick replies, call-to-action links and phone numbers. */
+export declare function bubbleButtonsOf(content: ChatContent): ChatButton[];
+/** Cards of a card or carousel message; a plain card is a one-slide carousel. */
+export declare function cardsOf(content: ChatContent): ChatCard[];
+export declare function hasHeader(header: ChatHeader | undefined): boolean;
+/** Whether the native message has anything to draw; a card message draws only its card. */
+export declare function hasNativeContent(content: ChatContent): boolean;
+/** Content paths the channel drops; the preview marks them as not delivered. */
+export declare function droppedPathsOf(issues: ChatIssue[] | undefined): Set<string>;
+export declare function errorsOf(issues: ChatIssue[] | undefined): ChatIssue[];
+/** RCS card layout with the Twilio defaults filled in. */
+export declare function rcsLayoutOf(layout: ChatRcsLayout | undefined): typeof RCS_DEFAULT_LAYOUT;

package/ChatPreview/helpers.js

@@ -0,0 +1,57 @@
+import { RCS_DEFAULT_LAYOUT } from './constants';
+/** Maps a compatibility status to what the recipient actually gets. */
+export function viewOf(channel, status) {
+  if (status === 'incompatible') {
+    return 'blocked';
+  }
+  if (status === 'partial') {
+    return channel === 'whatsapp' ? 'session' : 'fallback';
+  }
+  return 'native';
+}
+/** Text the channel receives when it cannot render the content type. */
+export function fallbackTextOf(content) {
+  return content.fallback || content.body || '';
+}
+/** Buttons drawn below the bubble text: quick replies, call-to-action links and phone numbers. */
+export function bubbleButtonsOf(content) {
+  return content.type === 'quick_reply' || content.type === 'call_to_action' ? content.buttons ?? [] : [];
+}
+/** Cards of a card or carousel message; a plain card is a one-slide carousel. */
+export function cardsOf(content) {
+  if (content.type === 'card') {
+    return content.cards?.slice(0, 1) ?? [];
+  }
+  return content.type === 'carousel' ? content.cards ?? [] : [];
+}
+export function hasHeader(header) {
+  return Boolean(header?.text || header?.media?.url);
+}
+function hasCardContent(card) {
+  return Boolean(card.media?.url || card.title || card.body || card.footer || card.buttons?.length);
+}
+/** Whether the native message has anything to draw; a card message draws only its card. */
+export function hasNativeContent(content) {
+  if (content.type === 'custom_flex') {
+    return true;
+  }
+  if (content.type === 'card') {
+    return cardsOf(content).some(hasCardContent);
+  }
+  return Boolean(content.body || content.footer || content.media?.url || hasHeader(content.header) || cardsOf(content).some(hasCardContent) || content.list || content.buttons?.length);
+}
+/** Content paths the channel drops; the preview marks them as not delivered. */
+export function droppedPathsOf(issues) {
+  return new Set((issues ?? []).filter(issue => issue.code === 'field_dropped').map(issue => issue.path));
+}
+export function errorsOf(issues) {
+  return (issues ?? []).filter(issue => issue.severity === 'error');
+}
+/** RCS card layout with the Twilio defaults filled in. */
+export function rcsLayoutOf(layout) {
+  return {
+    orientation: layout?.orientation ?? RCS_DEFAULT_LAYOUT.orientation,
+    height: layout?.height ?? RCS_DEFAULT_LAYOUT.height,
+    thumbnailAlignment: layout?.thumbnail_alignment ?? RCS_DEFAULT_LAYOUT.thumbnailAlignment
+  };
+}

package/ChatPreview/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatPreview } from './ChatPreview';
+export type { ChatButton, ChatButtonKind, ChatCard, ChatChannel, ChatCompatibility, ChatContent, ChatContentType, ChatHeader, ChatIssue, ChatIssueSeverity, ChatList, ChatListItem, ChatMedia, ChatMediaKind, ChatPreviewProps, ChatRcsHeight, ChatRcsLayout, ChatRcsOrientation, ChatRcsThumbnailAlignment, } from './types';

package/ChatPreview/index.js

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

package/ChatPreview/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type ChatPreviewMessages } from './types';
+export declare const Lang: import("react").FC<import("../../polyglot").LangProps<ChatPreviewMessages>>, useLang: () => (props: import("../../polyglot").LangProps<ChatPreviewMessages>) => string;

package/ChatPreview/polyglot/index.js

@@ -0,0 +1,34 @@
+import { messages as ar } from './messages_ar';
+import { messages as bn } from './messages_bn';
+import { messages as de } from './messages_de';
+import { messages as en } from './messages_en';
+import { messages as es } from './messages_es';
+import { messages as fr } from './messages_fr';
+import { messages as he } from './messages_he';
+import { messages as hi } from './messages_hi';
+import { messages as ja } from './messages_ja';
+import { messages as ko } from './messages_ko';
+import { messages as pt } from './messages_pt';
+import { messages as ru } from './messages_ru';
+import { messages as th } from './messages_th';
+import { messages as zh } from './messages_zh';
+import { createLang } from '../../polyglot';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  ar,
+  bn,
+  de,
+  en,
+  es,
+  fr,
+  he,
+  hi,
+  ja,
+  ko,
+  pt,
+  ru,
+  th,
+  zh
+});

package/ChatPreview/polyglot/messages_ar.d.ts

@@ -0,0 +1,3 @@
+import { type ChatPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChatPreviewMessages>;

package/ChatPreview/polyglot/messages_ar.js

@@ -0,0 +1,14 @@
+export const messages = {
+  'DUMB.CHAT_PREVIEW.FALLBACK_PARTIAL': 'مدعوم جزئيًا — يُرسل النص البديل',
+  'DUMB.CHAT_PREVIEW.FALLBACK_INCOMPATIBLE': 'يحتوي على أخطاء — لن يُرسل',
+  'DUMB.CHAT_PREVIEW.SESSION_ONLY': 'يُرسل فقط ضمن نافذة الـ 24 ساعة',
+  'DUMB.CHAT_PREVIEW.NO_FALLBACK': 'لا يوجد نص بديل — لن يُرسل شيء',
+  'DUMB.CHAT_PREVIEW.NOT_DELIVERED': 'لا يتم تسليمه',
+  'DUMB.CHAT_PREVIEW.MORE_ISSUES': '+{{count}} مشكلات أخرى',
+  'DUMB.CHAT_PREVIEW.FLEX': 'رسالة LINE Flex',
+  'DUMB.CHAT_PREVIEW.EMPTY': 'الرسالة فارغة…',
+  'DUMB.CHAT_PREVIEW.SENDER': 'علامتك التجارية',
+  'DUMB.CHAT_PREVIEW.DOCUMENT': 'مستند',
+  'DUMB.CHAT_PREVIEW.AUDIO': 'رسالة صوتية',
+  'DUMB.CHAT_PREVIEW.IMAGE_ALT': 'صورة مرفقة'
+};

package/ChatPreview/polyglot/messages_bn.d.ts

@@ -0,0 +1,3 @@
+import { type ChatPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<ChatPreviewMessages>;