grassroot
Install

Docs Components Assistant

VoiceControl

React example follows below.
ts
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceControl } from "@grassroot/ui-react/assistant";
 
const session = createVoiceSession({
  setup: ({ publishTranscript, publishVoiceVolume }) => {
    publishTranscript({ role: "user", text: "Show me the theme tokens.", isFinal: true });
    publishVoiceVolume(0.4);
  },
});
 
export default function VoiceControlDemo() {
  return <VoiceControl session={session} />;
}
ts
<script setup lang="ts">
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceControl } from "@grassroot/ui-vue/assistant";
 
const session = createVoiceSession({
  setup: ({ publishTranscript, publishVoiceVolume }) => {
    publishTranscript({ role: "user", text: "Show me the theme tokens.", isFinal: true });
    publishVoiceVolume(0.4);
  },
});
</script>
 
<template>
  <VoiceControl :session="session" />
</template>
ts
import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { GrassrootVoiceControl } from "@grassroot/ui-angular/assistant";
 
@Component({
  selector: "app-voice-control-demo",
  standalone: true,
  imports: [GrassrootVoiceControl],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-voice-control [session]="session" />`,
})
export class VoiceControlDemoComponent {
  protected readonly session = createVoiceSession({
    setup: ({ publishTranscript, publishVoiceVolume }) => {
      publishTranscript({ role: "user", text: "Show me the theme tokens.", isFinal: true });
      publishVoiceVolume(0.4);
    },
  });
}
 
export default VoiceControlDemoComponent;
ts
<script lang="ts">
  import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
  import { VoiceControl } from "@grassroot/ui-svelte/assistant";
 
  const session = createVoiceSession({
    setup: ({ publishTranscript, publishVoiceVolume }) => {
      publishTranscript({ role: "user", text: "Show me the theme tokens.", isFinal: true });
      publishVoiceVolume(0.4);
    },
  });
</script>
 
<VoiceControl {session} />
ts
/** @jsxImportSource solid-js */
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceControl } from "@grassroot/ui-solid/assistant";
 
const session = createVoiceSession({
  setup: ({ publishTranscript, publishVoiceVolume }) => {
    publishTranscript({ role: "user", text: "Show me the theme tokens.", isFinal: true });
    publishVoiceVolume(0.4);
  },
});
 
export default function VoiceControlDemo() {
  return <VoiceControl session={session} />;
}

Installation

API Reference

Import

import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceControl } from "@grassroot/ui-react/assistant";

Props

Prop
Type
Default
Requirement
session
{ readonly start: () => Promise<void>; readonly connect: () => Promise<void>; readonly disconnect: () => Promise<void>; readonly end: (reason: import("@grassroot/ui-machines/voice-session").VoiceSessionEndReason, error?: unknown) => void; readonly setMuted: (muted: boolean) => void; readonly setMode: (mode: import("@grassroot/ui-machines/voice-session").VoiceSessionMode) => void; readonly getState: () => import("@grassroot/ui-machines/voice-session").VoiceSessionSnapshot; readonly subscribe: (listener: (snapshot: import("@grassroot/ui-machines/voice-session").VoiceSessionSnapshot, previous: import("@grassroot/ui-machines/voice-session").VoiceSessionSnapshot) => void) => () => void; readonly subscribeTranscript: (listener: (item: import("@grassroot/assistant/adapters/voice").VoiceTranscriptItem) => void) => () => void; readonly subscribeVoiceVolume: (listener: (volume: number) => void) => () => void; readonly publishTranscript: (item: import("@grassroot/assistant/adapters/voice").VoiceTranscriptItem) => void; readonly publishVoiceVolume: (volume: number) => void; }
—
required
Prop
session
Type
{ readonly start: () => Promise<void>; readonly connect: () => Promise<void>; readonly disconnect: () => Promise<void>; readonly end: (reason: import("@grassroot/ui-machines/voice-session").VoiceSessionEndReason, error?: unknown) => void; readonly setMuted: (muted: boolean) => void; readonly setMode: (mode: import("@grassroot/ui-machines/voice-session").VoiceSessionMode) => void; readonly getState: () => import("@grassroot/ui-machines/voice-session").VoiceSessionSnapshot; readonly subscribe: (listener: (snapshot: import("@grassroot/ui-machines/voice-session").VoiceSessionSnapshot, previous: import("@grassroot/ui-machines/voice-session").VoiceSessionSnapshot) => void) => () => void; readonly subscribeTranscript: (listener: (item: import("@grassroot/assistant/adapters/voice").VoiceTranscriptItem) => void) => () => void; readonly subscribeVoiceVolume: (listener: (volume: number) => void) => () => void; readonly publishTranscript: (item: import("@grassroot/assistant/adapters/voice").VoiceTranscriptItem) => void; readonly publishVoiceVolume: (volume: number) => void; }
Default
—
Requirement
required

Content regions

  • startLabel

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceControl } from "@grassroot/ui-vue/assistant";

Props

Prop
Type
Default
Requirement
session
VoiceSession
—
required
startLabel
string
"Connect voice"
optional
Prop
session
Type
VoiceSession
Default
—
Requirement
required
Prop
startLabel
Type
string
Default
"Connect voice"
Requirement
optional

Import

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { GrassrootVoiceControl } from "@grassroot/ui-angular/assistant";

Props

Prop
Type
Default
Requirement
session
VoiceSession
—
required
startLabel
string
"Connect voice"
optional
Prop
session
Type
VoiceSession
Default
—
Requirement
required
Prop
startLabel
Type
string
Default
"Connect voice"
Requirement
optional

Import

import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceControl } from "@grassroot/ui-svelte/assistant";

Props

Prop
Type
Default
Requirement
session
VoiceSession
—
required
startLabel
string
"Connect voice"
optional
Prop
session
Type
VoiceSession
Default
—
Requirement
required
Prop
startLabel
Type
string
Default
"Connect voice"
Requirement
optional

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceControl } from "@grassroot/ui-solid/assistant";

Props

Prop
Type
Default
Requirement
session
VoiceSession
—
required
Prop
session
Type
VoiceSession
Default
—
Requirement
required

Content regions

  • startLabel

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.