feat(canvas): track pre-prompt last updated

Author: pnd280

src/data/plugins/query-box/language-model-selector/language-models.ts

@@ -51,9 +51,9 @@ export const localLanguageModels = [
     code: "turbo",
     provider: "Perplexity",
   },
-];
+] as const;
 
-export let languageModels: LanguageModel[] = localLanguageModels;
+export let languageModels: LanguageModel[] = [...localLanguageModels];
 export let groupedLanguageModelsByProvider: GroupedLanguageModelsByProvider =
   getGroupedLanguageModelsByProvider();
 
@@ -89,7 +89,7 @@ CsLoaderRegistry.register({
     )();
 
     if (error || !data) {
-      languageModels = localLanguageModels;
+      languageModels = [...localLanguageModels];
     } else {
       languageModels = data;
       groupedLanguageModelsByProvider = getGroupedLanguageModelsByProvider();

src/features/plugins/thread/canvas/components/PrePromptInstallationDialog.tsx

@@ -17,15 +17,17 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { toast } from "@/components/ui/use-toast";
+import { cplxApiQueries } from "@/services/cplx-api/query-keys";
 import { PluginsStatesService } from "@/services/plugins-states/plugins-states";
 import { PplxApiService } from "@/services/pplx-api/pplx-api";
-import { fetchResource } from "@/utils/utils";
+import { unixTimestampToDate } from "@/utils/dayjs";
+import { fetchResource, setCookie } from "@/utils/utils";
 
 function CanvasPrePromptInstallationDialog() {
   const navigate = useNavigate();
 
   const {
-    data: canvasInstructionClaudeMd,
+    data: canvasInstruction,
     isError,
     isFetching,
   } = useQuery({
@@ -46,6 +48,12 @@ function CanvasPrePromptInstallationDialog() {
         description: "The Canvas Pre-Prompt has been installed as a Space.",
       });
 
+      setCookie(
+        `pplx.source-selection-v3-space-${data.uuid}`,
+        JSON.stringify([]),
+        365,
+      );
+
       sendMessage(
         "spa-router:push",
         {
@@ -64,6 +72,8 @@ function CanvasPrePromptInstallationDialog() {
     },
   });
 
+  const { data: versions } = useQuery(cplxApiQueries.versions);
+
   return (
     <Dialog
       defaultOpen={true}
@@ -85,53 +95,63 @@ function CanvasPrePromptInstallationDialog() {
           <div className="tw-text-sm tw-text-muted-foreground">
             For reference, here is the prompt:
           </div>
-          {canvasInstructionClaudeMd && (
-            <div className="tw-max-h-[500px] tw-overflow-y-auto tw-whitespace-pre-line tw-rounded-md tw-border tw-border-border/50 tw-bg-secondary tw-p-4 tw-text-sm tw-text-secondary-foreground">
-              <CopyButton
-                className="tw-float-right"
-                content={canvasInstructionClaudeMd}
-              />
-              {canvasInstructionClaudeMd}
-            </div>
-          )}
-          {isFetching && !canvasInstructionClaudeMd && (
-            <div className="tw-flex tw-flex-col tw-gap-2">
-              <p className="tw-text-sm tw-text-muted-foreground">
-                Fetching the Canvas Pre-Prompt, please wait...
-              </p>
-            </div>
-          )}
-          {isError && (
-            <div className="tw-flex tw-flex-col tw-gap-2">
-              <p className="tw-text-sm tw-text-muted-foreground">
-                Failed to fetch the Canvas Pre-Prompt.
-              </p>
-            </div>
-          )}
+          <div className="tw-h-[500px] tw-max-h-[500px] tw-overflow-y-auto tw-whitespace-pre-line tw-rounded-md tw-border tw-border-border/50 tw-bg-secondary tw-p-4 tw-text-sm tw-text-secondary-foreground">
+            {isFetching && !canvasInstruction && (
+              <div className="tw-flex tw-flex-col tw-gap-2">
+                <p className="tw-text-sm tw-text-muted-foreground">
+                  Fetching the Canvas Pre-Prompt, please wait...
+                </p>
+              </div>
+            )}
+            {isError && (
+              <div className="tw-flex tw-flex-col tw-gap-2">
+                <p className="tw-text-sm tw-text-muted-foreground">
+                  Failed to fetch the Canvas Pre-Prompt.
+                </p>
+              </div>
+            )}
+            {canvasInstruction && (
+              <>
+                <CopyButton
+                  className="tw-float-right"
+                  content={canvasInstruction}
+                />
+                {canvasInstruction}
+              </>
+            )}
+          </div>
         </div>
+        {versions?.canvasInstructionLastUpdated != null && (
+          <div className="tw-text-sm tw-text-muted-foreground">
+            Last updated:{" "}
+            {unixTimestampToDate({
+              unixTimestamp: versions.canvasInstructionLastUpdated,
+            })}
+          </div>
+        )}
         <DialogFooter>
-          <DialogClose asChild>
+          <DialogClose asChild tabIndex={-1}>
             <Button variant="outline">Cancel</Button>
           </DialogClose>
           <AsyncButton
-            disabled={isFetching || !canvasInstructionClaudeMd}
+            disabled={isFetching || !canvasInstruction}
             loadingText={
               <div className="tw-flex tw-items-center tw-gap-2">
                 <LuLoaderCircle className="tw-animate-spin" />
                 <span>Installing...</span>
               </div>
             }
             onClick={async () => {
-              if (!canvasInstructionClaudeMd) {
+              if (!canvasInstruction) {
                 return;
               }
 
               await createSpace({
                 title: "CPLX Canvas",
                 description: "",
                 emoji: "1f5bc-fe0f",
-                instructions: canvasInstructionClaudeMd,
-                model_selection: null,
+                instructions: canvasInstruction,
+                model_selection: "claude2",
               });
             }}
           >

src/services/cplx-api/cplx-api.ts

@@ -34,6 +34,7 @@ export class CplxApiService {
       latest: parsedData[latest],
       changelogEntries: parsedData.changelogEntries,
       featureFlagsEntries: parsedData.featureFlagsEntries,
+      canvasInstructionLastUpdated: parsedData.canvasInstructionLastUpdated,
     };
   }
 

src/services/cplx-api/cplx-api.types.ts

@@ -5,6 +5,7 @@ export const CplxVersionsApiResponseSchema = z.object({
   latestFirefox: z.string(),
   changelogEntries: z.array(z.string()),
   featureFlagsEntries: z.array(z.string()),
+  canvasInstructionLastUpdated: z.number().optional(),
 });
 
 export type CplxVersionsApiResponse = z.infer<

src/utils/dayjs.ts

@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
 
@@ -49,6 +50,20 @@ const IMPORT_MAP: Record<SupportedLangs, () => Promise<unknown>> = {
 
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
+export function unixTimestampToDate({
+  unixTimestamp,
+  includeTime = true,
+}: {
+  unixTimestamp: number;
+  includeTime?: boolean;
+}) {
+  return dayjs
+    .unix(Math.floor(unixTimestamp / 1000))
+    .local()
+    .format(includeTime ? "lll" : "ll");
+}
 
 export function formatHowLongAgo(date: string) {
   return dayjs.utc(date).local().fromNow();