我想实现发送消息时有打字机效果，没有找到相关的配置，请问是否ChatUI是否支持打字机效果？

[fjl-cloud]

What problem does this feature solve? (这个功能解决了什么问题)

Describe the solution you'd like (描述您想要的解决方案)

What does the proposed API look like? (你期望的 API 是怎样的)

[qingpuchen]

可以用updateMsg 来做

1. 先appendMsg({ _id: msgID, type: 'text', content: { text: result }, });
2. 通过监听 result 的变化，再使用updateMsg(msgID, {})

可以看我写的demo https://codesandbox.io/s/chatui-demo-forked-ze2olw

[wang-xiaowu]

可以用updateMsg 来做

1. 先appendMsg({ _id: msgID, type: 'text', content: { text: result }, });
2. 通过监听 result 的变化，再使用updateMsg(msgID, {})

可以看我写的demo https://codesandbox.io/s/chatui-demo-forked-ze2olw

有帮助，感谢 我在用例中结合aardio做了适当修改 https://github.com/behappy-project/behappy-chatgpt-aardio/blob/main/main.aardio

[africa1207]

可以用updateMsg 来做

1. 先appendMsg({ _id: msgID, type: 'text', content: { text: result }, });
2. 通过监听 result 的变化，再使用updateMsg(msgID, {})

可以看我写的demo https://codesandbox.io/s/chatui-demo-forked-ze2olw

我修改了一下，效果应该还比较理想了

import React, { useEffect, useState } from "react";
import Chat, { Bubble, useMessages } from "@chatui/core";
import { nanoid } from "nanoid";
import "@chatui/core/dist/index.css";

export default function App() {
  const { messages, appendMsg, setTyping, updateMsg } = useMessages([]);
  const [msgID, setMsgID] = useState("");
  const [result, setResult] = useState("");
  const [displayedText, setDisplayedText] = useState(""); // 用于控制显示的文本

  useEffect(() => {
    // 监听result的改变，来实现打字机效果
    updateMsg(msgID, {
      type: "text",
      content: { text: displayedText } // 显示逐渐增加的文本
    });
  }, [displayedText]);

  function handleSend(type, val) {
    if (type === "text" && val.trim()) {
      // 先设置一个唯一的msgID
      const msgID = nanoid();
      setMsgID(msgID);

      appendMsg({
        type: "text",
        content: { text: val },
        position: "right"
      });

      setTyping(true);

      // 初始化创建一条空信息
      appendMsg({
        _id: msgID,
        type: "text",
        content: { text: displayedText } // 初始显示空文本
      });

      // 这里模仿请求数据
      setTimeout(() => {
        setResult(
          "它们可以“逃出” React 并使组件和一些外部系统同步。如果没有涉及到外部系统（例如，需要根据一些 props 或 state 的变化来更新一个组件的 state），不应该使用 Effect。移除不必要的 Effect 可以让代码更容易理解，运行得更快，并且更少出错。"
        );
      }, 1000);
    }
  }

  useEffect(() => {
    let i = 0;
    const typingTimer = setInterval(() => {
      setDisplayedText(result.substring(0, i));
      i++;
      if (i > result.length) {
        clearInterval(typingTimer);
        setTyping(false); // 停止打字效果
      }
    }, 50); // 控制打字速度，调整时间间隔以改变打字速度

    return () => {
      clearInterval(typingTimer);
    };
  }, [result]);

  function renderMessageContent(msg) {
    const { content } = msg;
    return <Bubble content={content.text} />;
  }

  return (
    <Chat
      navbar={{ title: "智能助理" }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      onSend={handleSend}
    />
  );
}

[Leemenmen]

可以用updateMsg 来做

1. 先appendMsg({ _id: msgID, type: 'text', content: { text: result }, });
2. 通过监听 result 的变化，再使用updateMsg(msgID, {})

可以看我写的demo https://codesandbox.io/s/chatui-demo-forked-ze2olw

我修改了一下，效果应该还比较理想了

你好，我在使用过程中，设置 _id: msgID 不成功，我虽然生成了msgID，但是appendMsg的_id不是我生成的msgID