mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-21 10:50:14 +01:00
39cecc97bd
* feat: wrap main content of page in <main> tag for screen reader landmarks (439) * feat: add italic on active convo when selected so that selection state does not rely on bg contrast ratio (562) * feat: add border ring around SearchBar so that it passes focus contrast minimums (577) * fix: hide decorative SVGs from screen readers (578) * fix: stop clipping of focus outlines in My Files modal (593) * feat: programmatically declare state of Temporary Chat toggle for screen readers (606) * feat: add sr-only components to warn screen readers that footer links open in new tab (611) * feat: add aria-labels to archived chat table buttons * feat: add screen reader heading for prompt edit page (776) * feat: increase contrast to threshold minimum for production tag in prompts advanced view (773) * feat: increase contrast to thehold minimums for production tag and version card border highlights (770) * fix: h2 now reads as 'control bar' to screen readers in edit prompt page (768) * feat: add selected state tracking for simple / advanced toggle for screen readers (765) * feat: add left padding to theme selector in prompts side nav panel so that focus outline doesnt clip * feat: darken orange bg for warning toasts to hit 3:1 contrast minimum with white text (725) * fix: return focus to triggering element on modal close for image preview in attach files panel (717) * fix: hide SVG for AddMultiConvo button from screen readers (708) * feat: add persistent label to Filter Memories... input in memory side panel
57 lines
2 KiB
TypeScript
57 lines
2 KiB
TypeScript
import * as RadixToast from '@radix-ui/react-toast';
|
|
import { NotificationSeverity } from '~/common';
|
|
import { useToast } from '~/hooks';
|
|
|
|
export function Toast() {
|
|
const { toast, onOpenChange } = useToast();
|
|
const severityClassName = {
|
|
[NotificationSeverity.INFO]: 'border-gray-500 bg-gray-500',
|
|
[NotificationSeverity.SUCCESS]: 'border-green-500 bg-green-500',
|
|
[NotificationSeverity.WARNING]: 'border-orange-600 bg-orange-600',
|
|
[NotificationSeverity.ERROR]: 'border-red-500 bg-red-500',
|
|
};
|
|
|
|
return (
|
|
<RadixToast.Root
|
|
open={toast.open}
|
|
onOpenChange={onOpenChange}
|
|
className="toast-root"
|
|
style={{
|
|
height: '74px',
|
|
marginBottom: '0px',
|
|
}}
|
|
>
|
|
<div className="w-full p-1 text-center md:w-auto md:text-justify">
|
|
<div
|
|
className={`alert-root pointer-events-auto inline-flex flex-row gap-2 rounded-md border px-3 py-2 text-white ${
|
|
severityClassName[toast.severity]
|
|
}`}
|
|
>
|
|
{toast.showIcon && (
|
|
<div className="mt-1 flex-shrink-0 flex-grow-0">
|
|
<svg
|
|
stroke="currentColor"
|
|
fill="none"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="icon-sm"
|
|
height="1em"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" />
|
|
<line x1="12" y1="8" x2="12" y2="12" />
|
|
<line x1="12" y1="16" x2="12.01" y2="16" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
<RadixToast.Description className="flex-1 justify-center gap-2">
|
|
<div className="whitespace-pre-wrap text-left">{toast.message}</div>
|
|
</RadixToast.Description>
|
|
</div>
|
|
</div>
|
|
</RadixToast.Root>
|
|
);
|
|
}
|