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://speechly.github.io/browser-ui/latest/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"

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

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

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 }, "*");

Profile image for Ari Nykänen

Last updated by Ari Nykänen on September 29, 2021 at 11:32 +0300

Found an error on our documentation? Please file an issue or make a pull request