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 { View } from 'react-native';
import MessageContent from './MessageContent';
import { getMessageText, isMessageContainMedia } from "@/types/ask";
import MessageContent from "./MessageContent";
interface MessageBubbleProps {
item: any;
isUser: boolean;
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: any }>>;
setCancel: React.Dispatch<React.SetStateAction<boolean>>;
cancel: boolean;
t: any;
setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
item: any;
isUser: boolean;
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: any }>>;
setCancel: React.Dispatch<React.SetStateAction<boolean>>;
cancel: boolean;
t: any;
setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
}
const MessageBubble = ({
item,
isUser,
setModalVisible,
setCancel,
cancel,
t,
setSelectedImages,
setModalDetailsVisible
const MessageBubble = ({
item,
isUser,
setModalVisible,
setCancel,
cancel,
t,
setSelectedImages,
setModalDetailsVisible
}: MessageBubbleProps) => {
return (
<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`}
style={{ marginRight: getMessageText(item) == "keepSearchIng" ? 0 : isUser ? 0 : 10 }}
>
<MessageContent
item={item}
isUser={isUser}
setModalVisible={setModalVisible}
setCancel={setCancel}
cancel={cancel}
t={t}
setSelectedImages={setSelectedImages}
setModalDetailsVisible={setModalDetailsVisible}
/>
</View>
);
return (
<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-3`}
style={{ marginRight: getMessageText(item) == "keepSearchIng" ? 0 : isUser ? 0 : 10 }}
>
<MessageContent
item={item}
isUser={isUser}
setModalVisible={setModalVisible}
setCancel={setCancel}
cancel={cancel}
t={t}
setSelectedImages={setSelectedImages}
setModalDetailsVisible={setModalDetailsVisible}
/>
</View>
);
};
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 { ContentPart, getMessageText, isMessageContainMedia } from "@/types/ask";
import { MarkdownTextInput, parseExpensiMark } from '@expensify/react-native-live-markdown';
import { TFunction } from 'i18next';
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 { ThemedText } from "../../ThemedText";
import MediaGrid from './MediaGrid';
@ -19,7 +19,85 @@ interface MessageContentProps {
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 = ({
item,
@ -32,14 +110,15 @@ const MessageContent = ({
setModalDetailsVisible
}: MessageContentProps) => {
return (
<View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'}`}>
<View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'} rounded-2xl`}>
{getMessageText(item) == "keepSearchIng" && !isUser ? (
<Loading />
) : (
<MarkdownTextInput
value={getMessageText(item)}
parser={parseExpensiMark}
/>
<View className="px-2">
<Markdown style={chineseMarkdownStyle}>
{getMessageText(item)}
</Markdown>
</View>
)}