From 64909d74f9c88e87aafb2133084150f1eb45d58c Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Mon, 7 Oct 2024 10:33:08 -0700
Subject: [PATCH] UX Cleanup (#2701)

* start

* shared iconlogo class

* clean out of place components

* nit
---
 .../app/admin/assistants/AssistantEditor.tsx  |   2 +-
 web/src/app/admin/assistants/PersonaTable.tsx |   2 +-
 .../prompt-library/modals/EditPromptModal.tsx |   2 +-
 .../admin/prompt-library/promptLibrary.tsx    |  41 +-
 web/src/app/admin/tools/ToolEditor.tsx        |   9 +-
 .../ee/admin/api-key/DanswerApiKeyForm.tsx    |  13 +-
 .../ee/admin/groups/UserGroupCreationForm.tsx |  15 +-
 web/src/components/icons/icons.tsx            | 541 ++++--------------
 .../components/resizable/ResizableSection.tsx |   2 +-
 web/src/components/search/SearchBar.tsx       |   4 +-
 .../search/SearchResultsDisplay.tsx           |   2 +-
 web/src/components/search/SearchSection.tsx   |   5 +-
 .../search/filtering/FilterDropdown.tsx       |   3 +-
 13 files changed, 160 insertions(+), 481 deletions(-)

diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx
index 1f961614d..d4287e4c9 100644
--- a/web/src/app/admin/assistants/AssistantEditor.tsx
+++ b/web/src/app/admin/assistants/AssistantEditor.tsx
@@ -165,7 +165,7 @@ export function AssistantEditor({
         existingPersona.num_chunks === 0
       );
     }
-  }, []);
+  }, [isUpdate, existingPrompt]);
 
   const defaultProvider = llmProviders.find(
     (llmProvider) => llmProvider.is_default_provider
diff --git a/web/src/app/admin/assistants/PersonaTable.tsx b/web/src/app/admin/assistants/PersonaTable.tsx
index dac260a18..7a72d6e2e 100644
--- a/web/src/app/admin/assistants/PersonaTable.tsx
+++ b/web/src/app/admin/assistants/PersonaTable.tsx
@@ -176,7 +176,7 @@ export function PersonasTable({
                 </div>
               </div>,
               <div key="edit" className="flex">
-                <div className="mx-auto my-auto">
+                <div className="mr-auto my-auto">
                   {!persona.is_default_persona && isEditable ? (
                     <div
                       className="hover:bg-hover rounded p-1 cursor-pointer"
diff --git a/web/src/app/admin/prompt-library/modals/EditPromptModal.tsx b/web/src/app/admin/prompt-library/modals/EditPromptModal.tsx
index a5b44da51..bd20ce5e4 100644
--- a/web/src/app/admin/prompt-library/modals/EditPromptModal.tsx
+++ b/web/src/app/admin/prompt-library/modals/EditPromptModal.tsx
@@ -52,7 +52,7 @@ const EditPromptModal = ({
         }}
       >
         {({ isSubmitting, values }) => (
-          <Form>
+          <Form className="items-stretch">
             <h2 className="text-2xl text-emphasis font-bold mb-3 flex items-center">
               <svg
                 className="w-6 h-6 mr-2"
diff --git a/web/src/app/admin/prompt-library/promptLibrary.tsx b/web/src/app/admin/prompt-library/promptLibrary.tsx
index 8a046893d..18cb5927b 100644
--- a/web/src/app/admin/prompt-library/promptLibrary.tsx
+++ b/web/src/app/admin/prompt-library/promptLibrary.tsx
@@ -17,6 +17,7 @@ import { FiTag } from "react-icons/fi";
 import { PageSelector } from "@/components/PageSelector";
 import { InputPrompt } from "./interfaces";
 import { Modal } from "@/components/Modal";
+import { DeleteEntityModal } from "@/components/modals/DeleteEntityModal";
 
 const CategoryBubble = ({
   name,
@@ -120,6 +121,7 @@ export const PromptLibraryTable = ({
       setPopup({ message: "Failed to delete input prompt", type: "error" });
     }
     refresh();
+    setConfirmDeletionId(null);
   };
 
   const handleStatusSelect = (status: string) => {
@@ -138,35 +140,16 @@ export const PromptLibraryTable = ({
   return (
     <div className="justify-center py-2">
       {confirmDeletionId != null && (
-        <Modal
-          onOutsideClick={() => setConfirmDeletionId(null)}
-          className="max-w-sm"
-        >
-          <>
-            <p className="text-lg mb-2">
-              Are you sure you want to delete this prompt? You will not be able
-              to recover this prompt
-            </p>
-            <div className="mt-6 flex justify-between">
-              <button
-                className="rounded py-1.5 px-2 bg-background-800 text-text-200"
-                onClick={async () => {
-                  await handleDelete(confirmDeletionId);
-                  setConfirmDeletionId(null);
-                }}
-              >
-                Yes
-              </button>
-              <button
-                onClick={() => setConfirmDeletionId(null)}
-                className="rounded py-1.5 px-2 bg-background-150 text-text-800"
-              >
-                {" "}
-                No
-              </button>
-            </div>
-          </>
-        </Modal>
+        <DeleteEntityModal
+          onClose={() => setConfirmDeletionId(null)}
+          onSubmit={() => handleDelete(confirmDeletionId)}
+          entityType="prompt"
+          entityName={
+            paginatedPromptLibrary.find(
+              (prompt) => prompt.id === confirmDeletionId
+            )?.prompt ?? ""
+          }
+        />
       )}
 
       <div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent">
diff --git a/web/src/app/admin/tools/ToolEditor.tsx b/web/src/app/admin/tools/ToolEditor.tsx
index b4df98f86..0ffb8750e 100644
--- a/web/src/app/admin/tools/ToolEditor.tsx
+++ b/web/src/app/admin/tools/ToolEditor.tsx
@@ -318,10 +318,11 @@ export function ToolEditor({ tool }: { tool?: ToolSnapshot }) {
       <Formik
         initialValues={{
           definition: prettifiedDefinition,
-          customHeaders: tool?.custom_headers?.map((header) => ({
-            key: header.key,
-            value: header.value,
-          })) ?? [{ key: "test", value: "value" }],
+          customHeaders:
+            tool?.custom_headers?.map((header) => ({
+              key: header.key,
+              value: header.value,
+            })) ?? [],
         }}
         validationSchema={ToolSchema}
         onSubmit={async (values: ToolFormValues) => {
diff --git a/web/src/app/ee/admin/api-key/DanswerApiKeyForm.tsx b/web/src/app/ee/admin/api-key/DanswerApiKeyForm.tsx
index 6b1c8a860..4232929c8 100644
--- a/web/src/app/ee/admin/api-key/DanswerApiKeyForm.tsx
+++ b/web/src/app/ee/admin/api-key/DanswerApiKeyForm.tsx
@@ -28,18 +28,9 @@ export const DanswerApiKeyForm = ({
 
   return (
     <Modal onOutsideClick={onClose} width="w-2/6">
-      <div className="px-8 py-6 bg-background">
+      <>
         <h2 className="text-xl font-bold flex">
           {isUpdate ? "Update API Key" : "Create a new API Key"}
-          <div
-            onClick={onClose}
-            className="ml-auto hover:bg-hover p-1.5 rounded"
-          >
-            <XIcon
-              size={20}
-              className="my-auto flex flex-shrink-0 cursor-pointer"
-            />
-          </div>
         </h2>
 
         <Divider />
@@ -126,7 +117,7 @@ export const DanswerApiKeyForm = ({
             </Form>
           )}
         </Formik>
-      </div>
+      </>
     </Modal>
   );
 };
diff --git a/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx b/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx
index ec1ac52e6..2963eb20b 100644
--- a/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx
+++ b/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx
@@ -35,18 +35,9 @@ export const UserGroupCreationForm = ({
 
   return (
     <Modal className="w-fit" onOutsideClick={onClose}>
-      <div className="px-8 py-6 bg-background">
+      <>
         <h2 className="text-xl font-bold flex">
           {isUpdate ? "Update a User Group" : "Create a new User Group"}
-          <div
-            onClick={onClose}
-            className="ml-auto hover:bg-hover p-1.5 rounded"
-          >
-            <XIcon
-              size={20}
-              className="my-auto flex flex-shrink-0 cursor-pointer"
-            />
-          </div>
         </h2>
 
         <Divider />
@@ -89,7 +80,7 @@ export const UserGroupCreationForm = ({
         >
           {({ isSubmitting, values, setFieldValue }) => (
             <Form>
-              <div className="p-4">
+              <div className="py-4">
                 <TextFormField
                   name="name"
                   label="Name:"
@@ -150,7 +141,7 @@ export const UserGroupCreationForm = ({
             </Form>
           )}
         </Formik>
-      </div>
+      </>
     </Modal>
   );
 };
diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx
index 186e4473c..9295a08c0 100644
--- a/web/src/components/icons/icons.tsx
+++ b/web/src/components/icons/icons.tsx
@@ -43,7 +43,7 @@ import {
   FiSlack,
 } from "react-icons/fi";
 import { SiBookstack } from "react-icons/si";
-import Image from "next/image";
+import Image, { StaticImageData } from "next/image";
 import jiraSVG from "../../../public/Jira.svg";
 import confluenceSVG from "../../../public/Confluence.svg";
 import openAISVG from "../../../public/Openai.svg";
@@ -94,6 +94,23 @@ export interface IconProps {
   className?: string;
 }
 
+export interface LogoIconProps extends IconProps {
+  src: string | StaticImageData;
+}
+
+export const LogoIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+  src,
+}: LogoIconProps) => (
+  <div
+    style={{ width: `${size}px`, height: `${size}px` }}
+    className={`w-[${size}px] h-[${size}px] ` + className}
+  >
+    <Image src={src} alt="Logo" width="96" height="96" />
+  </div>
+);
+
 export const AssistantsIconSkeleton = ({
   size,
   className = defaultTailwindCSS,
@@ -172,36 +189,6 @@ export const AssistantsIcon = ({
   );
 };
 
-// export const AssistantsIcon = ({
-//   size,
-//   className = defaultTailwindCSS,
-// }: IconProps) => {
-//   return (
-//     <svg
-//       style={{ width: `${size}px`, height: `${size}px` }}
-//       className={`w-[${size}px] h-[${size}px] ` + className}
-//       xmlns="http://www.w3.org/2000/svg"
-//       width="200"
-//       height="200"
-//       viewBox="0 0 24 24"
-//     >
-//       <g fill="none" stroke="currentColor" strokeWidth="1.5">
-//         <path
-//           strokeLinecap="round"
-//           d="M21.483 19c-.04.936-.165 1.51-.569 1.914c-.586.586-1.528.586-3.414.586c-1.886 0-2.828 0-3.414-.586c-.586-.586-.586-1.528-.586-3.414v-2c0-1.886 0-2.828.586-3.414c.586-.586 1.528-.586 3.414-.586c1.886 0 2.828 0 3.414.586c.532.531.581 1.357.585 2.914"
-//         />
-//         <path d="M2 8.5c0 1.886 0 2.828.586 3.414c.586.586 1.528.586 3.414.586c1.886 0 2.828 0 3.414-.586C10 11.328 10 10.386 10 8.5v-2c0-1.886 0-2.828-.586-3.414C8.828 2.5 7.886 2.5 6 2.5c-1.886 0-2.828 0-3.414.586C2 3.672 2 4.614 2 6.5v2Z" />
-//         <path
-//           strokeLinecap="round"
-//           d="M15.5 2.513c-.327.017-.562.055-.765.14a2 2 0 0 0-1.083 1.082c-.152.367-.152.833-.152 1.765c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.152-.367.152-.833.152-1.765c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083c-.204-.084-.438-.122-.765-.139"
-//         />
-//         <path d="M2 18.5c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C10 19.898 10 19.432 10 18.5c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C8.398 15.5 7.932 15.5 7 15.5H5c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083C2 17.102 2 17.568 2 18.5Z" />
-//       </g>
-//     </svg>
-
-//   );
-// };
-
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="200"
@@ -999,103 +986,53 @@ export const LightSettingsIcon = ({
   );
 };
 
-//
 //  COMPANY LOGOS
-//
 
 export const LoopioIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] dark:invert ` + className}
-    >
-      <Image src="/Loopio.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size}
+    className={`${className} dark:invert`}
+    src="/Loopio.png"
+  />
+);
 
 export const NewIconTest = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <svg
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="200"
-      height="200"
-      viewBox="0 0 24 24"
-    >
-      <g fill="none" stroke="currentColor" strokeWidth="1.5">
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M2.75 8.917h18.5"
-        />
-        <rect width="18.5" height="18.5" x="2.75" y="2.75" rx="6" />
-      </g>
-    </svg>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/NewIconTest.svg" />
+);
 
 export const GitlabIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Gitlab.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Gitlab.png" />
+);
+
 export const GithubIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Github.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Github.png" />
+);
 
 export const GmailIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Gmail.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Gmail.png" />
+);
 
 export const GoogleDriveIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/GoogleDrive.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/GoogleDrive.png" />
+);
 
 export const BookstackIcon = ({
   size = 16,
@@ -1107,440 +1044,240 @@ export const BookstackIcon = ({
 export const ConfluenceIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={confluenceSVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size + 4}
+    className={`${className} -m-0.5`}
+    src={confluenceSVG}
+  />
+);
 
 export const OCIStorageIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={OCIStorageSVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size + 4}
+    className={`${className} -m-0.5`}
+    src={OCIStorageSVG}
+  />
+);
 
 export const JiraIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  // Jira Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={jiraSVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size + 4} className={`${className} -m-0.5`} src={jiraSVG} />
+);
 
 export const ZulipIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={zulipIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={zulipIcon} />;
 
 export const OpenAIIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={openAISVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={openAISVG} />;
 
 export const VoyageIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={voyageIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={voyageIcon} />
+);
 
 export const GoogleIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={googleIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={googleIcon} />
+);
 
 export const CohereIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={cohereIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={cohereIcon} />
+);
 
 export const GoogleStorageIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={googleCloudStorageIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size + 4}
+    className={`${className} -m-0.5`}
+    src={googleCloudStorageIcon}
+  />
+);
 
 export const ProductboardIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Productboard.webp" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Productboard.webp" />
+);
 
 export const AWSIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // Linear Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={awsWEBP} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={awsWEBP} />;
 
 export const AzureIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // Linear Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={azureIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={azureIcon} />;
 
 export const LinearIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // Linear Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={linearIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={linearIcon} />
+);
 
 export const SlabIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src="/SlabLogo.png" alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src="/SlabLogo.png" />
 );
 
 export const NotionIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Notion.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Notion.png" />
+);
 
 export const GuruIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={guruIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={guruIcon} />;
 
 export const RequestTrackerIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={requestTrackerIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={requestTrackerIcon} />
 );
 
 export const SalesforceIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={salesforceIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={salesforceIcon} />
 );
 
 export const R2Icon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={r2Icon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={r2Icon} />;
 
 export const S3Icon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={s3Icon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={s3Icon} />;
 
 export const SharepointIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={sharepointIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={sharepointIcon} />
 );
 
 export const TeamsIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={teamsIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={teamsIcon} />;
 
 export const GongIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={gongIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={gongIcon} />;
 
 export const HubSpotIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // HubSpot Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={hubSpotIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={hubSpotIcon} />
+);
 
 export const Document360Icon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={document360Icon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={document360Icon} />
+);
 
 export const GoogleSitesIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={googleSitesIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={googleSitesIcon} />
+);
 
 export const ZendeskIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={zendeskIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={zendeskIcon} />
 );
 
 export const DropboxIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={dropboxIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={dropboxIcon} />
 );
 
 export const DiscourseIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={discourseIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={discourseIcon} />
 );
 
 export const AxeroIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src="/Axero.jpeg" alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src="/Axero.jpeg" />
 );
 
 export const ClickupIcon = ({
   size = 16,
   className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={clickupIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={clickupIcon} />
+);
 
 export const MediaWikiIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={mediawikiIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={mediawikiIcon} />
 );
 
 export const WikipediaIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={wikipediaIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={wikipediaIcon} />
 );
 
+export const XenforoIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={xenforoIcon} />
+);
+
+export const AsanaIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => <LogoIcon size={size} className={className} src={asanaIcon} />;
+
 /* 
 EE Icons
 */
@@ -2836,29 +2573,3 @@ export const WindowsIcon = ({
     </svg>
   );
 };
-
-export const XenforoIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={xenforoIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
-
-export const AsanaIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={asanaIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
diff --git a/web/src/components/resizable/ResizableSection.tsx b/web/src/components/resizable/ResizableSection.tsx
index 98a877792..0591555d8 100644
--- a/web/src/components/resizable/ResizableSection.tsx
+++ b/web/src/components/resizable/ResizableSection.tsx
@@ -41,7 +41,7 @@ export function ResizableSection({
     Cookies.set(DOCUMENT_SIDEBAR_WIDTH_COOKIE_NAME, newWidth.toString(), {
       path: "/",
     });
-  }, [minWidth, maxWidth]);
+  }, [minWidth, maxWidth, width]);
 
   const startResizing = (mouseDownEvent: React.MouseEvent<HTMLDivElement>) => {
     setIsResizing(true);
diff --git a/web/src/components/search/SearchBar.tsx b/web/src/components/search/SearchBar.tsx
index d268367bd..df6f45eac 100644
--- a/web/src/components/search/SearchBar.tsx
+++ b/web/src/components/search/SearchBar.tsx
@@ -178,10 +178,10 @@ export const FullSearchBar = ({
         suppressContentEditableWarning={true}
       />
       <div
-        className={`flex flex-nowrap overflow-y-hidden ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full max-w-full items-center space-x-3 py-3 px-4`}
+        className={`flex flex-nowrap ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full max-w-full items-center space-x-3 py-3 px-4`}
       >
         <div
-          className={`-my-1 overflow-x-scroll flex-grow 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}
+          className={`-my-1 flex-grow 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}
         >
           {(ccPairs.length > 0 || documentSets.length > 0) && (
             <HorizontalSourceSelector
diff --git a/web/src/components/search/SearchResultsDisplay.tsx b/web/src/components/search/SearchResultsDisplay.tsx
index 4be28c9e8..7f1036050 100644
--- a/web/src/components/search/SearchResultsDisplay.tsx
+++ b/web/src/components/search/SearchResultsDisplay.tsx
@@ -73,7 +73,7 @@ export const SearchResultsDisplay = ({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, []);
+  }, [performSweep, agenticResults]);
 
   if (!searchResponse) {
     return null;
diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
index 4e8ea0abd..a9641511a 100644
--- a/web/src/components/search/SearchSection.tsx
+++ b/web/src/components/search/SearchSection.tsx
@@ -140,7 +140,8 @@ export const SearchSection = ({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, []);
+  }, [toggleAgentic]);
+
   const [isFetching, setIsFetching] = useState(false);
 
   // Search Type
@@ -522,7 +523,7 @@ export const SearchSection = ({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [router]);
+  }, [router, toggleSidebar]);
 
   useEffect(() => {
     if (settings?.isMobile) {
diff --git a/web/src/components/search/filtering/FilterDropdown.tsx b/web/src/components/search/filtering/FilterDropdown.tsx
index 71fcf84b3..444382fc7 100644
--- a/web/src/components/search/filtering/FilterDropdown.tsx
+++ b/web/src/components/search/filtering/FilterDropdown.tsx
@@ -41,7 +41,8 @@ export function FilterDropdown({
               flex-col 
               ${dropdownWidth || width}
               max-h-96 
-              overflow-y-scroll 
+              overflow-y-scroll
+              overscroll-contain
               `}
           >
             {options.map((option, ind) => {