Merge pull request #19 from dfe-analytical-services/frontend_tidy

Frontend tidy up

.pre-commit-config.yaml

@@ -1,16 +1,16 @@
 repos:
-  -  repo: https://github.com/PyCQA/flake8
-     rev: 6.1.0
-     hooks:
-       - id: flake8
-  
-  -  repo: https://github.com/psf/black-pre-commit-mirror
-     rev: 23.9.1
-     hooks: 
-     - id: black
-       language_version: python3.11
-  
+  - repo: https://github.com/PyCQA/flake8
+    rev: 6.1.0
+    hooks:
+      - id: flake8
+
+  - repo: https://github.com/psf/black-pre-commit-mirror
+    rev: 23.9.1
+    hooks:
+      - id: black
+        language_version: python3.11
+
   - repo: https://github.com/PyCQA/isort
     rev: 5.12.0
     hooks:
-      - id: isort
+      - id: isort

.prettierignore

@@ -1 +1,6 @@
+.next
+data/qdrant_storage
+next-env.d.ts
 node_modules
+Pipfile.lock
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

chatbot-ui/.env.local

@@ -0,0 +1 @@
+NEXT_PUBLIC_CHAT_URL_API=http://localhost:8010/api/chat

chatbot-ui/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-    "extends": "next/core-web-vitals"
-  }
+  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"]
+}

chatbot-ui/components/LoadingDots.tsx

@@ -1,6 +1,6 @@
-import styles from "@/styles/loading-dots.module.css";
+import styles from '@/styles/loading-dots.module.css';
 
-const LoadingDots = ({ color = "#000" }: { color: string }) => {
+const LoadingDots = ({ color = '#000' }: { color: string }) => {
   return (
     <span className={styles.loading}>
       <span style={{ backgroundColor: color }} />

chatbot-ui/components/Page.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from "react";
-import PageBanner from "./PageBanner";
-import PageFooter from "./PageFooter";
-import PageHeader from "./PageHeader";
-import PageTitle from "./PageTitle";
+import React, { ReactNode } from 'react';
+import PageBanner from './PageBanner';
+import PageFooter from './PageFooter';
+import PageHeader from './PageHeader';
+import PageTitle from './PageTitle';
 
 type Props = {
   title: string;
@@ -11,14 +11,16 @@ type Props = {
   wide?: boolean;
 };
 
-const Page = ({ title, caption = "", children = null }: Props) => {
+const Page = ({ title, caption = '', children = null }: Props) => {
   return (
     <>
       <PageHeader />
 
       <div className="govuk-width-container ">
         <PageBanner />
-        <a href="#" className="govuk-back-link">Back</a>
+        <a href="#" className="govuk-back-link">
+          Back
+        </a>
         <main className="govuk-main-wrapper" id="main-content" role="main">
           <PageTitle title={title} caption={caption} />
           {children}

chatbot-ui/components/PageBanner.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 const PageBanner = () => {
   return (
@@ -8,10 +8,10 @@ const PageBanner = () => {
           Beta
         </strong>
         <span className="govuk-phase-banner__text">
-          This is a new service – your{" "}
+          This is a new service – your{' '}
           <a className="govuk-link" href="#">
             feedback
-          </a>{" "}
+          </a>{' '}
           will help us to improve it.
         </span>
       </p>

chatbot-ui/components/PageFooter.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface Props {}
 

chatbot-ui/components/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface Props {}
 

chatbot-ui/components/PageTitle.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface Props {
   caption?: string;

chatbot-ui/next.config.js

@@ -1,13 +1,14 @@
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
+  poweredByHeader: false,
   reactStrictMode: true,
   swcMinify: true,
   webpack(config) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>
       rule.test?.test?.('.svg'),
-    )
+    );
 
     config.module.rules.push(
       // Reapply the existing rule, but only for svg imports ending in ?url
@@ -23,10 +24,10 @@ const nextConfig = {
         resourceQuery: { not: /url/ }, // exclude if *.svg?url
         use: ['@svgr/webpack'],
       },
-    )
+    );
 
     // Modify the file loader rule to ignore *.svg, since we have it handled now.
-    fileLoaderRule.exclude = /\.svg$/i
+    fileLoaderRule.exclude = /\.svg$/i;
 
     config.experiments = { ...config.experiments, topLevelAwait: true };
     return config;

chatbot-ui/package.json

@@ -10,8 +10,7 @@
     "dev": "next dev -p 3002",
     "build": "next build",
     "start": "next start -p 3002",
-    "lint": "eslint --ignore-path .gitignore \"**/*.+(ts|js|tsx)\"",
-    "format": "prettier --ignore-path .gitignore \"**/*.+(ts|js|tsx)\" --write"
+    "lint": "eslint --ignore-path .gitignore \"**/*.+(ts|js|tsx)\""
   },
   "dependencies": {
     "classnames": "^2.3.2",
@@ -31,7 +30,6 @@
     "@typescript-eslint/parser": "^6.7.3",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.3",
-    "prettier": "^3.0.0",
     "typescript": "^5.0.0"
   }
-}
+}

chatbot-ui/pages/_app.tsx

@@ -1,5 +1,5 @@
-import type { AppProps } from "next/app";
-import "../styles/_all.scss";
+import type { AppProps } from 'next/app';
+import '../styles/_all.scss';
 
 function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

chatbot-ui/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (

chatbot-ui/pages/index.tsx

@@ -1,22 +1,22 @@
-import { useRef, useState, useEffect } from "react";
-import Page from "@/components/Page";
-import styles from "@/styles/Home.module.css";
-import ReactMarkdown from "react-markdown";
-import LoadingDots from "@/components/LoadingDots";
-import classNames from "classnames";
-import React from "react";
-import RobotIcon from "../public/assets/images/icons/robot.svg";
-import UserIcon from "../public/assets/images/icons/user.svg";
+import { useRef, useState, useEffect } from 'react';
+import Page from '@/components/Page';
+import styles from '@/styles/Home.module.css';
+import ReactMarkdown from 'react-markdown';
+import LoadingDots from '@/components/LoadingDots';
+import classNames from 'classnames';
+import React from 'react';
+import RobotIcon from '../public/assets/images/icons/robot.svg';
+import UserIcon from '../public/assets/images/icons/user.svg';
 
 type Message = {
-  type: "apiMessage" | "userMessage";
+  type: 'apiMessage' | 'userMessage';
   message: string;
   isStreaming?: boolean;
   links?: string[];
 };
 
 function Home() {
-  const [query, setQuery] = useState<string>("");
+  const [query, setQuery] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const [messageState, setMessageState] = useState<{
@@ -27,13 +27,16 @@ function Home() {
     messages: [
       {
         message:
-          "Hi, what would you like to know about the latest publications on EES?",
-        type: "apiMessage",
+          'Hi, what would you like to know about the latest publications on EES?',
+        type: 'apiMessage',
       },
     ],
     history: [],
   });
 
+  const api_url =
+    process.env.NEXT_PUBLIC_CHAT_URL_API ?? 'http://localhost:8010/api/chat';
+
   const { messages } = messageState;
 
   const messageListRef = useRef<HTMLDivElement>(null);
@@ -48,7 +51,7 @@ function Home() {
     e.preventDefault();
 
     if (!query) {
-      setError("Enter a question");
+      setError('Enter a question');
       return;
     }
 
@@ -61,20 +64,20 @@ function Home() {
       messages: [
         ...state.messages,
         {
-          type: "userMessage",
+          type: 'userMessage',
           message: question,
         },
       ],
     }));
 
     setLoading(true);
-    setQuery("");
+    setQuery('');
 
     try {
-      const response = await fetch("http://localhost:8010/api/chat", {
-        method: "POST",
+      const response = await fetch(api_url, {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           question,
@@ -88,8 +91,8 @@ function Home() {
         messages: [
           ...state.messages,
           {
-            type: "apiMessage",
-            message: "",
+            type: 'apiMessage',
+            message: '',
           },
         ],
       }));
@@ -102,7 +105,7 @@ function Home() {
       const decoder = new TextDecoder();
       let done = false;
 
-      let pending = "";
+      let pending = '';
       while (!done) {
         const { value, done: doneReading } = await reader.read();
         done = doneReading;
@@ -129,15 +132,15 @@ function Home() {
       //messageListRef.current?.scrollTo(0, messageListRef.current.scrollHeight);
     } catch (error) {
       setLoading(false);
-      setError("An error occurred while fetching the data. Please try again.");
+      setError('An error occurred while fetching the data. Please try again.');
     }
   }
 
   //prevent empty submissions
   const handleEnter = (e: any) => {
-    if (e.key === "Enter" && query) {
+    if (e.key === 'Enter' && query) {
       handleSubmit(e);
-    } else if (e.key == "Enter") {
+    } else if (e.key == 'Enter') {
       e.preventDefault();
     }
   };
@@ -167,36 +170,34 @@ function Home() {
           </>
         )}
 
-        <div className={"govuk-body"}>
+        <div className={'govuk-body'}>
           <div className={styles.chat}>
             <div ref={messageListRef} className={styles.messagelist}>
               {messages.map((message, index) => {
                 let icon;
                 let className;
 
-                if (message.type === "apiMessage") {
+                if (message.type === 'apiMessage') {
                   icon = <RobotIcon height="1.1em" fill="#1d70b8" />;
                   className = styles.apimessage;
                 } else {
-                  icon = <UserIcon height="1.1em" fill="	#00703c" />;
+                  icon = <UserIcon height="1.1em" fill="#00703c" />;
                   // The latest message sent by the user will be animated while waiting for a response
                   className =
                     loading && index === messages.length - 1
                       ? styles.usermessagewaiting
                       : styles.usermessage;
                 }
                 return (
-                  <>
-                    <div
-                      key={`chatMessage-${index}`}
-                      className={classNames("govuk-body", className)}
-                    >
-                      {icon}
-                      <div className={styles.markdownanswer}>
-                        <ReactMarkdown>{message.message}</ReactMarkdown>
-                      </div>
+                  <div
+                    key={`chatMessage-${index}`}
+                    className={classNames('govuk-body', className)}
+                  >
+                    {icon}
+                    <div className={styles.markdownanswer}>
+                      <ReactMarkdown>{message.message}</ReactMarkdown>
                     </div>
-                  </>
+                  </div>
                 );
               })}
             </div>

chatbot-ui/styles/_all.scss

@@ -1 +1 @@
-@import '~govuk-frontend/govuk/all';
+@import '~govuk-frontend/govuk/all';