@tencent-rtc/mcp 1.4.6 → 1.6.0-beta.1

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

@@ -1,320 +0,0 @@
-The AI model must adhere to the following **hard constraints**:
-
-1. **Unread Count:** To retrieve the total number of unread messages, you can use the `totalUnRead` field provided by `useConversationListState`.
-
-# Component Overview
-
-The ConversationList component is responsible for rendering the conversation list, including features such as search, create, pin to top, and delete.
-
-## Component composition
-
-The ConversationList component includes the following content:
--**Conversation Search**
-
--**ConversationList UI**: Session list container
-
-- **ConversationPreview**: Displays a single session.
-
-- **ConversationActions**: Session operation
-
-## Basic Usage
-
-The ConversationList component can be used without any required attributes.
-``` typescript
-<template>
-  <UIKitProvider>
-    <ConversationList />
-  </UIKitProvider>
-</template>
-<script setup lang="ts">
-import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-</script>
-```
-
-## Custom component
-
-ConversationList provides various and multidimensional Props APIs, allowing users to customize features, UI, and modules.
-
-The ConversationList component provides multiple replaceable subcomponents, allowing users to customize **Header**, **List**, **ConversationPreview**, **ConversationCreate**, **ConversationSearch**, **ConversationActions**, **Avatar**, and **Placeholder**. Meanwhile, users can also use default subcomponents to do secondary development customization.
-
-### Feature switch
-
-By setting the `enableSearch`, `enableCreate`, and `enableActions` parameters, you can flexibly control the display of conversation search, session creation, and conversation action features in **ConversationList**.
-``` typescript
-<ConversationList :enableSearch="false" />
-```
-``` typescript
-<ConversationList :enableCreate="false" />
-```
-``` typescript
-<ConversationList :enableActions="false" />
-```
-| `enableSearch="false"` | `enableCreate="false"` | `enableActions="false"` |
-| --- | --- | --- |
-|  |  |  |
-
-### Data filtering and sorting
-
-The ConversationList component provides the `filter` and `sort` properties for filtering and sorting the conversation list.
-
-### Filter Conversations
-
-To filter conversation list data, you can pass a filter function to the `filter` property. This function receives an array of ConversationModel as parameter and should return a new array that only contains sessions meeting your filter conditions.
-
-**Example: Show only sessions with unread messages**
-``` typescript
-<template>
-  <UIKitProvider>
-    <ConversationList
-      :filter="(conversationList: ConversationModel[]) =>
-        conversationList.filter(conversation => conversation.unreadCount > 0)" />
-  </UIKitProvider>
-</template>
-<script setup lang="ts">
-import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
-</script>
-```
-
-### Sort Conversations
-
-To sort conversation list data, you can pass a sorting function to the `sort` property. This function receives an array of ConversationModel as parameter and should return a new array with sessions sorted by your sorting criteria.
-
-Sort by latest news time in reverse order
-``` typescript
-<template>
-  <UIKitProvider>
-    <ConversationList
-      :sort="(conversationList: ConversationModel[]) =>
-        conversationList.sort(
-        (a, b) => (+(b?.lastMessage?.lastTime || 0)) - (+(a?.lastMessage?.lastTime || 0)),
-        )" />
-  </UIKitProvider>
-</template>
-<script setup lang="ts">
-import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
-</script>
-```
-
-### Custom actionsConfig
-
-You can customize session menu options via actionsConfig.
-``` typescript
-<template>
-  <UIKitProvider>
-    <ConversationList
-      :actionsConfig="{
-        enablePin: false,
-        onConversationDelete: (conversation: ConversationModel) =>
-        { console.log('Delete conversation success'); },
-        customConversationActions: {
-          'custom-actions-1': {
-            label: 'custom-actions',
-            onClick: (conversation: ConversationModel) => { console.log(conversation); },
-          },
-        },
-     }"/>
-  </UIKitProvider>
-</template>
-<script setup lang="ts">
-import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
-</script>
-```
-
-### Custom Placeholder
-
-`ConversationList` supports displaying custom placeholders in different statuses, including list empty, loading, and loading failed.
-- `PlaceholderEmpty`: Displayed when the list is empty.
-
-- `PlaceholderLoading`: Displayed when loading.
-
-- `PlaceholderError`: Displayed when loading failed.
-
-   **Example: Custom empty list placeholder**
-
-1. Create a custom component **`MyEmptyPlaceholder.vue`**
-
-   ``` typescript
-   <template>
-       <div>
-         Custom PlaceholderEmptyList
-       </div>
-   </template>
-   ```
-2. For use in **`ConversationList`**.
-
-   ``` typescript
-   <template>
-     <UIKitProvider>
-       <ConversationList
-         :PlaceholderEmptyList="MyEmptyPlaceholder" />
-     </UIKitProvider>
-   </template>
-   <script setup lang="ts">
-   import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-   import MyEmptyPlaceholder from "./MyEmptyPlaceholder.vue";
-   </script>
-   ```
-
-### Custom Header
-
-**ConversationListHeader** is responsible for rendering the header part of ConversationList, acting as a wrapping layer to render the default `Search` and `ConversationCreate`. You can customize it by importing `left`, `right` and other attributes. Meanwhile, you can also customize the entire component.
-
-#### Props
-| **Parameter Name** | **Type** | **Default Value** | **Description** |
-| --- | --- | --- | --- |
-| children | Component | - | Header center component of the custom session list.<br>Default imports `<Search>` and `<ConversationCreate>`. |
-| left | Component | - | Left-side component of the custom session list header. |
-| right | Component | - | Right-side component of the custom session list header. |
-| className | String | - | Specify the CSS custom name of the root element class. |
-| style | CSSProperties | - | Specify the custom style of the root element. |
-
-Implement a simplified conversation grouping feature
-
-Filter conversations by All, unread conversation, one-on-one chat session, and group chat. Click different group buttons to execute different filtering rules.
-
-[App.vue]
-``` typescript
-<template>
-  <UIKitProvider>
-    <ConversationList
-      :Header="CustomConversationListHeader"
-      :filter="conversationFilter"
-  </UIKitProvider>
-</template>
-<script setup lang="ts">
-import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
-import CustomConversationListHeader from "./CustomConversationListHeader.vue";
-const conversationFilter = ref<((conversations: ConversationModel[]) => ConversationModel[]) | undefined>(undefined);
-const handleFilterChange = (filter: (conversations: ConversationModel[]) => ConversationModel[]) => {
-  conversationFilter.value = filter;
-};
-provide('setConversationFilter', handleFilterChange);
-</script>
-```
-
-[CustomConversationListHeader.vue]
-``` typescript
-<template>
-  <div class="customHeader">
-    <div class="filterTabs">
-      <button
-        v-for="(label, key) in filterLabels"
-        :key="key"
-        :class="[
-          'filterTab',
-          { ['active']: activeFilter === key }
-        ]"
-        @click="handleFilterClick(key as FilterType)"
-      >
-        {{ label }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, inject } from 'vue';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
-
-type FilterType = 'All' | 'Unread' | 'C2C' | 'Group';
-
-interface Props {
-  children?: any;
-}
-
-defineProps<Props>();
-
-const activeFilter = ref<FilterType>('All');
-
-const filterLabels: Record<FilterType, string> = {
-  Create and bind policy Query instance Reset instance access password
-  Unread
-  C2C: 'One-on-one chat'
-  Group chat
-};
-
-const conversationGroupFilter: Record<string, (conversationList: ConversationModel[]) => ConversationModel[]> = {
-  All: (conversationList: ConversationModel[]) => conversationList,
-  Unread: (conversationList: ConversationModel[]) => conversationList?.filter((item: ConversationModel) => item.unreadCount > 0),
-  C2C: (conversationList: ConversationModel[]) => conversationList?.filter((item: ConversationModel) => item.type === 'C2C'),
-  Group: (conversationList: ConversationModel[]) => conversationList?.filter((item: ConversationModel) => item.type === 'GROUP'),
-};
-
-const setFilter = inject<(filter: any) => void>('setConversationFilter');
-
-const handleFilterClick = (filterType: FilterType) => {
-  activeFilter.value = filterType;
-  const filterFn = conversationGroupFilter[filterType];
-  setFilter?.(filterFn);
-};
-</script>
-
-<style lang="scss">
-.customHeader {
-  padding: 8px 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.filterTabs {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.filterTab {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 16px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 400;
-  color: #3b3d43;
-  transition: all 0.2s ease;
-  outline: none;
-
-  &.active {
-    border: 1px solid #1c66e5;
-    color: #1c66e5;
-    font-weight: 500;
-  }
-}
-</style>
-
-```
-
-## Props
-| **Parameter Name** | **Type** | **Default Value** | **Description** |
-| --- | --- | --- | --- |
-| enableSearch | Boolean | true | Control whether to display the Conversation Search feature. |
-| enableCreate | Boolean | true | Control whether to display the Create Session feature. |
-| enableActions | Boolean | true | Control whether to display the conversation operation feature. |
-| actionsConfig | ConversationActionsConfig | - | Used for custom session operation configuration. |
-| Header | Component | Header | Custom Header component. |
-| List | Component | List | Custom session list component. |
-| Preview | Component | ConversationPreview | Session preview component. |
-| ConversationCreate | Component | ConversationCreate | Custom conversation component. |
-| ConversationSearch | Component | Search | Custom session search component. |
-| ConversationActions | Component | ConversationActions | Custom Conversation Operation Component. |
-| Avatar | Component | Avatar | Custom avatar component. |
-| PlaceholderEmptyList | Component |  | Placeholder element when custom session list is empty. |
-| PlaceholderLoading | Component |  | Placeholder element during custom session list loading. |
-| PlaceholderLoadError | Component |  | Placeholder element for custom session list load error. |
-| filter | (conversationList: ConversationModel[]) => ConversationModel[] | - | Functions for filtering session list. |
-| sort | (conversationList: ConversationModel[]) => ConversationModel[] | - | Functions for sorting session list. |
-| onConversationSelect | (conversation: ConversationModel) => void; | - | Callback function when clicking a session, with the clicked conversation object as parameter. |
-| onBeforeCreateConversation | (params: CreateParams) => CreateParams; | - | Custom action executed before session creation, with parameters required for creating a session. |
-| onConversationCreate | (conversation: ConversationModel)  => void; | - | Callback function after session creation, with the created session object as parameter. |
-| className | String | - | Specify the CSS custom name of the root element class. |
-| style | CSSProperties | - | Specify the custom style of the root element. |

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

@@ -1,213 +0,0 @@
-## 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** |
-| --- | --- |
-|  |  |