feat: sync some missing settings (COR-4228) (#458)

This should close
* COR-4228
* DSN-2623
* COR-4230

Author: gillyb

packages/chat/src/components/Launcher/LauncherWithLabel/index.tsx

@@ -6,7 +6,6 @@ import { Button } from '@/components/Button';
 import { ClassName } from '@/constants';
 
 import { ChevronIcon } from '../ChevronIcon';
-import { PlayIcon } from '../PlayIcon';
 import { closeChevron, imageIconStyle, imageIconWrapper, launcherLabelStyles, launcherStyles } from './styles.css';
 
 export interface LauncherProps {
@@ -43,11 +42,7 @@ export const LauncherWithLabel: React.FC<LauncherProps> = ({ image, isOpen, labe
   return (
     <Button className={clsx(launcherStyles({ isOpen }), ClassName.LAUNCHER)} onClick={onClick}>
       <div className={imageIconWrapper({ isOpen })}>
-        {image ? (
-          <img src={image} className={clsx(imageIconStyle({ isOpen }))} alt="open chat" />
-        ) : (
-          <PlayIcon className={imageIconStyle({ isOpen })} />
-        )}
+        {image && <img src={image} className={clsx(imageIconStyle({ isOpen }))} alt="open chat" />}
         <ChevronIcon className={clsx(closeChevron({ isOpen }))} />
       </div>
       <div className={launcherLabelStyles}>{label}</div>

packages/chat/src/components/Launcher/PlayIcon.tsx

@@ -10,13 +10,12 @@ import { ChevronIcon } from './ChevronIcon';
 import { LauncherWithLabel } from './LauncherWithLabel';
 import {
   closeChevron,
+  closeIconStyles,
   iconContainer,
   imageStyles,
   launcherContainer,
   launcherIconStyles,
-  launcherLabelStyles,
   launcherStyles,
-  playIconStyles,
 } from './styles.css';
 
 export const DEFAULT_ICON = 'https://cdn.voiceflow.com/widget-next/message.png';
@@ -59,23 +58,31 @@ export interface LauncherProps {
 export const Launcher: React.FC<LauncherProps> = ({ image, type, isOpen, label, onClick }) => {
   const withIcon = type !== 'label';
   const withLabel = type !== 'icon' && !!label?.length;
+
   if (withLabel) {
-    return <LauncherWithLabel image={image} isOpen={isOpen} label={label} onClick={onClick} />;
+    return (
+      <LauncherWithLabel
+        image={withIcon ? (image ?? DEFAULT_ICON) : undefined}
+        isOpen={isOpen}
+        label={label}
+        onClick={onClick}
+      />
+    );
   }
+
   return (
     <div className={launcherContainer} onClick={onClick}>
       <Button className={clsx(ClassName.LAUNCHER, launcherStyles({ isOpen }))}>
         <div className={iconContainer({ isOpen, withIcon })}>
-          <ChevronIcon className={clsx(closeChevron({ isOpen }), launcherIconStyles())} />
+          <ChevronIcon className={clsx(closeChevron({ isOpen }), closeIconStyles())} />
           {withIcon && (
             <img
               src={image ?? DEFAULT_ICON}
-              className={clsx(imageStyles({ isOpen }), playIconStyles({}))}
+              className={clsx(imageStyles({ isOpen }), launcherIconStyles({}))}
               alt="open chat"
             />
           )}
         </div>
-        {withLabel && <div className={launcherLabelStyles({ isOpen })}>{label} </div>}
       </Button>
     </div>
   );

packages/chat/src/components/Launcher/index.tsx

@@ -128,7 +128,7 @@ export const launcherLabelStyles = recipe({
   },
 });
 
-export const launcherIconStyles = recipe({
+export const closeIconStyles = recipe({
   base: {
     color: THEME.colors[50],
     width: 32,
@@ -146,7 +146,7 @@ export const launcherIconStyles = recipe({
   },
 });
 
-export const playIconStyles = recipe({
+export const launcherIconStyles = recipe({
   base: {
     width: 32,
     height: 32,
@@ -167,6 +167,7 @@ export const playIconStyles = recipe({
     },
   },
 });
+
 export const twistInAnimation = keyframes({
   '0%': {
     opacity: 0,

packages/chat/src/components/Launcher/styles.css.ts

@@ -10,15 +10,16 @@ import { chatWindowStyle } from './ChatContainer.css';
 
 export interface IChatContainer {
   palette: WidgetSettingsColorPalette;
+  fontFamily?: string;
   children?: React.ReactNode;
   embedded?: boolean;
   isPopover?: boolean;
 }
 
-export const ChatContainer: React.FC<IChatContainer> = ({ palette, children, embedded, isPopover }) => {
+export const ChatContainer: React.FC<IChatContainer> = ({ palette, fontFamily, children, embedded, isPopover }) => {
   return (
     <div
-      style={assignInlineVars(THEME, { colors: palette, fontFamily: FAMILY })}
+      style={assignInlineVars(THEME, { colors: palette, fontFamily: fontFamily ?? FAMILY })}
       className={clsx(chatWindowStyle({ popover: isPopover }), embedded ? chatIsOpen : '')}
     >
       {children}

packages/chat/src/components/NewChat/ChatContainer/ChatContainer.component.tsx

@@ -18,6 +18,11 @@ import { ExtensionMessage } from './ExtensionMessage';
 import { hide, messageContainer, responseAvatar, systemMessageContainer } from './styles.css';
 import type { MessageProps } from './types';
 
+export interface AIDisclaimerProps {
+  enabled?: boolean;
+  text?: string;
+}
+
 export interface SystemMessageProps {
   /**
    * An image URL for an avatar to associate this message with.
@@ -54,6 +59,8 @@ export interface SystemMessageProps {
    * The entire text content of a response over a number of responses
    */
   textContent?: string;
+
+  aiDisclaimer?: AIDisclaimerProps;
 }
 
 /**
@@ -66,9 +73,9 @@ export const SystemMessage: React.FC<SystemMessageProps> = ({
   isLast,
   withImage,
   textContent,
+  aiDisclaimer,
 }) => {
-  const { config, assistant } = useContext(RuntimeStateAPIContext);
-  const aiMessage = assistant.chat.aiDisclaimer.text;
+  const { config } = useContext(RuntimeStateAPIContext);
 
   return (
     <div className={clsx(ClassName.SYSTEM_RESPONSE, systemMessageContainer)}>
@@ -86,8 +93,8 @@ export const SystemMessage: React.FC<SystemMessageProps> = ({
                 .with({ type: MessageType.TEXT }, ({ text, ai }) => (
                   <AgentMessage
                     text={text}
-                    disclaimerMessage={aiMessage}
-                    ai={ai}
+                    disclaimerMessage={aiDisclaimer?.text}
+                    ai={ai && aiDisclaimer?.enabled}
                     isLast={isLast}
                     feedback={feedback}
                     textContent={textContent}

packages/chat/src/components/SystemResponse/SystemMessage.tsx

@@ -83,15 +83,15 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ shadowRoot, chatAPI, rea
   const isDefaultFont = customFontFamily === 'UCity Pro';
 
   useEffect(() => {
-    if (!isDefaultFont) {
-      const link = document.createElement('link');
+    if (isDefaultFont) return;
 
-      const fontFamilyNameForImport = customFontFamily.replace(/ /g, '+');
-      link.href = `https://fonts.googleapis.com/css2?family=${fontFamilyNameForImport}&display=swap`;
-      link.rel = 'stylesheet';
-      document.head.appendChild(link);
-    }
-  }, []);
+    const link = document.createElement('link');
+
+    const fontFamilyNameForImport = customFontFamily.replace(/ /g, '+');
+    link.href = `https://fonts.googleapis.com/css2?family=${fontFamilyNameForImport}&display=swap`;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+  }, [customFontFamily]);
 
   if (!isStyleSheetResolved) return null;
   if (!palette) return null;

packages/chat/src/views/ChatWidget/index.tsx

@@ -14,6 +14,7 @@ import type { FeedbackName } from '@/contexts/RuntimeContext/useRuntimeAPI';
 import { DEFAULT_CHAT_AVATAR } from '@/dtos/AssistantOptions.dto';
 import { RenderMode } from '@/dtos/RenderOptions.dto';
 import { usePalette } from '@/hooks/usePalette';
+import { FAMILY } from '@/styles/font';
 import type { UserTurnProps } from '@/types';
 import { SessionStatus, TurnType } from '@/types';
 
@@ -52,7 +53,12 @@ export const ChatWindow: React.FC<ChatWindowProps> = ({ isMobile, isPopover }) =
   const hasEnded = runtime.isStatus(SessionStatus.ENDED);
 
   return (
-    <NewChat.Container embedded={config.render.mode === RenderMode.EMBEDDED} palette={palette} isPopover={isPopover}>
+    <NewChat.Container
+      embedded={config.render.mode === RenderMode.EMBEDDED}
+      palette={palette}
+      fontFamily={assistant.common.fontFamily === 'UCity Pro' ? FAMILY : assistant.common.fontFamily}
+      isPopover={isPopover}
+    >
       <NewChat
         headerProps={{
           title: assistant.chat.banner.title,
@@ -68,6 +74,7 @@ export const ChatWindow: React.FC<ChatWindowProps> = ({ isMobile, isPopover }) =
         footerProps={{
           showPoweredBy: assistant.common.poweredBy,
           messageInputProps: {
+            placeholder: assistant.chat.placeholderText,
             onSubmit: runtime.reply,
             audioInterface: assistant.chat.voiceInput,
             hasEnded,