tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    ConversationSearch

    Last updated: 2024-09-29 16:55:14
    Download PDF
      ConversationSearch is mainly used to search the conversation list, consisting of ConversationSearchInput and ConversationSearchResult.

      Basic Usage

      Used in ConversationList
      Used independently
      import { UIKitProvider, ConversationList, ConversationSearch, IConversationSearchProps } from '@tencentcloud/chat-uikit-react';
      import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
      
      const CustomConversationSearch = (props: IConversationSearchProps) => {
        const onSelectResult = (conversation: IConversationModel) => {
          console.warn(`Select Search Result: ${conversation.conversationID}`);
        };
        return (
          <ConversationSearch {...props} onSelectResult={onSelectResult} />
        );
      };
      
      const App = () => {
        return (
          <UIKitProvider>
            <ConversationList
              style={{ maxWidth: '300px', height: '600px' }}
              ConversationSearch={CustomConversationSearch}
             />
           </UIKitProvider>
        );
      };
      import { UIKitProvider, ConversationListProvider, useConversationList, ConversationSearch } from '@tencentcloud/chat-uikit-react';


      const CustomConversationSearch = () => {
        const { conversationList } = useConversationList();
        return (
          <ConversationSearch
            style={{ maxWidth: '300px', maxHeight: '500px' }}
            conversationList={conversationList}
          />
        );
      };
      
      const App = () => {
        return (
          <UIKitProvider>
            <ConversationListProvider>
              <CustomConversationSearch />
            </ConversationListProvider>
          </UIKitProvider>
        );
      };

      Props

      Parameter Name
      Type
      Default Value
      Indication
      conversationList
      (Required)
      -
      Required parameter for the target conversation list to search. When used in <ConversationList>, the value of conversationList obtained from Context is passed as the default target search list.
      Avatar
      ReactElement
      Avatar
      Avatar component in the search results from Definition.
      ResultPreview
      ReactElement
      ConversationPreview
      Single result preview component in the search results list from Definition.
      ConversationSearchInput
      ReactElement
      ConversationSearchInput
      Search input box component from Definition.
      ConversationSearchResult
      ReactElement
      ConversationSearchResult
      Search results component from Definition.
      searchFn
      (searchValue: string, conversationList: IConversationModel[]) => IConversationModel[]
      Specify a function from Definition search algorithm. This function receives the search value and conversation list as parameters and returns the search results.
      onSearchChange
      (searchValue: string) => void
      -
      Specify a function to be called when the search input changes. This function receives the current search value as a parameter.
      onFocus
      (event: React.FocusEvent<HTMLInputElement>) => void
      -
      Specify a function to be called when the search input gains focus.
      onBlur
      (event: React.FocusEvent<HTMLInputElement>) => void
      -
      Specify a function to be called when the search input loses focus.
      onSelectResult
      (conversation: IConversationModel) => void
      -
      Specify a function to be called when a search result is selected. This function receives the selected conversation as a parameter.
      visible
      Boolean
      true
      Specify whether the search component is visible.
      className
      String
      -
      Specify the Custom Class Name for the search component.
      style
      React.CSSProperties
      -
      Custom CSS style.

      Search rules

      Default search rules

      When searchFn is not provided, searchFn will use the default value defaultSearchFn as the search rule.
      defaultSearchFn defaults to searching and matching the conversation title in the conversation list, case insensitive. defaultSearchFn Definition is as follows:
      function defaultSearchFn(searchValue: string, conversationList: IConversationModel[]) {
        if (!searchValue || conversationList?.length === 0) return [];
        return conversationList.filter(item => item.getShowName().toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
      }

      Custom Search Rules

      You can implement different search rules by passing searchFn props. Here is an example of searching based on conversationID information in the conversation list:
      function customSearchFn(searchValue: string, conversationList: IConversationModel[]) {
        if (!searchValue || conversationList?.length === 0) return [];
        return conversationList.filter(item => item.conversationID.includes(searchValue));
      }
      
      <ConversationSearch {...props} searchFn={customSearchFn} />

      Event Handling

      ConversationSearch provides a rich set of props to help you customize responses to various search states.
      onSearchChange is called when the search input changes.
      onFocus is called when the search input gains focus.
      onBlur is called when the search input gains focus.
      onSelectResult is called when a search result is selected.

      Custom Component

      ConversationSearchInput

      Parameter Name
      Type
      Default Value
      Indication
      placeholder
      String
      -
      Input box placeholder text.
      clearable
      Boolean
      false
      Whether the input content can be cleared.
      prefix
      ReactNode
      <Icon type={IconTypes.SEARCH} height={16} width={16} />
      Input box prefix content.
      value
      String
      -
      Value of the input box.
      onChange
      (event: React.ChangeEvent<HTMLInputElement>) => void
      -
      Specify a function to be called when the search input changes.
      onFocus
      (event: React.FocusEvent<HTMLInputElement>) => void
      -
      Specify a function to be called when the search input gains focus.
      onBlur
      (event: React.FocusEvent<HTMLInputElement>) => void
      -
      Specify a function to be called when the search input loses focus.
      className
      String
      -
      Custom Class Name.
      Below is a new definition of a placeholder and prefix example:
      const CustomConversationSearchInput = (props: IConversationSearchInputProps) => {
        return <ConversationSearchInput {...props} placeholder="this is a custom placeholder" prefix="?" />;
      };


      const CustomConversationSearch = (props: IConversationSearchProps) => {
        return <ConversationSearch {...props} ConversationSearchInput={CustomConversationSearchInput} />;
      };
      before
      after
      
      
      
      
      
      

      ConversationSearchResult

      Parameter Name
      Type
      Default Value
      Description
      visible
      Boolean
      false
      Specify whether to display the search results component.
      searchResult
      -
      Search results.
      searchValue
      String
      -
      Search input value.
      ResultPreview
      ReactElement
      ConversationPreview
      From the Definition ResultPreview component.
      Avatar
      ReactElement
      Avatar
      From the Definition Avatar component.
      PlaceholderNoResult
      ReactNode
      <PlaceHolder type={PlaceHolderTypes.NO_RESULTS} searchString={searchValue} />
      Placeholder component from Definition for no results.
      onSelectResult
      (conversation: IConversationModel) => void
      -
      Callback function when ResultPreview is clicked.
      className
      String
      -
      Custom Class Name.
      style
      React.CSSProperties
      -
      Custom Definition CSS style.
      Here is an example of a new no search results interface PlaceholderNoResult:
      const CustomConversationSearchResult = (props: IConversationSearchResultProps) => {
        const CustomPlaceholder = (
          <div style={{ display: 'flex', flex: '1', justifyContent: 'center', alignItems: 'center' }}>
            <img src="https://web.sdk.qcloud.com/im/assets/emoji/emoji_76@2x.png" alt="tears" />
          </div>
        );
        return <ConversationSearchResult {...props} PlaceholderNoResult={CustomPlaceholder} />;
      };
      
      const CustomConversationSearch = (props: IConversationSearchProps) => {
        return <ConversationSearch {...props} ConversationSearchResult={CustomConversationSearchResult} />;
      };
      before
      after
      
      
      
      
      
      

      ResultPreview

      ResultPreview parameters are used to display a single search result in ConversationSearchResult.
      When no value is passed, ResultPreview will default to displaying the ConversationPreview component as the single search result component.
      You can go to ConversationPreview to view more Custom Tutorials.

      

      
      
      Contact Us

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

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy