Search

import { StreamChat } from "stream-chat";
import { Chat, ChannelList, WithComponents } from "stream-chat-react";
import { Search } from "stream-chat-react/experimental";

const Component = () => (
  <Chat client={client}>
    <WithComponents overrides={{ Search }}>
      <ChannelList
        // Enable search in ChannelList
        showChannelSearch={true}
        // Optional: Additional search props
        additionalChannelSearchProps={{
          // Clear search on click outside
          clearSearchOnClickOutside: true,
          // Custom placeholder
          placeholder: "Search channels, messages and users...",
          // Custom debounce time for search
          debounceMs: 500,
        }}
      />
    </WithComponents>
  </Chat>
);

import { useMemo } from "react";
import {
  BaseSearchSource,
  ChannelSearchSource,
  MessageSearchSource,
  SearchController,
  SearchSourceOptions,
  UserSearchSource,
} from "stream-chat";
import { Chat, useCreateChatClient, WithComponents } from "stream-chat-react";
import {
  DefaultSearchResultItems,
  Search,
  SearchSourceResultList,
} from "stream-chat-react/experimental";

// declare the type of item that is stored in the array by the search source
type X = { x: string };

// declare the custom search source
class XSearchSource extends BaseSearchSource<X> {
  // search source type is necessary
  readonly type = "X";

  constructor(options?: SearchSourceOptions) {
    super(options);
  }

  // the query method will always receive the searched string
  protected async query(searchQuery: string) {
    return searchQuery.length > 1
      ? { items: [{ x: "hi" }] }
      : { items: [{ x: "no" }] };
  }

  // we can optionally manipulate the retrieved page of items
  protected filterQueryResults(items: X[]): X[] {
    return items;
  }
}

// we need a custom component to display the search source items
const XSearchResultItem = ({ item }: { item: X }) => <div>{item.x}</div>;

// and we tell the component that renders the resulting list, what components it can use to display the items
const customSearchResultItems = {
  ...DefaultSearchResultItems,
  X: XSearchResultItem,
};

const CustomSearchResultList = () => (
  <SearchSourceResultList SearchResultItems={customSearchResultItems} />
);

const App = () => {
  const chatClient = useCreateChatClient({
    apiKey,
    tokenOrProvider: userToken,
    userData: { id: userId },
  });

  // create a memoized instance of SearchController
  const searchController = useMemo(
    () =>
      chatClient
        ? new SearchController({
            sources: [
              new XSearchSource(),
              new ChannelSearchSource(chatClient),
              new UserSearchSource(chatClient),
              new MessageSearchSource(chatClient),
            ],
          })
        : undefined,
    [chatClient],
  );

  if (!chatClient) return <>Loading...</>;

  return (
    <Chat client={chatClient} searchController={searchController}>
      <WithComponents
        overrides={{
          Search,
          SearchSourceResultList: CustomSearchResultList,
        }}
      >
        {/*  ....*/}
      </WithComponents>
    </Chat>
  );
};

const { searchController } = useChatContext();

const usersSearchSource = searchController.getSource("users");
usersSearchSource.filters = {
  ...usersSearchSource.filters,
  myCustomField: "some-value",
};

import {
  ChannelFilters,
  ChannelSearchSource,
  ChannelSearchSourceFilterBuilderContext,
  FilterBuilderGenerators,
} from "stream-chat";
import { useSearchContext, useStateStore } from "stream-chat-react";

const contextSelector = ({
  archived,
}: ChannelSearchSourceFilterBuilderContext<{ archived: boolean }>) => ({
  archived,
});

const filterGeneratorEnablementSelector = (
  generators: FilterBuilderGenerators<
    ChannelFilters,
    ChannelSearchSourceFilterBuilderContext<{
      archived: boolean;
    }>
  >,
) => ({
  custom_loading_places_country_codes:
    generators.custom_loading_places_country_codes.enabled,
});

const SearchSourceFilterButton = () => {
  // activates individual search sources
};

export const SearchResultsHeader = () => {
  const { searchController } = useSearchContext();
  const channelSearchSource = (searchController.getSource("channels") ??
    {}) as ChannelSearchSource<{ archived: boolean }>;
  const { archived } = useStateStore(
    channelSearchSource.filterBuilder?.context,
    contextSelector,
  );
  const { custom_loading_places_country_codes } = useStateStore(
    channelSearchSource.filterBuilder?.filterConfig,
    filterGeneratorEnablementSelector,
  );

  return (
    <div
      className="str-chat__search-results-header"
      data-testid="search-results-header"
    >
      <div
        className="str-chat__search-results-header__filter-source-buttons"
        data-testid="filter-source-buttons"
      >
        {searchController.sources.map((source) => (
          <SearchSourceFilterButton
            key={`search-source-filter-button-${source.type}`}
            source={source}
          />
        ))}
        <label>
          Archived
          <input
            onClick={() =>
              channelSearchSource?.filterBuilder.updateContext({
                archived: !archived,
              })
            }
            type="checkbox"
            value={archived.toString()}
          />
        </label>
        <label>
          custom_loading_places_country_codes
          <input
            onClick={() =>
              custom_loading_places_country_codes
                ? channelSearchSource?.filterBuilder.disableFilter(
                    "custom_loading_places_country_codes",
                  )
                : channelSearchSource?.filterBuilder.enableFilter(
                    "custom_loading_places_country_codes",
                  )
            }
            type="checkbox"
            value={custom_loading_places_country_codes.toString()}
          />
        </label>
      </div>
    </div>
  );
};

import {
  SearchSourceResults,
  SearchResultsHeader,
  SearchResultsPresearch,
  useSearchContext,
  useStateStore,
} from "stream-chat-react";
import type { SearchControllerState } from "stream-chat";

const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
  activeSources: nextValue.sources.filter((s) => s.isActive),
  isActive: nextValue.isActive,
  searchQuery: nextValue.searchQuery,
});

export const SearchResults = () => {
  const { searchController } = useSearchContext();
  const { activeSources, isActive, searchQuery } = useStateStore(
    searchController.state,
    searchControllerStateSelector,
  );

  return isActive ? (
    <div>
      <SearchResultsHeader />
      {!searchQuery ? (
        <SearchResultsPresearch activeSources={activeSources} />
      ) : (
        activeSources.map((source) => (
          <SearchSourceResults key={source.type} searchSource={source} />
        ))
      )}
    </div>
  ) : null;
};

import {
  useSearchSourceResultsContext,
  useStateStore,
} from "stream-chat-react";
import type { SearchSourceState } from "stream-chat";

const searchSourceStateSelector = (value: SearchSourceState) => ({
  hasMore: value.hasMore,
  isLoading: value.isLoading,
});

const Component = () => {
  const { searchSource } = useSearchSourceResultsContext();
  const { hasMore, isLoading } = useStateStore(
    searchSource.state,
    searchSourceStateSelector,
  );

  return (
    <div>
      {isLoading ? (
        <div>Is loading</div>
      ) : !hasMore ? (
        <div>All results loaded</div>
      ) : null}
    </div>
  );
};