File size: 1,467 Bytes
f59fbe2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import { IconAlertCircle, IconRefresh } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import { useChatStore } from "@/stores";
import { cn } from "@/lib/utils";
import type { InlineError as InlineErrorType } from "../stores/chat.store";
interface InlineErrorProps {
error: InlineErrorType;
}
export function InlineError({ error }: InlineErrorProps) {
const { retryLastMessage, isStreaming } = useChatStore();
// 如果 detail 和 message 不同，则显示详细错误信息
const showDetail = error.detail && error.detail !== error.message;
return (
<div className={cn("flex flex-col gap-1 px-3 py-2 mt-2 rounded-md", "bg-red-50 dark:bg-red-950/30", "border border-red-200 dark:border-red-900/50")}>
<div className="flex items-center gap-2">
<IconAlertCircle className="size-4 text-red-500 shrink-0" />
<span className="text-xs text-red-600 dark:text-red-400 flex-1">{error.message}</span>
<Button
variant="ghost"
size="sm"
className="h-6 px-2 text-xs text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30"
onClick={retryLastMessage}
disabled={isStreaming}
>
<IconRefresh className="size-3.5 mr-1" />
Retry
</Button>
</div>
{showDetail && <div className="text-[10px] text-red-500/70 dark:text-red-400/70 pl-6 font-mono break-all">{error.detail}</div>}
</div>
);
}
|