@e-llm-studio/feedback-flow 0.0.0-stage → 0.1.31

package/dist/FeedbackPrompt.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties, type ReactNode, type Ref } from 'react';
+import type { FeedbackFlowController } from './useFeedbackFlow';
+import { type FeedbackCopy, type FeedbackPromptClassNames, type FeedbackPromptStyles, type FeedbackTheme } from './types';
+export interface FeedbackPromptProps {
+    flow: FeedbackFlowController;
+    copy?: Partial<FeedbackCopy>;
+    theme?: FeedbackTheme;
+    compact?: boolean;
+    promptRef?: Ref<HTMLDivElement>;
+    extraContent?: ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+    onBeforeOpen?: () => void;
+    onRatingSelected?: (rating: number) => void;
+    className?: string;
+    style?: CSSProperties;
+    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;

package/dist/FeedbackPrompt.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackPrompt = FeedbackPrompt;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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, }) {
+    const copy = (0, types_1.createFeedbackCopy)(copyOverrides);
+    const [hovered, setHovered] = (0, react_1.useState)(null);
+    const [selectedTooltipStar, setSelectedTooltipStar] = (0, react_1.useState)(null);
+    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' : '',
+            className,
+            classNames?.root,
+        ]
+            .filter(Boolean)
+            .join(' '), style: {
+            ...(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: () => {
+                    if (flow.rating === null || flow.step !== 'closed')
+                        return;
+                    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);
+                } }), 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: () => {
+                    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
+                    ? 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"] })] }));
+}

package/dist/FeedbackScreenshotThumbnail.d.ts

@@ -0,0 +1,9 @@
+import type { FeedbackAttachmentRef } from './types';
+interface FeedbackScreenshotThumbnailProps {
+    screenshot: File | FeedbackAttachmentRef;
+    resolveUrl?: (gcsUrl: string, forceRefresh?: boolean) => Promise<string>;
+    onOpen: (url: string, name: string) => void;
+    onRemove: () => void;
+}
+export declare function FeedbackScreenshotThumbnail({ screenshot, resolveUrl, onOpen, onRemove }: FeedbackScreenshotThumbnailProps): import("react").JSX.Element;
+export {};

package/dist/FeedbackScreenshotThumbnail.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackScreenshotThumbnail = FeedbackScreenshotThumbnail;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const feedbackUpload_1 = require("./feedbackUpload");
+function FeedbackScreenshotThumbnail({ screenshot, resolveUrl, onOpen, onRemove }) {
+    const [url, setUrl] = (0, react_1.useState)(null);
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    const [retry, setRetry] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        setFailed(false);
+        if ('attachmentId' in screenshot) {
+            if (resolveUrl && screenshot.gcsUrl.startsWith('gs://')) {
+                let active = true;
+                setUrl(null);
+                resolveUrl(screenshot.gcsUrl, retry > 0)
+                    .then((signedUrl) => { if (active)
+                    setUrl(signedUrl); })
+                    .catch(() => { if (active)
+                    setFailed(true); });
+                return () => { active = false; };
+            }
+            setUrl(screenshot.publicUrl || (0, feedbackUpload_1.feedbackScreenshotPublicUrl)(screenshot.gcsUrl));
+            return;
+        }
+        const objectUrl = URL.createObjectURL(screenshot);
+        setUrl(objectUrl);
+        return () => URL.revokeObjectURL(objectUrl);
+    }, [screenshot, resolveUrl, retry]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-file-item", children: [url ? ((0, jsx_runtime_1.jsxs)("button", { className: "cw-feedback-file-preview", type: "button", "aria-label": `Preview screenshot ${screenshot.name}`, onClick: () => onOpen(url, screenshot.name), children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: "", loading: "lazy", onError: () => { setUrl(null); setFailed(true); } }), (0, jsx_runtime_1.jsx)("span", { children: screenshot.name })] })) : failed ? ((0, jsx_runtime_1.jsxs)("button", { className: "cw-feedback-file-retry", type: "button", onClick: () => setRetry((value) => value + 1), children: ["Retry preview: ", screenshot.name] })) : ((0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-file-name", children: screenshot.name })), (0, jsx_runtime_1.jsx)("button", { className: "cw-feedback-file-remove", type: "button", "aria-label": `Remove screenshot ${screenshot.name}`, onClick: onRemove, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, "aria-hidden": "true" }) })] }));
+}

package/dist/StarRating.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties } from 'react';
+import { type FeedbackTheme, type StarRatingClassNames, type StarRatingStyles } from './types';
+export interface StarRatingProps {
+    value: number | null;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    groupLabel?: string;
+    starLabel?: (star: number) => string;
+    theme?: FeedbackTheme;
+    onHoverChange?: (star: number | null) => void;
+    className?: string;
+    style?: CSSProperties;
+    styles?: StarRatingStyles;
+    classNames?: StarRatingClassNames;
+}
+/** Configurable accessible five-star control, also used by the progressive feedback prompt. */
+export declare function StarRating({ value, onChange, disabled, groupLabel, starLabel, theme, onHoverChange, className, style, styles, classNames, }: StarRatingProps): JSX.Element;

package/dist/StarRating.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StarRating = StarRating;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const types_1 = require("./types");
+/** Configurable accessible five-star control, also used by the progressive feedback prompt. */
+function StarRating({ value, onChange, disabled = false, groupLabel = 'Rate this response', starLabel = (star) => `${star} star${star === 1 ? '' : 's'}`, theme, onHoverChange, className, style, styles, classNames, }) {
+    const mergedTheme = (0, types_1.createFeedbackTheme)(theme);
+    const [hovered, setHovered] = (0, react_1.useState)(null);
+    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));
+        }) }));
+}

package/dist/featureAvailability.d.ts

@@ -0,0 +1,21 @@
+export interface FeatureAvailabilityWindow {
+    enabled?: boolean;
+    startsAt?: string | null;
+    endsAt?: string | null;
+    uiNewTtl?: string | null;
+}
+export interface FeatureAvailabilityApi {
+    getFeatureAvailability(modeId: string, featureId: string): Promise<FeatureAvailabilityWindow | null>;
+}
+/** Replace this adapter with the feature-availability endpoint when its contract is available. */
+export declare function createMockFeatureAvailabilityApi(windows: Record<string, FeatureAvailabilityWindow>): FeatureAvailabilityApi;
+export interface HttpFeatureAvailabilityOptions {
+    baseUrl: string;
+    getAuthToken: () => string | undefined;
+    fetcher?: typeof fetch;
+}
+/** Reads one mode's feature list, reusing the request across cards in that mode. */
+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 useFeatureAvailability(modeId: string | undefined, featureId: string, api: FeatureAvailabilityApi | undefined, enabled: boolean): boolean;

package/dist/featureAvailability.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMockFeatureAvailabilityApi = createMockFeatureAvailabilityApi;
+exports.createHttpFeatureAvailabilityApi = createHttpFeatureAvailabilityApi;
+exports.isFeatureAvailable = isFeatureAvailable;
+exports.useFeatureAvailability = useFeatureAvailability;
+const react_1 = require("react");
+/** Replace this adapter with the feature-availability endpoint when its contract is available. */
+function createMockFeatureAvailabilityApi(windows) {
+    return {
+        async getFeatureAvailability(_modeId, featureId) {
+            return windows[featureId] ?? null;
+        },
+    };
+}
+const MODE_FEATURES_PATH = "/segment_click_analytics/v1/api/mode-features";
+const MODE_FEATURES_CACHE_MS = 60000;
+/** Reads one mode's feature list, reusing the request across cards in that mode. */
+function createHttpFeatureAvailabilityApi(options) {
+    const cache = new Map();
+    return {
+        async getFeatureAvailability(modeId, featureId) {
+            const token = options.getAuthToken();
+            if (!modeId || !token)
+                throw new Error("Feature availability requires a mode ID and auth token");
+            const url = `${options.baseUrl.replace(/\/$/, "")}${MODE_FEATURES_PATH}/${encodeURIComponent(modeId)}`;
+            const cacheKey = `${url}:${token}`;
+            let cached = cache.get(cacheKey);
+            if (!cached || cached.expiresAt <= Date.now()) {
+                const promise = (options.fetcher ?? fetch)(url, {
+                    headers: { accept: "application/json", Authorization: `Bearer ${token}` },
+                }).then(async (response) => {
+                    if (!response.ok)
+                        throw new Error(`Feature availability lookup failed (${response.status})`);
+                    const body = await response.json();
+                    if (body.mode_id !== modeId || !Array.isArray(body.features))
+                        throw new Error("Feature availability response did not match the requested mode");
+                    return body.features;
+                });
+                cached = { expiresAt: Date.now() + MODE_FEATURES_CACHE_MS, promise };
+                cache.set(cacheKey, cached);
+                void promise.catch(() => { if (cache.get(cacheKey)?.promise === promise)
+                    cache.delete(cacheKey); });
+            }
+            const feature = (await cached.promise).find((row) => row.feature_id === featureId);
+            if (!feature)
+                return null;
+            return {
+                enabled: true,
+                startsAt: feature.start_date,
+                endsAt: feature.end_date,
+                uiNewTtl: feature.ui_new_ttl,
+            };
+        },
+    };
+}
+function isFeatureAvailable(window, now = Date.now()) {
+    if (!window || window.enabled === false)
+        return false;
+    const start = window.startsAt ? Date.parse(window.startsAt) : null;
+    const end = window.endsAt ? Date.parse(window.endsAt) : null;
+    const ttl = window.uiNewTtl ? Date.parse(window.uiNewTtl) : null;
+    return (start === null || (Number.isFinite(start) && start <= now)) &&
+        (end === null || (Number.isFinite(end) && now < end)) &&
+        (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) {
+    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;
+    (0, react_1.useEffect)(() => {
+        if (!enabled || !modeId || !api)
+            return;
+        let cancelled = false;
+        setResult(null);
+        void api.getFeatureAvailability(modeId, featureId)
+            .then((window) => { if (!cancelled)
+            setResult({ modeId, featureId, window }); })
+            .catch(() => { if (!cancelled)
+            setResult({ modeId, featureId, window: null }); });
+        return () => { cancelled = true; };
+    }, [api, enabled, featureId, modeId]);
+    (0, react_1.useEffect)(() => {
+        if (!enabled || !window)
+            return;
+        const update = () => setNow(Date.now());
+        const boundaries = [window.startsAt, window.endsAt, window.uiNewTtl]
+            .filter((value) => Boolean(value))
+            .map((value) => Date.parse(value))
+            .filter((time) => Number.isFinite(time) && time > now);
+        const next = Math.min(...boundaries);
+        const timer = Number.isFinite(next)
+            ? setTimeout(update, Math.min(next - now + 1, 2147483647))
+            : undefined;
+        document.addEventListener("visibilitychange", update);
+        return () => {
+            if (timer !== undefined)
+                clearTimeout(timer);
+            document.removeEventListener("visibilitychange", update);
+        };
+    }, [enabled, now, window]);
+    return !enabled || (Boolean(modeId) && isFeatureAvailable(window, now));
+}