more wip

uktrade · Feb 17, 2025 · 7f83b38 · 7f83b38
1 parent 80d4c5c
commit 7f83b38
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 80 deletions.
diff --git a/django_app/frontend/src/js/react/Body.jsx b/django_app/frontend/src/js/react/Body.jsx
@@ -1,92 +1,118 @@
-import React, { FC } from 'react';
+import React from "react";
 import ReactDOM from "react-dom/client";
-import { 
+import {
   IcClassificationBanner,
   IcNavigationButton,
   IcSectionContainer,
   IcTopNavigation,
   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 />);
-}
+    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
@@ -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}
     />
   );
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>