Skip to content
This repository was archived by the owner on Oct 10, 2025. It is now read-only.

Commit e197cf3

Browse files
officialcjuniorofficialcjunior
committed
Add styles for the artifacts container and code view
1 parent 468d444 commit e197cf3

2 files changed

Lines changed: 190 additions & 61 deletions

File tree

‎packages/tiles-playground/components/ArtifactRenderer.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
.artifact-container {
2+
border: 1px solid #e2e8f0;
3+
border-radius: 8px;
4+
padding: 16px;
5+
margin: 16px 0;
6+
position: relative;
7+
background-color: #ffffff;
8+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
9+
transition: all 0.2s ease-in-out;
10+
}
11+
12+
.artifact-container:hover {
13+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
.toggle-button {
17+
position: absolute;
18+
top: -12px;
19+
right: 16px;
20+
padding: 4px 12px;
21+
font-size: 12px;
22+
cursor: pointer;
23+
background-color: #ffffff;
24+
border: 1px solid #e2e8f0;
25+
border-radius: 6px;
26+
color: #64748b;
27+
transition: all 0.2s ease;
28+
display: flex;
29+
align-items: center;
30+
gap: 4px;
31+
z-index: 10;
32+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
33+
}
34+
35+
.toggle-button:hover {
36+
background-color: #f8fafc;
37+
color: #334155;
38+
border-color: #cbd5e1;
39+
}
40+
41+
.code-block {
42+
background-color: #1e293b;
43+
color: #e2e8f0;
44+
padding: 16px;
45+
border-radius: 6px;
46+
font-family: 'JetBrains Mono', 'Fira Code', monospace;
47+
font-size: 13px;
48+
line-height: 1.5;
49+
overflow-x: auto;
50+
white-space: pre-wrap;
51+
word-break: break-all;
52+
max-height: 500px;
53+
overflow-y: auto;
54+
}
55+
56+
.mermaid-container {
57+
background-color: #ffffff;
58+
padding: 16px;
59+
border-radius: 6px;
60+
border: 1px solid #e2e8f0;
61+
overflow: auto;
62+
}
63+
64+
.html-container {
65+
background-color: #ffffff;
66+
border: 1px solid #e2e8f0;
67+
border-radius: 6px;
68+
overflow: hidden;
69+
}
70+
71+
.html-container iframe {
72+
width: 100%;
73+
height: 500px;
74+
border: none;
75+
background-color: #ffffff;
76+
}
77+
78+
.markdown-container {
79+
color: #334155;
80+
line-height: 1.6;
81+
font-size: 14px;
82+
}
83+
84+
.markdown-container h1,
85+
.markdown-container h2,
86+
.markdown-container h3,
87+
.markdown-container h4,
88+
.markdown-container h5,
89+
.markdown-container h6 {
90+
color: #1e293b;
91+
margin-top: 24px;
92+
margin-bottom: 16px;
93+
}
94+
95+
.markdown-container p {
96+
margin-bottom: 16px;
97+
}
98+
99+
.markdown-container code {
100+
background-color: #f1f5f9;
101+
padding: 2px 4px;
102+
border-radius: 4px;
103+
font-family: 'JetBrains Mono', 'Fira Code', monospace;
104+
font-size: 0.9em;
105+
}
106+
107+
.markdown-container pre {
108+
background-color: #1e293b;
109+
color: #e2e8f0;
110+
padding: 16px;
111+
border-radius: 6px;
112+
overflow-x: auto;
113+
margin: 16px 0;
114+
}
115+
116+
.markdown-container pre code {
117+
background-color: transparent;
118+
padding: 0;
119+
color: inherit;
120+
}
121+
122+
.markdown-container blockquote {
123+
border-left: 4px solid #e2e8f0;
124+
margin: 16px 0;
125+
padding: 8px 16px;
126+
color: #64748b;
127+
background-color: #f8fafc;
128+
}
129+
130+
.markdown-container ul,
131+
.markdown-container ol {
132+
padding-left: 24px;
133+
margin: 16px 0;
134+
}
135+
136+
.markdown-container table {
137+
border-collapse: collapse;
138+
width: 100%;
139+
margin: 16px 0;
140+
}
141+
142+
.markdown-container th,
143+
.markdown-container td {
144+
border: 1px solid #e2e8f0;
145+
padding: 8px 12px;
146+
text-align: left;
147+
}
148+
149+
.markdown-container th {
150+
background-color: #f8fafc;
151+
font-weight: 600;
152+
}
153+
154+
/* Scrollbar styling */
155+
.code-block::-webkit-scrollbar,
156+
.markdown-container pre::-webkit-scrollbar {
157+
width: 8px;
158+
height: 8px;
159+
}
160+
161+
.code-block::-webkit-scrollbar-track,
162+
.markdown-container pre::-webkit-scrollbar-track {
163+
background: #1e293b;
164+
}
165+
166+
.code-block::-webkit-scrollbar-thumb,
167+
.markdown-container pre::-webkit-scrollbar-thumb {
168+
background: #475569;
169+
border-radius: 4px;
170+
}
171+
172+
.code-block::-webkit-scrollbar-thumb:hover,
173+
.markdown-container pre::-webkit-scrollbar-thumb:hover {
174+
background: #64748b;
175+
}

‎packages/tiles-playground/components/ArtifactRenderer.tsx‎

Lines changed: 15 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ReactMarkdown from 'react-markdown';
66
import type { NodeKey } from 'lexical';
77
import type { ArtifactContentType } from '../nodes/ArtifactNode'; // Assuming ArtifactNode is in ../nodes
88
import DOMPurify from 'dompurify';
9+
import './ArtifactRenderer.css';
910

1011
// Function to check if content is valid HTML
1112
const isValidHTML = (content: string): boolean => {
@@ -46,56 +47,6 @@ interface ArtifactRendererProps {
4647
nodeKey: NodeKey;
4748
}
4849

49-
// Basic styling for the container and toggle button
50-
const styles: Record<string, React.CSSProperties> = {
51-
container: {
52-
border: '1px solid #eee',
53-
borderRadius: '4px',
54-
padding: '10px',
55-
margin: '10px 0',
56-
position: 'relative',
57-
backgroundColor: '#f9f9f9',
58-
},
59-
toggleButton: {
60-
position: 'absolute',
61-
top: '5px',
62-
right: '5px',
63-
padding: '2px 6px',
64-
fontSize: '10px',
65-
cursor: 'pointer',
66-
backgroundColor: '#ddd',
67-
border: '1px solid #ccc',
68-
borderRadius: '3px',
69-
zIndex: 10, // Ensure button is clickable over content
70-
},
71-
codeBlock: {
72-
whiteSpace: 'pre-wrap',
73-
wordBreak: 'break-all',
74-
backgroundColor: '#eee',
75-
padding: '8px',
76-
borderRadius: '4px',
77-
maxHeight: '400px',
78-
overflowY: 'auto',
79-
fontFamily: 'monospace',
80-
fontSize: '12px',
81-
},
82-
mermaidContainer: {
83-
// Mermaid might need specific styling or container properties
84-
},
85-
htmlContainer: {
86-
// Improved styling for HTML container
87-
border: '1px solid #ddd',
88-
borderRadius: '4px',
89-
padding: '10px',
90-
backgroundColor: '#fff',
91-
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
92-
overflow: 'hidden',
93-
},
94-
markdownContainer: {
95-
// Standard block element, styling can be applied via Tailwind/CSS
96-
},
97-
};
98-
9950
// Initialize Mermaid
10051
mermaid.initialize({
10152
startOnLoad: false, // We'll trigger rendering manually
@@ -139,7 +90,7 @@ const ArtifactRenderer: React.FC<ArtifactRendererProps> = ({ contentType, conten
13990

14091
const renderContent = () => {
14192
if (showCode) {
142-
return <pre style={styles.codeBlock}><code>{content}</code></pre>;
93+
return <pre className="code-block"><code>{content}</code></pre>;
14394
}
14495

14596
switch (contentType) {
@@ -150,9 +101,9 @@ const ArtifactRenderer: React.FC<ArtifactRendererProps> = ({ contentType, conten
150101
// Check if content is valid HTML
151102
if (!isValidHTML(fixedContent)) {
152103
return (
153-
<div style={styles.htmlContainer}>
104+
<div className="html-container">
154105
<p>Invalid HTML content. Showing as code:</p>
155-
<pre style={styles.codeBlock}><code>{fixedContent}</code></pre>
106+
<pre className="code-block"><code>{fixedContent}</code></pre>
156107
</div>
157108
);
158109
}
@@ -167,34 +118,37 @@ const ArtifactRenderer: React.FC<ArtifactRendererProps> = ({ contentType, conten
167118

168119
// Create a sandboxed iframe for safer HTML rendering
169120
return (
170-
<div style={styles.htmlContainer}>
121+
<div className="html-container">
171122
<iframe
172123
srcDoc={sanitizedHTML}
173-
style={{ width: '100%', height: '400px', border: '1px solid #ccc' }}
174124
sandbox="allow-same-origin allow-scripts"
175125
title="HTML Content"
176126
/>
177127
</div>
178128
);
179129
case 'text/markdown':
180130
return (
181-
<div style={styles.markdownContainer}>
131+
<div className="markdown-container">
182132
<ReactMarkdown>{content}</ReactMarkdown>
183133
</div>
184134
);
185135
case 'application/vnd.ant.mermaid':
186136
return (
187-
<div ref={mermaidRef} style={styles.mermaidContainer} />
137+
<div ref={mermaidRef} className="mermaid-container" />
188138
);
189139
default:
190-
return <pre>Unsupported artifact type: {contentType}</pre>;
140+
return <pre className="code-block">Unsupported artifact type: {contentType}</pre>;
191141
}
192142
};
193143

194144
return (
195-
<div style={styles.container}>
196-
<button style={styles.toggleButton} onClick={toggleView} title={showCode ? 'Show Rendered' : 'Show Code'}>
197-
{showCode ? '👁️' : '</>'}
145+
<div className="artifact-container">
146+
<button
147+
className="toggle-button"
148+
onClick={toggleView}
149+
title={showCode ? 'Show Rendered' : 'Show Code'}
150+
>
151+
{showCode ? '👁️ View' : '</> Code'}
198152
</button>
199153
{renderContent()}
200154
</div>

0 commit comments

Comments
 (0)