@lobehub/chat 1.114.5 → 1.115.0

package/src/store/file/slices/upload/action.ts

@@ -7,6 +7,7 @@ import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import { fileService } from '@/services/file';
 import { uploadService } from '@/services/upload';
 import { FileMetadata, UploadFileItem } from '@/types/files';
+import { getImageDimensions } from '@/utils/client/imageDimensions';
 
 import { FileStore } from '../../store';
 
@@ -36,6 +37,10 @@ interface UploadWithProgressParams {
 }
 
 interface UploadWithProgressResult {
+  dimensions?: {
+    height: number;
+    width: number;
+  };
   filename?: string;
   id: string;
   url: string;
@@ -61,6 +66,9 @@ export const createFileUploadSlice: StateCreator<
   FileUploadAction
 > = () => ({
   uploadBase64FileWithProgress: async (base64) => {
+    // Extract image dimensions from base64 data
+    const dimensions = await getImageDimensions(base64);
+
     const { metadata, fileType, size, hash } = await uploadService.uploadBase64ToS3(base64);
 
     const res = await fileService.createFile({
@@ -71,18 +79,21 @@ export const createFileUploadSlice: StateCreator<
       size: size,
       url: metadata.path,
     });
-    return { ...res, filename: metadata.filename };
+    return { ...res, dimensions, filename: metadata.filename };
   },
   uploadWithProgress: async ({ file, onStatusUpdate, knowledgeBaseId, skipCheckFileType }) => {
     const fileArrayBuffer = await file.arrayBuffer();
 
-    // 1. check file hash
+    // 1. extract image dimensions if applicable
+    const dimensions = await getImageDimensions(file);
+
+    // 2. check file hash
     const hash = sha256(fileArrayBuffer);
 
     const checkStatus = await fileService.checkFileHash(hash);
     let metadata: FileMetadata;
 
-    // 2. if file exist, just skip upload
+    // 3. if file exist, just skip upload
     if (checkStatus.isExist) {
       metadata = checkStatus.metadata as FileMetadata;
       onStatusUpdate?.({
@@ -91,7 +102,7 @@ export const createFileUploadSlice: StateCreator<
         value: { status: 'processing', uploadState: { progress: 100, restTime: 0, speed: 0 } },
       });
     }
-    // 2. if file don't exist, need upload files
+    // 3. if file don't exist, need upload files
     else {
       const { data, success } = await uploadService.uploadFileToS3(file, {
         onNotSupported: () => {
@@ -119,7 +130,7 @@ export const createFileUploadSlice: StateCreator<
       metadata = data;
     }
 
-    // 3. use more powerful file type detector to get file type
+    // 4. use more powerful file type detector to get file type
     let fileType = file.type;
 
     if (!file.type) {
@@ -129,7 +140,7 @@ export const createFileUploadSlice: StateCreator<
       fileType = type?.mime || 'text/plain';
     }
 
-    // 4. create file to db
+    // 5. create file to db
     const data = await fileService.createFile(
       {
         fileType,
@@ -153,6 +164,6 @@ export const createFileUploadSlice: StateCreator<
       },
     });
 
-    return { ...data, filename: file.name };
+    return { ...data, dimensions, filename: file.name };
   },
 });

package/src/store/image/slices/generationConfig/hooks.ts

@@ -44,6 +44,14 @@ export function useGenerationConfigParam<
       paramConfig && typeof paramConfig === 'object' && 'enum' in paramConfig
         ? paramConfig.enum
         : undefined;
+    const maxFileSize =
+      paramConfig && typeof paramConfig === 'object' && 'maxFileSize' in paramConfig
+        ? paramConfig.maxFileSize
+        : undefined;
+    const maxCount =
+      paramConfig && typeof paramConfig === 'object' && 'maxCount' in paramConfig
+        ? paramConfig.maxCount
+        : undefined;
 
     return {
       description,
@@ -51,6 +59,8 @@ export function useGenerationConfigParam<
       min,
       step,
       enumValues,
+      maxFileSize,
+      maxCount,
     };
   }, [paramConfig]);
 
@@ -87,7 +97,7 @@ export function useDimensionControl() {
   }, [paramsSchema]);
 
   // 只要不是所有维度相关的控件都不显示，那么这个容器就应该显示
-  const showDimensionControl = !(!isSupportAspectRatio && !isSupportWidth && !isSupportHeight);
+  const showDimensionControl = isSupportAspectRatio || isSupportWidth || isSupportHeight;
 
   return {
     isLocked: store.isAspectRatioLocked,

package/tsconfig.json

@@ -34,14 +34,5 @@
     ]
   },
   "exclude": ["node_modules", "public/sw.js", "apps/desktop", "tmp", "temp", ".temp"],
-  "include": [
-    "**/*.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "next-env.d.ts",
-    "src",
-    "tests",
-    "vitest.config.ts"
-  ]
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next-env.d.ts"]
 }

package/packages/const/src/imageGeneration.ts

@@ -1,16 +0,0 @@
-/**
- * Image generation and processing configuration constants
- */
-export const IMAGE_GENERATION_CONFIG = {
-  /**
-   * Maximum cover image size in pixels (longest edge)
-   * Used for generating cover images from source images
-   */
-  COVER_MAX_SIZE: 256,
-
-  /**
-   * Maximum thumbnail size in pixels (longest edge)
-   * Used for generating thumbnail images from original images
-   */
-  THUMBNAIL_MAX_SIZE: 512,
-} as const;

package/src/app/(backend)/trpc/desktop/[trpc]/route.ts

@@ -1,26 +0,0 @@
-import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
-import type { NextRequest } from 'next/server';
-
-import { pino } from '@/libs/logger';
-import { createLambdaContext } from '@/libs/trpc/lambda/context';
-import { desktopRouter } from '@/server/routers/desktop';
-
-const handler = (req: NextRequest) =>
-  fetchRequestHandler({
-    /**
-     * @link https://trpc.io/docs/v11/context
-     */
-    createContext: () => createLambdaContext(req),
-
-    endpoint: '/trpc/desktop',
-
-    onError: ({ error, path, type }) => {
-      pino.info(`Error in tRPC handler (desktop) on path: ${path}, type: ${type}`);
-      console.error(error);
-    },
-
-    req,
-    router: desktopRouter,
-  });
-
-export { handler as GET, handler as POST };

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/AspectRatioSelect.tsx

@@ -1,24 +0,0 @@
-import { memo } from 'react';
-
-import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
-
-import Select from '../../../components/AspectRatioSelect';
-
-const AspectRatioSelect = memo(() => {
-  const { value, setValue, enumValues } = useGenerationConfigParam('aspectRatio');
-
-  // 如果模型支持 ratio 枚举值，则使用枚举值
-  if (enumValues && enumValues.length > 0) {
-    const options = enumValues.map((ratio) => ({
-      label: ratio,
-      value: ratio,
-    }));
-
-    return <Select onChange={setValue} options={options} style={{ width: '100%' }} value={value} />;
-  }
-
-  // 如果模型不支持 ratio 参数，返回 null（由外部处理是否显示）
-  return null;
-});
-
-export default AspectRatioSelect;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/SizeSliderInput.tsx

@@ -1,15 +0,0 @@
-import { SliderWithInput } from '@lobehub/ui';
-import { memo } from 'react';
-
-import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
-
-interface SizeSliderInputProps {
-  paramName: 'width' | 'height';
-}
-
-const SizeSliderInput = memo(({ paramName }: SizeSliderInputProps) => {
-  const { value, setValue, min, max } = useGenerationConfigParam(paramName);
-  return <SliderWithInput max={max} min={min} onChange={setValue} value={value} />;
-});
-
-export default SizeSliderInput;

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicItemContainer.tsx

@@ -1,91 +0,0 @@
-'use client';
-
-import { Tooltip } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { type ReactNode } from 'react';
-import { Center, CenterProps } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token }) => ({
-  activeContainer: css`
-    border: 2px solid ${token.colorPrimary};
-    background: ${token.colorPrimaryBg};
-
-    &:hover {
-      background: ${token.colorPrimaryBgHover};
-    }
-  `,
-  container: css`
-    cursor: pointer;
-
-    position: relative;
-
-    flex: none;
-
-    width: 50px;
-    height: 50px;
-    border-radius: 6px;
-
-    background: transparent;
-
-    transition: all 0.2s ease-in-out;
-
-    &::before {
-      pointer-events: none;
-      content: '';
-
-      position: absolute;
-      inset: 0;
-
-      border-radius: 6px;
-
-      opacity: 0;
-      background: radial-gradient(circle at center, ${token.colorPrimary}20 0%, transparent 70%);
-
-      transition: opacity 0.3s ease;
-    }
-
-    &:hover {
-      background: ${token.colorFillSecondary};
-    }
-
-    &:active {
-      background: ${token.colorFillTertiary};
-    }
-
-    &:active::before {
-      opacity: 1;
-    }
-  `,
-}));
-
-interface TopicItemContainerProps extends CenterProps {
-  active?: boolean;
-  children: ReactNode;
-  tooltip?: ReactNode;
-}
-
-const TopicItemContainer = ({
-  children,
-  className,
-  active,
-  tooltip,
-  ...rest
-}: TopicItemContainerProps) => {
-  const { styles, cx } = useStyles();
-
-  const content = (
-    <Center className={cx(styles.container, active && styles.activeContainer, className)} {...rest}>
-      {children}
-    </Center>
-  );
-
-  if (!tooltip) return content;
-
-  return (
-    <Tooltip arrow placement="left" title={tooltip}>
-      {content}
-    </Tooltip>
-  );
-};
-
-export default TopicItemContainer;

package/src/app/desktop/devtools/page.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import { ActionIcon, SideNav } from '@lobehub/ui';
-import { Cog, DatabaseIcon } from 'lucide-react';
-import { memo, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { BRANDING_NAME } from '@/const/branding';
-import PostgresViewer from '@/features/DevPanel/PostgresViewer';
-import SystemInspector from '@/features/DevPanel/SystemInspector';
-import { useStyles } from '@/features/DevPanel/features/FloatPanel';
-import { electronStylish } from '@/styles/electron';
-
-const DevTools = memo(() => {
-  const { styles, theme, cx } = useStyles();
-
-  const items = [
-    {
-      children: <PostgresViewer />,
-      icon: <DatabaseIcon size={16} />,
-      key: 'Postgres Viewer',
-    },
-    {
-      children: <SystemInspector />,
-      icon: <Cog size={16} />,
-      key: 'System Status',
-    },
-  ];
-
-  const [tab, setTab] = useState<string>(items[0].key);
-
-  return (
-    <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
-      <Flexbox
-        align={'center'}
-        className={cx(`panel-drag-handle`, styles.header, electronStylish.draggable)}
-        horizontal
-        justify={'center'}
-      >
-        <Flexbox align={'baseline'} gap={6} horizontal>
-          <b>{BRANDING_NAME} Dev Tools</b>
-          <span style={{ color: theme.colorTextDescription }}>/</span>
-          <span style={{ color: theme.colorTextDescription }}>{tab}</span>
-        </Flexbox>
-      </Flexbox>
-      <Flexbox
-        height={'100%'}
-        horizontal
-        style={{ background: theme.colorBgLayout, overflow: 'hidden', position: 'relative' }}
-        width={'100%'}
-      >
-        <SideNav
-          bottomActions={[]}
-          style={{
-            background: 'transparent',
-            width: 48,
-          }}
-          topActions={items.map((item) => (
-            <ActionIcon
-              active={tab === item.key}
-              icon={item.icon}
-              key={item.key}
-              onClick={() => setTab(item.key)}
-              title={item.key}
-              tooltipProps={{
-                placement: 'right',
-              }}
-            />
-          ))}
-        />
-        {items.map((item) => (
-          <Flexbox
-            flex={1}
-            height={'100%'}
-            key={item.key}
-            style={{
-              display: tab === item.key ? 'flex' : 'none',
-              overflow: 'hidden',
-            }}
-          >
-            {item.children}
-          </Flexbox>
-        ))}
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default DevTools;

package/src/app/desktop/layout.tsx

@@ -1,31 +0,0 @@
-import { notFound } from 'next/navigation';
-import { NuqsAdapter } from 'nuqs/adapters/next/app';
-import { ReactNode } from 'react';
-
-import { isDesktop } from '@/const/version';
-import GlobalLayout from '@/layout/GlobalProvider';
-import { ServerConfigStoreProvider } from '@/store/serverConfig/Provider';
-
-interface RootLayoutProps {
-  children: ReactNode;
-}
-
-const RootLayout = async ({ children }: RootLayoutProps) => {
-  if (!isDesktop) return notFound();
-
-  return (
-    <html dir="ltr" suppressHydrationWarning>
-      <body>
-        <NuqsAdapter>
-          <ServerConfigStoreProvider>
-            <GlobalLayout appearance={'auto'} isMobile={false} locale={''}>
-              {children}
-            </GlobalLayout>
-          </ServerConfigStoreProvider>
-        </NuqsAdapter>
-      </body>
-    </html>
-  );
-};
-
-export default RootLayout;