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

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

@@ -1,29 +1,26 @@
 <template>
-  <div :class="[styles['attachment-picker'], className]">
+  <div :class="[styles['attachment-picker']]">
     <template v-if="isCollapsed">
       <PopoverRoot>
         <PopoverTrigger as="span">
           <IconPlus
             :class="styles['attachment-picker__icon']"
-            size="24"
+            size="20"
           />
         </PopoverTrigger>
         <PopoverPortal>
           <PopoverContent
-            side="top"
-            align="start"
-            :side-offset="5"
-            class="rounded-lg p-5 w-[260px] bg-white shadow-sm border will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+          side="top"
+          align="start"
+          :side-offset="5"
           >
-            <div class="flex flex-col gap-2.5">
-              <div :class="styles['attachment-picker__popup']">
-                <component
-                  :is="picker.Component"
-                  v-for="(picker, index) in pickerItems"
-                  :key="index"
-                  v-bind="picker.props"
-                />
-              </div>
+            <div :class="styles['attachment-picker__popup']">
+              <component
+                :is="picker.Component"
+                v-for="(picker, index) in pickerItems"
+                :key="index"
+                v-bind="picker.props"
+              />
             </div>
           </PopoverContent>
         </PopoverPortal>
@@ -52,7 +49,6 @@ import ImagePicker from './ImagePicker.vue';
 import VideoPicker from './VideoPicker.vue';
 
 interface Props {
-  className?: string;
   attachmentPickerMode?: 'collapsed' | 'expanded';
 }
 
@@ -62,7 +58,6 @@ const ICON_SIZE = {
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  className: '',
   attachmentPickerMode: 'collapsed',
 });
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconFile } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconImage } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <View>
     <template v-if="label">
       <button
         :class="[styles['attachment-picker__item'], className]"
@@ -27,13 +27,14 @@
       hidden
       @change="handleFileInput"
     >
-  </div>
+  </View>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconVideo } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import { View } from '../../../baseComp/View';
 import styles from './AttachmentPicker.module.scss';
 
 const PICKER_CONSTANTS = {

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

@@ -2,6 +2,7 @@
 
   &__icon {
     cursor: pointer;
+    display: flex;
   }
 
   &__list {

package/src/components/MessageInput/MessageInput.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="[styles['message-input'], className]"
-    :style="style"
+    :class="[styles['message-input']]"
   >
     <slot name="headerToolbar">
       <div :class="styles['message-input__toolbar']">
@@ -18,13 +17,21 @@
       <div :class="styles['message-input__leftInline']">
         <slot name="leftInline" />
       </div>
-      <TextEditor
-        :autoFocus="autoFocus"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :prefix="slots?.inputPrefix"
-        :suffix="slots?.inputSuffix"
-      />
+      <slot name="textEditor">
+        <DefaultTextEditor
+          :autoFocus="autoFocus"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :key="disabled ? 'disabled-editor' : 'enabled-editor'"
+        >
+          <template #inputPrefix>
+            <slot name="inputPrefix" />
+          </template>
+          <template #inputSuffix>
+            <slot name="inputSuffix" />
+          </template>
+        </DefaultTextEditor>
+      </slot>
       <div :class="styles['message-input__rightInline']">
         <slot name="rightInline" />
       </div>
@@ -34,7 +41,7 @@
         <SendButton
           v-if="!hideSendButton"
           :class="styles['message-input__send-button']"
-          :disabled="!inputRawValue"
+          :disabled="props.disabled"
           @click="sendInputMessage"
         />
       </div>
@@ -50,8 +57,8 @@ import { EmojiPicker } from './EmojiPicker';
 import styles from './MessageInput.module.scss';
 import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { SendButton } from './SendButton';
-import { TextEditor } from './TextEditor';
-import type { CustomAction, IMessageInputProps } from './types';
+import { TextEditor as DefaultTextEditor } from './TextEditor';
+import type { CustomAction, MessageInputProps } from './types';
 
 const DEFAULT_ACTIONS = [
   { key: 'EmojiPicker', component: EmojiPicker },
@@ -61,16 +68,15 @@ const DEFAULT_ACTIONS = [
   { key: 'VideoPicker', component: VideoPicker },
 ];
 
-const props = withDefaults(defineProps<IMessageInputProps>(), {
+const props = withDefaults(defineProps<MessageInputProps>(), {
   autoFocus: true,
   disabled: false,
   hideSendButton: false,
   placeholder: '',
-  className: '',
-  style: () => ({}),
   attachmentPickerMode: 'collapsed',
   actions: () => ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'],
 });
+
 const { inputRawValue, setContent, sendMessage } = useMessageInputState();
 
 const pickProps = <T extends object, K extends keyof T>(

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

@@ -12,6 +12,7 @@
   overflow-y: auto;
   border: none !important;
   outline: none !important;
+  justify-content: flex-start;
 
   @include scrollbar.scrollbar-base();
 

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

@@ -1,14 +1,15 @@
 <template>
   <div :class="[styles['input-wrapper'], props.disabled && styles.disabled]">
     <div :class="styles['input-prefix']">
-      <slot name="prefix" />
+      <slot name="inputPrefix" />
     </div>
     <div
-      ref="editorRef"
+      ref="editorDomRef"
+      :key="props.disabled ? 'disabled' : 'enabled'"
       :class="styles['editor']"
     />
     <div :class="styles['input-suffix']">
-      <slot name="suffix" />
+      <slot name="inputSuffix" />
     </div>
   </div>
 </template>
@@ -38,7 +39,7 @@ const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
-const editorRef = ref<HTMLDivElement | null>(null);
+const editorDomRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
 const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
@@ -46,7 +47,7 @@ const placeholderText = computed(() => (props.disabled ? '' : props.placeholder
 let editorInstance: Editor | null = null;
 
 onMounted(() => {
-  const element = editorRef.value;
+  const element = editorDomRef.value;
   if (!element) {
     return;
   }
@@ -79,7 +80,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  const element = editorRef.value;
+  const element = editorDomRef.value;
   if (editorInstance && element) {
     editorInstance.destroy();
     element.removeAttribute('data-editor-created');
@@ -92,4 +93,13 @@ watch(activeConversation, (newConversation, oldConversation) => {
     setContent('');
   }
 });
+
+watch(() => props.disabled, (newDisabled) => {
+  if (editorInstance) {
+    editorInstance.setEditable(!newDisabled);
+    if (newDisabled) {
+      setContent('');
+    }
+  }
+});
 </script>

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

@@ -20,13 +20,11 @@ export type MessageInputActions = Array<BuiltInAction | CustomAction>;
 
 export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
 
-export interface IMessageInputProps {
+export interface MessageInputProps {
   autoFocus?: boolean;
   disabled?: boolean;
   hideSendButton?: boolean;
   placeholder?: string;
-  className?: string;
-  style?: CSSProperties;
   attachmentPickerMode?: MessageInputAttachmentPickerMode;
   actions?: MessageInputActions;
   slots?: MessageInputSlots;
@@ -39,4 +37,5 @@ export interface MessageInputSlots {
   rightInline?: () => VNode[];
   inputPrefix?: () => VNode[];
   inputSuffix?: () => VNode[];
-}
+  textEditor?: () => VNode[];
+}

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

@@ -3,5 +3,5 @@
 </script>
 
 <template>
-  [Custom Message]
+  <div>undefined custom Message</div>
 </template>

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

@@ -9,13 +9,13 @@
 
 <script lang="ts" setup>
 import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
-interface IFaceMessageProps {
-  message: IMessageModel;
+interface FaceMessageProps {
+  message: MessageModel;
 }
 
-interface IFaceMessageContent {
+interface FaceMessageContent {
   /** sender show name */
   showName: string;
   /** face image name [yz00@2x] */
@@ -26,11 +26,14 @@ interface IFaceMessageContent {
   url: string;
 }
 
-const props = withDefaults(defineProps<IFaceMessageProps>(), {
-  message: () => ({} as IMessageModel),
+const props = withDefaults(defineProps<FaceMessageProps>(), {
+  message: () => ({} as MessageModel),
 });
 
-const messageContent = props.message.getMessageContent() as IFaceMessageContent;
+const messageContent = {
+  url: 'https://web.sdk.qcloud.com/im/assets/face-elem/yz13@2x.png',
+  name: 'yz13@2x',
+};
 </script>
 
 <style lang="scss" scoped>

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

@@ -2,5 +2,7 @@
 </script>
 
 <template>
-  [Location Message]
+  <div>
+    [undefined location Message]
+  </div>
 </template>

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

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  [Merger Message]
+  <div>undefined merger Message</div>
 </template>

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

@@ -14,12 +14,12 @@ import classes from './MessageActionDropdown.module.scss';
 import type { MessageAction } from '../../../../../hooks/useMessageActions';
 import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IMessageActionDropdownProps {
+interface MessageActionDropdownProps {
   message: MessageModel;
   messageActionList?: MessageAction[] | undefined;
 }
 
-const props = withDefaults(defineProps<IMessageActionDropdownProps>(), {
+const props = withDefaults(defineProps<MessageActionDropdownProps>(), {
   messageActionList: undefined,
   message: () => ({}) as MessageModel,
 });

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

@@ -8,7 +8,7 @@ import { View } from '../../../baseComp/View';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageActionState } from '../../../states/MessageActionState';
 import { UserPicker } from '../../UserPicker';
-import type { IUserPickerRef, IUserPickerRow } from '../../UserPicker/type';
+import type { UserPickerRef, UserPickerRow } from '../../UserPicker/type';
 import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
 
 const { t } = useUIKit();
@@ -24,7 +24,7 @@ const {
 } = useConversationListState();
 
 // UserPicker ref
-const userPickerRef = ref<IUserPickerRef<undefined> | null>(null);
+const userPickerRef = ref<UserPickerRef<undefined> | null>(null);
 
 // Convert conversation list to UserPicker data format
 const forwardListDataSource = computed((): any[] => {
@@ -34,7 +34,7 @@ const forwardListDataSource = computed((): any[] => {
 
   return conversationList.value.map((conversation: IConversationModel) => {
     const { type, remark, groupProfile, userProfile } = conversation;
-    const userPickerRow: IUserPickerRow<undefined> = {
+    const userPickerRow: UserPickerRow<undefined> = {
       key: conversation.conversationID,
       label: '',
       avatarUrl: conversation.getAvatar() || '',

package/src/components/MessageList/MessageList.vue

@@ -77,6 +77,7 @@ const {
   activeConversationID,
   isDisableScroll,
   setIsDisableScroll,
+  setEnableReadReceipt,
 } = useMessageListState();
 
 const { scrollToBottom } = useScroll();
@@ -109,13 +110,18 @@ const messageChunks = computed(() => {
 
   filteredMessageList.forEach((message, index, messages) => {
     const messageTime = message.time;
-    const lastChunk = chunks[chunks.length - 1];
+    const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
+    const lastMessage = index > 0 ? messages[index - 1] : undefined;
 
     const shouldCreateNewChunk = !lastChunk
       || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
       || lastChunk.messages[0].from !== message.from
       || message.isRevoked
-      || (index > 0 && messages[index - 1].isRevoked);
+      || (lastMessage && lastMessage.isRevoked)
+      || message.status === 'fail'
+      || (lastMessage && lastMessage.status === 'fail')
+      || message.hasRiskContent
+      || (lastMessage && lastMessage.hasRiskContent);
 
     if (shouldCreateNewChunk) {
       chunks.push({
@@ -239,6 +245,12 @@ watch(messageList, (newMessages, oldMessages) => {
   }
 });
 
+watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {
+  setEnableReadReceipt(newEnableReadReceipt);
+}, {
+  immediate: true,
+});
+
 onMounted(() => {
   if (scrollContainer.value) {
     scrollContainer.value.addEventListener('scroll', handleScroll);
@@ -277,8 +289,8 @@ onUnmounted(() => {
         <!-- Time Divider -->
         <component
           :is="props.MessageTimeDivider || DefaultMessageTimeDivider"
-          :previous-message="chunkIndex > 0 ? messageChunks[chunkIndex-1].messages[0] : undefined"
-          :message="chunk.messages[0]"
+          :previousMessage="chunkIndex > 0 ? messageChunks[chunkIndex-1].messages[0] : undefined"
+          :currentMessage="chunk.messages[0]"
         />
 
         <!-- Message Chunk -->
@@ -392,7 +404,7 @@ onUnmounted(() => {
 
 .scroll-to-bottom {
   position: absolute;
-  bottom: 105px;
+  bottom: 95px;
   right: 8px;
 }
 </style>

package/src/components/MessageList/MessageTimeDivider/MessageTimeDivider.vue

@@ -1,25 +1,25 @@
 <script lang="ts" setup>
 import { h, computed, Fragment } from 'vue';
 import { getTimeStampAuto } from '../../../utils/time';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../types';
 
-interface IMessageTimeDividerProps {
-  previousMessage: IMessageModel | undefined;
-  message: IMessageModel;
+interface MessageTimeDividerProps {
+  previousMessage: MessageModel | undefined;
+  currentMessage: MessageModel;
 }
 
-const props = withDefaults(defineProps<IMessageTimeDividerProps>(), {
+const props = withDefaults(defineProps<MessageTimeDividerProps>(), {
   previousMessage: undefined,
-  message: () => ({}) as IMessageModel,
+  currentMessage: () => ({}) as MessageModel,
 });
 
 const shouldShowTimeDivider = computed(() => {
-  if (!props.message?.time) {
+  if (!props.currentMessage?.time) {
     return false;
   }
 
   const prevTime = props.previousMessage?.time || 0;
-  const currentTime = props.message.time;
+  const currentTime = props.currentMessage.time;
 
   return currentTime - prevTime > 5 * 60;
 });
@@ -29,7 +29,7 @@ const renderDefaultContent = () => {
     return h(Fragment, null, []);
   }
 
-  const currentTime = props.message.time;
+  const currentTime = props.currentMessage.time;
 
   return h('div', { class: 'message-time-divider' }, [
     h('span', {}, getTimeStampAuto(currentTime * 1000)),

package/src/components/MessageList/index.ts

@@ -1,14 +1,15 @@
-import { Message } from './Message';
-import { MessageActionDropdown } from './Message/MessageLayout/MessageActionDropdown';
-import MessageList from './MessageList.vue';
+import { Message as MessageComponent } from './Message';
+import MessageListComponent from './MessageList.vue';
 import { addI18n } from '../../i18n';
 import { resources } from './i18n';
 
 addI18n('en-US', { translation: { MessageList: resources['en-US'] } });
 addI18n('zh-CN', { translation: { MessageList: resources['zh-CN'] } });
 
+const Message = MessageComponent;
+const MessageList = MessageListComponent;
+
 export {
   Message,
   MessageList,
-  MessageActionDropdown,
 };

package/src/components/Search/Search.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .Search {
   display: flex;
   flex-direction: column;

package/src/components/Search/SearchResults/EmptyResult/EmptyResult.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchEmpty {
   display: flex;
   flex-direction: column;

package/src/components/Search/SearchResults/Loading/Loading.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchLoading {
   padding: 32px;
   text-align: center;

package/src/components/Search/SearchResults/SearchResults.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../styles/mixins' as mixins;
 .SearchResults {
   flex: 1;
   overflow: hidden;
@@ -64,11 +62,8 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+
+  @include mixins.scrollbar-hidden();
 }
 
 .SearchResults__error {
@@ -155,19 +150,15 @@
   text-align: center;
   margin: 0;
   padding: 0 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchResults__message-detail-content {
   flex: 1;
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  
+  @include mixins.scrollbar-hidden();
 }
 
 .SearchResults__result-section {

package/src/components/Search/SearchResults/SearchResultsItem/Conversation/Conversation.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .conversationItem {
   display: flex;
   align-items: flex-start;
@@ -28,20 +26,16 @@
 .name {
   font-weight: 500;
   font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .showText {
   font-size: 12px;
   line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
+
+  @include mixins.multi-line-ellipsis(3);
 }