From dd5db8acc1e7d5cec2e6ed2dddac58348734a660 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Fri, 3 Oct 2025 17:18:38 -0500
Subject: [PATCH] cleaning up search override functionality

---
 .../components/knowledge-filter-panel.tsx     |  2 ++
 frontend/src/app/knowledge/page.tsx           | 34 +++++++++++++++++--
 frontend/src/components/layout-wrapper.tsx    |  2 +-
 .../src/contexts/knowledge-filter-context.tsx |  8 ++++-
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index a45304e9..e8c26e37 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -50,6 +50,7 @@ export const filterAccentClasses: Record<FilterColor, string> = {
 
 export function KnowledgeFilterPanel() {
   const {
+    queryOverride,
     selectedFilter,
     parsedFilterData,
     setSelectedFilter,
@@ -320,6 +321,7 @@ export function KnowledgeFilterPanel() {
               className="font-mono placeholder:font-mono"
               onChange={(e) => setQuery(e.target.value)}
               rows={2}
+              disabled={!!queryOverride}
             />
           </div>
 
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 9e135ddd..1cbc7563 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -2,12 +2,13 @@
 
 import { themeQuartz, type ColDef } from "ag-grid-community";
 import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
-import { Cloud, FileIcon, Search, X } from "lucide-react";
+import { ArrowRight, Cloud, FileIcon, Search, X } from "lucide-react";
 import { useRouter } from "next/navigation";
 import {
   type ChangeEvent,
   FormEvent,
   useCallback,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -28,6 +29,7 @@ import { filterAccentClasses } from "@/components/knowledge-filter-panel";
 import GoogleDriveIcon from "../settings/icons/google-drive-icon";
 import OneDriveIcon from "../settings/icons/one-drive-icon";
 import SharePointIcon from "../settings/icons/share-point-icon";
+import { cn } from "@/lib/utils";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
@@ -244,6 +246,11 @@ function SearchPage() {
     }
   };
 
+  // Reset the query text when the selected filter changes
+  useEffect(() => {
+    setSearchQueryInput(queryOverride);
+  }, [queryOverride]);
+
   return (
     <>
       <div className="flex flex-col h-full">
@@ -257,7 +264,7 @@ function SearchPage() {
             className="flex flex-1 gap-3 max-w-full"
             onSubmit={handleSearch}
           >
-            <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem] max-w-[min(640px,100%)] min-w-[100px]">
+            <div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem] max-w-[min(640px,100%)] min-w-[100px]">
               {selectedFilter?.name && (
                 <div
                   title={selectedFilter?.name}
@@ -288,6 +295,29 @@ function SearchPage() {
                   setSearchQueryInput(e.target.value)
                 }
               />
+              {queryOverride && (
+                <Button
+                  variant="ghost"
+                  className="h-full !px-1.5 !py-0"
+                  type="button"
+                  onClick={() => {
+                    setSearchQueryInput("");
+                    setQueryOverride("");
+                  }}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                className={cn(
+                  "h-full !px-1.5 !py-0 hidden group-focus-within/input:block",
+                  searchQueryInput && "block"
+                )}
+                type="submit"
+              >
+                <ArrowRight className="h-4 w-4" />
+              </Button>
             </div>
             {/* <Button
               type="submit"
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index c15f697d..38043e70 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -126,7 +126,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
       </header>
       <div
         className={cn(
-          "app-grid-cols-arrangement group",
+          "app-grid-cols-arrangement",
           isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
           isMenuOpen && "notifications-open"
         )}
diff --git a/frontend/src/contexts/knowledge-filter-context.tsx b/frontend/src/contexts/knowledge-filter-context.tsx
index 1e23fdf0..eebf355a 100644
--- a/frontend/src/contexts/knowledge-filter-context.tsx
+++ b/frontend/src/contexts/knowledge-filter-context.tsx
@@ -5,6 +5,7 @@ import React, {
   createContext,
   type ReactNode,
   useContext,
+  useEffect,
   useState,
 } from "react";
 
@@ -75,7 +76,7 @@ export function KnowledgeFilterProvider({
     useState<ParsedQueryData | null>(null);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const [createMode, setCreateMode] = useState(false);
-  const [queryOverride, setQueryOverride] = useState('');
+  const [queryOverride, setQueryOverride] = useState("");
 
   const setSelectedFilter = (filter: KnowledgeFilter | null) => {
     setSelectedFilterState(filter);
@@ -139,6 +140,11 @@ export function KnowledgeFilterProvider({
     setCreateMode(false);
   };
 
+  // Clear the search override when we change filters
+  useEffect(() => {
+    setQueryOverride("");
+  }, [selectedFilter]);
+
   const value: KnowledgeFilterContextType = {
     selectedFilter,
     parsedFilterData,