Skip to content

Commit 6b8277d

Browse files
aeneasraeneasr
authored
feat: load kapa async on click (#2002)
1 parent 444987d commit 6b8277d

File tree

3 files changed

+193
-0
lines changed

3 files changed

+193
-0
lines changed

‎src/theme/KapaWidget.css

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
. mantine-UnstyledButton-root {
2+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
3+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
4+
}
5+
6+
.mantine-1wpc1xj {
7+
display: flex;
8+
-webkit-box-align: center;
9+
align-items: center;
10+
-webkit-box-pack: center;
11+
justify-content: center;
12+
height: 100%;
13+
overflow: visible;
14+
}
15+
16+
.mantine-124rx6h {
17+
padding: 0px 1.625rem;
18+
appearance: none;
19+
text-align: left;
20+
text-decoration: none;
21+
box-sizing: border-box;
22+
height: 3.125rem;
23+
-webkit-tap-highlight-color: transparent;
24+
display: inline-block;
25+
width: auto;
26+
border-radius: 0.25rem;
27+
font-weight: 600;
28+
position: relative;
29+
line-height: 1;
30+
font-size: 1.125rem;
31+
user-select: none;
32+
cursor: pointer;
33+
border: 0.0625rem solid transparent;
34+
background-color: rgb(17, 28, 111);
35+
color: rgb(255, 255, 255);
36+
}
37+
38+
.mantine-1wpc1xj {
39+
display: flex;
40+
-webkit-box-align: center;
41+
align-items: center;
42+
-webkit-box-pack: center;
43+
justify-content: center;
44+
height: 100%;
45+
overflow: visible;
46+
}
47+
48+
.mantine-1ryt1ht {
49+
white-space: nowrap;
50+
height: 100%;
51+
overflow: hidden;
52+
display: flex;
53+
-webkit-box-align: center;
54+
align-items: center;
55+
}
56+
57+
.mantine-1b4vo4u {
58+
display: flex;
59+
flex-direction: column;
60+
-webkit-box-align: center;
61+
align-items: center;
62+
-webkit-box-pack: center;
63+
justify-content: center;
64+
gap: 4px;
65+
}
66+
67+
.mantine-qenwvq {
68+
margin: 0px;
69+
}
70+
71+
.mantine-1iugybl {
72+
position: relative;
73+
}
74+
75+
.mantine-1sc70ew {
76+
display: block;
77+
width: 100%;
78+
height: 100%;
79+
border: 0px;
80+
border-radius: 0.25rem;
81+
}
82+
83+
.mantine-1y9jqg9 {
84+
-webkit-tap-highlight-color: transparent;
85+
color: inherit;
86+
font-size: 1.125rem;
87+
line-height: 1.55;
88+
text-decoration: none;
89+
margin-left: 6px;
90+
margin-right: 6px;
91+
}

‎src/theme/KapaWidget.tsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { useState } from "react"
2+
import "./KapaWidget.css"
3+
4+
export default function KapaWidget() {
5+
const [isScriptLoaded, setIsScriptLoaded] = useState(false)
6+
const [child, setChild] = useState<HTMLScriptElement | undefined>()
7+
8+
const loadKapaWidget = () => {
9+
console.log("Kapai", window.Kapa)
10+
11+
if (isScriptLoaded) {
12+
document.body.removeChild(child)
13+
}
14+
15+
const script = document.createElement("script")
16+
script.src = "https://widget.kapa.ai/kapa-widget.bundle.js"
17+
script.async = true
18+
script.setAttribute(
19+
"data-website-id",
20+
"e89e7663-df2c-4c7f-974a-1bf8accdd615",
21+
)
22+
script.setAttribute("data-project-name", "Ory")
23+
script.setAttribute("data-project-color", "#1A237E")
24+
script.setAttribute(
25+
"data-modal-disclaimer",
26+
"By utilizing this chatbot, you consent to the collection and transmission of data to kapa.ai, which may include your IP address. Please be advised that your privacy and data protection are of utmost importance to us. We assure you that any data collected will be handled in compliance with applicable laws and regulations. For further details on how your data is processed and used, we encourage you to review our Privacy Policy. If you do not agree with these terms, we kindly request that you refrain from using this chatbot.",
27+
)
28+
script.setAttribute("data-modal-title", "Ory AI Copilot")
29+
script.setAttribute("data-button-text", "Ask AI")
30+
script.setAttribute("data-project-logo", "/docs/img/kapa-logo.png")
31+
script.setAttribute("data-consent-required", "true")
32+
script.setAttribute("data-button-hide", "true")
33+
script.setAttribute("data-modal-override-open-id", "custom-button-id")
34+
script.setAttribute("data-modal-open-by-default", "true")
35+
script.onload = () => setIsScriptLoaded(true)
36+
setChild(document.body.appendChild(script))
37+
}
38+
39+
return (
40+
<button
41+
id="custom-button-id"
42+
className="mantine-UnstyledButton-root mantine-Button-root mantine-124rx6h"
43+
type="button"
44+
data-button="true"
45+
style={{
46+
position: "fixed",
47+
bottom: "20px",
48+
right: "20px",
49+
height: "5rem",
50+
width: "4.5rem",
51+
padding: "0px",
52+
backgroundColor: "rgb(26, 35, 126)",
53+
boxShadow: "rgba(0, 0, 0, 0.2) 0px 0px 10px",
54+
zIndex: 199,
55+
}}
56+
onClick={loadKapaWidget}
57+
>
58+
<div className="mantine-1wpc1xj mantine-Button-inner">
59+
<span className="mantine-1ryt1ht mantine-Button-label">
60+
<div
61+
className="mantine-Stack-root mantine-1b4vo4u"
62+
style={{ marginTop: "4px" }}
63+
>
64+
<div
65+
className="mantine-Image-root mantine-yxmaw9"
66+
style={{ width: "2rem" }}
67+
>
68+
<figure className="mantine-qenwvq mantine-Image-figure">
69+
<div className="mantine-1iugybl mantine-Image-imageWrapper">
70+
<img
71+
src="/docs/img/kapa-logo.png"
72+
alt="Project Logo"
73+
className="mantine-1sc70ew mantine-Image-image"
74+
style={{
75+
objectFit: "cover",
76+
width: "2rem",
77+
height: "2rem",
78+
}}
79+
/>
80+
</div>
81+
</figure>
82+
</div>
83+
<div
84+
className="mantine-Text-root mantine-1y9jqg9"
85+
style={{ textShadow: "rgba(0, 0, 0, 0.2) 1px 1px 2px" }}
86+
>
87+
Ask AI
88+
</div>
89+
</div>
90+
</span>
91+
</div>
92+
</button>
93+
)
94+
}

‎src/theme/Root.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,20 @@
33

44
import React from "react"
55
import { QueryClient, QueryClientProvider, useQuery } from "react-query"
6+
import KapaWidget from "./KapaWidget"
7+
68
const queryClient = new QueryClient()
79

810
function Root({ children }) {
911
return (
1012
<>
1113
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
14+
<KapaWidget />
15+
<script
16+
dangerouslySetInnerHTML={{
17+
__html: `(function(){let k=window.Kapa;if(!k){let i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};window.Kapa=i}})();`,
18+
}}
19+
/>
1220
</>
1321
)
1422
}

0 commit comments

Comments
 (0)