fix(tts): early exit

Author: pnd280

src/components/plugins-guard/CsUiPluginsGuard.tsx

@@ -13,6 +13,7 @@ import {
   checkPluginDependencies,
   checkIncognito,
   checkLocation,
+  checkBrowser,
 } from "@/components/plugins-guard/guards";
 import { usePluginGuardsStore } from "@/components/plugins-guard/store";
 import {
@@ -78,6 +79,7 @@ function useGuardConditions(props: CsUiPluginsGuardProps) {
     currentLocation,
   });
   const incognitoValid = checkIncognito(props, { isIncognito });
+  const browserValid = checkBrowser(props);
 
   return {
     deviceValid,
@@ -86,6 +88,7 @@ function useGuardConditions(props: CsUiPluginsGuardProps) {
     dependenciesValid,
     locationValid,
     incognitoValid,
+    browserValid,
     pluginsEnableStates,
   };
 }
@@ -98,6 +101,7 @@ export default function CsUiPluginsGuard(props: CsUiPluginsGuardProps) {
     dependenciesValid,
     locationValid,
     incognitoValid,
+    browserValid,
     pluginsEnableStates,
   } = useGuardConditions(props);
 
@@ -117,6 +121,7 @@ export default function CsUiPluginsGuard(props: CsUiPluginsGuardProps) {
     dependenciesValid,
     locationValid,
     incognitoValid,
+    browserValid,
     additionalCheckValid,
   ].every(Boolean);
 

src/components/plugins-guard/guards.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import {
   checkDeviceType,
@@ -7,11 +7,19 @@ import {
   checkPluginDependencies,
   checkLocation,
   checkIncognito,
+  checkBrowser,
   type GuardConditions,
   type GuardCheckParams,
 } from "@/components/plugins-guard/guards";
 import { PluginId } from "@/services/extension-local-storage/plugins.types";
 
+// Mock APP_CONFIG
+vi.mock("@/app.config", () => ({
+  APP_CONFIG: {
+    BROWSER: "chrome",
+  },
+}));
+
 describe("Guard Functions", () => {
   describe("checkDeviceType", () => {
     it("should return true when no device restrictions", () => {
@@ -163,4 +171,26 @@ describe("Guard Functions", () => {
       expect(checkIncognito(conditions, params)).toBe(true);
     });
   });
+
+  describe("checkBrowser", () => {
+    it("should return true when no browser restrictions", () => {
+      const conditions: GuardConditions = {};
+      expect(checkBrowser(conditions)).toBe(true);
+    });
+
+    it("should return true when current browser is in allowed list", () => {
+      const conditions: GuardConditions = { browser: ["chrome", "firefox"] };
+      expect(checkBrowser(conditions)).toBe(true);
+    });
+
+    it("should return false when current browser is not in allowed list", () => {
+      const conditions: GuardConditions = { browser: ["firefox"] };
+      expect(checkBrowser(conditions)).toBe(false);
+    });
+
+    it("should return true when browser list is empty", () => {
+      const conditions: GuardConditions = { browser: [] };
+      expect(checkBrowser(conditions)).toBe(true);
+    });
+  });
 });

src/components/plugins-guard/guards.ts

@@ -1,3 +1,4 @@
+import { APP_CONFIG } from "@/app.config";
 import { ExtensionLocalStorage } from "@/services/extension-local-storage/extension-local-storage.types";
 import { PluginId } from "@/services/extension-local-storage/plugins.types";
 import { whereAmI } from "@/utils/utils";
@@ -10,6 +11,7 @@ export type GuardConditions = {
   requiresLoggedIn?: boolean;
   allowIncognito?: boolean;
   allowedAccountTypes?: ("free" | "pro" | "enterprise")[][];
+  browser?: ("chrome" | "firefox")[];
 };
 
 export type GuardCheckParams = {
@@ -88,6 +90,11 @@ export function checkIncognito(
   return true;
 }
 
+export function checkBrowser({ browser }: GuardConditions): boolean {
+  if (!browser || !browser?.length) return true;
+  return browser.includes(APP_CONFIG.BROWSER);
+}
+
 export type AdditionalCheckParams = GuardConditions & {
   pluginsEnableStates: Record<PluginId, boolean>;
   settings: ExtensionLocalStorage;

src/data/plugins-data/plugins-data.ts

@@ -122,7 +122,7 @@ export const PLUGINS_METADATA: CplxPluginMetadata = {
     routeSegment: "thread-message-tts",
     title: "Thread Message TTS",
     description: "Enable text-to-speech for messages in threads",
-    tags: ["new", "ui", "ux"],
+    tags: ["new", "experimental", "ui", "ux"],
     dependentDomObservers: ["coreDomObserver:thread:messageBlocks"],
     dependentCorePlugins: ["spaRouter", "reactVdom"],
   },

src/data/plugins-data/plugins-tags.ts

@@ -47,4 +47,8 @@ export const PLUGIN_TAGS = {
     description:
       "May have a noticeable impact on performance in large threads with a large amount of code blocks.",
   },
+  chromiumOnly: {
+    label: "Chromium Only",
+    description: "Can only be used on Chromium-based browsers",
+  },
 } as const;

src/plugins/_api/web-socket/internal-web-socket-manager.ts

@@ -17,13 +17,15 @@ export class InternalWebSocketManager {
     return InternalWebSocketManager.instance;
   }
 
-  public async handShake(
-    id: string = nanoid(),
-    upgrade = true,
-  ): Promise<Socket> {
+  public async handShake(params?: {
+    id?: string;
+    upgrade?: boolean;
+  }): Promise<Socket> {
+    const { id = nanoid(), upgrade = true } = params ?? {};
+
     return new Promise((resolve, reject) => {
       const socket = io("", {
-        transports: upgrade ? ["polling", "websocket"] : ["polling"],
+        transports: ["polling", "websocket"],
         upgrade,
         reconnection: false,
       });
@@ -65,7 +67,7 @@ export class InternalWebSocketManager {
     let socket = this.getSocket(id);
 
     if (socket == null) {
-      socket = await this.handShake(id);
+      socket = await this.handShake({ id });
     }
 
     if (socket.io.engine.readyState === "opening") {

src/plugins/thread-message-tts/hooks/usePplxTtsRequest.ts

@@ -1,6 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 import { Socket } from "socket.io-client";
 
+import { APP_CONFIG } from "@/app.config";
 import { TtsVoice } from "@/data/plugins/thread-message-tts/types";
 import { InternalWebSocketManager } from "@/plugins/_api/web-socket/internal-web-socket-manager";
 
@@ -25,7 +26,9 @@ export default function usePplxTtsRequest() {
       onBufferUpdate?: (chunk: Int16Array) => void;
     }) => {
       socketRef.current =
-        await InternalWebSocketManager.getInstance().handShake();
+        await InternalWebSocketManager.getInstance().handShake({
+          upgrade: APP_CONFIG.BROWSER === "chrome",
+        });
 
       const socket = socketRef.current;
 

src/plugins/thread-message-tts/index.tsx

@@ -20,81 +20,90 @@ export default function ThreadMessageTtsButton({
 }: {
   messageBlockIndex: number;
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [playing, setPlaying] = useState(false);
   const [firstChunkArrived, setFirstChunkArrived] = useState(false);
 
   const {
-    mutation: { mutateAsync: playTts },
+    mutation: { mutateAsync: playTts, isPending },
     abort,
   } = usePplxTtsRequest();
 
+  const pendingRef = useRef(isPending);
+
+  useEffect(() => {
+    pendingRef.current = isPending;
+  }, [isPending]);
+
   const [player] = useState(() =>
     PplxTtsPlayerCoordinator.getInstance().createPlayer({
       onStart: () => {
         setFirstChunkArrived(true);
       },
       onComplete: () => {
-        setIsPlaying(false);
+        if (pendingRef.current) return;
+        setPlaying(false);
+        setFirstChunkArrived(false);
+        abort();
       },
       stop: () => {
-        setIsPlaying(false);
+        setPlaying(false);
         setFirstChunkArrived(false);
         abort();
       },
     }),
   );
 
-  const stop = useCallback(() => {
+  const stopTts = useCallback(() => {
     PplxTtsPlayerCoordinator.getInstance().stopAllPlayers();
+    setPlaying(false);
+    setFirstChunkArrived(false);
   }, []);
 
   const initTts = useCallback(
     async (params?: { voice: TtsVoice }) => {
-      stop();
-
-      if (isPlaying) {
+      if (playing) {
+        stopTts();
         return;
       }
 
-      setIsPlaying(true);
+      stopTts();
+      player.startSession();
+      setPlaying(true);
 
       const backendUuid = await sendMessage(
         "reactVdom:getMessageBackendUuid",
-        {
-          index: messageBlockIndex,
-        },
+        { index: messageBlockIndex },
         "window",
       );
 
-      if (backendUuid == null) {
-        setIsPlaying(false);
+      if (!backendUuid) {
+        setPlaying(false);
         return;
       }
 
+      const extensionSettings = await ExtensionLocalStorageService.get();
+      const selectedVoice =
+        params?.voice || extensionSettings.plugins["thread:messageTts"].voice;
+
       playTts({
         backendUuid,
-        voice:
-          params?.voice ??
-          (await ExtensionLocalStorageService.get()).plugins[
-            "thread:messageTts"
-          ].voice,
-        onBufferUpdate(chunk) {
-          player.addChunk(chunk);
-        },
+        voice: selectedVoice,
+        onBufferUpdate: (chunk: Int16Array) => player.addChunk(chunk),
       });
     },
-    [isPlaying, stop, messageBlockIndex, playTts, player],
+    [playing, player, messageBlockIndex, stopTts, playTts],
   );
 
   useEffect(() => {
     return () => {
-      stop();
+      stopTts();
+      player.clearBuffer();
       PplxTtsPlayerCoordinator.getInstance().removePlayer(player);
     };
-  }, [player, stop]);
+  }, [player, stopTts]);
 
-  if (isPlaying && !firstChunkArrived) {
+  if (playing && !firstChunkArrived) {
     return (
       <div className="x-rounded-md x-p-2 x-text-muted-foreground">
         <LuLoaderCircle className="x-size-4 x-animate-spin" />
@@ -106,37 +115,37 @@ export default function ThreadMessageTtsButton({
     <DropdownMenu
       lazyMount
       unmountOnExit
-      open={isOpen}
-      onOpenChange={({ open }) => setIsOpen(open)}
+      open={menuOpen}
+      onOpenChange={({ open }) => setMenuOpen(open)}
       onSelect={({ value }) => {
         initTts({ voice: value as TtsVoice });
         ExtensionLocalStorageService.set((draft) => {
           draft.plugins["thread:messageTts"].voice = value as TtsVoice;
         });
       }}
     >
-      <Tooltip content={isPlaying ? t("misc.stop") : t("misc.speakAloud")}>
+      <Tooltip content={playing ? t("misc.stop") : t("misc.speakAloud")}>
         <DropdownMenuTrigger asChild>
           <div
             className="x-cursor-pointer x-rounded-md x-p-2 x-text-muted-foreground x-transition-all hover:x-bg-secondary hover:x-text-foreground active:x-scale-95"
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              if (isOpen) {
+              if (menuOpen) {
                 return;
               }
               initTts();
             }}
             onContextMenu={(e) => {
-              if (isPlaying) {
+              if (playing) {
                 return;
               }
 
               e.preventDefault();
-              setIsOpen(true);
+              setMenuOpen(true);
             }}
           >
-            {isPlaying ? (
+            {playing ? (
               <FaStopCircle className="x-size-4 x-text-primary" />
             ) : (
               <HiOutlineSpeakerWave className="x-size-4" />

src/plugins/thread-message-tts/utils/coordinator.ts

@@ -37,13 +37,16 @@ export class PplxTtsPlayerCoordinator {
   public stopAllPlayers(): void {
     this.players.forEach((player, index) => {
       player.stop();
+      player.clearBuffer();
       this.stopFns[index]?.();
     });
   }
 
   public removePlayer(player: PplxStreamingTtsPlayer): void {
     const index = this.players.indexOf(player);
     if (index !== -1) {
+      player.stop();
+      player.clearBuffer();
       this.players.splice(index, 1);
       this.stopFns.splice(index, 1);
     }