@ensembleapp/client-sdk 0.0.36 → 0.0.37

package/dist/index.js

@@ -31,7 +31,7 @@ styleInject(':root[data-chat-widget],\n[data-chat-widget] {\n  --chat-primary: #
 
 // lib/chat/ChatWidget.tsx
 import { Send, StopCircle } from "lucide-react";
-import { forwardRef, useCallback as useCallback6, useEffect as useEffect6, useImperativeHandle, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
+import { forwardRef, useCallback as useCallback6, useEffect as useEffect6, useImperativeHandle, useMemo as useMemo5, useRef as useRef5, useState as useState7 } from "react";
 
 // ../../node_modules/.pnpm/@ai-sdk+provider@3.0.8/node_modules/@ai-sdk/provider/dist/index.mjs
 var marker = "vercel.ai.error";
@@ -21531,7 +21531,7 @@ function useChat({
     []
   );
   const transport = useMemo(() => new DefaultChatTransport({
-    api: `${baseUrl}/api/chat`,
+    api: `${baseUrl}/chat`,
     fetch: authFetch,
     headers: {
       "Content-Type": "application/json",
@@ -21576,7 +21576,7 @@ function useChat({
   useEffect(() => {
     const fetchInitialMessages = async () => {
       try {
-        const response = await authFetch(`${baseUrl}/api/chat/messages`, {
+        const response = await authFetch(`${baseUrl}/chat/messages`, {
           method: "GET",
           headers: {
             "thread-id": threadId
@@ -21625,52 +21625,55 @@ function useFeedback({
   api,
   threadId,
   agentId,
-  agentVersion,
-  agentExecutionId
+  agentVersion
 }) {
   const { baseUrl, token } = api;
   const [submittedFeedback, setSubmittedFeedback] = useState2({});
   const [isSubmitting, setIsSubmitting] = useState2(null);
   const [error48, setError] = useState2(null);
   const submitFeedback = useCallback(
-    async ({ messageId, rating, improvementText }) => {
+    async (messageId, { rating, improvementText, notes }) => {
       setIsSubmitting(messageId);
       setError(null);
       try {
+        const body = {
+          agentId,
+          agentVersion,
+          threadId,
+          messageId,
+          rating,
+          improvementText,
+          notes
+        };
         const response = await fetch(`${baseUrl}/api/feedback`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
             Authorization: `Bearer ${token}`
           },
-          body: JSON.stringify({
-            threadId,
-            messageId,
-            rating,
-            improvementText: improvementText || void 0,
-            agentId: agentId || void 0,
-            agentVersion: agentVersion !== void 0 ? String(agentVersion) : void 0,
-            orchestrationId: agentExecutionId || void 0
-          })
+          body: JSON.stringify(body)
         });
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
           throw new Error(errorData.error || `Failed to submit feedback: ${response.statusText}`);
         }
         const { data } = await response.json();
+        if (data.deleted || !rating) {
+          setSubmittedFeedback((prev) => {
+            const next = { ...prev };
+            delete next[messageId];
+            return next;
+          });
+          return null;
+        }
         const feedback = {
-          id: data.id,
-          messageId: data.messageId,
           rating: data.rating,
           improvementText: data.improvementText,
-          createdAt: new Date(data.createdAt)
+          notes: data.notes
         };
         setSubmittedFeedback((prev) => ({
           ...prev,
-          [messageId]: {
-            rating: feedback.rating,
-            comment: feedback.improvementText
-          }
+          [messageId]: feedback
         }));
         return feedback;
       } catch (err) {
@@ -21682,7 +21685,7 @@ function useFeedback({
         setIsSubmitting(null);
       }
     },
-    [baseUrl, token, threadId, agentId, agentVersion, agentExecutionId]
+    [baseUrl, token, threadId, agentId, agentVersion]
   );
   const getFeedbackForMessage = useCallback(
     (messageId) => {
@@ -22171,7 +22174,7 @@ function FullDisplayMode({
 }
 
 // lib/chat/renderers/MessageRenderer.tsx
-import React4, { useCallback as useCallback4 } from "react";
+import React5, { useCallback as useCallback5, useMemo as useMemo4 } from "react";
 import ReactMarkdown from "react-markdown";
 
 // ../../node_modules/.pnpm/ccount@2.0.1/node_modules/ccount/index.js
@@ -25633,20 +25636,221 @@ function remarkGfm(options) {
   toMarkdownExtensions.push(gfmToMarkdown(settings));
 }
 
+// lib/chat/components/MessageFeedback.css
+styleInject(".chat-widget__feedback {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin-top: 0.35rem;\n}\n.chat-widget__feedback-button {\n  border: none;\n  background: transparent;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  color: #9ca3af;\n  cursor: pointer;\n  border-radius: 0.35rem;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-button:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.05);\n  color: #6b7280;\n}\n.chat-widget__feedback-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.chat-widget__feedback-button--positive.chat-widget__feedback-button--selected {\n  color: #22c55e;\n  background: rgba(34, 197, 94, 0.1);\n}\n.chat-widget__feedback-button--negative.chat-widget__feedback-button--selected {\n  color: #ef4444;\n  background: rgba(239, 68, 68, 0.1);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--selected {\n  background: rgba(0, 0, 0, 0.05);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--has-content {\n  color: #3b82f6;\n}\n.chat-widget__feedback-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__feedback-comment-section {\n  margin-top: 0.75rem;\n  background: var(--chat-background, #ffffff);\n  border: 1px solid var(--chat-border, #e5e7eb);\n  border-radius: 0.5rem;\n  padding: 0.75rem;\n  width: 100%;\n  max-width: 400px;\n}\n.chat-widget__feedback-comment-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: var(--chat-assistant-text, #111827);\n}\n.chat-widget__feedback-comment-required {\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #ef4444;\n  background: rgba(239, 68, 68, 0.1);\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n}\n.chat-widget__feedback-comment-body {\n  display: flex;\n  gap: 0.5rem;\n  align-items: flex-start;\n}\n.chat-widget__feedback-textarea {\n  flex: 1;\n  min-height: 60px;\n  padding: 0.625rem;\n  border: 1px solid var(--chat-border, #e5e7eb);\n  border-radius: 0.35rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  resize: vertical;\n  color: var(--chat-input-text, #111827);\n  background: var(--chat-input-bg, #ffffff);\n  line-height: 1.5;\n}\n.chat-widget__feedback-textarea:focus {\n  outline: none;\n  border-color: var(--chat-primary, #3b82f6);\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n}\n.chat-widget__feedback-textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder, #6b7280);\n}\n.chat-widget__feedback-textarea::placeholder {\n  color: var(--chat-input-placeholder, #6b7280);\n}\n.chat-widget__feedback-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n.chat-widget__feedback-cancel,\n.chat-widget__feedback-submit {\n  padding: 0.35rem 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 0.3rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-cancel {\n  background: transparent;\n  border: none;\n  color: #9ca3af;\n  padding: 0.25rem 0.5rem;\n}\n.chat-widget__feedback-cancel:hover {\n  color: #6b7280;\n}\n.chat-widget__feedback-submit {\n  background: var(--chat-primary, #3b82f6);\n  border: none;\n  color: var(--chat-primary-text, #ffffff);\n}\n.chat-widget__feedback-submit:hover:not(:disabled) {\n  background: var(--chat-primary-hover, #2563eb);\n}\n.chat-widget__feedback-submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__feedback-wrapper {\n  position: relative;\n}\n");
+
+// lib/chat/components/MessageFeedback.tsx
+import { MessageSquare, MessageSquareText, ThumbsDown, ThumbsUp } from "lucide-react";
+import { useCallback as useCallback4, useEffect as useEffect4, useState as useState5 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var classNames = {
+  wrapper: "chat-widget__feedback-wrapper",
+  container: "chat-widget__feedback",
+  button: "chat-widget__feedback-button",
+  buttonPositive: "chat-widget__feedback-button--positive",
+  buttonNegative: "chat-widget__feedback-button--negative",
+  commentBody: "chat-widget__feedback-comment-body",
+  buttonComment: "chat-widget__feedback-button--comment",
+  buttonSelected: "chat-widget__feedback-button--selected",
+  buttonHasContent: "chat-widget__feedback-button--has-content",
+  icon: "chat-widget__feedback-icon",
+  commentSection: "chat-widget__feedback-comment-section",
+  commentHeader: "chat-widget__feedback-comment-header",
+  commentRequired: "chat-widget__feedback-comment-required",
+  textarea: "chat-widget__feedback-textarea",
+  actions: "chat-widget__feedback-actions",
+  cancelButton: "chat-widget__feedback-cancel",
+  submitButton: "chat-widget__feedback-submit"
+};
+var MessageFeedback = ({
+  messageId,
+  existingRating,
+  existingComment,
+  isSubmitting,
+  requireCommentForNegative = false,
+  onSubmit
+}) => {
+  const [savedRating, setSavedRating] = useState5(existingRating ?? null);
+  const [savedComment, setSavedComment] = useState5(existingComment ?? "");
+  const [pendingRating, setPendingRating] = useState5(null);
+  const [showCommentBox, setShowCommentBox] = useState5(false);
+  const [commentText, setCommentText] = useState5(existingComment ?? "");
+  useEffect4(() => {
+    if (existingRating) {
+      setSavedRating(existingRating);
+    }
+    if (existingComment !== void 0) {
+      setSavedComment(existingComment);
+      setCommentText(existingComment);
+    }
+  }, [existingRating, existingComment]);
+  const handlePositiveClick = useCallback4(() => {
+    if (savedRating === "positive") {
+      setSavedRating(null);
+      setSavedComment("");
+      setCommentText("");
+      setPendingRating(null);
+      onSubmit(messageId, { rating: null, improvementText: null });
+    } else {
+      setSavedRating("positive");
+      setPendingRating(null);
+      onSubmit(messageId, { rating: "positive" });
+    }
+  }, [messageId, savedRating, onSubmit]);
+  const handleNegativeClick = useCallback4(() => {
+    if (savedRating === "negative") {
+      setSavedRating(null);
+      setSavedComment("");
+      setCommentText("");
+      setPendingRating(null);
+      onSubmit(messageId, { rating: null, improvementText: null });
+    } else if (requireCommentForNegative) {
+      setPendingRating("negative");
+      setShowCommentBox(true);
+    } else {
+      setSavedRating("negative");
+      setPendingRating(null);
+      onSubmit(messageId, { rating: "negative" });
+    }
+  }, [messageId, savedRating, requireCommentForNegative, onSubmit]);
+  const handleCommentToggle = useCallback4(() => {
+    if (showCommentBox) {
+      setShowCommentBox(false);
+      if (pendingRating === "negative" && requireCommentForNegative) {
+        setPendingRating(null);
+      }
+      setCommentText(savedComment);
+    } else {
+      setShowCommentBox(true);
+    }
+  }, [showCommentBox, pendingRating, requireCommentForNegative, savedComment]);
+  const handleCommentCancel = useCallback4(() => {
+    setShowCommentBox(false);
+    setCommentText(savedComment);
+    if (pendingRating === "negative" && requireCommentForNegative) {
+      setPendingRating(null);
+    }
+  }, [pendingRating, requireCommentForNegative, savedComment]);
+  const handleCommentSubmit = useCallback4(() => {
+    const ratingToSubmit = pendingRating ?? savedRating;
+    if (ratingToSubmit === "negative" && requireCommentForNegative && !commentText.trim()) {
+      return;
+    }
+    const hasExistingComment = savedComment.length > 0;
+    if (!ratingToSubmit && !commentText.trim() && !hasExistingComment) {
+      return;
+    }
+    const commentToSubmit = commentText.trim() || (hasExistingComment ? null : void 0);
+    onSubmit(messageId, {
+      rating: ratingToSubmit,
+      improvementText: commentToSubmit
+    });
+    if (ratingToSubmit) {
+      setSavedRating(ratingToSubmit);
+    }
+    setSavedComment(commentText.trim());
+    setPendingRating(null);
+    setShowCommentBox(false);
+  }, [messageId, pendingRating, savedRating, savedComment, commentText, requireCommentForNegative, onSubmit]);
+  const displayRating = pendingRating ?? savedRating;
+  const isPositiveSelected = displayRating === "positive";
+  const isNegativeSelected = displayRating === "negative";
+  const isCommentRequired = isNegativeSelected && requireCommentForNegative;
+  const hasComment = savedComment.length > 0;
+  const canSubmitComment = (!isCommentRequired || commentText.trim().length > 0) && (displayRating || commentText.trim().length > 0 || hasComment);
+  const CommentIcon = hasComment ? MessageSquareText : MessageSquare;
+  return /* @__PURE__ */ jsxs3("div", { className: classNames.wrapper, children: [
+    /* @__PURE__ */ jsxs3("div", { className: classNames.container, children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `${classNames.button} ${classNames.buttonPositive} ${isPositiveSelected ? classNames.buttonSelected : ""}`,
+          onClick: handlePositiveClick,
+          disabled: isSubmitting,
+          title: "Good response",
+          "aria-label": "Mark as good response",
+          children: /* @__PURE__ */ jsx4(ThumbsUp, { className: classNames.icon })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `${classNames.button} ${classNames.buttonNegative} ${isNegativeSelected ? classNames.buttonSelected : ""}`,
+          onClick: handleNegativeClick,
+          disabled: isSubmitting,
+          title: "Could be improved",
+          "aria-label": "Mark as could be improved",
+          children: /* @__PURE__ */ jsx4(ThumbsDown, { className: classNames.icon })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `${classNames.button} ${classNames.buttonComment} ${showCommentBox ? classNames.buttonSelected : ""} ${hasComment ? classNames.buttonHasContent : ""}`,
+          onClick: handleCommentToggle,
+          disabled: isSubmitting,
+          title: "Add comment",
+          "aria-label": "Add comment",
+          children: /* @__PURE__ */ jsx4(CommentIcon, { className: classNames.icon })
+        }
+      )
+    ] }),
+    showCommentBox && /* @__PURE__ */ jsxs3("div", { className: classNames.commentSection, children: [
+      /* @__PURE__ */ jsx4("div", { className: classNames.commentHeader, children: isCommentRequired && /* @__PURE__ */ jsx4("span", { className: classNames.commentRequired, children: "Required" }) }),
+      /* @__PURE__ */ jsxs3("div", { className: classNames.commentBody, children: [
+        /* @__PURE__ */ jsx4(
+          "textarea",
+          {
+            className: classNames.textarea,
+            placeholder: isNegativeSelected ? "What could be improved?" : "Share your thoughts...",
+            value: commentText,
+            onChange: (e) => setCommentText(e.target.value),
+            rows: 3
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: classNames.actions, children: [
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: classNames.submitButton,
+              onClick: handleCommentSubmit,
+              disabled: isSubmitting || !canSubmitComment,
+              children: "Save"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: classNames.cancelButton,
+              onClick: handleCommentCancel,
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
 // lib/chat/components/TagGroupDisplay.css
 styleInject('.tag-group {\n  margin: 6px 0;\n}\n.tag-group-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: none;\n  border: none;\n  padding: 2px 6px 2px 2px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #666;\n  border-radius: 4px;\n  transition: background-color 0.15s ease;\n}\n.tag-group-header:hover {\n  background: #f5f5f5;\n}\n.tag-group-chevron {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  transition: transform 0.15s ease;\n  color: #999;\n}\n.tag-group-chevron--expanded {\n  transform: rotate(90deg);\n}\n.tag-group-label {\n  font-weight: 500;\n  color: #555;\n}\n.tag-group-content {\n  margin-left: 7px;\n  padding-left: 12px;\n  border-left: 2px solid #e0e0e0;\n  margin-top: 4px;\n}\n.tag-group-item {\n  margin: 4px 0;\n  font-size: 13px;\n  color: #444;\n}\n.tag-group-item--text {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n}\n.tag-group-item--text::before {\n  content: "\\2022";\n  color: #999;\n  font-size: 14px;\n  line-height: 1.4;\n  flex-shrink: 0;\n}\n.tag-group-item .tool-call-item {\n  margin: 0;\n}\n.tag-group-item--widget {\n  display: block;\n  margin: 8px 0;\n}\n.tag-group-item .chat-widget__markdown {\n  margin: 0;\n}\n.tag-group-item .chat-widget__markdown p {\n  margin: 0;\n}\n');
 
 // lib/chat/components/TagGroupDisplay.tsx
 import { ChevronRight } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function TagGroupDisplay({
   tagId,
   isExpanded,
   onToggle,
   children
 }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "tag-group", children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4("div", { className: "tag-group", children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         className: "tag-group-header",
@@ -25654,18 +25858,18 @@ function TagGroupDisplay({
         "aria-expanded": isExpanded,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             ChevronRight,
             {
               className: `tag-group-chevron ${isExpanded ? "tag-group-chevron--expanded" : ""}`,
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx4("span", { className: "tag-group-label", children: tagId })
+          /* @__PURE__ */ jsx5("span", { className: "tag-group-label", children: tagId })
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx4("div", { className: "tag-group-content", role: "region", children })
+    isExpanded && /* @__PURE__ */ jsx5("div", { className: "tag-group-content", role: "region", children })
   ] });
 }
 
@@ -25673,14 +25877,14 @@ function TagGroupDisplay({
 styleInject(".tool-call-item {\n  font-size: 13px;\n  color: #666;\n  margin: 4px 0;\n}\n.tool-call-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n}\n.tool-call-spinner {\n  width: 12px;\n  height: 12px;\n  border: 2px solid #e0e0e0;\n  border-top-color: #666;\n  border-radius: 50%;\n  animation: tool-call-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n@keyframes tool-call-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.tool-call-status-icon {\n  width: 12px;\n  height: 12px;\n  border: 2px solid #e0e0e0;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tool-call-status-icon--error {\n  border-color: #dc2626;\n}\n.tool-call-status-icon__inner {\n  width: 8px;\n  height: 8px;\n}\n.tool-call-status-icon__inner--success {\n  color: #9ca3af;\n}\n.tool-call-status-icon__inner--error {\n  color: #dc2626;\n}\n.tool-call-label {\n  color: #888;\n}\n.tool-call-label code {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-size: 12px;\n  background: #f5f5f5;\n  padding: 2px 6px;\n  border-radius: 4px;\n  color: #555;\n}\n.tool-call-toggle {\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: #6b7280;\n  background: transparent;\n  border: 1px solid #d1d5db;\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 2px 6px;\n  margin-left: 4px;\n  transition: all 0.15s ease;\n}\n.tool-call-toggle:hover {\n  color: #374151;\n  border-color: #9ca3af;\n  background: #f9fafb;\n}\n.tool-call-details {\n  margin-top: 8px;\n  margin-left: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.tool-call-section {\n  display: flex;\n  gap: 4px;\n}\n.tool-call-section-label {\n  flex-shrink: 0;\n  font-size: 10px;\n  font-weight: 600;\n  color: #6b7280;\n  width: 28px;\n  padding-top: 8px;\n  text-align: right;\n}\n.tool-call-section-content-wrapper {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n.tool-call-section-toggle {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: #6b7280;\n  background: rgba(255, 255, 255, 0.9);\n  border: 1px solid #d1d5db;\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 2px 6px;\n  transition: all 0.15s ease;\n  opacity: 0;\n  z-index: 1;\n}\n.tool-call-section-content-wrapper:hover .tool-call-section-toggle {\n  opacity: 1;\n}\n.tool-call-section-toggle:hover {\n  color: #374151;\n  border-color: #9ca3af;\n  background: #f9fafb;\n}\n.tool-call-section-content {\n  padding: 8px 12px;\n  background: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n  overflow-x: auto;\n}\n.tool-call-section-content.collapsed {\n  max-height: 2.4em;\n  overflow: hidden;\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.tool-call-section-content.collapsed pre {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n  max-width: 100%;\n}\n.tool-call-section-content pre {\n  margin: 0;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-size: 11px;\n  color: #333;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.tool-call-error {\n  color: #dc2626;\n  font-weight: 600;\n  font-size: 9px;\n  letter-spacing: 0.5px;\n  margin-left: auto;\n}\n");
 
 // lib/chat/components/ToolCallDisplay.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function CollapsibleSection({ label, content }) {
-  const [isCollapsed, setIsCollapsed] = useState5(false);
-  return /* @__PURE__ */ jsxs4("div", { className: "tool-call-section", children: [
-    /* @__PURE__ */ jsx5("div", { className: "tool-call-section-label", children: label }),
-    /* @__PURE__ */ jsxs4("div", { className: "tool-call-section-content-wrapper", children: [
-      /* @__PURE__ */ jsx5(
+  const [isCollapsed, setIsCollapsed] = useState6(false);
+  return /* @__PURE__ */ jsxs5("div", { className: "tool-call-section", children: [
+    /* @__PURE__ */ jsx6("div", { className: "tool-call-section-label", children: label }),
+    /* @__PURE__ */ jsxs5("div", { className: "tool-call-section-content-wrapper", children: [
+      /* @__PURE__ */ jsx6(
         "button",
         {
           className: "tool-call-section-toggle",
@@ -25689,12 +25893,12 @@ function CollapsibleSection({ label, content }) {
           children: isCollapsed ? "SHOW" : "HIDE"
         }
       ),
-      /* @__PURE__ */ jsx5("div", { className: `tool-call-section-content ${isCollapsed ? "collapsed" : ""}`, children: /* @__PURE__ */ jsx5("pre", { children: formatOutput(content) }) })
+      /* @__PURE__ */ jsx6("div", { className: `tool-call-section-content ${isCollapsed ? "collapsed" : ""}`, children: /* @__PURE__ */ jsx6("pre", { children: formatOutput(content) }) })
     ] })
   ] });
 }
 function ToolCallDisplay({ toolPart, className = "" }) {
-  const [isExpanded, setIsExpanded] = useState5(false);
+  const [isExpanded, setIsExpanded] = useState6(false);
   const toolName = "toolName" in toolPart ? toolPart.toolName : toolPart.type.replace("tool-", "");
   const state = "state" in toolPart ? toolPart.state : "pending";
   const hasOutput = state === "output-available" && "output" in toolPart && toolPart.output !== void 0;
@@ -25706,23 +25910,23 @@ function ToolCallDisplay({ toolPart, className = "" }) {
   const canExpand = hasInput || hasOutput;
   const renderStatusIcon = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx5("span", { className: "tool-call-spinner" });
+      return /* @__PURE__ */ jsx6("span", { className: "tool-call-spinner" });
     }
     const borderClass = hasError ? "tool-call-status-icon--error" : "";
-    return /* @__PURE__ */ jsx5("span", { className: `tool-call-status-icon ${borderClass}`, children: hasError ? /* @__PURE__ */ jsxs4("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--error", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
-      /* @__PURE__ */ jsx5("line", { x1: "5", y1: "5", x2: "11", y2: "11" }),
-      /* @__PURE__ */ jsx5("line", { x1: "11", y1: "5", x2: "5", y2: "11" })
-    ] }) : /* @__PURE__ */ jsx5("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--success", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("polyline", { points: "4,8 7,11 12,5" }) }) });
+    return /* @__PURE__ */ jsx6("span", { className: `tool-call-status-icon ${borderClass}`, children: hasError ? /* @__PURE__ */ jsxs5("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--error", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx6("line", { x1: "5", y1: "5", x2: "11", y2: "11" }),
+      /* @__PURE__ */ jsx6("line", { x1: "11", y1: "5", x2: "5", y2: "11" })
+    ] }) : /* @__PURE__ */ jsx6("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--success", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("polyline", { points: "4,8 7,11 12,5" }) }) });
   };
-  return /* @__PURE__ */ jsxs4("div", { className: `tool-call-item ${className}`, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "tool-call-header", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: `tool-call-item ${className}`, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "tool-call-header", children: [
       renderStatusIcon(),
-      /* @__PURE__ */ jsxs4("span", { className: "tool-call-label", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "tool-call-label", children: [
         isLoading ? "Calling" : "Called",
         " ",
-        /* @__PURE__ */ jsx5("code", { children: toolName })
+        /* @__PURE__ */ jsx6("code", { children: toolName })
       ] }),
-      canExpand && /* @__PURE__ */ jsx5(
+      canExpand && /* @__PURE__ */ jsx6(
         "button",
         {
           className: "tool-call-toggle",
@@ -25731,11 +25935,11 @@ function ToolCallDisplay({ toolPart, className = "" }) {
           children: isExpanded ? "HIDE" : "SHOW"
         }
       ),
-      hasError && /* @__PURE__ */ jsx5("span", { className: "tool-call-error", children: "ERROR" })
+      hasError && /* @__PURE__ */ jsx6("span", { className: "tool-call-error", children: "ERROR" })
     ] }),
-    isExpanded && canExpand && /* @__PURE__ */ jsxs4("div", { className: "tool-call-details", children: [
-      hasInput && /* @__PURE__ */ jsx5(CollapsibleSection, { label: "IN", content: input }),
-      hasOutput && /* @__PURE__ */ jsx5(CollapsibleSection, { label: "OUT", content: output })
+    isExpanded && canExpand && /* @__PURE__ */ jsxs5("div", { className: "tool-call-details", children: [
+      hasInput && /* @__PURE__ */ jsx6(CollapsibleSection, { label: "IN", content: input }),
+      hasOutput && /* @__PURE__ */ jsx6(CollapsibleSection, { label: "OUT", content: output })
     ] })
   ] });
 }
@@ -25754,7 +25958,7 @@ function formatOutput(output) {
 
 // lib/chat/components/WidgetRenderer.tsx
 import hash2 from "object-hash";
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4 } from "react";
 
 // lib/ui-widgets.ts
 var SDK_WIDGET_MARKER = /* @__PURE__ */ Symbol("__isSDKWidget");
@@ -25770,7 +25974,7 @@ function createSDKWidget(widget) {
 var createWidget = (widget) => widget;
 
 // lib/chat/components/WidgetRenderer.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function renderError(container, message) {
   container.innerHTML = "";
   const errorDiv = document.createElement("div");
@@ -25778,7 +25982,7 @@ function renderError(container, message) {
   errorDiv.textContent = message;
   container.appendChild(errorDiv);
 }
-function WidgetRenderer({ widget, payload, enriched }) {
+function WidgetRenderer({ widget, payload, enriched, messageContext }) {
   const containerRef = useRef4(null);
   const rootRef = useRef4(null);
   const customerReactDOMRef = useRef4(void 0);
@@ -25789,7 +25993,7 @@ function WidgetRenderer({ widget, payload, enriched }) {
   }
   const payloadHash = useMemo3(() => hash2(payload ?? {}), [payload]);
   const enrichedHash = useMemo3(() => hash2(enriched ?? {}), [enriched]);
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
       if (rootRef.current) {
         rootRef.current.unmount();
@@ -25806,7 +26010,7 @@ function WidgetRenderer({ widget, payload, enriched }) {
       isRenderedRef.current = false;
     };
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isSdk) return;
     try {
       if (!containerRef.current) {
@@ -25815,7 +26019,7 @@ function WidgetRenderer({ widget, payload, enriched }) {
       }
       let element;
       try {
-        element = widget.render(payload, enriched);
+        element = widget.render(payload, enriched, { messageContext });
       } catch (error48) {
         console.error(`Widget "${widget.widgetType}" render function threw:`, error48);
         renderError(containerRef.current, `Widget render error: ${widget.widgetType}`);
@@ -25876,39 +26080,52 @@ To fix, add your ReactDOM to the widget config:
         renderError(containerRef.current, `Widget system error: ${widget.widgetType}`);
       }
     }
-  }, [isSdk, widget, payload, enriched, payloadHash, enrichedHash]);
+  }, [isSdk, widget, payload, enriched, payloadHash, enrichedHash, messageContext]);
   if (isSdk) {
     try {
-      const element = widget.render(payload, enriched);
-      return /* @__PURE__ */ jsx6(Fragment3, { children: element });
+      const element = widget.render(payload, enriched, { messageContext });
+      return /* @__PURE__ */ jsx7(Fragment3, { children: element });
     } catch (error48) {
       console.error(`SDK widget "${widget.widgetType}" render threw:`, error48);
       const errorMessage = error48 instanceof Error ? error48.message : String(error48);
-      return /* @__PURE__ */ jsxs5("div", { className: "widget-error", title: errorMessage, children: [
+      return /* @__PURE__ */ jsxs6("div", { className: "widget-error", title: errorMessage, children: [
         "Widget error: ",
         widget.widgetType
       ] });
     }
   }
-  return /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "widget-customer-root" });
+  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "widget-customer-root" });
 }
 
 // lib/chat/renderers/MessageRenderer.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function FormattedMarkdownComponent({ children }) {
   const MarkdownComponent = ReactMarkdown;
-  return /* @__PURE__ */ jsx7(MarkdownComponent, { remarkPlugins: [remarkGfm], children: children.replace(/\n\n/gi, "\n\n \n\n") });
+  return /* @__PURE__ */ jsx8(MarkdownComponent, { remarkPlugins: [remarkGfm], children: children.replace(/\n\n/gi, "\n\n \n\n") });
 }
-var FormattedMarkdown = React4.memo(FormattedMarkdownComponent);
+var FormattedMarkdown = React5.memo(FormattedMarkdownComponent);
 function MessageRenderer({
   message,
   widgets,
   readonly: readonly2 = false,
   displayMode = "brief",
   tagExpansion,
-  className
+  className,
+  feedback
 }) {
-  const renderPart = useCallback4(
+  const messageContext = useMemo4(() => {
+    if (!feedback) return void 0;
+    return {
+      messageId: message.id,
+      getFeedback: feedback.getFeedback,
+      submitFeedback: feedback.submitFeedback
+    };
+  }, [message.id, feedback]);
+  const existingFeedback = useMemo4(
+    () => feedback?.getFeedback() ?? null,
+    [feedback]
+  );
+  const renderPart = useCallback5(
     (part, key) => {
       if (part == null) {
         return null;
@@ -25916,42 +26133,43 @@ function MessageRenderer({
       if (part.type === "text") {
         const trimmed = part.text?.trim();
         if (!trimmed) return null;
-        return /* @__PURE__ */ jsx7("div", { className: "chat-widget__markdown", children: /* @__PURE__ */ jsx7(FormattedMarkdown, { children: trimmed }) }, key);
+        return /* @__PURE__ */ jsx8("div", { className: "chat-widget__markdown", children: /* @__PURE__ */ jsx8(FormattedMarkdown, { children: trimmed }) }, key);
       }
       if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
-        return /* @__PURE__ */ jsx7(ToolCallDisplay, { toolPart: part }, key);
+        return /* @__PURE__ */ jsx8(ToolCallDisplay, { toolPart: part }, key);
       }
       if (part.type === "data-ui") {
         const dataPart = part;
         const uiWidgets = dataPart.data;
         if (!Array.isArray(uiWidgets)) return null;
         if (!widgets || widgets.length === 0) {
-          return /* @__PURE__ */ jsxs6("div", { className: "text-muted-foreground text-sm italic", children: [
+          return /* @__PURE__ */ jsxs7("div", { className: "text-muted-foreground text-sm italic", children: [
             "[UI Widget: ",
             uiWidgets.map((w) => w.widgetType || "unknown").join(", "),
             "]"
           ] }, key);
         }
-        return /* @__PURE__ */ jsx7(React4.Fragment, { children: uiWidgets.map((widget, idx) => {
+        return /* @__PURE__ */ jsx8(React5.Fragment, { children: uiWidgets.map((widget, idx) => {
           const widgetDef = widgets.find((w) => w.widgetType === widget.widgetType);
           if (!widgetDef) {
-            return /* @__PURE__ */ jsxs6("span", { children: [
+            return /* @__PURE__ */ jsxs7("span", { children: [
               "[Unknown widget: ",
               widget.widgetType,
               "]"
             ] }, `${key}-widget-${idx}`);
           }
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx8(
             "div",
             {
               className: "chat-widget__widget",
               inert: readonly2 ? true : void 0,
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 WidgetRenderer,
                 {
                   widget: widgetDef,
                   payload: widget.payload,
-                  enriched: widget.enriched ?? {}
+                  enriched: widget.enriched ?? {},
+                  messageContext: messageContext ?? void 0
                 }
               )
             },
@@ -25961,12 +26179,12 @@ function MessageRenderer({
       }
       return null;
     },
-    [widgets, readonly2]
+    [widgets, readonly2, messageContext]
   );
-  const renderGroup = useCallback4(
+  const renderGroup = useCallback5(
     (groupName, key, children) => {
       const isExpanded = tagExpansion?.state.get(key) ?? true;
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         TagGroupDisplay,
         {
           tagId: groupName,
@@ -25980,236 +26198,32 @@ function MessageRenderer({
     [tagExpansion]
   );
   const DisplayMode = displayMode === "brief" ? BriefDisplayMode : FullDisplayMode;
-  return /* @__PURE__ */ jsx7("div", { className, children: /* @__PURE__ */ jsx7(
-    DisplayMode,
-    {
-      sections: message.sections,
-      messageId: message.id,
-      renderPart,
-      renderGroup
-    }
-  ) });
-}
-
-// lib/chat/components/MessageFeedback.css
-styleInject(".chat-widget__feedback {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin-top: 0.35rem;\n}\n.chat-widget__feedback-button {\n  border: none;\n  background: transparent;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  color: #9ca3af;\n  cursor: pointer;\n  border-radius: 0.35rem;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-button:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.05);\n  color: #6b7280;\n}\n.chat-widget__feedback-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.chat-widget__feedback-button--positive.chat-widget__feedback-button--selected {\n  color: #22c55e;\n  background: rgba(34, 197, 94, 0.1);\n}\n.chat-widget__feedback-button--negative.chat-widget__feedback-button--selected {\n  color: #ef4444;\n  background: rgba(239, 68, 68, 0.1);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--selected {\n  color: var(--chat-primary, #3b82f6);\n  background: rgba(59, 130, 246, 0.1);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--has-content {\n  color: var(--chat-primary, #3b82f6);\n}\n.chat-widget__feedback-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__feedback-comment-section {\n  margin-top: 0.75rem;\n  background: var(--chat-background, #ffffff);\n  border: 1px solid var(--chat-border, #e5e7eb);\n  border-radius: 0.5rem;\n  padding: 0.75rem;\n  width: 100%;\n  max-width: 400px;\n}\n.chat-widget__feedback-comment-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: var(--chat-assistant-text, #111827);\n}\n.chat-widget__feedback-comment-required {\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #ef4444;\n  background: rgba(239, 68, 68, 0.1);\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n}\n.chat-widget__feedback-textarea {\n  width: 100%;\n  min-height: 120px;\n  padding: 0.625rem;\n  border: 1px solid var(--chat-border, #e5e7eb);\n  border-radius: 0.35rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  resize: vertical;\n  color: var(--chat-input-text, #111827);\n  background: var(--chat-input-bg, #ffffff);\n  line-height: 1.5;\n}\n.chat-widget__feedback-textarea:focus {\n  outline: none;\n  border-color: var(--chat-primary, #3b82f6);\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n}\n.chat-widget__feedback-textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder, #6b7280);\n}\n.chat-widget__feedback-textarea::placeholder {\n  color: var(--chat-input-placeholder, #6b7280);\n}\n.chat-widget__feedback-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n}\n.chat-widget__feedback-cancel,\n.chat-widget__feedback-submit {\n  padding: 0.5rem 1rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border-radius: 0.35rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-cancel {\n  background: transparent;\n  border: 1px solid var(--chat-border, #e5e7eb);\n  color: #6b7280;\n}\n.chat-widget__feedback-cancel:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.chat-widget__feedback-submit {\n  background: var(--chat-primary, #3b82f6);\n  border: none;\n  color: var(--chat-primary-text, #ffffff);\n}\n.chat-widget__feedback-submit:hover:not(:disabled) {\n  background: var(--chat-primary-hover, #2563eb);\n}\n.chat-widget__feedback-submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__feedback-wrapper {\n  position: relative;\n}\n");
-
-// lib/chat/components/MessageFeedback.tsx
-import { MessageSquare, ThumbsDown, ThumbsUp } from "lucide-react";
-import { useCallback as useCallback5, useEffect as useEffect5, useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var classNames = {
-  wrapper: "chat-widget__feedback-wrapper",
-  container: "chat-widget__feedback",
-  button: "chat-widget__feedback-button",
-  buttonPositive: "chat-widget__feedback-button--positive",
-  buttonNegative: "chat-widget__feedback-button--negative",
-  buttonComment: "chat-widget__feedback-button--comment",
-  buttonSelected: "chat-widget__feedback-button--selected",
-  buttonHasContent: "chat-widget__feedback-button--has-content",
-  icon: "chat-widget__feedback-icon",
-  commentSection: "chat-widget__feedback-comment-section",
-  commentHeader: "chat-widget__feedback-comment-header",
-  commentRequired: "chat-widget__feedback-comment-required",
-  textarea: "chat-widget__feedback-textarea",
-  actions: "chat-widget__feedback-actions",
-  cancelButton: "chat-widget__feedback-cancel",
-  submitButton: "chat-widget__feedback-submit"
-};
-var MessageFeedback = ({
-  messageId,
-  existingRating,
-  existingComment,
-  isSubmitting,
-  requireCommentForNegative = false,
-  onSubmit
-}) => {
-  const [savedRating, setSavedRating] = useState6(existingRating ?? null);
-  const [savedComment, setSavedComment] = useState6(existingComment ?? "");
-  const [pendingRating, setPendingRating] = useState6(null);
-  const [showCommentBox, setShowCommentBox] = useState6(false);
-  const [commentText, setCommentText] = useState6(existingComment ?? "");
-  useEffect5(() => {
-    if (existingRating) {
-      setSavedRating(existingRating);
-    }
-    if (existingComment !== void 0) {
-      setSavedComment(existingComment);
-      setCommentText(existingComment);
-    }
-  }, [existingRating, existingComment]);
-  const handlePositiveClick = useCallback5(() => {
-    setSavedRating("positive");
-    setPendingRating(null);
-    onSubmit(messageId, "positive", commentText.trim() || void 0);
-  }, [messageId, commentText, onSubmit]);
-  const handleNegativeClick = useCallback5(() => {
-    if (requireCommentForNegative) {
-      setPendingRating("negative");
-      setShowCommentBox(true);
-    } else {
-      setSavedRating("negative");
-      setPendingRating(null);
-      onSubmit(messageId, "negative", commentText.trim() || void 0);
-    }
-  }, [messageId, commentText, requireCommentForNegative, onSubmit]);
-  const handleCommentToggle = useCallback5(() => {
-    if (showCommentBox) {
-      setShowCommentBox(false);
-      if (pendingRating === "negative" && requireCommentForNegative) {
-        setPendingRating(null);
-      }
-      setCommentText(savedComment);
-    } else {
-      setShowCommentBox(true);
-    }
-  }, [showCommentBox, pendingRating, requireCommentForNegative, savedComment]);
-  const handleCommentCancel = useCallback5(() => {
-    setShowCommentBox(false);
-    setCommentText(savedComment);
-    if (pendingRating === "negative" && requireCommentForNegative) {
-      setPendingRating(null);
-    }
-  }, [pendingRating, requireCommentForNegative, savedComment]);
-  const handleCommentSubmit = useCallback5(() => {
-    const ratingToSubmit = pendingRating ?? savedRating;
-    if (!ratingToSubmit) {
-      return;
-    }
-    if (ratingToSubmit === "negative" && requireCommentForNegative && !commentText.trim()) {
-      return;
-    }
-    onSubmit(messageId, ratingToSubmit, commentText.trim() || void 0);
-    setSavedRating(ratingToSubmit);
-    setSavedComment(commentText.trim());
-    setPendingRating(null);
-    setShowCommentBox(false);
-  }, [messageId, pendingRating, savedRating, commentText, requireCommentForNegative, onSubmit]);
-  const displayRating = pendingRating ?? savedRating;
-  const isPositiveSelected = displayRating === "positive";
-  const isNegativeSelected = displayRating === "negative";
-  const isCommentRequired = isNegativeSelected && requireCommentForNegative;
-  const canSubmitComment = !isCommentRequired || commentText.trim().length > 0;
-  const hasComment = savedComment.length > 0;
-  return /* @__PURE__ */ jsxs7("div", { className: classNames.wrapper, children: [
-    /* @__PURE__ */ jsxs7("div", { className: classNames.container, children: [
-      /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          className: `${classNames.button} ${classNames.buttonPositive} ${isPositiveSelected ? classNames.buttonSelected : ""}`,
-          onClick: handlePositiveClick,
-          disabled: isSubmitting,
-          title: "Good response",
-          "aria-label": "Mark as good response",
-          children: /* @__PURE__ */ jsx8(ThumbsUp, { className: classNames.icon })
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          className: `${classNames.button} ${classNames.buttonNegative} ${isNegativeSelected ? classNames.buttonSelected : ""}`,
-          onClick: handleNegativeClick,
-          disabled: isSubmitting,
-          title: "Could be improved",
-          "aria-label": "Mark as could be improved",
-          children: /* @__PURE__ */ jsx8(ThumbsDown, { className: classNames.icon })
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          className: `${classNames.button} ${classNames.buttonComment} ${showCommentBox ? classNames.buttonSelected : ""} ${hasComment ? classNames.buttonHasContent : ""}`,
-          onClick: handleCommentToggle,
-          disabled: isSubmitting,
-          title: "Add comment",
-          "aria-label": "Add comment",
-          children: /* @__PURE__ */ jsx8(MessageSquare, { className: classNames.icon })
-        }
-      )
-    ] }),
-    showCommentBox && /* @__PURE__ */ jsxs7("div", { className: classNames.commentSection, children: [
-      /* @__PURE__ */ jsxs7("div", { className: classNames.commentHeader, children: [
-        /* @__PURE__ */ jsx8("span", { children: "Add a comment" }),
-        isCommentRequired && /* @__PURE__ */ jsx8("span", { className: classNames.commentRequired, children: "Required" })
-      ] }),
-      /* @__PURE__ */ jsx8(
-        "textarea",
-        {
-          className: classNames.textarea,
-          placeholder: isNegativeSelected ? "What could be improved?" : "Share your thoughts...",
-          value: commentText,
-          onChange: (e) => setCommentText(e.target.value),
-          rows: 5
-        }
-      ),
-      /* @__PURE__ */ jsxs7("div", { className: classNames.actions, children: [
-        /* @__PURE__ */ jsx8(
-          "button",
-          {
-            type: "button",
-            className: classNames.cancelButton,
-            onClick: handleCommentCancel,
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx8(
-          "button",
-          {
-            type: "button",
-            className: classNames.submitButton,
-            onClick: handleCommentSubmit,
-            disabled: isSubmitting || !canSubmitComment || !displayRating,
-            children: displayRating ? "Save" : "Select Rating First"
-          }
-        )
-      ] })
-    ] })
-  ] });
-};
-
-// lib/chat/renderers/MessageWithFeedbackRenderer.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function MessageWithFeedbackRenderer({
-  message,
-  widgets,
-  readonly: readonly2,
-  displayMode,
-  tagExpansion,
-  className,
-  feedback
-}) {
-  const showFeedbackButtons = !readonly2 && feedback?.enabled && feedback?.showButtons && message.role === "assistant" && message.id !== "welcome-message";
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx9(
-      MessageRenderer,
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(
+      DisplayMode,
       {
-        message,
-        widgets,
-        readonly: readonly2,
-        displayMode,
-        tagExpansion,
-        className
+        sections: message.sections,
+        messageId: message.id,
+        renderPart,
+        renderGroup
       }
-    ),
-    showFeedbackButtons && feedback?.onSubmit && /* @__PURE__ */ jsx9(
+    ) }),
+    !readonly2 && feedback && /* @__PURE__ */ jsx8(
       MessageFeedback,
       {
         messageId: message.id,
-        existingRating: feedback.existingRating,
-        existingComment: feedback.existingComment,
-        isSubmitting: feedback.submitting,
+        existingRating: existingFeedback?.rating,
+        existingComment: existingFeedback?.improvementText,
+        isSubmitting: feedback.loading,
         requireCommentForNegative: feedback.requireCommentForNegative,
-        onSubmit: (messageId, rating, comment) => feedback.onSubmit(rating, comment)
+        onSubmit: (_, params) => feedback.submitFeedback(params)
       }
     )
   ] });
 }
 
 // lib/chat/ChatWidget.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var classNames2 = {
   container: "chat-widget",
   header: "chat-widget__header",
@@ -26289,11 +26303,11 @@ var ChatWidget = forwardRef(function ChatWidget2({
   widgets,
   feedback
 }, ref) {
-  const theme = useMemo4(
+  const theme = useMemo5(
     () => ({ ...defaultTheme, ...styleProps || {} }),
     [styleProps]
   );
-  const themeVariables = useMemo4(
+  const themeVariables = useMemo5(
     () => ({
       "--chat-primary": theme.primaryColor,
       "--chat-primary-text": theme.primaryTextColor,
@@ -26331,7 +26345,7 @@ var ChatWidget = forwardRef(function ChatWidget2({
   } = useChat({
     api,
     threadId,
-    agentId: agentId ?? void 0,
+    agentId,
     agentVersion,
     agentExecutionId: agentExecutionId ?? void 0,
     dataContext,
@@ -26350,21 +26364,14 @@ var ChatWidget = forwardRef(function ChatWidget2({
   const feedbackEnabled = feedback?.enabled !== false;
   const {
     submitFeedback,
-    getFeedbackForMessage,
+    getFeedbackForMessage: getFeedback,
     isSubmitting: feedbackSubmitting
   } = useFeedback({
     api,
     threadId,
-    agentId: agentId ?? void 0,
-    agentVersion,
-    agentExecutionId: agentExecutionId ?? void 0
+    agentId,
+    agentVersion
   });
-  const handleFeedbackSubmit = useCallback6(
-    (messageId, rating, improvementText) => {
-      submitFeedback({ messageId, rating, improvementText });
-    },
-    [submitFeedback]
-  );
   const [tagExpansionState, setTagExpansionState] = useState7(/* @__PURE__ */ new Map());
   const handleTagToggle = useCallback6((messageId, tagId, currentlyExpanded) => {
     suppressScrollRef.current = true;
@@ -26375,7 +26382,7 @@ var ChatWidget = forwardRef(function ChatWidget2({
       return next;
     });
   }, []);
-  const voiceConfig = useMemo4(() => {
+  const voiceConfig = useMemo5(() => {
     if (!voice || voice.enabled === false || !voice.url) {
       return null;
     }
@@ -26498,15 +26505,15 @@ var ChatWidget = forwardRef(function ChatWidget2({
       console.error("Failed to register chat widgets", err);
     });
   }, [api, threadId, widgets, onAuthError]);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: cn(classNames2.container, className),
       style: themeVariables,
       "data-chat-widget": "",
       children: [
-        title && /* @__PURE__ */ jsx10("div", { className: classNames2.header, children: /* @__PURE__ */ jsx10("h3", { className: classNames2.headerTitle, children: title }) }),
-        /* @__PURE__ */ jsxs9(
+        title && /* @__PURE__ */ jsx9("div", { className: classNames2.header, children: /* @__PURE__ */ jsx9("h3", { className: classNames2.headerTitle, children: title }) }),
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             className: classNames2.messagesContainer,
@@ -26514,26 +26521,25 @@ var ChatWidget = forwardRef(function ChatWidget2({
             onScroll: handleScroll,
             children: [
               messages.map((message, index) => {
-                const isLastMessage = index === messages.length - 1;
-                const showFeedback = !(status === "streaming" && isLastMessage);
-                const feedbackData = getFeedbackForMessage(message.id);
                 const isUser = message.role === "user";
-                return /* @__PURE__ */ jsx10("div", { className: classNames2.messageWrapper, children: /* @__PURE__ */ jsx10(
+                const isLastMessage = index === messages.length - 1;
+                const showFeedback = feedbackEnabled && !isUser && !(status === "streaming" && isLastMessage);
+                return /* @__PURE__ */ jsx9("div", { className: classNames2.messageWrapper, children: /* @__PURE__ */ jsx9(
                   "div",
                   {
                     className: cn(
                       classNames2.messageRow,
                       isUser ? classNames2.userMessageRow : classNames2.assistantMessageRow
                     ),
-                    children: /* @__PURE__ */ jsx10(
+                    children: /* @__PURE__ */ jsx9(
                       "div",
                       {
                         className: cn(
                           classNames2.messageBubble,
                           isUser ? classNames2.userMessage : classNames2.assistantMessage
                         ),
-                        children: /* @__PURE__ */ jsx10(
-                          MessageWithFeedbackRenderer,
+                        children: /* @__PURE__ */ jsx9(
+                          MessageRenderer,
                           {
                             message,
                             widgets,
@@ -26542,15 +26548,12 @@ var ChatWidget = forwardRef(function ChatWidget2({
                               state: tagExpansionState,
                               onToggle: (tagId) => handleTagToggle(message.id, tagId, tagExpansionState.get(`${message.id}-group-${tagId}`) ?? true)
                             },
-                            feedback: {
-                              enabled: feedbackEnabled,
-                              showButtons: showFeedback,
-                              existingRating: feedbackData?.rating,
-                              existingComment: feedbackData?.comment,
-                              submitting: feedbackSubmitting === message.id,
+                            feedback: showFeedback ? {
+                              loading: feedbackSubmitting === message.id,
                               requireCommentForNegative: feedback?.requireCommentForNegative,
-                              onSubmit: (rating, comment) => handleFeedbackSubmit(message.id, rating, comment)
-                            }
+                              getFeedback: () => getFeedback(message.id),
+                              submitFeedback: (params) => submitFeedback(message.id, params)
+                            } : void 0
                           }
                         )
                       }
@@ -26558,17 +26561,17 @@ var ChatWidget = forwardRef(function ChatWidget2({
                   }
                 ) }, message.id);
               }),
-              status === "streaming" && /* @__PURE__ */ jsx10("div", { className: classNames2.loadingContainer, children: /* @__PURE__ */ jsx10("div", { className: classNames2.loadingBubble, children: /* @__PURE__ */ jsxs9("div", { className: classNames2.loadingDots, children: [
-                /* @__PURE__ */ jsx10("div", { className: classNames2.loadingDot }),
-                /* @__PURE__ */ jsx10("div", { className: classNames2.loadingDot, "data-delay": "1" }),
-                /* @__PURE__ */ jsx10("div", { className: classNames2.loadingDot, "data-delay": "2" })
+              status === "streaming" && /* @__PURE__ */ jsx9("div", { className: classNames2.loadingContainer, children: /* @__PURE__ */ jsx9("div", { className: classNames2.loadingBubble, children: /* @__PURE__ */ jsxs8("div", { className: classNames2.loadingDots, children: [
+                /* @__PURE__ */ jsx9("div", { className: classNames2.loadingDot }),
+                /* @__PURE__ */ jsx9("div", { className: classNames2.loadingDot, "data-delay": "1" }),
+                /* @__PURE__ */ jsx9("div", { className: classNames2.loadingDot, "data-delay": "2" })
               ] }) }) }),
-              /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx9("div", { ref: messagesEndRef })
             ]
           }
         ),
-        /* @__PURE__ */ jsx10("div", { className: classNames2.inputContainer, children: /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: classNames2.inputForm, children: [
-          /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9("div", { className: classNames2.inputContainer, children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: classNames2.inputForm, children: [
+          /* @__PURE__ */ jsx9(
             "textarea",
             {
               ref: textareaRef,
@@ -26581,7 +26584,7 @@ var ChatWidget = forwardRef(function ChatWidget2({
               className: classNames2.textarea
             }
           ),
-          /* @__PURE__ */ jsx10("div", { className: classNames2.toolbar, children: speechEnabled && /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx9("div", { className: classNames2.toolbar, children: speechEnabled && /* @__PURE__ */ jsx9(
             SpeechToTextButton,
             {
               className: classNames2.micButton,
@@ -26595,14 +26598,14 @@ var ChatWidget = forwardRef(function ChatWidget2({
               onListeningChange: setIsMicActive
             }
           ) }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
               onClick: status === "streaming" ? stop : handleSendMessage,
               disabled: status === "streaming" ? false : !input.trim() || status !== "ready",
               className: classNames2.submitButton,
-              children: status === "streaming" ? /* @__PURE__ */ jsx10(StopCircle, { className: classNames2.sendIcon }) : /* @__PURE__ */ jsx10(Send, { className: classNames2.sendIcon })
+              children: status === "streaming" ? /* @__PURE__ */ jsx9(StopCircle, { className: classNames2.sendIcon }) : /* @__PURE__ */ jsx9(Send, { className: classNames2.sendIcon })
             }
           )
         ] }) })
@@ -26616,8 +26619,8 @@ styleInject(".chat-popup__anchor {\n  position: fixed;\n  inset-block-end: 20px;
 
 // lib/chat/PopupChatWidget.tsx
 import { MessageSquare as MessageSquare2, X } from "lucide-react";
-import { useEffect as useEffect7, useMemo as useMemo5, useState as useState8 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useMemo as useMemo6, useState as useState8 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function PopupChatWidget({ anchor, ...props }) {
   const [isOpen, setIsOpen] = useState8(anchor?.initiallyOpen ?? false);
   const [hasOpened, setHasOpened] = useState8(anchor?.initiallyOpen ?? false);
@@ -26641,7 +26644,7 @@ function PopupChatWidget({ anchor, ...props }) {
   const anchorPositionClass = anchor?.position === "bottom-start" ? "chat-popup--start" : "chat-popup--end";
   const closeConfig = anchor?.closeButton ?? props.closeButton;
   const showClose = closeConfig?.show !== false;
-  const themeStyle = useMemo5(() => {
+  const themeStyle = useMemo6(() => {
     const primary = props.styles?.primaryColor ?? "#3b82f6";
     const primaryText = props.styles?.primaryTextColor ?? "#ffffff";
     const background = props.styles?.backgroundColor ?? "#ffffff";
@@ -26665,7 +26668,7 @@ function PopupChatWidget({ anchor, ...props }) {
       "--chat-header-text": headerText
     };
   }, [props.styles]);
-  const popupStyle = useMemo5(() => {
+  const popupStyle = useMemo6(() => {
     const size = props.popupSize ?? {};
     return {
       width: size.width ?? "600px",
@@ -26674,8 +26677,8 @@ function PopupChatWidget({ anchor, ...props }) {
       maxHeight: size.maxHeight ?? "calc(100vh - 140px)"
     };
   }, [props.popupSize]);
-  return /* @__PURE__ */ jsxs10("div", { style: themeStyle, children: [
-    /* @__PURE__ */ jsx11("div", { className: cn("chat-popup__anchor", anchorPositionClass), children: anchor?.render ? anchor.render({ isOpen: openResolved, toggle: handleToggle }) : !openResolved && /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9("div", { style: themeStyle, children: [
+    /* @__PURE__ */ jsx10("div", { className: cn("chat-popup__anchor", anchorPositionClass), children: anchor?.render ? anchor.render({ isOpen: openResolved, toggle: handleToggle }) : !openResolved && /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -26684,12 +26687,12 @@ function PopupChatWidget({ anchor, ...props }) {
         "aria-expanded": isOpen,
         "aria-label": anchor?.label ?? "Open chat",
         children: [
-          /* @__PURE__ */ jsx11(MessageSquare2, { className: "chat-popup__anchor-icon" }),
-          /* @__PURE__ */ jsx11("span", { children: anchor?.label ?? "Chat" })
+          /* @__PURE__ */ jsx10(MessageSquare2, { className: "chat-popup__anchor-icon" }),
+          /* @__PURE__ */ jsx10("span", { children: anchor?.label ?? "Chat" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx10(
       "div",
       {
         className: cn(
@@ -26697,27 +26700,27 @@ function PopupChatWidget({ anchor, ...props }) {
           anchorPositionClass,
           openResolved ? "chat-popup__panel--open" : "chat-popup__panel--closed"
         ),
-        children: /* @__PURE__ */ jsxs10("div", { className: "chat-popup__panel-inner", style: popupStyle, children: [
-          showClose && /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsxs9("div", { className: "chat-popup__panel-inner", style: popupStyle, children: [
+          showClose && /* @__PURE__ */ jsx10(
             "div",
             {
               className: cn(
                 "chat-popup__close",
                 closeConfig?.position === "top-start" ? "chat-popup__close--start" : "chat-popup__close--end"
               ),
-              children: closeConfig?.render ? closeConfig.render({ toggle: handleToggle }) : /* @__PURE__ */ jsx11(
+              children: closeConfig?.render ? closeConfig.render({ toggle: handleToggle }) : /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
                   className: "chat-popup__close-button",
                   onClick: handleToggle,
                   "aria-label": "Close chat",
-                  children: /* @__PURE__ */ jsx11(X, { className: "chat-popup__close-icon" })
+                  children: /* @__PURE__ */ jsx10(X, { className: "chat-popup__close-icon" })
                 }
               )
             }
           ),
-          hasOpened && /* @__PURE__ */ jsx11(ChatWidget, { ...props })
+          hasOpened && /* @__PURE__ */ jsx10(ChatWidget, { ...props })
         ] })
       }
     )
@@ -26725,7 +26728,9 @@ function PopupChatWidget({ anchor, ...props }) {
 }
 
 // lib/chat/widgets/VendorCards.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { MessageSquare as MessageSquare3, MessageSquareText as MessageSquareText2, ThumbsDown as ThumbsDown2, ThumbsUp as ThumbsUp2 } from "lucide-react";
+import React8 from "react";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var vendorCardsSchema = jsonSchema({
   type: "object",
   description: "displaying a list of vendor cards. Use this widget to represent data from CareNetwork vendor search tool.",
@@ -26751,7 +26756,7 @@ var vendorCardsSchema = jsonSchema({
           vendor_id: { type: "string" },
           notes: {
             type: "string",
-            description: "Why this vendor was recommended"
+            description: "Give 7-10 words on why this vendor was recommended"
           },
           vendorCoordinates: {
             type: "object",
@@ -26769,9 +26774,42 @@ var vendorCardsSchema = jsonSchema({
   },
   required: ["fromLocation", "fromCoordinates", "vendors"]
 });
-function VendorCards({ payload, enriched, onAddToList }) {
+function VendorCards({ payload, enriched, onAddToList, onFeedback, existingFeedback }) {
+  const [feedbackState, setFeedbackState] = React8.useState({});
+  const initializedRef = React8.useRef(false);
+  React8.useEffect(() => {
+    if (!initializedRef.current && existingFeedback && existingFeedback.length > 0) {
+      initializedRef.current = true;
+      const initialState = {};
+      for (const note of existingFeedback) {
+        if (note.noteId) {
+          initialState[note.noteId] = {
+            rating: note.rating ?? null,
+            commentText: note.comment ?? null,
+            showComment: false
+          };
+        }
+      }
+      setFeedbackState(initialState);
+    }
+  }, [existingFeedback]);
+  const getFeedbackState = (vendorId) => {
+    return feedbackState[vendorId] || { rating: null, commentText: null, showComment: false };
+  };
+  const updateFeedbackState = (vendorId, updates) => {
+    setFeedbackState((prev) => ({
+      ...prev,
+      [vendorId]: { ...getFeedbackState(vendorId), ...updates }
+    }));
+  };
+  const removeFeedbackState = (vendorId) => {
+    setFeedbackState((prev) => {
+      const { [vendorId]: _, ...rest } = prev;
+      return rest;
+    });
+  };
   if (!enriched || !enriched.vendorDetails || !enriched.distanceMatrix) {
-    return /* @__PURE__ */ jsx12("div", { children: "Outdated vendor-cards widget" });
+    return /* @__PURE__ */ jsx11("div", { children: "Outdated vendor-cards widget" });
   }
   const { vendorDetails, distanceMatrix } = enriched;
   const vendorData = vendorDetails?.data ?? {};
@@ -26780,7 +26818,7 @@ function VendorCards({ payload, enriched, onAddToList }) {
     const miles = meters / 1609.34;
     return miles < 0.1 ? "< 0.1 mi" : `${miles.toFixed(1)} mi`;
   };
-  return /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: payload.vendors.map((v, index) => {
+  return /* @__PURE__ */ jsx11("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: payload.vendors.map((v, index) => {
     const data = vendorData[v.vendor_id];
     const name21 = data?.names?.[0]?.value ?? "Unknown";
     const address = data?.location?.address;
@@ -26796,7 +26834,7 @@ function VendorCards({ payload, enriched, onAddToList }) {
     const careLocationType = subtypes.includes("In-Home") ? "In-Home" : subtypes.includes("In-Center") ? "In-Center" : null;
     const backgroundCheckStatus = data?.references_and_background_check?.background_check_status?.toLowerCase();
     const hasBackgroundCheck = backgroundCheckStatus === "clear" || backgroundCheckStatus === "completed";
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         style: {
@@ -26808,12 +26846,13 @@ function VendorCards({ payload, enriched, onAddToList }) {
           border: "1px solid #e5e7eb",
           borderRadius: "0.5rem",
           boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
-          fontSize: "0.875rem"
+          fontSize: "0.875rem",
+          position: "relative"
         },
         children: [
-          /* @__PURE__ */ jsxs11("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-            /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-              /* @__PURE__ */ jsx12("div", { style: {
+          /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+              /* @__PURE__ */ jsx11("div", { style: {
                 width: "2rem",
                 height: "2rem",
                 borderRadius: "9999px",
@@ -26825,9 +26864,9 @@ function VendorCards({ payload, enriched, onAddToList }) {
                 fontSize: "0.875rem",
                 color: "#374151"
               }, children: name21.charAt(0).toUpperCase() }),
-              /* @__PURE__ */ jsx12("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name21 })
+              /* @__PURE__ */ jsx11("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name21 })
             ] }),
-            onAddToList && /* @__PURE__ */ jsx12(
+            onAddToList && /* @__PURE__ */ jsx11(
               "button",
               {
                 onClick: () => onAddToList(v.vendor_id),
@@ -26843,62 +26882,233 @@ function VendorCards({ payload, enriched, onAddToList }) {
               }
             )
           ] }),
-          (reviewCount || cnScore) && /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
-            avgRating && /* @__PURE__ */ jsxs11(Fragment5, { children: [
-              /* @__PURE__ */ jsx12("span", { style: { color: "#facc15" }, children: "\u2605" }),
-              /* @__PURE__ */ jsx12("span", { children: avgRating.toFixed(1) }),
-              reviewCount && /* @__PURE__ */ jsxs11("span", { style: { color: "#9ca3af" }, children: [
+          (reviewCount != null || cnScore != null) && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
+            avgRating != null && /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              /* @__PURE__ */ jsx11("span", { style: { color: "#facc15" }, children: "\u2605" }),
+              /* @__PURE__ */ jsx11("span", { children: avgRating.toFixed(1) }),
+              reviewCount != null && /* @__PURE__ */ jsxs10("span", { style: { color: "#9ca3af" }, children: [
                 "(",
                 reviewCount,
                 " reviews)"
               ] })
             ] }),
-            avgRating && cnScore ? /* @__PURE__ */ jsx12("span", { style: { color: "#9ca3af" }, children: "\u2022" }) : null,
-            cnScore ? /* @__PURE__ */ jsxs11("span", { children: [
+            avgRating != null && cnScore != null ? /* @__PURE__ */ jsx11("span", { style: { color: "#9ca3af" }, children: "\u2022" }) : null,
+            cnScore != null ? /* @__PURE__ */ jsxs10("span", { children: [
               "CN Score: ",
               cnScore
             ] }) : null
           ] }),
-          careLocationType && /* @__PURE__ */ jsx12("div", { style: { color: "#6b7280" }, children: careLocationType }),
-          address && /* @__PURE__ */ jsx12("div", { style: { color: "#6b7280" }, children: address }),
-          distance && /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
-            /* @__PURE__ */ jsx12("span", { children: "\u{1F4CD}" }),
-            /* @__PURE__ */ jsxs11("span", { children: [
+          careLocationType && /* @__PURE__ */ jsx11("div", { style: { color: "#6b7280" }, children: careLocationType }),
+          address && /* @__PURE__ */ jsx11("div", { style: { color: "#6b7280" }, children: address }),
+          distance && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
+            /* @__PURE__ */ jsx11("span", { children: "\u{1F4CD}" }),
+            /* @__PURE__ */ jsxs10("span", { children: [
               distance,
               " from ",
               payload.fromLocation
             ] })
           ] }),
-          hourlyRate && /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
-            /* @__PURE__ */ jsx12("span", { children: "\u{1F4B0}" }),
-            /* @__PURE__ */ jsxs11("span", { children: [
+          hourlyRate && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
+            /* @__PURE__ */ jsx11("span", { children: "\u{1F4B0}" }),
+            /* @__PURE__ */ jsxs10("span", { children: [
               "Rate: $",
               hourlyRate,
               "/hr"
             ] })
           ] }),
-          v.notes && /* @__PURE__ */ jsxs11("div", { style: { color: "#374151", marginTop: "0.4rem" }, children: [
-            /* @__PURE__ */ jsx12("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
-            /* @__PURE__ */ jsx12("strong", { children: "Recommendation notes" }),
-            /* @__PURE__ */ jsx12("div", { style: { marginLeft: "1.25rem", marginTop: "0.25rem", color: "#6b7280" }, children: v.notes })
+          v.notes && /* @__PURE__ */ jsxs10("div", { style: { color: "#374151", marginTop: "0.4rem" }, children: [
+            /* @__PURE__ */ jsx11("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
+            /* @__PURE__ */ jsx11("strong", { children: "Recommendation notes" }),
+            /* @__PURE__ */ jsx11("div", { style: { marginLeft: "1.25rem", marginTop: "0.25rem", color: "#6b7280" }, children: v.notes })
           ] }),
-          /* @__PURE__ */ jsxs11("div", { style: {
-            display: "flex",
-            flexWrap: "wrap",
-            gap: "0.5rem",
-            marginTop: "0.25rem",
-            paddingTop: "0.5rem",
-            borderTop: "1px solid #f3f4f6"
-          }, children: [
-            verification?.verified && /* @__PURE__ */ jsxs11("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
-              /* @__PURE__ */ jsx12("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
-              " Wellthy Verified"
-            ] }),
-            hasBackgroundCheck && /* @__PURE__ */ jsxs11("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
-              /* @__PURE__ */ jsx12("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
-              " Background check"
-            ] })
-          ] })
+          (() => {
+            const state = getFeedbackState(v.vendor_id);
+            const isPositiveSelected = state.rating === "positive";
+            const isNegativeSelected = state.rating === "negative";
+            const handleRatingClick = (rating) => {
+              const currentState = getFeedbackState(v.vendor_id);
+              if (currentState.rating === rating) {
+                removeFeedbackState(v.vendor_id);
+                onFeedback?.(v.vendor_id, {});
+              } else {
+                updateFeedbackState(v.vendor_id, { rating });
+                onFeedback?.(v.vendor_id, { rating, vendorId: v.vendor_id, vendorName: name21 });
+              }
+            };
+            const handleCommentToggle = () => {
+              const currentState = getFeedbackState(v.vendor_id);
+              updateFeedbackState(v.vendor_id, { showComment: !currentState.showComment });
+            };
+            const handleCommentSubmit = () => {
+              const currentState = getFeedbackState(v.vendor_id);
+              const trimmedComment = currentState.commentText?.trim();
+              if (trimmedComment) {
+                updateFeedbackState(v.vendor_id, { showComment: false, commentText: trimmedComment });
+                onFeedback?.(v.vendor_id, { comment: trimmedComment, vendorId: v.vendor_id, vendorName: name21 });
+              }
+            };
+            return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              /* @__PURE__ */ jsxs10("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "0.5rem",
+                // marginTop: '0.25rem',
+                alignItems: "center",
+                minHeight: "1.75rem"
+              }, children: [
+                verification?.verified && /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+                  /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+                  " Wellthy Verified"
+                ] }),
+                hasBackgroundCheck && /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+                  /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+                  " Background check"
+                ] }),
+                onFeedback && /* @__PURE__ */ jsxs10("div", { style: {
+                  marginLeft: "auto",
+                  display: "flex",
+                  gap: "0.25rem",
+                  alignItems: "center"
+                }, children: [
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      onClick: () => handleRatingClick("positive"),
+                      style: {
+                        background: isPositiveSelected ? "rgba(34, 197, 94, 0.1)" : "transparent",
+                        border: "none",
+                        borderRadius: "0.35rem",
+                        padding: "0.25rem",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: isPositiveSelected ? "#22c55e" : "#9ca3af",
+                        width: "1.75rem",
+                        height: "1.75rem"
+                      },
+                      title: "This vendor was helpful",
+                      children: /* @__PURE__ */ jsx11(ThumbsUp2, { style: { width: "1rem", height: "1rem" } })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      onClick: () => handleRatingClick("negative"),
+                      style: {
+                        background: isNegativeSelected ? "rgba(239, 68, 68, 0.1)" : "transparent",
+                        border: "none",
+                        borderRadius: "0.35rem",
+                        padding: "0.25rem",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: isNegativeSelected ? "#ef4444" : "#9ca3af",
+                        width: "1.75rem",
+                        height: "1.75rem"
+                      },
+                      title: "This vendor was not helpful",
+                      children: /* @__PURE__ */ jsx11(ThumbsDown2, { style: { width: "1rem", height: "1rem" } })
+                    }
+                  ),
+                  (() => {
+                    const hasComment = !!state.commentText?.trim();
+                    const CommentIcon = hasComment ? MessageSquareText2 : MessageSquare3;
+                    return /* @__PURE__ */ jsx11(
+                      "button",
+                      {
+                        onClick: handleCommentToggle,
+                        style: {
+                          background: state.showComment ? "rgba(0, 0, 0, 0.05)" : "transparent",
+                          border: "none",
+                          borderRadius: "0.35rem",
+                          padding: "0.25rem",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: hasComment ? "#3b82f6" : state.showComment ? "#6b7280" : "#9ca3af",
+                          width: "1.75rem",
+                          height: "1.75rem"
+                        },
+                        title: hasComment ? "Edit comment" : "Add comment",
+                        children: /* @__PURE__ */ jsx11(CommentIcon, { style: { width: "1rem", height: "1rem" } })
+                      }
+                    );
+                  })()
+                ] })
+              ] }),
+              state.showComment && /* @__PURE__ */ jsx11("div", { style: {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                background: "#ffffff",
+                borderTop: "1px solid #e5e7eb",
+                borderRadius: "0 0 0.5rem 0.5rem",
+                padding: "0.75rem 1rem",
+                boxShadow: "0 -2px 8px rgba(0, 0, 0, 0.1)"
+              }, children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "0.5rem", alignItems: "flex-start" }, children: [
+                /* @__PURE__ */ jsx11(
+                  "textarea",
+                  {
+                    placeholder: "Share your thoughts about this vendor...",
+                    value: state.commentText ?? "",
+                    onChange: (e) => updateFeedbackState(v.vendor_id, { commentText: e.target.value }),
+                    rows: 2,
+                    style: {
+                      flex: 1,
+                      padding: "0.5rem",
+                      border: "1px solid #e5e7eb",
+                      borderRadius: "0.35rem",
+                      fontSize: "0.875rem",
+                      fontFamily: "inherit",
+                      resize: "none",
+                      minHeight: "50px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      onClick: handleCommentSubmit,
+                      disabled: !state.commentText?.trim(),
+                      style: {
+                        padding: "0.35rem 0.75rem",
+                        fontSize: "0.75rem",
+                        fontWeight: 500,
+                        borderRadius: "0.3rem",
+                        cursor: state.commentText?.trim() ? "pointer" : "not-allowed",
+                        background: "#3b82f6",
+                        border: "none",
+                        color: "#ffffff",
+                        opacity: state.commentText?.trim() ? 1 : 0.5
+                      },
+                      children: "Save"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      onClick: handleCommentToggle,
+                      style: {
+                        padding: "0.25rem 0.5rem",
+                        fontSize: "0.75rem",
+                        fontWeight: 500,
+                        background: "transparent",
+                        border: "none",
+                        color: "#9ca3af",
+                        cursor: "pointer"
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ] }) })
+            ] });
+          })()
         ]
       },
       v.vendor_id
@@ -26907,7 +27117,7 @@ function VendorCards({ payload, enriched, onAddToList }) {
 }
 
 // lib/chat/widgets/default-widgets.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultChatWidgets = [
   createSDKWidget({
     widgetType: "person-card",
@@ -26916,7 +27126,7 @@ var defaultChatWidgets = [
       photoUri: zod_default.string().optional().describe("URL to a photo of the person"),
       details: zod_default.record(zod_default.string(), zod_default.any()).optional()
     }).describe("showing a person card with name, photo and additional details"),
-    render: (payload) => /* @__PURE__ */ jsx13(
+    render: (payload) => /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -26929,8 +27139,8 @@ var defaultChatWidgets = [
           borderRadius: "0.5rem",
           boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
         },
-        children: /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
-          payload.photoUri && /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
+          payload.photoUri && /* @__PURE__ */ jsx12(
             "img",
             {
               src: payload.photoUri,
@@ -26945,14 +27155,14 @@ var defaultChatWidgets = [
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ jsxs12("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
-            payload.details ? /* @__PURE__ */ jsx13("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
-              /* @__PURE__ */ jsxs12("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
+          /* @__PURE__ */ jsxs11("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
+            payload.details ? /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
+              /* @__PURE__ */ jsxs11("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
                 key,
                 ":"
               ] }),
-              /* @__PURE__ */ jsx13("span", { style: { color: "#374151" }, children: String(value) })
+              /* @__PURE__ */ jsx12("span", { style: { color: "#374151" }, children: String(value) })
             ] }, key)) }) : null
           ] })
         ] })
@@ -26965,7 +27175,7 @@ var defaultChatWidgets = [
       uri: zod_default.string().url(),
       text: zod_default.string().optional()
     }).describe("rendering a clickable link"),
-    render: (payload) => /* @__PURE__ */ jsx13(
+    render: (payload) => /* @__PURE__ */ jsx12(
       "a",
       {
         href: payload.uri,
@@ -27023,15 +27233,24 @@ var getVendorCardsWidget = (isProd) => {
           }
         }
       },
-      render: (payload, enriched) => /* @__PURE__ */ jsx13(
+      render: (payload, enriched, { messageContext }) => /* @__PURE__ */ jsx12(
         VendorCards,
         {
           payload,
           enriched,
+          existingFeedback: messageContext?.getFeedback?.()?.notes,
           onAddToList: (vendorId) => {
             window.dispatchEvent(new CustomEvent("vendor-selected", {
               detail: { vendorId }
             }));
+          },
+          onFeedback: (noteId, payload2) => {
+            messageContext?.submitFeedback?.({
+              notes: [{
+                noteId,
+                ...payload2
+              }]
+            });
           }
         }
       )
@@ -27044,9 +27263,7 @@ export {
   ChatWidget,
   FullDisplayMode,
   FullDisplayMode as FullRenderer,
-  MessageWithFeedbackRenderer as MessageBubbleRenderer,
   MessageRenderer,
-  MessageWithFeedbackRenderer,
   PopupChatWidget,
   SDK_WIDGET_MARKER,
   TagGroupDisplay,