tuikit-atomicx-vue3 4.5.1 → 4.5.2

package/dist/utils/call.js

@@ -1,12 +1,14 @@
-import { TUIChatEngine as k, TUIFriendService as U, TUIUserService as L } from "@tencentcloud/chat-uikit-engine";
-import R, { TUIConstants as T } from "@tencentcloud/tui-core";
+import { TUIChatEngine as L, TUIFriendService as U, TUIUserService as N } from "@tencentcloud/chat-uikit-engine";
+import S, { TUIConstants as c } from "@tencentcloud/tui-core";
 import { safeJSONParse as u } from "./json.js";
-function P(r) {
+import "../components/UIKitModal/chatErrorModal/index.js";
+import { showChatErrorModalById as R, ChatErrorModalId as k } from "../components/UIKitModal/chatErrorModal/chatErrorModal.js";
+function G(a) {
   try {
-    const e = u(r.payload.data, {});
+    const e = u(a.payload.data, {});
     if (e.businessID === 1 && e.data) {
-      const s = u(e.data, {});
-      if (s.businessID === "av_call" || s.businessID === "rtc_call")
+      const i = u(e.data, {});
+      if (i.businessID === "av_call" || i.businessID === "rtc_call")
         return !0;
     }
   } catch {
@@ -14,42 +16,46 @@ function P(r) {
   }
   return !1;
 }
-function q(r) {
-  R.callService({
-    serviceName: T.TUICalling.SERVICE.NAME,
-    method: T.TUICalling.SERVICE.METHOD.START_CALL,
+function H(a) {
+  if (!S.getService(c.TUICalling.SERVICE.NAME)) {
+    R(k.CALL_KIT_NOT_INTEGRATED);
+    return;
+  }
+  S.callService({
+    serviceName: c.TUICalling.SERVICE.NAME,
+    method: c.TUICalling.SERVICE.METHOD.START_CALL,
     params: {
-      ...r,
+      ...a,
       version: "v3"
     }
   });
 }
-function A(r) {
-  const e = u(r.payload.data, void 0);
+function V(a) {
+  const e = u(a.payload.data, void 0);
   if (!e)
     return;
-  const s = u(e.data, void 0);
-  return s ? {
-    description: r.payload.description,
-    extension: r.payload.extension,
+  const i = u(e.data, void 0);
+  return i ? {
+    description: a.payload.description,
+    extension: a.payload.extension,
     data: {
       businessID: e.businessID,
       timeout: e.timeout,
       data: {
-        businessID: s.businessID,
-        call_end: s.call_end,
-        call_type: s.call_type,
+        businessID: i.businessID,
+        call_end: i.call_end,
+        call_type: i.call_type,
         data: {
-          cmd: s.data.cmd,
-          inviter: s.data.inviter,
-          message: s.data.message,
-          room_id: s.data.room_id,
-          str_room_id: s.data.str_room_id
+          cmd: i.data.cmd,
+          inviter: i.data.inviter,
+          message: i.data.message,
+          room_id: i.data.room_id,
+          str_room_id: i.data.str_room_id
         },
-        platform: s.platform,
-        room_id: s.room_id,
-        userData: s.userData,
-        version: s.version
+        platform: i.platform,
+        room_id: i.room_id,
+        userData: i.userData,
+        version: i.version
       },
       inviteID: e.inviteID,
       groupID: e.groupID,
@@ -59,74 +65,74 @@ function A(r) {
     }
   } : void 0;
 }
-function N(r) {
-  if (!r || r <= 0)
+function x(a) {
+  if (!a || a <= 0)
     return "00:00";
-  const e = Math.floor(r / 3600), s = Math.floor(r % 3600 / 60), i = Math.floor(r % 60);
-  return e > 0 ? `${e.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${s.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`;
+  const e = Math.floor(a / 3600), i = Math.floor(a % 3600 / 60), s = Math.floor(a % 60);
+  return e > 0 ? `${e.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}` : `${i.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
 }
-function S(r, e = 12) {
-  return !r || r.length <= e ? r : `${r.substring(0, e)}...`;
+function $(a, e = 12) {
+  return !a || a.length <= e ? a : `${a.substring(0, e)}...`;
 }
-function V(r) {
-  return U.getFriendRemark([r])[r] || "";
+function B(a) {
+  return U.getFriendRemark([a])[a] || "";
 }
-const c = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map();
-function D(r, e) {
-  var f, g, _, m, p, C, M, h, v, I, w;
-  const s = A(r);
-  if (!s || s.data.businessID !== 1)
+const f = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map();
+function J(a, e) {
+  var g, _, m, p, C, M, h, I, v, T, w;
+  const i = V(a);
+  if (!i || i.data.businessID !== 1)
     return "";
-  const { data: i } = s, a = i.data, l = r.fromAccount || r.from, d = V(l), t = k.getMyUserID();
-  let n = d || r.nameCard || r.nick || l;
-  switch (n = S(n), i.actionType) {
+  const { data: s } = i, r = s.data, l = a.fromAccount || a.from, d = B(l), t = L.getMyUserID();
+  let n = d || a.nameCard || a.nick || l;
+  switch (n = $(n), s.actionType) {
     case 1:
-      return (((f = a == null ? void 0 : a.data) == null ? void 0 : f.cmd) === "audioCall" || ((g = a == null ? void 0 : a.data) == null ? void 0 : g.cmd) === "videoCall") && i.groupID ? e("CallMessage.start_call", { messageSender: n }) : ((_ = a == null ? void 0 : a.data) == null ? void 0 : _.cmd) === "hangup" ? i.groupID ? e("CallMessage.call_ended") : `${e("CallMessage.call_duration")}: ${N(a == null ? void 0 : a.call_end)}` : ((m = a == null ? void 0 : a.data) == null ? void 0 : m.cmd) === "switchToAudio" ? e("CallMessage.switch_to_audio_call") : ((p = a == null ? void 0 : a.data) == null ? void 0 : p.cmd) === "switchToVideo" ? e("CallMessage.switch_to_video_call") : e("CallMessage.start_call", { messageSender: "" });
+      return (((g = r == null ? void 0 : r.data) == null ? void 0 : g.cmd) === "audioCall" || ((_ = r == null ? void 0 : r.data) == null ? void 0 : _.cmd) === "videoCall") && s.groupID ? e("CallMessage.start_call", { messageSender: n }) : ((m = r == null ? void 0 : r.data) == null ? void 0 : m.cmd) === "hangup" ? s.groupID ? e("CallMessage.call_ended") : `${e("CallMessage.call_duration")}: ${x(r == null ? void 0 : r.call_end)}` : ((p = r == null ? void 0 : r.data) == null ? void 0 : p.cmd) === "switchToAudio" ? e("CallMessage.switch_to_audio_call") : ((C = r == null ? void 0 : r.data) == null ? void 0 : C.cmd) === "switchToVideo" ? e("CallMessage.switch_to_video_call") : e("CallMessage.start_call", { messageSender: "" });
     case 2:
-      return i.groupID ? `${n} ${e("CallMessage.cancel_call")}` : i.inviter === t ? e("CallMessage.canceled") : e("CallMessage.canceled_by_recipient");
+      return s.groupID ? `${n} ${e("CallMessage.cancel_call")}` : s.inviter === t ? e("CallMessage.canceled") : e("CallMessage.canceled_by_recipient");
     case 3:
-      return ((C = a == null ? void 0 : a.data) == null ? void 0 : C.cmd) === "switchToAudio" ? e("CallMessage.switch_to_audio_call") : ((M = a == null ? void 0 : a.data) == null ? void 0 : M.cmd) === "switchToVideo" ? e("CallMessage.switch_to_video_call") : i.groupID ? `${n} ${e("CallMessage.answered")}` : e("CallMessage.answered");
+      return ((M = r == null ? void 0 : r.data) == null ? void 0 : M.cmd) === "switchToAudio" ? e("CallMessage.switch_to_audio_call") : ((h = r == null ? void 0 : r.data) == null ? void 0 : h.cmd) === "switchToVideo" ? e("CallMessage.switch_to_video_call") : s.groupID ? `${n} ${e("CallMessage.answered")}` : e("CallMessage.answered");
     case 4:
-      return i.groupID ? `${n} ${e("CallMessage.decline_call")}` : (a == null ? void 0 : a.line_busy) === "line_busy" || ((h = a == null ? void 0 : a.data) == null ? void 0 : h.message) === "lineBusy" ? i.inviter === t ? e("CallMessage.line_busy") : e("CallMessage.missed_due_to_busy") : i.inviter === t ? e("CallMessage.declined_by_recipient") : e("CallMessage.declined");
+      return s.groupID ? `${n} ${e("CallMessage.decline_call")}` : (r == null ? void 0 : r.line_busy) === "line_busy" || ((I = r == null ? void 0 : r.data) == null ? void 0 : I.message) === "lineBusy" ? s.inviter === t ? e("CallMessage.line_busy") : e("CallMessage.missed_due_to_busy") : s.inviter === t ? e("CallMessage.declined_by_recipient") : e("CallMessage.declined");
     case 5:
-      if (((v = a == null ? void 0 : a.data) == null ? void 0 : v.cmd) === "switchToAudio")
+      if (((v = r == null ? void 0 : r.data) == null ? void 0 : v.cmd) === "switchToAudio")
         return e("CallMessage.switch_to_audio_call");
-      if (((I = a == null ? void 0 : a.data) == null ? void 0 : I.cmd) === "switchToVideo")
+      if (((T = r == null ? void 0 : r.data) == null ? void 0 : T.cmd) === "switchToVideo")
         return e("CallMessage.switch_to_video_call");
-      if (i.groupID) {
-        if (l === i.inviter) {
-          x(i.inviteeList);
+      if (s.groupID) {
+        if (l === s.inviter) {
+          O(s.inviteeList);
           let o = "";
-          return (w = i.inviteeList) == null || w.forEach((y) => {
-            const E = c.get(y) || y;
-            o += `${S(E)}、`;
+          return (w = s.inviteeList) == null || w.forEach((y) => {
+            const A = f.get(y) || y;
+            o += `${$(A)}、`;
           }), o = o.substring(0, o.lastIndexOf("、")), `${o} ${e("CallMessage.no_answer")}`;
         }
         return `${n} ${e("CallMessage.no_answer")}`;
       }
-      return i.inviter === t ? e("CallMessage.no_answer_from_recipient") : e("CallMessage.no_answer_timeout");
+      return s.inviter === t ? e("CallMessage.no_answer_from_recipient") : e("CallMessage.no_answer_timeout");
     default:
       return "";
   }
 }
-function x(r = []) {
-  if (r.length === 0)
+function O(a = []) {
+  if (a.length === 0)
     return;
-  const e = U.getFriendRemark(r), s = [];
-  r.forEach((i) => {
-    const a = e[i];
-    a ? c.set(i, a) : $.has(i) || (s.push(i), $.set(i, 1));
-  }), s.length > 0 && L.getUserProfile({ userIDList: s }).then((i) => {
-    (i.data || []).forEach((l) => {
+  const e = U.getFriendRemark(a), i = [];
+  a.forEach((s) => {
+    const r = e[s];
+    r ? f.set(s, r) : E.has(s) || (i.push(s), E.set(s, 1));
+  }), i.length > 0 && N.getUserProfile({ userIDList: i }).then((s) => {
+    (s.data || []).forEach((l) => {
       const { userID: d, nick: t } = l, n = t || d;
-      c.set(d, n);
+      f.set(d, n);
     });
   }).catch(() => {
   });
 }
 export {
-  P as isCallMessage,
-  A as parseCallMessage,
-  D as parseCallMessageText,
-  q as startCall
+  G as isCallMessage,
+  V as parseCallMessage,
+  J as parseCallMessageText,
+  H as startCall
 };

package/dist/{utils-CttDpxqz.js → utils-BU8IkP_V.js}

@@ -1,4 +1,4 @@
-import { g as E } from "./Teleport-DFrneqLM.js";
+import { g as E } from "./Teleport-98QrIYDI.js";
 const m = "menu.itemSelect", x = ["Enter", " "], S = [
   "ArrowDown",
   "PageUp",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -41,7 +41,6 @@
     "check-chinese:src": "node scripts/check-chinese-simple.js directory src",
     "check-chinese:staged": "node scripts/check-chinese-simple.js staged",
     "pre-commit": "npm run check-chinese:staged",
-    "publish": "npm publish --access public",
     "test:pre": "node scripts/test-pre.js",
     "test": "playwright test",
     "test:ci": "playwright test || exit 0",
@@ -56,17 +55,17 @@
     "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.7",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.5.1-beta.1",
-    "@tencentcloud/uikit-base-component-vue3": "1.3.1",
+    "@tencentcloud/tuiroom-engine-js": "~3.5.0",
+    "@tencentcloud/uikit-base-component-vue3": "1.3.2",
     "vue": "^3.4.0"
   },
   "dependencies": {
     "@tencentcloud/universal-api": "^2.4.0",
     "@tiptap/extension-mention": "^2.11.5",
-    "@tiptap/suggestion": "2.11.5",
+    "@tiptap/suggestion": "^2.11.5",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
-    "@tiptap/pm": "^3.1.0",
+    "@tiptap/pm": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/vue-3": "^2.11.5",
     "@vue/tsconfig": "^0.7.0",

package/src/components/AudioSettingPanel/index.vue

@@ -131,18 +131,16 @@ const volumeTotalNum = ref(28);
 const volumeNum = computed(() => {
   if (isMicrophoneTesting.value) {
     return (testingMicVolume.value * volumeTotalNum.value) / 100;
-  } else {
-    return (currentMicVolume.value * volumeTotalNum.value) / 100;
   }
+  return (currentMicVolume.value * volumeTotalNum.value) / 100;
 });
 
 const showInputVolume = computed(() => {
   if (props.micTestVisible) {
     return isMicrophoneTesting.value;
-  } else {
-    return true;
   }
-})
+  return true;
+});
 
 const captureVolumeValue = ref(captureVolume.value);
 const outputVolumeValue = ref(outputVolume.value);
@@ -161,6 +159,7 @@ watch(outputVolumeValue, async (value) => {
   width: 100%;
   font-size: 14px;
   border-radius: 4px;
+  text-align: initial;
 
   .item-setting {
     width: 100%;

package/src/components/ConversationList/ConversationActions/ConversationActions.vue

@@ -25,8 +25,9 @@
     <TUIDropdown
       v-else
       trigger="click"
-      :teleported="false"
+      :teleported="true"
       placement="bottom-end"
+      @visible-change="handleDropdownVisibleChange"
     >
       <div
         :class="$style['conversationActions__popup-icon']"
@@ -71,6 +72,7 @@ const props = withDefaults(defineProps<ConversationActionsProps>(), {
 const emit = defineEmits<{
   click: [e: Event, key?: string, conversation?: ConversationModel];
   close: [];
+  dropdownVisibleChange: [visible: boolean];
   markConversationUnread: [conversation: ConversationModel, e?: Event];
   conversationPin: [conversation: ConversationModel, e?: Event];
   conversationMute: [conversation: ConversationModel, e?: Event];
@@ -169,6 +171,10 @@ const handleMaskClick = (e: Event) => {
     props.onClose();
   }
 };
+
+const handleDropdownVisibleChange = (visible: boolean) => {
+  emit('dropdownVisibleChange', visible);
+};
 </script>
 
 <style lang="scss" module>

package/src/components/ConversationList/ConversationCreate/ConversationCreate.vue

@@ -189,7 +189,11 @@ const handleCreateGroupConversation = async () => {
     const conversation = await createGroupConversation(options);
     _onConversationCreated(conversation);
   } catch (error: any) {
-    TUIToast.error({ message: error.message });
+    if (error.code === 10021) {
+      TUIToast.error({ message: t('TUIConversation.group_id_already_used') });
+    } else {
+      TUIToast.error({ message: error.message });
+    }
   }
 };
 

package/src/components/ConversationList/ConversationList.vue

@@ -25,7 +25,6 @@
         @created="handleCreated"
       />
     </component>
-
     <component
       :is="List"
       :empty="renderConversationList.length === 0"

package/src/components/ConversationList/ConversationPreview/ConversationPreview.scss

@@ -18,7 +18,7 @@
   }
 
   &--active {
-    background-color: var(--list-color-hover, #e3f2fd);
+    background-color: var(--list-color-focused, #e3f2fd);
   }
 
   &--pin {
@@ -123,4 +123,4 @@
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
-} 
+}

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUI.vue

@@ -47,6 +47,7 @@
             :conversation="conversation"
             v-bind="actionsConfig"
             @close="handleCloseActionsModal"
+            @dropdown-visible-change="handleDropdownVisibleChange"
           />
           <component
             :is="LastMessageTimestamp"
@@ -103,6 +104,7 @@ const { activeConversation, setActiveConversation } = useConversationListState()
 
 const conversationPreviewRef = ref<HTMLElement>();
 const isActionMenuActive = ref(false);
+const isDropdownOpen = ref(false);
 
 const { isHovered } = useMouseHover(conversationPreviewRef);
 const { getEventHandlers } = useLongPress(() => {
@@ -115,6 +117,10 @@ const longPressEvents = getEventHandlers();
 
 watch(isHovered, (newValue) => {
   if (!isH5) {
+    // Don't hide when dropdown is open
+    if (!newValue && isDropdownOpen.value) {
+      return;
+    }
     isActionMenuActive.value = newValue;
   }
 });
@@ -127,6 +133,15 @@ const handleClick = () => {
 const handleCloseActionsModal = () => {
   isActionMenuActive.value = false;
 };
+
+const handleDropdownVisibleChange = (visible: boolean) => {
+  console.log('[ConversationPreview] dropdown visible changed:', visible);
+  isDropdownOpen.value = visible;
+  // When dropdown closes and mouse is not hovering, hide actions
+  if (!visible && !isHovered.value) {
+    isActionMenuActive.value = false;
+  }
+};
 </script>
 
 <style lang="scss" module>

package/src/components/ConversationList/i18n/en-US.ts

@@ -75,5 +75,6 @@ export default {
     'you_have_left_the_group_chat': 'You have left the group chat',
     'someone_at_me': 'You were mentioned',
     'at_all': '@All',
+    'group_id_already_used': 'The group ID for creating the group chat is already in use, please choose a different group ID.',
   },
 };

package/src/components/ConversationList/i18n/zh-CN.ts

@@ -75,5 +75,6 @@ export default {
     'you_have_left_the_group_chat': '你已退出该群聊',
     'someone_at_me': '有人@我',
     'at_all': '@所有人',
+    'group_id_already_used': '当前创建群聊的群ID已被使用，请选择其他群ID',
   },
 };

package/src/components/LiveScenePanel/index.vue

@@ -196,7 +196,6 @@ const selectMaterial = async (type: TRTCMediaSourceType) => {
         name: t('Screen'),
         screen: {
           resolution: TRTCVideoResolution.TRTCVideoResolution_1920_1080,
-          systemAudio: true,
           fps: 15,
         },
       });

package/src/components/MessageInput/MessageInput.module.scss

@@ -7,6 +7,7 @@
   flex-shrink: 0;
   padding: 10px;
   gap: 4px;
+  text-align: start;
 
   &__toolbar {
     display: flex;

package/src/components/MessageList/Message/MessageLayout/MessageMeta/MessageMeta.vue

@@ -54,13 +54,22 @@ const readReceiptText = computed(() => {
     return '';
   }
 
+  const {
+    readCount,
+    unreadCount,
+    isPeerRead,
+  } = props.readReceiptInfo;
+
   if (props.isGroup) {
-    if (props.readReceiptInfo.unreadCount > 0) {
-      return `${props.readReceiptInfo.unreadCount} ${t('MessageList.unread')} ·`;
+    if (unreadCount === undefined || readCount === undefined) {
+      return '';
+    }
+    if (unreadCount > 0) {
+      return `${unreadCount} ${t('MessageList.unread')} ·`;
     }
     return `${t('MessageList.all_read')} ·`;
   }
-  if (props.readReceiptInfo.isPeerRead) {
+  if (isPeerRead) {
     return `${t('MessageList.read')} ·`;
   }
   return `${t('MessageList.unread')} ·`;

package/src/components/MessageList/MessageList.vue

@@ -13,6 +13,7 @@ import type { Component } from 'vue';
 import cs from 'classnames';
 import { ObserverView } from '../../baseComp/ObserverView';
 import { View } from '../../baseComp/View';
+import { useReadReceipt } from '../../hooks/useReadReceipt/useReadReceipt';
 import { useScroll } from '../../hooks/useScroll';
 import { useConversationListState } from '../../states/ConversationListState';
 import { useGroupSettingState } from '../../states/GroupSettingState';
@@ -88,6 +89,14 @@ const { getGroupMemberList } = useGroupSettingState();
 
 const { scrollToBottom } = useScroll();
 const { activeConversation } = useConversationListState();
+const {
+  observeMessageList,
+  resetProcessedMessages,
+} = useReadReceipt({
+  enabled: props.enableReadReceipt ?? false,
+  containerSelector: '#messageScrollList',
+  getMessageIDFromDom: (dom: HTMLElement) => dom.dataset.messageId || '',
+});
 
 const isGroup = computed(() => activeConversation.value?.type === ConversationType.GROUP);
 const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
@@ -176,6 +185,7 @@ const initializeMessageList = async () => {
   isFinishFirstRender.value = false;
   setIsDisableScroll(false);
   isScrollToBottomVisible.value = false;
+  resetProcessedMessages();
 };
 
 // Load more history messages
@@ -232,6 +242,7 @@ watch(messageList, (newMessages, oldMessages) => {
     nextTick(() => {
       scrollToBottom({ behavior: 'instant' });
       isFinishFirstRender.value = true;
+      observeMessageList();
     });
     if (isGroup.value) {
       getGroupMemberList();
@@ -247,6 +258,9 @@ watch(messageList, (newMessages, oldMessages) => {
   const oldLastMessage = oldMessages[oldMessages.length - 1];
 
   if (newLastMessage?.ID !== oldLastMessage?.ID) {
+    nextTick(() => {
+      observeMessageList();
+    });
     // new message coming
     const shouldAutoScroll = newLastMessage.flow === 'out'
       || (!isDisableScroll.value && distanceToBottom.value < autoScrollThreshold);

package/src/components/ScheduleRoomPanel/RoomDetail.vue

@@ -136,6 +136,7 @@ const copy = async (value: string) => {
 .room-detail {
   padding: 20px 0;
   user-select: text;
+  text-align: initial;
 
   .room-detail-empty {
     text-align: center;

package/src/components/ScheduleRoomPanel/RoomEdit.vue

@@ -340,7 +340,8 @@ const handleSave = () => {
 
 <style lang="scss" scoped>
 .room-edit {
-    width: 100%;
+  width: 100%;
+  text-align: initial;
 
   .edit-form {
     .form-item {

package/src/components/ScheduleRoomPanel/RoomShare.vue

@@ -140,6 +140,7 @@ const copyRoomInfoAndLink = async () => {
 .room-share {
   min-width: 400px;
   user-select: text;
+  text-align: initial;
 
   .room-share-empty {
     text-align: center;

package/src/components/ScheduleRoomPanel/ScheduleRoomPanel.vue

@@ -461,6 +461,7 @@ watch(() => props.visible, (visible) => {
   width: 100%;
   max-width: 600px;
   height: 100%;
+  text-align: initial;
 }
 
 .panel-content {

package/src/components/ScheduleRoomPanel/ScheduledRoomList.vue

@@ -432,6 +432,7 @@ watch(() => loginUserInfo.value?.userId, (userId) => {
   height: 100%;
   overflow-y: auto;
   position: relative;
+  text-align: initial;
 }
 
 .loading-overlay {