posthog-js 1.347.2 → 1.349.0

package/dist/src/extensions/conversations/external/components/ConversationsWidget.d.ts

@@ -1,17 +1,31 @@
 import { h, Component } from 'preact';
-import { ConversationsRemoteConfig, Message, ConversationsWidgetState, UserProvidedTraits } from '../../../../posthog-conversations-types';
+import { ConversationsRemoteConfig, Message, ConversationsWidgetState, UserProvidedTraits, Ticket } from '../../../../posthog-conversations-types';
+/**
+ * Type for the current view in the widget
+ */
+export type WidgetView = 'tickets' | 'messages';
 interface WidgetProps {
     config: ConversationsRemoteConfig;
     initialState?: ConversationsWidgetState;
     initialUserTraits?: UserProvidedTraits | null;
     isUserIdentified?: boolean;
+    initialView?: WidgetView;
+    initialTickets?: Ticket[];
+    hasMultipleTickets?: boolean;
     onSendMessage: (message: string) => Promise<void>;
     onStateChange?: (state: ConversationsWidgetState) => void;
     onIdentify?: (traits: UserProvidedTraits) => void;
+    onSelectTicket?: (ticketId: string) => void;
+    onNewConversation?: () => void;
+    onBackToTickets?: () => void;
+    onViewChange?: (view: WidgetView) => void;
 }
 interface WidgetState {
     state: ConversationsWidgetState;
+    view: WidgetView;
     messages: Message[];
+    tickets: Ticket[];
+    ticketsLoading: boolean;
     inputValue: string;
     isLoading: boolean;
     error: string | null;
@@ -21,6 +35,7 @@ interface WidgetState {
     formEmailError: string | null;
     userTraits: UserProvidedTraits | null;
     unreadCount: number;
+    hasMultipleTickets: boolean;
 }
 export declare class ConversationsWidget extends Component<WidgetProps, WidgetState> {
     private _messagesEndRef;
@@ -37,6 +52,9 @@ export declare class ConversationsWidget extends Component<WidgetProps, WidgetSt
     private _focusInput;
     private _handleToggleOpen;
     private _handleClose;
+    private _handleSelectTicket;
+    private _handleNewConversation;
+    private _handleBackToTickets;
     private _handleInputChange;
     private _handleKeyPress;
     private _handleFormNameChange;
@@ -44,7 +62,6 @@ export declare class ConversationsWidget extends Component<WidgetProps, WidgetSt
     private _validateEmail;
     private _handleFormSubmit;
     private _handleSendMessage;
-    private _formatTime;
     /**
      * Public method to add messages from outside
      */
@@ -74,8 +91,32 @@ export declare class ConversationsWidget extends Component<WidgetProps, WidgetSt
      * Set the unread message count (called by manager)
      */
     setUnreadCount(count: number): void;
+    /**
+     * Update the tickets list (called by manager during polling)
+     */
+    updateTickets(tickets: Ticket[]): void;
+    /**
+     * Set the current view (tickets list or messages)
+     */
+    setView(view: WidgetView): void;
+    /**
+     * Get the current view
+     */
+    getView(): WidgetView;
+    /**
+     * Set tickets loading state
+     */
+    setTicketsLoading(loading: boolean): void;
+    /**
+     * Clear messages (used when switching tickets or starting new conversation)
+     * @param addGreeting - If true, adds the greeting message after clearing
+     */
+    clearMessages(addGreeting?: boolean): void;
     private _renderIdentificationForm;
     private _renderMessage;
+    private _renderBackButton;
+    private _renderTicketList;
+    private _renderMessages;
     render(): h.JSX.Element;
 }
 export {};

package/dist/src/extensions/conversations/external/components/TicketListItem.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'preact';
+import { Ticket } from '../../../../posthog-conversations-types';
+import { getStyles } from './styles';
+interface TicketListItemProps {
+    ticket: Ticket;
+    styles: ReturnType<typeof getStyles>;
+    onClick: (ticketId: string) => void;
+}
+/**
+ * A single ticket item in the ticket list
+ */
+export declare const TicketListItem: FunctionComponent<TicketListItemProps>;
+export {};

package/dist/src/extensions/conversations/external/components/TicketListView.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'preact';
+import { Ticket } from '../../../../posthog-conversations-types';
+import { getStyles } from './styles';
+interface TicketListViewProps {
+    tickets: Ticket[];
+    isLoading: boolean;
+    styles: ReturnType<typeof getStyles>;
+    onSelectTicket: (ticketId: string) => void;
+    onNewConversation: () => void;
+}
+/**
+ * Ticket list view showing all user's tickets
+ */
+export declare const TicketListView: FunctionComponent<TicketListViewProps>;
+export {};

package/dist/src/extensions/conversations/external/components/styles.d.ts

@@ -166,6 +166,7 @@ export declare const getStyles: (primaryColor: string, position?: WidgetPosition
     };
     windowOpen: {
         width: string;
+        maxWidth: string;
         height: string;
         maxHeight: string;
     };
@@ -371,4 +372,187 @@ export declare const getStyles: (primaryColor: string, position?: WidgetPosition
         color: string;
         fontWeight: number;
     };
+    ticketListContainer: {
+        flex: number;
+        display: string;
+        flexDirection: "column";
+        background: string;
+        overflowY: "auto";
+    };
+    ticketList: {
+        flex: number;
+        overflowY: "auto";
+    };
+    ticketItem: {
+        padding: string;
+        borderBottom: string;
+        cursor: string;
+        transition: string;
+        background: string;
+        display: string;
+        alignItems: string;
+        gap: string;
+    };
+    ticketItemUnread: {
+        background: string;
+    };
+    ticketItemContent: {
+        display: string;
+        flexDirection: "column";
+        gap: string;
+        flex: number;
+        minWidth: number;
+    };
+    ticketItemArrow: {
+        color: string;
+        flexShrink: number;
+        display: string;
+        alignItems: string;
+    };
+    ticketItemHeader: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        gap: string;
+    };
+    ticketPreview: {
+        fontSize: string;
+        color: string;
+        lineHeight: number;
+        flex: number;
+        overflow: string;
+        textOverflow: string;
+        whiteSpace: "nowrap";
+    };
+    ticketPreviewUnread: {
+        fontSize: string;
+        color: string;
+        lineHeight: number;
+        flex: number;
+        overflow: string;
+        textOverflow: string;
+        whiteSpace: "nowrap";
+        fontWeight: number;
+    };
+    ticketUnreadBadge: {
+        minWidth: string;
+        height: string;
+        borderRadius: string;
+        background: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        padding: string;
+        flexShrink: number;
+    };
+    ticketMeta: {
+        display: string;
+        alignItems: string;
+        gap: string;
+    };
+    ticketTime: {
+        fontSize: string;
+        color: string;
+    };
+    ticketStatus: {
+        fontSize: string;
+        color: string;
+        background: string;
+        padding: string;
+        borderRadius: string;
+        textTransform: "uppercase";
+        letterSpacing: string;
+    };
+    newConversationButton: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        margin: string;
+        padding: string;
+        borderRadius: string;
+        background: string;
+        color: string;
+        border: string;
+        cursor: string;
+        fontSize: string;
+        fontWeight: number;
+        transition: string;
+    };
+    ticketListLoading: {
+        flex: number;
+        display: string;
+        flexDirection: "column";
+        alignItems: string;
+        justifyContent: string;
+        gap: string;
+        color: string;
+        fontSize: string;
+    };
+    loadingSpinner: {
+        width: string;
+        height: string;
+        border: string;
+        borderTop: string;
+        borderRadius: string;
+        animation: string;
+    };
+    ticketListEmpty: {
+        flex: number;
+        display: string;
+        flexDirection: "column";
+        alignItems: string;
+        justifyContent: string;
+        padding: string;
+        textAlign: "center";
+    };
+    emptyStateIcon: {
+        color: string;
+        marginBottom: string;
+    };
+    emptyStateTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        marginBottom: string;
+    };
+    emptyStateDescription: {
+        fontSize: string;
+        color: string;
+        lineHeight: number;
+        marginBottom: string;
+    };
+    newConversationButtonLarge: {
+        padding: string;
+        borderRadius: string;
+        background: string;
+        color: string;
+        border: string;
+        cursor: string;
+        fontSize: string;
+        fontWeight: number;
+        transition: string;
+    };
+    backButton: {
+        background: string;
+        border: string;
+        color: string;
+        cursor: string;
+        padding: string;
+        marginRight: string;
+        fontSize: string;
+        lineHeight: number;
+        borderRadius: string;
+        transition: string;
+        opacity: number;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    headerWithBack: {
+        display: string;
+        alignItems: string;
+    };
 };

package/dist/src/extensions/conversations/external/components/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Format a timestamp to a relative time string
+ */
+export declare function formatRelativeTime(isoString: string | undefined): string;
+/**
+ * Truncate text to a maximum length with ellipsis
+ */
+export declare function truncateText(text: string | undefined, maxLength: number): string;

package/dist/src/extensions/conversations/external/index.d.ts

@@ -17,6 +17,10 @@ export declare class ConversationsManager implements ConversationsManagerInterfa
     private _isWidgetEnabled;
     private _isDomainAllowed;
     private _isWidgetRendered;
+    private _initializeWidgetPromise;
+    private _currentView;
+    private _tickets;
+    private _hasMultipleTickets;
     constructor(config: ConversationsRemoteConfig, _posthog: PostHog);
     /**
      * Send a message programmatically via the API
@@ -45,8 +49,10 @@ export declare class ConversationsManager implements ConversationsManagerInterfa
     private _initialize;
     /**
      * Initialize and render the widget UI
+     * Uses a promise guard to prevent race conditions from concurrent calls
      */
     private _initializeWidget;
+    private _doInitializeWidget;
     /**
      * Get initial user traits from PostHog or localStorage
      */
@@ -80,7 +86,39 @@ export declare class ConversationsManager implements ConversationsManagerInterfa
      */
     private _pollMessages;
     /**
-     * Start polling for new messages
+     * Poll for tickets list
+     */
+    private _pollTickets;
+    /**
+     * Load tickets list from API
+     */
+    private _loadTickets;
+    /**
+     * Main poll function that polls based on current view
+     */
+    private _poll;
+    /**
+     * Handle view changes from the widget
+     */
+    private _handleViewChange;
+    /**
+     * Handle ticket selection from the list
+     */
+    private _handleSelectTicket;
+    /**
+     * Handle new conversation request
+     */
+    private _handleNewConversation;
+    /**
+     * Handle back to tickets request
+     */
+    private _handleBackToTickets;
+    /**
+     * Determine initial view based on ticket count
+     */
+    private _determineInitialView;
+    /**
+     * Start polling based on current view
      */
     private _startPolling;
     /**

package/dist/src/extensions/product-tours/product-tours-utils.d.ts

@@ -37,5 +37,6 @@ export declare function getSpotlightStyle(targetRect: DOMRect, padding?: number)
 export declare function addProductTourCSSVariablesToElement(element: HTMLElement, appearance?: ProductTourAppearance): void;
 export declare function renderTipTapContent(content: any): string;
 export declare function normalizeUrl(url: string): string;
+export declare function resolveStepTranslation(step: ProductTourStep, lang: string | null): ProductTourStep;
 export declare function getStepImageUrls(step: ProductTourStep): string[];
 export declare function getStepHtml(step: ProductTourStep): string;

package/dist/src/extensions/product-tours/product-tours.d.ts

@@ -14,6 +14,7 @@ export declare class ProductTourManager {
     private _preloadedImageUrls;
     constructor(instance: PostHog);
     private _preloadTourImages;
+    private _getCurrentStep;
     private _setStepIndex;
     private _saveSessionState;
     private _clearSessionState;
@@ -44,6 +45,8 @@ export declare class ProductTourManager {
     private _removeTriggerSelectorListener;
     private _removeAllTriggerListeners;
     private _captureEvent;
+    private _captureStepShown;
+    private _captureStepSelectorFailed;
     getActiveProductTours(callback: ProductTourCallback): void;
     resetTour(tourId: string): void;
     resetAllTours(): void;

package/dist/src/posthog-product-tours-types.d.ts

@@ -48,6 +48,8 @@ export interface ProductTourSurveyQuestion {
     lowerBoundLabel?: string;
     /** Label for high end of rating scale (e.g., "Very likely") */
     upperBoundLabel?: string;
+    submitButtonText?: string;
+    backButtonText?: string;
 }
 export interface ProductTourStep {
     id: string;
@@ -75,6 +77,18 @@ export interface ProductTourStep {
     buttons?: ProductTourStepButtons;
     /** Banner configuration (only for banner steps) */
     bannerConfig?: ProductTourBannerConfig;
+    /** translation data for this tour step */
+    translations?: Record<string, ProductTourStepTranslation>;
+}
+/** all translatable content for a given tour step */
+export interface ProductTourStepTranslation {
+    content?: ProductTourStep['content'];
+    contentHtml?: ProductTourStep['contentHtml'];
+    buttons?: {
+        primary?: Pick<ProductTourStepButton, 'text'>;
+        secondary?: Pick<ProductTourStepButton, 'text'>;
+    };
+    survey?: Pick<ProductTourSurveyQuestion, 'questionText' | 'lowerBoundLabel' | 'upperBoundLabel' | 'submitButtonText' | 'backButtonText'>;
 }
 export interface ProductTourConditions {
     url?: string;
@@ -137,3 +151,43 @@ export interface ShowTourOptions {
     reason?: ProductTourRenderReason;
     enableStrictValidation?: boolean;
 }
+export declare enum ProductTourEventName {
+    SHOWN = "product tour shown",
+    DISMISSED = "product tour dismissed",
+    COMPLETED = "product tour completed",
+    STEP_SHOWN = "product tour step shown",
+    STEP_COMPLETED = "product tour step completed",
+    BUTTON_CLICKED = "product tour button clicked",
+    STEP_SELECTOR_FAILED = "product tour step selector failed",
+    BANNER_CONTAINER_SELECTOR_FAILED = "product tour banner container selector failed"
+}
+export declare enum ProductTourEventProperties {
+    TOUR_ID = "$product_tour_id",
+    TOUR_NAME = "$product_tour_name",
+    TOUR_ITERATION = "$product_tour_iteration",
+    TOUR_RENDER_REASON = "$product_tour_render_reason",
+    TOUR_STEP_ID = "$product_tour_step_id",
+    TOUR_STEP_ORDER = "$product_tour_step_order",
+    TOUR_STEP_TYPE = "$product_tour_step_type",
+    TOUR_DISMISS_REASON = "$product_tour_dismiss_reason",
+    TOUR_BUTTON_TEXT = "$product_tour_button_text",
+    TOUR_BUTTON_ACTION = "$product_tour_button_action",
+    TOUR_BUTTON_LINK = "$product_tour_button_link",
+    TOUR_BUTTON_TOUR_ID = "$product_tour_button_tour_id",
+    TOUR_STEPS_COUNT = "$product_tour_steps_count",
+    TOUR_STEP_SELECTOR = "$product_tour_step_selector",
+    TOUR_STEP_SELECTOR_FOUND = "$product_tour_step_selector_found",
+    TOUR_STEP_ELEMENT_TAG = "$product_tour_step_element_tag",
+    TOUR_STEP_ELEMENT_ID = "$product_tour_step_element_id",
+    TOUR_STEP_ELEMENT_CLASSES = "$product_tour_step_element_classes",
+    TOUR_STEP_ELEMENT_TEXT = "$product_tour_step_element_text",
+    TOUR_ERROR = "$product_tour_error",
+    TOUR_MATCHES_COUNT = "$product_tour_matches_count",
+    TOUR_FAILURE_PHASE = "$product_tour_failure_phase",
+    TOUR_WAITED_FOR_ELEMENT = "$product_tour_waited_for_element",
+    TOUR_WAIT_DURATION_MS = "$product_tour_wait_duration_ms",
+    TOUR_BANNER_SELECTOR = "$product_tour_banner_selector",
+    TOUR_LINKED_SURVEY_ID = "$product_tour_linked_survey_id",
+    USE_MANUAL_SELECTOR = "$use_manual_selector",
+    INFERENCE_DATA_PRESENT = "$inference_data_present"
+}

package/dist/surveys-preview.d.ts

@@ -1733,6 +1733,8 @@ interface ProductTourSurveyQuestion {
     lowerBoundLabel?: string;
     /** Label for high end of rating scale (e.g., "Very likely") */
     upperBoundLabel?: string;
+    submitButtonText?: string;
+    backButtonText?: string;
 }
 interface ProductTourStep {
     id: string;
@@ -1760,6 +1762,18 @@ interface ProductTourStep {
     buttons?: ProductTourStepButtons;
     /** Banner configuration (only for banner steps) */
     bannerConfig?: ProductTourBannerConfig;
+    /** translation data for this tour step */
+    translations?: Record<string, ProductTourStepTranslation>;
+}
+/** all translatable content for a given tour step */
+interface ProductTourStepTranslation {
+    content?: ProductTourStep['content'];
+    contentHtml?: ProductTourStep['contentHtml'];
+    buttons?: {
+        primary?: Pick<ProductTourStepButton, 'text'>;
+        secondary?: Pick<ProductTourStepButton, 'text'>;
+    };
+    survey?: Pick<ProductTourSurveyQuestion, 'questionText' | 'lowerBoundLabel' | 'upperBoundLabel' | 'submitButtonText' | 'backButtonText'>;
 }
 interface ProductTourConditions {
     url?: string;

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.347.2",
+    "version": "1.349.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",

package/lib/src/extensions/conversations/external/components/ConversationsWidget.d.ts

@@ -1,17 +1,31 @@
 import { h, Component } from 'preact';
-import { ConversationsRemoteConfig, Message, ConversationsWidgetState, UserProvidedTraits } from '../../../../posthog-conversations-types';
+import { ConversationsRemoteConfig, Message, ConversationsWidgetState, UserProvidedTraits, Ticket } from '../../../../posthog-conversations-types';
+/**
+ * Type for the current view in the widget
+ */
+export type WidgetView = 'tickets' | 'messages';
 interface WidgetProps {
     config: ConversationsRemoteConfig;
     initialState?: ConversationsWidgetState;
     initialUserTraits?: UserProvidedTraits | null;
     isUserIdentified?: boolean;
+    initialView?: WidgetView;
+    initialTickets?: Ticket[];
+    hasMultipleTickets?: boolean;
     onSendMessage: (message: string) => Promise<void>;
     onStateChange?: (state: ConversationsWidgetState) => void;
     onIdentify?: (traits: UserProvidedTraits) => void;
+    onSelectTicket?: (ticketId: string) => void;
+    onNewConversation?: () => void;
+    onBackToTickets?: () => void;
+    onViewChange?: (view: WidgetView) => void;
 }
 interface WidgetState {
     state: ConversationsWidgetState;
+    view: WidgetView;
     messages: Message[];
+    tickets: Ticket[];
+    ticketsLoading: boolean;
     inputValue: string;
     isLoading: boolean;
     error: string | null;
@@ -21,6 +35,7 @@ interface WidgetState {
     formEmailError: string | null;
     userTraits: UserProvidedTraits | null;
     unreadCount: number;
+    hasMultipleTickets: boolean;
 }
 export declare class ConversationsWidget extends Component<WidgetProps, WidgetState> {
     private _messagesEndRef;
@@ -37,6 +52,9 @@ export declare class ConversationsWidget extends Component<WidgetProps, WidgetSt
     private _focusInput;
     private _handleToggleOpen;
     private _handleClose;
+    private _handleSelectTicket;
+    private _handleNewConversation;
+    private _handleBackToTickets;
     private _handleInputChange;
     private _handleKeyPress;
     private _handleFormNameChange;
@@ -44,7 +62,6 @@ export declare class ConversationsWidget extends Component<WidgetProps, WidgetSt
     private _validateEmail;
     private _handleFormSubmit;
     private _handleSendMessage;
-    private _formatTime;
     /**
      * Public method to add messages from outside
      */
@@ -74,8 +91,32 @@ export declare class ConversationsWidget extends Component<WidgetProps, WidgetSt
      * Set the unread message count (called by manager)
      */
     setUnreadCount(count: number): void;
+    /**
+     * Update the tickets list (called by manager during polling)
+     */
+    updateTickets(tickets: Ticket[]): void;
+    /**
+     * Set the current view (tickets list or messages)
+     */
+    setView(view: WidgetView): void;
+    /**
+     * Get the current view
+     */
+    getView(): WidgetView;
+    /**
+     * Set tickets loading state
+     */
+    setTicketsLoading(loading: boolean): void;
+    /**
+     * Clear messages (used when switching tickets or starting new conversation)
+     * @param addGreeting - If true, adds the greeting message after clearing
+     */
+    clearMessages(addGreeting?: boolean): void;
     private _renderIdentificationForm;
     private _renderMessage;
+    private _renderBackButton;
+    private _renderTicketList;
+    private _renderMessages;
     render(): h.JSX.Element;
 }
 export {};