iris-chatbot 5.3.0 → 5.4.0

package/template/src/app/globals.css

@@ -137,8 +137,7 @@ button:focus-visible {
 }
 
 .message-card.user .message-content {
-  display: flex;
-  align-items: center;
+  display: block;
   min-height: 1.4em;
   line-height: 1.45;
 }
@@ -147,6 +146,43 @@ button:focus-visible {
   margin: 0;
 }
 
+.user-message-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.user-attachment-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.user-attachment-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 240px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.34);
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  padding: 4px 9px;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.user-attachment-kind {
+  font-weight: 700;
+  opacity: 0.9;
+}
+
+.user-attachment-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .message-row.user .message-content> :first-child,
 .message-row.user .message-content> :last-child {
   margin-top: 0;
@@ -917,7 +953,7 @@ button:focus-visible {
   line-height: 1.4;
   padding-top: 7px;
   padding-bottom: 9px;
-  padding-left: 6px;
+  padding-left: 0;
   /* One line by default; height grows with content in Composer.tsx */
   min-height: calc(1.4em + 7px + 9px);
 }
@@ -956,6 +992,23 @@ button:focus-visible {
   border-color: transparent;
 }
 
+.send-button:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.composer-attach-button {
+  background: transparent;
+  border-color: transparent;
+  color: var(--text-secondary);
+}
+
+.composer-attach-button:hover {
+  background: transparent;
+  color: var(--text-primary);
+  border-color: transparent;
+}
+
 .mic-button {
   background: transparent;
   color: var(--text-secondary);
@@ -1223,6 +1276,55 @@ button:focus-visible {
   gap: 0;
 }
 
+.composer-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0 2px 10px;
+}
+
+.composer-attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 260px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  border-radius: 999px;
+  padding: 4px 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.composer-attachment-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.composer-attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.composer-attachment-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+}
+
+.composer-attachment-remove:hover {
+  color: var(--text-primary);
+}
+
 .quoted-context-container {
   display: flex;
   align-items: flex-start;

package/template/src/components/ChatView.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from "react";
+import { nanoid } from "nanoid";
 import type {
+  ChatAttachment,
   ChatCitationSource,
   ModelConnection,
   ChatStreamChunk,
@@ -17,6 +19,12 @@ import {
   createThreadFromMessage,
   deleteThread as deleteThreadById,
 } from "../lib/data";
+import {
+  getAttachmentProviderForConnection,
+  MAX_ATTACHMENTS_PER_MESSAGE,
+  normalizeChatAttachments,
+  validateAttachmentCandidate,
+} from "../lib/attachments";
 import { buildPath, embedSourcesInContent, isLikelyGreeting, splitContentAndSources } from "../lib/utils";
 import { db } from "../lib/db";
 import {
@@ -355,6 +363,11 @@ function isLikelyDraftEditFollowup(input: string): boolean {
 
 type MicMode = "off" | "dictation";
 type MicState = "idle" | "listening" | "processing";
+type PendingAttachment = {
+  id: string;
+  file: File;
+  kind: ChatAttachment["kind"];
+};
 
 export default function ChatView({
   thread,
@@ -389,6 +402,8 @@ export default function ChatView({
   const [showJumpToBottom, setShowJumpToBottom] = useState(false);
   const [micMode, setMicMode] = useState<MicMode>("off");
   const [micState, setMicState] = useState<MicState>("idle");
+  const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
+  const [isUploadingAttachments, setIsUploadingAttachments] = useState(false);
   const [quotedContext, setQuotedContext] = useState<string | null>(null);
   const [askButtonPos, setAskButtonPos] = useState<{ top: number; left: number } | null>(null);
   const [pendingSelection, setPendingSelection] = useState<string | null>(null);
@@ -1060,6 +1075,78 @@ export default function ChatView({
     setQuotedContext(null);
   }, []);
 
+  const pendingAttachmentChips = useMemo(
+    () =>
+      pendingAttachments.map((attachment) => ({
+        id: attachment.id,
+        name: attachment.file.name,
+        kind: attachment.kind,
+      })),
+    [pendingAttachments],
+  );
+
+  const removePendingAttachment = useCallback((attachmentId: string) => {
+    setPendingAttachments((current) =>
+      current.filter((attachment) => attachment.id !== attachmentId),
+    );
+  }, []);
+
+  const attachFilesToComposer = useCallback((files: File[]) => {
+    if (files.length === 0) {
+      return;
+    }
+
+    const nextAttachments = [...pendingAttachments];
+    const dedupe = new Set(
+      nextAttachments.map(
+        (attachment) =>
+          `${attachment.file.name}:${attachment.file.size}:${attachment.file.lastModified}`,
+      ),
+    );
+    let nextError: string | null = null;
+    let addedAny = false;
+    for (const file of files) {
+      if (nextAttachments.length >= MAX_ATTACHMENTS_PER_MESSAGE) {
+        nextError = `You can upload up to ${MAX_ATTACHMENTS_PER_MESSAGE} files per message.`;
+        break;
+      }
+
+      const validation = validateAttachmentCandidate({
+        name: file.name,
+        mimeType: file.type,
+        sizeBytes: file.size,
+      });
+      if (!validation.ok) {
+        nextError = nextError ?? validation.error;
+        continue;
+      }
+
+      const key = `${file.name}:${file.size}:${file.lastModified}`;
+      if (dedupe.has(key)) {
+        continue;
+      }
+      dedupe.add(key);
+      nextAttachments.push({
+        id: nanoid(),
+        file,
+        kind: validation.kind,
+      });
+      addedAny = true;
+    }
+
+    if (addedAny) {
+      setPendingAttachments(nextAttachments);
+    }
+
+    if (nextError) {
+      setError(nextError);
+      return;
+    }
+    if (addedAny) {
+      setError(null);
+    }
+  }, [pendingAttachments]);
+
   useEffect(() => {
     const onMouseUp = () => {
       // Small delay so the selection is finalized
@@ -1094,7 +1181,10 @@ export default function ChatView({
     if (!resolvedThread) return;
     const trimmed = (overrideInput ?? input).trim();
     const hasQuoted = Boolean(quotedContext);
-    if (!trimmed && !hasQuoted) return;
+    const pendingComposerAttachments = pendingAttachments;
+    const hasPendingAttachments = pendingComposerAttachments.length > 0;
+    if (!trimmed && !hasQuoted && !hasPendingAttachments) return;
+    if (isUploadingAttachments) return;
     let draftEditContextForRequest: PendingDraftContext | null = null;
     const sendTriggeredByMic =
       typeof overrideInput === "string" || micModeRef.current !== "off";
@@ -1131,6 +1221,34 @@ export default function ChatView({
       return;
     }
 
+    const connectionAttachmentProvider = getAttachmentProviderForConnection(connectionPayload);
+    const currentPathMessages = buildPath(resolvedThread.headMessageId, messageMap);
+    const existingAttachmentProviders = new Set<ChatAttachment["provider"]>();
+    for (const message of currentPathMessages) {
+      const attachments = normalizeChatAttachments(message.attachments);
+      for (const attachment of attachments) {
+        existingAttachmentProviders.add(attachment.provider);
+      }
+    }
+    if (existingAttachmentProviders.size > 1) {
+      setError("This thread has mixed attachment providers. Start a new chat to continue.");
+      stopMicAfterValidationFailure();
+      return;
+    }
+    const existingProvider = [...existingAttachmentProviders][0] ?? null;
+    if (existingProvider && connectionAttachmentProvider !== existingProvider) {
+      setError(
+        `This thread has ${existingProvider} attachments. Switch back to that provider or start a new chat.`,
+      );
+      stopMicAfterValidationFailure();
+      return;
+    }
+    if (hasPendingAttachments && !connectionAttachmentProvider) {
+      setError("Attachments are only supported on OpenAI/OpenAI-compatible and Anthropic connections.");
+      stopMicAfterValidationFailure();
+      return;
+    }
+
     if (!model) {
       setError("Select a model before sending a message.");
       stopMicAfterValidationFailure();
@@ -1187,6 +1305,50 @@ export default function ChatView({
       return;
     }
 
+    let uploadedAttachments: ChatAttachment[] = [];
+    if (pendingComposerAttachments.length > 0) {
+      setIsUploadingAttachments(true);
+      try {
+        const formData = new FormData();
+        formData.set("connection", JSON.stringify(connectionPayload));
+        for (const attachment of pendingComposerAttachments) {
+          formData.append("files", attachment.file, attachment.file.name);
+        }
+
+        const uploadResponse = await fetch("/api/chat/uploads", {
+          method: "POST",
+          body: formData,
+        });
+        const uploadPayload = (await uploadResponse.json().catch(() => ({}))) as {
+          error?: string;
+          attachments?: unknown;
+        };
+        if (!uploadResponse.ok) {
+          throw new Error(uploadPayload.error || "Failed to upload attachments.");
+        }
+        uploadedAttachments = normalizeChatAttachments(uploadPayload.attachments);
+        if (uploadedAttachments.length !== pendingComposerAttachments.length) {
+          throw new Error("One or more attachments were rejected during upload.");
+        }
+        if (
+          connectionAttachmentProvider &&
+          uploadedAttachments.some(
+            (attachment) => attachment.provider !== connectionAttachmentProvider,
+          )
+        ) {
+          throw new Error("Uploaded attachment provider does not match the selected connection.");
+        }
+      } catch (uploadError) {
+        const uploadMessage =
+          uploadError instanceof Error ? uploadError.message : "Failed to upload attachments.";
+        setError(uploadMessage);
+        stopMicAfterValidationFailure();
+        return;
+      } finally {
+        setIsUploadingAttachments(false);
+      }
+    }
+
     inflightThreadIdsRef.current.set(
       resolvedThread.id,
       (inflightThreadIdsRef.current.get(resolvedThread.id) ?? 0) + 1,
@@ -1214,12 +1376,21 @@ export default function ChatView({
     const { userMessage, assistantMessage } = await appendUserAndAssistant({
       thread: resolvedThread,
       content: contentToSend,
+      attachments: uploadedAttachments,
       provider: connection.kind === "builtin" ? connection.provider ?? connection.id : connection.id,
       model,
     });
+    if (pendingComposerAttachments.length > 0) {
+      const sentAttachmentIds = new Set(
+        pendingComposerAttachments.map((attachment) => attachment.id),
+      );
+      setPendingAttachments((current) =>
+        current.filter((attachment) => !sentAttachmentIds.has(attachment.id)),
+      );
+    }
 
     if (isFirstMessage) {
-      if (isLikelyGreeting(trimmed)) {
+      if (!contentToSend.trim() || isLikelyGreeting(trimmed)) {
         await db.threads.update(resolvedThread.id, { title: "New chat" });
       } else {
         void (async () => {
@@ -1292,7 +1463,11 @@ export default function ChatView({
     map.set(userMessage.id, userMessage);
     map.set(assistantMessage.id, assistantMessage);
     const history = buildPath(userMessage.id, map);
-    const payloadMessages: Array<{ role: "system" | "user" | "assistant"; content: string }> = [];
+    const payloadMessages: Array<{
+      role: "system" | "user" | "assistant";
+      content: string;
+      attachments?: ChatAttachment[];
+    }> = [];
     let memoryPayload: MemoryContextPayload | undefined;
 
     if (memoryEnabled) {
@@ -1379,6 +1554,15 @@ export default function ChatView({
             }
           }
 
+          const attachments =
+            message.role === "user"
+              ? normalizeChatAttachments(message.attachments)
+              : [];
+
+          if (attachments.length > 0) {
+            return { role: message.role, content, attachments };
+          }
+
           return { role: message.role, content };
         }),
     );
@@ -1776,6 +1960,8 @@ export default function ChatView({
     startMicRecognitionSession,
     stopMicMode,
     quotedContext,
+    pendingAttachments,
+    isUploadingAttachments,
     messageMap,
     toolEventsByMessage,
   ]);
@@ -1784,6 +1970,11 @@ export default function ChatView({
     handleSendRef.current = handleSend;
   }, [handleSend]);
 
+  useEffect(() => {
+    setPendingAttachments([]);
+    setIsUploadingAttachments(false);
+  }, [thread?.id]);
+
   useEffect(() => {
     const pendingThreadId = pendingSendScrollThreadIdRef.current;
     if (!pendingThreadId || pendingThreadId !== thread?.id) {
@@ -1910,9 +2101,16 @@ export default function ChatView({
                 showStopWhenStreaming={!isAwaitingDraftApproval}
                 onMicToggle={handleMicToggle}
                 micState={micState}
-                micDisabled={Boolean(activeStreamingMessageId) && !isAwaitingDraftApproval}
+                micDisabled={
+                  (Boolean(activeStreamingMessageId) && !isAwaitingDraftApproval) ||
+                  isUploadingAttachments
+                }
                 quotedContext={quotedContext}
                 onClearQuotedContext={handleClearQuotedContext}
+                pendingAttachments={pendingAttachmentChips}
+                onAttachFiles={attachFilesToComposer}
+                onRemovePendingAttachment={removePendingAttachment}
+                isUploadingAttachments={isUploadingAttachments}
               />
             </div>
           </div>
@@ -1976,9 +2174,16 @@ export default function ChatView({
                 showStopWhenStreaming={!isAwaitingDraftApproval}
                 onMicToggle={handleMicToggle}
                 micState={micState}
-                micDisabled={Boolean(activeStreamingMessageId) && !isAwaitingDraftApproval}
+                micDisabled={
+                  (Boolean(activeStreamingMessageId) && !isAwaitingDraftApproval) ||
+                  isUploadingAttachments
+                }
                 quotedContext={quotedContext}
                 onClearQuotedContext={handleClearQuotedContext}
+                pendingAttachments={pendingAttachmentChips}
+                onAttachFiles={attachFilesToComposer}
+                onRemovePendingAttachment={removePendingAttachment}
+                isUploadingAttachments={isUploadingAttachments}
               />
             </div>
           </div>

package/template/src/components/Composer.tsx

@@ -1,7 +1,20 @@
 "use client";
 
 import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
-import { ArrowUp, CornerDownRight, Loader2, Mic, Square, X } from "lucide-react";
+import {
+  ArrowUp,
+  CornerDownRight,
+  File as FileIcon,
+  FileText,
+  Image as ImageIcon,
+  Loader2,
+  Mic,
+  Plus,
+  Square,
+  X,
+} from "lucide-react";
+import { COMPOSER_FILE_ACCEPT } from "../lib/attachments";
+import type { ChatAttachment } from "../lib/types";
 
 function normalizePastedText(input: string): string {
   return input
@@ -24,6 +37,10 @@ export default function Composer({
   micDisabled = false,
   quotedContext = null,
   onClearQuotedContext,
+  pendingAttachments = [],
+  onAttachFiles,
+  onRemovePendingAttachment,
+  isUploadingAttachments = false,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -36,11 +53,22 @@ export default function Composer({
   micDisabled?: boolean;
   quotedContext?: string | null;
   onClearQuotedContext?: () => void;
+  pendingAttachments?: Array<{
+    id: string;
+    name: string;
+    kind: ChatAttachment["kind"];
+  }>;
+  onAttachFiles?: (files: File[]) => void;
+  onRemovePendingAttachment?: (id: string) => void;
+  isUploadingAttachments?: boolean;
 }) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
   const minRowsRef = useRef(1);
   const maxRowsRef = useRef(8);
   const hasText = value.trim().length > 0;
+  const hasPendingAttachments = pendingAttachments.length > 0;
+  const canSend = hasText || Boolean(quotedContext) || hasPendingAttachments;
   const micButtonTitle =
     micState === "listening"
       ? "Stop dictation"
@@ -140,7 +168,68 @@ export default function Composer({
           </button>
         </div>
       ) : null}
+      {pendingAttachments.length > 0 ? (
+        <div className="composer-attachments">
+          {pendingAttachments.map((attachment) => {
+            const icon =
+              attachment.kind === "image" ? (
+                <ImageIcon className="h-3.5 w-3.5" />
+              ) : attachment.kind === "pdf" ? (
+                <FileText className="h-3.5 w-3.5" />
+              ) : (
+                <FileIcon className="h-3.5 w-3.5" />
+              );
+            return (
+              <span key={attachment.id} className="composer-attachment-chip">
+                <span className="composer-attachment-icon">{icon}</span>
+                <span className="composer-attachment-name">{attachment.name}</span>
+                <button
+                  type="button"
+                  className="composer-attachment-remove"
+                  onClick={() => onRemovePendingAttachment?.(attachment.id)}
+                  aria-label={`Remove ${attachment.name}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </span>
+            );
+          })}
+        </div>
+      ) : null}
       <div className="composer flex items-end gap-3">
+        {onAttachFiles ? (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={COMPOSER_FILE_ACCEPT}
+              multiple
+              className="hidden"
+              onChange={(event) => {
+                const selectedFiles = event.currentTarget.files;
+                if (!selectedFiles || selectedFiles.length === 0) {
+                  return;
+                }
+                onAttachFiles([...selectedFiles]);
+                event.currentTarget.value = "";
+              }}
+            />
+            <button
+              type="button"
+              className="send-button composer-attach-button shrink-0"
+              title={isUploadingAttachments ? "Uploading attachments" : "Add files"}
+              aria-label={isUploadingAttachments ? "Uploading attachments" : "Add files"}
+              disabled={isStreaming || isUploadingAttachments}
+              onClick={() => fileInputRef.current?.click()}
+            >
+              {isUploadingAttachments ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Plus className="h-4 w-4" />
+              )}
+            </button>
+          </>
+        ) : null}
         <textarea
           ref={textareaRef}
           rows={1}
@@ -159,7 +248,7 @@ export default function Composer({
           onKeyDown={(event) => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
-              if (!isStreaming) onSend();
+              if (!isStreaming && !isUploadingAttachments) onSend();
             }
           }}
         />
@@ -191,7 +280,8 @@ export default function Composer({
         ) : (
           <button
             onClick={onSend}
-            className={`send-button shrink-0 ${hasText || quotedContext ? "active" : ""}`}
+            className={`send-button shrink-0 ${canSend ? "active" : ""}`}
+            disabled={isUploadingAttachments}
           >
             <ArrowUp className="h-4 w-4" />
           </button>

package/template/src/components/MessageCard.tsx

@@ -22,6 +22,7 @@ import type {
   ToolApproval,
   ToolEvent,
 } from "../lib/types";
+import { normalizeChatAttachments } from "../lib/attachments";
 import { splitContentAndSources } from "../lib/utils";
 
 const MAX_VISIBLE_TOOL_ITEMS = 8;
@@ -1279,6 +1280,10 @@ function MessageCard({
     () => splitContentAndSources(message.content || ""),
     [message.content],
   );
+  const userAttachments = useMemo(
+    () => (message.role === "user" ? normalizeChatAttachments(message.attachments) : []),
+    [message.role, message.attachments],
+  );
   const sourcesOrderedByCitation = useMemo(
     () => reorderSourcesByCitationOrder(messageTextContent, messageSources),
     [messageTextContent, messageSources],
@@ -1415,7 +1420,29 @@ function MessageCard({
               </ReactMarkdown>
             )
           ) : (
-            <p>{messageTextContent}</p>
+            <div className="user-message-content">
+              {userAttachments.length > 0 ? (
+                <div className="user-attachment-row" aria-label="Attachments">
+                  {userAttachments.map((attachment, index) => (
+                    <span
+                      key={`${attachment.providerFileId}-${index}`}
+                      className="user-attachment-pill"
+                      title={attachment.name}
+                    >
+                      <span className="user-attachment-kind">
+                        {attachment.kind === "image"
+                          ? "IMG"
+                          : attachment.kind === "pdf"
+                            ? "PDF"
+                            : "DOC"}
+                      </span>
+                      <span className="user-attachment-title">{attachment.name}</span>
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+              {messageTextContent ? <p>{messageTextContent}</p> : null}
+            </div>
           )}
 
           {message.role === "assistant" && !assistantCollapsed && sourcesOrderedByCitation.length > 0 ? (