9bfcbb182c
- Improved lightbox toolbar button hit targets for better accessibility. - Updated ActivityItem and ActivityTimeline components to support managed collapse states for messages. - Refactored message collapsing logic to allow for user-controlled expansion in various components. - Enhanced CreateTeamDialog and LaunchTeamDialog with improved loading indicators and layout adjustments. - Increased maximum message length in SendMessageDialog to accommodate larger inputs. - Added icons and visual enhancements in ProjectPathSelector and EffortLevelSelector for better user experience.
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Label } from '@renderer/components/ui/label';
|
|
import { cn } from '@renderer/lib/utils';
|
|
import { Brain } from 'lucide-react';
|
|
|
|
const EFFORT_OPTIONS = [
|
|
{ value: '', label: 'Default' },
|
|
{ value: 'low', label: 'Low' },
|
|
{ value: 'medium', label: 'Medium' },
|
|
{ value: 'high', label: 'High' },
|
|
] as const;
|
|
|
|
export interface EffortLevelSelectorProps {
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
id?: string;
|
|
}
|
|
|
|
export const EffortLevelSelector: React.FC<EffortLevelSelectorProps> = ({
|
|
value,
|
|
onValueChange,
|
|
id,
|
|
}) => (
|
|
<div className="mb-3">
|
|
<Label htmlFor={id} className="label-optional mb-1.5 block">
|
|
Effort level (optional)
|
|
</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Brain size={16} className="shrink-0 text-[var(--color-text-muted)]" />
|
|
<div className="inline-flex rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-0.5">
|
|
{EFFORT_OPTIONS.map((opt) => (
|
|
<button
|
|
key={opt.value || '__default__'}
|
|
type="button"
|
|
id={opt.value === value ? id : undefined}
|
|
className={cn(
|
|
'rounded-[3px] px-3 py-1 text-xs font-medium transition-colors',
|
|
value === opt.value
|
|
? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] shadow-sm'
|
|
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
|
|
)}
|
|
onClick={() => onValueChange(opt.value)}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<p className="mt-1 text-[11px] text-[var(--color-text-muted)]">
|
|
Controls how much reasoning Claude invests before responding. Default uses Claude's
|
|
standard behavior.
|
|
</p>
|
|
</div>
|
|
);
|