create-spatius-app 0.1.0-beta.0

package/templates/cloudflare-livekit/web/components/agents-ui/agent-audio-visualizer-bar.tsx

@@ -0,0 +1,43 @@
+// Copyright LiveKit. Apache-2.0. Adapted from Agents UI; see ./PROVENANCE.md.
+import {
+  useMultibandTrackVolume,
+  type TrackReferenceOrPlaceholder,
+} from '@livekit/components-react';
+import type { LocalAudioTrack } from 'livekit-client';
+
+/** Microphone-only Agents UI bar visualizer. No simulated agent-state animation. */
+export function AgentAudioVisualizerBar({
+  audioTrack,
+  enabled,
+}: {
+  audioTrack?: LocalAudioTrack | TrackReferenceOrPlaceholder;
+  enabled: boolean;
+}) {
+  const bands = useMultibandTrackVolume(enabled ? audioTrack : undefined, {
+    bands: 5,
+    loPass: 100,
+    hiPass: 200,
+  });
+  return (
+    <div
+      className="user-audio"
+      role="group"
+      aria-label="Your microphone activity"
+    >
+      <span>You</span>
+      <div className="audio-bars" aria-hidden="true" data-enabled={enabled}>
+        {Array.from({ length: 5 }, (_, index) => (
+          <span
+            key={index}
+            style={{
+              height: `${Math.max(4, (enabled ? Math.min(1, Math.max(0, bands[index] ?? 0)) : 0) * 24)}px`,
+            }}
+          />
+        ))}
+      </div>
+      <span className="audio-label">
+        {enabled ? 'Microphone on' : 'Microphone off'}
+      </span>
+    </div>
+  );
+}

package/templates/cloudflare-livekit/web/components/agents-ui/agent-chat-input.tsx

@@ -0,0 +1,78 @@
+// Copyright LiveKit. Apache-2.0. Extracted/adapted from AgentControlBar; see ./PROVENANCE.md.
+import { useRef, useState } from 'react';
+import { Icon } from '../icons.js';
+export function AgentChatInput({
+  disabled = false,
+  onSend,
+}: {
+  disabled?: boolean;
+  onSend: (message: string) => Promise<unknown>;
+}) {
+  const [message, setMessage] = useState('');
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState('');
+  const sending = useRef(false);
+  const isDisabled = disabled || isSending || !message.trim();
+  const handleSend = async () => {
+    if (isDisabled || sending.current) return;
+    sending.current = true;
+    setIsSending(true);
+    setError('');
+    try {
+      await onSend(message.trim());
+      setMessage('');
+    } catch {
+      setError('Message not sent. Your text is still here — try again.');
+    } finally {
+      sending.current = false;
+      setIsSending(false);
+    }
+  };
+  return (
+    <div className="chat-input-group">
+      <form
+        className="chat-input"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void handleSend();
+        }}
+      >
+        <label className="sr-only" htmlFor="conversation-message">
+          Message your agent
+        </label>
+        <textarea
+          id="conversation-message"
+          rows={1}
+          value={message}
+          disabled={disabled || isSending}
+          placeholder="Type a message…"
+          onChange={(event) => setMessage(event.target.value)}
+          onKeyDown={(event) => {
+            if (
+              event.key === 'Enter' &&
+              !event.shiftKey &&
+              !event.nativeEvent.isComposing &&
+              event.keyCode !== 229
+            ) {
+              event.preventDefault();
+              void handleSend();
+            }
+          }}
+        />
+        <button
+          className="send-button"
+          type="submit"
+          aria-label={isSending ? 'Sending message' : 'Send message'}
+          disabled={isDisabled}
+        >
+          <Icon name="send" />
+        </button>
+      </form>
+      {error && (
+        <p role="alert" className="control-error">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/cloudflare-livekit/web/components/agents-ui/agent-chat-transcript.tsx

@@ -0,0 +1,145 @@
+// Copyright LiveKit. Apache-2.0. Adapted from Agents UI; see ./PROVENANCE.md.
+import { useLayoutEffect, useRef, useState } from 'react';
+import type { AgentState, ReceivedMessage } from '@livekit/components-react';
+export type TranscriptMessage = Pick<
+  ReceivedMessage,
+  'id' | 'timestamp' | 'message'
+> & {
+  isUser: boolean;
+  source?: 'user' | 'agent' | 'avatar';
+  senderIdentity?: string;
+};
+export type ConversationParticipants = {
+  agentIdentity?: string;
+  avatarIdentity?: string;
+};
+export function snapshotMessages(
+  messages: ReceivedMessage[],
+  participants: ConversationParticipants = {},
+  previous: readonly TranscriptMessage[] = [],
+): TranscriptMessage[] {
+  const previousById = new Map(
+    previous.map((message) => [message.id, message]),
+  );
+  return messages.flatMap(({ id, timestamp, message, from, type }) => {
+    if (!message.trim()) return [];
+    const isUser = type === 'userTranscript' || Boolean(from?.isLocal);
+    // The SDK can lose `from` after a participant leaves. Retain attribution by
+    // stream ID so the final update and interrupted text still replace in place.
+    const prior = previousById.get(id);
+    const senderIdentity = from?.identity ?? prior?.senderIdentity;
+    const isAvatar =
+      Boolean(
+        senderIdentity && senderIdentity === participants.avatarIdentity,
+      ) ||
+      Boolean(
+        participants.agentIdentity &&
+        from?.attributes?.['lk.publish_on_behalf'] ===
+          participants.agentIdentity,
+      );
+    if (
+      !isUser &&
+      senderIdentity &&
+      participants.agentIdentity &&
+      senderIdentity !== participants.agentIdentity &&
+      !isAvatar
+    )
+      return [];
+    // The avatar relays speech; service chat isn't a voice-agent response.
+    if (isAvatar && type !== 'agentTranscript') return [];
+    return [
+      {
+        id,
+        timestamp,
+        message,
+        isUser,
+        senderIdentity,
+        source: isUser
+          ? 'user'
+          : isAvatar
+            ? 'avatar'
+            : (prior?.source ?? 'agent'),
+      },
+    ];
+  });
+}
+export function AgentChatTranscript({
+  messages = [],
+  agentState,
+  agentName = 'Agent',
+}: {
+  messages?: readonly TranscriptMessage[];
+  agentState?: AgentState;
+  agentName?: string;
+}) {
+  const viewport = useRef<HTMLDivElement>(null);
+  const atBottom = useRef(true);
+  const [showLatest, setShowLatest] = useState(false);
+  const scrollToLatest = () => {
+    const element = viewport.current;
+    if (element) element.scrollTop = element.scrollHeight;
+    atBottom.current = true;
+    setShowLatest(false);
+  };
+  useLayoutEffect(() => {
+    if (atBottom.current) scrollToLatest();
+    else setShowLatest(true);
+  }, [messages, agentState]);
+  return (
+    <div className="transcript-container">
+      <div
+        ref={viewport}
+        className="transcript-scroll"
+        role="log"
+        aria-label="Conversation transcript"
+        aria-live="polite"
+        onScroll={(event) => {
+          const element = event.currentTarget;
+          atBottom.current =
+            element.scrollHeight - element.scrollTop - element.clientHeight <
+            48;
+          if (atBottom.current) setShowLatest(false);
+        }}
+      >
+        {messages.length === 0 && (
+          <p className="transcript-empty">
+            Your conversation will appear here as you speak or type.
+          </p>
+        )}
+        {messages.map(({ id, timestamp, isUser, message, source }) => (
+          <article
+            key={id}
+            className="transcript-message"
+            data-speaker={isUser ? 'user' : 'agent'}
+            data-source={source}
+          >
+            <div className="message-meta">
+              <span>{isUser ? 'You' : agentName}</span>
+              <time dateTime={new Date(timestamp).toISOString()}>
+                {new Date(timestamp).toLocaleTimeString([], {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </time>
+            </div>
+            <p>{message}</p>
+          </article>
+        ))}
+        {agentState === 'thinking' && (
+          <p className="thinking-indicator" role="status">
+            Thinking<span aria-hidden="true">…</span>
+          </p>
+        )}
+      </div>
+      {showLatest && (
+        <button
+          className="jump-to-latest"
+          type="button"
+          onClick={scrollToLatest}
+        >
+          Latest messages ↓
+        </button>
+      )}
+    </div>
+  );
+}

package/templates/cloudflare-livekit/web/components/agents-ui/agent-disconnect-button.tsx

@@ -0,0 +1,27 @@
+// Copyright LiveKit. Apache-2.0. Adapted from Agents UI; see ./PROVENANCE.md.
+import type { ComponentProps } from 'react';
+import { useSessionContext } from '@livekit/components-react';
+import { Icon } from '../icons.js';
+export function AgentDisconnectButton({
+  onClick,
+  children,
+  ...props
+}: ComponentProps<'button'>) {
+  const { end } = useSessionContext();
+  return (
+    <button
+      type="button"
+      className="disconnect-button"
+      aria-label="End conversation"
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        // The host prevents default to include avatar disposal and preserve messages.
+        if (!event.defaultPrevented) void end().catch(() => undefined);
+      }}
+    >
+      <Icon name="end" />
+      {children}
+    </button>
+  );
+}

package/templates/cloudflare-livekit/web/components/agents-ui/agent-session-provider.tsx

@@ -0,0 +1,29 @@
+// Copyright LiveKit. Apache-2.0. Upstream source and adaptations: ./PROVENANCE.md.
+import {
+  SessionProvider,
+  type UseSessionReturn,
+  RoomAudioRenderer,
+  type SessionProviderProps,
+  type RoomAudioRendererProps,
+} from '@livekit/components-react';
+import type { Room } from 'livekit-client';
+export type AgentSessionProviderProps = SessionProviderProps &
+  RoomAudioRendererProps & {
+    room?: Room;
+    volume?: number;
+    muted?: boolean;
+    session: UseSessionReturn;
+    children: React.ReactNode;
+  };
+export function AgentSessionProvider({
+  session,
+  children,
+  ...roomAudioRendererProps
+}: AgentSessionProviderProps) {
+  return (
+    <SessionProvider session={session}>
+      {children}
+      <RoomAudioRenderer {...roomAudioRendererProps} />
+    </SessionProvider>
+  );
+}

package/templates/cloudflare-livekit/web/components/agents-ui/agent-track-toggle.tsx

@@ -0,0 +1,51 @@
+// Copyright LiveKit. Apache-2.0. Adapted from Agents UI; see ./PROVENANCE.md.
+import { useState, type ComponentProps } from 'react';
+import { Icon } from '../icons.js';
+export type AgentTrackToggleProps = Omit<
+  ComponentProps<'button'>,
+  'onChange'
+> & {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  pending?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+};
+export function AgentTrackToggle({
+  pressed,
+  defaultPressed = false,
+  pending = false,
+  onPressedChange,
+  disabled,
+  ...props
+}: AgentTrackToggleProps) {
+  const [uncontrolledPressed, setUncontrolledPressed] =
+    useState(defaultPressed);
+  const isControlled = pressed !== undefined;
+  const resolvedPressed = pressed ?? uncontrolledPressed;
+  const handlePressedChange = () => {
+    if (!isControlled) setUncontrolledPressed(!resolvedPressed);
+    onPressedChange?.(!resolvedPressed);
+  };
+  return (
+    <button
+      type="button"
+      className="microphone-toggle"
+      aria-label={resolvedPressed ? 'Mute microphone' : 'Enable microphone'}
+      aria-pressed={resolvedPressed}
+      aria-busy={pending}
+      data-state={resolvedPressed ? 'on' : 'off'}
+      disabled={disabled || pending}
+      onClick={handlePressedChange}
+      {...props}
+    >
+      <Icon name={resolvedPressed ? 'mic' : 'mic-off'} />
+      <span>
+        {pending
+          ? 'Please wait'
+          : resolvedPressed
+            ? 'Microphone on'
+            : 'Microphone off'}
+      </span>
+    </button>
+  );
+}

package/templates/cloudflare-livekit/web/components/agents-ui/start-audio-button.tsx

@@ -0,0 +1,13 @@
+// Copyright LiveKit. Apache-2.0. Adapted from Agents UI; see ./PROVENANCE.md.
+import { useStartAudio } from '@livekit/components-react';
+import type { Room } from 'livekit-client';
+import { Icon } from '../icons.js';
+export function StartAudioButton({ room }: { room: Room }) {
+  const { mergedProps } = useStartAudio({ room, props: {} });
+  return (
+    <button type="button" {...mergedProps} className="audio-unlock">
+      <Icon name="audio" />
+      Enable sound
+    </button>
+  );
+}