@botonic/react 0.41.1-alpha.0 → 0.42.0-alpha.0

package/src/components/system-debug-trace/events/redirect-flow.tsx

@@ -0,0 +1,31 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { ArrowProgressSvg } from '../icons/arrow-progress'
+import { DebugEventConfig } from '../types'
+
+export interface RedirectFlowDebugEvent {
+  action: EventAction.RedirectFlow
+  flow_id: string
+  flow_name: string
+  flow_target_id: string
+  flow_target_name: string
+}
+
+export const getRedirectFlowEventConfig = (
+  data: RedirectFlowDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Redirected to flow <span>- {data.flow_target_name}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.RedirectFlow,
+    title,
+    component: null,
+    icon: <ArrowProgressSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/events/webview-action-triggered.tsx

@@ -0,0 +1,29 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { WindowRestoreSvg } from '../icons/window-restore'
+import { DebugEventConfig } from '../types'
+
+export interface WebviewActionTriggeredDebugEvent {
+  action: EventAction.WebviewActionTriggered
+  webview_target_id: string
+  webview_name: string
+}
+
+export const getWebviewActionTriggeredEventConfig = (
+  data: WebviewActionTriggeredDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Webview action triggered <span>- {data.webview_name}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.WebviewActionTriggered,
+    title,
+    component: null,
+    icon: <WindowRestoreSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/icons/arrow-progress.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const ArrowProgressSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M294.8 97.8C303.8 94.1 314.1 96.1 321 103L361 143C370.4 152.4 370.4 167.6 361 176.9L321 216.9C314.1 223.8 303.8 225.8 294.8 222.1C285.8 218.4 280 209.7 280 200L280 192L176 192C149.5 192 128 213.5 128 240C128 266.5 149.5 288 176 288L464 288C525.9 288 576 338.1 576 400C576 446.4 547.8 486.1 507.7 503.2C498.4 527.1 475.2 544 448 544C412.7 544 384 515.3 384 480C384 444.7 412.7 416 448 416C466.6 416 483.4 423.9 495 436.6C505.4 427.8 512 414.7 512 400C512 373.5 490.5 352 464 352L176 352C114.1 352 64 301.9 64 240C64 178.1 114.1 128 176 128L280 128L280 120C280 110.3 285.8 101.5 294.8 97.8zM480 96C515.3 96 544 124.7 544 160C544 195.3 515.3 224 480 224C444.7 224 416 195.3 416 160C416 124.7 444.7 96 480 96zM215.4 512C204.3 531.1 183.7 544 160 544C124.7 544 96 515.3 96 480C96 444.7 124.7 416 160 416C183.7 416 204.4 428.9 215.4 448L248 448L248 440C248 430.3 253.8 421.5 262.8 417.8C271.8 414.1 282.1 416.1 289 423L329 463C338.4 472.4 338.4 487.6 329 496.9L289 536.9C282.1 543.8 271.8 545.8 262.8 542.1C253.8 538.4 248 529.7 248 520L248 512L215.4 512z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/code.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const CodeSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M392.8 65.2C375.8 60.3 358.1 70.2 353.2 87.2L225.2 535.2C220.3 552.2 230.2 569.9 247.2 574.8C264.2 579.7 281.9 569.8 286.8 552.8L414.8 104.8C419.7 87.8 409.8 70.1 392.8 65.2zM457.4 201.3C444.9 213.8 444.9 234.1 457.4 246.6L530.8 320L457.4 393.4C444.9 405.9 444.9 426.2 457.4 438.7C469.9 451.2 490.2 451.2 502.7 438.7L598.7 342.7C611.2 330.2 611.2 309.9 598.7 297.4L502.7 201.4C490.2 188.9 469.9 188.9 457.4 201.4zM182.7 201.3C170.2 188.8 149.9 188.8 137.4 201.3L41.4 297.3C28.9 309.8 28.9 330.1 41.4 342.6L137.4 438.6C149.9 451.1 170.2 451.1 182.7 438.6C195.2 426.1 195.2 405.8 182.7 393.3L109.3 320L182.6 246.6C195.1 234.1 195.1 213.8 182.6 201.3z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/split.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const SplitSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M467.8 66.4C479.8 61.4 493.5 64.2 502.7 73.3L566.7 137.3C572.7 143.3 576.1 151.4 576.1 159.9C576.1 168.4 572.7 176.5 566.7 182.5L502.7 246.5C493.5 255.7 479.8 258.4 467.8 253.4C455.8 248.4 448 236.9 448 224L448 192L410.5 192C402 192 393.9 195.4 387.9 201.4L269.3 320L387.9 438.6C393.9 444.6 402 448 410.5 448L448 448L448 416C448 403.1 455.8 391.4 467.8 386.4C479.8 381.4 493.5 384.2 502.7 393.3L566.7 457.3C572.7 463.3 576.1 471.4 576.1 479.9C576.1 488.4 572.7 496.5 566.7 502.5L502.7 566.5C493.5 575.7 479.8 578.4 467.8 573.4C455.8 568.4 448 556.9 448 544L448 512L410.5 512C385 512 360.6 501.9 342.6 483.9L210.7 352L96 352C78.3 352 64 337.7 64 320C64 302.3 78.3 288 96 288L210.7 288L342.6 156.1C360.6 138.1 385 128 410.5 128L448 128L448 96C448 83.1 455.8 71.4 467.8 66.4z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/window-restore.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const WindowRestoreSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M544 160L192 160C192 124.7 220.7 96 256 96L544 96C579.3 96 608 124.7 608 160L608 352C608 387.3 579.3 416 544 416L496 416L496 352L544 352L544 160zM32 288C32 252.7 60.7 224 96 224L384 224C419.3 224 448 252.7 448 288L448 480C448 515.3 419.3 544 384 544L96 544C60.7 544 32 515.3 32 480L32 288zM96 328C96 341.3 106.7 352 120 352L360 352C373.3 352 384 341.3 384 328C384 314.7 373.3 304 360 304L120 304C106.7 304 96 314.7 96 328z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/styles.ts

@@ -120,13 +120,14 @@ export const StyledDebugLabel = styled.strong`
 `
 
 export const StyledDebugValue = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
   font-weight: 600;
   font-size: 12px;
   color: ${COLORS.N700};
   line-height: 1.5;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
 
   > svg {
     width: 14px;
@@ -134,7 +135,9 @@ export const StyledDebugValue = styled.div`
     min-width: 14px;
     min-height: 14px;
     flex-shrink: 0;
-    display: block;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 8px;
   }
 `
 

package/src/components/system-debug-trace/types.ts

@@ -2,11 +2,18 @@ import React from 'react'
 
 import {
   AiAgentDebugEvent,
+  BotActionDebugEvent,
+  ConditionalChannelDebugEvent,
+  ConditionalCountryDebugEvent,
+  ConditionalCustomDebugEvent,
+  ConditionalQueueStatusDebugEvent,
   FallbackDebugEvent,
   HandoffSuccessDebugEvent,
   KeywordDebugEvent,
   KnowledgeBaseDebugEvent,
+  RedirectFlowDebugEvent,
   SmartIntentDebugEvent,
+  WebviewActionTriggeredDebugEvent,
 } from './events'
 
 export interface IconProps {
@@ -21,6 +28,13 @@ export type DebugEvent =
   | FallbackDebugEvent
   | SmartIntentDebugEvent
   | HandoffSuccessDebugEvent
+  | BotActionDebugEvent
+  | ConditionalChannelDebugEvent
+  | ConditionalCountryDebugEvent
+  | ConditionalCustomDebugEvent
+  | ConditionalQueueStatusDebugEvent
+  | RedirectFlowDebugEvent
+  | WebviewActionTriggeredDebugEvent
 
 export interface DebugEventConfig {
   action: string

package/src/components/whatsapp-media-carousel.tsx

@@ -61,9 +61,6 @@ const serialize = (message: string) => {
   return { text: message }
 }
 
-/*
-  Reference: https://developers.facebook.com/docs/whatsapp/business-management-api/message-templates/media-card-carousel-templates
-*/
 export const WhatsappMediaCarousel = (props: WhatsappMediaCarouselProps) => {
   const renderBrowser = () => {
     // Return a dummy message for browser

package/src/index-types.ts

@@ -81,6 +81,13 @@ interface AddSystemResponseArgs {
   response: any
 }
 
+export interface MinimalHubtypeMessage {
+  id: string
+  type: string
+  action: string
+  text: string
+}
+
 export interface PreviewUtils {
   getChunkIdsGroupedBySource: (
     chunkIds: string[]
@@ -88,6 +95,8 @@ export interface PreviewUtils {
   onClickOpenChunks: (
     chunkIdsGroupedBySource: ChunkIdsGroupedBySourceData[]
   ) => void
+  getMessageById: (messageId: string) => Promise<MinimalHubtypeMessage>
+  trackPreviewEventOpened: (eventProperties: Record<string, unknown>) => void
 }
 
 export interface WebchatArgs {

package/src/webchat/context/index.tsx

@@ -1,5 +1,7 @@
 import { createContext } from 'react'
 
+import { ChunkIdsGroupedBySourceData } from '../../components/system-debug-trace/events/knowledge-bases-types'
+import { MinimalHubtypeMessage } from '../../index-types'
 import { WebchatContextProps, WebchatState } from './types'
 
 export { ClientSession, WebchatState } from './types'
@@ -73,6 +75,21 @@ export const WebchatContext = createContext<WebchatContextProps>({
     return
   },
   webchatState: {} as WebchatState,
+  previewUtils: {
+    trackPreviewEventOpened: () => {
+      return
+    },
+    getChunkIdsGroupedBySource: async () => {
+      return [] as ChunkIdsGroupedBySourceData[]
+    },
+    onClickOpenChunks: () => {
+      return
+    },
+    getMessageById: async () => {
+      return {} as MinimalHubtypeMessage
+    },
+  },
+
   trackEvent: async () => {
     return
   },

package/lib/cjs/components/whatsapp-interactive-media-carousel.d.ts

@@ -1,15 +0,0 @@
-interface ActionCard {
-    buttonText: string;
-    buttonUrl: string;
-    imageLink: string;
-}
-interface Card {
-    text: string;
-    action: ActionCard;
-}
-export interface WhatsappInteractiveMediaCarouselProps {
-    cards: Card[];
-    textMessage: string;
-}
-export declare const WhatsappInteractiveMediaCarousel: (props: WhatsappInteractiveMediaCarouselProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/cjs/components/whatsapp-interactive-media-carousel.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WhatsappInteractiveMediaCarousel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const util_1 = require("../util");
-const button_1 = require("./button");
-const carousel_1 = require("./carousel");
-const element_1 = require("./element");
-const constants_1 = require("./multichannel/whatsapp/constants");
-const pic_1 = require("./pic");
-const title_1 = require("./title");
-/*
-  Reference: https://developers.facebook.com/docs/whatsapp/cloud-api/messages/interactive-media-carousel-messages/
-*/
-const WhatsappInteractiveMediaCarousel = (props) => {
-    return ((0, jsx_runtime_1.jsx)(carousel_1.Carousel, Object.assign({ text: (0, util_1.truncateText)(props.textMessage, constants_1.WHATSAPP_MAX_BODY_CHARS) }, { children: props.cards.map((card, index) => ((0, jsx_runtime_1.jsxs)(element_1.Element, { children: [(0, jsx_runtime_1.jsx)(pic_1.Pic, { src: card.action.imageLink }), (0, jsx_runtime_1.jsx)(title_1.Title, { children: (0, util_1.truncateText)(card.text, constants_1.WHATSAPP_MAX_CAROUSEL_CARD_TEXT_CHARS) }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ url: card.action.buttonUrl }, { children: (0, util_1.truncateText)(card.action.buttonText, constants_1.WHATSAPP_MAX_BUTTON_CHARS) }))] }, index))) })));
-};
-exports.WhatsappInteractiveMediaCarousel = WhatsappInteractiveMediaCarousel;
-//# sourceMappingURL=whatsapp-interactive-media-carousel.js.map

package/lib/cjs/components/whatsapp-interactive-media-carousel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"whatsapp-interactive-media-carousel.js","sourceRoot":"","sources":["../../../src/components/whatsapp-interactive-media-carousel.tsx"],"names":[],"mappings":";;;;AAEA,kCAAsC;AACtC,qCAAiC;AACjC,yCAAqC;AACrC,uCAAmC;AACnC,iEAI0C;AAC1C,+BAA2B;AAC3B,mCAA+B;AAkB/B;;EAEE;AACK,MAAM,gCAAgC,GAAG,CAC9C,KAA4C,EAC5C,EAAE;IACF,OAAO,CACL,uBAAC,mBAAQ,kBAAC,IAAI,EAAE,IAAA,mBAAY,EAAC,KAAK,CAAC,WAAW,EAAE,mCAAuB,CAAC,gBACrE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,wBAAC,iBAAO,eACN,uBAAC,SAAG,IAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,GAAI,EACnC,uBAAC,aAAK,cACH,IAAA,mBAAY,EAAC,IAAI,CAAC,IAAI,EAAE,iDAAqC,CAAC,GACzD,EACR,uBAAC,eAAM,kBAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,gBAC/B,IAAA,mBAAY,EAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,qCAAyB,CAAC,IACzD,KAPG,KAAK,CAQT,CACX,CAAC,IACO,CACZ,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,gCAAgC,oCAkB5C"}

package/lib/esm/components/whatsapp-interactive-media-carousel.d.ts

@@ -1,15 +0,0 @@
-interface ActionCard {
-    buttonText: string;
-    buttonUrl: string;
-    imageLink: string;
-}
-interface Card {
-    text: string;
-    action: ActionCard;
-}
-export interface WhatsappInteractiveMediaCarouselProps {
-    cards: Card[];
-    textMessage: string;
-}
-export declare const WhatsappInteractiveMediaCarousel: (props: WhatsappInteractiveMediaCarouselProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/esm/components/whatsapp-interactive-media-carousel.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { truncateText } from '../util';
-import { Button } from './button';
-import { Carousel } from './carousel';
-import { Element } from './element';
-import { WHATSAPP_MAX_BODY_CHARS, WHATSAPP_MAX_BUTTON_CHARS, WHATSAPP_MAX_CAROUSEL_CARD_TEXT_CHARS, } from './multichannel/whatsapp/constants';
-import { Pic } from './pic';
-import { Title } from './title';
-/*
-  Reference: https://developers.facebook.com/docs/whatsapp/cloud-api/messages/interactive-media-carousel-messages/
-*/
-export const WhatsappInteractiveMediaCarousel = (props) => {
-    return (_jsx(Carousel, Object.assign({ text: truncateText(props.textMessage, WHATSAPP_MAX_BODY_CHARS) }, { children: props.cards.map((card, index) => (_jsxs(Element, { children: [_jsx(Pic, { src: card.action.imageLink }), _jsx(Title, { children: truncateText(card.text, WHATSAPP_MAX_CAROUSEL_CARD_TEXT_CHARS) }), _jsx(Button, Object.assign({ url: card.action.buttonUrl }, { children: truncateText(card.action.buttonText, WHATSAPP_MAX_BUTTON_CHARS) }))] }, index))) })));
-};
-//# sourceMappingURL=whatsapp-interactive-media-carousel.js.map

package/lib/esm/components/whatsapp-interactive-media-carousel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"whatsapp-interactive-media-carousel.js","sourceRoot":"","sources":["../../../src/components/whatsapp-interactive-media-carousel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,qCAAqC,GACtC,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAkB/B;;EAEE;AACF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,KAA4C,EAC5C,EAAE;IACF,OAAO,CACL,KAAC,QAAQ,kBAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,uBAAuB,CAAC,gBACrE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,MAAC,OAAO,eACN,KAAC,GAAG,IAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,GAAI,EACnC,KAAC,KAAK,cACH,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,qCAAqC,CAAC,GACzD,EACR,KAAC,MAAM,kBAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,gBAC/B,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,yBAAyB,CAAC,IACzD,KAPG,KAAK,CAQT,CACX,CAAC,IACO,CACZ,CAAA;AACH,CAAC,CAAA"}

package/src/components/whatsapp-interactive-media-carousel.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import { truncateText } from '../util'
-import { Button } from './button'
-import { Carousel } from './carousel'
-import { Element } from './element'
-import {
-  WHATSAPP_MAX_BODY_CHARS,
-  WHATSAPP_MAX_BUTTON_CHARS,
-  WHATSAPP_MAX_CAROUSEL_CARD_TEXT_CHARS,
-} from './multichannel/whatsapp/constants'
-import { Pic } from './pic'
-import { Title } from './title'
-
-interface ActionCard {
-  buttonText: string
-  buttonUrl: string
-  imageLink: string
-}
-
-interface Card {
-  text: string
-  action: ActionCard
-}
-
-export interface WhatsappInteractiveMediaCarouselProps {
-  cards: Card[]
-  textMessage: string
-}
-
-/*
-  Reference: https://developers.facebook.com/docs/whatsapp/cloud-api/messages/interactive-media-carousel-messages/
-*/
-export const WhatsappInteractiveMediaCarousel = (
-  props: WhatsappInteractiveMediaCarouselProps
-) => {
-  return (
-    <Carousel text={truncateText(props.textMessage, WHATSAPP_MAX_BODY_CHARS)}>
-      {props.cards.map((card, index) => (
-        <Element key={index}>
-          <Pic src={card.action.imageLink} />
-          <Title>
-            {truncateText(card.text, WHATSAPP_MAX_CAROUSEL_CARD_TEXT_CHARS)}
-          </Title>
-          <Button url={card.action.buttonUrl}>
-            {truncateText(card.action.buttonText, WHATSAPP_MAX_BUTTON_CHARS)}
-          </Button>
-        </Element>
-      ))}
-    </Carousel>
-  )
-}