@pipecat-ai/client-react 0.3.0

package/README.md

@@ -0,0 +1,234 @@
+<h1><div align="center">
+ <img alt="pipecat react" width="500px" height="auto" src="../pipecat-react.png">
+</div></h1>
+
+[![Docs](https://img.shields.io/badge/documentation-blue)](https://docs.pipecat.ai/client/introduction)
+![NPM Version](https://img.shields.io/npm/v/@pipecat-ai/client-react)
+
+## Install
+
+```bash
+npm install @pipecat-ai/client-js @pipecat-ai/client-react
+```
+
+## Quick Start
+
+Instantiate an `RTVIClient` instance and pass it down to the `RTVIClientProvider`. Render the `<RTVIClientAudio>` component to have audio output setup automatically.
+
+```tsx
+import { RTVIClient } from "@pipecat-ai/client-js";
+import { RTVIClientAudio, RTVIClientProvider } from "@pipecat-ai/client-react";
+
+const client = new RTVIClient({
+  baseUrl: "https://rtvi.pipecat.bot",
+  enableMic: true,
+});
+
+render(
+  <RTVIClientProvider client={client}>
+    <MyApp />
+    <RTVIClientAudio />
+  </RTVIClientProvider>
+);
+```
+
+We recommend starting the voiceClient from a click of a button, so here's a minimal implementation of `<MyApp>` to get started:
+
+```tsx
+import { useRTVIClient } from "@pipecat-ai/client-react";
+
+const MyApp = () => {
+  const client = useRTVIClient();
+  return <button onClick={() => client.start()}>OK Computer</button>;
+};
+```
+
+## Components
+
+### RTVIClientProvider
+
+The root component for providing RTVI client context to your application.
+
+#### Props
+
+- `client` (RTVIClient, required): A singleton instance of RTVIClient.
+
+```jsx
+<RTVIClientProvider client={rtviClient}>
+  {/* Child components */}
+</RTVIClientProvider>
+```
+
+### RTVIClientAudio
+
+Creates a new `<audio>` element that mounts the bot's audio track.
+
+#### Props
+
+No props
+
+```jsx
+<RTVIClientAudio />
+```
+
+### RTVIClientVideo
+
+Creates a new `<video>` element that renders either the bot or local participant's video track.
+
+#### Props
+
+- `participant` ("local" | "bot"): Defines which participant's video track is rendered
+- `fit` ("contain" | "cover", optional): Defines whether the video should be fully contained or cover the box. Default: 'contain'.
+- `mirror` (boolean, optional): Forces the video to be mirrored, if set.
+- `onResize(dimensions: object)` (function, optional): Triggered whenever the video's rendered width or height changes. Returns the video's native `width`, `height` and `aspectRatio`.
+
+```jsx
+<RTVIClientVideo
+  participant="local"
+  fit="cover"
+  mirror
+  onResize={({ aspectRatio, height, width }) => {
+    console.log("Video dimensions changed:", { aspectRatio, height, width });
+  }}
+/>
+```
+
+### VoiceVisualizer
+
+Renders a visual representation of audio input levels on a `<canvas>` element.
+The visualization consists of five vertical bars.
+
+#### Props
+
+- `participantType` (string, required): The participant type to visualize audio for.
+- `backgroundColor` (string, optional): The background color of the canvas. Default: 'transparent'.
+- `barColor` (string, optional): The color of the audio level bars. Default: 'black'.
+- `barGap` (number, optional): The gap between bars in pixels. Default: 12.
+- `barWidth` (number, optional): The width of each bar in pixels. Default: 30.
+- `barMaxHeight` (number, optional): The maximum height at full volume of each bar in pixels. Default: 120.
+
+```jsx
+<VoiceVisualizer
+  participantType="local"
+  backgroundColor="white"
+  barColor="black"
+  barGap={1}
+  barWidth={4}
+  barMaxHeight={24}
+/>
+```
+
+## Hooks
+
+### useRTVIClient
+
+Provides access to the `RTVIClient` instance originally passed to [`RTVIClientProvider`](#rtviclientprovider).
+
+```jsx
+import { useRTVIClient } from "@pipecat-ai/client-react";
+
+function MyComponent() {
+  const rtviClient = useRTVIClient();
+}
+```
+
+### useRTVIClientEvent
+
+Allows subscribing to RTVI client events.
+It is advised to wrap handlers with `useCallback`.
+
+#### Arguments
+
+- `event` (RTVIEvent, required)
+- `handler` (function, required)
+
+```jsx
+import { useCallback } from "react";
+import { RTVIEvent, TransportState } from "@pipecat-ai/client-js";
+import { useRTVIClientEvent } from "@pipecat-ai/client-react";
+
+function EventListener() {
+  useRTVIClientEvent(
+    RTVIEvent.TransportStateChanged,
+    useCallback((transportState: TransportState) => {
+      console.log("Transport state changed to", transportState);
+    }, [])
+  );
+}
+```
+
+### useRTVIClientMediaDevices
+
+Manage and list available media devices.
+
+```jsx
+import { useRTVIClientMediaDevices } from "@pipecat-ai/client-react";
+
+function DeviceSelector() {
+  const {
+    availableCams,
+    availableMics,
+    selectedCam,
+    selectedMic,
+    updateCam,
+    updateMic,
+  } = useRTVIClientMediaDevices();
+
+  return (
+    <>
+      <select
+        name="cam"
+        onChange={(ev) => updateCam(ev.target.value)}
+        value={selectedCam?.deviceId}
+      >
+        {availableCams.map((cam) => (
+          <option key={cam.deviceId} value={cam.deviceId}>
+            {cam.label}
+          </option>
+        ))}
+      </select>
+      <select
+        name="mic"
+        onChange={(ev) => updateMic(ev.target.value)}
+        value={selectedMic?.deviceId}
+      >
+        {availableMics.map((mic) => (
+          <option key={mic.deviceId} value={mic.deviceId}>
+            {mic.label}
+          </option>
+        ))}
+      </select>
+    </>
+  );
+}
+```
+
+### useRTVIClientMediaTrack
+
+Access audio and video tracks.
+
+#### Arguments
+
+- `trackType` ("audio" | "video", required)
+- `participantType` ("bot" | "local", required)
+
+```jsx
+import { useRTVIClientMediaTrack } from "@pipecat-ai/client-react";
+
+function MyTracks() {
+  const localAudioTrack = useRTVIClientMediaTrack("audio", "local");
+  const botAudioTrack = useRTVIClientMediaTrack("audio", "bot");
+}
+```
+
+### useRTVIClientTransportState
+
+Returns the current transport state.
+
+```jsx
+import { useRTVIClientTransportState } from "@pipecat-ai/client-react";
+
+function ConnectionStatus() {
+  const transportState = useRTVIClientTransportState();
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import { RTVIClient, RTVIEvent, RTVIEventHandler, Tracks, TransportState } from "@pipecat-ai/client-js";
+import { Provider } from "jotai/react";
+import { JSX } from "react/jsx-runtime";
+import React from "react";
+interface Props {
+    client: RTVIClient;
+    jotaiStore?: React.ComponentProps<typeof Provider>["store"];
+}
+export const RTVIClientProvider: React.FC<React.PropsWithChildren<Props>>;
+export const useRTVIClient: () => RTVIClient | undefined;
+export const useRTVIClientEvent: <E extends RTVIEvent>(event: E, handler: RTVIEventHandler<E>) => void;
+type ParticipantType = keyof Tracks;
+type TrackType = keyof Tracks["local"];
+export const useRTVIClientMediaTrack: (trackType: TrackType, participantType: ParticipantType) => MediaStreamTrack | null;
+export const RTVIClientAudio: {
+    (): JSX.Element;
+    displayName: string;
+};
+interface RTVIClientVideoInterface {
+    aspectRatio: number;
+    height: number;
+    width: number;
+}
+interface _Props1 extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "onResize"> {
+    participant: "local" | "bot";
+    /**
+     * Defines whether the video should be fully contained or cover the box. Default: 'contain'.
+     */
+    fit?: "contain" | "cover";
+    /**
+     * Forces the video to be mirrored, if set.
+     */
+    mirror?: boolean;
+    /**
+     * Optional callback, which is triggered whenever the video's rendered width or height changes.
+     * Returns the video's native width, height and aspectRatio.
+     */
+    onResize?(dimensions: RTVIClientVideoInterface): void;
+}
+export const RTVIClientVideo: React.ForwardRefExoticComponent<_Props1 & React.RefAttributes<HTMLVideoElement>>;
+type OptionalMediaDeviceInfo = MediaDeviceInfo | Record<string, never>;
+export const useRTVIClientMediaDevices: () => {
+    availableCams: MediaDeviceInfo[];
+    availableMics: MediaDeviceInfo[];
+    availableSpeakers: MediaDeviceInfo[];
+    selectedCam: OptionalMediaDeviceInfo;
+    selectedMic: OptionalMediaDeviceInfo;
+    selectedSpeaker: OptionalMediaDeviceInfo;
+    updateCam: (id: string) => void;
+    updateMic: (id: string) => void;
+    updateSpeaker: (id: string) => void;
+};
+export const useRTVIClientTransportState: () => TransportState;
+type _ParticipantType1 = Parameters<typeof useRTVIClientMediaTrack>[1];
+interface _Props2 {
+    backgroundColor?: string;
+    barColor?: string;
+    barGap?: number;
+    barWidth?: number;
+    barMaxHeight?: number;
+    participantType: _ParticipantType1;
+}
+export const VoiceVisualizer: React.FC<_Props2>;
+
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;;AAYA;IACE,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,cAAc,CAAC,eAAoB,CAAC,CAAC,OAAO,CAAC,CAAC;CAClE;AAMD,OAAO,MAAM,oBAAoB,MAAM,EAAE,CAAC,MAAM,iBAAiB,CAAC,KAAK,CAAC,CAYvE,CAAC;ACxBF,OAAO,MAAM,2CAGZ,CAAC;ACFF,OAAO,MAAM,qBAAsB,CAAC,SAAS,SAAS,SAC7C,CAAC,WACC,iBAAiB,CAAC,CAAC,SAW7B,CAAC;ACTF,uBAAuB,MAAM,MAAM,CAAC;AACpC,iBAAiB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AAgBvC,OAAO,MAAM,qCACA,SAAS,mBACH,eAAe,4BA4CjC,CAAC;AClEF,OAAO,MAAM;;;CA6BZ,CAAC;AE9BF;IACE,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBACE,SAAQ,IAAI,CAAC,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,CAAC,UAAU,EAAE,wBAAwB,GAAG,IAAI,CAAC;CACvD;AAED,OAAO,MAAM,iGAuJZ,CAAC;ACpLF,+BAA+B,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AASvE,OAAO,MAAM;;;;;;;oBA4DJ,MAAM;oBAMN,MAAM;wBAMN,MAAM;CAiBd,CAAC;AC7FF,OAAO,MAAM,iDAMZ,CAAC;ACTF,yBAAuB,UAAU,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE;IACE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,iBAAe,CAAC;CAClC;AAED,OAAO,MAAM,iBAAiB,MAAM,EAAE,CAAC,OAAK,CAyM3C,CAAC","sources":["client-react/src/src/RTVIClientProvider.tsx","client-react/src/src/useRTVIClient.ts","client-react/src/src/useRTVIClientEvent.ts","client-react/src/src/useRTVIClientMediaTrack.ts","client-react/src/src/RTVIClientAudio.tsx","client-react/src/src/useMergedRef.ts","client-react/src/src/RTVIClientVideo.tsx","client-react/src/src/useRTVIClientMediaDevices.ts","client-react/src/src/useRTVIClientTransportState.ts","client-react/src/src/VoiceVisualizer.tsx","client-react/src/src/index.ts","client-react/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,"/**\n * Copyright (c) 2024, Daily.\n *\n * SPDX-License-Identifier: BSD-2-Clause\n */\n\nimport { RTVIClientAudio } from \"./RTVIClientAudio\";\nimport { RTVIClientProvider } from \"./RTVIClientProvider\";\nimport { RTVIClientVideo } from \"./RTVIClientVideo\";\nimport { useRTVIClient } from \"./useRTVIClient\";\nimport { useRTVIClientEvent } from \"./useRTVIClientEvent\";\nimport { useRTVIClientMediaDevices } from \"./useRTVIClientMediaDevices\";\nimport { useRTVIClientMediaTrack } from \"./useRTVIClientMediaTrack\";\nimport { useRTVIClientTransportState } from \"./useRTVIClientTransportState\";\nimport { VoiceVisualizer } from \"./VoiceVisualizer\";\n\nexport {\n  RTVIClientAudio,\n  RTVIClientProvider,\n  RTVIClientVideo,\n  useRTVIClient,\n  useRTVIClientEvent,\n  useRTVIClientMediaDevices,\n  useRTVIClientMediaTrack,\n  useRTVIClientTransportState,\n  VoiceVisualizer,\n};\n"],"names":[],"version":3,"file":"index.d.ts.map"}