d8d-vite-starter/src/client/mobile/components/SmartAssistant/SmartAssistant.tsx

import React, { useRef, useEffect, useState } from 'react';
import { FloatingButton } from './FloatingButton';
import { ChatWindow } from './ChatWindow';
import { AgentSelector } from './AgentSelector';
import { useAIAgent } from './hooks/useAIAgent';
import type { SmartAssistantProps } from './types';
import { INK_THEME } from './styles/ink-theme';

export const SmartAssistant: React.FC<SmartAssistantProps> = ({
  isOpen,
  onToggle,
  defaultAgentId,
  mode = 'floating',
  containerId
}) => {
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const [inputText, setInputText] = useState('');
  
  const {
    agents,
    selectedAgent,
    messages,
    isLoading,
    isAgentsLoading,
    error,
    selectAgent,
    sendMessage,
    clearMessages,
  } = useAIAgent(defaultAgentId);

  // 自动滚动到底部
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  // 监听消息变化，自动滚动
  useEffect(() => {
    if (messages.length > 0) {
      scrollToBottom();
    }
  }, [messages]);

  // 处理发送消息
  const handleSend = async (text: string) => {
    await sendMessage(text);
  };

  // 处理切换智能体
  const handleAgentChange = (agent: any) => {
    if (agent && agent.id) {
      selectAgent(agent);
    }
  };

  // 处理关闭
  const handleClose = () => {
    onToggle();
  };

  // 处理输入变化
  const handleInputChange = (text: string) => {
    setInputText(text);
  };

  if (mode === 'embedded' && containerId) {
    return (
      <div className="w-full h-full flex flex-col" style={{ backgroundColor: INK_THEME.colors.ink.light }}>
        <AgentSelector
          agents={agents}
          selectedAgent={selectedAgent}
          onAgentChange={handleAgentChange}
        />
        <ChatWindow
          isOpen={true}
          messages={messages}
          inputText={inputText}
          onSend={handleSend}
          onClose={handleClose}
          onInputChange={handleInputChange}
          messagesEndRef={messagesEndRef}
          agents={agents}
          selectedAgent={selectedAgent}
          onAgentChange={handleAgentChange}
          isLoading={isLoading}
          isAgentsLoading={isAgentsLoading}
        />
      </div>
    );
  }

  return (
    <>
      <FloatingButton
        isOpen={isOpen}
        onClick={onToggle}
        unreadCount={0}
      />
      <ChatWindow
        isOpen={isOpen}
        messages={messages}
        inputText={inputText}
        onSend={handleSend}
        onClose={handleClose}
        onInputChange={handleInputChange}
        messagesEndRef={messagesEndRef}
        agents={agents}
        selectedAgent={selectedAgent}
        onAgentChange={handleAgentChange}
        isLoading={isLoading}
        isAgentsLoading={isAgentsLoading}
      />
    </>
  );
};

export default SmartAssistant;