feat: add baseUrl prop and pass locale to chatwoot

Author: motiko

src/components/LiveChatLoaderProvider.tsx

@@ -7,20 +7,23 @@ export const LiveChatLoaderProvider = ({
   provider,
   children,
   idlePeriod = 5000,
+  baseUrl,
   ...props
 }: {
   provider: Provider
   children: JSX.Element
   idlePeriod?: number
   providerKey: string
   appID?: string
+  baseUrl?: string
 }): JSX.Element | null => {
   const [state, setState] = useState<State>('initial')
   const value = {
     provider,
     idlePeriod,
     state,
     setState,
+    baseUrl,
     ...props
   }
 
@@ -36,7 +39,11 @@ export const LiveChatLoaderProvider = ({
 
   return (
     <LiveChatLoaderContext.Provider value={value}>
-      <link href={chatProvider.domain} rel="preconnect" crossOrigin="" />
+      <link
+        href={baseUrl || chatProvider.domain}
+        rel="preconnect"
+        crossOrigin=""
+      />
       {children}
     </LiveChatLoaderContext.Provider>
   )

src/context.ts

@@ -9,6 +9,7 @@ interface Context {
   appID?: string
   locale?: string
   idlePeriod?: number
+  baseUrl?: string
 }
 
 export const LiveChatLoaderContext = createContext<Context>({} as Context)

src/hooks/useChat.ts

@@ -27,7 +27,8 @@ const useChat = (
     state,
     setState,
     appID,
-    locale
+    locale,
+    baseUrl
   } = useContext(LiveChatLoaderContext)
 
   useEffect(() => {
@@ -90,7 +91,7 @@ const useChat = (
 
       if (!scriptLoaded) {
         scriptLoaded = true
-        chatProvider.load({ providerKey, setState, appID, locale })
+        chatProvider.load({ providerKey, setState, appID, locale, baseUrl })
       }
 
       if (open) {

src/providers/chatwoot.ts

@@ -9,18 +9,24 @@ declare global {
     //eslint-disable-next-line @typescript-eslint/no-explicit-any
     $chatwoot: any
     chatwootSDK: {
-      run: (options: { websiteToken: string; baseUrl: string }) => void
+      run: (options: {
+        websiteToken: string
+        baseUrl: string
+        locale?: string
+        type?: 'standard' | 'expanded_bubble'
+        position?: 'left' | 'right'
+      }) => void
     }
   }
 }
 
 /* eslint-disable */
-const loadScript = (onload: () => void) => {
+const loadScript = (onload: () => void, baseUrl: string): void => {
   if (window.$chatwoot) return
   ;(function(d, t) {
     var script: HTMLScriptElement = d.createElement('script')
     var fisrtScript = d.getElementsByTagName('script')[0]
-    script.src = domain + '/packs/js/sdk.js'
+    script.src = baseUrl + '/packs/js/sdk.js'
     fisrtScript.parentNode?.insertBefore(script, fisrtScript)
     script.onload = onload
   })(document)
@@ -29,23 +35,28 @@ const loadScript = (onload: () => void) => {
 
 const load = ({
   providerKey,
-  setState
+  locale = 'en',
+  setState,
+  baseUrl = domain
 }: {
   providerKey: string
+  locale?: string
   setState: (state: State) => void
-}) => {
+  baseUrl?: string
+}): void => {
   loadScript(function() {
     setTimeout(() => setState('complete'), 1000)
     window.chatwootSDK.run({
       websiteToken: providerKey,
-      baseUrl: domain
+      baseUrl,
+      locale
     })
-  })
+  }, baseUrl)
 }
 
-const open = () => window.$chatwoot && window.$chatwoot.toggle()
+const open = (): void => window.$chatwoot && window.$chatwoot.toggle()
 
-const close = () => window.$chatwoot && window.$chatwoot.toggle()
+const close = (): void => window.$chatwoot && window.$chatwoot.toggle()
 
 export default {
   domain,