interface UIKitProviderProps {
  language?: string;
  languageResources?: LanguageResource[];
  theme?: 'light' | 'dark';
}

interface LanguageResource {
  lng: string;
  translation: Record<string, any>;
}

import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/chat-uikit-react';

function App() {
  return (
    <UIKitProvider theme="light" language="zh-CN">
      <ChatApp />
    </UIKitProvider>
  );
}

function ChatApp() {
  const { theme, language } = useUIKit();
  
  return (
    <div>
      <p>当前主题: {theme}</p>
      <p>当前语言: {language}</p>
    </div>
  );
}

export default App;

import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/uikit-base-component-react';

function App() {
  return (
    <UIKitProvider theme="light">
      <ThemeDemo />
    </UIKitProvider>
  );
}

function ThemeDemo() {
  const { theme, setTheme } = useUIKit();

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      <h2>主题切换示例</h2>
      <p>当前主题: {typeof theme === 'string' ? theme : `${theme.mode} (${theme.primaryColor})`}</p>
      <button onClick={toggleTheme}>
        切换到 {theme === 'light' ? '暗色' : '亮色'} 主题
      </button>
    </div>
  );
}

export default App;

import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/uikit-base-component-react';

// 自定义语言资源
const customLanguageResources = [
  {
    lng: 'de',
    translation: {
      'Hello': 'Hallo',
      'Welcome': 'Willkommen',
      'Settings': 'Einstellungen',
    }
  },
  {
    lng: 'fr',
    translation: {
      'Hello': 'Bonjour',
      'Welcome': 'Bienvenue',
      'Settings': 'Paramètres',
    }
  }
];

function App() {
  return (
    <UIKitProvider 
      language="zh-CN" 
      languageResources={customLanguageResources}
    >
      <LanguageDemo />
    </UIKitProvider>
  );
}

function LanguageDemo() {
  const { language, setLanguage, t } = useUIKit();

  const languages = [
    { code: 'zh-CN', name: '中文' },
    { code: 'en-US', name: 'English' },
    { code: 'de', name: 'Deutsch' },
    { code: 'fr', name: 'Français' },
  ];

  return (
    <div>
      <h2>{t('Settings')}</h2>
      <p>{t('Welcome')}</p>
      <p>当前语言: {language}</p>
      <div>
        {languages.map(lang => (
          <button 
            key={lang.code}
            onClick={() => setLanguage(lang.code)}
            style={{ 
              margin: '0 8px',
              fontWeight: language === lang.code ? 'bold' : 'normal'
            }}
          >
            {lang.name}
          </button>
        ))}
      </div>
    </div>
  );
}

export default App;

// 推荐：在应用根部使用 UIKitProvider
function App() {
  return (
    <UIKitProvider theme="light" language="zh-CN">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/chat" element={<Chat />} />
        </Routes>
      </Router>
    </UIKitProvider>
  );
}

function App() {
  const [theme, setTheme] = useState(() => {
    return localStorage.getItem('theme') || 'light';
  });

  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <UIKitProvider theme={theme}>
      <AppContent />
    </UIKitProvider>
  );
}

function App() {
  const [language, setLanguage] = useState(() => {
    const saved = localStorage.getItem('language');
    if (saved) return saved;
    
    // 自动检测浏览器语言
    const browserLang = navigator.language;
    if (browserLang.startsWith('zh')) return 'zh-CN';
    if (browserLang.startsWith('en')) return 'en-US';
    return 'auto';
  });

  return (
    <UIKitProvider language={language} languageResources={customResources}>
      <App />
    </UIKitProvider>
  );
}