@webitel/ui-chats 0.0.23 → 0.0.24

package/package.json

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

package/src/ui/chat-footer/modules/user-input/components/chat-text-field.vue

@@ -6,6 +6,7 @@
     :size="size"
     autoresize
     @update:model-value="send"
+    @enter="emit('enter')"
   />
 </template>
 
@@ -28,6 +29,10 @@ const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
 uiChatsEmitter!.on("insertAtCursor", ({ text }) => insertAtCursor(text));
 uiChatsEmitter!.on("focusOnTextField", focus);
 
+const emit = defineEmits<{
+	enter: [];
+}>();
+
 const chatTextFieldInputRef =
 	useTemplateRef<typeof WtTextarea>("chatTextFieldInput");
 

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

@@ -41,7 +41,14 @@
 
 <script setup lang="ts">
 import type { Emitter } from "mitt";
-import { computed, inject, nextTick, onMounted, useTemplateRef } from "vue";
+import {
+	computed,
+	defineProps,
+	inject,
+	nextTick,
+	onMounted,
+	useTemplateRef,
+} from "vue";
 
 import { ChatAction } from "../../chat-footer/modules/user-input/enums/ChatAction.enum";
 import type { UiChatsEmitterEvents } from "../../utils/emitter";
@@ -74,7 +81,9 @@ const emit = defineEmits<(e: typeof ChatAction.LoadNextMessages) => void>();
 
 const messagesContainer = useTemplateRef("messages-container");
 
-const { showAvatar, showChatDate } = useChatMessages(props.messages);
+const { showAvatar, showChatDate } = useChatMessages(
+	computed(() => props.messages),
+); // props values reactivity https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3 @author ye.pohranichna
 
 const {
 	showScrollToBottomBtn,
@@ -84,7 +93,7 @@ const {
 	handleChatResize,
 } = useChatScroll(
 	messagesContainer,
-	computed(() => props.messages),
+	computed(() => props.messages), // props values reactivity https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3 @author ye.pohranichna
 );
 
 function focusOnInput() {

package/src/ui/messaging/modules/message/composables/useChatMessage.ts

@@ -1,6 +1,6 @@
 import { FormatDateMode } from "@webitel/ui-sdk/enums";
 import { formatDate } from "@webitel/ui-sdk/utils";
-import { type Ref, ref } from "vue";
+import { type ComputedRef, type Ref } from "vue";
 
 import type { ChatMessageType } from "../../../types/ChatMessage.types";
 
@@ -10,9 +10,9 @@ interface GetMessageResult {
 	nextMessage?: ChatMessageType;
 }
 
-export const useChatMessages = (chatMessages: ChatMessageType[]) => {
-	const messages: Ref<ChatMessageType[]> = ref(chatMessages);
-
+export const useChatMessages = (
+	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>,
+) => {
 	function showChatDate(index: number): boolean {
 		const { prevMessage, message } = getMessage(index);
 		const prevDate = +prevMessage?.createdAt || 0;

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

@@ -24,6 +24,7 @@
             <template #default>
               <chat-text-field
                 v-model:text="draft"
+                @enter="sendMessage"
               />
               <chat-input-actions-bar
                 :actions="props.chatActions"

package/types/ui/chat-footer/modules/user-input/components/chat-text-field.vue.d.ts

@@ -3,8 +3,10 @@ type __VLS_ModelProps = {
     "text": MaybeRef<string>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    enter: () => any;
     "update:text": (value: MaybeRef<string>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onEnter?: () => any;
     "onUpdate:text"?: (value: MaybeRef<string>) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/types/ui/messaging/modules/message/composables/useChatMessage.d.ts

@@ -1,10 +1,11 @@
+import { type ComputedRef, type Ref } from "vue";
 import type { ChatMessageType } from "../../../types/ChatMessage.types";
 interface GetMessageResult {
     prevMessage?: ChatMessageType;
     message?: ChatMessageType;
     nextMessage?: ChatMessageType;
 }
-export declare const useChatMessages: (chatMessages: ChatMessageType[]) => {
+export declare const useChatMessages: (messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>) => {
     showAvatar: (index: number) => boolean;
     getMessage: (index: number) => GetMessageResult;
     showChatDate: (index: number) => boolean;