responsivity, fixing conversations, more styles

MorpheusAIs · Dec 14, 2024 · 2794f2c · 2794f2c
1 parent 48a0b7b
commit 2794f2c
Show file tree

Hide file tree

Showing 12 changed files with 275 additions and 215 deletions.
diff --git a/submodules/moragents_dockers/frontend/components/Chat/index.tsx b/submodules/moragents_dockers/frontend/components/Chat/index.tsx
@@ -2,18 +2,19 @@ import React, { FC, useEffect, useState } from "react";
 import { Flex, Box } from "@chakra-ui/react";
 import { ChatMessage } from "@/services/types";
 import { useTransactionConfirmations } from "wagmi";
-import { MessageList } from "../MessageList";
-import { ChatInput } from "../ChatInput";
-import { LoadingIndicator } from "../LoadingIndicator";
-import { Widgets, shouldOpenWidget } from "../Widgets";
-import { ChatProps } from "./types";
-import { useChat } from "./hooks";
+import { MessageList } from "@/components/MessageList";
+import { ChatInput } from "@/components/ChatInput";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
+import { Widgets, shouldOpenWidget } from "@/components/Widgets";
+import { ChatProps } from "@/components/Chat/types";
+import { useChat } from "@/components/Chat/hooks";
 
 export const Chat: FC<ChatProps> = ({
   onSubmitMessage,
   onCancelSwap,
   messages,
   onBackendError,
+  isSidebarOpen = false,
 }) => {
   const [messagesData, setMessagesData] = useState<ChatMessage[]>(messages);
   const [activeWidget, setActiveWidget] = useState<ChatMessage | null>(null);
@@ -86,6 +87,7 @@ export const Chat: FC<ChatProps> = ({
             showSpinner ||
             messagesData[messagesData.length - 1]?.role === "swap"
           }
+          isSidebarOpen={isSidebarOpen}
         />
       </Flex>
       <Box

diff --git a/submodules/moragents_dockers/frontend/components/Chat/types.ts b/submodules/moragents_dockers/frontend/components/Chat/types.ts
@@ -5,6 +5,7 @@ export type ChatProps = {
   onCancelSwap: (fromAction: number) => void;
   messages: ChatMessage[];
   onBackendError: () => void;
+  isSidebarOpen?: boolean;
 };
 
 export type SwapTransaction = {

diff --git a/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx b/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx
@@ -26,11 +26,6 @@ type PrefilledOption = {
   }>;
 };
 
-type PrefilledOptionsProps = {
-  onSelect: (message: string) => void;
-  isWidgetOpen?: boolean;
-};
-
 const prefilledOptionsMap: Record<string, PrefilledOption> = {
   [AGENT_TYPES.DEFAULT]: {
     title: "Default Agent 🔄",
@@ -143,13 +138,22 @@ const prefilledOptionsMap: Record<string, PrefilledOption> = {
   },
 };
 
-const PrefilledOptions: React.FC<PrefilledOptionsProps> = ({
+const PrefilledOptions = ({
   onSelect,
   isWidgetOpen = false,
+  isSidebarOpen = true,
+}: {
+  onSelect: (message: string) => void;
+  isWidgetOpen?: boolean;
+  isSidebarOpen?: boolean;
 }) => {
   const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
   const containerStyle = {
-    paddingLeft: isWidgetOpen ? "5%" : "20%",
+    paddingLeft: isWidgetOpen
+      ? "5%"
+      : isSidebarOpen
+      ? "calc(260px + 20%)" // Sidebar width first, then percentage
+      : "20%",
     paddingRight: isWidgetOpen ? "35%" : "20%",
   };
 

diff --git a/submodules/moragents_dockers/frontend/components/ChatInput/index.tsx b/submodules/moragents_dockers/frontend/components/ChatInput/index.tsx
@@ -24,12 +24,14 @@ type ChatInputProps = {
   onSubmit: (message: string, file: File | null) => Promise<void>;
   disabled: boolean;
   hasMessages?: boolean;
+  isSidebarOpen?: boolean;
 };
 
 export const ChatInput: FC<ChatInputProps> = ({
   onSubmit,
   disabled,
   hasMessages = false,
+  isSidebarOpen = false,
 }) => {
   const [message, setMessage] = useState("");
   const [file, setFile] = useState<File | null>(null);
@@ -194,7 +196,12 @@ export const ChatInput: FC<ChatInputProps> = ({
       )}
 
       <div className={styles.container}>
-        {!hasMessages && <PrefilledOptions onSelect={handlePrefilledSelect} />}
+        {!hasMessages && (
+          <PrefilledOptions
+            onSelect={handlePrefilledSelect}
+            isSidebarOpen={isSidebarOpen}
+          />
+        )}
         <div className={styles.flexContainer}>
           <InputGroup ref={inputGroupRef} className={styles.inputGroup}>
             {agentSupportsFileUploads && (

diff --git a/submodules/moragents_dockers/frontend/components/HeaderBar/CDPWallets.tsx b/submodules/moragents_dockers/frontend/components/HeaderBar/CDPWallets.tsx
@@ -69,6 +69,11 @@ export const CDPWallets: React.FC = () => {
   const [confirmWalletId, setConfirmWalletId] = useState("");
   const cancelRef = React.useRef<HTMLButtonElement>(null);
   const toast = useToast();
+  const {
+    isOpen: isMenuOpen,
+    onClose: closeMenu,
+    onOpen: openMenu,
+  } = useDisclosure();
 
   const fetchWallets = useCallback(async () => {
     try {
@@ -327,13 +332,21 @@ export const CDPWallets: React.FC = () => {
 
   return (
     <>
-      <Menu>
+      <Menu isOpen={isMenuOpen} onClose={closeMenu} onOpen={openMenu}>
         <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
           CDP Wallets
         </MenuButton>
         <MenuList minWidth="300px">
           <Box p={4}>
-            <Button colorScheme="green" size="sm" width="full" onClick={onOpen}>
+            <Button
+              colorScheme="green"
+              size="sm"
+              width="full"
+              onClick={() => {
+                closeMenu();
+                onOpen();
+              }}
+            >
               Create New Wallet
             </Button>
           </Box>

diff --git a/submodules/moragents_dockers/frontend/components/LeftSidebar/index.module.css b/submodules/moragents_dockers/frontend/components/LeftSidebar/index.module.css
@@ -0,0 +1,118 @@
+.sidebar {
+  background: #0d0d0d;
+  height: calc(100vh);
+  position: relative;
+  transition: all 0.2s ease;
+  border-right: 1px solid #262626;
+}
+
+.sidebarExpanded {
+  width: 260px;
+}
+
+.sidebarCollapsed {
+  width: 0;
+}
+
+.toggleButton {
+  position: fixed;
+  left: 10px;
+  top: 65px; /* Position below header */
+  z-index: 100;
+  background-color: transparent;
+  color: #808080;
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.toggleButton:hover {
+  background-color: #262626;
+  color: white;
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 48px 8px 8px 8px;
+  overflow: hidden;
+}
+
+.newChatButton {
+  width: 100%;
+  background-color: transparent;
+  color: #808080;
+  border: 1px solid #262626;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.newChatButton:hover {
+  background-color: #262626;
+  color: white;
+}
+
+.conversationItem {
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #808080;
+  min-height: 40px;
+}
+
+.conversationItem:hover {
+  background-color: #262626;
+  color: white;
+}
+
+.conversationActive {
+  background-color: #262626;
+  color: white;
+}
+
+.conversationName {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.deleteButton {
+  opacity: 0;
+  background-color: transparent;
+  color: #808080;
+  border: none;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.conversationItem:hover .deleteButton {
+  opacity: 1;
+}
+
+.deleteButton:hover {
+  background-color: #404040;
+  color: white;
+}