feat: add locale

sendbird · Aug 14, 2024 · 5e068ab · 5e068ab
1 parent 1cba826
commit 5e068ab
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 14 deletions.
diff --git a/src/components/ui/WidgetButton.tsx b/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 />,

diff --git a/src/components/widget/ProviderContainer.tsx b/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}</>;
+};
diff --git a/src/const.ts b/src/const.ts
@@ -181,6 +181,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.
@@ -361,7 +366,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 = {

diff --git a/src/context/ConstantContext.tsx b/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,

diff --git a/src/context/WidgetSettingContext.tsx b/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 }) => {

diff --git a/src/libs/api/widgetSetting.ts b/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) {