diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
index c40d63363..457b583ea 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -95,7 +95,7 @@ const replyToPreview = computed(() => {
{
- if (status.value === VOICE_CALL_STATUS.RINGING) {
- return isOutbound.value
- ? t('CONVERSATION.VOICE_CALL.CALLING')
- : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
- }
+ // Completed: "Handled by {agent} · 0:42" (drops either part when absent).
if (status.value === VOICE_CALL_STATUS.COMPLETED) {
- return formattedDuration.value;
+ return [handledBy.value, formattedDuration.value]
+ .filter(Boolean)
+ .join(' · ');
}
if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
- if (isOutbound.value) return null;
- if (didCurrentUserAnswer.value) {
- return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
- }
- if (displayAgentName.value) {
- return t('CONVERSATION.VOICE_CALL.AGENT_ANSWERED', {
- agentName: displayAgentName.value,
- });
- }
- return null;
+ return handledBy.value;
}
if (isFailed.value) {
+ // Missed/failed calls have no handler, so keep the reason rather than "Handled by".
if (isOutbound.value) {
return t('CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_SUBTEXT');
}
@@ -171,6 +172,10 @@ const subtext = computed(() => {
}
return t('CONVERSATION.VOICE_CALL.MISSED_CALL_INBOUND_SUBTEXT');
}
+ // RINGING or an as-yet-unknown/initial status.
+ if (isOutbound.value) {
+ return handledBy.value || t('CONVERSATION.VOICE_CALL.CALLING');
+ }
return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
});
diff --git a/app/javascript/dashboard/components-next/message/chips/Audio.vue b/app/javascript/dashboard/components-next/message/chips/Audio.vue
index ec50d4a62..8b3dbb850 100644
--- a/app/javascript/dashboard/components-next/message/chips/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -31,6 +31,17 @@ const timeStampURL = computed(() => {
return timeStampAppendedURL(attachment.dataUrl);
});
+const TRANSCRIPT_PREVIEW_LENGTH = 200;
+const isTranscriptExpanded = ref(false);
+const isTranscriptLong = computed(
+ () => (attachment.transcribedText?.length || 0) > TRANSCRIPT_PREVIEW_LENGTH
+);
+const displayedTranscript = computed(() => {
+ const text = attachment.transcribedText || '';
+ if (!isTranscriptLong.value || isTranscriptExpanded.value) return text;
+ return `${text.slice(0, TRANSCRIPT_PREVIEW_LENGTH).trimEnd()}…`;
+});
+
const audioPlayer = useTemplateRef('audioPlayer');
const isPlaying = ref(false);
@@ -215,7 +226,18 @@ const downloadAudio = async () => {
v-if="attachment.transcribedText && showTranscribedText"
class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
>
- {{ attachment.transcribedText }}
+ {{ displayedTranscript }}
+