chatbot-interface-ifi 1.3.0 → 1.4.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 (6) hide show
  1. package/README.md +215 -2
  2. package/dist/chatbot-interface.es.js +5665 -2972
  3. package/dist/chatbot-interface.es.js.map +1 -1
  4. package/dist/chatbot-interface.umd.js +29 -29
  5. package/dist/chatbot-interface.umd.js.map +1 -1
  6. package/package.json +3 -1
package/README.md CHANGED
@@ -1,2 +1,215 @@
1
- Chatbot Interface IFI
2
- A React component library for building chatbot interfaces. This package provides a customizable and interactive chatbot interface for modern React applications.
1
+ # Chatbot Interface IFI
2
+
3
+ **Description:** A chatbot interface React component built to be integrated into NexLAB
4
+
5
+ **Version:** 1.3.0
6
+
7
+ **Installing:**
8
+ ```bash
9
+ npm install chatbot-interface-ifi
10
+ ```
11
+
12
+ ---
13
+
14
+ ## Basic Usage
15
+
16
+ ```jsx
17
+ import React, { useState, useRef } from 'react';
18
+ import { ChatbotInterface } from 'chatbot-interface-ifi';
19
+
20
+ const App = () => {
21
+ const [conversationId, setConversationId] = useState(null);
22
+ const chatbotRef = useRef(null);
23
+
24
+ // Called when a new conversation starts - provides the Conversation ID
25
+ const handleConversationStart = (newConversationId) => {
26
+ console.log("Conversation started with ID:", newConversationId);
27
+ setConversationId(newConversationId);
28
+ };
29
+
30
+ // Externally trigger endConversation on the chatbot
31
+ const handleEndConversation = () => {
32
+ if (chatbotRef.current) {
33
+ chatbotRef.current.endConversation();
34
+ }
35
+ };
36
+
37
+ return (
38
+ <div>
39
+ <ChatbotInterface
40
+ ref={chatbotRef}
41
+ chatbotId="your-chatbot-id-here"
42
+ onConversationStart={handleConversationStart}
43
+ enableGuidedQuestions={true}
44
+ />
45
+ <p>Current Conversation ID: {conversationId || "No conversation started yet."}</p>
46
+ <button onClick={handleEndConversation}>End Conversation</button>
47
+ </div>
48
+ );
49
+ };
50
+
51
+ export default App;
52
+ ```
53
+
54
+ ---
55
+
56
+ ## Props
57
+
58
+ | Prop | Type | Default | Description |
59
+ |------|------|---------|-------------|
60
+ | `chatbotId` | `string` | **required** | The unique ID of the chatbot from the dashboard |
61
+ | `onConversationStart` | `function` | `undefined` | Callback function that receives the conversation ID when a new conversation starts |
62
+ | `enableGuidedQuestions` | `boolean` | `false` | Enable AI-suggested follow-up questions after each response |
63
+ | `customToggleButton` | `ReactNode` | `null` | Custom React element to use as the chat toggle button |
64
+
65
+ ---
66
+
67
+ ## Custom Toggle Button
68
+
69
+ You can customize the chat toggle button by passing your own React element via the `customToggleButton` prop:
70
+
71
+ ```jsx
72
+ import React from 'react';
73
+ import { ChatbotInterface } from 'chatbot-interface-ifi';
74
+
75
+ const App = () => {
76
+ // Custom button with gradient and hover effects
77
+ const customButton = (
78
+ <div style={{
79
+ width: 64,
80
+ height: 64,
81
+ borderRadius: '50%',
82
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
83
+ display: 'flex',
84
+ alignItems: 'center',
85
+ justifyContent: 'center',
86
+ boxShadow: '0 6px 20px rgba(102, 126, 234, 0.5)',
87
+ transition: 'transform 0.2s ease',
88
+ }}>
89
+ <span style={{ fontSize: 28, color: 'white' }}>💬</span>
90
+ </div>
91
+ );
92
+
93
+ return (
94
+ <ChatbotInterface
95
+ chatbotId="your-chatbot-id-here"
96
+ customToggleButton={customButton}
97
+ />
98
+ );
99
+ };
100
+
101
+ export default App;
102
+ ```
103
+
104
+ ### Using an Image as Toggle Button
105
+
106
+ ```jsx
107
+ const customButton = (
108
+ <img
109
+ src="/your-custom-icon.png"
110
+ alt="Chat"
111
+ style={{
112
+ width: 60,
113
+ height: 60,
114
+ borderRadius: '50%',
115
+ boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
116
+ }}
117
+ />
118
+ );
119
+
120
+ <ChatbotInterface
121
+ chatbotId="your-chatbot-id-here"
122
+ customToggleButton={customButton}
123
+ />
124
+ ```
125
+
126
+ ---
127
+
128
+ ## Features
129
+
130
+ - **Guided Questions**: AI-suggested follow-up questions (toggle on/off)
131
+ - **Summary**: View a summary of the conversation
132
+ - **New Chat**: Clear conversation and start fresh
133
+ - **Fullscreen Mode**: Expand the chat to a larger modal view
134
+ - **Custom Toggle Button**: Design your own chat open button
135
+ - **Responsive Design**: Works on mobile, tablet, and desktop
136
+
137
+ ---
138
+
139
+ ## Script Tag Embed (No React Required)
140
+
141
+ For static sites without React, you can embed the chatbot with a simple script tag:
142
+
143
+ ```html
144
+ <!DOCTYPE html>
145
+ <html>
146
+ <head>
147
+ <title>My Website</title>
148
+ <meta charset="UTF-8" />
149
+ </head>
150
+ <body>
151
+ <h1>Welcome to my website</h1>
152
+
153
+ <script
154
+ src="https://chatbot-embedding-ifi.onrender.com/chatbot-embed.js"
155
+ data-chatbot-id="your-chatbot-id-here"
156
+ ></script>
157
+ </body>
158
+ </html>
159
+ ```
160
+
161
+ **Important:** Make sure to include `<meta charset="UTF-8" />` in the head tag.
162
+
163
+ ### Optional `data-*` Attributes
164
+
165
+ - `data-mode="chat|teach|dual"`: Defaults to `dual`
166
+ - `data-enable-guided-questions="true|false"`: Chat mode only, defaults to `true`
167
+ - `data-container-id="your-container-id"`: Mounts into an existing element instead of appending a new one to `body`
168
+ - `data-initial-session-id="teach_xxx"`: Teach mode restore target
169
+ - `data-session-ids="teach_a,teach_b"`: Teach mode session picker list
170
+ - `data-show-restart-button="true|false"`: Teach mode header control, defaults to `true`
171
+
172
+ ### Teach Mode Example
173
+
174
+ ```html
175
+ <div id="pat-teach-root"></div>
176
+ <script
177
+ src="https://chatbot-embedding-ifi.onrender.com/chatbot-embed.js"
178
+ data-mode="teach"
179
+ data-chatbot-id="your-teach-chatbot-id"
180
+ data-container-id="pat-teach-root"
181
+ data-session-ids="teach_123,teach_456"
182
+ data-initial-session-id="teach_123"
183
+ ></script>
184
+ ```
185
+
186
+ ### Dual Mode Example (Toggle Chat <-> Learn)
187
+
188
+ ```html
189
+ <script
190
+ src="https://chatbot-embedding-ifi.onrender.com/chatbot-embed.js"
191
+ data-mode="dual"
192
+ data-chatbot-id="your-chatbot-id"
193
+ ></script>
194
+ ```
195
+
196
+ ### Build and Deploy Script Artifact
197
+
198
+ ```bash
199
+ npm run build:embed
200
+ ```
201
+
202
+ This outputs `dist-embed/chatbot-embed.js`. Deploy that file to your static host (Render static site, CDN, S3, etc.), then use its public URL in the `src` attribute.
203
+
204
+ ---
205
+
206
+ ## Links
207
+
208
+ - **Chatbot Dashboard:** https://chatbot-dashboard-ifi.onrender.com
209
+ - **NPM Package:** https://www.npmjs.com/package/chatbot-interface-ifi
210
+
211
+ ---
212
+
213
+ ## License
214
+
215
+ MIT