@lobehub/lobehub 2.0.0-next.240 → 2.0.0-next.241

package/src/features/NavPanel/index.tsx

@@ -1,8 +1,5 @@
 'use client';
 
-import { DraggablePanel } from '@lobehub/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
-import { AnimatePresence, motion } from 'motion/react';
 import {
   type PropsWithChildren,
   type ReactNode,
@@ -11,14 +8,8 @@ import {
   useSyncExternalStore,
 } from 'react';
 
-import { USER_DROPDOWN_ICON_ID } from '@/app/[variants]/(main)/home/_layout/Header/components/User';
-import { isDesktop } from '@/const/version';
-import { TOGGLE_BUTTON_ID } from '@/features/NavPanel/ToggleLeftPanelButton';
-import { isMacOS } from '@/utils/platform';
-
 import Sidebar from '../../app/[variants]/(main)/home/_layout/Sidebar';
-import { BACK_BUTTON_ID } from './components/BackButton';
-import { useNavPanel } from './hooks/useNavPanel';
+import { NavPanelDraggable } from './components/NavPanelDraggable';
 
 export const NAV_PANEL_RIGHT_DRAWER_ID = 'nav-panel-drawer';
 
@@ -41,82 +32,7 @@ const setNavPanelSnapshot = (snapshot: NavPanelSnapshot) => {
   listeners.forEach((listener) => listener());
 };
 
-export const styles = createStaticStyles(({ css, cssVar }) => ({
-  content: css`
-    position: relative;
-
-    overflow: hidden;
-    display: flex;
-
-    height: 100%;
-    min-height: 100%;
-    max-height: 100%;
-  `,
-  inner: css`
-    position: relative;
-    inset: 0;
-
-    overflow: hidden;
-    flex: 1;
-    flex-direction: column;
-
-    min-width: 240px;
-  `,
-  panel: css`
-    user-select: none;
-    height: 100%;
-    color: ${cssVar.colorTextSecondary};
-    background: ${isDesktop && isMacOS() ? 'transparent' : cssVar.colorBgLayout};
-
-    * {
-      user-select: none;
-    }
-
-    #${TOGGLE_BUTTON_ID} {
-      width: 0 !important;
-      opacity: 0;
-      transition:
-        opacity,
-        width 0.2s ${cssVar.motionEaseOut};
-    }
-
-    #${USER_DROPDOWN_ICON_ID} {
-      width: 0 !important;
-      opacity: 0;
-      transition:
-        opacity,
-        width 0.2s ${cssVar.motionEaseOut};
-    }
-
-    #${BACK_BUTTON_ID} {
-      width: 0 !important;
-      opacity: 0;
-      transition: all 0.2s ${cssVar.motionEaseOut};
-    }
-
-    &:hover {
-      #${TOGGLE_BUTTON_ID} {
-        width: 32px !important;
-        opacity: 1;
-      }
-
-      #${USER_DROPDOWN_ICON_ID} {
-        width: 14px !important;
-        opacity: 1;
-      }
-
-      &:hover {
-        #${BACK_BUTTON_ID} {
-          width: 24px !important;
-          opacity: 1;
-        }
-      }
-    }
-  `,
-}));
-
 const NavPanel = memo(() => {
-  const { expand, handleSizeChange, width, togglePanel } = useNavPanel();
   const panelContent = useSyncExternalStore(
     subscribeNavPanel,
     getNavPanelSnapshot,
@@ -128,47 +44,7 @@ const NavPanel = memo(() => {
 
   return (
     <>
-      <DraggablePanel
-        className={styles.panel}
-        classNames={{
-          content: styles.content,
-        }}
-        defaultSize={{ height: '100%', width }}
-        expand={expand}
-        expandable={false}
-        maxWidth={400}
-        minWidth={240}
-        onExpandChange={(expand) => togglePanel(expand)}
-        onSizeChange={handleSizeChange}
-        placement="left"
-        showBorder={false}
-        style={{
-          background: isDesktop && isMacOS() ? 'transparent' : cssVar.colorBgLayout,
-          zIndex: 11,
-        }}
-      >
-        <AnimatePresence initial={false} mode="popLayout">
-          <motion.div
-            animate={{ opacity: 1, x: 0 }}
-            className={styles.inner}
-            exit={{
-              opacity: 0,
-              x: '-20%',
-            }}
-            initial={{
-              opacity: 0,
-              x: 0,
-            }}
-            key={activeContent.key}
-            transition={{
-              duration: 0.4,
-              ease: [0.4, 0, 0.2, 1],
-            }}
-          >
-            {activeContent.node}
-          </motion.div>
-        </AnimatePresence>
-      </DraggablePanel>
+      <NavPanelDraggable activeContent={activeContent} />
       <div
         id={NAV_PANEL_RIGHT_DRAWER_ID}
         style={{

package/src/hooks/useTypeScriptHappyCallback.ts

@@ -0,0 +1,7 @@
+import type { DependencyList } from 'react';
+import { useCallback } from 'react';
+
+export const useTypeScriptHappyCallback: <Args extends unknown[], R>(
+  fn: (...args: Args) => R,
+  deps: DependencyList,
+) => (...args: Args) => R = useCallback;

package/src/locales/default/electron.ts

@@ -1,4 +1,28 @@
 export default {
+  'navigation.chat': 'Chat',
+  'navigation.discover': 'Discover',
+  'navigation.discoverAssistants': 'Discover Assistants',
+  'navigation.discoverMcp': 'Discover MCP',
+  'navigation.discoverModels': 'Discover Models',
+  'navigation.discoverProviders': 'Discover Providers',
+  'navigation.group': 'Group',
+  'navigation.groupChat': 'Group Chat',
+  'navigation.home': 'Home',
+  'navigation.image': 'Image',
+  'navigation.knowledgeBase': 'Knowledge Base',
+  'navigation.lobehub': 'LobeHub',
+  'navigation.memory': 'Memory',
+  'navigation.memoryContexts': 'Memory - Contexts',
+  'navigation.memoryExperiences': 'Memory - Experiences',
+  'navigation.memoryIdentities': 'Memory - Identities',
+  'navigation.memoryPreferences': 'Memory - Preferences',
+  'navigation.onboarding': 'Onboarding',
+  'navigation.page': 'Page',
+  'navigation.pages': 'Pages',
+  'navigation.provider': 'Provider',
+  'navigation.recentView': 'Recent pages',
+  'navigation.resources': 'Resources',
+  'navigation.settings': 'Settings',
   'notification.finishChatGeneration': 'AI message generation completed',
   'proxy.auth': 'Authentication Required',
   'proxy.authDesc': 'If the proxy server requires a username and password',

package/src/store/electron/actions/navigationHistory.ts

@@ -0,0 +1,247 @@
+import { type StateCreator } from 'zustand/vanilla';
+
+import type { ElectronStore } from '../store';
+
+// ======== Types ======== //
+
+export interface HistoryEntry {
+  icon?: string;
+  metadata?: {
+    [key: string]: any;
+    sessionId?: string;
+    timestamp: number;
+  };
+  title: string;
+  url: string;
+}
+
+export interface NavigationHistoryState {
+  /**
+   * Current page title from PageTitle component
+   * Used to get dynamic titles without setTimeout hack
+   */
+  currentPageTitle: string;
+  /**
+   * Current position in history (-1 means empty)
+   */
+  historyCurrentIndex: number;
+  /**
+   * History entries list
+   */
+  historyEntries: HistoryEntry[];
+  /**
+   * Flag to indicate if currently navigating via back/forward
+   * Used to prevent adding duplicate history entries
+   */
+  isNavigatingHistory: boolean;
+}
+
+// ======== Action Interface ======== //
+
+export interface NavigationHistoryAction {
+  /**
+   * Check if can go back in history
+   */
+  canGoBack: () => boolean;
+
+  /**
+   * Check if can go forward in history
+   */
+  canGoForward: () => boolean;
+
+  /**
+   * Get current history entry
+   */
+  getCurrentEntry: () => HistoryEntry | null;
+
+  /**
+   * Navigate back in history
+   * @returns The target entry or null if cannot go back
+   */
+  goBack: () => HistoryEntry | null;
+
+  /**
+   * Navigate forward in history
+   * @returns The target entry or null if cannot go forward
+   */
+  goForward: () => HistoryEntry | null;
+
+  /**
+   * Push a new entry to history (for normal navigation)
+   * Truncates any forward history if not at the end
+   */
+  pushHistory: (
+    entry: Omit<HistoryEntry, 'metadata'> & { metadata?: Partial<HistoryEntry['metadata']> },
+  ) => void;
+
+  /**
+   * Replace current entry in history (for replace navigation)
+   */
+  replaceHistory: (
+    entry: Omit<HistoryEntry, 'metadata'> & { metadata?: Partial<HistoryEntry['metadata']> },
+  ) => void;
+
+  /**
+   * Set current page title (called by PageTitle component)
+   */
+  setCurrentPageTitle: (title: string) => void;
+
+  /**
+   * Set the navigating history flag
+   */
+  setIsNavigatingHistory: (value: boolean) => void;
+}
+
+// ======== Initial State ======== //
+
+export const navigationHistoryInitialState: NavigationHistoryState = {
+  currentPageTitle: '',
+  historyCurrentIndex: -1,
+  historyEntries: [],
+  isNavigatingHistory: false,
+};
+
+// ======== Action Implementation ======== //
+
+export const createNavigationHistorySlice: StateCreator<
+  ElectronStore,
+  [['zustand/devtools', never]],
+  [],
+  NavigationHistoryAction
+> = (set, get) => ({
+  canGoBack: () => {
+    const { historyCurrentIndex } = get();
+    return historyCurrentIndex > 0;
+  },
+
+  canGoForward: () => {
+    const { historyCurrentIndex, historyEntries } = get();
+    return historyCurrentIndex < historyEntries.length - 1;
+  },
+
+  getCurrentEntry: () => {
+    const { historyCurrentIndex, historyEntries } = get();
+    if (historyCurrentIndex < 0 || historyCurrentIndex >= historyEntries.length) {
+      return null;
+    }
+    return historyEntries[historyCurrentIndex];
+  },
+
+  goBack: () => {
+    const { historyCurrentIndex, historyEntries } = get();
+
+    if (historyCurrentIndex <= 0) {
+      return null;
+    }
+
+    const newIndex = historyCurrentIndex - 1;
+    const targetEntry = historyEntries[newIndex];
+
+    set(
+      {
+        historyCurrentIndex: newIndex,
+        isNavigatingHistory: true,
+      },
+      false,
+      'goBack',
+    );
+
+    return targetEntry;
+  },
+
+  goForward: () => {
+    const { historyCurrentIndex, historyEntries } = get();
+
+    if (historyCurrentIndex >= historyEntries.length - 1) {
+      return null;
+    }
+
+    const newIndex = historyCurrentIndex + 1;
+    const targetEntry = historyEntries[newIndex];
+
+    set(
+      {
+        historyCurrentIndex: newIndex,
+        isNavigatingHistory: true,
+      },
+      false,
+      'goForward',
+    );
+
+    return targetEntry;
+  },
+
+  pushHistory: (entry) => {
+    const { historyCurrentIndex, historyEntries } = get();
+
+    // Create full entry with metadata
+    const fullEntry: HistoryEntry = {
+      icon: entry.icon,
+      metadata: {
+        timestamp: Date.now(),
+        ...entry.metadata,
+      },
+      title: entry.title,
+      url: entry.url,
+    };
+
+    // If not at the end, truncate forward history
+    const newEntries =
+      historyCurrentIndex < historyEntries.length - 1
+        ? historyEntries.slice(0, historyCurrentIndex + 1)
+        : [...historyEntries];
+
+    // Add new entry
+    newEntries.push(fullEntry);
+
+    set(
+      {
+        historyCurrentIndex: newEntries.length - 1,
+        historyEntries: newEntries,
+      },
+      false,
+      'pushHistory',
+    );
+  },
+
+  replaceHistory: (entry) => {
+    const { historyCurrentIndex, historyEntries } = get();
+
+    // If history is empty, just push
+    if (historyCurrentIndex < 0 || historyEntries.length === 0) {
+      get().pushHistory(entry);
+      return;
+    }
+
+    // Create full entry with metadata
+    const fullEntry: HistoryEntry = {
+      icon: entry.icon,
+      metadata: {
+        timestamp: Date.now(),
+        ...entry.metadata,
+      },
+      title: entry.title,
+      url: entry.url,
+    };
+
+    // Replace current entry
+    const newEntries = [...historyEntries];
+    newEntries[historyCurrentIndex] = fullEntry;
+
+    set(
+      {
+        historyEntries: newEntries,
+      },
+      false,
+      'replaceHistory',
+    );
+  },
+
+  setCurrentPageTitle: (title) => {
+    set({ currentPageTitle: title }, false, 'setCurrentPageTitle');
+  },
+
+  setIsNavigatingHistory: (value) => {
+    set({ isNavigatingHistory: value }, false, 'setIsNavigatingHistory');
+  },
+});

package/src/store/electron/initialState.ts

@@ -4,6 +4,11 @@ import {
   type NetworkProxySettings,
 } from '@lobechat/electron-client-ipc';
 
+import {
+  type NavigationHistoryState,
+  navigationHistoryInitialState,
+} from './actions/navigationHistory';
+
 export type RemoteServerError = 'CONFIG_ERROR' | 'AUTH_ERROR' | 'DISCONNECT_ERROR';
 
 export const defaultProxySettings: NetworkProxySettings = {
@@ -15,7 +20,7 @@ export const defaultProxySettings: NetworkProxySettings = {
   proxyType: 'http',
 };
 
-export interface ElectronState {
+export interface ElectronState extends NavigationHistoryState {
   appState: ElectronAppState;
   dataSyncConfig: DataSyncConfig;
   desktopHotkeys: Record<string, string>;
@@ -29,6 +34,7 @@ export interface ElectronState {
 }
 
 export const initialState: ElectronState = {
+  ...navigationHistoryInitialState,
   appState: {},
   dataSyncConfig: { storageMode: 'cloud' },
   desktopHotkeys: {},

package/src/store/electron/store.ts

@@ -4,6 +4,10 @@ import { type StateCreator } from 'zustand/vanilla';
 
 import { createDevtools } from '../middleware/createDevtools';
 import { type ElectronAppAction, createElectronAppSlice } from './actions/app';
+import {
+  type NavigationHistoryAction,
+  createNavigationHistorySlice,
+} from './actions/navigationHistory';
 import { type ElectronSettingsAction, settingsSlice } from './actions/settings';
 import { type ElectronRemoteServerAction, remoteSyncSlice } from './actions/sync';
 import { type ElectronState, initialState } from './initialState';
@@ -11,10 +15,12 @@ import { type ElectronState, initialState } from './initialState';
 //  ===============  Aggregate createStoreFn ============ //
 
 export interface ElectronStore
-  extends ElectronState,
+  extends
+    ElectronState,
     ElectronRemoteServerAction,
     ElectronAppAction,
-    ElectronSettingsAction {
+    ElectronSettingsAction,
+    NavigationHistoryAction {
   /* empty */
 }
 
@@ -25,6 +31,7 @@ const createStore: StateCreator<ElectronStore, [['zustand/devtools', never]]> =
   ...remoteSyncSlice(...parameters),
   ...createElectronAppSlice(...parameters),
   ...settingsSlice(...parameters),
+  ...createNavigationHistorySlice(...parameters),
 });
 
 //  ===============  Implement useStore ============ //

package/src/store/global/selectors/systemStatus.ts

@@ -30,7 +30,10 @@ const modelSwitchPanelWidth = (s: GlobalState) => s.status.modelSwitchPanelWidth
 
 const showChatHeader = (s: GlobalState) => !s.status.zenMode;
 const inZenMode = (s: GlobalState) => s.status.zenMode;
-const leftPanelWidth = (s: GlobalState) => s.status.leftPanelWidth;
+const leftPanelWidth = (s: GlobalState): number => {
+  const width = s.status.leftPanelWidth;
+  return typeof width === 'string' ? Number.parseInt(width) : width;
+};
 const portalWidth = (s: GlobalState) => s.status.portalWidth || 400;
 const filePanelWidth = (s: GlobalState) => s.status.filePanelWidth;
 const imagePanelWidth = (s: GlobalState) => s.status.imagePanelWidth;