Fix: Extracting from the new Claude interface (#293)

* fix: extracting Claude artifact content

* fix: close Claude artifact

* fix: getting inputs list and titles

* fix: catching artifact names

* 3.8.11

Author: Hugo-COLLIN

package.json

@@ -1,6 +1,6 @@
 {
   "name": "save-my-chatbot",
-  "version": "3.8.10",
+  "version": "3.8.11",
   "license": "RMD-C 1.1",
   "author": "Hugo COLLIN",
   "homepage": "https://save.hugocollin.com",

public/files/updateNotes.md

@@ -1,7 +1,8 @@
 # Update notes
 # 3.8.10
-🧩 Fixing Perplexity Pages export
-Some quirky things under the hood but Perplexity Pages export is now working again!
+🧩 Fixing Perplexity Pages and Claude export
+Claude changed its interface again, but we're back on track!
+Plus, Perplexity Pages export is now working again!
 
 # 3.8.9
 🧩 Fixing Perplexity and Claude export

src/core/services/pageExtractor/defineAction.ts

@@ -5,10 +5,10 @@ import {sleep} from "../../utils/jsShorteners";
 //TODO: currently for Claude artifacts, needs to be generalized
 async function clickActClose(markdown: string | undefined, format: ((html: string) => string) | undefined, extractionTypeId: string, btns?: NodeListOf<any>) {
   // selector duplication with processMessage in ClaudeChat.js and contentSelector in ClaudeChat.json
-  const pane = document.querySelector("div.fixed.flex");
+  const pane = document.querySelector("body div.h-full.overflow-hidden.flex-1");
 
   for (const artifactBtn of btns?.values() ?? []) {
-    const artifactName = artifactBtn.querySelector(".break-all")?.textContent
+    const artifactName = artifactBtn.querySelector(".shrink.flex, .leading-tight")?.textContent
     // console.log(artifactName)
     // @ts-ignore
     artifactBtn.click();
@@ -43,7 +43,7 @@ async function clickActClose(markdown: string | undefined, format: ((html: strin
   }
 
   // @ts-ignore
-  pane?.querySelector(".justify-end > button")?.click(); // close artifact
+  pane?.querySelector(`.text-sm.items-center.gap-2.flex > .active\\:scale-95.rounded-md.w-8.h-8.aria-expanded\\:text-text-100.aria-checked\\:text-text-100.aria-pressed\\:text-text-100.hover\\:text-text-100.aria-expanded\\:bg-bg-300.aria-checked\\:bg-bg-400.aria-pressed\\:bg-bg-400.hover\\:bg-bg-400.ease-\\[cubic-bezier\\(0\\.165\\,0\\.85\\,0\\.45\\,1\\)\\].duration-300.font-styrene.transition.border-transparent.text-text-300.disabled\\:drop-shadow-none.disabled\\:shadow-none.disabled\\:opacity-50.disabled\\:pointer-events-none.select-none.can-focus.shrink-0.relative.justify-center.items-center.inline-flex`)?.click(); // close artifact
 
   return markdown;
 }
@@ -58,7 +58,7 @@ export async function defineAction(action: {
       return clickElements(action.selector);
     case "click_act_close":
       let md = await clickActClose(markdown, format, `CAPTURE_ARTIFACT_CONTENT`, document.querySelectorAll('.font-claude-message button[aria-label]'));
-      md = await clickActClose(md, format, "CAPTURE_INPUT_CONTENT", document.querySelectorAll('[data-test-render-count] button[data-testid]'));
+      md = await clickActClose(md, format, "CAPTURE_INPUT_CONTENT", document.querySelectorAll('[data-testid=\"file-thumbnail\"]'));
       return md;
     // case "scroll":
     //   return scrollElements;

src/features/scraper/domains/ClaudeChat.js

@@ -2,7 +2,7 @@ import {capitalizeFirst} from "../../../core/services/format/formatText";
 
 export async function processMessage(content, format, metadata) {
   const messageSelector = content.querySelector("[data-testid=\"user-message\"], [data-is-streaming] > div");
-  const inputsSelector = content.querySelectorAll("button[data-testid]");
+  const inputsSelector = content.querySelectorAll('[data-testid=\"file-thumbnail\"]');
 
   const entityName = content?.querySelector("[data-is-streaming]")
     ? "Claude"
@@ -12,7 +12,7 @@ export async function processMessage(content, format, metadata) {
 
   let inputsText = "##### Content:\n";
   inputsText += Array.from(inputsSelector).map((input) => {
-    const text = input?.querySelector(".break-words")?.textContent ?? "Input";
+    const text = input?.querySelector(".shrink.flex")?.textContent ?? "Input";
     return `{{@CAPTURE_INPUT_CONTENT:${text}}}`;
   }).join("\n");
 

src/features/scraper/rules/rules.ts

@@ -249,7 +249,7 @@ export function filter_captureArtifactContent_Claude(node: Element) {
 }
 
 export function replacement_captureArtifactContent_Claude(content: any, node: Element) {
-  return `{{@CAPTURE_ARTIFACT_CONTENT:${node.querySelector(".break-all")?.textContent}}}`;
+  return `{{@CAPTURE_ARTIFACT_CONTENT:${node.querySelector(".leading-tight")?.textContent}}}`;
 }