@trtc/calls-uikit-react 4.2.5 → 4.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.2.5",
+  "version": "4.4.2",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.es.js",
   "types": "./types/index.d.ts",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@tencentcloud/tui-core-lite": "1.0.0",
-    "@trtc/call-engine-lite-js": "~3.4.7",
-    "@tencentcloud/lite-chat": "^1.5.0",
+    "@trtc/call-engine-lite-js": "~3.5.0",
+    "@tencentcloud/lite-chat": "^1.6.3",
     "@trtc/call-engine-lite-wx": "~3.4.7"
 },
   "bugs": {

package/src/Components/components/common/UIKitModal/UIKitModal.tsx

@@ -0,0 +1,250 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import ReactDOM from 'react-dom/client';
+import type { ReactNode } from 'react';
+import { uikitModalState } from './UIKitModalState';
+import { IS_PC } from '../../../../TUICallService/utils/env';
+import { t } from '../../../../TUICallService';
+import styles from './index.module.scss';
+
+// Types
+export interface UIKitModalConfig {
+  id: number;
+  title: string;
+  content: string | ReactNode;
+  type: 'info' | 'warning' | 'error' | 'success';
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+export type UIKitModalOptions = UIKitModalConfig;
+
+// Constants
+let root: ReactDOM.Root | null = null;
+let container: HTMLDivElement | null = null;
+let resolvePromise: ((value: { action: string }) => void) | null = null;
+
+const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i;
+const FULL_URL_REGEX = /(https?:\/\/[^\s]+)/g;
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function processAnchorTags(content: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, 'text/html');
+  const anchors = doc.querySelectorAll('a');
+  anchors.forEach((anchor) => {
+    const href = anchor.getAttribute('href');
+    if (href) {
+      anchor.setAttribute('target', '_blank');
+      anchor.setAttribute('rel', 'noopener noreferrer');
+      anchor.classList.add(styles['uikit-modal-link']);
+      const originalText = anchor.textContent || '';
+      anchor.innerHTML = `<span style="padding: 0 0.2em; display: inline-block; color: var(--text-color-link)">${originalText}</span>`;
+    }
+  });
+  return doc.body.innerHTML;
+}
+
+const TypeIcons: Record<string, () => JSX.Element> = {
+  success: () => <span style={{ color: 'green', marginRight: '6px' }}>✓</span>,
+  info: () => <span style={{ color: '#1890ff', marginRight: '6px' }}>ℹ</span>,
+  error: () => <span style={{ color: 'red', marginRight: '6px' }}>✕</span>,
+  warning: () => <span style={{ color: '#faad14', marginRight: '6px' }}>⚠</span>,
+};
+
+const isLocalEnvironment = (): boolean => {
+  const { hostname: host, href } = window.location;
+  if (host === 'localhost' || host === '127.0.0.1' || host.startsWith('192.168.')) {
+    return true;
+  }
+  if (href.startsWith('https://web.sdk.qcloud.com/trtc/livekit')) {
+    return true;
+  }
+  return false;
+};
+
+const cleanup = () => {
+  if (root) {
+    root.unmount();
+    root = null;
+  }
+  if (container && container.parentNode) {
+    container.parentNode.removeChild(container);
+    container = null;
+  }
+  resolvePromise = null;
+};
+
+interface UIKitModalComponentProps extends UIKitModalOptions {
+  visible: boolean;
+}
+
+export function UIKitModalComponent(props: UIKitModalComponentProps) {
+  const {
+    type = 'info',
+    title = '',
+    content = '',
+    visible = false,
+    onConfirm,
+    onCancel,
+  } = props;
+
+  const cancelText = t('reject');
+  const confirmText = t('accept');
+
+  const modalContainerClass = IS_PC
+    ? `${styles['uikit-modal-default']} ${styles['uikit-modal-container']}`
+    : `${styles['uikit-modal-default']} ${styles['uikit-modal-container']} ${styles['uikit-modal-container-mobile']}`;
+
+  const processedContent = useMemo(() => {
+    if (!content || typeof content !== 'string') {
+      return content;
+    }
+
+    if (URL_REGEX.test(content.trim())) {
+      const url = content.trim();
+      const href = url.startsWith('http') ? url : `https://${url}`;
+      return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="${styles['uikit-modal-link']}">${escapeHtml(url)}</a>`;
+    }
+
+    if (content.includes('<a ') || content.includes('<a>')) {
+      return processAnchorTags(content);
+    }
+
+    if (FULL_URL_REGEX.test(content)) {
+      return escapeHtml(content).replace(FULL_URL_REGEX, url => `<a href="${url}" target="_blank" rel="noopener noreferrer" class="${styles['uikit-modal-link']}">${url}</a>`);
+    }
+
+    return escapeHtml(content);
+  }, [content]);
+
+  const TypeIcon = TypeIcons[type] || TypeIcons.info;
+
+  if (!visible) {
+    return null;
+  }
+
+  const modalContent = (
+    <div
+      className={styles['uikit-modal-mask']}
+      onClick={onConfirm}
+    >
+      <div
+        className={modalContainerClass}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className={styles['uikit-modal-header']}>
+          <TypeIcon />
+          <span className={styles['uikit-modal-title']}>{title}</span>
+        </div>
+        <div
+          className={styles['uikit-modal-body']}
+          dangerouslySetInnerHTML={typeof processedContent === 'string' ? { __html: processedContent } : undefined}
+        >
+          {typeof processedContent !== 'string' ? processedContent : null}
+        </div>
+        <div className={styles['uikit-modal-footer']}>
+          <button
+            className={`${styles['uikit-modal-btn']} ${styles['uikit-modal-btn-cancel']}`}
+            onClick={onCancel}
+          >
+            {cancelText || 'Cancel'}
+          </button>
+          <button
+            className={`${styles['uikit-modal-btn']} ${styles['uikit-modal-btn-confirm']}`}
+            onClick={onConfirm}
+          >
+            {confirmText || 'Confirm'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+}
+
+interface UIKitModalWrapperProps {
+  options: UIKitModalOptions;
+}
+
+function UIKitModalWrapper(props: UIKitModalWrapperProps) {
+  const { options } = props;
+  const [visible, setVisible] = useState(true);
+
+  const handleAction = useCallback((action: 'confirm' | 'cancel') => {
+    const { closeModal } = uikitModalState.getState();
+    setVisible(false);
+    closeModal(action);
+    if (resolvePromise) {
+      resolvePromise({ action });
+    }
+    setTimeout(cleanup, 100);
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    options.onConfirm?.();
+    handleAction('confirm');
+  }, [options, handleAction]);
+
+  const handleCancel = useCallback(() => {
+    options.onCancel?.();
+    handleAction('cancel');
+  }, [options, handleAction]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleCancel();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleCancel]);
+
+  return (
+    <UIKitModalComponent
+      {...options}
+      visible={visible}
+      onConfirm={handleConfirm}
+      onCancel={handleCancel}
+    />
+  );
+}
+
+const createUIKitModal = (options: UIKitModalOptions): Promise<{ action: string }> => new Promise((resolve) => {
+  cleanup();
+
+  const { openModal } = uikitModalState.getState();
+
+  openModal({
+    id: options.id,
+    title: options.title,
+    content: options.content,
+    type: options.type,
+    ...(options.onConfirm && { onConfirm: options.onConfirm }),
+    ...(options.onCancel && { onCancel: options.onCancel }),
+  });
+
+  if (!isLocalEnvironment()) {
+    resolve({ action: 'confirm' });
+    return;
+  }
+
+  resolvePromise = resolve;
+
+  container = document.createElement('div');
+  container.id = 'uikit-modal-root';
+  document.body.appendChild(container);
+  root = ReactDOM.createRoot(container);
+  root.render(React.createElement(UIKitModalWrapper, { options }));
+});
+
+export const UIKitModal = {
+  openModal: (config: UIKitModalOptions) => createUIKitModal(config),
+};

package/src/Components/components/common/UIKitModal/UIKitModalState.ts

@@ -0,0 +1,177 @@
+import type { ReactNode } from 'react';
+import { TUICallKitAPI } from '../../../../TUICallService/index';
+
+// Types
+export interface UIKitModalConfig {
+  id: number;
+  title: string;
+  content: string | ReactNode;
+  type: 'info' | 'warning' | 'error' | 'success';
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+export type UIKitModalOptions = UIKitModalConfig;
+
+interface AnalyticsData {
+  eventType: number;
+  modalId: number;
+  title: string;
+  type: string;
+  content: string | ReactNode;
+  timestamp: number;
+  stayDuration?: number;
+  closeReasonCode?: number;
+  sessionId?: string;
+  platformCode?: number;
+  userAgent?: string;
+}
+
+interface UIKitModalState {
+  modalData: UIKitModalConfig | null;
+  activeModalId: number | null;
+  modalOpenTime: number | null;
+}
+
+interface UIKitModalActions {
+  openModal: (config: UIKitModalConfig) => void;
+  closeModal: (action?: 'confirm' | 'cancel' | 'mask' | 'timeout') => void;
+  getState: () => UIKitModalState & UIKitModalActions;
+}
+
+function getPlatformInfo() {
+  const ua = navigator.userAgent;
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+  return {
+    userAgent: ua,
+    platformCode: isMobile ? 2 : 1,
+  };
+}
+
+function getSessionId(): string {
+  let sessionId = sessionStorage.getItem('uikit_session_id');
+  if (!sessionId) {
+    sessionId = `session_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+    sessionStorage.setItem('uikit_session_id', sessionId);
+  }
+  return sessionId;
+}
+
+function reportAnalytics(data: AnalyticsData) {
+  try {
+    // IM report
+    const tim = TUICallKitAPI.getTim();
+    if (tim && typeof tim.callExperimentalAPI === 'function') {
+      const reportData = {
+        id: data.modalId,
+        title: data.title,
+        type: data.type,
+        content: data.content,
+      };
+      tim.callExperimentalAPI('reportModalView', JSON.stringify(reportData));
+    }
+  } catch (_error) {
+    console.info('[UIKitModal]', data);
+  }
+}
+
+const createUIKitModalStore = () => {
+  let state: UIKitModalState = {
+    modalData: null,
+    activeModalId: null,
+    modalOpenTime: null,
+  };
+
+  const listeners: Set<() => void> = new Set();
+
+  const notify = () => {
+    listeners.forEach(listener => listener());
+  };
+
+  const openModal = (config: UIKitModalConfig) => {
+    const now = Date.now();
+    const { userAgent, platformCode } = getPlatformInfo();
+
+    state = {
+      modalData: config,
+      activeModalId: config.id,
+      modalOpenTime: now,
+    };
+
+    reportAnalytics({
+      eventType: 1,
+      modalId: config.id,
+      title: config.title,
+      type: config.type,
+      content: config.content,
+      timestamp: now,
+      sessionId: getSessionId(),
+      platformCode,
+      userAgent,
+    });
+
+    notify();
+  };
+
+  const closeModal = (action: 'confirm' | 'cancel' | 'mask' | 'timeout' = 'confirm') => {
+    const { activeModalId, modalOpenTime, modalData } = state;
+
+    if (activeModalId === null || !modalOpenTime || !modalData) {
+      return;
+    }
+
+    const now = Date.now();
+    const stayDuration = now - modalOpenTime;
+    const { userAgent, platformCode } = getPlatformInfo();
+
+    const closeReasonCodeMap: Record<string, number> = {
+      confirm: 1,
+      cancel: 2,
+      timeout: 3,
+      mask: 2,
+    };
+
+    reportAnalytics({
+      eventType: 2,
+      modalId: activeModalId,
+      title: modalData.title,
+      type: modalData.type,
+      content: modalData.content,
+      timestamp: now,
+      stayDuration,
+      closeReasonCode: closeReasonCodeMap[action],
+      sessionId: getSessionId(),
+      platformCode,
+      userAgent,
+    });
+
+    state = {
+      modalData: null,
+      activeModalId: null,
+      modalOpenTime: null,
+    };
+
+    notify();
+  };
+
+  const getState = (): UIKitModalState & UIKitModalActions => ({
+    ...state,
+    openModal,
+    closeModal,
+    getState,
+  });
+
+  return {
+    getState,
+    openModal,
+    closeModal,
+    subscribe: (listener: () => void) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+};
+
+export const uikitModalState = createUIKitModalStore();
+
+export default uikitModalState;

package/src/Components/components/common/UIKitModal/index.module.scss

@@ -0,0 +1,176 @@
+.uikit-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.uikit-modal-default {
+  width: 480px;
+  max-width: calc(100% - 40px);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.uikit-modal-container {
+  box-sizing: border-box;
+  background: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 24px;
+  border-radius: 20px;
+}
+
+.uikit-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+}
+
+.uikit-modal-type-icon {
+  margin-right: 6px;
+}
+
+.uikit-modal-close-icon {
+  cursor: pointer;
+  color: #333;
+}
+
+.uikit-modal-title {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  color: #333;
+  flex: 1;
+}
+
+.uikit-modal-body {
+  flex: 1;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #333;
+  word-break: break-word;
+}
+
+.uikit-modal-link {
+  color: #006eff;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  margin: 0 0.2em;
+}
+
+.uikit-modal-footer {
+  padding-top: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.uikit-modal-btn {
+  min-width: 88px;
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  outline: none;
+  white-space: nowrap;
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.uikit-modal-btn-cancel {
+  background: #f0f2f9;
+  color: #333;
+
+  &:hover {
+    background: #e5e7ed;
+  }
+}
+
+.uikit-modal-btn-confirm {
+  background: #1c66e5;
+  color: #fff;
+
+  &:hover {
+    background: #1557cc;
+  }
+}
+
+.uikit-modal-header:empty,
+.uikit-modal-body:empty,
+.uikit-modal-footer:empty {
+  padding: 0;
+}
+
+.uikit-modal-container-mobile {
+  border-radius: 12px;
+  max-width: calc(100% - 32px);
+  padding: 0;
+
+  .uikit-modal-header {
+    padding: 20px 20px 16px;
+    justify-content: flex-start;
+  }
+
+  .uikit-modal-body {
+    padding: 0 20px 20px;
+    justify-content: flex-start;
+  }
+
+  .uikit-modal-footer {
+    padding: 0;
+    border-top: 0.5px solid #e5e5e5;
+    gap: 0;
+
+    .uikit-modal-btn {
+      flex: 1;
+      border-radius: 0;
+      height: 56px;
+      min-width: auto;
+      background: #fff;
+      font-size: 17px;
+
+      &:active {
+        transform: none;
+        background: #f5f5f5;
+      }
+
+      &:hover {
+        background: #fff;
+      }
+    }
+
+    .uikit-modal-btn-cancel {
+      color: #666;
+
+      &:first-child:last-child {
+        border-radius: 0 0 12px 12px;
+      }
+    }
+
+    .uikit-modal-btn-confirm {
+      color: #1c66e5;
+      border-left: 0.5px solid #e5e5e5;
+      font-weight: 600;
+    }
+  }
+}

package/src/Components/components/common/UIKitModal/index.ts

@@ -0,0 +1,3 @@
+export { UIKitModal, UIKitModalComponent } from './UIKitModal';
+export type { UIKitModalConfig, UIKitModalOptions } from './UIKitModal';
+export { uikitModalState } from './UIKitModalState';

package/src/TUICallService/CallService/UIKitModal.ts

@@ -0,0 +1,81 @@
+import TuiStore from '../TUIStore/tuiStore';
+import { StoreName } from '../const/call';
+import { NAME } from '../const/index';
+import { t } from '../locales'
+const TUIStore = TuiStore.getInstance();
+
+const MODAL_ERROR_CODES = [
+    -1001,
+    -1002,
+    -1101,
+    60003,
+    60004,
+    60006,
+    -1201,
+    30000,
+    20007,
+    101002,
+];
+
+const MODAL_ERROR_MAP = {
+    '-1001': {
+        id: 10001,
+        key: 'error.10001'
+    },
+    '-1002': {
+        id: 10002,
+        key: 'error.10002'
+    },
+    '-1101': {
+        id: 10004,
+        key: 'error.10004'
+    },
+    '60003': {
+        id: 10005,
+        key: 'error.10005'
+    },
+    '60004': {
+        id: 10006,
+        key: 'error.10006'
+    },
+    '60006': {
+        id: 10007,
+        key: 'error.10007'
+    },
+    '-1201': {
+        id: 10008,
+        key: 'error.10008'
+    },
+    '30000': {
+        id: 10012,
+        key: 'error.10012'
+    },
+    '20007': {
+        id: 10013,
+        key: 'error.10013'
+    },
+    '101002': {
+        id: 10014,
+        key: 'error.10014'
+    }
+};
+
+export function handleModalError(error) {
+    if (!error || !error?.code) {
+        return;
+    }
+
+    if (!MODAL_ERROR_CODES.includes(error.code)) {
+        return;
+    }
+
+    const errorInfo = MODAL_ERROR_MAP[error.code.toString()];
+    if (errorInfo) {
+        let content = t(errorInfo.key);
+        TUIStore.update(StoreName.CALL, NAME.MODAL_ERROR, {
+            id: errorInfo.id,
+            content: content,
+            title: t('error')
+        });
+    }
+}