@e-llm-studio/feedback-flow 0.1.31 → 0.1.33

package/dist/FeedbackExperience.d.ts

@@ -6,6 +6,8 @@ export interface FeedbackExperienceProps {
     /** Optional for feature-level feedback; chat responses should provide their request ID. */
     requestId?: string;
     featureId: string;
+    featureName?: string;
+    featureDescription?: string;
     /** Consulted only for feature-level feedback, never for chat responses. */
     featureAvailabilityApi?: FeatureAvailabilityApi;
     /** Backend mode UUID used to list its features. */

package/dist/FeedbackExperience.js

@@ -14,18 +14,18 @@ const useFeedbackPersistence_1 = require("./useFeedbackPersistence");
 const featureAvailability_1 = require("./featureAvailability");
 /** Standalone experience for hosts that do not need chat-specific anchoring. */
 function FeedbackExperience(props) {
-    const available = (0, featureAvailability_1.useFeatureAvailability)(props.featureAvailabilityModeId, props.featureId, props.featureAvailabilityApi, !props.requestId);
+    const { available, feature } = (0, featureAvailability_1.useFeatureAvailabilityDetails)(props.featureAvailabilityModeId, props.featureId, props.featureAvailabilityApi, !props.requestId);
     if (!available)
         return null;
-    return (0, jsx_runtime_1.jsx)(FeedbackExperienceContent, { ...props, requestId: props.requestId || props.featureId });
+    return (0, jsx_runtime_1.jsx)(FeedbackExperienceContent, { ...props, featureName: props.featureName ?? feature?.name ?? undefined, featureDescription: props.featureDescription ?? feature?.description ?? undefined, requestId: props.requestId || props.featureId });
 }
-function FeedbackExperienceContent({ requestId, featureId, metadata, tracking, copy, theme, onSubmit, api, className, style, styles, classNames, align = "start", slots, }) {
+function FeedbackExperienceContent({ requestId, featureId, featureName, featureDescription, metadata, tracking, copy, theme, onSubmit, api, className, style, styles, classNames, align = "start", slots, }) {
     const feedbackMetadata = (0, tracking_1.createFeedbackMetadata)(tracking, metadata);
     const flow = (0, useFeedbackFlow_1.useFeedbackFlow)(requestId, featureId, feedbackMetadata);
     const { saveFeedback, saveProgress, saveOnDismiss, isLoading, isSaving, saveError } = (0, useFeedbackPersistence_1.useFeedbackPersistence)(flow, feedbackMetadata, onSubmit, api);
     const anchorRef = (0, react_1.useRef)(null);
     const [promptPosition, setPromptPosition] = (0, react_1.useState)(null);
-    const prompt = ((0, jsx_runtime_1.jsx)(FeedbackPrompt_1.FeedbackPrompt, { flow: flow, loading: isLoading, disabled: isSaving, promptRef: anchorRef, copy: copy ?? types_1.defaultFeedbackCopy, theme: theme, styles: styles?.prompt, classNames: classNames?.prompt, onRatingSelected: (rating) => {
+    const prompt = ((0, jsx_runtime_1.jsx)(FeedbackPrompt_1.FeedbackPrompt, { flow: flow, loading: isLoading, disabled: isSaving, promptRef: anchorRef, copy: copy ?? types_1.defaultFeedbackCopy, theme: theme, featureName: featureName, featureDescription: featureDescription, styles: styles?.prompt, classNames: classNames?.prompt, onRatingSelected: (rating) => {
             const nextStep = rating === 3 || rating === 4 ? "rating" : rating <= 2 ? "gap" : "time";
             void saveProgress({ requestId, featureId, rating, gaps: [], metadata: feedbackMetadata }, nextStep)
                 .catch((error) => console.error("Could not save rating", error));

package/dist/FeedbackModal.js

@@ -17,6 +17,10 @@ function FeedbackModal(props) {
 }
 function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onProgress, onDismiss, saving = false, resolveScreenshotUrl, anchorRef, overlayHostRef, anchorKey, slots, className, style, styles, classNames, backdropClassName, backdropStyle, dialogClassName, dialogStyle, }) {
     const copy = (0, types_1.createFeedbackCopy)(copyOverrides);
+    const hasEnoughDetail = (value) => wordCount(value) >= copy.usefulMinimumWords;
+    const requiresGapWordMinimum = flow.ratingBase !== 5;
+    const gapHasRequiredDetail = (gap) => hasEnoughDetail(gap.description) || (!requiresGapWordMinimum && gap.detailRequested);
+    const detailRequirement = (_value, prompt) => prompt;
     const mergedTheme = (0, types_1.createFeedbackTheme)(theme);
     const [customTime, setCustomTime] = (0, react_1.useState)(false);
     const [introDismissed, setIntroDismissed] = (0, react_1.useState)(false);
@@ -30,6 +34,10 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
     const [screenshotPreview, setScreenshotPreview] = (0, react_1.useState)(null);
     const [capturingScreenshot, setCapturingScreenshot] = (0, react_1.useState)(false);
     const [captureError, setCaptureError] = (0, react_1.useState)('');
+    const [rangeActive, setRangeActive] = (0, react_1.useState)(false);
+    const [rangeTooltipPosition, setRangeTooltipPosition] = (0, react_1.useState)(null);
+    const rangeRef = (0, react_1.useRef)(null);
+    const rangeTooltipRef = (0, react_1.useRef)(null);
     const submittingRef = (0, react_1.useRef)(false);
     const [position, setPosition] = (0, react_1.useState)({ left: 12, top: 12, width: 480, maxHeight: 600 });
     const dialogRef = (0, react_1.useRef)(null);
@@ -38,6 +46,31 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
     const dismissRef = (0, react_1.useRef)(() => undefined);
     const wasOpenRef = (0, react_1.useRef)(false);
     const isOpen = flow.step !== 'closed';
+    (0, react_1.useLayoutEffect)(() => {
+        if (!rangeActive || flow.step !== 'rating' || flow.rating === null)
+            return;
+        const rating = flow.rating;
+        const updatePosition = () => {
+            const range = rangeRef.current;
+            const tooltip = rangeTooltipRef.current;
+            if (!range || !tooltip)
+                return;
+            const rangeRect = range.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            const fraction = Math.max(0, Math.min(1, rating - flow.ratingBase));
+            const thumbX = rangeRect.left + rangeRect.width * fraction;
+            const left = Math.max(8, Math.min(window.innerWidth - tooltipRect.width - 8, thumbX - tooltipRect.width / 2));
+            const top = Math.max(8, rangeRect.top - tooltipRect.height - 16);
+            setRangeTooltipPosition({ top, left });
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [rangeActive, flow.step, flow.rating, flow.ratingBase]);
     const dismiss = () => {
         if (flow.step !== 'success' && flow.step !== 'closed' && flow.submission) {
             void onDismiss?.(flow.submission, flow.step, flow.completed)
@@ -75,7 +108,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
         if (isOpen && !wasOpenRef.current) {
             setShowUseful((flow.rating ?? 0) >= 4 && flow.timeSavedMinutes !== undefined);
             setShowLowRatingTime((flow.rating ?? 0) < 4 && flow.timeSavedMinutes !== undefined);
-            const firstShortGap = flow.gaps.findIndex((gap) => !gap.description.trim() || (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested));
+            const firstShortGap = flow.gaps.findIndex((gap) => !gap.description.trim() || (!hasEnoughDetail(gap.description) && !gap.detailRequested));
             setRevealedGapCount(firstShortGap < 0 ? flow.gaps.length : firstShortGap);
             setReviewPageIndex(0);
         }
@@ -188,7 +221,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
             : current > index ? current - 1 : current);
     };
     const canAdvanceGap = revealedGapCount >= flow.gaps.length && flow.gaps.every((gap) => Boolean(gap.severity) && Boolean(gap.description.trim()) &&
-        (wordCount(gap.description) >= copy.usefulMinimumWords || gap.detailRequested));
+        gapHasRequiredDetail(gap));
     const persistAndAdvance = (nextStep, advance, submission = flow.submission) => {
         if (!submission || submittingRef.current)
             return;
@@ -206,9 +239,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
         if (!flow.submission || submittingRef.current)
             return;
         if (!flow.mostUseful.trim() ||
-            (wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) ||
-            flow.gaps.some((gap) => !gap.description.trim() ||
-                (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested)) ||
+            flow.gaps.some((gap) => !gap.description.trim() || !gapHasRequiredDetail(gap)) ||
             flow.timeSavedMinutes === undefined)
             return;
         submittingRef.current = true;
@@ -229,21 +260,21 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
         }
     };
     const nextReviewPage = () => {
-        if (!canContinueReview)
-            return;
         if (reviewPage === 'gap') {
-            const gaps = flow.gaps.map((gap) => wordCount(gap.description) < copy.usefulMinimumWords
+            const gaps = flow.gaps.map((gap) => !hasEnoughDetail(gap.description) && !gap.detailRequested
                 ? { ...gap, detailRequested: true } : gap);
-            if (gaps.some((gap, index) => gap.detailRequested && !flow.gaps[index].detailRequested)) {
+            if (flow.gaps.some((gap) => !gapHasRequiredDetail(gap))) {
                 flow.setGaps(gaps);
                 return;
             }
         }
         else if ((reviewPage === 'useful' || reviewPage === 'time') &&
-            wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) {
+            !hasEnoughDetail(flow.mostUseful) && !flow.usefulDetailShown) {
             flow.setUsefulDetailShown(true);
             return;
         }
+        if (!canContinueReview)
+            return;
         if (reviewPageIndex < reviewPages.length - 1) {
             const nextPage = reviewPages[reviewPageIndex + 1];
             void persistAndAdvance(nextPage, () => setReviewPageIndex(reviewPageIndex + 1));
@@ -256,9 +287,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
             setReviewPageIndex(reviewPageIndex - 1);
     };
     const continueUseful = () => {
-        if (!flow.mostUseful.trim())
-            return;
-        if (wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) {
+        if (!hasEnoughDetail(flow.mostUseful) && !flow.usefulDetailShown) {
             flow.setUsefulDetailShown(true);
             return;
         }
@@ -270,9 +299,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
             void submitFeedback();
     };
     const continueTime = () => {
-        if (showUseful && !flow.mostUseful.trim())
-            return;
-        if (showUseful && wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) {
+        if (showUseful && !hasEnoughDetail(flow.mostUseful) && !flow.usefulDetailShown) {
             flow.setUsefulDetailShown(true);
             return;
         }
@@ -461,10 +488,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
                         ((flow.step === 'time' && flow.ratingBase === 4) ||
                             (flow.step === 'gap' && flow.rating !== null && flow.rating > 2) ||
                             (flow.step === 'useful' && isGapFirstFlow) ||
-                            flow.step === 'success') && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-dialog__topbar', classNames?.topbar].filter(Boolean).join(' '), style: styles?.topbar, children: [flow.step === 'time' || flow.step === 'gap' || flow.step === 'useful' ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: back, "aria-label": copy.backLabel, className: classNames?.backButton, style: styles?.backButton, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 19 }) })) : ((0, jsx_runtime_1.jsx)("span", {})), flow.step === 'success' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: flow.close, "aria-label": copy.closeLabel, className: classNames?.closeButton, style: styles?.closeButton, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 19 }) }))] })), flow.step === 'rating' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: classNames?.title, style: styles?.title, children: copy.ratingTitle }), (0, jsx_runtime_1.jsxs)("p", { className: ['cw-feedback-subtitle', classNames?.subtitle].filter(Boolean).join(' '), style: styles?.subtitle, children: ["\u2728 ", copy.ratingSubtitle] }), (0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-range', classNames?.rangeContainer].filter(Boolean).join(' '), style: styles?.rangeContainer, children: [flow.rating !== null && ((0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-range-tooltip', classNames?.rangeTooltip].filter(Boolean).join(' '), style: {
-                                            left: `clamp(150px, ${(flow.rating - ratingBase) * 100}%, calc(100% - 150px))`,
-                                            ...styles?.rangeTooltip,
-                                        }, children: copy.ratingValueLabel(flow.rating) })), (0, jsx_runtime_1.jsx)("input", { "aria-label": copy.ratingControlLabel, type: "range", min: ratingBase, max: ratingBase + 1, step: "0.1", value: flow.rating ?? ratingBase, className: classNames?.rangeInput, style: styles?.rangeInput, onChange: (e) => (isReview ? flow.setReviewRating : flow.setRating)(Number(e.target.value)), onPointerUp: (event) => selectDecimalRating(Number(event.currentTarget.value)), onKeyUp: (event) => {
+                            flow.step === 'success') && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-dialog__topbar', classNames?.topbar].filter(Boolean).join(' '), style: styles?.topbar, children: [flow.step === 'time' || flow.step === 'gap' || flow.step === 'useful' ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: back, "aria-label": copy.backLabel, className: classNames?.backButton, style: styles?.backButton, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 19 }) })) : ((0, jsx_runtime_1.jsx)("span", {})), flow.step === 'success' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: flow.close, "aria-label": copy.closeLabel, className: classNames?.closeButton, style: styles?.closeButton, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 19 }) }))] })), flow.step === 'rating' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: classNames?.title, style: styles?.title, children: copy.ratingTitle }), (0, jsx_runtime_1.jsxs)("p", { className: ['cw-feedback-subtitle', classNames?.subtitle].filter(Boolean).join(' '), style: styles?.subtitle, children: ["\u2728 ", copy.ratingSubtitle] }), (0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-range', classNames?.rangeContainer].filter(Boolean).join(' '), style: styles?.rangeContainer, children: [rangeActive && flow.rating !== null && (0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-range__pointer", style: { left: `clamp(8px, ${(flow.rating - ratingBase) * 100}%, calc(100% - 8px))` }, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { ref: rangeRef, "aria-label": copy.ratingControlLabel, type: "range", min: ratingBase, max: ratingBase + 1, step: "0.1", value: flow.rating ?? ratingBase, onPointerEnter: () => setRangeActive(true), onPointerLeave: () => setRangeActive(false), onFocus: () => setRangeActive(true), onBlur: () => setRangeActive(false), className: classNames?.rangeInput, style: styles?.rangeInput, onChange: (e) => (isReview ? flow.setReviewRating : flow.setRating)(Number(e.target.value)), onPointerUp: (event) => selectDecimalRating(Number(event.currentTarget.value)), onKeyUp: (event) => {
                                             if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
                                                 selectDecimalRating(Number(event.currentTarget.value));
                                             }
@@ -474,7 +498,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
                                                 event.stopPropagation();
                                                 selectDecimalRating(Number(event.currentTarget.value));
                                             }
-                                        } })] }), (0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-rating-options', classNames?.ratingOptionsContainer].filter(Boolean).join(' '), style: styles?.ratingOptionsContainer, children: decimalRatings.map((value) => {
+                                        } }), (0, jsx_runtime_1.jsx)("div", { className: "cw-feedback-range__ticks", "aria-hidden": "true", children: Array.from({ length: 11 }, (_, index) => (0, jsx_runtime_1.jsx)("span", { className: index % 2 === 0 ? 'is-major' : '' }, index)) })] }), (0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-rating-options', classNames?.ratingOptionsContainer].filter(Boolean).join(' '), style: styles?.ratingOptionsContainer, children: decimalRatings.map((value) => {
                                     const isSelected = flow.rating === value;
                                     return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: [
                                             isSelected ? 'is-selected' : '',
@@ -517,7 +541,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
                                                     event.preventDefault();
                                                     event.stopPropagation();
                                                     selectTimeSaved(flow.timeSavedMinutes);
-                                                } }), ' ', copy.minuteUnit] }))] }), !showUseful && flow.timeSavedMinutes === undefined && ((0, jsx_runtime_1.jsx)("p", { className: "cw-feedback-time-hint", children: copy.enterHint })), showUseful && ((0, jsx_runtime_1.jsxs)("label", { className: ['cw-feedback-field', classNames?.usefulField].filter(Boolean).join(' '), style: styles?.usefulField, children: [(0, jsx_runtime_1.jsx)("span", { children: copy.usefulTitle }), flow.usefulDetailShown && wordCount(flow.mostUseful) < copy.usefulMinimumWords && ((0, jsx_runtime_1.jsxs)("span", { className: "cw-feedback-inline-detail-prompt", children: ["*", copy.usefulMoreDetailPrompt] })), (0, jsx_runtime_1.jsx)("textarea", { autoFocus: true, value: flow.mostUseful, className: classNames?.usefulTextarea, style: styles?.usefulTextarea, onChange: (e) => flow.setMostUseful(e.target.value), placeholder: copy.usefulPlaceholder, onKeyDown: (e) => {
+                                                } }), ' ', copy.minuteUnit] }))] }), !showUseful && flow.timeSavedMinutes === undefined && ((0, jsx_runtime_1.jsx)("p", { className: "cw-feedback-time-hint", children: copy.enterHint })), showUseful && ((0, jsx_runtime_1.jsxs)("label", { className: ['cw-feedback-field', 'cw-feedback-useful-field', classNames?.usefulField].filter(Boolean).join(' '), style: styles?.usefulField, children: [(0, jsx_runtime_1.jsx)("span", { children: copy.usefulTitle }), flow.usefulDetailShown && !hasEnoughDetail(flow.mostUseful) && ((0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-inline-detail-prompt", children: detailRequirement(flow.mostUseful, copy.usefulMoreDetailPrompt) })), (0, jsx_runtime_1.jsx)("textarea", { autoFocus: true, value: flow.mostUseful, className: classNames?.usefulTextarea, style: styles?.usefulTextarea, onChange: (e) => flow.setMostUseful(e.target.value), placeholder: copy.usefulPlaceholder, onKeyDown: (e) => {
                                             if (e.key === 'Enter' && !e.shiftKey && flow.mostUseful.trim()) {
                                                 e.preventDefault();
                                                 if (isReview)
@@ -556,22 +580,24 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
                                             event.preventDefault();
                                             event.stopPropagation();
                                             selectTimeSaved(flow.timeSavedMinutes);
-                                        } }), ' ', copy.minuteUnit] })), showLowRatingTime && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: ['cw-feedback-useful-title', classNames?.title, classNames?.usefulTitle].filter(Boolean).join(' '), style: { ...styles?.title, ...styles?.usefulTitle }, children: copy.lowRatingUsefulTitle }), flow.usefulDetailShown && wordCount(flow.mostUseful) < copy.usefulMinimumWords && ((0, jsx_runtime_1.jsxs)("p", { className: ['cw-feedback-useful-prompt', classNames?.usefulPrompt].filter(Boolean).join(' '), style: styles?.usefulPrompt, children: ["*", copy.usefulMoreDetailPrompt] })), (0, jsx_runtime_1.jsx)("label", { className: ['cw-feedback-field', 'cw-feedback-useful-field', classNames?.usefulField].filter(Boolean).join(' '), style: styles?.usefulField, children: (0, jsx_runtime_1.jsx)("textarea", { autoFocus: true, value: flow.mostUseful, className: classNames?.usefulTextarea, style: styles?.usefulTextarea, onChange: (event) => flow.setMostUseful(event.target.value), placeholder: copy.usefulPlaceholder, onKeyDown: (event) => {
+                                        } }), ' ', copy.minuteUnit] })), showLowRatingTime && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: ['cw-feedback-useful-title', classNames?.title, classNames?.usefulTitle].filter(Boolean).join(' '), style: { ...styles?.title, ...styles?.usefulTitle }, children: copy.lowRatingUsefulTitle }), flow.usefulDetailShown && !hasEnoughDetail(flow.mostUseful) && ((0, jsx_runtime_1.jsx)("p", { className: ['cw-feedback-useful-prompt', 'cw-feedback-inline-detail-prompt', classNames?.usefulPrompt].filter(Boolean).join(' '), style: styles?.usefulPrompt, children: detailRequirement(flow.mostUseful, copy.usefulMoreDetailPrompt) })), (0, jsx_runtime_1.jsx)("label", { className: ['cw-feedback-field', 'cw-feedback-useful-field', classNames?.usefulField].filter(Boolean).join(' '), style: styles?.usefulField, children: (0, jsx_runtime_1.jsx)("textarea", { autoFocus: true, value: flow.mostUseful, className: classNames?.usefulTextarea, style: styles?.usefulTextarea, onChange: (event) => flow.setMostUseful(event.target.value), placeholder: copy.usefulPlaceholder, onKeyDown: (event) => {
                                                 if (event.key !== 'Enter' || event.shiftKey)
                                                     return;
                                                 event.preventDefault();
                                                 continueUseful();
-                                            } }) })] }))] })), flow.step === 'gap' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showLowRatingIntro && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-low-rating-intro", children: [(0, jsx_runtime_1.jsx)("div", { className: "cw-feedback-low-rating-intro__emoji", "aria-hidden": "true", children: "\uD83D\uDE14\uD83E\uDD7A" }), (0, jsx_runtime_1.jsx)("strong", { children: copy.lowRatingIntroTitle }), (0, jsx_runtime_1.jsx)("p", { children: copy.lowRatingIntroDescription })] })), (0, jsx_runtime_1.jsx)("h2", { className: classNames?.title, style: styles?.title, children: flow.rating === 5 ? copy.fiveStarGapTitle : copy.gapTitle }), copy.gapSubtitle && (!isLowRatingGap || (flow.gaps.length === 1 && flow.gaps[0].detailRequested)) && ((0, jsx_runtime_1.jsx)("p", { className: [
-                                    flow.gaps.length === 1 && flow.gaps[0].detailRequested && wordCount(flow.gaps[0].description) < copy.usefulMinimumWords
+                                            } }) })] }))] })), flow.step === 'gap' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showLowRatingIntro && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-low-rating-intro", children: [(0, jsx_runtime_1.jsx)("div", { className: "cw-feedback-low-rating-intro__emoji", "aria-hidden": "true", children: "\uD83D\uDE14\uD83E\uDD7A" }), (0, jsx_runtime_1.jsx)("strong", { children: copy.lowRatingIntroTitle }), (0, jsx_runtime_1.jsx)("p", { children: copy.lowRatingIntroDescription })] })), (0, jsx_runtime_1.jsx)("h2", { className: classNames?.title, style: styles?.title, children: flow.rating === 5 ? copy.fiveStarGapTitle : copy.gapTitle }), copy.gapSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: [
+                                    flow.gaps.length === 1 && flow.gaps[0].detailRequested && !hasEnoughDetail(flow.gaps[0].description)
                                         ? 'cw-feedback-inline-detail-prompt' : 'cw-feedback-subtitle',
                                     classNames?.subtitle,
-                                ].filter(Boolean).join(' '), style: styles?.subtitle, children: flow.gaps.length === 1 && flow.gaps[0].detailRequested && wordCount(flow.gaps[0].description) < copy.usefulMinimumWords
-                                    ? `*${copy.gapMoreDetailPrompt}`
-                                    : `✨ ${copy.gapSubtitle}` })), (0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-gap-list', classNames?.gapList].filter(Boolean).join(' '), style: styles?.gapList, children: flow.gaps.map((gap, index) => ((0, jsx_runtime_1.jsxs)("section", { className: ['cw-feedback-gap', flow.gaps.length >= 2 && index !== activeGapIndex ? 'cw-feedback-gap--collapsed' : '', classNames?.gapItem].filter(Boolean).join(' '), style: styles?.gapItem, children: [flow.gaps.length >= 2 && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-gap__header", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "cw-feedback-gap__toggle", onClick: () => setActiveGapIndex(index), "aria-expanded": index === activeGapIndex, children: ["Gap ", index + 1, gap.severity && (0, jsx_runtime_1.jsx)("span", { className: `cw-feedback-gap__severity ${gap.severity}`, children: copy.severityLabels[gap.severity] }), index !== activeGapIndex && ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }))] }), index === activeGapIndex && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "cw-feedback-gap__remove", onClick: () => removeGap(index), "aria-label": `Delete gap ${index + 1}`, title: `Delete gap ${index + 1}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, "aria-hidden": "true" }) })] })), (flow.gaps.length < 2 || index === activeGapIndex) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [flow.gaps.length >= 2 && gap.detailRequested && wordCount(gap.description) < copy.usefulMinimumWords && ((0, jsx_runtime_1.jsxs)("p", { className: "cw-feedback-inline-detail-prompt cw-feedback-gap__detail-prompt", children: ["*", copy.gapMoreDetailPrompt] })), (0, jsx_runtime_1.jsx)("textarea", { autoFocus: index === 0 && !isLowRatingGap, value: gap.description, className: classNames?.gapTextarea, style: styles?.gapTextarea, onFocus: () => { if (isLowRatingGap)
+                                ].filter(Boolean).join(' '), style: flow.gaps.length === 1 && flow.gaps[0].detailRequested && !hasEnoughDetail(flow.gaps[0].description)
+                                    ? { ...styles?.subtitle, marginTop: 10, marginBottom: 4 }
+                                    : styles?.subtitle, children: flow.gaps.length === 1 && flow.gaps[0].detailRequested && !hasEnoughDetail(flow.gaps[0].description)
+                                    ? detailRequirement(flow.gaps[0].description, copy.gapMoreDetailPrompt)
+                                    : `✨ ${copy.gapSubtitle}` })), (0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-gap-list', classNames?.gapList].filter(Boolean).join(' '), style: styles?.gapList, children: flow.gaps.map((gap, index) => ((0, jsx_runtime_1.jsxs)("section", { className: ['cw-feedback-gap', flow.gaps.length >= 2 && index !== activeGapIndex ? 'cw-feedback-gap--collapsed' : '', classNames?.gapItem].filter(Boolean).join(' '), style: styles?.gapItem, children: [flow.gaps.length >= 2 && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-gap__header", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "cw-feedback-gap__toggle", onClick: () => setActiveGapIndex(index === activeGapIndex ? -1 : index), "aria-expanded": index === activeGapIndex, children: ["Gap ", index + 1, index !== activeGapIndex && gap.severity && (0, jsx_runtime_1.jsx)("span", { className: `cw-feedback-gap__severity ${gap.severity}`, children: copy.severityLabels[gap.severity] }), ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: index === activeGapIndex ? 'm6 15 6-6 6 6' : 'm6 9 6 6 6-6' }) }))] }), index === activeGapIndex && !gap.description.trim() && gap.screenshots.length === 0 && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "cw-feedback-gap__remove", onClick: () => removeGap(index), "aria-label": `Delete gap ${index + 1}`, title: `Delete gap ${index + 1}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, "aria-hidden": "true" }) })] })), (flow.gaps.length < 2 || index === activeGapIndex) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [flow.gaps.length >= 2 && gap.detailRequested && !hasEnoughDetail(gap.description) && ((0, jsx_runtime_1.jsx)("p", { className: "cw-feedback-inline-detail-prompt cw-feedback-gap__detail-prompt", children: detailRequirement(gap.description, copy.gapMoreDetailPrompt) })), (0, jsx_runtime_1.jsx)("textarea", { autoFocus: index === 0 && !isLowRatingGap, value: gap.description, className: classNames?.gapTextarea, style: styles?.gapTextarea, onFocus: () => { if (isLowRatingGap)
                                                         setIntroDismissed(true); }, onChange: (e) => updateGap(index, { description: e.target.value }), onKeyDown: (event) => {
                                                         if (event.key === 'Enter' && !event.shiftKey && gap.description.trim()) {
                                                             event.preventDefault();
-                                                            if (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested) {
+                                                            if (!gapHasRequiredDetail(gap)) {
                                                                 updateGap(index, { detailRequested: true });
                                                                 return;
                                                             }
@@ -620,7 +646,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
                                     const gap = flow.gaps[index];
                                     if (!gap?.description.trim())
                                         return;
-                                    if (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested) {
+                                    if (!gapHasRequiredDetail(gap)) {
                                         updateGap(index, { detailRequested: true });
                                         return;
                                     }
@@ -638,7 +664,7 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
                             ...styles?.enterHintButton,
                         }, type: "button", onClick: continueUseful, children: copy.enterHint })), showLowRatingTime && flow.timeSavedMinutes !== undefined &&
                         Boolean(flow.mostUseful.trim()) &&
-                        (wordCount(flow.mostUseful) >= copy.usefulMinimumWords || flow.usefulDetailShown) && ((0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-primary', classNames?.primaryButton].filter(Boolean).join(' '), style: styles?.primaryButton, type: "button", onClick: submitFeedback, children: copy.doneLabel }))] })), isReview && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-review-nav', classNames?.reviewNav].filter(Boolean).join(' '), style: styles?.reviewNav, children: [(0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-review-nav__button', classNames?.reviewNavButton].filter(Boolean).join(' '), style: styles?.reviewNavButton, type: "button", onClick: previousReviewPage, disabled: reviewPageIndex === 0, "aria-label": copy.backLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }) }), (0, jsx_runtime_1.jsxs)("button", { className: [
+                        (hasEnoughDetail(flow.mostUseful) || flow.usefulDetailShown) && ((0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-primary', classNames?.primaryButton].filter(Boolean).join(' '), style: styles?.primaryButton, type: "button", onClick: submitFeedback, children: copy.doneLabel }))] })), isReview && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-review-nav', classNames?.reviewNav].filter(Boolean).join(' '), style: styles?.reviewNav, children: [(0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-review-nav__button', classNames?.reviewNavButton].filter(Boolean).join(' '), style: styles?.reviewNavButton, type: "button", onClick: previousReviewPage, disabled: reviewPageIndex === 0, "aria-label": copy.backLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }) }), (0, jsx_runtime_1.jsxs)("button", { className: [
                             'cw-feedback-review-nav__button',
                             'cw-feedback-review-nav__button--next',
                             classNames?.reviewNavButton,
@@ -653,7 +679,17 @@ function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onPr
             if (event.target === event.currentTarget)
                 setScreenshotPreview(null);
         }, children: (0, jsx_runtime_1.jsxs)("div", { ref: screenshotPreviewRef, className: "cw-feedback-image-preview-dialog", role: "dialog", "aria-modal": "true", "aria-label": `Screenshot preview: ${screenshotPreview.name}`, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "cw-feedback-image-preview-close", onClick: () => setScreenshotPreview(null), "aria-label": "Close screenshot preview", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 22 }) }), (0, jsx_runtime_1.jsx)("img", { src: screenshotPreview.url, alt: screenshotPreview.name })] }) }));
+    const rangeTooltip = rangeActive && flow.step === 'rating' && flow.rating !== null && ((0, jsx_runtime_1.jsx)("div", { ref: rangeTooltipRef, role: "tooltip", className: ['cw-feedback-range-tooltip', classNames?.rangeTooltip].filter(Boolean).join(' '), style: {
+            ...(0, feedbackTheme_1.feedbackThemeStyle)(theme),
+            ...styles?.rangeTooltip,
+            position: 'fixed',
+            zIndex: 10002,
+            top: rangeTooltipPosition?.top ?? -1000,
+            left: rangeTooltipPosition?.left ?? -1000,
+            bottom: 'auto',
+            transform: 'none',
+        }, children: copy.ratingValueLabel(flow.rating) }));
     return typeof document !== 'undefined'
-        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_dom_1.createPortal)(backdrop, document.body), (0, react_dom_1.createPortal)(dialog, document.body), previewDialog && (0, react_dom_1.createPortal)(previewDialog, document.body)] })
-        : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backdrop, dialog, previewDialog] });
+        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_dom_1.createPortal)(backdrop, document.body), (0, react_dom_1.createPortal)(dialog, document.body), rangeTooltip && (0, react_dom_1.createPortal)(rangeTooltip, document.body), previewDialog && (0, react_dom_1.createPortal)(previewDialog, document.body)] })
+        : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backdrop, dialog, rangeTooltip, previewDialog] });
 }

package/dist/FeedbackPrompt.d.ts

@@ -6,6 +6,11 @@ export interface FeedbackPromptProps {
     copy?: Partial<FeedbackCopy>;
     theme?: FeedbackTheme;
     compact?: boolean;
+    compactRatingLabel?: boolean;
+    ratingCardLabel?: string;
+    animateUnrated?: boolean;
+    featureName?: string;
+    featureDescription?: string;
     promptRef?: Ref<HTMLDivElement>;
     extraContent?: ReactNode;
     loading?: boolean;
@@ -17,4 +22,4 @@ export interface FeedbackPromptProps {
     styles?: FeedbackPromptStyles;
     classNames?: FeedbackPromptClassNames;
 }
-export declare function FeedbackPrompt({ flow, copy: copyOverrides, theme, compact, promptRef, extraContent, loading, disabled, onBeforeOpen, onRatingSelected, className, style, styles, classNames, }: FeedbackPromptProps): JSX.Element | null;
+export declare function FeedbackPrompt({ flow, copy: copyOverrides, theme, compact, compactRatingLabel, ratingCardLabel, animateUnrated, featureName, featureDescription, promptRef, extraContent, loading, disabled, onBeforeOpen, onRatingSelected, className, style, styles, classNames, }: FeedbackPromptProps): JSX.Element | null;

package/dist/FeedbackPrompt.js

@@ -3,19 +3,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeedbackPrompt = FeedbackPrompt;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const types_1 = require("./types");
 const feedbackTheme_1 = require("./feedbackTheme");
 const StarRating_1 = require("./StarRating");
-function FeedbackPrompt({ flow, copy: copyOverrides, theme, compact = false, promptRef, extraContent, loading = false, disabled = false, onBeforeOpen, onRatingSelected, className, style, styles, classNames, }) {
+function FeedbackPrompt({ flow, copy: copyOverrides, theme, compact = false, compactRatingLabel = false, ratingCardLabel, animateUnrated = false, featureName, featureDescription, promptRef, extraContent, loading = false, disabled = false, onBeforeOpen, onRatingSelected, className, style, styles, classNames, }) {
     const copy = (0, types_1.createFeedbackCopy)(copyOverrides);
     const [hovered, setHovered] = (0, react_1.useState)(null);
-    const [selectedTooltipStar, setSelectedTooltipStar] = (0, react_1.useState)(null);
+    const [pendingStar, setPendingStar] = (0, react_1.useState)(null);
+    const [tooltipPosition, setTooltipPosition] = (0, react_1.useState)(null);
+    const tooltipRef = (0, react_1.useRef)(null);
+    const hoveredButtonRef = (0, react_1.useRef)(null);
+    const reselectTimerRef = (0, react_1.useRef)(null);
+    const tooltipVisible = !disabled && flow.step === 'closed' && flow.rating !== null && hovered === Math.ceil(flow.rating);
+    const fullRatingLabel = flow.rating === null ? null : flow.rating % 1
+        ? copy.ratingValueLabel(flow.rating)
+        : copy.starTooltipLabel?.(flow.rating) ?? copy.starLabel(flow.rating);
+    const cardLabel = flow.rating !== null && ratingCardLabel ? ratingCardLabel : fullRatingLabel
+        ? compactRatingLabel ? fullRatingLabel.split(/[—–]/)[0].trim() : fullRatingLabel
+        : copy.prompt;
+    (0, react_1.useEffect)(() => setPendingStar(null), [flow.requestId, flow.featureId, flow.step]);
+    (0, react_1.useEffect)(() => () => { if (reselectTimerRef.current)
+        clearTimeout(reselectTimerRef.current); }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!tooltipVisible)
+            return;
+        const updatePlacement = () => {
+            const tooltip = tooltipRef.current;
+            const button = hoveredButtonRef.current;
+            if (!tooltip || !button)
+                return;
+            const buttonRect = button.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - buttonRect.bottom;
+            const top = spaceBelow >= tooltipRect.height + 8
+                ? buttonRect.bottom + 8
+                : Math.max(8, buttonRect.top - tooltipRect.height - 8);
+            const left = Math.max(8, Math.min(window.innerWidth - tooltipRect.width - 8, buttonRect.left + buttonRect.width / 2 - tooltipRect.width / 2));
+            setTooltipPosition((current) => current?.top === top && current.left === left ? current : { top, left });
+        };
+        updatePlacement();
+        window.addEventListener('resize', updatePlacement);
+        window.addEventListener('scroll', updatePlacement, true);
+        return () => {
+            window.removeEventListener('resize', updatePlacement);
+            window.removeEventListener('scroll', updatePlacement, true);
+        };
+    }, [tooltipVisible, hovered]);
     if (!flow)
         return null;
     return ((0, jsx_runtime_1.jsxs)("div", { ref: promptRef, className: [
             'cw-feedback-prompt',
             loading ? 'cw-feedback-prompt--loading' : '',
             compact ? 'cw-feedback-prompt--compact' : '',
+            animateUnrated && flow.rating === null && !loading ? 'cw-feedback-prompt--new' : '',
             className,
             classNames?.root,
         ]
@@ -24,20 +65,47 @@ function FeedbackPrompt({ flow, copy: copyOverrides, theme, compact = false, pro
             ...(0, feedbackTheme_1.feedbackThemeStyle)(theme),
             ...style,
             ...styles?.root,
-        }, "aria-busy": loading, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: disabled, className: ['cw-feedback-prompt__label', classNames?.labelButton].filter(Boolean).join(' '), style: styles?.labelButton, onClick: () => {
+        }, "aria-busy": loading, children: [featureName && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-prompt__feature-context", children: [(0, jsx_runtime_1.jsx)("strong", { children: featureName }), featureDescription && (0, jsx_runtime_1.jsx)("span", { title: featureDescription, children: featureDescription })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: disabled, className: ['cw-feedback-prompt__label', classNames?.labelButton].filter(Boolean).join(' '), style: styles?.labelButton, onClick: () => {
                     if (flow.rating === null || flow.step !== 'closed')
                         return;
+                    if (reselectTimerRef.current)
+                        clearTimeout(reselectTimerRef.current);
+                    reselectTimerRef.current = null;
+                    setPendingStar(null);
                     onBeforeOpen?.();
                     flow.setStep(flow.completed ? (flow.ratingBase >= 3 && flow.ratingBase < 5 ? 'rating' : flow.ratingBase === 5 ? 'time' : 'gap') : flow.resumeStep);
-                }, children: flow.completed ? copy.savedLabel : copy.prompt }), (0, jsx_runtime_1.jsx)(StarRating_1.StarRating, { value: flow.rating, disabled: disabled || (flow.ratingLocked && flow.step === 'closed'), groupLabel: copy.starGroupLabel, starLabel: copy.starLabel, theme: theme, className: classNames?.stars, style: styles?.stars, styles: styles?.starRating, classNames: classNames?.starRating, onHoverChange: setHovered, onChange: (star) => {
-                    onBeforeOpen?.();
-                    setSelectedTooltipStar(star);
-                    flow.selectRating(star);
-                    onRatingSelected?.(star);
+                }, children: cardLabel }), (0, jsx_runtime_1.jsx)(StarRating_1.StarRating, { value: flow.rating, disabled: disabled, groupLabel: copy.starGroupLabel, starLabel: copy.starLabel, theme: theme, className: classNames?.stars, style: styles?.stars, styles: styles?.starRating, classNames: classNames?.starRating, onHoverChange: (star, target) => { hoveredButtonRef.current = target ?? null; setHovered(star); }, onChange: (star) => {
+                    if (reselectTimerRef.current) {
+                        clearTimeout(reselectTimerRef.current);
+                        reselectTimerRef.current = null;
+                    }
+                    if (flow.rating !== null && pendingStar !== star) {
+                        setPendingStar(star);
+                        return;
+                    }
+                    setPendingStar(null);
+                    if (flow.rating !== null) {
+                        flow.setRating(star);
+                        onRatingSelected?.(star);
+                        reselectTimerRef.current = setTimeout(() => {
+                            onBeforeOpen?.();
+                            flow.selectRating(star);
+                            reselectTimerRef.current = null;
+                        }, 350);
+                    }
+                    else {
+                        onBeforeOpen?.();
+                        flow.selectRating(star);
+                        onRatingSelected?.(star);
+                    }
                 } }), flow.rating !== null && flow.step === 'closed' && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: disabled, className: ['cw-feedback-review', classNames?.reviewButton].filter(Boolean).join(' '), style: styles?.reviewButton, onClick: () => {
+                    if (reselectTimerRef.current)
+                        clearTimeout(reselectTimerRef.current);
+                    reselectTimerRef.current = null;
+                    setPendingStar(null);
                     onBeforeOpen?.();
                     flow.setStep(flow.completed ? (flow.ratingBase >= 3 && flow.ratingBase < 5 ? 'rating' : flow.ratingBase === 5 ? 'time' : 'gap') : flow.resumeStep);
-                }, children: flow.completed ? copy.reviewLabel : copy.continueLabel })), !flow.completed && (hovered !== null || selectedTooltipStar !== null) && ((0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-tooltip', classNames?.tooltip].filter(Boolean).join(' '), style: styles?.tooltip, children: hovered === 5 && !copy.starTooltipLabel
+                }, children: flow.completed ? copy.reviewLabel : copy.continueLabel })), flow.rating !== null && pendingStar !== null && (0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-prompt__change-hint", role: "alert", children: "Click the star again to change your rating" }), tooltipVisible && typeof document !== 'undefined' && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: tooltipRef, role: "tooltip", className: ['cw-feedback-tooltip', classNames?.tooltip].filter(Boolean).join(' '), style: { ...(0, feedbackTheme_1.feedbackThemeStyle)(theme), ...styles?.tooltip, display: 'block', position: 'fixed', zIndex: 2147483647, top: tooltipPosition?.top ?? -1000, left: tooltipPosition?.left ?? -1000, right: 'auto' }, children: hovered === 5 && !copy.starTooltipLabel
                     ? copy.fiveStarTooltip
-                    : copy.starTooltipLabel?.(hovered ?? selectedTooltipStar ?? 5) ?? copy.starLabel(hovered ?? selectedTooltipStar ?? 5) })), extraContent && ((0, jsx_runtime_1.jsx)("div", { className: classNames?.extraContent, style: styles?.extraContent, children: extraContent })), loading && (0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-prompt__loading", role: "status", children: [(0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-prompt__spinner" }), " Loading feedback\u2026"] })] }));
+                    : copy.starTooltipLabel?.(hovered) ?? copy.starLabel(hovered) }), document.body), extraContent && ((0, jsx_runtime_1.jsx)("div", { className: classNames?.extraContent, style: styles?.extraContent, children: extraContent })), loading && (0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-prompt__loading", role: "status", children: [(0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-prompt__spinner" }), " Loading feedback\u2026"] })] }));
 }

package/dist/StarRating.d.ts

@@ -7,7 +7,7 @@ export interface StarRatingProps {
     groupLabel?: string;
     starLabel?: (star: number) => string;
     theme?: FeedbackTheme;
-    onHoverChange?: (star: number | null) => void;
+    onHoverChange?: (star: number | null, target?: HTMLButtonElement) => void;
     className?: string;
     style?: CSSProperties;
     styles?: StarRatingStyles;

package/dist/StarRating.js

@@ -11,6 +11,6 @@ function StarRating({ value, onChange, disabled = false, groupLabel = 'Rate this
     const displayedRating = hovered ?? (value === null ? 0 : Math.floor(value) + (value % 1 ? 0.5 : 0));
     return ((0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-stars', className, classNames?.root].filter(Boolean).join(' '), style: { ...style, ...styles?.root }, role: "radiogroup", "aria-label": groupLabel, children: [1, 2, 3, 4, 5].map((star) => {
             const fill = Math.max(0, Math.min(1, displayedRating - star + 1)) * 100;
-            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": Math.ceil(value ?? 0) === star, "aria-label": starLabel(star), disabled: disabled, className: classNames?.starButton, style: styles?.starButton, onMouseEnter: () => { setHovered(star); onHoverChange?.(star); }, onMouseLeave: () => { setHovered(null); onHoverChange?.(null); }, onFocus: () => { setHovered(star); onHoverChange?.(star); }, onBlur: () => { setHovered(null); onHoverChange?.(null); }, onClick: () => onChange(star), children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 2.5L12.2503 7.16667L17.3337 7.91667L13.667 11.5L14.5003 16.5833L10.0003 14.1667L5.50033 16.5833L6.33366 11.5L2.66699 7.91667L7.75033 7.16667L10.0003 2.5Z", stroke: mergedTheme.starEmpty ?? '#cbd5e1', strokeWidth: "1.33333", strokeLinejoin: "round" }) }), fill > 0 && ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", className: "cw-feedback-stars__filled", style: { clipPath: `inset(0 ${100 - fill}% 0 0)` }, children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 2.5L12.2503 7.16667L17.3337 7.91667L13.667 11.5L14.5003 16.5833L10.0003 14.1667L5.50033 16.5833L6.33366 11.5L2.66699 7.91667L7.75033 7.16667L10.0003 2.5Z", fill: mergedTheme.accent ?? '#5b21e6', stroke: mergedTheme.accent ?? '#5b21e6', strokeWidth: "1.33333", strokeLinejoin: "round" }) }))] }, star));
+            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": Math.ceil(value ?? 0) === star, "aria-label": starLabel(star), disabled: disabled, className: classNames?.starButton, style: { width: 20, height: 20, flex: '0 0 20px', ...styles?.starButton }, onMouseEnter: (event) => { setHovered(star); onHoverChange?.(star, event.currentTarget); }, onMouseLeave: () => { setHovered(null); onHoverChange?.(null); }, onFocus: (event) => { setHovered(star); onHoverChange?.(star, event.currentTarget); }, onBlur: () => { setHovered(null); onHoverChange?.(null); }, onClick: () => onChange(star), children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 2.5L12.2503 7.16667L17.3337 7.91667L13.667 11.5L14.5003 16.5833L10.0003 14.1667L5.50033 16.5833L6.33366 11.5L2.66699 7.91667L7.75033 7.16667L10.0003 2.5Z", stroke: mergedTheme.starEmpty ?? '#cbd5e1', strokeWidth: "1.33333", strokeLinejoin: "round" }) }), fill > 0 && ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", className: "cw-feedback-stars__filled", style: { clipPath: `inset(0 ${100 - fill}% 0 0)` }, children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 2.5L12.2503 7.16667L17.3337 7.91667L13.667 11.5L14.5003 16.5833L10.0003 14.1667L5.50033 16.5833L6.33366 11.5L2.66699 7.91667L7.75033 7.16667L10.0003 2.5Z", fill: mergedTheme.accent ?? '#5b21e6', stroke: mergedTheme.accent ?? '#5b21e6', strokeWidth: "1.33333", strokeLinejoin: "round" }) }))] }, star));
         }) }));
 }

package/dist/featureAvailability.d.ts

@@ -1,5 +1,7 @@
 export interface FeatureAvailabilityWindow {
     enabled?: boolean;
+    name?: string | null;
+    description?: string | null;
     startsAt?: string | null;
     endsAt?: string | null;
     uiNewTtl?: string | null;
@@ -18,4 +20,8 @@ export interface HttpFeatureAvailabilityOptions {
 export declare function createHttpFeatureAvailabilityApi(options: HttpFeatureAvailabilityOptions): FeatureAvailabilityApi;
 export declare function isFeatureAvailable(window: FeatureAvailabilityWindow | null, now?: number): boolean;
 /** Feature-only gate; chat responses with request IDs never call this API. */
+export declare function useFeatureAvailabilityDetails(modeId: string | undefined, featureId: string, api: FeatureAvailabilityApi | undefined, enabled: boolean): {
+    available: boolean;
+    feature: FeatureAvailabilityWindow | null;
+};
 export declare function useFeatureAvailability(modeId: string | undefined, featureId: string, api: FeatureAvailabilityApi | undefined, enabled: boolean): boolean;

package/dist/featureAvailability.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMockFeatureAvailabilityApi = createMockFeatureAvailabilityApi;
 exports.createHttpFeatureAvailabilityApi = createHttpFeatureAvailabilityApi;
 exports.isFeatureAvailable = isFeatureAvailable;
+exports.useFeatureAvailabilityDetails = useFeatureAvailabilityDetails;
 exports.useFeatureAvailability = useFeatureAvailability;
 const react_1 = require("react");
 /** Replace this adapter with the feature-availability endpoint when its contract is available. */
@@ -47,6 +48,8 @@ function createHttpFeatureAvailabilityApi(options) {
                 return null;
             return {
                 enabled: true,
+                name: feature.feature_name,
+                description: feature.feature_description,
                 startsAt: feature.start_date,
                 endsAt: feature.end_date,
                 uiNewTtl: feature.ui_new_ttl,
@@ -65,7 +68,7 @@ function isFeatureAvailable(window, now = Date.now()) {
         (ttl === null || (Number.isFinite(ttl) && now < ttl));
 }
 /** Feature-only gate; chat responses with request IDs never call this API. */
-function useFeatureAvailability(modeId, featureId, api, enabled) {
+function useFeatureAvailabilityDetails(modeId, featureId, api, enabled) {
     const [result, setResult] = (0, react_1.useState)(null);
     const [now, setNow] = (0, react_1.useState)(() => Date.now());
     const window = result && result.modeId === modeId && result.featureId === featureId ? result.window : null;
@@ -100,5 +103,8 @@ function useFeatureAvailability(modeId, featureId, api, enabled) {
             document.removeEventListener("visibilitychange", update);
         };
     }, [enabled, now, window]);
-    return !enabled || (Boolean(modeId) && isFeatureAvailable(window, now));
+    return { available: !enabled || (Boolean(modeId) && isFeatureAvailable(window, now)), feature: window };
+}
+function useFeatureAvailability(modeId, featureId, api, enabled) {
+    return useFeatureAvailabilityDetails(modeId, featureId, api, enabled).available;
 }

package/dist/feedback.css

@@ -54,9 +54,46 @@
     font-size: 13px;
     font-weight: 600;
 }
+.cw-feedback-prompt__feature-context {
+    display: grid;
+    gap: 2px;
+    max-width: 240px;
+    margin-bottom: 7px;
+    color: #344054;
+    font-size: 11px;
+    line-height: 1.3;
+}
+.cw-feedback-prompt__feature-context strong {
+    font-size: 12px;
+}
+.cw-feedback-prompt__feature-context span {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    color: #667085;
+}
 .cw-feedback-stars {
     display: flex;
-    gap: 3px;
+    gap: 5px;
+}
+.cw-feedback-prompt__change-hint {
+    display: block;
+    margin-top: 4px;
+    color: #dc2626;
+    font-size: 10px;
+    line-height: 1.2;
+}
+.cw-feedback-prompt--new .cw-feedback-stars button {
+    animation: cw-feedback-star-wave 2.5s ease-in-out infinite;
+}
+.cw-feedback-prompt--new .cw-feedback-stars button:nth-child(2) { animation-delay: .16s; }
+.cw-feedback-prompt--new .cw-feedback-stars button:nth-child(3) { animation-delay: .32s; }
+.cw-feedback-prompt--new .cw-feedback-stars button:nth-child(4) { animation-delay: .48s; }
+.cw-feedback-prompt--new .cw-feedback-stars button:nth-child(5) { animation-delay: .64s; }
+@keyframes cw-feedback-star-wave {
+    0%, 32%, 100% { filter: drop-shadow(0 0 0 transparent); transform: translateY(0); }
+    14% { filter: drop-shadow(0 0 5px #8b5cf6); transform: translateY(-2px); }
 }
 .cw-feedback-stars button {
     position: relative;
@@ -83,13 +120,18 @@
     position: absolute;
     right: 0;
     top: calc(100% + 7px);
-    white-space: nowrap;
+    max-width: min(320px, calc(100vw - 16px));
+    white-space: normal;
     background: #273349;
     color: #fff;
     border-radius: 5px;
     padding: 6px 9px;
     font-size: 11px;
 }
+.cw-feedback-tooltip--above {
+    top: auto;
+    bottom: calc(100% + 7px);
+}
 .cw-feedback-backdrop {
     position: fixed;
     inset: 0;
@@ -462,10 +504,39 @@ body.cw-feedback-capturing .cw-feedback-prompt {
     cursor: pointer;
 }
 .cw-feedback-prompt:has(.cw-feedback-review) {
-    min-width: 270px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 4px;
+    min-width: 0;
 }
 .cw-feedback-prompt:has(.cw-feedback-review) .cw-feedback-stars {
-    padding-right: 64px;
+    flex: 0 0 auto;
+    padding-right: 0;
+}
+.cw-feedback-prompt:has(.cw-feedback-review) .cw-feedback-prompt__change-hint {
+    grid-column: 1 / -1;
+    width: 100%;
+    max-width: 240px;
+    justify-self: center;
+    margin-top: 2px;
+    text-align: center;
+    white-space: normal;
+    overflow-wrap: anywhere;
+}
+.cw-feedback-prompt:has(.cw-feedback-review) .cw-feedback-prompt__label {
+    width: 100%;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+.cw-feedback-prompt:has(.cw-feedback-review) .cw-feedback-prompt__feature-context {
+    width: 100%;
+}
+.cw-feedback-prompt:has(.cw-feedback-review) .cw-feedback-review {
+    position: static;
+    margin: 2px 0 0;
+    padding: 0;
+    white-space: nowrap;
 }
 .cw-feedback-stars button:disabled {
     cursor: default;
@@ -497,7 +568,11 @@ body.cw-feedback-capturing .cw-feedback-prompt {
     border-radius: 50%;
     background: #bce8ce;
     color: #fff;
-    animation: cw-feedback-success-pop 600ms cubic-bezier(.2, 1.5, .35, 1) both;
+    animation: cw-feedback-success-pop 600ms cubic-bezier(.2, 1.5, .35, 1) both, cw-feedback-success-glow 2.4s 600ms ease-in-out infinite;
+}
+@keyframes cw-feedback-success-glow {
+    0%, 100% { box-shadow: 0 0 0 0 #16a34a20; }
+    50% { box-shadow: 0 0 0 12px #16a34a16, 0 0 28px 7px #16a34a50; }
 }
 .cw-feedback-success__check::after {
     content: "";
@@ -527,6 +602,8 @@ body.cw-feedback-capturing .cw-feedback-prompt {
     to { stroke-dashoffset: 0; }
 }
 @media (prefers-reduced-motion: reduce) {
+    .cw-feedback-prompt--new .cw-feedback-stars button,
+    .cw-feedback-inline-detail-prompt,
     .cw-feedback-success__check,
     .cw-feedback-success__check::after,
     .cw-feedback-success__check svg :is(path, polyline) {
@@ -596,7 +673,7 @@ body.cw-feedback-capturing .cw-feedback-prompt {
     color: #16a34a;
 }
 .cw-feedback-prompt:has(.cw-feedback-review) .cw-feedback-stars {
-    padding-right: 76px;
+    padding-right: 0;
 }
 .cw-feedback-hint {
     font-size: 12px;
@@ -703,8 +780,8 @@ body.cw-feedback-capturing .cw-feedback-prompt {
 }
 .cw-feedback-tooltip,
 .cw-feedback-range-tooltip {
-    background: var(--cw-feedback-tooltip-bg);
-    color: var(--cw-feedback-tooltip-text);
+    background: var(--cw-feedback-tooltip-bg, #273349);
+    color: var(--cw-feedback-tooltip-text, #fff);
 }
 .cw-feedback-range-tooltip:after {
     border-top-color: var(--cw-feedback-tooltip-bg);
@@ -759,7 +836,48 @@ body.cw-feedback-capturing .cw-feedback-prompt {
     font-weight: 500;
 }
 .cw-feedback-range {
-    margin-top: 24px;
+    margin-top: 18px;
+}
+.cw-feedback-range-tooltip {
+    width: max-content;
+    max-width: calc(100vw - 16px);
+    white-space: nowrap;
+    bottom: calc(100% + 20px);
+    transform: none;
+}
+@media (max-width: 480px) {
+    .cw-feedback-range-tooltip {
+        white-space: normal;
+    }
+}
+.cw-feedback-range-tooltip::after { display: none; }
+.cw-feedback-range__pointer {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: var(--cw-feedback-tooltip-bg, #344054);
+    transform: translateX(-50%);
+    pointer-events: none;
+}
+.cw-feedback-range__ticks {
+    display: flex;
+    justify-content: space-between;
+    height: 8px;
+    margin: -1px 2px 0;
+    pointer-events: none;
+}
+.cw-feedback-range__ticks span {
+    width: 1px;
+    height: 5px;
+    background: #cbd5e1;
+}
+.cw-feedback-range__ticks span.is-major {
+    height: 8px;
+}
+.cw-feedback-rating-options {
+    margin-top: 8px;
 }
 .cw-feedback-low-rating-intro {
     margin: 0 0 10px;
@@ -788,17 +906,31 @@ body.cw-feedback-capturing .cw-feedback-prompt {
     font-size: 13px;
 }
 .cw-feedback-inline-detail-prompt {
-    margin: 0;
+    margin: 10px 0 2px;
     color: var(--cw-feedback-accent);
     font-size: 13px;
     font-weight: 400;
     line-height: 1.35;
+    animation: cw-feedback-detail-arrive 1.15s ease-out both;
 }
 .cw-feedback-dialog__content > .cw-feedback-inline-detail-prompt {
-    margin-bottom: 10px;
+    margin-top: 14px;
+    margin-bottom: 3px;
+}
+@keyframes cw-feedback-detail-arrive {
+    0% { opacity: 0; filter: drop-shadow(0 0 8px var(--cw-feedback-accent)); transform: translateY(3px); }
+    55% { opacity: 1; filter: drop-shadow(0 0 5px var(--cw-feedback-accent)); }
+    100% { opacity: 1; filter: none; transform: translateY(0); }
 }
 .cw-feedback-useful-field {
-    margin-top: 8px;
+    margin-top: 6px;
+    gap: 3px;
+}
+.cw-feedback-useful-field .cw-feedback-inline-detail-prompt {
+    margin: 2px 0 0;
+}
+.cw-feedback-useful-prompt.cw-feedback-inline-detail-prompt {
+    margin: 4px 0 2px;
 }
 .cw-feedback-time-title {
     margin-top: 5px !important;
@@ -1047,7 +1179,7 @@ body .cw-feedback-dialog {
 .cw-feedback-gap__severity.medium { color: #ca8a04; }
 .cw-feedback-gap__severity.low { color: #64748b; }
 .cw-feedback-gap__detail-prompt {
-    margin: 0 0 8px;
+    margin: 10px 0 2px;
 }
 .cw-feedback-gap__remove {
     display: inline-flex;

package/dist/types.js

@@ -61,15 +61,15 @@ exports.defaultFeedbackCopy = {
     usefulTitle: "What part did you find most useful?",
     lowRatingUsefulTitle: "What did you find most useful?",
     usefulMoreDetailTitle: "What did you find most useful?",
-    usefulMoreDetailPrompt: "Could you share a little more detail to understand you better?",
+    usefulMoreDetailPrompt: "Could you share a little more detail before you move forward?",
     usefulPlaceholder: "The part that helped me most was...",
-    usefulMinimumWords: 10,
-    gapTitle: "What’s the biggest gap we could improve to make it better?",
+    usefulMinimumWords: 5,
+    gapTitle: "What is the biggest gap we could address to improve this response?",
     fiveStarGapTitle: "Is there anything we could improve to make this even better?",
     lowRatingIntroTitle: "We’re truly sorry. You deserve a better experience!",
     lowRatingIntroDescription: "Tell us what went wrong in a few quick steps, so we can make things better for you.",
-    gapSubtitle: "Help us help you better",
-    gapMoreDetailPrompt: "Could you share a little more detail to help you better?",
+    gapSubtitle: "Tell us what was missing, incorrect, or difficult to use.",
+    gapMoreDetailPrompt: "Could you share a little more detail before you move forward?",
     gapPlaceholder: "Tell us about the gap...",
     severityQuestion: "How severely does this issue impact your work?",
     severityLabels: { critical: "Critical", high: "High", medium: "Medium", low: "Low" },

package/dist/useFeedbackFlow.js

@@ -44,20 +44,17 @@ function useFeedbackFlow(requestId, featureId, metadata) {
     }, []);
     const changeRating = (0, react_1.useCallback)((value) => {
         hasInteracted.current = true;
-        if (rating !== value)
+        if (rating !== value || completed)
             clearDraft();
         setRating(value);
-    }, [clearDraft, rating]);
+    }, [clearDraft, completed, rating]);
     const close = (0, react_1.useCallback)(() => {
         setRatingLocked(true);
         setStep("closed");
     }, []);
     const selectRating = (0, react_1.useCallback)((value) => {
         hasInteracted.current = true;
-        // Keep the stars usable while their detail popup is open. Once dismissed,
-        // the closed card is read-only and the user resumes with Continue.
-        if (ratingLocked && step === "closed")
-            return;
+        // A confirmed re-rating can reopen a completed response.
         changeRating(value);
         setRatingBase(value);
         if (value === 5) {
@@ -72,7 +69,7 @@ function useFeedbackFlow(requestId, featureId, metadata) {
         }
         else
             setStep("closed");
-    }, [changeRating, ratingLocked, step]);
+    }, [changeRating]);
     const submission = (0, react_1.useMemo)(() => rating === null
         ? null
         : {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e-llm-studio/feedback-flow",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "private": false,
   "description": "Reusable configurable feedback rating and progressive feedback screens",
   "main": "./dist/index.js",