tbenandClaude Opus 5.5
1208eac6b7
The composer now writes markdown with bold, italic, strike, code, links, quotes and lists, from shortcuts, markdown typing or a bubble over the selection. @ mentions a bot and # a workspace, shown as chips and saved as [bot:ID] / [workspace:ID]. Text selected in a message can be quoted into the composer. User messages render as markdown, and replies tell the bot who and what the user mentioned. Adds an ESM stand-in for use-sync-external-store, since bunext keeps React external in page bundles and the CommonJS original requires it. Co-Authored-By: Claude Opus 5.5 <[email protected]>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import type { Components } from "react-markdown";
|
|
import P from "@moduletrace/twui/layout/P";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
import MarkdownList from "../(partials)/markdown-list";
|
|
import UserMarkdownLink from "../(partials)/user-markdown-link";
|
|
import { MessageMarkdownComponents } from "./message-markdown-components";
|
|
|
|
const Heading: Components["h1"] = ({ children }) => (
|
|
<P noMargin className="text-sm leading-5 font-bold text-on-ink">
|
|
{children}
|
|
</P>
|
|
);
|
|
|
|
/**
|
|
* The user's own message markdown, on the ink bubble: the chat's
|
|
* components (`MessageMarkdownComponents`) in the bubble's colours, and
|
|
* headings no bigger than the text. Code blocks and ref chips keep their
|
|
* own surface.
|
|
*/
|
|
export const UserMarkdownComponents: Components = {
|
|
...MessageMarkdownComponents,
|
|
p: ({ children }) => (
|
|
<P noMargin className="text-sm leading-5 text-on-ink">
|
|
{children}
|
|
</P>
|
|
),
|
|
h1: Heading,
|
|
h2: Heading,
|
|
h3: Heading,
|
|
h4: Heading,
|
|
h5: Heading,
|
|
h6: Heading,
|
|
a: UserMarkdownLink,
|
|
ul: ({ children }) => <MarkdownList className="text-on-ink">{children}</MarkdownList>,
|
|
ol: ({ children, start }) => (
|
|
<MarkdownList ordered start={start} className="text-on-ink">
|
|
{children}
|
|
</MarkdownList>
|
|
),
|
|
code: ({ children }) => (
|
|
<Span className="font-mono text-[13px] px-1 py-px rounded-default-xs bg-on-ink/15 text-on-ink break-words">
|
|
{children}
|
|
</Span>
|
|
),
|
|
blockquote: ({ children }) => (
|
|
<Stack className="gap-2! items-stretch pl-3 border-0 border-l-2 border-solid border-on-ink/40 opacity-80">
|
|
{children}
|
|
</Stack>
|
|
),
|
|
};
|