✨ Add Dify.AI block (#1183)

Implemented [Dify.AI](https://dify.ai) Block
- Dify Features:
-- Can Create Multiple Chat Bots
-- Assign Knowledge base/vector database to chat bots
-- Variables send by client to be used in the prompt
-- Options of custom and cloud AI LLMs to be changed with on click

- Dify API Function/Action Implemented
-- Create Chat Message (Takes in input variables, query, conversation
id, user id and returns answer, usage metadata and conversation id)

- Future Implantations with this block
-- Streaming response 
-- File Upload for GPT Vision
-- Speech to text action

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

- **New Features**
- Introduced the ability to create chat messages within the Dify
platform.
	- Added secure authentication for Dify.AI accounts.
- Implemented a new Dify.AI block with integrated chat message creation
and logo display.
	- Enabled Dify.AI block in the repository for user access.

- **Enhancements**
- Enhanced security for API key input by changing it to a password
field.

- **Documentation**
	- Included new types to support Dify AI service responses.

- **Refactor**
- Updated schema imports and array listings to include the new Dify.AI
block.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>

apps/docs/openapi/builder.json

@@ -26853,6 +26853,7 @@
                   "cal-com",
                   "chat-node",
                   "qr-code",
+                  "dify-ai",
                   "mistral"
                 ]
               },

apps/docs/openapi/viewer.json

@@ -10354,6 +10354,7 @@
                   "cal-com",
                   "chat-node",
                   "qr-code",
+                  "dify-ai",
                   "mistral"
                 ]
               },

packages/forge/blocks/difyAi/actions/createChatMessage.ts

@@ -0,0 +1,80 @@
+import { createAction, option } from '@typebot.io/forge'
+import { isDefined, isEmpty } from '@typebot.io/lib'
+import { got } from 'got'
+import { auth } from '../auth'
+import { DifyResponse } from '../types'
+import { defaultBaseUrl } from '../constants'
+
+export const createChatMessage = createAction({
+  auth,
+  name: 'Create Chat Message',
+  options: option.object({
+    query: option.string.layout({
+      label: 'Query',
+      placeholder: 'User input/question content',
+      inputType: 'textarea',
+      isRequired: true,
+    }),
+    conversation_id: option.string.layout({
+      label: 'Conversation ID',
+      moreInfoTooltip:
+        'Used to remember the conversation with the user. If empty, a new conversation id is created.',
+    }),
+    user: option.string.layout({
+      label: 'User',
+      moreInfoTooltip:
+        'The user identifier, defined by the developer, must ensure uniqueness within the app.',
+    }),
+    inputs: option.keyValueList.layout({
+      accordion: 'Inputs',
+    }),
+    responseMapping: option
+      .saveResponseArray(['Answer', 'Conversation ID', 'Total Tokens'])
+      .layout({
+        accordion: 'Save response',
+      }),
+  }),
+  getSetVariableIds: ({ responseMapping }) =>
+    responseMapping?.map((r) => r.variableId).filter(isDefined) ?? [],
+  run: {
+    server: async ({
+      credentials: { apiEndpoint, apiKey },
+      options: { conversation_id, query, user, inputs, responseMapping },
+      variables,
+    }) => {
+      const res: DifyResponse = await got
+        .post((apiEndpoint ?? defaultBaseUrl) + '/v1/chat-messages', {
+          headers: {
+            Authorization: `Bearer ${apiKey}`,
+          },
+          json: {
+            inputs: inputs?.reduce((acc, { key, value }) => {
+              if (isEmpty(key) || isEmpty(value)) return acc
+              return {
+                ...acc,
+                [key]: value,
+              }
+            }, {}),
+            query,
+            response_mode: 'blocking',
+            conversation_id,
+            user,
+          },
+        })
+        .json()
+
+      responseMapping?.forEach((mapping) => {
+        if (!mapping.variableId) return
+
+        const item = mapping.item ?? 'Answer'
+        if (item === 'Answer') variables.set(mapping.variableId, res.answer)
+
+        if (item === 'Conversation ID')
+          variables.set(mapping.variableId, res.conversation_id)
+
+        if (item === 'Total Tokens')
+          variables.set(mapping.variableId, res.metadata.usage.total_tokens)
+      })
+    },
+  },
+})

packages/forge/blocks/difyAi/auth.ts

@@ -0,0 +1,23 @@
+import { option, AuthDefinition } from '@typebot.io/forge'
+import { defaultBaseUrl } from './constants'
+
+export const auth = {
+  type: 'encryptedCredentials',
+  name: 'Dify.AI account',
+  schema: option.object({
+    apiEndpoint: option.string.layout({
+      label: 'API Endpoint',
+      isRequired: true,
+      helperText: 'URI where the Service API is hosted.',
+      withVariableButton: false,
+      defaultValue: defaultBaseUrl,
+    }),
+    apiKey: option.string.layout({
+      label: 'App API key',
+      isRequired: true,
+      helperText: 'API Secret Key for your Dify App.',
+      inputType: 'password',
+      withVariableButton: false,
+    }),
+  }),
+} satisfies AuthDefinition

packages/forge/blocks/difyAi/constants.ts

@@ -0,0 +1 @@
+export const defaultBaseUrl = 'https://api.dify.ai'

packages/forge/blocks/difyAi/index.ts

@@ -0,0 +1,13 @@
+import { createBlock } from '@typebot.io/forge'
+import { DifyAiLogo } from './logo'
+import { auth } from './auth'
+import { createChatMessage } from './actions/createChatMessage'
+
+export const difyAi = createBlock({
+  id: 'dify-ai',
+  name: 'Dify.AI',
+  tags: ['dify', 'ai', 'documents', 'files', 'knowledge base'],
+  LightLogo: DifyAiLogo,
+  auth,
+  actions: [createChatMessage],
+})

packages/forge/blocks/difyAi/logo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const DifyAiLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <image
+      href="https://framerusercontent.com/images/xRJ6vNo9mUYeVNxt0KITXCXEuSk.png"
+      height="25"
+      width="25"
+    />
+  </svg>
+)

packages/forge/blocks/difyAi/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@typebot.io/dify-ai-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",
+    "got": "12.6.0",
+    "typescript": "5.3.2"
+  }
+}

packages/forge/blocks/difyAi/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/difyAi/types.ts

@@ -0,0 +1,9 @@
+export type DifyResponse = {
+  answer: string
+  metadata: {
+    usage: {
+      total_tokens: number
+    }
+  }
+  conversation_id: string
+}

packages/forge/core/index.ts

@@ -101,6 +101,18 @@ export const option = {
     z.enum(values).optional(),
   number: z.number().or(variableStringSchema).optional(),
   array: <T extends z.ZodTypeAny>(schema: T) => z.array(schema).optional(),
+  keyValueList: z
+    .array(
+      z.object({
+        key: z.string().optional().layout({
+          label: 'Key',
+        }),
+        value: z.string().optional().layout({
+          label: 'Value',
+        }),
+      })
+    )
+    .optional(),
   discriminatedUnion: <
     T extends string,
     J extends [

packages/forge/repository/index.ts

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

packages/forge/schemas/index.ts

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

packages/forge/schemas/package.json

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

pnpm-lock.yaml

@@ -1212,6 +1212,27 @@ importers:
         specifier: 5.3.2
         version: 5.3.2
 
+  packages/forge/blocks/difyAi:
+    devDependencies:
+      '@typebot.io/forge':
+        specifier: workspace:*
+        version: link:../../core
+      '@typebot.io/lib':
+        specifier: workspace:*
+        version: link:../../../lib
+      '@typebot.io/tsconfig':
+        specifier: workspace:*
+        version: link:../../../tsconfig
+      '@types/react':
+        specifier: 18.2.15
+        version: 18.2.15
+      got:
+        specifier: 12.6.0
+        version: 12.6.0
+      typescript:
+        specifier: 5.3.2
+        version: 5.3.2
+
   packages/forge/blocks/mistral:
     dependencies:
       '@mistralai/mistralai':
@@ -1352,6 +1373,9 @@ importers:
       '@typebot.io/chat-node-block':
         specifier: workspace:*
         version: link:../blocks/chatNode
+      '@typebot.io/dify-ai-block':
+        specifier: workspace:*
+        version: link:../blocks/difyAi
       '@typebot.io/forge':
         specifier: workspace:*
         version: link:../core