tuikit-atomicx-vue3 4.4.0-beta.1 → 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/EmojiPicker/EmojiPicker.vue

@@ -1,6 +1,9 @@
 <template>
-  <div>
-    <PopoverRoot :open="isOpen" @update:open="handleOpenChange">
+  <View>
+    <PopoverRoot
+      :open="isOpen"
+      @update:open="handleOpenChange"
+    >
       <PopoverTrigger
         as="div"
         :disabled="props.disabled"
@@ -45,7 +48,7 @@
         </PopoverContent>
       </PopoverPortal>
     </PopoverRoot>
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
@@ -53,6 +56,7 @@ import { onMounted, defineProps, useCssModule, ref } from 'vue';
 import { useUIKit, IconEmoji } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import { View } from '../../../baseComp/View';
 import { emojiUrlMap, emojiBaseUrl } from '../../../constants/emoji';
 import { useMessageInputState, MessageContentType } from '../../../states/MessageInputState';
 import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';

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

@@ -14,6 +14,7 @@
     align-items: center;
     color: var(--text-color-secondary);
     gap: 2px;
+    margin-left: -6px;
   }
 
   &__wrapper {

package/src/components/MessageInput/MessageInput.vue

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

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

@@ -3,9 +3,10 @@ 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 } from '@tiptap/vue-3';
-import type { EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
+import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
 
 function createEmojiExtension() {
@@ -25,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() {
@@ -111,6 +87,8 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
+  maxLength?: number;
+  isPlaceholderOnlyShowWhenEditable?: boolean;
   onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
   onFocus?: () => void;
@@ -122,18 +100,29 @@ function createEditor({
   placeholder = '',
   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(),
     Placeholder.configure({
       placeholder,
+      showOnlyWhenEditable: isPlaceholderOnlyShowWhenEditable,
     }),
   ];
 

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

@@ -27,22 +27,24 @@ interface TextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<TextEditorProps>(), {
   autoFocus: true,
   disabled: false,
-  placeholder: '',
+  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 placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
+const computedPlaceholder = computed(() => props.placeholder ?? t('MessageInput.enter_a_message'));
 
 let editorInstance: Editor | null = null;
 
@@ -57,9 +59,11 @@ onMounted(() => {
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,
-      placeholder: placeholderText.value,
+      placeholder: computedPlaceholder.value,
+      isPlaceholderOnlyShowWhenEditable: props.placeholder === undefined,
       autoFocus: props.autoFocus,
       disabled: props.disabled,
+      maxLength: props.maxLength,
       onUpdate: (content) => {
         updateRawValue(content);
       },
@@ -94,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/AudioMessage/WaveForm.vue

@@ -1,25 +1,21 @@
 <template>
   <div
     class="wave-form"
-    @click="handleClick"
     :style="waveFormStyle"
+    @click="handleClick"
   >
     <div
       v-for="(height, index) in waveBarHeights"
       :key="index"
       class="wave-form__bar"
-      :class="{ 'wave-form__bar--active': isBarActive(index) }"
+      :class="{ 'wave-form__bar--active': activeStates[index] }"
       :style="{ height: `${height}px` }"
     />
-    <div
-      class="wave-form__cursor"
-      :style="cursorStyle"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { computed } from 'vue';
 
 interface WaveFormProps {
   progress: number | undefined;
@@ -29,7 +25,7 @@ interface WaveFormProps {
 
 const props = withDefaults(defineProps<WaveFormProps>(), {
   barsCount: 30,
-  width: '100%'
+  width: '100%',
 });
 
 const emit = defineEmits<{
@@ -38,32 +34,27 @@ const emit = defineEmits<{
 
 // Calculate wave form container style
 const waveFormStyle = computed(() => ({
-  width: typeof props.width === 'number' ? `${props.width}px` : props.width
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
 }));
 
 // Generate fixed wave bar heights array to avoid height changes on re-render
-const waveBarHeights = ref<number[]>([]);
-
-// Generate random heights on component mount and keep them constant during component lifecycle
-onMounted(() => {
-  const heights = [];
-  for (let i = 0; i < props.barsCount; i++) {
-    // Generate random heights between 8px and 24px
-    heights.push(Math.random() * 16 + 8);
+const waveBarHeights = Array.from({ length: props.barsCount }, () => Math.random() * 16 + 4);
+
+// Compute active states for all bars
+const activeStates = computed(() => {
+  const currentProgress = props.progress || 0;
+
+  if (currentProgress === 0) {
+    return Array(props.barsCount).fill(false);
   }
-  waveBarHeights.value = heights;
-});
 
-// Check if wave bar is active
-const isBarActive = (index: number) => {
-  const barProgress = (index + 1) / props.barsCount;
-  return (props.progress || 0) >= barProgress;
-};
+  const _activeStates = Array.from({ length: props.barsCount }, (_, index) => {
+    const barProgress = index / props.barsCount;
+    return currentProgress >= barProgress;
+  });
 
-// Calculate cursor position style
-const cursorStyle = computed(() => ({
-  left: `${(props.progress || 0) * 100}%`
-}));
+  return _activeStates;
+});
 
 // Handle click event, calculate new progress
 const handleClick = (event: MouseEvent) => {
@@ -71,7 +62,7 @@ const handleClick = (event: MouseEvent) => {
   const rect = waveElement.getBoundingClientRect();
   const offsetX = event.clientX - rect.left;
   const newProgress = offsetX / rect.width;
-  
+
   // Ensure progress value is between 0-1
   const validProgress = Math.max(0, Math.min(1, newProgress));
   emit('seek', validProgress);
@@ -102,13 +93,5 @@ const handleClick = (event: MouseEvent) => {
     }
   }
 
-  &__cursor {
-    position: absolute;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 20%);
-    pointer-events: none;
-  }
 }
 </style>

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 = () => {
@@ -25,7 +27,7 @@ const callAgain = () => {
 
   startCall({
     type: payload.value.data.data.call_type,
-    userIDList: payload.value.data.inviteeList,
+    userIDList: [activeConversation.value.userProfile?.userID],
   });
 };
 </script>