✨ Add Chatwoot livechat integration

Closes #159

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('john@email.com')
+    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'