更新前端展示

Author: User

README.md

@@ -1285,19 +1285,37 @@ GET http://localhost:8000/sessions/{session_id}/summary
 
 ### 首页界面
 
-![首页界面](image/首页界面.png)
+<p align="center">
+  <img src="image/首页界面.png" alt="首页界面" width="800"/>
+</p>
 
 现代化的聊天界面设计，包含：
-- 情感标签可视化
-- 建议按钮快速回复
-- 流畅的动画效果
-- 响应式设计，支持移动端
+- 🎭 **情感标签可视化** - 实时显示AI识别的情感状态
+- 💬 **建议按钮快速回复** - 智能推荐回复选项
+- ⌨️ **打字机效果** - 根据情绪动态调整打字速度和光标颜色
+- 🎨 **流畅的动画效果** - Framer Motion 驱动的交互动画
+- 📱 **响应式设计** - 完美支持移动端访问
+- 🔄 **会话管理** - 支持多会话切换和历史记录
 
 ### AI形象定制
 
-![AI形象定制](image/AI形象定制.png)
+<p align="center">
+  <img src="image/AI形象定制.png" alt="AI形象定制" width="800"/>
+</p>
 
-个性化AI形象定制功能，让AI陪伴更加生动有趣。
+个性化AI形象定制功能，支持：
+- 🤖 **AI性格设置** - 选择温柔、活泼、专业等不同性格风格
+- 💬 **对话风格** - 调整回复长度、语气和表达方式
+- ⚡ **响应速度** - 自定义打字机效果速度
+- 🎨 **主题定制** - 个性化界面主题和配色
+- 📝 **偏好记忆** - 自动保存用户偏好设置
+
+### 侧边栏功能
+
+- 📜 **会话历史** - 查看和管理历史对话
+- ➕ **新建会话** - 一键开启新对话
+- ⚙️ **设置入口** - 快速访问个性化设置
+- 📊 **情感趋势** - 查看情感变化统计
 
 ## 🔮 未来规划
 

frontend/src/components/ChatContainer.js

@@ -1,11 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import { Heart, User, Bot, Loader2, Paperclip, Send, Link, ExternalLink, X, MessageSquarePlus } from 'lucide-react';
+import { User, Bot, Loader2, Paperclip, Send, Link, ExternalLink, X, Sparkles, Mic, PenLine, Image, Music, Languages, Presentation, MoreHorizontal } from 'lucide-react';
 import {
   ChatContainer as ChatContainerStyled,
-  Header,
-  Title,
-  Subtitle,
   MessagesContainer,
   MessageBubble,
   Avatar,
@@ -19,9 +16,15 @@ import {
   SuggestionChip,
   WelcomeMessage,
   LoadingIndicator,
-  InputContainer,
-  InputRow,
+  InputContainer
+} from '../styles';
+import {
+  InputWrapper,
+  InputBox,
   MessageInput,
+  InputActions,
+  LeftActions,
+  RightActions,
   AttachmentButton,
   SendButton,
   FileInput,
@@ -31,13 +34,28 @@ import {
   RemoveAttachmentButton,
   URLPreview,
   URLText,
-  URLButton
-} from '../styles';
+  URLButton,
+  FeatureButton,
+  QuickActions,
+  QuickActionButton
+} from '../styles/input';
 import { emotionLabels } from '../constants/emotions';
 import { formatTimestamp, formatFileSize } from '../utils/formatters';
 import TypewriterComponent from './TypewriterText';
 import { getFileIcon } from '../utils/fileUtils';
 
+// 获取问候语
+const getGreeting = () => {
+  const hour = new Date().getHours();
+  if (hour < 6) return '夜深了';
+  if (hour < 9) return '早上好';
+  if (hour < 12) return '上午好';
+  if (hour < 14) return '中午好';
+  if (hour < 18) return '下午好';
+  if (hour < 22) return '晚上好';
+  return '夜深了';
+};
+
 const ChatContainer = ({
   messages,
   isLoading,
@@ -59,49 +77,52 @@ const ChatContainer = ({
   onSuggestionClick,
   onOpenFeedbackModal
 }) => {
+  const [deepThinkActive, setDeepThinkActive] = useState(false);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSendMessage();
+    }
+    if (onTabNavigation) {
+      onTabNavigation(e);
+    }
+  };
+
   return (
     <ChatContainerStyled
-      initial={{ opacity: 0, x: 20 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ duration: 0.5 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
     >
-      <Header>
-        <Title>
-          <Heart size={24} />
-          情感聊天机器人
-        </Title>
-        <Subtitle>温暖陪伴，理解倾听</Subtitle>
-      </Header>
-
       <MessagesContainer>
         <AnimatePresence initial={false}>
           {messages.length === 0 ? (
             <WelcomeMessage
               key="welcome"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0 }}
-              transition={{ delay: 0.5 }}
+              transition={{ delay: 0.2 }}
             >
-              <h3>👋 你好！我是你的情感支持伙伴</h3>
+              <h3>{getGreeting()}，小草</h3>
               <p>
-                我在这里倾听你的心声，理解你的感受。<br/>
-                无论是开心、难过、焦虑还是困惑，我都愿意陪伴你。<br/>
-                请随意分享你的想法和感受吧！
+                我是你的情感支持伙伴，随时倾听你的心声。<br/>
+                无论开心、难过还是困惑，都可以和我聊聊。
               </p>
             </WelcomeMessage>
           ) : (
             messages.map((message) => (
               <MessageBubble
                 key={message.id}
                 isUser={message.role === 'user'}
-                initial={{ opacity: 0, y: 20 }}
+                initial={{ opacity: 0, y: 15 }}
                 animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -20 }}
-                transition={{ duration: 0.3 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
               >
                 <Avatar isUser={message.role === 'user'}>
-                  {message.role === 'user' ? <User size={20} /> : <Bot size={20} />}
+                  {message.role === 'user' ? <User size={18} /> : <Bot size={18} />}
                 </Avatar>
                 <MessageWrapper>
                   <MessageContent 
@@ -111,9 +132,9 @@ const ChatContainer = ({
                     {message.role === 'assistant' && !message.isHistory ? (
                       <TypewriterComponent
                         text={message.content}
-                        speed={message.emotion === 'sad' ? 40 : message.emotion === 'angry' ? 20 : message.emotion === 'happy' ? 25 : 30}
+                        speed={30}
                         showCursor={true}
-                        cursorColor={message.emotion === 'sad' ? '#74b9ff' : message.emotion === 'angry' ? '#ff7675' : message.emotion === 'happy' ? '#00b894' : '#333'}
+                        cursorColor="#6366f1"
                         isUser={false}
                       />
                     ) : (
@@ -132,10 +153,9 @@ const ChatContainer = ({
                     <FeedbackButtons>
                       <FeedbackButton
                         onClick={() => onOpenFeedbackModal(message)}
-                        whileHover={{ scale: 1.05 }}
-                        whileTap={{ scale: 0.95 }}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
                       >
-                        <MessageSquarePlus size={14} />
                         反馈
                       </FeedbackButton>
                     </FeedbackButtons>
@@ -150,9 +170,9 @@ const ChatContainer = ({
           <LoadingIndicator
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
+            exit={{ opacity: 0 }}
           >
-            <Loader2 size={18} className="spinner" />
+            <Loader2 size={16} className="spinner" />
             <span>正在思考中</span>
             <span className="dots">
               <span>.</span>
@@ -168,10 +188,10 @@ const ChatContainer = ({
               {suggestions.map((suggestion, index) => (
                 <SuggestionChip
                   key={index}
-                  initial={{ opacity: 0, scale: 0.8 }}
+                  initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                  transition={{ delay: index * 0.1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ delay: index * 0.05 }}
                   onClick={() => onSuggestionClick(suggestion)}
                 >
                   {suggestion}
@@ -192,7 +212,7 @@ const ChatContainer = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
           >
-            <Link size={16} />
+            <Link size={14} />
             <URLText>{detectedURLs[0]}</URLText>
             <URLButton onClick={() => window.open(detectedURLs[0], '_blank')}>
               <ExternalLink size={14} />
@@ -207,15 +227,15 @@ const ChatContainer = ({
               {attachments.map((attachment) => (
                 <AttachmentItem
                   key={attachment.id}
-                  initial={{ opacity: 0, scale: 0.8 }}
+                  initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
                 >
                   <AttachmentIcon>
                     {getFileIcon(attachment.type)}
                   </AttachmentIcon>
                   <span>{attachment.name}</span>
-                  <span>({formatFileSize(attachment.size)})</span>
+                  <span style={{ color: '#999' }}>({formatFileSize(attachment.size)})</span>
                   <RemoveAttachmentButton
                     onClick={() => onRemoveAttachment(attachment.id)}
                   >
@@ -227,45 +247,62 @@ const ChatContainer = ({
           </AttachmentsPreview>
         )}
 
-        <InputRow>
-          <MessageInput
-            ref={inputRef}
-            type="text"
-            value={inputValue}
-            onChange={onInputChange}
-            onKeyPress={onKeyPress}
-            onKeyDown={onTabNavigation}
-            placeholder="分享你的想法和感受..."
-            disabled={isLoading}
-            aria-label="消息输入框"
-            aria-describedby="input-hint"
-          />
-          <AttachmentButton
-            ref={attachmentButtonRef}
-            onClick={() => fileInputRef.current?.click()}
-            disabled={isLoading}
-            onKeyDown={onTabNavigation}
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            aria-label="添加附件"
-            title="添加附件 (图片、PDF、文档)"
-          >
-            <Paperclip size={20} />
-          </AttachmentButton>
-          <SendButton
-            ref={sendButtonRef}
-            onClick={onSendMessage}
-            disabled={(!inputValue.trim() && attachments.length === 0) || isLoading}
-            onKeyDown={onTabNavigation}
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            aria-label="发送消息"
-            aria-disabled={(!inputValue.trim() && attachments.length === 0) || isLoading}
-            title="发送消息 (Enter)"
-          >
-            <Send size={20} />
-          </SendButton>
-        </InputRow>
+        <InputWrapper>
+          <InputBox>
+            <MessageInput
+              ref={inputRef}
+              value={inputValue}
+              onChange={onInputChange}
+              onKeyDown={handleKeyDown}
+              placeholder="发消息或输入 / 选择技能"
+              disabled={isLoading}
+              rows={1}
+            />
+            <InputActions>
+              <LeftActions>
+                <AttachmentButton
+                  ref={attachmentButtonRef}
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isLoading}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  title="添加附件"
+                >
+                  <Paperclip size={18} />
+                </AttachmentButton>
+                <FeatureButton
+                  active={deepThinkActive}
+                  onClick={() => setDeepThinkActive(!deepThinkActive)}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <Sparkles size={14} />
+                  深度思考
+                </FeatureButton>
+              </LeftActions>
+              <RightActions>
+                <AttachmentButton
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  title="语音输入"
+                >
+                  <Mic size={18} />
+                </AttachmentButton>
+                <SendButton
+                  ref={sendButtonRef}
+                  onClick={onSendMessage}
+                  disabled={(!inputValue.trim() && attachments.length === 0) || isLoading}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  title="发送消息"
+                >
+                  <Send size={16} />
+                </SendButton>
+              </RightActions>
+            </InputActions>
+          </InputBox>
+
+        </InputWrapper>
 
         <FileInput
           ref={fileInputRef}

frontend/src/components/FeedbackModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { X } from 'lucide-react';
 import {
   ModalOverlay,

frontend/src/components/HistoryManagementModal.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Search, Trash2, RotateCcw } from 'lucide-react';
+import { X, Search, Trash2 } from 'lucide-react';
 import ChatAPI from '../services/ChatAPI';
 import { formatRelativeTime } from '../utils/formatters';
 import {