@tencentcloud/chat-uikit-react 0.0.1

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

@@ -0,0 +1,142 @@
+import { useCallback } from 'react';
+import { Message } from 'tim-js-sdk';
+import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
+import { useTUIChatActionContext, useTUIKitContext } from '../../../context';
+import { Toast } from '../../Toast';
+
+interface MessageHandlerProps {
+  handleError?: (error) => void,
+  message?: Message,
+}
+
+export const useMessageHandler = (props?: MessageHandlerProps) => {
+  const {
+    message,
+    handleError,
+  } = props;
+
+  const {
+    removeMessage,
+    editLocalmessage,
+    operateMessage,
+    revokeMessage,
+  } = useTUIChatActionContext('useDeleteHandler');
+  const { tim } = useTUIKitContext('useDeleteHandler');
+
+  const handleDelMessage = useCallback(async (event?) => {
+    event.preventDefault();
+    if (!message?.ID || !tim || !removeMessage) {
+      return;
+    }
+
+    try {
+      await tim.deleteMessage([message]);
+      removeMessage(message);
+    } catch (error) {
+      if (handleError) {
+        handleError({
+          functionName: 'deleteMessage',
+          error,
+        });
+      } else {
+        Toast({ text: 'Error deleting message', type: 'error' });
+        throw new Error(error);
+      }
+    }
+  }, [message]);
+
+  const handleRevokeMessage = useCallback(async (event?) => {
+    event.preventDefault();
+    if (!message?.ID || !tim || !editLocalmessage) {
+      return;
+    }
+
+    try {
+      if (revokeMessage) {
+        await revokeMessage(message);
+      } else {
+        await tim.revokeMessage(message);
+      }
+      editLocalmessage(message);
+    } catch (error) {
+      if (handleError) {
+        handleError({
+          functionName: 'revokeMessage',
+          error,
+        });
+      } else {
+        const text = message.flow === MESSAGE_FLOW.OUT ? 'The message recall exceeded the time limit (default 2 minutes)' : 'Error revoke Message';
+        Toast({ text, type: 'error' });
+        throw new Error(error);
+      }
+    }
+  }, [message]);
+
+  const handleReplyMessage = useCallback((event?) => {
+    event.preventDefault();
+    if (!message?.ID || !tim || !operateMessage) {
+      return;
+    }
+    operateMessage({
+      [MESSAGE_OPERATE.QUOTE]: message,
+    });
+  }, [message]);
+
+  const handleCopyMessage = useCallback((event?) => {
+    event.preventDefault();
+    if (navigator.clipboard) {
+      // clipboard api
+      navigator.clipboard.writeText(message.payload.text);
+    } else {
+      const textarea = document.createElement('textarea');
+      document.body.appendChild(textarea);
+      // hide textarea
+      textarea.style.position = 'fixed';
+      textarea.style.clip = 'rect(0 0 0 0)';
+      textarea.style.top = '10px';
+      textarea.value = message.payload.text;
+      // select
+      textarea.select();
+      // copy
+      document.execCommand('copy', true);
+      // remove textarea
+      document.body.removeChild(textarea);
+    }
+  }, [message]);
+
+  const handleResendMessage = useCallback(async (event?) => {
+    try {
+      const res = await tim.resendMessage(message);
+      editLocalmessage(res?.data?.message);
+    } catch (error) {
+      if (handleError) {
+        handleError({
+          functionName: 'resendMessage',
+          error,
+        });
+      } else {
+        Toast({ text: error, type: 'error' });
+        throw new Error(error);
+      }
+    }
+  }, [message]);
+
+  const handleForWardMessage = useCallback(async (event?) => {
+    event.preventDefault();
+    if (!message?.ID || !tim || !operateMessage) {
+      return;
+    }
+    operateMessage({
+      [MESSAGE_OPERATE.FORWARD]: message,
+    });
+  }, [message]);
+
+  return {
+    handleDelMessage,
+    handleRevokeMessage,
+    handleReplyMessage,
+    handleCopyMessage,
+    handleResendMessage,
+    handleForWardMessage,
+  };
+};

package/src/components/TUIMessage/hooks/useMessagePluginElement.tsx

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+
+interface MessagePluginElementProps {
+  handle?: (event?:React.SyntheticEvent<Element, Event>) => void,
+  children: React.ReactNode
+}
+export const useMessagePluginElement = <
+T extends MessagePluginElementProps>(props:PropsWithChildren<T>) => {
+  const {
+    children,
+    handle,
+  } = props;
+
+  return (
+    <div className="message-plugin-box" role="button" tabIndex={0} onClick={handle}>{children}</div>
+  );
+};

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

@@ -0,0 +1,65 @@
+import { useLayoutEffect, useState } from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+import { useTUIChatStateContext, useTUIKitContext } from '../../../context';
+import { JSONStringToParse } from '../../untils';
+
+interface messageContextParams {
+  message?: Message,
+}
+
+const replyType = {
+  [TIM.TYPES.MSG_TEXT]: 1,
+  [TIM.TYPES.MSG_FACE]: 8,
+  [TIM.TYPES.MSG_IMAGE]: 3,
+  [TIM.TYPES.MSG_AUDIO]: 4,
+  [TIM.TYPES.MSG_VIDEO]: 5,
+  [TIM.TYPES.MSG_FILE]: 6,
+  [TIM.TYPES.MSG_CUSTOM]: 2,
+};
+
+export const useMessageReply = <T extends messageContextParams>(params:T) => {
+  const {
+    message,
+  } = params;
+  const [messageReply, setMessageReply] = useState(null);
+  const [sender, setSender] = useState('');
+  const [replyMessage, setReplyMessage] = useState(null);
+  const [messageID, setMessageID] = useState('');
+
+  const { tim } = useTUIKitContext('TUIChat');
+  const { messageList } = useTUIChatStateContext('useMessageReply');
+
+  useLayoutEffect(() => {
+    handleMessageReply(message);
+  }, [message]);
+
+  const handleMessageReply = (data:Message) => {
+    if (!data?.cloudCustomData) {
+      return;
+    }
+    const cloudCustomData = JSONStringToParse(message?.cloudCustomData);
+    const reply = cloudCustomData?.messageReply || '';
+    if (!reply) {
+      return;
+    }
+    setMessageReply(reply);
+    setSender(reply?.messageSender);
+    setMessageID(reply?.messageID);
+    const replyData = messageList.filter((item) => {
+      const isSomeID = item.ID === reply?.messageID;
+      const isSomeType = isSomeID && replyType[item.type] === reply.messageType;
+      const isSomeContent = item.type === TIM.TYPES.MSG_TEXT
+        ? item.payload.text === reply.messageAbstract : true;
+      return isSomeID && isSomeType && isSomeContent;
+    });
+    setReplyMessage(replyData[0] || tim.findMessage(reply?.messageID));
+  };
+
+  return {
+    messageReply,
+    sender,
+    replyMessage,
+    messageID,
+    message,
+  };
+};

package/src/components/TUIMessage/index.ts

@@ -0,0 +1,3 @@
+export * from './TUIMessage';
+export * from './MessagePlugins';
+export * from './MessageContext';

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

@@ -0,0 +1,32 @@
+.message-text, .message-custom{
+  border: 1px solid #DDDDDD;
+}
+
+.bubble {
+  &-out {
+    background: #F2F7FF;
+    border: 1px solid #F2F7FF;
+  }
+}
+
+.meesage-bubble-reply-out {
+  background: #F2F7FF;
+  .meesage-bubble-reply-main {
+    .message-text{
+      background: none;
+    }
+  }
+}
+
+
+.message-tip {
+  color: #999999;
+}
+
+.tip {
+  .bubble {
+    .edit {
+      color: #147aff;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

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

@@ -0,0 +1,389 @@
+.message-default {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-family: SF Pro Text;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
+  .avatar {
+    width: 45px;
+    img {
+      width: 45px;
+    }
+  }
+  .content {
+    padding: 0 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    .name {
+      display: inline-block;
+      padding-bottom: 3px;
+    }
+  }
+}
+
+.in {
+  display: flex;
+  flex-direction: row;
+  justify-self: flex-start;
+  .content {
+    align-items: flex-start;
+    flex: 1;
+  }
+}
+.out {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-self: flex-end;
+  .content {
+    align-items: flex-end;
+    flex: 1;
+  }
+}
+.tip {
+  justify-self: center;
+}
+
+.bubble {
+  padding: 8px 16px;
+  &-in {
+    border-radius: 16px 16px 16px 0;
+  }
+  &-out {
+    border-radius: 16px 16px 0 16px;
+  }
+}
+
+.message-status {
+  display: flex;
+  align-items: flex-end;
+  align-self: flex-end;
+  .time {
+    width: max-content;
+    font-weight: 400;
+    padding: 5px 0 0 10px;
+    font-size: 12px;
+    line-height: 14px;
+    text-align: right;
+    color: #7A7A7A;
+  }
+}
+
+.message-image, .message-video {
+  position: relative;
+  .message-status {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    .time {
+      color: #FFFFFF;
+    }
+  }
+}
+
+.message-text {
+  display: flex;
+  &-content {
+    display: inline;
+    word-break: break-word;
+    font-family: 'SF Pro Text';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 17px;
+    .message-status {
+      display: inline-flex;
+      float: right;
+      clear: right;
+    }
+  }
+}
+
+.message-text, 
+.message-tip {
+  font-family: 'SF Pro Text';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  .text-img {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.message-image {
+  background: #FFFFFF;
+  img {
+    max-width: 300px;
+  }
+  .big-image {
+    max-width: 95%;
+    max-height: 95%;
+  }
+}
+
+.message-video {
+  max-width: 300px;
+  .snap-video {
+    position: relative;
+    &::before {
+      position: absolute;
+      z-index: 1;
+      content: '';
+      width: 0px;
+      height: 0px;
+      border: 15px solid transparent;
+      border-left: 20px solid #ffffff;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+    }
+  }
+  video {
+    width: 100%;
+    border-radius: 10px;
+  }
+  .play-video {
+    max-width: 95%;
+    max-height: 95%;
+  }
+}
+
+.message-file {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ddd;
+  &-main {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    background: #FFFFFF;
+    border-radius: 4px;
+    .icon {
+      margin-right: 7px;
+    }
+  }
+  &-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    .time {
+      padding-top: 10px;
+    }
+  }
+  &-size {
+    padding-top: 10px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #7A7A7A;
+  }
+}
+
+.message-merger {
+  display: flex;
+  flex-direction: column;
+  background: #ECEBEB;
+  h3 {
+    padding-bottom: 4px;
+    border-bottom: 1px solid #a1a1a1;
+  }
+  &-list {
+    opacity: 0.6;
+  }
+  &-item {
+    padding-top: 4px;
+  }
+}
+
+.meesage-bubble-reply {
+  background: #ECEBEB;
+  padding: 8px 16px;
+  &-in {
+    border-radius: 16px 16px 16px 0;
+  }
+  &-out {
+    border-radius: 16px 16px 0px 16px;
+  }
+  .message-text {
+    border-radius: none;
+    border: none;
+  }
+  .bubble {
+    padding: 0;
+    &-in {
+      border-radius: 0;
+    }
+  }
+  &-main {
+    position: relative;
+    padding: 10px 14px;
+    margin-bottom: 10px;
+    background: #FFFFFF;
+    &::before {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 100%;
+      background: #D9D9D9;
+      top: 0;
+      left: 0;
+    }
+    .title {
+      font-family: 'SF Pro Text';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 17px;
+      padding-bottom: 10px;
+    }
+    .message-context {
+      opacity: 0.6;
+    }
+  }
+}
+
+.meesage-bubble {
+  display: flex;
+  align-items: flex-end;
+  &-status {
+    margin: 3px;
+  }
+  &-context {
+    display: flex;
+    align-items: center;
+    .message-context{
+      flex: 1;
+    }
+  }
+}
+
+.icon-fail {
+  width: 14px;
+  height: 14px;
+  border-radius: 14px;
+  position: relative;
+  background: #FA5151;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  &::before {
+    position: absolute;
+    content: "!";
+    color: #FFFFFF;
+    font-size: 12px;
+  }
+}
+
+.message-face {
+  display: flex;
+  flex-direction: column;
+  .img {
+    max-width: 88px;
+  }
+}
+
+.loading {
+  display: inline-block;
+  position: relative;
+  .img, video{
+    min-width: 60px;
+    min-height: 60px;
+    max-width: 300px;
+    border-radius: 10px;
+  }
+  &::before {
+    position: absolute;
+    content: "";
+    background: rgba(#000000, 0.5);
+    border-radius: 10px;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  &::after {
+    position: absolute;
+    content: "";
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #555;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    animation: spin 2s linear infinite;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+  }
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+}
+
+.message-plugin {
+  width: 32px;
+  margin: 0 5px;
+  .icon-more {
+    transform: scale(1.5);
+  }
+  .plugin-popup-box{
+    top: 100%;
+    bottom: auto;
+    // left: -80px;
+  }
+  &-top {
+    top: auto !important;
+    bottom: 100% !important;
+  }
+  &-left {
+    left: -140px !important;
+  }
+  &-box {
+    padding: 6px 0;
+  }
+  &-item {
+    min-width: 144px;
+    padding: 6px 13px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 500;
+    font-size: 12.8px;
+    line-height: 15px;
+    &:hover {
+      background: rgba(0,110,255,.1);
+      color: #147aff;
+    }
+    .del {
+      color: #FF584C;
+    }
+  }
+}
+
+.message-custom {
+  display: flex;
+  word-break: break-all;
+  a {
+    color: #679ce1;
+    text-decoration: none;
+    font-family: 'SF Pro Text';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 17px;
+  }
+}
+
+.message-revoke {
+  color: #999999;
+}

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

@@ -0,0 +1,61 @@
+import { emojiMap, emojiUrl } from './emojiMap';
+/** 传入messageBody（群系统消息SystemMessage，群提示消息GroupTip除外）
+ * payload = {
+ *  msgType: 'TIMTextElem',
+ *  msgContent: {
+ *    text: 'AAA[龇牙]AAA[龇牙]AAA[龇牙AAA]'
+ *  }
+ *}
+ * */
+export function decodeText(payload:any) {
+  const renderDom = [];
+  // 文本消息
+  let temp = payload.text;
+  let left = -1;
+  let right = -1;
+  while (temp !== '') {
+    left = temp.indexOf('[');
+    right = temp.indexOf(']');
+    switch (left) {
+      case 0:
+        if (right === -1) {
+          renderDom.push({
+            name: 'text',
+            text: temp,
+          });
+          temp = '';
+        } else {
+          const emojiKey = temp.slice(0, right + 1);
+          if (emojiMap[emojiKey]) {
+            renderDom.push({
+              name: 'img',
+              src: emojiUrl + emojiMap[emojiKey],
+            });
+            temp = temp.substring(right + 1);
+          } else {
+            renderDom.push({
+              name: 'text',
+              text: '[',
+            });
+            temp = temp.slice(1);
+          }
+        }
+        break;
+      case -1:
+        renderDom.push({
+          name: 'text',
+          text: temp,
+        });
+        temp = '';
+        break;
+      default:
+        renderDom.push({
+          name: 'text',
+          text: temp.slice(0, left),
+        });
+        temp = temp.substring(left);
+        break;
+    }
+  }
+  return renderDom;
+}