From 9d2a193914f34536b787dfd0afcf2cf0f624eadf Mon Sep 17 00:00:00 2001
From: Meng Zhang <meng@tabbyml.com>
Date: Tue, 25 Jun 2024 19:07:22 +0800
Subject: [PATCH] fix(ui): fix useHash hook, do not use next/router (#2503)

* fix(ui): fix useHash hook, do not use next/router

* update

* update

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../app/files/components/chat-side-bar.tsx    |  2 +-
 ee/tabby-ui/lib/hooks/use-hash.ts             | 25 ++++++++++---------
 rules/do-not-use-next-pages.yml               |  8 ++++++
 3 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 rules/do-not-use-next-pages.yml

diff --git a/ee/tabby-ui/app/files/components/chat-side-bar.tsx b/ee/tabby-ui/app/files/components/chat-side-bar.tsx
index 0ea556616..cdd99bf3c 100644
--- a/ee/tabby-ui/app/files/components/chat-side-bar.tsx
+++ b/ee/tabby-ui/app/files/components/chat-side-bar.tsx
@@ -59,7 +59,7 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
             ),
             {
               hash: lineHash,
-              replace: true
+              replace: false
             }
           )
           return
diff --git a/ee/tabby-ui/lib/hooks/use-hash.ts b/ee/tabby-ui/lib/hooks/use-hash.ts
index c876f46a0..acdf1da05 100644
--- a/ee/tabby-ui/lib/hooks/use-hash.ts
+++ b/ee/tabby-ui/lib/hooks/use-hash.ts
@@ -1,9 +1,10 @@
 import React from 'react'
-import Router from 'next/router'
+import { useParams } from 'next/navigation'
 
 import { useLatest } from './use-latest'
 
 export function useHash(): [string, (hash: string) => void] {
+  const param = useParams()
   const [hash, setHash] = React.useState<string>('')
   const hashRef = useLatest(hash)
 
@@ -11,22 +12,22 @@ export function useHash(): [string, (hash: string) => void] {
     window.location.hash = hash
   }, [])
 
-  React.useEffect(() => {
-    const handleHashChange = () => {
-      const newHash = window.location.hash
-      if (hashRef.current !== newHash) {
-        setHash(newHash)
-      }
+  const handleHashChange = () => {
+    const newHash = window.location.hash
+    if (hashRef.current !== newHash) {
+      setHash(newHash)
     }
+  }
 
-    handleHashChange()
-
-    Router.events.on('hashChangeComplete', handleHashChange)
-
+  React.useEffect(() => {
+    window.addEventListener('hashchange', handleHashChange)
     return () => {
-      Router.events.off('hashChangeComplete', handleHashChange)
+      window.removeEventListener('hashchange', handleHashChange)
     }
   }, [])
 
+  // Handle hash changes from next/navigation
+  React.useEffect(handleHashChange, [param])
+
   return [hash, changeHash]
 }
diff --git a/rules/do-not-use-next-pages.yml b/rules/do-not-use-next-pages.yml
new file mode 100644
index 000000000..c3e700f87
--- /dev/null
+++ b/rules/do-not-use-next-pages.yml
@@ -0,0 +1,8 @@
+id: do-not-use-next-pages
+message: Don't use next pages routing as we're fully commited to app router.
+severity: error
+language: typescript
+files:
+- ./ee/tabby-ui/**
+rule:
+  pattern: import $$$ from 'next/router'
\ No newline at end of file