fix: header actions (COR-3811)

apps/documentation/src/pages/molecules/header.mdx

@@ -6,15 +6,18 @@ import { StoryEmbed } from '../../components/StoryEmbed';
 
 ## Base
 
-<StoryEmbed for="Header" name="Base" clientOnly={true} />
+<StoryEmbed for="Header" name="Actionable" clientOnly={true} />
 
-## With actions
+## Muted
 
-<StoryEmbed for="Header" name="Actionable" clientOnly={true} />
+<StoryEmbed for="Header" name="Muted" clientOnly={true} />
 
 ## Without an image
 
 <StoryEmbed for="Header" name="NoImage" clientOnly={true} />
 
+## Mobile
+
+<StoryEmbed for="Header" name="Mobile" clientOnly={true} />
 
 </div>

packages/chat/src/assets/svg/index.ts

@@ -10,6 +10,7 @@ export { default as documentUrl } from './document-url.svg?react';
 export { default as largeArrowLeft } from './large-arrow-left.svg?react';
 export { default as microphone } from './microphone.svg?react';
 export { default as minus } from './minus.svg?react';
+export { default as mute } from './mute.svg?react';
 export { default as reset } from './reset.svg?react';
 export { default as smallArrowUp } from './small-arrow-up.svg?react';
 export { default as sound } from './sound.svg?react';

packages/chat/src/components/Header/Header.story.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { VF_ICON } from '@/fixtures';
+import EMPTY_IMAGE from '@/__fixtures__/empty-image.png';
 import { WithDefaultPalette } from '@/storybook/decorators';
 
 import { Header } from '.';
@@ -10,7 +10,7 @@ const meta: Meta<typeof Header> = {
   component: Header,
   args: {
     title: 'Agent name',
-    image: VF_ICON,
+    image: EMPTY_IMAGE,
     actions: [],
   },
   render: (args) => <Header {...args} />,
@@ -25,21 +25,34 @@ export const Base: Story = {};
 
 export const Actionable: Story = {
   args: {
-    actions: [{ svg: 'volume' }, { svg: 'reset' }, { svg: 'close' }],
+    actions: [{ svg: 'volume' }, { svg: 'reset' }],
+  },
+};
+
+export const Muted: Story = {
+  args: {
+    actions: [{ svg: 'mute' }, { svg: 'reset' }],
   },
 };
 
 export const Themed: Story = {
   args: {
-    actions: [{ svg: 'volume' }, { svg: 'reset' }, { svg: 'close' }],
+    actions: [{ svg: 'volume' }, { svg: 'reset' }],
   },
   decorators: [WithDefaultPalette],
 };
 
 export const NoImage: Story = {
   args: {
-    actions: [{ svg: 'volume' }, { svg: 'reset' }, { svg: 'close' }],
+    actions: [{ svg: 'volume' }, { svg: 'reset' }],
     image: undefined,
   },
   decorators: [WithDefaultPalette],
 };
+
+export const Mobile: Story = {
+  args: {
+    actions: [{ svg: 'volume' }, { svg: 'reset' }, { svg: 'close' }],
+  },
+  decorators: [WithDefaultPalette],
+};

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

@@ -3,11 +3,9 @@ import { useContext, useMemo, useRef, useState } from 'react';
 
 import { ClassName } from '@/constants';
 import { AutoScrollProvider, RuntimeStateAPIContext, RuntimeStateContext } from '@/contexts';
-import { RenderMode } from '@/dtos/RenderOptions.dto';
 import type { Nullish } from '@/types';
 import { chain } from '@/utils/functional';
 
-import mockAvatar from '../../assets/blank-image.png';
 import { Header, type HeaderActionProps, type HeaderProps } from '../Header';
 import { type INewFooter, NewFooter } from '../NewFooter';
 import { Prompt } from '../Prompt';
@@ -26,6 +24,11 @@ export interface INewChat extends HeaderProps, IWelcomeMessage, INewFooter, Reac
    */
   audioInterface?: boolean;
 
+  /**
+   * If true, the user is using a mobile device.
+   */
+  isMobile?: boolean;
+
   /**
    * A unix timestamp indicating the start of the conversation.
    */
@@ -58,6 +61,7 @@ export const NewChat: React.FC<INewChat> = ({
   extraLinkUrl,
   children,
   audioInterface,
+  isMobile,
 }) => {
   const [hasAlert, setAlert] = useState(false);
 
@@ -75,15 +79,14 @@ export const NewChat: React.FC<INewChat> = ({
   const handleResume = (): void => setAlert(false);
 
   const headerActions = useMemo<HeaderActionProps[]>(() => {
-    const items: HeaderActionProps[] = [{ svg: 'close', onClick: handleClose }];
-
-    if (config.render?.mode === RenderMode.OVERLAY) {
-      items.unshift({ svg: 'minus', onClick: onMinimize });
+    const items: HeaderActionProps[] = [{ svg: 'reset', onClick: handleClose }];
+    if (isMobile) {
+      items.push({ svg: 'close', onClick: onMinimize });
     }
 
     if (audioInterface) {
       items.unshift({
-        svg: state.audioOutput ? 'sound' : 'soundOff',
+        svg: state.audioOutput ? 'volume' : 'mute',
         onClick: toggleAudioOutput,
       });
     }
@@ -96,7 +99,7 @@ export const NewChat: React.FC<INewChat> = ({
 
   return (
     <div className={clsx(ClassName.CHAT, chatContainer)}>
-      <Header title={title} image={mockAvatar} actions={headerActions} />
+      <Header title={title} image={avatar} actions={headerActions} />
       <div ref={scrollableAreaRef} className={dialogContainer}>
         <AutoScrollProvider target={scrollableAreaRef}>
           <WelcomeMessage title={title} description={description} avatar={avatar} />
@@ -117,7 +120,7 @@ export const NewChat: React.FC<INewChat> = ({
       />
       <Prompt
         visible={hasAlert}
-        accept={{ label: 'End Chat', /* type: 'warn', */ onClick: chain(onEnd, handleResume) }}
+        accept={{ label: 'Start new chat', onClick: chain(onEnd, handleResume) }}
         cancel={{ label: 'Cancel', onClick: handleResume }}
       />
     </div>

packages/chat/src/dtos/RenderOptions.dto.ts

@@ -3,7 +3,17 @@ import { z } from 'zod';
 export const EMBEDDED_TARGET = 'voiceflow-chat-frame';
 
 export enum RenderMode {
+  /**
+   * Embed the chat window into a specific container in the screen.
+   * This won't show the Launcher button because the chat will be
+   * opened by default.
+   */
   EMBEDDED = 'embedded',
+
+  /**
+   * Shows the launcher button in the bottom corder of the screen,
+   * and the user needs to push it to open/minimize the chat window.
+   */
   OVERLAY = 'overlay',
 }
 

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

@@ -15,9 +15,10 @@ import { SessionStatus, TurnType } from '@/types';
 
 export interface ChatWindowProps {
   className?: string;
+  isMobile?: boolean;
 }
 
-export const ChatWindow: React.FC<ChatWindowProps> = ({ className }) => {
+export const ChatWindow: React.FC<ChatWindowProps> = ({ isMobile, className }) => {
   const runtime = useContext(RuntimeStateAPIContext);
   const state = useContext(RuntimeStateContext);
   const { assistant, config } = runtime;
@@ -59,6 +60,7 @@ export const ChatWindow: React.FC<ChatWindowProps> = ({ className }) => {
         messageInputProps={{
           onSubmit: runtime.reply,
         }}
+        isMobile={isMobile}
       >
         {state.session.turns.map((turn, turnIndex) =>
           match(turn)