@tencentcloud/chat-uikit-react 2.2.4 → 2.2.6

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Conversation } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 import { isH5 } from '../../utils/env';
 import useConversationList from './hooks/useConversationList';
 import './index.scss';
@@ -43,13 +43,13 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     },
   } = props;
   const { t } = useTranslation();
+  const { chat } = useUIKit('TUIConversationList');
   const {
-    chat,
     customClasses,
     conversation,
     setActiveConversation,
     setTUIProfileShow,
-  } = useTUIKitContext('TUIConversationList');
+  } = useUIManager('TUIConversationList');
   const { filterConversation: contextFilterConversation } = useTUIConversationContext('TUIConversationList');
   const filterConversation = propsFilterConversation || contextFilterConversation;
   const [conversationUpdateCount, setConversationUpdateCount] = useState(0);
@@ -64,7 +64,6 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     if (!conversationList.length) {
       return;
     }
-    setActiveConversation(conversation);
   };
   const { conversationList, setConversationList } = useConversationList(
     chat,

package/src/components/TUIConversationList/hooks/useConversationUpdate.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import TencentCloudChat, { Conversation } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
+import { useUIKit } from '../../../context';
 
 export const useConversationUpdate = (
   setConversationList?: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
@@ -11,7 +11,7 @@ export const useConversationUpdate = (
   forceUpdate?: () => void,
   filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 ) => {
-  const { chat } = useTUIKitContext('useConversationUpdate');
+  const { chat } = useUIKit('useConversationUpdate');
   useEffect(() => {
     const onConversationListUpdated = (event:any) => {
       if (setConversationList) {

package/src/components/TUIConversationList/index.scss

@@ -1,15 +1,23 @@
+@use "../../styles/colors/color-theme" as *;
+
 .tui-conversation {
   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;
@@ -17,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;
@@ -34,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/TUIManage/TUIManage.tsx

@@ -5,7 +5,7 @@ import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { Switch } from '../Switch';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 import { isH5, isPC } from '../../utils/env';
 import { getMessageProfile } from '../ConversationPreview/utils';
 import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
@@ -19,13 +19,13 @@ function UnMemoizedTUIManage<T>(
   const [profile, setProfile] = useState<any>();
   const [isPinned, setIsPinned] = useState<boolean>(false);
   const [forceUpdateCount, setForceUpdateCount] = useState(0);
+  const { chat } = useUIKit('TUIManage');
   const {
     conversation: activeConversation,
     setActiveConversation,
-    chat,
     TUIManageShow,
     setTUIManageShow,
-  } = useTUIKitContext('TUIManage');
+  } = useUIManager('TUIManage');
   useConversationUpdate(undefined, () => {
     setForceUpdateCount((count) => count + 1);
   });

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 {
         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/MessageStatus.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { useTUIMessageContext, useTUIKitContext } from '../../context';
+import { useTUIMessageContext, useUIKit } from '../../context';
 import { getTimeStamp } from '../untils';
 
 export interface MessageContextProps {
@@ -13,7 +13,7 @@ function MessageStatustWithContext <T extends MessageContextProps>(
   const {
     message,
   } = props;
-  const { language } = useTUIKitContext('TUIChat');
+  const { language } = useUIKit('TUIChat');
   const {
     isShowTime,
   } = useTUIMessageContext('MessageStatustWithContext');

package/src/components/TUIMessage/MessageText.tsx

@@ -3,21 +3,21 @@ import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { UnknowPorps, useTUIChatStateContext, useComponentContext } from '../../context';
 
 export interface MessageContextProps {
-  context?: UnknowPorps,
-  message?: Message,
-  className?: string,
+  context?: UnknowPorps;
+  message?: Message;
+  className?: string;
 }
 
-function MessageTextWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
+function MessageTextWithContext(props: PropsWithChildren<MessageContextProps>) {
   const {
     context,
     message,
     children,
   } = props;
+
   const { MessageTextPlugins } = useComponentContext('MessageText');
   const { firstSendMessage } = useTUIChatStateContext('MessageText');
+
   if (MessageTextPlugins && message?.flow === 'in' && (firstSendMessage && firstSendMessage?.time <= message?.time)) {
     return (
       <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
@@ -25,14 +25,15 @@ function MessageTextWithContext <T extends MessageContextProps>(
       </div>
     );
   }
-  const urlToLink = function (text: string) {
+
+  function urlToLink(text: string) {
     if (!text) {
       return text;
     }
-    // eslint-disable-next-line no-useless-escape
     const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
-    return text.replace(urlRegex, (website) => `<a class='website' href='${website}' target='_blank'>${website}</a>`);
-  };
+    return text.replace(urlRegex, website => `<a class='website' href='${website}' target='_blank'>${website}</a>`);
+  }
+
   return (
     <div className={`bubble message-text bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <div className="message-text-content">
@@ -43,8 +44,9 @@ function MessageTextWithContext <T extends MessageContextProps>(
               <p
                 className="message-text-content-p"
                 key={item.src + key}
-                dangerouslySetInnerHTML={{ __html: urlToLink(item.text) }}
-              />
+              >
+                {item.text}
+              </p>
             );
           }
           return <img className="text-img" key={item.src + key} src={item.src} alt="" />;
@@ -55,10 +57,9 @@ function MessageTextWithContext <T extends MessageContextProps>(
   );
 }
 
-const MemoizedMessageText = React.memo(MessageTextWithContext) as
-typeof MessageTextWithContext;
+const MemoizedMessageText = React.memo(MessageTextWithContext) as typeof MessageTextWithContext;
 
-export function MessageText(props:MessageContextProps):React.ReactElement {
+export function MessageText(props: MessageContextProps) {
   return (
     <MemoizedMessageText {...props} />
   );

package/src/components/TUIMessage/hooks/useMessageHandler.ts

@@ -4,7 +4,7 @@ import { Message } from '@tencentcloud/chat';
 import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
 import { enableSampleTaskStatus } from '../../untils';
-import { useTUIChatActionContext, useTUIKitContext } from '../../../context';
+import { useTUIChatActionContext, useUIKit } from '../../../context';
 import { Toast } from '../../Toast';
 
 interface MessageHandlerProps {
@@ -24,7 +24,7 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
     revokeMessage,
   } = useTUIChatActionContext('useDeleteHandler');
   const { t } = useTranslation();
-  const { chat } = useTUIKitContext('useDeleteHandler');
+  const { chat } = useUIKit('useDeleteHandler');
 
   const handleDelMessage = useCallback(async (event?: any) => {
     event.preventDefault();

package/src/components/TUIMessage/hooks/useMessageReply.ts

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { useTUIChatStateContext, useTUIKitContext } from '../../../context';
+import { useTUIChatStateContext, useUIKit } from '../../../context';
 import { JSONStringToParse } from '../../untils';
 
 interface messageContextParams {
@@ -26,7 +26,7 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
   const [replyMessage, setReplyMessage] = useState(null);
   const [messageID, setMessageID] = useState('');
 
-  const { chat } = useTUIKitContext('TUIChat');
+  const { chat } = useUIKit('TUIChat');
   const { messageList } = useTUIChatStateContext('useMessageReply');
 
   useLayoutEffect(() => {

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;
     }
   }
-}
+}

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

@@ -1,3 +1,5 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .message-default {
   width: 100%;
   flex: 1;
@@ -24,6 +26,10 @@
       display: inline-block;
       padding-bottom: 3px;
       max-width: 60%;
+
+      @include theme() {
+        color: get(text-primary);
+      }
     }
   }
 }
@@ -80,7 +86,10 @@
     font-family: PingFangSC-Medium;
     line-height: 14px;
     text-align: right;
-    color: #7A7A7A;
+
+    @include theme() {
+      color: get(text-secondary);
+    }
   }
 }
 
@@ -91,7 +100,9 @@
     bottom: 10px;
     right: 10px;
     .time {
-      color: #FFFFFF;
+      @include theme() {
+        color: get(text-primary);
+      }
     }
   }
 }
@@ -110,6 +121,10 @@
       white-space: pre-wrap;
       display: inline;
       vertical-align: middle;
+
+      @include theme() {
+        color: get(text-primary);
+      }
     }
     .message-status {
       display: inline-flex;
@@ -232,46 +247,64 @@
 }
 
 .meesage-bubble-reply {
-  background: #ECEBEB;
   padding: 8px 16px;
+
+  @include theme() {
+    background-color: get(bg-secondary);
+  }
+
   &-in {
     border-radius: 16px 16px 16px 0;
   }
+
   &-out {
     border-radius: 16px 16px 0px 16px;
   }
+
   .message-text {
-    border-radius: none;
-    border: none;
+    border: none !important;
   }
+
   .bubble {
     padding: 0;
+
     &-in {
       border-radius: 0;
     }
   }
+
   &-main {
     position: relative;
     padding: 10px 14px;
     margin-bottom: 10px;
-    background: #FFFFFF;
+
+    @include theme() {
+      background-color: get(bg-primary);
+    }
+
     &::before {
       content: "";
       position: absolute;
       width: 6px;
       height: 100%;
-      background: #D9D9D9;
       top: 0;
       left: 0;
+
+      @include theme() {
+        background-color: get(bg-5);
+      }
     }
+
     .title {
-      font-family: PingFangSC-Medium;
-      font-style: normal;
       font-weight: 500;
       font-size: 14px;
-      line-height: 17px;
       padding-bottom: 10px;
+
+      @include theme() {
+        color: get(text-primary);
+      }
     }
+
     .message-context {
       opacity: 0.6;
     }
@@ -504,4 +537,4 @@
 
 .website {
   color: #147aff !important;
-}
+}

package/src/components/TUIMessageInput/TUIMessageInput.tsx

@@ -7,7 +7,7 @@ import {
   UnknowPorps,
   useComponentContext,
   useTUIChatStateContext,
-  useTUIKitContext,
+  useUIManager,
 } from '../../context';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 import { InputQuoteDefalut } from './InputQuoteDefalut';

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

@@ -5,7 +5,7 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_OPERATE } from '../../../constants';
 import {
-  useTUIChatStateContext, useTUIKitContext,
+  useTUIChatStateContext, useUIKit,
 } from '../../../context';
 
 export function useHandleForwardMessage(msg?:Message) {
@@ -14,7 +14,7 @@ export function useHandleForwardMessage(msg?:Message) {
   } = useTUIChatStateContext('TUIMessageInputDefault');
 
   const [conversationList, setConversationList] = useState([]);
-  const { chat } = useTUIKitContext('TUIChat');
+  const { chat } = useUIKit('TUIChat');
 
   const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
 

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

@@ -9,7 +9,7 @@ import {
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
 import {
   useTUIChatActionContext,
-  useTUIKitContext,
+  useUIKit,
 } from '../../../context';
 import { enableSampleTaskStatus } from '../../untils';
 import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
@@ -33,7 +33,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     sendUploadMessage,
   } = props;
 
-  const { chat } = useTUIKitContext('useMessageInputText');
+  const { chat } = useUIKit('useMessageInputText');
   const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();

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

@@ -1,17 +1,36 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-message-input {
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   .tui-kit-input-box--focus {
-    outline: 1px solid #147AFF;
+    @include theme() {
+      outline: 1px solid get(status-info);
+    }
   }
+
   .input-box {
-    border: 1px solid #D3DAF3;
-    background: #FFFFFF;
+    @include theme() {
+      background-color: get(bg-primary);
+      border: 1px solid get(border-5);
+    }
   }
 }
 
 .input-plugin-popup {
   &-box {
-    background: #FFFFFF;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
     border-radius: 16px;
+
+    [data-uikit-theme="light"] & {
+      background-color: var(--chat-theme-light-bg-primary);
+      box-shadow: var(--chat-theme-light-box-shadow-1);
+    }
+
+    [data-uikit-theme="dark"] & {
+      background-color: var(--chat-theme-dark-bg-3);
+      box-shadow: var(--chat-theme-dark-box-shadow-1);
+    }
   }
-}
+}