evandro
2a294f1f87
MessageBubble CC 19 -> below 10. The fence and indented code block rules were identical and are now one CodeBlock component; the Markdown style map lives in markdownStyles.ts. Adds characterization tests for the bubble (roles, actions visibility, edited badge, copy feedback).
100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import { useThemeColor } from '@/hooks/useThemeColor';
|
|
|
|
type ThemeColors = ReturnType<typeof useThemeColor>;
|
|
|
|
/** Style map for the Markdown renderer, derived from the active theme colours. */
|
|
export function createMarkdownStyles(colors: ThemeColors) {
|
|
return {
|
|
body: {
|
|
fontSize: 15,
|
|
lineHeight: 22,
|
|
color: colors.messageAssistantText,
|
|
},
|
|
strong: {
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
},
|
|
em: {
|
|
fontStyle: 'italic',
|
|
},
|
|
code_inline: {
|
|
backgroundColor: colors.backgroundColor,
|
|
color: colors.text,
|
|
paddingHorizontal: 5,
|
|
paddingVertical: 1,
|
|
borderRadius: 4,
|
|
fontSize: 13,
|
|
fontFamily: 'monospace',
|
|
},
|
|
fence: {
|
|
backgroundColor: colors.inputBg,
|
|
borderColor: colors.border,
|
|
borderWidth: 1,
|
|
color: colors.text,
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
fontSize: 13,
|
|
fontFamily: 'monospace',
|
|
marginVertical: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
code_block: {
|
|
backgroundColor: colors.inputBg,
|
|
color: colors.text,
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
fontSize: 13,
|
|
fontFamily: 'monospace',
|
|
marginVertical: 8,
|
|
},
|
|
blockquote: {
|
|
borderLeftWidth: 3,
|
|
borderLeftColor: colors.border,
|
|
paddingLeft: 12,
|
|
marginVertical: 4,
|
|
color: colors.textMuted,
|
|
},
|
|
bullet_list: {
|
|
marginVertical: 4,
|
|
},
|
|
ordered_list: {
|
|
marginVertical: 4,
|
|
},
|
|
list_item: {
|
|
marginVertical: 2,
|
|
color: colors.messageAssistantText,
|
|
},
|
|
heading1: {
|
|
fontSize: 22,
|
|
fontWeight: '700',
|
|
marginVertical: 8,
|
|
color: colors.text,
|
|
},
|
|
heading2: {
|
|
fontSize: 19,
|
|
fontWeight: '700',
|
|
marginVertical: 6,
|
|
color: colors.text,
|
|
},
|
|
heading3: {
|
|
fontSize: 17,
|
|
fontWeight: '600',
|
|
marginVertical: 4,
|
|
color: colors.text,
|
|
},
|
|
link: {
|
|
color: '#3B82F6',
|
|
textDecorationLine: 'underline',
|
|
},
|
|
hr: {
|
|
backgroundColor: colors.border,
|
|
height: 1,
|
|
marginVertical: 12,
|
|
},
|
|
paragraph: {
|
|
marginVertical: 2,
|
|
},
|
|
// The Markdown renderer's style types do not accept every RN style key literal.
|
|
} as any;
|
|
}
|