Merge pull request #128 from subquery/feat/update-tooltip

feat: update tooltip style.
subquery · Jan 17, 2025 · b64470d · b64470d
2 parents c0aa9a3 + 6e1f80d
commit b64470d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 44 deletions.
diff --git a/components/common/chatUi/chatUi.less b/components/common/chatUi/chatUi.less
@@ -19,10 +19,10 @@
     color: #fff;
     font-size: 28px;
     cursor: pointer;
-    transition: all .15s cubic-bezier(.4,0,.2,1);
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     margin: 12px 0;
     &:hover {
-      opacity: .5;
+      opacity: 0.5;
     }
   }
 
@@ -101,7 +101,7 @@
       border-radius: 12px;
       &::placeholder {
         color: rgb(250, 250, 250);
-        opacity: .5;
+        opacity: 0.5;
       }
     }
 
@@ -125,8 +125,8 @@
       justify-content: center;
       background: #fafafa;
       border-radius: 4px;
-      opacity: .5;
-      transition: all .15s cubic-bezier(.4,0,.2,1);
+      opacity: 0.5;
+      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
       &:hover {
         cursor: pointer;
         opacity: 1;
@@ -152,7 +152,7 @@
     background: transparent;
     color: #fff;
     cursor: pointer;
-    transition: all .15s cubic-bezier(.4,0,.2,1);
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 8px;
     &:hover {
       background: #262626;
@@ -187,13 +187,13 @@
     }
 
     &__assistant {
-      background: rgb(68,70,84);
+      background: rgb(68, 70, 84);
       position: relative;
       &--lastOne&--loading {
         .subql-chat-conversation-message__item-span {
           .subql-markdown-preview {
             &::after {
-              content: "▍";
+              content: '▍';
               align-self: flex-end;
               margin-left: 8px;
               animation: pulseCursor 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -214,20 +214,21 @@
   height: 60px;
   border-radius: 50%;
   cursor: pointer;
-  transition: all .3s ease;
+  transition: all 0.3s ease;
   filter: contrast(20);
 
   &:hover {
-    box-shadow: 0px 9px 28px 8px #0000000D,0px 6px 16px 0px #00000014,0px 3px 6px -4px #0000001F;
+    box-shadow: 0px 9px 28px 8px #0000000d, 0px 6px 16px 0px #00000014, 0px 3px 6px -4px #0000001f;
   }
 
-  &__open-icon, &__close-icon {
+  &__open-icon,
+  &__close-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     will-change: filter;
-    transition: all .4s ease-in-out;
+    transition: all 0.4s ease-in-out;
     filter: blur(0px);
   }
 
@@ -252,7 +253,7 @@
     flex-direction: column;
     &-top {
       padding: 22px;
-      background: #EB72E0;
+      background: #eb72e0;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -310,15 +311,15 @@
       overflow: hidden;
       padding: 0;
       border-radius: 24px;
-      box-shadow: 0px 9px 28px 8px #0000000D, 0px 6px 16px 0px #00000014, 0px 3px 6px -4px #0000001F;
+      box-shadow: 0px 9px 28px 8px #0000000d, 0px 6px 16px 0px #00000014, 0px 3px 6px -4px #0000001f;
     }
   }
 
   &-conversation-message {
     display: flex;
     flex-direction: column;
     gap: 16px;
-    height: ~"min(480px, calc(100vh - 400px))";
+    height: ~'min(480px, calc(100vh - 400px))';
     overflow: auto;
     padding: 28px 20px;
 
@@ -365,7 +366,7 @@
         .subql-chatbox-conversation-message__item-span {
           .subql-markdown-preview {
             &::after {
-              content: "▍";
+              content: '▍';
               align-self: flex-end;
               margin-left: 8px;
               animation: pulseCursor 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -388,46 +389,49 @@
     }
   }
 
-  &-tooltip-select-item {
-    display: flex;
-    gap: 8px;
-    transition: background .15s cubic-bezier(.4,0,.2,1);
-    border-radius: 6px;
-    padding: 4px 6px;
-    position: relative;
-    &:hover {
-      cursor: pointer;
-      background: rgba(255, 255, 255, 0.055);
-    }
+  &-tooltip {
+    max-width: fit-content;
 
-    &__text {
+    &-select-item {
+      display: flex;
+      gap: 8px;
+      transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+      border-radius: 6px;
+      padding: 4px 6px;
       position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 0;
-        height: 1px;
-        background: #fff;
-        transition: all 0.3s cubic-bezier(.4,0,.2,1);
+      &:hover {
+        cursor: pointer;
+        background: rgba(255, 255, 255, 0.055);
       }
 
-      &:hover {
+      &__text {
+        position: relative;
+
         &::before {
-          left: unset;
-          right: 0;
-          width: 100%;
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 1px;
+          background: #fff;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        &:hover {
+          &::before {
+            left: unset;
+            right: 0;
+            width: 100%;
+          }
         }
       }
     }
-
   }
 }
 
 @keyframes pulseCursor {
   50% {
     opacity: 0;
   }
-}
+}
diff --git a/components/common/chatUi/chatUi.tsx b/components/common/chatUi/chatUi.tsx
@@ -919,9 +919,12 @@ export const ChatBoxTooltip: FC<{
   chatBoxInstance?: ChatBoxRef;
 }> = (props) => {
   const { children, tooltipProps, options, chatBoxInstance } = props;
+  const bem = useBem('subql-chatbox-tooltip');
+
   return (
     <Tooltip
       {...tooltipProps}
+      overlayClassName={clsx(bem(), tooltipProps?.overlayClassName)}
       title={
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           {options.map((option) => {