tuikit-atomicx-vue3 3.3.3 → 3.4.1

package/src/components/MessageInput/AttachmentPicker/ImagePicker.vue

@@ -1,25 +1,19 @@
 <template>
   <View>
-    <template v-if="label">
-      <button
-        :class="[styles['attachment-picker__item'], className]"
-        :style="style"
-        @click="handleButtonClick"
-      >
-        <IconImage
-          :size="iconSize"
-          :class="styles['attachment-picker__item-icon']"
-        />
-        <div>{{ label }}</div>
-      </button>
-    </template>
-    <template v-else>
-      <IconImage
-        :size="iconSize"
-        :class="styles['attachment-picker__item-icon']"
-        @click="handleButtonClick"
-      />
-    </template>
+    <div @click="handleButtonClick">
+      <slot>
+        <div
+          :class="cs(styles['image-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconImage
+            :size="props.iconSize"
+            :class="cs(styles['image-picker__icon'])"
+          />
+        </div>
+      </slot>
+    </div>
     <input
       ref="fileInputRef"
       type="file"
@@ -31,11 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, useCssModule } from 'vue';
 import { IconImage } from '@tencentcloud/uikit-base-component-vue3';
-import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import cs from 'classnames';
 import { View } from '../../../baseComp/View';
-import styles from './AttachmentPicker.module.scss';
+import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
 
 const PICKER_CONSTANTS = {
   ACCEPT_TYPE: '.jpg,.jpeg,.gif,.png,.bmp,.webp',
@@ -44,23 +38,24 @@ const PICKER_CONSTANTS = {
 interface Props {
   label?: string;
   iconSize?: number;
-  onClose?: () => void;
-  className?: string;
-  style?: Record<string, string>;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   label: '',
-  className: '',
-  style: undefined,
-  onClose: () => {},
-  iconSize: 24,
+  disabled: false,
+  iconSize: 20,
 });
 
+const styles = useCssModule();
 const { sendMessage } = useMessageInputState();
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
 function handleButtonClick() {
+  if (props.disabled) {
+    return;
+  }
+
   fileInputRef.value?.click();
 }
 
@@ -73,6 +68,38 @@ function handleFileInput(e: Event) {
 
   sendMessage([{ type: MessageContentType.IMAGE, content: file }]);
   target.value = '';
-  props.onClose?.();
 }
 </script>
+
+<style lang="scss" module>
+.image-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);
+  }
+}
+</style>

package/src/components/MessageInput/AttachmentPicker/VideoPicker.vue

@@ -1,25 +1,19 @@
 <template>
   <View>
-    <template v-if="label">
-      <button
-        :class="[styles['attachment-picker__item'], className]"
-        :style="style"
-        @click="handleButtonClick"
-      >
-        <IconVideo
-          :size="iconSize"
-          :class="styles['attachment-picker__item-icon']"
-        />
-        <div>{{ label }}</div>
-      </button>
-    </template>
-    <template v-else>
-      <IconVideo
-        :size="iconSize"
-        :class="styles['attachment-picker__item-icon']"
-        @click="handleButtonClick"
-      />
-    </template>
+    <div @click="handleButtonClick">
+      <slot>
+        <div
+          :class="cs(styles['video-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconVideo
+            :size="props.iconSize"
+            :class="cs(styles['video-picker__icon'])"
+          />
+        </div>
+      </slot>
+    </div>
     <input
       ref="fileInputRef"
       type="file"
@@ -31,11 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, useCssModule } from 'vue';
 import { IconVideo } from '@tencentcloud/uikit-base-component-vue3';
-import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import cs from 'classnames';
 import { View } from '../../../baseComp/View';
-import styles from './AttachmentPicker.module.scss';
+import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
 
 const PICKER_CONSTANTS = {
   ACCEPT_TYPE: '.mp4,.mov,.qt',
@@ -44,23 +38,24 @@ const PICKER_CONSTANTS = {
 interface Props {
   label?: string;
   iconSize?: number;
-  onClose?: () => void;
-  className?: string;
-  style?: Record<string, string>;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   label: '',
-  className: '',
-  style: undefined,
-  onClose: () => {},
-  iconSize: 24,
+  disabled: false,
+  iconSize: 20,
 });
 
+const styles = useCssModule();
 const { sendMessage } = useMessageInputState();
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
 function handleButtonClick() {
+  if (props.disabled) {
+    return;
+  }
+
   fileInputRef.value?.click();
 }
 
@@ -73,6 +68,38 @@ function handleFileInput(e: Event) {
 
   sendMessage([{ type: MessageContentType.VIDEO, content: file }]);
   target.value = '';
-  props.onClose?.();
 }
 </script>
+
+<style lang="scss" module>
+.video-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);
+  }
+}
+</style>

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

@@ -0,0 +1,240 @@
+<template>
+  <View>
+    <div
+      :class="cs(styles['audio-call-picker__button'], {
+        [styles['disabled']]: props.disabled,
+      })"
+      @click="handleAudioCallClick"
+    >
+      <slot>
+        <IconCall1
+          :size="props.iconSize"
+          :class="styles['audio-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 {
+  IconCall1,
+  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 AudioCallPickerProps {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const AUDIO_CALL_TYPE = 1;
+const MEMBER_PAGE_SIZE = 80;
+const MAX_GROUP_CALL_MEMBERS = 9;
+const MIN_GROUP_CALL_MEMBERS = 1;
+
+const props = withDefaults(defineProps<AudioCallPickerProps>(), {
+  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 isC2CConversation = 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 initiatePrivateCall(): void {
+  const peerUserId = activeConversation.value?.userProfile?.userID;
+  if (!peerUserId) {
+    console.warn('No peer user ID found for private call');
+    return;
+  }
+
+  try {
+    startCall({
+      userIDList: [peerUserId],
+      chatGroupID: undefined,
+      type: AUDIO_CALL_TYPE,
+    });
+  } catch (error) {
+    console.error('Failed to start private audio 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: AUDIO_CALL_TYPE,
+    });
+
+    handleCloseGroupCallDialog();
+  } catch (error) {
+    console.error('Failed to start group audio call:', error);
+  }
+}
+
+function handleAudioCallClick() {
+  if (!canStartCall.value) {
+    console.warn('Cannot start audio call');
+    return;
+  }
+
+  if (isC2CConversation.value) {
+    initiatePrivateCall();
+  } else {
+    showGroupCallDialog();
+  }
+}
+
+const handleLoadMoreGroupMembers = () => {
+  if (activeConversation.value?.type === ConversationType.GROUP) {
+    loadMoreGroupMembers();
+  }
+};
+
+const handleConfirmGroupCall = () => initiateGroupCall();
+</script>
+
+<style lang="scss" module>
+.audio-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/AudioCallPicker/index.ts

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

package/src/components/MessageInput/EmojiPicker/EmojiPicker.vue

@@ -1,12 +1,32 @@
 <template>
   <div>
-    <PopoverRoot>
-      <PopoverTrigger as="span" :style="triggerStyle" :class="[props.disabled && 'disabled']">
-        <IconEmoji :class="styles['emoji-picker__icon']" size="24" />
+    <PopoverRoot :open="isOpen" @update:open="handleOpenChange">
+      <PopoverTrigger
+        as="div"
+        :disabled="props.disabled"
+      >
+        <div
+          data-test="test"
+          :class="cs(
+            styles['emoji-picker__button'],
+            {
+              [styles['disabled']]: props.disabled,
+            }
+          )"
+          v-bind="$attrs"
+        >
+          <slot>
+            <IconEmoji :class="styles['emoji-picker__icon']" :size="props.iconSize" />
+          </slot>
+        </div>
       </PopoverTrigger>
       <PopoverPortal>
-        <PopoverContent side="top" align="start" :side-offset="5">
-          <div class="flex flex-col gap-2.5">
+        <PopoverContent
+          side="top"
+          align="start"
+          :side-offset="5"
+        >
+          <div>
             <div :class="styles['emoji-picker__list']">
               <div
                 v-for="emojiKey in Object.keys(emojiUrlMap)"
@@ -18,7 +38,7 @@
                   :class="styles['emoji-picker__list-item']"
                   :src="emojiBaseUrl + emojiUrlMap[emojiKey]"
                   :alt="t(`Emoji.${emojiKey}`)"
-                />
+                >
               </div>
             </div>
           </div>
@@ -29,29 +49,52 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, defineProps } from 'vue';
+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 { emojiUrlMap, emojiBaseUrl } from '../../../constants/emoji';
-import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';
 import { useMessageInputState, MessageContentType } from '../../../states/MessageInputState';
-import styles from './EmojiPicker.module.scss';
+import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';
 
-const props = defineProps<{
-  triggerStyle?: Record<string, any>;
+defineOptions({
+  name: 'EmojiPicker',
+  inheritAttrs: false,
+});
+
+interface EmojiPickerProps {
+  label?: string;
+  iconSize?: number;
   disabled?: boolean;
-}>();
+}
+
+const props = withDefaults(defineProps<EmojiPickerProps>(), {
+  label: '',
+  iconSize: 20,
+  disabled: false,
+});
+
+const isOpen = ref(false);
+
+const styles = useCssModule();
 const { t } = useUIKit();
 const { insertContent } = useMessageInputState();
 
 // Image preload
 onMounted(() => {
-  Object.values(emojiUrlMap).forEach(url => {
+  Object.values(emojiUrlMap).forEach((url) => {
     const img = new Image();
     img.src = emojiBaseUrl + url;
   });
 });
 
+const handleOpenChange = (open: boolean) => {
+  // only allow to change the state when the component is not disabled
+  if (!props.disabled) {
+    isOpen.value = open;
+  }
+};
+
 function insertEmojiToInput(emojiKey: string) {
   if (emojiKey) {
     insertContent([
@@ -68,10 +111,56 @@ function insertEmojiToInput(emojiKey: string) {
 }
 </script>
 
-<style lang="scss" scoped>
-.disabled {
-  cursor: not-allowed;
-  user-select: none;
-  pointer-events: none;
+<style lang="scss" module>
+.emoji-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);
+  }
+
+  &__list {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 8px;
+    width: 310px;
+    border-radius: 16px;
+    padding: 16px;
+    margin-bottom: 10px;
+    background-color: var(--dropdown-color-default);
+    box-shadow: 0 0 10px 0 var(--shadow-color);
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+  }
 }
 </style>

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

@@ -13,7 +13,7 @@
     flex-direction: row;
     align-items: center;
     color: var(--text-color-secondary);
-    gap: 8px;
+    gap: 2px;
   }
 
   &__wrapper {