+ {attachments.map((attachment) => {
+ return (
+
+ ) : null
+
+ const attachmentButton = onAddAttachmentFiles ? (
+ <>
+
+
+
+ ) : null
+
+ const dropOverlay = isDraggingFiles ? (
+
+ Drop files to attach
+
+ ) : null
+
return (
+
) : (
-
+ {dropOverlay}
+ {attachmentTray}
- (null)
+ const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+ const isUploading = attachment.status === "uploading"
+ const isUploaded = attachment.status === "uploaded"
+ const isError = attachment.status === "error"
+ const isImage = attachment.file.type.startsWith("image/")
+ const extension = getAttachmentExtension(attachment.file)
+
+ useEffect(() => {
+ if (!isImage) {
+ setObjectUrl(null)
+ return
+ }
+
+ const url = URL.createObjectURL(attachment.file)
+ setObjectUrl(url)
+ return () => URL.revokeObjectURL(url)
+ }, [attachment.file, isImage])
+
+ const statusLabel = isError
+ ? attachment.errorMessage || "Upload failed"
+ : isUploading
+ ? "Uploading..."
+ : isUploaded
+ ? "Uploaded"
+ : formatAttachmentSize(attachment.file.size)
+
+ return (
+ <>
+
+
+
)}
)
}
+
+function AttachmentPreviewChip({
+ attachment,
+ onRemove,
+ onRetry,
+}: {
+ attachment: ChatAttachmentDraft
+ onRemove?: (id: string) => void
+ onRetry?: (id: string) => void
+}) {
+ const [objectUrl, setObjectUrl] = useState
+ {attachmentButton}
{isResponding &&
-
+
+
+
+
+ )
+}
+
+function DocumentFileGlyph({ label }: { label: string }) {
+ return (
+
+
+
+ {attachment.file.name}
+
+
+ {statusLabel}
+
+
+ {isError ? (
+
+ ) : null}
+
+
+
+
+
+ {label}
+
+
+ )
+}
+
+function getAttachmentExtension(file: File): string {
+ const name = file.name
+ const dotIndex = name.lastIndexOf(".")
+ if (dotIndex > -1 && dotIndex < name.length - 1) {
+ const extension = name.slice(dotIndex + 1).toLowerCase()
+ if (extension === "md" || extension === "markdown") return "MD"
+ if (extension === "pdf") return "PDF"
+ return extension.slice(0, 3)
+ }
+ if (file.type === "text/markdown") return "MD"
+ if (file.type.includes("pdf")) return "PDF"
+ if (file.type.startsWith("text/")) return "TXT"
+ return "FILE"
+}
diff --git a/apps/web/components/chat/message/user-message.tsx b/apps/web/components/chat/message/user-message.tsx
index 476ceb7d..9fcb1606 100644
--- a/apps/web/components/chat/message/user-message.tsx
+++ b/apps/web/components/chat/message/user-message.tsx
@@ -2,7 +2,7 @@
import { memo, useEffect, useRef, useState } from "react"
import { AnimatePresence, motion } from "motion/react"
-import { Copy, Check, PencilIcon, PencilOffIcon } from "lucide-react"
+import { Check, Copy, FileIcon, PencilIcon, PencilOffIcon } from "lucide-react"
import type { UIMessage } from "@ai-sdk/react"
import ChatModelSelector from "../model-selector"
import { ReasoningSelector } from "../reasoning-selector"
@@ -12,6 +12,7 @@ import {
type ModelId,
type ReasoningEffort,
} from "@/lib/models"
+import { formatAttachmentSize, getChatMessageAttachments } from "../attachments"
interface UserMessageProps {
message: UIMessage
@@ -45,6 +46,7 @@ export const UserMessage = memo(function UserMessage({
.filter((part) => part.type === "text")
.map((part) => part.text)
.join(" ")
+ const attachments = getChatMessageAttachments(message.metadata)
const startEditing = () => {
setDraft(text)
@@ -71,7 +73,31 @@ export const UserMessage = memo(function UserMessage({
}, [isEditing])
return (
-
+
+ {attachments.length > 0 ? (
+
{isEditing ? (
-
)}
diff --git a/apps/web/components/document-modal/content/image-preview.tsx b/apps/web/components/document-modal/content/image-preview.tsx
index 9fe54474..7d9aac6b 100644
--- a/apps/web/components/document-modal/content/image-preview.tsx
+++ b/apps/web/components/document-modal/content/image-preview.tsx
@@ -1,31 +1,60 @@
"use client"
-import { useCallback, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
import { cn } from "@lib/utils"
+import { getCachedFileBlob } from "@/lib/file-cache"
interface ImagePreviewProps {
url: string
title?: string | null
+ documentId?: string | null
}
-export function ImagePreview({ url, title }: ImagePreviewProps) {
+export function ImagePreview({ url, title, documentId }: ImagePreviewProps) {
const [imageError, setImageError] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const [retryKey, setRetryKey] = useState(0)
+ const [activeSrc, setActiveSrc] = useState(url)
+ const objectUrlRef = useRef(null)
+
+ useEffect(() => {
+ return () => {
+ if (objectUrlRef.current) {
+ URL.revokeObjectURL(objectUrlRef.current)
+ objectUrlRef.current = null
+ }
+ }
+ }, [])
- // On first failure, wait briefly then force a re-render with a new key to
- // retry the fetch (covers transient R2 timing issues).
- // On second failure, give up and show the error state.
const handleImageError = useCallback(() => {
if (retryKey === 0) {
setTimeout(() => setRetryKey(1), 500)
return
}
+
+ if (retryKey === 1 && documentId) {
+ getCachedFileBlob(documentId).then((blob) => {
+ if (blob) {
+ if (objectUrlRef.current) {
+ URL.revokeObjectURL(objectUrlRef.current)
+ }
+ const objUrl = URL.createObjectURL(blob)
+ objectUrlRef.current = objUrl
+ setActiveSrc(objUrl)
+ setRetryKey(2)
+ } else {
+ setImageError(true)
+ setIsLoading(false)
+ }
+ })
+ return
+ }
+
setImageError(true)
setIsLoading(false)
- }, [retryKey])
+ }, [retryKey, documentId])
- if (imageError || !url) {
+ if (imageError || !activeSrc) {
return (
+ return (
+ (null)
+ const [cacheChecked, setCacheChecked] = useState(false)
+ const objectUrlRef = useRef(null)
+
+ useEffect(() => {
+ let revoked = false
+ if (!documentId) {
+ setCacheChecked(true)
+ return
+ }
+
+ getCachedFileBlob(documentId).then((blob) => {
+ if (revoked) return
+ if (blob) {
+ const objUrl = URL.createObjectURL(blob)
+ objectUrlRef.current = objUrl
+ setCachedUrl(objUrl)
+ }
+ setCacheChecked(true)
+ })
+
+ return () => {
+ revoked = true
+ if (objectUrlRef.current) {
+ URL.revokeObjectURL(objectUrlRef.current)
+ objectUrlRef.current = null
+ }
+ }
+ }, [documentId])
+
+ const remoteFileSource: FileSource = useMemo(() => {
if (!url) return null
try {
if (new URL(url).hostname === "www.googleapis.com" && documentId) {
@@ -32,12 +64,34 @@ export function PdfViewer({ url, documentId }: PdfViewerProps) {
return url
}, [url, documentId])
+ const backendProxySource: FileSource = useMemo(() => {
+ if (!documentId) return null
+ const base =
+ process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
+ return { url: `${base}/v3/file-proxy/${documentId}`, withCredentials: true }
+ }, [documentId])
+
const [numPages, setNumPages] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
- const [retryKey, setRetryKey] = useState(0)
+ const [failedSources, setFailedSources] = useState(0)
- if (!url) {
+ const fileSource = useMemo((): FileSource => {
+ if (cachedUrl) return cachedUrl
+ if (failedSources === 0) return remoteFileSource
+ if (failedSources === 1 && backendProxySource) return backendProxySource
+ return null
+ }, [cachedUrl, failedSources, remoteFileSource, backendProxySource])
+
+ if (!cacheChecked) {
+ return (
+ {
+ try {
+ await set(
+ documentId,
+ { blob, mimeType } satisfies CachedFile,
+ fileCacheStore,
+ )
+ } catch {
+ // Storage full or unavailable — non-critical, skip silently
+ }
+}
+
+export async function getCachedFileBlob(
+ documentId: string,
+): Promise {
+ try {
+ const cached = await get(documentId, fileCacheStore)
+ return cached?.blob ?? null
+ } catch {
+ return null
+ }
+}
+
+export async function getCachedFileUrl(
+ documentId: string,
+): Promise {
+ const blob = await getCachedFileBlob(documentId)
+ if (!blob) return null
+ return URL.createObjectURL(blob)
+}
+
+export async function removeCachedFile(documentId: string): Promise {
+ try {
+ await del(documentId, fileCacheStore)
+ } catch {
+ // non-critical
+ }
+}
+ {attachments.map((attachment) => (
+
+ ) : null}
+
+ ))}
+
+
+
+
+
+ {attachment.filename}
+
+
+ {formatAttachmentSize(attachment.size)}
+ {" | "}
+ {attachment.saveToMemory ? "Saved" : "Chat only"}
+
+ {text}
+ {text ? ( +{text}
+ ) : null}Failed to load image
@@ -43,7 +72,7 @@ export function ImagePreview({ url, title }: ImagePreviewProps) {
+ Loading PDF…
+
+ )
+ }
+
+ if (!url && !cachedUrl) {
return (
No PDF URL provided
@@ -51,24 +105,26 @@ export function PdfViewer({ url, documentId }: PdfViewerProps) {
setError(null)
}
- // On first failure, wait briefly then force a re-mount of the Document
- // component to retry (covers transient R2 timing issues).
- // On second failure, give up and show the error state.
- const onDocumentLoadError = useCallback(
- (err: Error) => {
- if (retryKey === 0) {
- setTimeout(() => {
- setRetryKey(1)
- setLoading(true)
- setError(null)
- }, 500)
- return
- }
+ function onDocumentLoadError(err: Error) {
+ if (cachedUrl) {
setError(err.message || "Failed to load PDF")
setLoading(false)
- },
- [retryKey],
- )
+ return
+ }
+
+ const nextFailed = failedSources + 1
+ const hasMoreSources =
+ (nextFailed === 1 && backendProxySource !== null) || nextFailed < 1
+
+ if (hasMoreSources) {
+ setFailedSources(nextFailed)
+ setLoading(true)
+ setError(null)
+ } else {
+ setError(err.message || "Failed to load PDF")
+ setLoading(false)
+ }
+ }
return (
)
}
diff --git a/apps/web/lib/analytics.ts b/apps/web/lib/analytics.ts
index 132ebeb3..f9f1dfee 100644
--- a/apps/web/lib/analytics.ts
+++ b/apps/web/lib/analytics.ts
@@ -122,6 +122,9 @@ export const analytics = {
// chat analytics
chatMessageSent: (props: {
source: "typed" | "suggested" | "highlight" | "home"
+ attachment_count?: number
+ saved_attachment_count?: number
+ temporary_attachment_count?: number
}) => safeCapture("chat_message_sent", props),
chatSuggestedQuestionClicked: () =>
diff --git a/apps/web/lib/file-cache.ts b/apps/web/lib/file-cache.ts
new file mode 100644
index 00000000..d503d0e5
--- /dev/null
+++ b/apps/web/lib/file-cache.ts
@@ -0,0 +1,51 @@
+import { createStore, get, set, del } from "idb-keyval"
+
+const fileCacheStore = createStore("supermemory-file-cache", "blobs")
+
+interface CachedFile {
+ blob: Blob
+ mimeType: string
+}
+
+export async function cacheFileBlob(
+ documentId: string,
+ blob: Blob,
+ mimeType: string,
+): Promise
@@ -82,35 +138,33 @@ export function PdfViewer({ url, documentId }: PdfViewerProps) {
Error: {error}
)}
-
-
- {numPages && (
-
-
+ {fileSource && (
+
- {Array.from(new Array(numPages), (_, index) => (
-
- )}
-
+
+ {numPages && (
+
+
+ )}
+ {Array.from(new Array(numPages), (_, index) => (
+
+ )}
+