@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/chat/timeline/InlinePrivacyDisclosure.js

@@ -0,0 +1,66 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import "../../../styled-system/jsx/index.js";
+import { RichText } from "../../helpers/RichText.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+
+
+const LINK_TRANSFORMERS = {
+    a: (node)=>{
+        node.target = "_blank";
+        node.rel = "noopener noreferrer";
+    }
+};
+const InlinePrivacyDisclosure = (param)=>{
+    let { disclosure } = param;
+    const item = disclosure.value;
+    if (!(item == null ? void 0 : item.markdown)) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "InlinePrivacyDisclosure.Container",
+        children: /*#__PURE__*/ jsxRuntime_module_u(Message, {
+            children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                text: item.markdown,
+                styled: false,
+                elementTransformers: LINK_TRANSFORMERS
+            })
+        })
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingBlock: "$md",
+        paddingInline: "$lg",
+        borderRadius: "[12px]",
+        border: "[1px solid token($colors.border)]",
+        width: "[100%]"
+    }
+});
+Container.displayName = "InlinePrivacyDisclosure";
+const Message = styled("span", {
+    base: {
+        fontSize: "13px",
+        lineHeight: "20px",
+        color: "$text.muted",
+        textAlign: "center",
+        "& a": {
+            color: "$text.muted",
+            textDecoration: "underline",
+            textDecorationSkipInk: "none",
+            textUnderlinePosition: "from-font",
+            cursor: "pointer",
+            "&:hover": {
+                color: "$text.dark"
+            }
+        },
+        "& p": {
+            margin: "[0]"
+        }
+    }
+});
+Message.displayName = "Message";
+
+export { InlinePrivacyDisclosure };

package/widget/multimodal_v2/components/chat/timeline/LinkPreviewCard.js

@@ -0,0 +1,70 @@
+import "../../../styled-system/jsx/index.js";
+import { Persisted } from "../../helpers/Persisted.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+
+const LinkPreviewContainer = styled("a", {
+    base: {
+        borderRadius: "[8px]",
+        overflow: "hidden",
+        display: "flex",
+        outline: "1px solid token(colors.$gray.border)",
+        outlineOffset: "-1px",
+        backgroundColor: "$white.solid",
+        textDecoration: "none",
+        opacity: 1,
+        transition: "opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease",
+        "&:focus": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "-2px"
+        },
+        "&:hover": {
+            cursor: "pointer",
+            boxShadow: "[0 4px 12px rgba(0, 0, 0, 0.1)]",
+            transform: "translateY(-2px)"
+        }
+    },
+    variants: {
+        hidden: {
+            true: {
+                opacity: 0,
+                visibility: "hidden"
+            }
+        }
+    }
+});
+LinkPreviewContainer.displayName = "LinkPreviewContainer";
+const LinkPreviewImage = styled(Persisted, {
+    base: {
+        objectFit: "cover",
+        width: "[160px]",
+        display: "none",
+        "&[src]:not([src=''])": {
+            display: "block"
+        }
+    }
+});
+LinkPreviewImage.displayName = "LinkPreviewImage";
+const LinkPreviewBody = styled("div", {
+    base: {
+        paddingInline: "$lg",
+        paddingBlock: "$md"
+    }
+});
+LinkPreviewBody.displayName = "LinkPreviewBody";
+const LinkPreviewTitle = styled("div", {
+    base: {
+        color: "$primary",
+        fontWeight: "$semibold"
+    }
+});
+LinkPreviewTitle.displayName = "LinkPreviewTitle";
+const LinkPreviewUrl = styled("div", {
+    base: {
+        color: "$text.muted"
+    }
+});
+LinkPreviewUrl.displayName = "LinkPreviewUrl";
+
+export { LinkPreviewBody, LinkPreviewContainer, LinkPreviewImage, LinkPreviewTitle, LinkPreviewUrl };

package/widget/multimodal_v2/components/chat/timeline/MessageEntry.js

@@ -0,0 +1,88 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import "../../../styled-system/jsx/index.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+const MessageEntry = (_0)=>{
+    let { children } = _0, props = _object_without_properties_loose(_0, [
+        "children"
+    ]);
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, _extends({
+        "data-component-name": "MessageEntry.Container",
+        "data-is-own": props.isOwn
+    }, props, {
+        children: children
+    }));
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        width: "[fit-content]",
+        borderRadius: "[8px]",
+        wordBreak: "break-word",
+        fontSize: "14px",
+        lineHeight: "22px",
+        textDecoration: "none",
+        "&[data-is-own=true]": {
+            marginTop: "$sm"
+        },
+        "&:first-child": {
+            marginTop: "$lg"
+        }
+    },
+    variants: {
+        isOwn: {
+            true: {
+                justifyContent: "flex-end",
+                marginLeft: "$auto",
+                backgroundColor: "[#F2F2F2]",
+                color: "$text.dark",
+                maxWidth: "[90%]",
+                paddingBlock: "$lg",
+                paddingInline: "$md"
+            },
+            false: {
+                justifyContent: "flex-start",
+                backgroundColor: "$transparent",
+                color: "$text.dark",
+                borderTopLeftRadius: "4px"
+            }
+        },
+        fullWidth: {
+            true: {
+                width: "[100%]",
+                padding: "$none"
+            }
+        }
+    }
+});
+Container.displayName = "Container";
+
+var MessageEntry_Container = /* unused export */ undefined;
+export { MessageEntry, MessageEntry_Container as Container };

package/widget/multimodal_v2/components/chat/timeline/PresentContentRenderer.js

@@ -0,0 +1,30 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import { SlidesThumbnail } from "../../slides/SlidesThumbnail.js";
+import { MessageEntry } from "./MessageEntry.js";
+
+
+
+
+const PresentContentRenderer = (param)=>{
+    let { item, context } = param;
+    const { t } = context.translationStore;
+    const handleClick = ()=>{
+        // We may need to load the store here, because the user can click on a
+        // slide thumbnail from the conversation history instead of the LLM sharing
+        // it via tool call.
+        void context.presentArtifactMessage(item);
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+        isOwn: false,
+        children: /*#__PURE__*/ jsxRuntime_module_u(SlidesThumbnail, {
+            message: item,
+            onClick: handleClick,
+            t: t
+        })
+    });
+};
+/* export default */ const timeline_PresentContentRenderer = (PresentContentRenderer);
+
+var PresentContentRenderer_PresentContentRenderer = /* unused export */ undefined;
+export { PresentContentRenderer_PresentContentRenderer as PresentContentRenderer };
+export default timeline_PresentContentRenderer;

package/widget/multimodal_v2/components/chat/timeline/PresentDeckRenderer.js

@@ -0,0 +1,279 @@
+import { jsxRuntime_module_u, useComputed } from "../../../../../js/multimodal_v2.js";
+import { PlayIcon } from "../../../images/icons.js";
+import "../../../styled-system/jsx/index.js";
+import { RichText } from "../../helpers/RichText.js";
+import { Button } from "../../shared/Button.js";
+import { MessageEntry } from "./MessageEntry.js";
+import { MaximizedState as types_MaximizedState, StartCallTrigger as types_StartCallTrigger } from "../../../types.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+/**
+ * Renders a `present_deck` message in the timeline. Two modes:
+ *
+ * - Presented on a call: the deck's per-slide talk tracks are available, so we
+ *   render the presentation as a formatted record — each slide thumbnail
+ *   followed by its narration. This replaces the realtime API's one-turn
+ *   transcript, which would otherwise arrive as a single wall of text (the raw
+ *   transcript is folded into this message server-side and never shown).
+ * - Off-call: a "join call" prompt whose button starts the presentation.
+ *
+ * The mode is a stable property of the message (talk tracks are only ever
+ * populated for on-call presentations), so this dispatcher never calls hooks —
+ * each sub-component owns its own.
+ */ const PresentDeckRenderer = (param)=>{
+    let { item, context } = param;
+    var _item_slides;
+    const presentedSlides = ((_item_slides = item.slides) != null ? _item_slides : []).filter((slide)=>!!slide.talkTrack);
+    if (presentedSlides.length > 0) {
+        return /*#__PURE__*/ jsxRuntime_module_u(PresentDeckTranscript, {
+            item: item,
+            context: context
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(PresentDeckJoinCard, {
+        item: item,
+        context: context
+    });
+};
+/**
+ * The presentation record: each slide's thumbnail followed by its talk track.
+ *
+ * A presentation can span several `present_deck` messages — the initial share
+ * plus any resume after an interruption, where the agent re-shares only the
+ * remaining slides (e.g. interrupted on slide 3 of 5 → resume carries just 3-5).
+ * Rendering each message on its own would show a fragment that appears to start
+ * mid-deck. Instead we render ONE consolidated record on the LAST message for the
+ * deck — the union of every slide shown across all its shares, each once, in
+ * slide order — and nothing on the earlier ones. When a slide was shown more than
+ * once (a resume re-covers the slide it picked up on), the latest share wins, so
+ * the talk track reflects what was actually narrated on the resumed run.
+ */ function PresentDeckTranscript(param) {
+    let { item, context } = param;
+    const record = useComputed(()=>{
+        var _forDeck_;
+        // All shares for this deck, oldest first. Include `item` itself in case it
+        // isn't in the message list yet (optimistic render / tests).
+        const forDeck = context.messages.value.filter((m)=>m.type === "present_deck" && m.deckId === item.deckId);
+        if (!forDeck.some((m)=>m.id === item.id)) forDeck.push(item);
+        forDeck.sort((a, b)=>new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+        // Only the last share renders the consolidated record.
+        if (((_forDeck_ = forDeck[forDeck.length - 1]) == null ? void 0 : _forDeck_.id) !== item.id) return [];
+        const bySlideIndex = new Map();
+        for (const message of forDeck){
+            var _message_slides;
+            for (const slide of (_message_slides = message.slides) != null ? _message_slides : []){
+                if (slide.talkTrack) {
+                    bySlideIndex.set(slide.slideIndex, slide);
+                }
+            }
+        }
+        return [
+            ...bySlideIndex.values()
+        ].sort((a, b)=>a.slideIndex - b.slideIndex);
+    });
+    if (record.value.length === 0) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+        isOwn: false,
+        children: /*#__PURE__*/ jsxRuntime_module_u(Transcript, {
+            "data-component-name": "PresentDeckRenderer.Transcript",
+            children: record.value.map((slide)=>{
+                var _ref, _slide_pageTitle;
+                return /*#__PURE__*/ jsxRuntime_module_u(SlideBlock, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime_module_u(SlidePreview, {
+                            type: "button",
+                            "aria-label": context.translationStore.t("slides.viewSlide", {
+                                id: slide.slideIndex + 1
+                            }),
+                            onClick: ()=>context.revisitDeckSlide(item, slide.slideIndex, slide.pageTitle),
+                            children: /*#__PURE__*/ jsxRuntime_module_u(SlidePreviewImage, {
+                                crossOrigin: "anonymous",
+                                src: slide.imageUrl,
+                                alt: (_ref = (_slide_pageTitle = slide.pageTitle) != null ? _slide_pageTitle : item.deckTitle) != null ? _ref : ""
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                            text: slide.talkTrack,
+                            animated: false,
+                            paragraphSpacing: false
+                        })
+                    ]
+                }, slide.pageId + "-" + slide.slideIndex);
+            })
+        })
+    });
+}
+/**
+ * Off-call "join call" prompt. Mirrors PresentVideoRenderer — decks are
+ * call-gated, so the deck itself only plays in the maximized overlay once a call
+ * is in progress.
+ */ function PresentDeckJoinCard(param) {
+    let { item, context } = param;
+    const { hidden, thumbnailUrl, ariaLabel, startLabel, handleStartDeck } = usePresentDeckJoinCard({
+        item,
+        context
+    });
+    if (hidden) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+        isOwn: false,
+        children: /*#__PURE__*/ jsxRuntime_module_u(Card, {
+            "data-component-name": "PresentDeckRenderer.Card",
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(ThumbnailFrame, {
+                    children: thumbnailUrl && // Every slide load must be crossorigin, here and everywhere else. The assets
+                    // origin only sends `Access-Control-Allow-Origin` (and `Vary: Origin`) when the
+                    // request carries an `Origin` header, so a plain <img> caches a response with
+                    // neither, and the browser then serves that ACAO-less entry to a later
+                    // crossorigin request for the same url, which fails the CORS check. This card
+                    // previews the deck's FIRST slide off-call, so it was the plain load that
+                    // poisoned slide 1 for the overlay and the perception capture that followed.
+                    /*#__PURE__*/ jsxRuntime_module_u(ThumbnailImage, {
+                        src: thumbnailUrl,
+                        alt: ariaLabel,
+                        crossOrigin: "anonymous"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    variant: "primary",
+                    size: "md",
+                    iconOnly: true,
+                    "aria-label": startLabel,
+                    onClick: handleStartDeck,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(PlayIcon, {})
+                })
+            ]
+        })
+    });
+}
+function usePresentDeckJoinCard(param) {
+    let { item, context } = param;
+    var _ref, _item_deckTitle;
+    const { t } = context.translationStore;
+    // The tool can fire multiple times for the same deck (navigating slides). Only
+    // show the card for the last message of a given deck — one "join call" prompt
+    // is enough. Walk backwards (no findLast — the widget runs in old browsers).
+    const lastPresentDeck = useComputed(()=>{
+        const visible = context.messages.visible.value;
+        for(let i = visible.length - 1; i >= 0; i--){
+            const m = visible[i];
+            if (m.type === "present_deck" && m.deckId === item.deckId) {
+                return m;
+            }
+        }
+        return undefined;
+    });
+    // Hidden when: a deck is up in the overlay (where it plays on a call); text-only
+    // mode has no call capability; a call is already in progress; or this isn't the
+    // last card for the deck.
+    const hidden = useComputed(()=>{
+        var _context_artifact_message_value;
+        return context.maximizedState.value === types_MaximizedState.ARTIFACT && ((_context_artifact_message_value = context.artifact.message.value) == null ? void 0 : _context_artifact_message_value.type) === "present_deck" || context.conversationMode.text.value || context.callInProgress.value || lastPresentDeck.value != null && lastPresentDeck.value.id !== item.id;
+    });
+    const handleStartDeck = ()=>{
+        if (context.callInProgress.peek()) return;
+        context.getCallUiAdapter().actions.startCall({
+            trigger: {
+                type: types_StartCallTrigger.StartDeck,
+                deckId: item.deckId,
+                slideIndex: item.slideIndex
+            }
+        });
+    };
+    return {
+        hidden: hidden.value,
+        thumbnailUrl: item.imageUrl,
+        ariaLabel: (_ref = (_item_deckTitle = item.deckTitle) != null ? _item_deckTitle : item.pageTitle) != null ? _ref : "",
+        startLabel: t("presentation.start"),
+        handleStartDeck
+    };
+}
+const Card = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm",
+        padding: "$lg",
+        borderRadius: "[8px]",
+        outline: "1px solid token(colors.$gray.border)",
+        outlineOffset: "-1px",
+        backgroundColor: "$white.solid"
+    }
+});
+Card.displayName = "PresentDeckCard";
+const Transcript = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$lg"
+    }
+});
+Transcript.displayName = "PresentDeckTranscript";
+const SlideBlock = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm"
+    }
+});
+SlideBlock.displayName = "PresentDeckSlideBlock";
+// Matches the slide-image preview size used elsewhere (SlidesThumbnail): a
+// fixed 200px width at the slide's natural aspect ratio, not a full-width crop.
+// A button so clicking re-opens the slide in the viewer.
+const SlidePreview = styled("button", {
+    base: {
+        width: "[200px]",
+        padding: "$none",
+        border: "none",
+        borderRadius: "md",
+        overflow: "hidden",
+        cursor: "pointer",
+        backgroundColor: "$gray"
+    }
+});
+SlidePreview.displayName = "PresentDeckSlidePreview";
+const SlidePreviewImage = styled("img", {
+    base: {
+        width: "[100%]",
+        height: "[auto]",
+        display: "block"
+    }
+});
+SlidePreviewImage.displayName = "PresentDeckSlidePreviewImage";
+// Fits the slide at its natural aspect, like SlidePreview above. A fixed 16:9 frame
+// with an object-fit: cover image centre-cropped a portrait slide, cutting off its
+// title; a deck may contain pages of any shape, so the frame takes the slide's.
+// With no image to take a shape from, keep the 16:9 placeholder the frame used to
+// be so the card doesn't collapse to a bare button.
+const ThumbnailFrame = styled("div", {
+    base: {
+        width: "[100%]",
+        overflow: "hidden",
+        borderRadius: "[8px]",
+        backgroundColor: "$gray",
+        "&:empty": {
+            aspectRatio: "[16 / 9]"
+        }
+    }
+});
+ThumbnailFrame.displayName = "PresentDeckThumbnailFrame";
+const ThumbnailImage = styled("img", {
+    base: {
+        width: "[100%]",
+        height: "[auto]",
+        display: "block"
+    }
+});
+ThumbnailImage.displayName = "PresentDeckThumbnailImage";
+/* export default */ const timeline_PresentDeckRenderer = (PresentDeckRenderer);
+
+var PresentDeckRenderer_PresentDeckRenderer = /* unused export */ undefined;
+export { PresentDeckRenderer_PresentDeckRenderer as PresentDeckRenderer };
+export default timeline_PresentDeckRenderer;

package/widget/multimodal_v2/components/chat/timeline/PresentVideoRenderer.js

@@ -0,0 +1,131 @@
+import { hooks_module_T, jsxRuntime_module_u, useComputed } from "../../../../../js/multimodal_v2.js";
+import { PlayIcon } from "../../../images/icons.js";
+import "../../../styled-system/jsx/index.js";
+import { Thumbnail } from "../../helpers/Thumbnail.js";
+import { Button } from "../../shared/Button.js";
+import { MessageEntry } from "./MessageEntry.js";
+import { MaximizedState as types_MaximizedState, StartCallTrigger as types_StartCallTrigger } from "../../../types.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+const PresentVideoRenderer = (param)=>{
+    let { item, context } = param;
+    const { hidden, ariaLabel, startLabel, timestamp, handleStartPresentation } = usePresentVideoRenderer({
+        item,
+        context
+    });
+    if (hidden) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+        isOwn: false,
+        children: /*#__PURE__*/ jsxRuntime_module_u(Card, {
+            "data-component-name": "PresentVideoRenderer.Card",
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(ThumbnailFrame, {
+                    children: /*#__PURE__*/ jsxRuntime_module_u(Thumbnail, {
+                        videoUrl: item.videoUrl,
+                        timestamp: timestamp,
+                        "aria-label": ariaLabel
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    variant: "primary",
+                    size: "md",
+                    iconOnly: true,
+                    "aria-label": startLabel,
+                    onClick: handleStartPresentation,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(PlayIcon, {})
+                })
+            ]
+        })
+    });
+};
+function usePresentVideoRenderer(param) {
+    let { item, context } = param;
+    var _item_presentationTitle;
+    const { t } = context.translationStore;
+    // The tool fires per section, so multiple present_video messages arrive.
+    // Only show the card for the last one — one "Join call" prompt is enough.
+    // Memoized so we only re-scan the timeline when the visible messages change.
+    // Avoid Array.prototype.findLast (ES2023) since the widget runs in arbitrary
+    // visitor browsers; walk backwards to find the last matching message instead.
+    const lastPresentVideo = useComputed(()=>{
+        const visible = context.messages.visible.value;
+        for(let i = visible.length - 1; i >= 0; i--){
+            const m = visible[i];
+            if (m.type === "present_video" && m.presentationId === item.presentationId) {
+                return m;
+            }
+        }
+        return undefined;
+    });
+    // The card is hidden when:
+    // - In a call, the video plays in the artifact overlay (no timeline card needed).
+    // - Text-only mode has no call capability.
+    // - A call is already in progress; read reactively so dismissing the artifact
+    //   mid-call doesn't bring the now-inert card back.
+    // - This isn't the last present_video card for the presentation.
+    const hidden = useComputed(()=>{
+        var _context_artifact_message_value;
+        return context.maximizedState.value === types_MaximizedState.ARTIFACT && ((_context_artifact_message_value = context.artifact.message.value) == null ? void 0 : _context_artifact_message_value.type) === "present_video" || context.conversationMode.text.value || context.callInProgress.value || lastPresentVideo.value != null && lastPresentVideo.value.id !== item.id;
+    });
+    const handleStartPresentation = ()=>{
+        if (context.callInProgress.peek()) return;
+        context.getCallUiAdapter().actions.startCall({
+            trigger: {
+                type: types_StartCallTrigger.StartPresentation,
+                presentationId: item.presentationId,
+                sectionPosition: item.sectionPosition
+            }
+        });
+    };
+    // A second in, past the black or title frame many videos open on, clamped to this section:
+    // Thumbnail only clamps to the whole video, so a sub-second section would otherwise sample a
+    // frame belonging to the next one.
+    const timestamp = hooks_module_T(()=>Math.min(item.startTime + 1, Math.max(item.endTime - 0.001, item.startTime)), [
+        item.startTime,
+        item.endTime
+    ]);
+    return {
+        hidden: hidden.value,
+        ariaLabel: (_item_presentationTitle = item.presentationTitle) != null ? _item_presentationTitle : item.sectionTitle,
+        startLabel: t("presentation.start"),
+        handleStartPresentation,
+        timestamp
+    };
+}
+const Card = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm",
+        padding: "$lg",
+        borderRadius: "[8px]",
+        outline: "1px solid token(colors.$gray.border)",
+        outlineOffset: "-1px",
+        backgroundColor: "$white.solid"
+    }
+});
+Card.displayName = "PresentVideoCard";
+const ThumbnailFrame = styled("div", {
+    base: {
+        width: "[100%]",
+        aspectRatio: "[16 / 9]",
+        overflow: "hidden",
+        borderRadius: "[8px]",
+        backgroundColor: "$gray"
+    }
+});
+ThumbnailFrame.displayName = "ThumbnailFrame";
+/* export default */ const timeline_PresentVideoRenderer = (PresentVideoRenderer);
+
+var PresentVideoRenderer_PresentVideoRenderer = /* unused export */ undefined;
+export { PresentVideoRenderer_PresentVideoRenderer as PresentVideoRenderer };
+export default timeline_PresentVideoRenderer;