Add animation to dialog

Author: wong2

src/app/components/Chat/ConversationPanel.tsx

@@ -106,17 +106,28 @@ const ConversationPanel: FC<Props> = (props) => {
           <WebAccessCheckbox botId={props.botId} />
           <div className="flex flex-row items-center gap-3">
             <Tooltip content={t('Share conversation')}>
-              <img src={shareIcon} className="w-5 h-5 cursor-pointer" onClick={openShareDialog} />
+              <motion.img
+                src={shareIcon}
+                className="w-5 h-5 cursor-pointer"
+                onClick={openShareDialog}
+                whileHover={{ scale: 1.1 }}
+              />
             </Tooltip>
             <Tooltip content={t('Clear conversation')}>
-              <img
+              <motion.img
                 src={clearIcon}
                 className={cx('w-5 h-5', props.generating ? 'cursor-not-allowed' : 'cursor-pointer')}
                 onClick={resetConversation}
+                whileHover={{ scale: 1.1 }}
               />
             </Tooltip>
             <Tooltip content={t('View history')}>
-              <img src={historyIcon} className="w-5 h-5 cursor-pointer" onClick={openHistoryDialog} />
+              <motion.img
+                src={historyIcon}
+                className="w-5 h-5 cursor-pointer"
+                onClick={openHistoryDialog}
+                whileHover={{ scale: 1.1 }}
+              />
             </Tooltip>
           </div>
         </div>
@@ -139,10 +150,10 @@ const ConversationPanel: FC<Props> = (props) => {
           />
         </div>
       </div>
-      {showHistory && <HistoryDialog botId={props.botId} open={true} onClose={() => setShowHistory(false)} />}
       {showShareDialog && (
         <ShareDialog open={true} onClose={() => setShowShareDialog(false)} messages={props.messages} />
       )}
+      {showHistory && <HistoryDialog botId={props.botId} open={true} onClose={() => setShowHistory(false)} />}
     </ConversationContext.Provider>
   )
 }

src/app/components/Dialog.tsx

@@ -1,7 +1,7 @@
-import { Dialog as HeadlessDialog } from '@headlessui/react'
-import { cx } from '~/utils'
-import { FC, PropsWithChildren } from 'react'
+import { Dialog as HeadlessDialog, Transition } from '@headlessui/react'
+import { FC, Fragment, PropsWithChildren } from 'react'
 import closeIcon from '~/assets/icons/close.svg'
+import { cx } from '~/utils'
 
 interface Props {
   title: string
@@ -13,29 +13,51 @@ interface Props {
 
 const Dialog: FC<PropsWithChildren<Props>> = (props) => {
   return (
-    <HeadlessDialog open={props.open} onClose={props.onClose} className="relative z-50">
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      <div className="fixed inset-0 flex items-center justify-center max-h-screen m-5">
-        <HeadlessDialog.Panel
-          className={cx(
-            'mx-auto rounded-3xl bg-primary-background shadow-2xl max-h-full overflow-hidden flex flex-col',
-            props.className,
-          )}
+    <Transition.Root show={props.open} as={Fragment}>
+      <HeadlessDialog as="div" onClose={props.onClose} className="relative z-50">
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
         >
-          <HeadlessDialog.Title
-            className={cx(
-              !props.borderless && 'border-b',
-              'border-solid border-primary-border flex flex-row justify-center items-center py-4 px-5',
-            )}
+          <div className="fixed inset-0 bg-black/30 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 flex items-center justify-center max-h-screen m-5">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <span className="ml-auto" />
-            <span className="font-bold text-primary-text text-base">{props.title}</span>
-            <img src={closeIcon} className="w-4 h-4 ml-auto mr-[10px] cursor-pointer" onClick={props.onClose} />
-          </HeadlessDialog.Title>
-          {props.children}
-        </HeadlessDialog.Panel>
-      </div>
-    </HeadlessDialog>
+            <HeadlessDialog.Panel
+              className={cx(
+                'mx-auto rounded-3xl bg-primary-background shadow-2xl max-h-full overflow-hidden flex flex-col',
+                props.className,
+              )}
+            >
+              <HeadlessDialog.Title
+                className={cx(
+                  !props.borderless && 'border-b',
+                  'border-solid border-primary-border flex flex-row justify-center items-center py-4 px-5',
+                )}
+              >
+                <span className="ml-auto" />
+                <span className="font-bold text-primary-text text-base">{props.title}</span>
+                <img src={closeIcon} className="w-4 h-4 ml-auto mr-[10px] cursor-pointer" onClick={props.onClose} />
+              </HeadlessDialog.Title>
+              {props.children}
+            </HeadlessDialog.Panel>
+          </Transition.Child>
+        </div>
+      </HeadlessDialog>
+    </Transition.Root>
   )
 }