tencent cloud

Feedback

Web & H5 & Uniapp(Vue)

Last updated: 2024-07-10 16:26:41

    Feature Experience

    
    
    

    
    
    

    UI-Included Integration

    Quickly Integrating Message Cloud Search

    Web&H5 Vue2&Vue3
    Uniapp Vue2&Vue3

    Step 1. Integrate TUIKit

    If @tencentcloud/chat-uikit-vue ≥ 2.0.0 is not integrated, follow the Vue2 & Vue3 TUIKit Quick Integration Guide for integration.

    Step 2. Activate the cloud search plugin through the console

    Note:
    Each plugin can be tried for 7 days for free once. The service will be discontinued after the trial. Therefore, you need to purchase the plugin in advance. During the trial, only the content of messages generated after the cloud search feature is enabled can be searched, and historical messages cannot be searched. After you purchase the plugin, historical messages will be automatically synchronized and become searchable.

    Step 3. Search for your first message

    After completing Vue2 & Vue3 TUIKit Quick Integration Guide - Step 6. Send your first message, search for the message you just sent.

    Step 1. Integrate TUIKit

    If @tencentcloud/chat-uikit-uniapp ≥ 2.0.6 is not integrated, follow the Uniapp TUIKit Quick Integration Guide for integration.

    Step 2. Activate the cloud search plugin through the console

    Note:
    Each plugin can be tried for 7 days for free once. The service will be discontinued after the trial. Therefore, you need to purchase the plugin in advance. During the trial, only the content of messages generated after the cloud search feature is enabled can be searched, and historical messages cannot be searched. After you purchase the plugin, historical messages will be automatically synchronized and become searchable.

    Step 3. Search for your first message

    After completing Uniapp TUIKit Quick Integration Guide - Step 6. Send your first message, search for the message you just sent.

    Independently Introducing Message Cloud Search

    Note:
    In the step Quickly Integrating Message Cloud Search above, all features of message cloud search are introduced by default, and therefore do not need to be introduced independently.
    If you want to independently introduce the <TUISearch> for message cloud search, see the following guide.
    Web&H5 Vue2&Vue3
    Uniapp Vue2&Vue3

    Prerequisites

    If @tencentcloud/chat-uikit-vue ≥ 2.0.0 is not integrated, follow the Vue2 & Vue3 TUIKit Quick Integration Guide for integration.

    Introducing <TUISearch>

    On the .vue page where you need the message cloud search feature, introduce <TUISearch>.
    <TUISearch> Parameter Description
    Parameter Name
    Type
    Description
    searchType
    String
    global: global search (default)
    conversation: search in conversation
    <TUISearch> Effect Display
    <TUISearch searchType="global" />
    <TUISearch searchType="conversation" />
    
    
    
    
    
    
    Using TUISearch
    import { TUISearch } from "@tencentcloud/chat-uikit-vue";
    // Global search
    <TUISearch searchType="global" />
    // Search in conversation
    <TUISearch searchType="conversation" />
    Deleting the TUISearch Introduced by Default
    TUIKit comes with <TUISearch> integrated by default. If you prefer not to use the default integration method, you can comment out <TUISearch> in TUIKit/index.vue.
    Uniapp TUISearch supports two integration methods: component and page.

    Prerequisites

    If @tencentcloud/chat-uikit-uniapp ≥ 2.0.6 is not integrated, follow the Uniapp TUIKit Quick Integration Guide for integration.
    Component-based Introduction
    Page-based Introduction
    On the .vue page where you need the message cloud search feature, introduce <TUISearch>.
    <TUISearch> Parameter Description
    Parameter Name
    Type
    Description
    searchType
    String
    global: global search
    conversation: search in conversation (default)
    <TUISearch> Effect Display
    <TUISearch searchType="global" />
    <TUISearch searchType="conversation" />
    
    
    Using TUISearch
    // The following is just an example path. Replace it with the path of your project.
    import { TUISearch } from "/TUIKit/components/TUISearch/index.vue";
    // Global search
    <TUISearch searchType="global" />
    // Search in conversation
    <TUISearch searchType="conversation" />
    Deleting the TUISearch Introduced by Default
    TUIKit comes with <TUISearch> integrated by default. If you prefer not to use the default integration method, you can comment out <TUISearch> in TUIKit/components/TUIConversation/index.vue.
    Adding a TUISearch Page in pages.json
    {
    "pages": [
    ...,
    {
    "path": "TUIKit/components/TUISearch/index",
    "style": {
    "navigationBarTitleText": "Chat records"
    }
    }
    ],
    ...
    }
    Navigating to the TUISearch Page
    uni.navigateTo({
    url: "/TUIKit/components/TUISearch/index",
    });

    Advanced Guide

    Adding Search Message Types

    Original global search message type list
    Global search message type list after addition
    
    
    
    
    
    
    Directory location: src/TUIKit/components/TUISearch/search-type-list.ts
    searchMessageTypeList contains all the definitions in the Search Message Types tab. To add search message types not defined in searchMessageTypeList, follow the structure below to add them in searchMessageTypeList:
    [keyName: string]: {
    key: string; // Specifies the key of the search message type, which must be unique.
    label: string; // Specifies the label for rendering the search message type.
    value: Array<string>; // Specifies the actual search list for the search message type.
    };
    // For example, to search for custom messages
    export const searchMessageTypeList = {
    ...
    customMessage: {
    key: "customMessage", // Specifies the key of the search message type, which must be unique.
    label: "Custom", // Specifies the label for rendering the search message type.
    value: [TUIChatEngine.TYPES.MSG_CUSTOM], // Specifies the actual search list for the search message type.
    }
    };
    Due to TUIKit's use of i18next for internationalization, if you want to claim a new label, add the corresponding international entries in src/TUIKit/locales/zh_cn/TUISearch.ts and src/TUIKit/locales/en/TUISearch.ts for translation.
    To add a type defined in searchMessageTypeList to the global search message type list or search in conversation message type list, you just need to add its key to globalSearchTypeKeys or conversationSearchTypeKeys.
    // For example, to apply the newly defined customMessage to the global search message type list
    export const globalSearchTypeKeys = [..., "customMessage"];
    // For example, to apply the newly defined customMessage to the search in conversation message type list
    export const conversationSearchTypeKeys = [..., "customMessage"];

    Adding a Time Range for Message Cloud Search

    Original global search time range list
    Global search time range list after addition
    
    
    
    
    
    
    Directory location: src/TUIKit/components/TUISearch/search-time-list.ts
    searchMessageTimeList contains all definitions in the Search Time Range tab. To add search time range types not defined in searchMessageTimeList, follow the structure below to add them in searchMessageTimeList:
    [keyName: string]: {
    key: string; // Specifies the key of the message search time range, which must be unique.
    label: string; // Specifies the label for rendering the message search time range.
    value: {
    timePosition: number; // Specifies the start position for message search time range. The default value is 0, indicating searching from the current time.
    timePeriod: number; // Specifies the time range to search backward from timePosition.
    };
    };
    // For example, to search for messages in the time range of last 2 days
    export const searchMessageTimeList = {
    ...
    twoDay: {
    key: "twoDay", // Specifies the key of the message search time range, which must be unique.
    label: "Two days", // Specifies the label for rendering the message search time range.
    value: {
    timePosition: 0, // Specifies the start position for message search time range. The default value is 0, indicating searching from the current time.
    timePeriod: 2 * oneDay; // Specifies the time range to search backward from timePosition.
    },
    },
    };
    Due to TUIKit's use of i18next for internationalization, if you want to claim a new label, add the corresponding international entries in src/TUIKit/locales/zh_cn/TUISearch.ts and src/TUIKit/locales/en/TUISearch.ts for translation.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support