feature: add video embed to public page

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,6 +2101,8 @@ export type PublicPageParameters = {
     type?: (string) | null;
     useGroupSearch?: (boolean) | null;
     usePagefind?: (boolean) | null;
+    videoLink?: (string) | null;
+    videoPosition?: (string) | null;
     zIndex?: (number) | null;
 };
 

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

@@ -663,70 +663,109 @@ const PublicPageControls = () => {
               options={Object.keys(HeroPatterns)}
             />
           </div>
-        </div>
-        <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
-          <div class="flex flex-row items-center justify-start gap-4 pt-4">
-            <div class="">
-              <label class="block" for="">
-                Foreground Color
-              </label>
-              <input
-                placeholder="#FFFFFF"
-                value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
-                onInput={(e) => {
-                  setExtraParams(
-                    "heroPattern",
-                    "foregroundColor",
-                    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 class="">
-              <Show
-                when={
-                  extraParams.heroPattern?.heroPatternName !== "Blank" &&
-                  extraParams.heroPattern?.heroPatternName !== "Solid"
-                }
-              >
+          <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
+            <div class="flex flex-row items-center justify-start gap-4 pt-4">
+              <div class="">
                 <label class="block" for="">
-                  Background Color
+                  Foreground Color
                 </label>
                 <input
                   placeholder="#FFFFFF"
-                  value={extraParams.heroPattern?.backgroundColor || "#FFFFFF"}
-                  onChange={(e) => {
+                  value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
+                  onInput={(e) => {
                     setExtraParams(
                       "heroPattern",
-                      "backgroundColor",
+                      "foregroundColor",
                       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"
                 />
-              </Show>
+              </div>
+              <div class="">
+                <Show
+                  when={
+                    extraParams.heroPattern?.heroPatternName !== "Blank" &&
+                    extraParams.heroPattern?.heroPatternName !== "Solid"
+                  }
+                >
+                  <label class="block" for="">
+                    Background Color
+                  </label>
+                  <input
+                    placeholder="#FFFFFF"
+                    value={
+                      extraParams.heroPattern?.backgroundColor || "#FFFFFF"
+                    }
+                    onChange={(e) => {
+                      setExtraParams(
+                        "heroPattern",
+                        "backgroundColor",
+                        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"
+                  />
+                </Show>
+              </div>
+              <div class="">
+                <label class="block" for="">
+                  Foreground Opacity
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  onChange={(e) => {
+                    setExtraParams(
+                      "heroPattern",
+                      "foregroundOpacity",
+                      parseInt(e.currentTarget.value) / 100,
+                    );
+                  }}
+                  value={
+                    (extraParams.heroPattern?.foregroundOpacity || 0.5) * 100
+                  }
+                />
+              </div>
             </div>
-            <div class="">
-              <label class="block" for="">
-                Foreground Opacity 0-1
-              </label>
-              <input
-                type="number"
-                placeholder="1000"
-                value={extraParams.heroPattern?.foregroundOpacity || 0.5}
-                onInput={(e) => {
-                  setExtraParams(
-                    "heroPattern",
-                    "foregroundOpacity",
-                    parseFloat(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"
+          </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. Needs to be the embed link."
+                body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
               />
             </div>
+            <input
+              placeholder="Insert video link..."
+              value={extraParams.videoLink || ""}
+              onInput={(e) => {
+                setExtraParams("videoLink", 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>
-        </Show>
+          <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">
             Advanced Settings

server/src/data/models.rs

@@ -3257,6 +3257,12 @@ impl DatasetConfigurationDTO {
                     use_pagefind: page_parameters_self
                         .use_pagefind
                         .or(page_parameters_curr.use_pagefind),
+                    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

@@ -256,6 +256,10 @@ pub struct PublicPageParameters {
     pub hide_drawn_text: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
     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

@@ -200,9 +200,6 @@
         color: black;
         padding: 0.3rem;
         font-size: 0.8rem;
-        position: fixed;
-        bottom: 0.5rem;
-        left: 0.5rem;
         text-decoration: none;
         z-index: 20;
       }
@@ -306,6 +303,48 @@
           background-color:  color-mix(in srgb, var(--brand-color), black 20%);
         }
       }
+
+      .product-video-wrapper {
+        position: relative;
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+        z-index: 15;
+      }
+
+      .video-wrapper {
+        position: fixed;
+        bottom: 20px;
+        left: 20px;
+        width: 100%;
+        max-width: 18.5rem;
+        height: 14.5rem;
+        margin: 0;
+        padding: 0;
+        z-index: 20;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .video-wrapper iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        object-fit: cover;
+      }
+
+      @media (max-width: 640px) {
+        .video-wrapper {
+          position: relative;
+          bottom: 0;
+          left: 0;
+          margin: 0 auto;
+          max-width: calc(100vw - 4rem);
+          height: 20rem;
+        }
+      }
     </style>
 
     <script type="module">
@@ -327,7 +366,18 @@
         {% 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">
+          <iframe
+            src="{{params.videoLink}}"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          >
+          </iframe>
+        </div>
+        {% endif %}
       </div>
     </main>
   </body>

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