@lobehub/chat 1.43.6 → 1.44.1

package/src/app/(main)/settings/provider/(detail)/huggingface/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Markdown } from '@lobehub/ui';
+import { Input } from 'antd';
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+
+import { HuggingFaceProviderCard } from '@/config/modelProviders';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
+import { SkeletonInput } from '../../features/ProviderConfig';
+import { ProviderItem } from '../../type';
+import ProviderDetail from '../[id]';
+
+const useStyles = createStyles(({ css, token }) => ({
+  markdown: css`
+    p {
+      color: ${token.colorTextDescription} !important;
+    }
+  `,
+  tip: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const providerKey: GlobalLLMProviderKey = 'huggingface';
+
+// Same as OpenAIProvider, but replace API Key with HuggingFace Access Token
+const useProviderCard = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+  const { styles } = useStyles();
+  const isLoading = useAiInfraStore(aiProviderSelectors.isAiProviderConfigLoading(providerKey));
+
+  return {
+    ...HuggingFaceProviderCard,
+    apiKeyItems: [
+      {
+        children: isLoading ? (
+          <SkeletonInput />
+        ) : (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.accessToken.placeholder`)}
+          />
+        ),
+        desc: (
+          <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
+            {t(`${providerKey}.accessToken.desc`)}
+          </Markdown>
+        ),
+        label: t(`${providerKey}.accessToken.title`),
+        name: [KeyVaultsConfigKey, providerKey, LLMProviderApiTokenKey],
+      },
+    ],
+  };
+};
+
+const Page = () => {
+  const card = useProviderCard();
+
+  return <ProviderDetail {...card} />;
+};
+
+export default Page;

package/src/app/(main)/settings/provider/(detail)/ollama/Checker.tsx

@@ -0,0 +1,73 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Alert, Highlighter } from '@lobehub/ui';
+import { Button } from 'antd';
+import { useTheme } from 'antd-style';
+import { ListResponse } from 'ollama/browser';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { ollamaService } from '@/services/ollama';
+
+const OllamaChecker = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const theme = useTheme();
+
+  const { data, error, isLoading, mutate } = useSWR<ListResponse>(
+    'ollama.list',
+    ollamaService.getModels,
+    {
+      revalidateOnFocus: false,
+      revalidateOnMount: false,
+      revalidateOnReconnect: false,
+    },
+  );
+
+  const checkConnection = () => {
+    mutate().catch();
+  };
+
+  const isMobile = useIsMobile();
+
+  return (
+    <Flexbox align={isMobile ? 'flex-start' : 'flex-end'} gap={8}>
+      <Flexbox align={'center'} direction={isMobile ? 'horizontal-reverse' : 'horizontal'} gap={12}>
+        {!error && data?.models && (
+          <Flexbox gap={4} horizontal>
+            <CheckCircleFilled
+              style={{
+                color: theme.colorSuccess,
+              }}
+            />
+            {t('llm.checker.pass')}
+          </Flexbox>
+        )}
+        <Button loading={isLoading} onClick={checkConnection}>
+          {t('llm.checker.button')}
+        </Button>
+      </Flexbox>
+      {error && (
+        <Flexbox gap={8} style={{ maxWidth: '600px', width: '100%' }}>
+          <Alert
+            banner
+            extra={
+              <Flexbox>
+                <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+                  {JSON.stringify(error.body || error, null, 2)}
+                </Highlighter>
+              </Flexbox>
+            }
+            message={t(`response.${error.type}` as any, { ns: 'error' })}
+            showIcon
+            type={'error'}
+          />
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default OllamaChecker;

package/src/app/(main)/settings/provider/(detail)/ollama/page.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import { OllamaProviderCard } from '@/config/modelProviders';
+
+import ProviderDetail from '../[id]';
+import Checker from './Checker';
+
+const Page = () => {
+  const { t } = useTranslation('modelProvider');
+
+  return (
+    <ProviderDetail
+      {...OllamaProviderCard}
+      checkerItem={{
+        children: <Checker />,
+        desc: t('ollama.checker.desc'),
+        label: t('ollama.checker.title'),
+        minWidth: undefined,
+      }}
+      settings={{
+        ...OllamaProviderCard.settings,
+        proxyUrl: {
+          desc: t('ollama.endpoint.desc'),
+          placeholder: 'http://127.0.0.1:11434',
+          title: t('ollama.endpoint.title'),
+        },
+      }}
+    />
+  );
+};
+
+export default Page;

package/src/app/(main)/settings/provider/(detail)/openai/page.tsx

@@ -0,0 +1,23 @@
+import { serverFeatureFlags } from '@/config/featureFlags';
+import { OpenAIProviderCard } from '@/config/modelProviders';
+
+import ProviderDetail from '../[id]';
+
+const Page = async () => {
+  const { showOpenAIProxyUrl, showOpenAIApiKey } = serverFeatureFlags();
+
+  return (
+    <ProviderDetail
+      {...OpenAIProviderCard}
+      settings={{
+        ...OpenAIProviderCard.settings,
+        proxyUrl: showOpenAIProxyUrl && {
+          placeholder: 'https://api.openai.com/v1',
+        },
+        showApiKey: showOpenAIApiKey,
+      }}
+    />
+  );
+};
+
+export default Page;

package/src/app/(main)/settings/provider/(detail)/wenxin/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { WenxinProviderCard } from '@/config/modelProviders';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+import { KeyVaultsConfigKey } from '../../const';
+import { SkeletonInput } from '../../features/ProviderConfig';
+import { ProviderItem } from '../../type';
+import ProviderDetail from '../[id]';
+
+const providerKey: GlobalLLMProviderKey = 'wenxin';
+
+const useProviderCard = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+
+  const isLoading = useAiInfraStore(aiProviderSelectors.isAiProviderConfigLoading(providerKey));
+
+  return {
+    ...WenxinProviderCard,
+    apiKeyItems: [
+      {
+        children: isLoading ? (
+          <SkeletonInput />
+        ) : (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.accessKey.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.accessKey.desc`),
+        label: t(`${providerKey}.accessKey.title`),
+        name: [KeyVaultsConfigKey, 'accessKey'],
+      },
+      {
+        children: isLoading ? (
+          <SkeletonInput />
+        ) : (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.secretKey.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.secretKey.desc`),
+        label: t(`${providerKey}.secretKey.title`),
+        name: [KeyVaultsConfigKey, 'secretKey'],
+      },
+    ],
+  };
+};
+
+const Page = () => {
+  const card = useProviderCard();
+
+  return <ProviderDetail {...card} />;
+};
+
+export default Page;

package/src/app/(main)/settings/provider/(list)/Footer.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Trans } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
+
+const Footer = memo(() => {
+  const theme = useTheme();
+  return (
+    <Center
+      style={{
+        background: theme.colorFillQuaternary,
+        border: `1px dashed ${theme.colorFillSecondary}`,
+        borderRadius: theme.borderRadiusLG,
+        padding: 12,
+      }}
+      width={'100%'}
+    >
+      <div style={{ color: theme.colorTextSecondary, fontSize: 12, textAlign: 'center' }}>
+        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
+          更多模型正在
+          <Link aria-label={'todo'} href={MORE_MODEL_PROVIDER_REQUEST_URL} target="_blank">
+            计划接入
+          </Link>
+          中 ，敬请期待
+        </Trans>
+      </div>
+    </Center>
+  );
+});
+
+export default Footer;

package/src/app/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -0,0 +1,134 @@
+import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
+import { Avatar } from '@lobehub/ui';
+import { Divider, Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InstantSwitch from '@/components/InstantSwitch';
+import { useAiInfraStore } from '@/store/aiInfra';
+import { AiProviderListItem } from '@/types/aiProvider';
+
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 100%;
+    border-radius: 12px;
+
+    background: ${token.colorBgContainer};
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
+
+    transition: box-shadow 0.2s ${token.motionEaseInOut};
+
+    &:hover {
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
+    }
+  `,
+  desc: css`
+    min-height: 44px;
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    zoom: 1.2;
+    margin-block-end: 0 !important;
+    font-size: 18px !important;
+    font-weight: bold;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
+
+interface ProviderCardProps extends AiProviderListItem {
+  loading?: boolean;
+}
+const ProviderCard = memo<ProviderCardProps>(
+  ({ id, description, name, enabled, source, logo, loading }) => {
+    const { t } = useTranslation('providers');
+    const { cx, styles, theme } = useStyles();
+    const toggleProviderEnabled = useAiInfraStore((s) => s.toggleProviderEnabled);
+
+    if (loading)
+      return (
+        <Flexbox className={cx(styles.container)} gap={24} padding={16}>
+          <Skeleton active />
+        </Flexbox>
+      );
+
+    return (
+      <Flexbox className={cx(styles.container)} gap={24}>
+        <Flexbox gap={12} padding={16} width={'100%'}>
+          <Link href={`/settings/provider/${id}`}>
+            <Flexbox gap={12} width={'100%'}>
+              <Flexbox align={'center'} horizontal justify={'space-between'}>
+                {source === 'builtin' ? (
+                  <ProviderCombine
+                    provider={id}
+                    size={24}
+                    style={{ color: theme.colorText }}
+                    title={name}
+                  />
+                ) : (
+                  <Flexbox align={'center'} gap={12} horizontal>
+                    {logo ? (
+                      <Avatar alt={name || id} avatar={logo} size={28} />
+                    ) : (
+                      <ProviderIcon
+                        provider={id}
+                        size={24}
+                        style={{ borderRadius: 6 }}
+                        type={'avatar'}
+                      />
+                    )}
+                    <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+                      {name || id}
+                    </Typography.Text>
+                  </Flexbox>
+                )}
+              </Flexbox>
+              <Paragraph className={styles.desc} ellipsis={{ rows: 2, tooltip: true }}>
+                {source === 'custom' ? description : t(`${id}.description`)}
+              </Paragraph>
+            </Flexbox>
+          </Link>
+          <Divider style={{ margin: '4px 0' }} />
+          <Flexbox horizontal justify={'space-between'} paddingBlock={'8px 0'}>
+            <div />
+            <InstantSwitch
+              enabled={enabled}
+              onChange={async (checked) => {
+                await toggleProviderEnabled(id, checked);
+              }}
+              size={'small'}
+            />
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default ProviderCard;

package/src/app/(main)/settings/provider/(list)/ProviderGrid/index.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { Grid } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+import Card from './Card';
+
+const useStyles = createStyles(({ css, responsive, token }) => ({
+  count: css`
+    height: 20px;
+    padding-block: 0;
+    padding-inline: 6px;
+    border-radius: 12px;
+
+    color: ${token.colorTextDescription};
+
+    background: ${token.colorFillSecondary};
+  `,
+  grid: css`
+    grid-template-columns: repeat(2, 1fr);
+
+    ${responsive.desktop} {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  `,
+}));
+
+const loadingArr = Array.from({ length: 12 })
+  .fill('-')
+  .map((item, index) => `${index}x${item}`);
+
+const List = memo(() => {
+  const { t } = useTranslation('modelProvider');
+  const { styles } = useStyles();
+  const enabledList = useAiInfraStore(aiProviderSelectors.enabledAiProviderList, isEqual);
+  const disabledList = useAiInfraStore(aiProviderSelectors.disabledAiProviderList, isEqual);
+  const [initAiProviderList] = useAiInfraStore((s) => [s.initAiProviderList]);
+
+  if (!initAiProviderList)
+    return (
+      <Flexbox gap={12} paddingBlock={'0 16px'}>
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+            {t('list.title.enabled')}
+          </Typography.Text>
+        </Flexbox>
+        <Grid>
+          {loadingArr.map((item) => (
+            <Card enabled={false} id={item} key={item} loading source={'builtin'} />
+          ))}
+        </Grid>
+      </Flexbox>
+    );
+
+  return (
+    <Flexbox gap={24} paddingBlock={'0 16px'}>
+      <Flexbox gap={12}>
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+            {t('list.title.enabled')}
+          </Typography.Text>
+          <Center className={styles.count}>{enabledList.length}</Center>
+        </Flexbox>
+        <Grid className={styles.grid}>
+          {enabledList.map((item) => (
+            <Card {...item} key={item.id} />
+          ))}
+        </Grid>
+      </Flexbox>
+      <Flexbox gap={12}>
+        <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+          {t('list.title.disabled')}
+        </Typography.Text>
+        <Grid className={styles.grid}>
+          {disabledList.map((item) => (
+            <Card {...item} key={item.id} />
+          ))}
+        </Grid>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default List;

package/src/app/(main)/settings/provider/(list)/index.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { isCustomBranding } from '@/const/version';
+
+import Footer from './Footer';
+import ProviderGrid from './ProviderGrid';
+
+const Page = () => {
+  return (
+    <>
+      <ProviderGrid />
+      {!isCustomBranding && <Footer />}
+    </>
+  );
+};
+
+Page.displayName = 'ProviderGrid';
+
+export default Page;

package/src/app/(main)/settings/provider/ProviderMenu/AddNew.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import { PlusIcon } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CreateNewProvider from '../features/CreateNewProvider';
+
+const AddNewProvider = () => {
+  const { t } = useTranslation('modelProvider');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Tooltip title={t('menu.addCustomProvider')}>
+      <Button
+        color={'default'}
+        icon={<Icon icon={PlusIcon} />}
+        onClick={() => setOpen(true)}
+        variant={'filled'}
+      />
+      <CreateNewProvider onClose={() => setOpen(false)} open={open} />
+    </Tooltip>
+  );
+};
+
+export default AddNewProvider;

package/src/app/(main)/settings/provider/ProviderMenu/All.tsx

@@ -0,0 +1,29 @@
+import { Icon } from '@lobehub/ui';
+import { WalletCards } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './Item';
+
+const ALL_PATH = '/settings/provider';
+
+const All = memo(() => {
+  const { t } = useTranslation('modelProvider');
+  const { styles, cx } = useStyles();
+  const pathname = usePathname();
+
+  return (
+    <Link className={cx(styles.container, pathname === ALL_PATH && styles.active)} href={ALL_PATH}>
+      <Flexbox gap={8} horizontal>
+        <Center width={24}>
+          <Icon icon={WalletCards} size={{ fontSize: 18 }} />
+        </Center>
+        {t('menu.all')}
+      </Flexbox>
+    </Link>
+  );
+});
+export default All;

package/src/app/(main)/settings/provider/ProviderMenu/Item.tsx

@@ -0,0 +1,69 @@
+import { ProviderIcon } from '@lobehub/icons';
+import { Avatar } from '@lobehub/ui';
+import { Badge } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { AiProviderListItem, AiProviderSourceEnum } from '@/types/aiProvider';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    background: ${token.colorFillSecondary};
+  `,
+  container: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    color: inherit;
+
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      color: inherit;
+      background-color: ${token.colorFill};
+    }
+  `,
+}));
+
+const ProviderItem = memo<AiProviderListItem>(({ id, name, source, enabled, logo }) => {
+  const { styles, cx } = useStyles();
+  const pathname = usePathname();
+
+  const activeKey = pathname.split('/').pop();
+
+  const isCustom = source === AiProviderSourceEnum.Custom;
+  return (
+    <Link
+      className={cx(styles.container, activeKey === id && styles.active)}
+      href={`/settings/provider/${id}`}
+    >
+      <Flexbox gap={8} horizontal>
+        {isCustom && logo ? (
+          <Avatar
+            alt={name || id}
+            avatar={logo}
+            shape={'square'}
+            size={24}
+            style={{ borderRadius: 6 }}
+          />
+        ) : (
+          <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
+        )}
+        {name}
+      </Flexbox>
+      {enabled && <Badge status="success" />}
+    </Link>
+  );
+});
+export default ProviderItem;