feat: Add intelligent auto-router and enhanced integrations
- Add intelligent-router.sh hook for automatic agent routing - Add AUTO-TRIGGER-SUMMARY.md documentation - Add FINAL-INTEGRATION-SUMMARY.md documentation - Complete Prometheus integration (6 commands + 4 tools) - Complete Dexto integration (12 commands + 5 tools) - Enhanced Ralph with access to all agents - Fix /clawd command (removed disable-model-invocation) - Update hooks.json to v5 with intelligent routing - 291 total skills now available - All 21 commands with automatic routing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
389
dexto/packages/webui/components/SearchPanel.tsx
Normal file
389
dexto/packages/webui/components/SearchPanel.tsx
Normal file
@@ -0,0 +1,389 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
import {
|
||||
useSearchMessages,
|
||||
useSearchSessions,
|
||||
type SearchResult,
|
||||
type SessionSearchResult,
|
||||
} from './hooks/useSearch';
|
||||
import { formatDate, formatTime } from '@/lib/date-utils';
|
||||
import { Button } from './ui/button';
|
||||
import { Badge } from './ui/badge';
|
||||
import { Input } from './ui/input';
|
||||
import { Dialog, DialogContent } from './ui/dialog';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import {
|
||||
Search,
|
||||
MessageSquare,
|
||||
Clock,
|
||||
User,
|
||||
Bot,
|
||||
Settings,
|
||||
X,
|
||||
ChevronRight,
|
||||
AlertTriangle,
|
||||
RefreshCw,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Alert, AlertDescription } from './ui/alert';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
|
||||
interface SearchPanelProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onNavigateToSession: (sessionId: string, messageIndex?: number) => void;
|
||||
variant?: 'inline' | 'modal' | 'popover';
|
||||
}
|
||||
|
||||
type SearchMode = 'messages' | 'sessions';
|
||||
|
||||
export default function SearchPanel({
|
||||
isOpen,
|
||||
onClose,
|
||||
onNavigateToSession,
|
||||
variant = 'modal',
|
||||
}: SearchPanelProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [debouncedQuery] = useDebounce(searchQuery, 300);
|
||||
const [searchMode, setSearchMode] = useState<SearchMode>('messages');
|
||||
const [roleFilter, setRoleFilter] = useState<string>('all');
|
||||
const [sessionFilter, setSessionFilter] = useState<string>('');
|
||||
|
||||
// Use TanStack Query hooks for search
|
||||
const {
|
||||
data: messageData,
|
||||
isLoading: messageLoading,
|
||||
error: messageError,
|
||||
} = useSearchMessages(
|
||||
debouncedQuery,
|
||||
sessionFilter || undefined,
|
||||
20,
|
||||
isOpen && searchMode === 'messages'
|
||||
);
|
||||
|
||||
const {
|
||||
data: sessionData,
|
||||
isLoading: sessionLoading,
|
||||
error: sessionError,
|
||||
} = useSearchSessions(debouncedQuery, isOpen && searchMode === 'sessions');
|
||||
|
||||
// Derive state from query results
|
||||
const messageResults = messageData?.results || [];
|
||||
const sessionResults = sessionData?.results || [];
|
||||
const isLoading = searchMode === 'messages' ? messageLoading : sessionLoading;
|
||||
const error = searchMode === 'messages' ? messageError : sessionError;
|
||||
const total = searchMode === 'messages' ? messageData?.total || 0 : sessionData?.total || 0;
|
||||
|
||||
const handleResultClick = (result: SearchResult) => {
|
||||
onNavigateToSession(result.sessionId, result.messageIndex);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSessionResultClick = (sessionResult: SessionSearchResult) => {
|
||||
onNavigateToSession(sessionResult.sessionId, sessionResult.firstMatch.messageIndex);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const getRoleIcon = (role: string) => {
|
||||
switch (role) {
|
||||
case 'user':
|
||||
return <User className="w-4 h-4" />;
|
||||
case 'assistant':
|
||||
return <Bot className="w-4 h-4" />;
|
||||
case 'system':
|
||||
return <Settings className="w-4 h-4" />;
|
||||
default:
|
||||
return <MessageSquare className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleColor = (role: string) => {
|
||||
switch (role) {
|
||||
case 'user':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
case 'assistant':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'system':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const highlightText = (text: string, query: string) => {
|
||||
if (!query) return text;
|
||||
|
||||
const regex = new RegExp(`(${query})`, 'gi');
|
||||
const parts = text.split(regex);
|
||||
|
||||
return parts.map((part, index) =>
|
||||
regex.test(part) ? (
|
||||
<mark key={index} className="bg-yellow-200 font-medium">
|
||||
{part}
|
||||
</mark>
|
||||
) : (
|
||||
part
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const content = (
|
||||
<div className={cn('flex flex-col h-full', variant === 'modal' && 'min-h-[600px]')}>
|
||||
{/* Search Input - moved to top for better UX */}
|
||||
<div className="p-4 border-b border-border/50 space-y-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search conversations..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Search Mode Toggle */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={searchMode === 'messages' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSearchMode('messages')}
|
||||
className="flex-1"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 mr-2" />
|
||||
Messages
|
||||
</Button>
|
||||
<Button
|
||||
variant={searchMode === 'sessions' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSearchMode('sessions')}
|
||||
className="flex-1"
|
||||
>
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Sessions
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters for message search */}
|
||||
{searchMode === 'messages' && (
|
||||
<div className="flex gap-2">
|
||||
<Select value={roleFilter} onValueChange={setRoleFilter}>
|
||||
<SelectTrigger className="w-28">
|
||||
<SelectValue placeholder="Role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
<SelectItem value="user">User</SelectItem>
|
||||
<SelectItem value="assistant">Assistant</SelectItem>
|
||||
<SelectItem value="system">System</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
placeholder="Session ID (optional)"
|
||||
value={sessionFilter}
|
||||
onChange={(e) => setSessionFilter(e.target.value)}
|
||||
className="flex-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{error && (
|
||||
<div className="p-4">
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error?.message || 'Search failed'}</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ScrollArea className="h-full">
|
||||
<div className="p-4">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<RefreshCw className="h-6 w-6 animate-spin mr-2" />
|
||||
<div className="text-muted-foreground">Searching...</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Results Summary */}
|
||||
{searchQuery && (
|
||||
<div className="mb-4 text-sm text-muted-foreground">
|
||||
{total > 0 ? (
|
||||
<>
|
||||
Found {total}{' '}
|
||||
{searchMode === 'messages'
|
||||
? 'messages'
|
||||
: 'sessions'}{' '}
|
||||
matching "{searchQuery}"
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
No{' '}
|
||||
{searchMode === 'messages'
|
||||
? 'messages'
|
||||
: 'sessions'}{' '}
|
||||
found matching "{searchQuery}"
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Message Results */}
|
||||
{searchMode === 'messages' && messageResults.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{messageResults.map((result, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-3 rounded-lg border border-border/50 bg-card hover:bg-muted/50 transition-all cursor-pointer"
|
||||
onClick={() => handleResultClick(result)}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
className={cn(
|
||||
'text-xs',
|
||||
getRoleColor(result.message.role)
|
||||
)}
|
||||
>
|
||||
{getRoleIcon(result.message.role)}
|
||||
<span className="ml-1 capitalize">
|
||||
{result.message.role}
|
||||
</span>
|
||||
</Badge>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Session: {result.sessionId.slice(0, 8)}
|
||||
...
|
||||
</span>
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div className="text-sm">
|
||||
{highlightText(result.context, searchQuery)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Session Results */}
|
||||
{searchMode === 'sessions' && sessionResults.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{sessionResults.map((sessionResult, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-3 rounded-lg border border-border/50 bg-card hover:bg-muted/50 transition-all cursor-pointer"
|
||||
onClick={() =>
|
||||
handleSessionResultClick(sessionResult)
|
||||
}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="font-medium">
|
||||
{sessionResult.sessionId.slice(0, 12)}
|
||||
...
|
||||
</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs"
|
||||
>
|
||||
{sessionResult.matchCount} matches
|
||||
</Badge>
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground mb-2">
|
||||
{sessionResult.metadata.messageCount} messages •
|
||||
Created{' '}
|
||||
{formatDate(sessionResult.metadata.createdAt)} •
|
||||
Last active{' '}
|
||||
{formatTime(
|
||||
sessionResult.metadata.lastActivity
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-sm">
|
||||
{highlightText(
|
||||
sessionResult.firstMatch.context,
|
||||
searchQuery
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Results */}
|
||||
{searchQuery &&
|
||||
!isLoading &&
|
||||
(searchMode === 'messages'
|
||||
? messageResults.length === 0
|
||||
: sessionResults.length === 0) && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Search className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p>
|
||||
No{' '}
|
||||
{searchMode === 'messages'
|
||||
? 'messages'
|
||||
: 'sessions'}{' '}
|
||||
found matching your search.
|
||||
</p>
|
||||
<p className="text-sm mt-2">
|
||||
Try adjusting your search terms or filters.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!searchQuery && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Search className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p>Start typing to search through your conversations.</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (variant === 'inline') {
|
||||
return <div className="h-full flex flex-col">{content}</div>;
|
||||
}
|
||||
|
||||
if (variant === 'popover') {
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
{/* Popover panel */}
|
||||
<div className="fixed left-4 top-4 z-50 w-[400px] max-h-[80vh] bg-popover/95 backdrop-blur-md border border-border/50 rounded-xl shadow-2xl overflow-hidden">
|
||||
<div className="flex items-center justify-between p-3 border-b border-border/50">
|
||||
<h3 className="text-sm font-medium">Search Chats</h3>
|
||||
<Button variant="ghost" size="sm" onClick={onClose} className="h-7 w-7 p-0">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="max-h-[calc(80vh-48px)] overflow-y-auto">{content}</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-w-2xl h-[80vh] p-0">{content}</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user