Transcript Drawer

Transcript Drawer is an alternative for Big Transcript that slides down from the top of the viewport. It displays usage hints along with the real-time speech-to-text transcript and feedback.

The component is momentarily displayed when speech input is used and automatically hidden shortly after.

The application code can signal the component to display a confirmation mark to let the user know that the voice command was successfully responded to.

The voice command hints can be provided as an array of strings. You can also customise the appearance of the component.

Usage

  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/transcript-drawer.js"></script>

  <transcript-drawer
    hint='["Try: 1st hint", "Try: 2nd hint"]'
    formattext="false" >
  </transcript-drawer>

Attributes

hint - Hint text to be shown when the app is listening for speech. Hint is hidden upon user speech is received. String or a JSON.stringify’ed string array, e.g. hint='["Try: 1st hint", "Try: 2nd hint"]'. Pay attention to use double quotes in JSON. If an array is provided, the next tip is automatically shown after an utterance. After all tips are shown, they will be shown again in random order. Default: ""
height - Optional minimum height as CSS string. Default: “8rem”
color - Optional string (CSS color) for text. Default: “#ffffff”
smalltextcolor - Optional string (CSS color) for hint text. Default: “#ffffff70”
highlightcolor - Optional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: “#15e8b5”
backgroundcolor - Optional string (CSS color) for hint text background. Default: “#202020”
fontsize - Optional CSS string for text size. Default: “1.5rem”
hintfontsize - Optional CSS string for hint text size. Default: “0.9rem”
formattext - Optional “true” | “false”. If true, transcript is formatted with detected entities, e.g. numbers. Default: “true”
demomode - Optional “true” | “false”. If true, transitions are slowed down for better readablility. Default: “false”
customtypography - Optional “true” | “false”. True inherits css typography settings. Default: “false”
customcssurl - Optional string (url to .css file). Allows for further customization of component’s shadow root.

Properties

speechsegment(segment: Segment) - Function. Call whenever a new segment update is available
speechstate(state: ClientState) - Function. Call whenever ClientState changes. Needed to show/hide element.
speechhandled(success: boolean) - Function. Optionally call on segment.isFinal to show confirmation that speech was processed. An indication will be shown with big-transcript.
sethint(message: string) - Optionally update hint text.

Window messages listened

{type: "speechsegment", segment: Segment} - Expects an update whenever a new segment update is available. This is usually sent by push-to-talk-button
{type: "speechstate", state: ClientState} - Needed to show/hide element
{type: "speechhandled", success: boolean} - Optionally send a confirmation on segment.isFinal that speech was processed. An indication will be shown with big-transcript.
{type: "hint", hint: text} - Optionally update hint text.

Place <BigTranscript> component inside your <SpeechProvider>. For app setup, please refer to Basic usage.

  import { TranscriptDrawer } from "@speechly/react-ui/components/TranscriptDrawer";

  ...
  <SpeechProvider appId="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD">
    <TranscriptDrawer
      hint={["Try: 1st hint", "Try: 2nd hint"]}
      formatText={false}
    />
  </SpeechProvider>
  ...

Properties

Name	Type	Description
`placement?`	`string`	Optional “top” string turns on internal placement without any CSS positioning.
`formatText?`	`boolean`	Optional boolean. If true, transcript is formatted with detected entities, e.g. numbers. Default: true
`fontSize?`	`string`	Optional CSS string for text size. Default: “1.5rem”
`color?`	`string`	Optional string (CSS color) for text. Default: “#ffffff”
`highlightColor?`	`string`	Optional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: “#15e8b5”
`backgroundColor?`	`string`	Optional string (CSS color) for hint text background. Default: “#202020”
`marginBottom?`	`string`	Optional string (CSS dimension). Dynamic margin added when element is visible. Default: “0rem”
`mockSegment?`	`SpeechSegment`	Optional SpeechSegment to be displayed instead of actual transcription from API. Can be used to demonstrate voice functionality to the user.
`hint?`	`string` \| `string`[]	Optional hint text or array
`height?`	`string`	Optional minimum height as CSS string. Default: “8rem”
`smallTextColor?`	`string`	Optional string (CSS color) for hint text. Default: “#ffffff70”
`hintFontSize?`	`string`	Optional CSS string for hint text size. Default: “0.9rem”

Displaying the confirmation checkmark

Once the application has successfully responded to the voice input, send a speechhandled message to display the confirmation mark:

window.postMessage({ type: "speechhandled", success: true }, "*");