chore: guided prompt pattern aligned to specification (#12560)

This change consolidates the AI Guided Prompt
pattern by removing two implementation variants
(DynamicSideContent and Popover) and keeping only
the Dialog variant. The remaining Dialog
implementation has been updated to align with the
specification.

Author: plamenivanov91

packages/website/docs/_samples/patterns/AIGuidedPrompt/Dialog/main.css

@@ -38,17 +38,7 @@
 }
 
 [ui5-dialog] {
-	width: 100%;
-}
-
-[ui5-dialog] .content {
-	display: grid;
-	grid-template-columns: 2fr 1fr;
-	grid-gap: 1rem;
-}
-
-[ui5-dialog] [ui5-textarea] {
-	height: 100%;
+	width: 20rem;
 }
 
 .guidedPromptDialogFooter,

packages/website/docs/_samples/patterns/AIGuidedPrompt/Dialog/main.js

@@ -28,12 +28,12 @@ if (!response) {
 }
 
 const dialog = document.getElementById("dialog");
-const aiDialogButton = document.getElementById("aiDialogButton");
+const busyIndicator = document.querySelector("ui5-busy-indicator");
+const applyTextImprovementsButton = document.getElementById("applyTextImprovementsButton");
 const openDialogButton = document.getElementById("openDialogButton");
 const closeDialogButton = document.getElementById("closeDialogButton");
 const output = document.getElementById("output");
-const dialogOutput = document.getElementById("dialogOutput");
-const structrureSelect = document.getElementById("structureSelect");
+const structureSelect = document.getElementById("structureSelect");
 const languageSelect = document.getElementById("languageSelect");
 const toneOfVoiceSelect = document.getElementById("toneOfVoiceSelect");
 const sendButton = document.getElementById("sendButton");
@@ -53,58 +53,46 @@ let dialogGenerationId;
 
 function startGenerating() {
 	console.warn("startGenerating");
-	dialogOutput.value = "";
 	text = texts[options.structure][options.language][options.toneOfVoice];
-	let generatedWordIndex = 0;
-	const generationId = setInterval(function () {
-	const words = text.split(" ");
-	const maxWordIndex = words.length - 1;
-	if (generatedWordIndex > maxWordIndex) {
-		stopGenerating(generationId);
-		aiDialogButton.state = "revise";
-		openDialogButton.innerText = "Revise";
-		closeDialogButton.disabled = false;
-		return;
-	}
+	busyIndicator.active = true;
+	output.value = "";
+	openDialogButton.state = "generating";
+
+	closeDialog();
+	
+	var generationId = setTimeout(() => {
+		stopGenerating(generationId)
+		output.value = text;
+	}, 3000);
 
-	dialogOutput.value += words[generatedWordIndex] + " ";
-	generatedWordIndex++;
-	}, 75);
 	return generationId;
 }
 
 function stopGenerating(generationId) {
 	console.warn("stopGenerating");
-	closeDialogButton.disabled = false;
+	busyIndicator.active = false;
+	openDialogButton.state = "generate";
 	clearTimeout(generationId);
 }
 
 function openDialogButtonClickHandler(evt) {
-	openDialog();
-}
-
-function aiDialogButtonClickHandler(evt) {
 	var button = evt.target;
 	switch (button.state) {
-	case "":
 	case "generate":
-		startGeneratingFromDialog();
-		break;
-	case "revise":
-		startGeneratingFromDialog();
+		openDialog();
 		break;
 	case "generating":
-		button.state = "generate";
-		openDialogButton.innerText = "Generate";
-		closeDialogButton.disabled = false;
-		stopGenerating(dialogGenerationId, closeDialogButton);
+		stopGenerating(dialogGenerationId);
+		openDialogButton.state = "generate";
 		break;
 	}
 }
 
+function applyTextImprovementsButtonClickHandler() {
+	startGeneratingFromDialog();
+}
+
 function startGeneratingFromDialog() {
-	aiDialogButton.state = "generating";
-	closeDialogButton.disabled = true;
 	dialogGenerationId = startGenerating();
 }
 
@@ -114,7 +102,6 @@ function openDialog() {
 
 function closeDialog() {
 	dialog.open = false;
-	output.value = dialogOutput.value;
 }
 
 function structureSelectHandler(evt) {
@@ -151,10 +138,10 @@ sendButton.addEventListener("click", function() {
 	}
 });
 
-structrureSelect.addEventListener("change", structureSelectHandler);
+structureSelect.addEventListener("change", structureSelectHandler);
 openDialogButton.addEventListener("click", openDialogButtonClickHandler);
-aiDialogButton.addEventListener("click", aiDialogButtonClickHandler);
 closeDialogButton.addEventListener("click", closeDialog);
+applyTextImprovementsButton.addEventListener("click", applyTextImprovementsButtonClickHandler);
 languageSelect.addEventListener("change", languageSelectHandler);
 toneOfVoiceSelect.addEventListener(
 	"selection-change",

packages/website/docs/_samples/patterns/AIGuidedPrompt/Dialog/sample.html

@@ -16,9 +16,6 @@
 		opener="openDialogButton"
 		header-text="Improve Text">
 		<div class="content">
-			<ui5-textarea
-				id="dialogOutput"
-				placeholder="Compose text..."></ui5-textarea>
 			<div class="guidedPromptForm">
 				<div class="guidedPromptFormGroup">
 					<ui5-label>Structure:</ui5-label>
@@ -55,23 +52,13 @@
 		</div>
 
 		<div slot="footer" class="guidedPromptDialogFooter">
-			<ui5-ai-button id="aiDialogButton" state="generate" design="Emphasized">
-				<ui5-ai-button-state
-					name="generate"
-					text="Apply"
-					icon="ai"
-					></ui5-ai-button-state>
-				<ui5-ai-button-state
-					name="generating"
-					text="Stop Generating"
-					icon="stop"
-					></ui5-ai-button-state>
-				<ui5-ai-button-state
-					name="revise"
-					text="Revise"
-					icon="ai"
-					></ui5-ai-button-state>
-			</ui5-ai-button>
+			<ui5-button
+				id="applyTextImprovementsButton"
+				design="Emphasized"
+				name="generate"
+				text="Apply"
+				icon="ai">Apply</ui5-button>
+
 			<ui5-button id="closeDialogButton">Close</ui5-button>
 		</div>
 	</ui5-dialog>
@@ -87,9 +74,22 @@
 			</div>
 			<div class="guidedPromptLblBtn">
 				<ui5-label style="align-self: flex-end;" required>Offer: </ui5-label>
-				<ui5-button id="openDialogButton" icon="ai"> Generate</ui5-button>
+				<ui5-ai-button id="openDialogButton" state="generate">
+					<ui5-ai-button-state
+						name="generate"
+						text="Compose Text"
+						icon="ai"
+						></ui5-ai-button-state>
+					<ui5-ai-button-state
+						name="generating"
+						text="Stop Generating"
+						icon="stop"
+						></ui5-ai-button-state>
+				</ui5-ai-button>
 			</div>
-			<ui5-textarea id="output" style="height: 100%;" placeholder="Compose text..."></ui5-textarea>
+			<ui5-busy-indicator style="height: 100%;">
+				<ui5-textarea id="output" style="height: 100%;"></ui5-textarea>
+			</ui5-busy-indicator>
 		</section>
 		<div class="guidedPromptCardFooter">
 			<ui5-button id="sendButton" design="Emphasized">Send</ui5-button>