Files
gochat/frontend/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
T
Rogeeandrogee 1b5ea7c227 HH-551: localize activity messages (#132)
* fix(HH-551): localize activity messages

* fix(HH-551): handle null activity content

---------

Co-authored-by: Rogee <rogee@ipao.vip>
2026-08-23 21:21:44 +08:00

79 lines
2.2 KiB
Vue

<script setup>
import { computed } from 'vue';
import { zhCN } from 'date-fns/locale';
import { useI18n } from 'vue-i18n';
import { messageTimestamp } from 'shared/helpers/timeHelper';
import BaseBubble from './Base.vue';
import { useMessageContext } from '../provider.js';
const { content, createdAt } = useMessageContext();
const { locale, t } = useI18n();
const localizedContent = computed(() => {
const normalizedContent = String(content.value ?? '');
const resolvedBy = normalizedContent.match(
/^Conversation was resolved by (.+)$/
);
if (resolvedBy) {
const name = ['Anonymous Visitor', 'visitor'].includes(resolvedBy[1])
? t('CONVERSATION.ACTIVITY.ANONYMOUS_VISITOR')
: resolvedBy[1];
return t('CONVERSATION.ACTIVITY.RESOLVED_BY', { name });
}
if (
normalizedContent ===
'Conversation was reopened due to agent bot webhook failure'
) {
return t('CONVERSATION.ACTIVITY.BOT_WEBHOOK_FAILURE');
}
if (
normalizedContent ===
'CSAT survey not sent due to outgoing message restrictions'
) {
return t('CONVERSATION.ACTIVITY.CSAT_RESTRICTED');
}
const linear = normalizedContent.match(
/^Linear issue (\S+) was (created|linked|unlinked) by (.+)$/
);
if (linear) {
const params = {
issueId: linear[1],
name: linear[3],
};
if (linear[2] === 'created') {
return t('CONVERSATION.ACTIVITY.LINEAR_CREATED', params);
}
if (linear[2] === 'linked') {
return t('CONVERSATION.ACTIVITY.LINEAR_LINKED', params);
}
return t('CONVERSATION.ACTIVITY.LINEAR_UNLINKED', params);
}
return normalizedContent;
});
const readableTime = computed(() => {
if (locale.value === 'zh_CN') {
return messageTimestamp(createdAt.value, 'M月d日 aaa h:mm', {
locale: zhCN,
fallbackFormat: 'yyyy年M月d日 aaa h:mm',
});
}
return messageTimestamp(createdAt.value, 'LLL d, h:mm a');
});
</script>
<template>
<BaseBubble
v-tooltip.top="readableTime"
class="px-3 py-1 !rounded-xl flex min-w-0 max-w-full items-center gap-2"
data-bubble-name="activity"
>
<span
v-dompurify-html="localizedContent"
:title="localizedContent"
class="min-w-0 max-w-full [overflow-wrap:anywhere]"
/>
</BaseBubble>
</template>