Skip to content

Commit 6e4ef58

Browse files
jayairjayair
committed
ignore: share error styles
1 parent e05c3b7 commit 6e4ef58

File tree

2 files changed

+93
-62
lines changed

2 files changed

+93
-62
lines changed

‎packages/web/src/components/Share.tsx‎

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -172,13 +172,29 @@ function flattenToolArgs(obj: any, prefix: string = ""): Array<[string, any]> {
172172
return entries
173173
}
174174

175-
export function getDiagnostics(
175+
function formatErrorString(error: string): JSX.Element {
176+
const errorMarker = "Error: "
177+
const startsWithError = error.startsWith(errorMarker)
178+
179+
return startsWithError ? (
180+
<p>
181+
<span data-color="red" data-marker="label" data-separator>
182+
Error
183+
</span>
184+
<span>{error.slice(errorMarker.length)}</span>
185+
</p>
186+
) : (
187+
<p><span data-color="dimmed">{error}</span></p>
188+
)
189+
}
190+
191+
function getDiagnostics(
176192
diagnosticsByFile: Record<string, Diagnostic[]>,
177193
currentFile: string
178-
): string[] {
194+
): JSX.Element[] {
179195
// Return a flat array of error diagnostics, in the format:
180-
// "ERROR [65:20] Property 'x' does not exist on type 'Y'"
181-
const result: string[] = []
196+
// "Error [65:20] Property 'x' does not exist on type 'Y'"
197+
const result: JSX.Element[] = []
182198

183199
if (
184200
diagnosticsByFile === undefined || diagnosticsByFile[currentFile] === undefined
@@ -192,7 +208,15 @@ export function getDiagnostics(
192208
const line = d.range.start.line + 1 // 1-based
193209
const column = d.range.start.character + 1 // 1-based
194210

195-
result.push(`\x1b[31mERROR\x1b[0m \x1b[2m[${line}:${column}]\x1b[0m ${d.message}`)
211+
result.push(
212+
<p>
213+
<span data-color="red" data-marker="label">Error</span>
214+
<span data-color="dimmed" data-separator>
215+
[{line}:{column}]
216+
</span>
217+
<span>{d.message}</span>
218+
</p>
219+
)
196220
}
197221
}
198222

@@ -324,46 +348,44 @@ function TextPart(props: TextPartProps) {
324348
)
325349
}
326350

327-
interface LspPartProps extends JSX.HTMLAttributes<HTMLDivElement> {
328-
text: string
351+
interface ErrorPartProps extends JSX.HTMLAttributes<HTMLDivElement> {
329352
expand?: boolean
330353
}
331-
function LspPart(props: LspPartProps) {
332-
const [local, rest] = splitProps(props, ["text", "expand"])
354+
function ErrorPart(props: ErrorPartProps) {
355+
const [local, rest] = splitProps(props, ["expand", "children"])
333356
const [expanded, setExpanded] = createSignal(false)
334357
const [overflowed, setOverflowed] = createSignal(false)
335358
let preEl: HTMLElement | undefined
336359

337360
function checkOverflow() {
338-
if (!preEl) return
339-
340-
const code = preEl.getElementsByTagName("code")[0]
341-
342-
if (code && !local.expand) {
343-
setOverflowed(preEl.clientHeight < code.offsetHeight)
361+
if (preEl && !local.expand) {
362+
setOverflowed(preEl.scrollHeight > preEl.clientHeight + 1)
344363
}
345364
}
346365

347366
onMount(() => {
367+
checkOverflow()
348368
window.addEventListener("resize", checkOverflow)
349369
})
350370

371+
createEffect(() => {
372+
local.children
373+
setTimeout(checkOverflow, 0)
374+
})
375+
351376
onCleanup(() => {
352377
window.removeEventListener("resize", checkOverflow)
353378
})
354379

355380
return (
356381
<div
357-
class={styles["message-lsp"]}
382+
class={styles["message-error"]}
358383
data-expanded={expanded() || local.expand === true}
359384
{...rest}
360385
>
361-
<CodeBlock
362-
lang="ansi"
363-
code={local.text}
364-
onRendered={checkOverflow}
365-
ref={(el) => (preEl = el)}
366-
/>
386+
<div data-section="content" ref={(el) => (preEl = el)}>
387+
{local.children}
388+
</div>
367389
{((!local.expand && overflowed()) || expanded()) && (
368390
<button
369391
type="button"
@@ -512,6 +534,7 @@ export default function Share(props: {
512534
info: SessionInfo
513535
messages: Record<string, SessionMessage>
514536
}) {
537+
let hasScrolled = false
515538
const id = props.id
516539

517540
const anchorId = createMemo<string | null>(() => {
@@ -586,8 +609,9 @@ export default function Share(props: {
586609
const [, messageID] = splits
587610
setStore("messages", messageID, reconcile(d.content))
588611

589-
if (messageID === anchorId()) {
612+
if (!hasScrolled && messageID === anchorId()) {
590613
scrollToAnchor(window.location.hash.slice(1))
614+
hasScrolled = true
591615
}
592616
}
593617
} catch (error) {
@@ -1241,12 +1265,9 @@ export default function Share(props: {
12411265
<Switch>
12421266
<Match when={hasError()}>
12431267
<div data-part-tool-result>
1244-
<TextPart
1245-
expand
1246-
text={toolData()?.result}
1247-
data-size="sm"
1248-
data-color="dimmed"
1249-
/>
1268+
<ErrorPart>
1269+
{formatErrorString(toolData()?.result)}
1270+
</ErrorPart>
12501271
</div>
12511272
</Match>
12521273
<Match when={preview()}>
@@ -1339,19 +1360,14 @@ export default function Share(props: {
13391360
<b>{filePath()}</b>
13401361
</div>
13411362
<Show when={diagnostics().length > 0}>
1342-
<LspPart
1343-
text={diagnostics().join("\n\n")}
1344-
/>
1363+
<ErrorPart>{diagnostics()}</ErrorPart>
13451364
</Show>
13461365
<Switch>
13471366
<Match when={hasError()}>
13481367
<div data-part-tool-result>
1349-
<TextPart
1350-
expand
1351-
text={toolData()?.result}
1352-
data-size="sm"
1353-
data-color="dimmed"
1354-
/>
1368+
<ErrorPart>
1369+
{formatErrorString(toolData()?.result)}
1370+
</ErrorPart>
13551371
</div>
13561372
</Match>
13571373
<Match when={content()}>
@@ -1429,12 +1445,9 @@ export default function Share(props: {
14291445
<Switch>
14301446
<Match when={hasError()}>
14311447
<div data-part-tool-result>
1432-
<TextPart
1433-
expand
1434-
data-size="sm"
1435-
data-color="dimmed"
1436-
text={message()}
1437-
/>
1448+
<ErrorPart>
1449+
{formatErrorString(message())}
1450+
</ErrorPart>
14381451
</div>
14391452
</Match>
14401453
<Match when={diff()}>
@@ -1448,9 +1461,7 @@ export default function Share(props: {
14481461
</Match>
14491462
</Switch>
14501463
<Show when={diagnostics().length > 0}>
1451-
<LspPart
1452-
text={diagnostics().join("\n\n")}
1453-
/>
1464+
<ErrorPart>{diagnostics()}</ErrorPart>
14541465
</Show>
14551466
</div>
14561467
<ToolFooter time={toolData()?.duration || 0} />
@@ -1601,12 +1612,9 @@ export default function Share(props: {
16011612
<Switch>
16021613
<Match when={hasError()}>
16031614
<div data-part-tool-result>
1604-
<TextPart
1605-
expand
1606-
text={toolData()?.result}
1607-
data-size="sm"
1608-
data-color="dimmed"
1609-
/>
1615+
<ErrorPart>
1616+
{formatErrorString(toolData()?.result)}
1617+
</ErrorPart>
16101618
</div>
16111619
</Match>
16121620
<Match when={toolData()?.result}>

‎packages/web/src/components/share.module.css‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,7 @@
421421
}
422422
}
423423

424-
.message-lsp {
424+
.message-error {
425425
background-color: var(--sl-color-bg-surface);
426426
padding: 0.5rem calc(0.5rem + 3px);
427427
border-radius: 0.25rem;
@@ -432,24 +432,47 @@
432432
align-self: flex-start;
433433
max-width: var(--md-tool-width);
434434

435-
padding: 0.5rem calc(0.5rem + 3px);
436-
437-
pre {
438-
--shiki-dark-bg: var(--sl-color-bg-surface) !important;
439-
background-color: var(--sl-color-bg-surface) !important;
440-
line-height: 1.4;
435+
[data-section="content"] {
436+
p {
437+
margin-bottom: 0.5rem;
438+
line-height: 1.5;
441439
font-size: 0.75rem;
442440
white-space: pre-wrap;
443441
word-break: break-word;
442+
443+
&:last-child {
444+
margin-bottom: 0;
445+
}
446+
447+
span {
448+
margin-right: 0.25rem;
449+
&:last-child {
450+
margin-right: 0;
451+
}
452+
}
453+
span[data-color="red"] {
454+
color: var(--sl-color-red);
455+
}
456+
span[data-color="dimmed"] {
457+
color: var(--sl-color-text-dimmed);
458+
}
459+
span[data-marker="label"] {
460+
text-transform: uppercase;
461+
letter-spacing: -0.5px;
462+
}
463+
span[data-separator] {
464+
margin-right: 0.375rem;
465+
}
444466
}
467+
}
445468

446469
&[data-expanded="true"] {
447-
pre {
470+
[data-section="content"] {
448471
display: block;
449472
}
450473
}
451474
&[data-expanded="false"] {
452-
pre {
475+
[data-section="content"] {
453476
display: -webkit-box;
454477
-webkit-box-orient: vertical;
455478
-webkit-line-clamp: 7;

0 commit comments

Comments
 (0)