@lmecosystem/chat-webkit

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 组件入参说明

参数	说明	是否必需	类型	默认值	版本
propsSessionList	传入的历史对话记录	是	SseMesage[]
url	sse 连接地址（唯一）	是	string
eventName	sse 返回数据时，监听事件名称	否	string
style	对话框样式自定义	否	React.CSSProperties
sseMaxWaitTime	SSE 连接超时时间	否	number
sseNoMessageWaitTime	无消息，超时会话等待	否	number
sseActiveWaitTime	会话中（已收到消息），超时提示等待	否	number
sseActiveCloseTime	会话中（已收到消息），超时主动关闭	否	number
token	头部鉴权信息	否	string
requestMessageContainerStyle	提问对话框样式自定义	否	React.CSSProperties
responseMessageContainerStyle	回答对话框样式自定义	否	React.CSSProperties
isShowStopGenerateButton	是否显示停止生成按钮	否	boolean	true
stopGenerateButtonStyle	停止生成按钮 样式自定义	否	React.CSSProperties
stopGenerateWords	停止生成文字配置	否	string	停止生成
isShowRegenerateButton	当会话失败时， 是否显示重新生成 按钮	否	boolean	true
reGenerateComponent	重新生成组件 ，若不传则用默认	否	JSX.Element
tooLongErrorComponent	超长提示 暴露组件,若不传则用默认	否	JSX.Element
modelCloseStyle	模型关闭样式自定义	否	React.CSSProperties

2.1.2 SseMesage说明

参数	说明	是否必需	类型	默认值	版本
id	聊天id（唯一）	是	number
status	对话状态，0：对话停止状态 2:对话进行中	是	number
message	对话回复信息	是	string
question	对话问题A	是	string

2.1.3 SSE返回的数据格式说明

参数	说明	是否必需	类型	默认值	版本
code	状态码	是	AllStatus
data	数据	是	Data

2.1.4 AllStatus说明

枚举值	说明	版本
3	发起请求5s 内，无消息
4	发起请求5s 后，无消息
1	接收到event stream，流式输出中
-1	接收出错
0	接收完成
-20003	会话超长
-20008	模型关闭
-20015	会话中，后端超时

2.1.5 Data说明

参数	说明	是否必需	类型	默认值	版本
context		是	string
id		是	number
request		是	string
response		是	string

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 组件入参说明

参数	说明	是否必需	类型	默认值	版本
list	会话列表	是	IChatItem[]	[]
selectedChatId	选中的会话	是	string	''
ellipsis	会话名称省略的最大行数	否	Int	2
addCallback	新建会话回调，需更新list	是	() => void	-
deleteCallback	删除会话回调，需更新list	是	(id:string) => void	-
selectCallback	选中会话回调，需处理对话流的切换	是	(id:string) => void	-
emptyRender	空列表状态下的自定义渲染，默认不渲染	否	ReactNode	-
itemRender	单条会话的自定义渲染	否	ReactNode	-
addRender	新建会话的自定义渲染	否	ReactNode	-
optionRender	会话操作的自定义渲染	否	ReactNode	-

3.1.2 IChatItem说明

参数	说明	是否必需	类型	默认值	版本
id	唯一标识id	是	string	-
name	名称	是	string	-

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;