feat: chat首页渲染优化

src/components/xt-chat/chat-view/components/sender-input/index.vue

@@ -0,0 +1,105 @@
+<script lang="tsx">
+import { ref } from 'vue';
+import { Sender } from 'ant-design-x-vue';
+import { Tooltip } from 'ant-design-vue';
+
+interface SenderInputProps {
+  modelValue?: string;
+  loading?: boolean;
+  placeholder?: string;
+}
+
+export default {
+  name: 'SenderInput',
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue', 'submit', 'cancel'],
+  setup(props: SenderInputProps, { emit, expose }) {
+    const senderRef = ref(null);
+    const localSearchValue = ref(props.modelValue);
+
+    // 监听外部value变化
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        localSearchValue.value = newValue || '';
+      },
+    );
+
+    const handleSubmit = () => {
+      emit('submit', localSearchValue.value);
+    };
+    const handleCancel = () => {
+      emit('cancel');
+    };
+
+    const focus = () => {
+      senderRef.value?.focus?.();
+    };
+
+    const renderActions = () => {
+      if (props.loading) {
+        return (
+          <Tooltip title="停止生成" onClick={handleCancel}>
+            <div class="w-32px h-32px p-6px flex justify-center items-center rounded-50% bg-#6D4CFE cursor-pointer">
+              <div class="w-12px h-12px rounded-2px bg-#FFF"></div>
+            </div>
+          </Tooltip>
+        );
+      }
+
+      return (
+        <div
+          onClick={handleSubmit}
+          class={`submit-btn  w-32px h-32px p-6px flex justify-center items-center rounded-50% cursor-pointer ${
+            !localSearchValue.value ? 'opacity-50' : ''
+          }`}
+        >
+          <icon-arrow-right size={20} class="color-#FFFFFF" />
+        </div>
+      );
+    };
+
+    expose({
+      focus,
+    });
+
+    return () => (
+      <div class="sender-input-wrap full h-120px">
+        <Sender
+          v-model:value={localSearchValue.value}
+          ref={senderRef}
+          onChange={(value: string) => emit('update:modelValue', value)}
+          onSubmit={handleSubmit}
+          class="h-full w-full mb-24px"
+          placeholder={props.placeholder}
+          actions={() => renderActions()}
+        />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sender-input-wrap {
+  :deep(.ant-sender) {
+    .submit-btn {
+      background: linear-gradient(125deg, #6d4cfe 32.25%, #3ba1f0 72.31%),
+        linear-gradient(113deg, #6d4cfe 0%, #b93bf0 100%);
+    }
+  }
+}
+</style>

src/components/xt-chat/chat-view/constants.ts

@@ -0,0 +1,31 @@
+import type { Ref } from 'vue';
+import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
+
+// 定义角色常量
+export const QUESTION_ROLE = 'question';
+export const ANSWER_ROLE = 'text';
+export const FILE_ROLE = 'file';
+export const THOUGHT_ROLE = 'thought';
+
+export const ROLE_STYLE = {
+  width: '600px',
+  margin: '0 auto',
+};
+
+export const ANSWER_STYLE = {
+  ...ROLE_STYLE,
+  paddingLeft: '12px',
+  borderLeft: '1px solid #E6E6E8',
+  position: 'relative',
+  left: '6px',
+};
+
+export interface UseChatHandlerReturn {
+  roles: BubbleListProps['roles'];
+  currentTaskId: Ref<string | null>;
+  handleMessage: (parsedData: { event: string; data: any }) => void;
+  generateLoading: Ref<boolean>;
+  conversationList: Ref<any[]>;
+  showRightView: Ref<boolean>;
+  rightViewContent: Ref<string>;
+}

src/components/xt-chat/chat-view/index.vue

@@ -0,0 +1,138 @@
+<script lang="tsx">
+import { message as antdMessage, Tooltip } from 'ant-design-vue';
+import { BubbleList } from '@/components/xt-chat/xt-bubble';
+import SenderInput from './components/sender-input/index.vue';
+import { Typography } from 'ant-design-vue';
+import RightView from './components/right-view/index.vue';
+
+import { useRoute } from 'vue-router';
+import { genRandomId } from '@/utils/tools';
+import { useChatStore } from '@/stores/modules/chat';
+import querySSE from '@/utils/querySSE';
+
+import useChatHandler from './useChatHandler';
+import { QUESTION_ROLE, ANSWER_ROLE } from './constants';
+
+export default {
+  props: {
+    inputInfo: {
+      type: Object as () => CHAT.TInputInfo,
+      default: null,
+    },
+  },
+  setup(props, { emit, expose }) {
+    const chatStore = useChatStore();
+
+    const route = useRoute();
+
+    const senderRef = ref(null);
+    const rightViewRef = ref(null);
+    const bubbleListRef = ref<any>(null);
+
+    const { roles, showRightView, rightViewContent, currentTaskId, handleMessage, conversationList, generateLoading } =
+      useChatHandler();
+
+    const conversationId = computed(() => {
+      return route.params.conversationId;
+    });
+
+    const handleSubmit = (message: string) => {
+      if (generateLoading.value) {
+        antdMessage.warning('停止生成后可发送');
+        return;
+      }
+
+      initSse({ message });
+    };
+
+    const handleCancel = () => {
+      generateLoading.value = false;
+      // 中止当前正在输出的回答
+      if (currentTaskId.value && bubbleListRef.value?.abortTypingByKey) {
+        bubbleListRef.value.abortTypingByKey(currentTaskId.value);
+      }
+      if (showRightView.value) {
+        rightViewRef.value?.abortTyping?.();
+      }
+      antdMessage.info('取消生成');
+    };
+
+    const initSse = (inputInfo: CHAT.TInputInfo) => {
+      try {
+        const { message } = inputInfo;
+
+        generateLoading.value = true;
+        conversationList.value.push({
+          role: QUESTION_ROLE,
+          content: message,
+        });
+
+        const taskId = genRandomId();
+        currentTaskId.value = taskId;
+
+        const url = `http://localhost:3000/agent/input?content=${message}&session_id=${conversationId.value}&agent_id=${chatStore.agentInfo?.agent_id}`;
+        querySSE(
+          {
+            handleMessage,
+          },
+          url,
+        );
+      } catch (error) {
+        console.error('Failed to initialize SSE:', error);
+        antdMessage.error('初始化连接失败');
+        generateLoading.value = false;
+      }
+    };
+
+    watch(
+      () => props.inputInfo,
+      (newVal) => {
+        newVal && initSse(newVal);
+      },
+      { deep: true },
+    );
+
+    return () => (
+      <div class="chat-view-wrap w-full h-full flex">
+        <section class="flex-1 flex flex-col pt-20px justify-center relative px-16px">
+          <div class="flex-1 overflow-hidden pb-20px">
+            <BubbleList
+              ref={bubbleListRef}
+              roles={roles}
+              items={[
+                ...conversationList.value,
+                generateLoading.value ? { loading: true, role: ANSWER_ROLE } : null,
+              ].filter(Boolean)}
+            />
+          </div>
+          <div class="w-full flex flex-col justify-center items-center">
+            <SenderInput
+              class="w-600px"
+              ref={senderRef}
+              placeholder="继续追问..."
+              loading={generateLoading.value}
+              onSubmit={handleSubmit}
+              onCancel={handleCancel}
+            />
+            <p class="cts !color-#939499 text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
+          </div>
+        </section>
+
+        {/* 右侧展示区域 */}
+        {showRightView.value && (
+          <RightView
+            ref={rightViewRef}
+            rightViewContent={rightViewContent.value}
+            showRightView={showRightView.value}
+            onClose={() => (showRightView.value = false)}
+          />
+        )}
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/components/xt-chat/chat-view/style.scss

@@ -1,4 +1,4 @@
-.conversation-detail-wrap {
+.chat-view-wrap {
   .cts {
     color: var(--Text-1, #737478);
     font-size: 14px;
@@ -16,5 +16,16 @@
       justify-content: center;
       align-items: center;
     }
+    &.process-row {
+      position: relative;
+      &::after {
+        top: 0;
+        left: 0;
+        position: absolute;
+        width: 1px;
+        height: 100%;
+        background: #e6e6e8;
+      }
+    }
   }
 }

src/components/xt-chat/chat-view/useChatHandler.tsx

@@ -0,0 +1,228 @@
+import { ref, } from 'vue';
+
+import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
+import markdownit from 'markdown-it';
+import { message as antdMessage } from 'ant-design-vue';
+import { IconFile, IconCaretUp, IconDownload, IconRefresh } from '@arco-design/web-vue/es/icon';
+
+import { Tooltip } from 'ant-design-vue';
+import TextOverTips from '@/components/text-over-tips/index.vue';
+import { genRandomId } from '@/utils/tools';
+
+import icon1 from "@/assets/img/agent/icon-end.png"
+import icon2 from "@/assets/img/agent/icon-loading.png"
+
+import { useClipboard } from '@vueuse/core';
+import { QUESTION_ROLE, ANSWER_ROLE, FILE_ROLE, THOUGHT_ROLE, ROLE_STYLE, ANSWER_STYLE } from './constants';
+import type { UseChatHandlerReturn } from "./constants"
+
+/** 
+ * 聊天处理器Hook 
+ * @returns 包含角色配置、消息处理函数和对话列表的对象 
+ */
+export default function useChatHandler(): UseChatHandlerReturn {
+  // 在内部定义对话列表
+  const { copy } = useClipboard();
+
+  const conversationList = ref<any[]>([]);
+  const generateLoading = ref<Boolean>(false);
+  const currentTaskId = ref<string | null>(null);
+  const showRightView = ref(false);
+  const rightViewContent = ref('');
+
+  // 初始化markdown 
+  const md = markdownit({
+    html: true,
+    breaks: true,
+    linkify: true,
+    typographer: true,
+  });
+
+  // 定义角色配置 
+  const roles: BubbleListProps['roles'] = {
+    [ANSWER_ROLE]: {
+      placement: 'start',
+      variant: 'borderless',
+      typing: { step: 2, interval: 100 },
+      onTypingComplete: () => {
+        currentTaskId.value = null;
+      },
+      style: ROLE_STYLE
+    },
+    [FILE_ROLE]: {
+      placement: 'start',
+      variant: 'borderless',
+      typing: { step: 2, interval: 100 },
+      messageRender: (items) => {
+        return items.map((item) => (
+          <div class="file-card">
+            <IconFile class="w-24px h-24px mr-20px color-#6D4CFE" />
+            <div>
+              <TextOverTips
+                context={item.name}
+                class="font-family-medium color-#211F24 text-14px font-400 lh-22px mb-4px"
+              />
+              <span class="color-#939499 font-family-regular text-12px font-400 lh-22px">创建时间：08-04 12:40</span>
+            </div>
+          </div>
+        ));
+      },
+      style: ROLE_STYLE
+    },
+    [THOUGHT_ROLE]: {
+      placement: 'start',
+      variant: 'borderless',
+      style: ROLE_STYLE
+    },
+    [QUESTION_ROLE]: {
+      placement: 'end',
+      shape: 'round',
+      style: ROLE_STYLE
+    },
+  };
+
+  // 下载处理 
+  const onDownload = (content: string) => {
+    console.log('onDownload', content);
+    // 这里可以添加实际的下载逻辑 
+  };
+
+  const onCopy = (content: string) => {
+    copy(content);
+    antdMessage.success('复制成功！');
+  };
+
+  // 开始处理 
+  const handleStart = (data: any) => {
+    const { run_id } = data;
+    conversationList.value.push({
+      run_id,
+      role: ANSWER_ROLE,
+      content: (
+        <div class="flex items-center">
+          <span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
+          <IconCaretUp size={16} class="color-#211F24" />
+        </div>
+      ),
+    });
+  };
+
+  // 节点更新处理 
+  const handleNodeUpdate = (data: any) => {
+    const { run_id, status, output } = data;
+
+    switch (status) {
+      case 'TeamRunResponseContent':
+        conversationList.value.push({
+          run_id,
+          content: data,
+          role: ANSWER_ROLE,
+          messageRender: (item) => (
+            <div class='flex items-center'>
+              <img src={icon2} width={13} height={13} class="mr-4px" />
+              <span>{item.message}</span>
+            </div>
+          )
+        });
+        break;
+      case 'TeamRunCompleted':
+        conversationList.value.push({
+          run_id,
+          content: output,
+          role: ANSWER_ROLE,
+          messageRender: (content: string) => <div v-html={md.render(content)}></div>,
+          style: ANSWER_STYLE
+        });
+        break;
+    }
+  };
+
+  // 最终结果处理 
+  const handleFinalResult = (data: any) => {
+    const { run_id, output } = data;
+
+    if (showRightView) {
+      showRightView.value = true;
+    }
+    const _files = output?.files;
+    rightViewContent.value = _files?.[0]?.content || '';
+
+    conversationList.value.push({
+      run_id,
+      id: currentTaskId.value,
+      role: FILE_ROLE,
+      content: _files,
+      style: ANSWER_STYLE,
+      footer: ({ item }: { item: any }) => {
+        const nonQuestionElements = conversationList.value.filter((item) => item.role !== QUESTION_ROLE);
+        const isLastAnswer = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id;
+
+        // return (
+        //   <div class="flex items-center">
+        //     <Tooltip title="下载" onClick={() => onDownload(rightViewContent?.value || '')}>
+        //       <IconDownload size={16} class="color-#737478 cursor-pointer" />
+        //     </Tooltip>
+        //     {isLastAnswer && onRefresh && (
+        //       <Tooltip title="重新生成" onClick={() => onRefresh(currentTaskId.value!, conversationList.value.length)}>
+        //         <IconRefresh size={16} class="color-#737478 cursor-pointer" />
+        //       </Tooltip>
+        //     )}
+        //   </div>
+        // );
+      },
+    });
+  };
+
+  // 重置生成状态 
+  const resetGenerateStatus = () => {
+    generateLoading.value = false;
+  };
+
+  // 错误处理 
+  const handleError = () => {
+    resetGenerateStatus();
+    antdMessage.error('连接服务器失败');
+  };
+
+  const onRefresh = (tempId: string, tempIndex: number) => {
+    generateLoading.value = true;
+    conversationList.value.splice(tempIndex, 1, {
+      id: tempId,
+      loading: true,
+    });
+  };
+
+  // 消息处理主函数 
+  const handleMessage = (parsedData: { event: string; data: any }) => {
+    const { event, data } = parsedData;
+    switch (event) {
+      case 'start':
+        handleStart(data);
+        break;
+      case 'node_update':
+        handleNodeUpdate(data);
+        break;
+      case 'final_result':
+        handleFinalResult(data);
+        break;
+      case 'end':
+        resetGenerateStatus();
+        break;
+      case 'error':
+        handleError();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return {
+    roles,
+    currentTaskId,
+    handleMessage,
+    generateLoading,
+    conversationList,
+    showRightView,
+    rightViewContent,
+  };
+}

src/stores/modules/chat/index.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
-import { createSession } from '@/api/all/chat';
+import { createSession, getAgentInfo } from '@/api/all/chat';
+
 import { handleUserHome } from '@/utils/user';
 
 interface ChatState {
@@ -24,6 +25,12 @@ export const useChatStore = defineStore('chat', {
     clearSearchValue() {
       this.searchValue = '';
     },
+    async getAgentInfo() {
+      const { code, data } = await getAgentInfo();
+      if (code === 200) {
+        this.setAgentInfo(data);
+      }
+    },
     setAgentInfo(agentInfo: agentInfo) {
       this.agentInfo = agentInfo;
     },

src/types/chat.ts

@@ -0,0 +1,7 @@
+declare global {
+  namespace CHAT {
+    export type TInputInfo = {
+      message: string;
+    };
+  }
+}

src/utils/querySSE.ts

@@ -63,11 +63,11 @@ export default async (config: SSEConfig, url: string = DEFAULT_SSE_URL): Promise
       }
     },
     onerror(error: Error) {
-      console.error('SSE error:', error);
+    //   console.error('SSE error:', error);
       handleError?.(error);
     },
     onclose() {
-      console.log('SSE connection closed');
+    //   console.log('SSE connection closed');
       handleClose?.();
     },
     async onopen(response: Response) {

src/views/home/components/conversation-detail/index.vue

@@ -1,322 +0,0 @@
-<script lang="tsx">
-import { message, Tooltip } from 'ant-design-vue';
-import { BubbleList } from '@/components/xt-chat/xt-bubble';
-import SenderInput from '../sender-input/index.vue';
-import { Typography } from 'ant-design-vue';
-import RightView from './rightView.vue';
-import TextOverTips from '@/components/text-over-tips/index.vue';
-
-import { useRoute } from 'vue-router';
-import markdownit from 'markdown-it';
-import { useClipboard } from '@vueuse/core';
-import { genRandomId } from '@/utils/tools';
-import { useChatStore } from '@/stores/modules/chat';
-import { getHeaders } from '@/api/all/chat';
-import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
-import querySSE from '@/utils/querySSE';
-
-const QUESTION_ROLE = 'question';
-const ANSWER_ROLE = 'text';
-const FILE_ROLE = 'file';
-const THOUGHT_ROLE = 'thought'; // 新增思考过程角色常量
-
-export default {
-  setup(props, { emit, expose }) {
-    const chatStore = useChatStore();
-
-    const route = useRoute();
-    const { copy } = useClipboard();
-
-    const senderRef = ref(null);
-    const rightViewRef = ref(null);
-    const bubbleListRef = ref<any>(null);
-    const searchValue = ref('');
-    const generateLoading = ref(false);
-    const conversationList = ref([]);
-    const currentAnswerId = ref<string | null>(null);
-
-    const showRightView = ref(false);
-    const rightViewContent = ref('');
-
-    const md = markdownit({
-      html: true,
-      breaks: true,
-      linkify: true,
-      typographer: true,
-    });
-
-    const conversationId = computed(() => {
-      return route.params.conversationId;
-    });
-
-    const onCopy = (content: string) => {
-      copy(content);
-      message.success('复制成功！');
-    };
-
-    const onRefresh = (tempId: string, tempIndex: number) => {
-      generateLoading.value = true;
-      conversationList.value.splice(tempIndex, 1, {
-        id: tempId,
-        loading: true,
-        role: ANSWER_ROLE,
-      });
-    };
-
-    const handleSubmit = () => {
-      if (generateLoading.value) {
-        message.warning('停止生成后可发送');
-        return;
-      }
-
-      generateLoading.value = true;
-      conversationList.value.push({
-        role: QUESTION_ROLE,
-        content: searchValue.value,
-      });
-
-      const tempId = genRandomId();
-      const tempIndex = conversationList.value.length;
-      conversationList.value.push({
-        id: tempId,
-        loading: true,
-        role: ANSWER_ROLE,
-      });
-      currentAnswerId.value = tempId;
-
-      initSse();
-    };
-
-    const handleCancel = () => {
-      generateLoading.value = false;
-      // 中止当前正在输出的回答
-      if (currentAnswerId.value && bubbleListRef.value?.abortTypingByKey) {
-        bubbleListRef.value.abortTypingByKey(currentAnswerId.value);
-      }
-      if (showRightView.value) {
-        rightViewRef.value?.abortTyping?.();
-      }
-      message.info('取消生成');
-    };
-
-    const roles: BubbleListProps['roles'] = {
-      [ANSWER_ROLE]: {
-        placement: 'start',
-        variant: 'borderless',
-        typing: { step: 2, interval: 100 },
-        onTypingComplete: () => {
-          console.log('onTypingComplete');
-          generateLoading.value = false;
-          currentAnswerId.value = null;
-        },
-        style: {
-          width: '600px',
-          margin: '0 auto',
-        },
-      },
-      [FILE_ROLE]: {
-        placement: 'start',
-        variant: 'borderless',
-        typing: { step: 2, interval: 100 },
-        messageRender: (items) => {
-          return items.map((item) => (
-            <div class="file-card">
-              <icon-file class="w-17px h-20px mr-20px color-#6D4CFE" />
-              <div>
-                <TextOverTips
-                  context={item.name}
-                  class="font-family-medium color-#211F24 text-14px font-400 lh-22px mb-4px"
-                />
-                <span class="color-#939499 font-family-regular text-12px font-400 lh-22px">创建时间：08-04 12:40</span>
-              </div>
-            </div>
-          ));
-        },
-
-        style: {
-          width: '600px',
-          margin: '0 auto',
-        },
-      },
-      // 新增思考过程角色配置
-      [THOUGHT_ROLE]: {
-        placement: 'start',
-        variant: 'borderless',
-        style: {
-          width: '600px',
-          margin: '0 auto',
-        },
-      },
-      [QUESTION_ROLE]: {
-        placement: 'end',
-        shape: 'round',
-        style: {
-          width: '600px',
-          margin: '0 auto',
-        },
-      },
-    };
-
-    const onDownload = (content) => {
-      console.log('onDownload', content);
-    };
-
-    const initSse = () => {
-      const handleStart = () => {
-        conversationList.value.push({
-          role: ANSWER_ROLE,
-          content: (
-            <div class="flex items-center ">
-              <span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
-              <icon-caret-up size={16} class="color-#211F24" />
-            </div>
-          ),
-        });
-      };
-
-      const handleNodeUpdate = (data) => {
-        switch (data.status) {
-          case 'running':
-            conversationList.value.push({
-              content: data.message,
-              role: ANSWER_ROLE,
-            });
-            break;
-          case 'success':
-            conversationList.value.push({
-              content: data.output,
-              role: ANSWER_ROLE,
-              messageRender: (content) => <div v-html={md.render(content)}></div>,
-            });
-            break;
-        }
-      };
-
-      const handleFinalResult = (data) => {
-        showRightView.value = true;
-        const _files = data.output?.files;
-        rightViewContent.value = _files[0]?.content || '';
-
-        conversationList.value.push({
-          id: currentAnswerId.value,
-          role: FILE_ROLE,
-          content: _files,
-          footer: ({ item }) => {
-            const nonQuestionElements = conversationList.value.filter((item) => item.role !== QUESTION_ROLE);
-            const isLastAnswer = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id;
-
-            return (
-              <div class="flex items-center">
-                <Tooltip title="下载" onClick={() => onDownload(rightViewContent.value)}>
-                  <icon-download size={16} class="color-#737478 cursor-pointer" />
-                </Tooltip>
-                {isLastAnswer && (
-                  <Tooltip
-                    title="重新生成"
-                    onClick={() => onRefresh(currentAnswerId.value, conversationList.value.length)}
-                  >
-                    <icon-refresh size={16} class="color-#737478 cursor-pointer" />
-                  </Tooltip>
-                )}
-              </div>
-            );
-          },
-        });
-      };
-
-      const handleEnd = () => {
-        generateLoading.value = false;
-      };
-      const handleError = () => {
-        generateLoading.value = false;
-        message.error('连接服务器失败');
-      };
-
-      try {
-        const url = `http://localhost:3000/agent/input?content=${searchValue.value}&session_id=${conversationId.value}&agent_id=${chatStore.agentInfo?.agent_id}`;
-        searchValue.value = '';
-        querySSE(
-          {
-            handleMessage(parsedData) {
-              const { event, data } = parsedData;
-              switch (event) {
-                case 'start':
-                  handleStart();
-                  break;
-                case 'node_update':
-                  handleNodeUpdate(data);
-                  break;
-                case 'final_result':
-                  handleFinalResult(data);
-                  break;
-                case 'end':
-                  handleEnd();
-                  break;
-                case 'error':
-                  handleError();
-                  break;
-                default:
-                  break;
-              }
-            },
-            async handleOpen(response) {
-              console.log('onopen', response);
-            },
-          },
-          url,
-        );
-      } catch (error) {
-        console.error('Failed to initialize SSE:', error);
-        message.error('初始化连接失败');
-        generateLoading.value = false;
-      }
-    };
-
-    onMounted(() => {
-      searchValue.value = chatStore.searchValue;
-      chatStore.clearSearchValue();
-      searchValue.value && initSse();
-    });
-
-
-    return () => (
-      <div class="conversation-detail-wrap w-full h-full flex">
-        <section class="flex-1 flex flex-col pt-20px justify-center relative px-16px">
-          {/* <div class="w-full h-full  flex "> */}
-          <div class="flex-1 overflow-hidden pb-20px">
-            <BubbleList ref={bubbleListRef} roles={roles} items={conversationList.value} />
-          </div>
-          <div class="w-full flex flex-col justify-center items-center">
-            <SenderInput
-              class="w-600px"
-              ref={senderRef}
-              placeholder="继续追问..."
-              loading={generateLoading.value}
-              v-model={searchValue.value}
-              onSubmit={handleSubmit}
-              onCancel={handleCancel}
-              data-ne="123"
-            />
-            <p class="cts !color-#939499 text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
-          </div>
-          {/* </div> */}
-        </section>
-
-        {/* 右侧展示区域 */}
-        {showRightView.value && (
-          <RightView
-            ref={rightViewRef}
-            rightViewContent={rightViewContent.value}
-            showRightView={showRightView.value}
-            onClose={() => (showRightView.value = false)}
-          />
-        )}
-      </div>
-    );
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss';
-</style>

src/views/home/components/created/index.vue

@@ -43,9 +43,6 @@ export default {
       senderRef.value?.focus();
     };
 
-    onMounted(() => {
-      chatStore.clearSearchValue();
-    });
 
     return () => (
       <div class="create-conversation-wrap w-full h-full flex justify-center">

src/views/home/index.vue

@@ -1,38 +1,37 @@
 <script lang="tsx">
 import { useRoute } from 'vue-router';
 import { ref, computed } from 'vue';
-import { getAgentInfo } from '@/api/all/chat';
 import { useChatStore } from '@/stores/modules/chat';
 
 import HistoryConversationDrawer from './components/history-conversation-drawer/index.vue';
-import ConversationDetail from './components/conversation-detail/index.vue';
+import ConversationDetail from '@/components/xt-chat/chat-view/index.vue';
 import ConversationCreate from './components/created/index.vue';
 
 export default {
   setup(props, { emit, expose }) {
     const route = useRoute();
-    const chatStore = useChatStore();
     const historyConversationDrawerRef = ref(null);
+    const chatStore = useChatStore();
+    const searchValue = ref('');
 
     const conversationId = computed(() => {
       return route.params.conversationId;
     });
 
-    const getAgentData = async () => {
-      const { code, data } = await getAgentInfo();
-      if (code === 200) {
-        chatStore.setAgentInfo(data);
-      }
-    };
-
     onMounted(() => {
-      console.log('getAgentData')
-      getAgentData();
+      chatStore.getAgentInfo();
+
+      searchValue.value = chatStore.searchValue;
+      chatStore.clearSearchValue();
     });
-    
+
     return () => (
       <div class="chat-wrap rounded-12px w-full h-full">
-        {conversationId.value ? <ConversationDetail /> : <ConversationCreate />}
+        {conversationId.value ? (
+          <ConversationDetail inputInfo={{ message: searchValue.value }} />
+        ) : (
+          <ConversationCreate />
+        )}
 
         {/**历史对话入口 */}
         <div