i don't know what i did

manifest.json

@@ -1,6 +1,6 @@
 {
-  "requiredSdkVersion": "~0.0.73",
+  "requiredSdkVersion": "~0.0.95",
-  "name": "<plugin-name>",
+  "name": "TestPlugin",
-  "javascriptEntrypointUrl": "<plugin-name>.js",
+  "javascriptEntrypointUrl": "TestPlugin.js",
   "localesBaseUrl": "locales"
 }

package-lock.json

@@ -1,18 +1,17 @@
 {
-  "name": "<plugin-name>",
+  "name": "TestPlugin",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "<plugin-name>",
+      "name": "TestPlugin",
       "version": "0.0.1",
       "dependencies": {
         "babel-plugin-syntax-dynamic-import": "^6.18.0",
-        "bigbluebutton-html-plugin-sdk": "0.0.73",
+        "bigbluebutton-html-plugin-sdk": "0.0.95",
         "path": "^0.12.7",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
-        "react-dom": "^18.2.0",
         "styled-components": "^5.3.3"
       },
       "devDependencies": {
@@ -20,8 +19,8 @@
         "@babel/preset-env": "^7.21.5",
         "@babel/preset-react": "^7.18.6",
         "@types/node": "^20.4.4",
-        "@types/react": "^18.2.15",
+        "@types/react": "^18.3.26",
-        "@types/react-dom": "^18.2.7",
+        "@types/react-dom": "^18.3.7",
         "@types/react-modal": "^3.16.0",
         "@types/styled-components": "^5.1.26",
         "@typescript-eslint/eslint-plugin": "^6.2.0",
@@ -38,7 +37,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-watch": "^8.0.0",
         "lint-staged": "11.2.0",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "style-loader": "^3.3.3",
         "ts-loader": "^9.4.3",
         "typescript": "^5.1.6",
@@ -127,6 +126,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
       "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.0",
@@ -2133,22 +2133,25 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.3.12",
+      "version": "18.3.26",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
-      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
+      "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
       "devOptional": true,
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.1",
+      "version": "18.3.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
-      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
-      "dependencies": {
+      "license": "MIT",
-        "@types/react": "*"
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
       }
     },
     "node_modules/@types/react-modal": {
@@ -2283,6 +2286,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -2727,6 +2731,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2770,6 +2775,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3210,9 +3216,10 @@
       "dev": true
     },
     "node_modules/bigbluebutton-html-plugin-sdk": {
-      "version": "0.0.73",
+      "version": "0.0.95",
-      "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.0.73.tgz",
+      "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.0.95.tgz",
-      "integrity": "sha512-upf5Np45+F26qlad1ZUDJFFyAFyPHF3cU81jskEUq2VoEzUCX8zjBVvIsksut79Slz/B622UbX8blGTm+s7/lw==",
+      "integrity": "sha512-b4Uq2Vqpe+YWuC1Ofq5USCR3/IjOFLOGO8sbDAipr4RijOBdjQe4y5RwKoi3vIItlqTSTKxR5+rc7VBjvoNOAQ==",
+      "license": "LGPL-3.0",
       "dependencies": {
         "@apollo/client": "^3.8.7",
         "@browser-bunyan/console-formatted-stream": "^1.8.0",
@@ -3334,6 +3341,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001669",
         "electron-to-chromium": "^1.5.41",
@@ -4123,6 +4131,7 @@
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -4348,6 +4357,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -4489,6 +4499,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
       "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.8",
@@ -4565,6 +4576,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
       "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "aria-query": "^5.3.2",
         "array-includes": "^3.1.8",
@@ -4625,6 +4637,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
       "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
@@ -4657,6 +4670,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
       "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -7590,6 +7604,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.0",
@@ -7817,6 +7832,8 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7825,22 +7842,23 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
+      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
-      "peer": true
     },
     "node_modules/readable-stream": {
       "version": "3.6.2",
@@ -8253,6 +8271,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -8897,6 +8916,7 @@
       "version": "5.3.11",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
       "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "peer": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.0.0",
         "@babel/traverse": "^7.4.5",
@@ -9296,6 +9316,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9512,6 +9533,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
       "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
@@ -9558,6 +9580,7 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
       "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^2.1.1",

package.json

@@ -1,14 +1,13 @@
 {
-  "name": "<plugin-name>",
+  "name": "TestPlugin",
   "version": "0.0.1",
   "private": true,
   "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.0.95",
     "path": "^0.12.7",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
     "styled-components": "^5.3.3"
   },
   "scripts": {
@@ -36,8 +35,8 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@types/node": "^20.4.4",
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.3.26",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.3.7",
     "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
@@ -54,7 +53,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-watch": "^8.0.0",
     "lint-staged": "11.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.3",
     "typescript": "^5.1.6",

src/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import MainComponent from './main/component';
+import TestPopup from './test-plugin/component';
 
 const uuid = document.currentScript?.getAttribute('uuid') || 'root';
 
@@ -8,9 +8,9 @@ const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin
 
 const root = ReactDOM.createRoot(document.getElementById(uuid));
 root.render(
-  <MainComponent {...{
+  <TestPopup {...{
     pluginUuid: uuid,
     pluginName,
   }}
-  />,
+      />
 );

src/test-plugin/component.tsx

@@ -0,0 +1,31 @@
+import { BbbPluginSdk, OptionsDropdownOption, pluginLogger } from 'bigbluebutton-html-plugin-sdk';
+import * as React from 'react';
+import { useEffect } from 'react';
+
+interface TestPluginProps {
+    pluginUuid: string;
+}
+
+const funnyCat = require('./komaru-cat.gif') as string;
+
+function TestPopup({ pluginUuid }: TestPluginProps): React.ReactElement {
+    BbbPluginSdk.initialize(pluginUuid);
+    const pluginApi = BbbPluginSdk.getPluginApi(pluginUuid);
+
+        useEffect(() => {
+            pluginApi.setOptionsDropdownItems([
+                new OptionsDropdownOption({
+                    label: 'Fun Button',
+                    icon: 'user',
+                    onClick: () => {
+                        <img src={funnyCat} alt="funny-cat"/>
+                        pluginLogger.info('played funny gif')
+                    }
+                })
+            ])
+        }, []);
+
+    return null;
+}
+
+export default TestPopup;

webpack.config.js

@@ -5,8 +5,8 @@ const path = require('path');
 module.exports = {
   entry: './src/index.tsx',
   output: {
-    filename: '<plugin-name>.js',
+    filename: 'TestPlugin.js',
-    library: '<plugin-name>',
+    library: 'TestPlugin',
     libraryTarget: 'umd',
     publicPath: '/',
     globalObject: 'this',
@@ -49,6 +49,10 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.(gif)$/i,
+        type: 'asset/resource',
+      },
     ],
   },
   resolve: {