@lobehub/chat 1.62.5 → 1.62.7

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 }) => {

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

@@ -1,166 +0,0 @@
-import { Loading3QuartersOutlined } from '@ant-design/icons';
-import { ActionIcon, Highlighter, Icon, Tag } from '@lobehub/ui';
-import { Tabs, Typography } from 'antd';
-import isEqual from 'fast-deep-equal';
-import {
-  BetweenVerticalStart,
-  LucideBug,
-  LucideBugOff,
-  LucideChevronDown,
-  LucideChevronRight,
-} from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import PluginAvatar from '@/features/PluginAvatar';
-import { useIsMobile } from '@/hooks/useIsMobile';
-import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/selectors';
-import { pluginHelpers, useToolStore } from '@/store/tool';
-import { toolSelectors } from '@/store/tool/selectors';
-import { ChatPluginPayload } from '@/types/message';
-
-import PluginResult from './PluginResultJSON';
-import Settings from './Settings';
-import { useStyles } from './style';
-
-export interface InspectorProps {
-  arguments?: string;
-  content: string;
-  id: string;
-  identifier?: string;
-  loading?: boolean;
-  payload?: ChatPluginPayload;
-  setShow?: (showRender: boolean) => void;
-  showPortal?: boolean;
-  showRender?: boolean;
-}
-
-const Inspector = memo<InspectorProps>(
-  ({
-    arguments: requestArgs = '{}',
-    payload,
-    showRender,
-    loading,
-    setShow,
-    content,
-    identifier = 'unknown',
-    id,
-    showPortal = true,
-  }) => {
-    const { t } = useTranslation(['plugin', 'portal']);
-    const { styles } = useStyles();
-    const [open, setOpen] = useState(false);
-    const [isMessageToolUIOpen, openToolUI, togglePortal] = useChatStore((s) => [
-      chatPortalSelectors.isPluginUIOpen(id)(s),
-      s.openToolUI,
-      s.togglePortal,
-    ]);
-
-    const isMobile = useIsMobile();
-    const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
-
-    const showRightAction = useToolStore(toolSelectors.isToolHasUI(identifier));
-
-    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
-
-    let args, params;
-    try {
-      args = JSON.stringify(payload, null, 2);
-      params = JSON.stringify(JSON.parse(requestArgs), null, 2);
-    } catch {
-      args = '';
-      params = '';
-    }
-
-    return (
-      <Flexbox gap={8}>
-        <Flexbox align={'center'} distribution={'space-between'} gap={24} horizontal>
-          <Flexbox
-            align={'center'}
-            className={styles.container}
-            gap={isMobile ? 16 : 8}
-            horizontal
-            onClick={() => {
-              setShow?.(!showRender);
-            }}
-          >
-            <Flexbox align={'center'} gap={8} horizontal>
-              {loading ? (
-                <div>
-                  <Loading3QuartersOutlined spin />
-                </div>
-              ) : (
-                <PluginAvatar identifier={identifier} size={isMobile ? 36 : undefined} />
-              )}
-              {isMobile ? (
-                <Flexbox>
-                  <div>{pluginTitle}</div>
-                  <Typography.Text className={styles.apiName} type={'secondary'}>
-                    {payload?.apiName}
-                  </Typography.Text>
-                </Flexbox>
-              ) : (
-                <>
-                  <div>{pluginTitle}</div>
-                  <Tag>{payload?.apiName}</Tag>
-                </>
-              )}
-            </Flexbox>
-            {showRightAction && <Icon icon={showRender ? LucideChevronDown : LucideChevronRight} />}
-          </Flexbox>
-
-          <Flexbox horizontal>
-            {!isMobile && showRightAction && showPortal && (
-              <ActionIcon
-                icon={BetweenVerticalStart}
-                onClick={() => {
-                  if (!isMessageToolUIOpen) openToolUI(id, identifier);
-                  else {
-                    togglePortal(false);
-                  }
-                }}
-                size={DESKTOP_HEADER_ICON_SIZE}
-                title={t('title', { ns: 'portal' })}
-              />
-            )}
-            <ActionIcon
-              icon={open ? LucideBugOff : LucideBug}
-              onClick={() => {
-                setOpen(!open);
-              }}
-              title={t(open ? 'debug.off' : 'debug.on')}
-            />
-            <Settings id={identifier} />
-          </Flexbox>
-        </Flexbox>
-        {open && (
-          <Tabs
-            items={[
-              {
-                children: <Highlighter language={'json'}>{args}</Highlighter>,
-                key: 'function_call',
-                label: t('debug.function_call'),
-              },
-              {
-                children: <Highlighter language={'json'}>{params}</Highlighter>,
-                key: 'arguments',
-                label: t('debug.arguments'),
-              },
-              {
-                children: <PluginResult content={content} />,
-                key: 'response',
-                label: t('debug.response'),
-              },
-            ]}
-            style={{ display: 'grid', maxWidth: 800, minWidth: 400 }}
-          />
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-export default Inspector;

package/src/features/Conversation/Messages/Assistant/ToolCallItem/Inspector/style.ts

@@ -1,35 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  apiName: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    font-size: 12px;
-    text-overflow: ellipsis;
-  `,
-  container: css`
-    cursor: pointer;
-
-    width: fit-content;
-    padding-block: 6px;
-    padding-inline: 8px;
-    padding-inline-end: 12px;
-    border: 1px solid ${token.colorBorder};
-    border-radius: 8px;
-
-    color: ${token.colorText};
-
-    &:hover {
-      background: ${token.colorFillTertiary};
-    }
-  `,
-  plugin: css`
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    width: fit-content;
-  `,
-}));

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

@@ -1,89 +0,0 @@
-import { Icon, Tag } from '@lobehub/ui';
-import { Typography } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { Loader2 } from 'lucide-react';
-import { CSSProperties, memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import PluginAvatar from '@/features/PluginAvatar';
-import { useIsMobile } from '@/hooks/useIsMobile';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-import { pluginHelpers, useToolStore } from '@/store/tool';
-import { toolSelectors } from '@/store/tool/selectors';
-
-import Arguments from '../../components/Arguments';
-import ToolMessage from './Tool';
-import { useStyles } from './style';
-
-export interface InspectorProps {
-  apiName: string;
-  arguments?: string;
-  id: string;
-  identifier: string;
-  index: number;
-  messageId: string;
-  showPortal?: boolean;
-  style?: CSSProperties;
-}
-
-const CallItem = memo<InspectorProps>(
-  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, showPortal }) => {
-    const { t } = useTranslation('plugin');
-    const { styles } = useStyles();
-
-    const [open, setOpen] = useState(false);
-    const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, index));
-    const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(id));
-    const isMobile = useIsMobile();
-
-    const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
-
-    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
-
-    // when tool calling stop streaming, we should show the tool message
-    return !loading && toolMessage ? (
-      <ToolMessage {...toolMessage} showPortal={showPortal} />
-    ) : (
-      <Flexbox gap={8} style={style}>
-        <Flexbox
-          align={'center'}
-          className={styles.container}
-          distribution={'space-between'}
-          gap={8}
-          horizontal
-          onClick={() => {
-            setOpen(!open);
-          }}
-        >
-          <Flexbox align={'center'} gap={8} horizontal>
-            {loading ? (
-              <div>
-                <Icon icon={Loader2} spin />
-              </div>
-            ) : (
-              <PluginAvatar identifier={identifier} size={isMobile ? 36 : undefined} />
-            )}
-            {isMobile ? (
-              <Flexbox>
-                <div>{pluginTitle}</div>
-                <Typography.Text className={styles.apiName} type={'secondary'}>
-                  {apiName}
-                </Typography.Text>
-              </Flexbox>
-            ) : (
-              <>
-                <div>{pluginTitle}</div>
-                <Tag>{apiName}</Tag>
-              </>
-            )}
-          </Flexbox>
-        </Flexbox>
-        {loading && <Arguments arguments={requestArgs} />}
-      </Flexbox>
-    );
-  },
-);
-
-export default CallItem;

package/src/features/Conversation/Messages/Assistant/ToolCallItem/style.ts

@@ -1,35 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  apiName: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    font-size: 12px;
-    text-overflow: ellipsis;
-  `,
-  container: css`
-    cursor: pointer;
-
-    width: fit-content;
-    padding-block: 6px;
-    padding-inline: 8px;
-    padding-inline-end: 12px;
-    border: 1px solid ${token.colorBorder};
-    border-radius: 8px;
-
-    color: ${token.colorText};
-
-    &:hover {
-      background: ${token.colorFillTertiary};
-    }
-  `,
-  plugin: css`
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    width: fit-content;
-  `,
-}));

package/src/features/Conversation/Messages/components/Arguments.tsx

@@ -1,22 +0,0 @@
-import { Highlighter } from '@lobehub/ui';
-import { memo } from 'react';
-
-import { useYamlArguments } from '@/hooks/useYamlArguments';
-
-export interface ArgumentsProps {
-  arguments?: string;
-}
-
-const Arguments = memo<ArgumentsProps>(({ arguments: args = '' }) => {
-  const yaml = useYamlArguments(args);
-
-  return (
-    !!yaml && (
-      <Highlighter language={'yaml'} showLanguage={false}>
-        {yaml}
-      </Highlighter>
-    )
-  );
-});
-
-export default Arguments;