@exotel-npm-dev/exotel-ai-assist 1.2.2 → 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);
@@ -1811,7 +1840,7 @@ class ExotelAIAssistController extends EventEmitter {
     this.emit("streamState", state);
     if (state === "connected" || state === "throttled") {
       this._fireReady();
-    } else if (state === "disconnected" && this.readyFired) {
+    } else if ((state === "connection_timeout" || state === "disconnected") && this.readyFired) {
       this.readyFired = false;
       this.emit("onReady", false);
     }

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);
@@ -21229,7 +21282,7 @@ class ExotelAIAssistController extends EventEmitter {
     this.emit("streamState", state);
     if (state === "connected" || state === "throttled") {
       this._fireReady();
-    } else if (state === "disconnected" && this.readyFired) {
+    } else if ((state === "connection_timeout" || state === "disconnected") && this.readyFired) {
       this.readyFired = false;
       this.emit("onReady", false);
     }
@@ -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;
@@ -21899,7 +22038,7 @@ function ExotelAIAssist(_a) {
         warningBannerMessage: "AI Assist couldn't join this call \u2014 capacity is full. It should be ready for your next call."
       });
     }
-    if (streamState === "disconnected") {
+    if (streamState === "connection_timeout") {
       return jsxRuntimeExports.jsx(EmptyState, {
         title: "AI Assist is currently inactive",
         subtitle: "we were unable to establish a connection."
@@ -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",