@tencentcloud/chat-uikit-react 0.0.1

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

@@ -0,0 +1,40 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { ChatSDK, Conversation, Profile } from 'tim-js-sdk';
+
+export interface UseChatParams{
+  tim: ChatSDK
+}
+export const useTUIKit = ({ tim }:UseChatParams) => {
+  const [conversation, setConversation] = useState<Conversation>();
+  const [myProfile, setMyProfile] = useState<Profile>();
+  const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
+  const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
+  useEffect(() => {
+    const getMyProfile = async () => {
+      const res = await tim?.getMyProfile();
+      setMyProfile(res?.data);
+    };
+    getMyProfile();
+  }, [tim]);
+  const setActiveConversation = useCallback(
+    (activeConversation?: Conversation) => {
+      if (activeConversation) {
+        tim?.setMessageRead({ conversationID: activeConversation.conversationID });
+      }
+      if (conversation && (activeConversation.conversationID !== conversation.conversationID)) {
+        setTUIManageShow(false);
+      }
+      setConversation(activeConversation);
+    },
+    [tim],
+  );
+  return {
+    conversation,
+    setActiveConversation,
+    myProfile,
+    TUIManageShow,
+    setTUIManageShow,
+    TUIProfileShow,
+    setTUIProfileShow,
+  };
+};

package/src/components/TUIKit/index.ts

@@ -0,0 +1,3 @@
+export * from './TUIKit';
+export * from './hooks/useTUIKit';
+export * from './hooks/useCreateTUIKitContext';

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

@@ -0,0 +1,9 @@
+@import "reset";
+.tui-kit {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #FFFFFF;
+  text-align: initial;
+}

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

@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/components/TUIManage/TUIManage.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import './styles/index.scss';
+import { Icon, IconTypes } from '../Icon';
+import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
+import { Switch } from '../Switch';
+import { useTUIKitContext } from '../../context';
+import { getMessageProfile } from '../ConversationPreview/utils';
+import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
+import { useConversation } from '../../hooks';
+
+export function TUIManage() {
+  const [conversation, setConversation] = useState(null);
+  const [profile, setProfile] = useState(null);
+  const [isPinned, setIsPinned] = useState(false);
+  const [forceUpdateCount, setForceUpdateCount] = useState(0);
+  const {
+    conversation: activeConversation,
+    setActiveConversation,
+    tim,
+    TUIManageShow,
+    setTUIManageShow,
+  } = useTUIKitContext('TUIManage');
+  useConversationUpdate(null, () => {
+    setForceUpdateCount((count) => count + 1);
+  });
+  const { pinConversation, deleteConversation } = useConversation(tim);
+  const pinChatChange = (e) => {
+    setIsPinned(e.target.checked);
+    pinConversation({
+      conversationID: conversation.conversationID,
+      isPinned: e.target.checked,
+    });
+  };
+  const handleDelete = () => {
+    deleteConversation(conversation.conversationID);
+    setActiveConversation(null);
+  };
+  const close = () => {
+    setTUIManageShow(false);
+  };
+  useEffect(() => {
+    setConversation(activeConversation);
+    setProfile(getMessageProfile(activeConversation));
+    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>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)
+            }
+          />
+        </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">Pin</div>
+          <Switch
+            onChange={pinChatChange}
+            checked={isPinned}
+          />
+        </div>
+        <div className="manage-handle-box" role="presentation" onClick={handleDelete}>
+          <div className="manage-handle-title red">Delete</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  );
+}

package/src/components/TUIManage/index.ts

@@ -0,0 +1 @@
+export * from './TUIManage';

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

@@ -0,0 +1,67 @@
+.tui-manage {
+  display: flex;
+  flex-direction: column;
+  width: 22%;
+  max-width: 300px;
+  min-width: 200px;
+  border-left: 1px solid #f9fafb;
+  .red {
+    color: #FF584C !important;
+  }
+  .tui-manage-title {
+    display: flex;
+    align-items: center;
+    padding: 24px 20px;
+    span {
+      margin-left: 10px;
+      font-weight: 700;
+      font-size: 14px;
+      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;
+        font-size: 24px;
+        line-height: 29px;
+        margin-bottom: 10px;
+      }
+      .info-id {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: #666666;
+        margin-bottom: 30px;
+        text-align: center;
+      }
+    }
+    .tui-manage-handle {
+      .manage-handle-box {
+        &:nth-child(2) {
+          margin-top: 10px;
+          cursor: pointer;
+        }
+        display: flex;
+        background: rgba(249, 249, 249, 0.94);
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px;
+        box-sizing: border-box;
+        .manage-handle-title {
+          font-size: 16px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+    }
+  }
+}

package/src/components/TUIMessage/MessageAudio.tsx

@@ -0,0 +1,28 @@
+import React, { PropsWithChildren } from 'react';
+import type { MessageContextProps } from './MessageText';
+
+function MessageAudioWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  return (
+    <div className="message-audio">
+      <audio muted src={context.url} />
+      {children}
+    </div>
+  );
+}
+
+const MemoizedMessageAudio = React.memo(MessageAudioWithContext) as
+typeof MessageAudioWithContext;
+
+export function MessageAudio(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageAudio {...props} />
+  );
+}

package/src/components/TUIMessage/MessageBubble.tsx

@@ -0,0 +1,99 @@
+import React, {
+  PropsWithChildren,
+  ReactNode,
+  useState,
+} from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+import { MESSAGE_STATUS } from '../../constants';
+import { Icon, IconTypes } from '../Icon';
+import { useMessageReply } from './hooks/useMessageReply';
+
+export interface MessageBubbleProps {
+  message?: Message,
+  className?: string,
+  children?: ReactNode,
+  Context?: React.ComponentType<any>,
+  Plugins?: React.ComponentType<any>,
+}
+
+function MessageBubbleWithContext <T extends MessageBubbleProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    message,
+    children,
+    Context,
+    Plugins,
+  } = props;
+
+  const [PluginsShow, setPluginsShow] = useState(false);
+
+  const {
+    messageReply,
+    replyMessage,
+    sender,
+  } = useMessageReply({ message });
+
+  const handleLoading = () => !!((
+    message?.type === TIM.TYPES.MSG_IMAGE
+    || message?.type === TIM.TYPES.MSG_VIDEO
+    || message?.type === TIM.TYPES.MSG_FILE
+  ) && message?.status === MESSAGE_STATUS.UNSEND);
+
+  const handleMouseEnter = () => {
+    setPluginsShow(true);
+  };
+  const handleMouseLeave = () => {
+    setPluginsShow(false);
+  };
+
+  return (
+    <div className="meesage-bubble">
+      <div
+        className={`meesage-bubble-context ${message?.flow}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <div
+          className={
+            `message-context
+            ${messageReply ? `meesage-bubble-reply meesage-bubble-reply-${message?.flow}` : ''}
+            ${handleLoading() ? 'loading' : ''}`
+          }
+        >
+          {
+            messageReply && (
+            <main className="meesage-bubble-reply-main">
+              <header className="title">{sender}</header>
+              {Context && <Context message={replyMessage} />}
+            </main>
+            )
+          }
+          {children}
+        </div>
+        <div className="message-plugin">
+          {PluginsShow && Plugins && <Plugins />}
+        </div>
+      </div>
+      <div className="message-bubble-status icon">
+        {
+          message?.status === MESSAGE_STATUS.FAIL
+          && <i className="icon-fail" />
+        }
+        {
+          message?.status === MESSAGE_STATUS.UNSEND
+          && <Icon width={10} height={10} type={IconTypes.PROGRESS} />
+        }
+      </div>
+    </div>
+  );
+}
+
+const MemoizedMessageBubble = React.memo(MessageBubbleWithContext) as
+typeof MessageBubbleWithContext;
+
+export function MessageBubble(props:MessageBubbleProps):React.ReactElement {
+  return (
+    <MemoizedMessageBubble {...props} />
+  );
+}

package/src/components/TUIMessage/MessageContext.tsx

@@ -0,0 +1,81 @@
+import React, { PropsWithChildren } from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+
+import { MessageAudio } from './MessageAudio';
+import { MessageCustom } from './MessageCustom';
+import { MessageFace } from './MessageFace';
+import { MessageFile } from './MessageFile';
+import { MessageImage } from './MessageImage';
+import { MessageLocation } from './MessageLocation';
+import { MessageMerger } from './MessageMerger';
+import { MessageText } from './MessageText';
+import { MessageVideo } from './MessageVideo';
+
+import { useMessageContextHandler } from './hooks';
+import { MessageStatus } from './MessageStatus';
+import { useTUIMessageContext } from '../../context';
+
+const components = {
+  [TIM.TYPES.MSG_TEXT]: MessageText,
+  [TIM.TYPES.MSG_FACE]: MessageFace,
+  [TIM.TYPES.MSG_IMAGE]: MessageImage,
+  [TIM.TYPES.MSG_AUDIO]: MessageAudio,
+  [TIM.TYPES.MSG_VIDEO]: MessageVideo,
+  [TIM.TYPES.MSG_FILE]: MessageFile,
+  [TIM.TYPES.MSG_CUSTOM]: MessageCustom,
+  [TIM.TYPES.MSG_MERGER]: MessageMerger,
+  [TIM.TYPES.MSG_LOCATION]: MessageLocation,
+};
+
+export interface MessageContextProps {
+  message?: Message,
+}
+
+function MessageContextWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    message,
+  } = props;
+
+  const { context } = useMessageContextHandler({ message });
+  const {
+    CustemElement,
+    TextElement,
+    FaceElement,
+    ImageElement,
+    AudioElement,
+    VideoElement,
+    FileElement,
+    MergerElement,
+    LocationElement,
+  } = useTUIMessageContext('MessageCustom');
+
+  const CustemComponents = {
+    [TIM.TYPES.MSG_TEXT]: TextElement,
+    [TIM.TYPES.MSG_FACE]: FaceElement,
+    [TIM.TYPES.MSG_IMAGE]: ImageElement,
+    [TIM.TYPES.MSG_AUDIO]: AudioElement,
+    [TIM.TYPES.MSG_VIDEO]: VideoElement,
+    [TIM.TYPES.MSG_FILE]: FileElement,
+    [TIM.TYPES.MSG_CUSTOM]: CustemElement,
+    [TIM.TYPES.MSG_MERGER]: MergerElement,
+    [TIM.TYPES.MSG_LOCATION]: LocationElement,
+  };
+
+  const Elements = CustemComponents[message?.type] || components[message?.type];
+
+  return Elements
+  && <Elements context={context} message={message}><MessageStatus message={message} /></Elements>;
+}
+
+const MemoizedMessageContext = React.memo(MessageContextWithContext) as
+typeof MessageContextWithContext;
+
+export function MessageContext(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageContext
+      {...props}
+    />
+  );
+}

package/src/components/TUIMessage/MessageCustom.tsx

@@ -0,0 +1,40 @@
+import React, { PropsWithChildren } from 'react';
+import { JSONStringToParse } from '../untils';
+import type { MessageContextProps } from './MessageText';
+
+function MessageCustomWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  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 (data.data === 'group_create') {
+      return `${message?.nick || message?.from} Create a group`;
+    }
+    return data.extension;
+  };
+
+  return (
+    <div className={`bubble message-custom bubble-${message.flow}`}>
+      {handleContext(context?.custom)}
+      {children}
+    </div>
+  );
+}
+
+const MemoizedMessageCustom = React.memo(MessageCustomWithContext) as
+typeof MessageCustomWithContext;
+
+export function MessageCustom(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageCustom {...props} />
+  );
+}

package/src/components/TUIMessage/MessageFace.tsx

@@ -0,0 +1,28 @@
+import React, { PropsWithChildren } from 'react';
+import type { MessageContextProps } from './MessageText';
+
+function MessageFaceWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  return (
+    <div className={`bubble message-face bubble-${message.flow}`}>
+      <img className="img" src={context.url} alt="" />
+      {children}
+    </div>
+  );
+}
+
+const MemoizedMessageFace = React.memo(MessageFaceWithContext) as
+typeof MessageFaceWithContext;
+
+export function MessageFace(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageFace {...props} />
+  );
+}

package/src/components/TUIMessage/MessageFile.tsx

@@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react';
+import { Icon, IconTypes } from '../Icon';
+import type { MessageContextProps } from './MessageText';
+
+function MessageFileWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  return (
+    <div className={`bubble message-file bubble-${message.flow}`}>
+      <main className="message-file-main">
+        <Icon className="icon" width={15} height={20} type={IconTypes.FILE} />
+        <label htmlFor="message-file">{ context.name }</label>
+      </main>
+      <div className="message-file-footer">
+        <span className="message-file-size">{ context.size }</span>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const MemoizedMessageFile = React.memo(MessageFileWithContext) as
+typeof MessageFileWithContext;
+
+export function MessageFile(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageFile {...props} />
+  );
+}

package/src/components/TUIMessage/MessageImage.tsx

@@ -0,0 +1,42 @@
+import React, { PropsWithChildren, useState } from 'react';
+import { Model } from '../Model';
+import type { MessageContextProps } from './MessageText';
+
+function MessageImageWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  const [show, setShow] = useState(false);
+
+  const bigImageInfo = message?.payload?.imageInfoArray?.filter((item) => item.type === 0);
+
+  return (
+    <div className="message-image">
+      <div role="button" tabIndex={0} onClick={() => { setShow(true); }}>
+        <img className={`img bubble-${message.flow}`} src={context.url} alt="" />
+      </div>
+      {children}
+      {
+        show && (
+        <Model onClick={() => { setShow(false); }}>
+          <img className="big-image" src={bigImageInfo[0]?.url} alt="" />
+        </Model>
+        )
+      }
+    </div>
+  );
+}
+
+const MemoizedMessageImage = React.memo(MessageImageWithContext) as
+typeof MessageImageWithContext;
+
+export function MessageImage(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageImage {...props} />
+  );
+}

package/src/components/TUIMessage/MessageLocation.tsx

@@ -0,0 +1,29 @@
+import React, { PropsWithChildren } from 'react';
+import type { MessageContextProps } from './MessageText';
+
+function MessageLocationWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  return (
+    <a className="bubble message-location" href={context.href} target="_blank" title="点击查看详情" rel="noreferrer">
+      <span>{context.description}</span>
+      <img src={context.url} alt="" />
+      {children}
+    </a>
+  );
+}
+
+const MemoizedMessageLocation = React.memo(MessageLocationWithContext) as
+typeof MessageLocationWithContext;
+
+export function MessageLocation(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageLocation {...props} />
+  );
+}

package/src/components/TUIMessage/MessageMerger.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react';
+import type { MessageContextProps } from './MessageText';
+
+function MessageMergerWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  return (
+    <div className={`bubble message-merger bubble-${message.flow}`}>
+      <h3>{context.title}</h3>
+      <ul className="message-merger-list">
+        {
+          context?.abstractList.length > 0
+          && context.abstractList.map((item:string, index:number) => {
+            const key = item + index;
+            return (<li className="message-merger-item" key={key}>{item}</li>);
+          })
+        }
+      </ul>
+      {children}
+    </div>
+  );
+}
+
+const MemoizedMessageMerger = React.memo(MessageMergerWithContext) as
+typeof MessageMergerWithContext;
+
+export function MessageMerger(props:MessageContextProps):React.ReactElement {
+  return (
+    <MemoizedMessageMerger {...props} />
+  );
+}