From 7e70297a5c40f0d3ab1938536b1cfb434d7f6f83 Mon Sep 17 00:00:00 2001
From: skeptrune <nick.k@trieve.ai>
Date: Mon, 16 Dec 2024 22:40:29 -0800
Subject: [PATCH] cleanup: mobile styling fixes for chat component

---
 clients/search-component/README.md            |  3 +-
 .../src/TrieveModal/Chat/AIInitalMessage.tsx  |  2 +-
 .../src/TrieveModal/index.css                 |  6 +++-
 clients/ts-sdk/openapi.json                   | 22 ++++++++++++
 clients/ts-sdk/src/types.gen.ts               |  6 ++++
 .../src/pages/dataset/PublicPageSettings.tsx  | 35 ++++++++++++++++++-
 server/src/data/models.rs                     |  3 ++
 server/src/handlers/page_handler.rs           |  9 +++++
 server/src/lib.rs                             |  1 +
 server/src/public/page.html                   |  4 +--
 server/src/public/product.html                |  4 +--
 server/src/public/search-component-code.html  | 11 +++---
 server/static/output.css                      | 20 ++++-------
 13 files changed, 99 insertions(+), 27 deletions(-)

diff --git a/clients/search-component/README.md b/clients/search-component/README.md
index bb439ada13..e93c7760b5 100644
--- a/clients/search-component/README.md
+++ b/clients/search-component/README.md
@@ -99,7 +99,8 @@ declare module "solid-js" {
 | problemLink            | string (example: "mailto:help@trieve.ai?subject=")                                             | null                                                                  |
 | responsive             | boolean                                                                                        | false                                                                 |
 | floatingButtonPosition | "top-left", "top-right", "bottom-left", or "bottom-right"                                      | "bottom-right"                                                        |
-| showFloatingButton     | boolean                                                                                        | false                                                                 |        
+| showFloatingButton     | boolean                                                                                        | false                                                                 |
+| buttonTriggers         | { selector: "query-selector", mode: "chat" | "search" }[]                                      | []                                                                    |
 
 ### Search Results
 
diff --git a/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx b/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
index 42108d648b..e60bed62c4 100644
--- a/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
+++ b/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
@@ -38,7 +38,7 @@ export const AIInitialMessage = () => {
           I'm an AI assistant with access to documentation, help articles, and
           other content.
         </p>
-        <p>
+        <p className="brand-paragraph">
           Ask me anything about{" "}
           <span
             style={{
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
index 1d78c66a8e..55eb6ff9cb 100644
--- a/clients/search-component/src/TrieveModal/index.css
+++ b/clients/search-component/src/TrieveModal/index.css
@@ -498,8 +498,12 @@ body {
           }
         }
 
+        .brand-paragraph {
+          @apply leading-8;
+        }
+
         .brand-name {
-          @apply text-white px-1.5 py-1 rounded-md font-[500] whitespace-nowrap leading-8;
+          @apply text-white px-1.5 py-1 rounded-md font-[500] whitespace-nowrap text-ellipsis;
         }
       }
     }
diff --git a/clients/ts-sdk/openapi.json b/clients/ts-sdk/openapi.json
index a361546528..9f548e7309 100644
--- a/clients/ts-sdk/openapi.json
+++ b/clients/ts-sdk/openapi.json
@@ -6967,6 +6967,21 @@
           }
         }
       },
+      "ButtonTrigger": {
+        "type": "object",
+        "required": [
+          "selector",
+          "mode"
+        ],
+        "properties": {
+          "mode": {
+            "type": "string"
+          },
+          "selector": {
+            "type": "string"
+          }
+        }
+      },
       "CTRAnalytics": {
         "oneOf": [
           {
@@ -12276,6 +12291,13 @@
             "type": "string",
             "nullable": true
           },
+          "buttonTriggers": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/ButtonTrigger"
+            },
+            "nullable": true
+          },
           "chat": {
             "type": "boolean",
             "nullable": true
diff --git a/clients/ts-sdk/src/types.gen.ts b/clients/ts-sdk/src/types.gen.ts
index ff317c2ecb..1ac2b75a34 100644
--- a/clients/ts-sdk/src/types.gen.ts
+++ b/clients/ts-sdk/src/types.gen.ts
@@ -130,6 +130,11 @@ export type BulkDeleteChunkPayload = {
     filter: ChunkFilter;
 };
 
+export type ButtonTrigger = {
+    mode: string;
+    selector: string;
+};
+
 export type CTRAnalytics = {
     filter?: ((SearchAnalyticsFilter) | null);
     type: 'search_ctr_metrics';
@@ -2045,6 +2050,7 @@ export type PublicPageParameters = {
     brandFontFamily?: (string) | null;
     brandLogoImgSrcUrl?: (string) | null;
     brandName?: (string) | null;
+    buttonTriggers?: Array<ButtonTrigger> | null;
     chat?: (boolean) | null;
     creatorLinkedInUrl?: (string) | null;
     creatorName?: (string) | null;
diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
index 5466a8b36f..db3b9fc154 100644
--- a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
+++ b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -548,7 +548,40 @@ const PublicPageControls = () => {
               inputClass="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="grow">
+            <div class="flex items-center gap-1">
+              <label class="block" for="">
+                Button Triggers
+              </label>
+              <Tooltip
+                tooltipText="UI elements that can trigger the search component to open. Each field has a selector and mode (search/chat) separated by commas."
+                body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
+              />
+            </div>
+            <MultiStringInput
+              placeholder={`#search-icon,search`}
+              value={
+                extraParams.buttonTriggers?.map((trigger) => {
+                  return `${trigger.selector},${trigger.mode}`;
+                }) ?? []
+              }
+              onChange={(e) => {
+                setExtraParams(
+                  "buttonTriggers",
+                  e.map((trigger) => {
+                    const [selector, mode] = trigger.split(",");
+                    return {
+                      selector,
+                      mode,
+                    };
+                  }),
+                );
+              }}
+              addLabel="Add Trigger"
+              addClass="text-sm"
+              inputClass="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">Placeholder Text</label>
diff --git a/server/src/data/models.rs b/server/src/data/models.rs
index 8802d9534e..2b0a369bec 100644
--- a/server/src/data/models.rs
+++ b/server/src/data/models.rs
@@ -3153,6 +3153,9 @@ impl DatasetConfigurationDTO {
                     show_floating_button: page_parameters_self
                         .show_floating_button
                         .or(page_parameters_curr.show_floating_button),
+                    button_triggers: page_parameters_self
+                        .button_triggers
+                        .or(page_parameters_curr.button_triggers),
                     debounce_ms: page_parameters_self
                         .debounce_ms
                         .or(page_parameters_curr.debounce_ms),
diff --git a/server/src/handlers/page_handler.rs b/server/src/handlers/page_handler.rs
index e9d750e8f0..2e4f3d3ad7 100644
--- a/server/src/handlers/page_handler.rs
+++ b/server/src/handlers/page_handler.rs
@@ -136,6 +136,13 @@ pub struct OpenGraphMetadata {
     description: Option<String>,
 }
 
+#[derive(Serialize, Deserialize, Debug, Clone, ToSchema, Default)]
+#[serde(rename_all = "camelCase")]
+pub struct ButtonTrigger {
+    selector: String,
+    mode: String,
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone, ToSchema, Default)]
 #[serde(rename_all = "camelCase")]
 pub struct SingleProductOptions {
@@ -217,6 +224,8 @@ pub struct PublicPageParameters {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub show_floating_button: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
+    pub button_triggers: Option<Vec<ButtonTrigger>>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub debounce_ms: Option<i32>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub hero_pattern: Option<HeroPattern>,
diff --git a/server/src/lib.rs b/server/src/lib.rs
index 1a7367fbfd..7c92d751a6 100644
--- a/server/src/lib.rs
+++ b/server/src/lib.rs
@@ -396,6 +396,7 @@ impl Modify for SecurityAddon {
             operators::crawl_operator::Metadata,
             operators::crawl_operator::Sitemap,
             handlers::stripe_handler::CreateSetupCheckoutSessionResPayload,
+            handlers::page_handler::ButtonTrigger,
             handlers::page_handler::PublicPageSearchOptions,
             handlers::page_handler::OpenGraphMetadata,
             handlers::page_handler::SingleProductOptions,
diff --git a/server/src/public/page.html b/server/src/public/page.html
index f953a6afaf..87676e6393 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="/static/output.css" />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/trieve-search-component@0.2.27/dist/index.css"
+      href="https://unpkg.com/trieve-search-component@0.2.28/dist/index.css"
     />
     <link
       rel="apple-touch-icon"
@@ -274,7 +274,7 @@
     </style>
 
     <script type="module">
-      import {renderToDiv} from 'https://unpkg.com/trieve-search-component@0.2.27/dist/vanilla/index.js';
+      import {renderToDiv} from 'https://unpkg.com/trieve-search-component@0.2.28/dist/vanilla/index.js';
       const root = document.getElementById('root');
       renderToDiv(root, {
         ... {{params | tojson}}
diff --git a/server/src/public/product.html b/server/src/public/product.html
index 45131815f8..378266ce3f 100644
--- a/server/src/public/product.html
+++ b/server/src/public/product.html
@@ -58,7 +58,7 @@ <h3 class="text-sm font-medium text-gray-900 mt-4">
 
     <section
       aria-labelledby="related-heading"
-      class="border-t border-gray-200 px-4 mt-4 sm:px-0"
+      class="border-t border-gray-200 mt-4"
     >
       <div class="recs-section">
         <h2
@@ -72,7 +72,7 @@ <h4 class="text-sm text-gray-500 mt-2 w-fit">
         </h4>
 
         <div
-          class="recs mt-6 flex flex-nowrap overflow-x-auto gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 mx-4 sm:mx-6 lg:mx-8"
+          class="recs mt-6 flex flex-nowrap overflow-x-auto gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 mr-4 sm:mr-6 lg:mr-8"
         >
           {% for i in range(5) %}
           <div class="w-64 flex-shrink-0">
diff --git a/server/src/public/search-component-code.html b/server/src/public/search-component-code.html
index de5173cb72..b168455be1 100644
--- a/server/src/public/search-component-code.html
+++ b/server/src/public/search-component-code.html
@@ -2,11 +2,11 @@
 <code class="language-javascript">
 &lt;link
   rel="stylesheet"
-  href="https://unpkg.com/trieve-search-component@0.2.15/dist/index.css"
+  href="https://unpkg.com/trieve-search-component@0.2.27/dist/index.css"
 /&gt;
 
 &lt;script type="module"&gt;
-  import {renderToDiv} from 'https://unpkg.com/trieve-search-component@0.2.15/dist/vanilla/index.js';
+  import {renderToDiv} from 'https://unpkg.com/trieve-search-component@0.2.27/dist/vanilla/index.js';
   window.addEventListener('load', () => {
     const root = document.getElementById('root');
     renderToDiv(root, 
@@ -29,7 +29,7 @@
       analytics: {{ params.analytics }},
       {% endif -%}
       {% if params.tags -%}
-      tags: {{ params.tags }},
+      tags: {{ params.tags | tojson }},
       {% endif -%}
       {% if params.responsive -%}
       responsive: {{ params.responsive }},
@@ -85,13 +85,14 @@
       {% if params.floatingButtongPosition -%}
       floatingButtongPosition: "{{ params.floatingButtongPosition }}",
       {% endif -%}
+      {% if params.buttonTriggers -%}
+      buttonTriggers: {{ params.buttonTriggers }},
+      {% endif -%}
       {% if params.debounceMs -%}
       debounceMs: {{ params.debounceMs }},
       {% endif -%}
-
     )
   });
 &lt;/script&gt;
-
 </code>
 </pre>
diff --git a/server/static/output.css b/server/static/output.css
index 2f119359e9..76ef9558af 100644
--- a/server/static/output.css
+++ b/server/static/output.css
@@ -571,11 +571,6 @@ video {
   margin-bottom: -1rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -585,6 +580,10 @@ video {
   margin-top: -0.5rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -930,8 +929,7 @@ video {
 }
 
 @media (min-width: 640px) {
-  .sm\:mx-6 {
-    margin-left: 1.5rem;
+  .sm\:mr-6 {
     margin-right: 1.5rem;
   }
 
@@ -964,11 +962,6 @@ video {
          column-gap: 1.5rem;
   }
 
-  .sm\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -990,8 +983,7 @@ video {
 }
 
 @media (min-width: 1024px) {
-  .lg\:mx-8 {
-    margin-left: 2rem;
+  .lg\:mr-8 {
     margin-right: 2rem;
   }