icon for chat got new style

apps/remix-ide/src/app/components/popup-panel.tsx

@@ -95,7 +95,7 @@ export class PopupPanel extends AbstractPanel {
           height: '40rem',
           position: 'fixed',
           bottom: '2rem',
-          right: '3.5rem',
+          right: '1.5rem',
           zIndex: 200,
           boxShadow: "0 1px 7px var(--secondary)"
         }}

apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css

@@ -36,6 +36,7 @@
     --body-bg: #fff;
     --text-bg-mark: #fcf8e3;
     --custom-select: #fff;
+    --brand-dark-blue: #222496;
     --breakpoint-xs:0;
     --breakpoint-sm:576px;
     --breakpoint-md:768px;

apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css

@@ -37,6 +37,7 @@
     --body-bg: #060606;
     --text-bg-mark: #fcf8e3;
     --custom-select: #fff;
+    --brand-dark-blue: #222496;
     --breakpoint-xs:0;
     --breakpoint-sm:576px;
     --breakpoint-md:768px;

apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css

@@ -36,6 +36,7 @@
 	--body-bg: #fff;
 	--text-bg-mark: #fcf8e3;
 	--custom-select: #fff;
+  --brand-dark-blue: #222496;
 	--breakpoint-xs:0;
 	--breakpoint-sm:576px;
 	--breakpoint-md:768px;

apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css

@@ -39,6 +39,7 @@
     --body-bg:#fff;
     --text-bg-mark: #fcf8e3;
     --custom-select: #fff;
+    --brand-dark-blue: #222496;
     --breakpoint-xs:0;
     --breakpoint-sm:576px;
     --breakpoint-md:768px;

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -25,6 +25,7 @@
   --text: #babbcc;
   --body-bg: #1a1a1a;
   --custom-select: #252525;
+  --brand-dark-blue: #222496;
   --text-bg-mark: #a5a5a5;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;

apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css

@@ -25,6 +25,7 @@
   --body-bg: #d5efff;
   --text-bg-mark: #fcf8e3;
   --custom-select: #ffffff;
+  --brand-dark-blue: #222496;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -25,6 +25,7 @@
   --text-background: #222336;
   --text-bg-mark: #8388b2;
   --custom-select: #35384c;
+  --brand-dark-blue: #222496;
   --runtab: #8A93B0;
   --body-bg: #222336;
   --breakpoint-xs: 0;

apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css

@@ -27,7 +27,7 @@
   --body-bg: #011628;
   --custom-select: #252525;
   --text-bg-mark: #a5a5a5;
-  --custom-select: #011627;
+  --brand-dark-blue: #222496;
   --text-background: #011626;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -25,6 +25,7 @@
   --body-bg: #eef1f6;
   --text-bg-mark: #fcf8e3;
   --custom-select: #fff;
+  --brand-dark-blue: #222496;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css

@@ -25,6 +25,7 @@
   --body-bg: #DBE2E0;
   --text-bg-mark: #fcf8e3;
   --custom-select: #eeede9;
+  --brand-dark-blue: #222496;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-unicorn.css

@@ -25,6 +25,7 @@
   --body-bg: #f1eef6;
   --text-bg-mark: #fcf8e3;
   --custom-select: #fff;
+  --brand-dark-blue: #222496;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-violet.css

@@ -25,6 +25,7 @@
   --body-bg: #f1eef6;
   --text-bg-mark: #fcf8e3;
   --custom-select: #fff;
+  --brand-dark-blue: #222496;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx

@@ -4,7 +4,7 @@ import { Fragment } from 'react'
 import { OverlayTrigger, Popover, Tooltip } from 'react-bootstrap'
 import { CustomTooltipType } from '../../types/customtooltip'
 
-export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay, hide }: CustomTooltipType) {
+export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay, hide, show }: CustomTooltipType) {
   if (typeof tooltipText !== 'string') {
     const newTooltipText = React.cloneElement(tooltipText, {
       className: ' bg-secondary text-wrap p-1 px-2 '
@@ -16,6 +16,7 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
     (!hide ? (
       <Fragment>
         <OverlayTrigger
+          show={show}
           placement={placement}
           overlay={
             <Popover id={`popover-positioned-${placement}`}>

libs/remix-ui/helper/src/types/customtooltip.ts

@@ -10,4 +10,5 @@ export type CustomTooltipType = {
   tooltipTextClasses?: string
   delay?: OverlayDelay
   hide?: boolean
+  show?: boolean
 }

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -171,7 +171,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
                   <button
                     key={index}
                     className={index === 0 ?
-                      'btn btn-primary border p-2 text-nowrap mr-3 mb-2' :
+                      'btn btn-primary border p-2 text-nowrap mr-3 mb-3' :
                       index === workspaceTemplates.length - 1 ?
                         'btn border p-2 text-nowrap mr-2 mb-3' :
                         'btn border p-2 text-nowrap mr-3 mb-3'

libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx

@@ -49,42 +49,53 @@ export default function AIStatus(props: AIStatusProps) {
           {copilotActive === false ? 'RemixAI Copilot (disabled)' : 'RemixAI Copilot (enabled)'}
         </span>
       </CustomTooltip>
-      <CustomTooltip
+      <div className="d-flex text-sm flex-row pr-2 text-white justify-content-center align-items-center">
-        tooltipText={"Ask RemixAI for help!"}
+        <style>{`
-      >
+          button.aiButton:focus {
-        <div className="d-flex text-sm flex-row pr-2 text-white justify-content-center align-items-center">
+            outline: none;
-          <style>{`
+            box-shadow: none;
-            button.fa-robot:focus {
+          }
-              outline: none;
+          button.aiButton:hover {
-              box-shadow: none;
+            border-color: var(--info)
-            }
+          }
-            button.fa-robot:hover {
+        `}</style>
-              border-color: var(--info)
+        { !appContext.appState.showPopupPanel && <div className='d-flex flex-column' style={{
-            }
+                position: 'absolute',
-          `}</style>
+                bottom: '1.5rem',
-          <button
+                right: '1.5rem',
-            style={{
+                color: 'var(--ai)',
-              position: 'absolute',
+                alignItems: 'self-end',
-              bottom: '0.7rem',
+              }}>
-              right: '0.1rem',
+            <span className='p-1 bg-info mr-4' style={{
-              height: '3rem',
+              boxShadow: "0 1px 7px var(--secondary)",
-              width: '3rem',
+              zIndex: '200',
-              borderRadius: '50%',
+              marginBottom: '-7px'
-              color: 'var(--ai)',
+            }}>
-              boxShadow: "0 1px 7px var(--secondary)"
+              👋 I'm here to help you!
-            }}
+            </span>
-            data-id="aiStatusButton"
+            <button
-            className='h3 p-1 alert alert-info fal fa-robot'
+              style={{
-            onClick={async () => {
+                backgroundColor: 'var(--brand-dark-blue)',
-              appContext.appStateDispatch({
+                height: '3rem',
-                type: appActionTypes.setShowPopupPanel,
+                width: '3rem',
-                payload: !appContext.appState.showPopupPanel
+                borderRadius: '50%',
-              })
+                color: 'var(--ai)',
-            }}
+                boxShadow: "0 1px 7px var(--secondary)"
-          >
+              }}
-          </button>
+              data-id="aiStatusButton"
-        </div>
+              className='aiButton d-flex align-items-center h3 p-1'
-      </CustomTooltip>
+              onClick={async () => {
+                appContext.appStateDispatch({
+                  type: appActionTypes.setShowPopupPanel,
+                  payload: !appContext.appState.showPopupPanel
+                })
+              }}
+            >
+              <img className="align-self-start" src="assets/img/aiLogoHead.webp" alt="" style={{height: "2rem"}}></img>
+            </button>
+          </div>
+        }
+      </div>
     </div>
   )
 }

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -279,7 +279,7 @@ export const TabsUI = (props: TabsUIProps) => {
                         methods: ['code_generation', 'code_completion',
                           "solidity_answer", "code_explaining",
                           "code_insertion", "error_explaining",
-                          "initialize", 'chatPipe', 'ProcessChatRequestBuffer', 'isChatRequestPending', 'toggle'],
+                          "initialize", 'chatPipe', 'ProcessChatRequestBuffer', 'isChatRequestPending'],
                         events: [],
                         icon: 'assets/img/remix-logo-blue.png',
                         description: 'RemixAI provides AI services to Remix IDE.',