@mitodl/smoot-design 0.0.0-1967631

package/dist/cjs/VERSION.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This file is auto-generated at build time.
+ * Run node ./scripts/set_version.js to update the version.
+ * Do not update this file manually.
+ */
+export declare const VERSION = "0.0.0-1967631";

package/dist/cjs/VERSION.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+/**
+ * This file is auto-generated at build time.
+ * Run node ./scripts/set_version.js to update the version.
+ * Do not update this file manually.
+ */
+exports.VERSION = "0.0.0-1967631";

package/dist/cjs/ai.d.ts

@@ -0,0 +1,3 @@
+export { AiChat, AiChatDisplay } from "./components/AiChat/AiChat";
+export { AiChatProvider, useAiChat } from "./components/AiChat/AiChatContext";
+export type { AiChatMessage, AiChatContextProps, AiChatDisplayProps, AiChatProps, } from "./components/AiChat/types";

package/dist/cjs/ai.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAiChat = exports.AiChatProvider = exports.AiChatDisplay = exports.AiChat = void 0;
+var AiChat_1 = require("./components/AiChat/AiChat");
+Object.defineProperty(exports, "AiChat", { enumerable: true, get: function () { return AiChat_1.AiChat; } });
+Object.defineProperty(exports, "AiChatDisplay", { enumerable: true, get: function () { return AiChat_1.AiChatDisplay; } });
+var AiChatContext_1 = require("./components/AiChat/AiChatContext");
+Object.defineProperty(exports, "AiChatProvider", { enumerable: true, get: function () { return AiChatContext_1.AiChatProvider; } });
+Object.defineProperty(exports, "useAiChat", { enumerable: true, get: function () { return AiChatContext_1.useAiChat; } });

package/dist/cjs/bundles/RemoteTutorDrawer/FlashcardsScreen.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type Flashcard = {
+    question: string;
+    answer: string;
+};
+export declare const FlashcardsScreen: ({ flashcards, wasKeyboardFocus, }: {
+    flashcards?: Flashcard[];
+    wasKeyboardFocus: boolean;
+}) => React.JSX.Element | null;

package/dist/cjs/bundles/RemoteTutorDrawer/FlashcardsScreen.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashcardsScreen = void 0;
+const ActionButton_1 = require("../../components/Button/ActionButton");
+const Typography_1 = require("@mui/material/Typography");
+const React = require("react");
+const react_1 = require("react");
+const styled_1 = require("@emotion/styled");
+const react_2 = require("@remixicon/react");
+const Container = styled_1.default.div ``;
+const FlashcardContainer = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    height: 300,
+    padding: 40,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    borderRadius: 8,
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    marginTop: "8px",
+    cursor: "pointer",
+    textAlign: "center",
+}));
+const Navigation = styled_1.default.div({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    marginTop: "24px",
+});
+const Page = styled_1.default.div(({ theme }) => (Object.assign({ color: theme.custom.colors.silverGrayDark }, theme.typography.body2)));
+const Flashcard = React.forwardRef(({ content, "aria-label": ariaLabel }, ref) => {
+    const [screen, setScreen] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => setScreen(0), [content]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            setScreen(screen === 0 ? 1 : 0);
+        }
+    };
+    return (React.createElement(FlashcardContainer, { ref: ref, onClick: () => setScreen(screen === 0 ? 1 : 0), onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": ariaLabel, role: "button" },
+        React.createElement(Typography_1.default, { variant: "h5" }, screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`)));
+});
+Flashcard.displayName = "Flashcard";
+const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
+    const [cardIndex, setCardIndex] = (0, react_1.useState)(0);
+    const containerRef = (0, react_1.useRef)(null);
+    const flashcardRef = (0, react_1.useRef)(null);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (!flashcards)
+            return;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            wasKeyboardFocus) {
+            return;
+        }
+        if (e.key === "ArrowRight") {
+            setCardIndex((prevIndex) => (prevIndex + 1) % flashcards.length);
+        }
+        else if (e.key === "ArrowLeft") {
+            setCardIndex((prevIndex) => (prevIndex - 1 + flashcards.length) % flashcards.length);
+        }
+    }, [flashcards, wasKeyboardFocus]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = flashcardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cardIndex]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    if (!(flashcards === null || flashcards === void 0 ? void 0 : flashcards.length)) {
+        return null;
+    }
+    return (React.createElement(Container, { ref: containerRef },
+        React.createElement(Flashcard, { ref: flashcardRef, content: flashcards[cardIndex], "aria-label": `Flashcard ${cardIndex + 1} of ${flashcards.length}` }),
+        React.createElement(Navigation, null,
+            React.createElement(ActionButton_1.ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small", "aria-label": "Previous card" },
+                React.createElement(react_2.RiArrowLeftLine, { "aria-hidden": true })),
+            React.createElement(Page, null,
+                cardIndex + 1,
+                " / ",
+                flashcards.length),
+            React.createElement(ActionButton_1.ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small", "aria-label": "Next card" },
+                React.createElement(react_2.RiArrowRightLine, { "aria-hidden": true })))));
+};
+exports.FlashcardsScreen = FlashcardsScreen;

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.d.ts

@@ -0,0 +1,56 @@
+import { FC } from "react";
+import type { AiChatProps, AiChatMessage } from "../../components/AiChat/types";
+type RemoteTutorDrawerInitMessage = {
+    type: "smoot-design::tutor-drawer-open";
+    payload: {
+        blockType?: "problem" | "video";
+        target?: string;
+        /**
+         * If the title begins "AskTIM", it is styled as the AskTIM logo.
+         */
+        title?: string;
+        chat: {
+            chatId?: AiChatProps["chatId"];
+            conversationStarters?: AiChatProps["conversationStarters"];
+            initialMessages?: AiChatProps["initialMessages"];
+            apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+            requestBody?: Record<string, unknown>;
+            entryScreenEnabled?: AiChatProps["entryScreenEnabled"];
+            entryScreenTitle?: AiChatProps["entryScreenTitle"];
+        };
+        summary?: {
+            apiUrl: string;
+        };
+    };
+};
+type RemoteTutorDrawerProps = {
+    className?: string;
+    /**
+     * The origin of the messages that will be received to open the chat.
+     * The drawer will ignore all message events not from this origin.
+     */
+    messageOrigin: string;
+    /**
+     * Transform the body of the request before sending it to the server.
+     * Its result will be merged with the per-message requestBody opt, with
+     * transformBody taking precedence.
+     *
+     * *This cannot be supplied via message events since the function is not serializable.*
+     *
+     */
+    transformBody?: (messages: AiChatMessage[]) => Iterable<unknown>;
+    /**
+     * Fetch options to be passed to the fetch call.
+     *
+     * NOTE: By default, the credentials are set to "include" to enable thread-
+     * identifying cookies.
+     */
+    fetchOpts?: AiChatProps["requestOpts"]["fetchOpts"];
+    /**
+     * Pass to target a specific drawer instance where multiple are on the page.
+     */
+    target?: string;
+};
+declare const RemoteTutorDrawer: FC<RemoteTutorDrawerProps>;
+export { RemoteTutorDrawer };
+export type { RemoteTutorDrawerProps, RemoteTutorDrawerInitMessage };

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.js

@@ -0,0 +1,283 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoteTutorDrawer = void 0;
+// @format
+const React = require("react");
+const react_1 = require("react");
+const styled_1 = require("@emotion/styled");
+const react_markdown_1 = require("react-markdown");
+const rehype_raw_1 = require("rehype-raw");
+const react_2 = require("@remixicon/react");
+const Drawer_1 = require("@mui/material/Drawer");
+const TabButtonList_1 = require("../../components/TabButtons/TabButtonList");
+const Typography_1 = require("@mui/material/Typography");
+const TabContext_1 = require("@mui/lab/TabContext");
+const TabPanel_1 = require("@mui/lab/TabPanel");
+const AiChat_1 = require("../../components/AiChat/AiChat");
+const ActionButton_1 = require("../../components/Button/ActionButton");
+const FlashcardsScreen_1 = require("./FlashcardsScreen");
+const VERSION_1 = require("../../VERSION");
+const Header = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "4px",
+    color: theme.custom.colors.white,
+    position: "sticky",
+    top: 0,
+    padding: "32px 0 16px 0",
+    zIndex: 2,
+    backgroundColor: theme.custom.colors.white,
+    borderRadius: 0,
+}));
+const Title = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    color: theme.custom.colors.darkGray2,
+    img: {
+        width: "24px",
+        height: "24px",
+    },
+    svg: {
+        fill: theme.custom.colors.red,
+        width: "24px",
+        height: "24px",
+        flexShrink: 0,
+    },
+    overflow: "hidden",
+    p: {
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+    },
+}));
+const CloseButton = (0, styled_1.default)(ActionButton_1.ActionButton)(({ theme }) => ({
+    backgroundColor: theme.custom.colors.lightGray2,
+    "&&:hover": {
+        backgroundColor: theme.custom.colors.red,
+        color: theme.custom.colors.white,
+    },
+    zIndex: 3,
+    flexShrink: 0,
+}));
+const StyledTabButtonList = (0, styled_1.default)(TabButtonList_1.TabButtonList)(({ theme }) => ({
+    padding: "0 0 16px",
+    backgroundColor: theme.custom.colors.white,
+    position: "sticky",
+    top: "88px",
+    zIndex: 2,
+    overflow: "visible",
+}));
+const StyledTabPanel = (0, styled_1.default)(TabPanel_1.default)({
+    padding: "0",
+    height: "calc(100% - 138px)",
+    position: "relative",
+});
+const StyledAiChat = (0, styled_1.default)(AiChat_1.AiChat)(({ hasTabs, theme }) => ({
+    ".MitAiChat--entryScreenContainer": {
+        padding: hasTabs ? "114px 0 24px" : "168px 32px 24px",
+        [theme.breakpoints.down("md")]: {
+            padding: hasTabs ? "114px 0 24px" : "168px 16px 24px",
+        },
+    },
+    ".MitAiChat--chatScreenContainer": {
+        padding: hasTabs ? 0 : "0 32px",
+        [theme.breakpoints.down("md")]: {
+            padding: hasTabs ? 0 : "0 16px",
+        },
+    },
+    ".MitAiChat--messagesContainer": {
+        paddingTop: hasTabs ? "8px" : "88px",
+    },
+}));
+const StyledHTML = styled_1.default.div(({ theme }) => (Object.assign(Object.assign({ color: theme.custom.colors.darkGray2, backgroundColor: theme.custom.colors.white, padding: "12px 0 100px" }, theme.typography.body2), { "p:first-of-type": {
+        marginTop: 0,
+    }, "p:last-of-type": {
+        marginBottom: 0,
+    }, "ol, ul": {
+        paddingInlineStart: "32px",
+        li: {
+            margin: "16px 0",
+        },
+    }, ul: {
+        marginInlineStart: "-16px",
+    }, a: {
+        color: theme.custom.colors.red,
+        fontWeight: "normal",
+    } })));
+const identity = (x) => x;
+const DEFAULT_FETCH_OPTS = {
+    credentials: "include",
+};
+const useContentFetch = (contentUrl) => {
+    const [response, setResponse] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!contentUrl)
+            return;
+        const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            try {
+                const response = yield fetch(contentUrl);
+                const result = yield response.json();
+                if (!result.results) {
+                    throw new Error("Unexpected response");
+                }
+                const [contentFile] = result.results;
+                if (!contentFile) {
+                    throw new Error("No result found");
+                }
+                setResponse({
+                    summary: contentFile.summary,
+                    flashcards: contentFile.flashcards,
+                });
+            }
+            catch (error) {
+                console.error("Error fetching content", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        fetchData();
+    }, [contentUrl]);
+    return { response, loading };
+};
+const DEFAULT_PROBLEM_INITIAL_MESSAGES = [
+    {
+        role: "assistant",
+        content: "Let's try to work on this problem together. It would be great to hear how you're thinking about solving it. Can you walk me through the approach you're considering?",
+    },
+];
+const DEFAULT_VIDEO_ENTRY_SCREEN_TITLE = "What do you want to know about this video?";
+const DEFAULT_VIDEO_STARTERS = [
+    { content: "What are the most important concepts introduced in the video?" },
+    {
+        content: "What examples are used to illustrate concepts covered in the video?",
+    },
+    { content: "What are the key terms introduced in this video?" },
+];
+const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, entryScreenEnabled, entryScreenTitle, conversationStarters, initialMessages, hasTabs, needsMathJax, }) => {
+    if (!payload)
+        return null;
+    return (React.createElement(StyledAiChat, { chatId: payload.chatId, conversationStarters: conversationStarters, initialMessages: initialMessages, scrollElement: scrollElement, entryScreenEnabled: entryScreenEnabled, entryScreenTitle: entryScreenTitle, requestOpts: {
+            transformBody: (messages) => (Object.assign(Object.assign({}, payload.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages))),
+            apiUrl: payload.apiUrl,
+            fetchOpts: Object.assign(Object.assign({}, DEFAULT_FETCH_OPTS), fetchOpts),
+        }, hasTabs: hasTabs, useMathJax: needsMathJax }));
+};
+const randomItems = (array, count) => {
+    const shuffled = [...array].sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, count);
+};
+const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className, fetchOpts, target, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [payload, setPayload] = (0, react_1.useState)(null);
+    const [tab, setTab] = (0, react_1.useState)("chat");
+    const { response } = useContentFetch((_a = payload === null || payload === void 0 ? void 0 : payload.summary) === null || _a === void 0 ? void 0 : _a.apiUrl);
+    const [_wasKeyboardFocus, setWasKeyboardFocus] = (0, react_1.useState)(false);
+    const mouseInteracted = (0, react_1.useRef)(false);
+    const handleMouseDown = () => {
+        mouseInteracted.current = true;
+    };
+    const handleFocus = () => {
+        if (!mouseInteracted.current) {
+            setWasKeyboardFocus(true);
+        }
+        mouseInteracted.current = false;
+    };
+    const [scrollElement, setScrollElement] = (0, react_1.useState)(null);
+    const paperRefCallback = (node) => {
+        if (node) {
+            setScrollElement(node);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const cb = (event) => {
+            if (event.origin !== messageOrigin) {
+                if (process.env.NODE_ENV === "development") {
+                    console.warn(`RemoteTutorDrawer: received message from unexpected origin: ${event.origin}`);
+                }
+                return;
+            }
+            if (event.data.type === "smoot-design::tutor-drawer-open" &&
+                event.data.payload.target === target) {
+                setOpen(true);
+                setPayload(event.data.payload);
+            }
+        };
+        window.addEventListener("message", cb);
+        return () => {
+            window.removeEventListener("message", cb);
+        };
+    }, [messageOrigin, target]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scrollTo) === null || _a === void 0 ? void 0 : _a.call(scrollElement, {
+            top: tab === "chat" ? scrollElement.scrollHeight : 0,
+        });
+    }, [tab, scrollElement]);
+    const conversationStarters = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!payload)
+            return [];
+        return (payload.chat.conversationStarters ||
+            (((_a = response === null || response === void 0 ? void 0 : response.flashcards) === null || _a === void 0 ? void 0 : _a.length) && response.flashcards.length >= 3
+                ? randomItems(response.flashcards, 3).map((flashcard) => ({
+                    content: flashcard.question,
+                }))
+                : DEFAULT_VIDEO_STARTERS));
+    }, [payload, response]);
+    if (!payload) {
+        return React.createElement("div", { "data-testid": "remote-tutor-drawer-waiting" });
+    }
+    const { blockType, chat } = payload;
+    const hasTabs = blockType === "video";
+    return (React.createElement(Drawer_1.default, { "data-testid": "remote-tutor-drawer", "data-smoot-version": VERSION_1.VERSION, className: className, PaperProps: {
+            ref: paperRefCallback,
+            sx: {
+                width: "900px",
+                maxWidth: "100%",
+                boxSizing: "border-box",
+                padding: {
+                    xs: "0 16px",
+                    md: "0 32px",
+                },
+            },
+        }, anchor: "right", open: open, onClose: () => setOpen(false), role: "dialog", "aria-modal": "true" },
+        React.createElement(Header, null,
+            React.createElement(Title, null,
+                payload.title ? React.createElement(react_2.RiSparkling2Line, null) : null,
+                React.createElement(Typography_1.default, { variant: "body1", component: "h1" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
+                    "Ask",
+                    React.createElement("strong", null, "TIM"),
+                    payload.title.replace("AskTIM", ""))) : (payload.title))),
+            React.createElement(CloseButton, { variant: "text", size: "medium", onClick: () => setOpen(false), "aria-label": "Close" },
+                React.createElement(react_2.RiCloseLine, null))),
+        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_d = (_c = payload.chat) === null || _c === void 0 ? void 0 : _c.entryScreenEnabled) !== null && _d !== void 0 ? _d : false, entryScreenTitle: payload.chat.entryScreenTitle, initialMessages: payload.chat.initialMessages || DEFAULT_PROBLEM_INITIAL_MESSAGES, hasTabs: hasTabs, needsMathJax: true })) : null,
+        blockType === "video" ? (React.createElement(TabContext_1.default, { value: tab },
+            React.createElement(StyledTabButtonList, { styleVariant: "chat", onChange: (e, tab) => setTab(tab) },
+                React.createElement(TabButtonList_1.TabButton, { value: "chat", label: "Chat" }),
+                ((_e = response === null || response === void 0 ? void 0 : response.flashcards) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TabButtonList_1.TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus })) : null,
+                React.createElement(TabButtonList_1.TabButton, { value: "summary", label: "Summary" })),
+            React.createElement(StyledTabPanel, { value: "chat", keepMounted: true },
+                React.createElement(ChatComponent, { payload: Object.assign({}, chat), transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_g = (_f = payload.chat) === null || _f === void 0 ? void 0 : _f.entryScreenEnabled) !== null && _g !== void 0 ? _g : true, entryScreenTitle: (_h = payload.chat.entryScreenTitle) !== null && _h !== void 0 ? _h : DEFAULT_VIDEO_ENTRY_SCREEN_TITLE, conversationStarters: conversationStarters, initialMessages: payload.chat.initialMessages, hasTabs: hasTabs, needsMathJax: false })),
+            ((_j = response === null || response === void 0 ? void 0 : response.flashcards) === null || _j === void 0 ? void 0 : _j.length) ? (React.createElement(StyledTabPanel, { value: "flashcards" },
+                React.createElement(FlashcardsScreen_1.FlashcardsScreen, { flashcards: response === null || response === void 0 ? void 0 : response.flashcards, wasKeyboardFocus: _wasKeyboardFocus }))) : null,
+            React.createElement(StyledTabPanel, { value: "summary" },
+                React.createElement(Typography_1.default, { variant: "h4", component: "h4" }),
+                React.createElement(StyledHTML, null,
+                    React.createElement(react_markdown_1.default, { rehypePlugins: [rehype_raw_1.default] }, (_k = response === null || response === void 0 ? void 0 : response.summary) !== null && _k !== void 0 ? _k : ""))))) : null));
+};
+exports.RemoteTutorDrawer = RemoteTutorDrawer;

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RemoteTutorDrawer } from "./RemoteTutorDrawer";
+declare const meta: Meta<typeof RemoteTutorDrawer>;
+export default meta;
+type Story = StoryObj<typeof RemoteTutorDrawer>;
+export declare const ProblemStory: Story;
+export declare const ProblemDefaultInitialMessagesStory: Story;
+export declare const EntryScreenStory: Story;
+/**
+ * The chat entry screen is shown by default for the video blocks Tutor drawer.
+ */
+export declare const VideoStory: Story;
+/**
+ * Where conversation starters are not provided, they will be selected at random from the returned flashcard questions
+ * or from `DEFAULT_VIDEO_STARTERS` provided.
+ */
+export declare const FlashcardConversationStartersStory: Story;