@tencentcloud/chat-uikit-react 2.2.7 → 2.2.8

package/src/components/ConversationCreate/ConversationCreateGroupDetail.tsx

@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Profile } from '@tencentcloud/chat';
+import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { Input } from '../Input';
+import './styles/ConversationCreateGroupDetail.scss';
+import { Icon, IconTypes } from '../Icon';
+import { Toast } from '../Toast';
+import {
+  Avatar,
+  defaultGroupAvatarWork,
+  defaultGroupAvatarAVChatRoom,
+  defaultGroupAvatarMeeting,
+  defaultGroupAvatarPublic,
+  defaultUserAvatar,
+} from '../Avatar';
+import { PageStateTypes } from './ConversationCreate';
+import { ConversationGroupTypeInfo, GroupType, typeInfoList } from './ConversationGroupTypeInfo';
+import { useUIManager } from '../../context';
+import { createGroupConversation } from '../../hooks/useConversation';
+
+export interface ConversationCreateGroupDetailProps {
+  profileList: Profile[];
+  pageState: PageStateTypes;
+  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>;
+  onBeforeCreateConversation?: (params: CreateGroupParams) => void;
+  onConversationCreated?: (conversation: IConversationModel) => void;
+}
+export function ConversationCreateGroupDetail(props: ConversationCreateGroupDetailProps) {
+  const {
+    profileList,
+    pageState,
+    setPageState,
+    onBeforeCreateConversation,
+    onConversationCreated,
+  } = props;
+  const { t } = useTranslation();
+  const { setActiveConversation, myProfile } = useUIManager();
+  const temp = [...profileList];
+  myProfile && temp.unshift(myProfile);
+  const name = temp.map(item => item.nick || item.userID).toString();
+  const [groupName, setGroupName] = useState(
+    name.length >= 15 ? `${name.slice(0, 12)}...` : name,
+  );
+  const [groupID, setGroupID] = useState('');
+  const [groupType, setGroupType] = useState<GroupType>(GroupType.Work);
+  const groupInfoChange = (e: any, type: string) => {
+    const { value } = e.target;
+    switch (type) {
+      case 'name':
+        setGroupName(value);
+        break;
+      case 'id':
+        setGroupID(value);
+        break;
+      case 'type':
+        setGroupType(value);
+        break;
+      default:
+    }
+  };
+  const showGroupTypeInfo = () => {
+    setPageState(PageStateTypes.GROUP_TYPE);
+  };
+  const getDefaultAvatar = (type: GroupType) => {
+    switch (type) {
+      case GroupType.Work:
+        return defaultGroupAvatarWork;
+      case GroupType.Public:
+        return defaultGroupAvatarPublic;
+      case GroupType.Meeting:
+        return defaultGroupAvatarMeeting;
+      case GroupType.AVChatRoom:
+        return defaultGroupAvatarAVChatRoom;
+      default:
+        return '';
+    }
+  };
+  // eslint-disable-next-line
+  // @ts-ignore
+  const getDes = () => typeInfoList?.find((item: any) => item.type === groupType).des;
+  const next = async () => {
+    const memberList = profileList.map(item => ({
+      userID: item.userID,
+    }));
+    const avatar = getDefaultAvatar(groupType);
+    const options: CreateGroupParams = {
+      name: groupName,
+      type: groupType,
+      groupID,
+      avatar,
+      memberList,
+    } as any;
+    const _options = onBeforeCreateConversation?.(options) || options;
+    createGroupConversation(_options)
+      .then((conversation: IConversationModel) => {
+        onConversationCreated?.(conversation);
+      })
+      .catch((error) => {
+        Toast({ text: error.message, type: 'error' });
+      });
+  };
+  return pageState !== PageStateTypes.GROUP_TYPE
+    ? (
+        <>
+          <div className="tui-conversation-create-group-detail">
+            <div className="create-group-box create-group-name">
+              <Input
+                maxLength={15}
+                value={groupName}
+                onChange={(e) => {
+                  groupInfoChange(e, 'name');
+                }}
+                border="bottom"
+                inputClassName="input-group-name"
+                clearable
+                prefix={<div className="input-group-title">{t('TUIConversation.Group Name')}</div>}
+              />
+            </div>
+            <div className="create-group-box create-group-id">
+              <Input
+                border="bottom"
+                inputClassName="input-group-text"
+                clearable
+                value={groupID}
+                onChange={(e) => {
+                  groupInfoChange(e, 'id');
+                }}
+                prefix={<div className="input-group-title">{t('TUIConversation.Group ID')}</div>}
+              />
+            </div>
+            <div className="create-group-box create-group-type" onClick={showGroupTypeInfo}>
+              <Input
+                readOnly
+                border="bottom"
+                inputClassName="input-group-text"
+                prefix={<div className="input-group-title">{t('TUIConversation.Group Type')}</div>}
+                suffix={(
+                  <Icon
+                    onClick={showGroupTypeInfo}
+                    type={IconTypes.ARROW_RIGHT}
+                    width={7}
+                    height={12}
+                  />
+                )}
+                value={t(`TUIConversation.${groupType}`)}
+                onChange={(e) => {
+                  groupInfoChange(e, 'type');
+                }}
+              />
+            </div>
+            <div className="create-group-illustrate">
+              {t(`TUIConversation.${getDes()}`)}
+            </div>
+            <div className="create-group-portrait">
+              <div className="create-group-portrait-title">{t('TUIConversation.Participants')}</div>
+              <div className="create-group-portrait-info-container">
+                {profileList.map(({ avatar, userID, nick }) => (
+                  <div className="create-group-portrait-info" key={userID}>
+                    <Avatar shape="square" size={50} image={avatar || defaultUserAvatar} />
+                    <div className="create-group-portrait-info-nick">{nick}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="tui-conversation-create-next-container">
+            <div role="presentation" className="tui-conversation-create-next" onClick={next}>{t('TUIConversation.Create')}</div>
+          </div>
+        </>
+      )
+    : (
+        <ConversationGroupTypeInfo
+          groupType={groupType}
+          setGroupType={setGroupType}
+          setPageState={setPageState}
+        />
+      );
+}

package/src/components/ConversationCreate/ConversationCreateSelectView.tsx

@@ -5,16 +5,16 @@ import './styles/conversationCreateSelectView.scss';
 import { Icon, IconTypes } from '../Icon';
 
 interface ValueProps {
-  profile: Profile,
-  domList: Array<HTMLInputElement>,
+  profile: Profile;
+  domList: HTMLInputElement[];
 }
-export interface ConversationCreateSelectViewProps{
-  selectList: Array<ValueProps>,
-  setSelectList: React.Dispatch<React.SetStateAction<Array<ValueProps>>>,
+export interface ConversationCreateSelectViewProps {
+  selectList: ValueProps[];
+  setSelectList: React.Dispatch<React.SetStateAction<ValueProps[]>>;
 }
-export function ConversationCreateSelectView(props:ConversationCreateSelectViewProps) {
+export function ConversationCreateSelectView(props: ConversationCreateSelectViewProps) {
   const { selectList, setSelectList } = props;
-  const close = (domList:Array<HTMLInputElement>, index: number) => {
+  const close = (domList: HTMLInputElement[], index: number) => {
     // eslint-disable-next-line no-param-reassign
     domList.forEach((dom: HTMLInputElement) => { dom.checked = false; });
     selectList.splice(index, 1);

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -1,26 +1,25 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Conversation, Profile } from '@tencentcloud/chat';
-import {
-  TUIConversationService,
-} from '@tencentcloud/chat-uikit-engine';
+import { Profile } from '@tencentcloud/chat';
 import { Input } from '../Input';
 import { Icon, IconTypes } from '../Icon';
 import { ConversationCreateSelectView, ConversationCreateSelectViewProps } from './ConversationCreateSelectView';
 import { Avatar, defaultUserAvatar } from '../Avatar';
 import { useConversationCreate } from './hooks/useConversationCreate';
-import { useUIKit, useUIManager } from '../../context';
+import { createC2CConversation } from '../../hooks/useConversation';
+import { useUIKit } from '../../context';
 import { PageStateTypes } from './ConversationCreate';
-import { useConversation } from '../../hooks';
 import { Toast } from '../Toast';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
 
-export interface ConversationCreateUserSelectListProps extends ConversationCreateSelectViewProps{
-  isCreateGroup: boolean,
-  setIsCreateGroup: React.Dispatch<React.SetStateAction<boolean>>,
-  setConversationCreated: React.Dispatch<React.SetStateAction<boolean>>,
-  className: string,
-  conversationList: Array<Conversation>,
-  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>,
+export interface ConversationCreateUserSelectListProps extends ConversationCreateSelectViewProps {
+  isCreateGroup: boolean;
+  setIsCreateGroup: React.Dispatch<React.SetStateAction<boolean>>;
+  className?: string;
+  conversationList: IConversationModel[];
+  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>;
+  onBeforeCreateConversation?: (userID: string) => void;
+  onConversationCreated?: (conversation: IConversationModel) => void;
 }
 export function ConversationCreateUserSelectList(props: ConversationCreateUserSelectListProps) {
   const {
@@ -30,20 +29,19 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     className,
     conversationList,
     setIsCreateGroup,
-    setConversationCreated,
     setPageState,
+    onBeforeCreateConversation,
+    onConversationCreated,
   } = props;
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
   const { chat } = useUIKit();
-  const { setActiveConversation } = useUIManager();
   const [friendList, setFriendList] = useState<any>({});
   const {
     getFriendListSortSearchResult,
-  } = useConversationCreate(chat, conversationList, (newFriendListResult) => {
+  } = useConversationCreate(conversationList, (newFriendListResult) => {
     setFriendList(newFriendListResult);
   });
-  const { createConversation } = useConversation(chat);
   const userCheckedList = useRef(new Map());
   const searchValueChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
@@ -55,7 +53,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     userCheckedList.current.clear();
     setSelectList([]);
   };
-  const getUserChecked = (userID:string, dom: HTMLElement) => {
+  const getUserChecked = (userID: string, dom: HTMLElement) => {
     if (!dom) return;
     if (!userCheckedList.current.has(userID)) {
       userCheckedList.current.set(userID, []);
@@ -75,17 +73,21 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     if (checked) {
       selectList.push({ profile, domList });
     } else {
-      selectList.splice(selectList.findIndex((item) => item.profile.userID === userID), 1);
+      selectList.splice(selectList.findIndex(item => item.profile.userID === userID), 1);
     }
     setSelectList([...selectList]);
   };
-  const createC2CConversation = async (profile: Profile) => {
+
+  const _createConversation = async (profile: Profile) => {
     if (isCreateGroup) return;
     const { userID } = profile;
-    const conversation = await createConversation(`C2C${userID}`);
-    setConversationCreated(false);
-    setActiveConversation(conversation);
-    TUIConversationService.switchConversation(conversation?.conversationID);
+    const params = onBeforeCreateConversation?.(userID);
+    createC2CConversation(userID)
+      .then((conversation: IConversationModel) => {
+        onConversationCreated?.(conversation);
+      }).catch((error) => {
+        Toast({ text: error.message, type: 'error' });
+      });
   };
   const next = () => {
     if (selectList && selectList.length === 0) {
@@ -113,11 +115,11 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
           <div className="tui-user-name active">{t('TUIConversation.New group chat')}</div>
         </div>
       )}
-      <div className={`tui-conversation-create ${className}`}>
-        <div className="tui-conversation-create-container">
+      <div className={`tui-conversation-create-select-list-container ${className}`}>
+        <div className="tui-conversation-create-select-list">
           <div className="tui-group-container">
             {Object.keys(friendList).map(
-              (key) => friendList[key].length !== 0 && (
+              key => friendList[key].length !== 0 && (
                 <div className="tui-group-box" key={key}>
                   <div className="title">{key}</div>
                   {friendList[key].map((profile: Profile, index: number) => {
@@ -128,8 +130,8 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
                         className="tui-user tui-user-checkbox-label"
                         htmlFor={`userChecked-${key}-${userID}`}
                         key={userID}
-                        onClick={(e) => {
-                          createC2CConversation(profile);
+                        onClick={() => {
+                          _createConversation(profile);
                         }}
                       >
                         <Avatar size={30} image={avatar || defaultUserAvatar} />

package/src/components/ConversationCreate/ConversationGroupTypeInfo.tsx

@@ -1,40 +1,40 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
 import './styles/conversationGroupTypeInfo.scss';
-import TencentCloudChat from '@tencentcloud/chat';
 import { PageStateTypes } from './ConversationCreate';
 import { Icon, IconTypes } from '../Icon';
 
 export enum GroupType {
-  Work= TencentCloudChat.TYPES.GRP_WORK,
-  Public= TencentCloudChat.TYPES.GRP_PUBLIC,
-  Meeting= TencentCloudChat.TYPES.GRP_MEETING,
-  AVChatRoom= TencentCloudChat.TYPES.GRP_AVCHATROOM,
-  Community = TencentCloudChat.TYPES.GRP_COMMUNITY,
+  Work = TUIChatEngine.TYPES.GRP_WORK,
+  Public = TUIChatEngine.TYPES.GRP_PUBLIC,
+  Meeting = TUIChatEngine.TYPES.GRP_MEETING,
+  AVChatRoom = TUIChatEngine.TYPES.GRP_AVCHATROOM,
+  Community = TUIChatEngine.TYPES.GRP_COMMUNITY,
 }
 export interface ConversationGroupTypeInfoProps {
-  groupType: string,
-  setGroupType: React.Dispatch<React.SetStateAction<string>>,
-  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>,
+  groupType: GroupType;
+  setGroupType: React.Dispatch<React.SetStateAction<GroupType>>;
+  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>;
 }
-export const typeInfoList = [
-  { type: 'Work', des: 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.' },
-  { type: 'Public', des: 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.' },
-  { type: 'Meeting', des: 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.' },
-  { type: 'AVChatRoom', des: 'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.' },
-  { type: 'Community', des: 'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.' },
+export const typeInfoList: Array<{ type: GroupType; name: string; des: string }> = [
+  { type: GroupType.Work, name: 'Work', des: 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.' },
+  { type: GroupType.Public, name: 'Public', des: 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.' },
+  { type: GroupType.Meeting, name: 'Meeting', des: 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.' },
+  { type: GroupType.AVChatRoom, name: 'AVChatRoom', des: 'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.' },
+  { type: GroupType.Community, name: 'Community', des: 'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.' },
 ];
 export function ConversationGroupTypeInfo(props: ConversationGroupTypeInfoProps) {
   const { groupType, setGroupType, setPageState } = props;
 
   const { t } = useTranslation();
-  const selectGroupType = (type: string) => {
+  const selectGroupType = (type: GroupType) => {
     setGroupType(type);
     setPageState(PageStateTypes.CREATE_DETAIL);
   };
   return (
     <div className="tui-conversation-group-type-info">
-      {typeInfoList.map(({ type, des }) => (
+      {typeInfoList.map(({ type, name, des }) => (
         <div
           key={type}
           role="presentation"
@@ -43,12 +43,12 @@ export function ConversationGroupTypeInfo(props: ConversationGroupTypeInfoProps)
         >
           <div className="group-type-info-title">
             {type === groupType && <Icon className="box-active-icon" type={IconTypes.RIGHT} width={16} height={16} />}
-            {t(`TUIConversation.${type}`)}
+            {t(`TUIConversation.${name}`)}
           </div>
           <div className="group-type-info-description">{t(`TUIConversation.${des}`)}</div>
         </div>
       ))}
-      <a className="group-type-info-document" target="_blank" href="https://www.tencentcloud.com/document/product/1047/33515?lang=en&pg=#group-features" rel="bookmark noreferrer">{t('TUIConversation.Details')}</a>
+      <a className="group-type-info-document" target="_blank" href="https://trtc.io/document/33529?platform=web&product=chat&menulabel=uikit#group-types" rel="bookmark noreferrer">{t('TUIConversation.Details')}</a>
     </div>
   );
 }

package/src/components/ConversationCreate/hooks/useConversationCreate.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import TencentCloudChat, { Conversation, Friend, Profile } from '@tencentcloud/chat';
+import { StoreName, TUIStore, TUIUserService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import TencentCloudChat, { Friend, Profile } from '@tencentcloud/chat';
 import { strChineseFirstPy } from '../static/word';
-import { useProfile } from '../../../hooks';
 
 export const useConversationCreate = (
-  chat: any,
-  conversationList: Conversation[],
+  conversationList: IConversationModel[],
   setFriendListResultHandler?: (
     newFriendListResult: object,
     setFriendListResult: React.Dispatch<React.SetStateAction<{ string: object[] }>>
@@ -20,30 +19,27 @@ export const useConversationCreate = (
     }
     return strChineseFirstPy.charAt(uni - 19968);
   };
-  const queryFriendList = async () => {
+  const queryFriendList = async (friendList: Friend[]) => {
     const frequentlyConversationProfile = conversationList.filter(
-      (item: Conversation) => item?.type === TencentCloudChat.TYPES.CONV_C2C,
-    ).slice(0, 5).map((item: Conversation) => item?.userProfile);
-    const { code, data } = await chat?.getFriendList() || {};
-    if (code === 0) {
-      const sortResult = handleData(
-        data.map((item: Friend) => item.profile),
-        frequentlyConversationProfile,
-      );
-      setFriendListSortResult(sortResult);
-      if (setFriendListResultHandler) {
-        setFriendListResultHandler(sortResult, setFriendListSortResult);
-      }
+      (item: IConversationModel) => item?.type === TencentCloudChat.TYPES.CONV_C2C,
+    ).slice(0, 5).map((item: IConversationModel) => item?.userProfile);
+    const sortResult = handleData(
+      friendList?.map((item: Friend) => item.profile),
+      frequentlyConversationProfile,
+    );
+    setFriendListSortResult(sortResult);
+    if (setFriendListResultHandler) {
+      setFriendListResultHandler(sortResult, setFriendListSortResult);
     }
   };
-  const handleData = (profileList: Profile[], frequentlyConversationProfile?: any) => {
+  function handleData(profileList: Profile[], frequentlyConversationProfile?: any) {
     const sortResult: any = {
       '#': [],
     };
     for (let i = 65; i <= 90; i += 1) {
       sortResult[String.fromCharCode(i)] = [];
     }
-    profileList.forEach((profile) => {
+    profileList?.forEach((profile) => {
       const { nick, userID } = profile;
       const first = getFirstLetter(nick || userID);
       if (first >= 'a' && first <= 'z') {
@@ -58,21 +54,20 @@ export const useConversationCreate = (
       sortResult[key].sort((a: any, b: any) => {
         const { nick: aNick, userID: aUserID } = a;
         const { nick: bNick, userID: bUserID } = b;
-        if (aNick || aUserID < bNick || bUserID) {
-          return 1;
-        } if (aNick || aUserID === bNick || bUserID) {
+        if (aNick || aUserID <= bNick || bUserID) {
           return 1;
         }
         return -1;
       });
     });
     return sortResult;
-  };
-  const { getUserProfile } = useProfile(chat);
+  }
+  // const { getUserProfile } = useProfile();
   const getFriendListSortSearchResult = async (searchValue: string) => {
     if (!searchValue) return friendListSortResult;
-    const { data: profileList } = await getUserProfile([searchValue]);
-
+    const { data } = await TUIUserService.getUserProfile({
+      userIDList: [searchValue],
+    });
     const result: any = {};
     let isIncludes = false;
     Object.keys(friendListSortResult).forEach((key) => {
@@ -97,11 +92,23 @@ export const useConversationCreate = (
     if (process.env?.REACT_APP_ONLINE === 'TencentCloudDemo') {
       return result;
     }
-    return !isIncludes ? handleData(profileList) : result;
+    return !isIncludes ? handleData(data) : result;
   };
+
+  function onFriendListUpdated(list: Friend[]) {
+    queryFriendList(list);
+  }
+
   useEffect(() => {
-    queryFriendList();
-  }, [chat]);
+    TUIStore.watch(StoreName.FRIEND, {
+      friendList: onFriendListUpdated,
+    });
+    return () => {
+      TUIStore.unwatch(StoreName.FRIEND, {
+        friendList: onFriendListUpdated,
+      });
+    };
+  }, []);
   return {
     getFirstLetter,
     queryFriendList,

package/src/components/ConversationCreate/index.ts

@@ -1,6 +1,7 @@
 export * from './ConversationCreate';
 export * from './ConversationCreateSelectView';
-export * from './ConversationCreatGroupDetail';
+export * from './ConversationCreateGroupDetail';
 export * from './ConversationCreateUserSelectList';
 export * from './hooks/useConversationCreate';
 export * from './ConversationGroupTypeInfo';
+export * from './ConversationCreateButton';

package/src/components/ConversationCreate/styles/{ConversationCreatGroupDetail.scss → ConversationCreateGroupDetail.scss}

@@ -1,6 +1,11 @@
 @use "../../../styles/colors/color-theme" as *;
 
 .tui-conversation-create-group-detail {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  overflow-y: scroll;
+
   @include theme() {
     color: get(text-color-primary);
   }
@@ -49,7 +54,7 @@
         align-items: center;
         display: flex;
         flex-direction: column;
-        width: calc((100% - 10px) / 6);
+        // width: calc((100% - 10px) / 6);
         padding: 6px;
         box-sizing: border-box;
 

package/src/components/ConversationCreate/styles/conversationCreateButton.scss

@@ -0,0 +1,5 @@
+.tui-conversation-create-button {
+  display: flex;
+  align-items: center;
+  margin: 10px;
+}

package/src/components/ConversationCreate/styles/index.scss

@@ -1,5 +1,29 @@
 @use "../../../styles/colors/color-theme" as *;
 
+.uikit-conversation-create-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tui-conversation-create {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}
+
 .tui-conversation-create-header {
   display: flex;
   flex-direction: row;
@@ -24,6 +48,12 @@
   }
 }
 
+.tui-conversation-create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .tui-conversation-create-search-input {
   margin: 10px;
 }
@@ -92,10 +122,12 @@
   }
 }
 
-.tui-conversation-create {
+.tui-conversation-create-select-list-container {
   overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 10px;
 
-  .tui-conversation-create-container {
+  .tui-conversation-create-select-list {
     position: relative;
 
     .tui-group-container {

package/src/components/ConversationList/ConversationList.scss

@@ -0,0 +1,29 @@
+@use "../../styles/colors/color-theme" as *;
+
+.uikit-chat-list {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+
+  .uikit-chat-list__header--searching {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .uikit-chat-list__header--creating {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}