- 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

Author: zouwangqiang

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')}

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}

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);
     }