feat: export entire thread

Author: pnd280

src/components/ThreadExportButton.tsx

@@ -0,0 +1,132 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import ReactDOM from 'react-dom';
+
+import $ from 'jquery';
+import {
+  Check,
+  Download,
+  LoaderCircle,
+} from 'lucide-react';
+
+import { ThreadInfoAPIResponse } from '@/types/PPLXApi';
+import { ui } from '@/utils/ui';
+import {
+  jsonUtils,
+  whereAmI,
+} from '@/utils/utils';
+import { useQuery } from '@tanstack/react-query';
+
+import useElementObserver from './hooks/useElementObserver';
+import { Button } from './ui/button';
+
+export default function ThreadExportButton() {
+  const { refetch, isFetching: isFetchingCurrentThreadInfo } = useQuery<
+    ThreadInfoAPIResponse[]
+  >({
+    queryKey: ['currentThreadInfo'],
+    enabled: false,
+  });
+
+  const [container, setContainer] = React.useState<Element>();
+
+  const idleSaveButtonText = useMemo(
+    () => (
+      <>
+        <Download className="tw-mr-2 tw-w-4 tw-h-4" />
+        <span>Export</span>
+      </>
+    ),
+    []
+  );
+
+  const [saveButtonText, setSaveButtonText] =
+    useState<ReactNode>(idleSaveButtonText);
+
+  useElementObserver({
+    selector: () => [ui.getStickyHeader()[0]],
+    callback: ({ element }) => {
+      const myContainer = $('<div>');
+
+      $(element).find('>div>div:last>div:last').before(myContainer);
+
+      setContainer(myContainer[0]);
+    },
+    observedIdentifier: 'thread-export-button',
+  });
+
+  const handleExportThread = useCallback(async () => {
+    const result = await refetch();
+
+    if (!result.data) return;
+
+    let outputText = '';
+
+    result.data?.map((message) => {
+      outputText += `Question: ${message.query_str}\n\n`;
+
+      const answer =
+        jsonUtils.safeParse(message.text)?.answer ||
+        jsonUtils.safeParse(
+          jsonUtils.safeParse(message.text)?.[4].content.answer
+        )?.answer;
+
+      outputText += `Answer: ${answer}\n\n`;
+
+      const proSearchWebResults = jsonUtils.safeParse(message.text)?.[2]
+        ?.content.web_results;
+      const normalSearchWebResults = jsonUtils.safeParse(
+        message.text
+      ).web_results;
+
+      (proSearchWebResults || normalSearchWebResults).map(
+        (
+          webResult: {
+            name: string;
+            url: string;
+          },
+          index: number
+        ) => {
+          outputText += `[${index + 1}] [${webResult.name}](${webResult.url})  \n`;
+        }
+      );
+
+      outputText += '\n---\n\n';
+    });
+
+    navigator.clipboard.writeText(outputText);
+
+    setSaveButtonText(
+      <>
+        <Check className="tw-mr-2 tw-w-4 tw-h-4" />
+        <span>Copied</span>
+      </>
+    );
+
+    setTimeout(() => {
+      setSaveButtonText(idleSaveButtonText);
+    }, 2000);
+  }, [refetch, idleSaveButtonText]);
+
+  if (whereAmI() !== 'thread' || !container) return null;
+
+  return ReactDOM.createPortal(
+    <Button
+      className="tw-h-[2rem] tw-text-muted-foreground hover:tw-text-foreground !tw-p-2"
+      variant="outline"
+      onClick={() => handleExportThread()}
+      disabled={isFetchingCurrentThreadInfo}
+    >
+      {isFetchingCurrentThreadInfo ? (
+        <LoaderCircle className="tw-w-4 tw-h-4 tw-animate-spin" />
+      ) : (
+        saveButtonText
+      )}
+    </Button>,
+    container
+  );
+}

src/components/ThreadQueryFormatSwitch.tsx

@@ -28,7 +28,7 @@ export default function ThreadQueryFormatSwitch() {
 
   useEffect(() => {
     containers.forEach((container, index) => {
-      if ($(container.query).find('#markdown-query-wrapper.tw-hidden').length) {
+      if ($(container.query).find('#markdown-query-wrapper.\\!tw-hidden').length) {
         setIsMarkdown((draft) => {
           draft[index] = false;
         });
@@ -74,10 +74,10 @@ export default function ThreadQueryFormatSwitch() {
       if (whereAmI() !== 'thread') return;
 
       const isMarkdown =
-        $(element).parent().find('#markdown-query-wrapper:not(.tw-hidden)')
+        $(element).parent().find('#markdown-query-wrapper:not(.\\!tw-hidden)')
           .length > 0 || !$(element).parent().find('#markdown-query-wrapper').length;
 
-      $(element).toggleClass('tw-hidden', isMarkdown);
+      $(element).toggleClass('!tw-hidden', isMarkdown);
     },
     observedIdentifier: 'append-tw-block-to-plain-text-block',
   });
@@ -92,10 +92,10 @@ export default function ThreadQueryFormatSwitch() {
             setIsMarkdown((draft) => {
               $(container.query)
                 .find('.whitespace-pre-line.break-words')
-                .toggleClass('tw-hidden', !draft[index]);
+                .toggleClass('!tw-hidden', !draft[index]);
               $(container.query)
                 .find('#markdown-query-wrapper')
-                .toggleClass('tw-hidden', draft[index]);
+                .toggleClass('!tw-hidden', draft[index]);
               draft[index] = !draft[index];
             });
           }}

src/components/hooks/useQuickQueryCommanderParams.tsx

@@ -49,9 +49,10 @@ export default function useQuickQueryCommanderParams({
   });
 
   const { data: currentThreadInfo, isFetching: isFetchingCurrentThreadInfo } =
-    useQuery<ThreadInfoAPIResponse>({
+    useQuery<ThreadInfoAPIResponse[], Error, ThreadInfoAPIResponse>({
       queryKey: ['currentThreadInfo'],
       enabled: false,
+      select: (data) => data?.[0],
     });
 
   const quickQueryParams = useMemo(() => {

src/content-script/Root.tsx

@@ -6,6 +6,7 @@ import useElementObserver from '@/components/hooks/useElementObserver';
 import MainPage from '@/components/MainPage';
 import QueryBox from '@/components/QueryBox';
 import ThreadAnchor from '@/components/ThreadAnchor';
+import ThreadExportButton from '@/components/ThreadExportButton';
 import ThreadQueryFormatSwitch from '@/components/ThreadQueryFormatSwitch';
 import { Toaster } from '@/components/ui/toaster';
 import { useToast } from '@/components/ui/use-toast';
@@ -34,6 +35,7 @@ export default function Root() {
         <Commander />
         {popupSettingsStore.getState().qolTweaks.threadTOC && <ThreadAnchor />}
         {popupSettingsStore.getState().visualTweaks.threadQueryMarkdown && <ThreadQueryFormatSwitch />}
+        <ThreadExportButton />
         <Toaster />
         <IncompatibleInterfaceLanguageNotice />
         <ReactQueryDevtools initialIsOpen={false} />

src/popup/index.tsx

@@ -53,7 +53,7 @@ function UntrustedBuildWarning() {
     <div className="tw-w-full tw-bg-secondary tw-flex tw-flex-col tw-font-sans">
       <Separator />
       <div className="tw-flex tw-px-2 tw-py-2 tw-text-sm tw-font-bold tw-gap-1 tw-bg-destructive tw-items-center">
-        <CircleAlert className="tw-h-3 tw-w-3 tw-mr-1 tw-text-accent-foreground" />
+        <CircleAlert className="tw-h-8 tw-w-8 tw-mr-1 tw-text-accent-foreground" />
         <span>This is an untrusted build. Use at your own risk.</span>
       </div>
     </div>

src/types/PPLXApi.ts

@@ -25,6 +25,7 @@ export type CollectionsAPIResponse = {
 }[];
 
 export type ThreadInfoAPIResponse = {
+  query_str: string;
   text: string;
   backend_uuid: string;
   author_image: string;

src/utils/pplx-api.ts

@@ -102,7 +102,7 @@ async function fetchThreadInfo(threadSlug: string) {
   if (!data) return null;
 
   return data.pageProps.dehydratedState.queries[1].state
-    .data[0] as ThreadInfoAPIResponse;
+    .data as ThreadInfoAPIResponse[];
 }
 
 async function fetchUserProfileSettings(): Promise<UserProfileSettingsAPIResponse | null> {