✨ Add ElevenLabs block (#1226)

Closes #853

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced the ElevenLabs block for Typebot, enabling text to speech
conversion using ElevenLabs API.
- Added live tutorial videos for creating ElevenLabs and Telegram
blocks.
- Added a `docsUrl` for the OpenAI block to improve accessibility to
documentation.

- **Documentation**
- New guides and integration details for ElevenLabs and Telegram blocks.

- **Style**
	- Added ElevenLabs logos for light and dark themes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/forge/blocks/elevenlabs/actions/convertTextToSpeech.ts

@@ -0,0 +1,112 @@
+import { createAction, option } from '@typebot.io/forge'
+import { auth } from '../auth'
+import { baseUrl } from '../constants'
+import { ModelsResponse, VoicesResponse } from '../type'
+import got, { HTTPError } from 'got'
+import { uploadFileToBucket } from '@typebot.io/lib/s3/uploadFileToBucket'
+import { createId } from '@typebot.io/lib/createId'
+
+export const convertTextToSpeech = createAction({
+  name: 'Convert text to speech',
+  auth,
+  options: option.object({
+    text: option.string.layout({
+      label: 'Text',
+      inputType: 'textarea',
+      placeholder: 'Enter the text to convert to speech',
+    }),
+    voiceId: option.string.layout({
+      fetcher: 'fetchVoices',
+      label: 'Voice ID',
+      placeholder: 'Select a voice',
+    }),
+    modelId: option.string.layout({
+      fetcher: 'fetchModels',
+      label: 'Model ID',
+      placeholder: 'Select a model',
+      defaultValue: 'eleven_monolingual_v1',
+    }),
+    saveUrlInVariableId: option.string.layout({
+      label: 'Save audio URL in variable',
+      placeholder: 'Select a variable',
+      inputType: 'variableDropdown',
+    }),
+  }),
+  fetchers: [
+    {
+      id: 'fetchVoices',
+      fetch: async ({ credentials }) => {
+        const response = await got
+          .get(baseUrl + '/v1/voices', {
+            headers: {
+              'xi-api-key': credentials.apiKey,
+            },
+          })
+          .json<VoicesResponse>()
+
+        return response.voices.map((voice) => ({
+          value: voice.voice_id,
+          label: voice.name,
+        }))
+      },
+      dependencies: [],
+    },
+    {
+      id: 'fetchModels',
+      fetch: async ({ credentials }) => {
+        const response = await got
+          .get(baseUrl + '/v1/models', {
+            headers: {
+              'xi-api-key': credentials.apiKey,
+            },
+          })
+          .json<ModelsResponse>()
+
+        return response.map((model) => ({
+          value: model.model_id,
+          label: model.name,
+        }))
+      },
+      dependencies: [],
+    },
+  ],
+  run: {
+    server: async ({ credentials, options, variables, logs }) => {
+      if (!options.voiceId) return logs.add('Voice ID is missing')
+      if (!options.text) return logs.add('Text is missing')
+      if (!options.saveUrlInVariableId)
+        return logs.add('Save variable is missing')
+
+      try {
+        const response = await got
+          .post(baseUrl + '/v1/text-to-speech/' + options.voiceId, {
+            headers: {
+              Accept: 'audio/mpeg',
+              'xi-api-key': credentials.apiKey,
+            },
+            json: {
+              model_id: options.modelId,
+              text: options.text,
+            },
+          })
+          .buffer()
+
+        const url = await uploadFileToBucket({
+          file: response,
+          key: `tmp/elevenlabs/audio/${createId() + createId()}.mp3`,
+          mimeType: 'audio/mpeg',
+        })
+
+        variables.set(options.saveUrlInVariableId, url)
+      } catch (err) {
+        if (err instanceof HTTPError) {
+          return logs.add({
+            status: 'error',
+            description: err.message,
+            details: err.response.body,
+          })
+        }
+      }
+    },
+  },
+})

packages/forge/blocks/elevenlabs/auth.ts

@@ -0,0 +1,15 @@
+import { option, AuthDefinition } from '@typebot.io/forge'
+
+export const auth = {
+  type: 'encryptedCredentials',
+  name: 'ElevenLabs account',
+  schema: option.object({
+    apiKey: option.string.layout({
+      label: 'API key',
+      isRequired: true,
+      inputType: 'password',
+      helperText:
+        'You can generate an API key in your ElevenLabs dashboard in the Profile menu.',
+    }),
+  }),
+} satisfies AuthDefinition

packages/forge/blocks/elevenlabs/constants.ts

@@ -0,0 +1 @@
+export const baseUrl = 'https://api.elevenlabs.io'

packages/forge/blocks/elevenlabs/index.ts

@@ -0,0 +1,15 @@
+import { createBlock } from '@typebot.io/forge'
+import { ElevenlabsLogo, ElevenlabsLogoDark } from './logo'
+import { auth } from './auth'
+import { convertTextToSpeech } from './actions/convertTextToSpeech'
+
+export const elevenlabs = createBlock({
+  id: 'elevenlabs',
+  name: 'ElevenLabs',
+  tags: ['ai', 'voice', 'generation'],
+  LightLogo: ElevenlabsLogo,
+  DarkLogo: ElevenlabsLogoDark,
+  auth,
+  actions: [convertTextToSpeech],
+  docsUrl: 'https://docs.typebot.io/forge/blocks/elevenlabs',
+})

packages/forge/blocks/elevenlabs/logo.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const ElevenlabsLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 100 100" {...props}>
+    <path d="M57.8521 7H73.9999V92.2719H57.8521V7Z" fill="#1D1E1C" />
+    <path d="M42.1059 92.2715H26V7.021H42.1059V92.2715Z" fill="#1D1E1C" />
+  </svg>
+)
+
+export const ElevenlabsLogoDark = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 100 100" {...props}>
+    <rect width="100" height="100" rx="8" fill="white" />
+    <path d="M57.8521 7H73.9999V92.2719H57.8521V7Z" fill="#1D1E1C" />
+    <path d="M42.1059 92.2715H26V7.021H42.1059V92.2715Z" fill="#1D1E1C" />
+  </svg>
+)

packages/forge/blocks/elevenlabs/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@typebot.io/elevenlabs-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": {
+    "got": "12.6.0",
+    "@typebot.io/lib": "workspace:*"
+  }
+}

packages/forge/blocks/elevenlabs/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/blocks/elevenlabs/type.ts

@@ -0,0 +1,11 @@
+export type VoicesResponse = {
+  voices: {
+    name: string
+    voice_id: string
+  }[]
+}
+
+export type ModelsResponse = {
+  model_id: string
+  name: string
+}[]