@lobehub/chat 0.111.1 → 0.111.2

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+### [Version 0.111.2](https://github.com/lobehub/lobe-chat/compare/v0.111.1...v0.111.2)
+
+<sup>Released on **2023-12-13**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Change topic-deletion hotkey.
+
+#### 💄 Styles
+
+- **misc**: Fix image display in safari (fix.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Change topic-deletion hotkey, closes [#616](https://github.com/lobehub/lobe-chat/issues/616) ([912ff45](https://github.com/lobehub/lobe-chat/commit/912ff45))
+
+#### Styles
+
+- **misc**: Fix image display in safari (fix, closes [#571](https://github.com/lobehub/lobe-chat/issues/571) ([4beefa7](https://github.com/lobehub/lobe-chat/commit/4beefa7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.111.1](https://github.com/lobehub/lobe-chat/compare/v0.111.0...v0.111.1)
 
 <sup>Released on **2023-12-13**</sup>

package/locales/en_US/plugin.json

@@ -123,6 +123,7 @@
       "installed": "Installed"
     },
     "title": "Plugin Store",
-    "uninstall": "Uninstall"
+    "uninstall": "Uninstall",
+    "placeholder": "Search for plugin name, description, or keywords..."
   }
 }

package/locales/fr_FR/plugin.json

@@ -123,6 +123,7 @@
       "installed": "Installés"
     },
     "title": "Boutique de plugins",
-    "uninstall": "Désinstaller"
+    "uninstall": "Désinstaller",
+    "placeholder": "Rechercher le nom ou les mots-clés de l'extension..."
   }
 }

package/locales/ja_JP/plugin.json

@@ -123,6 +123,7 @@
       "installed": "インストール済み"
     },
     "title": "プラグインストア",
-    "uninstall": "アンインストール"
+    "uninstall": "アンインストール",
+    "placeholder": "プラグイン名、説明、またはキーワードで検索..."
   }
 }

package/locales/ko_KR/plugin.json

@@ -123,6 +123,7 @@
       "installed": "설치됨"
     },
     "title": "플러그인 상점",
-    "uninstall": "제거"
+    "uninstall": "제거",
+    "placeholder": "플러그인 이름 또는 키워드로 검색..."
   }
 }

package/locales/ru_RU/plugin.json

@@ -123,6 +123,7 @@
       "installed": "Установленные"
     },
     "title": "Магазин плагинов",
-    "uninstall": "Удалить"
+    "uninstall": "Удалить",
+    "placeholder": "Введите название или ключевое слово плагина..."
   }
 }

package/locales/zh_CN/plugin.json

@@ -117,6 +117,7 @@
     "install": "安装",
     "installAllPlugins": "安装全部",
     "networkError": "获取插件商店失败，请检测网络连接后重试",
+    "placeholder": "搜索插件名称介绍或关键词...",
     "releasedAt": "发布于 {{createdAt}}",
     "tabs": {
       "all": "全部",

package/locales/zh_TW/plugin.json

@@ -123,6 +123,7 @@
       "installed": "已安裝"
     },
     "title": "插件商店",
-    "uninstall": "卸載"
+    "uninstall": "卸載",
+    "placeholder": "搜尋插件名稱介紹或關鍵字..."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.111.1",
+  "version": "0.111.2",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/chat/features/ChatInput/ActionBar/Clear.tsx

@@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
-import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
 
@@ -14,7 +14,7 @@ const Clear = memo(() => {
   const { t } = useTranslation('setting');
   const [clearMessage] = useChatStore((s) => [s.clearMessage]);
   const [clearImageList] = useFileStore((s) => [s.clearImageList]);
-  const hotkeys = [PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
+  const hotkeys = [META_KEY, PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
 
   const resetConversation = useCallback(() => {
     clearMessage();

package/src/app/chat/features/Migration/Modal.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { Button, Result } from 'antd';
-import { BadgeCheck, CpuIcon } from 'lucide-react';
+import { CheckCircle, CpuIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
@@ -48,7 +48,7 @@ const MigrationModal = memo<MigrationModalProps>(({ setOpen, open, state: dbStat
                 {t('dbV1.action.start')}
               </Button>
             }
-            icon={<Icon icon={BadgeCheck} />}
+            icon={<Icon icon={CheckCircle} />}
             status={'success'}
             style={{ paddingBlock: 24 }}
             subTitle={t('dbV1.upgrade.success.subTitle')}

package/src/components/FileList/FileItem.tsx

@@ -62,9 +62,11 @@ const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
       }
       alt={data?.name || id || ''}
       alwaysShowActions={alwaysShowClose}
+      height={'auto'}
       isLoading={isLoading}
       size={IMAGE_SIZE as any}
       src={data?.url}
+      style={{ height: 'auto' }}
       wrapperClassName={cx(styles.image, editable && styles.editableImage)}
     />
   );

package/src/components/HotKeys/index.tsx

@@ -1,10 +1,13 @@
 'use client';
 
+import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { isString } from 'lodash-es';
+import { Command, Delete, Option } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
 import { isApplePlatform } from '@/utils/platform';
 
 const useStyles = createStyles(
@@ -13,14 +16,15 @@ const useStyles = createStyles(
 
     span {
       font-weight: 600;
-      opacity: 0.5;
     }
 
     kbd {
-      padding: 3px 5px;
+      min-width: 16px;
+      padding: 3px 6px;
 
       line-height: 1;
-      color: ${token.colorTextSecondary};
+      color: ${token.colorTextDescription};
+      text-align: center;
 
       background: ${token.colorBgContainer};
       border: 1px solid ${token.colorBorderSecondary};
@@ -42,9 +46,10 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
 
   useEffect(() => {
-    const mapping: Record<string, string> = {
-      [CLEAN_MESSAGE_KEY]: isApplePlatform() ? '⌫' : 'backspace',
-      [PREFIX_KEY]: isApplePlatform() ? '⌥' : 'alt',
+    const mapping: Record<string, any> = {
+      [CLEAN_MESSAGE_KEY]: isApplePlatform() ? <Icon icon={Delete} /> : 'backspace',
+      [META_KEY]: isApplePlatform() ? <Icon icon={Command} /> : 'ctrl',
+      [PREFIX_KEY]: isApplePlatform() ? <Icon icon={Option} /> : 'alt',
     };
     const newValue = keys
       .split('+')
@@ -57,7 +62,7 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
     <Flexbox align={'center'} className={styles} gap={2} horizontal>
       {keysGroup.map((key, index) => (
         <kbd key={index}>
-          <span style={{ visibility }}>{key.toUpperCase()}</span>
+          <span style={{ visibility }}>{isString(key) ? key.toUpperCase() : key}</span>
         </kbd>
       ))}
     </Flexbox>

package/src/const/hotkeys.ts

@@ -1,4 +1,5 @@
 export const PREFIX_KEY = 'alt';
+export const META_KEY = 'mod';
 export const SAVE_TOPIC_KEY = 'n';
 export const CLEAN_MESSAGE_KEY = 'backspace';
 export const REGENERATE_KEY = 'r';

package/src/features/DataImporter/index.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@lobehub/ui';
 import { Button, Result, Table, Upload } from 'antd';
 import { createStyles } from 'antd-style';
-import { BadgeCheck, ImportIcon } from 'lucide-react';
+import { CheckCircle, ImportIcon } from 'lucide-react';
 import React, { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -169,7 +169,7 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
                   {t('importModal.finish.start')}
                 </Button>
               }
-              icon={<Icon icon={BadgeCheck} />}
+              icon={<Icon icon={CheckCircle} />}
               status={'success'}
               style={{ paddingBlock: 24 }}
               subTitle={

package/src/features/PluginSettingsModal/index.tsx

@@ -25,6 +25,8 @@ const PluginSettingsModal = memo<PluginSettingsModalProps>(({ schema, onClose, i
   const theme = useTheme();
   return (
     <Modal
+      cancelText={t('cancel', { ns: 'common' })}
+      okText={t('ok', { ns: 'common' })}
       onCancel={onClose}
       onOk={() => {
         onClose();

package/src/features/PluginStore/PluginItem.tsx

@@ -1,7 +1,8 @@
 import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
-import { Avatar, Tag } from '@lobehub/ui';
+import { Avatar, Icon, Tag } from '@lobehub/ui';
 import { Button } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
+import { BadgeCheck, CircleUser } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,13 +15,13 @@ import PluginSettings from './PluginSettings';
 
 const useStyles = createStyles(({ css, token }) => ({
   desc: css`
-    color: ${token.colorTextSecondary};
+    color: ${token.colorTextDescription};
   `,
   link: css`
-    color: ${token.colorTextDescription};
+    color: ${token.colorText};
   `,
   tag: css`
-    font-weight: normal;
+    color: ${token.colorTextSecondary};
   `,
   title: css`
     font-size: ${token.fontSizeLG}px;
@@ -28,52 +29,52 @@ const useStyles = createStyles(({ css, token }) => ({
     line-height: 2;
   `,
 }));
-const PluginItem = memo<LobeChatPluginMeta>(({ identifier, createdAt, homepage, author, meta }) => {
+const PluginItem = memo<LobeChatPluginMeta>(({ identifier, homepage, author, meta }) => {
   const [installed, installing, installPlugin, unInstallPlugin] = useToolStore((s) => [
     pluginSelectors.isPluginInstalled(identifier)(s),
     pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
     s.installPlugin,
     s.uninstallPlugin,
   ]);
+  const { mobile } = useResponsive();
   const { styles } = useStyles();
 
   const { t } = useTranslation('plugin');
   return (
-    <Flexbox gap={8} padding={16}>
-      <Flexbox horizontal justify={'space-between'}>
-        <Avatar avatar={meta.avatar} size={56} style={{ flex: 'none' }} />
-
-        <Flexbox gap={8} horizontal>
-          <PluginSettings identifier={identifier} />
-          <Button
-            loading={installing}
-            onClick={() => {
-              if (installed) {
-                unInstallPlugin(identifier);
-              } else installPlugin(identifier);
-            }}
-            type={installed ? 'default' : 'primary'}
-          >
-            {t(installed ? 'store.uninstall' : 'store.install')}
-          </Button>
-        </Flexbox>
-      </Flexbox>
-
-      <Flexbox gap={4}>
-        <Flexbox align={'center'} gap={8} horizontal>
-          <div className={styles.title}>{meta.title}</div>
-          <Tag className={styles.tag}> {identifier}</Tag>
-        </Flexbox>
-        <div className={styles.desc}>{meta.description}</div>
-        <Flexbox className={styles.link} gap={8} horizontal>
-          {author && (
+    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Avatar avatar={meta.avatar} size={mobile ? 40 : 56} style={{ flex: 'none' }} />
+        <Flexbox gap={4}>
+          <Flexbox align={'center'} gap={8} horizontal>
             <Link className={styles.link} href={homepage} target={'_blank'}>
-              @{author}
+              <div className={styles.title}>{meta.title}</div>
             </Link>
-          )}
-          {t('store.releasedAt', { createdAt })}
+
+            <Tag
+              className={styles.tag}
+              icon={<Icon icon={author === 'LobeHub' ? BadgeCheck : CircleUser} />}
+            >
+              {author}
+            </Tag>
+          </Flexbox>
+          <div className={styles.desc}>{meta.description} </div>
         </Flexbox>
       </Flexbox>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <PluginSettings identifier={identifier} />
+        <Button
+          loading={installing}
+          onClick={() => {
+            if (installed) {
+              unInstallPlugin(identifier);
+            } else installPlugin(identifier);
+          }}
+          size={mobile ? 'small' : undefined}
+          type={installed ? 'default' : 'primary'}
+        >
+          {t(installed ? 'store.uninstall' : 'store.install')}
+        </Button>
+      </Flexbox>
     </Flexbox>
   );
 });

package/src/features/PluginStore/PluginSettings.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
-import { SettingsIcon } from 'lucide-react';
+import { Settings2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -19,7 +19,7 @@ const PluginSettings = memo<{ identifier: string }>(({ identifier }) => {
   return (
     <>
       <ActionIcon
-        icon={SettingsIcon}
+        icon={Settings2}
         onClick={() => {
           setOpen(true);
         }}

package/src/features/PluginStore/index.tsx

@@ -1,8 +1,9 @@
-import { Icon, Modal, SpotlightCard, TabsNav } from '@lobehub/ui';
-import { Button, Empty } from 'antd';
+import { Icon, Modal, SearchBar } from '@lobehub/ui';
+import { Button, Empty, Segmented } from 'antd';
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ServerCrash } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -13,13 +14,24 @@ import { pluginStoreSelectors } from '@/store/tool/selectors';
 import Loading from './Loading';
 import PluginItem from './PluginItem';
 
+const useStyles = createStyles(({ css, token }) => ({
+  header: css`
+    color: ${token.colorTextDescription};
+
+    > div {
+      flex: 1;
+    }
+  `,
+}));
+
 interface PluginStoreProps {
   open?: boolean;
   setOpen: (open: boolean) => void;
 }
 export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
+  const [keywords, setKeywords] = useState<string>();
   const { t } = useTranslation('plugin');
-
+  const { styles } = useStyles();
   const [listType, useFetchPluginList, installPlugins] = useToolStore((s) => [
     s.listType,
     s.useFetchPluginStore,
@@ -43,28 +55,19 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
       <MobilePadding>
         <Center>
           <Flexbox gap={24} width={'100%'}>
-            <Flexbox align={'center'} horizontal justify={'space-between'}>
-              <TabsNav
-                activeKey={listType}
-                items={[
-                  { key: 'all', label: t('store.tabs.all') },
-                  { key: 'installed', label: t('store.tabs.installed') },
-                ]}
+            <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+              <Segmented
+                block
                 onChange={(v) => {
                   useToolStore.setState({ listType: v as any });
                 }}
+                options={[
+                  { label: t('store.tabs.all'), value: 'all' },
+                  { label: t('store.tabs.installed'), value: 'installed' },
+                ]}
+                style={{ flex: 1 }}
+                value={listType}
               />
-              <Flexbox gap={8} horizontal>
-                {listType === 'all' && (
-                  <Button
-                    onClick={() => {
-                      installPlugins(pluginStoreList.map((item) => item.identifier));
-                    }}
-                  >
-                    {t('store.installAllPlugins')}
-                  </Button>
-                )}
-              </Flexbox>
             </Flexbox>
             {isLoading ? (
               <Loading />
@@ -83,7 +86,37 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
                 )}
               </Center>
             ) : (
-              <SpotlightCard columns={2} gap={16} items={pluginStoreList} renderItem={PluginItem} />
+              <>
+                <Flexbox className={styles.header} gap={8} horizontal>
+                  <SearchBar
+                    allowClear
+                    onChange={(e) => setKeywords(e.target.value)}
+                    placeholder={t('store.placeholder')}
+                    type={'block'}
+                    value={keywords}
+                  />
+                  {listType === 'all' && (
+                    <Button
+                      onClick={() => {
+                        installPlugins(pluginStoreList.map((item) => item.identifier));
+                      }}
+                    >
+                      {t('store.installAllPlugins')}
+                    </Button>
+                  )}
+                </Flexbox>
+
+                {pluginStoreList
+                  .filter((item) =>
+                    [item.meta.title, item.meta.description, item.author, ...(item.meta.tags || [])]
+                      .join('')
+                      .toLowerCase()
+                      .includes((keywords || '')?.toLowerCase()),
+                  )
+                  .map((item) => (
+                    <PluginItem key={item.identifier} {...item} />
+                  ))}
+              </>
             )}
           </Flexbox>
         </Center>

package/src/layout/GlobalLayout/Locale.tsx

@@ -15,7 +15,7 @@ const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
   const { data: locale } = useSWR(
     lang,
     async () =>
-      await import(`antd/locale/${lang?.includes('-') ? lang?.replace('-', '_') : 'en-US'}.js`),
+      await import(`antd/locale/${lang?.includes('-') ? lang?.replace('-', '_') : 'en_US'}.js`),
     { revalidateOnFocus: false },
   );
   const [i18n] = useState(createI18nNext(lang));

package/src/locales/default/plugin.ts

@@ -118,6 +118,7 @@ export default {
     install: '安装',
     installAllPlugins: '安装全部',
     networkError: '获取插件商店失败，请检测网络连接后重试',
+    placeholder: '搜索插件名称介绍或关键词...',
     releasedAt: '发布于 {{createdAt}}',
     tabs: {
       all: '全部',