@nextclaw/ui 0.5.37 → 0.5.38

package/src/components/doc-browser/DocBrowserContext.tsx

@@ -4,203 +4,435 @@ import { getLanguage, type I18nLanguage } from '@/lib/i18n';
 const DOCS_PRIMARY_DOMAIN = 'docs.nextclaw.io';
 const DOCS_PAGES_DEV = 'nextclaw-docs.pages.dev';
 const DOCS_HOSTS = new Set([
-    DOCS_PRIMARY_DOMAIN,
-    `www.${DOCS_PRIMARY_DOMAIN}`,
-    DOCS_PAGES_DEV,
-    `www.${DOCS_PAGES_DEV}`,
+  DOCS_PRIMARY_DOMAIN,
+  `www.${DOCS_PRIMARY_DOMAIN}`,
+  DOCS_PAGES_DEV,
+  `www.${DOCS_PAGES_DEV}`,
 ]);
 
 export const DOCS_DEFAULT_BASE_URL = `https://${DOCS_PRIMARY_DOMAIN}`;
 const DOCS_DEFAULT_GUIDE_PATH = '/guide/getting-started';
 
 export type DocBrowserMode = 'floating' | 'docked';
+export type DocBrowserTabKind = 'docs' | 'content';
+
+export type DocBrowserTab = {
+  id: string;
+  kind: DocBrowserTabKind;
+  title: string;
+  currentUrl: string;
+  history: string[];
+  historyIndex: number;
+  /** Increments on parent-initiated navigation to trigger iframe remount */
+  navVersion: number;
+};
+
+export type DocBrowserOpenOptions = {
+  newTab?: boolean;
+  title?: string;
+  kind?: DocBrowserTabKind;
+};
+
+type DocBrowserState = {
+  isOpen: boolean;
+  mode: DocBrowserMode;
+  tabs: DocBrowserTab[];
+  activeTabId: string;
+};
+
+interface DocBrowserActions {
+  open: (url?: string, options?: DocBrowserOpenOptions) => void;
+  close: () => void;
+  toggleMode: () => void;
+  setMode: (mode: DocBrowserMode) => void;
+  navigate: (url: string) => void;
+  syncUrl: (url: string) => void;
+  goBack: () => void;
+  goForward: () => void;
+  openNewTab: (url?: string, options?: Omit<DocBrowserOpenOptions, 'newTab'>) => void;
+  closeTab: (tabId: string) => void;
+  setActiveTab: (tabId: string) => void;
+  canGoBack: boolean;
+  canGoForward: boolean;
+}
+
+type DocBrowserContextValue = DocBrowserState & DocBrowserActions & {
+  currentUrl: string;
+  currentTab?: DocBrowserTab;
+  navVersion: number;
+};
+
+const DocBrowserContext = createContext<DocBrowserContextValue | null>(null);
+
+let tabCounter = 0;
+
+function nextTabId(): string {
+  tabCounter += 1;
+  return `doc-tab-${Date.now()}-${tabCounter}`;
+}
 
 /** Normalize URL for comparison: strip .html and trailing slash */
 function normalizeDocUrl(u: string): string {
-    try { return new URL(u).pathname.replace(/\.html$/, '').replace(/\/$/, ''); } catch { return u; }
+  try {
+    return new URL(u).pathname.replace(/\.html$/, '').replace(/\/$/, '');
+  } catch {
+    return u;
+  }
 }
 
 function toDocsLocale(language: I18nLanguage): 'en' | 'zh' {
-    return language === 'zh' ? 'zh' : 'en';
+  return language === 'zh' ? 'zh' : 'en';
 }
 
 function ensureLocalizedDocsPath(pathname: string, locale: 'en' | 'zh'): string {
-    const normalized = pathname.startsWith('/') ? pathname : `/${pathname}`;
+  const normalized = pathname.startsWith('/') ? pathname : `/${pathname}`;
 
-    if (normalized === '/' || normalized === '') {
-        return `/${locale}/`;
-    }
+  if (normalized === '/' || normalized === '') {
+    return `/${locale}/`;
+  }
 
-    if (/^\/(en|zh)(\/|$)/.test(normalized)) {
-        return normalized;
-    }
+  if (/^\/(en|zh)(\/|$)/.test(normalized)) {
+    return normalized;
+  }
 
-    return `/${locale}${normalized}`;
+  return `/${locale}${normalized}`;
 }
 
 function resolveLocalizedDocsUrl(url: string): string {
-    const locale = toDocsLocale(getLanguage());
+  const locale = toDocsLocale(getLanguage());
 
-    try {
-        const parsed = new URL(url, DOCS_DEFAULT_BASE_URL);
-        if (!DOCS_HOSTS.has(parsed.hostname)) {
-            return parsed.toString();
-        }
-
-        parsed.pathname = ensureLocalizedDocsPath(parsed.pathname, locale);
-        return parsed.toString();
-    } catch {
-        return new URL(`/${locale}${DOCS_DEFAULT_GUIDE_PATH}`, DOCS_DEFAULT_BASE_URL).toString();
+  try {
+    const parsed = new URL(url, DOCS_DEFAULT_BASE_URL);
+    if (!DOCS_HOSTS.has(parsed.hostname)) {
+      return parsed.toString();
     }
+
+    parsed.pathname = ensureLocalizedDocsPath(parsed.pathname, locale);
+    return parsed.toString();
+  } catch {
+    return new URL(`/${locale}${DOCS_DEFAULT_GUIDE_PATH}`, DOCS_DEFAULT_BASE_URL).toString();
+  }
 }
 
 function getDefaultDocsUrl(): string {
-    return resolveLocalizedDocsUrl(DOCS_DEFAULT_GUIDE_PATH);
+  return resolveLocalizedDocsUrl(DOCS_DEFAULT_GUIDE_PATH);
 }
 
-interface DocBrowserState {
-    isOpen: boolean;
-    mode: DocBrowserMode;
-    currentUrl: string;
-    history: string[];
-    historyIndex: number;
-    /** Increments on parent-initiated navigation (navigate/goBack/goForward) */
-    navVersion: number;
+function inferTabTitle(url: string, kind: DocBrowserTabKind, fallback = 'Docs'): string {
+  try {
+    const parsed = new URL(url, DOCS_DEFAULT_BASE_URL);
+    if (parsed.protocol === 'data:') {
+      return kind === 'docs' ? fallback : 'Detail';
+    }
+
+    const segments = parsed.pathname.split('/').filter(Boolean);
+    const leaf = segments[segments.length - 1] ?? fallback;
+    return decodeURIComponent(leaf).replace(/[-_]/g, ' ').slice(0, 40) || fallback;
+  } catch {
+    return fallback;
+  }
 }
 
-interface DocBrowserActions {
-    open: (url?: string) => void;
-    close: () => void;
-    toggleMode: () => void;
-    setMode: (mode: DocBrowserMode) => void;
-    /** Parent-initiated navigation — will cause iframe to reload to this URL */
-    navigate: (url: string) => void;
-    /** Iframe-initiated sync — records URL to history without reloading iframe */
-    syncUrl: (url: string) => void;
-    goBack: () => void;
-    goForward: () => void;
-    canGoBack: boolean;
-    canGoForward: boolean;
-}
-
-type DocBrowserContextValue = DocBrowserState & DocBrowserActions;
+function createTab(url: string, kind: DocBrowserTabKind, title?: string): DocBrowserTab {
+  const tabTitle = title?.trim() || inferTabTitle(url, kind, kind === 'docs' ? 'Docs' : 'Detail');
 
-const DocBrowserContext = createContext<DocBrowserContextValue | null>(null);
+  return {
+    id: nextTabId(),
+    kind,
+    title: tabTitle,
+    currentUrl: url,
+    history: [url],
+    historyIndex: 0,
+    navVersion: 0,
+  };
+}
+
+function updateActiveTab(state: DocBrowserState, updater: (tab: DocBrowserTab) => DocBrowserTab): DocBrowserState {
+  return {
+    ...state,
+    tabs: state.tabs.map((tab) => (tab.id === state.activeTabId ? updater(tab) : tab)),
+  };
+}
 
 export function useDocBrowser(): DocBrowserContextValue {
-    const ctx = useContext(DocBrowserContext);
-    if (!ctx) throw new Error('useDocBrowser must be used within DocBrowserProvider');
-    return ctx;
+  const ctx = useContext(DocBrowserContext);
+  if (!ctx) throw new Error('useDocBrowser must be used within DocBrowserProvider');
+  return ctx;
 }
 
 /** Check if a URL belongs to the docs domain */
 export function isDocsUrl(url: string): boolean {
-    try {
-        const parsed = new URL(url, window.location.origin);
-        return DOCS_HOSTS.has(parsed.hostname);
-    } catch {
-        return false;
-    }
+  try {
+    const parsed = new URL(url, window.location.origin);
+    return DOCS_HOSTS.has(parsed.hostname);
+  } catch {
+    return false;
+  }
+}
+
+function inferTabKind(url: string): DocBrowserTabKind {
+  return isDocsUrl(url) ? 'docs' : 'content';
+}
+
+function normalizeUrlByKind(url: string, kind: DocBrowserTabKind): string {
+  if (kind === 'docs') {
+    return resolveLocalizedDocsUrl(url);
+  }
+  return url;
+}
+
+function resolveOpenTargetUrl(params: {
+  url?: string;
+  kind: DocBrowserTabKind;
+  activeTab?: DocBrowserTab;
+}): string {
+  if (params.url && params.url.trim().length > 0) {
+    return normalizeUrlByKind(params.url, params.kind);
+  }
+
+  if (params.kind === 'docs') {
+    return getDefaultDocsUrl();
+  }
+
+  return params.activeTab?.currentUrl ?? getDefaultDocsUrl();
 }
 
 export function DocBrowserProvider({ children }: { children: ReactNode }) {
-    const [state, setState] = useState<DocBrowserState>({
-        isOpen: false,
-        mode: 'docked',
-        currentUrl: getDefaultDocsUrl(),
-        history: [getDefaultDocsUrl()],
-        historyIndex: 0,
-        navVersion: 0,
+  const initialUrl = getDefaultDocsUrl();
+  const initialTab = createTab(initialUrl, 'docs', 'Docs');
+
+  const [state, setState] = useState<DocBrowserState>({
+    isOpen: false,
+    mode: 'docked',
+    tabs: [initialTab],
+    activeTabId: initialTab.id,
+  });
+
+  const currentTab = useMemo(() => {
+    return state.tabs.find((tab) => tab.id === state.activeTabId) ?? state.tabs[0];
+  }, [state.tabs, state.activeTabId]);
+
+  const open = useCallback((url?: string, options?: DocBrowserOpenOptions) => {
+    setState((prev) => {
+      const activeTab = prev.tabs.find((tab) => tab.id === prev.activeTabId) ?? prev.tabs[0];
+      const targetKind = options?.kind ?? (url ? inferTabKind(url) : activeTab?.kind ?? 'docs');
+      const targetUrl = resolveOpenTargetUrl({
+        url,
+        kind: targetKind,
+        activeTab
+      });
+
+      const shouldOpenNewTab = Boolean(options?.newTab || !activeTab || activeTab.kind !== targetKind);
+
+      if (shouldOpenNewTab) {
+        const newTab = createTab(targetUrl, targetKind, options?.title);
+        return {
+          ...prev,
+          isOpen: true,
+          tabs: [...prev.tabs, newTab],
+          activeTabId: newTab.id,
+        };
+      }
+
+      const next = updateActiveTab(prev, (tab) => {
+        if (normalizeDocUrl(targetUrl) === normalizeDocUrl(tab.currentUrl)) {
+          return options?.title ? { ...tab, title: options.title } : tab;
+        }
+
+        return {
+          ...tab,
+          title: options?.title || tab.title,
+          kind: targetKind,
+          currentUrl: targetUrl,
+          history: [...tab.history.slice(0, tab.historyIndex + 1), targetUrl],
+          historyIndex: tab.historyIndex + 1,
+          navVersion: tab.navVersion + 1,
+        };
+      });
+
+      return {
+        ...next,
+        isOpen: true,
+      };
+    });
+  }, []);
+
+  const close = useCallback(() => {
+    setState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+
+  const toggleMode = useCallback(() => {
+    setState((prev) => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
+  }, []);
+
+  const setMode = useCallback((mode: DocBrowserMode) => {
+    setState((prev) => ({ ...prev, mode }));
+  }, []);
+
+  const navigate = useCallback((url: string) => {
+    setState((prev) => {
+      if (!prev.tabs.length) {
+        const fallbackTab = createTab(getDefaultDocsUrl(), 'docs', 'Docs');
+        return {
+          ...prev,
+          tabs: [fallbackTab],
+          activeTabId: fallbackTab.id,
+          isOpen: true,
+        };
+      }
+
+      return updateActiveTab(prev, (tab) => {
+        if (tab.kind !== 'docs') {
+          return tab;
+        }
+
+        const targetUrl = normalizeUrlByKind(url, 'docs');
+        if (normalizeDocUrl(targetUrl) === normalizeDocUrl(tab.currentUrl)) {
+          return tab;
+        }
+
+        return {
+          ...tab,
+          currentUrl: targetUrl,
+          history: [...tab.history.slice(0, tab.historyIndex + 1), targetUrl],
+          historyIndex: tab.historyIndex + 1,
+          navVersion: tab.navVersion + 1,
+        };
+      });
     });
+  }, []);
+
+  const syncUrl = useCallback((url: string) => {
+    setState((prev) => {
+      if (!prev.tabs.length) {
+        const fallbackTab = createTab(getDefaultDocsUrl(), 'docs', 'Docs');
+        return {
+          ...prev,
+          tabs: [fallbackTab],
+          activeTabId: fallbackTab.id,
+        };
+      }
+
+      return updateActiveTab(prev, (tab) => {
+        if (tab.kind !== 'docs') {
+          return tab;
+        }
+
+        if (normalizeDocUrl(url) === normalizeDocUrl(tab.currentUrl)) {
+          return tab;
+        }
+
+        return {
+          ...tab,
+          currentUrl: url,
+          history: [...tab.history.slice(0, tab.historyIndex + 1), url],
+          historyIndex: tab.historyIndex + 1,
+        };
+      });
+    });
+  }, []);
+
+  const goBack = useCallback(() => {
+    setState((prev) => updateActiveTab(prev, (tab) => {
+      if (tab.kind !== 'docs' || tab.historyIndex <= 0) return tab;
+      const newIndex = tab.historyIndex - 1;
+      return { ...tab, historyIndex: newIndex, currentUrl: tab.history[newIndex] };
+    }));
+  }, []);
+
+  const goForward = useCallback(() => {
+    setState((prev) => updateActiveTab(prev, (tab) => {
+      if (tab.kind !== 'docs' || tab.historyIndex >= tab.history.length - 1) return tab;
+      const newIndex = tab.historyIndex + 1;
+      return { ...tab, historyIndex: newIndex, currentUrl: tab.history[newIndex] };
+    }));
+  }, []);
+
+  const openNewTab = useCallback((url?: string, options?: Omit<DocBrowserOpenOptions, 'newTab'>) => {
+    open(url, { ...(options ?? {}), newTab: true });
+  }, [open]);
+
+  const closeTab = useCallback((tabId: string) => {
+    setState((prev) => {
+      if (prev.tabs.length <= 1) {
+        const fallbackTab = createTab(getDefaultDocsUrl(), 'docs', 'Docs');
+        return {
+          ...prev,
+          isOpen: false,
+          tabs: [fallbackTab],
+          activeTabId: fallbackTab.id,
+        };
+      }
+
+      const index = prev.tabs.findIndex((tab) => tab.id === tabId);
+      if (index < 0) {
+        return prev;
+      }
+
+      const nextTabs = prev.tabs.filter((tab) => tab.id !== tabId);
+      const nextActiveId = prev.activeTabId === tabId
+        ? nextTabs[Math.max(0, index - 1)]?.id ?? nextTabs[0].id
+        : prev.activeTabId;
+
+      return {
+        ...prev,
+        tabs: nextTabs,
+        activeTabId: nextActiveId,
+      };
+    });
+  }, []);
+
+  const setActiveTab = useCallback((tabId: string) => {
+    setState((prev) => {
+      if (!prev.tabs.some((tab) => tab.id === tabId)) {
+        return prev;
+      }
+      return { ...prev, activeTabId: tabId, isOpen: true };
+    });
+  }, []);
+
+  const canGoBack = Boolean(currentTab && currentTab.kind === 'docs' && currentTab.historyIndex > 0);
+  const canGoForward = Boolean(currentTab && currentTab.kind === 'docs' && currentTab.historyIndex < currentTab.history.length - 1);
+
+  const value = useMemo<DocBrowserContextValue>(() => ({
+    ...state,
+    currentTab,
+    currentUrl: currentTab?.currentUrl ?? getDefaultDocsUrl(),
+    navVersion: currentTab?.navVersion ?? 0,
+    open,
+    close,
+    toggleMode,
+    setMode,
+    navigate,
+    syncUrl,
+    goBack,
+    goForward,
+    openNewTab,
+    closeTab,
+    setActiveTab,
+    canGoBack,
+    canGoForward,
+  }), [
+    state,
+    currentTab,
+    open,
+    close,
+    toggleMode,
+    setMode,
+    navigate,
+    syncUrl,
+    goBack,
+    goForward,
+    openNewTab,
+    closeTab,
+    setActiveTab,
+    canGoBack,
+    canGoForward,
+  ]);
 
-    const open = useCallback((url?: string) => {
-        const targetUrl = resolveLocalizedDocsUrl(url || state.currentUrl || getDefaultDocsUrl());
-        setState(prev => ({
-            ...prev,
-            isOpen: true,
-            currentUrl: targetUrl,
-            history: [...prev.history.slice(0, prev.historyIndex + 1), targetUrl],
-            historyIndex: prev.historyIndex + 1,
-            navVersion: prev.navVersion + 1,
-        }));
-    }, [state.currentUrl]);
-
-    const close = useCallback(() => {
-        setState(prev => ({ ...prev, isOpen: false }));
-    }, []);
-
-    const toggleMode = useCallback(() => {
-        setState(prev => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
-    }, []);
-
-    const setMode = useCallback((mode: DocBrowserMode) => {
-        setState(prev => ({ ...prev, mode }));
-    }, []);
-
-    /** Parent-initiated: push to history AND bump navVersion so iframe reloads */
-    const navigate = useCallback((url: string) => {
-        const targetUrl = resolveLocalizedDocsUrl(url);
-        setState(prev => {
-            if (normalizeDocUrl(targetUrl) === normalizeDocUrl(prev.currentUrl)) return prev;
-            return {
-                ...prev,
-                currentUrl: targetUrl,
-                history: [...prev.history.slice(0, prev.historyIndex + 1), targetUrl],
-                historyIndex: prev.historyIndex + 1,
-                navVersion: prev.navVersion + 1,
-            };
-        });
-    }, []);
-
-    /** Iframe-initiated: push to history but do NOT bump navVersion (no iframe reload) */
-    const syncUrl = useCallback((url: string) => {
-        setState(prev => {
-            if (normalizeDocUrl(url) === normalizeDocUrl(prev.currentUrl)) return prev;
-            return {
-                ...prev,
-                currentUrl: url,
-                history: [...prev.history.slice(0, prev.historyIndex + 1), url],
-                historyIndex: prev.historyIndex + 1,
-            };
-        });
-    }, []);
-
-    const goBack = useCallback(() => {
-        setState(prev => {
-            if (prev.historyIndex <= 0) return prev;
-            const newIndex = prev.historyIndex - 1;
-            return { ...prev, historyIndex: newIndex, currentUrl: prev.history[newIndex] };
-        });
-    }, []);
-
-    const goForward = useCallback(() => {
-        setState(prev => {
-            if (prev.historyIndex >= prev.history.length - 1) return prev;
-            const newIndex = prev.historyIndex + 1;
-            return { ...prev, historyIndex: newIndex, currentUrl: prev.history[newIndex] };
-        });
-    }, []);
-
-    const canGoBack = state.historyIndex > 0;
-    const canGoForward = state.historyIndex < state.history.length - 1;
-
-    const value = useMemo<DocBrowserContextValue>(() => ({
-        ...state,
-        open,
-        close,
-        toggleMode,
-        setMode,
-        navigate,
-        syncUrl,
-        goBack,
-        goForward,
-        canGoBack,
-        canGoForward,
-    }), [state, open, close, toggleMode, setMode, navigate, syncUrl, goBack, goForward, canGoBack, canGoForward]);
-
-    return (
-        <DocBrowserContext.Provider value={value}>
-            {children}
-        </DocBrowserContext.Provider>
-    );
+  return (
+    <DocBrowserContext.Provider value={value}>
+      {children}
+    </DocBrowserContext.Provider>
+  );
 }

package/src/components/layout/Sidebar.tsx

@@ -167,7 +167,7 @@ export function Sidebar() {
           </Select>
         </div>
         <button
-          onClick={() => docBrowser.open()}
+          onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
           className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-800"
         >
           <BookOpen className="h-[17px] w-[17px] text-gray-400" />