livechat 优化

src/components/common/CustomerService/CustomerService.tsx

@@ -16,9 +16,13 @@ export function CustomerService() {
         setIsSpread(false);
     };
 
+    const spreadClick = () => {
+        setIsSpread(!isSpread);
+    };
+
     return (
         <div className="box-border fixed bottom-37.5 right-1 w-11.25 h-11.25 z-50" onClick={rootClick}>
-            <button onClick={() => setIsSpread(!isSpread)}
+            <button onClick={spreadClick}
                 className="flex justify-center items-center w-full h-full rounded-3xl border-1 border-white bg-linear-to-b from-[#f0fdf4] to-[#86efac]" 
                 type="button"
             >

src/components/common/CustomerService/LiveChat/LiveChat.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { 
-    LiveChatWidget, 
-    type EventHandlerPayload, 
-    type WidgetState 
-} from "@livechat/widget-react";
-
-export type LiveChatVisibilityType = WidgetState['visibility'];
-
-export function LiveChat({
-    visibility,
-    readyHandler,
-    visibilityChangeHandler
-}: {
-    visibility: LiveChatVisibilityType;
-    readyHandler: (event: EventHandlerPayload<"onReady">) => void;
-    visibilityChangeHandler: (str: LiveChatVisibilityType) => void;
-}) {
-
-
-    function handleReadyEvent(event: EventHandlerPayload<"onReady">) {
-        readyHandler(event);
-    }
-    function handleVisibilityChangedEvent(event: EventHandlerPayload<"onVisibilityChanged">) {
-        // console.log("LiveChatWidget.onVisibilityChanged", event)
-        // if(event.visibility === "minimized") {
-        //     setVisibility('hidden');
-        // }
-        visibilityChangeHandler(event.visibility);
-    }
-
-    return (<>
-
-        <LiveChatWidget
-            license="8982890"
-            visibility={visibility}
-            onReady={handleReadyEvent}
-            onVisibilityChanged={handleVisibilityChangedEvent}
-        />
-    </>)
-}

src/providers/LiveChatProvider.tsx

@@ -8,7 +8,15 @@ import {
     useCallback,
     type ReactNode,
 } from "react";
-import { LiveChat, type LiveChatVisibilityType } from "@/components/common/CustomerService/LiveChat/LiveChat";
+import { 
+    LiveChatWidget, 
+    type EventHandlerPayload, 
+    type WidgetState 
+} from "@livechat/widget-react";
+
+type LiveChatVisibilityType = WidgetState['visibility'];
+type LiveChatReadyEventHandlerPayload = EventHandlerPayload<"onReady">;
+
 
 type LiveChatContextType = {
     visibility: LiveChatVisibilityType;
@@ -27,7 +35,7 @@ export function LiveChatProvider({
     children:ReactNode;
 }){
 
-    const [visibility, setVisibility]=useState<LiveChatVisibilityType>('hidden');
+    const [visibility, setVisibility]=useState<LiveChatVisibilityType>('minimized');
     const isUseMiniRef = useRef(false);
 
     const openMiniMode = useCallback(() => {
@@ -50,13 +58,20 @@ export function LiveChatProvider({
 
     },[]);
 
-    const visibilityChanged = (str: LiveChatVisibilityType) => {
+    const visibilityChanged = useCallback((event: EventHandlerPayload<"onVisibilityChanged">) => {
+        const str = event.visibility;
         if(str === 'minimized' && !isUseMiniRef.current) {
-            hide();
+            setVisibility('hidden');
         }
-    };
+    },[]);
 
-    const ready = () => {};
+    const ready = useCallback((e:LiveChatReadyEventHandlerPayload) => {
+        console.log(e);
+        if(!isUseMiniRef.current) {
+            setVisibility('hidden');
+        }
+    },[]);
+    console.log("[LiveChatProvider render]", visibility);
     return (
         <LiveChatContext.Provider
             value={{
@@ -68,11 +83,13 @@ export function LiveChatProvider({
             }}
         >
             {children}
-            <LiveChat 
+            <LiveChatWidget
+                license="8982890"
                 visibility={visibility}
-                readyHandler={ready}
-                visibilityChangeHandler={visibilityChanged}
+                onReady={ready}
+                onVisibilityChanged={visibilityChanged}
             />
+
         </LiveChatContext.Provider>