@lobehub/chat 0.111.5 → 0.112.0

package/src/features/PluginDevModal/index.tsx

@@ -1,5 +1,5 @@
 import { Alert, Icon, Modal, Tooltip } from '@lobehub/ui';
-import { App, Button, Form, Popconfirm, Segmented } from 'antd';
+import { App, Button, Divider, Form, Popconfirm, Segmented } from 'antd';
 import { useResponsive } from 'antd-style';
 import { MoveUpRight } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
@@ -10,9 +10,8 @@ import MobilePadding from '@/components/MobilePadding';
 import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
-import LocalForm from './LocalForm';
 import PluginPreview from './PluginPreview';
-import UrlModeForm from './UrlModeForm';
+import UrlManifestForm from './UrlManifestForm';
 
 interface DevModalProps {
   mode?: 'edit' | 'create';
@@ -108,7 +107,7 @@ const DevModal = memo<DevModalProps>(
             form.submit();
           }}
           open={open}
-          title={t('dev.title')}
+          title={t(isEditMode ? 'dev.title.edit' : 'dev.title.create')}
         >
           <Flexbox
             gap={mobile ? 0 : 16}
@@ -135,35 +134,35 @@ const DevModal = memo<DevModalProps>(
                 showIcon
                 type={'info'}
               />
+              <Segmented
+                block
+                onChange={(e) => {
+                  setConfigMode(e as any);
+                }}
+                options={[
+                  {
+                    label: t('dev.manifest.mode.url'),
+                    value: 'url',
+                  },
+                  {
+                    disabled: true,
+                    label: (
+                      <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
+                        {t('dev.manifest.mode.local')}
+                      </Tooltip>
+                    ),
+                    value: 'local',
+                  },
+                ]}
+              />
+              <Flexbox>
+                {configMode === 'url' ? (
+                  <UrlManifestForm form={form} isEditMode={mode === 'edit'} />
+                ) : null}
+                <Divider />
+                <PluginPreview form={form} />
+              </Flexbox>
             </MobilePadding>
-            <PluginPreview form={form} />
-            <Segmented
-              block
-              onChange={(e) => {
-                setConfigMode(e as any);
-              }}
-              options={[
-                {
-                  label: t('dev.manifest.mode.url'),
-                  value: 'url',
-                },
-                {
-                  disabled: true,
-                  label: (
-                    <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
-                      {t('dev.manifest.mode.local')}
-                    </Tooltip>
-                  ),
-                  value: 'local',
-                },
-              ]}
-            />
-            {configMode === 'url' ? (
-              <UrlModeForm form={form} isEditMode={mode === 'edit'} />
-            ) : (
-              <LocalForm form={form} mode={mode} />
-            )}
-            {/*<MetaForm form={form} mode={mode} />*/}
           </Flexbox>
         </Modal>
       </Form.Provider>

package/src/features/PluginSettings/index.tsx

@@ -53,7 +53,7 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
   const items = transformPluginSettings(schema);
 
   return (
-    <Form form={form} layout={'vertical'}>
+    <Form form={form} layout={'vertical'} style={{ width: '100%' }}>
       {items.map((item) => (
         <Form.Item
           desc={item.desc && <Markdown className={styles.markdown}>{item.desc as string}</Markdown>}

package/src/features/PluginStore/AddPluginButton.tsx

@@ -0,0 +1,47 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { PackagePlus } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DevModal from '@/features/PluginDevModal';
+import { useToolStore } from '@/store/tool';
+
+const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
+  const { t } = useTranslation('setting');
+  const [showModal, setModal] = useState(false);
+
+  const [installCustomPlugin, updateNewDevPlugin] = useToolStore((s) => [
+    s.installCustomPlugin,
+    s.updateNewCustomPlugin,
+  ]);
+
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <DevModal
+        onOpenChange={setModal}
+        onSave={async (devPlugin) => {
+          await installCustomPlugin(devPlugin);
+          // toggleAgentPlugin(devPlugin.identifier);
+        }}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+      />
+      <Button
+        icon={<Icon icon={PackagePlus} />}
+        onClick={() => {
+          setModal(true);
+        }}
+        ref={ref}
+      >
+        {t('plugin.addTooltip')}
+      </Button>
+    </div>
+  );
+});
+
+export default AddPluginButton;

package/src/features/PluginStore/InstalledPluginList.tsx

@@ -0,0 +1,54 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import AddPluginButton from './AddPluginButton';
+import PluginItem from './PluginItem';
+
+export const InstalledPluginList = memo(() => {
+  const { t } = useTranslation('plugin');
+  const [keywords, setKeywords] = useState<string>();
+  const { mobile } = useResponsive();
+  const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
+
+  return (
+    <Flexbox gap={16}>
+      <Flexbox align={'center'} gap={16} horizontal justify={'space-between'}>
+        <Flexbox flex={1}>
+          <SearchBar
+            allowClear
+            onChange={(e) => setKeywords(e.target.value)}
+            placeholder={t('store.placeholder')}
+            type={mobile ? 'block' : 'ghost'}
+            value={keywords}
+          />
+        </Flexbox>
+        <Flexbox gap={8} horizontal>
+          <AddPluginButton />
+        </Flexbox>
+      </Flexbox>
+
+      <Flexbox gap={24}>
+        {installedPlugins
+          .filter((item) =>
+            [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
+              .filter(Boolean)
+              .join('')
+              .toLowerCase()
+              .includes((keywords || '')?.toLowerCase()),
+          )
+          .map((i) => (
+            <PluginItem {...i} key={i.identifier} />
+          ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default InstalledPluginList;

package/src/features/PluginStore/OnlineList.tsx

@@ -0,0 +1,95 @@
+import { Icon, SearchBar } from '@lobehub/ui';
+import { Button, Empty } from 'antd';
+import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ServerCrash } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import AddPluginButton from '@/features/PluginStore/AddPluginButton';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
+
+import Loading from './Loading';
+import PluginItem from './PluginItem';
+
+export const OnlineList = memo(() => {
+  const { t } = useTranslation('plugin');
+  const [keywords, setKeywords] = useState<string>();
+  const { mobile } = useResponsive();
+  const pluginStoreList = useToolStore((s) => {
+    const custom = pluginSelectors.installedCustomPluginMetaList(s);
+    const store = pluginStoreSelectors.onlinePluginStore(s);
+
+    return [...custom, ...store];
+  }, isEqual);
+  const storePluginIds = useToolStore(
+    (s) => pluginStoreSelectors.onlinePluginStore(s).map((s) => s.identifier),
+    isEqual,
+  );
+
+  const [useFetchPluginList, installPlugins] = useToolStore((s) => [
+    s.useFetchPluginStore,
+    s.installPlugins,
+  ]);
+
+  const { isLoading, error } = useFetchPluginList();
+
+  const isEmpty = pluginStoreList.length === 0;
+
+  return (
+    <Flexbox gap={16}>
+      <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+        <Flexbox flex={1}>
+          <SearchBar
+            allowClear
+            onChange={(e) => setKeywords(e.target.value)}
+            placeholder={t('store.placeholder')}
+            type={mobile ? 'block' : 'ghost'}
+            value={keywords}
+          />
+        </Flexbox>
+        <AddPluginButton />
+        <Button
+          onClick={() => {
+            installPlugins(storePluginIds);
+          }}
+        >
+          {t('store.installAllPlugins')}
+        </Button>
+      </Flexbox>
+
+      {isLoading ? (
+        <Loading />
+      ) : isEmpty ? (
+        <Center gap={12} padding={40}>
+          {error ? (
+            <>
+              <Icon icon={ServerCrash} size={{ fontSize: 80 }} />
+              {t('store.networkError')}
+            </>
+          ) : (
+            <Empty description={t('store.empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          )}
+        </Center>
+      ) : (
+        <Flexbox gap={24}>
+          {pluginStoreList
+            .filter((item) =>
+              [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
+                .filter(Boolean)
+                .join('')
+                .toLowerCase()
+                .includes((keywords || '')?.toLowerCase()),
+            )
+            .map((item) => (
+              <PluginItem key={item.identifier} {...item} />
+            ))}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default OnlineList;

package/src/features/PluginStore/PluginItem/Action.tsx

@@ -0,0 +1,118 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Dropdown, Popconfirm } from 'antd';
+import { useResponsive } from 'antd-style';
+import { InfoIcon, MoreVerticalIcon, Settings, Trash2 } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginDetailModal from '@/features/PluginDetailModal';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
+import { LobeToolType } from '@/types/tool/tool';
+
+import EditCustomPlugin from './EditCustomPlugin';
+
+interface ActionsProps {
+  identifier: string;
+  type: LobeToolType;
+}
+
+const Actions = memo<ActionsProps>(({ identifier, type }) => {
+  const [installed, installing, installPlugin, unInstallPlugin] = useToolStore((s) => [
+    pluginSelectors.isPluginInstalled(identifier)(s),
+    pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
+    s.installPlugin,
+    s.uninstallPlugin,
+  ]);
+  const { mobile } = useResponsive();
+  const isCustomPlugin = type === 'customPlugin';
+  const { t } = useTranslation('plugin');
+  const [open, setOpen] = useState(false);
+  const plugin = useToolStore(pluginSelectors.getPluginManifestById(identifier));
+
+  const [tab, setTab] = useState('info');
+  const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(plugin?.settings);
+
+  return (
+    <>
+      <Flexbox align={'center'} horizontal>
+        {installed ? (
+          <>
+            {isCustomPlugin && <EditCustomPlugin identifier={identifier} />}
+            {hasSettings && (
+              <ActionIcon
+                icon={Settings}
+                onClick={() => {
+                  setOpen(true);
+                  setTab('settings');
+                }}
+                title={t('store.actions.settings')}
+              />
+            )}
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    icon: <Icon icon={InfoIcon} />,
+                    key: 'detail',
+                    label: t('store.actions.detail'),
+                    onClick: () => {
+                      setOpen(true);
+                      setTab('info');
+                    },
+                  },
+                  {
+                    danger: true,
+                    icon: <Icon icon={Trash2} />,
+                    key: 'uninstall',
+                    label: (
+                      <Popconfirm
+                        arrow={false}
+                        okButtonProps={{ danger: true }}
+                        onConfirm={() => {
+                          unInstallPlugin(identifier);
+                        }}
+                        placement={'topRight'}
+                        title={t('store.actions.confirmUninstall')}
+                      >
+                        {t('store.actions.uninstall')}
+                      </Popconfirm>
+                    ),
+                  },
+                ],
+              }}
+              placement="bottomRight"
+              trigger={['click']}
+            >
+              <ActionIcon icon={MoreVerticalIcon} loading={installing} />
+            </Dropdown>
+          </>
+        ) : (
+          <Button
+            loading={installing}
+            onClick={() => {
+              installPlugin(identifier);
+            }}
+            size={mobile ? 'small' : undefined}
+            type={'primary'}
+          >
+            {t('store.actions.install')}
+          </Button>
+        )}
+      </Flexbox>
+      <PluginDetailModal
+        id={identifier}
+        onClose={() => {
+          setOpen(false);
+        }}
+        onTabChange={setTab}
+        open={open}
+        schema={plugin?.settings}
+        tab={tab}
+      />
+    </>
+  );
+});
+
+export default Actions;

package/src/features/PluginStore/PluginItem/EditCustomPlugin.tsx

@@ -0,0 +1,50 @@
+import { ActionIcon } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { PackageSearch } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DevModal from '@/features/PluginDevModal';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+
+const EditCustomPlugin = memo<{ identifier: string }>(({ identifier }) => {
+  const { t } = useTranslation('plugin');
+  const [showModal, setModal] = useState(false);
+
+  const [installCustomPlugin, updateNewDevPlugin] = useToolStore((s) => [
+    s.installCustomPlugin,
+    s.updateNewCustomPlugin,
+  ]);
+
+  const customPlugin = useToolStore(pluginSelectors.getCustomPluginById(identifier), isEqual);
+
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <DevModal
+        mode={'edit'}
+        onOpenChange={setModal}
+        onSave={async (devPlugin) => {
+          await installCustomPlugin(devPlugin);
+          // toggleAgentPlugin(devPlugin.identifier);
+        }}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+        value={customPlugin}
+      />
+      <ActionIcon
+        icon={PackageSearch}
+        onClick={() => {
+          setModal(true);
+        }}
+        title={t('store.actions.manifest')}
+      />
+    </div>
+  );
+});
+
+export default EditCustomPlugin;

package/src/features/PluginStore/PluginItem/PluginTag.tsx

@@ -0,0 +1,58 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BadgeCheck, CircleUser, Package } from 'lucide-react';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { InstallPluginMeta } from '@/types/tool/plugin';
+
+const useStyles = createStyles(({ css, token }) => ({
+  community: css`
+    color: ${rgba(token.colorInfo, 0.75)};
+    background: ${token.colorInfoBg};
+
+    &:hover {
+      color: ${token.colorInfo};
+    }
+  `,
+  custom: css`
+    color: ${rgba(token.colorWarning, 0.75)};
+    background: ${token.colorWarningBg};
+
+    &:hover {
+      color: ${token.colorWarning};
+    }
+  `,
+  official: css`
+    color: ${rgba(token.colorSuccess, 0.75)};
+    background: ${token.colorSuccessBg};
+
+    &:hover {
+      color: ${token.colorSuccess};
+    }
+  `,
+}));
+
+interface PluginTagProps extends Pick<InstallPluginMeta, 'author' | 'type'> {
+  showIcon?: boolean;
+  showText?: boolean;
+}
+
+const PluginTag = memo<PluginTagProps>(({ showIcon = true, author, type, showText = true }) => {
+  const { t } = useTranslation('plugin');
+  const { styles, cx } = useStyles();
+  const isCustom = type === 'customPlugin';
+  const isOfficial = author === 'LobeHub';
+
+  return (
+    <Tag
+      className={cx(isCustom ? styles.custom : isOfficial ? styles.official : styles.community)}
+      icon={showIcon && <Icon icon={isCustom ? Package : isOfficial ? BadgeCheck : CircleUser} />}
+    >
+      {showText && (author || t(isCustom ? 'store.customPlugin' : 'store.communityPlugin'))}
+    </Tag>
+  );
+});
+
+export default PluginTag;

package/src/features/PluginStore/PluginItem/index.tsx

@@ -0,0 +1,73 @@
+import { Avatar, Tooltip } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
+import { InstallPluginMeta } from '@/types/tool/plugin';
+
+import Actions from './Action';
+
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  desc: css`
+    margin: 0 !important;
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  link: css`
+    color: ${token.colorText};
+  `,
+  title: css`
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 2;
+  `,
+}));
+
+const PluginItem = memo<InstallPluginMeta>(({ identifier, homepage, author, type, meta = {} }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={8}
+      horizontal
+      justify={'space-between'}
+      style={{ position: 'relative' }}
+    >
+      <Flexbox
+        align={'center'}
+        flex={1}
+        gap={8}
+        horizontal
+        style={{ overflow: 'hidden', position: 'relative' }}
+      >
+        <Avatar avatar={meta.avatar} style={{ flex: 'none', overflow: 'hidden' }} />
+        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
+          <Flexbox align={'center'} gap={8} horizontal>
+            <Tooltip title={identifier}>
+              {homepage ? (
+                <Link className={styles.link} href={homepage} target={'_blank'}>
+                  <div className={styles.title}>{meta.title}</div>
+                </Link>
+              ) : (
+                <div className={styles.title}>{meta.title}</div>
+              )}
+            </Tooltip>
+            <PluginTag author={author} type={type} />
+          </Flexbox>
+          <Paragraph className={styles.desc} ellipsis={{ rows: 1 }}>
+            {meta.description}
+          </Paragraph>
+        </Flexbox>
+      </Flexbox>
+      <Actions identifier={identifier} type={type} />
+    </Flexbox>
+  );
+});
+
+export default PluginItem;