feat(plugin): thread raw headings

Author: pnd280

package.json

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

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

@@ -101,6 +101,13 @@ export const PLUGINS_METADATA: CplxPluginMetadata = {
     dependentDomObservers: ["coreDomObserver:thread:messageBlocks"],
     dependentCorePlugins: ["spaRouter", "reactVdom"],
   },
+  "thread:rawHeadings": {
+    id: "thread:rawHeadings",
+    routeSegment: "thread-raw-headings",
+    title: "Thread: Raw Headings",
+    description: "Prevent headings from being rendered as follow-up links",
+    tags: ["new", "ui", "ux"],
+  },
   "thread:betterMessageToolbars": {
     id: "thread:betterMessageToolbars",
     routeSegment: "thread-better-message-toolbars",
@@ -116,7 +123,7 @@ export const PLUGINS_METADATA: CplxPluginMetadata = {
     title: "Instant Thread Message Rewrite Buttons",
     description:
       "Rewrite messages with the same model without opening the original Rewrite dropdown menu",
-    tags: ["new", "ui", "ux"],
+    tags: ["ui", "ux"],
     uiGroup: ["thread:messageBlocks:queryHoverContainer"],
     dependentDomObservers: ["coreDomObserver:thread:messageBlocks"],
     dependentCorePlugins: ["spaRouter", "reactVdom"],
@@ -136,7 +143,7 @@ export const PLUGINS_METADATA: CplxPluginMetadata = {
     title: "Canvas",
     description:
       "Visualize and interact with generated content side by side. Similar to claude.ai's artifacts. Very experimental",
-    tags: ["new", "experimental", "desktopOnly", "ui"],
+    tags: ["experimental", "desktopOnly", "ui"],
     dependentPlugins: ["thread:betterCodeBlocks"],
     dependentDomObservers: [
       "coreDomObserver:thread:messageBlocks",

src/entrypoints/content-scripts/loaders/loaders.ts

@@ -40,6 +40,7 @@ import "@/plugins/thread-better-message-toolbars/message-words-and-characters-co
 import "@/plugins/thread-better-message-toolbars/collapsible-query/populate-original-height";
 import "@/plugins/instant-rewrite-button/native-btn-bind";
 import "@/plugins/custom-thread-container-width";
+import "@/plugins/thread-raw-headings";
 
 // Home Plugins
 import "@/plugins/home-custom-slogan";

src/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/RawHeadings.tsx

@@ -0,0 +1,32 @@
+import { Image } from "@/components/ui/image";
+import { Switch } from "@/components/ui/switch";
+import useExtensionLocalStorage from "@/services/extension-local-storage/useExtensionLocalStorage";
+
+export default function RawHeadingsPluginDetails() {
+  const { settings, mutation } = useExtensionLocalStorage();
+  const pluginSettings = settings?.plugins["thread:rawHeadings"];
+
+  if (!settings) return null;
+
+  return (
+    <div className="x-flex x-max-w-lg x-flex-col x-gap-4">
+      <Switch
+        textLabel="Enable"
+        checked={pluginSettings?.enabled ?? false}
+        onCheckedChange={({ checked }) => {
+          mutation.mutate((draft) => {
+            draft.plugins["thread:rawHeadings"].enabled = checked;
+          });
+        }}
+      />
+
+      <div className="x-mx-auto x-w-full x-max-w-[700px]">
+        <Image
+          src="https://i.imgur.com/IQJbP39.png"
+          alt="raw-headings"
+          className="x-w-full"
+        />
+      </div>
+    </div>
+  );
+}

src/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/plugins-details.tsx

@@ -14,6 +14,7 @@ import ExportThreadPluginDetails from "@/entrypoints/options-page/dashboard/page
 import FullWidthFollowUpQueryBoxPluginDetails from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/FullWidthFollowUpQueryBox";
 import InstantThreadMessageRewriteButtonsPluginDetails from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/InstantThreadMessageRewriteButtons";
 import PromptHistoryPluginDetails from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/PromptHistory";
+import RawHeadingsPluginDetails from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/RawHeadings";
 import SidebarToggleableRecentThreadsPluginDetails from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/SidebarToggleableRecentThreads";
 import SlashCommandMenuPluginDetails from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/SlashCommandMenu";
 import SpaceNavigatorPluginDetails from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-details/content/SpaceNavigator";
@@ -37,6 +38,7 @@ export const PLUGIN_DETAILS: PluginPluginDetails = {
   spaceNavigator: <SpaceNavigatorPluginDetails />,
   commandMenu: <CommandMenuPluginDetails />,
   "thread:betterMessageToolbars": <BetterThreadMessageToolbarsPluginDetails />,
+  "thread:rawHeadings": <RawHeadingsPluginDetails />,
   "thread:betterCodeBlocks": <BetterCodeBlocksPluginDetails />,
   "thread:toc": <ThreadToCPluginDetails />,
   "thread:canvas": <CanvasPluginDetails />,

src/hooks/useCopyPplxThread.ts

@@ -124,7 +124,12 @@ async function copyMessageWithCitations({
       `${content.answer}\n\nCitations:\n${ThreadExport.formatWebResults(content.webResults)}`,
     );
   } else {
-    navigator.clipboard.writeText(content.answer);
+    const cleanAnswer = content.answer.replace(
+      /\[(.*?)\]\(pplx:\/\/action\/followup\)/g,
+      "$1",
+    );
+
+    navigator.clipboard.writeText(cleanAnswer);
   }
 }
 

src/plugins/export-thread/useObserver.ts

@@ -11,11 +11,15 @@ export default function useObserver() {
     deepEqual,
   );
 
-  const navbarChildren = useThreadDomObserverStore(
-    (state) => state.$navbar?.find(">div").children().toArray() ?? null,
+  const $navbar = useThreadDomObserverStore(
+    (state) => state.$navbar,
     deepEqual,
   );
 
+  const $bookmarkButton = useMemo(() => {
+    return $navbar?.find(`button[aria-label="Save to Bookmarks"]`) ?? null;
+  }, [$navbar]);
+
   const isAnyMessageBlockInFlight = useMemo(() => {
     return messageBlocks?.some((block) => block.states.isInFlight);
   }, [messageBlocks]);
@@ -29,18 +33,18 @@ export default function useObserver() {
     return null;
   }
 
-  return createPortalContainer(navbarChildren);
+  return createPortalContainer($navbar, $bookmarkButton);
 }
 
-function createPortalContainer(navbarChildren: HTMLElement[] | null) {
-  if (navbarChildren == null) return null;
-
-  const $anchor = $(navbarChildren).last().children().first();
-
-  if (!$anchor.length) return null;
+function createPortalContainer(
+  $navbar: JQuery<HTMLElement> | null,
+  $bookmarkButton: JQuery<HTMLElement> | null,
+) {
+  if ($navbar == null || !$navbar.length) return null;
+  if ($bookmarkButton == null || !$bookmarkButton.length) return null;
 
-  const $existingPortalContainer = $(navbarChildren).find(
-    `> [data-cplx-component="${INTERNAL_ATTRIBUTES.THREAD.NAVBAR_CHILD.EXPORT_THREAD_BUTTON}"]`,
+  const $existingPortalContainer = $navbar?.find(
+    `[data-cplx-component="${INTERNAL_ATTRIBUTES.THREAD.NAVBAR_CHILD.EXPORT_THREAD_BUTTON}"]`,
   );
 
   if ($existingPortalContainer.length) return $existingPortalContainer[0];
@@ -49,7 +53,7 @@ function createPortalContainer(navbarChildren: HTMLElement[] | null) {
     INTERNAL_ATTRIBUTES.THREAD.NAVBAR_CHILD.EXPORT_THREAD_BUTTON,
   );
 
-  $anchor.before($portalContainer);
+  $bookmarkButton.parent().prepend($portalContainer);
 
   return $portalContainer[0];
 }

src/plugins/thread-raw-headings/index.ts

@@ -0,0 +1,37 @@
+import { spaRouteChangeCompleteSubscribe } from "@/plugins/_api/spa-router/listeners";
+import styles from "@/plugins/thread-raw-headings/styles.css?inline";
+import { PluginsStatesService } from "@/services/plugins-states";
+import { csLoaderRegistry } from "@/utils/cs-loader-registry";
+import { insertCss, whereAmI } from "@/utils/utils";
+
+let cleanup: () => void | null;
+
+csLoaderRegistry.register({
+  id: "plugin:thread:rawHeadings",
+  dependencies: ["cache:pluginsStates"],
+  loader: () => {
+    const pluginsEnableStates =
+      PluginsStatesService.getEnableStatesCachedSync();
+
+    if (!pluginsEnableStates["thread:rawHeadings"]) return;
+
+    rawHeadings(whereAmI());
+
+    spaRouteChangeCompleteSubscribe((url) => {
+      rawHeadings(whereAmI(url));
+    });
+  },
+});
+
+function rawHeadings(location: ReturnType<typeof whereAmI>) {
+  cleanup?.();
+
+  if (location !== "thread") return;
+
+  const removeCss = insertCss({
+    css: styles,
+    id: "raw-headings",
+  });
+
+  cleanup = () => removeCss();
+}

src/plugins/thread-raw-headings/styles.css

@@ -0,0 +1,15 @@
+[location="thread"] {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong {
+    cursor: text;
+    > button.hover\:duration-80 {
+      user-select: text;
+      pointer-events: none;
+      text-decoration: none;
+    }
+  }
+}

src/services/extension-local-storage/plugins.types.ts

@@ -31,6 +31,7 @@ export const PluginsSchema = z.object({
   spaceNavigator: PluginSettingsSchema,
   "sidebar:toggleableRecentThreads": PluginSettingsSchema,
   "thread:toc": PluginSettingsSchema,
+  "thread:rawHeadings": PluginSettingsSchema,
   "thread:betterMessageToolbars": PluginSettingsSchema.extend({
     sticky: z.boolean(),
     editQueryButton: z.boolean(),

src/services/extension-local-storage/storage-defaults.ts

@@ -48,6 +48,9 @@ export const DEFAULT_STORAGE: ExtensionLocalStorage = {
     "thread:toc": {
       enabled: false,
     },
+    "thread:rawHeadings": {
+      enabled: false,
+    },
     "thread:betterMessageToolbars": {
       enabled: false,
       sticky: true,

src/utils/cs-loader-registry.ts

@@ -54,6 +54,7 @@ export const LOADER_IDS = [
   "plugin:queryBox:fullWidthFollowUp",
   "plugin:home:customSlogan",
   "plugin:home:hideHomepageWidgets",
+  "plugin:thread:rawHeadings",
 
   "store:colorScheme",
   "store:pplxCookies",