mq-chat-room

A standalone real-time chat room component for one-on-one patient-professional conversations.

<mq-chat-room> renders a complete real-time chat room for a single conversation between a patient and a professional. Unlike <mq-router>, it focuses on a single room and does not affect browser navigation.

Dependencies

<mq-chat-room> requires two provider components rendered as ancestors:

<mq-query-client-provider> — provides the query client for data fetching
<mq-socket-provider> — manages the WebSocket connection

Installation

npm install @mediquo/web-components

import "@mediquo/web-components/mq-chat-room";
import "@mediquo/web-components/mq-socket-provider";
import "@mediquo/web-components/mq-query-client-provider";
import { setEnv } from "@mediquo/web-components/env";

setEnv("production");

Usage

HTML

<mq-query-client-provider>
  <mq-socket-provider env="production" token="<your-token>">
    <mq-chat-room
      api-key="<your-api-key>"
      token="<your-token>"
      professional-hash="<professional-hash>"
      room-id="<room-id>"
      locale="es_ES"
      theme="mediquo"
    ></mq-chat-room>
  </mq-socket-provider>
</mq-query-client-provider>

React / Next.js

Load all components client-side only (Lit web components cannot SSR):

"use client";
import { useEffect } from "react";
import { setEnv } from "@mediquo/web-components/env";

setEnv("production");

export function ChatSection({ token, apiKey, professionalHash, roomId }) {
  useEffect(() => {
    import("@mediquo/web-components/mq-chat-room");
    import("@mediquo/web-components/mq-socket-provider");
    import("@mediquo/web-components/mq-query-client-provider");
  }, []);

  return (
    <div style={{ height: "600px" }}>
      {/* @ts-expect-error — custom element */}
      <mq-query-client-provider>
        {/* @ts-expect-error — custom element */}
        <mq-socket-provider env="production" token={token}>
          {/* @ts-expect-error — custom element */}
          <mq-chat-room
            api-key={apiKey}
            token={token}
            professional-hash={professionalHash}
            room-id={roomId}
            locale="es_ES"
            theme="mediquo"
          />
        </mq-socket-provider>
      </mq-query-client-provider>
    </div>
  );
}

Attributes

Attribute	Type	Required	Description
`api-key`	`string`	Yes	API key for the Mediquo platform.
`token`	`string`	Yes	JWT authentication token.
`professional-hash`	`string`	Yes	Unique identifier for the professional in this conversation.
`room-id`	`string`	Yes	ID of the chat room to display.
`locale`	`string`	No	Locale code: `es_ES`, `en_US`, `pt_PT`, `de_DE`, `ca_ES`. Defaults to `es_ES`.
`theme`	`string`	No	Preset name (`mediquo`, `adeslas`, `default`) or `custom` for token themes.

mq-socket-provider

Attribute	Type	Required	Description
`env`	`string`	Yes	`"production"` or `"staging"`.
`token`	`string`	Yes	JWT token for WebSocket authentication.

Events

Event	Detail	Description
`mq-event-received`	`{ name: string; data: unknown }`	Fired on incoming socket events. Useful for notification badges and unread counts.
`download-file`	`{ url: string; filename: string }`	Fired when the user downloads a file attachment. The host app is responsible for fetching and saving the file.

Listening to events

const chatRoom = document.querySelector("mq-chat-room");

chatRoom.addEventListener("mq-event-received", (e) => {
  console.log(e.name, e.data);
});

chatRoom.addEventListener("download-file", async (e) => {
  const { url, filename } = e;
  const blob = await fetch(url).then((r) => r.blob());
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
});

Theming

Wrap the component with <mq-theme-provider> to apply CSS token overrides:

import "@mediquo/web-components/mq-theme-provider";
import { createTheme } from "@mediquo/web-components/theme";

const myTheme = createTheme({
  "--color-primary": "#e63946",
  "--border-radius-md": "0.75rem",
});

<mq-theme-provider theme="custom" style="...tokens">
  <mq-query-client-provider>
    <mq-socket-provider env="production" token="<your-token>">
      <mq-chat-room ... theme="custom"></mq-chat-room>
    </mq-socket-provider>
  </mq-query-client-provider>
</mq-theme-provider>

Available preset themes: mediquo, adeslas, default.

Interactive playground

Documentation pages show usage only. For a full-page, interactive demo with sidebar → Devtools (dialog: API key, token, professional hash, and room ID), open the standalone demo route on this site:

/web-components/mq-chat-room/demo

mq-chat-room

On this page