diff --git a/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/Scroll.md b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/Scroll.md new file mode 100644 index 000000000000..73cac22f9019 --- /dev/null +++ b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/Scroll.md @@ -0,0 +1,5 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; + + \ No newline at end of file diff --git a/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.css b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.css new file mode 100644 index 000000000000..8c4c67dda564 --- /dev/null +++ b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.css @@ -0,0 +1,47 @@ +body { + background-color: var(--sapBackgroundColor); + height: 800px; +} + +[ui5-panel]::part(content) { + background-color: #eaecee; +} + +.checkbox-wrapper { + display: flex; + align-items: center; +} + +.checkbox-wrapper [ui5-text] { + flex: 1; +} + +#termsPanel { + max-height: 400px; + overflow: auto; + border: 1px dashed #000; + border-radius: 0.25rem; + background-color: #eaecee; +} + +.text { + padding-top: 0.15rem; + padding-bottom: 0.15rem; +} + +.footer { + display: flex; + justify-content: flex-end; + width: 100%; + align-items: center; + gap: 0.25rem; +} + +[ui5-icon] { + color: var(--sapInformativeElementColor); + vertical-align: middle; + margin-left: 0.1rem; + margin-right: 0.1rem; + width: 0.8rem; + height: 0.8rem; +} diff --git a/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.js b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.js new file mode 100644 index 000000000000..2696a10cd0d3 --- /dev/null +++ b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.js @@ -0,0 +1,53 @@ +import "@ui5/webcomponents/dist/Dialog.js"; +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/CheckBox.js"; +import "@ui5/webcomponents/dist/Link.js"; +import "@ui5/webcomponents/dist/Panel.js"; +import "@ui5/webcomponents/dist/Icon.js"; + +const dialog = document.getElementById("dialog"), + acceptButton = document.getElementById("acceptButton"), + termsPanel = document.getElementById("termsPanel"), + checkbox = document.getElementById("termsCheck"); +let hasScrolledToBottom = false; + +dialog.open = true; + +acceptButton.addEventListener("click", function (event) { + if (!hasScrolledToBottom) { + event.preventDefault(); + alert("Please scroll to the end of the terms before continuing."); + return; + } + + if (!checkbox.checked) { + event.preventDefault(); + alert("Please accept the terms and conditions to continue."); + } +}); + +checkbox.addEventListener("mousedown", (event) => { + if (!hasScrolledToBottom) { + event.preventDefault(); + alert("Please scroll to the end of the terms before accepting them."); + } + }); + +checkbox.addEventListener("change", () => { + acceptButton.disabled = !(hasScrolledToBottom && checkbox.checked); + }); + +termsPanel.addEventListener("scroll", function () { + const scrollTop = termsPanel.scrollTop, + clientHeight = termsPanel.clientHeight, + scrollHeight = termsPanel.scrollHeight, + atBottom = scrollTop + clientHeight >= scrollHeight - 1; + + hasScrolledToBottom = false; + acceptButton.disabled = true; + + if (atBottom) { + hasScrolledToBottom = true; + } +}); \ No newline at end of file diff --git a/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/sample.html b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/sample.html new file mode 100644 index 000000000000..fed1af639fef --- /dev/null +++ b/packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/sample.html @@ -0,0 +1,105 @@ + + + + + + + + Sample + + + + +
+ + Please read the following information carefully and accept these terms and conditions: + +
+ Terms of use +
+ + + SAP AI TERMS + These SAP AI Terms (“Terms”) apply to artificial intelligence features and technologies provided with SAP + Cloud Services (“AI Technology”). “Output” means any content generated by AI Technology as output, + based on the data provided to AI Technology, including Customer Data, and data used to train AI + Technology. + 1. ACCEPTABLE USE + 1.1. Customer will use AI Technology responsibly, safely, in a legally compliant manner, and in accordance + with the Documentation, and will not use AI Technology to: + (a) Promote or facilitate illegal activities or unlawful actions; + (b) Facilitate fraudulent actions; + (c) Attempt unauthorized access to a system, property, or information; + (d) Generate content that contains or promotes violence, hate speech, or harassment, or insults or + demeans a person; + (e) Generate sexually explicit content; + (f) Distribute malware or spam; + (g) Contravene regulatory safety policies; + (h) Track people without consent; + (i) Falsely impersonate an individual; or + (j) Mine cryptocurrency. + 1.2. SAP may limit or suspend access to Output or AI Technology in the event these Terms are violated or for + non-compliance with Documentation. + 1.3. Customer will not circumvent or bypass protective measures made available by SAP or a third-party, + including, but not limited to, those intended to help prevent copyright infringement, data breaches, or + security incidents. + 1.4. Customer will not use AI Technology or Output to develop, train, or improve other AI services or AI + models, unless explicitly permitted by SAP, or (ii) use web scraping, web harvesting, or web data extraction + methods to extract data from AI Technology or Output. + 2. OUTPUT + 2.1. Notwithstanding any recommendation contained within Output, reliance on Output is in Customer’s + discretion. Customer will assess Output (including by code scanning, security scanning, human review, + and human oversight and correction) before using or relying on the Output for any purpose. Customer will + also utilize any review tools and filtering options that SAP makes available. + 2.2. AI Technology consists of emerging technologies and, given the nature of such technologies, their use + may result in incorrect, biased, unfair, or inaccurate Output and/or Output that may be nonsensical or + untruthful in relation to certain sources. + 2.3. In addition Output may not qualify for intellectual property protection; similar or the same Output may be + produced by AI Technology to similar requests from different customers, and Customer’s rights to Output + may not be enforceable against other users of AI Technology. Customer’s ownership in Output is subject + to SAP’s and/or its licensor’s ownership rights in the Cloud Service, SAP Materials, and data used to train + AI Technology (“Pre-Existing Materials”). Customer is granted a right to use, and only will use, Pre- + Existing Materials in Output to the same extent as Customer is permitted to use the Cloud Service. + 3. ADDITIONAL TERMS + The legal framework applicable to and the interpretation of competent courts and authorities regarding the + use of AI technologies is evolving. If a change in law or the interpretation of a competent court or authority + results in SAP’s inability to offer an AI Technology or (ii) Customer’s inability to use an AI Technology + in a legally compliant manner, SAP may reduce the scope of use (e.g., if the use of an AI Technology + becomes prohibited, SAP may cease offering such AI Technology in a given country ) or remove such AI + Technology altogether. The same applies where SAP can no longer provide an AI Technology provided + by a third-party, because such third-party discontinues availability of such AI Technology or changes its +
+
+
+ SAP AI Terms enMEE.v.10-2024 Page 2 of 2 + service terms or documentation in contradiction to the Agreement or another way that prevents SAP from + further offering such AI Technology. + 3.2. AI Technology may include AI models, technologies or features licensed from third-parties that require + SAP to pass through additional terms. Customer will comply with such pass-through terms as made + available by SAP at https://www.sap.com/about/trust-center/agreements.html, within the Documentation, + or otherwise. When SAP introduces new AI Technology, SAP may provide additional terms or make + updates to the terms, that apply to Customer’s use of such AI Technology. + 3.3. SAP does not commit to the use of specific AI models in a Cloud Service even if Customer may be able + to choose between different AI models when using the Cloud Service. SAP reserves the right to add, + remove, or exchange AI models, in its sole discretion, at any time. + +
+
+ + + I hereby confirm I have read and agreed to + <document link 1> and + <document link 2>. + +
+
+
+ Accept + Dismiss +
+ + + + + + diff --git a/packages/website/docs/components/patterns/AI Acknowledgement.mdx b/packages/website/docs/components/patterns/AI Acknowledgement.mdx index 0f4a6a4b29a5..ccdd883e52ea 100644 --- a/packages/website/docs/components/patterns/AI Acknowledgement.mdx +++ b/packages/website/docs/components/patterns/AI Acknowledgement.mdx @@ -3,9 +3,16 @@ sidebar_class_name: newComponentBadge --- import Basic from "../../_samples/patterns/AIAcknowledgement/Basic/Basic.md"; - -### Overview +import Scroll from "../../_samples/patterns/AIAcknowledgement/Scroll/Scroll.md"; AI Acknowledgment – is a pattern which provides general informations about a given AI services once the user engages first time with it. It is part of the overall set of "messaging patterns" that emerge with the use of AI services and functions. It's main purpose is to educate the user about the risks and opportunities using AI as well as setting baseline expectations. +### Implicit confirmation via checkbox + + +### Scroll-wrap terms consent + + + +