@exotel-npm-dev/exotel-ai-assist 1.2.3 → 1.2.4

package/dist/components/key-components/SuggestionTab.d.ts

@@ -1,7 +1,8 @@
 import { Suggestion, BotConfig } from "../../types";
 import "../../styles/index.css";
-export declare function SuggestionsTab({ suggestions, connected, botConfig, }: {
+export declare function SuggestionsTab({ suggestions, connected, botConfig, sendSuggestionFeedback, }: {
     suggestions: Suggestion[];
     connected: boolean;
     botConfig: BotConfig | null;
+    sendSuggestionFeedback: (sequence: number, feedbackType: "good" | "bad" | null, badFeedbackReason?: string | null) => boolean;
 }): JSX.Element;

package/dist/controller/index.d.ts

@@ -19,6 +19,7 @@ export declare class ExotelAIAssistController extends EventEmitter<ControllerEve
     destroy(): void;
     getStatus(): ConnectionStatus;
     getStreamState(): StreamState | null;
+    sendSuggestionFeedback(sequence: number, feedbackType: "good" | "bad" | null, badFeedbackReason?: string | null): boolean;
     private _ensureTransport;
     private _handleTransportMessage;
     private _scheduleReconnect;

package/dist/controller/index.js

@@ -1667,6 +1667,25 @@ class ExotelAIAssistController extends EventEmitter {
   getStreamState() {
     return this._streamState;
   }
+  sendSuggestionFeedback(sequence, feedbackType, badFeedbackReason = null) {
+    if (!this.transport || this.status !== "connected") {
+      console.warn("[ExotelAIAssist] Cannot send feedback: not connected");
+      return false;
+    }
+    const message = {
+      type: "suggestion_feedback",
+      sequence,
+      feedback_type: feedbackType,
+      bad_feedback_reason: badFeedbackReason
+    };
+    try {
+      this.transport.send(JSON.stringify(message));
+      return true;
+    } catch (error) {
+      console.error("[ExotelAIAssist] Failed to send feedback:", error);
+      return false;
+    }
+  }
   _ensureTransport() {
     if (this.transport) return;
     this.transport = createTransport(Utils.hash(this.params));
@@ -1789,17 +1808,27 @@ class ExotelAIAssistController extends EventEmitter {
         });
         this.emit("transcript", lines);
       }
-      if (event.event_type === "suggestion" && event.value) {
-        const suggestion = {
-          id: Utils.getUniqueId(),
-          value: event.value,
-          timestamp: now
-        };
-        this.emit("suggestion", suggestion);
+      if (event.event_type === "suggestion") {
+        const val = event.value;
+        const text = typeof val === "object" && val !== null && "text" in val ? val.text : typeof val === "string" ? val : event.text;
+        const sequence = typeof val === "object" && val !== null && "sequence" in val ? val.sequence : 0;
+        if (text) {
+          const suggestion = {
+            id: Utils.getUniqueId(),
+            text,
+            value: text,
+            timestamp: now,
+            sequence,
+            feedbackType: null,
+            badFeedbackReason: null
+          };
+          this.emit("suggestion", suggestion);
+        }
       }
       if (event.event_type === "sentiment" && event.value) {
+        const sentimentValue = typeof event.value === "string" ? event.value : event.value.text;
         const sentiment = {
-          label: event.value.toLowerCase(),
+          label: sentimentValue.toLowerCase(),
           timestamp: now
         };
         this.emit("sentiment", sentiment);

package/dist/hooks/useExotelAIAssist.d.ts

@@ -25,6 +25,7 @@ export interface UseExotelAIAssistReturn {
     connect: () => void;
     disconnect: () => void;
     setParams: (patch: Partial<ExotelAIAssistParams>) => void;
+    sendSuggestionFeedback: (sequence: number, feedbackType: "good" | "bad" | null, badFeedbackReason?: string | null) => boolean;
 }
 /** Internal extended return — adds botConfig for the UI component only. */
 export interface UseExotelAIAssistInternalReturn extends UseExotelAIAssistReturn {

package/dist/index.js

@@ -19294,6 +19294,30 @@ const Smile = createLucideIcon$1("Smile", [["circle", {
   key: "1p4y9e"
 }]]);
 
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+const ThumbsDown = createLucideIcon$1("ThumbsDown", [["path", {
+  d: "M17 14V2",
+  key: "8ymqnk"
+}], ["path", {
+  d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z",
+  key: "s6e0r"
+}]]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+const ThumbsUp = createLucideIcon$1("ThumbsUp", [["path", {
+  d: "M7 10v12",
+  key: "1qc93n"
+}], ["path", {
+  d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z",
+  key: "y3tblf"
+}]]);
+
 const MAX_VISIBLE_TOASTS = 5;
 const AUTO_DISMISS_MS = 3000;
 const ToastContext = reactExports.createContext(null);
@@ -21085,6 +21109,25 @@ class ExotelAIAssistController extends EventEmitter {
   getStreamState() {
     return this._streamState;
   }
+  sendSuggestionFeedback(sequence, feedbackType, badFeedbackReason = null) {
+    if (!this.transport || this.status !== "connected") {
+      console.warn("[ExotelAIAssist] Cannot send feedback: not connected");
+      return false;
+    }
+    const message = {
+      type: "suggestion_feedback",
+      sequence,
+      feedback_type: feedbackType,
+      bad_feedback_reason: badFeedbackReason
+    };
+    try {
+      this.transport.send(JSON.stringify(message));
+      return true;
+    } catch (error) {
+      console.error("[ExotelAIAssist] Failed to send feedback:", error);
+      return false;
+    }
+  }
   _ensureTransport() {
     if (this.transport) return;
     this.transport = createTransport(Utils.hash(this.params));
@@ -21207,17 +21250,27 @@ class ExotelAIAssistController extends EventEmitter {
         });
         this.emit("transcript", lines);
       }
-      if (event.event_type === "suggestion" && event.value) {
-        const suggestion = {
-          id: Utils.getUniqueId(),
-          value: event.value,
-          timestamp: now
-        };
-        this.emit("suggestion", suggestion);
+      if (event.event_type === "suggestion") {
+        const val = event.value;
+        const text = typeof val === "object" && val !== null && "text" in val ? val.text : typeof val === "string" ? val : event.text;
+        const sequence = typeof val === "object" && val !== null && "sequence" in val ? val.sequence : 0;
+        if (text) {
+          const suggestion = {
+            id: Utils.getUniqueId(),
+            text,
+            value: text,
+            timestamp: now,
+            sequence,
+            feedbackType: null,
+            badFeedbackReason: null
+          };
+          this.emit("suggestion", suggestion);
+        }
       }
       if (event.event_type === "sentiment" && event.value) {
+        const sentimentValue = typeof event.value === "string" ? event.value : event.value.text;
         const sentiment = {
-          label: event.value.toLowerCase(),
+          label: sentimentValue.toLowerCase(),
           timestamp: now
         };
         this.emit("sentiment", sentiment);
@@ -21293,9 +21346,20 @@ function useExotelAIAssist(params) {
     var _a;
     return (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.setParams(patch);
   }, []);
+  const sendSuggestionFeedback = reactExports.useCallback((sequence, feedbackType, badFeedbackReason = null) => {
+    var _a, _b;
+    const sent = (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.sendSuggestionFeedback(sequence, feedbackType, badFeedbackReason)) !== null && _b !== void 0 ? _b : false;
+    if (sent) {
+      setSuggestions(prev => prev.map(s => s.sequence === sequence ? Object.assign(Object.assign({}, s), {
+        feedbackType,
+        badFeedbackReason
+      }) : s));
+    }
+    return sent;
+  }, []);
   return {
-    isReady,
     streamState,
+    isReady,
     suggestions,
     transcripts,
     sentiment,
@@ -21303,7 +21367,8 @@ function useExotelAIAssist(params) {
     lastError,
     connect,
     disconnect,
-    setParams
+    setParams,
+    sendSuggestionFeedback
   };
 }
 
@@ -21332,7 +21397,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".oa-panel{background:#fff;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}.oa-panel,.oa-theme-root{display:flex;flex-direction:column;height:100%;min-height:0;width:100%}.oa-theme-root{position:relative}.oa-header-title{color:#111827;font-size:16px;font-weight:600;line-height:20px;margin:0}.oa-tabs{width:100%}.oa-tabs-content{flex:1;min-height:0;overflow:hidden}.oa-tabs-content[data-state=inactive]{display:none!important}.oa-tabs-content[data-state=active]{display:flex;flex-direction:column}.oa-tabs-list{border-bottom:1px solid #e5e7eb;display:flex;gap:20px;padding:0}.oa-tabs-trigger{align-items:center;background:transparent;border:none;border-radius:0;color:#6b7280;cursor:pointer;display:inline-flex;font-size:15px;font-weight:500;gap:6px;outline:none;padding:10px 0;position:relative}.oa-tabs-trigger:hover{color:#374151}.oa-tabs-trigger[data-state=active]{color:#2563eb}.oa-tabs-trigger[data-state=active]:after{background:#2563eb;border-radius:2px;bottom:-1px;content:\"\";height:2px;left:0;position:absolute;right:0}.oa-suggestion-card{border:1px solid rgba(17,24,39,.04);border-radius:12px;padding:12px;text-align:left}.oa-suggestion-card--recent-wrapper{animation:oa-suggestion-enter .4s ease-out,oa-border-shimmer 3s ease-in-out .4s infinite;background:linear-gradient(90deg,#7c3aed,#e11d48,#7c3aed);background-size:200% 100%;border-radius:12px;padding:2px;text-align:left}.oa-suggestion-card--recent-wrapper .oa-suggestion-card--recent{border:none}.oa-suggestion-card--recent{animation:none;background:linear-gradient(90deg,#f5f3ff 0,#fef3f2 50%,#fff7ed);border-radius:9px}.oa-suggestion-card--older{background:#f5f5f5;border:1px solid #e5e7eb}.oa-suggestion-card--older .oa-suggestion-text{color:#252525}@keyframes oa-suggestion-enter{0%{opacity:.3;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes oa-border-shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.oa-suggestion-text{color:#111827;font-size:13px;line-height:18px;white-space:pre-wrap}.oa-copy-icon{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;cursor:pointer;display:inline-flex;height:32px;justify-content:center;min-height:32px;min-width:32px;padding:0;width:32px}.oa-copy-icon:hover{background:#f9fafb;color:#374151}@keyframes oa-toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.oa-stream-overlay{display:flex;flex:1;flex-direction:column;min-height:0}.oa-stream-banner{align-items:flex-start;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;color:#92400e;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-stream-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-stream-banner-text{flex:1}.oa-stream-empty{flex:1;gap:16px;justify-content:center;min-height:0}.oa-stream-empty,.oa-stream-empty-text{align-items:center;display:flex;flex-direction:column}.oa-stream-empty-text{gap:6px;text-align:center}.oa-stream-empty-title{color:#111827;font-size:16px;font-weight:700;line-height:20px}.oa-stream-empty-subtitle{color:#6b7280;font-size:14px;line-height:20px}.oa-throttle-banner{align-items:flex-start;background:#fcefee;border:1px solid #e8cecb;border-radius:8px;color:#833d09;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-throttle-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-throttle-banner-text{flex:1}.oa-starting-loader{align-items:center;display:flex;flex:1;flex-direction:column;gap:16px;height:100%;justify-content:center;min-height:0}.oa-starting-spinner{animation:oa-spinner-rotate 1.4s linear infinite;height:48px;width:48px}.oa-starting-spinner-track{stroke:#e5e7eb}.oa-starting-spinner-arc{stroke:#2563eb;stroke-dasharray:80,126;stroke-dashoffset:0;animation:oa-spinner-dash 1.4s ease-in-out infinite}@keyframes oa-spinner-rotate{to{transform:rotate(1turn)}}@keyframes oa-spinner-dash{0%{stroke-dasharray:1,126;stroke-dashoffset:0}50%{stroke-dasharray:80,126;stroke-dashoffset:-35}to{stroke-dasharray:80,126;stroke-dashoffset:-124}}.oa-starting-loader-text{color:#111827;font-size:16px;font-weight:600;line-height:20px}.oa-muted{color:#6b7280}";
+var css_248z = ".oa-panel{background:#fff;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}.oa-panel,.oa-theme-root{display:flex;flex-direction:column;height:100%;min-height:0;width:100%}.oa-theme-root{position:relative}.oa-header-title{color:#111827;font-size:16px;font-weight:600;line-height:20px;margin:0}.oa-tabs{width:100%}.oa-tabs-content{flex:1;min-height:0;overflow:hidden}.oa-tabs-content[data-state=inactive]{display:none!important}.oa-tabs-content[data-state=active]{display:flex;flex-direction:column}.oa-tabs-list{border-bottom:1px solid #e5e7eb;display:flex;gap:20px;padding:0}.oa-tabs-trigger{align-items:center;background:transparent;border:none;border-radius:0;color:#6b7280;cursor:pointer;display:inline-flex;font-size:15px;font-weight:500;gap:6px;outline:none;padding:10px 0;position:relative}.oa-tabs-trigger:hover{color:#374151}.oa-tabs-trigger[data-state=active]{color:#2563eb}.oa-tabs-trigger[data-state=active]:after{background:#2563eb;border-radius:2px;bottom:-1px;content:\"\";height:2px;left:0;position:absolute;right:0}.oa-suggestion-card{border:1px solid rgba(17,24,39,.04);border-radius:12px;padding:12px;text-align:left}.oa-suggestion-card--recent-wrapper{animation:oa-suggestion-enter .4s ease-out,oa-border-shimmer 3s ease-in-out .4s infinite;background:linear-gradient(90deg,#7c3aed,#e11d48,#7c3aed);background-size:200% 100%;border-radius:12px;padding:2px;text-align:left}.oa-suggestion-card--recent-wrapper .oa-suggestion-card--recent{border:none}.oa-suggestion-card--recent{animation:none;background:linear-gradient(90deg,#f5f3ff 0,#fef3f2 50%,#fff7ed);border-radius:9px}.oa-suggestion-card--older{background:#f5f5f5;border:1px solid #e5e7eb}.oa-suggestion-card--older .oa-suggestion-text{color:#252525}@keyframes oa-suggestion-enter{0%{opacity:.3;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes oa-border-shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.oa-suggestion-text{color:#111827;font-size:13px;line-height:18px;white-space:pre-wrap}.oa-copy-icon,.oa-feedback-icon{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;cursor:pointer;display:inline-flex;height:32px;justify-content:center;min-height:32px;min-width:32px;padding:0;width:32px}.oa-copy-icon:hover,.oa-feedback-icon:hover{background:#f9fafb;color:#374151}.oa-feedback-icon--positive{background:#dcfce7!important;border-color:#86efac!important;color:#16a34a!important}.oa-feedback-icon--negative{background:#fee2e2!important;border-color:#fca5a5!important;color:#dc2626!important}.oa-feedback-icon:disabled{cursor:default;opacity:.5}.oa-feedback-icon--negative:disabled,.oa-feedback-icon--positive:disabled{opacity:1}.oa-feedback-reason-btn{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:16px;color:#991b1b;cursor:pointer;display:inline-flex;font-family:inherit;font-size:12px;font-weight:500;line-height:18px;padding:4px 12px;transition:background .15s,border-color .15s}.oa-feedback-reason-btn:hover:not(:disabled){background:#fee2e2;border-color:#f87171}.oa-feedback-reason-btn--selected{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}.oa-feedback-reason-btn:disabled{cursor:default;opacity:.45}@keyframes oa-toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.oa-stream-overlay{display:flex;flex:1;flex-direction:column;min-height:0}.oa-stream-banner{align-items:flex-start;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;color:#92400e;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-stream-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-stream-banner-text{flex:1}.oa-stream-empty{flex:1;gap:16px;justify-content:center;min-height:0}.oa-stream-empty,.oa-stream-empty-text{align-items:center;display:flex;flex-direction:column}.oa-stream-empty-text{gap:6px;text-align:center}.oa-stream-empty-title{color:#111827;font-size:16px;font-weight:700;line-height:20px}.oa-stream-empty-subtitle{color:#6b7280;font-size:14px;line-height:20px}.oa-throttle-banner{align-items:flex-start;background:#fcefee;border:1px solid #e8cecb;border-radius:8px;color:#833d09;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-throttle-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-throttle-banner-text{flex:1}.oa-starting-loader{align-items:center;display:flex;flex:1;flex-direction:column;gap:16px;height:100%;justify-content:center;min-height:0}.oa-starting-spinner{animation:oa-spinner-rotate 1.4s linear infinite;height:48px;width:48px}.oa-starting-spinner-track{stroke:#e5e7eb}.oa-starting-spinner-arc{stroke:#2563eb;stroke-dasharray:80,126;stroke-dashoffset:0;animation:oa-spinner-dash 1.4s ease-in-out infinite}@keyframes oa-spinner-rotate{to{transform:rotate(1turn)}}@keyframes oa-spinner-dash{0%{stroke-dasharray:1,126;stroke-dashoffset:0}50%{stroke-dasharray:80,126;stroke-dashoffset:-35}to{stroke-dasharray:80,126;stroke-dashoffset:-124}}.oa-starting-loader-text{color:#111827;font-size:16px;font-weight:600;line-height:20px}.oa-muted{color:#6b7280}";
 styleInject(css_248z);
 
 function Sparkle() {
@@ -21680,9 +21745,17 @@ const EmptyState = ({
 function SuggestionsTab({
   suggestions,
   connected,
-  botConfig
+  botConfig,
+  sendSuggestionFeedback
 }) {
+  var _a, _b, _c;
   const toast = useToast();
+  const [expandedSequence, setExpandedSequence] = reactExports.useState(null);
+  const feedbackEnabled = ((_a = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _a === void 0 ? void 0 : _a.feedback_enabled) === true;
+  const badFeedbackOptions = reactExports.useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _a === void 0 ? void 0 : _a.bad_feedback_options) !== null && _b !== void 0 ? _b : [];
+  }, [(_b = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _b === void 0 ? void 0 : _b.bad_feedback_options]);
   const handleCopy = async text => {
     try {
       await navigator.clipboard.writeText(text);
@@ -21691,13 +21764,36 @@ function SuggestionsTab({
       toast.error("Failed to copy");
     }
   };
+  const handleThumbsUp = reactExports.useCallback((sequence, currentFeedback) => {
+    if (!feedbackEnabled) return;
+    const newType = currentFeedback === "good" ? null : "good";
+    sendSuggestionFeedback(sequence, newType, null);
+    setExpandedSequence(null);
+  }, [sendSuggestionFeedback, feedbackEnabled]);
+  const handleThumbsDown = reactExports.useCallback((sequence, currentFeedback) => {
+    if (!feedbackEnabled) return;
+    if (currentFeedback === "bad") {
+      sendSuggestionFeedback(sequence, null, null);
+      setExpandedSequence(null);
+      return;
+    }
+    sendSuggestionFeedback(sequence, "bad", null);
+    if (badFeedbackOptions.length > 0) {
+      setExpandedSequence(sequence);
+    }
+  }, [sendSuggestionFeedback, badFeedbackOptions, feedbackEnabled]);
+  const handleBadFeedbackReason = reactExports.useCallback((sequence, reason) => {
+    if (!feedbackEnabled) return;
+    sendSuggestionFeedback(sequence, "bad", reason);
+    setExpandedSequence(null);
+  }, [sendSuggestionFeedback, feedbackEnabled]);
   if (!connected) {
     return jsxRuntimeExports.jsx(EmptyState, {
       title: "Assistant is inactive",
       subtitle: "Start a call to receive real-time suggestions."
     });
   }
-  if ((botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestions) === false) {
+  if (((_c = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _c === void 0 ? void 0 : _c.enabled) === false) {
     return jsxRuntimeExports.jsx(EmptyState, {
       title: "Suggestions are disabled",
       subtitle: "Suggestions are disabled in the bot configuration. Please contact the administrator to enable it."
@@ -21731,21 +21827,37 @@ function SuggestionsTab({
     children: displayed.map((suggestion, index) => {
       const isRecent = index === 0;
       const cardClass = isRecent ? "oa-suggestion-card oa-suggestion-card--recent" : "oa-suggestion-card oa-suggestion-card--older";
+      const showReasons = suggestion.feedbackType === "bad" || expandedSequence === suggestion.sequence;
       return jsxRuntimeExports.jsxs("div", {
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "flex-start",
-          gap: "8px"
-        },
-        children: [isRecent ? jsxRuntimeExports.jsx("div", {
-          className: "oa-suggestion-card--recent-wrapper",
+        children: [jsxRuntimeExports.jsxs("div", {
           style: {
-            flex: "1 1 auto",
-            maxWidth: "80%"
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: "8px"
           },
-          children: jsxRuntimeExports.jsx("div", {
+          children: [isRecent ? jsxRuntimeExports.jsx("div", {
+            className: "oa-suggestion-card--recent-wrapper",
+            style: {
+              flex: "1 1 auto",
+              maxWidth: "72%"
+            },
+            children: jsxRuntimeExports.jsx("div", {
+              className: cardClass,
+              children: jsxRuntimeExports.jsx("span", {
+                className: "oa-suggestion-text",
+                style: {
+                  fontSize: "15px"
+                },
+                children: suggestion.text
+              })
+            })
+          }) : jsxRuntimeExports.jsx("div", {
             className: cardClass,
+            style: {
+              flex: "1 1 auto",
+              maxWidth: "72%"
+            },
             children: jsxRuntimeExports.jsx("span", {
               className: "oa-suggestion-text",
               style: {
@@ -21753,31 +21865,57 @@ function SuggestionsTab({
               },
               children: suggestion.value
             })
-          })
-        }) : jsxRuntimeExports.jsx("div", {
-          className: cardClass,
-          style: {
-            flex: "1 1 auto",
-            maxWidth: "80%"
-          },
-          children: jsxRuntimeExports.jsx("span", {
-            className: "oa-suggestion-text",
+          }), jsxRuntimeExports.jsxs("div", {
             style: {
-              fontSize: "15px"
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+              flexShrink: 0,
+              marginTop: "10px"
             },
-            children: suggestion.value
-          })
-        }), jsxRuntimeExports.jsx("button", {
-          className: "oa-copy-icon",
-          "aria-label": "Copy suggestion",
-          onClick: () => handleCopy(suggestion.value),
+            children: [jsxRuntimeExports.jsx("button", {
+              className: "oa-copy-icon",
+              "aria-label": "Copy suggestion",
+              onClick: () => handleCopy(suggestion.text),
+              children: jsxRuntimeExports.jsx(Copy, {
+                size: 14
+              })
+            }), feedbackEnabled && jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+              children: [jsxRuntimeExports.jsx("button", {
+                className: `oa-feedback-icon ${suggestion.feedbackType === "good" ? "oa-feedback-icon--positive" : ""}`,
+                "aria-label": "Mark as helpful",
+                onClick: () => handleThumbsUp(suggestion.sequence, suggestion.feedbackType),
+                style: {
+                  color: suggestion.feedbackType === "good" ? "#16a34a" : undefined
+                },
+                children: jsxRuntimeExports.jsx(ThumbsUp, {
+                  size: 14
+                })
+              }), jsxRuntimeExports.jsx("button", {
+                className: `oa-feedback-icon ${suggestion.feedbackType === "bad" ? "oa-feedback-icon--negative" : ""}`,
+                "aria-label": "Mark as not helpful",
+                onClick: () => handleThumbsDown(suggestion.sequence, suggestion.feedbackType),
+                style: {
+                  color: suggestion.feedbackType === "bad" ? "#dc2626" : undefined
+                },
+                children: jsxRuntimeExports.jsx(ThumbsDown, {
+                  size: 14
+                })
+              })]
+            })]
+          })]
+        }), showReasons && badFeedbackOptions.length > 0 && jsxRuntimeExports.jsx("div", {
           style: {
-            flexShrink: 0,
-            marginTop: "10px"
+            display: "flex",
+            gap: "8px",
+            flexWrap: "wrap",
+            marginTop: "8px"
           },
-          children: jsxRuntimeExports.jsx(Copy, {
-            size: 14
-          })
+          children: badFeedbackOptions.map(reason => jsxRuntimeExports.jsx("button", {
+            className: `oa-feedback-reason-btn ${suggestion.badFeedbackReason === reason ? "oa-feedback-reason-btn--selected" : ""}`,
+            onClick: () => handleBadFeedbackReason(suggestion.sequence, reason),
+            children: reason
+          }, reason))
         })]
       }, suggestion.id);
     })
@@ -21876,12 +22014,13 @@ function ExotelAIAssist(_a) {
     } = _a,
     params = __rest(_a, ["className", "onReady"]);
   const {
-    isReady,
     streamState,
+    isReady,
     suggestions,
     transcripts,
     sentiment,
-    botConfig
+    botConfig,
+    sendSuggestionFeedback
   } = useExotelAIAssist(params);
   const onReadyRef = reactExports.useRef(onReady);
   onReadyRef.current = onReady;
@@ -21959,7 +22098,8 @@ function ExotelAIAssist(_a) {
                 children: jsxRuntimeExports.jsx(SuggestionsTab, {
                   suggestions: suggestions,
                   connected: connected,
-                  botConfig: botConfig
+                  botConfig: botConfig,
+                  sendSuggestionFeedback: sendSuggestionFeedback
                 })
               }), jsxRuntimeExports.jsx(Content$1, {
                 value: "transcript",

package/dist/react/index.js

@@ -4576,6 +4576,30 @@ const Smile = createLucideIcon$1("Smile", [["circle", {
   key: "1p4y9e"
 }]]);
 
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+const ThumbsDown = createLucideIcon$1("ThumbsDown", [["path", {
+  d: "M17 14V2",
+  key: "8ymqnk"
+}], ["path", {
+  d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z",
+  key: "s6e0r"
+}]]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+const ThumbsUp = createLucideIcon$1("ThumbsUp", [["path", {
+  d: "M7 10v12",
+  key: "1qc93n"
+}], ["path", {
+  d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z",
+  key: "y3tblf"
+}]]);
+
 const MAX_VISIBLE_TOASTS = 5;
 const AUTO_DISMISS_MS = 3000;
 const ToastContext = React.createContext(null);
@@ -6371,6 +6395,25 @@ class ExotelAIAssistController extends EventEmitter {
   getStreamState() {
     return this._streamState;
   }
+  sendSuggestionFeedback(sequence, feedbackType, badFeedbackReason = null) {
+    if (!this.transport || this.status !== "connected") {
+      console.warn("[ExotelAIAssist] Cannot send feedback: not connected");
+      return false;
+    }
+    const message = {
+      type: "suggestion_feedback",
+      sequence,
+      feedback_type: feedbackType,
+      bad_feedback_reason: badFeedbackReason
+    };
+    try {
+      this.transport.send(JSON.stringify(message));
+      return true;
+    } catch (error) {
+      console.error("[ExotelAIAssist] Failed to send feedback:", error);
+      return false;
+    }
+  }
   _ensureTransport() {
     if (this.transport) return;
     this.transport = createTransport(Utils.hash(this.params));
@@ -6493,17 +6536,27 @@ class ExotelAIAssistController extends EventEmitter {
         });
         this.emit("transcript", lines);
       }
-      if (event.event_type === "suggestion" && event.value) {
-        const suggestion = {
-          id: Utils.getUniqueId(),
-          value: event.value,
-          timestamp: now
-        };
-        this.emit("suggestion", suggestion);
+      if (event.event_type === "suggestion") {
+        const val = event.value;
+        const text = typeof val === "object" && val !== null && "text" in val ? val.text : typeof val === "string" ? val : event.text;
+        const sequence = typeof val === "object" && val !== null && "sequence" in val ? val.sequence : 0;
+        if (text) {
+          const suggestion = {
+            id: Utils.getUniqueId(),
+            text,
+            value: text,
+            timestamp: now,
+            sequence,
+            feedbackType: null,
+            badFeedbackReason: null
+          };
+          this.emit("suggestion", suggestion);
+        }
       }
       if (event.event_type === "sentiment" && event.value) {
+        const sentimentValue = typeof event.value === "string" ? event.value : event.value.text;
         const sentiment = {
-          label: event.value.toLowerCase(),
+          label: sentimentValue.toLowerCase(),
           timestamp: now
         };
         this.emit("sentiment", sentiment);
@@ -6579,9 +6632,20 @@ function useExotelAIAssist(params) {
     var _a;
     return (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.setParams(patch);
   }, []);
+  const sendSuggestionFeedback = React.useCallback((sequence, feedbackType, badFeedbackReason = null) => {
+    var _a, _b;
+    const sent = (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.sendSuggestionFeedback(sequence, feedbackType, badFeedbackReason)) !== null && _b !== void 0 ? _b : false;
+    if (sent) {
+      setSuggestions(prev => prev.map(s => s.sequence === sequence ? Object.assign(Object.assign({}, s), {
+        feedbackType,
+        badFeedbackReason
+      }) : s));
+    }
+    return sent;
+  }, []);
   return {
-    isReady,
     streamState,
+    isReady,
     suggestions,
     transcripts,
     sentiment,
@@ -6589,7 +6653,8 @@ function useExotelAIAssist(params) {
     lastError,
     connect,
     disconnect,
-    setParams
+    setParams,
+    sendSuggestionFeedback
   };
 }
 
@@ -6618,7 +6683,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".oa-panel{background:#fff;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}.oa-panel,.oa-theme-root{display:flex;flex-direction:column;height:100%;min-height:0;width:100%}.oa-theme-root{position:relative}.oa-header-title{color:#111827;font-size:16px;font-weight:600;line-height:20px;margin:0}.oa-tabs{width:100%}.oa-tabs-content{flex:1;min-height:0;overflow:hidden}.oa-tabs-content[data-state=inactive]{display:none!important}.oa-tabs-content[data-state=active]{display:flex;flex-direction:column}.oa-tabs-list{border-bottom:1px solid #e5e7eb;display:flex;gap:20px;padding:0}.oa-tabs-trigger{align-items:center;background:transparent;border:none;border-radius:0;color:#6b7280;cursor:pointer;display:inline-flex;font-size:15px;font-weight:500;gap:6px;outline:none;padding:10px 0;position:relative}.oa-tabs-trigger:hover{color:#374151}.oa-tabs-trigger[data-state=active]{color:#2563eb}.oa-tabs-trigger[data-state=active]:after{background:#2563eb;border-radius:2px;bottom:-1px;content:\"\";height:2px;left:0;position:absolute;right:0}.oa-suggestion-card{border:1px solid rgba(17,24,39,.04);border-radius:12px;padding:12px;text-align:left}.oa-suggestion-card--recent-wrapper{animation:oa-suggestion-enter .4s ease-out,oa-border-shimmer 3s ease-in-out .4s infinite;background:linear-gradient(90deg,#7c3aed,#e11d48,#7c3aed);background-size:200% 100%;border-radius:12px;padding:2px;text-align:left}.oa-suggestion-card--recent-wrapper .oa-suggestion-card--recent{border:none}.oa-suggestion-card--recent{animation:none;background:linear-gradient(90deg,#f5f3ff 0,#fef3f2 50%,#fff7ed);border-radius:9px}.oa-suggestion-card--older{background:#f5f5f5;border:1px solid #e5e7eb}.oa-suggestion-card--older .oa-suggestion-text{color:#252525}@keyframes oa-suggestion-enter{0%{opacity:.3;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes oa-border-shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.oa-suggestion-text{color:#111827;font-size:13px;line-height:18px;white-space:pre-wrap}.oa-copy-icon{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;cursor:pointer;display:inline-flex;height:32px;justify-content:center;min-height:32px;min-width:32px;padding:0;width:32px}.oa-copy-icon:hover{background:#f9fafb;color:#374151}@keyframes oa-toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.oa-stream-overlay{display:flex;flex:1;flex-direction:column;min-height:0}.oa-stream-banner{align-items:flex-start;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;color:#92400e;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-stream-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-stream-banner-text{flex:1}.oa-stream-empty{flex:1;gap:16px;justify-content:center;min-height:0}.oa-stream-empty,.oa-stream-empty-text{align-items:center;display:flex;flex-direction:column}.oa-stream-empty-text{gap:6px;text-align:center}.oa-stream-empty-title{color:#111827;font-size:16px;font-weight:700;line-height:20px}.oa-stream-empty-subtitle{color:#6b7280;font-size:14px;line-height:20px}.oa-throttle-banner{align-items:flex-start;background:#fcefee;border:1px solid #e8cecb;border-radius:8px;color:#833d09;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-throttle-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-throttle-banner-text{flex:1}.oa-starting-loader{align-items:center;display:flex;flex:1;flex-direction:column;gap:16px;height:100%;justify-content:center;min-height:0}.oa-starting-spinner{animation:oa-spinner-rotate 1.4s linear infinite;height:48px;width:48px}.oa-starting-spinner-track{stroke:#e5e7eb}.oa-starting-spinner-arc{stroke:#2563eb;stroke-dasharray:80,126;stroke-dashoffset:0;animation:oa-spinner-dash 1.4s ease-in-out infinite}@keyframes oa-spinner-rotate{to{transform:rotate(1turn)}}@keyframes oa-spinner-dash{0%{stroke-dasharray:1,126;stroke-dashoffset:0}50%{stroke-dasharray:80,126;stroke-dashoffset:-35}to{stroke-dasharray:80,126;stroke-dashoffset:-124}}.oa-starting-loader-text{color:#111827;font-size:16px;font-weight:600;line-height:20px}.oa-muted{color:#6b7280}";
+var css_248z = ".oa-panel{background:#fff;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}.oa-panel,.oa-theme-root{display:flex;flex-direction:column;height:100%;min-height:0;width:100%}.oa-theme-root{position:relative}.oa-header-title{color:#111827;font-size:16px;font-weight:600;line-height:20px;margin:0}.oa-tabs{width:100%}.oa-tabs-content{flex:1;min-height:0;overflow:hidden}.oa-tabs-content[data-state=inactive]{display:none!important}.oa-tabs-content[data-state=active]{display:flex;flex-direction:column}.oa-tabs-list{border-bottom:1px solid #e5e7eb;display:flex;gap:20px;padding:0}.oa-tabs-trigger{align-items:center;background:transparent;border:none;border-radius:0;color:#6b7280;cursor:pointer;display:inline-flex;font-size:15px;font-weight:500;gap:6px;outline:none;padding:10px 0;position:relative}.oa-tabs-trigger:hover{color:#374151}.oa-tabs-trigger[data-state=active]{color:#2563eb}.oa-tabs-trigger[data-state=active]:after{background:#2563eb;border-radius:2px;bottom:-1px;content:\"\";height:2px;left:0;position:absolute;right:0}.oa-suggestion-card{border:1px solid rgba(17,24,39,.04);border-radius:12px;padding:12px;text-align:left}.oa-suggestion-card--recent-wrapper{animation:oa-suggestion-enter .4s ease-out,oa-border-shimmer 3s ease-in-out .4s infinite;background:linear-gradient(90deg,#7c3aed,#e11d48,#7c3aed);background-size:200% 100%;border-radius:12px;padding:2px;text-align:left}.oa-suggestion-card--recent-wrapper .oa-suggestion-card--recent{border:none}.oa-suggestion-card--recent{animation:none;background:linear-gradient(90deg,#f5f3ff 0,#fef3f2 50%,#fff7ed);border-radius:9px}.oa-suggestion-card--older{background:#f5f5f5;border:1px solid #e5e7eb}.oa-suggestion-card--older .oa-suggestion-text{color:#252525}@keyframes oa-suggestion-enter{0%{opacity:.3;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes oa-border-shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.oa-suggestion-text{color:#111827;font-size:13px;line-height:18px;white-space:pre-wrap}.oa-copy-icon,.oa-feedback-icon{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;cursor:pointer;display:inline-flex;height:32px;justify-content:center;min-height:32px;min-width:32px;padding:0;width:32px}.oa-copy-icon:hover,.oa-feedback-icon:hover{background:#f9fafb;color:#374151}.oa-feedback-icon--positive{background:#dcfce7!important;border-color:#86efac!important;color:#16a34a!important}.oa-feedback-icon--negative{background:#fee2e2!important;border-color:#fca5a5!important;color:#dc2626!important}.oa-feedback-icon:disabled{cursor:default;opacity:.5}.oa-feedback-icon--negative:disabled,.oa-feedback-icon--positive:disabled{opacity:1}.oa-feedback-reason-btn{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:16px;color:#991b1b;cursor:pointer;display:inline-flex;font-family:inherit;font-size:12px;font-weight:500;line-height:18px;padding:4px 12px;transition:background .15s,border-color .15s}.oa-feedback-reason-btn:hover:not(:disabled){background:#fee2e2;border-color:#f87171}.oa-feedback-reason-btn--selected{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}.oa-feedback-reason-btn:disabled{cursor:default;opacity:.45}@keyframes oa-toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.oa-stream-overlay{display:flex;flex:1;flex-direction:column;min-height:0}.oa-stream-banner{align-items:flex-start;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;color:#92400e;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-stream-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-stream-banner-text{flex:1}.oa-stream-empty{flex:1;gap:16px;justify-content:center;min-height:0}.oa-stream-empty,.oa-stream-empty-text{align-items:center;display:flex;flex-direction:column}.oa-stream-empty-text{gap:6px;text-align:center}.oa-stream-empty-title{color:#111827;font-size:16px;font-weight:700;line-height:20px}.oa-stream-empty-subtitle{color:#6b7280;font-size:14px;line-height:20px}.oa-throttle-banner{align-items:flex-start;background:#fcefee;border:1px solid #e8cecb;border-radius:8px;color:#833d09;display:flex;font-size:13px;gap:8px;line-height:1.4;padding:10px 12px}.oa-throttle-banner-icon{align-items:center;display:inline-flex;flex-shrink:0;margin-top:1px}.oa-throttle-banner-text{flex:1}.oa-starting-loader{align-items:center;display:flex;flex:1;flex-direction:column;gap:16px;height:100%;justify-content:center;min-height:0}.oa-starting-spinner{animation:oa-spinner-rotate 1.4s linear infinite;height:48px;width:48px}.oa-starting-spinner-track{stroke:#e5e7eb}.oa-starting-spinner-arc{stroke:#2563eb;stroke-dasharray:80,126;stroke-dashoffset:0;animation:oa-spinner-dash 1.4s ease-in-out infinite}@keyframes oa-spinner-rotate{to{transform:rotate(1turn)}}@keyframes oa-spinner-dash{0%{stroke-dasharray:1,126;stroke-dashoffset:0}50%{stroke-dasharray:80,126;stroke-dashoffset:-35}to{stroke-dasharray:80,126;stroke-dashoffset:-124}}.oa-starting-loader-text{color:#111827;font-size:16px;font-weight:600;line-height:20px}.oa-muted{color:#6b7280}";
 styleInject(css_248z);
 
 function Sparkle() {
@@ -6966,9 +7031,17 @@ const EmptyState = ({
 function SuggestionsTab({
   suggestions,
   connected,
-  botConfig
+  botConfig,
+  sendSuggestionFeedback
 }) {
+  var _a, _b, _c;
   const toast = useToast();
+  const [expandedSequence, setExpandedSequence] = React.useState(null);
+  const feedbackEnabled = ((_a = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _a === void 0 ? void 0 : _a.feedback_enabled) === true;
+  const badFeedbackOptions = React.useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _a === void 0 ? void 0 : _a.bad_feedback_options) !== null && _b !== void 0 ? _b : [];
+  }, [(_b = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _b === void 0 ? void 0 : _b.bad_feedback_options]);
   const handleCopy = async text => {
     try {
       await navigator.clipboard.writeText(text);
@@ -6977,13 +7050,36 @@ function SuggestionsTab({
       toast.error("Failed to copy");
     }
   };
+  const handleThumbsUp = React.useCallback((sequence, currentFeedback) => {
+    if (!feedbackEnabled) return;
+    const newType = currentFeedback === "good" ? null : "good";
+    sendSuggestionFeedback(sequence, newType, null);
+    setExpandedSequence(null);
+  }, [sendSuggestionFeedback, feedbackEnabled]);
+  const handleThumbsDown = React.useCallback((sequence, currentFeedback) => {
+    if (!feedbackEnabled) return;
+    if (currentFeedback === "bad") {
+      sendSuggestionFeedback(sequence, null, null);
+      setExpandedSequence(null);
+      return;
+    }
+    sendSuggestionFeedback(sequence, "bad", null);
+    if (badFeedbackOptions.length > 0) {
+      setExpandedSequence(sequence);
+    }
+  }, [sendSuggestionFeedback, badFeedbackOptions, feedbackEnabled]);
+  const handleBadFeedbackReason = React.useCallback((sequence, reason) => {
+    if (!feedbackEnabled) return;
+    sendSuggestionFeedback(sequence, "bad", reason);
+    setExpandedSequence(null);
+  }, [sendSuggestionFeedback, feedbackEnabled]);
   if (!connected) {
     return jsxRuntime.jsx(EmptyState, {
       title: "Assistant is inactive",
       subtitle: "Start a call to receive real-time suggestions."
     });
   }
-  if ((botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestions) === false) {
+  if (((_c = botConfig === null || botConfig === void 0 ? void 0 : botConfig.suggestion) === null || _c === void 0 ? void 0 : _c.enabled) === false) {
     return jsxRuntime.jsx(EmptyState, {
       title: "Suggestions are disabled",
       subtitle: "Suggestions are disabled in the bot configuration. Please contact the administrator to enable it."
@@ -7017,21 +7113,37 @@ function SuggestionsTab({
     children: displayed.map((suggestion, index) => {
       const isRecent = index === 0;
       const cardClass = isRecent ? "oa-suggestion-card oa-suggestion-card--recent" : "oa-suggestion-card oa-suggestion-card--older";
+      const showReasons = suggestion.feedbackType === "bad" || expandedSequence === suggestion.sequence;
       return jsxRuntime.jsxs("div", {
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "flex-start",
-          gap: "8px"
-        },
-        children: [isRecent ? jsxRuntime.jsx("div", {
-          className: "oa-suggestion-card--recent-wrapper",
+        children: [jsxRuntime.jsxs("div", {
           style: {
-            flex: "1 1 auto",
-            maxWidth: "80%"
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: "8px"
           },
-          children: jsxRuntime.jsx("div", {
+          children: [isRecent ? jsxRuntime.jsx("div", {
+            className: "oa-suggestion-card--recent-wrapper",
+            style: {
+              flex: "1 1 auto",
+              maxWidth: "72%"
+            },
+            children: jsxRuntime.jsx("div", {
+              className: cardClass,
+              children: jsxRuntime.jsx("span", {
+                className: "oa-suggestion-text",
+                style: {
+                  fontSize: "15px"
+                },
+                children: suggestion.text
+              })
+            })
+          }) : jsxRuntime.jsx("div", {
             className: cardClass,
+            style: {
+              flex: "1 1 auto",
+              maxWidth: "72%"
+            },
             children: jsxRuntime.jsx("span", {
               className: "oa-suggestion-text",
               style: {
@@ -7039,31 +7151,57 @@ function SuggestionsTab({
               },
               children: suggestion.value
             })
-          })
-        }) : jsxRuntime.jsx("div", {
-          className: cardClass,
-          style: {
-            flex: "1 1 auto",
-            maxWidth: "80%"
-          },
-          children: jsxRuntime.jsx("span", {
-            className: "oa-suggestion-text",
+          }), jsxRuntime.jsxs("div", {
             style: {
-              fontSize: "15px"
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+              flexShrink: 0,
+              marginTop: "10px"
             },
-            children: suggestion.value
-          })
-        }), jsxRuntime.jsx("button", {
-          className: "oa-copy-icon",
-          "aria-label": "Copy suggestion",
-          onClick: () => handleCopy(suggestion.value),
+            children: [jsxRuntime.jsx("button", {
+              className: "oa-copy-icon",
+              "aria-label": "Copy suggestion",
+              onClick: () => handleCopy(suggestion.text),
+              children: jsxRuntime.jsx(Copy, {
+                size: 14
+              })
+            }), feedbackEnabled && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx("button", {
+                className: `oa-feedback-icon ${suggestion.feedbackType === "good" ? "oa-feedback-icon--positive" : ""}`,
+                "aria-label": "Mark as helpful",
+                onClick: () => handleThumbsUp(suggestion.sequence, suggestion.feedbackType),
+                style: {
+                  color: suggestion.feedbackType === "good" ? "#16a34a" : undefined
+                },
+                children: jsxRuntime.jsx(ThumbsUp, {
+                  size: 14
+                })
+              }), jsxRuntime.jsx("button", {
+                className: `oa-feedback-icon ${suggestion.feedbackType === "bad" ? "oa-feedback-icon--negative" : ""}`,
+                "aria-label": "Mark as not helpful",
+                onClick: () => handleThumbsDown(suggestion.sequence, suggestion.feedbackType),
+                style: {
+                  color: suggestion.feedbackType === "bad" ? "#dc2626" : undefined
+                },
+                children: jsxRuntime.jsx(ThumbsDown, {
+                  size: 14
+                })
+              })]
+            })]
+          })]
+        }), showReasons && badFeedbackOptions.length > 0 && jsxRuntime.jsx("div", {
           style: {
-            flexShrink: 0,
-            marginTop: "10px"
+            display: "flex",
+            gap: "8px",
+            flexWrap: "wrap",
+            marginTop: "8px"
           },
-          children: jsxRuntime.jsx(Copy, {
-            size: 14
-          })
+          children: badFeedbackOptions.map(reason => jsxRuntime.jsx("button", {
+            className: `oa-feedback-reason-btn ${suggestion.badFeedbackReason === reason ? "oa-feedback-reason-btn--selected" : ""}`,
+            onClick: () => handleBadFeedbackReason(suggestion.sequence, reason),
+            children: reason
+          }, reason))
         })]
       }, suggestion.id);
     })
@@ -7162,12 +7300,13 @@ function ExotelAIAssist(_a) {
     } = _a,
     params = __rest(_a, ["className", "onReady"]);
   const {
-    isReady,
     streamState,
+    isReady,
     suggestions,
     transcripts,
     sentiment,
-    botConfig
+    botConfig,
+    sendSuggestionFeedback
   } = useExotelAIAssist(params);
   const onReadyRef = React.useRef(onReady);
   onReadyRef.current = onReady;
@@ -7245,7 +7384,8 @@ function ExotelAIAssist(_a) {
                 children: jsxRuntime.jsx(SuggestionsTab, {
                   suggestions: suggestions,
                   connected: connected,
-                  botConfig: botConfig
+                  botConfig: botConfig,
+                  sendSuggestionFeedback: sendSuggestionFeedback
                 })
               }), jsxRuntime.jsx(Content$1, {
                 value: "transcript",

package/dist/types/index.d.ts

@@ -12,8 +12,12 @@ export interface ExotelAIAssistParams {
 /** A single AI-generated suggestion for the agent. */
 export interface Suggestion {
     id: string;
+    text: string;
     value: string;
     timestamp: number;
+    sequence: number;
+    feedbackType: "good" | "bad" | null;
+    badFeedbackReason: string | null;
 }
 /** A single spoken line as received in the live transcript. */
 export interface TranscriptLine {
@@ -43,7 +47,11 @@ export type StreamState = "connected" | "throttled" | "pending" | "disconnected"
 export interface BotConfig {
     sentiment: boolean;
     transcript: boolean;
-    suggestions: boolean;
+    suggestion: {
+        enabled: boolean;
+        feedback_enabled: boolean;
+        bad_feedback_options?: string[];
+    };
     status: "LIVE" | "DRAFT" | "DEACTIVATED";
 }
 interface TranscriptSegment {
@@ -56,10 +64,21 @@ interface TranscriptMessage {
     sequence: number;
     transcript_segments: TranscriptSegment[];
 }
+export interface SuggestionValue {
+    text: string;
+    sequence: number;
+}
 export interface WssEvent {
     event_type: "suggestion" | "sentiment" | "transcript";
     transcript: TranscriptMessage[];
-    value: string;
+    text: string;
+    value?: SuggestionValue | string;
+}
+export interface SuggestionFeedbackMessage {
+    type: "suggestion_feedback";
+    sequence: number;
+    feedback_type: "good" | "bad" | null;
+    bad_feedback_reason: string | null;
 }
 export interface InitialHandshakeResponse {
     type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exotel-npm-dev/exotel-ai-assist",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "AI-powered real-time suggestions, transcript, and sentiment for agent calls",
   "license": "Apache-2.0",
   "main": "dist/index.js",

package/src/components/ExotelAIAssistApp.tsx

@@ -19,7 +19,7 @@ export interface ExotelAIAssistProps extends ExotelAIAssistParams {
 }
 
 export function ExotelAIAssist({ className, onReady, ...params }: ExotelAIAssistProps): JSX.Element {
-  const { isReady, streamState, suggestions, transcripts, sentiment, botConfig } = useExotelAIAssist(params as ExotelAIAssistParams);
+  const { streamState, isReady, suggestions, transcripts, sentiment, botConfig, sendSuggestionFeedback } = useExotelAIAssist(params as ExotelAIAssistParams);
 
   const onReadyRef = useRef(onReady);
   onReadyRef.current = onReady;
@@ -68,9 +68,9 @@ export function ExotelAIAssist({ className, onReady, ...params }: ExotelAIAssist
                     </Tabs.Trigger>
                   </Tabs.List>
 
-                  <Tabs.Content value="suggestions" className="oa-tabs-content" style={{ paddingTop: 16 }}>
-                    <SuggestionsTab suggestions={suggestions} connected={connected} botConfig={botConfig} />
-                  </Tabs.Content>
+                <Tabs.Content value="suggestions" className="oa-tabs-content" style={{ paddingTop: 16 }}>
+                  <SuggestionsTab suggestions={suggestions} connected={connected} botConfig={botConfig} sendSuggestionFeedback={sendSuggestionFeedback} />
+                </Tabs.Content>
 
                   <Tabs.Content value="transcript" className="oa-tabs-content" style={{ paddingTop: 16 }}>
                     <TranscriptTab transcripts={transcripts} connected={connected} botConfig={botConfig} />

package/src/components/key-components/SuggestionTab.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Copy } from "lucide-react";
+import React, { useState, useCallback, useMemo } from "react";
+import { Copy, ThumbsUp, ThumbsDown } from "lucide-react";
 
 import { Suggestion, BotConfig } from "../../types";
 import LoadingBox from "../LoadingBox";
@@ -11,12 +11,19 @@ export function SuggestionsTab({
   suggestions,
   connected,
   botConfig,
+  sendSuggestionFeedback,
 }: {
   suggestions: Suggestion[];
   connected: boolean;
   botConfig: BotConfig | null;
+  sendSuggestionFeedback: (sequence: number, feedbackType: "good" | "bad" | null, badFeedbackReason?: string | null) => boolean;
 }): JSX.Element {
   const toast = useToast();
+  const [expandedSequence, setExpandedSequence] = useState<number | null>(null);
+
+  const feedbackEnabled = botConfig?.suggestion?.feedback_enabled === true;
+
+  const badFeedbackOptions = useMemo(() => botConfig?.suggestion?.bad_feedback_options ?? [], [botConfig?.suggestion?.bad_feedback_options]);
 
   const handleCopy = async (text: string) => {
     try {
@@ -27,11 +34,46 @@ export function SuggestionsTab({
     }
   };
 
+  const handleThumbsUp = useCallback(
+    (sequence: number, currentFeedback: "good" | "bad" | null) => {
+      if (!feedbackEnabled) return;
+      const newType = currentFeedback === "good" ? null : "good";
+      sendSuggestionFeedback(sequence, newType, null);
+      setExpandedSequence(null);
+    },
+    [sendSuggestionFeedback, feedbackEnabled]
+  );
+
+  const handleThumbsDown = useCallback(
+    (sequence: number, currentFeedback: "good" | "bad" | null) => {
+      if (!feedbackEnabled) return;
+      if (currentFeedback === "bad") {
+        sendSuggestionFeedback(sequence, null, null);
+        setExpandedSequence(null);
+        return;
+      }
+      sendSuggestionFeedback(sequence, "bad", null);
+      if (badFeedbackOptions.length > 0) {
+        setExpandedSequence(sequence);
+      }
+    },
+    [sendSuggestionFeedback, badFeedbackOptions, feedbackEnabled]
+  );
+
+  const handleBadFeedbackReason = useCallback(
+    (sequence: number, reason: string) => {
+      if (!feedbackEnabled) return;
+      sendSuggestionFeedback(sequence, "bad", reason);
+      setExpandedSequence(null);
+    },
+    [sendSuggestionFeedback, feedbackEnabled]
+  );
+
   if (!connected) {
     return <EmptyState title="Assistant is inactive" subtitle="Start a call to receive real-time suggestions." />;
   }
 
-  if (botConfig?.suggestions === false) {
+  if (botConfig?.suggestion?.enabled === false) {
     return <EmptyState title="Suggestions are disabled" subtitle="Suggestions are disabled in the bot configuration. Please contact the administrator to enable it." />;
   }
 
@@ -63,27 +105,71 @@ export function SuggestionsTab({
       {displayed.map((suggestion, index) => {
         const isRecent = index === 0;
         const cardClass = isRecent ? "oa-suggestion-card oa-suggestion-card--recent" : "oa-suggestion-card oa-suggestion-card--older";
+        const showReasons = suggestion.feedbackType === "bad" || expandedSequence === suggestion.sequence;
 
         return (
-          <div key={suggestion.id} style={{ display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "8px" }}>
-            {isRecent ? (
-              <div className="oa-suggestion-card--recent-wrapper" style={{ flex: "1 1 auto", maxWidth: "80%" }}>
-                <div className={cardClass}>
+          <div key={suggestion.id}>
+            <div style={{ display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "8px" }}>
+              {isRecent ? (
+                <div className="oa-suggestion-card--recent-wrapper" style={{ flex: "1 1 auto", maxWidth: "72%" }}>
+                  <div className={cardClass}>
+                    <span className="oa-suggestion-text" style={{ fontSize: "15px" }}>
+                      {suggestion.text}
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <div className={cardClass} style={{ flex: "1 1 auto", maxWidth: "72%" }}>
                   <span className="oa-suggestion-text" style={{ fontSize: "15px" }}>
                     {suggestion.value}
                   </span>
                 </div>
+              )}
+
+              <div style={{ display: "flex", flexDirection: "column", gap: "4px", flexShrink: 0, marginTop: "10px" }}>
+                <button className="oa-copy-icon" aria-label="Copy suggestion" onClick={() => handleCopy(suggestion.text)}>
+                  <Copy size={14} />
+                </button>
+                {feedbackEnabled && (
+                  <>
+                    <button
+                      className={`oa-feedback-icon ${suggestion.feedbackType === "good" ? "oa-feedback-icon--positive" : ""}`}
+                      aria-label="Mark as helpful"
+                      onClick={() => handleThumbsUp(suggestion.sequence, suggestion.feedbackType)}
+                      style={{
+                        color: suggestion.feedbackType === "good" ? "#16a34a" : undefined,
+                      }}
+                    >
+                      <ThumbsUp size={14} />
+                    </button>
+                    <button
+                      className={`oa-feedback-icon ${suggestion.feedbackType === "bad" ? "oa-feedback-icon--negative" : ""}`}
+                      aria-label="Mark as not helpful"
+                      onClick={() => handleThumbsDown(suggestion.sequence, suggestion.feedbackType)}
+                      style={{
+                        color: suggestion.feedbackType === "bad" ? "#dc2626" : undefined,
+                      }}
+                    >
+                      <ThumbsDown size={14} />
+                    </button>
+                  </>
+                )}
               </div>
-            ) : (
-              <div className={cardClass} style={{ flex: "1 1 auto", maxWidth: "80%" }}>
-                <span className="oa-suggestion-text" style={{ fontSize: "15px" }}>
-                  {suggestion.value}
-                </span>
+            </div>
+
+            {showReasons && badFeedbackOptions.length > 0 && (
+              <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginTop: "8px" }}>
+                {badFeedbackOptions.map((reason) => (
+                  <button
+                    key={reason}
+                    className={`oa-feedback-reason-btn ${suggestion.badFeedbackReason === reason ? "oa-feedback-reason-btn--selected" : ""}`}
+                    onClick={() => handleBadFeedbackReason(suggestion.sequence, reason)}
+                  >
+                    {reason}
+                  </button>
+                ))}
               </div>
             )}
-            <button className="oa-copy-icon" aria-label="Copy suggestion" onClick={() => handleCopy(suggestion.value)} style={{ flexShrink: 0, marginTop: "10px" }}>
-              <Copy size={14} />
-            </button>
           </div>
         );
       })}

package/src/controller/index.ts

@@ -1,17 +1,5 @@
 import EventEmitter from "eventemitter3";
-import {
-  ExotelAIAssistParams,
-  ConnectionStatus,
-  ControllerEvents,
-  Suggestion,
-  TranscriptLine,
-  Sentiment,
-  StreamState,
-  WssEvent,
-  InitialHandshakeResponse,
-  WssResponse,
-  WorkerInboundMessage,
-} from "../types";
+import { ExotelAIAssistParams, ConnectionStatus, ControllerEvents, Suggestion, TranscriptLine, Sentiment, WssEvent, InitialHandshakeResponse, WssResponse, WorkerInboundMessage, SuggestionFeedbackMessage, StreamState } from "../types";
 import { ITransport, createTransport } from "../transport";
 import { Utils } from "../utils";
 
@@ -99,6 +87,28 @@ export class ExotelAIAssistController extends EventEmitter<ControllerEvents> {
   getStreamState(): StreamState | null {
     return this._streamState;
   }
+  
+  sendSuggestionFeedback(sequence: number, feedbackType: "good" | "bad" | null, badFeedbackReason: string | null = null): boolean {
+    if (!this.transport || this.status !== "connected") {
+      console.warn("[ExotelAIAssist] Cannot send feedback: not connected");
+      return false;
+    }
+
+    const message: SuggestionFeedbackMessage = {
+      type: "suggestion_feedback",
+      sequence,
+      feedback_type: feedbackType,
+      bad_feedback_reason: badFeedbackReason,
+    };
+
+    try {
+      this.transport.send(JSON.stringify(message));
+      return true;
+    } catch (error) {
+      console.error("[ExotelAIAssist] Failed to send feedback:", error);
+      return false;
+    }
+  }
 
   private _ensureTransport(): void {
     if (this.transport) return;
@@ -240,18 +250,29 @@ export class ExotelAIAssistController extends EventEmitter<ControllerEvents> {
         this.emit("transcript", lines);
       }
 
-      if (event.event_type === "suggestion" && event.value) {
-        const suggestion: Suggestion = {
-          id: Utils.getUniqueId(),
-          value: event.value,
-          timestamp: now,
-        };
-        this.emit("suggestion", suggestion);
+      if (event.event_type === "suggestion") {
+        const val = event.value;
+        const text = typeof val === "object" && val !== null && "text" in val ? val.text : typeof val === "string" ? val : event.text;
+        const sequence = typeof val === "object" && val !== null && "sequence" in val ? val.sequence : 0;
+        
+        if (text) {
+          const suggestion: Suggestion = {
+            id: Utils.getUniqueId(),
+            text,
+            value: text,
+            timestamp: now,
+            sequence,
+            feedbackType: null,
+            badFeedbackReason: null,
+          };
+          this.emit("suggestion", suggestion);
+        }
       }
 
       if (event.event_type === "sentiment" && event.value) {
+        const sentimentValue = typeof event.value === "string" ? event.value : event.value.text;
         const sentiment: Sentiment = {
-          label: event.value.toLowerCase() as Sentiment["label"],
+          label: sentimentValue.toLowerCase() as Sentiment["label"],
           timestamp: now,
         };
         this.emit("sentiment", sentiment);

package/src/hooks/useExotelAIAssist.ts

@@ -31,6 +31,7 @@ export interface UseExotelAIAssistReturn {
   connect: () => void;
   disconnect: () => void;
   setParams: (patch: Partial<ExotelAIAssistParams>) => void;
+  sendSuggestionFeedback: (sequence: number, feedbackType: "good" | "bad" | null, badFeedbackReason?: string | null) => boolean;
 }
 
 /** Internal extended return — adds botConfig for the UI component only. */
@@ -89,5 +90,20 @@ export function useExotelAIAssist(params: ExotelAIAssistParams): UseExotelAIAssi
   const disconnect = useCallback(() => controllerRef.current?.disconnect(), []);
   const setParams = useCallback((patch: Partial<ExotelAIAssistParams>) => controllerRef.current?.setParams(patch), []);
 
-  return { isReady, streamState, suggestions, transcripts, sentiment, botConfig, lastError, connect, disconnect, setParams };
+  const sendSuggestionFeedback = useCallback(
+    (sequence: number, feedbackType: "good" | "bad" | null, badFeedbackReason: string | null = null): boolean => {
+      const sent = controllerRef.current?.sendSuggestionFeedback(sequence, feedbackType, badFeedbackReason) ?? false;
+      
+      if (sent) {
+        setSuggestions((prev) =>
+          prev.map((s) => (s.sequence === sequence ? { ...s, feedbackType, badFeedbackReason } : s))
+        );
+      }
+      
+      return sent;
+    },
+    []
+  );
+
+  return { streamState, isReady, suggestions, transcripts, sentiment, botConfig, lastError, connect, disconnect, setParams, sendSuggestionFeedback };
 }

package/src/styles/index.css

@@ -178,9 +178,10 @@
 }
 
 /* -----------------------------------------------------------------------
-   Copy icon button
+   Copy icon button and feedback icons
    ----------------------------------------------------------------------- */
-.oa-copy-icon {
+.oa-copy-icon,
+.oa-feedback-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -196,11 +197,69 @@
   padding: 0;
 }
 
-.oa-copy-icon:hover {
+.oa-copy-icon:hover,
+.oa-feedback-icon:hover {
   background: #f9fafb;
   color: #374151;
 }
 
+.oa-feedback-icon--positive {
+  background: #dcfce7 !important;
+  border-color: #86efac !important;
+  color: #16a34a !important;
+}
+
+.oa-feedback-icon--negative {
+  background: #fee2e2 !important;
+  border-color: #fca5a5 !important;
+  color: #dc2626 !important;
+}
+
+.oa-feedback-icon:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.oa-feedback-icon--positive:disabled,
+.oa-feedback-icon--negative:disabled {
+  opacity: 1;
+}
+
+/* Feedback reason pill buttons */
+.oa-feedback-reason-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: #991b1b;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 16px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+  font-family: inherit;
+}
+
+.oa-feedback-reason-btn:hover:not(:disabled) {
+  background: #fee2e2;
+  border-color: #f87171;
+}
+
+.oa-feedback-reason-btn--selected {
+  background: #dc2626 !important;
+  color: #ffffff !important;
+  border-color: #dc2626 !important;
+}
+
+.oa-feedback-reason-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
 /* -----------------------------------------------------------------------
    Toast
    ----------------------------------------------------------------------- */

package/src/types/index.ts

@@ -13,8 +13,12 @@ export interface ExotelAIAssistParams {
 /** A single AI-generated suggestion for the agent. */
 export interface Suggestion {
   id: string;
+  text: string;
   value: string;
   timestamp: number;
+  sequence: number;
+  feedbackType: "good" | "bad" | null;
+  badFeedbackReason: string | null;
 }
 
 /** A single spoken line as received in the live transcript. */
@@ -53,7 +57,11 @@ export type StreamState = "connected" | "throttled" | "pending" | "disconnected"
 export interface BotConfig {
   sentiment: boolean;
   transcript: boolean;
-  suggestions: boolean;
+  suggestion: {
+    enabled: boolean;
+    feedback_enabled: boolean;
+    bad_feedback_options?: string[];
+  };
   status: "LIVE" | "DRAFT" | "DEACTIVATED";
 }
 
@@ -69,10 +77,23 @@ interface TranscriptMessage {
   transcript_segments: TranscriptSegment[];
 }
 
+export interface SuggestionValue {
+  text: string;
+  sequence: number;
+}
+
 export interface WssEvent {
   event_type: "suggestion" | "sentiment" | "transcript";
   transcript: TranscriptMessage[];
-  value: string;
+  text: string;
+  value?: SuggestionValue | string;
+}
+
+export interface SuggestionFeedbackMessage {
+  type: "suggestion_feedback";
+  sequence: number;
+  feedback_type: "good" | "bad" | null;
+  bad_feedback_reason: string | null;
 }
 
 export interface InitialHandshakeResponse {