b52318eeae
- 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>
92 lines
3.8 KiB
TypeScript
92 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { X, ArrowUp } from 'lucide-react';
|
|
import { Button } from './ui/button';
|
|
import type { QueuedMessage } from './hooks/useQueue';
|
|
import { isTextPart } from '../types';
|
|
|
|
interface QueuedMessagesDisplayProps {
|
|
messages: QueuedMessage[];
|
|
onEditMessage: (message: QueuedMessage) => void;
|
|
onRemoveMessage: (messageId: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Displays queued messages with visual indicators and keyboard hints.
|
|
*/
|
|
export function QueuedMessagesDisplay({
|
|
messages,
|
|
onEditMessage,
|
|
onRemoveMessage,
|
|
}: QueuedMessagesDisplayProps) {
|
|
if (messages.length === 0) return null;
|
|
|
|
// Extract text content from message
|
|
const getMessageText = (message: QueuedMessage): string => {
|
|
const textParts = message.content.filter(isTextPart).map((part) => part.text);
|
|
return textParts.join(' ') || '[attachment]';
|
|
};
|
|
|
|
// Truncate text to max lines
|
|
const truncateText = (text: string, maxLines: number = 2): string => {
|
|
const lines = text.split('\n');
|
|
if (lines.length <= maxLines) {
|
|
return text.length > 100 ? text.slice(0, 100) + '...' : text;
|
|
}
|
|
return lines.slice(0, maxLines).join('\n') + '...';
|
|
};
|
|
|
|
return (
|
|
<div className="px-4 pb-2">
|
|
<div className="rounded-lg border border-border/50 bg-muted/30 p-2">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-1.5 px-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
{messages.length} message{messages.length !== 1 ? 's' : ''} queued
|
|
</span>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<kbd className="px-1 py-0.5 bg-muted border border-border rounded text-[10px]">
|
|
<ArrowUp className="h-2.5 w-2.5 inline" />
|
|
</kbd>
|
|
<span className="ml-1">to edit</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages list */}
|
|
<div className="space-y-1">
|
|
{messages.map((message, index) => (
|
|
<div
|
|
key={message.id}
|
|
className="group flex items-start gap-2 px-1 py-1 rounded hover:bg-muted/50 transition-colors"
|
|
>
|
|
{/* Arrow indicator */}
|
|
<span className="text-muted-foreground text-xs mt-0.5 select-none">
|
|
{index === messages.length - 1 ? '↳' : '│'}
|
|
</span>
|
|
|
|
{/* Message content */}
|
|
<button
|
|
onClick={() => onEditMessage(message)}
|
|
className="flex-1 text-left text-sm text-muted-foreground italic hover:text-foreground transition-colors truncate"
|
|
title="Click to edit"
|
|
>
|
|
{truncateText(getMessageText(message))}
|
|
</button>
|
|
|
|
{/* Remove button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onRemoveMessage(message.id)}
|
|
className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
aria-label="Remove from queue"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|