@tencentcloud/chat-uikit-vue - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

.github/README.md

@@ -1,9 +0,16 @@
-本文介绍如何快速集成腾讯云 Web IM SDK 的 VUE UI 组件库。对于其他平台，请参考文档：
+## 关于腾讯云即时通信 IM
 
-[**chat-uikit-ios**](https://github.com/TencentCloud/chat-uikit-ios)
+腾讯云即时通信（Instant Messaging，IM）基于 QQ 底层 IM 能力开发，仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理能力，帮助您实现文字、图片、短语音、短视频等富媒体消息收发，全面满足通信需要。
 
-[**chat-uikit-flutter**](https://github.com/TencentCloud/chat-uikit-flutter)
+## 关于 chat-uikit-vue
 
-[**chat-uikit-vue**](https://github.com/TencentCloud/chat-uikit-vue)
+chat-uikit-vue 是基于腾讯云 Web IM SDK 的一款 VUE UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、音视频通话、关系链、资料、群组等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
+chat-uikit-vue 中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 chat-uikit-vue 时只需关注自身业务或个性化扩展即可。
+chat-uikit-vue Web 端 和 H5 端界面效果如下图所示：
 
+<img width="1015" alt="page02" src="https://user-images.githubusercontent.com/57951148/192585298-c79960ed-a6a9-4927-89b9-31c1b3f68740.png">
+<img width="2072" alt="page00" src="https://user-images.githubusercontent.com/57951148/192585375-6260280f-4a67-4b64-a908-efcedee1c253.png">
+
+本文介绍如何快速集成腾讯云 Web IM SDK 的 VUE UI 组件库。对于其他平台，请参考文档：
+
 [**chat-uikit-react**](https://github.com/TencentCloud/chat-uikit-react)
@@ -15,15 +22,8 @@
 
-## 关于腾讯云即时通信 IM
+[**chat-uikit-ios**](https://github.com/TencentCloud/chat-uikit-ios)
 
-腾讯云即时通信（Instant Messaging，IM）基于 QQ 底层 IM 能力开发，仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理能力，帮助您实现文字、图片、短语音、短视频等富媒体消息收发，全面满足通信需要。
+[**chat-uikit-android**](https://github.com/TencentCloud/chat-uikit-android)
 
-## 关于 chat-uikit-vue
+[**chat-uikit-flutter**](https://github.com/TencentCloud/chat-uikit-flutter)
 
-chat-uikit-vue 是基于腾讯云 Web IM SDK 的一款 VUE UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、音视频通话、关系链、资料、群组等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
-chat-uikit-vue 中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 chat-uikit-vue 时只需关注自身业务或个性化扩展即可。
-chat-uikit-vue Web 端 和 H5 端界面效果如下图所示：
-
-<img width="1015" alt="page02" src="https://user-images.githubusercontent.com/57951148/192585298-c79960ed-a6a9-4927-89b9-31c1b3f68740.png">
-<img width="2072" alt="page00" src="https://user-images.githubusercontent.com/57951148/192585375-6260280f-4a67-4b64-a908-efcedee1c253.png">
-
 ## 发送您的第一条消息
@@ -30,0 +30,0 @@

CHANGELOG.md

@@ -0,1 +1,13 @@
+## 1.3.0 (2022-01-03)
+### 新增
+- 支持消息回复功能
+- 支持表情回应功能
+- 支持C2C会话单条消息已读 
+### 修复
+- 修复已知问题，提升稳定性
+
+## 1.2.5 (2022-12-05)
+### 修复
+- 修复已知问题，提升稳定性
+
 ## 1.2.4 (2022-11-18)
@@ -2,0 +14,0 @@ ### 修复

locales/en/TUIChat.json

@@ -7,3 +7,6 @@ {
   "转发": "Forward",
-  "引用": "Quote",
+  "引用": "Reference",
+  "回复": "Reply",
+  "回复详情": "Replies",
+  "条回复": "replies",
   "打开": "Open",
@@ -10,0 +13,0 @@ "已读": "Read",

locales/zh_cn/TUIChat.json

@@ -8,2 +8,5 @@ {
   "引用": "引用",
+  "回复": "回复",
+  "回复详情": "回复详情",
+  "条回复": "条回复",
   "打开": "打开",
@@ -10,0 +13,0 @@ "已读": "已读",

package.json

 {
   "name": "@tencentcloud/chat-uikit-vue",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "dependencies": {
-    "@vueuse/core": "8.2.6",
-    "tim-js-sdk": "^2.24.2",
+    "@vueuse/core": "8.9.4",
+    "tim-js-sdk": "^2.25.0",
     "tim-upload-plugin": "^1.0.6",
@@ -14,4 +14,4 @@ "vue-clipboard3": "2.0.0",
   "peerDependencies": {
-    "@vueuse/core": "8.2.6",
-    "tim-js-sdk": "^2.24.2",
+    "@vueuse/core": "8.9.4",
+    "tim-js-sdk": "^2.25.0",
     "tim-upload-plugin": "^1.0.6",
@@ -18,0 +18,0 @@ "vue-clipboard3": "2.0.0",

TUIComponents/container/constant.ts

@@ -12,2 +12,3 @@ const constant: any = {
     reply: 'reply',
+    reference: 'reference'
   },
@@ -14,0 +15,0 @@ at: '@',

TUIComponents/container/TUIChat/components/index.ts

@@ -14,2 +14,4 @@ import MessageText from './message-text.vue';
 import MessageSystem from './message-system.vue';
+import MessageTool from './message-tool.vue';
+import MessageEmojiReact from './message-emoji-react.vue';
 
@@ -30,2 +32,4 @@ export {
   MessageSystem,
+  MessageTool,
+  MessageEmojiReact
 };

TUIComponents/container/TUIChat/index.ts

@@ -13,2 +13,3 @@ import TUIChatServer from './server';
 import ReadReceiptDialog from './plugin-components/readReceiptDialog';
+import Replies from './plugin-components/replies';
 import Call from './plugin-components/call';
@@ -33,2 +34,3 @@
   ReadReceiptDialog,
+  Replies,
 };
@@ -35,0 +37,0 @@

TUIComponents/container/TUIChat/server.ts

@@ -68,2 +68,11 @@ import IComponentServer from '../IComponentServer';
       });
+      this?.TUICore?.TUIServer?.TUIGroup?.getGroupMemberList(
+        {
+          groupID: conversation.groupProfile.groupID,
+          count: 100,
+          offset: 0,
+        }
+      ).then((res: any) => {
+        this.currentStore.allMemberList = res.data;
+      })
     } else {
@@ -216,2 +225,34 @@ this.currentStore.userInfo.isGroup = false;
   /**
+   * 重试异步函数
+   * Retry asynchronous functions
+   * 默认执行一次，之后按时间间隔列表重复执行直到成功，重复次数完毕后仍失败则失败
+   * Execute once by default, and then repeat it according to the time interval list until it succeeds. 
+   * If it still fails after the number of repetitions is complete, it will reject.
+   * 
+   * @param {callback} callback 回调函数/callback function
+   * @param {Array<number>} intervalList 间隔时间列表/interval list
+   * @param {callback} retryBreakFn 强制重复结束条件函数/break retry function
+   * @returns {Promise} 返回异步函数/return
+   */
+  public handlePromiseCallbackRetry(callback: any, intervalList: Array<number> = [], retryBreakFn: any = function () { return false; }): Promise<any> {
+    return new Promise<void>((resolve, reject) => {
+      let times = 0;
+      function tryFn() {
+        times++;
+        callback()
+          .then(resolve)
+          .catch((error: any) => {
+            if (times > intervalList.length || (retryBreakFn && retryBreakFn(error))) {
+              reject(error);
+              return;
+            }
+            setTimeout(tryFn, intervalList[times - 1]);
+          })
+      }
+      tryFn();
+    })
+  }
+
+
+  /**
    * 文件上传进度函数处理
@@ -699,2 +740,6 @@ * File upload progress function processing
         const imResponse = await this.TUICore.tim.revokeMessage(message);
+        const cloudCustomData = JSONToObject(message?.cloudCustomData);
+        if (cloudCustomData?.messageReply?.messageRootID) {
+          await this.revokeReplyMessage(message);
+        }
         resolve(imResponse);
@@ -752,2 +797,178 @@ } catch (error) {
   /**
+   * 变更消息
+   * modify message
+   * 
+   * @param {Array.<message>} message 消息实例/message
+   * @returns {Promise}
+   */
+  public modifyMessage(message: any): Promise<any> {
+    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
+      try {
+        const imResponse = await this.TUICore.tim.modifyMessage(message);
+        resolve(imResponse);
+      } catch (error) {
+        // 修改消息失败
+        // Modify message error
+        const code = (error as any)?.code;
+        const data = (error as any)?.data;
+        if (code === 2480) {
+          console.warn('MODIFY_MESSAGE_ERROR', '修改消息发生冲突，data.message 是最新的消息', 'data.message:', data?.message);
+        } else if (code === 2481) {
+          console.warn('MODIFY_MESSAGE_ERROR', '不支持修改直播群消息');
+        } else if (code === 20026) {
+          console.warn('MODIFY_MESSAGE_ERROR', '消息不存在');
+        }
+        reject(error);
+      }
+    })
+  }
+  /**
+   * 回复消息
+   * reply message
+   * @param {Array.<message>} message 消息实例/message
+   * @returns {Promise}
+   */
+  public replyMessage(message: any, messageRoot?: any): Promise<any> {
+    const replyFunction = () => {
+      return this.handlePromiseCallback(async (resolve: any, reject: any) => {
+        try {
+          const repliesObject = {
+            messageAbstract: message?.payload?.text,
+            messageSender: message?.from,
+            messageID: message?.ID,
+            messageType: message?.type,
+            messageTime: message?.time,
+            messageSequence: message?.sequence,
+            version: 1,
+          }
+          if (!messageRoot) {
+            const cloudCustomData = JSONToObject(message?.cloudCustomData);
+            const messageRootID = cloudCustomData?.messageReply?.messageRootID;
+            messageRoot = await this?.currentStore?.messageList?.find((item: any) => item?.ID === messageRootID) || this.findMessage(messageRootID);
+          }
+          const rootCloudCustomData = messageRoot?.cloudCustomData ? JSONToObject(messageRoot?.cloudCustomData) : { messageReplies: {} };
+          if (rootCloudCustomData?.messageReplies?.replies) {
+            rootCloudCustomData.messageReplies.replies = [...rootCloudCustomData?.messageReplies?.replies, repliesObject];
+          } else {
+            rootCloudCustomData.messageReplies = { replies: [repliesObject], version: 1 }
+          }
+          messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
+          const imResponse = this.modifyMessage(messageRoot);
+          resolve(imResponse);
+        } catch (error) {
+          reject(error);
+        }
+      })
+    }
+    const retryBreakFunction = function (error: any) {
+      if (error && error?.code === 2480) return false;
+      return true;
+    }
+    return this.handlePromiseCallbackRetry(replyFunction, [500, 1000, 3000], retryBreakFunction);
+  }
+
+  /**
+ * 撤回回复消息
+ * revoke reply message
+ * @param {Array.<message>} message 消息实例/message
+ * @returns {Promise}
+ */
+  public revokeReplyMessage(message: any, messageRoot?: any): Promise<any> {
+    const revokeReplyFunction = () => {
+      return this.handlePromiseCallback(async (resolve: any, reject: any) => {
+        try {
+          if (!messageRoot) {
+            const cloudCustomData = JSONToObject(message?.cloudCustomData);
+            const messageRootID = cloudCustomData?.messageReply?.messageRootID;
+            messageRoot = await this?.currentStore?.messageList?.find((item: any) => item?.ID === messageRootID) || this.findMessage(messageRootID);
+          }
+          const rootCloudCustomData = messageRoot?.cloudCustomData ? JSONToObject(messageRoot?.cloudCustomData) : { messageReplies: {} };
+          if (rootCloudCustomData?.messageReplies?.replies) {
+            const index = rootCloudCustomData.messageReplies.replies.findIndex((item: any) => item?.messageID === message?.ID);
+            rootCloudCustomData?.messageReplies?.replies?.splice(index, 1);
+          }
+          messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
+          const imResponse = this.modifyMessage(messageRoot);
+          resolve(imResponse);
+        } catch (error) {
+          reject(error);
+        }
+      })
+    }
+    const retryBreakFunction = function (error: any) {
+      if (error && error?.code === 2480) return false;
+      return true;
+    }
+    return this.handlePromiseCallbackRetry(revokeReplyFunction, [500, 1000, 3000], retryBreakFunction);
+  }
+
+  /**
+   * 表情回应
+   * emoji react
+   * @param {Array.<message>} message 消息实例/message
+   * @returns {Promise}
+   */
+  public emojiReact(message: any, emojiID: any): Promise<any> {
+    const emojiReactFunction = () => {
+      return this.handlePromiseCallback(async (resolve: any, reject: any) => {
+        try {
+          if (!message || !message?.ID || !emojiID) reject();
+          const userID = this.TUICore?.TUIServer?.TUIProfile?.store?.profile?.userID;
+          message = await this?.currentStore?.messageList?.find((item: any) => item?.ID === message?.ID) || this.findMessage(message?.ID);
+          const cloudCustomData = message?.cloudCustomData ? JSONToObject(message?.cloudCustomData) : { messageReact: {} };
+          if (cloudCustomData?.messageReact?.reacts) {
+            if (cloudCustomData?.messageReact?.reacts[emojiID]) {
+              const index = cloudCustomData?.messageReact?.reacts[emojiID]?.indexOf(userID);
+              if (index === -1) {
+                cloudCustomData?.messageReact?.reacts[emojiID]?.push(userID);
+              } else {
+                cloudCustomData?.messageReact?.reacts[emojiID]?.splice(index, 1);
+                if (cloudCustomData?.messageReact?.reacts[emojiID]?.length === 0) {
+                  delete cloudCustomData?.messageReact?.reacts[emojiID];
+                }
+              }
+            } else {
+              cloudCustomData.messageReact.reacts[emojiID] = [userID];
+            }
+          } else {
+            cloudCustomData.messageReact = {
+              reacts: {},
+              version: 1
+            }
+            cloudCustomData.messageReact.reacts[emojiID] = [userID];
+          }
+          message.cloudCustomData = JSON.stringify(cloudCustomData);
+          const imResponse = this.modifyMessage(message);
+          resolve(imResponse);
+        } catch (error) {
+          reject(error);
+        }
+      })
+    }
+    const retryBreakFunction = function (error: any) {
+      if (error && error?.code === 2480) return false;
+      return true;
+    }
+    return this.handlePromiseCallbackRetry(emojiReactFunction, [500, 1000, 3000], retryBreakFunction);
+  }
+
+
+  /**
+   * 查询消息
+   * find message
+   * @param {String} messageID 消息实例ID/messageID
+   * @returns {Promise}
+   */
+  public findMessage(messageID: string): Promise<any> {
+    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
+      try {
+        const imResponse = await this.TUICore.tim.findMessage(messageID);
+        resolve(imResponse);
+      } catch (error) {
+        reject(error);
+      }
+    })
+  }
+
+  /**
    * 获取群组属性
@@ -754,0 +975,0 @@ * get group profile

TUIComponents/container/TUIChat/utils/utils.ts

 import { formatTime } from '../../../utils/date';
 import { decodeText } from './decodeText';
-import TIM from 'tim-js-sdk';
+import TIM from '../../../../TUICore/tim';
 import constant from '../../constant';
@@ -19,3 +19,3 @@ import { Message } from '../interface';
         ? item?.groupProfile?.avatar
-        : 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/im/demo/TUIkit/web/img/constomer.svg';
+        : 'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg';
       break;
@@ -64,2 +64,44 @@ case TIM.TYPES.CONV_SYSTEM:
 }
+
+export function handleReferenceForShow (message: any) {
+  const data = {
+    referenceMessageForShow: '',
+    referenceMessageType: 0,
+  }
+  if (!message || !message?.ID || !message?.type) return data;
+  switch (message.type) {
+    case TIM.TYPES.MSG_TEXT:
+      data.referenceMessageForShow = message?.payload?.text;
+      data.referenceMessageType = 1;
+      break;
+    case TIM.TYPES.MSG_CUSTOM:
+      data.referenceMessageForShow = '[自定义消息]';
+      data.referenceMessageType = 2;
+      break;
+    case TIM.TYPES.MSG_IMAGE:
+      data.referenceMessageForShow = '[图片]';
+      data.referenceMessageType = 3;
+      break;
+    case TIM.TYPES.MSG_AUDIO:
+      data.referenceMessageForShow = '[语音]';
+      data.referenceMessageType = 4;
+      break;
+    case TIM.TYPES.MSG_VIDEO:
+      data.referenceMessageForShow = '[视频]';
+      data.referenceMessageType = 5;
+      break;
+    case TIM.TYPES.MSG_FILE:
+      data.referenceMessageForShow = '[文件]';
+      data.referenceMessageType = 6;
+      break;
+    case TIM.TYPES.MSG_FACE:
+      data.referenceMessageForShow = '[表情]';
+      data.referenceMessageType = 8;
+      break;
+  }
+  return data;
+}
+
+
+
 // Internal display of processing message box
@@ -66,0 +108,0 @@ export function handleShowLastMessage(item: any) {

TUICore/server/index.ts

@@ -139,2 +139,3 @@ import { TUITheme, TUIi18n, TUIEnv, TUIDirective } from '../../TUIPlugin';
           TUICore.isLogin = true;
+          (window as any)._isTIMCallKit = true;
           TUICore?.instance?.TUIServer?.TUICallKit?.init({
@@ -141,0 +142,0 @@ SDKAppID: this.SDKAppID,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

871192

increased by6.18%

Number of package files

292

increased by4.29%

Lines of code

6672

increased by4.17%

Dependency changes

• + Added@types/web-bluetooth@0.0.14(transitive)

• + Added@vueuse/core@8.9.4(transitive)

• + Added@vueuse/metadata@8.9.4(transitive)

• + Added@vueuse/shared@8.9.4(transitive)

• - Removed@vueuse/core@8.2.6(transitive)

• - Removed@vueuse/metadata@8.2.6(transitive)

• - Removed@vueuse/shared@8.2.6(transitive)

• Updated@vueuse/core@8.9.4

• Updatedtim-js-sdk@^2.25.0