@webitel/ui-chats 0.0.2

package/README.md

@@ -0,0 +1,3 @@
+# @webitel/ui-chats
+
+Reusable Webitel Frontend Code for Chats UI

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@webitel/ui-chats",
+  "version": "0.0.2",
+  "description": "Reusable Webitel Frontend Code for Chats UI",
+  "workspaces": [
+    "../../",
+    "../api-services"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "make-all": "npm version patch --git-tag-version false && (npm run lint:oxlint || true) && (npm run build:types || true) && npm run utils:publish",
+    "build": "(npm run build:types || true)",
+    "build:types": "vue-tsc -p ./tsconfig.build.json",
+    "lint:oxlint": "npx oxlint . --fix --type-aware",
+    "utils:publish": "npm publish --access public"
+  },
+  "dependencies": {
+    "autolinker": "^4.1.5",
+    "insert-text-at-cursor": "^0.3.0",
+    "mitt": "^3.0.1",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "@webitel/styleguide": "^24.12.61",
+    "@webitel/ui-sdk": "~25.12",
+    "oxlint-tsgolint": "^0.5.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.2",
+    "vue-tsc": "^3.1.3"
+  },
+  "type": "module",
+  "main": "index.ts",
+  "types": "index.d.ts",
+  "files": [
+    "src/*",
+    "types/*",
+    "Readme.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    "./ui": {
+      "types": "./types/ui/index.d.ts",
+      "import": "./src/ui/index.ts"
+    }
+  },
+  "author": "webitel",
+  "license": "ISC",
+  "keywords": [
+    "webitel",
+    "webitel-ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "github.com/webitel/webitel-ui-sdk"
+  },
+  "engines": {
+    "npm": ">=10",
+    "node": ">=v22"
+  }
+}

package/src/assets/icons/bot.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M11.959 2.00018L12.0017 2L12.0445 2.00018L12.1008 2C14.9905 2 17.3597 3.41811 17.5835 5.22036C17.624 5.30176 17.6617 5.38476 17.6967 5.46927C17.8657 5.87713 17.9409 6.34558 17.9744 7.00018L18.0012 7C19.1058 7 20.0012 7.89543 20.0012 9C20.0012 9.45025 19.8524 9.86576 19.6013 10.2C19.8442 10.3825 20.0012 10.6729 20.0012 11V14C20.0012 14.5523 19.5535 15 19.0012 15C18.4489 15 18.0012 14.5523 18.0012 14C18.0012 15.8638 18.0012 16.7956 17.6967 17.5307C17.2908 18.5108 16.5121 19.2895 15.532 19.6955C14.7969 20 13.8651 20 12.0017 20C10.1383 20 9.20648 20 8.47146 19.6955C7.49135 19.2895 6.71266 18.5108 6.30668 17.5307C6.0022 16.7956 6.0022 15.8638 6.0022 14C6.0022 14.5523 5.55448 15 5.0022 15C4.44991 15 4.0022 14.5523 4.0022 14V11C4.0022 10.6729 4.15925 10.3825 4.40207 10.2C4.15098 9.86576 4.0022 9.45025 4.0022 9C4.0022 7.89543 4.89763 7 6.0022 7L6.02906 7.00018C6.06253 6.34558 6.13774 5.87713 6.30668 5.46927C6.34168 5.38476 6.37945 5.30176 6.41989 5.22036C6.64377 3.41811 9.01294 2 11.9026 2L11.959 2.00018ZM12.0017 18C12.9607 18 13.5798 17.9989 14.0537 17.9666C14.5097 17.9355 14.6834 17.8822 14.7666 17.8478C15.2566 17.6448 15.646 17.2554 15.849 16.7654C15.8835 16.6821 15.9367 16.5085 15.9678 16.0525C16.0001 15.5785 16.0012 14.9592 16.0012 14V10C16.0012 10 15.0013 9.00011 12.0017 9C9.00209 9.00011 8.0022 10 8.0022 10V14C8.0022 14.9592 8.00328 15.5785 8.03562 16.0525C8.06673 16.5085 8.11996 16.6821 8.15444 16.7654C8.35743 17.2554 8.74677 17.6448 9.23683 17.8478C9.32006 17.8822 9.49372 17.9355 9.94972 17.9666C10.4236 17.9989 11.0427 18 12.0017 18ZM15.6008 5.5H15.6083V6.5C15.6083 7.05228 15.1606 7.5 14.6083 7.5H9.40112C8.84884 7.5 8.40112 7.05228 8.40112 6.5V5.5H8.40259C8.40259 5.45447 8.43533 5.12731 9.08725 4.71245C9.71545 4.31269 10.7054 4 11.9026 4C11.9358 4 11.9688 4.00024 12.0017 4.00072C12.0346 4.00024 12.0676 4 12.1008 4C13.298 4 14.288 4.31269 14.9162 4.71245C15.5681 5.12731 15.6008 5.45447 15.6008 5.5Z"/>
+    <path d="M9.0022 21C9.0022 20.4477 9.44991 20 10.0022 20H10.006C10.5566 20 11.0022 20 11.0022 21C11.0022 21.5523 10.5545 22 10.0022 22C9.5022 22 9.2522 22 9.1272 21.875C9.0022 21.75 9.0022 21.5 9.0022 21Z"/>
+    <path d="M14.0012 20C14.5535 20 15.0012 20.4477 15.0012 21C15.0012 21.5 15.0012 21.75 14.8762 21.875C14.7512 22 14.5012 22 14.0012 22C13.4489 22 13.0012 21.5523 13.0012 21C13.0012 20 13.4469 20 13.9974 20H14.0012Z"/>
+</svg>

package/src/locale/en/en.ts

@@ -0,0 +1,9 @@
+export default {
+  '@webitel/ui-chats': {
+    ui: {
+      messaging: {
+        chatsFileBlocked: 'TODO',
+      },
+    },
+  },
+};

package/src/ui/chat-container.vue

@@ -0,0 +1,102 @@
+<template>
+  <section class="chat-container">
+    <!-- <slot name="header">
+            header goes here
+        </slot> -->
+        <slot name="main">
+            <chat-messages-container :messages="messages" />
+        </slot>
+        <slot name="footer">
+          <chat-footer-wrapper>
+            <template #default>
+              <chat-text-field
+                  v-model:text="draft"
+              />
+              <chat-input-actions-bar
+                :actions="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>
+</template>
+
+<script setup lang="ts">
+import { provide, ref, computed } from 'vue';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import ChatMessagesContainer from './messaging/components/chat-messages-container.vue';
+
+import { ResultCallbacks } from './utils/ResultCallbacks.types';
+import ChatFooterWrapper from './chat-footer/components/chat-footer-wrapper.vue';
+import ChatTextField from './chat-footer/modules/user-input/components/chat-text-field.vue';
+import ChatInputActionsBar from './chat-footer/modules/user-input/components/chat-input-actions-bar.vue';
+import { createUiChatsEmitter } from './utils/emitter';
+import { ChatMessageType } from './messaging/types/ChatMessage.types';
+import { ChatAction, SharedActionSlots } from './chat-footer/modules/user-input/types/ChatAction.types';
+
+const props = withDefaults(defineProps<{
+  messages: ChatMessageType[];
+  chatActions?: ChatAction[];
+  size?: ComponentSize;
+}>(), {
+  size: ComponentSize.MD,
+  chatActions: () => [ChatAction.SendMessage],
+});
+
+const emit = defineEmits<{
+  (e: `action:${typeof ChatAction.SendMessage}`, text: string, options: ResultCallbacks): void;
+  (e: `action:${typeof ChatAction.AttachFiles}`, files: File[], options: ResultCallbacks): void;
+}>();
+
+const slots = defineSlots<{
+  main: () => any;
+  footer: () => any;
+} & SharedActionSlots>();
+
+const uiChatsEmitter = createUiChatsEmitter();
+
+provide('size', props.size);
+provide('uiChatsEmitter', uiChatsEmitter);
+
+const draft = ref<string>('');
+
+const slottedChatActions = computed(() => {
+  return Object.keys(slots)
+  .filter((key) => key.startsWith('action:'))
+  .map((key) => key.replace('action:', ''));
+});
+
+function sendMessage() {
+  emit(`action:${ChatAction.SendMessage}`, 
+    draft.value, 
+    {
+    onSuccess: () => draft.value = '',
+  });
+}
+
+function sendFile(files: File[]) {
+  emit(`action:${ChatAction.AttachFiles}`, files, {
+  });
+}
+
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <section class="chat-footer-wrapper">
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+
+const slots = defineSlots<{
+  default: () => any;
+}>();
+
+</script>
+
+<style scoped>
+.chat-footer-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+}
+</style>

package/src/ui/chat-footer/modules/user-input/components/actions/attach-files-action.vue

@@ -0,0 +1,40 @@
+<template>
+  <wt-rounded-action
+    icon="attach"
+    color="secondary"
+    :size="size"
+    rounded
+    wide
+    @click="attachFilesInputRef!.click()"
+  />
+  <input
+    ref="attachFilesInput"
+    style="display: none;"
+    type="file"
+    multiple
+    @change="handleAttachmentInputChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { inject, useTemplateRef } from 'vue';
+import { WtRoundedAction } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { ChatAction } from '../../types/ChatAction.types';
+
+const size = inject<ComponentSize>('size');
+
+const emit = defineEmits<{
+  (e: typeof ChatAction.AttachFiles, files: File[]): void;
+}>();
+
+const attachFilesInputRef = useTemplateRef('attachFilesInput');
+
+const handleAttachmentInputChange = (event: Event) => {
+  const files = (event.target as HTMLInputElement).files;
+  if (!files) return;
+  emit(ChatAction.AttachFiles, Array.from(files) as File[]);
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,19 @@
+<template>
+  <wt-chat-emoji
+    :size="size"
+    @insert-emoji="uiChatsEmitter!.emit('insertAtCursor', { text: $event })"
+  />
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { WtChatEmoji } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import type { Emitter } from 'mitt';
+
+import type{ UiChatsEmitterEvents } from '../../../../../utils/emitter';
+
+const size = inject<ComponentSize>('size');
+const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>('uiChatsEmitter');
+
+</script>

package/src/ui/chat-footer/modules/user-input/components/actions/send-message-action.vue

@@ -0,0 +1,23 @@
+<template>
+  <wt-rounded-action
+    icon="chat-send"
+    color="accent"
+    :size="size"
+    rounded
+    wide
+    @click="emit(ChatAction.SendMessage)"
+  />
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { ChatAction } from '../../types/ChatAction.types';
+
+const size = inject<ComponentSize>('size');
+
+const emit = defineEmits<{
+  (e: typeof ChatAction.SendMessage): void;
+}>();
+
+</script>

package/src/ui/chat-footer/modules/user-input/components/chat-input-actions-bar.vue

@@ -0,0 +1,77 @@
+<template>
+  <section class="chat-input-actions-bar">
+    <slot
+      v-for="{ action, component: actionComponent } in ShownActionComponentsList"
+      :key="action"
+      :name="action"
+      v-bind="{ size }"
+    >
+      <component
+       :is="actionComponent"
+       :size="size"
+       @sendMessage="emit(ChatAction.SendMessage)"
+       @attachFiles="emit(ChatAction.AttachFiles, $event)"
+      />
+    </slot>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+
+import { ChatAction } from '../types/ChatAction.types'; 
+import SendMessageAction from './actions/send-message-action.vue';
+import AttachFilesAction from './actions/attach-files-action.vue';
+import EmojiPickerAction from './actions/emoji-picker-action.vue';
+import { SharedActionSlots } from '../types/ChatAction.types';
+
+const size = inject<ComponentSize>('size');
+
+const props = defineProps<{
+  actions: ChatAction[];
+}>();
+
+const emit = defineEmits<{
+  (e: typeof ChatAction.SendMessage): void;
+  (e: typeof ChatAction.AttachFiles, files: File[]): void;
+}>();
+
+const slots = defineSlots<SharedActionSlots>();
+
+const ShownActionComponentsList = computed(() => {
+  /**
+   * note! actions order is declared here and cannot be changed from outside
+   */
+  return [
+    {
+      action: ChatAction.AttachFiles,
+      component: AttachFilesAction,
+    },
+    {
+      action: ChatAction.EmojiPicker,
+      component: EmojiPickerAction,
+    },
+    {
+      action: ChatAction.QuickReplies,
+      component: null, // has no component inside lib, should be provided by pkg-client application
+    },
+    {
+      action: ChatAction.SendMessage,
+      component: SendMessageAction,
+    },
+  ].filter(({ action }) => props.actions.includes(action));
+});
+
+</script>
+
+<style scoped>
+.chat-input-actions-bar {
+  display: flex;
+  gap: var(--spacing-2xs);
+
+  > * {
+    flex: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+    <wt-textarea
+        v-model="textModel"
+        ref="chatTextFieldInput"
+        :size="size"
+        autoresize
+    />
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useTemplateRef, MaybeRef } from 'vue';
+import { WtTextarea } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import type { Emitter } from 'mitt';
+
+import type { UiChatsEmitterEvents } from '../../../../utils/emitter';
+
+const textModel = defineModel<MaybeRef<string>>('text', { required: true });
+
+const size = inject<ComponentSize>('size');
+const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>('uiChatsEmitter');
+
+uiChatsEmitter!.on('insertAtCursor', ({ text }) => insertAtCursor(text));
+uiChatsEmitter!.on('focusOnTextField', focus);
+
+const chatTextFieldInputRef = useTemplateRef<typeof WtTextarea>('chatTextFieldInput');
+
+const textareaEl = computed(() => chatTextFieldInputRef.value?.$el.querySelector('textarea'));
+
+function focus() {
+  textareaEl.value!.focus();
+};
+
+function insertAtCursor(text: string) {
+  focus();
+  insertTextAtCursor(textareaEl.value!, text);
+}
+</script>

package/src/ui/chat-footer/modules/user-input/types/ChatAction.types.ts

@@ -0,0 +1,12 @@
+export const ChatAction = {
+  SendMessage: 'sendMessage',
+  AttachFiles: 'attachFiles',
+  EmojiPicker: 'emojiPicker',
+  QuickReplies: 'quickReplies',
+} as const;
+
+export type ChatAction = (typeof ChatAction)[keyof typeof ChatAction];
+
+export type SharedActionSlots = {
+  [key in `action:${ChatAction}`]?: () => any;
+};

package/src/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as ChatContainerComponent } from './chat-container.vue';
+export { ChatAction } from './chat-footer/modules/user-input/types/ChatAction.types';

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

@@ -0,0 +1,19 @@
+<template>
+    <section class="chat-messages-container">
+        <!-- <chat-message-component
+            v-for="message in messages"
+            :key="message.id"
+            :message="message"
+        /> -->
+    </section>
+</template>
+
+<script setup lang="ts">
+import { ChatMessageType } from '../types/ChatMessage.types';
+// import ChatMessageComponent from '../modules/message/components/chat-message.vue';
+
+
+const props = defineProps<{
+    messages: ChatMessageType[];
+}>();
+</script>

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

@@ -0,0 +1,155 @@
+<template>
+  <div
+    :class="{
+       'chat-message--right' : isSelfSide,
+       'chat-message--md': size === ComponentSize.MD
+      }"
+    class="chat-message"
+  >
+    <slot name="before-message" />
+
+    <div class="chat-message__content">
+      <div class="chat-message__avatar-wrapper">
+        <message-avatar
+          v-if="props.showAvatar"
+          :bot="isBot"
+          :username="getClientUsername"
+        />
+      </div>
+      <!--    click.stop prevents focus on textarea and allows to select the message-new text -->
+      <message-blocked-error v-if="message.file?.malware" @click.stop />
+      <div v-else @click.stop>
+        <message-player
+          v-if="media"
+          :file="media"
+          :type="media.mime"
+          :size="size"
+          @initialized="handlePlayerInitialize"
+        />
+        <message-image
+          v-else-if="image"
+          :file="image"
+          @open="emit('open-image')"
+        />
+        <message-document
+          v-else-if="document"
+          :file="document"
+        />
+        <message-text
+          v-if="props.message?.text"
+          :text="props.message.text"
+        />
+      </div>
+      <message-time
+        :date="props.message.createdAt"
+      />
+    </div>
+
+    <slot name="after-message" />
+  </div>
+</template>
+
+  <script setup lang="ts">
+
+  import { ComponentSize } from '@webitel/ui-sdk/enums';
+  import {computed, defineEmits, defineProps, inject} from 'vue';
+
+  import { useChatMessageFile } from '../composables/useChatMessageFile'
+  import MessageAvatar from './details/chat-message-avatar.vue';
+  import MessageBlockedError from './details/chat-message-blocked-error.vue';
+  import MessageDocument from './details/chat-message-document.vue';
+  import MessageImage from './details/chat-message-image.vue';
+  import MessagePlayer from './details/chat-message-player.vue';
+  import MessageText from './details/chat-message-text.vue';
+  import MessageTime from './details/chat-message-time.vue';
+
+  const props = withDefaults(defineProps<{
+    message: object,
+    showAvatar?: boolean,
+    username?: string,
+  }>(), {
+    showAvatar: false,
+    username: '',
+  });
+
+  const emit = defineEmits<{
+    'open-image': [],
+    'initialized-player': [object]
+  }>();
+
+  const size = inject<ComponentSize>('size');
+
+  const {
+    image,
+    media,
+    document,
+  } = useChatMessageFile(props.message.file);
+
+  const isSelfMessage = computed(() =>
+    props.message.member?.self
+    || props.message.member?.type === 'webitel'
+  );
+
+  const isBot = computed(() =>
+    props.message.member?.type === 'bot'
+    || (!props.message.member?.type && !props.message.channelId)
+  );
+
+  const isSelfSide = computed(() => isSelfMessage.value || isBot.value);
+
+  const getClientUsername = computed(() => {
+    return !isSelfSide.value ? props.username : ''; // need to show username avatar only for client
+  });
+
+  function handlePlayerInitialize(player) {
+    emit('initialized-player', { player });
+  };
+
+  </script>
+
+<style scoped>
+
+.chat-message {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  gap: var(--spacing-2xs);
+}
+
+.chat-message:last-child {
+  margin-bottom: var(--spacing-xs);
+}
+
+.chat-message__content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  /** prevents height difference from its content */
+  line-height: 0;
+  gap: var(--spacing-xs);
+  margin: 0 var(--spacing-md) 0 var(--spacing-2xs);
+}
+
+.chat-message__avatar-wrapper {
+  flex: 0 0 var(--spacing-lg);
+  width: var(--wt-avatar-size--size-sm);
+}
+
+.chat-message-avatar {
+  width: 100%;
+  flex: 0 0 var(--icon-lg-size);
+}
+
+.chat-message--right .chat-message__content {
+  flex-direction: row-reverse;
+  margin: 0 var(--spacing-2xs) 0 var(--spacing-md);
+}
+
+.chat-message--right .chat-message-text {
+  background: var(--secondary-light-color);
+  color: var(--secondary-on-color);
+  place-self: flex-end;
+}
+
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="chat-message-avatar"
+  >
+    <wt-avatar
+      :username="props.username"
+      :size="size"
+      :src="src"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtAvatar } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { computed, defineProps, inject } from 'vue';
+
+import botIcon from '../../../../../../assets/icons/bot.svg'
+
+const props = withDefaults(defineProps<{
+  bot?: boolean,
+  username?: string,
+}>(), {
+  bot: false,
+  username: '',
+});
+
+const injectedSize = inject<ComponentSize>('size');
+
+const size = computed(() => {
+  return ComponentSize.SM || injectedSize; // todo: should injected size be considered?
+});
+
+const src = computed(() =>
+  props.bot && botIcon
+)
+
+</script>
+
+<style lang="scss" scoped>
+.chat-message-avatar {
+  pointer-events: none; // prevents dragging to upload file area
+}
+</style>