mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
Compare commits
6 Commits
d3be96de79
...
63398d9f34
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
63398d9f34 | ||
|
|
82f4deb23a | ||
|
|
1fab261cd0 | ||
|
|
7a4a04c263 | ||
|
|
0d2e7a7ad6 | ||
|
|
3218ccc909 |
@@ -36,6 +36,7 @@ import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
|
|||||||
import { useQuotaManager } from "@/lib/use-quota-manager"
|
import { useQuotaManager } from "@/lib/use-quota-manager"
|
||||||
import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
|
import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
|
||||||
import { ChatMessageDisplay } from "./chat-message-display"
|
import { ChatMessageDisplay } from "./chat-message-display"
|
||||||
|
import { DevXmlSimulator } from "./dev-xml-simulator"
|
||||||
|
|
||||||
// localStorage keys for persistence
|
// localStorage keys for persistence
|
||||||
const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
|
const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
|
||||||
@@ -76,6 +77,7 @@ interface ChatPanelProps {
|
|||||||
const TOOL_ERROR_STATE = "output-error" as const
|
const TOOL_ERROR_STATE = "output-error" as const
|
||||||
const DEBUG = process.env.NODE_ENV === "development"
|
const DEBUG = process.env.NODE_ENV === "development"
|
||||||
const MAX_AUTO_RETRY_COUNT = 1
|
const MAX_AUTO_RETRY_COUNT = 1
|
||||||
|
|
||||||
const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
|
const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -1337,6 +1339,14 @@ Continue from EXACTLY where you stopped.`,
|
|||||||
/>
|
/>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
{/* Dev XML Streaming Simulator - only in development */}
|
||||||
|
{DEBUG && (
|
||||||
|
<DevXmlSimulator
|
||||||
|
setMessages={setMessages}
|
||||||
|
onDisplayChart={onDisplayChart}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Input */}
|
{/* Input */}
|
||||||
<footer
|
<footer
|
||||||
className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}
|
className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}
|
||||||
|
|||||||
350
components/dev-xml-simulator.tsx
Normal file
350
components/dev-xml-simulator.tsx
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from "react"
|
||||||
|
import { wrapWithMxFile } from "@/lib/utils"
|
||||||
|
|
||||||
|
// Dev XML presets for streaming simulator
|
||||||
|
const DEV_XML_PRESETS: Record<string, string> = {
|
||||||
|
"Simple Box": `<mxCell id="2" value="Hello World" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
|
||||||
|
</mxCell>`,
|
||||||
|
"Two Boxes with Arrow": `<mxCell id="2" value="Start" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="100" y="100" width="100" height="50" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="3" value="End" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="300" y="100" width="100" height="50" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="4" value="" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>`,
|
||||||
|
Flowchart: `<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="160" y="40" width="80" height="40" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="3" value="Process A" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="140" y="120" width="120" height="60" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="4" value="Decision" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="150" y="220" width="100" height="80" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="5" value="Process B" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="300" y="230" width="120" height="60" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="6" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="160" y="340" width="80" height="40" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="7" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="8" style="endArrow=classic;html=1;" edge="1" parent="1" source="3" target="4">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="9" value="Yes" style="endArrow=classic;html=1;" edge="1" parent="1" source="4" target="6">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="10" value="No" style="endArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="4" target="5">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>`,
|
||||||
|
"Truncated (Error Test)": `<mxCell id="2" value="This cell is truncated" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="3" value="Incomplete" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor`,
|
||||||
|
"HTML Escape + Cell Truncate": `<mxCell id="2" value="<b>Chain-of-Thought Prompting</b><br/><font size='12'>Eliciting Reasoning in Large Language Models</font>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontStyle=1;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="40" y="40" width="720" height="60" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="3" value="<b>Problem: LLM Reasoning Limitations</b><br/>• Scaling parameters alone insufficient for logical tasks<br/>• Arithmetic, commonsense, symbolic reasoning challenges<br/>• Standard prompting fails on multi-step problems" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="40" y="120" width="340" height="120" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="4" value="<b>Traditional Approaches</b><br/>1. <b>Finetuning:</b> Expensive, task-specific<br/>2. <b>Standard Few-Shot:</b> Input→Output pairs<br/> (No explanation of reasoning)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="420" y="120" width="340" height="120" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="5" value="<b>CoT Methodology</b><br/>• Add reasoning steps to few-shot examples<br/>• Natural language intermediate steps<br/>• No parameter updates needed<br/>• Model learns to generate own thought process" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="40" y="260" width="340" height="100" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="6" value="<b>Example Comparison</b><br/><b>Standard:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: 11.<br/><br/><b>CoT:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: Roger started with 5 balls. 2 cans of 3 tennis balls each is 6 tennis balls. 5 + 6 = 11. The answer is 11." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="420" y="260" width="340" height="140" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="7" value="<b>Experimental Models</b><br/>• GPT-3 (175B)<br/>• LaMDA (137B)<br/>• PaLM (540B)<br/>• UL2 (20B)<br/>• Codex" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="40" y="380" width="340" height="100" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="8" value="<b>Reasoning Domains Tested</b><br/>1. <b>Arithmetic:</b> GSM8K, SVAMP, ASDiv, AQuA, MAWPS<br/>2. <b>Commonsense:</b> CSQA, StrategyQA, Date Understanding, Sports Understanding<br/>3. <b>Symbolic:</b> Last Letter Concatenation, Coin Flip" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="420" y="420" width="340" height="100" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="9" value="<b>Key Results: Arithmetic</b><br/>• PaLM 540B + CoT: <b>56.9%</b> on GSM8K<br/> (vs 17.9% standard)<br/>• Surpassed finetuned GPT-3 (55%)<br/>• With calculator: <b>58.6%</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="40" y="500" width="220" height="100" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="10" value="<b>Key Results: Commonsense</b><br/>• StrategyQA: <b>75.6%</b><br/> (vs 69.4% SOTA)<br/>• Sports Understanding: <b>95.4%</b><br/> (vs 84% human)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="280" y="500" width="220" height="100" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="11" value="<b>Key Results: Symbolic</b><br/>• OOD Generalization<br/>• Coin Flip: Trained on 2 flips<br/> Works on 3-4 flips with CoT<br/>• Standard prompting fails" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="540" y="500" width="220" height="100" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="12" value="<b>Emergent Ability of Scale</b><br/>• Small models (<10B): No benefit, often harmful<br/>• Large models (100B+): Reasoning emerges<br/>• CoT gains increase dramatically with scale" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="40" y="620" width="340" height="80" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="13" value="<b>Ablation Studies</b><br/>1. Equation only: Worse than CoT<br/>2. Variable compute (...): No improvement<br/>3. Answer first, then reasoning: Same as baseline<br/>→ Content matters, not just extra tokens" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="420" y="620" width="340" height="80" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="14" value="<b>Error Analysis</b><br/>• Semantic understanding errors<br/>• One-step missing errors<br/>• Calculation errors<br/>• Larger models reduce semantic/missing-step errors" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="40" y="720" width="340" height="80" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="15" value="<b>Conclusion</b><br/>• CoT unlocks reasoning potential<br/>• Simple paradigm: "show your work"<br/>• Emergent capability of large models<br/>• No specialized architecture needed" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
|
||||||
|
<mxGeometry x="420" y="720" width="340" height="80" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="3" target="5">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="4" target="6">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="5" target="7">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="6" target="8">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.25;entryY=0;" edge="1" parent="1" source="7" target="9">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="7" target="10">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.75;entryY=0;" edge="1" parent="1" source="7" target="11">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="9" target="12">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="10" target="13">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="11" target="14">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="12" target="15">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="13" target="15">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>
|
||||||
|
<mxCell id="28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="14" target="15">
|
||||||
|
<mxGeometry relative="1" as="geometry"/>
|
||||||
|
</mxCell>`,
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DevXmlSimulatorProps {
|
||||||
|
setMessages: React.Dispatch<React.SetStateAction<any[]>>
|
||||||
|
onDisplayChart: (xml: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DevXmlSimulator({
|
||||||
|
setMessages,
|
||||||
|
onDisplayChart,
|
||||||
|
}: DevXmlSimulatorProps) {
|
||||||
|
const [devXml, setDevXml] = useState("")
|
||||||
|
const [isSimulating, setIsSimulating] = useState(false)
|
||||||
|
const [devIntervalMs, setDevIntervalMs] = useState(1)
|
||||||
|
const [devChunkSize, setDevChunkSize] = useState(10)
|
||||||
|
const devStopRef = useRef(false)
|
||||||
|
const devXmlInitializedRef = useRef(false)
|
||||||
|
|
||||||
|
// Restore dev XML from localStorage on mount (after hydration)
|
||||||
|
useEffect(() => {
|
||||||
|
const saved = localStorage.getItem("dev-xml-simulator")
|
||||||
|
if (saved) setDevXml(saved)
|
||||||
|
devXmlInitializedRef.current = true
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Save dev XML to localStorage (only after initial load)
|
||||||
|
useEffect(() => {
|
||||||
|
if (devXmlInitializedRef.current) {
|
||||||
|
localStorage.setItem("dev-xml-simulator", devXml)
|
||||||
|
}
|
||||||
|
}, [devXml])
|
||||||
|
|
||||||
|
const handleDevSimulate = async () => {
|
||||||
|
if (!devXml.trim() || isSimulating) return
|
||||||
|
|
||||||
|
setIsSimulating(true)
|
||||||
|
devStopRef.current = false
|
||||||
|
const toolCallId = `dev-sim-${Date.now()}`
|
||||||
|
const xml = devXml.trim()
|
||||||
|
|
||||||
|
// Add user message and initial assistant message with empty XML
|
||||||
|
const userMsg = {
|
||||||
|
id: `user-${Date.now()}`,
|
||||||
|
role: "user" as const,
|
||||||
|
parts: [
|
||||||
|
{
|
||||||
|
type: "text" as const,
|
||||||
|
text: "[Dev] Simulating XML streaming",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
const assistantMsg = {
|
||||||
|
id: `assistant-${Date.now()}`,
|
||||||
|
role: "assistant" as const,
|
||||||
|
parts: [
|
||||||
|
{
|
||||||
|
type: "tool-display_diagram" as const,
|
||||||
|
toolCallId,
|
||||||
|
state: "input-streaming" as const,
|
||||||
|
input: { xml: "" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
setMessages((prev) => [...prev, userMsg, assistantMsg] as any)
|
||||||
|
|
||||||
|
// Stream characters progressively
|
||||||
|
for (let i = 0; i < xml.length; i += devChunkSize) {
|
||||||
|
if (devStopRef.current) {
|
||||||
|
setIsSimulating(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const chunk = xml.slice(0, i + devChunkSize)
|
||||||
|
|
||||||
|
setMessages((prev) => {
|
||||||
|
const updated = [...prev]
|
||||||
|
const lastMsg = updated[updated.length - 1] as any
|
||||||
|
if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
|
||||||
|
lastMsg.parts[0].input = { xml: chunk }
|
||||||
|
}
|
||||||
|
return updated
|
||||||
|
})
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, devIntervalMs))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (devStopRef.current) {
|
||||||
|
setIsSimulating(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Finalize: set state to output-available
|
||||||
|
setMessages((prev) => {
|
||||||
|
const updated = [...prev]
|
||||||
|
const lastMsg = updated[updated.length - 1] as any
|
||||||
|
if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
|
||||||
|
lastMsg.parts[0].state = "output-available"
|
||||||
|
lastMsg.parts[0].output = "Successfully displayed the diagram."
|
||||||
|
lastMsg.parts[0].input = { xml }
|
||||||
|
}
|
||||||
|
return updated
|
||||||
|
})
|
||||||
|
|
||||||
|
// Display the final diagram
|
||||||
|
const fullXml = wrapWithMxFile(xml)
|
||||||
|
onDisplayChart(fullXml)
|
||||||
|
|
||||||
|
setIsSimulating(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-t border-dashed border-orange-500/50 px-4 py-2 bg-orange-50/50 dark:bg-orange-950/30">
|
||||||
|
<details>
|
||||||
|
<summary className="text-xs text-orange-600 dark:text-orange-400 cursor-pointer font-medium">
|
||||||
|
Dev: XML Streaming Simulator
|
||||||
|
</summary>
|
||||||
|
<div className="mt-2 space-y-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="text-xs text-muted-foreground whitespace-nowrap">
|
||||||
|
Preset:
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e.target.value) {
|
||||||
|
setDevXml(DEV_XML_PRESETS[e.target.value])
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="flex-1 text-xs p-1 border rounded bg-background"
|
||||||
|
defaultValue=""
|
||||||
|
>
|
||||||
|
<option value="" disabled>
|
||||||
|
Select a preset...
|
||||||
|
</option>
|
||||||
|
{Object.keys(DEV_XML_PRESETS).map((name) => (
|
||||||
|
<option key={name} value={name}>
|
||||||
|
{name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setDevXml("")}
|
||||||
|
className="px-2 py-1 text-xs text-muted-foreground hover:text-foreground border rounded"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
value={devXml}
|
||||||
|
onChange={(e) => setDevXml(e.target.value)}
|
||||||
|
placeholder="Paste mxCell XML here or select a preset..."
|
||||||
|
className="w-full h-24 text-xs font-mono p-2 border rounded bg-background"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex items-center gap-2 flex-1">
|
||||||
|
<label className="text-xs text-muted-foreground whitespace-nowrap">
|
||||||
|
Interval:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="200"
|
||||||
|
step="1"
|
||||||
|
value={devIntervalMs}
|
||||||
|
onChange={(e) =>
|
||||||
|
setDevIntervalMs(Number(e.target.value))
|
||||||
|
}
|
||||||
|
className="flex-1 h-1 accent-orange-500"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-muted-foreground w-12">
|
||||||
|
{devIntervalMs}ms
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="text-xs text-muted-foreground whitespace-nowrap">
|
||||||
|
Chars:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="100"
|
||||||
|
value={devChunkSize}
|
||||||
|
onChange={(e) =>
|
||||||
|
setDevChunkSize(
|
||||||
|
Math.max(1, Number(e.target.value)),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="w-14 text-xs p-1 border rounded bg-background"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleDevSimulate}
|
||||||
|
disabled={isSimulating || !devXml.trim()}
|
||||||
|
className="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isSimulating
|
||||||
|
? "Streaming..."
|
||||||
|
: `Simulate (${devChunkSize} chars/${devIntervalMs}ms)`}
|
||||||
|
</button>
|
||||||
|
{isSimulating && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
devStopRef.current = true
|
||||||
|
}}
|
||||||
|
className="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
|
||||||
|
>
|
||||||
|
Stop
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -14,22 +14,14 @@ export function register() {
|
|||||||
publicKey: process.env.LANGFUSE_PUBLIC_KEY,
|
publicKey: process.env.LANGFUSE_PUBLIC_KEY,
|
||||||
secretKey: process.env.LANGFUSE_SECRET_KEY,
|
secretKey: process.env.LANGFUSE_SECRET_KEY,
|
||||||
baseUrl: process.env.LANGFUSE_BASEURL,
|
baseUrl: process.env.LANGFUSE_BASEURL,
|
||||||
// Filter out Next.js HTTP request spans so AI SDK spans become root traces
|
// Whitelist approach: only export AI-related spans
|
||||||
shouldExportSpan: ({ otelSpan }) => {
|
shouldExportSpan: ({ otelSpan }) => {
|
||||||
const spanName = otelSpan.name
|
const spanName = otelSpan.name
|
||||||
// Skip Next.js HTTP infrastructure spans
|
// Only export AI SDK spans (ai.*) and our explicit "chat" wrapper
|
||||||
if (
|
if (spanName === "chat" || spanName.startsWith("ai.")) {
|
||||||
spanName.startsWith("POST") ||
|
return true
|
||||||
spanName.startsWith("GET") ||
|
|
||||||
spanName.startsWith("RSC") ||
|
|
||||||
spanName.includes("BaseServer") ||
|
|
||||||
spanName.includes("handleRequest") ||
|
|
||||||
spanName.includes("resolve page") ||
|
|
||||||
spanName.includes("start response")
|
|
||||||
) {
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
return true
|
return false
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -9,6 +9,30 @@ import {
|
|||||||
// OSS users who don't need quota tracking can simply not set this env var
|
// OSS users who don't need quota tracking can simply not set this env var
|
||||||
const TABLE = process.env.DYNAMODB_QUOTA_TABLE
|
const TABLE = process.env.DYNAMODB_QUOTA_TABLE
|
||||||
const DYNAMODB_REGION = process.env.DYNAMODB_REGION || "ap-northeast-1"
|
const DYNAMODB_REGION = process.env.DYNAMODB_REGION || "ap-northeast-1"
|
||||||
|
// Timezone for daily quota reset (e.g., "Asia/Tokyo" for JST midnight reset)
|
||||||
|
// Defaults to UTC if not set
|
||||||
|
let QUOTA_TIMEZONE = process.env.QUOTA_TIMEZONE || "UTC"
|
||||||
|
|
||||||
|
// Validate timezone at module load
|
||||||
|
try {
|
||||||
|
new Intl.DateTimeFormat("en-CA", { timeZone: QUOTA_TIMEZONE }).format(
|
||||||
|
new Date(),
|
||||||
|
)
|
||||||
|
} catch {
|
||||||
|
console.warn(
|
||||||
|
`[quota] Invalid QUOTA_TIMEZONE "${QUOTA_TIMEZONE}", using UTC`,
|
||||||
|
)
|
||||||
|
QUOTA_TIMEZONE = "UTC"
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get today's date string in the configured timezone (YYYY-MM-DD format)
|
||||||
|
*/
|
||||||
|
function getTodayInTimezone(): string {
|
||||||
|
return new Intl.DateTimeFormat("en-CA", {
|
||||||
|
timeZone: QUOTA_TIMEZONE,
|
||||||
|
}).format(new Date())
|
||||||
|
}
|
||||||
|
|
||||||
// Only create client if quota is enabled
|
// Only create client if quota is enabled
|
||||||
const client = TABLE ? new DynamoDBClient({ region: DYNAMODB_REGION }) : null
|
const client = TABLE ? new DynamoDBClient({ region: DYNAMODB_REGION }) : null
|
||||||
@@ -49,32 +73,67 @@ export async function checkAndIncrementRequest(
|
|||||||
return { allowed: true }
|
return { allowed: true }
|
||||||
}
|
}
|
||||||
|
|
||||||
const today = new Date().toISOString().split("T")[0]
|
const today = getTodayInTimezone()
|
||||||
const currentMinute = Math.floor(Date.now() / 60000).toString()
|
const currentMinute = Math.floor(Date.now() / 60000).toString()
|
||||||
const ttl = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60
|
const ttl = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Atomic check-and-increment with ConditionExpression
|
// First, try to reset counts if it's a new day (atomic day reset)
|
||||||
// This prevents race conditions by failing if limits are exceeded
|
// This will succeed only if lastResetDate < today or doesn't exist
|
||||||
|
try {
|
||||||
|
await client.send(
|
||||||
|
new UpdateItemCommand({
|
||||||
|
TableName: TABLE,
|
||||||
|
Key: { PK: { S: `IP#${ip}` } },
|
||||||
|
// Reset all counts to 1/0 for the new day
|
||||||
|
UpdateExpression: `
|
||||||
|
SET lastResetDate = :today,
|
||||||
|
dailyReqCount = :one,
|
||||||
|
dailyTokenCount = :zero,
|
||||||
|
lastMinute = :minute,
|
||||||
|
tpmCount = :zero,
|
||||||
|
#ttl = :ttl
|
||||||
|
`,
|
||||||
|
// Only succeed if it's a new day (or new item)
|
||||||
|
ConditionExpression: `
|
||||||
|
attribute_not_exists(lastResetDate) OR lastResetDate < :today
|
||||||
|
`,
|
||||||
|
ExpressionAttributeNames: { "#ttl": "ttl" },
|
||||||
|
ExpressionAttributeValues: {
|
||||||
|
":today": { S: today },
|
||||||
|
":zero": { N: "0" },
|
||||||
|
":one": { N: "1" },
|
||||||
|
":minute": { S: currentMinute },
|
||||||
|
":ttl": { N: String(ttl) },
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
// New day reset successful
|
||||||
|
return { allowed: true }
|
||||||
|
} catch (resetError: any) {
|
||||||
|
// If condition failed, it's the same day - continue to increment logic
|
||||||
|
if (!(resetError instanceof ConditionalCheckFailedException)) {
|
||||||
|
throw resetError // Re-throw unexpected errors
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Same day - increment request count with limit checks
|
||||||
await client.send(
|
await client.send(
|
||||||
new UpdateItemCommand({
|
new UpdateItemCommand({
|
||||||
TableName: TABLE,
|
TableName: TABLE,
|
||||||
Key: { PK: { S: `IP#${ip}` } },
|
Key: { PK: { S: `IP#${ip}` } },
|
||||||
// Reset counts if new day/minute, then increment request count
|
// Increment request count, handle minute boundary for TPM
|
||||||
UpdateExpression: `
|
UpdateExpression: `
|
||||||
SET lastResetDate = :today,
|
SET lastMinute = :minute,
|
||||||
dailyReqCount = if_not_exists(dailyReqCount, :zero) + :one,
|
|
||||||
dailyTokenCount = if_not_exists(dailyTokenCount, :zero),
|
|
||||||
lastMinute = :minute,
|
|
||||||
tpmCount = if_not_exists(tpmCount, :zero),
|
tpmCount = if_not_exists(tpmCount, :zero),
|
||||||
#ttl = :ttl
|
#ttl = :ttl
|
||||||
|
ADD dailyReqCount :one
|
||||||
`,
|
`,
|
||||||
// Atomic condition: only succeed if ALL limits pass
|
// Check all limits before allowing increment
|
||||||
// Uses attribute_not_exists for new items, then checks limits for existing items
|
|
||||||
ConditionExpression: `
|
ConditionExpression: `
|
||||||
(attribute_not_exists(lastResetDate) OR lastResetDate < :today OR
|
lastResetDate = :today AND
|
||||||
((attribute_not_exists(dailyReqCount) OR dailyReqCount < :reqLimit) AND
|
(attribute_not_exists(dailyReqCount) OR dailyReqCount < :reqLimit) AND
|
||||||
(attribute_not_exists(dailyTokenCount) OR dailyTokenCount < :tokenLimit))) AND
|
(attribute_not_exists(dailyTokenCount) OR dailyTokenCount < :tokenLimit) AND
|
||||||
(attribute_not_exists(lastMinute) OR lastMinute <> :minute OR
|
(attribute_not_exists(lastMinute) OR lastMinute <> :minute OR
|
||||||
attribute_not_exists(tpmCount) OR tpmCount < :tpmLimit)
|
attribute_not_exists(tpmCount) OR tpmCount < :tpmLimit)
|
||||||
`,
|
`,
|
||||||
|
|||||||
159
lib/utils.ts
159
lib/utils.ts
@@ -36,29 +36,32 @@ const VALID_ENTITIES = new Set(["lt", "gt", "amp", "quot", "apos"])
|
|||||||
/**
|
/**
|
||||||
* Check if mxCell XML output is complete (not truncated).
|
* Check if mxCell XML output is complete (not truncated).
|
||||||
* Complete XML ends with a self-closing tag (/>) or closing mxCell tag.
|
* Complete XML ends with a self-closing tag (/>) or closing mxCell tag.
|
||||||
* Also handles function-calling wrapper tags that may be incorrectly included.
|
* Uses a robust approach that handles any LLM provider's wrapper tags
|
||||||
|
* by finding the last valid mxCell ending and checking if suffix is just closing tags.
|
||||||
* @param xml - The XML string to check (can be undefined/null)
|
* @param xml - The XML string to check (can be undefined/null)
|
||||||
* @returns true if XML appears complete, false if truncated or empty
|
* @returns true if XML appears complete, false if truncated or empty
|
||||||
*/
|
*/
|
||||||
export function isMxCellXmlComplete(xml: string | undefined | null): boolean {
|
export function isMxCellXmlComplete(xml: string | undefined | null): boolean {
|
||||||
let trimmed = xml?.trim() || ""
|
const trimmed = xml?.trim() || ""
|
||||||
if (!trimmed) return false
|
if (!trimmed) return false
|
||||||
|
|
||||||
// Strip Anthropic function-calling wrapper tags if present
|
// Find position of last complete mxCell ending (either /> or </mxCell>)
|
||||||
// These can leak into tool input due to AI SDK parsing issues
|
const lastSelfClose = trimmed.lastIndexOf("/>")
|
||||||
// Use loop because tags are nested: </mxCell></mxParameter></invoke>
|
const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")
|
||||||
let prev = ""
|
|
||||||
while (prev !== trimmed) {
|
|
||||||
prev = trimmed
|
|
||||||
trimmed = trimmed
|
|
||||||
.replace(/<\/mxParameter>\s*$/i, "")
|
|
||||||
.replace(/<\/invoke>\s*$/i, "")
|
|
||||||
.replace(/<\/antml:parameter>\s*$/i, "")
|
|
||||||
.replace(/<\/antml:invoke>\s*$/i, "")
|
|
||||||
.trim()
|
|
||||||
}
|
|
||||||
|
|
||||||
return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
|
const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
|
||||||
|
|
||||||
|
// No valid ending found at all
|
||||||
|
if (lastValidEnd === -1) return false
|
||||||
|
|
||||||
|
// Check what comes after the last valid ending
|
||||||
|
// For />: add 2 chars, for </mxCell>: add 9 chars
|
||||||
|
const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
|
||||||
|
const suffix = trimmed.slice(lastValidEnd + endOffset)
|
||||||
|
|
||||||
|
// If suffix is empty or only contains closing tags (any provider's wrapper) or whitespace, it's complete
|
||||||
|
// This regex matches any sequence of closing XML tags like </foo>, </bar>, </|DSML|xyz>
|
||||||
|
return /^(\s*<\/[^>]+>)*\s*$/.test(suffix)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -262,6 +265,21 @@ export function convertToLegalXml(xmlString: string): string {
|
|||||||
"&",
|
"&",
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// Fix unescaped < and > in attribute values for XML parsing
|
||||||
|
// HTML content in value attributes (e.g., <b>Title</b>) needs to be escaped
|
||||||
|
// This is critical because DOMParser will fail on unescaped < > in attributes
|
||||||
|
if (/=\s*"[^"]*<[^"]*"/.test(cellContent)) {
|
||||||
|
cellContent = cellContent.replace(
|
||||||
|
/=\s*"([^"]*)"/g,
|
||||||
|
(_match, value) => {
|
||||||
|
const escaped = value
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
return `="${escaped}"`
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
// Indent each line of the matched block for readability.
|
// Indent each line of the matched block for readability.
|
||||||
const formatted = cellContent
|
const formatted = cellContent
|
||||||
.split("\n")
|
.split("\n")
|
||||||
@@ -306,6 +324,20 @@ export function wrapWithMxFile(xml: string): string {
|
|||||||
content = xml.replace(/<\/?root>/g, "").trim()
|
content = xml.replace(/<\/?root>/g, "").trim()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Strip trailing LLM wrapper tags (from any provider: Anthropic, DeepSeek, etc.)
|
||||||
|
// Find the last valid mxCell ending and remove everything after it
|
||||||
|
const lastSelfClose = content.lastIndexOf("/>")
|
||||||
|
const lastMxCellClose = content.lastIndexOf("</mxCell>")
|
||||||
|
const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
|
||||||
|
if (lastValidEnd !== -1) {
|
||||||
|
const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
|
||||||
|
const suffix = content.slice(lastValidEnd + endOffset)
|
||||||
|
// If suffix is only closing tags (wrapper tags), strip it
|
||||||
|
if (/^(\s*<\/[^>]+>)*\s*$/.test(suffix)) {
|
||||||
|
content = content.slice(0, lastValidEnd + endOffset)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Remove any existing root cells from content (LLM shouldn't include them, but handle it gracefully)
|
// Remove any existing root cells from content (LLM shouldn't include them, but handle it gracefully)
|
||||||
// Use flexible patterns that match both self-closing (/>) and non-self-closing (></mxCell>) formats
|
// Use flexible patterns that match both self-closing (/>) and non-self-closing (></mxCell>) formats
|
||||||
content = content
|
content = content
|
||||||
@@ -910,6 +942,21 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
fixes.push("Removed CDATA wrapper")
|
fixes.push("Removed CDATA wrapper")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1b. Strip trailing LLM wrapper tags (DeepSeek, Anthropic, etc.)
|
||||||
|
// These are closing tags after the last valid mxCell that break XML parsing
|
||||||
|
const lastSelfClose = fixed.lastIndexOf("/>")
|
||||||
|
const lastMxCellClose = fixed.lastIndexOf("</mxCell>")
|
||||||
|
const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
|
||||||
|
if (lastValidEnd !== -1) {
|
||||||
|
const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
|
||||||
|
const suffix = fixed.slice(lastValidEnd + endOffset)
|
||||||
|
// If suffix contains only closing tags (wrapper tags) or whitespace, strip it
|
||||||
|
if (/^(\s*<\/[^>]+>)+\s*$/.test(suffix)) {
|
||||||
|
fixed = fixed.slice(0, lastValidEnd + endOffset)
|
||||||
|
fixes.push("Stripped trailing LLM wrapper tags")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 2. Remove text before XML declaration or root element (only if it's garbage text, not valid XML)
|
// 2. Remove text before XML declaration or root element (only if it's garbage text, not valid XML)
|
||||||
const xmlStart = fixed.search(/<(\?xml|mxGraphModel|mxfile)/i)
|
const xmlStart = fixed.search(/<(\?xml|mxGraphModel|mxfile)/i)
|
||||||
if (xmlStart > 0 && !/^<[a-zA-Z]/.test(fixed.trim())) {
|
if (xmlStart > 0 && !/^<[a-zA-Z]/.test(fixed.trim())) {
|
||||||
@@ -1015,8 +1062,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
fixes.push("Removed quotes around color values in style")
|
fixes.push("Removed quotes around color values in style")
|
||||||
}
|
}
|
||||||
|
|
||||||
// 4. Fix unescaped < in attribute values
|
// 4. Fix unescaped < and > in attribute values
|
||||||
// This is tricky - we need to find < inside quoted attribute values
|
// < is required to be escaped, > is not strictly required but we escape for consistency
|
||||||
const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
|
const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
|
||||||
let attrMatch
|
let attrMatch
|
||||||
let hasUnescapedLt = false
|
let hasUnescapedLt = false
|
||||||
@@ -1027,12 +1074,12 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasUnescapedLt) {
|
if (hasUnescapedLt) {
|
||||||
// Replace < with < inside attribute values
|
// Replace < and > with < and > inside attribute values
|
||||||
fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
|
fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
|
||||||
const escaped = value.replace(/</g, "<")
|
const escaped = value.replace(/</g, "<").replace(/>/g, ">")
|
||||||
return `="${escaped}"`
|
return `="${escaped}"`
|
||||||
})
|
})
|
||||||
fixes.push("Escaped < characters in attribute values")
|
fixes.push("Escaped <> characters in attribute values")
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5. Fix invalid character references (remove malformed ones)
|
// 5. Fix invalid character references (remove malformed ones)
|
||||||
@@ -1120,7 +1167,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 8c. Remove non-draw.io tags (after typo fixes so lowercase variants are fixed first)
|
// 8c. Remove non-draw.io tags (after typo fixes so lowercase variants are fixed first)
|
||||||
// Valid draw.io tags: mxfile, diagram, mxGraphModel, root, mxCell, mxGeometry, mxPoint, Array, Object
|
// IMPORTANT: Only remove tags at the element level, NOT inside quoted attribute values
|
||||||
|
// Tags like <b>, <br> inside value="<b>text</b>" should be preserved (they're HTML content)
|
||||||
const validDrawioTags = new Set([
|
const validDrawioTags = new Set([
|
||||||
"mxfile",
|
"mxfile",
|
||||||
"diagram",
|
"diagram",
|
||||||
@@ -1133,25 +1181,59 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
"Object",
|
"Object",
|
||||||
"mxRectangle",
|
"mxRectangle",
|
||||||
])
|
])
|
||||||
|
|
||||||
|
// Helper: Check if a position is inside a quoted attribute value
|
||||||
|
// by counting unescaped quotes before that position
|
||||||
|
const isInsideQuotes = (str: string, pos: number): boolean => {
|
||||||
|
let inQuote = false
|
||||||
|
let quoteChar = ""
|
||||||
|
for (let i = 0; i < pos && i < str.length; i++) {
|
||||||
|
const c = str[i]
|
||||||
|
if (inQuote) {
|
||||||
|
if (c === quoteChar) inQuote = false
|
||||||
|
} else if (c === '"' || c === "'") {
|
||||||
|
// Check if this quote is part of an attribute (preceded by =)
|
||||||
|
// Look back for = sign
|
||||||
|
let j = i - 1
|
||||||
|
while (j >= 0 && /\s/.test(str[j])) j--
|
||||||
|
if (j >= 0 && str[j] === "=") {
|
||||||
|
inQuote = true
|
||||||
|
quoteChar = c
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return inQuote
|
||||||
|
}
|
||||||
|
|
||||||
const foreignTagPattern = /<\/?([a-zA-Z][a-zA-Z0-9_]*)[^>]*>/g
|
const foreignTagPattern = /<\/?([a-zA-Z][a-zA-Z0-9_]*)[^>]*>/g
|
||||||
let foreignMatch
|
let foreignMatch
|
||||||
const foreignTags = new Set<string>()
|
const foreignTags = new Set<string>()
|
||||||
|
const foreignTagPositions: Array<{
|
||||||
|
tag: string
|
||||||
|
start: number
|
||||||
|
end: number
|
||||||
|
}> = []
|
||||||
|
|
||||||
while ((foreignMatch = foreignTagPattern.exec(fixed)) !== null) {
|
while ((foreignMatch = foreignTagPattern.exec(fixed)) !== null) {
|
||||||
const tagName = foreignMatch[1]
|
const tagName = foreignMatch[1]
|
||||||
if (!validDrawioTags.has(tagName)) {
|
// Skip if this is a valid draw.io tag
|
||||||
foreignTags.add(tagName)
|
if (validDrawioTags.has(tagName)) continue
|
||||||
}
|
// Skip if this tag is inside a quoted attribute value
|
||||||
|
if (isInsideQuotes(fixed, foreignMatch.index)) continue
|
||||||
|
|
||||||
|
foreignTags.add(tagName)
|
||||||
|
foreignTagPositions.push({
|
||||||
|
tag: tagName,
|
||||||
|
start: foreignMatch.index,
|
||||||
|
end: foreignMatch.index + foreignMatch[0].length,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
if (foreignTags.size > 0) {
|
|
||||||
console.log(
|
if (foreignTagPositions.length > 0) {
|
||||||
"[autoFixXml] Step 8c: Found foreign tags:",
|
// Remove tags from end to start to preserve indices
|
||||||
Array.from(foreignTags),
|
foreignTagPositions.sort((a, b) => b.start - a.start)
|
||||||
)
|
for (const { start, end } of foreignTagPositions) {
|
||||||
for (const tag of foreignTags) {
|
fixed = fixed.slice(0, start) + fixed.slice(end)
|
||||||
// Remove opening tags (with or without attributes)
|
|
||||||
fixed = fixed.replace(new RegExp(`<${tag}[^>]*>`, "gi"), "")
|
|
||||||
// Remove closing tags
|
|
||||||
fixed = fixed.replace(new RegExp(`</${tag}>`, "gi"), "")
|
|
||||||
}
|
}
|
||||||
fixes.push(
|
fixes.push(
|
||||||
`Removed foreign tags: ${Array.from(foreignTags).join(", ")}`,
|
`Removed foreign tags: ${Array.from(foreignTags).join(", ")}`,
|
||||||
@@ -1202,6 +1284,7 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
|
|
||||||
// 10b. Remove extra closing tags (more closes than opens)
|
// 10b. Remove extra closing tags (more closes than opens)
|
||||||
// Need to properly count self-closing tags (they don't need closing tags)
|
// Need to properly count self-closing tags (they don't need closing tags)
|
||||||
|
// IMPORTANT: Only count tags at element level, NOT inside quoted attribute values
|
||||||
const tagCounts = new Map<
|
const tagCounts = new Map<
|
||||||
string,
|
string,
|
||||||
{ opens: number; closes: number; selfClosing: number }
|
{ opens: number; closes: number; selfClosing: number }
|
||||||
@@ -1210,12 +1293,18 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
const fullTagPattern = /<(\/?[a-zA-Z][a-zA-Z0-9]*)[^>]*>/g
|
const fullTagPattern = /<(\/?[a-zA-Z][a-zA-Z0-9]*)[^>]*>/g
|
||||||
let tagCountMatch
|
let tagCountMatch
|
||||||
while ((tagCountMatch = fullTagPattern.exec(fixed)) !== null) {
|
while ((tagCountMatch = fullTagPattern.exec(fixed)) !== null) {
|
||||||
|
// Skip tags inside quoted attribute values (e.g., value="<b>Title</b>")
|
||||||
|
if (isInsideQuotes(fixed, tagCountMatch.index)) continue
|
||||||
|
|
||||||
const fullMatch = tagCountMatch[0] // e.g., "<mxCell .../>" or "</mxCell>"
|
const fullMatch = tagCountMatch[0] // e.g., "<mxCell .../>" or "</mxCell>"
|
||||||
const tagPart = tagCountMatch[1] // e.g., "mxCell" or "/mxCell"
|
const tagPart = tagCountMatch[1] // e.g., "mxCell" or "/mxCell"
|
||||||
const isClosing = tagPart.startsWith("/")
|
const isClosing = tagPart.startsWith("/")
|
||||||
const isSelfClosing = fullMatch.endsWith("/>")
|
const isSelfClosing = fullMatch.endsWith("/>")
|
||||||
const tagName = isClosing ? tagPart.slice(1) : tagPart
|
const tagName = isClosing ? tagPart.slice(1) : tagPart
|
||||||
|
|
||||||
|
// Only count valid draw.io tags - skip partial/invalid tags like "mx" from streaming
|
||||||
|
if (!validDrawioTags.has(tagName)) continue
|
||||||
|
|
||||||
let counts = tagCounts.get(tagName)
|
let counts = tagCounts.get(tagName)
|
||||||
if (!counts) {
|
if (!counts) {
|
||||||
counts = { opens: 0, closes: 0, selfClosing: 0 }
|
counts = { opens: 0, closes: 0, selfClosing: 0 }
|
||||||
|
|||||||
@@ -459,7 +459,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
fixes.push("Removed quotes around color values in style")
|
fixes.push("Removed quotes around color values in style")
|
||||||
}
|
}
|
||||||
|
|
||||||
// 10. Fix unescaped < in attribute values
|
// 10. Fix unescaped < and > in attribute values
|
||||||
|
// < is required to be escaped, > is not strictly required but we escape for consistency
|
||||||
const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
|
const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
|
||||||
let attrMatch
|
let attrMatch
|
||||||
let hasUnescapedLt = false
|
let hasUnescapedLt = false
|
||||||
@@ -471,10 +472,10 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
|
|||||||
}
|
}
|
||||||
if (hasUnescapedLt) {
|
if (hasUnescapedLt) {
|
||||||
fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
|
fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
|
||||||
const escaped = value.replace(/</g, "<")
|
const escaped = value.replace(/</g, "<").replace(/>/g, ">")
|
||||||
return `="${escaped}"`
|
return `="${escaped}"`
|
||||||
})
|
})
|
||||||
fixes.push("Escaped < characters in attribute values")
|
fixes.push("Escaped <> characters in attribute values")
|
||||||
}
|
}
|
||||||
|
|
||||||
// 11. Fix invalid hex character references
|
// 11. Fix invalid hex character references
|
||||||
@@ -903,24 +904,30 @@ export function validateAndFixXml(xml: string): {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if mxCell XML output is complete (not truncated).
|
* Check if mxCell XML output is complete (not truncated).
|
||||||
|
* Uses a robust approach that handles any LLM provider's wrapper tags
|
||||||
|
* by finding the last valid mxCell ending and checking if suffix is just closing tags.
|
||||||
* @param xml - The XML string to check (can be undefined/null)
|
* @param xml - The XML string to check (can be undefined/null)
|
||||||
* @returns true if XML appears complete, false if truncated or empty
|
* @returns true if XML appears complete, false if truncated or empty
|
||||||
*/
|
*/
|
||||||
export function isMxCellXmlComplete(xml: string | undefined | null): boolean {
|
export function isMxCellXmlComplete(xml: string | undefined | null): boolean {
|
||||||
let trimmed = xml?.trim() || ""
|
const trimmed = xml?.trim() || ""
|
||||||
if (!trimmed) return false
|
if (!trimmed) return false
|
||||||
|
|
||||||
// Strip wrapper tags if present
|
// Find position of last complete mxCell ending (either /> or </mxCell>)
|
||||||
let prev = ""
|
const lastSelfClose = trimmed.lastIndexOf("/>")
|
||||||
while (prev !== trimmed) {
|
const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")
|
||||||
prev = trimmed
|
|
||||||
trimmed = trimmed
|
|
||||||
.replace(/<\/mxParameter>\s*$/i, "")
|
|
||||||
.replace(/<\/invoke>\s*$/i, "")
|
|
||||||
.replace(/<\/antml:parameter>\s*$/i, "")
|
|
||||||
.replace(/<\/antml:invoke>\s*$/i, "")
|
|
||||||
.trim()
|
|
||||||
}
|
|
||||||
|
|
||||||
return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
|
const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
|
||||||
|
|
||||||
|
// No valid ending found at all
|
||||||
|
if (lastValidEnd === -1) return false
|
||||||
|
|
||||||
|
// Check what comes after the last valid ending
|
||||||
|
// For />: add 2 chars, for </mxCell>: add 9 chars
|
||||||
|
const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
|
||||||
|
const suffix = trimmed.slice(lastValidEnd + endOffset)
|
||||||
|
|
||||||
|
// If suffix is empty or only contains closing tags (any provider's wrapper) or whitespace, it's complete
|
||||||
|
// This regex matches any sequence of closing XML tags like </foo>, </bar>, </|DSML|xyz>
|
||||||
|
return /^(\s*<\/[^>]+>)*\s*$/.test(suffix)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user