Merge pull request #76 from BitteProtocol/chat-fixes

CHAT UI Fixes
BitteProtocol · Feb 6, 2025 · e388537 · e388537
2 parents 91ae73f + d579c87
commit e388537
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 3 deletions.
diff --git a/src/components/chat/ChatContent.tsx b/src/components/chat/ChatContent.tsx
@@ -166,7 +166,7 @@ export const ChatContent = ({
   return (
     <div className='bitte-flex bitte-h-full bitte-w-full bitte-flex-col bitte-gap-4 bitte-text-justify'>
       <div
-        className='bitte-relative bitte-flex bitte-min-h-[220px] lg:bitte-min-h-[360px] bitte-w-full bitte-h-full bitte-grow-0 bitte-overflow-y-auto lg:bitte-rounded-md bitte-max-lg:flex-col bitte-border-t bitte-border-b lg:bitte-border lg:bitte-px-6'
+        className='bitte-chat-main bitte-text-start bitte-relative bitte-flex bitte-min-h-[220px] lg:bitte-min-h-[360px] bitte-w-full bitte-h-full bitte-grow-0 bitte-overflow-y-auto lg:bitte-rounded-md bitte-max-lg:flex-col bitte-border-t bitte-border-b lg:bitte-border lg:bitte-pl-6'
         style={{
           backgroundColor: generalBackground,
           borderColor: borderColor,
@@ -192,7 +192,7 @@ export const ChatContent = ({
 
         <div
           ref={messagesRef}
-          className='bitte-flex bitte-h-full bitte-w-full bitte-justify-center bitte-overflow-y-auto bitte-p-4'
+          className='bitte-flex bitte-h-full bitte-w-full bitte-justify-center bitte-overflow-y-auto bitte-overflow-x-hidden bitte-p-4'
         >
           <div
             className={cn(

diff --git a/src/hooks/useTransaction.ts b/src/hooks/useTransaction.ts
@@ -4,7 +4,10 @@ import {
   Wallet,
 } from "@near-wallet-selector/core";
 import { Account } from "near-api-js";
-import { EthTransactionParams, SignRequestData } from "near-safe";
+import {
+  EthTransactionParams,
+  SignRequestData
+} from "near-safe";
 import { EVMWalletAdapter } from "../types";
 
 export interface SuccessInfo {
@@ -131,6 +134,7 @@ export const executeWithEvmWallet = async (
       from: tx.from,
       gas: tx.gas ? BigInt(tx.gas) : undefined,
     };
+
     return evmWallet.sendTransaction(rawTxParams);
   });
 

diff --git a/src/style.css b/src/style.css
@@ -17,3 +17,64 @@
     --chart-5: 330.4 81.2% 60.4%;
   }
 }
+
+.bitte-chat-main {
+  --sb-track-color: #18181b;
+  --sb-thumb-color: #334155;
+  --sb-thumb-hover-color: #64748b;
+  --sb-size: 10px;
+}
+
+/* Webkit Scrollbar (Chrome, Edge, Safari) */
+.bitte-chat-main::-webkit-scrollbar {
+  width: var(--sb-size);
+  height: var(--sb-size); /* For horizontal scrollbars */
+}
+
+.bitte-chat-main::-webkit-scrollbar-track {
+  background: var(--sb-track-color);
+  border-radius: 11px;
+}
+
+.bitte-chat-main::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb-color);
+  border-radius: 11px;
+}
+
+.bitte-chat-main::-webkit-scrollbar-thumb:hover {
+  background: var(--sb-thumb-hover-color);
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  /* Firefox Support */
+  .bitte-chat-main {
+    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+    scrollbar-width: thin; /* Options: auto, thin, none */
+  }
+}
+
+body {
+  --sb-track-color: #18181b;
+  --sb-thumb-color: #334155;
+  --sb-size: 10px;
+}
+
+body::-webkit-scrollbar {
+  width: var(--sb-size);
+}
+
+body::-webkit-scrollbar-track {
+  background: var(--sb-track-color);
+  border-radius: 11px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb-color);
+  border-radius: 11px;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+  }
+}