ant-design / pro-chat

🤖 Components Library for Quickly Building LLM Chat Interfaces.
https://pro-chat.antdigital.dev
MIT License
710 stars 90 forks source link

👑 [需求] 输入框的停止响应按钮可否增加一个事件回调 #296

Open leepingting opened 2 months ago

leepingting commented 2 months ago

🥰 需求描述

目前是通过signal参数断开请求,但是我希望在点击终止按钮后调用服务接口。

🧐 解决方案

增加一个停止响应的回调

ONLY-yours commented 2 months ago

终止按钮的话,确实没有这个功能

但是有个 onChatEnd 的 api ,不知道能不能平替你这个场景

mannix-lei commented 2 months ago

终止按钮的话,确实没有这个功能

但是有个 onChatEnd 的 api ,不知道能不能平替你这个场景

如果大家有多种类似需求,可以点 +1 ,后期给添加该功能

leepingting commented 2 months ago

终止按钮的话,确实没有这个功能

但是有个 onChatEnd 的 api ,不知道能不能平替你这个场景

onChatEnd是在对话结束的时候触发,停止响应的时候不会触发

scoooooott commented 2 months ago

可以试试这个方案

interface State {
  isSending: boolean
}

const YouComponent = () => {
  const [state, setState] = useSetState<State>({
    isSending: false
  });
<ProChat
    onChatStart={() => setState({isSending: true})}
    onChatEnd={() => setState({isSending: false})}
    sendButtonRender={(defaultDom, defaultButtonProps) => {
      // 根据当前消息发送状态决定停止按钮的动作行为
      const customOnClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        if (state.isSending) {
          // 调用自己的function。比如:调用一个服务端接口,cancel掉服务端的异步任务,关闭SSE流
          // notice: 不要忘记在拦截的动作最后也执行defaultButtonProps.onClick?.(event);,我这里是包裹在自己的cancelStream中了,因为我要等调用接口的Promise.then()
          cancelStream(defaultButtonProps, event);
        } else {
          defaultButtonProps.onClick?.(event);
        }
      };
      return <Button {...defaultButtonProps} onClick={customOnClick}/>;
    }}
/>