若您在集成 IM UIKit 时，只需要聊天（会话消息）组件，不需要会话列表、通讯录、搜索等其他组件，那么可以单独集成聊天组件。

本文主要介绍如何单独集成聊天（会话消息）组件。

集成效果

集成步骤

1. 参考 组件导入 和 初始化 文档导入 UIKit 组件并初始化后，集成聊天（会话消息）组件。

   React

   TypeScriptimport React, { useMemo } from 'react'
   import { Provider,ChatContainer } from '@xkit-yx/im-kit-ui'
   import '@xkit-yx/im-kit-ui/es/style'
   import './index.less'
   
   const App = () => {
   const initOptions = useMemo(() => {
       return {
       appkey: '',
       account: '',
       token: '',
       debugLevel: 'debug',
       // ……
       }
   }, [])
   
   return (
       <Provider initOptions={initOptions} sdkVersion={1}>
           <ChatContainer />
       </div>
       </Provider>
   )
   }
   

   Vue

   JavaScript<template>
       <div>
           <div ref="chat" />
       </div>
   </template>
   <script>
   import { ChatContainer } from "@xkit-yx/im-kit-ui";
   import "@xkit-yx/im-kit-ui/es/style/css";
   import "./iconfont.css";
   
   export default {
   name: "IMApp",
   
   data: function () {
       return {
       model: "chat",
       };
   },
   mounted() {
       this.$uikit.render(
       ChatContainer,
       {
           //...
       },
       this.$refs.chat
       );
   },
   };
   </script>
   

2. 在需要展示聊天的页面，搭建 ChatContainer ，动态显示聊天界面。

   改变 store 中的 selectedSession，传入对应参数（单聊'p2p-account'、群聊：'team-teamId'），同时插入一条会话。

   React

   TypeScriptimport { Provider,ChatContainer, useStateContext } from '@xkit-yx/im-kit-ui'
   const { store } = useStateContext()
   const gotoChat1 = () => {
       const sessionId = 'p2p-account'
       if(store.sessionStore.sessions.get(sessionId)){
       store.uiStore.selectSession(sessionId)
       }else{
       store.sessionStore.insertSessionActive(
           'p2p',
           'account',
       )
       }
   }
   const gotoChat2 = () => {
       const sessionId = 'team-teamId'
       if(store.sessionStore.sessions.get(sessionId)){
       store.uiStore.selectSession(sessionId)
       }else{
       store.sessionStore.insertSessionActive(
           'team',
           'teamId',
       )
       }
   }
   return (
       <Provider initOptions={initOptions} sdkVersion={1}>
           {<button onClick={gotoChat1}>单聊</button>}
           {<button onClick={gotoChat2}>群聊</button>}
           <ChatContainer />
       </div>
       </Provider>
   )
   

   Vue

   JavaScript<template>
       <div>
       <button @click="gotoChat1">单聊</button>
       <button @click="gotoChat2">群聊</button>
           <div ref="chat" />
       </div>
   </template>
   <script>
   import { ChatContainer } from "@xkit-yx/im-kit-ui";
   import "@xkit-yx/im-kit-ui/es/style/css";
   import "./iconfont.css";
   
   export default {
   name: "IMApp",
   
   data: function () {
       return {
       model: "chat",
       };
   },
   methods: {
       gotoChat1() {
       const store = window.__xkit_store__?.store
       const sessionId = 'p2p-account'
           if(store.sessionStore.sessions.get(sessionId)){
           store.uiStore.selectSession(sessionId)
           }else{
           store.sessionStore.insertSessionActive(
               'p2p',
               'account',
           )
           }
       },
       gotoChat2() {
       const store = this.$uikit.getStateContext()?.store
       const sessionId = 'team-teamId'
           if(store.sessionStore.sessions.get(sessionId)){
           store.uiStore.selectSession(sessionId)
           }else{
           store.sessionStore.insertSessionActive(
               'team',
               'teamId',
           )
           }
       },
   },
   mounted() {
       this.$uikit.render(
       ChatContainer,
       {
           //...
       },
       this.$refs.chat
       );
   },
   };
   </script>