peppermint-chatbot-sdk 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -0
- package/dist/index.d.mts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +214 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +176 -0
- package/dist/index.mjs.map +1 -0
- package/dist/react/index.d.mts +7 -0
- package/dist/react/index.d.ts +7 -0
- package/dist/react/index.js +201 -0
- package/dist/react/index.js.map +1 -0
- package/dist/react/index.mjs +164 -0
- package/dist/react/index.mjs.map +1 -0
- package/dist/types-BfQUN3Hf.d.mts +34 -0
- package/dist/types-BfQUN3Hf.d.ts +34 -0
- package/dist/vanilla/index.d.mts +11 -0
- package/dist/vanilla/index.d.ts +11 -0
- package/dist/vanilla/index.js +210 -0
- package/dist/vanilla/index.js.map +1 -0
- package/dist/vanilla/index.mjs +175 -0
- package/dist/vanilla/index.mjs.map +1 -0
- package/package.json +63 -0
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/vanilla/index.ts
|
|
31
|
+
var vanilla_exports = {};
|
|
32
|
+
__export(vanilla_exports, {
|
|
33
|
+
createChatbot: () => createChatbot
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(vanilla_exports);
|
|
36
|
+
var import_react2 = __toESM(require("react"));
|
|
37
|
+
var import_client = require("react-dom/client");
|
|
38
|
+
|
|
39
|
+
// src/react/Chatbot.tsx
|
|
40
|
+
var import_react = require("react");
|
|
41
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
|
+
var Root = import_styled_components.default.div`
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 100%;
|
|
48
|
+
min-height: ${(p) => p.$layout === "page" ? "400px" : "320px"};
|
|
49
|
+
max-height: ${(p) => p.$layout === "page" ? "620px" : "520px"};
|
|
50
|
+
background: ${(p) => p.$backgroundColor ?? "#ffffff"};
|
|
51
|
+
color: ${(p) => p.$fontColor ?? "#1a1a1a"};
|
|
52
|
+
border-radius: 16px;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
55
|
+
font-size: 14px;
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
`;
|
|
58
|
+
var Messages = import_styled_components.default.div`
|
|
59
|
+
flex: 1;
|
|
60
|
+
overflow-y: auto;
|
|
61
|
+
padding: 1rem;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: 0.75rem;
|
|
65
|
+
`;
|
|
66
|
+
var MessageBubble = import_styled_components.default.div`
|
|
67
|
+
align-self: ${(p) => p.$role === "user" ? "flex-end" : "flex-start"};
|
|
68
|
+
max-width: 85%;
|
|
69
|
+
padding: 0.6rem 1rem;
|
|
70
|
+
border-radius: 12px;
|
|
71
|
+
line-height: 1.45;
|
|
72
|
+
word-break: break-word;
|
|
73
|
+
background: ${(p) => p.$role === "user" ? p.$userBubbleColor ?? "#2d2d2d" : p.$chatbotBubbleColor ?? "#f0f0f0"};
|
|
74
|
+
color: ${(p) => p.$role === "user" ? "#ffffff" : "#1a1a1a"};
|
|
75
|
+
`;
|
|
76
|
+
var Greeting = import_styled_components.default.p`
|
|
77
|
+
margin: 0;
|
|
78
|
+
color: inherit;
|
|
79
|
+
opacity: 0.85;
|
|
80
|
+
`;
|
|
81
|
+
var InputRow = import_styled_components.default.div`
|
|
82
|
+
display: flex;
|
|
83
|
+
gap: 0.5rem;
|
|
84
|
+
padding: 0.75rem 1rem;
|
|
85
|
+
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
86
|
+
background: rgba(0, 0, 0, 0.02);
|
|
87
|
+
`;
|
|
88
|
+
var Input = import_styled_components.default.input`
|
|
89
|
+
flex: 1;
|
|
90
|
+
padding: 0.6rem 0.75rem;
|
|
91
|
+
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
92
|
+
border-radius: 8px;
|
|
93
|
+
font-size: 14px;
|
|
94
|
+
outline: none;
|
|
95
|
+
&::placeholder {
|
|
96
|
+
color: #888;
|
|
97
|
+
}
|
|
98
|
+
&:focus {
|
|
99
|
+
border-color: rgba(0, 0, 0, 0.3);
|
|
100
|
+
}
|
|
101
|
+
`;
|
|
102
|
+
var SendButton = import_styled_components.default.button`
|
|
103
|
+
padding: 0.6rem 1rem;
|
|
104
|
+
font-size: 14px;
|
|
105
|
+
font-weight: 600;
|
|
106
|
+
color: #fff;
|
|
107
|
+
background: #1a1a1a;
|
|
108
|
+
border: none;
|
|
109
|
+
border-radius: 8px;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
&:hover {
|
|
112
|
+
opacity: 0.9;
|
|
113
|
+
}
|
|
114
|
+
&:disabled {
|
|
115
|
+
opacity: 0.5;
|
|
116
|
+
cursor: not-allowed;
|
|
117
|
+
}
|
|
118
|
+
`;
|
|
119
|
+
function PeppermintChatbot({
|
|
120
|
+
layout = "page",
|
|
121
|
+
chatbotName,
|
|
122
|
+
greetingMessage = "Hi! How can I help you today?",
|
|
123
|
+
backgroundColor,
|
|
124
|
+
fontColor,
|
|
125
|
+
chatbotBubbleColor,
|
|
126
|
+
userBubbleColor,
|
|
127
|
+
initialMessages = [],
|
|
128
|
+
onSendMessage,
|
|
129
|
+
className
|
|
130
|
+
}) {
|
|
131
|
+
const [messages, setMessages] = (0, import_react.useState)(initialMessages);
|
|
132
|
+
const [input, setInput] = (0, import_react.useState)("");
|
|
133
|
+
const messagesEndRef = (0, import_react.useRef)(null);
|
|
134
|
+
(0, import_react.useEffect)(() => {
|
|
135
|
+
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
136
|
+
}, [messages]);
|
|
137
|
+
const handleSend = () => {
|
|
138
|
+
const text = input.trim();
|
|
139
|
+
if (!text) return;
|
|
140
|
+
const userMsg = {
|
|
141
|
+
id: `u-${Date.now()}`,
|
|
142
|
+
role: "user",
|
|
143
|
+
content: text
|
|
144
|
+
};
|
|
145
|
+
setMessages((prev) => [...prev, userMsg]);
|
|
146
|
+
setInput("");
|
|
147
|
+
onSendMessage?.(text);
|
|
148
|
+
};
|
|
149
|
+
const showGreeting = messages.length === 0 && greetingMessage;
|
|
150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
151
|
+
Root,
|
|
152
|
+
{
|
|
153
|
+
className,
|
|
154
|
+
$layout: layout,
|
|
155
|
+
$backgroundColor: backgroundColor,
|
|
156
|
+
$fontColor: fontColor,
|
|
157
|
+
children: [
|
|
158
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Messages, { children: [
|
|
159
|
+
showGreeting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
160
|
+
MessageBubble,
|
|
161
|
+
{
|
|
162
|
+
$role: "assistant",
|
|
163
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
164
|
+
$userBubbleColor: userBubbleColor,
|
|
165
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Greeting, { children: greetingMessage })
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
169
|
+
MessageBubble,
|
|
170
|
+
{
|
|
171
|
+
$role: msg.role,
|
|
172
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
173
|
+
$userBubbleColor: userBubbleColor,
|
|
174
|
+
children: msg.content
|
|
175
|
+
},
|
|
176
|
+
msg.id
|
|
177
|
+
)),
|
|
178
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
|
|
179
|
+
] }),
|
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputRow, { children: [
|
|
181
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
182
|
+
Input,
|
|
183
|
+
{
|
|
184
|
+
type: "text",
|
|
185
|
+
placeholder: "Type a message...",
|
|
186
|
+
value: input,
|
|
187
|
+
onChange: (e) => setInput(e.target.value),
|
|
188
|
+
onKeyDown: (e) => e.key === "Enter" && handleSend()
|
|
189
|
+
}
|
|
190
|
+
),
|
|
191
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SendButton, { type: "button", onClick: handleSend, disabled: !input.trim(), children: "Send" })
|
|
192
|
+
] })
|
|
193
|
+
]
|
|
194
|
+
}
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// src/vanilla/index.ts
|
|
199
|
+
function createChatbot(container, props = {}) {
|
|
200
|
+
const root = (0, import_client.createRoot)(container);
|
|
201
|
+
root.render(import_react2.default.createElement(PeppermintChatbot, props));
|
|
202
|
+
return {
|
|
203
|
+
unmount: () => root.unmount()
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
207
|
+
0 && (module.exports = {
|
|
208
|
+
createChatbot
|
|
209
|
+
});
|
|
210
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/vanilla/index.ts","../../src/react/Chatbot.tsx"],"sourcesContent":["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","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"],"mappings":"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","names":["import_react","styled","React"]}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
// src/vanilla/index.ts
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { createRoot } from "react-dom/client";
|
|
4
|
+
|
|
5
|
+
// src/react/Chatbot.tsx
|
|
6
|
+
import { useState, useRef, useEffect } from "react";
|
|
7
|
+
import styled from "styled-components";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
var Root = styled.div`
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
min-height: ${(p) => p.$layout === "page" ? "400px" : "320px"};
|
|
15
|
+
max-height: ${(p) => p.$layout === "page" ? "620px" : "520px"};
|
|
16
|
+
background: ${(p) => p.$backgroundColor ?? "#ffffff"};
|
|
17
|
+
color: ${(p) => p.$fontColor ?? "#1a1a1a"};
|
|
18
|
+
border-radius: 16px;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
21
|
+
font-size: 14px;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
`;
|
|
24
|
+
var Messages = styled.div`
|
|
25
|
+
flex: 1;
|
|
26
|
+
overflow-y: auto;
|
|
27
|
+
padding: 1rem;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
gap: 0.75rem;
|
|
31
|
+
`;
|
|
32
|
+
var MessageBubble = styled.div`
|
|
33
|
+
align-self: ${(p) => p.$role === "user" ? "flex-end" : "flex-start"};
|
|
34
|
+
max-width: 85%;
|
|
35
|
+
padding: 0.6rem 1rem;
|
|
36
|
+
border-radius: 12px;
|
|
37
|
+
line-height: 1.45;
|
|
38
|
+
word-break: break-word;
|
|
39
|
+
background: ${(p) => p.$role === "user" ? p.$userBubbleColor ?? "#2d2d2d" : p.$chatbotBubbleColor ?? "#f0f0f0"};
|
|
40
|
+
color: ${(p) => p.$role === "user" ? "#ffffff" : "#1a1a1a"};
|
|
41
|
+
`;
|
|
42
|
+
var Greeting = styled.p`
|
|
43
|
+
margin: 0;
|
|
44
|
+
color: inherit;
|
|
45
|
+
opacity: 0.85;
|
|
46
|
+
`;
|
|
47
|
+
var InputRow = styled.div`
|
|
48
|
+
display: flex;
|
|
49
|
+
gap: 0.5rem;
|
|
50
|
+
padding: 0.75rem 1rem;
|
|
51
|
+
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
52
|
+
background: rgba(0, 0, 0, 0.02);
|
|
53
|
+
`;
|
|
54
|
+
var Input = styled.input`
|
|
55
|
+
flex: 1;
|
|
56
|
+
padding: 0.6rem 0.75rem;
|
|
57
|
+
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
58
|
+
border-radius: 8px;
|
|
59
|
+
font-size: 14px;
|
|
60
|
+
outline: none;
|
|
61
|
+
&::placeholder {
|
|
62
|
+
color: #888;
|
|
63
|
+
}
|
|
64
|
+
&:focus {
|
|
65
|
+
border-color: rgba(0, 0, 0, 0.3);
|
|
66
|
+
}
|
|
67
|
+
`;
|
|
68
|
+
var SendButton = styled.button`
|
|
69
|
+
padding: 0.6rem 1rem;
|
|
70
|
+
font-size: 14px;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
color: #fff;
|
|
73
|
+
background: #1a1a1a;
|
|
74
|
+
border: none;
|
|
75
|
+
border-radius: 8px;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
&:hover {
|
|
78
|
+
opacity: 0.9;
|
|
79
|
+
}
|
|
80
|
+
&:disabled {
|
|
81
|
+
opacity: 0.5;
|
|
82
|
+
cursor: not-allowed;
|
|
83
|
+
}
|
|
84
|
+
`;
|
|
85
|
+
function PeppermintChatbot({
|
|
86
|
+
layout = "page",
|
|
87
|
+
chatbotName,
|
|
88
|
+
greetingMessage = "Hi! How can I help you today?",
|
|
89
|
+
backgroundColor,
|
|
90
|
+
fontColor,
|
|
91
|
+
chatbotBubbleColor,
|
|
92
|
+
userBubbleColor,
|
|
93
|
+
initialMessages = [],
|
|
94
|
+
onSendMessage,
|
|
95
|
+
className
|
|
96
|
+
}) {
|
|
97
|
+
const [messages, setMessages] = useState(initialMessages);
|
|
98
|
+
const [input, setInput] = useState("");
|
|
99
|
+
const messagesEndRef = useRef(null);
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
102
|
+
}, [messages]);
|
|
103
|
+
const handleSend = () => {
|
|
104
|
+
const text = input.trim();
|
|
105
|
+
if (!text) return;
|
|
106
|
+
const userMsg = {
|
|
107
|
+
id: `u-${Date.now()}`,
|
|
108
|
+
role: "user",
|
|
109
|
+
content: text
|
|
110
|
+
};
|
|
111
|
+
setMessages((prev) => [...prev, userMsg]);
|
|
112
|
+
setInput("");
|
|
113
|
+
onSendMessage?.(text);
|
|
114
|
+
};
|
|
115
|
+
const showGreeting = messages.length === 0 && greetingMessage;
|
|
116
|
+
return /* @__PURE__ */ jsxs(
|
|
117
|
+
Root,
|
|
118
|
+
{
|
|
119
|
+
className,
|
|
120
|
+
$layout: layout,
|
|
121
|
+
$backgroundColor: backgroundColor,
|
|
122
|
+
$fontColor: fontColor,
|
|
123
|
+
children: [
|
|
124
|
+
/* @__PURE__ */ jsxs(Messages, { children: [
|
|
125
|
+
showGreeting && /* @__PURE__ */ jsx(
|
|
126
|
+
MessageBubble,
|
|
127
|
+
{
|
|
128
|
+
$role: "assistant",
|
|
129
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
130
|
+
$userBubbleColor: userBubbleColor,
|
|
131
|
+
children: /* @__PURE__ */ jsx(Greeting, { children: greetingMessage })
|
|
132
|
+
}
|
|
133
|
+
),
|
|
134
|
+
messages.map((msg) => /* @__PURE__ */ jsx(
|
|
135
|
+
MessageBubble,
|
|
136
|
+
{
|
|
137
|
+
$role: msg.role,
|
|
138
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
139
|
+
$userBubbleColor: userBubbleColor,
|
|
140
|
+
children: msg.content
|
|
141
|
+
},
|
|
142
|
+
msg.id
|
|
143
|
+
)),
|
|
144
|
+
/* @__PURE__ */ jsx("div", { ref: messagesEndRef })
|
|
145
|
+
] }),
|
|
146
|
+
/* @__PURE__ */ jsxs(InputRow, { children: [
|
|
147
|
+
/* @__PURE__ */ jsx(
|
|
148
|
+
Input,
|
|
149
|
+
{
|
|
150
|
+
type: "text",
|
|
151
|
+
placeholder: "Type a message...",
|
|
152
|
+
value: input,
|
|
153
|
+
onChange: (e) => setInput(e.target.value),
|
|
154
|
+
onKeyDown: (e) => e.key === "Enter" && handleSend()
|
|
155
|
+
}
|
|
156
|
+
),
|
|
157
|
+
/* @__PURE__ */ jsx(SendButton, { type: "button", onClick: handleSend, disabled: !input.trim(), children: "Send" })
|
|
158
|
+
] })
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
// src/vanilla/index.ts
|
|
165
|
+
function createChatbot(container, props = {}) {
|
|
166
|
+
const root = createRoot(container);
|
|
167
|
+
root.render(React2.createElement(PeppermintChatbot, props));
|
|
168
|
+
return {
|
|
169
|
+
unmount: () => root.unmount()
|
|
170
|
+
};
|
|
171
|
+
}
|
|
172
|
+
export {
|
|
173
|
+
createChatbot
|
|
174
|
+
};
|
|
175
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/vanilla/index.ts","../../src/react/Chatbot.tsx"],"sourcesContent":["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","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"],"mappings":"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","names":["React","React"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "peppermint-chatbot-sdk",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Embeddable chatbot widget for React, Vue, Svelte, and vanilla JS",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./react": {
|
|
15
|
+
"types": "./dist/react/index.d.ts",
|
|
16
|
+
"import": "./dist/react/index.mjs",
|
|
17
|
+
"require": "./dist/react/index.js"
|
|
18
|
+
},
|
|
19
|
+
"./vanilla": {
|
|
20
|
+
"types": "./dist/vanilla/index.d.ts",
|
|
21
|
+
"import": "./dist/vanilla/index.mjs",
|
|
22
|
+
"require": "./dist/vanilla/index.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"files": [
|
|
26
|
+
"dist",
|
|
27
|
+
"README.md"
|
|
28
|
+
],
|
|
29
|
+
"scripts": {
|
|
30
|
+
"build": "tsup",
|
|
31
|
+
"dev": "tsup --watch",
|
|
32
|
+
"prepublishOnly": "yarn build"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": ">=17.0.0",
|
|
36
|
+
"react-dom": ">=17.0.0",
|
|
37
|
+
"styled-components": ">=5.0.0"
|
|
38
|
+
},
|
|
39
|
+
"peerDependenciesMeta": {
|
|
40
|
+
"styled-components": {
|
|
41
|
+
"optional": true
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@types/react": "^18.3.12",
|
|
46
|
+
"@types/react-dom": "^18.3.1",
|
|
47
|
+
"react": "^18.3.1",
|
|
48
|
+
"react-dom": "^18.3.1",
|
|
49
|
+
"styled-components": "^6.1.13",
|
|
50
|
+
"tsup": "^8.3.5",
|
|
51
|
+
"typescript": "~5.6.3"
|
|
52
|
+
},
|
|
53
|
+
"keywords": [
|
|
54
|
+
"chatbot",
|
|
55
|
+
"chat",
|
|
56
|
+
"widget",
|
|
57
|
+
"react",
|
|
58
|
+
"vue",
|
|
59
|
+
"svelte"
|
|
60
|
+
],
|
|
61
|
+
"license": "MIT",
|
|
62
|
+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
|
63
|
+
}
|