@mypatientspace/chatbot-widget 1.0.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.
Files changed (7) hide show
  1. package/README.md +199 -0
  2. package/dist/bot-avatar.png +0 -0
  3. package/dist/mps-logo.png +0 -0
  4. package/dist/mypatientspace-widget.es.js +12663 -0
  5. package/dist/mypatientspace-widget.umd.js +371 -0
  6. package/dist/vite.svg +1 -0
  7. package/package.json +58 -0
package/README.md ADDED
@@ -0,0 +1,199 @@
1
+ # MPS Chatbot Widget
2
+
3
+ A standalone chatbot widget that third-party websites can embed via a single `<script>` tag.
4
+
5
+ ## Features
6
+
7
+ - Self-contained React application bundled into a single JS file
8
+ - Easy integration with any website
9
+ - Customizable theming
10
+ - Style isolation (won't conflict with host site CSS)
11
+ - Native mobile support via WebView
12
+
13
+ ## Tech Stack
14
+
15
+ - React 18+ with TypeScript
16
+ - Vite (library mode build)
17
+ - Emotion (CSS-in-JS for style isolation)
18
+ - lucide-react (icons)
19
+
20
+ ## Development
21
+
22
+ ```bash
23
+ # Install dependencies
24
+ yarn install
25
+
26
+ # Start dev server
27
+ yarn dev
28
+
29
+ # Build for production
30
+ yarn build
31
+
32
+ # Preview production build
33
+ yarn preview
34
+ ```
35
+
36
+ ## Web Integration
37
+
38
+ ### Minimal Setup (uses all defaults)
39
+ ```html
40
+ <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
41
+ <script>
42
+ ChatbotWidget.init({
43
+ apiEndpoint: 'https://your-api.com/chat'
44
+ });
45
+ </script>
46
+ ```
47
+
48
+ ### Full Customization
49
+ ```html
50
+ <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
51
+ <script>
52
+ ChatbotWidget.init({
53
+ apiEndpoint: 'https://your-api.com/chat',
54
+ apiKey: 'your-api-key',
55
+ headerTitle: 'Health Support',
56
+ greeting: 'Hi! How can I help?',
57
+ brandingText: 'Powered by MyCompany',
58
+ brandingLogo: '/logo.png',
59
+ fabIcon: '/avatar.png',
60
+ placeholder: 'Ask me anything...',
61
+ position: 'bottom-left',
62
+ quickActions: [
63
+ { id: '1', label: 'Help', icon: 'info', message: 'I need help' }
64
+ ],
65
+ theme: {
66
+ colors: { primary: '#ff6600' }
67
+ }
68
+ });
69
+ </script>
70
+ ```
71
+
72
+ ### API Methods
73
+ ```javascript
74
+ ChatbotWidget.open(); // Open chat window
75
+ ChatbotWidget.close(); // Close chat window
76
+ ChatbotWidget.toggle(); // Toggle open/close
77
+ ChatbotWidget.destroy(); // Remove widget completely
78
+ ```
79
+
80
+ ## Mobile Integration
81
+
82
+ ### Android (Kotlin)
83
+ ```kotlin
84
+ class ChatActivity : AppCompatActivity() {
85
+ private lateinit var webView: WebView
86
+
87
+ override fun onCreate(savedInstanceState: Bundle?) {
88
+ super.onCreate(savedInstanceState)
89
+
90
+ webView = WebView(this).apply {
91
+ settings.javaScriptEnabled = true
92
+ settings.domStorageEnabled = true
93
+ loadDataWithBaseURL(
94
+ "https://your-domain.com",
95
+ """
96
+ <!DOCTYPE html>
97
+ <html>
98
+ <head>
99
+ <meta name="viewport" content="width=device-width, initial-scale=1">
100
+ </head>
101
+ <body style="margin:0;padding:0;">
102
+ <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
103
+ <script>
104
+ ChatbotWidget.init({
105
+ apiEndpoint: 'https://your-api.com/chat'
106
+ });
107
+ ChatbotWidget.open();
108
+ </script>
109
+ </body>
110
+ </html>
111
+ """.trimIndent(),
112
+ "text/html", "UTF-8", null
113
+ )
114
+ }
115
+ setContentView(webView)
116
+ }
117
+ }
118
+ ```
119
+
120
+ ### iOS (Swift)
121
+ ```swift
122
+ import WebKit
123
+
124
+ class ChatViewController: UIViewController {
125
+ var webView: WKWebView!
126
+
127
+ override func viewDidLoad() {
128
+ super.viewDidLoad()
129
+
130
+ let config = WKWebViewConfiguration()
131
+ config.preferences.javaScriptEnabled = true
132
+
133
+ webView = WKWebView(frame: view.bounds, configuration: config)
134
+ view.addSubview(webView)
135
+
136
+ let html = """
137
+ <!DOCTYPE html>
138
+ <html>
139
+ <head>
140
+ <meta name="viewport" content="width=device-width, initial-scale=1">
141
+ </head>
142
+ <body style="margin:0;padding:0;">
143
+ <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
144
+ <script>
145
+ ChatbotWidget.init({
146
+ apiEndpoint: 'https://your-api.com/chat'
147
+ });
148
+ ChatbotWidget.open();
149
+ </script>
150
+ </body>
151
+ </html>
152
+ """
153
+
154
+ webView.loadHTMLString(html, baseURL: URL(string: "https://your-domain.com"))
155
+ }
156
+ }
157
+ ```
158
+
159
+ ### React Native
160
+ ```jsx
161
+ import { WebView } from 'react-native-webview';
162
+
163
+ const ChatScreen = () => (
164
+ <WebView
165
+ source={{ uri: 'https://your-domain.com/chat.html' }}
166
+ javaScriptEnabled={true}
167
+ domStorageEnabled={true}
168
+ />
169
+ );
170
+ ```
171
+
172
+ ### Alternative: Host a Chat Page
173
+
174
+ Create a dedicated HTML page on your server and load it in the WebView:
175
+
176
+ ```
177
+ https://your-domain.com/chat.html
178
+ ```
179
+
180
+ This is the simplest approach - update the widget once and all apps get the update automatically.
181
+
182
+ ## Default Configuration
183
+
184
+ When no value is provided, these defaults are used:
185
+
186
+ | Option | Default Value |
187
+ |--------|---------------|
188
+ | `headerTitle` | "AI Doctor" |
189
+ | `greeting` | "Hello! Welcome to our healthcare support. How can I assist you today?" |
190
+ | `placeholder` | "Type a message..." |
191
+ | `brandingText` | "Developed by myPatientSpace" |
192
+ | `brandingLogo` | https://web.mypatientspace.com/img/logo-symbol.png |
193
+ | `fabIcon` | https://web.mypatientspace.com/img/logo-symbol.png |
194
+ | `position` | "bottom-right" |
195
+ | `quickActions` | Book Appointment, Hours, Contact, Location |
196
+
197
+ ## License
198
+
199
+ MIT
package/dist/bot-avatar.png ADDED
Binary file
package/dist/mps-logo.png ADDED
Binary file