@lobehub/lobehub 2.0.0-next.273 → 2.0.0-next.275

package/packages/builtin-tool-group-agent-builder/src/client/Inspector/InviteAgent/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { InviteAgentParams, InviteAgentState } from '../../../types';
+
+const styles = createStaticStyles(({ css }) => ({
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const InviteAgentInspector = memo<
+  BuiltinInspectorProps<InviteAgentParams, InviteAgentState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const agentId = args?.agentId || partialArgs?.agentId;
+  const displayName = pluginState?.agentName || agentId;
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !agentId) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-group-agent-builder.apiName.inviteAgent')}</span>
+      </div>
+    );
+  }
+
+  const isSuccess = pluginState?.success;
+
+  return (
+    <div
+      className={cx(
+        inspectorTextStyles.root,
+        (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText,
+      )}
+    >
+      <span>{t('builtins.lobe-group-agent-builder.apiName.inviteAgent')}: </span>
+      {displayName && <span className={highlightTextStyles.primary}>{displayName}</span>}
+      {!isLoading && isSuccess && (
+        <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+      )}
+    </div>
+  );
+});
+
+InviteAgentInspector.displayName = 'InviteAgentInspector';
+
+export default InviteAgentInspector;

package/packages/builtin-tool-group-agent-builder/src/client/Inspector/RemoveAgent/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { RemoveAgentParams, RemoveAgentState } from '../../../types';
+
+const styles = createStaticStyles(({ css }) => ({
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const RemoveAgentInspector = memo<
+  BuiltinInspectorProps<RemoveAgentParams, RemoveAgentState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const agentId = args?.agentId || partialArgs?.agentId;
+  const displayName = pluginState?.agentName || agentId;
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !agentId) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-group-agent-builder.apiName.removeAgent')}</span>
+      </div>
+    );
+  }
+
+  const isSuccess = pluginState?.success;
+
+  return (
+    <div
+      className={cx(
+        inspectorTextStyles.root,
+        (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText,
+      )}
+    >
+      <span>{t('builtins.lobe-group-agent-builder.apiName.removeAgent')}: </span>
+      {displayName && <span className={highlightTextStyles.primary}>{displayName}</span>}
+      {!isLoading && isSuccess && (
+        <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+      )}
+    </div>
+  );
+});
+
+RemoveAgentInspector.displayName = 'RemoveAgentInspector';
+
+export default RemoveAgentInspector;

package/packages/builtin-tool-group-agent-builder/src/client/Inspector/SearchAgent/index.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { Text } from '@lobehub/ui';
+import { cssVar, cx } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { SearchAgentParams, SearchAgentState } from '../../../types';
+
+export const SearchAgentInspector = memo<
+  BuiltinInspectorProps<SearchAgentParams, SearchAgentState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const query = args?.query || partialArgs?.query;
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !query) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-group-agent-builder.apiName.searchAgent')}</span>
+      </div>
+    );
+  }
+
+  const resultCount = pluginState?.total ?? pluginState?.agents?.length ?? 0;
+  const hasResults = resultCount > 0;
+
+  return (
+    <div
+      className={cx(
+        inspectorTextStyles.root,
+        (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText,
+      )}
+    >
+      <span>{t('builtins.lobe-group-agent-builder.apiName.searchAgent')}</span>
+      {query && (
+        <>
+          : <span className={highlightTextStyles.primary}>{query}</span>
+        </>
+      )}
+      {!isLoading &&
+        !isArgumentsStreaming &&
+        pluginState?.agents &&
+        (hasResults ? (
+          <span style={{ marginInlineStart: 4 }}>({resultCount})</span>
+        ) : (
+          <Text
+            as={'span'}
+            color={cssVar.colorTextDescription}
+            fontSize={12}
+            style={{ marginInlineStart: 4 }}
+          >
+            ({t('builtins.lobe-group-agent-builder.inspector.noResults')})
+          </Text>
+        ))}
+    </div>
+  );
+});
+
+SearchAgentInspector.displayName = 'SearchAgentInspector';
+
+export default SearchAgentInspector;

package/packages/builtin-tool-group-agent-builder/src/client/Inspector/UpdateAgentPrompt/index.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { Avatar, Flexbox, Text } from '@lobehub/ui';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { UpdateAgentPromptParams, UpdateAgentPromptState } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar: cv }) => ({
+  agentName: css`
+    overflow: hidden;
+
+    max-width: 120px;
+
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  label: css`
+    flex-shrink: 0;
+    color: ${cv.colorTextSecondary};
+    white-space: nowrap;
+  `,
+  root: css`
+    overflow: hidden;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  `,
+}));
+
+export const UpdateAgentPromptInspector = memo<
+  BuiltinInspectorProps<UpdateAgentPromptParams, UpdateAgentPromptState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const agentId = args?.agentId || partialArgs?.agentId;
+  const prompt = args?.prompt || partialArgs?.prompt;
+
+  // Get agent info from the current group
+  const agent = useAgentGroupStore((s) => {
+    const agents = agentGroupSelectors.currentGroupAgents(s);
+    return agents.find((a) => a.id === agentId);
+  });
+
+  // Calculate length difference
+  const lengthDiff = useMemo(() => {
+    if (!pluginState) return null;
+
+    const newLength = pluginState.newPrompt?.length ?? 0;
+    const prevLength = pluginState.previousPrompt?.length ?? 0;
+    return newLength - prevLength;
+  }, [pluginState]);
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !agentId) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-group-agent-builder.apiName.updateAgentPrompt')}</span>
+      </div>
+    );
+  }
+
+  const streamingLength = prompt?.length ?? 0;
+
+  const isSupervisor = agent?.isSupervisor ?? false;
+
+  // Use different i18n key for supervisor
+  const labelKey = isSupervisor
+    ? 'builtins.lobe-group-agent-builder.apiName.updateSupervisorPrompt'
+    : 'builtins.lobe-group-agent-builder.apiName.updateAgentPrompt';
+
+  return (
+    <Flexbox
+      align="center"
+      className={cx(styles.root, (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText)}
+      gap={6}
+      horizontal
+    >
+      <span className={styles.label}>{t(labelKey)}</span>
+      {/* Only show avatar and title for non-supervisor agents */}
+      {agent && !isSupervisor && (
+        <>
+          <Avatar avatar={agent.avatar ?? undefined} size={18} title={agent.title ?? undefined} />
+          <span className={styles.agentName}>{agent.title}</span>
+        </>
+      )}
+      {/* Show length diff when completed */}
+      {!isLoading && !isArgumentsStreaming && lengthDiff !== null && (
+        <Text
+          as="span"
+          code
+          color={lengthDiff >= 0 ? cssVar.colorSuccess : cssVar.colorError}
+          fontSize={12}
+        >
+          {lengthDiff >= 0 ? '+' : ''}
+          {lengthDiff}
+          {t('builtins.lobe-agent-builder.inspector.chars')}
+        </Text>
+      )}
+      {/* Show streaming length */}
+      {(isArgumentsStreaming || isLoading) && streamingLength > 0 && (
+        <Text as="span" code color={cssVar.colorTextDescription} fontSize={12}>
+          ({streamingLength}
+          {t('builtins.lobe-agent-builder.inspector.chars')})
+        </Text>
+      )}
+    </Flexbox>
+  );
+});
+
+UpdateAgentPromptInspector.displayName = 'UpdateAgentPromptInspector';
+
+export default UpdateAgentPromptInspector;

package/packages/builtin-tool-group-agent-builder/src/client/Inspector/UpdateGroup/index.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { UpdateGroupParams, UpdateGroupState } from '../../../types';
+
+const styles = createStaticStyles(({ css }) => ({
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const UpdateGroupInspector = memo<BuiltinInspectorProps<UpdateGroupParams, UpdateGroupState>>(
+  ({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+    const { t } = useTranslation('plugin');
+
+    const config = args?.config || partialArgs?.config;
+    const meta = args?.meta || partialArgs?.meta;
+
+    // Build display text from updated fields
+    const displayText = useMemo(() => {
+      const fields: string[] = [];
+      // Config fields
+      if (config?.openingMessage !== undefined) {
+        fields.push(t('builtins.lobe-group-agent-builder.inspector.openingMessage'));
+      }
+      if (config?.openingQuestions !== undefined) {
+        fields.push(t('builtins.lobe-group-agent-builder.inspector.openingQuestions'));
+      }
+      // Meta fields
+      if (meta?.title !== undefined) {
+        fields.push(t('builtins.lobe-group-agent-builder.inspector.title'));
+      }
+      if (meta?.description !== undefined) {
+        fields.push(t('builtins.lobe-group-agent-builder.inspector.description'));
+      }
+      if (meta?.avatar !== undefined) {
+        fields.push(t('builtins.lobe-group-agent-builder.inspector.avatar'));
+      }
+      if (meta?.backgroundColor !== undefined) {
+        fields.push(t('builtins.lobe-group-agent-builder.inspector.backgroundColor'));
+      }
+      return fields.length > 0 ? fields.join(', ') : '';
+    }, [config, meta, t]);
+
+    // Initial streaming state
+    if (isArgumentsStreaming && !displayText) {
+      return (
+        <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-group-agent-builder.apiName.updateGroup')}</span>
+        </div>
+      );
+    }
+
+    const isSuccess = pluginState?.success;
+
+    return (
+      <div
+        className={cx(
+          inspectorTextStyles.root,
+          (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText,
+        )}
+      >
+        <span>{t('builtins.lobe-group-agent-builder.apiName.updateGroup')}</span>
+        {displayText && (
+          <>
+            : <span className={highlightTextStyles.primary}>{displayText}</span>
+          </>
+        )}
+        {!isLoading && isSuccess && (
+          <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+        )}
+      </div>
+    );
+  },
+);
+
+UpdateGroupInspector.displayName = 'UpdateGroupInspector';
+
+export default UpdateGroupInspector;

package/packages/builtin-tool-group-agent-builder/src/client/Inspector/UpdateGroupPrompt/index.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { Flexbox, Text } from '@lobehub/ui';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { UpdateGroupPromptParams, UpdateGroupPromptState } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar: cv }) => ({
+  groupName: css`
+    overflow: hidden;
+
+    max-width: 120px;
+
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  label: css`
+    flex-shrink: 0;
+    color: ${cv.colorTextSecondary};
+    white-space: nowrap;
+  `,
+  root: css`
+    overflow: hidden;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  `,
+}));
+
+export const UpdateGroupPromptInspector = memo<
+  BuiltinInspectorProps<UpdateGroupPromptParams, UpdateGroupPromptState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const prompt = args?.prompt || partialArgs?.prompt;
+
+  // Calculate length difference
+  const lengthDiff = useMemo(() => {
+    if (!pluginState) return null;
+
+    const newLength = pluginState.newPrompt?.length ?? 0;
+    const prevLength = pluginState.previousPrompt?.length ?? 0;
+    return newLength - prevLength;
+  }, [pluginState]);
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !prompt) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-group-agent-builder.apiName.updateGroupPrompt')}</span>
+      </div>
+    );
+  }
+
+  const streamingLength = prompt?.length ?? 0;
+
+  return (
+    <Flexbox
+      align="center"
+      className={cx(styles.root, (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText)}
+      gap={6}
+      horizontal
+    >
+      <span className={styles.label}>
+        {t('builtins.lobe-group-agent-builder.apiName.updateGroupPrompt')}
+      </span>
+      {/* Show length diff when completed */}
+      {!isLoading && !isArgumentsStreaming && lengthDiff !== null && (
+        <Text
+          as="span"
+          code
+          color={lengthDiff >= 0 ? cssVar.colorSuccess : cssVar.colorError}
+          fontSize={12}
+        >
+          {lengthDiff >= 0 ? '+' : ''}
+          {lengthDiff}
+          {t('builtins.lobe-agent-builder.inspector.chars')}
+        </Text>
+      )}
+      {/* Show streaming length */}
+      {(isArgumentsStreaming || isLoading) && streamingLength > 0 && (
+        <Text as="span" code color={cssVar.colorTextDescription} fontSize={12}>
+          ({streamingLength}
+          {t('builtins.lobe-agent-builder.inspector.chars')})
+        </Text>
+      )}
+    </Flexbox>
+  );
+});
+
+UpdateGroupPromptInspector.displayName = 'UpdateGroupPromptInspector';
+
+export default UpdateGroupPromptInspector;

package/packages/builtin-tool-group-agent-builder/src/client/Inspector/index.ts

@@ -0,0 +1,52 @@
+// Import shared inspectors from agent-builder
+import {
+  GetAvailableModelsInspector,
+  InstallPluginInspector,
+  SearchMarketToolsInspector,
+  UpdateConfigInspector,
+} from '@lobechat/builtin-tool-agent-builder/client';
+import { type BuiltinInspector } from '@lobechat/types';
+
+import { GroupAgentBuilderApiName } from '../../types';
+import { BatchCreateAgentsInspector } from './BatchCreateAgents';
+import { CreateAgentInspector } from './CreateAgent';
+import { InviteAgentInspector } from './InviteAgent';
+import { RemoveAgentInspector } from './RemoveAgent';
+import { SearchAgentInspector } from './SearchAgent';
+import { UpdateAgentPromptInspector } from './UpdateAgentPrompt';
+import { UpdateGroupInspector } from './UpdateGroup';
+import { UpdateGroupPromptInspector } from './UpdateGroupPrompt';
+
+/**
+ * Group Agent Builder Inspector Components Registry
+ *
+ * Inspector components customize the title/header area
+ * of tool calls in the conversation UI.
+ */
+export const GroupAgentBuilderInspectors: Record<string, BuiltinInspector> = {
+  // Group-specific inspectors
+  [GroupAgentBuilderApiName.batchCreateAgents]: BatchCreateAgentsInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.createAgent]: CreateAgentInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.inviteAgent]: InviteAgentInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.removeAgent]: RemoveAgentInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.searchAgent]: SearchAgentInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.updateAgentPrompt]: UpdateAgentPromptInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.updateGroup]: UpdateGroupInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.updateGroupPrompt]: UpdateGroupPromptInspector as BuiltinInspector,
+
+  // Shared inspectors from agent-builder (reused for group context)
+  [GroupAgentBuilderApiName.getAvailableModels]: GetAvailableModelsInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.installPlugin]: InstallPluginInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.searchMarketTools]: SearchMarketToolsInspector as BuiltinInspector,
+  [GroupAgentBuilderApiName.updateAgentConfig]: UpdateConfigInspector as BuiltinInspector,
+};
+
+// Re-export individual inspectors
+export { BatchCreateAgentsInspector } from './BatchCreateAgents';
+export { CreateAgentInspector } from './CreateAgent';
+export { InviteAgentInspector } from './InviteAgent';
+export { RemoveAgentInspector } from './RemoveAgent';
+export { SearchAgentInspector } from './SearchAgent';
+export { UpdateAgentPromptInspector } from './UpdateAgentPrompt';
+export { UpdateGroupInspector } from './UpdateGroup';
+export { UpdateGroupPromptInspector } from './UpdateGroupPrompt';

package/packages/builtin-tool-group-agent-builder/src/client/Render/BatchCreateAgents.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { BuiltinRenderProps } from '@lobechat/types';
+import { Avatar, Flexbox } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { Users } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { BatchCreateAgentsParams, BatchCreateAgentsState } from '../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    padding: 4px 16px;
+    background: ${cssVar.colorFillQuaternary};
+    border-radius: 8px;
+  `,
+  description: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 12px;
+    line-height: 1.5;
+    color: ${cssVar.colorTextDescription};
+    text-overflow: ellipsis;
+  `,
+  empty: css`
+    padding: 16px;
+    color: ${cssVar.colorTextTertiary};
+  `,
+  item: css`
+    padding-block: 12px;
+
+    &:not(:last-child) {
+      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+    }
+  `,
+  title: css`
+    overflow: hidden;
+
+    font-size: 13px;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));
+
+interface AgentItemProps {
+  agent: {
+    agentId: string;
+    success: boolean;
+    title: string;
+  };
+  definition?: {
+    avatar?: string;
+    description?: string;
+    title: string;
+  };
+}
+
+const AgentItem = memo<AgentItemProps>(({ agent, definition }) => {
+  const avatar = definition?.avatar;
+  const description = definition?.description;
+
+  return (
+    <Flexbox align="center" className={styles.item} gap={12} horizontal>
+      <Avatar avatar={avatar} size={24} style={{ flexShrink: 0 }} title={agent.title} />
+      <Flexbox flex={1} gap={2} style={{ minWidth: 0, overflow: 'hidden' }}>
+        <span className={styles.title}>{agent.title}</span>
+        {description && <span className={styles.description}>{description}</span>}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+const BatchCreateAgentsRender = memo<
+  BuiltinRenderProps<BatchCreateAgentsParams, BatchCreateAgentsState>
+>(({ args, pluginState }) => {
+  const { t } = useTranslation('plugin');
+  const { agents: resultAgents } = pluginState || {};
+  const definitions = args?.agents || [];
+
+  if (!resultAgents || resultAgents.length === 0) {
+    return (
+      <Flexbox align="center" className={styles.empty} gap={8}>
+        <Users size={24} />
+        <span>{t('builtins.lobe-group-agent-builder.inspector.noResults')}</span>
+      </Flexbox>
+    );
+  }
+
+  return (
+    <Flexbox className={styles.container}>
+      {resultAgents.map((agent, index) => (
+        <AgentItem agent={agent} definition={definitions[index]} key={agent.agentId || index} />
+      ))}
+    </Flexbox>
+  );
+});
+
+export default BatchCreateAgentsRender;

package/packages/builtin-tool-group-agent-builder/src/client/Render/UpdateAgentPrompt/index.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import type { BuiltinRenderProps } from '@lobechat/types';
+import { Markdown } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { memo } from 'react';
+
+import type { UpdateAgentPromptParams, UpdateAgentPromptState } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    padding: 12px;
+    border-radius: 8px;
+    background: ${cssVar.colorFillQuaternary};
+  `,
+}));
+
+export const UpdateAgentPromptRender = memo<
+  BuiltinRenderProps<UpdateAgentPromptParams, UpdateAgentPromptState>
+>(({ pluginState }) => {
+  const prompt = pluginState?.newPrompt;
+
+  if (!prompt) return null;
+
+  return (
+    <div className={styles.container}>
+      <div>
+        <Markdown variant={'chat'}>{prompt}</Markdown>
+      </div>
+    </div>
+  );
+});
+
+UpdateAgentPromptRender.displayName = 'UpdateAgentPromptRender';
+
+export default UpdateAgentPromptRender;