st-comp 0.0.255 → 0.0.256

package/packages/VarietyAiHelper/index.vue

@@ -8,6 +8,7 @@ import { UserFilled, Service, Promotion } from "@element-plus/icons-vue";
 
 const stConfig = inject("stConfig");
 const userData = reactive(getUserData());
+const visible = ref(false);
 const emit = defineEmits(["callBack"]);
 const props = defineProps({
   defaultMessage: {
@@ -16,12 +17,13 @@ const props = defineProps({
   },
 });
 
-const visible = ref(false);
+// loading状态
 const isSending = ref(false);
 const isThinking = ref(false);
 
+// 消息队列
 const messageListRef = ref(null);
-const messages = ref([
+const messageList = ref([
   {
     role: "assistant", // AI-assistant, 用户-user
     content: props.defaultMessage,
@@ -33,19 +35,64 @@ const messages = ref([
     firstPackageTime: 0, // 首包响应耗时
   },
 ]);
-const inputMessage = ref("");
 
-// 反馈弹窗相关
+// 用户输入
+const userInput = ref("");
+
+// 反馈弹窗
 const feedbackDialogVisible = ref(false);
 const feedbackContent = ref("");
 const feedbackMessageIndex = ref({}); // 当前点击要反馈的message的索引
 
+// 辅助函数：判断是否可JSON序列化
+const isJSONSerializable = (str) => {
+  if (typeof str !== "string") return false;
+  try {
+    const parsed = JSON.parse(str);
+    return parsed !== null && typeof parsed === "object";
+  } catch {
+    return false;
+  }
+};
+// 辅助函数：解析并格式化JSON内容
+const formatJSONContent = (content) => {
+  if (!isJSONSerializable(content)) return null;
+  try {
+    const jsonData = JSON.parse(content);
+    const { parsedConditions, ...webParams } = jsonData;
+    return {
+      parsedConditions: parsedConditions,
+      webParams,
+    };
+  } catch {
+    return null;
+  }
+};
+// 辅助函数：渲染JSON内容为HTML
+const renderJSONContent = (jsonData) => {
+  if (!jsonData) return "";
+  let html = "";
+  // 渲染 parsedConditions
+  if (jsonData.parsedConditions?.length) {
+    html += '<div class="parsed-conditions">';
+    jsonData.parsedConditions.forEach((text) => {
+      html += `<div class="parsed-conditions-item">${text}</div>`;
+    });
+    html += "</div>";
+  }
+  // 渲染 webParams
+  // html += '<div class="web-params">';
+  // html += `<div>${JSON.stringify(jsonData.webParams)}</div>`;
+  // html += "</div>";
+  return html;
+};
+
 // 反馈弹窗相关函数处理
 const handleFeedbackAction = async (action, messageIndex) => {
   switch (action) {
     // 窗口: 提交(满意)
     case "satisfied": {
-      const message = messages.value[messageIndex];
+      const message = messageList.value[messageIndex];
       const params = {
         userName: userData.username,
         userContent: message.userContent,
@@ -57,7 +104,7 @@ const handleFeedbackAction = async (action, messageIndex) => {
       };
       await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
       ElMessage.success("感谢您的评价！");
-      messages.value[messageIndex].hasFeedback = true;
+      messageList.value[messageIndex].hasFeedback = true;
       break;
     }
     // 窗口: 打开
@@ -68,7 +115,7 @@ const handleFeedbackAction = async (action, messageIndex) => {
     }
     // 窗口: 提交(不满意)
     case "unsatisfied": {
-      const message = messages.value[messageIndex];
+      const message = messageList.value[messageIndex];
       const params = {
         userName: userData.username,
         userContent: message.userContent,
@@ -82,12 +129,12 @@ const handleFeedbackAction = async (action, messageIndex) => {
       await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
       ElMessage.success("感谢您的反馈！我们将持续跟踪并进行优化");
       feedbackDialogVisible.value = false;
-      messages.value[messageIndex].hasFeedback = true;
+      messageList.value[messageIndex].hasFeedback = true;
       break;
     }
     // 自动提交记录跟踪日志
     case "default": {
-      const message = messages.value[messageIndex];
+      const message = messageList.value[messageIndex];
       const params = {
         userName: userData.username,
         userContent: message.userContent,
@@ -102,24 +149,23 @@ const handleFeedbackAction = async (action, messageIndex) => {
     }
   }
 };
-
 // 发送消息
 const sendMessage = async () => {
-  const content = inputMessage.value.trim();
+  const content = userInput.value.trim();
   if (!content) return ElMessage.warning("请输入消息内容");
   if (isSending.value) return;
 
   // 记录用户消息
-  messages.value.push({
+  messageList.value.push({
     role: "user",
     content: content,
     createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
   });
-  inputMessage.value = "";
+  userInput.value = "";
   await scrollToBottom();
 
   // 创建AI消息占位符，记录对应的用户输入
-  messages.value.push({
+  messageList.value.push({
     role: "assistant",
     content: "",
     userContent: content,
@@ -150,10 +196,10 @@ const sendMessage = async () => {
           isSending.value = false;
 
           // 移除占位的AI消息
-          messages.value.pop();
+          messageList.value.pop();
 
           // 添加错误提示消息
-          messages.value.push({
+          messageList.value.push({
             role: "assistant",
             userContent: content,
             content: `❌ ${data}`,
@@ -163,7 +209,7 @@ const sendMessage = async () => {
             resTime: new Date().getTime() - resTime,
             firstPackageTime: 0,
           });
-          handleFeedbackAction("default", messages.value.length - 1);
+          handleFeedbackAction("default", messageList.value.length - 1);
           scrollToBottom();
           return;
         }
@@ -171,7 +217,7 @@ const sendMessage = async () => {
         else if (type === "message") {
           fullResponse += data;
           // 直接更新最后一条AI消息
-          const lastMessage = messages.value[messages.value.length - 1];
+          const lastMessage = messageList.value[messageList.value.length - 1];
           if (lastMessage && lastMessage.role === "assistant") {
             lastMessage.content = fullResponse;
             scrollToBottom();
@@ -185,18 +231,20 @@ const sendMessage = async () => {
         else if (type === "finish") {
           isThinking.value = false;
           isSending.value = false;
-          const lastMessage = messages.value[messages.value.length - 1];
+          const lastMessage = messageList.value[messageList.value.length - 1];
 
           // 显示反馈按钮
           if (lastMessage && lastMessage.role === "assistant") {
             lastMessage.showFeedback = true;
             lastMessage.resTime = new Date().getTime() - resTime;
-            handleFeedbackAction("default", messages.value.length - 1);
+            handleFeedbackAction("default", messageList.value.length - 1);
           }
 
           // 触发回调
           try {
             const jsonResponse = JSON.parse(fullResponse);
+            // 切割掉parsedConditions, 这个字段仅做AI提炼展示使用
+            delete jsonResponse.parsedConditions;
             emit("callBack", jsonResponse);
           } catch (error) {
             emit("callBack", fullResponse);
@@ -207,9 +255,9 @@ const sendMessage = async () => {
   } catch (error) {
     ElMessage.error(`AI响应异常: ${error}`);
     // 移除占位的AI消息
-    messages.value.pop();
+    messageList.value.pop();
     // 添加错误提示消息
-    messages.value.push({
+    messageList.value.push({
       role: "assistant",
       userContent: content,
       content: "❌ 抱歉，AI服务响应异常，请稍后重试。",
@@ -219,14 +267,14 @@ const sendMessage = async () => {
       resTime: new Date().getTime() - resTime,
       firstPackageTime: 0,
     });
-    handleFeedbackAction("default", messages.value.length - 1);
+    handleFeedbackAction("default", messageList.value.length - 1);
     await scrollToBottom();
     isSending.value = false;
     isThinking.value = false;
   }
 };
 
-// 处理键盘事件：Ctrl+Enter 换行，Enter 发送
+// 辅助函数: Ctrl+Enter 换行，Enter 发送
 const handleKeydown = (event) => {
   if (event.key === "Enter") {
     if (event.ctrlKey) {
@@ -235,7 +283,7 @@ const handleKeydown = (event) => {
       const textarea = event.target;
       const start = textarea.selectionStart;
       const end = textarea.selectionEnd;
-      inputMessage.value = inputMessage.value.substring(0, start) + "\n" + inputMessage.value.substring(end);
+      userInput.value = userInput.value.substring(0, start) + "\n" + userInput.value.substring(end);
       // 将光标移动到新插入的换行符之后
       nextTick(() => {
         textarea.selectionStart = textarea.selectionEnd = start + 1;
@@ -247,8 +295,7 @@ const handleKeydown = (event) => {
     }
   }
 };
-
-// 滚动到底部
+// 辅助函数: 滚动到底部
 const scrollToBottom = async () => {
   await nextTick();
   if (messageListRef.value) {
@@ -257,7 +304,7 @@ const scrollToBottom = async () => {
 };
 
 watch(
-  () => messages.value,
+  () => messageList.value,
   () => {
     scrollToBottom();
   },
@@ -285,62 +332,72 @@ defineExpose({
     :modal="false"
     :modal-penetrable="true"
   >
-    <div class="chat-container">
+    <div class="ai-dialog-body">
       <div
         ref="messageListRef"
         class="message-list"
       >
         <div
-          v-for="(message, index) in messages"
+          v-for="(message, index) in messageList"
           :key="index"
-          class="message-item-wrapper"
+          :class="message.role"
+          class="message-item"
         >
-          <div
-            class="message-item"
-            :class="message.role"
-          >
-            <template v-if="message.content">
-              <div class="avatar">
-                <el-avatar
-                  :size="32"
-                  :icon="message.role === 'user' ? UserFilled : Service"
-                />
+          <template v-if="message.content">
+            <!-- 消息头像 -->
+            <div class="avatar">
+              <el-avatar
+                :size="32"
+                :icon="message.role === 'user' ? UserFilled : Service"
+              />
+            </div>
+            <div class="message-content">
+              <!-- 判断是否为可JSON序列化的数据 -->
+              <div
+                v-if="isJSONSerializable(message.content)"
+                class="message-json"
+                v-html="renderJSONContent(formatJSONContent(message.content))"
+              ></div>
+              <!-- 普通文本展示 -->
+              <div
+                v-else
+                class="message-text"
+              >
+                {{ message.content }}
               </div>
-              <div class="message-content">
-                <div class="message-text">{{ message.content }}</div>
-                <div class="message-createTime">{{ message.createTime }}</div>
-                <!-- 反馈按钮(仅AI侧展示) -->
-                <template v-if="message.role === 'assistant'">
-                  <template v-if="message.showFeedback && !message.hasFeedback">
-                    <div class="message-createTime">请问对本轮查询结果是否满意?</div>
-                    <div class="feedback-buttons">
-                      <button
-                        class="feedback-btn satisfied-btn"
-                        @click="handleFeedbackAction('satisfied', index)"
-                      >
-                        <span class="btn-emoji">👍</span>
-                        <span class="btn-text">满意</span>
-                      </button>
-                      <button
-                        class="feedback-btn unsatisfied-btn"
-                        @click="handleFeedbackAction('open', index)"
-                      >
-                        <span class="btn-emoji">👎</span>
-                        <span class="btn-text">不满意</span>
-                      </button>
-                    </div>
-                  </template>
-                  <template v-if="message.showFeedback && message.hasFeedback">
-                    <div class="message-createTime">感谢您进行的评价反馈</div>
-                  </template>
+              <div class="message-createTime">{{ message.createTime }}</div>
+              <!-- 反馈按钮(仅AI侧展示) -->
+              <template v-if="message.role === 'assistant'">
+                <template v-if="message.showFeedback && !message.hasFeedback">
+                  <div class="message-createTime">请问对本轮查询结果是否满意?</div>
+                  <div class="feedback-buttons">
+                    <button
+                      class="feedback-btn satisfied-btn"
+                      @click="handleFeedbackAction('satisfied', index)"
+                    >
+                      <span class="btn-emoji">👍</span>
+                      <span class="btn-text">满意</span>
+                    </button>
+                    <button
+                      class="feedback-btn unsatisfied-btn"
+                      @click="handleFeedbackAction('open', index)"
+                    >
+                      <span class="btn-emoji">👎</span>
+                      <span class="btn-text">不满意</span>
+                    </button>
+                  </div>
                 </template>
-              </div>
-            </template>
-          </div>
+                <template v-if="message.showFeedback && message.hasFeedback">
+                  <div class="message-createTime">感谢您进行的评价反馈</div>
+                </template>
+              </template>
+            </div>
+          </template>
         </div>
 
+        <!-- AI首包响应思考Loading -->
         <div
-          v-if="isThinking && !messages[messages.length - 1]?.content"
+          v-if="isThinking && !messageList[messageList.length - 1]?.content"
           class="message-item assistant"
         >
           <div class="avatar">
@@ -362,7 +419,7 @@ defineExpose({
       <div class="input-area">
         <el-input
           class="message-input"
-          v-model="inputMessage"
+          v-model="userInput"
           type="textarea"
           :rows="4"
           :autosize="{ minRows: 2, maxRows: 4 }"
@@ -418,223 +475,245 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-/* 样式保持不变，和之前一样 */
 .ai-dialog {
-  :deep(.el-dialog) {
-    border-radius: 24px;
-    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
-    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-
-    .el-dialog__header {
-      padding: 20px 24px 12px;
-      margin: 0;
-      border-bottom: 1px solid rgba(102, 126, 234, 0.1);
-      background: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(10px);
-
-      .el-dialog__title {
-        font-size: 18px;
-        font-weight: 600;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+  .ai-dialog-body {
+    display: flex;
+    flex-direction: column;
+    height: 480px;
+    background: transparent;
+    .message-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 24px;
+      &::-webkit-scrollbar {
+        width: 6px;
       }
-    }
-
-    .el-dialog__body {
-      padding: 0;
-    }
-
-    .el-dialog__footer {
-      display: none;
-    }
-  }
-}
-
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 480px;
-  background: transparent;
-}
-
-.message-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px 24px;
-  scroll-behavior: smooth;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 3px;
-
-    &:hover {
-      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
-    }
-  }
-}
-
-.message-item-wrapper {
-  margin-bottom: 20px;
-}
-
-.message-item {
-  display: flex;
-  animation: fadeInUp 0.3s ease-out;
-
-  &.user {
-    flex-direction: row-reverse;
-
-    .avatar {
-      margin-left: 12px;
-      margin-right: 0;
-    }
-
-    .message-content {
-      align-items: flex-end;
-
-      .message-text {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border-radius: 18px 18px 4px 18px;
+      &::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: 3px;
       }
+      &::-webkit-scrollbar-thumb {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3px;
 
-      .message-createTime {
-        text-align: right;
+        &:hover {
+          background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+        }
       }
-    }
-  }
-
-  &.assistant {
-    .avatar {
-      margin-right: 12px;
-    }
-
-    .message-content {
-      align-items: flex-start;
-
-      .message-text {
-        background: white;
-        color: #2c3e50;
-        border-radius: 18px 18px 18px 4px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        border: 1px solid rgba(102, 126, 234, 0.1);
+      // 消息公共样式
+      .message-item {
+        display: flex;
+        animation: fadeInUp 0.3s ease-out;
+        margin-bottom: 20px;
+        .avatar {
+          flex-shrink: 0;
+          :deep(.el-avatar) {
+            background: linear-gradient(135deg, #f0f2ff 0%, #e8ecff 100%);
+            color: #667eea;
+            svg {
+              width: 18px;
+              height: 18px;
+            }
+          }
+        }
+        .message-content {
+          display: flex;
+          flex-direction: column;
+          max-width: 70%;
+          .message-json,
+          .message-text {
+            padding: 10px 16px;
+            font-size: 14px;
+            line-height: 1.5;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+          }
+          .message-createTime {
+            font-size: 11px;
+            color: #9ca3af;
+            margin-top: 6px;
+          }
+          .feedback-buttons {
+            display: flex;
+            gap: 12px;
+            margin-top: 12px;
+            .feedback-btn {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+              padding: 4px 10px;
+              border: none;
+              border-radius: 20px;
+              font-size: 13px;
+              font-weight: 500;
+              cursor: pointer;
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+              background: rgba(255, 255, 255, 0.9);
+              backdrop-filter: blur(10px);
+
+              .btn-emoji {
+                font-size: 16px;
+                transition: transform 0.2s ease;
+              }
+              .btn-text {
+                font-size: 13px;
+              }
+              &:hover {
+                transform: translateY(-2px);
+                .btn-emoji {
+                  transform: scale(1.1);
+                }
+              }
+              &:active {
+                transform: translateY(0);
+              }
+            }
+            .satisfied-btn {
+              background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+              color: #1890ff;
+              border: 1px solid rgba(24, 144, 255, 0.2);
+              box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+
+              &:hover {
+                background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+                border-color: #1890ff;
+                box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+              }
+            }
+            .unsatisfied-btn {
+              background: linear-gradient(135deg, #fff1f0 0%, #ffe7e5 100%);
+              color: #ff4d4f;
+              border: 1px solid rgba(255, 77, 79, 0.2);
+              box-shadow: 0 2px 8px rgba(255, 77, 79, 0.1);
+
+              &:hover {
+                background: linear-gradient(135deg, #ffe7e5 0%, #ffccc7 100%);
+                border-color: #ff4d4f;
+                box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
+              }
+            }
+          }
+        }
       }
-    }
-  }
-
-  .avatar {
-    flex-shrink: 0;
-
-    :deep(.el-avatar) {
-      background: linear-gradient(135deg, #f0f2ff 0%, #e8ecff 100%);
-      color: #667eea;
-
-      svg {
-        width: 18px;
-        height: 18px;
+      // 用户消息
+      .user {
+        flex-direction: row-reverse;
+        .avatar {
+          margin-left: 12px;
+          margin-right: 0;
+        }
+        .message-content {
+          align-items: flex-end;
+          .message-text {
+            color: white;
+            border-radius: 18px 18px 4px 18px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          }
+          .message-createTime {
+            text-align: right;
+          }
+        }
+      }
+      // AI消息
+      .assistant {
+        .avatar {
+          margin-right: 12px;
+        }
+        .message-content {
+          align-items: flex-start;
+          .message-text {
+            background: white;
+            color: #2c3e50;
+            border-radius: 18px 18px 18px 4px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            border: 1px solid rgba(102, 126, 234, 0.1);
+          }
+          .message-json {
+            width: 100%;
+            background: white;
+            color: #2c3e50;
+            border-radius: 18px 18px 18px 4px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            border: 1px solid rgba(102, 126, 234, 0.1);
+            :deep(.parsed-conditions) {
+              margin-top: 10px;
+              .parsed-conditions-item {
+                text-align: center;
+                color: #f56c6c;
+                margin-bottom: 10px;
+                padding: 2px;
+                background-color: rgb(253, 226, 226);
+                border-radius: 4px;
+              }
+            }
+          }
+        }
       }
     }
-  }
+    .input-area {
+      padding: 16px 24px 24px;
+      border-top: 1px solid rgba(102, 126, 234, 0.1);
+      background: rgba(255, 255, 255, 0.9);
+      backdrop-filter: blur(10px);
 
-  .message-content {
-    display: flex;
-    flex-direction: column;
-    max-width: 70%;
-
-    .message-text {
-      padding: 10px 16px;
-      font-size: 14px;
-      line-height: 1.5;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
+      .message-input {
+        :deep(.el-textarea__inner) {
+          border-radius: 16px;
+          border: 1px solid rgba(102, 126, 234, 0.2);
+          background: #ffffff;
+          font-size: 14px;
+          padding: 12px 16px;
+          transition: all 0.3s ease;
+
+          &:focus {
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+          }
 
-    .message-createTime {
-      font-size: 11px;
-      color: #9ca3af;
-      margin-top: 6px;
-      padding: 0 4px;
-    }
+          &::placeholder {
+            color: #cbd5e0;
+          }
+        }
+      }
 
-    .feedback-buttons {
-      display: flex;
-      gap: 12px;
-      margin-top: 12px;
-      .feedback-btn {
+      .input-actions {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        gap: 6px;
-        padding: 4px 10px;
-        border: none;
-        border-radius: 20px;
-        font-size: 13px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        background: rgba(255, 255, 255, 0.9);
-        backdrop-filter: blur(10px);
-
-        .btn-emoji {
-          font-size: 16px;
-          transition: transform 0.2s ease;
-        }
+        margin-top: 12px;
 
-        .btn-text {
-          font-size: 13px;
-        }
-
-        &:hover {
-          transform: translateY(-2px);
+        .input-hint {
+          font-size: 12px;
+          color: #9ca3af;
 
-          .btn-emoji {
-            transform: scale(1.1);
+          span {
+            background: rgba(102, 126, 234, 0.1);
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 11px;
           }
         }
 
-        &:active {
-          transform: translateY(0);
-        }
-      }
-      .satisfied-btn {
-        background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
-        color: #1890ff;
-        border: 1px solid rgba(24, 144, 255, 0.2);
-        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+        .send-btn {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          padding: 8px 20px;
+          font-weight: 500;
+          transition: all 0.3s ease;
 
-        &:hover {
-          background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
-          border-color: #1890ff;
-          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
-        }
-      }
-      .unsatisfied-btn {
-        background: linear-gradient(135deg, #fff1f0 0%, #ffe7e5 100%);
-        color: #ff4d4f;
-        border: 1px solid rgba(255, 77, 79, 0.2);
-        box-shadow: 0 2px 8px rgba(255, 77, 79, 0.1);
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+          }
 
-        &:hover {
-          background: linear-gradient(135deg, #ffe7e5 0%, #ffccc7 100%);
-          border-color: #ff4d4f;
-          box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
+          &:active {
+            transform: translateY(0);
+          }
         }
       }
     }
   }
 }
-
 .typing-indicator {
   display: flex;
   gap: 4px;
@@ -654,76 +733,11 @@ defineExpose({
     &:nth-child(1) {
       animation-delay: -0.32s;
     }
-
     &:nth-child(2) {
       animation-delay: -0.16s;
     }
   }
 }
-
-.input-area {
-  padding: 16px 24px 24px;
-  border-top: 1px solid rgba(102, 126, 234, 0.1);
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-
-  .message-input {
-    :deep(.el-textarea__inner) {
-      border-radius: 16px;
-      border: 1px solid rgba(102, 126, 234, 0.2);
-      background: #ffffff;
-      font-size: 14px;
-      padding: 12px 16px;
-      transition: all 0.3s ease;
-
-      &:focus {
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-      }
-
-      &::placeholder {
-        color: #cbd5e0;
-      }
-    }
-  }
-
-  .input-actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 12px;
-
-    .input-hint {
-      font-size: 12px;
-      color: #9ca3af;
-
-      span {
-        background: rgba(102, 126, 234, 0.1);
-        padding: 4px 8px;
-        border-radius: 12px;
-        font-size: 11px;
-      }
-    }
-
-    .send-btn {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border: none;
-      padding: 8px 20px;
-      font-weight: 500;
-      transition: all 0.3s ease;
-
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-      }
-
-      &:active {
-        transform: translateY(0);
-      }
-    }
-  }
-}
-
 .feedback-dialog-content {
   text-align: center;
   padding: 12px 0;
@@ -752,7 +766,6 @@ defineExpose({
     }
   }
 }
-
 @keyframes fadeInUp {
   from {
     opacity: 0;