@webitel/ui-chats 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.24",
+	"version": "0.1.26",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

package/src/ui/chat-footer/modules/user-input/components/actions/emoji-picker-action.vue

@@ -2,6 +2,7 @@
   <wt-chat-emoji
     class="emoji-picker-action"
     :size="size"
+    popup-teleport-to=".chat-footer-wrapper"
     @insert-emoji="uiChatsEmitter!.emit('insertAtCursor', { text: $event })"
   />
 </template>
@@ -16,18 +17,4 @@ import type { UiChatsEmitterEvents } from '../../../../../utils/emitter';
 
 const size = inject<ComponentSize>('size');
 const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>('uiChatsEmitter');
-</script>
-
-<style lang="scss" scoped>
-$input-height: 48px; // https://webitel.atlassian.net/browse/WTEL-6149 (comments)
-
-.emoji-picker-action {
-  ::v-deep emoji-picker {
-    position: absolute;
-    z-index: calc(var(--popup-wrapper-z-index) - 1);
-    bottom: calc(100% + $input-height);
-    left: 100%;
-    transform: translateX(-50%);
-  }
-}
-</style>
+</script>

package/src/ui/messaging/components/the-messages-container.vue

@@ -19,6 +19,7 @@
         v-for="(message, index) of props.messages"
         :key="message.id"
         :message="message"
+        :agent-name="props.agentName"
         :show-avatar="showAvatar(index)"
         :without-avatars="props.withoutAvatars"
         @[MessageAction.ClickOnImage]="clickOnImage(message)"
@@ -72,6 +73,7 @@ const props = withDefaults(
 		next?: boolean;
 		isLoading?: boolean;
 		withoutAvatars?: boolean;
+		agentName?: string;
 	}>(),
 	{
 		next: false,

package/src/ui/messaging/modules/message/components/chat-message.vue

@@ -15,7 +15,7 @@
       >
         <wt-avatar
           v-if="props.showAvatar"
-          :username="username"
+          :username="getClientUsername"
           :size="ComponentSize.SM || size"
           :bot="isBot"
         />
@@ -80,6 +80,7 @@ const props = withDefaults(
 		showAvatar?: boolean;
 		withoutAvatars?: boolean;
 		username?: string;
+		agentName?: string;
 	}>(),
 	{
 		showAvatar: false,
@@ -106,6 +107,10 @@ const isSelfSide = computed<boolean>(
 );
 const isBot = computed<boolean>(() => props.message.member?.type === 'bot');
 
+const getClientUsername = computed<string>(() => {
+	return isSelfSide.value ? props?.agentName : props.username;
+});
+
 function handlePlayerInitialize(player) {
 	emit(MessageAction.InitializedPlayer, {
 		player,

package/src/ui/the-chat-container.vue

@@ -16,6 +16,7 @@
         :next="props.canLoadNextMessages"
         :is-loading="props.isNextMessagesLoading"
         :without-avatars="props.withoutAvatars"
+        :agent-name="props.agentName"
         @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
       />
     </slot>
@@ -79,6 +80,7 @@ const props = withDefaults(
 		isNextMessagesLoading?: boolean;
 		withoutAvatars?: boolean;
 		readonly?: boolean; // hide chat footer with textarea and action-buttons
+		agentName?: string;
 	}>(),
 	{
 		size: ComponentSize.MD,

package/types/ui/messaging/components/the-messages-container.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     next?: boolean;
     isLoading?: boolean;
     withoutAvatars?: boolean;
+    agentName?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     loadNextMessages: () => any;

package/types/ui/messaging/modules/message/components/chat-message.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     showAvatar?: boolean;
     withoutAvatars?: boolean;
     username?: string;
+    agentName?: string;
 };
 declare var __VLS_1: {}, __VLS_52: {};
 type __VLS_Slots = {} & {