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-confetti": "^6.4.0",
|
||||||
"react-dom": "^19.2.0",
|
"react-dom": "^19.2.0",
|
||||||
"react-icons": "^5.5.0",
|
"react-icons": "^5.5.0",
|
||||||
|
"react-markdown": "^10.1.0",
|
||||||
"react-router-dom": "^7.12.0",
|
"react-router-dom": "^7.12.0",
|
||||||
"react-use": "^17.6.0"
|
"react-use": "^17.6.0",
|
||||||
|
"remark-gfm": "^4.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.39.1",
|
"@eslint/js": "^9.39.1",
|
||||||
|
|||||||
@@ -108,7 +108,29 @@
|
|||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
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 {
|
.chat-message.assistant .chat-message-content {
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
import { useState, useRef, useEffect } from 'react';
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { FiArrowLeft, FiSend, FiMic, FiMicOff } from 'react-icons/fi';
|
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 aiService from '../../services/aiService';
|
||||||
import type { AIChatResponse, ConfirmationCard } from '../../types';
|
import type { AIChatResponse, ConfirmationCard } from '../../types';
|
||||||
import './Chat.css';
|
import './Chat.css';
|
||||||
@@ -266,7 +269,11 @@ export default function Chat() {
|
|||||||
{msg.role === 'assistant' ? '🪙' : '👤'}
|
{msg.role === 'assistant' ? '🪙' : '👤'}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="chat-message-content">{msg.content}</div>
|
<div className="chat-message-content">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||||
|
{msg.content}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
|
||||||
{msg.confirmationCard && (
|
{msg.confirmationCard && (
|
||||||
<div className="confirmation-card">
|
<div className="confirmation-card">
|
||||||
|
|||||||
Reference in New Issue
Block a user