feat: chat首页渲染优化

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

@@ -0,0 +1,122 @@
+<script lang="tsx">
+import { Button } from '@arco-design/web-vue';
+import { Bubble } from '@/components/xt-chat/xt-bubble';
+
+import { downloadByUrl } from '@/utils/tools';
+import markdownit from 'markdown-it';
+import { message } from 'ant-design-vue';
+
+export default {
+  emits: ['close'],
+  props: {
+    showRightView: {
+      type: Boolean,
+      default: false,
+    },
+    rightViewContent: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit, expose }) {
+    const bubbleRef = ref(null);
+
+    const md = markdownit({
+      html: true,
+      breaks: true,
+      linkify: true,
+      typographer: true,
+    });
+
+    const onDownload = () => {
+      //   downloadByUrl('');
+      message.success('下载成功！');
+    };
+    const onAddMediaCenter = () => {
+      message.success('成功添加至“素材中心”模块。');
+    };
+    const onAddTaskManage = () => {
+      message.success('成功添加至“任务管理”模块。');
+    };
+    const abortTyping = () => {
+      bubbleRef.value?.abortTyping?.();
+    };
+    const renderHeader = () => {
+      return (
+        <header class="header flex justify-end items-center mb-16px px-32px">
+          <Button
+            type="outline"
+            size="medium"
+            class="mr-16px"
+            v-slots={{ icon: () => <icon-plus size="14" /> }}
+            onClick={onAddMediaCenter}
+          >
+            素材中心
+          </Button>
+          <Button
+            type="outline"
+            size="medium"
+            class="mr-16px"
+            v-slots={{ icon: () => <icon-plus size="14" /> }}
+            onClick={onAddTaskManage}
+          >
+            任务管理
+          </Button>
+          <Button
+            type="outline"
+            size="medium"
+            class="mr-16px"
+            v-slots={{ icon: () => <icon-download size="14" /> }}
+            onClick={onDownload}
+          >
+            下载
+          </Button>
+          <div class="line mr-24px w-1px h-16px bg-#B1B2B5"></div>
+          <icon-close size={20} class="color-#737478 cursor-pointer" onClick={() => emit('close')} />
+        </header>
+      );
+    };
+    const renderContainer = () => {
+      return (
+        <section class="flex-1 overflow-y-auto content flex justify-center px-32px">
+          <Bubble
+            ref={bubbleRef}
+            placement="start"
+            variant="borderless"
+            style={{ width: '100%' }}
+            typing={{ step: 2, interval: 100 }}
+            content={props.rightViewContent}
+            onTypingComplete={() => {
+              console.log('onTypingComplete');
+            }}
+            messageRender={(content) => <div v-html={md.render(content)}></div>}
+          />
+        </section>
+      );
+    };
+
+    expose({
+      abortTyping,
+    });
+    return () => (
+      <div class="right-view-wrap flex-1 flex flex-col overflow-hidden py-20px">
+        {renderHeader()}
+        {renderContainer()}
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.right-view-wrap {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  @media (max-width: 900px) {
+    .header,
+    .content {
+      padding-left: 16px !important;
+      padding-right: 16px !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+.chat-view-wrap {
+  .cts {
+    color: var(--Text-1, #737478);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  :deep(.xt-bubble) {
+    .file-card {
+      border-radius: 12px;
+      border: 1px solid var(--Border-2, #e6e6e8);
+      background: linear-gradient(90deg, #f6f4ff 0%, #fff 100%);
+      padding: 13px 16px;
+      display: flex;
+      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,
+  };
+}