Skip to content

Commit 9a6bf78

Browse files
tjbcktjbck
committed
refac
1 parent 59171da commit 9a6bf78

2 files changed

Lines changed: 45 additions & 19 deletions

File tree

‎src/lib/components/chat/Chat.svelte‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -961,13 +961,12 @@
961961
if (message?.role !== 'user' && message?.content) {
962962
const {
963963
codeBlocks: codeBlocks,
964-
html: htmlContent,
965-
css: cssContent,
966-
js: jsContent
964+
htmlGroups: htmlGroups
967965
} = getCodeBlockContents(message.content);
968966
969-
if (htmlContent || cssContent || jsContent) {
970-
const renderedContent = `
967+
if (htmlGroups && htmlGroups.length > 0) {
968+
htmlGroups.forEach((group) => {
969+
const renderedContent = `
971970
<!DOCTYPE html>
972971
<html lang="en">
973972
<head>
@@ -978,19 +977,20 @@
978977
background-color: white; /* Ensure the iframe has a white background */
979978
}
980979
981-
${cssContent}
980+
${group.css}
982981
</${''}style>
983982
</head>
984983
<body>
985-
${htmlContent}
984+
${group.html}
986985
987986
<${''}script>
988-
${jsContent}
987+
${group.js}
989988
</${''}script>
990989
</body>
991990
</html>
992991
`;
993-
contents = [...contents, { type: 'iframe', content: renderedContent }];
992+
contents = [...contents, { type: 'iframe', content: renderedContent }];
993+
});
994994
} else {
995995
// Check for SVG content
996996
for (const block of codeBlocks) {

‎src/lib/utils/index.ts‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1729,9 +1729,18 @@ export const getCodeBlockContents = (content: string): object => {
17291729

17301730
let codeBlocks = [];
17311731

1732-
let htmlContent = '';
1733-
let cssContent = '';
1734-
let jsContent = '';
1732+
// Groups of related HTML/CSS/JS blocks. Each HTML block starts a new group;
1733+
// CSS and JS blocks attach to the current (most recent) group.
1734+
// This preserves the existing behaviour for "dumb" models that output
1735+
// separate html/css/js blocks meant to form a single page, while also
1736+
// allowing multiple distinct HTML blocks to produce separate artifacts.
1737+
let htmlGroups: Array<{ html: string; css: string; js: string }> = [];
1738+
1739+
const initDefaultGroup = () => {
1740+
if (htmlGroups.length === 0) {
1741+
htmlGroups.push({ html: '', css: '', js: '' });
1742+
}
1743+
};
17351744

17361745
if (codeBlockContents) {
17371746
codeBlockContents.forEach((block) => {
@@ -1744,11 +1753,14 @@ export const getCodeBlockContents = (content: string): object => {
17441753
const { lang, code } = block;
17451754

17461755
if (lang === 'html') {
1747-
htmlContent += code + '\n';
1756+
// Each HTML block starts a new group
1757+
htmlGroups.push({ html: code + '\n', css: '', js: '' });
17481758
} else if (lang === 'css') {
1749-
cssContent += code + '\n';
1759+
initDefaultGroup();
1760+
htmlGroups[htmlGroups.length - 1].css += code + '\n';
17501761
} else if (lang === 'javascript' || lang === 'js') {
1751-
jsContent += code + '\n';
1762+
initDefaultGroup();
1763+
htmlGroups[htmlGroups.length - 1].js += code + '\n';
17521764
}
17531765
});
17541766
} else {
@@ -1763,28 +1775,42 @@ export const getCodeBlockContents = (content: string): object => {
17631775
if (inlineHtml) {
17641776
inlineHtml.forEach((block) => {
17651777
const content = block.replace(/<\/?html>/gi, ''); // Remove <html> tags
1766-
htmlContent += content + '\n';
1778+
htmlGroups.push({ html: content + '\n', css: '', js: '' });
17671779
});
17681780
}
17691781
if (inlineCss) {
17701782
inlineCss.forEach((block) => {
17711783
const content = block.replace(/<\/?style>/gi, ''); // Remove <style> tags
1772-
cssContent += content + '\n';
1784+
initDefaultGroup();
1785+
htmlGroups[htmlGroups.length - 1].css += content + '\n';
17731786
});
17741787
}
17751788
if (inlineJs) {
17761789
inlineJs.forEach((block) => {
17771790
const content = block.replace(/<\/?script>/gi, ''); // Remove <script> tags
1778-
jsContent += content + '\n';
1791+
initDefaultGroup();
1792+
htmlGroups[htmlGroups.length - 1].js += content + '\n';
17791793
});
17801794
}
17811795
}
17821796

1797+
// Backward-compatible flat fields (merged from all groups)
1798+
const htmlContent = htmlGroups.map((g) => g.html).join('');
1799+
const cssContent = htmlGroups.map((g) => g.css).join('');
1800+
const jsContent = htmlGroups.map((g) => g.js).join('');
1801+
17831802
return {
17841803
codeBlocks: codeBlocks,
17851804
html: htmlContent.trim(),
17861805
css: cssContent.trim(),
1787-
js: jsContent.trim()
1806+
js: jsContent.trim(),
1807+
htmlGroups: htmlGroups
1808+
.filter((g) => g.html.trim() || g.css.trim() || g.js.trim())
1809+
.map((g) => ({
1810+
html: g.html.trim(),
1811+
css: g.css.trim(),
1812+
js: g.js.trim()
1813+
}))
17881814
};
17891815
};
17901816
export const parseFrontmatter = (content) => {

0 commit comments

Comments
 (0)