Skip to content

P
poc-fe
Commit 7f0a1d4c authored by nick zheng's avatar nick zheng
Browse files
Options

Merge branch 'beta' into 'master' 

Beta

See merge request !171
parents 8172e088 de89d166
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 52 deletions
src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/message-item.vue
View file @ 7f0a1d4c
<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,32 +207,53 @@ function handleShowReasoningContentSwitch() {
</div>
</div>
<div
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 class="flex w-full items-center justify-between">
<div>
<div
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%]"
/>
<span
v-show="isPlayableAudio"
class="text-[12px]"
:class="messageItem.isVoicePlaying ? 'text-theme-color' : ''"
>
{{ messageItem.isVoicePlaying ? t('common_module.stop_playing') : t('common_module.start_playing') }}
</span>
<n-popover style="max-width: 310px">
<template #trigger>
<span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
</template>
{{ t('common_module.unplayable_tip') }}
</n-popover>
</div>
<span
v-show="isPlayableAudio"
class="text-[12px]"
:class="messageItem.isVoicePlaying ? 'text-theme-color' : ''"
>
{{ messageItem.isVoicePlaying ? t('common_module.stop_playing') : t('common_module.start_playing') }}
</span>
<n-popover style="max-width: 310px">
<template #trigger>
<span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
</template>
{{ t('common_module.unplayable_tip') }}
</n-popover>
</div>
<div v-if="isShowVoiceLoading" class="py-3.5 pl-6">
<CustomLoading />
</div>
</div>
<div v-if="isShowVoiceLoading" class="py-3.5 pl-6">
<CustomLoading />
<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>
......
src/views/share/components/message-item.vue
View file @ 7f0a1d4c
<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,34 +244,57 @@ function handleShowReasoningContentSwitch() {
</n-popover>
</div>
</div>
<!-- pc端展示 -->
<div v-show="!isMobile" class="flex w-full items-center justify-between">
<div>
<div
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-show="isShowAudioControl && !isMobile"
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%]" />
<span
v-show="isPlayableAudio"
class="text-[12px]"
:class="messageItem.isVoicePlaying ? 'text-theme-color' : ''"
>
{{ messageItem.isVoicePlaying ? t('common_module.stop_playing') : t('common_module.start_playing') }}
</span>
<n-popover style="max-width: 310px">
<template #trigger>
<span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
</template>
{{ t('common_module.unplayable_tip') }}
</n-popover>
</div>
<span
v-show="isPlayableAudio"
class="text-[12px]"
:class="messageItem.isVoicePlaying ? 'text-theme-color' : ''"
>
{{ messageItem.isVoicePlaying ? t('common_module.stop_playing') : t('common_module.start_playing') }}
</span>
<n-popover style="max-width: 310px">
<template #trigger>
<span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
</template>
{{ t('common_module.unplayable_tip') }}
</n-popover>
</div>
<div v-if="isShowWebVoiceLoading" class="py-3.5 pl-5">
<CustomLoading />
</div>
</div>
<div v-if="isShowWebVoiceLoading" class="py-3.5 pl-5">
<CustomLoading />
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment