@tencentcloud/chat-uikit-react 2.2.3 → 2.2.5

package/src/components/ConversationPreview/utils.tsx

@@ -1,10 +1,29 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 import { getTimeStamp } from '../untils';
 
+interface TProfile extends Profile, Group {}
+export const getMessageProfile = (conversation: Conversation): TProfile => {
+  // eslint-disable-next-line
+  // @ts-ignore
+  if (!conversation) return null;
+  let result = {};
+  const { type, groupProfile, userProfile } = conversation;
+  switch (type) {
+    case TencentCloudChat.TYPES.CONV_C2C:
+      result = userProfile;
+      break;
+    case TencentCloudChat.TYPES.CONV_GROUP:
+      result = groupProfile;
+      break;
+    case TencentCloudChat.TYPES.CONV_SYSTEM:
+    default:
+  }
+  return result as TProfile;
+};
+
 export const getDisplayTitle = (
   conversation: Conversation,
   searchValue?: string,
@@ -25,15 +44,22 @@ export const getDisplayTitle = (
     default:
       title = '';
   }
-  const handleTitle = (str:string) => {
+  const handleTitle = (str: string) => {
     const tempStr = str.toLocaleLowerCase();
     const pos = searchValue && tempStr.indexOf(searchValue.toLocaleLowerCase());
-    if (pos === '') return <></>
+    const titleList = str.split(new RegExp(`(${searchValue})`, 'gi'));
+    if (pos === '') return <></>;
     return (
       <div>
-        <span>{str.slice(0, pos)}</span>
-        <span style={{ color: highlightColor }}>{pos && str.slice(pos, pos + searchValue.length)}</span>
-        <span>{pos && str.slice(pos + searchValue.length)}</span>
+        {searchValue && titleList.map((textItem: string, index: number) =>
+          (textItem.toLowerCase() === searchValue.toLowerCase())
+            ? (
+                <span key={index} style={{ color: highlightColor }}>{textItem}</span>
+              ) : (
+                <span key={index}>{textItem}</span>
+              ),
+        )}
+        ;
       </div>
     );
   };
@@ -58,9 +84,9 @@ export const getDisplayImage = (conversation: Conversation) => {
   return displayImage;
 };
 export const getDisplayMessage = (
-  conversation:Conversation,
-  myProfile:Profile,
-  language?:string,
+  conversation: Conversation,
+  myProfile: Profile,
+  language?: string,
 ) => {
   const { lastMessage, type } = conversation;
   const {
@@ -93,26 +119,8 @@ export const getDisplayMessage = (
     </div>
   );
 };
-interface TProfile extends Profile, Group {}
-export const getMessageProfile = (conversation: Conversation):TProfile => {
-  // eslint-disable-next-line
-  // @ts-ignore
-  if (!conversation) return null;
-  let result = {};
-  const { type, groupProfile, userProfile } = conversation;
-  switch (type) {
-    case TencentCloudChat.TYPES.CONV_C2C:
-      result = userProfile;
-      break;
-    case TencentCloudChat.TYPES.CONV_GROUP:
-      result = groupProfile;
-      break;
-    case TencentCloudChat.TYPES.CONV_SYSTEM:
-    default:
-  }
-  return result as TProfile;
-};
-export const getDisplayTime = (conversation: Conversation, language?: string) => {
+
+export const getDisplayTime = (conversation: Conversation, language: string) => {
   const { lastMessage } = conversation;
   return getTimeStamp(lastMessage.lastTime * 1000, language);
 };

package/src/components/DivWithEdit/WithText.tsx

@@ -22,7 +22,9 @@ export function WithText<T extends WithEditProps>(props:PropsWithChildren<T>) {
   const [value, setValue] = useState(propsVal);
 
   useLayoutEffect(() => {
-    inputRef?.current?.focus();
+    inputRef?.current?.focus({
+      preventScroll: true,
+    });
     setValue(value);
   }, [inputRef, propsVal]);
 
@@ -35,7 +37,7 @@ export function WithText<T extends WithEditProps>(props:PropsWithChildren<T>) {
   };
   return (
     <div className={`edit ${className}`}>
-      {/* // eslint-disable-next-line 
+      {/* // eslint-disable-next-line
       // @ts-ignore */}
       <input ref={inputRef} type="text" value={value} onChange={handleChange} />
       <Icon className="icon" width={15} height={10.5} type={IconTypes.CONFIRM} onClick={handleConfirm} />

package/src/components/Input/Input.tsx

@@ -83,7 +83,9 @@ export const Input = React.forwardRef<InputRef, InputProps>(
     };
     const focus = () => {
       if (inputRef.current) {
-        inputRef.current.focus();
+        inputRef.current.focus({
+          preventScroll: true,
+        });
       }
     };
     useImperativeHandle(ref, () => ({

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

@@ -3,20 +3,22 @@
   display: flex;
   align-items: center;
   border-radius: 10px;
-  background:  rgba(249, 249, 249, 0.94);
+  background: rgba(249, 249, 249, 94%);
   padding: 0 8px;
   height: 36px;
   box-sizing: border-box;
 
   &.tui-kit-input-box--focus {
-    outline: 1px solid #147AFF;
+    outline: 1px solid #147aff;
   }
+
   &.tui-kit-input-border--bottom {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 10%);
     background-color: #fff;
     outline: none;
     border-radius: 0;
   }
+
   .tui-kit-input {
     margin-left: 6px;
     margin-right: auto;
@@ -28,6 +30,7 @@
     border-radius: 10px;
     border: none;
     box-sizing: border-box;
+    font-size: 14px;
 
     &:focus {
       border: none;
@@ -36,9 +39,8 @@
 
     &::placeholder {
       font-weight: 400;
-      color: rgba(67, 60, 63, 0.6);
+      color: rgba(67, 60, 63, 60%);
       padding: 2px 0;
     }
   }
-
 }

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

@@ -1,7 +1,7 @@
 .model {
-  background: rgba(#000000, 0.5);
+  background: rgba(#000, 0.5);
   position: fixed;
-  z-index: 2;
+  z-index: 5;
   width: 100vw;
   top: 0;
   left: 0;
@@ -9,4 +9,4 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}

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

@@ -1,7 +1,21 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .plugin-popup {
   &-box {
-    background: #FFFFFF;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
     border-radius: 16px;
+
+    @include theme() {
+      color: get(text-primary);
+    }
+
+    [data-chat-theme="light"] & {
+      background-color: var(--chat-theme-light-bg-primary);
+      box-shadow: var(--chat-theme-light-box-shadow-1);
+    }
+
+    [data-chat-theme="dark"] & {
+      background-color: var(--chat-theme-dark-bg-3);
+      box-shadow: var(--chat-theme-dark-box-shadow-1);
+    }
   }
-}
+}

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

@@ -1,6 +1,7 @@
 .popup {
   opacity: 0;
+
   &-show {
     opacity: 1;
   }
-}
+}

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

@@ -1,9 +1,16 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-chat-header {
   padding: 16px 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   &-left {
     display: flex;
     align-items: center;
@@ -24,7 +31,11 @@
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
-    line-height: 17px;
+
+    @include theme() {
+      color: get(text-primary);
+    }
+
   }
   .system {
     height: 32px;
@@ -33,4 +44,4 @@
 
 .tui-chat-live-header {
 
-}
+}

package/src/components/TUIConversationList/index.scss

@@ -1,16 +1,23 @@
+@use "../../styles/colors/color-theme" as *;
+
 .tui-conversation {
-  height: 0;
   flex: 1;
-  min-width: 360px;
-  max-width: 400px;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #F9FAFB;
   text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   .tui-conversation-header {
     display: flex;
     padding: 10px 20px;
+
     .tui-conversation-create-icon {
       display: flex;
       align-items: center;
@@ -18,16 +25,19 @@
       margin-left: 10px;
     }
   }
+
   .no-result {
     padding: 0 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
+
     &-icon {
       margin: 100px auto 50px;
     }
+
     &-message {
-      color: #999999;
+      color: #999;
       font-weight: 400;
       font-size: 16px;
       font-family: PingFangSC-Medium;
@@ -35,8 +45,15 @@
     }
   }
 }
+
 .tui-conversation-h5 {
-  min-width: 100%;
-  width: 100%;
-  max-width: 100%;
-}
+  .tui-conversation-header {
+    padding: 10px;
+  }
+
+  .conversation-list-container {
+    .conversation-preview-container {
+      padding: 0 10px;
+    }
+  }
+}

package/src/components/TUIKit/TUIKit.tsx

@@ -7,8 +7,6 @@ import { isH5, isPC } from '../../utils/env';
 import { useTUIKit, UseContactParams } from './hooks/useTUIKit';
 import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
 import { TUIKitProvider } from '../../context/TUIKitContext';
-import './styles/index.scss';
-import './styles/h5.scss';
 import { TUIConversation } from '../TUIConversation';
 import { TUIChat } from '../TUIChat';
 import { TUIManage } from '../TUIManage';
@@ -21,6 +19,9 @@ import chats from '../Icon/images/chats.svg';
 import chatsSelected from '../Icon/images/chats-selected.svg';
 import contacts from '../Icon/images/contacts.svg';
 import contactsSelected from '../Icon/images/contacts-selected.svg';
+import './styles/index.scss';
+import './styles/h5.scss';
+import '../../styles/index.scss';
 
 export interface ChatProps {
   chat?: any,
@@ -134,7 +135,7 @@ export function TUIKit<
     chat = TUILogin.getContext().chat,
     customClasses,
     activeConversation,
-    language = 'en',
+    language = 'en-US',
   } = props;
 
   (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;

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

@@ -1,14 +1,19 @@
-@import "reset";
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-kit {
   position: relative;
   display: flex;
   width: 100%;
   height: 100%;
-  background-color: #FFFFFF;
   text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-primary);
+  }
 }
+
 .sample-chat {
-  position:relative;
+  position: relative;
   margin: 0 auto;
   width: calc(100% - 20rem);
   min-width: 850px;
@@ -16,23 +21,30 @@
   box-sizing: border-box;
   border-radius: 12px;
   overflow: hidden;
+
   &-profile {
     position: absolute;
     top: 0;
     z-index: 1;
+    width: 100%;
+    height: 100%;
   }
+
   &-left-container {
     max-width: 360px;
     min-width: 360px;
     display: flex;
     flex-direction: column;
+    position: relative;
   }
+
   &-tab {
     display: flex;
     align-items: center;
     justify-content: space-around;
     margin: 12px;
   }
+
   &-tab-container {
     display: flex;
     flex-direction: column;
@@ -40,22 +52,26 @@
     justify-content: center;
     cursor: pointer;
   }
+
   &-tab-text {
     font-size: 15px;
     line-height: 25px;
     text-align: center;
   }
+
   &-tab-active {
-    color: #147AFF;
+    color: #147aff;
   }
 }
+
 .tuikit-container {
   display: flex;
   height: 100%;
   position: relative;
   text-align: initial;
-  box-shadow: 0 11px 20px 0 rgba(0,0,0,.3);
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 30%);
 }
+
 .tui-chat-default {
   width: 100%;
   height: 100%;
@@ -63,6 +79,7 @@
   background-position-x: -17px;
   background-position-y: 173px;
   padding: 100px 40px 0;
+
   header {
     display: flex;
     align-items: center;
@@ -71,11 +88,13 @@
     font-weight: 500;
     color: #000;
     letter-spacing: 0;
+
     img {
       width: 32px;
       margin: 0 10px;
     }
   }
+
   .content {
     max-width: 393px;
     font-size: 16px;
@@ -86,6 +105,7 @@
     letter-spacing: 0;
     padding: 36px 0 20px;
   }
+
   .link {
     font-size: 14px;
     line-height: 20px;
@@ -93,6 +113,7 @@
     font-weight: 400;
     color: #666;
     letter-spacing: 0;
+
     a {
       font-family: PingFangSC-Regular;
       font-weight: 400;
@@ -104,9 +125,8 @@
   }
 }
 
-
 body {
   #webpack-dev-server-client-overlay {
     display: none !important;
   }
-}
+}

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

@@ -5,13 +5,16 @@
   max-width: 300px;
   min-width: 200px;
   border-left: 1px solid #f9fafb;
+
   .red {
-    color: #FF584C !important;
+    color: #ff584c !important;
   }
+
   .tui-manage-title {
     display: flex;
     align-items: center;
-    padding: 24px 20px;
+    padding: 24px 10px;
+
     span {
       margin-right: 10px;
       font-weight: 700;
@@ -20,15 +23,18 @@
       line-height: 17px;
     }
   }
+
   .tui-manage-container {
     .tui-manage-info {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .info-avatar {
         margin-top: 40px;
         margin-bottom: 20px;
       }
+
       .info-name {
         text-align: center;
         font-weight: 700;
@@ -37,33 +43,37 @@
         line-height: 29px;
         margin-bottom: 10px;
       }
+
       .info-id {
         font-weight: 400;
         font-size: 12px;
         font-family: PingFangSC-Medium;
         line-height: 14px;
-        color: #666666;
+        color: #666;
         margin-bottom: 30px;
         text-align: center;
       }
     }
+
     .tui-manage-handle {
       .manage-handle-box {
-        &:nth-child(2) {
-          margin-top: 10px;
-          cursor: pointer;
-        }
         display: flex;
-        background: rgba(249, 249, 249, 0.94);
+        background: rgba(249, 249, 249, 94%);
         align-items: center;
         justify-content: space-between;
         padding: 10px;
         box-sizing: border-box;
+
+        &:nth-child(2) {
+          margin-top: 10px;
+          cursor: pointer;
+        }
+
         .manage-handle-title {
           font-size: 16px;
           font-family: PingFangSC-Medium;
           line-height: 22px;
-          color: rgba(0, 0, 0, 0.6);
+          color: rgba(0, 0, 0, 60%);
         }
       }
     }
@@ -71,7 +81,7 @@
 }
 
 .tui-manage.tui-h5-manage {
-  border-left: 1px solid #f9fafb;
+  border-left: none;
   display: flex;
   flex-direction: column;
   position: absolute;

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

@@ -1,26 +1,37 @@
-.message-text, .message-custom{
-  border: 1px solid #DDDDDD;
+@use "../../../styles/colors/color-theme" as *;
+
+.message-text,
+.message-custom {
+  @include theme() {
+    border: 1px solid get(border-5);
+  }
 }
 
 .bubble {
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   &-out {
-    background: #F2F7FF;
-    border: 1px solid #F2F7FF;
+    @include theme() {
+      border: none;
+      background-color: get(bg-secondary);
+    }
   }
 }
 
 .meesage-bubble-reply-out {
-  background: #F2F7FF;
   .meesage-bubble-reply-main {
-    .message-text{
+    .message-text {
       background: none;
     }
   }
 }
 
-
 .message-tip {
-  color: #999999;
+  @include theme() {
+    color: get(text-secondary);
+  }
 }
 
 .tip {
@@ -30,4 +41,4 @@
       padding: 3px;
     }
   }
-}
+}