From db7d7f908e70ebba9ce3be70734e896023119126 Mon Sep 17 00:00:00 2001 From: Pep Alonso Date: Fri, 22 May 2026 13:55:46 +0200 Subject: [PATCH 1/2] feat: add contentsByLocale to update inputPlaceholder per locale --- packages/botonic-react/src/constants.js | 4 ++++ packages/botonic-react/src/dev-app.jsx | 5 +++++ packages/botonic-react/src/index-types.ts | 6 ++++++ packages/botonic-react/src/webchat-app.tsx | 7 +++++++ packages/botonic-react/src/webchat/theme/default-theme.ts | 4 ++-- packages/botonic-react/src/webchat/webchat.tsx | 7 ++++++- 6 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/botonic-react/src/constants.js b/packages/botonic-react/src/constants.js index b2faedce5b..fe860d1dea 100644 --- a/packages/botonic-react/src/constants.js +++ b/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...', +} \ No newline at end of file diff --git a/packages/botonic-react/src/dev-app.jsx b/packages/botonic-react/src/dev-app.jsx index 0222204cd1..5d08c277b2 100644 --- a/packages/botonic-react/src/dev-app.jsx +++ b/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)} diff --git a/packages/botonic-react/src/index-types.ts b/packages/botonic-react/src/index-types.ts index 2665f805cc..d4cb749191 100644 --- a/packages/botonic-react/src/index-types.ts +++ b/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 appId?: string visibility?: boolean | (() => boolean) | 'dynamic' server?: ServerConfig @@ -149,6 +154,7 @@ export interface WebchatProps { server?: ServerConfig localWebviews?: React.ComponentType[] previewUtils?: PreviewUtils + contentsByLocale?: Record } export type EventArgs = { [key: string]: any } diff --git a/packages/botonic-react/src/webchat-app.tsx b/packages/botonic-react/src/webchat-app.tsx index 81720644a9..db56c6bed1 100644 --- a/packages/botonic-react/src/webchat-app.tsx +++ b/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 public onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void + public contentsByLocale?: Record 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} /> ) } diff --git a/packages/botonic-react/src/webchat/theme/default-theme.ts b/packages/botonic-react/src/webchat/theme/default-theme.ts index 73d2cc003b..d588d6a467 100644 --- a/packages/botonic-react/src/webchat/theme/default-theme.ts +++ b/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 }, diff --git a/packages/botonic-react/src/webchat/webchat.tsx b/packages/botonic-react/src/webchat/webchat.tsx index 9c08adf656..f7a315ee9a 100644 --- a/packages/botonic-react/src/webchat/webchat.tsx +++ b/packages/botonic-react/src/webchat/webchat.tsx @@ -21,7 +21,7 @@ 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 +109,7 @@ const Webchat = forwardRef((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 +486,10 @@ const Webchat = forwardRef((props, ref) => { */ const updateSessionWithUser = (userToUpdate: any) => { + if (userToUpdate.system_locale) { + const themeUpdates = { userInput: { box: { placeholder: contentsByLocale?.[userToUpdate.system_locale]?.inputPlaceholder || WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER } } } + updateTheme(merge(props.theme, themeUpdates), themeUpdates as WebchatTheme) + } updateSession(merge(webchatState.session, { user: userToUpdate })) } From 1fdf15d606bb98ea34f8f5c589c9ba313be94458 Mon Sep 17 00:00:00 2001 From: Pep Alonso Date: Fri, 22 May 2026 14:16:42 +0200 Subject: [PATCH 2/2] refactor: format import statements --- packages/botonic-react/src/constants.js | 2 +- .../botonic-react/src/webchat/webchat.tsx | 20 +++++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/botonic-react/src/constants.js b/packages/botonic-react/src/constants.js index fe860d1dea..ec23864a07 100644 --- a/packages/botonic-react/src/constants.js +++ b/packages/botonic-react/src/constants.js @@ -187,4 +187,4 @@ export const ROLES = { export const WEBCHAT_DEFAULT_CONTENTS = { INPUT_PLACEHOLDER: 'Ask me something...', -} \ No newline at end of file +} diff --git a/packages/botonic-react/src/webchat/webchat.tsx b/packages/botonic-react/src/webchat/webchat.tsx index f7a315ee9a..3b40db1ccb 100644 --- a/packages/botonic-react/src/webchat/webchat.tsx +++ b/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, WEBCHAT_DEFAULT_CONTENTS } 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 { @@ -486,9 +492,15 @@ const Webchat = forwardRef((props, ref) => { */ const updateSessionWithUser = (userToUpdate: any) => { - if (userToUpdate.system_locale) { - const themeUpdates = { userInput: { box: { placeholder: contentsByLocale?.[userToUpdate.system_locale]?.inputPlaceholder || WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER } } } - updateTheme(merge(props.theme, themeUpdates), themeUpdates as WebchatTheme) + 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 })) }