Reorganize

Author: compulim

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

@@ -19,10 +19,10 @@ import { instance, object, optional, pipe, readonly, string, type InferInput } f
 
 import ChatLauncherStylesheet from '../stylesheet/ChatLauncherStylesheet';
 import styles from './ChatLauncher.module.css';
-import Button from './private/Button';
 import ChatLauncherButton from './private/ChatLauncherButton';
-import ChatLauncherModal from './private/ChatLauncherPopover';
-import NonModalPopover from './private/NonModalPopover';
+import ChatLauncherPopover from './private/ChatLauncherPopover';
+import Button from './private/polymiddleware/Button';
+import NonModalPopover from './private/polymiddleware/NonModalPopover';
 
 const chatLauncherPropsSchema = pipe(
   object({
@@ -62,7 +62,7 @@ function ChatLauncher(props: ChatLauncherProps) {
       <Composer directLine={directLine} polymiddleware={polymiddleware} store={store} styleOptions={styleOptions}>
         <ChatLauncherStylesheet nonce={nonce} />
         <ChatLauncherButtonPolymiddlewareProxy hasMessage={true} popoverTargetRef={popoverTargetRef} />
-        <ChatLauncherModal ref={popoverTargetRef} />
+        <ChatLauncherPopover ref={popoverTargetRef} />
       </Composer>
     </div>
   );

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

@@ -0,0 +1,30 @@
+import { refObject, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { ButtonPolymiddlewareProxy } from 'botframework-webchat-api/middleware';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import Icon from '../Icon';
+
+const dismissButtonPropsSchema = pipe(
+  object({
+    popoverRef: optional(refObject<Element>())
+  }),
+  readonly()
+);
+
+type DismissButtonProps = InferInput<typeof dismissButtonPropsSchema>;
+
+function DismissButton(props: DismissButtonProps) {
+  const { popoverRef } = validateProps(dismissButtonPropsSchema, props);
+
+  return (
+    <ButtonPolymiddlewareProxy appearance="flat" popoverTargetAction="hide" popoverTargetRef={popoverRef}>
+      <Icon appearance="button" icon="dismiss" />
+    </ButtonPolymiddlewareProxy>
+  );
+}
+
+DismissButton.displayName = 'ChatLauncherPopover/DismissButton';
+
+export default memo(DismissButton);
+export { dismissButtonPropsSchema, type DismissButtonProps };

packages/experience-chat-launcher/src/private/private/ChatLauncherPopover/RestartButton.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 restartButtonPropsSchema = pipe(object({}), readonly());
+
+type RestartButtonProps = InferInput<typeof restartButtonPropsSchema>;
+
+function RestartButton(_: RestartButtonProps) {
+  return (
+    <ButtonPolymiddlewareProxy appearance="flat">
+      <Icon appearance="button" icon="arrow-clockwise" />
+    </ButtonPolymiddlewareProxy>
+  );
+}
+
+RestartButton.displayName = 'ChatLauncherPopover/RestartButton';
+
+export default memo(RestartButton);
+export { restartButtonPropsSchema, type RestartButtonProps };

…e/ChatLauncherPopoverTitleBar.module.css …/ChatLauncherPopover/TitleBar.module.csspackages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleBar.module.css renamed to packages/experience-chat-launcher/src/private/private/ChatLauncherPopover/TitleBar.module.css packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleBar.module.css renamed to packages/experience-chat-launcher/src/private/private/ChatLauncherPopover/TitleBar.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 DismissButton from './DismissButton';
+import RestartButton from './RestartButton';
+import styles from './TitleBar.module.css';
+import TitleText from './TitleText';
+
+const titleBarPropsSchema = pipe(
+  object({
+    popoverRef: optional(refObject<Element>())
+  }),
+  readonly()
+);
+
+type TitleBarProps = InferInput<typeof titleBarPropsSchema>;
+
+function TitleBar(props: TitleBarProps) {
+  const { popoverRef } = validateProps(titleBarPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['chat-launcher-popover__title-bar']}>
+      <TitleText>{'Contoso agent'}</TitleText>
+      <RestartButton />
+      <DismissButton popoverRef={popoverRef} />
+    </div>
+  );
+}
+
+TitleBar.displayName = 'ChatLauncherPopover/TitleBar';
+
+export default memo(forwardRef(TitleBar));
+export { titleBarPropsSchema, type TitleBarProps };

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

@@ -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 './TitleText.module.css';
+
+const titleTextPropsSchema = pipe(
+  object({
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type TitleTextProps = InferInput<typeof titleTextPropsSchema>;
+
+function TitleText(props: TitleTextProps) {
+  const { children } = validateProps(titleTextPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  return <div className={classNames['chat-launcher-popover__title-text']}>{children}</div>;
+}
+
+TitleText.displayName = 'ChatLauncherPopover/TitleText';
+
+export default memo(TitleText);
+export { titleTextPropsSchema, type TitleTextProps };

…/ChatLauncherPopoverTitleText.module.css …ChatLauncherPopover/TitleText.module.csspackages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleText.module.css renamed to packages/experience-chat-launcher/src/private/private/ChatLauncherPopover/TitleText.module.css packages/experience-chat-launcher/src/private/private/ChatLauncherPopoverTitleText.module.css renamed to packages/experience-chat-launcher/src/private/private/ChatLauncherPopover/TitleText.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 ChatLauncherPopoverTitleBar from './ChatLauncherPopoverTitleBar';
+import TitleBar from './TitleBar';
 
 const chatLauncherPopoverPropsSchema = pipe(object({}), readonly());
 
@@ -15,7 +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">
-      <ChatLauncherPopoverTitleBar popoverRef={popoverRef} />
+      <TitleBar popoverRef={popoverRef} />
     </PopoverPolymiddlewareProxy>
   );
 }