⚡ (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/integrations/openai/components/createChatCompletion/ChatCompletionMessageItem.tsx

@@ -1,36 +1,88 @@
 import { DropdownList } from '@/components/DropdownList'
 import { TextInput } from '@/components/inputs'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { TableListItemProps } from '@/components/TableList'
 import { Stack } from '@chakra-ui/react'
+import { Variable } from 'models'
 import {
+  chatCompletionMessageCustomRoles,
   chatCompletionMessageRoles,
   ChatCompletionOpenAIOptions,
 } from 'models/features/blocks/integrations/openai'
 
 type Props = TableListItemProps<ChatCompletionOpenAIOptions['messages'][number]>
 
+const roles = [
+  ...chatCompletionMessageCustomRoles,
+  ...chatCompletionMessageRoles,
+]
+
 export const ChatCompletionMessageItem = ({ item, onItemChange }: Props) => {
-  const changeRole = (role: (typeof chatCompletionMessageRoles)[number]) => {
-    onItemChange({ ...item, role })
+  const changeRole = (role: (typeof roles)[number]) => {
+    onItemChange({
+      ...item,
+      role,
+      content: undefined,
+    })
   }
 
-  const changeContent = (content: string) => {
+  const changeSingleMessageContent = (content: string) => {
+    if (item.role === 'Messages sequence ✨') return
     onItemChange({ ...item, content })
   }
 
+  const changeAssistantVariableId = (
+    variable: Pick<Variable, 'id'> | undefined
+  ) => {
+    if (item.role !== 'Messages sequence ✨') return
+    onItemChange({
+      ...item,
+      content: {
+        ...item.content,
+        assistantMessagesVariableId: variable?.id,
+      },
+    })
+  }
+
+  const changeUserVariableId = (variable: Pick<Variable, 'id'> | undefined) => {
+    if (item.role !== 'Messages sequence ✨') return
+    onItemChange({
+      ...item,
+      content: {
+        ...item.content,
+        userMessagesVariableId: variable?.id,
+      },
+    })
+  }
+
   return (
     <Stack p="4" rounded="md" flex="1" borderWidth="1px">
       <DropdownList
         currentItem={item.role}
-        items={chatCompletionMessageRoles}
+        items={roles}
         onItemSelect={changeRole}
-        placeholder="Select role"
-      />
-      <TextInput
-        defaultValue={item.content}
-        onChange={changeContent}
-        placeholder="Content"
+        placeholder="Select type"
       />
+      {item.role === 'Messages sequence ✨' ? (
+        <>
+          <VariableSearchInput
+            initialVariableId={item.content?.assistantMessagesVariableId}
+            onSelectVariable={changeAssistantVariableId}
+            placeholder="Assistant messages variable"
+          />
+          <VariableSearchInput
+            initialVariableId={item.content?.userMessagesVariableId}
+            onSelectVariable={changeUserVariableId}
+            placeholder="User messages variable"
+          />
+        </>
+      ) : (
+        <TextInput
+          defaultValue={item.content}
+          onChange={changeSingleMessageContent}
+          placeholder="Content"
+        />
+      )}
     </Stack>
   )
 }

apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/OpenAIChatCompletionSettings.tsx

@@ -61,11 +61,6 @@ export const OpenAIChatCompletionSettings = ({
         </TextLink>{' '}
         to better understand the available options.
       </Text>
-      <DropdownList
-        currentItem={options.model}
-        items={chatCompletionModels}
-        onItemSelect={updateModel}
-      />
       <Accordion allowToggle allowMultiple>
         <AccordionItem>
           <AccordionButton>
@@ -85,6 +80,21 @@ export const OpenAIChatCompletionSettings = ({
             />
           </AccordionPanel>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionButton>
+            <Text w="full" textAlign="left">
+              Advanced settings
+            </Text>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel>
+            <DropdownList
+              currentItem={options.model}
+              items={chatCompletionModels}
+              onItemSelect={updateModel}
+            />
+          </AccordionPanel>
+        </AccordionItem>
         <AccordionItem>
           <AccordionButton>
             <Text w="full" textAlign="left">

apps/builder/src/features/blocks/integrations/openai/openai.spec.ts

@@ -27,11 +27,11 @@ test('should be configurable', async ({ page }) => {
   await page.getByRole('button', { name: 'Select task' }).click()
   await page.getByRole('menuitem', { name: 'Create chat completion' }).click()
   await page.getByRole('button', { name: 'Messages' }).click()
-  await page.getByRole('button', { name: 'Select role' }).click()
+  await page.getByRole('button', { name: 'Select type' }).click()
   await page.getByRole('menuitem', { name: 'system' }).click()
   await page.getByPlaceholder('Content').first().fill('You are a helpful bot')
   await page.getByRole('button', { name: 'Add message' }).nth(1).click()
-  await page.getByRole('button', { name: 'Select role' }).click()
+  await page.getByRole('button', { name: 'Select type' }).click()
   await page.getByRole('menuitem', { name: 'assistant' }).click()
   await page.getByPlaceholder('Content').nth(1).fill('Hi there!')
   await page.getByRole('button', { name: 'Save answer' }).click()