i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: implement client-side caching for example diagrams (#150)

Browse Source 
- Add client-side cache check in onFormSubmit to bypass API calls for example prompts
- Use findCachedResponse to match input against cached examples
- Directly set messages with cached tool response when example matches
- Hide regenerate button for cached example responses (toolCallId starts with 'cached-')
- Prevents unnecessary API calls when using example buttons

Co-authored-by: dayuan.jiang <jiangdy@amazon.co.jp>
This commit is contained in:
Dayuan Jiang
2025-12-07 19:36:09 +09:00
committed by GitHub
parent 0baf21fadb
commit 86420a42c6
3 changed files with 68 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/chat-message-display.tsx
View File

@@ -676,9 +676,14 @@ export function ChatMessageDisplay({
<Copy className="h-3.5 w-3.5" />
)}
</button>
{/* Regenerate button - only on last assistant message */}
{/* Regenerate button - only on last assistant message, not for cached examples */}
{onRegenerate &&
isLastAssistantMessage && (
isLastAssistantMessage &&
!message.parts?.some((p: any) =>
p.toolCallId?.startsWith(
"cached-",
),
) && (
<button
type="button"
onClick={() =>

37
components/chat-panel.tsx
View File

@@ -32,6 +32,7 @@ const STORAGE_SESSION_ID_KEY = "next-ai-draw-io-session-id"
const STORAGE_DIAGRAM_XML_KEY = "next-ai-draw-io-diagram-xml"
import { useDiagram } from "@/contexts/diagram-context"
import { findCachedResponse } from "@/lib/cached-responses"
import { formatXML } from "@/lib/utils"
import { ChatMessageDisplay } from "./chat-message-display"
@@ -450,6 +451,42 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
e.preventDefault()
const isProcessing = status === "streaming" || status === "submitted"
if (input.trim() && !isProcessing) {
// Check if input matches a cached example (only when no messages yet)
if (messages.length === 0) {
const cached = findCachedResponse(
input.trim(),
files.length > 0,
)
if (cached) {
// Add user message and fake assistant response to messages
// The chat-message-display useEffect will handle displaying the diagram
const toolCallId = `cached-${Date.now()}`
setMessages([
{
id: `user-${Date.now()}`,
role: "user" as const,
parts: [{ type: "text" as const, text: input }],
},
{
id: `assistant-${Date.now()}`,
role: "assistant" as const,
parts: [
{
type: "tool-display_diagram" as const,
toolCallId,
state: "output-available" as const,
input: { xml: cached.xml },
output: "Successfully displayed the diagram.",
},
],
},
] as any)
setInput("")
setFiles([])
return
}
}
try {
let chartXml = await onFetchChart()
chartXml = formatXML(chartXml)