✨ Add Mistral AI block

Closes #1179

packages/forge/blocks/mistral/actions/createChatCompletion.ts

@@ -0,0 +1,125 @@
+import { option, createAction } from '@typebot.io/forge'
+import { isDefined } from '@typebot.io/lib'
+import { auth } from '../auth'
+import MistralClient from '@mistralai/mistralai'
+import { parseMessages } from '../helpers/parseMessages'
+import { OpenAIStream } from 'ai'
+
+const nativeMessageContentSchema = {
+  content: option.string.layout({
+    inputType: 'textarea',
+    placeholder: 'Content',
+  }),
+}
+
+const systemMessageItemSchema = option
+  .object({
+    role: option.literal('system'),
+  })
+  .extend(nativeMessageContentSchema)
+
+const userMessageItemSchema = option
+  .object({
+    role: option.literal('user'),
+  })
+  .extend(nativeMessageContentSchema)
+
+const assistantMessageItemSchema = option
+  .object({
+    role: option.literal('assistant'),
+  })
+  .extend(nativeMessageContentSchema)
+
+const dialogueMessageItemSchema = option.object({
+  role: option.literal('Dialogue'),
+  dialogueVariableId: option.string.layout({
+    inputType: 'variableDropdown',
+    placeholder: 'Dialogue variable',
+  }),
+  startsBy: option.enum(['user', 'assistant']).layout({
+    label: 'starts by',
+    direction: 'row',
+    defaultValue: 'user',
+  }),
+})
+
+export const options = option.object({
+  model: option.string.layout({
+    placeholder: 'Select a model',
+    fetcher: 'fetchModels',
+  }),
+  messages: option
+    .array(
+      option.discriminatedUnion('role', [
+        systemMessageItemSchema,
+        userMessageItemSchema,
+        assistantMessageItemSchema,
+        dialogueMessageItemSchema,
+      ])
+    )
+    .layout({ accordion: 'Messages', itemLabel: 'message', isOrdered: true }),
+  responseMapping: option.saveResponseArray(['Message content']).layout({
+    accordion: 'Save response',
+  }),
+})
+
+export const createChatCompletion = createAction({
+  name: 'Create chat completion',
+  auth,
+  options,
+  getSetVariableIds: (options) =>
+    options.responseMapping?.map((res) => res.variableId).filter(isDefined) ??
+    [],
+  fetchers: [
+    {
+      id: 'fetchModels',
+      dependencies: [],
+      fetch: async ({ credentials }) => {
+        const client = new MistralClient(credentials.apiKey)
+
+        const listModelsResponse = await client.listModels()
+
+        return (
+          listModelsResponse.data
+            .sort((a, b) => b.created - a.created)
+            .map((model) => model.id) ?? []
+        )
+      },
+    },
+  ],
+  run: {
+    server: async ({ credentials: { apiKey }, options, variables, logs }) => {
+      if (!options.model) return logs.add('No model selected')
+      const client = new MistralClient(apiKey)
+
+      const response = await client.chat({
+        model: options.model,
+        messages: parseMessages({ options, variables }),
+      })
+
+      options.responseMapping?.forEach((mapping) => {
+        if (!mapping.variableId) return
+        if (!mapping.item || mapping.item === 'Message content')
+          variables.set(mapping.variableId, response.choices[0].message.content)
+      })
+    },
+    stream: {
+      getStreamVariableId: (options) =>
+        options.responseMapping?.find(
+          (res) => res.item === 'Message content' || !res.item
+        )?.variableId,
+      run: async ({ credentials: { apiKey }, options, variables }) => {
+        if (!options.model) return
+        const client = new MistralClient(apiKey)
+
+        const response = client.chatStream({
+          model: options.model,
+          messages: parseMessages({ options, variables }),
+        })
+
+        // @ts-ignore https://github.com/vercel/ai/issues/936
+        return OpenAIStream(response)
+      },
+    },
+  },
+})

packages/forge/blocks/mistral/auth.ts

@@ -0,0 +1,15 @@
+import { option, AuthDefinition } from '@typebot.io/forge'
+
+export const auth = {
+  type: 'encryptedCredentials',
+  name: 'Mistral account',
+  schema: option.object({
+    apiKey: option.string.layout({
+      label: 'API key',
+      isRequired: true,
+      inputType: 'password',
+      helperText:
+        'You can generate an API key [here](https://console.mistral.ai/user/api-keys/).',
+    }),
+  }),
+} satisfies AuthDefinition

packages/forge/blocks/mistral/helpers/parseMessages.ts

@@ -0,0 +1,50 @@
+import { options as createChatCompletionOption } from '../actions/createChatCompletion'
+import { ReadOnlyVariableStore } from '@typebot.io/forge'
+import { isDefined, isNotEmpty } from '@typebot.io/lib'
+import { z } from '@typebot.io/forge/zod'
+
+export const parseMessages = ({
+  options: { messages },
+  variables,
+}: {
+  options: Pick<z.infer<typeof createChatCompletionOption>, 'messages'>
+  variables: ReadOnlyVariableStore
+}) =>
+  messages
+    ?.flatMap((message) => {
+      if (!message.role) return
+
+      if (message.role === 'Dialogue') {
+        if (!message.dialogueVariableId) return
+        const dialogue = variables.get(message.dialogueVariableId) ?? []
+        const dialogueArr = Array.isArray(dialogue) ? dialogue : [dialogue]
+
+        return dialogueArr.map((dialogueItem, index) => {
+          if (dialogueItem === null) return
+          if (index === 0 && message.startsBy === 'assistant')
+            return {
+              role: 'assistant',
+              content: dialogueItem,
+            }
+          return {
+            role:
+              index % (message.startsBy === 'assistant' ? 1 : 2) === 0
+                ? 'user'
+                : 'assistant',
+            content: dialogueItem,
+          }
+        })
+      }
+
+      if (!message.content) return
+
+      return {
+        role: message.role,
+        content: variables.parse(message.content),
+      }
+    })
+    .filter(isDefined)
+    .filter(
+      (message) =>
+        isNotEmpty(message?.role) && isNotEmpty(message?.content?.toString())
+    ) ?? []

packages/forge/blocks/mistral/index.ts

@@ -0,0 +1,14 @@
+import { createBlock } from '@typebot.io/forge'
+import { MistralLogo } from './logo'
+import { auth } from './auth'
+import { createChatCompletion } from './actions/createChatCompletion'
+
+export const mistral = createBlock({
+  id: 'mistral',
+  name: 'Mistral',
+  tags: ['ai', 'chat', 'completion'],
+  LightLogo: MistralLogo,
+  auth,
+  actions: [createChatCompletion],
+  docsUrl: 'https://docs.typebot.io/forge/blocks/mistral',
+})

packages/forge/blocks/mistral/logo.tsx

@@ -0,0 +1,191 @@
+import React from 'react'
+
+export const MistralLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 256 233" {...props}>
+    <title>Mistral AI</title>
+    <g>
+      <rect
+        fill="#000000"
+        x="186.181818"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F7D046"
+        x="209.454545"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F7D046"
+        x="23.2727273"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="209.454545"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="23.2727273"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="139.636364"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="162.909091"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="69.8181818"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="116.363636"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="162.909091"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="69.8181818"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="93.0909091"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EB5829"
+        x="116.363636"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="209.454545"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="23.2727273"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="186.181818"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EB5829"
+        x="209.454545"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="186.181818"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EB5829"
+        x="23.2727273"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EA3326"
+        x="209.454545"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EA3326"
+        x="23.2727273"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+    </g>
+  </svg>
+)

packages/forge/blocks/mistral/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@typebot.io/mistral-block",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "keywords": [],
+  "license": "ISC",
+  "devDependencies": {
+    "@typebot.io/forge": "workspace:*",
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
+    "@types/react": "18.2.15",
+    "typescript": "5.3.2"
+  },
+  "dependencies": {
+    "@mistralai/mistralai": "^0.0.10",
+    "ai": "2.2.31"
+  }
+}

packages/forge/blocks/mistral/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@typebot.io/tsconfig/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "noEmit": true,
+    "jsx": "react"
+  }
+}

packages/forge/cli/index.ts

@@ -275,7 +275,7 @@ const createAuthFile = async (
                     apiKey: option.string.layout({
                       label: 'API key',
                       isRequired: true,
-                      input: 'password',
+                      inputType: 'password',
                       helperText:
                         'You can generate an API key [here](<INSERT_URL>).',
                     }),

packages/forge/repository/index.ts

@@ -5,4 +5,5 @@ export const enabledBlocks = [
   'cal-com',
   'chat-node',
   'qr-code',
+  'mistral',
 ] as const

packages/forge/schemas/index.ts

@@ -1,4 +1,5 @@
 // Do not edit this file manually
+import { mistral } from '@typebot.io/mistral-block'
 import { qrCode } from '@typebot.io/qrcode-block'
 import { chatNode } from '@typebot.io/chat-node-block'
 import { calCom } from '@typebot.io/cal-com-block'
@@ -18,6 +19,7 @@ export const forgedBlocks = [
   calCom,
   chatNode,
   qrCode,
+  mistral,
 ] as BlockDefinition<(typeof enabledBlocks)[number], any, any>[]
 
 export type ForgedBlockDefinition = (typeof forgedBlocks)[number]

packages/forge/schemas/package.json

@@ -13,6 +13,7 @@
     "@typebot.io/zemantic-ai-block": "workspace:*",
     "@typebot.io/cal-com-block": "workspace:*",
     "@typebot.io/chat-node-block": "workspace:*",
-    "@typebot.io/qrcode-block": "workspace:*"
+    "@typebot.io/qrcode-block": "workspace:*",
+    "@typebot.io/mistral-block": "workspace:*"
   }
 }