| 1 | /** |
| 2 | * AI Elements' MessageResponse (registry.ai-sdk.dev/message.json): g1t's |
| 3 | * answers drawn with Streamdown, which keeps half-written Markdown readable |
| 4 | * while it streams (an open code fence, a table still coming, a link |
| 5 | * without its end). One renderer for every place g1t answers: the top |
| 6 | * bar's Ask and its direct message in Chat. |
| 7 | * |
| 8 | * What g1t adds: work items, pull requests and commits as chips with their |
| 9 | * card on hover (`owner/repo#12`, `#12` in the page's repository or the workspace, a hash, |
| 10 | * a link to one, a full link to this site), people as their card, code in |
| 11 | * chat's own block (highlighted, with its language and Copy), tables that |
| 12 | * scroll inside the message, and task lists. Raw HTML is never drawn, and |
| 13 | * images come only from this site and its usercontent origin: anything |
| 14 | * else is shown as a link, so an answer can never load a stranger's |
| 15 | * address on its own. |
| 16 | */ |
| 17 | import { Check, Image as ImageIcon } from "lucide-react"; |
| 18 | import { type ComponentProps, type ReactNode, isValidElement, memo, useMemo } from "react"; |
| 19 | import { Link } from "react-router"; |
| 20 | import { Streamdown, defaultRehypePlugins, type Components } from "streamdown"; |
| 21 | import type { PluggableList } from "unified"; |
| 22 | |
| 23 | import { cn } from "../../lib/cn"; |
| 24 | import { useAddresses } from "../../lib/addresses"; |
| 25 | import { refTarget } from "../../lib/g1t-chat"; |
| 26 | import { type MarkdownRepo, rehypeReferences } from "../../lib/markdown-plugins"; |
| 27 | import { CodeBlock } from "../chat/text"; |
| 28 | import { MemberCard } from "../chat/profile-card"; |
| 29 | import { CommitChip, PageChip, RefChip } from "../chat/ref-chip"; |
| 30 | import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"; |
| 31 | |
| 32 | /** The text inside a React tree: a code block's source. */ |
| 33 | function textOf(node: ReactNode): string { |
| 34 | if (node == null || typeof node === "boolean") return ""; |
| 35 | if (typeof node === "string" || typeof node === "number") return String(node); |
| 36 | if (Array.isArray(node)) return node.map(textOf).join(""); |
| 37 | if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children); |
| 38 | return ""; |
| 39 | } |
| 40 | |
| 41 | export type ResponseContext = { |
| 42 | /** The workspace: where reference cards are asked for. */ |
| 43 | slug: string; |
| 44 | /** The repository a bare `#12` or a hash means, from the page asked about. */ |
| 45 | repo?: MarkdownRepo | null; |
| 46 | }; |
| 47 | |
| 48 | function components(context: ResponseContext, origin: string, usercontent: string): Components { |
| 49 | return { |
| 50 | a: ({ href = "", children, node: _node, ...props }) => { |
| 51 | const ref = (props as Record<string, unknown>)["data-ref"]; |
| 52 | if (ref === "mention") { |
| 53 | const name = textOf(children).replace(/^@/, "").toLowerCase(); |
| 54 | if (name === "g1t") return <span className="font-medium text-accent">@g1t</span>; |
| 55 | return ( |
| 56 | <MemberCard member={{ kind: "user", name }} className="inline rounded-sm bg-accent/15 px-1 py-px font-medium text-accent hover:bg-accent/25"> |
| 57 | @{name} |
| 58 | </MemberCard> |
| 59 | ); |
| 60 | } |
| 61 | const target = refTarget(href, origin); |
| 62 | if (target?.kind === "item" || target?.kind === "pull" || target?.kind === "ref") { |
| 63 | const label = textOf(children); |
| 64 | const where = target.kind === "item" ? target.workspace : target.repo; |
| 65 | // A bare link (its text is the address) shows as the reference it is. |
| 66 | const shown = /^https?:\/\/|^\//.test(label) ? `${where}#${target.number}` : children; |
| 67 | const [namespace = "", name = ""] = where.split("/"); |
| 68 | const scope = target.kind === "item" ? { workspace: target.workspace } : { repo: { namespace, name } }; |
| 69 | return ( |
| 70 | <RefChip |
| 71 | slug={context.slug} |
| 72 | scope={scope} |
| 73 | number={target.number} |
| 74 | to={target.href} |
| 75 | label={shown} |
| 76 | kind={target.kind === "ref" ? undefined : target.kind} |
| 77 | /> |
| 78 | ); |
| 79 | } |
| 80 | if (target?.kind === "commit") return <CommitChip href={target.href} sha={target.sha} />; |
| 81 | if (target?.kind === "page") { |
| 82 | const label = textOf(children); |
| 83 | if (/^https?:\/\//.test(label)) return <PageChip href={target.href}>{target.href}</PageChip>; |
| 84 | return ( |
| 85 | <Link to={target.href} className="text-accent underline-offset-2 hover:underline"> |
| 86 | {children} |
| 87 | </Link> |
| 88 | ); |
| 89 | } |
| 90 | return ( |
| 91 | <a href={href} target="_blank" rel="noopener noreferrer nofollow ugc" className="text-accent underline-offset-2 hover:underline"> |
| 92 | {children} |
| 93 | </a> |
| 94 | ); |
| 95 | }, |
| 96 | code: ({ className, children, node }) => { |
| 97 | const language = /language-([\w+#.-]+)/.exec(className ?? "")?.[1] ?? null; |
| 98 | // ```ts title="collaborators.ts": the file it is, over the code. |
| 99 | const meta = String(node?.properties?.metastring ?? ""); |
| 100 | const title = /title=["']([^"']+)["']/.exec(meta)?.[1] ?? null; |
| 101 | return <CodeBlock language={language} code={textOf(children).replace(/\n$/, "")} title={title} bar />; |
| 102 | }, |
| 103 | // Streamdown's own `pre` marks the code inside it as a block, which is what sends it to `code` above. |
| 104 | inlineCode: ({ children }) => <code className="rounded-sm border border-line bg-raised px-1 py-px font-mono text-[0.84em] text-fg-soft">{children}</code>, |
| 105 | img: ({ src, alt }) => { |
| 106 | const address = typeof src === "string" ? src : ""; |
| 107 | const ours = (address.startsWith("/") && !address.startsWith("//")) || address.startsWith(`${usercontent}/`) || address.startsWith(`${origin}/`); |
| 108 | if (ours) return <img src={address} alt={alt ?? ""} loading="lazy" className="my-1 max-h-96 max-w-full rounded-lg border border-line" />; |
| 109 | return ( |
| 110 | <a |
| 111 | href={address} |
| 112 | target="_blank" |
| 113 | rel="noopener noreferrer nofollow ugc" |
| 114 | className="inline-flex items-center gap-1 text-accent underline-offset-2 hover:underline" |
| 115 | > |
| 116 | <ImageIcon size={13} /> |
| 117 | {alt || "Image"} |
| 118 | </a> |
| 119 | ); |
| 120 | }, |
| 121 | table: ({ children }) => ( |
| 122 | <Table |
| 123 | frameProps={{ role: "region", "aria-label": "Table", tabIndex: 0, className: "my-2 rounded-lg border border-line" }} |
| 124 | className="min-w-max text-[0.8125rem] leading-snug sm:min-w-full" |
| 125 | > |
| 126 | {children} |
| 127 | </Table> |
| 128 | ), |
| 129 | thead: ({ children }) => <TableHeader>{children}</TableHeader>, |
| 130 | tbody: ({ children }) => <TableBody>{children}</TableBody>, |
| 131 | tr: ({ children }) => <TableRow>{children}</TableRow>, |
| 132 | th: ({ children, style }) => ( |
| 133 | <TableHead scope="col" style={style}> |
| 134 | {children} |
| 135 | </TableHead> |
| 136 | ), |
| 137 | td: ({ children, style }) => ( |
| 138 | <TableCell style={style} className="max-w-lg"> |
| 139 | {children} |
| 140 | </TableCell> |
| 141 | ), |
| 142 | // Chat, not a document: headings are bold lines with room above them, the top two a touch larger. |
| 143 | h1: ({ children }) => <p className="pt-2 text-base font-semibold text-fg first:pt-0">{children}</p>, |
| 144 | h2: ({ children }) => <p className="pt-2 text-base font-semibold text-fg first:pt-0">{children}</p>, |
| 145 | h3: ({ children }) => <p className="pt-1.5 font-semibold text-fg first:pt-0">{children}</p>, |
| 146 | h4: ({ children }) => <p className="pt-1.5 font-semibold text-fg first:pt-0">{children}</p>, |
| 147 | h5: ({ children }) => <p className="pt-1 font-semibold text-fg first:pt-0">{children}</p>, |
| 148 | h6: ({ children }) => <p className="pt-1 font-semibold text-fg first:pt-0">{children}</p>, |
| 149 | p: ({ children }) => <p>{children}</p>, |
| 150 | strong: ({ children }) => <strong className="font-semibold text-fg">{children}</strong>, |
| 151 | ul: ({ children, className }) => ( |
| 152 | <ul className={cn("space-y-1 pl-5 marker:text-faint", className?.includes("contains-task-list") ? "list-none pl-1" : "list-disc")}>{children}</ul> |
| 153 | ), |
| 154 | ol: ({ children, start }) => ( |
| 155 | <ol start={start} className="list-decimal space-y-1 pl-5 marker:text-faint"> |
| 156 | {children} |
| 157 | </ol> |
| 158 | ), |
| 159 | li: ({ children }) => <li className="pl-0.5 [&>ol]:mt-1 [&>ul]:mt-1">{children}</li>, |
| 160 | blockquote: ({ children }) => <blockquote className="border-l-2 border-line-strong pl-3 text-muted">{children}</blockquote>, |
| 161 | hr: () => <hr className="my-3 border-line" />, |
| 162 | input: ({ checked, type }) => |
| 163 | type === "checkbox" ? ( |
| 164 | <span |
| 165 | aria-label={checked ? "Done" : "Not done"} |
| 166 | className={cn( |
| 167 | "mr-1.5 inline-flex size-3.5 translate-y-0.5 items-center justify-center rounded-sm border", |
| 168 | checked ? "border-accent bg-accent text-bg" : "border-line-strong", |
| 169 | )} |
| 170 | > |
| 171 | {checked && <Check size={10} strokeWidth={3} />} |
| 172 | </span> |
| 173 | ) : null, |
| 174 | }; |
| 175 | } |
| 176 | |
| 177 | type ResponseProps = Omit<ComponentProps<typeof Streamdown>, "components" | "children"> & { |
| 178 | children: string; |
| 179 | context: ResponseContext; |
| 180 | /** Still being written: half-written Markdown is finished off as it shows, and a caret follows the words. */ |
| 181 | streaming?: boolean; |
| 182 | }; |
| 183 | |
| 184 | /** An answer from g1t, drawn as it streams and once it is done. */ |
| 185 | export const MessageResponse = memo( |
| 186 | function MessageResponse({ children, context, streaming = false, className, ...props }: ResponseProps) { |
| 187 | const { site, usercontent } = useAddresses(); |
| 188 | const origin = useMemo(() => { |
| 189 | try { |
| 190 | return new URL(site).origin; |
| 191 | } catch { |
| 192 | return ""; |
| 193 | } |
| 194 | }, [site]); |
| 195 | const drawn = useMemo(() => components(context, origin, usercontent), [context, origin, usercontent]); |
| 196 | const rehype = useMemo<PluggableList>( |
| 197 | () => [...Object.values(defaultRehypePlugins), [rehypeReferences, { repo: context.repo ?? undefined, workspace: context.slug }]], |
| 198 | [context.repo, context.slug], |
| 199 | ); |
| 200 | return ( |
| 201 | <Streamdown |
| 202 | mode={streaming ? "streaming" : "static"} |
| 203 | isAnimating={streaming} |
| 204 | caret={streaming ? "block" : undefined} |
| 205 | parseIncompleteMarkdown |
| 206 | skipHtml |
| 207 | controls={false} |
| 208 | linkSafety={{ enabled: false }} |
| 209 | components={drawn} |
| 210 | rehypePlugins={rehype} |
| 211 | className={cn("space-y-2.5 text-[0.9375rem] leading-[1.6] wrap-break-word text-fg-soft", className)} |
| 212 | {...props} |
| 213 | > |
| 214 | {children} |
| 215 | </Streamdown> |
| 216 | ); |
| 217 | }, |
| 218 | (before, after) => before.children === after.children && before.streaming === after.streaming && before.context === after.context, |
| 219 | ); |