Merge branch 'main' of https://github.com/Hk-Gosuto/ChatGPT-Next-Web-…

…LangChain
MTDickens · Dec 11, 2024 · 4d2b2a1 · 4d2b2a1
2 parents 11e3e49 + c6156a8
commit 4d2b2a1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
@@ -323,6 +323,7 @@
     border: none;
     outline: none;
     font-size: 14px;
+    text-align: left;
   }
 
   &-search-input:focus {

diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
@@ -503,14 +503,27 @@ export function SearchSelector<T>(props: {
     }
   };
 
+  const { items, onClose } = props;
   // 过滤列表项
-  const filteredItems = props.items.filter(
+  const filteredItems = items.filter(
     (item) =>
       item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
       (item.subTitle &&
         item.subTitle.toLowerCase().includes(searchQuery.toLowerCase())),
   );
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
   return (
     <div className={styles["selector"]} onClick={() => props.onClose?.()}>
       <div
@@ -522,6 +535,7 @@ export function SearchSelector<T>(props: {
           <div className={styles["selector-search"]}>
             <input
               type="text"
+              autoFocus
               className={styles["selector-search-input"]}
               placeholder="search model"
               value={searchQuery}