refactor: update alert components across various files to use a consistent structure and styling

This commit is contained in:
Anish Sarkar 2026-05-18 23:46:16 +05:30
parent e0ecea61f8
commit b7a6e3af3d
34 changed files with 372 additions and 619 deletions

View file

@ -152,26 +152,30 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
{/* Read-only / Limited permissions notice */}
{access && !isLoading && isReadOnly && (
<div>
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
You have <span className="font-medium">read-only</span> access to LLM configurations.
Contact a space owner to request additional permissions.
<Alert>
<Info />
<AlertDescription>
<p>
You have <span className="font-medium">read-only</span> access to LLM
configurations. Contact a space owner to request additional permissions.
</p>
</AlertDescription>
</Alert>
</div>
)}
{access && !isLoading && !isReadOnly && (!canCreate || !canUpdate || !canDelete) && (
<div>
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
You can{" "}
{[canCreate && "create", canUpdate && "edit", canDelete && "delete"]
.filter(Boolean)
.join(" and ")}{" "}
configurations
{!canDelete && ", but cannot delete them"}.
<Alert>
<Info />
<AlertDescription>
<p>
You can{" "}
{[canCreate && "create", canUpdate && "edit", canDelete && "delete"]
.filter(Boolean)
.join(" and ")}{" "}
configurations
{!canDelete && ", but cannot delete them"}.
</p>
</AlertDescription>
</Alert>
</div>
@ -179,9 +183,9 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
{/* Global Configs Info */}
{globalConfigs.length > 0 && (
<Alert className="bg-muted/50 py-3">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
<Alert>
<Info />
<AlertDescription>
<p>
<span className="font-medium">
{globalConfigs.length} global {globalConfigs.length === 1 ? "model" : "models"}

View file

@ -135,11 +135,9 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
return (
<div className="space-y-4 md:space-y-6">
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
Update your search space name and description.
</AlertDescription>
<Alert>
<Info />
<AlertDescription>Update your search space name and description.</AlertDescription>
</Alert>
<form onSubmit={onSubmit} className="space-y-6">

View file

@ -153,26 +153,30 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{/* Read-only / Limited permissions notice */}
{access && !isLoading && isReadOnly && (
<div>
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
You have <span className="font-medium">read-only</span> access to image generation
configurations. Contact a space owner to request additional permissions.
<Alert>
<Info />
<AlertDescription>
<p>
You have <span className="font-medium">read-only</span> access to image generation
configurations. Contact a space owner to request additional permissions.
</p>
</AlertDescription>
</Alert>
</div>
)}
{access && !isLoading && !isReadOnly && (!canCreate || !canDelete) && (
<div>
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
You can{" "}
{[canCreate && "create and edit", canDelete && "delete"]
.filter(Boolean)
.join(" and ")}{" "}
image model configurations
{!canDelete && ", but cannot delete them"}.
<Alert>
<Info />
<AlertDescription>
<p>
You can{" "}
{[canCreate && "create and edit", canDelete && "delete"]
.filter(Boolean)
.join(" and ")}{" "}
image model configurations
{!canDelete && ", but cannot delete them"}.
</p>
</AlertDescription>
</Alert>
</div>
@ -180,9 +184,9 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
{/* Global info */}
{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
<Alert className="bg-muted/50 py-3">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
<Alert>
<Info />
<AlertDescription>
<p>
<span className="font-medium">
{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length}{" "}

View file

@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
import { AlertTriangle, Info } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
@ -102,21 +102,19 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
return (
<div className="space-y-4 md:space-y-6">
{/* Work in Progress Notice */}
<Alert
variant="default"
className="bg-amber-50 dark:bg-amber-950/30 border-amber-300 dark:border-amber-700 py-3 md:py-4"
>
<AlertTriangle className="h-3 w-3 md:h-4 md:w-4 text-amber-600 dark:text-amber-500 shrink-0" />
<AlertDescription className="text-amber-800 dark:text-amber-300 text-xs md:text-sm">
<span className="font-semibold">Work in Progress:</span> This functionality is currently
under development and not yet connected to the backend. Your instructions will be saved
but won't affect AI behavior until the feature is fully implemented.
<Alert>
<AlertTriangle />
<AlertTitle>Work in Progress</AlertTitle>
<AlertDescription>
This functionality is currently under development and not yet connected to the backend.
Your instructions will be saved but won't affect AI behavior until the feature is fully
implemented.
</AlertDescription>
</Alert>
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
<Alert>
<Info />
<AlertDescription>
System instructions apply to all AI interactions in this search space. They guide how the
AI responds, its tone, focus areas, and behavior patterns.
</AlertDescription>
@ -167,9 +165,9 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
</div>
{customInstructions.trim().length === 0 && (
<Alert className="py-2 md:py-3">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
<Alert>
<Info />
<AlertDescription>
No system instructions are currently set. The AI will use default behavior.
</AlertDescription>
</Alert>

View file

@ -183,9 +183,9 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
return (
<div className="space-y-4">
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
<Alert>
<Info />
<AlertDescription>
<p>
SurfSense uses this shared memory to provide team-wide context across all conversations
in this search space.

View file

@ -155,35 +155,39 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
{access && !isLoading && isReadOnly && (
<div>
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
You have <span className="font-medium">read-only</span> access to vision model
configurations. Contact a space owner to request additional permissions.
<Alert>
<Info />
<AlertDescription>
<p>
You have <span className="font-medium">read-only</span> access to vision model
configurations. Contact a space owner to request additional permissions.
</p>
</AlertDescription>
</Alert>
</div>
)}
{access && !isLoading && !isReadOnly && (!canCreate || !canDelete) && (
<div>
<Alert className="bg-muted/50 py-3 md:py-4">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
You can{" "}
{[canCreate && "create and edit", canDelete && "delete"]
.filter(Boolean)
.join(" and ")}{" "}
vision model configurations
{!canDelete && ", but cannot delete them"}.
<Alert>
<Info />
<AlertDescription>
<p>
You can{" "}
{[canCreate && "create and edit", canDelete && "delete"]
.filter(Boolean)
.join(" and ")}{" "}
vision model configurations
{!canDelete && ", but cannot delete them"}.
</p>
</AlertDescription>
</Alert>
</div>
)}
{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
<Alert className="bg-muted/50 py-3">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
<Alert>
<Info />
<AlertDescription>
<p>
<span className="font-medium">
{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length}{" "}