Skip to content

Commit 148cd38

Browse files
GarneaumaGarneauma
committed
Thematic AI answers: adding thematic
1 parent c98381d commit 148cd38

File tree

8 files changed

+283
-1
lines changed

8 files changed

+283
-1
lines changed

‎_data/méli-mélo.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"th-winterlude",
3030
"th-zev",
3131
"th-empathy",
32-
"th-choose-canada"
32+
"th-choose-canada",
33+
"th-ai-answers"
3334
]
3435
}
3536
],
@@ -104,6 +105,10 @@
104105
"nom": "2024-10-datatable-utilities",
105106
"mainpage": "index-en.html"
106107
},
108+
{
109+
"nom": "th-ai-answers",
110+
"mainpage": "index-en.html"
111+
},
107112
{
108113
"nom": "th-choose-canada",
109114
"mainpage": "index.html"

‎docs/méta-détails/th-ai-answers-en.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: th-ai-answers - Méli-mélo details
3+
componentName: th-ai-answers
4+
layout: thématique-en
5+
altLangPage: détails-fr.html
6+
lang: en
7+
breadcrumbs: [
8+
{ "title": "Thematic", "link": "thématique/gc-thématique-en.html" }
9+
]
10+
permalink: /méli-mélo/th-ai-answers/détails-en.html
11+
---

‎docs/méta-détails/th-ai-answers-fr.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: th-ai-answers - Détails du méli-mélo
3+
componentName: th-ai-answers
4+
layout: thématique-fr
5+
altLangPage: détails-en.html
6+
lang: fr
7+
breadcrumbs: [
8+
{ "title": "Thématique", "link": "thématique/gc-thématique-fr.html" }
9+
]
10+
permalink: /méli-mélo/th-ai-answers/détails-fr.html
11+
---

‎méli-mélo/th-ai-answers/ai-answers.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* @title WET-BOEW GC AI answers thematic
3+
* @overview AI answers thematic
4+
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
5+
* @author @garneauma
6+
*/
7+
8+
(function () {
9+
const trigger = document.querySelector(".ai-answers-trigger");
10+
if (!trigger) return; // exit if no trigger
11+
12+
const lang = document.documentElement.lang;
13+
const pageHeader = document.querySelector("header");
14+
const dateModifiedElm = document.querySelector("#wb-dtmd");
15+
const closed = sessionStorage.getItem("aiaClosed") === "true";
16+
const banners = {
17+
main: {
18+
fr: `
19+
<aside class="aia-banner">
20+
<h2 class="wb-inv">Bannière Réponses IA</h2>
21+
<div class="container">
22+
<div class="d-flex align-items-center">
23+
<img src="https://canada.ca/content/dam/canada/ai-stars.png" alt="">
24+
<p><strong>Besoin d'aide?</strong>
25+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Essayez une version bêta de Réponses IA”>
26+
Essayez une version bêta de Réponses IA</a></p>
27+
</div>
28+
</div>
29+
<button class="aia-close" type="button" aria-label="Essayez une version bêta de Réponses IA">×</button>
30+
</aside>`,
31+
en: `
32+
<aside class="aia-banner">
33+
<h2 class="wb-inv">AI answers banner</h2>
34+
<div class="container">
35+
<div class="d-flex align-items-center">
36+
<img src="https://canada.ca/content/dam/canada/ai-stars.png" alt="">
37+
<p><strong>Need help?</strong>
38+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
39+
Try a beta test of AI Answers</a></p>
40+
</div>
41+
</div>
42+
<button class="aia-close" type="button" aria-label="Close AI answers banner">×</button>
43+
</aside>`
44+
},
45+
rescue: {
46+
fr: `
47+
<section class="aia-rescue">
48+
<h3 class="wb-inv">Bannière Réponses IA</h3>
49+
<div class="d-flex align-items-center">
50+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
51+
<p><strong>Besoin d'aide?</strong>
52+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
53+
Essayez une version bêta de Réponses IA</a></p>
54+
</div>
55+
</section>`,
56+
en: `
57+
<section class="aia-rescue">
58+
<h3 class="wb-inv">AI answers banner</h3>
59+
<div class="d-flex align-items-center">
60+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
61+
<p><strong>Need help?</strong>
62+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
63+
Try a beta test of AI Answers</a></p>
64+
</div>
65+
</section>`
66+
}
67+
};
68+
69+
dateModifiedElm.insertAdjacentHTML("beforebegin", banners.rescue[lang]);
70+
71+
if (!closed) {
72+
pageHeader.insertAdjacentHTML("beforebegin", banners.main[lang]);
73+
74+
const closeBtn = document.querySelector(".aia-close");
75+
76+
closeBtn.addEventListener("click", () => {
77+
closeBtn.parentElement.remove();
78+
sessionStorage.setItem("aiaClosed", "true");
79+
});
80+
}
81+
82+
aiAnswersAvailabilityCheck();
83+
})();
84+
85+
// Check if chat service is available
86+
async function aiAnswersAvailabilityCheck() {
87+
const banners = document.querySelectorAll(".aia-banner, .aia-rescue");
88+
const hideBanner = () => banners.forEach(el => el.remove());
89+
const AVAILABILITY_ENDPOINT = "https://ai-answers.cdssandbox.xyz/api/chat/chat-session-availability";
90+
91+
try {
92+
const res = await fetch(AVAILABILITY_ENDPOINT);
93+
94+
if (!res?.ok) {
95+
hideBanner();
96+
return;
97+
}
98+
99+
const data = await res.json();
100+
101+
// If the required flags are absent or false → hide the banner
102+
if (!data?.siteStatus || !data?.sessionAvailable) {
103+
hideBanner();
104+
}
105+
} catch {
106+
// Any error (network, parse, CORS)
107+
hideBanner();
108+
}
109+
}

‎méli-mélo/th-ai-answers/index-en.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: AI answers thematic
3+
dateModified: "2025-11-27"
4+
description: AI answers thematic documentation and working example
5+
lang: en
6+
altLangPage: index-fr.html
7+
css:
8+
- style.css
9+
script:
10+
- ai-answers.js
11+
---
12+
13+
<p>This page serves as an example of for AI answers beta testing top banner.</p>
14+
15+
<div class="ai-answers-trigger"></div>
16+
17+
<h2>Instructions</h2>
18+
<p>Insert the following code snippet in your page to activate the AI Answers banner.</p>
19+
<pre><code>&lt;div class="ai-answers-trigger">&lt;/div></code></pre>

‎méli-mélo/th-ai-answers/index-fr.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Thématique Réponses IA
3+
dateModified: "2025-11-27"
4+
description: Documentation et exemple pratique de Réponses IA
5+
lang: fr
6+
altLangPage: index-en.html
7+
css:
8+
- style.css
9+
script:
10+
- ai-answers.js
11+
---
12+
13+
<p>Cette page sert d'exemple pour la bannière supérieure du test bêta de Réponses IA.</p>
14+
15+
<div class="ai-answers-trigger"></div>
16+
17+
<h2>Instructions</h2>
18+
<p>Insérez le bout de code suivant dans votre page pour activer la bannière Réponses IA.</p>
19+
<pre><code>&lt;div class="ai-answers-trigger">&lt;/div></code></pre>

‎méli-mélo/th-ai-answers/meta.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
feature: thématique
3+
lang: en
4+
title: AI Answers theme
5+
description: Top banner for AI answers beta testing
6+
componentName: th-ai-answers
7+
expiry: February 28th, 2026
8+
mainPage: index-en.html
9+
cssClass:
10+
- aia-banner
11+
- aia-rescue
12+
- aia-close
13+
jsFunctions:
14+
- aiAnswersAvailabilityCheck
15+
a11yStatement: >
16+
These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using WebAIM online contrast checker, I certify that the colours used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. Furthermore, the meaningful sequence is respected, meeting WCAG 2.1 AA Success Criterion 1.3.2. I did my due diligence and, to the best of my knowledge and understanding, all elements of this thematic are meeting WCAG 2.1 AA standards.
17+
Tested by Marc-André Garneau, marcandre.garneau@servicecanada.gc.ca. 2025-12-01.
18+
pages:
19+
examples:
20+
- title: AI answers thematic
21+
language: en
22+
path: index-en.html
23+
- title: Thématique réponses IA
24+
language: fr
25+
path: index-fr.html
26+
sponsor: Marc-André Garneau, Principal Publisher on behalf of Digital Transformation Office (DTO)
27+
28+
changes:
29+
- date: 2025-12-01
30+
description: This thematic provides a top banner to invite users to the beta testing of AI Answers. The banner includes a close button to dismiss the banner. The thematic also includes a rescue link at the bottom of the page for users who missed the banner or dismissed it by mistake. The intent of this thematic is to inform users about the AI Answers beta testing and to provide them with a way to access the beta testing page. It is meant to be temporary and used on around 100 pages (EN and FR) during the testing period.
31+
departmentImpact: This thematic will allow the Digital Transformation Office (DTO) to promote the AI Answers beta testing to users on selected pages across Canada.ca. It will help gather feedback and improve the service before its official launch.
32+
publicImpact: This thematic will inform users about the AI Answers beta testing and provide them with a way to access the beta testing page. It will enhance user awareness and participation in the testing process.
33+
34+
output: false
35+
---

‎méli-mélo/th-ai-answers/style.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* AI answers components styles */
2+
.aia-banner {
3+
background: #1a2838;
4+
color: #fff;
5+
position: sticky;
6+
top: 0;
7+
z-index: 2;
8+
}
9+
10+
.aia-banner p {
11+
font-size: 1.125rem;
12+
margin: 0;
13+
padding: .875rem 2rem .875rem .75rem;
14+
}
15+
16+
.aia-banner p a {
17+
color: #fff;
18+
}
19+
20+
.aia-banner p a:hover, .aia-banner p a:focus {
21+
color: #b3ffff;
22+
}
23+
24+
.aia-banner .aia-close {
25+
background: none;
26+
border: none;
27+
border-radius: 50%;
28+
color: white;
29+
cursor: pointer;
30+
font-family: Arial, sans-serif;
31+
font-size: 2rem;
32+
font-weight: normal;
33+
height: 45px;
34+
line-height: 1;
35+
padding: 0;
36+
position: absolute;
37+
right: 2px;
38+
top: 50%;
39+
transform: translateY(-50%);
40+
transition: background-color 0.2s ease;
41+
width: 45px;
42+
}
43+
44+
.aia-banner .aia-close:hover {
45+
background-color: rgb(255, 255, 255, 0.1);
46+
}
47+
48+
.aia-banner .aia-close:focus {
49+
background-color: rgb(255, 255, 255, 0.1);
50+
box-shadow: 0 0 0 2px white;
51+
outline: none;
52+
}
53+
54+
/* Rescue link */
55+
.aia-rescue {
56+
margin-top: 1rem;
57+
}
58+
59+
.aia-rescue p {
60+
margin: 0;
61+
padding: .5rem 0 .5rem .75rem;
62+
}
63+
64+
@media screen and (max-width: 767px) {
65+
.aia-banner p {
66+
font-size: 1rem;
67+
padding-left: .5rem;
68+
}
69+
70+
.aia-banner p a {
71+
display: block;
72+
}
73+
}

0 commit comments

Comments
 (0)