50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import clsx from "clsx";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useState } from "react";
|
|
import { MessageCircleIcon } from "~/components/ui/icons/vendor";
|
|
|
|
export default function ChatSupportButton() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { t } = useTranslation();
|
|
function onClick() {
|
|
try {
|
|
if (!isOpen) {
|
|
// @ts-ignore
|
|
$crisp?.push(["do", "chat:open"]);
|
|
// @ts-ignore
|
|
$crisp?.push(["do", "chat:show"]);
|
|
setIsOpen(true);
|
|
} else {
|
|
// @ts-ignore
|
|
$crisp?.push(["do", "chat:hide"]);
|
|
setIsOpen(false);
|
|
}
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
}
|
|
return (
|
|
<div className="relative hidden sm:inline-flex">
|
|
<div className="relative">
|
|
<div className="inline-flex divide-x divide-gray-300 rounded-sm shadow-none">
|
|
<div className="relative z-0 inline-flex rounded-full text-sm shadow-none">
|
|
<button
|
|
onClick={onClick}
|
|
type="button"
|
|
className={clsx(
|
|
"text-muted-foreground bg-secondary hover:bg-secondary/90 border-border relative inline-flex items-center rounded-full border p-2 font-medium shadow-inner focus:z-10 focus:outline-hidden focus:ring-2 focus:ring-offset-2"
|
|
)}
|
|
aria-haspopup="listbox"
|
|
aria-expanded="true"
|
|
aria-label={t("shared.openSupportChat")}
|
|
>
|
|
<span className="sr-only">{t("shared.openSupportChat")}</span>
|
|
<MessageCircleIcon className="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|