@sonoba/voice-client-react

@sonoba/voice-client の React hooks + Provider。

インストール

npm install @sonoba/voice-client @sonoba/voice-client-react

クイックスタート

import { SonobaVoiceProvider, useVoice } from '@sonoba/voice-client-react';

function App() {
  return (
    <SonobaVoiceProvider pipelineUrl="https://pipeline.example.com">
      <VoiceUI />
    </SonobaVoiceProvider>
  );
}

function VoiceUI() {
  const { connect, disconnect, status, messages, currentExpression } = useVoice();

  return (
    <div>
      <button onClick={connect}>開始</button>
      <button onClick={disconnect}>終了</button>
      <p>状態: {status}</p>
      <p>表情: {currentExpression}</p>
      {messages.map((msg, i) => (
        <p key={i}>[{msg.type}] {msg.text}</p>
      ))}
    </div>
  );
}

hooks

useVoice() — 全部入り

全ての状態と操作をまとめて取得します。手軽に使いたいときに。

const {
  connect, disconnect, sendText,        // 操作
  status, isConnected, isReady,         // 接続状態
  isMuted, setMuted,                    // マイク
  messages, lastMessage,                // メッセージ履歴（字幕は感情絵文字除去済み）
  currentExpression, lastCue,           // 表情キュー
} = useVoice();

個別 hooks — パフォーマンス最適化

必要な状態だけ購読することで不要な再レンダリングを防げます。

const { connect, disconnect, sendText } = useVoiceControls(); // 操作のみ
const { status, isConnected, isReady } = useVoiceStatus();    // 状態のみ
const { isMuted, setMuted } = useVoiceMic();                  // マイクのみ
const { messages, lastMessage } = useVoiceMessages();          // メッセージのみ
const { currentExpression, lastCue } = useVoiceExpression();   // 表情キューのみ

useVoiceExpression() — 表情キュー

サーバーの発話エンハンスパスが agent transcript に埋め込む Irodori 感情絵文字を、@sonoba/voice-client が字幕から除去し expression:cue イベントとして再配信したもの。currentExpression は最新のキューの表情 ID（未受信時は 'neutral'）、lastCue はそのキューの詳細（expressionId / emoji / streamId / timestamp）。

function CharacterFace() {
  const { currentExpression } = useVoiceExpression();
  return <Live2DAvatar expression={currentExpression} />;
}

汎用表情 ID（neutral / smile / surprise / jito / sad / confused / determined / sleepy）は @sonoba/shared の ExpressionId として提供される。実際の表情エンジンへのマッピングはアプリ側の責務（koe-canvas は 8 状態の PSD プリセットへマップする）。

ライセンス

MIT © sonoba