From da917e60124c79a87e41558bc6455a0e4a04033c Mon Sep 17 00:00:00 2001
From: BiggerRain <15911122312@163.COM>
Date: Tue, 10 Jun 2025 14:28:00 +0800
Subject: [PATCH] fix: web page unmount event (#645)

* fix: web page unmont event

* docs: update notes
---
 docs/content.en/docs/release-notes/_index.md |   1 +
 src/components/Search/ContextMenu.tsx        |   4 +-
 src/components/Search/DropdownList.tsx       |  14 +-
 src/components/Search/InputBox.tsx           |   1 -
 src/components/Search/Search.tsx             |   5 +-
 src/components/SearchChat/index.tsx          |   4 -
 src/hooks/useKeyboardNavigation.ts           |   6 +-
 src/pages/main/index.tsx                     |  10 +-
 src/pages/web/README.md                      | 231 ++++++++++---------
 src/pages/web/index.tsx                      |   4 +-
 10 files changed, 144 insertions(+), 136 deletions(-)

diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
index 6c5344d1..97f353ac 100644
--- a/docs/content.en/docs/release-notes/_index.md
+++ b/docs/content.en/docs/release-notes/_index.md
@@ -34,6 +34,7 @@ Information about release notes of Coco Server is provided here.
 - fix: tab key hides window in chat mode #641
 - fix: arrow keys still navigated search when menu opened with Cmd+K #642
 - fix: input lost when reopening dialog after search #644
+- fix: web page unmount event #645
 
 ### ✈️ Improvements
 
diff --git a/src/components/Search/ContextMenu.tsx b/src/components/Search/ContextMenu.tsx
index 42cebe8d..da6888db 100644
--- a/src/components/Search/ContextMenu.tsx
+++ b/src/components/Search/ContextMenu.tsx
@@ -19,9 +19,7 @@ interface State {
   activeMenuIndex: number;
 }
 
-interface ContextMenuProps {
-  hideCoco?: () => void;
-}
+interface ContextMenuProps {}
 
 const ContextMenu: FC<ContextMenuProps> = () => {
   const containerRef = useRef<HTMLDivElement>(null);
diff --git a/src/components/Search/DropdownList.tsx b/src/components/Search/DropdownList.tsx
index a931fae1..1a9d8039 100644
--- a/src/components/Search/DropdownList.tsx
+++ b/src/components/Search/DropdownList.tsx
@@ -6,7 +6,7 @@ import {
   MouseEvent,
   useMemo,
 } from "react";
-import { useDebounceFn, useUnmount } from "ahooks";
+import { useDebounceFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 
 import { useSearchStore } from "@/stores/searchStore";
@@ -98,11 +98,6 @@ function DropdownList({
     };
   }, []);
 
-  useUnmount(() => {
-    setSelectedIndex(null);
-    setSelectedSearchContent(undefined);
-  });
-
   useEffect(() => {
     if (selectedIndex === null) {
       setSelectedSearchContent(undefined);
@@ -150,6 +145,13 @@ function DropdownList({
     initializeSelection();
   }, [searchData]);
 
+  useEffect(() => {
+    return () => {
+      setSelectedIndex(null);
+      setSelectedSearchContent(undefined);
+    };
+  }, []);
+
   // Keyboard navigation
   useKeyboardNavigation({
     suggests,
diff --git a/src/components/Search/InputBox.tsx b/src/components/Search/InputBox.tsx
index 723c5009..e4853424 100644
--- a/src/components/Search/InputBox.tsx
+++ b/src/components/Search/InputBox.tsx
@@ -46,7 +46,6 @@ interface ChatInputProps {
   }) => Promise<string | string[] | null>;
   getFileMetadata: (path: string) => Promise<any>;
   getFileIcon: (path: string, size: number) => Promise<string>;
-  hideCoco?: () => void;
   hasModules?: string[];
   searchPlaceholder?: string;
   chatPlaceholder?: string;
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 841509d5..06035ca3 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -54,11 +54,10 @@ interface SearchProps {
   changeInput: (val: string) => void;
   isChatMode: boolean;
   input: string;
-  hideCoco?: () => void;
   setIsPinned?: (value: boolean) => void;
 }
 
-function Search({ isChatMode, input, hideCoco, setIsPinned }: SearchProps) {
+function Search({ isChatMode, input, setIsPinned }: SearchProps) {
   const mainWindowRef = useRef<HTMLDivElement>(null);
 
   return (
@@ -67,7 +66,7 @@ function Search({ isChatMode, input, hideCoco, setIsPinned }: SearchProps) {
 
       <Footer setIsPinnedWeb={setIsPinned} />
 
-      <ContextMenu hideCoco={hideCoco} />
+      <ContextMenu />
     </div>
   );
 }
diff --git a/src/components/SearchChat/index.tsx b/src/components/SearchChat/index.tsx
index a76fccac..a2660ae0 100644
--- a/src/components/SearchChat/index.tsx
+++ b/src/components/SearchChat/index.tsx
@@ -36,7 +36,6 @@ interface SearchChatProps {
   searchPlaceholder?: string;
   chatPlaceholder?: string;
 
-  hideCoco?: () => void;
   setIsPinned?: (value: boolean) => void;
   onModeChange?: (isChatMode: boolean) => void;
   isMobile?: boolean;
@@ -49,7 +48,6 @@ function SearchChat({
   hasModules = ["search", "chat"],
   defaultModule = "search",
   theme,
-  hideCoco,
   searchPlaceholder,
   chatPlaceholder,
   showChatHistory = true,
@@ -317,7 +315,6 @@ function SearchChat({
           hasModules={hasModules}
           searchPlaceholder={searchPlaceholder}
           chatPlaceholder={chatPlaceholder}
-          hideCoco={hideCoco}
         />
       </div>
 
@@ -332,7 +329,6 @@ function SearchChat({
               input={input}
               isChatMode={isChatMode}
               changeInput={setInput}
-              hideCoco={hideCoco}
               setIsPinned={setIsPinned}
             />
           </Suspense>
diff --git a/src/hooks/useKeyboardNavigation.ts b/src/hooks/useKeyboardNavigation.ts
index d3854ab8..116a25e5 100644
--- a/src/hooks/useKeyboardNavigation.ts
+++ b/src/hooks/useKeyboardNavigation.ts
@@ -37,7 +37,7 @@ export function useKeyboardNavigation({
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if (!suggests.length || openPopover || visibleContextMenu) return;
+      if (isChatMode || !suggests.length || openPopover || visibleContextMenu) return;
 
       if (e.key === "ArrowUp") {
         e.preventDefault();
@@ -112,7 +112,7 @@ export function useKeyboardNavigation({
 
   const handleKeyUp = useCallback(
     (e: KeyboardEvent) => {
-      if (!suggests.length) return;
+      if (isChatMode || !suggests.length) return;
 
       if (!isMetaOrCtrlKey(e)) {
         setShowIndex(false);
@@ -122,8 +122,6 @@ export function useKeyboardNavigation({
   );
 
   useEffect(() => {
-    if (isChatMode) return;
-
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
 
diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
index 607888cc..0c8c273c 100644
--- a/src/pages/main/index.tsx
+++ b/src/pages/main/index.tsx
@@ -15,10 +15,6 @@ function MainApp() {
     setIsTauri(true);
   }, []);
 
-  const hideCoco = useCallback(() => {
-    return platformAdapter.hideWindow();
-  }, []);
-
   useSyncStore();
 
   const snapshotUpdate = useAppearanceStore((state) => state.snapshotUpdate);
@@ -41,11 +37,7 @@ function MainApp() {
 
   return (
     <>
-      <SearchChat
-        isTauri={true}
-        hideCoco={hideCoco}
-        hasModules={["search", "chat"]}
-      />
+      <SearchChat isTauri={true} hasModules={["search", "chat"]} />
       <UpdateApp checkUpdate={checkUpdate} relaunchApp={relaunchApp} />
     </>
   );
diff --git a/src/pages/web/README.md b/src/pages/web/README.md
index 80b3b20c..9f4b740f 100644
--- a/src/pages/web/README.md
+++ b/src/pages/web/README.md
@@ -1,118 +1,143 @@
 # SearchChat Web Component API
 
-## Props
+A customizable search and chat interface component for web applications.
 
-### `serverUrl`
-- **Type**: `string`
-- **Optional**: Yes
-- **Default**: `""`
-- **Description**: Set the server address
+## Installation
 
-### `headers`
-- **Type**: `Record<string, unknown>`
-- **Optional**: Yes
-- **Default**: `{}`
-- **Description**: Request header configuration for API calls, such as X-API-TOKEN and APP-INTEGRATION-ID
+```bash
+npm install @infini/coco-app
+```
 
-### `width`
-- **Type**: `number`
-- **Optional**: Yes
-- **Default**: `680`
-- **Description**: Width of the component container in pixels
+## Basic Usage
 
-### `height`
-- **Type**: `number`
-- **Optional**: Yes
-- **Default**: `590`
-- **Description**: Height of the component container in pixels. On mobile devices, it automatically adapts to the viewport height
-
-### `hasModules`
-- **Type**: `string[]`
-- **Optional**: Yes
-- **Default**: `['search', 'chat']`
-- **Description**: List of enabled feature modules, currently supports 'search' and 'chat' modules
-
-### `defaultModule`
-- **Type**: `'search' | 'chat'`
-- **Optional**: Yes
-- **Default**: `'search'`
-- **Description**: The default module to display
-
-### `assistantIDs`
-- **Type**: `string[]`
-- **Optional**: Yes
-- **Default**: `[]`
-- **Description**: List of available assistant IDs
-
-### `hideCoco`
-- **Type**: `() => void`
-- **Optional**: Yes
-- **Default**: `() => {}`
-- **Description**: Callback function to hide the search window
-
-### `theme`
-- **Type**: `"auto" | "light" | "dark"`
-- **Optional**: Yes
-- **Default**: `"dark"`
-- **Description**: Theme setting, supports auto (follows system), light, and dark modes
-
-### `searchPlaceholder`
-- **Type**: `string`
-- **Optional**: Yes
-- **Default**: `""`
-- **Description**: Placeholder text for the search input
-
-### `chatPlaceholder`
-- **Type**: `string`
-- **Optional**: Yes
-- **Default**: `""`
-- **Description**: Placeholder text for the chat input
-
-### `showChatHistory`
-- **Type**: `boolean`
-- **Optional**: Yes
-- **Default**: `false`
-- **Description**: Whether to display chat history
-
-### `setIsPinned`
-- **Type**: `(value: boolean) => void`
-- **Optional**: Yes
-- **Default**: `undefined`
-- **Description**: Callback function to set window pin status
-
-### `onCancel`
-- **Type**: `() => void`
-- **Optional**: Yes
-- **Default**: `undefined`
-- **Description**: Callback function for clicking the close button on mobile devices
-
-## Usage Example
-
-```tsx
-import SearchChat from 'search-chat';
+```jsx
+import SearchChat from '@infini/coco-app';
 
 function App() {
   return (
-    <SearchChat
-      serverUrl=""
+    <SearchChat 
+      serverUrl="https://your-server.com"
       headers={{
-        "X-API-TOKEN": "your-api-token",
-        "APP-INTEGRATION-ID": "your-integration-id"
+        "X-API-TOKEN": "your-token",
+        "APP-INTEGRATION-ID": "your-app-id"
       }}
-      width={680}
-      height={590}
-      hasModules={['search', 'chat']}
-      defaultModule="search"
-      assistantIDs={[]}
-      hideCoco={() => console.log('hide')}
-      theme="dark"
-      searchPlaceholder=""
-      chatPlaceholder=""
-      showChatHistory={false}
-      setIsPinned={(isPinned) => console.log('isPinned:', isPinned)}
-      onCancel={() => console.log('cancel')}
     />
   );
 }
 ```
-        
\ No newline at end of file
+
+## Props
+
+### `width`
+- **Type**: `number`
+- **Default**: `680`
+- **Description**: Maximum width of the component in pixels
+
+### `height`
+- **Type**: `number`
+- **Default**: `590`
+- **Description**: Height of the component in pixels
+
+### `headers`
+- **Type**: `Record<string, unknown>`
+- **Default**: 
+```typescript
+{
+  "X-API-TOKEN": "default-token",
+  "APP-INTEGRATION-ID": "default-id"
+}
+```
+- **Description**: HTTP headers for API requests
+
+### `serverUrl`
+- **Type**: `string`
+- **Default**: `""`
+- **Description**: Base URL for the server API
+
+### `hasModules`
+- **Type**: `string[]`
+- **Default**: `["search", "chat"]`
+- **Description**: Available modules to show
+
+### `defaultModule`
+- **Type**: `"search" | "chat"`
+- **Default**: `"search"`
+- **Description**: Initial active module
+
+### `assistantIDs`
+- **Type**: `string[]`
+- **Default**: `[]`
+- **Description**: List of assistant IDs to use
+
+### `theme`
+- **Type**: `"auto" | "light" | "dark"`
+- **Default**: `"dark"`
+- **Description**: UI theme setting
+
+### `searchPlaceholder`
+- **Type**: `string`
+- **Default**: `""`
+- **Description**: Placeholder text for search input
+
+### `chatPlaceholder`
+- **Type**: `string`
+- **Default**: `""`
+- **Description**: Placeholder text for chat input
+
+### `showChatHistory`
+- **Type**: `boolean`
+- **Default**: `false`
+- **Description**: Whether to display chat history panel
+
+### `startPage`
+- **Type**: `StartPage`
+- **Optional**: Yes
+- **Description**: Initial page configuration
+
+### `setIsPinned`
+- **Type**: `(value: boolean) => void`
+- **Optional**: Yes
+- **Description**: Callback when pin status changes
+
+### `onCancel`
+- **Type**: `() => void`
+- **Optional**: Yes
+- **Description**: Callback when close button is clicked (mobile only)
+
+### `isOpen`
+- **Type**: `boolean`
+- **Optional**: Yes
+- **Description**: Control component visibility
+
+## Events
+
+The component emits the following events:
+
+- `onModeChange`: Triggered when switching between search and chat modes
+- `onCancel`: Triggered when the close button is clicked (mobile only)
+
+## Mobile Support
+
+The component is responsive and includes mobile-specific features:
+- Automatic height adjustment
+- Close button in top-right corner
+- Touch-friendly interface
+
+## Example
+
+```jsx
+<SearchChat
+  width={800}
+  height={600}
+  serverUrl="https://api.example.com"
+  headers={{
+    "X-API-TOKEN": "your-token",
+    "APP-INTEGRATION-ID": "your-app-id"
+  }}
+  theme="dark"
+  showChatHistory={true}
+  hasModules={["search", "chat"]}
+  defaultModule="chat"
+  setIsPinned={(isPinned) => console.log('Pinned:', isPinned)}
+/>
+```
\ No newline at end of file
diff --git a/src/pages/web/index.tsx b/src/pages/web/index.tsx
index b3577384..a17b8a3a 100644
--- a/src/pages/web/index.tsx
+++ b/src/pages/web/index.tsx
@@ -21,7 +21,6 @@ interface WebAppProps {
   hasModules?: string[];
   defaultModule?: "search" | "chat";
   assistantIDs?: string[];
-  hideCoco?: () => void;
   theme?: "auto" | "light" | "dark";
   searchPlaceholder?: string;
   chatPlaceholder?: string;
@@ -29,6 +28,7 @@ interface WebAppProps {
   startPage?: StartPage;
   setIsPinned?: (value: boolean) => void;
   onCancel?: () => void;
+  isOpen?: boolean;
 }
 
 function WebApp({
@@ -43,7 +43,6 @@ function WebApp({
   // token = "cvqt6r02sdb2v3bkgip0x3ixv01f3r2lhnxoz1efbn160wm9og58wtv8t6wrv1ebvnvypuc23dx9pb33aemh",  // http://localhost:9000
   // token = "cv5djeb9om602jdvtnmg6kc1muyn2vcadr6te48j9t9pvt59ewrnwj7fwvxrw3va84j2a0lb5y8194fbr3jd",  // http://43.153.113.88:9000
   serverUrl = "",
-  hideCoco = () => {},
   hasModules = ["search", "chat"],
   defaultModule = "search",
   assistantIDs = [],
@@ -110,7 +109,6 @@ function WebApp({
       )}
       <SearchChat
         isTauri={false}
-        hideCoco={hideCoco}
         hasModules={hasModules}
         defaultModule={defaultModule}
         theme={theme}