Web H5（React）

import { useState, type SubmitEvent } from 'react';
import { useLoginState, useUIKit } from '@tencentcloud/chat-uikit-react';
import './LoginView.css';

// 语言切换器中显示的语言。标签使用本来的语言，确保用户
// 不受当前 UI 语言影响，始终能识别自己的选项。
const LANGUAGES = [
  { value: 'zh-CN', label: '中文' },
  { value: 'en-US', label: 'English' },
];

interface LoginViewProps {
  language: string;
  onChangeLanguage: (language: string) => void;
}

export function LoginView({ language, onChangeLanguage }: LoginViewProps) {
  const { login } = useLoginState();
  const { t } = useUIKit();
  const [sdkAppId, setSdkAppId] = useState<number>();
  const [userId, setUserId] = useState('');
  const [userSig, setUserSig] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: SubmitEvent) => {
    e.preventDefault();
    setError('');
    if (!sdkAppId || !userId || !userSig) {
      setError(t('demo.error.required'));
      return;
    }

    setLoading(true);
    try {
      await login({ SDKAppID: Number(sdkAppId), userID: userId, userSig });
      // On success the login gate in App.tsx switches to ChatLayout automatically.
    } catch (err) {
      setError(err instanceof Error ? err.message : t('demo.error.loginFailed'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login">
      <div className="login__lang" role="group" aria-label="Language">
        {LANGUAGES.map(item => (
          <button
            key={item.value}
            type="button"
            className={item.value === language ? 'login__lang-btn login__lang-btn--active' : 'login__lang-btn'}
            onClick={() => onChangeLanguage(item.value)}
          >
            {item.label}
          </button>
        ))}
      </div>

      <form className="login__card" onSubmit={handleSubmit}>
        <h1 className="login__title">{t('demo.appTitle')}</h1>

        <label className="login__field">
          <span>{t('demo.field.sdkAppId')}</span>
          <input
            type="number"
            placeholder={t('demo.placeholder.sdkAppId')}
            value={sdkAppId || ''}
            onChange={e => setSdkAppId(Number(e.target.value))}
          />
        </label>

        <label className="login__field">
          <span>{t('demo.field.userId')}</span>
          <input
            type="text"
            placeholder={t('demo.placeholder.userId')}
            value={userId}
            onChange={e => setUserId(e.target.value)}
          />
        </label>

        <label className="login__field">
          <span>{t('demo.field.userSig')}</span>
          <input
            type="text"
            placeholder={t('demo.placeholder.userSig')}
            value={userSig}
            onChange={e => setUserSig(e.target.value)}
          />
        </label>

        {error && <p className="login__error">{error}</p>}

        <button className="login__submit" type="submit" disabled={loading}>
          {loading ? t('demo.loggingIn') : t('demo.login')}
        </button>
      </form>
    </div>
  );
}

import { useEffect, useRef, useState, type ReactNode } from 'react';
import {
  Chat,
  ChatHeaderH5,
  ChatSettingH5,
  ContactInfoH5,
  ContactListH5,
  ConversationListH5,
  MessageInputH5,
  MessageListH5,
  SearchH5,
  VariantType,
  useChatContext,
  useLoginState,
  useUIKit,
} from '@tencentcloud/chat-uikit-react';
import { IconBulletpoint, IconSearch } from '@tencentcloud/uikit-base-component-react';
import './ChatLayout.css';

type MobileView = 'conversations' | 'chat' | 'contacts' | 'contactInfo' | 'search' | 'setting';

interface ChatLayoutProps {
  onChangeLanguage: (language: string) => void;
}

/** // 全屏视图；仅当前激活的视图可见（保持挂载以保留状态）。 */
function Screen({ active, children }: { active: boolean; children: ReactNode }) {
  return (
    <section className="screen" style={{ zIndex: active ? 1 : 0, visibility: active ? 'visible' : 'hidden' }}>
      {children}
    </section>
  );
}

export function ChatLayout({ onChangeLanguage }: ChatLayoutProps) {
  const { activeConversationID, setActiveConversation } = useChatContext();
  const { loginUserInfo, logout } = useLoginState();
  const { t, language } = useUIKit();
  const [activeView, setActiveView] = useState<MobileView>('conversations');
  // 记住搜索是从哪里打开的，使其返回按钮能回到原处。
  const [previousView, setPreviousView] = useState<MobileView>('chat');

  const activeViewRef = useRef(activeView);
  const prevConversationIDRef = useRef(activeConversationID);
  useEffect(() => {
    activeViewRef.current = activeView;
  }, [activeView]);
  useEffect(() => {
    const changed = prevConversationIDRef.current !== activeConversationID;
    prevConversationIDRef.current = activeConversationID;
    if (changed && activeConversationID && activeViewRef.current === 'conversations') {
      setActiveView('chat');
    }
  }, [activeConversationID]);

  const openFromChat = (view: 'search' | 'setting') => {
    setPreviousView(activeView);
    setActiveView(view);
  };

  const handleChatBack = () => {
    setActiveConversation(undefined);
    setActiveView('conversations');
  };

  return (
    <div className="app-shell">
      <Screen active={activeView === 'conversations'}>
        <header className="topbar">
          <span className="topbar__title">
            {t('demo.chats')}{loginUserInfo?.userId ? ` · ${loginUserInfo.userId}` : ''}
          </span>
          <div className="chat-pane__actions">
            <button
              className="topbar__text-btn"
              type="button"
              onClick={() => onChangeLanguage(language === 'zh-CN' ? 'en-US' : 'zh-CN')}
            >
              {language === 'zh-CN' ? 'EN' : '中'}
            </button>
            <button className="topbar__text-btn" type="button" onClick={logout}>{t('demo.logout')}</button>
          </div>
        </header>
        <div className="screen__body">
          <ConversationListH5
            style={{ height: '100%' }}
            onSelectConversation={() => setActiveView('chat')}
          />
        </div>
        <nav className="tabbar">
          <button className="tabbar__item tabbar__item--active" type="button">{t('demo.chats')}</button>
          <button className="tabbar__item" type="button" onClick={() => setActiveView('contacts')}>{t('demo.contacts')}</button>
        </nav>
      </Screen>

      <Screen active={activeView === 'contacts'}>
        <header className="topbar">
          <span className="topbar__title">{t('demo.contacts')}</span>
        </header>
        <div className="screen__body">
          <ContactListH5 onContactItemClick={() => setActiveView('contactInfo')} />
        </div>
        <nav className="tabbar">
          <button className="tabbar__item" type="button" onClick={() => setActiveView('conversations')}>{t('demo.chats')}</button>
          <button className="tabbar__item tabbar__item--active" type="button">{t('demo.contacts')}</button>
        </nav>
      </Screen>

      <Screen active={activeView === 'contactInfo'}>
        <div className="screen__body screen__body--surface">
          <ContactInfoH5
            onClose={() => setActiveView('contacts')}
            onSendMessage={() => setActiveView('chat')}
            onEnterGroup={() => setActiveView('chat')}
          />
        </div>
      </Screen>

      <Screen active={activeView === 'chat'}>
        <Chat className="chat-pane">
          <ChatHeaderH5
            className="chat-pane__header"
            enableUserStatus
            onBack={handleChatBack}
            ChatHeaderRight={(
              <div className="chat-pane__actions">
                <button className="icon-btn" type="button" aria-label={t('demo.search')} onClick={() => openFromChat('search')}>
                  <IconSearch size="20px" />
                </button>
                <button className="icon-btn" type="button" aria-label={t('demo.setting')} onClick={() => openFromChat('setting')}>
                  <IconBulletpoint size="20px" />
                </button>
              </div>
            )}
          />
          <MessageListH5 />
          <MessageInputH5 />
        </Chat>
      </Screen>

      <Screen active={activeView === 'search'}>
        <div className="screen__body">
          <SearchH5
            variant={VariantType.EMBEDDED}
            onBack={() => setActiveView(previousView)}
            onResultItemClick={(_item, type) => {
              if (type === 'chat_message') {
                setActiveView('chat');
              }
            }}
          />
        </div>
      </Screen>

      <Screen active={activeView === 'setting'}>
        <div className="screen__body screen__body--surface">
          <ChatSettingH5 onBack={() => setActiveView('chat')} />
        </div>
      </Screen>
    </div>
  );
}