admesh-ui-sdk/dist/components/AdMeshRecommendations.d.ts

Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking. Includes zero-code SDK

export interface AdMeshRecommendationsProps {
    /** Optional callback when recommendations are shown */
    onRecommendationsShown?: (messageId: string) => void;
    /** Optional callback on error */
    onError?: (error: Error) => void;
    /**
     * Message ID for per-message recommendations.
     *
     * This is the primary identifier for fetching recommendations for a specific message.
     */
    messageId?: string;
    /**
     * User query text for generating recommendations.
     *
     * This is the query that will be used to fetch recommendations from the backend.
     * Typically the user's question or search query.
     *
     * IMPORTANT: This should be a non-empty string. If not provided or empty,
     * the component will skip rendering to prevent 400 Bad Request errors.
     * The backend requires a valid query parameter.
     */
    query?: string;
    /**
     * Callback to paste content to input field (for bridge format CTA button).
     * When provided, the bridge format will show a CTA button that pastes
     * the bridge_content into the input field when clicked.
     */
    onPasteToInput?: (content: string) => void;
    /**
     * Optional container ID for follow-up suggestions.
     * When provided and the recommendation includes a followup_query,
     * the SDK will automatically render the follow-up in this container.
     */
    followups_container_id?: string;
    /**
     * Callback to execute query when follow-up is selected (required for follow-up functionality).
     * When a user clicks on a follow-up suggestion, this callback is invoked with the followup_query.
     * This allows the platform to continue the conversation with the sponsored follow-up query.
     */
    onExecuteQuery?: (query: string) => void | Promise<void>;
    /**
     * Callback when a sponsored followup is detected.
     * This allows third-party applications to integrate the sponsored followup query into their own
     * followup suggestions UI (e.g., adding to a suggestions list, related questions section, etc.).
     *
     * When a user clicks the followup suggestion, the application should:
     * 1. Fire engagement tracking by calling the followupEngagementUrl
     * 2. Execute the followupQuery (e.g., submit it as a new user query)
     *
     * @param followupQuery - The sponsored followup query text to display to the user
     * @param followupEngagementUrl - The engagement tracking URL to call when user clicks the followup
     * @param recommendationId - The recommendation ID for tracking and correlation
     *
     * @example
     * ```tsx
     * <AdMeshRecommendations
     *   onFollowupDetected={(query, engagementUrl, recId) => {
     *     // Add to your suggestions list
     *     setSuggestions(prev => [...prev, {
     *       text: query,
     *       sponsored: true,
     *       engagementUrl,
     *       recommendationId: recId
     *     }]);
     *   }}
     * />
     * ```
     */
    onFollowupDetected?: (followupQuery: string, followupEngagementUrl: string, recommendationId: string) => void;
    /**
     * Signal indicating if the followup container is ready in the DOM.
     *
     * Useful for scenarios where the container is rendered conditionally or after a delay (e.g. streaming).
     * If provided, the component will wait until this is true before attempting to attach the portal.
     */
    isContainerReady?: boolean;
    /**
     * Optional user ID to override the context-provided user ID.
     * Useful for per-message or specific user tracking scenarios.
     */
    userId?: string;
}
/**
 * AdMeshRecommendations - Citation/Product Format Recommendation Display
 *
 * Displays recommendations as a separate UI component. Handles all the complexity:
 * - Uses provided messageId directly
 * - Generates container IDs for recommendations
 * - Calls SDK's showRecommendations()
 *
 * For Weave Ad Format (where AdMesh links are embedded in LLM response),
 * use WeaveAdFormatContainer component instead.
 *
 * @example
 * ```tsx
 * // Per-message recommendations with messageId
 * <AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
 *   {messages.map((msg) => (
 * <div key={msg.messageId}>
 *       {msg.content}
 *       {msg.role === 'assistant' && (
 * <AdMeshRecommendations
 * messageId={msg.messageId}
 *           query={msg.userQuery}
 *         />
 *       )}
 *     </div>
 *   ))}
 * </AdMeshProvider>
 * ```
 *
 * @example
 * ```tsx
 * // Format is auto-detected from brand agent's preferred_format
 * <AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
 *   <Chat messages={messages} />
 *   <AdMeshRecommendations
 *     messageId={lastMessageId}
 *     query="best CRM for small business"
 *   />
 * </AdMeshProvider>
 * ```
 */
export declare const AdMeshRecommendations: ({ onRecommendationsShown, onError, messageId, query, onPasteToInput, followups_container_id: _followups_container_id, onExecuteQuery: _onExecuteQuery, onFollowupDetected, isContainerReady, userId: propUserId, }: AdMeshRecommendationsProps) => import("react/jsx-runtime").JSX.Element | null;
export default AdMeshRecommendations;
//# sourceMappingURL=AdMeshRecommendations.d.ts.map