From 89ee3f8067c01df693f3b9a758b8e94c37935c07 Mon Sep 17 00:00:00 2001
From: Ashwin Kumar Sivakumar <ashwin@traceworks.in>
Date: Mon, 15 Jun 2026 17:04:02 +0530
Subject: [PATCH] fix(ai): polish ask ash chat widget

---
 src/components/AiChatWidget.tsx | 43 ++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/AiChatWidget.tsx b/src/components/AiChatWidget.tsx
index b3ad0a4..5aacfc7 100644
--- a/src/components/AiChatWidget.tsx
+++ b/src/components/AiChatWidget.tsx
@@ -7,6 +7,8 @@ interface ChatMessage {
   role: "user" | "assistant";
   content: string;
   intent?: string;
+  status?: string;
+  suggestedAction?: string;
 }
 
 interface ChatResponse {
@@ -18,6 +20,21 @@ interface ChatResponse {
   remaining_daily_actions?: number;
   credits_charged?: number;
   message?: string;
+  status?: string;
+  suggested_action?: string;
+}
+
+function statusLabel(status?: string): string | null {
+  switch (status) {
+    case "ticket_created":
+      return "Support ticket created";
+    case "kb_results":
+      return "Help articles found";
+    case "usage_summary":
+      return "AI usage summary";
+    default:
+      return null;
+  }
 }
 
 interface UsageStatus {
@@ -124,6 +141,8 @@ export function AiChatWidget() {
         role: "assistant",
         content: data.message || data.reply,
         intent: data.intent,
+        status: data.status,
+        suggestedAction: data.suggested_action,
       };
       setMessages((prev) => [...prev, assistantMessage]);
     } catch (err) {
@@ -326,17 +345,19 @@ export function AiChatWidget() {
                     }}
                   >
                     <p style={{ margin: 0, "white-space": "pre-wrap" }}>{msg.content}</p>
-                    <Show when={msg.intent && msg.role === "assistant"}>
-                      <p
-                        style={{
-                          margin: "4px 0 0",
-                          "font-size": "10px",
-                          color: "#9CA3AF",
-                          "font-style": "italic",
-                        }}
-                      >
-                        Intent: {msg.intent}
-                      </p>
+                    <Show when={msg.role === "assistant" && statusLabel(msg.status)}>
+                      {(label) => (
+                        <p
+                          style={{
+                            margin: "6px 0 0",
+                            "font-size": "10px",
+                            color: "#6B7280",
+                            "font-weight": "600",
+                          }}
+                        >
+                          {label()}
+                        </p>
+                      )}
                     </Show>
                   </div>
                 </div>