icon for chat got new style

2 weeks ago · a36d473a88
parent 8bce86f2de
commit a36d473a88
18 changed files with 65 additions and 41 deletions
--- a/apps/remix-ide/src/app/components/popup-panel.tsx
+++ b/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)"
        }}
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-unicorn.css
+++ b/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;
--- a/apps/remix-ide/src/assets/css/themes/remix-violet.css
+++ b/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;
--- a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
+++ b/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}`}>
--- a/libs/remix-ui/helper/src/types/customtooltip.ts
+++ b/libs/remix-ui/helper/src/types/customtooltip.ts
@ -10,4 +10,5 @@ export type CustomTooltipType = {
  tooltipTextClasses?: string
  delay?: OverlayDelay
  hide?: boolean
+  show?: boolean
 }
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
+++ b/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'
--- a/libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx
+++ b/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
-        tooltipText={"Ask RemixAI for help!"}
-      >
-        <div className="d-flex text-sm flex-row pr-2 text-white justify-content-center align-items-center">
-          <style>{`
-            button.fa-robot:focus {
-              outline: none;
-              box-shadow: none;
-            }
-            button.fa-robot:hover {
-              border-color: var(--info)
-            }
-          `}</style>
-          <button
-            style={{
-              position: 'absolute',
-              bottom: '0.7rem',
-              right: '0.1rem',
-              height: '3rem',
-              width: '3rem',
-              borderRadius: '50%',
-              color: 'var(--ai)',
-              boxShadow: "0 1px 7px var(--secondary)"
-            }}
-            data-id="aiStatusButton"
-            className='h3 p-1 alert alert-info fal fa-robot'
-            onClick={async () => {
-              appContext.appStateDispatch({
-                type: appActionTypes.setShowPopupPanel,
-                payload: !appContext.appState.showPopupPanel
-              })
-            }}
-          >
-          </button>
-        </div>
-      </CustomTooltip>
+      <div className="d-flex text-sm flex-row pr-2 text-white justify-content-center align-items-center">
+        <style>{`
+          button.aiButton:focus {
+            outline: none;
+            box-shadow: none;
+          }
+          button.aiButton:hover {
+            border-color: var(--info)
+          }
+        `}</style>
+        { !appContext.appState.showPopupPanel && <div className='d-flex flex-column' style={{
+                position: 'absolute',
+                bottom: '1.5rem',
+                right: '1.5rem',
+                color: 'var(--ai)',
+                alignItems: 'self-end',
+              }}>
+            <span className='p-1 bg-info mr-4' style={{
+              boxShadow: "0 1px 7px var(--secondary)",
+              zIndex: '200',
+              marginBottom: '-7px'
+            }}>
+              👋 I'm here to help you!
+            </span>
+            <button
+              style={{
+                backgroundColor: 'var(--brand-dark-blue)',
+                height: '3rem',
+                width: '3rem',
+                borderRadius: '50%',
+                color: 'var(--ai)',
+                boxShadow: "0 1px 7px var(--secondary)"
+              }}
+              data-id="aiStatusButton"
+              className='aiButton d-flex align-items-center h3 p-1'
+              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>
  )
 }
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/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.',