style: viewcode scrollbar color

src/components/highlight-code/code-viewer.tsx

@@ -74,7 +74,10 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     >
       <code
         style={{ minHeight: height }}
-        className={highlightedCode.className}
+        className={classNames(highlightedCode.className, {
+          dark: props.theme === 'dark',
+          light: props.theme === 'light'
+        })}
         dangerouslySetInnerHTML={{
           __html: highlightedCode.value
         }}

src/components/highlight-code/styles/index.less

@@ -20,6 +20,7 @@
       background-color: transparent;
     }
 
+    &.light {
       &:hover {
         &::-webkit-scrollbar-thumb {
           background-color: var(--color-scrollbar-thumb);
@@ -28,6 +29,16 @@
       }
     }
 
+    &.dark {
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--scrollbar-handle-light-bg);
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
   .code-pre {
     padding-inline: 12px 12px;
     position: relative;

src/global.less

@@ -15,6 +15,7 @@ html {
   --color-scrollbar-thumb: rgba(193, 193, 193, 80%);
   --scrollbar-size: 6px;
   --scrollbar-handle-bg: rgba(0, 0, 0, 44%);
+  --scrollbar-handle-light-bg: rgba(255, 255, 255, 44%);
   --scrollbar-handle-hover-bg: rgba(0, 0, 0, 55%);
   --color-editor-dark: #282c34;
   --color-editor-light: #fafafa;

src/pages/playground/components/message-input.tsx

@@ -162,9 +162,14 @@ const MessageInput: React.FC<MessageInputProps> = ({
     setOpen(true);
   };
 
-  const handleAddMessage = () => {
+  const handleAddMessage = (e?: any) => {
+    e?.preventDefault();
     addMessage?.({ ...message });
     resetMessage();
+    setFocused(true);
+    setTimeout(() => {
+      inputRef.current?.focus?.();
+    }, 100);
   };
 
   const getPasteContent = useCallback(

src/pages/playground/components/view-code-modal.tsx

@@ -135,6 +135,12 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
                 backgroundColor: 'var(--color-editor-dark)'
               }
             }}
+          >
+            <div
+              style={{
+                paddingRight: 2,
+                paddingBottom: 2
+              }}
             >
               <HighlightCode
                 height={380}
@@ -143,6 +149,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
                 lang={lang}
                 copyable={false}
               ></HighlightCode>
+            </div>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}