✨ feat: Add new import statement for "Flexbox" component in "Empty" c…

…omponent

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

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

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;
+  `,
 }));

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

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}