Skip to content

Commit

Permalink
feature: add floating action button to docsearch component
Browse files Browse the repository at this point in the history
  • Loading branch information
@vid277 @skeptrunedev
vid277 authored and skeptrunedev committed Dec 16, 2024
1 parent c44be5e commit 57d2ff1
Show file tree
Hide file tree
Showing 9 changed files with 98 additions and 30 deletions.
54 changes: 28 additions & 26 deletions clients/search-component/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,31 +73,33 @@ declare module "solid-js" {

#### Props

| Name | Type | Default |
| -------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------ |
| datasetId | string | '' |
| apiKey | string | '' |
| baseUrl | string | "https://api.trieve.ai" |
| type | "docs" | "ecommerce" | "docs" |
| useGroupSearch | boolean | false |
| chat | boolean | true |
| analytics | boolean | true |
| placeholder | string | "Search..." |
| onResultClick | () => void | () => {} |
| theme | "light" or "dark" | "light" |
| searchOptions | [AutocompleteReqPayload](https://ts-sdk.trieve.ai/types/types_gen.AutocompleteReqPayload.html) | `{ search_type: "fulltext" }` |
| openKeyCombination | { key?: string; label?: string; ctrl?: boolean }[] | [{ ctrl: true }, { key: "k", label: "K" }] |
| tags | { tag: string; label?: string; selected? boolean; iconClassName?: string }[] | [{tag: "docs", label: "dev docs", iconClassName: "fa-solid fa-info"}] |
| ButtonEl | JSX.ElementType | null |
| suggestedQueries | boolean | true |
| defaultSearchQueries | string[] | [] |
| defaultAiQuestions | string[] | [] |
| brandLogoImgSrcUrl | string | null |
| brandName | string | null |
| brandColor | string | #CB53EB |
| brandFontFamily | string | Maven Pro |
| problemLink | string (example: "mailto:[email protected]?subject=") | null |
| responsive | boolean | false |
| Name | Type | Default |
| ---------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------ |
| datasetId | string | '' |
| apiKey | string | '' |
| baseUrl | string | "https://api.trieve.ai" |
| type | "docs" | "ecommerce" | "docs" |
| useGroupSearch | boolean | false |
| chat | boolean | true |
| analytics | boolean | true |
| placeholder | string | "Search..." |
| onResultClick | () => void | () => {} |
| theme | "light" or "dark" | "light" |
| searchOptions | [AutocompleteReqPayload](https://ts-sdk.trieve.ai/types/types_gen.AutocompleteReqPayload.html) | `{ search_type: "fulltext" }` |
| openKeyCombination | { key?: string; label?: string; ctrl?: boolean }[] | [{ ctrl: true }, { key: "k", label: "K" }] |
| tags | { tag: string; label?: string; selected? boolean; iconClassName?: string }[] | [{tag: "docs", label: "dev docs", iconClassName: "fa-solid fa-info"}] |
| ButtonEl | JSX.ElementType | null |
| suggestedQueries | boolean | true |
| defaultSearchQueries | string[] | [] |
| defaultAiQuestions | string[] | [] |
| brandLogoImgSrcUrl | string | null |
| brandName | string | null |
| brandColor | string | #CB53EB |
| brandFontFamily | string | Maven Pro |
| 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 | true

### Search Results

Expand Down Expand Up @@ -155,4 +157,4 @@ Run the example application
$clients/search-component cd example/
$clients/search-component yarn
$clients/search-component yarn dev
```
```
4 changes: 3 additions & 1 deletion clients/search-component/example/.env.dist
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@ VITE_API_KEY="tr-zpPVGUq18FxOCmXgLfqGbmDOY4UMW00r"
VITE_BRAND_LOGO_SRC_URL="https://cdn.trieve.ai/trieve-logo.png"
VITE_BRAND_NAME="Trieve"
VITE_BRAND_COLOR="#CB53EB"
VITE_PROBLEM_LINK="mailto:[email protected]?subject="
VITE_PROBLEM_LINK="mailto:[email protected]?subject="
VITE_SHOW_FLOATING_BTN="true"
VITE_FLOATING_BTN_POSITION="bottom-right"
2 changes: 1 addition & 1 deletion clients/search-component/example/src/routes/__root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const Route = createRootRoute({
component: () => (
<>
<div className="random-trigger-location" style={{ background: "red" }}>
Hi, I'm a random root div that is outside the Hiearchy
Hi, I'm a random root div that is outside the hierarchy
</div>
<Outlet />
<TanStackRouterDevtools />
Expand Down
7 changes: 6 additions & 1 deletion clients/search-component/example/src/routes/ecommerce.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,14 @@ export default function ECommerce() {
const brandColor = import.meta.env.VITE_ACCENT_COLOR;
const problemLink = import.meta.env.VITE_PROBLEM_LINK;
const useGroupSearch = import.meta.env.VITE_USE_GROUP_SEARCH == "true";
const showFloatingButton = import.meta.env.VITE_SHOW_FLOATING_BTN == "true";
const floatingButtonPosition = import.meta.env.VITE_FLOATING_BTN_POSITION;

const defaultSearchQueries: string[] = (
import.meta.env.VITE_DEFAULT_SEARCH_QUERIES ?? ""
).split(",");
const defaultTags: any[] = JSON.parse(
import.meta.env.VITE_DEFAULT_TAGS ?? "[]"
import.meta.env.VITE_DEFAULT_TAGS ?? "[]",
);

const [theme, setTheme] = useState<"light" | "dark">("light");
Expand Down Expand Up @@ -80,6 +83,8 @@ export default function ECommerce() {
}}
defaultSearchQueries={defaultSearchQueries}
tags={defaultTags}
floatingButtonPosition={floatingButtonPosition}
showFloatingButton={showFloatingButton}
/>
</>
) : (
Expand Down
2 changes: 1 addition & 1 deletion 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.25",
"version": "0.2.26",
"license": "MIT",
"homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
"scripts": {
Expand Down
43 changes: 43 additions & 0 deletions clients/search-component/src/TrieveModal/FloatingActionButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { startTransition } from "react";
import { useModalState } from "../utils/hooks/modal-context";

export const FloatingActionButton = () => {
const { props, setOpen, setMode } = useModalState();

const setButtonPosition = (position: string) => {
switch (position) {
case "top-left":
return { top: "20px", left: "20px" };
case "top-right":
return { top: "20px", right: "20px" };
case "bottom-left":
return { bottom: "20px", left: "20px" };
case "bottom-right":
return { bottom: "20px", right: "20px" };
default:
return { bottom: "20px", right: "20px" };
}
};

return (
<button
onClick={() => {
startTransition(() => {
setOpen(true);
setMode("chat");
});
}}
className="floating-action-button"
style={{
...setButtonPosition(props.floatingButtonPosition || "bottom-right"),
display: props.showFloatingButton ? "" : "none",
}}
>
<i
className="fa-solid fa-wand-magic-sparkles"
style={{ fontSize: "14px" }}
></i>
Ask AI
</button>
);
};
6 changes: 6 additions & 0 deletions clients/search-component/src/TrieveModal/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1137,4 +1137,10 @@ body {
}
}
}

.floating-action-button {
@apply fixed flex flex-row w-24 h-10 gap-3 justify-center items-center text-sm cursor-pointer text-white rounded-xl;
background-color: var(--tv-prop-brand-color);
font-family: var(--tv-prop-brand-font-family);
}
}
2 changes: 2 additions & 0 deletions clients/search-component/src/TrieveModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { ChatProvider, useChatState } from "../utils/hooks/chat-context";
import r2wc from "@r2wc/react-to-web-component";
import { setClickTriggers } from "../utils/hooks/setClickTriggers";
import { ChunkGroup } from "trieve-ts-sdk";
import { FloatingActionButton } from "./FloatingActionButton";

const Modal = () => {
useKeyboardNavigation();
Expand Down Expand Up @@ -121,6 +122,7 @@ const Modal = () => {
</div>
</>
)}
<FloatingActionButton />
</>
);
};
Expand Down
8 changes: 8 additions & 0 deletions clients/search-component/src/utils/hooks/modal-context.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@ export type ModalProps = {
selector: string;
mode: SearchModes;
}[];
showFloatingButton?: boolean;
floatingButtonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
};

const defaultProps = {
Expand Down Expand Up @@ -109,6 +111,12 @@ const defaultProps = {
currencyPosition: "before" as currencyPosition,
responsive: false,
debounceMs: 0,
show: true,
position: "bottom-right" as
| "top-left"
| "top-right"
| "bottom-left"
| "bottom-right",
};

const ModalContext = createContext<{
Expand Down

0 comments on commit 57d2ff1

Please sign in to comment.