feat: 实现AI聊天页面,支持文本和语音输入、确认卡片及会话管理。
This commit is contained in:
1465
package-lock.json
generated
1465
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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",
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user