first commit

Adds chat commands proccessor with an extensible design to allow for
easy addition of new commands. There is only one command implemented
which is `/demote` which demotes all moderators - except for the sender
- to viewers.

Author: Arthurk12

README.md

@@ -2,7 +2,14 @@
 
 ## Description
 
-A brief description of the plugin including a screenshot and/or a short video.
+This is an experimental internal plugin developed by mconf for BigBlueButton. Its main purpose is to allow the inclusion and execution of custom chat commands in meetings. The plugin is designed to be easily extensible, enabling developers to add new commands with minimal effort.
+
+### Features
+- Easily add new chat commands by extending the configuration.
+- Commands can trigger custom mutations and actions in the meeting context.
+- Example command: `/demote` (see below for details).
+
+A screenshot and/or a short video can be added here to illustrate usage.
 
 ## Building the Plugin
 
@@ -26,6 +33,39 @@ pluginManifests=[{"url":"<your-domain>/path/to/manifest.json"}]
 
 Or additionally, you can add this same configuration in the `.properties` file from `bbb-web` in `/usr/share/bbb-web/WEB-INF/classes/bigbluebutton.properties`
 
+## How to Add New Commands
+
+Commands are defined in the plugin's configuration as objects with a name, description, mutation (optional), and an `execute` function. To add a new command:
+
+1. Open the file where commands are configured (usually `component.tsx` or a dedicated config file).
+2. Add a new entry to the `CommandConfig` object, specifying:
+   - `name`: The command name (used after `/` in chat).
+   - `description`: A brief description of the command.
+   - `mutation`: (Optional) The GraphQL mutation string to be used.
+   - `execute`: The function that will be called when the command is triggered. It receives context such as the current user, user list, arguments, and mutation trigger.
+3. Ensure the mutation is mapped in the `mutationMap` if your command uses a custom mutation.
+
+Example:
+```typescript
+const DEFAULT_COMMANDS: CommandConfig = {
+  demote: { ... },
+  myCommand: {
+    name: 'myCommand',
+    description: 'Does something special',
+    mutation: MY_MUTATION,
+    execute: ({ mutation, users, senderId, args }) => {
+      // Your logic here
+    },
+  },
+};
+```
+
+## Implemented Commands
+
+### `/demote`
+- **Description:** Demotes all users in the meeting to the viewer role, except for the user who issued the command.
+- **Usage:** Type `/demote` in the chat as a moderator. The command will change the role of all other moderators to viewers.
+- **Restrictions:** Only users with moderator privileges can execute this command. The command will not affect the sender or users who are already viewers.
 
 ## Development mode
 

manifest.json

@@ -1,6 +1,6 @@
 {
-  "requiredSdkVersion": "~0.0.73",
-  "name": "<plugin-name>",
-  "javascriptEntrypointUrl": "<plugin-name>.js",
-  "localesBaseUrl": "https://cdn.dominio.com/pluginabc/"
+  "requiredSdkVersion": "0.1.x",
+  "name": "ChatCommandsPlugin",
+  "javascriptEntrypointUrl": "ChatCommandsPlugin.js",
+  "localesBaseUrl": "ChatCommandsPlugin.js"
 }

package-lock.json

@@ -5,7 +5,7 @@
   "main": "./src/index.tsx",
   "dependencies": {
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.73",
+    "bigbluebutton-html-plugin-sdk": "0.1.x",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -0,0 +1,109 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { pluginLogger } from 'bigbluebutton-html-plugin-sdk';
+import {
+  CommandConfig,
+  ChatCommandPluginProps,
+  SetRoleMutation,
+  MutationMap,
+} from './types';
+import { SET_ROLE } from './mutations';
+
+const COMMAND_PREFIX = '/';
+
+const VIEWER_ROLE = () => window.meetingClientSettings.public.user.role_viewer;
+const MODERATOR_ROLE = () => window.meetingClientSettings.public.user.role_moderator;
+
+const DEFAULT_COMMANDS: CommandConfig = {
+  demote: {
+    name: 'demote',
+    description: 'Demote all users to viewers except the sender',
+    execute: ({
+      currentUser,
+      users,
+      senderId,
+      mutation,
+    }) => {
+      if (!currentUser || currentUser.role !== MODERATOR_ROLE()) {
+        pluginLogger.warn('Current user is not a moderator. Cannot execute demote command.');
+        return;
+      }
+      users
+        .filter((user) => user.userId !== senderId && user.isModerator)
+        .map((user) => mutation({
+          variables: {
+            userId: user.userId,
+            role: VIEWER_ROLE(),
+          },
+        }));
+    },
+  },
+};
+
+export function ChatCommandPlugin({
+  pluginApi,
+  commands = DEFAULT_COMMANDS,
+}: ChatCommandPluginProps): React.ReactElement {
+  const loadedChatMessagesResponse = pluginApi.useLoadedChatMessages();
+  const usersBasicInfoResponse = pluginApi.useUsersBasicInfo();
+  const currentUserResponse = pluginApi.useCurrentUser();
+  const [setRole] = pluginApi.useCustomMutation<SetRoleMutation>(SET_ROLE);
+  const executedMessageIds = useRef<Set<string>>(new Set());
+
+  const mutationMap: MutationMap = useMemo(() => ({
+    [DEFAULT_COMMANDS.demote.name]: setRole,
+  }), [setRole]);
+
+  const currentUser = useMemo(() => {
+    if (currentUserResponse.loading) return null;
+    if (currentUserResponse.error || !currentUserResponse.data) {
+      pluginLogger.error('Error loading current user', currentUserResponse.error);
+      return null;
+    }
+    return currentUserResponse.data;
+  }, [currentUserResponse]);
+
+  const usersList = useMemo(() => {
+    if (usersBasicInfoResponse.loading) return [];
+    if (usersBasicInfoResponse.error || !usersBasicInfoResponse.data) {
+      pluginLogger.error('Error loading user list', usersBasicInfoResponse.error);
+      return [];
+    }
+    return usersBasicInfoResponse.data.user;
+  }, [usersBasicInfoResponse]);
+
+  const messages = useMemo(() => {
+    if (loadedChatMessagesResponse.loading) return [];
+    if (loadedChatMessagesResponse.error || !loadedChatMessagesResponse.data) {
+      pluginLogger.error('Error loading chat messages', loadedChatMessagesResponse.error);
+      return [];
+    }
+    return loadedChatMessagesResponse.data;
+  }, [loadedChatMessagesResponse]);
+
+  useEffect(() => {
+    if (messages && usersList && currentUser) {
+      messages.forEach(async (message) => {
+        if (message.message.startsWith(COMMAND_PREFIX)
+          && message.senderUserId === currentUser.userId
+          && !executedMessageIds.current.has(message.messageId)) {
+          const [cmd, ...args] = message.message.slice(1).split(' ');
+          if (commands[cmd]) {
+            pluginLogger.info(`Executing command: ${cmd} with args: ${args.join(', ')}`);
+            commands[cmd].execute({
+              mutation: mutationMap[cmd],
+              currentUser,
+              users: usersList,
+              senderId: message.senderUserId,
+              args,
+            });
+            executedMessageIds.current.add(message.messageId);
+          }
+        }
+      });
+    }
+  }, [messages, usersList, currentUser, commands]);
+
+  return null;
+}
+
+export default ChatCommandPlugin;

src/ChatCommandsPlugin/component.tsx

@@ -0,0 +1,8 @@
+export const SET_ROLE = `
+  mutation SetRole($userId: String!, $role: String!) {
+    userSetRole(
+      userId: $userId,
+      role: $role,
+    )
+  }
+`;

src/ChatCommandsPlugin/mutations.ts

@@ -0,0 +1,46 @@
+import { CurrentUserData, PluginApi, UsersBasicInfoData } from 'bigbluebutton-html-plugin-sdk';
+import { TriggerMutationFunction } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-creation/types';
+
+declare global {
+  interface Window {
+    meetingClientSettings: {
+      public: {
+        user: {
+          role_viewer: string;
+          role_moderator: string;
+        };
+      };
+    };
+  }
+}
+
+export interface ChatMentionProps {
+  pluginApi: PluginApi;
+}
+
+export interface SetRoleMutation {
+  userId: string;
+  role: string;
+}
+
+export interface MutationMap {
+  [key: string]: TriggerMutationFunction<unknown>;
+}
+
+export type CommandConfig = {
+  [command: string]: {
+    name: string;
+    description: string;
+    execute: (params: {
+      mutation: TriggerMutationFunction<unknown>;
+      currentUser: CurrentUserData;
+      users: UsersBasicInfoData[];
+      senderId: string;
+      args?: string[];
+    }) => void;
+  };
+};
+
+export interface ChatCommandPluginProps extends ChatMentionProps {
+  commands?: CommandConfig;
+}

src/ChatCommandsPlugin/types.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
+import ChatCommandsPlugin from './ChatCommandsPlugin/component';
+
+const uuid = document.currentScript?.getAttribute('uuid') || 'root';
+
+function PluginInitializer({ pluginUuid }: { pluginUuid: string }): React.ReactNode {
+  BbbPluginSdk.initialize(pluginUuid);
+  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(pluginUuid);
+
+  return <ChatCommandsPlugin pluginApi={pluginApi} />;
+}
+
+const root = ReactDOM.createRoot(document.getElementById(uuid));
+root.render(
+  <React.StrictMode>
+    <PluginInitializer pluginUuid={uuid} />
+  </React.StrictMode>,
+);

src/index.tsx

@@ -6,7 +6,8 @@
         "target": "es5",
         "jsx": "react",
         "allowJs": true,
-        "moduleResolution": "node"
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
     },
     "include": ["src/*"],
     "paths": {

tsconfig.json

@@ -5,8 +5,8 @@ const path = require('path');
 module.exports = {
   entry: './src/index.tsx',
   output: {
-    filename: '<plugin-name>.js',
-    library: '<plugin-name>',
+    filename: 'ChatCommandsPlugin.js',
+    library: 'ChatCommandsPlugin',
     libraryTarget: 'umd',
     publicPath: '/',
     globalObject: 'this',
@@ -20,7 +20,7 @@ module.exports = {
     client: {
       overlay: false,
     },
-    onBeforeSetupMiddleware: (devServer) => {
+    setupMiddlewares: (middlewares, devServer) => {
       if (!devServer) {
         throw new Error('webpack-dev-server is not defined');
       }
@@ -29,6 +29,8 @@ module.exports = {
       devServer.app.get('/manifest.json', (req, res) => {
         res.sendFile(path.resolve(__dirname, 'manifest.json'));
       });
+
+      return middlewares;
     },
   },
   module: {