@lobehub/chat 0.161.9 → 0.161.11

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.161.11](https://github.com/lobehub/lobe-chat/compare/v0.161.10...v0.161.11)
+
+<sup>Released on **2024-05-23**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve PWA install guide.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve PWA install guide, closes [#2617](https://github.com/lobehub/lobe-chat/issues/2617) ([7fee545](https://github.com/lobehub/lobe-chat/commit/7fee545))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.161.10](https://github.com/lobehub/lobe-chat/compare/v0.161.9...v0.161.10)
+
+<sup>Released on **2024-05-23**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Refactor user store and fix custom model list form.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Refactor user store and fix custom model list form, closes [#2620](https://github.com/lobehub/lobe-chat/issues/2620) ([81ea886](https://github.com/lobehub/lobe-chat/commit/81ea886))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.9](https://github.com/lobehub/lobe-chat/compare/v0.161.8...v0.161.9)
 
 <sup>Released on **2024-05-23**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.9",
+  "version": "0.161.11",
   "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",
@@ -94,6 +94,7 @@
     "@clerk/themes": "^2.1.6",
     "@google/generative-ai": "^0.11.3",
     "@icons-pack/react-simple-icons": "^9.5.0",
+    "@khmyznikov/pwa-install": "^0.3.9",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/icons": "^1.22.0",

package/src/app/(main)/_layout/Desktop.tsx

@@ -4,12 +4,12 @@ import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useIsPWA } from '@/hooks/useIsPWA';
+import { usePlatform } from '@/hooks/usePlatform';
 
 import { LayoutProps } from './type';
 
 const Layout = memo<LayoutProps>(({ children, nav }) => {
-  const isPWA = useIsPWA();
+  const { isPWA } = usePlatform();
   const theme = useTheme();
 
   return (

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -50,6 +50,8 @@ interface ProviderConfigProps {
   canDeactivate?: boolean;
   checkModel?: string;
   checkerItem?: FormItemProps;
+  className?: string;
+  hideSwitch?: boolean;
   modelList?: {
     azureDeployName?: boolean;
     notFoundContent?: ReactNode;
@@ -81,11 +83,12 @@ const ProviderConfig = memo<ProviderConfigProps>(
     checkerItem,
     modelList,
     showBrowserRequest,
+    className,
   }) => {
     const { t } = useTranslation('setting');
     const { t: modelT } = useTranslation('modelProvider');
     const [form] = Form.useForm();
-    const { styles } = useStyles();
+    const { cx, styles } = useStyles();
     const [
       toggleProviderEnabled,
       setSettings,
@@ -192,7 +195,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
 
     return (
       <Form
-        className={styles.form}
+        className={cx(styles.form, className)}
         form={form}
         items={[model]}
         onValuesChange={debounce(setSettings, 100)}

package/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -71,18 +71,17 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
             e.stopPropagation();
             e.preventDefault();
 
-            const isConfirm = await modal.confirm({
+            await modal.confirm({
               centered: true,
               content: s('llm.customModelCards.confirmDelete'),
               okButtonProps: { danger: true },
+              onOk: async () => {
+                // delete model and deactivate id
+                await dispatchCustomModelCards(provider, { id, type: 'delete' });
+                await removeEnabledModels(provider, id);
+              },
               type: 'warning',
             });
-
-            // delete model and deactive id
-            if (isConfirm) {
-              await dispatchCustomModelCards(provider, { id, type: 'delete' });
-              await removeEnabledModels(provider, id);
-            }
           }}
           title={t('delete')}
         />

package/src/app/(main)/settings/llm/components/ProviderModelList/{ModelConfigModal.tsx → ModelConfigModal/Form.tsx}

@@ -1,71 +1,28 @@
-import { Modal } from '@lobehub/ui';
-import { Button, Checkbox, Form, Input } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useUserStore } from '@/store/user';
-import { modelConfigSelectors } from '@/store/user/selectors';
+import { ChatModelCard } from '@/types/llm';
 
 import MaxTokenSlider from './MaxTokenSlider';
 
-interface ModelConfigModalProps {
-  provider?: string;
+interface ModelConfigFormProps {
+  initialValues?: ChatModelCard;
+  onFormInstanceReady: (instance: FormInstance) => void;
   showAzureDeployName?: boolean;
 }
-const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
-  const [formInstance] = Form.useForm();
-  const { t } = useTranslation('setting');
-  const { t: tc } = useTranslation('common');
 
-  const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
-    useUserStore((s) => [
-      !!s.editingCustomCardModel && provider === s.editingCustomCardModel?.provider,
-      s.editingCustomCardModel?.id,
-      s.editingCustomCardModel?.provider,
-      s.dispatchCustomModelCards,
-      s.toggleEditingCustomModelCard,
-    ]);
+const ModelConfigForm = memo<ModelConfigFormProps>(
+  ({ showAzureDeployName, onFormInstanceReady, initialValues }) => {
+    const { t } = useTranslation('setting');
 
-  const modelCard = useUserStore(
-    modelConfigSelectors.getCustomModelCard({ id, provider: editingProvider }),
-    isEqual,
-  );
+    const [formInstance] = Form.useForm();
 
-  const closeModal = () => {
-    toggleEditingCustomModelCard(undefined);
-  };
+    useEffect(() => {
+      onFormInstanceReady(formInstance);
+    }, []);
 
-  return (
-    <Modal
-      destroyOnClose
-      footer={[
-        <Button key="cancel" onClick={closeModal}>
-          {tc('cancel')}
-        </Button>,
-
-        <Button
-          key="ok"
-          onClick={() => {
-            if (!editingProvider || !id) return;
-            const data = formInstance.getFieldsValue();
-
-            dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
-
-            closeModal();
-          }}
-          style={{ marginInlineStart: '16px' }}
-          type="primary"
-        >
-          {tc('ok')}
-        </Button>,
-      ]}
-      maskClosable
-      onCancel={closeModal}
-      open={open}
-      title={t('llm.customModelCards.modelConfig.modalTitle')}
-      zIndex={1051} // Select is 1050
-    >
+    return (
       <div
         onClick={(e) => {
           e.stopPropagation();
@@ -77,9 +34,8 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
         <Form
           colon={false}
           form={formInstance}
-          initialValues={modelCard}
+          initialValues={initialValues}
           labelCol={{ span: 4 }}
-          preserve={false}
           style={{ marginTop: 16 }}
           wrapperCol={{ offset: 1, span: 18 }}
         >
@@ -136,7 +92,7 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
           </Form.Item>
         </Form>
       </div>
-    </Modal>
-  );
-});
-export default ModelConfigModal;
+    );
+  },
+);
+export default ModelConfigForm;

package/src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/index.tsx

@@ -0,0 +1,78 @@
+import { Modal } from '@lobehub/ui';
+import { Button, FormInstance } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useUserStore } from '@/store/user';
+import { modelConfigSelectors } from '@/store/user/slices/modelList/selectors';
+
+import ModelConfigForm from './Form';
+
+interface ModelConfigModalProps {
+  provider?: string;
+  showAzureDeployName?: boolean;
+}
+
+const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
+  const { t } = useTranslation('setting');
+  const { t: tc } = useTranslation('common');
+  const [formInstance, setFormInstance] = useState<FormInstance>();
+
+  const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
+    useUserStore((s) => [
+      !!s.editingCustomCardModel && provider === s.editingCustomCardModel?.provider,
+      s.editingCustomCardModel?.id,
+      s.editingCustomCardModel?.provider,
+      s.dispatchCustomModelCards,
+      s.toggleEditingCustomModelCard,
+    ]);
+
+  const modelCard = useUserStore(
+    modelConfigSelectors.getCustomModelCard({ id, provider: editingProvider }),
+    isEqual,
+  );
+
+  const closeModal = () => {
+    toggleEditingCustomModelCard(undefined);
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      footer={[
+        <Button key="cancel" onClick={closeModal}>
+          {tc('cancel')}
+        </Button>,
+
+        <Button
+          key="ok"
+          onClick={() => {
+            if (!editingProvider || !id || !formInstance) return;
+            const data = formInstance.getFieldsValue();
+
+            dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
+
+            closeModal();
+          }}
+          style={{ marginInlineStart: '16px' }}
+          type="primary"
+        >
+          {tc('ok')}
+        </Button>,
+      ]}
+      maskClosable
+      onCancel={closeModal}
+      open={open}
+      title={t('llm.customModelCards.modelConfig.modalTitle')}
+      zIndex={1251} // Select is 1150
+    >
+      <ModelConfigForm
+        initialValues={modelCard}
+        onFormInstanceReady={setFormInstance}
+        showAzureDeployName={showAzureDeployName}
+      />
+    </Modal>
+  );
+});
+export default ModelConfigModal;

package/src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx

@@ -1,6 +1,10 @@
+import { ActionIcon, Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { Recycle } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import ModelIcon from '@/components/ModelIcon';
@@ -16,25 +20,45 @@ interface OptionRenderProps {
   id: string;
   isAzure?: boolean;
   provider: GlobalLLMProviderKey;
+  removed?: boolean;
 }
-const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure }) => {
+const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure, removed }) => {
   const model = useUserStore((s) => modelProviderSelectors.getModelCardById(id)(s), isEqual);
-
+  const { t } = useTranslation('components');
+  const theme = useTheme();
   // if there is isCustom, it means it is a user defined custom model
   if (model?.isCustom || isAzure) return <CustomModelOption id={id} provider={provider} />;
 
   return (
-    <Flexbox align={'center'} gap={8} horizontal>
-      <ModelIcon model={id} size={32} />
-      <Flexbox>
-        <Flexbox align={'center'} gap={8} horizontal>
-          {displayName}
-          <ModelInfoTags directionReverse placement={'top'} {...model!} />
+    <Flexbox
+      align={'center'}
+      gap={8}
+      horizontal
+      justify={'space-between'}
+      style={{ paddingInlineEnd: 8 }}
+    >
+      <Flexbox align={'center'} gap={8} horizontal>
+        <ModelIcon model={id} size={32} />
+        <Flexbox>
+          <Flexbox align={'center'} gap={8} horizontal>
+            {displayName}
+            <ModelInfoTags directionReverse placement={'top'} {...model!} />
+          </Flexbox>
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {id}
+          </Typography.Text>
         </Flexbox>
-        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
-          {id}
-        </Typography.Text>
       </Flexbox>
+      {removed && (
+        <Tooltip
+          overlayStyle={{ maxWidth: 300 }}
+          placement={'top'}
+          style={{ pointerEvents: 'none' }}
+          title={t('ModelSelect.removed')}
+        >
+          <ActionIcon icon={Recycle} style={{ color: theme.colorWarning }} />
+        </Tooltip>
+      )}
     </Flexbox>
   );
 });

package/src/app/(main)/settings/llm/components/ProviderModelList/index.tsx

@@ -51,10 +51,9 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
   ({ showModelFetcher = false, provider, showAzureDeployName, notFoundContent, placeholder }) => {
     const { t } = useTranslation('common');
     const { t: transSetting } = useTranslation('setting');
-    const [setModelProviderConfig, dispatchCustomModelCards] = useUserStore((s) => [
+    const [setModelProviderConfig, updateEnabledModels] = useUserStore((s) => [
       s.setModelProviderConfig,
-      s.dispatchCustomModelCards,
-      s.useFetchProviderModelList,
+      s.updateEnabledModels,
     ]);
 
     const chatModelCards = useUserStore(
@@ -94,21 +93,7 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
               mode="tags"
               notFoundContent={notFoundContent}
               onChange={(value, options) => {
-                setModelProviderConfig(provider, { enabledModels: value.filter(Boolean) });
-
-                // if there is a new model, add it to `customModelCards`
-                options.forEach((option: { label?: string; value?: string }, index: number) => {
-                  // if is a known model, it should have value
-                  // if is an unknown model, the option will be {}
-                  if (option.value) return;
-
-                  const modelId = value[index];
-
-                  dispatchCustomModelCards(provider, {
-                    modelCard: { id: modelId },
-                    type: 'add',
-                  });
-                });
+                updateEnabledModels(provider, value, options as any[]);
               }}
               optionFilterProp="label"
               optionRender={({ label, value }) => {
@@ -123,6 +108,18 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
                     />
                   );
 
+                if (enabledModels?.some((m) => value === m)) {
+                  return (
+                    <OptionRender
+                      displayName={label as string}
+                      id={value as string}
+                      isAzure={showAzureDeployName}
+                      provider={provider}
+                      removed
+                    />
+                  );
+                }
+
                 // model is defined by user in client
                 return (
                   <Flexbox align={'center'} gap={8} horizontal>

package/src/app/layout.tsx

@@ -6,6 +6,7 @@ import { isRtlLang } from 'rtl-detect';
 
 import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import PWAInstall from '@/features/PWAInstall';
 import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
 import { isMobileDevice } from '@/utils/responsive';
@@ -31,6 +32,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
             {children}
             {modal}
           </AuthProvider>
+          <PWAInstall />
         </GlobalProvider>
         <Analytics />
         {inVercel && <SpeedInsights />}

package/src/components/ModelProviderIcon/index.tsx

@@ -5,6 +5,7 @@ import {
   DeepSeek,
   Google,
   Groq,
+  LobeHub,
   Minimax,
   Mistral,
   Moonshot,
@@ -16,7 +17,6 @@ import {
   ZeroOne,
   Zhipu,
 } from '@lobehub/icons';
-import { Logo } from '@lobehub/ui';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
@@ -29,7 +29,7 @@ interface ModelProviderIconProps {
 const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
   switch (provider) {
     case 'lobehub': {
-      return <Logo size={20} />;
+      return <LobeHub size={20} />;
     }
 
     case ModelProvider.ZhiPu: {

package/src/components/ModelSelect/index.tsx

@@ -79,10 +79,10 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
     return (
       <Flexbox direction={directionReverse ? 'horizontal-reverse' : 'horizontal'} gap={4}>
         {model.files && (
-          <Tooltip 
+          <Tooltip
             overlayStyle={{ pointerEvents: 'none' }}
-            placement={placement} 
-            title={t('ModelSelect.featureTag.file')} 
+            placement={placement}
+            title={t('ModelSelect.featureTag.file')}
           >
             <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
               <Icon icon={LucidePaperclip} />
@@ -90,9 +90,9 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
           </Tooltip>
         )}
         {model.vision && (
-          <Tooltip 
+          <Tooltip
             overlayStyle={{ pointerEvents: 'none' }}
-            placement={placement} 
+            placement={placement}
             title={t('ModelSelect.featureTag.vision')}
           >
             <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
@@ -128,15 +128,6 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             </Center>
           </Tooltip>
         )}
-        {/*{model.isCustom && (*/}
-        {/*  <Tooltip*/}
-        {/*    overlayStyle={{ maxWidth: 300 }}*/}
-        {/*    placement={placement}*/}
-        {/*    title={t('ModelSelect.featureTag.custom')}*/}
-        {/*  >*/}
-        {/*    <Center className={styles.custom}>DIY</Center>*/}
-        {/*  </Tooltip>*/}
-        {/*)}*/}
       </Flexbox>
     );
   },

package/src/const/layoutTokens.ts

@@ -18,3 +18,4 @@ export const MOBILE_HEADER_ICON_SIZE = { blockSize: 36, fontSize: 22 };
 export const DESKTOP_HEADER_ICON_SIZE = { fontSize: 24 };
 export const HEADER_ICON_SIZE = (mobile?: boolean) =>
   mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE;
+export const PWA_INSTALL_ID = 'pwa-install';

package/src/features/PWAInstall/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PWA_INSTALL_ID } from '@/const/layoutTokens';
+import { usePlatform } from '@/hooks/usePlatform';
+
+// @ts-ignore
+const PWA: any = dynamic(() => import('@khmyznikov/pwa-install/dist/pwa-install.react.js'), {
+  ssr: false,
+});
+
+const PWAInstall = memo(() => {
+  const { t } = useTranslation('metadata');
+  const { isPWA } = usePlatform();
+  if (isPWA) return null;
+  return <PWA description={t('chat.description')} id={PWA_INSTALL_ID} />;
+});
+
+export default PWAInstall;

package/src/features/User/UserPanel/PanelContent.tsx

@@ -22,7 +22,7 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
     s.logout,
     s.openUserProfile,
     s.enableAuth(),
-    s.enabledNextAuth(),
+    s.enabledNextAuth,
   ]);
   const { mainItems, logoutItems } = useMenu();
 

package/src/hooks/usePWAInstall.test.ts

@@ -0,0 +1,78 @@
+import { act, renderHook } from '@testing-library/react';
+import { pwaInstallHandler } from 'pwa-install-handler';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { PWA_INSTALL_ID } from '@/const/layoutTokens';
+
+import { usePWAInstall } from './usePWAInstall';
+import { usePlatform } from './usePlatform';
+
+// Mocks
+vi.mock('./usePlatform', () => ({
+  usePlatform: vi.fn(),
+}));
+
+vi.mock('@/utils/env', () => ({
+  isOnServerSide: false,
+}));
+
+vi.mock('pwa-install-handler', () => ({
+  pwaInstallHandler: {
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    getEvent: vi.fn(),
+  },
+}));
+
+describe('usePWAInstall', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return canInstall as false when in PWA', () => {
+    vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: true, isPWA: true } as any);
+
+    const { result } = renderHook(() => usePWAInstall());
+
+    expect(result.current.canInstall).toBe(false);
+  });
+
+  it('should return canInstall based on canInstall state when support PWA', () => {
+    vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: true, isPWA: false } as any);
+
+    const { result, rerender } = renderHook(() => usePWAInstall());
+
+    expect(result.current.canInstall).toBe(false);
+
+    act(() => {
+      vi.mocked(pwaInstallHandler.addListener).mock.calls[0][0](true);
+    });
+
+    rerender();
+
+    expect(result.current.canInstall).toBe(true);
+  });
+
+  it('should return canInstall as true when not support PWA', () => {
+    vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: false, isPWA: false } as any);
+
+    const { result } = renderHook(() => usePWAInstall());
+
+    expect(result.current.canInstall).toBe(true);
+  });
+
+  it('should call pwa.showDialog when install is called', () => {
+    const mockShowDialog = vi.fn();
+    document.body.innerHTML = `<div id="${PWA_INSTALL_ID}"></div>`;
+    const pwaElement: any = document.querySelector(`#${PWA_INSTALL_ID}`);
+    pwaElement.showDialog = mockShowDialog;
+
+    const { result } = renderHook(() => usePWAInstall());
+
+    act(() => {
+      result.current.install();
+    });
+
+    expect(mockShowDialog).toHaveBeenCalledWith(true);
+  });
+});