@sampleapp.ai/sdk 1.0.17 → 1.0.19

package/dist/components/ChatButton.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+export const ChatButton = ({ settings, onClick }) => {
+    var _a;
+    const [isHovered, setIsHovered] = useState(false);
+    const handleClick = () => {
+        // Emit custom event for SDK usage
+        const event = new CustomEvent("chatButtonClick", {
+            detail: { settings },
+        });
+        document.dispatchEvent(event);
+        // Call onClick prop if provided (for direct React usage)
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (React.createElement("button", { style: {
+            // Layout & Position
+            position: "fixed",
+            bottom: "20px",
+            right: "20px",
+            zIndex: 1000,
+            // Colors
+            backgroundColor: settings.baseSettings.primaryBrandColor,
+            color: "white",
+            // Typography
+            fontSize: "14px",
+            fontWeight: "bold",
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+            // Spacing
+            padding: "15px 20px",
+            // Border & Shape
+            border: "none",
+            borderRadius: "50px",
+            // Visual Effects
+            boxShadow: isHovered
+                ? "0 6px 20px rgba(0,0,0,0.2)"
+                : "0 4px 12px rgba(0,0,0,0.15)",
+            cursor: "pointer",
+            // Animations
+            transition: "all 0.2s ease-in-out",
+            transform: isHovered ? "scale(1.05)" : "scale(1)",
+            // Layout for icon + text
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            // Interaction
+            outline: "none",
+            userSelect: "none",
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: handleClick, onFocus: () => setIsHovered(true), onBlur: () => setIsHovered(false) },
+        ((_a = settings.aiChatSettings) === null || _a === void 0 ? void 0 : _a.aiAssistantAvatar) && (React.createElement("img", { src: settings.aiChatSettings.aiAssistantAvatar, alt: "AI Assistant", style: {
+                width: "20px",
+                height: "20px",
+                borderRadius: "50%",
+                objectFit: "cover",
+                flexShrink: 0,
+            }, onError: (e) => {
+                // Hide image if it fails to load
+                e.currentTarget.style.display = "none";
+            } })),
+        "Ask AI"));
+};

package/dist/components/ModalSearchAndChat.js

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from "react";
+export const ModalSearchAndChat = ({ settings, onClose, }) => {
+    var _a, _b;
+    const [isVisible, setIsVisible] = useState(true);
+    const [searchQuery, setSearchQuery] = useState("");
+    const handleClose = () => {
+        setIsVisible(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleExampleQuestionClick = (question) => {
+        setSearchQuery(question);
+    };
+    // Handle escape key
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
+        if (isVisible) {
+            document.addEventListener("keydown", handleEscape);
+            return () => document.removeEventListener("keydown", handleEscape);
+        }
+    }, [isVisible]);
+    // Prevent body scroll when modal is open
+    useEffect(() => {
+        if (isVisible) {
+            document.body.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = "";
+            };
+        }
+    }, [isVisible]);
+    if (!isVisible)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                position: "fixed",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: "rgba(0, 0, 0, 0.6)",
+                backdropFilter: "blur(4px)",
+                zIndex: 999,
+                animation: "fadeIn 0.2s ease-out",
+            }, onClick: handleClose }),
+        React.createElement("div", { style: {
+                position: "fixed",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                backgroundColor: "white",
+                borderRadius: "16px",
+                boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+                zIndex: 1000,
+                width: "90%",
+                maxWidth: "500px",
+                maxHeight: "80vh",
+                overflow: "hidden",
+                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+                animation: "slideIn 0.3s ease-out",
+            }, onClick: (e) => e.stopPropagation() },
+            React.createElement("div", { style: {
+                    padding: "24px 24px 20px 24px",
+                    borderBottom: "1px solid #f1f5f9",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    background: `linear-gradient(135deg, ${settings.baseSettings.primaryBrandColor}10, ${settings.baseSettings.primaryBrandColor}05)`,
+                } },
+                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } },
+                    ((_a = settings.aiChatSettings) === null || _a === void 0 ? void 0 : _a.aiAssistantAvatar) && (React.createElement("img", { src: settings.aiChatSettings.aiAssistantAvatar, alt: "AI Assistant", style: {
+                            width: "32px",
+                            height: "32px",
+                            borderRadius: "50%",
+                            objectFit: "cover",
+                        }, onError: (e) => {
+                            e.currentTarget.style.display = "none";
+                        } })),
+                    React.createElement("h3", { style: {
+                            margin: 0,
+                            color: settings.baseSettings.primaryBrandColor,
+                            fontSize: "18px",
+                            fontWeight: "600",
+                            letterSpacing: "-0.025em",
+                        } }, settings.baseSettings.organizationDisplayName)),
+                React.createElement("button", { onClick: handleClose, style: {
+                        background: "none",
+                        border: "none",
+                        fontSize: "20px",
+                        cursor: "pointer",
+                        color: "#64748b",
+                        padding: "8px",
+                        borderRadius: "6px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        transition: "all 0.15s ease",
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = "#f1f5f9";
+                        e.currentTarget.style.color = "#334155";
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                        e.currentTarget.style.color = "#64748b";
+                    } }, "\u00D7")),
+            React.createElement("div", { style: {
+                    padding: "24px",
+                    maxHeight: "60vh",
+                    overflowY: "auto",
+                } },
+                React.createElement("div", { style: { position: "relative", marginBottom: "24px" } },
+                    React.createElement("input", { type: "text", placeholder: "Ask a question...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
+                            width: "100%",
+                            padding: "14px 16px",
+                            border: "2px solid #e2e8f0",
+                            borderRadius: "12px",
+                            fontSize: "16px",
+                            fontFamily: "inherit",
+                            outline: "none",
+                            boxSizing: "border-box",
+                            transition: "border-color 0.15s ease",
+                            backgroundColor: "#fafafa",
+                        }, onFocus: (e) => {
+                            e.currentTarget.style.borderColor =
+                                settings.baseSettings.primaryBrandColor;
+                            e.currentTarget.style.backgroundColor = "white";
+                        }, onBlur: (e) => {
+                            e.currentTarget.style.borderColor = "#e2e8f0";
+                            e.currentTarget.style.backgroundColor = "#fafafa";
+                        }, autoFocus: true }),
+                    React.createElement("button", { style: {
+                            position: "absolute",
+                            right: "8px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            backgroundColor: settings.baseSettings.primaryBrandColor,
+                            color: "white",
+                            border: "none",
+                            borderRadius: "8px",
+                            padding: "8px 12px",
+                            cursor: "pointer",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                            transition: "opacity 0.15s ease",
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.opacity = "0.9";
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.opacity = "1";
+                        }, onClick: () => {
+                            console.log("Search for:", searchQuery);
+                            // Handle search logic here
+                        } }, "Search")),
+                ((_b = settings.aiChatSettings) === null || _b === void 0 ? void 0 : _b.exampleQuestions) &&
+                    settings.aiChatSettings.exampleQuestions.length > 0 && (React.createElement("div", null,
+                    React.createElement("p", { style: {
+                            margin: "0 0 16px 0",
+                            fontWeight: "600",
+                            fontSize: "14px",
+                            color: "#475569",
+                            letterSpacing: "-0.025em",
+                        } }, "Popular questions:"),
+                    React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, settings.aiChatSettings.exampleQuestions.map((question, index) => (React.createElement("button", { key: index, onClick: () => handleExampleQuestionClick(question), style: {
+                            display: "block",
+                            width: "100%",
+                            padding: "12px 16px",
+                            border: "1px solid #e2e8f0",
+                            backgroundColor: "white",
+                            borderRadius: "10px",
+                            cursor: "pointer",
+                            textAlign: "left",
+                            fontSize: "14px",
+                            fontFamily: "inherit",
+                            color: "#334155",
+                            transition: "all 0.15s ease",
+                            lineHeight: "1.4",
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = "#f8fafc";
+                            e.currentTarget.style.borderColor =
+                                settings.baseSettings.primaryBrandColor;
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                            e.currentTarget.style.boxShadow =
+                                "0 4px 12px rgba(0,0,0,0.1)";
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = "white";
+                            e.currentTarget.style.borderColor = "#e2e8f0";
+                            e.currentTarget.style.transform = "translateY(0)";
+                            e.currentTarget.style.boxShadow = "none";
+                        } }, question)))))))),
+        React.createElement("style", null, `
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          
+          @keyframes slideIn {
+            from { 
+              opacity: 0;
+              transform: translate(-50%, -45%) scale(0.95);
+            }
+            to { 
+              opacity: 1;
+              transform: translate(-50%, -50%) scale(1);
+            }
+          }
+        `)));
+};

package/dist/index.js

@@ -0,0 +1,65 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ChatButton } from "./components/ChatButton";
+import { ModalSearchAndChat } from "./components/ModalSearchAndChat";
+// Export React components for direct JSX usage
+export { ChatButton, ModalSearchAndChat };
+// SDK class for loadScript programmatic usage
+class SampleAppSDK {
+    constructor() {
+        this.ModalSearchAndChat = (settings, container) => {
+            const targetContainer = container || document.body;
+            const modalContainer = document.createElement("div");
+            modalContainer.id = "sampleapp-modal-" + Date.now();
+            targetContainer.appendChild(modalContainer);
+            const root = ReactDOM.createRoot(modalContainer);
+            const component = React.createElement(ModalSearchAndChat, {
+                settings,
+                onClose: () => {
+                    root.unmount();
+                    modalContainer.remove();
+                },
+            });
+            root.render(component);
+            return {
+                unmount: () => {
+                    root.unmount();
+                    modalContainer.remove();
+                },
+                show: () => {
+                    modalContainer.style.display = "block";
+                },
+                hide: () => {
+                    modalContainer.style.display = "none";
+                },
+            };
+        };
+        this.ChatButton = (settings, container) => {
+            const targetContainer = container || this.createButtonContainer();
+            const root = ReactDOM.createRoot(targetContainer);
+            const component = React.createElement(ChatButton, { settings });
+            root.render(component);
+            return {
+                unmount: () => {
+                    root.unmount();
+                    targetContainer.remove();
+                },
+            };
+        };
+    }
+    createButtonContainer() {
+        const container = document.createElement("div");
+        container.id = "sampleapp-button-" + Date.now();
+        document.body.appendChild(container);
+        return container;
+    }
+}
+// Create singleton instance
+const sdk = new SampleAppSDK();
+// Default export for both usage patterns
+export default sdk;
+// For UMD builds, also attach individual methods to the default export
+// This ensures they're accessible as SampleApp.ChatButton, etc.
+if (typeof window !== "undefined") {
+    window.SampleApp = sdk;
+}

package/dist/index.umd.d.ts

@@ -0,0 +1,15 @@
+import { SDKSettings } from "./types";
+declare function initModalSearchAndChat(settings: SDKSettings, container?: HTMLElement): {
+    unmount: () => void;
+    show: () => void;
+    hide: () => void;
+};
+declare function initChatButton(settings: SDKSettings, container?: HTMLElement): {
+    unmount: () => void;
+};
+export { initModalSearchAndChat as ModalSearchAndChat, initChatButton as ChatButton, };
+declare const _default: {
+    ModalSearchAndChat: typeof initModalSearchAndChat;
+    ChatButton: typeof initChatButton;
+};
+export default _default;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sampleapp.ai/sdk",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "type": "module",
   "description": "TypeScript SDK for your components",
   "main": "./dist/index.umd.js",