Skip to content

Commit 21cf8f2

Browse files
bacaljbacalj
authored
Merge pull request #6 from necyberteam/1.0-docs-fixes
1.0 docs fixes
2 parents 0dfbd61 + def84aa commit 21cf8f2

22 files changed

+708
-195
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function MyApp() {
3030

3131
<QABot
3232
isLoggedIn={isLoggedIn}
33-
isOpen={isOpen}
33+
defaultOpen={isOpen}
3434
onClose={() => setIsOpen(false)}
3535
welcome="Welcome to the ACCESS Q&A Bot!"
3636
prompt="How can I help you today?"
@@ -52,7 +52,7 @@ function MyApp() {
5252
welcome="Welcome to the Q&A Bot!"
5353
prompt="Ask me anything about ACCESS..."
5454
is-logged-in
55-
is-open>
55+
default-open>
5656
</access-qa-bot>
5757
```
5858

@@ -89,7 +89,7 @@ function MyApp() {
8989
prompt: "Ask a question about ACCESS...",
9090
isLoggedIn: true,
9191
embedded: true,
92-
isOpen: true
92+
defaultOpen: true
9393
});
9494
}
9595
});
@@ -121,7 +121,7 @@ Replace `v0.2.0` with the specific version you want to use. This method provides
121121
| isLoggedIn / is-logged-in | boolean | Whether the user is logged in |
122122
| isAnonymous / is-anonymous | boolean | Whether the user is anonymous |
123123
| disabled | boolean | Disable the chat input |
124-
| isOpen / is-open | boolean | Whether the chat is open |
124+
| defaultOpen / default-open | boolean | Whether the chat is initially open |
125125
| apiKey / api-key | string | API key for authentication |
126126
| onClose | function | Callback when the chat is closed (React only) |
127127

‎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.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.d.ts‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,61 @@
11
interface QABotProps {
22
isLoggedIn?: boolean;
3-
isOpen?: boolean;
3+
isAnonymous?: boolean;
4+
defaultOpen?: boolean;
45
apiKey?: string;
56
embedded?: boolean;
67
welcome?: string;
78
prompt?: string;
89
disabled?: boolean;
10+
visible?: boolean;
911
onClose?: () => void;
1012
[key: string]: any; // Allow additional props
1113
}
1214

15+
// React component with ref
16+
interface QABotRef {
17+
toggle: () => boolean;
18+
open: () => void;
19+
close: () => void;
20+
isOpen: () => boolean;
21+
}
22+
1323
// React component
14-
export const QABot: (props: QABotProps) => JSX.Element;
24+
export const QABot: React.ForwardRefExoticComponent<
25+
QABotProps & React.RefAttributes<QABotRef>
26+
>;
1527

1628
// Web Component class (available in the standalone build)
1729
export class WebComponentQABot extends HTMLElement {
1830
static observedAttributes: string[];
1931
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
2032
connectedCallback(): void;
2133
disconnectedCallback(): void;
34+
toggle(): boolean;
35+
open(): void;
36+
close(): void;
37+
isOpen(): boolean;
2238
}
2339

2440
// Function for non-React integration
2541
interface QAndAToolConfig extends QABotProps {
2642
target: HTMLElement;
43+
returnRef?: boolean;
44+
}
45+
46+
// Return type when returnRef is true
47+
interface QABotControlMethods {
48+
toggle: () => boolean;
49+
open: () => void;
50+
close: () => void;
51+
isOpen: () => boolean;
2752
}
2853

2954
// Main function for programmatic usage (works with React or Web Component)
30-
export function qAndATool(config: QAndAToolConfig): () => void;
55+
export function qAndATool(config: QAndAToolConfig): (() => void) | QABotControlMethods;
3156

3257
// Web Component specific function (exposed in the standalone bundle)
33-
export function webComponentQAndATool(config: QAndAToolConfig): () => void;
58+
export function webComponentQAndATool(config: QAndAToolConfig): (() => void) | QABotControlMethods;
3459

3560
// Default export (React component)
3661
export default QABot;

‎index.html‎

Lines changed: 84 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,27 @@
2727
border-left: 4px solid #6c757d;
2828
margin-bottom: 20px;
2929
}
30+
.control-buttons {
31+
margin: 20px 0;
32+
}
33+
.control-buttons button {
34+
margin-right: 10px;
35+
padding: 8px 16px;
36+
background-color: #1a5b6e;
37+
color: white;
38+
border: none;
39+
border-radius: 4px;
40+
cursor: pointer;
41+
}
42+
.control-buttons button:hover {
43+
background-color: #107180;
44+
}
45+
#programmatic-embedded-bot {
46+
height: 500px;
47+
margin-top: 20px;
48+
border: 1px solid #ddd;
49+
border-radius: 5px;
50+
}
3051
</style>
3152
</head>
3253
<body class="user-logged-in">
@@ -75,6 +96,18 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
7596
<div id="custom-qa-bot"></div>
7697
</div>
7798

99+
<div class="demo-section">
100+
<h2>Method 4: Programmatically Control Embedded Bot</h2>
101+
<p>Control the embedded bot programmatically using the exposed ref methods:</p>
102+
<div class="control-buttons">
103+
<button onclick="openBot()">Open Bot</button>
104+
<button onclick="closeBot()">Close Bot</button>
105+
<button onclick="toggleBot()">Toggle Bot</button>
106+
<button onclick="checkBotState()">Check State</button>
107+
</div>
108+
<div id="programmatic-embedded-bot"></div>
109+
</div>
110+
78111
<script>
79112
// Determine if user is logged in by checking for a class on the body
80113
function isAnonymous() {
@@ -86,11 +119,13 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
86119
function initializeQABot() {
87120
// Method 1: Auto-detect div#qa-bot
88121
const qaBot = document.getElementById('qa-bot');
122+
console.log("| initializeQABot qaBot:", qaBot);
89123
if (qaBot && window.qAndATool && !qaBot.hasChildNodes()) {
90124
window.qAndATool({
91125
target: qaBot,
92126
isLoggedIn: !window.isAnonymous,
93-
isAnonymous: window.isAnonymous
127+
isAnonymous: window.isAnonymous,
128+
defaultOpen: true
94129
});
95130
}
96131

@@ -103,11 +138,42 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
103138
welcome: container.dataset.welcome || "Hello!",
104139
prompt: container.dataset.prompt || "Ask me a question...",
105140
isLoggedIn: !window.isAnonymous,
106-
isAnonymous: window.isAnonymous
141+
isAnonymous: window.isAnonymous,
142+
defaultOpen: false
107143
});
108144
}
109145
});
110146
}
147+
148+
// Store reference to programmatic bot
149+
let programmaticBotRef = null;
150+
151+
// Functions to control the bot programmatically
152+
function openBot() {
153+
if (programmaticBotRef && programmaticBotRef.open) {
154+
programmaticBotRef.open();
155+
}
156+
}
157+
158+
function closeBot() {
159+
if (programmaticBotRef && programmaticBotRef.close) {
160+
programmaticBotRef.close();
161+
}
162+
}
163+
164+
function toggleBot() {
165+
if (programmaticBotRef && programmaticBotRef.toggle) {
166+
const isOpen = programmaticBotRef.toggle();
167+
console.log('Bot is now', isOpen ? 'open' : 'closed');
168+
}
169+
}
170+
171+
function checkBotState() {
172+
if (programmaticBotRef && programmaticBotRef.isOpen) {
173+
const isOpen = programmaticBotRef.isOpen();
174+
alert(`Bot is currently ${isOpen ? 'open' : 'closed'}`);
175+
}
176+
}
111177
</script>
112178

113179
<!--
@@ -137,11 +203,26 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
137203
prompt: "Try asking a question about ACCESS...",
138204
isLoggedIn: !window.isAnonymous,
139205
isAnonymous: window.isAnonymous,
140-
isOpen: true
206+
defaultOpen: true
141207
});
142208
} else if (!window.qAndATool) {
143209
console.error("qAndATool function not found. Make sure the JS files are loaded properly.");
144210
}
211+
212+
// Method 4 (programmatic control)
213+
const programmaticBot = document.getElementById('programmatic-embedded-bot');
214+
if (window.qAndATool && programmaticBot && !programmaticBot.hasChildNodes()) {
215+
programmaticBotRef = window.qAndATool({
216+
target: programmaticBot,
217+
embedded: true,
218+
welcome: "I can be controlled programmatically!",
219+
prompt: "Ask me a question about ACCESS...",
220+
isLoggedIn: !window.isAnonymous,
221+
isAnonymous: window.isAnonymous,
222+
defaultOpen: false,
223+
returnRef: true // Important: this makes qAndATool return the ref
224+
});
225+
}
145226
});
146227
</script>
147228
</body>

‎package-lock.json‎

Lines changed: 6 additions & 6 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.3.1",
3+
"version": "1.0.0-beta.1",
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": "^2.0.0-beta.32"
24+
"react-chatbotify": "^2.0.0-beta.35"
2525
},
2626
"peerDependencies": {
2727
"preact": "^10.0.0",

‎src/App.css‎

Lines changed: 8 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,9 @@
1-
.rcb-toggle-button.rcb-button-show {
2-
background-size: 72%;
3-
background-position: center;
4-
background-repeat: no-repeat;
5-
background-color: rgb(26, 91, 110);
6-
}
7-
.rcb-chat-window {
8-
width: 550px !important;
9-
max-width: calc(100%);
1+
/**
2+
* ACCESS QA Bot Styles
3+
*
4+
* This file now imports modular CSS files from the styles directory
5+
* while maintaining backward compatibility with existing builds.
6+
*/
107

11-
.rcb-bot-avatar {
12-
background-size: contain;
13-
border-radius: 0;
14-
background-position: center;
15-
background-repeat: no-repeat;
16-
}
17-
.rcb-chat-header {
18-
display: flex;
19-
flex-direction: row;
20-
align-items: center;
21-
font-weight: 700;
22-
}
23-
a {
24-
font-weight: 700;
25-
color: #000000;
26-
text-decoration: underline;
27-
}
28-
a:hover {
29-
color: #107180;
30-
}
31-
.rcb-bot-message a {
32-
text-decoration: none;
33-
color: #ffffff;
34-
}
35-
.rcb-bot-message a:hover {
36-
text-decoration: underline;
37-
}
38-
.rcb-chat-input-textarea {
39-
overflow-y: auto;
40-
}
41-
.rcb-chat-footer-container {
42-
font-size: 10px;
43-
}
44-
}
45-
.embedded-qa-bot {
46-
.rcb-chat-window {
47-
width: 100% !important;
48-
max-width: 100%;
49-
}
50-
}
8+
/* Import modular styles */
9+
@import './styles/index.css';

0 commit comments

Comments
 (0)