uktrade · nboyse · Feb 6, 2025 · Feb 17, 2025
diff --git a/django_app/frontend/package.json b/django_app/frontend/package.json
@@ -9,7 +9,9 @@
     "src/js/document-upload.js",
     "src/js/documents.js",
     "src/js/main.js",
-    "src/js/posthog.js"
+    "src/js/posthog.js",
+    "src/js/react/Body.jsx",
+    "src/js/react/TopNav.jsx"
   ],
   "staticFiles": [
     {
@@ -42,17 +44,23 @@
     }
   ],
   "scripts": {
-    "build": "npx parcel build --no-cache",
+    "build": "npx parcel build --no-cache --no-source-maps",
     "watch": "npx parcel watch",
     "test": "cd tests-web-components && npx playwright test"
   },
   "author": "",
   "dependencies": {
+    "@mdi/js": "^7.4.47",
     "@parcel/config-default": "^2.13.1",
     "@parcel/transformer-typescript-tsc": "^2.13.1",
+    "@ukic/canary-react": "^2.0.0-canary.33",
+    "@ukic/fonts": "^2.6.5",
+    "@ukic/react": "^2.34.0",
+    "@ukic/web-components": "^2.34.0",
     "govuk-frontend": "^5.2.0",
     "i.ai-design-system": "^0.4.8",
-    "posthog-js": "^1.143.0"
+    "posthog-js": "^1.143.0",
+    "react": "^18.3.1"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.12.0",
@@ -64,6 +72,7 @@
     "parcel-reporter-static-files-copy": "^1.5.3",
     "postcss": "^8.4.39",
     "postcss-url": "^10.1.3",
+    "process": "^0.11.10",
     "url": "^0.11.3"
   }
 }
diff --git a/django_app/frontend/src/js/main.js b/django_app/frontend/src/js/main.js
@@ -16,3 +16,5 @@ import "../../node_modules/i.ai-design-system/dist/iai-design-system.js";
     });
   });
 })();
+
+console.log("hello!")
diff --git a/django_app/frontend/src/js/react/App.jsx b/django_app/frontend/src/js/react/App.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Body from "./Body"; // Your main component
+import Chat from "./Chat"; // New component for /chat route
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Body />} />
+        <Route path="/chat" element={<Chat />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;
diff --git a/django_app/frontend/src/js/react/Body.jsx b/django_app/frontend/src/js/react/Body.jsx
@@ -0,0 +1,125 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import {
+  IcClassificationBanner,
+  IcNavigationButton,
+  IcSectionContainer,
+  IcTopNavigation,
+  SlottedSVG,
+  IcHero,
+  IcButton,
+  IcDivider,
+  IcAccordion,
+  IcTypography,
+} from '@ukic/react';
+
+import { mdiAccount } from '@mdi/js';
+
+import { IcCardHorizontal } from '@ukic/canary-react';
+
+import "@ukic/fonts/dist/fonts.css";
+import "@ukic/react/dist/core/core.css";
+import "@ukic/react/dist/core/normalize.css";
+
+const Homepage = ({ security, isAuthenticated }) => {
+  return (
+    <>
+      <IcClassificationBanner />
+
+      <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"
+            path={mdiAccount}
+          />
+        </IcNavigationButton>
+      </IcTopNavigation>
+
+      <IcHero
+        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.`}
+      >
+        {!isAuthenticated && (
+          <IcButton variant="primary" slot="interaction">
+            Sign in
+          </IcButton>
+        )}
+      </IcHero>
+
+      <br />
+
+      <IcSectionContainer gap="large" aligned="center">
+        <IcCardHorizontal
+          heading="Upload"
+          message="Easily upload a wide range of document formats into your personal Redbox."
+        />
+        <IcCardHorizontal
+          heading="Chat"
+          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, up to, and including, ${security} documents in your Redbox.`}
+        />
+      </IcSectionContainer>
+
+      <IcDivider slot="primary-navigation"></IcDivider>
+
+      <IcSectionContainer>
+        <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>
+    </>
+  );
+};
+
+const rootElement = document.getElementById("root");
+if (rootElement) {
+    const root = ReactDOM.createRoot(rootElement);
+    root.render(<Homepage security="Your security level here" isAuthenticated={false} />);
+}
diff --git a/django_app/frontend/src/js/react/Chat.js b/django_app/frontend/src/js/react/Chat.js
@@ -0,0 +1,156 @@
+// import React, { FC } from 'react';
+// import { 
+//   IcClassificationBanner,
+//   IcFooter,
+//   IcFooterLink,
+//   IcNavigationButton,
+//   IcNavigationItem,
+//   IcSideNavigation,
+//   IcDivider,
+//   IcTopNavigation,
+//   IcTypography,
+//   SlottedSVG,
+//   IcPageHeader,
+//   IcCheckbox,
+//   IcSectionContainer,
+//   IcAlert,
+//   IcButton,
+//   IcTextField
+// } from '@ukic/react';
+
+// import type { IcAlignment } from '@ukic/web-components';
+
+// import { mdiAccount, mdiChat, mdiFileDocument, mdiPencil } from '@mdi/js';
+
+// import "@ukic/fonts/dist/fonts.css";
+// import "@ukic/react/dist/core/core.css";
+// import "@ukic/react/dist/core/normalize.css";
+
+
+// const Chat = () => {
+//   return (
+//     <>
+//     <body>
+//       <IcClassificationBanner />
+//       <IcTopNavigation
+//         appTitle="Redbox"
+//         status="beta"
+//         version=""
+//       >
+//         <IcNavigationButton label="Document" slot="buttons">
+//           <SlottedSVG
+//             slot="icon"
+//             xmlns="http://www.w3.org/2000/svg"
+//             viewBox="0 0 24 24"
+//             width="24"
+//             height="24" 
+//             path={mdiFileDocument}
+//           />
+//         </IcNavigationButton>
+//         <IcNavigationButton label="Chat" slot="buttons">
+//           <SlottedSVG
+//             slot="icon"
+//             xmlns="http://www.w3.org/2000/svg"
+//             viewBox="0 0 24 24"
+//             width="24"
+//             height="24" 
+//             path={mdiChat}
+//           />
+//         </IcNavigationButton>
+//         <IcNavigationButton label="Profile" slot="buttons">
+//           <SlottedSVG
+//             slot="icon"
+//             xmlns="http://www.w3.org/2000/svg"
+//             viewBox="0 0 24 24"
+//             width="24"
+//             height="24" 
+//             path={mdiAccount}
+//           />
+//         </IcNavigationButton>
+//       </IcTopNavigation>
+//       <IcSectionContainer style={{paddingLeft: "400px",}}>
+//       <IcTypography variant="h2" style={{ paddingTop: "100px"}} aligned="center">How can Redbox help you today?</IcTypography>
+//       <IcTypography variant="p" style={{paddingTop: "20px"}} aligned="center">Select an option or type any question below.</IcTypography>
+//       <br></br>
+//       <IcAlert
+//   variant="warning"
+//   message="Redbox can make mistakes. You must check for accuracy before using the output"
+// />
+// <br></br>
+// <IcAlert
+//   variant="warning"
+//   message="You can use up to, and including, official sensitive documents."
+// />
+//     <IcButton variant="secondary" style={{paddingTop: "50px", paddingRight: "20px"}}>Draft a meeting agenda</IcButton>
+//     <IcButton variant="secondary" style={{paddingTop: "50px", paddingRight: "20px"}}>Set my work objectives</IcButton>
+//     <IcButton variant="secondary" style={{paddingTop: "50px",}}>Describe the role of a Parlimentary Secretary</IcButton>
+//     <div style={{display: "flex"}}>
+//     <IcTextField 
+//   placeholder="Please enter…" 
+//   helperText="Need help? View Advanced Prompt FAQ."
+//   onIcChange={(ev) => console.log(ev.detail.value)}
+//   style={{ paddingTop: "100px", width: "350px"}}
+//   rows="6"
+//   resize="true"
+// />
+// <IcButton variant="primary"   style={{ paddingTop: "128px"}}>Send</IcButton>
+// </div>
+// </IcSectionContainer>
+//       <IcSideNavigation appTitle="Redbox" status="Beta" expanded='true'>
+//     <IcPageHeader heading="Redbox"></IcPageHeader>
+//     <IcNavigationItem slot="primary-navigation" href="#" label="New chat">
+//   </IcNavigationItem>
+//   <IcDivider slot="primary-navigation"></IcDivider>
+//   <IcNavigationItem slot="primary-navigation" href="#" label="Recent chats">
+//   </IcNavigationItem>
+
+//   <IcDivider slot="primary-navigation"></IcDivider>
+//   <IcNavigationItem slot="primary-navigation" href="#" label="Today">
+//   </IcNavigationItem>
+//   <IcNavigationItem slot="primary-navigation" href="#" label="New chat">
+//   <SlottedSVG
+//             slot="icon"
+//             xmlns="http://www.w3.org/2000/svg"
+//             viewBox="0 0 24 24"
+//             width="24"
+//             height="24" 
+//             path={mdiPencil}
+//             alignment="right"
+//           />
+//   </IcNavigationItem>
+//   <IcDivider slot="primary-navigation"></IcDivider>
+//   <IcNavigationItem slot="primary-navigation" href="#" label="Previous 30 days">
+//   </IcNavigationItem>
+//   <IcNavigationItem slot="primary-navigation" href="#" label="Report analysis">
+//   <SlottedSVG
+//             slot="icon"
+//             xmlns="http://www.w3.org/2000/svg"
+//             viewBox="0 0 24 24"
+//             width="24"
+//             height="24" 
+//             path={mdiPencil}
+//             alignment="right"
+//           />
+//   </IcNavigationItem>
+//   <IcNavigationItem slot="primary-navigation" href="#" label="Export opportunity">
+//   <SlottedSVG
+//             slot="icon"
+//             xmlns="http://www.w3.org/2000/svg"
+//             viewBox="0 0 24 24"
+//             width="24"
+//             height="24" 
+//             path={mdiPencil}
+//             alignment="right"
+//           />
+//   </IcNavigationItem>
+//   <IcNavigationItem slot="primary-navigation" href="#" label="Documents to use">
+//   </IcNavigationItem>
+//   <IcDivider slot="primary-navigation"></IcDivider>
+
+// </IcSideNavigation>
+//       </body>
+//       </>
+//   );
+// };
+
+// export default Chat;
-Original file line number
+Diff line change
@@ Expand Up @@
         });
       });
     })();
+    console.log("hello!")