62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import clsx from "clsx";
|
|
|
|
import Spinner from "../Spinner";
|
|
import { t } from "../../i18n";
|
|
import { alertTriangleIcon } from "../icons";
|
|
|
|
interface TTDDialogOutputProps {
|
|
error: Error | null;
|
|
canvasRef: React.RefObject<HTMLDivElement | null>;
|
|
loaded: boolean;
|
|
hideErrorDetails?: boolean;
|
|
}
|
|
|
|
export const TTDDialogOutput = ({
|
|
error,
|
|
canvasRef,
|
|
loaded,
|
|
hideErrorDetails,
|
|
}: TTDDialogOutputProps) => {
|
|
return (
|
|
<div
|
|
className={`ttd-dialog-output-wrapper ${
|
|
error ? "ttd-dialog-output-wrapper--error" : ""
|
|
}`}
|
|
>
|
|
{error && (
|
|
<div
|
|
key="error"
|
|
data-testid="ttd-dialog-output-error"
|
|
className="ttd-dialog-output-error"
|
|
>
|
|
<div className="ttd-dialog-output-error-content">
|
|
<div className="ttd-dialog-output-error-icon">
|
|
{alertTriangleIcon}
|
|
</div>
|
|
<div className="ttd-dialog-output-error-title">
|
|
{t("ttd.error")}
|
|
</div>
|
|
<div className="ttd-dialog-output-error-message">
|
|
{hideErrorDetails
|
|
? t("chat.errors.mermaidParseError")
|
|
: error.message}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{loaded ? (
|
|
<div
|
|
key="canvas"
|
|
className={clsx("ttd-dialog-output-canvas-container", {
|
|
invisible: !!error,
|
|
})}
|
|
>
|
|
<div ref={canvasRef} className="ttd-dialog-output-canvas-content" />
|
|
</div>
|
|
) : (
|
|
<Spinner size="2rem" />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|