improve flowbuilder webview contents #BLT-1131 (#2913)

## Description

- Resolve locale as a language when get webview contents. For example if
locale is en-GB and your contents are only in en
- set organzation_id and bot_id in session when bot is in local
development.

CHANGELOG.md

@@ -64,6 +64,7 @@ All notable changes to Botonic will be documented in this file.
 - [@botonic/plugin-flow-builder](https://www.npmjs.com/package/@botonic/plugin-flow-builder)
 
   - [Use `message feedback` in knowledge base messages](https://github.com/hubtype/botonic/pull/2859)
+  - [improve `flowbuilder webview contents`](https://github.com/hubtype/botonic/pull/2913)
 
 - [@botonic/plugin-hubtype-analytics](https://www.npmjs.com/package/@botonic/plugin-hubtype-analytics)
 

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

@@ -17,10 +17,11 @@ import {
   HtPayloadNode,
 } from './content-fields/hubtype-fields'
 import { HtSmartIntentNode } from './content-fields/hubtype-fields/smart-intent'
-import { FlowBuilderApiOptions } from './types'
+import { FlowBuilderApiOptions, ProcessEnvNodeEnvs } from './types'
 
 export class FlowBuilderApi {
   url: string
+  flowUrl: string
   flow: HtFlowBuilderData
   request: PluginPreRequest
 
@@ -30,19 +31,33 @@ export class FlowBuilderApi {
     const newApi = new FlowBuilderApi()
 
     newApi.url = options.url
+    newApi.flowUrl = options.flowUrl
     newApi.flow = options.flow ?? (await newApi.getFlow(options.accessToken))
     newApi.request = options.request
 
+    if (process.env.NODE_ENV === ProcessEnvNodeEnvs.DEVELOPMENT) {
+      await newApi.updateSessionWithUserInfo(options.accessToken)
+    }
+
     return newApi
   }
 
   private async getFlow(token: string): Promise<HtFlowBuilderData> {
-    const { data } = await axios.get(this.url, {
+    const { data } = await axios.get(this.flowUrl, {
       headers: { Authorization: `Bearer ${token}` },
     })
     return data as HtFlowBuilderData
   }
 
+  private async updateSessionWithUserInfo(token: string) {
+    const url = `${this.url}/get-user-info`
+    const response = await axios.get(url, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    this.request.session.organization_id = response.data.organization_id
+    this.request.session.bot.id = response.data.bot_id
+  }
+
   getNodeByFlowId(id: string): HtNodeWithContent {
     const subFlow = this.flow.flows.find(subFlow => subFlow.id === id)
     if (!subFlow) throw Error(`SubFlow with id: '${id}' not found`)

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

@@ -81,7 +81,8 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   async pre(request: PluginPreRequest): Promise<void> {
     this.currentRequest = request
     this.cmsApi = await FlowBuilderApi.create({
-      url: this.resolveFlowUrl(request),
+      flowUrl: this.resolveFlowUrl(request),
+      url: this.apiUrl,
       flow: this.flow,
       accessToken: this.getAccessToken(request.session),
       request: this.currentRequest,

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

@@ -29,6 +29,7 @@ export type KnowledgeBaseFunction = (
 
 export interface FlowBuilderApiOptions {
   url: string
+  flowUrl: string
   flow?: HtFlowBuilderData
   accessToken: string
   request: PluginPreRequest

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

@@ -31,6 +31,30 @@ export function useWebviewContents<T extends MapContentsType>({
   const [isLoading, setLoading] = useState(true)
   const [error, setError] = useState(false)
 
+  const updateCurrentLocale = (textContents?: WebviewTextContent[]) => {
+    if (!textContents || textContents.length === 0) {
+      console.log('There is no text contents to check the locale')
+      return
+    }
+
+    const locales = textContents[0].content.text.map(text => text.locale)
+    const language = currentLocale.split('-')[0]
+
+    if (locales.includes(currentLocale)) {
+      setCurrentLocale(currentLocale)
+      return
+    }
+
+    if (locales.includes(language)) {
+      setCurrentLocale(language)
+      return
+    }
+
+    console.error(
+      `locale: ${currentLocale} cannot be resolved with: ${locales.join(', ')}`
+    )
+  }
+
   const getTextContent = (contentID: string): string => {
     return (
       textContents
@@ -76,6 +100,8 @@ export function useWebviewContents<T extends MapContentsType>({
           webviewContent => webviewContent.type === WebviewContentType.IMAGE
         ) as WebviewImageContent[]
         setImageContents(imageResponseContents)
+
+        updateCurrentLocale(textResponseContents)
       } catch (error) {
         console.error('Error fetching webview contents:', error)
         setError(true)