@lobehub/lobehub 2.0.0-next.24 → 2.0.0-next.26

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

@@ -0,0 +1,51 @@
+import { MessageInput } from '@lobehub/ui/chat';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+export interface EditStateProps {
+  content: string;
+  id: string;
+}
+
+const EditState = memo<EditStateProps>(({ id, content }) => {
+  const { t } = useTranslation('common');
+
+  const text = useMemo(
+    () => ({
+      cancel: t('cancel'),
+      confirm: t('ok'),
+      edit: t('edit'),
+    }),
+    [],
+  );
+
+  const [toggleMessageEditing, updateMessageContent] = useChatStore((s) => [
+    s.toggleMessageEditing,
+    s.modifyMessageContent,
+  ]);
+
+  const onEditingChange = (value: string) => {
+    updateMessageContent(id, value);
+    toggleMessageEditing(id, false);
+  };
+
+  return (
+    <Flexbox paddingBlock={'0 8px'}>
+      <MessageInput
+        defaultValue={content ? String(content) : ''}
+        editButtonSize={'small'}
+        onCancel={() => {
+          toggleMessageEditing(id, false);
+        }}
+        onConfirm={onEditingChange}
+        text={text}
+        variant={'outlined'}
+      />
+    </Flexbox>
+  );
+});
+
+export default EditState;

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

@@ -0,0 +1,53 @@
+import { ChatMessageError } from '@lobechat/types';
+import { Alert } from '@lobehub/ui';
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ErrorMessageExtra, { useErrorContent } from '@/features/Conversation/Error';
+import { useChatStore } from '@/store/chat';
+
+export interface ErrorContentProps {
+  error?: ChatMessageError;
+  id: string;
+}
+
+const ErrorContent = memo<ErrorContentProps>(({ error, id }) => {
+  const { t } = useTranslation('common');
+  const errorProps = useErrorContent(error);
+
+  const [deleteMessage] = useChatStore((s) => [s.deleteMessage]);
+  const message = <ErrorMessageExtra block data={{ error, id }} />;
+
+  if (!error?.message) {
+    if (!message) return null;
+    return <Flexbox>{message}</Flexbox>;
+  }
+
+  return (
+    <Flexbox>
+      <Alert
+        action={
+          <Button
+            color={'default'}
+            onClick={() => {
+              deleteMessage(id);
+            }}
+            size={'small'}
+            variant={'filled'}
+          >
+            {t('delete')}
+          </Button>
+        }
+        closable={false}
+        extra={message}
+        showIcon
+        type={'error'}
+        {...errorProps}
+      />
+    </Flexbox>
+  );
+});
+
+export default ErrorContent;

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

@@ -0,0 +1,73 @@
+import { AssistantContentBlock } from '@lobechat/types';
+import { createStyles } from 'antd-style';
+import { motion } from 'framer-motion';
+import { memo, use } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { useChatStore } from '@/store/chat';
+
+import { ContentBlock } from './ContentBlock';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      &:has(.tool-blocks) {
+        width: 100%;
+      }
+    `,
+  };
+});
+
+interface GroupChildrenProps {
+  blocks: AssistantContentBlock[];
+  contentId?: string;
+  disableEditing?: boolean;
+  messageIndex: number;
+}
+
+const GroupChildren = memo<GroupChildrenProps>(
+  ({ blocks, contentId, disableEditing, messageIndex }) => {
+    const { styles } = useStyles();
+
+    const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
+    const virtuosoRef = use(VirtuosoContext);
+
+    return (
+      <Flexbox className={styles.container} gap={8}>
+        {blocks.map((item, index) => {
+          return item.id === contentId ? (
+            <Flexbox
+              key={index}
+              onDoubleClick={(e) => {
+                if (disableEditing || item.error || !e.altKey) return;
+
+                toggleMessageEditing(item.id, true);
+                virtuosoRef?.current?.scrollIntoView({
+                  align: 'start',
+                  behavior: 'auto',
+                  index: messageIndex,
+                });
+              }}
+            >
+              <ContentBlock index={index} {...item} />
+            </Flexbox>
+          ) : (
+            <motion.div
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              initial={{ height: 0, opacity: 0 }}
+              key={index}
+              style={{ overflow: 'hidden' }}
+              transition={{ duration: 0.3, ease: 'easeInOut' }}
+            >
+              <ContentBlock index={index} {...item} />
+            </motion.div>
+          );
+        })}
+      </Flexbox>
+    );
+  },
+);
+
+export default GroupChildren;

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

@@ -0,0 +1,39 @@
+import { Markdown, MarkdownProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { LOADING_FLAT } from '@/const/message';
+
+import { normalizeThinkTags, processWithArtifact } from '../../utils/markdown';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    pWithTool: css`
+      color: ${token.colorTextTertiary};
+    `,
+  };
+});
+interface ContentBlockProps {
+  content: string;
+  hasTools?: boolean;
+  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+}
+
+const MessageContent = memo<ContentBlockProps>(({ content, hasTools, markdownProps }) => {
+  const message = normalizeThinkTags(processWithArtifact(content));
+
+  const { styles, cx } = useStyles();
+
+  if (content === LOADING_FLAT) return <BubblesLoading />;
+
+  return (
+    content && (
+      <Markdown {...markdownProps} className={cx(hasTools && styles.pWithTool)} variant={'chat'}>
+        {message}
+      </Markdown>
+    )
+  );
+});
+
+export default MessageContent;

package/src/features/Conversation/Messages/Group/Tool/Inspector/BuiltinPluginTitle.tsx

@@ -0,0 +1,49 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { shinyTextStylish } from '@/styles/loading';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  apiName: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
+
+  shinyText: shinyTextStylish(token),
+}));
+
+interface BuiltinPluginTitleProps {
+  apiName: string;
+  hasResult?: boolean;
+  icon?: ReactNode;
+  identifier: string;
+  index: number;
+  messageId: string;
+  title: string;
+  toolCallId: string;
+}
+
+const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(({ apiName, title, hasResult }) => {
+  const { styles } = useStyles();
+
+  const isLoading = !hasResult;
+
+  return (
+    <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={4} horizontal>
+      <div>{title}</div>
+      <Icon icon={ChevronRight} />
+      <span className={styles.apiName}>{apiName}</span>
+    </Flexbox>
+  );
+});
+
+export default BuiltinPluginTitle;

package/src/features/Conversation/Messages/Group/Tool/Inspector/Debug.tsx

@@ -0,0 +1,70 @@
+import { Highlighter } from '@lobehub/ui';
+import { Tabs } from 'antd';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PluginResult from './PluginResult';
+import PluginState from './PluginState';
+
+interface DebugProps {
+  apiName: string;
+  identifier: string;
+  requestArgs?: string;
+  result?: { content: string | null; error?: any; state?: any };
+  toolCallId: string;
+  type?: string;
+}
+
+const Debug = memo<DebugProps>(({ result, requestArgs, toolCallId, apiName, identifier, type }) => {
+  const { t } = useTranslation('plugin');
+
+  const params = useMemo(() => {
+    try {
+      return JSON.stringify(JSON.parse(requestArgs || ''), null, 2);
+    } catch {
+      return '';
+    }
+  }, [requestArgs]);
+
+  const functionCall = useMemo(() => {
+    return {
+      apiName,
+      arguments: requestArgs,
+      id: toolCallId,
+      identifier,
+      type,
+    };
+  }, [requestArgs, toolCallId, apiName, identifier, type]);
+
+  return (
+    <Tabs
+      items={[
+        {
+          children: <Highlighter language={'json'}>{params}</Highlighter>,
+          key: 'arguments',
+          label: t('debug.arguments'),
+        },
+        {
+          children: <PluginResult content={result?.content} />,
+          key: 'response',
+          label: t('debug.response'),
+        },
+        {
+          children: (
+            <Highlighter language={'json'}>{JSON.stringify(functionCall, null, 2)}</Highlighter>
+          ),
+          key: 'function_call',
+          label: t('debug.function_call'),
+        },
+        {
+          children: <PluginState state={result?.state} />,
+          key: 'pluginState',
+          label: t('debug.pluginState'),
+        },
+      ]}
+      style={{ display: 'grid', maxWidth: 800, minWidth: 400 }}
+    />
+  );
+});
+
+export default Debug;

package/src/features/Conversation/Messages/Group/Tool/Inspector/PluginResult.tsx

@@ -0,0 +1,34 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo, useMemo } from 'react';
+
+export interface PluginResultProps {
+  content?: string | null;
+  variant?: 'filled' | 'outlined' | 'borderless';
+}
+
+const PluginResult = memo<PluginResultProps>(({ content, variant }) => {
+  const { data, language } = useMemo(() => {
+    try {
+      const parsed = JSON.parse(content || '');
+      // Special case: if the parsed result is a string, it means the original content was a stringified string
+      if (typeof parsed === 'string') {
+        return { data: parsed, language: 'plaintext' }; // Return the parsed string directly, do not re-serialize
+      }
+      return { data: JSON.stringify(parsed, null, 2), language: 'json' };
+    } catch {
+      return { data: content || '', language: 'plaintext' };
+    }
+  }, [content]);
+
+  return (
+    <Highlighter
+      language={language}
+      style={{ maxHeight: 200, overflow: 'scroll', width: '100%' }}
+      variant={variant}
+    >
+      {data}
+    </Highlighter>
+  );
+});
+
+export default PluginResult;

package/src/features/Conversation/Messages/Group/Tool/Inspector/PluginState.tsx

@@ -0,0 +1,18 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+
+export interface PluginStateProps {
+  state?: any;
+}
+
+const PluginState = memo<PluginStateProps>(({ state }) => {
+  if (!state) return null;
+
+  return (
+    <Highlighter language={'json'} style={{ maxHeight: 200, maxWidth: 800, overflow: 'scroll' }}>
+      {JSON.stringify(state, null, 2)}
+    </Highlighter>
+  );
+});
+
+export default PluginState;

package/src/features/Conversation/Messages/Group/Tool/Inspector/Settings.tsx

@@ -0,0 +1,40 @@
+import { ActionIcon } from '@lobehub/ui';
+import { LucideSettings } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PluginDetailModal from '@/features/PluginDetailModal';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const Settings = memo<{ id: string }>(({ id }) => {
+  const item = useToolStore(pluginSelectors.getToolManifestById(id));
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation('plugin');
+  const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(item?.settings);
+
+  return (
+    hasSettings && (
+      <>
+        <ActionIcon
+          icon={LucideSettings}
+          onClick={() => {
+            setOpen(true);
+          }}
+          size={'small'}
+          title={t('setting')}
+        />
+        <PluginDetailModal
+          id={id}
+          onClose={() => {
+            setOpen(false);
+          }}
+          open={open}
+          schema={item?.settings}
+        />
+      </>
+    )
+  );
+});
+
+export default Settings;

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

@@ -0,0 +1,92 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ChevronRight } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { toolSelectors } from '@/store/tool/selectors';
+import { shinyTextStylish } from '@/styles/loading';
+import { LocalSystemManifest } from '@/tools/local-system';
+import { WebBrowsingManifest } from '@/tools/web-browsing';
+
+import BuiltinPluginTitle from './BuiltinPluginTitle';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  apiName: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
+
+  shinyText: shinyTextStylish(token),
+}));
+
+interface ToolTitleProps {
+  apiName: string;
+  hasResult?: boolean;
+  identifier: string;
+  index: number;
+  messageId: string;
+  toolCallId: string;
+}
+
+const ToolTitle = memo<ToolTitleProps>(
+  ({ identifier, apiName, hasResult, index, toolCallId, messageId }) => {
+    const { t } = useTranslation('plugin');
+    const { styles } = useStyles();
+
+    const isLoading = !hasResult;
+
+    const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
+
+    const plugins = useMemo(
+      () => [
+        {
+          apiName: t(`search.apiName.${apiName}`, apiName),
+          id: WebBrowsingManifest.identifier,
+          title: t('search.title'),
+        },
+        {
+          apiName: t(`localSystem.apiName.${apiName}`, apiName),
+          id: LocalSystemManifest.identifier,
+          title: t('localSystem.title'),
+        },
+      ],
+      [],
+    );
+
+    const builtinPluginTitle = plugins.find((item) => item.id === identifier);
+
+    if (!!builtinPluginTitle) {
+      return (
+        <BuiltinPluginTitle
+          {...builtinPluginTitle}
+          hasResult={hasResult}
+          identifier={identifier}
+          index={index}
+          messageId={messageId}
+          toolCallId={toolCallId}
+        />
+      );
+    }
+
+    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
+
+    return (
+      <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={6} horizontal>
+        <div>{pluginTitle}</div> <Icon icon={ChevronRight} />
+        <span className={styles.apiName}>{apiName}</span>
+      </Flexbox>
+    );
+  },
+);
+
+export default ToolTitle;

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

@@ -0,0 +1,176 @@
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Check, LayoutPanelTop, LogsIcon, LucideBug, LucideBugOff, X } from 'lucide-react';
+import { CSSProperties, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { LOADING_FLAT } from '@/const/message';
+import { shinyTextStylish } from '@/styles/loading';
+
+import Debug from './Debug';
+import Settings from './Settings';
+import ToolTitle from './ToolTitle';
+
+export const useStyles = createStyles(({ css, token, cx }) => ({
+  actions: cx(
+    'inspector-container',
+    css`
+      opacity: 0;
+      transition: opacity 300ms ease-in-out;
+    `,
+  ),
+  apiName: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
+  container: css`
+    :hover {
+      .inspector-container {
+        opacity: 1;
+      }
+    }
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+  shinyText: shinyTextStylish(token),
+  tool: css`
+    cursor: pointer;
+
+    width: fit-content;
+    padding-block: 2px;
+    border-radius: 6px;
+
+    color: ${token.colorTextTertiary};
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+}));
+
+interface InspectorProps {
+  apiName: string;
+  arguments?: string;
+  hidePluginUI?: boolean;
+  id: string;
+  identifier: string;
+  index: number;
+  messageId: string;
+  result?: { content: string | null; error?: any; state?: any };
+  setShowPluginRender: (show: boolean) => void;
+  setShowRender: (show: boolean) => void;
+  showPluginRender: boolean;
+  showPortal?: boolean;
+  showRender: boolean;
+  style?: CSSProperties;
+  type?: string;
+}
+
+const Inspectors = memo<InspectorProps>(
+  ({
+    messageId,
+    index,
+    identifier,
+    apiName,
+    id,
+    arguments: requestArgs,
+    showRender,
+    result,
+    setShowRender,
+    showPluginRender,
+    setShowPluginRender,
+    hidePluginUI = false,
+    type,
+  }) => {
+    const { t } = useTranslation('plugin');
+    const { styles, theme } = useStyles();
+
+    const [showDebug, setShowDebug] = useState(false);
+
+    const hasError = !!result?.error;
+    const hasSuccessResult = !!result?.content && result.content !== LOADING_FLAT;
+
+    const hasResult = hasSuccessResult || hasError;
+
+    return (
+      <Flexbox className={styles.container} gap={4}>
+        <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
+          <Flexbox
+            align={'center'}
+            className={styles.tool}
+            gap={8}
+            horizontal
+            onClick={() => {
+              setShowRender(!showRender);
+            }}
+            paddingInline={4}
+          >
+            <ToolTitle
+              apiName={apiName}
+              hasResult={hasResult}
+              identifier={identifier}
+              index={index}
+              messageId={messageId}
+              toolCallId={id}
+            />
+          </Flexbox>
+          <Flexbox align={'center'} gap={8} horizontal>
+            <Flexbox className={styles.actions} horizontal>
+              {showRender && !hidePluginUI && (
+                <ActionIcon
+                  icon={showPluginRender ? LogsIcon : LayoutPanelTop}
+                  onClick={() => {
+                    setShowPluginRender(!showPluginRender);
+                  }}
+                  size={'small'}
+                  title={showPluginRender ? t('inspector.args') : t('inspector.pluginRender')}
+                />
+              )}
+              <ActionIcon
+                icon={showDebug ? LucideBugOff : LucideBug}
+                onClick={() => {
+                  setShowDebug(!showDebug);
+                }}
+                size={'small'}
+                title={t(showDebug ? 'debug.off' : 'debug.on')}
+              />
+              <Settings id={identifier} />
+            </Flexbox>
+            {hasResult && (
+              <Flexbox align={'center'} gap={4} horizontal style={{ fontSize: 12 }}>
+                {hasError ? (
+                  <X color={theme.colorError} size={14} />
+                ) : (
+                  <Check color={theme.colorSuccess} size={14} />
+                )}
+              </Flexbox>
+            )}
+          </Flexbox>
+        </Flexbox>
+        {showDebug && (
+          <Debug
+            apiName={apiName}
+            identifier={identifier}
+            requestArgs={requestArgs}
+            result={result}
+            toolCallId={id}
+            type={type}
+          />
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Inspectors;