Align user chat with agent model flow

ai_knowledge_base_v2/apps/user-client/src/components/ChatMessage.vue

@@ -14,9 +14,32 @@ const markdown = new MarkdownIt({
   linkify: true,
 });
 
+const assistantParts = computed(() => {
+  if (props.role === "user") {
+    return { reasoning: "", answer: props.content };
+  }
+  const matched = props.content.match(/<think>([\s\S]*?)<\/think>/i);
+  if (matched) {
+    return {
+      reasoning: matched[1].trim(),
+      answer: props.content.replace(matched[0], "").trim(),
+    };
+  }
+  const opening = props.content.match(/<think>([\s\S]*)$/i);
+  if (opening) {
+    return {
+      reasoning: opening[1].trim(),
+      answer: props.content.slice(0, opening.index).trim(),
+    };
+  }
+  return { reasoning: "", answer: props.content };
+});
+
+const renderedReasoning = computed(() => markdown.render(assistantParts.value.reasoning || ""));
+
 const renderedContent = computed(() => {
   if (props.role === "user") return props.content;
-  return markdown.render(props.content || "");
+  return markdown.render(assistantParts.value.answer || "");
 });
 </script>
 
@@ -24,7 +47,13 @@ const renderedContent = computed(() => {
   <article class="message" :class="role">
     <div class="avatar">{{ role === "assistant" ? "AI" : "我" }}</div>
     <div class="bubble">
-      <div v-if="role === 'assistant'" class="content markdown-content" v-html="renderedContent"></div>
+      <template v-if="role === 'assistant'">
+        <details v-if="assistantParts.reasoning" class="reasoning-panel" :open="streaming">
+          <summary>{{ streaming ? "思考中" : "思考过程" }}</summary>
+          <div class="markdown-content reasoning-content" v-html="renderedReasoning"></div>
+        </details>
+        <div class="content markdown-content" v-html="renderedContent"></div>
+      </template>
       <div v-else class="content">{{ renderedContent }}</div>
       <span v-if="streaming" class="typing">正在生成</span>
     </div>