@lobehub/chat 1.69.5 → 1.70.0

package/src/features/ChatInput/ActionBar/Search/FunctionCallingModelSelect/index.tsx

@@ -0,0 +1,85 @@
+import { Select, SelectProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useMemo } from 'react';
+
+import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
+import { WorkingModel } from '@/types/agent';
+import { EnabledProviderWithModels } from '@/types/aiProvider';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  select: css`
+    &.${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
+      padding-inline-start: 12px;
+    }
+  `,
+}));
+
+interface ModelOption {
+  label: any;
+  provider: string;
+  value: string;
+}
+
+interface ModelSelectProps {
+  onChange?: (props: WorkingModel) => void;
+  showAbility?: boolean;
+  value?: WorkingModel;
+}
+
+const ModelSelect = memo<ModelSelectProps>(({ value, onChange }) => {
+  const enabledList = useEnabledChatModels();
+
+  const { styles } = useStyles();
+
+  const options = useMemo<SelectProps['options']>(() => {
+    const getChatModels = (provider: EnabledProviderWithModels) =>
+      provider.children
+        .filter((model) => !!model.abilities.functionCall)
+        .map((model) => ({
+          label: <ModelItemRender {...model} {...model.abilities} showInfoTag={false} />,
+          provider: provider.id,
+          value: `${provider.id}/${model.id}`,
+        }));
+
+    if (enabledList.length === 1) {
+      const provider = enabledList[0];
+
+      return getChatModels(provider);
+    }
+
+    return enabledList
+      .filter((p) => !!getChatModels(p).length)
+      .map((provider) => {
+        const options = getChatModels(provider);
+
+        return {
+          label: (
+            <ProviderItemRender
+              logo={provider.logo}
+              name={provider.name}
+              provider={provider.id}
+              source={provider.source}
+            />
+          ),
+          options,
+        };
+      });
+  }, [enabledList]);
+
+  return (
+    <Select
+      onChange={(value, option) => {
+        const model = value.split('/').slice(1).join('/');
+        onChange?.({ model, provider: (option as unknown as ModelOption).provider });
+      }}
+      options={options}
+      popupClassName={styles.select}
+      popupMatchSelectWidth={false}
+      value={`${value?.provider}/${value?.model}`}
+      variant={'filled'}
+    />
+  );
+});
+
+export default ModelSelect;

package/src/features/ChatInput/ActionBar/Search/SwitchPanel.tsx

@@ -12,6 +12,7 @@ import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/slices/c
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { SearchMode } from '@/types/search';
 
+import FCSearchModel from './FCSearchModel';
 import ModelBuiltinSearch from './ModelBuiltinSearch';
 
 const { Text } = Typography;
@@ -38,10 +39,6 @@ const useStyles = createStyles(({ css, token }) => ({
     font-size: 12px;
     color: ${token.colorTextSecondary};
   `,
-  disable: css`
-    cursor: not-allowed;
-    opacity: 0.45;
-  `,
   iconWrapper: css`
     display: flex;
     flex-shrink: 0;
@@ -80,8 +77,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Item = memo<NetworkOption>(({ value, description, icon, label, disable }) => {
-  const { t } = useTranslation('chat');
+const Item = memo<NetworkOption>(({ value, description, icon, label }) => {
   const { styles } = useStyles();
   const [mode, updateAgentChatConfig] = useAgentStore((s) => [
     agentChatConfigSelectors.agentSearchMode(s),
@@ -96,12 +92,12 @@ const Item = memo<NetworkOption>(({ value, description, icon, label, disable })
       key={value}
       onClick={() => updateAgentChatConfig({ searchMode: value })}
     >
-      <Flexbox className={disable ? styles.disable : ''} gap={8} horizontal>
+      <Flexbox gap={8} horizontal>
         <div className={styles.iconWrapper}>{icon}</div>
         <div className={styles.content}>
           <div className={styles.title}>{label}</div>
           <Text className={styles.description} type="secondary">
-            {disable ? t('search.mode.disable') : description}
+            {description}
           </Text>
         </div>
       </Flexbox>
@@ -132,34 +128,24 @@ const AINetworkSettings = memo<AINetworkSettingsProps>(() => {
       label: t('search.mode.off.title'),
       value: 'off',
     },
-    // 等应用层联网功能做好以后再开启
-    // {
-    //   description: t('search.mode.on.desc'),
-    //   icon: <WifiOutlined />,
-    //   label: t('search.mode.on.title'),
-    //   value: 'on',
-    // },
     {
       description: t('search.mode.auto.desc'),
-      disable: !supportFC,
       icon: <Icon icon={SparklesIcon} />,
       label: t('search.mode.auto.title'),
       value: 'auto',
     },
   ];
 
+  const showDivider = isModelHasBuiltinSearchConfig || !supportFC;
+
   return (
     <Flexbox gap={8}>
       {options.map((option) => (
         <Item {...option} key={option.value} />
       ))}
-
-      {isModelHasBuiltinSearchConfig && (
-        <>
-          <Divider style={{ margin: 0, paddingInline: 12 }} />
-          <ModelBuiltinSearch />
-        </>
-      )}
+      {showDivider && <Divider style={{ margin: 0, paddingInline: 12 }} />}
+      {isModelHasBuiltinSearchConfig && <ModelBuiltinSearch />}
+      {!supportFC && <FCSearchModel />}
     </Flexbox>
   );
 });

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

@@ -7,11 +7,10 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { getPrice } from '@/features/Conversation/Extras/Usage/UsageDetail/pricing';
 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 {
@@ -40,19 +39,8 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
   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 writeCacheInputPrice = formatPriceByCurrency(
-    pricing?.writeCacheInput,
-    pricing?.currency as ModelPriceCurrency,
-  );
-  const outputPrice = formatPriceByCurrency(
-    pricing?.output,
-    pricing?.currency as ModelPriceCurrency,
-  );
+  const formatPrice = getPrice(pricing || {});
+
   return (
     <Flexbox gap={8}>
       <Flexbox
@@ -103,37 +91,41 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
             {pricing?.cachedInput && (
               <Tooltip
                 title={t('messages.modelCard.pricing.inputCachedTokens', {
-                  amount: cachedInputPrice,
+                  amount: formatPrice.cachedInput,
                 })}
               >
                 <Flexbox gap={2} horizontal>
                   <Icon icon={CircleFadingArrowUp} />
-                  {cachedInputPrice}
+                  {formatPrice.cachedInput}
                 </Flexbox>
               </Tooltip>
             )}
             {pricing?.writeCacheInput && (
               <Tooltip
                 title={t('messages.modelCard.pricing.writeCacheInputTokens', {
-                  amount: writeCacheInputPrice,
+                  amount: formatPrice.writeCacheInput,
                 })}
               >
                 <Flexbox gap={2} horizontal>
                   <Icon icon={BookUp2Icon} />
-                  {writeCacheInputPrice}
+                  {formatPrice.writeCacheInput}
                 </Flexbox>
               </Tooltip>
             )}
-            <Tooltip title={t('messages.modelCard.pricing.inputTokens', { amount: inputPrice })}>
+            <Tooltip
+              title={t('messages.modelCard.pricing.inputTokens', { amount: formatPrice.input })}
+            >
               <Flexbox gap={2} horizontal>
                 <Icon icon={ArrowUpFromDot} />
-                {inputPrice}
+                {formatPrice.input}
               </Flexbox>
             </Tooltip>
-            <Tooltip title={t('messages.modelCard.pricing.outputTokens', { amount: outputPrice })}>
+            <Tooltip
+              title={t('messages.modelCard.pricing.outputTokens', { amount: formatPrice.output })}
+            >
               <Flexbox gap={2} horizontal>
                 <Icon icon={ArrowDownToDot} />
-                {outputPrice}
+                {formatPrice.output}
               </Flexbox>
             </Tooltip>
           </Flexbox>

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

@@ -0,0 +1,26 @@
+import { ChatModelPricing } from '@/types/aiModel';
+import { ModelPriceCurrency } from '@/types/llm';
+import { formatPriceByCurrency } from '@/utils/format';
+
+export const getPrice = (pricing: ChatModelPricing) => {
+  const inputPrice = formatPriceByCurrency(pricing?.input, pricing?.currency as ModelPriceCurrency);
+  const cachedInputPrice = formatPriceByCurrency(
+    pricing?.cachedInput,
+    pricing?.currency as ModelPriceCurrency,
+  );
+  const writeCacheInputPrice = formatPriceByCurrency(
+    pricing?.writeCacheInput,
+    pricing?.currency as ModelPriceCurrency,
+  );
+  const outputPrice = formatPriceByCurrency(
+    pricing?.output,
+    pricing?.currency as ModelPriceCurrency,
+  );
+
+  return {
+    cachedInput: Number(cachedInputPrice),
+    input: Number(inputPrice),
+    output: Number(outputPrice),
+    writeCacheInput: Number(writeCacheInputPrice),
+  };
+};

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

@@ -70,7 +70,7 @@ describe('getDetailsToken', () => {
     const result = getDetailsToken(usage, mockModelCard);
 
     expect(result.inputCached).toEqual({
-      credit: 0, // 50 * 0.005 = 0.25, rounded to 0
+      credit: 1,
       token: 50,
     });
 
@@ -165,12 +165,12 @@ describe('getDetailsToken', () => {
     const result = getDetailsToken(usage, mockModelCard);
 
     // uncachedInput: (200 - 50) * 0.01 = 1.5 -> 2
-    // cachedInput: 50 * 0.005 = 0.25 -> 0
+    // cachedInput: 50 * 0.005 = 0.25 -> 1
     // totalOutput: 300 * 0.02 = 6
-    // totalCredit = 2 + 0 + 6 = 8
+    // totalCredit = 2 + 1 + 6 = 9
 
     expect(result.totalTokens).toEqual({
-      credit: 8,
+      credit: 9,
       token: 500,
     });
   });

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

@@ -1,6 +1,8 @@
-import { LobeDefaultAiModelListItem } from '@/types/aiModel';
+import { ChatModelPricing, LobeDefaultAiModelListItem } from '@/types/aiModel';
 import { ModelTokensUsage } from '@/types/message';
 
+import { getPrice } from './pricing';
+
 const calcCredit = (token: number, pricing?: number) => {
   if (!pricing) return '-';
 
@@ -29,23 +31,26 @@ export const getDetailsToken = (
     ? usage?.inputCacheMissTokens
     : totalInputTokens - (inputCacheTokens || 0);
 
+  // Pricing
+  const formatPrice = getPrice(modelCard?.pricing as ChatModelPricing);
+
   const inputCacheMissCredit = (
-    !!inputCacheMissTokens ? calcCredit(inputCacheMissTokens, modelCard?.pricing?.input) : 0
+    !!inputCacheMissTokens ? calcCredit(inputCacheMissTokens, formatPrice.input) : 0
   ) as number;
 
   const inputCachedCredit = (
-    !!inputCacheTokens ? calcCredit(inputCacheTokens, modelCard?.pricing?.cachedInput) : 0
+    !!inputCacheTokens ? calcCredit(inputCacheTokens, formatPrice.cachedInput) : 0
   ) as number;
 
   const inputWriteCachedCredit = !!inputWriteCacheTokens
-    ? (calcCredit(inputWriteCacheTokens, modelCard?.pricing?.writeCacheInput) as number)
+    ? (calcCredit(inputWriteCacheTokens, formatPrice.writeCacheInput) as number)
     : 0;
 
   const totalOutputCredit = (
-    !!totalOutputTokens ? calcCredit(totalOutputTokens, modelCard?.pricing?.output) : 0
+    !!totalOutputTokens ? calcCredit(totalOutputTokens, formatPrice.output) : 0
   ) as number;
   const totalInputCredit = (
-    !!totalInputTokens ? calcCredit(totalInputTokens, modelCard?.pricing?.output) : 0
+    !!totalInputTokens ? calcCredit(totalInputTokens, formatPrice.output) : 0
   ) as number;
 
   const totalCredit =
@@ -69,13 +74,13 @@ export const getDetailsToken = (
       : undefined,
     inputCitation: !!usage.inputCitationTokens
       ? {
-          credit: calcCredit(usage.inputCitationTokens, modelCard?.pricing?.input),
+          credit: calcCredit(usage.inputCitationTokens, formatPrice.input),
           token: usage.inputCitationTokens,
         }
       : undefined,
     inputText: !!inputTextTokens
       ? {
-          credit: calcCredit(inputTextTokens, modelCard?.pricing?.input),
+          credit: calcCredit(inputTextTokens, formatPrice.input),
           token: inputTextTokens,
         }
       : undefined,
@@ -89,13 +94,13 @@ export const getDetailsToken = (
       : undefined,
     outputReasoning: !!outputReasoningTokens
       ? {
-          credit: calcCredit(outputReasoningTokens, modelCard?.pricing?.output),
+          credit: calcCredit(outputReasoningTokens, formatPrice.output),
           token: outputReasoningTokens,
         }
       : undefined,
     outputText: !!outputTextTokens
       ? {
-          credit: calcCredit(outputTextTokens, modelCard?.pricing?.output),
+          credit: calcCredit(outputTextTokens, formatPrice.output),
           token: outputTextTokens,
         }
       : undefined,

package/src/features/Conversation/Messages/Assistant/IntentUnderstanding.tsx

@@ -0,0 +1,25 @@
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import CircleLoader from '@/components/CircleLoader';
+import { shinyTextStylish } from '@/styles/loading';
+
+const useStyles = createStyles(({ token }) => ({
+  shinyText: shinyTextStylish(token),
+}));
+
+const IntentUnderstanding = () => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('chat');
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <CircleLoader />
+      <Flexbox className={styles.shinyText} horizontal>
+        {t('intentUnderstanding.title')}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+export default IntentUnderstanding;

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/ToolTitle.tsx

@@ -6,6 +6,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import Loader from '@/components/CircleLoader';
 import PluginAvatar from '@/features/PluginAvatar';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
@@ -14,8 +15,6 @@ import { toolSelectors } from '@/store/tool/selectors';
 import { shinyTextStylish } from '@/styles/loading';
 import { WebBrowsingManifest } from '@/tools/web-browsing';
 
-import Loader from './Loader';
-
 export const useStyles = createStyles(({ css, token }) => ({
   apiName: css`
     overflow: hidden;

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -8,6 +8,7 @@ import { ChatMessage } from '@/types/message';
 
 import { DefaultMessage } from '../Default';
 import FileChunks from './FileChunks';
+import IntentUnderstanding from './IntentUnderstanding';
 import Reasoning from './Reasoning';
 import SearchGrounding from './SearchGrounding';
 import Tool from './Tool';
@@ -24,6 +25,8 @@ export const AssistantMessage = memo<
 
   const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
 
+  const isIntentUnderstanding = useChatStore(aiChatSelectors.isIntentUnderstanding(id));
+
   const showSearch = !!search && !!search.citations?.length;
 
   // remove \n to avoid empty content
@@ -32,6 +35,8 @@ export const AssistantMessage = memo<
     (!!props.reasoning && props.reasoning.content?.trim() !== '') ||
     (!props.reasoning && isReasoning);
 
+  const showFileChunks = !!chunksList && chunksList.length > 0;
+
   return editing ? (
     <DefaultMessage
       content={content}
@@ -44,16 +49,20 @@ export const AssistantMessage = memo<
       {showSearch && (
         <SearchGrounding citations={search?.citations} searchQueries={search?.searchQueries} />
       )}
-      {!!chunksList && chunksList.length > 0 && <FileChunks data={chunksList} />}
+      {showFileChunks && <FileChunks data={chunksList} />}
       {showReasoning && <Reasoning {...props.reasoning} id={id} />}
-      {content && (
-        <DefaultMessage
-          addIdOnDOM={false}
-          content={content}
-          id={id}
-          isToolCallGenerating={isToolCallGenerating}
-          {...props}
-        />
+      {isIntentUnderstanding ? (
+        <IntentUnderstanding />
+      ) : (
+        content && (
+          <DefaultMessage
+            addIdOnDOM={false}
+            content={content}
+            id={id}
+            isToolCallGenerating={isToolCallGenerating}
+            {...props}
+          />
+        )
       )}
       {tools && (
         <Flexbox gap={8}>

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/Render/index.tsx

@@ -64,16 +64,14 @@ const Render = memo<ArtifactProps>(({ identifier, title, type, language, childre
 
   const inThread = useContext(InPortalThreadContext);
   const { message } = App.useApp();
-  const [isGenerating, isArtifactTagClosed, currentArtifactMessageId, openArtifact, closeArtifact] =
-    useChatStore((s) => {
-      return [
-        chatSelectors.isMessageGenerating(id)(s),
-        chatPortalSelectors.isArtifactTagClosed(id)(s),
-        chatPortalSelectors.artifactMessageId(s),
-        s.openArtifact,
-        s.closeArtifact,
-      ];
-    });
+  const [isGenerating, isArtifactTagClosed, openArtifact, closeArtifact] = useChatStore((s) => {
+    return [
+      chatSelectors.isMessageGenerating(id)(s),
+      chatPortalSelectors.isArtifactTagClosed(id)(s),
+      s.openArtifact,
+      s.closeArtifact,
+    ];
+  });
 
   const openArtifactUI = () => {
     openArtifact({ id, identifier, language, title, type });
@@ -86,52 +84,53 @@ const Render = memo<ArtifactProps>(({ identifier, title, type, language, childre
   }, [isGenerating, hasChildren, str, identifier, title, type, id, language]);
 
   return (
-    <p>
-      <Flexbox
-        className={styles.container}
-        gap={16}
-        onClick={() => {
-          if (currentArtifactMessageId === id) {
-            closeArtifact();
-          } else {
-            if (inThread) {
-              message.info(t('artifact.inThread'));
-              return;
-            }
-            openArtifactUI();
+    <Flexbox
+      className={styles.container}
+      gap={16}
+      onClick={() => {
+        const currentArtifactMessageId = chatPortalSelectors.artifactMessageId(
+          useChatStore.getState(),
+        );
+        if (currentArtifactMessageId === id) {
+          closeArtifact();
+        } else {
+          if (inThread) {
+            message.info(t('artifact.inThread'));
+            return;
           }
-        }}
-        width={'100%'}
-      >
-        <Flexbox align={'center'} flex={1} horizontal>
-          <Center className={styles.avatar} height={64} horizontal width={64}>
-            <ArtifactIcon type={type} />
-          </Center>
-          <Flexbox gap={4} paddingBlock={8} paddingInline={12}>
-            {!title && isGenerating ? (
-              <Flexbox className={cx(dotLoading)} horizontal>
-                {t('artifact.generating')}
+          openArtifactUI();
+        }
+      }}
+      width={'100%'}
+    >
+      <Flexbox align={'center'} flex={1} horizontal>
+        <Center className={styles.avatar} height={64} horizontal width={64}>
+          <ArtifactIcon type={type} />
+        </Center>
+        <Flexbox gap={4} paddingBlock={8} paddingInline={12}>
+          {!title && isGenerating ? (
+            <Flexbox className={cx(dotLoading)} horizontal>
+              {t('artifact.generating')}
+            </Flexbox>
+          ) : (
+            <Flexbox className={cx(styles.title)}>{title || t('artifact.unknownTitle')}</Flexbox>
+          )}
+          {hasChildren && (
+            <Flexbox className={styles.desc} horizontal>
+              {identifier} ·{' '}
+              <Flexbox gap={2} horizontal>
+                {!isArtifactTagClosed && (
+                  <div>
+                    <Icon icon={Loader2} spin />
+                  </div>
+                )}
+                {str?.length}
               </Flexbox>
-            ) : (
-              <Flexbox className={cx(styles.title)}>{title || t('artifact.unknownTitle')}</Flexbox>
-            )}
-            {hasChildren && (
-              <Flexbox className={styles.desc} horizontal>
-                {identifier} ·{' '}
-                <Flexbox gap={2} horizontal>
-                  {!isArtifactTagClosed && (
-                    <div>
-                      <Icon icon={Loader2} spin />
-                    </div>
-                  )}
-                  {str?.length}
-                </Flexbox>
-              </Flexbox>
-            )}
-          </Flexbox>
+            </Flexbox>
+          )}
         </Flexbox>
       </Flexbox>
-    </p>
+    </Flexbox>
   );
 });
 

package/src/features/ModelSwitchPanel/index.tsx

@@ -1,8 +1,9 @@
-import { Icon } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
 import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import type { ItemType } from 'antd/es/menu/interface';
-import { LucideArrowRight } from 'lucide-react';
+import { LucideArrowRight, LucideBolt } from 'lucide-react';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { PropsWithChildren, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -86,17 +87,42 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
       return items;
     };
 
+    if (enabledList.length === 0)
+      return [
+        {
+          key: `no-provider`,
+          label: (
+            <Flexbox gap={8} horizontal style={{ color: theme.colorTextTertiary }}>
+              {t('ModelSwitchPanel.emptyProvider')}
+              <Icon icon={LucideArrowRight} />
+            </Flexbox>
+          ),
+          onClick: () => {
+            router.push(isDeprecatedEdition ? '/settings/llm' : `/settings/provider`);
+          },
+        },
+      ];
+
     // otherwise show with provider group
     return enabledList.map((provider) => ({
       children: getModelItems(provider),
       key: provider.id,
       label: (
-        <ProviderItemRender
-          logo={provider.logo}
-          name={provider.name}
-          provider={provider.id}
-          source={provider.source}
-        />
+        <Flexbox horizontal justify="space-between">
+          <ProviderItemRender
+            logo={provider.logo}
+            name={provider.name}
+            provider={provider.id}
+            source={provider.source}
+          />
+          <Link href={isDeprecatedEdition ? '/settings/llm' : `/settings/provider/${provider.id}`}>
+            <ActionIcon
+              icon={LucideBolt}
+              size={'small'}
+              title={t('ModelSwitchPanel.goToSettings')}
+            />
+          </Link>
+        </Flexbox>
       ),
       type: 'group',
     }));