From 7f83b3886bbdd0fc42132d20f604e89521a1b367 Mon Sep 17 00:00:00 2001
From: Natasha Boyse <natasha.boyse@digital.trade.gov.uk>
Date: Mon, 17 Feb 2025 15:12:53 +0000
Subject: [PATCH] more wip

---
 django_app/frontend/src/js/react/Body.jsx     | 114 +++++++++++-------
 django_app/frontend/src/js/react/TopNav.jsx   |  11 +-
 .../redbox_core/views/misc_views.py           |  10 +-
 django_app/redbox_app/settings.py             |   6 +-
 django_app/redbox_app/templates/base.html     |  45 +++----
 django_app/redbox_app/templates/homepage.html |   2 +-
 .../templates/macros/iai-top-nav.html         |   6 +-
 7 files changed, 114 insertions(+), 80 deletions(-)

diff --git a/django_app/frontend/src/js/react/Body.jsx b/django_app/frontend/src/js/react/Body.jsx
index a73734e8..c00dffe8 100644
--- a/django_app/frontend/src/js/react/Body.jsx
+++ b/django_app/frontend/src/js/react/Body.jsx
@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import React from "react";
 import ReactDOM from "react-dom/client";
-import { 
+import {
   IcClassificationBanner,
   IcNavigationButton,
   IcSectionContainer,
@@ -8,85 +8,111 @@ import {
   SlottedSVG,
   IcHero,
   IcButton,
-  IcDivider
+  IcDivider,
+  IcAccordion,
+  IcTypography,
 } from '@ukic/react';
 
+import { mdiAccount } from '@mdi/js';
+
 import { IcCardHorizontal } from '@ukic/canary-react';
 
-import { mdiAccount } from '@mdi/js';
-  
 import "@ukic/fonts/dist/fonts.css";
 import "@ukic/react/dist/core/core.css";
 import "@ukic/react/dist/core/normalize.css";
 
-const Body = () => {
+const Homepage = ({ security, isAuthenticated }) => {
   return (
     <>
       <IcClassificationBanner />
-      <IcTopNavigation
-        appTitle="Redbox"
-        status="beta"
-        version=""
-      >
+
+      <IcTopNavigation appTitle="Redbox" status="beta" version="">
         <IcNavigationButton label="Profile" slot="buttons">
           <SlottedSVG
             slot="icon"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             width="24"
-            height="24" 
+            height="24"
             path={mdiAccount}
           />
         </IcNavigationButton>
       </IcTopNavigation>
 
       <IcHero
-        heading="Get AI-powered insights from your Official documents"
-        subheading="Ask questions, create summaries, or chat with AI about single or multiple documents to support your work."
+        heading={`Use Artificial Intelligence (AI) to interact with ${security} level documents from your own document set`}
+        subheading={`You may summarise documents, ask questions related to one or more documents, and chat directly with the AI to assist you in your work. You can use up to, and including, ${security} documents.`}
       >
-        <IcButton variant="primary" slot="interaction">
-          Sign in
-        </IcButton>
+        {!isAuthenticated && (
+          <IcButton variant="primary" slot="interaction">
+            Sign in
+          </IcButton>
+        )}
       </IcHero>
 
       <br />
-      <IcSectionContainer
-        style={{ display: 'flex' }}
-        gap="large"
-        aligned="center"
-      >
+
+      <IcSectionContainer gap="large" aligned="center">
         <IcCardHorizontal
           heading="Upload"
-          message="Upload all common document types to your Redbox - it's that simple"
-          style={{ margin: '10px' }}
+          message="Easily upload a wide range of document formats into your personal Redbox."
         />
         <IcCardHorizontal
           heading="Chat"
-          message="Ask questions about your documents and uncover insights through Redbox's AI. Get instant summaries of individual documents or combine multiple documents to discover connections across your content."
-          style={{ margin: '10px' }}
+          message="You can communicate with your Redbox and ask questions of the documents contained within. Use Redbox to unlock deeper insights in the various documents you have uploaded, pulling together summaries of individual or combined documents."
         />
         <IcCardHorizontal
           heading="Secure"
-          message="Redbox is built in our secure and private cloud, which enables you to upload documents up to and including Official classification in your Redbox."
-          style={{ margin: '10px' }}
-        />
-        <IcCardHorizontal
-          heading="new card"
-          message="Redbox is built in our secure and private cloud, which enables you to upload documents up to and including Official classification in your Redbox."
-          style={{ margin: '10px' }}
+          message={`Redbox is built in our secure and private cloud which enables you to upload, up to, and including, ${security} documents in your Redbox.`}
         />
       </IcSectionContainer>
 
+      <IcDivider slot="primary-navigation"></IcDivider>
+
       <IcSectionContainer>
-        <div className="govuk-grid-row">
-          <div className="govuk-grid-column-two-thirds" style={{ borderBottom: "1px solid black" }}>
-            <h1 className="govuk-heading-m govuk-!-margin-top-5 govuk-!-padding-top-5">Frequently Asked Questions</h1>
-          </div>
-          <IcDivider slot="primary-navigation"></IcDivider>
-        </div>
-        <div className="govuk-accordion" data-module="govuk-accordion" id="faq">
-          {/* Accordion content here */}
-        </div>
+        <h1>Frequently Asked Questions</h1>
+        <p>Responses to these FAQs about Redbox were generated using Redbox.</p>
+        <IcAccordion heading="What is Redbox?">
+            <IcTypography variant="body">
+              Redbox is a new kind of tool for civil servants which uses Large Language Models (LLMs) to process text-based information.
+              Redbox is currently only available to a small number of DBT staff as the department assesses its usefulness.
+              What makes Redbox particularly useful is that it can look at any documents you upload and work with you on them.
+            </IcTypography>
+            </IcAccordion>
+          {/* <IcAccordionItem title="What is Generative AI?">
+            <p>
+              Generative AI is a fairly new kind of algorithmic machine learning based on 'neural architecture'. This architecture allows
+              machine learning models (called large language models in this case) to be trained on large amounts of information, and then
+              be able to converse with a user by 'generating' answers to questions or assisting with text-based processing tasks.
+            </p>
+          </IcAccordionItem>
+          <IcAccordionItem title="Do I need technical skills to use Redbox?">
+            <p>
+              Not at all, the interface for Redbox comprises a document upload feature and a chat feature. No technical skills are required,
+              but an understanding of what large language models are and what they can do makes an enormous difference to users when interacting
+              with them. The principal skill to use Redbox well comes down to a skill called 'prompt engineering', which is just natural language
+              you type in and get the tool to respond. There are some great Gov.uk short courses on generative AI you may consider taking:
+              <a href="https://cddo.blog.gov.uk/2024/01/19/artificial-intelligence-introducing-our-series-of-online-courses-on-generative-ai/" className="govuk-link">See the courses here</a>.
+            </p>
+          </IcAccordionItem>
+          <IcAccordionItem title="What can I and can’t I share with Redbox?">
+            <p>
+              For the moment, you can share text and documents up to the {security} classification level. Take care to check before sharing
+              text or documents with Redbox that they do not exceed this designation. 
+              Alongside this, do not share Personal Data with Redbox. For more information on what constitutes personal data, watch this short
+              <a href="https://dbis.sharepoint.com/sites/DataProtectionOSS/SitePages/Your-guide-to-understanding-personal-data.aspx" className="govuk-link">video</a>. 
+              If you are unsure whether you are processing personal data, you should contact the <a href="https://workspace.trade.gov.uk/teams/data-protection-and-gdpr/" className="govuk-link">Data Protection Team</a>
+               to check.
+            </p>
+          </IcAccordionItem>
+          <IcAccordionItem title="What is a ‘hallucination’?">
+            <p>
+              In the context of LLMs, a hallucination refers to the generation of information that is incorrect, nonsensical, or entirely fabricated, despite
+              being presented in a credible manner. This can happen when the model produces details, facts, or asserts that are not grounded in reality or the
+              data it was trained on, potentially leading to misinformation or misunderstanding.
+            </p>
+          </IcAccordionItem>
+        </IcAccordion> */}
       </IcSectionContainer>
     </>
   );
@@ -95,5 +121,5 @@ const Body = () => {
 const rootElement = document.getElementById("root");
 if (rootElement) {
     const root = ReactDOM.createRoot(rootElement);
-    root.render(<Body />);
-}
\ No newline at end of file
+    root.render(<Homepage security="Your security level here" isAuthenticated={false} />);
+}
diff --git a/django_app/frontend/src/js/react/TopNav.jsx b/django_app/frontend/src/js/react/TopNav.jsx
index 45ff9ff9..2d343966 100644
--- a/django_app/frontend/src/js/react/TopNav.jsx
+++ b/django_app/frontend/src/js/react/TopNav.jsx
@@ -56,15 +56,14 @@ const TopNav = ({ product_name, menu_items, user_items, phase, home_path = "/" }
                     >
                       <a 
                         className="iai-top-nav__link" 
-                        href={menu_item.href} 
-                        aria-current={menu_item.active ? "page" : undefined}
+                        href={menu_item.href}
                       >
                         {menu_item.text}
                       </a>
                     </li>
                   ))}
                 </ul>
-                {user_items && (
+                {user_items ? (
                   <div className="iai-top-nav__user">
                     <button className="iai-top-nav__link iai-top-nav__link--user" aria-expanded="false">
                       {user_items.initials}
@@ -84,7 +83,7 @@ const TopNav = ({ product_name, menu_items, user_items, phase, home_path = "/" }
                       ))}
                     </ul>
                   </div>
-                )}
+                ) : null}
                 <li className="iai-top-nav__link-item">
                   <a className="iai-top-nav__link" href="https://teams.microsoft.com/l/channel/19%3A9ae6b3b539724595a3139c2b16dc56ef%40thread.tacv2/Redbox%20trial%20participants%20Chat%20Channel?groupId=7a71ce78-fe77-4185-825c-ae40cb07d614&tenantId=8fa217ec-33aa-46fb-ad96-dfe68006bb86">
                     Teams Chat
@@ -103,7 +102,7 @@ const topNavElement = document.getElementById("topNav");
 if (topNavElement) {
   const productName = topNavElement.getAttribute("data-product_name");
   const menuItems = JSON.parse(topNavElement.getAttribute("data-menu_items"));
-  const userItems = JSON.parse(topNavElement.getAttribute("data-user_items"));
+  const userItems = topNavElement.getAttribute("data-user_items") ? JSON.parse(topNavElement.getAttribute("data-user_items")) : null;
   const phase = topNavElement.getAttribute("data-phase");
   const homePath = topNavElement.getAttribute("data-home_path");
 
@@ -118,4 +117,4 @@ if (topNavElement) {
       home_path={homePath}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/django_app/redbox_app/redbox_core/views/misc_views.py b/django_app/redbox_app/redbox_core/views/misc_views.py
index c93c22bb..6edb4151 100644
--- a/django_app/redbox_app/redbox_core/views/misc_views.py
+++ b/django_app/redbox_app/redbox_core/views/misc_views.py
@@ -17,13 +17,19 @@ def homepage_view(request):
     if not request.user.is_authenticated and settings.LOGIN_METHOD == "sso":
         return redirect("authbroker_client:login")
     else:
+        csp_nonce = getattr(request, 'csp_nonce', None)  # Ensure csp_nonce is set
+        context = {
+            "request": request,
+            "allow_sign_ups": settings.ALLOW_SIGN_UPS,
+            "csp_nonce": csp_nonce,
+        }
+        print(context)  # Debugging statement
         return render(
             request,
             template_name="homepage.html",
-            context={"request": request, "allow_sign_ups": settings.ALLOW_SIGN_UPS},
+            context=context,
         )
 
-
 @require_http_methods(["GET"])
 def health(_request: HttpRequest) -> HttpResponse:
     """this required by ECS Fargate"""
diff --git a/django_app/redbox_app/settings.py b/django_app/redbox_app/settings.py
index 285605d1..584c7838 100644
--- a/django_app/redbox_app/settings.py
+++ b/django_app/redbox_app/settings.py
@@ -9,7 +9,6 @@
 import sentry_sdk
 from dbt_copilot_python.database import database_from_env
 from django.urls import reverse_lazy
-from django_log_formatter_asim import ASIMFormatter
 from dotenv import load_dotenv
 from import_export.formats.base_formats import CSV
 from sentry_sdk.integrations.django import DjangoIntegration
@@ -203,7 +202,7 @@
     "https://www.googletagmanager.com/",
     "ajax.googleapis.com/",
     "sha256-T/1K73p+yppfXXw/AfMZXDh5VRDNaoEh3enEGFmZp8M=",
-    "'unsafe-inline'"
+    "'unsafe-inline'",
 )
 CSP_OBJECT_SRC = ("'none'",)
 CSP_TRUSTED_TYPES = ("dompurify", "default", "goog#html")
@@ -215,6 +214,7 @@
     "https://googletagmanager.com",
     "https://tagmanager.google.com/",
     "https://fonts.googleapis.com",
+    "'unsafe-inline'"
 )
 
 CSP_IMG_SRC = (
@@ -224,7 +224,7 @@
     "https://www.gstatic.com",
     "https://*.google-analytics.com",
     "https://*.googletagmanager.com",
-    "'unsafe-inline'"
+    "'unsafe-inline'",
 )
 CSP_FRAME_ANCESTORS = ("'none'",)
 
diff --git a/django_app/redbox_app/templates/base.html b/django_app/redbox_app/templates/base.html
index 00d31c50..545f1929 100644
--- a/django_app/redbox_app/templates/base.html
+++ b/django_app/redbox_app/templates/base.html
@@ -1,5 +1,5 @@
 {% from "macros/iai-top-nav.html" import iaiTopNav %}
-{% set cspNonce=request.csp_nonce %}
+{% set cspNonce = request.csp_nonce|default('') %}
 
 <!DOCTYPE html>
 <html lang="en" class="govuk-template">
@@ -60,30 +60,31 @@
 
 
   {% if request.user.is_authenticated %}
-    {{ iaiTopNav(
-      product_name = "Redbox",
-      menu_items = [
-        {"text": "Documents", "href": url('documents')},
-        {"text": "Chats", "href": url('chats')}
-      ],
-      user_items = {
+  <div id="topNav" 
+       data-product_name="Redbox" 
+       data-menu_items='{{ [
+          {"text": "Documents", "href": url("documents")},
+          {"text": "Chats", "href": url("chats")}
+      ] | tojson | safe }}' 
+       data-user_items='{{ {
           "initials": request.user.get_initials(),
           "menu_items": [
-              {"text": "My details", "href": url('demographics')},
-              {"text": "Sign out", "href": url('signed-out')}
+              {"text": "My details", "href": url("demographics")},
+              {"text": "Sign out", "href": url("signed-out")}
           ]
-      },
-      phase = "Beta"
-    ) }}
-  {% else %}
-    {{ iaiTopNav(
-      product_name = "Redbox",
-      menu_items = [
-        {"text": "Sign in", "href": url('sign-in')}
-      ],
-      phase = "Beta"
-    ) }}
-  {% endif %}
+      } | tojson | safe }}' 
+       data-phase="Beta" 
+       data-home_path="/">
+  </div>
+{% else %}
+  <div id="topNav" 
+       data-product_name="Redbox" 
+       data-menu_items='{{ [{"text": "Sign in", "href": url("sign-in")}] | tojson | safe }}' 
+       data-phase="Beta" 
+       data-home_path="/">
+  </div>
+{% endif %}
+
 
 
   <main class="govuk-main-wrapper" id="main-content" role="main">
diff --git a/django_app/redbox_app/templates/homepage.html b/django_app/redbox_app/templates/homepage.html
index bb0c84f9..6b16db7d 100644
--- a/django_app/redbox_app/templates/homepage.html
+++ b/django_app/redbox_app/templates/homepage.html
@@ -1,7 +1,7 @@
 {% set pageTitle = "" %}
 {% extends "base.html" %}
 {% from "macros/govuk-button.html" import govukButton %}
-{% set cspNonce = request.csp_nonce %}
+{% set cspNonce = request.csp_nonce|default('') %}
 
 {% block content %}
 
diff --git a/django_app/redbox_app/templates/macros/iai-top-nav.html b/django_app/redbox_app/templates/macros/iai-top-nav.html
index 1e3af38e..fd89c2db 100644
--- a/django_app/redbox_app/templates/macros/iai-top-nav.html
+++ b/django_app/redbox_app/templates/macros/iai-top-nav.html
@@ -3,8 +3,10 @@
     id="topNav" 
     data-product_name="{{ product_name }}" 
     data-menu_items="{{ menu_items | tojson if menu_items is not none else '[]' }}" 
-    data-user_items="{{ user_items | tojson if user_items is not none else '{}' }}" 
-    data-phase="{{ phase }}" 
+    {% if user_items %}
+      data-user_items="{{ user_items | tojson if user_items is not none else '{}' }}" 
+    {% endif %}
+      data-phase="{{ phase }}" 
     data-home_path="{{ home_path }}"
   ></div>
   <script type="module" src="{{ static('js/react/TopNav.js') }}"></script>