✨ feat: Add import statement and define CSS styles for Avatar component

- Add import statement for 'createStyles' from 'antd-style' in 'AvatarWithUpload/index.tsx'
- Define 'useStyle' constant containing CSS styles for Avatar component

feat: Remove unused constant and update component wrapping in Conversation

- Remove 'useStyles' constant and associated CSS styles from 'Conversation/index.tsx'
- Remove 'Flexbox' component wrapping 'ChatInput' component

feat: Update styles for Flexbox component in index page

- Set height of 'Flexbox' component to '100vh'
- Set 'overflow' style to 'hidden'
- Set 'position' style to 'relative'

src/features/AvatarWithUpload/index.tsx

@@ -1,24 +1,42 @@
 import { Avatar, Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
+const useStyle = createStyles(
+  ({ css, token }) => css`
+    cursor: pointer;
+    border-radius: 50%;
+    transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
+
+    &:hover {
+      box-shadow: 0 0 0 3px ${token.colorText};
+    }
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+);
+
 interface AvatarWithUploadProps {
   size?: number;
 }
 
 export default memo<AvatarWithUploadProps>(({ size = 40 }) => {
   const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings], shallow);
+  const { styles } = useStyle();
 
   const handleUploadAvatar = createUploadImageHandler((avatar) => {
     setSettings({ avatar });
   });
 
   return (
-    <div style={{ maxHeight: size, maxWidth: size }}>
+    <div className={styles} style={{ maxHeight: size, maxWidth: size }}>
       <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
         {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
       </Upload>

src/pages/chat/[id]/Conversation/index.tsx

@@ -1,30 +1,16 @@
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import ChatInput from '@/pages/chat/[id]/Conversation/Input';
 
 import ChatList from './ChatList';
 
-const useStyles = createStyles(({ css, token }) => ({
-  input: css`
-    position: sticky;
-    z-index: 10;
-    bottom: 0;
-    background: ${token.colorBgLayout};
-  `,
-}));
-
 const Conversation = () => {
-  const { styles } = useStyles();
   return (
     <>
       <div style={{ flex: 1, overflowY: 'scroll' }}>
         <ChatList />
       </div>
-      <Flexbox className={styles.input}>
-        <ChatInput />
-      </Flexbox>
+      <ChatInput />
     </>
   );
 };

src/pages/chat/[id]/index.page.tsx

@@ -24,7 +24,7 @@ const Chat = memo(() => {
         <title>{pageTitle}</title>
       </Head>
 
-      <Flexbox flex={1}>
+      <Flexbox flex={1} height={'100vh'} style={{ overflow: 'hidden', position: 'relative' }}>
         <Header />
         <Flexbox
           id={'lobe-conversion-container'}