Skip to content

Commit

Permalink
styling: add rounded mode to eCommerce search and option to hide draw…
Browse files Browse the repository at this point in the history 
…n text
  • Loading branch information
@skeptrunedev @fedhacks
skeptrunedev authored and fedhacks committed Dec 19, 2024
1 parent 59c2991 commit 8ba1270
Show file tree
Hide file tree
Showing 14 changed files with 288 additions and 210 deletions.
2 changes: 1 addition & 1 deletion clients/search-component/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"import": "./dist/vanilla/index.js"
}
},
"version": "0.2.32",
"version": "0.2.38",
"license": "MIT",
"homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
"scripts": {
Expand Down
14 changes: 10 additions & 4 deletions clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,17 @@ export const AIInitialMessage = () => {
}}
className="brand-name"
>
{(currentGroup?.name || props.brandName || "Trieve").replace(
/<[^>]*>/g,
""
)}
{(currentGroup?.name || props.brandName || "Trieve")
.replace(/<[^>]*>/g, "")
.split(" ")
.slice(0, 3)
.join(" ")}
</span>
{(currentGroup?.name || props.brandName || "Trieve")
.replace(/<[^>]*>/g, "")
.split(" ")
.slice(3)
.join(" ")}
</p>
<GroupChatImgCarousel />
</span>
Expand Down
6 changes: 5 additions & 1 deletion clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,11 @@ export const ChatMode = () => {
</div>
</div>
</div>
<div className="chat-footer-wrapper">
<div
className={`chat-footer-wrapper${
messages.length ? " with-messages" : ""
}`}
>
{currentGroup && (
<div className="chat-group-disclaimer">
<div>Chatting with {currentGroup.name.replace(/<[^>]*>/g, "")}</div>
Expand Down
44 changes: 23 additions & 21 deletions clients/search-component/src/TrieveModal/Search/ProductItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@ export const ProductItem = ({
[item]
);

const filteredVariants = useMemo(() => {
return uniquifyVariants(
item.chunk.metadata?.variants as unknown as {
featured_image: { src: string };
title: string;
}[]
)?.filter((variant) => variant.featured_image?.src);
}, [item]);

const [shownImage, setShownImage] = useState<string>(
item.chunk?.image_urls?.[0] || ""
);
Expand Down Expand Up @@ -170,29 +179,22 @@ export const ProductItem = ({
}}
/>
<>
{item.chunk.metadata?.variants?.length > 1 ? (
{filteredVariants.length > 1 ? (
<div className="variants">
<span className="variants-title">Variants:</span>
{uniquifyVariants(
item.chunk.metadata.variants as unknown as {
featured_image: { src: string };
title: string;
}[]
)
?.filter((variant) => variant.featured_image?.src)
?.map((variant) => (
<button
key={variant.title}
onClick={(ev) => {
ev.preventDefault();
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();
setShownImage(variant.featured_image?.src);
}}
>
{variant.title}
</button>
))}
{filteredVariants.map((variant) => (
<button
key={variant.title}
onClick={(ev) => {
ev.preventDefault();
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();
setShownImage(variant.featured_image?.src);
}}
>
{variant.title}
</button>
))}
</div>
) : null}
</>
Expand Down
70 changes: 40 additions & 30 deletions clients/search-component/src/TrieveModal/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ body {
background-color: var(--tv-zinc-50);
font-family: var(--tv-prop-brand-font-family);

f .group-chat-carousel {
@apply pl-2 flex gap-2 w-full overflow-x-auto;
.group-chat-carousel {
@apply pl-4 flex gap-2 w-full overflow-x-auto;
}

.suspense-fallback {
Expand Down Expand Up @@ -62,12 +62,13 @@ body {
&.chat-modal-mobile {
@apply flex flex-col top-0 sm:top-[calc(40%-30vh)] pt-4 max-h-[100vh] w-full sm:w-[90vw] rounded-none sm:rounded-lg;

&.docs {
@apply h-screen sm:h-auto;
}

.chat-outer-wrapper {
@apply justify-between w-full h-full mt-10 sm:mt-12;
}
.system-information-wrapper {
@apply sm:mb-8;
}
}

.trieve-elements-docs {
Expand All @@ -82,7 +83,7 @@ body {
}

.trieve-elements-ecommerce {
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-0.5 py-2 max-w-6xl mx-auto pr-0.5;
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-0.5 py-2 max-w-7xl mx-auto pr-0.5;

> li.start-chat-li {
@apply col-span-2 sm:col-span-3 md:col-span-4 lg:col-span-5;
Expand Down Expand Up @@ -157,7 +158,7 @@ body {
.mode-switch-wrapper.ecommerce.search {
@apply top-[2.625rem];

right: calc(max(calc(50vw - 36rem), 1.25rem) + 0.25rem);
right: calc(max(calc(50% - 39.85rem), 1.25rem) + 0.25rem);
}

.mode-switch-wrapper.ecommerce.chat {
Expand All @@ -170,10 +171,11 @@ body {
border-color: var(--tv-zinc-200);

li {
@apply border-t-2 rounded-sm;

button {
@apply flex gap-1 items-center py-1 px-2;
}
@apply border-t-2;
border-color: transparent;
&:hover,
&.active {
Expand Down Expand Up @@ -224,7 +226,7 @@ body {
}

.bottom-row {
@apply flex items-center 2xl:px-0 w-full mx-auto max-w-6xl;
@apply flex items-center 2xl:px-0 w-full mx-auto max-w-7xl;

.spacer {
@apply flex-1;
Expand Down Expand Up @@ -406,16 +408,24 @@ body {
}

ul {
@apply list-disc pl-4 my-4;
@apply list-disc pl-4 my-4 overflow-hidden;
}

ol {
@apply list-decimal pl-4 my-4;
@apply list-decimal pl-4 my-4 overflow-hidden;
}

hr {
@apply mb-4;
}
}

.system.ecommerce {
@apply max-w-[100vw];

hr {
@apply mb-4;
}
}
}

Expand Down Expand Up @@ -503,7 +513,7 @@ body {
}

.chat-outer-wrapper {
@apply flex flex-col mt-12 px-2 scroll-smooth;
@apply flex flex-col mt-12 px-4 scroll-smooth;

.ai-message {
.message-wrapper {
Expand All @@ -520,7 +530,7 @@ body {
@apply sm:w-12 sm:h-12 rounded-full flex items-center space-x-2;

&.user {
@apply sm:w-10 h-10 ml-1;
@apply sm:w-10 ml-1;
}

&.assistant {
Expand All @@ -541,11 +551,11 @@ body {
}

.brand-paragraph {
@apply leading-8;
@apply leading-8 w-full;
}

.brand-name {
@apply text-white px-1.5 py-1 rounded-md font-[500] whitespace-nowrap text-ellipsis;
@apply text-white px-1.5 py-1 rounded-md font-[500] w-fit;
}
}
}
Expand All @@ -556,7 +566,7 @@ body {
@apply w-full h-full flex justify-center items-center shrink-0;

img {
@apply max-h-48 shrink-0;
@apply max-h-48 shrink-0 overflow-hidden rounded-lg;
}
}

Expand All @@ -575,10 +585,8 @@ body {
/* SUGGESTED QUESTIONS */

.system-information-wrapper {
@apply mb-10;

&.with-group {
@apply mb-24;
@apply mb-8 sm:mb-0;
}

p {
Expand Down Expand Up @@ -612,7 +620,7 @@ body {
}

.questions {
@apply text-sm flex flex-wrap gap-2;
@apply text-sm flex flex-wrap gap-2 pb-12;

.suggested-question {
@apply p-2 text-left rounded-md border transition-all;
Expand Down Expand Up @@ -666,7 +674,7 @@ body {
}

form {
@apply w-full;
@apply w-full max-w-full m-0;
}

.back-icon {
Expand All @@ -676,7 +684,7 @@ body {
}

.input-wrapper.ecommerce {
@apply max-w-6xl mx-auto;
@apply max-w-7xl mx-auto;
}

input {
Expand All @@ -698,23 +706,29 @@ body {
}

input.search-input.ecommerce {
@apply rounded-sm;
@apply rounded-lg;
}

.chat-footer-wrapper {
.chat-group-disclaimer {
@apply flex items-center justify-between bg-zinc-200/60 dark:bg-zinc-700 px-3 py-1 text-sm opacity-70 mx-2 border border-zinc-300 dark:border-zinc-500 border-b-transparent;
}

&:not(.with-messages) {
@apply mt-12 sm:mt-0;
}

input {
@apply rounded-none mb-0;
}
}

ul {
&:not(.chat-ul) {
@apply overflow-y-auto overflow-x-hidden max-h-[calc(60vh-130px)] sm:max-h-[420px];
@apply overflow-y-auto overflow-x-hidden max-h-[calc(80vh-130px)] sm:max-h-[calc(60vh-130px)];
&:not(.trieve-elements-docs) {
@apply max-h-[calc(98vh-130px)] sm:max-h-[calc(60vh-130px)];

&:not(.commands) &:not(.trieve-elements-ecommerce) {
@apply mt-4;
}
Expand Down Expand Up @@ -1057,11 +1071,7 @@ body {
}

#trieve-search-modal.ecommerce {
@apply top-0 max-w-full w-screen pt-10 px-4 rounded-none;
}

#trieve-search-modal.chat-modal-mobile.ecommerce {
@apply top-0 max-w-full w-screen pt-0 px-4;
@apply top-1 max-w-[90rem] w-[95vw] pt-10 px-4 rounded-lg;
}
}

Expand Down Expand Up @@ -1192,7 +1202,7 @@ body {
}

.floating-action-button {
@apply fixed flex flex-row w-24 h-10 gap-3 justify-center items-center text-sm cursor-pointer text-white rounded-xl;
@apply fixed flex flex-row w-24 h-10 gap-3 justify-center items-center text-sm cursor-pointer text-white rounded-xl z-[999] border-0;
background-color: var(--tv-prop-brand-color);
font-family: var(--tv-prop-brand-font-family);
}
Expand Down
Loading

0 comments on commit 8ba1270

Please sign in to comment.