tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/components/ConversationList/ConversationPreview/utils.ts

@@ -0,0 +1,55 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import type { ConversationModel } from '../../../types';
+
+export const generateHighlightTitle = (
+  conversation: ConversationModel,
+  highlightMatchString?: string,
+) => {
+  const title = conversation?.getShowName?.();
+  if (!highlightMatchString) {
+    return [{ text: title, isHighlight: false }];
+  }
+
+  const regex = new RegExp(`(${highlightMatchString})`, 'gi');
+  const parts = title.split(regex);
+  
+  return parts.map((part) => ({
+    text: part,
+    isHighlight: part.toLowerCase() === highlightMatchString.toLowerCase(),
+  }));
+};
+
+export const getLatestMessagePreview = (conversation: ConversationModel, t: (key: string) => string) => {
+  const { lastMessage } = conversation || {};
+  if (!lastMessage) {
+    return '';
+  }
+
+  const { type, payload } = lastMessage;
+  const { nick, userID } = lastMessage.nick || lastMessage?.from || {};
+
+  const senderName = nick || userID || '';
+
+  switch (type) {
+    case TUIChatEngine.TYPES.MSG_TEXT:
+      return payload.text || '';
+    case TUIChatEngine.TYPES.MSG_IMAGE:
+      return `[${t('TUIChat.Image')}]`;
+    case TUIChatEngine.TYPES.MSG_AUDIO:
+      return `[${t('TUIChat.Audio')}]`;
+    case TUIChatEngine.TYPES.MSG_VIDEO:
+      return `[${t('TUIChat.Video')}]`;
+    case TUIChatEngine.TYPES.MSG_FILE:
+      return `[${t('TUIChat.File')}]`;
+    case TUIChatEngine.TYPES.MSG_CUSTOM:
+      return `[${t('TUIChat.Custom')}]`;
+    case TUIChatEngine.TYPES.MSG_LOCATION:
+      return `[${t('TUIChat.Location')}]`;
+    case TUIChatEngine.TYPES.MSG_FACE:
+      return `[${t('TUIChat.Emoji')}]`;
+    case TUIChatEngine.TYPES.MSG_MERGER:
+      return `[${t('TUIChat.Chat History')}]`;
+    default:
+      return senderName ? `${senderName}: ${payload?.text || ''}` : payload?.text || '';
+  }
+};

package/src/components/ConversationList/ConversationSearch/ConversationSearch.scss

@@ -0,0 +1,51 @@
+.conversationSearch {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--bg-color-operate);
+  color: var(--text-color-primary);
+
+  &__bar {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &--active {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 11;
+
+    .SearchBar {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  &__box {
+    height: 100%;
+  }
+
+  &__advanced {
+    width: 960px !important;
+    height: 600px;
+    &--h5 {
+      width: 100% !important;
+      height: 100% !important;
+      max-width: 100% !important;
+      border-radius: 0 !important;
+      padding: 0 !important;
+    }
+  }
+}
+
+.searchBtn {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 20px;
+}

package/src/components/ConversationList/ConversationSearch/ConversationSearch.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    v-if="visible"
+    :class="[$style.conversationSearch, className, {
+      [$style['conversationSearch--active']]: isActive && !isShowStandard
+    }]"
+    :style="style"
+  >
+    <div
+      :class="[$style.conversationSearch]"
+    >
+      <component
+        :is="SearchBar"
+        v-if="isShowStandard"
+        :class="$style.conversationSearch__bar"
+      />
+
+      <div
+        v-if="!isShowStandard"
+        :class="$style.conversationSearch__box"
+      >
+        <component
+          :is="Search"
+          :class="[$style.conversationSearch__content, {
+            [$style['searchContainer--h5']]: !isPC
+          }]"
+          :variant="VariantType.MINI"
+          :SearchBar="SearchBar"
+          :SearchResultsPresearch="SearchResultsPresearch || (() => h('div'))"
+          :SearchResultsLoading="SearchResultsLoading"
+          :SearchResultsEmpty="SearchResultsEmpty"
+          :SearchResultItem="SearchResultItem"
+          @result-item-click="handleOnSelectResult"
+          @search-complete="onSearchComplete"
+          @error="onError"
+        />
+      </div>
+
+      <TUIDialog
+        :customClasses="[$style.conversationSearch__advanced]"
+        :visible="isShowStandard"
+        :show-close="false"
+        :show-confirm="false"
+        :show-cancel="false"
+        @close="handleCloseStandard"
+      >
+        <component
+          :is="Search"
+          :class="[$style.conversationSearch__content, {
+            [$style['searchContainer--h5']]: !isPC
+          }]"
+          :variant="VariantType.STANDARD"
+          :SearchBar="SearchBar"
+          :SearchResultsPresearch="SearchResultsPresearch"
+          :SearchResultsLoading="SearchResultsLoading"
+          :SearchResultsEmpty="SearchResultsEmpty"
+          :SearchResultItem="SearchResultItem"
+          @result-item-click="handleOnSelectResult"
+          @search-complete="onSearchComplete"
+          @error="onError"
+        />
+        <template #footer>
+          <div />
+        </template>
+      </TUIDialog>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, h } from 'vue';
+import type { Component } from 'vue';
+import { TUIDialog, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { useSearchState } from '../../../states/SearchState';
+import { SearchType, VariantType } from '../../../types';
+import { isPC } from '../../../utils';
+import { Search, SearchBar } from '../../Search';
+import type {
+  SearchProps,
+  SearchResultItemType,
+  MessageModel,
+  SearchCloudUsersResultItem,
+  SearchCloudGroupsResultItem,
+  SearchCloudMessagesResultItem,
+} from '../../../types';
+
+interface ConversationSearchProps extends SearchProps {
+  visible?: boolean;
+  Search?: Component<SearchProps>;
+}
+
+const props = withDefaults(defineProps<ConversationSearchProps>(), {
+  visible: true,
+  Search: () => Search,
+  SearchBar: () => SearchBar,
+});
+
+const emit = defineEmits<{
+  keywordChange: [value: string];
+  resultItemClick: [item: SearchResultItemType, type: SearchType];
+  searchComplete: [];
+  error: [error: any];
+}>();
+
+const isActive = ref(false);
+const isShowStandard = ref(false);
+const searchMode = ref(VariantType.MINI);
+
+const { t } = useUIKit();
+const { keyword, setKeyword, setSelectedType } = useSearchState();
+const { setActiveConversation } = useConversationListState();
+
+const handleCloseStandard = () => {
+  isShowStandard.value = false;
+  searchMode.value = VariantType.MINI;
+  setKeyword('');
+};
+
+const handleSearchChange = (value: string) => {
+  isActive.value = !!value;
+  const isMiniSearchClose = !value && searchMode.value === VariantType.MINI;
+  const isStandardSearchClose = !isPC && searchMode.value === VariantType.STANDARD && !value;
+
+  if (isMiniSearchClose || isStandardSearchClose) {
+    handleCloseStandard();
+  }
+  emit('keywordChange', value);
+};
+
+const handleSearchUserClick = (item: SearchCloudUsersResultItem) => {
+  const { profile } = item || {};
+  const conversationID = `C2C${profile.userID}`;
+  setActiveConversation(conversationID);
+  handleCloseStandard();
+};
+
+const handleSearchGroupClick = (item: SearchCloudGroupsResultItem) => {
+  const { conversation } = item || {};
+  if (conversation) {
+    setActiveConversation(conversation.conversationID);
+  } else {
+    TUIToast.error({
+      message: t('TUIConversation.You are not in the group, please join the group first'),
+    });
+  }
+  handleCloseStandard();
+};
+
+const handleSearchChatMessageClick = (item: SearchResultItemType) => {
+  const { conversationID: messageConversationID = '' } = (item as MessageModel) || {};
+  const { conversationID = '' } = (item as SearchCloudMessagesResultItem)?.conversation || {};
+  const targetConversationID = conversationID || messageConversationID;
+  if (targetConversationID) {
+    setActiveConversation(targetConversationID);
+    handleCloseStandard();
+  }
+};
+
+const handleOnSelectResult = (item: SearchResultItemType, type: SearchType) => {
+  if (props.onResultItemClick) {
+    emit('resultItemClick', item, type);
+    return;
+  }
+
+  switch (type) {
+    case SearchType.USER:
+      handleSearchUserClick(item as SearchCloudUsersResultItem);
+      break;
+    case SearchType.GROUP:
+      handleSearchGroupClick(item as SearchCloudGroupsResultItem);
+      break;
+    case SearchType.CHAT_MESSAGE:
+      handleSearchChatMessageClick(item);
+      break;
+    default:
+      if (searchMode.value === VariantType.MINI) {
+        isShowStandard.value = true;
+        searchMode.value = VariantType.STANDARD;
+        setSelectedType(type);
+      }
+      break;
+  }
+};
+
+watch(keyword, handleSearchChange, { immediate: true });
+</script>
+
+<style lang="scss" module>
+@import './ConversationSearch.scss';
+</style>

package/src/components/ConversationList/ConversationSearch/index.ts

@@ -0,0 +1 @@
+export { default as ConversationSearch } from './ConversationSearch.vue';

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

@@ -0,0 +1,50 @@
+export default {
+  TUIConversation: {
+    // ConversationPlaceHolder
+    'Loading': 'Loading...',
+    'No conversations': 'No conversations',
+    'Load failed': 'Load failed',
+    'Retry': 'Retry',
+
+    // ConversationCreate
+    'Start chat': 'Start chat',
+    'Add Participants': 'Add Participants',
+    'Search': 'Search',
+    'New group chat': 'New group chat',
+    'Next': 'Next',
+    'Create': 'Create',
+
+    // ConversationCreateGroupDetail
+    'Group Name': 'Group Name',
+    'Group ID': 'Group ID',
+    'Group Type': 'Group Type',
+    'Participants': 'Participants',
+
+    // Group types
+    'Private': 'Work',
+    'Work': 'Work',
+    'Public': 'Public',
+    'Meeting': 'Meeting',
+    'AVChatRoom': 'AVChatRoom',
+    'Community': 'Community',
+
+    // Group type descriptions
+    'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.',
+    'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.',
+    'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.',
+    'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.': 'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.',
+    'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.': 'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.',
+
+    // ConversationActions
+    'Pin': 'Pin',
+    'Unpin': 'Unpin',
+    'Mute': 'Mute',
+    'Unmute': 'Unmute',
+    'MarkRead': 'Mark as Read',
+    'MarkUnRead': 'Mark as Unread',
+    'Delete': 'Delete',
+
+    // Details link
+    'Details': 'Details',
+  },
+};

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

@@ -0,0 +1,4 @@
+import enResource from './en-US';
+import zhResource from './zh-CN';
+
+export { enResource, zhResource };

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

@@ -0,0 +1,50 @@
+export default {
+  TUIConversation: {
+    // ConversationPlaceHolder
+    'Loading': '加载中...',
+    'No conversations': '暂无会话',
+    'Load failed': '加载失败',
+    'Retry': '重试',
+
+    // ConversationCreate
+    'Start chat': '发起会话',
+    'Add Participants': '添加成员',
+    'Search': '搜索',
+    'New group chat': '新建群聊',
+    'Next': '下一步',
+    'Create': '创建',
+
+    // ConversationCreateGroupDetail
+    'Group Name': '群名称',
+    'Group ID': '群ID',
+    'Group Type': '群类型',
+    'Participants': '群成员',
+
+    // Group types
+    'Private': '工作群',
+    'Work': '工作群',
+    'Public': '公开群',
+    'Meeting': '会议群',
+    'AVChatRoom': '直播群',
+    'Community': '社群',
+
+    // Group type descriptions
+    'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': '用户只能通过现有成员的邀请加入群组。邀请无需被邀请人同意或群主批准。详情请参阅文档。',
+    'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': '公共群组创建后，群主可以指定群管理员。用户加入群组需要搜索群ID并发送请求，群主或管理员批准后方可加入。详情请参阅文档。',
+    'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': '群组创建后，用户可以自由加入和退出群组，并可以查看加入群组前发送的消息。适用于音视频会议、在线教育等融合腾讯实时通信 (TRTC) 的场景。详情请参阅文档。',
+    'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.': '群组创建后，用户可以自由加入和退出群组。群组成员数量不限，但不保存消息历史记录。可以与直播 (LVB) 结合，支持屏幕评论场景。详情请参阅文档。',
+    'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.': '创建后可随意进出，最多支持10万人，支持历史消息存储，用户搜索群ID发起建群申请后，无需管理员审批即可加入。详情请参阅产品文档。',
+
+    // ConversationActions
+    'Pin': '置顶',
+    'Unpin': '取消置顶',
+    'Mute': '消息免打扰',
+    'Unmute': '取消免打扰',
+    'MarkRead': '标为已读',
+    'MarkUnRead': '标为未读',
+    'Delete': '删除',
+
+    // Details link
+    'Details': '详情',
+  },
+};

package/src/components/ConversationList/index.ts

@@ -1,5 +1,36 @@
-import ConversationList from './ConversationList.vue';
+import { addI18n } from '../../i18n';
+
+import { ConversationActions as ConversationActionsComponent } from './ConversationActions';
+import { ConversationCreate as ConversationCreateComponent } from './ConversationCreate';
+import { default as ConversationListComponent } from './ConversationList.vue';
+import { ConversationListContent as ConversationListContentComponent } from './ConversationListContent';
+import { ConversationListHeader as ConversationListHeaderComponent } from './ConversationListHeader';
+import { default as ConversationPlaceHolderComponent } from './ConversationPlaceHolder';
+import { ConversationPreview as ConversationPreviewComponent, ConversationPreviewUI as ConversationPreviewUIComponent } from './ConversationPreview';
+import { ConversationSearch as ConversationSearchComponent } from './ConversationSearch';
+import { enResource, zhResource } from './i18n';
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+const ConversationList = ConversationListComponent;
+const ConversationActions = ConversationActionsComponent;
+const ConversationCreate = ConversationCreateComponent;
+const ConversationListHeader = ConversationListHeaderComponent;
+const ConversationListContent = ConversationListContentComponent;
+const ConversationPlaceHolder = ConversationPlaceHolderComponent;
+const ConversationPreview = ConversationPreviewComponent;
+const ConversationPreviewUI = ConversationPreviewUIComponent;
+const ConversationSearch = ConversationSearchComponent;
 
 export {
   ConversationList,
+  ConversationActions,
+  ConversationCreate,
+  ConversationListHeader,
+  ConversationListContent,
+  ConversationPreview,
+  ConversationPreviewUI,
+  ConversationPlaceHolder,
+  ConversationSearch,
 };

package/src/components/LiveAudienceList/LiveAudienceList.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
     <div
-      v-if="loginUserInfo && localLiveStatus === LiveStatus.Live"
+      v-if="loginUserInfo && localLiveStatus === LiveStatus.Live && !isOwner"
       class="viewer-item current-user-item"
     >
       <span class="rank">-</span>

package/src/components/LiveAudienceList/UserActionMenu.vue

@@ -100,36 +100,36 @@ const actions = computed(() => {
   if (isInCoGuest) {
     tempActions.push({ label: t('Kick out'), action: 'disconnect', actionFn: () => disconnect(props.userId) });
   }
-  if (isAvailableCoGuest) {
-    tempActions.push({
-      label: t('Invite to seat'),
-      action: 'takeSeat',
-      actionFn: () =>
-        sendCoGuestRequest({
-          userId: props.userId,
-          seatIndex: -1,
-        }),
-    });
-  }
-  if (isSentCoGuest) {
-    tempActions.push({
-      label: t('Cancel invitation'),
-      action: 'cancelCoGuestRequest',
-      actionFn: () => cancelCoGuestRequest({ userId: props.userId }),
-    });
-  }
-  if (isReceivedCoGuest) {
-    tempActions.push({
-      label: t('Accept invitation'),
-      action: 'acceptCoGuestRequest',
-      actionFn: () => acceptCoGuestRequest({ userId: props.userId }),
-    });
-    tempActions.push({
-      label: t('Reject invitation'),
-      action: 'rejectCoGuestRequest',
-      actionFn: () => rejectCoGuestRequest({ userId: props.userId }),
-    });
-  }
+  // if (isAvailableCoGuest) {
+  //   tempActions.push({
+  //     label: t('Invite to seat'),
+  //     action: 'takeSeat',
+  //     actionFn: () =>
+  //       sendCoGuestRequest({
+  //         userId: props.userId,
+  //         seatIndex: -1,
+  //       }),
+  //   });
+  // }
+  // if (isSentCoGuest) {
+  //   tempActions.push({
+  //     label: t('Cancel invitation'),
+  //     action: 'cancelCoGuestRequest',
+  //     actionFn: () => cancelCoGuestRequest({ userId: props.userId }),
+  //   });
+  // }
+  // if (isReceivedCoGuest) {
+  //   tempActions.push({
+  //     label: t('Accept invitation'),
+  //     action: 'acceptCoGuestRequest',
+  //     actionFn: () => acceptCoGuestRequest({ userId: props.userId }),
+  //   });
+  //   tempActions.push({
+  //     label: t('Reject invitation'),
+  //     action: 'rejectCoGuestRequest',
+  //     actionFn: () => rejectCoGuestRequest({ userId: props.userId }),
+  //   });
+  // }
   tempActions.push({
     label: t('Kick out of room'),
     action: 'kickUserOutOfRoom',

package/src/components/LiveList/LiveList.vue

@@ -6,7 +6,7 @@
           <div class="live-room-cover">
             <div class="header">
               <div class="left">
-                <IconLiveCoverHeader :size="10"/>
+                <IconLiveCoverHeader :size="10" />
                 <span> {{ t('LIVE') }} </span>
               </div>
               <div class="right">
@@ -27,7 +27,7 @@
         <span>{{ t('No More') }}</span>
       </div>
     </div>
-    <div v-else-if="!isLoadingLiveList" class="no-live">
+    <div v-else-if="!isLoadingMore" class="no-live">
       <IconNoLiveRoom :size="60" />
       <span>{{ t('No Live') }}</span>
     </div>
@@ -39,42 +39,47 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed, defineEmits } from 'vue';
+import { ref, computed, defineEmits, watch } from 'vue';
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveState } from '../../states/LiveState';
 import { LiveInfo } from '../../types';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 
-const { liveList, hasMoreLive, isLoadingLiveList, isLoadingMore, fetchLiveList } = useLiveState();
+const { liveList, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
 
 const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
 const scrollContainerRef = ref<HTMLElement | null>(null);
 
+const isLoadingMore = ref(false);
+const hasMoreLive = computed(() => currentCursor.value !== '');
+
 const shouldFetchMoreLiveList = computed(() => {
-  return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
+  return hasMoreLive.value && !isLoadingMore.value;
 });
 
 const isShowMoreVisible = computed(() => {
   return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
 });
 
-const emit = defineEmits<{
-  (e: 'live-room-click', liveInfo: LiveInfo): void;
-}>();
-
 watch(
   loginUserInfo,
-  user => {
+  async user => {
     if (user && user.userId) {
-      fetchLiveList({});
+      isLoadingMore.value = true;
+      await fetchLiveList({});
+      isLoadingMore.value = false;
     }
   },
   { immediate: true }
 );
 
+const emit = defineEmits<{
+  (e: 'live-room-click', liveInfo: LiveInfo): void;
+}>();
+
 function liveRoomClick(liveInfo: LiveInfo) {
   console.log('liveRoomClick,liveInfo:', liveInfo);
   emit('live-room-click', liveInfo);
@@ -96,7 +101,17 @@ function handleWheel(event: WheelEvent) {
   }
 
   if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchLiveList({ append: true });
+    fetchMoreLives();
+  }
+}
+
+async function fetchMoreLives() {
+  if (!hasMoreLive.value || isLoadingMore.value) return;
+  try {
+    isLoadingMore.value = true;
+    await fetchLiveList({ cursor: currentCursor.value });
+  } finally {
+    isLoadingMore.value = false;
   }
 }
 
@@ -106,7 +121,6 @@ function handleCoverImageError(event: Event) {
     image.src = DEFAULT_COVER;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>