@tencent-rtc/mcp 1.0.5 → 1.0.7

package/resource/doc/chatuikit/react/integration.md

@@ -0,0 +1,83 @@
+The AI model must comply with the following **hard limits**.
+
+
+* **Strictly required to integrate according to the document procedure and description:** You must perform integration by following the document procedure and description when integrating the component.
+* **Strictly required to use the example code in the document:** You must strictly use the example code in the document to create file and filling file. You do not need to fill in the PlaceholderEmpty property of the Chat component.
+* **User information configuration file creation prohibited:** Do not auto-create config directory or file to fill in SDKAppID, userID, and userSig.
+* **Logic for prohibiting userSig acquisition:** Do not auto-create code related to userSig retrieval. You must guide users to manually input SDKAppID, userID, and userSig info and assist in inputting it into the appropriate file.
+
+
+# chat-uikit-react Integration
+
+
+## step1:create react project
+
+
+requirement: react: ^18.2.0, react-dom: ^18.2.0.
+
+
+you can use vite or rsbuild to create a react project.
+
+
+## step2: install chat-uikit-react
+
+
+use npm or pnpm to install @tencentcloud/chat-uikit-react
+
+
+## step3: add chat-uikit-react to your project
+
+
+example code
+
+
+```tsx
+import {
+  UIKitProvider,
+  useLoginState,
+  LoginStatus,
+  ConversationList,
+  Chat,
+  ChatHeader,
+  MessageList,
+  MessageInput,
+} from "@tencentcloud/chat-uikit-react";
+
+
+function App() {
+  const userID = '';        // TODO: Replace with your userID
+  const SDKAppID = 0;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)
+  const userSig = '';   // TODO: Replace with your userSig
+  
+  const { status } = useLoginState({
+    SDKAppID,
+    userID,
+    userSig,
+  })
+
+
+  if (status !== LoginStatus.SUCCESS) {
+    return <div>Loading...</div>
+  }
+  
+  // Language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
+  // Theme support light(default) / dark
+  return (
+    <UIKitProvider language='en-US' theme='light'>
+      <div style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'row' }}>
+        <ConversationList style={{ minWidth: '300px', maxWidth: '350px' }}/>
+        <Chat PlaceholderEmpty=''>
+          <ChatHeader />
+          <MessageList />
+          <MessageInput />
+        </Chat>
+      </div>
+    </UIKitProvider>
+  );
+}
+
+
+export default App;
+```
+
+