Skip to content

Commit

Permalink
Merge branch 'main' into vs/feature-add-video-link-public-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vid277
vid277 authored Dec 18, 2024
2 parents db1a735 + 6d1ea18 commit cb1251b
Show file tree
Hide file tree
Showing 40 changed files with 1,493 additions and 1,185 deletions.
3 changes: 2 additions & 1 deletion clients/search-component/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ declare module "solid-js" {
| problemLink | string (example: "mailto:[email protected]?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

Expand Down
5 changes: 3 additions & 2 deletions clients/search-component/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"import": "./dist/vanilla/index.js"
}
},
"version": "0.2.26",
"version": "0.2.30",
"license": "MIT",
"homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
"scripts": {
Expand All @@ -29,6 +29,7 @@
"lint": "eslint",
"build:clean": "rm -rf dist && yarn type:dts && yarn build",
"build": "run-s build:src build:css type:dts",
"build:watch": "run-p watch:js build:src build:css type:dts",
"build:src": "node ./scripts/build.js",
"type:dts": "tsc --emitDeclarationOnly --declarationMap",
"build:css": "npx postcss src/app.css -o dist/index.css && cp src/styles.d.ts dist/",
Expand Down Expand Up @@ -56,7 +57,7 @@
"react-dom": "^18.3.1",
"tailwind": "^4.0.0",
"tailwindcss": "^3.4.11",
"tailwindcss-scoped-preflight": "^3.4.4",
"tailwindcss-scoped-preflight": "^3.4.10",
"typescript": "^5.6.2",
"typescript-eslint": "^8.3.0"
},
Expand Down
2 changes: 1 addition & 1 deletion clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down
39 changes: 4 additions & 35 deletions clients/search-component/src/TrieveModal/Chat/Carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,6 @@ import React, {
} from "react";

const styles = {
root: {
width: "100%",
overflow: "hidden",
},
scroll: {
display: "flex",
overflowX: "hidden",
scrollSnapType: "x mandatory",
scrollBehavior: "smooth",
width: "100%",
listStyle: "none",
padding: 0,
margin: 0,
},
item: {
flex: "0 0 auto",
padding: "1rem",
scrollSnapAlign: "start",
boxSizing: "border-box",
},
itemSnapPoint: {
scrollSnapAlign: "start",
},
controls: {
display: "flex",
justifyContent: "center",
alignItems: "center",
marginTop: "5px",
},
nextPrevButton: {
fontSize: "16px",
cursor: "pointer",
Expand Down Expand Up @@ -109,15 +80,13 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
const goToPage = (pageIndex: number) => setCurrentPage(pageIndex);

return (
<div style={styles.root}>
<ul style={styles.scroll} ref={scrollRef}>
<div className="carousel-root">
<ul className="carousel-scroll" ref={scrollRef}>
{allProductsCarousel.map((child, index) => (
<li
className="carousel-item"
className={child ? "carousel-item carousel-item-visibile" : "carousel-item carousel-item-hidden"}
style={{
...styles.item,
width: `calc(100% / ${itemsPerPage})`,
visibility: child ? "visible" : "hidden",
}}
key={index}
>
Expand All @@ -126,7 +95,7 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
))}
</ul>
{numPages > 1 && (
<div style={styles.controls}>
<div className="carousel-controls">
<button
style={{
...styles.nextPrevButton,
Expand Down
6 changes: 5 additions & 1 deletion clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@ export const ChatMode = () => {
</svg>
<span>Close</span>
</div>
<div className="system-information-wrapper">
<div
className={`system-information-wrapper${
currentGroup ? " with-group" : ""
}`}
>
<div className="ai-message">
<div className="chat-modal-wrapper">
<div className="ai-message initial-message">
Expand Down
28 changes: 14 additions & 14 deletions clients/search-component/src/TrieveModal/Search/ProductItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,21 +178,21 @@ export const ProductItem = ({
featured_image: { src: string };
title: string;
}[]
)?.map((variant) => (
<button
key={variant.title}
onClick={(ev) => {
ev.preventDefault();
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();
if (variant.featured_image?.src) {
)
?.filter((variant) => variant.featured_image?.src)
?.map((variant) => (
<button
key={variant.title}
onClick={(ev) => {
ev.preventDefault();
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();
setShownImage(variant.featured_image?.src);
}
}}
>
{variant.title}
</button>
))}
}}
>
{variant.title}
</button>
))}
</div>
) : null}
</>
Expand Down
2 changes: 1 addition & 1 deletion clients/search-component/src/TrieveModal/Search/SearchMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export const SearchMode = () => {
}, [results]);

return (
<Suspense fallback={<div className="hidden"> </div>}>
<Suspense fallback={<div className="suspense-fallback"> </div>}>
<div
className={`close-modal-button search ${props.type}`}
onClick={() => setOpen(false)}
Expand Down
6 changes: 3 additions & 3 deletions clients/search-component/src/TrieveModal/Tags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const Tags = () => {
<kbd className="commands-key">
<EnterKeyIcon />
</kbd>
<span className="label">to select</span>
<span>to select</span>
</li>
<li key="arrow-key-commands">
<kbd className="commands-key">
Expand All @@ -38,13 +38,13 @@ export const Tags = () => {
<kbd className="commands-key">
<ArrowUpIcon />
</kbd>
<span className="label">to navigate</span>
<span>to navigate</span>
</li>
<li key="esc-key-command">
<kbd className="commands-key">
<EscKeyIcon />
</kbd>
<span className="label">to close</span>
<span>to close</span>
</li>
</ul>
))
Expand Down
71 changes: 62 additions & 9 deletions clients/search-component/src/TrieveModal/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@

body {
#trieve-search-modal-overlay {
@apply bg-black/60 w-screen fixed inset-0 h-screen animate-overlayShow backdrop-blur-sm z-[998];
@apply bg-black/60 w-screen fixed inset-0 h-screen animate-overlayShow backdrop-blur-sm;
}

.close-icon {
@apply w-4 h-4 fill-current;
}

#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 z-[999] overflow-hidden text-base;
@apply animate-contentShow scroll-smooth fixed top-[calc(40%-30vh)] 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);
Expand All @@ -33,6 +33,10 @@ body {
@apply pl-2 flex gap-2 w-full overflow-x-auto;
}

.suspense-fallback {
@apply hidden;
}

::-webkit-scrollbar {
width: 6px;
height: 6px;
Expand All @@ -56,7 +60,7 @@ body {
}

&.chat-modal-mobile {
@apply flex flex-col top-0 sm:top-[calc(25vh-225px)] pt-4 max-h-[100vh] w-full sm:w-[90vw] rounded-none sm:rounded-lg;
@apply flex flex-col top-0 sm:top-[calc(40%-30vh)] pt-4 max-h-[100vh] w-full sm:w-[90vw] rounded-none sm:rounded-lg;

.chat-outer-wrapper {
@apply justify-between w-full h-full mt-10 sm:mt-12;
Expand Down Expand Up @@ -188,7 +192,7 @@ body {
}

.trieve-footer {
@apply sticky px-3 items-center bottom-0 flex flex-col;
@apply sticky px-3 items-center bottom-[1px] flex flex-col;
background-color: var(--tv-zinc-50);
border-color: var(--tv-zinc-200);

Expand Down Expand Up @@ -309,6 +313,44 @@ body {
.additional-image-links {
@apply gap-2 mt-4 mb-4 flex flex-row;

.carousel-root {
width: 100%;
overflow: hidden;
}

.carousel-scroll {
display: flex;
overflow-x: hidden;
scroll-snap-type: x-mandatory;
scroll-behavior: smooth;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}

.carousel-item {
flex: 0 0 auto;
padding: 1rem;
scroll-snap-align: start;
box-sizing: border-box;
}

.carousel-item-hidden {
visibility: hidden;
}

.carousel-item-visibile {
visibility: visible;
}

.carousel-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
}

a {
@apply hover:bg-zinc-200 text-zinc-700 hover:text-zinc-950 rounded px-2 text-xs py-1 line-clamp-2 overflow-ellipsis grid-rows-2 w-fit;
}
Expand Down Expand Up @@ -498,8 +540,12 @@ body {
}
}

.brand-paragraph {
@apply leading-8;
}

.brand-name {
@apply text-white px-1.5 py-1 rounded-md font-[500];
@apply text-white px-1.5 py-1 rounded-md font-[500] whitespace-nowrap text-ellipsis;
}
}
}
Expand Down Expand Up @@ -529,7 +575,11 @@ body {
/* SUGGESTED QUESTIONS */

.system-information-wrapper {
@apply mb-8;
@apply mb-10;

&.with-group {
@apply mb-24;
}

p {
@apply mb-6 sm:mb-4;
Expand Down Expand Up @@ -639,11 +689,14 @@ body {
}

&:focus {
border: 1.5px solid var(--tv-prop-brand-color);
transform: translateY(-0.1px) scale(1.0006);
border: 1px solid var(--tv-prop-brand-color);
}
}

input.search-input {
@apply pr-8;
}

input.search-input.ecommerce {
@apply rounded-sm;
}
Expand Down Expand Up @@ -745,7 +798,7 @@ body {
}

&.start-chat {
@apply items-center flex max-w-[calc(90vw-70px)] sm:max-w-none;
@apply items-center flex max-w-[calc(90vw)] sm:max-w-none;

h4 {
@apply pl-0 pt-0 max-w-[calc(90vw-120px)] sm:max-w-[400px];
Expand Down
Loading

0 comments on commit cb1251b

Please sign in to comment.