@lmecosystem/chat-webkit v0.0.1

chat-webkit 接入文档

提供会话相关的前端组件能力，组件列表：

• ChatBox: SSE实时对话流
• ChatManagement: 会话管理

1. 使用说明

在React工程中引入组件

npm i -S chat-webkit

环境要求

React >= 18.0.0

2. ChatBox

SSE实时对话流组件，提供对话交互UI、对话状态扭转和样式高度自定义

2.1 参数说明

2.1.1 组件入参说明

2.1.2 SseMesage说明

2.1.3 SSE返回的数据格式说明

2.1.4 AllStatus说明

2.1.5 Data说明

2.2 使用demo

import React,{  useRef } from 'react';

import styles from './App.module.less';

import ChatWebkit from 'chat-webkit';

const TooLongErrorComponent = ()=>{
  const a = ()=>{
    alert("ddd")

  }

  return (
    <div onClick={a}>
      tooo lll
    </div>
  )
}

const App: React.FC = () => {
  const ref = useRef<any>();
  const ref1 = useRef<any>();
  const ref2 = useRef<any>();
  const ref3 = useRef<any>();

  const sessionList = [
    {
      id: 140385,
      status: 0,
      message: '你好！我是聊天机器人，很高兴能够帮助你。你有什么需要帮助的事情吗？',
      question: 'ni hao ',
    },
    {
      id: 140386,
      status: 0,
      message: '你好！我是聊天机器人，很高兴能够帮助你。你有什么需要帮助的事情吗？',
      question: 'ni hao ',
    },
  ];

  const startSse = () => {
    ref.current.startSse('test');
    ref1.current.startSse('test');
    ref2.current.startSse('test');
    ref3.current.startSse('test');
  };

  const stopSse = () => {
    ref.current.stopSse();
    ref1.current.stopSse();
    ref2.current.stopSse();
    ref3.current.stopSse();
  }

  const reGenerate = () => {
    ref.current.reGenerate();
    ref1.current.reGenerate();
    ref2.current.reGenerate();
    ref3.current.reGenerate();
  };

  const getSseStatus = () => {
    console.log(ref.current.getStatus());
    console.log(ref1.current.getStatus());
    console.log(ref2.current.getStatus());
    console.log(ref3.current.getStatus());
  };

  return (
    <>
      <div className={styles.chatContainer}>
        <ChatWebkit.ChatBox
          tooLongErrorComponent={TooLongErrorComponent()}
          eventName=''
          propsSessionList={sessionList}
          url={'/chat/generate?turn_id=125612&username=gtl'}
          ref={ref}
          requestMessageContainerStyle={{backgroundColor:'red'}}
          responseMessageContainerStyle={{backgroundColor:'blue'}}
        />
        <ChatWebkit.ChatBox
          propsSessionList={sessionList}
          url={'/puyu/chats/1951/records/generate'}
          ref={ref1}
        />
        <ChatWebkit.ChatBox
          propsSessionList={sessionList}
          url={'/puyu/chats/1952/records/generate'}
          ref={ref2}
        />
        <ChatWebkit.ChatBox
          propsSessionList={sessionList}
          url={'/puyu/chats/1953/records/generate'}
          ref={ref3}
        />
      </div>
      <button onClick={startSse}>开始会话</button>
      <button onClick={stopSse}>停止会话</button>
      <button onClick={reGenerate}>重试</button>
      <button onClick={getSseStatus}>获取状态</button>
    </>
  );
};

export default App;

3. ChatManagement

会话管理组件，提供会话管理的自定义能力和样式

3.1 参数说明

3.1.1 组件入参说明

3.1.2 IChatItem说明

3.2 使用demo

import style from './App.module.less';
import ChatWebkit, {IChatItem} from 'chat-webkit'
import { useState } from 'react';

function App() {
    const [curChatId, setCurChatId] = useState<string>('')
    const [chatList, setChatList] = useState<IChatItem[]>([{
        id: '1',
        name: '开始会话后，这里就会显示第一句话，如果太长',
    },{
        id: '2',
        name: '创建后的默认名称叫做“新会话”',
    },{
        id: '3',
        name: '最多显示两行'
    }])

    const addChat = () => {
        const newItem = {
            id: Date.now().toString(),
            name: '新会话'
        }
        const newList = chatList.slice()
        newList.unshift(newItem)
        setChatList(newList)
        setCurChatId(newItem.id)
    }

    const deleteChat = (id: string) => {
        const newList = chatList.slice()
        const index = chatList.findIndex(x => x.id === id)
        if (index >= 0) {
            newList.splice(index, 1)
            setChatList(newList)
        }
    }

    const selectChat = (id:string) => {
        setCurChatId(id)
    }

    return (
        <div className={style.app} id="app">
            <div className={style.content}>
                <div className={style.title}>ChatZoo</div>
                <ChatWebkit.ChatManagement  
                    list={chatList} 
                    selectedChatId={curChatId}
                    addCallback={addChat} 
                    deleteCallback={deleteChat} 
                    selectCallback={selectChat} 
                />
            </div>
            <div className={style.right}>
                {curChatId}
            </div>
        </div>
    );
}

export default App;