Integrate Matrix Widget API for Room Messages

[Septimus4]

Objective:
Integrate the Matrix widget API within the useTopics function (or relevant module) to listen for and handle room messages. Set up a structure to forward these messages to the backend when ready.

Tasks

1. Install and Configure Matrix Widget SDK

   • Install the Matrix widget SDK to enable Matrix-specific functionality.
   • Command: npm install matrix-widget-api or yarn add matrix-widget-api
   • Set up the SDK and configure it to listen for widget events within the room context.

2. Initialize Matrix Widget API and Handle Events

   • Initialize the widget API and set up listeners for room messages.
   • Add an event listener for room.message events to capture new messages in real time.
   • Extract relevant data from each message (e.g., sender, content, timestamp).

3. Implement Mock Backend Forwarding

   • Structure the event handler to forward captured messages to the backend, using mock data for now.
   • Prepare a function (sendMessageToBackend) to structure the request and format it for backend integration.
   • Example mock data for testing:

     const mockMessagePayload = {
     sender: "@user:matrix.org",
     content: "Sample message content",
     timestamp: Date.now()
     };

4. Handle Message Forwarding (Future Backend Integration)

   • Use the following logic for sending messages to the backend:
     • Log or simulate an API call with sendMessageToBackend(mockMessagePayload) for now.
   • Once the backend is ready, swap the mock logic with an actual API call to forward messages.

5. Example Code Snippet

   import { WidgetApi } from "matrix-widget-api";
   
   const widgetApi = new WidgetApi();
   
   widgetApi.requestCapabilities(['m.room.message']);
   
   widgetApi.on("room.message", (event) => {
      const messageData = {
          sender: event.sender,
          content: event.content.body,
          timestamp: event.origin_server_ts
      };
      // Forward to backend (mocked for now)
      sendMessageToBackend(messageData);
   });
   
   const sendMessageToBackend = (messageData) => {
      console.log("Forwarding message to backend:", messageData);
      // Mock API call to backend
   };

Acceptance Criteria

• [ ] Matrix widget API is integrated and listening for room.message events.
• [ ] Messages are forwarded to a mock backend function, with all relevant data extracted.
• [ ] Console log output for message forwarding simulates an API call to prepare for backend integration.