create agent-chat-input

Author: thomasyuill-livekit

…livekit/agent-control-bar/chat-input.tsx …t/agent-control-bar/agent-chat-input.tsxcomponents/livekit/agent-control-bar/chat-input.tsx renamed to components/livekit/agent-control-bar/agent-chat-input.tsx components/livekit/agent-control-bar/chat-input.tsx renamed to components/livekit/agent-control-bar/agent-chat-input.tsx

@@ -23,18 +23,18 @@ const MOTION_PROPS = {
   },
 };
 
-interface ChatInputProps {
+interface AgentChatInputProps {
   chatOpen: boolean;
   isAgentAvailable?: boolean;
   onSend?: (message: string) => void;
 }
 
-export function ChatInput({
+export function AgentChatInput({
   chatOpen,
   isAgentAvailable = false,
   onSend = async () => {},
-}: ChatInputProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
+}: AgentChatInputProps) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState<string>('');
 
@@ -71,23 +71,22 @@ export function ChatInput({
         onSubmit={handleSubmit}
         className="mb-3 flex grow items-end gap-2 rounded-md pl-1 text-sm"
       >
-        <input
+        <textarea
           autoFocus
           ref={inputRef}
-          type="text"
           value={message}
           disabled={!chatOpen}
           placeholder="Type something..."
           onChange={(e) => setMessage(e.target.value)}
-          className="h-8 flex-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          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-start rounded-full"
+          className="self-end rounded-full disabled:cursor-not-allowed"
         >
           {isSending ? (
             <SpinnerIcon className="animate-spin" weight="bold" />

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

@@ -9,7 +9,7 @@ import { AgentTrackToggle, toggleVariants } from '@/components/livekit/agent-tra
 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';
 
@@ -89,7 +89,7 @@ export function AgentControlBar({
     >
       {/* Chat Input */}
       {visibleControls.chat && (
-        <ChatInput
+        <AgentChatInput
           chatOpen={chatOpen}
           isAgentAvailable={isAgentAvailable}
           onSend={handleSendMessage}