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

package/resource/knowledge/chat/preset/react/features/conversation-preview.md

@@ -0,0 +1,101 @@
+`ConversationPreview` is used for previewing session content in the list. The component displays session information, unread count, and provides conversation action feature.
+
+With the aid of atomic information display components, you can freely design and combine your desired `ConversationPreview` layout.
+
+Meanwhile, you can also use the `onConversationSelect` function to define selected session behavior.
+
+### Props
+
+|**Parameter Name**|**Type**|**Default Value**|**Description**|
+|---------|---------|---------|---------|
+|**conversation*****(Required)***|ConversationInfo|-|Required parameter to indicate the currently rendered conversation list item.|
+|isSelected|Boolean|false|Control if the conversation list item UI is in selected status.|
+|enableActions|Boolean|true|Control whether to display the conversation operation feature.|
+|actionsConfig|ConversationActionsConfig|-|For custom session operation configuration.|
+|highlightMatchString|String |-|Conversation list item Title highlights matching keywords, commonly used for Conversation Search results.|
+|Title|String ｜ JSX.Element|ConversationPreviewTitle|Render the title area of the conversation list item.|
+|LastMessageAbstract|String ｜ JSX.Element|ConversationPreviewAbstract|Render the latest message abstract area of the conversation list item.|
+|LastMessageTimestamp|String ｜ JSX.Element|ConversationPreviewTimestamp|Render the latest message timestamp area of the conversation list item.|
+|Unread|String ｜ JSX.Element|ConversationPreviewUnread|Render the unread indicator area of the conversation list item.|
+|ConversationActions|ReactElement|ConversationActions|Render the conversation operations area of the conversation list item.|
+|Avatar|ReactElement|Avatar|Render the avatar area of the conversation list item.|
+|onConversationSelect|(conversation: ConversationInfo) => void;|-|Specify the attributes of receiving callback when selecting a dialogue in the conversation list.|
+|className|String|-|Set a custom name for the root element class in CSS.|
+|style|React.CSSProperties|-|Set custom styles for the root element.|
+
+## Custom Case
+
+### Discord-Like Style
+
+Discord is a popular chat application, similar to Skype or Telegram. The message content in Discord is as shown below:
+
+By customizing the `ConversationPreview` layout, features, and style, we can quickly achieve a Discord-like effect.
+
+【React】
+1. Customize the `ConversationListPreview`
+
+2. Switch theme to dark mode
+
+``` typescript
+import { UIKitProvider, ConversationList, ConversationPreviewUI } from '@tencentcloud/chat-uikit-react';
+
+type ConversationPreviewUIProps = Parameters<typeof ConversationPreviewUI>[0];
+
+const CustomConversationPreview = (props: ConversationPreviewUIProps) => {
+  const { Title } = props;
+  return (
+    <ConversationPreviewUI {...props}>
+      <span> # </span>
+      <span>{Title}</span>
+    </ConversationPreviewUI>
+  );
+};
+
+const App = () => {
+    <UIKitProvider theme={'dark'}>
+      <ConversationList
+        style={{ maxWidth: '300px', height: '600px' }}
+        Preview={CustomConversationPreviewUI}
+       />
+      ...
+    </UIKitProvider>
+}
+```
+
+【CSS】
+``` scss
+.custom-preview-ui {
+  height: 34px;
+  border-radius: 6px;
+  padding: 10px;
+  margin: 0 10px;
+  .custom-preview-ui__tag {
+    margin-right: 10px;
+    font-size: 16px;
+    color: #b3b3b4;
+  }
+  .custom-preview-ui__title {
+    font-size: 14px;
+    color: #b3b3b4;
+  }
+  &.uikit-conversation-preview--active {
+    background-color: #3b3d43;
+    .custom-preview-ui__tag {
+      color: #ffffff;
+    }
+    .custom-preview-ui__title {
+      .uikit-conversation-preview__title {
+        color: #ffffff;
+      }
+    }
+  }
+}
+```
+
+`ConversationListPreview` effect as follows after customization:
+
+|**Before Modification**|**Modified**|
+|---------|---------|
+|||
+
+###

package/resource/knowledge/chat/preset/react/features/conversation-search.md

@@ -0,0 +1,61 @@
+`ConversationSearch` uses the Search component, supporting search functionality for users, groups, and messages. It integrates features such as the search bar, advanced search, and search result display.
+
+## Basic Usage
+``` typescript
+import {
+   UIKitProvider,
+   ConversationList,
+   ConversationSearch,
+} from '@tencentcloud/chat-uikit-react';
+
+import type {
+   ConversationSearchProps,
+   SearchResultItem,
+   SearchType,
+} from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationSearch = (props: ConversationSearchProps) => {
+  const onSelectResult = (data: SearchResultItem, type: SearchType) => {
+    console.warn(`Select Search Result: ${JSON.stringify(data)}, type: ${type}`);
+  };
+  return (
+    <ConversationSearch {...props} onResultItemClick={onSelectResult} />
+  );
+};
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList
+        style={{ maxWidth: '300px', height: '600px' }}
+        ConversationSearch={CustomConversationSearch}
+       />
+     </UIKitProvider>
+  );
+};
+```
+
+## Props
+
+|**Parameter Name**|**Type**|**Default Value**|**Description**|
+|---------|---------|---------|---------|
+|visible|boolean|true|Whether it is visible.|
+|Search|ComponentType<SearchProps>|-|custom search component|
+|variant|VariantType|VariantType.MINI|Search mode: mini, standard, embedded|
+|SearchBar|React.ComponentType<SearchBarProps>|DefaultSearchBar|custom search bar component|
+|SearchResults|React.ComponentType<SearchResultsProps>|DefaultSearchResults|custom search result component|
+|SearchAdvanced|React.ComponentType<SearchAdvancedProps>|DefaultSearchAdvanced|custom advanced search component|
+|SearchResultsPresearch|React.ComponentType|-|search placeholder component|
+|SearchResultsLoading|React.ComponentType|-|loading placeholder component|
+|SearchResultsEmpty|React.ComponentType|-|empty result placeholder component|
+|SearchResultItem|React.ComponentType<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 style class name|
+|style|React.CSSProperties|-|custom style|
+|onKeywordChange|(keyword: string) => void|-|searchsearch keywords change callback']|
+|onSearchComplete|(results: Map<SearchType, SearchResult>) => void|-|search completed callback|
+|onResultItemClick|(data: SearchResultItem, type: SearchType) => void|-|search result click callback|
+|onError|(error: Error) => void|-|error callback|
+
+###