♻️(frontend) use newly created chat's input

Refactor and adapt LiveKit original component to use the newly
introduced text area, which is more accessible and
also internationalized.

src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx

@@ -9,6 +9,7 @@ import {
   useMaybeLayoutContext,
 } from '@livekit/components-react'
 import { cloneSingleChild } from '@/features/rooms/utils/cloneSingleChild'
+import { ChatInput } from '@/features/rooms/livekit/components/chat/Input'
 
 /** @public */
 export interface ChatProps
@@ -36,7 +37,7 @@ export function Chat({
   channelTopic,
   ...props
 }: ChatProps) {
-  const inputRef = React.useRef<HTMLInputElement>(null)
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
   const ulRef = React.useRef<HTMLUListElement>(null)
 
   const chatOptions: ChatOptions = React.useMemo(() => {
@@ -48,15 +49,10 @@ export function Chat({
   const layoutContext = useMaybeLayoutContext()
   const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
 
-  async function handleSubmit(event: React.FormEvent) {
+  async function handleSubmit(text: string) {
-    event.preventDefault()
+    if (!send || !text) return
-    if (inputRef.current && inputRef.current.value.trim() !== '') {
+    await send(text)
-      if (send) {
+    inputRef?.current?.focus()
-        await send(inputRef.current.value)
-        inputRef.current.value = ''
-        inputRef.current.focus()
-      }
-    }
   }
 
   React.useEffect(() => {
@@ -127,25 +123,11 @@ export function Chat({
               )
             })}
       </ul>
-      <form className="lk-chat-form" onSubmit={handleSubmit}>
+      <ChatInput
-        <input
+        inputRef={inputRef}
-          className="lk-form-control lk-chat-form-input"
+        onSubmit={(e) => handleSubmit(e)}
-          disabled={isSending}
+        isSending={isSending}
-          ref={inputRef}
+      />
-          type="text"
-          placeholder="Enter a message..."
-          onInput={(ev) => ev.stopPropagation()}
-          onKeyDown={(ev) => ev.stopPropagation()}
-          onKeyUp={(ev) => ev.stopPropagation()}
-        />
-        <button
-          type="submit"
-          className="lk-button lk-chat-form-button"
-          disabled={isSending}
-        >
-          Send
-        </button>
-      </form>
     </div>
   )
 }