@lobehub/chat 1.133.1 → 1.133.3

package/packages/utils/src/client/apiKeyManager.ts

@@ -0,0 +1,41 @@
+interface KeyStore {
+  index: number;
+  keyLen: number;
+  keys: string[];
+}
+
+export class ClientApiKeyManager {
+  private _cache: Map<string, KeyStore> = new Map();
+
+  private _mode: string = 'random';
+
+  private getKeyStore(apiKeys: string) {
+    let store = this._cache.get(apiKeys);
+
+    if (!store) {
+      const keys = apiKeys
+        .split(',')
+        .map((_) => _.trim())
+        .filter((_) => !!_);
+
+      store = { index: 0, keyLen: keys.length, keys } as KeyStore;
+      this._cache.set(apiKeys, store);
+    }
+
+    return store;
+  }
+
+  pick(apiKeys: string = '') {
+    if (!apiKeys) return undefined;
+
+    const store = this.getKeyStore(apiKeys);
+    let index = 0;
+
+    if (this._mode === 'turn') index = store.index++ % store.keyLen;
+    if (this._mode === 'random') index = Math.floor(Math.random() * store.keyLen);
+
+    return store.keys[index];
+  }
+}
+
+export const clientApiKeyManager = new ClientApiKeyManager();

package/packages/utils/src/client/index.ts

@@ -1,6 +1,8 @@
+export * from './apiKeyManager';
 export * from './clipboard';
 export * from './downloadFile';
 export * from './exportFile';
 export * from './fetchEventSource';
+export * from './parserPlaceholder';
 export * from './sanitize';
 export * from './videoValidation';

package/packages/utils/src/fetch/fetchSSE.ts

@@ -10,7 +10,7 @@ import {
   MessageToolCallSchema,
   ModelReasoning,
   ModelSpeed,
-  ModelTokensUsage,
+  ModelUsage,
   ResponseAnimation,
   ResponseAnimationStyle,
 } from '@lobechat/types';
@@ -32,13 +32,13 @@ export type OnFinishHandler = (
     toolCalls?: MessageToolCall[];
     traceId?: string | null;
     type?: SSEFinishType;
-    usage?: ModelTokensUsage;
+    usage?: ModelUsage;
   },
 ) => Promise<void>;
 
 export interface MessageUsageChunk {
   type: 'usage';
-  usage: ModelTokensUsage;
+  usage: ModelUsage;
 }
 
 export interface MessageSpeedChunk {
@@ -379,7 +379,7 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
   });
 
   let grounding: GroundingSearch | undefined = undefined;
-  let usage: ModelTokensUsage | undefined = undefined;
+  let usage: ModelUsage | undefined = undefined;
   let images: ChatImageChunk[] = [];
   let speed: ModelSpeed | undefined = undefined;
 

package/packages/utils/src/index.ts

@@ -8,6 +8,7 @@ export * from './parseModels';
 export * from './pricing';
 export * from './safeParseJSON';
 export * from './sleep';
+export * from './toolCall';
 export * from './uriParser';
 export * from './url';
 export * from './uuid';

package/packages/utils/src/toolManifest.ts

@@ -3,7 +3,8 @@ import { LobeChatPluginManifest, pluginManifestSchema } from '@lobehub/chat-plug
 import { uniqBy } from 'lodash-es';
 
 import { API_ENDPOINTS } from '@/services/_url';
-import { genToolCallingName } from '@/utils/toolCall';
+
+import { genToolCallingName } from './toolCall';
 
 const fetchJSON = async <T = any>(url: string, proxy = false): Promise<T> => {
   // 2. 发送请求

package/src/app/(backend)/webapi/proxy/route.ts

@@ -1,8 +1,5 @@
 import { NextResponse } from 'next/server';
-import fetch from 'node-fetch';
-import { RequestFilteringAgentOptions, useAgent as ssrfAgent } from 'request-filtering-agent';
-
-import { appEnv } from '@/envs/app';
+import { ssrfSafeFetch } from 'ssrf-safe-fetch';
 
 /**
  * just for a proxy
@@ -11,15 +8,7 @@ export const POST = async (req: Request) => {
   const url = await req.text();
 
   try {
-    // https://www.npmjs.com/package/request-filtering-agent
-    const options: RequestFilteringAgentOptions = {
-      allowIPAddressList: appEnv.SSRF_ALLOW_IP_ADDRESS_LIST?.split(',') || [],
-      allowMetaIPAddress: appEnv.SSRF_ALLOW_PRIVATE_IP_ADDRESS,
-      allowPrivateIPAddress: appEnv.SSRF_ALLOW_PRIVATE_IP_ADDRESS,
-      denyIPAddressList: [],
-    };
-    const res = await fetch(url, { agent: ssrfAgent(url, options) });
-
+    const res = await ssrfSafeFetch(url);
     return new Response(await res.arrayBuffer(), { headers: { ...res.headers } });
   } catch (err) {
     console.error(err); // DNS lookup 127.0.0.1(family:4, host:127.0.0.1.nip.io) is not allowed. Because, It is private IP address.

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/default.tsx

@@ -4,6 +4,7 @@ import { RouteVariants } from '@/utils/server/routeVariants';
 import ChatHydration from './features/ChatHydration';
 import ChatInput from './features/ChatInput';
 import ChatList from './features/ChatList';
+import ChatMinimap from './features/ChatMinimap';
 import ThreadHydration from './features/ThreadHydration';
 import ZenModeToast from './features/ZenModeToast';
 
@@ -17,6 +18,7 @@ const ChatConversation = async (props: DynamicLayoutProps) => {
       <ChatInput mobile={isMobile} />
       <ChatHydration />
       <ThreadHydration />
+      {!isMobile && <ChatMinimap />}
     </>
   );
 };

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatMinimap/index.tsx

@@ -0,0 +1,335 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Tooltip } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { memo, useCallback, useMemo, useState, useSyncExternalStore } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import {
+  getVirtuosoActiveIndex,
+  getVirtuosoGlobalRef,
+  subscribeVirtuosoActiveIndex,
+  subscribeVirtuosoGlobalRef,
+} from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+const MIN_WIDTH = 16;
+const MAX_WIDTH = 30;
+const MAX_CONTENT_LENGTH = 320;
+const MIN_MESSAGES = 6;
+
+const useStyles = createStyles(({ css, token }) => ({
+  arrow: css`
+    cursor: pointer;
+
+    transform: translateX(4px);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+
+    color: ${token.colorTextTertiary};
+
+    opacity: 0;
+    background: none;
+
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      color: ${token.colorText};
+      background: ${token.colorFill};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px ${token.colorPrimaryBorder};
+    }
+  `,
+  arrowVisible: css`
+    opacity: 1;
+  `,
+  container: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    inset-block: 16px 120px;
+    inset-inline-end: 8px;
+
+    width: 32px;
+  `,
+  indicator: css`
+    cursor: pointer;
+
+    flex-shrink: 0;
+
+    min-width: ${MIN_WIDTH}px;
+    height: 12px;
+    padding-block: 4px;
+    padding-inline: 4px;
+    border: none;
+    border-radius: 3px;
+
+    background: none;
+
+    transition:
+      transform 0.2s ease,
+      background-color 0.2s ease,
+      box-shadow 0.2s ease;
+
+    &:hover {
+      transform: scaleX(1.05);
+      background: ${token.colorFill};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px ${token.colorPrimaryBorder};
+    }
+  `,
+  indicatorActive: css`
+    transform: scaleX(1.1);
+    background: ${token.colorPrimary};
+    box-shadow: 0 0 0 1px ${token.colorPrimaryHover};
+  `,
+  indicatorContent: css`
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    background: ${token.colorFillSecondary};
+  `,
+  indicatorContentActive: css`
+    background: ${token.colorPrimary};
+  `,
+  rail: css`
+    pointer-events: auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    align-items: end;
+    justify-content: space-between;
+
+    width: 100%;
+    height: fit-content;
+    margin-block: 0;
+    margin-inline: auto;
+
+    &:hover .arrow {
+      opacity: 1;
+    }
+  `,
+}));
+
+const getIndicatorWidth = (content: string | undefined) => {
+  if (!content) return MIN_WIDTH;
+
+  const ratio = Math.min(content.length / MAX_CONTENT_LENGTH, 1);
+
+  return MIN_WIDTH + (MAX_WIDTH - MIN_WIDTH) * ratio;
+};
+
+const getPreviewText = (content: string | undefined) => {
+  if (!content) return '';
+
+  const normalized = content.replaceAll(/\s+/g, ' ').trim();
+  if (!normalized) return '';
+
+  return normalized.slice(0, 100) + (normalized.length > 100 ? '…' : '');
+};
+
+interface MinimapIndicator {
+  id: string;
+  preview: string;
+  virtuosoIndex: number;
+  width: number;
+}
+
+const ChatMinimap = () => {
+  const { t } = useTranslation('chat');
+  const { styles, cx } = useStyles();
+  const [isHovered, setIsHovered] = useState(false);
+  const virtuosoRef = useSyncExternalStore(
+    subscribeVirtuosoGlobalRef,
+    getVirtuosoGlobalRef,
+    () => null,
+  );
+  const activeIndex = useSyncExternalStore(
+    subscribeVirtuosoActiveIndex,
+    getVirtuosoActiveIndex,
+    () => null,
+  );
+  const messages = useChatStore(chatSelectors.mainDisplayChats);
+
+  const theme = useTheme();
+
+  const indicators = useMemo<MinimapIndicator[]>(() => {
+    return messages.reduce<MinimapIndicator[]>((acc, message, virtuosoIndex) => {
+      if (message.role !== 'user' && message.role !== 'assistant') return acc;
+
+      acc.push({
+        id: message.id,
+        preview: getPreviewText(message.content),
+        virtuosoIndex,
+        width: getIndicatorWidth(message.content),
+      });
+
+      return acc;
+    }, []);
+  }, [messages]);
+
+  const indicatorIndexMap = useMemo(() => {
+    const map = new Map<number, number>();
+    indicators.forEach(({ virtuosoIndex }, position) => {
+      map.set(virtuosoIndex, position);
+    });
+    return map;
+  }, [indicators]);
+
+  const activeIndicatorPosition = useMemo(() => {
+    if (activeIndex === null) return null;
+
+    console.log('> activeIndex', activeIndex);
+    console.log('> indicatorIndexMap', indicatorIndexMap);
+
+    return indicatorIndexMap.get(activeIndex) ?? null;
+  }, [activeIndex, indicatorIndexMap]);
+
+  const handleJump = useCallback(
+    (virtIndex: number) => {
+      virtuosoRef?.current?.scrollToIndex({
+        align: 'start',
+        behavior: 'smooth',
+        index: virtIndex,
+        // The current index detection will be off by 1, so we need to add 1 here
+        offset: 6,
+      });
+    },
+    [virtuosoRef],
+  );
+
+  const handleStep = useCallback(
+    (direction: 'prev' | 'next') => {
+      const ref = virtuosoRef?.current;
+      if (!ref || indicators.length === 0) return;
+
+      let targetPosition: number;
+
+      if (activeIndicatorPosition !== null) {
+        console.log('activeIndicatorPosition', activeIndicatorPosition);
+        // We're on an indicator, move to prev/next
+        const delta = direction === 'prev' ? -1 : 1;
+        targetPosition = Math.min(
+          Math.max(activeIndicatorPosition + delta, 0),
+          Math.max(indicators.length - 1, 0),
+        );
+      } else if (activeIndex !== null) {
+        // We're not on an indicator, find the nearest one in the direction
+        if (direction === 'prev') {
+          let matched = -1;
+          for (let pos = indicators.length - 1; pos >= 0; pos -= 1) {
+            if (indicators[pos].virtuosoIndex < activeIndex) {
+              matched = pos;
+              break;
+            }
+          }
+          targetPosition = matched === -1 ? 0 : matched;
+        } else {
+          console.log('activeIndex', activeIndex);
+          console.log('indicators', indicators);
+          let matched = indicators.length - 1;
+          for (const [pos, indicator] of indicators.entries()) {
+            if (indicator.virtuosoIndex > activeIndex) {
+              matched = pos;
+              break;
+            }
+          }
+          targetPosition = matched;
+        }
+      } else {
+        // No active index, go to first/last
+        targetPosition = direction === 'prev' ? indicators.length - 1 : 0;
+      }
+
+      const targetIndicator = indicators[targetPosition];
+
+      if (!targetIndicator) return;
+
+      ref.scrollToIndex({
+        align: 'start',
+        behavior: 'smooth',
+        index: targetIndicator.virtuosoIndex,
+        offset: 6,
+      });
+    },
+    [activeIndex, activeIndicatorPosition, indicators, virtuosoRef],
+  );
+
+  if (indicators.length <= MIN_MESSAGES) return null;
+
+  return (
+    <Flexbox align={'center'} className={styles.container} justify={'center'}>
+      <Flexbox
+        className={styles.rail}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        role={'group'}
+      >
+        <Tooltip mouseEnterDelay={0.1} placement={'left'} title={t('minimap.previousMessage')}>
+          <button
+            aria-label={t('minimap.previousMessage')}
+            className={cx(styles.arrow, isHovered && styles.arrowVisible)}
+            onClick={() => handleStep('prev')}
+            type={'button'}
+          >
+            <Icon color={theme.colorTextTertiary} icon={ChevronUp} size={16} />
+          </button>
+        </Tooltip>
+        {indicators.map(({ id, width, preview, virtuosoIndex }, position) => {
+          const isActive = activeIndicatorPosition === position;
+
+          return (
+            <Tooltip key={id} mouseEnterDelay={0.1} placement={'left'} title={preview || undefined}>
+              <button
+                aria-current={isActive ? 'true' : undefined}
+                aria-label={t('minimap.jumpToMessage', { index: position + 1 })}
+                className={styles.indicator}
+                onClick={() => handleJump(virtuosoIndex)}
+                style={{
+                  width,
+                }}
+                type={'button'}
+              >
+                <div
+                  className={cx(styles.indicatorContent, isActive && styles.indicatorContentActive)}
+                />
+              </button>
+            </Tooltip>
+          );
+        })}
+        <Tooltip mouseEnterDelay={0.1} placement={'left'} title={t('minimap.nextMessage')}>
+          <button
+            aria-label={t('minimap.nextMessage')}
+            className={cx(styles.arrow, isHovered && styles.arrowVisible)}
+            onClick={() => handleStep('next')}
+            type={'button'}
+          >
+            <Icon icon={ChevronDown} size={16} />
+          </button>
+        </Tooltip>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default memo(ChatMinimap);

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx

@@ -59,7 +59,11 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
       mode={md ? 'fixed' : 'float'}
       onExpandChange={handleExpand}
       placement={'right'}
+      showHandleWhenCollapsed={false}
       showHandleWideArea={false}
+      styles={{
+        handle: { display: 'none' },
+      }}
     >
       <DraggablePanelContainer
         style={{

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/QualitySelect.tsx

@@ -0,0 +1,23 @@
+import { Select } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+
+const QualitySelect = memo(() => {
+  const { t } = useTranslation('image');
+  const { value, setValue, enumValues } = useGenerationConfigParam('quality');
+
+  const options =
+    enumValues?.map((quality) => ({
+      label:
+        quality === 'standard'
+          ? t('config.quality.options.standard')
+          : t('config.quality.options.hd'),
+      value: quality,
+    })) ?? [];
+
+  return <Select onChange={setValue} options={options} style={{ width: '100%' }} value={value} />;
+});
+
+export default QualitySelect;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/index.tsx

@@ -18,6 +18,7 @@ import ImageNum from './components/ImageNum';
 import ImageUrl from './components/ImageUrl';
 import ImageUrlsUpload from './components/ImageUrlsUpload';
 import ModelSelect from './components/ModelSelect';
+import QualitySelect from './components/QualitySelect';
 import SeedNumberInput from './components/SeedNumberInput';
 import SizeSelect from './components/SizeSelect';
 import StepsSliderInput from './components/StepsSliderInput';
@@ -52,6 +53,7 @@ const ConfigPanel = memo(() => {
   const isInit = useImageStore((s) => s.isInit);
   const isSupportImageUrl = useImageStore(isSupportedParamSelector('imageUrl'));
   const isSupportSize = useImageStore(isSupportedParamSelector('size'));
+  const isSupportQuality = useImageStore(isSupportedParamSelector('quality'));
   const isSupportSeed = useImageStore(isSupportedParamSelector('seed'));
   const isSupportSteps = useImageStore(isSupportedParamSelector('steps'));
   const isSupportCfg = useImageStore(isSupportedParamSelector('cfg'));
@@ -75,6 +77,7 @@ const ConfigPanel = memo(() => {
     checkScrollable,
     isSupportImageUrl,
     isSupportSize,
+    isSupportQuality,
     isSupportSeed,
     isSupportSteps,
     isSupportCfg,
@@ -159,6 +162,12 @@ const ConfigPanel = memo(() => {
         </ConfigItemLayout>
       )}
 
+      {isSupportQuality && (
+        <ConfigItemLayout label={t('config.quality.label')}>
+          <QualitySelect />
+        </ConfigItemLayout>
+      )}
+
       {showDimensionControl && <DimensionControlGroup />}
 
       {isSupportSteps && (

package/src/features/Conversation/Extras/Usage/UsageDetail/tokens.test.ts

@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { LobeDefaultAiModelListItem } from '../../../../../../packages/model-bank/src/types/aiModel';
-import { ModelTokensUsage } from '@/types/message';
+import { ModelUsage } from '@/types/message';
 
+import { LobeDefaultAiModelListItem } from '../../../../../../packages/model-bank/src/types/aiModel';
 import { getDetailsToken } from './tokens';
 
 describe('getDetailsToken', () => {
@@ -20,7 +20,7 @@ describe('getDetailsToken', () => {
   } as LobeDefaultAiModelListItem;
 
   it('should return empty object when usage is empty', () => {
-    const usage: ModelTokensUsage = {};
+    const usage: ModelUsage = {};
     const result = getDetailsToken(usage);
 
     expect(result).toEqual({
@@ -38,7 +38,7 @@ describe('getDetailsToken', () => {
   });
 
   it('should handle inputTextTokens correctly', () => {
-    const usage: ModelTokensUsage = {
+    const usage: ModelUsage = {
       inputTextTokens: 100,
     };
 
@@ -67,7 +67,7 @@ describe('getDetailsToken', () => {
     const usage = {
       totalInputTokens: 200,
       cachedTokens: 50,
-    } as ModelTokensUsage;
+    } as ModelUsage;
 
     const result = getDetailsToken(usage, mockModelCard);
 
@@ -83,7 +83,7 @@ describe('getDetailsToken', () => {
   });
 
   it('should handle outputTokens correctly', () => {
-    const usage = { outputTokens: 150 } as ModelTokensUsage;
+    const usage = { outputTokens: 150 } as ModelUsage;
 
     const result = getDetailsToken(usage, mockModelCard);
 
@@ -102,7 +102,7 @@ describe('getDetailsToken', () => {
     const usage = {
       outputTokens: 200,
       reasoningTokens: 50,
-    } as ModelTokensUsage;
+    } as ModelUsage;
 
     const result = getDetailsToken(usage, mockModelCard);
 
@@ -122,7 +122,7 @@ describe('getDetailsToken', () => {
       inputAudioTokens: 100,
       outputAudioTokens: 50,
       outputTokens: 150,
-    } as ModelTokensUsage;
+    } as ModelUsage;
 
     const result = getDetailsToken(usage, mockModelCard);
 
@@ -150,7 +150,7 @@ describe('getDetailsToken', () => {
       outputReasoningTokens: 30,
       totalOutputTokens: 200,
       totalTokens: 300,
-    } as ModelTokensUsage;
+    } as ModelUsage;
 
     const result = getDetailsToken(usage, mockModelCard);
 
@@ -182,7 +182,7 @@ describe('getDetailsToken', () => {
   });
 
   it('should handle inputCitationTokens correctly', () => {
-    const usage: ModelTokensUsage = {
+    const usage: ModelUsage = {
       inputCitationTokens: 75,
     };
 
@@ -200,7 +200,7 @@ describe('getDetailsToken', () => {
       totalInputTokens: 200,
       inputCachedTokens: 50,
       outputTokens: 300,
-    } as ModelTokensUsage;
+    } as ModelUsage;
 
     const result = getDetailsToken(usage, mockModelCard);
 
@@ -216,7 +216,7 @@ describe('getDetailsToken', () => {
   });
 
   it('should handle missing pricing information', () => {
-    const usage = { inputTextTokens: 100, outputTokens: 200 } as ModelTokensUsage;
+    const usage = { inputTextTokens: 100, outputTokens: 200 } as ModelUsage;
 
     const result = getDetailsToken(usage);
 
@@ -232,7 +232,7 @@ describe('getDetailsToken', () => {
   });
 
   it('should handle complex scenario with all token types', () => {
-    const usage: ModelTokensUsage = {
+    const usage: ModelUsage = {
       totalTokens: 1000,
       totalInputTokens: 400,
       inputTextTokens: 300,

package/src/features/Conversation/Extras/Usage/UsageDetail/tokens.ts

@@ -1,6 +1,6 @@
-import type { ModelTokensUsage } from '@lobechat/model-runtime';
 import { LobeDefaultAiModelListItem } from 'model-bank';
 
+import type { ModelTokensUsage } from '@/types/message';
 import { getAudioInputUnitRate, getAudioOutputUnitRate } from '@/utils/pricing';
 
 import { getPrice } from './pricing';