perf: 逻辑调整

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

@@ -32,7 +32,10 @@
 
   .xt-bubble-content {
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    max-width: 100%;
     @include cts;
     &-filled {
       background-color: #f2f3f5;

src/components/xt-chat/xt-bubble/types.ts

@@ -70,7 +70,8 @@ export interface _AvatarProps extends AvatarProps {
  * 气泡组件属性接口
  * 定义气泡组件的所有可配置属性
  */
-export interface BubbleProps<ContentType extends BubbleContentType = string> extends /* @vue-ignore */ Omit<HTMLAttributes, 'content'> {
+export interface BubbleProps<ContentType extends BubbleContentType = string>
+  extends /* @vue-ignore */ Omit<HTMLAttributes, 'content'> {
   /** 组件前缀类名 */
   prefixCls?: string;
   /** 根元素的自定义类名 */
@@ -102,9 +103,13 @@ export interface BubbleProps<ContentType extends BubbleContentType = string> ext
   /** 打字完成时的回调函数 */
   onTypingComplete?: VoidFunction;
   /** 头部内容：可以是VNode、字符串或渲染函数 */
-  header?: AvoidValidation<VNode | string | ((content: ContentType, info: SlotInfoType) => VNode | string)>;
+  header?: AvoidValidation<
+    VNode | string | ((params: { content: ContentType; info: SlotInfoType; item: BubbleProps<any> }) => VNode | string)
+  >;
   /** 底部内容：可以是VNode、字符串或渲染函数 */
-  footer?: AvoidValidation<VNode | string | ((content: ContentType, info: SlotInfoType) => VNode | string)>;
+  footer?: AvoidValidation<
+    VNode | string | ((params: { content: ContentType; info: SlotInfoType; item: BubbleProps<any> }) => VNode | string)
+  >;
 }
 
 /**

src/components/xt-chat/xt-bubble/xt-bubble.vue

@@ -85,16 +85,16 @@ export default defineComponent({
 
     const renderHeader = () => {
       const info: SlotInfoType = { key: props._key };
-      if (slots.header) return slots.header({ content: typedContent.value as any, info }) as any;
+      if (slots.header) return slots.header({ content: typedContent.value as any, info, item: props }) as any;
-      const h = props.header as any;
+      const h = props.header;
-      return typeof h === 'function' ? h(typedContent.value as any, info) : h;
+      return typeof h === 'function' ? h({ content: typedContent.value as any, info, item: props }) : h;
     };
 
     const renderFooter = () => {
       const info: SlotInfoType = { key: props._key };
-      if (slots.footer) return slots.footer({ content: typedContent.value as any, info }) as any;
+      if (slots.footer) return slots.footer({ content: typedContent.value as any, info, item: props }) as any;
-      const f = props.footer as any;
+      const f = props.footer;
-      return typeof f === 'function' ? f(typedContent.value as any, info) : f;
+      return typeof f === 'function' ? f({ content: typedContent.value as any, info, item: props }) : f;
     };
 
     return () => (

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

@@ -1,11 +1,13 @@
 <script lang="tsx">
-import { message } from 'ant-design-vue';
+import { message, Tooltip } from 'ant-design-vue';
 import { BubbleList } from '@/components/xt-chat/xt-bubble';
 import type { BubbleListProps } from 'ant-design-x-vue';
 import { useRoute } from 'vue-router';
 import SenderInput from '../sender-input/index.vue';
 import markdownit from 'markdown-it';
 import { Typography } from 'ant-design-vue';
+import { useClipboard } from '@vueuse/core';
+import { genRandomId } from '@/utils/tools';
 
 const QUESTION_ROLE = 'question';
 const ANSWER_ROLE = 'text';
@@ -13,6 +15,8 @@ const ANSWER_ROLE = 'text';
 export default {
   setup(props, { emit, expose }) {
     const route = useRoute();
+    const { copy, copied, isSupported } = useClipboard();
+
     const senderRef = ref(null);
     const searchValue = ref('');
     const generateLoading = ref(false);
@@ -23,14 +27,33 @@ export default {
       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 = Date.now();
+      const tempId = genRandomId();
       const tempIndex = conversationList.value.length;
       conversationList.value.push({
         id: tempId,
@@ -39,9 +62,7 @@ export default {
       });
 
       setTimeout(() => {
-        const content = `> Render as markdown content to show rich text!
+        const content = `> Render as markdown content to show rich text!`;
-          Link: [Ant Design X](https://x.ant.design)
-      `;
         searchValue.value = '';
         conversationList.value.splice(tempIndex, 1, {
           id: tempId,
@@ -53,6 +74,24 @@ export default {
               <div v-html={md.render(content)}></div>
             </Typography>
           ),
+          footer: ({ item }) => {
+            // 判断当前元素是否是最后一个非QUESTION_ROLE的元素
+            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={() => onCopy(content)}>
+                  <icon-copy size={16} class="mr-12px color-#737478 cursor-pointer" />
+                </Tooltip>
+                {isLastAnswer && (
+                  <Tooltip title="重新生成" onClick={() => onRefresh(tempId, tempIndex)}>
+                    <icon-refresh size={16} class="color-#737478 cursor-pointer" />
+                  </Tooltip>
+                )}
+              </div>
+            );
+          },
         });
       }, 1000);
     };
@@ -74,7 +113,7 @@ export default {
       },
       [QUESTION_ROLE]: {
         placement: 'end',
-        shape: 'round'
+        shape: 'round',
       },
     };
 
@@ -88,8 +127,8 @@ export default {
                 class="w-full"
                 ref={senderRef}
                 placeholder="继续追问..."
-                v-model={searchValue.value}
                 loading={generateLoading.value}
+                v-model={searchValue.value}
                 onSubmit={handleSubmit}
                 onCancel={handleCancel}
               />

src/views/home/components/sender-input/index.vue

@@ -39,9 +39,7 @@ export default {
     );
 
     const handleSubmit = () => {
-      if (!props.loading) {
+      emit('submit', localSearchValue.value);
-        emit('submit', localSearchValue.value);
-      }
     };
     const handleCancel = () => {
       emit('cancel');