@lobehub/chat 1.62.5 → 1.62.6

package/src/features/Conversation/Messages/Assistant/Tool/Render/Arguments.tsx

@@ -0,0 +1,165 @@
+import { Highlighter, copyToClipboard } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStyles } from 'antd-style';
+import { parse } from 'partial-json';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useYamlArguments } from '@/hooks/useYamlArguments';
+import { shinyTextStylish } from '@/styles/loading';
+
+const useStyles = createStyles(({ css, token }) => ({
+  arrayRow: css`
+    &:not(:first-child) {
+      border-block-start: 1px dotted ${token.colorBorderSecondary};
+    }
+  `,
+  colon: css`
+    color: ${token.colorTextTertiary};
+  `,
+  container: css`
+    padding-block: 4px;
+    padding-inline: 12px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 13px;
+    line-height: 1.5;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  copyable: css`
+    cursor: pointer;
+    width: 100%;
+    margin-block: 2px;
+    padding: 4px;
+
+    &:hover {
+      border-radius: 6px;
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  key: css`
+    color: ${token.colorTextTertiary};
+  `,
+  row: css`
+    display: flex;
+    align-items: baseline;
+
+    &:not(:first-child) {
+      border-block-start: 1px dotted ${token.colorBorderSecondary};
+    }
+  `,
+  shineText: shinyTextStylish(token),
+  value: css`
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+interface ObjectDisplayProps {
+  data: Record<string, any>;
+  shine?: boolean;
+}
+
+const ObjectDisplay = memo(({ data, shine }: ObjectDisplayProps) => {
+  const { styles, cx } = useStyles();
+  const { t } = useTranslation('common');
+
+  const { message } = App.useApp();
+  const isMobile = useIsMobile();
+
+  const formatValue = (value: any): string | string[] => {
+    if (Array.isArray(value)) {
+      return value.map((v) => (typeof v === 'object' ? JSON.stringify(v) : v));
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      return Object.entries(value)
+        .map(([k, v]) => `${k}: ${typeof v === 'object' ? JSON.stringify(v) : v}`)
+        .join(', ');
+    }
+    return String(value);
+  };
+
+  const hasMinWidth = Object.keys(data).length > 1;
+  if (Object.keys(data).length === 0) return null;
+
+  return (
+    <div className={styles.container}>
+      {Object.entries(data).map(([key, value]) => {
+        const formatedValue = formatValue(value);
+        return (
+          <div className={styles.row} key={key}>
+            <span
+              className={styles.key}
+              style={{ minWidth: hasMinWidth ? (isMobile ? 60 : 80) : undefined }}
+            >
+              {key}
+            </span>
+            <span className={styles.colon}>:</span>
+            <div className={cx(shine ? styles.shineText : styles.value)} style={{ width: '100%' }}>
+              {typeof formatedValue === 'string' ? (
+                <div
+                  className={styles.copyable}
+                  onClick={async () => {
+                    await copyToClipboard(formatedValue);
+                    message.success(t('copySuccess'));
+                  }}
+                >
+                  {formatedValue}
+                </div>
+              ) : (
+                formatedValue.map((v, i) => (
+                  <div
+                    className={styles.arrayRow}
+                    key={i}
+                    onClick={async () => {
+                      await copyToClipboard(v);
+                      message.success(t('copySuccess'));
+                    }}
+                  >
+                    <div className={styles.copyable}>{v}</div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+export interface ArgumentsProps {
+  arguments?: string;
+  shine?: boolean;
+}
+
+const Arguments = memo<ArgumentsProps>(({ arguments: args = '', shine }) => {
+  const requestArgs = useMemo(() => {
+    try {
+      const obj = parse(args);
+
+      if (Object.keys(obj).length === 0) return {};
+
+      return obj;
+    } catch {
+      return args;
+    }
+  }, [args]);
+
+  const yaml = useYamlArguments(args);
+
+  return typeof requestArgs === 'string' ? (
+    !!yaml && (
+      <Highlighter language={'yaml'} showLanguage={false}>
+        {yaml}
+      </Highlighter>
+    )
+  ) : (
+    <ObjectDisplay data={requestArgs} shine={shine} />
+  );
+});
+
+export default Arguments;

package/src/features/Conversation/Messages/Assistant/{ToolCallItem/Tool.tsx → Tool/Render/CustomRender.tsx}

@@ -2,7 +2,7 @@ import { Icon } from '@lobehub/ui';
 import { ConfigProvider, Empty } from 'antd';
 import { useTheme } from 'antd-style';
 import { LucideSquareArrowLeft, LucideSquareArrowRight } from 'lucide-react';
-import { memo, useContext, useState } from 'react';
+import { memo, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -11,14 +11,15 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
-import Arguments from '../../components/Arguments';
-import Inspector from './Inspector';
+import Arguments from './Arguments';
 
-const Tool = memo<
+const CustomRender = memo<
   ChatMessage & {
-    showPortal?: boolean;
+    requestArgs?: string;
+    setShowPluginRender: (show: boolean) => void;
+    showPluginRender: boolean;
   }
->(({ id, content, pluginState, plugin, showPortal }) => {
+>(({ id, content, pluginState, plugin, requestArgs, showPluginRender, setShowPluginRender }) => {
   const [loading, isMessageToolUIOpen] = useChatStore((s) => [
     chatSelectors.isPluginApiInvoking(id)(s),
     chatPortalSelectors.isPluginUIOpen(id)(s),
@@ -27,36 +28,34 @@ const Tool = memo<
   const { t } = useTranslation('plugin');
 
   const theme = useTheme();
-  const [showRender, setShow] = useState(plugin?.type !== 'default');
+  useEffect(() => {
+    if (!plugin?.type) return;
+
+    setShowPluginRender(plugin?.type !== 'default');
+  }, [plugin?.type]);
+
+  if (isMessageToolUIOpen)
+    return (
+      <Center paddingBlock={8} style={{ background: theme.colorFillQuaternary, borderRadius: 4 }}>
+        <Empty
+          description={t('showInPortal')}
+          image={
+            <Icon
+              color={theme.colorTextQuaternary}
+              icon={direction === 'rtl' ? LucideSquareArrowLeft : LucideSquareArrowRight}
+              size={'large'}
+            />
+          }
+          styles={{
+            image: { height: 24 },
+          }}
+        />
+      </Center>
+    );
 
   return (
     <Flexbox gap={12} id={id} width={'100%'}>
-      <Inspector
-        arguments={plugin?.arguments}
-        content={content}
-        id={id}
-        identifier={plugin?.identifier}
-        loading={loading}
-        payload={plugin}
-        setShow={setShow}
-        showPortal={showPortal}
-        showRender={showRender}
-      />
-      {isMessageToolUIOpen ? (
-        <Center paddingBlock={8} style={{ background: theme.colorFillQuaternary, borderRadius: 4 }}>
-          <Empty
-            description={t('showInPortal')}
-            image={
-              <Icon
-                color={theme.colorTextQuaternary}
-                icon={direction === 'rtl' ? LucideSquareArrowLeft : LucideSquareArrowRight}
-                size={'large'}
-              />
-            }
-            imageStyle={{ height: 24 }}
-          />
-        </Center>
-      ) : showRender || loading ? (
+      {showPluginRender ? (
         <PluginRender
           arguments={plugin?.arguments}
           content={content}
@@ -68,10 +67,10 @@ const Tool = memo<
           type={plugin?.type}
         />
       ) : (
-        <Arguments arguments={plugin?.arguments} />
+        <Arguments arguments={requestArgs} />
       )}
     </Flexbox>
   );
 });
 
-export default Tool;
+export default CustomRender;

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

@@ -0,0 +1,39 @@
+import { Suspense, memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import Arguments from './Arguments';
+import CustomRender from './CustomRender';
+
+interface RenderProps {
+  messageId: string;
+  requestArgs?: string;
+  setShowPluginRender: (show: boolean) => void;
+  showPluginRender: boolean;
+  toolCallId: string;
+  toolIndex: number;
+}
+const Render = memo<RenderProps>(
+  ({ toolCallId, toolIndex, messageId, requestArgs, showPluginRender, setShowPluginRender }) => {
+    const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, toolIndex));
+    const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId));
+
+    // 如果处于 loading 或者找不到 toolMessage 则展示 Arguments
+    if (loading || !toolMessage) return <Arguments arguments={requestArgs} />;
+
+    if (!!toolMessage)
+      return (
+        <Suspense fallback={<Arguments arguments={requestArgs} shine />}>
+          <CustomRender
+            {...toolMessage}
+            requestArgs={requestArgs}
+            setShowPluginRender={setShowPluginRender}
+            showPluginRender={showPluginRender}
+          />
+        </Suspense>
+      );
+  },
+);
+
+export default Render;

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

@@ -0,0 +1,70 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { CSSProperties, memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Inspectors from './Inspector';
+import Render from './Render';
+
+export interface InspectorProps {
+  apiName: string;
+  arguments?: string;
+  id: string;
+  identifier: string;
+  index: number;
+  messageId: string;
+  payload: object;
+  style?: CSSProperties;
+}
+
+const Tool = memo<InspectorProps>(
+  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, payload }) => {
+    const [showRender, setShowRender] = useState(true);
+    const [showPluginRender, setShowPluginRender] = useState(false);
+
+    return (
+      <Flexbox gap={8} style={style}>
+        <Inspectors
+          apiName={apiName}
+          arguments={requestArgs}
+          id={id}
+          identifier={identifier}
+          index={index}
+          messageId={messageId}
+          payload={payload}
+          setShowPluginRender={setShowPluginRender}
+          setShowRender={setShowRender}
+          showPluginRender={showPluginRender}
+          showRender={showRender}
+        />
+        <AnimatePresence initial={false}>
+          {showRender && (
+            <motion.div
+              animate="open"
+              exit="collapsed"
+              initial="collapsed"
+              transition={{
+                duration: 0.1,
+                ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
+              }}
+              variants={{
+                collapsed: { height: 0, opacity: 0, width: 0 },
+                open: { height: 'auto', opacity: 1, width: 'auto' },
+              }}
+            >
+              <Render
+                messageId={messageId}
+                requestArgs={requestArgs}
+                setShowPluginRender={setShowPluginRender}
+                showPluginRender={showPluginRender}
+                toolCallId={id}
+                toolIndex={index}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </Flexbox>
+    );
+  },
+);
+
+export default Tool;

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

@@ -1,18 +1,15 @@
-import { Skeleton } from 'antd';
-import { ReactNode, Suspense, memo, useContext } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { LOADING_FLAT } from '@/const/message';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-import { aiChatSelectors } from '@/store/chat/slices/aiChat/selectors';
+import { aiChatSelectors, chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
-import { InPortalThreadContext } from '../../components/ChatItem/InPortalThreadContext';
 import { DefaultMessage } from '../Default';
 import FileChunks from './FileChunks';
-import Thinking from './Reasoning';
-import ToolCall from './ToolCallItem';
+import Reasoning from './Reasoning';
+import Tool from './Tool';
 
 export const AssistantMessage = memo<
   ChatMessage & {
@@ -22,7 +19,6 @@ export const AssistantMessage = memo<
   const editing = useChatStore(chatSelectors.isMessageEditing(id));
   const generating = useChatStore(chatSelectors.isMessageGenerating(id));
 
-  const inThread = useContext(InPortalThreadContext);
   const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
 
   const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
@@ -43,7 +39,7 @@ export const AssistantMessage = memo<
   ) : (
     <Flexbox gap={8} id={id}>
       {!!chunksList && chunksList.length > 0 && <FileChunks data={chunksList} />}
-      {showReasoning && <Thinking {...props.reasoning} id={id} />}
+      {showReasoning && <Reasoning {...props.reasoning} id={id} />}
       {content && (
         <DefaultMessage
           addIdOnDOM={false}
@@ -54,24 +50,20 @@ export const AssistantMessage = memo<
         />
       )}
       {tools && (
-        <Suspense
-          fallback={<Skeleton.Button active style={{ height: 46, minWidth: 200, width: '100%' }} />}
-        >
-          <Flexbox gap={8}>
-            {tools.map((toolCall, index) => (
-              <ToolCall
-                apiName={toolCall.apiName}
-                arguments={toolCall.arguments}
-                id={toolCall.id}
-                identifier={toolCall.identifier}
-                index={index}
-                key={toolCall.id}
-                messageId={id}
-                showPortal={!inThread}
-              />
-            ))}
-          </Flexbox>
-        </Suspense>
+        <Flexbox gap={8}>
+          {tools.map((toolCall, index) => (
+            <Tool
+              apiName={toolCall.apiName}
+              arguments={toolCall.arguments}
+              id={toolCall.id}
+              identifier={toolCall.identifier}
+              index={index}
+              key={toolCall.id}
+              messageId={id}
+              payload={toolCall}
+            />
+          ))}
+        </Flexbox>
       )}
     </Flexbox>
   );

package/src/features/InitClientDB/PGliteIcon.tsx

@@ -17,9 +17,9 @@ const PGliteIcon: IconType = forwardRef(({ size = '1em', style }, ref) => {
     >
       <title>PGlite</title>
       <path
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M941.581 335.737v460.806c0 15.926-12.913 28.836-28.832 28.818l-115.283-.137c-15.243-.018-27.706-11.88-28.703-26.877.011-.569.018-1.138.018-1.711l-.004-172.904c0-47.745-38.736-86.451-86.454-86.451-46.245 0-84.052-36.359-86.342-82.068V191.496l201.708.149c79.484.058 143.892 64.553 143.892 144.092zm-576-144.281v201.818c0 47.746 38.682 86.456 86.4 86.456h86.4v-5.796c0 66.816 54.13 120.98 120.902 120.98 28.617 0 51.815 23.213 51.815 51.848v149.644c0 .688.011 1.372.025 2.057-.943 15.065-13.453 26.992-28.746 26.992l-144.982-.007.986-201.586c.079-15.915-12.755-28.88-28.66-28.959-15.904-.079-28.861 12.763-28.94 28.678l-.986 201.741v.118l-172.174-.01V623.722c0-15.915-12.895-28.819-28.8-28.819-15.906 0-28.8 12.904-28.8 28.819v201.704l-143.642-.007c-15.905-.004-28.798-12.904-28.798-28.819V335.547c0-79.58 64.471-144.093 144.001-144.092l143.999.001zm446.544 173.693c0-23.874-19.343-43.228-43.2-43.228-23.861 0-43.2 19.354-43.2 43.228 0 23.875 19.339 43.226 43.2 43.226 23.857 0 43.2-19.351 43.2-43.226z"
-        fill-rule="evenodd"
+        fillRule="evenodd"
       />
     </svg>
   );

package/src/features/PluginsUI/Render/index.tsx

@@ -1,21 +1,12 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
-import { Skeleton } from 'antd';
-import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
 import { LobeToolRenderType } from '@/types/tool';
 
+import BuiltinType from './BuiltinType';
 import DefaultType from './DefaultType';
 import Markdown from './MarkdownType';
-
-const loading = () => (
-  <Skeleton.Node active style={{ width: '100%' }}>
-    {' '}
-  </Skeleton.Node>
-);
-
-const Standalone = dynamic(() => import('./StandaloneType'), { loading });
-const BuiltinType = dynamic(() => import('./BuiltinType'), { loading });
+import Standalone from './StandaloneType';
 
 export interface PluginRenderProps {
   arguments?: string;

package/src/locales/default/plugin.ts

@@ -119,6 +119,10 @@ export default {
     reinstallError: '插件 {{name}} 刷新失败',
     urlError: '该链接没有返回 JSON 格式的内容, 请确保是有效的链接',
   },
+  inspector: {
+    args: '查看参数列表',
+    pluginRender: '查看插件界面',
+  },
   list: {
     item: {
       'deprecated.title': '已删除',

package/src/styles/loading.ts

@@ -1,4 +1,6 @@
 import { css } from 'antd-style';
+import type { FullToken } from 'antd-style/lib/types';
+import { rgba } from 'polished';
 
 export const dotLoading = css`
   &::after {
@@ -26,3 +28,28 @@ export const dotLoading = css`
     }
   }
 `;
+
+export const shinyTextStylish = (token: FullToken) => css`
+  color: ${rgba(token.colorText, 0.45)};
+
+  background: linear-gradient(
+    120deg,
+    ${rgba(token.colorTextBase, 0)} 40%,
+    ${token.colorTextSecondary} 50%,
+    ${rgba(token.colorTextBase, 0)} 60%
+  );
+  background-clip: text;
+  background-size: 200% 100%;
+
+  animation: shine 1.5s linear infinite;
+
+  @keyframes shine {
+    0% {
+      background-position: 100%;
+    }
+
+    100% {
+      background-position: -100%;
+    }
+  }
+`;

package/src/tools/dalle/Render/GalleyGrid.tsx

@@ -0,0 +1,60 @@
+import { useResponsive } from 'antd-style';
+import { ReactNode, memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Grid from '@/components/GalleyGrid/Grid';
+
+const MAX_SIZE_DESKTOP = 640;
+const MAX_SIZE_MOBILE = 280;
+
+interface GalleyGridProps<T = any> {
+  items: T[];
+  renderItem: (props: T) => ReactNode;
+}
+
+const GalleyGrid = memo<GalleyGridProps>(({ items, renderItem: Render }) => {
+  const { mobile } = useResponsive();
+
+  const { firstRow, lastRow } = useMemo(() => {
+    if (items.length === 4) {
+      return {
+        firstRow: items.slice(0, 2),
+        lastRow: items.slice(2, 4),
+      };
+    }
+
+    const firstCol = items.length % 3 === 0 ? 3 : items.length % 3;
+
+    return {
+      firstRow: items.slice(0, firstCol),
+      lastRow: items.slice(firstCol, items.length),
+    };
+  }, [items]);
+
+  const { gap, max } = useMemo(
+    () => ({
+      gap: mobile ? 4 : 6,
+      max: (mobile ? MAX_SIZE_MOBILE : MAX_SIZE_DESKTOP) * firstRow.length,
+    }),
+    [mobile],
+  );
+
+  return (
+    <Flexbox gap={gap}>
+      <Grid col={firstRow.length} gap={gap} max={max}>
+        {firstRow.map((i, index) => (
+          <Render {...i} index={index} key={index} />
+        ))}
+      </Grid>
+      {lastRow.length > 0 && (
+        <Grid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
+          {lastRow.map((i, index) => (
+            <Render {...i} index={index} key={index} />
+          ))}
+        </Grid>
+      )}
+    </Flexbox>
+  );
+});
+
+export default GalleyGrid;

package/src/tools/dalle/Render/index.tsx

@@ -3,11 +3,11 @@ import { Download } from 'lucide-react';
 import { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import GalleyGrid from '@/components/GalleyGrid';
 import { fileService } from '@/services/file';
 import { BuiltinRenderProps } from '@/types/tool';
 import { DallEImageItem } from '@/types/tool/dalle';
 
+import GalleyGrid from './GalleyGrid';
 import ImageItem from './Item';
 
 const DallE = memo<BuiltinRenderProps<DallEImageItem[]>>(({ content, messageId }) => {