qwe

2025-10-21 09:17:52 +08:00
parent ecc8347146
commit 4afe6529fb
7 changed files with 1529 additions and 32 deletions
--- a/app/components/ChatMessage.tsx
+++ b/app/components/ChatMessage.tsx
@ -2,11 +2,11 @@ import React from 'react';

 interface ChatMessageProps {
  content: string;
-  sender: 'user' | 'bot';
+  role: 'user' | 'assistant';
  timestamp: Date;
 }

-export const ChatMessage: React.FC<ChatMessageProps> = ({ content, sender, timestamp }) => {
+export const ChatMessage: React.FC<ChatMessageProps> = ({ content, role, timestamp }) => {
  // 格式化时间戳
  const formattedTime = timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  
@ -14,14 +14,14 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({ content, sender, times
  const messageParts = content.split('\n');

  return (
-    <div className={`flex items-end mb-4 ${sender === 'user' ? 'justify-end' : 'justify-start'}`}>
-      {sender === 'bot' && (
+    <div className={`flex items-end mb-4 ${role === 'user' ? 'justify-end' : 'justify-start'}`}>
+      {role === 'assistant' && (
        <div className="user-avatar mr-2">
          <span>AI</span>
        </div>
      )}
      
-      <div className={`p-3 rounded-lg ${sender === 'user' ? 'message-user' : 'message-bot'}`}>
+      <div className={`p-3 rounded-lg ${role === 'user' ? 'message-user' : 'message-bot'}`}>
        {messageParts.map((part, index) => (
          <React.Fragment key={index}>
            {part}
@ -30,7 +30,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({ content, sender, times
        ))}
      </div>
      
-      {sender === 'user' && (
+      {role === 'user' && (
        <div className="user-avatar ml-2">
          <span>我</span>
        </div>
--- a/app/components/Message.tsx
+++ b/app/components/Message.tsx
@ -1,5 +1,10 @@
 import React, { useRef } from 'react';
 import { Box, Paper, Typography, Avatar, useMediaQuery, useTheme } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+// @ts-ignore  // 临时忽略类型声明缺失，等待官方类型包或自定义声明
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+// @ts-ignore
+import { dark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import type { Message as MessageType } from '../types/types';

 interface MessageProps {
@ -8,7 +13,7 @@ interface MessageProps {
 }

 const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
-  const isUser = message.sender === 'user';
+  const isUser = message.role === 'user';
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const paperRef = useRef<HTMLDivElement>(null);
@ -67,14 +72,49 @@ const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
            }
          }}
        >
-          <div style={{ lineHeight: 1.6 }}>
-            {message.content.split('\n').map((line, index) => (
-              <React.Fragment key={index}>
-                {line}
-                {index < message.content.split('\n').length - 1 && <br />}
-              </React.Fragment>
-            ))}
-          </div>
+          <ReactMarkdown
+            components={{
+//@ts-ignore  // 临时忽略类型声明缺失，等待官方类型包或自定义声明
+              code({ inline, className, children, ...props }) {
+                const match = /language-(\w+)/.exec(className || '');
+                return !inline && match ? (
+                  <SyntaxHighlighter
+                    style={dark}
+                    language={match[1]}
+                    PreTag="div"
+                    {...props}
+                  >
+                    {String(children).replace(/\n$/, '')}
+                  </SyntaxHighlighter>
+                ) : (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                );
+              },
+              p: ({ ...props }) => <Typography variant="body1" paragraph sx={{ margin: '0.5em 0' }} {...props} />,
+              h1: ({ ...props }) => <Typography variant="h4" gutterBottom {...props} />,
+              h2: ({ ...props }) => <Typography variant="h5" gutterBottom {...props} />,
+              h3: ({ ...props }) => <Typography variant="h6" gutterBottom {...props} />,
+              ul: ({ ...props }) => <ul style={{ paddingLeft: '1.5em', margin: '0.5em 0' }} {...props} />,
+              ol: ({ ...props }) => <ol style={{ paddingLeft: '1.5em', margin: '0.5em 0' }} {...props} />,
+              li: ({ ...props }) => <li style={{ margin: '0.25em 0' }} {...props} />,
+              a: ({ ...props }) => <a style={{ color: theme.palette.primary.main, textDecoration: 'underline' }} {...props} />,
+              blockquote: ({ ...props }) => (
+                <blockquote style={{ 
+                  borderLeft: `4px solid ${theme.palette.divider}`,
+                  marginLeft: 0,
+                  paddingLeft: '1em',
+                  fontStyle: 'italic',
+                  color: theme.palette.text.secondary
+                }} {...props} />
+              ),
+              strong: ({ ...props }) => <strong style={{ fontWeight: 600 }} {...props} />,
+              em: ({ ...props }) => <em style={{ fontStyle: 'italic' }} {...props} />
+            }}
+          >
+            {message.content}
+          </ReactMarkdown>
          
          <Typography 
            variant="caption" 
--- a/app/page.tsx
+++ b/app/page.tsx
@ -26,7 +26,8 @@ import { Sidebar } from './components/Sidebar';
 const welcomeMessage: MessageType = {
  id: '1',
  content: '终于等到你了！我是你的爆款文案策划师，开始之前，我需要你提供一些简单的信息，让我能给你更有针对性的运营方案。\n1. 你的行业/背调/产品/服务（即使没有现有产品，可以说想要的产品/服务）\n2. 你的目标用户（根据你从业经验描绘的目标用户）',
-  sender: 'bot',
+  role: 'assistant',
+  content_type: 'text',
  timestamp: new Date(Date.now() - 60000),
 };

@ -85,7 +86,8 @@ const ChatInterface: React.FC = () => {
    const userMessage: MessageType = {
      id: Date.now().toString(),
      content: input,
-      sender: 'user',
+      role: 'user',
+      content_type: 'text',
      timestamp: new Date(),
    };

@ -107,12 +109,12 @@ const ChatInterface: React.FC = () => {
          // 更新消息列表，找到临时消息或创建新消息
          setMessages(prev => {
            // 检查是否已存在临时bot消息
-            const hasTempMessage = prev.some(msg => msg.id === tempBotMessageId && msg.sender === 'bot');
+            const hasTempMessage = prev.some(msg => msg.id === tempBotMessageId && msg.role === 'assistant');
            
            if (hasTempMessage) {
              // 更新已存在的临时消息
              return prev.map(msg => 
-                msg.id === tempBotMessageId && msg.sender === 'bot' 
+                msg.id === tempBotMessageId && msg.role === 'assistant' 
                  ? { ...msg, content: partialText }
                  : msg
              );
@ -121,7 +123,8 @@ const ChatInterface: React.FC = () => {
              const tempBotMessage: MessageType = {
                id: tempBotMessageId,
                content: partialText,
-                sender: 'bot',
+                role: 'assistant',
+                content_type: 'text',
                timestamp: new Date(),
              };
              return [...prev, tempBotMessage];
@ -137,7 +140,8 @@ const ChatInterface: React.FC = () => {
        const mockBotMessage: MessageType = {
          id: (Date.now() + 1).toString(),
          content: '您的消息已收到！这是一条智能回复，为您提供专业的文案建议。\n\n根据您的需求，我可以为您提供：\n- 吸引人的标题创意\n- 产品描述优化\n- 社交媒体文案\n- 广告标语设计\n\n请继续告诉我更多关于您的产品或服务信息，我会提供更有针对性的建议！',
-          sender: 'bot',
+          role: 'assistant',
+          content_type: 'text',
          timestamp: new Date(),
        };
        setMessages(prev => [...prev, mockBotMessage]);
@ -149,7 +153,8 @@ const ChatInterface: React.FC = () => {
      const errorMessage: MessageType = {
        id: (Date.now() + 2).toString(),
        content: `抱歉，处理您的请求时遇到了问题。请稍后再试，或刷新页面重试。`,
-        sender: 'bot',
+        role: 'assistant',
+        content_type: 'text',
        timestamp: new Date(),
      };
      setMessages(prev => [...prev, errorMessage]);
--- a/app/service/cozeService.ts
+++ b/app/service/cozeService.ts
@ -168,7 +168,8 @@ class CozeService {
        const botMessage: Message = {
          id: messageId,
          content: fullContent,
-          sender: 'bot',
+          role: 'assistant',
+          content_type: 'text',
          timestamp: new Date()
        };
        
@ -218,7 +219,8 @@ class CozeService {
    return {
      id: Date.now().toString(),
      content: mockContent,
-      sender: 'bot',
+      role: 'assistant',
+      content_type: 'text',
      timestamp: new Date()
    };
  }
--- a/app/types/types.ts
+++ b/app/types/types.ts
@ -6,17 +6,15 @@ export interface Message {
   * 消息唯一标识符
   */
  id: string;
-  
  /**
   * 消息内容
   */
  content: string;
-  
+  content_type: 'text'|'card';
  /**
   * 发送者类型
   */
-  sender: 'user' | 'bot';
-  
+  role: 'user' | 'assistant';
  /**
   * 消息时间戳
   */
@ -31,7 +29,6 @@ export interface CozeConfig {
   * Coze API 密钥
   */
  apiKey: string;
-  
  /**
   * Bot ID
   */
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -16,7 +16,9 @@
    "@mui/material": "^7.3.4",
    "next": "15.5.5",
    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.6"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",