@tencent-rtc/mcp 1.3.9 → 1.4.0

package/resource/doc/chatkit/vue/components/conversation-preview.md

@@ -0,0 +1,213 @@
+## Overview
+
+The ConversationPreview component is used to preview a single conversation in the conversation list. It is responsible for displaying conversation information, unread count, and providing conversation operation functionality.
+
+With this component, you can freely design and combine the ConversationPreview layout you expect. Additionally, you can customize the behavior when selecting a conversation through the `@select-conversation` event.
+
+## Custom Usage
+
+You can use the `Preview` prop of `ConversationList` to customize the preview item for each conversation in the conversation list. If the `Preview` prop is not specified, the system will use the `ConversationPreviewUI` component by default.
+``` typescript
+<template>
+  <div class="custom-preview">
+    <div class="content">
+      <h4>Custom Preview</h4>
+      <p>{{ conversation?.getShowName() }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+interface Props {
+  conversation?: ConversationModel;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+</script>
+```
+``` typescript
+<template>
+  <ConversationList :Preview="CustomConversationPreview" />
+</template>
+
+<script setup lang="ts">
+import { ConversationList } from '@tencentcloud/chat-uikit-vue3';
+import CustomConversationPreview from './CustomConversationPreview.vue';
+</script>
+```
+
+## Props
+
+### ConversationPreviewProps
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| **conversation***(Required)* | ConversationModel | - | Required parameter, identifies the current rendered conversation list item |
+| isSelected | boolean | false | Controls whether the conversation list item UI is in selected state |
+| enableActions | boolean | true | Controls whether conversation actions are displayed |
+| actionsConfig | ConversationActionsConfig | - | Used to customize conversation actions configuration |
+| highlightMatchString | string | - | Highlight match keyword for conversation list item title, commonly used for conversation search result highlighting |
+| Preview | Component | ConversationPreviewUI | Custom preview component |
+| Avatar | Component | Avatar | Renders conversation list item avatar area |
+| ConversationActions | Component | ConversationActions | Renders conversation list item actions area |
+| className | string | - | CSS custom class name for root element |
+| style | CSSProperties | - | Custom style for root element |
+
+### ConversationPreviewUIProps
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| **conversation***(Required)* | ConversationModel | - | Required parameter, identifies the current rendered conversation list item |
+| isSelected | boolean | false | Controls whether the conversation list item UI is in selected state |
+| enableActions | boolean | true | Controls whether conversation actions are displayed |
+| actionsConfig | ConversationActionsConfig | - | Used to customize conversation actions configuration |
+| highlightMatchString | string | - | Highlight match keyword for conversation list item title |
+| Title | Component | ConversationPreviewTitle | Renders conversation list item title area |
+| LastMessageAbstract | Component | ConversationPreviewAbstract | Renders conversation list item last message abstract area |
+| LastMessageTimestamp | Component | ConversationPreviewTimestamp | Renders conversation list item last message timestamp area |
+| Unread | Component | ConversationPreviewUnread | Renders conversation list item unread badge area |
+| ConversationActions | Component | ConversationActions | Renders conversation list item actions area |
+| Avatar | Component | Avatar | Renders conversation list item avatar area |
+| className | string | - | CSS custom class name for root element |
+| style | CSSProperties | - | Custom style for root element |
+
+## Events
+| Event Name | Parameters | Description |
+| --- | --- | --- |
+| select-conversation | (conversation: ConversationModel) | Event triggered when selecting a conversation in the conversation list |
+
+## Example: Discord-like Style Customization
+
+Discord is a popular chat application, similar to Skype or Telegram. The chat content in Discord is shown in the image below:
+
+By customizing the layout, functionality, and styles of `ConversationPreview`, we can quickly achieve a Discord-like effect.
+``` java
+<template>
+  <div
+    :class="[
+      'discord-preview-ui',
+      {
+        'conversationPreview--active': activeConversation?.conversationID === props.conversation.conversationID,
+      }
+    ]"
+    @click="handleSelectConversation"
+  >
+    <label class="discord-preview-ui__tag">
+      #
+    </label>
+    <span class="discord-preview-ui__title">{{ conversation?.getShowName() }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useConversationListState } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+const { setActiveConversation, activeConversation } = useConversationListState();
+
+interface Props {
+  conversation: ConversationModel;
+}
+
+const emit = defineEmits<{
+  selectConversation: [conversation: ConversationModel];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const handleSelectConversation = () => {
+  setActiveConversation(props.conversation.conversationID);
+  emit('selectConversation', props.conversation);
+};
+</script>
+<style scoped>
+.discord-style-app {
+  background-color: #2f3136;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.discord-conversation-list {
+  background-color: #2f3136;
+}
+
+.discord-preview-ui {
+  height: 34px;
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 1px 8px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  position: relative;
+}
+
+.discord-preview-ui__tag {
+  margin-right: 6px;
+  font-size: 16px;
+  color: #8e9297;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.discord-preview-ui__title {
+  font-size: 16px;
+  color: #8e9297;
+  font-weight: 500;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.discord-preview-ui:hover {
+  background-color: #393c43;
+}
+
+.discord-preview-ui:hover .discord-preview-ui__tag,
+.discord-preview-ui:hover .discord-preview-ui__title {
+  color: #dcddde;
+}
+
+.conversationPreview--active {
+  background-color: #404249 !important;
+}
+
+.conversationPreview--active .discord-preview-ui__tag,
+.conversationPreview--active .discord-preview-ui__title {
+  color: #ffffff !important;
+}
+
+.discord-preview-ui::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 8px;
+  background-color: #ffffff;
+  border-radius: 0 4px 4px 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+</style>
+
+```
+``` typescript
+<template>
+  <ConversationList :Preview="CustomConversationPreview" />
+</template>
+
+<script setup lang="ts">
+import { ConversationList } from '@tencentcloud/chat-uikit-vue3';
+import CustomConversationPreview from './CustomConversationPreview.vue';
+</script>
+```
+
+The customized `ConversationListPreview` effect is as follows:
+| **Before** | **After** |
+| --- | --- |
+|  |  |

package/resource/doc/chatkit/vue/components/conversation-search.md

@@ -0,0 +1,50 @@
+ConversationSearch uses the **Search** component, supporting search for users, groups, and messages. It integrates search box, advanced search, and search results display features.
+
+## Basic Usage
+``` typescript
+<template>
+  <ConversationSearch {...props} @ResultItemClick={onSelectResult} />
+</template>
+<script setup lang="ts">
+import { ConversationSearch, SearchType } from '@tencentcloud/chat-uikit-vue3';
+import type { SearchResultItem } from '@tencentcloud/chat-uikit-vue3';
+const props = defineProps<ConversationSearchProps>();
+
+const onSelectResult = (data: SearchResultItem, type: SearchType) => {
+  console.warn(`Select Search Result: ${JSON.stringify(data)}, type: ${type}`);
+};
+</script>
+```
+``` typescript
+<template>
+  <UIKitProvider>
+    <ConversationList ConversationSearch={CustomConversationSearch} />
+  </UIKitProvider>
+</template>
+<script setup lang="ts">
+import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
+import CustomConversationSearch from "./CustomConversationSearch.vue";
+</script>
+```
+
+## Props
+| **Parameter** | **Type** | **Default** | **Description** |
+| --- | --- | --- | --- |
+| visible | boolean | true | Whether visible |
+| Search | ComponentType<SearchProps> | - | Custom search component |
+| variant | VariantType | VariantType.MINI | Search mode:<br>- mini: Mini<br>- standard: Standard<br>- embedded: Embedded |
+| SearchBar | Component<SearchBarProps> | DefaultSearchBar | Custom search bar component |
+| SearchResults | Component<SearchResultsProps> | DefaultSearchResults | Custom search results component |
+| SearchAdvanced | Component<SearchAdvancedProps> | DefaultSearchAdvanced | Custom advanced search component |
+| SearchResultsPresearch | Component | - | Pre-search placeholder component |
+| SearchResultsLoading | Component | - | Loading placeholder component |
+| SearchResultsEmpty | Component | - | Empty results placeholder component |
+| SearchResultItem | Component<ResultItemProps> | - | Custom search result item component |
+| debounceTime | number | 300 | Search debounce time (ms) |
+| autoFocus | boolean | false | Whether to auto-focus the search box |
+| className | string | - | Custom class name |
+| style | CSSProperties | - | Custom style |
+| onKeywordChange | (keyword: string) => void | - | Search keyword change callback |
+| onSearchComplete | (results: Map<SearchType, SearchResult>) => void | - | Search complete callback |
+| onResultItemClick | (data: SearchResultItem, type: SearchType) => void | - | Search result item click callback |
+| onError | (error: Error) => void | - | Search error callback |