feature: add ability to specify a custom font on public page

devflowinc · Dec 14, 2024 · b162e1e · b162e1e
1 parent a046826
commit b162e1e
Show file tree

Hide file tree

Showing 23 changed files with 234 additions and 211 deletions.
diff --git a/clients/search-component/README.md b/clients/search-component/README.md
@@ -94,7 +94,8 @@ declare module "solid-js" {
 | defaultAiQuestions   | string[]                                                                                       | []                                                                    |
 | brandLogoImgSrcUrl   | string                                                                                         | null                                                                  |
 | brandName            | string                                                                                         | null                                                                  |
-| brand Color          | string                                                                                         | #CB53EB                                                               |
+| brandColor           | string                                                                                         | #CB53EB                                                               |
+| brandFontFamily      | string                                                                                         | Maven Pro                                                             |
 | problemLink          | string (example: "mailto:[email protected]?subject=")                                             | null                                                                  |
 | responsive           | boolean                                                                                        | false                                                                 |
 

diff --git a/clients/search-component/example/src/routes/index.lazy.tsx b/clients/search-component/example/src/routes/index.lazy.tsx
@@ -14,6 +14,7 @@ export default function Home() {
   const brandName = import.meta.env.VITE_BRAND_NAME;
   const brandLogoSrcUrl = import.meta.env.VITE_BRAND_LOGO_SRC_URL;
   const brandColor = import.meta.env.VITE_ACCENT_COLOR;
+  const brandFontFamily = import.meta.env.VITE_BRAND_FONT_FAMILY;
   const problemLink = import.meta.env.VITE_PROBLEM_LINK;
   const useGroupSearch = import.meta.env.VITE_USE_GROUP_SEARCH == "true";
   const defaultSearchQueries: string[] = (
@@ -123,7 +124,7 @@ export default function Home() {
                 {
                   selector: ".random-trigger-location",
                   mode: "chat",
-                }
+                },
               ]}
               useGroupSearch={useGroupSearch}
               defaultAiQuestions={[
@@ -134,6 +135,7 @@ export default function Home() {
               brandLogoImgSrcUrl={brandLogoSrcUrl}
               brandName={brandName}
               brandColor={brandColor}
+              brandFontFamily={brandFontFamily}
               allowSwitchingModes={true}
               responsive={false}
               searchOptions={{
@@ -158,7 +160,7 @@ export default function Home() {
           {component > 0 ? (
             <li className="left-6 absolute">
               <button onClick={() => setComponent(0)}>
-              <i className="fa-solid fa-chevron-left"></i>
+                <i className="fa-solid fa-chevron-left"></i>
               </button>
             </li>
           ) : (

diff --git a/clients/search-component/package.json b/clients/search-component/package.json
@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.19",
+  "version": "0.2.22",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

diff --git a/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx b/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
@@ -46,7 +46,10 @@ export const AIInitialMessage = () => {
             }}
             className="brand-name"
           >
-            {currentGroup?.name || props.brandName || "Trieve"}
+            {(currentGroup?.name || props.brandName || "Trieve").replace(
+              /<[^>]*>/g,
+              ""
+            )}
           </span>
         </p>
         <GroupChatImgCarousel />

diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
@@ -80,7 +80,7 @@ export const ChatMode = () => {
       <div className="chat-footer-wrapper">
         {currentGroup && (
           <div className="chat-group-disclaimer">
-            <div>Chatting with {currentGroup.name}</div>
+            <div>Chatting with {currentGroup.name.replace(/<[^>]*>/g, "")}</div>
             <button
               onClick={() => {
                 cancelGroupChat();

diff --git a/clients/search-component/src/TrieveModal/Search/DocsItem.tsx b/clients/search-component/src/TrieveModal/Search/DocsItem.tsx
@@ -59,11 +59,12 @@ export const DocsItem = ({ item, requestID, index, className }: Props) => {
     descriptionHtml = descriptionHtml.replace(curHeadingText || "", "");
   }
   descriptionHtml = descriptionHtml.replace(/([.,!?;:])/g, "$1 ");
-  let title = `${cleanFirstHeading ||
+  let title = `${
+    cleanFirstHeading ||
     item.chunk.metadata?.title ||
     item.chunk.metadata?.page_title ||
     item.chunk.metadata?.name
-    }`.replace("#", "");
+  }`.replace("#", "");
 
   if (!title.trim() || title == "undefined") {
     return null;
@@ -100,8 +101,8 @@ export const DocsItem = ({ item, requestID, index, className }: Props) => {
         .map((word) => word.replace(/-/g, " "))
         .concat(
           item.chunk.metadata?.title ||
-          item.chunk.metadata.summary ||
-          urlElements.slice(-1)[0]
+            item.chunk.metadata.summary ||
+            urlElements.slice(-1)[0]
         )
         .map((word) =>
           word
@@ -161,11 +162,12 @@ export const DocsItem = ({ item, requestID, index, className }: Props) => {
         }}
         {...(item.chunk.link
           ? {
-            href: `${item.chunk.link.endsWith("/")
-                ? item.chunk.link.slice(0, -1)
-                : item.chunk.link
-              }${linkSuffix}`,
-          }
+              href: `${
+                item.chunk.link.endsWith("/")
+                  ? item.chunk.link.slice(0, -1)
+                  : item.chunk.link
+              }${linkSuffix ?? ""}`,
+            }
           : {})}
       >
         <div>

diff --git a/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx b/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx
@@ -15,7 +15,6 @@ export const ProductGroupItem = ({ index, group, requestID }: Props) => {
     [],
   );
 
-  // Shopify 
   const betterGroupName = useMemo(
     () => {
       const productNames: string[] = [];
@@ -26,7 +25,6 @@ export const ProductGroupItem = ({ index, group, requestID }: Props) => {
         })
       )
 
-      // Calculate the overlap of the strings
       const commonName = findCommonName(productNames);
       return commonName || undefined;
     },

diff --git a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import React, { Suspense, useEffect, useMemo } from "react";
 import { DocsItem } from "./DocsItem";
 import { useSuggestedQueries } from "../../utils/hooks/useSuggestedQueries";
 import { useModalState } from "../../utils/hooks/modal-context";
@@ -7,7 +7,7 @@ import { useChatState } from "../../utils/hooks/chat-context";
 import {
   ChunkWithHighlights,
   GroupChunk,
-  isChunksWithHighlights,
+  isChunkWithHighlights,
 } from "../../utils/types";
 import { ProductItem } from "./ProductItem";
 import { ProductGroupItem } from "./ProductGroupItem";
@@ -35,9 +35,9 @@ export const SearchMode = () => {
     result: ChunkWithHighlights | GroupChunk[],
     index: number
   ) => {
-    const chunkOrGroup = isChunksWithHighlights(result);
+    const isChunk = isChunkWithHighlights(result);
     const ecommerce = props.type == "ecommerce";
-    if (chunkOrGroup && ecommerce) {
+    if (isChunk && ecommerce) {
       return (
         <ProductItem
           item={result}
@@ -46,7 +46,7 @@ export const SearchMode = () => {
           key={result.chunk.id}
         />
       );
-    } else if (!chunkOrGroup && ecommerce) {
+    } else if (!isChunk && ecommerce) {
       return (
         <ProductGroupItem
           key={result[0].group.id}
@@ -55,7 +55,7 @@ export const SearchMode = () => {
           requestID={requestID}
         />
       );
-    } else if (chunkOrGroup) {
+    } else if (isChunk) {
       return (
         <DocsItem
           key={result.chunk.id}
@@ -82,12 +82,25 @@ export const SearchMode = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (mode == "search" && open) {
       inputRef.current?.focus();
     }
   }, [mode, open]);
 
+  const resultsLength = useMemo(() => results.length, [results]);
+
+  const resultsDisplay = useMemo(() => {
+    if (results.length) {
+      const comps = results.map((result, index) =>
+        getItemComponent(result, index)
+      );
+      return comps;
+    } else {
+      return null;
+    }
+  }, [results]);
+
   return (
     <Suspense fallback={<div className="hidden"> </div>}>
       <div
@@ -194,7 +207,7 @@ export const SearchMode = () => {
       </div>
 
       <ul className={`trieve-elements-${props.type}`}>
-        {results.length && props.chat ? (
+        {resultsLength && props.chat ? (
           <li className="start-chat-li" key="chat">
             <button
               id="trieve-search-item-0"
@@ -217,10 +230,8 @@ export const SearchMode = () => {
             </button>
           </li>
         ) : null}
-        {results.length
-          ? results.map((result, index) => getItemComponent(result, index))
-          : null}
-        {query && !results.length && !loadingResults ? (
+        {resultsDisplay}
+        {query && !resultsLength && !loadingResults ? (
           <div className="no-results">
             <p className="no-results-text">No results found</p>
             {props.problemLink && (
@@ -236,7 +247,7 @@ export const SearchMode = () => {
               </p>
             )}
           </div>
-        ) : query && !results.length && loadingResults ? (
+        ) : query && !resultsLength && loadingResults ? (
           <p className={`no-results-loading ${props.type}`}>Searching...</p>
         ) : null}
       </ul>

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -23,12 +23,13 @@ body {
   }
 
   #trieve-search-modal {
-    @apply animate-contentShow scroll-smooth fixed top-[calc(40%-30vh)] sm:top-[calc(25vh-225px)] left-[50%] max-h-[60vh] w-[90vw] sm:max-w-[800px] -translate-x-[50%] rounded-lg shadow-2xl focus:outline-none font-sans z-[999] overflow-hidden text-base;
+    @apply animate-contentShow scroll-smooth fixed top-[calc(40%-30vh)] sm:top-[calc(25vh-225px)] left-[50%] max-h-[60vh] w-[90vw] sm:max-w-[800px] -translate-x-[50%] rounded-lg shadow-2xl focus:outline-none z-[999] overflow-hidden text-base;
 
     color: var(--tv-zinc-950);
     background-color: var(--tv-zinc-50);
+    font-family: var(--tv-prop-brand-font-family);
 
-    .group-chat-carousel {
+    f .group-chat-carousel {
       @apply pl-2 flex gap-2 w-full overflow-x-auto;
     }
 
@@ -152,7 +153,7 @@ body {
     .mode-switch-wrapper.ecommerce.search {
       @apply top-[2.625rem];
 
-      right: calc(max(calc(50vw - 36rem), 1.25rem) + 0.5rem);
+      right: calc(max(calc(50vw - 36rem), 1.25rem) + 0.25rem);
     }
 
     .mode-switch-wrapper.ecommerce.chat {
@@ -219,7 +220,7 @@ body {
       }
 
       .bottom-row {
-        @apply flex items-center px-4 2xl:px-0 w-full mx-auto max-w-6xl;
+        @apply flex items-center 2xl:px-0 w-full mx-auto max-w-6xl;
 
         .spacer {
           @apply flex-1;
@@ -253,7 +254,7 @@ body {
     }
 
     .trieve-footer.ecommerce {
-      @apply py-0.5;
+      @apply -mx-4;
     }
 
     .commands.ecommerce {
@@ -384,7 +385,9 @@ body {
     h2,
     h3,
     h4 {
-      @apply font-semibold pb-1 sm:pb-2  m-0 font-sans leading-normal pt-0 text-base;
+      @apply font-semibold pb-1 sm:pb-2  m-0 leading-normal pt-0 text-base;
+
+      font-family: var(--tv-prop-brand-font-family);
     }
 
     a {
@@ -399,7 +402,9 @@ body {
       @apply absolute  right-2 flex py-1.5 pr-1.5;
 
       kbd {
-        @apply inline-flex items-center rounded border  px-1 font-sans text-xs;
+        @apply inline-flex items-center rounded border  px-1 text-xs;
+
+        font-family: var(--tv-prop-brand-font-family);
         color: var(--tv-zinc-400);
         border-color: var(--tv-zinc-200);
       }
@@ -649,9 +654,7 @@ body {
 
     .chat-footer-wrapper {
       .chat-group-disclaimer {
-        @apply flex items-center justify-between
-        bg-zinc-200/60 dark:bg-zinc-700 px-3 py-1 text-sm opacity-70
-        border border-zinc-300 dark:border-zinc-500 border-b-transparent;
+        @apply flex items-center justify-between bg-zinc-200/60 dark:bg-zinc-700 px-3 py-1 text-sm opacity-70 mx-2 border border-zinc-300 dark:border-zinc-500 border-b-transparent;
       }
 
       input {
@@ -735,6 +738,10 @@ body {
       mark {
         @apply bg-inherit;
         color: var(--tv-prop-brand-color);
+
+        b {
+          @apply font-semibold;
+        }
       }
 
       &.group {
@@ -1070,7 +1077,9 @@ body {
     }
 
     .open {
-      @apply inline-flex items-center rounded border px-1 font-sans text-xs py-0.5 gap-1;
+      @apply inline-flex items-center rounded border px-1 text-xs py-0.5 gap-1;
+
+      font-family: var(--tv-prop-brand-font-family);
       color: var(--tv-zinc-400);
       border-color: var(--tv-zinc-200);
 

diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx
@@ -26,7 +26,7 @@ const Modal = () => {
     script.setAttribute("data-auto-replace-svg", "");
 
     document.head.appendChild(script);
-  });
+  }, []);
 
   useEffect(() => {
     document.documentElement.style.setProperty(
@@ -45,7 +45,14 @@ const Modal = () => {
         "var(--tv-zinc-300)"
       );
     }
-  }, [props.brandColor]);
+
+    document.documentElement.style.setProperty(
+      "--tv-prop-brand-font-family",
+      props.brandFontFamily ??
+        `Maven Pro, ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
+    );
+  }, [props.brandColor, props.brandFontFamily]);
 
   return (
     <>