Detailed Web Scrape UI & Supported File Types overhaul (#38)

* initial draft of input form layout * Improved UI settings form format * added tooltips to web scrape parameters inputs * moved all web scrape ui code into WebScrape.tsx * add conditonal display of boxes, must have URL entered * added web scrape parameters to function call * changed web scrape parameters to be more readable * standardize naming of stayOnBaseURL * adding 'read more' toggle to supported filetypes. TODO add better content and examples * fixed drop down coloring * corrected input checking; Added Github scrape msg * Added Max URLs and Max Depth ranges into label * center aligned Read More for web scrape info * fixed guthub message * maxUrls and maxDepth -1 bc 0 indexed * Update Terms, Privacy to UIUC standard ones * fixed type error for vercel check * removed unused functions/imports * fixed input check to ensure only numbers present * fixed vercel error from ' instead of &apos * fixed &apos in github msg * tooltips: Adding more text, set widths and dark backgrounds * add nice coloring and examples to READ MORE accordian * Major refactor of Supported File Types, no more 'Under development...' were done! * tiny typo fix * FORMAT FIX ONLY --------- Co-authored-by: Kastan Day <[email protected]>
CAII-NCSA · Oct 3, 2023 · 1ebb6a7 · 1ebb6a7 · vercel · Oct 3, 2023
1 parent 0d9e05b
commit 1ebb6a7
Show file tree

Hide file tree

Showing 12 changed files with 530 additions and 206 deletions.
diff --git a/public/media/excel_logo.png b/public/media/excel_logo.png
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -228,7 +228,7 @@ export const Chat = memo(({ stopConversationRef, courseMetadata }: Props) => {
           messages: updatedConversation.messages,
           key:
             courseMetadata?.openai_api_key &&
-              courseMetadata?.openai_api_key != ''
+            courseMetadata?.openai_api_key != ''
               ? courseMetadata.openai_api_key
               : apiKey,
           prompt: updatedConversation.prompt,
@@ -520,14 +520,14 @@ export const Chat = memo(({ stopConversationRef, courseMetadata }: Props) => {
 
   const statements =
     courseMetadata?.example_questions &&
-      courseMetadata.example_questions.length > 0
+    courseMetadata.example_questions.length > 0
       ? courseMetadata.example_questions
       : [
-        'Make a bullet point list of key takeaways of the course.',
-        'What is [your favorite topic] and why is it worth learning about?',
-        'How can I effectively prepare for the upcoming exam?',
-        'How many assignments in the course?',
-      ]
+          'Make a bullet point list of key takeaways of the course.',
+          'What is [your favorite topic] and why is it worth learning about?',
+          'How can I effectively prepare for the upcoming exam?',
+          'How many assignments in the course?',
+        ]
 
   // Add this function to create dividers with statements
   const renderIntroductoryStatements = () => {

diff --git a/src/components/UIUC-Components/GlobalFooter.tsx b/src/components/UIUC-Components/GlobalFooter.tsx
@@ -13,15 +13,23 @@ export default function Footer({ isNavbar = false }: { isNavbar?: boolean }) {
           Disclaimer
         </Link>
         <Link
-          href="/terms"
+          href="https://www.vpaa.uillinois.edu/digital_risk_management/generative_ai/"
+          className="link-hover link text-blue-500"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Generative AI Policy
+        </Link>
+        <Link
+          href="https://www.vpaa.uillinois.edu/resources/terms_of_use"
           className="link-hover link text-blue-500"
           target="_blank"
           rel="noopener noreferrer"
         >
           Terms
         </Link>
         <Link
-          href="/privacy"
+          href="https://www.vpaa.uillinois.edu/resources/web_privacy"
           className="link-hover link text-blue-500"
           target="_blank"
           rel="noopener noreferrer"

diff --git a/src/components/UIUC-Components/GlobalHeader.tsx b/src/components/UIUC-Components/GlobalHeader.tsx
@@ -90,11 +90,13 @@ export function LandingPageHeader({
         <SignedOut>
           {/* Signed out users get sign in button */}
           <SignInButton>
-            <button className={classes.link}><span
-              className={`${montserrat_heading.variable} font-montserratHeading`}
-            >
-              Sign in / Sign up
-            </span></button>
+            <button className={classes.link}>
+              <span
+                className={`${montserrat_heading.variable} font-montserratHeading`}
+              >
+                Sign in / Sign up
+              </span>
+            </button>
           </SignInButton>
         </SignedOut>
       </Group>

diff --git a/src/components/UIUC-Components/LargeDropzone.tsx b/src/components/UIUC-Components/LargeDropzone.tsx
@@ -1,7 +1,19 @@
 // LargeDropzone.tsx
 import React, { useRef, useState } from 'react'
-import { createStyles, Group, rem, Text, Title, useMantineTheme } from '@mantine/core'
-import { IconAlertCircle, IconCloudUpload, IconDownload, IconX } from '@tabler/icons-react'
+import {
+  createStyles,
+  Group,
+  rem,
+  Text,
+  Title,
+  useMantineTheme,
+} from '@mantine/core'
+import {
+  IconAlertCircle,
+  IconCloudUpload,
+  IconDownload,
+  IconX,
+} from '@tabler/icons-react'
 import { Dropzone } from '@mantine/dropzone'
 import { useRouter } from 'next/router'
 import { type CourseMetadata } from '~/types/courseMetadata'
@@ -264,7 +276,6 @@ export function LargeDropzone({
                 setUploadInProgress(false)
                 refreshOrRedirect(redirect_to_gpt_4)
                 // TODO: here we should raise toast for failed ingest files. AND successful ingest files.
-
               } else {
                 console.error('Upsert metadata failed')
                 setUploadInProgress(false)
@@ -274,7 +285,7 @@ export function LargeDropzone({
             radius="md"
             bg="#0E1116"
             disabled={isDisabled}
-          // #0E1116 -- nice dark
+            // #0E1116 -- nice dark
           >
             <div
               style={{ pointerEvents: 'none', opacity: isDisabled ? 0.6 : 1 }}
@@ -394,7 +405,9 @@ const showToast = (error_files: string[]) => {
       autoClose: 15000,
       // position="top-center",
       title: 'Failed to ingest files',
-      message: `Failed to ingest the following files: ${error_files.join(", ")}. Please shoot me an email: [email protected].`,
+      message: `Failed to ingest the following files: ${error_files.join(
+        ', ',
+      )}. Please shoot me an email: [email protected].`,
       color: 'red',
       radius: 'lg',
       icon: <IconAlertCircle />,

diff --git a/src/components/UIUC-Components/Maintenance.tsx b/src/components/UIUC-Components/Maintenance.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Title, Text } from '@mantine/core'
 import Link from 'next/link'
 
-const Maintenance = ({ }: {
+const Maintenance = ({}: {
   // Prevent search engine indexing of Maintenance page (because it'll ruin our entire search results): https://github.com/vercel/next.js/discussions/12850#discussioncomment-3335807
   // in _document.tsx
 }) => {
@@ -24,7 +24,8 @@ const Maintenance = ({ }: {
             UIUC.chat is down for maintenance
           </Title>
           <Text size="lg">
-            Our database provider, Supabase, is down. We will be back shortly after they are back online.
+            Our database provider, Supabase, is down. We will be back shortly
+            after they are back online.
           </Text>
           {/* <Text size="lg">
             Motivation: Things to explosive product growth, accompanied by the

diff --git a/src/components/UIUC-Components/MakeOldCoursePage.tsx b/src/components/UIUC-Components/MakeOldCoursePage.tsx
@@ -98,7 +98,7 @@ const MakeOldCoursePage = ({
     return (
       <CannotEditCourse
         course_name={currentPageName as string}
-      // current_email={currentEmail as string}
+        // current_email={currentEmail as string}
       />
     )
   }
@@ -217,9 +217,12 @@ const CourseFilesList = ({ files }: CourseFilesListProps) => {
     url: string,
   ) => {
     try {
-      const response = await axios.delete(`https://flask-production-751b.up.railway.app/delete`, {
-        params: { course_name, s3_path, url },
-      })
+      const response = await axios.delete(
+        `https://flask-production-751b.up.railway.app/delete`,
+        {
+          params: { course_name, s3_path, url },
+        },
+      )
       // Handle successful deletion, show a success message
       showToastOnFileDeleted(theme)
       // Refresh the page
@@ -301,15 +304,15 @@ const CourseFilesList = ({ files }: CourseFilesListProps) => {
                 // style={{ outline: 'solid 1px', outlineColor: 'white' }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.backgroundColor = theme.colors.grape[8]
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colorScheme === 'dark'
-                        ? theme.colors.gray[2]
-                        : theme.colors.gray[1]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colorScheme === 'dark'
+                      ? theme.colors.gray[2]
+                      : theme.colors.gray[1]
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.backgroundColor = 'transparent'
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colors.gray[8]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colors.gray[8]
                 }}
               >
                 <IconDownload className="h-5 w-5 text-gray-800" />
@@ -327,15 +330,15 @@ const CourseFilesList = ({ files }: CourseFilesListProps) => {
                 // style={{ outline: 'solid 1px', outlineColor: theme.white }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.backgroundColor = theme.colors.grape[8]
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colorScheme === 'dark'
-                        ? theme.colors.gray[2]
-                        : theme.colors.gray[1]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colorScheme === 'dark'
+                      ? theme.colors.gray[2]
+                      : theme.colors.gray[1]
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.backgroundColor = 'transparent'
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colors.red[6]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colors.red[6]
                 }}
               >
                 <IconTrash className="h-5 w-5 text-red-600" />
@@ -372,7 +375,8 @@ async function fetchCourseMetadata(course_name: string) {
       return data.course_metadata
     } else {
       throw new Error(
-        `Error fetching course metadata: ${response.statusText || response.status
+        `Error fetching course metadata: ${
+          response.statusText || response.status
         }`,
       )
     }

diff --git a/src/components/UIUC-Components/MakeQueryAnalysisPage.tsx b/src/components/UIUC-Components/MakeQueryAnalysisPage.tsx
@@ -129,7 +129,7 @@ const MakeQueryAnalysisPage = ({
     return (
       <CannotEditCourse
         course_name={currentPageName as string}
-      // current_email={currentEmail as string}
+        // current_email={currentEmail as string}
       />
     )
   }
@@ -278,9 +278,12 @@ const CourseFilesList = ({ files }: CourseFilesListProps) => {
   const { classes, theme } = useStyles()
   const handleDelete = async (s3_path: string, course_name: string) => {
     try {
-      const response = await axios.delete(`https://flask-production-751b.up.railway.app/delete`, {
-        params: { s3_path, course_name },
-      })
+      const response = await axios.delete(
+        `https://flask-production-751b.up.railway.app/delete`,
+        {
+          params: { s3_path, course_name },
+        },
+      )
       // Handle successful deletion, show a success message
       showToastOnFileDeleted(theme)
       // Refresh the page
@@ -362,15 +365,15 @@ const CourseFilesList = ({ files }: CourseFilesListProps) => {
                 // style={{ outline: 'solid 1px', outlineColor: 'white' }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.backgroundColor = theme.colors.grape[8]
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colorScheme === 'dark'
-                        ? theme.colors.gray[2]
-                        : theme.colors.gray[1]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colorScheme === 'dark'
+                      ? theme.colors.gray[2]
+                      : theme.colors.gray[1]
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.backgroundColor = 'transparent'
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colors.gray[8]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colors.gray[8]
                 }}
               >
                 <IconDownload className="h-5 w-5 text-gray-800" />
@@ -387,15 +390,15 @@ const CourseFilesList = ({ files }: CourseFilesListProps) => {
                 // style={{ outline: 'solid 1px', outlineColor: theme.white }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.backgroundColor = theme.colors.grape[8]
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colorScheme === 'dark'
-                        ? theme.colors.gray[2]
-                        : theme.colors.gray[1]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colorScheme === 'dark'
+                      ? theme.colors.gray[2]
+                      : theme.colors.gray[1]
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.backgroundColor = 'transparent'
-                    ; (e.currentTarget.children[0] as HTMLElement).style.color =
-                      theme.colors.red[6]
+                  ;(e.currentTarget.children[0] as HTMLElement).style.color =
+                    theme.colors.red[6]
                 }}
               >
                 <IconTrash className="h-5 w-5 text-red-600" />
@@ -432,7 +435,8 @@ async function fetchCourseMetadata(course_name: string) {
       return data.course_metadata
     } else {
       throw new Error(
-        `Error fetching course metadata: ${response.statusText || response.status
+        `Error fetching course metadata: ${
+          response.statusText || response.status
         }`,
       )
     }