messenger integration

package.json

@@ -34,6 +34,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@googleapis/calendar": "^9.5.0",
+    "axios": "^1.6.5",
     "googleapis": "^129.0.0"
   }
 }

packages/forge/blocks/messenger/actions/sendMessage.tsx

@@ -0,0 +1,56 @@
+import { option, createAction } from '@typebot.io/forge';
+import axios from 'axios';
+import { auth } from '../auth'; // Adjust the path as necessary
+import { messengerBaseOptions } from '../baseOptions'; // Adjust the path as necessary
+
+// Define the messengerMessageOptions
+const messengerMessageOptions = option.object({
+  receiverId: option.string.layout({
+    label: 'Receiver ID',
+    placeholder: 'Enter the receiver\'s Facebook User ID',
+    isRequired: true,
+    helperText: 'The Facebook User ID of the message recipient.',
+  }),
+  messageContent: option.string.layout({
+    input: 'textarea',
+    label: 'Message Content',
+    placeholder: 'Type your message here...',
+    isRequired: true,
+    helperText: 'The content of the message to be sent.',
+  }),
+  // You can add more fields as necessary
+});
+
+// Define the sendMessageToMessenger action
+export const sendMessageToMessenger = createAction({
+  name: 'Send Message to Messenger',
+  auth: auth,
+  baseOptions: messengerBaseOptions,
+  options: messengerMessageOptions, // Use the messengerMessageOptions here
+  run: {
+    server: async ({ credentials, options }) => {
+      const pageAccessToken = credentials.pageAccessToken;
+      const recipientId = options.receiverId;
+      const messageContent = options.messageContent;
+
+      // Construct the request payload
+      const payload = {
+        messaging_type: 'RESPONSE',
+        recipient: {
+          id: recipientId,
+        },
+        message: {
+          text: messageContent,
+        },
+      };
+
+      try {
+        const response = await axios.post(`https://graph.facebook.com/v14.0/me/messages?access_token=${pageAccessToken}`, payload);
+        console.log(response.data);
+      } catch (error) {
+        console.error('Error sending message to Messenger:', error);
+      }
+    },
+  },
+  // ... other configurations as needed
+});

packages/forge/blocks/messenger/auth.ts

@@ -0,0 +1,20 @@
+import { createAuth, option } from '@typebot.io/forge';
+
+export const auth = createAuth({
+  type: 'encryptedCredentials',
+  name: 'Messenger Account',
+  schema: option.object({
+    pageAccessToken: option.string.layout({
+      label: 'Page Access Token',
+      isRequired: true,
+      input: 'password', // Use 'password' to hide the token in the UI
+      helperText: 'Enter the Page Access Token from the Facebook Developer Portal.',
+    }),
+    // Optionally, you can add Page ID if your implementation requires it
+    pageId: option.string.layout({
+      label: 'Facebook Page ID',
+      isRequired: false, // Set to true if Page ID is necessary for your implementation
+      helperText: 'Enter the Facebook Page ID (if required by your implementation).',
+    }),
+  }),
+});

packages/forge/blocks/messenger/baseOptions.ts

@@ -0,0 +1,24 @@
+import { option } from '@typebot.io/forge';
+import { messengerConstants } from './constants'; // Assuming you have a constants file for Messenger
+
+export const messengerBaseOptions = option.object({
+  baseUrl: option.string.layout({
+    accordion: 'Customize Messenger Settings',
+    label: 'Messenger Base URL',
+    defaultValue: messengerConstants.baseUrl,
+    helperText: 'URL for Messenger API requests.'
+  }),
+  apiVersion: option.string.layout({
+    accordion: 'Customize Messenger Settings',
+    label: 'Messenger API version',
+    helperText: 'Version of the Messenger API to use.',
+    defaultValue: 'v14.0', // Set the default API version you are targeting
+  }),
+  pageAccessToken: option.string.layout({
+    accordion: 'Authentication',
+    label: 'Page Access Token',
+    input: 'password', // Use 'password' to hide the token in UI
+    helperText: 'Access token for the Facebook Page.',
+  }),
+  // Include other options as needed for your Messenger integration
+});

packages/forge/blocks/messenger/constants.ts

@@ -0,0 +1,14 @@
+export const messengerConstants = {
+  baseUrl: 'https://graph.facebook.com/v14.0', // Use the appropriate version
+  defaultPageAccessToken: '', // Default token, if applicable
+  defaultMessageOptions: {
+    messaging_type: 'RESPONSE', // Default messaging type
+  },
+} as const;
+
+export const defaultMessengerModelOptions = {
+  model: 'your-messenger-model', // If you have a specific model or version you're working with
+  // Other default options specific to your implementation
+} as const;
+
+// Include other constants as needed for your application

packages/forge/blocks/messenger/index.ts

@@ -0,0 +1,15 @@
+import { createBlock } from '@typebot.io/forge'
+import { MessengerLogo } from './logo'
+import { auth } from './auth'
+import { messengerBaseOptions } from './baseOptions'
+import { sendMessageToMessenger } from './actions/sendMessage'
+
+export const messenger = createBlock({
+  id: 'messenger',
+  name: 'Messenger',
+  tags: [],
+  LightLogo: MessengerLogo,
+  auth,
+  options: messengerBaseOptions,
+  actions: [sendMessageToMessenger],
+})

packages/forge/blocks/messenger/logo.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+export const MessengerLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    fill="none"
+    viewBox="0 0 48 48"
+    id="messenger"
+  >
+    <path
+      fill="url(#paint0_radial_147648_891)"
+      d="M23.9979 0C10.4811 0 0 9.90512 0 23.2779C0 30.2733 2.86775 36.3208 7.53533 40.4964C7.9253 40.8444 8.16528 41.3363 8.17728 41.8643L8.30926 46.1359C8.35126 47.4978 9.75514 48.3857 11.003 47.8338L15.7666 45.7339C16.1686 45.554 16.6245 45.524 17.0505 45.638C19.2403 46.2379 21.5681 46.5619 23.9979 46.5619C37.5147 46.5619 47.9957 36.6568 47.9957 23.2839C47.9957 9.91112 37.5147 0 23.9979 0Z"
+    ></path>
+    <path
+      fill="#fff"
+      d="M9.58715 30.0873L16.6365 18.9043C17.7584 17.1225 20.1582 16.6845 21.8441 17.9444L27.4536 22.15C27.9695 22.534 28.6775 22.534 29.1874 22.144L36.7587 16.3965C37.7667 15.6286 39.0865 16.8405 38.4146 17.9144L31.3592 29.0914C30.2373 30.8732 27.8375 31.3112 26.1517 30.0513L20.5422 25.8457C20.0262 25.4617 19.3183 25.4617 18.8083 25.8517L11.237 31.5992C10.2291 32.3671 8.90921 31.1612 9.58715 30.0873Z"
+    ></path>
+    <defs>
+      <radialGradient
+        id="paint0_radial_147648_891"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientTransform="matrix(52.2962 0 0 52.2961 9.24 47.734)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#09F"></stop>
+        <stop offset=".61" stop-color="#A033FF"></stop>
+        <stop offset=".935" stop-color="#FF5280"></stop>
+        <stop offset="1" stop-color="#FF7061"></stop>
+      </radialGradient>
+    </defs>
+  </svg>
+)

packages/forge/blocks/messenger/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@typebot.io/messenger-block",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "keywords": [],
+  "license": "ISC",
+  "devDependencies": {
+    "@typebot.io/forge": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
+    "@types/react": "18.2.15",
+    "typescript": "5.3.2",
+    "@typebot.io/lib": "workspace:*"
+  }
+}

packages/forge/blocks/messenger/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/repository/index.ts

@@ -4,4 +4,5 @@ export const enabledBlocks = [
   'zemantic-ai',
   'cal-com',
   'chat-node',
+  'messenger',
 ] as const

packages/forge/schemas/index.ts

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

packages/forge/schemas/package.json

@@ -12,6 +12,7 @@
     "@typebot.io/openai-block": "workspace:*",
     "@typebot.io/zemantic-ai-block": "workspace:*",
     "@typebot.io/cal-com-block": "workspace:*",
-    "@typebot.io/chat-node-block": "workspace:*"
+    "@typebot.io/chat-node-block": "workspace:*",
+    "@typebot.io/messenger-block": "workspace:*"
   }
 }