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