@lobehub/chat 1.116.2 → 1.116.4

package/src/app/(backend)/webapi/plugin/gateway/route.ts

@@ -1,5 +1,6 @@
 import { AgentRuntimeError } from '@lobechat/model-runtime';
 import { ChatErrorType, ErrorType, TraceNameMap } from '@lobechat/types';
+import { getXorPayload } from '@lobechat/utils/server';
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { createGatewayOnEdgeRuntime } from '@lobehub/chat-plugins-gateway';
 
@@ -8,7 +9,6 @@ import { LOBE_CHAT_TRACE_ID } from '@/const/trace';
 import { getAppConfig } from '@/envs/app';
 import { TraceClient } from '@/libs/traces';
 import { createErrorResponse } from '@/utils/errorResponse';
-import { getXorPayload } from '@/utils/server/xor';
 import { getTracePayload } from '@/utils/trace';
 
 import { parserPluginSettings } from './settings';

package/src/app/[variants]/(main)/files/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { getUserAuth } from '@lobechat/utils/server';
 import { notFound } from 'next/navigation';
 import { Flexbox } from 'react-layout-kit';
 
@@ -5,7 +6,6 @@ import FileViewer from '@/features/FileViewer';
 import { createCallerFactory } from '@/libs/trpc/lambda';
 import { lambdaRouter } from '@/server/routers/lambda';
 import { PagePropsWithId } from '@/types/next';
-import { getUserAuth } from '@/utils/server/auth';
 
 import FileDetail from '../features/FileDetail';
 import Header from './Header';

package/src/app/[variants]/(main)/settings/sync/page.tsx

@@ -1,10 +1,10 @@
+import { gerServerDeviceInfo } from '@lobechat/utils/server';
 import { notFound } from 'next/navigation';
 
 import { serverFeatureFlags } from '@/config/featureFlags';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { DynamicLayoutProps } from '@/types/next';
-import { gerServerDeviceInfo } from '@/utils/server/responsive';
 import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Page from './index';

package/src/app/[variants]/(main)/settings/system-agent/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { DEFAULT_REWRITE_QUERY } from '@/const/settings';
+import { DEFAULT_REWRITE_QUERY } from '@lobechat/prompts';
+
 import { isServerMode } from '@/const/version';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 

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

@@ -0,0 +1,89 @@
+'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

@@ -0,0 +1,31 @@
+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;

package/src/components/HtmlPreview/HtmlPreviewAction.tsx

@@ -0,0 +1,32 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Eye } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import HtmlPreviewDrawer from './PreviewDrawer';
+
+interface HtmlPreviewActionProps {
+  content: string;
+  size?: number;
+}
+
+const HtmlPreviewAction = memo<HtmlPreviewActionProps>(({ content, size }) => {
+  const { t } = useTranslation('components');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        icon={Eye}
+        onClick={() => setOpen(true)}
+        size={size}
+        title={t('HtmlPreview.actions.preview')}
+      />
+      <HtmlPreviewDrawer content={content} onClose={() => setOpen(false)} open={open} />
+    </>
+  );
+});
+
+HtmlPreviewAction.displayName = 'HtmlPreviewAction';
+
+export default HtmlPreviewAction;

package/src/components/HtmlPreview/PreviewDrawer.tsx

@@ -0,0 +1,133 @@
+import { exportFile } from '@lobechat/utils/client';
+import { Block, Button, Highlighter, Segmented } from '@lobehub/ui';
+import { Drawer } from 'antd';
+import { createStyles } from 'antd-style';
+import { Code2, Download, Eye } from 'lucide-react';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { isDesktop } from '@/const/version';
+import { TITLE_BAR_HEIGHT } from '@/features/ElectronTitlebar';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    height: 100%;
+  `,
+  iframe: css`
+    width: 100%;
+    height: 100%;
+    border: none;
+  `,
+}));
+
+interface HtmlPreviewDrawerProps {
+  content: string;
+  onClose: () => void;
+  open: boolean;
+}
+
+const HtmlPreviewDrawer = memo<HtmlPreviewDrawerProps>(({ content, open, onClose }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('components');
+  const [mode, setMode] = useState<'preview' | 'code'>('preview');
+
+  const htmlContent = content;
+
+  const extractTitle = useCallback(() => {
+    const m = htmlContent.match(/<title>([\S\s]*?)<\/title>/i);
+    return m ? m[1].trim() : undefined;
+  }, [htmlContent]);
+
+  const sanitizeFileName = useCallback((name: string) => {
+    return name
+      .replaceAll(/["*/:<>?\\|]/g, '-')
+      .replaceAll(/\s+/g, ' ')
+      .trim()
+      .slice(0, 100);
+  }, []);
+
+  const onDownload = useCallback(() => {
+    const title = extractTitle();
+    const base = title ? sanitizeFileName(title) : `chat-html-preview-${Date.now()}`;
+    exportFile(content, `${base}.html`);
+  }, [content, extractTitle, sanitizeFileName]);
+
+  const Title = (
+    <Flexbox align={'center'} horizontal justify={'space-between'} style={{ width: '100%' }}>
+      {t('HtmlPreview.title')}
+      <Segmented
+        onChange={(v) => setMode(v as 'preview' | 'code')}
+        options={[
+          {
+            label: (
+              <Flexbox align={'center'} gap={6} horizontal>
+                <Eye size={16} />
+                {t('HtmlPreview.mode.preview')}
+              </Flexbox>
+            ),
+            value: 'preview',
+          },
+          {
+            label: (
+              <Flexbox align={'center'} gap={6} horizontal>
+                <Code2 size={16} />
+                {t('HtmlPreview.mode.code')}
+              </Flexbox>
+            ),
+            value: 'code',
+          },
+        ]}
+        value={mode}
+      />
+      <Button
+        color={'default'}
+        icon={<Download size={16} />}
+        onClick={onDownload}
+        variant={'filled'}
+      >
+        {t('HtmlPreview.actions.download')}
+      </Button>
+    </Flexbox>
+  );
+
+  return (
+    <Drawer
+      destroyOnHidden
+      height={isDesktop ? `calc(100vh - ${TITLE_BAR_HEIGHT}px)` : '100vh'}
+      onClose={onClose}
+      open={open}
+      placement="bottom"
+      styles={{
+        body: { height: '100%', padding: 0 },
+        header: { paddingBlock: 8, paddingInline: 12 },
+      }}
+      title={Title}
+    >
+      {mode === 'preview' ? (
+        <Block className={styles.container}>
+          <iframe
+            className={styles.iframe}
+            sandbox="allow-scripts allow-same-origin"
+            srcDoc={content}
+            title={t('HtmlPreview.iframeTitle')}
+          />
+        </Block>
+      ) : (
+        <Block className={styles.container}>
+          <Highlighter
+            language={'html'}
+            showLanguage={false}
+            style={{ height: '100%', overflow: 'auto' }}
+          >
+            {htmlContent}
+          </Highlighter>
+        </Block>
+      )}
+    </Drawer>
+  );
+});
+
+HtmlPreviewDrawer.displayName = 'HtmlPreviewDrawer';
+
+export default HtmlPreviewDrawer;

package/src/components/HtmlPreview/index.ts

@@ -0,0 +1,2 @@
+export { default as HtmlPreviewAction } from './HtmlPreviewAction';
+export { default as HtmlPreviewDrawer } from './PreviewDrawer';

package/src/features/Conversation/components/ChatItem/ShareMessageModal/ShareText/index.tsx

@@ -1,3 +1,4 @@
+import { exportFile } from '@lobechat/utils/client';
 import { Button, copyToClipboard } from '@lobehub/ui';
 import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
@@ -10,7 +11,6 @@ import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
-import { exportFile } from '@/utils/client/exportFile';
 
 import { useStyles } from '../style';
 import Preview from './Preview';

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -6,6 +6,7 @@ import { MouseEventHandler, ReactNode, memo, use, useCallback, useMemo } from 'r
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { HtmlPreviewAction } from '@/components/HtmlPreview';
 import { isDesktop } from '@/const/version';
 import ChatItem from '@/features/ChatItem';
 import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
@@ -33,6 +34,14 @@ import { normalizeThinkTags, processWithArtifact } from './utils';
 const rehypePlugins = markdownElements.map((element) => element.rehypePlugin).filter(Boolean);
 const remarkPlugins = markdownElements.map((element) => element.remarkPlugin).filter(Boolean);
 
+const isHtmlCode = (content: string, language: string) => {
+  return (
+    language === 'html' ||
+    (language === '' && content.includes('<html>')) ||
+    (language === '' && content.includes('<!DOCTYPE html>'))
+  );
+};
+
 const useStyles = createStyles(({ css, prefixCls }) => ({
   loading: css`
     opacity: 0.6;
@@ -175,6 +184,20 @@ const Item = memo<ChatListItemProps>(
       () => ({
         animated,
         citations: item?.role === 'user' ? undefined : item?.search?.citations,
+        componentProps: {
+          highlight: {
+            actionsRender: ({ content, actionIconSize, language, originalNode }: any) => {
+              const showHtmlPreview = isHtmlCode(content, language);
+
+              return (
+                <>
+                  {showHtmlPreview && <HtmlPreviewAction content={content} size={actionIconSize} />}
+                  {originalNode}
+                </>
+              );
+            },
+          },
+        },
         components,
         customRender: markdownCustomRender,
         enableCustomFootnotes: item?.role === 'assistant',

package/src/features/ShareModal/ShareJSON/index.tsx

@@ -1,3 +1,5 @@
+import { FORM_STYLE } from '@lobechat/const';
+import { exportFile } from '@lobechat/utils/client';
 import { Button, Form, type FormItemProps, copyToClipboard } from '@lobehub/ui';
 import { App, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
@@ -6,13 +8,11 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { FORM_STYLE } from '@/const/layoutTokens';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
-import { exportFile } from '@/utils/client/exportFile';
 
 import { useStyles } from '../style';
 import Preview from './Preview';

package/src/features/ShareModal/ShareText/index.tsx

@@ -1,3 +1,4 @@
+import { exportFile } from '@lobechat/utils/client';
 import { Button, Form, type FormItemProps, copyToClipboard } from '@lobehub/ui';
 import { App, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
@@ -12,7 +13,6 @@ import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
-import { exportFile } from '@/utils/client/exportFile';
 
 import { useStyles } from '../style';
 import Preview from './Preview';

package/src/libs/oidc-provider/adapter.ts

@@ -164,7 +164,7 @@ class OIDCAdapter {
       log('[%s] Setting userId: %s', this.name, payload.accountId);
     } else {
       try {
-        const { getUserAuth } = await import('@/utils/server/auth');
+        const { getUserAuth } = await import('@lobechat/utils/server');
         try {
           const { userId } = await getUserAuth();
           if (userId) {

package/src/libs/trpc/edge/middleware/jwtPayload.test.ts

@@ -1,11 +1,11 @@
 // @vitest-environment node
+import * as utils from '@lobechat/utils/server';
 import { TRPCError } from '@trpc/server';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { createCallerFactory } from '@/libs/trpc/edge';
 import { AuthContext, createContextInner } from '@/libs/trpc/edge/context';
 import { edgeTrpc as trpc } from '@/libs/trpc/edge/init';
-import * as utils from '@/utils/server/xor';
 
 import { jwtPayloadChecker } from './jwtPayload';
 

package/src/libs/trpc/edge/middleware/jwtPayload.ts

@@ -1,7 +1,6 @@
+import { getXorPayload } from '@lobechat/utils/server';
 import { TRPCError } from '@trpc/server';
 
-import { getXorPayload } from '@/utils/server/xor';
-
 import { edgeTrpc } from '../init';
 
 export const jwtPayloadChecker = edgeTrpc.middleware(async (opts) => {

package/src/libs/trpc/lambda/middleware/keyVaults.ts

@@ -1,7 +1,6 @@
+import { getXorPayload } from '@lobechat/utils/server';
 import { TRPCError } from '@trpc/server';
 
-import { getXorPayload } from '@/utils/server/xor';
-
 import { trpc } from '../init';
 
 export const keyVaults = trpc.middleware(async (opts) => {

package/src/locales/default/components.ts

@@ -75,6 +75,18 @@ export default {
   GoBack: {
     back: '返回',
   },
+  HtmlPreview: {
+    actions: {
+      download: '下载',
+      preview: '预览',
+    },
+    iframeTitle: 'HTML 预览',
+    mode: {
+      code: '代码',
+      preview: '预览',
+    },
+    title: 'HTML 预览',
+  },
   ImageUpload: {
     actions: {
       changeImage: '点击更换图片',

package/src/middleware.ts

@@ -1,4 +1,5 @@
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+import { parseDefaultThemeFromCountry } from '@lobechat/utils/server';
 import debug from 'debug';
 import { NextRequest, NextResponse } from 'next/server';
 import { UAParser } from 'ua-parser-js';
@@ -11,11 +12,10 @@ import { LOBE_THEME_APPEARANCE } from '@/const/theme';
 import { appEnv } from '@/envs/app';
 import NextAuthEdge from '@/libs/next-auth/edge';
 import { Locales } from '@/locales/resources';
-import { parseBrowserLanguage } from '@/utils/locale';
-import { parseDefaultThemeFromCountry } from '@/utils/server/geo';
-import { RouteVariants } from '@/utils/server/routeVariants';
 
 import { oidcEnv } from './envs/oidc';
+import { parseBrowserLanguage } from './utils/locale';
+import { RouteVariants } from './utils/server/routeVariants';
 
 // Create debug logger instances
 const logDefault = debug('middleware:default');

package/src/server/routers/tools/search.test.ts

@@ -9,7 +9,7 @@ import { SEARCH_SEARXNG_NOT_CONFIG } from '@/types/tool/search';
 import { searchRouter } from './search';
 
 // Mock JWT verification
-vi.mock('@/utils/server/xor', () => ({
+vi.mock('@lobechat/utils/server', () => ({
   getXorPayload: vi.fn().mockReturnValue({ userId: '1' }),
 }));
 

package/src/services/config.ts

@@ -1,11 +1,9 @@
+import { BRANDING_NAME, isDeprecatedEdition, isServerMode } from '@lobechat/const';
+import { downloadFile, exportJSONFile } from '@lobechat/utils/client';
 import dayjs from 'dayjs';
 
-import { BRANDING_NAME } from '@/const/branding';
-import { isDeprecatedEdition, isServerMode } from '@/const/version';
 import { CURRENT_CONFIG_VERSION } from '@/migrations';
 import { ImportPgDataStructure } from '@/types/export';
-import { downloadFile } from '@/utils/client/downloadFile';
-import { exportJSONFile } from '@/utils/client/exportFile';
 
 import { exportService } from './export';
 import { configService as deprecatedExportService } from './export/_deprecated';

package/src/utils/client/switchLang.ts

@@ -1,7 +1,7 @@
-import { LOBE_LOCALE_COOKIE } from '@lobechat/const';
 import { setCookie } from '@lobechat/utils';
 import { changeLanguage } from 'i18next';
 
+import { LOBE_LOCALE_COOKIE } from '@/const/locale';
 import { LocaleMode } from '@/types/locale';
 
 export const switchLang = (locale: LocaleMode) => {

package/{packages/utils/src → src/utils}/server/pageProps.ts

@@ -1,6 +1,7 @@
 import { translation } from '@/server/translation';
 import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
+
+import { RouteVariants } from './routeVariants';
 
 export const parsePageMetaProps = async (props: DynamicLayoutProps) => {
   const { locale: hl, isMobile } = await RouteVariants.getVariantsFromProps(props);

package/tsconfig.json

@@ -21,7 +21,7 @@
       "@/libs/model-runtime": ["./packages/model-runtime/src/index.ts"],
       "@/libs/model-runtime/*": ["./packages/model-runtime/src/*"],
       "@/database/*": ["./packages/database/src/*", "./src/database/*"],
-      "@/const/*": ["./packages/const/src/*"],
+      "@/const/*": ["./packages/const/src/*", "./src/const/*"],
       "@/utils/*": ["./packages/utils/src/*", "./src/utils/*"],
       "@/types/*": ["./packages/types/src/*", "./src/types/*"],
       "@/*": ["./src/*"],

package/vitest.config.mts

@@ -13,6 +13,7 @@ export default defineConfig({
       '@/database/_deprecated': resolve(__dirname, './src/database/_deprecated'),
       '@/database': resolve(__dirname, './packages/database/src'),
       '@/utils/client/switchLang': resolve(__dirname, './src/utils/client/switchLang'),
+      '@/const/locale': resolve(__dirname, './src/const/locale'),
       // TODO: after refactor the errorResponse, we can remove it
       '@/utils/errorResponse': resolve(__dirname, './src/utils/errorResponse'),
       '@/utils': resolve(__dirname, './packages/utils/src'),