From 33ac3ace9b7c40def89d7d87011cfb9b18df1d43 Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Mon, 13 Jan 2025 13:48:40 +0800 Subject: [PATCH 1/5] add vica props --- .../src/interfaces/internal/Vica.ts | 48 +++++++++++++++++++ .../src/interfaces/internal/index.ts | 1 + 2 files changed, 49 insertions(+) create mode 100644 packages/components/src/interfaces/internal/Vica.ts diff --git a/packages/components/src/interfaces/internal/Vica.ts b/packages/components/src/interfaces/internal/Vica.ts new file mode 100644 index 0000000000..6531453825 --- /dev/null +++ b/packages/components/src/interfaces/internal/Vica.ts @@ -0,0 +1,48 @@ +import type { ScriptComponentType } from "~/types" + +interface VicaWidgetProps { + // UI Theme + "app-id": string + "app-name": string + "app-icon"?: string + "app-subtitle"?: string // configuration disabled (according to docs) + "app-welcome-message"?: string + "app-font-family"?: string + "app-base-font-size"?: string + // General Color + "app-color"?: string + "app-foreground-color1"?: string + "app-background-color2"?: string + "app-foreground-color2"?: string + "app-canvas-background-color"?: string + "app-button-border-color"?: string + "app-quick-reply-button-background-color"?: string + // Autocomplete + "app-enable-auto-complete"?: boolean + "app-auto-complete-background-color"?: string + "app-auto-complete-foreground-color"?: string + "app-auto-complete-hover-color"?: string + "app-auto-complete-divider-color"?: string + // Recommendations + "app-enable-recommendations"?: boolean + "app-recommendations-background-color"?: string + "app-recommendations-foreground-color"?: string + "app-recommendations-hover-color"?: string + // UI Behaviours + "app-orchestrator-timeout"?: number + "app-alternate-copy-vault"?: string + "app-auto-launch"?: boolean + "app-launched-animation-iteration"?: number + "app-disable-csat"?: boolean + // Chatbot Behaviours + "app-quick-launch-event"?: string + "app-quick-launch-event-force-trigger"?: boolean + "app-bot-response-trigger-event"?: string + "app-environment-override"?: string + "app-translation-languages"?: string + "app-enable-hide-translation"?: boolean +} + +export interface VicaProps extends VicaWidgetProps { + ScriptComponent?: ScriptComponentType +} diff --git a/packages/components/src/interfaces/internal/index.ts b/packages/components/src/interfaces/internal/index.ts index 76c417013d..03424caaec 100644 --- a/packages/components/src/interfaces/internal/index.ts +++ b/packages/components/src/interfaces/internal/index.ts @@ -34,6 +34,7 @@ export type { SiderailProps } from "./Siderail" export type { SkipToContentProps } from "./SkipToContent" export type { TableOfContentsProps } from "./TableOfContents" export type { WogaaProps } from "./Wogaa" +export type { VicaProps } from "./Vica" export type { GoogleTagManagerHeaderScriptProps, GoogleTagManagerHeaderProps, From 550e30e628e189b5b43fcaf886d5ad773ed277fa Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Mon, 13 Jan 2025 13:48:47 +0800 Subject: [PATCH 2/5] add vica to siteprops --- packages/components/src/types/site.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/types/site.ts b/packages/components/src/types/site.ts index e407678d52..9de9687383 100644 --- a/packages/components/src/types/site.ts +++ b/packages/components/src/types/site.ts @@ -1,5 +1,5 @@ import type { IsomerSitemap } from "./sitemap" -import type { NavbarProps, NotificationProps } from "~/interfaces" +import type { NavbarProps, NotificationProps, VicaProps } from "~/interfaces" import type { SiteConfigFooterProps } from "~/interfaces/internal/Footer" export interface IsomerGeneratedSiteProps { @@ -26,6 +26,7 @@ export interface IsomerSiteConfigProps { search: NavbarProps["search"] notification?: Omit siteGtmId?: string + vica?: VicaProps } export type IsomerSiteProps = IsomerGeneratedSiteProps & From bf1578b7415743ac5c58cb0a62cbfabdbd0f2e7b Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Mon, 13 Jan 2025 13:49:00 +0800 Subject: [PATCH 3/5] add vica stylesheet and widget component --- .../next/components/internal/Vica/Vica.tsx | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 packages/components/src/templates/next/components/internal/Vica/Vica.tsx diff --git a/packages/components/src/templates/next/components/internal/Vica/Vica.tsx b/packages/components/src/templates/next/components/internal/Vica/Vica.tsx new file mode 100644 index 0000000000..15079ab206 --- /dev/null +++ b/packages/components/src/templates/next/components/internal/Vica/Vica.tsx @@ -0,0 +1,33 @@ +import type { VicaProps } from "~/interfaces" + +export const VicaStylesheet = () => { + return ( + <> + + + ) +} + +export const VicaWidget = ({ + ScriptComponent = "script", + ...props +}: VicaProps) => { + return ( + <> + +
+ + ) +} From 4608ab54347e8a848a797ae3f7aa2448cb59e3bb Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Mon, 13 Jan 2025 13:49:09 +0800 Subject: [PATCH 4/5] add vica to skeleton --- .../src/templates/next/components/internal/Vica/index.ts | 1 + .../src/templates/next/components/internal/index.ts | 1 + .../src/templates/next/layouts/Skeleton/Skeleton.tsx | 8 +++++++- 3 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 packages/components/src/templates/next/components/internal/Vica/index.ts diff --git a/packages/components/src/templates/next/components/internal/Vica/index.ts b/packages/components/src/templates/next/components/internal/Vica/index.ts new file mode 100644 index 0000000000..e05da840dd --- /dev/null +++ b/packages/components/src/templates/next/components/internal/Vica/index.ts @@ -0,0 +1 @@ +export * from "./Vica" diff --git a/packages/components/src/templates/next/components/internal/index.ts b/packages/components/src/templates/next/components/internal/index.ts index cfdcdf0d9b..5fbcd78b15 100644 --- a/packages/components/src/templates/next/components/internal/index.ts +++ b/packages/components/src/templates/next/components/internal/index.ts @@ -22,6 +22,7 @@ export { SkipToContent } from "./SkipToContent" export { default as TableOfContents } from "./TableOfContents" export { default as UnsupportedBrowserBanner } from "./UnsupportedBrowserBanner" export { Wogaa } from "./Wogaa" +export { VicaStylesheet, VicaWidget } from "./Vica" export { BackToTopLink } from "./BackToTopLink" export { GoogleTagManagerHeader, diff --git a/packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx b/packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx index 7b67a6459e..0f749f52b7 100644 --- a/packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx +++ b/packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx @@ -10,6 +10,8 @@ import { Notification, SkipToContent, UnsupportedBrowserBanner, + VicaStylesheet, + VicaWidget, Wogaa, } from "../../components/internal" import { SKIP_TO_CONTENT_ANCHOR_ID } from "../../constants" @@ -48,6 +50,8 @@ export const Skeleton = ({ {!isStaging && } + {site.vica && } +
@@ -92,13 +96,15 @@ export const Skeleton = ({ {...site.footerItems} /> - {/* needs to be the last element in the body */} {shouldIncludeGTM && ( )} + + {/* Ensures that the webchat widget only loads after the page has loaded */} + {site.vica && } ) } From 25eee45d5b4748f7b2138bb3acd02f4f5c1c7caa Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Mon, 13 Jan 2025 14:10:37 +0800 Subject: [PATCH 5/5] override app-font-family + add comments --- packages/components/src/interfaces/internal/Vica.ts | 3 +++ .../src/templates/next/components/internal/Vica/Vica.tsx | 8 +++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/src/interfaces/internal/Vica.ts b/packages/components/src/interfaces/internal/Vica.ts index 6531453825..846cc7cda8 100644 --- a/packages/components/src/interfaces/internal/Vica.ts +++ b/packages/components/src/interfaces/internal/Vica.ts @@ -1,5 +1,8 @@ import type { ScriptComponentType } from "~/types" +// NOTE: not all props will be used even if we passed them in +// as we will override some of them with Isomer's configuration e.g. font-family +// Nevertheless, keeping them here for reference interface VicaWidgetProps { // UI Theme "app-id": string diff --git a/packages/components/src/templates/next/components/internal/Vica/Vica.tsx b/packages/components/src/templates/next/components/internal/Vica/Vica.tsx index 15079ab206..5467ec1197 100644 --- a/packages/components/src/templates/next/components/internal/Vica/Vica.tsx +++ b/packages/components/src/templates/next/components/internal/Vica/Vica.tsx @@ -27,7 +27,13 @@ export const VicaWidget = ({ // Reference: https://nextjs.org/docs/pages/api-reference/components/script#lazyonload strategy="lazyOnload" /> -
+
) }