@werxt/livekit-components-react 2.9.20

package/src/prefabs/VoiceAssistantControlBar.tsx

@@ -0,0 +1,109 @@
+import { Track } from 'livekit-client';
+import * as React from 'react';
+import { MediaDeviceMenu } from './MediaDeviceMenu';
+import { TrackToggle } from '../components/controls/TrackToggle';
+import {
+  useLocalParticipant,
+  useLocalParticipantPermissions,
+  usePersistentUserChoices,
+} from '../hooks';
+import { mergeProps } from '../utils';
+import { StartMediaButton } from '../components/controls/StartMediaButton';
+import { BarVisualizer, DisconnectButton } from '../components';
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
+
+/** @beta */
+export type VoiceAssistantControlBarControls = {
+  microphone?: boolean;
+  leave?: boolean;
+};
+
+/** @beta */
+export interface VoiceAssistantControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
+  controls?: VoiceAssistantControlBarControls;
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enables the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   */
+  saveUserChoices?: boolean;
+}
+
+/**
+ * @example
+ * ```tsx
+ * <LiveKitRoom ... >
+ *   <VoiceAssistantControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @beta
+ */
+export function VoiceAssistantControlBar({
+  controls,
+  saveUserChoices = true,
+  onDeviceError,
+  ...props
+}: VoiceAssistantControlBarProps) {
+  const visibleControls = { leave: true, microphone: true, ...controls };
+
+  const localPermissions = useLocalParticipantPermissions();
+  const { microphoneTrack, localParticipant } = useLocalParticipant();
+
+  const micTrackRef: TrackReferenceOrPlaceholder = React.useMemo(() => {
+    return {
+      participant: localParticipant,
+      source: Track.Source.Microphone,
+      publication: microphoneTrack,
+    };
+  }, [localParticipant, microphoneTrack]);
+
+  if (!localPermissions) {
+    visibleControls.microphone = false;
+  } else {
+    visibleControls.microphone ??= localPermissions.canPublish;
+  }
+
+  const htmlProps = mergeProps({ className: 'lk-agent-control-bar' }, props);
+
+  const { saveAudioInputEnabled, saveAudioInputDeviceId } = usePersistentUserChoices({
+    preventSave: !saveUserChoices,
+  });
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) => {
+      if (isUserInitiated) {
+        saveAudioInputEnabled(enabled);
+      }
+    },
+    [saveAudioInputEnabled],
+  );
+
+  return (
+    <div {...htmlProps}>
+      {visibleControls.microphone && (
+        <div className="lk-button-group">
+          <TrackToggle
+            source={Track.Source.Microphone}
+            showIcon={true}
+            onChange={microphoneOnChange}
+            onDeviceError={(error) => onDeviceError?.({ source: Track.Source.Microphone, error })}
+          >
+            <BarVisualizer trackRef={micTrackRef} barCount={7} options={{ minHeight: 5 }} />
+          </TrackToggle>
+          <div className="lk-button-group-menu">
+            <MediaDeviceMenu
+              kind="audioinput"
+              onActiveDeviceChange={(_kind, deviceId) =>
+                saveAudioInputDeviceId(deviceId ?? 'default')
+              }
+            />
+          </div>
+        </div>
+      )}
+
+      {visibleControls.leave && <DisconnectButton>{'Disconnect'}</DisconnectButton>}
+      <StartMediaButton />
+    </div>
+  );
+}

package/src/prefabs/index.ts

@@ -0,0 +1,11 @@
+export { Chat, type ChatProps } from './Chat';
+export { PreJoin, type PreJoinProps, usePreviewDevice, usePreviewTracks } from './PreJoin';
+export { VideoConference, type VideoConferenceProps } from './VideoConference';
+export { ControlBar, type ControlBarProps, type ControlBarControls } from './ControlBar';
+export { MediaDeviceMenu, type MediaDeviceMenuProps } from './MediaDeviceMenu';
+export { AudioConference, type AudioConferenceProps } from './AudioConference';
+export {
+  VoiceAssistantControlBar,
+  type VoiceAssistantControlBarProps,
+  type VoiceAssistantControlBarControls,
+} from './VoiceAssistantControlBar';

package/src/utils.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { mergeProps as mergePropsReactAria } from './mergeProps';
+import { log } from '@livekit/components-core';
+import clsx from 'clsx';
+
+/** @internal */
+export function isProp<U extends HTMLElement, T extends React.HTMLAttributes<U>>(
+  prop: T | undefined,
+): prop is T {
+  return prop !== undefined;
+}
+
+/** @internal */
+export function mergeProps<
+  U extends HTMLElement,
+  T extends Array<React.HTMLAttributes<U> | undefined>,
+>(...props: T) {
+  return mergePropsReactAria(...props.filter(isProp));
+}
+
+/** @internal */
+export function cloneSingleChild(
+  children: React.ReactNode | React.ReactNode[],
+  props?: Record<string, any>,
+  key?: any,
+) {
+  return React.Children.map(children, (child) => {
+    // Checking isValidElement is the safe way and avoids a typescript
+    // error too.
+    if (React.isValidElement(child) && React.Children.only(children)) {
+      if (child.props.className) {
+        // make sure we retain classnames of both passed props and child
+        props ??= {};
+        props.className = clsx(child.props.className, props.className);
+        props.style = { ...child.props.style, ...props.style };
+      }
+      return React.cloneElement(child, { ...props, key });
+    }
+    return child;
+  });
+}
+
+/**
+ * @internal
+ */
+export function warnAboutMissingStyles(el?: HTMLElement) {
+  if (
+    typeof window !== 'undefined' &&
+    typeof process !== 'undefined' &&
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    (process?.env?.NODE_ENV === 'dev' ||
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      process?.env?.NODE_ENV === 'development')
+  ) {
+    const target = el ?? document.querySelector('.lk-room-container');
+    if (target && !getComputedStyle(target).getPropertyValue('--lk-has-imported-styles')) {
+      log.warn(
+        "It looks like you're not using the `@livekit/components-styles package`. To render the UI with the default styling, please import it in your layout or page.",
+      );
+    }
+  }
+}
+
+/**
+ *
+ * @internal
+ * used to stringify room options to detect dependency changes for react hooks.
+ * Replaces processors and e2ee options with strings.
+ */
+export function roomOptionsStringifyReplacer(key: string, val: unknown) {
+  if (key === 'processor' && val && typeof val === 'object' && 'name' in val) {
+    return val.name;
+  }
+  if (key === 'e2ee' && val) {
+    return 'e2ee-enabled';
+  }
+  return val;
+}