pager-widget 1.0.3 → 1.0.4

package/out/hooks/useMessageReceiver.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessageReceiver = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("../widgetConfigStore2");
+const widgetStateHandler_1 = require("../widgetStateHandler");
+const recievedMsg = (msg) => ({
+    type: 'received',
+    time: new Date(),
+    message: {
+        ...msg,
+    },
+});
+const useMessageReceiver = ({ socket, messages, setMessages, setIsTyping, setAgentStatus, }) => {
+    const messagesRef = (0, react_1.useRef)(messages);
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    console.log('use message receiver message', messages);
+    (0, react_1.useEffect)(() => {
+        messagesRef.current = messages;
+    }, [messages]);
+    console.log('messages check', messages);
+    const sendMessageToLs = (widget, messages) => {
+        const widget_id = widget?.data?.id;
+        const bot_id = widget?.data?.bot_id;
+        const conversationId = messages.find((msg) => msg.message.system.conversationId)?.message.system.conversationId;
+        if (!conversationId)
+            return;
+        // Parse existing recent list data from localStorage
+        const recentListKey = `RecentList::${bot_id}::${widget_id}`;
+        const existingData = localStorage.getItem(recentListKey);
+        let parsedData = {};
+        if (existingData) {
+            try {
+                parsedData = JSON.parse(existingData);
+            }
+            catch (error) {
+                console.error(`Failed to parse RecentList for widget_id: ${widget_id}`, error);
+            }
+        }
+        // Add or update conversation
+        parsedData[conversationId] = messages;
+        // Save the updated RecentList
+        localStorage.setItem(recentListKey, JSON.stringify(parsedData));
+        // Optional: Save a separate payload per widget (if needed elsewhere)
+        const payload = { [widget_id]: messages };
+        localStorage.setItem(`${bot_id}::${widget_id}`, JSON.stringify(payload));
+        console.log('Updated RecentList in localStorage:', recentListKey, parsedData);
+    };
+    // const sendMessageToLs = (widget: WidgetT, messages: MessagesT[]) => {
+    //     console.log(
+    //         'to local storage',
+    //         widget.data.bot_id,
+    //         widget.data.id,
+    //         messages
+    //     )
+    //     const widget_id = widget.data.id // You might be missing this variable declaration
+    //     const payload = { [widget_id]: messages } // use computed property name
+    //     const conversationId = messages.find(
+    //         (messageResponse) => messageResponse.message.system.conversationId
+    //     )?.message.system.conversationId as string
+    //     if (!conversationId) return
+    //     const existingData = localStorage.getItem(widget_id)
+    //     let parsedData: Record<string, any[]> = {}
+    //     if (existingData) {
+    //         try {
+    //             parsedData = JSON.parse(existingData)
+    //         } catch (error) {
+    //             console.error(
+    //                 `Failed to parse data for widget_id: ${widget_id}`,
+    //                 error
+    //             )
+    //         }
+    //     }
+    //     // Update/add the conversation with new messages
+    //     parsedData[conversationId] = messages
+    //     // Save back to localStorage
+    //     localStorage.setItem(
+    //         `${widget.data.bot_id}::${widget.data.id}`,
+    //         JSON.stringify(payload)
+    //     )
+    //     localStorage.setItem(
+    //         `RecentList::${widget?.data?.bot_id}::${widget?.data?.id}`,
+    //         JSON.stringify(parsedData)
+    //     )
+    // }
+    (0, react_1.useEffect)(() => {
+        console.log(socket, 'socketss');
+        if (!socket)
+            return;
+        const onMessageReceived = (msg) => {
+            console.log('on message received called', msg);
+            const recievedMessage = recievedMsg(msg);
+            const conversation_id = msg?.system?.conversationId;
+            // widgetStore.trigger.setCurrentConversation({
+            //     conversation_id: conversation_id,
+            // })
+            localStorage.setItem('CURRENT_CONVERSATION', conversation_id);
+            // console.log("msgggg", msg?.system?.conversationId)
+            // setMessages((prevMessages) => {
+            //     const updatedMessages = [...prevMessages, recievedMessage]
+            //     sendMessageToLs(widget, updatedMessages)
+            //
+            //     setWidgetLocalState({
+            //         widget_id: widget?.data?.id,
+            //         user_state: "ALLOW_MESSAGE",
+            //         events: { ...recievedMessage, time: recievedMessage.time.toString() } as ReceivedEvent,
+            //     })
+            //     return updatedMessages
+            // })
+            const receivedType = recievedMessage.message.output[0].type;
+            setAgentStatus(receivedType);
+            if (receivedType === 'progress_done' || receivedType == 'text') {
+                setAgentStatus(null);
+            }
+            if (receivedType !== 'thinking' &&
+                receivedType !== 'finalizing_output' &&
+                receivedType !== 'progress_done' &&
+                receivedType !== 'searching_kb' &&
+                receivedType !== 'action_detected' &&
+                receivedType !== 'validating_input_for_action' &&
+                receivedType !== 'executing_action' &&
+                receivedType !== 'analysing_response') {
+                setMessages((prev) => {
+                    const updated = [...prev, recievedMessage];
+                    // Save only REAL messages
+                    sendMessageToLs(widget, updated);
+                    // Save local state
+                    (0, widgetStateHandler_1.setWidgetLocalState)({
+                        widget_id: widget?.data?.id,
+                        user_state: 'ALLOW_MESSAGE',
+                        events: {
+                            ...recievedMessage,
+                            time: recievedMessage.time.toString(),
+                        },
+                    });
+                    return updated;
+                });
+            }
+        };
+        const onTypingEndReceived = () => {
+            setIsTyping(false);
+        };
+        socket.on('message', onMessageReceived);
+        socket.on('typingend', onTypingEndReceived);
+        // return () => {
+        //     socket.off('message', onMessageReceived)
+        //     socket.off('typingend', onTypingEndReceived)
+        // }
+    }, [socket]);
+};
+exports.useMessageReceiver = useMessageReceiver;
+// import { useEffect, useRef } from "react"
+// type UseMessageReceiverProps = {
+//     widget_id: string
+//     socket: any
+//     messages: any[]
+//     setMessages: React.Dispatch<React.SetStateAction<any[]>>
+//     setIsTyping: React.Dispatch<React.SetStateAction<boolean>>
+// }
+// export const useMessageReceiver = ({widget_id,socket,messages,setMessages,setIsTyping}:UseMessageReceiverProps) => {
+//     console.log("messages", messages)
+//     const onMessageReceived = (messages:any[]) => (msg:any) => {
+//         console.log("msg",msg)
+//     }
+//     const onMessageReceivedCallBack = useRef<(msg: any) => void>(() => {});
+//   const onMessageTypingEndReceived = (msg:any) => {
+//     setIsTyping(false);
+//   };
+//     useEffect(()=>{
+//         onMessageReceivedCallBack.current = onMessageReceived(messages)
+//     },[messages])
+//     useEffect(() => {
+//         if (socket) {
+//           socket.on("message", onMessageReceivedCallBack.current);
+//           socket.on("typingend", onMessageTypingEndReceived);
+//         }
+//         return () => {
+//           socket && socket.off("message", onMessageReceivedCallBack.current);
+//           socket && socket.off("typingend", onMessageTypingEndReceived);
+//         };
+//       }, [socket, messages]);
+// }

package/out/hooks/usePopupAnimation.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopupAnimation = usePopupAnimation;
+const react_1 = require("react");
+function usePopupAnimation(isOpen) {
+    const [isPopUpOpened, setIsPopUpOpened] = (0, react_1.useState)(false);
+    const [removeAnimation, setRemoveAnimation] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            return;
+        }
+        const openTimer = setTimeout(() => setIsPopUpOpened(true), 10);
+        const removeTimer = setTimeout(() => setRemoveAnimation(true), 400);
+        return () => {
+            clearTimeout(openTimer);
+            clearTimeout(removeTimer);
+        };
+    }, [isOpen]);
+    return { isPopUpOpened, removeAnimation };
+}

package/out/hooks/useSocket.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSocket = void 0;
+const react_1 = require("react");
+const socket_1 = require("../socket");
+const rTrimSlash = (str) => str.replace(/\/$/, '');
+const useSocket = ({ endpoint }) => {
+    // const [socket, setSocket] =
+    const socket = (0, socket_1.createSocket)(new URL(endpoint).origin, `${rTrimSlash(new URL(endpoint).pathname)}/socket.io`);
+    const [connected, setConnected] = (0, react_1.useState)(false);
+    // const parsedEndpoint =  new URL(endpoint)
+    (0, react_1.useEffect)(() => {
+        socket.on('connect', () => {
+            setConnected(true);
+        });
+    }, []);
+    return { connected, socket };
+};
+exports.useSocket = useSocket;

package/out/hooks/useSocketContext.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSocketV2 = exports.SocketProvider = exports.SocketContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const socket_1 = require("../socket");
+// Create the context with a default value of null
+// We use 'as SocketContextProps' to override TypeScript's type checking
+// because we ensure the context is provided before being used.
+exports.SocketContext = (0, react_1.createContext)(null);
+const rTrimSlash = (str) => str.replace(/\/$/, '');
+// Create the provider component
+const SocketProvider = ({ children, endpoint, }) => {
+    const socketRef = react_1.default.useRef(null);
+    const [connected, setConnected] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const socket = (0, socket_1.createSocket)(new URL(endpoint).origin, `${rTrimSlash(new URL(endpoint).pathname)}/socket.io`);
+        socketRef.current = socket;
+        // Manually connect the socket when the provider mounts
+        socket.connect();
+        // Optional: Add connection event listeners here if needed globally
+        socket.on('connect', () => {
+            setConnected(true);
+            console.log('Socket connected!', socket.id);
+        });
+        socket.on('disconnect', () => {
+            console.log('Socket disconnected!');
+        });
+        // Clean up the connection when the provider unmounts
+        return () => {
+            socket.disconnect();
+        };
+    }, []); // Empty dependency array ensures this runs only once
+    return ((0, jsx_runtime_1.jsx)(exports.SocketContext.Provider, { value: { socket: socketRef.current, connected }, children: children }));
+};
+exports.SocketProvider = SocketProvider;
+// Custom hook to use the socket context
+const useSocketV2 = () => {
+    const contextValue = (0, react_1.useContext)(exports.SocketContext);
+    console.log('DEBUG:: contextValue', contextValue);
+    if (contextValue == null || contextValue?.socket == null) {
+        return { socket: null, connected: false };
+    }
+    const { socket, connected } = contextValue;
+    // Type assertion to tell TypeScript that the value is a Socket
+    return { socket, connected };
+};
+exports.useSocketV2 = useSocketV2;

package/out/hooks/useWidgetDimension.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetDimension = useWidgetDimension;
+const react_1 = require("react");
+function useWidgetDimension() {
+    const [height, setHeight] = (0, react_1.useState)(0);
+    const divRef = (0, react_1.useRef)(null);
+    const [viewportHeight, setViewportHeight] = (0, react_1.useState)(() => typeof window !== 'undefined' ? window.innerHeight : 820);
+    (0, react_1.useEffect)(() => {
+        const element = divRef.current;
+        if (!element)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const newHeight = entry.contentRect.height;
+                setHeight(newHeight);
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const update = () => setViewportHeight(window.innerHeight);
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, []);
+    const computeDynamicMinHeight = (h) => {
+        const raw = 0.9 * h - 40;
+        const clamped = Math.round(Math.min(698, Math.max(590, raw)));
+        return clamped;
+    };
+    return {
+        divRef,
+        height,
+        viewportHeight,
+        computeDynamicMinHeight
+    };
+}

package/out/hooks/useWidgetToggle.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetToggle = useWidgetToggle;
+const react_1 = require("@xstate/store/react");
+function useWidgetToggle(openByDefault) {
+    const store = (0, react_1.useStore)({
+        context: {
+            chatWindowStatus: openByDefault ? 'OPEN' : 'CLOSE',
+        },
+        on: {
+            toggle: (context) => {
+                return {
+                    chatWindowStatus: context.chatWindowStatus === 'OPEN'
+                        ? 'CLOSE'
+                        : 'OPEN',
+                };
+            },
+        },
+    });
+    const chatWindowStatus = (0, react_1.useSelector)(store, (state) => state.context.chatWindowStatus);
+    return [chatWindowStatus, store.trigger.toggle];
+}

package/out/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import 'preact/debug'
+const react_1 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+require("./global.css");
+const global_css_1 = __importDefault(require("bundle-text:./global.css"));
+const App_1 = require("./App");
+const init = (config) => {
+    const host = document.getElementById(config.id);
+    if (!host)
+        return;
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.setAttribute('data-tailwind', 'true');
+    const replaced = global_css_1.default.replace('(((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b))))', '(display: block)');
+    console.log('widgetCss', global_css_1.default, replaced);
+    style.textContent = replaced;
+    shadowRoot.appendChild(style);
+    const mountPoint = document.createElement('div');
+    mountPoint.className = 'pager-widget';
+    shadowRoot.appendChild(mountPoint);
+    client_1.default.createRoot(mountPoint).render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App_1.App, { ...config }) }));
+};
+window.WAWidget = {
+    init,
+};

package/out/markdown/CodeCopy.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const pikaicons_react_1 = require("../assets/icons/pikaicons-react");
+const CopyButton = ({ code }) => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [pressed, setPressed] = (0, react_1.useState)(false);
+    const handleCopy = async () => {
+        setPressed(true);
+        setTimeout(() => {
+            setPressed(false);
+            setCopied(true);
+        }, 150);
+        await navigator.clipboard.writeText(code);
+        setTimeout(() => setCopied(false), 1500);
+    };
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: handleCopy, className: `absolute top-0 right-0 flex items-center text-xss text-slate-500 hover:text-slate-800 gap-1 px-1 py-0 font-medium cursor-pointer transition-all duration-150 ease-out ${pressed ? 'scale-95' : 'scale-100'}`, "aria-label": "Copy code to clipboard", children: copied ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 10, className: "text-green-500" }), "Copied!"] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(pikaicons_react_1.PiCopyDefaultStroke, { className: "w-[10px] h-[10px]" }), "Copy"] })) }));
+};
+exports.CopyButton = CopyButton;

package/out/markdown/CodeHighlight.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highlightCodeToElements = highlightCodeToElements;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+function highlightCodeToElements(code) {
+    const lines = code.split('\n');
+    return lines.map((line, lineIndex) => {
+        const tokens = [];
+        let remaining = line;
+        let tokenIndex = 0;
+        while (remaining.length > 0) {
+            const keyBase = `${lineIndex}-${tokenIndex++}`;
+            // Match comments (e.g., // something)
+            const commentMatch = remaining.match(/^(\/\/.*)/);
+            if (commentMatch) {
+                tokens.push((0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 italic", children: commentMatch[1] }, `${keyBase}-comment`));
+                remaining = remaining.slice(commentMatch[1].length);
+                continue;
+            }
+            // Match strings: single, double, or backtick
+            const stringMatch = remaining.match(/^(['"`])(?:\\.|[^\\])*?\1/);
+            if (stringMatch) {
+                tokens.push((0, jsx_runtime_1.jsx)("span", { className: "text-green-600", children: stringMatch[0] }, `${keyBase}-string`));
+                remaining = remaining.slice(stringMatch[0].length);
+                continue;
+            }
+            // Match keywords
+            const keywordMatch = remaining.match(/^(const|let|var|function|return|if|else|for|while|import|from|export|new|await|async|class|extends|super|this)\b/);
+            if (keywordMatch) {
+                tokens.push((0, jsx_runtime_1.jsx)("span", { className: "text-blue-700 font-semibold", children: keywordMatch[0] }, `${keyBase}-keyword`));
+                remaining = remaining.slice(keywordMatch[0].length);
+                continue;
+            }
+            // Match booleans or null
+            const literalMatch = remaining.match(/^(true|false|null|undefined)\b/);
+            if (literalMatch) {
+                tokens.push((0, jsx_runtime_1.jsx)("span", { className: "text-amber-700", children: literalMatch[0] }, `${keyBase}-literal`));
+                remaining = remaining.slice(literalMatch[0].length);
+                continue;
+            }
+            // Match numbers
+            const numberMatch = remaining.match(/^(\d+)/);
+            if (numberMatch) {
+                tokens.push((0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: numberMatch[0] }, `${keyBase}-number`));
+                remaining = remaining.slice(numberMatch[0].length);
+                continue;
+            }
+            // Match and push 1 character if no patterns match
+            tokens.push((0, jsx_runtime_1.jsx)("span", { children: remaining[0] }, `${keyBase}-char`));
+            remaining = remaining.slice(1);
+        }
+        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [tokens, lineIndex < lines.length - 1 ? (0, jsx_runtime_1.jsx)("br", {}) : null] }, `line-${lineIndex}`));
+    });
+}

package/out/markdown/PagerMarkdown.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const remark_breaks_1 = __importDefault(require("remark-breaks"));
+const CodeHighlight_1 = require("./CodeHighlight");
+const CodeCopy_1 = require("./CodeCopy");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const PagerMarkdown = ({ message }) => {
+    return ((0, jsx_runtime_1.jsx)("p", { className: "markdown-parent-container", children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, remark_breaks_1.default], components: {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                table: ({ node, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: "markdown-table-wrapper", children: (0, jsx_runtime_1.jsx)("table", { ...props }) })),
+                hr: () => ((0, jsx_runtime_1.jsx)("hr", { style: {
+                        border: 'none',
+                        borderTop: '1px solid #D4D4D8',
+                        width: '100%',
+                    } })),
+                a: ({ href, children, ...props }) => ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", ...props, children: children })),
+                h2: ({ ...props }) => ((0, jsx_runtime_1.jsx)("h2", { className: "text-sm font-semibold", ...props })),
+                h3: ({ ...props }) => ((0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold", ...props })),
+                h4: ({ ...props }) => ((0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-semibold", ...props })),
+                h5: ({ ...props }) => ((0, jsx_runtime_1.jsx)("h5", { className: "text-sm font-semibold", ...props })),
+                h6: ({ ...props }) => ((0, jsx_runtime_1.jsx)("h6", { className: "text-sm font-semibold", ...props })),
+                code({ inline, children }) {
+                    const codeContent = String(children);
+                    return inline ? ((0, jsx_runtime_1.jsx)("code", { className: "text-[12px]", children: codeContent })) : ((0, jsx_runtime_1.jsxs)("div", { className: "relative bg-[#f9fafb] text-[12px] rounded-lg font-mono pt-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0.5 right-1 z-10", children: (0, jsx_runtime_1.jsx)(CodeCopy_1.CopyButton, { code: codeContent }) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-auto rounded-lg p-4", children: (0, jsx_runtime_1.jsx)("pre", { className: "text-[12px] font-mono leading-relaxed", children: (0, jsx_runtime_1.jsx)("code", { className: "whitespace-pre", children: (0, CodeHighlight_1.highlightCodeToElements)(codeContent) }) }) })] }));
+                },
+            }, children: typeof message === 'string'
+                ? message
+                : JSON.stringify(message) }) }));
+};
+exports.default = PagerMarkdown;