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

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUI.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div
+      ref="conversationPreviewRef"
+      :class="[$style.conversationPreview, className,
+               isH5 && [$style['conversationPreview--mobile']],
+               (isSelected || conversation?.conversationID === activeConversation?.conversationID)
+                 && [$style['conversationPreview--active']],
+               (!conversation?.isMuted && (conversation?.unreadCount > 0 || conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD)))
+                 && [$style['conversationPreview--unread']],
+               conversation?.isPinned && [$style['conversationPreview--pin']],
+               conversation?.isMuted && [$style['conversationPreview--mute']],
+      ]"
+      :style="style"
+      v-bind="longPressEvents"
+      @click="handleClick"
+    >
+      <slot>
+        <div :class="$style['conversationPreview__avatar']">
+          <component
+            :is="Avatar"
+            :src="conversation?.getAvatar?.()"
+            :unreadCount="conversation?.isMuted && conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD) ? 1 : undefined"
+            :isDotUnreadCount="conversation?.isMuted && conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD)"
+          />
+        </div>
+
+        <div :class="$style['conversationPreview__content']">
+          <component
+            :is="Title"
+            :conversation="conversation"
+          />
+          <component
+            :is="LastMessageAbstract"
+            :conversation="conversation"
+          />
+        </div>
+
+        <div :class="$style['conversationPreview__external']">
+          <component
+            :is="Unread"
+            :conversation="conversation"
+          />
+          <component
+            :is="ConversationActions"
+            v-if="enableActions && isActionMenuActive && !isH5"
+            :conversation="conversation"
+            v-bind="actionsConfig"
+            @close="handleCloseActionsModal"
+          />
+          <component
+            :is="LastMessageTimestamp"
+            v-else
+            :conversation="conversation"
+          />
+        </div>
+      </slot>
+    </div>
+
+    <component
+      :is="ConversationActions"
+      v-if="isH5 && enableActions && isActionMenuActive"
+      :conversation="conversation"
+      v-bind="actionsConfig"
+      @close="handleCloseActionsModal"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { useLongPress, useMouseHover } from '../../../hooks';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { isH5 } from '../../../utils';
+import { Avatar as DefaultAvatar } from '../../Avatar';
+import { ConversationActions as DefaultConversationActions } from '../ConversationActions';
+import { default as DefaultLastMessageAbstract } from './ConversationPreviewAbstract.vue';
+import { default as DefaultLastMessageTimestamp } from './ConversationPreviewTimestamp.vue';
+import { default as DefaultTitle } from './ConversationPreviewTitle.vue';
+import { default as DefaultUnread } from './ConversationPreviewUnread.vue';
+import type {
+  ConversationModel,
+  ConversationPreviewUIProps,
+} from '../../../types';
+
+const props = withDefaults(defineProps<ConversationPreviewUIProps>(), {
+  isSelected: false,
+  enableActions: true,
+  Avatar: () => DefaultAvatar,
+  ConversationActions: () => DefaultConversationActions,
+  Title: () => DefaultTitle,
+  LastMessageAbstract: () => DefaultLastMessageAbstract,
+  Unread: () => DefaultUnread,
+  LastMessageTimestamp: () => DefaultLastMessageTimestamp,
+});
+
+const emit = defineEmits<{
+  select: [conversation: ConversationModel];
+}>();
+
+const { activeConversation, setActiveConversation } = useConversationListState();
+
+const conversationPreviewRef = ref<HTMLElement>();
+const isActionMenuActive = ref(false);
+
+const { isHovered } = useMouseHover(conversationPreviewRef);
+const { getEventHandlers } = useLongPress(() => {
+  if (isH5) {
+    isActionMenuActive.value = true;
+  }
+});
+
+const longPressEvents = getEventHandlers();
+
+watch(isHovered, (newValue) => {
+  if (!isH5) {
+    isActionMenuActive.value = newValue;
+  }
+});
+
+const handleClick = () => {
+  emit('select', props.conversation);
+  setActiveConversation(props.conversation.conversationID);
+};
+
+const handleCloseActionsModal = () => {
+  isActionMenuActive.value = false;
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationPreview.scss';
+</style>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUnread.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="$style.conversationPreview__unread">
+    <IconMute v-if="conversation?.isMuted" />
+    <span
+      v-else-if="conversation?.unreadCount > 99"
+      :class="$style['unread-count']"
+    >99+</span>
+    <span
+      v-else-if="conversation?.unreadCount > 0"
+      :class="$style['unread-count']"
+    >{{ conversation?.unreadCount }}</span>
+    <span
+      v-else-if="isUnreadMarked"
+      :class="$style['unread-count']"
+    >1</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { IconMute } from '@tencentcloud/uikit-base-component-vue3';
+import type { ConversationModel } from '../../../types';
+
+const props = defineProps<{
+  conversation: ConversationModel;
+}>();
+
+const isUnreadMarked = computed(() => props.conversation?.markList?.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD));
+</script>
+
+<style lang="scss" module>
+@import './ConversationPreview.scss';
+</style>

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

@@ -0,0 +1,7 @@
+export { default as ConversationPreview } from './ConversationPreview.vue';
+export { default as ConversationPreviewUI } from './ConversationPreviewUI.vue';
+export { default as ConversationPreviewTitle } from './ConversationPreviewTitle.vue';
+export { default as ConversationPreviewTimestamp } from './ConversationPreviewTimestamp.vue';
+export { default as ConversationPreviewAbstract } from './ConversationPreviewAbstract.vue';
+export { default as ConversationPreviewUnread } from './ConversationPreviewUnread.vue';
+export { generateHighlightTitle, getLatestMessagePreview } from './utils';

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('TUIConversation.Image')}]`;
+    case TUIChatEngine.TYPES.MSG_AUDIO:
+      return `[${t('TUIConversation.Audio')}]`;
+    case TUIChatEngine.TYPES.MSG_VIDEO:
+      return `[${t('TUIConversation.Video')}]`;
+    case TUIChatEngine.TYPES.MSG_FILE:
+      return `[${t('TUIConversation.File')}]`;
+    case TUIChatEngine.TYPES.MSG_CUSTOM:
+      return `[${t('TUIConversation.Custom')}]`;
+    case TUIChatEngine.TYPES.MSG_LOCATION:
+      return `[${t('TUIConversation.Location')}]`;
+    case TUIChatEngine.TYPES.MSG_FACE:
+      return `[${t('TUIConversation.Emoji')}]`;
+    case TUIChatEngine.TYPES.MSG_MERGER:
+      return `[${t('TUIConversation.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/hooks/useConversation.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+
+const enableCreate = ref(false);
+const enableSearch = ref(false);
+
+export const useConversation = () => {
+  const setEnableCreate = (value: boolean) => {
+    enableCreate.value = value;
+  };
+
+  const setEnableSearch = (value: boolean) => {
+    enableSearch.value = value;
+  };
+
+  return {
+    enableCreate,
+    enableSearch,
+    setEnableCreate,
+    setEnableSearch,
+  };
+};

package/src/components/ConversationList/hooks/useConversationCreate.ts

@@ -0,0 +1,29 @@
+import { GroupType } from '../../../types';
+import {
+  DEFAULT_GROUP_AVATAR_AVCHATROOM,
+  DEFAULT_GROUP_AVATAR_COMMON,
+  DEFAULT_GROUP_AVATAR_MEETING,
+  DEFAULT_GROUP_AVATAR_PUBLIC,
+  DEFAULT_GROUP_AVATAR_WORK,
+} from '../../Avatar';
+
+const getDefaultAvatar = (type: GroupType) => {
+  switch (type) {
+    case GroupType.WORK:
+      return DEFAULT_GROUP_AVATAR_WORK;
+    case GroupType.PUBLIC:
+      return DEFAULT_GROUP_AVATAR_PUBLIC;
+    case GroupType.MEETING:
+      return DEFAULT_GROUP_AVATAR_MEETING;
+    case GroupType.AVCHATROOM:
+      return DEFAULT_GROUP_AVATAR_AVCHATROOM;
+    case GroupType.COMMUNITY:
+      return DEFAULT_GROUP_AVATAR_COMMON;
+    default:
+      return '';
+  }
+};
+
+export const useConversationCreate = () => ({
+  getDefaultAvatar,
+});

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

@@ -0,0 +1,70 @@
+export default {
+  TUIConversation: {
+    // ConversationPlaceHolder
+    'Loading': 'Loading...',
+    'No conversations': 'No conversations',
+    'Load failed': 'Load failed',
+    'Retry': 'Retry',
+
+    // ConversationSearch
+    'You are not in the group, please join the group first': 'You are not in the group, please join the group first',
+
+    // ConversationCreate
+    'Start chat': 'Start Chat',
+    'Start C2C Chat': 'Start C2C Chat',
+    'Start Group Chat': 'Start Group Chat',
+    'Add Participants': 'Add Participants',
+    'Search': 'Search',
+    'New group chat': 'New group chat',
+    'Next': 'Next',
+    'Prev': 'Prev',
+    'Cancel': 'Cancel',
+    'Create': 'Create',
+
+    // ConversationCreateGroupDetail
+    'Group Avatar': 'Group Avatar',
+    '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. ',
+    '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.',
+    '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.',
+    '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.',
+    '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 the documentation for details': 'See the 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',
+
+    // ConversationList
+    'Drafts': 'Drafts',
+    'Image': 'Image',
+    'Audio': 'Audio',
+    'Video': 'Video',
+    'File': 'File',
+    'Custom': 'Custom',
+    'Location': 'Location',
+    'Emoji': 'Emoji',
+    'Chat History': 'Chat History',
+  },
+};

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,70 @@
+export default {
+  TUIConversation: {
+    // ConversationPlaceHolder
+    'Loading': '加载中...',
+    'No conversations': '暂无会话',
+    'Load failed': '加载失败',
+    'Retry': '重试',
+
+    // ConversationSearch
+    'You are not in the group, please join the group first': '你不在群组中，请先加入群组',
+
+    // ConversationCreate
+    'Start chat': '发起会话',
+    'Start C2C Chat': '发起单人会话',
+    'Start Group Chat': '发起多人会话',
+    'Add Participants': '添加成员',
+    'Search': '搜索',
+    'New group chat': '新建群聊',
+    'Next': '下一步',
+    'Prev': '上一步',
+    'Cancel': '取消',
+    'Create': '创建',
+
+    // ConversationCreateGroupDetail
+    'Group Avatar': '群头像',
+    '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发起建群申请后，无需管理员审批即可加入。',
+    'See the documentation for details': '详情请参阅文档。',
+
+    // ConversationActions
+    'Pin': '置顶',
+    'Unpin': '取消置顶',
+    'Mute': '消息免打扰',
+    'Unmute': '取消免打扰',
+    'MarkRead': '标为已读',
+    'MarkUnRead': '标为未读',
+    'Delete': '删除',
+
+    // Details link
+    'Details': '详情',
+
+    // ConversationList
+    'Drafts': '草稿',
+    'Image': '图片',
+    'Audio': '音频',
+    'Video': '视频',
+    'File': '文件',
+    'Custom': '自定义消息',
+    'Location': '位置',
+    'Emoji': '表情',
+    'Chat History': '聊天记录',
+  },
+};