@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.2

package/resource/{doc/chatkit → integration/chat/preset}/react/integration.md

@@ -1,12 +1,14 @@
-TUIKit 是基于腾讯云 Chat SDK 的一款 vue3 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。本文介绍如何快速集成 TUIKit 并实现核心功能。
+TUIKit 是基于腾讯云 Chat SDK 的一款 React 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。本文介绍如何快速集成 TUIKit 并实现核心功能。
 
-> **推荐使用更高效的 AI 集成助手**
+> **AI 助手使用说明：**
 >
+> - **IM 知识咨询**
 
-> 我们为您提供了全新的 AI 集成方式，只需要简单描述您的需求，即可**自动生成集成代码**，大幅提升开发效率。
+> Skill 提供** IM 知识咨询**能力，您可以用 Skill 在 IDE 中直接查询 SDK、UIKit、服务端 API、产品计费等内容，[点击这里，立即体验 AI 咨询助手](https://cloud.tencent.com/document/product/269/125822)。
 >
+> - **AI 集成**
 
-> [点击这里，立即体验 AI 集成](https://cloud.tencent.com/document/product/269/124481)
+> MCP 提供全新的 AI 集成方式，只需要简单描述您的需求，即可**自动生成集成代码**，大幅提升开发效率，[点击这里，立即体验 AI 集成助手](https://cloud.tencent.com/document/product/269/124481)。
 >
 
 ## 关键概念
@@ -31,21 +33,32 @@ chat-uikit-react 主要分为 ConversationList、Chat、MessageList、ChatHeader
 ## 前提条件
 - Node.js v18 版本及以上，建议使用当前的 LTS v22 版本
 
-- React v18 版本
+- React^18.2 || React^19.0.0 版本
 
 - TypeScript@^5.0.0
 
 ## 创建项目
 
-创建一个新的名为 **chat-example** 的 React 项目（创建项目时选择 **React 18**，并且使用 TypeScript 模板），并按照脚手架提示完成项目的初始化。
+创建一个新的名为 **chat-integration-react** 的 React 项目，并按照脚手架的步骤提示完成项目的初始化。
 
 【shell】
 ``` bash
-npm create rsbuild@latest
-# 初始化脚手架项目
-cd chat-example
-npm i
-npm run dev
+npm create vite@latest
+```
+
+可以参考以下选择：
+``` bash
+◇  Project name:
+│  chat-integration-react
+│
+◇  Select a framework:
+│  React
+│
+◇  Select a variant:
+│  TypeScript + React Compiler
+│
+◆  Install with npm and start now?
+│  ● Yes / ○ No
 ```
 
 ## 下载并导入组件
@@ -54,6 +67,12 @@ npm run dev
 
 通过 npm 方式下载 [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) 并在项目中使用。
 
+> **说明：**
+>
+
+> 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
+>
+
 【shell】
 ``` bash
 npm i @tencentcloud/chat-uikit-react
@@ -61,16 +80,18 @@ npm i @tencentcloud/chat-uikit-react
 
 ### 步骤 2. 引入组件
 
-> **注意：**
+> **说明：**
+>
+
+> 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
 >
-> - 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
-> - 为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的**小黄脸表情包版权归腾讯云所有**，可以有偿授权使用，如需获得授权您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
 
 复制以下 `App.tsx` 代码并替换原有的 `src/App.tsx` 中的内容。
 
 【src/App.tsx】
 ``` typescript
-import { useEffect, useLayoutEffect, useState, useMemo } from "react";
+
+import { useEffect, useState, useMemo } from "react";
 import {
   UIKitProvider,
   useLoginState,
@@ -87,10 +108,9 @@ import {
   VariantType,
   Avatar,
   useUIKit,
-  useConversationListState,
+  useChatContext,
 } from "@tencentcloud/chat-uikit-react";
 import { IconChat, IconUsergroup, IconBulletpoint, IconSearch } from "@tencentcloud/uikit-base-component-react";
-import './App.css';
 
 function App() {
   // 语言支持 en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
@@ -103,18 +123,12 @@ function App() {
 }
 
 function ChatApp() {
-  const [activeTab, setActiveTab] = useState<'conversations' | 'contacts'>('conversations');
-  const [isChatSettingShow, setIsChatSettingShow] = useState(false);
-  const [isSearchInChatShow, setIsSearchInChatShow] = useState(false);
-
-  const { language, theme } = useUIKit();
-
-  const isDark = theme === 'dark';
+  const { language } = useUIKit();
 
   const texts = useMemo(() =>
     language === 'zh-CN'
       ? { emptyTitle: '暂无会话', emptySub: '选择一个会话开始聊天', error: '请检查 SDKAppID, userID, userSig, 通过开发人员工具(F12)查看具体的错误信息', loading: '登录中...' }
-      : { emptyTitle: 'No conversation', emptySub: 'Select a conversation to start chatting', error: 'Please check the SDKAppID, userID, and userSig. View the specific error information through the developer tools (F12).', loading: 'Logging in...'},
+      : { emptyTitle: 'No conversation', emptySub: 'Select a conversation to start chatting', error: 'Please check the SDKAppID, userID, and userSig. View the specific error information through the developer tools (F12).', loading: 'Logging in...' },
     [language]
   );
 
@@ -124,27 +138,16 @@ function ChatApp() {
     userSig: '', // string 类型
   });
 
-  const { setActiveConversation, activeConversation } = useConversationListState();
-
-  // 初始化默认会话 可删除
-  useEffect(() => {
-    if (status === LoginStatus.SUCCESS) {
-      const userID = 'administrator';
-      const conversationID = `C2C${userID}`;
-      setActiveConversation(conversationID);
-    }
-  }, [status, setActiveConversation]);
-
-  // 切换会话时自动关闭侧边栏
-  useLayoutEffect(() => {
-    setIsChatSettingShow(false);
-    setIsSearchInChatShow(false);
-  }, [activeConversation?.conversationID]);
-
   if (status === LoginStatus.ERROR) {
     return (
-      <div className="loading-container">
-        <div className="loading-spinner"></div>
+      <div className="loading-container is-error">
+        <div className="loading-brand">
+          <div className="loading-brand-icon">
+            <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
+          </div>
+          <span className="loading-brand-name">Chat</span>
+        </div>
+        <div className="error-icon">!</div>
         <div className="loading-text">{texts.error}</div>
       </div>
     );
@@ -153,15 +156,41 @@ function ChatApp() {
   if (status !== LoginStatus.SUCCESS) {
     return (
       <div className="loading-container">
+        <div className="loading-brand">
+          <div className="loading-brand-icon">
+            <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
+          </div>
+          <span className="loading-brand-name">Chat</span>
+        </div>
         <div className="loading-spinner"></div>
         <div className="loading-text">{texts.loading}</div>
+        <div className="loading-progress-bar">
+          <div className="loading-progress-bar-inner"></div>
+        </div>
       </div>
     );
   }
 
+  return <ChatLayout texts={texts} />;
+}
+
+function ChatLayout({ texts }: { texts: { emptyTitle: string; emptySub: string } }) {
+  const [activeTab, setActiveTab] = useState<'conversations' | 'contacts'>('conversations');
+  const [isChatSettingShow, setIsChatSettingShow] = useState(false);
+  const [isSearchInChatShow, setIsSearchInChatShow] = useState(false);
+
+  const { theme } = useUIKit();
+  const isDark = theme === 'dark';
+
+  const { activeConversation } = useChatContext();
+
+  useEffect(() => {
+    setIsChatSettingShow(false);
+    setIsSearchInChatShow(false);
+  }, [activeConversation?.conversationID]);
+
   return (
     <div className={`chat-layout ${isDark ? 'dark' : ''}`}>
-      {/* 左侧导航 */}
       <SideTab activeTab={activeTab} onTabChange={setActiveTab} />
 
       {/* 中间列表 会话列表-联系人列表 */}
@@ -181,45 +210,33 @@ function ChatApp() {
             </div>
           }
         >
-          <ChatHeader
-            ChatHeaderRight={
-              <div className="header-actions">
-                <button
-                  className="icon-button"
-                  onClick={() => setIsSearchInChatShow(!isSearchInChatShow)}
-                >
-                  <IconSearch size="20px" />
-                </button>
-                <button
-                  className="icon-button"
-                  onClick={() => setIsChatSettingShow(!isChatSettingShow)}
-                >
-                  <IconBulletpoint size="20px" />
-                </button>
-              </div>
-            }
-          />
-          <MessageList />
-          <MessageInput />
-          {/* 聊天设置侧边栏 */}
-          {isChatSettingShow && (
-            <div className="chat-sidebar">
-              <div className="chat-sidebar-header">
-                <span className="chat-sidebar-title">设置</span>
-                <button
-                  className="icon-button"
-                  onClick={() => setIsChatSettingShow(false)}
-                >
-                  ✕
-                </button>
-              </div>
-              <ChatSetting />
-            </div>
-          )}
+          <div className="chat-main">
+            <ChatHeader
+              enableCall
+              ChatHeaderRight={
+                <div className="header-actions">
+                  <button
+                    className="icon-button"
+                    onClick={() => setIsSearchInChatShow(!isSearchInChatShow)}
+                  >
+                    <IconSearch size="20px" />
+                  </button>
+                  <button
+                    className="icon-button"
+                    onClick={() => setIsChatSettingShow(!isChatSettingShow)}
+                  >
+                    <IconBulletpoint size="20px" />
+                  </button>
+                </div>
+              }
+            />
+            <MessageList />
+            <MessageInput />
+          </div>
 
           {/* 会话内搜索侧边栏 */}
           {isSearchInChatShow && (
-            <div className="chat-sidebar">
+            <div className="chat-sidebar-search">
               <div className="chat-sidebar-header">
                 <span className="chat-sidebar-title">群搜索</span>
                 <button
@@ -232,6 +249,12 @@ function ChatApp() {
               <Search variant={VariantType.EMBEDDED} />
             </div>
           )}
+          {/* 聊天设置侧边栏 */}
+          {isChatSettingShow && (
+            <div className="chat-float-sidebar">
+              <ChatSetting onClose={() => setIsChatSettingShow(false)} />
+            </div>
+          )}
         </Chat>
       )}
 
@@ -294,12 +317,12 @@ function SideTab({ activeTab, onTabChange }: SideTabProps) {
 export default App;
 ```
 
-复制以下 `App.css` 代码并替换同级目录的 `src/App.css` 样式文件。
+复制以下 `index.css` 代码并替换同级目录的 `src/index.css` 样式文件。
 
-【src/App.css】
+【src/index.css】
 ``` java
 
-body{margin:0;padding:0;font-family:Inter,Avenir,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;box-sizing:border-box;}#root{height:100vh;display:flex;justify-content:center;align-items:center;}.chat-layout{height:60vh;aspect-ratio:16 / 9;margin:0 auto;display:flex;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.1);overflow:hidden;backdrop-filter:blur(10px);}@media (max-width:1920px){.chat-layout{height:80vh;}}.conversation-list-panel{width:300px;display:flex;flex-direction:column;border-right:1px solid var(--uikit-theme-light-stroke-color-primary);overflow:hidden;}.dark .conversation-list-panel{border-right:1px solid var(--uikit-theme-dark-stroke-color-primary);}.contact-list{border-radius:0;}.chat-content-panel{flex:1;border-left:1px solid var(--uikit-theme-light-stroke-color-primary);}.dark .chat-content-panel{border-left:1px solid var(--uikit-theme-dark-stroke-color-primary);}.contact-detail-panel{flex:1;}.icon-button{padding:4px 6px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:4px;font-size:20px;color:var(--uikit-theme-light-text-color-link);cursor:pointer;transition:background-color 0.2s;}.dark .icon-button{color:var(--uikit-theme-dark-text-color-link);}.icon-button:hover{background-color:var(--uikit-theme-light-button-color-secondary-hover);}.dark .icon-button:hover{background-color:var(--uikit-theme-dark-button-color-secondary-hover);}.icon-button:active{background-color:var(--uikit-theme-light-button-color-secondary-active);}.dark .icon-button:active{background-color:var(--uikit-theme-dark-button-color-secondary-active);}.header-actions{display:flex;gap:8px;margin-left:8px;color:var(--uikit-theme-light-text-color-link);}.dark .header-actions{color:var(--uikit-theme-dark-text-color-link);}.message-toolbar{display:flex;justify-content:space-between;align-items:center;}.message-toolbar-actions{display:flex;align-items:center;gap:12px;}.chat-sidebar{position:absolute;right:0;top:0;bottom:0;min-width:300px;max-width:400px;display:flex;flex-direction:column;background-color:var(--uikit-theme-light-bg-color-operate);box-shadow:-2px 0 8px rgba(0,0,0,0.04),-4px 0 16px rgba(0,0,0,0.06),-8px 0 32px rgba(0,0,0,0.08);overflow:auto;z-index:1000;}.dark .chat-sidebar{background-color:var(--uikit-theme-dark-bg-color-operate);box-shadow:-2px 0 8px rgba(0,0,0,0.2),-4px 0 16px rgba(0,0,0,0.3),-8px 0 32px rgba(0,0,0,0.4),-1px 0 0 rgba(255,255,255,0.08);}.chat-sidebar-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--uikit-theme-light-bg-color-operate);border-bottom:1px solid var(--uikit-theme-light-stroke-color-primary);z-index:10;}.dark .chat-sidebar-header{background-color:var(--uikit-theme-dark-bg-color-operate);border-bottom:1px solid var(--uikit-theme-dark-stroke-color-primary);}.chat-sidebar-title{font-size:16px;font-weight:500;color:var(--uikit-theme-light-text-color-primary);}.dark .chat-sidebar-title{color:var(--uikit-theme-dark-text-color-primary);}.empty-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:var(--uikit-theme-light-bg-color-operate);border-left:1px solid var(--uikit-theme-light-stroke-color-primary);color:#adb5bd;}.dark .empty-placeholder{background-color:var(--uikit-theme-dark-bg-color-operate);border-left:1px solid var(--uikit-theme-dark-stroke-color-primary);}.empty-icon{font-size:64px;opacity:0.3;}.empty-title{font-size:16px;font-weight:600;color:#6c757d;}.empty-subtitle{font-size:14px;color:#868e96;}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:24px;}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,0.2);border-top-color:#ffffff;border-radius:50%;animation:spin 1s cubic-bezier(0.68,-0.55,0.265,1.55) infinite;box-shadow:0 4px 12px rgba(0,0,0,0.15);}.loading-text{color:#ffffff;font-size:18px;font-weight:500;letter-spacing:0.5px;animation:pulse 2s ease-in-out infinite;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.6;}}.icon-image-effort{display:none;}.side-tab{width:72px;height:100%;background:var(--uikit-theme-light-bg-color-function);display:flex;flex-direction:column;align-items:center;padding:20px 0;transition:background 0.3s;}.side-tab.dark{background:var(--uikit-theme-dark-bg-color-function);}.avatar-wrapper{position:relative;margin-bottom:24px;cursor:pointer;}.avatar-wrapper:hover .tui-avatar{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15);}.tooltip{position:absolute;left:60px;top:50%;transform:translateY(-50%);padding:8px 12px;background:rgba(0,0,0,0.85);color:#fff;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:all 0.3s;z-index:1000;}.tooltip::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:rgba(0,0,0,0.85);}.avatar-wrapper:hover .tooltip{opacity:1;visibility:visible;}.tooltip-name{font-size:14px;font-weight:500;margin-bottom:4px;}.tooltip-id{font-size:12px;opacity:0.8;}.tabs{display:flex;flex-direction:column;gap:16px;}.tab-item{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;transition:all 0.3s;color:var(--uikit-theme-light-text-color-primary);}.dark .tab-item{color:var(--uikit-theme-dark-text-color-primary);}.tab-item:hover{background:rgba(0,0,0,0.05);}.tab-item.active{background:var(--uikit-theme-light-button-color-primary-default);color:var(--uikit-theme-light-text-color-button);}.dark .tab-item.active{background:var(--uikit-theme-dark-button-color-primary-default);color:var(--uikit-theme-dark-text-color-button);}.call-kit{position:fixed !important;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%);max-width:800px;max-height:600px;}
+body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans-serif; min-height: 100vh; box-sizing: border-box; } #root { height: 100vh; display: flex; justify-content: center; align-items: center; } .chat-layout { height: 60vh; aspect-ratio: 16 / 9; margin: 0 auto; display: flex; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; backdrop-filter: blur(10px); } @media (max-width:1920px) { .chat-layout { height: 80vh; } } .conversation-list-panel { width: 300px; display: flex; flex-direction: column; overflow: hidden; } .contact-list { border-radius: 0; } .chat-content-panel { flex-direction: row !important; flex: 1; border-left: 1px solid var(--uikit-stroke-color-primary); } .contact-detail-panel { flex: 1; } .icon-button { padding: 4px 6px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; color: var(--uikit-text-color-primary); } .icon-button:hover { background-color: var(--uikit-button-color-secondary-hover); } .icon-button:active { background-color: var(--uikit-button-color-secondary-active); } .header-actions { display: flex; gap: 8px; margin-left: 8px; color: var(--uikit-text-color-link); } .message-toolbar { display: flex; justify-content: space-between; align-items: center; } .message-toolbar-actions { display: flex; align-items: center; gap: 12px; } .chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .chat-sidebar-search { border-left: 1px solid var(--uikit-stroke-color-primary); display: flex; flex-direction: column; flex: 0 0 300px; } .chat-float-sidebar { position: absolute; right: 0; top: 0; bottom: 0; min-width: 300px; max-width: 400px; display: flex; flex-direction: column; background-color: var(--uikit-bg-color-operate); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04), -4px 0 16px rgba(0, 0, 0, 0.06), -8px 0 32px rgba(0, 0, 0, 0.08); overflow: auto; z-index: 1000; } .chat-sidebar-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px; background-color: var(--uikit-bg-color-operate); border-bottom: 1px solid var(--uikit-stroke-color-primary); z-index: 10; } .chat-sidebar-title { font-size: 16px; font-weight: 500; color: var(--uikit-text-color-primary); } .empty-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background-color: var(--uikit-bg-color-operate); border-left: 1px solid var(--uikit-stroke-color-primary); color: #adb5bd; } .empty-icon { font-size: 64px; opacity: 0.3; } .empty-title { font-size: 16px; font-weight: 600; color: #6c757d; } .empty-subtitle { font-size: 14px; color: #868e96; } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 20px; } .loading-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .loading-brand-icon { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #147aff, #6db3f2); display: flex; align-items: center; justify-content: center; } .loading-brand-icon svg { width: 20px; height: 20px; fill: #fff; } .loading-brand-name { font-size: 18px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.2px; } .loading-spinner { width: 36px; height: 36px; border: 3px solid #e8ecf1; border-top-color: #147aff; border-radius: 50%; animation: spin 0.8s linear infinite; } .loading-text { color: #5f6368; font-size: 14px; font-weight: 400; line-height: 1.5; text-align: center; max-width: 360px; } .loading-progress-bar { width: 200px; height: 3px; background-color: #e8ecf1; border-radius: 3px; overflow: hidden; margin-top: 4px; } .loading-progress-bar-inner { width: 40%; height: 100%; background: linear-gradient(90deg, #147aff, #6db3f2); border-radius: 3px; animation: progress-slide 1.6s ease-in-out infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes progress-slide { 0% { transform: translateX(-100%); } 50% { transform: translateX(250%); } 100% { transform: translateX(600%); } } .loading-container.is-error .loading-spinner { display: none; } .error-icon { width: 48px; height: 48px; border-radius: 50%; background-color: #fff2f0; border: 1px solid #ffccc7; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #ff4d4f; flex-shrink: 0; } .loading-container.is-error .loading-text { color: #5f6368; font-size: 13px; line-height: 1.6; } .icon-image-effort { display: none; } .side-tab { width: 72px; height: 100%; background: var(--uikit-bg-color-function); display: flex; flex-direction: column; align-items: center; padding: 20px 0; transition: background 0.3s; } .avatar-wrapper { position: relative; margin-bottom: 24px; cursor: pointer; } .avatar-wrapper:hover .tui-avatar { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .tooltip { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); padding: 8px 12px; background: rgba(0, 0, 0, 0.85); color: #fff; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s; z-index: 1000; } .tooltip::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: rgba(0, 0, 0, 0.85); } .avatar-wrapper:hover .tooltip { opacity: 1; visibility: visible; } .tooltip-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; } .tooltip-id { font-size: 12px; opacity: 0.8; } .tabs { display: flex; flex-direction: column; gap: 16px; } .tab-item { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; transition: all 0.3s; color: var(--uikit-text-color-primary); } .tab-item:hover { background: rgba(0, 0, 0, 0.05); } .tab-item.active { background: var(--uikit-button-color-primary-default); color: var(--uikit-text-color-button); } .call-kit { position: fixed !important; top: 50%; left: 50%; z-index: 999; transform: translate(-50%, -50%); max-width: 800px; max-height: 600px; }
 ```
 
 ### 步骤 3. 获取 SDKAppID、userID 和 userSig
@@ -314,9 +337,9 @@ const { status } = useLoginState({
 ```
 | 参数 | 类型 | 说明 |
 | --- | --- | --- |
-| SDKAppID | Number | SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 创建新应用，获取 SDKAppID 。<br>**说明：**<br>SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。 |
+| SDKAppID | Number | SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 创建新应用，获取 SDKAppID 。<br><strong>说明：</strong><br>SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。 |
 | userID | String | 用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。 |
-| userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。<br>**说明：**<br>- 开发环境：快速跑通 Demo，可以通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig。<br>- 生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。 |
+| userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。<br><strong>说明：</strong><br>- 开发环境：快速跑通 Demo，可以通过 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 获取 UserSig。<br>- 生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 <a href="https://cloud.tencent.com/document/product/269/32688">服务端生成 UserSig</a>。 |
 
 > **注意：**
 >
@@ -406,26 +429,31 @@ npm run dev
 1. 注释 `ChatHeader` 中 `ChatHeaderRight` 属性，和会话内搜索侧边栏相关的代码
 
    ``` typescript
-
-   <ChatHeader enableCall={true}
+   <ChatHeader
+     enableCall={true}
      ChatHeaderRight={
        <div className="header-actions">
-         <button
+         {/* <button
            className="icon-button"
            onClick={() => setIsSearchInChatShow(!isSearchInChatShow)}
          >
            <IconSearch size="20px" />
-         </button>
-         {/* <button
+         </button>  */}
+         <button
            className="icon-button"
            onClick={() => setIsChatSettingShow(!isChatSettingShow)}
          >
            <IconBulletpoint size="20px" />
-         </button> */}
+         </button>
        </div>
      }
    />
    ```
+2. 在 `ConversationList` 组件上关闭云端搜索
+
+   ``` java
+   <ConversationList enableSearch={false} enableCreate={false} />
+   ```
 
 ## 常见问题
 
@@ -439,9 +467,9 @@ UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信
 > 本文示例代码采用在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见[服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 >
 
-### 是否支持 react 17/19 版本？
+### 是否支持 react 17 版本？
 
-目前不支持 17.x/19.x 版本，仅支持 React v18。
+目前不支持 React v17.x，仅支持 React v18.2+ 以上的版本。
 
 ### 我能不能使用第三方组件库，例如 Ant-Design？
 
@@ -457,13 +485,17 @@ function onChatSettingClose() {
 
 <Drawer
   title="设置"
-  onClose={onClose}
   open={isChatSettingShow}
+  onClose={onChatSettingClose}
 >
   <ChatSetting />
 </Drawer>
 ```
 
+### 表情包的使用
+
+为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的**小黄脸表情包版权归腾讯云所有**，可以有偿授权使用，如需获得授权您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
+
 ## 参考信息
 
 ### 相关文档