| 5 | import { useEffect, useState } from "react"; |
| 6 | |
| 7 | export default function InkeepSearchBox(props: SharedProps) { |
| 8 | const [syncTarget, setSyncTarget] = useState<HTMLElement | null>(null); |
| 9 | const { open, onOpenChange } = props; |
| 10 | // We do this because document is not available in the server |
| 11 | useEffect(() => { |
| 12 | setSyncTarget(document.documentElement); |
| 13 | }, []); |
| 14 | |
| 15 | // if(!syncTarget) return null; |
| 16 | |
| 17 | const config: InkeepModalSearchAndChatProps = { |
| 18 | baseSettings: { |
| 19 | apiKey: process.env.NEXT_PUBLIC_INKEEP_KEY, // required |
| 20 | primaryBrandColor: "#EE63C0", // your brand color, widget color scheme is derived from this |
| 21 | organizationDisplayName: "Zod", |
| 22 | // ...optional settings |
| 23 | colorMode: { |
| 24 | sync: { |
| 25 | target: syncTarget!, |
| 26 | attributes: ["class"], |
| 27 | isDarkMode: (attributes) => !!attributes.class?.includes("dark"), |
| 28 | }, |
| 29 | }, |
| 30 | }, |
| 31 | modalSettings: { |
| 32 | isOpen: open, |
| 33 | onOpenChange, |
| 34 | // optional settings |
| 35 | }, |
| 36 | // searchSettings: { |
| 37 | // // optional settings |
| 38 | // }, |
| 39 | // aiChatSettings: { |
| 40 | // // optional settings |
| 41 | // aiAssistantAvatar: "https://mydomain.com/mylogo", // use your own ai assistant avatar |
| 42 | // exampleQuestions: ["Example question 1?", "Example question 2?", "Example question 3?"], |
| 43 | // }, |
| 44 | }; |
| 45 | return <InkeepModalSearchAndChat {...config} />; |
| 46 | } |