Skip to content

Commit f345d0c

Browse files
carlosabadiacarlosabadia
authored
ENG-8869: Add inkeep (#1756)
1 parent f22aaa1 commit f345d0c

File tree

4 files changed

+97
-49
lines changed

4 files changed

+97
-49
lines changed

‎assets/icons/search.svg‎

Lines changed: 1 addition & 10 deletions
Loading

‎assets/logos/small_logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎pcweb/components/docpage/navbar/inkeep.py‎

Lines changed: 93 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
class InkeepSearchBar(rx.NoSSRComponent):
99
tag = "InkeepSearchBar"
10-
library = "@inkeep/cxkit-react@0.5.55"
10+
library = "@inkeep/cxkit-react@0.5.115"
1111

1212

1313
class Search(rx.el.Div):
@@ -141,50 +141,106 @@ def add_hooks(self):
141141
key: "custom-theme",
142142
type: "style",
143143
value: `
144-
[data-theme='light'] .ikp-search-bar__button,
145-
[data-theme='dark'] .ikp-search-bar__button {
144+
[data-theme='light'] .ikp-search-bar__button {
145+
color: var(--m-slate-7);
146+
padding: 0.375rem 0.5rem;
147+
border-radius: 0.5rem;
148+
background: var(--m-slate-1);
146149
display: flex;
147-
max-height: 32px;
148-
min-height: 32px;
149-
padding: 6px;
150-
min-width: 256px;
151-
justify-content: space-between;
150+
flex-direction: row;
152151
align-items: center;
153-
border-radius: 10px;
154-
border: 1px solid var(--c-slate-5, #E0E1E6);
155-
background: var(--c-slate-1);
156-
/* Small */
157-
font-family: "Instrument Sans";
158-
font-size: 14px;
152+
justify-content: flex-start;
153+
gap: 0.5rem;
154+
width: 100%;
155+
height: 2rem !important;
156+
min-height: 2rem !important;
157+
max-width: 10rem;
158+
min-width: 0;
159+
box-shadow:
160+
0 -1px 0 0 rgba(0, 0, 0, 0.08) inset,
161+
0 0 0 1px rgba(0, 0, 0, 0.08) inset,
162+
0 1px 2px 0 rgba(0, 0, 0, 0.02),
163+
0 1px 4px 0 rgba(0, 0, 0, 0.02);
164+
font-size: 0.875rem;
165+
font-family: "Instrument Sans", sans-serif;
166+
font-weight: 500;
159167
font-style: normal;
168+
line-height: 1.5rem;
169+
border: none;
170+
transition: none;
171+
}
172+
[data-theme='dark'] .ikp-search-bar__button {
173+
color: var(--m-slate-6);
174+
transition: none;
175+
height: 2rem !important;
176+
min-height: 2rem !important;
177+
padding: 0.375rem 0.5rem;
178+
border-radius: 0.5rem;
179+
background: var(--m-slate-11);
180+
display: flex;
181+
max-width: 10rem;
182+
flex-direction: row;
183+
align-items: center;
184+
justify-content: flex-start;
185+
gap: 0.5rem;
186+
width: 100%;
187+
max-width: none;
188+
min-width: 0;
189+
box-shadow:
190+
0 -1px 0 0 rgba(255, 255, 255, 0.06) inset,
191+
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
192+
font-size: 0.875rem;
193+
font-family: "Instrument Sans", sans-serif;
160194
font-weight: 500;
161-
line-height: 20px;
162-
/* 142.857% */
163-
letter-spacing: -0.0125em;
164-
color: var(--c-slate-9, #8B8D98);
165-
/* Shadow/Large */
166-
box-shadow: 0px 24px 12px 0px rgba(28, 32, 36, 0.02), 0px 8px 8px 0px rgba(28, 32, 36, 0.02), 0px 2px 6px 0px rgba(28, 32, 36, 0.02);
167-
transition: background-color 0.1s linear, width 0s;
195+
font-style: normal;
196+
line-height: 1.5rem;
197+
border: none;
198+
}
199+
[data-theme='light'] .ikp-search-bar__button:hover {
200+
background: var(--m-slate-2);
201+
}
202+
[data-theme='dark'] .ikp-search-bar__button:hover {
203+
background: var(--m-slate-10);
204+
}
205+
@media (min-width: 1024px) {
206+
.ikp-search-bar__button {
207+
width: 10rem;
208+
}
168209
}
169210
170211
[data-theme='light'] .ikp-search-bar__container,
171212
[data-theme='dark'] .ikp-search-bar__container {
172213
display: flex;
173214
justify-content: center;
174215
align-items: center;
216+
min-height: 2rem;
217+
max-height: 2rem;
218+
width: 10rem;
219+
max-width: 10rem;
175220
}
176221
177-
[data-theme='light'] .ikp-search-bar__button:hover,
222+
[data-theme='light'] .ikp-search-bar__button:hover {
223+
background-color: var(--m-slate-2);
224+
}
178225
[data-theme='dark'] .ikp-search-bar__button:hover {
179-
background-color: var(--c-slate-3, #F0F0F3);
226+
background-color: var(--m-slate-10);
180227
}
181228
182229
[data-theme='dark'] .ikp-modal__overlay {
183230
background: rgba(18, 17, 19, 0.50);
184231
backdrop-filter: blur(20px);
185232
}
186233
234+
[data-part="modal__content"] {
235+
font-family: "Instrument Sans", sans-serif;
236+
}
237+
187238
@media (max-width: 80em) {
239+
[data-theme='light'] .ikp-search-bar__container,
240+
[data-theme='dark'] .ikp-search-bar__container {
241+
width: auto !important;
242+
}
243+
188244
[data-theme='light'] .ikp-search-bar__button,
189245
[data-theme='dark'] .ikp-search-bar__button {
190246
padding: 2px 12px;
@@ -225,35 +281,34 @@ def add_hooks(self):
225281
}
226282
227283
.ikp-search-bar__kbd-wrapper {
228-
padding: 0px 8px;
284+
padding: 0px 0.25rem;
229285
justify-content: center;
230286
align-items: center;
231-
border-radius: 4px;
287+
border-radius: 0.25rem;
232288
box-shadow: none;
233-
color: var(--c-slate-9, #8B8D98);
289+
color: var(--m-slate-7, #67707E);
234290
font-family: "Instrument Sans";
235291
--ikp-colors-transparent: var(--c-slate-3, #FCFCFD);
236292
background: var(--c-slate-3, #F0F0F3) !important;
237-
font-size: 12px;
293+
font-size: 0.8125rem;
294+
font-weight: 475;
295+
line-height: 1.25rem;
296+
height: 1.25rem;
238297
font-style: normal;
239-
font-weight: 500;
240-
line-height: 20px;
241-
/* 166.667% */
242-
letter-spacing: -0.09px;
298+
margin-left: auto;
299+
width: fit-content;
243300
}
244301
245302
.ikp-search-bar__text,
246303
.ikp-search-bar__icon {
247-
color: var(--c-slate-9, #8B8D98);
304+
color: var(--m-slate-7, #67707E);
248305
font-weight: 500;
306+
font-style: normal;
307+
line-height: 1.5rem;
308+
font-size: 0.875rem;
249309
}
250310
`,
251311
},
252-
{
253-
key: "google-fonts-instrument",
254-
type: "link",
255-
value: "https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;700&display=swap",
256-
},
257312
],
258313
}
259314
},
@@ -265,6 +320,7 @@ def add_hooks(self):
265320
placeholder: 'Search',
266321
},
267322
aiChatSettings: { // optional typeof InkeepAIChatSettings
323+
aiAssistantAvatar: '/logos/small_logo.svg',
268324
exampleQuestions: [
269325
'How does Reflex work?',
270326
'What types of apps can I build with Reflex?',

‎pcweb/components/docpage/navbar/search.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
import reflex as rx
44

5-
from .typesense import typesense_search
5+
from .inkeep import inkeep
66

77

88
@rx.memo
99
def search_bar() -> rx.Component:
10-
return typesense_search()
10+
return inkeep()

0 commit comments

Comments
 (0)