Skip to content

Commit 820365d

Browse files
bacaljbacalj
committed
feat: manage open and closed state
1 parent fb33302 commit 820365d

File tree

13 files changed

+633
-132
lines changed

13 files changed

+633
-132
lines changed

‎README.md‎

Lines changed: 2 additions & 2 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+
initiallyOpen={isOpen}
3434
onClose={() => setIsOpen(false)}
3535
welcome="Welcome to the ACCESS Q&A Bot!"
3636
prompt="How can I help you today?"
@@ -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+
| initiallyOpen / initially-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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
interface QABotProps {
22
isLoggedIn?: boolean;
3-
isOpen?: boolean;
3+
isAnonymous?: boolean;
4+
initiallyOpen?: boolean;
45
apiKey?: string;
56
embedded?: boolean;
67
welcome?: string;

‎index.html‎

Lines changed: 83 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

@@ -104,11 +139,41 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
104139
prompt: container.dataset.prompt || "Ask me a question...",
105140
isLoggedIn: !window.isAnonymous,
106141
isAnonymous: window.isAnonymous,
107-
isOpen: false
142+
defaultOpen: false
108143
});
109144
}
110145
});
111146
}
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+
}
112177
</script>
113178

114179
<!--
@@ -138,11 +203,26 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
138203
prompt: "Try asking a question about ACCESS...",
139204
isLoggedIn: !window.isAnonymous,
140205
isAnonymous: window.isAnonymous,
141-
isOpen: false
206+
defaultOpen: false
142207
});
143208
} else if (!window.qAndATool) {
144209
console.error("qAndATool function not found. Make sure the JS files are loaded properly.");
145210
}
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+
}
146226
});
147227
</script>
148228
</body>

0 commit comments

Comments
 (0)