feat: 消息页面交互调整

src/renderer/views/home/ChatBox.vue

@@ -60,15 +60,16 @@
                    shadow-[0_1px_0_rgba(0,0,0,0.03)]
                    p-[18px] mt-[8px] flex flex-col justify-between">
         <textarea rows="2" placeholder="给我发布或者布置任务" class="flex-1 resize-none outline-none text-sm"
-          v-model="inputMessage" />
+          v-model="inputMessage" @keyup.enter="sendMessageAction" />
 
         <div class="flex justify-between items-end">
-          <button>
+          <button @click="addAttachmentAction()">
             <RiLink />
           </button>
           <button class="w-[48px] h-[48px] bg-[#F5F7FA] px-2.5 py-1.5  rounded-md flex items-center justify-center"
             @click="sendMessageAction()">
-            <RiSendPlaneFill />
+            <RiStopFill v-if="isSendingMessage" />
+            <RiSendPlaneFill v-else />
           </button>
         </div>
       </div>
@@ -79,21 +80,14 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { RiLink, RiSendPlaneFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
+import { RiLink, RiSendPlaneFill, RiStopFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
 import { onMounted, nextTick, onUnmounted } from "vue";
 import { WebSocketManager } from "@common/WebSocketManager";
 import { MessageRole, ChatMessage } from "./model/ChatModel";
-import { ThrottleUtils, IdUtils } from "@common/index";
+import { IdUtils } from "@common/index";
 
 import { Session } from '../../utils/storage';
 
-/// 输入框组件引用
-const inputAreaRef = ref(null);
-
-const holdKeyboardTimer = ref(null);
-/// focus时，点击页面的时候不收起键盘
-const holdKeyboard = ref(false);
-
 ///（控制滚动位置）
 const scrollTop = ref(99999);
 
@@ -101,6 +95,8 @@ const scrollTop = ref(99999);
 const chatMsgList = ref<ChatMessage[]>([]);
 /// 输入口的输入消息
 const inputMessage = ref("");
+/// 发送消息中标志
+const isSendingMessage = ref(false);
 
 /// agentId 首页接口中获取
 const agentId = ref("1");
@@ -184,8 +180,18 @@ const thumbDownClick = (msg: ChatMessage) => {
   console.log('thumb down', msg)
 }
 
+/// 添加附件按钮事件
+const addAttachmentAction = () => {
+  console.log("添加附件");
+};
+
 //  输入区的发送消息事件
 const sendMessageAction = () => {
+  if (isSendingMessage.value) {
+    sendStopAction();
+    return;
+  }
+
   console.log("输入消息:", inputMessage.value);
   if (!inputMessage.value.trim()) return;
   // 重置消息状态，准备接收新的AI回复
@@ -194,6 +200,13 @@ const sendMessageAction = () => {
   setTimeoutScrollToBottom();
 };
 
+// 停止发送消息事件
+const sendStopAction = () => {
+  console.log("停止发送消息");
+  isSendingMessage.value = false;
+  stopRequest(); // 发送中断停止消息类型
+};
+
 // 页面加载时初始化
 onMounted(() => {
   try {
@@ -390,6 +403,8 @@ const handleWebSocketMessage = (data: any) => {
       pendingMap.delete(ownedMessageId);
     }
 
+    // 结束发送状态
+    isSendingMessage.value = false;
     // 重置会话状态
     isSessionActive.value = false;
     // 清理当前会话的 messageId，避免保留陈旧 id
@@ -632,6 +647,8 @@ const sendChat = async (message: string, isInstruct = false) => {
     pendingMap.delete(currentSessionMessageId);
     isSessionActive.value = false;
   }
+  // 更新发送状态
+  isSendingMessage.value = success;
 };
 
 // 停止请求函数
@@ -706,12 +723,6 @@ const resetConfig = () => {
   }
   pendingTimeouts.clear();
   pendingMap.clear();
-
-  // 清理定时器
-  if (holdKeyboardTimer.value) {
-    clearTimeout(holdKeyboardTimer.value);
-    holdKeyboardTimer.value = null;
-  }
 };