plugin-flow-builder: WebviewContentsContext and useWebviewContents

packages/botonic-core/src/models/legacy-types.ts

@@ -170,7 +170,8 @@ export interface Session {
   __retries: number
   is_first_interaction: boolean
   last_session?: any
-  organization?: string
+  organization: string
+  organization_id: string
   user: SessionUser
   // after handoff
   _hubtype_case_status?: CaseStatusType

packages/botonic-core/tests/helpers/routing.ts

@@ -9,6 +9,8 @@ export function testSession(): Session {
     user: { id: 'userid', provider: PROVIDER.DEV },
     bot: { id: 'bot_id' },
     is_first_interaction: true,
+    organization: 'test_org',
+    organization_id: '1234567890',
     __retries: 0,
   }
 }

packages/botonic-plugin-flow-builder/src/constants.ts

@@ -1,3 +1,5 @@
+export const FLOW_BUILDER_API_URL_PROD =
+  'https://api.ent0.flowbuilder.prod.hubtype.com'
 export const SEPARATOR = '|'
 export const SOURCE_INFO_SEPARATOR = `${SEPARATOR}source_`
 export const VARIABLE_PATTERN = /{([^}]+)}/g

packages/botonic-plugin-flow-builder/src/index.ts

@@ -2,7 +2,11 @@ import { Plugin, PluginPreRequest, Session } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
 
 import { FlowBuilderApi } from './api'
-import { SEPARATOR, SOURCE_INFO_SEPARATOR } from './constants'
+import {
+  FLOW_BUILDER_API_URL_PROD,
+  SEPARATOR,
+  SOURCE_INFO_SEPARATOR,
+} from './constants'
 import {
   FlowCarousel,
   FlowContent,
@@ -24,6 +28,7 @@ import {
 import { DEFAULT_FUNCTIONS } from './functions'
 import {
   BotonicPluginFlowBuilderOptions,
+  FlowBuilderJSONVersion,
   KnowledgeBaseResponse,
   PayloadParamsBase,
 } from './types'
@@ -48,7 +53,9 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   ) => Promise<KnowledgeBaseResponse>
 
   constructor(readonly options: BotonicPluginFlowBuilderOptions) {
-    this.flowUrl = options.flowUrl
+    const apiUrl = options.apiUrl || FLOW_BUILDER_API_URL_PROD
+    const jsonVersion = options.jsonVersion || FlowBuilderJSONVersion.LATEST
+    this.flowUrl = `${apiUrl}/flow/${jsonVersion}`
     this.flow = options.flow
     this.getLocale = options.getLocale
     this.getAccessToken = resolveGetAccessToken(options)
@@ -229,4 +236,9 @@ export default class BotonicPluginFlowBuilder implements Plugin {
 
 export * from './action'
 export * from './content-fields'
-export { BotonicPluginFlowBuilderOptions, PayloadParamsBase } from './types'
+export {
+  BotonicPluginFlowBuilderOptions,
+  FlowBuilderJSONVersion,
+  PayloadParamsBase,
+} from './types'
+export * from './webview'

packages/botonic-plugin-flow-builder/src/types.ts

@@ -4,7 +4,8 @@ import { ActionRequest } from '@botonic/react'
 import { HtFlowBuilderData } from './content-fields/hubtype-fields'
 
 export interface BotonicPluginFlowBuilderOptions {
-  flowUrl: string
+  apiUrl?: string
+  jsonVersion?: FlowBuilderJSONVersion
   flow?: HtFlowBuilderData
   customFunctions?: Record<any, any>
   getLocale: (session: Session) => string
@@ -31,6 +32,11 @@ export enum ProcessEnvNodeEnvs {
   DEVELOPMENT = 'development',
 }
 
+export enum FlowBuilderJSONVersion {
+  DRAFT = 'draft',
+  LATEST = 'latest',
+}
+
 export interface KnowledgeBaseResponse {
   answer: string
   hasKnowledge: boolean

packages/botonic-plugin-flow-builder/src/webview/contents-context.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react'
+
+import { WebviewContentsContextType } from './types'
+
+export const WebviewContentsContext = createContext<WebviewContentsContextType>(
+  {
+    getTextContent: () => undefined,
+    getImageSrc: () => undefined,
+    setCurrentLocale: () => undefined,
+  }
+)

packages/botonic-plugin-flow-builder/src/webview/index.ts

@@ -0,0 +1,3 @@
+export { WebviewContentsContext } from './contents-context'
+export * from './types'
+export { useWebviewContents } from './use-webview-contents'

packages/botonic-plugin-flow-builder/src/webview/types.ts

@@ -0,0 +1,47 @@
+import { FlowBuilderJSONVersion } from '../types'
+
+export enum WebviewContentType {
+  TEXT = 'webview-text',
+  IMAGE = 'webview-image',
+}
+
+export interface WebviewContentsResponse {
+  webview_contents: (WebviewTextContent | WebviewImageContent)[]
+}
+
+export interface WebviewTextContent {
+  code: string
+  type: WebviewContentType.TEXT
+  content: {
+    text: { message: string; locale: string }[]
+  }
+}
+
+export interface WebviewImageContent {
+  code: string
+  type: WebviewContentType.IMAGE
+  content: {
+    image: { file: string; locale: string }[]
+  }
+}
+
+export interface UseWebviewContentsProps {
+  apiUrl?: string
+  version?: FlowBuilderJSONVersion
+  orgId: string
+  botId: string
+  webviewId: string
+  locale: string
+}
+
+export interface UseWebviewContents {
+  isLoading: boolean
+  error: boolean
+  webviewContentsContext: WebviewContentsContextType
+}
+
+export interface WebviewContentsContextType {
+  getTextContent: (code: string) => string | undefined
+  getImageSrc: (code: string) => string | undefined
+  setCurrentLocale: (locale: string) => void
+}

packages/botonic-plugin-flow-builder/src/webview/use-webview-contents.ts

@@ -0,0 +1,78 @@
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+
+import { FLOW_BUILDER_API_URL_PROD } from '../constants'
+import { FlowBuilderJSONVersion } from '../types'
+import {
+  UseWebviewContents,
+  UseWebviewContentsProps,
+  WebviewContentsResponse,
+  WebviewContentType,
+  WebviewImageContent,
+  WebviewTextContent,
+} from './types'
+
+export function useWebviewContents({
+  apiUrl = FLOW_BUILDER_API_URL_PROD,
+  version = FlowBuilderJSONVersion.LATEST,
+  orgId,
+  botId,
+  webviewId,
+  locale,
+}: UseWebviewContentsProps): UseWebviewContents {
+  const [textContents, setTextContents] = useState<WebviewTextContent[]>()
+  const [imageContents, setImageContents] = useState<WebviewImageContent[]>()
+  const [currentLocale, setCurrentLocale] = useState(locale)
+  const [isLoading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    const getResponseContents = async () => {
+      setLoading(true)
+      const url = `${apiUrl}/webview/${version}`
+      try {
+        const response = await axios.get<WebviewContentsResponse>(url, {
+          params: { org: orgId, bot: botId, webview: webviewId },
+        })
+
+        const textResponseContents = response.data.webview_contents.filter(
+          webviewContent => webviewContent.type === WebviewContentType.TEXT
+        ) as WebviewTextContent[]
+        setTextContents(textResponseContents)
+
+        const imageResponseContents = response.data.webview_contents.filter(
+          webviewContent => webviewContent.type === WebviewContentType.IMAGE
+        ) as WebviewImageContent[]
+        setImageContents(imageResponseContents)
+      } catch (error) {
+        console.error('Error fetching webview contents:', error)
+        setError(true)
+      } finally {
+        setLoading(false)
+      }
+    }
+    getResponseContents()
+  }, [])
+
+  const getTextContent = (contentID: string): string | undefined => {
+    return textContents
+      ?.find(textContent => textContent.code === contentID)
+      ?.content.text.find(text => text.locale === currentLocale)?.message
+  }
+
+  const getImageSrc = (contentID: string): string | undefined => {
+    return imageContents
+      ?.find(imageContent => imageContent.code === contentID)
+      ?.content.image.find(image => image.locale === currentLocale)?.file
+  }
+
+  return {
+    isLoading,
+    error,
+    webviewContentsContext: {
+      getTextContent,
+      getImageSrc,
+      setCurrentLocale,
+    },
+  }
+}

packages/botonic-react/src/components/message/styles.ts

@@ -2,7 +2,11 @@ import styled from 'styled-components'
 
 import { COLORS } from '../../constants'
 
-export const MessageContainer = styled.div`
+interface MessageContainerProps {
+  isSentByUser: boolean
+}
+
+export const MessageContainer = styled.div<MessageContainerProps>`
   display: flex;
   justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};
   position: relative;
@@ -17,8 +21,13 @@ export const BotMessageImageContainer = styled.div`
   align-items: center;
   justify-content: center;
 `
+interface BolbContainerProps {
+  bgcolor: string
+  blob: boolean
+  blobwidth?: string
+}
 
-export const BlobContainer = styled.div`
+export const BlobContainer = styled.div<BolbContainerProps>`
   position: relative;
   margin: 8px;
   border-radius: 8px;
@@ -31,8 +40,12 @@ export const BlobContainer = styled.div`
         : '60%'
       : 'calc(100% - 16px)'};
 `
+interface BlobTextProps {
+  blob: boolean
+  markdownstyle: any
+}
 
-export const BlobText = styled.div`
+export const BlobText = styled.div<BlobTextProps>`
   padding: ${props => (props.blob ? '8px 12px' : '0px')};
   display: flex;
   flex-direction: column;
@@ -49,13 +62,21 @@ export const BlobTickContainer = styled.div`
   top: 0;
   align-items: center;
 `
-export const BlobTick = styled.div`
+
+interface BlobTickProps {
+  pointerSize: number
+}
+
+export const BlobTick = styled.div<BlobTickProps>`
   position: relative;
   margin: -${props => props.pointerSize}px 0px;
   border: ${props => props.pointerSize}px solid ${COLORS.TRANSPARENT};
 `
+interface TimestampContainerProps {
+  isSentByUser: boolean
+}
 
-export const TimestampContainer = styled.div`
+export const TimestampContainer = styled.div<TimestampContainerProps>`
   display: flex;
   position: relative;
   justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};
@@ -71,8 +92,11 @@ export const TimestampContainer = styled.div`
     max-width: 20px;
   }
 `
+interface TimestampTextProps {
+  isSentByUser: boolean
+}
 
-export const TimestampText = styled.div`
+export const TimestampText = styled.div<TimestampTextProps>`
   @import url('https://fonts.googleapis.com/css?family=Lato');
   font-family: Lato;
   font-size: 10px;

packages/botonic-react/src/contexts.tsx

@@ -1,18 +1,42 @@
+import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { createContext } from 'react'
 
-import { WebchatContextProps } from './index-types'
+import { ActionRequest, WebchatContextProps } from './index-types'
 import { webchatInitialState } from './webchat/hooks'
 
-export const RequestContext = createContext({
+export const RequestContext = createContext<
+  Partial<ActionRequest> & {
+    getString: () => string
+    setLocale: () => void
+  }
+>({
   getString: () => '',
-  setLocale: () => '',
-  session: {},
+  setLocale: () => undefined,
+  session: {} as CoreSession,
   params: {},
-  input: {},
+  input: {} as CoreInput,
   defaultDelay: 0,
   defaultTyping: 0,
 })
 
+export interface CloseWebviewOptions {
+  payload?: string
+  path?: string
+  params?: Record<string, any>
+}
+
+export const WebviewRequestContext = createContext<{
+  closeWebview: (options?: CloseWebviewOptions) => undefined
+  getString: (stringId: string) => string
+  params: Record<string, any>
+  session: CoreSession
+}>({
+  closeWebview: () => undefined,
+  getString: () => '',
+  params: {} as Record<string, any>,
+  session: {} as CoreSession,
+})
+
 export const WebchatContext = createContext<WebchatContextProps>({
   addMessage: () => {
     return

packages/botonic-react/src/index.ts

@@ -1,6 +1,10 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
 export * from './components'
-export { RequestContext, WebchatContext } from './contexts'
+export {
+  RequestContext,
+  WebchatContext,
+  WebviewRequestContext,
+} from './contexts'
 export { DevApp } from './dev-app'
 export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'

packages/botonic-react/src/webchat-app.jsx

@@ -209,6 +209,10 @@ export class WebchatApp {
     this.webchatRef.current.closeWebchat()
   }
 
+  closeWebview() {
+    this.webchatRef.current.closeWebview()
+  }
+
   toggle() {
     this.webchatRef.current.toggleWebchat()
   }

packages/botonic-react/src/webchat/message-list/index.tsx

@@ -93,6 +93,7 @@ export const WebchatMessageList = props => {
         role={ROLES.MESSAGE_LIST}
         // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
         id='botonic-scrollable-content'
+        // @ts-ignore
         scrollbar={scrollbarOptions}
         autoHide={scrollbarOptions.autoHide}
         ismessagescontainer={true.toString()}