@lobehub/lobehub 2.0.0-next.232 → 2.0.0-next.234

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/MultiImagesUpload/index.tsx

@@ -93,8 +93,8 @@ const styles = createStaticStyles(({ css }) => {
 
       overflow: hidden;
 
-      width: ${thumbnailSize};
-      height: ${thumbnailSize};
+      width: ${thumbnailSize}px;
+      height: ${thumbnailSize}px;
       border-radius: ${cssVar.borderRadius};
 
       background: ${cssVar.colorBgContainer};
@@ -112,7 +112,7 @@ const styles = createStaticStyles(({ css }) => {
       gap: 8px;
 
       width: 100%;
-      height: ${thumbnailSize};
+      height: ${thumbnailSize}px;
       padding: 0;
       border-radius: ${cssVar.borderRadiusLG};
 

package/src/app/[variants]/(main)/image/features/GenerationFeed/index.tsx

@@ -77,15 +77,8 @@ const GenerationFeed = memo(() => {
   }
 
   return (
-    <>
-      <Flexbox
-        gap={16}
-        ref={parent}
-        style={{
-          minHeight: 'calc(100vh - 180px)',
-        }}
-        width="100%"
-      >
+    <Flexbox flex={1}>
+      <Flexbox gap={16} ref={parent} width="100%">
         {currentGenerationBatches.map((batch, index) => (
           <Fragment key={batch.id}>
             {Boolean(index !== 0) && <Divider dashed style={{ margin: 0 }} />}
@@ -95,7 +88,7 @@ const GenerationFeed = memo(() => {
       </Flexbox>
       {/* Invisible element for scroll target */}
       <div ref={containerRef} style={{ height: 1 }} />
-    </>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/image/index.tsx

@@ -15,7 +15,7 @@ const DesktopImagePage = memo(() => {
     <>
       <NavHeader right={<WideScreenButton />} />
       <Flexbox height={'100%'} style={{ overflowY: 'auto', position: 'relative' }} width={'100%'}>
-        <WideScreenContainer>
+        <WideScreenContainer height={'100%'} wrapperStyle={{ height: '100%' }}>
           <Suspense fallback={<SkeletonList />}>
             <ImageWorkspace />
           </Suspense>

package/src/app/[variants]/(main)/resource/features/FileDetail.tsx

@@ -2,7 +2,6 @@
 
 import { ActionIcon, Flexbox, Icon, Tag } from '@lobehub/ui';
 import { Descriptions, Divider } from 'antd';
-import { cssVar } from 'antd-style';
 import dayjs from 'dayjs';
 import { BoltIcon, DownloadIcon } from 'lucide-react';
 import { memo } from 'react';
@@ -12,10 +11,23 @@ import { type FileListItem } from '@/types/files';
 import { downloadFile } from '@/utils/client/downloadFile';
 import { formatSize } from '@/utils/format';
 
-export const DETAIL_PANEL_WIDTH = 300;
+interface FileDetailProps extends FileListItem {
+  showDownloadButton?: boolean;
+  showTitle?: boolean;
+}
 
-const FileDetail = memo<FileListItem>((props) => {
-  const { name, embeddingStatus, size, createdAt, updatedAt, chunkCount, url } = props || {};
+const FileDetail = memo<FileDetailProps>((props) => {
+  const {
+    name,
+    embeddingStatus,
+    size,
+    createdAt,
+    updatedAt,
+    chunkCount,
+    url,
+    showDownloadButton = true,
+    showTitle = true,
+  } = props || {};
   const { t } = useTranslation('file');
 
   if (!props) return null;
@@ -64,16 +76,12 @@ const FileDetail = memo<FileListItem>((props) => {
   ];
 
   return (
-    <Flexbox
-      padding={16}
-      style={{ borderInlineStart: `1px solid ${cssVar.colorSplit}` }}
-      width={DETAIL_PANEL_WIDTH}
-    >
+    <Flexbox>
       <Descriptions
         colon={false}
         column={1}
         extra={
-          url && (
+          showDownloadButton && url ? (
             <ActionIcon
               icon={DownloadIcon}
               onClick={() => {
@@ -81,12 +89,12 @@ const FileDetail = memo<FileListItem>((props) => {
               }}
               title={t('download', { ns: 'common' })}
             />
-          )
+          ) : undefined
         }
         items={items}
         labelStyle={{ width: 120 }}
         size={'small'}
-        title={t('detail.basic.title')}
+        title={showTitle ? t('detail.basic.title') : undefined}
       />
       <Divider />
       <Descriptions

package/src/app/[variants]/(main)/resource/features/modal/FullscreenModal.tsx

@@ -5,8 +5,6 @@ import { ConfigProvider } from 'antd';
 import { createStaticStyles, cx } from 'antd-style';
 import { type ReactNode, useCallback, useState } from 'react';
 
-import { DETAIL_PANEL_WIDTH } from '../FileDetail';
-
 const styles = createStaticStyles(({ css, cssVar }) => ({
   body: css`
     height: 100%;
@@ -23,7 +21,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     inset-block: 0 0;
     inset-inline-end: 0;
 
-    width: ${DETAIL_PANEL_WIDTH}px;
+    width: 0;
     border-inline-start: 1px solid ${cssVar.colorSplit};
 
     background: ${cssVar.colorBgLayout};
@@ -46,7 +44,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
   modal_withDetail: css`
-    width: calc(100vw - ${DETAIL_PANEL_WIDTH}px) !important;
+    width: calc(100vw) !important;
   `,
 }));
 

package/src/app/[variants]/layout.tsx

@@ -50,6 +50,9 @@ const RootLayout = async ({ children, params }: RootLayoutProps) => {
   return (
     <html dir={direction} lang={locale} suppressHydrationWarning>
       <head>
+        {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
+        <script dangerouslySetInnerHTML={{ __html: `(${outdateBrowserScript.toString()})();` }} />
+
         {/* <script dangerouslySetInnerHTML={{ __html: 'setTimeout(() => {debugger}, 16)' }} /> */}
         {process.env.DEBUG_REACT_SCAN === '1' && (
           <Script
@@ -74,6 +77,52 @@ const RootLayout = async ({ children, params }: RootLayoutProps) => {
   );
 };
 
+function outdateBrowserScript() {
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  function supportsImportMaps(): boolean {
+    return (
+      typeof HTMLScriptElement !== 'undefined' &&
+      typeof (HTMLScriptElement as any).supports === 'function' &&
+      (HTMLScriptElement as any).supports('importmap')
+    );
+  }
+
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  function supportsCascadeLayers(): boolean {
+    if (typeof document === 'undefined') return false;
+
+    const el = document.createElement('div');
+    el.className = '__layer_test__';
+    el.style.position = 'absolute';
+    el.style.left = '-99999px';
+    el.style.top = '-99999px';
+
+    const style = document.createElement('style');
+    style.textContent = `
+      @layer a, b;
+      @layer a { .__layer_test__ { color: rgb(1, 2, 3); } }
+      @layer b { .__layer_test__ { color: rgb(4, 5, 6); } }
+    `;
+
+    document.documentElement.append(style);
+    document.documentElement.append(el);
+
+    const color = getComputedStyle(el).color;
+
+    el.remove();
+    style.remove();
+
+    return color === 'rgb(4, 5, 6)';
+  }
+
+  const isOutdateBrowser = !(supportsImportMaps() && supportsCascadeLayers());
+  if (isOutdateBrowser) {
+    window.location.href = '/not-compatible.html';
+    return true;
+  }
+  return false;
+}
+
 export default RootLayout;
 
 export { generateMetadata } from './metadata';
@@ -99,7 +148,7 @@ export const generateViewport = async (props: DynamicLayoutProps): ResolvingView
 
 export const generateStaticParams = () => {
   const mobileOptions = isDesktop ? [false] : [true, false];
-  // only static for serveral page, other go to dynamtic
+  // only static for several page, other go to dynamic
   const staticLocales: Locales[] = [DEFAULT_LANG, 'zh-CN'];
 
   const variants: { variants: string }[] = [];

package/src/envs/auth.ts

@@ -158,6 +158,15 @@ declare global {
        * Can be generated using `node scripts/generate-oidc-jwk.mjs`.
        */
       JWKS_KEY?: string;
+
+      /**
+       * Internal JWT expiration time for lambda → async calls.
+       * Format: number followed by unit (s=seconds, m=minutes, h=hours)
+       * Examples: '10s', '1m', '1h'
+       * Should be as short as possible for security, but long enough to account for network latency and server processing time.
+       * @default '30s'
+       */
+      INTERNAL_JWT_EXPIRATION?: string;
     }
   }
 }
@@ -285,6 +294,9 @@ export const getAuthConfig = () => {
       // Generic JWKS key for signing/verifying JWTs
       JWKS_KEY: z.string().optional(),
       ENABLE_OIDC: z.boolean(),
+
+      // Internal JWT expiration time (e.g., '10s', '1m', '1h')
+      INTERNAL_JWT_EXPIRATION: z.string().default('30s'),
     },
 
     runtimeEnv: {
@@ -415,6 +427,9 @@ export const getAuthConfig = () => {
       // Generic JWKS key (fallback to OIDC_JWKS_KEY for backward compatibility)
       JWKS_KEY: process.env.JWKS_KEY || process.env.OIDC_JWKS_KEY,
       ENABLE_OIDC: !!(process.env.JWKS_KEY || process.env.OIDC_JWKS_KEY),
+
+      // Internal JWT expiration time
+      INTERNAL_JWT_EXPIRATION: process.env.INTERNAL_JWT_EXPIRATION,
     },
   });
 };

package/src/features/ChatInput/ActionBar/Tools/LobehubSkillServerItem.tsx

@@ -0,0 +1,304 @@
+import { Checkbox, Flexbox, Icon } from '@lobehub/ui';
+import { Loader2, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useToolStore } from '@/store/tool';
+import { lobehubSkillStoreSelectors } from '@/store/tool/selectors';
+import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types';
+
+const POLL_INTERVAL_MS = 1000;
+const POLL_TIMEOUT_MS = 15_000;
+
+interface LobehubSkillServerItemProps {
+  /**
+   * Display label for the provider
+   */
+  label: string;
+  /**
+   * Provider ID (e.g., 'linear', 'github')
+   */
+  provider: string;
+}
+
+const LobehubSkillServerItem = memo<LobehubSkillServerItemProps>(({ provider, label }) => {
+  const { t } = useTranslation('setting');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isToggling, setIsToggling] = useState(false);
+  const [isWaitingAuth, setIsWaitingAuth] = useState(false);
+
+  const oauthWindowRef = useRef<Window | null>(null);
+  const windowCheckIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const server = useToolStore(lobehubSkillStoreSelectors.getServerByIdentifier(provider));
+  const checkStatus = useToolStore((s) => s.checkLobehubSkillStatus);
+  const revokeConnect = useToolStore((s) => s.revokeLobehubSkill);
+  const getAuthorizeUrl = useToolStore((s) => s.getLobehubSkillAuthorizeUrl);
+
+  const cleanup = useCallback(() => {
+    if (windowCheckIntervalRef.current) {
+      clearInterval(windowCheckIntervalRef.current);
+      windowCheckIntervalRef.current = null;
+    }
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+    if (pollTimeoutRef.current) {
+      clearTimeout(pollTimeoutRef.current);
+      pollTimeoutRef.current = null;
+    }
+    oauthWindowRef.current = null;
+    setIsWaitingAuth(false);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+
+  useEffect(() => {
+    if (server?.status === LobehubSkillStatus.CONNECTED && isWaitingAuth) {
+      cleanup();
+    }
+  }, [server?.status, isWaitingAuth, cleanup]);
+
+  const startFallbackPolling = useCallback(() => {
+    if (pollIntervalRef.current) return;
+
+    pollIntervalRef.current = setInterval(async () => {
+      try {
+        await checkStatus(provider);
+      } catch (error) {
+        console.error('[LobehubSkill] Failed to check status:', error);
+      }
+    }, POLL_INTERVAL_MS);
+
+    pollTimeoutRef.current = setTimeout(() => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+        pollIntervalRef.current = null;
+      }
+      setIsWaitingAuth(false);
+    }, POLL_TIMEOUT_MS);
+  }, [checkStatus, provider]);
+
+  const startWindowMonitor = useCallback(
+    (oauthWindow: Window) => {
+      windowCheckIntervalRef.current = setInterval(() => {
+        try {
+          if (oauthWindow.closed) {
+            if (windowCheckIntervalRef.current) {
+              clearInterval(windowCheckIntervalRef.current);
+              windowCheckIntervalRef.current = null;
+            }
+            oauthWindowRef.current = null;
+            checkStatus(provider);
+          }
+        } catch {
+          console.log('[LobehubSkill] COOP blocked window.closed access, falling back to polling');
+          if (windowCheckIntervalRef.current) {
+            clearInterval(windowCheckIntervalRef.current);
+            windowCheckIntervalRef.current = null;
+          }
+          startFallbackPolling();
+        }
+      }, 500);
+    },
+    [checkStatus, provider, startFallbackPolling],
+  );
+
+  const openOAuthWindow = useCallback(
+    (authorizeUrl: string) => {
+      cleanup();
+      setIsWaitingAuth(true);
+
+      const oauthWindow = window.open(authorizeUrl, '_blank', 'width=600,height=700');
+      if (oauthWindow) {
+        oauthWindowRef.current = oauthWindow;
+        startWindowMonitor(oauthWindow);
+      } else {
+        startFallbackPolling();
+      }
+    },
+    [cleanup, startWindowMonitor, startFallbackPolling],
+  );
+
+  const pluginId = server ? server.identifier : '';
+  const [checked, togglePlugin] = useAgentStore((s) => [
+    agentSelectors.currentAgentPlugins(s).includes(pluginId),
+    s.togglePlugin,
+  ]);
+
+  const handleConnect = async () => {
+    // 只有已连接状态才阻止重新连接
+    if (server?.isConnected) return;
+
+    setIsConnecting(true);
+    try {
+      const { authorizeUrl } = await getAuthorizeUrl(provider);
+      openOAuthWindow(authorizeUrl);
+    } catch (error) {
+      console.error('[LobehubSkill] Failed to get authorize URL:', error);
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleToggle = async () => {
+    if (!server) return;
+    setIsToggling(true);
+    await togglePlugin(pluginId);
+    setIsToggling(false);
+  };
+
+  const handleDisconnect = async () => {
+    if (!server) return;
+    setIsToggling(true);
+    if (checked) {
+      await togglePlugin(pluginId);
+    }
+    await revokeConnect(server.identifier);
+    setIsToggling(false);
+  };
+
+  const renderRightControl = () => {
+    if (isConnecting) {
+      return (
+        <Flexbox align="center" gap={4} horizontal onClick={(e) => e.stopPropagation()}>
+          <Icon icon={Loader2} spin />
+        </Flexbox>
+      );
+    }
+
+    if (!server) {
+      return (
+        <Flexbox
+          align="center"
+          gap={4}
+          horizontal
+          onClick={(e) => {
+            e.stopPropagation();
+            handleConnect();
+          }}
+          style={{ cursor: 'pointer', opacity: 0.65 }}
+        >
+          {t('tools.lobehubSkill.connect', { defaultValue: 'Connect' })}
+          <Icon icon={SquareArrowOutUpRight} size="small" />
+        </Flexbox>
+      );
+    }
+
+    switch (server.status) {
+      case LobehubSkillStatus.CONNECTED: {
+        if (isToggling) {
+          return <Icon icon={Loader2} spin />;
+        }
+        return (
+          <Flexbox align="center" gap={8} horizontal>
+            <Icon
+              icon={Unplug}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDisconnect();
+              }}
+              size="small"
+              style={{ cursor: 'pointer', opacity: 0.5 }}
+            />
+            <Checkbox
+              checked={checked}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggle();
+              }}
+            />
+          </Flexbox>
+        );
+      }
+      case LobehubSkillStatus.CONNECTING: {
+        if (isWaitingAuth) {
+          return (
+            <Flexbox align="center" gap={4} horizontal onClick={(e) => e.stopPropagation()}>
+              <Icon icon={Loader2} spin />
+            </Flexbox>
+          );
+        }
+        return (
+          <Flexbox
+            align="center"
+            gap={4}
+            horizontal
+            onClick={async (e) => {
+              e.stopPropagation();
+              try {
+                const { authorizeUrl } = await getAuthorizeUrl(provider);
+                openOAuthWindow(authorizeUrl);
+              } catch (error) {
+                console.error('[LobehubSkill] Failed to get authorize URL:', error);
+              }
+            }}
+            style={{ cursor: 'pointer', opacity: 0.65 }}
+          >
+            {t('tools.lobehubSkill.authorize', { defaultValue: 'Authorize' })}
+            <Icon icon={SquareArrowOutUpRight} size="small" />
+          </Flexbox>
+        );
+      }
+      case LobehubSkillStatus.NOT_CONNECTED: {
+        return (
+          <Flexbox
+            align="center"
+            gap={4}
+            horizontal
+            onClick={(e) => {
+              e.stopPropagation();
+              handleConnect();
+            }}
+            style={{ cursor: 'pointer', opacity: 0.65 }}
+          >
+            {t('tools.lobehubSkill.connect', { defaultValue: 'Connect' })}
+            <Icon icon={SquareArrowOutUpRight} size="small" />
+          </Flexbox>
+        );
+      }
+      case LobehubSkillStatus.ERROR: {
+        return (
+          <span style={{ color: 'red', fontSize: 12 }}>
+            {t('tools.lobehubSkill.error', { defaultValue: 'Error' })}
+          </span>
+        );
+      }
+      default: {
+        return null;
+      }
+    }
+  };
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={24}
+      horizontal
+      justify={'space-between'}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (server?.status === LobehubSkillStatus.CONNECTED) {
+          handleToggle();
+        }
+      }}
+      style={{ paddingLeft: 8 }}
+    >
+      <Flexbox align={'center'} gap={8} horizontal>
+        {label}
+      </Flexbox>
+      {renderRightControl()}
+    </Flexbox>
+  );
+});
+
+export default LobehubSkillServerItem;