> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-auto-generate-llmstxt.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Content Discovery & Search

> Comprehensive search and discovery components for finding communities, users, and content across your social platform

<Info>
  **Key Benefit**: Provide powerful search and discovery capabilities that help users find relevant communities, content, and connections through intuitive interfaces and smart categorization.
</Info>

## Feature Overview

The Content Discovery & Search UIKit provides comprehensive components for building robust search and exploration experiences. From global search functionality to category-based browsing and notification management, these components enable users to discover and connect with the content and communities that matter to them.

<CardGroup cols={2}>
  <Card title="Global Search" icon="magnifying-glass">
    **Universal Discovery**

    * Cross-platform search functionality
    * Real-time search suggestions
    * Multi-content type results
    * Search history and suggestions
  </Card>

  <Card title="Community Discovery" icon="compass">
    **Organized Exploration**

    * Category-based browsing
    * Community recommendations
    * Search result filtering
    * My communities management
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Advanced Search" icon="filter">
    **Targeted Results**

    * Community and user search
    * Search result customization
    * Filter and sort options
    * Result relevance ranking
  </Card>

  <Card title="Notifications" icon="bell">
    **Stay Connected**

    * Notification tray management
    * Real-time updates
    * Notification categorization
    * User engagement tracking
  </Card>
</CardGroup>

## Implementation Guide

<Tabs>
  <Tab title="Global Search Page">
    **Comprehensive search across communities and users**

    The Global Search Page offers robust and intuitive search functionality, allowing users to search for and discover communities and users that match their interests and needs.

    ### Features

    | Feature                 | Description                                                                     |
    | ----------------------- | ------------------------------------------------------------------------------- |
    | Top Search Bar          | Type search keyword and it will search across list of all communities and users |
    | Community search result | Displays filtered communities, and clicks to open Community Profile Page        |
    | User search result      | Displays filtered users, and clicks to open User Profile Page                   |

    ### Customization Options

    | Config ID                       | Type | Description                  |
    | ------------------------------- | ---- | ---------------------------- |
    | `social_global_search_page/*/*` | Page | You can customize page theme |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let socialGlobalSearchPage = AmitySocialGlobalSearchPage()
      let viewController = AmitySwiftUIHostingController(rootView: socialGlobalSearchPage)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeSocialGlobalSearchPage() {
          AmitySocialGlobalSearchPage()
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmitySocialGlobalSearchPage } from '@amityco/ui-kit';

      const SampleAmitySocialGlobalSearchPage = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmitySocialGlobalSearchPage />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmitySocialGlobalSearchPage,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmitySocialGlobalSearchPage />
      </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      Widget socialGlobalSearchPage() {
        return AmitySocialGlobalSearchPage();
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmitySocialGlobalSearchPageBehavior: AmitySocialGlobalSearchPageBehavior {
          override init() {
              super.init()
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setSocialGlobalSearchPageBehaviour() {
          let customBehavior = CustomAmitySocialGlobalSearchPageBehavior()
          AmityUIKit4Manager.behaviour.socialGlobalSearchPageBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class CustomSocialGlobalSearchPageBehavior : AmitySocialGlobalSearchPageBehavior() {

      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehaviour = CustomSocialGlobalSearchPageBehavior()
          AmityUIKit4Manager.behavior.socialGlobalSearchPageBehavior = customBehaviour
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmitySocialGlobalSearchPage } from '@amityco/ui-kit';

      const SampleAmitySocialGlobalSearchPage = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmitySocialGlobalSearchPage />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmitySocialGlobalSearchPage,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmitySocialGlobalSearchPage />
      </AmityUiKitProvider>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Top Search Bar">
    **Quick search component for any page**

    The Top Search Bar provides seamless search functionality, located at the top of the page for easy access with advanced filtering capabilities.

    ### Features

    | Feature | Description                                 |
    | ------- | ------------------------------------------- |
    | Search  | Type keyword to search and cancel searching |

    ### Customization Options

    | Config ID                                                | Type      | Description                       |
    | -------------------------------------------------------- | --------- | --------------------------------- |
    | `social_global_search_page/top_search_bar/*`             | Component | You can customize component theme |
    | `social_global_search_page/top_search_bar/search_icon`   | Element   | You can customize icon            |
    | `social_global_search_page/top_search_bar/clear_button`  | Element   | You can customize icon            |
    | `social_global_search_page/top_search_bar/cancel_button` | Element   | You can customize text            |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let viewModel = AmityGlobalSearchViewModel()
      let topSearchBarComponent = AmityTopSearchBarComponent(viewModel: viewModel)
      let viewController = AmitySwiftUIHostingController(rootView: topSearchBarComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeTopSearchBarComponent(
          viewModel: AmityGlobalSearchViewModel,
      ) {
          AmityTopSearchBarComponent(
              viewModel = viewModel
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmityTopSearchBarComponent } from '@amityco/ui-kit';

      const SampleAmityTopSearchBarComponent = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmityTopSearchBarComponent
              search={() => {}} // put your set search value here
            />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmityTopSearchBarComponent,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityTopSearchBarComponent
          setSearchValue={() => {}}
          searchType={TabName.Communities}
        />
      </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      Widget topSearchBarComponent() {
        TextEditingController textController = TextEditingController();
        return AmityTopSearchBarComponent(
          textcontroller: textController,
        );
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Search Results">
    **Specialized search result displays**

    Components for displaying filtered communities and users with clear layouts and interaction patterns.

    ### Community Search Result Component

    Displays a list of filtered communities that match search keywords.

    | Feature          | Description                                      |
    | ---------------- | ------------------------------------------------ |
    | Communities list | A list of communities matching to search keyword |

    ### Customization Options

    | Config ID                                                                    | Type      | Description                       |
    | ---------------------------------------------------------------------------- | --------- | --------------------------------- |
    | `social_global_search_page/community_search_result/*`                        | Component | You can customize component theme |
    | `social_global_search_page/community_search_result/community_private_badge`  | Element   | You can customize icon            |
    | `social_global_search_page/community_search_result/community_official_badge` | Element   | You can customize icon            |

    <CodeGroup>
      ```swift iOS theme={null}
      let viewModel = AmityGlobalSearchViewModel(searchType: .community)
      let communitySerachResultComponent = AmityCommunitySearchResultComponent(viewModel: viewModel)
      let viewController = AmitySwiftUIHostingController(rootView: communitySerachResultComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunitySearchResultComponent(
          viewModel: AmityGlobalSearchViewModel,
      ) {
          AmityCommunitySearchResultComponent(
              viewModel = viewModel,
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmityCommunitySearchResultComponent } from '@amityco/ui-kit';

      const SampleAmityCommunitySearchResultComponent = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmityCommunitySearchResultComponent
              isLoading={} //put your loading state type boolean
              communityCollection={} //put your community collection type array
              onLoadMore={() => {}} //put your load more function
            />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmityCommunitySearchResultComponent,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityCommunitySearchResultComponent
          searchResult={[{}] as (Amity.Community & Amity.User)[]}
          onNextPage={() => {}}
          searchType={TabName.Communities}
        />
      </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      Widget communitySearchResultComponent({
        required ScrollController scrollController,
      }) {
        AmityGlobalSearchViewModel viewModel = AmityGlobalSearchViewModel(
          searchType: AmityGlobalSearchType.community,
          scrollController: scrollController,
        );

        return AmityCommunitySearchResultComponent(
          viewModel: viewModel,
        );
      }
      ```
    </CodeGroup>

    ### User Search Result Component

    Displays a list of filtered users that match search criteria.

    | Feature    | Description                                |
    | ---------- | ------------------------------------------ |
    | Users list | A list of users matching to search keyword |

    ### Customization Options

    | Config ID                                        | Type      | Description                       |
    | ------------------------------------------------ | --------- | --------------------------------- |
    | `social_global_search_page/user_search_result/*` | Component | You can customize component theme |

    <CodeGroup>
      ```swift iOS theme={null}
      let viewModel = AmityGlobalSearchViewModel(searchType: .user)
      let userSearchResultComponent = AmityUserSearchResultComponent(viewModel: viewModel)
      let viewController = AmitySwiftUIHostingController(rootView: userSearchResultComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeUserSearchResultComponent(
          viewModel: AmityGlobalSearchViewModel,
      ) {
          AmityUserSearchResultComponent(
              viewModel = viewModel,
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmityUserSearchResultComponent } from '@amityco/ui-kit';

      const SampleAmityUserSearchResultComponent = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmityUserSearchResultComponent
              userCollection={} //put your user collection object
              isLoading={} //put your loading state
              onLoadMore={() => {}} //put your load more function
            />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmityUserSearchResultComponent,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityUserSearchResultComponent
          searchResult={[{}] as (Amity.Community & Amity.User)[]}
          onNextPage={() => {}}
        />
      </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      Widget userSearchResultComponent() {
        ScrollController scrollController = ScrollController();

        AmityGlobalSearchViewModel viewModel = AmityGlobalSearchViewModel(
          searchType: AmityGlobalSearchType.user,
          scrollController: scrollController,
        );

        return AmityUserSearchResultComponent(
          viewModel: viewModel,
        );
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    When users click on search results, they are seamlessly navigated to the appropriate detail pages.

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmityCommunitySearchResultComponentBehavior: AmityCommunitySearchResultComponentBehavior {
          override init() {
              super.init()
          }
          
          override func goToCommunityProfilePage(context: AmityCommunitySearchResultComponentBehavior.Context) {
              // Custom implementation for navigatin to Community Profile Page
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setCommunitySearchResultComponentBehaviour() {
          let customBehavior = CustomAmityCommunitySearchResultComponentBehavior()
          AmityUIKit4Manager.behaviour.communitySearchResultComponentBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class CustomCommunitySearchResultComponentBehavior :
          AmityCommunitySearchResultComponentBehavior() {

          override fun goToCommunityProfilePage(context: Context, community: AmityCommunity) {
              // custom implementation for navigating to Community Profile Page
          }
      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehaviour = CustomCommunitySearchResultComponentBehavior()
          AmityUIKit4Manager.behavior.communitySearchResultComponentBehavior = customBehaviour
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmityCommunitySearchResultComponent } from '@amityco/ui-kit';

      const SampleAmityCommunitySearchResultComponent = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmityCommunitySearchResultComponent
              isLoading={} //put your loading state type boolean
              communityCollection={} //put your community collection type array
              onLoadMore={() => {}} //put your load more function
            />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmityCommunitySearchResultComponent,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityCommunitySearchResultComponent
          searchResult={[{}] as (Amity.Community & Amity.User)[]}
          onNextPage={() => {}}
          searchType={TabName.Communities}
        />
      </AmityUiKitProvider>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="My Communities Search">
    **Personal community management**

    Specialized search functionality for users to find and manage their own communities with enhanced filtering options.

    ### Features

    | Feature                 | Description                                                                     |
    | ----------------------- | ------------------------------------------------------------------------------- |
    | Search Bar              | Type search keyword and it will search across list of all communities and users |
    | Community search result | Displays filtered communities, and clicks to open Community Profile Page        |

    ### Customization Options

    | Config ID                                               | Type    | Description                  |
    | ------------------------------------------------------- | ------- | ---------------------------- |
    | `my_communities_search_page/*/*`                        | Page    | You can customize page theme |
    | `my_communities_search_page/*/community_private_badge`  | Element | You can customize icon       |
    | `my_communities_search_page/*/community_official_badge` | Element | You can customize icon       |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let myCommunitySearchPage = AmityMyCommunitiesSearchPage()
      let viewController = AmitySwiftUIHostingController(rootView: myCommunitySearchPage)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeMyCommunitiesSearchPage() {
          AmityMyCommunitiesSearchPage()
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmityMyCommunitiesSearchPage } from '@amityco/ui-kit';

      const SampleAmityMyCommunitiesSearchPage = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmityMyCommunitiesSearchPage />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmityMyCommunitiesSearchPage,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityMyCommunitiesSearchPage />
      </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      Widget myCommunitySearchResultComponent() {
        return AmityMyCommunitiesSearchPage();
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmityMyCommunitiesSearchPageBehavior: AmityMyCommunitiesSearchPageBehavior {
          override init() {
              super.init()
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setMyCommunitiesSearchPageBehaviour() {
          let customBehavior = AmityMyCommunitiesSearchPageBehavior()
          AmityUIKit4Manager.behaviour.myCommunitiesSearchPageBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class CustomMyCommunitiesSearchPageBehavior : AmityMyCommunitiesSearchPageBehavior() {
          override fun goToCommunityProfilePage(context: Context, community: AmityCommunity) {
              // custom implementation for navigating to Community Profile Page
          }
      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehaviour = CustomMyCommunitiesSearchPageBehavior()
          AmityUIKit4Manager.behavior.myCommunitiesSearchPageBehavior = customBehaviour
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmityMyCommunitiesSearchPage } from '@amityco/ui-kit';

      const SampleAmityMyCommunitiesSearchPage = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmityMyCommunitiesSearchPage />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import {
        AmityMyCommunitiesSearchPage,
        AmityUiKitProvider,
      } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityMyCommunitiesSearchPage />
      </AmityUiKitProvider>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Categories & Discovery">
    **Organized content exploration**

    Components for category-based community discovery and organized content browsing.

    ### All Categories Page

    Provides users with an organized list of community categories for easy exploration and discovery.

    | Feature              | Description                                                       |
    | -------------------- | ----------------------------------------------------------------- |
    | Community Categories | Displays list of community categories with support for pagination |

    ### Customization Options

    | Config ID                 | Type      | Description                       |
    | ------------------------- | --------- | --------------------------------- |
    | `all_categories_page/*/*` | Component | You can customize component theme |

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityAllCategoriesPage()
      let viewController = AmitySwiftUIHostingController(rootView: page)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeAllCategoriesPage() {
          AmityAllCategoriesPage()
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityAllCategoriesPage } from '@amityco/ui-kit';

      const SampleAmityAllCategoriesPage = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
          >
            <AmityAllCategoriesPage />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget allCategoriesPage() {
        return AmityAllCategoriesPage();
      }
      ```
    </CodeGroup>

    ### Communities By Category Page

    Offers a quick way to view all communities within a selected category for efficient exploration.

    | Feature             | Description                                                                        |
    | ------------------- | ---------------------------------------------------------------------------------- |
    | List of communities | Displays list of communities under a particular categories with pagination support |

    ### Customization Options

    | Config ID                          | Type      | Description                       |
    | ---------------------------------- | --------- | --------------------------------- |
    | `communities_by_category_page/*/*` | Component | You can customize component theme |

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityCommunitiesByCategoryPage(categoryId: "<category-id>")
      let viewController = AmitySwiftUIHostingController(rootView: page)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunitiesByCatgoryPage(
          categoryId: String
      ) {
          AmityCommunitiesByCategoryPage(categoryId = categoryId)
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityCommunitiesByCategoryPage } from '@amityco/ui-kit';

      const SampleAmityCommunitiesByCategoryPage = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
          >
            <AmityCommunitiesByCategoryPage categoryId="categoryId" />
          </AmityUiKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget communitiesByCategoryPage(AmityCommunityCategory category) {
        return AmityCommunitiesByCategoryPage(category: category);
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Notification Tray">
    **Centralized notification management**

    The Notification Tray enhances user engagement by providing a comprehensive history of notifications with automatic grouping and organization.

    ### Features

    The Notification Tray automatically creates and groups notification records for each user, ensuring they stay informed about relevant activities within their communities and encouraging deeper platform engagement.

    #### Event Creation Item

    When an event is created in a community, its members receive a notification tray item. The audience depends on the community type — events in **public** communities notify the whole network, while events in **private** communities notify community members only. Tapping the item opens the event detail page.

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityNotificationTrayPage()
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeNotificationTrayPage(modifier: Modifier = Modifier) {
          AmityNotificationTrayPage(modifier = modifier)
      }

      fun startAnActivity(
          context: Context,
      ) {
          val intent = AmityNotificationTrayPageActivity.newIntent(
              context = context,
          )
          context.startActivity(intent)
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityNotificationTrayPage } from '@amityco/ui-kit';

      const SampleAmityNotificationTrayPage = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
          >
            <AmityNotificationTrayPage />
          </AmityUiKitProvider>
        );
      };
      ```
    </CodeGroup>

    ### Customization Options

    | Config ID                                          | Type     | Description                                             |
    | -------------------------------------------------- | -------- | ------------------------------------------------------- |
    | `notification_tray_page/*/*`                       | Page     | You can customize page theme                            |
    | `notification_tray_page/*/back_button`             | Element  | You can customize image                                 |
    | `notification_tray_page/*/title`                   | Element  | You can customize text                                  |
    | `notification_tray_page/*/empty_notification`      | Element  | You can customize image and text                        |
    | `notification_tray_page/*/no_internet_connection`  | Element  | You can customize image and text                        |
    | `notification_tray_page/*/event_notification_item` | ListItem | Customize the Event Creation tray item                  |
    | `notification_tray_page/*/event_type_badge`        | Element  | Customize the event-type chip (`In-person` / `Virtual`) |

    ### Navigation Behavior

    The behavior can be customized to handle navigation to post detail, community profile, user profile, and event detail pages differently.

    <CodeGroup>
      ```swift iOS theme={null}
      // Default Behavior
      let behaviour = AmityNotificationTrayPageBehavior()

      // Custom Implementation
      class CustomBehaviour: AmityNotificationTrayPageBehavior {
          
          override func goToPostDetailPage(context: AmityNotificationTrayPageBehavior.Context) {
              // Custom implementation
          }
          
          override func goToCommunityProfilePage(context: AmityNotificationTrayPageBehavior.Context) {
              // Custom implementation
          }

          override func goToEventDetailPage(context: AmityNotificationTrayPageBehavior.Context) {
              // Custom implementation — invoked when the user taps an Event Creation item
          }
      }

      // Usage
      AmityUIKit4Manager.behaviour.notificationTrayPageBehavior = CustomBehaviour()
      ```

      ```kotlin Android theme={null}
      class CustomNotificationTrayPageBehavior : AmityNotificationTrayPageBehavior() {

          override fun goToPostDetailPage(
              context: Context,
              postId: String,
              category: AmityPostCategory,
              commentId: String?,
              parentId: String?,
          ) {
              super.goToPostDetailPage(context, postId, category, commentId, parentId)
          }

          override fun goToCommunityProfilePage(
              context: Context,
              communityId: String,
          ) {
              super.goToCommunityProfilePage(context, communityId)
          }

          override fun goToEventDetailPage(
              context: Context,
              eventId: String,
          ) {
              super.goToEventDetailPage(context, eventId)
          }

      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehaviour = CustomNotificationTrayPageBehavior()
          AmityUIKit4Manager.behavior.notificationTrayPageBehavior = customBehaviour
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityNotificationTrayPage } from '@amityco/ui-kit';

      const SampleAmityNotificationTrayPage = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityNotificationTrayPageBehavior: {
                goToPostDetailPage: ({ postId, hideTarget, category, commentId, parentId }) => {
                  console.log('goToPostDetailPage', postId, hideTarget, category, commentId, parentId);
                },
                goToCommunityProfilePage: ({ communityId }) => {
                  console.log('goToCommunityProfilePage', communityId);
                },
                goToUserProfilePage: ({ userId }) => {
                  console.log('goToUserProfilePage', userId);
                },
                goToEventDetailPage: ({ eventId }) => {
                  console.log('goToEventDetailPage', eventId);
                },
              },
            }}
          >
            <AmityNotificationTrayPage />
          </AmityUIKitProvider>
        );
      };
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Component Management Strategies

<AccordionGroup>
  <Accordion title="Search Architecture" icon="magnifying-glass">
    **Designing comprehensive search experiences**

    Plan your search implementation by combining global search with specialized components like top search bars and category browsing. Consider user search patterns and how users move from general exploration to specific discovery.
  </Accordion>

  <Accordion title="Content Discovery Flow" icon="compass">
    **Optimizing discovery pathways**

    Design clear pathways between different discovery methods (search, categories, recommendations). Ensure users can easily navigate between global search, category browsing, and their personal communities.
  </Accordion>

  <Accordion title="Notification Strategy" icon="bell">
    **Managing user engagement**

    Implement thoughtful notification policies that keep users engaged without overwhelming them. Use notification grouping and smart categorization to provide relevant information at the right time.
  </Accordion>
</AccordionGroup>

## Implementation Strategy

<AccordionGroup>
  <Accordion title="Progressive Search Implementation" icon="chart-line">
    **Building comprehensive search features**

    Start with basic global search functionality, then add specialized search components for communities and users. Implement category-based discovery and notification management as your platform grows and user needs become more sophisticated.
  </Accordion>

  <Accordion title="User Experience Flow" icon="arrow-progress">
    **Designing intuitive discovery paths**

    Plan search and discovery flows that guide users from general exploration to specific content discovery. Design clear navigation patterns between different search contexts and ensure smooth transitions between discovery and engagement.
  </Accordion>

  <Accordion title="Performance Considerations" icon="gauge">
    **Optimizing search experiences**

    Implement efficient search result caching, progressive loading for large result sets, and appropriate debouncing for real-time search suggestions. Consider indexing strategies and result relevance algorithms for optimal user experience.
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Search UX Design" icon="user-check">
    **Creating effective search interfaces**

    Design clear search flows with intuitive filtering and sorting options. Provide helpful empty states, search suggestions, and clear result categorization. Ensure search interfaces are accessible and provide feedback for user actions.
  </Accordion>

  <Accordion title="Content Discovery Strategy" icon="compass">
    **Facilitating content exploration**

    Balance algorithmic recommendations with user-controlled discovery. Provide multiple pathways for content discovery (search, categories, recommendations) and help users understand why certain content is being suggested.
  </Accordion>

  <Accordion title="Notification Management" icon="bell-slash">
    **Respecting user attention**

    Implement thoughtful notification policies that respect user preferences and attention. Provide granular notification controls, smart batching for related notifications, and clear visual hierarchy for different notification types.
  </Accordion>
</AccordionGroup>

## Related Features

<CardGroup cols={3}>
  <Card title="Social Feeds" href="/uikit/components/social/feeds" icon="newspaper">
    **Content Streams**
    Social feeds and content discovery components
  </Card>

  <Card title="Communities" href="/uikit/components/social/communities" icon="users">
    **Community Features**
    Community creation and management tools
  </Card>

  <Card title="Chat Components" href="/uikit/components/chat" icon="messages">
    **Messaging Features**
    Real-time chat and communication tools
  </Card>
</CardGroup>

<Tip>
  **Implementation Strategy**: Begin with AmityGlobalSearchPage for comprehensive search functionality, then add specialized components like AmityTopSearchBar and category browsing based on your users' discovery patterns and engagement metrics.
</Tip>