1<template>
2 <div class="rounded-5 border border-outline-gray-1 bg-surface-base">
3 <div class="flex items-center gap-1.5 px-4 pt-4">
4 <h3 class="text-md font-semibold text-ink-gray-8">
5 {{ __("Conversation Summary") }}
6 </h3>
7 </div>
8 <div class="flex flex-col px-4 pb-4 pt-5">
9 <div
10 v-for="row in rows"
11 :key="row.label"
12 class="flex items-center justify-between py-2"
13 :class="summary.agents_involved.length !== 0 ? 'last:py-0' : ''"
14 >
15 <span
16 class="text-base text-ink-gray-5"
17 :class="row.avatars && 'pt-[5px]'"
18 >
19 {{ row.label }}
20 </span>
21 <MultipleAvatar
22 v-if="row.avatars"
23 :avatars="row.avatars"
24 hide-name
25 :max="5"
26 class="pt-2"
27 :class="summary.agents_involved.length === 1 ? '!me-0' : ''"
28 />
29 <span v-else class="text-base text-ink-gray-7">
30 {{ row.value }}
31 </span>
32 </div>
33 </div>
34 </div>
35</template>
36
37<script setup lang="ts">
38import MultipleAvatar from "@/components/MultipleAvatar.vue";
39import { __ } from "@/translation";
40import { computed } from "vue";
41import { AnalyticsSummary } from "./types";
42
43const props = defineProps<{ summary: AnalyticsSummary }>();
44
45interface SummaryRow {
46 label: string;
47 value?: string;
48 avatars?: string;
49}
50
51const rows = computed<SummaryRow[]>(() => {
52 const summary = props.summary;
53 const rows: SummaryRow[] = [
54 {
55 label: __("Customer messages"),
56 value: String(summary.customer_messages),
57 },
58 { label: __("Agent replies"), value: String(summary.agent_messages) },
59 {
60 label: __("Internal comments"),
61 value: String(summary.internal_comments),
62 },
63 ];
64 // a visible churn row IS the signal; healthy tickets show nothing
65 const churn = summary.churn;
66 if (churn.sla_changes >= 1)
67 rows.push({ label: __("SLA changed"), value: times(churn.sla_changes) });
68 if (churn.team_changes >= 2)
69 rows.push({ label: __("Team changed"), value: times(churn.team_changes) });
70 const agents: SummaryRow = { label: __("Agents involved"), value: "–" };
71 if (summary.agents_involved.length)
72 agents.avatars = JSON.stringify(
73 summary.agents_involved.map((agent) => ({
74 name: agent.name,
75 label: agent.name,
76 image: agent.image,
77 }))
78 );
79 rows.push(agents);
80 return rows;
81});
82
83function times(count: number): string {
84 return count === 1 ? __("1 time") : __("{0} times", String(count));
85}
86</script>
87