Put components in components directory + remove unused shortcut commands (#3909)

web/src/app/admin/documents/explorer/Explorer.tsx

@@ -17,7 +17,7 @@ import { DocumentUpdatedAtBadge } from "@/components/search/DocumentUpdatedAtBad
 import { DocumentSet } from "@/lib/types";
 import { SourceIcon } from "@/components/SourceIcon";
 import { Connector } from "@/lib/connectors/connectors";
-import { HorizontalFilters } from "@/app/chat/shared_chat_search/Filters";
+import { HorizontalFilters } from "@/components/filters/SourceSelector";
 
 const DocumentDisplay = ({
   document,

web/src/app/assistants/SidebarWrapper.tsx

@@ -10,16 +10,17 @@ import {
   useRef,
   useState,
 } from "react";
-import { useSidebarVisibility } from "@/components/chat_search/hooks";
-import FunctionalHeader from "@/components/chat_search/Header";
+import { useSidebarVisibility } from "@/components/chat/hooks";
+import FunctionalHeader from "@/components/chat/Header";
 import { useRouter } from "next/navigation";
 import { pageType } from "../chat/sessionSidebar/types";
-import FixedLogo from "../chat/shared_chat_search/FixedLogo";
+import FixedLogo from "../../components/logo/FixedLogo";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { useChatContext } from "@/components/context/ChatContext";
 import { HistorySidebar } from "../chat/sessionSidebar/HistorySidebar";
 import { useAssistants } from "@/components/context/AssistantsContext";
 import AssistantModal from "./mine/AssistantModal";
+import { useSidebarShortcut } from "@/lib/browserUtilities";
 
 interface SidebarWrapperProps<T extends object> {
   initiallyToggled: boolean;
@@ -71,23 +72,8 @@ export default function SidebarWrapper<T extends object>({
 
   const [showAssistantsModal, setShowAssistantsModal] = useState(false);
   const router = useRouter();
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.metaKey || event.ctrlKey) {
-        switch (event.key.toLowerCase()) {
-          case "e":
-            event.preventDefault();
-            toggleSidebar();
-            break;
-        }
-      }
-    };
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [router]);
+  useSidebarShortcut(router, toggleSidebar);
 
   return (
     <div className="flex relative overflow-x-hidden overscroll-contain flex-col w-full h-screen">

web/src/app/chat/ChatBanner.tsx

@@ -3,7 +3,7 @@
 import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { useContext, useState, useRef, useLayoutEffect } from "react";
 import { ChevronDownIcon } from "@/components/icons/icons";
-import { MinimalMarkdown } from "@/components/chat_search/MinimalMarkdown";
+import { MinimalMarkdown } from "@/components/chat/MinimalMarkdown";
 
 export function ChatBanner() {
   const settings = useContext(SettingsContext);

web/src/app/chat/ChatPage.tsx

@@ -89,16 +89,16 @@ import { useChatContext } from "@/components/context/ChatContext";
 import { v4 as uuidv4 } from "uuid";
 import { ChatPopup } from "./ChatPopup";
 
-import FunctionalHeader from "@/components/chat_search/Header";
-import { useSidebarVisibility } from "@/components/chat_search/hooks";
+import FunctionalHeader from "@/components/chat/Header";
+import { useSidebarVisibility } from "@/components/chat/hooks";
 import {
   PRO_SEARCH_TOGGLED_COOKIE_NAME,
   SIDEBAR_TOGGLED_COOKIE_NAME,
 } from "@/components/resizable/constants";
-import FixedLogo from "./shared_chat_search/FixedLogo";
+import FixedLogo from "../../components/logo/FixedLogo";
 
 import { DeleteEntityModal } from "../../components/modals/DeleteEntityModal";
-import { MinimalMarkdown } from "@/components/chat_search/MinimalMarkdown";
+import { MinimalMarkdown } from "@/components/chat/MinimalMarkdown";
 import ExceptionTraceModal from "@/components/modals/ExceptionTraceModal";
 
 import {
@@ -108,10 +108,10 @@ import {
 } from "./tools/constants";
 import { useUser } from "@/components/user/UserProvider";
 import { ApiKeyModal } from "@/components/llm/ApiKeyModal";
-import BlurBackground from "./shared_chat_search/BlurBackground";
+import BlurBackground from "../../components/chat/BlurBackground";
 import { NoAssistantModal } from "@/components/modals/NoAssistantModal";
 import { useAssistants } from "@/components/context/AssistantsContext";
-import TextView from "@/components/chat_search/TextView";
+import TextView from "@/components/chat/TextView";
 import { Modal } from "@/components/Modal";
 import { useSendMessageToParent } from "@/lib/extension/utils";
 import {
@@ -124,6 +124,11 @@ import { UserSettingsModal } from "./modal/UserSettingsModal";
 import { AlignStartVertical } from "lucide-react";
 import { AgenticMessage } from "./message/AgenticMessage";
 import AssistantModal from "../assistants/mine/AssistantModal";
+import {
+  OperatingSystem,
+  useOperatingSystem,
+  useSidebarShortcut,
+} from "@/lib/browserUtilities";
 
 const TEMP_USER_MESSAGE_ID = -1;
 const TEMP_ASSISTANT_MESSAGE_ID = -2;
@@ -2052,24 +2057,7 @@ export function ChatPage({
     llmOverrideManager.updateImageFilesPresent(imageFileInMessageHistory);
   }, [imageFileInMessageHistory]);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.metaKey || event.ctrlKey) {
-        switch (event.key.toLowerCase()) {
-          case "e":
-            event.preventDefault();
-            toggleSidebar();
-            break;
-        }
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router]);
+  useSidebarShortcut(router, toggleSidebar);
 
   const [sharedChatSession, setSharedChatSession] =
     useState<ChatSession | null>();

web/src/app/chat/WrappedChat.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useChatContext } from "@/components/context/ChatContext";
 import { ChatPage } from "./ChatPage";
-import FunctionalWrapper from "./shared_chat_search/FunctionalWrapper";
+import FunctionalWrapper from "../../components/chat/FunctionalWrapper";
 
 export default function WrappedChat({
   firstMessage,

web/src/app/chat/input/ChatInputBar.tsx

@@ -24,7 +24,7 @@ import {
 } from "@/components/ui/tooltip";
 import { Hoverable } from "@/components/Hoverable";
 import { ChatState } from "../types";
-import UnconfiguredProviderText from "@/components/chat_search/UnconfiguredProviderText";
+import UnconfiguredProviderText from "@/components/chat/UnconfiguredProviderText";
 import { useAssistants } from "@/components/context/AssistantsContext";
 import { CalendarIcon, TagIcon, XIcon } from "lucide-react";
 import { FilterPopup } from "@/components/search/filtering/FilterPopup";

web/src/app/chat/message/Messages.tsx

@@ -64,9 +64,7 @@ import { MemoizedAnchor, MemoizedParagraph } from "./MemoizedTextComponents";
 import { extractCodeText, preprocessLaTeX } from "./codeUtils";
 import ToolResult from "../../../components/tools/ToolResult";
 import CsvContent from "../../../components/tools/CSVContent";
-import SourceCard, {
-  SeeMoreBlock,
-} from "@/components/chat_search/sources/SourceCard";
+import SourceCard, { SeeMoreBlock } from "@/components/chat/sources/SourceCard";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import "katex/dist/katex.min.css";

web/src/app/chat/message/SourcesDisplay.tsx

@@ -1,9 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { OnyxDocument } from "@/lib/search/interfaces";
-import {
-  ResultIcon,
-  SeeMoreBlock,
-} from "@/components/chat_search/sources/SourceCard";
+import { ResultIcon, SeeMoreBlock } from "@/components/chat/sources/SourceCard";
 import { openDocument } from "@/lib/search/utils";
 import { buildDocumentSummaryDisplay } from "@/components/search/DocumentDisplay";
 import { ValidSources } from "@/lib/types";

web/src/app/chat/message/SubQuestionsDisplay.tsx

@@ -9,7 +9,7 @@ import { FiSearch } from "react-icons/fi";
 import { OnyxDocument } from "@/lib/search/interfaces";
 import { BaseQuestionIdentifier, SubQuestionDetail } from "../interfaces";
 import { SourceChip2 } from "../input/ChatInputBar";
-import { ResultIcon } from "@/components/chat_search/sources/SourceCard";
+import { ResultIcon } from "@/components/chat/sources/SourceCard";
 import { openDocument } from "@/lib/search/utils";
 import { SourcesDisplay } from "./SourcesDisplay";
 import ReactMarkdown from "react-markdown";

web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx

@@ -17,11 +17,11 @@ import { OnyxInitializingLoader } from "@/components/OnyxInitializingLoader";
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { Button } from "@/components/ui/button";
 import { OnyxDocument } from "@/lib/search/interfaces";
-import TextView from "@/components/chat_search/TextView";
+import TextView from "@/components/chat/TextView";
 import { DocumentResults } from "../../documentSidebar/DocumentResults";
 import { Modal } from "@/components/Modal";
-import FunctionalHeader from "@/components/chat_search/Header";
-import FixedLogo from "../../shared_chat_search/FixedLogo";
+import FunctionalHeader from "@/components/chat/Header";
+import FixedLogo from "../../../../components/logo/FixedLogo";
 import { useRouter } from "next/navigation";
 
 function BackToOnyxButton({

web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-import React, { ReactNode, useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-
-export default function FunctionalWrapper({
-  initiallyToggled,
-  content,
-}: {
-  content: (
-    toggledSidebar: boolean,
-    toggle: (toggled?: boolean) => void
-  ) => ReactNode;
-  initiallyToggled: boolean;
-}) {
-  const router = useRouter();
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.metaKey || event.ctrlKey) {
-        const newPage = event.shiftKey;
-        switch (event.key.toLowerCase()) {
-          case "d":
-            event.preventDefault();
-            if (newPage) {
-              window.open("/chat", "_blank");
-            } else {
-              router.push("/chat");
-            }
-            break;
-          case "s":
-            event.preventDefault();
-            if (newPage) {
-              window.open("/search", "_blank");
-            } else {
-              router.push("/search");
-            }
-            break;
-        }
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [router]);
-
-  const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
-
-  const toggle = (value?: boolean) => {
-    setToggledSidebar((toggledSidebar) =>
-      value !== undefined ? value : !toggledSidebar
-    );
-  };
-
-  return (
-    <>
-      {" "}
-      <div className="overscroll-y-contain overflow-y-scroll overscroll-contain left-0 top-0 w-full h-svh">
-        {content(toggledSidebar, toggle)}
-      </div>
-    </>
-  );
-}

web/src/components/UserDropdown.tsx

@@ -15,7 +15,7 @@ import { NavigationItem, Notification } from "@/app/admin/settings/interfaces";
 import DynamicFaIcon, { preloadIcons } from "./icons/DynamicFaIcon";
 import { useUser } from "./user/UserProvider";
 import { usePaidEnterpriseFeaturesEnabled } from "./settings/usePaidEnterpriseFeaturesEnabled";
-import { Notifications } from "./chat_search/Notifications";
+import { Notifications } from "./chat/Notifications";
 import useSWR from "swr";
 import { errorHandlingFetcher } from "@/lib/fetcher";
 

web/src/components/admin/connectors/AdminSidebar.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/tooltip";
 import { CgArrowsExpandUpLeft } from "react-icons/cg";
 import LogoWithText from "@/components/header/LogoWithText";
-import { LogoComponent } from "@/app/chat/shared_chat_search/FixedLogo";
+import { LogoComponent } from "@/components/logo/FixedLogo";
 
 interface Item {
   name: string | JSX.Element;

web/src/components/chat/FunctionalWrapper.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React, { ReactNode, useState } from "react";
+
+export default function FunctionalWrapper({
+  initiallyToggled,
+  content,
+}: {
+  content: (
+    toggledSidebar: boolean,
+    toggle: (toggled?: boolean) => void
+  ) => ReactNode;
+  initiallyToggled: boolean;
+}) {
+  const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
+
+  const toggle = (value?: boolean) => {
+    setToggledSidebar((toggledSidebar) =>
+      value !== undefined ? value : !toggledSidebar
+    );
+  };
+
+  return (
+    <>
+      <div className="overscroll-y-contain overflow-y-scroll overscroll-contain left-0 top-0 w-full h-svh">
+        {content(toggledSidebar, toggle)}
+      </div>
+    </>
+  );
+}

web/src/components/context/AppProvider.tsx

@@ -1,6 +1,6 @@
 import { CombinedSettings } from "@/app/admin/settings/interfaces";
 import { UserProvider } from "../user/UserProvider";
-import { ProviderContextProvider } from "../chat_search/ProviderContext";
+import { ProviderContextProvider } from "../chat/ProviderContext";
 import { SettingsProvider } from "../settings/SettingsProvider";
 import { AssistantsProvider } from "./AssistantsContext";
 import { Persona } from "@/app/admin/assistants/interfaces";

web/src/components/filters/SourceSelector.tsx

@@ -1,14 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import { DocumentSet, Tag, ValidSources } from "@/lib/types";
 import { SourceMetadata } from "@/lib/search/interfaces";
-import {
-  GearIcon,
-  InfoIcon,
-  MinusIcon,
-  PlusCircleIcon,
-  PlusIcon,
-  defaultTailwindCSS,
-} from "@/components/icons/icons";
+import { InfoIcon, defaultTailwindCSS } from "@/components/icons/icons";
 import { HoverPopup } from "@/components/HoverPopup";
 import {
   FiBook,
@@ -27,7 +20,7 @@ import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverTrigger } from "@/components/ui/popover";
 import { PopoverContent } from "@radix-ui/react-popover";
 import { CalendarIcon } from "lucide-react";
-import { buildDateString, getTimeAgoString } from "@/lib/dateUtils";
+import { getTimeAgoString } from "@/lib/dateUtils";
 import { Separator } from "@/components/ui/separator";
 import { FilterDropdown } from "@/components/search/filtering/FilterDropdown";
 

web/src/components/header/LogoWithText.tsx

@@ -12,7 +12,7 @@ import {
 import { pageType } from "@/app/chat/sessionSidebar/types";
 import { Logo } from "../logo/Logo";
 import Link from "next/link";
-import { LogoComponent } from "@/app/chat/shared_chat_search/FixedLogo";
+import { LogoComponent } from "@/components/logo/FixedLogo";
 
 export default function LogoWithText({
   toggleSidebar,

web/src/components/initialSetup/welcome/WelcomeModal.tsx

@@ -11,7 +11,7 @@ import { ApiKeyForm } from "@/components/llm/ApiKeyForm";
 import { WellKnownLLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
 import { checkLlmProvider } from "./lib";
 import { User } from "@/lib/types";
-import { useProviderStatus } from "@/components/chat_search/ProviderContext";
+import { useProviderStatus } from "@/components/chat/ProviderContext";
 
 import { usePopup } from "@/components/admin/connectors/Popup";
 

web/src/components/llm/ApiKeyModal.tsx

@@ -3,7 +3,7 @@
 import { ApiKeyForm } from "./ApiKeyForm";
 import { Modal } from "../Modal";
 import { useRouter } from "next/navigation";
-import { useProviderStatus } from "../chat_search/ProviderContext";
+import { useProviderStatus } from "../chat/ProviderContext";
 import { PopupSpec } from "../admin/connectors/Popup";
 
 export const ApiKeyModal = ({

web/src/components/search/DocumentDisplay.tsx

@@ -18,7 +18,7 @@ import { FiTag } from "react-icons/fi";
 import { SettingsContext } from "../settings/SettingsProvider";
 import { CustomTooltip, TooltipGroup } from "../tooltip/CustomTooltip";
 import { WarningCircle } from "@phosphor-icons/react";
-import TextView from "../chat_search/TextView";
+import TextView from "../chat/TextView";
 import { openDocument } from "@/lib/search/utils";
 import { SubQuestionDetail } from "@/app/chat/interfaces";
 

web/src/components/search/results/AnswerSection.tsx

@@ -1,6 +1,6 @@
 import { Quote } from "@/lib/search/interfaces";
 import { ResponseSection, StatusOptions } from "./ResponseSection";
-import { MinimalMarkdown } from "@/components/chat_search/MinimalMarkdown";
+import { MinimalMarkdown } from "@/components/chat/MinimalMarkdown";
 
 const TEMP_STRING = "__$%^TEMP$%^__";
 

web/src/lib/browserUtilities.tsx

@@ -3,27 +3,55 @@
 import { MacIcon, WindowsIcon } from "@/components/icons/icons";
 import { useState, useEffect } from "react";
 
-type OperatingSystem = "Windows" | "Mac" | "Other";
+export enum OperatingSystem {
+  Windows = "Windows",
+  Mac = "Mac",
+  Other = "Other",
+}
 
-const useOperatingSystem = (): OperatingSystem => {
-  const [os, setOS] = useState<OperatingSystem>("Other");
+export const useOperatingSystem = (): OperatingSystem => {
+  const [os, setOS] = useState<OperatingSystem>(OperatingSystem.Other);
 
   useEffect(() => {
     const userAgent = window.navigator.userAgent.toLowerCase();
     if (userAgent.includes("win")) {
-      setOS("Windows");
+      setOS(OperatingSystem.Windows);
     } else if (userAgent.includes("mac")) {
-      setOS("Mac");
+      setOS(OperatingSystem.Mac);
     }
   }, []);
 
   return os;
 };
 
+// Use this to handle the sidebar shortcut for the chat page
+// The shortcut is Ctrl+E on Windows/Linux and Cmd+E on Mac
+// This hook handles the keyboard event and toggles the sidebar
+export const useSidebarShortcut = (router: any, toggleSidebar: () => void) => {
+  const os = useOperatingSystem();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isMac = os === OperatingSystem.Mac;
+      const modifierKey = isMac ? event.metaKey : event.ctrlKey;
+
+      if (modifierKey && event.key.toLowerCase() === "e") {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [router, toggleSidebar, os]);
+};
+
 const KeyboardSymbol = () => {
   const os = useOperatingSystem();
 
-  if (os === "Windows") {
+  if (os === OperatingSystem.Windows) {
     return <WindowsIcon size={12} />;
   } else {
     return <MacIcon size={12} />;