tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/index.ts

@@ -1,74 +1,11 @@
-import { ConversationList } from './components/ConversationList';
-import { MessageList } from './components/MessageList';
-import { MessageInput, EmojiPicker } from './components/MessageInput';
-import { BarrageInput } from './components/BarrageInput';
-import { LiveStreamView } from './components/LiveStreamView';
-import { LiveMonitorView } from './components/LiveMonitorView';
-import { StreamMixer } from './components/StreamMixer';
-import { LiveScenePanel } from './components/LiveScenePanel';
-import { useMessageActions } from './hooks/useMessageActions';
-import { useMessageListState } from './states/MessageListState';
-import { useMessageActionState } from './states/MessageActionState';
-import { useMessageInputState } from './states/MessageInputState';
-import { useConversationListState } from './states/ConversationListState';
-import { useLiveState } from './states/LiveState';
-import { useRoomState } from './states/RoomState';
-import { useUserState } from './states/UserState';
-import { useDeviceState } from './states/DeviceState';
-import { useVideoMixerState } from './states/VideoMixerState';
 import { useLoginState } from './states/LoginState';
-import { useLiveSeatState } from './states/LiveSeatState';
-import { BarrageList } from './components/BarrageList';
-import { LiveAudienceList } from './components/LiveAudienceList';
-import { CoGuestPanel } from './components/CoGuestPanel';
-import { AudioSettingPanel } from './components/AudioSettingPanel';
-import { VideoSettingPanel } from './components/VideoSettingPanel';
-import { MicButton } from './components/MicButton';
-import { CameraButton } from './components/CameraButton';
-import { useCoGuestState } from './states/CoGuestState';
-import { useCoHostState } from './states/CoHostState';
-import { useLiveAudienceState } from './states/LiveAudienceState';
-import { useLiveMonitorState } from './states/LiveMonitorState';
-import { LiveList } from './components/LiveList';
-import { addI18n } from './i18n';
-import { Avatar } from './components/Avatar';
+
+export * from './chat';
+export * from './rtc';
+export * from './components/Avatar';
+export * from './i18n';
+export * from './types';
 
 export {
-  ConversationList,
-  MessageList,
-  BarrageList,
-  MessageInput,
-  BarrageInput,
-  EmojiPicker,
-  LiveStreamView,
-  LiveMonitorView,
-  StreamMixer,
-  LiveScenePanel,
-  LiveAudienceList,
-  CoGuestPanel,
-  AudioSettingPanel,
-  VideoSettingPanel,
-  MicButton,
-  CameraButton,
-  LiveList,
-  Avatar,
-  useMessageActions,
-  useMessageListState,
-  useMessageInputState,
-  useMessageActionState,
-  useConversationListState,
-  useLiveState,
-  useRoomState,
-  useUserState,
-  useDeviceState,
-  useVideoMixerState,
   useLoginState,
-  useLiveSeatState,
-  useCoGuestState,
-  useCoHostState,
-  useLiveAudienceState,
-  useLiveMonitorState,
-  addI18n,
 };
-
-export * from './types';

package/src/rtc/index.ts

@@ -0,0 +1,94 @@
+// Live related exports
+import { AudioSetting as AudioSettingComponent } from '../components/AudioSetting';
+import { AudioSettingPanel as AudioSettingPanelComponent } from '../components/AudioSettingPanel';
+import { BarrageInput as BarrageInputComponent } from '../components/BarrageInput';
+import { BarrageList as BarrageListComponent } from '../components/BarrageList';
+import { CameraButton as CameraButtonComponent } from '../components/CameraButton';
+import { CoGuestPanel as CoGuestPanelComponent } from '../components/CoGuestPanel';
+import { LiveAudienceList as LiveAudienceListComponent } from '../components/LiveAudienceList';
+import { LiveList as LiveListComponent } from '../components/LiveList';
+import { LiveMonitorView as LiveMonitorViewComponent } from '../components/LiveMonitorView';
+import { LiveScenePanel as LiveScenePanelComponent } from '../components/LiveScenePanel';
+import { LiveStreamView as LiveStreamViewComponent } from '../components/LiveStreamView';
+import { MicButton as MicButtonComponent } from '../components/MicButton';
+import { StreamMixer as StreamMixerComponent } from '../components/StreamMixer';
+import { StreamView as StreamViewComponent } from '../components/StreamView';
+import { VideoSetting as VideoSettingComponent } from '../components/VideoSetting';
+import { VideoSettingPanel as VideoSettingPanelComponent } from '../components/VideoSettingPanel';
+import { useBarrageListState as BarrageListState } from '../states/BarrageListState';
+import { useCoGuestState as CoGuestState } from '../states/CoGuestState';
+import { useCoHostState as CoHostState } from '../states/CoHostState';
+import { useDeviceState as DeviceState } from '../states/DeviceState';
+import { useLiveAudienceState as LiveAudienceState } from '../states/LiveAudienceState';
+import { useLiveMonitorState as LiveMonitorState } from '../states/LiveMonitorState';
+import { useLiveSeatState as LiveSeatState } from '../states/LiveSeatState';
+import { useLiveState as LiveState } from '../states/LiveState';
+import { useRoomState as RoomState } from '../states/RoomState';
+import { useUserState as UserState } from '../states/UserState';
+import { useVideoMixerState as VideoMixerState } from '../states/VideoMixerState';
+
+import RTCLoginServer from './server';
+
+RTCLoginServer.getInstance().init();
+
+const BarrageList = BarrageListComponent;
+const BarrageInput = BarrageInputComponent;
+const LiveStreamView = LiveStreamViewComponent;
+const StreamMixer = StreamMixerComponent;
+const LiveScenePanel = LiveScenePanelComponent;
+const LiveAudienceList = LiveAudienceListComponent;
+const CoGuestPanel = CoGuestPanelComponent;
+const AudioSettingPanel = AudioSettingPanelComponent;
+const VideoSettingPanel = VideoSettingPanelComponent;
+const MicButton = MicButtonComponent;
+const CameraButton = CameraButtonComponent;
+const LiveList = LiveListComponent;
+const LiveMonitorView = LiveMonitorViewComponent;
+const StreamView = StreamViewComponent;
+const AudioSetting = AudioSettingComponent;
+const VideoSetting = VideoSettingComponent;
+
+const useBarrageListState = BarrageListState;
+const useLiveMonitorState = LiveMonitorState;
+const useLiveSeatState = LiveSeatState;
+const useLiveState = LiveState;
+const useUserState = UserState;
+const useCoGuestState = CoGuestState;
+const useCoHostState = CoHostState;
+const useDeviceState = DeviceState;
+const useLiveAudienceState = LiveAudienceState;
+const useRoomState = RoomState;
+const useVideoMixerState = VideoMixerState;
+
+export {
+  // Components
+  BarrageList,
+  BarrageInput,
+  LiveStreamView,
+  StreamMixer,
+  LiveScenePanel,
+  LiveAudienceList,
+  CoGuestPanel,
+  AudioSettingPanel,
+  VideoSettingPanel,
+  MicButton,
+  CameraButton,
+  LiveList,
+  LiveMonitorView,
+  StreamView,
+  AudioSetting,
+  VideoSetting,
+
+  // States
+  useLiveState,
+  useRoomState,
+  useUserState,
+  useDeviceState,
+  useVideoMixerState,
+  useLiveSeatState,
+  useCoGuestState,
+  useCoHostState,
+  useLiveAudienceState,
+  useLiveMonitorState,
+  useBarrageListState,
+};

package/src/rtc/server.ts

@@ -0,0 +1,119 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
+import { useLoginState } from '../states/LoginState';
+
+export default class RTCLoginServer {
+  private static instance: RTCLoginServer;
+  private isReady = false;
+  private isEngineLoggingIn = false;
+  public isLogin: Ref<boolean> = ref(false);
+  private resolveList: any[] = [];
+  private rejectList: any[] = [];
+
+  constructor() {
+    this.init();
+  }
+
+  static getInstance() {
+    if (!RTCLoginServer.instance) {
+      RTCLoginServer.instance = new RTCLoginServer();
+    }
+    return RTCLoginServer.instance;
+  }
+
+  public init() {
+    if (!this.isReady) {
+      this.isReady = true;
+      TUICore.registerEvent(
+        TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED,
+        TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,
+        this,
+      );
+    }
+  }
+
+  /**
+   * @param { TUIInitParam } params
+   */
+  public onNotifyEvent(eventName: string, subKey: string) {
+    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
+          this.login();
+          break;
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGOUT_SUCCESS:
+          this.logout();
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  public async login() {
+    const {
+      chat,
+      SDKAppID,
+      userID,
+      userSig,
+    } = TUILogin.getContext();
+    if (this.isEngineLoggingIn) {
+      return new Promise((resolve, reject) => {
+        this.resolveList.push(resolve);
+        this.rejectList.push(reject);
+      });
+    }
+
+    try {
+      this.isEngineLoggingIn = true;
+      await TUIChatEngine.login({
+        chat,
+        SDKAppID,
+        userID,
+        userSig,
+      });
+      const res = await TUIRoomEngine.login({
+        sdkAppId: SDKAppID,
+        userId: userID,
+        userSig,
+        tim: chat,
+      });
+      this.isLogin.value = true;
+      this.resolveList.forEach((resolve) => {
+        resolve();
+      });
+      this.rejectList = [];
+      this.resolveList = [];
+      const { loginUserInfo } = useLoginState();
+      const result = await chat.getUserProfile({ userIDList: [userID] });
+      const localUserInfo = result.data[0];
+      if (!localUserInfo.value) {
+        loginUserInfo.value = {
+          userId: localUserInfo.userID,
+          userName: localUserInfo.nick,
+          avatarUrl: localUserInfo.avatar,
+          customInfo: localUserInfo.profileCustomField,
+        };
+      }
+      return res;
+    } catch (error) {
+      this.rejectList.forEach((reject) => {
+        reject(error);
+      });
+      this.rejectList = [];
+      this.resolveList = [];
+      throw error;
+    } finally {
+      this.isEngineLoggingIn = false;
+    }
+  }
+
+  public logout() {
+    TUIRoomEngine.logout();
+    this.isLogin.value = false;
+    this.isEngineLoggingIn = false;
+  }
+}

package/src/types/contact.ts

@@ -0,0 +1,146 @@
+import type { GroupModel } from './engine';
+import type TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+
+export type ContactItem = Friend
+  | GroupModel
+  | UserProfile
+  | FriendApplication
+  | GroupApplication;
+
+export enum ContactItemType {
+  FRIEND = 'friend',
+  BLACK = 'black',
+  GROUP = 'group',
+  FRIEND_REQUEST = 'friendRequest',
+  GROUP_REQUEST = 'groupRequest',
+  SEARCH_USER = 'searchUser',
+  SEARCH_GROUP = 'searchGroup',
+}
+
+export enum GroupApplicationType {
+  USER_JOIN_REQUEST = 0,
+  INVITE_MEMBER_REQUEST = 2,
+}
+
+export interface UserProfile {
+  userID: string;
+  nick: string;
+  gender: typeof TUIChatEngine.TYPES.GENDER_UNKNOWN
+    | typeof TUIChatEngine.TYPES.GENDER_FEMALE
+    | typeof TUIChatEngine.TYPES.GENDER_MALE;
+  birthday: number;
+  location: string;
+  selfSignature: string;
+  allowType: typeof TUIChatEngine.TYPES.ALLOW_TYPE_ALLOW_ANY
+    | typeof TUIChatEngine.TYPES.ALLOW_TYPE_NEED_CONFIRM
+    | typeof TUIChatEngine.TYPES.ALLOW_TYPE_DENY_ANY;
+  avatar: string;
+  adminForbidType: typeof TUIChatEngine.TYPES.FORBID_TYPE_NONE
+    | typeof TUIChatEngine.TYPES.FORBID_TYPE_SEND_OUT;
+}
+
+export interface Friend extends UserProfile {
+  remark: string;
+}
+
+export interface FriendApplication {
+  userID: string;
+  avatar: string;
+  nick: string;
+  time: number;
+  source: string;
+  wording: string;
+  type: typeof TUIChatEngine.TYPES.SNS_APPLICATION_SENT_TO_ME
+    | typeof TUIChatEngine.TYPES.SNS_APPLICATION_SENT_BY_ME;
+}
+
+export interface FriendGroup {
+  name: string;
+  friendList: Friend[];
+  count: number;
+}
+
+export interface Group {
+  groupID: string;
+  name: string;
+  avatar: string;
+  type: typeof TUIChatEngine.TYPES.GRP_WORK
+    | typeof TUIChatEngine.TYPES.GRP_PUBLIC
+    | typeof TUIChatEngine.TYPES.GRP_MEETING
+    | typeof TUIChatEngine.TYPES.GRP_AVCHATROOM
+    | typeof TUIChatEngine.TYPES.GRP_COMMUNITY;
+  introduction: string;
+  notification: string;
+  ownerID: string;
+  selfInfo: {
+    userID: string;
+    role: typeof TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER
+      | typeof TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN
+      | typeof TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER;
+    nameCard: string;
+    joinTime: number;
+  };
+  memberCount: number;
+  maxMemberCount: number;
+  muteAllMembers: boolean;
+  joinOption: typeof TUIChatEngine.TYPES.JOIN_OPTIONS_FREE_ACCESS
+    | typeof TUIChatEngine.TYPES.JOIN_OPTIONS_NEED_PERMISSION
+    | typeof TUIChatEngine.TYPES.JOIN_OPTIONS_DISABLE_APPLY;
+}
+
+export interface GroupApplication {
+  applicant: string;
+  applicantNick: string;
+  groupID: string;
+  groupName: string;
+  applicationType: GroupApplicationType;
+  userID: string;
+  note: string;
+}
+
+// 参数接口
+export interface AddFriendParams {
+  userID: string;
+  addSource: string;
+  remark?: string;
+  groupName?: string;
+  wording?: string;
+  type?: string;
+}
+
+export interface DeleteFriendParams {
+  userIDList: string[];
+  type?: typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_SINGLE | typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_BOTH;
+}
+
+export interface FriendRemarkParams {
+  userID: string;
+  remark: string;
+}
+
+export interface FriendGroupParams {
+  name: string;
+  userIDList: string[];
+}
+
+export interface RenameFriendGroupParams {
+  oldName: string;
+  newName: string;
+}
+
+export interface FriendApplicationParams {
+  userID: string;
+  remark?: string;
+  type?: typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE | typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD;
+}
+
+export interface JoinGroupParams {
+  groupID: string;
+  applyMessage?: string;
+  type?: typeof TUIChatEngine.TYPES.JOIN_TYPE_FREE | typeof TUIChatEngine.TYPES.JOIN_TYPE_NEED_PERMISSION;
+}
+
+export interface GroupApplicationParams {
+  application: GroupApplication;
+  handleMessage?: string;
+}

package/src/types/conversation.ts

@@ -0,0 +1,249 @@
+import type { Component } from 'vue';
+import type { CSSProperties } from 'vue';
+import type { CreateGroupParams } from '@tencentcloud/chat-uikit-engine';
+import type { ConversationModel } from './engine';
+import type { AvatarProps } from '../components/Avatar';
+import type { Friend, UserProfile } from './contact';
+
+export interface ConversationListProps {
+  /** Determines whether the conversation search input appears on the conversation list view. */
+  enableSearch?: boolean;
+  /** Determines whether the conversation creation button appears on the conversation list view. */
+  enableCreate?: boolean;
+  /** Determines whether the conversation action button appears on the conversation list view. */
+  enableActions?: boolean;
+  /** Specifies the prop to customize action on the conversation list item. */
+  actionsConfig?: ConversationActionsConfig;
+  /** Specifies a vue component to customize the header of the conversation list. */
+  Header?: Component<ConversationListHeaderProps>;
+  /** Specifies a vue component to customize the conversation list component. */
+  List?: Component<ConversationListContentProps>;
+  /** Specifies a vue component to customize the conversation preview. */
+  Preview?: Component<ConversationPreviewUIProps>;
+  /** Specifies a vue component to customize the conversation create component. */
+  ConversationCreate?: Component<ConversationCreateProps>;
+  /** Specifies a vue component to customize the conversation search. */
+  ConversationSearch?: Component;
+  /** Specifies a vue component to customize the conversation actions in conversation preview. */
+  ConversationActions?: Component<ConversationActionsProps>;
+  /** Specifies a vue component to display when the chat list is empty. */
+  PlaceholderEmptyList?: any;
+  /** Specifies a vue component to display while the chat list is loading. */
+  PlaceholderLoading?: any;
+  /** Specifies a vue component to display when there is an error loading the chat list. */
+  PlaceholderLoadError?: any;
+  /** Specifies a vue component to customize the avatar in list. */
+  Avatar?: Component<AvatarProps>;
+  /** Specifies a function to filter conversations in the conversation list. */
+  filter?: ((conversationList: ConversationModel[]) => ConversationModel[]);
+  /** Specifies a function to sort conversations in the conversation list. */
+  sort?: ((conversationList: ConversationModel[]) => ConversationModel[]);
+  /** Specifies the prop to receive callback when a user clicks a conversation. */
+  onSelectConversation?: ((conversation: ConversationModel) => void);
+  /** Specifies the prop to execute custom operations before creating a channel. */
+  onBeforeCreateConversation?: (
+    (params: string | CreateGroupParams) => string | CreateGroupParams
+  );
+  /** Specifies the prop to receive callback when a conversation is created. */
+  onConversationCreated?: ((conversation: ConversationModel) => void);
+  /** The custom class name */
+  className?: string;
+  /** The custom css style */
+  style?: CSSProperties;
+}
+
+export interface ConversationListHeaderProps {
+  /** The main of the conversation list header */
+  children?: any;
+  /** A custom component to display in the left area of header */
+  left?: any;
+  /** A custom component to display in the right area of header */
+  right?: any;
+  /** The custom class name */
+  className?: string;
+  /** The custom css style */
+  style?: CSSProperties;
+}
+
+export interface ConversationListContentProps {
+  /** Renders a customized component in the conversation list main. */
+  children?: any;
+  /** Indicates whether the chat list is empty */
+  empty?: boolean;
+  /** Indicates whether the chat list is currently loading */
+  loading?: boolean;
+  /** Indicates whether there was an error loading the chat list */
+  error?: boolean;
+  /** A custom component to display when the chat list is empty */
+  PlaceholderEmptyList?: any;
+  /** A custom component to display while the chat list is loading */
+  PlaceholderLoading?: any;
+  /** A custom component to display when there is an error loading the chat list */
+  PlaceholderLoadError?: any;
+  /** The custom class name */
+  className?: string;
+  /** The custom class style */
+  style?: CSSProperties;
+}
+
+export interface ConversationPreviewUIProps {
+  /** The conversation to be displayed */
+  conversation: ConversationModel;
+  /** If the component's Conversation is the active (selected) Conversation */
+  isSelected?: boolean;
+  /** Whether to show the ConversationActions */
+  enableActions?: boolean;
+  /** The string to be highlighted in the title */
+  highlightMatchString?: string;
+  /** The custom Avatar component */
+  Avatar?: Component<AvatarProps>;
+  /** The custom Title component */
+  Title?: string | any;
+  /** The custom last message abstract component */
+  LastMessageAbstract?: string | any;
+  /** The custom last message abstract component */
+  LastMessageTimestamp?: string | any;
+  /** The custom Unread component */
+  Unread?: string | any;
+  /** The custom ConversationActions component */
+  ConversationActions?: Component<ConversationActionsProps>;
+  /** Callback when the user click a conversation from conversation list */
+  onSelectConversation?: ((conversation: ConversationModel) => void);
+  /** The custom ConversationActions config */
+  actionsConfig?: ConversationActionsConfig;
+  /** The custom class name */
+  className?: string;
+  /** The custom class style */
+  style?: CSSProperties;
+  /** The custom children node to override UI */
+  children?: any;
+}
+
+export interface ConversationPreviewProps extends ConversationPreviewUIProps {
+  /** The custom Preview UI component */
+  Preview?: Component<ConversationPreviewUIProps>;
+}
+
+export interface ConversationActionItem {
+  /** Determines whether the custom action is enabled. (Default: True) */
+  enable?: boolean;
+  /** label: The label of the custom action. */
+  label: string;
+  /** onClick: The function to be called when the custom action is clicked. */
+  onClick: (conversation: ConversationModel, e?: Event) => void;
+}
+
+export interface ConversationActionsBaseConfig {
+  /** Determines whether the pin button appears on the conversation actions list view. */
+  enablePin?: boolean;
+  /** Determines whether the mute button appears on the conversation actions list view. */
+  enableMute?: boolean;
+  /** Determines whether the delete button appears on the conversation actions list view. */
+  enableDelete?: boolean;
+  /** Determines whether the mark unread button appears on the conversation actions list view. */
+  enableMarkUnread?: boolean;
+}
+
+export interface ConversationActionsConfig extends ConversationActionsBaseConfig {
+  /** Function to override the default behavior when user mark a conversation as unread. */
+  onMarkConversationUnread?: (conversation: ConversationModel, e?: Event) => void;
+  /** Function to override the default behavior when user pin or unpin a conversation. */
+  onConversationPin?: (conversation: ConversationModel, e?: Event) => void;
+  /** Function to override the default behavior when user mute or unmute a conversation. */
+  onConversationMute?: (conversation: ConversationModel, e?: Event) => void;
+  /** Function to override the default behavior when user delete a conversation. */
+  onConversationDelete?: (conversation: ConversationModel, e?: Event) => void;
+  /**
+   * An object containing custom conversation actions (key) and object (value).
+   * Each value is an object with the following properties:
+   * enable: Determines whether the custom action is enabled. (Default: True)
+   * label: The label of the custom action.
+   * onClick: The function to be called when the custom action is clicked.
+   * Note: The key of the custom action must be unique.
+   */
+  customConversationActions?: Record<string, ConversationActionItem>;
+  /** The icon vue element to be displayed in the action popup. */
+  PopupIcon?: any;
+  /** An array of vue elements to be displayed in the action popup. */
+  PopupElements?: any[];
+  /** The function to be called when the action popup is clicked. */
+  onClick?: (e: Event, key?: string, conversation?: ConversationModel) => void;
+  /** Function to be called when the actions modal is closed (H5 only). */
+  onClose?: () => void;
+}
+
+export interface ConversationActionsProps extends ConversationActionsConfig {
+  /** The conversation model. */
+  conversation: ConversationModel;
+  /** The class name of the root element. */
+  className?: string;
+  /** The style of the root element. */
+  style?: CSSProperties;
+}
+
+export interface ConversationCreateProps {
+  visible?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  onBeforeCreateConversation?: (
+    (params: string | CreateGroupParams) => string | CreateGroupParams
+  );
+  onConversationCreated?: ((conversation: ConversationModel) => void);
+  'onUpdate:visible'?: ((visible: boolean) => void);
+  conversationList?: ConversationModel[];
+}
+
+export interface ConversationCreateButtonProps {
+  visible?: boolean;
+  onClick?: (event: Event) => void;
+  height?: number;
+  width?: number;
+  className?: string;
+}
+
+export enum PageStateTypes {
+  USER_SELECT = 'Next',
+  CREATE_DETAIL = 'Create',
+  GROUP_TYPE = 'GroupType',
+}
+
+export interface ConversationCreateGroupDetailProps {
+  profileList: UserProfile[];
+  pageState: PageStateTypes;
+  setPageState: (state: PageStateTypes) => void;
+  onBeforeCreateConversation?: ((params: CreateGroupParams) => void);
+  onConversationCreated?: ((conversation: ConversationModel) => void);
+}
+
+export interface ConversationCreateSelectViewProps {
+  selectList: UserProfile[];
+  setSelectList: (list: UserProfile[]) => void;
+}
+
+export interface ConversationCreateUsers {
+  [key: string]: Friend[] | UserProfile[];
+}
+
+export interface ConversationCreateUserSelectListProps extends ConversationCreateSelectViewProps {
+  isCreateGroup: boolean;
+  setIsCreateGroup: (value: boolean) => void;
+  conversationList: ConversationModel[];
+  setPageState: (state: PageStateTypes) => void;
+  onBeforeCreateConversation?: ((userID: string) => void);
+  onConversationCreated?: ((conversation: ConversationModel) => void);
+  className?: string;
+}
+
+export enum PlaceHolderTypes {
+  LOADING = 'LOADING',
+  NO_CONVERSATIONS = 'NO_CONVERSATIONS',
+  WRONG = 'WRONG',
+};
+
+export interface ConversationPlaceHolderProps {
+  type: PlaceHolderTypes;
+  className?: string;
+  iconSize?: number;
+  searchString?: string;
+  retry?: () => void;
+}

package/src/types/device.ts

@@ -3,6 +3,8 @@ export enum DeviceError {
   NoDeviceDetected = 'NoDeviceDetected',
   NoSystemPermission = 'NoSystemPermission',
   NotSupportCapture = 'NotSupportCapture',
+  OccupiedError = 'OccupiedError',
+  UnknownError = 'UnknownError',
 }
 
 export enum AudioOutput {