Intelligent Formatting Component

The Intelligent Formatting Component is a modal window that allows users to configure AI-powered formatting options. This high-level component is designed to be integrated quickly and easily in your web application.

Getting started

1. Import resources

Install the SDK via npm:

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

Then import IntelligentFormattingDialog as a named export:

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

Component styles are auto-injected at runtime — no separate CSS import needed.

2. Initialize component

1. Create a container in the DOM. You can use the same container for all dialog components:

   <div id="invox-dialogs-container"></div>
   

   Copy to clipboard
2. Create the component:

   const intelligentFormattingDialog = IntelligentFormattingDialog.create("invox-dialogs-container");
   

   Copy to clipboard

3. Show component

intelligentFormattingDialog.show();

4. Hide component (optional)

The dialog can also be closed by pressing ESC or clicking the Close button.

intelligentFormattingDialog.hide();

5. Remove component (optional)

intelligentFormattingDialog.remove();

Public methods

create

const intelligentFormattingDialog = IntelligentFormattingDialog.create("invox-dialogs-container");

show

intelligentFormattingDialog.show();

hide

intelligentFormattingDialog.hide();

remove

intelligentFormattingDialog.remove();

Customize design

Uses the same auto-injected CSS variables as the Dictionary Component.

How to use

The Intelligent Formatting dialog allows users to configure how the AI formats dictated text, including capitalization rules, punctuation preferences, number formatting, and medical terminology handling. Once configured, these settings are applied automatically during dictation.