Feat: add search bar component

backend/app/services/mongo/query_builder.py

@@ -235,6 +235,9 @@ def main_doc_filter_tasks(self, prefix: str = "") -> Dict[str, object]:
             elif len(filters.sessions_ids) > 1:
                 match[f"{prefix}session_id"] = {"$in": filters.sessions_ids}
 
+        if filters.task_id_search is not None:
+            match[f"{prefix}id"] = {"$regex": filters.task_id_search}
+
         if filters.tasks_ids is not None:
             if len(filters.tasks_ids) == 1:
                 match[f"{prefix}id"] = filters.tasks_ids[0]
@@ -313,6 +316,9 @@ def main_doc_filter_sessions(self, prefix: str = "") -> Dict[str, object]:
             elif len(filters.tasks_ids) > 1:
                 match["task_id"] = {"$in": filters.tasks_ids}
 
+        if filters.session_id_search is not None:
+            match["id"] = {"$regex": filters.session_id_search}
+
         if match:
             self.pipeline.append({"$match": match})
 

phospho-python/phospho/models.py

@@ -769,6 +769,8 @@ class ProjectDataFilters(BaseModel):
     sessions_ids: Optional[List[str]] = None
     version_id: Optional[str] = None
     task_position: Optional[int] = None
+    task_id_search: Optional[str] = None
+    session_id_search: Optional[str] = None
 
 
 class Cluster(ProjectElementBaseModel):

platform/components/filters.tsx

@@ -27,6 +27,11 @@ import {
 } from "@/models/models";
 import { navigationStateStore } from "@/store/store";
 import { useUser } from "@propelauth/nextjs/client";
+import {
+  EyeClosedIcon,
+  EyeOpenIcon,
+  MagnifyingGlassIcon,
+} from "@radix-ui/react-icons";
 import {
   Annoyed,
   Boxes,
@@ -66,6 +71,10 @@ const FilterComponent = ({
 }) => {
   const setDataFilters = navigationStateStore((state) => state.setDataFilters);
   const dataFilters = navigationStateStore((state) => state.dataFilters);
+  const showSearchBar = navigationStateStore((state) => state.showSearchBar);
+  const setShowSearchBar = navigationStateStore(
+    (state) => state.setShowSearchBar,
+  );
   const { accessToken } = useUser();
 
   if (variant === "messages") {
@@ -175,7 +184,11 @@ const FilterComponent = ({
   const activeFilterCount =
     dataFilters &&
     Object.keys(dataFilters).filter(
-      (key) => key !== "created_at_start" && key !== "created_at_end",
+      (key) =>
+        key !== "created_at_start" &&
+        key !== "created_at_end" &&
+        key !== "task_id_search" &&
+        key !== "session_id_search",
     ).length;
 
   if (!selectedProject) {
@@ -935,6 +948,24 @@ const FilterComponent = ({
               </DropdownMenuSubContent>
             </DropdownMenuPortal>
           </DropdownMenuSub>
+          {/* Toggle search bar */}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => {
+              setShowSearchBar(!showSearchBar);
+            }}
+            className="flex justify-between items-center"
+          >
+            <div className="flex flex-row items-center">
+              <MagnifyingGlassIcon className="size-4 mr-2" />
+              Filter by id
+            </div>
+            {showSearchBar ? (
+              <EyeOpenIcon className="size-4 ml-2" />
+            ) : (
+              <EyeClosedIcon className="size-4 ml-2" />
+            )}
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

platform/components/search-bar.tsx

@@ -0,0 +1,100 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { navigationStateStore } from "@/store/store";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface SearchBarProps {
+  variant: "messages" | "sessions";
+}
+
+const SearchBar = ({ variant }: SearchBarProps) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const setDataFilters = navigationStateStore((state) => state.setDataFilters);
+  const dataFilters = navigationStateStore((state) => state.dataFilters);
+  const setTasksPagination = navigationStateStore(
+    (state) => state.setTasksPagination,
+  );
+  const showSearchBar = navigationStateStore((state) => state.showSearchBar);
+
+  // Update filters when search term changes
+  useEffect(() => {
+    const filterKey =
+      variant === "messages" ? "task_id_search" : "session_id_search";
+
+    const debounceTimeout = setTimeout(() => {
+      const newFilters = { ...dataFilters };
+
+      if (searchTerm.trim() !== "") {
+        newFilters[filterKey] = searchTerm;
+      } else {
+        delete newFilters[filterKey];
+      }
+
+      setDataFilters(newFilters);
+
+      setTasksPagination((prev) => ({
+        ...prev,
+        pageIndex: 0,
+      }));
+    }, 300);
+
+    return () => clearTimeout(debounceTimeout);
+  }, [searchTerm, variant, dataFilters, setDataFilters, setTasksPagination]);
+
+  // Initialize search term from filters only once when component mounts
+  useEffect(() => {
+    const filterKey =
+      variant === "messages" ? "task_id_search" : "session_id_search";
+    const currentFilter = dataFilters?.[filterKey];
+
+    if (currentFilter && searchTerm === "") {
+      setSearchTerm(currentFilter);
+    }
+    //  we don't want to run this effect on every render so no search term in the dependency array
+  }, [variant, dataFilters]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const clearSearch = () => {
+    setSearchTerm("");
+    const filterKey =
+      variant === "messages" ? "task_id_search" : "session_id_search";
+    const newFilters = { ...dataFilters };
+    delete newFilters[filterKey];
+    setDataFilters(newFilters);
+  };
+
+  if (!showSearchBar) {
+    return null;
+  }
+  return (
+    <div className="relative">
+      <Input
+        type="text"
+        placeholder={
+          variant === "messages"
+            ? "Search for a message ID..."
+            : "Search for a session ID..."
+        }
+        value={searchTerm}
+        onChange={handleInputChange}
+        className="pr-10"
+      />
+      {searchTerm && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 p-0"
+          onClick={clearSearch}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export { SearchBar };

platform/components/sessions/session.tsx

@@ -97,27 +97,31 @@ const SessionStats = ({
 
   return (
     <>
-      <div className="flex justify-between items-end">
-        <span className="text-xl font-bold tracking-tight">Session</span>
-        <div className="flex flex-row gap-x-2">
+      <div className="flex flex-wrap justify-between items-center mt-4 gap-4">
+        <span className="text-xl font-bold">Session</span>
+        <div className="flex flex-wrap gap-2">
           {showGoToSession && (
             <Link href={`/org/transcripts/sessions/${session_id}`}>
-              <Button variant="secondary">
+              <Button variant="secondary" className="whitespace-nowrap">
                 Go to Session
-                <ChevronRight />
+                <ChevronRight className="ml-1" />
               </Button>
             </Link>
           )}
           {uniqueUsers && uniqueUsers.length === 1 && (
             <Link href={`/org/transcripts/users/${uniqueUsers[0]}`}>
-              <Button variant="secondary">Go to User</Button>
+              <Button variant="secondary" className="whitespace-nowrap">
+                Go to User
+                <ChevronRight className="ml-1" />
+              </Button>
             </Link>
           )}
           {uniqueUsers && uniqueUsers?.length > 1 && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="secondary">
-                  Go to User... <ChevronDown />
+                <Button variant="secondary" className="whitespace-nowrap">
+                  Go to Users
+                  <ChevronDown className="ml-1" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
@@ -136,25 +140,31 @@ const SessionStats = ({
           )}
         </div>
       </div>
-      <Card className="flex flex-col space-y-1 p-2">
-        <div className="flex flex-row items-center">
-          <code className="bg-secondary p-1.5 text-xs">{session_id}</code>
-          <CopyButton text={session_id} className="ml-2" />
-        </div>
-        <div className="flex flex-row space-x-16">
-          <div className="text-xs max-w-48">
-            <span className="text-muted-foreground">Last message</span>
-            <InteractiveDatetime timestamp={sessionData?.last_message_ts} />
+      <Card className="p-2">
+        <div className="flex flex-row gap-4">
+          <div className="flex flex-wrap items-center gap-2">
+            <code className="bg-secondary p-1.5 text-xs break-all max-w-full">
+              {session_id}
+            </code>
+            <CopyButton text={session_id} />
           </div>
-          <div className="text-xs max-w-48">
+        </div>
+        <div className="flex flex-row gap-8">
+          {sessionData?.last_message_ts && (
+            <div className="text-xs max-w-[120px]">
+              <span className="text-muted-foreground">Last message</span>
+              <InteractiveDatetime timestamp={sessionData?.last_message_ts} />
+            </div>
+          )}
+          <div className="text-xs max-w-[120px]">
             <span className="text-muted-foreground">First message</span>
             <InteractiveDatetime timestamp={sessionData?.created_at} />
           </div>
           <div className="flex flex-col">
+            <span className="text-muted-foreground text-xs">Length</span>
             <div className="text-xl font-bold">
               {sessionData?.session_length}
             </div>
-            <span className="text-muted-foreground text-xs">Length</span>
           </div>
         </div>
         <div className="flex">

platform/components/sessions/sessions-table.tsx

@@ -4,6 +4,7 @@ import CreateEvent from "@/components/events/create-event";
 import RunEvent from "@/components/events/run-event";
 import FilterComponent from "@/components/filters";
 import RunAnalysisInPast from "@/components/run-analysis-past";
+import { SearchBar } from "@/components/search-bar";
 import { SessionPreview } from "@/components/sessions/session-preview";
 import { useColumns } from "@/components/sessions/sessions-table-columns";
 import { CenteredSpinner } from "@/components/small-spinner";
@@ -184,6 +185,7 @@ function SessionsTable({ forcedDataFilters }: DataTableProps) {
         </div>
         <TableNavigation table={table} />
       </div>
+      <SearchBar variant="sessions" />
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen} modal={false}>
         {sessionsWithEvents === undefined && <CenteredSpinner />}
         {sessionsWithEvents && (