@amityco/ui-kit-open-source 3.8.0 → 3.9.0

package/dist/index.d.mts

@@ -1,48 +1,165 @@
-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[];
-    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;
+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 PostRendererConfigType = Record<ValueOf<typeof PostContentType> | string, (props: PostRendererProps) => ReactNode>;
+type CustomConfiguration = {
+    [key: string]: string | undefined | boolean | Array<string> | number | Record<string, unknown>;
+};
+
+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;
+
+interface PageBehavior {
+    AmityStoryViewPageBehavior?: {
+        onCloseAction?(): void;
+        hyperLinkAction?(context: Record<string, unknown>): void;
+    };
+    AmityDraftStoryPageBehavior?: {
+        onCloseAction?(): void;
+    };
+    onClickHyperLink?(): void;
+    AmitySocialHomePageBehavior?: Record<string, unknown>;
+    AmityGlobalFeedComponentBehavior?: {
+        goToPostDetailPage?: (context: {
+            postId: string;
+        }) => void;
+        goToViewStoryPage?: (context: {
+            targetId: string;
+            targetType: Amity.StoryTargetType;
+            storyType: 'communityFeed' | 'globalFeed';
+            targetIds?: string[];
+        }) => 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;
+    };
+    AmityCreatePostMenuComponentBehavior?: {
+        goToSelectPostTargetPage?(): void;
+        goToStoryTargetSelectionPage?(): 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;
+    };
+}
 
-interface UiKitProviderProps {
+type AmityUIKitConfig = Config;
+interface AmityUIKitProviderProps {
     apiKey: string;
     apiRegion: string;
     apiEndpoint?: {
         http?: string;
         mqtt?: string;
     };
-    authToken?: string;
     userId: string;
     displayName: string;
-    customComponents?: CustomComponentType;
-    postRendererConfig?: PostRendererConfigType;
+    postRendererConfig?: any;
     theme?: Record<string, unknown>;
     children?: React.ReactNode;
+    socialCommunityCreationButtonVisible?: boolean;
     actionHandlers?: {
         onChangePage?: (data: {
             type: string;
@@ -57,16 +174,15 @@ interface UiKitProviderProps {
         }) => void;
         onEditUser?: (userId: string) => void;
         onMessageUser?: (userId: string) => void;
-        onBack?: () => void;
     };
-    socialCommunityCreationButtonVisible?: boolean;
+    pageBehavior?: PageBehavior;
     onConnectionStatusChange?: (state: Amity.SessionStates) => void;
     onConnected?: () => void;
     onDisconnected?: () => void;
-    pageBehavior?: Record<string, unknown>;
     getAuthToken?: () => Promise<string>;
+    configs?: AmityUIKitConfig;
 }
-declare const UiKitProvider: ({ apiKey, apiRegion, apiEndpoint, authToken, userId, displayName, customComponents, postRendererConfig, theme, children, socialCommunityCreationButtonVisible, actionHandlers, onConnectionStatusChange, onDisconnected, getAuthToken, }: UiKitProviderProps) => React.JSX.Element;
+declare const AmityUIKitProvider: React.FC<AmityUIKitProviderProps>;
 
 interface FeedProps {
     className?: string;
@@ -201,10 +317,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>>;
@@ -280,11 +396,12 @@ declare class AmityUIKitManager {
      * @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, onConnectionStatusChange?: (state: Amity.SessionStates) => void, onConnected?: () => void, onDisconnected?: () => void): Promise<void>;
+    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.
@@ -316,7 +433,7 @@ declare class AmityUIKitManager {
 
 interface CommentTrayProps {
     referenceType: Amity.CommentReferenceType;
-    referenceId?: string;
+    referenceId: string;
     community: Amity.Community;
     shouldAllowInteraction: boolean;
     shouldAllowCreation?: boolean;
@@ -346,6 +463,89 @@ type StoryTabProps = ({
 };
 declare const StoryTab: React.FC<StoryTabProps>;
 
+interface 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;
+
+interface UserSearchResultProps {
+    pageId?: string;
+    userCollection: Amity.User[];
+    isLoading: boolean;
+    onLoadMore: () => void;
+}
+declare const UserSearchResult: ({ pageId, userCollection, isLoading, onLoadMore, }: UserSearchResultProps) => React.JSX.Element;
+
+interface CommunitySearchResultProps {
+    pageId?: string;
+    communityCollection: Amity.Community[];
+    isLoading: boolean;
+    onLoadMore: () => void;
+}
+declare const CommunitySearchResult: ({ pageId, communityCollection, isLoading, onLoadMore, }: CommunitySearchResultProps) => React.JSX.Element;
+
+interface TopSearchBarProps {
+    pageId?: string;
+    search: (keyword: string) => void;
+}
+declare function TopSearchBar({ pageId, search }: TopSearchBarProps): React.JSX.Element | null;
+
+interface PostContentProps {
+    pageId?: string;
+    post: Amity.Post;
+    type: 'feed' | 'detail';
+    drawerRef?: React.RefObject<HTMLDivElement>;
+    onClick?: () => void;
+    onPostDeleted?: (post: Amity.Post) => void;
+}
+declare const PostContent: ({ pageId, post: initialPost, type, drawerRef, onClick, onPostDeleted, }: PostContentProps) => React.JSX.Element;
+
+interface MyCommunitiesProps {
+    pageId?: string;
+}
+declare const MyCommunities: ({ pageId }: MyCommunitiesProps) => React.JSX.Element;
+
+interface GlobalFeedProps {
+    pageId?: string;
+    componentId?: string;
+    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;
+
+interface NewsfeedProps {
+    pageId?: string;
+}
+declare const Newsfeed: ({ pageId }: NewsfeedProps) => React.JSX.Element;
+
 declare enum HomePageTab {
     Newsfeed = "Newsfeed",
     Explore = "Explore",
@@ -353,6 +553,69 @@ declare enum HomePageTab {
 }
 declare function SocialHomePage(): React.JSX.Element;
 
+interface TopNavigationProps {
+    pageId?: string;
+    selectedTab?: HomePageTab;
+    onClickPostCreationButton?: () => void;
+}
+declare function TopNavigation({ pageId, selectedTab, onClickPostCreationButton, }: TopNavigationProps): React.JSX.Element | null;
+
+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;
+};
+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;
+};
+
 type AmityStoryMediaType = {
     type: 'image';
     url: string;
@@ -408,23 +671,6 @@ declare const ViewStoryPage: React.FC<AmityViewStoryPageProps>;
 
 declare function StoryTargetSelectionPage(): React.JSX.Element;
 
-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 | null;
-
 declare function SelectPostTargetPage(): React.JSX.Element;
 
 declare function MyCommunitiesSearchPage(): React.JSX.Element;
@@ -436,4 +682,4 @@ interface PostDetailPageProps {
 }
 declare function PostDetailPage({ id }: PostDetailPageProps): React.JSX.Element;
 
-export { _default$1 as AmityAvatar, CommentTray as AmityCommentTrayComponent, AmityDraftStoryPage, CommentText as AmityExpandableText, MyCommunitiesSearchPage as AmityMyCommunitiesSearchPage, PostComposerPage as AmityPostComposerPage, PostContainer as AmityPostContainer, PostDetailPage as AmityPostDetailPage, _default as AmityPostEngagementBar, SelectPostTargetPage as AmityPostTargetSelectionPage, ReactionList as AmityReactionList, type ReactionListProps as AmityReactionListProps, SocialGlobalSearchPage as AmitySocialGlobalSearchPage, SocialHomePage as AmitySocialHomePage, HomePageTab as AmitySocialHomePageTab, StoryPreview as AmityStoryPreview, StoryPreviewThumbnail as AmityStoryPreviewThumbnail, StoryTab as AmityStoryTabComponent, StoryTargetSelectionPage as AmityStoryTargetSelectionPage, AmityUIKitManager, ChatApplication as AmityUiKitChat, _default$2 as AmityUiKitFeed, UiKitProvider as AmityUiKitProvider, Community as AmityUiKitSocial, ViewStoryPage 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, CommunitySearchResult as AmityCommunitySearchResultComponent, CreatePostMenu as AmityCreatePostMenuComponent, DetailedMediaAttachment as AmityDetailedMediaAttachmentComponent, AmityDraftStoryPage, 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, 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, Community as AmityUiKitSocial, UserSearchResult as AmityUserSearchResultComponent, ViewStoryPage as AmityViewStoryPage, addChatMembers as amityAddChatMembers, removeChatMembers as amityRemoveChatMembers, useNavigation as useAmityNavigation, useSDK as useAmitySDK, useUser as useAmityUser };