fix: adapt to Perplexity's frontend changes

docs/changelog.md

@@ -10,6 +10,12 @@ Consider giving a star ⭐ on [Github](https://github.com/pnd280/complexity).
 
 **EXPERIMENTAL** features are subjected to change/removal without prior notice.
 
+## v0.0.5.12
+
+_Release date: 19th Nov, 2024_
+
+-   **FIX**: Fixed many breaking bugs due to Perplexity's frontend changes.
+
 ## v0.0.5.11
 
 _Release date: 17th Nov, 2024_

package.json

@@ -1,7 +1,7 @@
 {
   "name": "complexity",
   "displayName": "Complexity - Perplexity AI Supercharged",
-  "version": "0.0.5.11",
+  "version": "0.0.5.12",
   "author": "pnd280",
   "description": "⚡ Supercharge your Perplexity AI",
   "type": "module",

src/assets/overrides.css

@@ -65,7 +65,7 @@ th {
 
 /* Messages borders */
 .message-block:not(:last-of-type) {
-  border-bottom: 1px solid var(--ring-darker) !important;
+  border-bottom-color: var(--ring-darker) !important;
 }
 
 /* Background colors */
@@ -280,15 +280,15 @@ html {
     z-index    : 20 !important;
   }
 
-  .pointer-events-none.fixed.bottom-mobileNavHeight {
+  /* .pointer-events-none.fixed.bottom-mobileNavHeight {
     margin-top: 5rem;
 
     transition         : all;
     transition-duration: 0.3s;
 
     position: sticky !important;
     bottom  : 4rem !important;
-  }
+  } */
 
   /* Normal thread */
   .mx-auto.h-full.w-full.max-w-threadWidth {

src/content-script/components/CustomMarkdownBlock/Toolbar.tsx

@@ -1,4 +1,3 @@
-
 import { LuLoader2 as LoaderCircle } from "react-icons/lu";
 
 import CanvasRenderButton from "@/content-script/components/CustomMarkdownBlock/CanvasRenderButton";
@@ -23,9 +22,7 @@ export default function Toolbar({ lang, preBlockId }: ToolbarProps) {
         {lang || "text"}
       </div>
       <div className="tw-ml-auto tw-flex tw-gap-3">
-        <div
-          className={`tw-text-muted-foreground group-data-[inflight=false]:tw-hidden`}
-        >
+        <div className="tw-text-muted-foreground group-data-[inflight=false]:tw-hidden">
           <LoaderCircle className="tw-size-4 tw-animate-spin" />
         </div>
 

src/content-script/components/ThreadToc/index.tsx

@@ -1,6 +1,5 @@
 import { useToggle } from "@uidotdev/usehooks";
 
-
 import FloatingTrigger from "@/content-script/components/ThreadToc/FloatingToggle";
 import Panel from "@/content-script/components/ThreadToc/Panel";
 import useThreadTocObserver from "@/content-script/hooks/useThreadTocObserver";

src/content-script/hooks/useThreadTocObserver.ts

@@ -39,7 +39,7 @@ export default function useThreadTocObserver() {
 
     setVisibleMessageIndex(
       UiUtils.getMostVisibleElementIndex(
-        UiUtils.getMessagesContainer().children().toArray(),
+        UiUtils.getMessageBlocks().map(({ $messageBlock }) => $messageBlock[0]),
       ),
     );
 

src/content-script/main-world/react-node.ts

@@ -1,7 +1,8 @@
 import { LanguageModel } from "@/content-script/components/QueryBox";
 import { webpageMessenger } from "@/content-script/main-world/webpage-messenger";
+import { DomSelectors } from "@/utils/DomSelectors";
 import { mainWorldExec, mainWorldOnly } from "@/utils/hof";
-import { getReactFiberKey, getReactPropsKey, jsonUtils } from "@/utils/utils";
+import { getReactFiberKey } from "@/utils/utils";
 
 export type ReactNodeAction = keyof typeof actions;
 export type ReactNodeActionReturnType = {
@@ -21,31 +22,39 @@ const actions = {
     return (pre as any)[getReactFiberKey(pre)]?.memoizedProps?.children[0]
       ?.props?.children[0];
   }),
-  getMessageData: mainWorldOnly(
+  getStreamingMessageData: mainWorldOnly(
     (messageBlock: Element): PplxThreadMessageReactFiberResult => {
-      const result = jsonUtils.safeParse(
-        (messageBlock as any)[getReactFiberKey(messageBlock)]?.memoizedProps
-          ?.children?.props?.result?.text,
-      );
-
-      return Array.isArray(result)
-        ? jsonUtils.safeParse(result[result.length - 1]?.content?.answer)
-        : result;
+      const $streamingNode = $(messageBlock).prev();
+      const fiberNode = ($streamingNode[0] as any)[
+        getReactFiberKey($streamingNode[0])
+      ];
+
+      return {
+        answer: fiberNode?.return?.memoizedProps?.result?.blocks.reduce(
+          (acc: string, block: any) => {
+            if (block.markdown_block == null) return acc;
+
+            return acc + block.markdown_block.chunks.join("");
+          },
+          "",
+        ),
+        web_results: fiberNode?.return?.memoizedProps?.result?.web_results,
+      };
     },
   ),
   getMessageInflightStatus: mainWorldOnly((messageBlock: Element): string => {
-    return (messageBlock as any)[getReactFiberKey(messageBlock)]?.memoizedProps
-      .children.props.result.status;
+    const result = getButtonBarFiberNode(messageBlock);
+    return result?.status ?? "";
   }),
   getMessageDisplayModel: mainWorldOnly(
-    (messageBlock: Element): LanguageModel["code"] => {
-      return (messageBlock as any)[getReactFiberKey(messageBlock)]
-        ?.memoizedProps.children.props.result.display_model;
+    (messageBlock: Element): LanguageModel["code"] | null => {
+      const result = getButtonBarFiberNode(messageBlock);
+      return result?.display_model ?? null;
     },
   ),
   getMessageBackendUuid: mainWorldOnly((messageBlock: Element): string => {
-    return (messageBlock as any)[getReactPropsKey(messageBlock)]?.children
-      ?.props?.result?.backend_uuid;
+    const result = getButtonBarFiberNode(messageBlock);
+    return result?.backend_uuid ?? "";
   }),
 } as const;
 
@@ -61,3 +70,14 @@ mainWorldExec(() => {
     },
   );
 })();
+
+function getButtonBarFiberNode(messageBlock: Element) {
+  const $buttonBar = $(messageBlock).find(
+    DomSelectors.THREAD.MESSAGE.BOTTOM_BAR,
+  );
+
+  if (!$buttonBar.length) return null;
+
+  return ($buttonBar[0] as any)[getReactFiberKey($buttonBar[0])]?.return
+    ?.memoizedProps?.result;
+}

src/utils/DomSelectors.ts

@@ -20,7 +20,7 @@ const DomSelectors = {
         /** The query box */
         QUERY: ".my-md.md\\:my-lg",
         /** The answer box */
-        ANSWER: ".relative.default.font-sans.text-base",
+        ANSWER: ".mb-md",
         /** The answer heading */
         ANSWER_HEADING:
           '.mb-sm.flex.w-full.items-center.justify-between:not(:has(svg[data-icon="sources"]))',

src/utils/InternalWebSocketManager.ts

@@ -32,8 +32,6 @@ class InternalWebSocketManager {
       const messageHandler = (message: unknown) => {
         if (typeof message !== "string") return;
 
-        console.log("message", message);
-
         const decodedData = decodePacket(message);
         const sid = decodedData.data.match(/^\{"sid":"(.+)"\}$/)?.[1];
 

src/utils/MarkdownBlock.ts

@@ -1,5 +1,3 @@
-
-
 import { ReactNodeActionReturnType } from "@/content-script/main-world/react-node";
 import { webpageMessenger } from "@/content-script/main-world/webpage-messenger";
 import CplxUserSettings from "@/cplx-user-settings/CplxUserSettings";
@@ -216,10 +214,10 @@ export default class MarkdownBlockUtils {
         event: "getReactNodeData",
         payload: {
           querySelector: `${DomHelperSelectors.THREAD.MESSAGE.BLOCK}:has(#${pre.id})`,
-          action: "getMessageData",
+          action: "getStreamingMessageData",
         },
         timeout: 5000,
-      })) as ReactNodeActionReturnType["getMessageData"];
+      })) as ReactNodeActionReturnType["getStreamingMessageData"];
 
       if (!messageContent) return false;
 
@@ -255,10 +253,7 @@ export default class MarkdownBlockUtils {
 
     if (!messageBlock) return false;
 
-    const isInFlight = CplxUserSettings.get().generalSettings.qolTweaks.canvas
-      .enabled
-      ? await MarkdownBlockUtils.isInFlight(pre)
-      : false;
+    const isInFlight = await MarkdownBlockUtils.isInFlight(pre);
 
     $(messageBlock)
       .find(`.${pre.id}-inflight-indicator`)

src/utils/UiUtils.ts

@@ -30,35 +30,38 @@ export default class UiUtils {
       $answer: JQuery<Element>;
     }[] = [];
 
-    $messagesContainer.children().each((index, messageBlock) => {
-      const $messageBlock = $(messageBlock);
-
-      $messageBlock
-        .addClass(DomHelperSelectors.THREAD.MESSAGE.BLOCK.slice(1))
-        .attr({ "data-index": index + 1 });
-
-      const { $query, $answer, $answerHeading } =
-        UiUtils.parseMessageBlock($messageBlock);
-
-      if (throwOnError && (!$query.length || !$answer.length))
-        throw new Error("Invalid message block");
-
-      $messageBlock
-        .find(`${DomSelectors.THREAD.MESSAGE.TEXT_COL}:last`)
-        .addClass(DomHelperSelectors.THREAD.MESSAGE.TEXT_COL.slice(1));
-      $messageBlock
-        .find(`${DomSelectors.THREAD.MESSAGE.VISUAL_COL}:last`)
-        .addClass(DomHelperSelectors.THREAD.MESSAGE.VISUAL_COL.slice(1));
-
-      const messageBlockData = {
-        $messageBlock,
-        $answerHeading,
-        $query,
-        $answer,
-      };
-
-      messageBlocks.push(messageBlockData);
-    });
+    $messagesContainer
+      .children()
+      .filter((_, child) => $(child).find(".grid-cols-12").length > 0)
+      .each((index, messageBlock) => {
+        const $messageBlock = $(messageBlock);
+
+        $messageBlock
+          .addClass(DomHelperSelectors.THREAD.MESSAGE.BLOCK.slice(1))
+          .attr({ "data-index": index + 1 });
+
+        const { $query, $answer, $answerHeading } =
+          UiUtils.parseMessageBlock($messageBlock);
+
+        if (throwOnError && (!$query.length || !$answer.length))
+          throw new Error("Invalid message block");
+
+        $messageBlock
+          .find(`${DomSelectors.THREAD.MESSAGE.TEXT_COL}:last`)
+          .addClass(DomHelperSelectors.THREAD.MESSAGE.TEXT_COL.slice(1));
+        $messageBlock
+          .find(`${DomSelectors.THREAD.MESSAGE.VISUAL_COL}:last`)
+          .addClass(DomHelperSelectors.THREAD.MESSAGE.VISUAL_COL.slice(1));
+
+        const messageBlockData = {
+          $messageBlock,
+          $answerHeading,
+          $query,
+          $answer,
+        };
+
+        messageBlocks.push(messageBlockData);
+      });
 
     return messageBlocks;
   }