feat: Day 14-17 - Frontend Chat Interface completed

Frontend:
- Create MessageList component with streaming animation
- Create MessageInput component with @knowledge base support
- Create ModelSelector component (DeepSeek/Qwen/Gemini)
- Implement conversationApi with SSE streaming
- Update AgentChatPage integrate all components
- Add Markdown rendering (react-markdown + remark-gfm)
- Add code highlighting (react-syntax-highlighter)
- Add vite-env.d.ts for environment variables

Features:
- Real-time streaming output with cursor animation
- Markdown and code block rendering
- Model switching (DeepSeek-V3, Qwen3-72B, Gemini Pro)
- @Knowledge base selector (UI ready)
- Auto-scroll to bottom
- Shift+Enter for new line, Enter to send
- Beautiful message bubble design

Build: Frontend build successfully (7.94s, 1.9MB)

New Files:
- components/chat/MessageList.tsx (170 lines)
- components/chat/MessageList.css (150 lines)
- components/chat/MessageInput.tsx (145 lines)
- components/chat/MessageInput.css (60 lines)
- components/chat/ModelSelector.tsx (110 lines)
- components/chat/ModelSelector.css (35 lines)
- api/conversationApi.ts (170 lines)
- src/vite-env.d.ts (9 lines)

Total: ~850 lines of new code
This commit is contained in:
AI Clinical Dev Team
2025-10-10 20:52:30 +08:00
parent 8bd2b4fc54
commit 84bf1c86ab
11 changed files with 2939 additions and 119 deletions

View File

@@ -0,0 +1,80 @@
.message-input-container {
background: white;
border-top: 1px solid #f0f0f0;
padding: 16px 24px;
}
.selected-knowledge-bases {
margin-bottom: 12px;
padding: 8px 12px;
background: #f5f5f5;
border-radius: 6px;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message-input-wrapper {
position: relative;
}
.message-textarea {
resize: none;
padding: 12px;
font-size: 14px;
line-height: 1.6;
border-radius: 8px;
border: 1px solid #d9d9d9;
transition: all 0.3s;
}
.message-textarea:hover {
border-color: #40a9ff;
}
.message-textarea:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
.message-input-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
}
.message-input-hint {
margin-top: 8px;
font-size: 12px;
color: #8c8c8c;
display: flex;
gap: 12px;
}
.kb-hint {
color: #1890ff;
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-input-container {
padding: 12px 16px;
}
.message-input-toolbar {
flex-wrap: wrap;
gap: 8px;
}
}