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

package/src/components/MessageList/MessageList.vue

@@ -20,17 +20,18 @@ import { Message as DefaultMessage } from './Message';
 import { MessageForward } from './MessageForward';
 import { MessageListContextSymbol } from './MessageListContext';
 import { MessageTimeDivider as DefaultMessageTimeDivider } from './MessageTimeDivider';
+import { ScrollToBottom } from './ScrollToBottom';
 import type { MessageAction } from '../../hooks/useMessageActions';
 import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
 // Define message chunk interface
-interface IMessageChunk {
+interface MessageChunk {
   timestamp: number;
   messages: MessageModel[];
   key: string;
 }
 
-interface IMessageListProps {
+interface MessageListProps {
   alignment?: 'left' | 'right' | 'two-sided';
   /** max time between message group */
   messageAggregationTime?: number | undefined;
@@ -46,7 +47,7 @@ interface IMessageListProps {
   MessageTimeDivider?: Component | undefined;
 }
 
-const props = withDefaults(defineProps<IMessageListProps>(), {
+const props = withDefaults(defineProps<MessageListProps>(), {
   /** props */
   alignment: 'two-sided',
   messageAggregationTime: 5 * 60,
@@ -66,6 +67,7 @@ const isFinishFirstRender = ref<boolean>(false);
 const distanceToBottom = ref<number>(0);
 const isLoadingHistory = ref<boolean>(false);
 const scrollContainer = ref<HTMLElement | null>(null);
+const isScrollToBottomVisible = ref<boolean>(false);
 
 const storeDistanceToBottom = ref<number>(0);
 
@@ -102,7 +104,7 @@ const messageChunks = computed(() => {
   }
 
   // Perform message aggregation
-  const chunks: IMessageChunk[] = [];
+  const chunks: MessageChunk[] = [];
   const MAX_TIME_BETWEEN_MESSAGE_GROUP = props.messageAggregationTime;
 
   filteredMessageList.forEach((message, index, messages) => {
@@ -142,11 +144,13 @@ const handleScroll = throttle(() => {
 
   if (distanceToBottom.value > autoScrollThreshold) {
     setIsDisableScroll(true);
+    isScrollToBottomVisible.value = true;
   }
 
   // Reset user scroll state if scrolled near bottom
   if (distanceToBottom.value < autoScrollThreshold) {
     setIsDisableScroll(false);
+    isScrollToBottomVisible.value = false;
   }
 }, 100);
 
@@ -154,6 +158,7 @@ const handleScroll = throttle(() => {
 const initializeMessageList = async () => {
   isFinishFirstRender.value = false;
   setIsDisableScroll(false);
+  isScrollToBottomVisible.value = false;
 };
 
 // Load more history messages
@@ -307,8 +312,13 @@ onUnmounted(() => {
         </div>
       </View>
     </div>
+    <MessageForward />
+    <ScrollToBottom
+      v-if="isScrollToBottomVisible"
+      :class="cs('scroll-to-bottom')"
+      @click="scrollToBottom({ behavior: 'smooth' })"
+    />
   </div>
-  <MessageForward />
 </template>
 
 <style lang="scss" scoped>
@@ -379,4 +389,10 @@ onUnmounted(() => {
     background-color: var(--primary-color-hover, #0057cc);
   }
 }
+
+.scroll-to-bottom {
+  position: absolute;
+  bottom: 105px;
+  right: 8px;
+}
 </style>

package/src/components/MessageList/ReadReceiptInfo/ReadReceiptInfo.vue

@@ -262,7 +262,7 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
         @click="handleClose"
       />
       <View class="read-receipt-info__title">
-        {{ t('TUIChat.Read Receipt Detail') }}
+        {{ t('MessageList.read_receipt_detail') }}
       </View>
     </View>
 
@@ -274,7 +274,7 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
         ]"
         @click="setActiveTab('read')"
       >
-        {{ t('TUIChat.Read') }} ({{ readCount }})
+        {{ t('MessageList.read') }} ({{ readCount }})
       </button>
       <button
         :class="[
@@ -283,7 +283,7 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
         ]"
         @click="setActiveTab('unread')"
       >
-        {{ t('TUIChat.Unread') }} ({{ unreadCount }})
+        {{ t('MessageList.unread') }} ({{ unreadCount }})
       </button>
     </View>
 
@@ -301,14 +301,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
           >
             <IconLoading class="read-receipt-info__loading-icon" />
             <View class="read-receipt-info__loading-text">
-              {{ t('TUIChat.Loading') }}
+              {{ t('MessageList.loading') }}
             </View>
           </View>
           <View
             v-else
             class="read-receipt-info__empty"
           >
-            {{ t('TUIChat.No Read Members') }}
+            {{ t('MessageList.no_read_members') }}
           </View>
         </template>
         <template v-else>
@@ -339,14 +339,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
             >
               <IconLoading class="read-receipt-info__loading-icon" />
               <View class="read-receipt-info__loading-text">
-                {{ t('TUIChat.Loading') }}
+                {{ t('MessageList.loading') }}
               </View>
             </View>
             <View
               v-if="readCompleted"
               class="read-receipt-info__list-end"
             >
-              {{ t('TUIChat.No More') }}
+              {{ t('MessageList.no_more') }}
             </View>
           </div>
         </template>
@@ -365,14 +365,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
           >
             <IconLoading class="read-receipt-info__loading-icon" />
             <View class="read-receipt-info__loading-text">
-              {{ t('TUIChat.Loading') }}
+              {{ t('MessageList.loading') }}
             </View>
           </View>
           <View
             v-else
             class="read-receipt-info__empty"
           >
-            {{ t('TUIChat.No Unread Members') }}
+            {{ t('MessageList.no_unread_members') }}
           </View>
         </template>
         <template v-else>
@@ -403,14 +403,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
             >
               <IconLoading class="read-receipt-info__loading-icon" />
               <View class="read-receipt-info__loading-text">
-                {{ t('TUIChat.Loading') }}
+                {{ t('MessageList.loading') }}
               </View>
             </View>
             <View
               v-if="unreadCompleted"
               class="read-receipt-info__list-end"
             >
-              {{ t('TUIChat.No More') }}
+              {{ t('MessageList.no_more') }}
             </View>
           </div>
         </template>

package/src/components/MessageList/ScrollToBottom/ScrollToBottom.vue

@@ -0,0 +1,50 @@
+<template>
+  <button
+    :class="$style['scroll-to-bottom__button']"
+    @click="emits('click')"
+  >
+    <IconArrowStrokeSelectDown
+      :customClass="$style['scroll-to-bottom__button--icon']"
+      :size="18"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { IconArrowStrokeSelectDown } from '@tencentcloud/uikit-base-component-vue3';
+
+const emits = defineEmits(['click']);
+</script>
+
+<style lang="scss" module>
+.scroll-to-bottom__button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+
+  box-shadow:
+    0 12px 26px 0 var(--shadow-color),
+    0 8px 12px 0 var(--shadow-color);
+  background: var(--dropdown-color-default);
+
+  &:hover {
+    background: var(--dropdown-color-hover);
+  }
+
+  &:active {
+    background: get(dropdown-color-active);
+    box-shadow: none;
+  }
+
+  &--icon {
+    color: var(--text-color-link);
+  }
+}
+</style>

package/src/components/MessageList/ScrollToBottom/index.ts

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

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

@@ -0,0 +1,47 @@
+const MessageList = {
+
+  // GroupTipMessage
+  administrator: 'Administrator',
+  enabled_mute_all_members: 'enabled mute all members',
+  disabled_mute_all_members: 'disabled mute all members',
+  became_new_group_owner: 'became the new group owner',
+  changed_group_name_to: 'changed group name to',
+  published_new_announcement: 'published new group notification',
+  joined_group: 'joined the group',
+  group_member: 'Group member',
+  left_group: 'left the group',
+  was: 'was',
+  kicked_out_of_group: 'kicked out of the group',
+  became_admin: 'became admin',
+  admin_privileges_revoked: 'admin privileges revoked',
+  was_muted: 'was muted',
+  was_unmuted: 'was unmuted',
+  group_tip_message: 'Group tip message',
+
+  // TUIChat
+  download_failed: 'Download failed',
+  create_group: 'Create Group',
+  unread: 'Unread',
+  all_read: 'All Read',
+  read: 'Read',
+  you: 'You',
+  recalled_a_message: 'recalled a message',
+  reedit: 'Re-edit',
+  origin_message_has_been_recalled: 'Original message has been recalled',
+  forward: 'Forward',
+  copy: 'Copy',
+  recall: 'Recall',
+  quote: 'Quote',
+  delete: 'Delete',
+  max_count_exceed: 'Max Count Exceed',
+  read_receipt_detail: 'Read Receipt Detail',
+  read_count: 'Read Count',
+  unread_count: 'Unread Count',
+  loading: 'Loading',
+  no_read_members: 'No Read Members',
+  no_more: 'No More',
+  no_unread_members: 'No Unread Members',
+  yesterday: 'Yesterday',
+};
+
+export default MessageList;

package/src/components/MessageList/i18n/index.ts

@@ -0,0 +1,9 @@
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+export { resources };

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

@@ -0,0 +1,46 @@
+const MessageList = {
+  // GroupTipMessage
+  administrator: '管理员',
+  enabled_mute_all_members: '开启全员禁言',
+  disabled_mute_all_members: '取消全员禁言',
+  became_new_group_owner: '成为新的群主',
+  changed_group_name_to: '修改群名为',
+  published_new_announcement: '发布新公告',
+  joined_group: '加入群组',
+  group_member: '群成员',
+  left_group: '退出群组',
+  was: '被',
+  kicked_out_of_group: '踢出群组',
+  became_admin: '成为管理员',
+  admin_privileges_revoked: '被撤销管理员',
+  was_muted: '被禁言',
+  was_unmuted: '被取消禁言',
+  group_tip_message: '群提示消息',
+
+  // TUIChat
+  download_failed: '下载失败',
+  create_group: '创建群组',
+  unread: '未读',
+  all_read: '全部已读',
+  read: '已读',
+  you: '你',
+  recalled_a_message: '撤回了一条消息',
+  reedit: '重新编辑',
+  origin_message_has_been_recalled: '原消息已被撤回',
+  forward: '转发',
+  copy: '复制',
+  recall: '撤回',
+  quote: '引用',
+  delete: '删除',
+  max_count_exceed: '超过最大数量限制',
+  read_receipt_detail: '已读详情',
+  read_count: '已读人数',
+  unread_count: '未读人数',
+  loading: '加载中',
+  no_read_members: '暂无已读成员',
+  no_more: '已加载全部',
+  no_unread_members: '暂无未读成员',
+  yesterday: '昨天',
+};
+
+export default MessageList;

package/src/components/MessageList/index.ts

@@ -1,6 +1,11 @@
 import { Message } from './Message';
 import { MessageActionDropdown } from './Message/MessageLayout/MessageActionDropdown';
 import MessageList 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'] } });
 
 export {
   Message,

package/src/components/Search/Search.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.Search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-color-operate);
+  border-radius: 8px;
+  overflow: hidden;
+} 

package/src/components/Search/Search.vue

@@ -0,0 +1,192 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div
+    :class="[$style.Search, props.className]"
+    :style="props.style"
+    @click="stopClickPropagation"
+  >
+    <component
+      :is="SearchBar"
+      :value="searchValue"
+      :on-change="handleInputChange"
+      :on-key-down="handleKeyDown"
+      :on-clear="handleClear"
+      :auto-focus="autoFocus"
+      :variant="variant"
+    />
+    <component
+      :is="SearchAdvanced"
+      :variant="variant"
+      :search-type="selectedSearchType"
+      :advanced-params="searchAdvancedParams"
+      :on-advanced-params-change="handleAdvancedChange"
+    />
+    <component
+      :is="SearchResults"
+      :results="results"
+      :is-loading="isLoading"
+      :error="error"
+      :keyword="keyword"
+      :type-labels="defaultTypeLabels"
+      :search-type="selectedSearchType"
+      :on-result-item-click="handleResultItemClick"
+      :on-load-more="handleViewMore"
+      :SearchResultsPresearch="SearchResultsPresearch"
+      :SearchResultsLoading="SearchResultsLoading"
+      :SearchResultsEmpty="SearchResultsEmpty"
+      :SearchResultItem="SearchResultItem"
+      :variant="variant"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, withDefaults } from 'vue';
+import { useSearchState } from '../../states/SearchState';
+import { SearchType } from '../../types/engine';
+import { VariantType, defaultTypeLabels } from '../../types/search';
+import { debounce } from '../../utils/lodash';
+import DefaultSearchAdvanced from './SearchAdvanced';
+import DefaultSearchBar from './SearchBar';
+import DefaultSearchResults from './SearchResults';
+import type { SearchCloudMessagesResultItem, SearchParamsMap } from '../../types/engine';
+import type { SearchResultItemType, SearchProps } from '../../types/search';
+
+const props = withDefaults(defineProps<SearchProps>(), {
+  SearchBar: DefaultSearchBar,
+  SearchResults: DefaultSearchResults,
+  SearchAdvanced: DefaultSearchAdvanced,
+  debounceTime: 300,
+  variant: VariantType.MINI,
+  autoFocus: false,
+  className: '',
+  style: () => ({}),
+  SearchResultsPresearch: undefined,
+  SearchResultsLoading: undefined,
+  SearchResultsEmpty: undefined,
+  SearchResultItem: undefined,
+});
+
+const {
+  keyword,
+  results,
+  isLoading,
+  error,
+  selectedSearchType,
+  searchAdvancedParams,
+  setKeyword,
+  setSelectedType,
+  loadMore,
+  setSearchMessageAdvancedParams,
+  setSearchUserAdvancedParams,
+  setSearchGroupAdvancedParams,
+} = useSearchState(props.variant);
+
+const searchValue = ref(keyword.value);
+
+const isExternalUpdate = ref(false);
+
+const debouncedSearch = debounce(async (searchKeyword: string) => {
+  try {
+    isExternalUpdate.value = true;
+    await setKeyword(searchKeyword);
+  } catch (err) {
+    props.onError?.(err as Error);
+  }
+}, props.debounceTime);
+
+watch(
+  searchValue,
+  (newValue) => {
+    if (!isExternalUpdate.value) {
+      debouncedSearch(newValue);
+    }
+  },
+  { immediate: false },
+);
+
+watch(keyword, (newKeyword) => {
+  if (isExternalUpdate.value) {
+    isExternalUpdate.value = false;
+    return;
+  }
+  searchValue.value = newKeyword;
+});
+
+const handleInputChange = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  const { value } = target;
+  searchValue.value = value;
+  props.onKeywordChange?.(value);
+  if (props.variant !== VariantType.EXACT) {
+    debouncedSearch(value);
+  }
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    debouncedSearch.cancel?.();
+    isExternalUpdate.value = true;
+    setKeyword(searchValue.value);
+  }
+};
+
+const handleClear = () => {
+  searchValue.value = '';
+  debouncedSearch.cancel?.();
+  isExternalUpdate.value = true;
+  setKeyword('');
+  props.onKeywordChange?.('');
+};
+
+const handleAdvancedChange = (type: SearchType, params: SearchParamsMap[SearchType]) => {
+  const storeParams: any = searchAdvancedParams.value.get(type) || {};
+  switch (type) {
+    case SearchType.MESSAGE:
+      setSearchMessageAdvancedParams({
+        ...storeParams,
+        ...params,
+      });
+      break;
+    case SearchType.USER:
+      setSearchUserAdvancedParams({
+        ...storeParams,
+        ...params,
+      });
+      break;
+    case SearchType.GROUP:
+      setSearchGroupAdvancedParams({
+        ...storeParams,
+        ...params,
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const handleResultItemClick = (item: SearchResultItemType, type: SearchType) => {
+  if (props.onResultItemClick) {
+    props.onResultItemClick(item, type);
+  }
+  if (type === SearchType.MESSAGE) {
+    const { conversationID = '' } = (item as SearchCloudMessagesResultItem).conversation || {};
+    handleAdvancedChange(SearchType.MESSAGE, { conversationID });
+  }
+};
+
+const handleViewMore = (type: SearchType) => {
+  if (props.variant === VariantType.STANDARD && type !== SearchType.CHAT_MESSAGE) {
+    setSelectedType(type);
+  }
+  loadMore?.(type);
+};
+
+const stopClickPropagation = (e: Event) => {
+  e.stopPropagation();
+};
+</script>
+
+<style lang="scss" module>
+@import './Search.scss';
+</style>