✨ Add Chatwoot livechat integration

Closes #159

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,6 +20,8 @@ export type TextBoxProps = {
     | ComponentWithAs<'input', InputProps>
   withVariableButton?: boolean
   debounceTimeout?: number
+  label?: string
+  moreInfoTooltip?: string
 } & Omit<InputProps & TextareaProps, 'onChange'>
 
 export const TextBox = ({
@@ -24,6 +29,8 @@ export const TextBox = ({
   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>
   )
 }