@tencentcloud/chat-uikit-react 3.0.3 → 3.4.2

package/.eslintrc.cjs

@@ -6,11 +6,12 @@ module.exports = {
   ],
   parserOptions: {
     project: [
-      `${__dirname}/tsconfig.json`,
-      `${__dirname}/tsconfig.app.json`,
-      `${__dirname}/tsconfig.node.json`,
-      `${__dirname}/.storybook/tsconfig.eslint.json`,
+      './tsconfig.json',
+      './tsconfig.app.json',
+      './tsconfig.node.json',
+      './storybook/tsconfig.eslint.json',
     ],
+    tsconfigRootDir: __dirname,
   },
   rules: {
     "@typescript-eslint/naming-convention": [

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [3.4.2] (2025-10-14)
+
+#### feat
+* feat: Support the fusion use of CallKit
+* feat: Support group audio and video calls, as well as audio and video call message display
+
+#### fix
+* fix: Fix the problem that the enableCreate and enableSearch properties of the ConversionList component do not take effect
+
 ## [3.0.2] (2025-07-30)
 
 #### chore

package/dist/components/Chat/Chat.d.ts

@@ -6,6 +6,6 @@ interface IChatProps extends IChatContextProps {
     children?: React.ReactNode;
     PlaceholderEmpty?: React.ReactNode;
 }
-declare const Chat: (props: IChatProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null;
+declare const Chat: (props: IChatProps) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null;
 export { Chat };
 export type { IChatProps };

package/dist/components/Chat/Chat.js

@@ -1,30 +1,25 @@
-import { jsx as r } from "react/jsx-runtime";
-import { E as a, m as e } from "../../ChatSetting-LYkP2NWu.js";
-import "@tencentcloud/uikit-base-component-react";
-import "@tencentcloud/chat-uikit-engine";
-import "@tencentcloud/tui-core";
-import "react";
-import "@tencentcloud/chat";
-import { c as p } from "../../external_modules/classnames-HRMVOjAa.js";
+import { jsx as s } from "react/jsx-runtime";
+import { a as i, V as n } from "../../index-UBuvRM8r-DTXQB6zV.js";
+import { c as m } from "../../external_modules/classnames-HRMVOjAa.js";
 import { ChatProvider as l } from "../../context/ChatContext.js";
-import '../../styles/Chat.css';const n = "uikit-chat", h = {
-  chat: n
-}, k = (o) => {
+import '../../styles/Chat.css';const h = "uikit-chat", p = {
+  chat: h
+}, y = (r) => {
   const {
-    PlaceholderEmpty: c = null,
-    className: m,
-    style: s,
-    children: i
-  } = o, { activeConversation: t } = a();
-  return t != null && t.conversationID ? /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
-    e,
+    PlaceholderEmpty: o = null,
+    className: a,
+    style: c,
+    children: e
+  } = r, { activeConversation: t } = i();
+  return t != null && t.conversationID ? /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(
+    n,
     {
-      className: p(h.chat, m),
-      style: s,
-      children: i
+      className: m(p.chat, a),
+      style: c,
+      children: e
     }
-  ) }) : c;
+  ) }) : o;
 };
 export {
-  k as Chat
+  y as Chat
 };

package/dist/components/ChatHeader/AudioCallPicker/AudioCallPicker.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+interface AudioCallPickerProps {
+    /**
+     * Label text for the button
+     */
+    label?: string;
+    /**
+     * Icon size in pixels
+     */
+    iconSize?: number;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom className for the button
+     */
+    className?: string;
+    /**
+     * Custom style for the button
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom icon slot
+     */
+    children?: React.ReactNode;
+}
+declare const AudioCallPicker: (props: AudioCallPickerProps) => import("react/jsx-runtime").JSX.Element;
+export { AudioCallPicker };
+export type { AudioCallPickerProps };

package/dist/components/ChatHeader/AudioCallPicker/AudioCallPicker.js

@@ -0,0 +1,135 @@
+import { jsx as a, Fragment as V, jsxs as B } from "react/jsx-runtime";
+import { useState as j, useRef as z, useMemo as n, useCallback as r } from "react";
+import { useUIKit as K, IconCallFilled as X, Dialog as Y } from "@tencentcloud/uikit-base-component-react";
+import { c as Z } from "../../../external_modules/classnames-HRMVOjAa.js";
+import { b as $, a as q, y as H, C as y, s as h, V as J, O as Q } from "../../../index-UBuvRM8r-DTXQB6zV.js";
+import '../../../styles/AudioCallPicker.css';const u = {
+  "audio-call-picker__button": "uikit-audio-call-picker__button",
+  "audio-call-picker__button--disabled": "uikit-audio-call-picker__button--disabled",
+  "audio-call-picker__icon": "uikit-audio-call-picker__icon",
+  "group-call-dialog": "uikit-group-call-dialog"
+}, G = 1, W = 80, v = 8, ee = 1, se = (D) => {
+  const {
+    label: S = "",
+    iconSize: A = 20,
+    disabled: s = !1,
+    className: L,
+    style: P,
+    children: E
+  } = D, { t: p } = K(), { loginUserInfo: i } = $(), { activeConversation: e } = q(), { allMembers: t, getGroupMemberList: _, memberCount: g } = H(), [R, b] = j(!1), d = z(null), k = n(() => i == null ? void 0 : i.userId, [i]), U = n(() => (e == null ? void 0 : e.type) === y.C2C, [e]), x = n(() => (t == null ? void 0 : t.map((o) => ({
+    key: o.userID,
+    label: o.nick || o.userID,
+    avatarUrl: o.avatar
+  }))) ?? [], [t]), N = n(() => !(!e || s), [e, s]), w = r(() => {
+    var l;
+    const o = (l = e == null ? void 0 : e.userProfile) == null ? void 0 : l.userID;
+    if (!o) {
+      console.warn("No peer user ID found for C2C call");
+      return;
+    }
+    try {
+      h({
+        userIDList: [o],
+        type: G
+      });
+    } catch (f) {
+      console.error("Failed to start private audio call:", f);
+    }
+  }, []), C = r(() => {
+    if ((e == null ? void 0 : e.type) !== y.GROUP)
+      return;
+    const o = (t == null ? void 0 : t.length) || 0;
+    o < (g || 0) && _({
+      count: W,
+      offset: o
+    });
+  }, [e, t, g, _]), O = r(() => {
+    C(), b(!0);
+  }, [C]), c = r(() => {
+    b(!1);
+  }, []), I = r(() => {
+    var M;
+    const o = (M = e == null ? void 0 : e.groupProfile) == null ? void 0 : M.groupID;
+    if (!d.current || !o) {
+      console.warn("Missing group information for group call");
+      return;
+    }
+    const l = d.current.getSelectedItems();
+    if (!Array.isArray(l) || l.length === 0) {
+      console.warn("No members selected for group call");
+      return;
+    }
+    const f = l.map((m) => m.key);
+    try {
+      h({
+        userIDList: f,
+        chatGroupID: o,
+        type: G
+      }), c();
+    } catch (m) {
+      console.error("Failed to start group audio call:", m);
+    }
+  }, [c]), F = r(() => {
+    if (!N) {
+      console.warn("Cannot start audio call");
+      return;
+    }
+    U ? w() : O();
+  }, []), T = r(() => {
+    I();
+  }, [I]);
+  return /* @__PURE__ */ a(V, { children: /* @__PURE__ */ B(J, { children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: Z(
+          u["audio-call-picker__button"],
+          {
+            [u["audio-call-picker__button--disabled"]]: s
+          },
+          L
+        ),
+        style: P,
+        onClick: F,
+        disabled: s,
+        "aria-label": S || "Audio Call",
+        children: E || /* @__PURE__ */ a(
+          X,
+          {
+            className: u["audio-call-picker__icon"],
+            size: `${A}px`
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ a(
+      Y,
+      {
+        visible: R,
+        title: p("MessageInput.select_call_members"),
+        cancelText: p("MessageInput.cancel"),
+        onCancel: c,
+        onClose: c,
+        confirmText: p("MessageInput.initiate_call"),
+        onConfirm: T,
+        className: u["group-call-dialog"],
+        children: /* @__PURE__ */ a(
+          Q,
+          {
+            ref: d,
+            displayMode: "list",
+            dataSource: x,
+            lockedItems: k ? [{ key: k }] : [],
+            maxCount: v,
+            minCount: ee,
+            onReachEnd: C
+          }
+        )
+      }
+    )
+  ] }) });
+};
+export {
+  se as AudioCallPicker
+};

package/dist/components/ChatHeader/AudioCallPicker/index.d.ts

@@ -0,0 +1 @@
+export { AudioCallPicker } from './AudioCallPicker';

package/dist/components/ChatHeader/AudioCallPicker/index.js

@@ -0,0 +1,4 @@
+import { AudioCallPicker as e } from "./AudioCallPicker.js";
+export {
+  e as AudioCallPicker
+};

package/dist/components/ChatHeader/ChatHeader.d.ts

@@ -7,10 +7,16 @@ interface ChatHeaderProps {
     avatar?: string | undefined;
     /** Whether to show user status */
     enableUserStatus?: boolean | undefined;
+    /** Whether to show call features */
+    enableCall?: boolean | undefined;
     /** Whether to enable chat setting */
     chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
     /** Custom avatar component */
     Avatar?: React.ComponentType<AvatarProps> | undefined;
+    /** Custom left slot */
+    ChatHeaderLeft?: React.ReactNode | undefined;
+    /** Custom right slot */
+    ChatHeaderRight?: React.ReactNode | undefined;
     /** Additional class names */
     className?: string | undefined;
     /** Additional style */

package/dist/components/ChatHeader/ChatHeader.js

@@ -1,51 +1,53 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useEffect as h } from "react";
-import { TUIUserService as v } from "@tencentcloud/chat-uikit-engine";
-import { j as C } from "../../ChatSetting-LYkP2NWu.js";
-import "@tencentcloud/uikit-base-component-react";
-import "@tencentcloud/tui-core";
-import "@tencentcloud/chat";
-import "../../states/UIManagerState.js";
-import { useChatHeaderState as U } from "../../states/ChatHeaderState.js";
-import x from "./ChatHeaderUI/ChatHeaderUI.js";
-const E = (e) => {
+import { jsx as v } from "react/jsx-runtime";
+import { useEffect as H } from "react";
+import { TUIUserService as U } from "@tencentcloud/chat-uikit-engine-lite";
+import { u as x } from "../../index-UBuvRM8r-DTXQB6zV.js";
+import { useChatHeader as y } from "../../hooks/useChatHeader.js";
+import g from "./ChatHeaderUI/ChatHeaderUI.js";
+const w = (t) => {
   const {
-    title: r,
-    avatar: a,
-    enableUserStatus: t = !1,
-    chatHeaderActions: o,
-    Avatar: s,
-    className: i,
-    style: m
-  } = e, {
-    system: c,
-    conversation: n,
+    title: a,
+    avatar: r,
+    enableUserStatus: e = !1,
+    enableCall: s = !1,
+    chatHeaderActions: i,
+    Avatar: o,
+    className: c,
+    style: l,
+    ChatHeaderLeft: n,
+    ChatHeaderRight: m
+  } = t, {
+    system: u,
+    conversation: f,
     isGroup: p,
-    title: l,
-    avatar: f,
-    userStatus: u
-  } = U(), { isPeerTyping: S } = C();
-  return h(() => {
-    v.switchUserStatus({ displayOnlineStatus: t });
-  }, [t]), /* @__PURE__ */ d(
-    x,
+    title: h,
+    avatar: d,
+    userStatus: C
+  } = y(), { isPeerTyping: S } = x();
+  return H(() => {
+    U.switchUserStatus({ displayOnlineStatus: e });
+  }, [e]), /* @__PURE__ */ v(
+    g,
     {
       isGroup: p,
-      title: r || l || "",
-      avatar: a || f,
-      userStatus: u,
-      conversation: n,
+      title: a || h || "",
+      avatar: r || d,
+      userStatus: C,
+      conversation: f,
       isPeerTyping: S,
-      system: c,
-      enableUserStatus: t,
-      chatHeaderActions: o,
-      Avatar: s,
-      style: m,
-      className: i,
-      onSearchClick: e.onSearchClick
+      system: u,
+      enableUserStatus: e,
+      enableCall: s,
+      chatHeaderActions: i,
+      Avatar: o,
+      style: l,
+      className: c,
+      onSearchClick: t.onSearchClick,
+      ChatHeaderLeft: n,
+      ChatHeaderRight: m
     }
   );
 };
 export {
-  E as ChatHeader
+  w as ChatHeader
 };

package/dist/components/ChatHeader/ChatHeaderUI/ChatHeaderUI.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-import { IUserStatus } from '../../../types/user';
-import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { AvatarProps } from 'tuikit-atomicx-react';
+import { UserStatus } from '../../../types/user';
+import { ConversationModel } from 'tuikit-atomicx-react';
 interface ChatHeaderUIProps {
     /** Custom title, if not provided, will use conversation info */
     title: string;
@@ -12,17 +11,23 @@ interface ChatHeaderUIProps {
     /** Whether the peer is typing */
     isPeerTyping?: boolean;
     /** user status */
-    userStatus?: IUserStatus | undefined;
+    userStatus?: UserStatus | undefined;
     /** Whether to show user status */
-    enableUserStatus?: boolean;
+    enableUserStatus?: boolean | undefined;
+    /** Whether to show call features */
+    enableCall?: boolean | undefined;
     /** Whether it's a system conversation */
     system?: boolean | undefined;
     /** IM conversation model */
-    conversation?: IConversationModel | undefined;
+    conversation?: ConversationModel | undefined;
     /** Whether to show call features */
     chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
     /** Custom avatar component */
-    Avatar?: React.ComponentType<AvatarProps> | undefined;
+    Avatar?: React.ComponentType<any> | undefined;
+    /** Custom left slot */
+    ChatHeaderLeft?: React.ReactNode | undefined;
+    /** Custom right slot */
+    ChatHeaderRight?: React.ReactNode | undefined;
     /** Additional class names */
     className?: string | undefined;
     /** Additional style */

package/dist/components/ChatHeader/ChatHeaderUI/ChatHeaderUI.js

@@ -1,87 +1,69 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { useUIKit as b, IconChevronLeft as T } from "@tencentcloud/uikit-base-component-react";
-import { c as s } from "../../../external_modules/classnames-HRMVOjAa.js";
-import { i as U, E as g, m as a, V as I } from "../../../ChatSetting-LYkP2NWu.js";
-import "@tencentcloud/chat-uikit-engine";
-import "@tencentcloud/tui-core";
-import "react";
-import "@tencentcloud/chat";
-import { ChatHeaderActions as x } from "../ChatHeaderActions/ChatHeaderActions.js";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { useUIKit as C } from "@tencentcloud/uikit-base-component-react";
+import { c as m } from "../../../external_modules/classnames-HRMVOjAa.js";
+import { V as a, A as v } from "../../../index-UBuvRM8r-DTXQB6zV.js";
+import { AudioCallPicker as g } from "../AudioCallPicker/AudioCallPicker.js";
+import { VideoCallPicker as T } from "../VideoCallPicker/VideoCallPicker.js";
 import '../../../styles/ChatHeaderUI.css';const e = {
   "chat-header": "uikit-chat-header",
   "chat-header__container": "uikit-chat-header__container",
   "chat-header__left": "uikit-chat-header__left",
-  "chat-header__back-icon": "uikit-chat-header__back-icon",
   "chat-header__info": "uikit-chat-header__info",
   "chat-header__title": "uikit-chat-header__title",
   "chat-header__typing-indicator": "uikit-chat-header__typing-indicator",
-  "chat-header__live": "uikit-chat-header__live",
-  "icon-button": "uikit-icon-button"
-}, p = {
-  Online: "Online",
-  Offline: "Offline"
-}, K = (u) => {
+  "chat-header__live": "uikit-chat-header__live"
+}, H = (f) => {
   const {
-    title: n,
-    avatar: o,
-    isPeerTyping: k = !1,
-    system: C = !1,
+    title: h,
+    avatar: s,
+    isPeerTyping: p = !1,
+    system: u = !1,
     userStatus: i,
-    enableUserStatus: l = !0,
-    chatHeaderActions: N,
-    Avatar: _,
-    isGroup: r,
-    className: d,
-    style: m
-  } = u, { t: h } = b(), { setChatSettingOpen: v, setChatSearchOpen: y } = U(), { setActiveConversation: O } = g();
-  if (C)
-    return /* @__PURE__ */ t(
-      a,
-      {
-        className: s(e["chat-header"], d),
-        style: m,
-        children: "System Notice"
-      }
-    );
-  function f() {
-    O(""), v(!1), y(!1);
-  }
-  return /* @__PURE__ */ t(
+    enableUserStatus: n = !0,
+    enableCall: N = !1,
+    Avatar: d,
+    isGroup: c,
+    className: _,
+    style: o,
+    ChatHeaderLeft: y = null,
+    ChatHeaderRight: k = null
+  } = f, { t: l } = C();
+  return u ? /* @__PURE__ */ t(
     a,
     {
-      className: s(e["chat-header"], d),
-      style: m,
-      children: /* @__PURE__ */ c(a, { className: e["chat-header__container"], children: [
-        /* @__PURE__ */ c(a, { className: e["chat-header__left"], children: [
-          /* @__PURE__ */ t("button", { className: s(e["icon-button"], e["chat-header__back-icon"]), onClick: f, children: /* @__PURE__ */ t(
-            T,
-            {
-              onClick: f,
-              size: "28px"
-            }
-          ) }),
-          _ ? /* @__PURE__ */ t(_, { src: o || "", alt: n }) : /* @__PURE__ */ t(I, { src: o || "", alt: n, isShowOnlineStatus: !r && l, isOnline: (i == null ? void 0 : i.statusType) === 1 }),
-          /* @__PURE__ */ c(a, { className: e["chat-header__info"], children: [
-            /* @__PURE__ */ c(a, { className: e["chat-header__title"], children: [
-              n,
-              !r && k && /* @__PURE__ */ c("span", { className: e["chat-header__typing-indicator"], children: [
+      className: m(e["chat-header"], _),
+      style: o,
+      children: "System Notice"
+    }
+  ) : /* @__PURE__ */ t(
+    a,
+    {
+      className: m(e["chat-header"], _),
+      style: o,
+      children: /* @__PURE__ */ r(a, { className: e["chat-header__container"], children: [
+        /* @__PURE__ */ r(a, { className: e["chat-header__left"], children: [
+          y,
+          d ? /* @__PURE__ */ t(d, { src: s || "", alt: h }) : /* @__PURE__ */ t(v, { src: s || "", alt: h, isShowOnlineStatus: !c && n, isOnline: (i == null ? void 0 : i.statusType) === 1 }),
+          /* @__PURE__ */ r(a, { className: e["chat-header__info"], children: [
+            /* @__PURE__ */ r(a, { className: e["chat-header__title"], children: [
+              h,
+              !c && p && /* @__PURE__ */ r("span", { className: e["chat-header__typing-indicator"], children: [
                 " ",
-                h("TUIChat.Typing")
+                l("TUIChat.Typing")
               ] })
             ] }),
-            !r && l && ((i == null ? void 0 : i.statusType) === 1 ? /* @__PURE__ */ t(a, { className: e["chat-header__live"], children: h(`TUIChat.${p.Online}`) }) : /* @__PURE__ */ t(a, { className: e["chat-header__live"], children: h(`TUIChat.${p.Offline}`) }))
+            !c && n && ((i == null ? void 0 : i.statusType) === 1 ? /* @__PURE__ */ t(a, { className: e["chat-header__live"], children: l("TUIChat.Online") }) : /* @__PURE__ */ t(a, { className: e["chat-header__live"], children: l("TUIChat.Offline") }))
           ] })
         ] }),
-        /* @__PURE__ */ t(
-          x,
-          {
-            chatHeaderActions: N
-          }
-        )
+        N && /* @__PURE__ */ r(a, { className: e["chat-header__call"], flexDir: "row", gap: 8, children: [
+          /* @__PURE__ */ t(g, {}),
+          /* @__PURE__ */ t(T, {})
+        ] }),
+        k
       ] })
     }
   );
 };
 export {
-  K as default
+  H as default
 };

package/dist/components/ChatHeader/VideoCallPicker/VideoCallPicker.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+interface VideoCallPickerProps {
+    /**
+     * Label text for the button
+     */
+    label?: string;
+    /**
+     * Icon size in pixels
+     */
+    iconSize?: number;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom className for the button
+     */
+    className?: string;
+    /**
+     * Custom style for the button
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom icon slot
+     */
+    children?: React.ReactNode;
+}
+declare const VideoCallPicker: (props: VideoCallPickerProps) => import("react/jsx-runtime").JSX.Element;
+export { VideoCallPicker };
+export type { VideoCallPickerProps };