{userAttachments.length > 0 && (
-
diff --git a/packages/web/src/ee/features/chat/components/chatThread/messageAttachments.tsx b/packages/web/src/ee/features/chat/components/chatThread/messageAttachments.tsx
index 7d2b5040e..bdbf3b2e7 100644
--- a/packages/web/src/ee/features/chat/components/chatThread/messageAttachments.tsx
+++ b/packages/web/src/ee/features/chat/components/chatThread/messageAttachments.tsx
@@ -1,46 +1,161 @@
'use client';
import { VscodeFileIcon } from "@/app/components/vscodeFileIcon";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { AttachmentViewerDialog } from "@/features/chat/components/chatBox/attachmentViewerDialog";
+import { getAttachmentPreviewUrl, releaseAttachmentPreviewUrl } from "@/features/chat/attachments/attachmentPreviewCache";
import { AttachmentData } from "@/features/chat/types";
import { cn } from "@/lib/utils";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+// Stop probing the serving route after this many attempts rather than forever.
+const SERVING_PROBE_MAX_ATTEMPTS = 15;
+const SERVING_PROBE_INTERVAL_MS = 1000;
interface MessageAttachmentsProps {
attachments: AttachmentData[];
+ chatId: string;
className?: string;
}
-export const MessageAttachments = ({ attachments, className }: MessageAttachmentsProps) => {
+// Builds the access-controlled serving URL for a committed blob attachment.
+const getAttachmentServingUrl = (chatId: string, attachmentId: string): string => {
+ return `/api/ee/chat/${chatId}/attachments/${attachmentId}`;
+}
+
+// Prefer the local preview stashed at submit time (instant, avoids the
+// pre-commit 404), falling back to the serving URL for reloaded messages.
+const getBlobImageSrc = (chatId: string, attachmentId: string): string => {
+ return getAttachmentPreviewUrl(attachmentId) ?? getAttachmentServingUrl(chatId, attachmentId);
+}
+
+export const MessageAttachments = ({ attachments, chatId, className }: MessageAttachmentsProps) => {
const [activeAttachment, setActiveAttachment] = useState(null);
+ // Bumped when a preview is released so blob `src`s recompute to the served URL.
+ const [, setPreviewReleaseTick] = useState(0);
+
+ // For any just-sent blob still backed by a local preview, probe the serving
+ // route in the background; once it loads (i.e. the attachment is committed),
+ // release the preview and re-render so every consumer switches to the served
+ // URL atomically. Avoids revoking an object URL that's still on screen.
+ useEffect(() => {
+ const pendingIds = attachments
+ .filter((attachment) =>
+ attachment.kind === 'blob' &&
+ attachment.mediaType.startsWith('image/') &&
+ getAttachmentPreviewUrl(attachment.attachmentId) !== undefined)
+ .map((attachment) => (attachment as Extract).attachmentId);
+
+ if (pendingIds.length === 0) {
+ return;
+ }
+
+ let cancelled = false;
+ const timers: ReturnType[] = [];
+
+ pendingIds.forEach((attachmentId) => {
+ let attempts = 0;
+ const probe = () => {
+ if (cancelled) {
+ return;
+ }
+ const img = new Image();
+ img.onload = () => {
+ if (cancelled) {
+ return;
+ }
+ releaseAttachmentPreviewUrl(attachmentId);
+ setPreviewReleaseTick((tick) => tick + 1);
+ };
+ img.onerror = () => {
+ if (cancelled || attempts >= SERVING_PROBE_MAX_ATTEMPTS) {
+ return;
+ }
+ attempts++;
+ timers.push(setTimeout(probe, SERVING_PROBE_INTERVAL_MS));
+ };
+ img.src = getAttachmentServingUrl(chatId, attachmentId);
+ };
+ probe();
+ });
+
+ return () => {
+ cancelled = true;
+ timers.forEach(clearTimeout);
+ };
+ }, [attachments, chatId]);
if (attachments.length === 0) {
return null;
}
+ const activeImageSrc =
+ activeAttachment?.kind === 'blob' && activeAttachment.mediaType.startsWith('image/')
+ ? getBlobImageSrc(chatId, activeAttachment.attachmentId)
+ : undefined;
+
return (
<>
!open && setActiveAttachment(null)}
filename={activeAttachment?.filename}
text={activeAttachment?.kind === 'text' ? activeAttachment.text : undefined}
+ imageSrc={activeImageSrc}
/>
)
diff --git a/packages/web/src/features/chat/actions.ts b/packages/web/src/features/chat/actions.ts
index fccc6df8a..5b74d25e9 100644
--- a/packages/web/src/features/chat/actions.ts
+++ b/packages/web/src/features/chat/actions.ts
@@ -8,7 +8,7 @@ import { notFound } from "@/lib/serviceError";
import { withAuth, withOptionalAuth } from "@/middleware/withAuth";
import { ChatVisibility, Prisma } from "@sourcebot/db";
import { SBChatMessage } from "./types";
-import { checkAskEntitlement, isChatSharedWithUser, isOwnerOfChat } from "./utils.server";
+import { checkAskEntitlement, deleteOrphanedAttachments, isChatSharedWithUser, isOwnerOfChat, resolveChatAccess } from "./utils.server";
export const createChat = async ({ source }: { source?: string } = {}) => sew(() =>
withOptionalAuth(async ({ org, user, prisma }) => {
@@ -75,11 +75,10 @@ export const getChatInfo = async ({ chatId }: { chatId: string }) => sew(() =>
return notFound();
}
- const isOwner = await isOwnerOfChat(chat, user);
- const isSharedWithUser = await isChatSharedWithUser({ prisma, chatId, userId: user?.id });
+ const { isOwner, isSharedWithUser, canView } = await resolveChatAccess({ prisma, chat, user });
// Private chats can only be viewed by the owner or users it's been shared with
- if (chat.visibility === ChatVisibility.PRIVATE && !isOwner && !isSharedWithUser) {
+ if (!canView) {
return notFound();
}
@@ -194,6 +193,13 @@ export const deleteChat = async ({ chatId }: { chatId: string }) => sew(() =>
return notFound();
}
+ // Capture the linked attachment ids before the delete cascades the
+ // link rows, so we can sweep any blobs left with zero links afterwards.
+ const linkedAttachments = await prisma.chatAttachment.findMany({
+ where: { chatId },
+ select: { attachmentId: true },
+ });
+
await prisma.chat.delete({
where: {
id: chatId,
@@ -201,6 +207,11 @@ export const deleteChat = async ({ chatId }: { chatId: string }) => sew(() =>
},
});
+ await deleteOrphanedAttachments({
+ prisma,
+ attachmentIds: linkedAttachments.map((link) => link.attachmentId),
+ });
+
await createAudit({
action: "chat.deleted",
actor: { id: user.id, type: "user" },
@@ -292,6 +303,23 @@ export const duplicateChat = async ({ chatId, newName }: { chatId: string, newNa
},
});
+ // Copy the attachment links (metadata-only; no byte copy). The
+ // duplicated messages reference the same blobs, and access stays
+ // chat-derived through the new chat's links.
+ const originalLinks = await prisma.chatAttachment.findMany({
+ where: { chatId: originalChat.id },
+ select: { attachmentId: true },
+ });
+ if (originalLinks.length > 0) {
+ await prisma.chatAttachment.createMany({
+ data: originalLinks.map((link) => ({
+ chatId: newChat.id,
+ attachmentId: link.attachmentId,
+ })),
+ skipDuplicates: true,
+ });
+ }
+
return {
id: newChat.id,
};
diff --git a/packages/web/src/features/chat/attachmentUtils.ts b/packages/web/src/features/chat/attachmentUtils.ts
index 4ab042532..df3c5d083 100644
--- a/packages/web/src/features/chat/attachmentUtils.ts
+++ b/packages/web/src/features/chat/attachmentUtils.ts
@@ -1,47 +1,72 @@
'use client';
import {
+ ATTACHMENT_ALLOWED_IMAGE_MIME_TYPES,
ATTACHMENT_ALLOWED_TEXT_EXTENSIONS,
ATTACHMENT_ALLOWED_TEXT_MIME_TYPES,
+ ATTACHMENT_MAX_IMAGE_BYTES,
+ ATTACHMENT_MAX_IMAGE_COUNT,
ATTACHMENT_MAX_TURN_TEXT_BYTES,
ATTACHMENT_PASTE_AUTO_CONVERT_MIN_CHARS,
ATTACHMENT_PASTE_AUTO_CONVERT_MIN_LINES,
} from "./constants";
-import { AttachmentData, TextAttachment } from "./types";
+import { AttachmentData } from "./types";
+import { sanitizeFilename } from "./attachments/filename";
import { v4 as uuidv4 } from "uuid";
-// Normalizes an untrusted filename: basename only, strips control chars (which
-// could break the `` tag or UI), collapses whitespace.
-export const sanitizeFilename = (name: string): string => {
- const basename = name.split(/[\\/]/).pop() ?? name;
- return Array.from(basename)
- .filter((char) => {
- const code = char.charCodeAt(0);
- return code >= 32 && code !== 127;
- })
- .join('')
- .replace(/\s+/g, ' ')
- .trim() || 'attachment';
-}
+export { sanitizeFilename };
+
+// A text attachment selected in the chat box but not yet submitted. The
+// extracted text travels inline in the message (no upload).
+export type PendingTextAttachment = {
+ kind: 'text';
+ id: string;
+ filename: string;
+ mediaType: string;
+ sizeBytes: number;
+ text: string;
+};
-// A text attachment selected in the chat box but not yet submitted. The `id`
-// is a client-only key for list rendering and removal; it is stripped before
-// the attachment becomes part of a message.
-export type PendingAttachment = TextAttachment & { id: string };
+// An image attachment selected in the chat box. Unlike text, the bytes are
+// uploaded to blob storage on select; `status`/`attachmentId` track that
+// upload. `previewUrl` is a local object URL used for the pre-send thumbnail,
+// and `file` is retained so the upload can be (re)issued.
+export type PendingImageAttachment = {
+ kind: 'image';
+ id: string;
+ filename: string;
+ mediaType: string;
+ sizeBytes: number;
+ previewUrl: string;
+ file: File;
+ status: 'uploading' | 'uploaded' | 'error';
+ attachmentId?: string;
+ error?: string;
+};
+
+// An attachment selected in the chat box but not yet submitted. The `id` is a
+// client-only key for list rendering and removal; it is stripped before the
+// attachment becomes part of a message.
+export type PendingAttachment = PendingTextAttachment | PendingImageAttachment;
// Builds the comma-separated `accept` attribute for a native ``
-// so the OS picker only surfaces supported text file types.
-export const getAttachmentAcceptAttribute = (): string => {
+// so the OS picker only surfaces supported file types. Image types are included
+// only when the selected model can accept image input.
+export const getAttachmentAcceptAttribute = (includeImages: boolean): string => {
return [
'text/*',
...ATTACHMENT_ALLOWED_TEXT_MIME_TYPES,
...ATTACHMENT_ALLOWED_TEXT_EXTENSIONS.map((extension) => `.${extension}`),
+ ...(includeImages ? ATTACHMENT_ALLOWED_IMAGE_MIME_TYPES : []),
].join(',');
}
-// Builds react-dropzone's `accept` map. Extensions are attached to `text/plain`
-// so code files that report an empty/unusual MIME type are still selectable.
-export const getAttachmentDropzoneAccept = (): Record => {
+// Builds the `accept` map for react-dropzone (and the native file picker) so
+// the OS dialog and drag overlay only surface supported file types. The
+// extension list is attached to `text/plain` so code files that report an empty
+// or unusual MIME type are still selectable by extension. Image types are
+// included only when the selected model can accept image input.
+export const getAttachmentDropzoneAccept = (includeImages: boolean): Record => {
const accept: Record = {
'text/*': [],
'text/plain': ATTACHMENT_ALLOWED_TEXT_EXTENSIONS.map((extension) => `.${extension}`),
@@ -49,25 +74,51 @@ export const getAttachmentDropzoneAccept = (): Record => {
for (const mimeType of ATTACHMENT_ALLOWED_TEXT_MIME_TYPES) {
accept[mimeType] = [];
}
+ if (includeImages) {
+ for (const mimeType of ATTACHMENT_ALLOWED_IMAGE_MIME_TYPES) {
+ accept[mimeType] = [];
+ }
+ }
return accept;
}
-// Total UTF-8 byte size of a turn's submitted text (prompt + attachment bodies),
-// checked against ATTACHMENT_MAX_TURN_TEXT_BYTES at submit time.
+// Total UTF-8 byte size of a turn's submitted text (prompt + text attachment
+// bodies), checked against ATTACHMENT_MAX_TURN_TEXT_BYTES at submit time. Image
+// attachments are excluded: their bytes are uploaded as blobs, not inlined into
+// the message text, so they don't count against the inline-text budget.
export const getSubmittedTextBytes = (text: string, attachments: PendingAttachment[]): number => {
const textBytes = new TextEncoder().encode(text).length;
- const attachmentBytes = attachments.reduce((sum, attachment) => sum + attachment.sizeBytes, 0);
+ const attachmentBytes = attachments
+ .filter((attachment) => attachment.kind === 'text')
+ .reduce((sum, attachment) => sum + attachment.sizeBytes, 0);
return textBytes + attachmentBytes;
}
-export const toAttachmentData = (attachment: PendingAttachment): AttachmentData => {
- return {
- kind: attachment.kind,
- filename: attachment.filename,
- mediaType: attachment.mediaType,
- sizeBytes: attachment.sizeBytes,
- text: attachment.text,
- };
+// Converts a pending attachment into the message `AttachmentData` part. Returns
+// `undefined` for an image whose upload has not completed (it must not be
+// referenced before the blob exists); callers filter these out.
+export const toAttachmentData = (attachment: PendingAttachment): AttachmentData | undefined => {
+ if (attachment.kind === 'text') {
+ return {
+ kind: 'text',
+ filename: attachment.filename,
+ mediaType: attachment.mediaType,
+ sizeBytes: attachment.sizeBytes,
+ text: attachment.text,
+ };
+ }
+
+ if (attachment.status === 'uploaded' && attachment.attachmentId) {
+ return {
+ kind: 'blob',
+ attachmentId: attachment.attachmentId,
+ filename: attachment.filename,
+ mediaType: attachment.mediaType,
+ sizeBytes: attachment.sizeBytes,
+ };
+ }
+
+ return undefined;
}
const getExtension = (filename: string): string => {
@@ -98,6 +149,10 @@ export const isAllowedTextFile = (file: File): boolean => {
return false;
}
+export const isAllowedImageFile = (file: File): boolean => {
+ return (ATTACHMENT_ALLOWED_IMAGE_MIME_TYPES as readonly string[]).includes(file.type);
+}
+
const readAsText = (file: File): Promise => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
@@ -159,40 +214,99 @@ export type ReadFilesResult = {
errors: string[];
};
-// Reads files into pending text attachments, rejecting non-text files and any
-// file larger than the per-turn budget (skipped before reading to avoid loading
-// a huge file into memory). The aggregate budget is enforced at submit time.
+// Reads and validates files into pending attachments, enforcing the per-file
+// size, allowed-type, and per-message image-count caps (the per-turn text budget
+// is enforced at submit time). Text is read inline; images (when `allowImages`)
+// become pending uploads the caller then kicks off. The image-count cap mirrors
+// the server's for early feedback. Rejected files yield an error, not a throw.
export const readFilesAsAttachments = async (
files: File[],
+ { allowImages, existingImageCount = 0 }: { allowImages: boolean; existingImageCount?: number },
): Promise => {
const attachments: PendingAttachment[] = [];
const errors: string[] = [];
+ let imageCount = existingImageCount;
for (const file of files) {
- if (!isAllowedTextFile(file)) {
- errors.push(`${file.name}: unsupported file type (text files only).`);
- continue;
- }
-
- if (file.size > ATTACHMENT_MAX_TURN_TEXT_BYTES) {
- errors.push(`${file.name}: exceeds the ${Math.round(ATTACHMENT_MAX_TURN_TEXT_BYTES / 1024)}KB per-message limit.`);
+ if (isAllowedTextFile(file)) {
+ // Skip before reading to avoid loading a huge file into memory.
+ if (file.size > ATTACHMENT_MAX_TURN_TEXT_BYTES) {
+ errors.push(`${file.name}: exceeds the ${Math.round(ATTACHMENT_MAX_TURN_TEXT_BYTES / 1024)}KB per-message limit.`);
+ continue;
+ }
+ try {
+ const text = await readAsText(file);
+ attachments.push({
+ id: uuidv4(),
+ kind: 'text',
+ filename: sanitizeFilename(file.name),
+ mediaType: file.type || 'text/plain',
+ sizeBytes: file.size,
+ text,
+ });
+ } catch {
+ errors.push(`${file.name}: failed to read file.`);
+ }
continue;
}
- try {
- const text = await readAsText(file);
+ if (isAllowedImageFile(file)) {
+ if (!allowImages) {
+ errors.push(`${file.name}: the selected model does not support image input.`);
+ continue;
+ }
+ if (file.size > ATTACHMENT_MAX_IMAGE_BYTES) {
+ errors.push(`${file.name}: exceeds the ${Math.round(ATTACHMENT_MAX_IMAGE_BYTES / (1024 * 1024))}MB image limit.`);
+ continue;
+ }
+ if (imageCount >= ATTACHMENT_MAX_IMAGE_COUNT) {
+ errors.push(`You can attach at most ${ATTACHMENT_MAX_IMAGE_COUNT} images per message.`);
+ continue;
+ }
attachments.push({
id: uuidv4(),
- kind: 'text',
+ kind: 'image',
filename: sanitizeFilename(file.name),
- mediaType: file.type || 'text/plain',
+ mediaType: file.type,
sizeBytes: file.size,
- text,
+ previewUrl: URL.createObjectURL(file),
+ file,
+ status: 'uploading',
});
- } catch {
- errors.push(`${file.name}: failed to read file.`);
+ imageCount++;
+ continue;
}
+
+ errors.push(`${file.name}: unsupported file type.`);
}
return { attachments, errors };
}
+
+// Uploads an image attachment's bytes to blob storage, returning the committed
+// attachment metadata (including the server-assigned `attachmentId`). Throws
+// with a human-readable message on failure.
+export const uploadImageAttachment = async (file: File): Promise<{
+ attachmentId: string;
+ filename: string;
+ mediaType: string;
+ sizeBytes: number;
+}> => {
+ const formData = new FormData();
+ formData.append('file', file);
+
+ const response = await fetch('/api/ee/chat/attachments', {
+ method: 'POST',
+ body: formData,
+ headers: {
+ 'X-Sourcebot-Client-Source': 'sourcebot-web-client',
+ },
+ });
+
+ if (!response.ok) {
+ const body = await response.json().catch(() => undefined);
+ throw new Error(body?.message ?? 'Failed to upload image.');
+ }
+
+ return response.json();
+}
diff --git a/packages/web/src/features/chat/attachments/attachmentPreviewCache.ts b/packages/web/src/features/chat/attachments/attachmentPreviewCache.ts
new file mode 100644
index 000000000..0045975fc
--- /dev/null
+++ b/packages/web/src/features/chat/attachments/attachmentPreviewCache.ts
@@ -0,0 +1,24 @@
+'use client';
+
+// Client-only cache mapping an attachment id to its local object URL, so a
+// just-sent image renders instantly instead of 404ing before it's committed.
+// Entries are released once the served image loads (see releaseAttachmentPreviewUrl).
+const previewUrlByAttachmentId = new Map();
+
+export const setAttachmentPreviewUrl = (attachmentId: string, objectUrl: string): void => {
+ previewUrlByAttachmentId.set(attachmentId, objectUrl);
+}
+
+export const getAttachmentPreviewUrl = (attachmentId: string): string | undefined => {
+ return previewUrlByAttachmentId.get(attachmentId);
+}
+
+// Revokes and drops the cached preview (no-op if absent). Call once the served
+// image has loaded so the object URL and its bytes can be reclaimed.
+export const releaseAttachmentPreviewUrl = (attachmentId: string): void => {
+ const objectUrl = previewUrlByAttachmentId.get(attachmentId);
+ if (objectUrl) {
+ URL.revokeObjectURL(objectUrl);
+ previewUrlByAttachmentId.delete(attachmentId);
+ }
+}
diff --git a/packages/web/src/features/chat/attachments/filename.ts b/packages/web/src/features/chat/attachments/filename.ts
new file mode 100644
index 000000000..fc5a23fdb
--- /dev/null
+++ b/packages/web/src/features/chat/attachments/filename.ts
@@ -0,0 +1,15 @@
+// Normalizes an untrusted filename: keeps only the basename, drops control
+// characters (which could break the prompt's `` tag
+// or the UI), and collapses whitespace. Lives in a non-client module so both
+// the client picker and the server upload route can share one implementation.
+export const sanitizeFilename = (name: string): string => {
+ const basename = name.split(/[\\/]/).pop() ?? name;
+ return Array.from(basename)
+ .filter((char) => {
+ const code = char.charCodeAt(0);
+ return code >= 32 && code !== 127;
+ })
+ .join('')
+ .replace(/\s+/g, ' ')
+ .trim() || 'attachment';
+};
diff --git a/packages/web/src/features/chat/attachments/storage.ts b/packages/web/src/features/chat/attachments/storage.ts
new file mode 100644
index 000000000..f481e454a
--- /dev/null
+++ b/packages/web/src/features/chat/attachments/storage.ts
@@ -0,0 +1,101 @@
+import 'server-only';
+
+import { env } from '@sourcebot/shared';
+import { createReadStream as fsCreateReadStream } from 'fs';
+import fs from 'fs/promises';
+import path from 'path';
+import { Readable } from 'stream';
+
+/**
+ * App-mediated storage for binary chat attachments. The application always
+ * brokers access (no public URLs); callers resolve permissions via the chat
+ * linker before reading. A `LocalFsStorageBackend` is provided first; an
+ * S3-compatible driver implementing the same contract is planned (Followup B).
+ */
+export interface StorageBackend {
+ /** Writes the bytes for `key`, overwriting any existing object. */
+ put(key: string, data: Buffer): Promise;
+ /** Reads the full bytes for `key`. Throws if the object is missing. */
+ get(key: string): Promise;
+ /**
+ * Returns the object's byte size, or `undefined` if it is missing. Lets the
+ * serving route detect a missing object before committing response headers.
+ */
+ stat(key: string): Promise<{ sizeBytes: number } | undefined>;
+ /** Opens a Node read stream for `key` (used by the serving route). */
+ createReadStream(key: string): Readable;
+ /** Deletes the object for `key`. A missing object is not an error. */
+ delete(key: string): Promise;
+}
+
+/**
+ * Stores attachment bytes on the local filesystem under
+ * `DATA_CACHE_DIR/attachments`. Keys are opaque, server-generated strings; the
+ * backend defensively rejects any key that would resolve outside the base
+ * directory (path-traversal guard), even though keys are not client-controlled.
+ */
+export class LocalFsStorageBackend implements StorageBackend {
+ private readonly baseDir: string;
+
+ constructor(baseDir: string = path.join(env.DATA_CACHE_DIR, 'attachments')) {
+ this.baseDir = path.resolve(baseDir);
+ }
+
+ private resolveKey(key: string): string {
+ const resolved = path.resolve(this.baseDir, key);
+ // Defense-in-depth: never let a key escape the base directory.
+ if (resolved !== this.baseDir && !resolved.startsWith(this.baseDir + path.sep)) {
+ throw new Error(`Invalid storage key: ${key}`);
+ }
+ return resolved;
+ }
+
+ async put(key: string, data: Buffer): Promise {
+ const filePath = this.resolveKey(key);
+ await fs.mkdir(path.dirname(filePath), { recursive: true });
+ await fs.writeFile(filePath, data);
+ }
+
+ async get(key: string): Promise {
+ return fs.readFile(this.resolveKey(key));
+ }
+
+ async stat(key: string): Promise<{ sizeBytes: number } | undefined> {
+ try {
+ const { size } = await fs.stat(this.resolveKey(key));
+ return { sizeBytes: size };
+ } catch (error) {
+ if ((error as NodeJS.ErrnoException)?.code === 'ENOENT') {
+ return undefined;
+ }
+ throw error;
+ }
+ }
+
+ createReadStream(key: string): Readable {
+ return fsCreateReadStream(this.resolveKey(key));
+ }
+
+ async delete(key: string): Promise {
+ try {
+ await fs.unlink(this.resolveKey(key));
+ } catch (error) {
+ if ((error as NodeJS.ErrnoException)?.code !== 'ENOENT') {
+ throw error;
+ }
+ }
+ }
+}
+
+let storageBackend: StorageBackend | undefined;
+
+/**
+ * Returns the process-wide StorageBackend singleton. Local-FS for now; the
+ * driver selection (e.g. S3) will be config-driven in Followup B.
+ */
+export const getStorageBackend = (): StorageBackend => {
+ if (!storageBackend) {
+ storageBackend = new LocalFsStorageBackend();
+ }
+ return storageBackend;
+};
diff --git a/packages/web/src/features/chat/attachments/validation.ts b/packages/web/src/features/chat/attachments/validation.ts
new file mode 100644
index 000000000..d8ec30ecb
--- /dev/null
+++ b/packages/web/src/features/chat/attachments/validation.ts
@@ -0,0 +1,75 @@
+import { ATTACHMENT_ALLOWED_IMAGE_MIME_TYPES } from '../constants';
+
+export type AllowedImageMediaType = typeof ATTACHMENT_ALLOWED_IMAGE_MIME_TYPES[number];
+
+const isAllowedImageMediaType = (mediaType: string): mediaType is AllowedImageMediaType => {
+ return (ATTACHMENT_ALLOWED_IMAGE_MIME_TYPES as readonly string[]).includes(mediaType);
+};
+
+const startsWith = (buffer: Buffer, bytes: number[], offset = 0): boolean => {
+ if (buffer.length < offset + bytes.length) {
+ return false;
+ }
+ for (let i = 0; i < bytes.length; i++) {
+ if (buffer[offset + i] !== bytes[i]) {
+ return false;
+ }
+ }
+ return true;
+};
+
+/**
+ * Determines an image's media type from its leading bytes (magic numbers),
+ * ignoring any client-supplied MIME type or filename extension. Returns
+ * `undefined` for anything that is not an allowlisted image format. This is the
+ * authoritative content-type check for binary attachment uploads.
+ */
+export const detectImageMediaType = (buffer: Buffer): AllowedImageMediaType | undefined => {
+ // PNG: 89 50 4E 47 0D 0A 1A 0A
+ if (startsWith(buffer, [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])) {
+ return 'image/png';
+ }
+ // JPEG: FF D8 FF
+ if (startsWith(buffer, [0xff, 0xd8, 0xff])) {
+ return 'image/jpeg';
+ }
+ // GIF: "GIF87a" or "GIF89a"
+ if (startsWith(buffer, [0x47, 0x49, 0x46, 0x38, 0x37, 0x61]) ||
+ startsWith(buffer, [0x47, 0x49, 0x46, 0x38, 0x39, 0x61])) {
+ return 'image/gif';
+ }
+ // WEBP: "RIFF" .... "WEBP"
+ if (startsWith(buffer, [0x52, 0x49, 0x46, 0x46]) && startsWith(buffer, [0x57, 0x45, 0x42, 0x50], 8)) {
+ return 'image/webp';
+ }
+ return undefined;
+};
+
+export type AttachmentValidationResult =
+ | { ok: true; mediaType: AllowedImageMediaType }
+ | { ok: false; reason: string };
+
+/**
+ * Validates uploaded attachment bytes: confirms they are an allowlisted image
+ * (by magic bytes) and that the bytes don't exceed `maxBytes`. The returned
+ * `mediaType` is the magic-byte-derived type, which callers should persist
+ * instead of any client-supplied value.
+ */
+export const validateImageAttachment = (
+ buffer: Buffer,
+ maxBytes: number,
+): AttachmentValidationResult => {
+ if (buffer.length === 0) {
+ return { ok: false, reason: 'Empty file.' };
+ }
+ if (buffer.length > maxBytes) {
+ return { ok: false, reason: `Image exceeds the ${Math.round(maxBytes / (1024 * 1024))}MB limit.` };
+ }
+
+ const mediaType = detectImageMediaType(buffer);
+ if (!mediaType || !isAllowedImageMediaType(mediaType)) {
+ return { ok: false, reason: 'Unsupported image type. Allowed: PNG, JPEG, WebP, GIF.' };
+ }
+
+ return { ok: true, mediaType };
+};
diff --git a/packages/web/src/features/chat/components/chatBox/attachmentButton.tsx b/packages/web/src/features/chat/components/chatBox/attachmentButton.tsx
index fef235c06..33d88b6de 100644
--- a/packages/web/src/features/chat/components/chatBox/attachmentButton.tsx
+++ b/packages/web/src/features/chat/components/chatBox/attachmentButton.tsx
@@ -8,10 +8,11 @@ import { useRef } from "react";
interface AttachmentButtonProps {
onAddFiles: (files: File[]) => void;
+ acceptImages?: boolean;
disabled?: boolean;
}
-export const AttachmentButton = ({ onAddFiles, disabled }: AttachmentButtonProps) => {
+export const AttachmentButton = ({ onAddFiles, acceptImages = false, disabled }: AttachmentButtonProps) => {
const inputRef = useRef(null);
return (
@@ -20,7 +21,7 @@ export const AttachmentButton = ({ onAddFiles, disabled }: AttachmentButtonProps
ref={inputRef}
type="file"
multiple
- accept={getAttachmentAcceptAttribute()}
+ accept={getAttachmentAcceptAttribute(acceptImages)}
className="hidden"
onChange={(e) => {
const files = e.target.files ? Array.from(e.target.files) : [];
@@ -46,7 +47,7 @@ export const AttachmentButton = ({ onAddFiles, disabled }: AttachmentButtonProps
- Attach text files
+ {acceptImages ? "Attach text files or images" : "Attach text files"}
diff --git a/packages/web/src/features/chat/components/chatBox/attachmentTray.tsx b/packages/web/src/features/chat/components/chatBox/attachmentTray.tsx
index 2646fa93b..3547ddf1b 100644
--- a/packages/web/src/features/chat/components/chatBox/attachmentTray.tsx
+++ b/packages/web/src/features/chat/components/chatBox/attachmentTray.tsx
@@ -1,8 +1,9 @@
'use client';
import { VscodeFileIcon } from "@/app/components/vscodeFileIcon";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { cn } from "@/lib/utils";
-import { X } from "lucide-react";
+import { AlertCircle, Loader2, X } from "lucide-react";
import { useState } from "react";
import { PendingAttachment } from "../../attachmentUtils";
import { AttachmentViewerDialog } from "./attachmentViewerDialog";
@@ -26,39 +27,95 @@ export const AttachmentTray = ({ attachments, onRemove, className }: AttachmentT
<>
!open && setActiveAttachment(null)}
filename={activeAttachment?.filename}
- text={activeAttachment?.text}
+ text={activeAttachment?.kind === 'text' ? activeAttachment.text : undefined}
+ imageSrc={activeAttachment?.kind === 'image' ? activeAttachment.previewUrl : undefined}
/>
)
diff --git a/packages/web/src/features/chat/components/chatBox/attachmentViewerDialog.tsx b/packages/web/src/features/chat/components/chatBox/attachmentViewerDialog.tsx
index 46dc236dc..d57eb68ee 100644
--- a/packages/web/src/features/chat/components/chatBox/attachmentViewerDialog.tsx
+++ b/packages/web/src/features/chat/components/chatBox/attachmentViewerDialog.tsx
@@ -6,13 +6,17 @@ import { useEffect } from "react";
interface AttachmentViewerDialogProps {
filename?: string;
text?: string;
+ // When set, the dialog shows the image at this URL instead of text. Used
+ // for image attachments (a local object URL pre-send, the serving route
+ // post-send).
+ imageSrc?: string;
open: boolean;
onOpenChange: (open: boolean) => void;
}
-// Shared viewer for inspecting an inline-text attachment's contents. Used for
-// both staged (not-yet-sent) and sent attachments.
-export const AttachmentViewerDialog = ({ filename, text, open, onOpenChange }: AttachmentViewerDialogProps) => {
+// Shared viewer for inspecting an attachment's contents. Used for both staged
+// (not-yet-sent) and sent attachments, and for both text and image kinds.
+export const AttachmentViewerDialog = ({ filename, text, imageSrc, open, onOpenChange }: AttachmentViewerDialogProps) => {
// The staged viewer is rendered inside the Slate `Editable` subtree, where
// Radix's built-in Escape-to-close can get swallowed by the editor's
// focus/key handling. A capture-phase listener guarantees Escape closes the
@@ -45,9 +49,18 @@ export const AttachmentViewerDialog = ({ filename, text, open, onOpenChange }: A
Preview of the attached file{filename ? ` ${filename}` : ''}.
- 
+ ) : (
+ ([]);
const pathname = usePathname();
+ // Whether the selected model can accept image input (from #1372). Image
+ // attachments are gated on this; text attachments are always allowed.
+ const supportsImages = useMemo(
+ () => selectedLanguageModel?.inputModalities?.includes('image') ?? false,
+ [selectedLanguageModel],
+ );
+
+ // Uploads an image attachment's bytes and reflects the outcome back into the
+ // tray (status + server attachment id).
+ const uploadAndTrackImage = useCallback(async (item: PendingImageAttachment) => {
+ try {
+ const result = await uploadImageAttachment(item.file);
+ setAttachments((prev) => prev.map((attachment) =>
+ attachment.id === item.id && attachment.kind === 'image'
+ ? {
+ ...attachment,
+ status: 'uploaded',
+ attachmentId: result.attachmentId,
+ mediaType: result.mediaType,
+ sizeBytes: result.sizeBytes,
+ }
+ : attachment));
+ } catch (error) {
+ const message = error instanceof Error ? error.message : 'upload failed.';
+ setAttachments((prev) => prev.map((attachment) =>
+ attachment.id === item.id && attachment.kind === 'image'
+ ? { ...attachment, status: 'error', error: message }
+ : attachment));
+ toast({
+ description: `⚠️ ${item.filename}: ${message}`,
+ variant: "destructive",
+ });
+ }
+ }, [toast]);
+
// Set when the user triggers a paste with the OS raw-paste chord
// (⌘⇧V / Ctrl+Shift+V). The subsequent `paste` event reads (and clears)
// this so the large-paste auto-conversion is skipped for that one paste.
@@ -139,7 +184,13 @@ const ChatBoxComponent = ({
return;
}
- const { attachments: added, errors } = await readFilesAsAttachments(files);
+ const { attachments: added, errors } = await readFilesAsAttachments(
+ files,
+ {
+ allowImages: supportsImages,
+ existingImageCount: attachments.filter((attachment) => attachment.kind === 'image').length,
+ },
+ );
if (added.length > 0) {
setAttachments((prev) => [...prev, ...added]);
}
@@ -153,12 +204,26 @@ const ChatBoxComponent = ({
});
}
+ // Upload image attachments immediately (upload-on-select); their refs
+ // are included at submit once the upload completes.
+ for (const item of added) {
+ if (item.kind === 'image') {
+ void uploadAndTrackImage(item);
+ }
+ }
+
// Return focus to the prompt input so the user can keep typing.
ReactEditor.focus(editor);
- }, [attachments, toast, editor, getOverBudgetWarning]);
+ }, [attachments, toast, editor, supportsImages, uploadAndTrackImage, getOverBudgetWarning]);
const removeAttachment = useCallback((id: string) => {
- setAttachments((prev) => prev.filter((attachment) => attachment.id !== id));
+ setAttachments((prev) => {
+ const target = prev.find((attachment) => attachment.id === id);
+ if (target?.kind === 'image') {
+ URL.revokeObjectURL(target.previewUrl);
+ }
+ return prev.filter((attachment) => attachment.id !== id);
+ });
}, []);
// Allow an ancestor pane-level drop zone to forward dropped files into this
@@ -200,7 +265,7 @@ const ChatBoxComponent = ({
const { isSubmitDisabled, isSubmitDisabledReason } = useMemo((): {
isSubmitDisabled: true,
- isSubmitDisabledReason: "empty" | "too-large" | "redirecting" | "generating" | "no-language-model-selected"
+ isSubmitDisabledReason: "empty" | "too-large" | "redirecting" | "generating" | "no-language-model-selected" | "uploading"
} | {
isSubmitDisabled: false,
isSubmitDisabledReason: undefined,
@@ -213,7 +278,8 @@ const ChatBoxComponent = ({
}
}
- // Single per-turn bound on the submitted text (prompt + attachments).
+ // Single per-turn bound on the submitted inline text (prompt + text
+ // attachments). Image bytes are uploaded as blobs and excluded here.
if (getSubmittedTextBytes(text, attachments) > ATTACHMENT_MAX_TURN_TEXT_BYTES) {
return {
isSubmitDisabled: true,
@@ -221,6 +287,15 @@ const ChatBoxComponent = ({
}
}
+ // Block submission until in-flight image uploads finish so their refs
+ // are available when the message is built.
+ if (attachments.some((attachment) => attachment.kind === 'image' && attachment.status === 'uploading')) {
+ return {
+ isSubmitDisabled: true,
+ isSubmitDisabledReason: "uploading",
+ }
+ }
+
if (isRedirecting) {
return {
isSubmitDisabled: true,
@@ -276,13 +351,20 @@ const ChatBoxComponent = ({
});
}
+ if (isSubmitDisabledReason === "uploading") {
+ toast({
+ description: "⚠️ Please wait for image uploads to finish",
+ variant: "destructive",
+ });
+ }
+
return;
}
if (requiresLogin) {
sessionStorage.setItem(
PENDING_CHAT_SUBMISSION_SESSION_STORAGE_KEY,
- JSON.stringify({ pathname, children: editor.children, attachments: attachments.map(toAttachmentData) }),
+ JSON.stringify({ pathname, children: editor.children, attachments: getRedirectSafeAttachments(attachments) }),
);
captureEvent('wa_askgh_login_wall_prompted', {});
setIsLoginDialogOpen(true);
@@ -292,13 +374,30 @@ const ChatBoxComponent = ({
if (requiresUpgrade) {
sessionStorage.setItem(
PENDING_CHAT_SUBMISSION_SESSION_STORAGE_KEY,
- JSON.stringify({ pathname, children: editor.children, attachments: attachments.map(toAttachmentData) }),
+ JSON.stringify({ pathname, children: editor.children, attachments: getRedirectSafeAttachments(attachments) }),
);
setIsUpsellDialogOpen(true);
return;
}
- _onSubmit(editor.children, editor, attachments.map(toAttachmentData));
+ const attachmentData = attachments
+ .map(toAttachmentData)
+ .filter((attachment): attachment is AttachmentData => attachment !== undefined);
+
+ // Stash uploaded previews so the persisted message renders them
+ // instantly; release the rest (not part of the message).
+ attachments.forEach((attachment) => {
+ if (attachment.kind !== 'image') {
+ return;
+ }
+ if (attachment.status === 'uploaded' && attachment.attachmentId) {
+ setAttachmentPreviewUrl(attachment.attachmentId, attachment.previewUrl);
+ } else {
+ URL.revokeObjectURL(attachment.previewUrl);
+ }
+ });
+
+ _onSubmit(editor.children, editor, attachmentData);
setSubmittedAttachments(attachments);
setAttachments([]);
}, [
@@ -484,6 +583,11 @@ const ChatBoxComponent = ({
className="mb-1.5"
/>
)}
+ {attachments.some((attachment) => attachment.kind === 'image') && !supportsImages && (
+
,
): Promise => {
- const catalog = await loadCatalog();
+ // Block on the first (cold) fetch so capabilities resolve correctly instead
+ // of degrading to text-only right after start. Bounded/one-time (see loadCatalog).
+ const catalog = await loadCatalog({ awaitWhenEmpty: true });
return lookupModelCapabilities(catalog, config);
};
diff --git a/packages/web/src/features/chat/modelsDevCatalog.server.ts b/packages/web/src/features/chat/modelsDevCatalog.server.ts
index f2344b6f7..b025fb454 100644
--- a/packages/web/src/features/chat/modelsDevCatalog.server.ts
+++ b/packages/web/src/features/chat/modelsDevCatalog.server.ts
@@ -18,6 +18,10 @@ const CATALOG_TTL_MS = 6 * 60 * 60 * 1000;
// refresh attempts to once per interval during a models.dev outage instead of
// kicking one off on (nearly) every request.
const NEGATIVE_CACHE_MS = 60 * 1000;
+// Max time a single `awaitWhenEmpty` caller blocks on the first fetch (well
+// under FETCH_TIMEOUT_MS); past it the caller falls back while the fetch
+// continues warming the cache in the background.
+const COLD_START_BLOCK_BUDGET_MS = 2500;
// Sourcebot provider id -> models.dev top-level catalog key. Only providers
// whose Sourcebot id differs from the models.dev id need an entry; everything
@@ -81,14 +85,15 @@ const fetchCatalog = async (): Promise => {
* catalog is returned immediately (even if stale), or null before the first
* successful fetch lands, and any refresh settles in the background.
*
- * Consequences of never awaiting:
- * - For the brief window after a cold start (before the first fetch resolves),
- * capability resolution falls back to text-only; it self-heals on the next
- * request once the background fetch populates the cache.
- * - An unreachable catalog (e.g. an airgapped deployment) costs nothing on the
- * request path instead of repeatedly paying the fetch timeout.
+ * By default the request path NEVER blocks on the network: a cold cache returns
+ * null (text-only fallback) and an unreachable catalog costs nothing. Callers
+ * needing a correct answer on a cold cache may pass `awaitWhenEmpty: true`,
+ * which blocks only on the first-ever fetch and only up to
+ * COLD_START_BLOCK_BUDGET_MS (see below).
*/
-export const loadCatalog = async (): Promise => {
+export const loadCatalog = async (
+ { awaitWhenEmpty = false }: { awaitWhenEmpty?: boolean } = {},
+): Promise => {
const now = Date.now();
const isFresh = cachedCatalog !== null && now - catalogFetchedAt <= CATALOG_TTL_MS;
const isBackingOff = now - lastFailedAt < NEGATIVE_CACHE_MS;
@@ -111,6 +116,19 @@ export const loadCatalog = async (): Promise => {
});
}
+ // Block on the first-ever fetch only (`!hasAttempted`), bounded by
+ // COLD_START_BLOCK_BUDGET_MS, so a cold cache resolves correctly instead of
+ // silently degrading. After any attempt we never block again (airgapped pays
+ // at most one short wait per process); the background refresh self-heals.
+ const hasAttempted = catalogFetchedAt > 0 || lastFailedAt > 0;
+ if (awaitWhenEmpty && cachedCatalog === null && inFlightFetch && !hasAttempted) {
+ return Promise.race([
+ inFlightFetch,
+ new Promise((resolve) =>
+ setTimeout(() => resolve(cachedCatalog), COLD_START_BLOCK_BUDGET_MS)),
+ ]);
+ }
+
// Serve whatever we currently have cached (possibly null on a cold start)
// and let any in-flight refresh settle in the background.
return cachedCatalog;
diff --git a/packages/web/src/features/chat/types.ts b/packages/web/src/features/chat/types.ts
index 321a1b915..75dea1fcc 100644
--- a/packages/web/src/features/chat/types.ts
+++ b/packages/web/src/features/chat/types.ts
@@ -104,9 +104,10 @@ export type SBChatMessageToolTypes = {
};
// A user-provided file attachment. The `text` variant carries the file's
-// extracted text inline (used for text/code/structured files); binary
-// attachments (images, PDFs) will later add a `blob` variant that references
-// stored bytes by id instead of inlining them.
+// extracted text inline (used for text/code/structured files). The `blob`
+// variant references stored bytes by id (used for binary attachments like
+// images that cannot be inlined as text); the bytes live in the StorageBackend
+// and never travel in the `messages` JSON.
export const textAttachmentSchema = z.object({
kind: z.literal('text'),
filename: z.string(),
@@ -116,8 +117,18 @@ export const textAttachmentSchema = z.object({
});
export type TextAttachment = z.infer;
+export const blobAttachmentSchema = z.object({
+ kind: z.literal('blob'),
+ attachmentId: z.string(),
+ filename: z.string(),
+ mediaType: z.string(),
+ sizeBytes: z.number(),
+});
+export type BlobAttachment = z.infer;
+
export const attachmentDataSchema = z.discriminatedUnion('kind', [
textAttachmentSchema,
+ blobAttachmentSchema,
]);
export type AttachmentData = z.infer;
diff --git a/packages/web/src/features/chat/utils.server.ts b/packages/web/src/features/chat/utils.server.ts
index 90c83c859..91eb3760d 100644
--- a/packages/web/src/features/chat/utils.server.ts
+++ b/packages/web/src/features/chat/utils.server.ts
@@ -1,12 +1,15 @@
import 'server-only';
import { getAnonymousId } from '@/lib/anonymousId';
-import { Chat, Prisma, PrismaClient, User } from '@sourcebot/db';
+import { AttachmentStatus, Chat, ChatVisibility, Prisma, PrismaClient, User } from '@sourcebot/db';
import { LanguageModel } from '@sourcebot/schemas/v3/languageModel.type';
import { createLogger, env, loadConfig } from '@sourcebot/shared';
import fs from 'fs';
import path from 'path';
-import { LanguageModelInfo, SBChatMessage } from './types';
+import { BlobAttachment, LanguageModelInfo, SBChatMessage } from './types';
+import { getUserMessageAttachments } from './utils';
+import { getStorageBackend } from './attachments/storage';
+import { ATTACHMENT_MAX_IMAGE_COUNT } from './constants';
import { resolveModelCapabilities } from './modelCapabilities.server';
import { loadCatalog } from './modelsDevCatalog.server';
import { hasEntitlement } from '@/lib/entitlements';
@@ -81,6 +84,164 @@ export const isChatSharedWithUser = async ({
return share !== null;
};
+/**
+ * Resolves a (possibly anonymous) user's access to a chat. This is the single
+ * source of truth for the "can view this chat" rule, shared by `getChatInfo`
+ * and the attachment serving route so the two cannot drift: a PUBLIC chat is
+ * viewable by anyone in the org; a PRIVATE chat only by its owner or users it
+ * has been explicitly shared with.
+ */
+export const resolveChatAccess = async ({
+ prisma, chat, user,
+}: {
+ prisma: PrismaClient;
+ chat: Chat;
+ user: User | undefined;
+}): Promise<{ isOwner: boolean; isSharedWithUser: boolean; canView: boolean }> => {
+ const isOwner = await isOwnerOfChat(chat, user);
+ const isSharedWithUser = await isChatSharedWithUser({ prisma, chatId: chat.id, userId: user?.id });
+ const canView = chat.visibility !== ChatVisibility.PRIVATE || isOwner || isSharedWithUser;
+ return { isOwner, isSharedWithUser, canView };
+};
+
+/**
+ * Verifies and commits the binary (blob) attachments referenced by the latest
+ * user message, then links them to the chat. Each referenced `attachmentId`
+ * must exist in this org, have been uploaded by this user, and still be
+ * `PENDING` (never trust client ids). Already-linked ids are treated as a
+ * no-op so re-sends / approval continuations are idempotent. On success the
+ * blobs are linked via `ChatAttachment` and flipped to `COMMITTED`.
+ *
+ * Returns a `ServiceError` to reject the request, or `null` when there is
+ * nothing to commit / the commit succeeded.
+ */
+export const commitMessageAttachments = async ({
+ prisma, chatId, orgId, userId, message,
+}: {
+ prisma: PrismaClient;
+ chatId: string;
+ orgId: number;
+ userId: string | undefined;
+ message: Pick | undefined;
+}): Promise => {
+ if (!message) {
+ return null;
+ }
+
+ const blobRefs = getUserMessageAttachments(message)
+ .filter((attachment): attachment is BlobAttachment => attachment.kind === 'blob');
+
+ if (blobRefs.length === 0) {
+ return null;
+ }
+
+ // Authoritative per-message image cap (the client mirror can't be trusted).
+ if (blobRefs.length > ATTACHMENT_MAX_IMAGE_COUNT) {
+ return {
+ statusCode: StatusCodes.BAD_REQUEST,
+ errorCode: ErrorCode.INVALID_REQUEST_BODY,
+ message: `You can attach at most ${ATTACHMENT_MAX_IMAGE_COUNT} images per message.`,
+ } satisfies ServiceError;
+ }
+
+ // Anonymous users cannot upload binary attachments, so a blob ref from an
+ // unauthenticated request can only be a forged/replayed id.
+ if (!userId) {
+ return {
+ statusCode: StatusCodes.FORBIDDEN,
+ errorCode: ErrorCode.INSUFFICIENT_PERMISSIONS,
+ message: 'Anonymous users cannot attach files.',
+ } satisfies ServiceError;
+ }
+
+ const ids = [...new Set(blobRefs.map((ref) => ref.attachmentId))];
+
+ const [attachments, existingLinks] = await Promise.all([
+ prisma.attachment.findMany({ where: { id: { in: ids }, orgId } }),
+ prisma.chatAttachment.findMany({ where: { chatId, attachmentId: { in: ids } } }),
+ ]);
+
+ const attachmentById = new Map(attachments.map((attachment) => [attachment.id, attachment]));
+ const alreadyLinkedIds = new Set(existingLinks.map((link) => link.attachmentId));
+
+ const idsToCommit: string[] = [];
+ for (const id of ids) {
+ // Already linked to this chat (idempotent re-send): nothing to do.
+ if (alreadyLinkedIds.has(id)) {
+ continue;
+ }
+
+ const attachment = attachmentById.get(id);
+ if (
+ !attachment ||
+ attachment.uploadedById !== userId ||
+ attachment.status !== AttachmentStatus.PENDING
+ ) {
+ return {
+ statusCode: StatusCodes.BAD_REQUEST,
+ errorCode: ErrorCode.INVALID_REQUEST_BODY,
+ message: 'Invalid or unauthorized attachment reference.',
+ } satisfies ServiceError;
+ }
+ idsToCommit.push(id);
+ }
+
+ if (idsToCommit.length > 0) {
+ await prisma.$transaction([
+ prisma.chatAttachment.createMany({
+ data: idsToCommit.map((attachmentId) => ({ chatId, attachmentId })),
+ skipDuplicates: true,
+ }),
+ prisma.attachment.updateMany({
+ where: { id: { in: idsToCommit } },
+ data: { status: AttachmentStatus.COMMITTED },
+ }),
+ ]);
+ }
+
+ return null;
+};
+
+/**
+ * Deletes any of the given attachments that no longer have a `ChatAttachment`
+ * link (and their stored bytes). Bytes are never removed by DB cascade, so this
+ * is the refcount-aware byte sweep invoked after a chat (and its links) is
+ * deleted. Best-effort on the storage layer: a missing/failed byte delete does
+ * not block removing the DB row.
+ */
+export const deleteOrphanedAttachments = async ({
+ prisma, attachmentIds,
+}: {
+ prisma: PrismaClient;
+ attachmentIds: string[];
+}): Promise => {
+ if (attachmentIds.length === 0) {
+ return;
+ }
+
+ const remainingLinks = await prisma.chatAttachment.findMany({
+ where: { attachmentId: { in: attachmentIds } },
+ select: { attachmentId: true },
+ });
+ const stillLinked = new Set(remainingLinks.map((link) => link.attachmentId));
+ const orphanedIds = attachmentIds.filter((id) => !stillLinked.has(id));
+
+ if (orphanedIds.length === 0) {
+ return;
+ }
+
+ const orphans = await prisma.attachment.findMany({
+ where: { id: { in: orphanedIds } },
+ select: { id: true, storageKey: true },
+ });
+
+ const storage = getStorageBackend();
+ await Promise.all(orphans.map((orphan) =>
+ storage.delete(orphan.storageKey).catch(() => { /* best effort */ })));
+
+ await prisma.attachment.deleteMany({ where: { id: { in: orphanedIds } } });
+};
+
export const updateChatMessages = async ({
prisma, chatId, messages,
}: {
diff --git a/packages/web/src/features/chat/utils.ts b/packages/web/src/features/chat/utils.ts
index 15a4907ff..8c1334e99 100644
--- a/packages/web/src/features/chat/utils.ts
+++ b/packages/web/src/features/chat/utils.ts
@@ -417,6 +417,18 @@ export const getUserMessageAttachments = (message: Pick)
.map((part) => part.data);
}
+// UTF-8 byte size of a message's inlined text (prompt + text-attachment bodies;
+// image blobs are referenced by id, not inlined). Server-side counterpart to
+// the chat box's `getSubmittedTextBytes` for enforcing the per-turn text budget.
+export const getMessageTextBytes = (message: Pick): number => {
+ const encoder = new TextEncoder();
+ const promptBytes = encoder.encode(getUserMessageText(message)).length;
+ const attachmentBytes = getUserMessageAttachments(message)
+ .filter((attachment) => attachment.kind === 'text')
+ .reduce((sum, attachment) => sum + encoder.encode(attachment.text).length, 0);
+ return promptBytes + attachmentBytes;
+}
+
// Neutralizes ` `/`` sequences in a body so it can't
// close its own wrapper early. Unrelated markup (e.g. `
`) is left intact.
const escapeAttachmentBody = (text: string): string => {
diff --git a/packages/web/src/lib/posthogEvents.ts b/packages/web/src/lib/posthogEvents.ts
index b6b84f592..fb53366b5 100644
--- a/packages/web/src/lib/posthogEvents.ts
+++ b/packages/web/src/lib/posthogEvents.ts
@@ -204,6 +204,18 @@ export type PosthogEventMap = {
*/
selectedRepos?: string[],
},
+ chat_attachment_uploaded: {
+ source?: string,
+ mediaType: string,
+ sizeBytes: number,
+ },
+ chat_attachment_degraded: {
+ chatId: string,
+ source?: string,
+ droppedImageCount: number,
+ modelProvider: string,
+ model: string,
+ },
ask_mcp_turn_completed: {
chatId: string,
source?: SourcebotWebClientSource,
- {attachments.map((attachment, index) => (
-
- ))}
+ {attachments.map((attachment, index) => {
+ if (attachment.kind === 'blob' && attachment.mediaType.startsWith('image/')) {
+ const imageSrc = getBlobImageSrc(chatId, attachment.attachmentId);
+ return (
+
+
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ );
+ }
+
+ return (
+
+ );
+ })}
{attachments.map((attachment) => (
-
-
+ )
))}
- {text}
-
+ {imageSrc ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ {text}
+
+ )}
)
diff --git a/packages/web/src/features/chat/components/chatBox/chatBox.tsx b/packages/web/src/features/chat/components/chatBox/chatBox.tsx
index 1bd33235f..6720d3f0e 100644
--- a/packages/web/src/features/chat/components/chatBox/chatBox.tsx
+++ b/packages/web/src/features/chat/components/chatBox/chatBox.tsx
@@ -5,7 +5,8 @@ import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { AttachmentData, CustomEditor, MentionElement, RenderElementPropsFor, SearchScope } from "@/features/chat/types";
import { insertMention, slateContentToString } from "@/features/chat/utils";
-import { createPastedTextAttachment, getSubmittedTextBytes, PendingAttachment, readFilesAsAttachments, shouldAutoConvertPaste, toAttachmentData } from "@/features/chat/attachmentUtils";
+import { createPastedTextAttachment, getSubmittedTextBytes, PendingAttachment, PendingImageAttachment, readFilesAsAttachments, shouldAutoConvertPaste, toAttachmentData, uploadImageAttachment } from "@/features/chat/attachmentUtils";
+import { setAttachmentPreviewUrl } from "@/features/chat/attachments/attachmentPreviewCache";
import { AttachmentButton } from "./attachmentButton";
import { AttachmentTray } from "./attachmentTray";
import { cn } from "@/lib/utils";
@@ -35,6 +36,15 @@ export interface ChatBoxHandle {
addFiles: (files: File[]) => void;
}
+// Only inline-text attachments survive the login/upgrade redirect: image blobs
+// require an authenticated, entitled upload, so a redirected sender can't have
+// one, and a stashed blob ref would only fail to commit on re-submit.
+const getRedirectSafeAttachments = (attachments: PendingAttachment[]): AttachmentData[] => {
+ return attachments
+ .map(toAttachmentData)
+ .filter((attachment): attachment is AttachmentData => attachment?.kind === 'text');
+}
+
interface ChatBoxProps {
onSubmit: (children: Descendant[], editor: CustomEditor, attachments: AttachmentData[]) => void;
onStop?: () => void;
@@ -97,6 +107,41 @@ const ChatBoxComponent = ({
const [submittedAttachments, setSubmittedAttachments] = useState+ Images won't be sent: the selected model doesn't support image input. +
+ )}