feat(input-area): send message by enter

src/components/input-area.tsx

@@ -1,9 +1,10 @@
 import type { Message } from '@xsai/shared-chat'
+import type { KeyboardEventHandler } from 'react'
 
 import { Icon } from '@iconify/react'
 import { Button, Flex, IconButton, Text, TextArea } from '@radix-ui/themes'
 import { generateText } from '@xsai/generate-text'
-import { useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { type SubmitHandler, useForm } from 'react-hook-form'
 
 import type { charactersTable } from '../db/schema'
@@ -31,6 +32,8 @@ export const InputArea = ({ character }: { character?: typeof charactersTable.$i
     // watch,
   } = useForm<Inputs>()
 
+  const formRef = useRef<HTMLFormElement>(null)
+
   const onSubmit: SubmitHandler<Inputs> = async ({ content }) => {
     const msg: Message[] = [...messages, { content, role: 'user' }]
 
@@ -48,9 +51,16 @@ export const InputArea = ({ character }: { character?: typeof charactersTable.$i
     setIsTyping(false)
   }
 
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>((e) => {
+    if (e.key !== 'Enter' || e.altKey || e.metaKey || e.shiftKey || e.ctrlKey)
+      return
+    e.preventDefault()
+    formRef.current?.dispatchEvent(new Event('submit', { bubbles: true }))
+  }, [])
+
   return (
     // eslint-disable-next-line ts/no-misused-promises
-    <form data-test-id="input-area" onSubmit={handleSubmit(onSubmit)}>
+    <form data-test-id="input-area" onSubmit={handleSubmit(onSubmit)} ref={formRef}>
       <Flex direction="column" gap="2" style={{ alignSelf: 'flex-end', marginTop: 'auto' }} width="100%">
         {isTyping && (
           <Flex align="center" gap="2">
@@ -64,12 +74,14 @@ export const InputArea = ({ character }: { character?: typeof charactersTable.$i
         )}
         <TextArea
           color="gray"
+          data-test-id="input-area-textarea"
           placeholder="Write a Message..."
           resize="vertical"
           size="3"
           style={{ maxHeight: '50vh' }}
           variant="soft"
           {...register('content', { minLength: 1, required: true })}
+          onKeyDown={handleKeyDown}
         />
         <Flex gap="2">
           <IconButton color="gray" disabled variant="soft">