cleanup: allow for video link to be placed as a floating element or i…

…n product description

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.44",
+  "version": "0.2.45",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

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

@@ -1288,7 +1288,9 @@ body {
   }
 
   .floating-input-container {
-    @apply z-[999] fixed bottom-5 flex flex-row items-center justify-start gap-2 w-2/4 p-1 pr-5 h-[55px] rounded-full cursor-pointer transition-colors duration-300 ease-in-out bg-white border-2;
+    @apply z-[999] fixed bottom-5 flex flex-row items-center justify-start gap-2 w-1/2 p-1 pr-5 h-[55px] rounded-full cursor-pointer transition-colors duration-300 ease-in-out bg-white border-2;
+
+    left: 25%;
 
     &:hover {
       border-color: var(--tv-prop-brand-color);

clients/ts-sdk/openapi.json

@@ -12471,6 +12471,10 @@
             "type": "string",
             "nullable": true
           },
+          "floatingSearchIconPosition": {
+            "type": "string",
+            "nullable": true
+          },
           "forBrandName": {
             "type": "string",
             "nullable": true
@@ -12531,6 +12535,14 @@
             "type": "boolean",
             "nullable": true
           },
+          "showFloatingInput": {
+            "type": "boolean",
+            "nullable": true
+          },
+          "showFloatingSearchIcon": {
+            "type": "boolean",
+            "nullable": true
+          },
           "singleProductOptions": {
             "allOf": [
               {
@@ -12577,6 +12589,14 @@
             "type": "boolean",
             "nullable": true
           },
+          "videoLink": {
+            "type": "string",
+            "nullable": true
+          },
+          "videoPosition": {
+            "type": "string",
+            "nullable": true
+          },
           "zIndex": {
             "type": "integer",
             "format": "int32",

clients/ts-sdk/src/types.gen.ts

@@ -2091,8 +2091,8 @@ export type PublicPageParameters = {
     responsive?: (boolean) | null;
     searchOptions?: ((PublicPageSearchOptions) | null);
     showFloatingButton?: (boolean) | null;
-    showFloatingSearchIcon?: (boolean) | null;
     showFloatingInput?: (boolean) | null;
+    showFloatingSearchIcon?: (boolean) | null;
     singleProductOptions?: ((SingleProductOptions) | null);
     suggestedQueries?: (boolean) | null;
     tabMessages?: Array<PublicPageTabMessage> | null;
@@ -2101,8 +2101,9 @@ export type PublicPageParameters = {
     type?: (string) | null;
     useGroupSearch?: (boolean) | null;
     usePagefind?: (boolean) | null;
-    zIndex?: (number) | null;
     videoLink?: (string) | null;
+    videoPosition?: (string) | null;
+    zIndex?: (number) | null;
 };
 
 export type PublicPageSearchOptions = {

frontends/dashboard/src/hooks/usePublicPageSettings.tsx

@@ -209,7 +209,7 @@ export const { use: usePublicPage, provider: PublicPageProvider } =
 
     const apiHost = import.meta.env.VITE_API_HOST as unknown as string;
     const publicUrl = createMemo(() => {
-      return `${apiHost.slice(0, -4)}/demos/${
+      return `${apiHost.replace("/api.", "/demos.").slice(0, -4)}/demos/${
         dataset()?.dataset.tracking_id ?? datasetId()
       }`;
     });

frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx

@@ -730,11 +730,12 @@ const PublicPageControls = () => {
               </div>
             </div>
           </Show>
+          <div class="grow" />
           <div class="grow">
             <div class="flex items-center gap-1">
               <label class="block">Video Link</label>
               <Tooltip
-                tooltipText="Video that will be displayed on the public page."
+                tooltipText="Video that will be displayed on the public page. Needs to be the embed link."
                 body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
               />
             </div>
@@ -747,6 +748,23 @@ const PublicPageControls = () => {
               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 class="grow">
+            <div class="flex items-center gap-1">
+              <label class="block">Video Position</label>
+              <Tooltip
+                tooltipText="Position of the video on the page. Either floating or centered."
+                body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
+              />
+            </div>
+            <input
+              placeholder="floating | product"
+              value={extraParams.videoPosition || ""}
+              onInput={(e) => {
+                setExtraParams("videoPosition", 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>
         <details class="pt-4">
           <summary class="cursor-pointer text-sm font-medium">

server/src/data/models.rs

@@ -3260,6 +3260,9 @@ impl DatasetConfigurationDTO {
                     video_link: page_parameters_self
                         .video_link
                         .or(page_parameters_curr.video_link),
+                    video_position: page_parameters_self
+                        .video_position
+                        .or(page_parameters_curr.video_position),
                 }),
             },
             DISABLE_ANALYTICS: self

server/src/handlers/page_handler.rs

@@ -258,6 +258,8 @@ pub struct PublicPageParameters {
     pub use_pagefind: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub video_link: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub video_position: Option<String>,
 }
 
 #[utoipa::path(

server/src/public/page.html

@@ -304,6 +304,13 @@
         }
       }
 
+      .product-video-wrapper {
+        position: relative;
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+        z-index: 15;
+      }
+
       .video-wrapper {
         position: fixed;
         bottom: 20px;
@@ -313,7 +320,7 @@
         height: 14.5rem;
         margin: 0;
         padding: 0;
-
+        z-index: 20;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -359,15 +366,9 @@
         {% else %}
         <div class="mt-24 sm:mt-6"></div>
         {% endif %} {% if tabs|length > 0 %} {% include "tabs.html" %} {% else
-        %} {% include "search-component-code.html" %} {% endif %}
+        %} {% include "search-component-code.html" %} {% endif %} {% if
+        params.videoLink and params.videoPosition == "floating" %}
         <div class="video-wrapper">
-          {% if logged_in %}
-          <a
-            class="dev-back-button"
-            href="{{dashboard_url}}/dataset/{{params.datasetId}}/public-page"
-            >Back To Dashboard</a
-          >
-          {% endif %}
           <iframe
             src="{{params.videoLink}}"
             frameborder="0"
@@ -376,6 +377,7 @@
           >
           </iframe>
         </div>
+        {% endif %}
       </div>
     </main>
   </body>
@@ -420,48 +422,6 @@
           brackets: ["left"],
         });
       }
-    const openTrieveRect = openTrieveModalElement.getBoundingClientRect();
-    let endOpenX = openTrieveRect.right + 138;
-    let endOpenY = openTrieveRect.bottom + 45;
-    if (endOpenX > window.innerWidth) {
-      endOpenX = window.innerWidth - 125;
-      endOpenY += 15;
-    }
-    const startOpenX = openTrieveRect.right + 60;
-    const startOpenY = openTrieveRect.bottom - 15;
-
-    rc.path(
-      `M ${startOpenX} ${startOpenY}
-         Q ${startOpenX + 85} ${endOpenY - 85} ${endOpenX} ${endOpenY}`,
-      {
-        stroke: window.paramsData.brandColor || "black",
-        strokeWidth: 2,
-        roughness: 3,
-        bowing: 3,
-      },
-    );
-
-    const arrowSize = 10;
-    rc.line(
-      startOpenX - 5,
-      startOpenY,
-      startOpenX + arrowSize,
-      startOpenY + arrowSize,
-      {
-        stroke: window.paramsData.brandColor || "black",
-        strokeWidth: 2,
-      },
-    );
-    rc.line(
-      startOpenX - 5,
-      startOpenY,
-      startOpenX + arrowSize,
-      startOpenY - arrowSize,
-      {
-        stroke: window.paramsData.brandColor || "black",
-        strokeWidth: 2,
-      },
-    );
 
       const circleSearchAnimation = annotate(openTrieveModalElement, {
         type: "circle",
@@ -504,7 +464,7 @@
           strokeWidth: 2,
           roughness: 3,
           bowing: 3,
-        },
+        }
       );
 
       const arrowSize = 10;
@@ -516,7 +476,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        },
+        }
       );
       rc.line(
         startOpenX - 5,
@@ -526,7 +486,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        },
+        }
       );
 
       let endRecX = 0;

server/src/public/product.html

@@ -19,9 +19,21 @@
           {{ params.singleProductOptions.productName }}
         </h1>
 
+        {% if params.videoLink and params.videoPosition == "product" %}
+        <div class="product-video-wrapper">
+          <iframe
+            src="{{params.videoLink}}"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          >
+          </iframe>
+        </div>
+        {% else %}
         <div class="mt-2 text-gray-500 paragraph-text">
           {{ params.singleProductOptions.productDescriptionHtml|safe }}
         </div>
+        {% endif %}
 
         <div class="mt-4">
           <button