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

NameTypeDescription
placement?stringOptional “top” string turns on internal placement without any CSS positioning.
formatText?booleanOptional boolean. If true, transcript is formatted with detected entities, e.g. numbers. Default: true
fontSize?stringOptional CSS string for text size. Default: “1.5rem”
color?stringOptional string (CSS color) for text. Default: “#ffffff”
highlightColor?stringOptional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: “#15e8b5”
backgroundColor?stringOptional string (CSS color) for hint text background. Default: “#202020”
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.
hint?string | string[]Optional hint text or array
height?stringOptional minimum height as CSS string. Default: “8rem”
smallTextColor?stringOptional string (CSS color) for hint text. Default: “#ffffff70”
hintFontSize?stringOptional 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 }, "*");

Last updated by Mathias Lindholm on January 26, 2022 at 11:45 +0200

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