<template>
  <div>
    <p>Status: {{ status }}</p>
    <button @click="connect" :disabled="status !== 'disconnected'">
      Connect
    </button>
    <button @click="disconnect" :disabled="status === 'disconnected'">
      Disconnect
    </button>
    <div v-for="(msg, i) in messages" :key="i">
      <p><strong>{{ msg.role }}:</strong> {{ msg.text }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useVoiceClient } from '@itannix/vue';

const messages = ref<Array<{ role: string; text: string }>>([]);

const { status, connect, disconnect, sendFunctionResult } = useVoiceClient({
  workspaceKey: 'your-workspace-key',
  clientId: 'your-client-id',
  clientSecret: 'your-client-secret',
  onTranscript: (text) => {
    messages.value.push({ role: 'user', text });
  },
  onAssistantMessage: (text, done) => {
    if (done) {
      messages.value.push({ role: 'assistant', text });
    }
  },
  onFunctionCall: (name, args, callId) => {
    sendFunctionResult(callId, { success: true });
  },
  onError: (error) => {
    console.error('Connection error:', error);
  }
});
</script>

Quick Start (Component)

<template>
  <div>
    <VoiceAssistant
      ref="assistantRef"
      workspace-key="your-workspace-key"
      client-id="your-client-id"
      client-secret="your-client-secret"
      @status-change="handleStatusChange"
      @transcript="handleTranscript"
      @assistant-message="handleAssistantMessage"
    />
    <p>Status: {{ status }}</p>
    <button @click="assistantRef?.connect()">Connect</button>
    <button @click="assistantRef?.disconnect()">Disconnect</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VoiceAssistant } from '@itannix/vue';
import type { ConnectionStatus } from '@itannix/vue';

const assistantRef = ref<InstanceType<typeof VoiceAssistant> | null>(null);
const status = ref<ConnectionStatus>('disconnected');

function handleStatusChange(newStatus: ConnectionStatus) {
  status.value = newStatus;
}

function handleTranscript(text: string) {
  console.log('You:', text);
}

function handleAssistantMessage(text: string, done: boolean) {
  if (done) console.log('Assistant:', text);
}
</script>

Composable Options

Option	Type	Required	Description
`workspaceKey`	`string`	Yes	Your workspace API key from workspace settings
`clientId`	`string`	Yes	Your ItanniX client ID
`clientSecret`	`string`	Yes	Your client secret
`serverUrl`	`string`	No	API server URL (default: `https://api.itannix.com`)
`onTranscript`	`(text: string) => void`	No	Called when user speech is transcribed
`onAssistantMessage`	`(text: string, done: boolean) => void`	No	Called with assistant response (streaming)
`onFunctionCall`	`(name, args, callId) => void`	No	Called when assistant invokes a function
`onError`	`(error: Error) => void`	No	Called on connection errors

Composable Return Value

Property	Type	Description
`status`	`Ref<ConnectionStatus>`	Current connection status (reactive)
`connect`	`() => Promise<void>`	Start voice connection
`disconnect`	`() => void`	End voice connection
`sendFunctionResult`	`(callId, result) => void`	Send function call result back to assistant

Component Props

Prop	Type	Required	Description
`workspaceKey`	`string`	Yes	Your workspace API key from workspace settings
`clientId`	`string`	Yes	Your ItanniX client ID
`clientSecret`	`string`	Yes	Your client secret
`serverUrl`	`string`	No	API server URL

Component Events

Event	Payload	Description
`statusChange`	`ConnectionStatus`	Connection status changed
`transcript`	`string`	User speech transcribed
`assistantMessage`	`{ text: string, done: boolean }`	Assistant response (streaming)
`functionCall`	`{ name: string, args: object, callId: string }`	Function call from assistant
`error`	`Error`	Connection or runtime error

Component Methods

Access via template ref:

<VoiceAssistant ref="assistantRef" ... />

<script setup>
const assistantRef = ref();

// Connect
assistantRef.value?.connect();

// Disconnect
assistantRef.value?.disconnect();

// Send function result
assistantRef.value?.sendFunctionResult(callId, { success: true });

// Get status
console.log(assistantRef.value?.status);
</script>