[Tock Studio] Evaluation samples front + npm registry pre-commit hook (Dercbot 1751)

[rkuffer]

Evaluation samples front + npm registry pre-commit hook

Closes #2010
Closes #2011

⚠️ This PR requires the backend counterpart to be merged first:
👉 #2001

---

Summary

This PR delivers two independent contributions:

1. The frontend implementation of the evaluation samples feature, adding a dedicated Answers quality module to Tock Studio.
2. A Git pre-commit hook that automatically sanitizes package-lock.json before each commit, replacing any private npm registry URLs with the standard public registry (https://registry.npmjs.org).

---

1. Answers quality module

New Answers quality module

• Samples board — lists all existing evaluation samples
• Sample creation — builds a sample by randomly selecting dialog entries over a given time period (optionaly including test dialogs)
• Sample detail — displays all entries of a sample with their annotation status
• Annotation — allows rating each bot response as positive or negative directly from the sample detail view
• In-chat dialog evaluator — enables annotating bot exchanges in context, directly from the chat UI
• Report generation — produces a PDF synthesis document from a sample once the evaluation is validated

Shared components & utilities

• New chat-ui-dialog-evaluator component integrated into the chat UI
• Supporting models, services, and utils

---

2. Git pre-commit hook — npm registry sanitization

When working behind a corporate npm mirror, the private registry URL can silently end up in package-lock.json and get committed to the repository. This hook prevents that.

How it works:

• The hook runs automatically before each commit
• It scans package-lock.json for any non-standard registry URL and replaces it with https://registry.npmjs.org
• It is installed automatically on npm install — no manual step required
• A dry-run mode is available: DRY_RUN=1 bash .git/hooks/pre-commit

The .npmrc registry line has also been commented out to avoid interfering with standard environments.

---

How to test

Answers quality

1. Ensure the backend PR [DERCBOT-1783] Admin: add evaluation sample management API #2001 is deployed
2. Navigate to the new Answers quality section in Tock Studio
3. Create a sample by selecting a time period — verify that random dialog entries are picked
4. Open the sample detail and annotate all bot responses
5. Validate the evaluation
6. Generate a PDF report and verify its content

Pre-commit hook

1. Run npm install in bot/admin/web and verify the hook is present at .git/hooks/pre-commit
2. Temporarily set a private registry URL in package-lock.json and run git commit — verify the URL is replaced before the commit goes through
3. Optionally run DRY_RUN=1 bash .git/hooks/pre-commit to preview replacements without modifying any file

[Copilot]

Pull request overview

This PR adds a new Answers Quality area in Tock Studio to create, browse, annotate, validate, and export evaluation samples, and introduces a git pre-commit hook that sanitizes package-lock.json to prevent committing private npm registry URLs.

Changes:

• Add the “Answers Quality” / evaluation samples UI (board, creation dialog, detail view with in-chat evaluator, PDF export).
• Add a shared web-worker-based markdown diff + shared markup/highlighting plumbing and UI styling utilities.
• Install a pre-commit hook via npm install to rewrite non-public package-lock.json resolved URLs to https://registry.npmjs.org.

Reviewed changes

Copilot reviewed 101 out of 106 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
bot/admin/web/tsconfig.worker.json	Add TS config for web workers
bot/admin/web/src/app/theme/styles/wysiwyg-editor.scss	Adjust editor code highlighting/theme
bot/admin/web/src/app/theme/styles/utilities.scss	Add/adjust global utility classes
bot/admin/web/src/app/theme/styles/styles.scss	Import additional stylesheet(s)
bot/admin/web/src/app/theme/components/header/header.component.ts	Avoid duplicate config reset call
bot/admin/web/src/app/theme/components/footer/footer.component.ts	Load global message on init
bot/admin/web/src/app/theme/components/footer/footer.component.html	Render global message + reformat links
bot/admin/web/src/app/shared/utils/utils.ts	Add date helpers, scroll helper, diff helper
bot/admin/web/src/app/shared/utils/markup.utils.ts	Centralize marked/highlight/sanitize parser
bot/admin/web/src/app/shared/model/response-issue.ts	Add shared “response issue reason” model
bot/admin/web/src/app/shared/model/dialog-data.ts	Add evaluation expando + bot-answer helpers
bot/admin/web/src/app/shared/directives/fullscreen/fullscreen.directive.ts	Simplify fullscreenchange listener
bot/admin/web/src/app/shared/components/sticky-menu/sticky-menu.component.scss	Tweak shadow styling
bot/admin/web/src/app/shared/components/sentence-training/sentence-training.component.ts	Use shared scroll-to-top util
bot/admin/web/src/app/shared/components/scroll-top-button/scroll-top-button.component.ts	Use shared scroll-to-top util
bot/admin/web/src/app/shared/components/no-data-found/no-data-found.component.scss	Ensure host is block-level
bot/admin/web/src/app/shared/components/index.ts	Export new chat evaluator component
bot/admin/web/src/app/shared/components/choice-dialog/choice-dialog.component.html	Header layout tweak
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-message/chat-ui-message.component.ts	Add inputs for debug + eval background
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-message/chat-ui-message.component.scss	Add eval background styles
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-message/chat-ui-message.component.html	Apply eval background + hide debug option
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-message/chat-ui-message-sentence-footnotes/chat-ui-message-sentence-footnotes.component.scss	Adjust footnotes background
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-message/chat-ui-display-markup/chat-ui-display-markup.component.ts	Use centralized marked parser
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-dialog-logger/chat-ui-dialog-logger.component.ts	Reuse bot-answer helper logic
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-dialog-logger/chat-ui-dialog-logger.component.html	Reuse bot-answer helper logic
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-dialog-evaluator/chat-ui-dialog-evaluator.component.ts	New in-chat evaluator UI logic
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-dialog-evaluator/chat-ui-dialog-evaluator.component.scss	New evaluator styling
bot/admin/web/src/app/shared/components/chat-ui/chat-ui-dialog-evaluator/chat-ui-dialog-evaluator.component.html	New evaluator template
bot/admin/web/src/app/shared/components/annotation/annotations.ts	Replace annotation reason with shared enum
bot/admin/web/src/app/shared/components/annotation/annotation.component.ts	Use shared response issue reasons
bot/admin/web/src/app/shared/bot-shared.module.ts	Register evaluator + context menu module
bot/admin/web/src/app/rag/rag-settings/rag-settings.component.html	Modal card class adjustments
bot/admin/web/src/app/quality/samples/utils.ts	Add evaluation samples helpers
bot/admin/web/src/app/quality/samples/samples-board/samples-board.component.ts	Add samples board component
bot/admin/web/src/app/quality/samples/samples-board/samples-board.component.spec.ts	Add board component smoke test
bot/admin/web/src/app/quality/samples/samples-board/samples-board.component.scss	Add board layout styling
bot/admin/web/src/app/quality/samples/samples-board/samples-board.component.html	Add samples board UI
bot/admin/web/src/app/quality/samples/sample-detail/sample-detail.component.ts	Add sample detail + evaluation flows
bot/admin/web/src/app/quality/samples/sample-detail/sample-detail.component.spec.ts	Add detail component smoke test
bot/admin/web/src/app/quality/samples/sample-detail/sample-detail.component.scss	Add detail view styles
bot/admin/web/src/app/quality/samples/sample-detail/sample-detail.component.html	Add detail view UI
bot/admin/web/src/app/quality/samples/sample-create/sample-create.component.ts	Add sample creation dialog
bot/admin/web/src/app/quality/samples/sample-create/sample-create.component.spec.ts	Add create component smoke test
bot/admin/web/src/app/quality/samples/sample-create/sample-create.component.html	Add create dialog UI
bot/admin/web/src/app/quality/samples/models.ts	Add evaluation sample model types
bot/admin/web/src/app/quality/samples/generate-sample-report.ts	Add PDF report generation
bot/admin/web/src/app/quality/quality.module.ts	Add quality feature module
bot/admin/web/src/app/quality/quality-tabs.component.ts	Add quality tabs host component
bot/admin/web/src/app/quality/quality-routing.module.ts	Add quality routes
bot/admin/web/src/app/quality/datatsets/services/markdown-diff.worker.ts	Add markdown diff web worker
bot/admin/web/src/app/quality/datatsets/services/markdown-diff.service.ts	Add worker dispatcher service
bot/admin/web/src/app/quality/datatsets/models.ts	Add datasets domain models (front)
bot/admin/web/src/app/quality/datatsets/doc-dataset-draft.md	Add datasets design draft doc
bot/admin/web/src/app/quality/datatsets/datasets-board/datasets-board.component.ts	Add datasets board (WIP)
bot/admin/web/src/app/quality/datatsets/datasets-board/datasets-board.component.scss	Add datasets board styling
bot/admin/web/src/app/quality/datatsets/datasets-board/datasets-board.component.html	Add datasets board template
bot/admin/web/src/app/quality/datatsets/datasets-board/dataset-board-entry/datasets-board-entry.component.ts	Add dataset board entry UI logic
bot/admin/web/src/app/quality/datatsets/datasets-board/dataset-board-entry/datasets-board-entry.component.scss	Add dataset entry styling
bot/admin/web/src/app/quality/datatsets/datasets-board/dataset-board-entry/datasets-board-entry.component.html	Add dataset entry template
bot/admin/web/src/app/quality/datatsets/dataset-detail/settings-diff/settings-diff.component.ts	Add settings diff dialog logic
bot/admin/web/src/app/quality/datatsets/dataset-detail/settings-diff/settings-diff.component.scss	Add settings diff styling
bot/admin/web/src/app/quality/datatsets/dataset-detail/settings-diff/settings-diff.component.html	Add settings diff template
bot/admin/web/src/app/quality/datatsets/dataset-detail/dataset-detail.component.ts	Add dataset run detail view logic
bot/admin/web/src/app/quality/datatsets/dataset-detail/dataset-detail.component.scss	Add dataset detail styling
bot/admin/web/src/app/quality/datatsets/dataset-detail/dataset-detail.component.html	Add dataset detail template
bot/admin/web/src/app/quality/datatsets/dataset-detail/dataset-detail-entry/dataset-detail-entry.component.ts	Add per-question comparison entry
bot/admin/web/src/app/quality/datatsets/dataset-detail/dataset-detail-entry/dataset-detail-entry.component.scss	Add per-question styling
bot/admin/web/src/app/quality/datatsets/dataset-detail/dataset-detail-entry/dataset-detail-entry.component.html	Add per-question template
bot/admin/web/src/app/quality/datatsets/dataset-create/dataset-create.component.ts	Add dataset create/edit dialog
bot/admin/web/src/app/quality/datatsets/dataset-create/dataset-create.component.html	Add dataset create/edit template
bot/admin/web/src/app/quality/datatsets/api-contract-datasets.md	Add datasets API contract doc
bot/admin/web/src/app/playground/playground.component.html	Modal card class adjustments
bot/admin/web/src/app/metrics/metrics-board/metrics-board.component.scss	Remove unused modal class styling
bot/admin/web/src/app/metrics/metrics-board/metrics-board.component.html	Update modal card sizing class
bot/admin/web/src/app/language-understanding/intents-logs/intents-logs.component.ts	Use shared scroll-to-top util
bot/admin/web/src/app/core-nlp/rest/rest.service.ts	Allow returning 400/422 to caller
bot/admin/web/src/app/core-nlp/application.resolver.ts	Formatting cleanup
bot/admin/web/src/app/configuration/vector-db-settings/vector-db-settings.component.html	Modal card class adjustments
bot/admin/web/src/app/configuration/sentence-generation-settings/sentence-generation-settings.component.html	Modal card class adjustments
bot/admin/web/src/app/configuration/observability-settings/observability-settings.component.html	Modal card class adjustments
bot/admin/web/src/app/configuration/compressor-settings/compressor-settings.component.html	Modal card class adjustments
bot/admin/web/src/app/bot/i18n/i18n.component.ts	Use shared scroll-to-top util
bot/admin/web/src/app/bot-admin-app.component.ts	Add “Answers Quality” nav entry
bot/admin/web/src/app/bot-admin-app-routing.module.ts	Add lazy route for quality module
bot/admin/web/src/app/applications/applications.resolver.ts	Formatting cleanup
bot/admin/web/src/app/applications/application/application.component.html	Remove redundant button status
bot/admin/web/src/app/analytics/dialogs/dialogs.ts	Use shared response issue reasons
bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list.component.ts	Use shared scroll-to-top util
bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list-filters/dialogs-list-filters.component.ts	Use shared response issue reasons
bot/admin/web/src/app/analytics/chart/chart.component.ts	Remove dead commented pdf export
bot/admin/web/src/app/analytics/behavior/behavior.component.ts	Remove dead commented pdf export
bot/admin/web/src/app/analytics/activity/activity.component.ts	Remove dead commented pdf export
bot/admin/web/scripts/hooks/pre-commit	Add lockfile sanitization hook
bot/admin/web/scripts/hooks/install-hooks.js	Auto-install hook on npm prepare
bot/admin/web/package.json	Add prepare hook + pdfmake dep + eslint bump
bot/admin/web/angular.json	Enable web worker tsconfig
bot/admin/web/README.md	Document hook + update local run steps
bot/admin/web/.npmrc	Comment out registry override

---

You can also share your feedback on Copilot code review. Take the survey.

[assouktim]

A few minor comments

[assouktim]

Thank you!