build: 📦️ Update packages

apps/builder/components/share/customDomain/CustomDomainsDropdown.tsx

@@ -87,7 +87,7 @@ export const CustomDomainsDropdown = ({
         textAlign="left"
         {...props}
       >
-        <Text isTruncated overflowY="visible" h="20px">
+        <Text noOfLines={0} overflowY="visible" h="20px">
           {currentCustomDomain ?? 'Add my domain'}
         </Text>
       </MenuButton>

apps/builder/components/shared/CredentialsDropdown.tsx

@@ -103,7 +103,7 @@ export const CredentialsDropdown = ({
         textAlign="left"
         {...props}
       >
-        <Text isTruncated overflowY="visible" h="20px">
+        <Text noOfLines={0} overflowY="visible" h="20px">
           {currentCredential ? currentCredential.name : defaultCredentialsLabel}
         </Text>
       </MenuButton>

apps/builder/components/shared/DropdownList.tsx

@@ -10,7 +10,7 @@ import {
   Stack,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from 'assets/icons'
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 type Props<T> = {
   currentItem?: T
@@ -39,8 +39,8 @@ export const DropdownList = <T,>({
         textAlign="left"
         {...props}
       >
-        <chakra.span isTruncated display="block">
-          {currentItem ?? placeholder}
+        <chakra.span noOfLines={0} display="block">
+          {(currentItem ?? placeholder) as unknown as ReactNode}
         </chakra.span>
       </MenuButton>
       <Portal>
@@ -55,7 +55,7 @@ export const DropdownList = <T,>({
                 textOverflow="ellipsis"
                 onClick={handleMenuItemClick(item)}
               >
-                {item}
+                {item as unknown as ReactNode}
               </MenuItem>
             ))}
           </Stack>

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ConditionNodeContent.tsx

@@ -22,7 +22,7 @@ export const ConditionNodeContent = ({ item }: Props) => {
               byId(comparison.variableId)
             )
             return (
-              <Wrap key={comparison.id} spacing={1} isTruncated>
+              <Wrap key={comparison.id} spacing={1} noOfLines={0}>
                 {idx > 0 && <Text>{item.content.logicalOperator ?? ''}</Text>}
                 {variable?.name && (
                   <Tag bgColor="orange.400" color="white">
@@ -38,7 +38,7 @@ export const ConditionNodeContent = ({ item }: Props) => {
                 )}
                 {comparison?.value && (
                   <Tag bgColor={'gray.200'}>
-                    <Text isTruncated>{comparison.value}</Text>
+                    <Text noOfLines={0}>{comparison.value}</Text>
                   </Tag>
                 )}
               </Wrap>

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeOverlay.tsx

@@ -1,6 +1,6 @@
 import { Flex, FlexProps } from '@chakra-ui/react'
 import { Item } from 'models'
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 type Props = {
   item: Item
@@ -20,7 +20,7 @@ export const ItemNodeOverlay = ({ item, ...props }: Props) => {
       shadow="lg"
       {...props}
     >
-      {item.content ?? 'Click to edit'}
+      {(item.content ?? 'Click to edit') as ReactNode}
     </Flex>
   )
 }

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConfigureContent.tsx

@@ -4,7 +4,7 @@ import { Text } from '@chakra-ui/react'
 type Props = { label?: string }
 
 export const ConfigureContent = ({ label }: Props) => (
-  <Text color={label ? 'currentcolor' : 'gray.500'} isTruncated>
+  <Text color={label ? 'currentcolor' : 'gray.500'} noOfLines={0}>
     {label ?? 'Configure...'}
   </Text>
 )

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SendEmailContent.tsx

@@ -9,7 +9,7 @@ export const SendEmailContent = ({ step }: Props) => {
   if (step.options.recipients.length === 0)
     return <Text color="gray.500">Configure...</Text>
   return (
-    <Wrap isTruncated pr="6">
+    <Wrap noOfLines={2} pr="6">
       <WrapItem>
         <Text>Send email to</Text>
       </WrapItem>

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SetVariableContent.tsx

@@ -9,7 +9,7 @@ export const SetVariableContent = ({ step }: { step: SetVariableStep }) => {
     typebot?.variables.find(byId(step.options.variableId))?.name ?? ''
   const expression = step.options.expressionToEvaluate ?? ''
   return (
-    <Text color={'gray.500'} isTruncated>
+    <Text color={'gray.500'} noOfLines={2}>
       {variableName === '' && expression === ''
         ? 'Click to edit...'
         : `${variableName} ${expression ? `= ${expression}` : ``}`}

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WebhookContent.tsx

@@ -13,7 +13,7 @@ export const WebhookContent = ({ step: { webhookId } }: Props) => {
 
   if (!webhook?.url) return <Text color="gray.500">Configure...</Text>
   return (
-    <Text isTruncated pr="6">
+    <Text noOfLines={2} pr="6">
       {webhook.method} {webhook.url}
     </Text>
   )

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx

@@ -36,7 +36,7 @@ export const ProviderWebhookContent = ({ step, configuredLabel }: Props) => {
   if (isNotDefined(webhook?.body))
     return <Text color="gray.500">Configure...</Text>
   return (
-    <Text isTruncated pr="6">
+    <Text noOfLines={0} pr="6">
       {webhook?.url ? configuredLabel : 'Disabled'}
     </Text>
   )

apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx

@@ -4,27 +4,32 @@ import {
   Plate,
   selectEditor,
   serializeHtml,
-  TDescendant,
+  TEditor,
+  TElement,
+  Value,
   withPlate,
 } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from 'libs/plate'
-import { BaseSelection, createEditor, Transforms } from 'slate'
+import { BaseEditor, BaseSelection, createEditor, Transforms } from 'slate'
 import { ToolBar } from './ToolBar'
 import { parseHtmlStringToPlainText } from 'services/utils'
 import { defaultTextBubbleContent, TextBubbleContent, Variable } from 'models'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { ReactEditor } from 'slate-react'
 
 type Props = {
-  initialValue: TDescendant[]
+  initialValue: TElement[]
   onClose: (newContent: TextBubbleContent) => void
 }
 
 export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
   const randomEditorId = useMemo(() => Math.random().toString(), [])
   const editor = useMemo(
     () =>
-      withPlate(createEditor(), { id: randomEditorId, plugins: platePlugins }),
+      withPlate(createEditor() as TEditor<Value>, {
+        id: randomEditorId,
+        plugins: platePlugins,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   )
@@ -65,7 +70,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
     }
   }
 
-  const convertValueToStepContent = (value: unknown[]): TextBubbleContent => {
+  const convertValueToStepContent = (value: TElement[]): TextBubbleContent => {
     if (value.length === 0) defaultTextBubbleContent
     const html = serializeHtml(editor, {
       nodes: value,
@@ -84,12 +89,12 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
   const handleVariableSelected = (variable?: Variable) => {
     setIsVariableDropdownOpen(false)
     if (!rememberedSelection.current || !variable) return
-    Transforms.select(editor, rememberedSelection.current)
-    Transforms.insertText(editor, '{{' + variable.name + '}}')
+    Transforms.select(editor as BaseEditor, rememberedSelection.current)
+    Transforms.insertText(editor as BaseEditor, '{{' + variable.name + '}}')
     ReactEditor.focus(editor as unknown as ReactEditor)
   }
 
-  const handleChangeEditorContent = (val: unknown[]) => {
+  const handleChangeEditorContent = (val: TElement[]) => {
     setValue(val)
     setIsVariableDropdownOpen(false)
   }
@@ -110,7 +115,10 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
       spacing={0}
       cursor="text"
     >
-      <ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
+      <ToolBar
+        editor={editor}
+        onVariablesButtonClick={() => setIsVariableDropdownOpen(true)}
+      />
       <Plate
         id={randomEditorId}
         editableProps={{

apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/ToolBar.tsx

@@ -4,18 +4,24 @@ import {
   MARK_ITALIC,
   MARK_UNDERLINE,
 } from '@udecode/plate-basic-marks'
-import { usePlateEditorRef, getPluginType } from '@udecode/plate-core'
+import { getPluginType, PlateEditor, Value } from '@udecode/plate-core'
 import { LinkToolbarButton } from '@udecode/plate-ui-link'
 import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
 import { BoldIcon, ItalicIcon, UnderlineIcon, LinkIcon } from 'assets/icons'
 
-type Props = { onVariablesButtonClick: () => void } & StackProps
-export const ToolBar = (props: Props) => {
-  const editor = usePlateEditorRef()
+type Props = {
+  editor: PlateEditor<Value>
+  onVariablesButtonClick: () => void
+} & StackProps
 
+export const ToolBar = ({
+  editor,
+  onVariablesButtonClick,
+  ...props
+}: Props) => {
   const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
     e.preventDefault()
-    props.onVariablesButtonClick()
+    onVariablesButtonClick()
   }
   return (
     <HStack

apps/builder/components/shared/TypebotHeader/CollaborationMenuButton/CollaboratorButton.tsx

@@ -88,7 +88,11 @@ export const CollaboratorIdentityContent = ({
             {name}
           </Text>
         )}
-        <Text color="gray.500" fontSize={name ? '14px' : 'inherit'} isTruncated>
+        <Text
+          color="gray.500"
+          fontSize={name ? '14px' : 'inherit'}
+          noOfLines={0}
+        >
           {email}
         </Text>
       </Stack>

apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx

@@ -18,7 +18,7 @@ export const EditableTypebotName = ({ name, onNewName }: EditableProps) => {
     <Tooltip label="Rename">
       <Editable value={localName} onChange={setLocalName} onSubmit={onNewName}>
         <EditablePreview
-          isTruncated
+          noOfLines={0}
           cursor="pointer"
           maxW="200px"
           overflow="hidden"

apps/builder/layouts/results/SubmissionContent.tsx

@@ -134,7 +134,7 @@ export const SubmissionsContent = ({
     () =>
       publishedTypebot ? convertResultsToTableData(results, resultHeader) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [results]
+    [publishedTypebot?.id, resultHeader.length, results]
   )
 
   const handleLogsModalClose = () => setInspectingLogsResultId(undefined)