diff --git a/packages/journey-manager/src/index.ts b/packages/journey-manager/src/index.ts index 7687abd7..20a7dc69 100644 --- a/packages/journey-manager/src/index.ts +++ b/packages/journey-manager/src/index.ts @@ -33,6 +33,7 @@ export type { TriggeredStep, } from "./configuration"; export type { UrlCondition } from "./UrlCondition"; +export { iconUrls } from "./ui/components/icons"; /** * Configuration for the run method diff --git a/packages/journey-manager/src/ui/components/icons.tsx b/packages/journey-manager/src/ui/components/icons.tsx index c9ae43cb..2e611665 100644 --- a/packages/journey-manager/src/ui/components/icons.tsx +++ b/packages/journey-manager/src/ui/components/icons.tsx @@ -1,12 +1,30 @@ /* eslint-disable jsdoc/require-jsdoc */ import { type FunctionComponent } from "preact"; +const toStaticIcon = (svgString: string): string => + `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`; + +const staticIconColor = "#333"; + +export const iconUrls = { + supportAgent: toStaticIcon( + ``, + ), + callEnd: toStaticIcon( + ``, + ), + multimodal: toStaticIcon( + ``, + ), +}; + export const MultimodalIcon: FunctionComponent = () => ( ); + export const SupportAgentIcon: FunctionComponent = () => ( @@ -15,21 +33,25 @@ export const SupportAgentIcon: FunctionComponent = () => ( ); + export const ArrowBackIcon: FunctionComponent = () => ( ); + export const CallEndIcon: FunctionComponent = () => ( ); + export const CloseIcon: FunctionComponent = () => ( ); + export const CheckIcon: FunctionComponent = () => ( diff --git a/packages/journey-manager/src/ui/custom-element.tsx b/packages/journey-manager/src/ui/custom-element.tsx index db7906ca..8a2d7a33 100644 --- a/packages/journey-manager/src/ui/custom-element.tsx +++ b/packages/journey-manager/src/ui/custom-element.tsx @@ -10,6 +10,14 @@ import highlightBoxShadow, { teardown as teardownBoxShadowHighlight, } from "./highlightBoxShadow"; +if (typeof HTMLElement === "undefined") { + // this is a workaround because most of JourneyManager we want to only use in the browser, but some of it we want to render server side. + // this shim exists just so this file can be parsed by node, but it can't be used in node. + + // eslint-disable-next-line @typescript-eslint/no-extraneous-class + (global as any).HTMLElement = class {}; +} + /** * @hidden @internal */ diff --git a/packages/journey-manager/src/ui/index.tsx b/packages/journey-manager/src/ui/index.tsx index 8a3d271d..722f643c 100644 --- a/packages/journey-manager/src/ui/index.tsx +++ b/packages/journey-manager/src/ui/index.tsx @@ -7,7 +7,11 @@ import type { StepWithQueryAndElements, } from "../trigger"; -customElements.define("journey-manager", JourneyManagerElement); +// this is a workaround because most of JourneyManager we want to only use in the browser, but some of it we want to render server side. +// where the customElements API is not available. +if (typeof customElements !== "undefined") { + customElements.define("journey-manager", JourneyManagerElement); +} export interface Ui { teardown: () => void; diff --git a/packages/website/src/components/Prototyping.tsx b/packages/website/src/components/Prototyping.tsx index e7d5dc47..7c88b3da 100644 --- a/packages/website/src/components/Prototyping.tsx +++ b/packages/website/src/components/Prototyping.tsx @@ -1,5 +1,5 @@ import { type FC, useRef, useEffect, useState } from "react"; -import { type Triggers, type Trigger } from "@nlxai/journey-manager"; +import { type Triggers, type Trigger, iconUrls } from "@nlxai/journey-manager"; // Add extra names for triggers for logging purposes const triggersWithNames: Record = { @@ -361,6 +361,10 @@ export const Prototyping: FC = () => { return (

Test page

+
{showError ? (
Something went wrong diff --git a/test-repos/chat-core/package-lock.json b/test-repos/chat-core/package-lock.json index 3123b119..37dd84b8 100644 --- a/test-repos/chat-core/package-lock.json +++ b/test-repos/chat-core/package-lock.json @@ -17,7 +17,7 @@ }, "../../packages/chat-core": { "name": "@nlxai/chat-core", - "version": "0.1.48", + "version": "0.1.51", "license": "MIT", "dependencies": { "isomorphic-fetch": "^3.0.0",