@walkspan/chatbot 0.2.4 → 0.2.6
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 +89 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @walkspan/chatbot
|
|
2
|
+
|
|
3
|
+
A floating chatbot component for React applications with Tailwind CSS styling.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @walkspan/chatbot
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
or with yarn:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @walkspan/chatbot
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
or with pnpm:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
pnpm add @walkspan/chatbot
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Peer Dependencies
|
|
24
|
+
|
|
25
|
+
This package requires the following peer dependencies:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install react react-dom react-icons tailwindcss
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
| Package | Version |
|
|
32
|
+
|---------|---------|
|
|
33
|
+
| react | >= 17 |
|
|
34
|
+
| react-dom | >= 17 |
|
|
35
|
+
| react-icons | >= 4 |
|
|
36
|
+
| tailwindcss | >= 3 |
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
```jsx
|
|
41
|
+
import FloatingChatbot from '@walkspan/chatbot';
|
|
42
|
+
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<div>
|
|
46
|
+
<FloatingChatbot
|
|
47
|
+
apiUrl="https://your-api-endpoint.com/chat"
|
|
48
|
+
position="bottom-right"
|
|
49
|
+
title="AI Assistant"
|
|
50
|
+
placeholder="Ask something..."
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export default App;
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Props
|
|
60
|
+
|
|
61
|
+
| Prop | Type | Default | Description |
|
|
62
|
+
|------|------|---------|-------------|
|
|
63
|
+
| `apiUrl` | `string` | **required** | The API endpoint URL for the chatbot backend |
|
|
64
|
+
| `position` | `"bottom-right"` \| `"bottom-left"` | `"bottom-right"` | Position of the floating chatbot button |
|
|
65
|
+
| `title` | `string` | `"AI Assistant"` | Title displayed in the chat window header |
|
|
66
|
+
| `placeholder` | `string` | `"Ask something..."` | Placeholder text for the input field |
|
|
67
|
+
|
|
68
|
+
## API Response Format
|
|
69
|
+
|
|
70
|
+
Your API endpoint should accept POST requests with the following body:
|
|
71
|
+
|
|
72
|
+
```json
|
|
73
|
+
{
|
|
74
|
+
"text": "user message"
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
And return a response in this format:
|
|
79
|
+
|
|
80
|
+
```json
|
|
81
|
+
{
|
|
82
|
+
"message": "Bot response message",
|
|
83
|
+
"link": "https://optional-link.com"
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
MIT
|
package/dist/index.js
CHANGED
|
@@ -116,7 +116,7 @@ var FloatingChatbot = ({
|
|
|
116
116
|
"div",
|
|
117
117
|
{
|
|
118
118
|
key: m.id,
|
|
119
|
-
className: `max-w-[80%] py-2 px-5 rounded-3xl text-sm
|
|
119
|
+
className: `max-w-[80%] py-2 px-5 rounded-3xl text-sm break-all${m.type === "user" ? "ml-auto bg-[#edf0f6] text-black" : "bg-[#f1592a] text-white"}`
|
|
120
120
|
},
|
|
121
121
|
m == null ? void 0 : m.message,
|
|
122
122
|
m.type !== "user" && m.link && /* @__PURE__ */ import_react.default.createElement(
|
package/dist/index.mjs
CHANGED
|
@@ -80,7 +80,7 @@ var FloatingChatbot = ({
|
|
|
80
80
|
"div",
|
|
81
81
|
{
|
|
82
82
|
key: m.id,
|
|
83
|
-
className: `max-w-[80%] py-2 px-5 rounded-3xl text-sm
|
|
83
|
+
className: `max-w-[80%] py-2 px-5 rounded-3xl text-sm break-all${m.type === "user" ? "ml-auto bg-[#edf0f6] text-black" : "bg-[#f1592a] text-white"}`
|
|
84
84
|
},
|
|
85
85
|
m == null ? void 0 : m.message,
|
|
86
86
|
m.type !== "user" && m.link && /* @__PURE__ */ React.createElement(
|