Skip to content

Commit 3b13bd9

Browse files
bacaljbacalj
authored
Merge pull request #4 from necyberteam/upgrade-to-react-chatbotify-v2-new
Upgrade to react chatbotify v2
2 parents 86c609f + a2b08c9 commit 3b13bd9

File tree

13 files changed

+113
-119
lines changed

13 files changed

+113
-119
lines changed

‎README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ Replace `v0.2.0` with the specific version you want to use. This method provides
119119
| prompt | string | Text shown in the input field |
120120
| embedded | boolean | Display in embedded mode |
121121
| isLoggedIn / is-logged-in | boolean | Whether the user is logged in |
122+
| isAnonymous / is-anonymous | boolean | Whether the user is anonymous |
122123
| disabled | boolean | Disable the chat input |
123124
| isOpen / is-open | boolean | Whether the chat is open |
124125
| apiKey / api-key | string | API key for authentication |
@@ -142,9 +143,9 @@ document.querySelector('access-qa-bot').addEventListener('qabot-close', () => {
142143

143144
- **build/index.html**: The minified production version of the public/index.html file after the build process has completed. This contains all the necessary script and link tags to load the compiled React application.
144145

145-
- **demo.html**: A standalone demo specifically showcasing the Web Component implementation (using the custom `<access-qa-bot>` element). This demonstrates three integration methods: standard floating button, embedded mode, and using the JavaScript API with the Web Component.
146+
- **web-component-demo.html**: A standalone demo specifically showcasing the Web Component implementation (using the custom `<access-qa-bot>` element). This demonstrates three integration methods: standard floating button, embedded mode, and using the JavaScript API with the Web Component.
146147

147-
The **index.html** file is focused on the React component usage, while **demo.html** focuses on the Web Component usage, providing complete examples for both integration approaches.
148+
The **index.html** file is focused on the React component usage, while **web-component-demo.html** focuses on the Web Component usage, providing complete examples for both integration approaches.
148149

149150
## Development and Testing
150151

@@ -157,7 +158,7 @@ npm start
157158
```
158159

159160
### Testing Standalone Demo Files
160-
To test the standalone demo files (`index.html` and `demo.html`) at the root level, you need to:
161+
To test the standalone demo files (`index.html` and `web-component-demo.html`) at the root level, you need to:
161162

162163
1. Stop the development server (if running)
163164
2. Build the project (`npm run build`)
@@ -170,7 +171,7 @@ npx serve
170171

171172
Then you can access:
172173
- The React demo at `/index.html` (or just `/`)
173-
- The Web Component demo at `/demo.html`
174+
- The Web Component demo at `/web-component-demo.html`
174175

175176
This allows testing both integration approaches (React components and Web Components) in their respective demo environments.
176177

‎build/static/css/main.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/static/css/main.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/static/js/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/static/js/main.js.LICENSE.txt‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,6 @@
88
* LICENSE file in the root directory of this source tree.
99
*/
1010

11-
/**
12-
* @license React
13-
* react-dom-server.browser.development.js
14-
*
15-
* Copyright (c) Facebook, Inc. and its affiliates.
16-
*
17-
* This source code is licensed under the MIT license found in the
18-
* LICENSE file in the root directory of this source tree.
19-
*/
20-
2111
/**
2212
* @license React
2313
* react-dom-server.browser.production.min.js

‎build/static/js/main.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>ACCESS Q&A Bot Standalone Demo</title>
77
<link rel="stylesheet" href="./build/static/css/main.css">
8-
<!-- Load scripts in head for earlier initialization -->
9-
<script>
10-
// Determine if user is logged in by checking for a class on the body
11-
document.addEventListener('DOMContentLoaded', function() {
12-
window.isAnonymous = !document.querySelector('body').classList.contains('user-logged-in');
13-
});
14-
</script>
15-
<!-- Preload JavaScript bundles -->
16-
<script src="./build/static/js/main.js"></script>
17-
<script src="./build/static/js/453.chunk.js"></script>
188
<style>
199
body {
2010
font-family: Arial, sans-serif;
@@ -48,20 +38,23 @@ <h1>ACCESS Q&A Bot Standalone Demo</h1>
4838
<div class="explanation">
4939
<p>This page demonstrates how to integrate the ACCESS Q&A Bot in different ways using the pre-built files.
5040
No React framework setup is needed - just include the CSS and JS files from the build directory, or from the CDN.</p>
51-
<p>You can use either the <strong>jsDelivr CDN</strong> (direct from GitHub repository) or <strong>unpkg CDN</strong> (from npm package):</p>
52-
<pre>
53-
<!-- jsDelivr CDN (direct from GitHub) -->
54-
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/necyberteam/[email protected]/build/static/css/main.css"&gt;
55-
&lt;div id="qa-bot"&gt;&lt;/div&gt;
56-
&lt;script src="https://cdn.jsdelivr.net/gh/necyberteam/[email protected]/build/static/js/main.js"&gt;&lt;/script&gt;
57-
&lt;script src="https://cdn.jsdelivr.net/gh/necyberteam/[email protected]/build/static/js/453.chunk.js"&gt;&lt;/script&gt;
41+
<p>You can use either the <strong>jsDelivr CDN</strong> OR the <strong>unpkg CDN</strong>:</p>
42+
</div>
43+
44+
<div class="html-code">
45+
<pre>
46+
<!-- jsDelivr CDN (direct from GitHub) -->
47+
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/necyberteam/[email protected]/build/static/css/main.css" /&gt;
48+
&lt;script src="https://cdn.jsdelivr.net/gh/necyberteam/[email protected]/build/static/js/main.js" /&gt;
49+
&lt;script src="https://cdn.jsdelivr.net/gh/necyberteam/[email protected]/build/static/js/453.chunk.js" /&gt;
5850

59-
<!-- OR unpkg CDN (from npm package) -->
60-
&lt;script src="https://unpkg.com/@snf/[email protected]/dist/access-qa-bot.standalone.js"&gt;&lt;/script&gt;
61-
&lt;access-qa-bot welcome="Hello!" prompt="Ask me anything..."&gt;&lt;/access-qa-bot&gt;
62-
</pre>
51+
OR
52+
<!-- OR unpkg CDN (from npm package) -->
53+
&lt;script src="https://unpkg.com/@snf/access-qa-bot@0.2.0/dist/access-qa-bot.standalone.js" /&gt;
54+
</pre>
6355
</div>
6456

57+
6558
<div class="demo-section">
6659
<h2>Method 1: Mount React Component to <code>div#qa-bot</code></h2>
6760
<p>The floating widget that appears in the bottom-right corner.</p>
@@ -83,62 +76,71 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
8376
</div>
8477

8578
<script>
86-
// Initialize all methods once DOM is fully loaded and scripts are available
87-
document.addEventListener('DOMContentLoaded', function() {
88-
// Ensure window.qAndATool is available before proceeding
89-
function initializeQABots() {
90-
if (window.qAndATool) {
91-
// Method 1: Initialize the root element if not already done
92-
const qaBot = document.getElementById('qa-bot');
93-
if (qaBot && !qaBot.hasChildNodes()) {
94-
console.log("Initializing Method 1 - Root QA Bot");
95-
window.qAndATool({
96-
target: qaBot,
97-
isLoggedIn: !window.isAnonymous,
98-
isAnonymous: window.isAnonymous
99-
});
100-
}
79+
// Determine if user is logged in by checking for a class on the body
80+
function isAnonymous() {
81+
return !document.querySelector('body').classList.contains('user-logged-in');
82+
}
83+
window.isAnonymous = isAnonymous();
10184

102-
// Method 2: Initialize embedded-qa-bot elements
103-
const embeddedBots = document.querySelectorAll('.embedded-qa-bot');
104-
embeddedBots.forEach(function(bot) {
105-
if (!bot.hasChildNodes()) {
106-
console.log("Initializing Method 2 - Embedded QA Bot");
107-
window.qAndATool({
108-
target: bot,
109-
embedded: true,
110-
isOpen: true,
111-
welcome: bot.getAttribute('data-welcome') || "Hello!",
112-
prompt: bot.getAttribute('data-prompt') || "Ask me a question...",
113-
isLoggedIn: !window.isAnonymous,
114-
isAnonymous: window.isAnonymous
115-
});
116-
}
117-
});
85+
// Function to initialize QABot instances for Method 1 and Method 2
86+
function initializeQABot() {
87+
// Method 1: Auto-detect div#qa-bot
88+
const qaBot = document.getElementById('qa-bot');
89+
if (qaBot && window.qAndATool && !qaBot.hasChildNodes()) {
90+
window.qAndATool({
91+
target: qaBot,
92+
isLoggedIn: !window.isAnonymous,
93+
isAnonymous: window.isAnonymous
94+
});
95+
}
11896

119-
// Method 3: Initialize the custom-qa-bot element
120-
console.log("Initializing Method 3 - Custom QA Bot");
97+
// Method 2: Auto-detect embedded-qa-bot divs
98+
document.querySelectorAll('.embedded-qa-bot').forEach(container => {
99+
if (window.qAndATool && !container.hasChildNodes()) {
121100
window.qAndATool({
122-
target: document.getElementById('custom-qa-bot'),
101+
target: container,
123102
embedded: true,
124-
welcome: "This is configured using JavaScript!",
125-
prompt: "Try asking a question about ACCESS...",
103+
welcome: container.dataset.welcome || "Hello!",
104+
prompt: container.dataset.prompt || "Ask me a question...",
126105
isLoggedIn: !window.isAnonymous,
127-
isAnonymous: window.isAnonymous,
128-
disabled: window.isAnonymous,
129-
isOpen: true
106+
isAnonymous: window.isAnonymous
130107
});
131-
} else {
132-
console.error("qAndATool function not found. Make sure the JS files are loaded properly.");
133108
}
134-
}
109+
});
110+
}
111+
</script>
112+
113+
<!--
114+
Load the main JavaScript bundle which includes:
115+
1. The React components that power the Q&A tool
116+
2. The globally exposed qAndATool function (from src/index.js)
117+
118+
Note: All three integration methods depend on window.qAndATool
119+
being exposed by the JavaScript bundle
120+
-->
121+
<script src="./build/static/js/main.js"></script>
122+
<script src="./build/static/js/453.chunk.js"></script>
123+
124+
<script>
125+
// Wait for window.qAndATool to be available
126+
window.addEventListener('load', function() {
127+
// Initialize Method 1 and Method 2
128+
initializeQABot();
135129

136-
// Try to initialize immediately
137-
if (window.qAndATool) {
138-
initializeQABots();
139-
} else {
140-
// Or wait a bit for scripts to load if needed
141-
setTimeout(initializeQABots, 500);
130+
// Method 3 (explicit JS function call)
131+
const customBot = document.getElementById('custom-qa-bot');
132+
if (window.qAndATool && customBot && !customBot.hasChildNodes()) {
133+
window.qAndATool({
134+
target: customBot,
135+
embedded: true,
136+
welcome: "This is configured using JavaScript!",
137+
prompt: "Try asking a question about ACCESS...",
138+
isLoggedIn: !window.isAnonymous,
139+
isAnonymous: window.isAnonymous,
140+
isOpen: true
141+
});
142+
} else if (!window.qAndATool) {
143+
console.error("qAndATool function not found. Make sure the JS files are loaded properly.");
142144
}
143145
});
144146
</script>

‎package-lock.json‎

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@snf/access-qa-bot",
3-
"version": "0.2.0",
3+
"version": "0.3.0",
44
"private": false,
55
"homepage": ".",
66
"description": "ACCESS Q&A Bot React Component and Web Component",
@@ -21,7 +21,7 @@
2121
"index.d.ts"
2222
],
2323
"dependencies": {
24-
"react-chatbotify": "^1.7.0"
24+
"react-chatbotify": "^2.0.0-beta.32"
2525
},
2626
"peerDependencies": {
2727
"preact": "^10.0.0",

‎publishing.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Before updating a version, always check existing tags to avoid conflicts:
2525
git tag -l "v*"
2626

2727
# Or check a specific version
28-
git tag -l "v0.2.0"
28+
git tag -l "v0.3.0"
2929
```
3030

3131
## Setup
@@ -71,13 +71,13 @@ Create a PR. Once approved, merge your feature branch to main, including the ver
7171

7272
### 3. Create Tag
7373

74-
After merging to main, create a tag matching your version and a make a GitHub release:
74+
After merging to main, create a tag matching your version, and make a GitHub release:
7575

7676
```bash
7777
git checkout main
7878
git pull
79-
git tag -a v0.2.0 -m "Release version 0.2.0" # Match your actual version
80-
git push origin v0.2.0
79+
git tag -a v0.3.0 -m "Release version 0.3.0" # Match your actual version
80+
git push upstream v0.3.0 # would typically be `origin` but my local dev environment uses a fork as `origin`
8181
```
8282
- Click on the "Releases" tab in the GitHub repository
8383
- Click "Draft a new release"
@@ -119,7 +119,7 @@ npm publish --access public
119119
Push the commit to the npm-release branch:
120120

121121
```bash
122-
git push origin npm-release
122+
git push upstream npm-release
123123
```
124124

125125
## Maintaining the Release Branch
@@ -130,7 +130,7 @@ The `npm-release` branch should be periodically synced with main:
130130
git checkout npm-release
131131
git merge main
132132
# Resolve any conflicts
133-
git push origin npm-release
133+
git push upstream npm-release
134134
```
135135

136136
## CDN Usage
@@ -142,17 +142,17 @@ Our project uses two CDN systems:
142142
This CDN pulls directly from our GitHub repository based on git tags:
143143

144144
```
145-
https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.2.0/build/static/js/main.js
145+
https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.3.0/build/static/js/main.js
146146
```
147147

148148
The version number in these URLs must match git tags in our repository. Never reuse a version number that already has a tag to avoid breaking existing CDN links.
149149

150150
A complete jsDelivr implementation typically requires three files:
151151
```html
152-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.2.0/build/static/css/main.css">
152+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.3.0/build/static/css/main.css">
153153
<div id="qa-bot"></div>
154-
<script src="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.2.0/build/static/js/main.js"></script>
155-
<script src="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.2.0/build/static/js/453.chunk.js"></script>
154+
<script src="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.3.0/build/static/js/main.js"></script>
155+
<script src="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.3.0/build/static/js/453.chunk.js"></script>
156156
```
157157

158158
**Important:** When updating the package:
@@ -165,7 +165,7 @@ A complete jsDelivr implementation typically requires three files:
165165
After publishing to npm, the package will also be available via unpkg:
166166

167167
```
168-
https://unpkg.com/@snf/access-qa-bot@0.2.0/dist/access-qa-bot.standalone.js
168+
https://unpkg.com/@snf/access-qa-bot@0.3.0/dist/access-qa-bot.standalone.js
169169
```
170170

171171
### 3. Using the Published Package

0 commit comments

Comments
 (0)