feat: add contentsByLocale to update inputPlaceholder per locale

packages/botonic-react/src/constants.js

@@ -184,3 +184,7 @@ export const ROLES = {
   RAW_MESSAGE: 'raw-message',
   SYSTEM_DEBUG_TRACE_MESSAGE: 'system-debug-trace-message',
 }
+
+export const WEBCHAT_DEFAULT_CONTENTS = {
+  INPUT_PLACEHOLDER: 'Ask me something...',
+}

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

@@ -27,6 +27,7 @@ export class DevApp extends WebchatApp {
     onClose,
     onMessage,
     onTrackEvent,
+    contentsByLocale,
     webviews,
     ...botOptions
   }) {
@@ -48,6 +49,7 @@ export class DevApp extends WebchatApp {
       onClose,
       onMessage,
       onTrackEvent,
+      contentsByLocale,
     })
     this.webviews = webviews
     this.bot = new ReactBot({
@@ -65,6 +67,7 @@ export class DevApp extends WebchatApp {
       onClose,
       onMessage,
       onTrackEvent,
+      contentsByLocale,
       hostId,
       ...webchatOptions
     } = optionsAtRuntime
@@ -76,6 +79,7 @@ export class DevApp extends WebchatApp {
     this.onClose = onClose || this.onClose
     this.onMessage = onMessage || this.onMessage
     this.onTrackEvent = onTrackEvent || this.onTrackEvent
+    this.contentsByLocale = contentsByLocale || this.contentsByLocale
     this.hostId = hostId || this.hostId
     this.createRootElement(host)
     return (
@@ -87,6 +91,7 @@ export class DevApp extends WebchatApp {
         theme={theme}
         storage={storage}
         storageKey={storageKey}
+        contentsByLocale={this.contentsByLocale}
         onInit={(...args) => this.onInitWebchat(...args)}
         onOpen={(...args) => this.onOpenWebchat(...args)}
         onClose={(...args) => this.onCloseWebchat(...args)}

packages/botonic-react/src/index-types.ts

@@ -89,6 +89,10 @@ export interface MinimalHubtypeMessage {
   text: string
 }
 
+export interface WebchatLocaleContents {
+  inputPlaceholder: string
+}
+
 export interface PreviewUtils {
   getChunkIdsGroupedBySource: (
     chunkIds: string[]
@@ -122,6 +126,7 @@ export interface WebchatArgs {
   onMessage?: (app: WebchatApp, message: WebchatMessage) => void
   onTrackEvent?: TrackEventFunction
   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+  contentsByLocale?: Record<string, WebchatLocaleContents>
   appId?: string
   visibility?: boolean | (() => boolean) | 'dynamic'
   server?: ServerConfig
@@ -149,6 +154,7 @@ export interface WebchatProps {
   server?: ServerConfig
   localWebviews?: React.ComponentType[]
   previewUtils?: PreviewUtils
+  contentsByLocale?: Record<string, WebchatLocaleContents>
 }
 
 export type EventArgs = { [key: string]: any }

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

@@ -17,6 +17,7 @@ import {
   SENDERS,
   Typing,
   type WebchatArgs,
+  type WebchatLocaleContents,
   type WebchatMessage,
   type WebchatRef,
 } from './index-types'
@@ -55,6 +56,7 @@ export class WebchatApp {
     args?: EventArgs
   ) => Promise<void>
   public onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+  public contentsByLocale?: Record<string, WebchatLocaleContents>
   public appId?: string
   public visibility?: boolean | (() => boolean) | 'dynamic'
   public server?: ServerConfig
@@ -86,6 +88,7 @@ export class WebchatApp {
     onMessage,
     onTrackEvent,
     onConnectionChange,
+    contentsByLocale,
     appId,
     visibility,
     server,
@@ -119,6 +122,7 @@ export class WebchatApp {
     this.onMessage = onMessage
     this.onTrackEvent = onTrackEvent
     this.onConnectionChange = onConnectionChange
+    this.contentsByLocale = contentsByLocale
     this.visibility = visibility
     this.server = server
     this.previewUtils = previewUtils
@@ -482,6 +486,7 @@ export class WebchatApp {
       onClose,
       onMessage,
       onConnectionChange,
+      contentsByLocale,
       onTrackEvent,
       appId,
       visibility,
@@ -502,6 +507,7 @@ export class WebchatApp {
     this.onMessage = onMessage || this.onMessage
     this.onTrackEvent = onTrackEvent || this.onTrackEvent
     this.onConnectionChange = onConnectionChange || this.onConnectionChange
+    this.contentsByLocale = contentsByLocale || this.contentsByLocale
     this.visibility = visibility || this.visibility
     this.appId = appId || this.appId
     this.hostId = hostId || this.hostId
@@ -533,6 +539,7 @@ export class WebchatApp {
           args?: EventArgs
         ) => this.onTrackEventWebchat(request, eventName, args)}
         server={server}
+        contentsByLocale={this.contentsByLocale}
       />
     )
   }

packages/botonic-react/src/webchat/theme/default-theme.ts

@@ -1,4 +1,4 @@
-import { COLORS, WEBCHAT } from '../../constants'
+import { COLORS, WEBCHAT, WEBCHAT_DEFAULT_CONTENTS } from '../../constants'
 import type { WebchatTheme } from './types'
 
 export const defaultTheme: WebchatTheme = {
@@ -81,7 +81,7 @@ export const defaultTheme: WebchatTheme = {
   userInput: {
     attachments: { enable: undefined },
     box: {
-      placeholder: 'Ask me something...',
+      placeholder: WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER,
     },
     emojiPicker: { enable: undefined },
     sendButton: { enable: true },

packages/botonic-react/src/webchat/webchat.tsx

@@ -21,7 +21,13 @@ import {
   Video,
   type WebchatSettingsProps,
 } from '../components'
-import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
+import {
+  COLORS,
+  MAX_ALLOWED_SIZE_MB,
+  ROLES,
+  WEBCHAT,
+  WEBCHAT_DEFAULT_CONTENTS,
+} from '../constants'
 import type { CloseWebviewOptions } from '../contexts'
 import { SENDERS, type WebchatProps, type WebchatRef } from '../index-types'
 import {
@@ -109,6 +115,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
     scrollableMessagesListRef,
   } = props.webchatHooks || useWebchat(props.theme)
 
+  const contentsByLocale = props.contentsByLocale
   const firstUpdate = useRef(true)
   const isOnline = () => webchatState.online
   const currentDateString = () => new Date().toISOString()
@@ -485,6 +492,16 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
   */
 
   const updateSessionWithUser = (userToUpdate: any) => {
+    if (contentsByLocale && userToUpdate.system_locale) {
+      const placeholder =
+        contentsByLocale[userToUpdate.system_locale]?.inputPlaceholder ??
+        WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER
+      const themeUpdates = { userInput: { box: { placeholder } } }
+      updateTheme(
+        merge(props.theme, themeUpdates),
+        themeUpdates as WebchatTheme
+      )
+    }
     updateSession(merge(webchatState.session, { user: userToUpdate }))
   }