Merged PR 2267: added ai guidance overlay

added ai guidance overlay

Related work items: #21744

components/AIPolicyNotice.js

@@ -0,0 +1,94 @@
+import useTranslation from "next-translate/useTranslation";
+import { parseCookies, setCookie } from "nookies";
+import { useEffect, useRef, useState } from "react";
+
+const COOKIE_NAME = "pedwAiPolicyNoticeHidden";
+const COOKIE_DAYS = 7;
+
+export default function AIPolicyNotice() {
+    let { t } = useTranslation();
+
+    const [hasCheckedCookie, setHasCheckedCookie] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const dismissButtonRef = useRef(null);
+
+    useEffect(() => {
+        const cookies = parseCookies();
+        const isHidden = cookies[COOKIE_NAME] === "true";
+
+        setIsOpen(!isHidden);
+        setHasCheckedCookie(true);
+    }, []);
+
+    useEffect(() => {
+        if (isOpen && dismissButtonRef.current) {
+            dismissButtonRef.current.focus();
+        }
+    }, [isOpen]);
+
+    const dismissNotice = () => {
+        const now = new Date();
+        const expDate = new Date(now);
+
+        expDate.setDate(now.getDate() + COOKIE_DAYS);
+
+        setCookie(null, COOKIE_NAME, "true", {
+            path: "/",
+            expires: expDate
+        });
+
+        setIsOpen(false);
+    };
+
+    if (!hasCheckedCookie || !isOpen) {
+        return null;
+    }
+
+    return (
+        <div
+            className="modal fade show"
+            style={{
+                display: "flex",
+                alignItems: "top",
+                justifyContent: "center",
+                padding: "1rem"
+            }}
+            aria-hidden={false}
+        >
+            <div className="modal-dialog" style={{ margin: 0 }}>
+                <div
+                    className="modal-content govuk-!-padding-6"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="ai-policy-notice-title"
+                >
+                    <h2
+                        id="ai-policy-notice-title"
+                        className="govuk-heading-m govuk-!-margin-bottom-3"
+                    >
+                        {t("home:ai-policy-notice-title")}
+                    </h2>
+                    <p className="govuk-body">
+                        {t("home:ai-policy-notice-paragraph-one")}
+                    </p>
+                    <p className="govuk-body govuk-!-margin-bottom-4">
+                        {t("home:ai-policy-notice-paragraph-two")}
+                    </p>
+                    <button
+                        ref={dismissButtonRef}
+                        type="button"
+                        className="govuk-button govuk-!-margin-bottom-0"
+                        data-module="govuk-button"
+                        onClick={dismissNotice}
+                    >
+                        {t("home:ai-policy-notice-dismiss-button")}
+                    </button>
+                </div>
+            </div>
+            <div
+                className="modal-backdrop fade show"
+                style={{ opacity: 0.2 }}
+            ></div>
+        </div>
+    );
+}

locales/cy/home.json

@@ -53,5 +53,9 @@
     "casescomment-card-paragraph-three": "Gallwch wneud sylwadau ar apeliadau a cheisiadau yn ystod y cyfnod cynrychioli neu gyflwyno datganiadau achos neu'r Holiadur LPA.",
     "casescomment-card-paragraph-four": "Cyfeiriwch at y dyddiadau cau ar gyfer cynrychioli achosion unigol ar gyfer datganiadau a sylwadau.",
     "signin-benefits-title": "Mewngofnodwch i'ch porth",
-    "signin-benefits-paragraph": "Drwy fewngofnodi gyda'r botwm Mewngofnodi, byddwch yn gallu:"
+    "signin-benefits-paragraph": "Drwy fewngofnodi gyda'r botwm Mewngofnodi, byddwch yn gallu:",
+    "ai-policy-notice-title": "Pwysig: canllawiau ar ddefnyddio cynnwys a gynhyrchir gan AI",
+    "ai-policy-notice-paragraph-one": "Deellir y gall partïon ddewis defnyddio Deallusrwydd Artiffisial Cynhyrchiol (AI) wrth gyflwyno apeliadau neu gynrychioliadau i PEDW. Er bod gan y rhai sy'n ymgysylltu â PEDW hawl i ddefnyddio AI i gynorthwyo eu cyflwyniadau, dylid nodi y gall cynnwys a gynhyrchir gan AI gynnwys honiadau ffug neu ddi-sail.",
+    "ai-policy-notice-paragraph-two": "Gan y bydd cyflwyniadau ysgrifenedig yn destun craffu yn y broses apelio, o bosibl o dan groesholiad mewn gwrandawiadau ac ymholiadau, ni ddylech wneud cyflwyniadau ysgrifenedig nad ydych yn eu deall neu'n gwybod eu bod yn gywir. Gall cyflwyno tystiolaeth anghywir arwain at gost ddiangen wrth wirio neu wrthbrofi tystiolaeth o'r fath a gallai arwain at ddyfarnu costau yn eich erbyn. Gweler ein Canllawiau ar gyfer defnyddio AI Cynhyrchiol am ragor o wybodaeth.",
+    "ai-policy-notice-dismiss-button": "Rwy'n deall"
 }

locales/en/home.json

@@ -53,5 +53,9 @@
     "casescomment-card-paragraph-three": "You can make comments on appeals and applications during the representation period or submit statements of case or the LPA Questionnaire.",
     "casescomment-card-paragraph-four": "Please refer to the individual case representation deadlines for statements and comments.",
     "signin-benefits-title": "Sign in to your portal",
-    "signin-benefits-paragraph": "By signing in with the Sign in button, you will be able to:"
+    "signin-benefits-paragraph": "By signing in with the Sign in button, you will be able to:",
+    "ai-policy-notice-title": "Important: guidance on use of AI-generated content",
+    "ai-policy-notice-paragraph-one": "It is understood that parties may choose to make use of Generative Artificial Intelligence (AI) when submitting appeals or representations to PEDW. While those engaging with PEDW are entitled to use AI to aid their submissions, it should be noted that content generated by an AI may include false or unsubstantiated claims.",
+    "ai-policy-notice-paragraph-two": "As written submissions will be subject to scrutiny in the appeals process, potentially under cross-examination at hearings and inquiries, you should not make written submissions that you do not understand or know to be accurate. The submission of inaccurate evidence may incur unnecessary expense verifying or rebutting such evidence and could lead to an award of costs against you. Please see our Guidance for the use of Generative AI for further information.",
+    "ai-policy-notice-dismiss-button": "I understand"
 }

pages/index.js

@@ -14,6 +14,7 @@ import Footer from "../components/footer";
 import Header from "../components/header";
 import Main from "../components/main";
 import ServiceBanner from "../components/servicebanner";
+import AIPolicyNotice from "../components/AIPolicyNotice";
 import { setContainerID } from "../store/accountDetails/action";
 import { setShowReps } from "../store/currentView/action";
 import { wrapper } from "../store/store";
@@ -137,6 +138,7 @@ const Home = (props) => {
                     ) : (
                         <>
                             <ServiceBanner />
+                            <AIPolicyNotice />
                             <Main
                                 pages={pages}
                                 showLogin={showLogin}

styles/sass/welshgov/_application.scss

@@ -2747,6 +2747,7 @@ fade {
     outline: 0;
     padding: 20px;
     align-items: flex-end;
+    margin-left: -40px
 }
 
 .modal-footer {