@webitel/ui-chats 0.0.21 → 0.0.23

package/package.json

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

package/src/ui/chat-footer/components/chat-footer-wrapper.vue

@@ -15,5 +15,7 @@ const slots = defineSlots<{
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2xs);
+  max-height: 50%;
+  position: relative;
 }
-</style>
+</style>

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

@@ -1,5 +1,6 @@
 <template>
   <wt-chat-emoji
+    class="emoji-picker-action"
     :size="size"
     @insert-emoji="uiChatsEmitter!.emit('insertAtCursor', { text: $event })"
   />
@@ -16,3 +17,17 @@ 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>

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

@@ -93,11 +93,7 @@ const { image, media, document } = useChatMessageFile(props.message.file);
 const isSelfSide = computed<boolean>(
 	() => props.message.member?.self || props.message.member?.type === "webitel",
 );
-const isBot = computed<boolean>(
-	() =>
-		props.message.member?.type === "bot" ||
-		(!props.message.member?.type && !props.message.channelId),
-);
+const isBot = computed<boolean>(() => props.message.member?.type === "bot");
 
 const getClientUsername = computed<string>(() => {
 	return !isSelfSide.value ? props.username : ""; // need to show username avatar only for client

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

@@ -23,24 +23,24 @@
           <chat-footer-wrapper>
             <template #default>
               <chat-text-field
-                  v-model:text="draft"
+                v-model:text="draft"
               />
               <chat-input-actions-bar
                 :actions="props.chatActions"
                 @[ChatAction.SendMessage]="sendMessage"
                 @[ChatAction.AttachFiles]="sendFile"
               >
-              <template
-                v-for="action in slottedChatActions"
-                :key="action"
-                #[action]="{ size }"
-              >
-                <slot
-                  :name="`action:${action}`"
-                  v-bind="{ size }"
-                />
-              </template>
-            </chat-input-actions-bar>
+                <template
+                  v-for="action in slottedChatActions"
+                  :key="action"
+                  #[action]="{ size }"
+                >
+                  <slot
+                    :name="`action:${action}`"
+                    v-bind="{ size }"
+                  />
+                </template>
+              </chat-input-actions-bar>
             </template>
           </chat-footer-wrapper>
         </slot>