@tencentcloud/chat-uikit-react 2.2.4 → 2.2.6

package/src/context/UIKitContext.tsx

@@ -0,0 +1,67 @@
+import { PropsWithChildren, useContext, createContext } from 'react';
+import type {
+  ChatSDK,
+  Conversation,
+} from '@tencentcloud/chat';
+import { TUILogin } from '@tencentcloud/tui-core';
+import { ThemeProvider, useTheme } from './ThemeContext';
+import { LanguageProvider, useLanguage } from './LanguageContext';
+import { UIManagerProvider } from './UIManagerContext';
+
+interface UIKitContextType {
+  chat: ChatSDK;
+}
+
+interface UIKitProviderProps {
+  chat?: ChatSDK;
+  language?: string;
+  theme?: string;
+  colors?: Record<string, string>;
+  customClasses?: string;
+  activeConversation?: Conversation;
+}
+
+const UIKitContext = createContext<UIKitContextType | null>(null);
+
+function UIKitProvider(props: PropsWithChildren<UIKitProviderProps>) {
+  const {
+    chat = TUILogin.getContext().chat,
+    language,
+    theme,
+    colors,
+    customClasses,
+    activeConversation,
+    children,
+  } = props;
+
+  return (
+    <LanguageProvider language={language}>
+      <ThemeProvider theme={theme} colors={colors}>
+        <UIKitContext.Provider value={{ chat }}>
+          <UIManagerProvider activeConversation={activeConversation} customClasses={customClasses}>
+            {children}
+          </UIManagerProvider>
+        </UIKitContext.Provider>
+      </ThemeProvider>
+    </LanguageProvider>
+  );
+}
+
+const useUIKit = (componentName?: string) => {
+  const languageContext = useLanguage();
+  const themeContext = useTheme();
+  const uikitContext = useContext(UIKitContext);
+  if (!uikitContext) {
+    throw new Error('useUIKit must be used within a UIKitProvider');
+  }
+  return {
+    ...themeContext,
+    ...languageContext,
+    ...uikitContext,
+  };
+};
+
+export {
+  UIKitProvider,
+  useUIKit,
+};

package/src/context/UIManagerContext.tsx

@@ -0,0 +1,163 @@
+import React, {
+  useState,
+  useContext,
+  useCallback,
+  PropsWithChildren,
+  useEffect,
+} from 'react';
+import type {
+  Conversation,
+  Profile,
+  Friend,
+  FriendApplication,
+} from '@tencentcloud/chat';
+import {
+  TUIStore,
+  StoreName,
+  type IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import type { IGroupModel } from '@tencentcloud/chat-uikit-engine';
+import { useUIKit } from './UIKitContext';
+
+type blockData = {
+  type: 'block';
+  data: Profile;
+};
+
+type friendData = {
+  type: 'friend';
+  data: Friend;
+};
+
+type friendApplicationData = {
+  type: 'friendApplication';
+  data: FriendApplication;
+};
+
+type addFriendData = {
+  type: 'addFriend';
+  data: Profile;
+};
+
+type GroupData = {
+  type: 'group';
+  data: IGroupModel;
+};
+
+type UseContactParams =
+  | blockData
+  | friendData
+  | friendApplicationData
+  | addFriendData
+  | GroupData
+  | undefined;
+
+type UIManagerContextType = {
+  conversation?: Conversation;
+  contactData?: UseContactParams;
+  customClasses?: unknown;
+  myProfile?: Profile;
+  TUIManageShow?: boolean;
+  TUIProfileShow?: boolean;
+  setTUIManageShow: React.Dispatch<React.SetStateAction<boolean>>;
+  setTUIProfileShow: React.Dispatch<React.SetStateAction<boolean>>;
+  setActiveConversation: (conversation?: Conversation) => void;
+  setActiveContact: (useContactParams?: UseContactParams) => void;
+};
+
+type UIManagerProviderProps = {
+  customClasses: string;
+  activeConversation: Conversation;
+};
+
+const UIManagerContext = React.createContext<UIManagerContextType | null>(null);
+
+function UIManagerProvider(props: PropsWithChildren<Partial<UIManagerProviderProps>>) {
+  const {
+    customClasses,
+    activeConversation,
+    children,
+  } = props;
+
+  const { chat } = useUIKit();
+
+  const [conversation, setConversation] = useState<Conversation | undefined>(activeConversation);
+  const [contactData, setContactData] = useState<UseContactParams>();
+  const [myProfile, setMyProfile] = useState<Profile>();
+  const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
+  const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
+
+  useEffect(() => {
+    TUIStore.watch(StoreName.USER, {
+      userProfile: onMyProfileUpdated,
+    });
+    TUIStore.watch(StoreName.CONV, {
+      currentConversation: onCurrentConversationUpdated,
+    });
+
+    return () => {
+      TUIStore.unwatch(StoreName.USER, {
+        userProfile: onMyProfileUpdated,
+      });
+      TUIStore.unwatch(StoreName.CONV, {
+        currentConversation: onCurrentConversationUpdated,
+      });
+    };
+  }, []);
+
+  const setActiveConversation = useCallback((_activeConversation?: Conversation) => {
+    if (_activeConversation) {
+      chat?.setMessageRead({ conversationID: _activeConversation.conversationID });
+    }
+
+    if (_activeConversation?.conversationID !== conversation?.conversationID) {
+      setTUIManageShow(false);
+    }
+
+    setConversation(_activeConversation);
+  }, []);
+
+  function onMyProfileUpdated(userProfileData: unknown) {
+    setMyProfile(userProfileData as Profile);
+  }
+
+  function onCurrentConversationUpdated(conversationModel: IConversationModel) {
+    setActiveConversation(conversationModel?.getConversation());
+  }
+
+  function setActiveContact(actionContactData?: UseContactParams) {
+    setContactData(actionContactData);
+  }
+
+  const value = {
+    conversation,
+    contactData,
+    setActiveConversation,
+    myProfile,
+    TUIManageShow,
+    setTUIManageShow,
+    TUIProfileShow,
+    setTUIProfileShow,
+    setActiveContact,
+  };
+
+  return (
+    <UIManagerContext.Provider value={value}>
+      {children}
+    </UIManagerContext.Provider>
+  );
+}
+
+const useUIManager = (componentName?: string) => {
+  const context = useContext(UIManagerContext);
+  if (!context) {
+    throw new Error('useUIManager must be used within a UIManagerProvider');
+  }
+  return context;
+};
+
+export {
+  UIManagerProvider,
+  useUIManager,
+  UIManagerContextType,
+};

package/src/context/index.ts

@@ -1,7 +1,8 @@
-export * from './TUIKitContext';
+export * from './UIKitContext';
+export * from './UIManagerContext';
 export * from './TUIChatStateContext';
 export * from './TUIChatActionContext';
 export * from './TUIMessageContext';
 export * from './ComponentContext';
 export * from './TUIMessageInputContext';
-export * from './TUIContactContext';
+export * from './TUIContactContext';

package/src/locales/en-US/index.ts

@@ -1,8 +1,8 @@
+import TUIGlobal from './TUIGlobal';
 import TUIChat from './TUIChat';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
-import TUIGlobal from './TUIProfile';
 
 
 export const message = {

package/src/locales/ja-JP/index.ts

@@ -1,9 +1,11 @@
+import TUIGlobal from './TUIGlobal';
 import TUIChat from './TUIChat';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
+  TUIGlobal,
   TUIChat,
   TUIConversation,
   TUIContact,

package/src/locales/ko-KR/TUIGlobal.ts

@@ -1,6 +1,6 @@
 /* eslint-disable quote-props */
 export const TUIGlobal = {
-  'chats': 'メッセージ',
-  'contacts': '連絡先'
+  'chats': '채팅',
+  'contacts': '연락처'
 }
 export default TUIGlobal;

package/src/locales/ko-KR/index.ts

@@ -1,9 +1,11 @@
+import TUIGlobal from './TUIGlobal';
 import TUIChat from './TUIChat';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
+  TUIGlobal,
   TUIChat,
   TUIConversation,
   TUIContact,

package/src/locales/zh-CN/index.ts

@@ -1,11 +1,11 @@
+import TUIGlobal from './TUIGlobal';
 import TUIChat from './TUIChat';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
-  'chats': '消息',
-  'contacts': '通讯录',
+  TUIGlobal,
   TUIChat,
   TUIConversation,
   TUIContact,

package/src/styles/colors/_color-dark.scss

@@ -0,0 +1,35 @@
+$dark-colors: (
+  // bg
+  --chat-theme-dark-bg-5: #76777e,
+  --chat-theme-dark-bg-4: #5d5e67,
+  --chat-theme-dark-bg-3: #454650,
+  --chat-theme-dark-bg-2: #2e303a,
+  --chat-theme-dark-bg-1: #191b26,
+  --chat-theme-dark-bg-primary: #191b26,
+  --chat-theme-dark-bg-secondary: #2e303a,
+  --chat-theme-dark-bg-active: #4e4e4e,
+  // text
+  --chat-theme-dark-text-5: #000,
+  --chat-theme-dark-text-4: #666,
+  --chat-theme-dark-text-3: #7a7a7a,
+  --chat-theme-dark-text-2: #7a7a7a,
+  --chat-theme-dark-text-1: #7a7a7a,
+  --chat-theme-dark-text-primary: #fff,
+  --chat-theme-dark-text-secondary: #8b8b8b,
+  // status
+  --chat-theme-dark-status-info: #147aff,
+  --chat-theme-dark-status-success: #34c759,
+  --chat-theme-dark-status-danger: #ff3742,
+  // border
+  --chat-theme-dark-border-5: #4e4e4e,
+  // box-shadow
+  --chat-theme-dark-box-shadow-1: (rgba(203, 203, 203, 0.755) 0 3px 8px),
+);
+
+:root {
+  @each $name, $color in $dark-colors {
+    #{$name}: $color;
+  }
+
+  color-scheme: light dark;
+}

package/src/styles/colors/_color-light.scss

@@ -0,0 +1,35 @@
+$light-colors: (
+  // bg
+  --chat-theme-light-bg-5: #999,
+  --chat-theme-light-bg-4: #b3b3b3,
+  --chat-theme-light-bg-3: #e5e7eb,
+  --chat-theme-light-bg-2: #f0f0f0,
+  --chat-theme-light-bg-1: #fff,
+  --chat-theme-light-bg-primary: #fff,
+  --chat-theme-light-bg-secondary: #f0f0f0,
+  --chat-theme-light-bg-active: #e6f1ff,
+  // text
+  --chat-theme-light-text-5: #000,
+  --chat-theme-light-text-4: #666,
+  --chat-theme-light-text-3: #7a7a7a,
+  --chat-theme-light-text-2: #7a7a7a,
+  --chat-theme-light-text-1: #7a7a7a,
+  --chat-theme-light-text-primary: #000,
+  --chat-theme-light-text-secondary: #7a7a7a,
+  // status
+  --chat-theme-light-status-info: #147aff,
+  --chat-theme-light-status-success: #34c759,
+  --chat-theme-light-status-danger: #ff3742,
+  // border
+  --chat-theme-light-border-5: #e0e0e0,
+  // box-shadow
+  --chat-theme-light-box-shadow-1: (rgba(0, 0, 0, 0.24) 0 3px 8px),
+);
+
+:root {
+  @each $name, $color in $light-colors {
+    #{$name}: $color;
+  }
+
+  color-scheme: light dark;
+}

package/src/styles/colors/_color-theme.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+@use "sass:list";
+
+$prefix: "--chat-theme";
+
+$themes: (
+  "light",
+  "dark",
+);
+
+$colors: (
+  "bg-5",
+  "bg-4",
+  "bg-3",
+  "bg-2",
+  "bg-1",
+  "bg-primary",
+  "bg-secondary",
+  "bg-active",
+  "text-5",
+  "text-4",
+  "text-3",
+  "text-2",
+  "text-1",
+  "text-primary",
+  "text-secondary",
+  "status-info",
+  "status-success",
+  "status-danger",
+  "border-5",
+  "box-shadow-1",
+);
+
+$color-map: ();
+
+@mixin theme() {
+  @each $theme in $themes {
+
+    $color-map: () !global;
+
+    [data-uikit-theme="#{$theme}"] & {
+      @each $color in $colors {
+        $value: #{$prefix}-#{$theme}-#{$color};
+        $color-map: map.merge($color-map, ($color: var($value))) !global;
+      }
+
+      @content;
+    }
+  }
+}
+
+@function get($color) {
+  @return map.get($color-map, $color);
+}

package/src/styles/fonts/icon-font.scss

@@ -0,0 +1,18 @@
+@font-face {
+  font-family: iconfont;
+  src:
+    url("./assets/fonts/iconfont.woff2?t=1722856322648") format("woff2"),
+    url("./assets/fonts/iconfont.woff?t=1722856322648") format("woff"),
+    url("./assets/fonts/iconfont.ttf?t=1722856322648") format("truetype");
+}
+
+.iconfont {
+  font-family: iconfont, Arial, sans-serif !important;
+  font-size: 20px;
+  font-style: normal;
+  line-height: 1;
+  vertical-align: bottom;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/styles/index.scss

@@ -0,0 +1,4 @@
+@import "./normalize";
+@import "./fonts/icon-font";
+@import "./colors/color-light";
+@import "./colors/color-dark";