iris-chatbot 5.2.0 → 5.3.1

package/template/src/components/MessageCard.tsx

@@ -9,11 +9,12 @@ import {
   ChevronUp,
   Check,
   Copy,
+  Send,
   Pencil,
   PlusCircle,
   X,
 } from "lucide-react";
-import { memo, useMemo, useState } from "react";
+import { memo, useMemo, useRef, useState } from "react";
 import type {
   ChatCitationSource,
   MessageNode,
@@ -731,6 +732,502 @@ function getTimelineVisual(event: ToolEvent): {
   };
 }
 
+type DraftTemplate = {
+  channel: "email" | "message";
+  to: string[];
+  cc: string[];
+  subject: string;
+  body: string;
+  attachments: string[];
+};
+
+type ContactSuggestion = {
+  name: string;
+  value: string;
+  detail: string;
+};
+
+function toStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .filter((item): item is string => typeof item === "string")
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function dedupeStrings(values: string[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const value of values) {
+    if (!value || seen.has(value)) {
+      continue;
+    }
+    seen.add(value);
+    out.push(value);
+  }
+  return out;
+}
+
+function tokenizeRecipients(value: string): string[] {
+  return dedupeStrings(
+    value
+      .split(/[\n,]/g)
+      .map((item) => item.trim())
+      .filter(Boolean),
+  );
+}
+
+function parseDraftTemplate(approval: ToolApproval): DraftTemplate | null {
+  if (approval.toolName !== "mail_send" && approval.toolName !== "messages_send") {
+    return null;
+  }
+  const payload = parsePayload(approval.argsJson);
+  if (!payload) {
+    return null;
+  }
+  const to = toStringArray(payload.to);
+  const body = typeof payload.body === "string" ? payload.body : "";
+  if (to.length === 0 || !body) {
+    return null;
+  }
+  if (approval.toolName === "mail_send") {
+    const subject = typeof payload.subject === "string" ? payload.subject : "";
+    if (!subject) {
+      return null;
+    }
+    return {
+      channel: "email",
+      to,
+      cc: toStringArray(payload.cc),
+      subject,
+      body,
+      attachments: toStringArray(payload.attachments),
+    };
+  }
+  return {
+    channel: "message",
+    to,
+    cc: [],
+    subject: "",
+    body,
+    attachments: [],
+  };
+}
+
+function buildDraftCopyText(template: DraftTemplate): string {
+  if (template.channel === "email") {
+    return `Subject: ${template.subject}\n\n${template.body}`;
+  }
+  return template.body;
+}
+
+function DraftApprovalEditor({
+  approval,
+  isBusy,
+  onResolveApproval,
+}: {
+  approval: ToolApproval;
+  isBusy: boolean;
+  onResolveApproval: (approvalId: string, decision: "approve" | "deny", argsOverride?: Record<string, unknown>) => void;
+}) {
+  const parsed = parseDraftTemplate(approval);
+  const [toRecipients, setToRecipients] = useState<string[]>(() => parsed?.to ?? []);
+  const [ccRecipients, setCcRecipients] = useState<string[]>(() => parsed?.cc ?? []);
+  const [toInput, setToInput] = useState("");
+  const [ccInput, setCcInput] = useState("");
+  const [toSuggestions, setToSuggestions] = useState<ContactSuggestion[]>([]);
+  const [ccSuggestions, setCcSuggestions] = useState<ContactSuggestion[]>([]);
+  const [showToSuggestions, setShowToSuggestions] = useState(false);
+  const [showCcSuggestions, setShowCcSuggestions] = useState(false);
+  const [contactsHint, setContactsHint] = useState<string | null>(null);
+  const [subject, setSubject] = useState(() => parsed?.subject ?? "");
+  const [body, setBody] = useState(() => parsed?.body ?? "");
+  const [copiedDraft, setCopiedDraft] = useState(false);
+  const toSuggestTimerRef = useRef<number | null>(null);
+  const ccSuggestTimerRef = useRef<number | null>(null);
+  const toSuggestAbortRef = useRef<AbortController | null>(null);
+  const ccSuggestAbortRef = useRef<AbortController | null>(null);
+
+  if (!parsed) {
+    return null;
+  }
+
+  const mergedTo = dedupeStrings([...toRecipients, ...tokenizeRecipients(toInput)]);
+  const mergedCc = dedupeStrings([...ccRecipients, ...tokenizeRecipients(ccInput)]);
+  const canSend =
+    mergedTo.length > 0 &&
+    body.trim().length > 0 &&
+    (parsed.channel === "message" || subject.trim().length > 0);
+
+  const commitToInput = () => {
+    if (!toInput.trim()) {
+      setToSuggestions([]);
+      return;
+    }
+    setToRecipients((current) => dedupeStrings([...current, ...tokenizeRecipients(toInput)]));
+    setToInput("");
+    setToSuggestions([]);
+    setShowToSuggestions(false);
+  };
+
+  const commitCcInput = () => {
+    if (!ccInput.trim()) {
+      setCcSuggestions([]);
+      return;
+    }
+    setCcRecipients((current) => dedupeStrings([...current, ...tokenizeRecipients(ccInput)]));
+    setCcInput("");
+    setCcSuggestions([]);
+    setShowCcSuggestions(false);
+  };
+
+  const queueSuggestions = (params: { query: string; field: "to" | "cc" }) => {
+    const trimmed = params.query.trim();
+    const mode = parsed?.channel === "email" ? "email" : "message";
+    const timerRef = params.field === "to" ? toSuggestTimerRef : ccSuggestTimerRef;
+    const abortRef = params.field === "to" ? toSuggestAbortRef : ccSuggestAbortRef;
+    const setSuggestions = params.field === "to" ? setToSuggestions : setCcSuggestions;
+
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    abortRef.current?.abort();
+    abortRef.current = null;
+
+    if (!trimmed || trimmed.length < 2) {
+      setSuggestions([]);
+      return;
+    }
+
+    timerRef.current = window.setTimeout(async () => {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const response = await fetch("/api/contacts/search", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            query: trimmed,
+            mode,
+          }),
+          signal: controller.signal,
+        });
+        const payload = (await response.json().catch(() => ({}))) as {
+          ok?: boolean;
+          suggestions?: ContactSuggestion[];
+          error?: string;
+          permissionRequired?: boolean;
+        };
+        if (!response.ok || payload.ok === false) {
+          setSuggestions([]);
+          if (payload.permissionRequired) {
+            setContactsHint(
+              payload.error ||
+              "Contacts permission is required for suggestions. Approve when macOS prompts.",
+            );
+          }
+          return;
+        }
+        const suggestions = Array.isArray(payload.suggestions)
+          ? payload.suggestions
+              .map((item) => ({
+                name: typeof item?.name === "string" ? item.name.trim() : "",
+                value: typeof item?.value === "string" ? item.value.trim() : "",
+                detail: typeof item?.detail === "string" ? item.detail.trim() : "",
+              }))
+              .filter((item) => item.name && item.value)
+          : [];
+        setContactsHint(null);
+        setSuggestions(suggestions);
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          return;
+        }
+        setSuggestions([]);
+      }
+    }, 170);
+  };
+
+  const addRecipientFromSuggestion = (params: { field: "to" | "cc"; value: string }) => {
+    if (params.field === "to") {
+      setToRecipients((current) => dedupeStrings([...current, params.value]));
+      setToInput("");
+      setToSuggestions([]);
+      setShowToSuggestions(false);
+      return;
+    }
+    setCcRecipients((current) => dedupeStrings([...current, params.value]));
+    setCcInput("");
+    setCcSuggestions([]);
+    setShowCcSuggestions(false);
+  };
+
+  const buildOverrideArgs = (): Record<string, unknown> => {
+    const args: Record<string, unknown> = {
+      to: mergedTo,
+      body,
+    };
+    if (parsed.channel === "email") {
+      args.subject = subject;
+      if (mergedCc.length > 0) {
+        args.cc = mergedCc;
+      }
+      if (parsed.attachments.length > 0) {
+        args.attachments = parsed.attachments;
+      }
+    }
+    return args;
+  };
+
+  return (
+    <div className="draft-approval-card">
+      <div className="draft-approval-header">
+        <div className="draft-approval-title">{parsed.channel === "email" ? "Email" : "Message"} draft</div>
+        <div className="draft-approval-actions">
+          <button
+            className="draft-approval-icon-btn"
+            onClick={async () => {
+              await navigator.clipboard.writeText(
+                buildDraftCopyText({
+                  ...parsed,
+                  to: mergedTo,
+                  cc: mergedCc,
+                  subject,
+                  body,
+                }),
+              );
+              setCopiedDraft(true);
+              window.setTimeout(() => setCopiedDraft(false), 1200);
+            }}
+            disabled={isBusy}
+            title="Copy draft"
+            aria-label="Copy draft"
+          >
+            {copiedDraft ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          </button>
+          <button
+            className="draft-approval-icon-btn primary"
+            onClick={() => {
+              commitToInput();
+              commitCcInput();
+              onResolveApproval(approval.id, "approve", buildOverrideArgs());
+            }}
+            disabled={isBusy || !canSend}
+            title="Send"
+            aria-label="Send draft"
+          >
+            <Send className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="draft-approval-field">
+        <span className="draft-approval-label">To</span>
+        <div className="draft-recipient-field-stack">
+          <div className="draft-recipient-input-wrap">
+            {toRecipients.map((recipient, index) => (
+              <span key={`${recipient}-${index}`} className="draft-recipient-chip">
+                {recipient}
+                <button
+                  className="draft-recipient-chip-remove"
+                  onClick={() => setToRecipients((current) => current.filter((_, itemIndex) => itemIndex !== index))}
+                  aria-label={`Remove ${recipient}`}
+                  disabled={isBusy}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </span>
+            ))}
+            <input
+              value={toInput}
+              onChange={(event) => {
+                const next = event.target.value;
+                setToInput(next);
+                queueSuggestions({ query: next, field: "to" });
+              }}
+              onFocus={() => {
+                setShowToSuggestions(true);
+                queueSuggestions({ query: toInput, field: "to" });
+              }}
+              onBlur={() => {
+                window.setTimeout(() => {
+                  setShowToSuggestions(false);
+                  commitToInput();
+                }, 80);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === "Tab") {
+                  if (showToSuggestions && toSuggestions.length > 0) {
+                    event.preventDefault();
+                    addRecipientFromSuggestion({ field: "to", value: toSuggestions[0].value });
+                    return;
+                  }
+                  event.preventDefault();
+                  commitToInput();
+                  return;
+                }
+                if (event.key === ",") {
+                  event.preventDefault();
+                  commitToInput();
+                  return;
+                }
+                if (event.key === "Backspace" && !toInput && toRecipients.length > 0) {
+                  setToRecipients((current) => current.slice(0, -1));
+                }
+              }}
+              placeholder="Add recipient"
+              className="draft-recipient-input"
+              disabled={isBusy}
+            />
+          </div>
+          {showToSuggestions && (toSuggestions.length > 0 || contactsHint) ? (
+            <div className="draft-contact-suggestions">
+              {toSuggestions.map((suggestion) => (
+                <button
+                  key={`${suggestion.value}-${suggestion.name}`}
+                  className="draft-contact-suggestion-item"
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    addRecipientFromSuggestion({ field: "to", value: suggestion.value });
+                  }}
+                  type="button"
+                >
+                  <span className="draft-contact-suggestion-name">{suggestion.name}</span>
+                  <span className="draft-contact-suggestion-detail">{suggestion.detail}</span>
+                </button>
+              ))}
+              {toSuggestions.length === 0 && contactsHint ? (
+                <div className="draft-contact-suggestion-hint">{contactsHint}</div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {parsed.channel === "email" ? (
+        <div className="draft-approval-field">
+          <span className="draft-approval-label">Cc</span>
+          <div className="draft-recipient-field-stack">
+            <div className="draft-recipient-input-wrap">
+              {ccRecipients.map((recipient, index) => (
+                <span key={`${recipient}-${index}`} className="draft-recipient-chip">
+                  {recipient}
+                  <button
+                    className="draft-recipient-chip-remove"
+                    onClick={() => setCcRecipients((current) => current.filter((_, itemIndex) => itemIndex !== index))}
+                    aria-label={`Remove ${recipient}`}
+                    disabled={isBusy}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </span>
+              ))}
+              <input
+                value={ccInput}
+                onChange={(event) => {
+                  const next = event.target.value;
+                  setCcInput(next);
+                  queueSuggestions({ query: next, field: "cc" });
+                }}
+                onFocus={() => {
+                  setShowCcSuggestions(true);
+                  queueSuggestions({ query: ccInput, field: "cc" });
+                }}
+                onBlur={() => {
+                  window.setTimeout(() => {
+                    setShowCcSuggestions(false);
+                    commitCcInput();
+                  }, 80);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === "Tab") {
+                    if (showCcSuggestions && ccSuggestions.length > 0) {
+                      event.preventDefault();
+                      addRecipientFromSuggestion({ field: "cc", value: ccSuggestions[0].value });
+                      return;
+                    }
+                    event.preventDefault();
+                    commitCcInput();
+                    return;
+                  }
+                  if (event.key === ",") {
+                    event.preventDefault();
+                    commitCcInput();
+                    return;
+                  }
+                  if (event.key === "Backspace" && !ccInput && ccRecipients.length > 0) {
+                    setCcRecipients((current) => current.slice(0, -1));
+                  }
+                }}
+                placeholder="Add cc"
+                className="draft-recipient-input"
+                disabled={isBusy}
+              />
+            </div>
+            {showCcSuggestions && (ccSuggestions.length > 0 || contactsHint) ? (
+              <div className="draft-contact-suggestions">
+                {ccSuggestions.map((suggestion) => (
+                  <button
+                    key={`${suggestion.value}-${suggestion.name}`}
+                    className="draft-contact-suggestion-item"
+                    onMouseDown={(event) => {
+                      event.preventDefault();
+                      addRecipientFromSuggestion({ field: "cc", value: suggestion.value });
+                    }}
+                    type="button"
+                  >
+                    <span className="draft-contact-suggestion-name">{suggestion.name}</span>
+                    <span className="draft-contact-suggestion-detail">{suggestion.detail}</span>
+                  </button>
+                ))}
+                {ccSuggestions.length === 0 && contactsHint ? (
+                  <div className="draft-contact-suggestion-hint">{contactsHint}</div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {parsed.channel === "email" ? (
+        <div className="draft-approval-field">
+          <span className="draft-approval-label">Subject</span>
+          <input
+            value={subject}
+            onChange={(event) => setSubject(event.target.value)}
+            className="draft-approval-text-input"
+            disabled={isBusy}
+          />
+        </div>
+      ) : null}
+
+      <div className="draft-approval-field">
+        <span className="draft-approval-label">Message</span>
+        <textarea
+          value={body}
+          onChange={(event) => setBody(event.target.value)}
+          className="draft-approval-textarea"
+          disabled={isBusy}
+          rows={parsed.channel === "email" ? 8 : 5}
+        />
+      </div>
+
+      <div className="draft-approval-footer">
+        <button
+          className="draft-approval-cancel"
+          onClick={() => onResolveApproval(approval.id, "deny")}
+          disabled={isBusy}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function MessageCard({
   message,
   onAddThread,
@@ -755,7 +1252,11 @@ function MessageCard({
   isStreaming?: boolean;
   toolEvents?: ToolEvent[];
   approvals?: ToolApproval[];
-  onResolveApproval?: (approvalId: string, decision: "approve" | "deny") => void;
+  onResolveApproval?: (
+    approvalId: string,
+    decision: "approve" | "deny",
+    argsOverride?: Record<string, unknown>,
+  ) => void;
   approvalBusyIds?: Record<string, boolean>;
 }) {
   const [copied, setCopied] = useState(false);
@@ -966,6 +1467,12 @@ function MessageCard({
               {approvalItems.map((approval) => {
                 const isPending = approval.status === "requested";
                 const isBusy = Boolean(approvalBusyIds?.[approval.id]);
+                const draftTemplate = parseDraftTemplate(approval);
+                const showDraftEditor =
+                  isPending &&
+                  Boolean(onResolveApproval) &&
+                  Boolean(draftTemplate) &&
+                  (approval.toolName === "mail_send" || approval.toolName === "messages_send");
                 const callSummary = summarizeToolCall(approval.toolName, parsePayload(approval.argsJson));
                 const approvalLabel =
                   approval.status === "requested"
@@ -985,33 +1492,46 @@ function MessageCard({
                         {approvalLabel}
                       </span>
                     </div>
-                    <div className="mt-1 text-sm text-[var(--text-primary)]">{callSummary.title}</div>
-                    {callSummary.detail ? (
-                      <div className="mt-1 text-xs text-[var(--text-muted)]">{callSummary.detail}</div>
-                    ) : null}
-                    {approval.reason ? (
-                      <div className="mt-1 text-xs text-[var(--text-muted)]">{approval.reason}</div>
-                    ) : null}
-                    <div className="mt-2 flex items-center gap-2">
-                      {isPending && onResolveApproval ? (
-                        <>
-                          <button
-                            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-1 text-[10px] text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
-                            onClick={() => onResolveApproval(approval.id, "approve")}
-                            disabled={isBusy}
-                          >
-                            Approve
-                          </button>
-                          <button
-                            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-1 text-[10px] text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
-                            onClick={() => onResolveApproval(approval.id, "deny")}
-                            disabled={isBusy}
-                          >
-                            Deny
-                          </button>
-                        </>
-                      ) : null}
-                    </div>
+                    {showDraftEditor && onResolveApproval ? (
+                      <div className="mt-2">
+                        <DraftApprovalEditor
+                          key={`draft-${approval.id}-${approval.argsJson ?? ""}`}
+                          approval={approval}
+                          isBusy={isBusy}
+                          onResolveApproval={onResolveApproval}
+                        />
+                      </div>
+                    ) : (
+                      <>
+                        <div className="mt-1 text-sm text-[var(--text-primary)]">{callSummary.title}</div>
+                        {callSummary.detail ? (
+                          <div className="mt-1 text-xs text-[var(--text-muted)]">{callSummary.detail}</div>
+                        ) : null}
+                        {approval.reason ? (
+                          <div className="mt-1 text-xs text-[var(--text-muted)]">{approval.reason}</div>
+                        ) : null}
+                        <div className="mt-2 flex items-center gap-2">
+                          {isPending && onResolveApproval ? (
+                            <>
+                              <button
+                                className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-1 text-[10px] text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
+                                onClick={() => onResolveApproval(approval.id, "approve")}
+                                disabled={isBusy}
+                              >
+                                Approve
+                              </button>
+                              <button
+                                className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-1 text-[10px] text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
+                                onClick={() => onResolveApproval(approval.id, "deny")}
+                                disabled={isBusy}
+                              >
+                                Deny
+                              </button>
+                            </>
+                          ) : null}
+                        </div>
+                      </>
+                    )}
                   </div>
                 );
               })}

package/template/src/components/SettingsModal.tsx

@@ -122,6 +122,11 @@ export default function SettingsModal({
   const [toolsEnabled, setToolsEnabled] = useState(localTools.enabled);
   const [approvalMode, setApprovalMode] = useState<ApprovalMode>(localTools.approvalMode);
   const [safetyProfile, setSafetyProfile] = useState<SafetyProfile>(localTools.safetyProfile);
+  const [preSendDraftReview, setPreSendDraftReview] = useState(
+    typeof localTools.preSendDraftReview === "boolean"
+      ? localTools.preSendDraftReview
+      : DEFAULT_LOCAL_TOOLS_SETTINGS.preSendDraftReview,
+  );
   const [allowedRootsText, setAllowedRootsText] = useState((localTools.allowedRoots ?? []).join("\n"));
   const [enableNotes, setEnableNotes] = useState(localTools.enableNotes);
   const [enableApps, setEnableApps] = useState(localTools.enableApps);
@@ -534,6 +539,7 @@ export default function SettingsModal({
         enabled: toolsEnabled,
         approvalMode,
         safetyProfile,
+        preSendDraftReview,
         allowedRoots:
           allowedRoots.length > 0 ? allowedRoots : [...DEFAULT_LOCAL_TOOLS_SETTINGS.allowedRoots],
         enableNotes,
@@ -983,6 +989,7 @@ export default function SettingsModal({
                   { label: "Enable music controls", checked: enableMusic, setter: setEnableMusic },
                   { label: "Enable calendar/reminders tools", checked: enableCalendar, setter: setEnableCalendar },
                   { label: "Enable mail/messages tools", checked: enableMail, setter: setEnableMail },
+                  { label: "Require pre-send draft review for email/messages", checked: preSendDraftReview, setter: setPreSendDraftReview },
                   { label: "Enable workflow tool", checked: enableWorkflow, setter: setEnableWorkflow },
                   { label: "Enable system controls", checked: enableSystem, setter: setEnableSystem },
                 ].map((item) => (

package/template/src/lib/data.ts

@@ -51,6 +51,7 @@ function isLegacyDefaultLocalToolsSettings(localTools: LocalToolsSettings): bool
     localTools.enabled === LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS.enabled &&
     localTools.approvalMode === LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS.approvalMode &&
     localTools.safetyProfile === LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS.safetyProfile &&
+    localTools.preSendDraftReview === LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS.preSendDraftReview &&
     sameStringArray(localTools.allowedRoots, LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS.allowedRoots) &&
     localTools.enableNotes === LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS.enableNotes &&
     localTools.enableApps === LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS.enableApps &&
@@ -82,6 +83,10 @@ function normalizeLocalToolsSettings(
       localTools.approvalMode ?? DEFAULT_LOCAL_TOOLS_SETTINGS.approvalMode,
     safetyProfile:
       localTools.safetyProfile ?? DEFAULT_LOCAL_TOOLS_SETTINGS.safetyProfile,
+    preSendDraftReview:
+      typeof localTools.preSendDraftReview === "boolean"
+        ? localTools.preSendDraftReview
+        : DEFAULT_LOCAL_TOOLS_SETTINGS.preSendDraftReview,
     allowedRoots:
       Array.isArray(localTools.allowedRoots) && localTools.allowedRoots.length > 0
         ? localTools.allowedRoots.filter((root) => typeof root === "string" && root.trim())