From 073ace3271fa55911916760e173e09fc98ff417e Mon Sep 17 00:00:00 2001
From: brucedonovan <bruce.donovan@gmail.com>
Date: Fri, 4 Aug 2023 13:26:01 +0100
Subject: [PATCH 1/5] Connect Button styling

---
 .../experimental_/CustomConnectButton.tsx     | 23 ++++++++++++-------
 .../layout/header/HeaderContainer.tsx         |  7 +++---
 .../layout/sidebar/NewChatButton.tsx          |  2 +-
 .../experimental_/layout/sidebar/SideBar.tsx  | 10 +++-----
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/experimental_/CustomConnectButton.tsx b/src/components/experimental_/CustomConnectButton.tsx
index 17ff8b70..8a26a421 100644
--- a/src/components/experimental_/CustomConnectButton.tsx
+++ b/src/components/experimental_/CustomConnectButton.tsx
@@ -29,9 +29,16 @@ const CustomConnectButton = () => {
           (!authenticationStatus || authenticationStatus === 'authenticated');
         return (
           <div
-            className={`h-12 w-full cursor-pointer rounded-lg border-[1px] ${
-              !connected ? 'border-green-primary/10 bg-green-primary' : 'border-gray-800'
-            } bg-gray-700/50 text-center text-sm font-bold text-white hover:opacity-80`}
+            className={`
+            h-12
+            cursor-pointer 
+            rounded-lg border-[1px]
+            bg-gray-700/50 
+            text-center 
+            text-sm text-white 
+            hover:opacity-80
+            ${!connected ? 'border-green-primary/10 h-8' : 'border-gray-800'}
+             `}
             {...(!ready && {
               'aria-hidden': true,
               style: {
@@ -44,16 +51,16 @@ const CustomConnectButton = () => {
             {(() => {
               if (!connected) {
                 return (
-                  <button onClick={openConnectModal} type="button" className="h-full w-full p-3">
-                    <div className="text-sm text-white/70">Connect Wallet</div>
+                  <button onClick={openConnectModal} type="button" className="h-full w-full">
+                    <div className="text-xs text-white/70 animate-pulse">Connect Wallet</div>
                   </button>
                 );
               }
 
               if (chain.unsupported) {
                 return (
-                  <button onClick={openChainModal} type="button" className="h-full w-full p-3">
-                    <div className="text-sm text-red-500">Wrong network</div>
+                  <button onClick={openChainModal} type="button" className="h-full w-full">
+                    <div className="text-xs text-red-500">Wrong network</div>
                   </button>
                 );
               }
@@ -70,7 +77,7 @@ const CustomConnectButton = () => {
                         {account.displayName}
                       </div>
                       <div className="flex justify-start font-mono text-xs font-thin text-white/70">
-                        {cleanValue(balance_, 2)}
+                        {cleanValue(balance_, 2)} ETH
                       </div>
                     </div>
                   </div>
diff --git a/src/components/experimental_/layout/header/HeaderContainer.tsx b/src/components/experimental_/layout/header/HeaderContainer.tsx
index 1767f5bc..b90f2189 100644
--- a/src/components/experimental_/layout/header/HeaderContainer.tsx
+++ b/src/components/experimental_/layout/header/HeaderContainer.tsx
@@ -14,16 +14,17 @@ const HeaderContainer = ({
   const { pathname } = useRouter();
   return (
     <div
-      className={`sticky top-0 z-40 flex items-center gap-x-4 ${
+      className={`sticky top-0 z-40 flex gap-x-4 text-white/70 sm:gap-x-6 p-4 pt-6 ${
         pathname !== '/' ? 'bg-gray-secondary' : ''
-      } p-2 text-white/70 sm:gap-x-6 md:p-6`}
+      }`}
     >
       <button type="button" className="text-white/50 lg:hidden" onClick={() => setIsOpen(!isOpen)}>
         <span className="sr-only">Open sidebar</span>
         <Bars3Icon className="h-8 w-8" aria-hidden="true" />
       </button>
 
-      <div className="h-full w-full">{children}</div>
+      <div className="h-full w-full ">{children}</div>
+
       <div className="hidden min-w-[200px] md:block">
         <CustomConnectButton />
       </div>
diff --git a/src/components/experimental_/layout/sidebar/NewChatButton.tsx b/src/components/experimental_/layout/sidebar/NewChatButton.tsx
index 45c4bc1e..2b3144be 100644
--- a/src/components/experimental_/layout/sidebar/NewChatButton.tsx
+++ b/src/components/experimental_/layout/sidebar/NewChatButton.tsx
@@ -4,7 +4,7 @@ export const buttonStyle =
   'flex text-sm cursor-pointer select-none items-center rounded-[8px] border-[1px] border-teal-800 p-[8px] px-4 text-center text-white/70 hover:text-white transition ease-in-out hover:bg-teal-800/20 active:bg-transparent';
 
 const NewChatButton = () => (
-  <Link className={buttonStyle} href={`/`}>
+  <Link className={`${buttonStyle} mt-4`} href={`/`}>
     <div className="flex w-full justify-center text-xs">
       <div>New Chat</div>
     </div>
diff --git a/src/components/experimental_/layout/sidebar/SideBar.tsx b/src/components/experimental_/layout/sidebar/SideBar.tsx
index b4d692cd..29761530 100644
--- a/src/components/experimental_/layout/sidebar/SideBar.tsx
+++ b/src/components/experimental_/layout/sidebar/SideBar.tsx
@@ -2,9 +2,7 @@ import { useContext, useState } from 'react';
 import SettingsContext, { Setting } from '@/contexts/SettingsContext';
 import { DevToolsModal } from '../../../devTools/DevToolsModal';
 import ChatList from '../../ChatList';
-import CustomConnectButton from '../../CustomConnectButton';
 import AccountStatus from './AccountStatus';
-import MenuButton from './MenuButton';
 import MoreItems from './MoreItems';
 import NewChatButton from './NewChatButton';
 
@@ -21,23 +19,21 @@ const Sidebar = ({
   } = useContext(SettingsContext);
 
   return (
-    <div className="flex h-screen w-full flex-1 flex-col p-1.5 text-gray-300">
+    <div className="flex h-screen w-full flex-col gap-2 p-2 text-gray-300">
       <DevToolsModal
         openState={developerTools}
         handleClose={() => changeSetting(Setting.DEVELOPER_TOOLS, false)}
       />
       <NewChatButton />
-      <div className="h-full overflow-y-auto">
+      <div className="h-full overflow-y-scroll ">
         <ChatList />
       </div>
       <div className="relative flex w-full flex-col self-end">
-        <div className="p-1.5">
+        <div className="p-2">
           <MoreItems />
-          {/* {process.env.NODE_ENV === 'development' && <AccountStatus />} */}
           <div className="p-2">
             <AccountStatus />
           </div>
-          {/* <div className="text-xs text-white/50 border-[0.5px] rounded-xl p-1 ">App version: v{process.env.APP_VERSION}</div> */}
         </div>
       </div>
     </div>

From 83c2211011f8487c3dc48031892442ecaa482e98 Mon Sep 17 00:00:00 2001
From: brucedonovan <bruce.donovan@gmail.com>
Date: Fri, 4 Aug 2023 15:06:05 +0100
Subject: [PATCH 2/5] more unified button styling

---
 .../experimental_/CustomConnectButton.tsx     | 31 ++++++++++++-------
 .../experimental_/MessageInput_.tsx           | 20 +++++++++---
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/experimental_/CustomConnectButton.tsx b/src/components/experimental_/CustomConnectButton.tsx
index 8a26a421..c0f16c93 100644
--- a/src/components/experimental_/CustomConnectButton.tsx
+++ b/src/components/experimental_/CustomConnectButton.tsx
@@ -4,6 +4,7 @@ import { formatEther } from 'ethers/lib/utils.js';
 import useBalance from '@/hooks/useBalance';
 import { cleanValue } from '@/utils';
 import Avatar from '../Avatar';
+import { buttonStyle } from './layout/sidebar/NewChatButton';
 
 const CustomConnectButton = () => {
   const { data: balance } = useBalance();
@@ -30,15 +31,10 @@ const CustomConnectButton = () => {
         return (
           <div
             className={`
-            h-12
+            min-w-[200px]
             cursor-pointer 
-            rounded-lg border-[1px]
-            bg-gray-700/50 
-            text-center 
-            text-sm text-white 
             hover:opacity-80
-            ${!connected ? 'border-green-primary/10 h-8' : 'border-gray-800'}
-             `}
+            `}
             {...(!ready && {
               'aria-hidden': true,
               style: {
@@ -49,17 +45,20 @@ const CustomConnectButton = () => {
             })}
           >
             {(() => {
+
               if (!connected) {
                 return (
-                  <button onClick={openConnectModal} type="button" className="h-full w-full">
-                    <div className="text-xs text-white/70 animate-pulse">Connect Wallet</div>
+                  <button onClick={openConnectModal} type="button" className='w-full' >
+                    <div className={`flex items-center justify-center text-xs text-white/70 ${buttonStyle}`}>
+                      Connect Wallet
+                      </div>
                   </button>
                 );
               }
 
               if (chain.unsupported) {
                 return (
-                  <button onClick={openChainModal} type="button" className="h-full w-full">
+                  <button onClick={openChainModal} type="button">
                     <div className="text-xs text-red-500">Wrong network</div>
                   </button>
                 );
@@ -67,7 +66,17 @@ const CustomConnectButton = () => {
 
               return (
                 <div
-                  className="flex h-full w-full cursor-pointer items-center justify-between p-3"
+                  className="
+                    flex h-full w-full 
+                    cursor-pointer 
+                    items-center 
+                    justify-between 
+                    p-1
+                    px-3
+                    bg-gray-600/20
+                    rounded-lg
+                    border-gray-800
+                  "
                   onClick={openAccountModal}
                 >
                   <div className="flex items-center gap-3">
diff --git a/src/components/experimental_/MessageInput_.tsx b/src/components/experimental_/MessageInput_.tsx
index 439443ec..e12cd16d 100644
--- a/src/components/experimental_/MessageInput_.tsx
+++ b/src/components/experimental_/MessageInput_.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { FormEvent, ReactNode, use, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import React, { ButtonHTMLAttributes } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { ReadyState } from 'react-use-websocket';
@@ -8,6 +8,8 @@ import {
   PaperClipIcon,
 } from '@heroicons/react/24/outline';
 import { useChatContext } from '@/contexts/ChatContext';
+import { useAccount } from 'wagmi';
+import CustomConnectButton from './CustomConnectButton';
 
 interface IconBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
@@ -61,6 +63,8 @@ const useFocus = () => {
 const MessageInput = () => {
   const [messageInput, setMessageInput] = useState<string>('');
 
+  const {isConnected:walletConnected } = useAccount();
+
   const { sendMessage, interactor, setInteractor, connectionStatus } = useChatContext();
   const [inputRef] = useFocus();
   const submit = useCallback(() => {
@@ -86,10 +90,15 @@ const MessageInput = () => {
     setInteractor(interactor === 'user' ? 'commenter' : 'user');
   };
 
-  const isConnected = connectionStatus === ReadyState.OPEN;
+  const botConnected = connectionStatus === ReadyState.OPEN;
+
+  const isConnected = useMemo(() => { 
+    return walletConnected && botConnected;
+  }, [botConnected, walletConnected]);
 
   return (
-    <div className="mx-auto w-full max-w-4xl rounded-xl bg-black/30">
+    <>
+    {isConnected ? <div className={`mx-auto w-full max-w-4xl rounded-xl bg-black/30 `}>
       <div className="flex items-center gap-1 rounded-xl border border-gray-300/10 p-1 duration-200 focus-within:border-teal-100/30 lg:gap-3 lg:p-2">
         <div className="text-end">
           <button
@@ -105,7 +114,7 @@ const MessageInput = () => {
           </button>
         </div>
 
-        <form onSubmit={handleSendMessage} className="flex w-full grow items-center space-x-2">
+         <form onSubmit={handleSendMessage} className="flex w-full grow items-center space-x-2">
           <TextareaAutosize
             onChange={(e) => setMessageInput(e.target.value)}
             placeholder={interactor === 'user' ? 'Enter your message...' : 'Enter your comment...'}
@@ -128,6 +137,9 @@ const MessageInput = () => {
         </form>
       </div>
     </div>
+    : <CustomConnectButton />}
+
+    </>
   );
 };
 

From cdec00604027ea7c25d351faffce99ba55762b64 Mon Sep 17 00:00:00 2001
From: brucedonovan <bruce.donovan@gmail.com>
Date: Fri, 4 Aug 2023 15:12:39 +0100
Subject: [PATCH 3/5] reformatting+build

---
 .../experimental_/CustomConnectButton.tsx     | 15 +--
 .../experimental_/MessageInput_.tsx           | 91 +++++++++++--------
 .../layout/header/HeaderContainer.tsx         |  2 +-
 3 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/src/components/experimental_/CustomConnectButton.tsx b/src/components/experimental_/CustomConnectButton.tsx
index c0f16c93..f90d2673 100644
--- a/src/components/experimental_/CustomConnectButton.tsx
+++ b/src/components/experimental_/CustomConnectButton.tsx
@@ -45,13 +45,14 @@ const CustomConnectButton = () => {
             })}
           >
             {(() => {
-
               if (!connected) {
                 return (
-                  <button onClick={openConnectModal} type="button" className='w-full' >
-                    <div className={`flex items-center justify-center text-xs text-white/70 ${buttonStyle}`}>
+                  <button onClick={openConnectModal} type="button" className="w-full">
+                    <div
+                      className={`flex items-center justify-center text-xs text-white/70 ${buttonStyle}`}
+                    >
                       Connect Wallet
-                      </div>
+                    </div>
                   </button>
                 );
               }
@@ -71,11 +72,11 @@ const CustomConnectButton = () => {
                     cursor-pointer 
                     items-center 
                     justify-between 
-                    p-1
-                    px-3
-                    bg-gray-600/20
                     rounded-lg
                     border-gray-800
+                    bg-gray-600/20
+                    p-1
+                    px-3
                   "
                   onClick={openAccountModal}
                 >
diff --git a/src/components/experimental_/MessageInput_.tsx b/src/components/experimental_/MessageInput_.tsx
index e12cd16d..b7988ad2 100644
--- a/src/components/experimental_/MessageInput_.tsx
+++ b/src/components/experimental_/MessageInput_.tsx
@@ -1,4 +1,13 @@
-import { FormEvent, ReactNode, use, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FormEvent,
+  ReactNode,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import React, { ButtonHTMLAttributes } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { ReadyState } from 'react-use-websocket';
@@ -7,8 +16,8 @@ import {
   PaperAirplaneIcon,
   PaperClipIcon,
 } from '@heroicons/react/24/outline';
-import { useChatContext } from '@/contexts/ChatContext';
 import { useAccount } from 'wagmi';
+import { useChatContext } from '@/contexts/ChatContext';
 import CustomConnectButton from './CustomConnectButton';
 
 interface IconBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -63,7 +72,7 @@ const useFocus = () => {
 const MessageInput = () => {
   const [messageInput, setMessageInput] = useState<string>('');
 
-  const {isConnected:walletConnected } = useAccount();
+  const { isConnected: walletConnected } = useAccount();
 
   const { sendMessage, interactor, setInteractor, connectionStatus } = useChatContext();
   const [inputRef] = useFocus();
@@ -92,53 +101,57 @@ const MessageInput = () => {
 
   const botConnected = connectionStatus === ReadyState.OPEN;
 
-  const isConnected = useMemo(() => { 
+  const isConnected = useMemo(() => {
     return walletConnected && botConnected;
   }, [botConnected, walletConnected]);
 
   return (
     <>
-    {isConnected ? <div className={`mx-auto w-full max-w-4xl rounded-xl bg-black/30 `}>
-      <div className="flex items-center gap-1 rounded-xl border border-gray-300/10 p-1 duration-200 focus-within:border-teal-100/30 lg:gap-3 lg:p-2">
-        <div className="text-end">
-          <button
-            className="grid h-9 w-9 cursor-pointer select-none place-items-center rounded-lg bg-teal-200/10 align-middle text-white/70 transition duration-100 ease-in-out hover:text-white/90"
-            type="button"
-            onClick={toggleInteractionMode}
-          >
-            {interactor === 'user' ? (
-              <ChatBubbleLeftRightIcon className="h-5 w-5" />
-            ) : (
-              <PaperClipIcon className="h-5 w-5" />
-            )}
-          </button>
-        </div>
-
-         <form onSubmit={handleSendMessage} className="flex w-full grow items-center space-x-2">
-          <TextareaAutosize
-            onChange={(e) => setMessageInput(e.target.value)}
-            placeholder={interactor === 'user' ? 'Enter your message...' : 'Enter your comment...'}
-            tabIndex={0}
-            value={messageInput}
-            ref={inputRef}
-            onKeyDown={isConnected && messageInput ? onKeyPress : undefined}
-            className={`   
+      {isConnected ? (
+        <div className={`mx-auto w-full max-w-4xl rounded-xl bg-black/30 `}>
+          <div className="flex items-center gap-1 rounded-xl border border-gray-300/10 p-1 duration-200 focus-within:border-teal-100/30 lg:gap-3 lg:p-2">
+            <div className="text-end">
+              <button
+                className="grid h-9 w-9 cursor-pointer select-none place-items-center rounded-lg bg-teal-200/10 align-middle text-white/70 transition duration-100 ease-in-out hover:text-white/90"
+                type="button"
+                onClick={toggleInteractionMode}
+              >
+                {interactor === 'user' ? (
+                  <ChatBubbleLeftRightIcon className="h-5 w-5" />
+                ) : (
+                  <PaperClipIcon className="h-5 w-5" />
+                )}
+              </button>
+            </div>
+
+            <form onSubmit={handleSendMessage} className="flex w-full grow items-center space-x-2">
+              <TextareaAutosize
+                onChange={(e) => setMessageInput(e.target.value)}
+                placeholder={
+                  interactor === 'user' ? 'Enter your message...' : 'Enter your comment...'
+                }
+                tabIndex={0}
+                value={messageInput}
+                ref={inputRef}
+                onKeyDown={isConnected && messageInput ? onKeyPress : undefined}
+                className={`   
             grow
             resize-none
             bg-transparent
             tracking-wider text-white/30
             placeholder:text-white/30 focus:text-white/70 focus:outline-none
           `}
-            maxRows={7}
-          />
-          <IconBtn onClick={handleSendMessage} disabled={!isConnected || !messageInput}>
-            <PaperAirplaneIcon className="h-5 w-5" />
-          </IconBtn>
-        </form>
-      </div>
-    </div>
-    : <CustomConnectButton />}
-
+                maxRows={7}
+              />
+              <IconBtn onClick={handleSendMessage} disabled={!isConnected || !messageInput}>
+                <PaperAirplaneIcon className="h-5 w-5" />
+              </IconBtn>
+            </form>
+          </div>
+        </div>
+      ) : (
+        <CustomConnectButton />
+      )}
     </>
   );
 };
diff --git a/src/components/experimental_/layout/header/HeaderContainer.tsx b/src/components/experimental_/layout/header/HeaderContainer.tsx
index b90f2189..47cc418a 100644
--- a/src/components/experimental_/layout/header/HeaderContainer.tsx
+++ b/src/components/experimental_/layout/header/HeaderContainer.tsx
@@ -14,7 +14,7 @@ const HeaderContainer = ({
   const { pathname } = useRouter();
   return (
     <div
-      className={`sticky top-0 z-40 flex gap-x-4 text-white/70 sm:gap-x-6 p-4 pt-6 ${
+      className={`sticky top-0 z-40 flex gap-x-4 p-4 pt-6 text-white/70 sm:gap-x-6 ${
         pathname !== '/' ? 'bg-gray-secondary' : ''
       }`}
     >

From fec99069a238eca9ab9808ff1b3ad2fe4357d200 Mon Sep 17 00:00:00 2001
From: marcomariscal <marco.a.mariscal@gmail.com>
Date: Fri, 4 Aug 2023 08:11:07 -0700
Subject: [PATCH 4/5] chore: remove unused import

---
 src/components/experimental_/MessageInput_.tsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/experimental_/MessageInput_.tsx b/src/components/experimental_/MessageInput_.tsx
index b7988ad2..75fc3680 100644
--- a/src/components/experimental_/MessageInput_.tsx
+++ b/src/components/experimental_/MessageInput_.tsx
@@ -1,13 +1,4 @@
-import {
-  FormEvent,
-  ReactNode,
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { FormEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import React, { ButtonHTMLAttributes } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { ReadyState } from 'react-use-websocket';

From 17ad8163ff2bc6e794bdcc552f2ffc1c526691b9 Mon Sep 17 00:00:00 2001
From: brucedonovan <bruce.donovan@gmail.com>
Date: Fri, 4 Aug 2023 17:03:34 +0100
Subject: [PATCH 5/5] handle no backend

---
 src/components/experimental_/MessageInput_.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/experimental_/MessageInput_.tsx b/src/components/experimental_/MessageInput_.tsx
index 75fc3680..ecbbc6af 100644
--- a/src/components/experimental_/MessageInput_.tsx
+++ b/src/components/experimental_/MessageInput_.tsx
@@ -141,7 +141,8 @@ const MessageInput = () => {
           </div>
         </div>
       ) : (
-        <CustomConnectButton />
+       botConnected ? <CustomConnectButton /> : 
+       <div className='text-white/30 text-sm animate-pulse'> Waiting for Cacti connection ... </div>
       )}
     </>
   );