Dictation Bar Component

Dictation Bar is a high-level component designed to be integrated quickly and easily in your web application.

Getting started

npm install @invox-medical-npm/invox-dictation

import INVOX, { BarComponent } from "@invox-medical-npm/invox-dictation";

2. Initialize the component

1. Create a container in the DOM with a unique identifier:

   <div id="invox-bar"></div>
   

   Copy to clipboard
2. Create and show the component:

   const invoxbar = BarComponent.create("invox-bar");
   invoxbar.show();
   

   Copy to clipboard

3. Login

const credentials = {
    user: "provided_username",
    password: "provided_password"
}

const connectToRemote = {
    host: "invox-sd-v2.invoxmedical.com",
    port: "443",
    useDictationService: true
}

try {
    await invoxbar.login(credentials, connectToRemote);
    INVOX.LogInfo("Remote Dictation Service connected successfully.");
} catch (error) {
    INVOX.LogError("Remote Dictation Service not found.");
}

4. Logout

invoxbar.logout()
    .then((result) => console.log("Successful logout!"))
    .catch((e) => console.error(e));

Public methods

create

const invoxbar = BarComponent.create("invox-bar");

show

invoxbar.show();

hide

invoxbar.hide();

remove

invoxbar.remove();

login

Parameters:

• credentials: Object
  • user: String
  • password: String
• connectionConfig: Object
  • host: String
  • port: String
  • useDictationService: Boolean — true for Remote. ::

invoxbar.login(credentials, connectionConfig)
    .then(() => console.log("Successful login!"))
    .catch((e) => console.error(e));

logout

invoxbar.logout()
    .then((result) => console.log("Successful logout!"))
    .catch((e) => console.error(e));

Customize design

How to use

1. Loading progress percentage — Displays the load percentage at login.
2. Actions menu — Display a list of the current user actions like templates / dictionary.
3. AI menu — Opens the AI options menu, like intelligent formatting or auto fill templates.
4. Dictation button (Recognizer) — Start or stop voice recognition.
5. Audio level indicator — Displays the audio level activity during the session.
6. Status bar & Hypothesis viewer — Displays session status messages and recognized hypothesis during dictation.
7. Profile button — Opens the user profile.
8. User name — Displays the name of the current logged user.
9. About menu — Opens the About menu.

How to dictate

1. Click the Dictation button to start recognizer.
2. Dictate your medical report.
3. Click again on the Dictation button to stop recognizer.

Reset component at runtime

For single-page applications (SPA) where you need to regenerate the Dictation Bar without reloading the page:

function resetComponent(credentials, connectionConfig) {
    // Step 1. Logout is absolutely necessary even if an error has occurred.
    invoxbar.logout()
        .catch((e) => console.error(e))
        .finally(() => {
            // Step 2. Remove from the DOM.
            invoxbar.remove();

            // Step 3. Create the dictation bar again.
            invoxbar = BarComponent.create("invox-bar");

            // Step 4. Connect to Invox Dictation service again.
            invoxbar.login(credentials, connectionConfig)
                .then(() => console.log("Successful login!"))
                .catch((e) => console.error(e));
        })
}