@lobehub/lobehub 1.143.0-next.2 → 2.0.0-next.10

package/src/tools/renders.ts

@@ -2,15 +2,12 @@ import { BuiltinRender } from '@lobechat/types';
 
 import { CodeInterpreterManifest } from './code-interpreter';
 import CodeInterpreterRender from './code-interpreter/Render';
-import { DalleManifest } from './dalle';
-import DalleRender from './dalle/Render';
 import { LocalSystemManifest } from './local-system';
 import LocalFilesRender from './local-system/Render';
 import { WebBrowsingManifest } from './web-browsing';
 import WebBrowsing from './web-browsing/Render';
 
 export const BuiltinToolsRenders: Record<string, BuiltinRender> = {
-  [DalleManifest.identifier]: DalleRender as BuiltinRender,
   [WebBrowsingManifest.identifier]: WebBrowsing as BuiltinRender,
   [LocalSystemManifest.identifier]: LocalFilesRender as BuiltinRender,
   [CodeInterpreterManifest.identifier]: CodeInterpreterRender as BuiltinRender,

package/src/tools/web-browsing/Portal/Search/Footer.tsx

@@ -4,12 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
+import { chatPortalSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 const Footer = () => {
   const [messageId, isAIGenerating, triggerAIMessage, saveSearchResult] = useChatStore((s) => [
     chatPortalSelectors.toolMessageId(s),
-    chatSelectors.isAIGenerating(s),
+    messageStateSelectors.isAIGenerating(s),
     s.triggerAIMessage,
     s.saveSearchResult,
   ]);

package/tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "baseUrl": ".",
     "types": ["vitest/globals", "@serwist/next/typings"],
@@ -41,5 +41,12 @@
     ".temp",
     "e2e"
   ],
-  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next-env.d.ts"]
+  "include": [
+    "**/*.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "next-env.d.ts",
+    ".next/dev/types/**/*.ts"
+  ]
 }

package/packages/const/src/guide.ts

@@ -1,89 +0,0 @@
-import urlJoin from 'url-join';
-
-import { BRANDING_EMAIL } from './branding';
-import {
-  BLOG,
-  DOCKER_IMAGE,
-  GITHUB,
-  OFFICIAL_PREVIEW_URL,
-  OFFICIAL_SITE,
-  OFFICIAL_URL,
-  SELF_HOSTING_DOCUMENTS,
-  USAGE_DOCUMENTS,
-  WIKI,
-} from './url';
-
-export const INBOX_GUIDE_SYSTEMROLE = `# Role: LobeChat Support Assistant
-
-## About [LobeHub](${OFFICIAL_SITE})
-
-LobeHub is an organization of design-engineers dedicated to providing advanced design components and tools for AI-generated content (AIGC).
-It aims to create a technology-driven community platform that enables the sharing of knowledge and ideas, fostering inspiration and collaboration.
-
-Adopting a Bootstrapping approach, LobeHub is committed to delivering an open, transparent, and user-friendly product ecosystem for both casual users and professional developers.
-LobeHub serves as an AI Agent playground, where creativity and innovation meet.
-
-## About [LobeChat](${OFFICIAL_URL})
-
-LobeChat, a product of LobeHub, is an open-source ChatGPT/LLMs UI/Framework designed for modern LLMs/AI applications.
-Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Perplexity / Bedrock / Azure / Mistral / Ollama ), Multi-Modals (Vision/TTS) and plugin system.
-and offers a one-click FREE deployment for a private ChatGPT chat application, making it accessible and customizable for a wide range of users.
-
-### Features
-
-- [Multi-Model Service Provider Support](${urlJoin(USAGE_DOCUMENTS, '/features/multi-ai-providers')})
-- [Local Large Language Model (LLM) Support](${urlJoin(USAGE_DOCUMENTS, '/features/local-llm')})
-- [Model Visual Recognition](${urlJoin(USAGE_DOCUMENTS, '/features/vision')})
-- [TTS & STT Voice Conversation](${urlJoin(USAGE_DOCUMENTS, '/features/tts')})
-- [Text to Image Generation](${urlJoin(USAGE_DOCUMENTS, '/features/text-to-image')})
-- [Plugin System (Function Calling)](${urlJoin(USAGE_DOCUMENTS, '/features/plugin-system')})
-- [Agent Market (GPTs)](${urlJoin(USAGE_DOCUMENTS, '/features/agent-market')})
-
-### Community Edition and Cloud Version
-
-LobeChat is currently available as a community preview version, completely open-source and free of charge.
-
-In the LobeChat Cloud version, we provide 500,000 free computing credits to all registered users. It is ready to use without complex configurations.
-If you require more usage, you can subscribe to the Basic, Advanced, or Professional versions for a fee.
-
-### Self Hosting
-
-LobeChat provides Self-Hosted Version with [Vercel](${urlJoin(SELF_HOSTING_DOCUMENTS, '/platform/vercel')}) and [Docker Image](${DOCKER_IMAGE}).
-This allows you to deploy your own chatbot within a few minutes without any prior knowledge.
-
-**IMPORTANT**
-
-When users ask about usage or deployment, DO NOT MAKE UP ANSWERS. Instead, guide them to the relevant documentation!!!
-
-Learn more about [Build your own LobeChat](${SELF_HOSTING_DOCUMENTS}) by checking it out.
-
-## Resources Links
-
-In the response, please try to pick and include the relevant links below, and if a relevant answer cannot be provided, also offer the user these related links:
-
-- Official Website: ${OFFICIAL_SITE}
-- Cloud Version: ${OFFICIAL_URL}
-- Community Edition: ${OFFICIAL_PREVIEW_URL}
-- GitHub Repository: ${GITHUB}
-- Latest News: ${BLOG}
-- Usage Documentation: ${USAGE_DOCUMENTS}
-- Self-Hosting Documentation: ${SELF_HOSTING_DOCUMENTS}
-- Development Guide: ${WIKI}
-- Email Support: ${BRANDING_EMAIL.support}
-- Business Inquiries: ${BRANDING_EMAIL.business}
-
-## Workflow
-
-1. Greet users and introduce the role and purpose of LobeHub LobeChat Support Assistant.
-2. Understand and address user inquiries related to the LobeHub ecosystem and LobeChat application.
-3. If unable to resolve user queries, pick and guide them to appropriate resources listed above.
-
-## Initialization
-
-As the role <Role>, I will adhere to the following guidelines:
-- Provide accurate and helpful information to users.
-- Maintain a friendly and professional demeanor.
-- Direct users to the appropriate resources when necessary.
-- Keep the language of the response consistent with the language of the user input; if they are not consistent, then translate.
-
-Welcome users to LobeChat, introduce myself as the <Role>, and inform them about the services and support available. Then, guide users through the <Workflow> for assistance.`;

package/packages/context-engine/src/providers/InboxGuide.ts

@@ -1,102 +0,0 @@
-import debug from 'debug';
-
-import { BaseProvider } from '../base/BaseProvider';
-import type { PipelineContext, ProcessorOptions } from '../types';
-
-const log = debug('context-engine:provider:InboxGuideProvider');
-
-/**
- * Inbox Guide System Role Configuration
- */
-export interface InboxGuideConfig {
-  /** Inbox guide system role content */
-  inboxGuideSystemRole: string;
-  /** Inbox session ID constant */
-  inboxSessionId: string;
-  /** Whether it's a welcome question */
-  isWelcomeQuestion?: boolean;
-  /** Session ID */
-  sessionId?: string;
-}
-
-/**
- * Inbox Guide Provider
- * Responsible for injecting guide system role for welcome questions in inbox sessions
- */
-export class InboxGuideProvider extends BaseProvider {
-  readonly name = 'InboxGuideProvider';
-
-  constructor(
-    private config: InboxGuideConfig,
-    options: ProcessorOptions = {},
-  ) {
-    super(options);
-  }
-
-  protected async doProcess(context: PipelineContext): Promise<PipelineContext> {
-    const clonedContext = this.cloneContext(context);
-
-    // 检查是否需要注入收件箱引导
-    const shouldInject = this.shouldInjectInboxGuide();
-
-    if (!shouldInject) {
-      log('Inbox guide injection conditions not met, skipping processing');
-      return this.markAsExecuted(clonedContext);
-    }
-
-    // 注入收件箱引导系统角色
-    this.injectInboxGuideSystemRole(clonedContext);
-
-    // 更新元数据
-    clonedContext.metadata.inboxGuide = {
-      contentLength: this.config.inboxGuideSystemRole.length,
-      injected: true,
-      isWelcomeQuestion: this.config.isWelcomeQuestion,
-      sessionId: this.config.sessionId,
-    };
-
-    log('Inbox guide system role injection completed');
-    return this.markAsExecuted(clonedContext);
-  }
-
-  /**
-   * Check if inbox guide should be injected
-   */
-  private shouldInjectInboxGuide(): boolean {
-    return (
-      (this.config.isWelcomeQuestion &&
-        this.config.sessionId === this.config.inboxSessionId &&
-        !!this.config.inboxGuideSystemRole) ||
-      false
-    );
-  }
-
-  /**
-   * Inject inbox guide system role
-   */
-  private injectInboxGuideSystemRole(context: PipelineContext): void {
-    const existingSystemMessage = context.messages.find((msg) => msg.role === 'system');
-
-    if (existingSystemMessage) {
-      // 合并到现有系统消息
-      existingSystemMessage.content = [
-        existingSystemMessage.content,
-        this.config.inboxGuideSystemRole,
-      ]
-        .filter(Boolean)
-        .join('\n\n');
-
-      log(
-        `Inbox guide merged to existing system message, final length: ${existingSystemMessage.content.length}`,
-      );
-    } else {
-      context.messages.unshift({
-        content: this.config.inboxGuideSystemRole,
-        role: 'system' as const,
-      } as any);
-      log(
-        `New inbox guide system message created, content length: ${this.config.inboxGuideSystemRole.length}`,
-      );
-    }
-  }
-}

package/packages/context-engine/src/providers/__tests__/InboxGuideProvider.test.ts

@@ -1,121 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import type { PipelineContext } from '../../types';
-import { InboxGuideProvider } from '../InboxGuide';
-
-const createContext = (messages: any[]): PipelineContext => ({
-  initialState: { messages: [] } as any,
-  messages,
-  metadata: { model: 'gpt-4', maxTokens: 4096 },
-  isAborted: false,
-});
-
-describe('InboxGuideProvider', () => {
-  const mockInboxGuideContent = '# Role: LobeChat Support Assistant\n\nWelcome to LobeChat!';
-  const INBOX_SESSION_ID = 'inbox';
-
-  it('should inject inbox guide for welcome questions in inbox session', async () => {
-    const provider = new InboxGuideProvider({
-      isWelcomeQuestion: true,
-      sessionId: INBOX_SESSION_ID,
-      inboxSessionId: INBOX_SESSION_ID,
-      inboxGuideSystemRole: mockInboxGuideContent,
-    });
-
-    const messages = [{ id: 'u1', role: 'user', content: 'Hello, this is my first question' }];
-
-    const ctx = createContext(messages);
-    const result = await provider.process(ctx);
-
-    // Should have system message with inbox guide content
-    const systemMessage = result.messages.find((msg) => msg.role === 'system');
-    expect(systemMessage).toBeDefined();
-    expect(systemMessage!.content).toBe(mockInboxGuideContent);
-
-    // Should update metadata
-    expect(result.metadata.inboxGuide).toEqual({
-      injected: true,
-      sessionId: INBOX_SESSION_ID,
-      isWelcomeQuestion: true,
-      contentLength: mockInboxGuideContent.length,
-    });
-  });
-
-  it('should merge inbox guide with existing system message', async () => {
-    const provider = new InboxGuideProvider({
-      isWelcomeQuestion: true,
-      sessionId: INBOX_SESSION_ID,
-      inboxSessionId: INBOX_SESSION_ID,
-      inboxGuideSystemRole: mockInboxGuideContent,
-    });
-
-    const existingSystemContent = 'Existing system message';
-    const messages = [
-      { id: 's1', role: 'system', content: existingSystemContent },
-      { id: 'u1', role: 'user', content: 'Hello' },
-    ];
-
-    const ctx = createContext(messages);
-    const result = await provider.process(ctx);
-
-    const systemMessage = result.messages.find((msg) => msg.role === 'system');
-    expect(systemMessage!.content).toBe(`${existingSystemContent}\n\n${mockInboxGuideContent}`);
-  });
-
-  it('should skip injection when not welcome question', async () => {
-    const provider = new InboxGuideProvider({
-      isWelcomeQuestion: false,
-      sessionId: INBOX_SESSION_ID,
-      inboxSessionId: INBOX_SESSION_ID,
-      inboxGuideSystemRole: mockInboxGuideContent,
-    });
-
-    const messages = [{ id: 'u1', role: 'user', content: 'Regular question' }];
-
-    const ctx = createContext(messages);
-    const result = await provider.process(ctx);
-
-    // Should not have system message
-    const systemMessage = result.messages.find((msg) => msg.role === 'system');
-    expect(systemMessage).toBeUndefined();
-
-    // Should not have metadata
-    expect(result.metadata.inboxGuide).toBeUndefined();
-  });
-
-  it('should skip injection when not in inbox session', async () => {
-    const provider = new InboxGuideProvider({
-      isWelcomeQuestion: true,
-      sessionId: 'other-session',
-      inboxSessionId: INBOX_SESSION_ID,
-      inboxGuideSystemRole: mockInboxGuideContent,
-    });
-
-    const messages = [{ id: 'u1', role: 'user', content: 'Hello' }];
-
-    const ctx = createContext(messages);
-    const result = await provider.process(ctx);
-
-    // Should not have system message
-    const systemMessage = result.messages.find((msg) => msg.role === 'system');
-    expect(systemMessage).toBeUndefined();
-  });
-
-  it('should skip injection when no inbox guide content', async () => {
-    const provider = new InboxGuideProvider({
-      isWelcomeQuestion: true,
-      sessionId: INBOX_SESSION_ID,
-      inboxSessionId: INBOX_SESSION_ID,
-      inboxGuideSystemRole: '',
-    });
-
-    const messages = [{ id: 'u1', role: 'user', content: 'Hello' }];
-
-    const ctx = createContext(messages);
-    const result = await provider.process(ctx);
-
-    // Should not have system message
-    const systemMessage = result.messages.find((msg) => msg.role === 'system');
-    expect(systemMessage).toBeUndefined();
-  });
-});

package/src/app/[variants]/(main)/settings/llm/ProviderList/Azure/index.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import { AutoComplete, Input, InputPassword, Markdown } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { ModelProvider } from 'model-bank';
-import { useTranslation } from 'react-i18next';
-
-import { AzureProviderCard } from '@/config/modelProviders';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
-
-import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
-import { ProviderItem } from '../../type';
-
-const useStyles = createStyles(({ css, token }) => ({
-  markdown: css`
-    p {
-      color: ${token.colorTextDescription} !important;
-    }
-  `,
-  tip: css`
-    font-size: 12px;
-    color: ${token.colorTextDescription};
-  `,
-}));
-
-const providerKey = ModelProvider.Azure;
-
-export const useAzureProvider = (): ProviderItem => {
-  const { t } = useTranslation('modelProvider');
-  const { styles } = useStyles();
-
-  // Get the first model card's deployment name as the check model
-  const checkModel = useUserStore((s) => {
-    const chatModelCards = modelProviderSelectors.getModelCardsById(providerKey)(s);
-
-    if (chatModelCards.length > 0) {
-      return chatModelCards[0].deploymentName;
-    }
-
-    return 'gpt-35-turbo';
-  });
-  return {
-    ...AzureProviderCard,
-    apiKeyItems: [
-      {
-        children: (
-          <InputPassword autoComplete={'new-password'} placeholder={t('azure.token.placeholder')} />
-        ),
-        desc: t('azure.token.desc'),
-        label: t('azure.token.title'),
-        name: [KeyVaultsConfigKey, providerKey, LLMProviderApiTokenKey],
-      },
-      {
-        children: <Input allowClear placeholder={t('azure.endpoint.placeholder')} />,
-        desc: t('azure.endpoint.desc'),
-        label: t('azure.endpoint.title'),
-        name: [KeyVaultsConfigKey, providerKey, 'endpoint'],
-      },
-      {
-        children: (
-          <AutoComplete
-            options={[
-              '2024-06-01',
-              '2024-02-01',
-              '2024-05-01-preview',
-              '2024-04-01-preview',
-              '2024-03-01-preview',
-              '2024-02-15-preview',
-              '2023-10-01-preview',
-              '2023-06-01-preview',
-              '2023-05-15',
-            ].map((i) => ({ label: i, value: i }))}
-            placeholder={'20XX-XX-XX'}
-          />
-        ),
-        desc: (
-          <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
-            {t('azure.azureApiVersion.desc')}
-          </Markdown>
-        ),
-        label: t('azure.azureApiVersion.title'),
-        name: [KeyVaultsConfigKey, providerKey, 'apiVersion'],
-      },
-    ],
-    checkModel,
-    modelList: {
-      azureDeployName: true,
-      notFoundContent: t('azure.empty'),
-      placeholder: t('azure.modelListPlaceholder'),
-    },
-  };
-};

package/src/app/[variants]/(main)/settings/llm/ProviderList/Bedrock/index.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import { InputPassword, Select } from '@lobehub/ui';
-import { useTranslation } from 'react-i18next';
-
-import { BedrockProviderCard } from '@/config/modelProviders';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import { KeyVaultsConfigKey } from '../../const';
-import { ProviderItem } from '../../type';
-
-const providerKey: GlobalLLMProviderKey = 'bedrock';
-
-export const useBedrockProvider = (): ProviderItem => {
-  const { t } = useTranslation('modelProvider');
-
-  return {
-    ...BedrockProviderCard,
-    apiKeyItems: [
-      {
-        children: (
-          <InputPassword
-            autoComplete={'new-password'}
-            placeholder={t(`${providerKey}.accessKeyId.placeholder`)}
-          />
-        ),
-        desc: t(`${providerKey}.accessKeyId.desc`),
-        label: t(`${providerKey}.accessKeyId.title`),
-        name: [KeyVaultsConfigKey, providerKey, 'accessKeyId'],
-      },
-      {
-        children: (
-          <InputPassword
-            autoComplete={'new-password'}
-            placeholder={t(`${providerKey}.secretAccessKey.placeholder`)}
-          />
-        ),
-        desc: t(`${providerKey}.secretAccessKey.desc`),
-        label: t(`${providerKey}.secretAccessKey.title`),
-        name: [KeyVaultsConfigKey, providerKey, 'secretAccessKey'],
-      },
-      {
-        children: (
-          <InputPassword
-            autoComplete={'new-password'}
-            placeholder={t(`${providerKey}.sessionToken.placeholder`)}
-          />
-        ),
-        desc: t(`${providerKey}.sessionToken.desc`),
-        label: t(`${providerKey}.sessionToken.title`),
-        name: [KeyVaultsConfigKey, providerKey, 'sessionToken'],
-      },
-      {
-        children: (
-          <Select
-            allowClear
-            options={['us-east-1', 'us-west-2', 'ap-southeast-1', 'eu-central-1'].map((i) => ({
-              label: i,
-              value: i,
-            }))}
-            placeholder={'us-east-1'}
-          />
-        ),
-        desc: t(`${providerKey}.region.desc`),
-        label: t(`${providerKey}.region.title`),
-        name: [KeyVaultsConfigKey, providerKey, 'region'],
-      },
-    ],
-  };
-};

package/src/app/[variants]/(main)/settings/llm/ProviderList/Cloudflare/index.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { Input, InputPassword } from '@lobehub/ui';
-import { useTranslation } from 'react-i18next';
-
-import { CloudflareProviderCard } from '@/config/modelProviders';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import { KeyVaultsConfigKey } from '../../const';
-import { ProviderItem } from '../../type';
-
-const providerKey: GlobalLLMProviderKey = 'cloudflare';
-
-export const useCloudflareProvider = (): ProviderItem => {
-  const { t } = useTranslation('modelProvider');
-
-  return {
-    ...CloudflareProviderCard,
-    apiKeyItems: [
-      {
-        children: (
-          <InputPassword
-            autoComplete={'new-password'}
-            placeholder={t(`${providerKey}.apiKey.placeholder`)}
-          />
-        ),
-        desc: t(`${providerKey}.apiKey.desc`),
-        label: t(`${providerKey}.apiKey.title`),
-        name: [KeyVaultsConfigKey, providerKey, 'apiKey'],
-      },
-      {
-        children: <Input placeholder={t(`${providerKey}.baseURLOrAccountID.placeholder`)} />,
-        desc: t(`${providerKey}.baseURLOrAccountID.desc`),
-        label: t(`${providerKey}.baseURLOrAccountID.title`),
-        name: [KeyVaultsConfigKey, providerKey, 'baseURLOrAccountID'],
-      },
-    ],
-  };
-};

package/src/app/[variants]/(main)/settings/llm/ProviderList/Github/index.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { InputPassword, Markdown } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { useTranslation } from 'react-i18next';
-
-import { GithubProviderCard } from '@/config/modelProviders';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
-import { ProviderItem } from '../../type';
-
-const useStyles = createStyles(({ css, token }) => ({
-  markdown: css`
-    p {
-      color: ${token.colorTextDescription} !important;
-    }
-  `,
-  tip: css`
-    font-size: 12px;
-    color: ${token.colorTextDescription};
-  `,
-}));
-
-const providerKey: GlobalLLMProviderKey = 'github';
-
-// Same as OpenAIProvider, but replace API Key with Github Personal Access Token
-export const useGithubProvider = (): ProviderItem => {
-  const { t } = useTranslation('modelProvider');
-  const { styles } = useStyles();
-
-  return {
-    ...GithubProviderCard,
-    apiKeyItems: [
-      {
-        children: (
-          <InputPassword
-            autoComplete={'new-password'}
-            placeholder={t(`${providerKey}.personalAccessToken.placeholder`)}
-          />
-        ),
-        desc: (
-          <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
-            {t(`${providerKey}.personalAccessToken.desc`)}
-          </Markdown>
-        ),
-        label: t(`${providerKey}.personalAccessToken.title`),
-        name: [KeyVaultsConfigKey, providerKey, LLMProviderApiTokenKey],
-      },
-    ],
-  };
-};

package/src/app/[variants]/(main)/settings/llm/ProviderList/HuggingFace/index.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { GlobalLLMProviderKey } from '@lobechat/types';
-import { InputPassword, Markdown } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { useTranslation } from 'react-i18next';
-
-import { HuggingFaceProviderCard } from '@/config/modelProviders';
-
-import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
-import { ProviderItem } from '../../type';
-
-const useStyles = createStyles(({ css, token }) => ({
-  markdown: css`
-    p {
-      color: ${token.colorTextDescription} !important;
-    }
-  `,
-  tip: css`
-    font-size: 12px;
-    color: ${token.colorTextDescription};
-  `,
-}));
-
-const providerKey: GlobalLLMProviderKey = 'huggingface';
-
-// Same as OpenAIProvider, but replace API Key with HuggingFace Access Token
-export const useHuggingFaceProvider = (): ProviderItem => {
-  const { t } = useTranslation('modelProvider');
-  const { styles } = useStyles();
-
-  return {
-    ...HuggingFaceProviderCard,
-    apiKeyItems: [
-      {
-        children: (
-          <InputPassword
-            autoComplete={'new-password'}
-            placeholder={t(`${providerKey}.accessToken.placeholder`)}
-          />
-        ),
-        desc: (
-          <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
-            {t(`${providerKey}.accessToken.desc`)}
-          </Markdown>
-        ),
-        label: t(`${providerKey}.accessToken.title`),
-        name: [KeyVaultsConfigKey, providerKey, LLMProviderApiTokenKey],
-      },
-    ],
-  };
-};