peppermint-chatbot-sdk 0.1.6 → 0.1.12

package/dist/index.d.mts

@@ -1,4 +1,3 @@
-export { PeppermintChatbot, PeppermintChatbot as default } from './react/index.mjs';
-export { C as ChatMessage, P as PeppermintChatbotProps } from './types-BfQUN3Hf.mjs';
+export { PeppermintChatbot } from './react/index.mjs';
 export { createChatbot } from './vanilla/index.mjs';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export { PeppermintChatbot, PeppermintChatbot as default } from './react/index.js';
-export { C as ChatMessage, P as PeppermintChatbotProps } from './types-BfQUN3Hf.js';
+export { PeppermintChatbot } from './react/index.js';
 export { createChatbot } from './vanilla/index.js';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -31,170 +31,397 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   PeppermintChatbot: () => PeppermintChatbot,
-  createChatbot: () => createChatbot,
-  default: () => Chatbot_default
+  createChatbot: () => createChatbot
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/react/Chatbot.tsx
+// src/react/PeppermintChatbot/index.tsx
 var import_react = require("react");
+
+// src/react/PeppermintChatbot/index.styles.ts
 var import_styled_components = __toESM(require("styled-components"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var Root = import_styled_components.default.div`
+var Container = import_styled_components.default.div`
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  width: fit-content;
+  height: fit-content;
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: ${(p) => p.$layout === "page" ? "400px" : "320px"};
-  max-height: ${(p) => p.$layout === "page" ? "620px" : "520px"};
-  background: ${(p) => p.$backgroundColor ?? "#ffffff"};
-  color: ${(p) => p.$fontColor ?? "#1a1a1a"};
-  border-radius: 16px;
+`;
+var WidgetButton = import_styled_components.default.button`
+  width: 60px;
+  height: 60px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: #1a1a1a;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+`;
+var ChatbotContainer = import_styled_components.default.div`
+  position: absolute;
+  bottom: calc(100% + 16px);
+  right: 0;
+  box-sizing: border-box;
+  background: #ffffff;
+  width: 450px;
+  height: 500px;
+  min-height: 320px;
+  max-height: 520px;
+  border-radius: 20px 20px 24px 24px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
   overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 14px;
-  box-sizing: border-box;
+  color: #1a1a1a;
+
+  opacity: ${(p) => p.$visible ? 1 : 0};
+  filter: ${(p) => p.$visible ? "blur(0)" : "blur(8px)"};
+  transition: opacity 0.3s ease-out, filter 0.3s ease-out;
+  pointer-events: ${(p) => p.$visible ? "auto" : "none"};
+`;
+var Header = import_styled_components.default.div`
+  position: relative;
+  height: 44px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 8px 0 16px;
+`;
+var HeaderMarginBottom = import_styled_components.default.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: linear-gradient(to top, transparent, #ffffff);
 `;
-var Messages = import_styled_components.default.div`
+var ChatbotName = import_styled_components.default.div`
+  font-size: 14px;
+  color: #1a1a1a;
+`;
+var IconButton = import_styled_components.default.button`
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1a1a1a;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+  }
+`;
+var MessageList = import_styled_components.default.div`
   flex: 1;
   overflow-y: auto;
-  padding: 1rem;
+  overflow-x: hidden;
+
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  padding: 16px;
+
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+
+  /* WebKit (Chrome, Safari, Edge) */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.35);
+  }
 `;
 var MessageBubble = import_styled_components.default.div`
-  align-self: ${(p) => p.$role === "user" ? "flex-end" : "flex-start"};
   max-width: 85%;
-  padding: 0.6rem 1rem;
   border-radius: 12px;
-  line-height: 1.45;
+
+  padding: 0.6rem 1rem;
+  
   word-break: break-word;
-  background: ${(p) => p.$role === "user" ? p.$userBubbleColor ?? "#2d2d2d" : p.$chatbotBubbleColor ?? "#f0f0f0"};
+  line-height: 1.45;
+
+  align-self: ${(p) => p.$role === "user" ? "flex-end" : "flex-start"};
+  background: ${(p) => p.$role === "user" ? "#2d2d2d" : "#f0f0f0"};
   color: ${(p) => p.$role === "user" ? "#ffffff" : "#1a1a1a"};
 `;
-var Greeting = import_styled_components.default.p`
-  margin: 0;
-  color: inherit;
-  opacity: 0.85;
+var Footer = import_styled_components.default.div`
+  background-color: transparent;
+  position: relative;
 `;
-var InputRow = import_styled_components.default.div`
+var InputContainerMarginTop = import_styled_components.default.div`
+  position: absolute;
+  top: -8px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: linear-gradient(to bottom, transparent, #ffffff);
+`;
+var InputContainer = import_styled_components.default.div`
+  position: relative;
+  height: 90px;
   display: flex;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-  background: rgba(0, 0, 0, 0.02);
+  flex-direction: column;
+  justify-content: flex-end;
+  border-radius: 16px;
+  border: 1px solid #e0e0e0;
+  background: #ffffff;
+  margin: 8px 16px 0px 16px;
+  
+  &:focus-within {
+    border-color: rgba(0, 0, 0, 0.3);
+  }
 `;
-var Input = import_styled_components.default.input`
+var Textarea = import_styled_components.default.textarea`
   flex: 1;
-  padding: 0.6rem 0.75rem;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
+  background-color: transparent;
+  margin: 8px 8px 8px 16px;
+  border: none;
   font-size: 14px;
   outline: none;
+  resize: none;
+  min-height: 24px;
+  max-height: 120px;
+  line-height: 1.4;
+  font-family: inherit;
+
   &::placeholder {
     color: #888;
   }
-  &:focus {
-    border-color: rgba(0, 0, 0, 0.3);
+
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+
+  /* WebKit (Chrome, Safari, Edge) */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.35);
   }
 `;
+var InputContainerFooter = import_styled_components.default.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 36px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 4px;
+  background-color: transparent;
+`;
 var SendButton = import_styled_components.default.button`
-  padding: 0.6rem 1rem;
-  font-size: 14px;
-  font-weight: 600;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: #fff;
   background: #1a1a1a;
   border: none;
-  border-radius: 8px;
+  border-radius: 50%;
   cursor: pointer;
-  &:hover {
+
+  &:hover:not(:disabled) {
     opacity: 0.9;
   }
+
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 `;
-function PeppermintChatbot({
-  layout = "page",
-  chatbotName,
-  greetingMessage = "Hi! How can I help you today?",
-  backgroundColor,
-  fontColor,
-  chatbotBubbleColor,
-  userBubbleColor,
-  initialMessages = [],
-  onSendMessage,
-  className
-}) {
-  const [messages, setMessages] = (0, import_react.useState)(initialMessages);
+var PoweredBy = import_styled_components.default.a`
+  display: block;
+  font-size: 8px;
+  color: #888;
+  text-decoration: none;
+  padding: 4px 16px 4px 16px;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    color: #1a1a1a;
+  }
+`;
+
+// src/assets/logo-transparent.png
+var logo_transparent_default = "./logo-transparent-YUL3JUZA.png";
+
+// src/react/PeppermintChatbot/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var BLUR_FADE_MS = 200;
+function PeppermintChatbot() {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const [isTransitioningOpen, setIsTransitioningOpen] = (0, import_react.useState)(false);
   const [input, setInput] = (0, import_react.useState)("");
+  const [messageList, setMessageList] = (0, import_react.useState)([]);
   const messagesEndRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (isOpen) {
+      setIsVisible(true);
+      let cancelled = false;
+      const id = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (!cancelled) setIsTransitioningOpen(true);
+        });
+      });
+      return () => {
+        cancelled = true;
+        cancelAnimationFrame(id);
+      };
+    } else {
+      setIsTransitioningOpen(false);
+      const id = window.setTimeout(() => setIsVisible(false), BLUR_FADE_MS);
+      return () => clearTimeout(id);
+    }
+  }, [isOpen]);
   (0, import_react.useEffect)(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  }, [messageList]);
   const handleSend = () => {
     const text = input.trim();
     if (!text) return;
-    const userMsg = {
+    const userMessage = {
       id: `u-${Date.now()}`,
       role: "user",
-      content: text
+      content: text,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
     };
-    setMessages((prev) => [...prev, userMsg]);
+    setMessageList((prev) => [...prev, userMessage]);
     setInput("");
-    onSendMessage?.(text);
   };
-  const showGreeting = messages.length === 0 && greetingMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    Root,
-    {
-      className,
-      $layout: layout,
-      $backgroundColor: backgroundColor,
-      $fontColor: fontColor,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Messages, { children: [
-          showGreeting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            MessageBubble,
-            {
-              $role: "assistant",
-              $chatbotBubbleColor: chatbotBubbleColor,
-              $userBubbleColor: userBubbleColor,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Greeting, { children: greetingMessage })
-            }
-          ),
-          messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            MessageBubble,
-            {
-              $role: msg.role,
-              $chatbotBubbleColor: chatbotBubbleColor,
-              $userBubbleColor: userBubbleColor,
-              children: msg.content
-            },
-            msg.id
-          )),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputRow, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { children: [
+    isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ChatbotContainer, { $visible: isOpen && isTransitioningOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Header, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatbotName, { children: "Peppermint Chatbot" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, { type: "button", "aria-label": "Minimize", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderMarginBottom, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MessageList, { children: [
+        messageList.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageBubble, { $role: msg.role, children: msg.content }, msg.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Footer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputContainerMarginTop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainer, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            Input,
+            Textarea,
             {
-              type: "text",
               placeholder: "Type a message...",
               value: input,
               onChange: (e) => setInput(e.target.value),
-              onKeyDown: (e) => e.key === "Enter" && handleSend()
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+                  if (!e.shiftKey) {
+                    e.preventDefault();
+                    handleSend();
+                  }
+                }
+              },
+              rows: 1,
+              "aria-label": "Message"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SendButton, { type: "button", onClick: handleSend, disabled: !input.trim(), children: "Send" })
-        ] })
-      ]
-    }
-  );
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputContainerFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            SendButton,
+            {
+              type: "button",
+              onClick: handleSend,
+              disabled: !input.trim(),
+              "aria-label": "Send",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 19V5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12l7-7 7 7" })
+                  ]
+                }
+              )
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PoweredBy, { href: "", target: "_blank", rel: "noopener noreferrer", children: "Powered by Peppermint Chatbot" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WidgetButton, { onClick: () => setIsOpen((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: logo_transparent_default,
+        alt: "Peppermint Chatbot",
+        width: 60,
+        height: 60,
+        draggable: false
+      }
+    ) })
+  ] });
 }
-var Chatbot_default = PeppermintChatbot;
 
 // src/vanilla/index.ts
 var import_react2 = __toESM(require("react"));

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/react/Chatbot.tsx","../src/vanilla/index.ts"],"sourcesContent":["export { PeppermintChatbot, default } from \"./react\";\nexport { createChatbot } from \"./vanilla\";\nexport type { PeppermintChatbotProps, ChatMessage } from \"./types\";\n","import React, { useState, useRef, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport type { PeppermintChatbotProps, ChatMessage } from \"../types\";\n\nconst Root = styled.div<{\n  $backgroundColor?: string;\n  $fontColor?: string;\n  $layout: \"widget\" | \"page\";\n}>`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: ${(p) => (p.$layout === \"page\" ? \"400px\" : \"320px\")};\n  max-height: ${(p) => (p.$layout === \"page\" ? \"620px\" : \"520px\")};\n  background: ${(p) => p.$backgroundColor ?? \"#ffffff\"};\n  color: ${(p) => p.$fontColor ?? \"#1a1a1a\"};\n  border-radius: 16px;\n  overflow: hidden;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 14px;\n  box-sizing: border-box;\n`;\n\nconst Messages = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n`;\n\nconst MessageBubble = styled.div<{\n  $role: \"user\" | \"assistant\";\n  $userBubbleColor?: string;\n  $chatbotBubbleColor?: string;\n}>`\n  align-self: ${(p) => (p.$role === \"user\" ? \"flex-end\" : \"flex-start\")};\n  max-width: 85%;\n  padding: 0.6rem 1rem;\n  border-radius: 12px;\n  line-height: 1.45;\n  word-break: break-word;\n  background: ${(p) =>\n    p.$role === \"user\"\n      ? p.$userBubbleColor ?? \"#2d2d2d\"\n      : p.$chatbotBubbleColor ?? \"#f0f0f0\"};\n  color: ${(p) => (p.$role === \"user\" ? \"#ffffff\" : \"#1a1a1a\")};\n`;\n\nconst Greeting = styled.p`\n  margin: 0;\n  color: inherit;\n  opacity: 0.85;\n`;\n\nconst InputRow = styled.div`\n  display: flex;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border-top: 1px solid rgba(0, 0, 0, 0.08);\n  background: rgba(0, 0, 0, 0.02);\n`;\n\nconst Input = styled.input`\n  flex: 1;\n  padding: 0.6rem 0.75rem;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  border-radius: 8px;\n  font-size: 14px;\n  outline: none;\n  &::placeholder {\n    color: #888;\n  }\n  &:focus {\n    border-color: rgba(0, 0, 0, 0.3);\n  }\n`;\n\nconst SendButton = styled.button`\n  padding: 0.6rem 1rem;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n  background: #1a1a1a;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  &:hover {\n    opacity: 0.9;\n  }\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\nexport function PeppermintChatbot({\n  layout = \"page\",\n  chatbotName,\n  greetingMessage = \"Hi! How can I help you today?\",\n  backgroundColor,\n  fontColor,\n  chatbotBubbleColor,\n  userBubbleColor,\n  initialMessages = [],\n  onSendMessage,\n  className,\n}: PeppermintChatbotProps) {\n  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);\n  const [input, setInput] = useState(\"\");\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  }, [messages]);\n\n  const handleSend = () => {\n    const text = input.trim();\n    if (!text) return;\n    const userMsg: ChatMessage = {\n      id: `u-${Date.now()}`,\n      role: \"user\",\n      content: text,\n    };\n    setMessages((prev) => [...prev, userMsg]);\n    setInput(\"\");\n    onSendMessage?.(text);\n  };\n\n  const showGreeting = messages.length === 0 && greetingMessage;\n\n  return (\n    <Root\n      className={className}\n      $layout={layout}\n      $backgroundColor={backgroundColor}\n      $fontColor={fontColor}\n    >\n      <Messages>\n        {showGreeting && (\n          <MessageBubble\n            $role=\"assistant\"\n            $chatbotBubbleColor={chatbotBubbleColor}\n            $userBubbleColor={userBubbleColor}\n          >\n            <Greeting>{greetingMessage}</Greeting>\n          </MessageBubble>\n        )}\n        {messages.map((msg) => (\n          <MessageBubble\n            key={msg.id}\n            $role={msg.role}\n            $chatbotBubbleColor={chatbotBubbleColor}\n            $userBubbleColor={userBubbleColor}\n          >\n            {msg.content}\n          </MessageBubble>\n        ))}\n        <div ref={messagesEndRef} />\n      </Messages>\n      <InputRow>\n        <Input\n          type=\"text\"\n          placeholder=\"Type a message...\"\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={(e) => e.key === \"Enter\" && handleSend()}\n        />\n        <SendButton type=\"button\" onClick={handleSend} disabled={!input.trim()}>\n          Send\n        </SendButton>\n      </InputRow>\n    </Root>\n  );\n}\n\nexport default PeppermintChatbot;\n","import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { PeppermintChatbot } from \"../react\";\nimport type { PeppermintChatbotProps } from \"../types\";\n\n/**\n * Mount the chatbot into a container (vanilla JS, Vue, Svelte).\n * Requires react and react-dom to be available (e.g. via script or bundler).\n */\nexport function createChatbot(\n  container: HTMLElement,\n  props: PeppermintChatbotProps = {}\n): { unmount: () => void } {\n  const root = createRoot(container);\n  root.render(React.createElement(PeppermintChatbot, props));\n  return {\n    unmount: () => root.unmount(),\n  };\n}\n\nexport type { PeppermintChatbotProps } from \"../types\";\n"],"mappings":"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","names":["styled","import_react","React"]}
+{"version":3,"sources":["../src/index.ts","../src/react/PeppermintChatbot/index.tsx","../src/react/PeppermintChatbot/index.styles.ts","../src/vanilla/index.ts"],"sourcesContent":["export { PeppermintChatbot } from \"./react\";\nexport { createChatbot } from \"./vanilla\";\n","import { useState, useRef, useEffect } from \"react\";\nimport {\n  ChatbotContainer,\n  MessageList,\n  MessageBubble,\n  InputContainer,\n  Textarea,\n  SendButton,\n  Header,\n  ChatbotName,\n  IconButton,\n  PoweredBy,\n  Footer,\n  InputContainerFooter,\n  InputContainerMarginTop,\n  HeaderMarginBottom,\n  WidgetButton,\n  Container,\n} from \"./index.styles\";\nimport type { Message } from \"./index.types\";\nimport LogoTransparent from \"../../assets/logo-transparent.png\";\n\nconst BLUR_FADE_MS = 200;\n\nfunction PeppermintChatbot() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [isVisible, setIsVisible] = useState(false);\n  const [isTransitioningOpen, setIsTransitioningOpen] = useState(false);\n  const [input, setInput] = useState(\"\");\n  const [messageList, setMessageList] = useState<Message[]>([]);\n\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsVisible(true);\n      let cancelled = false;\n      const id = requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          if (!cancelled) setIsTransitioningOpen(true);\n        });\n      });\n      return () => {\n        cancelled = true;\n        cancelAnimationFrame(id);\n      };\n    } else {\n      setIsTransitioningOpen(false);\n      const id = window.setTimeout(() => setIsVisible(false), BLUR_FADE_MS);\n      return () => clearTimeout(id);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  }, [messageList]);\n\n  const handleSend = () => {\n    const text = input.trim();\n\n    if (!text) return;\n\n    const userMessage: Message = {\n      id: `u-${Date.now()}`,\n      role: \"user\",\n      content: text,\n      timestamp: new Date().toISOString(),\n    };\n\n    setMessageList((prev) => [...prev, userMessage]);\n    setInput(\"\");\n  };\n\n  return (\n    <Container>\n      {isVisible && (\n        <ChatbotContainer $visible={isOpen && isTransitioningOpen}>\n          <Header>\n            <ChatbotName>Peppermint Chatbot</ChatbotName>\n            <IconButton type=\"button\" aria-label=\"Minimize\">\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                aria-hidden\n              >\n                <path d=\"M5 12h14\" />\n              </svg>\n            </IconButton>\n            <HeaderMarginBottom />\n          </Header>\n\n          <MessageList>\n            {messageList.map((msg) => (\n              <MessageBubble key={msg.id} $role={msg.role}>\n                {msg.content}\n              </MessageBubble>\n            ))}\n\n            <div ref={messagesEndRef} />\n          </MessageList>\n\n          <Footer>\n            <InputContainerMarginTop />\n            <InputContainer>\n              <Textarea\n                placeholder=\"Type a message...\"\n                value={input}\n                onChange={(e) => setInput(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" && !e.nativeEvent.isComposing) {\n                    if (!e.shiftKey) {\n                      e.preventDefault();\n                      handleSend();\n                    }\n                  }\n                }}\n                rows={1}\n                aria-label=\"Message\"\n              />\n\n              <InputContainerFooter>\n                <SendButton\n                  type=\"button\"\n                  onClick={handleSend}\n                  disabled={!input.trim()}\n                  aria-label=\"Send\"\n                >\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2.5\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden\n                  >\n                    <path d=\"M12 19V5\" />\n                    <path d=\"M5 12l7-7 7 7\" />\n                  </svg>\n                </SendButton>\n              </InputContainerFooter>\n            </InputContainer>\n\n            <PoweredBy href=\"\" target=\"_blank\" rel=\"noopener noreferrer\">\n              Powered by Peppermint Chatbot\n            </PoweredBy>\n          </Footer>\n        </ChatbotContainer>\n      )}\n\n      <WidgetButton onClick={() => setIsOpen((prev) => !prev)}>\n        <img\n          src={LogoTransparent}\n          alt=\"Peppermint Chatbot\"\n          width={60}\n          height={60}\n          draggable={false}\n        />\n      </WidgetButton>\n    </Container>\n  );\n}\n\nexport { PeppermintChatbot };\n","import styled from \"styled-components\";\nimport type { ComponentType } from \"react\";\nimport type { Role } from \"./index.types\";\n\nconst Container: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  position: fixed;\n  bottom: 32px;\n  right: 32px;\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  flex-direction: column;\n`;\n\nconst WidgetButton: ComponentType<React.HTMLAttributes<HTMLButtonElement>> = styled.button`\n  width: 60px;\n  height: 60px;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  background: #1a1a1a;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\n\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n`;\n\nconst ChatbotContainer: ComponentType<\n  React.HTMLAttributes<HTMLDivElement> & { $visible?: boolean }\n> = styled.div<{ $visible?: boolean }>`\n  position: absolute;\n  bottom: calc(100% + 16px);\n  right: 0;\n  box-sizing: border-box;\n  background: #ffffff;\n  width: 450px;\n  height: 500px;\n  min-height: 320px;\n  max-height: 520px;\n  border-radius: 20px 20px 24px 24px;\n  border: 1px solid #e0e0e0;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: column;\n\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 14px;\n  color: #1a1a1a;\n\n  opacity: ${(p) => (p.$visible ? 1 : 0)};\n  filter: ${(p) => (p.$visible ? \"blur(0)\" : \"blur(8px)\")};\n  transition: opacity 0.3s ease-out, filter 0.3s ease-out;\n  pointer-events: ${(p) => (p.$visible ? \"auto\" : \"none\")};\n`;\n\nconst Header: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  position: relative;\n  height: 44px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px 0 16px;\n`;\n\nconst HeaderMarginBottom: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  height: 8px;\n  background: linear-gradient(to top, transparent, #ffffff);\n`;\n\nconst ChatbotName: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  font-size: 14px;\n  color: #1a1a1a;\n`;\n\nconst IconButton: ComponentType<\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n> = styled.button`\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #1a1a1a;\n  background: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.06);\n  }\n`;\n\nconst MessageList: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 16px;\n\n  /* Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;\n\n  /* WebKit (Chrome, Safari, Edge) */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 0, 0, 0.35);\n  }\n`;\n\nconst MessageBubble: ComponentType<React.HTMLAttributes<HTMLDivElement> & { $role: Role }> = styled.div`\n  max-width: 85%;\n  border-radius: 12px;\n\n  padding: 0.6rem 1rem;\n  \n  word-break: break-word;\n  line-height: 1.45;\n\n  align-self: ${(p) => (p.$role === \"user\" ? \"flex-end\" : \"flex-start\")};\n  background: ${(p) => (p.$role === \"user\" ? \"#2d2d2d\" : \"#f0f0f0\")};\n  color: ${(p) => (p.$role === \"user\" ? \"#ffffff\" : \"#1a1a1a\")};\n`;\n\nconst Footer: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  background-color: transparent;\n  position: relative;\n`;\n\nconst InputContainerMarginTop: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  position: absolute;\n  top: -8px;\n  left: 0;\n  right: 0;\n  height: 8px;\n  background: linear-gradient(to bottom, transparent, #ffffff);\n`;\n\nconst InputContainer: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  position: relative;\n  height: 90px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  border-radius: 16px;\n  border: 1px solid #e0e0e0;\n  background: #ffffff;\n  margin: 8px 16px 0px 16px;\n  \n  &:focus-within {\n    border-color: rgba(0, 0, 0, 0.3);\n  }\n`;\n\nconst Textarea: ComponentType<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>\n> = styled.textarea`\n  flex: 1;\n  background-color: transparent;\n  margin: 8px 8px 8px 16px;\n  border: none;\n  font-size: 14px;\n  outline: none;\n  resize: none;\n  min-height: 24px;\n  max-height: 120px;\n  line-height: 1.4;\n  font-family: inherit;\n\n  &::placeholder {\n    color: #888;\n  }\n\n  /* Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;\n\n  /* WebKit (Chrome, Safari, Edge) */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 0, 0, 0.35);\n  }\n`;\n\nconst InputContainerFooter: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  height: 36px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding-left: 4px;\n  padding-right: 4px;\n  background-color: transparent;\n`;\n\nconst SendButton: ComponentType<\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n> = styled.button`\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  background: #1a1a1a;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n\n  &:hover:not(:disabled) {\n    opacity: 0.9;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\nconst PoweredBy: ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>> = styled.a`\n  display: block;\n  font-size: 8px;\n  color: #888;\n  text-decoration: none;\n  padding: 4px 16px 4px 16px;\n  text-align: center;\n  cursor: pointer;\n\n  &:hover {\n    color: #1a1a1a;\n  }\n`;\n\nexport {\n  Container,\n  WidgetButton,\n  ChatbotContainer,\n  Header,\n  HeaderMarginBottom,\n  ChatbotName,\n  IconButton,\n  MessageList,\n  MessageBubble,\n  Footer,\n  InputContainerMarginTop,\n  InputContainer,\n  Textarea,\n  InputContainerFooter,\n  SendButton,\n  PoweredBy,\n};\n","import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { PeppermintChatbot } from \"../react\";\n\n/**\n * Mount the chatbot into a container (vanilla JS, Vue, Svelte).\n * Requires react and react-dom to be available (e.g. via script or bundler).\n */\nexport function createChatbot(\n  container: HTMLElement,\n  props: {\n    /** Layout: \"widget\" (bubble) or \"page\" (full card) */\n    layout?: \"widget\" | \"page\";\n    /** Chatbot display name */\n    chatbotName?: string;\n    /** Greeting message shown when chat is empty */\n    greetingMessage?: string;\n    /** Optional chatbot avatar URL */\n    chatbotProfileImage?: string;\n    /** Optional user avatar URL */\n    userProfileImage?: string;\n    /** Background color (hex) */\n    backgroundColor?: string;\n    /** Font color (hex) */\n    fontColor?: string;\n    /** Chatbot bubble color (hex) */\n    chatbotBubbleColor?: string;\n    /** User bubble color (hex) */\n    userBubbleColor?: string;\n    /** Initial messages (e.g. from API) */\n    initialMessages?: {\n      id: string;\n      role: \"user\" | \"assistant\";\n      content: string;\n      timestamp?: string;\n    }[];\n    /** Callback when user sends a message */\n    onSendMessage?: (content: string) => void;\n    /** Optional class name for the root container */\n    className?: string;\n  } = {}\n): { unmount: () => void } {\n  const root = createRoot(container);\n  root.render(React.createElement(PeppermintChatbot, props));\n  return {\n    unmount: () => root.unmount(),\n  };\n}\n\n"],"mappings":"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","names":["styled","import_react","React"]}