fix(voice): keep LiveKit TTS tracks alive

2026-06-28 07:20:54 +00:00
parent 46d277d203
commit c4c65f8802
91 changed files with 16863 additions and 21 deletions
@@ -0,0 +1,65 @@
+'use client';
+
+import { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';
+import { type ReceivedMessage, useAgent } from '@livekit/components-react';
+import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript';
+import { cn } from '@/lib/shadcn/utils';
+
+const MotionContainer = motion.create('div');
+
+const CONTAINER_MOTION_PROPS = {
+  variants: {
+    hidden: {
+      opacity: 0,
+      transition: {
+        ease: 'easeOut',
+        duration: 0.3,
+      },
+    },
+    visible: {
+      opacity: 1,
+      transition: {
+        delay: 0.2,
+        ease: 'easeOut',
+        duration: 0.3,
+      },
+    },
+  },
+  initial: 'hidden',
+  animate: 'visible',
+  exit: 'hidden',
+};
+
+interface ChatTranscriptProps {
+  hidden?: boolean;
+  messages?: ReceivedMessage[];
+}
+
+export function ChatTranscript({
+  hidden = false,
+  messages = [],
+  className,
+  ...props
+}: ChatTranscriptProps & Omit<HTMLMotionProps<'div'>, 'ref'>) {
+  const { state: agentState } = useAgent();
+
+  return (
+    <div className="absolute top-0 bottom-[135px] flex w-full flex-col md:bottom-[170px]">
+      <AnimatePresence>
+        {!hidden && (
+          <MotionContainer
+            {...props}
+            {...CONTAINER_MOTION_PROPS}
+            className={cn('flex h-full w-full flex-col gap-4', className)}
+          >
+            <AgentChatTranscript
+              agentState={agentState}
+              messages={messages}
+              className="mx-auto w-full max-w-2xl [&_.is-user>div]:rounded-[22px] [&>div>div]:px-4 [&>div>div]:pt-40 md:[&>div>div]:px-6"
+            />
+          </MotionContainer>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}