Skip to content

Commit

Permalink
cleanup: added props to modal + added documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@vid277
vid277 committed Dec 16, 2024
1 parent 63506ea commit c80483a
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 49 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"
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 @@ -18,11 +18,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 @@ -81,6 +84,8 @@ export default function ECommerce() {
}}
defaultSearchQueries={defaultSearchQueries}
tags={defaultTags}
floatingButtonPosition={floatingButtonPosition}
showFloatingButton={showFloatingButton}
/>
</>
) : (
Expand Down
25 changes: 13 additions & 12 deletions clients/search-component/src/TrieveModal/FloatingActionButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
import React from "react";
import React, { startTransition } from "react";
import { useModalState } from "../utils/hooks/modal-context";

interface OpenModalButtonProps {
setOpen: () => void;
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
}
export const FloatingActionButton = () => {
const { props, setOpen, setMode } = useModalState();

export const FloatingActionButton = ({
setOpen,
position = "bottom-right",
}: OpenModalButtonProps) => {
const setButtonPosition = (position: string): React.CSSProperties => {
const setButtonPosition = (position: string) => {
switch (position) {
case "top-left":
return { top: "20px", left: "20px" };
Expand All @@ -26,10 +21,16 @@ export const FloatingActionButton = ({

return (
<button
onClick={setOpen}
onClick={() => {
startTransition(() => {
setOpen(true);
setMode("chat");
});
}}
className="floating-action-button"
style={{
...setButtonPosition(position),
...setButtonPosition(props.floatingButtonPosition || "bottom-right"),
display: props.showFloatingButton ? "" : "none",
}}
>
<i
Expand Down
10 changes: 1 addition & 9 deletions clients/search-component/src/TrieveModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,15 +95,7 @@ const Modal = () => {
</div>
</>
)}
<FloatingActionButton
setOpen={() => {
startTransition(() => {
setOpen(true);
setMode("chat");
});
}}
position="bottom-right"
/>
<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 c80483a

Please sign in to comment.