✨ integration copilot with BotFramework-WebChat

add webchat framework integration parts in block_iagora.php and edit_form.php files, also add iagora.js file to manage javascript with moodle

Author: Arame22

amd/build/iagora.min.js

@@ -0,0 +1,56 @@
+import WebChat from 'botframework-webchat';
+/**
+ * Initializes the chat with given parameters.
+ * @param {Object} params - The initialization parameters.
+ * @param {string} params.copiloturl - The copilot.
+ * @param {string} params.categoryid - The category ID.
+ * @param {string} params.chatId - The chat container ID.
+ */
+
+export const init = ({copiloturl}) => {
+    // eslint-disable-next-line no-console
+    console.log('Copilot URL:', copiloturl);
+    //initIagoraChat(chatId);
+};
+/**
+ *
+ * @param {string} chatId
+ */
+export function initIagoraChat(chatId) {
+ const chatContainer = document.getElementById(chatId);
+
+        // Static token and directLine URL (example values)
+        const directLineURL = 'https://directline.botframework.com';
+        const token = chatId ;
+        try {
+            const directLine = WebChat.createDirectLine({domain: new URL("v3/directline", directLineURL), token});
+
+            const subscription = directLine.connectionStatus$.subscribe({
+                next(value) {
+                    if (value === 2) {
+                        directLine
+                            .postActivity({
+                                localTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                                locale: document.documentElement.lang || "en",
+                                name: "startConversation",
+                                type: "event"
+                            })
+                            .subscribe();
+
+                        subscription.unsubscribe();
+                    }
+                }
+            });
+
+            WebChat.renderWebChat({directLine, locale: document.documentElement.lang || "en"}, chatContainer);
+        } catch (error) {
+                    // eslint-disable-next-line no-console
+            console.error("Error initializing chat:", error);
+            chatContainer.innerHTML = "Failed to load chat. Please try again later.";
+        }
+    }
+
+    export default {
+        init,
+        initIagoraChat
+    };

amd/build/iagora.min.js.map

@@ -48,34 +48,59 @@ public function get_content() {
 
         $this->content = new stdClass();
         $this->content->footer = '';
-
         $iframeurl = isset($this->config->iframeurl) ? $this->config->iframeurl : '';
 
-        if (empty($iframeurl)) {
-            $this->content->text = get_string('noiframeurl', 'block_iagora');
-        } else {
-            $this->content->text = '<iframe src="' . $iframeurl . '" width="100%" height="400px" frameborder="0"></iframe>';
-        }
+        // if (empty($iframeurl)) {
+        //     $this->content->text = get_string('noiframeurl', 'block_iagora');
+        // } else {
+        //     $this->content->text = '<iframe src="' . $iframeurl . '" width="100%" height="400px" frameborder="0"></iframe>';
+        // }
+        $this->content->text = $this->generate_chat_content($iframeurl);
 
         return $this->content;
     }
 
     /**
      * Define in which pages this block can be added.
      *
-     * @return array of the pages where the block can be added.
+     * @param string $iframeurl The URL to be used in the iframe.
+     * @return string The generated HTML content.
      */
-    public function applicable_formats() {
-        return ['all' => true];
+    private function generate_chat_content($iframeurl) {
+        global $PAGE, $OUTPUT;  die($iframeurl);
+
+        // Load necessary styles and scripts
+        $PAGE->requires->js(new moodle_url('https://cdn.botframework.com/botframework-webchat/latest/webchat.js'), true);
+        $PAGE->requires->js_call_amd('block_iagora/iagora', 'init', [[
+            'copiloturl' => $iframeurl
+        ]]);
+
+        // Generate a unique identifier for the chat container
+        $chat_id = uniqid('iagora_chat_');
+
+        // Chat button icon (using Moodle icons)
+        $chat_icon = $OUTPUT->pix_icon('t/message', get_string('openchat', 'block_iagora'));
+
+        $output = html_writer::div($chat_icon, 'iagora-chat-toggle', ['id' => 'iagora-toggle-' . $chat_id,'data-url' => 'iframe_url']);
+        $output .= html_writer::div('', 'iagora-chat-container', ['id' => $chat_id]);
+
+        // Add initialization script
+        // $output .= html_writer::script("
+        //     document.addEventListener('DOMContentLoaded', function() {
+        //         initIagoraChat('{$chat_id}', " . json_encode($this->config) . ");
+        //     });
+        // ");
+
+        return $output;
     }
 
     /**
-     * Allow the block to be configured.
+     * Define in which pages this block can be added.
      *
-     * @return bool
+     * @return array of the pages where the block can be added.
      */
-    public function instance_allow_config() {
-        return true;
+    public function applicable_formats() {
+        return ['all' => true];
     }
 
     /**

amd/src/iagora.js

@@ -45,6 +45,15 @@ protected function specific_definition($mform) {
         $mform->setDefault('config_iframeurl', '');
         $mform->addElement('static', 'iframeurl_desc', '', get_string('iframeurl_desc', 'block_iagora'));
 
+        // Background color
+        $mform->addElement('text', 'config_backgroundcolor', get_string('backgroundcolor', 'block_iagora'));
+        $mform->setDefault('config_backgroundcolor', '#A9D1F3');
+        $mform->setType('config_backgroundcolor', PARAM_TEXT);
+
+        // Bubble background color
+        $mform->addElement('text', 'config_bubblebackground', get_string('bubblebackground', 'block_iagora'));
+        $mform->setDefault('config_bubblebackground', '#F3CBA9');
+        $mform->setType('config_bubblebackground', PARAM_TEXT);
     }
 
 }

block_iagora.php

@@ -22,8 +22,12 @@
  * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+ $string['backgroundcolor'] = 'Background Color';
+ $string['bubblebackground'] = 'Bubble Background Color';
+ $string['pluginname'] = 'IAGORA';
  $string['iframeurl'] = 'Iframe URL';
  $string['iframeurl_desc'] = 'Public URL available for chat iframe';
  $string['iframeurl_help'] = 'Public URL for the Microsoft Copilot chat iframe';
  $string['noiframeurl'] = 'No url defined for this block. Please configure a URL in the block parameters';
- $string['pluginname'] = 'IAGORA';
+
+ 

edit_form.php

@@ -0,0 +1,16 @@
+{
+  "name": "iagora",
+  "version": "1.0.0",
+  "description": "iagora Chat block for Moodle",
+  "author": "Datum Academy <[email protected]>",
+  "license": "GPL-3.0",
+  "private": true,
+  "dependencies": {
+    "botframework-webchat": "^4.15.0"
+  },
+  "scripts": {
+    "build": "grunt amd",
+    "watch": "grunt watch",
+    "lint": "grunt eslint stylelint"
+  }
+}