@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIMessage → MessageElement}/styles/layout.scss

@@ -6,29 +6,32 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-family: SF Pro Text;
   font-size: 14px;
   font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 500;
   line-height: 17px;
+
   .avatar {
     width: 45px;
+
     img {
       width: 45px;
     }
   }
+
   .content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+
     .name {
       display: inline-block;
       padding-bottom: 3px;
       max-width: 60%;
 
       @include theme() {
-        color: get(text-primary);
+        color: get(text-color-primary);
       }
     }
   }
@@ -40,22 +43,26 @@
   flex-direction: row;
   justify-self: flex-start;
   gap: 10px;
+
   .content {
     align-items: flex-start;
     flex: 1;
   }
 }
+
 .out {
   flex: 1;
   display: flex;
   gap: 10px;
   flex-direction: row-reverse;
   justify-self: flex-end;
+
   .content {
     align-items: flex-end;
     flex: 1;
   }
 }
+
 .tip {
   justify-self: center !important;
   width: auto;
@@ -63,14 +70,17 @@
 
 .bubble {
   padding: 8px 16px;
+
   &-in {
-    border-radius: 0px 16px 16px 16px;
+    border-radius: 0 16px 16px;
+
     &.group {
-      border-radius: 0px 16px 16px 16px;
+      border-radius: 0 16px 16px;
     }
   }
+
   &-out {
-    border-radius: 16px 16px 0 16px;
+    border-radius: 16px 16px 0;
   }
 }
 
@@ -78,30 +88,39 @@
   display: flex;
   align-items: flex-end;
   align-self: flex-end;
+
   .time {
     width: max-content;
     font-weight: 400;
     padding: 5px 0 0 10px;
     font-size: 12px;
-    font-family: PingFangSC-Medium;
     line-height: 14px;
     text-align: right;
 
     @include theme() {
-      color: get(text-secondary);
+      color: get(text-color-anti-secondary);
+    }
+
+    .bubble-in & {
+      @include theme() {
+        color: get(text-color-tertiary);
+      }
     }
   }
 }
 
-.message-image, .message-video {
+.message-image,
+.message-video {
   position: relative;
+
   .message-status {
     position: absolute;
     bottom: 10px;
     right: 10px;
+
     .time {
       @include theme() {
-        color: get(text-primary);
+        color: get(text-color-primary);
       }
     }
   }
@@ -109,23 +128,19 @@
 
 .message-text {
   display: flex;
+
   &-content {
     display: inline;
     word-break: break-word;
-    font-family: PingFangSC-Regular;
-    font-style: normal;
     font-weight: 500;
     font-size: 14px;
-    line-height: 24px;
+
     &-p {
       white-space: pre-wrap;
       display: inline;
       vertical-align: middle;
-
-      @include theme() {
-        color: get(text-primary);
-      }
     }
+
     .message-status {
       display: inline-flex;
       float: right;
@@ -136,11 +151,9 @@
 
 .message-text,
 .message-tip {
-  font-family: PingFangSC-Regular;
-  font-style: normal;
   font-weight: 500;
   font-size: 14px;
-  line-height: 17px;
+
   .text-img {
     width: 20px;
     height: 20px;
@@ -149,14 +162,17 @@
 }
 
 .message-image {
-  background: #FFFFFF;
+  background: transparent;
+
   img {
     max-width: 300px;
   }
+
   .img-h5 {
     max-width: 200px;
     max-height: 200px;
   }
+
   .big-image {
     max-width: 90%;
     max-height: 90%;
@@ -165,18 +181,20 @@
 
 .message-video {
   max-width: 300px;
+
   .snap-video {
     position: relative;
     height: 100%;
     border-radius: 10px;
+
     &::before {
       position: absolute;
       z-index: 1;
-      content: '';
-      width: 0px;
-      height: 0px;
+      content: "";
+      width: 0;
+      height: 0;
       border: 15px solid transparent;
-      border-left: 20px solid #ffffff;
+      border-left: 20px solid #fff;
       top: 0;
       left: 0;
       bottom: 0;
@@ -184,63 +202,75 @@
       margin: auto;
     }
   }
+
   video {
     width: 100%;
     height: 100%;
     border-radius: 10px;
   }
+
   .play-video {
     max-width: 95%;
     max-height: 65%;
   }
 }
+
 .message-video.message-video-h5 {
   max-width: 200px;
   max-height: 200px;
 }
+
 .message-file {
   display: flex;
   flex-direction: column;
   border: 1px solid #ddd;
+
   &-main {
     display: flex;
     align-items: center;
     padding: 12px;
-    background: #FFFFFF;
+    background: #fff;
     border-radius: 4px;
+
     .icon {
       margin-right: 7px;
     }
   }
+
   &-footer {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
+
     .time {
       padding-top: 10px;
     }
   }
+
   &-size {
     padding-top: 10px;
     font-weight: 400;
     font-size: 12px;
     font-family: PingFangSC-Medium;
     line-height: 14px;
-    color: #7A7A7A;
+    color: #7a7a7a;
   }
 }
 
 .message-merger {
   display: flex;
   flex-direction: column;
-  background: #ECEBEB;
+  background: #ecebeb;
+
   h3 {
     padding-bottom: 4px;
     border-bottom: 1px solid #a1a1a1;
   }
+
   &-list {
     opacity: 0.6;
   }
+
   &-item {
     padding-top: 4px;
   }
@@ -250,7 +280,7 @@
   padding: 8px 16px;
 
   @include theme() {
-    background-color: get(bg-secondary);
+    background-color: get(bg-color-bubble-own);
   }
 
   &-in {
@@ -258,7 +288,7 @@
   }
 
   &-out {
-    border-radius: 16px 16px 0px 16px;
+    border-radius: 16px 16px 0;
   }
 
   .message-text {
@@ -279,7 +309,7 @@
     margin-bottom: 10px;
 
     @include theme() {
-      background-color: get(bg-primary);
+      background-color: get(bg-color-operate);
     }
 
     &::before {
@@ -301,7 +331,7 @@
       padding-bottom: 10px;
 
       @include theme() {
-        color: get(text-primary);
+        color: get(text-color-primary);
       }
     }
 
@@ -314,14 +344,17 @@
 .meesage-bubble {
   display: flex;
   align-items: flex-end;
+
   &-status {
     margin: 3px;
   }
+
   &-context {
     display: flex;
     align-items: center;
     gap: 10px;
-    .message-context{
+
+    .message-context {
       flex: 1;
     }
   }
@@ -332,14 +365,15 @@
   height: 14px;
   border-radius: 14px;
   position: relative;
-  background: #FA5151;
+  background: #fa5151;
   display: inline-flex;
   justify-content: center;
   align-items: center;
+
   &::before {
     position: absolute;
     content: "!";
-    color: #FFFFFF;
+    color: #fff;
     font-size: 12px;
     font-family: PingFangSC-Medium;
   }
@@ -348,6 +382,7 @@
 .message-face {
   display: flex;
   flex-direction: column;
+
   .img {
     max-width: 88px;
   }
@@ -356,29 +391,35 @@
 .loading {
   display: inline-block;
   position: relative;
-  .img, video{
+
+  .img,
+  video {
     min-width: 60px;
     min-height: 60px;
     max-width: 300px;
     border-radius: 10px;
   }
-  .img-h5, .video-h5{
+
+  .img-h5,
+  .video-h5 {
     min-width: 60px;
     min-height: 60px;
     max-width: 200px;
     max-height: 200px;
     border-radius: 10px;
   }
+
   &::before {
     position: absolute;
     content: "";
-    background: rgba(#000000, 0.5);
+    background: rgba(#000, 0.5);
     border-radius: 10px;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
   }
+
   &::after {
     position: absolute;
     content: "";
@@ -395,6 +436,7 @@
     bottom: 0;
     margin: auto;
   }
+
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
@@ -404,10 +446,12 @@
 .message-plugin {
   width: 32px;
   margin: 0 5px;
+
   .icon-more {
     transform: scale(1.5);
   }
-  .plugin-popup-box{
+
+  .plugin-popup-box {
     bottom: auto;
     top: 100%;
     overflow: hidden;
@@ -416,6 +460,7 @@
   &-box {
     padding: 6px 0;
   }
+
   &-item {
     min-width: 144px;
     padding: 6px 13px;
@@ -426,12 +471,22 @@
     font-size: 12.8px;
     font-family: PingFangSC-Medium;
     line-height: 15px;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
     &:hover {
-      background: rgba(0,110,255,.1);
-      color: #147aff;
+      @include theme() {
+        background: get(dropdown-color-hover);
+        color: get(text-color-hover);
+      }
     }
+
     .del {
-      color: #FF584C;
+      @include theme() {
+        color: get(text-color-error);
+      }
     }
   }
 }
@@ -439,6 +494,7 @@
 .message-custom {
   display: flex;
   word-break: break-all;
+
   a {
     color: #679ce1;
     text-decoration: none;
@@ -448,6 +504,7 @@
     font-size: 14px;
     line-height: 17px;
   }
+
   p {
     font-family: PingFangSC-Regular;
     font-size: 14px;
@@ -458,26 +515,31 @@
 }
 
 .message-revoke {
-  color: #999999;
+  color: #999;
 }
 
 .message-audio {
   display: flex;
   align-items: center;
+
   .out {
     transform: rotate(180deg);
   }
+
   &-none {
     display: none;
   }
+
   &-content {
     display: flex;
     align-items: center;
     gap: 10px;
   }
+
   &-out {
     flex-direction: row-reverse;
   }
+
   .playing {
     animation: playingAnimation 1s ease-in-out infinite;
   }
@@ -486,9 +548,11 @@
     0% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.3;
     }
+
     100% {
       opacity: 1;
     }
@@ -504,16 +568,20 @@
     opacity: 1;
     color: #ff9c19;
   }
+
   25% {
     opacity: 0.3;
   }
+
   50% {
     color: #ff9c19;
     opacity: 1;
   }
+
   75% {
     opacity: 0.3;
   }
+
   100% {
     color: #ff9c19;
     opacity: 1;
@@ -525,13 +593,14 @@
   height: 5px;
   display: flex;
   justify-content: flex-start;
+
   .progress {
     display: inline-block;
     width: 0;
     background: #147aff;
     height: 5px;
     border-radius: 2px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 25%);
   }
 }
 

package/src/components/{TUIMessage → MessageElement}/utils/index.ts

@@ -1,9 +1,9 @@
 import TencentCloudChat, { Conversation, Group, Message } from '@tencentcloud/chat';
 import { decodeText } from './decodeText';
 import constant, { MESSAGE_STATUS } from '../../../constants';
-import { JSONStringToParse } from '../../untils';
+import { JSONStringToParse } from '../../utils';
 
-function t(params:string) {
+function t(params: string) {
   const str = params.split('.');
   return str[str.length - 1];
 }
@@ -141,7 +141,7 @@ export function handleTipMessageShowContext(message: Message) {
       options.text = handleTipGrpUpdated(message);
       break;
     case TencentCloudChat.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
-      message.payload.memberList.map((member:any) => {
+      message.payload.memberList.map((member: any) => {
         if (member.muteTime > 0) {
           options.text = `${t('message.tip.member')}：${member.userID}${t('message.tip.muted')}`;
         } else {
@@ -222,11 +222,11 @@ export function handleLocationMessageShowContext(item: any) {
   location.lon = item.payload.longitude.toFixed(6);
   location.lat = item.payload.latitude.toFixed(6);
   location.href = 'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&'
-    + `pointx=${location.lon}&pointy=${location.lat}&name=${item.payload.description}`;
+  + `pointx=${location.lon}&pointy=${location.lat}&name=${item.payload.description}`;
   location.url = 'https://apis.map.qq.com/ws/staticmap/v2/?'
-    + `center=${location.lat},${location.lon}&zoom=10&size=300*150&maptype=roadmap&`
-    + `markers=size:large|color:0xFFCCFF|label:k|${location.lat},${location.lon}&`
-    + 'key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD';
+  + `center=${location.lat},${location.lon}&zoom=10&size=300*150&maptype=roadmap&`
+  + `markers=size:large|color:0xFFCCFF|label:k|${location.lat},${location.lon}&`
+  + 'key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD';
   location.description = item.payload.description;
   return location;
 }
@@ -286,8 +286,8 @@ export function handleMergerMessageShowContext(item: Message) {
 
 // Parse audio and video call messages
 export function extractCallingInfoFromMessage(message: Message) {
-  let callingmessage:any = {};
-  let objectData:any = {};
+  let callingmessage: any = {};
+  let objectData: any = {};
   try {
     callingmessage = JSONStringToParse(message.payload.data);
   } catch (error) {
@@ -441,13 +441,13 @@ export function isTypingMessage(item: Message) {
   return false;
 }
 
-export function formatTime(secondTime:number) {
-  const time:number = secondTime;
+export function formatTime(secondTime: number) {
+  const time: number = secondTime;
   let newTime; let hour; let minite; let seconds;
   if (time >= 3600) {
     hour = parseInt(`${time / 3600}`, 10) < 10 ? `0${parseInt(`${time / 3600}`, 10)}` : parseInt(`${time / 3600}`, 10);
     minite = parseInt(`${(time % 60) / 60}`, 10) < 10 ? `0${parseInt(`${(time % 60) / 60}`, 10)}` : parseInt(`${(time % 60) / 60}`, 10);
-    seconds  = time % 3600 < 10 ? parseInt(`0${time % 3600}`) : time % 3600;
+    seconds = time % 3600 < 10 ? parseInt(`0${time % 3600}`) : time % 3600;
     if (seconds > 60) {
       minite = parseInt(`${seconds / 60}`, 10) < 10 ? `0${parseInt(`${seconds / 60}`, 10)}` : parseInt(`${seconds / 60}`, 10);
       seconds = seconds % 60 < 10 ? `0${seconds % 60}` : seconds % 60;
@@ -463,3 +463,14 @@ export function formatTime(secondTime:number) {
   }
   return newTime;
 }
+
+export const isCallMessage = (message: Message): boolean => {
+  const payloadData = JSONStringToParse(message?.payload?.data);
+  if (payloadData?.businessID === 1 && payloadData?.data) {
+    const payloadDataData = JSONStringToParse(payloadData.data);
+    if (payloadDataData.businessID === 'av_call') {
+      return true;
+    }
+  }
+  return false;
+};

package/src/components/{TUIMessageInput → MessageInput}/EmojiPicker.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
 import { Icon, IconTypes } from '../Icon';
 import { Popup } from '../Popup';
 import {
   emojiUrl, emojiName, emojiMap,
   // bigEmojiList, faceUrl, IBigEmojiListItem,
-} from '../TUIMessage/utils/emojiMap';
+} from '../MessageElement/utils/emojiMap';
 
 import type { EmojiData } from './hooks';