@lobehub/chat 1.77.16 → 1.77.17

package/src/app/[variants]/(main)/settings/provider/(detail)/ollama/OllamaModelDownloader/index.tsx

@@ -1,127 +0,0 @@
-import { Ollama } from '@lobehub/icons';
-import { Button, Input, Progress } from 'antd';
-import { useTheme } from 'antd-style';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-import useSWR from 'swr';
-
-import FormAction from '@/components/FormAction';
-import { ollamaService } from '@/services/ollama';
-import { formatSize } from '@/utils/format';
-
-import { useDownloadMonitor } from './useDownloadMonitor';
-
-interface OllamaModelDownloaderProps {
-  model: string;
-}
-
-const OllamaModelDownloader = memo<OllamaModelDownloaderProps>(({ model }) => {
-  const { t } = useTranslation(['modelProvider', 'error']);
-
-  const [modelToPull, setModelToPull] = useState(model);
-  const [completed, setCompleted] = useState(0);
-  const [total, setTotal] = useState(0);
-  const { remainingTime, downloadSpeed } = useDownloadMonitor(total, completed);
-  const percent = useMemo(() => {
-    return total ? Number(((completed / total) * 100).toFixed(1)) : 0;
-  }, [completed, total]);
-
-  const theme = useTheme();
-
-  const { mutate, isLoading: isDownloading } = useSWR(
-    [modelToPull],
-    async ([model]) => {
-      const generator = await ollamaService.pullModel(model);
-      for await (const progress of generator) {
-        if (progress.completed) {
-          setCompleted(progress.completed);
-          setTotal(progress.total);
-        }
-      }
-      return null;
-    },
-    {
-      onSuccess: () => {},
-      revalidateOnFocus: false,
-      revalidateOnMount: false,
-    },
-  );
-
-  return (
-    <Center gap={16} paddingBlock={32} style={{ width: '100%' }}>
-      <FormAction
-        avatar={<Ollama color={theme.colorPrimary} size={64} />}
-        description={isDownloading ? t('ollama.download.desc') : t('ollama.unlock.description')}
-        title={
-          isDownloading
-            ? t('ollama.download.title', { model: modelToPull })
-            : t('ollama.unlock.title')
-        }
-      >
-        {!isDownloading && (
-          <Input
-            onChange={(e) => {
-              setModelToPull(e.target.value);
-            }}
-            value={modelToPull}
-          />
-        )}
-      </FormAction>
-      {isDownloading && (
-        <Flexbox flex={1} gap={8} style={{ maxWidth: 300 }} width={'100%'}>
-          <Progress
-            percent={percent}
-            showInfo
-            strokeColor={theme.colorSuccess}
-            trailColor={theme.colorSuccessBg}
-          />
-          <Flexbox
-            distribution={'space-between'}
-            horizontal
-            style={{ color: theme.colorTextDescription, fontSize: 12 }}
-          >
-            <span>
-              {t('ollama.download.remainingTime')}: {remainingTime}
-            </span>
-            <span>
-              {t('ollama.download.speed')}: {downloadSpeed}
-            </span>
-          </Flexbox>
-        </Flexbox>
-      )}
-      <Flexbox gap={12} style={{ maxWidth: 300 }} width={'100%'}>
-        <Button
-          block
-          loading={isDownloading}
-          onClick={() => {
-            mutate();
-          }}
-          style={{ marginTop: 8 }}
-          type={'primary'}
-        >
-          {!isDownloading
-            ? t('ollama.unlock.confirm')
-            : // if total is 0, show starting, else show downloaded
-              !total
-              ? t('ollama.unlock.starting')
-              : t('ollama.unlock.downloaded', {
-                  completed: formatSize(completed, 2),
-                  total: formatSize(total, 2),
-                })}
-        </Button>
-        {isDownloading && (
-          <Button
-            onClick={() => {
-              ollamaService.abort();
-            }}
-          >
-            {t('ollama.unlock.cancel')}
-          </Button>
-        )}
-      </Flexbox>
-    </Center>
-  );
-});
-
-export default OllamaModelDownloader;

package/src/features/Conversation/Error/OllamaBizError/InvalidOllamaModel/index.tsx

@@ -1,154 +0,0 @@
-import { Ollama } from '@lobehub/icons';
-import { Button, Input, Progress } from 'antd';
-import { useTheme } from 'antd-style';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-import useSWR from 'swr';
-
-import { ollamaService } from '@/services/ollama';
-import { useChatStore } from '@/store/chat';
-import { formatSize } from '@/utils/format';
-
-import { ErrorActionContainer, FormAction } from '../../style';
-import { useDownloadMonitor } from './useDownloadMonitor';
-
-interface OllamaModelFormProps {
-  id: string;
-  model: string;
-}
-
-const OllamaModelForm = memo<OllamaModelFormProps>(({ id, model }) => {
-  const { t } = useTranslation(['modelProvider', 'error']);
-
-  const [modelToPull, setModelToPull] = useState(model);
-  const [completed, setCompleted] = useState(0);
-  const [total, setTotal] = useState(0);
-  const { remainingTime, downloadSpeed } = useDownloadMonitor(total, completed);
-  const percent = useMemo(() => {
-    return total ? Number(((completed / total) * 100).toFixed(1)) : 0;
-  }, [completed, total]);
-
-  const [delAndRegenerateMessage, deleteMessage] = useChatStore((s) => [
-    s.delAndRegenerateMessage,
-    s.deleteMessage,
-  ]);
-  const theme = useTheme();
-
-  const { mutate, isLoading: isDownloading } = useSWR(
-    [id, modelToPull],
-    async ([, model]) => {
-      const generator = await ollamaService.pullModel(model);
-      for await (const progress of generator) {
-        if (progress.completed) {
-          setCompleted(progress.completed);
-          setTotal(progress.total);
-        }
-      }
-      return null;
-    },
-    {
-      onSuccess: () => {
-        delAndRegenerateMessage(id);
-      },
-      revalidateOnFocus: false,
-      revalidateOnMount: false,
-    },
-  );
-
-  return (
-    <Center gap={16} style={{ maxWidth: 300, width: '100%' }}>
-      <FormAction
-        avatar={<Ollama color={theme.colorPrimary} size={64} />}
-        description={isDownloading ? t('ollama.download.desc') : t('ollama.unlock.description')}
-        title={
-          isDownloading
-            ? t('ollama.download.title', { model: modelToPull })
-            : t('ollama.unlock.title')
-        }
-      >
-        {!isDownloading && (
-          <Input
-            onChange={(e) => {
-              setModelToPull(e.target.value);
-            }}
-            value={modelToPull}
-          />
-        )}
-      </FormAction>
-      {isDownloading && (
-        <Flexbox flex={1} gap={8} width={'100%'}>
-          <Progress
-            percent={percent}
-            showInfo
-            strokeColor={theme.colorSuccess}
-            trailColor={theme.colorSuccessBg}
-          />
-          <Flexbox
-            distribution={'space-between'}
-            horizontal
-            style={{ color: theme.colorTextDescription, fontSize: 12 }}
-          >
-            <span>
-              {t('ollama.download.remainingTime')}: {remainingTime}
-            </span>
-            <span>
-              {t('ollama.download.speed')}: {downloadSpeed}
-            </span>
-          </Flexbox>
-        </Flexbox>
-      )}
-      <Flexbox gap={12} width={'100%'}>
-        <Button
-          block
-          loading={isDownloading}
-          onClick={() => {
-            mutate();
-          }}
-          style={{ marginTop: 8 }}
-          type={'primary'}
-        >
-          {!isDownloading
-            ? t('ollama.unlock.confirm')
-            : // if total is 0, show starting, else show downloaded
-              !total
-              ? t('ollama.unlock.starting')
-              : t('ollama.unlock.downloaded', {
-                  completed: formatSize(completed, 2),
-                  total: formatSize(total, 2),
-                })}
-        </Button>
-        {isDownloading ? (
-          <Button
-            onClick={() => {
-              ollamaService.abort();
-            }}
-          >
-            {t('ollama.unlock.cancel')}
-          </Button>
-        ) : (
-          <Button
-            onClick={() => {
-              deleteMessage(id);
-            }}
-          >
-            {t('unlock.closeMessage', { ns: 'error' })}
-          </Button>
-        )}
-      </Flexbox>
-    </Center>
-  );
-});
-
-interface InvalidOllamaModelProps {
-  id: string;
-  model: string;
-}
-
-const InvalidOllamaModel = memo<InvalidOllamaModelProps>(({ id, model }) => (
-  <ErrorActionContainer>
-    <OllamaModelForm id={id} model={model} />
-  </ErrorActionContainer>
-));
-
-export default InvalidOllamaModel;

package/src/features/Conversation/Error/OllamaBizError/InvalidOllamaModel/useDownloadMonitor.ts

@@ -1,29 +0,0 @@
-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/services/__tests__/ollama.test.ts

@@ -1,28 +0,0 @@
-import { Mock, describe, expect, it, vi } from 'vitest';
-
-import { OllamaService } from '../ollama';
-
-vi.stubGlobal('fetch', vi.fn());
-
-const ollamaService = new OllamaService({ fetch });
-
-describe('OllamaService', () => {
-  describe('list models', async () => {
-    it('should make a GET request with the correct payload', async () => {
-      (fetch as Mock).mockResolvedValueOnce(new Response(JSON.stringify({ models: [] })));
-
-      expect(await ollamaService.getModels()).toEqual({ models: [] });
-
-      expect(fetch).toHaveBeenCalled();
-    });
-
-    it('should make a GET request with the error', async () => {
-      const mockResponse = new Response(null, { status: 503 });
-      (fetch as Mock).mockResolvedValueOnce(mockResponse);
-
-      await expect(ollamaService.getModels()).rejects.toThrow();
-
-      expect(fetch).toHaveBeenCalled();
-    });
-  });
-});

package/src/services/ollama.ts

@@ -1,83 +0,0 @@
-import { ListResponse, Ollama as OllamaBrowser, ProgressResponse } from 'ollama/browser';
-
-import { ModelProvider } from '@/libs/agent-runtime';
-import { useUserStore } from '@/store/user';
-import { keyVaultsConfigSelectors } from '@/store/user/selectors';
-import { ChatErrorType } from '@/types/fetch';
-import { createErrorResponse } from '@/utils/errorResponse';
-import { getMessageError } from '@/utils/fetch';
-
-const DEFAULT_BASE_URL = 'http://127.0.0.1:11434';
-
-interface OllamaServiceParams {
-  fetch?: typeof fetch;
-}
-
-export class OllamaService {
-  private _host: string;
-  private _client: OllamaBrowser;
-  private _fetch?: typeof fetch;
-
-  constructor(params: OllamaServiceParams = {}) {
-    this._host = this.getHost();
-    this._fetch = params.fetch;
-    this._client = new OllamaBrowser({ fetch: params?.fetch, host: this._host });
-  }
-
-  getHost = (): string => {
-    const config = keyVaultsConfigSelectors.ollamaConfig(useUserStore.getState());
-
-    return config.baseURL || DEFAULT_BASE_URL;
-  };
-
-  getOllamaClient = () => {
-    if (this.getHost() !== this._host) {
-      this._host = this.getHost();
-      this._client = new OllamaBrowser({ fetch: this._fetch, host: this.getHost() });
-    }
-    return this._client;
-  };
-
-  abort = () => {
-    this._client.abort();
-  };
-
-  pullModel = async (model: string): Promise<AsyncIterable<ProgressResponse>> => {
-    let response: Response | AsyncIterable<ProgressResponse>;
-    try {
-      response = await this.getOllamaClient().pull({ insecure: true, model, stream: true });
-      return response;
-    } catch {
-      response = createErrorResponse(ChatErrorType.OllamaServiceUnavailable, {
-        host: this.getHost(),
-        message: 'please check whether your ollama service is available or set the CORS rules',
-        provider: ModelProvider.Ollama,
-      });
-    }
-
-    if (!response.ok) {
-      throw await getMessageError(response);
-    }
-    return response.json();
-  };
-
-  getModels = async (): Promise<ListResponse> => {
-    let response: Response | ListResponse;
-    try {
-      return await this.getOllamaClient().list();
-    } catch {
-      response = createErrorResponse(ChatErrorType.OllamaServiceUnavailable, {
-        host: this.getHost(),
-        message: 'please check whether your ollama service is available or set the CORS rules',
-        provider: ModelProvider.Ollama,
-      });
-    }
-
-    if (!response.ok) {
-      throw await getMessageError(response);
-    }
-    return response.json();
-  };
-}
-
-export const ollamaService = new OllamaService();