変更内容まとめ

バックエンド models.py — MailSender.rule に always_notify 追加、MailEmail.feedback にも追加、マイグレーション適用済み views.py — FeedbackView.post が always_notify を受け取ったら MailSender ルールを作成（never_notify と同じ仕組み）フロントエンド feedback/[token]/page.tsx — 4択目「🔔 常に通知してほしい」を追加。スコープ選択（アドレス/ドメイン）もあり。色はteal系で区別 mail/rules/page.tsx — 追加フォームにルール種別セレクタを追加、一覧に「常に通知」バッジ（teal）を表示 Windmill側の使い方（メモ） GET /api/mail/sender-rule/ のレスポンスに "rule": "always_notify" が返ってきたら、LLMをスキップして llm_verdict: "important" で直接 POST /api/mail/emails/ を呼べばOKです。
2026-02-22 09:49:28 +09:00
parent 7a1aa81f9f
commit df16ab1ee0
6 changed files with 129 additions and 45 deletions
--- a/frontend/src/app/mail/feedback/[token]/page.tsx
+++ b/frontend/src/app/mail/feedback/[token]/page.tsx
@@ -3,6 +3,8 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';

+type FeedbackValue = 'important' | 'not_important' | 'never_notify' | 'always_notify';
+
 interface MailEmailFeedback {
  id: number;
  sender_email: string;
@@ -10,11 +12,14 @@ interface MailEmailFeedback {
  subject: string;
  body_preview: string;
  received_at: string;
-  feedback: 'important' | 'not_important' | 'never_notify' | null;
+  feedback: FeedbackValue | null;
 }

 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';

+// スコープ選択が必要なフィードバック
+const NEEDS_SCOPE: FeedbackValue[] = ['never_notify', 'always_notify'];
+
 export default function FeedbackPage() {
  const params = useParams();
  const token = params.token as string;
@@ -23,7 +28,7 @@ export default function FeedbackPage() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

-  const [selected, setSelected] = useState<'important' | 'not_important' | 'never_notify' | null>(null);
+  const [selected, setSelected] = useState<FeedbackValue | null>(null);
  const [showScopeChoice, setShowScopeChoice] = useState(false);
  const [scope, setScope] = useState<'address' | 'domain'>('address');
  const [submitting, setSubmitting] = useState(false);
@@ -34,18 +39,14 @@ export default function FeedbackPage() {
      try {
        const res = await fetch(`${API_URL}/api/mail/feedback/${token}/`);
        if (!res.ok) {
-          if (res.status === 404) {
-            setError('このフィードバックリンクは無効です');
-          } else {
-            setError('メール情報の取得に失敗しました');
-          }
+          setError(res.status === 404 ? 'このフィードバックリンクは無効です' : 'メール情報の取得に失敗しました');
          return;
        }
        const data = await res.json();
        setEmail(data);
        if (data.feedback) {
          setSelected(data.feedback);
-          if (data.feedback === 'never_notify') {
+          if (NEEDS_SCOPE.includes(data.feedback)) {
            setShowScopeChoice(true);
          }
        }
@@ -58,19 +59,17 @@ export default function FeedbackPage() {
    fetchEmail();
  }, [token]);

-  const handleSelect = (value: 'important' | 'not_important' | 'never_notify') => {
+  const handleSelect = (value: FeedbackValue) => {
    setSelected(value);
-    setShowScopeChoice(value === 'never_notify');
+    setShowScopeChoice(NEEDS_SCOPE.includes(value));
    setSubmitted(false);
-    if (value !== 'never_notify') {
+    setError(null);
+    if (!NEEDS_SCOPE.includes(value)) {
      submitFeedback(value, undefined);
    }
  };

-  const submitFeedback = async (
-    feedback: 'important' | 'not_important' | 'never_notify',
-    feedbackScope: 'address' | 'domain' | undefined
-  ) => {
+  const submitFeedback = async (feedback: FeedbackValue, feedbackScope: 'address' | 'domain' | undefined) => {
    setSubmitting(true);
    try {
      const body: Record<string, string> = { feedback };
@@ -81,7 +80,7 @@ export default function FeedbackPage() {
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
-      if (!res.ok) throw new Error('送信に失敗しました');
+      if (!res.ok) throw new Error();
      setSubmitted(true);
      setShowScopeChoice(false);
      setEmail((prev) => (prev ? { ...prev, feedback } : prev));
@@ -92,8 +91,10 @@ export default function FeedbackPage() {
    }
  };

-  const handleNeverNotifyConfirm = () => {
-    submitFeedback('never_notify', scope);
+  const handleScopeConfirm = () => {
+    if (selected && NEEDS_SCOPE.includes(selected)) {
+      submitFeedback(selected, scope);
+    }
  };

  const formatDate = (iso: string) => {
@@ -124,10 +125,11 @@ export default function FeedbackPage() {

  if (!email) return null;

-  const feedbackLabel = {
+  const feedbackLabel: Record<FeedbackValue, string> = {
    important: '✅ 重要だった',
    not_important: '📧 普通のメール',
    never_notify: '🔇 今後通知しない',
+    always_notify: '🔔 常に通知してほしい',
  };

  return (
@@ -178,7 +180,7 @@ export default function FeedbackPage() {
          {/* 現在のフィードバック表示 */}
          {email.feedback && !submitted && (
            <p className="text-xs text-gray-400 mb-3">
-              現在の評価: {feedbackLabel[email.feedback]} （変更できます）
+              現在の評価: {feedbackLabel[email.feedback]}　（変更できます）
            </p>
          )}

@@ -209,6 +211,20 @@ export default function FeedbackPage() {
              📧 普通のメール（通知不要）
            </button>

+            {/* 常に通知してほしい */}
+            <button
+              onClick={() => handleSelect('always_notify')}
+              disabled={submitting}
+              className={`w-full text-left px-4 py-3 rounded-lg border text-sm font-medium transition-colors disabled:opacity-50 ${
+                selected === 'always_notify'
+                  ? 'bg-teal-50 border-teal-400 text-teal-700'
+                  : 'border-gray-200 text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              🔔 常に通知してほしい
+              <span className="ml-2 text-xs font-normal text-gray-400">（LLMをスキップして即通知）</span>
+            </button>
+
            {/* 今後通知しない */}
            <button
              onClick={() => handleSelect('never_notify')}
@@ -222,10 +238,18 @@ export default function FeedbackPage() {
              🔇 今後通知しない
            </button>

-            {/* 今後通知しない → スコープ選択 */}
-            {showScopeChoice && (
-              <div className="ml-4 mt-1 p-4 bg-orange-50 border border-orange-200 rounded-lg space-y-3">
-                <p className="text-xs text-orange-700 font-medium">通知をやめる範囲を選んでください</p>
+            {/* スコープ選択（常に通知 / 今後通知しない で展開） */}
+            {showScopeChoice && selected && NEEDS_SCOPE.includes(selected) && (
+              <div className={`ml-4 mt-1 p-4 border rounded-lg space-y-3 ${
+                selected === 'always_notify'
+                  ? 'bg-teal-50 border-teal-200'
+                  : 'bg-orange-50 border-orange-200'
+              }`}>
+                <p className={`text-xs font-medium ${
+                  selected === 'always_notify' ? 'text-teal-700' : 'text-orange-700'
+                }`}>
+                  {selected === 'always_notify' ? '常に通知する範囲を選んでください' : '通知をやめる範囲を選んでください'}
+                </p>
                <label className="flex items-start gap-3 cursor-pointer">
                  <input
                    type="radio"
@@ -233,7 +257,7 @@ export default function FeedbackPage() {
                    value="address"
                    checked={scope === 'address'}
                    onChange={() => setScope('address')}
-                    className="mt-0.5 text-orange-500 focus:ring-orange-400"
+                    className="mt-0.5"
                  />
                  <div>
                    <p className="text-sm text-gray-800 font-medium">このアドレスだけ</p>
@@ -247,7 +271,7 @@ export default function FeedbackPage() {
                    value="domain"
                    checked={scope === 'domain'}
                    onChange={() => setScope('domain')}
-                    className="mt-0.5 text-orange-500 focus:ring-orange-400"
+                    className="mt-0.5"
                  />
                  <div>
                    <p className="text-sm text-gray-800 font-medium">このドメインごと</p>
@@ -255,9 +279,13 @@ export default function FeedbackPage() {
                  </div>
                </label>
                <button
-                  onClick={handleNeverNotifyConfirm}
+                  onClick={handleScopeConfirm}
                  disabled={submitting}
-                  className="w-full py-2 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600 disabled:opacity-50 transition-colors"
+                  className={`w-full py-2 text-white text-sm font-medium rounded-lg disabled:opacity-50 transition-colors ${
+                    selected === 'always_notify'
+                      ? 'bg-teal-500 hover:bg-teal-600'
+                      : 'bg-orange-500 hover:bg-orange-600'
+                  }`}
                >
                  {submitting ? '送信中...' : '確定する'}
                </button>
--- a/frontend/src/app/mail/rules/page.tsx
+++ b/frontend/src/app/mail/rules/page.tsx
@@ -1,7 +1,6 @@
 'use client';

 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { Trash2, Plus, Mail } from 'lucide-react';
 import Navbar from '@/components/Navbar';
 import { api } from '@/lib/api';
@@ -11,19 +10,29 @@ interface MailSender {
  type: 'address' | 'domain';
  email: string | null;
  domain: string | null;
-  rule: 'never_notify';
+  rule: 'never_notify' | 'always_notify';
  note: string;
  created_at: string;
 }

+const RULE_LABEL: Record<MailSender['rule'], string> = {
+  always_notify: '常に通知',
+  never_notify: '通知しない',
+};
+
+const RULE_STYLE: Record<MailSender['rule'], string> = {
+  always_notify: 'bg-teal-100 text-teal-700',
+  never_notify: 'bg-orange-100 text-orange-700',
+};
+
 export default function MailRulesPage() {
-  const router = useRouter();
  const [senders, setSenders] = useState<MailSender[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 追加フォーム
  const [addType, setAddType] = useState<'address' | 'domain'>('address');
+  const [addRule, setAddRule] = useState<'never_notify' | 'always_notify'>('never_notify');
  const [addValue, setAddValue] = useState('');
  const [addNote, setAddNote] = useState('');
  const [adding, setAdding] = useState(false);
@@ -68,7 +77,7 @@ export default function MailRulesPage() {
    setAdding(true);
    try {
      const body: Record<string, string> = {
-        rule: 'never_notify',
+        rule: addRule,
        note: addNote.trim(),
      };
      if (addType === 'address') {
@@ -117,7 +126,8 @@ export default function MailRulesPage() {
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 mb-6">
          <h2 className="text-sm font-semibold text-gray-700 mb-4">ルールを追加</h2>
          <form onSubmit={handleAdd} className="space-y-3">
-            <div className="flex gap-2">
+            <div className="flex gap-2 flex-wrap">
+              {/* 種別（アドレス / ドメイン） */}
              <select
                value={addType}
                onChange={(e) => setAddType(e.target.value as 'address' | 'domain')}
@@ -126,12 +136,22 @@ export default function MailRulesPage() {
                <option value="address">アドレス</option>
                <option value="domain">ドメイン</option>
              </select>
+              {/* ルール種別（常に通知 / 通知しない） */}
+              <select
+                value={addRule}
+                onChange={(e) => setAddRule(e.target.value as 'never_notify' | 'always_notify')}
+                className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+              >
+                <option value="never_notify">🔇 通知しない</option>
+                <option value="always_notify">🔔 常に通知</option>
+              </select>
+              {/* 値（アドレス or ドメイン） */}
              <input
                type="text"
                value={addValue}
                onChange={(e) => setAddValue(e.target.value)}
                placeholder={addType === 'address' ? 'promo@example.com' : 'example.com'}
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+                className="flex-1 min-w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
              />
            </div>
            <div className="flex gap-2">
@@ -139,7 +159,7 @@ export default function MailRulesPage() {
                type="text"
                value={addNote}
                onChange={(e) => setAddNote(e.target.value)}
-                placeholder="メモ（任意）例: ○○の営業メール"
+                placeholder="メモ（任意）例: ○○の営業メール / 農協からの通知"
                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
              />
              <button
@@ -161,7 +181,7 @@ export default function MailRulesPage() {
        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
          <div className="px-5 py-3 border-b border-gray-200">
            <h2 className="text-sm font-semibold text-gray-700">
-              通知しない送信者一覧
+              送信者ルール一覧
              {!loading && <span className="ml-2 text-gray-400 font-normal">（{senders.length}件）</span>}
            </h2>
          </div>
@@ -184,6 +204,7 @@ export default function MailRulesPage() {
            <div className="divide-y divide-gray-100">
              {senders.map((sender) => (
                <div key={sender.id} className="flex items-center gap-3 px-5 py-3">
+                  {/* 種別バッジ */}
                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium shrink-0 ${
                    sender.type === 'address'
                      ? 'bg-blue-100 text-blue-700'
@@ -191,6 +212,11 @@ export default function MailRulesPage() {
                  }`}>
                    {sender.type === 'address' ? 'アドレス' : 'ドメイン'}
                  </span>
+                  {/* ルールバッジ */}
+                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium shrink-0 ${RULE_STYLE[sender.rule]}`}>
+                    {RULE_LABEL[sender.rule]}
+                  </span>
+                  {/* 値・メモ */}
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-800 truncate">
                      {sender.email || sender.domain}