feat: 实现AI聊天页面,支持文本和语音输入、确认卡片及会话管理。

This commit is contained in:
2026-01-29 22:19:51 +08:00
parent ee5d637f07
commit 4208225a12
4 changed files with 1495 additions and 7 deletions

1465
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -30,8 +30,10 @@
"react-confetti": "^6.4.0",
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-markdown": "^10.1.0",
"react-router-dom": "^7.12.0",
"react-use": "^17.6.0"
"react-use": "^17.6.0",
"remark-gfm": "^4.0.1"
},
"devDependencies": {
"@eslint/js": "^9.39.1",

View File

@@ -108,7 +108,29 @@
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.chat-message-content p {
margin: 0;
}
.chat-message-content p+p {
margin-top: 8px;
}
.chat-message-content ul,
.chat-message-content ol {
margin: 8px 0;
padding-left: 20px;
}
.chat-message-content li {
margin-bottom: 4px;
}
.chat-message-content strong {
font-weight: 600;
}
.chat-message.assistant .chat-message-content {

View File

@@ -1,6 +1,9 @@
import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { FiArrowLeft, FiSend, FiMic, FiMicOff } from 'react-icons/fi';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import aiService from '../../services/aiService';
import type { AIChatResponse, ConfirmationCard } from '../../types';
import './Chat.css';
@@ -266,7 +269,11 @@ export default function Chat() {
{msg.role === 'assistant' ? '🪙' : '👤'}
</div>
<div>
<div className="chat-message-content">{msg.content}</div>
<div className="chat-message-content">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{msg.content}
</ReactMarkdown>
</div>
{msg.confirmationCard && (
<div className="confirmation-card">