feat: finish making the demo pages automated

skeptrunedev · densumesh · commit 9d2587d74bc0 · 2025-05-16T02:05:14.000-07:00
diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -18,10 +18,12 @@ import {
 import { createStore } from "solid-js/store";
 import {
   $OpenApiTs,
+  ChunkMetadata,
   CrawlRequest,
   PriceToolCallOptions,
   PublicPageTabMessage,
   RelevanceToolCallOptions,
+  SearchOverGroupsResponseBody,
 } from "trieve-ts-sdk";
 import FilterSidebarBuilder from "../../components/FilterSidebarBuilder";
 import { DatasetContext } from "../../contexts/DatasetContext";
@@ -254,6 +256,15 @@ const PublicPageControls = () => {
     };
   });
 
+  createEffect(() => {
+    const singleProductOptions = extraParams.singleProductOptions;
+    const hasKey =
+      singleProductOptions &&
+      Object.keys(singleProductOptions).length > 0 &&
+      Object.values(singleProductOptions).some((option) => option);
+    setExtraParams("inline", hasKey);
+  });
+
   return (
     <>
       <Show when={!isPublic()}>
@@ -1650,7 +1661,10 @@ const PublicPageControls = () => {
 };
 
 export const SingleProductOptions = () => {
+  const [loadingAutoFill, setLoadingAutoFill] = createSignal(false);
   const { extraParams, setExtraParams } = usePublicPage();
+  const datasetContext = useContext(DatasetContext);
+  const trieve = useTrieve();
 
   return (
     <details class="my-4">
@@ -1690,17 +1704,63 @@ export const SingleProductOptions = () => {
         </div>
         <div class="grow">
           <label class="block">Product Name</label>
-          <input
-            placeholder="Name of the product to display"
-            value={extraParams.singleProductOptions?.productName || ""}
-            onInput={(e) => {
-              setExtraParams("singleProductOptions", {
-                ...extraParams.singleProductOptions,
-                productName: e.currentTarget.value,
-              });
-            }}
-            class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-          />
+          <div class="flex items-center gap-2">
+            <input
+              placeholder="Name of the product to display"
+              value={extraParams.singleProductOptions?.productName || ""}
+              onInput={(e) => {
+                setExtraParams("singleProductOptions", {
+                  ...extraParams.singleProductOptions,
+                  productName: e.currentTarget.value,
+                });
+              }}
+              class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+            />
+            <button
+              onClick={() => {
+                setLoadingAutoFill(true);
+                void trieve
+                  .fetch("/api/chunk_group/group_oriented_search", "post", {
+                    data: {
+                      query:
+                        extraParams.singleProductOptions?.productName || "",
+                      page_size: 10,
+                      search_type: "fulltext",
+                    },
+                    datasetId: datasetContext.datasetId(),
+                  })
+                  .then((res) => {
+                    const typedRes: SearchOverGroupsResponseBody =
+                      res as SearchOverGroupsResponseBody;
+                    const firstGroup = typedRes.results?.length
+                      ? typedRes.results[0]
+                      : null;
+                    const firstChunk = firstGroup?.chunks?.length
+                      ? firstGroup.chunks[0]
+                      : null;
+                    if (!firstGroup || !firstChunk) {
+                      return;
+                    }
+                    setExtraParams("singleProductOptions", {
+                      groupTrackingId: firstGroup.group.tracking_id,
+                      productTrackingId: firstChunk.chunk.tracking_id,
+                      productPrimaryImageUrl: firstChunk.chunk.image_urls
+                        ?.length
+                        ? firstChunk.chunk.image_urls[0]
+                        : "",
+                      productDescriptionHtml: (
+                        firstChunk.chunk as ChunkMetadata
+                      ).chunk_html,
+                    });
+                    setLoadingAutoFill(false);
+                  });
+              }}
+              disabled={loadingAutoFill()}
+              class="inline-flex justify-center rounded-md bg-magenta-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-magenta-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-magenta-900 disabled:animate-pulse min-w-[130px]"
+            >
+              {loadingAutoFill() ? "Loading..." : "Auto Fill"}
+            </button>
+          </div>
         </div>
       </div>
       <div class="flex gap-4 pb-2 pt-2">
@@ -1733,7 +1793,6 @@ export const SingleProductOptions = () => {
             value={extraParams.singleProductOptions?.productQuestions || []}
             onChange={(e) => {
               setExtraParams("singleProductOptions", {
-                ...extraParams.singleProductOptions,
                 productQuestions: e,
               });
             }}
@@ -1745,35 +1804,35 @@ export const SingleProductOptions = () => {
       </div>
       <div class="flex gap-4 pb-2 pt-2">
         <div class="grow">
-          <label class="block">Recommendation Search Query</label>
-          <input
-            placeholder="Search query to use for recommendations"
-            value={extraParams.singleProductOptions?.recSearchQuery || ""}
+          <label class="block">Product Description HTML</label>
+          <textarea
+            cols={2}
+            placeholder="Description of the page"
+            value={
+              extraParams.singleProductOptions?.productDescriptionHtml || ""
+            }
             onInput={(e) => {
               setExtraParams("singleProductOptions", {
                 ...extraParams.singleProductOptions,
-                recSearchQuery: e.currentTarget.value,
+                productDescriptionHtml: e.currentTarget.value,
               });
+              setExtraParams("inline", !!e.currentTarget.value);
             }}
             class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
           />
         </div>
       </div>
       <div class="flex gap-4 pb-2 pt-2">
         <div class="grow">
-          <label class="block">Product Description HTML</label>
-          <textarea
-            cols={2}
-            placeholder="Description of the page"
-            value={
-              extraParams.singleProductOptions?.productDescriptionHtml || ""
-            }
+          <label class="block">Recommendation Search Query</label>
+          <input
+            placeholder="Search query to use for recommendations"
+            value={extraParams.singleProductOptions?.recSearchQuery || ""}
             onInput={(e) => {
               setExtraParams("singleProductOptions", {
                 ...extraParams.singleProductOptions,
-                productDescriptionHtml: e.currentTarget.value,
+                recSearchQuery: e.currentTarget.value,
               });
-              setExtraParams("inline", !!e.currentTarget.value);
             }}
             class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
           />
diff --git a/frontends/shared/ui/MultiStringInput.tsx b/frontends/shared/ui/MultiStringInput.tsx
@@ -13,11 +13,6 @@ interface MultiStringInputProps {
   disabled?: boolean;
 }
 
-type TEntry = {
-  value: string;
-  id: string;
-};
-
 const addBlankStringIfEmpty = (value: string[]) => {
   if (value.length === 0) {
     return [""];
@@ -26,16 +21,13 @@ const addBlankStringIfEmpty = (value: string[]) => {
 };
 
 export const MultiStringInput = (props: MultiStringInputProps) => {
-  const [proxyStore, setProxyStore] = createStore<TEntry[]>([]);
-
-  createEffect(() => {
-    setProxyStore(
-      addBlankStringIfEmpty(props.value).map((value) => ({
-        value,
-        id: Math.random().toString(36).slice(2),
-      })),
-    );
-  });
+  const [proxyStore, setProxyStore] = createStore(
+    // eslint-disable-next-line solid/reactivity
+    addBlankStringIfEmpty(props.value).map((value) => ({
+      value,
+      id: Math.random().toString(36).slice(2),
+    })),
+  );
 
   createEffect(() => {
     props.onChange(
diff --git a/server/src/public/page.html b/server/src/public/page.html
@@ -564,7 +564,7 @@
           </div>
           {% endif %}
         </div>
-        {% if params.searchPageProps.display %}
+        {% if params.searchPageProps and params.searchPageProps.display %}
         <div id="inline-serp-root"></div>
         {% endif %}
         {% if params.videoLink and params.videoPosition == "static" %}
diff --git a/server/src/public/product.html b/server/src/public/product.html
@@ -36,34 +36,8 @@
         <div class="mt-2 text-gray-500 dark:text-gray-300 paragraph-text">
           {{ params.singleProductOptions.productDescriptionHtml|safe }}
         </div>
-        {% endif %} {% if params.inline and params.singleProductOptions and
-        params.singleProductOptions.productName %}
+        {% endif %} {% if params.inline and params.singleProductOptions %}
         <div id="inline-root"></div>
-        {% else %}
-        <div class="mt-4 border-t border-gray-200">
-          <h3 class="text-brand-color text-sm font-medium mt-4">
-            <span class="text-brand-color"
-              ><i class="fa-solid fa-wand-magic-sparkles"></i
-            ></span>
-            Ask AI
-          </h3>
-          <div class="starter-questions flex flex-wrap gap-1 mt-2">
-            {% for question in params.singleProductOptions.productQuestions %}
-            <button
-              type="button"
-              class="px-3 py-1.5 text-sm rounded-lg text-brand-color"
-            >
-              {{ question }}
-            </button>
-            {% endfor %}
-            <button
-              type="button"
-              class="bg-brand-color px-3 py-1.5 text-sm rounded-lg text-white"
-            >
-              Ask something else
-            </button>
-          </div>
-        </div>
         {% endif %}
       </div>
     </section>
@@ -143,7 +117,7 @@ <h4 class="text-sm text-gray-500 dark:text-gray-300 mt-2 w-fit">
 
   const getGroupRecommendations = async (
     positiveGroupTrackingIds,
-    negativeGroupTrackingIds
+    negativeGroupTrackingIds,
   ) => {
     const recommendations = await fetch(
       `${window.paramsData.baseUrl}/api/chunk_group/recommend`,
@@ -165,7 +139,7 @@ <h4 class="text-sm text-gray-500 dark:text-gray-300 mt-2 w-fit">
           negative_group_tracking_ids: negativeGroupTrackingIds,
         }),
         credentials: "omit",
-      }
+      },
     );
 
     const recommendationsData = await recommendations.json();
@@ -212,16 +186,16 @@ <h4 class="text-sm text-gray-500 dark:text-gray-300 mt-2 w-fit">
             curWindowRecData[oppositeField] = curWindowRecData[
               oppositeField
             ]?.filter(
-              (id) => id !== recProduct.getAttribute("x-group-tracking-id")
+              (id) => id !== recProduct.getAttribute("x-group-tracking-id"),
             );
 
             if (isActive) {
               curWindowRecData[field] = curWindowRecData[field].filter(
-                (id) => id !== recProduct.getAttribute("x-group-tracking-id")
+                (id) => id !== recProduct.getAttribute("x-group-tracking-id"),
               );
             } else {
               curWindowRecData[field].push(
-                recProduct.getAttribute("x-group-tracking-id")
+                recProduct.getAttribute("x-group-tracking-id"),
               );
             }
             window.recData = curWindowRecData;
@@ -233,7 +207,7 @@ <h4 class="text-sm text-gray-500 dark:text-gray-300 mt-2 w-fit">
             ]);
             getGroupRecommendations(
               window.recData.positiveGroupTrackingIds ?? [],
-              window.recData.negativeGroupTrackingIds ?? []
+              window.recData.negativeGroupTrackingIds ?? [],
             );
           });
         });
@@ -264,7 +238,7 @@ <h4 class="text-sm text-gray-500 dark:text-gray-300 mt-2 w-fit">
       const chunkHtmlElement = document.createElement("div");
       chunkHtmlElement.innerHTML = chunk.chunk_html;
       const firstHeading = chunkHtmlElement.querySelector(
-        "h1, h2, h3, h4, h5, h6"
+        "h1, h2, h3, h4, h5, h6",
       );
       if (firstHeading) {
         firstHeading.remove();
@@ -287,7 +261,7 @@ <h4 class="text-sm text-gray-500 dark:text-gray-300 mt-2 w-fit">
 
       const chunkElement = document.createElement("div");
       chunkElement.classList.add(
-        ...["rec", "w-64", "flex-shrink-0", "flex", "flex-col"]
+        ...["rec", "w-64", "flex-shrink-0", "flex", "flex-col"],
       );
       chunkElement.setAttribute("x-group-tracking-id", groupTrackingId);
       chunkElement.innerHTML = `
@@ -348,7 +322,7 @@ <h6 class="rec-price mt-1 text-sm text-gray-700 dark:text-gray-300">${price}</h6
             page_size: 15,
           }),
           credentials: "omit",
-        }
+        },
       );
       const recommendationsData = await recommendations.json();
       replaceLoadingStateProducts(recommendationsData.results);
@@ -369,12 +343,12 @@ <h6 class="rec-price mt-1 text-sm text-gray-700 dark:text-gray-300">${price}</h6
         "TR-Dataset": window.paramsData.datasetId,
       },
       credentials: "omit",
-    }
+    },
   );
   const group = await getGroupByTrackingIdResp.json();
 
   const starterQuestions = document.querySelectorAll(
-    ".starter-questions button"
+    ".starter-questions button",
   );
   starterQuestions.forEach((button) => {
     button.addEventListener("click", async () => {
@@ -392,7 +366,7 @@ <h6 class="rec-price mt-1 text-sm text-gray-700 dark:text-gray-300">${price}</h6
             betterGroupName,
             message,
           },
-        })
+        }),
       );
     });
   });
diff --git a/server/static/output.css b/server/static/output.css
@@ -840,11 +840,6 @@ video {
   padding-right: 0.25rem;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -855,11 +850,6 @@ video {
   padding-right: 2rem;
 }
 
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
