这是indexloc提供的服务，不要输入任何密码
Skip to content

feat: open graph and alternate chat image for public page #2885

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

Merged
merged 4 commits into from
Dec 4, 2024
Merged

feat: open graph and alternate chat image for public page #2885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a82a3f5
feat: add inputs for OG and alternate chat image
drew-harris Dec 4, 2024
2b74ec1
fix: change new variable to "nav"
drew-harris Dec 4, 2024
11a799e
feat: add open graph to page template
drew-harris Dec 4, 2024
c0ae051
feat: revert to higher level og options
drew-harris Dec 4, 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
29 changes: 29 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 @@ -11513,6 +11513,23 @@
}
]
},
"OpenGraphMetadata": {
"type": "object",
"properties": {
"description": {
"type": "string",
"nullable": true
},
"image": {
"type": "string",
"nullable": true
},
"title": {
"type": "string",
"nullable": true
}
}
},
"Organization": {
"type": "object",
"required": [
Expand Down Expand Up @@ -11820,6 +11837,18 @@
],
"nullable": true
},
"navLogoImgSrcUrl": {
"type": "string",
"nullable": true
},
"openGraphMetadata": {
"allOf": [
{
"$ref": "#/components/schemas/OpenGraphMetadata"
}
],
"nullable": true
},
"placeholder": {
"type": "string",
"nullable": true
Expand Down
8 changes: 8 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 @@ -1824,6 +1824,12 @@ export type MultiQuery = {

export type NewChunkMetadataTypes = SlimChunkMetadataWithArrayTagSet | ChunkMetadata | ContentChunkMetadata;

export type OpenGraphMetadata = {
description?: (string) | null;
image?: (string) | null;
title?: (string) | null;
};

export type Organization = {
created_at: string;
deleted: number;
Expand Down Expand Up @@ -1885,6 +1891,8 @@ export type PublicPageParameters = {
defaultSearchMode?: (string) | null;
defaultSearchQueries?: Array<(string)> | null;
heroPattern?: ((HeroPattern) | null);
navLogoImgSrcUrl?: (string) | null;
openGraphMetadata?: ((OpenGraphMetadata) | null);
placeholder?: (string) | null;
problemLink?: (string) | null;
responsive?: (boolean) | null;
Expand Down
178 changes: 144 additions & 34 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 @@ -78,25 +78,6 @@ const PublicPageControls = () => {
</a>
</div>
<div class="mt-4 flex space-x-3">
<div class="grow">
<div class="flex items-center gap-1">
<label class="block" for="">
Brand Logo Link
</label>
<Tooltip
tooltipText="URL for your brand's logo that will be displayed in the search component"
body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
/>
</div>
<input
placeholder="https://cdn.trieve.ai/favicon.ico"
value={extraParams.brandLogoImgSrcUrl || ""}
onInput={(e) => {
setExtraParams("brandLogoImgSrcUrl", 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 class="grow">
<div class="flex items-center gap-1">
<label class="block" for="">
Expand Down Expand Up @@ -157,31 +138,96 @@ const PublicPageControls = () => {
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 class="grow">
<div class="flex items-center gap-1">
<label class="block" for="">
Problem Link
</label>
<Tooltip
tooltipText="Contact link for users to report issues (e.g. mailto: or support URL)"
body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
/>
</div>
<input
placeholder="mailto:humans@trieve.ai"
value={extraParams.problemLink || ""}
onInput={(e) => {
setExtraParams("problemLink", 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="mt-4 flex">
<div class="flex grow">
<div class="mt-4 flex items-start gap-8">
<div class="flex grow flex-col gap-2">
<div class="grow">
<div class="flex items-center gap-1">
<label class="block" for="">
Problem Link
Brand Logo Link
</label>
<Tooltip
tooltipText="Contact link for users to report issues (e.g. mailto: or support URL)"
tooltipText="URL for your brand's logo that will be displayed in the navbar of the public page."
body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
/>
</div>
<input
placeholder="mailto:humans@trieve.ai"
value={extraParams.problemLink || ""}
onInput={(e) => {
setExtraParams("problemLink", 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 class="flex grow items-center gap-2">
<input
placeholder="https://cdn.trieve.ai/favicon.ico"
value={extraParams.brandLogoImgSrcUrl || ""}
onInput={(e) => {
setExtraParams("brandLogoImgSrcUrl", e.currentTarget.value);
}}
class="block w-full grow 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"
/>
<Show when={extraParams.brandLogoImgSrcUrl}>
{(url) => (
<div class="max-w-[58px]">
<img
src={url()}
class="max-h-[58px] max-w-[58px]"
alt="Brand Logo"
/>
</div>
)}
</Show>
</div>
</div>
<div class="grow">
<div class="flex items-center gap-1">
<label class="block" for="">
Brand Navbar Logo Link
</label>
<Tooltip
tooltipText="URL for your brand's logo that will be displayed in the search component. Square aspect ratio is ideal."
body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
/>
</div>
<div class="flex grow items-center gap-2">
<input
placeholder="https://cdn.trieve.ai/favicon.ico"
value={extraParams.navLogoImgSrcUrl || ""}
onInput={(e) => {
setExtraParams("navLogoImgSrcUrl", e.currentTarget.value);
}}
class="block w-full grow 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"
/>
<Show when={extraParams.navLogoImgSrcUrl}>
{(url) => (
<div class="max-w-[58px]">
<img
src={url()}
class="max-h-[58px] max-w-[58px]"
alt="Brand Logo"
/>
</div>
)}
</Show>
</div>
</div>
</div>
<div class="ml-3 grid grow grid-cols-2 items-center gap-1.5 p-1.5">

<div class="grid grid-cols-2 items-start gap-2 gap-x-9 pt-4">
<div class="flex gap-2">
<div class="flex items-center gap-1">
<label class="block" for="">
Expand Down Expand Up @@ -448,7 +494,7 @@ const PublicPageControls = () => {
</div>
</div>
</Show>
<details class="mb-4 mt-4">
<details class="pt-4">
<summary class="cursor-pointer text-sm font-medium">
Advanced Settings
</summary>
Expand Down Expand Up @@ -604,6 +650,8 @@ const PublicPageControls = () => {
</div>
</details>

<OgOptions />

<TabOptions />

<div class="space-x-1.5 pt-8">
Expand Down Expand Up @@ -726,7 +774,7 @@ export const TabOptions = () => {
};

return (
<details open={messages.length > 0}>
<details class="pt-2" open={messages.length > 0}>
<summary class="cursor-pointer text-sm font-medium">Tab Messages</summary>
<div class="flex items-end gap-2 overflow-y-auto pt-2">
<For each={messages}>
Expand Down Expand Up @@ -845,3 +893,65 @@ const HtmlEditor = (props: {
/>
);
};

export const OgOptions = () => {
const { extraParams, setExtraParams } = usePublicPage();
const [defaultDetailOpen] = createSignal(
!!extraParams.openGraphMetadata?.title ||
!!extraParams.openGraphMetadata?.image ||
!!extraParams.openGraphMetadata?.description,
);

return (
<details class="pt-2" open={defaultDetailOpen()}>
<summary class="cursor-pointer text-sm font-medium">Open Graph</summary>
<div class="flex gap-4 pt-2">
<div class="grow">
<label class="block">OG Title</label>
<input
placeholder="Title of the page"
value={extraParams.openGraphMetadata?.title || ""}
onInput={(e) => {
setExtraParams("openGraphMetadata", {
...extraParams.openGraphMetadata,
title: 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 class="grow">
<label class="block">OG Image</label>
<input
placeholder="Image URL"
value={extraParams.openGraphMetadata?.image || ""}
onInput={(e) => {
setExtraParams("openGraphMetadata", {
...extraParams.openGraphMetadata,
image: 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="flex gap-4 pb-2 pt-2">
<div class="grow">
<label class="block">OG Description</label>
<textarea
cols={2}
placeholder="Description of the page"
value={extraParams.openGraphMetadata?.description || ""}
onInput={(e) => {
setExtraParams("openGraphMetadata", {
...extraParams.openGraphMetadata,
description: 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>
</details>
);
};
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 @@ -3000,6 +3000,9 @@ impl DatasetConfigurationDTO {
brand_logo_img_src_url: page_parameters_self
.brand_logo_img_src_url
.or(page_parameters_curr.brand_logo_img_src_url),
nav_logo_img_src_url: page_parameters_self
.nav_logo_img_src_url
.or(page_parameters_curr.nav_logo_img_src_url),
problem_link: page_parameters_self
.problem_link
.or(page_parameters_curr.problem_link),
Expand Down Expand Up @@ -3042,6 +3045,9 @@ impl DatasetConfigurationDTO {
tab_messages: page_parameters_self
.tab_messages
.or(page_parameters_curr.tab_messages),
open_graph_metadata: page_parameters_self
.open_graph_metadata
.or(page_parameters_curr.open_graph_metadata),
}),
},
}
Expand Down
12 changes: 12 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 @@ -126,6 +126,14 @@ pub struct PublicPageTabMessage {
show_component_code: bool,
}

#[derive(Serialize, Deserialize, Debug, Clone, ToSchema, Default)]
#[serde(rename_all = "camelCase")]
pub struct OpenGraphMetadata {
title: Option<String>,
image: Option<String>,
description: Option<String>,
}

#[derive(Serialize, Deserialize, Debug, Clone, ToSchema, Default)]
#[serde(rename_all = "camelCase")]
pub struct PublicPageParameters {
Expand Down Expand Up @@ -155,6 +163,8 @@ pub struct PublicPageParameters {
#[serde(skip_serializing_if = "Option::is_none")]
pub brand_logo_img_src_url: Option<String>,
#[serde(skip_serializing_if = "Option::is_none")]
pub nav_logo_img_src_url: Option<String>,
#[serde(skip_serializing_if = "Option::is_none")]
pub problem_link: Option<String>,
#[serde(skip_serializing_if = "Option::is_none")]
pub brand_color: Option<String>,
Expand All @@ -180,6 +190,8 @@ pub struct PublicPageParameters {
pub hero_pattern: Option<HeroPattern>,
#[serde(skip_serializing_if = "Option::is_none")]
pub tab_messages: Option<Vec<PublicPageTabMessage>>,
#[serde(skip_serializing_if = "Option::is_none")]
pub open_graph_metadata: Option<OpenGraphMetadata>,
}

#[utoipa::path(
Expand Down
1 change: 1 addition & 0 deletions server/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,7 @@ impl Modify for SecurityAddon {
operators::chunk_operator::HighlightStrategy,
handlers::stripe_handler::CreateSetupCheckoutSessionResPayload,
handlers::page_handler::PublicPageSearchOptions,
handlers::page_handler::OpenGraphMetadata,
data::models::DateRange,
data::models::FieldCondition,
data::models::Range,
Expand Down
2 changes: 1 addition & 1 deletion server/src/public/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<a class="flex items-center" href="https://trieve.ai">
<img
class="corner-logo"
src="{{params.brandLogoImgSrcUrl|safe if (params.brandLogoImgSrcUrl is defined and params.brandLogoImgSrcUrl) else 'https://cdn.trieve.ai/trieve-logo.png'|safe}}"
src="{{params.navLogoImgSrcUrl|safe if (params.navLogoImgSrcUrl is defined and params.navLogoImgSrcUrl) else 'https://cdn.trieve.ai/trieve-logo.png'|safe}}"
/>
</a>
<div
Expand Down
15 changes: 15 additions & 0 deletions server/src/public/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,21 @@
href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/default.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

{% if params.openGraphMetadata %}
{% if params.openGraphMetadata.title %}
<meta property="og:title" content="{{params.openGraphMetadata.title}}" />
{% endif %}
<meta property="og:url" content="{{params.baseUrl}}/public_page/{{params.datasetId}}" />
<meta property="og:type" content="website" />
{% if params.openGraphMetadata.image %}
<meta property="og:image" content="{{params.openGraphMetadata.image}}" />
{% endif %}
{% if params.openGraphMetadata.description %}
<meta property="og:description" content="{{params.openGraphMetadata.description}}" />
{% endif %}
{% endif %}

<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/javascript.min.js"></script>

Expand Down
Loading