👑 [需求] 函数调用消息展示支持

[sivdead]

🥰 需求描述

当前ProChat不支持展示在HumanMessage和AIMessage中间的一些函数调用过程,希望有类似ChatGPT那种展示效果

🧐 解决方案

目前对于LangChain的agent框架来说,流式模式下会返回一些函数调用的中间步骤,可以将这些中间步骤关联到当前正在输出的AIMessage,然后根据参数里传入的函数渲染方法来渲染

🚑 其他信息

贴一版我自己做的丐版的

[ONLY-yours]

现在可以用 messageItemExtraRender 在 AI AIMessage 渲染一些自定义的 reactnode（这块是脱离编辑流的），可以先用这个支持一下，我们也在调研 Function Call 的最佳实践，你有什么好的建议么？

[sivdead]

现在可以用 messageItemExtraRender 在 AI AIMessage 渲染一些自定义的 reactnode（这块是脱离编辑流的），可以先用这个支持一下，我们也在调研 Function Call 的最佳实践，你有什么好的建议么？

messageItemExtraRender只能渲染在下面,所以展示上不太行;个人觉得可以在ChatMessage加个中间消息字段,然后在ChatItem提供一块区域来渲染这些消息,也提供一下自定义渲染方法就好。函数调用的过程我不觉得需要支持编辑,只要能够展示就可以了,但是得考虑同时调用多个(并行)和多次调用(顺序)的情况;

[sivdead]

chatItemRenderConfig={{
            render: (
              props: ChatItemProps,
              domsMap: {
                avatar: ReactNode;
                title: ReactNode;
                messageContent: ReactNode;
                actions: ReactNode;
                itemDom: ReactNode;
              },
              defaultDom: ReactNode,
            ) => {
              const message = props.originData as ChatMessage;
              if (message.role === 'assistant' && message.extra?.toolHistory) {
                //展示函数调用过程
                return (
                  <>
                    <ChatItem
                      showTitle={props.showTitle}
                      actions={domsMap.actions}
                      avatar={assistantMeta}
                      renderMessage={(content) => {
                        return (
                          <>
                            {renderToolHistory(message?.extra?.toolHistory)}
                            {content}
                          </>
                        );
                      }}
                      messageExtra={props.messageExtra}
                      message={props.message}
                    />
                  </>
                );
              }
              return defaultDom;
            },
          }}

我目前就这样处理,反正能满足我这边的需求。。