tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/src/components/MessageInput/AudioCallPicker/AudioCallPicker.vue

@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<AudioCallPickerProps>(), {
 const styles = useCssModule();
 const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
-const { allMembers, getGroupMemberList, memberCount } = useGroupSettingState();
+const { allMembers, getGroupMemberList, memberCount, currentUserID } = useGroupSettingState();
 
 const isGroupCallDialogVisible = ref(false);
 const groupMemberPickerRef = ref();
@@ -83,13 +83,15 @@ const isC2CConversation = computed(() =>
   activeConversation.value?.type === ConversationType.C2C,
 );
 
-const groupMemberOptions = computed(() =>
-  allMembers.value?.map((member: any) => ({
+const groupMemberOptions = computed(() => {
+  const restructuredMembers = allMembers.value?.map(member => ({
     key: member.userID,
     label: member.nick || member.userID,
     avatarUrl: member.avatar,
-  })) ?? [],
-);
+  })) ?? [];
+
+  return restructuredMembers.filter(member => member.key !== currentUserID.value);
+});
 
 const canStartCall = computed(() => {
   if (!activeConversation.value || props.disabled) {
@@ -229,7 +231,7 @@ const handleConfirmGroupCall = () => initiateGroupCall();
 
 <style>
 .group-call-dialog {
-  background: white;
+  background: var(--bg-color-operate);
   border-radius: 8px;
   max-width: 500px;
   max-height: 70vh;

package/src/components/MessageInput/MessageInput.vue

@@ -23,6 +23,7 @@
           :autoFocus="autoFocus"
           :disabled="disabled"
           :placeholder="placeholder"
+          :maxLength="maxLength"
         >
           <template #inputPrefix>
             <slot name="inputPrefix" />
@@ -77,6 +78,7 @@ const props = withDefaults(defineProps<MessageInputProps>(), {
   disabled: false,
   hideSendButton: false,
   placeholder: undefined,
+  maxLength: undefined,
   attachmentPickerMode: 'collapsed',
   actions: () => ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'],
 });

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

@@ -3,6 +3,8 @@ 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 { CharacterCount } from './extensions/characterCountExtension';
+import { createImageExtension } from './extensions/imageExtension';
 import type { InputContent } from '../../../states/MessageInputState';
 import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
@@ -24,31 +26,6 @@ function createEmojiExtension() {
   });
 }
 
-function createImageExtension() {
-  return Image.extend({
-    addOptions() {
-      return {
-        ...this.parent?.(),
-        HTMLAttributes: {
-          class: 'message-image',
-        },
-      };
-    },
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        fileData: {
-          default: null,
-          parseHTML: element => element.getAttribute('file-data'),
-          renderHTML: attributes => attributes.fileData ? { 'file-data': attributes.fileData } : {},
-        },
-      };
-    },
-  }).configure({
-    inline: true,
-  });
-}
-
 function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined }) {
   return Extension.create({
     addKeyboardShortcuts() {
@@ -110,6 +87,7 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
+  maxLength?: number;
   isPlaceholderOnlyShowWhenEditable?: boolean;
   onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
@@ -123,13 +101,22 @@ function createEditor({
   autoFocus = false,
   disabled = false,
   isPlaceholderOnlyShowWhenEditable = true,
+  maxLength = undefined,
   onUpdate,
   onEnter,
   onFocus,
   onBlur,
 }: EditorOptions) {
   const createBaseExtensions = (enterHandler?: () => void) => [
-    StarterKit,
+    StarterKit.configure({
+      bold: false,
+      italic: false,
+      strike: false,
+      code: false,
+    }),
+    CharacterCount.configure({
+      limit: maxLength,
+    }),
     createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : undefined),
     createEmojiExtension(),
     createImageExtension(),

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

@@ -27,21 +27,25 @@ interface TextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<TextEditorProps>(), {
   autoFocus: true,
   disabled: false,
   placeholder: undefined,
+  maxLength: undefined,
 });
 
-const { t } = useUIKit();
+const { t, language } = useUIKit();
 const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorDomRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
+const computedPlaceholder = computed(() => props.placeholder ?? t('MessageInput.enter_a_message'));
+
 let editorInstance: Editor | null = null;
 
 onMounted(() => {
@@ -55,10 +59,11 @@ onMounted(() => {
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,
-      placeholder: props.placeholder ?? t('MessageInput.enter_a_message'),
+      placeholder: computedPlaceholder.value,
       isPlaceholderOnlyShowWhenEditable: props.placeholder === undefined,
       autoFocus: props.autoFocus,
       disabled: props.disabled,
+      maxLength: props.maxLength,
       onUpdate: (content) => {
         updateRawValue(content);
       },
@@ -93,6 +98,22 @@ watch(activeConversation, (newConversation, oldConversation) => {
   }
 });
 
+// Watch language change and update placeholder using Tiptap's extensionManager
+watch(language, () => {
+  if (editorInstance && props.placeholder === undefined) {
+    // Update placeholder extension options
+    const placeholderExtension = editorInstance.extensionManager.extensions.find(
+      ext => ext.name === 'placeholder',
+    );
+    if (placeholderExtension) {
+      // eslint-disable-next-line no-param-reassign
+      placeholderExtension.options.placeholder = computedPlaceholder.value;
+      // Force re-render to apply new placeholder
+      editorInstance.view.updateState(editorInstance.state);
+    }
+  }
+});
+
 watch(() => props.disabled, (newDisabled) => {
   if (editorInstance) {
     editorInstance.setEditable(!newDisabled);

package/src/components/MessageInput/TextEditor/extensions/characterCountExtension.ts

@@ -0,0 +1,159 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Extension } from '@tiptap/vue-3';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+interface CharacterCountOptions {
+  limit: number | null | undefined;
+  textCounter: (text: string) => number;
+  wordCounter: (text: string) => number;
+}
+
+interface CharacterCountStorage {
+  characters: (options?: { node?: ProseMirrorNode; mode?: 'textSize' | 'nodeSize' }) => number;
+  words: (options?: { node?: ProseMirrorNode }) => number;
+}
+
+function countGraphemes(text: string): number {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new (Intl as any).Segmenter('en', { granularity: 'grapheme' });
+    return Array.from(segmenter.segment(text)).length;
+  }
+  return [...text].length;
+}
+
+const CharacterCount = Extension.create<CharacterCountOptions, CharacterCountStorage>({
+  name: 'characterCount',
+
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: text => text.length,
+      wordCounter: text => text.split(' ').filter(word => word !== '').length,
+    };
+  },
+
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0,
+    };
+  },
+
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = options?.node || this.editor.state.doc;
+
+      // Count all inline nodes: text nodes (with grapheme counting) + emoji nodes
+      let totalCount = 0;
+
+      node.descendants((childNode) => {
+        if (childNode.isText && childNode.text) {
+          totalCount += countGraphemes(childNode.text);
+        } else if (childNode.type.name === 'emoji') {
+          // Emoji node: count as 1 character
+          totalCount += 1;
+        }
+        // Images and other inline nodes can be added here if needed
+      });
+
+      return totalCount;
+    };
+
+    this.storage.words = (options) => {
+      const node = options?.node || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, ' ', ' ');
+      return this.options.wordCounter(text);
+    };
+  },
+
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+
+    return [
+      new Plugin({
+        key: new PluginKey('characterCount'),
+        appendTransaction: (_transactions, _oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+
+          const { limit } = this.options;
+
+          if (limit === null || limit === undefined || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+
+            const tr = newState.tr.deleteRange(from, to);
+            initialEvaluationDone = true;
+            return tr;
+          }
+
+
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const { limit } = this.options;
+
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === undefined) {
+            return true;
+          }
+
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+          const isPaste = transaction.getMeta('paste');
+
+          // Allow if within limit
+          if (newSize <= limit) {
+            return true;
+          }
+
+          // Allow deletion when already over limit
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+
+          // Reject if already over limit and still adding
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+
+          // Handle paste trimming
+          if (!isPaste) {
+            return false;
+          }
+
+          const { pos } = transaction.selection.$head;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+
+          if (from < 0) {
+            return false;
+          }
+
+          transaction.deleteRange(from, to);
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+
+          if (updatedSize > limit) {
+            return false;
+          }
+
+          return true;
+        },
+      }),
+    ];
+  },
+});
+
+
+export {
+  CharacterCount,
+}

package/src/components/MessageInput/TextEditor/extensions/imageExtension.ts

@@ -0,0 +1,79 @@
+import Image from '@tiptap/extension-image';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+function createImageExtension() {
+  return Image.extend({
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        HTMLAttributes: {
+          class: 'message-image',
+        },
+      };
+    },
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        fileData: {
+          default: null,
+          parseHTML: () => null,
+          renderHTML: () => ({}),
+        },
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          key: new PluginKey('imagePaste'),
+          props: {
+            handlePaste: (view, event) => {
+              const items = Array.from(event.clipboardData?.items || []);
+              const images = items.filter(item => item.type.indexOf('image') === 0);
+
+              if (images.length === 0) {
+                return false; // Let default handler process
+              }
+
+              images.forEach((item) => {
+                const file = item.getAsFile();
+
+                if (file) {
+                  const reader = new FileReader();
+                  reader.onload = (readerEvent) => {
+                    const dataUrl = readerEvent.target?.result as string;
+
+                    const node = view.state.schema.nodes.image.create({
+                      src: dataUrl,
+                      fileData: file,
+                    });
+
+                    const transaction = view.state.tr.replaceSelectionWith(node);
+                    view.dispatch(transaction);
+                  };
+
+                  reader.onerror = (error) => {
+                    console.error('[MessageInput]::Failed to read image file:', error);
+                  };
+
+                  reader.onabort = () => {
+                    console.warn('[MessageInput]::Image file reading was aborted.');
+                  };
+
+                  reader.readAsDataURL(file);
+                }
+              });
+
+              return true; // Prevent default paste behavior
+            },
+          },
+        }),
+      ];
+    },
+  }).configure({
+    inline: true,
+  });
+}
+
+export {
+  createImageExtension,
+};

package/src/components/MessageInput/VideoCallPicker/VideoCallPicker.vue

@@ -76,7 +76,7 @@ const props = withDefaults(defineProps<VideoCallPickerProps>(), {
 const styles = useCssModule();
 const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
-const { allMembers, getGroupMemberList, memberCount } = useGroupSettingState();
+const { allMembers, getGroupMemberList, memberCount, currentUserID } = useGroupSettingState();
 
 const isGroupCallDialogVisible = ref(false);
 const groupMemberPickerRef = ref();
@@ -85,13 +85,15 @@ const isPrivateConversation = computed(() =>
   activeConversation.value?.type === ConversationType.C2C,
 );
 
-const groupMemberOptions = computed(() =>
-  allMembers.value?.map((member: any) => ({
+const groupMemberOptions = computed(() => {
+  const restructuredMembers = allMembers.value?.map(member => ({
     key: member.userID,
     label: member.nick || member.userID,
     avatarUrl: member.avatar,
-  })) ?? [],
-);
+  })) ?? [];
+
+  return restructuredMembers.filter(member => member.key !== currentUserID.value);
+});
 
 const canStartCall = computed(() => {
   if (!activeConversation.value || props.disabled) {
@@ -235,7 +237,7 @@ const handleConfirmGroupCall = () => initiateGroupCall();
 
 <style>
 .group-call-dialog {
-  background: white;
+  background: var(--bg-color-operate);
   border-radius: 8px;
   max-width: 500px;
   max-height: 70vh;

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

@@ -8,6 +8,10 @@ const MessageInput = {
   unknown: '未知',
   enter_a_message: '输入消息',
   send: '发送',
+  select_call_members: '选择成员',
+  cancel: '取消',
+  confirm: '确认',
+  initiate_call: '发起通话',
 };
 
 export default MessageInput;

package/src/components/MessageInput/types.d.ts

@@ -28,6 +28,7 @@ export interface MessageInputProps {
   hideSendButton?: boolean;
   placeholder?: string;
   attachmentPickerMode?: MessageInputAttachmentPickerMode;
+  maxLength?: number;
   actions?: MessageInputActions;
   slots?: MessageInputSlots;
 }

package/src/components/MessageList/Message/CustomMessage/CallMessage/CallMessage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useCssModule } from 'vue';
-import { IconCall1Filled, IconVideoDefaultFilled } from '@tencentcloud/uikit-base-component-vue3';
+import { IconCall1Filled, IconVideoDefaultFilled, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { View } from '../../../../../baseComp/View';
 import { useConversationListState } from '../../../../../states/ConversationListState';
 import { ConversationType } from '../../../../../types/engine';
@@ -12,10 +12,12 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+
+const { t } = useUIKit();
 const classes = useCssModule();
 const { activeConversation } = useConversationListState();
 
-const text = computed(() => parseCallMessageText(props.message));
+const text = computed(() => parseCallMessageText(props.message, t));
 const payload = computed(() => parseCallMessage(props.message));
 
 const callAgain = () => {

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { ConversationType } from '../../../../types/engine';
@@ -28,20 +29,20 @@ const { t } = useUIKit();
 
 const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
-const renderText = () => {
+const renderText = computed(() => {
   if (messageContent.businessID === 'group_create') {
     return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
   }
   if (isCallMessage(props.message) && props.message.conversationType === ConversationType.GROUP) {
-    return parseCallMessageText(props.message);
+    return parseCallMessageText(props.message, t);
   }
   return resolveGroupTipMessage(props.message).text;
-};
+});
 </script>
 
 <template>
   <div :class="cs('group-tip-message')">
-    {{ renderText() }}
+    {{ renderText }}
   </div>
 </template>
 

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

@@ -82,17 +82,17 @@ const MessageComponent = computed(() => MessageComponentsFactory[props.message.t
 
 const isMessageOwner = computed(() => props.message.flow === 'out');
 
-const {
-  layoutClasses,
-  wrapperClasses,
-  avatarClasses,
-  bubbleClasses,
-  metaClasses,
-} = useMessageLayoutClasses({
+const messageLayoutClasses = computed(() => useMessageLayoutClasses({
   isMessageOwner: isMessageOwner.value,
   alignment: props.alignment,
   isAggregated: props.isAggregated,
-});
+}));
+
+const layoutClasses = computed(() => messageLayoutClasses.value.layoutClasses);
+const wrapperClasses = computed(() => messageLayoutClasses.value.wrapperClasses);
+const avatarClasses = computed(() => messageLayoutClasses.value.avatarClasses);
+const bubbleClasses = computed(() => messageLayoutClasses.value.bubbleClasses);
+const metaClasses = computed(() => messageLayoutClasses.value.metaClasses);
 
 function handleReadReceiptOpen() {
   isReadReceiptInfoOpen.value = true;