@lobehub/chat 1.68.3 → 1.68.5

package/packages/web-crawler/src/crawImpl/__test__/jina.test.ts

@@ -0,0 +1,169 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { jina } from '../jina';
+
+describe('jina crawler', () => {
+  const mockFetch = vi.fn();
+  global.fetch = mockFetch;
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should crawl url successfully', async () => {
+    const mockResponse = {
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          code: 200,
+          data: {
+            content: 'test content',
+            description: 'test description',
+            siteName: 'test site',
+            title: 'test title',
+          },
+        }),
+    };
+
+    mockFetch.mockResolvedValue(mockResponse);
+
+    const result = await jina('https://example.com', {
+      apiKey: 'test-key',
+      filterOptions: {},
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith('https://r.jina.ai/https://example.com', {
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer test-key',
+        'x-send-from': 'LobeChat Community',
+      },
+    });
+
+    expect(result).toEqual({
+      content: 'test content',
+      contentType: 'text',
+      description: 'test description',
+      length: 12,
+      siteName: 'test site',
+      title: 'test title',
+      url: 'https://example.com',
+    });
+  });
+
+  it('should use JINA_READER_API_KEY from env if apiKey not provided', async () => {
+    process.env.JINA_READER_API_KEY = 'env-reader-key';
+
+    const mockResponse = {
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          code: 200,
+          data: {
+            content: 'test content',
+          },
+        }),
+    };
+
+    mockFetch.mockResolvedValue(mockResponse);
+
+    await jina('https://example.com', { filterOptions: {} });
+
+    expect(mockFetch).toHaveBeenCalledWith('https://r.jina.ai/https://example.com', {
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer env-reader-key',
+        'x-send-from': 'LobeChat Community',
+      },
+    });
+
+    delete process.env.JINA_READER_API_KEY;
+  });
+
+  it('should use JINA_API_KEY from env if apiKey and JINA_READER_API_KEY not provided', async () => {
+    process.env.JINA_API_KEY = 'env-key';
+
+    const mockResponse = {
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          code: 200,
+          data: {
+            content: 'test content',
+          },
+        }),
+    };
+
+    mockFetch.mockResolvedValue(mockResponse);
+
+    await jina('https://example.com', { filterOptions: {} });
+
+    expect(mockFetch).toHaveBeenCalledWith('https://r.jina.ai/https://example.com', {
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer env-key',
+        'x-send-from': 'LobeChat Community',
+      },
+    });
+
+    delete process.env.JINA_API_KEY;
+  });
+
+  it('should send empty Authorization header if no api key provided', async () => {
+    const mockResponse = {
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          code: 200,
+          data: {
+            content: 'test content',
+          },
+        }),
+    };
+
+    mockFetch.mockResolvedValue(mockResponse);
+
+    await jina('https://example.com', { filterOptions: {} });
+
+    expect(mockFetch).toHaveBeenCalledWith('https://r.jina.ai/https://example.com', {
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': '',
+        'x-send-from': 'LobeChat Community',
+      },
+    });
+  });
+
+  it('should return undefined if response is not ok', async () => {
+    mockFetch.mockResolvedValue({ ok: false });
+
+    const result = await jina('https://example.com', { filterOptions: {} });
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined if response code is not 200', async () => {
+    const mockResponse = {
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          code: 400,
+          message: 'Bad Request',
+        }),
+    };
+
+    mockFetch.mockResolvedValue(mockResponse);
+
+    const result = await jina('https://example.com', { filterOptions: {} });
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined if fetch throws error', async () => {
+    mockFetch.mockRejectedValue(new Error('Network error'));
+
+    const result = await jina('https://example.com', { filterOptions: {} });
+
+    expect(result).toBeUndefined();
+  });
+});

package/packages/web-crawler/src/crawImpl/naive.ts

@@ -1,5 +1,5 @@
 import { CrawlImpl, CrawlSuccessResult } from '../type';
-import { NetworkConnectionError, PageNotFoundError } from '../utils/errorType';
+import { NetworkConnectionError, PageNotFoundError, TimeoutError } from '../utils/errorType';
 import { htmlToMarkdown } from '../utils/htmlToMarkdown';
 
 const mixinHeaders = {
@@ -31,15 +31,41 @@ const mixinHeaders = {
   'sec-fetch-user': '?1',
 };
 
+const TIMEOUT_CONTROL = 10_000;
+
+const withTimeout = <T>(promise: Promise<T>, ms: number): Promise<T> => {
+  const controller = new AbortController();
+  const timeoutPromise = new Promise<T>((_, reject) => {
+    setTimeout(() => {
+      controller.abort();
+      reject(new TimeoutError(`Request timeout after ${ms}ms`));
+    }, ms);
+  });
+
+  return Promise.race([promise, timeoutPromise]);
+};
+
 export const naive: CrawlImpl = async (url, { filterOptions }) => {
   let res: Response;
 
   try {
-    res = await fetch(url, { headers: mixinHeaders });
+    res = await withTimeout(
+      fetch(url, {
+        headers: mixinHeaders,
+        signal: new AbortController().signal,
+      }),
+      TIMEOUT_CONTROL,
+    );
   } catch (e) {
-    if ((e as Error).message === 'fetch failed') {
+    const error = e as Error;
+    if (error.message === 'fetch failed') {
       throw new NetworkConnectionError();
     }
+
+    if (error instanceof TimeoutError) {
+      throw error;
+    }
+
     throw e;
   }
 

package/packages/web-crawler/src/utils/errorType.ts

@@ -10,3 +10,10 @@ export class NetworkConnectionError extends Error {
     this.name = 'NetworkConnectionError';
   }
 }
+
+export class TimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'TimeoutError';
+  }
+}

package/scripts/serverLauncher/startServer.js

@@ -74,20 +74,24 @@ const runProxyChainsConfGenerator = async (url) => {
 
   let ip = isValidIP(host, 4) ? host : await resolveHostIP(host, 4);
 
-  const configContent = `
-localnet 127.0.0.0/255.0.0.0
-localnet 10.0.0.0/255.0.0.0
-localnet 172.16.0.0/255.240.0.0
-localnet 192.168.0.0/255.255.0.0
-localnet ::1/128
+  const proxyDNSConfig = process.env.ENABLE_PROXY_DNS === '1' ? `
 proxy_dns
 remote_dns_subnet 224
+`.trim() : '';
+
+  const configContent = `
+localnet 127.0.0.0/8
+localnet 10.0.0.0/8
+localnet 172.16.0.0/12
+localnet 192.168.0.0/16
+localnet ::/127
+${proxyDNSConfig}
 strict_chain
 tcp_connect_time_out 8000
 tcp_read_time_out 15000
 [ProxyList]
 ${protocol} ${ip} ${port} ${user} ${pass}
-`.trim();
+`.replace(/\n{2,}/g, '\n').trim();
 
   await fs.writeFile(PROXYCHAINS_CONF_PATH, configContent);
   console.log(`✅ ProxyChains: All outgoing traffic routed via ${url}.`);

package/src/config/modelProviders/index.ts

@@ -107,12 +107,12 @@ export const DEFAULT_MODEL_PROVIDER_LIST = [
   GoogleProvider,
   VertexAIProvider,
   DeepSeekProvider,
-  PPIOProvider,
   HuggingFaceProvider,
   OpenRouterProvider,
   CloudflareProvider,
   GithubProvider,
   NovitaProvider,
+  PPIOProvider,
   NvidiaProvider,
   TogetherAIProvider,
   FireworksAIProvider,

package/src/config/modelProviders/ppio.ts

@@ -243,7 +243,7 @@ const PPIO: ModelProviderCard = {
     sdkType: 'openai',
     showModelFetcher: true,
   },
-  url: 'https://ppinfra.com/?utm_source=github_lobe-chat&utm_medium=github_readme&utm_campaign=link',
+  url: 'https://ppinfra.com/user/register?invited_by=RQIMOC',
 };
 
 export default PPIO; 

package/src/features/Conversation/Extras/Assistant.tsx

@@ -1,9 +1,7 @@
-import { ModelTag } from '@lobehub/icons';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/slices/chat';
+import { LOADING_FLAT } from '@/const/message';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
@@ -12,34 +10,28 @@ import { RenderMessageExtra } from '../types';
 import ExtraContainer from './ExtraContainer';
 import TTS from './TTS';
 import Translate from './Translate';
+import Usage from './Usage';
 
 export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
-  ({ extra, id, content }) => {
-    const model = useAgentStore(agentSelectors.currentAgentModel);
+  ({ extra, id, content, metadata, tools }) => {
     const loading = useChatStore(chatSelectors.isMessageGenerating(id));
 
-    const showModelTag = extra?.fromModel && model !== extra?.fromModel;
-    const showTranslate = !!extra?.translate;
-    const showTTS = !!extra?.tts;
-
-    const showExtra = showModelTag || showTranslate || showTTS;
-
-    if (!showExtra) return;
-
     return (
-      <Flexbox gap={8} style={{ marginTop: 8 }}>
-        {showModelTag && (
-          <div>
-            <ModelTag model={extra?.fromModel as string} />
-          </div>
+      <Flexbox gap={8} style={{ marginTop: !!tools?.length ? 8 : 4 }}>
+        {content !== LOADING_FLAT && extra?.fromModel && (
+          <Usage
+            metadata={metadata || {}}
+            model={extra?.fromModel}
+            provider={extra.fromProvider!}
+          />
         )}
         <>
-          {extra?.tts && (
+          {!!extra?.tts && (
             <ExtraContainer>
               <TTS content={content} id={id} loading={loading} {...extra?.tts} />
             </ExtraContainer>
           )}
-          {extra?.translate && (
+          {!!extra?.translate && (
             <ExtraContainer>
               <Translate id={id} loading={loading} {...extra?.translate} />
             </ExtraContainer>

package/src/features/Conversation/Extras/Usage/UsageDetail/ModelCard.tsx

@@ -0,0 +1,130 @@
+import { ModelIcon } from '@lobehub/icons';
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Segmented } from 'antd';
+import { createStyles } from 'antd-style';
+import { ArrowDownToDot, ArrowUpFromDot, CircleFadingArrowUp } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { LobeDefaultAiModelListItem } from '@/types/aiModel';
+import { ModelPriceCurrency } from '@/types/llm';
+import { formatPriceByCurrency } from '@/utils/format';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      font-size: 12px;
+    `,
+    desc: css`
+      line-height: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    pricing: css`
+      font-size: 12px;
+      color: ${token.colorTextSecondary};
+    `,
+  };
+});
+
+interface ModelCardProps extends LobeDefaultAiModelListItem {
+  provider: string;
+}
+
+const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName }) => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+
+  const isShowCredit = useGlobalStore(systemStatusSelectors.isShowCredit) && !!pricing;
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  const inputPrice = formatPriceByCurrency(pricing?.input, pricing?.currency as ModelPriceCurrency);
+  const cachedInputPrice = formatPriceByCurrency(
+    pricing?.cachedInput,
+    pricing?.currency as ModelPriceCurrency,
+  );
+  const outputPrice = formatPriceByCurrency(
+    pricing?.output,
+    pricing?.currency as ModelPriceCurrency,
+  );
+  return (
+    <>
+      <Flexbox
+        align={'center'}
+        className={styles.container}
+        flex={1}
+        gap={40}
+        horizontal
+        justify={'space-between'}
+      >
+        <Flexbox align={'center'} gap={8} horizontal>
+          <ModelIcon model={id} size={22} />
+          <Flexbox flex={1} gap={2} style={{ minWidth: 0 }}>
+            <Flexbox align={'center'} gap={8} horizontal style={{ lineHeight: '12px' }}>
+              {displayName || id}
+            </Flexbox>
+            <span className={styles.desc}>{provider}</span>
+          </Flexbox>
+        </Flexbox>
+        {!!pricing && (
+          <Flexbox>
+            <Segmented
+              onChange={(value) => {
+                updateSystemStatus({ isShowCredit: value === 'credit' });
+              }}
+              options={[
+                { label: 'Token', value: 'token' },
+                {
+                  label: (
+                    <Tooltip title={t('messages.modelCard.creditTooltip')}>
+                      {t('messages.modelCard.credit')}
+                    </Tooltip>
+                  ),
+                  value: 'credit',
+                },
+              ]}
+              size={'small'}
+              value={isShowCredit ? 'credit' : 'token'}
+            />
+          </Flexbox>
+        )}
+      </Flexbox>
+      {isShowCredit && (
+        <Flexbox horizontal justify={'space-between'}>
+          <div />
+          <Flexbox align={'center'} className={styles.pricing} gap={8} horizontal>
+            {t('messages.modelCard.creditPricing')}:
+            {pricing?.cachedInput && (
+              <Tooltip
+                title={t('messages.modelCard.pricing.inputCachedTokens', {
+                  amount: cachedInputPrice,
+                })}
+              >
+                <Flexbox gap={2} horizontal>
+                  <Icon icon={CircleFadingArrowUp} />
+                  {cachedInputPrice}
+                </Flexbox>
+              </Tooltip>
+            )}
+            <Tooltip title={t('messages.modelCard.pricing.inputTokens', { amount: inputPrice })}>
+              <Flexbox gap={2} horizontal>
+                <Icon icon={ArrowUpFromDot} />
+                {inputPrice}
+              </Flexbox>
+            </Tooltip>
+            <Tooltip title={t('messages.modelCard.pricing.outputTokens', { amount: outputPrice })}>
+              <Flexbox gap={2} horizontal>
+                <Icon icon={ArrowDownToDot} />
+                {outputPrice}
+              </Flexbox>
+            </Tooltip>
+          </Flexbox>
+        </Flexbox>
+      )}
+    </>
+  );
+});
+
+export default ModelCard;

package/src/features/Conversation/Extras/Usage/UsageDetail/TokenProgress.tsx

@@ -0,0 +1,71 @@
+import { useTheme } from 'antd-style';
+import numeral from 'numeral';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+
+export interface TokenProgressItem {
+  color: string;
+  id: string;
+  title: string;
+  value: number;
+}
+
+interface TokenProgressProps {
+  data: TokenProgressItem[];
+  showIcon?: boolean;
+}
+
+const format = (number: number) => numeral(number).format('0,0');
+
+const TokenProgress = memo<TokenProgressProps>(({ data, showIcon }) => {
+  const theme = useTheme();
+  const total = data.reduce((acc, item) => acc + item.value, 0);
+
+  return (
+    <Flexbox gap={8} style={{ position: 'relative' }} width={'100%'}>
+      <Flexbox
+        height={6}
+        horizontal
+        style={{
+          background: total === 0 ? theme.colorFill : undefined,
+          borderRadius: 3,
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        width={'100%'}
+      >
+        {data.map((item) => (
+          <Flexbox
+            height={'100%'}
+            key={item.id}
+            style={{ background: item.color, flex: item.value }}
+          />
+        ))}
+      </Flexbox>
+      <Flexbox>
+        {data.map((item) => (
+          <Flexbox align={'center'} gap={4} horizontal justify={'space-between'} key={item.id}>
+            <Flexbox align={'center'} gap={4} horizontal>
+              {showIcon && (
+                <div
+                  style={{
+                    background: item.color,
+                    borderRadius: '50%',
+                    flex: 'none',
+                    height: 6,
+                    width: 6,
+                  }}
+                />
+              )}
+              <div style={{ color: theme.colorTextSecondary }}>{item.title}</div>
+            </Flexbox>
+            <div style={{ fontWeight: 500 }}>{format(item.value)}</div>
+          </Flexbox>
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default TokenProgress;

package/src/features/Conversation/Extras/Usage/UsageDetail/index.tsx

@@ -0,0 +1,146 @@
+import { Icon } from '@lobehub/ui';
+import { Divider, Popover } from 'antd';
+import { useTheme } from 'antd-style';
+import { BadgeCent, CoinsIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { ModelTokensUsage } from '@/types/message';
+import { formatNumber } from '@/utils/format';
+
+import ModelCard from './ModelCard';
+import TokenProgress, { TokenProgressItem } from './TokenProgress';
+import { getDetailsToken } from './tokens';
+
+interface TokenDetailProps {
+  model: string;
+  provider: string;
+  usage: ModelTokensUsage;
+}
+
+const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
+  const { t } = useTranslation('chat');
+  const theme = useTheme();
+
+  const modelCard = useAiInfraStore(aiModelSelectors.getModelCard(model, provider));
+  const isShowCredit = useGlobalStore(systemStatusSelectors.isShowCredit) && !!modelCard?.pricing;
+
+  const detailTokens = getDetailsToken(usage, modelCard);
+  const inputDetails = [
+    !!detailTokens.inputAudio && {
+      color: theme.cyan9,
+      id: 'reasoning',
+      title: t('messages.tokenDetails.inputAudio'),
+      value: isShowCredit ? detailTokens.inputAudio.credit : detailTokens.inputAudio.token,
+    },
+    !!detailTokens.inputText && {
+      color: theme.green,
+      id: 'inputText',
+      title: t('messages.tokenDetails.inputText'),
+      value: isShowCredit ? detailTokens.inputText.credit : detailTokens.inputText.token,
+    },
+  ].filter(Boolean) as TokenProgressItem[];
+
+  const outputDetails = [
+    !!detailTokens.reasoning && {
+      color: theme.pink,
+      id: 'reasoning',
+      title: t('messages.tokenDetails.reasoning'),
+      value: isShowCredit ? detailTokens.reasoning.credit : detailTokens.reasoning.token,
+    },
+    !!detailTokens.outputAudio && {
+      color: theme.cyan9,
+      id: 'outputAudio',
+      title: t('messages.tokenDetails.outputAudio'),
+      value: isShowCredit ? detailTokens.outputAudio.credit : detailTokens.outputAudio.token,
+    },
+    !!detailTokens.outputText && {
+      color: theme.green,
+      id: 'outputText',
+      title: t('messages.tokenDetails.outputText'),
+      value: isShowCredit ? detailTokens.outputText.credit : detailTokens.outputText.token,
+    },
+  ].filter(Boolean) as TokenProgressItem[];
+
+  const totalDetail = [
+    !!detailTokens.cachedInput && {
+      color: theme.orange,
+      id: 'cachedInput',
+      title: t('messages.tokenDetails.inputCached'),
+      value: isShowCredit ? detailTokens.cachedInput.credit : detailTokens.cachedInput.token,
+    },
+    !!detailTokens.uncachedInput && {
+      color: theme.colorFill,
+
+      id: 'uncachedInput',
+      title: t('messages.tokenDetails.inputUncached'),
+      value: isShowCredit ? detailTokens.uncachedInput.credit : detailTokens.uncachedInput.token,
+    },
+    !!detailTokens.totalOutput && {
+      color: theme.colorSuccess,
+      id: 'output',
+      title: t('messages.tokenDetails.output'),
+      value: isShowCredit ? detailTokens.totalOutput.credit : detailTokens.totalOutput.token,
+    },
+  ].filter(Boolean) as TokenProgressItem[];
+
+  const displayTotal =
+    isShowCredit && !!detailTokens.totalTokens
+      ? formatNumber(detailTokens.totalTokens.credit)
+      : formatNumber(usage.totalTokens);
+
+  return (
+    <Popover
+      arrow={false}
+      content={
+        <Flexbox gap={20} style={{ minWidth: 200 }}>
+          {modelCard && <ModelCard {...modelCard} provider={provider} />}
+          {inputDetails.length > 1 && (
+            <>
+              <Flexbox align={'center'} gap={4} horizontal justify={'space-between'} width={'100%'}>
+                <div style={{ color: theme.colorTextDescription }}>
+                  {t('messages.tokenDetails.inputTitle')}
+                </div>
+              </Flexbox>
+              <TokenProgress data={inputDetails} showIcon />
+            </>
+          )}
+          {outputDetails.length > 1 && (
+            <>
+              <Flexbox align={'center'} gap={4} horizontal justify={'space-between'} width={'100%'}>
+                <div style={{ color: theme.colorTextDescription }}>
+                  {t('messages.tokenDetails.outputTitle')}
+                </div>
+              </Flexbox>
+              <TokenProgress data={outputDetails} showIcon />
+            </>
+          )}
+
+          <Flexbox>
+            <TokenProgress data={totalDetail} showIcon />
+            <Divider style={{ marginBlock: 8 }} />
+            <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+              <div style={{ color: theme.colorTextSecondary }}>
+                {t('messages.tokenDetails.total')}
+              </div>
+              <div style={{ fontWeight: 500 }}>{displayTotal}</div>
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+      }
+      placement={'top'}
+      trigger={['hover', 'click']}
+    >
+      <Center gap={2} horizontal style={{ cursor: 'default' }}>
+        <Icon icon={isShowCredit ? BadgeCent : CoinsIcon} />
+        {displayTotal}
+      </Center>
+    </Popover>
+  );
+});
+
+export default TokenDetail;