Add some animations

Author: wong2

package.json

@@ -55,6 +55,7 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "eventsource-parser": "^1.0.0",
+    "framer-motion": "^10.16.0",
     "fuse.js": "^6.6.2",
     "github-markdown-css": "^5.2.0",
     "gpt3-tokenizer": "^1.1.5",
@@ -73,6 +74,7 @@
     "plausible-tracker": "^0.3.8",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
+    "react-confetti-explosion": "^2.1.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",

src/app/components/Chat/ConversationPanel.tsx

@@ -1,9 +1,10 @@
-import { cx } from '~/utils'
+import { motion } from 'framer-motion'
 import { FC, ReactNode, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import clearIcon from '~/assets/icons/clear.svg'
 import historyIcon from '~/assets/icons/history.svg'
 import shareIcon from '~/assets/icons/share.svg'
+import { cx } from '~/utils'
 import { CHATBOTS } from '~app/consts'
 import { ConversationContext, ConversationContextValue } from '~app/context'
 import { trackEvent } from '~app/plausible'
@@ -90,7 +91,11 @@ const ConversationPanel: FC<Props> = (props) => {
           )}
         >
           <div className="flex flex-row items-center">
-            <img src={botInfo.avatar} className="w-[18px] h-[18px] object-contain rounded-full" />
+            <motion.img
+              src={botInfo.avatar}
+              className="w-[18px] h-[18px] object-contain rounded-full"
+              whileHover={{ rotate: 180 }}
+            />
             <Tooltip content={props.bot.name || botInfo.name}>
               <span className="font-semibold text-primary-text text-sm cursor-default ml-2 mr-1">{botInfo.name}</span>
             </Tooltip>

src/app/components/Sidebar/PremiumEntry.tsx

@@ -1,20 +1,29 @@
+import { motion } from 'framer-motion'
+import { Link } from '@tanstack/react-router'
 import { FC } from 'react'
 import premiumIcon from '~assets/icons/premium.svg'
-import { Link } from '@tanstack/react-router'
 
 const PremiumEntry: FC<{ text: string }> = ({ text }) => {
   return (
     <Link to="/premium">
-      <div
+      <motion.div
         className="flex flex-row items-center gap-[10px] rounded-[10px] px-4 py-[6px] cursor-pointer"
         style={{
           background:
-            'linear-gradient(275deg, rgb(var(--color-primary-purple)) 1.65%, rgb(var(--color-primary-blue)) 100%)',
+            'linear-gradient(to left, rgb(var(--color-primary-purple)) 1.65%, rgb(var(--color-primary-blue)) 100%)',
         }}
+        whileHover="hover"
       >
-        <img src={premiumIcon} className="w-8 h-8" />
+        <motion.img
+          src={premiumIcon}
+          className="w-8 h-8"
+          variants={{
+            hover: { rotate: [0, 10, -10, 10, -10, 0] },
+          }}
+          transition={{ duration: 1 }}
+        />
         {!!text && <span className="text-white font-semibold text-base">{text}</span>}
-      </div>
+      </motion.div>
     </Link>
   )
 }

src/app/components/Sidebar/index.tsx

@@ -1,4 +1,5 @@
 import { Link } from '@tanstack/react-router'
+import { motion } from 'framer-motion'
 import { cx } from '~/utils'
 import { useAtom } from 'jotai'
 import { useState } from 'react'
@@ -37,15 +38,18 @@ function Sidebar() {
   const [themeSettingModalOpen, setThemeSettingModalOpen] = useState(false)
   const enabledBots = useEnabledBots()
   return (
-    <aside
+    <motion.aside
       className={cx(
         'flex flex-col bg-primary-background bg-opacity-40 overflow-hidden',
         collapsed ? 'items-center px-[15px]' : 'w-[230px] px-4',
       )}
     >
-      <img
+      <motion.img
         src={collapseIcon}
-        className={cx('w-6 h-6 cursor-pointer my-5', collapsed ? 'rotate-180' : 'self-end')}
+        className={cx('w-6 h-6 cursor-pointer my-5', !collapsed && 'self-end')}
+        animate={{
+          rotate: collapsed ? 180 : 0,
+        }}
         onClick={() => setCollapsed((c) => !c)}
       />
       {collapsed ? <img src={minimalLogo} className="w-[30px]" /> : <img src={logo} className="w-[79px]" />}
@@ -101,7 +105,7 @@ function Sidebar() {
       <CommandBar />
       <GuideModal />
       {themeSettingModalOpen && <ThemeSettingModal open={true} onClose={() => setThemeSettingModalOpen(false)} />}
-    </aside>
+    </motion.aside>
   )
 }
 

src/app/pages/PremiumPage.tsx

@@ -1,4 +1,5 @@
 import { useSearch } from '@tanstack/react-router'
+import ConfettiExplosion from 'react-confetti-explosion'
 import { useAtom } from 'jotai'
 import { useCallback, useState } from 'react'
 import { Toaster } from 'react-hot-toast'
@@ -19,6 +20,7 @@ function PremiumPage() {
   const premiumState = usePremium()
   const [deactivating, setDeactivating] = useState(false)
   const { source } = useSearch({ from: premiumRoute.id })
+  const [isExploding, setIsExploding] = useState(false)
 
   const activateLicense = useCallback(() => {
     const key = window.prompt('Enter your license key', '')
@@ -55,7 +57,12 @@ function PremiumPage() {
       <div className="flex flex-row items-center gap-3 mt-10">
         {premiumState.activated ? (
           <>
-            <Button text={t('🎉 License activated')} color="primary" className="w-fit !py-2" />
+            <Button
+              text={t('🎉 License activated')}
+              color="primary"
+              className="w-fit !py-2"
+              onClick={() => setIsExploding(true)}
+            />
             <Button
               text={t('Deactivate')}
               className="w-fit !py-2"
@@ -93,6 +100,7 @@ function PremiumPage() {
       </div>
       {!!premiumState.error && <span className="mt-3 text-red-500 font-medium">{premiumState.error}</span>}
       <Toaster position="top-right" />
+      {isExploding && <ConfettiExplosion duration={3000} onComplete={() => setIsExploding(false)} />}
     </div>
   )
 }