refactor(automations): replace error and notice displays with Alert components

This commit is contained in:
Anish Sarkar 2026-06-03 00:45:45 +05:30
parent c002f45c8e
commit eabbfb8c67
11 changed files with 88 additions and 72 deletions

View file

@ -39,12 +39,12 @@ export function SidebarSection({
className
)}
>
<div className="flex items-center group/section shrink-0 px-2 py-1">
<div className="flex items-center group/section shrink-0 px-4 py-1">
<CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-accent-foreground transition-colors min-w-0">
<span className="truncate">{title}</span>
<ChevronRight
className={cn(
"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
"h-3.5 w-3.5 shrink-0 transition-[color,opacity,transform] duration-200 opacity-100 md:opacity-0 md:group-hover/section:opacity-100",
isOpen && "rotate-90"
)}
/>

View file

@ -108,4 +108,4 @@ export function ChatExamplePrompts({ onSelect }: ChatExamplePromptsProps) {
) : null}
</div>
);
}
}

View file

@ -12,6 +12,7 @@ import {
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { JsonView } from "@/components/json-view";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { automationCreateRequest } from "@/contracts/types/automation.types";
import type { HitlDecision, InterruptResult } from "@/features/chat-messages/hitl";
@ -351,19 +352,21 @@ function JsonEditor({ initialValue, onSave, onCancel }: JsonEditorProps) {
/>
</div>
{issues.length > 0 && (
<div className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2">
<div className="flex items-center gap-1.5 text-xs font-medium text-destructive">
<AlertCircle className="h-3.5 w-3.5" aria-hidden />
<Alert variant="destructive">
<AlertCircle aria-hidden />
<AlertTitle>
{issues.length} issue{issues.length === 1 ? "" : "s"}
</div>
<ul className="mt-1.5 space-y-0.5 text-xs text-destructive/90 list-disc list-inside">
{issues.map((issue) => (
<li key={issue} className="font-mono">
{issue}
</li>
))}
</ul>
</div>
</AlertTitle>
<AlertDescription>
<ul className="list-inside list-disc">
{issues.map((issue) => (
<li key={issue} className="font-mono">
{issue}
</li>
))}
</ul>
</AlertDescription>
</Alert>
)}
<div className="flex items-center justify-end gap-2">
<Button type="button" variant="ghost" size="sm" onClick={onCancel}>