feat: vica integration

packages/components/src/interfaces/internal/Vica.ts

@@ -0,0 +1,51 @@
+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
+  "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
+}

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,

packages/components/src/templates/next/components/internal/Vica/Vica.tsx

@@ -0,0 +1,39 @@
+import type { VicaProps } from "~/interfaces"
+
+export const VicaStylesheet = () => {
+  return (
+    <>
+      <link
+        href="https://webchat.vica.gov.sg/static/css/chat.css"
+        referrerPolicy="origin"
+        rel="stylesheet"
+      />
+    </>
+  )
+}
+
+export const VicaWidget = ({
+  ScriptComponent = "script",
+  ...props
+}: VicaProps) => {
+  return (
+    <>
+      <ScriptComponent
+        async
+        type="text/javascript"
+        src="https://webchat.vica.gov.sg/static/js/chat.js"
+        referrerPolicy="origin"
+        // 'lazyOnload' is recommended by Next.js for chat widgets
+        // Reference: https://nextjs.org/docs/pages/api-reference/components/script#lazyonload
+        strategy="lazyOnload"
+      />
+      <div
+        id="webchat"
+        {...props}
+        app-font-family="Inter, system-ui, sans-serif"
+        // NOTE: Clarifying with VICA regarding color scheme
+        // Once confirmed, will override with site's color scheme for consistency
+      />
+    </>
+  )
+}

packages/components/src/templates/next/components/internal/Vica/index.ts

@@ -0,0 +1 @@
+export * from "./Vica"

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,

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 && <DatadogRum />}
 
+      {site.vica && <VicaStylesheet />}
+
       <header>
         <SkipToContent LinkComponent={LinkComponent} />
 
@@ -92,13 +96,15 @@ export const Skeleton = ({
         {...site.footerItems}
       />
 
-      {/* needs to be the last element in the body */}
       {shouldIncludeGTM && (
         <GoogleTagManagerBody
           siteGtmId={site.siteGtmId}
           isomerGtmId={site.isomerGtmId}
         />
       )}
+
+      {/* Ensures that the webchat widget only loads after the page has loaded */}
+      {site.vica && <VicaWidget {...site.vica} />}
     </>
   )
 }

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<NotificationProps, "LinkComponent" | "site">
   siteGtmId?: string
+  vica?: VicaProps
 }
 
 export type IsomerSiteProps = IsomerGeneratedSiteProps &