From 5537b0b04297ae1201a813c57f20d69d78084b04 Mon Sep 17 00:00:00 2001
From: Shaun Arman <Shaun.Arman@motorolasolutions.com>
Date: Tue, 31 Mar 2026 08:40:36 -0500
Subject: [PATCH] feat: inline file/screenshot attachment in triage chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- NewIssue navigates directly to /triage — log upload is never a blocker
- ChatWindow: paperclip button opens Tauri file dialog; pending files shown
  as removable chips above the input; send enabled with files and no text
- Triage: uploads selected files via uploadLogFileCmd, reads text content
  (capped at 8KB), appends file contents to AI message for context while
  showing only filenames in the chat bubble
- Images/binary files are referenced by name with a prompt for the user
  to describe them
---
 src/components/ChatWindow.tsx | 41 ++++++++++++++++++++++---
 src/pages/NewIssue/index.tsx  |  2 +-
 src/pages/Triage/index.tsx    | 58 +++++++++++++++++++++++++++++++++--
 3 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index d4ce2bb6..166b60ad 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Send, Bot, User } from "lucide-react";
+import { Send, Bot, User, Paperclip, X } from "lucide-react";
 import type { TriageMessage } from "@/lib/tauriCommands";
 
 interface ChatWindowProps {
@@ -7,9 +7,12 @@ interface ChatWindowProps {
   onSend: (message: string) => Promise<void>;
   isLoading?: boolean;
   placeholder?: string;
+  pendingFiles?: { name: string }[];
+  onAttach?: () => void;
+  onRemoveFile?: (index: number) => void;
 }
 
-export function ChatWindow({ messages, onSend, isLoading, placeholder }: ChatWindowProps) {
+export function ChatWindow({ messages, onSend, isLoading, placeholder, pendingFiles, onAttach, onRemoveFile }: ChatWindowProps) {
   const [input, setInput] = useState("");
   const bottomRef = useRef<HTMLDivElement>(null);
 
@@ -76,20 +79,48 @@ export function ChatWindow({ messages, onSend, isLoading, placeholder }: ChatWin
         )}
         <div ref={bottomRef} />
       </div>
-      <div className="border-t p-4">
+      <div className="border-t p-4 space-y-2">
+        {pendingFiles && pendingFiles.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {pendingFiles.map((f, i) => (
+              <span
+                key={i}
+                className="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs text-secondary-foreground"
+              >
+                <Paperclip className="w-3 h-3" />
+                {f.name}
+                {onRemoveFile && (
+                  <button onClick={() => onRemoveFile(i)} className="ml-1 hover:text-destructive">
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
+              </span>
+            ))}
+          </div>
+        )}
         <div className="flex gap-2">
+          {onAttach && (
+            <button
+              onClick={onAttach}
+              disabled={isLoading}
+              title="Attach log file or screenshot"
+              className="px-3 py-2 rounded-md border border-input bg-background hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Paperclip className="w-4 h-4 text-muted-foreground" />
+            </button>
+          )}
           <textarea
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={placeholder ?? "Type your response... (Enter to send, Shift+Enter for new line)"}
             rows={2}
-            className="flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            className="flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
             disabled={isLoading}
           />
           <button
             onClick={handleSend}
-            disabled={!input.trim() || isLoading}
+            disabled={(!input.trim() && (!pendingFiles || pendingFiles.length === 0)) || isLoading}
             className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <Send className="w-4 h-4" />
diff --git a/src/pages/NewIssue/index.tsx b/src/pages/NewIssue/index.tsx
index 48969331..2fa5242a 100644
--- a/src/pages/NewIssue/index.tsx
+++ b/src/pages/NewIssue/index.tsx
@@ -53,7 +53,7 @@ export default function NewIssue() {
     try {
       const issue = await createIssueCmd({ title: title.trim(), domain: selectedDomain, severity });
       startSession(issue);
-      navigate(`/issue/${issue.id}/logs`);
+      navigate(`/issue/${issue.id}/triage`);
     } catch (err) {
       setError(String(err));
       setIsSubmitting(false);
diff --git a/src/pages/Triage/index.tsx b/src/pages/Triage/index.tsx
index 7c31f2a0..194a43e3 100644
--- a/src/pages/Triage/index.tsx
+++ b/src/pages/Triage/index.tsx
@@ -1,18 +1,23 @@
 import { useEffect, useRef, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { CheckCircle, ChevronRight } from "lucide-react";
+import { open } from "@tauri-apps/plugin-dialog";
+import { readTextFile } from "@tauri-apps/plugin-fs";
 import { ChatWindow } from "@/components/ChatWindow";
 import { TriageProgress } from "@/components/TriageProgress";
 import { useSessionStore } from "@/stores/sessionStore";
 import { useSettingsStore } from "@/stores/settingsStore";
-import { chatMessageCmd, getIssueCmd } from "@/lib/tauriCommands";
+import { chatMessageCmd, getIssueCmd, uploadLogFileCmd } from "@/lib/tauriCommands";
 import type { TriageMessage } from "@/lib/tauriCommands";
 
+type PendingFile = { name: string; content: string | null };
+
 export default function Triage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
   const initialized = useRef(false);
 
   const { currentIssue, messages, currentWhyLevel, startSession, addMessage, setWhyLevel } =
@@ -42,6 +47,35 @@ export default function Triage() {
       .catch((e) => setError(String(e)));
   }, [id]);
 
+  const handleAttach = async () => {
+    if (!id) return;
+    try {
+      const selected = await open({
+        multiple: true,
+        filters: [
+          { name: "Log & Text Files", extensions: ["log", "txt", "json", "xml", "yaml", "yml", "csv", "out", "err"] },
+          { name: "Images", extensions: ["png", "jpg", "jpeg", "gif", "bmp", "webp"] },
+          { name: "All Files", extensions: ["*"] },
+        ],
+      });
+      if (!selected) return;
+      const paths = Array.isArray(selected) ? selected : [selected];
+      for (const filePath of paths) {
+        const logFile = await uploadLogFileCmd(id, filePath);
+        let content: string | null = null;
+        try {
+          const raw = await readTextFile(filePath);
+          content = raw.slice(0, 8000); // cap at 8 KB to keep context manageable
+        } catch {
+          // Binary file (image) — include filename only as context
+        }
+        setPendingFiles((prev) => [...prev, { name: logFile.file_name, content }]);
+      }
+    } catch (e) {
+      setError(`Attachment failed: ${String(e)}`);
+    }
+  };
+
   const handleSend = async (message: string) => {
     if (!id || !currentIssue) return;
     const provider = getActiveProvider();
@@ -53,18 +87,33 @@ export default function Triage() {
     setIsLoading(true);
     setError(null);
 
+    // Build AI context: user text + file contents; show only text + filenames in chat UI
+    const fileContext = pendingFiles
+      .map((f) =>
+        f.content
+          ? `\n\n--- Attached: ${f.name} ---\n${f.content}`
+          : `\n\n[Image attached: ${f.name} — describe what you see if relevant]`
+      )
+      .join("");
+    const aiMessage = pendingFiles.length > 0 ? `${message}${fileContext}` : message;
+    const displayContent =
+      pendingFiles.length > 0
+        ? `${message}${message ? "\n" : ""}📎 ${pendingFiles.map((f) => f.name).join(", ")}`
+        : message;
+
     const userMsg: TriageMessage = {
       id: `user-${Date.now()}`,
       issue_id: id,
       role: "user",
-      content: message,
+      content: displayContent,
       why_level: currentWhyLevel,
       created_at: Date.now(),
     };
     addMessage(userMsg);
+    setPendingFiles([]);
 
     try {
-      const response = await chatMessageCmd(id, message, provider);
+      const response = await chatMessageCmd(id, aiMessage, provider);
       const assistantMsg: TriageMessage = {
         id: `asst-${Date.now()}`,
         issue_id: id,
@@ -126,6 +175,9 @@ export default function Triage() {
           onSend={handleSend}
           isLoading={isLoading}
           placeholder="Describe the problem or answer the AI's question..."
+          pendingFiles={pendingFiles}
+          onAttach={handleAttach}
+          onRemoveFile={(i) => setPendingFiles((prev) => prev.filter((_, idx) => idx !== i))}
         />
       </div>
     </div>