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,201 @@
|
|
|
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/react/index.ts
|
|
31
|
+
var react_exports = {};
|
|
32
|
+
__export(react_exports, {
|
|
33
|
+
PeppermintChatbot: () => PeppermintChatbot,
|
|
34
|
+
default: () => Chatbot_default
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(react_exports);
|
|
37
|
+
|
|
38
|
+
// src/react/Chatbot.tsx
|
|
39
|
+
var import_react = require("react");
|
|
40
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
var Root = import_styled_components.default.div`
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: 100%;
|
|
47
|
+
min-height: ${(p) => p.$layout === "page" ? "400px" : "320px"};
|
|
48
|
+
max-height: ${(p) => p.$layout === "page" ? "620px" : "520px"};
|
|
49
|
+
background: ${(p) => p.$backgroundColor ?? "#ffffff"};
|
|
50
|
+
color: ${(p) => p.$fontColor ?? "#1a1a1a"};
|
|
51
|
+
border-radius: 16px;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
box-sizing: border-box;
|
|
56
|
+
`;
|
|
57
|
+
var Messages = import_styled_components.default.div`
|
|
58
|
+
flex: 1;
|
|
59
|
+
overflow-y: auto;
|
|
60
|
+
padding: 1rem;
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
gap: 0.75rem;
|
|
64
|
+
`;
|
|
65
|
+
var MessageBubble = import_styled_components.default.div`
|
|
66
|
+
align-self: ${(p) => p.$role === "user" ? "flex-end" : "flex-start"};
|
|
67
|
+
max-width: 85%;
|
|
68
|
+
padding: 0.6rem 1rem;
|
|
69
|
+
border-radius: 12px;
|
|
70
|
+
line-height: 1.45;
|
|
71
|
+
word-break: break-word;
|
|
72
|
+
background: ${(p) => p.$role === "user" ? p.$userBubbleColor ?? "#2d2d2d" : p.$chatbotBubbleColor ?? "#f0f0f0"};
|
|
73
|
+
color: ${(p) => p.$role === "user" ? "#ffffff" : "#1a1a1a"};
|
|
74
|
+
`;
|
|
75
|
+
var Greeting = import_styled_components.default.p`
|
|
76
|
+
margin: 0;
|
|
77
|
+
color: inherit;
|
|
78
|
+
opacity: 0.85;
|
|
79
|
+
`;
|
|
80
|
+
var InputRow = import_styled_components.default.div`
|
|
81
|
+
display: flex;
|
|
82
|
+
gap: 0.5rem;
|
|
83
|
+
padding: 0.75rem 1rem;
|
|
84
|
+
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
85
|
+
background: rgba(0, 0, 0, 0.02);
|
|
86
|
+
`;
|
|
87
|
+
var Input = import_styled_components.default.input`
|
|
88
|
+
flex: 1;
|
|
89
|
+
padding: 0.6rem 0.75rem;
|
|
90
|
+
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
91
|
+
border-radius: 8px;
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
outline: none;
|
|
94
|
+
&::placeholder {
|
|
95
|
+
color: #888;
|
|
96
|
+
}
|
|
97
|
+
&:focus {
|
|
98
|
+
border-color: rgba(0, 0, 0, 0.3);
|
|
99
|
+
}
|
|
100
|
+
`;
|
|
101
|
+
var SendButton = import_styled_components.default.button`
|
|
102
|
+
padding: 0.6rem 1rem;
|
|
103
|
+
font-size: 14px;
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
color: #fff;
|
|
106
|
+
background: #1a1a1a;
|
|
107
|
+
border: none;
|
|
108
|
+
border-radius: 8px;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
&:hover {
|
|
111
|
+
opacity: 0.9;
|
|
112
|
+
}
|
|
113
|
+
&:disabled {
|
|
114
|
+
opacity: 0.5;
|
|
115
|
+
cursor: not-allowed;
|
|
116
|
+
}
|
|
117
|
+
`;
|
|
118
|
+
function PeppermintChatbot({
|
|
119
|
+
layout = "page",
|
|
120
|
+
chatbotName,
|
|
121
|
+
greetingMessage = "Hi! How can I help you today?",
|
|
122
|
+
backgroundColor,
|
|
123
|
+
fontColor,
|
|
124
|
+
chatbotBubbleColor,
|
|
125
|
+
userBubbleColor,
|
|
126
|
+
initialMessages = [],
|
|
127
|
+
onSendMessage,
|
|
128
|
+
className
|
|
129
|
+
}) {
|
|
130
|
+
const [messages, setMessages] = (0, import_react.useState)(initialMessages);
|
|
131
|
+
const [input, setInput] = (0, import_react.useState)("");
|
|
132
|
+
const messagesEndRef = (0, import_react.useRef)(null);
|
|
133
|
+
(0, import_react.useEffect)(() => {
|
|
134
|
+
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
135
|
+
}, [messages]);
|
|
136
|
+
const handleSend = () => {
|
|
137
|
+
const text = input.trim();
|
|
138
|
+
if (!text) return;
|
|
139
|
+
const userMsg = {
|
|
140
|
+
id: `u-${Date.now()}`,
|
|
141
|
+
role: "user",
|
|
142
|
+
content: text
|
|
143
|
+
};
|
|
144
|
+
setMessages((prev) => [...prev, userMsg]);
|
|
145
|
+
setInput("");
|
|
146
|
+
onSendMessage?.(text);
|
|
147
|
+
};
|
|
148
|
+
const showGreeting = messages.length === 0 && greetingMessage;
|
|
149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
150
|
+
Root,
|
|
151
|
+
{
|
|
152
|
+
className,
|
|
153
|
+
$layout: layout,
|
|
154
|
+
$backgroundColor: backgroundColor,
|
|
155
|
+
$fontColor: fontColor,
|
|
156
|
+
children: [
|
|
157
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Messages, { children: [
|
|
158
|
+
showGreeting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
159
|
+
MessageBubble,
|
|
160
|
+
{
|
|
161
|
+
$role: "assistant",
|
|
162
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
163
|
+
$userBubbleColor: userBubbleColor,
|
|
164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Greeting, { children: greetingMessage })
|
|
165
|
+
}
|
|
166
|
+
),
|
|
167
|
+
messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
168
|
+
MessageBubble,
|
|
169
|
+
{
|
|
170
|
+
$role: msg.role,
|
|
171
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
172
|
+
$userBubbleColor: userBubbleColor,
|
|
173
|
+
children: msg.content
|
|
174
|
+
},
|
|
175
|
+
msg.id
|
|
176
|
+
)),
|
|
177
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
|
|
178
|
+
] }),
|
|
179
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputRow, { children: [
|
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
181
|
+
Input,
|
|
182
|
+
{
|
|
183
|
+
type: "text",
|
|
184
|
+
placeholder: "Type a message...",
|
|
185
|
+
value: input,
|
|
186
|
+
onChange: (e) => setInput(e.target.value),
|
|
187
|
+
onKeyDown: (e) => e.key === "Enter" && handleSend()
|
|
188
|
+
}
|
|
189
|
+
),
|
|
190
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SendButton, { type: "button", onClick: handleSend, disabled: !input.trim(), children: "Send" })
|
|
191
|
+
] })
|
|
192
|
+
]
|
|
193
|
+
}
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
var Chatbot_default = PeppermintChatbot;
|
|
197
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
198
|
+
0 && (module.exports = {
|
|
199
|
+
PeppermintChatbot
|
|
200
|
+
});
|
|
201
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/react/index.ts","../../src/react/Chatbot.tsx"],"sourcesContent":["export { PeppermintChatbot, default } from \"./Chatbot\";\nexport type { PeppermintChatbotProps } from \"../types\";\nexport type { 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"],"mappings":"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","names":["styled"]}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
// src/react/Chatbot.tsx
|
|
2
|
+
import { useState, useRef, useEffect } from "react";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
var Root = styled.div`
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
min-height: ${(p) => p.$layout === "page" ? "400px" : "320px"};
|
|
11
|
+
max-height: ${(p) => p.$layout === "page" ? "620px" : "520px"};
|
|
12
|
+
background: ${(p) => p.$backgroundColor ?? "#ffffff"};
|
|
13
|
+
color: ${(p) => p.$fontColor ?? "#1a1a1a"};
|
|
14
|
+
border-radius: 16px;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
17
|
+
font-size: 14px;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
`;
|
|
20
|
+
var Messages = styled.div`
|
|
21
|
+
flex: 1;
|
|
22
|
+
overflow-y: auto;
|
|
23
|
+
padding: 1rem;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
gap: 0.75rem;
|
|
27
|
+
`;
|
|
28
|
+
var MessageBubble = styled.div`
|
|
29
|
+
align-self: ${(p) => p.$role === "user" ? "flex-end" : "flex-start"};
|
|
30
|
+
max-width: 85%;
|
|
31
|
+
padding: 0.6rem 1rem;
|
|
32
|
+
border-radius: 12px;
|
|
33
|
+
line-height: 1.45;
|
|
34
|
+
word-break: break-word;
|
|
35
|
+
background: ${(p) => p.$role === "user" ? p.$userBubbleColor ?? "#2d2d2d" : p.$chatbotBubbleColor ?? "#f0f0f0"};
|
|
36
|
+
color: ${(p) => p.$role === "user" ? "#ffffff" : "#1a1a1a"};
|
|
37
|
+
`;
|
|
38
|
+
var Greeting = styled.p`
|
|
39
|
+
margin: 0;
|
|
40
|
+
color: inherit;
|
|
41
|
+
opacity: 0.85;
|
|
42
|
+
`;
|
|
43
|
+
var InputRow = styled.div`
|
|
44
|
+
display: flex;
|
|
45
|
+
gap: 0.5rem;
|
|
46
|
+
padding: 0.75rem 1rem;
|
|
47
|
+
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
48
|
+
background: rgba(0, 0, 0, 0.02);
|
|
49
|
+
`;
|
|
50
|
+
var Input = styled.input`
|
|
51
|
+
flex: 1;
|
|
52
|
+
padding: 0.6rem 0.75rem;
|
|
53
|
+
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
54
|
+
border-radius: 8px;
|
|
55
|
+
font-size: 14px;
|
|
56
|
+
outline: none;
|
|
57
|
+
&::placeholder {
|
|
58
|
+
color: #888;
|
|
59
|
+
}
|
|
60
|
+
&:focus {
|
|
61
|
+
border-color: rgba(0, 0, 0, 0.3);
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
var SendButton = styled.button`
|
|
65
|
+
padding: 0.6rem 1rem;
|
|
66
|
+
font-size: 14px;
|
|
67
|
+
font-weight: 600;
|
|
68
|
+
color: #fff;
|
|
69
|
+
background: #1a1a1a;
|
|
70
|
+
border: none;
|
|
71
|
+
border-radius: 8px;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
&:hover {
|
|
74
|
+
opacity: 0.9;
|
|
75
|
+
}
|
|
76
|
+
&:disabled {
|
|
77
|
+
opacity: 0.5;
|
|
78
|
+
cursor: not-allowed;
|
|
79
|
+
}
|
|
80
|
+
`;
|
|
81
|
+
function PeppermintChatbot({
|
|
82
|
+
layout = "page",
|
|
83
|
+
chatbotName,
|
|
84
|
+
greetingMessage = "Hi! How can I help you today?",
|
|
85
|
+
backgroundColor,
|
|
86
|
+
fontColor,
|
|
87
|
+
chatbotBubbleColor,
|
|
88
|
+
userBubbleColor,
|
|
89
|
+
initialMessages = [],
|
|
90
|
+
onSendMessage,
|
|
91
|
+
className
|
|
92
|
+
}) {
|
|
93
|
+
const [messages, setMessages] = useState(initialMessages);
|
|
94
|
+
const [input, setInput] = useState("");
|
|
95
|
+
const messagesEndRef = useRef(null);
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
98
|
+
}, [messages]);
|
|
99
|
+
const handleSend = () => {
|
|
100
|
+
const text = input.trim();
|
|
101
|
+
if (!text) return;
|
|
102
|
+
const userMsg = {
|
|
103
|
+
id: `u-${Date.now()}`,
|
|
104
|
+
role: "user",
|
|
105
|
+
content: text
|
|
106
|
+
};
|
|
107
|
+
setMessages((prev) => [...prev, userMsg]);
|
|
108
|
+
setInput("");
|
|
109
|
+
onSendMessage?.(text);
|
|
110
|
+
};
|
|
111
|
+
const showGreeting = messages.length === 0 && greetingMessage;
|
|
112
|
+
return /* @__PURE__ */ jsxs(
|
|
113
|
+
Root,
|
|
114
|
+
{
|
|
115
|
+
className,
|
|
116
|
+
$layout: layout,
|
|
117
|
+
$backgroundColor: backgroundColor,
|
|
118
|
+
$fontColor: fontColor,
|
|
119
|
+
children: [
|
|
120
|
+
/* @__PURE__ */ jsxs(Messages, { children: [
|
|
121
|
+
showGreeting && /* @__PURE__ */ jsx(
|
|
122
|
+
MessageBubble,
|
|
123
|
+
{
|
|
124
|
+
$role: "assistant",
|
|
125
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
126
|
+
$userBubbleColor: userBubbleColor,
|
|
127
|
+
children: /* @__PURE__ */ jsx(Greeting, { children: greetingMessage })
|
|
128
|
+
}
|
|
129
|
+
),
|
|
130
|
+
messages.map((msg) => /* @__PURE__ */ jsx(
|
|
131
|
+
MessageBubble,
|
|
132
|
+
{
|
|
133
|
+
$role: msg.role,
|
|
134
|
+
$chatbotBubbleColor: chatbotBubbleColor,
|
|
135
|
+
$userBubbleColor: userBubbleColor,
|
|
136
|
+
children: msg.content
|
|
137
|
+
},
|
|
138
|
+
msg.id
|
|
139
|
+
)),
|
|
140
|
+
/* @__PURE__ */ jsx("div", { ref: messagesEndRef })
|
|
141
|
+
] }),
|
|
142
|
+
/* @__PURE__ */ jsxs(InputRow, { children: [
|
|
143
|
+
/* @__PURE__ */ jsx(
|
|
144
|
+
Input,
|
|
145
|
+
{
|
|
146
|
+
type: "text",
|
|
147
|
+
placeholder: "Type a message...",
|
|
148
|
+
value: input,
|
|
149
|
+
onChange: (e) => setInput(e.target.value),
|
|
150
|
+
onKeyDown: (e) => e.key === "Enter" && handleSend()
|
|
151
|
+
}
|
|
152
|
+
),
|
|
153
|
+
/* @__PURE__ */ jsx(SendButton, { type: "button", onClick: handleSend, disabled: !input.trim(), children: "Send" })
|
|
154
|
+
] })
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
var Chatbot_default = PeppermintChatbot;
|
|
160
|
+
export {
|
|
161
|
+
PeppermintChatbot,
|
|
162
|
+
Chatbot_default as default
|
|
163
|
+
};
|
|
164
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/react/Chatbot.tsx"],"sourcesContent":["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":[]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
interface ChatMessage {
|
|
2
|
+
id: string;
|
|
3
|
+
role: "user" | "assistant";
|
|
4
|
+
content: string;
|
|
5
|
+
timestamp?: string;
|
|
6
|
+
}
|
|
7
|
+
interface PeppermintChatbotProps {
|
|
8
|
+
/** Layout: "widget" (bubble) or "page" (full card) */
|
|
9
|
+
layout?: "widget" | "page";
|
|
10
|
+
/** Chatbot display name */
|
|
11
|
+
chatbotName?: string;
|
|
12
|
+
/** Greeting message shown when chat is empty */
|
|
13
|
+
greetingMessage?: string;
|
|
14
|
+
/** Optional chatbot avatar URL */
|
|
15
|
+
chatbotProfileImage?: string;
|
|
16
|
+
/** Optional user avatar URL */
|
|
17
|
+
userProfileImage?: string;
|
|
18
|
+
/** Background color (hex) */
|
|
19
|
+
backgroundColor?: string;
|
|
20
|
+
/** Font color (hex) */
|
|
21
|
+
fontColor?: string;
|
|
22
|
+
/** Chatbot bubble color (hex) */
|
|
23
|
+
chatbotBubbleColor?: string;
|
|
24
|
+
/** User bubble color (hex) */
|
|
25
|
+
userBubbleColor?: string;
|
|
26
|
+
/** Initial messages (e.g. from API) */
|
|
27
|
+
initialMessages?: ChatMessage[];
|
|
28
|
+
/** Callback when user sends a message */
|
|
29
|
+
onSendMessage?: (content: string) => void;
|
|
30
|
+
/** Optional class name for the root container */
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export type { ChatMessage as C, PeppermintChatbotProps as P };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
interface ChatMessage {
|
|
2
|
+
id: string;
|
|
3
|
+
role: "user" | "assistant";
|
|
4
|
+
content: string;
|
|
5
|
+
timestamp?: string;
|
|
6
|
+
}
|
|
7
|
+
interface PeppermintChatbotProps {
|
|
8
|
+
/** Layout: "widget" (bubble) or "page" (full card) */
|
|
9
|
+
layout?: "widget" | "page";
|
|
10
|
+
/** Chatbot display name */
|
|
11
|
+
chatbotName?: string;
|
|
12
|
+
/** Greeting message shown when chat is empty */
|
|
13
|
+
greetingMessage?: string;
|
|
14
|
+
/** Optional chatbot avatar URL */
|
|
15
|
+
chatbotProfileImage?: string;
|
|
16
|
+
/** Optional user avatar URL */
|
|
17
|
+
userProfileImage?: string;
|
|
18
|
+
/** Background color (hex) */
|
|
19
|
+
backgroundColor?: string;
|
|
20
|
+
/** Font color (hex) */
|
|
21
|
+
fontColor?: string;
|
|
22
|
+
/** Chatbot bubble color (hex) */
|
|
23
|
+
chatbotBubbleColor?: string;
|
|
24
|
+
/** User bubble color (hex) */
|
|
25
|
+
userBubbleColor?: string;
|
|
26
|
+
/** Initial messages (e.g. from API) */
|
|
27
|
+
initialMessages?: ChatMessage[];
|
|
28
|
+
/** Callback when user sends a message */
|
|
29
|
+
onSendMessage?: (content: string) => void;
|
|
30
|
+
/** Optional class name for the root container */
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export type { ChatMessage as C, PeppermintChatbotProps as P };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { P as PeppermintChatbotProps } from '../types-BfQUN3Hf.mjs';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Mount the chatbot into a container (vanilla JS, Vue, Svelte).
|
|
5
|
+
* Requires react and react-dom to be available (e.g. via script or bundler).
|
|
6
|
+
*/
|
|
7
|
+
declare function createChatbot(container: HTMLElement, props?: PeppermintChatbotProps): {
|
|
8
|
+
unmount: () => void;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { PeppermintChatbotProps, createChatbot };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { P as PeppermintChatbotProps } from '../types-BfQUN3Hf.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Mount the chatbot into a container (vanilla JS, Vue, Svelte).
|
|
5
|
+
* Requires react and react-dom to be available (e.g. via script or bundler).
|
|
6
|
+
*/
|
|
7
|
+
declare function createChatbot(container: HTMLElement, props?: PeppermintChatbotProps): {
|
|
8
|
+
unmount: () => void;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { PeppermintChatbotProps, createChatbot };
|