From c406338617925dfd2cbcb5cc66bf9ed615f783e4 Mon Sep 17 00:00:00 2001 From: Aravind Date: Fri, 20 Mar 2026 18:31:44 +0530 Subject: [PATCH 1/3] Add warning about sensitive data in Kapa AI chat disclaimer Signed-off-by: Aravind --- layouts/partials/custom/head-end.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/layouts/partials/custom/head-end.html b/layouts/partials/custom/head-end.html index 6933ef943..60a58e686 100644 --- a/layouts/partials/custom/head-end.html +++ b/layouts/partials/custom/head-end.html @@ -29,7 +29,10 @@ data-project-color="#41AFAF" data-project-logo="https://docs.communityhealthtoolkit.org/logo.png" data-font-family="Noto Sans,sans-serif" - data-modal-disclaimer="This is a custom LLM for Community Health Toolkit (CHT) with access to all [Documentation](https://docs.communityhealthtoolkit.org), [GitHub Issues and READMEs](https://github.com/medic/cht-core) and the [CHT Forum](https://forum.communityhealthtoolkit.org). Rate the answers to let us know what you think!" + data-modal-disclaimer="This is a custom LLM for Community Health Toolkit (CHT) with access to all [Documentation](https://docs.communityhealthtoolkit.org), [GitHub Issues and READMEs](https://github.com/medic/cht-core) and the [CHT Forum](https://forum.communityhealthtoolkit.org). Rate the answers to let us know what you think! + +⚠️ NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa." + data-search-disclaimer="⚠️ NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa." data-modal-example-questions="How do I run the CHT locally?,How can I contribute to the CHT?" data-button-text-color="#FFFFFF" data-modal-header-bg-color="#41AFAF" @@ -40,6 +43,7 @@ data-modal-ask-ai-input-placeholder="Ask me a question about the CHT..." data-consent-required="true" data-consent-screen-title="Search and Ask AI are powered by Kapa" + data-consent-screen-body="NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa." data-consent-screen-disclaimer="By clicking "I agree", you consent to the use of search and the AI assistant in accordance with kapa.ai's [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This service uses reCAPTCHA, which requires your consent to Google's [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms). By proceeding, you explicitly agree to both kapa.ai's and Google's privacy policies." data-consent-screen-accept-button-text="I agree!" data-modal-open-on-command-k="false" From 728d0a4d8652ce54c0e595494a042139fe310cb2 Mon Sep 17 00:00:00 2001 From: Aravind Date: Wed, 1 Apr 2026 09:54:39 +0530 Subject: [PATCH 2/3] Add Disclaimer for Search & improve font colour for AI Generated answer Signed-off-by: Aravind --- .gitignore | 1 + layouts/partials/custom/head-end.html | 262 ++++++++++++++++++-------- 2 files changed, 186 insertions(+), 77 deletions(-) diff --git a/.gitignore b/.gitignore index 19bb929be..60a34ce08 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ tech-doc-hugo .DS_Store .idea .hugo_build.lock +_vendor/ diff --git a/layouts/partials/custom/head-end.html b/layouts/partials/custom/head-end.html index 60a58e686..178b15f90 100644 --- a/layouts/partials/custom/head-end.html +++ b/layouts/partials/custom/head-end.html @@ -32,7 +32,6 @@ data-modal-disclaimer="This is a custom LLM for Community Health Toolkit (CHT) with access to all [Documentation](https://docs.communityhealthtoolkit.org), [GitHub Issues and READMEs](https://github.com/medic/cht-core) and the [CHT Forum](https://forum.communityhealthtoolkit.org). Rate the answers to let us know what you think! ⚠️ NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa." - data-search-disclaimer="⚠️ NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa." data-modal-example-questions="How do I run the CHT locally?,How can I contribute to the CHT?" data-button-text-color="#FFFFFF" data-modal-header-bg-color="#41AFAF" @@ -43,7 +42,6 @@ data-modal-ask-ai-input-placeholder="Ask me a question about the CHT..." data-consent-required="true" data-consent-screen-title="Search and Ask AI are powered by Kapa" - data-consent-screen-body="NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa." data-consent-screen-disclaimer="By clicking "I agree", you consent to the use of search and the AI assistant in accordance with kapa.ai's [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This service uses reCAPTCHA, which requires your consent to Google's [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms). By proceeding, you explicitly agree to both kapa.ai's and Google's privacy policies." data-consent-screen-accept-button-text="I agree!" data-modal-open-on-command-k="false" @@ -100,6 +98,10 @@ SEARCH: 'search' }; + const SEARCH_NOTICE_ID = 'cht-search-notice'; + + const NOTICE_TEXT = '⚠️ NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa.'; + /** * Open Kapa modal in specified mode * @param {string} mode - 'ai' or 'search' @@ -259,6 +261,59 @@ }); }; + const injectSearchNotice = () => { + const kapaContainer = document.querySelector('#kapa-widget-container'); + if (!kapaContainer || !kapaContainer.shadowRoot) return; + + const shadowRoot = kapaContainer.shadowRoot; + + const isDark = document.documentElement.classList.contains('dark'); + + const buildNotice = () => { + const notice = document.createElement('div'); + notice.id = SEARCH_NOTICE_ID; + notice.style.cssText = [ + 'font-size: 13px', + 'padding: 10px 14px', + 'margin: 8px 0 4px 0', + 'border-radius: 4px', + 'line-height: 1.5', + 'background-color: ' + (isDark ? '#2e2e2e' : '#DFEAEA'), + 'color: ' + (isDark ? '#ffffff' : '#000000'), + ].join(';'); + notice.textContent = NOTICE_TEXT; + return notice; + }; + + const tryInject = () => { + const existing = shadowRoot.querySelector('#' + SEARCH_NOTICE_ID); + + const searchInput = shadowRoot.querySelector('input[type="text"]') + || shadowRoot.querySelector('input[placeholder*="earch"]'); + + if (!searchInput) { + + if (existing) existing.remove(); + return; + } + + if (existing) return; + + const inputRoot = searchInput.closest('[class*="Input-wrapper"]') + || searchInput.closest('[class*="input-wrapper"]') + || searchInput.parentElement; + + if (!inputRoot) return; + + inputRoot.insertAdjacentElement('afterend', buildNotice()); + }; + + const observer = new MutationObserver(tryInject); + observer.observe(shadowRoot, { childList: true, subtree: true }); + + tryInject(); + }; + /** * Sync Kapa's dark mode with site theme. * Kapa uses Shadow DOM which blocks external CSS, so we must: @@ -270,84 +325,136 @@ const colorScheme = isDark ? 'dark' : 'light'; const kapaContainer = document.querySelector('#kapa-widget-container'); - if (kapaContainer && kapaContainer.shadowRoot) { - const shadowRoot = kapaContainer.shadowRoot; - const kapaWidgetRoot = shadowRoot.querySelector('#kapa-widget-root'); - if (kapaWidgetRoot) { - kapaWidgetRoot.setAttribute('data-mantine-color-scheme', colorScheme); + if (!kapaContainer || !kapaContainer.shadowRoot) return; + + const shadowRoot = kapaContainer.shadowRoot; + const kapaWidgetRoot = shadowRoot.querySelector('#kapa-widget-root'); + if (kapaWidgetRoot) { + kapaWidgetRoot.setAttribute('data-mantine-color-scheme', colorScheme); + } + + const styleId = 'kapa-dark-mode-overrides'; + let styleEl = shadowRoot.querySelector('#' + styleId); + + if (isDark) { + if (!styleEl) { + styleEl = document.createElement('style'); + styleEl.id = styleId; + shadowRoot.appendChild(styleEl); } + styleEl.textContent = ` - // Inject dark mode CSS overrides into shadow DOM - const styleId = 'kapa-dark-mode-overrides'; - let styleEl = shadowRoot.querySelector(`#${styleId}`); + [data-mantine-color-scheme="dark"] .mantine-Title-root { + color: #e0e0e0 !important; + } - if (isDark) { - if (!styleEl) { - styleEl = document.createElement('style'); - styleEl.id = styleId; - shadowRoot.appendChild(styleEl); + [data-mantine-color-scheme="dark"] .mantine-Text-root { + color: #e0e0e0 !important; } - styleEl.textContent = ` - /* Dark mode: Question title */ - [data-mantine-color-scheme="dark"] .mantine-Title-root { - color: #e0e0e0 !important; - } - /* Dark mode: Answer content text */ - [data-mantine-color-scheme="dark"] .mantine-Text-root { - color: #e0e0e0 !important; - } - /* Dark mode: List items */ - [data-mantine-color-scheme="dark"] .mantine-List-root, - [data-mantine-color-scheme="dark"] .mantine-List-item, - [data-mantine-color-scheme="dark"] .mantine-List-itemLabel, - [data-mantine-color-scheme="dark"] .mantine-List-itemWrapper { - color: #e0e0e0 !important; - } - /* Dark mode: Input/textarea text */ - [data-mantine-color-scheme="dark"] .mantine-Input-input, - [data-mantine-color-scheme="dark"] .mantine-Textarea-input { - color: #e0e0e0 !important; - } - /* Dark mode: Links */ - [data-mantine-color-scheme="dark"] a { - color: #5cc8c8 !important; - } - /* Dark mode: Disclaimer/consent boxes */ - [data-mantine-color-scheme="dark"] .mantine-tilrau { - background-color: #2e2e2e !important; - color: #ffffff !important; - } - [data-mantine-color-scheme="dark"] .mantine-tilrau * { - color: #ffffff !important; - } - [data-mantine-color-scheme="dark"] .mantine-tilrau a { - color: #5cc8c8 !important; - } - /* Dark mode: Search result text highlights */ - [data-mantine-color-scheme="dark"] mark, - [data-mantine-color-scheme="dark"] .mantine-Mark-root, - [data-mantine-color-scheme="dark"] .mantine-Highlight-root mark { - background-color: #1a4040 !important; - color: #b0b0b0 !important; - } - /* Dark mode: Search result row - base state and hover */ - [data-mantine-color-scheme="dark"] a.mantine-Paper-root { - background-color: transparent !important; - transition: background-color 0.1s ease !important; - } - [data-mantine-color-scheme="dark"] a.mantine-Paper-root:hover, - [data-mantine-color-scheme="dark"] a.mantine-Paper-root:focus { - background-color: #404040 !important; - } - [data-mantine-color-scheme="dark"] a.mantine-Paper-root:hover *, - [data-mantine-color-scheme="dark"] a.mantine-Paper-root:focus * { - color: #e0e0e0 !important; - } - `; - } else if (styleEl) { - styleEl.remove(); + /* Dark mode: List items */ + [data-mantine-color-scheme="dark"] .mantine-List-root, + [data-mantine-color-scheme="dark"] .mantine-List-item, + [data-mantine-color-scheme="dark"] .mantine-List-itemLabel, + [data-mantine-color-scheme="dark"] .mantine-List-itemWrapper { + color: #e0e0e0 !important; + } + + [data-mantine-color-scheme="dark"] p, + [data-mantine-color-scheme="dark"] h1, + [data-mantine-color-scheme="dark"] h2, + [data-mantine-color-scheme="dark"] h3, + [data-mantine-color-scheme="dark"] h4, + [data-mantine-color-scheme="dark"] h5, + [data-mantine-color-scheme="dark"] h6, + [data-mantine-color-scheme="dark"] li, + [data-mantine-color-scheme="dark"] ul, + [data-mantine-color-scheme="dark"] ol, + [data-mantine-color-scheme="dark"] td, + [data-mantine-color-scheme="dark"] th, + [data-mantine-color-scheme="dark"] tr, + [data-mantine-color-scheme="dark"] table, + [data-mantine-color-scheme="dark"] thead, + [data-mantine-color-scheme="dark"] tbody, + [data-mantine-color-scheme="dark"] blockquote, + [data-mantine-color-scheme="dark"] span:not([class*="mantine"]) { + color: #e0e0e0 !important; + } + + [data-mantine-color-scheme="dark"] code { + color: #c8e6c9 !important; + background-color: #1e2a1e !important; + } + + [data-mantine-color-scheme="dark"] pre { + background-color: #1a1a1a !important; + color: #c8e6c9 !important; + } + [data-mantine-color-scheme="dark"] pre code { + background-color: transparent !important; + color: #c8e6c9 !important; + } + + [data-mantine-color-scheme="dark"] td, + [data-mantine-color-scheme="dark"] th { + border-color: #444 !important; + } + + [data-mantine-color-scheme="dark"] .mantine-Input-input, + [data-mantine-color-scheme="dark"] .mantine-Textarea-input { + color: #e0e0e0 !important; + } + + [data-mantine-color-scheme="dark"] a { + color: #5cc8c8 !important; + } + + [data-mantine-color-scheme="dark"] .mantine-tilrau { + background-color: #2e2e2e !important; + color: #ffffff !important; + } + [data-mantine-color-scheme="dark"] .mantine-tilrau * { + color: #ffffff !important; + } + [data-mantine-color-scheme="dark"] .mantine-tilrau a { + color: #5cc8c8 !important; + } + + [data-mantine-color-scheme="dark"] mark, + [data-mantine-color-scheme="dark"] .mantine-Mark-root, + [data-mantine-color-scheme="dark"] .mantine-Highlight-root mark { + background-color: #1a4040 !important; + color: #b0b0b0 !important; + } + + [data-mantine-color-scheme="dark"] a.mantine-Paper-root { + background-color: transparent !important; + transition: background-color 0.1s ease !important; + } + [data-mantine-color-scheme="dark"] a.mantine-Paper-root:hover, + [data-mantine-color-scheme="dark"] a.mantine-Paper-root:focus { + background-color: #404040 !important; + } + [data-mantine-color-scheme="dark"] a.mantine-Paper-root:hover *, + [data-mantine-color-scheme="dark"] a.mantine-Paper-root:focus * { + color: #e0e0e0 !important; + } + + #cht-search-notice { + background-color: #2e2e2e !important; + color: #ffffff !important; + } + `; + } else { + if (styleEl) styleEl.remove(); + + const notice = shadowRoot.querySelector('#' + SEARCH_NOTICE_ID); + if (notice) { + notice.style.backgroundColor = '#DFEAEA'; + notice.style.color = '#000000'; } } + + injectSearchNotice(); }; /** @@ -370,9 +477,10 @@ for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE) { if (node.id === 'kapa-widget-container' || node.querySelector?.('#kapa-widget-container')) { - // Wait for shadow DOM to initialize setTimeout(syncKapaDarkMode, 100); setTimeout(syncKapaDarkMode, 500); + setTimeout(injectSearchNotice, 300); + setTimeout(injectSearchNotice, 800); } } } @@ -395,9 +503,9 @@ injectKapaButton(); setupKapaSearchIntercept(); setupDarkModeSync(); + injectSearchNotice(); }; - // Set up keyboard shortcuts immediately (capture phase) setupKeyboardShortcuts(); // Initialize DOM-dependent features @@ -407,4 +515,4 @@ init(); } })(); - + \ No newline at end of file From 2c653f4da1681bf681144320f5fa66e692df287a Mon Sep 17 00:00:00 2001 From: Aravind Date: Thu, 2 Apr 2026 08:59:59 +0530 Subject: [PATCH 3/3] Remove styles for messages Signed-off-by: Aravind --- layouts/partials/custom/head-end.html | 48 +++------------------------ 1 file changed, 5 insertions(+), 43 deletions(-) diff --git a/layouts/partials/custom/head-end.html b/layouts/partials/custom/head-end.html index 178b15f90..0e6396274 100644 --- a/layouts/partials/custom/head-end.html +++ b/layouts/partials/custom/head-end.html @@ -31,7 +31,7 @@ data-font-family="Noto Sans,sans-serif" data-modal-disclaimer="This is a custom LLM for Community Health Toolkit (CHT) with access to all [Documentation](https://docs.communityhealthtoolkit.org), [GitHub Issues and READMEs](https://github.com/medic/cht-core) and the [CHT Forum](https://forum.communityhealthtoolkit.org). Rate the answers to let us know what you think! -⚠️ NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa." +⚠️ NOTICE: Do not share any PII, PHI or passwords. Queries are archived and accessible by both Medic and Kapa." data-modal-example-questions="How do I run the CHT locally?,How can I contribute to the CHT?" data-button-text-color="#FFFFFF" data-modal-header-bg-color="#41AFAF" @@ -100,7 +100,8 @@ const SEARCH_NOTICE_ID = 'cht-search-notice'; - const NOTICE_TEXT = '⚠️ NOTICE: Do not share any PII, PHI or passwords. Chat logs are archived and accessible by both Medic and Kapa.'; + // The PII warning text — kept in sync with data-modal-disclaimer above + const NOTICE_TEXT = '⚠️ NOTICE: Do not share any PII, PHI or passwords. Queries are archived and accessible by both Medic and Kapa.'; /** * Open Kapa modal in specified mode @@ -359,46 +360,6 @@ color: #e0e0e0 !important; } - [data-mantine-color-scheme="dark"] p, - [data-mantine-color-scheme="dark"] h1, - [data-mantine-color-scheme="dark"] h2, - [data-mantine-color-scheme="dark"] h3, - [data-mantine-color-scheme="dark"] h4, - [data-mantine-color-scheme="dark"] h5, - [data-mantine-color-scheme="dark"] h6, - [data-mantine-color-scheme="dark"] li, - [data-mantine-color-scheme="dark"] ul, - [data-mantine-color-scheme="dark"] ol, - [data-mantine-color-scheme="dark"] td, - [data-mantine-color-scheme="dark"] th, - [data-mantine-color-scheme="dark"] tr, - [data-mantine-color-scheme="dark"] table, - [data-mantine-color-scheme="dark"] thead, - [data-mantine-color-scheme="dark"] tbody, - [data-mantine-color-scheme="dark"] blockquote, - [data-mantine-color-scheme="dark"] span:not([class*="mantine"]) { - color: #e0e0e0 !important; - } - - [data-mantine-color-scheme="dark"] code { - color: #c8e6c9 !important; - background-color: #1e2a1e !important; - } - - [data-mantine-color-scheme="dark"] pre { - background-color: #1a1a1a !important; - color: #c8e6c9 !important; - } - [data-mantine-color-scheme="dark"] pre code { - background-color: transparent !important; - color: #c8e6c9 !important; - } - - [data-mantine-color-scheme="dark"] td, - [data-mantine-color-scheme="dark"] th { - border-color: #444 !important; - } - [data-mantine-color-scheme="dark"] .mantine-Input-input, [data-mantine-color-scheme="dark"] .mantine-Textarea-input { color: #e0e0e0 !important; @@ -446,7 +407,7 @@ `; } else { if (styleEl) styleEl.remove(); - + // Also reset light-mode notice colors if present const notice = shadowRoot.querySelector('#' + SEARCH_NOTICE_ID); if (notice) { notice.style.backgroundColor = '#DFEAEA'; @@ -477,6 +438,7 @@ for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE) { if (node.id === 'kapa-widget-container' || node.querySelector?.('#kapa-widget-container')) { + setTimeout(syncKapaDarkMode, 100); setTimeout(syncKapaDarkMode, 500); setTimeout(injectSearchNotice, 300);