⚡ (openai) Add Messages sequence type

To make it easy to just plug a sequence of user / assistant messages to Chat completion task

Closes #387

apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx

@@ -1,6 +1,13 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 
-export const DateNodeContent = () => (
-  <Text color={'gray.500'}>Pick a date...</Text>
-)
+type Props = {
+  variableId?: string
+}
+export const DateNodeContent = ({ variableId }: Props) =>
+  variableId ? (
+    <WithVariableContent variableId={variableId} />
+  ) : (
+    <Text color={'gray.500'}>Pick a date...</Text>
+  )

apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputNodeContent.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { EmailInputBlock } from 'models'
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 
 type Props = {
+  variableId?: string
   placeholder: EmailInputBlock['options']['labels']['placeholder']
 }
 
-export const EmailInputNodeContent = ({ placeholder }: Props) => (
-  <Text color={'gray.500'}>{placeholder}</Text>
-)
+export const EmailInputNodeContent = ({ variableId, placeholder }: Props) =>
+  variableId ? (
+    <WithVariableContent variableId={variableId} />
+  ) : (
+    <Text color={'gray.500'}>{placeholder}</Text>
+  )

apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx

@@ -1,3 +1,4 @@
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 import { Text } from '@chakra-ui/react'
 import { FileInputOptions } from 'models'
 
@@ -5,8 +6,13 @@ type Props = {
   options: FileInputOptions
 }
 
-export const FileInputContent = ({ options: { isMultipleAllowed } }: Props) => (
-  <Text noOfLines={1} pr="6">
-    Collect {isMultipleAllowed ? 'files' : 'file'}
-  </Text>
-)
+export const FileInputContent = ({
+  options: { isMultipleAllowed, variableId },
+}: Props) =>
+  variableId ? (
+    <WithVariableContent variableId={variableId} />
+  ) : (
+    <Text noOfLines={1} pr="6">
+      Collect {isMultipleAllowed ? 'files' : 'file'}
+    </Text>
+  )

apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { NumberInputBlock } from 'models'
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 
 type Props = {
+  variableId?: string
   placeholder: NumberInputBlock['options']['labels']['placeholder']
 }
 
-export const NumberNodeContent = ({ placeholder }: Props) => (
-  <Text color={'gray.500'}>{placeholder}</Text>
-)
+export const NumberNodeContent = ({ variableId, placeholder }: Props) =>
+  variableId ? (
+    <WithVariableContent variableId={variableId} />
+  ) : (
+    <Text color={'gray.500'}>{placeholder}</Text>
+  )

apps/builder/src/features/blocks/inputs/phone/components/PhoneNodeContent.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { PhoneNumberInputOptions } from 'models'
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 
 type Props = {
+  variableId?: string
   placeholder: PhoneNumberInputOptions['labels']['placeholder']
 }
 
-export const PhoneNodeContent = ({ placeholder }: Props) => (
-  <Text color={'gray.500'}>{placeholder}</Text>
-)
+export const PhoneNodeContent = ({ variableId, placeholder }: Props) =>
+  variableId ? (
+    <WithVariableContent variableId={variableId} />
+  ) : (
+    <Text color={'gray.500'}>{placeholder}</Text>
+  )

apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx

@@ -1,13 +1,18 @@
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 import { Text } from '@chakra-ui/react'
 import { RatingInputBlock } from 'models'
 
 type Props = {
+  variableId?: string
   block: RatingInputBlock
 }
 
-export const RatingInputContent = ({ block }: Props) => (
-  <Text noOfLines={1} pr="6">
-    Rate from {block.options.buttonType === 'Icons' ? 1 : 0} to{' '}
-    {block.options.length}
-  </Text>
-)
+export const RatingInputContent = ({ variableId, block }: Props) =>
+  variableId ? (
+    <WithVariableContent variableId={variableId} />
+  ) : (
+    <Text noOfLines={1} pr="6">
+      Rate from {block.options.buttonType === 'Icons' ? 1 : 0} to{' '}
+      {block.options.length}
+    </Text>
+  )

apps/builder/src/features/blocks/inputs/rating/rating.spec.ts

@@ -33,9 +33,9 @@ test('options should work', async ({ page }) => {
 
   await page.click('text=Preview')
   await expect(page.locator(`text=Send`)).toBeHidden()
-  await page.locator(`text=8`).click()
+  await page.getByRole('button', { name: '8' }).click()
   await page.locator(`text=Send`).click()
-  await expect(page.locator(`text=8`)).toBeVisible()
+  await expect(page.getByTestId('guest-bubble')).toHaveText('8')
   await page.click('text=Rate from 0 to 10')
   await page.click('text="10"')
   await page.click('text="5"')
@@ -47,10 +47,8 @@ test('options should work', async ({ page }) => {
   await page.fill('[placeholder="Not likely at all"]', 'Not likely at all')
   await page.fill('[placeholder="Extremely likely"]', 'Extremely likely')
   await page.click('text="Restart"')
-  await expect(page.locator(`text=8`)).toBeHidden()
-  await expect(page.locator(`text=4`)).toBeHidden()
   await expect(page.locator(`text=Not likely at all`)).toBeVisible()
   await expect(page.locator(`text=Extremely likely`)).toBeVisible()
-  await page.locator(`svg >> nth=4`).click()
-  await expect(page.locator(`text=5`)).toBeVisible()
+  await page.locator('typebot-standard').locator(`svg >> nth=4`).click()
+  await expect(page.locator('typebot-standard').locator(`text=5`)).toBeVisible()
 })

apps/builder/src/features/blocks/inputs/textInput/components/TextInputNodeContent.tsx

@@ -1,14 +1,29 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { TextInputOptions } from 'models'
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 
 type Props = {
   placeholder: TextInputOptions['labels']['placeholder']
   isLong: TextInputOptions['isLong']
+  variableId?: string
 }
 
-export const TextInputNodeContent = ({ placeholder, isLong }: Props) => (
-  <Text color={'gray.500'} h={isLong ? '100px' : 'auto'}>
-    {placeholder}
-  </Text>
-)
+export const TextInputNodeContent = ({
+  placeholder,
+  isLong,
+  variableId,
+}: Props) => {
+  if (variableId)
+    return (
+      <WithVariableContent
+        variableId={variableId}
+        h={isLong ? '100px' : 'auto'}
+      />
+    )
+  return (
+    <Text color={'gray.500'} h={isLong ? '100px' : 'auto'}>
+      {placeholder}
+    </Text>
+  )
+}

apps/builder/src/features/blocks/inputs/url/components/UrlNodeContent.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { UrlInputOptions } from 'models'
+import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
 
 type Props = {
+  variableId?: string
   placeholder: UrlInputOptions['labels']['placeholder']
 }
 
-export const UrlNodeContent = ({ placeholder }: Props) => (
-  <Text color={'gray.500'}>{placeholder}</Text>
-)
+export const UrlNodeContent = ({ placeholder, variableId }: Props) =>
+  variableId ? (
+    <WithVariableContent variableId={variableId} />
+  ) : (
+    <Text color={'gray.500'}>{placeholder}</Text>
+  )