✨ Add Chatwoot livechat integration

Closes #159

apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsForm.tsx

@@ -24,7 +24,6 @@ export const WorkspaceSettingsForm = ({ onClose }: { onClose: () => void }) => {
 
   const handleChangeIcon = (icon: string) => {
     if (!workspace?.id) return
-    console.log(icon)
     updateWorkspace(workspace?.id, { icon })
   }
 

apps/builder/components/editor/BlocksSideBar/BlockIcon.tsx

@@ -30,6 +30,7 @@ import {
   PabblyConnectLogo,
   ZapierLogo,
 } from 'assets/logos'
+import { ChatwootLogo } from 'features/chatwoot'
 import {
   BubbleBlockType,
   InputBlockType,
@@ -95,6 +96,8 @@ export const BlockIcon = ({ type, ...props }: BlockIconProps) => {
       return <PabblyConnectLogo {...props} />
     case IntegrationBlockType.EMAIL:
       return <SendEmailIcon {...props} />
+    case IntegrationBlockType.CHATWOOT:
+      return <ChatwootLogo {...props} />
     case 'start':
       return <FlagIcon {...props} />
   }

apps/builder/components/editor/BlocksSideBar/BlockTypeLabel.tsx

@@ -98,5 +98,7 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
       return <Text>Pabbly</Text>
     case IntegrationBlockType.EMAIL:
       return <Text>Email</Text>
+    case IntegrationBlockType.CHATWOOT:
+      return <Text>Chatwoot</Text>
   }
 }

apps/builder/components/results/ResultsTable/ResultsActionButtons.tsx

@@ -115,7 +115,6 @@ export const ResultsActionButtons = ({
     const data = dataToUnparse.map<{ [key: string]: string }>((data) => {
       const newObject: { [key: string]: string } = {}
       fields?.forEach((field) => {
-        console.log(data[field])
         newObject[field] = data[field]?.plainText
       })
       return newObject

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx

@@ -1,4 +1,5 @@
 import { Text } from '@chakra-ui/react'
+import { ChatwootBlockNodeLabel } from 'features/chatwoot'
 import {
   Block,
   StartBlock,
@@ -153,6 +154,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     case IntegrationBlockType.EMAIL: {
       return <SendEmailContent block={block} />
     }
+    case IntegrationBlockType.CHATWOOT: {
+      return <ChatwootBlockNodeLabel block={block} />
+    }
     case 'start': {
       return <Text>Start</Text>
     }

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -7,6 +7,7 @@ import {
   IconButton,
 } from '@chakra-ui/react'
 import { ExpandIcon } from 'assets/icons'
+import { ChatwootSettingsForm } from 'features/chatwoot/components'
 import {
   ConditionItem,
   ConditionBlock,
@@ -276,5 +277,13 @@ export const BlockSettings = ({
         />
       )
     }
+    case IntegrationBlockType.CHATWOOT: {
+      return (
+        <ChatwootSettingsForm
+          options={block.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
   }
 }

apps/builder/components/shared/MoreInfoTooltip.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export const MoreInfoTooltip = ({ children }: Props) => {
   return (
-    <Tooltip label={children} hasArrow rounded="md" p="3">
+    <Tooltip label={children} hasArrow rounded="md" p="3" placement="top">
       <chakra.span cursor="pointer">
         <HelpCircleIcon />
       </chakra.span>

apps/builder/components/shared/Textbox/TextBox.tsx

@@ -1,5 +1,7 @@
 import {
   ComponentWithAs,
+  FormControl,
+  FormLabel,
   HStack,
   InputProps,
   TextareaProps,
@@ -9,6 +11,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { env } from 'utils'
 import { VariablesButton } from '../buttons/VariablesButton'
+import { MoreInfoTooltip } from '../MoreInfoTooltip'
 
 export type TextBoxProps = {
   onChange: (value: string) => void
@@ -17,13 +20,17 @@ export type TextBoxProps = {
     | ComponentWithAs<'input', InputProps>
   withVariableButton?: boolean
   debounceTimeout?: number
+  label?: string
+  moreInfoTooltip?: string
 } & Omit<InputProps & TextareaProps, 'onChange'>
 
 export const TextBox = ({
   onChange,
   TextBox,
   withVariableButton = true,
   debounceTimeout = 1000,
+  label,
+  moreInfoTooltip,
   ...props
 }: TextBoxProps) => {
   const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
@@ -92,29 +99,36 @@ export const TextBox = ({
     setCarretPosition(textBoxRef.current.selectionStart)
   }
 
-  if (!withVariableButton) {
-    return (
-      <TextBox
-        ref={textBoxRef}
-        onChange={handleChange}
-        bgColor={'white'}
-        value={value}
-        {...props}
-      />
-    )
-  }
+  const Input = (
+    <TextBox
+      ref={textBoxRef}
+      value={value}
+      onKeyUp={handleKeyUp}
+      onClick={handleKeyUp}
+      onChange={handleChange}
+      bgColor={'white'}
+      {...props}
+    />
+  )
+
   return (
-    <HStack spacing={0} align={'flex-end'}>
-      <TextBox
-        ref={textBoxRef}
-        value={value}
-        onKeyUp={handleKeyUp}
-        onClick={handleKeyUp}
-        onChange={handleChange}
-        bgColor={'white'}
-        {...props}
-      />
-      <VariablesButton onSelectVariable={handleVariableSelected} />
-    </HStack>
+    <FormControl isRequired={props.isRequired}>
+      {label && (
+        <FormLabel>
+          {label}{' '}
+          {moreInfoTooltip && (
+            <MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
+          )}
+        </FormLabel>
+      )}
+      {withVariableButton ? (
+        <HStack spacing={0} align={'flex-end'}>
+          {Input}
+          <VariablesButton onSelectVariable={handleVariableSelected} />
+        </HStack>
+      ) : (
+        Input
+      )}
+    </FormControl>
   )
 }

apps/builder/contexts/ResultsProvider.tsx

@@ -46,8 +46,6 @@ export const ResultsProvider = ({
     typebotId,
   })
 
-  console.log(data?.flatMap((d) => d.results) ?? [])
-
   const fetchMore = () => setSize((state) => state + 1)
 
   const resultHeader = useMemo(

apps/builder/features/chatwoot/chatwoot.spec.ts

@@ -0,0 +1,43 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import cuid from 'cuid'
+import { defaultChatwootOptions, IntegrationBlockType } from 'models'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+const typebotId = cuid()
+
+const chatwootTestWebsiteToken = 'tueXiiqEmrWUCZ4NUyoR7nhE'
+
+test.describe('Chatwoot block', () => {
+  test('should be configurable', async ({ page }) => {
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultGroupWithBlock({
+          type: IntegrationBlockType.CHATWOOT,
+          options: defaultChatwootOptions,
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+    await page.getByText('Configure...').click()
+    await expect(page.getByLabel('Base URL')).toHaveAttribute(
+      'value',
+      defaultChatwootOptions.baseUrl
+    )
+    await page.getByLabel('Website token').fill(chatwootTestWebsiteToken)
+    await expect(page.getByText('Open Chatwoot')).toBeVisible()
+    await page.getByRole('button', { name: 'Set user details' }).click()
+    await page.getByLabel('ID').fill('123')
+    await page.getByLabel('Name').fill('John Doe')
+    await page.getByLabel('Email').fill('[email protected]')
+    await page.getByLabel('Avatar URL').fill('https://domain.com/avatar.png')
+    await page.getByLabel('Phone number').fill('+33654347543')
+    await page.getByRole('button', { name: 'Preview' }).click()
+    await expect(
+      page.getByText("Chatwoot won't open in preview mode").nth(0)
+    ).toBeVisible()
+  })
+})

apps/builder/features/chatwoot/components/ChatwootBlockNodeLabel.tsx

@@ -0,0 +1,13 @@
+import { Text } from '@chakra-ui/react'
+import { ChatwootBlock } from 'models'
+
+type Props = {
+  block: ChatwootBlock
+}
+
+export const ChatwootBlockNodeLabel = ({ block }: Props) =>
+  block.options.websiteToken.length === 0 ? (
+    <Text color="gray.500">Configure...</Text>
+  ) : (
+    <Text>Open Chatwoot</Text>
+  )

apps/builder/features/chatwoot/components/ChatwootLogo.tsx

@@ -0,0 +1,29 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const ChatwootLogo = (props: IconProps) => (
+  <Icon
+    viewBox="0 0 512 512"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g
+      id="Square-logo"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g id="chatwoot_logo" fill-rule="nonzero">
+        <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
+        <path
+          d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z"
+          id="Fill-1"
+          stroke="#FFFFFF"
+          stroke-width="6"
+          fill="#FFFFFF"
+        ></path>
+      </g>
+    </g>
+  </Icon>
+)

apps/builder/features/chatwoot/components/ChatwootSettingsForm.tsx

@@ -0,0 +1,98 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Stack,
+} from '@chakra-ui/react'
+import { Input } from 'components/shared/Textbox'
+import { ChatwootOptions } from 'models'
+import React from 'react'
+
+type Props = {
+  options: ChatwootOptions
+  onOptionsChange: (options: ChatwootOptions) => void
+}
+
+export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
+  return (
+    <Stack spacing={4}>
+      <Input
+        isRequired
+        label="Base URL"
+        defaultValue={options.baseUrl}
+        onChange={(baseUrl: string) => {
+          onOptionsChange({ ...options, baseUrl })
+        }}
+        withVariableButton={false}
+      />
+      <Input
+        isRequired
+        label="Website token"
+        defaultValue={options.websiteToken}
+        onChange={(websiteToken) =>
+          onOptionsChange({ ...options, websiteToken })
+        }
+        moreInfoTooltip="Can be found in Chatwoot under Settings > Inboxes > Settings > Configuration, in the code snippet."
+      />
+      <Accordion allowMultiple>
+        <AccordionItem>
+          <AccordionButton justifyContent="space-between">
+            Set user details
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} as={Stack} spacing="4">
+            <Input
+              label="ID"
+              defaultValue={options.user?.id}
+              onChange={(id: string) => {
+                onOptionsChange({ ...options, user: { ...options.user, id } })
+              }}
+            />
+            <Input
+              label="Name"
+              defaultValue={options.user?.name}
+              onChange={(name: string) => {
+                onOptionsChange({
+                  ...options,
+                  user: { ...options.user, name },
+                })
+              }}
+            />
+            <Input
+              label="Email"
+              defaultValue={options.user?.email}
+              onChange={(email: string) => {
+                onOptionsChange({
+                  ...options,
+                  user: { ...options.user, email },
+                })
+              }}
+            />
+            <Input
+              label="Avatar URL"
+              defaultValue={options.user?.avatarUrl}
+              onChange={(avatarUrl: string) => {
+                onOptionsChange({
+                  ...options,
+                  user: { ...options.user, avatarUrl },
+                })
+              }}
+            />
+            <Input
+              label="Phone number"
+              defaultValue={options.user?.phoneNumber}
+              onChange={(phoneNumber: string) => {
+                onOptionsChange({
+                  ...options,
+                  user: { ...options.user, phoneNumber },
+                })
+              }}
+            />
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Stack>
+  )
+}

apps/builder/features/chatwoot/components/index.ts

@@ -0,0 +1,3 @@
+export { ChatwootLogo } from './ChatwootLogo'
+export { ChatwootBlockNodeLabel } from './ChatwootBlockNodeLabel'
+export { ChatwootSettingsForm } from './ChatwootSettingsForm'

apps/builder/features/chatwoot/index.ts

@@ -0,0 +1 @@
+export * from './components'

apps/builder/playwright.config.ts

@@ -4,7 +4,6 @@ import { playwrightBaseConfig } from 'configs/playwright'
 
 const config: PlaywrightTestConfig = {
   ...playwrightBaseConfig,
-  testDir: path.join(__dirname, 'playwright/tests'),
   webServer: process.env.CI
     ? {
         ...(playwrightBaseConfig.webServer as { command: string }),