Add title bar

Author: compulim

packages/experience-chat-launcher/src/private/private/ChatLauncherPopover.module.css

@@ -3,7 +3,7 @@ import mergeRefs from 'merge-refs';
 import React, { forwardRef, memo, useRef, type ForwardedRef } from 'react';
 import { object, pipe, readonly, type InferInput } from 'valibot';
 
-import ChatLauncherPopoverDismissButton from './ChatLauncherPopoverDismissButton';
+import ChatLauncherPopoverTitleBar from './ChatLauncherPopoverTitleBar';
 
 const chatLauncherPopoverPropsSchema = pipe(object({}), readonly());
 
@@ -15,8 +15,7 @@ function ChatLauncherPopover(_: ChatLauncherPopoverProps, ref: ForwardedRef<Elem
   return (
     // TODO: [P2] Is it correct to force-cast ref to HTMLDivElement?
     <PopoverPolymiddlewareProxy popover="manual" ref={mergeRefs(popoverRef, ref)} type="nonmodal">
-      {'Hello, World!'}
-      <ChatLauncherPopoverDismissButton popoverRef={popoverRef} />
+      <ChatLauncherPopoverTitleBar popoverRef={popoverRef} />
     </PopoverPolymiddlewareProxy>
   );
 }

packages/experience-chat-launcher/src/private/private/ChatLauncherPopover.tsx

@@ -5,25 +5,26 @@ import { object, optional, pipe, readonly, type InferInput } from 'valibot';
 
 import Icon from './Icon';
 
-const chatLauncherModalDismissButtonPropsSchema = pipe(
+const chatLauncherPopoverDismissButtonPropsSchema = pipe(
   object({
     popoverRef: optional(refObject<Element>())
   }),
   readonly()
 );
 
-type ChatLauncherModalDismissButtonProps = InferInput<typeof chatLauncherModalDismissButtonPropsSchema>;
+type ChatLauncherPopoverDismissButtonProps = InferInput<typeof chatLauncherPopoverDismissButtonPropsSchema>;
 
-function ChatLauncherModalDismissButton(props: ChatLauncherModalDismissButtonProps) {
-  const { popoverRef } = validateProps(chatLauncherModalDismissButtonPropsSchema, props);
+function ChatLauncherPopoverDismissButton(props: ChatLauncherPopoverDismissButtonProps) {
+  const { popoverRef } = validateProps(chatLauncherPopoverDismissButtonPropsSchema, props);
 
   return (
     <ButtonPolymiddlewareProxy appearance="flat" popoverTargetAction="hide" popoverTargetRef={popoverRef}>
-      <Icon appearance="text" icon="dismiss" />
+      <Icon appearance="button" icon="dismiss" />
     </ButtonPolymiddlewareProxy>
   );
 }
 
-ChatLauncherModalDismissButton.displayName = 'ChatLauncherModalDismissButton';
+ChatLauncherPopoverDismissButton.displayName = 'ChatLauncherPopoverDismissButton';
 
-export default memo(ChatLauncherModalDismissButton);
+export default memo(ChatLauncherPopoverDismissButton);
+export { chatLauncherPopoverDismissButtonPropsSchema, type ChatLauncherPopoverDismissButtonProps };

packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverDismissButton.tsx

@@ -0,0 +1,22 @@
+import { ButtonPolymiddlewareProxy } from 'botframework-webchat-api/middleware';
+import React, { memo } from 'react';
+import { object, pipe, readonly, type InferInput } from 'valibot';
+
+import Icon from './Icon';
+
+const chatLauncherPopoverRestartButtonPropsSchema = pipe(object({}), readonly());
+
+type ChatLauncherPopoverRestartButtonProps = InferInput<typeof chatLauncherPopoverRestartButtonPropsSchema>;
+
+function ChatLauncherPopoverRestartButton(_: ChatLauncherPopoverRestartButtonProps) {
+  return (
+    <ButtonPolymiddlewareProxy appearance="flat">
+      <Icon appearance="button" icon="arrow-clockwise" />
+    </ButtonPolymiddlewareProxy>
+  );
+}
+
+ChatLauncherPopoverRestartButton.displayName = 'ChatLauncherPopoverRestartButton';
+
+export default memo(ChatLauncherPopoverRestartButton);
+export { chatLauncherPopoverRestartButtonPropsSchema, type ChatLauncherPopoverRestartButtonProps };

packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverRestartButton.tsx

@@ -0,0 +1,20 @@
+:global(.webchat-experience-chat-launcher) .chat-launcher-popover__title-bar {
+  --webchat-spacingHorizontalL: var(--spacingHorizontalL, 16px);
+  --webchat-spacingHorizontalS: var(--spacingHorizontalS, 8px);
+  --webchat-spacingVerticalM: var(--spacingVerticalM, 12px);
+  --webchat-spacingVerticalS: var(--spacingVerticalS, 8px);
+  --webchat-colorNeutralStroke3: var(--colorNeutralStroke3, #f0f0f0);
+  --webchat-strokeWidthThin: var(--strokeWidthThin, 1px);
+
+  --webchat-chatLauncherPopoverTitleBar-border-block-end-width: var(--webchat-strokeWidthThin);
+  --webchat-chatLauncherPopoverTitleBar-border-block-end-color: var(--webchat-colorNeutralStroke3);
+  --webchat-chatLauncherPopoverTitleBar-padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalL);
+
+  align-items: center;
+  border-block-end-color: var(--webchat-chatLauncherPopoverTitleBar-border-block-end-color);
+  border-block-end-style: solid;
+  border-block-end-width: var(--webchat-chatLauncherPopoverTitleBar-border-block-end-width);
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  padding: var(--webchat-chatLauncherPopoverTitleBar-padding);
+}

packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleBar.module.css

@@ -0,0 +1,37 @@
+import { refObject, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import React, { forwardRef, memo } from 'react';
+import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import ChatLauncherPopoverDismissButton from './ChatLauncherPopoverDismissButton';
+import ChatLauncherPopoverRestartButton from './ChatLauncherPopoverRestartButton';
+import styles from './ChatLauncherPopoverTitleBar.module.css';
+import ChatLauncherPopoverTitleText from './ChatLauncherPopoverTitleText';
+
+const chatLauncherPopoverTitleBarPropsSchema = pipe(
+  object({
+    popoverRef: optional(refObject<Element>())
+  }),
+  readonly()
+);
+
+type ChatLauncherPopoverTitleBarProps = InferInput<typeof chatLauncherPopoverTitleBarPropsSchema>;
+
+function ChatLauncherPopoverTitleBar(props: ChatLauncherPopoverTitleBarProps) {
+  const { popoverRef } = validateProps(chatLauncherPopoverTitleBarPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['chat-launcher-popover__title-bar']}>
+      <ChatLauncherPopoverTitleText>{'Contoso agent'}</ChatLauncherPopoverTitleText>
+      <ChatLauncherPopoverRestartButton />
+      <ChatLauncherPopoverDismissButton popoverRef={popoverRef} />
+    </div>
+  );
+}
+
+ChatLauncherPopoverTitleBar.displayName = 'ChatLauncherPopoverTitleBar';
+
+export default memo(forwardRef(ChatLauncherPopoverTitleBar));
+export { chatLauncherPopoverTitleBarPropsSchema, type ChatLauncherPopoverTitleBarProps };

packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleBar.tsx

@@ -0,0 +1,27 @@
+:global(.webchat-experience-chat-launcher) .chat-launcher-popover__title-text {
+  /* TODO: [P0] Refactor variables to global or upper layer. */
+  --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);
+  --webchat-fontFamilyBase: var(
+    --fontFamilyBase,
+    'Segoe UI',
+    'Segoe UI Web (West European)',
+    -apple-system,
+    BlinkMacSystemFont,
+    Roboto,
+    'Helvetica Neue',
+    sans-serif
+  );
+  --webchat-fontSizeBase400: var(--fontSizeBase400, 16px);
+  --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);
+
+  /* TODO: [P*] Is this a good naming system? Sorry I forgot if we should still go CSS BEM-alike or not. */
+  --webchat-chatLauncherPopoverTitleText-color: var(--webchat-colorNeutralForeground1);
+  --webchat-chatLauncherPopoverTitleText-fontFamily: var(--webchat-fontFamilyBase);
+  --webchat-chatLauncherPopoverTitleText-fontSize: var(--webchat-fontSizeBase400);
+  --webchat-chatLauncherPopoverTitleText-fontWeight: var(--webchat-fontWeightSemibold);
+
+  color: var(--webchat-chatLauncherPopoverTitleText-color);
+  font-family: var(--webchat-chatLauncherPopoverTitleText-fontFamily);
+  font-size: var(--webchat-chatLauncherPopoverTitleText-fontSize);
+  font-weight: var(--webchat-chatLauncherPopoverTitleText-fontWeight);
+}

packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleText.module.css

@@ -0,0 +1,28 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import styles from './ChatLauncherPopoverTitleText.module.css';
+
+const chatLauncherPopoverTitleTextPropsSchema = pipe(
+  object({
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type ChatLauncherPopoverTitleTextProps = InferInput<typeof chatLauncherPopoverTitleTextPropsSchema>;
+
+function ChatLauncherPopoverTitleText(props: ChatLauncherPopoverTitleTextProps) {
+  const { children } = validateProps(chatLauncherPopoverTitleTextPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  return <div className={classNames['chat-launcher-popover__title-text']}>{children}</div>;
+}
+
+ChatLauncherPopoverTitleText.displayName = 'ChatLauncherPopoverTitleText';
+
+export default memo(ChatLauncherPopoverTitleText);
+export { chatLauncherPopoverTitleTextPropsSchema, type ChatLauncherPopoverTitleTextProps };

packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleText.tsx

@@ -4,16 +4,17 @@
   --webchat-shadow64: var(--shadow64, 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14));
 
   /* TODO: [P*] Is this a good naming system? Sorry I forgot if we should still go CSS BEM-alike or not. */
-  --webchat-chatLauncherModal-background: var(--webchat-colorNeutralBackground1);
-  --webchat-chatLauncherModal-box-shadow: var(--webchat-shadow64);
-  --webchat-chatLauncherModal-border-radius: 20px;
-  --webchat-chatLauncherModal-height: 610px;
-  --webchat-chatLauncherModal-width: 340px;
+  --webchat-popover-background: var(--webchat-colorNeutralBackground1);
+  --webchat-popover-box-shadow: var(--webchat-shadow64);
+  --webchat-popover-border-radius: 20px;
+  --webchat-popover-height: 610px;
+  --webchat-popover-width: 340px;
 
-  background: var(--webchat-chatLauncherModal-background);
+  background: var(--webchat-popover-background);
   border: 0;
-  border-radius: var(--webchat-chatLauncherModal-border-radius);
-  box-shadow: var(--webchat-chatLauncherModal-box-shadow);
-  height: var(--webchat-chatLauncherModal-height);
-  width: var(--webchat-chatLauncherModal-width);
+  border-radius: var(--webchat-popover-border-radius);
+  box-shadow: var(--webchat-popover-box-shadow);
+  height: var(--webchat-popover-height);
+  padding: 0;
+  width: var(--webchat-popover-width);
 }