iris-chatbot 5.3.1 → 5.5.0

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

@@ -14,7 +14,7 @@ import {
   PlusCircle,
   X,
 } from "lucide-react";
-import { memo, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import type {
   ChatCitationSource,
   MessageNode,
@@ -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;
@@ -117,6 +118,10 @@ function normalizeMarkdownStructure(content: string) {
   return normalized.join("\n").replace(/\n{3,}/g, "\n\n").trim();
 }
 
+function normalizeUserTextForEditor(content: string): string {
+  return content.replace(/\s+/g, " ").trim();
+}
+
 function stabilizeStreamingMarkdown(content: string) {
   let stable = content;
   const fenceMatches = stable.match(/```/g);
@@ -1241,6 +1246,7 @@ function MessageCard({
   approvals,
   onResolveApproval,
   approvalBusyIds,
+  onResendEditedUserMessage,
 }: {
   message: MessageNode;
   onAddThread: (message: MessageNode) => void;
@@ -1258,12 +1264,20 @@ function MessageCard({
     argsOverride?: Record<string, unknown>,
   ) => void;
   approvalBusyIds?: Record<string, boolean>;
+  onResendEditedUserMessage?: (messageId: string, content: string) => Promise<boolean>;
 }) {
   const [copied, setCopied] = useState(false);
   const [threadAdded, setThreadAdded] = useState(false);
   const [assistantCollapsed, setAssistantCollapsed] = useState(false);
   const [threadEditMode, setThreadEditMode] = useState(false);
+  const [isEditingUserMessage, setIsEditingUserMessage] = useState(false);
+  const [editedUserContent, setEditedUserContent] = useState("");
+  const [isSubmittingUserEdit, setIsSubmittingUserEdit] = useState(false);
+  const [userEditWidthPx, setUserEditWidthPx] = useState<number | null>(null);
+  const userMessageCardRef = useRef<HTMLDivElement | null>(null);
+  const userEditTextareaRef = useRef<HTMLTextAreaElement | null>(null);
   const isAssistant = message.role === "assistant";
+  const canEditUserMessage = !isAssistant && Boolean(onResendEditedUserMessage);
   const canAddThread = threads.length < 4;
   const shelfThreads = [
     ...(baseThreadId ? [{ id: baseThreadId, title: "Thread 1", isBase: true }] : []),
@@ -1279,6 +1293,12 @@ function MessageCard({
     () => splitContentAndSources(message.content || ""),
     [message.content],
   );
+  const userAttachments = useMemo(
+    () => (message.role === "user" ? normalizeChatAttachments(message.attachments) : []),
+    [message.role, message.attachments],
+  );
+  const canSubmitUserEdit =
+    editedUserContent.trim().length > 0 || userAttachments.length > 0;
   const sourcesOrderedByCitation = useMemo(
     () => reorderSourcesByCitationOrder(messageTextContent, messageSources),
     [messageTextContent, messageSources],
@@ -1337,9 +1357,65 @@ function MessageCard({
     return "Working on your request.";
   }, [messageTextContent, timelineItems, approvalItems]);
 
+  useEffect(() => {
+    if (!isEditingUserMessage) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const element = userEditTextareaRef.current;
+      if (!element) {
+        return;
+      }
+      element.focus();
+      const end = element.value.length;
+      element.setSelectionRange(end, end);
+    });
+  }, [isEditingUserMessage]);
+
+  const startUserMessageEdit = () => {
+    const cardWidth = userMessageCardRef.current?.getBoundingClientRect().width ?? null;
+    setUserEditWidthPx(cardWidth && Number.isFinite(cardWidth) ? Math.max(0, Math.round(cardWidth)) : null);
+    setEditedUserContent(normalizeUserTextForEditor(messageTextContent));
+    setIsEditingUserMessage(true);
+  };
+
+  const cancelUserMessageEdit = () => {
+    if (isSubmittingUserEdit) {
+      return;
+    }
+    setIsEditingUserMessage(false);
+    setEditedUserContent("");
+    setUserEditWidthPx(null);
+  };
+
+  const submitUserMessageEdit = async () => {
+    if (!onResendEditedUserMessage || isSubmittingUserEdit || !canSubmitUserEdit) {
+      return;
+    }
+    setIsSubmittingUserEdit(true);
+    try {
+      const success = await onResendEditedUserMessage(message.id, editedUserContent);
+      if (success) {
+        setIsEditingUserMessage(false);
+        setEditedUserContent("");
+        setUserEditWidthPx(null);
+      }
+    } finally {
+      setIsSubmittingUserEdit(false);
+    }
+  };
+
   return (
     <div className="message-stack group">
-      <div className={`${isAssistant ? "assistant-card" : "message-card user"} group`}>
+      <div
+        ref={!isAssistant ? userMessageCardRef : null}
+        className={`${isAssistant ? "assistant-card" : "message-card user"} group`}
+        style={
+          !isAssistant && isEditingUserMessage && userEditWidthPx
+            ? { width: `${userEditWidthPx}px` }
+            : undefined
+        }
+      >
         {isAssistant ? (
           <div className="assistant-collapse-row">
             <button
@@ -1415,7 +1491,74 @@ 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}
+              {isEditingUserMessage ? (
+                <div className="user-edit-shell">
+                  <textarea
+                    ref={userEditTextareaRef}
+                    value={editedUserContent}
+                    onChange={(event) => setEditedUserContent(event.target.value)}
+                    className="user-edit-textarea"
+                    placeholder="Edit your message"
+                    rows={4}
+                    disabled={isSubmittingUserEdit}
+                    onKeyDown={(event) => {
+                      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                        event.preventDefault();
+                        void submitUserMessageEdit();
+                        return;
+                      }
+                      if (event.key === "Escape") {
+                        event.preventDefault();
+                        cancelUserMessageEdit();
+                      }
+                    }}
+                  />
+                  <div className="user-edit-actions">
+                    <button
+                      type="button"
+                      className="user-edit-cancel"
+                      onClick={cancelUserMessageEdit}
+                      disabled={isSubmittingUserEdit}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      className="user-edit-send"
+                      onClick={() => {
+                        void submitUserMessageEdit();
+                      }}
+                      disabled={isSubmittingUserEdit || !canSubmitUserEdit}
+                    >
+                      Send
+                    </button>
+                  </div>
+                </div>
+              ) : messageTextContent ? (
+                <p>{messageTextContent}</p>
+              ) : null}
+            </div>
           )}
 
           {message.role === "assistant" && !assistantCollapsed && sourcesOrderedByCitation.length > 0 ? (
@@ -1567,61 +1710,73 @@ function MessageCard({
           </div>
         ) : null}
       </div>
-      <div
-        className={`message-actions ${isAssistant ? "assistant opacity-0 transition-opacity duration-150 hover:opacity-100" : "user"}`}
-      >
-        {isAssistant ? (
+      {isAssistant || !isEditingUserMessage ? (
+        <div
+          className={`message-actions ${isAssistant ? "assistant opacity-0 transition-opacity duration-150 hover:opacity-100" : "user"}`}
+        >
+          {isAssistant ? (
+            <button
+              className={`flex items-center justify-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition ${canAddThread
+                ? "hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
+                : "opacity-60 cursor-not-allowed"
+                }`}
+              onClick={async () => {
+                if (!canAddThread) return;
+                await onAddThread(message);
+                setThreadAdded(true);
+                window.setTimeout(() => setThreadAdded(false), 1200);
+              }}
+              disabled={!canAddThread}
+            >
+              {threadAdded ? (
+                <Check className="h-4 w-4 text-[var(--accent)]" />
+              ) : (
+                <>
+                  <PlusCircle className="h-4 w-4" />
+                  Thread
+                </>
+              )}
+            </button>
+          ) : null}
           <button
-            className={`flex items-center justify-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition ${canAddThread
-              ? "hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
-              : "opacity-60 cursor-not-allowed"
+            className={`flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)] ${isAssistant ? "" : "opacity-0 group-hover:opacity-100"
               }`}
             onClick={async () => {
-              if (!canAddThread) return;
-              await onAddThread(message);
-              setThreadAdded(true);
-              window.setTimeout(() => setThreadAdded(false), 1200);
+              await navigator.clipboard.writeText(messageTextContent);
+              setCopied(true);
+              window.setTimeout(() => setCopied(false), 1200);
             }}
-            disabled={!canAddThread}
           >
-            {threadAdded ? (
+            {copied ? (
               <Check className="h-4 w-4 text-[var(--accent)]" />
             ) : (
-              <>
-                <PlusCircle className="h-4 w-4" />
-                Thread
-              </>
+              <Copy className="h-4 w-4" />
             )}
           </button>
-        ) : null}
-        <button
-          className={`flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)] ${isAssistant ? "" : "opacity-0 group-hover:opacity-100"
-            }`}
-          onClick={async () => {
-            await navigator.clipboard.writeText(messageTextContent);
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1200);
-          }}
-        >
-          {copied ? (
-            <Check className="h-4 w-4 text-[var(--accent)]" />
-          ) : (
-            <Copy className="h-4 w-4" />
-          )}
-        </button>
-        {canEditThreads ? (
-          <button
-            className={`flex items-center gap-2 rounded-full border px-4 py-2 text-xs transition ${threadEditMode
-              ? "border-[var(--accent-ring)] text-[var(--text-primary)]"
-              : "border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
-              }`}
-            onClick={() => setThreadEditMode((prev) => !prev)}
-            aria-label="Edit threads"
-          >
-            <Pencil className="h-4 w-4" />
-          </button>
-        ) : null}
-      </div>
+          {canEditUserMessage ? (
+            <button
+              type="button"
+              className="flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] opacity-0 transition hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)] group-hover:opacity-100"
+              onClick={startUserMessageEdit}
+              aria-label="Edit message"
+            >
+              <Pencil className="h-4 w-4" />
+            </button>
+          ) : null}
+          {canEditThreads ? (
+            <button
+              className={`flex items-center gap-2 rounded-full border px-4 py-2 text-xs transition ${threadEditMode
+                ? "border-[var(--accent-ring)] text-[var(--text-primary)]"
+                : "border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
+                }`}
+              onClick={() => setThreadEditMode((prev) => !prev)}
+              aria-label="Edit threads"
+            >
+              <Pencil className="h-4 w-4" />
+            </button>
+          ) : null}
+        </div>
+      ) : null}
     </div>
   );
 }

package/template/src/lib/attachments.ts

@@ -0,0 +1,222 @@
+import type { ChatAttachment } from "./types";
+
+export const MAX_ATTACHMENTS_PER_MESSAGE = 8;
+export const MAX_ATTACHMENT_SIZE_BYTES = 25 * 1024 * 1024;
+
+const IMAGE_EXTENSIONS = new Set(["png", "jpg", "jpeg", "webp", "gif"]);
+const DOCUMENT_EXTENSIONS = new Set(["txt", "md", "doc", "docx"]);
+
+const DOCUMENT_MIME_TYPES = new Set([
+  "text/plain",
+  "text/markdown",
+  "text/x-markdown",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+]);
+
+const EXTENSION_TO_MIME: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp",
+  gif: "image/gif",
+  pdf: "application/pdf",
+  txt: "text/plain",
+  md: "text/markdown",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+};
+
+export const COMPOSER_FILE_ACCEPT =
+  ".png,.jpg,.jpeg,.webp,.gif,.pdf,.txt,.md,.doc,.docx";
+
+type AttachmentConnection = {
+  kind?: unknown;
+  provider?: unknown;
+} | null | undefined;
+
+type AttachmentCandidate = {
+  name: string;
+  mimeType?: string | null;
+  sizeBytes: number;
+};
+
+function normalizeFileName(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) {
+    return "attachment";
+  }
+  const basename = trimmed.split(/[\\/]/).pop()?.trim() || "attachment";
+  return basename || "attachment";
+}
+
+function normalizeMimeType(mimeType: string | null | undefined): string {
+  return typeof mimeType === "string" ? mimeType.trim().toLowerCase() : "";
+}
+
+function extensionFromName(name: string): string {
+  const index = name.lastIndexOf(".");
+  if (index < 0 || index === name.length - 1) {
+    return "";
+  }
+  return name.slice(index + 1).toLowerCase();
+}
+
+function inferMimeType(name: string, fallback: ChatAttachment["kind"]): string {
+  const ext = extensionFromName(name);
+  const mapped = EXTENSION_TO_MIME[ext];
+  if (mapped) {
+    return mapped;
+  }
+  if (fallback === "image") {
+    return "image/png";
+  }
+  if (fallback === "pdf") {
+    return "application/pdf";
+  }
+  return "text/plain";
+}
+
+export function getAttachmentProviderForConnection(
+  connection: AttachmentConnection,
+): ChatAttachment["provider"] | null {
+  if (!connection || typeof connection.kind !== "string") {
+    return null;
+  }
+  if (connection.kind === "openai_compatible") {
+    return "openai";
+  }
+  if (connection.kind !== "builtin" || typeof connection.provider !== "string") {
+    return null;
+  }
+  if (connection.provider === "openai") {
+    return "openai";
+  }
+  if (connection.provider === "anthropic") {
+    return "anthropic";
+  }
+  return null;
+}
+
+export function detectAttachmentKind(
+  candidate: Pick<AttachmentCandidate, "name" | "mimeType">,
+): ChatAttachment["kind"] | null {
+  const name = normalizeFileName(candidate.name);
+  const extension = extensionFromName(name);
+  const mimeType = normalizeMimeType(candidate.mimeType);
+
+  if (mimeType.startsWith("image/") || IMAGE_EXTENSIONS.has(extension)) {
+    return "image";
+  }
+  if (mimeType === "application/pdf" || extension === "pdf") {
+    return "pdf";
+  }
+  if (DOCUMENT_MIME_TYPES.has(mimeType) || DOCUMENT_EXTENSIONS.has(extension)) {
+    return "document";
+  }
+  return null;
+}
+
+export function validateAttachmentCandidate(candidate: AttachmentCandidate): {
+  ok: true;
+  kind: ChatAttachment["kind"];
+  name: string;
+  mimeType: string;
+  sizeBytes: number;
+} | {
+  ok: false;
+  error: string;
+} {
+  const name = normalizeFileName(candidate.name);
+  if (!Number.isFinite(candidate.sizeBytes) || candidate.sizeBytes <= 0) {
+    return {
+      ok: false,
+      error: `${name} is empty.`,
+    };
+  }
+  if (candidate.sizeBytes > MAX_ATTACHMENT_SIZE_BYTES) {
+    return {
+      ok: false,
+      error: `${name} is larger than 25 MB.`,
+    };
+  }
+
+  const kind = detectAttachmentKind(candidate);
+  if (!kind) {
+    return {
+      ok: false,
+      error: `${name} is not a supported file type.`,
+    };
+  }
+
+  const normalizedMimeType = normalizeMimeType(candidate.mimeType) || inferMimeType(name, kind);
+  return {
+    ok: true,
+    kind,
+    name,
+    mimeType: normalizedMimeType,
+    sizeBytes: candidate.sizeBytes,
+  };
+}
+
+export function normalizeChatAttachments(input: unknown): ChatAttachment[] {
+  if (!Array.isArray(input)) {
+    return [];
+  }
+
+  const normalized: ChatAttachment[] = [];
+  const seen = new Set<string>();
+
+  for (const item of input) {
+    if (!item || typeof item !== "object") {
+      continue;
+    }
+    const record = item as {
+      provider?: unknown;
+      providerFileId?: unknown;
+      kind?: unknown;
+      name?: unknown;
+      mimeType?: unknown;
+      sizeBytes?: unknown;
+    };
+
+    const provider =
+      record.provider === "openai" || record.provider === "anthropic"
+        ? record.provider
+        : null;
+    const providerFileId =
+      typeof record.providerFileId === "string" ? record.providerFileId.trim() : "";
+    const kind =
+      record.kind === "image" || record.kind === "pdf" || record.kind === "document"
+        ? record.kind
+        : null;
+    const name = typeof record.name === "string" ? normalizeFileName(record.name) : "";
+    const mimeType = normalizeMimeType(
+      typeof record.mimeType === "string" ? record.mimeType : "",
+    );
+    const sizeBytes =
+      typeof record.sizeBytes === "number" && Number.isFinite(record.sizeBytes) && record.sizeBytes > 0
+        ? record.sizeBytes
+        : 0;
+
+    if (!provider || !providerFileId || !kind || !name || !mimeType || sizeBytes <= 0) {
+      continue;
+    }
+
+    const uniqueKey = `${provider}:${providerFileId}`;
+    if (seen.has(uniqueKey)) {
+      continue;
+    }
+    seen.add(uniqueKey);
+    normalized.push({
+      provider,
+      providerFileId,
+      kind,
+      name,
+      mimeType,
+      sizeBytes,
+    });
+  }
+
+  return normalized;
+}