Add trashcan icon

src/pages/Chat/Header/Header.scss

@@ -11,7 +11,7 @@
         display: flex;
         align-items: center;
         gap: 18px;
-        .github-icon {
+        .github-icon, .clear-icon {
             cursor: pointer;
         }
     }

src/pages/Chat/Header/Header.tsx

@@ -1,19 +1,26 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@iconify/react'
 import { useSelector } from 'react-redux'
 import './Header.scss'
-import Logout from '../../../components/Logout/Logout';
-import { RootState } from '../../../store/index';
+import Logout from '../../../components/Logout/Logout'
+import { RootState } from '../../../store/index'
+import { useDispatch } from 'react-redux'
+import { clearChat } from '../../../store/user/userSlice'
 
 function Header() {
     const { name } = useSelector((state: RootState) => state.user)
+
+    const dispatch = useDispatch()
+
     const openGithub = () => {
         window.open('https://github.com/fjosue4/google-gemini-ui')
     }
+
     return (
         <div className='header'>
             <span>Hello, {name}</span>
             <div className='header-buttons'>
             <Icon className='github-icon' icon='mdi:github' height={28} onClick={openGithub} />
+            <Icon className='clear-icon' icon='mdi:trashcan-outline' height={28} onClick={() => dispatch(clearChat())} />
             <Logout />
             </div>
         </div>

src/store/user/userSlice.tsx

@@ -25,6 +25,9 @@ const userSlice = createSlice({
       state.API_KEY = initialUserState.API_KEY
       state.conversation = initialUserState.conversation
     },
+    clearChat: (state) => {
+      state.conversation = initialUserState.conversation
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -62,5 +65,5 @@ const userSlice = createSlice({
   },
 })
 
-export const { setUser, clearUser } = userSlice.actions
+export const { setUser, clearUser, clearChat } = userSlice.actions
 export default userSlice.reducer