@webitel/ui-chats 0.0.24 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.0.24",
+	"version": "0.0.26",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -12,7 +12,7 @@
 		"build": "(npm run build:types || true)",
 		"build:types": "vue-tsc -p ./tsconfig.build.json",
 		"lint:biome": "biome check --write",
-		"utils:publish": "npm publish --access public"
+		"utils:publish": "npm publish --access public --tag ${NPM_TAG:-latest}"
 	},
 	"dependencies": {
 		"autolinker": "^4.1.5",
@@ -41,6 +41,10 @@
 		"CHANGELOG.md"
 	],
 	"exports": {
+		".": {
+			"types": "./types/index.d.ts",
+			"import": "./src/index.ts"
+		},
 		"./ui": {
 			"types": "./types/ui/index.d.ts",
 			"import": "./src/ui/index.ts"

package/src/config/config.ts

@@ -0,0 +1,22 @@
+import type { I18n } from "vue-i18n";
+import { messages } from "../locale";
+
+export type UiChatsConfig = {
+	i18n?: I18n;
+};
+
+export const defaultConfig: UiChatsConfig = {
+	i18n: null,
+};
+
+export const setConfig = (conf: UiChatsConfig) => {
+	Object.assign(defaultConfig, conf);
+
+	if (!conf.i18n?.global) {
+		throw new Error("i18n is required");
+	}
+
+	Object.entries(messages).forEach(([locale, localeMessages]) => {
+		conf.i18n.global.mergeLocaleMessage(locale, localeMessages);
+	});
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { setConfig } from "./config/config";

package/src/locale/en/en.ts

@@ -2,7 +2,8 @@ export default {
 	"@webitel/ui-chats": {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "TODO",
+				chatsFileBlocked: "File quarantined or blocked",
+				textAreaPlaceholder: "Write a message...",
 			},
 		},
 	},

package/src/locale/es/es.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Archivo en cuarentena o bloqueado",
+				textAreaPlaceholder: "Escribe un mensaje...",
+			},
+		},
+	},
+};

package/src/locale/index.ts

@@ -0,0 +1,23 @@
+import en from "./en/en";
+import es from "./es/es";
+import kz from "./kz/kz";
+import pl from "./pl/pl";
+import ro from "./ro/ro";
+import ru from "./ru/ru";
+import uk from "./uk/uk";
+import uz from "./uz/uz";
+import vi from "./vi/vi";
+
+export const messages = {
+	en,
+	uk,
+	ru,
+	es,
+	kz,
+	pl,
+	ro,
+	uz,
+	vi,
+};
+
+export { en, uk, ru, es, kz, pl, ro, uz, vi };

package/src/locale/kz/kz.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Файл карантинде немесе бұғатталған",
+				textAreaPlaceholder: "Хабарлама жаз...",
+			},
+		},
+	},
+};

package/src/locale/pl/pl.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Plik w kwarantannie lub zablokowany",
+				textAreaPlaceholder: "Napisz wiadomość...",
+			},
+		},
+	},
+};

package/src/locale/ro/ro.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Fişier în carantină sau blocat",
+				textAreaPlaceholder: "Scrie un mesaj...",
+			},
+		},
+	},
+};

package/src/locale/ru/ru.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Файл в карантине или заблокирован",
+				textAreaPlaceholder: "Напишите сообщение...",
+			},
+		},
+	},
+};

package/src/locale/uk/uk.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Файл в карантині чи заблокований",
+				textAreaPlaceholder: "Напишіть повідомлення...",
+			},
+		},
+	},
+};

package/src/locale/uz/uz.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Fayl karantinda yoki bloklangan",
+				textAreaPlaceholder: "Xabar yozing...",
+			},
+		},
+	},
+};

package/src/locale/vi/vi.ts

@@ -0,0 +1,10 @@
+export default {
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "Tệp bị cách ly hoặc bị chặn",
+				textAreaPlaceholder: "Viết tin nhắn...",
+			},
+		},
+	},
+};

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

@@ -3,10 +3,10 @@
     ref="chatTextFieldInput"
     class="chat-text-field"
     :model-value="textModel"
+    :placeholder="t('@webitel/ui-chats.ui.messaging.textAreaPlaceholder')"
     :size="size"
     autoresize
     @update:model-value="send"
-    @enter="emit('enter')"
   />
 </template>
 
@@ -16,9 +16,12 @@ import { ComponentSize } from "@webitel/ui-sdk/enums";
 import insertTextAtCursor from "insert-text-at-cursor";
 import type { Emitter } from "mitt";
 import { computed, inject, type MaybeRef, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
 
 import type { UiChatsEmitterEvents } from "../../../../utils/emitter";
 
+const { t } = useI18n();
+
 const textModel = defineModel<MaybeRef<string>>("text", {
 	required: true,
 });
@@ -29,10 +32,6 @@ 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,14 +41,7 @@
 
 <script setup lang="ts">
 import type { Emitter } from "mitt";
-import {
-	computed,
-	defineProps,
-	inject,
-	nextTick,
-	onMounted,
-	useTemplateRef,
-} from "vue";
+import { computed, inject, nextTick, onMounted, useTemplateRef } from "vue";
 
 import { ChatAction } from "../../chat-footer/modules/user-input/enums/ChatAction.enum";
 import type { UiChatsEmitterEvents } from "../../utils/emitter";
@@ -81,9 +74,7 @@ const emit = defineEmits<(e: typeof ChatAction.LoadNextMessages) => void>();
 
 const messagesContainer = useTemplateRef("messages-container");
 
-const { showAvatar, showChatDate } = useChatMessages(
-	computed(() => props.messages),
-); // props values reactivity https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3 @author ye.pohranichna
+const { showAvatar, showChatDate } = useChatMessages(props.messages);
 
 const {
 	showScrollToBottomBtn,
@@ -93,7 +84,7 @@ const {
 	handleChatResize,
 } = useChatScroll(
 	messagesContainer,
-	computed(() => props.messages), // props values reactivity https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3 @author ye.pohranichna
+	computed(() => props.messages),
 );
 
 function focusOnInput() {

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

@@ -1,12 +1,10 @@
 <template>
-  <div class="chat-message-blocked-error">
+  <div class="chat-message-blocked-error typo-body-1">
     <wt-icon
       icon="protection-error"
       color="error"
     />
-    <!-- TODO: move chat locales from cc-workspaces to this pkg -->
     <p>
-      <!-- {{ t('workspaceSec.chat.chatsFileBlocked') }} -->
       {{ t('@webitel/ui-chats.ui.messaging.chatsFileBlocked') }}
     </p>
   </div>

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

@@ -41,6 +41,9 @@ function handlePlayerInitialize(player) {
 </script>
 
 <style lang="scss" scoped>
+$chat-file-max-width: 280px;
+$chat-file-max-height: 280px;
+
 .chat-message-player {
   .wt-player :deep(.plyr) {
     .wt-player__close-icon,
@@ -49,8 +52,8 @@ function handlePlayerInitialize(player) {
     }
 
     &.plyr--video {
-      max-height: var(--chat-file-max-height);
-      max-width: var(--chat-file-max-width);
+      max-height: $chat-file-max-height;
+      max-width: $chat-file-max-width;
     }
   }
 }

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 ComputedRef, type Ref } from "vue";
+import { type Ref, ref } from "vue";
 
 import type { ChatMessageType } from "../../../types/ChatMessage.types";
 
@@ -10,9 +10,9 @@ interface GetMessageResult {
 	nextMessage?: ChatMessageType;
 }
 
-export const useChatMessages = (
-	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>,
-) => {
+export const useChatMessages = (chatMessages: ChatMessageType[]) => {
+	const messages: Ref<ChatMessageType[]> = ref(chatMessages);
+
 	function showChatDate(index: number): boolean {
 		const { prevMessage, message } = getMessage(index);
 		const prevDate = +prevMessage?.createdAt || 0;

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

@@ -1,51 +1,47 @@
 <template>
   <section class="the-chat-container">
-    <!-- <slot name="header">
-            header goes here
-        </slot> -->
-        <slot name="main">
-          <dropzone
-            v-if="!isDropzoneDisabled && isDropzoneVisible"
-            @dragenter.prevent
-            @dragleave.prevent="handleDragLeave"
-            @drop="sendFile"
+    <slot name="main">
+      <dropzone
+        v-if="!isDropzoneDisabled && isDropzoneVisible"
+        @dragenter.prevent
+        @dragleave.prevent="handleDragLeave"
+        @drop="sendFile"
+      />
+      <messages-container
+        :messages="props.messages"
+        :next="props.canLoadNextMessages"
+        :is-loading="props.isNextMessagesLoading"
+        :without-avatars="props.withoutAvatars"
+        @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
+      />
+    </slot>
+    <slot name="footer">
+      <chat-footer-wrapper v-if="!props.readonly">
+        <template #default>
+          <chat-text-field
+            v-model:text="draft"
+            @enter="sendMessage"
           />
-          <messages-container
-            :messages="props.messages"
-            :next="props.canLoadNextMessages"
-            :is-loading="props.isNextMessagesLoading"
-            :without-avatars="props.withoutAvatars"
-            @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
+          <chat-input-actions-bar
+            :actions="props.chatActions"
+            @[ChatAction.SendMessage]="sendMessage"
             @[ChatAction.AttachFiles]="sendFile"
-          />
-        </slot>
-        <slot name="footer">
-          <chat-footer-wrapper>
-            <template #default>
-              <chat-text-field
-                v-model:text="draft"
-                @enter="sendMessage"
+          >
+            <template
+              v-for="action in slottedChatActions"
+              :key="action"
+              #[action]="{ size }"
+            >
+              <slot
+                :name="`action:${action}`"
+                v-bind="{ size }"
               />
-              <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>
-          </chat-footer-wrapper>
-        </slot>
-    </section>
+          </chat-input-actions-bar>
+        </template>
+      </chat-footer-wrapper>
+    </slot>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -75,6 +71,7 @@ const props = withDefaults(
 		canLoadNextMessages?: boolean; // 'next'
 		isNextMessagesLoading?: boolean;
 		withoutAvatars?: boolean;
+		readonly?: boolean; // hide chat footer with textarea and action-buttons
 	}>(),
 	{
 		size: ComponentSize.MD,
@@ -84,6 +81,7 @@ const props = withDefaults(
 		],
 		canLoadNextMessages: false,
 		isNextMessagesLoading: false,
+		readonly: false,
 	},
 );
 

package/types/config/config.d.ts

@@ -0,0 +1,6 @@
+import type { I18n } from "vue-i18n";
+export type UiChatsConfig = {
+    i18n?: I18n;
+};
+export declare const defaultConfig: UiChatsConfig;
+export declare const setConfig: (conf: UiChatsConfig) => void;

package/types/index.d.ts

@@ -1 +1 @@
-export {};
+export { setConfig } from "./config/config";

package/types/locale/en/en.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                textAreaPlaceholder: string;
             };
         };
     };

package/types/locale/es/es.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/locale/index.d.ts

@@ -0,0 +1,102 @@
+import en from "./en/en";
+import es from "./es/es";
+import kz from "./kz/kz";
+import pl from "./pl/pl";
+import ro from "./ro/ro";
+import ru from "./ru/ru";
+import uk from "./uk/uk";
+import uz from "./uz/uz";
+import vi from "./vi/vi";
+export declare const messages: {
+    en: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    uk: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    ru: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    es: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    kz: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    pl: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    ro: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    uz: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+    vi: {
+        "@webitel/ui-chats": {
+            ui: {
+                messaging: {
+                    chatsFileBlocked: string;
+                    textAreaPlaceholder: string;
+                };
+            };
+        };
+    };
+};
+export { en, uk, ru, es, kz, pl, ro, uz, vi };

package/types/locale/kz/kz.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/locale/pl/pl.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/locale/ro/ro.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/locale/ru/ru.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/locale/uk/uk.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/locale/uz/uz.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/locale/vi/vi.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "@webitel/ui-chats": {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+                textAreaPlaceholder: string;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -3,10 +3,8 @@ 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,11 +1,10 @@
-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: (messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>) => {
+export declare const useChatMessages: (chatMessages: ChatMessageType[]) => {
     showAvatar: (index: number) => boolean;
     getMessage: (index: number) => GetMessageResult;
     showChatDate: (index: number) => boolean;