tuikit-atomicx-vue3 3.3.4 → 3.4.1

package/src/components/MessageInput/MessageInput.vue

@@ -19,10 +19,10 @@
       </div>
       <slot name="textEditor">
         <DefaultTextEditor
+          :key="disabled ? 'disabled-editor' : 'enabled-editor'"
           :autoFocus="autoFocus"
           :disabled="disabled"
           :placeholder="placeholder"
-          :key="disabled ? 'disabled-editor' : 'enabled-editor'"
         >
           <template #inputPrefix>
             <slot name="inputPrefix" />
@@ -53,11 +53,13 @@
 import { computed } from 'vue';
 import { useMessageInputState } from '../../states/MessageInputState';
 import { AttachmentPicker, FilePicker, ImagePicker, VideoPicker } from './AttachmentPicker';
+import { AudioCallPicker } from './AudioCallPicker';
 import { EmojiPicker } from './EmojiPicker';
 import styles from './MessageInput.module.scss';
 import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { SendButton } from './SendButton';
 import { TextEditor as DefaultTextEditor } from './TextEditor';
+import { VideoCallPicker } from './VideoCallPicker';
 import type { CustomAction, MessageInputProps } from './types';
 
 const DEFAULT_ACTIONS = [
@@ -66,6 +68,8 @@ const DEFAULT_ACTIONS = [
   { key: 'FilePicker', component: FilePicker },
   { key: 'ImagePicker', component: ImagePicker },
   { key: 'VideoPicker', component: VideoPicker },
+  { key: 'AudioCallPicker', component: AudioCallPicker },
+  { key: 'VideoCallPicker', component: VideoCallPicker },
 ];
 
 const props = withDefaults(defineProps<MessageInputProps>(), {
@@ -91,7 +95,7 @@ const pickProps = <T extends object, K extends keyof T>(
 
 const resolveStringAction = (actionKey: string) => {
   const { component = () => null } = DEFAULT_ACTIONS.find(({ key }) => key === actionKey) ?? {};
-  return { Component: component, props: {} };
+  return { Component: component, props: { disabled: props.disabled } };
 };
 
 const resolveObjectAction = (action: CustomAction) => {

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

@@ -0,0 +1,246 @@
+<template>
+  <View>
+    <div
+      :class="cs(styles['video-call-picker__button'], {
+        [styles['disabled']]: props.disabled,
+      })"
+      @click="handleVideoCallClick"
+    >
+      <slot>
+        <IconVideoDefault
+          :size="props.iconSize"
+          :class="styles['video-call-picker__icon']"
+        />
+      </slot>
+    </div>
+
+    <TUIDialog
+      :visible="isGroupCallDialogVisible"
+      :title="t('MessageInput.select_call_members')"
+      :cancelText="t('MessageInput.cancel')"
+      :cancel="handleCloseGroupCallDialog"
+      :close="handleCloseGroupCallDialog"
+      :confirmText="t('MessageInput.initiate_call')"
+      :confirm="handleConfirmGroupCall"
+      :customClasses="['group-call-dialog']"
+      appendTo="body"
+    >
+      <UserPicker
+        ref="groupMemberPickerRef"
+        display-mode="list"
+        :data-source="groupMemberOptions"
+        :max-count="MAX_GROUP_CALL_MEMBERS"
+        :min-count="MIN_GROUP_CALL_MEMBERS"
+        class="group-member-picker"
+        style="width: 100%;"
+        @reach-end="handleLoadMoreGroupMembers"
+      />
+    </TUIDialog>
+  </View>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useCssModule } from 'vue';
+import {
+  IconVideoDefault,
+  TUIDialog,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../baseComp/View';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { useGroupSettingState } from '../../../states/GroupSettingState';
+import { ConversationType } from '../../../types/engine';
+import { startCall } from '../../../utils/call';
+import {
+  UserPicker,
+} from '../../UserPicker';
+
+interface VideoCallPickerProps {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const VIDEO_CALL_TYPE = 2;
+const MEMBER_PAGE_SIZE = 80;
+const MAX_GROUP_CALL_MEMBERS = 9;
+const MIN_GROUP_CALL_MEMBERS = 1;
+
+const props = withDefaults(defineProps<VideoCallPickerProps>(), {
+  label: '',
+  iconSize: 20,
+  disabled: false,
+});
+
+const styles = useCssModule();
+const { t } = useUIKit();
+const { activeConversation } = useConversationListState();
+const { allMembers, getGroupMemberList, memberCount } = useGroupSettingState();
+
+const isGroupCallDialogVisible = ref(false);
+const groupMemberPickerRef = ref();
+
+const isPrivateConversation = computed(() =>
+  activeConversation.value?.type === ConversationType.C2C,
+);
+
+const groupMemberOptions = computed(() =>
+  allMembers.value?.map((member: any) => ({
+    key: member.userID,
+    label: member.nick || member.userID,
+    avatarUrl: member.avatar,
+  })) ?? [],
+);
+
+const canStartCall = computed(() => {
+  if (!activeConversation.value || props.disabled) {
+    return false;
+  }
+
+  // TODO: add more call permission check logic
+  return true;
+});
+
+function getCurrentPeerUserId(): string | undefined {
+  return activeConversation.value?.userProfile?.userID;
+}
+
+function initiatePrivateCall(): void {
+  const peerUserId = getCurrentPeerUserId();
+  if (!peerUserId) {
+    console.warn('No peer user ID found for private call');
+    return;
+  }
+
+  try {
+    startCall({
+      userIDList: [peerUserId],
+      chatGroupID: '',
+      type: VIDEO_CALL_TYPE,
+    });
+  } catch (error) {
+    console.error('Failed to start private video call:', error);
+  }
+}
+
+function loadMoreGroupMembers(): void {
+  if (activeConversation.value?.type !== ConversationType.GROUP) {
+    return;
+  }
+
+  const currentMemberCount = allMembers.value?.length || 0;
+  const totalMemberCount = memberCount.value || 0;
+
+  if (currentMemberCount < totalMemberCount) {
+    getGroupMemberList({
+      count: MEMBER_PAGE_SIZE,
+      offset: currentMemberCount,
+    });
+  }
+}
+
+function showGroupCallDialog(): void {
+  loadMoreGroupMembers();
+  isGroupCallDialogVisible.value = true;
+}
+
+function handleCloseGroupCallDialog() {
+  isGroupCallDialogVisible.value = false;
+}
+
+function initiateGroupCall(): void {
+  const currentGroupId = activeConversation.value?.groupProfile?.groupID;
+  if (!groupMemberPickerRef.value || !currentGroupId) {
+    console.warn('Missing group information for group call');
+    return;
+  }
+
+  const selectedMembers = groupMemberPickerRef.value.getSelectedItems();
+  if (!Array.isArray(selectedMembers) || selectedMembers.length === 0) {
+    console.warn('No members selected for group call');
+    return;
+  }
+
+  const selectedUserIds = selectedMembers.map((member: any) => member.key);
+
+  try {
+    startCall({
+      userIDList: selectedUserIds,
+      chatGroupID: currentGroupId,
+      type: VIDEO_CALL_TYPE,
+    });
+
+    handleCloseGroupCallDialog();
+  } catch (error) {
+    console.error('Failed to start group video call:', error);
+  }
+}
+
+function handleVideoCallClick() {
+  if (!canStartCall.value) {
+    console.warn('Cannot start video call');
+    return;
+  }
+
+  if (isPrivateConversation.value) {
+    initiatePrivateCall();
+  } else {
+    showGroupCallDialog();
+  }
+}
+
+const handleLoadMoreGroupMembers = () => {
+  if (activeConversation.value?.type === ConversationType.GROUP) {
+    loadMoreGroupMembers();
+  }
+};
+
+const handleConfirmGroupCall = () => initiateGroupCall();
+</script>
+
+<style lang="scss" module>
+.video-call-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    color: var(--text-color-primary);
+    transition: color 0.2s ease;
+  }
+}
+</style>
+
+<style>
+.group-call-dialog {
+  background: white;
+  border-radius: 8px;
+  max-width: 500px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+</style>

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

@@ -0,0 +1,3 @@
+import VideoCallPicker from './VideoCallPicker.vue';
+
+export { VideoCallPicker };

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

@@ -8,6 +8,10 @@ const MessageInput = {
   unknown: 'Unknown',
   enter_a_message: 'Enter a message',
   send: 'Send',
+  select_call_members: 'Select call members',
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  initiate_call: 'Initiate call',
 };
 
 export default MessageInput;

package/src/components/MessageInput/index.ts

@@ -1,11 +1,13 @@
 import {
-  AttachmentPicker as AttachmentPickerComponent,
   FilePicker as FilePickerComponent,
   ImagePicker as ImagePickerComponent,
   VideoPicker as VideoPickerComponent,
+  AttachmentPicker as AttachmentPickerComponent,
 } from './AttachmentPicker';
 import { EmojiPicker as EmojiPickerComponent } from './EmojiPicker';
 import { TextEditor as TextEditorComponent } from './TextEditor';
+import { AudioCallPicker as AudioCallPickerComponent } from './AudioCallPicker';
+import { VideoCallPicker as VideoCallPickerComponent } from './VideoCallPicker';
 import MessageInputComponent from './MessageInput.vue';
 import { addI18n } from '../../i18n';
 import { resources } from './i18n';
@@ -13,13 +15,15 @@ import { resources } from './i18n';
 addI18n('en-US', { translation: { MessageInput: resources['en-US'] } });
 addI18n('zh-CN', { translation: { MessageInput: resources['zh-CN'] } });
 
-const AttachmentPicker = AttachmentPickerComponent;
+const MessageInput = MessageInputComponent;
+const EmojiPicker = EmojiPickerComponent;
 const FilePicker = FilePickerComponent;
 const ImagePicker = ImagePickerComponent;
 const VideoPicker = VideoPickerComponent;
-const EmojiPicker = EmojiPickerComponent;
 const TextEditor = TextEditorComponent;
-const MessageInput = MessageInputComponent;
+const AttachmentPicker = AttachmentPickerComponent;
+const AudioCallPicker = AudioCallPickerComponent;
+const VideoCallPicker = VideoCallPickerComponent;
 
 
 export {
@@ -30,4 +34,6 @@ export {
   EmojiPicker,
   TextEditor,
   MessageInput,
+  AudioCallPicker,
+  VideoCallPicker,
 };

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

@@ -5,7 +5,9 @@ type BuiltInAction =
   | 'ImagePicker'
   | 'FilePicker'
   | 'VideoPicker'
-  | 'AttachmentPicker';
+  | 'AttachmentPicker'
+  | 'AudioCallPicker'
+  | 'VideoCallPicker';
 
 export type CustomAction = {
   key: string;

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue';
+import { IconCall1Filled, IconVideoDefaultFilled } from '@tencentcloud/uikit-base-component-vue3';
+import { View } from '../../../../../baseComp/View';
+import { useConversationListState } from '../../../../../states/ConversationListState';
+import { ConversationType } from '../../../../../types/engine';
+import { parseCallMessage, startCall, parseCallMessageText } from '../../../../../utils/call';
+import type { MessageModel } from '../../../../../types';
+
+interface Props {
+  message: MessageModel;
+}
+
+const props = defineProps<Props>();
+const classes = useCssModule();
+const { activeConversation } = useConversationListState();
+
+const text = computed(() => parseCallMessageText(props.message));
+const payload = computed(() => parseCallMessage(props.message));
+
+const callAgain = () => {
+  if (!activeConversation.value || !payload.value || props.message.conversationType === ConversationType.GROUP) {
+    return;
+  }
+
+  startCall({
+    type: payload.value.data.data.call_type,
+    userIDList: payload.value.data.inviteeList,
+  });
+};
+</script>
+
+<template>
+  <View
+    v-if="props.message.conversationType === ConversationType.C2C"
+    :gap="8"
+    dir="row"
+    :class="classes['call-message-c2c']"
+    @click="callAgain"
+  >
+    <IconCall1Filled v-if="payload?.data.data.call_type === 1" :class="classes['call-message-c2c__icon']" />
+    <IconVideoDefaultFilled v-else :class="classes['call-message-c2c__icon']" />
+    {{ text }}
+  </View>
+  <View v-else :class="classes['call-message-group']">
+    {{ text }}
+  </View>
+</template>
+
+<style lang="scss" module>
+.call-message-c2c {
+  cursor: pointer;
+  align-items: center;
+  font-weight: normal;
+  font-size: 14px;
+
+  &__icon {
+    color: var(--text-color-link);
+  }
+}
+
+.call-message-group {
+  align-items: center;
+  font-weight: normal;
+  font-size: 14px;
+}
+</style>

package/src/components/MessageList/Message/CustomMessage/CallMessage/index.ts

@@ -0,0 +1,3 @@
+import CallMessage from './CallMessage.vue';
+
+export { CallMessage };

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

@@ -1,7 +1,64 @@
 <script lang="ts" setup>
-// TODO
+import { computed, useCssModule } from 'vue';
+import { View } from '../../../../baseComp/View';
+import { isCallMessage as _isCallMessage } from '../../../../utils/call';
+import { CallMessage } from './CallMessage';
+import type { MessageModel } from '../../../../types';
+
+interface Props {
+  message: MessageModel;
+}
+const props = defineProps<Props>();
+
+const classes = useCssModule();
+
+interface CustomMessageData {
+  businessID: string;
+  [key: string]: any;
+}
+interface CustomMessagePayload {
+  data: string;
+  description: string;
+  extension: string;
+}
+
+const isCallMessage = computed(() => _isCallMessage(props.message));
+
+const textLinkData = computed<{ text?: string; link?: string } | null>(() => {
+  try {
+    const payload = props.message.payload as unknown as CustomMessagePayload;
+    const parsed = JSON.parse(payload?.data || '{}') as CustomMessageData;
+    if (parsed?.businessID === 'text_link') {
+      const { text, link } = parsed;
+      return { text, link };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+});
 </script>
 
 <template>
-  <div>undefined custom Message</div>
+  <CallMessage
+    v-if="isCallMessage"
+    :message="props.message"
+    :class="classes['custom-message']"
+  />
+
+  <!-- text_link -->
+  <View v-else-if="textLinkData" :class="classes['custom-message']">
+    <div>{{ textLinkData.text }}</div>
+    <a :href="textLinkData.link">read more &nbsp;>>></a>
+  </View>
+
+  <div v-else :class="classes['custom-message']">
+    [custom message]
+  </div>
 </template>
+
+<style lang="scss" module>
+.custom-message {
+  padding: 8px 16px;
+}
+</style>

package/src/components/MessageList/Message/CustomMessage/index.ts

@@ -1,3 +1,3 @@
 import CustomMessage from './CustomMessage.vue';
 
-export { CustomMessage };
+export { CustomMessage };

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

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
+import { ConversationType } from '../../../../types/engine';
+import { isCallMessage, parseCallMessageText } from '../../../../utils/call';
 import { resolveGroupTipMessage } from './resolveGroupTipMessage';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
 interface GroupTipMessageProps {
   message: MessageModel;
@@ -20,10 +22,6 @@ interface CustomMessageContent {
   custom?: string;
 }
 
-enum CustomMessageAsGroupTipEnum {
-  GROUP_CREATE = 'group_create',
-}
-
 const props = defineProps<GroupTipMessageProps>();
 
 const { t } = useUIKit();
@@ -31,12 +29,13 @@ const { t } = useUIKit();
 const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
 const renderText = () => {
-  switch (messageContent.businessID) {
-    case CustomMessageAsGroupTipEnum.GROUP_CREATE:
-      return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
-    default:
-      return resolveGroupTipMessage(props.message).text;
+  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 resolveGroupTipMessage(props.message).text;
 };
 </script>
 

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

@@ -1,6 +1,6 @@
 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';
+import type { MessageModel } from '../../../../types/engine';
 
 function substringByLength(str: string, len = 12) {
   return str.length > len ? `${str.slice(0, len)}...` : str;

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

@@ -12,7 +12,7 @@ import {
 import { useMessageActions } from '../../../../../hooks/useMessageActions';
 import classes from './MessageActionDropdown.module.scss';
 import type { MessageAction } from '../../../../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../../types/engine';
 
 interface MessageActionDropdownProps {
   message: MessageModel;

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

@@ -5,7 +5,7 @@ import cs from 'classnames';
 import { useMessageListState } from '../../../../../states/MessageListState';
 import { MessageActionDropdown } from '../MessageActionDropdown';
 import type { MessageAction } from '../../../../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../../types/engine';
 
 interface MessageBubbleProps {
   message: MessageModel;

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

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import ChatEngine from '@tencentcloud/chat-uikit-engine';
 import cs from 'classnames';
 import { View } from '../../../../baseComp/View';
+import { MessageType, ConversationType } from '../../../../types/engine';
+import { isCallMessage } from '../../../../utils/call';
 import { Avatar } from '../../../Avatar';
 import { ReadReceiptInfo } from '../../ReadReceiptInfo';
 import { AudioMessage } from '../AudioMessage';
@@ -20,7 +21,7 @@ import { MessageBubble } from './MessageBubble';
 import { MessageMeta } from './MessageMeta';
 import { useMessageLayoutClasses } from './useMessageLayoutClasses';
 import type { MessageAction } from '../../../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
 interface MessageLayoutProps {
   message: MessageModel;
@@ -50,20 +51,34 @@ const props = withDefaults(defineProps<MessageLayoutProps>(), {
 
 const isReadReceiptInfoOpen = ref(false);
 
+const shouldRenderAsGroupTip = computed(() => {
+  if (props.message.type === MessageType.CUSTOM && props.message.getMessageContent().businessID === 'group_create') {
+    return true;
+  }
+  if (
+    props.message.type === MessageType.CUSTOM
+    && isCallMessage(props.message)
+    && props.message.conversationType === ConversationType.GROUP
+  ) {
+    return true;
+  }
+  return false;
+});
+
 const MessageComponentsFactory = {
-  [ChatEngine.TYPES.MSG_TEXT]: TextMessage,
-  [ChatEngine.TYPES.MSG_IMAGE]: ImageMessage,
-  [ChatEngine.TYPES.MSG_AUDIO]: AudioMessage,
-  [ChatEngine.TYPES.MSG_VIDEO]: VideoMessage,
-  [ChatEngine.TYPES.MSG_FILE]: FileMessage,
-  [ChatEngine.TYPES.MSG_FACE]: FaceMessage,
-  [ChatEngine.TYPES.MSG_LOCATION]: LocationMessage,
-  [ChatEngine.TYPES.MSG_MERGER]: MergerMessage,
-  [ChatEngine.TYPES.MSG_CUSTOM]: CustomMessage,
-  [ChatEngine.TYPES.MSG_GRP_TIP]: GroupTipMessage,
+  [MessageType.TEXT]: TextMessage,
+  [MessageType.IMAGE]: ImageMessage,
+  [MessageType.AUDIO]: AudioMessage,
+  [MessageType.VIDEO]: VideoMessage,
+  [MessageType.FILE]: FileMessage,
+  [MessageType.FACE]: FaceMessage,
+  [MessageType.LOCATION]: LocationMessage,
+  [MessageType.MERGER]: MergerMessage,
+  [MessageType.CUSTOM]: CustomMessage,
+  [MessageType.GRP_TIP]: GroupTipMessage,
 };
 
-const MessageComponent = computed(() => MessageComponentsFactory[props.message.type as any]);
+const MessageComponent = computed(() => MessageComponentsFactory[props.message.type]);
 
 const isMessageOwner = computed(() => props.message.flow === 'out');
 
@@ -95,10 +110,7 @@ function handleReadReceiptClose() {
     :message="message"
   />
   <GroupTipMessage
-    v-else-if="
-      message.type === ChatEngine.TYPES.MSG_GRP_TIP
-        || (message.type === ChatEngine.TYPES.MSG_CUSTOM && message.getMessageContent().businessID === 'group_create')
-    "
+    v-else-if="message.type === MessageType.GRP_TIP || shouldRenderAsGroupTip"
     :message="message"
   />
   <View
@@ -133,7 +145,7 @@ function handleReadReceiptClose() {
         :timestamp="message.time * 1000"
         :need-read-receipt="message.needReadReceipt"
         :read-receipt-info="message.readReceiptInfo"
-        :is-group="message.conversationType === ChatEngine.TYPES.CONV_GROUP"
+        :is-group="message.conversationType === ConversationType.GROUP"
         @on-read-receipt-text-click="handleReadReceiptOpen"
       />
     </View>