From d9a120442ce48600f2eb45df16e399d55a4faaaf Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Fri, 17 Jul 2026 10:39:35 +0800
Subject: [PATCH] feat: Refactor the front-end dialog box

---
 ui/src/components/chat-plus/api/chat.ts       |  41 ++
 ui/src/components/chat-plus/api/debug.ts      |  44 ++
 ui/src/components/chat-plus/api/index.ts      |   8 +
 ui/src/components/chat-plus/bus.ts            |  37 ++
 .../component/answer-content/index.vue        | 143 +++++++
 .../answer-content/items/failure.vue          |  10 +
 .../component/answer-content/items/form.vue   |  62 +++
 .../component/answer-content/items/index.vue  |  22 +
 .../answer-content/items/reasoning.vue        | 180 ++++++++
 .../component/answer-content/items/text.vue   |  20 +
 .../component/answer-content/items/tool.vue   |  26 ++
 .../chat-plus/component/chat-panel/index.vue  | 167 ++++++++
 .../component/conversation-list/index.vue     |  64 +++
 ui/src/components/chat-plus/composable.ts     | 205 ++++++++++
 ui/src/components/chat-plus/index.scss        | 387 ++++++++++++++++++
 ui/src/components/chat-plus/index.ts          | 183 +++++++++
 ui/src/components/chat-plus/index.vue         | 228 +++++++++++
 ui/src/components/conversation/api/index.ts   |  54 +++
 .../conversation/chat-panel/index.vue         | 371 +++++++++++++++++
 ui/src/components/conversation/composable.ts  | 317 ++++++++++++++
 .../conversation/content-list/index.vue       |  28 ++
 .../components/conversation/content/index.vue |  22 +
 .../conversation/content/items/failure.vue    |  34 ++
 .../conversation/content/items/form.vue       |  89 ++++
 .../conversation/content/items/reasoning.vue  |  63 +++
 .../conversation/content/items/text.vue       |  20 +
 .../conversation/content/items/tool.vue       |  74 ++++
 .../components/conversation/editor/index.vue  | 154 +++++++
 ui/src/components/conversation/index.ts       | 112 +++++
 ui/src/components/conversation/index.vue      | 234 +++++++++++
 .../components/conversation/loading/index.vue |  56 +++
 .../components/conversation/sidebar/index.vue | 265 ++++++++++++
 ui/src/components/conversation/stream.ts      | 134 ++++++
 ui/src/components/markdown/MdRenderer.vue     |  18 +-
 ui/src/views/application-workflow/index.vue   |  57 +--
 35 files changed, 3878 insertions(+), 51 deletions(-)
 create mode 100644 ui/src/components/chat-plus/api/chat.ts
 create mode 100644 ui/src/components/chat-plus/api/debug.ts
 create mode 100644 ui/src/components/chat-plus/api/index.ts
 create mode 100644 ui/src/components/chat-plus/bus.ts
 create mode 100644 ui/src/components/chat-plus/component/answer-content/index.vue
 create mode 100644 ui/src/components/chat-plus/component/answer-content/items/failure.vue
 create mode 100644 ui/src/components/chat-plus/component/answer-content/items/form.vue
 create mode 100644 ui/src/components/chat-plus/component/answer-content/items/index.vue
 create mode 100644 ui/src/components/chat-plus/component/answer-content/items/reasoning.vue
 create mode 100644 ui/src/components/chat-plus/component/answer-content/items/text.vue
 create mode 100644 ui/src/components/chat-plus/component/answer-content/items/tool.vue
 create mode 100644 ui/src/components/chat-plus/component/chat-panel/index.vue
 create mode 100644 ui/src/components/chat-plus/component/conversation-list/index.vue
 create mode 100644 ui/src/components/chat-plus/composable.ts
 create mode 100644 ui/src/components/chat-plus/index.scss
 create mode 100644 ui/src/components/chat-plus/index.ts
 create mode 100644 ui/src/components/chat-plus/index.vue
 create mode 100644 ui/src/components/conversation/api/index.ts
 create mode 100644 ui/src/components/conversation/chat-panel/index.vue
 create mode 100644 ui/src/components/conversation/composable.ts
 create mode 100644 ui/src/components/conversation/content-list/index.vue
 create mode 100644 ui/src/components/conversation/content/index.vue
 create mode 100644 ui/src/components/conversation/content/items/failure.vue
 create mode 100644 ui/src/components/conversation/content/items/form.vue
 create mode 100644 ui/src/components/conversation/content/items/reasoning.vue
 create mode 100644 ui/src/components/conversation/content/items/text.vue
 create mode 100644 ui/src/components/conversation/content/items/tool.vue
 create mode 100644 ui/src/components/conversation/editor/index.vue
 create mode 100644 ui/src/components/conversation/index.ts
 create mode 100644 ui/src/components/conversation/index.vue
 create mode 100644 ui/src/components/conversation/loading/index.vue
 create mode 100644 ui/src/components/conversation/sidebar/index.vue
 create mode 100644 ui/src/components/conversation/stream.ts

diff --git a/ui/src/components/chat-plus/api/chat.ts b/ui/src/components/chat-plus/api/chat.ts
new file mode 100644
index 00000000000..97e461681cf
--- /dev/null
+++ b/ui/src/components/chat-plus/api/chat.ts
@@ -0,0 +1,41 @@
+import { get, postStream, del, put, post } from '@/request/chat/index'
+
+const prefix = (window.MaxKB?.prefix || '/chat') + '/api'
+
+export const open = () =>
+  get('/open', {})
+
+export const chat = (chatId: string, data: any) =>
+  postStream(`${prefix}/chat_message/${chatId}`, data)
+
+export const history = (page: number, size: number) =>
+  get(`/historical_conversation/${page}/${size}`)
+
+export const records = (chatId: string, page: number, size: number) =>
+  get(`/historical_conversation_record/${chatId}/${page}/${size}`)
+
+export const recordDetail = (chatId: string, recordId: string) =>
+  get(`/historical_conversation/${chatId}/record/${recordId}`)
+
+export const vote = (chatId: string, recordId: string, voteStatus: string, reason?: string) =>
+  put(`/vote/chat/${chatId}/chat_record/${recordId}`, {
+    vote_status: voteStatus,
+    ...(reason !== undefined && { vote_reason: reason }),
+  })
+
+export const deleteChat = (chatId: string) =>
+  del(`/historical_conversation/${chatId}`)
+
+export const clearChat = () =>
+  del('/historical_conversation/clear')
+
+export const modifyChat = (chatId: string, data: any) =>
+  put(`/historical_conversation/${chatId}`, data)
+
+export const uploadFile = (file: File, sourceId: string, sourceType: string) => {
+  const fd = new FormData()
+  fd.append('file', file)
+  fd.append('source_id', sourceId)
+  fd.append('source_type', sourceType)
+  return post('/oss/file', fd)
+}
diff --git a/ui/src/components/chat-plus/api/debug.ts b/ui/src/components/chat-plus/api/debug.ts
new file mode 100644
index 00000000000..4cdf5ec570b
--- /dev/null
+++ b/ui/src/components/chat-plus/api/debug.ts
@@ -0,0 +1,44 @@
+import { get, postStream, del, put, post } from '@/request/index'
+import useStore from '@/stores'
+
+const prefix = (window.MaxKB?.prefix || '/admin') + '/api'
+
+export const open = (applicationId: string) => {
+  const { user } = useStore()
+  return get(`/workspace/${user.getWorkspaceId()}/application/${applicationId}/open`, {})
+}
+
+export const chat = (chatId: string, data: any) =>
+  postStream(`${prefix}/chat_message/${chatId}`, data)
+
+export const history = (page: number, size: number) =>
+  get(`/historical_conversation/${page}/${size}`)
+
+export const records = (chatId: string, page: number, size: number) =>
+  get(`/historical_conversation_record/${chatId}/${page}/${size}`)
+
+export const recordDetail = (chatId: string, recordId: string) =>
+  get(`/historical_conversation/${chatId}/record/${recordId}`)
+
+export const vote = (chatId: string, recordId: string, voteStatus: string, reason?: string) =>
+  put(`/vote/chat/${chatId}/chat_record/${recordId}`, {
+    vote_status: voteStatus,
+    ...(reason !== undefined && { vote_reason: reason }),
+  })
+
+export const deleteChat = (chatId: string) =>
+  del(`/historical_conversation/${chatId}`)
+
+export const clearChat = () =>
+  del('/historical_conversation/clear')
+
+export const modifyChat = (chatId: string, data: any) =>
+  put(`/historical_conversation/${chatId}`, data)
+
+export const uploadFile = (file: File, sourceId: string, sourceType: string) => {
+  const fd = new FormData()
+  fd.append('file', file)
+  fd.append('source_id', sourceId)
+  fd.append('source_type', sourceType)
+  return post('/oss/file', fd)
+}
diff --git a/ui/src/components/chat-plus/api/index.ts b/ui/src/components/chat-plus/api/index.ts
new file mode 100644
index 00000000000..a86043a06fd
--- /dev/null
+++ b/ui/src/components/chat-plus/api/index.ts
@@ -0,0 +1,8 @@
+import * as chat from './chat'
+import * as debug from './debug'
+
+export type ChatType = 'CHAT' | 'DEBUG'
+
+const apis = { CHAT: chat, DEBUG: debug } as const
+
+export const useApi = (type: ChatType) => apis[type]
diff --git a/ui/src/components/chat-plus/bus.ts b/ui/src/components/chat-plus/bus.ts
new file mode 100644
index 00000000000..6d726947149
--- /dev/null
+++ b/ui/src/components/chat-plus/bus.ts
@@ -0,0 +1,37 @@
+type Handler = (...args: any[]) => void
+
+class ChatBus {
+  private events = new Map<string, Set<Handler>>()
+
+  on(event: string, handler: Handler) {
+    if (!this.events.has(event)) {
+      this.events.set(event, new Set())
+    }
+    this.events.get(event)!.add(handler)
+    return () => this.off(event, handler)
+  }
+
+  off(event: string, handler: Handler) {
+    this.events.get(event)?.delete(handler)
+  }
+
+  emit(event: string, ...args: any[]) {
+    this.events.get(event)?.forEach((handler) => handler(...args))
+  }
+
+  clear() {
+    this.events.clear()
+  }
+}
+
+export const chatBus = new ChatBus()
+
+export const ChatEvents = {
+  OPEN_CONVERSATION: 'open:conversation',
+  NEW_CONVERSATION: 'new:conversation',
+  DELETE_CONVERSATION: 'delete:conversation',
+  RENAME_CONVERSATION: 'rename:conversation',
+  SEND_MESSAGE: 'send:message',
+  STOP_GENERATING: 'stop:generating',
+  REFRESH_LIST: 'refresh:list',
+} as const
diff --git a/ui/src/components/chat-plus/component/answer-content/index.vue b/ui/src/components/chat-plus/component/answer-content/index.vue
new file mode 100644
index 00000000000..53870d4f08d
--- /dev/null
+++ b/ui/src/components/chat-plus/component/answer-content/index.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="item-content lighter">
+    <div v-for="(answer_text, index) in answer_text_list" :key="index" class="mb-8 flex">
+      <div class="avatar mr-8" v-if="showAvatar">
+        <img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
+        <LogoIcon v-else height="28px" width="28px" />
+      </div>
+      <div
+        class="content w-full"
+        @mouseup="openControl"
+        :style="{ 'padding-right': showUserAvatar ? 'var(--padding-left)' : '0' }"
+      >
+        <template v-if="answer_text.length > 0">
+          <ContentItem
+            v-for="(answer, aIndex) in answer_text"
+            :key="aIndex"
+            :content="answer"
+            :send-message="chatMessage"
+          />
+        </template>
+        <ContentItem
+          v-else-if="
+            (chatRecord.write_ed === undefined || chatRecord.write_ed === true) &&
+            answer_text_list.flat().map((item) => item.content).join('').trim().length === 0
+          "
+          :content="{ content: $t('aiChat.tip.answerMessage') }"
+        />
+        <p v-else-if="chatRecord.is_stop" style="margin: 0.5rem 0">
+          {{ $t('aiChat.tip.stopAnswer') }}
+        </p>
+        <p v-else style="margin: 0.5rem 0">
+          {{ $t('aiChat.tip.answerLoading') }} <span class="dotting"></span>
+        </p>
+        <KnowledgeSourceComponent
+          :data="chatRecord"
+          :application="application"
+          :type="type"
+          :appType="application.type"
+          :executionIsRightPanel="props.executionIsRightPanel"
+          @open-execution-detail="emit('openExecutionDetail')"
+          @openParagraph="emit('openParagraph')"
+          @openParagraphDocument="(val: string) => emit('openParagraphDocument', val)"
+          v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1"
+        />
+      </div>
+    </div>
+
+    <div
+      class="content"
+      :style="{
+        'padding-left': showAvatar ? 'var(--padding-left)' : '0',
+        'padding-right': showUserAvatar ? 'var(--padding-left)' : '0',
+      }"
+      v-if="!selection"
+    >
+      <OperationButton
+        :type="type"
+        :application="application"
+        :chatRecord="chatRecord"
+        @update:chatRecord="(event: any) => emit('update:chatRecord', event)"
+        :loading="loading"
+        :start-chat="startChat"
+        :stop-chat="stopChat"
+        :regenerationChart="regenerationChart"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import KnowledgeSourceComponent from '@/components/ai-chat/component/knowledge-source-component/index.vue'
+import OperationButton from '@/components/ai-chat/component/operation-button/index.vue'
+import ContentItem from './items/index.vue'
+import { type chatType } from '@/api/type/application'
+import bus from '@/bus'
+
+const props = defineProps<{
+  chatRecord: chatType
+  application: any
+  loading: boolean
+  sendMessage: (question: string, other_params_data?: any, chat?: chatType) => Promise<boolean>
+  chatManagement: any
+  type: 'log' | 'ai-chat' | 'debug-ai-chat' | 'share'
+  executionIsRightPanel?: boolean
+  selection?: boolean
+}>()
+
+const emit = defineEmits([
+  'update:chatRecord',
+  'openExecutionDetail',
+  'openParagraph',
+  'openParagraphDocument',
+])
+
+const showAvatar = computed(() => props.application.show_avatar == undefined ? true : props.application.show_avatar)
+const showUserAvatar = computed(() => props.application.show_user_avatar == undefined ? true : props.application.show_user_avatar)
+
+const chatMessage = (question: string, type: 'old' | 'new', other_params_data?: any) => {
+  if (type === 'old') {
+    props.chatRecord.answer_text_list.push([])
+    props.sendMessage(question, other_params_data, props.chatRecord).then(() => {
+      props.chatManagement.open(props.chatRecord.id)
+      props.chatManagement.write(props.chatRecord.id)
+    })
+  } else {
+    props.sendMessage(question, other_params_data)
+  }
+}
+
+const openControl = (event: any) => {
+  if (props.type !== 'log') bus.emit('open-control', event)
+}
+
+const answer_text_list = computed(() => {
+  return props.chatRecord.answer_text_list.map((item: any) => {
+    if (typeof item == 'string') return [{ content: item }]
+    if (item instanceof Array) return item
+    return [item]
+  })
+})
+
+function showSource(row: any) {
+  if (props.type === 'log') return true
+  if (row.write_ed && 500 !== row.status) return true
+  return false
+}
+
+const regenerationChart = (chat: chatType) => {
+  const container = props.chatRecord?.upload_meta || props.chatRecord.execution_details?.find((d: any) => d.type === 'start-node')
+  props.sendMessage(chat.problem_text, {
+    re_chat: true,
+    image_list: container?.image_list || [],
+    document_list: container?.document_list || [],
+    audio_list: container?.audio_list || [],
+    video_list: container?.video_list || [],
+    other_list: container?.other_list || [],
+  })
+}
+
+const stopChat = (chat: chatType) => { props.chatManagement.stop(chat.id) }
+const startChat = (chat: chatType) => { props.chatManagement.write(chat.id) }
+</script>
diff --git a/ui/src/components/chat-plus/component/answer-content/items/failure.vue b/ui/src/components/chat-plus/component/answer-content/items/failure.vue
new file mode 100644
index 00000000000..d06fd85168b
--- /dev/null
+++ b/ui/src/components/chat-plus/component/answer-content/items/failure.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="content-failure mb-8">
+    <span class="failure-icon">⚠️</span>
+    <span>{{ content.content }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ content: any }>()
+</script>
diff --git a/ui/src/components/chat-plus/component/answer-content/items/form.vue b/ui/src/components/chat-plus/component/answer-content/items/form.vue
new file mode 100644
index 00000000000..008c54a558d
--- /dev/null
+++ b/ui/src/components/chat-plus/component/answer-content/items/form.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="form-block mb-8">
+    <DynamicsForm
+      :disabled="is_submit"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormRef"
+      :render_data="form_field_list"
+      label-suffix=":"
+      v-model="form_data"
+      :model="form_data"
+    />
+    <el-button :type="is_submit ? 'info' : 'primary'" :disabled="is_submit" @click="submit">
+      {{ is_submit ? '已提交' : '提交' }}
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, inject } from 'vue'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+
+const chat = inject<any>('chat')
+
+const props = defineProps<{
+  content: any
+}>()
+
+const _submit = ref(false)
+const form_field_list = computed(() => props.content.form_field_list || [])
+const is_submit = computed(() => _submit.value || !!props.content.is_submit)
+const _form_data = ref<any>({})
+const form_data = computed({
+  get: () => (props.content.is_submit ? props.content.form_data : _form_data.value),
+  set: (v) => {
+    _form_data.value = v
+  },
+})
+const dynamicsFormRef = ref()
+
+const submit = () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    _submit.value = true
+    if (chat?.sendMessage) {
+      chat.sendMessage('', 'old', {
+        position: props.content.position,
+        runtime_node_id: props.content.id,
+        chat_record_id: props.content.chat_record_id,
+        node_data: form_data.value,
+      })
+    }
+  })
+}
+</script>
+<style lang="scss" scoped>
+.form-block {
+  background: #ffffff;
+  border: 1px solid var(--el-border-color-lighter, #e4e7ed);
+  border-radius: 8px;
+  padding: 16px;
+}
+</style>
diff --git a/ui/src/components/chat-plus/component/answer-content/items/index.vue b/ui/src/components/chat-plus/component/answer-content/items/index.vue
new file mode 100644
index 00000000000..a61d04a6fcf
--- /dev/null
+++ b/ui/src/components/chat-plus/component/answer-content/items/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <component v-if="typeRenderers[content.type]" :is="typeRenderers[content.type]" :content="content" v-bind="$attrs" />
+  <TextItem v-else :content="content" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import TextItem from './text.vue'
+import ReasoningItem from './reasoning.vue'
+import ToolItem from './tool.vue'
+import FormItem from './form.vue'
+import FailureItem from './failure.vue'
+
+const typeRenderers: Record<string, any> = {
+  TEXT: TextItem,
+  REASONING: ReasoningItem,
+  TOOL: ToolItem,
+  FORM: FormItem,
+  FAILURE: FailureItem,
+}
+
+defineProps<{ content: any }>()
+</script>
diff --git a/ui/src/components/chat-plus/component/answer-content/items/reasoning.vue b/ui/src/components/chat-plus/component/answer-content/items/reasoning.vue
new file mode 100644
index 00000000000..288b21a30bf
--- /dev/null
+++ b/ui/src/components/chat-plus/component/answer-content/items/reasoning.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="reasoning">
+    <button class="rc-head" @click="isExpanded = !isExpanded">
+      <svg class="rc-chevron" :class="{ open: isExpanded }" viewBox="0 0 16 16" fill="none">
+        <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span class="rc-icon" :class="{ spin: loading }">
+        <span v-if="loading" class="rc-loading"></span>
+        <svg v-else viewBox="0 0 16 16" fill="none">
+          <path
+            d="M8 2.5C6.3 2.5 4.8 3.6 4.8 5c0 .8.3 1.5.8 2C4.7 7.5 4.2 8.4 4.2 9.3 4.2 11.3 5.8 13 8 13s3.8-1.7 3.8-3.7c0-.9-.5-1.8-1.4-2.3.5-.5.8-1.2.8-2 0-1.4-1.5-2.5-3.2-2.5Z"
+            stroke="currentColor"
+            stroke-width="1.2"
+            stroke-linejoin="round"
+          />
+          <path d="M8 6.5v2.5M7 10.5h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+        </svg>
+      </span>
+      <span class="rc-title">{{ loading ? '思考中...' : '思考过程' }}</span>
+    </button>
+    <Transition
+      enter-active-class="tc-expand-enter"
+      leave-active-class="tc-expand-leave"
+    >
+      <div v-if="isExpanded" class="rc-body">
+        <p v-if="content" class="rc-text">{{ content }}<span v-if="loading" class="rc-cursor">▍</span></p>
+        <div v-else-if="loading" class="rc-dots"><span></span><span></span><span></span></div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{ content: any }>()
+
+const content = computed(() => props.content.content)
+const loading = computed(() => props.content.status === 'RUNNING')
+const isExpanded = ref(props.content.status === 'RUNNING')
+
+watch(() => props.content.status, (status) => {
+  if (status !== 'RUNNING') {
+    isExpanded.value = false
+  }
+})
+</script>
+
+<style scoped>
+.reasoning {
+  width: 100%;
+}
+
+.rc-head {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-family: inherit;
+  color: var(--t3, #909399);
+  transition: color 0.15s;
+}
+
+.rc-head:hover {
+  color: var(--t1, #303133);
+}
+
+.rc-chevron {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+
+.rc-chevron.open {
+  transform: rotate(90deg);
+}
+
+.rc-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--t3, #909399);
+}
+
+.rc-icon.spin {
+  color: var(--t2, #606266);
+}
+
+.rc-loading {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--t3, #909399);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.rc-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--t2, #606266);
+  white-space: nowrap;
+}
+
+.rc-body {
+  padding: 6px 0 4px 8px;
+}
+
+.rc-text {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--t2, #606266);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.rc-cursor {
+  color: var(--t3, #909399);
+  animation: blink 0.8s step-start infinite;
+  font-size: 13px;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.rc-dots {
+  display: flex;
+  gap: 4px;
+  padding: 4px 2px;
+}
+
+.rc-dots span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--t3, #909399);
+  animation: dot-pulse 1.2s ease-in-out infinite;
+}
+
+.rc-dots span:nth-child(2) { animation-delay: 0.2s; }
+.rc-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dot-pulse {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+.tc-expand-enter {
+  animation: tc-open 0.2s ease-out;
+  overflow: hidden;
+}
+
+.tc-expand-leave {
+  animation: tc-close 0.15s ease-in forwards;
+  overflow: hidden;
+}
+
+@keyframes tc-open {
+  from { opacity: 0; max-height: 0; }
+  to { opacity: 1; max-height: 600px; }
+}
+
+@keyframes tc-close {
+  from { opacity: 1; max-height: 600px; }
+  to { opacity: 0; max-height: 0; }
+}
+</style>
diff --git a/ui/src/components/chat-plus/component/answer-content/items/text.vue b/ui/src/components/chat-plus/component/answer-content/items/text.vue
new file mode 100644
index 00000000000..862503e4169
--- /dev/null
+++ b/ui/src/components/chat-plus/component/answer-content/items/text.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="content-text-item">
+    <MdPreview editorId="chat-plus-text" :modelValue="content.content || ''" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/preview.css'
+
+defineProps<{
+  content: any
+}>()
+</script>
+
+<style scoped>
+.content-text-item :deep(.md-editor) {
+  background: transparent;
+}
+</style>
diff --git a/ui/src/components/chat-plus/component/answer-content/items/tool.vue b/ui/src/components/chat-plus/component/answer-content/items/tool.vue
new file mode 100644
index 00000000000..cab8ebb5c30
--- /dev/null
+++ b/ui/src/components/chat-plus/component/answer-content/items/tool.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="tool-block mb-8">
+    <div class="tool-header" @click="expanded = !expanded">
+      <span class="tool-icon">🔧</span>
+      <span class="tool-name">{{ content.content || '工具调用' }}</span>
+      <span v-if="content.status" class="tool-status">{{ content.status }}</span>
+      <span class="tool-arrow">{{ expanded ? '▲' : '▼' }}</span>
+    </div>
+    <div v-show="expanded" class="tool-body">
+      <div v-if="content.arguments" class="tool-section">
+        <div class="tool-label">参数</div>
+        <pre class="tool-pre">{{ content.arguments }}</pre>
+      </div>
+      <div v-if="content.result" class="tool-section">
+        <div class="tool-label">结果</div>
+        <pre class="tool-pre">{{ content.result }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+defineProps<{ content: any }>()
+const expanded = ref(false)
+</script>
diff --git a/ui/src/components/chat-plus/component/chat-panel/index.vue b/ui/src/components/chat-plus/component/chat-panel/index.vue
new file mode 100644
index 00000000000..dafb89c5e86
--- /dev/null
+++ b/ui/src/components/chat-plus/component/chat-panel/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="chat-panel">
+    <!-- Header -->
+    <div class="chat-panel__header">
+      <slot name="header">
+        <div class="default-header">
+          <button v-if="showBack" class="header-btn" @click="$emit('back')">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+          <button class="header-btn" @click="$emit('toggle')">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+            </svg>
+          </button>
+          <div class="header-info">
+            <img v-if="icon" :src="icon" class="header-icon" />
+            <span class="header-title">{{ title || '新对话' }}</span>
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Messages -->
+    <div ref="msgBoxRef" class="chat-panel__messages" @scroll="onScroll">
+      <div class="chat-panel__content">
+        <slot name="empty" v-if="messages.length === 0 && !loading">
+          <div class="default-empty">
+            <p class="empty-title">{{ title || 'AI 助手' }}</p>
+            <p class="empty-sub">有什么可以帮你的？</p>
+          </div>
+        </slot>
+
+        <template v-else>
+          <div
+            v-for="(msg, i) in messages"
+            :key="msg.id || i"
+            :class="['msg-row', msg.role]"
+          >
+            <slot name="message" :message="msg" :index="i">
+              <div class="msg-content">{{ msg.content }}</div>
+            </slot>
+          </div>
+
+          <div v-if="streamLoading" class="msg-row ASSISTANT">
+            <slot name="loading">
+              <div class="default-loading">
+                <span></span><span></span><span></span>
+              </div>
+            </slot>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Input -->
+    <div class="chat-panel__input">
+      <slot name="input">
+        <div class="default-input">
+          <textarea
+            ref="inputRef"
+            v-model="inputText"
+            :disabled="streamLoading"
+            :placeholder="streamLoading ? '正在回复中...' : '输入消息...'"
+            @keydown="onKeydown"
+            rows="1"
+          />
+          <button
+            v-if="!streamLoading"
+            class="send-btn"
+            :class="{ active: canSend }"
+            :disabled="!canSend"
+            @click="send"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M8 14V2M3 7l5-5 5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+          <button v-else class="send-btn stop" @click="$emit('stop')">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <rect x="2" y="2" width="10" height="10" rx="2" fill="currentColor"/>
+            </svg>
+          </button>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
+import { Scroll } from '../../index'
+
+const props = withDefaults(
+  defineProps<{
+    messages?: any[]
+    loading?: boolean
+    streamLoading?: boolean
+    title?: string
+    icon?: string
+    showBack?: boolean
+  }>(),
+  {
+    messages: () => [],
+    loading: false,
+    streamLoading: false,
+    showBack: false,
+  },
+)
+
+const emit = defineEmits<{
+  send: [text: string]
+  stop: []
+  back: []
+  toggle: []
+  scroll: []
+}>()
+
+const inputText = ref('')
+const inputRef = ref<HTMLTextAreaElement | null>(null)
+const msgBoxRef = ref<HTMLElement | null>(null)
+
+let scroll: InstanceType<typeof Scroll> | null = null
+
+const canSend = computed(() => inputText.value.trim() && !props.streamLoading)
+
+onMounted(() => {
+  if (msgBoxRef.value) {
+    scroll = new Scroll(msgBoxRef.value)
+  }
+})
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
+    e.preventDefault()
+    send()
+  }
+}
+
+const send = () => {
+  if (!canSend.value) return
+  emit('send', inputText.value.trim())
+  inputText.value = ''
+  nextTick(() => {
+    if (inputRef.value) {
+      inputRef.value.style.height = 'auto'
+    }
+  })
+}
+
+const onScroll = () => {
+  const el = msgBoxRef.value
+  if (!el || el.scrollTop > 60) return
+  emit('scroll')
+}
+
+const scrollToBottom = () => {
+  scroll?.forceBottom()
+}
+
+watch(() => props.messages.length, () => {
+  nextTick(() => scroll?.scrollBottom())
+})
+
+defineExpose({ scrollToBottom })
+</script>
diff --git a/ui/src/components/chat-plus/component/conversation-list/index.vue b/ui/src/components/chat-plus/component/conversation-list/index.vue
new file mode 100644
index 00000000000..0c9df599b35
--- /dev/null
+++ b/ui/src/components/chat-plus/component/conversation-list/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="conversation-list" :class="{ open: isOpen }">
+    <div class="conv-header">
+      <button class="new-chat-btn" @click="handleNew">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+        </svg>
+        <span>新对话</span>
+      </button>
+    </div>
+
+    <div class="conv-body">
+      <div
+        v-for="item in conversations"
+        :key="item.id"
+        :class="['conv-item', { active: item.id === currentId }]"
+        @click="handleOpen(item.id)"
+      >
+        <div class="conv-item-name">{{ item.name || '新对话' }}</div>
+        <div class="conv-item-actions">
+          <button class="item-btn" @click.stop="handleRename(item)">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <path d="M10 2l2 2-7 7H3v-2l7-7z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+          <button class="item-btn danger" @click.stop="handleDelete(item.id)">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <path d="M3 4h8M5 4V3a1 1 0 011-1h2a1 1 0 011 1v1M4 4v7a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { chatBus, ChatEvents } from '../../bus'
+
+defineProps<{
+  conversations: any[]
+  currentId?: string
+  isOpen?: boolean
+}>()
+
+const handleNew = () => {
+  chatBus.emit(ChatEvents.NEW_CONVERSATION)
+}
+
+const handleOpen = (id: string) => {
+  chatBus.emit(ChatEvents.OPEN_CONVERSATION, id)
+}
+
+const handleDelete = (id: string) => {
+  chatBus.emit(ChatEvents.DELETE_CONVERSATION, id)
+}
+
+const handleRename = (item: any) => {
+  const name = prompt('重命名对话', item.name || '')
+  if (name !== null && name.trim()) {
+    chatBus.emit(ChatEvents.RENAME_CONVERSATION, item.id, name.trim())
+  }
+}
+</script>
diff --git a/ui/src/components/chat-plus/composable.ts b/ui/src/components/chat-plus/composable.ts
new file mode 100644
index 00000000000..42cc85d3855
--- /dev/null
+++ b/ui/src/components/chat-plus/composable.ts
@@ -0,0 +1,205 @@
+import { ref, computed, reactive, type Ref, unref } from 'vue'
+import { ConversationStream, aggregators } from './index'
+import { useApi, type ChatType } from './api'
+
+export function useChat(type: ChatType | string, applicationId?: string | Ref<string>) {
+  const apiType: ChatType = type === 'CHAT' || type === 'ai-chat' ? 'CHAT' : 'DEBUG'
+  const api = useApi(apiType)
+
+  const conversations = ref<any[]>([])
+  const currentChatId = ref('')
+  const messages = ref<any[]>([])
+  const msgLoading = ref(false)
+  const streamLoading = ref(false)
+  let activeStream: any = null
+
+  const currentConversation = computed(() =>
+    conversations.value.find((c) => c.id === currentChatId.value),
+  )
+
+  const getApplicationId = () => unref(applicationId)
+
+  // ── 会话管理 ─────────────────────────────────────────
+  const loadConversations = async (page = 1, size = 50) => {
+    const res = await api.history(page, size)
+    conversations.value = res.data?.records || []
+    return conversations.value
+  }
+
+  const openChat = async (appId?: string) => {
+    const res = await api.open(appId || getApplicationId())
+    currentChatId.value = res.data
+    messages.value = []
+    return res.data
+  }
+
+  const switchChat = async (chatId: string) => {
+    currentChatId.value = chatId
+    await loadMessages(chatId)
+    return chatId
+  }
+
+  const deleteChat = async (chatId: string) => {
+    await api.deleteChat(chatId)
+    conversations.value = conversations.value.filter((c) => c.id !== chatId)
+    if (currentChatId.value === chatId) {
+      currentChatId.value = conversations.value[0]?.id || ''
+    }
+  }
+
+  const renameChat = async (chatId: string, name: string) => {
+    await api.modifyChat(chatId, { name })
+    const chat = conversations.value.find((c) => c.id === chatId)
+    if (chat) chat.name = name
+  }
+
+  // ── 消息管理 ─────────────────────────────────────────
+  const loadMessages = async (chatId?: string, page = 1, size = 20) => {
+    const cid = chatId || currentChatId.value
+    if (!cid) return []
+    msgLoading.value = true
+    try {
+      const res = await api.records(cid, page, size)
+      messages.value = res.data?.records || []
+      return messages.value
+    } finally {
+      msgLoading.value = false
+    }
+  }
+
+  const pushMessage = (msg: any) => {
+    messages.value.push(msg)
+  }
+
+  const createAnswerMessage = () => {
+    return reactive({
+      role: 'ASSISTANT' as const,
+      content: [],
+      id: '',
+      write_ed: false,
+    })
+  }
+
+  const getOrCreateLastAnswerMessage = () => {
+    const last = messages.value[messages.value.length - 1]
+    if (last && last.role === 'ASSISTANT') {
+      return last
+    }
+    const msg = createAnswerMessage()
+    pushMessage(msg)
+    return msg
+  }
+
+  // ── 流式聚合 ─────────────────────────────────────────
+  const appendChunk = (message: any, chunk: any) => {
+    if (!Array.isArray(chunk.content)) return
+
+    const indexList: string[] = message.content.map(
+      (c: any) => c.id + '_' + c.type,
+    )
+
+    chunk.content.forEach((item: any) => {
+      const key = item.id + '_' + item.type
+      let i = indexList.indexOf(key)
+
+      if (i < 0) {
+        i = indexList.length
+        indexList.push(key)
+      }
+
+      if (i < message.content.length) {
+        const aggregated = aggregators[item.type]?.(message.content[i], item)
+        if (aggregated) {
+          message.content[i] = aggregated
+        }
+      } else {
+        message.content.push(aggregators[item.type]?.({}, item) || item)
+      }
+    })
+  }
+
+  // ── 发送消息 ─────────────────────────────────────────
+  const sendMessage = (
+    text: string,
+    typeOrOptions?: 'old' | 'new' | { re_chat?: boolean; form_data?: any },
+    other_params_data?: any,
+  ) => {
+    // 兼容旧调用方式: sendMessage(question, type, other_params_data)
+    let re_chat = false
+    let form_data: any = {}
+    if (typeof typeOrOptions === 'string') {
+      re_chat = typeOrOptions === 'old'
+      form_data = other_params_data || {}
+    } else if (typeOrOptions) {
+      re_chat = typeOrOptions.re_chat || false
+      form_data = typeOrOptions.form_data || {}
+    }
+
+    return new Promise<any>((resolve, reject) => {
+      if (!currentChatId.value) {
+        reject(new Error('No chat open'))
+        return
+      }
+
+      const aiMsg = createAnswerMessage()
+      pushMessage(aiMsg)
+
+      streamLoading.value = true
+
+      const response = api.chat(currentChatId.value, {
+        message: text,
+        stream: true,
+        re_chat,
+        form_data,
+      })
+
+      activeStream = new ConversationStream(
+        response,
+        (chunk: any) => appendChunk(aiMsg, chunk),
+        () => {
+          aiMsg.write_ed = true
+          streamLoading.value = false
+          activeStream = null
+          resolve(aiMsg)
+        },
+        (e: any) => {
+          aiMsg.content.push({ type: 'FAILURE', content: String(e) })
+          aiMsg.write_ed = true
+          streamLoading.value = false
+          activeStream = null
+          reject(e)
+        },
+      )
+      activeStream.stream()
+    })
+  }
+
+  const stopStream = () => {
+    activeStream?.cancel()
+    streamLoading.value = false
+    activeStream = null
+  }
+
+  return {
+    // 状态
+    conversations,
+    currentChatId,
+    currentConversation,
+    messages,
+    msgLoading,
+    streamLoading,
+    // 会话操作
+    loadConversations,
+    openChat,
+    switchChat,
+    deleteChat,
+    renameChat,
+    // 消息操作
+    loadMessages,
+    pushMessage,
+    createAnswerMessage,
+    getOrCreateLastAnswerMessage,
+    sendMessage,
+    stopStream,
+  }
+}
diff --git a/ui/src/components/chat-plus/index.scss b/ui/src/components/chat-plus/index.scss
new file mode 100644
index 00000000000..98c7fc4b803
--- /dev/null
+++ b/ui/src/components/chat-plus/index.scss
@@ -0,0 +1,387 @@
+.chat-plus {
+  display: flex;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  font-family: 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
+  background: var(--bg, #fff);
+  color: var(--t1, #303133);
+}
+
+/* ── Sidebar ──────────────────────────────────────────────── */
+.chat-plus__sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--bd, #dcdfe6);
+  background: var(--bg2, #fafafa);
+  overflow: hidden;
+  transition: width 0.25s ease, transform 0.25s ease;
+}
+
+.chat-plus__mask {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+/* ── Main ─────────────────────────────────────────────────── */
+.chat-plus__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Chat Panel ──────────────────────────────────────────── */
+.chat-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.chat-panel__header {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--bd, #dcdfe6);
+  flex-shrink: 0;
+}
+
+.default-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.header-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--t2, #606266);
+  flex-shrink: 0;
+}
+
+.header-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.header-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.header-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Messages ─────────────────────────────────────────────── */
+.chat-panel__messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  scrollbar-width: thin;
+}
+
+.chat-panel__content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.msg-row {
+  margin-bottom: 16px;
+}
+
+.msg-row.USER {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.msg-row.ASSISTANT {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.msg-user {
+  max-width: 70%;
+}
+
+.msg-user-text {
+  background: #d6e2ff;
+  padding: 10px 16px;
+  border-radius: 12px;
+  border-bottom-right-radius: 4px;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.msg-assistant {
+  width: 100%;
+}
+
+/* ── Empty State ──────────────────────────────────────────── */
+.default-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 32px 16px;
+}
+
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.empty-sub {
+  font-size: 14px;
+  color: var(--t2, #606266);
+}
+
+/* ── Loading ──────────────────────────────────────────────── */
+.default-loading {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+}
+
+.default-loading span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--t3, #909399);
+  animation: dot-blink 1.4s infinite both;
+}
+
+.default-loading span:nth-child(2) { animation-delay: 0.2s; }
+.default-loading span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dot-blink {
+  0%, 80%, 100% { opacity: 0.3; }
+  40% { opacity: 1; }
+}
+
+/* ── Input ────────────────────────────────────────────────── */
+.chat-panel__input {
+  flex-shrink: 0;
+  padding: 12px 16px 16px;
+}
+
+.default-input {
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  background: #fff;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
+  padding: 8px 8px 8px 16px;
+  transition: border-color 0.2s;
+}
+
+.default-input:focus-within {
+  border-color: var(--el-color-primary, #3370ff);
+}
+
+.default-input textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  background: transparent;
+  min-height: 24px;
+  max-height: 160px;
+  padding: 5px 0;
+}
+
+.default-input textarea::placeholder {
+  color: var(--t3, #909399);
+}
+
+.send-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  border: none;
+  background: var(--el-fill-color-light, #f5f7fa);
+  color: var(--t3, #909399);
+  cursor: not-allowed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.send-btn.active {
+  background: var(--el-color-primary, #3370ff);
+  color: #fff;
+  cursor: pointer;
+}
+
+.send-btn.active:hover { opacity: 0.85; }
+.send-btn.active:active { transform: scale(0.92); }
+
+.send-btn.stop {
+  background: #ef4444;
+  color: #fff;
+  cursor: pointer;
+}
+
+.send-btn.stop:hover { background: #dc2626; }
+.send-btn.stop:active { transform: scale(0.92); }
+
+/* ── Conversation List ────────────────────────────────────── */
+.conversation-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.conv-header {
+  padding: 12px;
+  border-bottom: 1px solid var(--bd, #dcdfe6);
+}
+
+.new-chat-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px dashed var(--bd, #dcdfe6);
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--t2, #606266);
+  transition: all 0.15s;
+}
+
+.new-chat-btn:hover {
+  border-color: var(--el-color-primary, #3370ff);
+  color: var(--el-color-primary, #3370ff);
+}
+
+.conv-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.conv-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.conv-item:hover { background: rgba(0, 0, 0, 0.04); }
+.conv-item.active { background: rgba(0, 0, 0, 0.06); }
+
+.conv-item-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.conv-item-actions {
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.conv-item:hover .conv-item-actions { opacity: 1; }
+
+.item-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: var(--t2, #606266);
+}
+
+.item-btn:hover { background: rgba(0, 0, 0, 0.06); }
+.item-btn.danger:hover { color: var(--el-color-danger, #f56c6c); }
+
+/* ── Sidebar collapsed (desktop) ─────────────────────────────── */
+.chat-plus:not(.sidebar-open) .chat-plus__sidebar {
+  width: 0;
+  border-right: none;
+}
+
+/* ── Responsive ───────────────────────────────────────────── */
+@media only screen and (max-width: 768px) {
+  .chat-plus:not(.sidebar-open) .chat-plus__sidebar {
+    width: 260px;
+  }
+
+  .chat-plus__sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 40;
+    transform: translateX(-100%);
+  }
+
+  .chat-plus__sidebar.open {
+    transform: translateX(0);
+    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .chat-plus.sidebar-open .chat-plus__mask {
+    display: block;
+  }
+
+  .msg-user { max-width: 85%; }
+}
diff --git a/ui/src/components/chat-plus/index.ts b/ui/src/components/chat-plus/index.ts
new file mode 100644
index 00000000000..b4bfd5f38a3
--- /dev/null
+++ b/ui/src/components/chat-plus/index.ts
@@ -0,0 +1,183 @@
+import bus from '@/bus/index'
+class Scroll {
+  /**
+   * 是否吸底
+   */
+  bottomSuction: boolean
+  /**
+   * 是否是用户滚动
+   */
+  isProgrammaticScroll?: boolean
+  /**
+   * 元素
+   */
+  element: any
+  constructor(element: any) {
+    this.bottomSuction = true
+    this.isProgrammaticScroll = false
+    this.element = element
+    this.initEventListener()
+  }
+  initEventListener() {
+    this.element.addEventListener('scroll', () => {
+      // 如果是程序滚动 那么就是吸底
+      if (this.isProgrammaticScroll) {
+        this.isProgrammaticScroll = undefined
+      } else {
+        if (this.element.scrollHeight - this.element.scrollTop <= this.element.clientHeight + 15) {
+          // 如果用户滚动 那么判断滚动条到底部高度 判断是否吸底
+          this.bottomSuction = true
+          this.isProgrammaticScroll = true
+        } else {
+          this.isProgrammaticScroll = undefined
+          // 不吸底
+          this.bottomSuction = false
+        }
+      }
+    })
+  }
+  scrollBottom() {
+    // 如果吸底 就滚动到最下面
+    if (this.bottomSuction) {
+      this.element.scrollTop = this.element.scrollHeight
+      // 程序滚动
+      this.isProgrammaticScroll = true
+    }
+  }
+  forceBottom() {
+    this.bottomSuction = true
+    this.isProgrammaticScroll = true
+    this.element.scrollTop = this.element.scrollHeight
+    // 子组件渲染可能比 nextTick 晚，用 rAF 兜底
+    requestAnimationFrame(() => {
+      this.element.scrollTop = this.element.scrollHeight
+      this.isProgrammaticScroll = true
+    })
+  }
+}
+export { Scroll }
+
+const TEXT = (prev: any = {}, chunk: any) => ({
+  type: 'TEXT',
+  id: chunk.id ?? prev.id,
+  content: (prev.content || '') + (chunk.content || ''),
+  extra: chunk.extra ?? prev.extra,
+})
+
+const REASONING = (prev: any = {}, chunk: any) => ({
+  type: 'REASONING',
+  id: chunk.id ?? prev.id,
+  content: (prev.content || '') + (chunk.content || ''),
+  status: chunk.status ?? prev.status,
+  extra: chunk.extra ?? prev.extra,
+})
+
+const FAILURE = (prev: any = {}, chunk: any) => ({
+  type: 'FAILURE',
+  id: chunk.id ?? prev.id,
+  content: (prev.content || '') + (chunk.content || ''),
+  extra: chunk.extra ?? prev.extra,
+})
+
+const TOOL = (prev: any = {}, chunk: any) => ({
+  type: 'TOOL',
+  id: chunk.id ?? prev.id,
+  content: (prev.content || '') + (chunk.content || ''),
+  arguments: (prev.arguments || '') + (chunk.arguments || ''),
+  result: (prev.result || '') + (chunk.result || ''),
+  status: chunk.status ?? prev.status,
+  extra: chunk.extra ?? prev.extra,
+})
+
+const FORM = (prev: any = {}, chunk: any) => ({
+  type: 'FORM',
+  id: chunk.id ?? prev.id,
+  form_field_list: chunk.form_field_list ?? prev.form_field_list ?? [],
+  form_content_format: chunk.form_content_format ?? prev.form_content_format ?? '',
+  is_submit: chunk.is_submit ?? prev.is_submit ?? false,
+  form_data: chunk.form_data ?? prev.form_data ?? {},
+  status: chunk.status ?? prev.status,
+  extra: chunk.extra ?? prev.extra,
+})
+
+export const aggregators: any = {
+  TEXT,
+  REASONING,
+  FAILURE,
+  TOOL,
+  FORM,
+}
+
+class ConversationStream {
+  response: any
+  reader?: ReadableStreamDefaultReader<Uint8Array>
+  onStream: (chunk: any) => void
+  onFinish: () => void
+  onFailure: (e: any) => void
+  cancelled = false
+  tempChunk = ''
+
+  constructor(
+    response: any,
+    onStream: (chunk: any) => void,
+    onFinish: () => void,
+    onFailure: (e: any) => void,
+  ) {
+    this.response = response
+    this.onStream = onStream
+    this.onFinish = onFinish
+    this.onFailure = onFailure
+  }
+
+  stream() {
+    this.response
+      .then((res: any) => {
+        if (this.cancelled) return
+        if (!res.ok) {
+          if (res.status === 403) {
+            bus.emit('auth:403')
+          }
+          this.onFailure(new Error(`HTTP ${res.status}`))
+          return
+        }
+        this.reader = res.body?.getReader()
+        if (!this.reader) {
+          this.onFailure(new Error('No response body'))
+          return
+        }
+        this.readLoop()
+      })
+      .catch((e: any) => {
+        if (!this.cancelled) this.onFailure(e)
+      })
+  }
+
+  private async readLoop() {
+    const decoder = new TextDecoder('utf-8')
+    try {
+      while (!this.cancelled) {
+        const { done, value } = await this.reader!.read()
+        if (done) {
+          this.onFinish()
+          return
+        }
+        this.tempChunk += decoder.decode(value, { stream: true })
+        const split = this.tempChunk.match(/data:.*}\n\n/g)
+        if (!split) continue
+        const matched = split.join('')
+        this.tempChunk = this.tempChunk.replace(matched, '')
+        for (const item of split) {
+          this.onStream(JSON.parse(item.replace('data:', '')))
+        }
+      }
+    } catch (e) {
+      if (!this.cancelled) this.onFailure(e)
+    }
+  }
+
+  cancel() {
+    this.cancelled = true
+    this.reader?.cancel().catch(() => {})
+  }
+}
+export { ConversationStream }
diff --git a/ui/src/components/chat-plus/index.vue b/ui/src/components/chat-plus/index.vue
new file mode 100644
index 00000000000..c191283d48d
--- /dev/null
+++ b/ui/src/components/chat-plus/index.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="chat-plus" :class="{ 'sidebar-open': sidebarOpen }">
+    <!-- 侧边栏 -->
+    <div class="chat-plus__sidebar" :class="{ open: sidebarOpen }">
+      <slot name="sidebar" v-bind="sidebarSlotProps">
+        <ConversationList
+          :conversations="chat.conversations.value"
+          :current-id="chat.currentChatId.value"
+          :is-open="sidebarOpen"
+        />
+      </slot>
+    </div>
+
+    <!-- 遮罩 -->
+    <div v-if="sidebarOpen && isMobile" class="chat-plus__mask" @click="sidebarOpen = false" />
+
+    <!-- 对话区 -->
+    <div class="chat-plus__main">
+      <ChatPanel
+        ref="panelRef"
+        :messages="chat.messages.value"
+        :loading="chat.msgLoading.value"
+        :stream-loading="chat.streamLoading.value"
+        @send="handleSend"
+        @stop="chat.stopStream()"
+        @toggle="sidebarOpen = !sidebarOpen"
+        @scroll="handleScroll"
+      >
+        <!-- Header 插槽 -->
+        <template #header>
+          <slot name="header" />
+        </template>
+
+        <!-- 消息渲染插槽 -->
+        <template #message="{ message, index }">
+          <slot name="message" :message="message" :index="index">
+            <div v-if="message.role === 'USER'" class="msg-user">
+              <div class="msg-user-text">{{ getUserText(message) }}</div>
+            </div>
+            <div v-else class="msg-assistant">
+              <ContentItem
+                v-for="(block, bi) in message.content"
+                :key="bi"
+                :content="block"
+              />
+            </div>
+          </slot>
+        </template>
+
+        <!-- 空态插槽 -->
+        <template #empty>
+          <slot name="empty">
+            <div class="default-empty">
+              <p class="empty-title">AI 助手</p>
+              <p class="empty-sub">有什么可以帮你的？</p>
+            </div>
+          </slot>
+        </template>
+
+        <!-- Loading 插槽 -->
+        <template #loading>
+          <slot name="loading">
+            <div class="default-loading"><span></span><span></span><span></span></div>
+          </slot>
+        </template>
+
+        <!-- 输入框插槽 -->
+        <template #input>
+          <slot name="input" :send="handleSend" :loading="chat.streamLoading.value">
+            <div class="default-input">
+              <textarea
+                ref="inputRef"
+                v-model="inputText"
+                :disabled="chat.streamLoading.value"
+                :placeholder="chat.streamLoading.value ? '正在回复中...' : '输入消息...'"
+                @keydown="onKeydown"
+                rows="1"
+              />
+              <button
+                v-if="!chat.streamLoading.value"
+                class="send-btn"
+                :class="{ active: canSend }"
+                :disabled="!canSend"
+                @click="send"
+              >
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path d="M8 14V2M3 7l5-5 5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+              <button v-else class="send-btn stop" @click="chat.stopStream()">
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                  <rect x="2" y="2" width="10" height="10" rx="2" fill="currentColor"/>
+                </svg>
+              </button>
+            </div>
+          </slot>
+        </template>
+      </ChatPanel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, provide } from 'vue'
+import { chatBus, ChatEvents } from './bus'
+import { useChat } from './composable'
+import { type ChatType } from './api'
+import ChatPanel from './component/chat-panel/index.vue'
+import ConversationList from './component/conversation-list/index.vue'
+import ContentItem from './component/answer-content/items/index.vue'
+
+const props = withDefaults(
+  defineProps<{
+    type?: ChatType
+    applicationId?: string
+    applicationDetails?: any
+  }>(),
+  {
+    type: 'CHAT',
+  },
+)
+
+const emit = defineEmits<{
+  openChat: [chatId: string]
+  refresh: [chatId: string]
+}>()
+
+const resolvedAppId = computed(() => props.applicationId || props.applicationDetails?.id)
+const chat = useChat(props.type, resolvedAppId)
+
+const panelRef = ref()
+const inputRef = ref()
+const inputText = ref('')
+const sidebarOpen = ref(false)
+const isMobile = ref(window.innerWidth < 768)
+
+const canSend = computed(() => inputText.value.trim() && !chat.streamLoading.value)
+
+const sidebarSlotProps = computed(() => ({
+  conversations: chat.conversations.value,
+  currentId: chat.currentChatId.value,
+  open: (id: string) => handleOpenChat(id),
+  create: () => handleNewChat(),
+  remove: (id: string) => chat.deleteChat(id),
+  rename: (id: string, name: string) => chat.renameChat(id, name),
+}))
+
+// ── 操作 ───────────────────────────────────────────────
+const handleNewChat = async () => {
+  const chatId = await chat.openChat()
+  sidebarOpen.value = false
+  emit('openChat', chatId)
+  return chatId
+}
+
+const handleOpenChat = async (id: string) => {
+  await chat.switchChat(id)
+  sidebarOpen.value = false
+}
+
+const handleSend = async (text: string) => {
+  if (!text.trim() || chat.streamLoading.value) return
+
+  if (!chat.currentChatId.value) {
+    await handleNewChat()
+  }
+
+  // push 用户消息
+  chat.pushMessage({
+    role: 'USER',
+    content: [{ type: 'TEXT', content: text }],
+    id: '',
+  })
+
+  try {
+    await chat.sendMessage(text)
+    emit('refresh', chat.currentChatId.value)
+  } catch {}
+
+  nextTick(() => panelRef.value?.scrollToBottom())
+}
+
+const handleScroll = () => {
+  // 分页加载更多
+}
+
+const getUserText = (msg: any) =>
+  msg.content?.find((c: any) => c.type === 'TEXT')?.content || ''
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
+    e.preventDefault()
+    send()
+  }
+}
+
+const send = () => {
+  if (!canSend.value) return
+  handleSend(inputText.value.trim())
+  inputText.value = ''
+}
+
+// ── Bus 通知（仅用于通知，不传数据） ───────────────────
+chatBus.on(ChatEvents.OPEN_CONVERSATION, (id: string) => handleOpenChat(id))
+chatBus.on(ChatEvents.NEW_CONVERSATION, () => handleNewChat())
+chatBus.on(ChatEvents.DELETE_CONVERSATION, (id: string) => chat.deleteChat(id))
+chatBus.on(ChatEvents.RENAME_CONVERSATION, (id: string, name: string) => chat.renameChat(id, name))
+
+// ── 生命周期 ───────────────────────────────────────────
+const onResize = () => { isMobile.value = window.innerWidth < 768 }
+
+onMounted(() => {
+  window.addEventListener('resize', onResize)
+  if (props.type === 'CHAT') {
+    chat.loadConversations()
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
+  chatBus.clear()
+})
+
+provide('chat', chat)
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>
diff --git a/ui/src/components/conversation/api/index.ts b/ui/src/components/conversation/api/index.ts
new file mode 100644
index 00000000000..382b6bc97bb
--- /dev/null
+++ b/ui/src/components/conversation/api/index.ts
@@ -0,0 +1,54 @@
+import { get as adminGet, postStream as adminPostStream, del as adminDel, put as adminPut } from '@/request/index'
+import { get as chatGet, postStream as chatPostStream, del as chatDel, put as chatPut } from '@/request/chat/index'
+import useStore from '@/stores'
+
+const adminPrefix = (window.MaxKB?.prefix || '/admin') + '/api'
+const chatPrefix = (window.MaxKB?.prefix || '/chat') + '/api'
+
+export const debugApi = {
+  open: (applicationId: string) => {
+    const { user } = useStore()
+    return adminGet(`/workspace/${user.getWorkspaceId()}/application/${applicationId}/open`, {})
+  },
+
+  chat: (chatId: string, data: any) =>
+    adminPostStream(`${adminPrefix}/chat_message/${chatId}`, data),
+
+  history: (page: number, size: number) =>
+    adminGet(`/historical_conversation/${page}/${size}`),
+
+  records: (chatId: string, page: number, size: number) =>
+    adminGet(`/historical_conversation_record/${chatId}/${page}/${size}`),
+
+  deleteChat: (chatId: string) =>
+    adminDel(`/historical_conversation/${chatId}`),
+
+  modifyChat: (chatId: string, data: any) =>
+    adminPut(`/historical_conversation/${chatId}`, data)
+}
+
+export const chatApi = {
+  open: () =>
+    chatGet('/open', {}),
+
+  chat: (chatId: string, data: any) =>
+    chatPostStream(`${chatPrefix}/chat_message/${chatId}`, data),
+
+  history: (page: number, size: number) =>
+    chatGet(`/historical_conversation/${page}/${size}`),
+
+  records: (chatId: string, page: number, size: number) =>
+    chatGet(`/historical_conversation_record/${chatId}/${page}/${size}`),
+
+  deleteChat: (chatId: string) =>
+    chatDel(`/historical_conversation/${chatId}`),
+
+  modifyChat: (chatId: string, data: any) =>
+    chatPut(`/historical_conversation/${chatId}`, data)
+}
+
+export type ChatType = 'CHAT' | 'DEBUG'
+
+export function getApi(type: ChatType) {
+  return type === 'DEBUG' ? debugApi : chatApi
+}
diff --git a/ui/src/components/conversation/chat-panel/index.vue b/ui/src/components/conversation/chat-panel/index.vue
new file mode 100644
index 00000000000..fc8ea2a572c
--- /dev/null
+++ b/ui/src/components/conversation/chat-panel/index.vue
@@ -0,0 +1,371 @@
+<template>
+  <main class="chat-panel">
+    <header class="panel-header">
+      <button class="header-btn" @click="$emit('toggle')">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M2 4h12M2 8h12M2 12h12"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+          />
+        </svg>
+      </button>
+      <div class="header-info">
+        <img v-if="icon" :src="icon" class="header-icon" />
+        <span class="header-title">{{ title || '新对话' }}</span>
+      </div>
+      <slot name="header" />
+    </header>
+
+    <div ref="msgBoxRef" class="panel-messages" @scroll="onScroll">
+      <div v-if="messages.length === 0 && !loading" class="welcome">
+        <p class="welcome-title">AI 助手</p>
+        <p class="welcome-sub">有什么可以帮你的？</p>
+      </div>
+
+      <template v-else>
+        <div
+          v-for="(msg, i) in messages"
+          :key="msg.id || i"
+          :class="['msg-row', msg.role === 'USER' ? 'user' : 'assistant']"
+        >
+          <ContentList :content-list="msg.content" />
+        </div>
+
+        <div v-if="streamLoading" class="msg-row assistant">
+          <Loading :size="18" />
+        </div>
+      </template>
+    </div>
+
+    <footer class="panel-input">
+      <div class="input-wrapper" :class="{ focused }">
+        <textarea
+          ref="inputRef"
+          v-model="inputText"
+          :disabled="streamLoading"
+          :placeholder="streamLoading ? '正在回复中...' : '输入消息...'"
+          @keydown="onKeydown"
+          @focus="focused = true"
+          @blur="focused = false"
+          rows="1"
+        />
+        <button
+          v-if="!streamLoading"
+          class="send-btn"
+          :class="{ active: canSend }"
+          :disabled="!canSend"
+          @click="send"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M8 14V2M3 7l5-5 5 5"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        <button v-else class="send-btn stop" @click="$emit('stop')">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <rect x="2" y="2" width="10" height="10" rx="2" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+    </footer>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
+import ContentList from '../content-list/index.vue'
+import Loading from '../loading/index.vue'
+import { Scroll } from '../index'
+
+const props = withDefaults(
+  defineProps<{
+    messages?: any[]
+    loading?: boolean
+    streamLoading?: boolean
+    title?: string
+    icon?: string
+  }>(),
+  {
+    messages: () => [],
+    loading: false,
+    streamLoading: false,
+  },
+)
+
+const emit = defineEmits<{
+  send: [text: string]
+  stop: []
+  toggle: []
+  scroll: []
+}>()
+
+const focused = ref(false)
+const inputText = ref('')
+const inputRef = ref<HTMLTextAreaElement | null>(null)
+const msgBoxRef = ref<HTMLElement | null>(null)
+
+let scroll: InstanceType<typeof Scroll> | null = null
+
+const canSend = computed(() => inputText.value.trim() && !props.streamLoading)
+
+onMounted(() => {
+  if (msgBoxRef.value) {
+    scroll = new Scroll(msgBoxRef.value)
+  }
+})
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    send()
+  }
+}
+
+const send = () => {
+  if (!canSend.value) return
+  emit('send', inputText.value.trim())
+  inputText.value = ''
+  nextTick(() => {
+    if (inputRef.value) {
+      inputRef.value.style.height = 'auto'
+    }
+  })
+}
+
+const onScroll = () => {
+  const el = msgBoxRef.value
+  if (!el || el.scrollTop > 60) return
+  emit('scroll')
+}
+
+const scrollToBottom = () => {
+  console.log('scrollToBottom')
+  scroll?.forceBottom()
+}
+
+defineExpose({ scrollToBottom })
+</script>
+
+<style scoped>
+.chat-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+  background: var(--bg, #fff);
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 44px;
+  padding: 0 12px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--bd, #dcdfe6);
+  background: var(--bg, #fff);
+  position: relative;
+  z-index: 50;
+}
+
+.header-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--t2, #606266);
+  flex-shrink: 0;
+}
+
+.header-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.header-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.header-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--t1, #303133);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.panel-messages {
+  flex: 1;
+  min-height: 0;
+  max-height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px;
+  scrollbar-width: thin;
+  display: block;
+}
+
+.welcome {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 32px 16px;
+}
+
+.welcome-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--t1, #303133);
+  margin-bottom: 8px;
+}
+
+.welcome-sub {
+  font-size: 14px;
+  color: var(--t3, #909399);
+}
+
+.msg-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+  max-width: 680px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.msg-row.user {
+  align-items: flex-end;
+}
+
+.msg-row.assistant {
+  align-items: flex-start;
+}
+
+.panel-input {
+  flex-shrink: 0;
+  padding: 12px 16px 16px;
+  background: var(--bg, #fff);
+  display: flex;
+  justify-content: center;
+}
+
+.input-wrapper {
+  width: 100%;
+  max-width: 680px;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  background: #fff;
+  border: 1px solid var(--bd, #dcdfe6);
+  border-radius: 16px;
+  padding: 8px 8px 8px 16px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.input-wrapper.focused {
+  border-color: var(--el-color-primary, #3370ff);
+  box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.1);
+}
+
+.input-wrapper textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  background: transparent;
+  color: var(--t1, #303133);
+  min-height: 24px;
+  max-height: 160px;
+  padding: 4px 0;
+  word-break: break-word;
+}
+
+.input-wrapper textarea::placeholder {
+  color: var(--t3, #909399);
+}
+
+.send-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: none;
+  background: var(--bd, #dcdfe6);
+  color: var(--t3, #909399);
+  cursor: not-allowed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    transform 0.1s;
+}
+
+.send-btn.active {
+  background: var(--t1, #303133);
+  color: #fff;
+  cursor: pointer;
+}
+
+.send-btn.active:hover {
+  opacity: 0.85;
+}
+
+.send-btn.active:active {
+  transform: scale(0.92);
+}
+
+.send-btn.stop {
+  background: #ef4444;
+  color: #fff;
+  cursor: pointer;
+}
+
+.send-btn.stop:hover {
+  background: #dc2626;
+}
+
+.send-btn.stop:active {
+  transform: scale(0.92);
+}
+</style>
diff --git a/ui/src/components/conversation/composable.ts b/ui/src/components/conversation/composable.ts
new file mode 100644
index 00000000000..45219c8ea05
--- /dev/null
+++ b/ui/src/components/conversation/composable.ts
@@ -0,0 +1,317 @@
+import { ref, computed, type Ref, unref } from 'vue'
+import { aggregators } from './index'
+import { getApi, type ChatType } from './api'
+import { ConversationStream } from './stream'
+
+interface ChatMessage {
+  role: 'USER' | 'ASSISTANT'
+  content: any[]
+  id: string
+}
+
+interface ChatConversation {
+  id: string
+  name: string
+}
+
+export function useChat(type: ChatType, applicationId?: string | Ref<string>) {
+  const api = getApi(type)
+  const conversations = ref<ChatConversation[]>([])
+  const currentChatId = ref('')
+  const messages = ref<ChatMessage[]>([])
+  const msgLoading = ref(false)
+  const streamLoading = ref(false)
+  let activeStream: ConversationStream | null = null
+
+  const getApplicationId = () => unref(applicationId)
+
+  const currentConversation = computed(() =>
+    conversations.value.find((c) => c.id === currentChatId.value)
+  )
+
+  const appInfo = computed(() => ({
+    name: 'AI Chat',
+    icon: ''
+  }))
+
+  const loadConversations = async (page = 1, size = 50) => {
+    try {
+      const res = await api.history(page, size)
+      conversations.value = res.data?.records || []
+    } catch (e) {
+      console.error('Failed to load conversations:', e)
+    }
+    return conversations.value
+  }
+
+  const openChat = async (appId?: string) => {
+    try {
+      const id = appId || getApplicationId()
+      if (!id) throw new Error('No application ID')
+      const res = await api.open(id)
+      currentChatId.value = res.data
+      messages.value = []
+      return res.data
+    } catch (e) {
+      console.error('Failed to open chat:', e)
+      throw e
+    }
+  }
+
+  const switchChat = async (chatId: string) => {
+    currentChatId.value = chatId
+    await loadMessages(chatId)
+    return chatId
+  }
+
+  const deleteChat = async (id: string) => {
+    try {
+      await api.deleteChat(id)
+      conversations.value = conversations.value.filter((c) => c.id !== id)
+      if (currentChatId.value === id) {
+        currentChatId.value = conversations.value[0]?.id || ''
+      }
+    } catch (e) {
+      console.error('Failed to delete chat:', e)
+    }
+  }
+
+  const renameChat = async (id: string, name: string) => {
+    try {
+      await api.modifyChat(id, { name })
+      const conv = conversations.value.find((c) => c.id === id)
+      if (conv) conv.name = name
+    } catch (e) {
+      console.error('Failed to rename chat:', e)
+    }
+  }
+
+  const loadMessages = async (chatId: string) => {
+    msgLoading.value = true
+    try {
+      const res = await api.records(chatId, 1, 100)
+      const records = res.data?.records || []
+      messages.value = records.map((record: any) => ({
+        id: record.id,
+        role: 'USER',
+        content: [{ type: 'TEXT', content: record.problem_text }]
+      }))
+      // Add assistant messages
+      records.forEach((record: any, index: number) => {
+        if (record.answer_text_list) {
+          messages.value.splice(index * 2 + 1, 0, {
+            id: record.id + '-answer',
+            role: 'ASSISTANT',
+            content: record.answer_text_list.flat()
+          })
+        }
+      })
+    } catch (e) {
+      console.error('Failed to load messages:', e)
+    } finally {
+      msgLoading.value = false
+    }
+  }
+
+  const createAnswerMessage = (): ChatMessage => {
+    return {
+      role: 'ASSISTANT',
+      content: [],
+      id: ''
+    }
+  }
+
+  const pushMessage = (msg: ChatMessage) => {
+    messages.value.push(msg)
+  }
+
+  const getOrCreateLastAnswerMessage = (): ChatMessage => {
+    const last = messages.value[messages.value.length - 1]
+    if (last && last.role === 'ASSISTANT') {
+      return last
+    }
+    const answerMessage = createAnswerMessage()
+    pushMessage(answerMessage)
+    return answerMessage
+  }
+
+  const appendChunk = (message: ChatMessage, chunk: any) => {
+    console.log('appendChunk received:', chunk)
+    
+    if (!chunk) return
+    
+    // 处理直接包含 content 数组的情况
+    let contentArray = chunk.content
+    if (!Array.isArray(contentArray)) {
+      // 如果 chunk 本身就是一个内容项（如 FORM），包装成数组
+      if (chunk.type) {
+        contentArray = [chunk]
+      } else {
+        return
+      }
+    }
+
+    contentArray.forEach((item: any) => {
+      if (!item || !item.type) return
+      
+      const aggregator = aggregators[item.type]
+      if (!aggregator) {
+        console.warn('No aggregator for type:', item.type)
+        return
+      }
+
+      const index = message.content.findIndex(
+        (c) => c.id === item.id && c.type === item.type
+      )
+
+      if (index >= 0) {
+        message.content[index] = aggregator(message.content[index], item)
+      } else {
+        message.content.push(aggregator({}, item))
+      }
+    })
+    
+    console.log('Updated message content:', message.content)
+  }
+
+  const sendMessage = async (
+    text: string,
+    options?: { re_chat?: boolean; form_data?: any; position?: any; chat_record_id?: string; chunk_id?: string; onScroll?: () => void }
+  ) => {
+    const re_chat = options?.re_chat || false
+    const form_data = options?.form_data || {}
+    const position = options?.position || null
+    const chat_record_id = options?.chat_record_id || null
+    const chunk_id = options?.chunk_id || null
+    const onScroll = options?.onScroll || (() => {})
+
+    console.log('sendMessage called:', {
+      text,
+      options,
+      re_chat,
+      form_data,
+      position,
+      chat_record_id,
+      currentChatId: currentChatId.value
+    })
+
+    return new Promise<any>((resolve, reject) => {
+      if (!currentChatId.value) {
+        console.error('No chat open, currentChatId is empty')
+        reject(new Error('No chat open'))
+        return
+      }
+
+      // 表单提交时，找到包含相同 chunk_id 的消息，否则新建
+      let aiMsg: ChatMessage
+      if (chunk_id) {
+        const existing = messages.value.find(m => 
+          m.role === 'ASSISTANT' && 
+          m.content.some((c: any) => c.id === chunk_id)
+        )
+        if (existing) {
+          aiMsg = existing
+        } else {
+          aiMsg = createAnswerMessage()
+          pushMessage(aiMsg)
+        }
+      } else {
+        aiMsg = createAnswerMessage()
+        pushMessage(aiMsg)
+      }
+
+      streamLoading.value = true
+
+      const requestData: any = {
+        message: text,
+        stream: true,
+        re_chat,
+        form_data
+      }
+      
+      // position、chat_record_id、chunk_id 与 re_chat 同级别
+      if (position) {
+        requestData.position = position
+      }
+      if (chat_record_id) {
+        requestData.chat_record_id = chat_record_id
+      }
+      if (chunk_id) {
+        requestData.chunk_id = chunk_id
+      }
+
+      console.log('Sending request to API:', {
+        chatId: currentChatId.value,
+        data: requestData
+      })
+
+      const responsePromise = api.chat(currentChatId.value, requestData)
+
+      // postStream 返回 Promise，需要 await
+      responsePromise.then((response: any) => {
+        console.log('API response resolved:', response)
+        
+        activeStream = new ConversationStream(
+          response,
+          (chunk: any) => {
+            console.log('Stream chunk received:', chunk)
+            appendChunk(aiMsg, chunk)
+            onScroll()
+          },
+          () => {
+            console.log('Stream finished, aiMsg:', aiMsg)
+            aiMsg.id = aiMsg.id || Date.now().toString()
+            streamLoading.value = false
+            activeStream = null
+            onScroll()
+            resolve(aiMsg)
+          },
+          (e: any) => {
+            console.error('Stream error:', e)
+            aiMsg.content.push({ type: 'FAILURE', content: String(e) })
+            aiMsg.id = aiMsg.id || Date.now().toString()
+            streamLoading.value = false
+            activeStream = null
+            reject(e)
+          }
+        )
+        activeStream.start()
+      }).catch((e: any) => {
+        console.error('API call failed:', e)
+        aiMsg.content.push({ type: 'FAILURE', content: String(e) })
+        aiMsg.id = aiMsg.id || Date.now().toString()
+        streamLoading.value = false
+        reject(e)
+      })
+    })
+  }
+
+  const stopStream = () => {
+    if (activeStream) {
+      activeStream.cancel()
+      activeStream = null
+    }
+    streamLoading.value = false
+  }
+
+  return {
+    appInfo,
+    conversations,
+    currentChatId,
+    currentConversation,
+    messages,
+    msgLoading,
+    streamLoading,
+    loadConversations,
+    openChat,
+    switchChat,
+    deleteChat,
+    renameChat,
+    loadMessages,
+    pushMessage,
+    createAnswerMessage,
+    getOrCreateLastAnswerMessage,
+    sendMessage,
+    stopStream
+  }
+}
diff --git a/ui/src/components/conversation/content-list/index.vue b/ui/src/components/conversation/content-list/index.vue
new file mode 100644
index 00000000000..8a733c61f0e
--- /dev/null
+++ b/ui/src/components/conversation/content-list/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <template v-for="(content, index) in contents" :key="index">
+    <Content class="w-full" :type="content.type" :content="content" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Content from '@/components/conversation/content/index.vue'
+
+const props = defineProps<{ contentList: Array<any> }>()
+
+const contents = computed(() => {
+  return props.contentList
+    .filter((item) => item.type !== 'APPROVAL')
+    .map((item, index) => ({ item, index }))
+    .sort((a, b) => {
+      const idA = a.item.id || ''
+      const idB = b.item.id || ''
+      if (idA !== idB) {
+        return idA.localeCompare(idB)
+      }
+      return a.index - b.index
+    })
+    .map(({ item }) => item)
+    .filter((item) => !(item.type === 'TEXT' && !item.content))
+})
+</script>
diff --git a/ui/src/components/conversation/content/index.vue b/ui/src/components/conversation/content/index.vue
new file mode 100644
index 00000000000..c75a364677f
--- /dev/null
+++ b/ui/src/components/conversation/content/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <component v-if="typeRenderers[content.type]" :is="typeRenderers[content.type]" :content="content" />
+  <TextItem v-else :content="content" />
+</template>
+
+<script setup lang="ts">
+import TextItem from './items/text.vue'
+import ReasoningItem from './items/reasoning.vue'
+import ToolItem from './items/tool.vue'
+import FormItem from './items/form.vue'
+import FailureItem from './items/failure.vue'
+
+const typeRenderers: Record<string, any> = {
+  TEXT: TextItem,
+  REASONING: ReasoningItem,
+  TOOL: ToolItem,
+  FORM: FormItem,
+  FAILURE: FailureItem
+}
+
+defineProps<{ content: any }>()
+</script>
diff --git a/ui/src/components/conversation/content/items/failure.vue b/ui/src/components/conversation/content/items/failure.vue
new file mode 100644
index 00000000000..8bd507a09b5
--- /dev/null
+++ b/ui/src/components/conversation/content/items/failure.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="content-failure">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM8 4v4M8 10.5h.006" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+    </svg>
+    <span>{{ content.content || '发生错误' }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  content: any
+}>()
+</script>
+
+<style scoped>
+.content-failure {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 8px;
+  color: #ef4444;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.content-failure svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+</style>
diff --git a/ui/src/components/conversation/content/items/form.vue b/ui/src/components/conversation/content/items/form.vue
new file mode 100644
index 00000000000..a92fcc62c90
--- /dev/null
+++ b/ui/src/components/conversation/content/items/form.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="content-form">
+    <DynamicsForm
+      :disabled="is_submit"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormRef"
+      :render_data="form_field_list"
+      label-suffix=":"
+      v-model="form_data"
+      :model="form_data"
+    />
+    <el-button :type="is_submit ? 'info' : 'primary'" :disabled="is_submit" @click="submit">
+      {{ is_submit ? '已提交' : '提交' }}
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, inject } from 'vue'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+
+const chat = inject<any>('chat')
+
+const props = defineProps<{
+  content: any
+}>()
+
+const _submit = ref(false)
+const form_field_list = computed(() => props.content.form_field_list || [])
+const is_submit = computed(() => _submit.value || !!props.content.is_submit)
+const _form_data = ref<any>({})
+const form_data = computed({
+  get: () => (props.content.is_submit ? props.content.form_data : _form_data.value),
+  set: (v) => {
+    _form_data.value = v
+  }
+})
+const dynamicsFormRef = ref()
+
+const submit = async () => {
+  try {
+    await dynamicsFormRef.value?.validate()
+    _submit.value = true
+    
+    if (chat?.sendMessage) {
+      // 确保有对话 ID
+      if (!chat.currentChatId?.value && chat?.openChat) {
+        await chat.openChat()
+      }
+      
+      // 传递 position、chat_record_id、chunk_id
+      const position = props.content.position || null
+      const chatRecordId = props.content.chat_record_id || null
+      const chunkId = props.content.id || null
+      
+      // form_data 只包含表单收集到的数据
+      const formData = { ...form_data.value }
+      
+      // 使用 form_content_format 作为消息
+      const message = props.content.form_content_format || '表单已提交'
+      
+      await chat.sendMessage(message, { 
+        re_chat: true, 
+        form_data: formData,
+        position: position,
+        chat_record_id: chatRecordId,
+        chunk_id: chunkId,
+        onScroll: () => chat.scrollToBottom?.()
+      })
+    }
+  } catch (e) {
+    console.error('Form submit failed:', e)
+    _submit.value = false
+  }
+}
+</script>
+
+<style scoped>
+.content-form {
+  background: #ffffff;
+  border: 1px solid var(--el-border-color-lighter, #e4e7ed);
+  border-radius: 8px;
+  padding: 16px;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+</style>
diff --git a/ui/src/components/conversation/content/items/reasoning.vue b/ui/src/components/conversation/content/items/reasoning.vue
new file mode 100644
index 00000000000..c15d3ff8ae7
--- /dev/null
+++ b/ui/src/components/conversation/content/items/reasoning.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="content-reasoning" v-if="content.content?.trim()">
+    <div class="reasoning-header" @click="expanded = !expanded">
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" :class="{ rotated: expanded }">
+        <path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Reasoning</span>
+    </div>
+    <div v-show="expanded" class="reasoning-content">
+      <MdPreview editorId="reasoning-text" :modelValue="content.content" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/preview.css'
+
+defineProps<{
+  content: any
+}>()
+
+const expanded = ref(false)
+</script>
+
+<style scoped>
+.content-reasoning {
+  background: var(--bg2, #fafafa);
+  border: 1px solid var(--bd, #dcdfe6);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.reasoning-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--t2, #606266);
+  user-select: none;
+}
+
+.reasoning-header svg {
+  transition: transform 0.2s;
+}
+
+.reasoning-header svg.rotated {
+  transform: rotate(90deg);
+}
+
+.reasoning-content {
+  padding: 0 12px 12px;
+  font-size: 13px;
+}
+
+.reasoning-content :deep(.md-editor) {
+  background: transparent;
+}
+</style>
diff --git a/ui/src/components/conversation/content/items/text.vue b/ui/src/components/conversation/content/items/text.vue
new file mode 100644
index 00000000000..b344aa416b8
--- /dev/null
+++ b/ui/src/components/conversation/content/items/text.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="content-text">
+    <MdPreview editorId="conversation-text" :modelValue="content.content || ''" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/preview.css'
+
+defineProps<{
+  content: any
+}>()
+</script>
+
+<style scoped>
+.content-text :deep(.md-editor) {
+  background: transparent;
+}
+</style>
diff --git a/ui/src/components/conversation/content/items/tool.vue b/ui/src/components/conversation/content/items/tool.vue
new file mode 100644
index 00000000000..1ce46d862ab
--- /dev/null
+++ b/ui/src/components/conversation/content/items/tool.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="content-tool">
+    <div class="tool-header">
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path d="M10.5 2.5h-7a1 1 0 00-1 1v7a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1z" stroke="currentColor" stroke-width="1.2"/>
+        <path d="M5.5 5.5h3M5.5 8h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+      </svg>
+      <span class="tool-name">{{ content.toolName || 'Tool' }}</span>
+      <span v-if="content.status" class="tool-status" :class="content.status">
+        {{ content.status }}
+      </span>
+    </div>
+    <div v-if="content.content" class="tool-content">
+      <MdPreview editorId="tool-text" :modelValue="content.content" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/preview.css'
+
+defineProps<{
+  content: any
+}>()
+</script>
+
+<style scoped>
+.content-tool {
+  background: var(--bg2, #fafafa);
+  border: 1px solid var(--bd, #dcdfe6);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.tool-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--t2, #606266);
+}
+
+.tool-name {
+  font-weight: 500;
+}
+
+.tool-status {
+  margin-left: auto;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--hv, #f5f7fa);
+}
+
+.tool-status.success {
+  color: #67c23a;
+}
+
+.tool-status.error {
+  color: #f56c6c;
+}
+
+.tool-content {
+  padding: 0 12px 12px;
+  font-size: 13px;
+}
+
+.tool-content :deep(.md-editor) {
+  background: transparent;
+}
+</style>
diff --git a/ui/src/components/conversation/editor/index.vue b/ui/src/components/conversation/editor/index.vue
new file mode 100644
index 00000000000..3f0a429129c
--- /dev/null
+++ b/ui/src/components/conversation/editor/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="md-editor" :class="{ focused: isFocused }">
+    <textarea
+      ref="textareaRef"
+      v-model="inputText"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @keydown="onKeydown"
+      @input="onInput"
+      @focus="isFocused = true; emit('focus')"
+      @blur="isFocused = false; emit('blur')"
+      @paste="onPaste"
+      rows="1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    disabled?: boolean
+    placeholder?: string
+  }>(),
+  {
+    modelValue: '',
+    disabled: false,
+    placeholder: '输入消息...'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'paste-images': [files: File[]]
+  'paste-videos': [files: File[]]
+  'paste-files': [files: File[]]
+  'paste-text': [text: string]
+  submit: []
+  focus: []
+  blur: []
+}>()
+
+const LONG_TEXT_THRESHOLD = 300
+
+const isFocused = ref(false)
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const inputText = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val !== inputText.value) {
+      inputText.value = val
+    }
+  }
+)
+
+const onInput = () => {
+  emit('update:modelValue', inputText.value)
+  adjustHeight()
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    emit('submit')
+  }
+}
+
+const onPaste = (event: ClipboardEvent) => {
+  const items = event.clipboardData?.items
+  if (!items) return
+
+  const fileItems = Array.from(items)
+    .filter((item) => item.kind === 'file')
+    .map((item) => item.getAsFile())
+    .filter(Boolean) as File[]
+
+  if (fileItems.length) {
+    event.preventDefault()
+
+    const images = fileItems.filter((f) => f.type.startsWith('image/'))
+    const videos = fileItems.filter((f) => f.type.startsWith('video/'))
+    const others = fileItems.filter(
+      (f) => !f.type.startsWith('image/') && !f.type.startsWith('video/')
+    )
+
+    if (images.length) emit('paste-images', images)
+    if (videos.length) emit('paste-videos', videos)
+    if (others.length) emit('paste-files', others)
+    return
+  }
+
+  const text = event.clipboardData?.getData('text/plain') || ''
+  if (text.length > LONG_TEXT_THRESHOLD) {
+    event.preventDefault()
+    emit('paste-text', text)
+  }
+}
+
+const adjustHeight = () => {
+  const el = textareaRef.value
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = Math.min(el.scrollHeight, 160) + 'px'
+}
+
+const clear = () => {
+  inputText.value = ''
+  emit('update:modelValue', '')
+  if (textareaRef.value) {
+    textareaRef.value.style.height = 'auto'
+  }
+}
+
+const focus = () => {
+  textareaRef.value?.focus()
+}
+
+onMounted(() => {
+  adjustHeight()
+})
+
+defineExpose({ clear, focus })
+</script>
+
+<style scoped>
+.md-editor {
+  flex: 1;
+  min-width: 0;
+}
+
+.md-editor textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  background: transparent;
+  color: var(--t1, #303133);
+  min-height: 24px;
+  max-height: 160px;
+  padding: 4px 0;
+  word-break: break-word;
+}
+
+.md-editor textarea::placeholder {
+  color: var(--t3, #909399);
+}
+</style>
diff --git a/ui/src/components/conversation/index.ts b/ui/src/components/conversation/index.ts
new file mode 100644
index 00000000000..9191217692e
--- /dev/null
+++ b/ui/src/components/conversation/index.ts
@@ -0,0 +1,112 @@
+export class Scroll {
+  private bottomSuction: boolean
+  private isProgrammaticScroll?: boolean
+  private element: HTMLElement
+
+  constructor(element: HTMLElement) {
+    this.bottomSuction = true
+    this.isProgrammaticScroll = false
+    this.element = element
+    this.initEventListener()
+  }
+
+  private initEventListener() {
+    this.element.addEventListener('scroll', () => {
+      if (this.isProgrammaticScroll) {
+        this.isProgrammaticScroll = undefined
+      } else {
+        if (this.element.scrollHeight - this.element.scrollTop <= this.element.clientHeight + 15) {
+          this.bottomSuction = true
+          this.isProgrammaticScroll = true
+        } else {
+          this.isProgrammaticScroll = undefined
+          this.bottomSuction = false
+        }
+      }
+    })
+  }
+
+  scrollBottom() {
+    if (this.bottomSuction) {
+      this.element.scrollTop = this.element.scrollHeight
+      this.isProgrammaticScroll = true
+    }
+  }
+
+  forceBottom() {
+    this.bottomSuction = true
+    this.isProgrammaticScroll = true
+    this.element.scrollTop = this.element.scrollHeight
+    requestAnimationFrame(() => {
+      this.element.scrollTop = this.element.scrollHeight
+      this.isProgrammaticScroll = true
+    })
+  }
+}
+
+const TEXT = (prev: any = {}, chunk: any) => {
+  return {
+    type: 'TEXT',
+    id: chunk.id ?? prev.id,
+    content: (prev.content || '') + (chunk.content || ''),
+    workflowRunId: chunk.workflowRunId ?? prev.workflowRunId,
+    extra: chunk.extra ?? prev.extra
+  }
+}
+
+const REASONING = (prev: any, chunk: any) => {
+  return {
+    type: 'REASONING',
+    id: chunk.id ?? prev.id,
+    content: (prev.content || '') + (chunk.content || ''),
+    workflowRunId: chunk.workflowRunId ?? prev.workflowRunId,
+    extra: chunk.extra ?? prev.extra,
+    status: chunk.status ?? prev.status
+  }
+}
+
+const FAILURE = (prev: any, chunk: any) => {
+  return {
+    type: 'FAILURE',
+    id: chunk.id ?? prev.id,
+    content: (prev.content || '') + (chunk.content || ''),
+    workflowRunId: chunk.workflowRunId ?? prev.workflowRunId,
+    extra: chunk.extra ?? prev.extra
+  }
+}
+
+const TOOL = (prev: any, chunk: any) => {
+  return {
+    type: 'TOOL',
+    id: chunk.id ?? prev.id,
+    toolName: chunk.toolName,
+    functionArguments: (prev.functionArguments || '') + (chunk.functionArguments || ''),
+    content: (prev.content || '') + (chunk.content || ''),
+    status: chunk.status ?? prev.status,
+    workflowRunId: chunk.workflowRunId ?? prev.workflowRunId,
+    extra: chunk.extra ?? prev.extra
+  }
+}
+
+const FORM = (prev: any, chunk: any) => {
+  return {
+    type: 'FORM',
+    id: chunk.id ?? prev.id,
+    content: (prev.content || '') + (chunk.content || ''),
+    form_field_list: chunk.form_field_list ?? prev.form_field_list,
+    form_data: chunk.form_data ?? prev.form_data,
+    is_submit: chunk.is_submit ?? prev.is_submit,
+    position: chunk.position ?? prev.position,
+    chat_record_id: chunk.chat_record_id ?? prev.chat_record_id,
+    workflowRunId: chunk.workflowRunId ?? prev.workflowRunId,
+    extra: chunk.extra ?? prev.extra
+  }
+}
+
+export const aggregators: Record<string, (prev: any, chunk: any) => any> = {
+  TEXT,
+  REASONING,
+  FAILURE,
+  TOOL,
+  FORM
+}
diff --git a/ui/src/components/conversation/index.vue b/ui/src/components/conversation/index.vue
new file mode 100644
index 00000000000..3931e3a78f8
--- /dev/null
+++ b/ui/src/components/conversation/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="conversation-plus">
+    <div v-if="open && mode === 'drawer'" class="mask" @click="open = false" />
+
+    <Sidebar
+      :open="open"
+      :mode="mode"
+      :conversations="conversations"
+      :current-id="currentChatId"
+      @update:open="open = $event"
+      @update:mode="mode = $event"
+      @switch="handleSwitch"
+      @delete="handleDelete"
+      @rename="handleRename"
+      @new="handleNewChat"
+    />
+
+    <ChatPanel
+      ref="panelRef"
+      :messages="messages"
+      :loading="msgLoading"
+      :stream-loading="streamLoading"
+      :title="currentConversation?.name"
+      :icon="appInfo?.icon"
+      @send="handleSend"
+      @stop="stopStream"
+      @toggle="open = !open"
+      @scroll="handleScroll"
+    >
+      <template #header>
+        <slot name="header" />
+      </template>
+    </ChatPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, provide } from 'vue'
+import Sidebar from './sidebar/index.vue'
+import ChatPanel from './chat-panel/index.vue'
+import { useChat } from './composable'
+
+type OpenMode = boolean | 'auto'
+type LayoutMode = 'push' | 'drawer' | 'auto'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'CHAT' | 'DEBUG'
+    applicationId?: string
+    applicationDetails?: any
+    defaultOpen?: OpenMode
+    defaultMode?: LayoutMode
+  }>(),
+  {
+    type: 'CHAT',
+    defaultOpen: 'auto',
+    defaultMode: 'auto'
+  }
+)
+
+const emit = defineEmits<{
+  openChat: [chatId: string]
+  refresh: [chatId: string]
+  close: []
+}>()
+
+const BREAKPOINT = 768
+const isMobile = ref(window.innerWidth < BREAKPOINT)
+
+// 计算初始 open 状态
+const getInitialOpen = (): boolean => {
+  if (props.defaultOpen === 'auto') {
+    return !isMobile.value
+  }
+  return props.defaultOpen as boolean
+}
+
+// 计算初始 mode 状态
+const getInitialMode = (): 'push' | 'drawer' => {
+  if (props.defaultMode === 'auto') {
+    return isMobile.value ? 'drawer' : 'push'
+  }
+  return props.defaultMode as 'push' | 'drawer'
+}
+
+const open = ref(getInitialOpen())
+const mode = ref<'push' | 'drawer'>(getInitialMode())
+
+const updateMobile = () => {
+  const wasMobile = isMobile.value
+  isMobile.value = window.innerWidth < BREAKPOINT
+  
+  // 只有 auto 模式才自动切换
+  if (props.defaultOpen === 'auto') {
+    // 移动端 -> 桌面端：展开
+    if (wasMobile && !isMobile.value) {
+      open.value = true
+    }
+    // 桌面端 -> 移动端：收起
+    if (!wasMobile && isMobile.value) {
+      open.value = false
+    }
+  }
+  
+  if (props.defaultMode === 'auto') {
+    mode.value = isMobile.value ? 'drawer' : 'push'
+  }
+}
+
+onMounted(() => window.addEventListener('resize', updateMobile))
+onUnmounted(() => window.removeEventListener('resize', updateMobile))
+
+const resolvedAppId = computed(() => props.applicationId || props.applicationDetails?.id)
+const {
+  appInfo,
+  conversations,
+  currentChatId,
+  currentConversation,
+  messages,
+  msgLoading,
+  streamLoading,
+  loadConversations,
+  openChat,
+  switchChat,
+  deleteChat,
+  renameChat,
+  sendMessage,
+  stopStream
+} = useChat(props.type, resolvedAppId)
+
+const panelRef = ref()
+
+provide('chat', {
+  currentChatId,
+  sendMessage,
+  openChat,
+  switchChat,
+  deleteChat,
+  renameChat,
+  scrollToBottom: () => nextTick(() => panelRef.value?.scrollToBottom())
+})
+
+const handleNewChat = async () => {
+  const chatId = await openChat()
+  emit('openChat', chatId)
+}
+
+const handleSwitch = (id: string) => {
+  switchChat(id)
+}
+
+const handleDelete = (id: string) => {
+  deleteChat(id)
+}
+
+const handleRename = (id: string, name: string) => {
+  renameChat(id, name)
+}
+
+const handleSend = async (text: string) => {
+  if (!text.trim() || streamLoading.value) return
+
+  if (!currentChatId.value) {
+    await handleNewChat()
+  }
+
+  messages.value.push({
+    role: 'USER',
+    content: [{ type: 'TEXT', content: text }],
+    id: ''
+  })
+
+  try {
+    await sendMessage(text, {
+      onScroll: () => nextTick(() => panelRef.value?.scrollToBottom())
+    })
+    emit('refresh', currentChatId.value)
+  } catch {}
+}
+
+const handleScroll = () => {
+  // Load more messages if needed
+}
+
+onMounted(() => {
+  if (props.type === 'CHAT') {
+    loadConversations()
+  }
+})
+</script>
+
+<style scoped>
+.conversation-plus {
+  --sb-w: 260px;
+  --bg: #fff;
+  --bg2: #fafafa;
+  --bd: #dcdfe6;
+  --t1: #303133;
+  --t2: #606266;
+  --t3: #909399;
+  --hv: #f5f7fa;
+  --ac: #ecf5ff;
+  --ub: #d6e2ff;
+  --ab: #f5f7fa;
+  --mask: rgba(0, 0, 0, 0.4);
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  --danger-bg: rgba(239, 68, 68, 0.15);
+  --danger-text: #ef4444;
+  --focus-border: #3370ff;
+
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--t1);
+}
+
+.mask {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  background: var(--mask);
+}
+
+@media (max-width: 768px) {
+  .mask {
+    display: block;
+  }
+}
+</style>
diff --git a/ui/src/components/conversation/loading/index.vue b/ui/src/components/conversation/loading/index.vue
new file mode 100644
index 00000000000..fae43ebab33
--- /dev/null
+++ b/ui/src/components/conversation/loading/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="loading-dots" :style="{ width: size + 'px', height: size + 'px' }">
+    <span class="dot" />
+    <span class="dot" />
+    <span class="dot" />
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number
+  }>(),
+  {
+    size: 18
+  }
+)
+</script>
+
+<style scoped>
+.loading-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--t3, #909399);
+  animation: dot-blink 1.4s infinite both;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes dot-blink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>
diff --git a/ui/src/components/conversation/sidebar/index.vue b/ui/src/components/conversation/sidebar/index.vue
new file mode 100644
index 00000000000..5c6724a69b7
--- /dev/null
+++ b/ui/src/components/conversation/sidebar/index.vue
@@ -0,0 +1,265 @@
+<template>
+  <aside class="sidebar" :class="[mode, { open }]">
+    <div class="sidebar-header">
+      <span class="sidebar-title">对话历史</span>
+    </div>
+
+    <div class="sidebar-nav">
+      <div v-if="conversations.length === 0" class="nav-empty">暂无对话</div>
+      <div
+        v-for="item in conversations"
+        :key="item.id"
+        class="nav-item"
+        :class="{ active: currentId === item.id }"
+        @click="handleSwitch(item.id)"
+      >
+        <span class="nav-item-text">{{ item.name || '新对话' }}</span>
+        <span class="nav-item-actions">
+          <button @click.stop="startRename(item)">重命名</button>
+          <button class="delete" @click.stop="handleDelete(item.id)">删除</button>
+        </span>
+      </div>
+    </div>
+
+    <div class="sidebar-footer">
+      <button @click="handleNew">
+        <span>+</span> 新对话
+      </button>
+      <button @click="toggleMode">
+        {{ mode === 'push' ? '抽屉模式' : '侧边模式' }}
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+const props = defineProps<{
+  open: boolean
+  mode: 'push' | 'drawer'
+  conversations: any[]
+  currentId: string
+}>()
+
+const emit = defineEmits<{
+  'update:open': [val: boolean]
+  'update:mode': [val: 'push' | 'drawer']
+  switch: [id: string]
+  delete: [id: string]
+  rename: [id: string, name: string]
+  new: []
+}>()
+
+const renamingId = ref<string | null>(null)
+const renameValue = ref('')
+
+const handleSwitch = (id: string) => {
+  emit('switch', id)
+  if (props.mode === 'drawer') emit('update:open', false)
+}
+
+const handleDelete = (id: string) => {
+  emit('delete', id)
+}
+
+const handleNew = () => {
+  emit('new')
+}
+
+const toggleMode = () => {
+  emit('update:mode', props.mode === 'push' ? 'drawer' : 'push')
+}
+
+const startRename = (item: any) => {
+  renamingId.value = item.id
+  renameValue.value = item.name || ''
+  nextTick(() => {
+    const input = document.querySelector('.rename-input') as HTMLInputElement
+    input?.focus()
+    input?.select()
+  })
+}
+
+const confirmRename = () => {
+  if (renamingId.value) {
+    emit('rename', renamingId.value, renameValue.value)
+  }
+  renamingId.value = null
+}
+</script>
+
+<style scoped>
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg2, #fafafa);
+  border-right: 1px solid var(--bd, #dcdfe6);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.sidebar.push {
+  position: relative;
+  z-index: 1;
+  width: 0;
+  min-width: 0;
+  border-right-width: 0;
+  pointer-events: none;
+  transition:
+    width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    border-right-width 0.25s;
+}
+
+.sidebar.push.open {
+  width: 260px;
+  min-width: 260px;
+  border-right-width: 1px;
+  pointer-events: auto;
+}
+
+.sidebar.drawer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 260px;
+  z-index: 40;
+  transform: translateX(-100%);
+  transition:
+    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.25s;
+}
+
+.sidebar.drawer.open {
+  transform: translateX(0);
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-bottom: 1px solid var(--bd, #dcdfe6);
+}
+
+.sidebar-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--t1, #303133);
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.nav-empty {
+  font-size: 12px;
+  color: var(--t3, #909399);
+  text-align: center;
+  padding: 20px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.nav-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.nav-item.active {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.nav-item-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  color: var(--t2, #606266);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-item.active .nav-item-text {
+  color: var(--t1, #303133);
+  font-weight: 500;
+}
+
+.nav-item-actions {
+  display: none;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.nav-item:hover .nav-item-actions,
+.nav-item.active .nav-item-actions {
+  display: flex;
+}
+
+.nav-item-actions button {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--t3, #909399);
+  cursor: pointer;
+  font-size: 11px;
+  transition: background 0.12s, color 0.12s;
+}
+
+.nav-item-actions button:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--t2, #606266);
+}
+
+.nav-item-actions button.delete:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.sidebar-footer {
+  padding: 8px;
+  border-top: 1px solid var(--bd, #dcdfe6);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebar-footer button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--t3, #909399);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s, color 0.12s;
+}
+
+.sidebar-footer button:hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--t2, #606266);
+}
+</style>
diff --git a/ui/src/components/conversation/stream.ts b/ui/src/components/conversation/stream.ts
new file mode 100644
index 00000000000..76278d28bdf
--- /dev/null
+++ b/ui/src/components/conversation/stream.ts
@@ -0,0 +1,134 @@
+export class ConversationStream {
+  private response: any
+  private onChunk: (chunk: any) => void
+  private onFinish: () => void
+  private onError: (e: any) => void
+  private cancelled = false
+  private finished = false
+
+  constructor(
+    response: any,
+    onChunk: (chunk: any) => void,
+    onFinish: () => void,
+    onError: (e: any) => void
+  ) {
+    this.response = response
+    this.onChunk = onChunk
+    this.onFinish = onFinish
+    this.onError = onError
+  }
+
+  private finish() {
+    if (this.finished || this.cancelled) return
+    this.finished = true
+    this.onFinish()
+  }
+
+  async start() {
+    try {
+      const reader = this.response.body?.getReader()
+      if (!reader) {
+        console.log('No reader available, calling onFinish')
+        this.finish()
+        return
+      }
+
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      while (true) {
+        if (this.cancelled || this.finished) break
+
+        const { done, value } = await reader.read()
+        if (done) break
+
+        const decoded = decoder.decode(value, { stream: true })
+        console.log('Raw decoded:', decoded)
+        buffer += decoded
+        
+        const lines = buffer.split('\n')
+        buffer = lines.pop() || ''
+
+        for (const line of lines) {
+          if (this.cancelled || this.finished) break
+          const trimmed = line.trim()
+          if (!trimmed) continue
+
+          console.log('Processing line:', trimmed)
+
+          // SSE 格式：data: {...}
+          if (trimmed.startsWith('data:')) {
+            const data = trimmed.slice(5).trim()
+            if (data === '[DONE]') {
+              console.log('Received [DONE], finishing stream')
+              this.finish()
+              return
+            }
+
+            try {
+              const chunk = JSON.parse(data)
+              console.log('Parsed SSE chunk:', chunk)
+              this.onChunk(chunk)
+            } catch (e) {
+              console.warn('Failed to parse SSE data:', data, e)
+            }
+          } else {
+            // 尝试直接解析为 JSON
+            try {
+              const chunk = JSON.parse(trimmed)
+              if (chunk && typeof chunk === 'object') {
+                console.log('Parsed JSON chunk:', chunk)
+                this.onChunk(chunk)
+              }
+            } catch (e) {
+              // Skip invalid JSON
+            }
+          }
+        }
+      }
+
+      // 处理 buffer 中剩余的数据
+      if (!this.cancelled && !this.finished && buffer.trim()) {
+        const trimmed = buffer.trim()
+        console.log('Processing remaining buffer:', trimmed)
+        
+        if (trimmed.startsWith('data:')) {
+          const data = trimmed.slice(5).trim()
+          if (data !== '[DONE]') {
+            try {
+              const chunk = JSON.parse(data)
+              console.log('Parsed remaining SSE chunk:', chunk)
+              this.onChunk(chunk)
+            } catch (e) {
+              console.warn('Failed to parse remaining SSE data:', data, e)
+            }
+          }
+        } else {
+          try {
+            const chunk = JSON.parse(trimmed)
+            if (chunk && typeof chunk === 'object') {
+              console.log('Parsed remaining JSON chunk:', chunk)
+              this.onChunk(chunk)
+            }
+          } catch (e) {
+            console.warn('Failed to parse remaining JSON:', trimmed, e)
+          }
+        }
+      }
+
+      if (!this.cancelled) {
+        console.log('Stream finished, calling onFinish')
+        this.finish()
+      }
+    } catch (e) {
+      console.error('Stream error:', e)
+      if (!this.cancelled && !this.finished) {
+        this.onError(e)
+      }
+    }
+  }
+
+  cancel() {
+    this.cancelled = true
+  }
+}
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index d45f04a9679..8b1b3c38ad3 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -15,7 +15,7 @@
       <div
         v-else-if="item.type === 'question'"
         class="problem-button mt-4 mb-4"
-        :class="sendMessage && type !== 'log' ? 'cursor' : 'disabled'"
+        :class="resolvedSendMessage && type !== 'log' ? 'cursor' : 'disabled'"
         @click="handleQuestionClick(item.content)"
       >
         <el-space :size="8" alignment="flex-start">
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { config } from 'md-editor-v3'
 import HtmlRander from './HtmlRander.vue'
 import EchartsRander from './EchartsRander.vue'
@@ -62,6 +62,8 @@ config({
   },
 })
 
+const chat = inject<any>('chat', null)
+
 const props = withDefaults(
   defineProps<{
     source?: string
@@ -79,6 +81,8 @@ const props = withDefaults(
   },
 )
 
+const resolvedSendMessage = computed(() => props.sendMessage || chat?.sendMessage)
+
 type RenderNode = {
   type: string
   content: string
@@ -208,16 +212,16 @@ function getComponentProps(item: RenderNode) {
         runtime_node_id: props.runtime_node_id,
         child_node: props.child_node,
         disabled: props.disabled,
-        sendMessage: props.sendMessage,
+        sendMessage: resolvedSendMessage.value,
         form_setting: item.content,
       }
 
     case 'echarts_rander':
       return { option: item.content }
     case 'html_rander':
-      return { source: item.content, sendMessage: props.sendMessage }
+      return { source: item.content, sendMessage: resolvedSendMessage.value }
     case 'iframe_render':
-      return { source: item.content, sendMessage: props.sendMessage }
+      return { source: item.content, sendMessage: resolvedSendMessage.value }
     case 'tool_calls_render':
       return { content: item.content }
 
@@ -227,9 +231,9 @@ function getComponentProps(item: RenderNode) {
 }
 
 function handleQuestionClick(content: string) {
-  if (!props.sendMessage) return
+  if (!resolvedSendMessage.value) return
   if (props.type === 'log') return
-  props.sendMessage(content, 'new')
+  resolvedSendMessage.value(content, 'new')
 }
 </script>
 
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 7705e1a53cf..2837a1b32dc 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -96,45 +96,22 @@
     </div>
     <!-- 调试 -->
     <el-collapse-transition>
-      <div class="workflow-debug-container" :class="enlarge ? 'enlarge' : ''" v-if="showDebug">
-        <div class="workflow-debug-header" :class="!isDefaultTheme ? 'custom-header' : ''">
-          <div class="flex-between">
-            <div class="flex align-center">
-              <div class="mr-12 ml-24 flex">
-                <el-avatar
-                  v-if="isAppIcon(detail?.icon)"
-                  shape="square"
-                  :size="32"
-                  style="background: none"
-                >
-                  <img :src="resetUrl(detail?.icon)" alt="" />
-                </el-avatar>
-                <LogoIcon v-else height="32px" />
-              </div>
-
-              <h4 class="ellipsis" style="max-width: 270px" :title="detail?.name">
-                {{ detail?.name || $t('common.name') }}
-              </h4>
-            </div>
-            <div class="mr-16">
-              <el-button link @click="enlarge = !enlarge">
-                <AppIcon
-                  :iconName="enlarge ? 'app-minify' : 'app-magnify'"
-                  class="color-secondary"
-                  style="font-size: 20px"
-                >
-                </AppIcon>
-              </el-button>
+      <div class="workflow-debug-container" v-if="showDebug">
+        <div class="scrollbar-height">
+          <Conversation 
+            :application-details="detail" 
+            :type="'DEBUG'"
+            :default-open="false"
+            :default-mode="'auto'"
+          >
+            <template #header>
               <el-button link @click="showDebug = false">
                 <el-icon :size="20" class="color-secondary">
                   <Close />
                 </el-icon>
               </el-button>
-            </div>
-          </div>
-        </div>
-        <div class="scrollbar-height">
-          <AiChat :application-details="detail" :type="'debug-ai-chat'"></AiChat>
+            </template>
+          </Conversation>
         </div>
       </div>
     </el-collapse-transition>
@@ -160,6 +137,7 @@ import type { Action } from 'element-plus'
 import Workflow from '@/workflow/index.vue'
 import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
 import PublishHistory from '@/views/application-workflow/component/PublishHistory.vue'
+import Conversation from '@/components/conversation/index.vue'
 import { isAppIcon, resetUrl } from '@/utils/common'
 import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
@@ -207,7 +185,6 @@ const detail = ref<any>(null)
 
 const showPopover = ref(false)
 const showDebug = ref(false)
-const enlarge = ref(false)
 const saveTime = ref<any>('')
 const isSave = ref(false)
 const showHistory = ref(false)
@@ -711,15 +688,7 @@ onBeforeUnmount(() => {
   }
 
   .scrollbar-height {
-    height: calc(100% - var(--app-header-height) - 24px);
-    padding-top: 24px;
-  }
-
-  &.enlarge {
-    width: 50% !important;
-    height: 100% !important;
-    bottom: 0 !important;
-    right: 0 !important;
+    height: 100%;
   }
 
   .chat-width {