From ed55f440f9f633b3a6eacec4640707b5bf53145c Mon Sep 17 00:00:00 2001
From: Billy Kwok <opensource@billykwok.me>
Date: Tue, 1 Mar 2022 16:57:20 -0800
Subject: [PATCH 1/3] support Chatwoot expanded bubble

---
 README.md                         |  1 +
 src/components/Chatwoot/index.tsx | 46 +++++++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 415da207..777bc7dd 100644
--- a/README.md
+++ b/README.md
@@ -336,6 +336,7 @@ You can customise the Chatwoot Widget by passing the following props to the
 `Chatwoot` component:
 
 - `color`: The background color, set to same color value you choose in Chatwoot dashboard.
+- `launcherTitle`: The text used for the [Expanded Bubble](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#widget-designs) design. Setting to any non-empty string will enable expanded bubble design automatically. Default to null.
 
 </details>
 
diff --git a/src/components/Chatwoot/index.tsx b/src/components/Chatwoot/index.tsx
index 58b340ab..a5e09190 100644
--- a/src/components/Chatwoot/index.tsx
+++ b/src/components/Chatwoot/index.tsx
@@ -5,6 +5,9 @@ import useChat from '../../hooks/useChat'
 const styles: {
   button: CSSProperties
   img: CSSProperties
+  expandedButton: CSSProperties
+  expandedImg: CSSProperties
+  launcherTitle: CSSProperties
   close: CSSProperties
 } = {
   button: {
@@ -24,6 +27,27 @@ const styles: {
     margin: '20px',
     width: '24px'
   },
+  expandedButton: {
+    display: 'flex',
+    bottom: '24px',
+    height: '48px',
+    width: 'auto'
+  },
+  expandedImg: {
+    height: '20px',
+    margin: '14px 8px 14px 16px',
+    width: '20px'
+  },
+  launcherTitle: {
+    display: 'flex',
+    color: '#fff',
+    alignItems: 'center',
+    paddingRight: '20px',
+    fontFamily:
+      'system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif',
+    fontSize: '16px',
+    fontWeight: 500
+  },
   close: {
     backgroundColor: '#fff',
     height: '24px',
@@ -36,9 +60,10 @@ const styles: {
 
 interface Props {
   color?: string
+  launcherTitle?: string
 }
 
-const Provider = ({ color }: Props): JSX.Element | null => {
+const Provider = ({ color, launcherTitle }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
   if (state === 'complete') return null
@@ -54,15 +79,24 @@ const Provider = ({ color }: Props): JSX.Element | null => {
         onMouseEnter={() => loadChat({ open: false })}
         style={{
           ...styles.button,
+          ...(launcherTitle && styles.expandedButton),
           backgroundColor: color
         }}
       >
         {state === 'initial' ? (
-          <img
-            style={styles.img}
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg=="
-            alt="bubble-icon"
-          />
+          <>
+            <img
+              style={{
+                ...styles.img,
+                ...(launcherTitle && styles.expandedImg)
+              }}
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg=="
+              alt="bubble-icon"
+            />
+            {launcherTitle ? (
+              <div style={styles.launcherTitle}>{launcherTitle}</div>
+            ) : null}
+          </>
         ) : (
           <>
             <div style={{ ...styles.close, transform: 'rotate(45deg)' }} />

From 54766f89d11508697b9364292e82151e6c134235 Mon Sep 17 00:00:00 2001
From: Ben Schwarz <ben@calibreapp.com>
Date: Thu, 3 Mar 2022 11:37:02 +1100
Subject: [PATCH 2/3] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 777bc7dd..b4abcc04 100644
--- a/README.md
+++ b/README.md
@@ -336,7 +336,7 @@ You can customise the Chatwoot Widget by passing the following props to the
 `Chatwoot` component:
 
 - `color`: The background color, set to same color value you choose in Chatwoot dashboard.
-- `launcherTitle`: The text used for the [Expanded Bubble](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#widget-designs) design. Setting to any non-empty string will enable expanded bubble design automatically. Default to null.
+- `launcherTitle`: The text used for the [Expanded Bubble](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#widget-designs) design. Setting to any non-empty string will enable expanded bubble design automatically. Default value: `null`.
 
 </details>
 

From f67938ae6e47512fb34c539a4579a307dab24ddc Mon Sep 17 00:00:00 2001
From: Ben Schwarz <ben@calibreapp.com>
Date: Thu, 3 Mar 2022 12:24:48 +1100
Subject: [PATCH 3/3] Add launcherTitle to demo

---
 website/pages/chatwoot.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/pages/chatwoot.js b/website/pages/chatwoot.js
index 223de93e..8e57160e 100644
--- a/website/pages/chatwoot.js
+++ b/website/pages/chatwoot.js
@@ -24,7 +24,7 @@ const Page = () => (
           </p>
         </div>
       </div>
-      <Chatwoot />
+      <Chatwoot launcherTitle="Get help" />
     </Layout>
   </LiveChatLoaderProvider>
 )