feat: add locale

src/components/ui/WidgetButton.tsx

@@ -104,15 +104,7 @@ const CloseIconWrapper = styled(IconWrapper)<IconWrapperProps>`
 const Icon = {
   Open: (props: { url?: string }) => {
     const { url } = props;
-
-    if (url) {
-      if (url.endsWith('.svg')) {
-        return <img src={url} alt={'widget-toggle-button'} data-svg={true} />;
-      } else {
-        return <img src={url} alt={'widget-toggle-button'} />;
-      }
-    }
-
+    if (url) return <img src={url} alt={'widget-toggle-button'} data-svg={url.endsWith('.svg')} />;
     return <BotOutlinedIcon />;
   },
   Close: () => <ChevronDownIcon />,

src/components/widget/Chat.tsx

@@ -47,15 +47,15 @@ const Chat = () => {
   };
 
   return (
-    <GroupChannelProvider
-      channelUrl={widgetSession.channelUrl ?? ''}
-      scrollBehavior={'smooth'}
-      onBeforeSendUserMessage={onBeforeSendMessage}
-      onBeforeSendFileMessage={onBeforeSendMessage}
-    >
-      <CustomChannelComponent />
-      <div id={'sb_chat_root_for_z_index'} />
-    </GroupChannelProvider>
+      <GroupChannelProvider
+          channelUrl={widgetSession.channelUrl ?? ''}
+          scrollBehavior={'smooth'}
+          onBeforeSendUserMessage={onBeforeSendMessage}
+          onBeforeSendFileMessage={onBeforeSendMessage}
+      >
+        <CustomChannelComponent/>
+        <div id={'sb_chat_root_for_z_index'}/>
+      </GroupChannelProvider>
   );
 };
 

src/components/widget/ProviderContainer.tsx

@@ -1,7 +1,8 @@
 import { SendbirdErrorCode } from '@sendbird/chat';
-import React, { useMemo } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo } from 'react';
 import { StyleSheetManager, ThemeProvider } from 'styled-components';
 
+import { useSendbirdStateContext } from '@uikit/index';
 import SendbirdProvider from '@uikit/lib/Sendbird';
 
 import { ChatAiWidgetProps } from './ChatAiWidget';
@@ -33,7 +34,6 @@ const SBComponent = ({ children }: { children: React.ReactElement }) => {
     enableHideWidgetForDeactivatedUser,
   } = useConstantState();
 
-  useAssignGlobalFunction();
   const { setIsVisible } = useWidgetState();
   const { botStyle } = useWidgetSetting();
   const session = useWidgetSession();
@@ -136,9 +136,25 @@ export default function ProviderContainer(props: ProviderContainerProps) {
     <ConstantStateProvider {...props}>
       <WidgetSettingProvider>
         <WidgetStateProvider>
-          <SBComponent>{props.children}</SBComponent>
+          <SBComponent>
+            <HeadlessComponent>{props.children}</HeadlessComponent>
+          </SBComponent>
         </WidgetStateProvider>
       </WidgetSettingProvider>
     </ConstantStateProvider>
   );
 }
+
+const HeadlessComponent = ({ children }: PropsWithChildren) => {
+  useAssignGlobalFunction();
+  const { locale } = useConstantState();
+  const { stores } = useSendbirdStateContext();
+
+  useEffect(() => {
+    if (locale && stores.sdkStore.initialized && stores.sdkStore.sdk) {
+      stores.sdkStore.sdk.setLocaleForChatbot(locale);
+    }
+  }, [locale, stores.sdkStore.initialized, stores.sdkStore.sdk]);
+
+  return <>{children}</>;
+};

src/const.ts

@@ -180,6 +180,11 @@ export interface Constant extends ConstantFeatureFlags {
    * @description Whether to open the widget automatically. (only works in desktop)
    */
   autoOpen?: boolean;
+  /**
+   * @public
+   * @description Sets the locale for the chatbot.
+   */
+  locale?: string;
   /**
    * @public
    * @description Locale value to be applied to string values of message timestamp and date separator.
@@ -355,7 +360,6 @@ export const elementIds = {
   expandIcon: 'aichatbot-widget-expand-icon',
   closeIcon: 'aichatbot-widget-close-icon',
   refreshIcon: 'aichatbot-widget-refresh-icon',
-  uikitModal: 'sendbird-modal-root',
 };
 
 export const widgetServiceName = {

src/context/ConstantContext.tsx

@@ -80,6 +80,7 @@ export const ConstantStateProvider = (props: PropsWithChildren<ConstantContextPr
           ...initialState.messageInputControls,
           ...props.messageInputControls,
         },
+        locale: props.locale,
         dateLocale: props.dateLocale ?? initialState.dateLocale,
         // ----- Feature flag props ----- //
         autoOpen: props.autoOpen,

src/context/WidgetSettingContext.tsx

@@ -46,6 +46,7 @@ export const WidgetSettingProvider = ({ children }: React.PropsWithChildren) =>
     firstMessageData,
     botStudioEditProps,
     autoOpen,
+    locale,
   } = useConstantState();
 
   if (!appId || !botId) {
@@ -90,6 +91,7 @@ export const WidgetSettingProvider = ({ children }: React.PropsWithChildren) =>
       appId,
       botId,
       userId: strategy === 'manual' ? injectedUserId : cachedSession?.userId,
+      locale,
     })
       .onGetBotStyle((style) => setBotStyle(style))
       .onAutoNonCached(({ user, channel }) => {

src/libs/api/widgetSetting.ts

@@ -28,6 +28,7 @@ type Params = {
   createChannel?: boolean;
   userId?: string;
   // sessionToken?: string;
+  locale?: string;
 };
 
 type Response = {
@@ -57,12 +58,14 @@ export async function getWidgetSetting({
   createUserAndChannel,
   createChannel,
   userId,
+  locale,
 }: Params): Promise<Response> {
   // const headers = sessionToken ? { 'Session-Key': sessionToken } : undefined;
   const params = asQueryParams({
     create_user_and_channel: asBoolString(createUserAndChannel),
     create_channel: asBoolString(createChannel),
     user_id: userId,
+    locale,
   });
   const path = resolvePath(host, `/v3/bots/${botId}/${appId}/widget_setting?${params}`);
 
@@ -218,7 +221,7 @@ function getParamsByStrategy(
     if (useCachedSession) {
       return { userId: params.userId };
     } else {
-      return { createUserAndChannel: true };
+      return { createUserAndChannel: true, locale: params.locale };
     }
   } else {
     if (useCachedSession) {

yarn.lock

@@ -3066,9 +3066,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sendbird/chat@npm:^4.13.1":
-  version: 4.13.1
-  resolution: "@sendbird/chat@npm:4.13.1"
+"@sendbird/chat@npm:^4.13.2":
+  version: 4.14.0
+  resolution: "@sendbird/chat@npm:4.14.0"
   peerDependencies:
     "@react-native-async-storage/async-storage": ^1.17.6
     react-native-mmkv: ^2.0.0
@@ -3077,7 +3077,7 @@ __metadata:
       optional: true
     react-native-mmkv:
       optional: true
-  checksum: 10c0/7d4dc1af56546157a069cd23f2d78e7c3ad560effd5e21ffaa83d7068109d27692932bf9b41bb202f41f84a586c10912940b4f8800750175f4a896f3916bb319
+  checksum: 10c0/737880435afb625f1ca30898fac3110f96d225d0484d49096d382e7551a67bd3671af502eb44d08fd3c17d6bf5939b79b1b2a4cbcee96cd8ca36b200aab88cc1
   languageName: node
   linkType: hard
 
@@ -3121,7 +3121,7 @@ __metadata:
     "@rollup/plugin-node-resolve": "npm:^15.2.3"
     "@rollup/plugin-replace": "npm:^5.0.4"
     "@rollup/plugin-typescript": "npm:^11.1.5"
-    "@sendbird/chat": "npm:^4.13.1"
+    "@sendbird/chat": "npm:^4.13.2"
     "@sendbird/react-uikit-message-template-view": "npm:0.0.1-alpha.73"
     "@sendbird/uikit-tools": "npm:0.0.1-alpha.79"
     "@storybook/addon-essentials": "npm:^8.0.9"