From 80c34aaad2f6bca7ee5f5c81a69d91b2ec89c517 Mon Sep 17 00:00:00 2001
From: zouwangqiang <zouwangqiang@corp-ci.com>
Date: Fri, 12 May 2023 17:45:47 +0800
Subject: [PATCH] -  refactor(ConversationCard): add event listener to close
 the window on Escape key press -  refactor(ConversationCard): change style of
 header to allow for dragging -  refactor(ConversationCard): change select
 width to auto -  refactor(FloatingToolbar): change handle class from dragbar
 to draggable -  refactor(styles.scss): add scrollbar and resizer styles to
 the conversation card and change select width to auto

---
 src/components/ConversationCard/index.jsx | 19 ++++++++++++++-----
 src/components/FloatingToolbar/index.jsx  |  2 +-
 src/content-script/styles.scss            | 21 ++++++++++++++++++++-
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx
index 17bedec..f0720a7 100644
--- a/src/components/ConversationCard/index.jsx
+++ b/src/components/ConversationCard/index.jsx
@@ -68,6 +68,14 @@ function ConversationCard(props) {
   )
   const config = useConfig()
 
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape' || event.keyCode === 27) {
+      // 关闭窗口代码
+      port.disconnect()
+      if (props.onClose) props.onClose()
+    }
+  })
+
   useEffect(() => {
     if (props.onUpdate) props.onUpdate(port, session, conversationItemData)
   }, [session, conversationItemData])
@@ -197,7 +205,10 @@ function ConversationCard(props) {
 
   return (
     <div className="gpt-inner">
-      <div className="gpt-header" style="margin: 15px;">
+      <div
+        className={props.draggable ? 'gpt-header draggable' : 'gpt-header'}
+        style="padding: 15px;user-select:none;"
+      >
         <span className="gpt-util-group">
           {props.closeable ? (
             <XLg
@@ -222,7 +233,7 @@ function ConversationCard(props) {
             <img src={logo} style="user-select:none;width:20px;height:20px;" />
           )}
           <select
-            style={props.notClampSize ? {} : { width: windowSize[0] * 0.05 + 'px' }}
+            style={props.notClampSize ? {} : { width: 'auto' }}
             className="normal-button"
             required
             onChange={(e) => {
@@ -255,9 +266,7 @@ function ConversationCard(props) {
             })}
           </select>
         </span>
-        {props.draggable ? (
-          <div className="dragbar" />
-        ) : (
+        {!props.draggable && (
           <WindowDesktop
             className="gpt-util-icon"
             title={t('Float the Window')}
diff --git a/src/components/FloatingToolbar/index.jsx b/src/components/FloatingToolbar/index.jsx
index a8156ae..64a61bf 100644
--- a/src/components/FloatingToolbar/index.jsx
+++ b/src/components/FloatingToolbar/index.jsx
@@ -80,7 +80,7 @@ function FloatingToolbar(props) {
     return (
       <div data-theme={config.themeMode}>
         <Draggable
-          handle=".dragbar"
+          handle=".draggable"
           onDrag={dragEvent.onDrag}
           onStop={dragEvent.onStop}
           position={virtualPosition}
diff --git a/src/content-script/styles.scss b/src/content-script/styles.scss
index 69458bd..a113962 100644
--- a/src/content-script/styles.scss
+++ b/src/content-script/styles.scss
@@ -88,8 +88,27 @@
     padding: 5px 15px 10px;
     background-color: var(--theme-color);
     color: var(--font-color);
-    overflow-y: auto;
+    ::-webkit-scrollbar {
+      background-color: var(--theme-color);
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: var(--dragbar-color);
+    }
+    &::-webkit-scrollbar {
+      background-color: var(--theme-color);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--dragbar-color);
+    }
+    ::-webkit-resizer {
+      background-color: var(--theme-color);
+    }
+    &::-webkit-resizer {
+      background-color: var(--theme-color);
+    }
 
+    overflow-y: auto;
+    min-height: 300px;
     p {
       color: var(--font-color);
     }