create agent-chat-input

Author: thomasyuill-livekit

components/livekit/agent-control-bar/agent-chat-input.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react';
+import { PaperPlaneRightIcon, SpinnerIcon } from '@phosphor-icons/react/dist/ssr';
+import { Button } from '@/components/ui/button';
+
+interface AgentChatInputProps {
+  chatOpen: boolean;
+  isAgentAvailable?: boolean;
+  onSend?: (message: string) => void;
+}
+
+export function AgentChatInput({
+  chatOpen,
+  isAgentAvailable = false,
+  onSend = async () => {},
+}: AgentChatInputProps) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [isSending, setIsSending] = useState(false);
+  const [message, setMessage] = useState<string>('');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      setIsSending(true);
+      await onSend(message);
+      setMessage('');
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const isDisabled = isSending || !isAgentAvailable || message.trim().length === 0;
+
+  useEffect(() => {
+    if (chatOpen && isAgentAvailable) return;
+    // when not disabled refocus on input
+    inputRef.current?.focus();
+  }, [chatOpen, isAgentAvailable]);
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="mb-3 flex grow items-end gap-2 rounded-md pl-1 text-sm"
+    >
+      <textarea
+        autoFocus
+        ref={inputRef}
+        value={message}
+        disabled={!chatOpen}
+        placeholder="Type something..."
+        onChange={(e) => setMessage(e.target.value)}
+        className="field-sizing-content max-h-16 min-h-8 flex-1 py-2 [scrollbar-width:thin] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      />
+      <Button
+        size="icon"
+        type="submit"
+        disabled={isDisabled}
+        variant={isDisabled ? 'secondary' : 'default'}
+        title={isSending ? 'Sending...' : 'Send'}
+        className="self-end rounded-full disabled:cursor-not-allowed"
+      >
+        {isSending ? (
+          <SpinnerIcon className="animate-spin" weight="bold" />
+        ) : (
+          <PaperPlaneRightIcon weight="bold" />
+        )}
+      </Button>
+    </form>
+  );
+}

components/livekit/agent-control-bar/agent-control-bar.tsx

@@ -2,17 +2,38 @@
 
 import { type HTMLAttributes, useCallback, useState } from 'react';
 import { Track } from 'livekit-client';
+import { motion } from 'motion/react';
 import { useChat, useRemoteParticipants } from '@livekit/components-react';
 import { ChatTextIcon, PhoneDisconnectIcon } from '@phosphor-icons/react/dist/ssr';
 import { AgentTrackControl } from '@/components/livekit/agent-track-control';
 import { AgentTrackToggle, toggleVariants } from '@/components/livekit/agent-track-toggle';
 import { Button } from '@/components/ui/button';
 import { Toggle } from '@/components/ui/toggle';
 import { cn } from '@/lib/utils';
-import { ChatInput } from './chat-input';
+import { AgentChatInput } from './agent-chat-input';
 import { UseInputControlsProps, useInputControls } from './hooks/use-input-controls';
 import { usePublishPermissions } from './hooks/use-publish-permissions';
 
+const MOTION_PROPS = {
+  variants: {
+    hidden: {
+      height: 0,
+      opacity: 0,
+      marginBottom: 0,
+    },
+    visible: {
+      height: 'auto',
+      opacity: 1,
+      marginBottom: 12,
+    },
+  },
+  initial: 'hidden',
+  transition: {
+    duration: 0.3,
+    ease: 'easeOut',
+  },
+};
+
 export interface ControlBarControls {
   leave?: boolean;
   camera?: boolean;
@@ -89,11 +110,18 @@ export function AgentControlBar({
     >
       {/* Chat Input */}
       {visibleControls.chat && (
-        <ChatInput
-          chatOpen={chatOpen}
-          isAgentAvailable={isAgentAvailable}
-          onSend={handleSendMessage}
-        />
+        <motion.div
+          {...MOTION_PROPS}
+          inert={!chatOpen}
+          animate={chatOpen ? 'visible' : 'hidden'}
+          className="border-input/50 flex w-full items-start overflow-hidden border-b"
+        >
+          <AgentChatInput
+            chatOpen={chatOpen}
+            isAgentAvailable={isAgentAvailable}
+            onSend={handleSendMessage}
+          />
+        </motion.div>
       )}
 
       <div className="flex gap-1">