🚸 (chatwoot) Add close widget task

apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootBlockNodeLabel.tsx

@@ -6,7 +6,9 @@ type Props = {
 }
 
 export const ChatwootBlockNodeLabel = ({ block }: Props) =>
-  block.options.websiteToken.length === 0 ? (
+  block.options.task === 'Close widget' ? (
+    <Text>Close Chatwoot</Text>
+  ) : block.options.websiteToken.length === 0 ? (
     <Text color="gray.500">Configure...</Text>
   ) : (
     <Text>Open Chatwoot</Text>

apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettingsForm.tsx

@@ -1,3 +1,4 @@
+import { DropdownList } from '@/components/DropdownList'
 import { TextInput } from '@/components/inputs'
 import {
   Accordion,
@@ -7,7 +8,7 @@ import {
   AccordionPanel,
   Stack,
 } from '@chakra-ui/react'
-import { ChatwootOptions } from 'models'
+import { ChatwootOptions, chatwootTasks } from 'models'
 import React from 'react'
 
 type Props = {
@@ -16,8 +17,20 @@ type Props = {
 }
 
 export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
+  const updateTask = (task: (typeof chatwootTasks)[number]) => {
+    onOptionsChange({ ...options, task })
+  }
+
   return (
     <Stack spacing={4}>
+      <DropdownList
+        currentItem={options.task ?? 'Show widget'}
+        onItemSelect={updateTask}
+        items={chatwootTasks}
+      />
+      {!options.task ||
+        (options.task === 'Show widget' && (
+          <>
             <TextInput
               isRequired
               label="Base URL"
@@ -47,7 +60,10 @@ export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
                     label="ID"
                     defaultValue={options.user?.id}
                     onChange={(id: string) => {
-                onOptionsChange({ ...options, user: { ...options.user, id } })
+                      onOptionsChange({
+                        ...options,
+                        user: { ...options.user, id },
+                      })
                     }}
                   />
                   <TextInput
@@ -93,6 +109,8 @@ export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
                 </AccordionPanel>
               </AccordionItem>
             </Accordion>
+          </>
+        ))}
     </Stack>
   )
 }

apps/viewer/src/features/blocks/integrations/chatwoot/api/utils/executeChatwootBlock.ts

@@ -49,13 +49,25 @@ if (window.$chatwoot) {
   })(document, "script");
 }`
 
+const chatwootCloseCode = `
+if (window.$chatwoot) {
+  window.$chatwoot.toggle("close");
+  window.$chatwoot.toggleBubbleVisibility("hide");
+}
+`
+
 export const executeChatwootBlock = (
   { typebot: { variables }, result }: SessionState,
   block: ChatwootBlock,
   lastBubbleBlockId?: string
 ): ExecuteIntegrationResponse => {
   const isPreview = !result.id
-  const chatwootCode = parseChatwootOpenCode(block.options)
+  const chatwootCode =
+    block.options.task === 'Close widget'
+      ? chatwootCloseCode
+      : isPreview
+      ? ''
+      : parseChatwootOpenCode(block.options)
   return {
     outgoingEdgeId: block.outgoingEdgeId,
     clientSideActions: [
@@ -76,7 +88,8 @@ export const executeChatwootBlock = (
         },
       },
     ],
-    logs: isPreview
+    logs:
+      chatwootCode === ''
         ? [
             {
               status: 'info',

packages/models/features/blocks/integrations/chatwoot.ts

@@ -2,7 +2,10 @@ import { z } from 'zod'
 import { blockBaseSchema } from '../baseSchemas'
 import { IntegrationBlockType } from './enums'
 
+export const chatwootTasks = ['Show widget', 'Close widget'] as const
+
 export const chatwootOptionsSchema = z.object({
+  task: z.enum(chatwootTasks).optional(),
   baseUrl: z.string(),
   websiteToken: z.string(),
   user: z
@@ -24,6 +27,7 @@ export const chatwootBlockSchema = blockBaseSchema.and(
 )
 
 export const defaultChatwootOptions: ChatwootOptions = {
+  task: 'Show widget',
   baseUrl: 'https://app.chatwoot.com',
   websiteToken: '',
 }