diff --git a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootBlockNodeLabel.tsx b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootBlockNodeLabel.tsx index e4958290c..77f04547c 100644 --- a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootBlockNodeLabel.tsx +++ b/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' ? ( + Close Chatwoot + ) : block.options.websiteToken.length === 0 ? ( Configure... ) : ( Open Chatwoot diff --git a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettingsForm.tsx b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettingsForm.tsx index bf8562970..6e3dabf9d 100644 --- a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettingsForm.tsx +++ b/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,83 +17,100 @@ type Props = { } export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => { + const updateTask = (task: (typeof chatwootTasks)[number]) => { + onOptionsChange({ ...options, task }) + } + return ( - { - onOptionsChange({ ...options, baseUrl }) - }} - withVariableButton={false} + - - onOptionsChange({ ...options, websiteToken }) - } - moreInfoTooltip="Can be found in Chatwoot under Settings > Inboxes > Settings > Configuration, in the code snippet." - /> - - - - Set user details - - - + {!options.task || + (options.task === 'Show widget' && ( + <> { - onOptionsChange({ ...options, user: { ...options.user, id } }) + isRequired + label="Base URL" + defaultValue={options.baseUrl} + onChange={(baseUrl: string) => { + onOptionsChange({ ...options, baseUrl }) }} + withVariableButton={false} /> { - onOptionsChange({ - ...options, - user: { ...options.user, name }, - }) - }} + 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." /> - { - onOptionsChange({ - ...options, - user: { ...options.user, email }, - }) - }} - /> - { - onOptionsChange({ - ...options, - user: { ...options.user, avatarUrl }, - }) - }} - /> - { - onOptionsChange({ - ...options, - user: { ...options.user, phoneNumber }, - }) - }} - /> - - - + + + + Set user details + + + + { + onOptionsChange({ + ...options, + user: { ...options.user, id }, + }) + }} + /> + { + onOptionsChange({ + ...options, + user: { ...options.user, name }, + }) + }} + /> + { + onOptionsChange({ + ...options, + user: { ...options.user, email }, + }) + }} + /> + { + onOptionsChange({ + ...options, + user: { ...options.user, avatarUrl }, + }) + }} + /> + { + onOptionsChange({ + ...options, + user: { ...options.user, phoneNumber }, + }) + }} + /> + + + + + ))} ) } diff --git a/apps/viewer/src/features/blocks/integrations/chatwoot/api/utils/executeChatwootBlock.ts b/apps/viewer/src/features/blocks/integrations/chatwoot/api/utils/executeChatwootBlock.ts index ccbafa50b..445bc0b46 100644 --- a/apps/viewer/src/features/blocks/integrations/chatwoot/api/utils/executeChatwootBlock.ts +++ b/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,14 +88,15 @@ export const executeChatwootBlock = ( }, }, ], - logs: isPreview - ? [ - { - status: 'info', - description: 'Chatwoot block is not supported in preview', - details: null, - }, - ] - : undefined, + logs: + chatwootCode === '' + ? [ + { + status: 'info', + description: 'Chatwoot block is not supported in preview', + details: null, + }, + ] + : undefined, } } diff --git a/packages/models/features/blocks/integrations/chatwoot.ts b/packages/models/features/blocks/integrations/chatwoot.ts index d14008e0e..72fec765d 100644 --- a/packages/models/features/blocks/integrations/chatwoot.ts +++ b/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: '', }