Merge pull request #115 from subquery/feat/chat-ui2

Feat/chat ui2
subquery · Aug 12, 2024 · 3f48daa · 3f48daa
2 parents 2fa0e27 + 1e2c9e7
commit 3f48daa
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 62 deletions.
diff --git a/components/common/address/Address.tsx b/components/common/address/Address.tsx
@@ -19,9 +19,10 @@ type Props = {
   address: string;
   truncated?: boolean;
   size?: 'small' | 'large' | 'bigger';
+  customLabel?: React.ReactNode;
 };
 
-const Address: React.FC<Props> = ({ address, truncated = true, size = 'small' }) => {
+const Address: React.FC<Props> = ({ address, customLabel, truncated = true, size = 'small' }) => {
   const bem = createBEM('subql-address');
 
   const iconSize = React.useMemo(() => {
@@ -53,9 +54,13 @@ const Address: React.FC<Props> = ({ address, truncated = true, size = 'small' })
         src={`data:image/svg+xml;utf8,${encodeURIComponent(toSvg(address, iconSize))}`}
         alt=""
       />
-      <Typography variant={fontSize} className={clsx(bem('text', size))} type="secondary">
-        {truncated ? truncateAddress(address) : address}
-      </Typography>
+      {customLabel ? (
+        customLabel
+      ) : (
+        <Typography variant={fontSize} className={clsx(bem('text', size))} type="secondary">
+          {truncated ? truncateAddress(address) : address}
+        </Typography>
+      )}
     </div>
   );
 };

diff --git a/components/common/chatUi/chatUi.less b/components/common/chatUi/chatUi.less
@@ -32,6 +32,7 @@
     flex-direction: column;
     gap: 8px;
     width: 290px;
+    height: 100%;
     &-search {
       background: rgb(10, 10, 10);
       border: 1px solid #262626;
@@ -47,8 +48,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     gap: 8px;
+    flex: 1;
+    overflow: auto;
   }
 
   &__area {
@@ -61,8 +63,8 @@
   &__chat-url {
     position: absolute;
     top: 0;
-    height: 40px;
-    max-height: 40px;
+    height: 60px;
+    max-height: 60px;
     overflow: auto;
     color: #fff;
     padding: 5px 12.5%;
@@ -164,8 +166,8 @@
   &-conversation-message {
     overflow: auto;
     flex: 1;
-    height: calc(100% - 162px);
-    margin-top: 40px;
+    height: calc(100% - 182px);
+    margin-top: 60px;
     display: flex;
     flex-direction: column;
 
@@ -181,18 +183,12 @@
     &__assistant {
       background: rgb(68,70,84);
       position: relative;
-      &--lastOne {
+      &--lastOne&--loading {
         .subql-chat-conversation-message__item-span {
           &::after {
             content: "▍";
             align-self: flex-end;
-            margin-left: 8px;;
-          }
-        }
-      }
-      &--lastOne&--loading {
-        .subql-chat-conversation-message__item-span {
-          &::after {
+            margin-left: 8px;
             animation: pulseCursor 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
           }