@financial-times/qanda-ui 0.0.1-beta.26 → 0.0.1-beta.28

package/dist/cjs/components/FloatingActionBar/index.js

@@ -14,7 +14,7 @@ const tracking_1 = require("../../utils/tracking");
 function LiveIndicator() {
     return ((0, jsx_runtime_1.jsx)("div", { className: "o-labels-indicator--live o3-type-label floating-action-bar__live-container", children: (0, jsx_runtime_1.jsx)("span", { className: "o-labels-indicator__status floating-action-bar__live-label", children: "Live" }) }));
 }
-function FloatingActionBar({ showLiveIndicator = true, }) {
+function FloatingActionBar({ isLive = true }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const isMobile = (0, useIsMobile_1.useIsMobile)();
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
@@ -22,39 +22,41 @@ function FloatingActionBar({ showLiveIndicator = true, }) {
         storyId,
         useStaging,
         commentsAPIUrl,
+    }, {
+        skip: !isLive,
     });
     const handleShowUpdates = () => {
         (0, updateComments_1.updateComments)(dispatch, updatedComments, storyId, useStaging, commentsAPIUrl);
-        // Scrolling to start of qanda blocks container
-        const element = document.getElementById('qanda__blocks-container');
+        // Scrolling to start of qanda stream title
+        const element = document.getElementById('qanda__stream-title');
         if (element) {
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
     const showExpertView = (0, react_redux_1.useSelector)((state) => state.expert.expertView);
     const userConfig = {
-        descripton: 'Ask a question',
+        description: 'Ask a question',
         testIdSuffix: 'ask-a-question-button',
         onClick: () => dispatch((0, questionSlice_1.openForm)()),
         dataTrackable: 'open_question_form',
     };
     const expertConfig = {
-        descripton: 'Answer Q&A',
+        description: 'Answer Q&A',
         testIdSuffix: 'answer-a-qanda-button',
         onClick: () => dispatch((0, expertSlice_1.openExpertForm)()),
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": (0, tracking_1.trackingNS)('floating-action-bar'), children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [showLiveIndicator && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
-                                    ariaLabel: view.descripton,
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": (0, tracking_1.trackingNS)('floating-action-bar'), children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [isLive && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                    ariaLabel: view.description,
                                     'data-trackable': (0, tracking_1.trackingNS)(view.dataTrackable),
-                                    'data-trackable-context-action': view.descripton,
+                                    'data-trackable-context-action': view.description,
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
-                                }, label: view.descripton, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                }, label: view.description, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: 'Back to top',
                                     'data-trackable': (0, tracking_1.trackingNS)('back_to_top'),
                                     'data-trackable-context-action': 'Back to top',
                                     'data-testid': 'floating-action-bar__back-to-top-button',
-                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", children: updatedComments.length }))] })] }));
+                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
 }
 exports.default = FloatingActionBar;

package/dist/cjs/components/QandaContainer.js

@@ -87,6 +87,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             },
         });
     }, [data, status]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { isLive: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
 }
 exports.default = QandaContainer;

package/dist/cjs/components/Stream/index.js

@@ -28,7 +28,7 @@ function Stream({ status = 'pre-live' }) {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });
     }, [latestAnsweredQuestionId]);
-    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && ((0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", children: data.status && data.status === 'pre-live'
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && ((0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", id: "qanda__stream-title", children: data.status && data.status === 'pre-live'
                     ? 'Top questions so far'
                     : 'What our readers are asking' })), (0, jsx_runtime_1.jsxs)("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && ((0, jsx_runtime_1.jsx)(Loader_1.default, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
                         data.qandas &&

package/dist/cjs/services/comments-api.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUpdatedQA = exports.useUpdatedComments = exports.usePostQuestionMutation = exports.useGetUserRolesQuery = exports.useGetQandAUpdatesQuery = exports.useGetQandAStreamQuery = exports.nextCommentsApi = exports.eventSource = void 0;
+exports.useUpdatedQA = exports.useUpdatedComments = exports.usePostQuestionMutation = exports.useGetUserRolesQuery = exports.useGetQandAUpdatesQuery = exports.useGetQandAStreamQuery = exports.nextCommentsApi = exports.eventSource = exports.updateTypes = void 0;
 const react_1 = require("@reduxjs/toolkit/query/react");
-// TODO: ensure that users don't miss out on updates in this window
-// https://financialtimes.atlassian.net/browse/CI-2715
+const stream_1 = require("../store/stream");
+const reliability_1 = require("./reliability");
+// NB: this could do with a refactor to split things out into smaller files: see https://redux-toolkit.js.org/rtk-query/usage/code-splitting
+// NB: adding retry limit would be a good idea https://financialtimes.atlassian.net/browse/CI-2715
 const retryDelay = 1000;
-const updateTypes = {
+exports.updateTypes = {
     QA_NEW_REPLY: 'updatedComments',
     QA_UPDATE: 'updatedQA',
 };
@@ -37,13 +39,28 @@ exports.nextCommentsApi = (0, react_1.createApi)({
             queryFn: async ({ storyId, useStaging, commentsAPIUrl, }) => {
                 return { data: {} };
             },
-            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
+            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved, dispatch, getState, }) {
                 await cacheDataLoaded;
                 const connectToSSE = () => {
                     const sseEndpoint = `${arg.commentsAPIUrl}/story/${arg.storyId}/updates${arg.useStaging ? '?staging=1' : ''}`;
                     exports.eventSource = new EventSource(sseEndpoint);
-                    exports.eventSource.onopen = () => {
+                    exports.eventSource.onopen = async () => {
                         console.log(`Connected to SSE: ${sseEndpoint}`);
+                        const state = getState();
+                        const lastEventId = state.stream.mostRecentUpdate;
+                        if (lastEventId !== null && lastEventId !== undefined) {
+                            try {
+                                await dispatch(exports.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                                    storyId: arg.storyId,
+                                    useStaging: arg.useStaging,
+                                    commentsAPIUrl: arg.commentsAPIUrl,
+                                    lastEventId: `${lastEventId}`,
+                                }));
+                            }
+                            catch (error) {
+                                reliability_1.qandaReliability.failure('qa-updates', error);
+                            }
+                        }
                     };
                     exports.eventSource.onmessage = (event) => {
                         try {
@@ -51,10 +68,14 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                             console.log('Received SSE update:', data);
                             if (data && data.type) {
                                 updateCachedData((draft) => {
-                                    const updatedData = updateTypes[data.type];
+                                    const updatedData = exports.updateTypes[data.type];
                                     draft[updatedData] = draft[updatedData] || [];
                                     draft[updatedData].push(data.payload);
                                 });
+                                // Store the lastEventId for use in reconnection
+                                if (event.lastEventId) {
+                                    dispatch((0, stream_1.setMostRecentUpdate)(event.lastEventId));
+                                }
                             }
                         }
                         catch (error) {
@@ -94,6 +115,19 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                 }
             },
         }),
+        // CATCHUP UPDATES
+        getCatchupUpdates: builder.query({
+            query: ({ storyId, useStaging, commentsAPIUrl, lastEventId, }) => `${commentsAPIUrl}/story/${storyId}/catchup-updates?${useStaging ? 'staging=1&' : ''}${`lastEventId=${lastEventId}`}`,
+            transformResponse: (response) => {
+                const updatedComments = response?.comments.map((comment) => {
+                    return comment.data;
+                });
+                return {
+                    updatedComments,
+                    lastEventId: response?.lastEventId,
+                };
+            },
+        }),
         // USER ROLES
         getUserRoles: builder.query({
             query: ({ storyId, useStaging, commentsAPIUrl, token, }) => ({
@@ -130,11 +164,12 @@ exports.nextCommentsApi = (0, react_1.createApi)({
 exports.useGetQandAStreamQuery = exports.nextCommentsApi.useGetQandAStreamQuery, exports.useGetQandAUpdatesQuery = exports.nextCommentsApi.useGetQandAUpdatesQuery, exports.useGetUserRolesQuery = exports.nextCommentsApi.useGetUserRolesQuery, exports.usePostQuestionMutation = exports.nextCommentsApi.usePostQuestionMutation;
 // UPDATES QUERY CUSTOM HOOKS
 // custom hook for getting just the updated comments from the updates, so we are more efficient
-const useUpdatedComments = ({ storyId, useStaging, commentsAPIUrl, }) => {
+const useUpdatedComments = ({ storyId, useStaging, commentsAPIUrl }, options) => {
     return exports.nextCommentsApi.useGetQandAUpdatesQuery({ storyId, useStaging, commentsAPIUrl }, {
         selectFromResult: ({ data }) => ({
             updatedComments: data?.updatedComments || [],
         }),
+        skip: options?.skip || false,
     }).updatedComments;
 };
 exports.useUpdatedComments = useUpdatedComments;

package/dist/cjs/services/listeners-middleware.js

@@ -0,0 +1,103 @@
+"use strict";
+/**
+ * @fileoverview RTK Query listener middleware for Q&A stream events
+ *
+ * This module contains Redux Toolkit listeners that respond to RTK Query events
+ * and update the application state accordingly. Currently handles:
+ * - Tracking the most recent update timestamp from live Q&A streams
+ *
+ * @see https://redux-toolkit.js.org/api/createListenerMiddleware
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listenerMiddleware = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const comments_api_1 = require("./comments-api");
+const stream_1 = require("../store/stream");
+exports.listenerMiddleware = (0, toolkit_1.createListenerMiddleware)();
+/**
+ * Calculates the most recent update timestamp from a list of Q&A questions
+ *
+ * @param qandas - Array of Comment objects representing questions with nested answers
+ * @returns The timestamp (in milliseconds) of the most recent answer, 0 if no answers found
+ *
+ * @example
+ * const timestamp = getMostRecentUpdateTime(qandas);
+ * // Returns: 167253120 (example timestamp)
+ */
+// we have a v similar functin in src/utils/qandas.ts
+function getMostRecentUpdateTime(qandas) {
+    if (!qandas.length ||
+        !Array.isArray(qandas[0].children) ||
+        !qandas[0].children.length) {
+        return 0; // no answers or no content at all
+    }
+    // we should be getting the comments back in a date desc by most recent answer from the API
+    const mostRecentUpdate = qandas[0].children.reduce((mostRecent, answer) => {
+        const publishedDateTimestamp = new Date(answer.publishedDate).getTime();
+        return publishedDateTimestamp > mostRecent
+            ? publishedDateTimestamp
+            : mostRecent;
+    }, 0);
+    return mostRecentUpdate;
+}
+/**
+ * Listener: Updates most recent timestamp when live Q&A stream data is fetched
+ *
+ * Responds to successful getQandAStream queries with status='live' and extracts
+ * the most recent answer timestamp to store in Redux state. This timestamp is
+ * used for reconnection logic and catching up on missed updates.
+ *
+ * @listens nextCommentsApi.endpoints.getQandAStream.matchFulfilled
+ * @dispatches setMostRecentUpdate - Updates stream.mostRecentUpdate in Redux store
+ */
+exports.listenerMiddleware.startListening({
+    matcher: (0, toolkit_1.isAnyOf)(comments_api_1.nextCommentsApi.endpoints.getQandAStream.matchFulfilled),
+    effect: (action, listenerApi) => {
+        const { payload, meta } = action;
+        const { storyId, useStaging, commentsAPIUrl, status } = meta.arg.originalArgs;
+        // Check if this is a live stream QUERY, not response. If it is a live query we get questions and answers.
+        const isLiveStream = status === 'live';
+        if (isLiveStream && payload.qandas) {
+            const mostRecentUpdate = getMostRecentUpdateTime(payload.qandas);
+            // Update the store with the most recent update as a string
+            if (mostRecentUpdate !== undefined) {
+                console.log(`Setting most recent update for story ${storyId}: ${mostRecentUpdate}`);
+                listenerApi.dispatch((0, stream_1.setMostRecentUpdate)(`${mostRecentUpdate}`));
+            }
+            listenerApi.dispatch(comments_api_1.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                storyId: storyId,
+                useStaging: useStaging,
+                commentsAPIUrl: commentsAPIUrl,
+                lastEventId: `${mostRecentUpdate}`,
+            }));
+        }
+    },
+});
+/**
+ * Listener: Updates updates cache and most recent update when catchup comments are received
+ *
+ * Responds to successful getCatchupUpdates queries and adds them to the updates list
+ *
+ * @listens nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled
+ * @dispatches  nextCommentsApi.util.updateQueryData - Updates the cache of updated comments in the store
+ * @dispatches setMostRecentUpdate - Updates stream.mostRecentUpdate in Redux store
+ */
+exports.listenerMiddleware.startListening({
+    matcher: comments_api_1.nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled,
+    effect: (action, listenerApi) => {
+        const { payload, meta } = action;
+        const { storyId, useStaging, commentsAPIUrl } = meta.arg.originalArgs;
+        const { updatedComments, lastEventId } = payload;
+        console.log('Received catchup updates, new event id:', lastEventId);
+        const updateType = comments_api_1.updateTypes['QA_NEW_REPLY'];
+        if (Array.isArray(updatedComments) && updatedComments.length) {
+            listenerApi.dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
+                draft[updateType] = draft[updateType] || [];
+                draft[updateType].push(...updatedComments);
+            }));
+        }
+        if (typeof lastEventId === 'string') {
+            listenerApi.dispatch((0, stream_1.setMostRecentUpdate)(lastEventId));
+        }
+    },
+});

package/dist/cjs/store/index.js

@@ -12,6 +12,7 @@ const user_1 = require("./user");
 const expertSlice_1 = __importDefault(require("./expertSlice"));
 const comments_api_1 = require("../services/comments-api");
 const error_middleware_1 = require("../services/error-middleware");
+const listeners_middleware_1 = require("../services/listeners-middleware");
 exports.rootReducer = (0, toolkit_1.combineReducers)({
     stream: stream_1.stream.reducer,
     question: questionSlice_1.default,
@@ -22,6 +23,7 @@ exports.rootReducer = (0, toolkit_1.combineReducers)({
 exports.store = (0, toolkit_1.configureStore)({
     reducer: exports.rootReducer,
     middleware: (getDefaultMiddleware) => getDefaultMiddleware()
+        .prepend(listeners_middleware_1.listenerMiddleware.middleware)
         .concat(comments_api_1.nextCommentsApi.middleware)
         .concat(error_middleware_1.rtkQueryErrorLogger),
 });

package/dist/cjs/store/stream.js

@@ -1,9 +1,11 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLatestAnsweredQuestionId = exports.stream = exports.initialState = void 0;
+exports.setMostRecentUpdate = exports.setLatestAnsweredQuestionId = exports.stream = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 exports.initialState = {
     latestAnsweredQuestionId: '',
+    mostRecentUpdate: null,
 };
 exports.stream = (0, toolkit_1.createSlice)({
     name: 'stream',
@@ -12,6 +14,9 @@ exports.stream = (0, toolkit_1.createSlice)({
         setLatestAnsweredQuestionId: (state, action) => {
             state.latestAnsweredQuestionId = action.payload;
         },
+        setMostRecentUpdate: (state, action) => {
+            state.mostRecentUpdate = action.payload;
+        },
     },
 });
-exports.setLatestAnsweredQuestionId = exports.stream.actions.setLatestAnsweredQuestionId;
+_a = exports.stream.actions, exports.setLatestAnsweredQuestionId = _a.setLatestAnsweredQuestionId, exports.setMostRecentUpdate = _a.setMostRecentUpdate;

package/dist/esm/components/FloatingActionBar/index.js

@@ -12,7 +12,7 @@ import { trackingNS } from '../../utils/tracking';
 function LiveIndicator() {
     return (_jsx("div", { className: "o-labels-indicator--live o3-type-label floating-action-bar__live-container", children: _jsx("span", { className: "o-labels-indicator__status floating-action-bar__live-label", children: "Live" }) }));
 }
-function FloatingActionBar({ showLiveIndicator = true, }) {
+function FloatingActionBar({ isLive = true }) {
     const dispatch = useDispatch();
     const isMobile = useIsMobile();
     const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
@@ -20,39 +20,41 @@ function FloatingActionBar({ showLiveIndicator = true, }) {
         storyId,
         useStaging,
         commentsAPIUrl,
+    }, {
+        skip: !isLive,
     });
     const handleShowUpdates = () => {
         updateComments(dispatch, updatedComments, storyId, useStaging, commentsAPIUrl);
-        // Scrolling to start of qanda blocks container
-        const element = document.getElementById('qanda__blocks-container');
+        // Scrolling to start of qanda stream title
+        const element = document.getElementById('qanda__stream-title');
         if (element) {
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
     const showExpertView = useSelector((state) => state.expert.expertView);
     const userConfig = {
-        descripton: 'Ask a question',
+        description: 'Ask a question',
         testIdSuffix: 'ask-a-question-button',
         onClick: () => dispatch(openForm()),
         dataTrackable: 'open_question_form',
     };
     const expertConfig = {
-        descripton: 'Answer Q&A',
+        description: 'Answer Q&A',
         testIdSuffix: 'answer-a-qanda-button',
         onClick: () => dispatch(openExpertForm()),
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    return (_jsxs("div", { className: "floating-action-bar__container", "data-trackable": trackingNS('floating-action-bar'), children: [_jsx("div", { className: "floating-action-bar__fade-overlay" }), _jsxs("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [showLiveIndicator && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", children: [_jsx(Button, { attributes: {
-                                    ariaLabel: view.descripton,
+    return (_jsxs("div", { className: "floating-action-bar__container", "data-trackable": trackingNS('floating-action-bar'), children: [_jsx("div", { className: "floating-action-bar__fade-overlay" }), _jsxs("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [isLive && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", children: [_jsx(Button, { attributes: {
+                                    ariaLabel: view.description,
                                     'data-trackable': trackingNS(view.dataTrackable),
-                                    'data-trackable-context-action': view.descripton,
+                                    'data-trackable-context-action': view.description,
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
-                                }, label: view.descripton, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), _jsx(Button, { attributes: {
+                                }, label: view.description, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), _jsx(Button, { attributes: {
                                     ariaLabel: 'Back to top',
                                     'data-trackable': trackingNS('back_to_top'),
                                     'data-trackable-context-action': 'Back to top',
                                     'data-testid': 'floating-action-bar__back-to-top-button',
-                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && (_jsx("div", { className: "floating-action-bar__updates-counter o3-type-detail", children: updatedComments.length }))] })] }));
+                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && (_jsx("div", { className: "floating-action-bar__updates-counter o3-type-detail", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
 }
 export default FloatingActionBar;

package/dist/esm/components/QandaContainer.js

@@ -82,6 +82,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             },
         });
     }, [data, status]);
-    return (_jsxs("div", { className: "qanda-container", children: [error && (_jsxs("p", { children: ["We are not able to load ", PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), _jsx(Survey, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer }))] })), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+    return (_jsxs("div", { className: "qanda-container", children: [error && (_jsxs("p", { children: ["We are not able to load ", PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), _jsx(Survey, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { isLive: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer }))] })), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
 }
 export default QandaContainer;

package/dist/esm/components/Stream/index.js

@@ -23,7 +23,7 @@ function Stream({ status = 'pre-live' }) {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });
     }, [latestAnsweredQuestionId]);
-    return (_jsxs("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && (_jsx("h2", { className: "o3-type-title-md qanda__stream-title", children: data.status && data.status === 'pre-live'
+    return (_jsxs("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && (_jsx("h2", { className: "o3-type-title-md qanda__stream-title", id: "qanda__stream-title", children: data.status && data.status === 'pre-live'
                     ? 'Top questions so far'
                     : 'What our readers are asking' })), _jsxs("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && (_jsx(Loader, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && (_jsx(ErrorMessage, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
                         data.qandas &&

package/dist/esm/services/comments-api.js

@@ -1,8 +1,10 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-// TODO: ensure that users don't miss out on updates in this window
-// https://financialtimes.atlassian.net/browse/CI-2715
+import { setMostRecentUpdate } from '../store/stream';
+import { qandaReliability } from './reliability';
+// NB: this could do with a refactor to split things out into smaller files: see https://redux-toolkit.js.org/rtk-query/usage/code-splitting
+// NB: adding retry limit would be a good idea https://financialtimes.atlassian.net/browse/CI-2715
 const retryDelay = 1000;
-const updateTypes = {
+export const updateTypes = {
     QA_NEW_REPLY: 'updatedComments',
     QA_UPDATE: 'updatedQA',
 };
@@ -34,13 +36,28 @@ export const nextCommentsApi = createApi({
             queryFn: async ({ storyId, useStaging, commentsAPIUrl, }) => {
                 return { data: {} };
             },
-            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
+            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved, dispatch, getState, }) {
                 await cacheDataLoaded;
                 const connectToSSE = () => {
                     const sseEndpoint = `${arg.commentsAPIUrl}/story/${arg.storyId}/updates${arg.useStaging ? '?staging=1' : ''}`;
                     eventSource = new EventSource(sseEndpoint);
-                    eventSource.onopen = () => {
+                    eventSource.onopen = async () => {
                         console.log(`Connected to SSE: ${sseEndpoint}`);
+                        const state = getState();
+                        const lastEventId = state.stream.mostRecentUpdate;
+                        if (lastEventId !== null && lastEventId !== undefined) {
+                            try {
+                                await dispatch(nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                                    storyId: arg.storyId,
+                                    useStaging: arg.useStaging,
+                                    commentsAPIUrl: arg.commentsAPIUrl,
+                                    lastEventId: `${lastEventId}`,
+                                }));
+                            }
+                            catch (error) {
+                                qandaReliability.failure('qa-updates', error);
+                            }
+                        }
                     };
                     eventSource.onmessage = (event) => {
                         try {
@@ -52,6 +69,10 @@ export const nextCommentsApi = createApi({
                                     draft[updatedData] = draft[updatedData] || [];
                                     draft[updatedData].push(data.payload);
                                 });
+                                // Store the lastEventId for use in reconnection
+                                if (event.lastEventId) {
+                                    dispatch(setMostRecentUpdate(event.lastEventId));
+                                }
                             }
                         }
                         catch (error) {
@@ -91,6 +112,19 @@ export const nextCommentsApi = createApi({
                 }
             },
         }),
+        // CATCHUP UPDATES
+        getCatchupUpdates: builder.query({
+            query: ({ storyId, useStaging, commentsAPIUrl, lastEventId, }) => `${commentsAPIUrl}/story/${storyId}/catchup-updates?${useStaging ? 'staging=1&' : ''}${`lastEventId=${lastEventId}`}`,
+            transformResponse: (response) => {
+                const updatedComments = response?.comments.map((comment) => {
+                    return comment.data;
+                });
+                return {
+                    updatedComments,
+                    lastEventId: response?.lastEventId,
+                };
+            },
+        }),
         // USER ROLES
         getUserRoles: builder.query({
             query: ({ storyId, useStaging, commentsAPIUrl, token, }) => ({
@@ -127,11 +161,12 @@ export const nextCommentsApi = createApi({
 export const { useGetQandAStreamQuery, useGetQandAUpdatesQuery, useGetUserRolesQuery, usePostQuestionMutation, } = nextCommentsApi;
 // UPDATES QUERY CUSTOM HOOKS
 // custom hook for getting just the updated comments from the updates, so we are more efficient
-export const useUpdatedComments = ({ storyId, useStaging, commentsAPIUrl, }) => {
+export const useUpdatedComments = ({ storyId, useStaging, commentsAPIUrl }, options) => {
     return nextCommentsApi.useGetQandAUpdatesQuery({ storyId, useStaging, commentsAPIUrl }, {
         selectFromResult: ({ data }) => ({
             updatedComments: data?.updatedComments || [],
         }),
+        skip: options?.skip || false,
     }).updatedComments;
 };
 // Custom hook to get the updates on the information about the Q&A

package/dist/esm/services/listeners-middleware.js

@@ -0,0 +1,100 @@
+/**
+ * @fileoverview RTK Query listener middleware for Q&A stream events
+ *
+ * This module contains Redux Toolkit listeners that respond to RTK Query events
+ * and update the application state accordingly. Currently handles:
+ * - Tracking the most recent update timestamp from live Q&A streams
+ *
+ * @see https://redux-toolkit.js.org/api/createListenerMiddleware
+ */
+import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
+import { nextCommentsApi, updateTypes } from './comments-api';
+import { setMostRecentUpdate } from '../store/stream';
+export const listenerMiddleware = createListenerMiddleware();
+/**
+ * Calculates the most recent update timestamp from a list of Q&A questions
+ *
+ * @param qandas - Array of Comment objects representing questions with nested answers
+ * @returns The timestamp (in milliseconds) of the most recent answer, 0 if no answers found
+ *
+ * @example
+ * const timestamp = getMostRecentUpdateTime(qandas);
+ * // Returns: 167253120 (example timestamp)
+ */
+// we have a v similar functin in src/utils/qandas.ts
+function getMostRecentUpdateTime(qandas) {
+    if (!qandas.length ||
+        !Array.isArray(qandas[0].children) ||
+        !qandas[0].children.length) {
+        return 0; // no answers or no content at all
+    }
+    // we should be getting the comments back in a date desc by most recent answer from the API
+    const mostRecentUpdate = qandas[0].children.reduce((mostRecent, answer) => {
+        const publishedDateTimestamp = new Date(answer.publishedDate).getTime();
+        return publishedDateTimestamp > mostRecent
+            ? publishedDateTimestamp
+            : mostRecent;
+    }, 0);
+    return mostRecentUpdate;
+}
+/**
+ * Listener: Updates most recent timestamp when live Q&A stream data is fetched
+ *
+ * Responds to successful getQandAStream queries with status='live' and extracts
+ * the most recent answer timestamp to store in Redux state. This timestamp is
+ * used for reconnection logic and catching up on missed updates.
+ *
+ * @listens nextCommentsApi.endpoints.getQandAStream.matchFulfilled
+ * @dispatches setMostRecentUpdate - Updates stream.mostRecentUpdate in Redux store
+ */
+listenerMiddleware.startListening({
+    matcher: isAnyOf(nextCommentsApi.endpoints.getQandAStream.matchFulfilled),
+    effect: (action, listenerApi) => {
+        const { payload, meta } = action;
+        const { storyId, useStaging, commentsAPIUrl, status } = meta.arg.originalArgs;
+        // Check if this is a live stream QUERY, not response. If it is a live query we get questions and answers.
+        const isLiveStream = status === 'live';
+        if (isLiveStream && payload.qandas) {
+            const mostRecentUpdate = getMostRecentUpdateTime(payload.qandas);
+            // Update the store with the most recent update as a string
+            if (mostRecentUpdate !== undefined) {
+                console.log(`Setting most recent update for story ${storyId}: ${mostRecentUpdate}`);
+                listenerApi.dispatch(setMostRecentUpdate(`${mostRecentUpdate}`));
+            }
+            listenerApi.dispatch(nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                storyId: storyId,
+                useStaging: useStaging,
+                commentsAPIUrl: commentsAPIUrl,
+                lastEventId: `${mostRecentUpdate}`,
+            }));
+        }
+    },
+});
+/**
+ * Listener: Updates updates cache and most recent update when catchup comments are received
+ *
+ * Responds to successful getCatchupUpdates queries and adds them to the updates list
+ *
+ * @listens nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled
+ * @dispatches  nextCommentsApi.util.updateQueryData - Updates the cache of updated comments in the store
+ * @dispatches setMostRecentUpdate - Updates stream.mostRecentUpdate in Redux store
+ */
+listenerMiddleware.startListening({
+    matcher: nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled,
+    effect: (action, listenerApi) => {
+        const { payload, meta } = action;
+        const { storyId, useStaging, commentsAPIUrl } = meta.arg.originalArgs;
+        const { updatedComments, lastEventId } = payload;
+        console.log('Received catchup updates, new event id:', lastEventId);
+        const updateType = updateTypes['QA_NEW_REPLY'];
+        if (Array.isArray(updatedComments) && updatedComments.length) {
+            listenerApi.dispatch(nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
+                draft[updateType] = draft[updateType] || [];
+                draft[updateType].push(...updatedComments);
+            }));
+        }
+        if (typeof lastEventId === 'string') {
+            listenerApi.dispatch(setMostRecentUpdate(lastEventId));
+        }
+    },
+});

package/dist/esm/store/index.js

@@ -6,6 +6,7 @@ import { user } from './user';
 import expertReducer from './expertSlice';
 import { nextCommentsApi } from '../services/comments-api';
 import { rtkQueryErrorLogger } from '../services/error-middleware';
+import { listenerMiddleware } from '../services/listeners-middleware';
 export const rootReducer = combineReducers({
     stream: stream.reducer,
     question: questionReducer,
@@ -16,6 +17,7 @@ export const rootReducer = combineReducers({
 export const store = configureStore({
     reducer: rootReducer,
     middleware: (getDefaultMiddleware) => getDefaultMiddleware()
+        .prepend(listenerMiddleware.middleware)
         .concat(nextCommentsApi.middleware)
         .concat(rtkQueryErrorLogger),
 });

package/dist/esm/store/stream.js

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     latestAnsweredQuestionId: '',
+    mostRecentUpdate: null,
 };
 export const stream = createSlice({
     name: 'stream',
@@ -9,6 +10,9 @@ export const stream = createSlice({
         setLatestAnsweredQuestionId: (state, action) => {
             state.latestAnsweredQuestionId = action.payload;
         },
+        setMostRecentUpdate: (state, action) => {
+            state.mostRecentUpdate = action.payload;
+        },
     },
 });
-export const { setLatestAnsweredQuestionId } = stream.actions;
+export const { setLatestAnsweredQuestionId, setMostRecentUpdate } = stream.actions;

package/dist/qanda.scss

@@ -252,6 +252,7 @@ $app-header-color: #007acc;
     border-radius: 100px;
     padding: 2px var(--o3-spacing-5xs);
     min-width: var(--o3-spacing-2xs);
+    text-align: center;
   }
 
   /* ToDo: using an SVG for this icon until it becomes part of Origami */

package/dist/types/components/FloatingActionBar/index.d.ts

@@ -1,4 +1,4 @@
-declare function FloatingActionBar({ showLiveIndicator, }: {
-    showLiveIndicator?: boolean;
+declare function FloatingActionBar({ isLive }: {
+    isLive?: boolean;
 }): import("react").JSX.Element;
 export default FloatingActionBar;

package/dist/types/services/comments-api.d.ts

@@ -1,6 +1,10 @@
 import type { Comment } from '../types/comment';
 import type { QA } from '../types/qa';
 import type { Status } from '../types/qa';
+export declare const updateTypes: {
+    QA_NEW_REPLY: string;
+    QA_UPDATE: string;
+};
 export declare let eventSource: EventSource | null;
 type CommentsStreamResponse = {
     type: string;
@@ -37,6 +41,12 @@ export declare const nextCommentsApi: import("@reduxjs/toolkit/query/react").Api
         status: Status;
     }, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CommentsStreamTransformed, "nextCommentsApi">;
     getQandAUpdates: import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CachedData, "nextCommentsApi">;
+    getCatchupUpdates: import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams & {
+        lastEventId: string;
+    }, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, {
+        updatedComments: Comment[] | undefined;
+        lastEventId: string | undefined;
+    }, "nextCommentsApi">;
     getUserRoles: import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">;
     postQuestion: import("@reduxjs/toolkit/query/react").MutationDefinition<CommentsAPIUrlQuestionParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, {
         message: string;
@@ -47,6 +57,8 @@ export declare const useGetQandAStreamQuery: import("@reduxjs/toolkit/dist/query
 }, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CommentsStreamTransformed, "nextCommentsApi">>, useGetQandAUpdatesQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CachedData, "nextCommentsApi">>, useGetUserRolesQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">>, usePostQuestionMutation: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseMutation<import("@reduxjs/toolkit/query/react").MutationDefinition<CommentsAPIUrlQuestionParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, {
     message: string;
 }, "nextCommentsApi">>;
-export declare const useUpdatedComments: ({ storyId, useStaging, commentsAPIUrl, }: CommentsAPIUrlParams) => Comment[];
+export declare const useUpdatedComments: ({ storyId, useStaging, commentsAPIUrl }: CommentsAPIUrlParams, options?: {
+    skip: boolean;
+}) => Comment[];
 export declare const useUpdatedQA: ({ storyId, useStaging, commentsAPIUrl, }: CommentsAPIUrlParams) => any;
 export {};

package/dist/types/services/listeners-middleware.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview RTK Query listener middleware for Q&A stream events
+ *
+ * This module contains Redux Toolkit listeners that respond to RTK Query events
+ * and update the application state accordingly. Currently handles:
+ * - Tracking the most recent update timestamp from live Q&A streams
+ *
+ * @see https://redux-toolkit.js.org/api/createListenerMiddleware
+ */
+import type { RootState, AppDispatch } from '../store';
+export declare const listenerMiddleware: import("@reduxjs/toolkit").ListenerMiddlewareInstance<RootState, AppDispatch, unknown>;

package/dist/types/store/index.d.ts

@@ -33,6 +33,16 @@ export declare const rootReducer: import("@reduxjs/toolkit").Reducer<import("@re
             updatedComments?: import("../types/comment").Comment[];
             updateQA?: import("../types/qa").QA;
         }, "nextCommentsApi">;
+        getCatchupUpdates: import("@reduxjs/toolkit/query").QueryDefinition<{
+            storyId: string;
+            useStaging: boolean;
+            commentsAPIUrl: string;
+        } & {
+            lastEventId: string;
+        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+            updatedComments: import("../types/comment").Comment[] | undefined;
+            lastEventId: string | undefined;
+        }, "nextCommentsApi">;
         getUserRoles: import("@reduxjs/toolkit/query").QueryDefinition<{
             storyId: string;
             useStaging: boolean;
@@ -92,6 +102,16 @@ export declare const store: import("@reduxjs/toolkit/dist/configureStore").Toolk
             updatedComments?: import("../types/comment").Comment[];
             updateQA?: import("../types/qa").QA;
         }, "nextCommentsApi">;
+        getCatchupUpdates: import("@reduxjs/toolkit/query").QueryDefinition<{
+            storyId: string;
+            useStaging: boolean;
+            commentsAPIUrl: string;
+        } & {
+            lastEventId: string;
+        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+            updatedComments: import("../types/comment").Comment[] | undefined;
+            lastEventId: string | undefined;
+        }, "nextCommentsApi">;
         getUserRoles: import("@reduxjs/toolkit/query").QueryDefinition<{
             storyId: string;
             useStaging: boolean;
@@ -114,7 +134,7 @@ export declare const store: import("@reduxjs/toolkit/dist/configureStore").Toolk
             message: string;
         }, "nextCommentsApi">;
     }, never, "nextCommentsApi">;
-}, import("@reduxjs/toolkit").AnyAction, import("@reduxjs/toolkit").MiddlewareArray<[import("@reduxjs/toolkit").ThunkMiddleware<import("@reduxjs/toolkit").CombinedState<{
+}, import("@reduxjs/toolkit").AnyAction, import("@reduxjs/toolkit").MiddlewareArray<[import("@reduxjs/toolkit").ListenerMiddleware<RootState, AppDispatch, unknown>, import("@reduxjs/toolkit").ThunkMiddleware<import("@reduxjs/toolkit").CombinedState<{
     stream: any;
     question: QuestionState;
     user: any;
@@ -144,6 +164,16 @@ export declare const store: import("@reduxjs/toolkit/dist/configureStore").Toolk
             updatedComments?: import("../types/comment").Comment[];
             updateQA?: import("../types/qa").QA;
         }, "nextCommentsApi">;
+        getCatchupUpdates: import("@reduxjs/toolkit/query").QueryDefinition<{
+            storyId: string;
+            useStaging: boolean;
+            commentsAPIUrl: string;
+        } & {
+            lastEventId: string;
+        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+            updatedComments: import("../types/comment").Comment[] | undefined;
+            lastEventId: string | undefined;
+        }, "nextCommentsApi">;
         getUserRoles: import("@reduxjs/toolkit/query").QueryDefinition<{
             storyId: string;
             useStaging: boolean;
@@ -191,6 +221,16 @@ export declare const store: import("@reduxjs/toolkit/dist/configureStore").Toolk
         updatedComments?: import("../types/comment").Comment[];
         updateQA?: import("../types/qa").QA;
     }, "nextCommentsApi">;
+    getCatchupUpdates: import("@reduxjs/toolkit/query").QueryDefinition<{
+        storyId: string;
+        useStaging: boolean;
+        commentsAPIUrl: string;
+    } & {
+        lastEventId: string;
+    }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+        updatedComments: import("../types/comment").Comment[] | undefined;
+        lastEventId: string | undefined;
+    }, "nextCommentsApi">;
     getUserRoles: import("@reduxjs/toolkit/query").QueryDefinition<{
         storyId: string;
         useStaging: boolean;

package/dist/types/store/stream.d.ts

@@ -1,7 +1,8 @@
 import { Slice } from '@reduxjs/toolkit';
 export type StreamState = {
     latestAnsweredQuestionId: string;
+    mostRecentUpdate: string | null;
 };
 export declare const initialState: StreamState;
 export declare const stream: Slice;
-export declare const setLatestAnsweredQuestionId: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, `${string}/${string}`> | import("@reduxjs/toolkit").ActionCreatorWithoutPayload<`${string}/${string}`>;
+export declare const setLatestAnsweredQuestionId: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, `${string}/${string}`> | import("@reduxjs/toolkit").ActionCreatorWithoutPayload<`${string}/${string}`>, setMostRecentUpdate: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, `${string}/${string}`> | import("@reduxjs/toolkit").ActionCreatorWithoutPayload<`${string}/${string}`>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "0.0.1-beta.26",
+  "version": "0.0.1-beta.28",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",