@tencentcloud/chat-uikit-react 0.0.1

package/dist/esm/index.d.ts

@@ -0,0 +1,29 @@
+export { ChatProps, TUIKit } from './components/TUIKit/TUIKit.js';
+export { UseChatParams, useTUIKit } from './components/TUIKit/hooks/useTUIKit.js';
+export { useCreateTUIKitContext } from './components/TUIKit/hooks/useCreateTUIKitContext.js';
+export { TUIConversation, UnMemoizedTUIConversation } from './components/TUIConversation/TUIConversation.js';
+export { TUIConversationList, UnMemoTUIConversationList } from './components/TUIConversationList/TUIConversationList.js';
+export { TUIChat } from './components/TUIChat/TUIChat.js';
+export { TUIKitContext, TUIKitContextValue, TUIKitProvider, useTUIKitContext } from './context/TUIKitContext.js';
+export { TUIChatStateContext, TUIChatStateContextProvider, TUIChatStateContextValue, useTUIChatStateContext } from './context/TUIChatStateContext.js';
+export { TUIChatActionContext, TUIChatActionContextValue, TUIChatActionProvider, useTUIChatActionContext } from './context/TUIChatActionContext.js';
+export { TUIMessageContext, TUIMessageContextProvider, TUIMessageContextValue, useTUIMessageContext } from './context/TUIMessageContext.js';
+export { ComponentContext, ComponentContextValue, ComponentProvider, UnknowPorps, useComponentContext } from './context/ComponentContext.js';
+export { TUIMessageInputContext, TUIMessageInputContextProvider, TUIMessageInputContextValue, useTUIMessageInputContext } from './context/TUIMessageInputContext.js';
+export { ConversationPreview, ConversationPreviewProps, ConversationPreviewUIComponentProps } from './components/ConversationPreview/ConversationPreview.js';
+export { ConversationPreviewContent, unMemoConversationPreviewContent } from './components/ConversationPreview/ConversationPreviewContent.js';
+export { TUIChatHeader } from './components/TUIChatHeader/TUIChatHeader.js';
+export { TUIChatHeaderDefault, TUIChatHeaderDefaultProps } from './components/TUIChatHeader/TUIChatHeaderDefault.js';
+export { TUIMessageList } from './components/TUIMessageList/TUIMessageList.js';
+export { TUIMessageInput, TUIMessageInputProps } from './components/TUIMessageInput/TUIMessageInput.js';
+export { TUIMessageInputDefault } from './components/TUIMessageInput/TUIMessageInputDefault.js';
+export { InputPluginsDefalut } from './components/TUIMessageInput/InputPluginsDefalut.js';
+export { TUIProfile } from './components/TUIProfile/TUIProfile.js';
+export { TUIProfileDefault, TUIProfileDefaultProps } from './components/TUIProfile/TUIProfileDefault.js';
+export { Avatar, AvatarProps } from './components/Avatar/Avatar.js';
+export { defaultGroupAvatarAVChatRoom, defaultGroupAvatarMeeting, defaultGroupAvatarPublic, defaultGroupAvatarWork, defaultUserAvatar } from './components/Avatar/default.js';
+export { ConversationSearchInput } from './components/ConversationSearch/ConversationSearchInput.js';
+export { ConversationSearchResult, ConversationSearchResultProps } from './components/ConversationSearch/ConversationSearchResult.js';
+export { TUIManage } from './components/TUIManage/TUIManage.js';
+export { CreateGroupConversationParams, useConversation } from './hooks/useConversation.js';
+export { useProfile } from './hooks/useProfile.js';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"tslib";import"react";import"tim-js-sdk";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@tencentcloud/chat-uikit-react",
+  "version": "0.0.1",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "chat",
+    "im",
+    "messaging",
+    "conversation",
+    "typescript"
+  ],
+  "scripts": {
+    "build": "yarn clean && yarn run rollup -c",
+    "start": "yarn run rollup -c -w",
+    "clean": "rimraf ./dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TencentCloud/chat-uikit-react.git"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^14.1.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-url": "^7.0.0",
+    "@types/react": "^18.0.20",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "autoprefixer": "^10.4.11",
+    "eslint": "^8.23.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.16",
+    "react": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.79.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.54.9",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.3"
+  },
+  "dependencies": {
+    "date-fns": "^2.29.3",
+    "react-date-picker": "^9.0.0",
+    "tim-js-sdk": "^2.24.2",
+    "tim-upload-plugin": "^1.0.5"
+  },
+  "peerDependencies": {
+    "date-fns": "^2.29.3",
+    "react": "^18.2.0",
+    "tim-js-sdk": "^2.24.2",
+    "tim-upload-plugin": "^1.0.5",
+    "tslib": "^2.4.1"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,66 @@
+import { babel } from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import dts from 'rollup-plugin-dts';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+import autoprefixer from 'autoprefixer';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import url from '@rollup/plugin-url';
+
+const baseConfig = {
+  input: [
+    './src/index.ts',
+  ],
+  output: [
+    {
+      preserveModules: true,
+      preserveModulesRoot: './src',
+      dir: './dist/esm/',
+      format: 'esm',
+      // sourcemap: true,
+    },
+    {
+      preserveModules: true,
+      preserveModulesRoot: './src',
+      dir: './dist/cjs/',
+      format: 'cjs',
+      // sourcemap: true,
+    },
+  ],
+};
+export default [
+  {
+    ...baseConfig,
+    plugins: [
+      url(),
+      postcss({
+        extract: true,
+        minimize: true,
+        plugins: [
+          autoprefixer(),
+        ],
+      }),
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      babel({
+        extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', 'ts', 'tsx'],
+      }),
+      typescript(),
+      terser(),
+    ],
+    external: ['react', 'date-fns', 'tslib'],
+  },
+  {
+    ...baseConfig,
+    plugins: [
+      postcss({
+        extract: true,
+        plugins: [],
+      }),
+      dts(),
+    ],
+  },
+];

package/src/@types/images.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.bmp'
+declare module '*.tiff'

package/src/@types/index.d.ts

@@ -0,0 +1 @@
+export default TIM;

package/src/@types/index.js

@@ -0,0 +1,3 @@
+import TIM from 'tim-js-sdk/tim-js-friendship';
+
+export default TIM;

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Icon, IconTypes } from '../Icon';
+import './styles/index.scss';
+
+export interface AvatarProps {
+  image?: string | null,
+  /** click event handler */
+  onClick?: (event: React.BaseSyntheticEvent) => void,
+  /** mouseOver event handler */
+  onMouseOver?: (event: React.BaseSyntheticEvent) => void,
+  /** Size in pixels
+   * @default 32px
+   */
+  size?: number,
+  /** Shape of the avatar - circle, rounded or square
+   * @default circle
+   */
+  shape?: 'circle' | 'rounded' | 'square';
+  update?: (url:string) => void,
+  list?: Array<string>,
+}
+export function Avatar<T extends AvatarProps>(props:T):React.ReactElement {
+  const {
+    image,
+    size = 32,
+    shape = 'circle',
+    update,
+    onClick,
+    list = [],
+  } = props;
+
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [isEdit, setIsEdit] = useState(false);
+  const [avatarListWidth, setAvatarListWidth] = useState(200);
+
+  const avatarRef = useRef<HTMLDivElement>();
+  const avatarListRef = useRef<HTMLUListElement>();
+
+  useEffect(() => {
+    setError(false);
+    setLoaded(false);
+  }, [image]);
+
+  useEffect(() => {
+    if (isEdit && update) {
+      window.addEventListener('mouseup', toggle, false);
+      avatarRef?.current?.addEventListener('mouseup', stopImmediatePropagation);
+      setAvatarListWidth(avatarListRef?.current?.clientWidth);
+    } else {
+      window.removeEventListener('mouseup', toggle, false);
+      avatarRef?.current?.removeEventListener('mouseup', stopImmediatePropagation);
+    }
+    return () => {
+      window.removeEventListener('mouseup', toggle, false);
+      avatarRef?.current?.removeEventListener('mouseup', stopImmediatePropagation);
+    };
+  }, [isEdit]);
+
+  const stopImmediatePropagation = (e) => {
+    e.stopPropagation();
+  };
+
+  const toggle = () => {
+    setIsEdit(!isEdit);
+  };
+
+  const handleUpdate = (value:string) => {
+    toggle();
+    update(value);
+  };
+
+  return (
+    <div
+      className={`tui-kit-avatar ${shape}`}
+      style={{
+        flexBasis: `${size}px`,
+        height: `${size}px`,
+        objectFit: 'cover',
+        width: `${size}px`,
+      }}
+      ref={avatarRef}
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+    >
+      {image && !error ? (
+        <img
+          className={`avatar-image ${loaded ? 'avatar-image-loaded' : ''}`}
+          onError={() => setError(true)}
+          onLoad={() => setLoaded(true)}
+          alt={image}
+          src={image}
+        />
+      ) : (
+        <div
+          className={`tui-kit-avatar ${shape}`}
+          style={{
+            flexBasis: `${size}px`,
+            height: `${size}px`,
+            objectFit: 'cover',
+            width: `${size}px`,
+            backgroundColor: 'black',
+            borderRadius: `${shape === 'circle' ? '50%' : '4px'}`,
+          }}
+        />
+      )}
+      {
+        update && (
+          <div className={`tui-kit-avatar-edit ${isEdit ? 'displayFlex' : ''}`} role="button" tabIndex={0} onClick={toggle}>
+            <Icon className="icon-camera" width={33} height={30} type={IconTypes.CAMERA} />
+          </div>
+        )
+      }
+      {
+        update && isEdit && (
+          <ul
+            className="tui-kit-avatar-list"
+            ref={avatarListRef}
+            style={{
+              left: `-${(avatarListWidth - size) / 2}px`,
+            }}
+          >
+            {
+              list.map((item:string, index:number) => {
+                const key = `${item}${index}`;
+                return (
+                  <li
+                    className="tui-kit-avatar-list-item"
+                    role="menuitem"
+                    key={key}
+                    tabIndex={index}
+                    onClick={() => { handleUpdate(item); }}
+                  >
+                    <img
+                      className="avatar-image"
+                      alt={item}
+                      src={item}
+                    />
+                  </li>
+                );
+              })
+            }
+
+          </ul>
+        )
+      }
+
+    </div>
+  );
+}

package/src/components/Avatar/default.ts

@@ -0,0 +1,5 @@
+export const defaultGroupAvatarWork = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_work.png';
+export const defaultGroupAvatarPublic = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_public.png';
+export const defaultGroupAvatarMeeting = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_meeting.png';
+export const defaultGroupAvatarAVChatRoom = 'https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/group_avatar_AVChatRoom.png';
+export const defaultUserAvatar = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export * from './default';

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

@@ -0,0 +1,55 @@
+.tui-kit-avatar{
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  &.circle .avatar-image {
+    border-radius: 50%;
+  }
+  &.square .avatar-image {
+    border-radius: 4px;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  &:hover {
+    .tui-kit-avatar-edit {
+      display: flex;
+    }
+  }
+  &-edit {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.33);
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    display: none;
+    justify-content: center;
+    align-items: center;
+  }
+  &-list {
+    position: absolute;
+    z-index: 2;
+    top: 100%;
+    background: #FFFFFF;
+    border-radius: 5px;
+    box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    min-width: 200px;
+    max-width: 400px;
+    padding: 10px;
+    &-item {
+      padding: 10px;
+      img {
+        width: 40px;
+      }
+    }
+  }
+}
+

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Icon, IconTypes } from '../Icon';
+
+import './styles/index.scss';
+
+interface onChangeParams {
+  checked?: boolean,
+  value?: any,
+}
+
+interface SelectProps {
+  checked?: boolean,
+  className?: string,
+  onChange?: (data?: onChangeParams) => void,
+  value?: any,
+  id?: string,
+}
+
+export function Checkbox<
+T extends SelectProps
+>(props:React.PropsWithChildren<T>) {
+  const {
+    checked: propsChecked = false,
+    className,
+    onChange,
+    value = '',
+    id,
+  } = props;
+
+  const [checked, setChecked] = useState(propsChecked);
+
+  const handleChange = (e) => {
+    setChecked(e.target.checked);
+    if (onChange) {
+      onChange({
+        value,
+        checked: e.target.checked,
+      });
+    }
+  };
+
+  return (
+    <div
+      className={`${className} checkbox`}
+      role="menuitem"
+      tabIndex={0}
+    >
+      <input id={id} className="checkbox-input" onChange={handleChange} type="checkbox" checked={checked} value={value} />
+      { !checked && <i className="checkbox-default" />}
+      { checked && <Icon type={IconTypes.RIGHT} width={14} height={14} />}
+    </div>
+  );
+}

package/src/components/Checkbox/styles/color.scss

@@ -0,0 +1,11 @@
+.info {
+  background: #FFFFFF;
+}
+.warn {
+  color: #FFFFFF;
+  background: #faad14;
+}
+.error {
+  color: #FFFFFF;
+  background: #ff4d4f;
+}

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/Checkbox/styles/layout.scss

@@ -0,0 +1,25 @@
+.checkbox {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  &-default {
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border-radius: 14px;
+    border: 1px solid #DDDDDD;
+  }
+  &-input {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+}

package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { Conversation, Profile } from 'tim-js-sdk';
+import { Input } from '../Input';
+import './styles/ConversationCreatGroupDetail.scss';
+import { Icon, IconTypes } from '../Icon';
+import {
+  Avatar,
+  defaultGroupAvatarWork,
+  defaultGroupAvatarAVChatRoom,
+  defaultGroupAvatarMeeting,
+  defaultGroupAvatarPublic, defaultUserAvatar,
+} from '../Avatar';
+import { PageStateTypes } from './ConversationCreate';
+import { ConversationGroupTypeInfo, GroupType, typeInfoList } from './ConversationGroupTypeInfo';
+import { useTUIKitContext } from '../../context';
+import { CreateGroupConversationParams } from '../../hooks';
+
+export interface ConversationCreatGroupDetailProps {
+  profileList: Array<Profile>,
+  pageState: PageStateTypes,
+  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>,
+  createConversation: (params: string | CreateGroupConversationParams) => Promise<Conversation>,
+  setConversationCreated: React.Dispatch<React.SetStateAction<boolean>>,
+}
+
+export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetailProps) {
+  const {
+    profileList, pageState, setPageState, createConversation, setConversationCreated,
+  } = props;
+  const { setActiveConversation, myProfile } = useTUIKitContext();
+  const temp = [...profileList];
+  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('Work');
+  const groupInfoChange = (e, type) => {
+    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) => {
+    switch (type) {
+      case 'Work':
+        return defaultGroupAvatarWork;
+      case 'Public':
+        return defaultGroupAvatarPublic;
+      case 'Meeting':
+        return defaultGroupAvatarMeeting;
+      case 'AVChatRoom':
+        return defaultGroupAvatarAVChatRoom;
+      default:
+        return '';
+    }
+  };
+  const getDes = () => typeInfoList.find((item) => item.type === groupType).des;
+
+  const next = async () => {
+    const avatar = getDefaultAvatar(groupType);
+    const conversation = await createConversation({
+      name: groupName, type: GroupType[groupType], groupID, avatar,
+    });
+    setActiveConversation(conversation);
+    setConversationCreated(false);
+  };
+  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"
+            customClassName="input-group-name"
+            clearable
+            prefix={<div className="input-group-title">Group Name</div>}
+          />
+        </div>
+        <div className="create-group-box create-group-id">
+          <Input
+            border="bottom"
+            customClassName="input-group-text"
+            clearable
+            value={groupID}
+            onChange={(e) => {
+              groupInfoChange(e, 'id');
+            }}
+            prefix={<div className="input-group-title">Group ID</div>}
+          />
+        </div>
+        <div className="create-group-box create-group-type">
+          <Input
+            disabled
+            border="bottom"
+            customClassName="input-group-text"
+            prefix={<div className="input-group-title">Group of type</div>}
+            suffix={(
+              <Icon
+                onClick={showGroupTypeInfo}
+                type={IconTypes.ARROW_RIGHT}
+                width={7}
+                height={12}
+              />
+            )}
+            value={groupType}
+            onChange={(e) => {
+              groupInfoChange(e, 'type');
+            }}
+          />
+        </div>
+        <div className="create-group-illustrate">
+          {getDes()}
+        </div>
+        <div className="create-group-portrait">
+          <div className="create-group-portrait-title">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}>Create</div>
+      </div>
+    </>
+  ) : (
+    <ConversationGroupTypeInfo
+      groupType={groupType}
+      setGroupType={setGroupType}
+      setPageState={setPageState}
+    />
+  );
+}