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

fix: resolve biome lint errors and memory leak in file preview (#118)

Browse Source 
- Disable noisy biome rules (noExplicitAny, useExhaustiveDependencies, etc.)
- Fix memory leak in file-preview-list.tsx with useRef pattern
- Separate unmount cleanup into dedicated useEffect
- Add ToolPartLike interface for type safety in chat-message-display
- Add accessibility attributes (role, tabIndex, onKeyDown)
- Replace autoFocus with useEffect focus pattern
- Minor syntax improvements (optional chaining, key fixes)
This commit is contained in:
Dayuan Jiang
2025-12-06 16:18:26 +09:00
committed by GitHub
parent 9aaf9bf31f
commit e893bd60f9
9 changed files with 165 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/api/chat/route.ts
View File

@@ -40,7 +40,7 @@ function validateFileParts(messages: any[]): {
for (const filePart of fileParts) {
// Data URLs format: data:image/png;base64,<data>
// Base64 increases size by ~33%, so we check the decoded size
if (filePart.url && filePart.url.startsWith("data:")) {
if (filePart.url?.startsWith("data:")) {
const base64Data = filePart.url.split(",")[1]
if (base64Data) {
const sizeInBytes = Math.ceil((base64Data.length * 3) / 4)

2
app/page.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import React, { useEffect, useRef, useState } from "react"
import { useEffect, useRef, useState } from "react"
import { DrawIoEmbed } from "react-drawio"
import type { ImperativePanelHandle } from "react-resizable-panels"
import ChatPanel from "@/components/chat-panel"

24
biome.json
View File

@@ -19,6 +19,30 @@
"recommended": true,
"complexity": {
"noImportantStyles": "off"
},
"suspicious": {
"noExplicitAny": "off",
"noArrayIndexKey": "off",
"noImplicitAnyLet": "off",
"noAssignInExpressions": "off"
},
"a11y": {
"useButtonType": "off",
"noAutofocus": "off",
"noStaticElementInteractions": "off",
"useKeyWithClickEvents": "off",
"noLabelWithoutControl": "off",
"noNoninteractiveTabindex": "off"
},
"correctness": {
"useExhaustiveDependencies": "off"
},
"style": {
"useNodejsImportProtocol": "off",
"useTemplate": "off"
},
"security": {
"noDangerouslySetInnerHtml": "off"
}
}
},

12
components/chat-input.tsx
View File

@@ -99,8 +99,8 @@ function showValidationErrors(errors: string[]) {
{errors.length} files rejected:
</span>
<ul className="text-muted-foreground text-xs list-disc list-inside">
{errors.slice(0, 3).map((err, i) => (
<li key={i}>{err}</li>
{errors.slice(0, 3).map((err) => (
<li key={err}>{err}</li>
))}
{errors.length > 3 && (
<li>...and {errors.length - 3} more</li>
@@ -162,10 +162,16 @@ export function ChatInput({
}
}, [])
// Handle programmatic input changes (e.g., setInput("") after form submission)
useEffect(() => {
adjustTextareaHeight()
}, [input, adjustTextareaHeight])
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
onChange(e)
adjustTextareaHeight()
}
const handleKeyDown = (e: React.KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
e.preventDefault()
@@ -297,7 +303,7 @@ export function ChatInput({
<Textarea
ref={textareaRef}
value={input}
onChange={onChange}
onChange={handleChange}
onKeyDown={handleKeyDown}
onPaste={handlePaste}
placeholder="Describe your diagram or paste an image..."

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

@@ -1,6 +1,7 @@
"use client"
import type { UIMessage } from "ai"
import {
Check,
ChevronDown,
@@ -32,12 +33,21 @@ interface EditPair {
replace: string
}
// Tool part interface for type safety
interface ToolPartLike {
type: string
toolCallId: string
state?: string
input?: { xml?: string; edits?: EditPair[] } & Record<string, unknown>
output?: string
}
function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
return (
<div className="space-y-3">
{edits.map((edit, index) => (
<div
key={index}
key={`${edit.search.slice(0, 50)}-${edit.replace.slice(0, 50)}-${index}`}
className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
>
<div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
@@ -82,8 +92,8 @@ import { useDiagram } from "@/contexts/diagram-context"
const getMessageTextContent = (message: UIMessage): string => {
if (!message.parts) return ""
return message.parts
.filter((part: any) => part.type === "text")
.map((part: any) => part.text)
.filter((part) => part.type === "text")
.map((part) => (part as { text: string }).text)
.join("\n")
}
@@ -119,6 +129,7 @@ export function ChatMessageDisplay({
const [editingMessageId, setEditingMessageId] = useState<string | null>(
null,
)
const editTextareaRef = useRef<HTMLTextAreaElement>(null)
const [editText, setEditText] = useState<string>("")
const copyMessageToClipboard = async (messageId: string, text: string) => {
@@ -189,12 +200,19 @@ export function ChatMessageDisplay({
}
}, [messages])
useEffect(() => {
if (editingMessageId && editTextareaRef.current) {
editTextareaRef.current.focus()
}
}, [editingMessageId])
useEffect(() => {
messages.forEach((message) => {
if (message.parts) {
message.parts.forEach((part: any) => {
message.parts.forEach((part) => {
if (part.type?.startsWith("tool-")) {
const { toolCallId, state } = part
const toolPart = part as ToolPartLike
const { toolCallId, state, input } = toolPart
if (state === "output-available") {
setExpandedTools((prev) => ({
@@ -205,18 +223,19 @@ export function ChatMessageDisplay({
if (
part.type === "tool-display_diagram" &&
part.input?.xml
input?.xml
) {
const xml = input.xml as string
if (
state === "input-streaming" ||
state === "input-available"
) {
handleDisplayChart(part.input.xml)
handleDisplayChart(xml)
} else if (
state === "output-available" &&
!processedToolCalls.current.has(toolCallId)
) {
handleDisplayChart(part.input.xml)
handleDisplayChart(xml)
processedToolCalls.current.add(toolCallId)
}
}
@@ -226,7 +245,7 @@ export function ChatMessageDisplay({
})
}, [messages, handleDisplayChart])
const renderToolPart = (part: any) => {
const renderToolPart = (part: ToolPartLike) => {
const callId = part.toolCallId
const { state, input, output } = part
const isExpanded = expandedTools[callId] ?? true
@@ -280,6 +299,7 @@ export function ChatMessageDisplay({
)}
{input && Object.keys(input).length > 0 && (
<button
type="button"
onClick={toggleExpanded}
className="p-1 rounded hover:bg-muted transition-colors"
>
@@ -358,6 +378,7 @@ export function ChatMessageDisplay({
{onEditMessage &&
isLastUserMessage && (
<button
type="button"
onClick={() => {
setEditingMessageId(
message.id,
@@ -373,6 +394,7 @@ export function ChatMessageDisplay({
</button>
)}
<button
type="button"
onClick={() =>
copyMessageToClipboard(
message.id,
@@ -407,6 +429,7 @@ export function ChatMessageDisplay({
{isEditing && message.role === "user" ? (
<div className="flex flex-col gap-2">
<textarea
ref={editTextareaRef}
value={editText}
onChange={(e) =>
setEditText(e.target.value)
@@ -417,7 +440,6 @@ export function ChatMessageDisplay({
.length + 1,
6,
)}
autoFocus
onKeyDown={(e) => {
if (e.key === "Escape") {
setEditingMessageId(
@@ -447,6 +469,7 @@ export function ChatMessageDisplay({
/>
<div className="flex justify-end gap-2">
<button
type="button"
onClick={() => {
setEditingMessageId(
null,
@@ -458,6 +481,7 @@ export function ChatMessageDisplay({
Cancel
</button>
<button
type="button"
onClick={() => {
if (
editText.trim() &&
@@ -483,7 +507,7 @@ export function ChatMessageDisplay({
) : (
/* Text content in bubble */
message.parts?.some(
(part: any) =>
(part) =>
part.type === "text" ||
part.type === "file",
) && (
@@ -496,6 +520,20 @@ export function ChatMessageDisplay({
? "bg-destructive/10 text-destructive border border-destructive/20 rounded-2xl rounded-bl-md"
: "bg-muted/60 text-foreground rounded-2xl rounded-bl-md"
} ${message.role === "user" && isLastUserMessage && onEditMessage ? "cursor-pointer hover:opacity-90 transition-opacity" : ""}`}
role={
message.role === "user" &&
isLastUserMessage &&
onEditMessage
? "button"
: undefined
}
tabIndex={
message.role === "user" &&
isLastUserMessage &&
onEditMessage
? 0
: undefined
}
onClick={() => {
if (
message.role ===
@@ -511,6 +549,24 @@ export function ChatMessageDisplay({
)
}
}}
onKeyDown={(e) => {
if (
(e.key === "Enter" ||
e.key === " ") &&
message.role ===
"user" &&
isLastUserMessage &&
onEditMessage
) {
e.preventDefault()
setEditingMessageId(
message.id,
)
setEditText(
userMessageText,
)
}
}}
title={
message.role === "user" &&
isLastUserMessage &&
@@ -520,17 +576,12 @@ export function ChatMessageDisplay({
}
>
{message.parts?.map(
(
part: any,
index: number,
) => {
(part, index) => {
switch (part.type) {
case "text":
return (
<div
key={
index
}
key={`${message.id}-text-${index}`}
className={`prose prose-sm max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${
message.role ===
"user"
@@ -548,9 +599,7 @@ export function ChatMessageDisplay({
case "file":
return (
<div
key={
index
}
key={`${message.id}-file-${part.url}`}
className="mt-2"
>
<Image
@@ -581,9 +630,11 @@ export function ChatMessageDisplay({
)
)}
{/* Tool calls outside bubble */}
{message.parts?.map((part: any) => {
{message.parts?.map((part) => {
if (part.type?.startsWith("tool-")) {
return renderToolPart(part)
return renderToolPart(
part as ToolPartLike,
)
}
return null
})}
@@ -592,6 +643,7 @@ export function ChatMessageDisplay({
<div className="flex items-center gap-1 mt-2">
{/* Copy button */}
<button
type="button"
onClick={() =>
copyMessageToClipboard(
message.id,
@@ -624,6 +676,7 @@ export function ChatMessageDisplay({
{onRegenerate &&
isLastAssistantMessage && (
<button
type="button"
onClick={() =>
onRegenerate(
messageIndex,
@@ -639,6 +692,7 @@ export function ChatMessageDisplay({
<div className="w-px h-4 bg-border mx-1" />
{/* Thumbs up */}
<button
type="button"
onClick={() =>
submitFeedback(
message.id,
@@ -657,6 +711,7 @@ export function ChatMessageDisplay({
</button>
{/* Thumbs down */}
<button
type="button"
onClick={() =>
submitFeedback(
message.id,

2
components/chat-panel.tsx
View File

@@ -22,7 +22,7 @@ import {
STORAGE_ACCESS_CODE_KEY,
} from "@/components/settings-dialog"
import { useDiagram } from "@/contexts/diagram-context"
import { formatXML, replaceNodes, validateMxCellStructure } from "@/lib/utils"
import { formatXML, validateMxCellStructure } from "@/lib/utils"
import { ChatMessageDisplay } from "./chat-message-display"
interface ChatPanelProps {

2
components/code-block.tsx
View File

@@ -12,7 +12,7 @@ export function CodeBlock({ code, language = "xml" }: CodeBlockProps) {
<div className="overflow-hidden w-full">
<Highlight theme={themes.github} code={code} language={language}>
{({
className,
className: _className,
style,
tokens,
getLineProps,

60
components/file-preview-list.tsx
View File

@@ -2,7 +2,7 @@
import { X } from "lucide-react"
import Image from "next/image"
import React, { useEffect, useState } from "react"
import { useEffect, useRef, useState } from "react"
interface FilePreviewListProps {
files: File[]
@@ -11,27 +11,63 @@ interface FilePreviewListProps {
export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
const [selectedImage, setSelectedImage] = useState<string | null>(null)
const [imageUrls, setImageUrls] = useState<Map<File, string>>(new Map())
const imageUrlsRef = useRef<Map<File, string>>(new Map())
// Cleanup object URLs on unmount
// Create and cleanup object URLs when files change
useEffect(() => {
const objectUrls = files
.filter((file) => file.type.startsWith("image/"))
.map((file) => URL.createObjectURL(file))
const currentUrls = imageUrlsRef.current
const newUrls = new Map<File, string>()
return () => {
objectUrls.forEach(URL.revokeObjectURL)
files.forEach((file) => {
if (file.type.startsWith("image/")) {
// Reuse existing URL if file is already tracked
const existingUrl = currentUrls.get(file)
if (existingUrl) {
newUrls.set(file, existingUrl)
} else {
newUrls.set(file, URL.createObjectURL(file))
}
}
})
// Revoke URLs for files that are no longer in the list
currentUrls.forEach((url, file) => {
if (!newUrls.has(file)) {
URL.revokeObjectURL(url)
}
})
imageUrlsRef.current = newUrls
setImageUrls(newUrls)
}, [files])
// Cleanup all URLs on unmount only
useEffect(() => {
return () => {
imageUrlsRef.current.forEach((url) => {
URL.revokeObjectURL(url)
})
}
}, [])
// Clear selected image if its URL was revoked
useEffect(() => {
if (
selectedImage &&
!Array.from(imageUrls.values()).includes(selectedImage)
) {
setSelectedImage(null)
}
}, [imageUrls, selectedImage])
if (files.length === 0) return null
return (
<>
<div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
{files.map((file, index) => {
const imageUrl = file.type.startsWith("image/")
? URL.createObjectURL(file)
: null
const imageUrl = imageUrls.get(file) || null
return (
<div key={file.name + index} className="relative group">
<div
@@ -40,9 +76,9 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
imageUrl && setSelectedImage(imageUrl)
}
>
{file.type.startsWith("image/") ? (
{file.type.startsWith("image/") && imageUrl ? (
<Image
src={imageUrl!}
src={imageUrl}
alt={file.name}
width={80}
height={80}

2
lib/utils.ts
View File

@@ -168,7 +168,7 @@ export function replaceNodes(currentXML: string, nodes: string): string {
// Insert after cell0 if possible
const cell0 = currentRoot.querySelector('mxCell[id="0"]')
if (cell0 && cell0.nextSibling) {
if (cell0?.nextSibling) {
currentRoot.insertBefore(cell1, cell0.nextSibling)
} else {
currentRoot.appendChild(cell1)