tailchat/web/src/components/ChatBox/index.tsx

import { Skeleton } from 'antd';
import React from 'react';
import { useConverseMessage } from 'pawchat-shared';
import { AlertErrorView } from '../AlertErrorView';
import { ChatInputBox } from './ChatInputBox';

const ChatBoxPlaceholder: React.FC = React.memo(() => {
  return (
    <div className="px-2 w-2/3">
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
    </div>
  );
});
ChatBoxPlaceholder.displayName = 'ChatBoxPlaceholder';

export const ChatBox: React.FC<{
  converseId: string;
}> = React.memo((props) => {
  const { messages, loading, error, handleSendMessage } = useConverseMessage(
    props.converseId
  );

  if (loading) {
    return <ChatBoxPlaceholder />;
  }

  if (error) {
    return <AlertErrorView error={error} />;
  }

  return (
    <div>
      <div>消息数据: {JSON.stringify(messages)}</div>
      <ChatInputBox
        onSendMsg={(msg) =>
          handleSendMessage({
            converseId: props.converseId,
            content: msg,
          })
        }
      />
    </div>
  );
});
ChatBox.displayName = 'ChatBox';