@deepfrog/pangents-widget 2.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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Pangents
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,181 @@
1
+ # @deepfrog/pangents-widget
2
+
3
+ Pangents AI Chat Widget - An embeddable chatbot widget for web applications.
4
+
5
+ [![npm version](https://badge.fury.io/js/%40deepfrog%2Fpangents-widget.svg)](https://www.npmjs.com/package/@deepfrog/pangents-widget)
6
+ [![CI](https://github.com/deepfrog/pangents-widget/actions/workflows/ci.yml/badge.svg)](https://github.com/deepfrog/pangents-widget/actions/workflows/ci.yml)
7
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
8
+
9
+ ## Installation
10
+
11
+ ```bash
12
+ npm install @deepfrog/pangents-widget
13
+ # or
14
+ yarn add @deepfrog/pangents-widget
15
+ # or
16
+ pnpm add @deepfrog/pangents-widget
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ### React Component
22
+
23
+ ```tsx
24
+ import { Widget } from '@deepfrog/pangents-widget';
25
+
26
+ function App() {
27
+ return (
28
+ <Widget
29
+ pangentsApiKey="Ph75vjKOsJbDuPyxR8-wW0_GYYm7ytVF0XQid2GXEZQ"
30
+ tenantId="69386fa4a5248bcd50a4fdd2"
31
+ email="user@example.com" // Optional: pre-fill login email
32
+ theme={{
33
+ primaryColor: '#1e40af',
34
+ headerBg: '#1e40af',
35
+ headerText: '#ffffff',
36
+ headerTitle: 'UltraShip TMS',
37
+ headerLogo: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
38
+ bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
39
+ }}
40
+ position="bottom-right"
41
+ />
42
+ );
43
+ }
44
+ ```
45
+
46
+ ### Vanilla JavaScript (Script Tag)
47
+
48
+ ```html
49
+ <script type="module">
50
+ import Chatbot from 'https://unpkg.com/@deepfrog/pangents-widget/dist/widget.js';
51
+
52
+ Chatbot.init({
53
+ pangentsApiKey: '<api_key>',
54
+ tenantId: '<tenant_id>',
55
+ email: 'user@example.com', // Optional: pre-fill login email
56
+ theme: {
57
+ primaryColor: '#1e40af',
58
+ headerBg: '#1e40af',
59
+ headerText: '#ffffff',
60
+ headerTitle: 'UltraShip TMS',
61
+ headerLogo: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
62
+ bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
63
+ },
64
+ position: 'bottom-right',
65
+ });
66
+ </script>
67
+ ```
68
+
69
+ ### CDN Usage
70
+
71
+ ```html
72
+ <script type="module">
73
+ import Chatbot from 'https://cdn.jsdelivr.net/npm/@deepfrog/pangents-widget/dist/widget.js';
74
+
75
+ Chatbot.init({
76
+ pangentsApiKey: '<api_key>',
77
+ tenantId: '<tenant_id>',
78
+ email: 'user@example.com', // Optional: pre-fill login email
79
+ theme: {
80
+ primaryColor: '#1e40af',
81
+ headerBg: '#1e40af',
82
+ headerText: '#ffffff',
83
+ headerTitle: 'UltraShip TMS',
84
+ headerLogo: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
85
+ bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
86
+ },
87
+ position: 'bottom-right',
88
+ });
89
+ </script>
90
+ ```
91
+
92
+ ## Configuration Options
93
+
94
+ | Option | Type | Required | Description |
95
+ |--------|------|----------|-------------|
96
+ | `pangentsApiKey` | `string` | Yes | Your Pangents API key |
97
+ | `tenantId` | `string` | Yes | Your tenant ID |
98
+ | `email` | `string` | No | Optional email to pre-fill the login form |
99
+ | `theme` | `object` | No | Theme customization options |
100
+ | `position` | `string` | No | Widget position: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
101
+ | `zIndex` | `number` | No | CSS z-index for the widget (default: 9999) |
102
+
103
+ ### Theme Options
104
+
105
+ ```typescript
106
+ interface Theme {
107
+ primaryColor?: string; // Primary accent color
108
+ headerBg?: string; // Header background color
109
+ headerText?: string; // Header text color
110
+ headerTitle?: string; // Header title
111
+ headerLogo?: string; // Header logo
112
+ bubbleIcon?: string; // Bubble icon
113
+ userBubble?: string; // User message bubble color
114
+ botBubble?: string; // Bot message bubble color
115
+ fontFamily?: string; // Font family
116
+ }
117
+ ```
118
+
119
+ ## API Methods
120
+
121
+ ### `Chatbot.init(config)`
122
+
123
+ Initialize the widget with configuration.
124
+
125
+ ### `Chatbot.updateConfig(config)`
126
+
127
+ Update widget configuration dynamically.
128
+
129
+ ### `Chatbot.updateTheme(theme)`
130
+
131
+ Update only the theme configuration.
132
+
133
+ ### `Chatbot.destroy()`
134
+
135
+ Remove the widget from the page.
136
+
137
+ ## Development
138
+
139
+ ```bash
140
+ # Install dependencies
141
+ npm install
142
+
143
+ # Start development server
144
+ npm run dev
145
+
146
+ # Build library
147
+ npm run build:lib
148
+
149
+ # Build standalone widget
150
+ npm run build:widget
151
+
152
+ # Build both
153
+ npm run build
154
+
155
+ # Run tests
156
+ npm run test
157
+
158
+ # Run linting
159
+ npm run lint
160
+ ```
161
+
162
+ ## Publishing
163
+
164
+ The package is automatically published to npm when a new version tag is pushed:
165
+
166
+ ```bash
167
+ # Patch release (1.0.0 -> 1.0.1)
168
+ npm run release:patch
169
+
170
+ # Minor release (1.0.0 -> 1.1.0)
171
+ npm run release:minor
172
+
173
+ # Major release (1.0.0 -> 2.0.0)
174
+ npm run release:major
175
+ ```
176
+
177
+ Or manually trigger a release via GitHub Actions.
178
+
179
+ ## License
180
+
181
+ MIT
@@ -0,0 +1,4 @@
1
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="32" height="32" fill="#0A0B0D"/>
3
+ <path d="M26.6677 23.7149H8.38057V20.6496H5.33301V8.38159H26.6677V23.7149ZM8.38057 20.6496H23.6201V11.4482H8.38057V20.6496ZM16.0011 16.0021L13.8461 18.1705L11.6913 16.0021L13.8461 13.8337L16.0011 16.0021ZM22.0963 16.0008L19.9414 18.1691L17.7865 16.0008L19.9414 13.8324L22.0963 16.0008Z" fill="#32F08C"/>
4
+ </svg>
Binary file
@@ -0,0 +1,10 @@
1
+ <svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M23.5058 3.63059e-06C12.2974 -0.00618902 2.64601 7.91029 0.455364 18.9069C-1.73528 29.9035 4.14513 40.9165 14.4996 45.2094V23.0524L17.8315 18.762V46.3055C19.6877 46.767 21.5932 47.0002 23.5058 47C24.0838 47.0001 24.6543 46.9725 25.221 46.9307V14.4716L28.553 18.762V46.4539C30.5249 46.0214 32.4323 45.3345 34.2273 44.4105V8.89938L37.5593 13.1898V42.3372C45.6702 36.2805 48.9913 25.7075 45.8012 16.0983C42.6111 6.48908 33.6272 0.00428384 23.5059 0.00510346L23.5058 3.63059e-06Z" fill="url(#paint0_linear_192_413)"/>
3
+ <defs>
4
+ <linearGradient id="paint0_linear_192_413" x1="-18.3065" y1="-10.34" x2="-17.2725" y2="72.427" gradientUnits="userSpaceOnUse">
5
+ <stop stop-color="white"/>
6
+ <stop offset="0.6" stop-color="white" stop-opacity="0.968627"/>
7
+ <stop offset="1" stop-color="white" stop-opacity="0.101961"/>
8
+ </linearGradient>
9
+ </defs>
10
+ </svg>
@@ -0,0 +1,244 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Pangent Widget Demo</title>
7
+
8
+ <style>
9
+ :root {
10
+ --primary: #1e40af;
11
+ --secondary: #2563eb;
12
+ --bg-light: #f8fafc;
13
+ --bg-dark: #0f172a;
14
+ --text-dark: #0f172a;
15
+ --text-muted: #64748b;
16
+ --radius: 14px;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
24
+ sans-serif;
25
+ }
26
+
27
+ body {
28
+ background: var(--bg-light);
29
+ color: var(--text-dark);
30
+ line-height: 1.6;
31
+ }
32
+
33
+ /* ---------- HERO ---------- */
34
+ .hero {
35
+ min-height: 100vh;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ text-align: center;
40
+ padding: 2rem;
41
+ background: linear-gradient(135deg, #1e40af, #3b82f6);
42
+ color: #fff;
43
+ }
44
+
45
+ .hero-inner {
46
+ max-width: 720px;
47
+ }
48
+
49
+ .hero h1 {
50
+ font-size: 3rem;
51
+ font-weight: 800;
52
+ margin-bottom: 1rem;
53
+ }
54
+
55
+ .hero p {
56
+ font-size: 1.2rem;
57
+ opacity: 0.95;
58
+ margin-bottom: 2rem;
59
+ }
60
+
61
+ .hero-badge {
62
+ display: inline-block;
63
+ padding: 0.8rem 1.4rem;
64
+ background: rgba(255, 255, 255, 0.15);
65
+ border-radius: 999px;
66
+ font-weight: 500;
67
+ transition: transform 0.25s ease, background 0.25s ease;
68
+ }
69
+
70
+ .hero-badge:hover {
71
+ transform: scale(1.05);
72
+ background: rgba(255, 255, 255, 0.25);
73
+ cursor: pointer;
74
+ }
75
+
76
+ /* ---------- SECTION ---------- */
77
+ .section {
78
+ padding: 5rem 1.5rem;
79
+ }
80
+
81
+ .container {
82
+ max-width: 1100px;
83
+ margin: 0 auto;
84
+ }
85
+
86
+ .section-header {
87
+ text-align: center;
88
+ margin-bottom: 3rem;
89
+ }
90
+
91
+ .section-header h2 {
92
+ font-size: 2.2rem;
93
+ font-weight: 700;
94
+ margin-bottom: 0.8rem;
95
+ }
96
+
97
+ .section-header p {
98
+ color: var(--text-muted);
99
+ max-width: 600px;
100
+ margin: 0 auto;
101
+ }
102
+
103
+ /* ---------- INTEGRATION CARD ---------- */
104
+ .integration-card {
105
+ background: #fff;
106
+ border-radius: var(--radius);
107
+ padding: 2rem;
108
+ box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
109
+ max-width: 900px;
110
+ margin: 0 auto;
111
+ }
112
+
113
+ .steps {
114
+ margin-bottom: 1.5rem;
115
+ padding-left: 1.2rem;
116
+ }
117
+
118
+ .steps li {
119
+ margin-bottom: 0.6rem;
120
+ color: var(--text-dark);
121
+ }
122
+
123
+ .steps code {
124
+ background: #e0e7ff;
125
+ padding: 0.15rem 0.4rem;
126
+ border-radius: 6px;
127
+ font-size: 0.9rem;
128
+ }
129
+
130
+ /* ---------- CODE BLOCK ---------- */
131
+ pre {
132
+ background: var(--bg-dark);
133
+ color: #e5e7eb;
134
+ padding: 1.5rem;
135
+ border-radius: 12px;
136
+ overflow-x: auto;
137
+ font-size: 0.9rem;
138
+ }
139
+
140
+ pre code {
141
+ color: #c7d2fe;
142
+ }
143
+
144
+ /* ---------- FOOTER ---------- */
145
+ footer {
146
+ background: #020617;
147
+ color: #94a3b8;
148
+ text-align: center;
149
+ padding: 1.5rem;
150
+ font-size: 0.9rem;
151
+ }
152
+
153
+ /* ---------- RESPONSIVE ---------- */
154
+ @media (max-width: 768px) {
155
+ .hero h1 {
156
+ font-size: 2.2rem;
157
+ }
158
+
159
+ .hero p {
160
+ font-size: 1rem;
161
+ }
162
+ }
163
+ </style>
164
+ </head>
165
+
166
+ <body>
167
+ <!-- HERO -->
168
+ <header class="hero">
169
+ <div class="hero-inner">
170
+ <h1>Pangent Widget Demo</h1>
171
+ <p>
172
+ Experience the Pangent chatbot in action.
173
+ Click the chat bubble at the bottom-right corner to start.
174
+ </p>
175
+ <div class="hero-badge">
176
+ 🚀 Click the chat bubble for live demo
177
+ </div>
178
+ </div>
179
+ </header>
180
+
181
+ <!-- INTEGRATION -->
182
+ <section class="section">
183
+ <div class="container">
184
+ <div class="section-header">
185
+ <h2>Integration Steps</h2>
186
+ <p>
187
+ Add the Pangent chatbot to your website in less than a minute.
188
+ Just copy and paste the script below.
189
+ </p>
190
+ </div>
191
+
192
+ <div class="integration-card">
193
+ <ol class="steps">
194
+ <li>Paste the script just before the <code>&lt;/body&gt;</code> tag.</li>
195
+ <li>Replace the API key with your <strong>Pangent API Key</strong>.</li>
196
+ <li>Customize theme colors and widget position.</li>
197
+ </ol>
198
+
199
+ <pre><code>&lt;script type="module"&gt;
200
+ import Chatbot from "https://chat-widget-gamma-azure.vercel.app/widget.js";
201
+
202
+ Chatbot.init({
203
+ pangentsApiKey: "<api_key>",
204
+ tenantId: "<tenant_id>",
205
+ theme: {
206
+ primaryColor: "#1e40af",
207
+ headerBg: "#1e40af",
208
+ headerText: "#ffffff",
209
+ headerTitle: "UltraShip TMS",
210
+ headerLogo: "<logo_url>",
211
+ bubbleIcon: "<logo_url>",
212
+ },
213
+ position: "bottom-right",
214
+ });
215
+ &lt;/script&gt;</code></pre>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- FOOTER -->
221
+ <footer>
222
+ © 2025 Pangent Demo Site. All rights reserved.
223
+ </footer>
224
+
225
+ <!-- CHATBOT -->
226
+ <script type="module">
227
+ import Chatbot from "https://chat-widget-gamma-azure.vercel.app/widget.js";
228
+
229
+ Chatbot.init({
230
+ pangentsApiKey: "Ph75vjKOsJbDuPyxR8-wW0_GYYm7ytVF0XQid2GXEZQ",
231
+ tenantId: "69386fa4a5248bcd50a4fdd2",
232
+ theme: {
233
+ primaryColor: "#1e40af",
234
+ headerBg: "#1e40af",
235
+ headerText: "#ffffff",
236
+ headerTitle: "UltraShip TMS",
237
+ headerLogo: null,
238
+ bubbleIcon: "https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d",
239
+ },
240
+ position: "bottom-right",
241
+ });
242
+ </script>
243
+ </body>
244
+ </html>