webviewer-redaction-ai sample#84
Conversation
A brand-new sample related to https://apryse.atlassian.net/browse/AS-208.
There was a problem hiding this comment.
Pull request overview
Adds a new webviewer-redaction-ai sample demonstrating AI-assisted PII detection (via LangChain/OpenAI) and redaction in Apryse WebViewer, plus E2E test scaffolding and repo-level registration.
Changes:
- Introduces a new WebViewer client that can analyze document text for PII and create redaction annotations.
- Adds an Express server that handles text ingestion and LLM-based analysis (with a client/server mocking mode).
- Registers the sample in the monorepo (
lerna.json) and rootREADME.md, and adds Playwright E2E config/tests.
Reviewed changes
Copilot reviewed 25 out of 29 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| webviewer-redaction-ai/tools/copy-webviewer-files.js | Postinstall script to copy WebViewer assets into client/lib. |
| webviewer-redaction-ai/server/serve.js | Express dev server with MODE_ENV injection + static hosting. |
| webviewer-redaction-ai/server/llmManager.js | LangChain/OpenAI initialization and message execution helper. |
| webviewer-redaction-ai/server/handler.js | API endpoints for sending text, analyzing PII, and retrieving results. |
| webviewer-redaction-ai/server/config.json | Guardrail prompt/rules and PII classification config for the LLM prompt. |
| webviewer-redaction-ai/playwright.config.js | Playwright configuration for E2E tests. |
| webviewer-redaction-ai/package.json | Sample scripts (start/mock/e2e) and dependencies. |
| webviewer-redaction-ai/package-lock.json | Lockfile for the new sample’s Node dependencies. |
| webviewer-redaction-ai/mainsamplesource.json | Metadata file listing sample source paths. |
| webviewer-redaction-ai/client/ui/functionMap.js | Maps custom UI actions to analyzer + redaction functions. |
| webviewer-redaction-ai/client/ui/custom.json | Modular UI config adding an “AI PII Redaction” button to the toolbar. |
| webviewer-redaction-ai/client/redaction.js | Applies redaction annotations based on analysis results. |
| webviewer-redaction-ai/client/index.js | WebViewer initialization and modular UI import. |
| webviewer-redaction-ai/client/index.html | Client entry HTML loading WebViewer + app modules. |
| webviewer-redaction-ai/client/globals.js | Defines shared app state and initial document URLs. |
| webviewer-redaction-ai/client/document/manager.js | Loads and caches full document text from WebViewer. |
| webviewer-redaction-ai/client/document/analyzer.js | Client-side API calls (or mock responses) to run PII analysis. |
| webviewer-redaction-ai/client/assets/favicon.svg | Sample favicon asset. |
| webviewer-redaction-ai/client/assets/ai-icon.svg | Toolbar icon for the AI redaction button. |
| webviewer-redaction-ai/tests/package.playwright.json | Playwright-related package snippet/config (currently JSON). |
| webviewer-redaction-ai/tests/e2e/webviewer-redaction-ai.spec.js | Playwright E2E tests for the AI redaction workflow. |
| webviewer-redaction-ai/mocks/webviewer-redaction-ai.mock.js | Mock analysis/documentId responses + mocking-mode toggle. |
| webviewer-redaction-ai/README.md | Sample documentation and setup instructions. |
| webviewer-redaction-ai/LICENSE | Sample license file. |
| webviewer-redaction-ai/.gitignore | Ignores client/lib and other generated artifacts. |
| webviewer-redaction-ai/.env.example | Environment variable template for OpenAI + server port. |
| lerna.json | Adds webviewer-redaction-ai to the Lerna package list. |
| README.md | Adds an “Artificial Intelligence” section and lists the new sample. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
webviewer-redaction-ai/__tests__/e2e/webviewer-redaction-ai.spec.js
Outdated
Show resolved
Hide resolved
1. Exposing global declarations (loadedDocument, aiAnalysisResult, and files) via globalThis. Affected files: a. client\document\analyzer.js b. client\globals.js c. client\index.js d. client\redaction.js 2. serve.js -> server.js. Affected file is package.json 3. "npm-run-all --parallel" -> "run-p --race" in test:e2e/test:e2e:ui scripts, so the server is torn down automatically once Playwright completes. Affected file is package.json 4. Eliminate extra code of output parsing and directly using the returned parsed output of llmManager.executeMessages. Affected files: a. server\handler.js b. server\llmManager.js 5. Replacing the weak PRNGs (Math.random) by CSPRNGs (randomBytes) to achieve security. Affected file is server\handler.js 6. Replaced time delays by Playwright's built-in auto-waiting assertions, to avoid running flaky E2E tests across different machines/CI. Affected file is __tests__\e2e\webviewer-redaction-ai.spec.js
1. __mocks__\webviewer-redaction-ai.mock.js: Exposing global declarations (window) via globalThis. 2. client\document\manager.js: Reporting the catch error message. 3. client\index.js: Using top-level await instead of promise chain. 4. client\redaction.js: Using an optional chain expression to ensure maintainability. 5. server\handler.js: Importing Node.js built-in modules using the "node:". Affected files: a. server\handler.js b. server\server.js 6. server\llmManager.js: a. llm & parser to be declared as fields. b. Using number static methods and properties instead of global equivalents. c. Replace if-then-else flow by a single return statement.
This is round two of clearing SonarQubeCloud issues, as it reports more new issues at every new commit. 1. __mocks__\webviewer-redaction-ai.mock.js: Compare with `undefined` directly instead of using `typeof`. 2. client\index.js: Using top-level await instead of calling an async function importModularComponents.
This is round three of clearing SonarQubeCloud issues, as it reports more new issues at every new commit. __mocks__\webviewer-redaction-ai.mock.js: Strict equality operators should not be used with dissimilar types.
There was a problem hiding this comment.
Pull request overview
Adds a new WebViewer Redaction AI sample that detects Personally Identifiable Information (PII) in PDFs using an OpenAI/LangChain-backed server, then applies redaction annotations in the WebViewer UI. It also includes mocking + Playwright E2E coverage and registers the sample in the monorepo.
Changes:
- Added an Express server with LangChain/OpenAI integration and configurable guard-rail prompt rules.
- Added a WebViewer client with custom modular UI, PII analysis trigger, and redaction application logic.
- Added mocking mode + Playwright E2E tests and wired the sample into root README +
lerna.json.
Reviewed changes
Copilot reviewed 25 out of 29 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| webviewer-redaction-ai/tools/copy-webviewer-files.js | Postinstall script to copy WebViewer assets into client/lib. |
| webviewer-redaction-ai/server/server.js | Express server entrypoint + static hosting + MODE_ENV injection for mocking. |
| webviewer-redaction-ai/server/llmManager.js | LangChain/OpenAI wrapper for invoking the model and parsing responses. |
| webviewer-redaction-ai/server/handler.js | API endpoints for sending text, analyzing PII, and retrieving results. |
| webviewer-redaction-ai/server/config.json | Guard-rail prompt template, PII categories, and response rules. |
| webviewer-redaction-ai/playwright.config.js | Playwright test configuration for the sample. |
| webviewer-redaction-ai/package.json | Sample scripts (start/mock/e2e) and dependencies. |
| webviewer-redaction-ai/package-lock.json | Locked dependency tree for the sample. |
| webviewer-redaction-ai/mainsamplesource.json | Metadata pointing to the sample’s key source files. |
| webviewer-redaction-ai/client/ui/functionMap.js | Maps custom UI actions to analysis + redaction workflow. |
| webviewer-redaction-ai/client/ui/custom.json | Custom modular UI configuration adding the AI PII redaction tool button. |
| webviewer-redaction-ai/client/redaction.js | Converts AI results into text searches and redaction annotations. |
| webviewer-redaction-ai/client/index.js | Bootstraps WebViewer, imports modular UI, initializes document manager. |
| webviewer-redaction-ai/client/index.html | Client HTML shell loading WebViewer + app scripts. |
| webviewer-redaction-ai/client/globals.js | Global shared state + sample document list. |
| webviewer-redaction-ai/client/document/manager.js | Extracts and caches document text across pages for analysis. |
| webviewer-redaction-ai/client/document/analyzer.js | Client-side orchestration of send/analyze/get-results + mocking support. |
| webviewer-redaction-ai/client/assets/favicon.svg | Sample favicon asset. |
| webviewer-redaction-ai/client/assets/ai-icon.svg | Icon asset for the AI toolbar button. |
| webviewer-redaction-ai/tests/package.playwright.json | Playwright package metadata for test execution. |
| webviewer-redaction-ai/tests/e2e/webviewer-redaction-ai.spec.js | Playwright E2E validating button presence + redaction flow. |
| webviewer-redaction-ai/mocks/webviewer-redaction-ai.mock.js | Mock responses and mocking-mode detection used by client/server. |
| webviewer-redaction-ai/README.md | Sample documentation and setup instructions. |
| webviewer-redaction-ai/LICENSE | Sample licensing terms. |
| webviewer-redaction-ai/.gitignore | Ignores node_modules and copied WebViewer assets. |
| webviewer-redaction-ai/.env.example | Example env vars for OpenAI + server port. |
| lerna.json | Registers webviewer-redaction-ai as a managed package. |
| README.md | Adds an “Artificial Intelligence” section and lists the new sample. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| // Generate unique document ID | ||
| const documentId = `doc_${Date.now()}_${randomBytes(9).toString('base64url')}`; | ||
|
|
||
| // Store the document text | ||
| documentStore.set(documentId, { | ||
| text: documentText, | ||
| receivedAt: new Date().toISOString(), | ||
| clientTimestamp: timestamp, | ||
| textLength: documentText.length | ||
| }); |
There was a problem hiding this comment.
@Mohammed-AbdulRahman-Apryse this needs to be addressed. Evaluate the potential risk as described in this copilot comment:
documentText is stored indefinitely in an in-memory Map
Then assign this to me and another SF team member.
There was a problem hiding this comment.
This sample supposedly is to demonstrate the integration of AI with the WebViewer capabilities in identifying personal information for redaction.
What CoPilot is reporting here, a potential server crashes may occur because of unmanageable number of files stored in memory with different sizes that could be large.
Then CoPilot suggested a treatment of this scenario via adding a workaround for In-memory store for documents and analyses with TTL and max entry limits.
The customer supposedly is concentrating on the integration between AI and WebViewer.
Since this sample -- which is not a production application -- when we provide this workaround for demonstrating fixing security issues on the server side, this will be out of the scoop for the sample.
That will be an extra coding to add to the sample, which may or may not be out of the customer concerns.
I believe, If the customer is facing such a problem, it is his responsibility to implement a workaround on his side.
Does this seem sense?
1. mocking connection to OpenAI via intercept the three HTTP calls (/api/send-text, /api/analyze-pii, and /api/get-results). Affected file __mocks__\webviewer-redaction-ai.mock.js 2. re-write the tests to call the mocking from __mocks__\webviewer-redaction-ai.mock.js when performing AI PII redaction. Affected file __tests__\e2e\webviewer-redaction-ai.spec.js 3. Remove mocking from the original source code. Affected files: a. client\document\analyzer.js b. server\handler.js 4. Remove injecting mocking mode. Affected files: a. package.json b. server\server.js
|
Applied Logan Bittner instruction in aedbbd3, with SonarQube report shows 0 issues. |
There was a problem hiding this comment.
Pull request overview
Adds a new webviewer-redaction-ai sample that runs a small Express backend using LangChain/OpenAI to detect PII in PDF text, then applies WebViewer redactions in the client UI. This also updates the repo’s sample listings/monorepo config to include the new sample.
Changes:
- New client + server sample for AI-assisted PII detection and redaction in WebViewer.
- Adds Playwright E2E test coverage with mocked API routes.
- Registers the sample in the root README and
lerna.json.
Reviewed changes
Copilot reviewed 25 out of 29 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| webviewer-redaction-ai/tools/copy-webviewer-files.js | Postinstall helper to copy WebViewer lib assets into the sample. |
| webviewer-redaction-ai/server/server.js | Express server entrypoint to serve /client and mount API handlers. |
| webviewer-redaction-ai/server/llmManager.js | LangChain/OpenAI initialization + message execution helper. |
| webviewer-redaction-ai/server/handler.js | API routes for sending text, analyzing PII, and returning results. |
| webviewer-redaction-ai/server/config.json | Guardrail prompt/rules + PII classification config for the LLM. |
| webviewer-redaction-ai/playwright.config.js | Playwright setup to run E2E tests against the sample server. |
| webviewer-redaction-ai/package.json | Sample scripts (start, postinstall, Playwright) and dependencies. |
| webviewer-redaction-ai/package-lock.json | Lockfile for sample dependencies. |
| webviewer-redaction-ai/mainsamplesource.json | Metadata referencing key sample source files. |
| webviewer-redaction-ai/client/ui/functionMap.js | Wires the custom UI button to analysis + redaction flow. |
| webviewer-redaction-ai/client/ui/custom.json | Modular UI definition adding an AI PII redaction button/toolgroup. |
| webviewer-redaction-ai/client/redaction.js | Searches for detected PII strings and creates redaction annotations. |
| webviewer-redaction-ai/client/index.js | Bootstraps WebViewer, loads modular UI, initializes document manager. |
| webviewer-redaction-ai/client/index.html | Client HTML entrypoint loading WebViewer + globals + module script. |
| webviewer-redaction-ai/client/globals.js | Defines global state and default sample documents list. |
| webviewer-redaction-ai/client/document/manager.js | Extracts and caches full document text from the loaded PDF. |
| webviewer-redaction-ai/client/document/analyzer.js | Client-side API calls to send text/analyze/fetch results. |
| webviewer-redaction-ai/client/assets/favicon.svg | Sample favicon asset. |
| webviewer-redaction-ai/client/assets/ai-icon.svg | Icon for the AI toolbar button. |
| webviewer-redaction-ai/tests/package.playwright.json | Playwright test package metadata for the test harness. |
| webviewer-redaction-ai/tests/e2e/webviewer-redaction-ai.spec.js | E2E tests for the AI PII redaction flow. |
| webviewer-redaction-ai/mocks/webviewer-redaction-ai.mock.js | Route mocks + fixture data for the E2E flow. |
| webviewer-redaction-ai/README.md | Sample documentation and setup instructions. |
| webviewer-redaction-ai/LICENSE | Sample licensing file. |
| webviewer-redaction-ai/.gitignore | Ignores node_modules and copied WebViewer lib artifacts. |
| webviewer-redaction-ai/.env.example | Example env vars for OpenAI + server port. |
| lerna.json | Adds webviewer-redaction-ai to the Lerna package list. |
| README.md | Adds an “Artificial Intelligence” section and lists the new sample. |
Files not reviewed (1)
- webviewer-redaction-ai/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…sues 1. Validate this.#instance before using it. Affected file client\document\manager.js 2. Document type declaration is invalid. Changed <!DOCTYPE> into <!DOCTYPE html>. Affected file client\index.html 3. Combine searching modes into one numeric flag before calling textSearchInit. Affected file client\redaction.js 4. Replacing AssistantMessage by SystemMessage to avoid alias, as it is misleading when reading the handler. Affected file server\handler.js 5. Return parsedResponse directly instead of parsedResponse.content. Affected file server\llmManager.js 6. For testing purposes, prevent the server from opening the browser automatically when it starts. Affected file server\server.js
|
DavidEGutierrez
left a comment
There was a problem hiding this comment.
Tested sample to work as expected. The e2e test definitions work as expected and validate UI elements involved in finding PII data.



Description
A brand-new sample to identify and apply redaction of the personal information in the provided PDF
Resources
Checklist
If you are adding a new sample
lerna.jsonwith the new sample nameIf you are removing an old sample
lerna.json