具体兼容情况待后续补充

最近在使用 OpenAI 的 gpt api 搞着玩玩，然后就遇上了前端对话交互实现的需求场景，如何快速实现 CUI（Chat User Interface）成了问题。个人的使用经验整理如下：

消息 hookuseMessages(initialState)

这是使用中关键且必不可少的 API，充当着控制器的角色，相关消息展示、直观的设计，以及对多种消息类型的支持，问题在于当前的文档不够完善。效果如：

使用

在通过 Nodejs 包管理工具npm i @chatui/core安装完依赖后，只需在使用场景下引入对应模块即可。具体兼容情况待后续补充。也可以为组件（设置type属性）

<Chat/>使用配置

如下图，官网对于<Chat/>容器的属性介绍非常简单，像navbar这些属性都不清楚具体配置项及示例

使用及配置时可以通过找到其声明文件来确定使用。

在本人的使用情况来看，ChatUI 是一整套机器人对话界面的前端解决方案，遵循前端组件化和容器标准化的设计思想，包含丰富使用的对话组件。还是以navbar为例，ts 声明如下：

/**     * 导航栏配置     */navbar?:NavbarProps |undefined;

继续定位，可以大致猜测其作用

exportdeclaretypeNavbarProps={// 标题文案title:string;// 可设置classNameclassName?:string;// 标题logologo?:string;// 标题栏左侧内容leftContent?:IconButtonProps;// 标题栏右侧内容rightContent?:IconButtonProps[];};

再继续定位，如IconButtonProps：

exportinterfaceIconButtonPropsextendsButtonProps{img?:string;}exportinterfaceButtonPropsextendsReact.ButtonHTMLAttributes<HTMLButtonElement>{className?:string;label?:string;color?:'primary';variant?:'text'|'outline';size?:'sm'|'md'|'lg';block?:boolean;icon?:string;loading?:boolean;disabled?:boolean;onClick?:(event:React.MouseEvent<HTMLButtonElement,MouseEvent>)=>void;}

以此基本能确定navbar配置项为：

interfaceTempNavbarProps{// 标题文案title:string;// 可设置classNameclassName?:string;// 标题logologo?:string;// 标题栏左侧内容leftContent?:{// 图片/logoimg?:string;className?:string;// 左侧标签文案label?:string;color?:'primary';variant?:'text'|'outline';size?:'sm'|'md'|'lg';block?:boolean;// 图标，通过 SVG Symbol 实现的矢量图形icon?:string;loading?:boolean;disabled?:boolean;onClick?:(event:React.MouseEvent<HTMLButtonElement,MouseEvent>)=>void;};// 标题栏右侧内容rightContent?:Array<{// 图片/logoimg?:string;className?:string;// 左侧标签文案label?:string;color?:'primary';variant?:'text'|'outline';size?:'sm'|'md'|'lg';block?:boolean;// 图标，通过 SVG Symbol 实现的矢量图形icon?:string;loading?:boolean;disabled?:boolean;onClick?:(event:React.MouseEvent<HTMLButtonElement,MouseEvent>)=>void;}>;}

组件

相比<Chat/>容器，其他组件的使用简单了很多。

官方文档：https://chatui.io/docs/quick-start

chatUI 适用于 React 项目，支持 PC/移动端样式响应式。文档上没有找到对应说明，从 ts 声明文件中可以大致了解其使用方法：

exportdefaultfunctionuseMessages(initialState?:MessageWithoutId[]):{// 用于展示的信息列表messages:Messages;// 添加信息（在之前）prependMsgs:(msgs:Messages)=>void;// 添加信息（在之后）appendMsg:(msg:MessageWithoutId)=>void;// 根据id更新某一条信息updateMsg:(id:MessageId,msg:MessageWithoutId)=>void;// 根据id删除某一条信息deleteMsg:(id:MessageId)=>void;// 重置resetList:(list?:any)=>void;setTyping:(typing:boolean)=>void;};

初始语句initialState

• 格式：MessageWithoutId[]，其中``：

  interfaceMessageWithoutId{/**   * 消息类型   */type:string;/**   * 消息内容   */content?:any;/**   * 消息创建时间   */createdAt?:number;/**   * 消息发送者信息   */user?:User;/**   * 消息位置   */position?:'left'|'right'|'center'|'pop';/**   * 是否显示时间   */hasTime?:boolean;/**   * 状态   */status?:IMessageStatus;/**   * 消息内容渲染函数   */renderMessageContent?:(message:MessageProps)=>React.ReactNode;}

如：

import React from 'react';import Chat, { useMessages, RichText, Bubble } from '@chatui/core';import '@chatui/core/dist/index.css';export default function ChatFrame() {  const { messages } = useMessages([    {      type: 'text',      content: { text: '你好，我是智能助理小X~' },    },  ]);  return (    <Chat      messages={messages}      renderMessageContent={msg => {        const { content } = msg;        return (          <Bubble>            <RichText content={content.text} />          </Bubble>        );      }}      onSend={(type: string, val: string) => console.log(type, val)}    />  );}

效果如：

也可以设置user属性增加头像：

exportinterfaceUser{avatar?:string;name?:string;url?:string;[k:string]:any;}

如：

const{messages,appendMsg }=useMessages([{type:'text',content:{text:'你好，我是智能助理小X~'},user:{name:'小X',avatar:'https://avatars.githubusercontent.com/u/16474680?v=4',},},]);

效果如：

当然初始信息可以为多条、修改等操作都是都过此 hook。它的特点在于其简单、

<Chat/>组件

整个 ChatUI 的核心其实就是<Chat/>容器组件，然而在目前官方文档并没有对此组件的使用展开具体描述及案例说明，以致于需要经常查看其 ts 声明文件或 demo。

社区情况

项目看着也因近期 ChatGPT 热度有所上升。最后选择了来自阿里达摩院的ChatUI，本人便用于整理其使用经验。易于使用的界面。

相关链接

• https://chatui.io/components/chat