🧐[问题]： 加载已有多段文本对话页面严重卡顿

[liguobao]

🧐 问题描述

1、大概是消耗了30W Token的对话，字数约等于 5W-10W
2、 此时继续对话，打字机效果吐字极慢。

      <ProChat
        displayMode={currentRow?.displayMode ?? "chat"}
        style={{ height: "calc(100vh - 150px)" }}
        chats={cachedChats}
        request={async (messages: any) => {

          const stream = OpenAIStream(response);
          return new StreamingTextResponse(stream);
        }}
      ></ProChat>

[ONLY-yours]

会不会是token多的时候模型本身返回就慢？

[liguobao]

不是的，因为这个时候我是从服务端直接加载了历史纪录， 一次全部渲染出来之后，新增的对话极慢。 发自我的iPhone

…

------------------ 原始邮件 ------------------ 发件人: Shinji-Li ***@***.***> 发送时间: 2024年3月15日 17:49 收件人: ant-design/pro-chat ***@***.***> 抄送: 李国宝 ***@***.***>, Author ***@***.***> 主题: Re: [ant-design/pro-chat] ��[问题]： 加载已有多段文本对话页面严重卡顿 (Issue #126) 会不会是token多的时候模型本身返回就慢？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[liguobao]

是不是 chats={cachedChats} 这个导致的？还是说存在性能问题。
我的整个文本大概是55条，总大小约为14K

[sivdead]

我也遇到了,

我这边一直在报这个错,不确定是我代码的问题还是什么

[liguobao]

我也遇到了, 我这边一直在报这个错,不确定是我代码的问题还是什么

好像还是框架的问题，等下修复吧。

[ONLY-yours]

@liguobao @sivdead Memo 问题，之前写的Memo逻辑被后面的几个pr打挂了 - -

样本量小的时候无所谓，样本量大起来就会很卡

[ONLY-yours]

有一个 shouldUpdate 的 api 可以优化，先用这个 api 吧，默认的逻辑还在修

  /**
   * 判断组件是否需要更新。
   * @param nextProps - 下一个属性对象。
   * @returns 如果需要更新则返回 true，否则返回 false。
   */
  shouldComponentUpdate(nextProps: any) {
    if (nextProps.shouldUpdate) {
      return nextProps.shouldUpdate(this.props, nextProps);
    }
    try {
    // 这行默认对比现在一定是 true 所以就一直刷新了
      return !isEqual(this.props, nextProps);
    } catch (error) {
      return true;
    }
  }

  render() {
    return this.props.children;
  }
}

[liguobao]

有一个 shouldUpdate 的 api 可以优化，先用这个 api 吧，默认的逻辑还在修

  /**
   * 判断组件是否需要更新。
   * @param nextProps - 下一个属性对象。
   * @returns 如果需要更新则返回 true，否则返回 false。
   */
  shouldComponentUpdate(nextProps: any) {
    if (nextProps.shouldUpdate) {
      return nextProps.shouldUpdate(this.props, nextProps);
    }
    try {
    // 这行默认对比现在一定是 true 所以就一直刷新了
      return !isEqual(this.props, nextProps);
    } catch (error) {
      return true;
    }
  }

  render() {
    return this.props.children;
  }
}

这个API怎么用来的？ 没看懂。

试了下套个

  class MyProChat extends React.Component {

    shouldComponentUpdate(nextProps: any) {
      if (nextProps.shouldUpdate) {
        return nextProps.shouldUpdate(this.props, nextProps);
      }
      try {
        // 这行默认对比现在一定是 true 所以就一直刷新了
        return !isEqual(this.props, nextProps);
      } catch (error) {
        return true;
      }
    }
  return <ProChat></ProChat>;
}

好像没什么改善

[ONLY-yours]

我考虑了一些情况，认为一个某个 ChatItem 是否更新依靠四个东西

• content 也就是内容
• meta 一些头像元信息
• loading 加载态和加载完成后
• chatItemRenderConfig 需要自定义 Item 的配置

现在除开这四个进行变更外，其余情况，已经发送的 ChatItem 不会再次更新，commit 如下：
145b20c

@liguobao 至于现在用法来说，在 ProChat 上现在有这么一个 api：itemShouldUpdate
itemShouldUpdate?: (prevProps: ChatListItemProps, nextProps: ChatListItemProps) => boolean;
你可以参考默认的逻辑这么写：

<ProChat
     itemShouldUpdate=(prevProps,nextProps)=>{
      return (
        !isEqual(prevProps.content, nextProps?.content) ||
        !isEqual(prevProps.loading, nextProps?.loading) ||
        !isEqual(prevProps.chatItemRenderConfig, nextProps?.chatItemRenderConfig) ||
        !isEqual(prevProps.meta, nextProps?.meta)
      );
    }

/>

当然如果你不会动态设置 chatItemRenderConfig 和 Meta 参数，我认为 只用 content 和 loading 就可以了，默认逻辑会在下一个版本发布后修复

[liguobao]

OK，我试试~感恩。

[ONLY-yours]

@liguobao @sivdead fixed in 1.12.2 试试

[liguobao]

好，稍后 发自我的iPhone

…

------------------ 原始邮件 ------------------ 发件人: Shinji-Li ***@***.***> 发送时间: 2024年3月25日 15:14 收件人: ant-design/pro-chat ***@***.***> 抄送: 李国宝 ***@***.***>, Mention ***@***.***> 主题: Re: [ant-design/pro-chat] ��[问题]： 加载已有多段文本对话页面严重卡顿 (Issue #126) @liguobao @sivdead fixed in 1.12.2 试试 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[liguobao]

@liguobao @sivdead fixed in 1.12.2 试试

更新了1.12.2，看起来是解决了。
不过整个长对话的渲染还是不够流畅，好像这种情况切到末尾的按钮也没有出来。