@lobehub/lobehub 2.0.0-next.23 → 2.0.0-next.25

package/src/features/Conversation/Messages/Group/Tool/Render/Arguments/ValueCell.tsx

@@ -0,0 +1,43 @@
+import { copyToClipboard } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const useStyles = createStyles(({ css, token }) => ({
+  copyable: css`
+    cursor: pointer;
+    width: 100%;
+    margin-block: 2px;
+    padding: 4px;
+
+    &:hover {
+      border-radius: 6px;
+      background: ${token.colorFillTertiary};
+    }
+  `,
+}));
+
+interface ValueCellProps {
+  value: string;
+}
+
+const ValueCell = memo<ValueCellProps>(({ value }) => {
+  const { message } = App.useApp();
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+
+  return (
+    <div
+      className={styles.copyable}
+      onClick={async () => {
+        await copyToClipboard(value);
+        message.success(t('copySuccess'));
+      }}
+    >
+      {value}
+    </div>
+  );
+});
+
+export default ValueCell;

package/src/features/Conversation/Messages/Group/Tool/Render/Arguments/index.tsx

@@ -0,0 +1,134 @@
+import { Highlighter } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { parse } from 'partial-json';
+import { ReactNode, memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useYamlArguments } from '@/hooks/useYamlArguments';
+
+import ObjectEntity from './ObjectEntity';
+
+const useStyles = createStyles(({ css, token, cx }) => ({
+  button: css`
+    color: ${token.colorTextSecondary};
+
+    &:hover {
+      color: ${token.colorText};
+    }
+  `,
+  codeContainer: css`
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  container: css`
+    position: relative;
+
+    overflow: auto;
+
+    max-height: 200px;
+    padding-block: 4px;
+    padding-inline: 12px 64px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 13px;
+    line-height: 1.5;
+
+    background: ${token.colorFillQuaternary};
+
+    pre {
+      margin: 0 !important;
+      background: none !important;
+    }
+
+    &:hover {
+      .actions {
+        opacity: 1;
+      }
+    }
+  `,
+  editButton: cx(
+    'actions',
+    css`
+      position: absolute;
+      z-index: 10;
+      inset-block-start: 4px;
+      inset-inline-end: 4px;
+
+      opacity: 0;
+
+      transition: opacity 0.2s ${token.motionEaseInOut};
+    `,
+  ),
+}));
+
+export interface ArgumentsProps {
+  actions?: ReactNode;
+  arguments?: string;
+  shine?: boolean;
+}
+
+const Arguments = memo<ArgumentsProps>(({ arguments: args = '', shine, actions }) => {
+  const { styles } = useStyles();
+
+  const displayArgs = useMemo(() => {
+    try {
+      const obj = parse(args);
+      if (Object.keys(obj).length === 0) return {};
+      return obj;
+    } catch {
+      return args;
+    }
+  }, [args]);
+
+  const yaml = useYamlArguments(args);
+
+  const showActions = !!actions;
+
+  if (typeof displayArgs === 'string') {
+    return (
+      !!yaml && (
+        <div className={styles.container}>
+          <Highlighter language={'yaml'} showLanguage={false}>
+            {yaml}
+          </Highlighter>
+        </div>
+      )
+    );
+  }
+
+  // if (args.length > 100) {
+  //   return (
+  //     <Highlighter language={'json'} showLanguage={false} variant={'filled'}>
+  //       {JSON.stringify(displayArgs, null, 2)}
+  //     </Highlighter>
+  //   );
+  // }
+
+  const hasMinWidth = Object.keys(displayArgs).length > 1;
+
+  if (Object.keys(displayArgs).length === 0) return null;
+
+  return (
+    <div className={styles.container}>
+      {showActions && (
+        <Flexbox className={styles.editButton} gap={4} horizontal>
+          {actions}
+        </Flexbox>
+      )}
+      {Object.entries(displayArgs).map(([key, value]) => {
+        return (
+          <ObjectEntity
+            editable={false}
+            hasMinWidth={hasMinWidth}
+            key={key}
+            objectKey={key}
+            shine={shine}
+            value={value}
+          />
+        );
+      })}
+    </div>
+  );
+});
+
+export default Arguments;

package/src/features/Conversation/Messages/Group/Tool/Render/CustomRender.tsx

@@ -0,0 +1,88 @@
+import { ChatPluginPayload } from '@lobechat/types';
+import { Highlighter } from '@lobehub/ui';
+import { memo, useEffect, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginRender from '@/features/PluginsUI/Render';
+
+import Arguments from './Arguments';
+
+interface CustomRenderProps {
+  content: string;
+  id: string;
+  plugin?: ChatPluginPayload;
+  pluginState?: any;
+  requestArgs?: string;
+  setShowPluginRender: (value: boolean) => void;
+  showPluginRender: boolean;
+}
+
+/**
+ * Custom Render for Group Messages
+ *
+ * Group messages are already completed, so:
+ * - No loading state needed
+ * - No edit/re-run functionality
+ * - Results are directly available in content prop
+ */
+const CustomRender = memo<CustomRenderProps>(
+  ({ id, content, pluginState, plugin, requestArgs, showPluginRender, setShowPluginRender }) => {
+    // Determine if plugin UI should be shown based on plugin type
+    useEffect(() => {
+      if (!plugin?.type) return;
+      setShowPluginRender(!['default', 'mcp'].includes(plugin.type));
+    }, [plugin?.type, setShowPluginRender]);
+
+    // Parse and display result content
+    const { data, language } = useMemo(() => {
+      try {
+        const parsed = JSON.parse(content || '');
+        // If parsed result is a string, return it directly
+        if (typeof parsed === 'string') {
+          return { data: parsed, language: 'plaintext' };
+        }
+        return { data: JSON.stringify(parsed, null, 2), language: 'json' };
+      } catch {
+        return { data: content || '', language: 'plaintext' };
+      }
+    }, [content]);
+
+    // Show plugin custom UI if applicable
+    if (showPluginRender) {
+      return (
+        <Flexbox gap={12} id={id} width={'100%'}>
+          <PluginRender
+            arguments={plugin?.arguments}
+            content={content}
+            id={id}
+            identifier={plugin?.identifier}
+            loading={false}
+            payload={plugin}
+            pluginState={pluginState}
+            type={plugin?.type}
+          />
+        </Flexbox>
+      );
+    }
+
+    // Default render: show arguments and result
+    return (
+      <Flexbox gap={12} id={id} width={'100%'}>
+        <Arguments arguments={requestArgs} />
+        {content && (
+          <Highlighter
+            language={language}
+            style={{ maxHeight: 200, overflow: 'scroll', width: '100%' }}
+            variant={'outlined'}
+          >
+            {data}
+          </Highlighter>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+CustomRender.displayName = 'GroupCustomRender';
+
+export default CustomRender;

package/src/features/Conversation/Messages/Group/Tool/Render/ErrorResponse.tsx

@@ -0,0 +1,35 @@
+import { ChatMessageError, ChatPluginPayload } from '@lobechat/types';
+import { Alert, Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginSettings from './PluginSettings';
+
+interface ErrorResponseProps extends ChatMessageError {
+  id: string;
+  plugin?: ChatPluginPayload;
+}
+
+const ErrorResponse = memo<ErrorResponseProps>(({ id, type, body, message, plugin }) => {
+  const { t } = useTranslation('error');
+  if (type === 'PluginSettingsInvalid') {
+    return <PluginSettings id={id} plugin={plugin} />;
+  }
+
+  return (
+    <Alert
+      extra={
+        <Flexbox>
+          <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
+            {JSON.stringify(body || { message, type }, null, 2)}
+          </Highlighter>
+        </Flexbox>
+      }
+      message={t(`response.${type}` as any)}
+      showIcon
+      type={'error'}
+    />
+  );
+});
+export default ErrorResponse;

package/src/features/Conversation/Messages/Group/Tool/Render/LoadingPlaceholder/index.tsx

@@ -0,0 +1,29 @@
+import { safeParseJSON } from '@lobechat/utils';
+import { memo } from 'react';
+
+import { BuiltinToolPlaceholders } from '@/tools/placeholders';
+
+import Arguments from '../Arguments';
+
+interface LoadingPlaceholderProps {
+  apiName: string;
+  identifier: string;
+  loading?: boolean;
+  requestArgs?: string;
+}
+
+const LoadingPlaceholder = memo<LoadingPlaceholderProps>(
+  ({ identifier, requestArgs, apiName, loading }) => {
+    const Render = BuiltinToolPlaceholders[identifier || ''];
+
+    if (identifier && Render) {
+      return (
+        <Render apiName={apiName} args={safeParseJSON(requestArgs) || {}} identifier={identifier} />
+      );
+    }
+
+    return <Arguments arguments={requestArgs} shine={loading} />;
+  },
+);
+
+export default LoadingPlaceholder;

package/src/features/Conversation/Messages/Group/Tool/Render/PluginSettings.tsx

@@ -0,0 +1,66 @@
+import { ChatPluginPayload } from '@lobechat/types';
+import { Avatar, Button } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import PluginSettingsConfig from '@/features/PluginSettings';
+import { useChatStore } from '@/store/chat';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import { ErrorActionContainer, useStyles } from '../../../../Error/style';
+
+interface PluginSettingsProps {
+  id: string;
+  plugin?: ChatPluginPayload;
+}
+
+const PluginSettings = memo<PluginSettingsProps>(({ id, plugin }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('error');
+  const theme = useTheme();
+  const [resend, deleteMessage] = useChatStore((s) => [s.regenerateMessage, s.deleteMessage]);
+  const pluginIdentifier = plugin?.identifier as string;
+  const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
+  const manifest = useToolStore(pluginSelectors.getToolManifestById(pluginIdentifier), isEqual);
+
+  return (
+    !!manifest && (
+      <ErrorActionContainer>
+        <Center gap={16} style={{ maxWidth: 400 }}>
+          <Avatar
+            avatar={pluginHelpers.getPluginAvatar(pluginMeta) || '⚙️'}
+            background={theme.colorFillContent}
+            gap={12}
+            size={80}
+          />
+          <Flexbox style={{ fontSize: 20 }}>
+            {t('pluginSettings.title', { name: pluginHelpers.getPluginTitle(pluginMeta) })}
+          </Flexbox>
+          <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
+          <Divider style={{ margin: '0 16px' }} />
+          {manifest.settings && (
+            <PluginSettingsConfig id={manifest.identifier} schema={manifest.settings} />
+          )}
+          <Button
+            block
+            onClick={() => {
+              resend(id);
+              deleteMessage(id);
+            }}
+            style={{ marginTop: 8 }}
+            type={'primary'}
+          >
+            {t('unlock.confirm')}
+          </Button>
+        </Center>
+      </ErrorActionContainer>
+    )
+  );
+});
+
+export default PluginSettings;

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

@@ -0,0 +1,105 @@
+import { LOADING_FLAT } from '@lobechat/const';
+import { ChatToolResult } from '@lobechat/types';
+import { Suspense, memo } from 'react';
+
+import CustomRender from './CustomRender';
+import ErrorResponse from './ErrorResponse';
+import LoadingPlaceholder from './LoadingPlaceholder';
+
+interface RenderProps {
+  apiName: string;
+  arguments?: string;
+  identifier: string;
+  /**
+   * ContentBlock ID (not the group message ID)
+   */
+  messageId: string;
+  result?: ChatToolResult;
+  setShowPluginRender: (show: boolean) => void;
+  showPluginRender: boolean;
+  toolCallId: string;
+  type?: string;
+}
+
+/**
+ * Tool Render for Group Messages
+ *
+ * In group messages, tool results are already embedded in the payload,
+ * so we don't need to query them from the store or handle streaming.
+ */
+const Render = memo<RenderProps>(
+  ({
+    toolCallId,
+    messageId,
+    arguments: requestArgs,
+    showPluginRender,
+    setShowPluginRender,
+    identifier,
+    apiName,
+    result,
+    type,
+  }) => {
+    if (!result) return null;
+
+    // Handle error state
+    if (result.error) {
+      return (
+        <ErrorResponse
+          {...result.error}
+          id={messageId}
+          plugin={
+            type
+              ? ({
+                  apiName,
+                  arguments: requestArgs || '',
+                  identifier,
+                  type,
+                } as any)
+              : undefined
+          }
+        />
+      );
+    }
+
+    const placeholder = (
+      <LoadingPlaceholder
+        apiName={apiName}
+        identifier={identifier}
+        loading
+        requestArgs={requestArgs}
+      />
+    );
+
+    // Standalone plugins always have LOADING_FLAT as content
+    const inPlaceholder = result.content === LOADING_FLAT && type !== 'standalone';
+
+    if (inPlaceholder) return placeholder;
+
+    return (
+      <Suspense fallback={placeholder}>
+        <CustomRender
+          content={result.content || ''}
+          id={toolCallId}
+          plugin={
+            type
+              ? ({
+                  apiName,
+                  arguments: requestArgs || '',
+                  identifier,
+                  type,
+                } as any)
+              : undefined
+          }
+          pluginState={result.state}
+          requestArgs={requestArgs}
+          setShowPluginRender={setShowPluginRender}
+          showPluginRender={showPluginRender}
+        />
+      </Suspense>
+    );
+  },
+);
+
+Render.displayName = 'GroupToolRender';
+
+export default Render;

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

@@ -0,0 +1,75 @@
+import { ChatToolResult } from '@lobechat/types';
+import { CSSProperties, memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AnimatedCollapsed from '@/components/AnimatedCollapsed';
+
+import Inspectors from './Inspector';
+import Render from './Render';
+
+export interface GroupToolProps {
+  apiName: string;
+  arguments?: string;
+  id: string;
+  identifier: string;
+  index: number;
+  /**
+   * ContentBlock ID (not the group message ID)
+   */
+  messageId: string;
+  result?: ChatToolResult;
+  style?: CSSProperties;
+  type?: string;
+}
+
+/**
+ * Tool component for Group Messages
+ *
+ * In group messages, all tools are completed (no streaming),
+ * so we always show the results directly.
+ */
+const Tool = memo<GroupToolProps>(
+  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, result, type }) => {
+    // Default to false since group messages are all completed
+    const [showDetail, setShowDetail] = useState(false);
+    const [showPluginRender, setShowPluginRender] = useState(false);
+
+    return (
+      <Flexbox gap={8} style={style}>
+        <Inspectors
+          apiName={apiName}
+          arguments={requestArgs}
+          // mcp don't have ui render
+          hidePluginUI={type === 'mcp'}
+          id={id}
+          identifier={identifier}
+          index={index}
+          messageId={messageId}
+          result={result}
+          setShowPluginRender={setShowPluginRender}
+          setShowRender={setShowDetail}
+          showPluginRender={showPluginRender}
+          showRender={showDetail}
+          type={type}
+        />
+        <AnimatedCollapsed open={showDetail} width={{ collapsed: 'auto' }}>
+          <Render
+            apiName={apiName}
+            arguments={requestArgs}
+            identifier={identifier}
+            messageId={messageId}
+            result={result}
+            setShowPluginRender={setShowPluginRender}
+            showPluginRender={showPluginRender}
+            toolCallId={id}
+            type={type}
+          />
+        </AnimatedCollapsed>
+      </Flexbox>
+    );
+  },
+);
+
+Tool.displayName = 'GroupTool';
+
+export default Tool;

package/src/features/Conversation/Messages/Group/Tools.tsx

@@ -0,0 +1,46 @@
+import { ChatToolPayloadWithResult } from '@lobechat/types';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Tool from './Tool';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    toolsContainer: css`
+      padding-block: 6px;
+      padding-inline: 12px;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: 8px;
+    `,
+  };
+});
+
+interface ToolsRendererProps {
+  messageId: string;
+  tools: ChatToolPayloadWithResult[];
+}
+
+export const Tools = memo<ToolsRendererProps>(({ messageId, tools }) => {
+  const { styles, cx } = useStyles();
+
+  if (!tools || tools.length === 0) return null;
+
+  return (
+    <Flexbox className={cx(styles.toolsContainer, 'tool-blocks')} gap={8}>
+      {tools.map((tool, index) => (
+        <Tool
+          apiName={tool.apiName}
+          arguments={tool.arguments}
+          id={tool.id}
+          identifier={tool.identifier}
+          index={index}
+          key={tool.id}
+          messageId={messageId}
+          result={tool.result}
+          type={tool.type}
+        />
+      ))}
+    </Flexbox>
+  );
+});