@tencentcloud/chat-uikit-react 1.2.2 → 2.1.0

package/dist/esm/locales/en/TUIContact.js

@@ -1 +1 @@
-var e={"Enter a userID":"Enter a userID","Enter the verification info":"Enter the verification info","Request to join":"Request to join",Requested:"Requested",Accept:"Accept",Refuse:"Refuse",Handled:"Handled",Friend:"Friend","Send Message":"Send Message",Signature:"Signature","New Contacts":"New Contacts","Blocked List":"Blocked List","No Result":"No Result",ID:"ID",User:"User","Add Friend":"Add Friend",remark:"remark",block:"block","Delete friend":"Delete friend","waiting for verification":"waiting for verification","verification info":"verification info","Send application":"Send application",Agree:"Agree"};export{e as default};
+var e={"Enter a userID":"Enter a userID","Enter the verification info":"Enter the verification info","Request to join":"Request to join",Requested:"Requested",Accept:"Accept",Refuse:"Refuse",Handled:"Handled",Friends:"Friends","Send Message":"Send Message",Signature:"Signature","New Contacts":"New Contacts","Blocked List":"Blocked List","No Result":"No Result",ID:"ID",User:"User","Add Friend":"Add Friend",remark:"remark",block:"block","Delete friend":"Delete friend","waiting for verification":"waiting for verification","verification info":"verification info","Send application":"Send application",Agree:"Agree"};export{e as default};

package/dist/esm/locales/en/TUIProfile.js

@@ -1 +1 @@
-var e={"Personal information":"Personal information",Signature:"Signature",Gender:"Gender",Male:"Male",Female:"Female",AllowType:"AllowType",NeedConfirm:"NeedConfirm",AllowAny:"AllowAny",DenyAny:"DenyAny",Birthday:"Birthday"};export{e as default};
+var e={"Personal information":"Personal information",Signature:"Signature",Gender:"Gender",Male:"Male",Female:"Female",AllowType:"Friend Request",NeedConfirm:"Anyone upon Request",AllowAny:"Allow any user to add you as friend",DenyAny:"Decline friend request from any user",Birthday:"Birthday",Unknow:"Not set"};export{e as default};

package/dist/esm/locales/index.js

@@ -1 +1 @@
-import e from"i18next";export{default as i18next}from"i18next";import{initReactI18next as t}from"react-i18next";import{message as r}from"./en/index.js";import{message as n}from"./zh_cn/index.js";var i={en:{translation:r},zh:{translation:n}};e.use(t).init({resources:i,lng:"zh",interpolation:{escapeValue:!1}});var o=e.t;export{o as t};
+import e from"i18next";export{default as i18next}from"i18next";import{initReactI18next as t}from"react-i18next";import{message as r}from"./en/index.js";import{message as n}from"./zh_cn/index.js";var i={en:{translation:r},zh:{translation:n}};e.use(t).init({resources:i,lng:"en",interpolation:{escapeValue:!1}});var o=e.t;export{o as t};

package/dist/esm/locales/zh_cn/TUIChat.js

@@ -1 +1 @@
-var e={Recall:"撤回",Reference:"引用",Forward:"转发",Copy:"复制",Delete:"删除","Forward to":"转发给","recalled a message":"撤回了一条消息","Re-edit":"重新编辑",Resend:"重新发送",You:"您","Recent Chats":"会话","Frequently Contacted":"最近的会话","No Result":"无搜索结果","Search Result":"搜索结果",Image:"图片",Video:"视频",File:"文件","Enter a message":"请输入消息","No More":"没有更多","Error deleting message":"消息删除失败","The message recall exceeded the time limit (default 2 minutes)":"消息已超过 2 分钟","Error revoke Message":"消息撤回失败"};export{e as default};
+var e={Recall:"撤回",Reference:"引用",Forward:"转发",Copy:"复制",Delete:"删除","Forward to":"转发给","recalled a message":"撤回了一条消息","Re-edit":"重新编辑",Resend:"重新发送",You:"您","Recent Chats":"会话","Frequently Contacted":"最近的会话","No Result":"无搜索结果","Search Result":"搜索结果",Image:"图片",Video:"视频",File:"文件","Enter a message":"请输入消息","No More":"没有更多","Error deleting message":"消息删除失败","The message recall exceeded the time limit (default 2 minutes)":"消息已超过 2 分钟","Error revoke Message":"消息撤回失败","Custom message":"自定义消息"};export{e as default};

package/dist/esm/locales/zh_cn/TUIContact.js

@@ -1 +1 @@
-var e={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friend:"我的好友","Send Message":"发送消息",Signature:"个性签名","Successful application, waiting for the administrator to agree to join the group application":"等待管理员同意","New Contacts":"新的联系人","Blocked List":"黑名单","No Result":"无搜索结果",ID:"ID",User:"联系人","Add Friend":"添加好友",remark:"备注",block:"加入黑名单","Delete friend":"删除好友","waiting for verification":"等待验证","verification info":"验证信息","Send application":"发送申请",Agree:"同意"};export{e as default};
+var e={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friends:"我的好友","Send Message":"发送消息",Signature:"个性签名","Successful application, waiting for the administrator to agree to join the group application":"等待管理员同意","New Contacts":"新的联系人","Blocked List":"黑名单","No Result":"无搜索结果",ID:"ID",User:"联系人","Add Friend":"添加好友",remark:"备注",block:"加入黑名单","Delete friend":"删除好友","waiting for verification":"等待验证","verification info":"验证信息","Send application":"发送申请",Agree:"同意"};export{e as default};

package/dist/esm/locales/zh_cn/TUIProfile.js

@@ -1 +1 @@
-var e={"Personal information":"个人信息",Signature:"个性签名",Gender:"性别",Male:"男",Female:"女",AllowType:"加好友验证方式",NeedConfirm:"需要验证",AllowAny:"同意任何用户加好友",DenyAny:"拒绝任何用户加好友",Birthday:"生日"};export{e as default};
+var e={"Personal information":"个人信息",Signature:"个性签名",Gender:"性别",Male:"男",Female:"女",AllowType:"加好友验证方式",NeedConfirm:"需要验证",AllowAny:"同意任何用户加好友",DenyAny:"拒绝任何用户加好友",Birthday:"生日",Unknown:"未设置"};export{e as default};

package/dist/esm/server.js

@@ -0,0 +1 @@
+import t,{TUIConstants as n,TUILogin as o}from"@tencentcloud/tui-core";import i from"@tencentcloud/chat-uikit-engine";var e=function(){function e(){t.registerEvent(n.TUILogin.EVENT.LOGIN_STATE_CHANGED,n.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,this)}return e.prototype.onNotifyEvent=function(t,o){if(t===n.TUILogin.EVENT.LOGIN_STATE_CHANGED&&o===n.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS)this.login()},e.prototype.login=function(){var t=o.getContext(),n=t.chat,e=t.SDKAppID,E=t.userID,r=t.userSig;i.login({chat:n,SDKAppID:e,userID:E,userSig:r})},e}();export{e as default};

package/dist/esm/utils/env.js

@@ -0,0 +1 @@
+import{getPlatform as r}from"@tencentcloud/universal-api";var e="pc"===r(),o="h5"===r();export{o as isH5,e as isPC};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "1.2.2",
+  "version": "2.1.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",
@@ -61,17 +61,18 @@
   "dependencies": {
     "date-fns": "^2.29.3",
     "react-date-picker": "^9.0.0",
-    "react-dom": "^18.2.0",
-    "tim-upload-plugin": "^1.0.5"
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "@tencentcloud/chat": "^3.2.0",
-    "i18next": "^23.7.11",
-    "react-i18next": "^13.5.0",
+    "@tencentcloud/chat-uikit-engine": "latest",
+    "@tencentcloud/tui-core": "latest",
+    "@tencentcloud/universal-api": "latest",
     "date-fns": "^2.29.3",
+    "i18next": "^23.7.11",
     "react": "^18.2.0",
     "react-date-picker": "^9.0.0",
-    "tim-upload-plugin": "^1.0.5",
+    "react-i18next": "^13.5.0",
     "tslib": "^2.4.1"
   }
 }

package/rollup.config.js

@@ -19,7 +19,6 @@ const baseConfig = {
       preserveModulesRoot: './src',
       dir: './dist/esm/',
       format: 'esm',
-      // sourcemap: true,
     },
     {
       preserveModules: true,

package/scripts/publish-github.js

@@ -0,0 +1,60 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Change directory to tuikit/examples/sample-chat
+process.chdir(path.join('examples', 'sample-chat'));
+
+// Remove .env file
+fs.unlinkSync('.env');
+
+// Remove package.json
+fs.unlinkSync('package.json');
+
+// Rename package-github.json to package.json
+fs.renameSync('package-github.json', 'package.json');
+
+// Change directory to src
+process.chdir('src');
+
+// Remove demo directory
+fs.rmdirSync('demo', { recursive: true });
+
+// Rename 'components' directory to 'demo'
+fs.renameSync('components', 'demo');
+
+// Remove social-demo to demo
+fs.rmdirSync('social-demo', { recursive: true });
+
+// Change directory to live-demo
+process.chdir('live-demo');
+
+// Remove live-demo.tsx file
+fs.unlinkSync('live-demo.tsx');
+
+// Change directory back to src
+process.chdir('../');
+
+// Copy live-demo directory to ../../live-chat/src
+execSync('cp -r live-demo ../../live-chat/src');
+
+// Remove live-demo directory
+fs.rmdirSync('live-demo', { recursive: true });
+
+// Remove bot-demo directory
+fs.rmdirSync('bot-demo', { recursive: true });
+
+// Change directory to debug
+process.chdir('debug');
+
+// Replace 20000737 with 0 in GenerateTestUserSig.js
+fs.writeFileSync('GenerateTestUserSig.js', fs.readFileSync('GenerateTestUserSig.js', 'utf8').replace(/20000737/g, '0'));
+
+// Change directory back to src
+process.chdir('../');
+
+// Change directory to ../../live-chat/src/debug
+process.chdir(path.join('../', '../', 'live-chat', 'src', 'debug'));
+
+// Replace 20000737 with 0 in GenerateTestUserSig.js
+fs.writeFileSync('GenerateTestUserSig.js', fs.readFileSync('GenerateTestUserSig.js', 'utf8').replace(/20000737/g, '0'));

package/scripts/publish-intl-demo.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Change directory to tuikit/examples/sample-chat
+process.chdir(path.join('examples', 'sample-chat'));
+
+// Change directory to src
+process.chdir('src');
+process.chdir('social-demo');
+// Remove file
+fs.unlinkSync('index.tsx');
+// Rename index-intl.tsx to index
+fs.renameSync('index-intl.tsx', 'index.tsx');

package/scripts/publish-npm.js

@@ -0,0 +1,22 @@
+// npm publish
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+let npmToken = '';
+const myArgs = process.argv.slice(2);
+myArgs.forEach((arg) => {
+  if (arg.includes('=')) {
+    const [key, value] = arg.split('=');
+    if (key === 'npmToken' && value) {
+      npmToken = value;
+    }
+  }
+});
+if (!npmToken) {
+  console.log('not publish npmToken, cant publish npm');
+} else {
+  fs.writeFileSync(path.resolve(os.homedir(), '.npmrc'), `//registry.npmjs.org/:_authToken=${npmToken}`);
+  const content = fs.readFileSync(path.resolve(os.homedir(), '.npmrc'), { encoding: 'utf8' });
+  console.log('content: ', content);
+}

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

@@ -3,6 +3,7 @@
   align-items: center;
   position: relative;
   cursor: pointer;
+  flex-shrink: 0;
   &.circle .avatar-image {
     border-radius: 50%;
   }

package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import TencentCloudChat, { Conversation, Profile } from '@tencentcloud/chat';
+import { Conversation, Profile } from '@tencentcloud/chat';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
 import { Input } from '../Input';
 import './styles/ConversationCreatGroupDetail.scss';
 import { Icon, IconTypes } from '../Icon';
@@ -81,6 +82,8 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
       name: groupName, type: GroupType[groupType], groupID, avatar, memberList,
     });
     setActiveConversation(conversation);
+    // 切换会话
+    TUIConversationService.switchConversation(conversation?.conversationID);
     setConversationCreated(false);
   };
   return pageState !== PageStateTypes.GROUP_TYPE ? (
@@ -111,9 +114,9 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
             prefix={<div className="input-group-title">{t('TUIConversation.Group ID')}</div>}
           />
         </div>
-        <div className="create-group-box create-group-type">
+        <div className="create-group-box create-group-type" onClick={showGroupTypeInfo}>
           <Input
-            disabled
+            readOnly
             border="bottom"
             customClassName="input-group-text"
             prefix={<div className="input-group-title">{t('TUIConversation.Group Type')}</div>}

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -1,6 +1,9 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Conversation } from '@tencentcloud/chat';
+import {
+  TUIConversationService,
+} from '@tencentcloud/chat-uikit-engine';
 import { Input } from '../Input';
 import { Icon, IconTypes } from '../Icon';
 import { ConversationCreateSelectView, ConversationCreateSelectViewProps } from './ConversationCreateSelectView';
@@ -80,6 +83,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     const conversation = await createConversation(`C2C${userID}`);
     setConversationCreated(false);
     setActiveConversation(conversation);
+    TUIConversationService.switchConversation(conversation?.conversationID);
   };
   const next = () => {
     if (selectList && selectList.length === 0) {
@@ -127,7 +131,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
                         }}
                       >
                         <Avatar size={30} image={avatar || defaultUserAvatar} />
-                        <div className="tui-user-name">{nick || `${userID}` }</div>
+                        <div className="tui-user-name text-ellipsis">{nick || `${userID}` }</div>
                         {isCreateGroup && (
                           <input
                             onChange={(e) => {

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

@@ -80,8 +80,13 @@ export const useConversationCreate = (
         ({ nick, userID }) => {
           const tempNick = nick.toLocaleLowerCase();
           const tempSearchValue = searchValue.toLocaleLowerCase();
-          const includes = tempNick
-            ? tempNick.includes(tempSearchValue) : userID.includes(tempSearchValue);
+          const userIDValue = userID.toLocaleLowerCase();
+          let includes;
+          if (process.env?.REACT_APP_ONLINE === 'TencentCloudDemo') {
+            includes = tempNick ? tempNick.includes(tempSearchValue) : userIDValue.includes(tempSearchValue);
+          } else {
+            includes = userIDValue === tempSearchValue;
+          }
           isIncludes = isIncludes || includes;
           return includes;
         },

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

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   padding: 0 10px;
+  overflow-y: scroll;
 
   .group-type-info-box {
     display: flex;

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

@@ -34,6 +34,8 @@
     font-family: PingFangSC-Medium;
     line-height: 20px;
     color: #000000;
+    width: 80%;
+    text-align: left;
     &.active {
       font-weight: 600;
       font-size: 14px;

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -30,6 +30,8 @@ export interface ConversationPreviewProps {
   setActiveConversation?: TUIKitContextValue['setActiveConversation'],
   searchValue?: string,
   conversationUpdateCount?: number
+  activeConversationID?: string,
+  setActiveConversationID?: (conversationID: string) => void,
 }
 export function ConversationPreview<T extends ConversationPreviewProps>(
   props: T,

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -1,6 +1,9 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import { isPC } from '../../utils/env';
 import { ConversationPreviewUIComponentProps } from './ConversationPreview';
+
 import { Avatar as DefaultAvatar } from '../Avatar/index';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
@@ -20,16 +23,23 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
     displayTime,
     unread,
     active,
+    activeConversationID,
+    setActiveConversationID,
     setActiveConversation,
   } = props;
 
   const { t } = useTranslation();
   const conversationPreviewButton = useRef<HTMLButtonElement | null>(null);
+  const { chat, conversation: activeConversation } = useTUIKitContext('ConversationPreviewContent');
+  const { pinConversation, deleteConversation } = useConversation(chat);
   const activeClass = active ? 'conversation-preview-content--active' : '';
   const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
   const pinClass = conversation.isPinned ? 'conversation-preview-content--pin' : '';
   const [isHover, setIsHover] = useState(false);
+  const pluginsRef = useRef(null);
+
   const onSelectConversation = () => {
+    TUIConversationService.switchConversation(conversation?.conversationID);
     if (setActiveConversation) {
       setActiveConversation(conversation);
     }
@@ -43,10 +53,46 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const { chat, conversation: activeConversation } = useTUIKitContext('ConversationPreviewContent');
-  const { pinConversation, deleteConversation } = useConversation(chat);
-  const moreHandle = (type: string) => {
+  useEffect(() => {
+    if (activeConversationID !== conversation.conversationID) {
+      setIsHover(false);
+    }
+  }, [activeConversationID]);
+  // h5 long press
+  let timer: any;
+  const handleH5LongPress = (type: string) => {
+    if (isPC) return;
+    const { conversationID } = conversation;
+    setActiveConversationID(conversationID);
+    function longPressHandler() {
+      clearTimeout(timer);
+      setIsHover(true);
+    }
+    function touchStartHandler() {
+      timer = setTimeout(longPressHandler, 500);
+    }
+    function touchEndHandler() {
+      clearTimeout(timer);
+    }
+    switch (type) {
+      case 'touchstart':
+        touchStartHandler();
+        break;
+      case 'touchend':
+        touchEndHandler();
+        setTimeout(() => {
+          // setIsHover(false);
+        }, 200);
+        break;
+      default:
+    }
+  };
+
+  const moreHandle = (e: any, type: string) => {
     const { conversationID, isPinned } = conversation;
+    e.stopPropagation();
+    setIsHover(false);
+    pluginsRef.current.closeMore();
     switch (type) {
       case 'pin':
         pinConversation({ conversationID, isPinned: !isPinned });
@@ -60,6 +106,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
       default:
     }
   };
+
   return (
     <button
       type="button"
@@ -69,13 +116,15 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
       onClick={onSelectConversation}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onTouchStart={() => handleH5LongPress('touchstart')}
+      onTouchEnd={() => handleH5LongPress('touchend')}
       ref={conversationPreviewButton}
     >
       <div className="avatar">
         <Avatar image={displayImage} name={displayTitle} size={40} />
       </div>
       <div className="content">
-        <div className="title">
+        <div className="title text-ellipsis">
           {displayTitle}
         </div>
         <div className="message">
@@ -94,13 +143,13 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
             <div className={`${isHover ? 'more--hover' : 'more'}`}>
               <Plugins
                 customClass="more-handle-box"
+                ref={pluginsRef}
                 plugins={[
                   <div
                     role="presentation"
                     className="more-handle-item"
                     onClick={(e) => {
-                      e.stopPropagation();
-                      moreHandle('pin');
+                      moreHandle(e, 'pin');
                     }}
                   >
                     {t(!conversation.isPinned ? 'TUIConversation.Pin' : 'TUIConversation.Unpin')}
@@ -109,8 +158,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
                     className="more-handle-item"
                     style={{ color: '#FF584C' }}
                     onClick={(e) => {
-                      e.stopPropagation();
-                      moreHandle('delete');
+                      moreHandle(e, 'delete');
                     }}
                     role="presentation"
                   >

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

@@ -29,6 +29,8 @@ $font-color: #7A7A7A;
       line-height: 17px;
       font-family: PingFangSC-Medium;
       padding: 1px 0;
+      width: 100%;
+      color: #000;
     }
 
     .message {
@@ -69,8 +71,8 @@ $font-color: #7A7A7A;
 
     .more--hover {
       display: flex;
-      justify-content: right;
-
+      justify-content: flex-end;
+      flex: 1 1;
       .icon-more {
         transform: scale(1.5);
         &:hover {

package/src/components/ConversationPreview/utils.tsx

@@ -65,6 +65,10 @@ export const getDisplayMessage = (
   const {
     fromAccount, nick, nameCard, isRevoked,
   } = lastMessage;
+  let { messageForShow } = lastMessage;
+  if (lastMessage.type === TencentCloudChat.TYPES.MSG_CUSTOM && lastMessage.payload?.description) {
+    messageForShow = lastMessage.payload.description;
+  }
   let from = '';
   switch (type) {
     case TencentCloudChat.TYPES.CONV_GROUP:
@@ -84,7 +88,7 @@ export const getDisplayMessage = (
     }}
     >
       <span>{from}</span>
-      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(lastMessage.messageForShow, 1, language)}</span>
+      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(messageForShow, 1)}</span>
     </div>
   );
 };

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

@@ -3,6 +3,7 @@
   display: flex;
   max-width: 100%;
   box-sizing: border-box;
+  height: 30px;
   &-popup{
     flex: 1;
     display: flex;
@@ -57,7 +58,7 @@
       padding: 10px 0;
       &-list {
         &-item {
-          padding: 5px 10px;
+          padding: 7px 10px;
           &:hover {
             background: #f2f7ff;
           }

package/src/components/Icon/config.ts

@@ -9,7 +9,7 @@ import IconFileUrl from './images/file.png';
 import IconAddUrl from './images/add.png';
 import IconImageUrl from './images/image.png';
 import IconVideoUrl from './images/video.png';
-import IconDocumentUrl from './images/document.png';
+import IconDocumentUrl from './images/files.png';
 import IconStarUrl from './images/star.png';
 import IconCopyUrl from './images/copy.png';
 import IconDelUrl from './images/del.png';

package/src/components/Icon/images/chats-selected.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6893 18.3914C21.131 16.6584 21.998 14.4305 21.998 12.0001C21.998 6.47721 17.5209 2.00006 11.998 2.00006C6.4752 2.00006 1.99805 6.47721 1.99805 12.0001C1.99805 17.5229 6.4752 22.0001 11.998 22.0001C14.1036 22.0001 16.0571 21.3493 17.6686 20.238C17.6858 20.2471 17.7041 20.2552 17.7233 20.262L19.9382 21.0464C20.2554 21.1587 20.5611 20.853 20.4488 20.5358L19.6893 18.3914Z" fill="#147AFF" style="fill:#147AFF;fill:color(display-p3 0.0784 0.4784 1.0000);fill-opacity:1;"/>
+<circle cx="7.00195" cy="12" r="1.4" fill="white" stroke="#979797" style="fill:white;fill:white;fill-opacity:1;stroke:#979797;stroke:color(display-p3 0.5922 0.5922 0.5922);stroke-opacity:1;" stroke-width="0.2"/>
+<circle cx="12" cy="12" r="1.4" fill="white" stroke="#979797" style="fill:white;fill:white;fill-opacity:1;stroke:#979797;stroke:color(display-p3 0.5922 0.5922 0.5922);stroke-opacity:1;" stroke-width="0.2"/>
+<circle cx="16.998" cy="12" r="1.4" fill="white" stroke="#979797" style="fill:white;fill:white;fill-opacity:1;stroke:#979797;stroke:color(display-p3 0.5922 0.5922 0.5922);stroke-opacity:1;" stroke-width="0.2"/>
+</svg>

package/src/components/Icon/images/chats.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_91_53001" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6894 18.3919C21.131 16.659 21.998 14.4311 21.998 12.0007C21.998 6.47788 17.5209 2.00073 11.998 2.00073C6.4752 2.00073 1.99805 6.47788 1.99805 12.0007C1.99805 17.5236 6.4752 22.0007 11.998 22.0007C14.1037 22.0007 16.0574 21.3499 17.6689 20.2385C17.6861 20.2475 17.7042 20.2555 17.7233 20.2623L19.9382 21.0467C20.2554 21.159 20.5611 20.8533 20.4488 20.5361L19.6894 18.3919Z"/>
+</mask>
+<path d="M19.6894 18.3919L18.9207 17.7524L18.5569 18.1897L18.7468 18.7258L19.6894 18.3919ZM17.6689 20.2385L18.1349 19.3537L17.5993 19.0716L17.1011 19.4153L17.6689 20.2385ZM17.7233 20.2623L18.0571 19.3196L18.0571 19.3196L17.7233 20.2623ZM19.9382 21.0467L20.272 20.104H20.272L19.9382 21.0467ZM20.4488 20.5361L19.5062 20.8699V20.8699L20.4488 20.5361ZM20.998 12.0007C20.998 14.1889 20.2184 16.1924 18.9207 17.7524L20.4582 19.0315C22.0437 17.1256 22.998 14.6733 22.998 12.0007H20.998ZM11.998 3.00073C16.9686 3.00073 20.998 7.03017 20.998 12.0007H22.998C22.998 5.9256 18.0732 1.00073 11.998 1.00073V3.00073ZM2.99805 12.0007C2.99805 7.03017 7.02748 3.00073 11.998 3.00073V1.00073C5.92291 1.00073 0.998047 5.9256 0.998047 12.0007H2.99805ZM11.998 21.0007C7.02748 21.0007 2.99805 16.9713 2.99805 12.0007H0.998047C0.998047 18.0759 5.92291 23.0007 11.998 23.0007V21.0007ZM17.1011 19.4153C15.6512 20.4153 13.8945 21.0007 11.998 21.0007V23.0007C14.3129 23.0007 16.4635 22.2846 18.2366 21.0617L17.1011 19.4153ZM18.0571 19.3196C18.0834 19.3289 18.1094 19.3403 18.1349 19.3537L17.2028 21.1233C17.2627 21.1548 17.325 21.1821 17.3895 21.2049L18.0571 19.3196ZM20.272 20.104L18.0571 19.3196L17.3895 21.2049L19.6044 21.9893L20.272 20.104ZM19.5062 20.8699C19.3376 20.3941 19.7962 19.9355 20.272 20.104L19.6044 21.9893C20.7146 22.3825 21.7846 21.3125 21.3914 20.2023L19.5062 20.8699ZM18.7468 18.7258L19.5062 20.8699L21.3914 20.2023L20.6321 18.0581L18.7468 18.7258Z" fill="#666666" style="fill:#666666;fill:color(display-p3 0.4000 0.4000 0.4000);fill-opacity:1;" mask="url(#path-1-inside-1_91_53001)"/>
+<circle cx="7.00195" cy="12.0007" r="1.4" fill="#666666" stroke="#979797" style="fill:#666666;fill:color(display-p3 0.4000 0.4000 0.4000);fill-opacity:1;stroke:#979797;stroke:color(display-p3 0.5922 0.5922 0.5922);stroke-opacity:1;" stroke-width="0.2"/>
+<circle cx="12" cy="12.0007" r="1.4" fill="#666666" stroke="#979797" style="fill:#666666;fill:color(display-p3 0.4000 0.4000 0.4000);fill-opacity:1;stroke:#979797;stroke:color(display-p3 0.5922 0.5922 0.5922);stroke-opacity:1;" stroke-width="0.2"/>
+<circle cx="16.998" cy="12.0007" r="1.4" fill="#666666" stroke="#979797" style="fill:#666666;fill:color(display-p3 0.4000 0.4000 0.4000);fill-opacity:1;stroke:#979797;stroke:color(display-p3 0.5922 0.5922 0.5922);stroke-opacity:1;" stroke-width="0.2"/>
+</svg>

package/src/components/Icon/images/contacts-selected.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.60156 9.00028C5.60156 12.5349 8.46692 15.4003 12.0016 15.4003C15.5362 15.4003 18.4016 12.5349 18.4016 9.00028C18.4016 5.46564 15.5362 2.60028 12.0016 2.60028C8.46692 2.60028 5.60156 5.46564 5.60156 9.00028ZM5.20078 16.4003C3.8753 16.4003 2.80078 17.4748 2.80078 18.8003C2.80078 20.1257 3.87529 21.2003 5.20078 21.2003H18.8008C20.1263 21.2003 21.2008 20.1257 21.2008 18.8003C21.2008 17.4748 20.1263 16.4003 18.8008 16.4003H5.20078Z" fill="#147AFF" style="fill:#147AFF;fill:color(display-p3 0.0784 0.4784 1.0000);fill-opacity:1;"/>
+</svg>

package/src/components/Icon/images/contacts.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_251_63695" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.60156 8.99998C5.60156 12.5346 8.46692 15.4 12.0016 15.4C15.5362 15.4 18.4016 12.5346 18.4016 8.99998C18.4016 5.46534 15.5362 2.59998 12.0016 2.59998C8.46692 2.59998 5.60156 5.46534 5.60156 8.99998ZM5.20078 16.3999C3.8753 16.3999 2.80078 17.4745 2.80078 18.7999C2.80078 20.1254 3.87529 21.1999 5.20078 21.1999H18.8008C20.1263 21.1999 21.2008 20.1254 21.2008 18.7999C21.2008 17.4745 20.1263 16.3999 18.8008 16.3999H5.20078Z"/>
+</mask>
+<path d="M12.0016 14.4C9.01921 14.4 6.60156 11.9823 6.60156 8.99998H4.60156C4.60156 13.0869 7.91464 16.4 12.0016 16.4V14.4ZM17.4016 8.99998C17.4016 11.9823 14.9839 14.4 12.0016 14.4V16.4C16.0885 16.4 19.4016 13.0869 19.4016 8.99998H17.4016ZM12.0016 3.59998C14.9839 3.59998 17.4016 6.01762 17.4016 8.99998H19.4016C19.4016 4.91305 16.0885 1.59998 12.0016 1.59998V3.59998ZM6.60156 8.99998C6.60156 6.01762 9.01921 3.59998 12.0016 3.59998V1.59998C7.91464 1.59998 4.60156 4.91305 4.60156 8.99998H6.60156ZM3.80078 18.7999C3.80078 18.0267 4.42758 17.3999 5.20078 17.3999V15.3999C3.32301 15.3999 1.80078 16.9222 1.80078 18.7999H3.80078ZM5.20078 20.1999C4.42758 20.1999 3.80078 19.5731 3.80078 18.7999H1.80078C1.80078 20.6777 3.32301 22.1999 5.20078 22.1999V20.1999ZM18.8008 20.1999H5.20078V22.1999H18.8008V20.1999ZM20.2008 18.7999C20.2008 19.5731 19.574 20.1999 18.8008 20.1999V22.1999C20.6785 22.1999 22.2008 20.6777 22.2008 18.7999H20.2008ZM18.8008 17.3999C19.574 17.3999 20.2008 18.0267 20.2008 18.7999H22.2008C22.2008 16.9222 20.6786 15.3999 18.8008 15.3999V17.3999ZM5.20078 17.3999H18.8008V15.3999H5.20078V17.3999Z" fill="#666666" style="fill:#666666;fill:color(display-p3 0.4000 0.4000 0.4000);fill-opacity:1;" mask="url(#path-1-inside-1_251_63695)"/>
+</svg>

package/src/components/Icon/images/language.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 0C12.4183 0 16 3.57904 16 7.994C16 12.3811 12.4636 15.9425 8.08401 15.9875C7.99958 15.9962 7.91216 16.001 7.82151 16.001C7.4986 16.001 7.22747 15.9736 7.00487 15.9267C3.05622 15.4371 0 12.0723 0 7.994C0 3.57904 3.58176 0 8.00008 0ZM14.7002 6.93839C14.7804 7.31782 14.8331 7.70825 14.8561 8.10711C14.8567 8.06946 14.8571 8.03179 14.8571 7.994C14.8571 7.50047 14.8048 7.01915 14.7056 6.55521C14.7092 6.67455 14.7073 6.80291 14.7002 6.93839ZM1.14288 7.994C1.14288 7.50946 1.19333 7.03672 1.28906 6.58061C1.58518 6.89732 2.28314 6.88985 2.45336 6.41664C2.53779 6.46696 2.63027 6.50587 2.71984 6.54356C2.95338 6.64182 3.1672 6.73178 3.1672 6.99401C3.1672 8.19137 3.20983 9.47505 4.29776 9.49488C4.32839 9.49528 4.90447 9.71321 5.17864 10.4242C5.23807 10.5783 5.40759 10.5392 5.62711 10.4886L5.62713 10.4886C5.75779 10.4585 5.90618 10.4242 6.0596 10.4242C6.17731 10.4242 6.16003 10.5379 6.12387 10.7759C6.09696 10.953 6.0596 11.1989 6.0596 11.5179C6.0596 12.2629 7.66569 13.4099 7.66569 13.4099C7.65825 13.903 7.67849 14.3018 7.71953 14.6203C7.357 14.6136 7.05148 14.6617 6.81145 14.7434C3.5909 14.181 1.14288 11.3733 1.14288 7.994ZM9.21337 14.442C9.49712 14.3674 9.65264 14.4627 9.68819 14.6368C12.0471 14.04 13.9188 12.2217 14.5897 9.89483C14.0622 11.0246 12.9927 11.2912 13.221 10.6254C13.0113 10.2847 12.6891 9.81032 12.3512 9.49488C11.709 8.89481 11.2087 7.8469 13.1633 6.34441C12.7985 5.36833 13.8738 4.56746 14.3169 5.67409C14.3795 5.6804 14.4338 5.70624 14.4804 5.74877C13.5585 3.09172 11.0465 1.17722 8.08199 1.14253C9.54733 1.29592 9.65581 2.72901 8.67032 2.5749C8.64681 2.9241 8.61168 3.39394 8.56928 3.79962C8.52449 4.23017 8.19628 4.32542 7.89368 4.41324C7.69851 4.46988 7.514 4.52343 7.42304 4.66185C7.19649 5.00633 7.84344 5.37281 8.57568 5.20377C8.68207 5.17899 8.6774 5.10455 8.67301 5.03452C8.66933 4.97591 8.66584 4.92039 8.72784 4.89969C9.13104 4.7644 9.63496 4.81672 9.65961 4.88008C9.68995 4.95872 9.463 5.35797 9.14727 5.91339C9.0111 6.15294 8.85841 6.42154 8.70273 6.706C8.61275 6.87054 8.64673 7.12982 8.67659 7.35769C8.69008 7.46064 8.70273 7.55718 8.70273 7.63568C8.70273 9.12893 8.22018 8.25585 7.87962 7.63967C7.73535 7.37864 7.61656 7.16371 7.57073 7.19432C7.47693 7.25684 7.22786 7.19522 6.97982 7.13385C6.78952 7.08676 6.59982 7.03983 6.48129 7.04921C6.34356 7.06027 6.30774 7.20616 6.2725 7.34966C6.23661 7.49581 6.20133 7.63949 6.0596 7.63569C5.73511 7.62789 5.65867 7.57468 5.65014 7.58396C5.6451 7.58943 5.66374 7.61669 5.66897 7.68793C5.67282 7.74063 5.67995 7.81082 5.68872 7.89721C5.71973 8.20241 5.77129 8.70989 5.77129 9.36321C5.77129 9.51736 5.96704 9.46175 6.20599 9.39386C6.37044 9.34714 6.55534 9.29461 6.71097 9.30065C6.99875 9.31129 7.21678 9.47348 7.41309 9.61952C7.51061 9.69207 7.60277 9.76062 7.69546 9.80464C7.94272 9.92223 8.17924 10.145 8.39848 10.3515C8.6464 10.585 8.87222 10.7977 9.06649 10.814C9.24186 10.8291 9.27374 10.9677 9.30445 11.1012C9.33784 11.2464 9.36985 11.3856 9.58353 11.3533C10.1039 11.2757 10.7063 11.9349 10.0225 12.5277C9.56952 12.9207 9.44957 13.4331 9.24108 14.3238C9.23202 14.3625 9.2228 14.4019 9.21337 14.442Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</svg>

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

@@ -3,9 +3,9 @@
   position: fixed;
   z-index: 2;
   width: 100vw;
-  height: 100vh;
   top: 0;
   left: 0;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -14,6 +14,10 @@
       font-weight: 600;
       margin-left: 10px;
       font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+      overflow: hidden;
     }
   }
 }