Skip to content

Commit 794bcb4

Browse files
skeptrunedevcdxker
skeptrunedev
authored and
cdxker
committed
style(shopify): make sure component works for older themes with more default overrides
1 parent 5b07f26 commit 794bcb4

8 files changed

Lines changed: 113 additions & 29 deletions

File tree

‎clients/search-component/src/TrieveModal/Chat/Carousel.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,8 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
8080
return (
8181
<div className="carousel-root tv-relative tv-w-full tv-max-w-full tv-overflow-hidden">
8282
<div
83-
className="tv-absolute tv-left-0 tv-top-0 tv-bottom-0 tv-w-12 tv-pointer-events-none tv-z-10"
83+
className="tv-absolute tv-left-0 tv-top-0 tv-bottom-0 tv-w-12 tv-pointer-events-none tv-z-10 tv-carousel-gradient"
8484
style={{
85-
background:
86-
"linear-gradient(to right, rgb(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%)",
8785
opacity: showLeftArrow ? 0.4 : 0,
8886
transition: "opacity 0.2s ease",
8987
}}
@@ -131,10 +129,8 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
131129
))}
132130
</ul>
133131
<div
134-
className="tv-absolute tv-right-0 tv-top-0 tv-bottom-0 tv-w-12 tv-pointer-events-none tv-z-10"
132+
className="tv-absolute tv-right-0 tv-top-0 tv-bottom-0 tv-w-12 tv-pointer-events-none tv-z-10 tv-carousel-gradient"
135133
style={{
136-
background:
137-
"linear-gradient(to left, rgb(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%)",
138134
opacity: showRightArrow ? 0.4 : 0,
139135
transition: "opacity 0.2s ease",
140136
}}

‎clients/search-component/src/TrieveModal/Chat/ChatInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export const ChatInput = ({
8686
<input
8787
ref={chatInput}
8888
value={currentQuestion}
89-
className={`${props.inline ? "inline-input " : ""}${mode} tv-rounded-md tv-mb-0`}
89+
className={`${props.inline ? "inline-input " : ""}${mode} tv-rounded-md tv-mb-0 tv-max-w-full`}
9090
onChange={(e) => setCurrentQuestion(e.target.value)}
9191
disabled={props.previewTopicId != undefined}
9292
placeholder={
@@ -107,7 +107,7 @@ export const ChatInput = ({
107107
askQuestion(currentQuestion);
108108
}
109109
}}
110-
className="tv-top-[0.825rem] tv-right-3 tv-absolute tv-z-20"
110+
className="tv-top-[0.825rem] tv-right-3 tv-absolute tv-z-20 tv-bg-transparent tv-text-zinc-700 tv-block tv-dark-text-white paper-plane-button-container"
111111
>
112112
<i className="fa-solid fa-paper-plane"></i>
113113
</button>

‎clients/search-component/src/TrieveModal/Chat/ResponseMessage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,7 @@ export const Message = ({
421421
{props.previewTopicId == undefined && (
422422
<div className="feedback-wrapper tv-gap-2 w-full tv-flex">
423423
<span className="spacer tv-grow"></span>
424-
<div className="feedback-icons tv-flex tv-gap-2">
424+
<div className="feedback-icons tv-flex tv-items-center tv-gap-2">
425425
{copied ? (
426426
<span>
427427
<i className="fa-regular fa-circle-check"></i>

‎clients/search-component/src/TrieveModal/Chat/SuggestedQuestions.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ export const SuggestedQuestions = ({
2424
}
2525

2626
const handleSuggestedQuestion = async (q: string) => {
27-
28-
2927
setCurrentQuestion(q);
3028
askQuestion(q);
31-
32-
const requestId = messages[messages.length - 1]?.queryId ?? "00000000-0000-0000-0000-000000000000";
29+
30+
const requestId =
31+
messages[messages.length - 1]?.queryId ??
32+
"00000000-0000-0000-0000-000000000000";
3333

3434
await trieveSDK.sendAnalyticsEvent({
3535
event_name: `site-followup_query`,
@@ -71,7 +71,11 @@ export const SuggestedQuestions = ({
7171
className="suggested-question tv-cursor-pointer tv-border tv-rounded-md tv-p-1 tv-text-xs disabled:tv-cursor-not-allowed tv-text-center"
7272
title="Refresh suggested questions"
7373
>
74-
<ArrowRotateRightIcon height={15} width={15} />
74+
<ArrowRotateRightIcon
75+
height={15}
76+
width={15}
77+
className="refresh-suggestions-icon"
78+
/>
7579
</button>{" "}
7680
{!suggestedQuestions.length && (
7781
<span className="suggested-question tv-text-nowrap empty-state-loading">
@@ -84,10 +88,11 @@ export const SuggestedQuestions = ({
8488
handleSuggestedQuestion(q);
8589
}}
8690
key={q}
87-
className={`suggested-question tv-flex tv-gap-1 tv-items-center${isLoadingSuggestedQueries ? " loading" : ""
88-
}`}
91+
className={`suggested-question tv-flex tv-gap-1 tv-items-center${
92+
isLoadingSuggestedQueries ? " loading" : ""
93+
}`}
8994
>
90-
<SparklesIcon width={15} height={15} />
95+
<SparklesIcon fill="none" width={15} height={15} />
9196
{q}
9297
</button>
9398
))}

‎clients/search-component/src/TrieveModal/Search/UploadAudio.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const UploadAudio = () => {
7474
<div>
7575
<button
7676
className={cn(
77-
"tv-rounded tv-z-20 tv-cursor-pointer",
77+
"tv-rounded tv-z-20 tv-cursor-pointer tv-bg-transparent mic-button-container",
7878
mode === "chat" && "tv-right-[60px] tv-top-[17px] tv-absolute",
7979
)}
8080
onClick={(e) => {

‎clients/search-component/src/TrieveModal/Search/UploadImage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const UploadImage = () => {
5959
<button
6060
onClick={handleClick}
6161
className={`tv-rounded ${
62-
mode === "chat" && "tv-right-9 tv-top-[0.825rem] tv-absolute"
62+
mode === "chat" && "tv-right-9 tv-top-[0.825rem] tv-absolute image-button-container"
6363
} tv-z-20 tv-dark-text-white tv-text-zinc-700`}
6464
disabled={props.previewTopicId != undefined}
6565
>

‎clients/search-component/src/TrieveModal/index.css‎

Lines changed: 91 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,46 @@ body {
2929
#trieve-search-modal {
3030
font-family: var(--tv-prop-brand-font-family);
3131

32+
button {
33+
min-width: auto;
34+
background-color: transparent;
35+
color: inherit;
36+
line-height: inherit;
37+
padding: 0;
38+
font-size: inherit;
39+
display: inherit;
40+
41+
&.mic-button-container,
42+
&.image-button-container,
43+
&.paper-plane-button-container {
44+
height: 16px;
45+
width: 16px;
46+
fill: var(--tv-zinc-700);
47+
color: var(--tv-zinc-700);
48+
display: block;
49+
}
50+
51+
&:focus {
52+
outline: none;
53+
box-shadow: none;
54+
}
55+
}
56+
57+
svg {
58+
height: 16px;
59+
width: 16px;
60+
fill: currentColor;
61+
margin: 0;
62+
vertical-align: middle;
63+
}
64+
65+
ol,
66+
ul,
67+
strong {
68+
font-size: inherit;
69+
color: inherit;
70+
}
71+
3272
.tv-guarantee-block {
3373
display: block;
3474
}
@@ -241,6 +281,14 @@ body {
241281
display: none;
242282
}
243283

284+
.tv-carousel-gradient {
285+
background: linear-gradient(
286+
to left,
287+
rgb(255, 255, 255, 0.8) 0%,
288+
rgba(255, 255, 255, 0) 100%
289+
);
290+
}
291+
244292
.tv-carousel-item {
245293
flex: 0 0 auto;
246294
padding: 0 0.15rem;
@@ -379,15 +427,17 @@ body {
379427
}
380428

381429
ul:not(.carousel-scroll) {
382-
@apply tv-list-disc tv-pl-4 tv-my-4 tv-overflow-hidden;
430+
@apply tv-list-disc tv-pl-5 tv-my-4 tv-overflow-hidden;
383431
}
384432

385433
ol {
386434
@apply tv-list-decimal tv-pl-5 tv-my-4 tv-overflow-hidden;
387435
}
388436

389437
li:not(.tv-carousel-item) {
390-
@apply tv-my-2;
438+
@apply tv-my-3;
439+
440+
list-style: unset;
391441
}
392442

393443
li.tv-carousel-item {
@@ -482,6 +532,10 @@ body {
482532

483533
&.assistant {
484534
@apply tv-my-3;
535+
536+
svg {
537+
fill: none;
538+
}
485539
}
486540

487541
img {
@@ -573,6 +627,10 @@ body {
573627
&.empty-state-loading {
574628
@apply tv-animate-pulse;
575629
}
630+
631+
svg {
632+
fill: none;
633+
}
576634
}
577635
}
578636

@@ -583,6 +641,17 @@ body {
583641
@apply tv-p-2 tv-text-left tv-rounded-md tv-border tv-transition-all tv-border-solid;
584642
border-color: var(--tv-zinc-200);
585643
border: 1px solid var(--tv-zinc-200);
644+
background-color: transparent;
645+
646+
.refresh-suggestions-icon {
647+
fill: currentcolor;
648+
height: 15px;
649+
width: 15px;
650+
}
651+
652+
svg {
653+
fill: none;
654+
}
586655

587656
&:hover {
588657
background-color: var(--tv-zinc-200);
@@ -921,14 +990,23 @@ body {
921990
}
922991
}
923992

924-
.carousel-item {
993+
.tv-carousel-gradient {
994+
background: linear-gradient(
995+
to right,
996+
rgba(120, 120, 120, 0) 0%,
997+
rgba(120, 120, 120, 0.5) 100%
998+
);
999+
}
1000+
1001+
.tv-carousel-item {
9251002
color: var(--tv-zinc-100);
9261003
background-color: var(--tv-zinc-800);
927-
border-color: var(--tv-zinc-800);
1004+
border: 1px solid var(--tv-zinc-800);
9281005

9291006
&:hover {
9301007
color: var(--tv-zinc-50);
931-
background-color: var(--tv-zinc-900);
1008+
border-color: var(--tv-zinc-600);
1009+
background-color: var(--tv-zinc-800);
9321010
}
9331011

9341012
a {
@@ -937,10 +1015,11 @@ body {
9371015

9381016
&:hover {
9391017
color: var(--tv-zinc-50);
940-
background-color: var(--tv-zinc-900);
1018+
background-color: var(--tv-zinc-800);
9411019
}
9421020
}
9431021
}
1022+
9441023
.kbd-wrapper {
9451024
kbd {
9461025
color: var(--tv-zinc-400);
@@ -1227,6 +1306,12 @@ body {
12271306
@apply tv-rounded-full tv-p-[0.35rem] tv-ml-0.5 tv-flex tv-justify-center tv-items-center;
12281307

12291308
background-color: var(--tv-prop-brand-color);
1309+
1310+
svg {
1311+
width: 26px;
1312+
height: 26px;
1313+
fill: white;
1314+
}
12301315
}
12311316

12321317
.floating-search-btn-container {

‎clients/trieve-shopify-extension/vite.config.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,7 @@ export default defineConfig(({ mode }) => {
4848
// See https://vitejs.dev/config/server-options.html#server-fs-allow for more information
4949
allow: ["app", "node_modules"],
5050
},
51-
allowedHosts: (process.env.REMIX_SERVER_URL || env.REMIX_SERVER_URL)
52-
? [(process.env.REMIX_SERVER_URL || env.REMIX_SERVER_URL).replace("https://", "")]
53-
: true,
51+
allowedHosts: true,
5452
},
5553
plugins: [
5654
remix({
@@ -91,7 +89,7 @@ export default defineConfig(({ mode }) => {
9189
"d3-time-format",
9290
"internmap",
9391
"use-debounce",
94-
"trieve-search-component"
92+
"trieve-search-component",
9593
],
9694
},
9795
} satisfies UserConfig;

0 commit comments

Comments
 (0)