Add Live chat (#31)

* change support icon * add live support chat * add intercom verification hash to make chat secure * handle auto slash redirect issue
minusxai · Sep 29, 2024 · c51f97f · c51f97f
1 parent 355e5fd
commit c51f97f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 36 deletions.
diff --git a/web/src/app/index.html b/web/src/app/index.html
@@ -9,7 +9,7 @@
       height: 100%;
     }
     .intercom-messenger-frame {
-      width: 300px !important;
+      width: 320px !important;
     }
   </style>
 </head>

diff --git a/web/src/components/common/App.tsx b/web/src/components/common/App.tsx
@@ -32,11 +32,10 @@ import { getPlatformShortcut } from '../../helpers/platformCustomization'
 import { getParsedIframeInfo } from '../../helpers/origin'
 import { getApp } from '../../helpers/app'
 import { ImageContext } from '../../state/chat/types'
-import { useIntercom } from 'react-use-intercom'
 import { getBillingInfo } from '../../app/api/billing'
 import CreditsPill from './CreditsPill'
 import { setBillingInfo } from '../../state/billing/reducer'
-import { MdOutlineSupportAgent } from 'react-icons/md'
+
 
 
 const AppLoggedIn = forwardRef((_props, ref) => {
@@ -162,33 +161,11 @@ const AppLoggedIn = forwardRef((_props, ref) => {
           configs.PAYMENTS_ENABLED && <CreditsPill credits={credits} />
         }
         {/* <Text fontSize="xs" color="minusxGreen.800" letterSpacing={3} fontWeight={"bold"}>{tool}</Text> */}
-        {configs.IS_DEV && <SupportButton />}
       </HStack>
     </VStack>
   )
 })
 
-const SupportButton = () => {
-  const {
-    boot,
-    shutdown,
-    show
-  } = useIntercom();
-  const [isSupportOpen, setIsSupportOpen] = useState(false)
-  const toggleSupport = () => setIsSupportOpen(!isSupportOpen)
-  useEffect(() => {
-    if (isSupportOpen) {
-      boot()
-      show()
-    } else {
-      shutdown()
-    }
-  })
-  return <div onClick={toggleSupport} style={{cursor: "pointer"}}>
-    <Icon as={MdOutlineSupportAgent} boxSize={5} color="minusxGreen.800" />
-  </div>
-}
-
 const useAppStore = getApp().useStore()
 
 function DisabledOverlayComponent({ toolEnabledReason }: { toolEnabledReason: string }) {

diff --git a/web/src/components/common/TaskUI.tsx b/web/src/components/common/TaskUI.tsx
@@ -37,7 +37,9 @@ import { getElementScreenCapture } from '../../app/rpc'
 import { metaPlanner } from '../../planner/metaPlan'
 import { MembershipBlock } from './Subscription'
 import { configs } from '../../constants'
-
+import { useIntercom } from 'react-use-intercom'
+import { BiSupport } from "react-icons/bi"
+import axios from 'axios';
 
 interface ChatSuggestionsProps {
   suggestQueries: boolean;
@@ -105,6 +107,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
   const activeThread = useSelector((state: RootState) => state.chat.threads[thread])
   const suggestQueries = useSelector((state: RootState) => state.settings.suggestQueries)
   const demoMode = useSelector((state: RootState) => state.settings.demoMode)
+  const email = useSelector((state: RootState) => state.auth.email)
   const is_credits_expired = useSelector((state: RootState) => state.auth.credits_expired)
   const messages = activeThread.messages
   const userConfirmation = activeThread.userConfirmation
@@ -184,6 +187,46 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
     icon={<Icon as={HiOutlineRefresh} boxSize={5} />}
     disabled={messages.length === 0 || taskInProgress}
     />)
+
+    const SupportButton = () => {
+      const {
+        boot,
+        show,
+        hide,
+        isOpen,
+
+      } = useIntercom();
+      const [isBooted, setIsBooted] = useState(false)
+      const toggleSupport = async () => {
+        if (!isBooted) {
+          const response = await axios.get(`${configs.SERVER_BASE_URL}/support/`);
+          if (response.data.intercom_token) {
+            console.log('Booting intercom with token', response.data.intercom_token)
+            boot({
+              hideDefaultLauncher: true,
+              email: email,
+              name: email.split('@')[0],
+              userHash: response.data.intercom_token,
+            })
+            setIsBooted(true)
+          }
+        }
+        isOpen ? hide() : show()
+      }
+      return <Tooltip hasArrow label="Support" placement='left' borderRadius={5} openDelay={500}>
+        <IconButton
+        isRound={true}
+        variant="solid"
+        colorScheme="minusxGreen"
+        size={'sm'}
+        disabled={messages.length === 0 || taskInProgress}  
+        aria-label="Support"
+        icon={<Icon as={BiSupport} boxSize={4} />}
+        onClick={toggleSupport}
+      />
+      </Tooltip>
+    }
+
   return (
     <VStack
       justifyContent="space-between"
@@ -305,23 +348,24 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
               disabled={taskInProgress}
               onChange={(e) => setInstructions(e.target.value)}
               onKeyDown={onKeyDown}
-              style={{ width: '98%' }}
+              style={{ width: '98%', height: "100%" }}
             />
             <VStack>
               {
                 taskInProgress ? (
                   <AbortTaskButton abortTask={() => dispatch(abortPlan())} disabled={!taskInProgress}/>
                 ) : <RunTaskButton runTask={runTask} disabled={taskInProgress} />
               }
-            {
-              showMessagesTooLong ?
-              <Tooltip hasArrow label={tooLongTooltip} placement='auto' borderRadius={5} defaultIsOpen onClose={() => setShowMessagesTooLong(false)} isDisabled={!showMessagesTooLong}>
-                {resetMessageHistoryButton}
-              </Tooltip> : 
-              <Tooltip hasArrow label="Clear Chat" placement='left' borderRadius={5} openDelay={500}>
-                {resetMessageHistoryButton}
-              </Tooltip>
-            }
+              {
+                showMessagesTooLong ?
+                <Tooltip hasArrow label={tooLongTooltip} placement='auto' borderRadius={5} defaultIsOpen onClose={() => setShowMessagesTooLong(false)} isDisabled={!showMessagesTooLong}>
+                  {resetMessageHistoryButton}
+                </Tooltip> : 
+                <Tooltip hasArrow label="Clear Chat" placement='left' borderRadius={5} openDelay={500}>
+                  {resetMessageHistoryButton}
+                </Tooltip>
+              }
+              <SupportButton />
             </VStack>
           </HStack>
         }