🧐[问题] 如何使用编程式操作控制的方式获取一个回答

[mingxin-yang]

🧐 问题描述

我想实现一个功能，就是不需要发送消息，直接在代码里请求服务器的一个回复，并可以流式输出来，可以实现吗

💻 示例代码

🚑 其他信息

[KrishnaPG]

I guess this is what you are looking for: https://pro-chat.antdigital.dev/en-US/components/pro-chat#useprochat

[HongwuQz]

I guess this is what you are looking for: https://pro-chat.antdigital.dev/en-US/components/pro-chat#useprochat

nope，I got the same problem before。The component doesn't support to get new conversation without sending a message

[HongwuQz]

你可以先用组件的Ref里挂载的sendMessage方法发送一条特殊的消息：content正常、role自定义一个标识符如“hiddenUser” 然后在chatItemRenderConfig.contentRender里面用函数第一个入参prop中的originData.id拦截到它，返回null就行了

import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
import { useRef } from 'react';

// 特殊标识符
const HIDDEN_USER_ROLE = 'hiddenUser';
export default () => {
  const proChatRef = useRef<ProChatInstance>();

  const requestWithoutMessage = (content: string) => {
    proChatRef.current.sendMessage({
      role: HIDDEN_USER_ROLE, // 标记需要隐藏的消息
      content,
    })
  }

  const yourRequest = (content: string) => {
    // 你的request请求逻辑
  }

  return (
    <ProChat
      chatRef={proChatRef}
      chatItemRenderConfig={{
        contentRender: (contentProps, defaultDoms) => {
          // 过滤标记消息
          if (contentProps.originData.role === HIDDEN_USER_ROLE) {
            return null
          }
          return defaultDoms
        }
      }}
     request={yourRequest}
    />
  );
};

[mingxin-yang]

你可以先用组件的Ref里挂载的sendMessage方法发送一条特殊的消息：content正常、role自定义一个标识符如“hiddenUser” 然后在chatItemRenderConfig.contentRender里面用函数第一个入参prop中的originData.id拦截到它，返回null就行了

import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
import { useRef } from 'react';

// 特殊标识符
const HIDDEN_USER_ROLE = 'hiddenUser';
export default () => {
  const proChatRef = useRef<ProChatInstance>();

  const requestWithoutMessage = (content: string) => {
    proChatRef.current.sendMessage({
      role: HIDDEN_USER_ROLE, // 标记需要隐藏的消息
      content,
    })
  }

  const yourRequest = (content: string) => {
    // 你的request请求逻辑
  }

  return (
    <ProChat
      chatRef={proChatRef}
      chatItemRenderConfig={{
        contentRender: (contentProps, defaultDoms) => {
          // 过滤标记消息
          if (contentProps.originData.role === HIDDEN_USER_ROLE) {
            return null
          }
          return defaultDoms
        }
      }}
     request={yourRequest}
    />
  );
};

谢谢你的耐心解答，你的应该是对的，我昨天尝试先sendmessage然后再deleteMessage达到了效果，不会出现闪出一条消息的问题。

proChat.sendMessage(" ")
proChat.deleteMessage(proChat.getChats()[proChat.getChats().length - 1].id)

[KrishnaPG]

Not sure if I understood the problem correctly, but one can use the chats property to set the chats from outside.

  const [chats, setChats] = useState(() => example.chats);

  useEffect(() => setInterval(()=>setChats(prevChats => prevChats.concat({content: Math.random(), id: Math.random(), role:"assistant"}), 1000), []);

  return <ProChat  chats={chats}  />

This one produces new chat message every second. (You can modify it as needed).