diff --git a/src/pages/ideContainer/chatBox.tsx b/src/pages/ideContainer/chatBox.tsx new file mode 100644 index 0000000..d05c891 --- /dev/null +++ b/src/pages/ideContainer/chatBox.tsx @@ -0,0 +1,194 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { Avatar, Input, Button, List, Typography, Tabs } from '@arco-design/web-react'; +import { IconSend, IconRobot, IconUser } from '@arco-design/web-react/icon'; +import styles from './style/chatBox.module.less'; + +const { TextArea } = Input; +const TabPane = Tabs.TabPane; + +interface Message { + id: string; + content: string; + role: 'user' | 'assistant'; + timestamp: Date; +} + +const ChatBox: React.FC = () => { + const [activeTab, setActiveTab] = useState('1'); + const [messages, setMessages] = useState([ + { + id: '1', + content: '你好！我是AI助手，有什么我可以帮助你的吗？', + role: 'assistant', + timestamp: new Date() + } + ]); + const [inputValue, setInputValue] = useState(''); + const [loading, setLoading] = useState(false); + const messagesEndRef = useRef(null); + + // 滚动到最新消息 + const scrollToBottom = () => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }; + + useEffect(() => { + scrollToBottom(); + }, [messages]); + + // 发送消息 + const handleSend = async () => { + if (!inputValue.trim() || loading) return; + + // 添加用户消息 + const userMessage: Message = { + id: Date.now().toString(), + content: inputValue, + role: 'user', + timestamp: new Date() + }; + + setMessages(prev => [...prev, userMessage]); + setInputValue(''); + setLoading(true); + + try { + // 模拟AI回复（实际项目中这里会调用API） + setTimeout(() => { + let response = ''; + switch (activeTab) { + case '1': + response = `关于应用编排，我收到你的消息："${inputValue}"。应用编排可以帮助你设计和管理复杂的应用流程。`; + break; + case '2': + response = `关于组件编排，我收到你的消息："${inputValue}"。组件编排可以让你灵活组合和配置各种功能组件。`; + break; + case '3': + response = `关于组件推荐，我收到你的消息："${inputValue}"。基于你的需求，我推荐以下组件：1.数据表格组件 2.图表组件 3.表单组件。`; + break; + default: + response = `我收到了你的消息："${inputValue}"。这是一个模拟回复，实际项目中这里会接入AI接口。`; + } + + const aiMessage: Message = { + id: (Date.now() + 1).toString(), + content: response, + role: 'assistant', + timestamp: new Date() + }; + setMessages(prev => [...prev, aiMessage]); + setLoading(false); + }, 1000); + } catch (error) { + const errorMessage: Message = { + id: (Date.now() + 1).toString(), + content: '抱歉，我遇到了一些问题，请稍后再试。', + role: 'assistant', + timestamp: new Date() + }; + setMessages(prev => [...prev, errorMessage]); + setLoading(false); + } + }; + + // 处理回车发送 + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSend(); + } + }; + + // 格式化时间 + const formatTime = (date: Date) => { + return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + }; + + return ( +
+
+ + + 应用编排 + + } + /> + + 组件编排 + + } + /> + + 组件推荐 + + } + /> + +
+ +
+ ( + +
+
+ + {item.role === 'user' ? : } + +
+
+
+ {item.content} +
+
+ {formatTime(item.timestamp)} +
+
+
+ + )} + /> +
+
+ +
+