tackling more morpheus action items

MorpheusAIs · Dec 11, 2024 · d611dc0 · d611dc0
1 parent ec40063
commit d611dc0
Show file tree

Hide file tree

Showing 18 changed files with 112 additions and 86 deletions.
diff --git a/submodules/moragents_dockers/agents/src/stores/chat_manager.py b/submodules/moragents_dockers/agents/src/stores/chat_manager.py
@@ -10,6 +10,7 @@ def __init__(self):
         self.messages: List[Dict[str, str]] = [
             {
                 "role": "assistant",
+                "agentName": "Morpheus AI",
                 "content": """This highly experimental chatbot is not intended for making important decisions,
                             and its responses are generated based on incomplete data and algorithms that may evolve rapidly.
                             By using this chatbot, you acknowledge that you use it at your own discretion

diff --git a/submodules/moragents_dockers/frontend/components/Chat/index.tsx b/submodules/moragents_dockers/frontend/components/Chat/index.tsx
@@ -13,7 +13,6 @@ export const Chat: FC<ChatProps> = ({
   onSubmitMessage,
   onCancelSwap,
   messages,
-  selectedAgent,
   onBackendError,
 }) => {
   const [messagesData, setMessagesData] = useState<ChatMessage[]>(messages);
@@ -75,12 +74,11 @@ export const Chat: FC<ChatProps> = ({
       >
         <MessageList
           messages={messagesData}
-          selectedAgent={selectedAgent}
           onCancelSwap={onCancelSwap}
           onSwapSubmit={handleSwapSubmit}
           onClaimSubmit={handleClaimSubmit}
         />
-        {showSpinner && <LoadingIndicator selectedAgent={selectedAgent} />}
+        {showSpinner && <LoadingIndicator />}
         <ChatInput
           onSubmit={handleSubmit}
           hasMessages={messagesData.length > 1}

diff --git a/submodules/moragents_dockers/frontend/components/Chat/types.ts b/submodules/moragents_dockers/frontend/components/Chat/types.ts
@@ -4,7 +4,6 @@ export type ChatProps = {
   onSubmitMessage: (message: string, file: File | null) => Promise<boolean>;
   onCancelSwap: (fromAction: number) => void;
   messages: ChatMessage[];
-  selectedAgent: string;
   onBackendError: () => void;
 };
 

diff --git a/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx b/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx
@@ -11,10 +11,10 @@ import {
   LineChart,
   Flame,
   Globe2,
-  Zap,
   ArrowLeftRight,
   Gift,
 } from "lucide-react";
+import { AGENT_TYPES } from "@/services/constants";
 import styles from "./PrefilledOptions.module.css";
 
 type PrefilledOption = {
@@ -32,15 +32,15 @@ type PrefilledOptionsProps = {
 };
 
 const prefilledOptionsMap: Record<string, PrefilledOption> = {
-  default: {
+  [AGENT_TYPES.DEFAULT]: {
     title: "Default Agent 🔄",
     icon: <Globe2 size={20} />,
     examples: [
       { text: "Who is Elon Musk?", agent: "default" },
       { text: "What Morpheus agents are currently active?", agent: "default" },
     ],
   },
-  imagen: {
+  [AGENT_TYPES.IMAGEN]: {
     title: "Generate Images 🎨",
     icon: <Sparkles size={20} />,
     examples: [
@@ -51,7 +51,7 @@ const prefilledOptionsMap: Record<string, PrefilledOption> = {
       },
     ],
   },
-  rag: {
+  [AGENT_TYPES.RAG]: {
     title: "Document Analysis 📄",
     icon: <FileText size={20} />,
     examples: [
@@ -62,7 +62,7 @@ const prefilledOptionsMap: Record<string, PrefilledOption> = {
       },
     ],
   },
-  "crypto data": {
+  [AGENT_TYPES.CRYPTO_DATA]: {
     title: "Crypto Market Data 📊",
     icon: <LineChart size={20} />,
     examples: [
@@ -71,15 +71,15 @@ const prefilledOptionsMap: Record<string, PrefilledOption> = {
       { text: "What's the FDV of USDC?", agent: "crypto" },
     ],
   },
-  "token swap": {
+  [AGENT_TYPES.TOKEN_SWAP]: {
     title: "Token Swaps 💱",
     icon: <ArrowLeftRight size={20} />,
     examples: [
       { text: "Swap ETH for USDC", agent: "swap" },
       { text: "Exchange my BTC for ETH", agent: "swap" },
     ],
   },
-  "tweet sizzler": {
+  [AGENT_TYPES.TWEET_SIZZLER]: {
     title: "Tweet Generator 🔥",
     icon: <Flame size={20} />,
     examples: [
@@ -90,39 +90,39 @@ const prefilledOptionsMap: Record<string, PrefilledOption> = {
       },
     ],
   },
-  dca: {
+  [AGENT_TYPES.DCA]: {
     title: "DCA Strategy Planning 💰",
     icon: <DollarSign size={20} />,
     examples: [
       { text: "Set up a weekly DCA plan for ETH", agent: "dca" },
       { text: "Help me create a monthly BTC buying strategy", agent: "dca" },
     ],
   },
-  base: {
+  [AGENT_TYPES.BASE]: {
     title: "Base Transactions 🔄",
     icon: <Send size={20} />,
     examples: [
       { text: "Send USDC on Base", agent: "base" },
       { text: "Swap USDC for ETH on Base", agent: "base" },
     ],
   },
-  "mor claims": {
+  [AGENT_TYPES.MOR_CLAIMS]: {
     title: "MOR Claims 🎁",
     icon: <Gift size={20} />,
     examples: [
       { text: "Claim my MOR rewards", agent: "claims" },
       { text: "Help me claim my pending MOR tokens", agent: "claims" },
     ],
   },
-  "mor rewards": {
+  [AGENT_TYPES.MOR_REWARDS]: {
     title: "MOR Rewards Tracking 🏆",
     icon: <Trophy size={20} />,
     examples: [
       { text: "Show my MOR rewards balance", agent: "rewards" },
       { text: "Calculate my pending MOR rewards", agent: "rewards" },
     ],
   },
-  "realtime search": {
+  [AGENT_TYPES.REALTIME_SEARCH]: {
     title: "Real-Time Search 🔍",
     icon: <Search size={20} />,
     examples: [
@@ -133,7 +133,7 @@ const prefilledOptionsMap: Record<string, PrefilledOption> = {
       { text: "What did Donald Trump say about Bitcoin?", agent: "realtime" },
     ],
   },
-  "crypto news": {
+  [AGENT_TYPES.CRYPTO_NEWS]: {
     title: "Crypto News Analysis 📰",
     icon: <Newspaper size={20} />,
     examples: [

diff --git a/submodules/moragents_dockers/frontend/components/ChatInput/index.module.css b/submodules/moragents_dockers/frontend/components/ChatInput/index.module.css
@@ -1,15 +1,15 @@
 .container {
   position: relative;
   width: 100%;
-  background-color: black;
+  background-color: transparent;
   margin-bottom: 2rem;
 }
 
 .flexContainer {
   margin-top: 1rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
-  background-color: black;
+  background-color: transparent;
   width: 100%;
 }
 

diff --git a/submodules/moragents_dockers/frontend/components/ClaimForm/ClaimForm.tsx b/submodules/moragents_dockers/frontend/components/ClaimForm/ClaimForm.tsx
@@ -6,14 +6,12 @@ import { parseEther } from "viem";
 
 type ClaimFormProps = {
   isActive: boolean;
-  selectedAgent: string;
   fromMessage: ClaimMessagePayload;
   onSubmitClaim: (claimTx: any) => void;
 };
 
 export const ClaimForm: FC<ClaimFormProps> = ({
   isActive,
-  selectedAgent,
   fromMessage,
   onSubmitClaim,
 }) => {

diff --git a/submodules/moragents_dockers/frontend/components/ClaimMessage/ClaimMessage.tsx b/submodules/moragents_dockers/frontend/components/ClaimMessage/ClaimMessage.tsx
@@ -4,14 +4,12 @@ import { ClaimMessagePayload } from "@/services/types";
 
 type ClaimMessageProps = {
   isActive: boolean;
-  selectedAgent: string;
   fromMessage: ClaimMessagePayload;
   onSubmitClaim: (claimTx: any) => void;
 };
 
 export const ClaimMessage: FC<ClaimMessageProps> = ({
   isActive,
-  selectedAgent,
   fromMessage,
   onSubmitClaim,
 }) => {
@@ -23,7 +21,6 @@ export const ClaimMessage: FC<ClaimMessageProps> = ({
   return (
     <ClaimForm
       isActive={isActive}
-      selectedAgent={selectedAgent}
       fromMessage={fromMessage}
       onSubmitClaim={onSubmitClaim}
     />

diff --git a/submodules/moragents_dockers/frontend/components/HeaderBar/index.tsx b/submodules/moragents_dockers/frontend/components/HeaderBar/index.tsx
@@ -1,6 +1,6 @@
-import React, { FC, ComponentPropsWithoutRef } from "react";
+import React, { FC, useState } from "react";
 import Image from "next/image";
-import { Box, HStack, Spacer, Button } from "@chakra-ui/react";
+import { Box, HStack, Spacer, Button, ButtonGroup } from "@chakra-ui/react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { SettingsButton } from "@/components/Settings";
 import { CDPWallets } from "./CDPWallets";
@@ -10,14 +10,10 @@ import { clearMessagesHistory } from "@/services/apiHooks";
 import { getHttpClient } from "@/services/constants";
 import { useRouter } from "next/router";
 
-export interface HeaderBarProps extends ComponentPropsWithoutRef<"div"> {
-  onAgentChanged(agent: string): void;
-  currentAgent: string;
-}
-
-export const HeaderBar: FC<HeaderBarProps> = (props) => {
+export const HeaderBar: FC = () => {
   const backendClient = getHttpClient();
   const router = useRouter();
+  const [walletType, setWalletType] = useState<"cdp" | "metamask">("cdp");
 
   const handleClearChatHistory = async () => {
     try {
@@ -27,7 +23,6 @@ export const HeaderBar: FC<HeaderBarProps> = (props) => {
       console.error("Failed to clear chat history:", error);
     }
   };
-
   return (
     <Box className={classes.headerBar}>
       <HStack spacing={4} width="100%" px={4}>
@@ -37,14 +32,42 @@ export const HeaderBar: FC<HeaderBarProps> = (props) => {
         <Spacer />
         <HStack spacing={4} flexShrink={0}>
           <Button onClick={handleClearChatHistory}>Clear Chat History</Button>
-          <CDPWallets />
           <Workflows />
-          <Box>
-            <SettingsButton />
-          </Box>
-          <Box>
-            <ConnectButton />
-          </Box>
+          <SettingsButton />
+          {walletType === "cdp" ? <CDPWallets /> : <ConnectButton />}
+
+          {/* Wallet Selection */}
+          <ButtonGroup isAttached>
+            <Button
+              onClick={() => setWalletType("cdp")}
+              variant={walletType === "cdp" ? "greenCustom" : "ghost"}
+              color={walletType === "cdp" ? "black" : "white"}
+              sx={{
+                "&:hover": {
+                  transform: "none",
+                  backgroundColor: "#90EE90",
+                },
+                backgroundColor: walletType === "cdp" ? undefined : "gray.700",
+              }}
+            >
+              CDP Managed Wallets
+            </Button>
+            <Button
+              onClick={() => setWalletType("metamask")}
+              variant={walletType === "metamask" ? "greenCustom" : "ghost"}
+              color={walletType === "metamask" ? "black" : "white"}
+              sx={{
+                "&:hover": {
+                  transform: "none",
+                  backgroundColor: "#90EE90",
+                },
+                backgroundColor:
+                  walletType === "metamask" ? undefined : "gray.700",
+              }}
+            >
+              Metamask
+            </Button>
+          </ButtonGroup>
         </HStack>
       </HStack>
     </Box>

diff --git a/submodules/moragents_dockers/frontend/components/LoadingIndicator/index.tsx b/submodules/moragents_dockers/frontend/components/LoadingIndicator/index.tsx
@@ -12,7 +12,7 @@ type LoadingIndicatorProps = {
 export const LoadingIndicator: FC<LoadingIndicatorProps> = ({
   selectedAgent,
 }) => {
-  const agentName = availableAgents[selectedAgent]?.name || "Undefined Agent";
+  const agentName = availableAgents[selectedAgent]?.name || "Finding an agent";
 
   return (
     <Grid

diff --git a/submodules/moragents_dockers/frontend/components/MessageItem/index.tsx b/submodules/moragents_dockers/frontend/components/MessageItem/index.tsx
@@ -9,16 +9,16 @@ import {
   CryptoDataMessageContent,
   BaseMessageContent,
 } from "@/services/types";
+import { getHumanReadableAgentName } from "@/services/utils";
 import { Avatar } from "@/components/Avatar";
-import { availableAgents } from "@/config";
 import { SwapMessage } from "@/components/SwapMessage";
 import { ClaimMessage } from "@/components/ClaimMessage/ClaimMessage";
 import { Tweet } from "@/components/Tweet";
+
 import styles from "./index.module.css";
 
 type MessageItemProps = {
   message: ChatMessage;
-  selectedAgent: string;
   onCancelSwap: (fromAction: number) => void;
   onSwapSubmit: (swapTx: any) => void;
   onClaimSubmit: (claimTx: any) => void;
@@ -28,21 +28,19 @@ type MessageItemProps = {
 
 export const MessageItem: FC<MessageItemProps> = ({
   message,
-  selectedAgent,
   onCancelSwap,
   onSwapSubmit,
   onClaimSubmit,
   isLastSwapMessage,
   isLastClaimMessage,
 }) => {
-  const agentName = availableAgents[selectedAgent]?.name || "Undefined Agent";
   const isUser = message.role === "user";
   const { content } = message;
 
   const renderContent = () => {
     if (typeof content === "string") {
       if (message.agentName === "tweet sizzler") {
-        return <Tweet initialContent={content} selectedAgent={selectedAgent} />;
+        return <Tweet initialContent={content} />;
       }
       return (
         <ReactMarkdown className={styles.messageText}>{content}</ReactMarkdown>
@@ -81,7 +79,6 @@ export const MessageItem: FC<MessageItemProps> = ({
         <SwapMessage
           isActive={isLastSwapMessage}
           onCancelSwap={onCancelSwap}
-          selectedAgent={selectedAgent}
           fromMessage={content as SwapMessagePayload}
           onSubmitSwap={onSwapSubmit}
         />
@@ -92,7 +89,6 @@ export const MessageItem: FC<MessageItemProps> = ({
       return (
         <ClaimMessage
           isActive={isLastClaimMessage}
-          selectedAgent={selectedAgent}
           fromMessage={content as ClaimMessagePayload}
           onSubmitClaim={onClaimSubmit}
         />
@@ -111,10 +107,15 @@ export const MessageItem: FC<MessageItemProps> = ({
       className={styles.messageGrid}
     >
       <GridItem area="avatar">
-        <Avatar isAgent={!isUser} agentName={agentName} />
+        <Avatar
+          isAgent={!isUser}
+          agentName={getHumanReadableAgentName(message.agentName)}
+        />
       </GridItem>
       <GridItem area="name">
-        <Text className={styles.nameText}>{isUser ? "Me" : agentName}</Text>
+        <Text className={styles.nameText}>
+          {isUser ? "Me" : getHumanReadableAgentName(message.agentName)}
+        </Text>
       </GridItem>
       <GridItem area="message">{renderContent()}</GridItem>
     </Grid>