AutoAndroidController/src/pages/Chat/Dialog/Dialog.jsx

import './dialog.css';
import { DialogLogic } from './dialog.js';
import { useEffect, useRef } from 'react';

function Dialog({ messages = [], isLoading = false }) {
  const { formatTime } = DialogLogic(messages);
  const messagesEndRef = useRef(null);

  // 自动滚动到底部
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, isLoading]);

  return (
    <div className="Dialog-container">
      <div className="Dialog-messages">
        {messages.length === 0 && !isLoading && (
          <div className="Dialog-message assistant">
            <div className="Dialog-message-avatar">
              AI
            </div>
            <div className="Dialog-message-content">
              <div className="Dialog-message-text">请直接描述你想要生成的自动化工作流，我会帮你生成对应的配置文件。</div>
              <div className="Dialog-message-time">{formatTime(new Date())}</div>
            </div>
          </div>
        )}
        {messages.map((msg, index) => (
          <div key={index} className={`Dialog-message ${msg.role === 'user' ? 'user' : 'assistant'}`}>
            <div className="Dialog-message-avatar">
              {msg.role === 'user' ? '我' : 'AI'}
            </div>
            <div className="Dialog-message-content">
              {msg.images && msg.images.length > 0 && (
                <div className="Dialog-message-images">
                  {msg.images.map((img, imgIndex) => (
                    <img
                      key={imgIndex}
                      src={`data:image/png;base64,${img.base64}`}
                      alt={img.originalName || `图片${imgIndex + 1}`}
                      className="Dialog-message-image"
                      title={img.originalName}
                    />
                  ))}
                </div>
              )}
              {msg.content && (
                <div className="Dialog-message-text">{msg.content}</div>
              )}
              <div className="Dialog-message-time">{formatTime(msg.timestamp)}</div>
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="Dialog-message assistant">
            <div className="Dialog-message-avatar">
              AI
            </div>
            <div className="Dialog-message-content">
              <div className="Dialog-message-text Dialog-loading">
                <span className="Dialog-loading-dots">
                  <span>.</span>
                  <span>.</span>
                  <span>.</span>
                </span>
              </div>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
    </div>
  );
}

export default Dialog;