@tencentcloud/chat-uikit-react 0.0.1 → 0.0.3

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

@@ -5,6 +5,7 @@
   .input-group-text {
     font-weight: 400;
     font-size: 16px;
+    font-family: PingFangSC-Medium;
     line-height: 22px;
     color: #000000;
   }
@@ -12,6 +13,7 @@
     .input-group-name {
       font-weight: 700;
       font-size: 16px;
+      font-family: PingFangSC-Medium;
       line-height: 19px;
       color: #000000;
     }
@@ -23,6 +25,7 @@
   .create-group-illustrate {
     font-weight: 400;
     font-size: 12px;
+    font-family: PingFangSC-Medium;
     line-height: 17px;
     text-align: justify;
     color: rgba(0, 0, 0, 0.4);
@@ -32,6 +35,7 @@
     .create-group-portrait-title {
       font-weight: 600;
       font-size: 14px;
+      font-family: PingFangSC-Medium;
       line-height: 20px;
       color: #000000;
       padding: 20px 0 20px 8px;
@@ -50,6 +54,7 @@
         box-sizing: border-box;
         &-nick {
           font-size: 12px;
+          font-family: PingFangSC-Medium;
           margin-top: 6px;
         }
       }

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

@@ -18,6 +18,7 @@
       z-index: 2;
     }
     .select-view-info-nick {
+      font-family: PingFangSC-Medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 17px;

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

@@ -22,6 +22,7 @@
     }
     .group-type-info-title {
       font-size: 16px;
+      font-family: PingFangSC-Medium;
       line-height: 22px;
       color: rgba(0, 0, 0, 0.8);
       display: flex;
@@ -33,6 +34,7 @@
 
     .group-type-info-description {
       font-size: 12px;
+      font-family: PingFangSC-Medium;
       line-height: 17px;
       text-align: justify;
       color: rgba(0, 0, 0, 0.4);
@@ -41,6 +43,7 @@
 
   .group-type-info-document {
     font-size: 16px;
+    font-family: PingFangSC-Medium;
     line-height: 22px;
     text-align: justify;
     text-decoration: none;

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

@@ -9,6 +9,7 @@
     margin-left: 10px;
     font-weight: 600;
     font-size: 20px;
+    font-family: PingFangSC-Medium;
     line-height: 32px;
     letter-spacing: -0.41px;
     color: #000000;
@@ -30,11 +31,13 @@
     margin-left: 10px;
     font-weight: 400;
     font-size: 14px;
+    font-family: PingFangSC-Medium;
     line-height: 20px;
     color: #000000;
     &.active {
       font-weight: 600;
       font-size: 14px;
+      font-family: PingFangSC-Medium;
       line-height: 20px;
       color: rgba(3, 101, 249, 1);
     }
@@ -60,6 +63,7 @@
     background-color: rgba(3, 101, 249, 1);
     border-radius: 31px;
     font-size: 14px;
+    font-family: PingFangSC-Medium;
     line-height: 20px;
     color: #FFFFFF;
     padding: 12px 36px;
@@ -78,6 +82,7 @@
       .title {
         font-weight: 600;
         font-size: 14px;
+        font-family: PingFangSC-Medium;
         line-height: 20px;
         padding: 10px;
       }

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

@@ -27,7 +27,7 @@ $font-color: #7A7A7A;
       font-weight: 700;
       font-size: 14px;
       line-height: 17px;
-      font-family: 'SF Pro Text';
+      font-family: PingFangSC-Medium;
       padding: 1px 0;
     }
 
@@ -36,7 +36,7 @@ $font-color: #7A7A7A;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: $font-color;
-      font-family: 'SF Pro Text';
+      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 12px;
@@ -59,7 +59,7 @@ $font-color: #7A7A7A;
 
     .time {
       color: $font-color;
-      font-family: 'SF Pro Text';
+      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 12px;
@@ -89,6 +89,7 @@ $font-color: #7A7A7A;
 
         .more-handle-item {
           font-size: 16px;
+          font-family: PingFangSC-Medium;
           line-height: 19px;
           padding: 6px 16px;
           cursor: pointer;

package/src/components/ConversationPreview/utils.tsx

@@ -4,6 +4,7 @@ import {
 import React from 'react';
 import TIM, { Conversation, Group, Profile } from 'tim-js-sdk';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
+import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
 export const getDisplayTitle = (
   conversation: Conversation,
@@ -79,7 +80,7 @@ export const getDisplayMessage = (conversation:Conversation, myProfile:Profile)
     }}
     >
       <span>{from}</span>
-      <span>{lastMessage.isRevoked ? 'recalled a message' : lastMessage.messageForShow}</span>
+      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(lastMessage.messageForShow, 1)}</span>
     </div>
   );
 };

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

@@ -9,6 +9,7 @@
   &-message {
     color: #999999;
     font-weight: 400;
+    font-family: PingFangSC-Medium;
     font-size: 16px;
     line-height: 22px;
   }

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

@@ -1,4 +1,5 @@
 .profile {
+  font-family: PingFangSC-Medium;
   background: #F9FAFB;
   display: flex;
   flex-direction: row;
@@ -9,6 +10,7 @@
     display: flex;
     align-items: center;
     .profile-name {
+      font-family: PingFangSC-Medium;
       font-weight: 600;
       margin-left: 10px;
       font-size: 14px;

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

@@ -20,7 +20,7 @@
     }
   }
   .title {
-    font-family: 'SF Pro Text';
+    font-family: PingFangSC-Medium;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;

package/src/components/TUIConversationList/index.scss

@@ -30,6 +30,7 @@
       color: #999999;
       font-weight: 400;
       font-size: 16px;
+      font-family: PingFangSC-Medium;
       line-height: 22px;
     }
   }

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

@@ -16,6 +16,7 @@
       margin-left: 10px;
       font-weight: 700;
       font-size: 14px;
+      font-family: PingFangSC-Medium;
       line-height: 17px;
     }
   }
@@ -32,12 +33,14 @@
         text-align: center;
         font-weight: 700;
         font-size: 24px;
+        font-family: PingFangSC-Medium;
         line-height: 29px;
         margin-bottom: 10px;
       }
       .info-id {
         font-weight: 400;
         font-size: 12px;
+        font-family: PingFangSC-Medium;
         line-height: 14px;
         color: #666666;
         margin-bottom: 30px;
@@ -58,6 +61,7 @@
         box-sizing: border-box;
         .manage-handle-title {
           font-size: 16px;
+          font-family: PingFangSC-Medium;
           line-height: 22px;
           color: rgba(0, 0, 0, 0.6);
         }

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

@@ -4,6 +4,7 @@
   cursor: pointer;
   font-family: SF Pro Text;
   font-size: 14px;
+  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 500;
   line-height: 17px;
@@ -66,6 +67,7 @@
     font-weight: 400;
     padding: 5px 0 0 10px;
     font-size: 12px;
+    font-family: PingFangSC-Medium;
     line-height: 14px;
     text-align: right;
     color: #7A7A7A;
@@ -89,7 +91,7 @@
   &-content {
     display: inline;
     word-break: break-word;
-    font-family: 'SF Pro Text';
+    font-family: PingFangSC-Regular;
     font-style: normal;
     font-weight: 500;
     font-size: 14px;
@@ -104,7 +106,7 @@
 
 .message-text, 
 .message-tip {
-  font-family: 'SF Pro Text';
+  font-family: PingFangSC-Regular;
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
@@ -181,6 +183,7 @@
     padding-top: 10px;
     font-weight: 400;
     font-size: 12px;
+    font-family: PingFangSC-Medium;
     line-height: 14px;
     color: #7A7A7A;
   }
@@ -236,7 +239,7 @@
       left: 0;
     }
     .title {
-      font-family: 'SF Pro Text';
+      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 500;
       font-size: 14px;
@@ -278,6 +281,7 @@
     content: "!";
     color: #FFFFFF;
     font-size: 12px;
+    font-family: PingFangSC-Medium;
   }
 }
 
@@ -359,6 +363,7 @@
     align-items: center;
     font-weight: 500;
     font-size: 12.8px;
+    font-family: PingFangSC-Medium;
     line-height: 15px;
     &:hover {
       background: rgba(0,110,255,.1);
@@ -376,7 +381,7 @@
   a {
     color: #679ce1;
     text-decoration: none;
-    font-family: 'SF Pro Text';
+    font-family: PingFangSC-Regular;
     font-style: normal;
     font-weight: 500;
     font-size: 14px;

package/src/components/TUIMessage/utils/emojiMap.ts

@@ -150,6 +150,150 @@ export const emojiMap:IEmojiMap = {
   '[鼓掌]': 'emoji_140@2x.png',
   '[龇牙]': 'emoji_141@2x.png',
 };
+export const emojiEnKey:IEmojiMap = {
+  '[NO]': '[no]',
+  '[OK]': '[ok]',
+  '[下雨]': '[rain]',
+  '[么么哒]': '[muah]',
+  '[乒乓]': '[ping pong]',
+  '[便便]': '[poo]',
+  '[信封]': '[mail]',
+  '[偷笑]': '[snicker]',
+  '[傲慢]': '[arrogant]',
+  '[再见]': '[bye]',
+  '[冷汗]': '[sweat]',
+  '[凋谢]': '[wither]',
+  '[刀]': '[knife]',
+  '[删除]': '[delete]',
+  '[勾引]': '[hook]',
+  '[发呆]': '[daze]',
+  '[发抖]': '[shaking]',
+  '[可怜]': '[pitiful]',
+  '[可爱]': '[cute]',
+  '[右哼哼]': '[right hum]',
+  '[右太极]': '[right Tai Chi]',
+  '[右车头]': '[right head]',
+  '[吐]': '[vomit]',
+  '[吓]': '[scare]',
+  '[咒骂]': '[curse]',
+  '[咖啡]': '[cafe]',
+  '[啤酒]': '[beer]',
+  '[嘘]': '[hiss]',
+  '[回头]': '[look back]',
+  '[困]': '[sleepy]',
+  '[坏笑]': '[bad laugh]',
+  '[多云]': '[cloud]',
+  '[大兵]': '[soldiers]',
+  '[大哭]': '[cry]',
+  '[太阳]': '[sun]',
+  '[奋斗]': '[struggle]',
+  '[奶瓶]': '[feeding bottle]',
+  '[委屈]': '[wronged]',
+  '[害羞]': '[shy]',
+  '[尴尬]': '[awkward]',
+  '[左哼哼]': '[left hem]',
+  '[左太极]': '[left Tai Chi]',
+  '[左车头]': '[left head]',
+  '[差劲]': '[poor]',
+  '[弱]': '[weak]',
+  '[强]': '[stong]',
+  '[彩带]': '[ribbon]',
+  '[彩球]': '[ball]',
+  '[得意]': '[proud]',
+  '[微笑]': '[smile]',
+  '[心碎了]': '[heartbroken]',
+  '[快哭了]': '[almost cry]',
+  '[怄火]': '[ire]',
+  '[怒]': '[anger]',
+  '[惊恐]': '[terrify]',
+  '[惊讶]': '[flummox]',
+  '[憨笑]': '[smirk]',
+  '[手枪]': '[gun]',
+  '[打哈欠]': '[yawn]',
+  '[抓狂]': '[crazy]',
+  '[折磨]': '[torment]',
+  '[抠鼻]': '[nose picking]',
+  '[抱抱]': '[hug]',
+  '[抱拳]': '[hug fist]',
+  '[拳头]': '[fist]',
+  '[挥手]': '[waving hands]',
+  '[握手]': '[shake hands]',
+  '[撇嘴]': '[pouted]',
+  '[擦汗]': '[wipe sweat]',
+  '[敲打]': '[knock on the head]',
+  '[晕]': '[faint]',
+  '[月亮]': '[moon]',
+  '[棒棒糖]': '[lollipop]',
+  '[汽车]': '[car]',
+  '[沙发]': '[sofa]',
+  '[流汗]': '[sweat]',
+  '[流泪]': '[tears]',
+  '[激动]': '[excitement]',
+  '[灯泡]': '[light]',
+  '[炸弹]': '[bomb]',
+  '[熊猫]': '[panda]',
+  '[爆筋]': '[exploding muscle]',
+  '[爱你]': '[love you]',
+  '[爱心]': '[love heart]',
+  '[爱情]': '[love]',
+  '[猪头]': '[pig]',
+  '[猫咪]': '[cat]',
+  '[献吻]': '[kiss]',
+  '[玫瑰]': '[rose]',
+  '[瓢虫]': '[ladybird]',
+  '[疑问]': '[what]',
+  '[白眼]': '[rolling eyes]',
+  '[皮球]': '[rubber ball]',
+  '[睡觉]': '[sleep]',
+  '[磕头]': '[kowtow]',
+  '[示爱]': '[show love]',
+  '[礼品袋]': '[gift bag]',
+  '[礼物]': '[gift]',
+  '[篮球]': '[basketball]',
+  '[米饭]': '[rice]',
+  '[糗大了]': '[shame]',
+  '[红双喜]': '[happiness]',
+  '[红灯笼]': '[lantern]',
+  '[纸巾]': '[tissue]',
+  '[胜利]': '[victory]',
+  '[色]': '[lecherous]',
+  '[药]': '[medicine]',
+  '[菜刀]': '[kitchen knife]',
+  '[蛋糕]': '[coke]',
+  '[蜡烛]': '[candle]',
+  '[街舞]': '[hip hop]',
+  '[衰]': '[decline]',
+  '[西瓜]': '[lemon]',
+  '[调皮]': '[naughty]',
+  '[象棋]': '[chess]',
+  '[跳绳]': '[jump rope]',
+  '[跳跳]': '[jump]',
+  '[车厢]': '[compartment]',
+  '[转圈]': '[turn in circles]',
+  '[鄙视]': '[contempt]',
+  '[酷]': '[cool]',
+  '[钞票]': '[money]',
+  '[钻戒]': '[diamond]',
+  '[闪电]': '[lightning]',
+  '[闭嘴]': '[shut up]',
+  '[闹钟]': '[clock]',
+  '[阴险]': '[sinister]',
+  '[难过]': '[sad]',
+  '[雨伞]': '[umbrella]',
+  '[青蛙]': '[frog]',
+  '[面条]': '[noodles]',
+  '[鞭炮]': '[firecracker]',
+  '[风车]': '[windmill]',
+  '[飞吻]': '[blow kisses]',
+  '[飞机]': '[air]',
+  '[饥饿]': '[hunger]',
+  '[香蕉]': '[banana]',
+  '[骷髅]': '[skull]',
+  '[麦克风]': '[mic]',
+  '[麻将]': '[mahjong]',
+  '[鼓掌]': '[handclap]',
+  '[龇牙]': '[happy]',
+};
 export const emojiName:Array<string> = [
   '[龇牙]',
   '[调皮]',
@@ -309,3 +453,40 @@ export const bigEmojiList:Array<IBigEmojiListItem> = [
       'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
   },
 ];
+
+/**
+ * Convert to expression key
+ * @param { string } data text
+ * @param { number } type 0:Convert to Chinese expression key 1: Convert to English expression key
+ * @returns { string } the converted text
+ */
+export function formatEmojiString(data: string, type = 0) {
+  let text = data;
+  const replace = {
+    key: type === 0 ? 1 : 0,
+    value: type,
+  };
+  Object.entries(emojiEnKey).map((item) => {
+    if (text.includes(item[replace.key])) {
+      text = transText(text, item[replace.key], item[replace.value]);
+    }
+    return item;
+  });
+  return text;
+}
+
+/**
+ * recursive replacement text
+ * @param { string } data text
+ * @param { string } replaceVal the value to replace
+ * @param { string } value replace Value
+ * @returns { string } the replaced value
+ */
+function transText(data: string, replaceVal:string, value: string) {
+  let text = data;
+  text = text.replace(replaceVal, value);
+  if (text.includes(replaceVal)) {
+    text = transText(text, replaceVal, value);
+  }
+  return text;
+}

package/src/components/TUIMessageInput/EmojiPicker.tsx

@@ -3,7 +3,8 @@ import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext'
 import { Icon, IconTypes } from '../Icon';
 import { Popup } from '../Popup';
 import {
-  emojiUrl, emojiName, emojiMap, bigEmojiList, faceUrl, IBigEmojiListItem,
+  emojiUrl, emojiName, emojiMap,
+  // bigEmojiList, faceUrl, IBigEmojiListItem,
 } from '../TUIMessage/utils/emojiMap';
 
 import type { EmojiData } from './hooks';

package/src/components/TUIMessageInput/InputQuoteDefalut.tsx

@@ -6,6 +6,7 @@ import { useTUIChatActionContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useHandleQuoteMessage } from './hooks/useHandleQuoteMessage';
+import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
 interface InputQuoteProps {
   message?: Message
@@ -33,7 +34,7 @@ export function InputQuoteDefalut <T extends InputQuoteProps>(
     <div className="input-quote">
       <div className="input-quote-content">
         <label htmlFor="input-quote-content">{message?.nick || message?.from}</label>
-        <span>{context?.messageAbstract}</span>
+        <span>{formatEmojiString(context?.messageAbstract, 1)}</span>
       </div>
       <Icon className="icon" width={12} height={12} type={IconTypes.CLOSE} onClick={handleClose} />
     </div>

package/src/components/TUIMessageInput/hooks/useEmojiPicker.tsx

@@ -4,6 +4,7 @@ import {
   useCallback,
 } from 'react';
 import { useTUIChatActionContext } from '../../../context';
+import { emojiEnKey } from '../../TUIMessage/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
 
 export interface EmojiData {
@@ -25,7 +26,7 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
   const { sendMessage, createFaceMessage } = useTUIChatActionContext('useEmojiPicker');
 
   const onSelectEmoji = (emoji:EmojiData) => {
-    insertText(emoji.data);
+    insertText(emojiEnKey[emoji.data]);
   };
 
   const sendFaceMessage = useCallback((emoji:EmojiData) => {

package/src/components/TUIMessageInput/hooks/useMessageInputText.tsx

@@ -11,6 +11,7 @@ import {
   useTUIChatStateContext,
   useTUIKitContext,
 } from '../../../context';
+import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
 
@@ -66,7 +67,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     }
     const options:any = {
       payload: {
-        text: state.text,
+        text: formatEmojiString(state.text),
       },
     };
     if (cloudCustomData.messageReply) {
@@ -105,7 +106,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
       if (!(e.clipboardData && e.clipboardData.items)) {
         return;
       }
-      const str = e.clipboardData.getData('text');
+      const str = formatEmojiString(e.clipboardData.getData('text'), 1);
       if (str) {
         dispatch({
           type: CONSTANT_DISPATCH_TYPE.SET_TEXT,

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

@@ -21,7 +21,7 @@
         word-break: break-all;
         visibility: hidden;
         max-width: -webkit-fill-available;
-        font-family: 'SF Pro Text';
+        font-family: PingFangSC-Medium;
         font-style: normal;
         font-weight: 500;
         font-size: 14px;
@@ -35,7 +35,7 @@
         width: -webkit-fill-available;
         height: -webkit-fill-available;
         flex: 1;
-        font-family: 'SF Pro Text';
+        font-family: PingFangSC-Medium;
         font-style: normal;
         font-weight: 500;
         font-size: 14px;
@@ -73,6 +73,7 @@ ul li {
   font-style: normal;
   font-weight: 500;
   font-size: 16px;
+  font-family: PingFangSC-Medium;
   line-height: 19px;
   display: flex;
   span {
@@ -151,6 +152,7 @@ ul li {
     flex-direction: column;
     font-weight: 500;
     font-size: 14px;
+    font-family: PingFangSC-Medium;
     line-height: 17px;
     color: #000000;
     &::before {
@@ -187,7 +189,7 @@ ul li {
   }
   &-title {
     padding: 0 16px;
-    font-family: 'SF Pro Text';
+    font-family: PingFangSC-Medium;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
@@ -198,7 +200,7 @@ ul li {
     max-height: calc(100vh - 200px);
     overflow-y: auto;
     .no-result {
-      font-family: PingFang SC;
+      font-family: PingFangSC-Medium;
       font-size: 14px;
       font-style: normal;
       line-height: 20px;
@@ -213,7 +215,7 @@ ul li {
   &-list {
     padding: 13px 0;
     &-title {
-      font-family: 'PingFang SC';
+      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 600;
       font-size: 14px;
@@ -221,7 +223,7 @@ ul li {
     }
     &-item {
       padding: 6px 0;
-      font-family: 'PingFang SC';
+      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -234,7 +236,7 @@ ul li {
         align-items: center;
         &-nick {
           padding: 0 13px;
-          font-family: 'PingFang SC';
+          font-family: PingFangSC-Medium;
           font-style: normal;
           font-weight: 400;
           font-size: 14px;
@@ -259,7 +261,7 @@ ul li {
       background: #0365F9;
       border-radius: 31px;
       padding: 10px 21px;
-      font-family: 'PingFang SC';
+      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 14px;

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

@@ -18,7 +18,7 @@ ul li {
   }
   .no-more {
     text-align: center;
-    font-family: SF Pro Text;
+    font-family: PingFangSC-Medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;