Merge branch 'beta' into 'master'

Beta

See merge request !171

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/message-item.vue

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { throttle } from 'lodash-es'
 import { CheckOne, Down } from '@icon-park/vue-next'
 import CustomLoading from './custom-loading.vue'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
 import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 import { useUserStore } from '@/store/modules/user'
+import { asBlob } from 'html-docx-js-typescript'
+import { downloadFile } from '@/utils/download-file'
+import { copyToClip } from '@/utils/copy'
 
 interface Props {
   role: 'user' | 'assistant'
@@ -24,6 +28,8 @@ const { t } = useI18n()
 const userStore = useUserStore()
 const personalAppConfigStore = usePersonalAppConfigStore()
 
+const markdownRenderRef = useTemplateRef<InstanceType<typeof MarkdownRender>>('markdownRenderRef')
+
 const isShowReasoningContent = ref(true)
 
 const useAvatar = computed(() => {
@@ -65,6 +71,32 @@ function handleAudioControl() {
 function handleShowReasoningContentSwitch() {
   isShowReasoningContent.value = !isShowReasoningContent.value
 }
+
+const handleContentDownload = throttle(
+  () => {
+    if (markdownRenderRef.value) {
+      const content = markdownRenderRef.value.getRenderTextContent()
+
+      asBlob(content).then((data) => {
+        downloadFile(data as Blob).then(() => {
+          window.$message.success(t('common_module.copy_success_message'))
+        })
+      })
+    }
+  },
+  1000,
+  { leading: true, trailing: false },
+)
+
+const handleContentCopy = throttle(
+  () => {
+    copyToClip(props.messageItem.textContent).then(() => {
+      window.$message.success(t('common_module.copy_success_message'))
+    })
+  },
+  1000,
+  { leading: true, trailing: false },
+)
 </script>
 
 <template>
@@ -109,6 +141,7 @@ function handleShowReasoningContentSwitch() {
               />
               <template v-else>
                 <MarkdownRender
+                  ref="markdownRenderRef"
                   :raw-text-content="
                     messageItem.reasoningContent
                       ? messageItem.reasoningContent
@@ -158,6 +191,7 @@ function handleShowReasoningContentSwitch() {
         <div v-else>
           <p class="break-all">
             <MarkdownRender
+              ref="markdownRenderRef"
               :raw-text-content="
                 messageItem.isEmptyContent
                   ? t('common_module.dialogue_module.empty_message_content')
@@ -173,6 +207,8 @@ function handleShowReasoningContentSwitch() {
         </div>
       </div>
 
+      <div class="flex w-full items-center justify-between">
+        <div>
           <div
             v-show="isShowAudioControl"
             class="text-font-color flex items-center gap-0.5"
@@ -180,7 +216,10 @@ function handleShowReasoningContentSwitch() {
             @click="handleAudioControl"
           >
             <i v-if="!messageItem.isVoicePlaying" class="iconfont icon-play text-[24px]" />
-        <div v-else class="mx-1.5 my-3 h-[12px] w-[12px] bg-[url(@/assets/images/playing.gif)] bg-[length:100%_100%]" />
+            <div
+              v-else
+              class="mx-1.5 my-3 h-[12px] w-[12px] bg-[url(@/assets/images/playing.gif)] bg-[length:100%_100%]"
+            />
 
             <span
               v-show="isPlayableAudio"
@@ -201,5 +240,21 @@ function handleShowReasoningContentSwitch() {
             <CustomLoading />
           </div>
         </div>
+
+        <div
+          v-show="role === 'assistant' && messageItem.textContent && !messageItem.isAnswerResponseLoading"
+          class="py-[10px] pr-[14px] text-end"
+        >
+          <i
+            class="iconfont icon-download hover:text-theme-color mr-[14px] transform cursor-pointer text-[14px]"
+            @click="handleContentDownload"
+          />
+          <i
+            class="iconfont icon-copy1 hover:text-theme-color transform cursor-pointer text-[14px]"
+            @click="handleContentCopy"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>

src/views/share/components/message-item.vue

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { throttle } from 'lodash-es'
 import { CheckOne, Down } from '@icon-park/vue-next'
 import CustomLoading from './custom-loading.vue'
 import MusicWavesLoading from './music-waves-loading.vue'
 import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
+import EditorDrawer from '@/components/editor-drawer/editor-drawer.vue'
 import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 import { useLayoutConfig } from '@/composables/useLayoutConfig'
 import { useUserStore } from '@/store/modules/user'
+import { copyToClip } from '@/utils/copy'
 
 interface Props {
   role: 'user' | 'assistant'
@@ -28,7 +31,11 @@ const userStore = useUserStore()
 
 const { isMobile } = useLayoutConfig()
 
+const markdownRenderRef = useTemplateRef<InstanceType<typeof MarkdownRender>>('markdownRenderRef')
+
 const isShowReasoningContent = ref(true)
+const isShowEditorDrawer = ref(false)
+const editorDrawerContent = ref('')
 
 const useAvatar = computed(() => {
   return userStore.userInfo.avatarUrl || 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
@@ -84,6 +91,21 @@ function handleAudioControl() {
 function handleShowReasoningContentSwitch() {
   isShowReasoningContent.value = !isShowReasoningContent.value
 }
+
+function handleContentEdit() {
+  isShowEditorDrawer.value = true
+  editorDrawerContent.value = props.messageItem.textContent || ''
+}
+
+const handleContentCopy = throttle(
+  () => {
+    copyToClip(props.messageItem.textContent).then(() => {
+      window.$message.success(t('common_module.copy_success_message'))
+    })
+  },
+  1000,
+  { leading: true, trailing: false },
+)
 </script>
 
 <template>
@@ -105,8 +127,8 @@ function handleShowReasoningContentSwitch() {
     />
 
     <div
-      class="flex w-full flex-col overflow-x-auto"
-      :class="isMobile && role === 'user' ? 'items-end' : 'items-start'"
+      class="flex flex-col overflow-x-auto"
+      :class="[isMobile && role === 'user' ? 'items-end' : 'items-start', isMobile ? 'w-full' : '']"
     >
       <template v-if="role === 'assistant' && isDeepSeekR1">
         <div class="my-[7px] select-none text-[14px]">
@@ -138,6 +160,7 @@ function handleShowReasoningContentSwitch() {
               />
               <template v-else>
                 <MarkdownRender
+                  ref="markdownRenderRef"
                   :raw-text-content="
                     messageItem.reasoningContent
                       ? messageItem.reasoningContent
@@ -189,6 +212,7 @@ function handleShowReasoningContentSwitch() {
         <div v-else>
           <p class="break-all">
             <MarkdownRender
+              ref="markdownRenderRef"
               :raw-text-content="
                 messageItem.isEmptyContent
                   ? t('common_module.dialogue_module.empty_message_content')
@@ -220,15 +244,20 @@ function handleShowReasoningContentSwitch() {
           </n-popover>
         </div>
       </div>
-
+      <!-- pc端展示 -->
+      <div v-show="!isMobile" class="flex w-full items-center justify-between">
+        <div>
           <div
-        v-show="isShowAudioControl && !isMobile"
+            v-show="isShowAudioControl"
             class="text-font-color flex items-center gap-0.5"
             :class="isPlayableAudio ? 'hover:text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed'"
             @click="handleAudioControl"
           >
             <i v-if="!messageItem.isVoicePlaying" class="iconfont icon-play text-[24px]" />
-        <div v-else class="mx-1.5 my-3 h-[12px] w-[12px] bg-[url(@/assets/images/playing.gif)] bg-[length:100%_100%]" />
+            <div
+              v-else
+              class="mx-1.5 my-3 h-[12px] w-[12px] bg-[url(@/assets/images/playing.gif)] bg-[length:100%_100%]"
+            />
 
             <span
               v-show="isPlayableAudio"
@@ -249,5 +278,23 @@ function handleShowReasoningContentSwitch() {
             <CustomLoading />
           </div>
         </div>
+
+        <div
+          v-show="role === 'assistant' && messageItem.textContent && !messageItem.isAnswerResponseLoading"
+          class="py-[10px] pr-[14px] text-end"
+        >
+          <i
+            class="iconfont icon-edit1 hover:text-theme-color mr-[14px] transform cursor-pointer text-[14px]"
+            @click="handleContentEdit"
+          />
+          <i
+            class="iconfont icon-copy1 hover:text-theme-color transform cursor-pointer text-[14px]"
+            @click="handleContentCopy"
+          />
         </div>
+      </div>
+    </div>
+  </div>
+
+  <EditorDrawer v-model:is-show-editor-drawer="isShowEditorDrawer" :content="editorDrawerContent" />
 </template>