@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/chat/preview/TimelinePreview.js

@@ -0,0 +1,254 @@
+import { utils_module_u, jsxRuntime_module_u, useComputed } from "../../../../../js/multimodal_v2.js";
+import { ThinkingAnimation } from "../../shared/ThinkingAnimation.js";
+import { CrossIcon } from "../../../images/icons.js";
+import "../../../styled-system/jsx/index.js";
+import { $not } from "../../../utils/signals.js";
+import { OrbAvatar } from "../../multimodal/OrbAvatar.js";
+import { Avatar } from "../../shared/Avatar.js";
+import { PreviewMessageRenderer } from "./PreviewMessageRenderer.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+
+
+
+
+
+
+
+
+
+const TimelinePreview = (param)=>{
+    let { rootStore } = param;
+    const { showAvatar, avatarKind, avatarSrc, orbName, typingIndicatorState, withCardStyle, withMessageTail, showCloseButton, handleClick, handleClose, t } = useTimelinePreview(rootStore);
+    return /*#__PURE__*/ jsxRuntime_module_u(PreviewContent, {
+        "data-component-name": "TimelinePreview.PreviewContent",
+        role: "region",
+        "aria-label": t("preview.messagePreview"),
+        onClick: handleClick,
+        withCardStyle: withCardStyle,
+        withMessageTail: withMessageTail,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: showCloseButton,
+                children: /*#__PURE__*/ jsxRuntime_module_u(CloseButton, {
+                    "data-component-name": "TimelinePreview.CloseButton",
+                    "data-preview-close-button": true,
+                    "aria-label": t("preview.closeMessage"),
+                    onClick: handleClose,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(ContentGrid, {
+                "data-component-name": "TimelinePreview.ContentGrid",
+                isTyping: typingIndicatorState,
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(ContentLayer, {
+                        "data-component-name": "TimelinePreview.ContentLayer",
+                        visible: $not(typingIndicatorState),
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                                when: showAvatar,
+                                children: avatarKind.value === "image" ? /*#__PURE__*/ jsxRuntime_module_u(Avatar, {
+                                    id: "ai-sdr-preview",
+                                    src: avatarSrc,
+                                    alt: t("preview.aiAssistant"),
+                                    align: "start",
+                                    noSpacing: true
+                                }) : /*#__PURE__*/ jsxRuntime_module_u(OrbWrapper, {
+                                    children: /*#__PURE__*/ jsxRuntime_module_u(OrbAvatar, {
+                                        orbConfig: rootStore.orbConfig,
+                                        name: orbName
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(PreviewMessageRenderer, {
+                                rootStore: rootStore
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(ContentLayer, {
+                        "data-component-name": "TimelinePreview.ContentLayer",
+                        visible: typingIndicatorState,
+                        isTyping: true,
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ThinkingAnimation, {
+                            visible: typingIndicatorState
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+function useTimelinePreview(rootStore) {
+    const { t } = rootStore.translationStore;
+    const showAvatar = useComputed(()=>!rootStore.conversationMode.video.value && rootStore.displayMode.collapsedCenter.value && !rootStore.typingIndicatorState.value);
+    const avatarKind = useComputed(()=>{
+        return rootStore.conversationMode.voice.value ? "orb" : "image";
+    });
+    const orbName = useComputed(()=>{
+        var _ref;
+        var _rootStore_activeConversation_aiSdr_value;
+        return (_ref = (_rootStore_activeConversation_aiSdr_value = rootStore.activeConversation.aiSdr.value) == null ? void 0 : _rootStore_activeConversation_aiSdr_value.name) != null ? _ref : undefined;
+    });
+    const avatarSrc = useComputed(()=>{
+        var _ref;
+        var _rootStore_activeConversation_user_value, _rootStore_activeConversation_aiSdr_value;
+        return (_ref = (_rootStore_activeConversation_user_value = rootStore.activeConversation.user.value) == null ? void 0 : _rootStore_activeConversation_user_value.avatarUrl) != null ? _ref : (_rootStore_activeConversation_aiSdr_value = rootStore.activeConversation.aiSdr.value) == null ? void 0 : _rootStore_activeConversation_aiSdr_value.avatarUrl;
+    });
+    const handleClick = ()=>{
+        rootStore.emitChatViewIfEligible({
+            fromUserIntent: true
+        });
+        rootStore.setOpenedDisplayMode();
+    };
+    const handleClose = (e)=>{
+        // Prevent click from bubbling to parent which would open the widget
+        e.stopPropagation();
+        rootStore.fireMessagesDismissed();
+        rootStore.dismissPounce();
+    };
+    const withCardStyle = useComputed(()=>rootStore.displayMode.collapsedCenter.value || rootStore.displayMode.closed.value);
+    const withMessageTail = useComputed(()=>!showAvatar.value && !rootStore.displayMode.closed.value);
+    const showCloseButton = useComputed(()=>withCardStyle.value && !rootStore.typingIndicatorState.value);
+    return {
+        avatarKind,
+        showAvatar,
+        orbName,
+        typingIndicatorState: rootStore.typingIndicatorState,
+        withCardStyle,
+        withMessageTail,
+        showCloseButton,
+        avatarSrc,
+        handleClick,
+        handleClose,
+        t
+    };
+}
+const PreviewContent = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        width: "[100%]",
+        pointerEvents: "none",
+        "&:hover > [data-preview-close-button]": {
+            opacity: 1
+        }
+    },
+    variants: {
+        withCardStyle: {
+            true: {
+                backgroundColor: "$white.solid",
+                borderRadius: "[16px]",
+                paddingBlock: "$sm",
+                paddingInline: "$lg",
+                boxShadow: "[0 0 0 1px rgba(230, 233, 236, 0.50), 0 3px 4px 0 rgba(35, 66, 72, 0.04), 0 0 16px 0 rgba(0, 0, 0, 0.04)]",
+                animation: "q-bubblePop 0.3s ease-out forwards",
+                pointerEvents: "auto",
+                cursor: "pointer"
+            },
+            false: {}
+        },
+        withMessageTail: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            withCardStyle: true,
+            withMessageTail: true,
+            css: {
+                borderRadius: "[16px 16px 16px 4px]"
+            }
+        }
+    ]
+});
+PreviewContent.displayName = "PreviewContent";
+const CloseButton = styled("button", {
+    base: {
+        position: "absolute",
+        padding: "$xs",
+        backgroundColor: "$white.solid",
+        opacity: 0,
+        transition: "opacity 0.2s ease",
+        cursor: "pointer",
+        border: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "[24px]",
+        color: "$gray.dark",
+        boxShadow: "[0 0 0 1px rgba(230, 233, 236, 0.50), 0 3px 4px 0 rgba(35, 66, 72, 0.04), 0 0 16px 0 rgba(0, 0, 0, 0.04)]",
+        top: "[0]",
+        right: "[0]",
+        width: "[20px]",
+        height: "[20px]",
+        "& svg": {
+            width: "[12px]",
+            height: "[12px]"
+        },
+        transform: "translate(50%, -50%)",
+        _touchDevice: {
+            opacity: 1,
+            transform: "translateY(calc(-100% - 8px))"
+        },
+        zIndex: 1
+    }
+});
+CloseButton.displayName = "CloseButton";
+const ContentGrid = styled("div", {
+    base: {
+        display: "grid",
+        width: "[100%]",
+        "& > *": {
+            gridArea: "1 / 1"
+        }
+    },
+    variants: {
+        isTyping: {
+            true: {
+                display: "inline-grid",
+                width: "[auto]"
+            }
+        }
+    }
+});
+ContentGrid.displayName = "ContentGrid";
+const ContentLayer = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm",
+        transition: "opacity 0.3s ease-out"
+    },
+    variants: {
+        visible: {
+            true: {
+                opacity: 1,
+                pointerEvents: "auto"
+            },
+            false: {
+                opacity: 0,
+                pointerEvents: "none",
+                display: "none"
+            }
+        },
+        isTyping: {
+            true: {
+                alignItems: "flex-start"
+            }
+        }
+    }
+});
+ContentLayer.displayName = "ContentLayer";
+const OrbWrapper = styled("div", {
+    base: {
+        width: "[32px]",
+        minWidth: "[32px]",
+        height: "[32px]"
+    }
+});
+OrbWrapper.displayName = "OrbWrapper";
+
+export { TimelinePreview };

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

@@ -0,0 +1,103 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import "../../../styled-system/jsx/index.js";
+import { MeetingBookerEntry } from "../../meetings/MeetingBookerEntry.js";
+import { MessageEntry } from "./MessageEntry.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+/**
+ * Timeline gate for calendar_event_offer messages: decides whether this offer
+ * gets a slot in the conversation at all. Whether that slot shows the placeholder
+ * or the expanded booker is MeetingBookerEntry's call.
+ */ const CalendarEventOfferRenderer = (props)=>{
+    const { state, t } = useCalendarEventOffer(props);
+    // Don't render if already booked, hidden by voice placeholder, superseded by a
+    // newer booker for the same meeting type (prevents booking via a stale offer),
+    // or already on screen as an artifact — or on its way there.
+    //
+    // Those last two have to be decided here rather than inside MeetingBookerEntry.
+    // Returning null from the entry still leaves this MessageEntry wrapping nothing,
+    // and the timeline lays its items out with a `gap` — so a zero-height item still
+    // costs a blank row between the messages either side of it, and would take the
+    // `:first-child` top margin with it if the offer led the transcript.
+    if (state.isBooked || state.isHiddenByPlaceholder || state.isSuperseded || state.isOpenAsArtifact || state.isQueuedForArtifact) {
+        return null;
+    }
+    // Show cancelled message when a rep joins a scripted conversation
+    if (state.isCancelled) {
+        return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+            isOwn: false,
+            fullWidth: true,
+            children: /*#__PURE__*/ jsxRuntime_module_u(CancelledCard, {
+                "data-component-name": "CalendarEventOfferRenderer.CancelledCard",
+                children: t("meetings.bookingCancelled")
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+        isOwn: false,
+        fullWidth: true,
+        children: /*#__PURE__*/ jsxRuntime_module_u(MeetingBookerEntry, {
+            rootStore: props.context,
+            message: props.item
+        })
+    });
+};
+function useCalendarEventOffer(param) {
+    let { context: rootStore, item } = param;
+    const { t } = rootStore.translationStore;
+    // Cancel the meeting offer when a rep joins a scripted conversation
+    // (same logic as MessengerTimelineEntryFactory.calendarEventOfferMessage)
+    const isCancelled = Boolean(item.scriptId && rootStore.activeConversation.user.value);
+    // A booker may be re-shown for the same meeting type later in the conversation
+    // (e.g. the visitor declined at first, then changed their mind). Only the newest
+    // offer for a given meeting type stays interactive; older ones are hidden so the
+    // visitor cannot book against a stale offer (which would double-book).
+    const messages = rootStore.messages.value;
+    const currentIndex = messages.findIndex((m)=>m.id === item.id);
+    const isSuperseded = currentIndex !== -1 && messages.some((m, i)=>i > currentIndex && m.type === "calendar_event_offer" && m.calendarEventTypeId === item.calendarEventTypeId);
+    // This offer's booker is already on screen in the artifact overlay, so a timeline
+    // slot for it would only be a second, redundant entry point. Keyed on this message
+    // rather than on "some artifact is open" so other offers keep their cards. Closing
+    // the artifact clears the id, which brings this one back.
+    const isOpenAsArtifact = rootStore.artifact.messageId.value === item.id;
+    // The same, for the stretch before the overlay is up. Opening it is asynchronous
+    // and can be deliberately delayed (see ArtifactStore#queueArtifactMessage), and the
+    // placeholder card is not worth showing for a booker that is already on its way:
+    // it would appear and be gone again without the visitor having a use for it.
+    const isQueuedForArtifact = rootStore.pendingArtifacts.value.has(item.id);
+    return {
+        state: {
+            isBooked: item.calendarEventBooked,
+            isHiddenByPlaceholder: item.showCalendarEventOfferUi === false,
+            isCancelled,
+            isSuperseded,
+            isOpenAsArtifact,
+            isQueuedForArtifact
+        },
+        t
+    };
+}
+const CancelledCard = styled("div", {
+    base: {
+        display: "flex",
+        width: "[100%]",
+        paddingInline: "$md",
+        paddingBlock: "$lg",
+        borderRadius: "[8px]",
+        fontSize: "14px",
+        lineHeight: "22px",
+        backgroundColor: "$white.solid",
+        border: "1px solid token(colors.$gray.border)",
+        textAlign: "center",
+        justifyContent: "center",
+        color: "$text.secondary"
+    }
+});
+CancelledCard.displayName = "CancelledCard";
+/* export default */ const timeline_CalendarEventOfferRenderer = (CalendarEventOfferRenderer);
+
+export default timeline_CalendarEventOfferRenderer;

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

@@ -0,0 +1,148 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import { CheckIcon } from "../../../images/icons.js";
+import "../../../styled-system/jsx/index.js";
+import { MeetingDetailsCard } from "../../meetings/MeetingDetailsCard.js";
+import { Avatar } from "../../shared/Avatar.js";
+import { MessageEntry } from "./MessageEntry.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+const CalendarEventPickRenderer = (param)=>{
+    let { item, context: rootStore } = param;
+    const { t, effectiveLocale } = rootStore.translationStore;
+    const { state } = useCalendarEventPick({
+        item
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+        isOwn: false,
+        fullWidth: true,
+        children: /*#__PURE__*/ jsxRuntime_module_u(Card, {
+            "data-component-name": "CalendarEventPickRenderer.Card",
+            children: /*#__PURE__*/ jsxRuntime_module_u(ContentWrapper, {
+                "data-component-name": "CalendarEventPickRenderer.ContentWrapper",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(Header, {
+                        "data-component-name": "CalendarEventPickRenderer.Header",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(CheckIcon, {}),
+                            /*#__PURE__*/ jsxRuntime_module_u(Title, {
+                                "data-component-name": "CalendarEventPickRenderer.Title",
+                                children: state.name ? t("meetings.meetingScheduledWith", {
+                                    name: state.name
+                                }) : t("meetings.meetingScheduled")
+                            }),
+                            state.avatarUrl && /*#__PURE__*/ jsxRuntime_module_u(AvatarWrapper, {
+                                "data-component-name": "CalendarEventPickRenderer.AvatarWrapper",
+                                children: /*#__PURE__*/ jsxRuntime_module_u(Avatar, {
+                                    id: "calendar-pick-" + state.userId,
+                                    src: state.avatarUrl,
+                                    size: "sm"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(MeetingDetailsCard, {
+                        timeSlot: state.calendarEvent,
+                        timeZone: state.timeZone,
+                        timeLabel: t("meetings.time"),
+                        dateLabel: t("meetings.date"),
+                        locale: effectiveLocale.value
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(Footer, {
+                        "data-component-name": "CalendarEventPickRenderer.Footer",
+                        children: t("meetings.inviteSentTo", {
+                            email: state.email
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+function useCalendarEventPick(param) {
+    let { item } = param;
+    var _ref, _ref1;
+    const { calendarEvent } = item;
+    const user = "user" in calendarEvent ? calendarEvent.user : null;
+    const name = (_ref = user == null ? void 0 : user.name) != null ? _ref : null;
+    const userId = (_ref1 = user == null ? void 0 : user.id) != null ? _ref1 : null;
+    const avatarUrl = user && "avatarUrl" in user ? user.avatarUrl : null;
+    const { timeZone, email } = calendarEvent;
+    return {
+        state: {
+            name,
+            userId,
+            avatarUrl,
+            calendarEvent,
+            timeZone,
+            email
+        }
+    };
+}
+const ContentWrapper = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$md",
+        width: "[100%]"
+    }
+});
+ContentWrapper.displayName = "ContentWrapper";
+const Header = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm"
+    }
+});
+Header.displayName = "Header";
+const AvatarWrapper = styled("div", {
+    base: {
+        marginLeft: "[auto]",
+        "& img": {
+            marginRight: "[0]",
+            alignSelf: "center"
+        }
+    }
+});
+AvatarWrapper.displayName = "AvatarWrapper";
+const Title = styled("span", {
+    base: {
+        fontSize: "14px",
+        lineHeight: "20px",
+        fontWeight: "$medium",
+        color: "$text.dark"
+    }
+});
+Title.displayName = "Title";
+const Footer = styled("div", {
+    base: {
+        fontSize: "12px",
+        lineHeight: "16px",
+        color: "$text.secondary"
+    }
+});
+Footer.displayName = "Footer";
+const Card = styled("div", {
+    base: {
+        display: "flex",
+        width: "[100%]",
+        paddingInline: "$md",
+        paddingBlock: "$lg",
+        borderRadius: "[8px]",
+        fontSize: "14px",
+        lineHeight: "22px",
+        backgroundColor: "$white.solid",
+        outline: "1px solid token(colors.$gray.border)",
+        outlineOffset: "-1px"
+    }
+});
+Card.displayName = "Card";
+/* export default */ const timeline_CalendarEventPickRenderer = (CalendarEventPickRenderer);
+
+export default timeline_CalendarEventPickRenderer;

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

@@ -0,0 +1,84 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import { CheckCircleIcon } from "../../../images/icons.js";
+import "../../../styled-system/jsx/index.js";
+import { RichText } from "../../helpers/RichText.js";
+import { MessageEntry } from "./MessageEntry.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+const FieldEntryRenderer = (param)=>{
+    let { item, context } = param;
+    const isActiveAiSdrCall = "activeAiSdrCallPresence" in item && item.activeAiSdrCallPresence === true;
+    // Active AI SDR call-captured field entries show the "Saved" row only when
+    // solicited (the assistant explicitly asked for the field before saving it)
+    // Default to true for backward compat: entries created before the solicited flag
+    // was introduced should keep showing the "Saved" row as they always did.
+    const isSolicited = "solicited" in item ? item.solicited === true : isActiveAiSdrCall;
+    if (isActiveAiSdrCall && isSolicited) {
+        return /*#__PURE__*/ jsxRuntime_module_u(VoiceFieldEntry, {
+            item: item,
+            context: context
+        });
+    }
+    // Hidden entries render nothing (except for entries captured during AI SDR calls that are solicited)
+    if ("hideText" in item && item.hideText) {
+        return null;
+    }
+    // Default: render as normal message bubble
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+        isOwn: item.isOwn,
+        children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+            text: item.text,
+            animated: !item.isOwn && !item.isRead,
+            onAnimationEnd: ()=>context.markMessagesAsRead([
+                    item
+                ])
+        })
+    });
+};
+function VoiceFieldEntry(param) {
+    let { item, context } = param;
+    const animated = !item.isRead;
+    return /*#__PURE__*/ jsxRuntime_module_u(ReadOnlyRow, {
+        "data-component-name": "VoiceFieldEntry.ReadOnlyRow",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(CheckCircleIcon, {}),
+            /*#__PURE__*/ jsxRuntime_module_u(SavedText, {
+                children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                    text: "Saved " + item.text,
+                    animated: animated,
+                    styled: false,
+                    onAnimationEnd: ()=>context.markMessagesAsRead([
+                            item
+                        ])
+                })
+            })
+        ]
+    });
+}
+const ReadOnlyRow = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm",
+        alignSelf: "stretch"
+    }
+});
+ReadOnlyRow.displayName = "ReadOnlyRow";
+const SavedText = styled("div", {
+    base: {
+        color: "$text.muted",
+        fontSize: "12px",
+        lineHeight: "22px"
+    }
+});
+SavedText.displayName = "SavedText";
+/* export default */ const timeline_FieldEntryRenderer = ((/* unused pure expression or super */ null && (FieldEntryRenderer)));
+
+var FieldEntryRenderer_default = /* unused export */ undefined;
+export { FieldEntryRenderer };
+export default FieldEntryRenderer_default;

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

@@ -0,0 +1,56 @@
+import { compat_module_P, preact_module_k, jsxRuntime_module_u, compat_module_z } from "../../../../../js/multimodal_v2.js";
+import "../../../styled-system/jsx/index.js";
+import { RichText } from "../../helpers/RichText.js";
+import { MessageEntry } from "./MessageEntry.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+const FieldRequestForm = compat_module_z(()=>import("../../field_request/Form.js"));
+const FieldRequestRenderer = (param)=>{
+    let { item, context } = param;
+    // If hideText is true, we don't show the message text
+    const showMessage = !item.hideText && item.text;
+    const showInput = item.id === context.input.messageId.value && context.input.isAnchored.value;
+    return /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+        children: [
+            showMessage && /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+                isOwn: false,
+                children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                    text: item.text,
+                    animated: !item.isRead,
+                    onAnimationEnd: ()=>context.markMessagesAsRead([
+                            item
+                        ])
+                })
+            }),
+            showInput && /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
+                isOwn: false,
+                fullWidth: true,
+                children: /*#__PURE__*/ jsxRuntime_module_u(compat_module_P, {
+                    fallback: null,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(FieldRequestForm, {
+                        message: item,
+                        rootStore: context
+                    })
+                })
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm"
+    }
+});
+Container.displayName = "Container";
+/* export default */ const timeline_FieldRequestRenderer = ((/* unused pure expression or super */ null && (FieldRequestRenderer)));
+
+var FieldRequestRenderer_default = /* unused export */ undefined;
+export { FieldRequestRenderer };
+export default FieldRequestRenderer_default;