完善分享功能 console.log(item, '==2222222=')
This commit is contained in:
cbb
@@ -177,7 +177,7 @@
|
||||
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
isAudioPlayed: false,
|
||||
messageItem: () => ({} as IMessageModel),
|
||||
messageItem: () => ({}) as IMessageModel,
|
||||
content: () => ({}),
|
||||
blinkMessageIDList: () => [],
|
||||
classNameList: () => [],
|
||||
@@ -411,7 +411,7 @@
|
||||
}
|
||||
|
||||
.content-out {
|
||||
background: #00D9C5;
|
||||
background: #00d9c5;
|
||||
border-radius: 10px 0 10px 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,197 +3,233 @@
|
||||
v-if="hasQuoteContent"
|
||||
:class="{
|
||||
'reference-content': true,
|
||||
'reverse': message.flow === 'out',
|
||||
reverse: message.flow === 'out'
|
||||
}"
|
||||
@click="scrollToOriginalMessage"
|
||||
>
|
||||
<div
|
||||
v-if="isMessageRevoked"
|
||||
class="revoked-text"
|
||||
>
|
||||
<div v-if="isMessageRevoked" class="revoked-text">
|
||||
{{ TUITranslateService.t('TUIChat.引用内容已撤回') }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="max-double-line"
|
||||
>
|
||||
{{ messageQuoteContent.messageSender }}: {{ transformTextWithKeysToEmojiNames(messageQuoteText) }}
|
||||
<div v-else class="max-double-line">
|
||||
{{ messageQuoteContent.messageSender }}:
|
||||
{{ transformTextWithKeysToEmojiNames(messageQuoteText) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, onMounted } from '../../../../../adapter-vue';
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
IMessageModel,
|
||||
TUITranslateService,
|
||||
} from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { getBoundingClientRect, getScrollInfo } from '@tencentcloud/universal-api';
|
||||
import { isUniFrameWork } from '../../../../../utils/env';
|
||||
import { Toast, TOAST_TYPE } from '../../../../../components/common/Toast/index';
|
||||
import { ICloudCustomData, IQuoteContent, MessageQuoteTypeEnum } from './interface.ts';
|
||||
import { transformTextWithKeysToEmojiNames } from '../../../emoji-config';
|
||||
import { computed, ref, onMounted } from '../../../../../adapter-vue'
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
IMessageModel,
|
||||
TUITranslateService
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import {
|
||||
getBoundingClientRect,
|
||||
getScrollInfo
|
||||
} from '@tencentcloud/universal-api'
|
||||
import { isUniFrameWork } from '../../../../../utils/env'
|
||||
import {
|
||||
Toast,
|
||||
TOAST_TYPE
|
||||
} from '../../../../../components/common/Toast/index'
|
||||
import {
|
||||
ICloudCustomData,
|
||||
IQuoteContent,
|
||||
MessageQuoteTypeEnum
|
||||
} from './interface.ts'
|
||||
import { transformTextWithKeysToEmojiNames } from '../../../emoji-config'
|
||||
|
||||
export interface IProps {
|
||||
message: IMessageModel;
|
||||
}
|
||||
|
||||
export interface IEmits {
|
||||
(e: 'scrollTo', scrollHeight: number): void;
|
||||
(e: 'blinkMessage', messageID: string | undefined): void;
|
||||
}
|
||||
|
||||
const emits = defineEmits<IEmits>();
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
message: () => ({} as IMessageModel),
|
||||
});
|
||||
|
||||
let selfAddValue = 0;
|
||||
const messageQuoteText = ref<string>('');
|
||||
const hasQuoteContent = ref(false);
|
||||
const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent);
|
||||
|
||||
const isMessageRevoked = computed<boolean>(() => {
|
||||
try {
|
||||
const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}');
|
||||
const quotedMessageModel = TUIStore.getMessageModel(cloudCustomData.messageReply.messageID);
|
||||
return quotedMessageModel?.isRevoked;
|
||||
} catch (error) {
|
||||
return true;
|
||||
export interface IProps {
|
||||
message: IMessageModel
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}');
|
||||
hasQuoteContent.value = Boolean(cloudCustomData.messageReply);
|
||||
if (hasQuoteContent.value) {
|
||||
messageQuoteContent.value = cloudCustomData.messageReply;
|
||||
messageQuoteText.value = performQuoteContent(messageQuoteContent.value);
|
||||
}
|
||||
} catch (error) {
|
||||
hasQuoteContent.value = false;
|
||||
export interface IEmits {
|
||||
(e: 'scrollTo', scrollHeight: number): void
|
||||
(e: 'blinkMessage', messageID: string | undefined): void
|
||||
}
|
||||
});
|
||||
|
||||
function performQuoteContent(params: IQuoteContent) {
|
||||
let messageKey: string = '';
|
||||
let quoteContent: string = '';
|
||||
switch (params.messageType) {
|
||||
case MessageQuoteTypeEnum.TYPE_TEXT:
|
||||
messageKey = '[文本]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_CUSTOM:
|
||||
messageKey = '[自定义消息]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_IMAGE:
|
||||
messageKey = '[图片]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_SOUND:
|
||||
messageKey = '[音频]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_VIDEO:
|
||||
messageKey = '[视频]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_FILE:
|
||||
messageKey = '[文件]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_LOCATION:
|
||||
messageKey = '[地理位置]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_FACE:
|
||||
messageKey = '[动画表情]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_GROUP_TIPS:
|
||||
messageKey = '[群提示]';
|
||||
break;
|
||||
case MessageQuoteTypeEnum.TYPE_MERGER:
|
||||
messageKey = '[聊天记录]';
|
||||
break;
|
||||
default:
|
||||
messageKey = '[消息]';
|
||||
break;
|
||||
}
|
||||
if (
|
||||
[
|
||||
MessageQuoteTypeEnum.TYPE_TEXT,
|
||||
MessageQuoteTypeEnum.TYPE_MERGER,
|
||||
].includes(params.messageType)
|
||||
) {
|
||||
quoteContent = params.messageAbstract;
|
||||
}
|
||||
return quoteContent ? quoteContent : TUITranslateService.t(`TUIChat.${messageKey}`);
|
||||
}
|
||||
const emits = defineEmits<IEmits>()
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
message: () => ({}) as IMessageModel
|
||||
})
|
||||
|
||||
async function scrollToOriginalMessage() {
|
||||
if (isMessageRevoked.value) {
|
||||
return;
|
||||
}
|
||||
const originMessageID = messageQuoteContent.value?.messageID;
|
||||
const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList');
|
||||
const isOriginalMessageInScreen = currentMessageList.some(msg => msg.ID === originMessageID);
|
||||
if (originMessageID && isOriginalMessageInScreen) {
|
||||
let selfAddValue = 0
|
||||
const messageQuoteText = ref<string>('')
|
||||
const hasQuoteContent = ref(false)
|
||||
const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent)
|
||||
|
||||
const isMessageRevoked = computed<boolean>(() => {
|
||||
try {
|
||||
const scrollViewRect = await getBoundingClientRect('#messageScrollList', 'messageList');
|
||||
const originalMessageRect = await getBoundingClientRect('#tui-' + originMessageID, 'messageList');
|
||||
const { scrollTop } = await getScrollInfo('#messageScrollList', 'messageList');
|
||||
const finalScrollTop = originalMessageRect.top + scrollTop - scrollViewRect.top - (selfAddValue++ % 2);
|
||||
const isNeedScroll = originalMessageRect.top < scrollViewRect.top;
|
||||
if (!isUniFrameWork && window) {
|
||||
const scrollView = document.getElementById('messageScrollList');
|
||||
if (isNeedScroll && scrollView) {
|
||||
scrollView.scrollTop = finalScrollTop;
|
||||
}
|
||||
} else if (isUniFrameWork && isNeedScroll) {
|
||||
emits('scrollTo', finalScrollTop);
|
||||
}
|
||||
emits('blinkMessage', originMessageID);
|
||||
const cloudCustomData: ICloudCustomData = JSON.parse(
|
||||
props.message?.cloudCustomData || '{}'
|
||||
)
|
||||
const quotedMessageModel = TUIStore.getMessageModel(
|
||||
cloudCustomData.messageReply.messageID
|
||||
)
|
||||
return quotedMessageModel?.isRevoked
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
const cloudCustomData: ICloudCustomData = JSON.parse(
|
||||
props.message?.cloudCustomData || '{}'
|
||||
)
|
||||
|
||||
hasQuoteContent.value = Boolean(cloudCustomData.messageReply)
|
||||
|
||||
if (hasQuoteContent.value) {
|
||||
messageQuoteContent.value = cloudCustomData.messageReply
|
||||
messageQuoteText.value = performQuoteContent(
|
||||
messageQuoteContent.value
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
hasQuoteContent.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function performQuoteContent(params: IQuoteContent) {
|
||||
let messageKey: string = ''
|
||||
let quoteContent: string = ''
|
||||
|
||||
switch (params.messageType) {
|
||||
case MessageQuoteTypeEnum.TYPE_TEXT:
|
||||
messageKey = '[文本]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_CUSTOM:
|
||||
messageKey = '[自定义消息]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_IMAGE:
|
||||
messageKey = '[图片]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_SOUND:
|
||||
messageKey = '[音频]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_VIDEO:
|
||||
messageKey = '[视频]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_FILE:
|
||||
messageKey = '[文件]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_LOCATION:
|
||||
messageKey = '[地理位置]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_FACE:
|
||||
messageKey = '[动画表情]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_GROUP_TIPS:
|
||||
messageKey = '[群提示]'
|
||||
break
|
||||
case MessageQuoteTypeEnum.TYPE_MERGER:
|
||||
messageKey = '[聊天记录]'
|
||||
break
|
||||
default:
|
||||
messageKey = '[消息]'
|
||||
break
|
||||
}
|
||||
if (
|
||||
[
|
||||
MessageQuoteTypeEnum.TYPE_TEXT,
|
||||
MessageQuoteTypeEnum.TYPE_MERGER
|
||||
].includes(params.messageType)
|
||||
) {
|
||||
quoteContent = params.messageAbstract
|
||||
}
|
||||
return quoteContent
|
||||
? quoteContent
|
||||
: TUITranslateService.t(`TUIChat.${messageKey}`)
|
||||
}
|
||||
|
||||
async function scrollToOriginalMessage() {
|
||||
if (isMessageRevoked.value) {
|
||||
return
|
||||
}
|
||||
const originMessageID = messageQuoteContent.value?.messageID
|
||||
const currentMessageList = TUIStore.getData(
|
||||
StoreName.CHAT,
|
||||
'messageList'
|
||||
)
|
||||
const isOriginalMessageInScreen = currentMessageList.some(
|
||||
msg => msg.ID === originMessageID
|
||||
)
|
||||
if (originMessageID && isOriginalMessageInScreen) {
|
||||
try {
|
||||
const scrollViewRect = await getBoundingClientRect(
|
||||
'#messageScrollList',
|
||||
'messageList'
|
||||
)
|
||||
const originalMessageRect = await getBoundingClientRect(
|
||||
'#tui-' + originMessageID,
|
||||
'messageList'
|
||||
)
|
||||
const { scrollTop } = await getScrollInfo(
|
||||
'#messageScrollList',
|
||||
'messageList'
|
||||
)
|
||||
const finalScrollTop =
|
||||
originalMessageRect.top +
|
||||
scrollTop -
|
||||
scrollViewRect.top -
|
||||
(selfAddValue++ % 2)
|
||||
const isNeedScroll = originalMessageRect.top < scrollViewRect.top
|
||||
if (!isUniFrameWork && window) {
|
||||
const scrollView = document.getElementById('messageScrollList')
|
||||
if (isNeedScroll && scrollView) {
|
||||
scrollView.scrollTop = finalScrollTop
|
||||
}
|
||||
} else if (isUniFrameWork && isNeedScroll) {
|
||||
emits('scrollTo', finalScrollTop)
|
||||
}
|
||||
emits('blinkMessage', originMessageID)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
} else {
|
||||
Toast({
|
||||
message: TUITranslateService.t('TUIChat.无法定位到原消息'),
|
||||
type: TOAST_TYPE.WARNING
|
||||
})
|
||||
}
|
||||
} else {
|
||||
Toast({
|
||||
message: TUITranslateService.t('TUIChat.无法定位到原消息'),
|
||||
type: TOAST_TYPE.WARNING,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reference-content {
|
||||
max-width: 272px;
|
||||
margin-top: 4px;
|
||||
margin-left: 44px;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 8px;
|
||||
line-height: 16.8px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.reference-content {
|
||||
max-width: 272px;
|
||||
margin-top: 4px;
|
||||
margin-left: 44px;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 8px;
|
||||
line-height: 16.8px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.reverse.reference-content {
|
||||
.reverse.reference-content {
|
||||
margin-right: 44px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.revoked-text {
|
||||
color: #999;
|
||||
}
|
||||
.revoked-text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.max-double-line {
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
max-height: 33px;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.max-double-line {
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
max-height: 33px;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,10 +4,7 @@
|
||||
ref="messageToolDom"
|
||||
:class="['dialog-item', !isPC ? 'dialog-item-h5' : 'dialog-item-web']"
|
||||
>
|
||||
<slot
|
||||
v-if="featureConfig.EmojiReaction"
|
||||
name="TUIEmojiPlugin"
|
||||
/>
|
||||
<slot v-if="featureConfig.EmojiReaction" name="TUIEmojiPlugin" />
|
||||
<div
|
||||
class="dialog-item-list"
|
||||
:class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
|
||||
@@ -20,10 +17,7 @@
|
||||
@click="getFunction(index)"
|
||||
@mousedown="beforeCopy(item.key)"
|
||||
>
|
||||
<Icon
|
||||
:file="item.iconUrl"
|
||||
:size="'15px'"
|
||||
/>
|
||||
<Icon :file="item.iconUrl" :size="'15px'" />
|
||||
<span class="list-item-text">{{ item.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,422 +26,505 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import TUIChatEngine, {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService,
|
||||
IMessageModel,
|
||||
} from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api';
|
||||
import { ref, watchEffect, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
|
||||
import Icon from '../../../common/Icon.vue';
|
||||
import { Toast, TOAST_TYPE } from '../../../common/Toast/index';
|
||||
import delIcon from '../../../../assets/icon/msg-del.svg';
|
||||
import copyIcon from '../../../../assets/icon/msg-copy.svg';
|
||||
import quoteIcon from '../../../../assets/icon/msg-quote.svg';
|
||||
import revokeIcon from '../../../../assets/icon/msg-revoke.svg';
|
||||
import forwardIcon from '../../../../assets/icon/msg-forward.svg';
|
||||
import translateIcon from '../../../../assets/icon/translate.svg';
|
||||
import multipleSelectIcon from '../../../../assets/icon/multiple-select.svg';
|
||||
import convertText from '../../../../assets/icon/convertText_zh.svg';
|
||||
import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus';
|
||||
import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
|
||||
import { isH5, isPC, isUniFrameWork } from '../../../../utils/env';
|
||||
import { ITranslateInfo, IConvertInfo } from '../../../../interface';
|
||||
import TUIChatConfig from '../../config';
|
||||
import AiRobotManager from '../../aiRobotManager';
|
||||
|
||||
// uni-app conditional compilation will not run the following code
|
||||
// #ifndef APP || APP-PLUS || MP || H5
|
||||
import CopyManager from '../../utils/copy';
|
||||
// #endif
|
||||
|
||||
interface IProps {
|
||||
messageItem: IMessageModel;
|
||||
isMultipleSelectMode: boolean;
|
||||
}
|
||||
|
||||
interface IEmits {
|
||||
(key: 'toggleMultipleSelectMode'): void;
|
||||
}
|
||||
|
||||
const emits = defineEmits<IEmits>();
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
isMultipleSelectMode: false,
|
||||
messageItem: () => ({}) as IMessageModel,
|
||||
});
|
||||
const featureConfig = TUIChatConfig.getFeatureConfig();
|
||||
|
||||
const TYPES = TUIChatEngine.TYPES;
|
||||
|
||||
const actionItems = ref([
|
||||
{
|
||||
key: 'open',
|
||||
text: TUITranslateService.t('TUIChat.打开'),
|
||||
iconUrl: copyIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.DownloadFile || !message.value) return false;
|
||||
return isPC && (message.value?.type === TYPES.MSG_FILE
|
||||
|| message.value.type === TYPES.MSG_VIDEO
|
||||
|| message.value.type === TYPES.MSG_IMAGE);
|
||||
},
|
||||
clickEvent: openMessage,
|
||||
},
|
||||
{
|
||||
key: 'copy',
|
||||
text: TUITranslateService.t('TUIChat.复制'),
|
||||
iconUrl: copyIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.CopyMessage || !message.value) return false;
|
||||
const isAiRobotTextMessage = AiRobotManager.isRobotMessage(message.value);
|
||||
return message.value.type === TYPES.MSG_TEXT || isAiRobotTextMessage;
|
||||
},
|
||||
clickEvent: copyMessage,
|
||||
},
|
||||
{
|
||||
key: 'revoke',
|
||||
text: TUITranslateService.t('TUIChat.撤回'),
|
||||
iconUrl: revokeIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.RevokeMessage || !message.value) return false;
|
||||
return message.value.flow === 'out' && message.value.status === 'success';
|
||||
},
|
||||
clickEvent: revokeMessage,
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: TUITranslateService.t('TUIChat.删除'),
|
||||
iconUrl: delIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.DeleteMessage || !message.value) return false;
|
||||
return message.value.status === 'success';
|
||||
},
|
||||
clickEvent: deleteMessage,
|
||||
},
|
||||
{
|
||||
key: 'forward',
|
||||
text: TUITranslateService.t('TUIChat.转发'),
|
||||
iconUrl: forwardIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.ForwardMessage || !message.value) return false;
|
||||
return message.value.status === 'success';
|
||||
},
|
||||
clickEvent: forwardSingleMessage,
|
||||
},
|
||||
{
|
||||
key: 'quote',
|
||||
text: TUITranslateService.t('TUIChat.引用'),
|
||||
iconUrl: quoteIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.QuoteMessage || !message.value) return false;
|
||||
const _message = TUIStore.getMessageModel(message.value.ID);
|
||||
return message.value.status === 'success' && !_message.getSignalingInfo();
|
||||
},
|
||||
clickEvent: quoteMessage,
|
||||
},
|
||||
{
|
||||
key: 'translate',
|
||||
text: TUITranslateService.t('TUIChat.翻译'),
|
||||
visible: false,
|
||||
iconUrl: translateIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.TranslateMessage || !message.value) return false;
|
||||
return message.value.status === 'success' && message.value.type === TYPES.MSG_TEXT;
|
||||
},
|
||||
clickEvent: translateMessage,
|
||||
},
|
||||
{
|
||||
key: 'convert',
|
||||
text: TUITranslateService.t('TUIChat.转文字'),
|
||||
visible: false,
|
||||
iconUrl: convertText,
|
||||
renderCondition() {
|
||||
if (!featureConfig.VoiceToText || !message.value) return false;
|
||||
return message.value.status === 'success' && message.value.type === TYPES.MSG_AUDIO;
|
||||
},
|
||||
clickEvent: convertVoiceToText,
|
||||
},
|
||||
{
|
||||
key: 'multi-select',
|
||||
text: TUITranslateService.t('TUIChat.多选'),
|
||||
iconUrl: multipleSelectIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.MultiSelection || !message.value) return false;
|
||||
return message.value.status === 'success';
|
||||
},
|
||||
clickEvent: multipleSelectMessage,
|
||||
},
|
||||
]);
|
||||
|
||||
const message = ref<IMessageModel>();
|
||||
const messageToolDom = ref<HTMLElement>();
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CHAT, {
|
||||
translateTextInfo: onMessageTranslationInfoUpdated,
|
||||
voiceToTextInfo: onMessageConvertInfoUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CHAT, {
|
||||
translateTextInfo: onMessageTranslationInfoUpdated,
|
||||
voiceToTextInfo: onMessageConvertInfoUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
message.value = TUIStore.getMessageModel(props.messageItem.ID);
|
||||
});
|
||||
|
||||
const isAllActionItemInvalid = computed(() => {
|
||||
for (let i = 0; i < actionItems.value.length; ++i) {
|
||||
if (actionItems.value[i].renderCondition()) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
function getFunction(index: number) {
|
||||
// Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed.
|
||||
actionItems.value[index].clickEvent();
|
||||
}
|
||||
|
||||
function openMessage() {
|
||||
let url = '';
|
||||
switch (message.value?.type) {
|
||||
case TUIChatEngine.TYPES.MSG_FILE:
|
||||
url = message.value.payload.fileUrl;
|
||||
break;
|
||||
case TUIChatEngine.TYPES.MSG_VIDEO:
|
||||
url = message.value.payload.remoteVideoUrl;
|
||||
break;
|
||||
case TUIChatEngine.TYPES.MSG_IMAGE:
|
||||
url = message.value.payload.imageInfoArray[0].url;
|
||||
break;
|
||||
}
|
||||
window?.open(url, '_blank');
|
||||
}
|
||||
|
||||
function revokeMessage() {
|
||||
if (!message.value) return;
|
||||
const messageModel = TUIStore.getMessageModel(message.value.ID);
|
||||
messageModel
|
||||
.revokeMessage()
|
||||
.then(() => {
|
||||
enableSampleTaskStatus('revokeMessage');
|
||||
})
|
||||
.catch((error: any) => {
|
||||
// The message cannot be recalled after the time limit was reached, which is 2 minutes by default.
|
||||
if (error.code === 20016 || error.code === 10031) {
|
||||
const message = TUITranslateService.t('TUIChat.已过撤回时限');
|
||||
Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.ERROR,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function deleteMessage() {
|
||||
if (!message.value) return;
|
||||
if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) {
|
||||
const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答');
|
||||
return Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.NORMAL,
|
||||
});
|
||||
}
|
||||
const messageModel = TUIStore.getMessageModel(message.value.ID);
|
||||
messageModel.deleteMessage();
|
||||
}
|
||||
|
||||
async function copyMessage() {
|
||||
if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) {
|
||||
const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答');
|
||||
return Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.NORMAL,
|
||||
});
|
||||
}
|
||||
const isAiRobotText = AiRobotManager.getRobotRenderText(message.value as IMessageModel);
|
||||
const text = isAiRobotText ? isAiRobotText : message.value?.payload.text;
|
||||
|
||||
if (isUniFrameWork) {
|
||||
TUIGlobal?.setClipboardData({
|
||||
data: transformTextWithKeysToEmojiNames(text),
|
||||
});
|
||||
} else {
|
||||
// uni-app conditional compilation will not run the following code
|
||||
// #ifndef APP || APP-PLUS || MP || H5
|
||||
CopyManager.copySelection(text);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
function beforeCopy(key: string) {
|
||||
// only pc support copy selection or copy full message text
|
||||
// uni-app and h5 only support copy full message text
|
||||
if (key !== 'copy' || isH5) {
|
||||
return;
|
||||
}
|
||||
import TUIChatEngine, {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService,
|
||||
IMessageModel
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api'
|
||||
import {
|
||||
ref,
|
||||
watchEffect,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted
|
||||
} from '../../../../adapter-vue'
|
||||
import Icon from '../../../common/Icon.vue'
|
||||
import { Toast, TOAST_TYPE } from '../../../common/Toast/index'
|
||||
import delIcon from '../../../../assets/icon/msg-del.svg'
|
||||
import copyIcon from '../../../../assets/icon/msg-copy.svg'
|
||||
import quoteIcon from '../../../../assets/icon/msg-quote.svg'
|
||||
import revokeIcon from '../../../../assets/icon/msg-revoke.svg'
|
||||
import forwardIcon from '../../../../assets/icon/msg-forward.svg'
|
||||
import translateIcon from '../../../../assets/icon/translate.svg'
|
||||
import multipleSelectIcon from '../../../../assets/icon/multiple-select.svg'
|
||||
import convertText from '../../../../assets/icon/convertText_zh.svg'
|
||||
import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus'
|
||||
import { transformTextWithKeysToEmojiNames } from '../../emoji-config'
|
||||
import { isH5, isPC, isUniFrameWork } from '../../../../utils/env'
|
||||
import { ITranslateInfo, IConvertInfo } from '../../../../interface'
|
||||
import TUIChatConfig from '../../config'
|
||||
import AiRobotManager from '../../aiRobotManager'
|
||||
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
|
||||
|
||||
// uni-app conditional compilation will not run the following code
|
||||
// #ifndef APP || APP-PLUS || MP || H5
|
||||
CopyManager.saveCurrentSelection();
|
||||
import CopyManager from '../../utils/copy'
|
||||
// #endif
|
||||
}
|
||||
|
||||
function forwardSingleMessage() {
|
||||
if (!message.value) return;
|
||||
if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) {
|
||||
const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答');
|
||||
return Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.NORMAL,
|
||||
});
|
||||
}
|
||||
TUIStore.update(StoreName.CUSTOM, 'singleForwardMessageID', message.value.ID);
|
||||
}
|
||||
|
||||
function quoteMessage() {
|
||||
if (!message.value) return;
|
||||
message.value.quoteMessage();
|
||||
}
|
||||
|
||||
function translateMessage() {
|
||||
const enable = TUIStore.getData(StoreName.APP, 'enabledTranslationPlugin');
|
||||
if (!enable) {
|
||||
Toast({
|
||||
message: TUITranslateService.t('TUIChat.请开通翻译功能'),
|
||||
type: TOAST_TYPE.WARNING,
|
||||
});
|
||||
return;
|
||||
interface IProps {
|
||||
messageItem: IMessageModel
|
||||
isMultipleSelectMode: boolean
|
||||
}
|
||||
|
||||
if (!message.value) return;
|
||||
const index = actionItems.value.findIndex(item => item.key === 'translate');
|
||||
TUIStore.update(StoreName.CHAT, 'translateTextInfo', {
|
||||
conversationID: message.value.conversationID,
|
||||
messageID: message.value.ID,
|
||||
visible: !actionItems.value[index].visible,
|
||||
});
|
||||
}
|
||||
|
||||
function convertVoiceToText() {
|
||||
const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText');
|
||||
if (!enable) {
|
||||
Toast({
|
||||
message: TUITranslateService.t('TUIChat.请开通语音转文字功能'),
|
||||
type: '',
|
||||
});
|
||||
return;
|
||||
interface IEmits {
|
||||
(key: 'toggleMultipleSelectMode'): void
|
||||
}
|
||||
|
||||
if (!message.value) return;
|
||||
const index = actionItems.value.findIndex(item => item.key === 'convert');
|
||||
TUIStore.update(StoreName.CHAT, 'voiceToTextInfo', {
|
||||
conversationID: message.value.conversationID,
|
||||
messageID: message.value.ID,
|
||||
visible: !actionItems.value[index].visible,
|
||||
});
|
||||
}
|
||||
const emits = defineEmits<IEmits>()
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
isMultipleSelectMode: false,
|
||||
messageItem: () => ({}) as IMessageModel
|
||||
})
|
||||
const featureConfig = TUIChatConfig.getFeatureConfig()
|
||||
|
||||
function multipleSelectMessage() {
|
||||
emits('toggleMultipleSelectMode');
|
||||
}
|
||||
const TYPES = TUIChatEngine.TYPES
|
||||
|
||||
function onMessageTranslationInfoUpdated(info: Map<string, ITranslateInfo[]>) {
|
||||
if (info === undefined) return;
|
||||
const translationInfoList = info.get(props.messageItem.conversationID) || [];
|
||||
const idx = actionItems.value.findIndex(item => item.key === 'translate');
|
||||
for (let i = 0; i < translationInfoList.length; ++i) {
|
||||
const { messageID, visible } = translationInfoList[i];
|
||||
if (messageID === props.messageItem.ID) {
|
||||
actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.翻译');
|
||||
actionItems.value[idx].visible = !!visible;
|
||||
return;
|
||||
const actionItems = ref([
|
||||
{
|
||||
key: 'open',
|
||||
text: TUITranslateService.t('TUIChat.打开'),
|
||||
iconUrl: copyIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.DownloadFile || !message.value) return false
|
||||
return (
|
||||
isPC &&
|
||||
(message.value?.type === TYPES.MSG_FILE ||
|
||||
message.value.type === TYPES.MSG_VIDEO ||
|
||||
message.value.type === TYPES.MSG_IMAGE)
|
||||
)
|
||||
},
|
||||
clickEvent: openMessage
|
||||
},
|
||||
{
|
||||
key: 'copy',
|
||||
text: TUITranslateService.t('TUIChat.复制'),
|
||||
iconUrl: copyIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.CopyMessage || !message.value) return false
|
||||
const isAiRobotTextMessage = AiRobotManager.isRobotMessage(
|
||||
message.value
|
||||
)
|
||||
return (
|
||||
message.value.type === TYPES.MSG_TEXT || isAiRobotTextMessage
|
||||
)
|
||||
},
|
||||
clickEvent: copyMessage
|
||||
},
|
||||
{
|
||||
key: 'revoke',
|
||||
text: TUITranslateService.t('TUIChat.撤回'),
|
||||
iconUrl: revokeIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.RevokeMessage || !message.value) return false
|
||||
if (isRedEnvelopeMessage(message.value)) return false
|
||||
return (
|
||||
message.value.flow === 'out' &&
|
||||
message.value.status === 'success'
|
||||
)
|
||||
},
|
||||
clickEvent: revokeMessage
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: TUITranslateService.t('TUIChat.删除'),
|
||||
iconUrl: delIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.DeleteMessage || !message.value) return false
|
||||
return message.value.status === 'success'
|
||||
},
|
||||
clickEvent: deleteMessage
|
||||
},
|
||||
{
|
||||
key: 'forward',
|
||||
text: TUITranslateService.t('TUIChat.转发'),
|
||||
iconUrl: forwardIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.ForwardMessage || !message.value) return false
|
||||
if (isRedEnvelopeMessage(message.value)) return false
|
||||
return message.value.status === 'success'
|
||||
},
|
||||
clickEvent: forwardSingleMessage
|
||||
},
|
||||
{
|
||||
key: 'quote',
|
||||
text: TUITranslateService.t('TUIChat.引用'),
|
||||
iconUrl: quoteIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.QuoteMessage || !message.value) return false
|
||||
const _message = TUIStore.getMessageModel(message.value.ID)
|
||||
return (
|
||||
message.value.status === 'success' &&
|
||||
!_message.getSignalingInfo()
|
||||
)
|
||||
},
|
||||
clickEvent: quoteMessage
|
||||
},
|
||||
{
|
||||
key: 'translate',
|
||||
text: TUITranslateService.t('TUIChat.翻译'),
|
||||
visible: false,
|
||||
iconUrl: translateIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.TranslateMessage || !message.value)
|
||||
return false
|
||||
return (
|
||||
message.value.status === 'success' &&
|
||||
message.value.type === TYPES.MSG_TEXT
|
||||
)
|
||||
},
|
||||
clickEvent: translateMessage
|
||||
},
|
||||
{
|
||||
key: 'convert',
|
||||
text: TUITranslateService.t('TUIChat.转文字'),
|
||||
visible: false,
|
||||
iconUrl: convertText,
|
||||
renderCondition() {
|
||||
if (!featureConfig.VoiceToText || !message.value) return false
|
||||
return (
|
||||
message.value.status === 'success' &&
|
||||
message.value.type === TYPES.MSG_AUDIO
|
||||
)
|
||||
},
|
||||
clickEvent: convertVoiceToText
|
||||
},
|
||||
{
|
||||
key: 'multi-select',
|
||||
text: TUITranslateService.t('TUIChat.多选'),
|
||||
iconUrl: multipleSelectIcon,
|
||||
renderCondition() {
|
||||
if (!featureConfig.MultiSelection || !message.value) return false
|
||||
return message.value.status === 'success'
|
||||
},
|
||||
clickEvent: multipleSelectMessage
|
||||
}
|
||||
])
|
||||
|
||||
const message = ref<IMessageModel>()
|
||||
const messageToolDom = ref<HTMLElement>()
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CHAT, {
|
||||
translateTextInfo: onMessageTranslationInfoUpdated,
|
||||
voiceToTextInfo: onMessageConvertInfoUpdated
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CHAT, {
|
||||
translateTextInfo: onMessageTranslationInfoUpdated,
|
||||
voiceToTextInfo: onMessageConvertInfoUpdated
|
||||
})
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
message.value = TUIStore.getMessageModel(props.messageItem.ID)
|
||||
})
|
||||
|
||||
const isAllActionItemInvalid = computed(() => {
|
||||
for (let i = 0; i < actionItems.value.length; ++i) {
|
||||
if (actionItems.value[i].renderCondition()) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
function getFunction(index: number) {
|
||||
// Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed.
|
||||
actionItems.value[index].clickEvent()
|
||||
}
|
||||
|
||||
function openMessage() {
|
||||
let url = ''
|
||||
switch (message.value?.type) {
|
||||
case TUIChatEngine.TYPES.MSG_FILE:
|
||||
url = message.value.payload.fileUrl
|
||||
break
|
||||
case TUIChatEngine.TYPES.MSG_VIDEO:
|
||||
url = message.value.payload.remoteVideoUrl
|
||||
break
|
||||
case TUIChatEngine.TYPES.MSG_IMAGE:
|
||||
url = message.value.payload.imageInfoArray[0].url
|
||||
break
|
||||
}
|
||||
window?.open(url, '_blank')
|
||||
}
|
||||
|
||||
function revokeMessage() {
|
||||
if (!message.value) return
|
||||
const messageModel = TUIStore.getMessageModel(message.value.ID)
|
||||
messageModel
|
||||
.revokeMessage()
|
||||
.then(() => {
|
||||
enableSampleTaskStatus('revokeMessage')
|
||||
})
|
||||
.catch((error: any) => {
|
||||
// The message cannot be recalled after the time limit was reached, which is 2 minutes by default.
|
||||
if (error.code === 20016 || error.code === 10031) {
|
||||
const message = TUITranslateService.t('TUIChat.已过撤回时限')
|
||||
Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.ERROR
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function deleteMessage() {
|
||||
if (!message.value) return
|
||||
if (
|
||||
AiRobotManager.isStreamingMessage(message.value as IMessageModel)
|
||||
) {
|
||||
const message = TUITranslateService.t(
|
||||
'TUIChat.回答输出中，请稍后或点击停止回答'
|
||||
)
|
||||
return Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.NORMAL
|
||||
})
|
||||
}
|
||||
const messageModel = TUIStore.getMessageModel(message.value.ID)
|
||||
messageModel.deleteMessage()
|
||||
}
|
||||
|
||||
async function copyMessage() {
|
||||
if (
|
||||
AiRobotManager.isStreamingMessage(message.value as IMessageModel)
|
||||
) {
|
||||
const message = TUITranslateService.t(
|
||||
'TUIChat.回答输出中，请稍后或点击停止回答'
|
||||
)
|
||||
return Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.NORMAL
|
||||
})
|
||||
}
|
||||
const isAiRobotText = AiRobotManager.getRobotRenderText(
|
||||
message.value as IMessageModel
|
||||
)
|
||||
const text = isAiRobotText
|
||||
? isAiRobotText
|
||||
: message.value?.payload.text
|
||||
|
||||
if (isUniFrameWork) {
|
||||
TUIGlobal?.setClipboardData({
|
||||
data: transformTextWithKeysToEmojiNames(text)
|
||||
})
|
||||
} else {
|
||||
// uni-app conditional compilation will not run the following code
|
||||
// #ifndef APP || APP-PLUS || MP || H5
|
||||
CopyManager.copySelection(text)
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
actionItems.value[idx].text = TUITranslateService.t('TUIChat.翻译');
|
||||
}
|
||||
|
||||
function onMessageConvertInfoUpdated(info: Map<string, IConvertInfo[]>) {
|
||||
if (info === undefined) return;
|
||||
const convertInfoList = info.get(props.messageItem.conversationID) || [];
|
||||
const idx = actionItems.value.findIndex(item => item.key === 'convert');
|
||||
for (let i = 0; i < convertInfoList.length; ++i) {
|
||||
const { messageID, visible } = convertInfoList[i];
|
||||
if (messageID === props.messageItem.ID) {
|
||||
actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.转文字');
|
||||
actionItems.value[idx].visible = !!visible;
|
||||
return;
|
||||
function beforeCopy(key: string) {
|
||||
// only pc support copy selection or copy full message text
|
||||
// uni-app and h5 only support copy full message text
|
||||
if (key !== 'copy' || isH5) {
|
||||
return
|
||||
}
|
||||
|
||||
// uni-app conditional compilation will not run the following code
|
||||
// #ifndef APP || APP-PLUS || MP || H5
|
||||
CopyManager.saveCurrentSelection()
|
||||
// #endif
|
||||
}
|
||||
|
||||
function forwardSingleMessage() {
|
||||
if (!message.value) return
|
||||
if (
|
||||
AiRobotManager.isStreamingMessage(message.value as IMessageModel)
|
||||
) {
|
||||
const message = TUITranslateService.t(
|
||||
'TUIChat.回答输出中，请稍后或点击停止回答'
|
||||
)
|
||||
return Toast({
|
||||
message,
|
||||
type: TOAST_TYPE.NORMAL
|
||||
})
|
||||
}
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'singleForwardMessageID',
|
||||
message.value.ID
|
||||
)
|
||||
}
|
||||
|
||||
function quoteMessage() {
|
||||
if (!message.value) return
|
||||
message.value.quoteMessage()
|
||||
}
|
||||
|
||||
function translateMessage() {
|
||||
const enable = TUIStore.getData(
|
||||
StoreName.APP,
|
||||
'enabledTranslationPlugin'
|
||||
)
|
||||
if (!enable) {
|
||||
Toast({
|
||||
message: TUITranslateService.t('TUIChat.请开通翻译功能'),
|
||||
type: TOAST_TYPE.WARNING
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!message.value) return
|
||||
const index = actionItems.value.findIndex(
|
||||
item => item.key === 'translate'
|
||||
)
|
||||
TUIStore.update(StoreName.CHAT, 'translateTextInfo', {
|
||||
conversationID: message.value.conversationID,
|
||||
messageID: message.value.ID,
|
||||
visible: !actionItems.value[index].visible
|
||||
})
|
||||
}
|
||||
|
||||
function convertVoiceToText() {
|
||||
const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText')
|
||||
if (!enable) {
|
||||
Toast({
|
||||
message: TUITranslateService.t('TUIChat.请开通语音转文字功能'),
|
||||
type: ''
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!message.value) return
|
||||
const index = actionItems.value.findIndex(
|
||||
item => item.key === 'convert'
|
||||
)
|
||||
TUIStore.update(StoreName.CHAT, 'voiceToTextInfo', {
|
||||
conversationID: message.value.conversationID,
|
||||
messageID: message.value.ID,
|
||||
visible: !actionItems.value[index].visible
|
||||
})
|
||||
}
|
||||
|
||||
function multipleSelectMessage() {
|
||||
emits('toggleMultipleSelectMode')
|
||||
}
|
||||
|
||||
/** 判断是否是红包消息 */
|
||||
const isRedEnvelopeMessage = (message: IMessageModel) => {
|
||||
const modelData = message?.payload?.data
|
||||
// 判断是否是红包消息
|
||||
if (
|
||||
modelData &&
|
||||
JSON.parse(modelData)?.businessID ===
|
||||
CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
|
||||
) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
actionItems.value[idx].text = TUITranslateService.t('TUIChat.转文字');
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
messageToolDom,
|
||||
});
|
||||
function onMessageTranslationInfoUpdated(
|
||||
info: Map<string, ITranslateInfo[]>
|
||||
) {
|
||||
if (info === undefined) return
|
||||
const translationInfoList =
|
||||
info.get(props.messageItem.conversationID) || []
|
||||
const idx = actionItems.value.findIndex(
|
||||
item => item.key === 'translate'
|
||||
)
|
||||
for (let i = 0; i < translationInfoList.length; ++i) {
|
||||
const { messageID, visible } = translationInfoList[i]
|
||||
if (messageID === props.messageItem.ID) {
|
||||
actionItems.value[idx].text = TUITranslateService.t(
|
||||
visible ? 'TUIChat.隐藏' : 'TUIChat.翻译'
|
||||
)
|
||||
actionItems.value[idx].visible = !!visible
|
||||
return
|
||||
}
|
||||
}
|
||||
actionItems.value[idx].text = TUITranslateService.t('TUIChat.翻译')
|
||||
}
|
||||
|
||||
function onMessageConvertInfoUpdated(
|
||||
info: Map<string, IConvertInfo[]>
|
||||
) {
|
||||
if (info === undefined) return
|
||||
const convertInfoList =
|
||||
info.get(props.messageItem.conversationID) || []
|
||||
const idx = actionItems.value.findIndex(
|
||||
item => item.key === 'convert'
|
||||
)
|
||||
for (let i = 0; i < convertInfoList.length; ++i) {
|
||||
const { messageID, visible } = convertInfoList[i]
|
||||
if (messageID === props.messageItem.ID) {
|
||||
actionItems.value[idx].text = TUITranslateService.t(
|
||||
visible ? 'TUIChat.隐藏' : 'TUIChat.转文字'
|
||||
)
|
||||
actionItems.value[idx].visible = !!visible
|
||||
return
|
||||
}
|
||||
}
|
||||
actionItems.value[idx].text = TUITranslateService.t('TUIChat.转文字')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
messageToolDom
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../assets/styles/common";
|
||||
@import '../../../../assets/styles/common';
|
||||
|
||||
.dialog-item-web {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 12px 0;
|
||||
.dialog-item-web {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 12px 0;
|
||||
|
||||
.dialog-item-list {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
white-space: nowrap;
|
||||
flex-wrap: wrap;
|
||||
max-width: 280px;
|
||||
|
||||
.list-item {
|
||||
padding: 4px 12px;
|
||||
.dialog-item-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
white-space: nowrap;
|
||||
flex-wrap: wrap;
|
||||
max-width: 280px;
|
||||
|
||||
.list-item-text {
|
||||
padding-left: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
color: #000;
|
||||
.list-item {
|
||||
padding: 4px 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.list-item-text {
|
||||
padding-left: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-item-h5 {
|
||||
@extend .dialog-item-web;
|
||||
.dialog-item-h5 {
|
||||
@extend .dialog-item-web;
|
||||
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
|
||||
.dialog-item-list {
|
||||
margin: 10px;
|
||||
white-space: nowrap;
|
||||
flex-wrap: wrap;
|
||||
max-width: 280px;
|
||||
.dialog-item-list {
|
||||
margin: 10px;
|
||||
white-space: nowrap;
|
||||
flex-wrap: wrap;
|
||||
max-width: 280px;
|
||||
|
||||
.list-item {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #4f4f4f;
|
||||
.list-item {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #4f4f4f;
|
||||
|
||||
.list-item-text {
|
||||
padding-left: 0;
|
||||
color: #000;
|
||||
.list-item-text {
|
||||
padding-left: 0;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user