From d37f3de828b2b5278ae372f5bceb70b3eefb2b03 Mon Sep 17 00:00:00 2001
From: Adrian Rocke <me@adrianrocke.com>
Date: Wed, 6 Nov 2024 19:56:38 -0600
Subject: [PATCH] feat: tawk to bubble location

---
 app/[locale]/(authenticated)/layout.tsx |  2 +-
 app/[locale]/ChatBubble.tsx             | 26 +++++++++++++++++++++++++
 app/[locale]/layout.tsx                 | 18 ++---------------
 app/components/LanguageDialog.tsx       |  7 +++++--
 4 files changed, 34 insertions(+), 19 deletions(-)
 create mode 100644 app/[locale]/ChatBubble.tsx

diff --git a/app/[locale]/(authenticated)/layout.tsx b/app/[locale]/(authenticated)/layout.tsx
index f244360..64ef7fe 100644
--- a/app/[locale]/(authenticated)/layout.tsx
+++ b/app/[locale]/(authenticated)/layout.tsx
@@ -67,7 +67,7 @@ export default async function AuthenticatedLayout({ children, params }: { childr
         <div className="flex-grow relative flex flex-col w-full">
             {children}
         </div>
-        <footer className="absolute bottom-0 w-full p-2 flex flex-row z-10 justify-end">
+        <footer className="absolute bottom-0 w-full p-2 flex flex-row z-10 justify-start">
             <LanguageDialog />
         </footer>
       </div>
diff --git a/app/[locale]/ChatBubble.tsx b/app/[locale]/ChatBubble.tsx
new file mode 100644
index 0000000..f28a05b
--- /dev/null
+++ b/app/[locale]/ChatBubble.tsx
@@ -0,0 +1,26 @@
+import Script from "next/script";
+
+export default function ChatBubble({ placement }: { placement: 'bl' | 'br' }) {
+    if (process.env.NODE_ENV !== 'production') return null
+
+    return <Script id="show-banner" strategy="lazyOnload">
+      {`
+        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
+        Tawk_API.customStyle = {
+            visibility: {
+                desktop: {
+                    position: '${placement}',
+                }
+            },
+        };
+        (function(){
+        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
+        s1.async=true;
+        s1.src='https://embed.tawk.to/671d701f4304e3196ad8d17a/1ib5frv2r';
+        s1.charset='UTF-8';
+        s1.setAttribute('crossorigin','*');
+        s0.parentNode.insertBefore(s1,s0);
+        })();
+      `}
+    </Script>
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index af2878f..6540591 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -9,6 +9,7 @@ import { headFontClass } from "../fonts";
 import languages from "../../languages.json";
 import { FlashProvider } from "../flash";
 import Script from "next/script";
+import ChatBubble from "./ChatBubble";
  
 export async function generateMetadata(): Promise<Metadata> {
   const t = await getTranslations("RootLayout")
@@ -49,22 +50,7 @@ export default function RootLayout({
                 {children}
             </FlashProvider>
         </NextIntlClientProvider>
-        {
-            process.env.NODE_ENV === 'production' &&
-                <Script id="show-banner">
-                  {`
-                    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
-                    (function(){
-                    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
-                    s1.async=true;
-                    s1.src='https://embed.tawk.to/671d701f4304e3196ad8d17a/1ib5frv2r';
-                    s1.charset='UTF-8';
-                    s1.setAttribute('crossorigin','*');
-                    s0.parentNode.insertBefore(s1,s0);
-                    })();
-                  `}
-                </Script>
-        }
+        <ChatBubble placement={language.dir === 'rtl' ? 'bl' : 'br'} />
       </body>
     </html>
   );
diff --git a/app/components/LanguageDialog.tsx b/app/components/LanguageDialog.tsx
index df6faf4..53aa01d 100644
--- a/app/components/LanguageDialog.tsx
+++ b/app/components/LanguageDialog.tsx
@@ -25,7 +25,7 @@ export default function LanguageDialog() {
         <dialog
           ref={dialog}
           className="
-            rounded-lg shadow-md border border-gray-200 bg-white mx-auto p-8 focus-visible:outline outline-green-300 outline-2 end-2 bottom-2 start-auto
+            rounded-lg shadow-md border border-gray-200 bg-white mx-auto p-8 focus-visible:outline outline-green-300 outline-2 start-2 bottom-2 end-auto
             dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200
           "
         >
@@ -36,7 +36,10 @@ export default function LanguageDialog() {
           <ComboboxInput
             className="block min-w-[150px]"
             value={locale}
-            onChange={(language) => router.push(pathName.replace(new RegExp(`/${locale}(?=/|$)`), `/${language}`))}
+            onChange={(language) => {
+                // We need to do a hard refresh so that the tawk.to chat widget will reload with settings for the new language.
+                window.location.href = new URL(pathName.replace(new RegExp(`/${locale}(?=/|$)`), `/${language}`), window.location.origin).toString()
+            }}
             aria-label="Interface Language"
             up
             items={Object.entries(languages).map(([value, config]) => ({