tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/src/components/MessageInput/TextEditor/EditorCore.ts

@@ -3,7 +3,7 @@ import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
 import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
-import type { IInputContent } from '../../../states/MessageInputState';
+import type { InputContent } from '../../../states/MessageInputState';
 import type { JSONContent } from '@tiptap/vue-3';
 import type { EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
@@ -67,7 +67,7 @@ function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined
   });
 }
 
-function convertEditorContent(node: JSONContent): IInputContent[] {
+function convertEditorContent(node: JSONContent): InputContent[] {
   if (!node?.content) {
     return [];
   }
@@ -111,7 +111,7 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
-  onUpdate?: (content: IInputContent[]) => void;
+  onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;

package/src/components/MessageInput/TextEditor/TextEditor.module.scss

@@ -22,4 +22,5 @@
 .editor {
   flex: 1;
   display: flex;
+  flex-direction: column;
 }

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -1,11 +1,14 @@
 <template>
   <div :class="[styles['input-wrapper'], props.disabled && styles.disabled]">
     <div :class="styles['input-prefix']">
-      <slot name="prefix"></slot>
+      <slot name="prefix" />
     </div>
-    <div ref="editorRef" :class="styles['editor']"></div>
+    <div
+      ref="editorRef"
+      :class="styles['editor']"
+    />
     <div :class="styles['input-suffix']">
-      <slot name="suffix"></slot>
+      <slot name="suffix" />
     </div>
   </div>
 </template>
@@ -19,26 +22,26 @@ import { createEditor } from './EditorCore';
 import styles from './TextEditor.module.scss';
 import type { Editor } from './EditorCore';
 
-interface ITextEditorProps {
+interface TextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
 }
 
-const props = withDefaults(defineProps<ITextEditorProps>(), {
+const props = withDefaults(defineProps<TextEditorProps>(), {
   autoFocus: true,
   disabled: false,
   placeholder: '',
 });
 
 const { t } = useUIKit();
-const { currentConversationID } = useConversationListState();
+const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
-const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('TUIChat.Enter a message')));
+const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
 
 let editorInstance: Editor | null = null;
 
@@ -48,13 +51,15 @@ onMounted(() => {
     return;
   }
 
+  element.classList.add('message-input');
+
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,
       placeholder: placeholderText.value,
       autoFocus: props.autoFocus,
       disabled: props.disabled,
-      onUpdate: content => {
+      onUpdate: (content) => {
         updateRawValue(content);
       },
       onEnter: () => {
@@ -82,8 +87,8 @@ onUnmounted(() => {
   }
 });
 
-watch(currentConversationID, (newID, oldID) => {
-  if (newID !== oldID) {
+watch(activeConversation, (newConversation, oldConversation) => {
+  if (newConversation?.conversationID !== oldConversation?.conversationID) {
     setContent('');
   }
 });

package/src/components/MessageInput/i18n/en-US.ts

@@ -0,0 +1,13 @@
+const MessageInput = {
+  file: 'File',
+  image: 'Image',
+  video: 'Video',
+  audio: 'Audio',
+  location: 'Location',
+  custom_message: 'Custom Message',
+  unknown: 'Unknown',
+  enter_a_message: 'Enter a message',
+  send: 'Send',
+};
+
+export default MessageInput;

package/src/components/MessageInput/i18n/index.ts

@@ -0,0 +1,7 @@
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+export const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};

package/src/components/MessageInput/i18n/zh-CN.ts

@@ -0,0 +1,13 @@
+const MessageInput = {
+  file: '文件',
+  image: '图片',
+  video: '视频',
+  audio: '音频',
+  location: '位置',
+  custom_message: '自定义消息',
+  unknown: '未知',
+  enter_a_message: '输入消息',
+  send: '发送',
+};
+
+export default MessageInput;

package/src/components/MessageInput/index.ts

@@ -1,14 +1,33 @@
-import { AttachmentPicker, FilePicker, ImagePicker, VideoPicker } from './AttachmentPicker';
-import { EmojiPicker } from './EmojiPicker';
-import { TextEditor } from './TextEditor';
-import MessageInput from './MessageInput.vue';
+import {
+  AttachmentPicker as AttachmentPickerComponent,
+  FilePicker as FilePickerComponent,
+  ImagePicker as ImagePickerComponent,
+  VideoPicker as VideoPickerComponent,
+} from './AttachmentPicker';
+import { EmojiPicker as EmojiPickerComponent } from './EmojiPicker';
+import { TextEditor as TextEditorComponent } from './TextEditor';
+import MessageInputComponent from './MessageInput.vue';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
+
+addI18n('en-US', { translation: { MessageInput: resources['en-US'] } });
+addI18n('zh-CN', { translation: { MessageInput: resources['zh-CN'] } });
+
+const AttachmentPicker = AttachmentPickerComponent;
+const FilePicker = FilePickerComponent;
+const ImagePicker = ImagePickerComponent;
+const VideoPicker = VideoPickerComponent;
+const EmojiPicker = EmojiPickerComponent;
+const TextEditor = TextEditorComponent;
+const MessageInput = MessageInputComponent;
+
 
 export {
-  TextEditor,
-  MessageInput,
-  EmojiPicker,
   AttachmentPicker,
   FilePicker,
   ImagePicker,
   VideoPicker,
+  EmojiPicker,
+  TextEditor,
+  MessageInput,
 };

package/src/components/MessageList/Message/FileMessage/FileMessage.vue

@@ -59,7 +59,7 @@ const handleFileClick = async (event: MouseEvent) => {
       window.URL.revokeObjectURL(blobUrl);
     } catch {
       TUIToast.error({
-        message: t('TUIChat.Download failed'),
+        message: t('MessageList.download_failed'),
       });
     }
   }

package/src/components/MessageList/Message/GroupTipMessage/GroupTipMessage.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
-import { View } from '../../../../baseComp/View';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { resolveGroupTipMessage } from './resolveGroupTipMessage';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IGroupTipMessageProps {
-  message: IMessageModel;
+interface GroupTipMessageProps {
+  message: MessageModel;
 }
 
-interface IGroupTipMessageContent {
+interface GroupTipMessageContent {
   text: string;
   businessID?: string;
   showName?: string;
 }
 
-interface ICustomMessageContent {
+interface CustomMessageContent {
   businessID?: string;
   showName?: string;
   custom?: string;
@@ -24,18 +24,18 @@ enum CustomMessageAsGroupTipEnum {
   GROUP_CREATE = 'group_create',
 }
 
-const props = defineProps<IGroupTipMessageProps>();
+const props = defineProps<GroupTipMessageProps>();
 
 const { t } = useUIKit();
 
-const messageContent = props.message.getMessageContent() as IGroupTipMessageContent & ICustomMessageContent;
+const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
 const renderText = () => {
   switch (messageContent.businessID) {
     case CustomMessageAsGroupTipEnum.GROUP_CREATE:
-      return `${messageContent.showName || ''} ${t('TUIChat.create group')}`;
+      return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
     default:
-      return messageContent.text;
+      return resolveGroupTipMessage(props.message).text;
   }
 };
 </script>

package/src/components/MessageList/Message/GroupTipMessage/resolveGroupTipMessage.ts

@@ -0,0 +1,97 @@
+import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+
+function substringByLength(str: string, len = 12) {
+  return str.length > len ? `${str.slice(0, len)}...` : str;
+}
+
+function handleGroupProfileUpdated(message: MessageModel) {
+  const { t } = i18next;
+  const { nick, payload } = message;
+  const { newGroupProfile, memberList, operatorID } = payload;
+  let text = '';
+
+  const showName: string = nick || operatorID;
+  const key: string = Object.keys(newGroupProfile)[0];
+  switch (key) {
+    case 'muteAllMembers':
+      if (newGroupProfile[key]) {
+        text = `${t('MessageList.administrator')} ${showName} ${t('MessageList.enabled_mute_all_members')}`;
+      } else {
+        text = `${t('MessageList.administrator')} ${showName} ${t('MessageList.disabled_mute_all_members')}`;
+      }
+      break;
+    case 'ownerID':
+      text = `${memberList[0].nick || memberList[0].userID} ${t('MessageList.became_new_group_owner')}`;
+      break;
+    case 'groupName':
+      text = `${showName} ${t('MessageList.changed_group_name_to')} ${newGroupProfile[key]}`;
+      break;
+    case 'notification':
+      text = `${showName} ${t('MessageList.published_new_announcement')}`;
+      break;
+    default:
+      break;
+  }
+  return text;
+}
+
+function resolveGroupTipMessage(message: MessageModel) {
+  const ret: {
+    text: string;
+  } = {
+    text: '',
+  };
+
+  const { t } = i18next;
+
+  let showName: string = message?.nick || message?.payload?.userIDList?.join(',');
+  if (message?.payload?.memberList?.length > 0) {
+    showName = '';
+    message?.payload?.memberList?.map((user: any) => {
+      const _showName = user?.nick || user?.userID;
+      showName += `${substringByLength(_showName)},`;
+      return user;
+    });
+    showName = showName?.slice(0, -1);
+  }
+
+  switch (message.payload.operationType) {
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_JOIN:
+      ret.text = `${showName} ${t('MessageList.joined_group')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_QUIT:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.left_group')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_KICKED_OUT:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.was')} ${t('MessageList.kicked_out_of_group')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_SET_ADMIN:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.became_admin')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.admin_privileges_revoked')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
+      ret.text = handleGroupProfileUpdated(message);
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
+      message.payload.memberList.forEach((member: any) => {
+        if (member.muteTime > 0) {
+          ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.was_muted')}`;
+        } else {
+          ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.was_unmuted')}`;
+        }
+      });
+      break;
+    default:
+      ret.text = `[${t('MessageList.group_tip_message')}]`;
+      break;
+  }
+  return ret;
+}
+
+export {
+  resolveGroupTipMessage,
+};

package/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue

@@ -12,16 +12,16 @@ import {
 import { useMessageActions } from '../../../../../hooks/useMessageActions';
 import classes from './MessageActionDropdown.module.scss';
 import type { MessageAction } from '../../../../../hooks/useMessageActions';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
 interface IMessageActionDropdownProps {
-  message: IMessageModel;
+  message: MessageModel;
   messageActionList?: MessageAction[] | undefined;
 }
 
 const props = withDefaults(defineProps<IMessageActionDropdownProps>(), {
   messageActionList: undefined,
-  message: () => ({}) as IMessageModel,
+  message: () => ({}) as MessageModel,
 });
 
 const { t } = useUIKit();
@@ -74,7 +74,7 @@ const bodyElement = document.body;
             :message="message"
           />
           <template v-else-if="action.visible">
-            <span>{{ t(`TUIChat.${action.label}`, { defaultValue: action.label }) }}</span>
+            <span>{{ t(`MessageList.${action.label}`, { defaultValue: action.label }) }}</span>
             <template v-if="action.icon">
               <span v-if="typeof action.icon === 'string'">{{ action.icon }}</span>
               <component

package/src/components/MessageList/Message/MessageLayout/MessageLayout.vue

@@ -129,6 +129,7 @@ function handleReadReceiptClose() {
         v-if="!isHiddenMessageMeta"
         :class="metaClasses"
         :status="message.status"
+        :flow="message.flow"
         :timestamp="message.time * 1000"
         :need-read-receipt="message.needReadReceipt"
         :read-receipt-info="message.readReceiptInfo"
@@ -196,7 +197,6 @@ $message-avatar-gap: 8px;
     &.message-layout__wrapper--left {
       padding-left: calc(#{$message-avatar-size} + #{$message-avatar-gap});
     }
-    // 右侧聚合时反转 padding
     &.message-layout__wrapper--right {
       padding-right: calc(#{$message-avatar-size} + #{$message-avatar-gap});
     }

package/src/components/MessageList/Message/MessageLayout/MessageMeta/MessageMeta.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { CSSProperties } from 'vue';
+import { computed, useCssModule } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import cs from 'classnames';
 import { View } from '../../../../../baseComp/View';
 import { getTimeStampAuto } from '../../../../../utils/time';
 
@@ -11,6 +9,7 @@ import MessageStatusIcon from './MessageStatusIcon.vue';
 interface MessageMetaProps {
   isGroup: boolean;
   timestamp: number;
+  flow: string;
   needReadReceipt?: boolean;
   readReceiptInfo?: {
     readCount: number;
@@ -18,22 +17,20 @@ interface MessageMetaProps {
     isPeerRead: boolean;
   };
   status?: 'unSend' | 'success' | 'fail' | string;
-  class?: string;
-  style?: CSSProperties;
 }
 
 const props = withDefaults(defineProps<MessageMetaProps>(), {
   timestamp: 0,
+  flow: 'in',
   needReadReceipt: false,
   readReceiptInfo: undefined,
   status: undefined,
-  class: undefined,
-  style: undefined,
 });
 
 const emits = defineEmits(['onReadReceiptTextClick']);
 
 const { t } = useUIKit();
+const classes = useCssModule();
 
 const displayTime = computed(() => getTimeStampAuto(props.timestamp));
 
@@ -41,34 +38,40 @@ const handleGroupUnreadClick = () => {
   emits('onReadReceiptTextClick');
 };
 
-const shouldShowStatusIcon = computed(() => !props.needReadReceipt
-  || props.status === 'unSend'
-  || props.status === 'fail');
+const shouldShowStatusIcon = computed(() => (
+  props.flow === 'out'
+  && (!props.needReadReceipt
+    || props.status === 'unSend'
+    || props.status === 'fail')));
 
 const readReceiptText = computed(() => {
-  if (!props.needReadReceipt || props.status !== 'success' || !props.readReceiptInfo) {
+  if (
+    !props.needReadReceipt
+    || props.status !== 'success'
+    || !props.readReceiptInfo
+    || props.flow === 'in'
+  ) {
     return '';
   }
 
   if (props.isGroup) {
     if (props.readReceiptInfo.unreadCount > 0) {
-      return `${props.readReceiptInfo.unreadCount} ${t('TUIChat.UNREAD')} ·`;
+      return `${props.readReceiptInfo.unreadCount} ${t('MessageList.unread')} ·`;
     }
-    return `${t('TUIChat.ALL_READ')} ·`;
+    return `${t('MessageList.all_read')} ·`;
   }
   if (props.readReceiptInfo.isPeerRead) {
-    return `${t('TUIChat.READ')} ·`;
+    return `${t('MessageList.read')} ·`;
   }
-  return `${t('TUIChat.UNREAD')} ·`;
+  return `${t('MessageList.unread')} ·`;
 });
 </script>
 
 <template>
   <View
-    :class="cs('message-meta', props.class)"
+    :class="classes['message-meta']"
     dir="row"
     align="center"
-    :style="props.style"
   >
     <!-- Show status icon case -->
     <template v-if="shouldShowStatusIcon">
@@ -79,23 +82,23 @@ const readReceiptText = computed(() => {
     </template>
 
     <!-- Show read receipt text case -->
-    <template v-else>
+    <template v-else-if="Boolean(readReceiptText)">
       <span
         v-if="readReceiptText && !props.isGroup"
-        class="message-meta__read-status"
+        :class="classes['message-meta__read-status']"
       >
         {{ readReceiptText }}
       </span>
       <span
         v-else-if="readReceiptText && props.isGroup && props.readReceiptInfo && props.readReceiptInfo.unreadCount > 0"
-        class="message-meta__group-unread"
+        :class="classes['message-meta__group-unread']"
         @click="handleGroupUnreadClick"
       >
         {{ readReceiptText }}
       </span>
       <span
         v-else-if="readReceiptText && props.isGroup"
-        class="message-meta__group-all-read"
+        :class="classes['message-meta__group-all-read']"
       >
         {{ readReceiptText }}
       </span>
@@ -104,14 +107,14 @@ const readReceiptText = computed(() => {
     <!-- Time display -->
     <span
       v-if="displayTime"
-      class="message-meta__time"
+      :class="classes['message-meta__time']"
     >
       {{ displayTime }}
     </span>
   </View>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .message-meta {
   gap: 4px;
   font-size: 12px;

package/src/components/MessageList/Message/RecalledMessage/RecalledMessage.vue

@@ -4,18 +4,18 @@
     :style="props.style"
   >
     <template v-if="isMessageOwner">
-      {{ t('TUIChat.You') }}{{ t('TUIChat.recalled a message') }}
+      {{ t('MessageList.you') }}{{ t('MessageList.recalled_a_message') }}
       <View
         v-if="isTextMessage"
         role="button"
         class="recalled-message__button"
         @click="recallMessageToInput"
       >
-        {{ t('TUIChat.Re-edit') }}
+        {{ t('MessageList.reedit') }}
       </View>
     </template>
     <template v-else>
-      {{ otherDisplayName }} {{ t('TUIChat.recalled a message') }}
+      {{ otherDisplayName }} {{ t('MessageList.recalled_a_message') }}
     </template>
   </View>
 </template>

package/src/components/MessageList/Message/TextMessage/TextMessage.vue

@@ -8,7 +8,7 @@
       @click="handleReferenceClick"
     >
       <template v-if="isOriginMessageHasRecalled">
-        {{ t('TUIChat.origin message has been recalled') }}
+        {{ t('MessageList.origin_message_has_been_recalled') }}
       </template>
       <template v-else>
         <View class="text-message__reference__header">
@@ -47,9 +47,9 @@ import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { View } from '../../../../baseComp/View';
-import { safeJSONParse } from '../../../../utils/json';
 import { useScroll } from '../../../../hooks/useScroll';
 import { useMessageListState } from '../../../../states/MessageListState';
+import { safeJSONParse } from '../../../../utils/json';
 import type { ICloudCustomData } from '../../../../types/message';
 import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
@@ -69,14 +69,7 @@ const {
 
 const messageContent = computed(() => props.message.getMessageContent() as {
   showName: string;
-  text: Array<{
-    name: 'text';
-    text: string;
-  } | {
-    name: 'img';
-    src: string;
-    emojiKey?: string;
-  }>;
+  text: any[];
 });
 
 const referencedInfo = computed(() => {
@@ -100,7 +93,7 @@ const handleReferenceClick = () => {
     const messageModel = TUIStore.getMessageModel(messageID);
     if (isOriginMessageHasRecalled.value || !messageModel || messageModel.isDeleted || messageModel.isRevoked) {
       TUIToast.error({
-        message: t('TUIChat.Message has been deleted or recalled'),
+        message: t('MessageList.origin_message_has_been_recalled'),
       });
       return;
     }

package/src/components/MessageList/MessageForward/MessageForward.vue

@@ -27,7 +27,7 @@ const {
 const userPickerRef = ref<IUserPickerRef<undefined> | null>(null);
 
 // Convert conversation list to UserPicker data format
-const forwardListDataSource = computed((): Array<IUserPickerRow<undefined>> => {
+const forwardListDataSource = computed((): any[] => {
   if (!conversationList.value) {
     return [];
   }
@@ -59,7 +59,7 @@ const forwardListDataSource = computed((): Array<IUserPickerRow<undefined>> => {
 // Track if forward button should be disabled
 const isDisableConfirm = ref(true);
 
-function handleSelectedChange(selectedItems: Array<IUserPickerRow<undefined>>) {
+function handleSelectedChange(selectedItems: any[]) {
   isDisableConfirm.value = selectedItems.length === 0;
   // Update forwardConversationIDList to maintain compatibility with existing logic
   forwardConversationIDList.value = selectedItems.map(item => item.key);
@@ -105,7 +105,7 @@ function closeMessageForward() {
         @click="closeMessageForward"
       />
       <span class="forward-header__title">
-        {{ t('TUIChat.Forward') }}
+        {{ t('MessageList.forward') }}
       </span>
       <div class="forward-header__placeholder" />
     </View>
@@ -118,20 +118,20 @@ function closeMessageForward() {
       :on-selected-change="handleSelectedChange"
       :on-max-count-exceed="() => {
         TUIToast.error({
-          message: t('TUIChat.Max Count Exceed'),
+          message: t('MessageList.max_count_exceed'),
         });
       }"
     />
 
     <View class="forward-footer">
       <TUIButton
-        shape="rect"
+        radius="rect"
         color="blue"
         type="primary"
         :disabled="isDisableConfirm"
         @click="forward"
       >
-        {{ t('TUIChat.Forward') }}
+        {{ t('MessageList.forward') }}
       </TUIButton>
     </View>
   </Modal>
@@ -202,7 +202,7 @@ $animationDuration: 200ms;
   }
 
   &__placeholder {
-    width: $icon-size; // 与关闭按钮同宽，保持视觉平衡
+    width: $icon-size;
     height: $icon-size;
   }
 }