@tencentcloud/chat-uikit-react 1.0.0 → 1.0.2

package/dist/esm/index.d.css

@@ -1,217 +1,3 @@
-.tui-live {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.tui-live video {
-  width: 100%;
-}
-.tui-live-list {
-  display: flex;
-}
-.tui-live-item {
-  display: flex;
-  margin: 0 10px;
-  gap: 10px;
-}
-.tui-live-item .list-item-text {
-  display: inline-flex;
-  min-width: 22px;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  color: #000000;
-}
-.tui-live .tag-list {
-  flex: 1;
-  flex-wrap: wrap;
-}
-.tui-live .tag-item {
-  position: relative;
-  padding: 4px 8px 4px 26px;
-  background: #7187D3;
-  border-radius: 47px;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  color: #FFFFFF;
-}
-.tui-live .tag-item::before {
-  position: absolute;
-  content: "#";
-  color: #FFFFFF;
-  left: 11px;
-  display: flex;
-  align-items: center;
-}
-.tui-live-header {
-  padding: 12px 20px;
-  display: flex;
-  flex-direction: column;
-}
-.tui-live-header-name {
-  padding: 8px 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.tui-live-header-name h1 {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 19px;
-  color: #000000;
-}
-.tui-live-header-content {
-  display: flex;
-  align-items: flex-start;
-}
-.tui-live-header-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  background: #FF0000;
-  border-radius: 47px;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  color: #FFFFFF;
-}
-.tui-live-content {
-  width: 100%;
-  height: 100%;
-}
-.tui-live-footer {
-  padding: 20px 20px 30px;
-  display: flex;
-  align-items: center;
-}
-.tui-live-footer .owner-avatar {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  border-radius: 40px;
-}
-.tui-live-footer-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-.tui-live-footer-main .owner-name {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 0 10px 8px;
-}
-.tui-live-footer-main .owner-name h1 {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 19px;
-  display: flex;
-  align-items: center;
-  color: #000000;
-}
-.tui-live-footer .opate-list {
-  height: 100%;
-  display: flex;
-  align-items: flex-end;
-}
-.tui-live-footer .opate-item {
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  gap: 10px;
-  background: rgba(249, 249, 249, 0.94);
-  border-radius: 40px;
-}
-.tui-live-footer .opate-item .opate-box {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-}
-.tui-live-footer .opate-item-suffix {
-  padding-left: 10px;
-}
-.tui-live-footer .tag-item {
-  background: rgba(20, 122, 255, 0.5);
-  padding: 4px 8px;
-}
-.tui-live-footer .tag-item::before {
-  content: "";
-}
-.tui-live-members {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-.tui-live-members .list-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  background: rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-}
-.tui-live-members .list-header h1 {
-  flex: 1;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 14px;
-  color: #000000;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.tui-live-members .list-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 10px;
-  gap: 4px;
-}
-.tui-live-members .list-item .nick {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  color: #000000;
-}
-
-.line {
-  position: relative;
-}
-.line::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  height: 90%;
-  width: 1px;
-  background: #EEEEEE;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -332,7 +118,6 @@ table {
   width: 45px;
 }
 .message-default .content {
-  padding: 0 10px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -347,6 +132,7 @@ table {
   display: flex;
   flex-direction: row;
   justify-self: flex-start;
+  gap: 10px;
 }
 .in .content {
   align-items: flex-start;
@@ -356,6 +142,7 @@ table {
 .out {
   flex: 1;
   display: flex;
+  gap: 10px;
   flex-direction: row-reverse;
   justify-self: flex-end;
 }
@@ -592,7 +379,7 @@ table {
 .meesage-bubble-context {
   display: flex;
   align-items: center;
-  padding: 0 8px;
+  gap: 10px;
 }
 .meesage-bubble-context .message-context {
   flex: 1;
@@ -722,6 +509,13 @@ table {
   font-size: 14px;
   line-height: 17px;
 }
+.message-custom p {
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
+}
 
 .message-revoke {
   color: #999999;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",
@@ -60,7 +60,7 @@
   "dependencies": {
     "date-fns": "^2.29.3",
     "react-date-picker": "^9.0.0",
-    "tim-js-sdk": "^2.24.2",
+    "tim-js-sdk": "^2.26.1",
     "tim-upload-plugin": "^1.0.5"
   },
   "peerDependencies": {

package/readme.zh_cn.md

@@ -0,0 +1,60 @@
+_[English](README.md) | 简体中文_
+# [chat-uikit-react](https://www.tencentcloud.com/document/product/1047/34279/)
+>Chat UIKit 是基于腾讯云 IM SDK 的一款 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。
+基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
+Chat UIKit  中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 Chat UIKit  时只需关注自身业务或个性化扩展即可。
+
+## Demos
+我们已经构建了用于展示聊天功能的实例演示程序，您可以在我们的网站上预览这些
+
+|  | sample-chat | live-chat |
+| ------ | ------ | ------ |
+|  | ![img.png](https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/home.png) | ![img.png](https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/live-demo.png) |
+| demo 在线体验地址 | [sample-chat](https://web.sdk.qcloud.com/im/demo/intl/index.html) | [live-chat](https://web.sdk.qcloud.com/im/demo/intl/index.html?scene=live) |
+| 源码地址 | [sample-chat-code](https://github.com/TencentCloud/chat-uikit-react/tree/main/examples/sample-chat) | [live-chat-code](https://github.com/TencentCloud/chat-uikit-react/tree/main/examples/live-chat) |
+
+您可以通过 [demos](https://web.sdk.qcloud.com/im/demo/intl/index.html) 体验效果, 并可以通过 [open source code](https://github.com/TencentCloud/chat-uikit-react) 获取源码
+
+
+## Running Demo
+
+### 步骤一：下载源码
+```
+# Run the code in CLI
+$ git clone https://github.com/TencentCloud/chat-uikit-react
+# Go to the project  
+$ cd chat-uikit-react
+# Install dependencies of the demo
+$ npm install && cd examples/sample-chat && npm install
+```
+### 步骤二：配置 demo
+1. 打开`examples/sample-chat`项目，通过路径`./examples/sample-chat/src/debug/GenerateTestUserSig.js`找到`GenerateTestUserSig.js`文件。
+2. 在`GenerateTestUserSig.js`文件中设置 `SDKAPPID` 和 `SECRETKEY` ，其值可以在[IM控制台](https://console.tencentcloud.com/im)中获取。 点击目标应用卡片，进入其配置页面。
+   ![](https://qcloudimg.tencent-cloud.cn/raw/8d469e975f1ca5a2f3dbc9c6fe8774f5.png)
+3. 在 **Basic Information** 区域，点击  **Display key**，将密钥信息复制并保存到 GenerateTestUserSig 文件中。
+>!
+>- 本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通 Demo 和功能调试。**
+>- 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://www.tencentcloud.com/document/product/1047/34385)。
+
+### 步骤三：启动项目
+```
+# Launch the project
+$ cd examples/sample-chat
+$ npm run start
+```
+
+### 步骤四：发送您的第一条消息
+1. 项目启动成功后，点击“+”图标，进行创建会话。
+2. 在输入框中搜索另一个用户的 userID。
+3. 点击用户头像发起会话。
+4. 在输入框输入消息，按下"enter"键发送。
+   ![](https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/chat.gif)
+
+
+### Quick links
+- [Web demo](https://web.sdk.qcloud.com/im/demo/intl/index.html)
+- [Client APIs](https://www.tencentcloud.com/document/product/1047/33999)
+- [Free demo download](https://www.tencentcloud.com/document/product/1047/34279)
+- [FAQs](https://www.tencentcloud.com/document/product/1047/34455)
+- [Source code in GitHub](https://github.com/TencentCloud/chat-uikit-react)
+- [Generating UserSig](https://www.tencentcloud.com/document/product/1047/34385)

package/src/components/ConversationPreview/utils.tsx

@@ -65,7 +65,8 @@ export const getDisplayMessage = (conversation:Conversation, myProfile:Profile)
   let from = '';
   switch (type) {
     case TIM.TYPES.CONV_GROUP:
-      from = lastMessage?.fromAccount === myProfile?.userID ? 'You: ' : `${nameCard || nick || fromAccount}: `;
+      from = lastMessage?.fromAccount === myProfile?.userID ? 'You' : `${nameCard || nick || fromAccount || ''}`;
+      from = `${from ? `${from}:` : ''}`;
       break;
     case TIM.TYPES.CONV_C2C:
       from = isRevoked ? 'you ' : '';

package/src/components/TUIChat/hooks/useMessageReceviedListener.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 import TIM, { Message } from 'tim-js-sdk';
 import { useTUIKitContext } from '../../../context';
 
@@ -10,7 +10,7 @@ export function useMessageReceviedListener(
   ) => void,
 ) {
   const { tim } = useTUIKitContext('useMessageReceviedListener');
-  useLayoutEffect(() => {
+  useEffect(() => {
     const handleMessageRecevied = (event: any) => {
       if (customHandler && typeof customHandler === 'function') {
         customHandler(setMessageList, event);

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -13,7 +13,6 @@ export interface TUIChatHeaderDefaultProps {
   isOnline?: boolean,
   conversation?: Conversation,
   pluginComponentList?: Array<React.ComponentType>,
-
 }
 
 export interface TUIChatHeaderBasicProps extends TUIChatHeaderDefaultProps {
@@ -25,7 +24,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
   props: PropsWithChildren<T>,
 ):React.ReactElement {
   const {
-    title: propTitle,
+    title: propTitle = '',
     avatar: propAvatar,
     isOnline,
     conversation,
@@ -33,7 +32,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     opateIcon,
   } = props;
 
-  const [title, setTitle] = useState('');
+  const [title, setTitle] = useState(propTitle);
   const [avatar, setAvatar] = useState<React.ReactElement | string>('');
 
   useEffect(() => {

package/src/components/TUIConversation/TUIConversation.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useMemo } from 'react';
+import { Conversation } from 'tim-js-sdk';
 import { TUIConversationProvider, TUIConversationContextValue } from '../../context/TUIConversationContext';
 import { TUIConversationList } from '../TUIConversationList';
 import { TUIProfile } from '../TUIProfile';
@@ -6,6 +7,7 @@ import { TUIProfile } from '../TUIProfile';
 interface TUIConversationProps {
   createConversation?:(conversationID:string) => Promise<any>,
   deleteConversation?:(conversationID:string) => Promise<any>,
+  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 }
 
 export function UnMemoizedTUIConversation<T extends TUIConversationProps>(
@@ -15,15 +17,18 @@ export function UnMemoizedTUIConversation<T extends TUIConversationProps>(
     children,
     createConversation,
     deleteConversation,
+    filterConversation,
   } = props;
   const TUIConversationValue: TUIConversationContextValue = useMemo(
     () => ({
       createConversation,
       deleteConversation,
+      filterConversation,
     }),
     [
       createConversation,
       deleteConversation,
+      filterConversation,
     ],
   );
 

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -14,6 +14,7 @@ import { ConversationCreate } from '../ConversationCreate';
 import { Icon, IconTypes } from '../Icon';
 import { getDisplayTitle } from '../ConversationPreview/utils';
 import { useConversationUpdate } from './hooks/useConversationUpdate';
+import { useTUIConversationContext } from '../../context/TUIConversationContext';
 
 interface Props {
   filters?: object,
@@ -25,16 +26,22 @@ interface Props {
     setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
     event: () => void
   ) => void,
+  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 }
 export function UnMemoTUIConversationList<T extends Props>(props: T):React.ReactElement {
   const {
     Preview,
     Container = ConversationListContainer,
     onConversationListUpdated,
+    filterConversation: propsFilterConversation,
   } = props;
   const {
     tim, customClasses, conversation, setActiveConversation, setTUIProfileShow,
   } = useTUIKitContext('TUIConversationList');
+  const {
+    filterConversation: contextFilterConversation,
+  } = useTUIConversationContext('TUIConversationList');
+  const filterConversation = propsFilterConversation || contextFilterConversation;
   const [conversationUpdateCount, setConversationUpdateCount] = useState(0);
   const forceUpdate = () => setConversationUpdateCount((count) => count + 1);
 
@@ -50,8 +57,13 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
   const {
     conversationList,
     setConversationList,
-  } = useConversationList(tim, activeConversationHandler);
-  useConversationUpdate(setConversationList, onConversationListUpdated, forceUpdate);
+  } = useConversationList(tim, activeConversationHandler, filterConversation);
+  useConversationUpdate(
+    setConversationList,
+    onConversationListUpdated,
+    forceUpdate,
+    filterConversation,
+  );
   const [searchValue, setSearchValue] = useState('');
   const [searchResult, setSearchResult] = useState(conversationList);
   const [conversationCreated, setConversationCreated] = useState(false);

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

@@ -7,6 +7,7 @@ function useConversationList(
     conversationList: Array<Conversation>,
     setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
   ) => void,
+  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 ) {
   const [conversationList, setConversationList] = useState<Array<Conversation>>([]);
   const queryConversation = async (queryType?: string) => {
@@ -17,9 +18,14 @@ function useConversationList(
 
     const res = await tim?.getConversationList();
     if (res?.code === 0) {
-      const resConversationList = res.data.conversationList.filter(
-        (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
-      );
+      let resConversationList = [];
+      if (filterConversation) {
+        resConversationList = filterConversation(res.data.conversationList);
+      } else {
+        resConversationList = res.data.conversationList.filter(
+          (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+        );
+      }
       const newConversationList = queryType === 'reload'
         ? resConversationList
         : [...conversationList, resConversationList];

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

@@ -9,14 +9,19 @@ export const useConversationUpdate = (
     event: any
   ) => void,
   forceUpdate?: () => void,
+  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 ) => {
   const { tim } = useTUIKitContext('useConversationUpdate');
   useEffect(() => {
     const onConversationListUpdated = (event:any) => {
       if (setConversationList) {
-        setConversationList(event.data.filter(
-          (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
-        ));
+        if (filterConversation) {
+          setConversationList(filterConversation(event.data));
+        } else {
+          setConversationList(event.data.filter(
+            (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+          ));
+        }
       }
       if (forceUpdate) {
         forceUpdate();

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -1,5 +1,10 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { ChatSDK, Conversation, Profile } from 'tim-js-sdk';
+import TIM, {
+  ChatSDK,
+  Conversation,
+  Group,
+  Profile,
+} from 'tim-js-sdk';
 
 export interface UseChatParams{
   tim: ChatSDK,
@@ -29,6 +34,7 @@ export const useTUIKit = ({ tim, activeConversation: paramsActiveConversation }:
     },
     [tim],
   );
+
   useEffect(() => {
     setConversation(paramsActiveConversation);
   }, [paramsActiveConversation]);

package/src/components/TUIMessage/MessageCustom.tsx

@@ -15,7 +15,19 @@ function MessageCustomWithContext <T extends MessageContextProps>(
   const handleContext = (data) => {
     if (data.data === 'Hyperlink') {
       const extension = JSONStringToParse(data?.extension);
-      return extension?.item.map((item) => <a target="_blank" key={item.value} href={item.value} rel="noreferrer">{item.value}</a>);
+      if (extension?.item) {
+        return extension?.item.map((item) => <a target="_blank" key={item.value} href={item.value} rel="noreferrer">{item.value}</a>);
+      }
+      if (extension?.hyperlinks_text) {
+        const hyperlinks = extension.hyperlinks_text;
+        return (
+          <>
+            {extension.title}
+            {' '}
+            <a target="_blank" key={hyperlinks?.value} href={hyperlinks?.value} rel="noreferrer">{hyperlinks.key}</a>
+          </>
+        );
+      }
     }
     if (data.data === 'group_create') {
       return `${message?.nick || message?.from} Create a group`;

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

@@ -17,7 +17,6 @@
     }
   }
   .content {
-    padding: 0 10px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -33,6 +32,7 @@
   display: flex;
   flex-direction: row;
   justify-self: flex-start;
+  gap: 10px;
   .content {
     align-items: flex-start;
     flex: 1;
@@ -41,6 +41,7 @@
 .out {
   flex: 1;
   display: flex;
+  gap: 10px;
   flex-direction: row-reverse;
   justify-self: flex-end;
   .content {
@@ -274,7 +275,7 @@
   &-context {
     display: flex;
     align-items: center;
-    padding: 0 8px;
+    gap: 10px;
     .message-context{
       flex: 1;
     }
@@ -401,6 +402,13 @@
     font-size: 14px;
     line-height: 17px;
   }
+  p {
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 17px;
+  }
 }
 
 .message-revoke {
@@ -476,4 +484,4 @@
     border-radius: 2px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   }
-}
+}

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

@@ -74,6 +74,9 @@ export function handleShowLastMessage(item: Conversation) {
     && conversation.messageRemindType === TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
     ? t(`[${conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}条]`)
     : '';
+  if (!lastMessage.lastTime) {
+    return '';
+  }
   // Determine the lastmessage sender of the group.
   // Namecard / Nick / userid is displayed by priority
   if (conversation.type === TIM.TYPES.CONV_GROUP) {

package/src/components/TUIMessageInput/InputPluginsDefalut.tsx

@@ -12,36 +12,11 @@ import { useTUIChatStateContext } from '../../context';
 export function InputPluginsDefalut():React.ReactElement {
   const {
     sendUploadMessage,
-    // pluginConfig: {
-    //   plugins: propsPlugins,
-    //   showNumber: propsShowNumber,
-    //   MoreIcon: propsMoreIcon,
-    //   isEmojiPicker: porpsIsEmojiPicker,
-    //   isImagePicker: porpsIsImagePicker,
-    //   isVideoPicker: porpsIsVideoPicker,
-    //   isFilePicker: porpsIsFilePicker,
-    // },
     pluginConfig: propsPluginConfig,
   } = useTUIMessageInputContext('TUIMessageInputDefault');
 
   const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
 
-  // const {
-  //   pluginConfig: {
-  //     plugins: contextPlugins,
-  //     showNumber: contextShowNumber,
-  //     MoreIcon: contextMoreIcon,
-  //     isEmojiPicker: contextIsEmojiPicker,
-  //     isImagePicker: contextIsImagePicker,
-  //     isVideoPicker: contextIsVideoPicker,
-  //     isFilePicker: contextIsFilePicker,
-  //   },
-  // } = TUIMessageInputConfig;
-
-  // const propPlugins = propsPlugins || contextPlugins || [];
-  // const showNumber = propsShowNumber || contextShowNumber || 1;
-  // const MoreIcon = propsMoreIcon || contextMoreIcon;
-
   const propPlugins = propsPluginConfig?.plugins
   || TUIMessageInputConfig?.pluginConfig?.plugins || [];
   const showNumber = propsPluginConfig?.showNumber