st-comp 0.0.273 → 0.0.275

package/packages/VarietyAiHelper/index.vue

@@ -6,7 +6,6 @@ import { inject, ref, nextTick, watch, reactive, computed } from "vue";
 import { sendToNodeVarietyAiHelper } from "../../public/aiTools";
 import { UserFilled, Service, Promotion, Refresh, SuccessFilled } from "@element-plus/icons-vue";
 
-// ==================== 基础配置 ====================
 const stConfig = inject("stConfig");
 const userData = reactive(getUserData());
 const visible = ref(false);
@@ -19,137 +18,40 @@ const props = defineProps({
   },
 });
 
-// ==================== 响应式数据 ====================
 const isSending = ref(false);
 const isThinking = ref(false);
-const nodeProgressList = ref([]);
 const showFinalResult = ref(false);
 const messageListRef = ref(null);
 const messageList = ref([
   {
-    role: "assistant",
+    role: "defaultMessage", // defaultMessage-组件内置, assistant-智能体, user-用户
     content: props.defaultMessage,
     userContent: null,
     showFeedback: false,
-    hasFeedback: false,
     createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
     resTime: 0,
     firstPackageTime: 0,
   },
 ]);
-
+const sessionId = ref(null);
 const userInput = ref("");
+
+// 反馈相关
 const feedbackDialogVisible = ref(false);
 const feedbackContent = ref("");
 const feedbackMessageIndex = ref({});
 
-// ==================== 计算属性 ====================
-const completedCount = computed(() => nodeProgressList.value.filter((n) => n.status === "success").length);
+// 节点相关
+const nodeProgressList = ref([]);
 const totalCount = computed(() => nodeProgressList.value.length);
+const completedCount = computed(() => nodeProgressList.value.filter((n) => n.status === "success").length);
 const progressPercent = computed(() => (totalCount.value ? (completedCount.value / totalCount.value) * 100 : 0));
 const currentStepName = computed(() => {
   const running = nodeProgressList.value.find((n) => n.status === "executing");
   return running ? running.name : "处理中";
 });
 
-// ==================== 工具函数 ====================
-const isJSONSerializable = (str) => {
-  if (typeof str !== "string") return false;
-  try {
-    const parsed = JSON.parse(str);
-    return parsed !== null && typeof parsed === "object";
-  } catch {
-    return false;
-  }
-};
-
-const formatJSONContent = (content) => {
-  if (!isJSONSerializable(content)) return null;
-  try {
-    const jsonData = JSON.parse(content);
-    const { parsedConditions, ...webParams } = jsonData;
-    return { parsedConditions, webParams };
-  } catch {
-    return null;
-  }
-};
-
-const renderJSONContent = (jsonData) => {
-  if (!jsonData) return "";
-  let html = "";
-  if (jsonData.parsedConditions?.length) {
-    html += '<div class="parsed-conditions">';
-    jsonData.parsedConditions.forEach((text) => {
-      html += `<div class="parsed-conditions-item">${text}</div>`;
-    });
-    html += "</div>";
-  }
-  return html;
-};
-
-// ==================== 反馈处理 ====================
-const handleFeedbackAction = async (action, messageIndex) => {
-  switch (action) {
-    case "satisfied": {
-      const message = messageList.value[messageIndex];
-      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
-        userName: userData.username,
-        userContent: message.userContent,
-        aiContent: message.content,
-        type: 1,
-        createTime: message.createTime,
-        resTime: message.resTime,
-        firstPackageTime: message.firstPackageTime,
-        isSolved: 1,
-        logOrigin: 1,
-      });
-      ElMessage.success("感谢您的评价！");
-      messageList.value[messageIndex].hasFeedback = true;
-      break;
-    }
-    case "open": {
-      feedbackMessageIndex.value = messageIndex;
-      feedbackDialogVisible.value = true;
-      break;
-    }
-    case "unsatisfied": {
-      const message = messageList.value[messageIndex];
-      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
-        userName: userData.username,
-        userContent: message.userContent,
-        userSuggestion: feedbackContent.value,
-        aiContent: message.content,
-        type: 2,
-        resTime: message.resTime,
-        createTime: message.createTime,
-        firstPackageTime: message.firstPackageTime,
-        isSolved: 0,
-        logOrigin: 1,
-      });
-      ElMessage.success("感谢您的反馈！我们将持续跟踪并进行优化");
-      feedbackDialogVisible.value = false;
-      messageList.value[messageIndex].hasFeedback = true;
-      break;
-    }
-    case "default": {
-      const message = messageList.value[messageIndex];
-      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
-        userName: userData.username,
-        userContent: message.userContent,
-        userSuggestion: feedbackContent.value,
-        aiContent: message.content,
-        type: null,
-        resTime: message.resTime,
-        createTime: message.createTime,
-        firstPackageTime: message.firstPackageTime,
-        isSolved: 1,
-        logOrigin: 1,
-      });
-    }
-  }
-};
-
-// ==================== 消息发送 ====================
+// 发送消息
 const sendMessage = async () => {
   const content = userInput.value.trim();
   if (!content) return ElMessage.warning("请输入消息内容");
@@ -171,7 +73,6 @@ const sendMessage = async () => {
     content: "",
     userContent: content,
     showFeedback: false,
-    hasFeedback: false,
     createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
     resTime: 0,
     firstPackageTime: 0,
@@ -190,24 +91,10 @@ const sendMessage = async () => {
       baseUrl: stConfig.env.VITE_BASE_URL,
       token: getToken(),
       value: content,
+      sessionId: sessionId.value,
       callback: (type, data) => {
-        if (type === "error") {
-          isThinking.value = false;
-          isSending.value = false;
-          messageList.value.pop();
-          messageList.value.push({
-            role: "assistant",
-            userContent: content,
-            content: `❌ ${data}`,
-            showFeedback: false,
-            hasFeedback: false,
-            createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-            resTime: new Date().getTime() - resTime,
-            firstPackageTime: 0,
-          });
-          handleFeedbackAction("default", messageList.value.length - 1);
-          scrollToBottom();
-          return;
+        if (type === "session") {
+          sessionId.value = data;
         }
         if (type === "node") {
           if (!firstNodeReceived) {
@@ -246,16 +133,23 @@ const sendMessage = async () => {
             lastMessage.resTime = new Date().getTime() - resTime;
             handleFeedbackAction("default", messageList.value.length - 1);
           }
-
-          try {
-            const jsonResponse = JSON.parse(fullResponse);
-            if (jsonResponse.parsedConditions) {
-              delete jsonResponse.parsedConditions;
-            }
-            emit("callBack", jsonResponse);
-          } catch (error) {
-            emit("callBack", fullResponse);
-          }
+        }
+        if (type === "error") {
+          isThinking.value = false;
+          isSending.value = false;
+          messageList.value.pop();
+          messageList.value.push({
+            role: "assistant",
+            userContent: content,
+            content: `❌ ${data}`,
+            showFeedback: false,
+            createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+            resTime: new Date().getTime() - resTime,
+            firstPackageTime: 0,
+          });
+          handleFeedbackAction("default", messageList.value.length - 1);
+          scrollToBottom();
+          return;
         }
       },
     });
@@ -267,7 +161,6 @@ const sendMessage = async () => {
       userContent: content,
       content: "❌ 抱歉，AI服务响应异常，请稍后重试。",
       showFeedback: true,
-      hasFeedback: false,
       createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
       resTime: new Date().getTime() - resTime,
       firstPackageTime: 0,
@@ -278,8 +171,74 @@ const sendMessage = async () => {
     isThinking.value = false;
   }
 };
-
-// ==================== 键盘事件 ====================
+// 查看结果
+const lookResult = (content) => {
+  const { parsedConditions, ...webParams } = JSON.parse(content);
+  console.log({ parsedConditions, webParams });
+  emit("callBack", webParams);
+};
+// 用户反馈
+const handleFeedbackAction = async (action, messageIndex) => {
+  switch (action) {
+    case "satisfied": {
+      const message = messageList.value[messageIndex];
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
+        userName: userData.username,
+        userContent: message.userContent,
+        aiContent: message.content,
+        type: 1,
+        createTime: message.createTime,
+        resTime: message.resTime,
+        firstPackageTime: message.firstPackageTime,
+        isSolved: 1,
+        logOrigin: 1,
+      });
+      ElMessage.success("感谢您的评价！");
+      messageList.value[messageIndex].showFeedback = false;
+      break;
+    }
+    case "open": {
+      feedbackMessageIndex.value = messageIndex;
+      feedbackDialogVisible.value = true;
+      break;
+    }
+    case "unsatisfied": {
+      const message = messageList.value[messageIndex];
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
+        userName: userData.username,
+        userContent: message.userContent,
+        userSuggestion: feedbackContent.value,
+        aiContent: message.content,
+        type: 2,
+        resTime: message.resTime,
+        createTime: message.createTime,
+        firstPackageTime: message.firstPackageTime,
+        isSolved: 0,
+        logOrigin: 1,
+      });
+      ElMessage.success("感谢您的反馈！我们将持续跟踪并进行优化");
+      feedbackDialogVisible.value = false;
+      messageList.value[messageIndex].showFeedback = false;
+      break;
+    }
+    case "default": {
+      const message = messageList.value[messageIndex];
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
+        userName: userData.username,
+        userContent: message.userContent,
+        userSuggestion: feedbackContent.value,
+        aiContent: message.content,
+        type: null,
+        resTime: message.resTime,
+        createTime: message.createTime,
+        firstPackageTime: message.firstPackageTime,
+        isSolved: 1,
+        logOrigin: 1,
+      });
+    }
+  }
+};
+// 键盘事件
 const handleKeydown = (event) => {
   if (event.key === "Enter") {
     if (event.ctrlKey) {
@@ -297,14 +256,37 @@ const handleKeydown = (event) => {
     }
   }
 };
-
-// ==================== 滚动 & 初始化 ====================
+// 滚动到底部
 const scrollToBottom = async () => {
   await nextTick();
   if (messageListRef.value) {
     messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
   }
 };
+// 校验是否支持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;
+  }
+};
+// 动态生成渲染DOM
+const renderJSONContent = (content) => {
+  const { parsedConditions } = JSON.parse(content);
+  // 创建DOM
+  let html = "";
+  if (parsedConditions?.length) {
+    html += '<div class="parsed-conditions">';
+    parsedConditions.forEach((text) => {
+      html += `<div class="parsed-conditions-item">${text}</div>`;
+    });
+    html += "</div>";
+  }
+  return html;
+};
 
 watch(
   () => messageList.value,
@@ -313,7 +295,6 @@ watch(
   },
   { deep: true },
 );
-
 watch(
   () => feedbackDialogVisible.value,
   (newValue) => {
@@ -344,6 +325,7 @@ defineExpose({
     :modal-penetrable="true"
   >
     <div class="ai-dialog-body">
+      <!-- 对话展示 -->
       <div
         ref="messageListRef"
         class="message-list"
@@ -355,14 +337,16 @@ defineExpose({
           class="message-item"
         >
           <template v-if="message.content || (index === messageList.length - 1 && message.role === 'assistant' && nodeProgressList.length > 0)">
+            <!-- 头像 -->
             <div class="avatar">
               <el-avatar
                 :size="32"
                 :icon="message.role === 'user' ? UserFilled : Service"
               />
             </div>
-
+            <!-- 响应 -->
             <div class="message-content">
+              <!-- 节点展示 -->
               <div
                 v-if="index === messageList.length - 1 && message.role === 'assistant' && nodeProgressList.length > 0 && !showFinalResult"
                 class="node-progress"
@@ -397,60 +381,67 @@ defineExpose({
                   <span class="progress-text">第 {{ completedCount }}/{{ totalCount }} 步 · {{ currentStepName }}</span>
                 </div>
               </div>
-
+              <!-- 成功结果展示 -->
               <div
                 v-if="isJSONSerializable(message.content)"
-                class="message-json"
+                class="message-content-json"
                 :class="{ 'result-animation': index === messageList.length - 1 && showFinalResult }"
-                v-html="renderJSONContent(formatJSONContent(message.content))"
-              ></div>
-
+                v-html="renderJSONContent(message.content)"
+              />
+              <!-- 失败结果展示 -->
               <div
                 v-else-if="message.content"
-                class="message-text"
+                class="message-content-text"
                 :class="{ 'result-animation': index === messageList.length - 1 && showFinalResult }"
               >
                 {{ message.content }}
               </div>
 
-              <div class="message-createTime">{{ message.createTime }}</div>
-
-              <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"
+              <!-- 消息底部按钮 -->
+              <div
+                v-if="message.role === 'assistant'"
+                class="message-content-footer"
+              >
+                <!-- 反馈按钮 -->
+                <div
+                  v-if="message.showFeedback"
+                  class="feedback-box"
+                >
+                  <el-tooltip
+                    content="满意"
+                    placement="bottom"
+                  >
+                    <img
+                      src="./images/like.png"
+                      alt="满意"
                       @click="handleFeedbackAction('satisfied', index)"
-                    >
-                      <span class="btn-emoji">👍</span>
-                      <span class="btn-text">满意</span>
-                    </button>
-                    <button
-                      class="feedback-btn unsatisfied-btn"
+                    />
+                  </el-tooltip>
+                  <el-tooltip
+                    content="满意"
+                    placement="bottom"
+                  >
+                    <img
+                      src="./images/like_no.png"
+                      alt="不满意"
                       @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>
-              </template>
+                    />
+                  </el-tooltip>
+                </div>
+                <!-- 查看结果 -->
+                <el-button
+                  v-if="isJSONSerializable(message.content)"
+                  class="confirm-btn"
+                  @click="lookResult(message.content)"
+                >
+                  查看结果
+                </el-button>
+              </div>
             </div>
           </template>
         </div>
-
-        <div
-          v-if="isThinking && nodeProgressList.length === 0 && !messageList[messageList.length - 1]?.content"
-          class="thinking-placeholder"
-        >
-          🤔 正在分析您的需求...
-        </div>
       </div>
-
+      <!-- 用户输入 -->
       <div class="input-area">
         <el-input
           class="message-input"
@@ -480,6 +471,7 @@ defineExpose({
     </div>
   </el-dialog>
 
+  <!-- 窗口: 反馈意见 -->
   <el-dialog
     v-model="feedbackDialogVisible"
     title="📝 反馈意见"
@@ -515,12 +507,11 @@ defineExpose({
     flex-direction: column;
     height: 480px;
     background: transparent;
-
+    // 对话展示
     .message-list {
       flex: 1;
       overflow-y: auto;
       padding: 20px 24px;
-
       &::-webkit-scrollbar {
         width: 6px;
       }
@@ -535,11 +526,9 @@ defineExpose({
           background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
         }
       }
-
       .message-item {
         display: flex;
         margin-bottom: 20px;
-
         .avatar {
           flex-shrink: 0;
           :deep(.el-avatar) {
@@ -551,258 +540,201 @@ defineExpose({
             }
           }
         }
-
         .message-content {
+          width: calc(100% - 88px);
           display: flex;
           flex-direction: column;
-          max-width: 70%;
-        }
-      }
-
-      .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;
-          }
         }
       }
-
+      // 智能体
+      .defaultMessage,
       .assistant {
         .avatar {
           margin-right: 12px;
         }
         .message-content {
           align-items: flex-start;
-        }
-      }
-    }
-
-    .node-progress {
-      background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
-      border: 1px solid rgba(102, 126, 234, 0.15);
-      border-radius: 16px;
-      padding: 12px 16px;
-      margin-bottom: 8px;
-      min-width: 200px;
-      animation: breathe 2s ease-in-out infinite;
-
-      .node-progress-item {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 6px 0;
-        position: relative;
-        animation: slideIn 0.3s ease-out;
-
-        &:not(:last-child)::after {
-          content: "";
-          position: absolute;
-          left: 9px;
-          top: 28px;
-          width: 2px;
-          height: calc(100% - 8px);
-          background: linear-gradient(to bottom, #c7d2fe, transparent);
-        }
-
-        .node-status-icon {
-          position: relative;
-          z-index: 1;
-          border-radius: 50%;
-          width: 20px;
-          height: 20px;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-        }
+          .node-progress {
+            background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+            border: 1px solid rgba(102, 126, 234, 0.15);
+            border-radius: 16px;
+            padding: 12px 16px;
+            margin-bottom: 8px;
+            min-width: 200px;
+            animation: breathe 2s ease-in-out infinite;
+
+            .node-progress-item {
+              display: flex;
+              align-items: center;
+              gap: 10px;
+              padding: 6px 0;
+              position: relative;
+              animation: slideIn 0.3s ease-out;
+
+              &:not(:last-child)::after {
+                content: "";
+                position: absolute;
+                left: 9px;
+                top: 28px;
+                width: 2px;
+                height: calc(100% - 8px);
+                background: linear-gradient(to bottom, #c7d2fe, transparent);
+              }
+
+              .node-status-icon {
+                position: relative;
+                z-index: 1;
+                border-radius: 50%;
+                width: 20px;
+                height: 20px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+              }
+
+              .node-icon {
+                font-size: 12px;
+                &.done {
+                  color: #22c55e;
+                }
+                &.running {
+                  color: #667eea;
+                  animation: spin 0.6s linear infinite;
+                }
+                &.waiting {
+                  color: #d1d5db;
+                  animation: spin 0.8s linear infinite;
+                }
+              }
+
+              .node-name {
+                font-size: 13px;
+                color: #6b7280;
+                line-height: 20px;
+              }
+
+              &:has(.running) .node-name {
+                font-weight: 500;
+                color: #667eea;
+              }
+            }
 
-        .node-icon {
-          font-size: 12px;
-          &.done {
-            color: #22c55e;
+            .progress-footer {
+              margin-top: 12px;
+              padding-top: 8px;
+              border-top: 1px solid rgba(102, 126, 234, 0.1);
+
+              :deep(.el-progress) {
+                margin-bottom: 6px;
+              }
+
+              .progress-text {
+                font-size: 11px;
+                color: #9ca3af;
+                display: block;
+                text-align: center;
+              }
+            }
           }
-          &.running {
-            color: #667eea;
-            animation: spin 0.6s linear infinite;
+          .message-content-json {
+            width: 100%;
+            overflow: hidden;
+            :deep(.parsed-conditions) {
+              margin: 0;
+              padding: 0;
+              .parsed-conditions-item {
+                text-align: center;
+                color: #f56c6c;
+                margin-bottom: 8px;
+                padding: 8px 12px;
+                background: linear-gradient(135deg, #ffebeb 0%, #ffe0e0 100%);
+                border-radius: 12px;
+                font-weight: 500;
+                transition: all 0.2s ease;
+                &:last-child {
+                  margin-bottom: 0;
+                }
+              }
+            }
           }
-          &.waiting {
-            color: #d1d5db;
-            animation: spin 0.8s linear infinite;
+          .message-content-footer {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .feedback-box {
+              display: flex;
+              align-items: center;
+              margin-top: 10px;
+              img {
+                cursor: pointer;
+                width: 26px;
+                height: 26px;
+                margin-right: 10px;
+                &:hover {
+                  transition: 0.2s;
+                  transform: scale(1.1);
+                }
+              }
+            }
+            .confirm-btn {
+              margin-top: 8px;
+              padding: 6px 20px;
+              font-size: 13px;
+              border-radius: 20px;
+              background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+              color: #667eea;
+              border: 1px solid rgba(102, 126, 234, 0.15);
+              cursor: pointer;
+              transition: all 0.2s ease;
+              font-weight: 500;
+
+              &:hover {
+                background: linear-gradient(135deg, #f0f2ff 0%, #e8ecff 100%);
+                border-color: rgba(102, 126, 234, 0.3);
+                transform: translateY(-1px);
+                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+              }
+            }
           }
-        }
-
-        .node-name {
-          font-size: 13px;
-          color: #6b7280;
-          line-height: 20px;
-        }
-
-        &:has(.running) .node-name {
-          font-weight: 500;
-          color: #667eea;
-        }
-      }
-
-      .progress-footer {
-        margin-top: 12px;
-        padding-top: 8px;
-        border-top: 1px solid rgba(102, 126, 234, 0.1);
-
-        :deep(.el-progress) {
-          margin-bottom: 6px;
-        }
-
-        .progress-text {
-          font-size: 11px;
-          color: #9ca3af;
-          display: block;
-          text-align: center;
-        }
-      }
-    }
-
-    .thinking-placeholder {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px 16px;
-      background: rgba(102, 126, 234, 0.08);
-      border-radius: 18px;
-      font-size: 13px;
-      color: #667eea;
-      width: fit-content;
-
-      &::before {
-        content: "";
-        width: 14px;
-        height: 14px;
-        border: 2px solid #667eea;
-        border-top-color: transparent;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-      }
-    }
-
-    .message-json,
-    .message-text {
-      padding: 12px 16px;
-      font-size: 14px;
-      line-height: 1.6;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-      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.2);
-      transition: all 0.3s ease;
-    }
-
-    .message-json {
-      width: 100%;
-      overflow: hidden;
-
-      :deep(.parsed-conditions) {
-        margin: 0;
-        padding: 0;
-
-        .parsed-conditions-item {
-          text-align: center;
-          color: #f56c6c;
-          margin-bottom: 8px;
-          padding: 8px 12px;
-          background: linear-gradient(135deg, #ffebeb 0%, #ffe0e0 100%);
-          border-radius: 12px;
-          font-weight: 500;
-          transition: all 0.2s ease;
-          &:last-child {
-            margin-bottom: 0;
+          .result-animation {
+            animation: resultAppear 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
           }
         }
       }
-    }
-
-    .result-animation {
-      animation: resultAppear 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
-    }
-
-    .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;
+      // 用户
+      .user {
+        flex-direction: row-reverse;
+        .avatar {
+          margin-left: 12px;
+          margin-right: 0;
         }
-        &:hover {
-          transform: translateY(-2px);
-          .btn-emoji {
-            transform: scale(1.1);
+        .message-content {
+          align-items: flex-end;
+          .message-content-text {
+            color: white;
+            border-radius: 18px 18px 4px 18px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           }
         }
-        &: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);
-        }
+      .message-content-json,
+      .message-content-text {
+        box-sizing: border-box;
+        padding: 12px 16px;
+        font-size: 14px;
+        line-height: 1.6;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        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.2);
+        transition: all 0.3s ease;
       }
     }
 
+    // 用户输入
     .input-area {
       padding: 16px 24px 24px;
       backdrop-filter: blur(10px);