add comments and sort import

Author: ckouder

src/components/Chat/Chat.tsx

@@ -1,4 +1,13 @@
 // src/components/Chat/Chat.tsx
+import { useDownloadPresignedUrlQuery } from '~/hooks/queries/useDownloadPresignedUrl'
+import { useFetchEnabledDocGroups } from '@/hooks/queries/useFetchEnabledDocGroups'
+import { useFetchLLMProviders } from '@/hooks/queries/useFetchLLMProviders'
+import { useDeleteMessages } from '@/hooks/queries/useDeleteMessages'
+import { useLogConversation } from '@/hooks/queries/useLogConversation'
+import { useQueryRewrite } from '@/hooks/queries/useQueryRewrite'
+import { useRouteChat } from '@/hooks/queries/useRouteChat'
+import { useUpdateConversation } from '@/hooks/queries/useUpdateConversation'
+
 import { Button, Text } from '@mantine/core'
 import {
   IconAlertCircle,
@@ -29,7 +38,6 @@ import { v4 as uuidv4 } from 'uuid'
 
 import HomeContext from '~/pages/api/home/home.context'
 
-import { useDownloadPresignedUrlQuery } from '~/hooks/queries/useDownloadPresignedUrl'
 import { ChatInput } from './ChatInput'
 import { ChatLoader } from './ChatLoader'
 import { ErrorMessageDiv } from './ErrorMessageDiv'
@@ -57,13 +65,6 @@ import { Montserrat } from 'next/font/google'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useAuth } from 'react-oidc-context'
-import { useFetchEnabledDocGroups } from '@/hooks/queries/useFetchEnabledDocGroups'
-import { useFetchLLMProviders } from '@/hooks/queries/useFetchLLMProviders'
-import { useDeleteMessages } from '@/hooks/queries/useDeleteMessages'
-import { useLogConversation } from '@/hooks/queries/useLogConversation'
-import { useQueryRewrite } from '@/hooks/queries/useQueryRewrite'
-import { useRouteChat } from '@/hooks/queries/useRouteChat'
-import { useUpdateConversation } from '@/hooks/queries/useUpdateConversation'
 import { CropwizardLicenseDisclaimer } from '~/pages/cropwizard-licenses'
 
 import { get_user_permission } from '~/components/UIUC-Components/runAuthCheck'
@@ -110,45 +111,41 @@ export const Chat = memo(
     const auth = useAuth()
     const router = useRouter()
     const queryClient = useQueryClient()
+    const getCurrentPageName = () => {
+      // /CS-125/dashboard --> CS-125
+      return router.asPath.slice(1).split('/')[0] as string
+    }
+    const bannerS3Path = courseMetadata?.banner_image_s3 || undefined
+
+    // React Query hooks
     const { refetch: refetchLLMProviders } = useFetchLLMProviders({
       projectName: courseName,
     })
     const { mutateAsync: runQueryRewriteAsync } = useQueryRewrite()
     const { mutateAsync: routeChatAsync } = useRouteChat()
-    // const
-    const bannerS3Path = courseMetadata?.banner_image_s3 || undefined
     const { data: bannerUrl } = useDownloadPresignedUrlQuery(
       bannerS3Path,
       courseName,
     )
-    const getCurrentPageName = () => {
-      // /CS-125/dashboard --> CS-125
-      return router.asPath.slice(1).split('/')[0] as string
-    }
-    const [chat_ui] = useState(new ChatUI(new MLCEngine()))
-
-    const [inputContent, setInputContent] = useState<string>('')
-
-    const [enabledDocumentGroups, setEnabledDocumentGroups] = useState<
-      string[]
-    >(['All Documents']) // Default to 'All Documents' so retrieval can work immediately
-    const [enabledTools, setEnabledTools] = useState<string[]>([])
-
     const logConversationMutation = useLogConversation(getCurrentPageName())
-
     const {
       data: documentGroupsHook,
       isSuccess: isSuccessDocumentGroups,
       // isError: isErrorDocumentGroups,
     } = useFetchEnabledDocGroups(getCurrentPageName())
-
     const {
       data: toolsHook,
       isSuccess: isSuccessTools,
       isLoading: isLoadingTools,
       isError: isErrorTools,
       error: toolLoadingError,
     } = useFetchAllWorkflows(getCurrentPageName())
+    const updateConversationMutation = useUpdateConversation(
+      currentEmail,
+      queryClient,
+      courseName,
+    )
+    const deleteMessagesMutation = useDeleteMessages(currentEmail, courseName)
 
     const permission = get_user_permission(courseMetadata, auth)
 
@@ -172,6 +169,16 @@ export const Chat = memo(
       dispatch: homeDispatch,
     } = useContext(HomeContext)
 
+    // const
+    const [chat_ui] = useState(new ChatUI(new MLCEngine()))
+
+    const [inputContent, setInputContent] = useState<string>('')
+
+    const [enabledDocumentGroups, setEnabledDocumentGroups] = useState<
+      string[]
+    >(['All Documents']) // Default to 'All Documents' so retrieval can work immediately
+    const [enabledTools, setEnabledTools] = useState<string[]>([])
+
     useEffect(() => {
       const loadModel = async () => {
         if (selectedConversation?.model && !chat_ui.isModelLoading()) {
@@ -206,13 +213,6 @@ export const Chat = memo(
     const chatContainerRef = useRef<HTMLDivElement>(null)
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const editedMessageIdRef = useRef<string | undefined>(undefined)
-    const updateConversationMutation = useUpdateConversation(
-      currentEmail,
-      queryClient,
-      courseName,
-    )
-
-    const deleteMessagesMutation = useDeleteMessages(currentEmail, courseName)
 
     // Document Groups
     useEffect(() => {

src/components/Chat/ChatInput.tsx

@@ -1,3 +1,5 @@
+import { useRouteChat } from '@/hooks/queries/useRouteChat'
+
 import {
   type Content,
   type Message,
@@ -53,7 +55,6 @@ import {
 import { type OpenAIModelID } from '~/utils/modelProviders/types/openai'
 import type ChatUI from '~/utils/modelProviders/WebLLM'
 import { webLLMModels } from '~/utils/modelProviders/WebLLM'
-import { useRouteChat } from '@/hooks/queries/useRouteChat'
 import { type ChatBody, ContextWithMetadata } from '~/types/chat'
 import { ALLOWED_FILE_EXTENSIONS, isImageFile } from '~/utils/fileUploadUtils'
 
@@ -98,6 +99,9 @@ export const ChatInput = ({
     dispatch: homeDispatch,
   } = useContext(HomeContext)
 
+  // React Query hooks
+  const { mutateAsync: routeChatAsync } = useRouteChat()
+
   const {
     fileUploads,
     fileUploadRef,
@@ -130,7 +134,6 @@ export const ChatInput = ({
   const chatInputParentContainerRef = useRef<HTMLDivElement>(null)
   const isSmallScreen = useMediaQuery('(max-width: 960px)')
   const modelSelectContainerRef = useRef<HTMLDivElement | null>(null)
-  const { mutateAsync: routeChatAsync } = useRouteChat()
   const { resetHeight } = useTextareaAutosize({ textareaRef, content })
   const { isFocused, handleFocus, handleBlur } = useChatInputFocus({
     textareaRef,

src/components/Chat/ChatMessage.tsx

@@ -1,4 +1,10 @@
 // ChatMessage.tsx
+import {
+  useDownloadPresignedUrl,
+  useDownloadPresignedUrlQuery,
+} from '~/hooks/queries/useDownloadPresignedUrl'
+import { useLogConversation } from '@/hooks/queries/useLogConversation'
+
 import React, {
   memo,
   useContext,
@@ -31,10 +37,6 @@ import {
 } from '@/types/chat'
 import { useTranslation } from 'next-i18next'
 import HomeContext from '~/pages/api/home/home.context'
-import {
-  useDownloadPresignedUrl,
-  useDownloadPresignedUrlQuery,
-} from '~/hooks/queries/useDownloadPresignedUrl'
 import { CodeBlock } from '../Markdown/CodeBlock'
 import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown'
 import { generateSecureKey } from '~/utils/cryptoRandom'
@@ -48,7 +50,6 @@ import {
   saveConversationToServer,
   createLogConversationPayload,
 } from '@/hooks/__internal__/conversation'
-import { useLogConversation } from '@/hooks/queries/useLogConversation'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { montserrat_heading, montserrat_paragraph } from 'fonts'

src/components/Chatbar/Chatbar.tsx

@@ -1,3 +1,9 @@
+import { useDeleteAllConversations } from '@/hooks/queries/useDeleteAllConversations'
+import { useDeleteConversation } from '@/hooks/queries/useDeleteConversation'
+import { useFetchConversationHistory } from '@/hooks/queries/useFetchConversationHistory'
+import { useUpdateConversation } from '@/hooks/queries/useUpdateConversation'
+import { useDownloadConvoHistory } from '@/hooks/queries/useDownloadConvoHistory'
+
 import { useState, useCallback, useContext, useEffect, Suspense } from 'react'
 import { useTranslation } from 'next-i18next'
 import { useCreateReducer } from '@/hooks/useCreateReducer'
@@ -14,11 +20,6 @@ import ChatbarContext from './Chatbar.context'
 import { type ChatbarInitialState, initialState } from './Chatbar.state'
 import { v4 as uuidv4 } from 'uuid'
 import { useQueryClient } from '@tanstack/react-query'
-import { useDeleteAllConversations } from '@/hooks/queries/useDeleteAllConversations'
-import { useDeleteConversation } from '@/hooks/queries/useDeleteConversation'
-import { useFetchConversationHistory } from '@/hooks/queries/useFetchConversationHistory'
-import { useUpdateConversation } from '@/hooks/queries/useUpdateConversation'
-import { useDownloadConvoHistory } from '@/hooks/queries/useDownloadConvoHistory'
 
 import { AnimatePresence, motion } from 'framer-motion'
 import { LoadingSpinner } from '../UIUC-Components/LoadingSpinner'
@@ -41,7 +42,6 @@ export const Chatbar = ({
   const chatBarContextValue = useCreateReducer<ChatbarInitialState>({
     initialState,
   })
-  const [isExporting, setIsExporting] = useState<boolean>(false)
 
   const {
     state: { conversations, showChatbar, defaultModelId, folders },
@@ -62,27 +62,19 @@ export const Chatbar = ({
   )
 
   const queryClient = useQueryClient()
+
+  // React Query hooks
   const deleteConversationMutation = useDeleteConversation(
     current_email as string,
     queryClient,
     courseName as string,
     searchTerm,
   )
-
   const deleteAllConversationMutation = useDeleteAllConversations(
     queryClient,
     current_email as string,
     courseName as string,
   )
-
-  const handleApiKeyChange = useCallback(
-    (apiKey: string) => {
-      homeDispatch({ field: 'apiKey', value: apiKey })
-      localStorage.setItem('apiKey', apiKey)
-    },
-    [homeDispatch],
-  )
-
   const {
     data: conversationHistory,
     error: conversationHistoryError,
@@ -97,15 +89,23 @@ export const Chatbar = ({
     debouncedSearchTerm,
     courseName,
   )
-
   const updateConversationMutation = useUpdateConversation(
     current_email as string,
     queryClient,
     courseName as string,
   )
-
   const { mutateAsync: downloadConvoHistoryAsync } = useDownloadConvoHistory()
 
+  const [isExporting, setIsExporting] = useState<boolean>(false)
+
+  const handleApiKeyChange = useCallback(
+    (apiKey: string) => {
+      homeDispatch({ field: 'apiKey', value: apiKey })
+      localStorage.setItem('apiKey', apiKey)
+    },
+    [homeDispatch],
+  )
+
   const [convoMigrationLoading, setConvoMigrationLoading] =
     useState<boolean>(false)
 

src/components/Chatbar/components/ChatFolders.tsx

@@ -1,3 +1,5 @@
+import { useUpdateConversation } from '@/hooks/queries/useUpdateConversation'
+
 import { useContext } from 'react'
 
 import {
@@ -11,7 +13,6 @@ import Folder from '@/components/Folder'
 
 import { ConversationComponent } from './Conversation'
 import { useQueryClient } from '@tanstack/react-query'
-import { useUpdateConversation } from '@/hooks/queries/useUpdateConversation'
 
 interface Props {
   searchTerm: string

src/components/Sidebar/Sidebar.tsx

@@ -1,3 +1,5 @@
+import { useDownloadPresignedUrlQuery } from '@/hooks/queries/useDownloadPresignedUrl'
+
 import {
   IconEdit,
   IconFolderPlus,
@@ -8,7 +10,6 @@ import {
 import { type ReactNode } from 'react'
 import Image from 'next/image'
 import { useTranslation } from 'react-i18next'
-import { useDownloadPresignedUrlQuery } from '@/hooks/queries/useDownloadPresignedUrl'
 
 import { IconSettings } from '@tabler/icons-react'
 

src/components/UIUC-Components/APIRequestBuilder.tsx

@@ -1,3 +1,5 @@
+import { useFetchLLMProviders } from '@/hooks/queries/useFetchLLMProviders'
+
 import { useState, useEffect } from 'react'
 import {
   Textarea,
@@ -15,7 +17,6 @@ import {
   IconChevronDown,
   IconInfoCircle,
 } from '@tabler/icons-react'
-import { useFetchLLMProviders } from '@/hooks/queries/useFetchLLMProviders'
 import { findDefaultModel } from './api-inputs/LLMsApiKeyInputForm'
 import { type AnySupportedModel } from '~/utils/modelProviders/LLMProvider'
 import { montserrat_heading, montserrat_paragraph } from 'fonts'
@@ -33,6 +34,11 @@ export default function APIRequestBuilder({
   apiKey,
   courseMetadata,
 }: APIRequestBuilderProps) {
+  // React Query hooks
+  const { data: llmProviders } = useFetchLLMProviders({
+    projectName: course_name,
+  })
+
   const [selectedLanguage, setSelectedLanguage] = useState<
     'curl' | 'python' | 'node'
   >('curl')
@@ -47,10 +53,6 @@ export default function APIRequestBuilder({
   const [streamEnabled, setStreamEnabled] = useState(true)
   const [temperature, setTemperature] = useState(0.1)
 
-  const { data: llmProviders } = useFetchLLMProviders({
-    projectName: course_name,
-  })
-
   useEffect(() => {
     if (llmProviders) {
       const defaultModel = findDefaultModel(llmProviders)