完成AI问答模块
This commit is contained in:
269
src/pages/ai/index.tsx
Normal file
269
src/pages/ai/index.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { View, Textarea } from '@tarojs/components';
|
||||
// import Toast from '@tarojs/taro';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { Button } from '@nutui/nutui-react-taro';
|
||||
import { User, ArrowUp } from '@nutui/icons-react-taro';
|
||||
import { sendAiMessage, stopAiMessage } from '@/api/ai';
|
||||
import { createWebSocket } from '@/utils/websocket';
|
||||
import './index.scss';
|
||||
import {APP_API_URL} from "@/utils/server";
|
||||
|
||||
// 消息类型
|
||||
interface Message {
|
||||
id?: string;
|
||||
type?: 'user' | 'ai';
|
||||
query?: string;
|
||||
timestamp?: number;
|
||||
isTyping?: boolean;
|
||||
user?: string;
|
||||
responseMode?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* AI问答页面
|
||||
*/
|
||||
const AiChat = () => {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [currentTaskId, setCurrentTaskId] = useState<string>('');
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const wsRef = useRef<any>(null);
|
||||
|
||||
// 快捷问题
|
||||
const quickQuestions = [
|
||||
"当兵的注意事项？",
|
||||
"男兵应征报名对象：",
|
||||
"当兵公务员考试？",
|
||||
"请问您还有什么问题吗？"
|
||||
];
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = () => {
|
||||
setTimeout(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 初始化WebSocket连接
|
||||
const initWebSocket = () => {
|
||||
const wsUrl = APP_API_URL.replace('https', 'ws') + '/chat/' + Taro.getStorageSync('UserId') || 'token';
|
||||
// const wsUrl = 'ws://127.0.0.1:9000/chat/test'
|
||||
wsRef.current = createWebSocket(wsUrl);
|
||||
|
||||
wsRef.current.onMessage((data: any) => {
|
||||
console.log('收到WebSocket消息:', data);
|
||||
|
||||
if (data.answer) {
|
||||
if (data.answer === '__END__') {
|
||||
// 消息结束，移除typing状态
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.isTyping ? { ...msg, isTyping: false } : msg
|
||||
));
|
||||
setIsLoading(false);
|
||||
setCurrentTaskId('');
|
||||
} else {
|
||||
// 更新AI回复消息
|
||||
setMessages(prev => {
|
||||
const lastMessage = prev[prev.length - 1];
|
||||
if (lastMessage && lastMessage.type === 'ai' && lastMessage.isTyping) {
|
||||
// 更新最后一条AI消息
|
||||
return prev.map((msg, index) =>
|
||||
index === prev.length - 1
|
||||
? { ...msg, query: msg.query + data.answer }
|
||||
: msg
|
||||
);
|
||||
} else {
|
||||
// 创建新的AI消息
|
||||
return [...prev, {
|
||||
id: Date.now().toString(),
|
||||
type: 'ai',
|
||||
query: data.answer,
|
||||
timestamp: Date.now(),
|
||||
isTyping: true
|
||||
}];
|
||||
}
|
||||
});
|
||||
|
||||
if (data.taskId) {
|
||||
setCurrentTaskId(data.taskId);
|
||||
}
|
||||
}
|
||||
scrollToBottom();
|
||||
}
|
||||
});
|
||||
|
||||
wsRef.current.onOpen(() => {
|
||||
console.log('WebSocket连接成功');
|
||||
});
|
||||
|
||||
wsRef.current.onError((error: any) => {
|
||||
console.error('WebSocket连接错误:', error);
|
||||
// Toast.showToast({ title: '连接失败，请检查网络', icon: 'error'});
|
||||
});
|
||||
|
||||
wsRef.current.connect().catch((error: any) => {
|
||||
console.error('WebSocket连接失败:', error);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initWebSocket();
|
||||
Taro.hideTabBar();
|
||||
return () => {
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
// 发送消息
|
||||
const handleSendMessage = async (content: string) => {
|
||||
if (!content.trim() || isLoading) return;
|
||||
|
||||
const userMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
type: 'user',
|
||||
query: content.trim(),
|
||||
timestamp: Date.now(),
|
||||
user: `${Taro.getStorageSync('UserId')}`
|
||||
};
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setInputValue('');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await sendAiMessage({
|
||||
query: content.trim(),
|
||||
user: `${Taro.getStorageSync('UserId')}`,
|
||||
responseMode: 'streaming',
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('发送消息失败:', error);
|
||||
// Toast.showToast({ title: '发送失败，请重试', icon: 'error'});
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 停止AI回复
|
||||
const handleStopMessage = async () => {
|
||||
if (currentTaskId) {
|
||||
try {
|
||||
await stopAiMessage({ taskId: currentTaskId });
|
||||
setIsLoading(false);
|
||||
setCurrentTaskId('');
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.isTyping ? { ...msg, isTyping: false } : msg
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('停止消息失败:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 处理快捷问题点击
|
||||
const handleQuickQuestion = (question: string) => {
|
||||
console.log(question,'qqq')
|
||||
handleSendMessage(question);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="ai-chat">
|
||||
{/*<View className="chat-header">*/}
|
||||
{/* AI智能问答*/}
|
||||
{/*</View>*/}
|
||||
|
||||
<View className="chat-container">
|
||||
<View className="messages-container">
|
||||
{messages.length === 0 ? (
|
||||
<View className="empty-state">
|
||||
<View className="empty-icon">🤖</View>
|
||||
<View className="empty-title">您好！我是AI助手</View>
|
||||
<View className="empty-desc">
|
||||
我可以为您解答各种问题，请输入您想了解的内容
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
messages.map((message) => (
|
||||
<View key={message.id} className={`message ${message.type}`}>
|
||||
<View className={`avatar ${message.type}-avatar`}>
|
||||
{message.type === 'user' ? <User size={20} /> : '🤖'}
|
||||
</View>
|
||||
<View className="message-content">
|
||||
{message.isTyping ? (
|
||||
<View className="typing-indicator">
|
||||
<View className="dot"></View>
|
||||
<View className="dot"></View>
|
||||
<View className="dot"></View>
|
||||
</View>
|
||||
) : (
|
||||
message.query
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
<View ref={messagesEndRef} />
|
||||
</View>
|
||||
|
||||
{messages.length === 0 && (
|
||||
<View className="quick-questions">
|
||||
<View className="quick-title">
|
||||
💡 您可以问我：
|
||||
</View>
|
||||
<View className="questions-list">
|
||||
{quickQuestions.map((question, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className="question-item"
|
||||
onClick={() => handleQuickQuestion(question)}
|
||||
>
|
||||
{question}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="input-container">
|
||||
<View className="input-wrapper">
|
||||
<Textarea
|
||||
className="message-input"
|
||||
value={inputValue}
|
||||
placeholder="请输入您的问题..."
|
||||
onInput={(e) => setInputValue(e.detail.value)}
|
||||
onConfirm={() => handleSendMessage(inputValue)}
|
||||
disabled={isLoading}
|
||||
autoHeight
|
||||
maxlength={500}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<Button
|
||||
onClick={handleStopMessage}
|
||||
type="danger"
|
||||
icon={<ArrowUp />}
|
||||
>
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="danger"
|
||||
onClick={() => handleSendMessage(inputValue)}
|
||||
disabled={!inputValue.trim()}
|
||||
icon={<ArrowUp />}
|
||||
>
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default AiChat;
|
||||
Reference in New Issue
Block a user