@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { IChatProps as IChatContextProps } from '../../context/ChatContext';
+interface IChatProps extends IChatContextProps {
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    children?: React.ReactNode;
+    PlaceholderEmpty?: React.ReactNode;
+}
+declare const Chat: (props: IChatProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null;
+export { Chat };
+export type { IChatProps };

package/dist/components/Chat/Chat.js

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import { E as a, m as e } from "../../ChatSetting-79tDbXT3.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 { ChatProvider as l } from "../../context/ChatContext.js";
+import '../../styles/Chat.css';const n = "uikit-chat", h = {
+  chat: n
+}, k = (o) => {
+  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,
+    {
+      className: p(h.chat, m),
+      style: s,
+      children: i
+    }
+  ) }) : c;
+};
+export {
+  k as Chat
+};

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

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

package/dist/components/Chat/index.js

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

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { AvatarProps } from 'tuikit-atomicx-react';
+interface ChatHeaderProps {
+    /** Custom title, if not provided, will use conversation info */
+    title?: string | undefined;
+    /** Custom avatar image URL */
+    avatar?: string | undefined;
+    /** Whether to show user status */
+    enableUserStatus?: boolean | undefined;
+    /** Whether to enable chat setting */
+    chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
+    /** Custom avatar component */
+    Avatar?: React.ComponentType<AvatarProps> | undefined;
+    /** Additional class names */
+    className?: string | undefined;
+    /** Additional style */
+    style?: React.CSSProperties | undefined;
+    onSearchClick?: (() => void) | undefined;
+}
+declare const ChatHeader: (props: ChatHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export { ChatHeader, };
+export type { ChatHeaderProps };

package/dist/components/ChatHeader/ChatHeader.js

@@ -0,0 +1,51 @@
+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-79tDbXT3.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) => {
+  const {
+    title: r,
+    avatar: a,
+    enableUserStatus: t = !1,
+    chatHeaderActions: o,
+    Avatar: s,
+    className: i,
+    style: m
+  } = e, {
+    system: c,
+    conversation: n,
+    isGroup: p,
+    title: l,
+    avatar: f,
+    userStatus: u
+  } = U(), { isPeerTyping: S } = C();
+  return h(() => {
+    v.switchUserStatus({ displayOnlineStatus: t });
+  }, [t]), /* @__PURE__ */ d(
+    x,
+    {
+      isGroup: p,
+      title: r || l || "",
+      avatar: a || f,
+      userStatus: u,
+      conversation: n,
+      isPeerTyping: S,
+      system: c,
+      enableUserStatus: t,
+      chatHeaderActions: o,
+      Avatar: s,
+      style: m,
+      className: i,
+      onSearchClick: e.onSearchClick
+    }
+  );
+};
+export {
+  E as ChatHeader
+};

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

@@ -0,0 +1,11 @@
+interface IChatHeaderActionsProps {
+    /** Whether to enable call features */
+    chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
+    /** Additional class names */
+    className?: string | undefined;
+    /** Additional style */
+    style?: React.CSSProperties | undefined;
+}
+declare const ChatHeaderActions: (props: IChatHeaderActionsProps) => import("react/jsx-runtime").JSX.Element;
+export { ChatHeaderActions };
+export type { IChatHeaderActionsProps };

package/dist/components/ChatHeader/ChatHeaderActions/ChatHeaderActions.js

@@ -0,0 +1,79 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useMemo as u, useCallback as k } from "react";
+import { CallMediaType as m } from "@tencentcloud/call-uikit-react";
+import w from "@tencentcloud/chat-uikit-engine";
+import E, { TUIConstants as T } from "@tencentcloud/tui-core";
+import { useUIKit as U, IconHorizontalMoreTwo as b, IconSearch as D, IconCall1 as x, IconVideoDefault as y } from "@tencentcloud/uikit-base-component-react";
+import { i as z, E as N, p as A, m as M } from "../../../ChatSetting-79tDbXT3.js";
+import "@tencentcloud/chat";
+import { c as p } from "../../../external_modules/classnames-HRMVOjAa.js";
+import '../../../styles/ChatHeaderActions.css';const C = {
+  "chat-header-actions": "uikit-chat-header-actions",
+  "icon-button": "uikit-icon-button"
+}, L = (I) => {
+  const {
+    chatHeaderActions: l = ["videoCall", "audioCall", "search", "chatSetting"],
+    className: f,
+    style: d
+  } = I, { searchConfig: c } = U(), { toggleChatSetting: h, toggleChatSearch: g } = z(), { activeConversation: o } = N(), i = u(() => !!E.getService(T.TUICalling.SERVICE.NAME), []), s = (o == null ? void 0 : o.type) === w.TYPES.CONV_GROUP, a = k((r) => {
+    var t;
+    if (i) {
+      if (!((t = o == null ? void 0 : o.userProfile) != null && t.userID))
+        throw new Error("User ID is not available in Call.");
+      A({
+        callType: o.type,
+        callMediaType: r,
+        userIDList: [o.userProfile.userID]
+      });
+    }
+  }, [o, i]), S = u(() => {
+    const r = {
+      videoCall: {
+        icon: /* @__PURE__ */ e(y, { size: "28px" }),
+        onClick: () => a(m.VIDEO),
+        show: i && !s
+      },
+      audioCall: {
+        icon: /* @__PURE__ */ e(x, { size: "28px" }),
+        onClick: () => a(m.AUDIO),
+        show: i && !s
+      },
+      search: {
+        icon: /* @__PURE__ */ e(D, { size: "28px" }),
+        onClick: g,
+        show: !(c != null && c.hideSearch)
+      },
+      chatSetting: {
+        icon: /* @__PURE__ */ e(b, { size: "28px" }),
+        onClick: h,
+        show: !0
+      }
+    };
+    return l.filter((t) => {
+      var n;
+      return !!((n = r[t]) != null && n.show);
+    }).map((t) => {
+      const n = r[t];
+      return /* @__PURE__ */ e(
+        "button",
+        {
+          className: p(C["icon-button"]),
+          onClick: n.onClick,
+          children: n.icon
+        },
+        t
+      );
+    });
+  }, [l, i, a, s, h]);
+  return /* @__PURE__ */ e(
+    M,
+    {
+      className: p(C["chat-header-actions"], f),
+      style: d,
+      children: S
+    }
+  );
+};
+export {
+  L as ChatHeaderActions
+};

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { IUserStatus } from '../../../types/user';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { AvatarProps } from 'tuikit-atomicx-react';
+interface IChatHeaderUIProps {
+    /** Custom title, if not provided, will use conversation info */
+    title: string;
+    /** Whether it's a group conversation */
+    isGroup: boolean;
+    /** Custom avatar image URL */
+    avatar?: string;
+    /** Whether the peer is typing */
+    isPeerTyping?: boolean;
+    /** user status */
+    userStatus?: IUserStatus | undefined;
+    /** Whether to show user status */
+    enableUserStatus?: boolean;
+    /** Whether it's a system conversation */
+    system?: boolean | undefined;
+    /** IM conversation model */
+    conversation?: IConversationModel | undefined;
+    /** Whether to show call features */
+    chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
+    /** Custom avatar component */
+    Avatar?: React.ComponentType<AvatarProps> | undefined;
+    /** Additional class names */
+    className?: string | undefined;
+    /** Additional style */
+    style?: React.CSSProperties | undefined;
+    /** Search click callback */
+    onSearchClick?: (() => void) | undefined;
+}
+declare const ChatHeaderUI: (props: IChatHeaderUIProps) => import("react/jsx-runtime").JSX.Element;
+export default ChatHeaderUI;

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

@@ -0,0 +1,87 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useUIKit as O, IconChevronLeft as U } from "@tencentcloud/uikit-base-component-react";
+import { i as g, E as I, m as a, V as T } from "../../../ChatSetting-79tDbXT3.js";
+import "@tencentcloud/chat-uikit-engine";
+import "@tencentcloud/tui-core";
+import "react";
+import "@tencentcloud/chat";
+import { c as n } from "../../../external_modules/classnames-HRMVOjAa.js";
+import { ChatHeaderActions as x } from "../ChatHeaderActions/ChatHeaderActions.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"
+}, m = {
+  Online: "Online",
+  Offline: "Offline"
+}, L = (f) => {
+  const {
+    title: u,
+    avatar: h,
+    isPeerTyping: p = !1,
+    system: k = !1,
+    userStatus: c,
+    enableUserStatus: C = !0,
+    chatHeaderActions: N,
+    Avatar: s,
+    isGroup: o,
+    className: l,
+    style: _
+  } = f, { t: r } = O(), { setChatSettingOpen: v, setChatSearchOpen: y } = g(), { setActiveConversation: b } = I();
+  if (k)
+    return /* @__PURE__ */ t(
+      a,
+      {
+        className: n(e["chat-header"], l),
+        style: _,
+        children: "System Notice"
+      }
+    );
+  function d() {
+    b(""), v(!1), y(!1);
+  }
+  return /* @__PURE__ */ t(
+    a,
+    {
+      className: n(e["chat-header"], l),
+      style: _,
+      children: /* @__PURE__ */ i(a, { className: e["chat-header__container"], children: [
+        /* @__PURE__ */ i(a, { className: e["chat-header__left"], children: [
+          /* @__PURE__ */ t("button", { className: n(e["icon-button"], e["chat-header__back-icon"]), onClick: d, children: /* @__PURE__ */ t(
+            U,
+            {
+              onClick: d,
+              size: "28px"
+            }
+          ) }),
+          s ? /* @__PURE__ */ t(s, { src: h || "" }) : /* @__PURE__ */ t(T, { src: h || "" }),
+          /* @__PURE__ */ i(a, { className: e["chat-header__info"], children: [
+            /* @__PURE__ */ i(a, { className: e["chat-header__title"], children: [
+              u,
+              !o && p && /* @__PURE__ */ i("span", { className: e["chat-header__typing-indicator"], children: [
+                " ",
+                r("TUIChat.Typing")
+              ] })
+            ] }),
+            !o && C && ((c == null ? void 0 : c.statusType) === 1 ? /* @__PURE__ */ t(a, { className: e["chat-header__live"], children: r(`TUIChat.${m.Online}`) }) : /* @__PURE__ */ t(a, { className: e["chat-header__live"], children: r(`TUIChat.${m.Offline}`) }))
+          ] })
+        ] }),
+        /* @__PURE__ */ t(
+          x,
+          {
+            chatHeaderActions: N
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  L as default
+};

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

@@ -0,0 +1,2 @@
+import { default as ChatHeaderUI } from './ChatHeaderUI';
+export default ChatHeaderUI;

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

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

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

@@ -0,0 +1,2 @@
+export * from './ChatHeader';
+export * from './ChatHeaderActions';

package/dist/components/ChatHeader/index.js

@@ -0,0 +1,6 @@
+import { ChatHeader as o } from "./ChatHeader.js";
+import { ChatHeaderActions as a } from "./ChatHeaderActions/ChatHeaderActions.js";
+export {
+  o as ChatHeader,
+  a as ChatHeaderActions
+};

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface onChangeParams {
+    checked?: boolean;
+    value?: any;
+}
+interface SelectProps {
+    checked?: boolean;
+    className?: string | undefined;
+    onChange?: (data?: onChangeParams) => void;
+    value?: any;
+    id?: string;
+}
+export declare function Checkbox<T extends SelectProps>(props: React.PropsWithChildren<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Checkbox/index.js

@@ -0,0 +1,34 @@
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { useState as k } from "react";
+import { Icon as p } from "../Icon/Icon.js";
+import { IconTypes as l } from "../Icon/type.js";
+import '../../styles/index.css';function g(a) {
+  const {
+    checked: n = !1,
+    className: s,
+    onChange: t,
+    value: o = "",
+    id: r
+  } = a, [e, i] = k(n), d = (h) => {
+    i(h.target.checked), t && t({
+      value: o,
+      checked: h.target.checked
+    });
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: `${s} checkbox`,
+      role: "menuitem",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ c("input", { id: r, className: "checkbox-input", onChange: d, type: "checkbox", checked: e, value: o }),
+        !e && /* @__PURE__ */ c("i", { className: "checkbox-default" }),
+        e && /* @__PURE__ */ c(p, { type: l.RIGHT, width: 14, height: 14 })
+      ]
+    }
+  );
+}
+export {
+  g as Checkbox
+};

package/dist/components/DivWithEdit/DivWithEdit.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+interface DivWithEditProps {
+    name?: string | undefined;
+    value?: string | undefined;
+    confirm?: ((data?: any) => void) | undefined;
+    className?: string | undefined;
+    classEditName?: string | undefined;
+    type?: string | undefined;
+    isEdit?: boolean | undefined;
+    toggle?: ((name: string) => void) | undefined;
+    close: () => void;
+}
+export declare function DivWithEdit<T extends DivWithEditProps>(props: PropsWithChildren<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DivWithEdit/DivWithEdit.js

@@ -0,0 +1,69 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useState as x, useLayoutEffect as w } from "react";
+import { Popup as W } from "../Popup/index.js";
+import { WithSelect as g } from "./WithSelect.js";
+import { WithText as m } from "./WithText.js";
+import { IconEdit1 as j } from "@tencentcloud/uikit-base-component-react";
+const y = {
+  text: m,
+  select: g
+};
+function L(n) {
+  const {
+    value: t,
+    className: d,
+    classEditName: p,
+    confirm: i,
+    type: h,
+    isEdit: o,
+    toggle: c,
+    children: u,
+    name: s,
+    close: l
+  } = n, [r, f] = x(t), v = y[h] || m;
+  w(() => {
+    f(t);
+  }, [t]);
+  const E = (N) => {
+    i == null || i({
+      name: s,
+      value: N
+    });
+  };
+  return /* @__PURE__ */ e("div", { className: `div-with-edit ${d}`, children: /* @__PURE__ */ a(
+    W,
+    {
+      className: "div-with-edit-popup",
+      show: !0,
+      close: l,
+      children: [
+        !o && /* @__PURE__ */ a("div", { className: "show", children: [
+          /* @__PURE__ */ e("p", { children: r || "-" }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "icon icon-edit",
+              onClick: () => {
+                c && s && c(s);
+              },
+              children: /* @__PURE__ */ e(j, {})
+            }
+          )
+        ] }),
+        o && /* @__PURE__ */ e(
+          v,
+          {
+            value: r,
+            confirm: E,
+            className: p,
+            close: l,
+            children: u
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  L as DivWithEdit
+};

package/dist/components/DivWithEdit/WithSelect.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { WithEditProps } from './WithText';
+interface WithSelectProps extends WithEditProps {
+    list?: Array<any>;
+}
+export declare function WithSelect<T extends WithSelectProps>(props: PropsWithChildren<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DivWithEdit/WithSelect.js

@@ -0,0 +1,21 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { IconChevronDown as o } from "@tencentcloud/uikit-base-component-react";
+import '../../styles/WithSelect.css';function m(l) {
+  const {
+    value: s,
+    confirm: n,
+    children: i,
+    className: t,
+    close: r
+  } = l;
+  return /* @__PURE__ */ c("div", { className: `edit ${t}`, children: [
+    /* @__PURE__ */ c("div", { className: "select", children: [
+      /* @__PURE__ */ e("label", { children: s }),
+      /* @__PURE__ */ e("div", { className: "select-content", children: i })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "select-btn", onClick: n, children: /* @__PURE__ */ e(o, {}) })
+  ] });
+}
+export {
+  m as WithSelect
+};

package/dist/components/DivWithEdit/WithText.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export interface WithEditProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    confirm?: (data?: any) => void;
+    className?: string;
+    close?: () => void;
+}
+export declare function WithText<T extends WithEditProps>(props: PropsWithChildren<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DivWithEdit/WithText.js

@@ -0,0 +1,28 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useRef as m, useState as h, useLayoutEffect as p } from "react";
+import { IconCheck as d } from "@tencentcloud/uikit-base-component-react";
+function g(a) {
+  const {
+    value: r,
+    confirm: c,
+    className: l
+  } = a, e = m(), [o, s] = h(r);
+  p(() => {
+    var t;
+    (t = e == null ? void 0 : e.current) == null || t.focus({
+      preventScroll: !0
+    }), s(o);
+  }, [e, r]);
+  const i = (t) => {
+    s(t.target.value);
+  }, u = () => {
+    c && c(o);
+  };
+  return /* @__PURE__ */ f("div", { className: `edit ${l}`, children: [
+    /* @__PURE__ */ n("input", { ref: e, type: "text", value: o, onChange: i }),
+    /* @__PURE__ */ n("div", { onClick: u, children: /* @__PURE__ */ n(d, {}) })
+  ] });
+}
+export {
+  g as WithText
+};

package/dist/components/DivWithEdit/index.d.ts

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

package/dist/components/DivWithEdit/index.js

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

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+export interface EmptyStateIndicatorProps {
+    /** List Type: conversation | message */
+    listType?: 'conversation' | 'message' | 'chat';
+}
+declare function UnMemoizedEmptyStateIndicator<T extends EmptyStateIndicatorProps>(props: PropsWithChildren<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare const EmptyStateIndicator: typeof UnMemoizedEmptyStateIndicator;
+export {};

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "react";
+function o(r) {
+  const { listType: t } = r;
+  return t === "conversation" ? /* @__PURE__ */ e("p", { role: "listitem", children: "You have no conversation currently" }) : t === "message" || t === "chat" ? null : /* @__PURE__ */ e("p", { children: "No items exist" });
+}
+const m = n.memo(
+  o
+);
+export {
+  m as EmptyStateIndicator
+};

package/dist/components/EmptyStateIndicator/index.d.ts

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

package/dist/components/EmptyStateIndicator/index.js

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

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { IconTypes } from './type';
+export declare const changeTypeToIconClassName: (type: IconTypes) => string;
+export interface IconProps {
+    type?: IconTypes;
+    height?: number;
+    width?: number;
+    onClick?: ((event: React.BaseSyntheticEvent) => void) | undefined;
+    className?: string | undefined;
+}
+export declare function Icon(props: React.PropsWithChildren<IconProps>): import("react/jsx-runtime").JSX.Element;