Skip to content

fix(math-inline): adjust response template style PD-5665 #2960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CarlaCostea merged 1 commit into from
Mar 19, 2026
Merged

fix(math-inline): adjust response template style PD-5665 #2960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 59 additions & 70 deletions packages/math-inline/configure/src/general-config-block.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,50 @@ const SelectContainer = styled(InputContainer)(({ theme }) => ({
const ResponseTemplate = styled('div')({
display: 'flex',
flexDirection: 'column',

'.block-container': {
margin: '8px',
display: 'inline-flex',
border: '2px solid grey',

'.mq-cursor': {
visibility: 'hidden',
},
},
'.block-container-generic': {
margin: '4px',
},

'.block-response': {
flex: 2,
color: 'grey',
background: '#f5f5f5',
fontSize: '0.8rem',
padding: '4px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRight: '2px solid grey',
},
'.block-response-generic': {
borderRight: 0,
},

'.response-editor ': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
maxWidth: '900px',
height: 'auto',
minHeight: '130px',
textAlign: 'left',
padding: '8px',
},

'.math-toolbar': {
maxWidth: '900px',
},
});

const StyledTooltip = styled(Tooltip)(({ theme }) => ({
Expand All @@ -86,51 +130,6 @@ const AdvancedResponse = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(2.5),
}));

// CSS for block classes used in HTML string generation
// These need to be injected as global styles since they're used in dynamically generated HTML
if (typeof document !== 'undefined') {
const styleId = 'math-inline-block-styles';
if (!document.getElementById(styleId)) {
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
.block-container {
margin: 8px;
display: inline-flex;
border: 2px solid grey;
}
.block-container-generic {
margin: 4px;
}
.block-response {
flex: 2;
color: grey;
background: #f5f5f5;
font-size: 0.8rem;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-right: 2px solid grey;
}
.block-response-generic {
border-right: 0;
}
.response-editor {
display: flex;
justify-content: center;
width: 100%;
max-width: inherit;
height: auto;
min-height: 130px;
text-align: left;
padding: 8px;
}
`;
document.head.appendChild(style);
}
}

const REGEX = /{{response}}/gm;
const TEMPORARY_RESPONSE_FIELD = /\\%response\\%/gm;
const ANSWER_BLOCK_REGEX = /\\embed\{answerBlock\}\[r\d*\]/g;
Expand Down Expand Up @@ -227,10 +226,10 @@ class GeneralConfigBlock extends React.Component {

if (!registered) {
MQ.registerEmbed('answerBlock', (data) => {
const classNames = getBlockClassNames();
const genericAnswerBlock = `<div class="${cx(classNames.blockContainer, classNames.blockContainerGeneric)}">
<div class="${cx(classNames.blockResponse, classNames.blockResponseGeneric)}" id="${data}Index">Response</div>
</div>`;
const genericAnswerBlock = `
<div class="block-container block-container-generic">
<div class="block-response block-response-generic" id="${data}Index">Response</div>
</div>`;

return {
htmlString: genericAnswerBlock,
Expand Down Expand Up @@ -329,15 +328,8 @@ class GeneralConfigBlock extends React.Component {
};

render() {
const {
model,
imageSupport,
uploadSoundSupport,
configuration,
promptEnabled,
rationaleEnabled,
toolbarOpts,
} = this.props;
const { model, imageSupport, uploadSoundSupport, configuration, promptEnabled, rationaleEnabled, toolbarOpts } =
this.props;
const { showKeypad } = this.state;
const {
prompt,
Expand Down Expand Up @@ -369,17 +361,13 @@ class GeneralConfigBlock extends React.Component {

const classNames = {
editor: 'response-editor',
mathToolbar: 'math-toolbar',
};

const responsesToUse = responseType === ResponseTypes.advanced ? responses : responses.slice(0, 1);

const validationTooltip = (
<StyledTooltip
disableFocusListener
disableTouchListener
placement={'right'}
title={validationMessage}
>
<StyledTooltip disableFocusListener disableTouchListener placement={'right'} title={validationMessage}>
<Info fontSize={'small'} color={'primary'} style={{ marginLeft: '5px' }} />
</StyledTooltip>
);
Expand Down Expand Up @@ -415,14 +403,11 @@ class GeneralConfigBlock extends React.Component {
{validationTooltip}
</FlexContainer>

<SelectContainer
key="templateEditorType"
label="Response Template Equation Editor"
>
<SelectContainer key="templateEditorType" label="Response Template Equation Editor">
<Select
onChange={this.onChange('promptEquationEditor')}
value={promptEquationEditor}
MenuProps={{transitionDuration: { enter: 225, exit: 195 } }}
MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
>
<MenuItem value="non-negative-integers">Numeric - Non-Negative Integers</MenuItem>
<MenuItem value="integers">Numeric - Integers</MenuItem>
Expand Down Expand Up @@ -466,7 +451,11 @@ class GeneralConfigBlock extends React.Component {
</FlexContainer>

<SelectContainer label="Equation Editor">
<Select onChange={this.onChange('equationEditor')} value={equationEditor} MenuProps={{transitionDuration: { enter: 225, exit: 195 } }}>
<Select
onChange={this.onChange('equationEditor')}
value={equationEditor}
MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
>
<MenuItem value="non-negative-integers">Numeric - Non-Negative Integers</MenuItem>
<MenuItem value="integers">Numeric - Integers</MenuItem>
<MenuItem value="decimals">Numeric - Decimals</MenuItem>
Expand Down
60 changes: 24 additions & 36 deletions packages/math-inline/configure/src/response.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,22 @@ const ResponseContainer = styled(Card)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',

'.response-editor': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
minWidth: '500px',
maxWidth: '900px',
height: 'auto',
minHeight: '40px !important',
},

'.math-toolbar': {
width: '100%',
maxWidth: '900px',
},
}));

const StyledCardContent = styled(CardContent)(({ theme }) => ({
Expand All @@ -37,8 +53,7 @@ const Title = styled(Typography)({
flex: 3,
});

const SelectContainer = styled(InputContainer)(({ theme }) =>
({
const SelectContainer = styled(InputContainer)(({ theme }) => ({
flex: 2,
'& > *:not(label)': {
marginTop: theme.spacing(1),
Expand Down Expand Up @@ -87,31 +102,6 @@ const RemoveAlternateButton = styled(Button)(({ theme }) => ({
fontSize: '0.8rem',
}));

// CSS for MathToolbar classNames (used as strings)
if (typeof document !== 'undefined') {
const styleId = 'math-inline-response-styles';
if (!document.getElementById(styleId)) {
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
.response-editor {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 500px;
max-width: 900px;
height: auto;
min-height: 40px;
}
.math-toolbar {
width: 100%;
}
`;
document.head.appendChild(style);
}
}

class Response extends React.Component {
static propTypes = {
defaultResponse: PropTypes.bool,
Expand Down Expand Up @@ -286,7 +276,11 @@ class Response extends React.Component {
</Title>

<SelectContainer label="Validation">
<Select onChange={this.onChange('validation')} value={validation || 'literal'} MenuProps={{transitionDuration: { enter: 225, exit: 195 } }}>
<Select
onChange={this.onChange('validation')}
value={validation || 'literal'}
MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
>
<MenuItem value="literal">Literal Validation</MenuItem>
<MenuItem value="symbolic">Symbolic Validation</MenuItem>
</Select>
Expand All @@ -311,10 +305,7 @@ class Response extends React.Component {
<FormControlLabel
label={cIgnoreOrder.label}
control={
<CustomColorCheckbox
checked={ignoreOrder}
onChange={this.onLiteralOptionsChange('ignoreOrder')}
/>
<CustomColorCheckbox checked={ignoreOrder} onChange={this.onLiteralOptionsChange('ignoreOrder')} />
}
/>
)}
Expand Down Expand Up @@ -345,10 +336,7 @@ class Response extends React.Component {
Alternate
{Object.keys(alternates).length > 1 ? ` ${altIdx + 1}` : ''}
</InputLabel>
<RemoveAlternateButton
type="secondary"
onClick={this.onRemoveAlternate(alternateId)}
>
<RemoveAlternateButton type="secondary" onClick={this.onRemoveAlternate(alternateId)}>
Remove
</RemoveAlternateButton>
</AlternateBar>
Expand Down
Loading