From b759aa9570c487b77fd399e5401f2111fdd28873 Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Wed, 5 Aug 2026 14:01:05 +0330
Subject: [PATCH] fix support issue 2

---
 .../support/components/AdminSupportHeader.vue |  9 +--
 .../components/AdminSupportMessages.vue       | 66 ++++++++++++++-----
 .../components/AdminSupportSidebar.vue        | 10 +--
 src/pages/support/index.vue                   |  1 +
 src/router/routes/support.ts                  |  2 +-
 src/utils/avatarInitials.ts                   | 22 +++++++
 6 files changed, 84 insertions(+), 26 deletions(-)
 create mode 100644 src/utils/avatarInitials.ts

diff --git a/src/pages/support/components/AdminSupportHeader.vue b/src/pages/support/components/AdminSupportHeader.vue
index e53dcfc..1ef8685 100644
--- a/src/pages/support/components/AdminSupportHeader.vue
+++ b/src/pages/support/components/AdminSupportHeader.vue
@@ -47,6 +47,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { getNameAvatarInitials } from '@/utils/avatarInitials'
 
 const props = defineProps<{
   title: string
@@ -61,10 +62,7 @@ defineEmits<{
   (e: 'toggle-mobile-list'): void
 }>()
 
-const titleInitial = computed(() => {
-  const value = String(props.title || '').trim()
-  return value ? value.charAt(0) : '؟'
-})
+const titleInitial = computed(() => getNameAvatarInitials(props.title))
 </script>
 
 <style scoped lang="less">
@@ -132,6 +130,9 @@ const titleInitial = computed(() => {
 
 .admin-support-header__avatar-text {
   line-height: 1;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.02em;
 }
 
 .admin-support-header__online {
diff --git a/src/pages/support/components/AdminSupportMessages.vue b/src/pages/support/components/AdminSupportMessages.vue
index d79d826..167683f 100644
--- a/src/pages/support/components/AdminSupportMessages.vue
+++ b/src/pages/support/components/AdminSupportMessages.vue
@@ -75,9 +75,7 @@
                   :class="message.sender === 'admin' ? 'admin-message-row__inner--out' : ''"
                 >
                   <div v-if="message.sender === 'user'" class="admin-message-avatar">
-                    <span class="text-xs font-bold flex items-center justify-center">
-                      <BaseIcon icon="vuesax-linear:profile" />
-                    </span>
+                    <span class="admin-message-avatar__text">{{ userAvatarText }}</span>
                   </div>
 
                   <div
@@ -231,7 +229,7 @@
           <div v-if="supportTyping" class="admin-message-row admin-message-row--in">
             <div class="admin-message-row__inner">
               <div class="admin-message-avatar">
-                <span class="text-xs font-bold">U</span>
+                <span class="admin-message-avatar__text">{{ userAvatarText }}</span>
               </div>
 
               <div class="admin-bubble admin-bubble--in">
@@ -252,6 +250,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch, onBeforeUnmount } from 'vue'
 import type { SupportMessage, SupportMessageSender } from '@/model/support'
+import { getNameAvatarInitials } from '@/utils/avatarInitials'
 
 const props = defineProps<{
   messages: SupportMessage[]
@@ -260,6 +259,7 @@ const props = defineProps<{
   loadingOlder?: boolean
   loading?: boolean
   loadingLabel?: string
+  userName?: string
 }>()
 
 const emit = defineEmits<{
@@ -268,6 +268,8 @@ const emit = defineEmits<{
   (e: 'bottom-state-change', value: boolean): void
 }>()
 
+const userAvatarText = computed(() => getNameAvatarInitials(props.userName || ''))
+
 const scrollContainer = ref<HTMLElement | null>(null)
 
 const isAtBottom = ref(true)
@@ -919,8 +921,11 @@ AdminSupport .admin-bubble__image-wrap {
   display: flex;
   justify-content: center;
   pointer-events: none;
-  padding: 4px 0 8px;
-  margin-bottom: 4px;
+  /* نوار تمام‌عرض مات تا تاریخ بلند زیر «امروز/دیروز» از کنار دیده نشود */
+  width: 100%;
+  padding: 8px 0;
+  margin: 0 0 4px;
+  background: var(--admin-bg-subtle, #fafafa);
 }
 
 .admin-day-chip {
@@ -999,11 +1004,18 @@ AdminSupport .admin-bubble__image-wrap {
   justify-content: center;
   border-radius: 999px;
   border: 1px solid #e5e7eb;
-  background: #fff;
-  color: #3f3f46;
+  background: color-mix(in srgb, var(--admin-gold-light, #2563eb) 14%, #fff);
+  color: var(--admin-gold-light, #2563eb);
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
 }
 
+.admin-message-avatar__text {
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+
 .admin-bubble {
   min-width: 110px;
   width: fit-content;
@@ -1144,26 +1156,35 @@ AdminSupport .admin-bubble__image-wrap {
   min-width: 10rem;
   width: 100%;
   max-width: 100%;
-  margin-bottom: 9px;
-  padding: 8px 10px;
-  border-radius: 14px;
+  margin-bottom: 10px;
+  padding: 9px 11px;
+  border-radius: 12px;
   overflow: hidden;
+  border: 1px solid transparent;
 }
 
 .admin-bubble--out .admin-message__reply {
-  background: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.22);
+  border-color: rgba(255, 255, 255, 0.28);
 }
 
 .admin-bubble--in .admin-message__reply {
-  background: #f4f7ff;
+  background: #f4f4f5;
+  border-color: #e4e4e7;
 }
 
 .admin-message__reply-line {
   width: 3px;
   flex: 0 0 3px;
+  align-self: stretch;
+  min-height: 28px;
   border-radius: 999px;
-  background: currentColor;
-  opacity: 0.75;
+  background: var(--colorPrimary, #2563eb);
+  opacity: 1;
+}
+
+.admin-bubble--out .admin-message__reply-line {
+  background: rgba(255, 255, 255, 0.92);
 }
 
 .admin-message__reply-content {
@@ -1189,7 +1210,7 @@ AdminSupport .admin-bubble__image-wrap {
   unicode-bidi: plaintext;
   font-size: 12px;
   line-height: 1.7;
-  opacity: 0.86;
+  opacity: 1;
 }
 
 .admin-bubble--out .admin-message__reply-title,
@@ -1864,6 +1885,10 @@ html.is-dark .admin-messages::-webkit-scrollbar-thumb {
 
 html.is-dark .admin-messages-loading,
 html.is-dark .admin-jump-bottom,
+html.is-dark .admin-day-sticky {
+  background: var(--admin-bg-subtle, #18181b);
+}
+
 html.is-dark .admin-day-chip {
   color: var(--admin-text-muted);
   border-color: var(--admin-border);
@@ -1939,6 +1964,15 @@ html.is-dark .admin-reply-swipe-cue {
 html.is-dark .admin-bubble--in .admin-message__reply,
 html.is-dark .admin-bubble--out .admin-message__reply {
   background: var(--admin-bg-muted) !important;
+  border-color: var(--admin-border) !important;
+}
+
+html.is-dark .admin-bubble--in .admin-message__reply-line {
+  background: var(--admin-gold-light, var(--colorPrimary, #2563eb)) !important;
+}
+
+html.is-dark .admin-bubble--out .admin-message__reply-line {
+  background: rgba(255, 255, 255, 0.85) !important;
 }
 
 html.is-dark .admin-bubble--in .admin-message__reply-title {
diff --git a/src/pages/support/components/AdminSupportSidebar.vue b/src/pages/support/components/AdminSupportSidebar.vue
index eae4360..a43f030 100644
--- a/src/pages/support/components/AdminSupportSidebar.vue
+++ b/src/pages/support/components/AdminSupportSidebar.vue
@@ -140,6 +140,7 @@
 import { computed, ref } from 'vue'
 import type { SupportConversation } from '@/model/support'
 import BasicInput from '@/components/BasicInput.vue'
+import { getNameAvatarInitials } from '@/utils/avatarInitials'
 
 const props = defineProps<{
   conversations: SupportConversation[]
@@ -180,10 +181,7 @@ const totalUnread = computed(() => {
   }, 0)
 })
 
-const getAvatarText = (name: string) => {
-  const value = String(name || 'ک').trim()
-  return value.slice(0, 1)
-}
+const getAvatarText = (name: string) => getNameAvatarInitials(name, 'ک')
 </script>
 
 <style scoped lang="less">
@@ -483,8 +481,10 @@ const getAvatarText = (name: string) => {
 }
 
 .admin-room-card__avatar-text {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 950;
+  line-height: 1;
+  letter-spacing: 0.02em;
 }
 
 .admin-room-card__online {
diff --git a/src/pages/support/index.vue b/src/pages/support/index.vue
index 00cd424..3e3dd49 100644
--- a/src/pages/support/index.vue
+++ b/src/pages/support/index.vue
@@ -39,6 +39,7 @@
             :loading-older="activeLoadingOlder"
             :loading="activeRoomLoading"
             :loading-label="activeLoadingLabel"
+            :user-name="activeConversation.userName"
             @load-older="loadOlderMessages"
             @reply="handleReplyMessage"
             @bottom-state-change="handleBottomStateChange"
diff --git a/src/router/routes/support.ts b/src/router/routes/support.ts
index da7cb11..31c734b 100644
--- a/src/router/routes/support.ts
+++ b/src/router/routes/support.ts
@@ -12,7 +12,7 @@ const support: RouteRecordRaw = {
     disabled: false,
     hideMenu: false,
     hideChildren: true,
-    order: 11,
+    order: 7.5,
   },
   children: [
     {
diff --git a/src/utils/avatarInitials.ts b/src/utils/avatarInitials.ts
new file mode 100644
index 0000000..6cdc397
--- /dev/null
+++ b/src/utils/avatarInitials.ts
@@ -0,0 +1,22 @@
+/** دو حرف از اسم و فامیل برای آواتار (اولِ نام + اولِ نام‌خانوادگی) */
+export function getNameAvatarInitials(name: string, fallback = '؟'): string {
+  const parts = String(name || '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+
+  if (!parts.length) return fallback
+
+  const firstChars = (word: string) => Array.from(word)
+
+  if (parts.length === 1) {
+    const chars = firstChars(parts[0])
+    if (!chars.length) return fallback
+    return chars.slice(0, 2).join('')
+  }
+
+  const first = firstChars(parts[0])[0] || ''
+  const last = firstChars(parts[parts.length - 1])[0] || ''
+  const initials = `${first}${last}`.trim()
+  return initials || fallback
+}