lanxiu/agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

qwe
Some checks failed
Docker Build and Deploy / build-and-push (push) Failing after 15s
Details
Docker Build and Deploy / deploy-hk (push) Has been skipped
Details

Browse Source
This commit is contained in:
zch1234qq
2025-10-20 23:41:07 +08:00
parent 62c08e7132
commit b71e8502ba
8 changed files with 92 additions and 6091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
app/components/Message.tsx
View File

@ -1,9 +1,5 @@
import * as React from 'react';
const { useRef } = React;
import { Box, Paper, Typography, Avatar, useMediaQuery, useTheme, Theme } from '@mui/material';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
import React, { useRef } from 'react';
import { Box, Paper, Typography, Avatar, useMediaQuery, useTheme } from '@mui/material';
import type { Message as MessageType } from '../types/types';
interface MessageProps {
@ -24,6 +20,7 @@ const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
return (
<Box
key={message.id}
display="flex"
marginBottom={2}
justifyContent={isUser ? "flex-end" : "flex-start"}
@ -71,60 +68,12 @@ const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
}}
>
<div style={{ lineHeight: 1.6 }}>
{isUser ? (
// 用户消息仍然使用普通文本展示
message.content.split('\n').map((line: string, index: number) => (
<React.Fragment key={index}>
{line}
{index < message.content.split('\n').length - 1 && <br />}
</React.Fragment>
))
) : (
// 大模型回复使用markdown格式展示
<ReactMarkdown
rehypePlugins={[rehypeRaw]}
remarkPlugins={[remarkGfm]}
components={{
// 自定义标题样式
h1: (props: React.ComponentProps<'h1'>) => (
<h1 style={{ fontSize: '1.4rem', fontWeight: 'bold', margin: '12px 0 8px 0' }} {...props} />
),
h2: (props: React.ComponentProps<'h2'>) => (
<h2 style={{ fontSize: '1.2rem', fontWeight: 'bold', margin: '10px 0 6px 0' }} {...props} />
),
h3: (props: React.ComponentProps<'h3'>) => (
<h3 style={{ fontSize: '1.1rem', fontWeight: 'bold', margin: '8px 0 4px 0' }} {...props} />
),
// 自定义列表样式
ul: (props: React.ComponentProps<'ul'>) => (
<ul style={{ paddingLeft: '20px', margin: '6px 0' }} {...props} />
),
ol: (props: React.ComponentProps<'ol'>) => (
<ol style={{ paddingLeft: '20px', margin: '6px 0' }} {...props} />
),
li: (props: React.ComponentProps<'li'>) => (
<li style={{ margin: '4px 0' }} {...props} />
),
// 自定义代码块样式
code: (props: React.ComponentProps<'code'>) => (
<code style={{ backgroundColor: '#f5f5f5', padding: '2px 4px', borderRadius: '3px', fontFamily: 'monospace' }} {...props} />
),
pre: (props: React.ComponentProps<'pre'>) => (
<pre style={{ backgroundColor: '#f5f5f5', padding: '12px', borderRadius: '6px', overflowX: 'auto', fontFamily: 'monospace', fontSize: '0.9rem' }} {...props} />
),
// 自定义引用样式
blockquote: (props: React.ComponentProps<'blockquote'>) => (
<blockquote style={{ borderLeft: '4px solid #ccc', margin: '10px 0', paddingLeft: '12px', color: '#666' }} {...props} />
),
// 自定义链接样式
a: (props: React.ComponentProps<'a'>) => (
<a style={{ color: theme.palette.primary.main, textDecoration: 'underline' }} {...props} />
)
}}
>
{message.content}
</ReactMarkdown>
)}
{message.content.split('\n').map((line, index) => (
<React.Fragment key={index}>
{line}
{index < message.content.split('\n').length - 1 && <br />}
</React.Fragment>
))}
</div>
<Typography

2
app/page.tsx
View File

@ -32,7 +32,7 @@ const welcomeMessage: MessageType = {
const ChatInterface: React.FC = () => {
// 状态管理
const [messages, setMessages] = useState<MessageType[]>([welcomeMessage]);
const [messages, setMessages] = useState<MessageType[]>([]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isConfigured, setIsConfigured] = useState(false);