From 4508c292ebaabb3dd195327f312b49f3388a12db Mon Sep 17 00:00:00 2001
From: BiggerRain <15911122312@163.COM>
Date: Sat, 26 Apr 2025 14:27:00 +0800
Subject: [PATCH] fix: Solves the issue of bottom toolbar overlapping content
 in mobile Safari (#448)

* style: adjust style

* fix: close Splash
---
 .env                                     |  4 ++-
 src/components/Assistant/Splash.tsx      |  3 ++-
 src/components/ChatMessage/CallTools.tsx | 28 +++++++++++++--------
 src/components/ChatMessage/markdown.css  | 28 +++++++++++++++++++--
 src/components/Search/InputBox.tsx       |  5 ----
 src/hooks/useChatActions.ts              |  7 ++++++
 src/hooks/useMessageHandler.ts           |  1 -
 src/hooks/useViewportHeight.ts           | 32 ++++++++++++++++++++++++
 src/hooks/useWebSocket.ts                |  4 +--
 src/pages/web/index.tsx                  |  9 ++++---
 src/web.css                              | 11 +++-----
 tsup.config.ts                           |  2 +-
 12 files changed, 99 insertions(+), 35 deletions(-)
 create mode 100644 src/hooks/useViewportHeight.ts

diff --git a/.env b/.env
index 066376a4..ea3e5ed7 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,5 @@
 COCO_SERVER_URL=http://localhost:9000 #https://coco.infini.cloud  #http://localhost:9000
 
-COCO_WEBSOCKET_URL=ws://localhost:9000/ws #wss://coco.infini.cloud/ws #ws://localhost:9000/ws
\ No newline at end of file
+COCO_WEBSOCKET_URL=ws://localhost:9000/ws #wss://coco.infini.cloud/ws #ws://localhost:9000/ws
+
+TAURI_DEV_HOST=0.0.0.0
\ No newline at end of file
diff --git a/src/components/Assistant/Splash.tsx b/src/components/Assistant/Splash.tsx
index 1529cb37..a916b5d4 100644
--- a/src/components/Assistant/Splash.tsx
+++ b/src/components/Assistant/Splash.tsx
@@ -1,7 +1,8 @@
+import { useMemo, useState } from "react";
 import { CircleX, MoveRight } from "lucide-react";
 import { useMount } from "ahooks";
+
 import { useAppStore } from "@/stores/appStore";
-import { useMemo, useState } from "react";
 import platformAdapter from "@/utils/platformAdapter";
 import { useConnectStore } from "@/stores/connectStore";
 import { useThemeStore } from "@/stores/themeStore";
diff --git a/src/components/ChatMessage/CallTools.tsx b/src/components/ChatMessage/CallTools.tsx
index e1511a9d..9d9ef5b0 100644
--- a/src/components/ChatMessage/CallTools.tsx
+++ b/src/components/ChatMessage/CallTools.tsx
@@ -37,13 +37,21 @@ export const CallTools = ({ Detail, ChunkData, loading }: CallToolsProps) => {
         className="inline-flex items-center gap-2 px-2 py-1 rounded-xl transition-colors border border-[#E6E6E6] dark:border-[#272626]"
       >
         {loading ? (
-          <Loader className="w-4 h-4 animate-spin text-[#1990FF]" />
+          <>
+            <Loader className="w-4 h-4 animate-spin text-[#1990FF]" />
+            <span className="text-xs text-[#999999] italic">
+              {t(`assistant.message.steps.${ChunkData?.chunk_type}`)}
+            </span>
+          </>
         ) : (
-          <Hammer className="w-4 h-4 text-[#38C200]" />
+          <>
+            <Hammer className="w-4 h-4 text-[#38C200]" />
+            <span className="text-xs text-[#999999]">
+              {t(`assistant.message.steps.${ChunkData?.chunk_type}`)}
+            </span>
+          </>
         )}
-        <span className="text-xs text-[#999999] italic">
-          {t(`assistant.message.steps.${ChunkData?.chunk_type}`)}
-        </span>
+
         {isThinkingExpanded ? (
           <ChevronUp className="w-4 h-4" />
         ) : (
@@ -53,11 +61,11 @@ export const CallTools = ({ Detail, ChunkData, loading }: CallToolsProps) => {
       {isThinkingExpanded && (
         <div className="pl-2 border-l-2 border-[#e5e5e5] dark:border-[#4e4e56]">
           <div className="text-[#8b8b8b] dark:text-[#a6a6a6] space-y-2">
-          <Markdown
-            content={Data || ""}
-            loading={loading}
-            onDoubleClickCapture={() => {}}
-          />
+            <Markdown
+              content={Data || ""}
+              loading={loading}
+              onDoubleClickCapture={() => {}}
+            />
             {/* {Data?.split("\n").map(
               (paragraph, idx) =>
                 paragraph.trim() && (
diff --git a/src/components/ChatMessage/markdown.css b/src/components/ChatMessage/markdown.css
index 7362c488..ffd3f176 100644
--- a/src/components/ChatMessage/markdown.css
+++ b/src/components/ChatMessage/markdown.css
@@ -35,7 +35,7 @@
   --color-fg-subtle: #6e7781;
   --color-canvas-default: transparent;
   --color-canvas-subtle: #f6f8fa;
-  --color-border-default: #d0d7de;
+  --color-border-default: #8b949e;
   --color-border-muted: hsla(210, 18%, 87%, 1);
   --color-neutral-muted: rgba(175, 184, 193, 0.2);
   --color-accent-fg: #0969da;
@@ -302,9 +302,12 @@
   border-spacing: 0;
   border-collapse: collapse;
   display: block;
-  width: max-content;
+  width: 100%;
   max-width: 100%;
   overflow: auto;
+  margin: 16px 0;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }
 
 .markdown-body td,
@@ -668,23 +671,44 @@
 
 .markdown-body table th {
   font-weight: var(--base-text-weight-semibold, 600);
+  background-color: var(--color-canvas-subtle);
+  text-align: left;
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }
 
 .markdown-body table th,
 .markdown-body table td {
   padding: 6px 13px;
   border: 1px solid var(--color-border-default);
+  border-width: 1.5px;
+  line-height: 1.5;
+  vertical-align: middle;
+  white-space: pre-wrap;
+}
+
+.markdown-body table td br,
+.markdown-body table th br {
+  display: block;
+  content: "";
+  margin-top: 8px;
 }
 
 .markdown-body table tr {
   background-color: var(--color-canvas-default);
   border-top: 1px solid var(--color-border-muted);
+  transition: background-color 0.2s ease;
 }
 
 .markdown-body table tr:nth-child(2n) {
   background-color: var(--color-canvas-subtle);
 }
 
+.markdown-body table tr:hover {
+  background-color: rgba(175, 184, 193, 0.1);
+}
+
 .markdown-body table img {
   background-color: transparent;
 }
diff --git a/src/components/Search/InputBox.tsx b/src/components/Search/InputBox.tsx
index 7c10bf0f..fdaf8d14 100644
--- a/src/components/Search/InputBox.tsx
+++ b/src/components/Search/InputBox.tsx
@@ -142,9 +142,6 @@ export default function ChatInput({
   const setModifierKeyPressed = useShortcutsStore((state) => {
     return state.setModifierKeyPressed;
   });
-  const setVisibleStartPage = useConnectStore((state) => {
-    return state.setVisibleStartPage;
-  });
   const setBlurred = useAppStore((state) => state.setBlurred);
 
   useEffect(() => {
@@ -170,8 +167,6 @@ export default function ChatInput({
   }, [isChatMode, textareaRef, inputRef]);
 
   const handleSubmit = useCallback(() => {
-    setVisibleStartPage(false);
-
     const trimmedValue = inputValue.trim();
     console.log("handleSubmit", trimmedValue, disabled);
     if (trimmedValue && !disabled) {
diff --git a/src/hooks/useChatActions.ts b/src/hooks/useChatActions.ts
index e900c111..0d394bf9 100644
--- a/src/hooks/useChatActions.ts
+++ b/src/hooks/useChatActions.ts
@@ -30,6 +30,9 @@ export function useChatActions(
   const { connected } = useChatStore();
   const sourceDataIds = useSearchStore((state) => state.sourceDataIds);
   const MCPIds = useSearchStore((state) => state.MCPIds);
+  const setVisibleStartPage = useConnectStore((state) => {
+    return state.setVisibleStartPage;
+  });
 
   const [keyword, setKeyword] = useState("");
 
@@ -132,6 +135,7 @@ export function useChatActions(
       } catch (error) {
         console.error("chatHistory:", error);
       }
+      setVisibleStartPage(false);
     },
     [currentServiceId, setActiveChat]
   );
@@ -208,6 +212,7 @@ export function useChatActions(
       } catch (error) {
         console.error("createNewChat:", error);
       }
+      setVisibleStartPage(false);
     },
     [
       currentServiceId,
@@ -291,6 +296,7 @@ export function useChatActions(
       } catch (error) {
         console.error("sendMessage:", error);
       }
+      setVisibleStartPage(false);
     },
     [
       currentServiceId,
@@ -353,6 +359,7 @@ export function useChatActions(
         console.error("open_session_chat:", error);
         return null;
       }
+      setVisibleStartPage(false);
     },
     [currentServiceId]
   );
diff --git a/src/hooks/useMessageHandler.ts b/src/hooks/useMessageHandler.ts
index 019f731f..ac3643f5 100644
--- a/src/hooks/useMessageHandler.ts
+++ b/src/hooks/useMessageHandler.ts
@@ -60,7 +60,6 @@ export function useMessageHandler(
         if (chunkData.chunk_type === "query_intent") {
           handlers.deal_query_intent(chunkData);
         } else if (chunkData.chunk_type === "tools") {
-          console.log("tools", chunkData);
           handlers.deal_tools(chunkData);
         } else if (chunkData.chunk_type === "fetch_source") {
           handlers.deal_fetch_source(chunkData);
diff --git a/src/hooks/useViewportHeight.ts b/src/hooks/useViewportHeight.ts
new file mode 100644
index 00000000..1fecbec5
--- /dev/null
+++ b/src/hooks/useViewportHeight.ts
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+
+/**
+ * Custom Hook for monitoring window size changes and setting viewport height variables
+ * Solves the issue of bottom toolbar overlapping content in mobile Safari
+ */
+export function useViewportHeight() {
+  useEffect(() => {
+    // Set viewport height variable
+    const setViewportHeight = () => {
+      // Get actual visible viewport height
+      const vh = window.innerHeight * 0.01;
+      // Set CSS variable --vh
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+
+    // Initial setup
+    setViewportHeight();
+
+    // Listen for window resize events
+    window.addEventListener('resize', setViewportHeight);
+    
+    // Listen for device orientation changes
+    window.addEventListener('orientationchange', setViewportHeight);
+    
+    // Cleanup function
+    return () => {
+      window.removeEventListener('resize', setViewportHeight);
+      window.removeEventListener('orientationchange', setViewportHeight);
+    };
+  }, []);
+}
\ No newline at end of file
diff --git a/src/hooks/useWebSocket.ts b/src/hooks/useWebSocket.ts
index 3e7b180d..d905a050 100644
--- a/src/hooks/useWebSocket.ts
+++ b/src/hooks/useWebSocket.ts
@@ -39,7 +39,7 @@ export default function useWebSocket({
   // web
   const { readyState, connect, disconnect } = useWebSocketAHook(
     // "wss://coco.infini.cloud/ws",
-    // "ws://localhost:9000/ws",
+    //"ws://localhost:9000/ws",
     isTauri ? "" : endpoint_websocket,
     {
       manual: true,
@@ -82,7 +82,7 @@ export default function useWebSocket({
     while (messageQueue.current.length > 0) {
       const msg = messageQueue.current.shift();
       if (msg) {
-        console.log("Processing message:", msg.substring(0, 100));
+        // console.log("Processing message:", msg.substring(0, 100));
         processMessage(msg);
       }
     }
diff --git a/src/pages/web/index.tsx b/src/pages/web/index.tsx
index b98bf813..3da20b66 100644
--- a/src/pages/web/index.tsx
+++ b/src/pages/web/index.tsx
@@ -4,11 +4,12 @@ import SearchChat from "@/components/SearchChat";
 import { useAppStore } from "@/stores/appStore";
 import { useShortcutsStore } from "@/stores/shortcutsStore";
 import { useIsMobile } from "@/hooks/useIsMobile";
+import { useModifierKeyPress } from "@/hooks/useModifierKeyPress";
+import useEscape from "@/hooks/useEscape";
+import { useViewportHeight } from "@/hooks/useViewportHeight";
 
 import "@/i18n";
 import "@/web.css";
-import { useModifierKeyPress } from "@/hooks/useModifierKeyPress";
-import useEscape from "@/hooks/useEscape";
 
 interface WebAppProps {
   headers?: Record<string, unknown>;
@@ -71,8 +72,8 @@ function WebApp({
   const [isChatMode, setIsChatMode] = useState(false);
 
   useEscape();
-
   useModifierKeyPress();
+  useViewportHeight();
 
   return (
     <div
@@ -82,7 +83,7 @@ function WebApp({
       style={{
         maxWidth: `${width}px`,
         width: `100vw`,
-        height: isMobile ? "100vh" : `${height}px`,
+        height: isMobile ? "calc(var(--vh, 1vh) * 100)" : `${height}px`,
       }}
     >
       {isMobile && (
diff --git a/src/web.css b/src/web.css
index dace74d1..d0235fa0 100644
--- a/src/web.css
+++ b/src/web.css
@@ -398,11 +398,6 @@ body,
   sup {
     top: -0.5em;
   }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
   button,
   input,
   optgroup,
@@ -471,7 +466,7 @@ body,
   figure,
   p,
   pre {
-    margin: 0;
+    margin: inherit;
   }
   fieldset {
     margin: 0;
@@ -484,8 +479,8 @@ body,
   ul,
   menu {
     list-style: none;
-    margin: 0;
-    padding: 0;
+    margin: inherit;
+    padding: inherit;
   }
   dialog {
     padding: 0;
diff --git a/tsup.config.ts b/tsup.config.ts
index 678e9b47..68f5f9c0 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -67,7 +67,7 @@ export default defineConfig({
 
     const packageJson = {
       name: "@infinilabs/search-chat",
-      version: "1.1.10",
+      version: "1.1.12",
       main: "index.js",
       module: "index.js",
       type: "module",