@lobehub/chat 1.49.10 → 1.49.12

package/src/app/(main)/settings/provider/(detail)/ollama/OllamaModelDownloader/useDownloadMonitor.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { formatSpeed, formatTime } from '@/utils/format';
+
+export const useDownloadMonitor = (totalSize: number, completedSize: number) => {
+  const [downloadSpeed, setDownloadSpeed] = useState<string>('0 KB/s');
+  const [remainingTime, setRemainingTime] = useState<string>('-');
+
+  const lastCompletedRef = useRef(completedSize);
+  const lastTimedRef = useRef(Date.now());
+
+  useEffect(() => {
+    const currentTime = Date.now();
+    const elapsedTime = (currentTime - lastTimedRef.current) / 1000; // in seconds
+    if (completedSize > 0 && elapsedTime > 1) {
+      const speed = Math.max(0, (completedSize - lastCompletedRef.current) / elapsedTime); // in bytes per second
+      setDownloadSpeed(formatSpeed(speed));
+
+      const remainingSize = totalSize - completedSize;
+      const time = remainingSize / speed; // in seconds
+      setRemainingTime(formatTime(time));
+
+      lastCompletedRef.current = completedSize;
+      lastTimedRef.current = currentTime;
+    }
+  }, [completedSize]);
+
+  return { downloadSpeed, remainingTime };
+};

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { OllamaProviderCard } from '@/config/modelProviders';
 
 import ProviderDetail from '../[id]';
-import Checker from './Checker';
+import CheckError from './CheckError';
 
 const Page = () => {
   const { t } = useTranslation('modelProvider');
@@ -13,12 +13,7 @@ const Page = () => {
   return (
     <ProviderDetail
       {...OllamaProviderCard}
-      checkerItem={{
-        children: <Checker />,
-        desc: t('ollama.checker.desc'),
-        label: t('ollama.checker.title'),
-        minWidth: undefined,
-      }}
+      checkErrorRender={CheckError}
       settings={{
         ...OllamaProviderCard.settings,
         proxyUrl: {

package/src/app/(main)/settings/provider/features/ProviderConfig/Checker.tsx

@@ -4,7 +4,7 @@ import { CheckCircleFilled } from '@ant-design/icons';
 import { Alert, Highlighter } from '@lobehub/ui';
 import { Button } from 'antd';
 import { useTheme } from 'antd-style';
-import { memo, useState } from 'react';
+import { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -38,86 +38,107 @@ const Error = memo<{ error: ChatMessageError }>(({ error }) => {
   );
 });
 
+export type CheckErrorRender = (props: {
+  defaultError: ReactNode;
+  error?: ChatMessageError;
+  setError: (error?: ChatMessageError) => void;
+}) => ReactNode;
+
 interface ConnectionCheckerProps {
+  checkErrorRender?: CheckErrorRender;
   model: string;
   provider: string;
 }
 
-const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
-  const { t } = useTranslation('setting');
+const Checker = memo<ConnectionCheckerProps>(
+  ({ model, provider, checkErrorRender: CheckErrorRender }) => {
+    const { t } = useTranslation('setting');
 
-  const disabled = useAiInfraStore(aiProviderSelectors.isProviderConfigUpdating(provider));
+    const disabled = useAiInfraStore(aiProviderSelectors.isProviderConfigUpdating(provider));
 
-  const [loading, setLoading] = useState(false);
-  const [pass, setPass] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [pass, setPass] = useState(false);
 
-  const theme = useTheme();
-  const [error, setError] = useState<ChatMessageError | undefined>();
+    const theme = useTheme();
+    const [error, setError] = useState<ChatMessageError | undefined>();
 
-  const checkConnection = async () => {
-    let isError = false;
+    const checkConnection = async () => {
+      let isError = false;
 
-    await chatService.fetchPresetTaskResult({
-      onError: (_, rawError) => {
-        setError(rawError);
-        setPass(false);
-        isError = true;
-      },
-      onFinish: async (value) => {
-        if (!isError && value) {
-          setError(undefined);
-          setPass(true);
-        } else {
+      await chatService.fetchPresetTaskResult({
+        onError: (_, rawError) => {
+          setError(rawError);
           setPass(false);
-          setError({
-            body: value,
-            message: t('response.ConnectionCheckFailed', { ns: 'error' }),
-            type: 'ConnectionCheckFailed',
-          });
-        }
-      },
-      onLoadingChange: (loading) => {
-        setLoading(loading);
-      },
-      params: {
-        messages: [
-          {
-            content: '你好',
-            role: 'user',
-          },
-        ],
-        model,
-        provider,
-      },
-      trace: {
-        sessionId: `connection:${provider}`,
-        topicId: model,
-        traceName: TraceNameMap.ConnectivityChecker,
-      },
-    });
-  };
-  const isMobile = useIsMobile();
+          isError = true;
+        },
+        onFinish: async (value) => {
+          if (!isError && value) {
+            setError(undefined);
+            setPass(true);
+          } else {
+            setPass(false);
+            setError({
+              body: value,
+              message: t('response.ConnectionCheckFailed', { ns: 'error' }),
+              type: 'ConnectionCheckFailed',
+            });
+          }
+        },
+        onLoadingChange: (loading) => {
+          setLoading(loading);
+        },
+        params: {
+          messages: [
+            {
+              content: 'hello',
+              role: 'user',
+            },
+          ],
+          model,
+          provider,
+        },
+        trace: {
+          sessionId: `connection:${provider}`,
+          topicId: model,
+          traceName: TraceNameMap.ConnectivityChecker,
+        },
+      });
+    };
+    const isMobile = useIsMobile();
 
-  return (
-    <Flexbox align={isMobile ? 'flex-start' : 'flex-end'} gap={8}>
-      <Flexbox align={'center'} direction={isMobile ? 'horizontal-reverse' : 'horizontal'} gap={12}>
-        {pass && (
-          <Flexbox gap={4} horizontal>
-            <CheckCircleFilled
-              style={{
-                color: theme.colorSuccess,
-              }}
-            />
-            {t('llm.checker.pass')}
-          </Flexbox>
-        )}
-        <Button disabled={disabled} loading={loading} onClick={checkConnection}>
-          {t('llm.checker.button')}
-        </Button>
+    const defaultError = error ? <Error error={error as ChatMessageError} /> : null;
+
+    const errorContent = CheckErrorRender ? (
+      <CheckErrorRender defaultError={defaultError} error={error} setError={setError} />
+    ) : (
+      defaultError
+    );
+
+    return (
+      <Flexbox align={isMobile ? 'flex-start' : 'flex-end'} gap={8}>
+        <Flexbox
+          align={'center'}
+          direction={isMobile ? 'horizontal-reverse' : 'horizontal'}
+          gap={12}
+        >
+          {pass && (
+            <Flexbox gap={4} horizontal>
+              <CheckCircleFilled
+                style={{
+                  color: theme.colorSuccess,
+                }}
+              />
+              {t('llm.checker.pass')}
+            </Flexbox>
+          )}
+          <Button disabled={disabled} loading={loading} onClick={checkConnection}>
+            {t('llm.checker.button')}
+          </Button>
+        </Flexbox>
+        {error && errorContent}
       </Flexbox>
-      {error && <Error error={error} />}
-    </Flexbox>
-  );
-});
+    );
+  },
+);
 
 export default Checker;

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

@@ -25,7 +25,7 @@ import {
 } from '@/types/aiProvider';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
-import Checker from './Checker';
+import Checker, { CheckErrorRender } from './Checker';
 import EnableSwitch from './EnableSwitch';
 import { SkeletonInput } from './SkeletonInput';
 import UpdateProviderInfo from './UpdateProviderInfo';
@@ -91,7 +91,7 @@ const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
 export interface ProviderConfigProps extends Omit<AiProviderDetailItem, 'enabled' | 'source'> {
   apiKeyItems?: FormItemProps[];
   canDeactivate?: boolean;
-  checkerItem?: FormItemProps;
+  checkErrorRender?: CheckErrorRender;
   className?: string;
   enabled?: boolean;
   extra?: ReactNode;
@@ -113,9 +113,9 @@ const ProviderConfig = memo<ProviderConfigProps>(
     id,
     settings,
     checkModel,
-    checkerItem,
     logo,
     className,
+    checkErrorRender,
     name,
     showAceGcm = true,
     extra,
@@ -271,16 +271,16 @@ const ProviderConfig = memo<ProviderConfigProps>(
       endpointItem,
       clientFetchItem,
       showChecker
-        ? (checkerItem ?? {
+        ? {
             children: isLoading ? (
               <Skeleton.Button active />
             ) : (
-              <Checker model={checkModel!} provider={id} />
+              <Checker checkErrorRender={checkErrorRender} model={checkModel!} provider={id} />
             ),
             desc: t('providerModels.config.checker.desc'),
             label: t('providerModels.config.checker.title'),
             minWidth: undefined,
-          })
+          }
         : undefined,
       showAceGcm && isServerMode && aceGcmItem,
     ].filter(Boolean) as FormItemProps[];

package/src/components/FormAction/index.tsx

@@ -0,0 +1,66 @@
+import { Avatar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center, CenterProps, Flexbox } from 'react-layout-kit';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    border: 1px solid ${token.colorSplit};
+    border-radius: 8px;
+    color: ${token.colorText};
+    background: ${token.colorBgContainer};
+  `,
+  desc: css`
+    color: ${token.colorTextTertiary};
+    text-align: center;
+  `,
+  form: css`
+    width: 100%;
+    max-width: 300px;
+  `,
+}));
+
+const FormAction = memo<
+  {
+    animation?: boolean;
+    avatar: ReactNode;
+    background?: string;
+    description: string;
+    title: string;
+  } & CenterProps
+>(
+  ({
+    children,
+    background,
+    title,
+    description,
+    avatar,
+    animation,
+    className,
+    gap = 16,
+    ...rest
+  }) => {
+    const { cx, styles, theme } = useStyles();
+
+    return (
+      <Center className={cx(styles.form, className)} gap={gap} {...rest}>
+        <Avatar
+          animation={animation}
+          avatar={avatar}
+          background={background ?? theme.colorFillContent}
+          gap={12}
+          size={80}
+        />
+        <Flexbox gap={8} width={'100%'}>
+          <Flexbox style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center' }}>
+            {title}
+          </Flexbox>
+          <Flexbox className={styles.desc}>{description}</Flexbox>
+        </Flexbox>
+        {children}
+      </Center>
+    );
+  },
+);
+
+export default FormAction;

package/src/components/OllamaSetupGuide/index.tsx

@@ -0,0 +1,217 @@
+import { Highlighter, Snippet, TabsNav } from '@lobehub/ui';
+import { Steps } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { readableColor } from 'polished';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, prefixCls, token }) => ({
+  steps: css`
+    margin-block-start: 32px;
+    &.${prefixCls}-steps-small .${prefixCls}-steps-item-title {
+      margin-block-end: 16px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .${prefixCls}-steps-item-description {
+      margin-block-end: 24px;
+    }
+
+    .${prefixCls}-steps-icon {
+      color: ${readableColor(token.colorPrimary)} !important;
+    }
+  `,
+}));
+
+const SetupGuide = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('components');
+  return (
+    <TabsNav
+      items={[
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Trans i18nKey={'OllamaSetupGuide.install.description'} ns={'components'}>
+                      请确认你已经开启 Ollama ，如果没有安装 Ollama ，请前往官网
+                      <Link href={'https://ollama.com/download'}>下载</Link>
+                    </Trans>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.cors.description')}
+
+                      <Flexbox gap={8}>
+                        {t('OllamaSetupGuide.cors.macos')}
+                        <Snippet language={'bash'}>
+                          {/* eslint-disable-next-line react/no-unescaped-entities */}
+                          launchctl setenv OLLAMA_ORIGINS "*"
+                        </Snippet>
+                        {t('OllamaSetupGuide.cors.reboot')}
+                      </Flexbox>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'macos',
+          label: 'macOS',
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Trans i18nKey={'OllamaSetupGuide.install.description'} ns={'components'}>
+                      请确认你已经开启 Ollama ，如果没有安装 Ollama ，请前往官网
+                      <Link href={'https://ollama.com/download'}>下载</Link>
+                    </Trans>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.cors.description')}
+                      <div>{t('OllamaSetupGuide.cors.windows')}</div>
+                      <div>{t('OllamaSetupGuide.cors.reboot')}</div>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'windows',
+          label: t('OllamaSetupGuide.install.windowsTab'),
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.install.linux.command')}
+                      <Snippet language={'bash'}>
+                        curl -fsSL https://ollama.com/install.sh | sh
+                      </Snippet>
+                      <div>
+                        <Trans i18nKey={'OllamaSetupGuide.install.linux.manual'} ns={'components'}>
+                          或者，你也可以参考
+                          <Link href={'https://github.com/ollama/ollama/blob/main/docs/linux.md'}>
+                            Linux 手动安装指南
+                          </Link>
+                          。
+                        </Trans>
+                      </div>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      <div>{t('OllamaSetupGuide.cors.description')}</div>
+
+                      <div>{t('OllamaSetupGuide.cors.linux.systemd')}</div>
+                      {/* eslint-disable-next-line react/no-unescaped-entities */}
+                      <Snippet language={'bash'}> sudo systemctl edit ollama.service</Snippet>
+                      {t('OllamaSetupGuide.cors.linux.env')}
+                      <Highlighter
+                        // eslint-disable-next-line react/no-children-prop
+                        children={`[Service]
+
+Environment="OLLAMA_ORIGINS=*"`}
+                        fileName={'ollama.service'}
+                        fullFeatured
+                        language={'bash'}
+                        showLanguage
+                      />
+                      {t('OllamaSetupGuide.cors.linux.reboot')}
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'linux',
+          label: 'Linux',
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.install.description')}
+                      <div>{t('OllamaSetupGuide.install.docker')}</div>
+                      <Snippet language={'bash'}>docker pull ollama/ollama</Snippet>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.cors.description')}
+                      <Highlighter
+                        fileName={'ollama.service'}
+                        fullFeatured
+                        language={'bash'}
+                        showLanguage
+                      >
+                        {/* eslint-disable-next-line react/no-unescaped-entities */}
+                        docker run -d --gpus=all -v ollama:/root/.ollama -e OLLAMA_ORIGINS="*" -p
+                        11434:11434 --name ollama ollama/ollama
+                      </Highlighter>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'docker',
+          label: 'Docker',
+        },
+      ]}
+    />
+  );
+});
+
+export default SetupGuide;

package/src/components/Thinking/index.tsx

@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import { AnimatePresence, motion } from 'framer-motion';
 import { AtomIcon, ChevronDown, ChevronRight } from 'lucide-react';
 import { rgba } from 'polished';
-import { memo, useEffect, useState } from 'react';
+import { CSSProperties, memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -61,30 +61,26 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 interface ThinkingProps {
   content?: string;
   duration?: number;
+  style?: CSSProperties;
   thinking?: boolean;
 }
 
-const Thinking = memo<ThinkingProps>(({ content, duration, thinking }) => {
+const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style }) => {
   const { t } = useTranslation(['components', 'common']);
   const { styles, cx } = useStyles();
 
   const [showDetail, setShowDetail] = useState(false);
 
   useEffect(() => {
-    if (thinking && !content) {
-      setShowDetail(true);
-    }
-
-    if (!thinking) {
-      setShowDetail(false);
-    }
-  }, [thinking, content]);
+    setShowDetail(!!thinking);
+  }, [thinking]);
 
   return (
-    <Flexbox className={cx(styles.container, showDetail && styles.expand)} gap={16}>
+    <Flexbox className={cx(styles.container, showDetail && styles.expand)} gap={16} style={style}>
       <Flexbox
         distribution={'space-between'}
         flex={1}
+        gap={8}
         horizontal
         onClick={() => {
           setShowDetail(!showDetail);
@@ -92,18 +88,20 @@ const Thinking = memo<ThinkingProps>(({ content, duration, thinking }) => {
         style={{ cursor: 'pointer' }}
       >
         {thinking ? (
-          <Flexbox gap={8} horizontal>
+          <Flexbox align={'center'} gap={8} horizontal>
             <Icon icon={AtomIcon} />
             <Flexbox className={styles.shinyText} horizontal>
               {t('Thinking.thinking')}
             </Flexbox>
           </Flexbox>
         ) : (
-          <Flexbox gap={8} horizontal>
+          <Flexbox align={'center'} gap={8} horizontal>
             <Icon icon={AtomIcon} />
-            {!duration
-              ? t('Thinking.thoughtWithDuration')
-              : t('Thinking.thought', { duration: ((duration || 0) / 1000).toFixed(1) })}
+            <Flexbox>
+              {!duration
+                ? t('Thinking.thoughtWithDuration')
+                : t('Thinking.thought', { duration: ((duration || 0) / 1000).toFixed(1) })}
+            </Flexbox>
           </Flexbox>
         )}
         <Flexbox gap={4} horizontal>