-
-
-
- {/* wordmark */}
-
- ),
- // ImageResponse options
- {
- // For convenience, we can re-use the exported opengraph-image
- // size config to also set the ImageResponse's width and height.
- ...size,
- fonts: [
- ...(commitMonoData
- ? [
- {
- name: 'CommitMono',
- data: commitMonoData,
- style: 'normal' as const,
- weight: 400 as const,
- },
- ]
- : []),
- ...(everettLightData
- ? [
- {
- name: 'Everett',
- data: everettLightData,
- style: 'normal' as const,
- weight: 300 as const,
- },
- ]
- : []),
- ],
- }
- );
-}
diff --git a/examples/livekit-gemini-hacker-starter/frontend/app/page.tsx b/examples/livekit-gemini-hacker-starter/frontend/app/page.tsx
deleted file mode 100644
index f465554..0000000
--- a/examples/livekit-gemini-hacker-starter/frontend/app/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { headers } from 'next/headers';
-import { App } from '@/components/app/app';
-import { getAppConfig } from '@/lib/utils';
-
-export default async function Page() {
- const hdrs = await headers();
- const appConfig = await getAppConfig(hdrs);
-
- return
- {/* eslint-disable-next-line jsx-a11y/alt-text */}
- 
-
- {/* logo */}
-
- {/* eslint-disable-next-line jsx-a11y/alt-text */}
- 
-
- {/* title */}
-
-
-
- SANDBOX
-
-
- {pageTitle}
-
-
- {bands.map((band: number, idx: number) =>
- children ? (
-
- {cloneSingleChild(children, {
- 'data-lk-index': idx,
- 'data-lk-highlighted': highlightedIndices.includes(idx),
- style: { height: `${band * 100}%` },
- })}
-
- ) : (
-
- )
- )}
-
- );
-}
diff --git a/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-audio-visualizer-grid.tsx b/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-audio-visualizer-grid.tsx
deleted file mode 100644
index 182aaf6..0000000
--- a/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-audio-visualizer-grid.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-'use client';
-
-import React, {
- type CSSProperties,
- Children,
- type ComponentProps,
- type ReactNode,
- cloneElement,
- isValidElement,
- memo,
- useMemo,
-} from 'react';
-import { type VariantProps, cva } from 'class-variance-authority';
-import { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client';
-import {
- type AgentState,
- type TrackReferenceOrPlaceholder,
- useMultibandTrackVolume,
-} from '@livekit/components-react';
-import {
- type Coordinate,
- useAgentAudioVisualizerGridAnimator,
-} from '@/hooks/agents-ui/use-agent-audio-visualizer-grid';
-import { cn } from '@/lib/shadcn/utils';
-
-function cloneSingleChild(
- children: ReactNode | ReactNode[],
- props?: Record
- {items.map((idx) => (
-
- {children ?? }
-
- ))}
-
- );
-}
diff --git a/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-audio-visualizer-radial.tsx b/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-audio-visualizer-radial.tsx
deleted file mode 100644
index 211e276..0000000
--- a/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-audio-visualizer-radial.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-'use client';
-
-import { type ComponentProps, useMemo } from 'react';
-import { type VariantProps, cva } from 'class-variance-authority';
-import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
-import {
- type AgentState,
- type TrackReferenceOrPlaceholder,
- useMultibandTrackVolume,
-} from '@livekit/components-react';
-import { useAgentAudioVisualizerRadialAnimator } from '@/hooks/agents-ui/use-agent-audio-visualizer-radial';
-import { cn } from '@/lib/shadcn/utils';
-
-export const AgentAudioVisualizerRadialVariants = cva(
- [
- 'relative flex items-center justify-center',
- '[&_[data-lk-index]]:absolute [&_[data-lk-index]]:top-1/2 [&_[data-lk-index]]:left-1/2 [&_[data-lk-index]]:origin-bottom [&_[data-lk-index]]:-translate-x-1/2',
- '[&_[data-lk-index]]:rounded-full [&_[data-lk-index]]:transition-colors [&_[data-lk-index]]:duration-150 [&_[data-lk-index]]:ease-linear [&_[data-lk-index]]:bg-transparent [&_[data-lk-index]]:data-[lk-highlighted=true]:bg-current',
- 'has-data-[lk-state=connecting]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=connecting]:[&_[data-lk-index]]:bg-current/10',
- 'has-data-[lk-state=initializing]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=initializing]:[&_[data-lk-index]]:bg-current/10',
- 'has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=listening]:[&_[data-lk-index]]:bg-current/10 has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300',
- 'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:[&_[data-lk-index]]:bg-current',
- ],
- {
- variants: {
- size: {
- icon: ['h-[24px] gap-[2px]'],
- sm: ['h-[56px] gap-[4px]'],
- md: ['h-[112px] gap-[8px]'],
- lg: ['h-[224px] gap-[16px]'],
- xl: ['h-[448px] gap-[32px]'],
- },
- },
- defaultVariants: {
- size: 'md',
- },
- }
-);
-
-/**
- * Props for the AgentAudioVisualizerRadial component.
- */
-export interface AgentAudioVisualizerRadialProps {
- /**
- * The size of the visualizer.
- * @defaultValue 'md'
- */
- size?: 'icon' | 'sm' | 'md' | 'lg' | 'xl';
- /**
- * The current state of the agent. Determines the animation pattern.
- * @defaultValue 'connecting'
- */
- state?: AgentState;
- /**
- * The radius (distance from center) for the radial bars.
- * If not provided, defaults based on size.
- */
- radius?: number;
- /**
- * The number of bars to display around the circle.
- * Should be divisible by 4 for optimal visual results.
- * If not provided, defaults to 12 for 'icon'/'sm', 24 for others.
- */
- barCount?: number;
- /**
- * The audio track to visualize. Can be a local/remote audio track or a track reference.
- */
- audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
- /**
- * Additional CSS class names to apply to the container.
- */
- className?: string;
-}
-
-/**
- * A radial (circular) audio visualizer that responds to agent state and audio levels.
- * Displays animated bars arranged in a circle that react to the current agent state
- * and audio volume when speaking.
- *
- * @extends ComponentProps<'div'>
- *
- * @example
- * ```tsx
- *
- {bands.map((band, idx) => {
- const angle = (idx / _barCount) * Math.PI * 2;
-
- return (
-
- );
-}
diff --git a/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-chat-indicator.tsx b/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-chat-indicator.tsx
deleted file mode 100644
index 540563b..0000000
--- a/examples/livekit-gemini-hacker-starter/frontend/components/agents-ui/agent-chat-indicator.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { type Ref } from 'react';
-import { type VariantProps, cva } from 'class-variance-authority';
-import { type MotionProps, motion } from 'motion/react';
-import { cn } from '@/lib/shadcn/utils';
-
-const motionAnimationProps = {
- variants: {
- hidden: {
- opacity: 0,
- scale: 0.1,
- transition: {
- duration: 0.1,
- ease: 'linear' as const,
- },
- },
- visible: {
- opacity: [0.5, 1],
- scale: [1, 1.2],
- transition: {
- type: 'spring' as const,
- bounce: 0,
- duration: 0.5,
- repeat: Infinity,
- repeatType: 'mirror' as const,
- },
- },
- },
- initial: 'hidden',
- animate: 'visible',
- exit: 'hidden',
-};
-
-const agentChatIndicatorVariants = cva('bg-muted-foreground inline-block size-2.5 rounded-full', {
- variants: {
- size: {
- sm: 'size-2.5',
- md: 'size-4',
- lg: 'size-6',
- },
- },
- defaultVariants: {
- size: 'md',
- },
-});
-
-/**
- * Props for the AgentChatIndicator component.
- */
-export interface AgentChatIndicatorProps extends MotionProps {
- /**
- * The size of the indicator dot.
- * @defaultValue 'md'
- */
- size?: 'sm' | 'md' | 'lg';
- /**
- * Additional CSS class names to apply to the indicator.
- */
- className?: string;
- /**
- * Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
- */
- ref?: Ref
-
-
- );
- })}
-