From 495aa5d5fa808b5e872f56c248f06db92b707888 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 14 Nov 2025 21:49:06 +0000
Subject: [PATCH 1/2] Initial plan


From e95960cfd3b031b8a3d6df90f006abe8a835a4bc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 14 Nov 2025 21:56:55 +0000
Subject: [PATCH 2/2] Add text search functionality to prompts list

Co-authored-by: BitoviAI <226138784+BitoviAI@users.noreply.github.com>
---
 .../src/components/prompts/PromptsList.tsx    | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/prompts/PromptsList.tsx b/frontend/src/components/prompts/PromptsList.tsx
index 2897699..7c14f7f 100644
--- a/frontend/src/components/prompts/PromptsList.tsx
+++ b/frontend/src/components/prompts/PromptsList.tsx
@@ -1,12 +1,15 @@
+import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
 import { PromptCard } from './PromptCard';
 import { usePrompts, useConnectionStatuses } from '@/hooks/api';
-import { Loader2, AlertCircle } from 'lucide-react';
+import { Loader2, AlertCircle, Search } from 'lucide-react';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 
 export function PromptsList() {
   const { data: prompts, isLoading: promptsLoading, error: promptsError } = usePrompts();
   const { data: connectionStatuses, isLoading: connectionsLoading } = useConnectionStatuses();
+  const [searchQuery, setSearchQuery] = useState('');
 
   if (promptsLoading || connectionsLoading) {
     return (
@@ -48,6 +51,17 @@ export function PromptsList() {
   const promptList = prompts || [];
   const connections = connectionStatuses || [];
 
+  // Filter prompts based on search query
+  const filteredPrompts = promptList.filter((prompt) => {
+    if (!searchQuery.trim()) return true;
+    
+    const query = searchQuery.toLowerCase();
+    const name = prompt.name.toLowerCase();
+    const description = (prompt.description || prompt.messages[0]?.content || '').toLowerCase();
+    
+    return name.includes(query) || description.includes(query);
+  });
+
   return (
     <Card>
       <CardHeader>
@@ -57,15 +71,31 @@ export function PromptsList() {
             ({promptList.length})
           </span>
         </CardTitle>
+        <div className="mt-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder="Search prompts by name or description..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
       </CardHeader>
       <CardContent>
         {promptList.length === 0 ? (
           <div className="text-center py-8 text-muted-foreground">
             <p>No prompts available</p>
           </div>
+        ) : filteredPrompts.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <p>No prompts found matching "{searchQuery}"</p>
+          </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {promptList.map((prompt) => (
+            {filteredPrompts.map((prompt) => (
               <PromptCard
                 key={prompt.name}
                 prompt={prompt}