Docs Components Assistant

VoiceOrb

import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceOrb } 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 VoiceOrbDemo() {
  return <VoiceOrb session={session} variant="default" size="md" />;
}

<script setup lang="ts">
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceOrb } 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>
  <VoiceOrb :session="session" variant="default" size="md" />
</template>

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { GrassrootVoiceOrb } from "@grassroot/ui-angular/assistant";
 
@Component({
  selector: "app-voice-orb-demo",
  standalone: true,
  imports: [GrassrootVoiceOrb],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-voice-orb [session]="session" variant="default" size="md" />`,
})
export class VoiceOrbDemoComponent {
  protected readonly session = createVoiceSession({
    setup: ({ publishTranscript, publishVoiceVolume }) => {
      publishTranscript({ role: "user", text: "Show me the theme tokens.", isFinal: true });
      publishVoiceVolume(0.4);
    },
  });
}
 
export default VoiceOrbDemoComponent;

<script lang="ts">
  import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
  import { VoiceOrb } 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>
 
<VoiceOrb {session} variant="default" size="md" />

/** @jsxImportSource solid-js */
import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceOrb } 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 VoiceOrbDemo() {
  return <VoiceOrb session={session} variant="default" size="md" />;
}

Installation

API Reference

Import

import { createVoiceSession } from "@grassroot/assistant/adapters/voice";
import { VoiceOrb } 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

label

string | undefined

—

optional

size

"sm" | "md" | "lg" | undefined

—

optional

state

VoiceOrbState | undefined

—

optional

variant

VoiceOrbVariant | undefined

—

optional

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

Prop: label
Type: string | undefined
Default: —
Requirement: optional

Prop: size
Type: "sm" | "md" | "lg" | undefined
Default: —
Requirement: optional

Prop: state
Type: VoiceOrbState | undefined
Default: —
Requirement: optional

Prop: variant
Type: VoiceOrbVariant | undefined
Default: —
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 { VoiceOrb } from "@grassroot/ui-vue/assistant";

Props

Prop

Type

Default

Requirement

session

VoiceSession

—

required

label

string

"Voice activity"

optional

size

"sm" | "md" | "lg"

"md"

optional

state

VoiceOrbState

—

optional

variant

VoiceOrbVariant

"default"

optional

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

Prop: label
Type: string
Default: "Voice activity"
Requirement: optional

Prop: size
Type: "sm" | "md" | "lg"
Default: "md"
Requirement: optional

Prop: state
Type: VoiceOrbState
Default: —
Requirement: optional

Prop: variant
Type: VoiceOrbVariant
Default: "default"
Requirement: optional

Import

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

Props

Prop

Type

Default

Requirement

session

VoiceSession

—

required

label

string

"Voice activity"

optional

size

"sm" | "md" | "lg"

"md"

optional

state

VoiceSessionValue | "idle"

—

optional

variant

"default" | "compact" | "minimal"

"default"

optional

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

Prop: label
Type: string
Default: "Voice activity"
Requirement: optional

Prop: size
Type: "sm" | "md" | "lg"
Default: "md"
Requirement: optional

Prop: state
Type: VoiceSessionValue | "idle"
Default: —
Requirement: optional

Prop: variant
Type: "default" | "compact" | "minimal"
Default: "default"
Requirement: optional

Import

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

Props

Prop

Type

Default

Requirement

session

VoiceSession

—

required

label

string

"Voice activity"

optional

size

"sm" | "md" | "lg"

"md"

optional

state

VoiceSessionValue | "idle"

—

optional

variant

"default" | "compact" | "minimal"

"default"

optional

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

Prop: label
Type: string
Default: "Voice activity"
Requirement: optional

Prop: size
Type: "sm" | "md" | "lg"
Default: "md"
Requirement: optional

Prop: state
Type: VoiceSessionValue | "idle"
Default: —
Requirement: optional

Prop: variant
Type: "default" | "compact" | "minimal"
Default: "default"
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 { VoiceOrb } from "@grassroot/ui-solid/assistant";

Props

Prop

Type

Default

Requirement

session

VoiceSession

—

required

label

string

—

optional

size

"sm" | "md" | "lg"

—

optional

state

VoiceOrbState

—

optional

variant

VoiceOrbVariant

—

optional

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

Prop: label
Type: string
Default: —
Requirement: optional

Prop: size
Type: "sm" | "md" | "lg"
Default: —
Requirement: optional

Prop: state
Type: VoiceOrbState
Default: —
Requirement: optional

Prop: variant
Type: VoiceOrbVariant
Default: —
Requirement: optional

Native attributes

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