From 71e81b6ebc3a9d5466659ac06f1071cd7aa6a2ed Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:18:23 -0800
Subject: [PATCH 01/12] update components with new design

---
 app/components/Agent.tsx        |  29 +++++++--
 app/components/AgentAssets.tsx  |  54 +++++++++++++++
 app/components/AgentBalance.tsx |  19 ++++++
 app/components/AgentProfile.tsx |   8 ++-
 app/components/AgentStats.tsx   |  76 ----------------------
 app/components/Chat.tsx         | 112 ++++++++++++++++++++++++++++++++
 app/components/ChatInput.tsx    |  15 ++---
 app/components/Navbar.tsx       |  78 +++++++++++++++-------
 app/components/Stream.tsx       |  72 +++++++-------------
 app/components/StreamItem.tsx   |  12 +---
 app/constants.ts                |   2 +-
 11 files changed, 300 insertions(+), 177 deletions(-)
 create mode 100644 app/components/AgentAssets.tsx
 create mode 100644 app/components/AgentBalance.tsx
 delete mode 100644 app/components/AgentStats.tsx
 create mode 100644 app/components/Chat.tsx

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index 0b7a021..0fe7965 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -2,13 +2,16 @@ import { useCallback, useState } from 'react';
 
 import type { Language } from '../types';
 import AgentProfile from './AgentProfile';
-import AgentStats from './AgentStats';
+import AgentBalance from './AgentBalance';
 import Footer from './Footer';
 import Navbar from './Navbar';
 import Stream from './Stream';
+import Chat from './Chat';
+import AgentAssets from './AgentAssets';
 
 export default function Agent() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isMobileChatOpen, setIsMobileChatOpen] = useState(false);
   const [currentLanguage, setCurrentLanguage] = useState<Language>('en');
 
   const handleLanguageChange = useCallback((lang: Language) => {
@@ -20,6 +23,8 @@ export default function Agent() {
       <Navbar
         isMobileMenuOpen={isMobileMenuOpen}
         setIsMobileMenuOpen={setIsMobileMenuOpen}
+        isMobileChatOpen={isMobileChatOpen}
+        setIsMobileChatOpen={setIsMobileChatOpen}
         setCurrentLanguage={handleLanguageChange}
         currentLanguage={currentLanguage}
       />
@@ -29,13 +34,29 @@ export default function Agent() {
           className={`
           ${
             isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
-          } fixed z-20 flex h-full w-full flex-col overflow-y-auto bg-black p-2 transition-transform duration-300 lg:relative lg:z-0 lg:w-1/3 lg:translate-x-0 lg:border-[#5788FA]/50 lg:border-r `}
+          } fixed z-20 flex h-full w-full flex-col overflow-y-auto bg-black transition-transform duration-300 lg:relative lg:z-0 lg:w-1/3 lg:translate-x-0 lg:border-[#5788FA]/50 lg:border-r `}
         >
           <AgentProfile currentLanguage={currentLanguage} />
-          <AgentStats currentLanguage={currentLanguage} />
+          <AgentBalance />
+          <AgentAssets />
         </div>
 
-        <Stream currentLanguage={currentLanguage} />
+        <div className="flex lg:w-2/3 w-full">
+          <Stream currentLanguage={currentLanguage} />
+          <Chat currentLanguage={currentLanguage} className="hidden" />
+        </div>
+
+        <div
+          className={`
+          ${
+            isMobileChatOpen ? 'translate-y-0' : 'hidden'
+          } fixed pt-[100px] top-0 z-8 flex h-full w-full flex-col overflow-y-auto bg-black transition-transform duration-300 md:hidden`}
+        >
+          <Chat
+            currentLanguage={currentLanguage}
+            className="w-full flex-col flex"
+          />
+        </div>
       </div>
       <Footer />
     </div>
diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
new file mode 100644
index 0000000..6a06559
--- /dev/null
+++ b/app/components/AgentAssets.tsx
@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import getNfts from '../hooks/useGetNfts';
+
+// TODO: add assets
+export default function AgentAssets() {
+  const [tab, setTab] = useState('tokens');
+
+  const tokensClass = useMemo(() => {
+    if (tab === 'tokens') {
+      return 'border-b border-[#5788FA] flex items-center justify-center py-1';
+    }
+    return ' flex items-center justify-center py-1';
+  }, [tab]);
+  const nftsClass = useMemo(() => {
+    if (tab === 'nft') {
+      return 'border-b border-[#5788FA] flex items-center justify-center py-1';
+    }
+    return ' flex items-center justify-center py-1';
+  }, [tab]);
+  const createdClass = useMemo(() => {
+    if (tab === 'created') {
+      return 'border-b border-[#5788FA] flex items-center justify-center py-1';
+    }
+    return ' flex items-center justify-center py-1';
+  }, [tab]);
+
+  const handleTabChange = useCallback((tab: string) => {
+    return () => setTab(tab);
+  }, []);
+
+  useEffect(() => {
+    getNfts();
+  }, []);
+
+  return (
+    <div className="mr-2 mb-4 rounded-sm  bg-black p-4">
+      <div className="flex flex-col items-start gap-4">
+        <div className="gap-6 flex border-b border-zinc-700 grow w-full">
+          <button onClick={handleTabChange('tokens')} className={tokensClass}>
+            Tokens
+          </button>
+          <button onClick={handleTabChange('nft')} className={nftsClass}>
+            NFTs
+          </button>
+          <button onClick={handleTabChange('created')} className={createdClass}>
+            Created
+          </button>
+        </div>
+
+        {tab === 'tokens' ? <div>tokens</div> : <div>nfts</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/AgentBalance.tsx b/app/components/AgentBalance.tsx
new file mode 100644
index 0000000..1a5d6fb
--- /dev/null
+++ b/app/components/AgentBalance.tsx
@@ -0,0 +1,19 @@
+import { useBalance } from 'wagmi';
+import { AGENT_WALLET_ADDRESS } from '../constants';
+
+export default function AgentBalance() {
+  const { data } = useBalance({
+    address: AGENT_WALLET_ADDRESS,
+    query: { refetchInterval: 5000 },
+  });
+
+  return (
+    <div className="rounded-sm bg-black border-t p-4 pt-8  border-zinc-700">
+      <div className="flex flex-col items-start ">
+        <span className="font-bold text-3xl text-[#5788FA]">
+          {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/AgentProfile.tsx b/app/components/AgentProfile.tsx
index 2450fc9..1518316 100644
--- a/app/components/AgentProfile.tsx
+++ b/app/components/AgentProfile.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AGENT_NAME, AGENT_WALLET_ADDRESS, notoSansThai } from '../constants';
-import { translations } from '../translations';
 import type { Language } from '../types';
 
 type AgentProfileProps = {
@@ -59,7 +58,7 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
   }, []);
 
   return (
-    <div className="mb-4">
+    <div className="p-4">
       <div className="flex flex-col space-y-4 py-2">
         <div className="flex items-center space-x-5">
           <svg
@@ -104,7 +103,10 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
             currentLanguage === 'th' ? notoSansThai.className : ''
           }`}
         >
-          {translations[currentLanguage].profile.bio}
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book.
         </p>
       </div>
     </div>
diff --git a/app/components/AgentStats.tsx b/app/components/AgentStats.tsx
deleted file mode 100644
index e7f271d..0000000
--- a/app/components/AgentStats.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useBalance, useTransactionCount } from 'wagmi';
-import { AGENT_WALLET_ADDRESS, notoSansThai } from '../constants';
-import { translations } from '../translations';
-import type { Language } from '../types';
-
-type AgentStatsItemProps = {
-  currentLanguage: Language;
-  label: string;
-  value: string | number;
-};
-
-function AgentStatsItem({
-  currentLanguage,
-  label,
-  value,
-}: AgentStatsItemProps) {
-  return (
-    <li className={currentLanguage === 'th' ? notoSansThai.className : ''}>
-      {`${label}: ${value}`}
-    </li>
-  );
-}
-
-type AgentStats = {
-  currentLanguage: Language;
-};
-
-export default function AgentStats({ currentLanguage }: AgentStats) {
-  const { data } = useBalance({
-    address: AGENT_WALLET_ADDRESS,
-    query: { refetchInterval: 5000 },
-  });
-
-  const { data: transactionCount } = useTransactionCount({
-    address: AGENT_WALLET_ADDRESS,
-    query: { refetchInterval: 5000 },
-  });
-
-  return (
-    <div className="mr-2 mb-4 rounded-sm border border-[#5788FA]/50 bg-black">
-      <div className="flex flex-col items-start p-4">
-        <span className="font-bold text-2xl text-[#5788FA]">
-          {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
-        </span>
-        {/* TODO: update with actual data */}
-        <ul className="space-y-1 pt-4">
-          <AgentStatsItem
-            currentLanguage={currentLanguage}
-            label={translations[currentLanguage].profile.stats.earned}
-            value="N/A"
-          />
-          <AgentStatsItem
-            currentLanguage={currentLanguage}
-            label={translations[currentLanguage].profile.stats.spent}
-            value="N/A"
-          />
-          <AgentStatsItem
-            currentLanguage={currentLanguage}
-            label={translations[currentLanguage].profile.stats.nfts}
-            value="N/A"
-          />
-          <AgentStatsItem
-            currentLanguage={currentLanguage}
-            label={translations[currentLanguage].profile.stats.tokens}
-            value="N/A"
-          />
-          <AgentStatsItem
-            currentLanguage={currentLanguage}
-            label={translations[currentLanguage].profile.stats.transactions}
-            value={transactionCount || 'N/A'}
-          />
-        </ul>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx
new file mode 100644
index 0000000..1eceacb
--- /dev/null
+++ b/app/components/Chat.tsx
@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AgentMessage, Language, StreamEntry } from '../types';
+import ChatInput from './ChatInput';
+import useChat from '../hooks/useChat';
+import StreamItem from './StreamItem';
+import { notoSansThai } from '../constants';
+import { cn } from '@coinbase/onchainkit/theme';
+
+type ChatProps = {
+  currentLanguage: Language;
+  enableLiveStream?: boolean;
+  className?: string;
+};
+
+export default function Chat({ className, currentLanguage }: ChatProps) {
+  const [userInput, setUserInput] = useState('');
+  const [streamEntries, setStreamEntries] = useState<StreamEntry[]>([]);
+  
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  // TODO: revisit this logic
+  const handleSuccess = useCallback((messages: AgentMessage[]) => {
+    // const message = messages.find((res) => res.event === "agent");
+    const filteredMessages = messages.filter(
+      (msg) => msg.event !== 'completed',
+    );
+    const streams = filteredMessages.map((msg) => {
+      return {
+        timestamp: new Date(),
+        content: msg?.data || '',
+        type: msg?.event,
+      };
+    });
+    // const streamEntry = {
+    //   timestamp: new Date(),
+    //   content: message?.data || "",
+    // };
+    setStreamEntries((prev) => [...prev, ...streams]);
+  }, []);
+
+  const { postChat, isLoading } = useChat({ onSuccess: handleSuccess });
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!userInput.trim()) {
+        return;
+      }
+
+      setUserInput('');
+
+      const userMessage: StreamEntry = {
+        timestamp: new Date(),
+        type: 'user',
+        content: userInput.trim(),
+      };
+
+      setStreamEntries((prev) => [...prev, userMessage]);
+
+      postChat(userInput);
+    },
+    [postChat, userInput],
+  );
+
+  const handleKeyPress = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit(e);
+      }
+    },
+    [handleSubmit],
+  );
+
+  useEffect(() => {
+    // scrolls to the bottom of the chat when messages change
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [streamEntries]);
+
+  return (
+    <div className={cn('flex flex-col w-1/2 grow md:flex h-full', className)}>
+      <div className="flex flex-col overflow-y-auto p-4 pb-20 grow">
+        <p
+          className={`text-zinc-500 ${
+            currentLanguage === 'th' ? notoSansThai.className : ''
+          }`}
+        >
+          Ask me something...
+        </p>
+        <div className="mt-4 space-y-2" role="log" aria-live="polite">
+          {streamEntries.map((entry, index) => (
+            <StreamItem
+              key={`${entry.timestamp.toDateString()}-${index}`}
+              entry={entry}
+              currentLanguage={currentLanguage}
+            />
+          ))}
+        </div>
+
+        <div className="mt-3" ref={bottomRef} />
+      </div>
+
+      <ChatInput
+        currentLanguage={currentLanguage}
+        userInput={userInput}
+        handleKeyPress={handleKeyPress}
+        handleSubmit={handleSubmit}
+        setUserInput={setUserInput}
+      />
+    </div>
+  );
+}
diff --git a/app/components/ChatInput.tsx b/app/components/ChatInput.tsx
index 961ca80..15f8289 100644
--- a/app/components/ChatInput.tsx
+++ b/app/components/ChatInput.tsx
@@ -19,7 +19,7 @@ function PremadeChatInput({
     <button
       type="submit"
       onClick={() => setUserInput(text)}
-      className={`w-full whitespace-nowrap rounded-sm border border-[#5788FA]/50 px-2 py-1 text-[#5788FA] transition-colors hover:bg-zinc-900 hover:text-[#3D7BFF] lg:w-auto lg:grow ${
+      className={`w-full whitespace-nowrap text-start rounded-sm border border-[#5788FA]/50 px-2 py-1 text-[#5788FA] transition-colors hover:bg-zinc-900 hover:text-[#3D7BFF] lg:w-auto ${
         currentLanguage === 'th' ? notoSansThai.className : ''
       }`}
     >
@@ -54,7 +54,7 @@ export default function ChatInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-4 pb-10 lg:pb-2"
+      className="flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-4 pb-10 lg:pb-2 mt-auto md:mt-0"
     >
       <div className="flex flex-col gap-2">
         <div className="flex gap-2">
@@ -62,7 +62,7 @@ export default function ChatInput({
             value={userInput}
             onChange={handleInputChange}
             onKeyPress={handleKeyPress}
-            className={`h-24 w-full bg-black p-2 pr-10 text-[#5788FA] placeholder-[#5788FA] placeholder-opacity-50 lg:h-36 ${
+            className={`h-24 w-full bg-black p-2 pr-10 text-gray-300 placeholder-[#5788FA] placeholder-opacity-50 lg:h-36 ${
               currentLanguage === 'th' ? notoSansThai.className : ''
             }`}
             placeholder={translations[currentLanguage].chat.placeholder}
@@ -81,16 +81,11 @@ export default function ChatInput({
           </button>
         </div>
         <div className="flex w-full items-center justify-between gap-4 py-2">
-          <div className="flex grow flex-col gap-2 overflow-x-auto text-xs lg:flex-row lg:text-sm">
+          <div className="flex grow flex-col gap-2 overflow-x-auto text-xs lg:flex-row lg:text-sm flex-wrap">
             <PremadeChatInput
               setUserInput={setUserInput}
               currentLanguage={currentLanguage}
-              text={translations[currentLanguage].chat.suggestions.send}
-            />
-            <PremadeChatInput
-              setUserInput={setUserInput}
-              currentLanguage={currentLanguage}
-              text={translations[currentLanguage].chat.suggestions.create}
+              text="Create a new token with all the specifications"
             />
             <PremadeChatInput
               setUserInput={setUserInput}
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 065f048..03f6978 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,12 +1,15 @@
 import { useCallback, useEffect, useState } from 'react';
-import { notoSansThai } from '../constants';
+import { AGENT_NAME, notoSansThai } from '../constants';
 import { translations } from '../translations';
 import type { Language } from '../types';
 import LanguageSelector from './LanguageSelector';
+import WalletSvg from '../svg/WalletSvg';
 
 type NavbarProps = {
   setIsMobileMenuOpen: (isOpen: boolean) => void;
   isMobileMenuOpen: boolean;
+  setIsMobileChatOpen: (isOpen: boolean) => void;
+  isMobileChatOpen: boolean;
   setCurrentLanguage: (language: Language) => void;
   currentLanguage: Language;
 };
@@ -14,6 +17,8 @@ type NavbarProps = {
 export default function Navbar({
   setIsMobileMenuOpen,
   isMobileMenuOpen,
+  isMobileChatOpen,
+  setIsMobileChatOpen,
   setCurrentLanguage,
   currentLanguage,
 }: NavbarProps) {
@@ -28,36 +33,61 @@ export default function Navbar({
     return () => clearInterval(dotInterval);
   }, []);
 
-  const handleClick = useCallback(() => {
+  const handleMobileProfileClick = useCallback(() => {
+    if (!isMobileMenuOpen && isMobileChatOpen) {
+      setIsMobileChatOpen(false);
+    }
     setIsMobileMenuOpen(!isMobileMenuOpen);
-  }, [isMobileMenuOpen, setIsMobileMenuOpen]);
+  }, [isMobileMenuOpen, isMobileChatOpen, setIsMobileMenuOpen]);
+
+  const handleMobileChatClick = useCallback(() => {
+    if (!isMobileChatOpen && isMobileMenuOpen) {
+      setIsMobileMenuOpen(false);
+    }
+    setIsMobileChatOpen(!isMobileChatOpen);
+  }, [isMobileMenuOpen, isMobileChatOpen, setIsMobileChatOpen]);
 
   return (
-    <div className="flex items-center justify-between border-[#5788FA]/50 border-b p-2">
-      <div className="flex items-center space-x-2">
-        <button className="mr-2 lg:hidden" onClick={handleClick} type="button">
-          ☰
+    <div className="z-10 flex flex-col items-center justify-between border-[#5788FA]/50 border-b">
+      <div className="md:hidden flex items-center justify-between border-[#5788FA]/50 border-b p-2 w-full">
+        <button onClick={handleMobileProfileClick}>
+          <WalletSvg />
+        </button>
+        <h2 className="font-bold text-[#5788FA] text-xl">{AGENT_NAME}</h2>
+        <button onClick={handleMobileChatClick}>
+          <WalletSvg />
         </button>
-        <div
-          className={`h-2 w-2 rounded-full transition-all duration-700 ease-in-out ${
-            isLiveDotVisible
-              ? 'bg-green-500 opacity-100'
-              : 'bg-green-500 opacity-40'
-          }
+      </div>
+      <div className="flex justify-between w-full p-2">
+        <div className="flex items-center space-x-2">
+          <button
+            className="mr-2 hidden md:flex lg:hidden"
+            onClick={handleMobileProfileClick}
+            type="button"
+          >
+            ☰
+          </button>
+          <div
+            className={`h-2 w-2 rounded-full transition-all duration-700 ease-in-out ${
+              isLiveDotVisible
+                ? 'bg-green-500 opacity-100'
+                : 'bg-green-500 opacity-40'
+            }
         `}
+          />
+          <span
+            className={`text-sm text-zinc-50 ${
+              currentLanguage === 'th' ? notoSansThai.className : ''
+            }`}
+          >
+            {translations[currentLanguage].header.liveOn}
+          </span>
+        </div>
+        <LanguageSelector
+          currentLanguage={currentLanguage}
+          onLanguageChange={setCurrentLanguage}
         />
-        <span
-          className={`text-sm text-zinc-50 ${
-            currentLanguage === 'th' ? notoSansThai.className : ''
-          }`}
-        >
-          {translations[currentLanguage].header.liveOn}
-        </span>
       </div>
-      <LanguageSelector
-        currentLanguage={currentLanguage}
-        onLanguageChange={setCurrentLanguage}
-      />
     </div>
   );
 }
diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
index 7c33ae5..89f86a7 100644
--- a/app/components/Stream.tsx
+++ b/app/components/Stream.tsx
@@ -1,21 +1,25 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { DEFAULT_PROMPT, notoSansThai } from '../constants';
+import {
+  AGENT_WALLET_ADDRESS,
+  DEFAULT_PROMPT,
+  notoSansThai,
+} from '../constants';
 import useChat from '../hooks/useChat';
 import { translations } from '../translations';
 import type { AgentMessage, Language, StreamEntry } from '../types';
-import ChatInput from './ChatInput';
 import StreamItem from './StreamItem';
+import { useTransactionCount } from 'wagmi';
 
 type StreamProps = {
   currentLanguage: Language;
 };
 
-export default function Stream({ currentLanguage }: StreamProps) {
+export default function Stream({
+  currentLanguage,
+}: StreamProps) {
   const [streamEntries, setStreamEntries] = useState<StreamEntry[]>([]);
-  const [userInput, setUserInput] = useState('');
   const [isThinking, setIsThinking] = useState(true);
   const [loadingDots, setLoadingDots] = useState('');
-  const [isChatMode, setIsChatMode] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
   // TODO: revisit this logic
@@ -47,7 +51,7 @@ export default function Stream({ currentLanguage }: StreamProps) {
   // enables live stream of agent thoughts
   useEffect(() => {
     const streamInterval = setInterval(() => {
-      if (!isLoading && !isChatMode) {
+      if (!isLoading) {
         postChat(DEFAULT_PROMPT);
       }
     }, 1500);
@@ -55,7 +59,7 @@ export default function Stream({ currentLanguage }: StreamProps) {
     return () => {
       clearInterval(streamInterval);
     };
-  }, [isLoading, postChat, isChatMode]);
+  }, [isLoading, postChat]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Dependency is required
   useEffect(() => {
@@ -77,43 +81,18 @@ export default function Stream({ currentLanguage }: StreamProps) {
     return () => clearInterval(dotsInterval);
   }, []);
 
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!userInput.trim()) {
-        return;
-      }
-
-      // disable live stream
-      setIsChatMode(true);
-      setUserInput('');
-
-      const userMessage: StreamEntry = {
-        timestamp: new Date(),
-        type: 'user',
-        content: userInput.trim(),
-      };
 
-      setStreamEntries((prev) => [...prev, userMessage]);
-
-      postChat(userInput);
-    },
-    [postChat, userInput],
-  );
-
-  const handleKeyPress = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit(e);
-      }
-    },
-    [handleSubmit],
-  );
+  const { data: transactionCount } = useTransactionCount({
+    address: AGENT_WALLET_ADDRESS,
+    query: { refetchInterval: 5000 },
+  });
 
   return (
-    <div className="flex w-full flex-grow flex-col lg:w-2/3">
-      <div className="flex-grow overflow-y-auto p-4 pb-20">
+    <div className="flex w-full flex-grow flex-col w-1/2 border-[#5788FA]/50 md:border-r">
+      <div className="flex items-center p-2 border-b border-[#5788FA]/50">
+        Total transactions: {transactionCount}
+      </div>
+      <div className="flex-grow overflow-y-auto p-4 pb-20 max-w-full">
         <p
           className={`text-zinc-500 ${
             currentLanguage === 'th' ? notoSansThai.className : ''
@@ -130,10 +109,10 @@ export default function Stream({ currentLanguage }: StreamProps) {
             />
           ))}
         </div>
-        {isThinking && !isChatMode && (
+        {isThinking && (
           <div className="mt-4 flex items-center text-[#5788FA] opacity-70">
             <span
-              className={`font-mono ${
+              className={`font-mono max-w-full ${
                 currentLanguage === 'th' ? notoSansThai.className : ''
               }`}
             >
@@ -144,13 +123,6 @@ export default function Stream({ currentLanguage }: StreamProps) {
         )}
         <div className="mt-3" ref={bottomRef} />
       </div>
-      <ChatInput
-        currentLanguage={currentLanguage}
-        userInput={userInput}
-        handleKeyPress={handleKeyPress}
-        handleSubmit={handleSubmit}
-        setUserInput={setUserInput}
-      />
     </div>
   );
 }
diff --git a/app/components/StreamItem.tsx b/app/components/StreamItem.tsx
index cabd1b3..3685bd0 100644
--- a/app/components/StreamItem.tsx
+++ b/app/components/StreamItem.tsx
@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { notoSansThai } from '../constants';
 import type { Language, StreamEntry } from '../types';
-import { getActionIcon } from '../utils';
 import TimeDisplay from './TimeDisplay';
 
 type StreamItemProps = {
@@ -14,9 +13,9 @@ export default function StreamItem({
   currentLanguage,
 }: StreamItemProps) {
   const className = useMemo(() => {
-    let baseClass = 'flex items-center space-x-2';
+    let baseClass = 'flex items-center space-x-2 max-w-full';
 
-    if (entry?.type && ['tools', 'user'].includes(entry?.type)) {
+    if (entry?.type !== 'user') {
       baseClass += ' text-[#5788FA]';
     } else {
       baseClass += ' text-gray-300';
@@ -29,16 +28,11 @@ export default function StreamItem({
     return baseClass;
   }, [currentLanguage, entry?.type]);
 
-  const icon = useMemo(() => {
-    return getActionIcon(entry.type);
-  }, [entry]);
-
   return (
     <div className="mb-2">
       <TimeDisplay timestamp={entry.timestamp} />
       <div className={className}>
-        {icon && <div className="h-4 w-4">{icon}</div>}
-        <span>{entry.content}</span>
+        <span className="max-w-full text-wrap break-all"> {entry.content}</span>
       </div>
     </div>
   );
diff --git a/app/constants.ts b/app/constants.ts
index e262887..8ebad93 100644
--- a/app/constants.ts
+++ b/app/constants.ts
@@ -11,7 +11,7 @@ export const AGENT_WALLET_ADDRESS =
 export const AGENT_NAME = 'Based Agent';
 
 export const DEFAULT_PROMPT =
-  'Be creative and same something interesting about the blockchain and your abilities';
+  'Be creative and same something interesting about the blockchain and your abilities in one sentence';
 
 // export const DEFAULT_PROMPT =
 //   'Be creative and do something interesting on the blockchain. Choose an action or set of actions and execute it in a way that highlights your abilities.';

From aad4969d70eb1ff81f462c6952029abdd6d157f8 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:42:21 -0800
Subject: [PATCH 02/12] fix format

---
 app/components/Chat.tsx   | 2 +-
 app/components/Stream.tsx | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx
index 1eceacb..d241514 100644
--- a/app/components/Chat.tsx
+++ b/app/components/Chat.tsx
@@ -15,7 +15,7 @@ type ChatProps = {
 export default function Chat({ className, currentLanguage }: ChatProps) {
   const [userInput, setUserInput] = useState('');
   const [streamEntries, setStreamEntries] = useState<StreamEntry[]>([]);
-  
+
   const bottomRef = useRef<HTMLDivElement>(null);
 
   // TODO: revisit this logic
diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
index 89f86a7..3748b46 100644
--- a/app/components/Stream.tsx
+++ b/app/components/Stream.tsx
@@ -14,9 +14,7 @@ type StreamProps = {
   currentLanguage: Language;
 };
 
-export default function Stream({
-  currentLanguage,
-}: StreamProps) {
+export default function Stream({ currentLanguage }: StreamProps) {
   const [streamEntries, setStreamEntries] = useState<StreamEntry[]>([]);
   const [isThinking, setIsThinking] = useState(true);
   const [loadingDots, setLoadingDots] = useState('');
@@ -81,7 +79,6 @@ export default function Stream({
     return () => clearInterval(dotsInterval);
   }, []);
 
-
   const { data: transactionCount } = useTransactionCount({
     address: AGENT_WALLET_ADDRESS,
     query: { refetchInterval: 5000 },

From 88b25be0c79080dd05d03328ffa84c322a8f5575 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:46:28 -0800
Subject: [PATCH 03/12] fix lint

---
 app/components/AgentAssets.tsx | 20 +++++++++++++++++---
 app/components/Chat.tsx        |  4 +++-
 app/components/ChatInput.tsx   |  6 ++++--
 app/components/Navbar.tsx      | 18 ++++++++++++++----
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
index 6a06559..b3a3972 100644
--- a/app/components/AgentAssets.tsx
+++ b/app/components/AgentAssets.tsx
@@ -11,12 +11,14 @@ export default function AgentAssets() {
     }
     return ' flex items-center justify-center py-1';
   }, [tab]);
+
   const nftsClass = useMemo(() => {
     if (tab === 'nft') {
       return 'border-b border-[#5788FA] flex items-center justify-center py-1';
     }
     return ' flex items-center justify-center py-1';
   }, [tab]);
+
   const createdClass = useMemo(() => {
     if (tab === 'created') {
       return 'border-b border-[#5788FA] flex items-center justify-center py-1';
@@ -36,13 +38,25 @@ export default function AgentAssets() {
     <div className="mr-2 mb-4 rounded-sm  bg-black p-4">
       <div className="flex flex-col items-start gap-4">
         <div className="gap-6 flex border-b border-zinc-700 grow w-full">
-          <button onClick={handleTabChange('tokens')} className={tokensClass}>
+          <button
+            type="button"
+            onClick={handleTabChange('tokens')}
+            className={tokensClass}
+          >
             Tokens
           </button>
-          <button onClick={handleTabChange('nft')} className={nftsClass}>
+          <button
+            type="button"
+            onClick={handleTabChange('nft')}
+            className={nftsClass}
+          >
             NFTs
           </button>
-          <button onClick={handleTabChange('created')} className={createdClass}>
+          <button
+            type="button"
+            onClick={handleTabChange('created')}
+            className={createdClass}
+          >
             Created
           </button>
         </div>
diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx
index d241514..dca73d9 100644
--- a/app/components/Chat.tsx
+++ b/app/components/Chat.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { AgentMessage, Language, StreamEntry } from '../types';
+import type { AgentMessage, Language, StreamEntry } from '../types';
 import ChatInput from './ChatInput';
 import useChat from '../hooks/useChat';
 import StreamItem from './StreamItem';
@@ -72,6 +72,7 @@ export default function Chat({ className, currentLanguage }: ChatProps) {
     [handleSubmit],
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Dependency is required
   useEffect(() => {
     // scrolls to the bottom of the chat when messages change
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -106,6 +107,7 @@ export default function Chat({ className, currentLanguage }: ChatProps) {
         handleKeyPress={handleKeyPress}
         handleSubmit={handleSubmit}
         setUserInput={setUserInput}
+        disabled={isLoading}
       />
     </div>
   );
diff --git a/app/components/ChatInput.tsx b/app/components/ChatInput.tsx
index 15f8289..7b2e752 100644
--- a/app/components/ChatInput.tsx
+++ b/app/components/ChatInput.tsx
@@ -34,6 +34,7 @@ export type ChatInputProps = {
   setUserInput: (input: string) => void;
   handleKeyPress: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
   currentLanguage: Language;
+  disabled?: boolean;
 };
 
 export default function ChatInput({
@@ -42,6 +43,7 @@ export default function ChatInput({
   userInput,
   setUserInput,
   handleKeyPress,
+  disabled = false,
 }: ChatInputProps) {
   const handleInputChange = useCallback(
     // TODO: sanitize
@@ -95,9 +97,9 @@ export default function ChatInput({
           </div>
           <button
             type="submit"
-            disabled={!/[a-zA-Z]/.test(userInput)}
+            disabled={!/[a-zA-Z]/.test(userInput) || disabled}
             className={`rounded-sm p-1.5 transition-colors max-xl:hidden ${
-              /[a-zA-Z]/.test(userInput)
+              /[a-zA-Z]/.test(userInput) || disabled
                 ? 'bg-[#5788FA] text-zinc-950 hover:bg-[#3D7BFF]'
                 : 'cursor-not-allowed bg-[#5788FA] text-zinc-950 opacity-50'
             }`}
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 03f6978..8ae2c3f 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -38,23 +38,33 @@ export default function Navbar({
       setIsMobileChatOpen(false);
     }
     setIsMobileMenuOpen(!isMobileMenuOpen);
-  }, [isMobileMenuOpen, isMobileChatOpen, setIsMobileMenuOpen]);
+  }, [
+    isMobileMenuOpen,
+    isMobileChatOpen,
+    setIsMobileChatOpen,
+    setIsMobileMenuOpen,
+  ]);
 
   const handleMobileChatClick = useCallback(() => {
     if (!isMobileChatOpen && isMobileMenuOpen) {
       setIsMobileMenuOpen(false);
     }
     setIsMobileChatOpen(!isMobileChatOpen);
-  }, [isMobileMenuOpen, isMobileChatOpen, setIsMobileChatOpen]);
+  }, [
+    isMobileMenuOpen,
+    isMobileChatOpen,
+    setIsMobileChatOpen,
+    setIsMobileMenuOpen,
+  ]);
 
   return (
     <div className="z-10 flex flex-col items-center justify-between border-[#5788FA]/50 border-b">
       <div className="md:hidden flex items-center justify-between border-[#5788FA]/50 border-b p-2 w-full">
-        <button onClick={handleMobileProfileClick}>
+        <button type="button" onClick={handleMobileProfileClick}>
           <WalletSvg />
         </button>
         <h2 className="font-bold text-[#5788FA] text-xl">{AGENT_NAME}</h2>
-        <button onClick={handleMobileChatClick}>
+        <button type="button" onClick={handleMobileChatClick}>
           <WalletSvg />
         </button>
       </div>

From 447a4e9861afeb752659d2084d25f6cf59f34ad3 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:47:35 -0800
Subject: [PATCH 04/12] fix format

---
 app/components/Agent.tsx        | 6 +++---
 app/components/AgentAssets.tsx  | 4 ++--
 app/components/AgentBalance.tsx | 2 +-
 app/components/Chat.tsx         | 4 ++--
 app/components/ChatInput.tsx    | 6 +++---
 app/components/Navbar.tsx       | 4 ++--
 app/components/Stream.tsx       | 8 ++++----
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index 0fe7965..16336ca 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -41,7 +41,7 @@ export default function Agent() {
           <AgentAssets />
         </div>
 
-        <div className="flex lg:w-2/3 w-full">
+        <div className="flex w-full lg:w-2/3">
           <Stream currentLanguage={currentLanguage} />
           <Chat currentLanguage={currentLanguage} className="hidden" />
         </div>
@@ -50,11 +50,11 @@ export default function Agent() {
           className={`
           ${
             isMobileChatOpen ? 'translate-y-0' : 'hidden'
-          } fixed pt-[100px] top-0 z-8 flex h-full w-full flex-col overflow-y-auto bg-black transition-transform duration-300 md:hidden`}
+          } fixed top-0 z-8 flex h-full w-full flex-col overflow-y-auto bg-black pt-[100px] transition-transform duration-300 md:hidden`}
         >
           <Chat
             currentLanguage={currentLanguage}
-            className="w-full flex-col flex"
+            className="flex w-full flex-col"
           />
         </div>
       </div>
diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
index b3a3972..1aa4e4d 100644
--- a/app/components/AgentAssets.tsx
+++ b/app/components/AgentAssets.tsx
@@ -35,9 +35,9 @@ export default function AgentAssets() {
   }, []);
 
   return (
-    <div className="mr-2 mb-4 rounded-sm  bg-black p-4">
+    <div className="mr-2 mb-4 rounded-sm bg-black p-4">
       <div className="flex flex-col items-start gap-4">
-        <div className="gap-6 flex border-b border-zinc-700 grow w-full">
+        <div className="flex w-full grow gap-6 border-zinc-700 border-b">
           <button
             type="button"
             onClick={handleTabChange('tokens')}
diff --git a/app/components/AgentBalance.tsx b/app/components/AgentBalance.tsx
index 1a5d6fb..bb3ff28 100644
--- a/app/components/AgentBalance.tsx
+++ b/app/components/AgentBalance.tsx
@@ -8,7 +8,7 @@ export default function AgentBalance() {
   });
 
   return (
-    <div className="rounded-sm bg-black border-t p-4 pt-8  border-zinc-700">
+    <div className="rounded-sm border-zinc-700 border-t bg-black p-4 pt-8">
       <div className="flex flex-col items-start ">
         <span className="font-bold text-3xl text-[#5788FA]">
           {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx
index dca73d9..596d84e 100644
--- a/app/components/Chat.tsx
+++ b/app/components/Chat.tsx
@@ -79,8 +79,8 @@ export default function Chat({ className, currentLanguage }: ChatProps) {
   }, [streamEntries]);
 
   return (
-    <div className={cn('flex flex-col w-1/2 grow md:flex h-full', className)}>
-      <div className="flex flex-col overflow-y-auto p-4 pb-20 grow">
+    <div className={cn('flex h-full w-1/2 grow flex-col md:flex', className)}>
+      <div className="flex grow flex-col overflow-y-auto p-4 pb-20">
         <p
           className={`text-zinc-500 ${
             currentLanguage === 'th' ? notoSansThai.className : ''
diff --git a/app/components/ChatInput.tsx b/app/components/ChatInput.tsx
index 7b2e752..942eedd 100644
--- a/app/components/ChatInput.tsx
+++ b/app/components/ChatInput.tsx
@@ -19,7 +19,7 @@ function PremadeChatInput({
     <button
       type="submit"
       onClick={() => setUserInput(text)}
-      className={`w-full whitespace-nowrap text-start rounded-sm border border-[#5788FA]/50 px-2 py-1 text-[#5788FA] transition-colors hover:bg-zinc-900 hover:text-[#3D7BFF] lg:w-auto ${
+      className={`w-full whitespace-nowrap rounded-sm border border-[#5788FA]/50 px-2 py-1 text-start text-[#5788FA] transition-colors hover:bg-zinc-900 hover:text-[#3D7BFF] lg:w-auto ${
         currentLanguage === 'th' ? notoSansThai.className : ''
       }`}
     >
@@ -56,7 +56,7 @@ export default function ChatInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-4 pb-10 lg:pb-2 mt-auto md:mt-0"
+      className="mt-auto flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-4 pb-10 md:mt-0 lg:pb-2"
     >
       <div className="flex flex-col gap-2">
         <div className="flex gap-2">
@@ -83,7 +83,7 @@ export default function ChatInput({
           </button>
         </div>
         <div className="flex w-full items-center justify-between gap-4 py-2">
-          <div className="flex grow flex-col gap-2 overflow-x-auto text-xs lg:flex-row lg:text-sm flex-wrap">
+          <div className="flex grow flex-col flex-wrap gap-2 overflow-x-auto text-xs lg:flex-row lg:text-sm">
             <PremadeChatInput
               setUserInput={setUserInput}
               currentLanguage={currentLanguage}
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 8ae2c3f..e3784c2 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -59,7 +59,7 @@ export default function Navbar({
 
   return (
     <div className="z-10 flex flex-col items-center justify-between border-[#5788FA]/50 border-b">
-      <div className="md:hidden flex items-center justify-between border-[#5788FA]/50 border-b p-2 w-full">
+      <div className="flex w-full items-center justify-between border-[#5788FA]/50 border-b p-2 md:hidden">
         <button type="button" onClick={handleMobileProfileClick}>
           <WalletSvg />
         </button>
@@ -68,7 +68,7 @@ export default function Navbar({
           <WalletSvg />
         </button>
       </div>
-      <div className="flex justify-between w-full p-2">
+      <div className="flex w-full justify-between p-2">
         <div className="flex items-center space-x-2">
           <button
             className="mr-2 hidden md:flex lg:hidden"
diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
index 3748b46..d82db77 100644
--- a/app/components/Stream.tsx
+++ b/app/components/Stream.tsx
@@ -85,11 +85,11 @@ export default function Stream({ currentLanguage }: StreamProps) {
   });
 
   return (
-    <div className="flex w-full flex-grow flex-col w-1/2 border-[#5788FA]/50 md:border-r">
-      <div className="flex items-center p-2 border-b border-[#5788FA]/50">
+    <div className="flex w-1/2 w-full flex-grow flex-col border-[#5788FA]/50 md:border-r">
+      <div className="flex items-center border-[#5788FA]/50 border-b p-2">
         Total transactions: {transactionCount}
       </div>
-      <div className="flex-grow overflow-y-auto p-4 pb-20 max-w-full">
+      <div className="max-w-full flex-grow overflow-y-auto p-4 pb-20">
         <p
           className={`text-zinc-500 ${
             currentLanguage === 'th' ? notoSansThai.className : ''
@@ -109,7 +109,7 @@ export default function Stream({ currentLanguage }: StreamProps) {
         {isThinking && (
           <div className="mt-4 flex items-center text-[#5788FA] opacity-70">
             <span
-              className={`font-mono max-w-full ${
+              className={`max-w-full font-mono ${
                 currentLanguage === 'th' ? notoSansThai.className : ''
               }`}
             >

From f9329dacf44748d0bd2db25e6e3ecef50f8db284 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:49:54 -0800
Subject: [PATCH 05/12] fix imports

---
 app/components/Agent.tsx  |  7 +++---
 app/components/Chat.tsx   |  6 ++---
 app/components/Navbar.tsx |  2 +-
 app/components/Stream.tsx |  2 +-
 app/hooks/useGetNfts.ts   | 47 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 app/hooks/useGetNfts.ts

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index 16336ca..cfbbc71 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -1,13 +1,12 @@
 import { useCallback, useState } from 'react';
-
 import type { Language } from '../types';
-import AgentProfile from './AgentProfile';
+import AgentAssets from './AgentAssets';
 import AgentBalance from './AgentBalance';
+import AgentProfile from './AgentProfile';
+import Chat from './Chat';
 import Footer from './Footer';
 import Navbar from './Navbar';
 import Stream from './Stream';
-import Chat from './Chat';
-import AgentAssets from './AgentAssets';
 
 export default function Agent() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx
index 596d84e..b235705 100644
--- a/app/components/Chat.tsx
+++ b/app/components/Chat.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@coinbase/onchainkit/theme';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { notoSansThai } from '../constants';
+import useChat from '../hooks/useChat';
 import type { AgentMessage, Language, StreamEntry } from '../types';
 import ChatInput from './ChatInput';
-import useChat from '../hooks/useChat';
 import StreamItem from './StreamItem';
-import { notoSansThai } from '../constants';
-import { cn } from '@coinbase/onchainkit/theme';
 
 type ChatProps = {
   currentLanguage: Language;
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index e3784c2..7f7e043 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { AGENT_NAME, notoSansThai } from '../constants';
+import WalletSvg from '../svg/WalletSvg';
 import { translations } from '../translations';
 import type { Language } from '../types';
 import LanguageSelector from './LanguageSelector';
-import WalletSvg from '../svg/WalletSvg';
 
 type NavbarProps = {
   setIsMobileMenuOpen: (isOpen: boolean) => void;
diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
index d82db77..fc0ec54 100644
--- a/app/components/Stream.tsx
+++ b/app/components/Stream.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTransactionCount } from 'wagmi';
 import {
   AGENT_WALLET_ADDRESS,
   DEFAULT_PROMPT,
@@ -8,7 +9,6 @@ import useChat from '../hooks/useChat';
 import { translations } from '../translations';
 import type { AgentMessage, Language, StreamEntry } from '../types';
 import StreamItem from './StreamItem';
-import { useTransactionCount } from 'wagmi';
 
 type StreamProps = {
   currentLanguage: Language;
diff --git a/app/hooks/useGetNfts.ts b/app/hooks/useGetNfts.ts
new file mode 100644
index 0000000..c2e8598
--- /dev/null
+++ b/app/hooks/useGetNfts.ts
@@ -0,0 +1,47 @@
+import { AGENT_WALLET_ADDRESS } from '../constants';
+
+const baseUrl =
+  'https://api.wallet.coinbase.com/rpc/v2/collectibles/getUserCollectionList?';
+
+export default async function getNfts() {
+  try {
+    const response = await fetch(
+      `${baseUrl}userAddress=${AGENT_WALLET_ADDRESS}&chainId=84532`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        // body: JSON.stringify({ input }),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`Error: ${response.status} - ${response.statusText}`);
+    }
+
+    console.log({ response });
+
+    // const text = await response.text();
+    // const parsedMessages = text
+    //   .trim()
+    //   .split('\n')
+    //   .map((line) => {
+    //     try {
+    //       return JSON.parse(line);
+    //     } catch (error) {
+    //       console.error('Failed to parse line as JSON:', line, error);
+    //       return null;
+    //     }
+    //   })
+    //   .filter(Boolean);
+
+    // onSuccess(parsedMessages);
+    // return { messages: parsedMessages, error: null };
+  } catch (error) {
+    console.error('Error posting chat:', error);
+    return { messages: [], error: error as Error };
+  } finally {
+    // setIsLoading(false);
+  }
+}

From c4ca4d1c43282f38302fbe32c34832248d513c1f Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:50:54 -0800
Subject: [PATCH 06/12] remove unused hook

---
 app/components/AgentAssets.tsx |  5 ----
 app/hooks/useGetNfts.ts        | 47 ----------------------------------
 2 files changed, 52 deletions(-)
 delete mode 100644 app/hooks/useGetNfts.ts

diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
index 1aa4e4d..7aaadfb 100644
--- a/app/components/AgentAssets.tsx
+++ b/app/components/AgentAssets.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import getNfts from '../hooks/useGetNfts';
 
 // TODO: add assets
 export default function AgentAssets() {
@@ -30,10 +29,6 @@ export default function AgentAssets() {
     return () => setTab(tab);
   }, []);
 
-  useEffect(() => {
-    getNfts();
-  }, []);
-
   return (
     <div className="mr-2 mb-4 rounded-sm bg-black p-4">
       <div className="flex flex-col items-start gap-4">
diff --git a/app/hooks/useGetNfts.ts b/app/hooks/useGetNfts.ts
deleted file mode 100644
index c2e8598..0000000
--- a/app/hooks/useGetNfts.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { AGENT_WALLET_ADDRESS } from '../constants';
-
-const baseUrl =
-  'https://api.wallet.coinbase.com/rpc/v2/collectibles/getUserCollectionList?';
-
-export default async function getNfts() {
-  try {
-    const response = await fetch(
-      `${baseUrl}userAddress=${AGENT_WALLET_ADDRESS}&chainId=84532`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        // body: JSON.stringify({ input }),
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`Error: ${response.status} - ${response.statusText}`);
-    }
-
-    console.log({ response });
-
-    // const text = await response.text();
-    // const parsedMessages = text
-    //   .trim()
-    //   .split('\n')
-    //   .map((line) => {
-    //     try {
-    //       return JSON.parse(line);
-    //     } catch (error) {
-    //       console.error('Failed to parse line as JSON:', line, error);
-    //       return null;
-    //     }
-    //   })
-    //   .filter(Boolean);
-
-    // onSuccess(parsedMessages);
-    // return { messages: parsedMessages, error: null };
-  } catch (error) {
-    console.error('Error posting chat:', error);
-    return { messages: [], error: error as Error };
-  } finally {
-    // setIsLoading(false);
-  }
-}

From f35e21f0d2bf41c2c1415cc32b6e829aedcc29cd Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:51:54 -0800
Subject: [PATCH 07/12] remove unused hook

---
 app/components/AgentAssets.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
index 7aaadfb..8d5460f 100644
--- a/app/components/AgentAssets.tsx
+++ b/app/components/AgentAssets.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 // TODO: add assets
 export default function AgentAssets() {

From 191fbc7eb941f5b328af29693203ca1a1955ef21 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 15:59:24 -0800
Subject: [PATCH 08/12] fix build

---
 app/components/AgentProfile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/AgentProfile.tsx b/app/components/AgentProfile.tsx
index 1518316..076786e 100644
--- a/app/components/AgentProfile.tsx
+++ b/app/components/AgentProfile.tsx
@@ -104,11 +104,11 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
           }`}
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting
-          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          industry. Lorem Ipsum has been the industrys standard dummy text ever
           since the 1500s, when an unknown printer took a galley of type and
           scrambled it to make a type specimen book.
         </p>
-      </div>
+      </div>b
     </div>
   );
 }

From f0ccd91f286647438b0596495d2c09b8121813df Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 16:02:24 -0800
Subject: [PATCH 09/12] fix format

---
 app/components/AgentProfile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/AgentProfile.tsx b/app/components/AgentProfile.tsx
index 076786e..23eff8b 100644
--- a/app/components/AgentProfile.tsx
+++ b/app/components/AgentProfile.tsx
@@ -108,7 +108,7 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
           since the 1500s, when an unknown printer took a galley of type and
           scrambled it to make a type specimen book.
         </p>
-      </div>b
+      </div>
     </div>
   );
 }

From 85684feb4ed38bbc0d317aea17654b142794766c Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 6 Nov 2024 16:07:48 -0800
Subject: [PATCH 10/12] fix animation

---
 app/components/Agent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index cfbbc71..dc20304 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -48,7 +48,7 @@ export default function Agent() {
         <div
           className={`
           ${
-            isMobileChatOpen ? 'translate-y-0' : 'hidden'
+            isMobileChatOpen ? 'translate-y-0' : 'translate-x-full'
           } fixed top-0 z-8 flex h-full w-full flex-col overflow-y-auto bg-black pt-[100px] transition-transform duration-300 md:hidden`}
         >
           <Chat

From 717fd2e343388d4401733fdb9347b1f355a76c7d Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Thu, 7 Nov 2024 07:28:04 -0800
Subject: [PATCH 11/12] add chat svg

---
 app/components/Navbar.tsx |  3 ++-
 app/svg/ChatSvg.tsx       | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 app/svg/ChatSvg.tsx

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 7f7e043..ba9b895 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { AGENT_NAME, notoSansThai } from '../constants';
+import ChatSvg from '../svg/ChatSvg';
 import WalletSvg from '../svg/WalletSvg';
 import { translations } from '../translations';
 import type { Language } from '../types';
@@ -65,7 +66,7 @@ export default function Navbar({
         </button>
         <h2 className="font-bold text-[#5788FA] text-xl">{AGENT_NAME}</h2>
         <button type="button" onClick={handleMobileChatClick}>
-          <WalletSvg />
+          <ChatSvg />
         </button>
       </div>
       <div className="flex w-full justify-between p-2">
diff --git a/app/svg/ChatSvg.tsx b/app/svg/ChatSvg.tsx
new file mode 100644
index 0000000..837a009
--- /dev/null
+++ b/app/svg/ChatSvg.tsx
@@ -0,0 +1,17 @@
+export default function ChatSvg() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className="h-4 w-4"
+    >
+      <title>chat svg</title>
+      <path
+        fillRule="evenodd"
+        d="M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97-1.94.284-3.916.455-5.922.505a.39.39 0 0 0-.266.112L8.78 21.53A.75.75 0 0 1 7.5 21v-3.955a48.842 48.842 0 0 1-2.652-.316c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

From 28ea3d278d901a56af99a8c4d18929142309b8c1 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Thu, 7 Nov 2024 07:34:29 -0800
Subject: [PATCH 12/12] cleanup

---
 app/components/Agent.tsx        | 2 --
 app/components/AgentProfile.tsx | 3 ++-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index dc20304..a0dd182 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'react';
 import type { Language } from '../types';
-import AgentAssets from './AgentAssets';
 import AgentBalance from './AgentBalance';
 import AgentProfile from './AgentProfile';
 import Chat from './Chat';
@@ -37,7 +36,6 @@ export default function Agent() {
         >
           <AgentProfile currentLanguage={currentLanguage} />
           <AgentBalance />
-          <AgentAssets />
         </div>
 
         <div className="flex w-full lg:w-2/3">
diff --git a/app/components/AgentProfile.tsx b/app/components/AgentProfile.tsx
index 23eff8b..420008e 100644
--- a/app/components/AgentProfile.tsx
+++ b/app/components/AgentProfile.tsx
@@ -16,7 +16,7 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
       .writeText(AGENT_WALLET_ADDRESS)
       .then(() => {
         setShowToast(true);
-        setTimeout(() => setShowToast(false), 2000); // Hide toast after 2 seconds
+        setTimeout(() => setShowToast(false), 2000);
       })
       .catch((err) => {
         console.error('Failed to copy wallet address: ', err);
@@ -98,6 +98,7 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
           </div>
         </div>
 
+        {/* TODO: update description */}
         <p
           className={`text-[#5788FA] text-base ${
             currentLanguage === 'th' ? notoSansThai.className : ''