5349 feat add predefined queries in prompt dropdown of transform dataset

packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue

@@ -14,6 +14,7 @@
 			<tera-beaker-input
 				class="tera-beaker-input"
 				:kernel-is-busy="kernelStatus !== KernelState.idle"
+				:default-options="sampleAgentQuestions"
 				context="dataset"
 				@submitQuery="onSubmitQuery"
 				@add-code-cell="onAddCodeCell"
@@ -135,8 +136,8 @@ import {
 	getServerSettings,
 	getSessionManager,
 	JupyterMessage,
-	newSession,
-	KernelState
+	KernelState,
+	newSession
 } from '@/services/jupyter';
 import { SessionContext } from '@jupyterlab/apputils/lib/sessioncontext';
 import { createMessage } from '@jupyterlab/services/lib/kernel/messages';
@@ -179,6 +180,7 @@ const props = defineProps<{
 	programmingLanguage?: string;
 	kernelState: any;
 	selectedDataset: string | null;
+	sampleAgentQuestions: string[];
 }>();
 
 const languages = programmingLanguageOptions();

packages/client/hmi-client/src/components/llm/tera-beaker-input.vue

@@ -3,6 +3,7 @@
 		<div class="chat-input-container">
 			<div class="chat-input-elements">
 				<textarea
+					v-if="hideAutoComplete || props.defaultOptions.length === 0"
 					class="input"
 					ref="inputElement"
 					v-model="queryString"
@@ -13,6 +14,19 @@
 					@input="autoGrow"
 					rows="1"
 				/>
+				<AutoComplete
+					v-else
+					ref="autoComplete"
+					v-model="queryString"
+					class="auto-complete"
+					:suggestions="filteredOptions"
+					:completeOnFocus="true"
+					@complete="searchOptions"
+					@change="onInputChange"
+					placeholder="What do you want to do?"
+					emptySearchMessage="No suggestions"
+					:disabled="props.kernelIsBusy"
+				/>
 				<Button
 					v-if="queryString.length !== 0"
 					text
@@ -57,12 +71,13 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 import ProgressBar from 'primevue/progressbar';
 import Button from 'primevue/button';
 import * as EventService from '@/services/event';
 import { EventType } from '@/types/Types';
 import { useProjects } from '@/composables/project';
+import AutoComplete from 'primevue/autocomplete';
 
 const emit = defineEmits(['submit-query', 'add-code-cell', 'run-all-cells']);
 
@@ -84,7 +99,15 @@ const props = defineProps({
 		type: String,
 		default: 'black'
 	},
-	kernelIsBusy: Boolean
+	kernelIsBusy: Boolean,
+	defaultOptions: {
+		type: Array,
+		default: () => []
+	},
+	maxChars: {
+		type: Number,
+		default: 75
+	}
 });
 
 const queryString = ref('');
@@ -93,6 +116,9 @@ const containerElement = ref<HTMLElement | null>(null);
 const inputElement = ref<HTMLInputElement | null>(null);
 const addCodeCellButton = ref<HTMLElement | null>(null);
 const fixedDivWidth = ref(0);
+const hideAutoComplete = ref(false);
+const filteredOptions = ref<any[]>([]);
+const autoComplete = ref();
 
 const submitQuery = () => {
 	EventService.create(EventType.TransformPrompt, useProjects().activeProject.value?.id, queryString.value);
@@ -112,6 +138,30 @@ const runAllCells = () => {
 	emit('run-all-cells');
 };
 
+const searchOptions = () => {
+	const query = queryString.value.toLowerCase();
+	filteredOptions.value = props.defaultOptions.filter((option) => option.toLowerCase().includes(query));
+};
+
+const onInputChange = async () => {
+	// If there are no search suggestions to show, the auto complete element is never shown
+	if (props.defaultOptions.length === 0) return;
+
+	// If the number of characters entered exceeds the maximum, switch from auto complete to text area
+	// Force focus for a smoother transition
+	const numChars = queryString.value.length;
+	if (numChars <= props.maxChars && numChars >= 0) {
+		hideAutoComplete.value = false;
+		await nextTick();
+		const inputEl = autoComplete.value?.$el.querySelector('input');
+		inputEl.focus();
+	} else {
+		hideAutoComplete.value = true;
+		await nextTick();
+		textArea.value?.$el.focus();
+	}
+};
+
 onMounted(() => {
 	if (props.focusInput) {
 		inputElement.value?.focus();
@@ -204,4 +254,18 @@ const autoGrow = () => {
 	height: 31px;
 	width: 10rem;
 }
+.auto-complete {
+	width: 100%;
+}
+
+.auto-complete:deep(input),
+.text-area {
+	width: 100%;
+	background-image: url('@assets/svg/icons/message.svg');
+	background-size: 1rem;
+	background-position: var(--gap-2) 9px;
+	background-repeat: no-repeat;
+	padding-right: 2rem;
+	padding-left: 2rem;
+}
 </style>

packages/client/hmi-client/src/components/workflow/ops/dataset-transformer/tera-dataset-transformer.vue

@@ -31,6 +31,7 @@
 					@update-kernel-state="updateKernelState"
 					:kernelState="kernelState"
 					:selected-dataset="selectedDataset"
+					:sample-agent-questions="sampleAgentQuestions"
 				/>
 			</Suspense>
 		</div>
@@ -85,6 +86,15 @@ const updateKernelState = (newKernelState: any) => {
 	}
 };
 
+const sampleAgentQuestions = [
+	'I have two dataframes d1, d2. Join them on the column named "date". Name the joined dataframe d3.',
+	'I have a dataframe d1. Show me the data types by column.',
+	"I have three dataframes d1, d2, d3. d1 is incident case counts. d2 is incident hospitalization counts. d3 is cumulative death counts. Let's assume that average time to recover is 14 days and average time to exit the hospital is 10 days. Can you convert this data into prevalence data? Ideally please map it to SIRHD. Assume a population of 150 million.",
+	'Add a new column to the dataframe d1 that indexes the rows from 0, 1, 2 to N.',
+	'Download geojson of US counties from the Plotly GitHub repo using urlopen.',
+	'I have a geopandas dataframe d1. Use Matplotlib to create a chloropleth map using the column R0. Use the cividis colormap. Add a colorbar.'
+];
+
 const notebookSession = ref(<NotebookSession | undefined>undefined);
 
 onMounted(async () => {