| 1 | import { Check, Copy } from "lucide-react"; |
| 2 | import { Fragment, type ReactNode, useEffect, useMemo, useState } from "react"; |
| 3 | import { Link } from "react-router"; |
| 4 | |
| 5 | import { MemberCard } from "./profile-card"; |
| 6 | import { CommitChip, IssueChip } from "./ref-chip"; |
| 7 | import { refTarget } from "../../lib/g1t-chat"; |
| 8 | import { Button } from "../ui/button"; |
| 9 | import { Hint } from "../ui/hint"; |
| 10 | import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"; |
| 11 | import { type Block, type Span, blocks, onlyEmoji } from "../../lib/chat"; |
| 12 | // The workspace's own emoji, drawn where `:name:` is written (components/emoji). |
| 13 | import { useEmojiContext } from "../emoji/context"; |
| 14 | import { renderEmoji } from "../emoji/render"; |
| 15 | import { onlyEmojiOrCustom } from "../../lib/emoji"; |
| 16 | |
| 17 | /** How the text's references resolve, from what the page knows. */ |
| 18 | export type TextContext = { |
| 19 | slug: string; |
| 20 | /** The viewer's username: a mention of them stands out more. */ |
| 21 | me: string | null; |
| 22 | /** |
| 23 | * Who each lowercased handle is (`mentionNames`): a mention shows as |
| 24 | * `@Ana Lima`, the name people know. The text keeps `@ana`. |
| 25 | */ |
| 26 | names?: ReadonlyMap<string, string>; |
| 27 | /** Channels by name, for `#name`. */ |
| 28 | channels: ReadonlySet<string>; |
| 29 | /** The project `#123` means when no repository is named, if any. */ |
| 30 | project: string | null; |
| 31 | /** Where a link into Code goes instead, for a member without Code access. */ |
| 32 | codeLink?: (href: string) => string; |
| 33 | }; |
| 34 | |
| 35 | const PILL = "rounded-sm px-1 py-px font-medium"; |
| 36 | |
| 37 | function SpanView({ span, context }: { span: Span; context: TextContext }): ReactNode { |
| 38 | const emoji = useEmojiContext(); |
| 39 | switch (span.t) { |
| 40 | case "text": |
| 41 | return renderEmoji(span.v, emoji.byName, emoji.usercontent); |
| 42 | case "code": |
| 43 | return <code className="rounded-sm border border-line bg-raised px-1 py-px font-mono text-[0.84em] text-fg-soft">{span.v}</code>; |
| 44 | case "strong": |
| 45 | return <strong className="font-semibold text-fg">{spans(span.c, context)}</strong>; |
| 46 | case "em": |
| 47 | return <em>{spans(span.c, context)}</em>; |
| 48 | case "del": |
| 49 | return <del className="text-muted">{spans(span.c, context)}</del>; |
| 50 | case "link": { |
| 51 | // A link to an issue, a pull request or a commit here is its chip (components/chat/ref-chip.tsx). |
| 52 | const target = refTarget(span.href); |
| 53 | if (target?.kind === "issue" && !context.codeLink) { |
| 54 | return <IssueChip slug={context.slug} repo={target.repo} number={target.number} to={target.href} label={spans(span.c, context)} kind={/\/pull\//.test(target.href) ? "pull" : "issue"} />; |
| 55 | } |
| 56 | if (target?.kind === "commit" && !context.codeLink) return <CommitChip href={target.href} sha={target.sha} />; |
| 57 | if (span.href.startsWith("/")) { |
| 58 | return ( |
| 59 | <Link to={context.codeLink ? context.codeLink(span.href) : span.href} className="text-accent underline-offset-2 hover:underline"> |
| 60 | {spans(span.c, context)} |
| 61 | </Link> |
| 62 | ); |
| 63 | } |
| 64 | return ( |
| 65 | <a href={span.href} target="_blank" rel="noopener noreferrer nofollow ugc" className="text-accent underline-offset-2 hover:underline"> |
| 66 | {spans(span.c, context)} |
| 67 | </a> |
| 68 | ); |
| 69 | } |
| 70 | case "mention": { |
| 71 | const name = span.name.toLowerCase(); |
| 72 | const self = context.me != null && name === context.me.toLowerCase(); |
| 73 | const to = name.includes("/") ? `/${context.slug}/-/teams/${name.split("/")[1]}` : `/u/${name}`; |
| 74 | const pill = `${PILL} transition-colors ${self ? "bg-warn/20 text-warn hover:bg-warn/30" : "bg-accent/15 text-accent hover:bg-accent/25"}`; |
| 75 | // A person: their card. A team: its page. |
| 76 | if (name.includes("/")) { |
| 77 | return ( |
| 78 | <Link to={to} className={pill}> |
| 79 | @{span.name} |
| 80 | </Link> |
| 81 | ); |
| 82 | } |
| 83 | const shown = context.names?.get(name); |
| 84 | return ( |
| 85 | <MemberCard member={{ kind: "user", name, display_name: shown }} className={`inline ${pill}`}> |
| 86 | @{shown ?? span.name} |
| 87 | </MemberCard> |
| 88 | ); |
| 89 | } |
| 90 | case "channel": |
| 91 | return context.channels.has(span.name) ? ( |
| 92 | <Link to={`/${context.slug}/-/chat/${span.name}`} className={`${PILL} bg-accent/10 text-accent hover:bg-accent/20`}> |
| 93 | #{span.name} |
| 94 | </Link> |
| 95 | ) : ( |
| 96 | `#${span.name}` |
| 97 | ); |
| 98 | case "ref": { |
| 99 | const repo = span.repo ? (span.repo.includes("/") ? span.repo : `${context.slug}/${span.repo}`) : context.project ? `${context.slug}/${context.project}` : null; |
| 100 | const label = `${span.repo ? span.repo : ""}#${span.number}`; |
| 101 | if (!repo) return <span className="font-medium text-fg-soft">{label}</span>; |
| 102 | // Issues and pull requests share numbers; the issue page sends a pull on. |
| 103 | const href = `/${repo}/issues/${span.number}`; |
| 104 | if (!context.codeLink) return <IssueChip slug={context.slug} repo={repo} number={span.number} label={label} />; |
| 105 | return ( |
| 106 | <Link to={context.codeLink ? context.codeLink(href) : href} className="font-medium text-accent hover:underline"> |
| 107 | {label} |
| 108 | </Link> |
| 109 | ); |
| 110 | } |
| 111 | } |
| 112 | } |
| 113 | |
| 114 | function spans(list: Span[], context: TextContext): ReactNode { |
| 115 | return list.map((span, index) => <SpanView key={index} span={span} context={context} />); |
| 116 | } |
| 117 | |
| 118 | function lines(list: Span[][], context: TextContext): ReactNode { |
| 119 | return list.map((line, index) => ( |
| 120 | <Fragment key={index}> |
| 121 | {index > 0 && <br />} |
| 122 | {spans(line, context)} |
| 123 | </Fragment> |
| 124 | )); |
| 125 | } |
| 126 | |
| 127 | /** A run of blocks, a little apart. */ |
| 128 | function BlocksView({ list, context, className = "space-y-1.5" }: { list: Block[]; context: TextContext; className?: string }) { |
| 129 | return ( |
| 130 | <div className={className}> |
| 131 | {list.map((block, index) => ( |
| 132 | <BlockView key={index} block={block} context={context} /> |
| 133 | ))} |
| 134 | </div> |
| 135 | ); |
| 136 | } |
| 137 | |
| 138 | function ListItem({ item, context }: { item: Block[]; context: TextContext }) { |
| 139 | // An item of one paragraph is its lines; one with more holds its blocks. |
| 140 | if (item.length === 1 && item[0]!.t === "p") return <li className="pl-0.5">{lines(item[0]!.lines, context)}</li>; |
| 141 | return ( |
| 142 | <li className="pl-0.5"> |
| 143 | <BlocksView list={item} context={context} className="space-y-1" /> |
| 144 | </li> |
| 145 | ); |
| 146 | } |
| 147 | |
| 148 | function BlockView({ block, context }: { block: Block; context: TextContext }) { |
| 149 | switch (block.t) { |
| 150 | case "p": |
| 151 | return <p>{lines(block.lines, context)}</p>; |
| 152 | case "heading": |
| 153 | // Chat, not a document: a heading is a bold line with room above it, the top two a touch larger. |
| 154 | return <p className={`pt-1.5 font-semibold tracking-[-0.005em] text-fg first:pt-0 ${block.level <= 2 ? "text-base" : ""}`}>{spans(block.c, context)}</p>; |
| 155 | case "table": |
| 156 | return <TableView block={block} context={context} />; |
| 157 | case "hr": |
| 158 | return <hr className="my-2 border-line" />; |
| 159 | case "code": |
| 160 | return <CodeBlock language={block.lang} code={block.v} />; |
| 161 | case "list": { |
| 162 | const Tag = block.ordered ? "ol" : "ul"; |
| 163 | return ( |
| 164 | <Tag start={block.ordered && block.start !== 1 ? block.start : undefined} className={`space-y-0.5 pl-5 ${block.ordered ? "list-decimal" : "list-disc"} marker:text-faint`}> |
| 165 | {block.items.map((item, index) => ( |
| 166 | <ListItem key={index} item={item} context={context} /> |
| 167 | ))} |
| 168 | </Tag> |
| 169 | ); |
| 170 | } |
| 171 | case "quote": |
| 172 | return ( |
| 173 | <blockquote className="border-l-2 border-line-strong pl-3 text-muted"> |
| 174 | <BlocksView list={block.c} context={context} className="space-y-1" /> |
| 175 | </blockquote> |
| 176 | ); |
| 177 | } |
| 178 | } |
| 179 | |
| 180 | /** |
| 181 | * A table, as the theme draws tables in rendered Markdown: a quiet header |
| 182 | * row, lines between rows, and its columns aligned as written. A wide one |
| 183 | * scrolls sideways inside the message, never the page, and takes focus so |
| 184 | * it can be scrolled from the keyboard. |
| 185 | */ |
| 186 | function TableView({ block, context }: { block: Extract<Block, { t: "table" }>; context: TextContext }) { |
| 187 | const align = (index: number) => block.align[index] ?? undefined; |
| 188 | return ( |
| 189 | <Table frameProps={{ role: "region", "aria-label": "Table", tabIndex: 0, className: "my-1 rounded-lg border border-line" }} className="min-w-max text-[0.8125rem] leading-snug sm:min-w-full"> |
| 190 | <TableHeader> |
| 191 | <TableRow> |
| 192 | {block.head.map((cell, index) => ( |
| 193 | <TableHead key={index} scope="col" style={{ textAlign: align(index) }}> |
| 194 | {spans(cell, context)} |
| 195 | </TableHead> |
| 196 | ))} |
| 197 | </TableRow> |
| 198 | </TableHeader> |
| 199 | <TableBody> |
| 200 | {block.rows.map((row, at) => ( |
| 201 | <TableRow key={at}> |
| 202 | {row.map((cell, index) => ( |
| 203 | <TableCell key={index} style={{ textAlign: align(index) }} className={align(index) === "right" ? "whitespace-nowrap tabular-nums" : "max-w-lg"}> |
| 204 | {spans(cell, context)} |
| 205 | </TableCell> |
| 206 | ))} |
| 207 | </TableRow> |
| 208 | ))} |
| 209 | </TableBody> |
| 210 | </Table> |
| 211 | ); |
| 212 | } |
| 213 | |
| 214 | type Token = { content: string; color?: string }; |
| 215 | |
| 216 | /** |
| 217 | * Fenced code: plain at once, coloured once the highlighter has loaded |
| 218 | * when its language is one g1t knows (lib/shiki.ts), with a copy button. |
| 219 | * The colours are tokens drawn as text, never HTML. |
| 220 | */ |
| 221 | export function CodeBlock({ language, code, title = null, bar = false }: { language: string | null; code: string; title?: string | null; bar?: boolean }) { |
| 222 | // The colours as last worked out, for the code they were worked out for: |
| 223 | // while an answer streams in, the code grows, and what is new shows plain |
| 224 | // after what is already coloured until the next pass, never flickering. |
| 225 | const [painted, setPainted] = useState<{ code: string; rows: Token[][] } | null>(null); |
| 226 | const [copied, setCopied] = useState(false); |
| 227 | useEffect(() => { |
| 228 | if (!language || code.length > 20_000) return setPainted(null); |
| 229 | let cancelled = false; |
| 230 | void import("../../lib/shiki") |
| 231 | .then(async ({ getHighlighter, languageNamed, tokenRows }) => { |
| 232 | const lang = languageNamed(language); |
| 233 | if (!lang) return null; |
| 234 | return tokenRows(await getHighlighter(), code, lang); |
| 235 | }) |
| 236 | .then((tokens) => { |
| 237 | if (!cancelled) setPainted(tokens ? { code, rows: tokens } : null); |
| 238 | }) |
| 239 | .catch(() => {}); |
| 240 | return () => { |
| 241 | cancelled = true; |
| 242 | }; |
| 243 | }, [language, code]); |
| 244 | const rows = painted && code.startsWith(painted.code) ? painted.rows : null; |
| 245 | const rest = rows ? code.slice(painted!.code.length) : code; |
| 246 | const copy = ( |
| 247 | <Hint label={copied ? "Copied" : "Copy code"}> |
| 248 | <Button |
| 249 | type="button" |
| 250 | aria-label="Copy code" |
| 251 | onClick={() => { |
| 252 | void navigator.clipboard?.writeText(code).then(() => { |
| 253 | setCopied(true); |
| 254 | setTimeout(() => setCopied(false), 1500); |
| 255 | }); |
| 256 | }} |
| 257 | variant={bar ? "ghost" : "outline"} |
| 258 | size="icon" |
| 259 | className={bar ? "size-6 text-faint hover:text-fg" : "size-6 bg-raised text-muted"} |
| 260 | > |
| 261 | {copied ? <Check size={12} className="text-success" /> : <Copy size={12} />} |
| 262 | </Button> |
| 263 | </Hint> |
| 264 | ); |
| 265 | const body = ( |
| 266 | <code> |
| 267 | {rows?.map((row, index) => ( |
| 268 | <span key={index} className={index < rows.length - 1 || !rest ? "block min-h-lh" : undefined}> |
| 269 | {row.map((token, at) => ( |
| 270 | <span key={at} style={token.color ? { color: token.color } : undefined}> |
| 271 | {token.content} |
| 272 | </span> |
| 273 | ))} |
| 274 | </span> |
| 275 | ))} |
| 276 | {rest} |
| 277 | </code> |
| 278 | ); |
| 279 | // In g1t's answers: a bar over the code with its file name or language, and Copy always there. |
| 280 | if (bar) { |
| 281 | return ( |
| 282 | <div className="my-1 overflow-hidden rounded-lg border border-line bg-bg"> |
| 283 | <div className="flex h-8 items-center gap-2 border-b border-line bg-surface pr-1 pl-3"> |
| 284 | <span className="min-w-0 grow truncate font-mono text-[0.6875rem] text-muted">{title ?? language ?? "text"}</span> |
| 285 | {copy} |
| 286 | </div> |
| 287 | <pre className="max-h-112 overflow-auto px-3 py-2 font-mono text-[0.8125rem] leading-relaxed text-fg-soft scrollbar-thin">{body}</pre> |
| 288 | </div> |
| 289 | ); |
| 290 | } |
| 291 | return ( |
| 292 | <div className="group/code relative my-1"> |
| 293 | <pre className="overflow-x-auto rounded-md border border-line bg-bg px-3 py-2 pointer-coarse:pr-10 font-mono text-[0.8125rem] leading-relaxed text-fg-soft scrollbar-thin">{body}</pre> |
| 294 | <div className="absolute top-1.5 right-1.5 flex items-center gap-2 opacity-0 transition-opacity group-hover/code:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100"> |
| 295 | {language && <span className="font-mono text-[0.6875rem] text-faint pointer-coarse:hidden">{language}</span>} |
| 296 | {copy} |
| 297 | </div> |
| 298 | </div> |
| 299 | ); |
| 300 | } |
| 301 | |
| 302 | /** A message's text, rendered from parsed blocks: never as HTML. */ |
| 303 | export function MessageText({ body, context }: { body: string; context: TextContext }) { |
| 304 | const parsed = useMemo(() => blocks(body), [body]); |
| 305 | const emoji = useEmojiContext(); |
| 306 | if (onlyEmoji(body)) return <p className="text-3xl leading-tight">{body.trim()}</p>; |
| 307 | if (onlyEmojiOrCustom(body, emoji.byName)) return <p className="text-3xl leading-tight">{renderEmoji(body.trim(), emoji.byName, emoji.usercontent, 32)}</p>; |
| 308 | return ( |
| 309 | <div className="space-y-1.5 text-[0.9375rem] leading-[1.55] wrap-break-word text-fg-soft"> |
| 310 | {parsed.map((block, index) => ( |
| 311 | <BlockView key={index} block={block} context={context} /> |
| 312 | ))} |
| 313 | </div> |
| 314 | ); |
| 315 | } |