apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-07-03 20:41:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update message formatting to render markdown

Browse source
This commit is contained in:
tusharmagar 2026-01-16 10:58:41 +05:30
parent 32572813e2
commit da4acdf31e
2 changed files with 64 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

63
apps/x/apps/renderer/src/App.css
View file

@ -1,6 +1,9 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";
/* Required for Streamdown markdown rendering (bullet points, lists, etc.) */
@source "../node_modules/streamdown/dist/*.js";
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
#root { #root {
@ -165,6 +168,66 @@
} }
} }
/* Markdown content base styles for Streamdown/MessageResponse */
@layer components {
/* Target elements inside MessageResponse wrapper */
[data-slot="message-content"] ul,
[data-slot="message-content"] ol {
@apply my-2 pl-5;
}
[data-slot="message-content"] ul {
@apply list-disc;
}
[data-slot="message-content"] ol {
@apply list-decimal;
}
[data-slot="message-content"] li {
@apply my-1;
}
[data-slot="message-content"] p {
@apply my-2 first:mt-0 last:mb-0;
}
[data-slot="message-content"] h1 {
@apply my-4 text-2xl font-bold first:mt-0;
}
[data-slot="message-content"] h2 {
@apply my-3 text-xl font-semibold first:mt-0;
}
[data-slot="message-content"] h3 {
@apply my-3 text-lg font-semibold first:mt-0;
}
[data-slot="message-content"] h4,
[data-slot="message-content"] h5,
[data-slot="message-content"] h6 {
@apply my-2 font-semibold first:mt-0;
}
[data-slot="message-content"] code:not(pre code) {
@apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm;
}
[data-slot="message-content"] pre {
@apply my-3 overflow-x-auto rounded-lg;
}
[data-slot="message-content"] blockquote {
@apply my-3 border-l-4 border-border pl-4 italic text-muted-foreground;
}
[data-slot="message-content"] hr {
@apply my-4 border-border;
}
[data-slot="message-content"] a {
@apply text-primary underline underline-offset-2 hover:text-primary/80;
}
[data-slot="message-content"] table {
@apply my-3 w-full border-collapse;
}
[data-slot="message-content"] th,
[data-slot="message-content"] td {
@apply border border-border px-3 py-2 text-left;
}
[data-slot="message-content"] th {
@apply bg-muted font-semibold;
}
}
.graph-view { .graph-view {
background-color: var(--background); background-color: var(--background);
user-select: none; user-select: none;

1
apps/x/apps/renderer/src/components/ai-elements/message.tsx
View file

@ -46,6 +46,7 @@ export const MessageContent = ({
...props ...props
}: MessageContentProps) => ( }: MessageContentProps) => (
<div <div
data-slot="message-content"
className={cn( className={cn(
"is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm", "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm",
"group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground", "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",