@amityco/ui-kit-open-source 4.0.0 → 4.1.0

package/dist/index.d.mts

@@ -1,48 +1,341 @@
-import React, { ReactNode } from 'react';
-import { PostContentType } from '@amityco/ts-sdk';
-import * as styled_components from 'styled-components';
+import React, { ReactNode, RefObject } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
+import * as styled_components from 'styled-components';
 
-type CustomComponentName = 'Avatar' | 'CategoryHeader' | 'CategorySelector' | 'Chat' | 'ChatDetails' | 'ChatHeader' | 'ChatItem' | 'Comment' | 'CommentComposerBar' | 'CommentLikeButton' | 'CommunityCreatedModel' | 'CommunityCreationModal' | 'CommunityForm' | 'CommunityItem' | 'CommunityMembers' | 'CommunityName' | 'CommunityPermissions' | 'EmptyFeed' | 'EngagementBar' | 'Feed' | 'FeedHeaderTabs' | 'File' | 'Image' | 'ImageGallery' | 'Images' | 'Layout' | 'MediaGallery' | 'MenuTab' | 'Message' | 'MessageComposerBar' | 'MessageList' | 'Post' | 'PostLikeButton' | 'PostTargetSelector' | 'ProfileSettings' | 'ProfileSettingsTabs' | 'RecentChat' | 'SideNavBar' | 'SocialSearch' | 'Tabs' | 'UICategoryCard' | 'UICommunityCard' | 'UICommunityHeader' | 'UICommunityInfo' | 'UIEngagementBar' | 'UIPostHeader' | 'UITextContent' | 'UITrendingItem' | 'UIUserInfo' | 'UserChip' | 'UserHeader' | 'UserSelector';
-type CustomComponentType = Partial<Record<CustomComponentName, <TProps>(props: TProps) => React.ReactElement<TProps>>>;
+type AmityReactionType = {
+    name: string;
+    image: string;
+};
 
-type PostRendererProps = {
-    childrenPosts?: Amity.Post[];
+type ThemeValue = {
+    primary_color: string;
+    secondary_color: string;
+    secondary_shade1_color: string;
+    secondary_shade2_color: string;
+    secondary_shade3_color: string;
+    secondary_shade4_color: string;
+    base_color: string;
+    base_shade1_color: string;
+    base_shade2_color: string;
+    base_shade3_color: string;
+    base_shade4_color: string;
+    base_shade5_color: string;
+    alert_color: string;
+    background_color: string;
+    base_inverse_color: string;
+};
+type Theme = {
+    light: ThemeValue;
+    dark: ThemeValue;
+};
+type ThemeConfiguration = {
+    preferred_theme?: 'light' | 'dark' | 'default';
+    theme?: {
+        light?: Partial<Theme['light']>;
+        dark?: Partial<Theme['dark']>;
+    };
+};
+interface Config {
+    preferred_theme?: 'light' | 'dark' | 'default';
+    theme?: {
+        light?: Theme['light'];
+        dark?: Theme['dark'];
+    };
+    excludes?: string[];
+    message_reactions?: AmityReactionType[];
+    customizations?: {
+        [key: string]: IconConfiguration & TextConfiguration & ThemeConfiguration & CustomConfiguration;
+    };
+}
+type IconConfiguration = {
+    icon?: string;
+    image?: string;
+};
+type TextConfiguration = {
+    text?: string;
+};
+type CustomConfiguration = {
+    [key: string]: string | undefined | boolean | Array<string> | number | Record<string, unknown>;
+};
+
+declare enum AmityPostContentComponentStyle {
+    FEED = "feed",
+    DETAIL = "detail"
+}
+declare enum AmityPostCategory {
+    GENERAL = "general",
+    ANNOUNCEMENT = "announcement",
+    PIN = "pin",
+    PIN_AND_ANNOUNCEMENT = "pin_and_announcement"
+}
+interface PostContentProps {
+    post: Amity.Post;
+    onClick?: () => void;
+    onPostDeleted?: (post: Amity.Post) => void;
+    style: AmityPostContentComponentStyle;
+    category: AmityPostCategory;
+    hideMenu?: boolean;
+    hideTarget?: boolean;
+    pageId?: string;
+    disabledContent?: boolean;
+    isGlobalFeaturePost?: boolean;
     className?: string;
-    currentUserId?: string;
-    handleDeletePost?: (postId: string) => void;
-    handleReportPost?: () => void;
-    handleUnreportPost?: () => void;
-    handleApprovePost?: () => void;
-    handleDeclinePost?: () => void;
-    handleClosePoll?: () => void;
-    poll?: Amity.Poll | null;
-    isPollClosed?: boolean;
-    hidePostTarget?: boolean;
-    isFlaggedByMe?: boolean;
-    readonly?: boolean;
-    post?: Amity.Post;
-    user?: Amity.User | null;
-    userRoles?: string[];
-    loading?: boolean;
-    avatarFileUrl?: string;
+}
+declare const PostContent: ({ pageId, post: initialPost, onClick, onPostDeleted, category, hideMenu, hideTarget, style, disabledContent, isGlobalFeaturePost, className, }: PostContentProps) => React.JSX.Element;
+
+type MemberCommunitySetup = {
+    userId: string;
+    displayName: string;
 };
-type PostRendererConfigType = Record<ValueOf<typeof PostContentType> | string, (props: PostRendererProps) => ReactNode>;
+declare enum AmityCommunitySetupPageMode {
+    CREATE = "create",
+    EDIT = "edit"
+}
 
-interface UiKitProviderProps {
+declare enum Mode {
+    CREATE = "create",
+    EDIT = "edit"
+}
+interface AmityPostComposerEditOptions {
+    mode: Mode.EDIT;
+    post: Amity.Post;
+}
+interface AmityPostComposerCreateOptions {
+    mode: Mode.CREATE;
+    targetId: string | null;
+    targetType: 'community' | 'user';
+    community?: Amity.Community;
+}
+type PostComposerPageProps = AmityPostComposerCreateOptions | AmityPostComposerEditOptions;
+declare function PostComposerPage(props: PostComposerPageProps): React.JSX.Element;
+
+declare const enum UserRelationshipPageTabs {
+    FOLLOWING = "following",
+    FOLLOWER = "followers"
+}
+
+interface PageBehavior {
+    AmityStoryViewPageBehavior?: {
+        onCloseAction?(): void;
+        hyperLinkAction?(context: Record<string, unknown>): void;
+    };
+    AmityDraftStoryPageBehavior?: {
+        closeAction?(): void;
+    };
+    onClickHyperLink?(): void;
+    AmitySocialHomePageBehavior?: Record<string, unknown>;
+    AmityGlobalFeedComponentBehavior?: {
+        goToPostDetailPage?: (context: {
+            postId: string;
+            hideTarget?: boolean;
+            category?: AmityPostCategory;
+        }) => void;
+        goToViewStoryPage?: (context: {
+            targetId: string;
+            targetType: Amity.StoryTargetType;
+            storyType: 'communityFeed' | 'globalFeed';
+            targetIds?: string[];
+        }) => void;
+        goToCreateCommunityPage?(context: {
+            mode: AmityCommunitySetupPageMode;
+        }): void;
+    };
+    AmityPostDetailPageBehavior?: Record<string, unknown>;
+    AmityPostContentComponentBehavior?: {
+        goToCommunityProfilePage?: (context: {
+            communityId: string;
+        }) => void;
+        goToUserProfilePage?: (context: {
+            userId: string;
+        }) => void;
+        goToPostComposerPage?: (context: {
+            mode: Mode.EDIT;
+            post: Amity.Post;
+        }) => void;
+    };
+    AmitySocialGlobalSearchPageBehavior?: Record<string, unknown>;
+    AmityCommunitySearchResultComponentBehavior?: {
+        goToCommunityProfilePage?: (context: {
+            communityId: string;
+        }) => void;
+    };
+    AmityUserSearchResultComponentBehavior?: {
+        goToUserProfilePage?: (context: {
+            userId: string;
+        }) => void;
+    };
+    AmityCreatePostMenuComponentBehavior?: {
+        goToSelectPostTargetPage?(): void;
+        goToStoryTargetSelectionPage?(): void;
+        goToSelectPollPostTargetPage?(): void;
+    };
+    AmityPostTargetSelectionPage?: {
+        goToPostComposerPage?: (context: {
+            mode: Mode.CREATE;
+            targetId: string | null;
+            targetType: 'community' | 'user';
+            community?: Amity.Community;
+        }) => void;
+    };
+    AmityStoryTargetSelectionPage?: {
+        goToStoryCreationPage?(context: {
+            targetId: string | null;
+            targetType: Amity.StoryTargetType;
+            mediaType: {
+                type: 'image';
+                url: string;
+            } | {
+                type: 'video';
+                url: string;
+            };
+            storyType: 'communityFeed' | 'globalFeed';
+        }): void;
+    };
+    AmityPostComposerPageBehavior?: {
+        goToSocialHomePage?(): void;
+    };
+    AmityCommunityProfilePageBehavior?: {
+        goToPostComposerPage?(context: {
+            mode: Mode.CREATE | Mode.EDIT;
+            targetId: string | null;
+            targetType: 'community' | 'user';
+            community?: Amity.Community;
+            post?: Amity.Post;
+        }): void;
+        goToPostDetailPage?(context: {
+            postId: string;
+            hideTarget?: boolean;
+            category?: AmityPostCategory;
+        }): void;
+        goToStoryCreationPage?(context: {
+            targetId: string | null;
+            targetType: Amity.StoryTargetType;
+            mediaType: {
+                type: 'image';
+                url: string;
+            } | {
+                type: 'video';
+                url: string;
+            };
+            storyType: 'communityFeed' | 'globalFeed';
+        }): void;
+        goToCommunitySettingPage?(context: {
+            community: Amity.Community;
+        }): void;
+        goToEditCommunityPage?(context: {
+            mode: AmityCommunitySetupPageMode;
+            community: Amity.Community;
+        }): void;
+        goToPendingPostPage?(context: {
+            communityId: string;
+        }): void;
+        goToMembershipPage?(context: {
+            community: Amity.Community;
+        }): void;
+        goToPollPostComposerPage?(context: {
+            targetId: string | null;
+            targetType: 'community' | 'user';
+        }): void;
+    };
+    AmitySocialHomeTopNavigationComponentBehavior?: {
+        goToCreateCommunityPage?(context: {
+            mode: AmityCommunitySetupPageMode;
+        }): void;
+    };
+    AmityCommunitySetupPageBehavior?: {
+        goToAddCategoryPage?(context: {
+            categories?: Amity.Category[];
+        }): void;
+        goToAddMemberPage?(context: {
+            members?: MemberCommunitySetup[];
+            communityId?: string;
+            onAddedAction?: (userId: string[]) => void;
+        }): void;
+    };
+    AmityCommunitySettingPageBehavior?: {
+        goToEditCommunityPage?(context: {
+            mode: AmityCommunitySetupPageMode;
+            community: Amity.Community;
+        }): void;
+        goToMembershipPage?(context: {
+            community: Amity.Community;
+        }): void;
+        goToPostPermissionPage?(context: {
+            community: Amity.Community;
+        }): void;
+        goToStorySettingPage?(context: {
+            community: Amity.Community;
+        }): void;
+        goToSocialHomePage?(): void;
+    };
+    AmityCommunityMembershipPage?: {
+        goToAddMemberPage?(context: {
+            members?: MemberCommunitySetup[];
+            communityId?: string;
+            onAddedAction?: (userId: string[]) => void;
+        }): void;
+        goToUserProfilePage?: (context: {
+            userId: string;
+        }) => void;
+    };
+    AmityUserFeedComponentBehavior?: {
+        goToPostDetailPage?(context: {
+            postId: string;
+        }): void;
+    };
+    AmityUserProfilePageBehavior?: {
+        goToEditUserPage?(context: {
+            userId: string;
+        }): void;
+        goToBlockedUsersPage?(): void;
+        goToPostComposerPage?(context: {
+            userId: string;
+        }): void;
+    };
+    AmityUserProfileHeaderComponentBehavior: {
+        goToUserRelationshipPage?(context: {
+            userId: string;
+            selectedTab: UserRelationshipPageTabs;
+        }): void;
+        goToPendingFollowRequestPage?(): void;
+    };
+    AmityUserRelationshipPageBehavior: {
+        goToUserProfilePage?(context: {
+            userId: string;
+        }): void;
+    };
+    AmityUserPendingFollowRequestsPageBehavior: {
+        goToUserProfilePage?(context: {
+            userId: string;
+        }): void;
+    };
+    AmityBlockedUsersPageBehavior: {
+        goToUserProfilePage?(context: {
+            userId: string;
+        }): void;
+    };
+    AmityPollTargetSelectionPageBehavior?: {
+        goToPollPostComposerPage?(context: {
+            targetId: string | null;
+            targetType: 'community' | 'user';
+        }): void;
+    };
+}
+
+type AmityUIKitConfig = Config;
+interface AmityUIKitProviderProps {
     apiKey: string;
     apiRegion: string;
     apiEndpoint?: {
         http?: string;
         mqtt?: string;
     };
-    authToken?: string;
     userId: string;
-    displayName: string;
-    customComponents?: CustomComponentType;
-    postRendererConfig?: PostRendererConfigType;
+    displayName?: string;
+    postRendererConfig?: any;
     theme?: Record<string, unknown>;
     children?: React.ReactNode;
+    socialCommunityCreationButtonVisible?: boolean;
     actionHandlers?: {
         onChangePage?: (data: {
             type: string;
@@ -58,16 +351,14 @@ interface UiKitProviderProps {
         onEditUser?: (userId: string) => void;
         onMessageUser?: (userId: string) => void;
     };
-    pageBehavior?: {
-        closeAction?: () => void;
-        hyperLinkAction?: () => void;
-    };
-    socialCommunityCreationButtonVisible?: boolean;
+    pageBehavior?: PageBehavior;
     onConnectionStatusChange?: (state: Amity.SessionStates) => void;
     onConnected?: () => void;
     onDisconnected?: () => void;
+    getAuthToken?: () => Promise<string>;
+    configs?: AmityUIKitConfig;
 }
-declare const UiKitProvider: ({ apiKey, apiRegion, apiEndpoint, authToken, userId, displayName, customComponents, postRendererConfig, theme, children, socialCommunityCreationButtonVisible, actionHandlers, pageBehavior, onConnectionStatusChange, onDisconnected, }: UiKitProviderProps) => React.JSX.Element;
+declare const AmityUIKitProvider: React.FC<AmityUIKitProviderProps>;
 
 interface FeedProps {
     className?: string;
@@ -82,7 +373,7 @@ interface FeedProps {
 }
 declare const _default$2: React.MemoExoticComponent<(props: FeedProps) => React.JSX.Element>;
 
-declare const Community: () => React.JSX.Element;
+declare const Application: () => React.JSX.Element;
 
 type PartialChannel = Pick<Amity.Channel, 'channelId' | 'type'>;
 declare const ChatApplication: ({ membershipFilter, defaultChannelId, onMemberSelect, onChannelSelect, onAddNewChannel, onEditChatMember, }: {
@@ -111,9 +402,24 @@ declare const enum PageTypes {
     CommunityFeed = "communityfeed",
     CommunityEdit = "communityedit",
     UserEdit = "useredit",
-    ViewStory = "viewstory"
+    ViewStory = "viewstory",
+    DraftPage = "draftpage"
 }
 
+type AmityStoryMediaType$1 = {
+    type: 'image';
+    url: string;
+} | {
+    type: 'video';
+    url: string;
+};
+type AmityDraftStoryPageProps = {
+    targetId: string;
+    targetType: Amity.StoryTargetType;
+    mediaType?: AmityStoryMediaType$1;
+};
+declare const AmityDraftStoryPage: (props: AmityDraftStoryPageProps) => React.JSX.Element;
+
 type Page = {
     type: PageTypes.Explore | PageTypes.NewsFeed;
     communityId?: string;
@@ -136,8 +442,17 @@ type Page = {
 } | {
     type: PageTypes.ViewStory;
     storyId: string;
-    targetId?: string;
+    targetId: string;
     communityId?: string;
+    targetIds: string[];
+    storyType: 'communityFeed' | 'globalFeed';
+} | {
+    type: PageTypes.DraftPage;
+    communityId?: string;
+    mediaType: AmityStoryMediaType$1;
+    targetId: string;
+    targetType: Amity.StoryTargetType;
+    storyType: 'communityFeed' | 'globalFeed';
 };
 type ContextValue = {
     page: Page;
@@ -145,16 +460,18 @@ type ContextValue = {
     onClickCategory: (categoryId: string) => void;
     onClickCommunity: (communityId: string) => void;
     onClickUser: (userId: string, pageType?: string) => void;
-    onClickStory: (storyId: string) => void;
+    onClickStory: (storyId: string, storyType: 'communityFeed' | 'globalFeed', targetId?: string[]) => void;
     onCommunityCreated: (communityId: string) => void;
     onEditCommunity: (communityId: string, tab?: string) => void;
     onEditUser: (userId: string) => void;
     onMessageUser: (userId: string) => void;
     onBack: () => void;
+    goToDraftStoryPage: (targetId: string, targetType: string, mediaType: AmityStoryMediaType$1, storyType: 'communityFeed' | 'globalFeed') => void;
     setNavigationBlocker?: (params: {
         title: ReactNode;
         content: ReactNode;
         okText: ReactNode;
+        onOk?: () => void;
     } | null | undefined) => void;
 };
 declare const useNavigation: () => ContextValue;
@@ -177,10 +494,10 @@ interface AvatarProps {
 }
 declare const _default$1: (props: AvatarProps) => React.JSX.Element;
 
-declare const PostContainer: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<{
+declare const PostContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<{
     className?: string | undefined;
     children?: ReactNode;
-}, never>> & Omit<({ className, ...props }: {
+}, never>> & string & Omit<({ className, ...props }: {
     className?: string | undefined;
     children?: ReactNode;
 }) => React.JSX.Element, keyof React.Component<any, {}, any>>;
@@ -190,6 +507,7 @@ type Mentioned = {
     length: number;
     index: number;
     type: string;
+    displayName: string;
 };
 
 interface EngagementBarProps {
@@ -213,56 +531,370 @@ declare const useSDK: () => {
     userRoles: string[];
 };
 
-type DraftStoryProps = {
-    pageId: 'create_story_page';
-    file: File;
-    creatorAvatar: string;
-    onCreateStory: (file: File, imageMode: 'fit' | 'fill', metadata?: Amity.Metadata | undefined, items?: Amity.StoryItem[] | undefined) => void;
-    onDiscardStory: () => void;
+/**
+ * Interface representing the session handler for the Amity SDK.
+ */
+interface SessionHandler {
+    /**
+     * Handles the access token renewal during the login process.
+     * @param renewal - The access token renewal handler.
+     */
+    sessionWillRenewAccessToken(renewal: Amity.AccessTokenRenewal): void;
+}
+/**
+ * Manages the Amity SDK client and authentication state.
+ */
+declare class AmityUIKitManager {
+    private static instance;
+    private client;
+    private isConnected;
+    private stateChangeHandler;
+    private disconnectedHandler;
+    private onConnectionStatusChange?;
+    private onConnected?;
+    private onDisconnected?;
+    /**
+     * Private constructor to prevent direct instantiation.
+     */
+    private constructor();
+    /**
+     * Sets up the AmityUIKitManager instance with the provided configuration.
+     * @param config - The configuration object containing the API key and endpoint.
+     */
+    static setup(config: {
+        apiKey: string;
+        apiRegion: string;
+        apiEndpoint?: {
+            http?: string;
+            mqtt?: string;
+        };
+    }): void;
+    /**
+     * Registers a device with the Amity SDK and handles the login process.
+     * @param userId - The user ID to be used for login.
+     * @param displayName - The display name of the user.
+     * @param sessionHandler - The session handler for access token renewal.
+     * @param authToken - The authentication token to be used for login.
+     * @param onConnectionStatusChange - The callback function for connection status changes.
+     * @param onConnected - The callback function to be called when connected.
+     * @param onDisconnected - The callback function to be called when disconnected.
+     */
+    static registerDevice(userId: string, displayName: string, sessionHandler: SessionHandler, authToken?: string, onConnectionStatusChange?: (state: Amity.SessionStates) => void, onConnected?: () => void, onDisconnected?: () => void): Promise<void>;
+    /**
+     * Sets the AmityClient instance to be used by the AmityUIKitManager.
+     * This method is useful when sharing the AmityClient instance between different parts of the application.
+     * @param client - The AmityClient instance to be used.
+     */
+    static setClient(client: Amity.Client): void;
+    /**
+     * Connects and logs in to the Amity SDK with the provided user details and session handler.
+     * @param userId - The user ID to be used for login.
+     * @param displayName - The display name of the user.
+     * @param sessionHandler - The session handler for access token renewal.
+     */
+    private connectAndLogin;
+    /**
+     * Disconnects from the Amity SDK and cleans up resources.
+     */
+    disconnect(): void;
+    /**
+     * Retrieves the Amity SDK client instance.
+     * @returns The Amity SDK client instance or null if not connected.
+     */
+    static getClient(): Amity.Client | null;
+    /**
+     * Checks if the client is connected to the Amity SDK.
+     * @returns True if the client is connected, false otherwise.
+     */
+    isClientConnected(): boolean;
+}
+
+interface ChatHeaderProps {
+    channel: Amity.Channel | null;
+    pageId?: string;
+    componentId?: string;
+}
+declare const ChatHeader: ({ channel, pageId }: ChatHeaderProps) => React.JSX.Element;
+
+interface AmityLiveChatMessageListProps {
+    pageId?: string;
+    channel: Amity.Channel;
+    replyMessage: (message: Amity.Message<'text'>) => void;
+}
+declare const MessageList: ({ pageId, channel, replyMessage, }: AmityLiveChatMessageListProps) => React.JSX.Element;
+
+type ComposeActionTypes = {
+    replyMessage?: Amity.Message;
+    mentionMessage?: Amity.Message;
+    clearReplyMessage?: () => void;
+    clearMention?: () => void;
 };
-declare const DraftsPage: ({ pageId, file, onDiscardStory, onCreateStory }: DraftStoryProps) => React.JSX.Element | null;
+interface MessageComposerProps {
+    channel: Amity.Channel;
+    composeAction: ComposeActionTypes;
+    suggestionRef?: RefObject<HTMLDivElement>;
+    disabled?: boolean;
+    pageId?: string;
+}
+declare const MessageComposer: ({ pageId, channel, composeAction: { replyMessage, mentionMessage, clearReplyMessage, clearMention }, }: MessageComposerProps) => React.JSX.Element;
+
+declare const MessageReactionPreview: ({ message, onClick, }: {
+    message: Amity.Message;
+    onClick?: (() => void) | undefined;
+}) => React.JSX.Element | null;
+
+declare const MessageReactionPicker: ({ message, onSelectReaction, }: {
+    message: Amity.Message;
+    onSelectReaction: (reactionName: string) => void;
+}) => React.JSX.Element | null;
+
+interface MessageQuickReactionProps {
+    pageId?: string;
+    componentId?: string;
+    message: Amity.Message;
+    onSelectReaction?: () => void;
+}
+declare const MessageQuickReaction: ({ pageId, componentId, message, onSelectReaction, }: MessageQuickReactionProps) => React.JSX.Element;
+
+type MessageActionType = {
+    onCopy?: () => void;
+    onFlag?: () => void;
+    onUnflag?: () => void;
+    onDelete?: () => void;
+    onReply?: () => void;
+    onMention?: () => void;
+};
+
+interface ReactionListProps$1 {
+    pageId: string;
+    referenceId: string;
+    referenceType: Amity.ReactableType;
+}
+declare const ReactionList: ({ pageId, referenceId, referenceType }: ReactionListProps$1) => React.JSX.Element | null;
+
+interface ReactionListProps {
+    referenceId: string;
+    referenceType: Amity.ReactableType;
+}
+
+interface LiveChatProps {
+    channelId: Amity.Channel['channelId'];
+}
+declare const LiveChat: ({ channelId }: LiveChatProps) => React.JSX.Element;
+
+type AmityStoryMediaType = {
+    type: 'image';
+    url: string;
+} | {
+    type: 'video';
+    url: string;
+};
+type StoryPreviewProps = {
+    mediaType?: AmityStoryMediaType;
+    imageMode: 'fit' | 'fill';
+    width?: number;
+    height?: number;
+    hyperLink: {
+        data: {
+            url: string;
+            customText: string;
+        };
+        type: Amity.StoryItemType;
+    }[];
+    onPlay?: () => void;
+    onPause?: () => void;
+    avatar: string;
+    title: string;
+    description: string;
+    duration?: number;
+    isOfficial?: boolean;
+};
+declare const StoryPreview: React.FC<StoryPreviewProps>;
+
+type StoryPreviewThumbnailProps = {
+    thumbnailUrl?: string;
+    hyperLink: {
+        data: {
+            url: string;
+            customText: string;
+        };
+        type: Amity.StoryItemType;
+    }[];
+    avatar: string;
+    title: string;
+    isOfficial?: boolean;
+    onClick?: () => void;
+    imageMode?: 'fit' | 'fill';
+};
+declare const StoryPreviewThumbnail: React.FC<StoryPreviewThumbnailProps>;
 
-interface ViewStoriesPageProps {
-    pageId: 'story_page';
+type ViewStoryPageType = 'communityFeed' | 'globalFeed';
+interface AmityViewStoryPageProps {
+    type: ViewStoryPageType;
     targetId: string;
-    onClose: () => void;
 }
-declare const ViewStoriesPage: ({ pageId, targetId }: ViewStoriesPageProps) => React.JSX.Element;
+declare const ViewStoryPage: React.FC<AmityViewStoryPageProps>;
 
-interface CommentTrayProps {
-    pageId: '*';
-    storyId: string;
-    commentId?: string;
-    referenceType?: string;
-    referenceId?: string;
-    replyTo?: string;
-    isReplying: boolean;
-    limit?: number;
-    isOpen: boolean;
-    isJoined: boolean;
-    allowCommentInStory?: boolean;
-    onClose: () => void;
-    onClickReply: (replyTo?: string, referenceType?: Amity.Comment['referenceType'], referenceId?: Amity.Comment['referenceId'], commentId?: Amity.Comment['commentId']) => void;
-    onCancelReply: () => void;
-}
-declare const CommentTray: ({ pageId, storyId, commentId, referenceType, referenceId, limit, replyTo, isJoined, isOpen, isReplying, allowCommentInStory, onClose, onClickReply, onCancelReply, }: CommentTrayProps) => React.JSX.Element | null;
-
-interface StoryTabProps {
-    haveStoryPermission: boolean;
-    avatar: string | null;
+declare function StoryTargetSelectionPage(): React.JSX.Element;
+
+declare function SocialHomePage(): React.JSX.Element;
+
+declare function SelectPostTargetPage(): React.JSX.Element;
+
+declare function MyCommunitiesSearchPage(): React.JSX.Element;
+
+declare function SocialGlobalSearchPage(): React.JSX.Element;
+
+interface PostDetailPageProps {
+    id: string;
+    hideTarget?: boolean;
+    category?: AmityPostCategory;
+}
+declare function PostDetailPage({ id, hideTarget, category }: PostDetailPageProps): React.JSX.Element;
+
+interface CommunityProfileProps {
+    communityId: string;
+    page?: number;
+}
+declare const CommunityProfilePage: React.FC<CommunityProfileProps>;
+
+type UserProfilePageProps = {
+    userId: string;
+};
+declare const UserProfilePage: React.FC<UserProfilePageProps>;
+
+interface EditUserProfilePageProps {
+    userId: string;
+}
+declare const EditUserProfilePage: React.FC<EditUserProfilePageProps>;
+
+type CommentTrayProps = {
+    pageId?: string;
+    referenceId: string;
+    community: Amity.Community;
+    shouldAllowCreation?: boolean;
+    shouldAllowInteraction: boolean;
+    referenceType: Amity.CommentReferenceType;
+};
+declare const CommentTray: ({ referenceId, pageId, referenceType, shouldAllowCreation, shouldAllowInteraction, community, }: CommentTrayProps) => React.JSX.Element;
+
+type StoryTabProps = ({
+    type: 'communityFeed';
+    communityId: string;
+} | {
+    type: 'globalFeed';
+}) & {
+    pageId?: string;
+};
+declare const StoryTab: React.FC<StoryTabProps>;
+
+type CreatePostMenuProps = {
+    pageId: string;
+};
+declare function CreatePostMenu({ pageId }: CreatePostMenuProps): React.JSX.Element;
+
+interface MediaAttachmentProps {
+    pageId: string;
+    uploadLoading?: boolean;
+    isVisibleCamera: boolean;
+    isVisibleImage: boolean;
+    isVisibleVideo: boolean;
+    onVideoFileChange?: (files: File[]) => void;
+    onImageFileChange?: (files: File[]) => void;
+}
+declare function MediaAttachment({ pageId, isVisibleCamera, isVisibleImage, isVisibleVideo, onVideoFileChange, onImageFileChange, }: MediaAttachmentProps): React.JSX.Element | null;
+
+interface DetailedMediaAttachmentProps {
+    pageId: string;
+    isVisibleCamera: boolean;
+    isVisibleImage: boolean;
+    isVisibleVideo: boolean;
+    onVideoFileChange?: (files: File[]) => void;
+    onImageFileChange?: (files: File[]) => void;
+}
+declare function DetailedMediaAttachment({ pageId, isVisibleCamera, isVisibleImage, isVisibleVideo, onVideoFileChange, onImageFileChange, }: DetailedMediaAttachmentProps): React.JSX.Element | null;
+
+type UserSearchResultProps = {
+    pageId?: string;
+    isLoading: boolean;
+    onLoadMore: () => void;
+    userCollection: Amity.User[];
+    onClosePopover?: () => void;
+};
+declare const UserSearchResult: ({ isLoading, onLoadMore, pageId, onClosePopover, userCollection, }: UserSearchResultProps) => React.JSX.Element;
+
+type CommunitySearchResultProps = {
+    pageId?: string;
+    isLoading: boolean;
+    onLoadMore: () => void;
+    showJoinButton?: boolean;
+    onClosePopover?: () => void;
+    communityCollection: Amity.Community[];
+};
+declare const CommunitySearchResult: ({ isLoading, onLoadMore, pageId, onClosePopover, showJoinButton, communityCollection, }: CommunitySearchResultProps) => React.JSX.Element;
+
+type TopSearchBarProps = {
+    pageId?: string;
+    onFocus?: () => void;
+    search: (keyword: string) => void;
+};
+declare function TopSearchBar({ pageId, search, onFocus }: TopSearchBarProps): React.JSX.Element | null;
+
+interface MyCommunitiesProps {
+    pageId?: string;
+}
+declare const MyCommunities: ({ pageId }: MyCommunitiesProps) => React.JSX.Element;
+
+interface GlobalFeedProps {
     pageId?: string;
     componentId?: string;
-    elementId?: string;
-    icon?: React.ReactNode;
-    storyRing?: boolean;
-    isSeen?: boolean;
-    uploadingStory?: boolean;
-    isErrored?: boolean;
-    title?: string;
-    onAddStory?: () => void;
-    onClick?: () => void;
-    onChange?: (file: File | null) => void;
+    items: Array<Amity.Post | Amity.Ad>;
+    isLoading: boolean;
+    onFeedReachBottom: () => void;
+    onPostDeleted?: (post: Amity.Post) => void;
+}
+declare const GlobalFeed: ({ pageId, componentId, items, isLoading, onFeedReachBottom, onPostDeleted, }: GlobalFeedProps) => React.JSX.Element;
+
+interface EmptyNewsfeedProps {
+    pageId?: string;
+}
+declare function EmptyNewsfeed({ pageId }: EmptyNewsfeedProps): React.JSX.Element | null;
+
+type NewsfeedProps = {
+    pageId?: string;
+};
+declare const Newsfeed: ({ pageId }: NewsfeedProps) => React.JSX.Element;
+
+declare enum HomePageTab {
+    Newsfeed = "Newsfeed",
+    Explore = "Explore",
+    MyCommunities = "My communities"
+}
+
+interface TopNavigationProps {
+    pageId?: string;
+    selectedTab?: HomePageTab;
+    onClickPostCreationButton?: () => void;
+}
+declare function TopNavigation({ pageId, selectedTab, onClickPostCreationButton, }: TopNavigationProps): React.JSX.Element | null;
+
+interface CommunityProfileHeaderProps {
+    pageId?: string;
+    community: Amity.Community;
+    isSticky?: boolean;
+    page?: number;
+}
+declare const CommunityHeader: React.FC<CommunityProfileHeaderProps>;
+
+interface CommunityFeedProps {
+    communityId: string;
+    pageId?: string;
+}
+declare const CommunityFeed: ({ pageId, communityId }: CommunityFeedProps) => React.JSX.Element | null;
+
+interface CommunityPinnedPostProps {
+    communityId?: string;
 }
-declare const StoryTab: ({ pageId, elementId, title, haveStoryPermission, storyRing, isSeen, uploadingStory, isErrored, avatar, onClick, onChange, }: StoryTabProps) => React.JSX.Element;
+declare const CommunityPinnedPost: ({ communityId }: CommunityPinnedPostProps) => React.JSX.Element;
 
-export { _default$1 as AmityAvatar, CommentTray as AmityCommentTrayComponent, DraftsPage as AmityCreateStoryPage, CommentText as AmityExpandableText, PostContainer as AmityPostContainer, _default as AmityPostEngagementBar, StoryTab as AmityStoryTabComponent, ChatApplication as AmityUiKitChat, _default$2 as AmityUiKitFeed, UiKitProvider as AmityUiKitProvider, Community as AmityUiKitSocial, ViewStoriesPage as AmityViewStoryPage, addChatMembers as amityAddChatMembers, removeChatMembers as amityRemoveChatMembers, useNavigation as useAmityNavigation, useSDK as useAmitySDK, useUser as useAmityUser };
+export { _default$1 as AmityAvatar, CommentTray as AmityCommentTrayComponent, CommunityFeed as AmityCommunityFeedComponent, CommunityHeader as AmityCommunityHeaderComponent, CommunityPinnedPost as AmityCommunityPinnedPostComponent, CommunityProfilePage as AmityCommunityProfilePage, CommunitySearchResult as AmityCommunitySearchResultComponent, CreatePostMenu as AmityCreatePostMenuComponent, DetailedMediaAttachment as AmityDetailedMediaAttachmentComponent, AmityDraftStoryPage, EditUserProfilePage as AmityEditUserProfilePage, EmptyNewsfeed as AmityEmptyNewsFeedComponent, CommentText as AmityExpandableText, GlobalFeed as AmityGlobalFeedComponent, ChatHeader as AmityLiveChatHeader, MessageComposer as AmityLiveChatMessageComposeBar, MessageList as AmityLiveChatMessageList, MessageQuickReaction as AmityLiveChatMessageQuickReaction, MessageReactionPicker as AmityLiveChatMessageReactionPicker, MessageReactionPreview as AmityLiveChatMessageReactionPreview, LiveChat as AmityLiveChatPage, MediaAttachment as AmityMediaAttachmentComponent, type MessageActionType as AmityMessageActionType, MyCommunities as AmityMyCommunitiesComponent, MyCommunitiesSearchPage as AmityMyCommunitiesSearchPage, Newsfeed as AmityNewsFeedComponent, PostComposerPage as AmityPostComposerPage, PostContainer as AmityPostContainer, PostContent as AmityPostContentComponent, PostDetailPage as AmityPostDetailPage, _default as AmityPostEngagementBar, SelectPostTargetPage as AmityPostTargetSelectionPage, ReactionList as AmityReactionListComponent, type ReactionListProps as AmityReactionListProps, SocialGlobalSearchPage as AmitySocialGlobalSearchPage, SocialHomePage as AmitySocialHomePage, HomePageTab as AmitySocialHomePageTab, TopNavigation as AmitySocialHomeTopNavigationComponent, StoryPreview as AmityStoryPreview, StoryPreviewThumbnail as AmityStoryPreviewThumbnail, StoryTab as AmityStoryTabComponent, StoryTargetSelectionPage as AmityStoryTargetSelectionPage, TopSearchBar as AmityTopSearchBarComponent, AmityUIKitManager, ChatApplication as AmityUiKitChat, _default$2 as AmityUiKitFeed, AmityUIKitProvider as AmityUiKitProvider, Application as AmityUiKitSocial, UserProfilePage as AmityUserProfilePage, UserSearchResult as AmityUserSearchResultComponent, ViewStoryPage as AmityViewStoryPage, addChatMembers as amityAddChatMembers, removeChatMembers as amityRemoveChatMembers, useNavigation as useAmityNavigation, useSDK as useAmitySDK, useUser as useAmityUser };