perf: 逻辑调整

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!
-          Link: [Ant Design X](https://x.ant.design)
-      `;
+        const content = `> Render as markdown content to show rich text!`;
         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');