✨ Add movie recommendation template

Closes #377

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx

@@ -18,12 +18,6 @@ export const ButtonsBlockNode = ({ block, indices }: Props) => {
 
   return (
     <Stack w="full">
-      {block.options.variableId ? (
-        <SetVariableLabel
-          variableId={block.options.variableId}
-          variables={typebot?.variables}
-        />
-      ) : null}
       {block.options.dynamicVariableId ? (
         <Wrap spacing={1}>
           <Text>Display</Text>
@@ -35,6 +29,12 @@ export const ButtonsBlockNode = ({ block, indices }: Props) => {
       ) : (
         <ItemNodesList block={block} indices={indices} />
       )}
+      {block.options.variableId ? (
+        <SetVariableLabel
+          variableId={block.options.variableId}
+          variables={typebot?.variables}
+        />
+      ) : null}
     </Stack>
   )
 }

apps/builder/src/features/blocks/integrations/webhook/components/WebhookContent.tsx

@@ -1,20 +1,33 @@
-import { Text } from '@chakra-ui/react'
+import { Stack, Text } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor'
 import { WebhookBlock } from 'models'
 import { byId } from 'utils'
+import { SetVariableLabel } from '@/components/SetVariableLabel'
 
 type Props = {
   block: WebhookBlock
 }
 
-export const WebhookContent = ({ block: { webhookId } }: Props) => {
+export const WebhookContent = ({ block: { webhookId, options } }: Props) => {
+  const { typebot } = useTypebot()
   const { webhooks } = useTypebot()
   const webhook = webhooks.find(byId(webhookId))
 
   if (!webhook?.url) return <Text color="gray.500">Configure...</Text>
   return (
-    <Text noOfLines={2} pr="6">
-      {webhook.method} {webhook.url}
-    </Text>
+    <Stack w="full">
+      <Text noOfLines={2} pr="6">
+        {webhook.method} {webhook.url}
+      </Text>
+      {options.responseVariableMapping
+        .filter((mapping) => mapping.variableId)
+        .map((mapping) => (
+          <SetVariableLabel
+            key={mapping.variableId}
+            variableId={mapping.variableId as string}
+            variables={typebot?.variables}
+          />
+        ))}
+    </Stack>
   )
 }

apps/builder/src/features/blocks/logic/redirect/components/RedirectNodeContent.tsx

@@ -5,7 +5,7 @@ import { RedirectOptions } from 'models'
 type Props = { url: RedirectOptions['url'] }
 
 export const RedirectNodeContent = ({ url }: Props) => (
-  <Text color={url ? 'currentcolor' : 'gray.500'} noOfLines={1}>
+  <Text color={url ? 'currentcolor' : 'gray.500'} noOfLines={2}>
     {url ? `Redirect to ${url}` : 'Configure...'}
   </Text>
 )

apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx

@@ -190,9 +190,7 @@ const NonMemoizedDraggableGroupNode = ({
           p="4"
           rounded="xl"
           bg={bg}
-          borderWidth={
-            isConnecting || isContextMenuOpened || isPreviewing ? '2px' : '1px'
-          }
+          borderWidth="1px"
           borderColor={
             isConnecting || isContextMenuOpened || isPreviewing || isFocused
               ? previewingBorderColor

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -123,13 +123,15 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                         isDisabled={template.isComingSoon}
                       >
                         <HStack justifyContent="space-between" w="full">
-                          <HStack>
+                          <HStack overflow="hidden">
                             <Text>{template.emoji}</Text>
-                            <Text>{template.name}</Text>
+                            <Text noOfLines={0} display="block">
+                              {template.name}
+                            </Text>
                           </HStack>
 
                           {template.isNew && (
-                            <Tag colorScheme="orange" size="sm">
+                            <Tag colorScheme="orange" size="sm" flexShrink={0}>
                               New
                             </Tag>
                           )}

apps/builder/src/features/templates/data.ts

@@ -27,4 +27,10 @@ export const templates: TemplateProps[] = [
     emoji: '💬',
     fileName: 'faq.json',
   },
+  {
+    name: 'Movie Recommendation',
+    emoji: '🍿',
+    fileName: 'movie-recommendation.json',
+    isNew: true,
+  },
 ]