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: add floating action button to docsearch #2949

Merged
merged 2 commits into from
Dec 16, 2024
Merged

feature: add floating action button to docsearch #2949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50c9c0b
feature: add floating action button to docsearch component
vid277 Dec 16, 2024
98742e6
feature: add floating action button options to dashboard publicpagese…
skeptrunedev Dec 16, 2024
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
54 changes: 28 additions & 26 deletions clients/search-component/README.md
View file
Open in desktop
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 | false |

### 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
Open in desktop
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
Open in desktop
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
Open in desktop
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
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.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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
8 changes: 8 additions & 0 deletions clients/ts-sdk/openapi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12324,6 +12324,10 @@
},
"nullable": true
},
"floatingButtonPosition": {
"type": "string",
"nullable": true
},
"forBrandName": {
"type": "string",
"nullable": true
Expand Down Expand Up @@ -12376,6 +12380,10 @@
],
"nullable": true
},
"showFloatingButton": {
"type": "boolean",
"nullable": true
},
"singleProductOptions": {
"allOf": [
{
Expand Down
2 changes: 2 additions & 0 deletions clients/ts-sdk/src/types.gen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2055,6 +2055,7 @@ export type PublicPageParameters = {
defaultCurrency?: (string) | null;
defaultSearchMode?: (string) | null;
defaultSearchQueries?: Array<(string)> | null;
floatingButtonPosition?: (string) | null;
forBrandName?: (string) | null;
headingPrefix?: (string) | null;
heroPattern?: ((HeroPattern) | null);
Expand All @@ -2065,6 +2066,7 @@ export type PublicPageParameters = {
problemLink?: (string) | null;
responsive?: (boolean) | null;
searchOptions?: ((PublicPageSearchOptions) | null);
showFloatingButton?: (boolean) | null;
singleProductOptions?: ((SingleProductOptions) | null);
suggestedQueries?: (boolean) | null;
tabMessages?: Array<PublicPageTabMessage> | null;
Expand Down
50 changes: 50 additions & 0 deletions frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -755,6 +755,56 @@ const PublicPageControls = () => {
</div>
</div>

<div class="grid grid-cols-2 gap-4">
<div class="flex gap-2">
<div class="flex items-center gap-1">
<label class="block" for="">
Show Floating Chat Button
</label>
<Tooltip
tooltipText="Show a floating chat button on the page"
body={
<FaRegularCircleQuestion class="h-3 w-3 text-black" />
}
/>
</div>
<input
type="checkbox"
checked={extraParams.showFloatingButton || false}
onChange={(e) => {
setExtraParams(
"showFloatingButton",
e.currentTarget.checked,
);
}}
class="block w-4 rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
/>
</div>
<div class="grow">
<div class="flex items-center gap-1">
<label class="block" for="">
Floating Chat Button Position
</label>
<Tooltip
tooltipText="Either top-right, bottom-right, top-left, or bottom-left"
body={
<FaRegularCircleQuestion class="h-3 w-3 text-black" />
}
/>
</div>
<input
value={extraParams.floatingButtonPosition || "bottom-right"}
onChange={(e) => {
setExtraParams(
"floatingButtonPosition",
e.currentTarget.value,
);
}}
class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
/>
</div>
</div>

<div class="grid grid-cols-2 gap-4">
<div class="flex gap-2">
<div class="flex items-center gap-1">
Expand Down
6 changes: 6 additions & 0 deletions server/src/data/models.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3147,6 +3147,12 @@ impl DatasetConfigurationDTO {
currency_position: page_parameters_self
.currency_position
.or(page_parameters_curr.currency_position),
floating_button_position: page_parameters_self
.floating_button_position
.or(page_parameters_curr.floating_button_position),
show_floating_button: page_parameters_self
.show_floating_button
.or(page_parameters_curr.show_floating_button),
debounce_ms: page_parameters_self
.debounce_ms
.or(page_parameters_curr.debounce_ms),
Expand Down
4 changes: 4 additions & 0 deletions server/src/handlers/page_handler.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,10 @@ pub struct PublicPageParameters {
#[serde(skip_serializing_if = "Option::is_none")]
pub currency_position: Option<String>,
#[serde(skip_serializing_if = "Option::is_none")]
pub floating_button_position: Option<String>,
#[serde(skip_serializing_if = "Option::is_none")]
pub show_floating_button: Option<bool>,
#[serde(skip_serializing_if = "Option::is_none")]
pub debounce_ms: Option<i32>,
#[serde(skip_serializing_if = "Option::is_none")]
pub hero_pattern: Option<HeroPattern>,
Expand Down
Loading
Loading