@syntrologie/adapt-faq 2.16.0 → 2.18.0

package/dist/FAQWidget.js

@@ -1,375 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Adaptive FAQ - FAQWidget Component
- *
- * React component that renders a collapsible Q&A accordion with per-item
- * conditional visibility based on triggerWhen decision strategies.
- *
- * Demonstrates the compositional action pattern where child actions
- * (faq:question) serve as configuration data for the parent widget.
- */
-import { purple } from '@syntro/design-system/tokens';
-import { Marked } from 'marked';
-import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-const marked = new Marked({ async: false, gfm: true, breaks: true });
-import { baseStyles, themeStyles } from './faq-styles';
-// ============================================================================
-// Helpers
-// ============================================================================
-/** Extract plain text from an FAQAnswer for search matching */
-function getAnswerText(answer) {
-    if (typeof answer === 'string')
-        return answer;
-    if (answer.type === 'rich')
-        return answer.html;
-    return answer.content;
-}
-/** Render an FAQAnswer based on its type */
-function renderAnswer(answer) {
-    if (typeof answer === 'string') {
-        const html = marked.parse(answer);
-        return (
-        // biome-ignore lint/security/noDangerouslySetInnerHtml: content is CMS/config content, not user-controlled input
-        _jsx("div", { style: { margin: 0 }, "data-faq-markdown": "", dangerouslySetInnerHTML: { __html: html } }));
-    }
-    if (answer.type === 'rich') {
-        // biome-ignore lint/security/noDangerouslySetInnerHtml: content is pre-sanitized by backend — FAQAnswer.html is CMS/config content, not user-controlled input
-        return _jsx("div", { style: { margin: 0 }, dangerouslySetInnerHTML: { __html: answer.html } });
-    }
-    // markdown — parse to HTML and render
-    const html = marked.parse(answer.content);
-    return (
-    // biome-ignore lint/security/noDangerouslySetInnerHtml: markdown content is CMS/config content, not user-controlled input
-    _jsx("div", { style: { margin: 0 }, "data-faq-markdown": "", dangerouslySetInnerHTML: { __html: html } }));
-}
-/** Resolve feedback config into a normalized FeedbackConfig or null */
-function resolveFeedbackConfig(feedback) {
-    if (!feedback)
-        return null;
-    if (feedback === true) {
-        return { style: 'thumbs' };
-    }
-    return feedback;
-}
-/** Get the feedback prompt text */
-function getFeedbackPrompt(feedbackConfig) {
-    return feedbackConfig.prompt || 'Was this helpful?';
-}
-function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, feedbackConfig, feedbackValue, onFeedback, }) {
-    const [isHovered, setIsHovered] = useState(false);
-    const colors = themeStyles[theme];
-    const { question, answer } = item.config;
-    const itemStyle = {
-        ...baseStyles.item,
-        ...colors.item,
-        ...(isExpanded ? colors.itemExpanded : {}),
-        ...(isHighlighted
-            ? {
-                // purple[4] = #6a59ce — design system primary purple
-                boxShadow: `0 0 0 2px ${purple[4]}, 0 0 12px rgba(106, 89, 206, 0.4)`,
-                transition: 'box-shadow 0.3s ease',
-            }
-            : {}),
-        ...(!isLast ? { borderBottom: 'var(--sc-content-item-divider, none)' } : {}),
-    };
-    const questionStyle = {
-        ...baseStyles.question,
-        ...colors.question,
-        ...(isHovered ? colors.questionHover : {}),
-    };
-    const chevronStyle = {
-        ...baseStyles.chevron,
-        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-    };
-    const answerStyle = {
-        ...baseStyles.answer,
-        ...colors.answer,
-        maxHeight: isExpanded ? '500px' : '0',
-        paddingBottom: isExpanded ? '16px' : '0',
-    };
-    const feedbackStyle = {
-        ...baseStyles.feedback,
-        ...colors.feedbackPrompt,
-    };
-    return (_jsxs("div", { style: itemStyle, "data-faq-item-id": item.config.id, children: [_jsxs("button", { type: "button", style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [_jsx("span", { children: question }), _jsx("span", { style: chevronStyle, children: '\u203A' })] }), _jsxs("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [renderAnswer(answer), isExpanded && feedbackConfig && (_jsxs("div", { style: feedbackStyle, children: [_jsx("span", { children: getFeedbackPrompt(feedbackConfig) }), _jsx("button", { type: "button", style: {
-                                    ...baseStyles.feedbackButton,
-                                    ...(feedbackValue === 'up' ? baseStyles.feedbackButtonSelected : {}),
-                                }, "aria-label": "Thumbs up", onClick: () => onFeedback(item.config.id, question, 'up'), children: '\uD83D\uDC4D' }), _jsx("button", { type: "button", style: {
-                                    ...baseStyles.feedbackButton,
-                                    ...(feedbackValue === 'down' ? baseStyles.feedbackButtonSelected : {}),
-                                }, "aria-label": "Thumbs down", onClick: () => onFeedback(item.config.id, question, 'down'), children: '\uD83D\uDC4E' })] }))] })] }));
-}
-// ============================================================================
-// FAQWidget Component
-// ============================================================================
-/**
- * FAQWidget - Renders a collapsible Q&A accordion with per-item activation.
- *
- * This component demonstrates the compositional action pattern:
- * - Parent (FAQWidget) receives `config.actions` array
- * - Each action has optional `triggerWhen` for per-item visibility
- * - Parent evaluates triggerWhen and filters visible questions
- * - Parent manages expand state and re-rendering on context changes
- */
-export function FAQWidget({ config, runtime, instanceId }) {
-    // Force re-render when context/accumulator changes.
-    // renderTick is used as a useMemo dependency to invalidate cached triggerWhen evaluations.
-    const [renderTick, forceUpdate] = useReducer((x) => x + 1, 0);
-    // Track expanded question IDs
-    const [expandedIds, setExpandedIds] = useState(new Set());
-    // Track which item is flash-highlighted from a deep-link
-    const [highlightId, setHighlightId] = useState(null);
-    // Search query state
-    const [searchQuery, setSearchQuery] = useState('');
-    // Track feedback state per item
-    const [feedbackState, setFeedbackState] = useState(new Map());
-    // Resolve feedback config
-    const feedbackConfig = useMemo(() => resolveFeedbackConfig(config.feedback), [config.feedback]);
-    // Subscribe to context changes for reactive updates
-    useEffect(() => {
-        const unsubscribe = runtime.context.subscribe(() => {
-            forceUpdate();
-        });
-        return unsubscribe;
-    }, [runtime.context]);
-    // Subscribe to accumulator changes for event_count-based triggerWhen
-    useEffect(() => {
-        if (!runtime.accumulator?.subscribe)
-            return;
-        return runtime.accumulator.subscribe(() => {
-            forceUpdate();
-        });
-    }, [runtime.accumulator]);
-    // Subscribe to faq:open:* events from overlay CTA clicks
-    useEffect(() => {
-        if (!runtime.events.subscribe)
-            return;
-        // Check EventBus history for pending faq:open events
-        // (may have fired before this widget mounted, e.g. when canvas was closed)
-        if (runtime.events.getRecent) {
-            const recentEvents = runtime.events.getRecent({ patterns: ['^action\\.tooltip_cta_clicked$', '^action\\.modal_cta_clicked$'] }, 10);
-            const pendingEvent = recentEvents
-                .filter((e) => {
-                const actionId = e.props?.actionId;
-                return typeof actionId === 'string' && actionId.startsWith('faq:open:');
-            })
-                .pop(); // Most recent
-            if (pendingEvent && Date.now() - pendingEvent.ts < 10000) {
-                const questionId = pendingEvent.props.actionId.replace('faq:open:', '');
-                setExpandedIds(new Set([questionId]));
-                // Scroll into view after render
-                requestAnimationFrame(() => {
-                    const el = document.querySelector(`[data-faq-item-id="${questionId}"]`);
-                    if (el)
-                        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                });
-            }
-        }
-        // Subscribe to future CTA events
-        const unsubscribe = runtime.events.subscribe({ patterns: ['^action\\.tooltip_cta_clicked$', '^action\\.modal_cta_clicked$'] }, (event) => {
-            const actionId = event.props?.actionId;
-            if (typeof actionId !== 'string' || !actionId.startsWith('faq:open:'))
-                return;
-            const questionId = actionId.replace('faq:open:', '');
-            setExpandedIds(new Set([questionId]));
-            // Scroll the question into view
-            requestAnimationFrame(() => {
-                const el = document.querySelector(`[data-faq-item-id="${questionId}"]`);
-                if (el)
-                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            });
-            // Request canvas open (for future tile-based FAQ rendering)
-            runtime.events.publish('canvas.requestOpen');
-        });
-        return unsubscribe;
-    }, [runtime]);
-    // Subscribe to notification.deep_link events (from insertHtml deepLink clicks + notification toasts)
-    useEffect(() => {
-        if (!runtime.events.subscribe)
-            return;
-        const handleDeepLink = (event) => {
-            const tileId = event.props?.tileId;
-            const itemId = event.props?.itemId;
-            // Only handle if this deep link targets our tile
-            if (tileId !== instanceId)
-                return;
-            if (!itemId)
-                return;
-            // Expand the target item
-            setExpandedIds(new Set([itemId]));
-            // Flash-highlight the item
-            setHighlightId(itemId);
-            setTimeout(() => setHighlightId(null), 1500);
-            // Scroll into view after render
-            requestAnimationFrame(() => {
-                const el = document.querySelector(`[data-faq-item-id="${itemId}"]`);
-                if (el)
-                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            });
-        };
-        // Check recent events (may have fired before widget mounted, e.g. canvas was closed)
-        if (runtime.events.getRecent) {
-            const recent = runtime.events.getRecent({ names: ['notification.deep_link'] }, 5);
-            const pending = recent
-                .filter((e) => e.props?.tileId === instanceId && e.props?.itemId)
-                .pop();
-            if (pending && Date.now() - pending.ts < 10000) {
-                handleDeepLink(pending);
-            }
-        }
-        // Subscribe to future events
-        const unsubscribe = runtime.events.subscribe({ names: ['notification.deep_link'] }, handleDeepLink);
-        return unsubscribe;
-    }, [runtime, instanceId]);
-    // Filter visible questions based on per-item triggerWhen
-    // biome-ignore lint/correctness/useExhaustiveDependencies: renderTick is intentionally included to force re-evaluation when the runtime's mutable context changes (subscribed above via forceUpdate)
-    const visibleQuestions = useMemo(() => (config.actions ?? []).filter((q) => {
-        // No triggerWhen = always visible
-        if (!q.triggerWhen)
-            return true;
-        // Evaluate the decision strategy
-        const result = runtime.evaluateSync(q.triggerWhen);
-        return result.value;
-    }), [config.actions, runtime, renderTick]);
-    // NOTE: faq:question_revealed is now published by useNotifyWatcher in
-    // ShadowCanvasOverlay (always mounted), so it fires even with drawer closed.
-    // Apply priority ordering
-    const orderedQuestions = useMemo(() => {
-        if (config.ordering === 'priority') {
-            return [...visibleQuestions].sort((a, b) => (b.config.priority ?? 0) - (a.config.priority ?? 0));
-        }
-        // 'static' or undefined — preserve config order
-        return visibleQuestions;
-    }, [visibleQuestions, config.ordering]);
-    // Apply search filter
-    const filteredQuestions = useMemo(() => {
-        if (!config.searchable || !searchQuery.trim()) {
-            return orderedQuestions;
-        }
-        const query = searchQuery.toLowerCase();
-        return orderedQuestions.filter((q) => q.config.question.toLowerCase().includes(query) ||
-            getAnswerText(q.config.answer).toLowerCase().includes(query) ||
-            q.config.category?.toLowerCase().includes(query));
-    }, [orderedQuestions, searchQuery, config.searchable]);
-    // Group by category
-    const categoryGroups = useMemo(() => {
-        const groups = new Map();
-        for (const q of filteredQuestions) {
-            const cat = q.config.category;
-            if (!groups.has(cat)) {
-                groups.set(cat, []);
-            }
-            groups.get(cat).push(q);
-        }
-        return groups;
-    }, [filteredQuestions]);
-    // Check if any items have categories
-    const hasCategories = useMemo(() => filteredQuestions.some((q) => q.config.category), [filteredQuestions]);
-    // Resolve theme (auto -> detect system preference)
-    const resolvedTheme = useMemo(() => {
-        if (config.theme && config.theme !== 'auto')
-            return config.theme;
-        // Check system preference (SSR-safe)
-        if (typeof window !== 'undefined') {
-            return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
-        return 'light';
-    }, [config.theme]);
-    // Handle question toggle
-    const handleToggle = useCallback((id) => {
-        setExpandedIds((prev) => {
-            const next = new Set(prev);
-            if (config.expandBehavior === 'single') {
-                // Single mode: collapse all others
-                if (prev.has(id)) {
-                    return new Set();
-                }
-                return new Set([id]);
-            }
-            // Multiple mode: toggle this one
-            if (prev.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.add(id);
-            }
-            return next;
-        });
-        // Publish toggle event for analytics
-        runtime.events.publish('faq:toggled', {
-            instanceId,
-            questionId: id,
-            expanded: !expandedIds.has(id),
-            timestamp: Date.now(),
-        });
-    }, [config.expandBehavior, runtime.events, instanceId, expandedIds]);
-    // Handle feedback
-    const handleFeedback = useCallback((itemId, question, value) => {
-        setFeedbackState((prev) => {
-            const next = new Map(prev);
-            next.set(itemId, value);
-            return next;
-        });
-        runtime.events.publish('faq:feedback', {
-            itemId,
-            question,
-            value,
-        });
-    }, [runtime.events]);
-    // Compute styles
-    const containerStyle = {
-        ...baseStyles.container,
-        ...themeStyles[resolvedTheme].container,
-    };
-    const searchInputStyle = {
-        ...baseStyles.searchInput,
-        ...themeStyles[resolvedTheme].searchInput,
-    };
-    const emptyStateStyle = {
-        ...baseStyles.emptyState,
-        ...themeStyles[resolvedTheme].emptyState,
-    };
-    const categoryHeaderStyle = {
-        ...baseStyles.categoryHeader,
-        ...themeStyles[resolvedTheme].categoryHeader,
-    };
-    // Render a list of FAQ items
-    const renderItems = (items) => items.map((q, index) => (_jsx(FAQItem, { item: q, isExpanded: expandedIds.has(q.config.id), isHighlighted: highlightId === q.config.id, isLast: index === items.length - 1, onToggle: () => handleToggle(q.config.id), theme: resolvedTheme, feedbackConfig: feedbackConfig, feedbackValue: feedbackState.get(q.config.id), onFeedback: handleFeedback }, q.config.id)));
-    // Empty state (no visible questions at all)
-    if (visibleQuestions.length === 0) {
-        return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: _jsx("div", { style: emptyStateStyle, children: "You're all set for now! We'll surface answers here when they're relevant to what you're doing." }) }));
-    }
-    return (_jsxs("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && (_jsxs("div", { style: baseStyles.searchWrapper, children: [_jsx("style", { children: `[data-adaptive-id="${instanceId}"] input::placeholder { color: var(--sc-content-search-color, inherit); opacity: 0.7; }` }), _jsx("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: searchInputStyle })] })), _jsx("div", { style: baseStyles.accordion, children: hasCategories
-                    ? Array.from(categoryGroups.entries()).map(([category, items]) => (_jsxs(React.Fragment, { children: [category && (_jsx("div", { style: categoryHeaderStyle, "data-category-header": category, children: category })), renderItems(items)] }, category ?? '__ungrouped')))
-                    : renderItems(filteredQuestions) }), config.searchable && filteredQuestions.length === 0 && searchQuery && (_jsxs("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ["No questions found matching \"", searchQuery, "\""] }))] }));
-}
-// ============================================================================
-// Mountable Widget Interface
-// ============================================================================
-/**
- * Mountable widget interface for the runtime's WidgetRegistry.
- */
-export const FAQMountableWidget = {
-    mount(container, config) {
-        const { runtime, instanceId = 'faq-widget', ...faqConfig } = config || {
-            expandBehavior: 'single',
-            searchable: false,
-            theme: 'auto',
-            actions: [],
-        };
-        // React rendering when runtime + ReactDOM are available
-        if (runtime && typeof createRoot === 'function') {
-            const root = createRoot(container);
-            root.render(React.createElement(FAQWidget, {
-                config: faqConfig,
-                runtime: runtime,
-                instanceId,
-            }));
-            return () => {
-                root.unmount();
-            };
-        }
-    },
-};
-export default FAQWidget;