Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: allow for custom fonts on public page #2948

Merged
merged 1 commit into from
Dec 14, 2024
Merged

feature: allow for custom fonts on public page #2948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion clients/search-component/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand Down
6 changes: 4 additions & 2 deletions clients/search-component/example/src/routes/index.lazy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = (
Expand Down Expand Up @@ -123,7 +124,7 @@ export default function Home() {
{
selector: ".random-trigger-location",
mode: "chat",
}
},
]}
useGroupSearch={useGroupSearch}
defaultAiQuestions={[
Expand All @@ -134,6 +135,7 @@ export default function Home() {
brandLogoImgSrcUrl={brandLogoSrcUrl}
brandName={brandName}
brandColor={brandColor}
brandFontFamily={brandFontFamily}
allowSwitchingModes={true}
responsive={false}
searchOptions={{
Expand All @@ -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>
) : (
Expand Down
2 changes: 1 addition & 1 deletion clients/search-component/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
5 changes: 4 additions & 1 deletion clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
20 changes: 11 additions & 9 deletions clients/search-component/src/TrieveModal/Search/DocsItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 0 additions & 2 deletions clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export const ProductGroupItem = ({ index, group, requestID }: Props) => {
[],
);

// Shopify
const betterGroupName = useMemo(
() => {
const productNames: string[] = [];
Expand All @@ -26,7 +25,6 @@ export const ProductGroupItem = ({ index, group, requestID }: Props) => {
})
)

// Calculate the overlap of the strings
const commonName = findCommonName(productNames);
return commonName || undefined;
},
Expand Down
37 changes: 24 additions & 13 deletions clients/search-component/src/TrieveModal/Search/SearchMode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -55,7 +55,7 @@ export const SearchMode = () => {
requestID={requestID}
/>
);
} else if (chunkOrGroup) {
} else if (isChunk) {
return (
<DocsItem
key={result.chunk.id}
Expand All @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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 && (
Expand All @@ -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>
Expand Down
31 changes: 20 additions & 11 deletions clients/search-component/src/TrieveModal/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -253,7 +254,7 @@ body {
}

.trieve-footer.ecommerce {
@apply py-0.5;
@apply -mx-4;
}

.commands.ecommerce {
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -735,6 +738,10 @@ body {
mark {
@apply bg-inherit;
color: var(--tv-prop-brand-color);

b {
@apply font-semibold;
}
}

&.group {
Expand Down Expand Up @@ -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);

Expand Down
11 changes: 9 additions & 2 deletions clients/search-component/src/TrieveModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Modal = () => {
script.setAttribute("data-auto-replace-svg", "");

document.head.appendChild(script);
});
}, []);

useEffect(() => {
document.documentElement.style.setProperty(
Expand All @@ -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 (
<>
Expand Down
Loading