mirror of
https://github.com/enricoros/big-AGI.git
synced 2026-05-11 14:10:15 -07:00
Enrico Ros
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { Box, styled, Textarea } from '@mui/joy';
|
|
|
|
import { lineHeightChatTextMd } from '~/common/app.theme';
|
|
|
|
|
|
const blocksTextStyleSx = {
|
|
// note: this will be used for non-blocks mainly (errors and other strings ourside of RenderXYX)
|
|
lineHeight: lineHeightChatTextMd,
|
|
|
|
// customize the text selection color (also in edit mode)
|
|
'&::selection': {
|
|
// backgroundColor: '#fc70c3',
|
|
backgroundColor: 'var(--joy-palette-primary-solidBg)',
|
|
color: 'var(--joy-palette-primary-solidColor)',
|
|
},
|
|
};
|
|
|
|
|
|
/**
|
|
* This style is reused by all the Fragments (BlocksRenderer being the Text one),
|
|
* contained within a singe Grid (1fr) in the Message component.
|
|
*/
|
|
export const BlocksContainer = styled(Box)({
|
|
// the parent is a Grid, and this takes up to the Grid's width
|
|
// - maxWidth: '100%' makes sure we don't x-scroll the whole chat window
|
|
// - width: '100%' would also maximize the fragment width to the containing grid even if smaller
|
|
// NOTE 1: we choose just `maxWidth` to allow the grid to place this towards the start/end of the message
|
|
// however see `ContentPartTextEdit` where we set the width to 100% as we need a large editor
|
|
// NOTE 2: after seeing html/code fragments smaller than the text fragments before them, we're back
|
|
// to using width: 100% to make sure the fragments are all the same width (we lose the alignment unfortunately)
|
|
width: '100%',
|
|
|
|
// enables children's x-scrollbars (clips to the Fragment, so sub-parts will stay within this)
|
|
overflowX: 'auto',
|
|
|
|
// text style
|
|
...blocksTextStyleSx,
|
|
});
|
|
|
|
/**
|
|
* Use this TextArea for block-like looks while editing.
|
|
*/
|
|
export const BlocksTextarea = styled(Textarea)({
|
|
// very important: back to a 100% width - the parent is a Grid - see why we need this in BlocksContainer
|
|
width: '100%',
|
|
|
|
// just shrink padding tiny bit
|
|
paddingBlock: '0.25rem',
|
|
// marginBlock: '-0.25rem',
|
|
|
|
// make the editing stand out a bit more
|
|
boxShadow: 'inset 1px 0px 3px -2px var(--joy-palette-warning-softColor)',
|
|
outline: '1px solid',
|
|
outlineColor: 'var(--joy-palette-warning-solidBg)',
|
|
|
|
// text style
|
|
...blocksTextStyleSx,
|
|
});
|