⬆️ Upgrade AI SDK (#1641)

apps/builder/public/templates/openai-assistant-chat.json

@@ -27,7 +27,6 @@
           "options": {
             "credentialsId": "clvqq3hey0007pub4almxnhk2",
             "action": "Ask Assistant",
-            "assistantId": "asst_jy7aW39QWtAcVDrLOBr2JSWo",
             "threadVariableId": "vf5gxmpqddsy4qugev6o0qs5c",
             "message": "{{User last message}}",
             "responseMapping": [{ "variableId": "vn8h1gigkjwv40godw2hrgclh" }]

apps/builder/src/components/icons.tsx

@@ -297,7 +297,7 @@ export const FilmIcon = (props: IconProps) => (
   </Icon>
 )
 
-export const WebhookIcon = (props: IconProps) => (
+export const ThunderIcon = (props: IconProps) => (
   <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
     <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
   </Icon>

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

@@ -1,5 +1,5 @@
-import { WebhookIcon } from '@/components/icons'
+import { ThunderIcon } from '@/components/icons'
 import { IconProps } from '@chakra-ui/react'
 import React from 'react'
 
-export const HttpRequestIcon = (props: IconProps) => <WebhookIcon {...props} />
+export const HttpRequestIcon = (props: IconProps) => <ThunderIcon {...props} />

apps/builder/src/features/editor/components/BlockIcon.tsx

@@ -1,6 +1,6 @@
 import { useColorModeValue } from '@chakra-ui/react'
 import React from 'react'
-import { FlagIcon, SendEmailIcon, WebhookIcon } from '@/components/icons'
+import { FlagIcon, SendEmailIcon, ThunderIcon } from '@/components/icons'
 import { WaitIcon } from '@/features/blocks/logic/wait/components/WaitIcon'
 import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon'
 import { JumpIcon } from '@/features/blocks/logic/jump/components/JumpIcon'
@@ -103,7 +103,7 @@ export const BlockIcon = ({ type, mt }: BlockIconProps): JSX.Element => {
     case IntegrationBlockType.GOOGLE_ANALYTICS:
       return <GoogleAnalyticsLogo mt={mt} />
     case IntegrationBlockType.WEBHOOK:
-      return <WebhookIcon mt={mt} />
+      return <ThunderIcon mt={mt} />
     case IntegrationBlockType.ZAPIER:
       return <ZapierLogo mt={mt} />
     case IntegrationBlockType.MAKE_COM:

apps/builder/src/features/forge/components/ForgedBlockNodeContent.tsx

@@ -1,19 +1,50 @@
 import { SetVariableLabel } from '@/components/SetVariableLabel'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { Stack, Text } from '@chakra-ui/react'
+import { Flex, Stack, Text, Tooltip } from '@chakra-ui/react'
 import { useForgedBlock } from '../hooks/useForgedBlock'
 import { ForgedBlock } from '@typebot.io/forge-repository/types'
+import { BlockIndices } from '@typebot.io/schemas'
+import { useMemo } from 'react'
+import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
+import { ThunderIcon } from '@/components/icons'
 
 type Props = {
   block: ForgedBlock
+  indices: BlockIndices
 }
-export const ForgedBlockNodeContent = ({ block }: Props) => {
+export const ForgedBlockNodeContent = ({ block, indices }: Props) => {
   const { blockDef, actionDef } = useForgedBlock(
     block.type,
     block.options?.action
   )
   const { typebot } = useTypebot()
 
+  const isStreamingNextBlock = useMemo(() => {
+    if (!actionDef?.run?.stream?.getStreamVariableId) return false
+    const variable = typebot?.variables.find(
+      (variable) =>
+        variable.id ===
+        actionDef.run!.stream!.getStreamVariableId(block.options)
+    )
+    if (!variable) return false
+    const nextBlock =
+      typebot?.groups[indices.groupIndex]?.blocks[indices.blockIndex + 1]
+    return (
+      nextBlock?.type === BubbleBlockType.TEXT &&
+      nextBlock.content?.richText?.length === 1 &&
+      nextBlock.content.richText[0].type === 'p' &&
+      nextBlock.content.richText[0].children.length === 1 &&
+      nextBlock.content.richText[0].children[0].text === `{{${variable.name}}}`
+    )
+  }, [
+    actionDef?.run,
+    block.options,
+    indices.blockIndex,
+    indices.groupIndex,
+    typebot?.groups,
+    typebot?.variables,
+  ])
+
   const setVariableIds = actionDef?.getSetVariableIds?.(block.options) ?? []
 
   const isConfigured =
@@ -32,6 +63,23 @@ export const ForgedBlockNodeContent = ({ block }: Props) => {
             variableId={variableId}
           />
         ))}
+      {isStreamingNextBlock && (
+        <Tooltip label="Text bubble content will be streamed">
+          <Flex
+            rounded="full"
+            p="1"
+            bgColor="gray.100"
+            color="purple.500"
+            borderWidth={1}
+            pos="absolute"
+            bottom="-15px"
+            left="118px"
+            zIndex={10}
+          >
+            <ThunderIcon fontSize="sm" />
+          </Flex>
+        </Tooltip>
+      )}
     </Stack>
   )
 }

apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx

@@ -30,6 +30,21 @@ import { getZodInnerSchema } from '../../helpers/getZodInnerSchema'
 import { TagsInput } from '@/components/TagsInput'
 import { PrimitiveList } from '@/components/PrimitiveList'
 
+const parseEnumItems = (
+  schema: z.ZodTypeAny,
+  layout?: ZodLayoutMetadata<ZodTypeAny>
+) => {
+  const values = layout?.hiddenItems
+    ? schema._def.values.filter((v: string) => !layout.hiddenItems?.includes(v))
+    : schema._def.values
+  if (layout?.toLabels)
+    return values.map((v: string) => ({
+      label: layout.toLabels!(v),
+      value: v,
+    }))
+  return values
+}
+
 const mdComponents = {
   a: ({ href, children }) => (
     <a
@@ -134,13 +149,7 @@ export const ZodFieldLayout = ({
         <DropdownList
           currentItem={data ?? layout?.defaultValue}
           onItemSelect={onDataChange}
-          items={
-            layout?.hiddenItems
-              ? innerSchema._def.values.filter(
-                  (v: any) => !layout.hiddenItems.includes(v)
-                )
-              : innerSchema._def.values
-          }
+          items={parseEnumItems(innerSchema, layout)}
           label={layout?.label}
           helperText={
             layout?.helperText ? (

apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx

@@ -155,7 +155,7 @@ export const BlockNodeContent = ({
       return <ZemanticAiNodeBody options={block.options} />
     }
     default: {
-      return <ForgedBlockNodeContent block={block} />
+      return <ForgedBlockNodeContent block={block} indices={indices} />
     }
   }
 }

apps/builder/src/features/preview/components/WebPreview.tsx

@@ -1,4 +1,4 @@
-import { WebhookIcon } from '@/components/icons'
+import { ThunderIcon } from '@/components/icons'
 import { useUser } from '@/features/account/hooks/useUser'
 import { useEditor } from '@/features/editor/providers/EditorProvider'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
@@ -18,7 +18,7 @@ export const WebPreview = () => {
   const handleNewLogs = (logs: ContinueChatResponse['logs']) => {
     logs?.forEach((log) => {
       showToast({
-        icon: <WebhookIcon />,
+        icon: <ThunderIcon />,
         status: log.status as 'success' | 'error' | 'info',
         title: log.status === 'error' ? 'An error occured' : undefined,
         description: log.description,