|
1 | | -<!-- <script> |
2 | | -
|
3 | | -import {Inkeep} from "@inkeep/uikit-js" |
4 | | -
|
5 | | -// Get the button element |
6 | | -const inkeepTriggers = document.querySelectorAll("[kui-trigger='search']"); |
7 | | - |
8 | | -// Create a new div element to hold the Inkeep modal and set its id and position |
9 | | -const inkeepDiv = document.createElement("div"); |
10 | | -inkeepDiv.id = "inkeepModal"; |
11 | | -inkeepDiv.style.position = "absolute"; |
12 | | -document.body.appendChild(inkeepDiv); |
13 | | - |
14 | | -const handleClose = () => { |
15 | | - inkeepWidget.render({ |
16 | | - ...config, |
17 | | - isOpen: false, |
18 | | - baseSettings: undefined |
19 | | - }); |
20 | | -}; |
21 | | - |
22 | | -const handleOpen = () => { |
23 | | -
|
24 | | - const theme = document.documentElement.getAttribute("data-theme"); |
25 | | -
|
26 | | - inkeepWidget.render({ |
27 | | - ...config, |
28 | | - isOpen: true, |
29 | | - baseSettings: { |
30 | | - colorMode: { |
31 | | - forcedColorMode: theme |
32 | | - } |
33 | | - } |
34 | | - }); |
35 | | -} |
36 | | - |
37 | | -const config = { |
38 | | - componentType: "CustomTrigger", // required |
39 | | - targetElement: inkeepDiv, // required |
40 | | - properties: { |
41 | | - isOpen: false, // required |
42 | | - onClose: handleClose, // required |
43 | | - onOpen: undefined, |
44 | | - baseSettings: { |
45 | | - apiKey: import.meta.env.PUBLIC_INKEEP_API_KEY!, // required |
46 | | - integrationId: import.meta.env.PUBLIC_INKEEP_INTEGRATION_ID!, // required |
47 | | - organizationId: import.meta.env.PUBLIC_INKEEP_ORGANIZATION_ID!, // required |
48 | | - primaryBrandColor: "#0f0f0f", |
49 | | - organizationDisplayName: "Kinde", |
50 | | - colorMode: { |
51 | | - enableSystem: true |
52 | | - }, |
53 | | - theme: { |
54 | | - stylesheetUrls: ["/vendors/inkeep.css"], |
55 | | - }, |
56 | | - //... optional base settings |
57 | | - }, |
58 | | - modalSettings: { |
59 | | - // optional InkeepModalSettings |
60 | | - }, |
61 | | - searchSettings: { |
62 | | - // optional InkeepSearchSettings |
63 | | - }, |
64 | | - aiChatSettings: { |
65 | | - chatSubjectName: "Kinde", |
66 | | - botAvatarSrcUrl: "https://storage.googleapis.com/organization-image-assets/kinde-botAvatarSrcUrl-1720166731622.png", |
67 | | - botAvatarDarkSrcUrl: "https://storage.googleapis.com/organization-image-assets/kinde-botAvatarDarkSrcUrl-1720676197273.png", |
68 | | - getHelpCallToActions: [ |
69 | | - { |
70 | | - name: "Slack", |
71 | | - url: "https://join.slack.com/t/thekindecommunity/shared_invite/zt-2k5i0aeet-d6Z_2qYphcNCpj0bFa4oCg", |
72 | | - icon: { |
73 | | - builtIn: "FaSlack" |
74 | | - } |
75 | | - }, |
76 | | - { |
77 | | - name: "Discord", |
78 | | - url: "https://discord.gg/wHX6j7wG5d", |
79 | | - icon: { |
80 | | - builtIn: "FaDiscord" |
81 | | - } |
82 | | - }, |
83 | | - { |
84 | | - name: "Github", |
85 | | - url: "https://github.com/kinde-oss", |
86 | | - icon: { |
87 | | - builtIn: "FaGithub" |
88 | | - } |
89 | | - } |
90 | | - ], |
91 | | - quickQuestions: [ |
92 | | - "Where do I set up my authentication methods?", |
93 | | - "How can I be notified when certain events happen?", |
94 | | - "What's the quickest way to get started with Kinde?" |
95 | | - ] |
96 | | - } |
97 | | - }, |
98 | | -}; |
99 | | -
|
100 | | -// Embed the widget using the `Inkeep.embed()` function. |
101 | | -const inkeepWidget = Inkeep(config.properties.baseSettings).embed(config as any); |
102 | | -// Add event listener to open the Inkeep modal when the button is clicked |
103 | | -inkeepTriggers.forEach(trigger => trigger.addEventListener("click", handleOpen)); |
104 | | -
|
105 | | -document.addEventListener("keydown", function (event) { |
106 | | - // Check if the `/` key is pressed |
107 | | - if (event.key === "/" && !event.metaKey && !event.ctrlKey) { |
108 | | - event.preventDefault(); |
109 | | - handleOpen(); |
110 | | - } |
111 | | -
|
112 | | - // Check if Cmd (Meta) + K or Ctrl + K is pressed |
113 | | - if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { |
114 | | - event.preventDefault(); |
115 | | - handleOpen(); |
116 | | - } |
117 | | -}); |
118 | | -</script> --> |
119 | | - |
120 | 1 | <script> |
121 | 2 | // Get the button element |
122 | 3 | const inkeepTriggers = document.querySelectorAll("[kui-trigger='search']"); |
|
0 commit comments