DB-GPT/web/pages/mobile/chat/components/Content.tsx

import React, { memo, useContext, useMemo } from 'react';
import { v4 as uuid } from 'uuid';
import { MobileChatContext } from '../';
import ChatDialog from './ChatDialog';

const Content: React.FC = () => {
  const { history } = useContext(MobileChatContext);

  // 过滤出需要展示的消息
  const showMessages = useMemo(() => {
    return history.filter((item) => ['view', 'human'].includes(item.role));
  }, [history]);

  return (
    <div className="flex flex-col gap-4">
      {!!showMessages.length &&
        showMessages.map((message, index) => {
          return <ChatDialog key={message.context + index} message={message} index={index} />;
        })}
    </div>
  );
};

export default memo(Content);