Update app.py

app.py

@@ -44,15 +44,12 @@ def email_classifier_router(raw_email):
         "- Draft professional reply\n"
         "- Summary (one sentence)\n"
         "- Action Items (numbered list)\n\n"
-        "Format:\n"
-        '{"Category":"...", "Priority":"...", "Suggested Recipient":"...", "Draft Response":"...", "Summary":"...", "Action Items":["...","..."]}\n\n'
         f"{raw_email}"
     )
     raw_result = groq_completion(prompt)
     try:
         output = json.loads(raw_result)
     except Exception as e:
-        print(f"JSON parse error: {e}\nRAW: {raw_result}")
         output = {
             "Category": "Error",
             "Priority": "Error",
@@ -73,91 +70,56 @@ def add_to_history(email, cat, pri, summ):
     }
     classification_history.append(entry)
 
-css = """
+css="""
 body { background: linear-gradient(120deg, #10193a 0%, #175ad7 120%) !important; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;}
 .gradio-container { background: transparent !important; }
-.card-block {
-    background: rgba(27,36,68,0.96);
-    border-radius: 30px;
-    box-shadow: 0 6px 42px #0b2269bb, 0 1.5px 0 #186fc055 inset;
-    padding: 38px 28px 29px 28px;
-    margin: 32px 0;
-    color: #fafeff;
-    border: 2px solid #2847a46c;
-    backdrop-filter: blur(8px);
-}
-input, textarea, .wrap.svelte-psy7la, .wrap.svelte-1ybjah6 { 
-    background: rgba(21,28,56,0.91)!important; border:1.5px solid #345ca3e3!important; color:#def1ff!important;
-    border-radius: 14px !important; box-shadow: none !important;
-}
+.card-block { background: rgba(27,36,68,0.96); border-radius: 30px; box-shadow: 0 6px 42px #0b2269bb, 0 1.5px 0 #186fc055 inset; padding: 38px 28px 29px 28px; margin: 32px 0; color: #fafeff; border: 2px solid #2847a46c; backdrop-filter: blur(8px);}
+input, textarea, .wrap.svelte-psy7la, .wrap.svelte-1ybjah6 { background: rgba(21,28,56,0.91)!important; border:1.5px solid #345ca3e3!important; color:#def1ff!important; border-radius: 14px !important; box-shadow: none !important;}
 label, .label.svelte-1ybjah6 { color: #70acf8!important; font-size: 1em !important; font-weight: 400;}
-.glass-btn {
-    border-radius: 18px !important;
-    box-shadow: 0 4px 18px #287bef25 !important;
-    background: linear-gradient(90deg,#336bc0 60%,#1ae6ff 140%)!important;
-    color: #fff !important;
-    letter-spacing: .04em;
-    border: none !important;
-    font-size: 1.11em !important;
-    font-weight: 600;
-    padding: 12px 0 10px 0 !important;
-}
-.card-header {
-    font-size: 1.32em;
-    font-weight: 800;
-    letter-spacing: 0.01em;
-    margin: 0 0 15px 0;
-    color: #ffffff;
-    text-shadow: 0 3px 24px #175ad799;
-    display: flex; align-items: center;
-}
-.badge {
-    display:inline-block;
-    border-radius:999px;
-    padding:4px 16px;
-    font-weight:600;
-    background:linear-gradient(90deg,#2870ee 70%,#13e4fc 140%);
-    box-shadow:0 1px 12px #0663fd29;
-    color:#fff;
-    margin-right:12px;
-    font-size:1.05em;
-    vertical-align:middle;
-}
+.glass-btn { border-radius: 18px !important; box-shadow: 0 4px 18px #287bef25 !important; background: linear-gradient(90deg,#336bc0 60%,#1ae6ff 140%)!important; color: #fff !important; letter-spacing: .04em; border: none !important; font-size: 1.11em !important; font-weight: 600; padding: 12px 0 10px 0 !important;}
+.card-header { font-size: 2.1em;font-weight:900;letter-spacing:0.01em; margin:0 0 28px 0; color: #fff; text-shadow: 0 5px 36px #175ad799;}
+.badge { display:inline-block; border-radius:999px; padding:4px 16px; font-weight:600; background:linear-gradient(90deg,#2870ee 70%,#13e4fc 140%); box-shadow:0 1px 12px #0663fd29; color:#fff; margin-right:12px; font-size:1.12em; vertical-align:middle;}
 .priority-high { background:linear-gradient(90deg,#ed4864 60%,#fa4764 150%)!important; color:#fff;}
 .priority-medium { background:linear-gradient(90deg,#f3aa36 70%,#f6ea48 120%)!important;color:#222;}
 .priority-low { background:linear-gradient(90deg,#18cd67 60%,#27f8ac 150%)!important;color:#fff;}
-.history-record {
-    background: rgba(35, 54, 90, 0.92);
-    color: #e2f5ff;
-    margin: 0 0 13px 0;
-    border-radius: 14px;
-    border-left: 5px solid #10baff;
-    padding: 13px 22px 12px 22px;
-    box-shadow: 0 2px 12px #08526733;
-    transition: box-shadow .2s;
-    font-size: 1.01em;
-}
-.history-record.selected { border-left:7px solid #22eef8; background: rgba(44,86,166,1);}
-.history-record .small { color:#a6c5e7; font-size: .92em;}
+.history-cardbox {display:flex;gap:28px;flex-wrap:wrap;}
+.history-record {background: rgba(35, 54, 90, 0.92);color: #e2f5ff;margin:0 0 13px 0; border-radius: 16px;border-left: 5px solid #10baff; box-shadow: 0 2px 12px #08526733;padding:20px 26px 16px 26px;min-width:340px;max-width:370px;box-sizing:border-box;}
+.history-ts { color:#a7b7ce;font-size:0.96em; }
+.history-catlab { font-size:1.1em;font-weight:600; }
+.history-summ { font-style:italic;font-size:1.08em;margin-top:7px;color:#eaf7ff;}
+.history-btnrow { display:flex; gap:12px; margin-top:14px;}
+.btn-md {padding:10px 22px;border-radius:14px; border:none;font-size:1.03em;font-weight:700;background:#3246b8; color:#fff;}
+.btn-md:hover { background:#2284cc;}
+.card-header svg {width:1.5em;height:1.5em;vertical-align:middle; margin-right:8px;}
 """
 
 with gr.Blocks(css=css) as demo:
-    gr.Markdown("<div style='text-align:center; margin:10px 0 16px 0; font-size:2em; letter-spacing:.01em; font-weight:900;color:#fff;'><span style='margin-right:10px;'>📧</span>AI Email Classifier & Router</div>")
+    gr.Markdown("""
+        <div style='text-align:center; margin:10px 0 22px 0; font-size:2.5em; font-weight:900; letter-spacing:.01em; color:#fff;'>
+            <svg width="36" height="36" fill="none" stroke="#26e2ec" stroke-width="3" style="vertical-align:middle;margin-right:9px;">
+                <circle cx="18" cy="18" r="16" fill="#0133a0" stroke-width="0"/>
+                <text x="50%" y="55%" text-anchor="middle" dominant-baseline="middle" font-family="Segoe UI" font-size="19" fill="#fff">✉️</text>
+            </svg>
+            AI Email Classifier & Router
+        </div>
+    """)
     with gr.Row():
-        with gr.Column(scale=5, min_width=410):
+        with gr.Column(scale=6, min_width=420):
             with gr.Group(elem_id="input-card", elem_classes=["card-block"]):
                 gr.Markdown("<div class='card-header'>✉️ Paste Your Email</div>")
-                gr.Markdown("<span style='font-size:.95em; color:#a6c5e7;'>Choose Example:</span>")
+                gr.Markdown("<span style='font-size:1.05em; color:#a6c5e7;'>Choose Example:</span>")
                 with gr.Row():
                     support_button = gr.Button("Support Request")
                     sales_button = gr.Button("Sales Inquiry")
                     finance_button = gr.Button("Finance / Billing")
                     urgent_button = gr.Button("Urgent Incident")
                     spam_button = gr.Button("Spam / Marketing")
+                    gr.Button("Account issue")
+                    gr.Button("Legal inquiry")
+                    gr.Button("Meeting scheduling")
                 email_box = gr.Textbox(lines=8, label="", placeholder="From: ...\nSubject: ...")
-                classify_btn = gr.Button("Classify Email", elem_classes=["glass-btn"])
 
-        with gr.Column(scale=7, min_width=430):
+        with gr.Column(scale=8, min_width=430):
             with gr.Group(elem_id="output-card", elem_classes=["card-block"]):
                 gr.Markdown("""<div class='card-header'>🧮 Classification Results</div>""")
                 result_labels = gr.Markdown("")
@@ -167,20 +129,21 @@ with gr.Blocks(css=css) as demo:
                 action_items = gr.Textbox(lines=3, label="Extracted Action Items")
 
     with gr.Group(elem_id="history-card", elem_classes=["card-block"]):
-        gr.Markdown("""<div class='card-header'>🕒 Classification History</div>""")
-        history_radio = gr.Radio([], label="", type="index")
-        load_btn = gr.Button("Load Selected", elem_classes=["glass-btn"])
-
-    ex1 = "From: help@company.com\nSubject: Unable to Login\nHi, I can't access my dashboard. Can you help?"
-    ex2 = "From: sales@prospect.com\nSubject: Inquiry about pricing\nHi, Can you send over your latest pricing for enterprise?"
-    ex3 = "From: accounts@supplier.com\nSubject: Invoice #2024-00123 Due Date Reminder\nDear Valued Client, This is a reminder invoice #2024-00123 for $1,500.00 is due..."
-    ex4 = "From: it@company.com\nSubject: Server Down Alert\nURGENT: Database server unreachable since 3AM. Needs escalation."
-    ex5 = "From: spammer@promo.com\nSubject: BIG SALE!!!\nDon't miss our special offers!"
-    support_button.click(lambda: ex1, None, email_box)
-    sales_button.click(lambda: ex2, None, email_box)
-    finance_button.click(lambda: ex3, None, email_box)
-    urgent_button.click(lambda: ex4, None, email_box)
-    spam_button.click(lambda: ex5, None, email_box)
+        gr.Markdown("""<div class='card-header' style="margin-bottom:20px;">🕒 Classification History</div>""")
+        history_cardbox = gr.HTML(elem_id="history-cardbox")
+    
+    exs = [
+      "From: support@mycrm.com\nSubject: Cannot login to dashboard\nBody: I've been unable to sign into my account for 3 days even after password reset.",
+      "From: prospect@b2bsales.com\nSubject: Inquiry about pricing\nHi, Can you send over your enterprise pricing and product details for Q1?",
+      "From: accounts@acmecorp.com\nSubject: Invoice #00456 Payment Reminder\nBody: This is a reminder that your invoice #00456 for $4,200.00 is due next week.",
+      "From: jane.doe@company.org\nSubject: Meeting request\nCould you schedule a call with the marketing team for Friday 3pm?",
+      "From: admin@infra.com\nSubject: URGENT Server Down\nThe production DB went down at 11:22 UTC, please escalate to engineering immediately.",
+      "From: legal@mycrm.com\nSubject: Contract question\nCan your team confirm paragraph 7.4 in the service agreement?",
+      "From: billing@b2bsales.com\nSubject: Account update\nPlease update billing address for account #AC10239.",
+      "From: teamlead@company.org\nSubject: Follow-up on project\nHi, just wanted a final status update on our July roadmap deliverables.",
+    ]
+    for idx, ex in enumerate(exs):
+        demo.children[0].children[0].children[1].children[idx].click(lambda ex=ex: ex, None, email_box)
 
     def classify_and_render(email_text):
         result = email_classifier_router(email_text)
@@ -193,26 +156,27 @@ with gr.Blocks(css=css) as demo:
         acts = "\n".join(acts) if isinstance(acts, list) else acts
         add_to_history(email_text, cat, pri, summ)
         badge = f"<b>Category:</b> <span class='badge'>{cat}</span> <b>Priority:</b> <span class='badge priority-{pri.lower()}'>{pri}</span>"
-        display = [
-            f"**{h['datetime']}**\n"
-            f"**Category:** <span class='badge'>{h['category']}</span>  \n"
-            f"**Priority:** <span class='badge priority-{h['priority'].lower()}'>{h['priority']}</span>  \n"
-            f"<span class='small'>{h['summary']}</span>"
-            for h in classification_history
-        ]
-        return badge, rec, dra, summ, acts, gr.update(choices=display, value=len(display)-1)
-
-    def load_history(idx):
-        if idx is not None and 0 <= idx < len(classification_history):
-            return classification_history[idx]["email"]
-        return ""
+        # Native HTML styled history cards
+        history_html = ""
+        for idx, h in enumerate(classification_history[::-1]):
+            history_html += f"""
+            <div class='history-record'>
+                <div class='history-ts'>{h['datetime']}</div>
+                <div class='history-catlab'>Category: <span class='badge'>{h['category']}</span> Priority: <span class='badge priority-{h['priority'].lower()}'>{h['priority']}</span></div>
+                <div class='history-summ'>{h['summary']}</div>
+                <div class='history-btnrow'>
+                    <button class='btn-md' onclick="navigator.clipboard.writeText({json.dumps(h['email'])});">Copy Email</button>
+                    <button class='btn-md' onclick="window.parent.postMessage({json.dumps(h['email'])}, '*');">Load</button>
+                </div>
+            </div>
+            """
+        return badge, rec, dra, summ, acts, history_html
 
     classify_btn.click(
         classify_and_render,
         inputs=[email_box],
-        outputs=[result_labels, recipient, draft_response, summary, action_items, history_radio]
+        outputs=[result_labels, recipient, draft_response, summary, action_items, history_cardbox]
     )
-    load_btn.click(load_history, inputs=[history_radio], outputs=email_box)
 
 if __name__ == "__main__":
     demo.launch()