아리가 분석했어요
{ai.category} · 새 메일을 읽고 필요한 일을 정리했어요
{ai.priority}
요약 — " + ai.summary }} />
{ai.tasks.length > 0 && (
할 일로 추가{ai.tasks.length}건
{ai.tasks.map((t, i) => {
const k = "t:" + m.id + ":" + i;
return (
onAdd(k, "작업", t.text)}
meta={<>
{t.project}
{t.due}
{t.prio}
} />
);
})}
)}
{ai.events.length > 0 && (
일정에 추가{ai.events.length}건
{ai.events.map((ev, i) => {
const k = "e:" + m.id + ":" + i;
return (
onAdd(k, "일정", ev.title)}
meta={<>
{ev.date} ({ev.day})
{ev.time}{ev.dur ? " · " + ev.dur : ""}
{ev.place && <>{ev.place}}
} />
);
})}
)}
{ai.replies.length > 0 && (
답장 추천{ai.replies.length}개 초안
{ai.replies.map((r, i) => (
))}
)}
{ai.file && (() => {
const k = "f:" + m.id;
return (
{ai.file.project}에 정리{ai.file.reason}
);
})()}
{keys.length > 1 && (
아리가 준비한 {keys.length}개 작업을 한 번에 적용할 수 있어요
)}
);
}
/* ================= 리딩 패널 ================= */
function Reader({ m, added, onAdd, onReply, onAddAll, onCompose, onArchive, onStar }) {
if (!m) {
return (
읽을 메일을 선택하세요
메일을 열면 아리가 내용을 분석해 할 일·일정·답장을 미리 준비해 드려요.
);
}
const p = PPL[m.from], a = ACC[m.account];
return (
{m.subject}
{p.initial}
{p.name} {p.role &&
· {p.role}}
{p.email}
{m.date}
받는 사람: {m.to}
{a.name} · {a.email}
{m.body.map((para, i) =>
{para}
)}
{m.attachments && m.attachments.length > 0 && (
{m.attachments.map((at, i) => (
))}
)}
{m.ai &&
}
);
}
/* ================= 아리 정리 (트리아지) ================= */
function Triage({ emails, onOpen, onReply }) {
const fresh = emails.filter((m) => !m.read && m.ai);
const tasks = [], events = [], replies = [];
fresh.forEach((m) => {
m.ai.tasks.forEach((t) => tasks.push({ ...t, src: PPL[m.from].name, m }));
m.ai.events.forEach((e) => events.push({ ...e, src: PPL[m.from].name, m }));
if (m.ai.replies.length) replies.push({ src: PPL[m.from].name, subj: m.subject, r: m.ai.replies[0], m });
});
return (
아리 정리 · 오늘 아침
새 메일 {fresh.length}통을 읽고 할 일을 정리해뒀어요
세 계정에 새로 온 메일을 분석했어요. 중요도 순으로 보면, 분기 전략 미팅과 온보딩 시안 피드백이 오늘 가장 급해요. 아래에서 바로 작업·일정으로 옮기거나 답장을 보낼 수 있어요.
{tasks.length}할 일 제안
{events.length}일정 감지
{replies.length}답장 초안
{tasks.length === 0 &&
정리할 할 일이 없어요
}
{tasks.map((t, i) => (
onOpen(t.m.id)} style={{ cursor: "pointer" }}>
{t.src}님 메일에서
{t.text}
{t.project}
{t.due}
))}
{events.length === 0 &&
감지된 일정이 없어요
}
{events.map((e, i) => (
onOpen(e.m.id)} style={{ cursor: "pointer" }}>
{e.src}님 메일에서
{e.title}
{e.date} ({e.day})
{e.time}
))}
답장 초안 준비됨{replies.length}
{replies.length === 0 &&
추천할 답장이 없어요
}
{replies.map((rp, i) => (
onReply(rp.m, rp.r)} style={{ cursor: "pointer" }}>
{rp.src}님께 · {rp.subj}
{rp.r.tone}
“{rp.r.preview}”
))}
);
}
/* ================= 작성 (Compose) ================= */
const AI_DRAFTS = {
default: "안녕하세요,\n\n메일 잘 받았습니다. 내용 확인하고 빠른 시일 내 회신드리겠습니다.\n\n감사합니다.\n지우 드림",
};
function Compose({ init, onClose, onSend }) {
const [from, setFrom] = useState(init.from || "work");
const [to, setTo] = useState(init.to || "");
const [subject, setSubject] = useState(init.subject || "");
const [body, setBody] = useState(init.body || "");
const [busy, setBusy] = useState(false);
const a = ACC[from];
const cycleFrom = () => {
const ids = MD.accounts.map((x) => x.id);
setFrom(ids[(ids.indexOf(from) + 1) % ids.length]);
};
const aiAction = (label, fn) => {
setBusy(true);
setTimeout(() => { setBody(fn(body)); setBusy(false); }, 650);
};
useEffect(() => {
const h = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
}, [onClose]);
return (
<>