🔗 Add URL Content Extraction Feature (#514)

* feat: add URL content extraction for AI diagram generation

* Changes made as recommended by Claude:

1. Added a request timeout to prevent server resources from being tied up (route.ts)
2. Implemented runtime validation for the API response shape (url-utils.ts)
3. Removed hardcoded English error messages and replaced them with localized strings (url-input-dialog.tsx)
4. Fixed the incorrect i18n namespace (changed from pdf.* to url.*) (url-input-dialog.tsx and en/ja/zh.json)

* chore: restore package.json and package-lock.json

* fix: use i18n strings for URL dialog error messages

---------

Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>

components/chat-input.tsx

@@ -4,6 +4,7 @@ import {
     Download,
     History,
     Image as ImageIcon,
+    Link,
     Loader2,
     Send,
 } from "lucide-react"
@@ -18,11 +19,13 @@ import { SaveDialog } from "@/components/save-dialog"
 
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
+import { UrlInputDialog } from "@/components/url-input-dialog"
 import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import type { FlattenedModel } from "@/lib/types/model-config"
+import { extractUrlContent, type UrlData } from "@/lib/url-utils"
 import { FilePreviewList } from "./file-preview-list"
 
 const MAX_IMAGE_SIZE = 2 * 1024 * 1024 // 2MB
@@ -144,6 +147,8 @@ interface ChatInputProps {
         File,
         { text: string; charCount: number; isExtracting: boolean }
     >
+    urlData?: Map<string, UrlData>
+    onUrlChange?: (data: Map<string, UrlData>) => void
 
     sessionId?: string
     error?: Error | null
@@ -163,6 +168,8 @@ export function ChatInput({
     files = [],
     onFileChange = () => {},
     pdfData = new Map(),
+    urlData,
+    onUrlChange,
     sessionId,
     error = null,
     models = [],
@@ -183,6 +190,8 @@ export function ChatInput({
     const fileInputRef = useRef<HTMLInputElement>(null)
     const [isDragging, setIsDragging] = useState(false)
     const [showHistory, setShowHistory] = useState(false)
+    const [showUrlDialog, setShowUrlDialog] = useState(false)
+    const [isExtractingUrl, setIsExtractingUrl] = useState(false)
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
         (status === "streaming" || status === "submitted") && !error
@@ -312,6 +321,44 @@ export function ChatInput({
         }
     }
 
+    const handleUrlExtract = async (url: string) => {
+        if (!onUrlChange) return
+
+        setIsExtractingUrl(true)
+
+        try {
+            const existing = urlData
+                ? new Map(urlData)
+                : new Map<string, UrlData>()
+            existing.set(url, {
+                url,
+                title: url,
+                content: "",
+                charCount: 0,
+                isExtracting: true,
+            })
+            onUrlChange(existing)
+
+            const data = await extractUrlContent(url)
+
+            const newUrlData = new Map(existing)
+            newUrlData.set(url, data)
+            onUrlChange(newUrlData)
+
+            setShowUrlDialog(false)
+        } catch (error) {
+            showErrorToast(
+                <span className="text-muted-foreground">
+                    {error instanceof Error
+                        ? error.message
+                        : "Failed to extract URL content"}
+                </span>,
+            )
+        } finally {
+            setIsExtractingUrl(false)
+        }
+    }
+
     return (
         <form
             onSubmit={onSubmit}
@@ -324,13 +371,23 @@ export function ChatInput({
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
         >
-            {/* File previews */}
-            {files.length > 0 && (
+            {/* File & URL previews */}
+            {(files.length > 0 || (urlData && urlData.size > 0)) && (
                 <div className="mb-3">
                     <FilePreviewList
                         files={files}
                         onRemoveFile={handleRemoveFile}
                         pdfData={pdfData}
+                        urlData={urlData}
+                        onRemoveUrl={
+                            onUrlChange
+                                ? (url) => {
+                                      const next = new Map(urlData)
+                                      next.delete(url)
+                                      onUrlChange(next)
+                                  }
+                                : undefined
+                        }
                     />
                 </div>
             )}
@@ -385,6 +442,20 @@ export function ChatInput({
                             <ImageIcon className="h-4 w-4" />
                         </ButtonWithTooltip>
 
+                        {onUrlChange && (
+                            <ButtonWithTooltip
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setShowUrlDialog(true)}
+                                disabled={isDisabled}
+                                tooltipContent={dict.chat.ExtractURL}
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                            >
+                                <Link className="h-4 w-4" />
+                            </ButtonWithTooltip>
+                        )}
+
                         <input
                             type="file"
                             ref={fileInputRef}
@@ -443,6 +514,14 @@ export function ChatInput({
                     .toISOString()
                     .slice(0, 10)}`}
             />
+            {onUrlChange && (
+                <UrlInputDialog
+                    open={showUrlDialog}
+                    onOpenChange={setShowUrlDialog}
+                    onSubmit={handleUrlExtract}
+                    isExtracting={isExtractingUrl}
+                />
+            )}
         </form>
     )
 }