- {chat.map((message, idx) => (
-
- ))}
+ {chat.map((message, idx) => (
+
+ ))}
+ {currentGroup && (
+
{keyCombo.map((key) => (
-
+
+ )}
Chatting with {currentGroup.name}
+
+
-
diff --git a/clients/search-component/src/TrieveModal/Chat/GroupChatImgCarousel.tsx b/clients/search-component/src/TrieveModal/Chat/GroupChatImgCarousel.tsx
new file mode 100644
index 0000000000..ef92c2eb71
--- /dev/null
+++ b/clients/search-component/src/TrieveModal/Chat/GroupChatImgCarousel.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import React from "react";
+import { useModalState } from "../../utils/hooks/modal-context";
+import { cached } from "../../utils/cache";
+import { getAllChunksForGroup } from "../../utils/trieve";
+
+export const GroupChatImgCarousel = () => {
+ const { currentGroup, trieveSDK } = useModalState();
+
+ const [groupCarouselItems, setGroupCarouselItems] = useState<
+ string[] | null
+ >();
+
+ useEffect(() => {
+ const setGroupCarousel = async () => {
+ if (currentGroup) {
+ const groupChunks = await cached(() => {
+ return getAllChunksForGroup(currentGroup.id, trieveSDK);
+ }, `chunk-ids-${currentGroup.id}`);
+
+ const images = groupChunks
+ .map((chunk) => {
+ return chunk.image_urls?.[0] || undefined;
+ })
+ .filter(Boolean) as string[];
+ // Deduplicate with set
+ const uniqueImages = [...new Set(images)];
+ setGroupCarouselItems(uniqueImages);
+ } else {
+ setGroupCarouselItems(null);
+ }
+ };
+
+ setGroupCarousel();
+ }, [currentGroup]);
+
+ return (
+ <>
+ {currentGroup && groupCarouselItems ? (
+
+ {groupCarouselItems.map((image) => (
+
+ ) : undefined}
+
+ );
+};
diff --git a/clients/search-component/src/TrieveModal/OpenModalButton.tsx b/clients/search-component/src/TrieveModal/OpenModalButton.tsx
index 67c9ccbcca..8cd51314a3 100644
--- a/clients/search-component/src/TrieveModal/OpenModalButton.tsx
+++ b/clients/search-component/src/TrieveModal/OpenModalButton.tsx
@@ -32,7 +32,6 @@ export const OpenModalButton = ({ setOpen }: OpenModalButtonProps) => {
className={`${props.theme} ${
props.responsive ?? false ? "responsive" : ""
}`}
- key="open-button-container"
>
+ 
+
+ ))}
+
+
{key.ctrl ? (
diff --git a/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx b/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx
index 3bd3510bbc..194bf76680 100644
--- a/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx
+++ b/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx
@@ -1,27 +1,47 @@
-import React, { useState, useMemo } from "react";
+import React, { useMemo } from "react";
import { ProductItem } from "./ProductItem";
import { GroupChunk } from "../../utils/types";
-
+import { findCommonName, guessTitleAndDesc } from "../../utils/estimation";
type Props = {
requestID: string;
- // Group of Groups (with subvariants)
group: GroupChunk[];
index: number;
-}
+};
export const ProductGroupItem = ({ index, group, requestID }: Props) => {
+ const selectedItem = useMemo(
+ () => group[0].chunks[0],
+ [],
+ );
+
+ // Shopify
+ const betterGroupName = useMemo(
+ () => {
+ const productNames: string[] = [];
+ group.forEach(
+ g => g.chunks.forEach(c => {
+ const {title} = guessTitleAndDesc(c);
+ productNames.push(title)
+ })
+ )
+
+ // Calculate the overlap of the strings
+ const commonName = findCommonName(productNames);
+ return commonName || undefined;
+ },
+ [group]
+ )
- const [groupItemIndex] = useState(0);
- const selectedItem = useMemo(() => group[groupItemIndex].chunks[0], [groupItemIndex]);
return (
(null);
- let descriptionHtml = item.highlights
- ? item.highlights.join("...")
- : item.chunk.chunk_html || "";
- const $descriptionHtml = document.createElement("div");
- $descriptionHtml.innerHTML = descriptionHtml;
- $descriptionHtml.querySelectorAll("b").forEach((b) => {
- return b.replaceWith(b.textContent || "");
- });
- descriptionHtml = $descriptionHtml.innerHTML;
-
- const chunkHtmlHeadingsDiv = document.createElement("div");
- chunkHtmlHeadingsDiv.innerHTML = item.chunk.chunk_html || "";
- const chunkHtmlHeadings = chunkHtmlHeadingsDiv.querySelectorAll(
- "h1, h2, h3, h4, h5, h6"
+ const { title, descriptionHtml } = useMemo(
+ () => guessTitleAndDesc(item),
+ [item],
);
- const $firstHeading = chunkHtmlHeadings[0] ?? document.createElement("h1");
- $firstHeading?.querySelectorAll(":not(mark)")?.forEach((tag) => {
- return tag.replaceWith(tag.textContent || "");
- });
- const firstHeadingIdDiv = document.createElement("div");
- firstHeadingIdDiv.innerHTML = $firstHeading.id;
- const cleanFirstHeading = $firstHeading?.innerHTML;
-
- descriptionHtml = descriptionHtml
- .replace(" ", " ")
- .replace(cleanFirstHeading || "", "");
-
- for (const heading of chunkHtmlHeadings) {
- const curHeadingText = heading.textContent;
-
- descriptionHtml = descriptionHtml.replace(curHeadingText || "", "");
- }
- descriptionHtml = descriptionHtml.replace(/([.,!?;:])/g, "$1 ");
const [shownImage, setShownImage] = useState(
- item.chunk?.image_urls?.[0] || ""
+ item.chunk?.image_urls?.[0] || "",
);
- const title = `${cleanFirstHeading ||
- item.chunk.metadata?.title ||
- item.chunk.metadata?.page_title ||
- item.chunk.metadata?.name
- }`;
-
const formatPrice = (price: number | null | undefined) => {
return price
- ? `${props.currencyPosition === "before" ? props.defaultCurrency ?? "$" : ""
- }${price}${props.currencyPosition === "after" ? props.defaultCurrency ?? "$" : ""
- }`
- : ""
+ ? `${
+ props.currencyPosition === "before"
+ ? props.defaultCurrency ?? "$"
+ : ""
+ }${price}${
+ props.currencyPosition === "after" ? props.defaultCurrency ?? "$" : ""
+ }`
+ : "";
};
-
const formatedPrice = formatPrice(item.chunk.num_value);
let priceMin = item.chunk.num_value ?? 0;
@@ -98,7 +80,9 @@ export const ProductItem = ({ item, requestID, index, className }: Props) => {
}
}
}
- const formatedPriceRange = `${formatPrice(priceMin)} - ${formatPrice(priceMax)}`;
+ const formatedPriceRange = `${formatPrice(priceMin)} - ${formatPrice(
+ priceMax,
+ )}`;
if (!title.trim() || title == "undefined") {
return null;
@@ -106,7 +90,7 @@ export const ProductItem = ({ item, requestID, index, className }: Props) => {
const onResultClick = async (
chunk: Chunk & { position: number },
- requestID: string
+ requestID: string,
) => {
if (props.onResultClick) {
props.onResultClick(chunk);
@@ -134,7 +118,7 @@ export const ProductItem = ({ item, requestID, index, className }: Props) => {
...item.chunk,
position: index,
},
- requestID
+ requestID,
)
}
href={item.chunk.link ?? ""}
@@ -156,12 +140,27 @@ export const ProductItem = ({ item, requestID, index, className }: Props) => {
-
- {priceMin !== priceMax ? formatedPriceRange : formatedPrice} -
+
+
+ {priceMin !== priceMax ? formatedPriceRange : formatedPrice} +
+ {group && ( + + )} +{ {item.chunk.metadata?.variants?.length > 1 ? (
Variants:
- {(
+ {uniquifyVariants(
item.chunk.metadata.variants as unknown as {
featured_image: { src: string };
title: string;
- }[]
+ }[],
)?.map((variant) => (