{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"agent-session-view-01","title":"Agent Session View","author":"LiveKit (https://livekit.com)","description":"A full-screen agent session block with transcript, controls, and I/O media tiles.","dependencies":["@livekit/components-react@^2.0.0","livekit-client@^2.0.0","motion"],"registryDependencies":["utils","@agents-ui/agent-control-bar","@agents-ui/agent-chat-transcript","@agents-ui/agent-audio-visualizer-aura","@agents-ui/agent-audio-visualizer-bar","@agents-ui/agent-audio-visualizer-grid","@agents-ui/agent-audio-visualizer-radial","@agents-ui/agent-audio-visualizer-wave"],"files":[{"path":"components/agents-ui/blocks/agent-session-view-01/components/agent-session-block.tsx","content":"'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence, type MotionProps, motion } from 'motion/react';\nimport { useAgent, useSessionContext, useSessionMessages } from '@livekit/components-react';\nimport { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript';\nimport {\n  AgentControlBar,\n  type AgentControlBarControls,\n} from '@/components/agents-ui/agent-control-bar';\nimport { cn } from '@/lib/utils';\nimport { TileLayout } from './tile-view';\n\nconst BOTTOM_VIEW_MOTION_PROPS: MotionProps = {\n  variants: {\n    visible: {\n      opacity: 1,\n      translateY: '0%',\n    },\n    hidden: {\n      opacity: 0,\n      translateY: '100%',\n    },\n  },\n  initial: 'hidden',\n  animate: 'visible',\n  exit: 'hidden',\n  transition: {\n    duration: 0.3,\n    delay: 0.5,\n    ease: 'easeOut',\n  },\n};\n\nconst CHAT_MOTION_PROPS: MotionProps = {\n  variants: {\n    hidden: {\n      opacity: 0,\n      transition: {\n        ease: 'easeOut',\n        duration: 0.3,\n      },\n    },\n    visible: {\n      opacity: 1,\n      transition: {\n        delay: 0.2,\n        ease: 'easeOut',\n        duration: 0.3,\n      },\n    },\n  },\n  initial: 'hidden',\n  animate: 'visible',\n  exit: 'hidden',\n};\n\nconst SHIMMER_MOTION_PROPS: MotionProps = {\n  variants: {\n    visible: {\n      opacity: 1,\n      transition: {\n        ease: 'easeIn',\n        duration: 0.5,\n        delay: 0.8,\n      },\n    },\n    hidden: {\n      opacity: 0,\n      transition: {\n        ease: 'easeIn',\n        duration: 0.5,\n        delay: 0,\n      },\n    },\n  },\n  initial: 'hidden',\n  animate: 'visible',\n  exit: 'hidden',\n};\n\ninterface FadeProps {\n  top?: boolean;\n  bottom?: boolean;\n  className?: string;\n}\n\nexport function Fade({ top = false, bottom = false, className }: FadeProps) {\n  return (\n    <div\n      className={cn(\n        'from-background pointer-events-none h-4 bg-linear-to-b to-transparent',\n        top && 'bg-linear-to-b',\n        bottom && 'bg-linear-to-t',\n        className,\n      )}\n    />\n  );\n}\n\nexport interface AgentSessionView_01Props {\n  /**\n   * Theme mode forwarded to the aura visualizer (`audioVisualizerType=\"aura\"`) so\n   * the shader's blend mode adapts to the theme mode.\n   * Ignored by other visualizer types.\n   */\n  themeMode?: 'dark' | 'light';\n  /**\n   * Message shown above the controls before the first chat message is sent.\n   *\n   * @default 'Agent is listening, ask it a question'\n   */\n  preConnectMessage?: string;\n  /**\n   * Enables or disables the chat toggle and transcript input controls.\n   *\n   * @default true\n   */\n  supportsChatInput?: boolean;\n  /**\n   * Enables or disables camera controls in the bottom control bar.\n   *\n   * @default true\n   */\n  supportsVideoInput?: boolean;\n  /**\n   * Enables or disables screen sharing controls in the bottom control bar.\n   *\n   * @default true\n   */\n  supportsScreenShare?: boolean;\n  /**\n   * Shows a pre-connect buffer state with a shimmer message before messages appear.\n   *\n   * @default true\n   */\n  isPreConnectBufferEnabled?: boolean;\n\n  /** Selects the visualizer style rendered in the main tile area. */\n  audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';\n  /** Primary hex color used by supported audio visualizer variants. */\n  audioVisualizerColor?: `#${string}`;\n  /** Hue shift intensity used by certain visualizers. */\n  audioVisualizerColorShift?: number;\n  /** Number of bars to render when `audioVisualizerType` is `bar`. */\n  audioVisualizerBarCount?: number;\n  /** Number of rows in the visualizer when `audioVisualizerType` is `grid`. */\n  audioVisualizerGridRowCount?: number;\n  /** Number of columns in the visualizer when `audioVisualizerType` is `grid`. */\n  audioVisualizerGridColumnCount?: number;\n  /** Number of radial bars when `audioVisualizerType` is `radial`. */\n  audioVisualizerRadialBarCount?: number;\n  /** Base radius of the radial visualizer when `audioVisualizerType` is `radial`. */\n  audioVisualizerRadialRadius?: number;\n  /** Stroke width of the wave path when `audioVisualizerType` is `wave`. */\n  audioVisualizerWaveLineWidth?: number;\n  /** Optional class name merged onto the outer `<section>` container. */\n  className?: string;\n}\n\nexport function AgentSessionView_01({\n  preConnectMessage = 'Agent is listening, ask it a question',\n  supportsChatInput = true,\n  supportsVideoInput = true,\n  supportsScreenShare = true,\n  isPreConnectBufferEnabled = true,\n  audioVisualizerType,\n  audioVisualizerColor,\n  audioVisualizerColorShift,\n  audioVisualizerBarCount,\n  audioVisualizerGridRowCount,\n  audioVisualizerGridColumnCount,\n  audioVisualizerRadialBarCount,\n  audioVisualizerRadialRadius,\n  audioVisualizerWaveLineWidth,\n  themeMode,\n  ref,\n  className,\n  ...props\n}: React.ComponentProps<'section'> & AgentSessionView_01Props) {\n  const session = useSessionContext();\n  const { messages } = useSessionMessages(session);\n  const [isChatOpen, setIsChatOpen] = useState(false);\n  const scrollAreaRef = useRef<HTMLDivElement>(null);\n  const { state: agentState } = useAgent();\n\n  const controls: AgentControlBarControls = {\n    leave: true,\n    microphone: true,\n    chat: supportsChatInput,\n    camera: supportsVideoInput,\n    screenShare: supportsScreenShare,\n  };\n\n  useEffect(() => {\n    const lastMessage = messages.at(-1);\n    const lastMessageIsLocal = lastMessage?.from?.isLocal === true;\n\n    if (scrollAreaRef.current && lastMessageIsLocal) {\n      scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;\n    }\n  }, [messages]);\n\n  return (\n    <section\n      ref={ref}\n      className={cn('bg-background relative z-10 h-full w-full overflow-hidden', className)}\n      {...props}\n    >\n      <Fade top className=\"absolute inset-x-4 top-0 z-10 h-40\" />\n      {/* transcript */}\n      <AnimatePresence>\n        {isChatOpen && (\n          <motion.div\n            {...CHAT_MOTION_PROPS}\n            className=\"absolute inset-x-0 top-0 bottom-[135px] overflow-hidden md:bottom-[170px]\"\n          >\n            <AgentChatTranscript\n              agentState={agentState}\n              messages={messages}\n              className=\"mx-auto max-w-2xl **:data-[slot=message-scroller-content]:p-4 **:data-[slot=message-scroller-content]:pt-40! md:**:data-[slot=message-scroller-content]:p-6\"\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* Tile layout */}\n      <TileLayout\n        isChatOpen={isChatOpen}\n        themeMode={themeMode}\n        audioVisualizerType={audioVisualizerType}\n        audioVisualizerColor={audioVisualizerColor}\n        audioVisualizerColorShift={audioVisualizerColorShift}\n        audioVisualizerBarCount={audioVisualizerBarCount}\n        audioVisualizerRadialBarCount={audioVisualizerRadialBarCount}\n        audioVisualizerRadialRadius={audioVisualizerRadialRadius}\n        audioVisualizerGridRowCount={audioVisualizerGridRowCount}\n        audioVisualizerGridColumnCount={audioVisualizerGridColumnCount}\n        audioVisualizerWaveLineWidth={audioVisualizerWaveLineWidth}\n      />\n      {/* Bottom */}\n      <motion.div\n        {...BOTTOM_VIEW_MOTION_PROPS}\n        className=\"absolute inset-x-3 bottom-0 z-50 md:inset-x-12\"\n      >\n        {/* Pre-connect message */}\n        {isPreConnectBufferEnabled && (\n          <AnimatePresence>\n            {messages.length === 0 && (\n              <motion.p\n                key=\"pre-connect-message\"\n                aria-hidden={messages.length > 0}\n                {...SHIMMER_MOTION_PROPS}\n                className=\"shimmer shimmer-duration-2000 pointer-events-none mx-auto block w-full max-w-2xl pb-4 text-center text-sm font-semibold\"\n              >\n                {preConnectMessage}\n              </motion.p>\n            )}\n          </AnimatePresence>\n        )}\n        <div className=\"bg-background relative mx-auto max-w-2xl pb-3 md:pb-12\">\n          <AgentControlBar\n            variant=\"livekit\"\n            controls={controls}\n            isChatOpen={isChatOpen}\n            isConnected={session.isConnected}\n            onDisconnect={session.end}\n            onIsChatOpenChange={setIsChatOpen}\n          />\n        </div>\n      </motion.div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-session-view-01/components/audio-visualizer.tsx","content":"'use client';\n\nimport React from 'react';\nimport { useVoiceAssistant } from '@livekit/components-react';\nimport { motion, type MotionProps } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nimport { AgentAudioVisualizerAura } from '@/components/agents-ui/agent-audio-visualizer-aura';\nimport { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar';\nimport { AgentAudioVisualizerGrid } from '@/components/agents-ui/agent-audio-visualizer-grid';\nimport { AgentAudioVisualizerRadial } from '@/components/agents-ui/agent-audio-visualizer-radial';\nimport { AgentAudioVisualizerWave } from '@/components/agents-ui/agent-audio-visualizer-wave';\n\nconst MotionAgentAudioVisualizerAura = motion.create(AgentAudioVisualizerAura);\nconst MotionAgentAudioVisualizerBar = motion.create(AgentAudioVisualizerBar);\nconst MotionAgentAudioVisualizerGrid = motion.create(AgentAudioVisualizerGrid);\nconst MotionAgentAudioVisualizerRadial = motion.create(AgentAudioVisualizerRadial);\nconst MotionAgentAudioVisualizerWave = motion.create(AgentAudioVisualizerWave);\n\ninterface AudioVisualizerProps extends MotionProps {\n  themeMode?: 'dark' | 'light';\n  isChatOpen: boolean;\n  audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';\n  audioVisualizerColor?: `#${string}`;\n  audioVisualizerColorShift?: number;\n  audioVisualizerWaveLineWidth?: number;\n  audioVisualizerGridRowCount?: number;\n  audioVisualizerGridColumnCount?: number;\n  audioVisualizerRadialBarCount?: number;\n  audioVisualizerRadialRadius?: number;\n  audioVisualizerBarCount?: number;\n  className?: string;\n}\n\nexport function AudioVisualizer({\n  themeMode,\n  isChatOpen,\n  audioVisualizerType = 'bar',\n  audioVisualizerColor,\n  audioVisualizerColorShift = 0.3,\n  audioVisualizerBarCount = 5,\n  audioVisualizerRadialRadius = 100,\n  audioVisualizerRadialBarCount = 25,\n  audioVisualizerGridRowCount = 15,\n  audioVisualizerGridColumnCount = 15,\n  audioVisualizerWaveLineWidth = 3,\n  className,\n  ...props\n}: AudioVisualizerProps) {\n  const { state, audioTrack } = useVoiceAssistant();\n\n  switch (audioVisualizerType) {\n    case 'aura': {\n      return (\n        <MotionAgentAudioVisualizerAura\n          state={state}\n          audioTrack={audioTrack}\n          color={audioVisualizerColor}\n          colorShift={audioVisualizerColorShift}\n          themeMode={themeMode}\n          className={cn('size-[300px] md:size-[450px]', className)}\n          {...props}\n        />\n      );\n    }\n    case 'wave': {\n      return (\n        <motion.div className={className} {...props}>\n          <MotionAgentAudioVisualizerWave\n            state={state}\n            audioTrack={audioTrack}\n            color={audioVisualizerColor}\n            colorShift={audioVisualizerColorShift}\n            lineWidth={isChatOpen ? audioVisualizerWaveLineWidth * 2 : audioVisualizerWaveLineWidth}\n            className=\"size-[300px] md:size-[450px]\"\n          />\n        </motion.div>\n      );\n    }\n    case 'grid': {\n      const totalCount = audioVisualizerGridRowCount * audioVisualizerGridColumnCount;\n\n      let size: 'icon' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n      if (totalCount < 100) {\n        size = 'xl';\n      } else if (totalCount < 200) {\n        size = 'lg';\n      } else if (totalCount < 300) {\n        size = 'md';\n      }\n\n      return (\n        <MotionAgentAudioVisualizerGrid\n          size={size}\n          state={state}\n          color={audioVisualizerColor}\n          audioTrack={audioTrack}\n          rowCount={audioVisualizerGridRowCount}\n          columnCount={audioVisualizerGridColumnCount}\n          radius={Math.round(\n            Math.min(audioVisualizerGridRowCount, audioVisualizerGridColumnCount) / 4,\n          )}\n          className={cn('size-[350px] gap-0 p-8 *:place-self-center md:size-[450px]', className)}\n          {...props}\n        />\n      );\n    }\n    case 'radial': {\n      return (\n        <motion.div className={className} {...props}>\n          <MotionAgentAudioVisualizerRadial\n            size=\"xl\"\n            state={state}\n            color={audioVisualizerColor}\n            audioTrack={audioTrack}\n            radius={audioVisualizerRadialRadius}\n            barCount={audioVisualizerRadialBarCount}\n            className=\"size-[450px]\"\n          />\n        </motion.div>\n      );\n    }\n    default: {\n      let size: 'icon' | 'sm' | 'md' | 'lg' | 'xl' = 'icon';\n      let sizedClassName = cn('size-[300px] md:size-[450px]', className);\n\n      if (audioVisualizerBarCount <= 5) {\n        size = 'xl';\n        sizedClassName = cn('size-[450px] *:min-h-[64px] *:w-[64px] gap-4', className);\n      } else if (audioVisualizerBarCount <= 10) {\n        size = 'lg';\n        sizedClassName = cn('size-[450px]', className);\n      } else if (audioVisualizerBarCount <= 15) {\n        size = 'md';\n        sizedClassName = cn('size-[350px] md:size-[450px]', className);\n      } else if (audioVisualizerBarCount <= 30) {\n        size = 'sm';\n        sizedClassName = cn('size-[300px] md:size-[450px]', className);\n      }\n\n      return (\n        <MotionAgentAudioVisualizerBar\n          size={size}\n          state={state}\n          color={audioVisualizerColor}\n          audioTrack={audioTrack}\n          barCount={audioVisualizerBarCount}\n          className={sizedClassName}\n          {...props}\n        >\n          <span className=\"min-h-2.5 w-2.5 rounded-full transition-colors duration-250 ease-linear bg-current/10 data-[lk-highlighted=true]:bg-current\" />\n        </MotionAgentAudioVisualizerBar>\n      );\n    }\n  }\n}\n","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-session-view-01/components/tile-view.tsx","content":"import React, { useMemo } from 'react';\nimport {\n  useLocalParticipant,\n  useTracks,\n  useVoiceAssistant,\n  VideoTrack,\n  type TrackReference,\n} from '@livekit/components-react';\nimport { Track } from 'livekit-client';\nimport { AnimatePresence, motion, type MotionProps } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { AudioVisualizer } from './audio-visualizer';\n\nconst ANIMATION_TRANSITION: MotionProps['transition'] = {\n  type: 'spring',\n  stiffness: 675,\n  damping: 75,\n  mass: 1,\n};\n\nconst tileViewClassNames = {\n  // GRID\n  // 2 Columns x 3 Rows\n  grid: [\n    'h-full w-full',\n    'grid gap-x-2 place-content-center',\n    'grid-cols-[1fr_1fr] grid-rows-[90px_1fr_90px]',\n  ],\n  // Agent\n  // chatOpen: true,\n  // hasSecondTile: true\n  // layout: Column 1 / Row 1\n  // align: x-end y-center\n  agentChatOpenWithSecondTile: ['col-start-1 row-start-1', 'self-center justify-self-end'],\n  // Agent\n  // chatOpen: true,\n  // hasSecondTile: false\n  // layout: Column 1 / Row 1 / Column-Span 2\n  // align: x-center y-center\n  agentChatOpenWithoutSecondTile: ['col-start-1 row-start-1', 'col-span-2', 'place-content-center'],\n  // Agent\n  // chatOpen: false\n  // layout: Column 1 / Row 1 / Column-Span 2 / Row-Span 3\n  // align: x-center y-center\n  agentChatClosed: ['col-start-1 row-start-1', 'col-span-2 row-span-3', 'place-content-center'],\n  // Second tile\n  // chatOpen: true,\n  // hasSecondTile: true\n  // layout: Column 2 / Row 1\n  // align: x-start y-center\n  secondTileChatOpen: ['col-start-2 row-start-1', 'self-center justify-self-start'],\n  // Second tile\n  // chatOpen: false,\n  // hasSecondTile: false\n  // layout: Column 2 / Row 2\n  // align: x-end y-end\n  secondTileChatClosed: ['col-start-2 row-start-3', 'place-content-end'],\n};\n\nexport function useLocalTrackRef(source: Track.Source) {\n  const { localParticipant } = useLocalParticipant();\n  const publication = localParticipant.getTrackPublication(source);\n  const trackRef = useMemo<TrackReference | undefined>(\n    () => (publication ? { source, participant: localParticipant, publication } : undefined),\n    [source, publication, localParticipant],\n  );\n  return trackRef;\n}\n\ninterface TileLayoutProps {\n  themeMode?: 'dark' | 'light';\n  isChatOpen: boolean;\n  audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';\n  audioVisualizerColor?: `#${string}`;\n  audioVisualizerColorShift?: number;\n  audioVisualizerWaveLineWidth?: number;\n  audioVisualizerGridRowCount?: number;\n  audioVisualizerGridColumnCount?: number;\n  audioVisualizerRadialBarCount?: number;\n  audioVisualizerRadialRadius?: number;\n  audioVisualizerBarCount?: number;\n}\n\nexport function TileLayout({\n  themeMode,\n  isChatOpen,\n  audioVisualizerType,\n  audioVisualizerColor,\n  audioVisualizerColorShift,\n  audioVisualizerBarCount,\n  audioVisualizerRadialBarCount,\n  audioVisualizerRadialRadius,\n  audioVisualizerGridRowCount,\n  audioVisualizerGridColumnCount,\n  audioVisualizerWaveLineWidth,\n}: TileLayoutProps) {\n  const { videoTrack: agentVideoTrack } = useVoiceAssistant();\n  const [screenShareTrack] = useTracks([Track.Source.ScreenShare]);\n  const cameraTrack: TrackReference | undefined = useLocalTrackRef(Track.Source.Camera);\n\n  const isCameraEnabled = cameraTrack && !cameraTrack.publication.isMuted;\n  const isScreenShareEnabled = screenShareTrack && !screenShareTrack.publication.isMuted;\n  const hasSecondTile = isCameraEnabled || isScreenShareEnabled;\n\n  const animationDelay = isChatOpen ? 0 : 0.15;\n  const isAvatar = agentVideoTrack !== undefined;\n  const videoWidth = agentVideoTrack?.publication.dimensions?.width ?? 0;\n  const videoHeight = agentVideoTrack?.publication.dimensions?.height ?? 0;\n\n  return (\n    <div className=\"pointer-events-none absolute inset-x-0 top-8 bottom-32 z-50 md:top-12 md:bottom-40\">\n      <div className=\"relative mx-auto h-full max-w-2xl px-4 md:px-0\">\n        <div className={cn(tileViewClassNames.grid)}>\n          {/* Agent */}\n          <div\n            className={cn([\n              'grid',\n              !isChatOpen && tileViewClassNames.agentChatClosed,\n              isChatOpen && hasSecondTile && tileViewClassNames.agentChatOpenWithSecondTile,\n              isChatOpen && !hasSecondTile && tileViewClassNames.agentChatOpenWithoutSecondTile,\n            ])}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {!isAvatar && (\n                // Audio Agent\n                <motion.div\n                  key=\"agent\"\n                  layoutId=\"agent\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{\n                    ...ANIMATION_TRANSITION,\n                    delay: animationDelay,\n                  }}\n                  className={cn('relative aspect-square h-[90px]')}\n                >\n                  <AudioVisualizer\n                    key=\"audio-visualizer\"\n                    initial={{ scale: 1 }}\n                    animate={{ scale: isChatOpen ? 0.2 : 1 }}\n                    transition={{\n                      ...ANIMATION_TRANSITION,\n                      delay: animationDelay,\n                    }}\n                    audioVisualizerType={audioVisualizerType}\n                    audioVisualizerColor={audioVisualizerColor}\n                    audioVisualizerColorShift={audioVisualizerColorShift}\n                    audioVisualizerBarCount={audioVisualizerBarCount}\n                    audioVisualizerRadialBarCount={audioVisualizerRadialBarCount}\n                    audioVisualizerRadialRadius={audioVisualizerRadialRadius}\n                    audioVisualizerGridRowCount={audioVisualizerGridRowCount}\n                    audioVisualizerGridColumnCount={audioVisualizerGridColumnCount}\n                    audioVisualizerWaveLineWidth={audioVisualizerWaveLineWidth}\n                    themeMode={themeMode}\n                    isChatOpen={isChatOpen}\n                    className={cn(\n                      'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n                      'bg-background rounded-[50px] border border-transparent transition-[border,drop-shadow]',\n                      isChatOpen && 'border-input shadow-2xl/10 delay-200',\n                    )}\n                    style={{ color: audioVisualizerColor }}\n                  />\n                </motion.div>\n              )}\n\n              {isAvatar && (\n                // Avatar Agent\n                <motion.div\n                  key=\"avatar\"\n                  layoutId=\"avatar\"\n                  initial={{\n                    scale: 1,\n                    opacity: 1,\n                    maskImage:\n                      'radial-gradient(circle, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 20px, transparent 20px)',\n                    filter: 'blur(20px)',\n                  }}\n                  animate={{\n                    maskImage:\n                      'radial-gradient(circle, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 500px, transparent 500px)',\n                    filter: 'blur(0px)',\n                    borderRadius: isChatOpen ? 6 : 12,\n                  }}\n                  transition={{\n                    ...ANIMATION_TRANSITION,\n                    delay: animationDelay,\n                    maskImage: {\n                      duration: 1,\n                    },\n                    filter: {\n                      duration: 1,\n                    },\n                  }}\n                  className={cn(\n                    'overflow-hidden bg-black drop-shadow-xl/80',\n                    isChatOpen ? 'h-[90px]' : 'h-auto w-full',\n                  )}\n                >\n                  <VideoTrack\n                    width={videoWidth}\n                    height={videoHeight}\n                    trackRef={agentVideoTrack}\n                    className={cn(isChatOpen && 'size-[90px] object-cover')}\n                  />\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          <div\n            className={cn([\n              'grid',\n              isChatOpen && tileViewClassNames.secondTileChatOpen,\n              !isChatOpen && tileViewClassNames.secondTileChatClosed,\n            ])}\n          >\n            {/* Camera & Screen Share */}\n            <AnimatePresence>\n              {((cameraTrack && isCameraEnabled) || (screenShareTrack && isScreenShareEnabled)) && (\n                <motion.div\n                  key=\"camera\"\n                  layout=\"position\"\n                  layoutId=\"camera\"\n                  initial={{\n                    opacity: 0,\n                    scale: 0,\n                  }}\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                  }}\n                  exit={{\n                    opacity: 0,\n                    scale: 0,\n                  }}\n                  transition={{\n                    ...ANIMATION_TRANSITION,\n                    delay: animationDelay,\n                  }}\n                  className=\"aspect-square size-[90px] drop-shadow-lg/20\"\n                >\n                  <VideoTrack\n                    trackRef={cameraTrack || screenShareTrack}\n                    width={(cameraTrack || screenShareTrack)?.publication.dimensions?.width ?? 0}\n                    height={(cameraTrack || screenShareTrack)?.publication.dimensions?.height ?? 0}\n                    className=\"bg-muted aspect-square size-[90px] rounded-md object-cover\"\n                  />\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-session-view-01/index.ts","content":"export * from './components/agent-session-block';\n","type":"registry:item"}],"categories":["agents","blocks"],"type":"registry:block"}