Fix citation token and chart rendering in markdown parser

Author: owenisas

frontend/src/components/ui/RichText.tsx

@@ -92,6 +92,86 @@ function parseMermaidXyChart(code: string): ParsedGraph | null {
   }
 }
 
+function parseMermaidPieChart(code: string): ParsedGraph | null {
+  if (!/^\s*pie(?:\s+showData)?\s*$/im.test(code)) return null
+
+  const labels: string[] = []
+  const values: number[] = []
+  const dataLineRe = /^\s*(?:"([^"]+)"|'([^']+)'|([^:]+?))\s*:\s*(-?\d+(?:\.\d+)?)\s*$/
+
+  for (const line of code.split("\n")) {
+    const match = line.match(dataLineRe)
+    if (!match) continue
+    const label = (match[1] ?? match[2] ?? match[3] ?? "").trim()
+    const value = Number(match[4])
+    if (!label || !Number.isFinite(value) || value < 0) continue
+    labels.push(label)
+    values.push(value)
+  }
+
+  if (labels.length === 0 || values.every((value) => value === 0)) return null
+  return {
+    type: "pie",
+    labels,
+    series: [{ name: "Value", values }],
+  }
+}
+
+function parseMermaidGraph(code: string): ParsedGraph | null {
+  return parseMermaidXyChart(code) ?? parseMermaidPieChart(code)
+}
+
+const OPENAI_CITATION_OPEN = "\uE200cite\uE202"
+const OPENAI_CITATION_CLOSE = "\uE201"
+
+function parseOpenAICitationToken(text: string, from: number): { length: number; ids: number[] } | null {
+  if (!text.startsWith(OPENAI_CITATION_OPEN, from)) return null
+  const payloadStart = from + OPENAI_CITATION_OPEN.length
+  const end = text.indexOf(OPENAI_CITATION_CLOSE, payloadStart)
+  if (end === -1) return null
+
+  const payload = text.slice(payloadStart, end)
+  const ids: number[] = []
+  const seen = new Set<number>()
+  const matches = payload.matchAll(/turn\d+search(\d+)/gi)
+  for (const match of matches) {
+    const raw = Number(match[1])
+    if (!Number.isFinite(raw)) continue
+    const oneBased = raw + 1
+    if (seen.has(oneBased)) continue
+    seen.add(oneBased)
+    ids.push(oneBased)
+  }
+
+  return { length: end + OPENAI_CITATION_CLOSE.length - from, ids }
+}
+
+function parseLooseMermaidChartBlock(lines: string[], startLine: number): { graph: ParsedGraph; endLine: number; snippet: string } | null {
+  const start = lines[startLine]?.trim() ?? ""
+  const maybeMermaidStart = /^xychart-beta\b/i.test(start) || /^pie(?:\s+showData)?$/i.test(start)
+  if (!maybeMermaidStart) return null
+
+  const collected: string[] = [lines[startLine]]
+  let endLine = startLine
+  for (let i = startLine + 1; i < lines.length; i++) {
+    const t = lines[i].trim()
+    if (!t) break
+    if (/^#{1,6}\s/.test(t)) break
+    if (/^```/.test(t)) break
+    if (/^[-*]\s+/.test(t)) break
+    if (/^\d+[.)]\s+/.test(t)) break
+    if (parseGraphTag(t)) break
+    if (parseTableLine(lines[i])) break
+    collected.push(lines[i])
+    endLine = i
+  }
+
+  const snippet = collected.join("\n")
+  const graph = parseMermaidGraph(snippet)
+  if (!graph) return null
+  return { graph, endLine, snippet }
+}
+
 function findNextIndex(haystack: string, from: number, needle: string): number {
   const idx = haystack.indexOf(needle, from)
   return idx >= 0 ? idx : Number.POSITIVE_INFINITY
@@ -244,6 +324,7 @@ function renderInline(text: string, variant: Variant, COLORS: ThemeColors, VS: R
   let key = 0
 
   while (cursor < text.length) {
+    const nextOpenAICitation = findNextIndex(text, cursor, OPENAI_CITATION_OPEN)
     const nextCode = findNextIndex(text, cursor, "`")
     const nextBoldItalic = allowBold ? findNextIndex(text, cursor, "***") : Number.POSITIVE_INFINITY
     const nextBold = allowBold ? findNextIndex(text, cursor, "**") : Number.POSITIVE_INFINITY
@@ -264,6 +345,7 @@ function renderInline(text: string, variant: Variant, COLORS: ThemeColors, VS: R
       nextDollar,
       nextImgLink,
       nextLink,
+      nextOpenAICitation,
     )
     if (!Number.isFinite(next)) {
       const rest = text.slice(cursor)
@@ -276,6 +358,68 @@ function renderInline(text: string, variant: Variant, COLORS: ThemeColors, VS: R
       cursor = next
     }
 
+    // OpenAI web-search citation token: \uE200cite\uE202turn0searchX...\uE201
+    if (cursor === nextOpenAICitation) {
+      const token = parseOpenAICitationToken(text, cursor)
+      if (token) {
+        const citationText = token.ids.length ? `[${token.ids.join(",")}]` : "[source]"
+        const isSingle = token.ids.length === 1
+        const targetId = isSingle ? `ref-${token.ids[0]}` : "references"
+        const canScroll = token.ids.length > 0
+
+        if (canScroll) {
+          nodes.push(
+            <button
+              key={`cite-openai-${key++}`}
+              type="button"
+              onClick={() => document.getElementById(targetId)?.scrollIntoView({ behavior: "smooth", block: "start" })}
+              style={{
+                font: "inherit",
+                fontSize: "0.7em",
+                color: COLORS.accent,
+                marginLeft: "3px",
+                padding: "1px 6px",
+                border: `1px solid ${COLORS.borderLight}`,
+                borderRadius: "999px",
+                background: "rgba(196,117,0,0.14)",
+                cursor: "pointer",
+                verticalAlign: "super",
+                textDecoration: "none",
+                lineHeight: 1.2,
+              }}
+              title="Jump to references"
+            >
+              {citationText}
+            </button>,
+          )
+        } else {
+          nodes.push(
+            <span
+              key={`cite-openai-${key++}`}
+              style={{
+                fontSize: "0.7em",
+                color: COLORS.accent,
+                marginLeft: "3px",
+                padding: "1px 6px",
+                border: `1px solid ${COLORS.borderLight}`,
+                borderRadius: "999px",
+                background: "rgba(196,117,0,0.14)",
+                verticalAlign: "super",
+                lineHeight: 1.2,
+              }}
+            >
+              {citationText}
+            </span>,
+          )
+        }
+        cursor += token.length
+        continue
+      }
+      nodes.push(<span key={`t-${key++}`}>{text[cursor]}</span>)
+      cursor += 1
+      continue
+    }
+
     // ![alt](url) — markdown image
     if (cursor === nextImgLink) {
       const altEnd = text.indexOf("]", cursor + 2)
@@ -958,6 +1102,50 @@ export function Markdownish({
 
     if (parseGraphTag(trimmed)) continue
 
+    const looseMermaid = parseLooseMermaidChartBlock(lines, i)
+    if (looseMermaid) {
+      i = looseMermaid.endLine
+      const graphActions = effectiveSourceBlockId
+        ? resolveBlockActions("graph", { sourceBlockId: effectiveSourceBlockId }, {
+            chart: looseMermaid.graph,
+            markdownSnippet: looseMermaid.snippet,
+          })
+        : []
+      const graphAnalyze = graphActions.find((action) => action.request.actionType === "analyze")
+      const graphConvertActions = graphActions.filter((action) => action.request.actionType === "convert")
+      elements.push(
+        <GraphBlock
+          key={`loose-mermaid-graph-${i}`}
+          chart={looseMermaid.graph}
+          variant={variant}
+          COLORS={COLORS}
+          onAnalyze={
+            graphAnalyze && onBlockAction
+              ? () => onBlockAction({ ...graphAnalyze.request, sourceBlockId: effectiveSourceBlockId })
+              : undefined
+          }
+          onConvertType={
+            graphConvertActions.length > 0 && onBlockAction
+              ? (targetType) =>
+                  (() => {
+                    const matched =
+                      graphConvertActions.find((action) => action.request.targetGraphType === targetType) ||
+                      graphConvertActions[0]
+                    onBlockAction({
+                      ...matched.request,
+                      sourceBlockId: effectiveSourceBlockId,
+                    })
+                  })()
+              : undefined
+          }
+        />,
+      )
+      continue
+    }
+
+    // Ignore orphan fence delimiters in malformed pasted markdown.
+    if (trimmed === "```") continue
+
     // Markdown image on its own line: ![alt](url)
     const imgLineMatch = trimmed.match(/^!\[([^\]]*)\]\(([^)]+)\)$/)
     if (imgLineMatch) {
@@ -1093,7 +1281,7 @@ export function Markdownish({
         const code = collected.join("\n")
         const lowerLang = lang.toLowerCase()
         if (lowerLang === "mermaid") {
-          const mermaidGraph = parseMermaidXyChart(code)
+          const mermaidGraph = parseMermaidGraph(code)
           if (mermaidGraph) {
             const graphSnippet = `\`\`\`mermaid\n${code}\n\`\`\``
             const graphActions = effectiveSourceBlockId