@lobehub/chat 1.18.2 → 1.19.0

package/src/app/api/chat/agentRuntime.ts

@@ -133,6 +133,13 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
 
       return { apiKey, baseURL };
     }
+    case ModelProvider.Github: {
+      const { GITHUB_TOKEN } = getLLMConfig();
+
+      const apiKey = apiKeyManager.pick(payload?.apiKey || GITHUB_TOKEN);
+
+      return { apiKey };
+    }
     case ModelProvider.OpenRouter: {
       const { OPENROUTER_API_KEY } = getLLMConfig();
 
@@ -230,6 +237,13 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || SPARK_API_KEY);
 
+      return { apiKey };
+    }
+    case ModelProvider.Ai21: {
+      const { AI21_API_KEY } = getLLMConfig();
+
+      const apiKey = apiKeyManager.pick(payload?.apiKey || AI21_API_KEY);
+
       return { apiKey };
     }
   }

package/src/components/SidebarHeader/index.tsx

@@ -27,7 +27,7 @@ const SidebarHeader = memo<SidebarHeaderProps>(({ title, style, actions }) => {
       paddingInline={16}
       style={style}
     >
-      <Flexbox align={'center'} gap={4} horizontal>
+      <Flexbox align={'center'} gap={4} horizontal width={'100%'}>
         {title}
       </Flexbox>
       <Flexbox align={'center'} gap={2} horizontal>

package/src/config/llm.ts

@@ -53,6 +53,10 @@ export const getLLMConfig = () => {
       GROQ_MODEL_LIST: z.string().optional(),
       GROQ_PROXY_URL: z.string().optional(),
 
+      ENABLED_GITHUB: z.boolean(),
+      GITHUB_TOKEN: z.string().optional(),
+      GITHUB_MODEL_LIST: z.string().optional(),
+
       ENABLED_OPENROUTER: z.boolean(),
       OPENROUTER_API_KEY: z.string().optional(),
       OPENROUTER_MODEL_LIST: z.string().optional(),
@@ -110,6 +114,9 @@ export const getLLMConfig = () => {
 
       ENABLED_SPARK: z.boolean(),
       SPARK_API_KEY: z.string().optional(),
+
+      ENABLED_AI21: z.boolean(),
+      AI21_API_KEY: z.string().optional(),
     },
     runtimeEnv: {
       API_KEY_SELECT_MODE: process.env.API_KEY_SELECT_MODE,
@@ -172,6 +179,10 @@ export const getLLMConfig = () => {
       GROQ_MODEL_LIST: process.env.GROQ_MODEL_LIST,
       GROQ_PROXY_URL: process.env.GROQ_PROXY_URL,
 
+      ENABLED_GITHUB: !!process.env.GITHUB_TOKEN,
+      GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+      GITHUB_MODEL_LIST: process.env.GITHUB_MODEL_LIST,
+
       ENABLED_ZEROONE: !!process.env.ZEROONE_API_KEY,
       ZEROONE_API_KEY: process.env.ZEROONE_API_KEY,
       ZEROONE_MODEL_LIST: process.env.ZEROONE_MODEL_LIST,
@@ -217,6 +228,9 @@ export const getLLMConfig = () => {
 
       ENABLED_SPARK: !!process.env.SPARK_API_KEY,
       SPARK_API_KEY: process.env.SPARK_API_KEY,
+
+      ENABLED_AI21: !!process.env.AI21_API_KEY,
+      AI21_API_KEY: process.env.AI21_API_KEY,
     },
   });
 };

package/src/config/modelProviders/ai21.ts

@@ -0,0 +1,37 @@
+import { ModelProviderCard } from '@/types/llm';
+
+// ref https://docs.ai21.com/reference/jamba-15-api-ref
+const Ai21: ModelProviderCard = {
+  chatModels: [
+    {
+      displayName: 'Jamba 1.5 Mini',
+      enabled: true,
+      functionCall: true,
+      id: 'jamba-1.5-mini',
+      pricing: {
+        input: 0.2,
+        output: 0.4,
+      },
+      tokens: 256_000,
+    },
+    {
+      displayName: 'Jamba 1.5 Large',
+      enabled: true,
+      functionCall: true,
+      id: 'jamba-1.5-large',
+      pricing: {
+        input: 2,
+        output: 8,
+      },
+      tokens: 256_000,
+    },
+  ],
+  checkModel: 'jamba-1.5-mini',
+  id: 'ai21',
+  modelList: { showModelFetcher: true },
+  modelsUrl: 'https://docs.ai21.com/reference',
+  name: 'Ai21Labs',
+  url: 'https://studio.ai21.com',
+};
+
+export default Ai21;

package/src/config/modelProviders/anthropic.ts

@@ -117,6 +117,10 @@ const Anthropic: ModelProviderCard = {
   proxyUrl: {
     placeholder: 'https://api.anthropic.com',
   },
+  smoothing: {
+    speed: 5,
+    text: true,
+  },
   url: 'https://anthropic.com',
 };
 

package/src/config/modelProviders/github.ts

@@ -0,0 +1,209 @@
+import { ModelProviderCard } from '@/types/llm';
+
+// ref:
+// https://github.com/marketplace/models
+const Github: ModelProviderCard = {
+  chatModels: [
+    {
+      description:
+        'A 398B parameters (94B active) multilingual model, offering a 256K long context window, function calling, structured output, and grounded generation.',
+      displayName: 'AI21 Jamba 1.5 Large',
+      functionCall: true,
+      id: 'ai21-jamba-1.5-large',
+      maxOutput: 4096,
+      tokens: 262_144,
+    },
+    {
+      description:
+        'A 52B parameters (12B active) multilingual model, offering a 256K long context window, function calling, structured output, and grounded generation.',
+      displayName: 'AI21 Jamba 1.5 Mini',
+      functionCall: true,
+      id: 'ai21-jamba-1.5-mini',
+      maxOutput: 4096,
+      tokens: 262_144,
+    },
+    {
+      description:
+        'A production-grade Mamba-based LLM model to achieve best-in-class performance, quality, and cost efficiency.',
+      displayName: 'AI21-Jamba-Instruct',
+      id: 'ai21-jamba-instruct',
+      maxOutput: 4096,
+      tokens: 72_000,
+    },
+    {
+      description:
+        'Command R is a scalable generative model targeting RAG and Tool Use to enable production-scale AI for enterprise.',
+      displayName: 'Cohere Command R',
+      id: 'cohere-command-r',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'Command R+ is a state-of-the-art RAG-optimized model designed to tackle enterprise-grade workloads.',
+      displayName: 'Cohere Command R+',
+      id: 'cohere-command-r-plus',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'A powerful 70-billion parameter model excelling in reasoning, coding, and broad language applications.',
+      displayName: 'Meta-Llama-3-70B-Instruct',
+      id: 'meta-llama-3-70b-instruct',
+      maxOutput: 4096,
+      tokens: 8192,
+    },
+    {
+      description:
+        'A versatile 8-billion parameter model optimized for dialogue and text generation tasks.',
+      displayName: 'Meta-Llama-3-8B-Instruct',
+      id: 'meta-llama-3-8b-instruct',
+      maxOutput: 4096,
+      tokens: 8192,
+    },
+    {
+      description:
+        'The Llama 3.1 instruction tuned text only models are optimized for multilingual dialogue use cases and outperform many of the available open source and closed chat models on common industry benchmarks.',
+      displayName: 'Meta-Llama-3.1-405B-Instruct',
+      id: 'meta-llama-3.1-405b-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'The Llama 3.1 instruction tuned text only models are optimized for multilingual dialogue use cases and outperform many of the available open source and closed chat models on common industry benchmarks.',
+      displayName: 'Meta-Llama-3.1-70B-Instruct',
+      id: 'meta-llama-3.1-70b-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'The Llama 3.1 instruction tuned text only models are optimized for multilingual dialogue use cases and outperform many of the available open source and closed chat models on common industry benchmarks.',
+      displayName: 'Meta-Llama-3.1-8B-Instruct',
+      id: 'meta-llama-3.1-8b-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        "Mistral's flagship model that's ideal for complex tasks that require large reasoning capabilities or are highly specialized (Synthetic Text Generation, Code Generation, RAG, or Agents).",
+      displayName: 'Mistral Large',
+      id: 'mistral-large',
+      maxOutput: 4096,
+      tokens: 33_000,
+    },
+    {
+      description:
+        'Mistral Large (2407) is an advanced Large Language Model (LLM) with state-of-the-art reasoning, knowledge and coding capabilities.',
+      displayName: 'Mistral Large (2407)',
+      id: 'mistral-large-2407',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'Mistral Nemo is a cutting-edge Language Model (LLM) boasting state-of-the-art reasoning, world knowledge, and coding capabilities within its size category.',
+      displayName: 'Mistral Nemo',
+      id: 'mistral-nemo',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'Mistral Small can be used on any language-based task that requires high efficiency and low latency.',
+      displayName: 'Mistral Small',
+      id: 'mistral-small',
+      maxOutput: 4096,
+      tokens: 33_000,
+    },
+    {
+      description:
+        "OpenAI's most advanced multimodal model in the GPT-4 family. Can handle both text and image inputs.",
+      displayName: 'OpenAI GPT-4o',
+      enabled: true,
+      functionCall: true,
+      id: 'gpt-4o',
+      maxOutput: 4096,
+      tokens: 128_000,
+      vision: true,
+    },
+    {
+      description: 'An affordable, efficient AI solution for diverse text and image tasks.',
+      displayName: 'OpenAI GPT-4o mini',
+      enabled: true,
+      functionCall: true,
+      id: 'gpt-4o-mini',
+      maxOutput: 4096,
+      tokens: 128_000,
+      vision: true,
+    },
+    {
+      description:
+        'Same Phi-3-medium model, but with a larger context size for RAG or few shot prompting.',
+      displayName: 'Phi-3-medium instruct (128k)',
+      id: 'Phi-3-medium-128k-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'A 14B parameters model, proves better quality than Phi-3-mini, with a focus on high-quality, reasoning-dense data.',
+      displayName: 'Phi-3-medium instruct (4k)',
+      id: 'Phi-3-medium-4k-instruct',
+      maxOutput: 4096,
+      tokens: 4096,
+    },
+    {
+      description:
+        'Same Phi-3-mini model, but with a larger context size for RAG or few shot prompting.',
+      displayName: 'Phi-3-mini instruct (128k)',
+      id: 'Phi-3-mini-128k-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'Tiniest member of the Phi-3 family. Optimized for both quality and low latency.',
+      displayName: 'Phi-3-mini instruct (4k)',
+      id: 'Phi-3-mini-4k-instruct',
+      maxOutput: 4096,
+      tokens: 4096,
+    },
+    {
+      description:
+        'Same Phi-3-small model, but with a larger context size for RAG or few shot prompting.',
+      displayName: 'Phi-3-small instruct (128k)',
+      id: 'Phi-3-small-128k-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description:
+        'A 7B parameters model, proves better quality than Phi-3-mini, with a focus on high-quality, reasoning-dense data.',
+      displayName: 'Phi-3-small instruct (8k)',
+      id: 'Phi-3-small-8k-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+    {
+      description: 'Refresh of Phi-3-mini model.',
+      displayName: 'Phi-3.5-mini instruct (128k)',
+      id: 'Phi-3-5-mini-instruct',
+      maxOutput: 4096,
+      tokens: 131_072,
+    },
+  ],
+  checkModel: 'Phi-3-mini-4k-instruct',
+  // Ref: https://github.blog/news-insights/product-news/introducing-github-models/
+  description:
+    "With GitHub Models, developers can become AI engineers and build with the industry's leading AI models.",
+  enabled: true,
+  id: 'github',
+  modelList: { showModelFetcher: true },
+  name: 'GitHub',
+  url: 'https://github.com/marketplace/models',
+};
+
+export default Github;

package/src/config/modelProviders/index.ts

@@ -1,5 +1,6 @@
 import { ChatModelCard, ModelProviderCard } from '@/types/llm';
 
+import Ai21Provider from './ai21';
 import Ai360Provider from './ai360';
 import AnthropicProvider from './anthropic';
 import AzureProvider from './azure';
@@ -7,6 +8,7 @@ import BaichuanProvider from './baichuan';
 import BedrockProvider from './bedrock';
 import DeepSeekProvider from './deepseek';
 import FireworksAIProvider from './fireworksai';
+import GithubProvider from './github';
 import GoogleProvider from './google';
 import GroqProvider from './groq';
 import MinimaxProvider from './minimax';
@@ -35,6 +37,7 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
   DeepSeekProvider.chatModels,
   GoogleProvider.chatModels,
   GroqProvider.chatModels,
+  GithubProvider.chatModels,
   MinimaxProvider.chatModels,
   MistralProvider.chatModels,
   MoonshotProvider.chatModels,
@@ -53,6 +56,7 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
   SiliconCloudProvider.chatModels,
   UpstageProvider.chatModels,
   SparkProvider.chatModels,
+  Ai21Provider.chatModels,
 ].flat();
 
 export const DEFAULT_MODEL_PROVIDER_LIST = [
@@ -64,6 +68,7 @@ export const DEFAULT_MODEL_PROVIDER_LIST = [
   GoogleProvider,
   DeepSeekProvider,
   OpenRouterProvider,
+  GithubProvider,
   GroqProvider,
   NovitaProvider,
   PerplexityProvider,
@@ -71,6 +76,7 @@ export const DEFAULT_MODEL_PROVIDER_LIST = [
   TogetherAIProvider,
   FireworksAIProvider,
   UpstageProvider,
+  Ai21Provider,
   QwenProvider,
   SparkProvider,
   ZhiPuProvider,
@@ -93,6 +99,7 @@ export const isProviderDisableBroswerRequest = (id: string) => {
   return !!provider;
 };
 
+export { default as Ai21ProviderCard } from './ai21';
 export { default as Ai360ProviderCard } from './ai360';
 export { default as AnthropicProviderCard } from './anthropic';
 export { default as AzureProviderCard } from './azure';
@@ -100,6 +107,7 @@ export { default as BaichuanProviderCard } from './baichuan';
 export { default as BedrockProviderCard } from './bedrock';
 export { default as DeepSeekProviderCard } from './deepseek';
 export { default as FireworksAIProviderCard } from './fireworksai';
+export { default as GithubProviderCard } from './github';
 export { default as GoogleProviderCard } from './google';
 export { default as GroqProviderCard } from './groq';
 export { default as MinimaxProviderCard } from './minimax';

package/src/const/layoutTokens.ts

@@ -9,7 +9,7 @@ export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;
 
 export const CHAT_DOCK_WIDTH = 400;
-export const CHAT_DOCK_TOOL_UI_WIDTH = 800;
+export const CHAT_DOCK_TOOL_UI_WIDTH = 600;
 
 export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 270;

package/src/const/plugin.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+
+import { ARTIFACT_TAG_REGEX } from './plugin';
+
+describe('ARTIFACT_TAG_REGEX', () => {
+  it('should match a simple lobeArtifact tag', () => {
+    const input = '<lobeArtifact>Simple content</lobeArtifact>';
+    const matches = input.match(ARTIFACT_TAG_REGEX);
+    expect(matches).toHaveLength(2);
+    expect(matches?.[1]).toBe('Simple content');
+  });
+
+  it('should match a lobeArtifact tag with attributes', () => {
+    const input = '<lobeArtifact type="image">Content with attributes</lobeArtifact>';
+    const matches = input.match(ARTIFACT_TAG_REGEX);
+    expect(matches).toHaveLength(2);
+    expect(matches?.[1]).toBe('Content with attributes');
+  });
+
+  it('should match lobeArtifact tag with multiline content', () => {
+    const input = '<lobeArtifact>\nMultiline\ncontent\n</lobeArtifact>';
+    const matches = input.match(ARTIFACT_TAG_REGEX);
+    expect(matches).toHaveLength(2);
+    expect(matches?.[1]).toBe('\nMultiline\ncontent\n');
+  });
+
+  it('should match an unclosed lobeArtifact tag', () => {
+    const input = '<lobeArtifact>Unclosed tag';
+    const matches = input.match(ARTIFACT_TAG_REGEX);
+    expect(matches).toHaveLength(2);
+    expect(matches?.[1]).toBe('Unclosed tag');
+  });
+
+  it('should not match when there is no lobeArtifact tag', () => {
+    const input = 'This is a text without any lobeArtifact tag';
+    const matches = input.match(ARTIFACT_TAG_REGEX);
+    expect(matches).toBeNull();
+  });
+
+  it('should match', () => {
+    const input = `好的,让我来为您解释"OpenAI"这个词。
+
+<lobeThinking>这个词涉及人工智能领域的一家知名公司,我需要用批判性和幽默的视角来解读它的本质。我会结合当前AI发展的现状,用隐喻的方式来表达。</lobeThinking>
+
+<lobeArtifact identifier="openai-new-interpretation" type="image/svg+xml" title="OpenAI 汉语新解">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">
+  <rect width="400" height="600" fill="#f0f0f0"/>
+  <g font-family="Arial, sans-serif">
+    <text x="200" y="50" font-size="24" font-weight="bold" text-anchor="middle" fill="#333">汉语新解</text>
+    <line x1="50" y1="70" x2="350" y2="70" stroke="#333" stroke-width="2"/>
+    <text x="50" y="100" font-size="18" fill="#555">OpenAI</text>
+    <text x="50" y="130" font-size="14" fill="#777">オープンAI / Open AI</text>
+    <text x="50" y="180" font-size="16" fill="#444" width="300">
+      <tspan x="50" dy="0">一家打着"开放"旗号的AI公司,</tspan>
+      <tspan x="50" dy="25">实则是科技世界的现代炼金术士。</tspan>
+      <tspan x="50" dy="25">他们在神秘实验室里炼制数字魔药,</tspan>
+      <tspan x="50" dy="25">声称要拯救世界,却把钥匙藏在高塔顶端。</tspan>
+      <tspan x="50" dy="25">这是一场华丽的默剧,观众屏息以待,</tspan>
+      <tspan x="50" dy="25">而台上的演员正在即兴创作剧本。</tspan>
+    </text>
+    <path d="M50 400 Q200 300 350 400" fill="none" stroke="#666" stroke-width="2"/>
+    <text x="200" y="450" font-size="14" text-anchor="middle" fill="#555">开放的盒子里装着封闭的秘密</text>
+  </g>
+</svg>
+</lobeArtifact>
+
+OpenAI,这个名字听起来多么崇高啊!就像是一位身披白袍、头戴光环的科技天使,降临凡间来拯救我们这些被信息海洋淹没的可怜虫。
+
+但是,亲爱的朋友,让我们摘下那副玫瑰色的眼镜,仔细看看这位"救世主"的真面目。OpenAI,多么讽刺的名字啊!它就像是一个贴着"免费午餐"标签的高级餐厅,当你兴冲冲地推门而入时,才发现菜单上的价格足以让你的钱包瞬间减肥。
+
+这家公司就像是科技世界的现代炼金术士。他们在神秘的实验室里日夜不停地炼制数字魔药,声称要创造出能解决人类所有问题的"哲学家之石"。可惜啊,这些魔法配方都被锁在了高塔顶端,只有少数"有缘人"才能一睹真容。
+
+OpenAI的存在,就像是一场精心编排的默剧。台上的演员们摆出各种夸张的姿势,声称自己正在为人类的未来奋斗;台下的观众们屏息凝神,既期待着奇迹的出现,又担心着潘多拉魔盒被轻易打开。而最讽刺的是,这场戏的剧本还在即兴创作中,连导演自己都不知道下一幕会发生什么。
+
+所以,我亲爱的朋友,下次当你听到"OpenAI"这个词时,请记住:在这个看似开放的盒子里,装着的可能是一堆封闭的秘密。毕竟,在这个光鲜亮丽的科技舞台上,最稀缺的从来就不是智能,而是真正的开放与透明。`;
+
+    const matches = ARTIFACT_TAG_REGEX.exec(input);
+    expect(matches).toHaveLength(2);
+  });
+});

package/src/const/plugin.ts

@@ -1,2 +1,14 @@
 export const PLUGIN_SCHEMA_SEPARATOR = '____';
 export const PLUGIN_SCHEMA_API_MD5_PREFIX = 'MD5HASH_';
+
+export const ARTIFACT_TAG = 'lobeArtifact';
+export const ARTIFACT_THINKING_TAG = 'lobeThinking';
+
+// https://regex101.com/r/TwzTkf/2
+export const ARTIFACT_TAG_REGEX = /<lobeArtifact\b[^>]*>(?<content>[\S\s]*?)(?:<\/lobeArtifact>|$)/;
+
+// https://regex101.com/r/r9gqGg/1
+export const ARTIFACT_TAG_CLOSED_REGEX = /<lobeArtifact\b[^>]*>([\S\s]*?)<\/lobeArtifact>/;
+
+// https://regex101.com/r/AvPA2g/1
+export const ARTIFACT_THINKING_TAG_REGEX = /<lobeThinking\b[^>]*>([\S\s]*?)(?:<\/lobeThinking>|$)/;

package/src/const/settings/llm.ts

@@ -1,10 +1,12 @@
 import {
+  Ai21ProviderCard,
   Ai360ProviderCard,
   AnthropicProviderCard,
   BaichuanProviderCard,
   BedrockProviderCard,
   DeepSeekProviderCard,
   FireworksAIProviderCard,
+  GithubProviderCard,
   GoogleProviderCard,
   GroqProviderCard,
   MinimaxProviderCard,
@@ -30,6 +32,10 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import { UserModelProviderConfig } from '@/types/user/settings';
 
 export const DEFAULT_LLM_CONFIG: UserModelProviderConfig = {
+  ai21: {
+    enabled: false,
+    enabledModels: filterEnabledModels(Ai21ProviderCard),
+  },
   ai360: {
     enabled: false,
     enabledModels: filterEnabledModels(Ai360ProviderCard),
@@ -57,6 +63,10 @@ export const DEFAULT_LLM_CONFIG: UserModelProviderConfig = {
     enabled: false,
     enabledModels: filterEnabledModels(FireworksAIProviderCard),
   },
+  github: {
+    enabled: false,
+    enabledModels: filterEnabledModels(GithubProviderCard),
+  },
   google: {
     enabled: false,
     enabledModels: filterEnabledModels(GoogleProviderCard),

package/src/features/Conversation/Error/APIKeyForm/index.tsx

@@ -51,6 +51,10 @@ const APIKeyForm = memo<APIKeyFormProps>(({ id, provider }) => {
         return 'sk-********************************';
       }
 
+      case ModelProvider.Github: {
+        return 'ghp_*****************************';
+      }
+
       default: {
         return '*********************************';
       }

package/src/features/Conversation/Messages/Tool/Inspector/index.tsx

@@ -52,7 +52,7 @@ const Inspector = memo<InspectorProps>(
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
     const [isMessageToolUIOpen, openToolUI, togglePortal] = useChatStore((s) => [
-      chatPortalSelectors.isArtifactMessageUIOpen(id)(s),
+      chatPortalSelectors.isPluginUIOpen(id)(s),
       s.openToolUI,
       s.togglePortal,
     ]);

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

@@ -17,7 +17,7 @@ import Inspector from './Inspector';
 const Message = memo<ChatMessage>(({ id, content, pluginState, plugin }) => {
   const [loading, isMessageToolUIOpen] = useChatStore((s) => [
     chatSelectors.isPluginApiInvoking(id)(s),
-    chatPortalSelectors.isArtifactMessageUIOpen(id)(s),
+    chatPortalSelectors.isPluginUIOpen(id)(s),
   ]);
   const { direction } = useContext(ConfigProvider.ConfigContext);
   const { t } = useTranslation('plugin');

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -1,7 +1,7 @@
 import { ChatItem } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ReactNode, memo, useCallback } from 'react';
+import { ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
@@ -22,8 +22,12 @@ import {
   renderMessages,
   useAvatarsClick,
 } from '../../Messages';
+import { markdownElements } from '../MarkdownElements';
 import ActionsBar from './ActionsBar';
 import HistoryDivider from './HistoryDivider';
+import { processWithArtifact } from './utils';
+
+const rehypePlugins = markdownElements.map((element) => element.rehypePlugin);
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   loading: css`
@@ -143,6 +147,22 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
     );
   });
 
+  // remove line breaks in artifact tag to make the ast transform easier
+  const message =
+    !editing && item?.role === 'assistant' ? processWithArtifact(item?.content) : item?.content;
+
+  const components = useMemo(
+    () =>
+      Object.fromEntries(
+        markdownElements.map((element) => {
+          const Component = element.Component;
+
+          return [element.tag, (props: any) => <Component {...props} id={id} />];
+        }),
+      ),
+    [id],
+  );
+
   return (
     item && (
       <>
@@ -165,9 +185,11 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
           fontSize={fontSize}
           loading={isProcessing}
           markdownProps={{
+            components,
             customRender: markdownCustomRender,
+            rehypePlugins,
           }}
-          message={item.content}
+          message={message}
           messageExtra={<MessageExtra data={item} />}
           onAvatarClick={onAvatarsClick?.(item.role)}
           onChange={(value) => updateMessageContent(item.id, value)}