-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP: integration of intelligence design system
- Loading branch information
Showing
15 changed files
with
758 additions
and
305 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,3 +16,5 @@ import "../../node_modules/i.ai-design-system/dist/iai-design-system.js"; | |
| }); | ||
| }); | ||
| })(); | ||
|
|
||
| console.log("hello!") | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import React, { FC } from 'react'; | ||
| import ReactDOM from "react-dom/client"; | ||
| import { | ||
| IcClassificationBanner, | ||
| IcNavigationButton, | ||
| IcSectionContainer, | ||
| IcTopNavigation, | ||
| SlottedSVG, | ||
| IcHero, | ||
| IcButton, | ||
| IcDivider | ||
| } from '@ukic/react'; | ||
|
|
||
| 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 = () => { | ||
| 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="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." | ||
| > | ||
| <IcButton variant="primary" slot="interaction"> | ||
| Sign in | ||
| </IcButton> | ||
| </IcHero> | ||
|
|
||
| <br /> | ||
| <IcSectionContainer | ||
| style={{ display: 'flex' }} | ||
| gap="large" | ||
| aligned="center" | ||
| > | ||
| <IcCardHorizontal | ||
| heading="Upload" | ||
| message="Upload all common document types to your Redbox - it's that simple" | ||
| style={{ margin: '10px' }} | ||
| /> | ||
| <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' }} | ||
| /> | ||
| <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' }} | ||
| /> | ||
| </IcSectionContainer> | ||
|
|
||
| <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> | ||
| </IcSectionContainer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const rootElement = document.getElementById("root"); | ||
| if (rootElement) { | ||
| const root = ReactDOM.createRoot(rootElement); | ||
| root.render(<Body />); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.