From 122382d7d4ca1e361b43d7bc5ec1678fafff723e Mon Sep 17 00:00:00 2001
From: Acbox <acbox0328@gmail.com>
Date: Sun, 29 Mar 2026 18:09:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20improve=20chat=20input=20UX=20?=
 =?UTF-8?q?=E2=80=94=20IME=20composing,=20send=20button,=20file=20upload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Prevent Enter from sending message during IME composing (keyCode 229)
- Remove separator line between textarea and toolbar
- Change send/stop buttons to compact circular icon-only style
- Fix send icon color to white for dark mode visibility
- Add missing hidden file input element so the attach button works
---
 .../src/pages/home/components/chat-area.vue   | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/pages/home/components/chat-area.vue b/apps/web/src/pages/home/components/chat-area.vue
index 71babb01..f7a1e74c 100644
--- a/apps/web/src/pages/home/components/chat-area.vue
+++ b/apps/web/src/pages/home/components/chat-area.vue
@@ -118,6 +118,13 @@
             </div>
           </div>
 
+          <input
+            ref="fileInput"
+            type="file"
+            multiple
+            class="hidden"
+            @change="handleFileInputChange"
+          >
           <section>
             <InputGroup class="bg-transparent overflow-hidden">
               <InputGroupTextarea
@@ -129,7 +136,6 @@
                 @keydown.enter.exact="handleKeydown"
                 @paste="handlePaste"
               />
-              <Separator />
               <InputGroupAddon
                 align="block-end"
                 class="bg-[#FAFAFA] dark:bg-background items-center py-1.5"
@@ -161,23 +167,22 @@
                 <Button
                   v-if="!streaming"
                   type="button"
-                  size="sm"
+                  size="icon"
                   :disabled="(!inputText.trim() && !pendingFiles.length) || !currentBotId || activeChatReadOnly"
                   aria-label="Send message"
-                  class="ml-auto bg-[#8B56E3]"
+                  class="ml-auto size-7 rounded-full bg-[#8B56E3] text-white"
                   @click="handleSend"
                 >
                   <Send
-                    class="size-2"
+                    class="size-3"
                   />
-                  {{ $t('chat.send') }}
                 </Button>
                 <Button
                   v-else
                   type="button"
-                  size="sm"
+                  size="icon"
                   variant="destructive"
-                  class="ml-auto"
+                  class="ml-auto size-7 rounded-full"
                   aria-label="Stop generating response"
                   @click="chatStore.abort()"
                 >
@@ -220,7 +225,7 @@
 <script setup lang="ts">
 import { ref, computed, nextTick, onMounted, provide, useTemplateRef, watchEffect} from 'vue'
 import { LoaderCircle, Image as ImageIcon, File as FileIcon, X, Paperclip, FolderOpen, Send } from 'lucide-vue-next'
-import { ScrollArea, Button, InputGroup, InputGroupAddon, InputGroupTextarea, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription,Separator } from '@memohai/ui'
+import { ScrollArea, Button, InputGroup, InputGroupAddon, InputGroupTextarea, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@memohai/ui'
 import { useChatStore } from '@/store/chat-list'
 import { storeToRefs } from 'pinia'
 import MessageItem from './message-item.vue'
@@ -340,12 +345,22 @@ watchEffect(() => {
 })
 
 function handleKeydown(e: KeyboardEvent) {
-  if (e.isComposing) return
+  if (e.isComposing || e.keyCode === 229) return
   e.preventDefault()
   handleSend()
 }
 
 
+function handleFileInputChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files) {
+    for (const file of Array.from(input.files)) {
+      pendingFiles.value.push(file)
+    }
+  }
+  input.value = ''
+}
+
 function handlePaste(e: ClipboardEvent) {
   const items = e.clipboardData?.items
   if (!items) return