From 68db6260d680420ab35e7623152afdc6e07fb0e2 Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Wed, 6 Sep 2023 19:58:38 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20new=20import=20statem?=
 =?UTF-8?q?ent=20for=20"Flexbox"=20component=20in=20"Empty"=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The code changes add a new import statement for the "Flexbox" component from the "react-layout-kit" library in the "Empty" component. This allows the usage of the "Flexbox" component in the "Empty" component.

feat: Add new "Flexbox" component wrapping existing content in "Empty" component

The code changes include adding a new "Flexbox" component in the "Empty" component, which wraps the existing content. This provides a flexible layout for the content in the "Empty" component.

style: Add new CSS class "image" with "align-self: center" property in "Empty" style file

The code changes in the "Empty" style file add a new CSS class called "image" with the "align-self: center" property. This aligns the image content in the "Empty" component to the center.

style: Change backdrop-filter blur value from 5px to 2px in "PluginDevModal" component

The code changes in the "PluginDevModal" component modify the backdrop-filter blur value from 5px to 2px. This adjusts the visual appearance of the modal backdrop.

feat: Add "enableShortKey" and "shortKey" props to "SearchBar" component in "SessionList/Header" component

The code changes in the "SessionList/Header" component include adding the "enableShortKey" prop and a new "shortKey" prop with the value "k" to the "SearchBar" component. This enables the usage of keyboard shortcuts for the search functionality in the header component.

Summary of changes:
- Added import statement for "Flexbox" component in "Empty" component
- Added new "Flexbox" component wrapping existing content in "Empty" component
- Added CSS class "image" with "align-self: center" property in "Empty" style file
- Changed backdrop-filter blur value from 5px to 2px in "PluginDevModal" component
- Added "enableShortKey" and "shortKey" props to "SearchBar" component in "SessionList/Header" component
---
 src/components/Empty/index.tsx        | 9 ++++++---
 src/components/Empty/style.ts         | 3 +++
 src/features/PluginDevModal/index.tsx | 2 +-
 src/pages/chat/SessionList/Header.tsx | 2 ++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx
index 87a6fbf12bb7..d7a744cd3e79 100644
--- a/src/components/Empty/index.tsx
+++ b/src/components/Empty/index.tsx
@@ -2,6 +2,7 @@ import { ActionIcon, DivProps } from '@lobehub/ui';
 import { X } from 'lucide-react';
 import Image from 'next/image';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
 
 import { useStyles } from './style';
@@ -40,19 +41,21 @@ const Empty = memo<EmptyProps>(
     const { styles } = useStyles();
     if (!value) return null;
     return (
-      <div className={styles.container} {...props}>
+      <Flexbox className={styles.container} {...props}>
         <ActionIcon
           className={styles.close}
           icon={X}
           onClick={() => setValue(false)}
           size={{ blockSize: 24, fontSize: 16 }}
         />
-        {cover && <Image alt={alt} height={height} src={cover} width={width} />}
+        {cover && (
+          <Image alt={alt} className={styles.image} height={height} src={cover} width={width} />
+        )}
         <div className={styles.content}>
           {title && <h3>{title}</h3>}
           {desc && <p className={styles.desc}>{desc}</p>}
         </div>
-      </div>
+      </Flexbox>
     );
   },
 );
diff --git a/src/components/Empty/style.ts b/src/components/Empty/style.ts
index c84e49fd7407..a80152d4735b 100644
--- a/src/components/Empty/style.ts
+++ b/src/components/Empty/style.ts
@@ -25,4 +25,7 @@ export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   desc: css`
     color: ${token.colorTextDescription};
   `,
+  image: css`
+    align-self: center;
+  `,
 }));
diff --git a/src/features/PluginDevModal/index.tsx b/src/features/PluginDevModal/index.tsx
index ec3e3c33e34a..7d2f789d03bc 100644
--- a/src/features/PluginDevModal/index.tsx
+++ b/src/features/PluginDevModal/index.tsx
@@ -21,7 +21,7 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
     }
   `,
   root: css`
-    backdrop-filter: blur(5px);
+    backdrop-filter: blur(2px);
   `,
 }));
 
diff --git a/src/pages/chat/SessionList/Header.tsx b/src/pages/chat/SessionList/Header.tsx
index aee5d9e1fe16..ebe595862a0b 100644
--- a/src/pages/chat/SessionList/Header.tsx
+++ b/src/pages/chat/SessionList/Header.tsx
@@ -63,8 +63,10 @@ const Header = memo<{ mobile?: 'navbar' | 'search' }>(({ mobile }) => {
       </Flexbox>
       <SearchBar
         allowClear
+        enableShortKey
         onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
         placeholder={t('searchAgentPlaceholder')}
+        shortKey={'k'}
         spotlight
         type={'ghost'}
         value={keywords}