"use strict"; const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const Platform = ({value, children}) => { const _components = { div: "div", ..._provideComponents() }; const values = Array.isArray(value) ? value : [value]; return _jsx(_components.div, { className: "pp-content", "data-platforms": values.join(" "), children: children }); }; const PlatformSelect = ({children}) => { const _components = { button: "button", div: "div", option: "option", select: "select", span: "span", ..._provideComponents() }; const platforms = [{ value: "react", label: "React" }, { value: "vanillajs", label: "Vanilla JS" }, { value: "swift", label: "Swift" }]; const [selected, setSelected] = React.useState("react"); const wrapperRef = React.useRef(null); React.useEffect(() => { const wrapper = wrapperRef.current; if (!wrapper) return; const updateToc = () => { const hiddenIds = new Set(); const visibleIds = new Set(); wrapper.querySelectorAll(".pp-content").forEach(el => { const plats = (el.getAttribute("data-platforms") || "").split(" "); const isVisible = plats.includes(selected); el.querySelectorAll("[id]").forEach(child => { if (isVisible) { visibleIds.add(child.id); } else { hiddenIds.add(child.id); } }); }); document.querySelectorAll('a[href^="#"]').forEach(a => { const id = decodeURIComponent(a.getAttribute("href").slice(1)); const li = a.closest("li"); if (!li) return; if (hiddenIds.has(id) && !visibleIds.has(id)) { li.style.display = "none"; } else if (visibleIds.has(id) || hiddenIds.has(id)) { li.style.display = ""; } }); }; updateToc(); const timer = setTimeout(updateToc, 200); return () => clearTimeout(timer); }, [selected]); return _jsxs(_components.div, { className: "pp-wrapper", ref: wrapperRef, "data-selected-platform": selected, children: [_jsxs(_components.div, { className: "pp-bar", children: [_jsx(_components.span, { className: "pp-label", children: "Platform" }), _jsx(_components.div, { className: "pp-buttons", children: platforms.map(p => _jsx(_components.button, { onClick: () => setSelected(p.value), className: `pp-button ${selected === p.value ? "pp-button-active" : ""}`, "aria-pressed": selected === p.value, children: p.label }, p.value)) }), _jsx(_components.select, { className: "pp-select", value: selected, onChange: e => setSelected(e.target.value), children: platforms.map(p => _jsx(_components.option, { value: p.value, children: p.label }, p.value)) })] }), children] }); }; function _createMdxContent(props) { const _components = { a: "a", code: "code", p: "p", pre: "pre", span: "span", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ..._provideComponents(), ...props.components }, {CodeBlock, Heading, Table} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!Heading) _missingMdxReference("Heading", true); if (!Table) _missingMdxReference("Table", true); return _jsxs(PlatformSelect, { children: [_jsx(_components.p, { children: "The DMs list element renders a navigable list of the user’s direct message conversations." }), _jsx(Heading, { level: "3", id: "basic-usage", children: "Basic usage" }), _jsx(_components.p, { children: "Mount the DMs list and listen for channel selection events to navigate users into a conversation." }), _jsx(Platform, { value: "react", children: _jsx(CodeBlock, { filename: "", numberOfLines: "43", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "43", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useMemo" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useState" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " ChatSession" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " DmsListElement" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Elements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"@whop/embedded-components-react-js\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "loadWhopElements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"@whop/embedded-components-vanilla-js\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " type" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "DmsListElementEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "DmsListElementOptions" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"@whop/embedded-components-vanilla-js/types\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " elements" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loadWhopElements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " getToken" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " response" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " fetch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"/api/token\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " data" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " response" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "json" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " data" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "token" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " MessagesPage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "channelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "setChannelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "] " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useState" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "<" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4EC9B0" }, children: "string" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ">();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " handleDmsEvent" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "((" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "event" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " DmsListElementEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " switch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "event" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "type" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " case" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"channelSelected\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " setChannelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "event" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "detail" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "id" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " break" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, []);" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " dmsOptions" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " DmsListElementOptions" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useMemo" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " selectedChannel:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " channelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " onEvent:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " handleDmsEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " };" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "channelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleDmsEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]);" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Elements" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " elements" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "elements" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "ChatSession" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " token" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "getToken" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "DmsListElement" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " options" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "dmsOptions" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " );" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }) }), _jsx(Platform, { value: "vanillajs", children: _jsx(CodeBlock, { filename: "", numberOfLines: "21", language: "typescript", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "typescript", children: _jsxs(_components.code, { language: "typescript", numberOfLines: "21", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "loadWhopElements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"@whop/embedded-components-vanilla-js\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " getToken" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " response" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " fetch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"/api/token\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " data" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " response" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "json" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " data" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "token" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " whopElements" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loadWhopElements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " session" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " whopElements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "createChatSession" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " token:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " getToken" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "});" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " dmsListElement" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " session" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "createElement" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"dms-list-element\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", {});" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "dmsListElement" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "on" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"channelSelected\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", (" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "ev" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " console" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "log" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"Channel selected:\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "ev" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "detail" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "id" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "});" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "dmsListElement" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "mount" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"#dms-list-container\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n"] }) }) }) }), _jsxs(Platform, { value: "swift", children: [_jsxs(_components.p, { children: ["Display a list of the user’s direct messages with ", _jsx(_components.code, { children: "WhopDMsListView" }), ". Listen for channel selection to navigate into a conversation."] }), _jsx(CodeBlock, { filename: "", numberOfLines: "22", language: "swift", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "swift", children: _jsxs(_components.code, { language: "swift", numberOfLines: "22", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "struct" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " MessagesView" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4EC9B0" }, children: "View " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " @State" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " private" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " var" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " selectedChannel: DMChannel" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "?" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " var" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " body: " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "some" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " View {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " WhopDMsListView" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " onEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": { event " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "in" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " switch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " event {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " case" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " let" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "channelSelected" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(channel)" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " selectedChannel " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " channel" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "navigationDestination" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "item" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": $selectedChannel) { channel " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "in" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " WhopChatView" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " channelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": channel." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "id" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " style" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": ." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "imessage" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "navigationBarTitleDisplayMode" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "inline" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "navigationTitle" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(channel." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) })] }), _jsx(Heading, { level: "3", id: "company-scoping", children: "Company scoping" }), _jsxs(_components.p, { children: ["Filter the DMs list to only show conversations belonging to a specific company by passing a ", _jsx(_components.code, { children: "companyId" }), ". To programmatically create DM channels, use the ", _jsx(_components.a, { href: "/api-reference/dm-channels/create-dm-channel", children: "Create DM Channel" }), " endpoint — make sure to pass the same ", _jsx(_components.code, { children: "companyId" }), " so the channel appears in the scoped list."] }), _jsx(Platform, { value: "react", children: _jsx(CodeBlock, { filename: "", numberOfLines: "15", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "15", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " dmsOptions" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " DmsListElementOptions" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useMemo" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " companyId:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"biz_xxxx\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " selectedChannel:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " channelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " onEvent:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " handleDmsEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " };" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "channelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleDmsEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]);" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Elements" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " elements" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "elements" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "ChatSession" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " token" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "getToken" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "DmsListElement" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " options" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "dmsOptions" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" }) }), "\n"] }) }) }) }), _jsx(Platform, { value: "vanillajs", children: _jsx(CodeBlock, { filename: "", numberOfLines: "5", language: "typescript", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "typescript", children: _jsxs(_components.code, { language: "typescript", numberOfLines: "5", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " dmsListElement" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " session" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "createElement" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"dms-list-element\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " companyId:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"biz_xxxx\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "});" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "dmsListElement" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "mount" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"#dms-list-container\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n"] }) }) }) }), _jsx(Platform, { value: "swift", children: _jsx(CodeBlock, { filename: "", numberOfLines: "9", language: "swift", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "swift", children: _jsxs(_components.code, { language: "swift", numberOfLines: "9", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "WhopDMsListView" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " companyId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"biz_xxxx\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " onEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": { event " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "in" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " switch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " event {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " case" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " let" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "channelSelected" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(channel)" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " selectedChannel " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " channel" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" }) }), "\n"] }) }) }) }), _jsx(Heading, { level: "3", id: "event-handling", children: "Event handling" }), _jsxs(Platform, { value: "react", children: [_jsx(_components.p, { children: "Listen for channel selection to open the corresponding chat view." }), _jsxs(Table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Event" }), _jsx(_components.th, { children: "Detail" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "channelSelected" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "{ id: string }" }) }), _jsx(_components.td, { children: "Emitted when the user clicks a channel" })] }) })] }), _jsx(CodeBlock, { filename: "", numberOfLines: "7", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "7", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " handleDmsEvent" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "((" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "event" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " DmsListElementEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " switch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "event" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "type" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " case" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"channelSelected\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " setChannelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "event" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "detail" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "id" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " break" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}, []);" }) }), "\n"] }) }) })] }), _jsxs(Platform, { value: "vanillajs", children: [_jsx(_components.p, { children: "Listen for channel selection to open the corresponding chat view." }), _jsxs(Table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Event" }), _jsx(_components.th, { children: "Detail" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "channelSelected" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "{ id: string }" }) }), _jsx(_components.td, { children: "Emitted when the user clicks a channel" })] }) })] }), _jsx(CodeBlock, { filename: "", numberOfLines: "3", language: "typescript", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "typescript", children: _jsxs(_components.code, { language: "typescript", numberOfLines: "3", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "dmsListElement" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "on" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"channelSelected\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", (" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "ev" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " console" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "log" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"Channel selected:\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "ev" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "detail" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "id" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "});" }) }), "\n"] }) }) })] }), _jsxs(Platform, { value: "swift", children: [_jsxs(_components.p, { children: ["On iOS, channel selection is handled by navigating to a new view. Use the ", _jsx(_components.code, { children: ".channelSelected" }), " event to push a ", _jsx(_components.code, { children: "WhopChatView" }), " onto the navigation stack."] }), _jsxs(Table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Event" }), _jsx(_components.th, { children: "Detail" }), _jsx(_components.th, { children: "Description" })] }) }), _jsx(_components.tbody, { children: _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: ".channelSelected" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "channel: DMChannel" }) }), _jsx(_components.td, { children: "Emitted when the user taps a channel" })] }) })] }), _jsx(CodeBlock, { filename: "", numberOfLines: "16", language: "swift", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "swift", children: _jsxs(_components.code, { language: "swift", numberOfLines: "16", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "WhopDMsListView" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " onEvent" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": { event " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "in" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " switch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " event {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " case" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " let" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "channelSelected" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(channel)" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " selectedChannel " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " channel" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "navigationDestination" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "item" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": $selectedChannel) { channel " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "in" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " WhopChatView" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " channelId" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": channel." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "id" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: " style" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": ." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "imessage" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "navigationBarTitleDisplayMode" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "inline" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#DCDCAA" }, children: "navigationTitle" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(channel." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { Platform, PlatformSelect, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Embedded chat