@tencentcloud/chat-uikit-react 1.2.2 → 2.1.2

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

@@ -7,3 +7,106 @@
   background-color: #FFFFFF;
   text-align: initial;
 }
+.sample-chat {
+  position:relative;
+  margin: 0 auto;
+  width: calc(100% - 20rem);
+  min-width: 850px;
+  height: 86%;
+  box-sizing: border-box;
+  border-radius: 12px;
+  overflow: hidden;
+  &-profile {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+  }
+  &-left-container {
+    max-width: 360px;
+    min-width: 360px;
+    display: flex;
+    flex-direction: column;
+  }
+  &-tab {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 12px;
+  }
+  &-tab-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  &-tab-text {
+    font-size: 15px;
+    line-height: 25px;
+    text-align: center;
+  }
+  &-tab-active {
+    color: #147AFF;
+  }
+}
+.tuikit-container {
+  display: flex;
+  height: 100%;
+  position: relative;
+  text-align: initial;
+  box-shadow: 0 11px 20px 0 rgba(0,0,0,.3);
+}
+.tui-chat-default {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position-x: -17px;
+  background-position-y: 173px;
+  padding: 100px 40px 0;
+  header {
+    display: flex;
+    align-items: center;
+    font-size: 1.75rem;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+    img {
+      width: 32px;
+      margin: 0 10px;
+    }
+  }
+  .content {
+    max-width: 393px;
+    font-size: 16px;
+    line-height: 24px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: #666;
+    letter-spacing: 0;
+    padding: 36px 0 20px;
+  }
+  .link {
+    font-size: 14px;
+    line-height: 20px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: #666;
+    letter-spacing: 0;
+    a {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: #006eff;
+      letter-spacing: 0;
+      text-decoration: none;
+      padding: 0 5px;
+    }
+  }
+}
+
+
+body {
+  #webpack-dev-server-client-overlay {
+    display: none !important;
+  }
+}

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

@@ -45,3 +45,23 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+*{  
+  -webkit-touch-callout:none; 
+  -webkit-user-select:none;   
+  -khtml-user-select:none;  
+  -moz-user-select:none;
+  -ms-user-select:none;  
+  user-select:none;  
+}
+.text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

package/src/components/TUIManage/TUIManage.tsx

@@ -5,6 +5,7 @@ import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { Switch } from '../Switch';
 import { useTUIKitContext } from '../../context';
+import { isH5, isPC } from '../../utils/env';
 import { getMessageProfile } from '../ConversationPreview/utils';
 import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
 import { useConversation } from '../../hooks';
@@ -46,43 +47,66 @@ export function TUIManage() {
     setIsPinned(activeConversation ? activeConversation.isPinned : false);
   }, [activeConversation, forceUpdateCount]);
 
-  return TUIManageShow && activeConversation && (
-  <div className="tui-manage">
-    <div className="tui-manage-title">
-      <Icon type={IconTypes.CANCEL} width={16} height={16} onClick={close} />
-      <span>{t('TUIConversation.Conversation Information')}</span>
-    </div>
-    <div className="tui-manage-container">
-      <div className="tui-manage-info">
-        <div className="info-avatar">
-          <Avatar
-            size={64}
-            image={
-              profile?.avatar || (profile?.groupID ? defaultGroupAvatarWork : defaultUserAvatar)
-            }
-          />
+  return (
+    TUIManageShow
+    && activeConversation && (
+      <div className={`tui-manage ${isH5 ? 'tui-h5-manage' : ''}`}>
+        <div className="tui-manage-title">
+          {isPC && (
+            <Icon
+              onClick={close}
+              type={IconTypes.CANCEL}
+              width={9}
+              height={16}
+            />
+          )}
+          {isH5 && (
+            <Icon onClick={close} type={IconTypes.BACK} width={9} height={16} />
+          )}
+          <span style={{ marginLeft: '10px' }}>
+            {t('TUIConversation.Conversation Information')}
+          </span>
         </div>
-        <div className="info-name">
-          {profile?.nick || profile?.name}
-        </div>
-        <div className="info-id">
-          ID:
-          {profile?.userID || profile?.groupID}
-        </div>
-      </div>
-      <div className="tui-manage-handle">
-        <div className="manage-handle-box">
-          <div className="manage-handle-title">{t('TUIConversation.Pin')}</div>
-          <Switch
-            onChange={pinChatChange}
-            checked={isPinned}
-          />
-        </div>
-        <div className="manage-handle-box" role="presentation" onClick={handleDelete}>
-          <div className="manage-handle-title red">{t('TUIConversation.Delete')}</div>
+        <div className="tui-manage-container">
+          <div className="tui-manage-info">
+            <div className="info-avatar">
+              <Avatar
+                size={64}
+                image={
+                  profile?.avatar
+                  || (profile?.groupID
+                    ? defaultGroupAvatarWork
+                    : defaultUserAvatar)
+                }
+              />
+            </div>
+            <div className="info-name">{profile?.nick || profile?.name}</div>
+            <div className="info-id">
+              ID:
+              {profile?.userID || profile?.groupID}
+            </div>
+          </div>
+          <div className="tui-manage-handle">
+            <div className="manage-handle-box">
+              <div className="manage-handle-title">
+                {t('TUIConversation.Pin')}
+              </div>
+              <Switch onChange={pinChatChange} checked={isPinned} />
+            </div>
+            {isPC && (
+              <div
+                className="manage-handle-box"
+                role="presentation"
+                onClick={handleDelete}
+              >
+                <div className="manage-handle-title red">
+                  {t('TUIConversation.Delete')}
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  </div>
+    )
   );
 }

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

@@ -13,7 +13,7 @@
     align-items: center;
     padding: 24px 20px;
     span {
-      margin-left: 10px;
+      margin-right: 10px;
       font-weight: 700;
       font-size: 14px;
       font-family: PingFangSC-Medium;
@@ -69,3 +69,17 @@
     }
   }
 }
+
+.tui-manage.tui-h5-manage {
+  border-left: 1px solid #f9fafb;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  z-index: 1;
+  background: #fff;
+}

package/src/components/TUIMessage/MessageBubble.tsx

@@ -1,11 +1,12 @@
 import React, {
   PropsWithChildren,
   ReactNode,
+  useEffect,
   useState,
 } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_STATUS } from '../../constants';
-import { useTUIChatActionContext } from '../../context';
+import { useTUIChatActionContext, useTUIChatStateContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { useMessageReply } from './hooks/useMessageReply';
 import { MessageProgress } from './MessageProgress';
@@ -36,7 +37,8 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
     sender,
   } = useMessageReply({ message });
 
-  const { setHighlightedMessageId } = useTUIChatActionContext('MessageBubbleWithContext');
+  const { setHighlightedMessageId, setActiveMessageID } = useTUIChatActionContext('MessageBubbleWithContext');
+  const { activeMessageID } = useTUIChatStateContext('MessageBubbleWithContext');
 
   const handleLoading = () => !!((
     message?.type === TencentCloudChat.TYPES.MSG_IMAGE
@@ -45,12 +47,24 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
   ) && message?.status === MESSAGE_STATUS.UNSEND);
 
   const handleMouseEnter = () => {
+    setActiveMessageID(message.ID);
     setPluginsShow(true);
   };
   const handleMouseLeave = () => {
+    setActiveMessageID(message.ID);
     setPluginsShow(false);
   };
 
+  const activeMessage = () => {
+    setActiveMessageID(message.ID);
+  };
+
+  useEffect(() => {
+    if (activeMessageID !== message.ID) {
+      setPluginsShow(false);
+    }
+  }, [activeMessageID]);
+
   const handleReplyMessage = () => {
     setHighlightedMessageId(replyMessage?.ID);
   };
@@ -59,8 +73,11 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
     <div className="meesage-bubble">
       <div
         className={`meesage-bubble-context ${message?.flow}`}
+        role="button"
+        tabIndex={0}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onClick={activeMessage}
       >
         <div
           className={
@@ -88,7 +105,7 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
         {
           Plugins && (
           <div className="message-plugin">
-            {PluginsShow && <Plugins />}
+            {PluginsShow && <Plugins message={message} />}
           </div>
           )
         }

package/src/components/TUIMessage/MessageCustom.tsx

@@ -1,7 +1,9 @@
 import React, { PropsWithChildren } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
+import { useTranslation } from 'react-i18next';
 import { JSONStringToParse } from '../untils';
 import type { MessageContextProps } from './MessageText';
+import { useComponentContext } from '../../context';
 
 function MessageCustomWithContext <T extends MessageContextProps>(
   props: PropsWithChildren<T>,
@@ -11,7 +13,8 @@ function MessageCustomWithContext <T extends MessageContextProps>(
     message,
     children,
   } = props;
-
+  const { t } = useTranslation();
+  const { MessageCustomPlugins } = useComponentContext('MessageCustom');
   const handleContext = (data) => {
     if (data.data === 'Hyperlink') {
       const extension = JSONStringToParse(data?.extension);
@@ -32,7 +35,13 @@ function MessageCustomWithContext <T extends MessageContextProps>(
     if (data.data === 'group_create') {
       return `${message?.nick || message?.from} Create a group`;
     }
-    return data.extension;
+    const botMessage = JSONStringToParse(data.data);
+    if (botMessage?.chatbotPlugin === 1 && botMessage?.src === 15 && (botMessage?.subtype === 'welcome_msg' || botMessage?.subtype === 'clarify_msg')) {
+      return (
+        <MessageCustomPlugins data={JSONStringToParse(data.data).content} />
+      );
+    }
+    return `[${t('TUIChat.Custom message')}]`;
   };
 
   return (

package/src/components/TUIMessage/MessageImage.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useState } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
+import { isH5 } from '../../utils/env';
 import { Model } from '../Model';
 import type { MessageContextProps } from './MessageText';
 
@@ -19,7 +20,7 @@ function MessageImageWithContext <T extends MessageContextProps>(
   return (
     <div className="message-image">
       <div role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <img className={`img bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`} src={context.url} alt="" />
+        <img className={`img ${isH5 ? 'img-h5' : ''} bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`} src={context.url} alt="" />
       </div>
       {children}
       {

package/src/components/TUIMessage/MessageName.tsx

@@ -34,7 +34,7 @@ export function MessageName <T extends MessageNameProps>(
   }
 
   return (
-    <label htmlFor="content" className="name">
+    <label htmlFor="content" className="text-ellipsis name">
       {message?.nick || message?.from}
     </label>
   );

package/src/components/TUIMessage/MessagePlugins.tsx

@@ -90,10 +90,12 @@ export function MessagePlugins <T extends MessagePluginsProps>(
 
   const handleVisible = (data) => {
     if (data.x && data.y) {
+      const isTop = data.y < data.height ? true : data.top;
+      const isLeft = data.x < data.width ? true : data.left;
       setPopStyle({
         position: 'fixed',
-        left: `${!data.left ? (data.x - data.width) : data.x}px`,
-        top: `${!data.top ? (data.y - data.height) : data.y}px`,
+        left: `${isLeft ? data.x : (data.x - data.width)}px`,
+        top: `${isTop ? data.y : (data.y - data.height)}px`,
       });
     }
   };

package/src/components/TUIMessage/MessageRevoke.tsx

@@ -26,9 +26,9 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
         message?.flow === MESSAGE_FLOW.IN && <span>{message?.nick || message?.from}</span>
       }
       {
-        message?.flow !== MESSAGE_FLOW.IN && <span>{t('TUIChat.You')}</span>
+        message?.flow !== MESSAGE_FLOW.IN && <span style={{ marginRight: '5px' }}>{t('TUIChat.You')}</span>
       }
-      <span>{t('TUIChat.recalled a message')}</span>
+      <span style={{ marginRight: '5px' }}>{t('TUIChat.recalled a message')}</span>
       {
         message?.flow === MESSAGE_FLOW.OUT
         && message?.type === TencentCloudChat.TYPES.MSG_TEXT

package/src/components/TUIMessage/MessageText.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { UnknowPorps } from '../../context';
+import { UnknowPorps, useTUIChatStateContext, useComponentContext } from '../../context';
 
 export interface MessageContextProps {
   context?: UnknowPorps,
@@ -16,14 +16,36 @@ function MessageTextWithContext <T extends MessageContextProps>(
     message,
     children,
   } = props;
-
+  const { MessageTextPlugins } = useComponentContext('MessageText');
+  const { firstSendMessage } = useTUIChatStateContext('MessageText');
+  if (MessageTextPlugins && message.flow === 'in' && (firstSendMessage?.time <= message?.time)) {
+    return (
+      <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
+        <MessageTextPlugins data={message} />
+      </div>
+    );
+  }
+  const urlToLink = function (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 (
     <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <div className="message-text-content">
         {context.text.map((item, index) => {
           const key = message.ID + index;
           if (item.name === 'text') {
-            return <p className="message-text-content-p" key={item.src + key}>{item.text}</p>;
+            return (
+              <p
+                className="message-text-content-p"
+                key={item.src + key}
+                dangerouslySetInnerHTML={{ __html: urlToLink(item.text) }}
+              />
+            );
           }
           return <img className="text-img" key={item.src + key} src={item.src} alt="" />;
         })}

package/src/components/TUIMessage/MessageVideo.tsx

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { MESSAGE_STATUS } from '../../constants';
+import { isH5, isPC } from '../../utils/env';
 import { Model } from '../Model';
 import type { MessageContextProps } from './MessageText';
 
@@ -13,18 +14,20 @@ function MessageVideoWithContext <T extends MessageContextProps>(
   } = props;
 
   const [show, setShow] = useState(false);
+  const transparentPosterUrl = 'https://web.sdk.qcloud.com/im/assets/images/transparent.png';
 
   return (
-    <div className="message-video">
+    <div className={`message-video ${isH5 ? 'message-video-h5' : ''}`}>
       <div className={`${message?.status === MESSAGE_STATUS.SUCCESS ? 'snap-video' : ''}`} role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <video muted controls={false} src={context.url} />
+        {isPC && (<video muted controls={false} src={context.url} />)}
+        {isH5 && (<img src={message.payload.snapshotUrl || transparentPosterUrl} style={{ maxHeight: '200px', maxWidth: '200px', borderRadius: '10px' }} />)}
       </div>
 
       {children}
       {
         show && (
-        <Model onClick={() => { setShow(false); }}>
-          <video className="play-video" muted controls src={context.url} />
+        <Model onClick={(e) => { e.stopPropagation(); setShow(false); }}>
+          <video className="play-video" autoPlay controls src={context.url} />
         </Model>
         )
       }

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

@@ -1,7 +1,9 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Message } from '@tencentcloud/chat';
-import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
+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 { Toast } from '../../Toast';
 
@@ -17,7 +19,6 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
   } = props;
 
   const {
-    removeMessage,
     editLocalMessage,
     operateMessage,
     revokeMessage,
@@ -27,40 +28,19 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
 
   const handleDelMessage = useCallback(async (event?) => {
     event.preventDefault();
-    if (!message?.ID || !chat || !removeMessage) {
-      return;
-    }
-
-    try {
-      await chat.deleteMessage([message]);
-      removeMessage(message);
-    } catch (error) {
-      if (handleError) {
-        handleError({
-          functionName: 'deleteMessage',
-          error,
-        });
-      } else {
-        Toast({ text: t('TUIChat.Error deleting message'), type: 'error' });
-        throw new Error(error);
-      }
-    }
+    if (!message) return;
+    const messageModel = TUIStore.getMessageModel(message?.ID);
+    messageModel.deleteMessage();
   }, [message]);
 
   const handleRevokeMessage = useCallback(async (event?) => {
     event.preventDefault();
-    if (!message?.ID || !chat || !editLocalMessage) {
-      return;
-    }
-
-    try {
-      if (revokeMessage) {
-        await revokeMessage(message);
-      } else {
-        await chat.revokeMessage(message);
-      }
+    if (!message) return;
+    const messageModel = TUIStore.getMessageModel(message?.ID);
+    messageModel.revokeMessage().then(() => {
       editLocalMessage(message);
-    } catch (error) {
+      enableSampleTaskStatus('revokeMessage');
+    }).catch((error: any) => {
       if (handleError) {
         handleError({
           functionName: 'revokeMessage',
@@ -71,7 +51,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
         Toast({ text, type: 'error' });
         throw new Error(error);
       }
-    }
+    });
   }, [message]);
 
   const handleReplyMessage = useCallback((event?) => {
@@ -110,7 +90,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
     try {
       const res = await chat.resendMessage(message);
       editLocalMessage(res?.data?.message);
-    } catch (error) {
+    } catch (error: any) {
       if (handleError) {
         handleError({
           functionName: 'resendMessage',

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

@@ -27,6 +27,7 @@
   .bubble {
     .edit {
       color: #147aff;
+      padding: 3px;
     }
   }
 }