From a19ba07baad4e3862f7db7ef0a45568b359051a8 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 12:52:33 +0700
Subject: [PATCH] fix(chat-ui): align voice cards by message direction

---
 .../components/workspace/CrmWorkspaceApp.vue    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/workspace/CrmWorkspaceApp.vue b/frontend/app/components/workspace/CrmWorkspaceApp.vue
index 7176999..deb50b6 100644
--- a/frontend/app/components/workspace/CrmWorkspaceApp.vue
+++ b/frontend/app/components/workspace/CrmWorkspaceApp.vue
@@ -4979,17 +4979,26 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
                         </div>
                       </div>
 
-                      <div v-else-if="entry.kind === 'call'" class="flex justify-center">
+                      <div
+                        v-else-if="entry.kind === 'call'"
+                        class="flex"
+                        :class="entry.item.direction === 'out' ? 'justify-end' : 'justify-start'"
+                      >
                         <div
-                          class="call-wave-card w-full max-w-[460px] rounded-2xl border border-base-300 px-4 py-3 text-center"
-                          :class="isReviewHighlightedMessage(entry.item.id) ? 'border-success/60 bg-success/10 ring-2 ring-success/40' : ''"
+                          class="call-wave-card w-full max-w-[460px] rounded-2xl border border-base-300 px-4 py-3"
+                          :class="[
+                            entry.item.direction === 'out' ? 'bg-base-200' : 'bg-base-100',
+                            isReviewHighlightedMessage(entry.item.id) ? 'border-success/60 bg-success/10 ring-2 ring-success/40' : '',
+                          ]"
                         >
                           <p class="mb-2 text-xs text-base-content/65">
+                            <span class="font-semibold">{{ entry.item.direction === "out" ? "You" : selectedCommThread?.contact || "Contact" }}</span>
+                            <span class="mx-1">·</span>
                             {{ formatDay(entry.item.at) }} · {{ formatTime(entry.item.at) }}
                             <span v-if="entry.item.duration"> · {{ entry.item.duration }}</span>
                           </p>
                           <div class="comm-call-wave mb-2" :ref="(el) => setCommCallWaveHost(entry.item.id, el as Element | null)" />
-                          <div class="mt-2 flex justify-center">
+                          <div class="mt-2 flex" :class="entry.item.direction === 'out' ? 'justify-end' : 'justify-start'">
                             <button class="call-transcript-toggle" @click="toggleCallTranscript(entry.item)">
                               <span>
                                 {{