From 2359048aab6e244bebc3cd7bbd89738955d2f4f8 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissacranespam@gmail.com>
Date: Wed, 6 Nov 2024 06:34:29 -0800
Subject: [PATCH] chore: update streams and icons (#24)

* update streams and icons

* fix format

* reorganize components

* fix imports

* fix lint

* fix lint

* adjust mobile style

* fix format

* refactor

---------

Co-authored-by: Alissa Crane <alissa.crane@coinbase.com>
---
 app/components/Agent.tsx      | 119 +------------------
 app/components/AgentStats.tsx |  88 ++++++++------
 app/components/ChatInput.tsx  |  45 ++++---
 app/components/Navbar.tsx     |  15 ++-
 app/components/Stream.tsx     | 216 ++++++++++++++++++++++------------
 app/components/StreamItem.tsx |  45 +++++++
 app/constants.ts              |   6 +
 app/svg/ArrowSvg.tsx          |   8 +-
 app/types.ts                  |  17 +--
 app/utils.tsx                 |  65 +---------
 10 files changed, 302 insertions(+), 322 deletions(-)
 create mode 100644 app/components/StreamItem.tsx

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index 826efbb..0b7a021 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -1,112 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import useChat from '../hooks/useChat';
-import type {
-  ActionEntry,
-  AgentMessage,
-  Language,
-  StreamEntry,
-} from '../types';
+import type { Language } from '../types';
 import AgentProfile from './AgentProfile';
 import AgentStats from './AgentStats';
-import ChatInput from './ChatInput';
 import Footer from './Footer';
 import Navbar from './Navbar';
 import Stream from './Stream';
 
 export default function Agent() {
-  const [streamEntries, setStreamEntries] = useState<StreamEntry[]>([]);
-  const [userInput, setUserInput] = useState('');
-  const [isThinking, setIsThinking] = useState(true);
-  const [loadingDots, setLoadingDots] = useState('');
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [currentLanguage, setCurrentLanguage] = useState<Language>('en');
-  const [isLiveDotVisible, setIsLiveDotVisible] = useState(true);
-  const [isChatMode, setIsChatMode] = useState(false);
-
-  const handleSuccess = useCallback((messages: AgentMessage[]) => {
-    const message = messages.find((res) => res.event === 'agent');
-    const streamEntry = {
-      timestamp: new Date(),
-      content: message?.data || '',
-    };
-    setIsThinking(false);
-    setStreamEntries((prev) => [...prev, streamEntry]);
-    setTimeout(() => {
-      setIsThinking(true);
-    }, 800);
-  }, []);
-
-  const { postChat, isLoading } = useChat({ onSuccess: handleSuccess });
-
-  // enables live stream of agent thoughts
-  useEffect(() => {
-    const streamInterval = setInterval(() => {
-      if (!isLoading && !isChatMode) {
-        postChat('same a one liner that is inspiring');
-      }
-    }, 1500);
-
-    return () => {
-      clearInterval(streamInterval);
-    };
-  }, [isLoading, postChat, isChatMode]);
-
-  // enables dot animation for "agent is thinking..."
-  useEffect(() => {
-    const dotsInterval = setInterval(() => {
-      setLoadingDots((prev) => (prev.length >= 3 ? '' : `${prev}.`));
-    }, 500);
-
-    return () => clearInterval(dotsInterval);
-  }, []);
-
-  // enables glowing live on sepolia dot
-  useEffect(() => {
-    const dotInterval = setInterval(() => {
-      setIsLiveDotVisible((prev) => !prev);
-    }, 1000);
-
-    return () => clearInterval(dotInterval);
-  }, []);
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!userInput.trim()) {
-        return;
-      }
-
-      // disable live stream
-      setIsChatMode(true);
-      setUserInput('');
-
-      const userMessage: ActionEntry = {
-        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 handleLanguageChange = useCallback((lang: Language) => {
     setCurrentLanguage(lang);
-    setStreamEntries([]);
   }, []);
 
   return (
@@ -114,7 +20,6 @@ export default function Agent() {
       <Navbar
         isMobileMenuOpen={isMobileMenuOpen}
         setIsMobileMenuOpen={setIsMobileMenuOpen}
-        isLiveDotVisible={isLiveDotVisible}
         setCurrentLanguage={handleLanguageChange}
         currentLanguage={currentLanguage}
       />
@@ -122,27 +27,15 @@ export default function Agent() {
       <div className="relative flex flex-grow overflow-hidden">
         <div
           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 `}
+          ${
+            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 `}
         >
           <AgentProfile currentLanguage={currentLanguage} />
           <AgentStats currentLanguage={currentLanguage} />
         </div>
 
-        <div className="flex w-full flex-grow flex-col lg:w-2/3">
-          <Stream
-            currentLanguage={currentLanguage}
-            streamEntries={streamEntries}
-            isThinking={isThinking && !isChatMode}
-            loadingDots={loadingDots}
-          />
-          <ChatInput
-            currentLanguage={currentLanguage}
-            userInput={userInput}
-            handleKeyPress={handleKeyPress}
-            handleSubmit={handleSubmit}
-            setUserInput={setUserInput}
-          />
-        </div>
+        <Stream currentLanguage={currentLanguage} />
       </div>
       <Footer />
     </div>
diff --git a/app/components/AgentStats.tsx b/app/components/AgentStats.tsx
index 571b6da..e7f271d 100644
--- a/app/components/AgentStats.tsx
+++ b/app/components/AgentStats.tsx
@@ -1,19 +1,28 @@
-import { useBalance } from 'wagmi';
+import { useBalance, useTransactionCount } from 'wagmi';
 import { AGENT_WALLET_ADDRESS, notoSansThai } from '../constants';
 import { translations } from '../translations';
 import type { Language } from '../types';
 
-type AgentStats = {
+type AgentStatsItemProps = {
   currentLanguage: Language;
+  label: string;
+  value: string | number;
 };
 
-const dummyStats = {
-  earned: 10000,
-  spent: 4000,
-  nftsOwned: 3,
-  tokensOwned: 0,
-  transactions: 0,
-  thoughts: 900,
+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) {
@@ -21,6 +30,12 @@ export default function AgentStats({ currentLanguage }: AgentStats) {
     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">
@@ -29,36 +44,31 @@ export default function AgentStats({ currentLanguage }: AgentStats) {
         </span>
         {/* TODO: update with actual data */}
         <ul className="space-y-1 pt-4">
-          <li
-            className={currentLanguage === 'th' ? notoSansThai.className : ''}
-          >
-            {translations[currentLanguage].profile.stats.earned}: $
-            {dummyStats.earned.toFixed(2)}
-          </li>
-          <li
-            className={currentLanguage === 'th' ? notoSansThai.className : ''}
-          >
-            {translations[currentLanguage].profile.stats.spent}: $
-            {dummyStats.spent.toFixed(2)}
-          </li>
-          <li
-            className={currentLanguage === 'th' ? notoSansThai.className : ''}
-          >
-            {translations[currentLanguage].profile.stats.nfts}:{' '}
-            {dummyStats.nftsOwned}
-          </li>
-          <li
-            className={currentLanguage === 'th' ? notoSansThai.className : ''}
-          >
-            {translations[currentLanguage].profile.stats.tokens}:{' '}
-            {dummyStats.tokensOwned}
-          </li>
-          <li
-            className={currentLanguage === 'th' ? notoSansThai.className : ''}
-          >
-            {translations[currentLanguage].profile.stats.transactions}:{' '}
-            {dummyStats.transactions}
-          </li>
+          <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/ChatInput.tsx b/app/components/ChatInput.tsx
index 7c46c39..961ca80 100644
--- a/app/components/ChatInput.tsx
+++ b/app/components/ChatInput.tsx
@@ -19,7 +19,7 @@ function PremadeChatInput({
     <button
       type="submit"
       onClick={() => setUserInput(text)}
-      className={`whitespace-nowrap rounded-sm border border-[#5788FA]/50 px-2 py-1 text-[#5788FA] transition-colors hover:bg-zinc-900 hover:text-[#3D7BFF] ${
+      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 ${
         currentLanguage === 'th' ? notoSansThai.className : ''
       }`}
     >
@@ -54,21 +54,34 @@ export default function ChatInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-2 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"
     >
-      <div className="flex flex-col">
-        <textarea
-          value={userInput}
-          onChange={handleInputChange}
-          onKeyPress={handleKeyPress}
-          className={`h-24 w-full bg-black p-4 pr-10 text-[#5788FA] placeholder-[#5788FA] placeholder-opacity-50 lg:h-36 ${
-            currentLanguage === 'th' ? notoSansThai.className : ''
-          }`}
-          placeholder={translations[currentLanguage].chat.placeholder}
-          rows={1}
-        />
-        <div className="flex w-full items-center justify-between px-2 pt-4">
-          <div className="ml-2 flex space-x-2 overflow-x-auto text-xs lg:text-sm">
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2">
+          <textarea
+            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 ${
+              currentLanguage === 'th' ? notoSansThai.className : ''
+            }`}
+            placeholder={translations[currentLanguage].chat.placeholder}
+            rows={1}
+          />
+          <button
+            type="submit"
+            disabled={!/[a-zA-Z]/.test(userInput)}
+            className={`mt-auto rounded-sm p-1.5 transition-colors xl:hidden ${
+              /[a-zA-Z]/.test(userInput)
+                ? 'bg-[#5788FA] text-zinc-950 hover:bg-[#3D7BFF]'
+                : 'cursor-not-allowed bg-[#5788FA] text-zinc-950 opacity-50'
+            }`}
+          >
+            <SendSvg />
+          </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">
             <PremadeChatInput
               setUserInput={setUserInput}
               currentLanguage={currentLanguage}
@@ -88,7 +101,7 @@ export default function ChatInput({
           <button
             type="submit"
             disabled={!/[a-zA-Z]/.test(userInput)}
-            className={`rounded-sm p-1.5 transition-colors ${
+            className={`rounded-sm p-1.5 transition-colors max-xl:hidden ${
               /[a-zA-Z]/.test(userInput)
                 ? '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 c28df2c..065f048 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { notoSansThai } from '../constants';
 import { translations } from '../translations';
 import type { Language } from '../types';
@@ -6,7 +6,6 @@ import LanguageSelector from './LanguageSelector';
 
 type NavbarProps = {
   setIsMobileMenuOpen: (isOpen: boolean) => void;
-  isLiveDotVisible: boolean;
   isMobileMenuOpen: boolean;
   setCurrentLanguage: (language: Language) => void;
   currentLanguage: Language;
@@ -15,10 +14,20 @@ type NavbarProps = {
 export default function Navbar({
   setIsMobileMenuOpen,
   isMobileMenuOpen,
-  isLiveDotVisible,
   setCurrentLanguage,
   currentLanguage,
 }: NavbarProps) {
+  const [isLiveDotVisible, setIsLiveDotVisible] = useState(true);
+
+  // enables glowing live on sepolia dot
+  useEffect(() => {
+    const dotInterval = setInterval(() => {
+      setIsLiveDotVisible((prev) => !prev);
+    }, 1000);
+
+    return () => clearInterval(dotInterval);
+  }, []);
+
   const handleClick = useCallback(() => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
   }, [isMobileMenuOpen, setIsMobileMenuOpen]);
diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
index a69f8a5..7c33ae5 100644
--- a/app/components/Stream.tsx
+++ b/app/components/Stream.tsx
@@ -1,96 +1,156 @@
-import { useEffect, useRef } from 'react';
-import { notoSansThai } from '../constants';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { DEFAULT_PROMPT, notoSansThai } from '../constants';
+import useChat from '../hooks/useChat';
 import { translations } from '../translations';
-import type { Language, StreamEntry } from '../types';
-import { getActionIcon } from '../utils';
-import TimeDisplay from './TimeDisplay';
+import type { AgentMessage, Language, StreamEntry } from '../types';
+import ChatInput from './ChatInput';
+import StreamItem from './StreamItem';
 
-type StreamEntryItemProps = {
-  entry: StreamEntry;
+type StreamProps = {
   currentLanguage: Language;
 };
 
-function StreamEntryItem({ entry, currentLanguage }: StreamEntryItemProps) {
-  if (entry.type) {
-    return (
-      <div className="mb-2">
-        <TimeDisplay timestamp={entry.timestamp} />
-        <div
-          className={`flex items-center space-x-2 text-[#5788FA] ${
-            currentLanguage === 'th' ? notoSansThai.className : ''
-          }`}
-        >
-          {getActionIcon(entry.type)}
-          <span>{entry.content}</span>
-        </div>
-      </div>
+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
+  const handleSuccess = useCallback((messages: AgentMessage[]) => {
+    // const message = messages.find((res) => res.event === "agent");
+    const filteredMessages = messages.filter(
+      (msg) => msg.event !== 'completed',
     );
-  }
-  return (
-    <div className="mb-2">
-      <TimeDisplay timestamp={entry.timestamp} />
-      <div
-        className={`text-gray-300 ${
-          currentLanguage === 'th' ? notoSansThai.className : ''
-        }`}
-      >
-        {entry.content}
-      </div>
-    </div>
-  );
-}
+    const streams = filteredMessages.map((msg) => {
+      return {
+        timestamp: new Date(),
+        content: msg?.data || '',
+        type: msg?.event,
+      };
+    });
+    // const streamEntry = {
+    //   timestamp: new Date(),
+    //   content: message?.data || "",
+    // };
+    setIsThinking(false);
+    setStreamEntries((prev) => [...prev, ...streams]);
+    setTimeout(() => {
+      setIsThinking(true);
+    }, 800);
+  }, []);
 
-type StreamProps = {
-  currentLanguage: Language;
-  streamEntries: StreamEntry[];
-  isThinking: boolean;
-  loadingDots: string;
-};
+  const { postChat, isLoading } = useChat({ onSuccess: handleSuccess });
 
-export default function Stream({
-  currentLanguage,
-  streamEntries,
-  isThinking,
-  loadingDots,
-}: StreamProps) {
-  const bottomRef = useRef<HTMLDivElement>(null);
+  // enables live stream of agent thoughts
+  useEffect(() => {
+    const streamInterval = setInterval(() => {
+      if (!isLoading && !isChatMode) {
+        postChat(DEFAULT_PROMPT);
+      }
+    }, 1500);
 
+    return () => {
+      clearInterval(streamInterval);
+    };
+  }, [isLoading, postChat, isChatMode]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Dependency is required
+  useEffect(() => {
+    // reset entries on language change
+    setStreamEntries([]);
+  }, [currentLanguage]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Dependency is required
   useEffect(() => {
-    // Scrolls to the bottom of the chat when messages change
+    // scrolls to the bottom of the chat when messages change
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [streamEntries]);
+
+  useEffect(() => {
+    const dotsInterval = setInterval(() => {
+      setLoadingDots((prev) => (prev.length >= 3 ? '' : `${prev}.`));
+    }, 500);
+
+    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],
+  );
+
   return (
-    <div className="flex-grow overflow-y-auto p-4 pb-20">
-      <p
-        className={`text-zinc-500 ${
-          currentLanguage === 'th' ? notoSansThai.className : ''
-        }`}
-      >
-        {translations[currentLanguage].stream.realTime}
-      </p>
-      <div className="mt-4 space-y-2" role="log" aria-live="polite">
-        {streamEntries.map((entry, index) => (
-          <StreamEntryItem
-            key={`${entry.timestamp.toDateString()}-${index}`}
-            entry={entry}
-            currentLanguage={currentLanguage}
-          />
-        ))}
-      </div>
-      {isThinking && (
-        <div className="mt-4 flex items-center text-[#5788FA] opacity-70">
-          <span
-            className={`font-mono ${
-              currentLanguage === 'th' ? notoSansThai.className : ''
-            }`}
-          >
-            {translations[currentLanguage].stream.thinking}
-            {loadingDots}
-          </span>
+    <div className="flex w-full flex-grow flex-col lg:w-2/3">
+      <div className="flex-grow overflow-y-auto p-4 pb-20">
+        <p
+          className={`text-zinc-500 ${
+            currentLanguage === 'th' ? notoSansThai.className : ''
+          }`}
+        >
+          {translations[currentLanguage].stream.realTime}
+        </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} />
+        {isThinking && !isChatMode && (
+          <div className="mt-4 flex items-center text-[#5788FA] opacity-70">
+            <span
+              className={`font-mono ${
+                currentLanguage === 'th' ? notoSansThai.className : ''
+              }`}
+            >
+              {translations[currentLanguage].stream.thinking}
+              {loadingDots}
+            </span>
+          </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/StreamItem.tsx b/app/components/StreamItem.tsx
new file mode 100644
index 0000000..cabd1b3
--- /dev/null
+++ b/app/components/StreamItem.tsx
@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { notoSansThai } from '../constants';
+import type { Language, StreamEntry } from '../types';
+import { getActionIcon } from '../utils';
+import TimeDisplay from './TimeDisplay';
+
+type StreamItemProps = {
+  entry: StreamEntry;
+  currentLanguage: Language;
+};
+
+export default function StreamItem({
+  entry,
+  currentLanguage,
+}: StreamItemProps) {
+  const className = useMemo(() => {
+    let baseClass = 'flex items-center space-x-2';
+
+    if (entry?.type && ['tools', 'user'].includes(entry?.type)) {
+      baseClass += ' text-[#5788FA]';
+    } else {
+      baseClass += ' text-gray-300';
+    }
+
+    if (currentLanguage === 'th') {
+      baseClass += ` ${notoSansThai.className}`;
+    }
+
+    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>
+      </div>
+    </div>
+  );
+}
diff --git a/app/constants.ts b/app/constants.ts
index 51b8943..e262887 100644
--- a/app/constants.ts
+++ b/app/constants.ts
@@ -9,3 +9,9 @@ export const AGENT_WALLET_ADDRESS =
   '0x3C9df7A3aa2565F6C891758638FDEeC36fd7D29a';
 
 export const AGENT_NAME = 'Based Agent';
+
+export const DEFAULT_PROMPT =
+  'Be creative and same something interesting about the blockchain and your abilities';
+
+// 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.';
diff --git a/app/svg/ArrowSvg.tsx b/app/svg/ArrowSvg.tsx
index d278242..359d7c4 100644
--- a/app/svg/ArrowSvg.tsx
+++ b/app/svg/ArrowSvg.tsx
@@ -1,4 +1,8 @@
-export default function ArrowSvg() {
+type ArrowSvgProps = {
+  className: string;
+};
+
+export default function ArrowSvg({ className }: ArrowSvgProps) {
   return (
     <svg
       width="14"
@@ -6,7 +10,7 @@ export default function ArrowSvg() {
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="pb-1"
+      className={className}
     >
       <title>Arrow SVG</title>
       <path
diff --git a/app/types.ts b/app/types.ts
index 154917f..0cea67d 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -1,12 +1,6 @@
 export type Language = 'en' | 'th' | 'zh';
 
-export type ThoughtEntry = {
-  timestamp: Date;
-  type?: undefined;
-  content: string;
-};
-
-export type ActionEntry = {
+export type StreamEntry = {
   timestamp: Date;
   type:
     | 'create_wallet'
@@ -15,12 +9,13 @@ export type ActionEntry = {
     | 'swap_token'
     | 'transfer_token'
     | 'transfer_nft'
-    | 'user';
+    | 'user'
+    | 'tools'
+    | 'agent'
+    | 'completed';
   content: string;
 };
 
-export type StreamEntry = ThoughtEntry | ActionEntry;
-
 export type AnimatedData = {
   earned: number;
   spent: number;
@@ -32,5 +27,5 @@ export type AnimatedData = {
 
 export type AgentMessage = {
   data?: string;
-  event?: string;
+  event: 'agent' | 'tools' | 'completed';
 };
diff --git a/app/utils.tsx b/app/utils.tsx
index f364aa9..c25926d 100644
--- a/app/utils.tsx
+++ b/app/utils.tsx
@@ -1,13 +1,12 @@
+import ArrowSvg from './svg/ArrowSvg';
 import NftSvg from './svg/NftSvg';
 import RequestSvg from './svg/RequestSvg';
-import SendSvg from './svg/SendSvg';
 import SwapSvg from './svg/SwapSvg';
 import TokenSvg from './svg/TokenSvg';
 import WalletSvg from './svg/WalletSvg';
-import { translations } from './translations';
-import type { ActionEntry, Language, ThoughtEntry } from './types';
+import type { StreamEntry } from './types';
 
-export const getActionIcon = (type: ActionEntry['type']) => {
+export const getActionIcon = (type: StreamEntry['type']) => {
   switch (type) {
     case 'create_wallet':
       return <WalletSvg />;
@@ -17,67 +16,13 @@ export const getActionIcon = (type: ActionEntry['type']) => {
       return <WalletSvg />;
     case 'swap_token':
       return <SwapSvg />;
-    case 'transfer_token':
+    case 'tools':
       return <TokenSvg />;
     case 'transfer_nft':
       return <NftSvg />;
     case 'user':
-      return <SendSvg />;
+      return <ArrowSvg className="-rotate-45 w-3 w-3" />;
     default:
       return null;
   }
 };
-
-export const generateRandomThought = (
-  currentLanguage: Language,
-): ThoughtEntry => {
-  const thoughts = [
-    translations[currentLanguage].thoughts.analyzing,
-    translations[currentLanguage].thoughts.processing,
-    translations[currentLanguage].thoughts.optimizing,
-    translations[currentLanguage].thoughts.generating,
-    translations[currentLanguage].thoughts.evaluating,
-    translations[currentLanguage].thoughts.simulating,
-  ];
-  return {
-    timestamp: new Date(),
-    content: thoughts[Math.floor(Math.random() * thoughts.length)],
-  };
-};
-
-export const generateRandomAction = (
-  currentLanguage: Language,
-): ActionEntry => {
-  const actions = [
-    {
-      type: 'create_wallet' as const,
-      content: `${translations[currentLanguage].actions.createWallet} 0x453b...3432`,
-    },
-    {
-      type: 'request_faucet_funds' as const,
-      content: translations[currentLanguage].actions.requestFunds,
-    },
-    {
-      type: 'get_balance' as const,
-      content: `0x4534...d342${translations[currentLanguage].actions.getBalance} 1003.45 USDC`,
-    },
-    {
-      type: 'transfer_token' as const,
-      content: `${translations[currentLanguage].actions.transferToken} 100 USDC ${translations[currentLanguage].actions.to} 0x1234...5678`,
-    },
-    {
-      type: 'transfer_nft' as const,
-      content: `${translations[currentLanguage].actions.transferNft} #1234 ${translations[currentLanguage].actions.to} 0x5678...9012`,
-    },
-    {
-      type: 'swap_token' as const,
-      content: `${translations[currentLanguage].actions.swapToken} 10 ETH ${translations[currentLanguage].actions.to} 15000 USDC`,
-    },
-  ];
-  const randomAction = actions[Math.floor(Math.random() * actions.length)];
-  return {
-    timestamp: new Date(),
-    type: randomAction.type,
-    content: randomAction.content,
-  };
-};