feat: convert UI for agentic chat to wallet view

Author: premiumjibles

src/assets/translations/en/main.json

@@ -343,7 +343,15 @@
           "pending": "Pending"
         }
       }
-    }
+    },
+    "chatHistory": "Chat History",
+    "newChat": "New Chat",
+    "deleteConversation": "Delete Conversation",
+    "deleteConfirmation": "Are you sure you want to delete this conversation?",
+    "noConversations": "No conversations yet",
+    "newConversation": "New Conversation",
+    "searchChats": "Search your chats...",
+    "noMatchingConversations": "No matching conversations"
   },
   "quickBuy": {
     "title": "Quick Buy %{assetOnChain}",

src/components/Layout/Header/NavBar/DrawerWallet.tsx

@@ -1,6 +1,6 @@
 import { Drawer, DrawerContent, DrawerOverlay } from '@chakra-ui/react'
 import type { FC } from 'react'
-import { memo, useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { MemoryRouter, Route, Routes, useNavigate } from 'react-router-dom'
 
 import { DrawerSettings } from './DrawerSettings'
@@ -59,19 +59,19 @@ export const DrawerWalletInner: FC<DrawerWalletInnerProps> = memo(({ onClose, is
 })
 
 export const DrawerWallet: FC = memo(() => {
-  const { isOpen, close: onClose } = useModal('walletDrawer')
+  const { isOpen, close } = useModal('walletDrawer')
   const dispatch = useAppDispatch()
+
+  const onClose = useCallback(() => {
+    dispatch(agenticChatSlice.actions.endChat())
+    close()
+  }, [dispatch, close])
+
   const { modalContentProps, overlayProps, modalProps } = useModalRegistration({
     isOpen,
     onClose,
   })
 
-  useEffect(() => {
-    if (!isOpen) {
-      dispatch(agenticChatSlice.actions.closeChat())
-    }
-  }, [isOpen, dispatch])
-
   return (
     <Drawer placement='right' size='sm' {...modalProps}>
       <DrawerOverlay {...overlayProps} />

src/components/Layout/Header/NavBar/DrawerWalletDashboard.tsx

@@ -27,10 +27,11 @@ import { WalletBalanceChange } from '@/components/WalletBalanceChange/WalletBala
 import { WalletActions } from '@/context/WalletProvider/actions'
 import { DrawerChatButton } from '@/features/agenticChat/components/DrawerChatButton'
 import { DrawerChatContent } from '@/features/agenticChat/components/DrawerChatContent'
+import { DrawerChatHistory } from '@/features/agenticChat/components/DrawerChatHistory'
 import { useModal } from '@/hooks/useModal/useModal'
 import { useWallet } from '@/hooks/useWallet/useWallet'
 import { agenticChatSlice } from '@/state/slices/agenticChatSlice/agenticChatSlice'
-import { useAppSelector } from '@/state/store'
+import { useAppDispatch, useAppSelector } from '@/state/store'
 import { makeSuspenseful } from '@/utils/makeSuspenseful'
 
 const tabSpinnerStyle = { height: '200px' }
@@ -127,9 +128,11 @@ type DrawerWalletDashboardProps = {
 export const DrawerWalletDashboard: FC<DrawerWalletDashboardProps> = memo(
   ({ onClose, onSettingsClick, isOpen }) => {
     const translate = useTranslate()
+    const reduxDispatch = useAppDispatch()
     const send = useModal('send')
     const receive = useModal('receive')
     const isChatOpen = useAppSelector(agenticChatSlice.selectors.selectIsChatOpen)
+    const isChatHistoryOpen = useAppSelector(agenticChatSlice.selectors.selectIsChatHistoryOpen)
 
     const [activeTabIndex, setActiveTabIndex] = useState(0)
     const [loadedTabs, setLoadedTabs] = useState(new Set<number>())
@@ -176,22 +179,29 @@ export const DrawerWalletDashboard: FC<DrawerWalletDashboardProps> = memo(
       onClose()
     }, [disconnect, onClose])
 
+    const handleBackFromChat = useCallback(() => {
+      reduxDispatch(agenticChatSlice.actions.endChat())
+    }, [reduxDispatch])
+
     return (
       <>
-        {isChatOpen ? (
-          <DrawerChatContent />
-        ) : (
+        <DrawerWalletHeader
+          walletInfo={walletInfo}
+          isConnected={isConnected}
+          isLocked={isLocked}
+          connectedType={connectedType}
+          onDisconnect={handleDisconnect}
+          onSwitchProvider={handleSwitchProvider}
+          onClose={onClose}
+          onSettingsClick={onSettingsClick}
+          isChatOpen={isChatOpen}
+          onBackFromChat={handleBackFromChat}
+        />
+
+        {isChatOpen && isChatHistoryOpen && <DrawerChatHistory />}
+        {isChatOpen && !isChatHistoryOpen && <DrawerChatContent />}
+        {!isChatOpen && (
           <>
-            <DrawerWalletHeader
-              walletInfo={walletInfo}
-              isConnected={isConnected}
-              isLocked={isLocked}
-              connectedType={connectedType}
-              onDisconnect={handleDisconnect}
-              onSwitchProvider={handleSwitchProvider}
-              onClose={onClose}
-              onSettingsClick={onSettingsClick}
-            />
             <Box pt={6} pb={8}>
               <Suspense fallback={<Skeleton height='36px' width='100px' mx='auto' />}>
                 <WalletBalanceChange showErroredAccounts={false} />

src/components/Layout/Header/NavBar/DrawerWalletHeader.tsx

@@ -13,7 +13,8 @@ import {
 } from '@chakra-ui/react'
 import type { FC } from 'react'
 import { memo, useCallback, useMemo } from 'react'
-import { TbDots, TbEyeOff, TbSettings } from 'react-icons/tb'
+import { FiArrowLeft } from 'react-icons/fi'
+import { TbDots, TbEyeOff, TbHistory, TbSettings } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 import { useNavigate } from 'react-router-dom'
 
@@ -25,14 +26,16 @@ import type { InitialState } from '@/context/WalletProvider/WalletProvider'
 import { useModal } from '@/hooks/useModal/useModal'
 import { useMipdProviders } from '@/lib/mipd'
 import { ProfileAvatar } from '@/pages/Dashboard/components/ProfileAvatar/ProfileAvatar'
+import { agenticChatSlice } from '@/state/slices/agenticChatSlice/agenticChatSlice'
 import { gridplusSlice } from '@/state/slices/gridplusSlice/gridplusSlice'
 import { selectWalletRdns } from '@/state/slices/localWalletSlice/selectors'
-import { useAppSelector } from '@/state/store'
+import { useAppDispatch, useAppSelector } from '@/state/store'
 
 const settingsIcon = <TbSettings />
 const dotsIcon = <Icon as={TbDots} />
 const eyeOffIcon = <Icon as={TbEyeOff} />
 const qrCodeIcon = <QRCodeIcon />
+const historyIcon = <TbHistory />
 
 type DrawerHeaderProps = {
   walletInfo: InitialState['walletInfo']
@@ -43,6 +46,8 @@ type DrawerHeaderProps = {
   onSwitchProvider: () => void
   onClose?: () => void
   onSettingsClick?: () => void
+  isChatOpen?: boolean
+  onBackFromChat?: () => void
 }
 
 export const DrawerWalletHeader: FC<DrawerHeaderProps> = memo(
@@ -54,11 +59,15 @@ export const DrawerWalletHeader: FC<DrawerHeaderProps> = memo(
     onDisconnect,
     onSwitchProvider,
     onSettingsClick,
+    isChatOpen,
+    onBackFromChat,
   }) => {
     const translate = useTranslate()
+    const dispatch = useAppDispatch()
     const settings = useModal('settings')
     const qrCode = useModal('qrCode')
     const navigate = useNavigate()
+    const isChatHistoryOpen = useAppSelector(agenticChatSlice.selectors.selectIsChatHistoryOpen)
 
     const maybeRdns = useAppSelector(selectWalletRdns)
     const activeSafeCard = useAppSelector(gridplusSlice.selectors.selectActiveSafeCard)
@@ -87,6 +96,10 @@ export const DrawerWalletHeader: FC<DrawerHeaderProps> = memo(
       qrCode.open({})
     }, [qrCode])
 
+    const handleChatHistoryClick = useCallback(() => {
+      dispatch(agenticChatSlice.actions.openChatHistory())
+    }, [dispatch])
+
     const handleManageHiddenAssetsClick = useCallback(() => {
       navigate('/manage-hidden-assets')
     }, [navigate])
@@ -107,20 +120,44 @@ export const DrawerWalletHeader: FC<DrawerHeaderProps> = memo(
     if (!isConnected || isLocked || !walletInfo) return null
 
     return (
-      <Flex align='center' px={4} pt={4} justify='space-between'>
+      <Flex align='center' px={4} pt={4} pb={isChatOpen ? 4 : 0} justify='space-between'>
         <Flex align='center' gap={2}>
+          {isChatOpen && onBackFromChat && (
+            <IconButton
+              icon={<FiArrowLeft />}
+              aria-label={translate('common.back')}
+              onClick={
+                isChatHistoryOpen
+                  ? () => dispatch(agenticChatSlice.actions.closeChatHistory())
+                  : onBackFromChat
+              }
+              variant='ghost'
+              size='sm'
+            />
+          )}
           <ProfileAvatar size='md' borderRadius='full' />
           <Text fontWeight='medium'>{label}</Text>
         </Flex>
         <Flex gap={2}>
-          <IconButton
-            aria-label={translate('modals.send.qrCode')}
-            isRound
-            fontSize='lg'
-            icon={qrCodeIcon}
-            size='md'
-            onClick={handleQrCodeClick}
-          />
+          {isChatOpen ? (
+            <IconButton
+              aria-label={translate('agenticChat.chatHistory')}
+              isRound
+              fontSize='lg'
+              icon={historyIcon}
+              size='md'
+              onClick={handleChatHistoryClick}
+            />
+          ) : (
+            <IconButton
+              aria-label={translate('modals.send.qrCode')}
+              isRound
+              fontSize='lg'
+              icon={qrCodeIcon}
+              size='md'
+              onClick={handleQrCodeClick}
+            />
+          )}
           <IconButton
             aria-label='Settings'
             isRound

src/features/agenticChat/components/Chat.tsx

@@ -53,7 +53,11 @@ const MessageItem = memo(({ message, userBg }: MessageItemProps) => {
       {toolInvocations.map(toolPart => (
         <ToolInvocationRenderer key={toolPart.toolCallId} toolPart={toolPart} />
       ))}
-      {textContent.trim().length > 0 && <Markdown>{textContent}</Markdown>}
+      {textContent.trim().length > 0 && (
+        <Box mt={toolInvocations.length > 0 ? 3 : 0}>
+          <Markdown>{textContent}</Markdown>
+        </Box>
+      )}
     </Box>
   )
 })
@@ -67,7 +71,7 @@ export const Chat = ({ chat }: ChatProps) => {
   const bottomRef = useRef<HTMLDivElement>(null)
   const shouldAutoScrollRef = useRef(true)
 
-  const userBg = useColorModeValue('blue.50', 'blue.900')
+  const userBg = useColorModeValue('blue.50', 'blue.600')
 
   useEffect(() => {
     const viewport = viewportRef.current
@@ -97,8 +101,11 @@ export const Chat = ({ chat }: ChatProps) => {
       gap={3}
       flex={1}
       overflowY='auto'
-      p={4}
+      px={4}
+      pt={4}
+      pb={2}
       minHeight={0}
+      className='scroll-container'
     >
       {isEmpty ? (
         <Flex flex={1} alignItems='center' justifyContent='center'>

src/features/agenticChat/components/Composer.tsx

@@ -1,5 +1,5 @@
-import { Flex, IconButton, Textarea, useColorModeValue } from '@chakra-ui/react'
-import { useCallback, useRef } from 'react'
+import { Box, Flex, IconButton, Textarea, useColorModeValue } from '@chakra-ui/react'
+import { useCallback } from 'react'
 import { FiSend, FiSquare } from 'react-icons/fi'
 import { useTranslate } from 'react-polyglot'
 
@@ -15,8 +15,8 @@ type ComposerProps = {
 export const Composer = ({ chat }: ComposerProps) => {
   const translate = useTranslate()
   const { input, handleInputChange, handleSubmit, status, stop } = chat
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
+  const composerBg = useColorModeValue('white', 'gray.700')
   const borderColor = useColorModeValue('gray.200', 'gray.600')
   const isLoading = status === 'streaming'
 
@@ -32,49 +32,47 @@ export const Composer = ({ chat }: ComposerProps) => {
     [input, handleSubmit],
   )
 
-  const adjustHeight = useCallback(() => {
-    const textarea = textareaRef.current
-    if (textarea) {
-      textarea.style.height = 'auto'
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
-    }
-  }, [])
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      handleInputChange(e)
-      adjustHeight()
-    },
-    [handleInputChange, adjustHeight],
-  )
-
   return (
-    <Flex gap={2} alignItems='flex-end'>
-      <Textarea
-        ref={textareaRef}
-        value={input}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        placeholder={translate('agenticChat.placeholder')}
-        resize='none'
-        minHeight='44px'
-        maxHeight='200px'
-        flex={1}
-        borderColor={borderColor}
-        _focus={{ borderColor: 'blue.500' }}
-        autoComplete='new-password'
-        data-form-type='other'
-        data-lpignore='true'
-        data-1p-ignore='true'
-      />
-      <IconButton
-        icon={isLoading ? STOP_ICON : SEND_ICON}
-        aria-label={translate(isLoading ? 'agenticChat.stop' : 'agenticChat.send')}
-        onClick={isLoading ? stop : () => handleSubmit()}
-        size='sm'
-        colorScheme='blue'
-        isDisabled={!isLoading && !input.trim()}
-      />
-    </Flex>
+    <Box
+      bg={composerBg}
+      borderRadius='xl'
+      border='1px solid'
+      borderColor={borderColor}
+      p={2}
+      boxShadow='sm'
+    >
+      <Flex gap={2} alignItems='flex-end'>
+        <Textarea
+          value={input}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          placeholder={translate('agenticChat.placeholder')}
+          resize='none'
+          rows={1}
+          py={2}
+          flex={1}
+          border='none'
+          _focus={{ outline: 'none', boxShadow: 'none' }}
+          _focusVisible={{ outline: 'none', boxShadow: 'none' }}
+          autoComplete='new-password'
+          data-form-type='other'
+          data-lpignore='true'
+          data-1p-ignore='true'
+          sx={{
+            minHeight: '40px',
+            maxHeight: '200px',
+            fieldSizing: 'content',
+          }}
+        />
+        <IconButton
+          icon={isLoading ? STOP_ICON : SEND_ICON}
+          aria-label={translate(isLoading ? 'agenticChat.stop' : 'agenticChat.send')}
+          onClick={isLoading ? stop : () => handleSubmit()}
+          size='md'
+          colorScheme='blue'
+          isDisabled={!isLoading && !input.trim()}
+        />
+      </Flex>
+    </Box>
   )
 }