FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: markdown样式调整

Browse Source
This commit is contained in:
Junhui Chen 2025-08-03 17:37:16 +08:00
parent 061f4e07eb
commit f3882a4856
2 changed files with 123 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
components/chat/message-item/MessageBubble.tsx
View File

@ -1,46 +1,46 @@
import { getMessageText, isMessageContainMedia } from "@/types/ask";
import React from 'react'; import React from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
import MessageContent from './MessageContent'; import MessageContent from "./MessageContent";
import { getMessageText, isMessageContainMedia } from "@/types/ask";
interface MessageBubbleProps { interface MessageBubbleProps {
item: any; item: any;
isUser: boolean; isUser: boolean;
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: any }>>; setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: any }>>;
setCancel: React.Dispatch<React.SetStateAction<boolean>>; setCancel: React.Dispatch<React.SetStateAction<boolean>>;
cancel: boolean; cancel: boolean;
t: any; t: any;
setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>; setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>; setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
} }
const MessageBubble = ({ const MessageBubble = ({
item, item,
isUser, isUser,
setModalVisible, setModalVisible,
setCancel, setCancel,
cancel, cancel,
t, t,
setSelectedImages, setSelectedImages,
setModalDetailsVisible setModalDetailsVisible
}: MessageBubbleProps) => { }: MessageBubbleProps) => {
return ( return (
<View <View
className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble rounded-2xl'} border-0 ${!isUser && isMessageContainMedia(item) ? '!rounded-t-3xl !rounded-b-2xl' : '!rounded-3xl'} px-4 py-3`} className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble rounded-2xl'} border-0 ${!isUser && isMessageContainMedia(item) ? '!rounded-t-3xl !rounded-b-2xl' : '!rounded-3xl'} px-3`}
style={{ marginRight: getMessageText(item) == "keepSearchIng" ? 0 : isUser ? 0 : 10 }} style={{ marginRight: getMessageText(item) == "keepSearchIng" ? 0 : isUser ? 0 : 10 }}
> >
<MessageContent <MessageContent
item={item} item={item}
isUser={isUser} isUser={isUser}
setModalVisible={setModalVisible} setModalVisible={setModalVisible}
setCancel={setCancel} setCancel={setCancel}
cancel={cancel} cancel={cancel}
t={t} t={t}
setSelectedImages={setSelectedImages} setSelectedImages={setSelectedImages}
setModalDetailsVisible={setModalDetailsVisible} setModalDetailsVisible={setModalDetailsVisible}
/> />
</View> </View>
); );
}; };
export default React.memo(MessageBubble); export default React.memo(MessageBubble);

95
components/chat/message-item/MessageContent.tsx
View File

@ -1,9 +1,9 @@
import MoreSvg from "@/assets/icons/svg/more.svg"; import MoreSvg from "@/assets/icons/svg/more.svg";
import { ContentPart, getMessageText, isMessageContainMedia } from "@/types/ask"; import { ContentPart, getMessageText, isMessageContainMedia } from "@/types/ask";
import { MarkdownTextInput, parseExpensiMark } from '@expensify/react-native-live-markdown';
import { TFunction } from 'i18next'; import { TFunction } from 'i18next';
import React from 'react'; import React from 'react';
import { TouchableOpacity, View } from 'react-native'; import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
import Markdown from "react-native-markdown-display";
import Loading from '../../ask/threeCircle'; import Loading from '../../ask/threeCircle';
import { ThemedText } from "../../ThemedText"; import { ThemedText } from "../../ThemedText";
import MediaGrid from './MediaGrid'; import MediaGrid from './MediaGrid';
@ -19,7 +19,85 @@ interface MessageContentProps {
setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>; setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
} }
const chineseMarkdownStyle = StyleSheet.create({
// General body text
body: {
fontSize: 14,
lineHeight: 24.5, // 1.75 * fontSize for better readability
color: '#333',
},
// Headings
heading1: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 10,
marginBottom: 10,
lineHeight: 36,
borderBottomWidth: 1,
borderColor: '#eee',
paddingBottom: 5,
},
heading2: {
fontSize: 22,
fontWeight: 'bold',
marginTop: 8,
marginBottom: 8,
lineHeight: 33,
},
heading3: {
fontSize: 20,
fontWeight: 'bold',
marginTop: 6,
marginBottom: 6,
lineHeight: 30,
},
// Paragraph: Add vertical margin for better separation
paragraph: {
marginTop: 10,
marginBottom: 10,
},
// Lists
bullet_list_icon: {
fontSize: 16,
lineHeight: 28,
marginRight: 8,
},
list_item: {
flexDirection: 'row',
alignItems: 'flex-start',
marginBottom: 8,
},
// Code blocks
code_block: {
fontFamily: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
backgroundColor: '#f5f5f5',
padding: 15,
borderRadius: 4,
marginVertical: 10,
fontSize: 14,
lineHeight: 21,
},
// Blockquote
blockquote: {
backgroundColor: '#f0f0f0',
borderLeftColor: '#ccc',
borderLeftWidth: 4,
paddingHorizontal: 15,
paddingVertical: 10,
marginVertical: 10,
},
// Link
link: {
color: '#007aff', // Standard blue link color
textDecorationLine: 'underline',
},
// Horizontal Rule
hr: {
backgroundColor: '#e0e0e0',
height: 1,
marginVertical: 15,
},
});
const MessageContent = ({ const MessageContent = ({
item, item,
@ -32,14 +110,15 @@ const MessageContent = ({
setModalDetailsVisible setModalDetailsVisible
}: MessageContentProps) => { }: MessageContentProps) => {
return ( return (
<View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'}`}> <View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'} rounded-2xl`}>
{getMessageText(item) == "keepSearchIng" && !isUser ? ( {getMessageText(item) == "keepSearchIng" && !isUser ? (
<Loading /> <Loading />
) : ( ) : (
<MarkdownTextInput <View className="px-2">
value={getMessageText(item)} <Markdown style={chineseMarkdownStyle}>
parser={parseExpensiMark} {getMessageText(item)}
/> </Markdown>
</View>
)} )}