Components Reference

Web SDK React components, props, and usage examples

Overview

This section provides a detailed reference for all React components available in the Suki Web SDK.

SukiAssistant Component

The SukiAssistant is the main UI component that renders the Suki Assistant interface within your React application. It manages the display and interaction for ambient sessions.

The code snippet below shows how to use the SukiAssistant component to render the Suki Assistant interface within your React application.

React

import { SukiAssistant, SukiProvider } from '@suki-sdk/react';

function App() {
  return (
    <SukiProvider>
      <SukiAssistant
        // props
      />
    </SukiProvider>
  );
}

Available Props

Hide available props

ambientOptions · AmbientOptions

Configuration options for ambient session functionality, including note sections and problem-based charting settings. Refer to the AmbientOptions page for more information.

encounter · Encounter · required

The encounter data to pre-populate the SDK, including patient and provider details. This prop is required. Refer to the Encounter page for more information.

onClose · () => void

Callback function invoked when the SDK’s close button is clicked. This prop is only available and functional when uiOptions.showCloseButton is not explicitly set to false. Refer to the UIOptions page for more information.

uiOptions · UIOptions

UI configuration options for the SDK, controlling the visibility and functionality of various interface elements like buttons and editing features. Refer to the UIOptions page for more information.

onNoteSubmit · (data: NoteSubmitData) => void

Callback function when a note is submitted. Refer to emitter events page for more information.

Type Safety For onClose Prop

The SukiAssistant component employs conditional typing to ensure type safety for the onClose prop, which is dynamically determined by the uiOptions.showCloseButton configuration:

Hide type safety for onClose prop

When uiOptions.showCloseButton is false · Info

The onClose prop is not available for use.

When uiOptions.showCloseButton is true or undefined · Info

The onClose prop is optional and can be provided.

Next Steps

Refer to the Examples Section to learn more about how to use the Web SDK in your application.