11<script >
2- // Get the button element
3- const inkeepTriggers = document.querySelectorAll("[kui-trigger='search']");
2+ // Get the button element
3+ const inkeepTriggers = document.querySelectorAll("[kui-trigger='search']");
44
5- // Create a new div element to hold the Inkeep modal and set its id and position
6- const inkeepDiv = document.createElement("div");
7- inkeepDiv.id = "inkeepModal";
8- inkeepDiv.style.position = "absolute";
9- document.body.appendChild(inkeepDiv);
5+ function handleOpenChange(newOpen) {
6+ inkeepWidget?.update({modalSettings: {isOpen: newOpen}});
7+ }
108
11- const handleClose = () => {
12- inkeepWidget.render({
13- ...config,
14- isOpen: false,
15- baseSettings: undefined
16- });
17- };
9+ const handleOpen = () => {
10+ const isInkeepActive = document.body.classList.contains("inkeep-active");
11+ if (isInkeepActive) {
12+ inkeepWidget?.update({
13+ modalSettings: {
14+ isOpen: true
15+ }
16+ });
17+ } else {
18+ initializeInkeep();
19+ }
20+ };
1821
19- const handleOpen = () => {
20- const theme = document.documentElement.getAttribute("data-theme");
21- const isInkeepActive = document.body.classList.contains("inkeep-active");
22+ const baseSettings = {
23+ apiKey: import.meta.env.PUBLIC_INKEEP_API_KEY!, // required
24+ primaryBrandColor: "#0f0f0f",
25+ organizationDisplayName: "Kinde",
26+ colorMode: {
27+ sync: {
28+ target: document.documentElement,
29+ attributes: ["data-theme"],
30+ isDarkMode: (attributes) => attributes["data-theme"] === "dark"
31+ }
32+ },
33+ theme: {
34+ styles: [
35+ {
36+ type: "link",
37+ value: "/vendors/inkeep.css"
38+ }
39+ ]
40+ }
41+ };
42+ const aiChatSettings = {
43+ chatSubjectName: "Kinde",
44+ aiAssistantAvatar: {
45+ light: "/bot-avatar-light.png",
46+ dark: "/bot-avatar-dark.png"
47+ },
48+ getHelpOptions: [
49+ {
50+ name: "Slack",
51+ action: {
52+ type: "open_link",
53+ url: "https://join.slack.com/t/thekindecommunity/shared_invite/zt-2k5i0aeet-d6Z_2qYphcNCpj0bFa4oCg"
54+ },
55+ icon: {
56+ builtIn: "FaSlack"
57+ }
58+ },
59+ {
60+ name: "Discord",
61+ action: {
62+ type: "open_link",
63+ url: "https://discord.gg/wHX6j7wG5d"
64+ },
65+ icon: {
66+ builtIn: "FaDiscord"
67+ }
68+ },
69+ {
70+ name: "Github",
71+ action: {
72+ type: "open_link",
73+ url: "https://github.com/kinde-oss"
74+ },
75+ icon: {
76+ builtIn: "FaGithub"
77+ }
78+ }
79+ ],
80+ exampleQuestions: [
81+ "Where do I set up my authentication methods?",
82+ "How can I be notified when certain events happen?",
83+ "What's the quickest way to get started with Kinde?"
84+ ]
85+ };
2286
23- if (isInkeepActive) {
24- inkeepWidget.render({
25- ...config,
26- isOpen: true,
27- baseSettings: {
28- colorMode: {
29- forcedColorMode: theme
30- }
31- }
32- });
33- } else {
34- initializeInkeep();
35- }
36- };
87+ const modalSettings = {
88+ isOpen: false,
89+ onOpenChange: handleOpenChange
90+ };
3791
38- const config = {
39- componentType: "CustomTrigger", // required
40- targetElement: inkeepDiv, // required
41- properties: {
42- isOpen: false, // required
43- onClose: handleClose, // required
44- onOpen: undefined,
45- baseSettings: {
46- apiKey: import.meta.env.PUBLIC_INKEEP_API_KEY!, // required
47- integrationId: import.meta.env.PUBLIC_INKEEP_INTEGRATION_ID!, // required
48- organizationId: import.meta.env.PUBLIC_INKEEP_ORGANIZATION_ID!, // required
49- primaryBrandColor: "#0f0f0f",
50- organizationDisplayName: "Kinde",
51- colorMode: {
52- enableSystem: true
53- },
54- theme: {
55- stylesheetUrls: ["/vendors/inkeep.css"]
56- }
57- },
58- aiChatSettings: {
59- chatSubjectName: "Kinde",
60- botAvatarSrcUrl:
61- "/bot-avatar-light.png",
62- botAvatarDarkSrcUrl:
63- "/bot-avatar-dark.png",
64- getHelpCallToActions: [
65- {
66- name: "Slack",
67- url: "https://join.slack.com/t/thekindecommunity/shared_invite/zt-2k5i0aeet-d6Z_2qYphcNCpj0bFa4oCg",
68- icon: {
69- builtIn: "FaSlack"
70- }
71- },
72- {
73- name: "Discord",
74- url: "https://discord.gg/wHX6j7wG5d",
75- icon: {
76- builtIn: "FaDiscord"
77- }
78- },
79- {
80- name: "Github",
81- url: "https://github.com/kinde-oss",
82- icon: {
83- builtIn: "FaGithub"
84- }
85- }
86- ],
87- quickQuestions: [
88- "Where do I set up my authentication methods?",
89- "How can I be notified when certain events happen?",
90- "What's the quickest way to get started with Kinde?"
91- ]
92- }
93- }
94- };
92+ const searchSettings = {
93+ tabs: []
94+ };
9595
96- // Embed the widget using the `Inkeep.embed()` function.
97- let inkeepWidget: any;
98- // Add event listener to open the Inkeep modal when the button is clicked
99- inkeepTriggers.forEach((trigger) => trigger.addEventListener("click", handleOpen));
96+ const config = {
97+ baseSettings,
98+ aiChatSettings,
99+ modalSettings,
100+ searchSettings
101+ };
100102
101- function initializeInkeep() {
102- import("@inkeep/uikit-js")
103- .then((lib) => {
104- inkeepWidget = lib.Inkeep(config.properties.baseSettings).embed(config as any );
103+ // Embed the widget using the `Inkeep.embed()` function.
104+ let inkeepWidget: any;
105+ // Add event listener to open the Inkeep modal when the button is clicked
106+ inkeepTriggers.forEach((trigger) => trigger.addEventListener("click", handleOpen) );
105107
106- document.body.classList.add("inkeep-active");
107- })
108- .then(() => {
109- const theme = document.documentElement.getAttribute("data-theme");
108+ function initializeInkeep() {
109+ import("@inkeep/cxkit-js")
110+ .then(() => {
111+ if (window?.Inkeep?.ModalSearchAndChat) {
112+ inkeepWidget = window.Inkeep.ModalSearchAndChat(config as any);
113+ }
110114
111- setTimeout(() => {
112- inkeepWidget.render({
113- ...config,
114- isOpen: true,
115- baseSettings: {
116- colorMode: {
117- forcedColorMode: theme
118- }
119- }
120- });
121- }, 50);
122-
123- })
124- .catch((error) => console.log(error));
125- }
115+ document.body.classList.add("inkeep-active");
116+ })
117+ .then(() => {
118+ setTimeout(() => {
119+ inkeepWidget?.update({
120+ modalSettings: {
121+ isOpen: true
122+ }
123+ });
124+ }, 50);
125+ })
126+ .catch((error) => console.log(error));
127+ }
126128
127- document.addEventListener("keydown", function (event) {
128- // Check if the `/` key is pressed
129- if (event.key === "/" && !event.metaKey && !event.ctrlKey) {
130- event.preventDefault();
131- handleOpen();
132- }
129+ document.addEventListener("keydown", function (event) {
130+ // Check if the `/` key is pressed
131+ if (event.key === "/" && !event.metaKey && !event.ctrlKey) {
132+ event.preventDefault();
133+ handleOpen();
134+ }
133135
134- // Check if Cmd (Meta) + K or Ctrl + K is pressed
135- if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
136- event.preventDefault();
137- handleOpen();
138- }
139- });
140- </script >
136+ // Check if Cmd (Meta) + K or Ctrl + K is pressed
137+ if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
138+ event.preventDefault();
139+ handleOpen();
140+ }
141+ });
142+ </script >
0 commit comments