60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { usePathname, useSearchParams } from "next/navigation"
|
|
import Script from "next/script"
|
|
import { useEffect } from "react"
|
|
|
|
import { shouldShowChatbot } from "@/components/ChatbotScript/utils"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
interface ChatbotClientProps {
|
|
liveLangs: string[]
|
|
}
|
|
|
|
export function ChatbotClient({ liveLangs }: ChatbotClientProps) {
|
|
const lang = useLang()
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const currentLang = useLang()
|
|
const isLive = liveLangs.includes(currentLang)
|
|
const shouldShow =
|
|
isLive && shouldShowChatbot(pathname, searchParams, currentLang)
|
|
|
|
useEffect(() => {
|
|
window.kindlyOptions = {
|
|
position: {
|
|
bottom: "130px",
|
|
right: "20px",
|
|
},
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (window.kindlyChat) {
|
|
if (!shouldShow) {
|
|
window.kindlyChat.closeChat()
|
|
window.kindlyChat.hideBubble()
|
|
// Hack to hide chatbot behind other elements in case the user has multiple tabs
|
|
// open and the chat window should not be visible in the tab that becomes active
|
|
document.documentElement.style.setProperty("--chatbot-z-index", "-1")
|
|
} else {
|
|
window.kindlyChat.showBubble()
|
|
// Reset z-index when chatbot is shown, we're using the default z-index from globals.css
|
|
document.documentElement.style.removeProperty("--chatbot-z-index")
|
|
}
|
|
}
|
|
}, [shouldShow])
|
|
|
|
return (
|
|
<Script
|
|
id="kindly-chat"
|
|
src="https://chat.kindlycdn.com/kindly-chat.js"
|
|
data-bot-key="910bd27a-7472-43a1-bcfc-955b41adc3e7"
|
|
data-shadow-dom
|
|
data-bubble-hidden={!shouldShow}
|
|
data-language={lang}
|
|
defer
|
|
></Script>
|
|
)
|
|
}
|