chore: add custom prompt pattern samples (SAP#9882)

* chore: add custom prompt pattern samples Adding samples for web component, showcasing a Custom Prompt pattern usage.
kineticjs · Sep 17, 2024 · 3c0e713 · 3c0e713
1 parent 6e150bb
commit 3c0e713
Show file tree

Hide file tree

Showing 17 changed files with 613 additions and 0 deletions.
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/AI Custom Prompt.mdx b/packages/website/docs/components/patterns/AI Custom Prompt/AI Custom Prompt.mdx
@@ -0,0 +1,14 @@
+---
+sidebar_class_name: newComponentBadge expComponentBadge
+---
+
+:::info
+The AI Custom Prompt and its levels are availabe since 2.3.0 under an experimental flag and their structure and behaviour are subject to change.
+:::
+
+### Overview
+
+The Custom Prompt pattern serves as a method for users to enter queries or prompts within an AI interface. It dynamically expands as needed and may present extra functionalities in a toolbar. While typically found within the AI Container, it's also applicable for integration into Tool Header toolbars, dialogs, and popovers - defined by pattern definition.
+
+
+
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/Level 1.md b/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/Level 1.md
@@ -0,0 +1,9 @@
+import html from '!!raw-loader!./sample.html';
+import css from '!!raw-loader!./main.css';
+import js from '!!raw-loader!./main.js';
+
+
+### Overview
+Simple Avatar and Prompt input in a Panel. 
+
+<Editor html={html} js={js} css={css} />
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/main.css b/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/main.css
@@ -0,0 +1,9 @@
+body {
+	background-color: var(--sapBackgroundColor);
+}
+
+#panelContent {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/main.js b/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/main.js
@@ -0,0 +1,5 @@
+// Import stylesheets
+import '@ui5/webcomponents/dist/Avatar.js';
+import '@ui5/webcomponents-ai/dist/Button.js';
+import '@ui5/webcomponents-ai/dist/PromptInput.js';
+import '@ui5/webcomponents/dist/Panel.js';
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/sample.html b/packages/website/docs/components/patterns/AI Custom Prompt/Level 1/sample.html
@@ -0,0 +1,33 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="./main.css">
+	<title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: fit-content;">
+
+	<div id="app">
+
+		<ui5-title>AI Pattern / Level 1</ui5-title>
+
+		<ui5-panel id="myPanel" fixed>
+			<div id="panelContent">
+				<ui5-avatar size="XS">
+					<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" alt="SAP Logo">
+				</ui5-avatar>
+				<ui5-ai-prompt-input id="promptInput" show-clear-icon placeholder="Ask me anything..." label="User prompt:" show-exceeded-text></ui5-ai-prompt-input>
+			</div>
+		</ui5-panel>
+	</div>
+
+	<!-- playground-fold -->
+	<script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/Level 2.md b/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/Level 2.md
@@ -0,0 +1,8 @@
+import html from '!!raw-loader!./sample.html';
+import css from '!!raw-loader!./main.css';
+import js from '!!raw-loader!./main.js';
+
+### Overview
+On top of Level 1, different actions are added in a Toolbar below the Prompt input.
+
+<Editor html={html} js={js} css={css} />
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/main.css b/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/main.css
@@ -0,0 +1,17 @@
+body {
+	background-color: var(--sapBackgroundColor)
+}
+
+#panelContent,
+#panelContentFirstRow {
+	display: flex;
+	flex: 1;
+	width: 100%;
+	flex-direction: column;
+	align-items: center;
+}
+
+#panelContentFirstRow {
+	flex-direction: row;
+	gap: .5rem;
+}
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/main.js b/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/main.js
@@ -0,0 +1,11 @@
+import '@ui5/webcomponents/dist/Avatar.js';
+import '@ui5/webcomponents-icons/dist/background.js';
+import '@ui5/webcomponents-icons/dist/doc-attachment.js';
+import '@ui5/webcomponents-icons/dist/sound-loud.js';
+import '@ui5/webcomponents-icons/dist/history.js';
+import '@ui5/webcomponents-icons/dist/favorite.js';
+import '@ui5/webcomponents-ai/dist/PromptInput.js';
+import '@ui5/webcomponents/dist/Toolbar.js';
+import '@ui5/webcomponents/dist/ToolbarButton.js';
+import '@ui5/webcomponents/dist/ToolbarSeparator.js';
+import '@ui5/webcomponents/dist/Panel.js';
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/sample.html b/packages/website/docs/components/patterns/AI Custom Prompt/Level 2/sample.html
@@ -0,0 +1,45 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="./main.css">
+	<title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: fit-content;">
+
+	<div id="app">
+
+		<ui5-title>AI Pattern / Level 2</ui5-title>
+
+		<ui5-panel id="myPanel" fixed>
+			<div id="panelContent">
+				<div id="panelContentFirstRow">
+					<ui5-avatar size="XS">
+						<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" alt="SAP Logo">
+					</ui5-avatar>
+					<ui5-ai-prompt-input id="promptInput" show-clear-icon placeholder="Ask me anything..." label="User prompt:" show-exceeded-text></ui5-ai-prompt-input>
+				</div>
+
+				<ui5-toolbar align-content="Start">
+					<ui5-toolbar-button icon="doc-attachment" text="Attach file"></ui5-toolbar-button>
+					<ui5-toolbar-button icon="background" text="Add image"></ui5-toolbar-button>
+					<ui5-toolbar-button icon="sound-loud" text="Insert audio"></ui5-toolbar-button>
+					<ui5-toolbar-separator></ui5-toolbar-separator>
+					<ui5-toolbar-button icon="history" text="History"></ui5-toolbar-button>
+					<ui5-toolbar-button icon="favorite" text="Favorite prompts"></ui5-toolbar-button>
+				</ui5-toolbar>
+			</div>
+		</ui5-panel>
+
+	</div>
+
+	<!-- playground-fold -->
+	<script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/Level 3.md b/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/Level 3.md
@@ -0,0 +1,8 @@
+import html from '!!raw-loader!./sample.html';
+import css from '!!raw-loader!./main.css';
+import js from '!!raw-loader!./main.js';
+
+### Overview
+On top of Level 2, we can now chose a different AI model from the top-left dropdown. Additionally we have prompt count and AI button with more options in the top-right of the panel.
+
+<Editor html={html} js={js} css={css} />
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/main.css b/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/main.css
@@ -0,0 +1,31 @@
+body {
+	background-color: var(--sapBackgroundColor)
+}
+
+#panelContent,
+#panelContentFirstRow,
+#panelHeader {
+	display: flex;
+	flex: 1;
+	width: 100%;
+	flex-direction: column;
+	align-items: center;
+}
+
+#panelContentFirstRow,
+#panelHeader {
+	flex-direction: row;
+	gap: .5rem;
+}
+
+#panelHeader {
+	justify-content: end;
+}
+
+#panelHeader > ui5-button {
+	margin-right: auto;
+}
+
+#promptCountWrapper {
+	display: flex
+}
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/main.js b/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/main.js
@@ -0,0 +1,80 @@
+import '@ui5/webcomponents/dist/Avatar.js';
+import '@ui5/webcomponents-ai/dist/Button.js';
+import '@ui5/webcomponents-ai/dist/PromptInput.js';
+import '@ui5/webcomponents-icons/dist/ai.js';
+import '@ui5/webcomponents-icons/dist/stop.js';
+import '@ui5/webcomponents-icons/dist/slim-arrow-down.js';
+import '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
+import '@ui5/webcomponents-icons/dist/doc-attachment.js';
+import '@ui5/webcomponents-icons/dist/background.js';
+import '@ui5/webcomponents-icons/dist/sound-loud.js';
+import '@ui5/webcomponents-icons/dist/history.js';
+import '@ui5/webcomponents-icons/dist/favorite.js';
+
+import '@ui5/webcomponents/dist/Input.js';
+import '@ui5/webcomponents/dist/Panel.js';
+
+import '@ui5/webcomponents/dist/Label.js';
+import '@ui5/webcomponents/dist/Text.js';
+import '@ui5/webcomponents/dist/Toolbar.js';
+import '@ui5/webcomponents/dist/Menu.js';
+import '@ui5/webcomponents/dist/MenuItem.js';
+import '@ui5/webcomponents/dist/ToolbarButton.js';
+import '@ui5/webcomponents/dist/ToolbarSeparator.js';
+
+var generationId,
+promptCounter = 0;
+
+function startGeneration(button) {
+	console.warn('startGeneration');
+	generationId = setTimeout(function () {
+	console.warn('Generation completed');
+	button.state = 'revise';
+	}, 3000);
+}
+
+function stopGeneration() {
+	console.warn('stopGeneration');
+	clearTimeout(generationId);
+}
+
+function aiButtonClickHandler(evt) {
+	var button = evt.target;
+	switch (button.state) {
+	case '':
+	case 'generate':
+		button.state = 'generating';
+		startGeneration(button);
+		break;
+	case 'generating':
+		button.state = 'generate';
+		stopGeneration();
+		break;
+	case 'revise':
+		menu.opener = button;
+		menu.open = true;
+		break;
+	}
+}
+
+myAiButtonIconOnly.addEventListener('click', aiButtonClickHandler);
+promptInput.addEventListener('ui5-change', function () {
+	promptCounter++;
+	promptCount.textContent = promptCounter;
+});
+
+menu.addEventListener('item-click', function (evt) {
+	var button = menu.opener;
+	if (evt.detail.text === 'Regenerate') {
+	button.state = 'generating';
+	startGeneration(button);
+	}
+});
+
+aiModelSelector.addEventListener('click', function (event) {
+	aiModelMenu.open = !aiModelMenu.open;
+});
+
+aiModelMenu.addEventListener('ui5-item-click', function (event) {
+	myAvatar.colorScheme = event.detail.text;
+});
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/sample.html b/packages/website/docs/components/patterns/AI Custom Prompt/Level 3/sample.html
@@ -0,0 +1,84 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="./main.css">
+	<title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: fit-content;">
+
+	<div id="app">
+
+		<ui5-title>AI Pattern / Level 3</ui5-title>
+
+		<ui5-panel>
+			<div slot="header" id="panelHeader">
+
+				<ui5-button id="aiModelSelector" end-icon="slim-arrow-down">AI Model</ui5-button> <br>
+
+				<ui5-menu id="aiModelMenu" opener="aiModelSelector">
+					<ui5-menu-item text="Accent1"></ui5-menu-item>
+					<ui5-menu-item text="Accent2"></ui5-menu-item>
+					<ui5-menu-item text="Accent9"></ui5-menu-item>
+				</ui5-menu>
+
+				<div id="promptCountWrapper">
+					<ui5-label id="label-for-ui5-text" for="promptCount" wrapping-type="None">Prompt count:</ui5-label>
+					<ui5-text id="promptCount">0</ui5-text>
+				</div>
+
+				<ui5-ai-button id="myAiButtonIconOnly" state="revise">
+					<ui5-ai-button-state name="generate" icon="ai"></ui5-ai-button-state>
+					<ui5-ai-button-state name="generating" icon="stop"></ui5-ai-button-state>
+					<ui5-ai-button-state name="revise" icon="ai" end-icon="navigation-down-arrow"></ui5-ai-button-state>
+				</ui5-ai-button>
+
+				<ui5-menu id="menu">
+					<ui5-menu-item text="Regenerate"></ui5-menu-item>
+					<ui5-menu-item text="Fix Spelling & Grammar" starts-section></ui5-menu-item>
+					<ui5-menu-item text="Change Tone">
+						<ui5-menu-item text="Option 1"></ui5-menu-item>
+						<ui5-menu-item text="Option 2"></ui5-menu-item>
+						<ui5-menu-item text="Option 3"></ui5-menu-item>
+					</ui5-menu-item>
+					<ui5-menu-item text="Text Length">
+						<ui5-menu-item text="Short"></ui5-menu-item>
+						<ui5-menu-item text="Medium"></ui5-menu-item>
+						<ui5-menu-item text="Long"></ui5-menu-item>
+					</ui5-menu-item>
+					<ui5-menu-item text="Bulleted List"></ui5-menu-item>
+					<ui5-menu-item text="Translate">
+						<ui5-menu-item text="English"></ui5-menu-item>
+						<ui5-menu-item text="German"></ui5-menu-item>
+						<ui5-menu-item text="Spanish"></ui5-menu-item>
+					</ui5-menu-item>
+				</ui5-menu>
+			</div>
+			<div id="panelContent">
+				<div id="panelContentFirstRow">
+					<ui5-avatar id="myAvatar" size="XS" shape="Square"></ui5-avatar>
+					<ui5-ai-prompt-input id="promptInput" show-clear-icon placeholder="Ask me anything..." label="User prompt:" maxlength="10" show-exceeded-text></ui5-ai-prompt-input>
+				</div>
+
+				<ui5-toolbar align-content="Start">
+					<ui5-toolbar-button icon="doc-attachment" text="Attach file"></ui5-toolbar-button>
+					<ui5-toolbar-button icon="background" text="Add image"></ui5-toolbar-button>
+					<ui5-toolbar-button icon="sound-loud" text="Insert audio"></ui5-toolbar-button>
+					<ui5-toolbar-separator></ui5-toolbar-separator>
+					<ui5-toolbar-button icon="history" text="History"></ui5-toolbar-button>
+					<ui5-toolbar-button icon="favorite" text="Favorite prompts"></ui5-toolbar-button>
+				</ui5-toolbar>
+			</div>
+		</ui5-panel>
+	</div>	
+
+	<!-- playground-fold -->
+	<script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/components/patterns/AI Custom Prompt/Level 4/Level 4.md b/packages/website/docs/components/patterns/AI Custom Prompt/Level 4/Level 4.md
@@ -0,0 +1,8 @@
+import html from '!!raw-loader!./sample.html';
+import css from '!!raw-loader!./main.css';
+import js from '!!raw-loader!./main.js';
+
+### Overview
+On top of Level 3, we can now give feedback. Also receive feedback in a Message Strip whether our response is a success, error, or warning. For the sake of the sample those feedback message strips are simulated by the buttons at the top.
+
+<Editor html={html} js={js} css={css} />