feature: Add ability to reset the notebook environments (#1548)

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

@@ -37,14 +37,20 @@
 				>Reconnect</Button
 			>
 		</div>
-		<div class="gpt-header">
+		<div class="gpt-header flex">
 			<span><i class="pi pi-circle-fill kernel-status" :style="statusStyle" /></span>
 			<span><header id="GPT">TGPT</header></span>
 			<span style="margin-left: 2rem">
 				<label>Auto expand previews:</label><input v-model="autoExpandPreview" type="checkbox" />
 			</span>
+			<span class="flex-auto"></span>
+			<Button label="Reset" class="p-button p-button-sm" @click="confirmReset">
+				<span class="pi pi-replay p-button-icon p-button-icon-left"></span>
+				<span class="p-button-text">Reset</span>
+			</Button>
 		</div>
 		<tera-jupyter-chat
+			ref="chat"
 			:project="props.project"
 			:asset-id="props.assetId"
 			:show-jupyter-settings="true"
@@ -135,6 +141,7 @@ const props = defineProps<{
 	showChatThoughts: boolean;
 }>();
 
+const chat = ref();
 const kernelStatus = ref(<string>'');
 const showKernels = ref(<boolean>false);
 const autoExpandPreview = ref(<boolean>true);
@@ -171,7 +178,7 @@ const setKernelContext = (kernel: IKernelConnection, context_info) => {
 		channel: 'shell',
 		content: context_info,
 		msgType: 'context_setup_request',
-		msgId: createMessageId('context_setup_request')
+		msgId: 'tgpt-context_setup_request'
 	};
 	const message: JupyterMessage = createMessage(messageBody);
 	kernel?.sendJupyterMessage(message);
@@ -260,6 +267,14 @@ const saveAsNewDataset = async () => {
 	kernel?.sendJupyterMessage(message);
 };
 
+const resetKernel = async () => {
+	const session = jupyterSession.session;
+	const kernel = session?.kernel as IKernelConnection;
+
+	chat.value.clearOutputs();
+	await session?.changeKernel({ name: kernel.name });
+};
+
 const killKernel = () => {
 	shutdownKernel(selectedKernel.value.kernelId, getServerSettings());
 	updateKernelList();
@@ -272,6 +287,20 @@ const deleteAllKernels = () => {
 	updateKernelList();
 };
 
+const confirmReset = () => {
+	confirm.require({
+		message: `Are you sure you want to rese the kernel?
+
+This will reset the kernel back to its starting state, but keep all of your prompts and code cells.
+The code cells will need to be rerun.`,
+		header: 'Confirmation',
+		icon: 'pi pi-exclamation-triangle',
+		accept: () => {
+			resetKernel();
+		}
+	});
+};
+
 // Kernel Confirmation dialogs
 const confirmReconnect = () => {
 	confirm.require({

packages/client/hmi-client/src/components/llm/tera-chatty-response-code-cell.vue

@@ -133,6 +133,10 @@ commands.addKeyBinding({
 // 	console.log('save-as-new-dataset emitted');
 // };
 
+const clear = () => {
+	cellWidget.model.clearExecution();
+};
+
 onMounted(() => {
 	props.jupyterSession.ready.then(() => {
 		props.jupyterSession.session?.kernel?.info.then((info) => {
@@ -165,6 +169,11 @@ const run = () => {
 };
 
 cellWidget.activate();
+
+defineExpose({
+	cellWidget,
+	clear
+});
 </script>
 
 <style lang="scss" global>

packages/client/hmi-client/src/components/llm/tera-jupyter-chat.vue

@@ -60,7 +60,7 @@ const notebookItems = ref(
 		}[]
 	>[]
 );
-const notebookCells = ref([]);
+const notebookCells = ref<(typeof TeraJupyterResponse)[]>([]);
 
 const emit = defineEmits([
 	'new-message',
@@ -200,7 +200,11 @@ const updateKernelStatus = (kernelStatus) => {
 
 const newJupyterMessage = (jupyterMessage) => {
 	const msgType = jupyterMessage.header.msg_type;
-	if (['stream', 'code_cell', 'llm_request', 'chatty_response', 'dataset'].indexOf(msgType) > -1) {
+	if (
+		['stream', 'code_cell', 'llm_request', 'llm_response', 'chatty_response', 'dataset'].indexOf(
+			msgType
+		) > -1
+	) {
 		messagesHistory.value.push(jupyterMessage);
 		updateNotebookCells(jupyterMessage);
 		isExecutingCode.value = msgType === 'llm_request' || msgType === 'code_cell';
@@ -229,6 +233,31 @@ const clearHistory = () => {
 	notebookItems.value = [];
 };
 
+// Clear all the outputs in the chat, without clearing the code/prompts/etc.
+const clearOutputs = () => {
+	for (let i = 0; i < notebookItems.value.length; i++) {
+		const item = notebookItems.value[i];
+		for (let j = item.messages.length - 1; j >= 0; j--) {
+			const message = item.messages[j];
+			const msgType = message.header.msg_type;
+			if (msgType === 'model_preview' || msgType === 'dataset') {
+				item.messages.splice(j, 1);
+			}
+			if (msgType === 'code_cell') {
+				console.log(message);
+			}
+		}
+	}
+	for (let i = 0; i < notebookCells.value.length; i++) {
+		const el = notebookCells.value[i];
+		if (el.codeCell) {
+			for (let j = 0; j < el.codeCell.length; j++) {
+				el.codeCell[j].clear();
+			}
+		}
+	}
+};
+
 const scrollToLastCell = (element, msg) => {
 	if (msg === notebookItems.value[notebookItems.value.length - 1]) {
 		element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
@@ -280,7 +309,8 @@ watch(
 );
 
 defineExpose({
-	clearHistory
+	clearHistory,
+	clearOutputs
 });
 </script>
 

packages/client/hmi-client/src/components/llm/tera-jupyter-response.vue

@@ -27,7 +27,10 @@
 				<div v-for="m in msg.messages" :key="m.header.msg_id">
 					<!-- Handle llm_response type -->
 					<div v-if="m.header.msg_type === 'llm_response' && m.content['name'] === 'response_text'">
-						<div class="llm-response">{{ m.content['chatty_response'] }}</div>
+						<div style="padding-top: 1rem">
+							<h5>Agent's response:</h5>
+							<div class="llm-response">{{ m.content['text'] }}</div>
+						</div>
 					</div>
 					<!-- Handle stream type for stderr -->
 					<div v-else-if="m.header.msg_type === 'stream' && m.content['name'] === 'stderr'">
@@ -43,6 +46,7 @@
 					<!-- Handle code_cell type -->
 					<div v-else-if="m.header.msg_type === 'code_cell'" class="code-cell">
 						<tera-chatty-code-cell
+							ref="codeCell"
 							:jupyter-session="jupyterSession"
 							:language="m.content['language']"
 							:code="m.content['code']"
@@ -116,6 +120,7 @@ const props = defineProps<{
 	autoExpandPreview?: boolean;
 }>();
 
+const codeCell = ref(null);
 const resp = ref(<HTMLElement | null>null);
 // Reference for showThought, initially set to false
 const showThought = ref(false);
@@ -184,6 +189,10 @@ watch(
 		emit('cell-updated', resp.value, props.msg);
 	}
 );
+
+defineExpose({
+	codeCell
+});
 </script>
 
 <style scoped>
@@ -232,7 +241,9 @@ watch(
 }
 
 .llm-response {
-	color: green;
+	padding-top: 0.7rem;
+	white-space: pre-wrap;
+	color: black;
 }
 
 .date {

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

@@ -53,12 +53,17 @@
 				/>
 			</div>
 		</div>
-		<div class="gpt-header">
+		<div class="gpt-header flex">
 			<span><i class="pi pi-circle-fill kernel-status" :style="statusStyle" /></span>
 			<span><header id="GPT">TGPT</header></span>
 			<span style="margin-left: 2rem">
 				<label>Auto expand previews:</label><input v-model="autoExpandPreview" type="checkbox" />
 			</span>
+			<span class="flex-auto"></span>
+			<Button label="Reset" class="p-button p-button-sm" @click="confirmReset">
+				<span class="pi pi-replay p-button-icon p-button-icon-left"></span>
+				<span class="p-button-text">Reset</span>
+			</Button>
 		</div>
 		<tera-jupyter-chat
 			ref="chat"
@@ -191,7 +196,7 @@ const setKernelContext = (kernel: IKernelConnection, context_info) => {
 		channel: 'shell',
 		content: context_info,
 		msgType: 'context_setup_request',
-		msgId: createMessageId('context_setup_request')
+		msgId: 'tgpt-context_setup_request'
 	};
 	const message: JupyterMessage = createMessage(messageBody);
 	kernel?.sendJupyterMessage(message);
@@ -306,6 +311,14 @@ const saveAsNewModel = async () => {
 	kernel?.sendJupyterMessage(message);
 };
 
+const resetKernel = async () => {
+	const session = jupyterSession.session;
+	const kernel = session?.kernel as IKernelConnection;
+
+	chat.value.clearOutputs();
+	await session?.changeKernel({ name: kernel.name });
+};
+
 const killKernel = () => {
 	shutdownKernel(selectedKernel.value.kernelId, getServerSettings());
 	updateKernelList();
@@ -318,6 +331,20 @@ const deleteAllKernels = () => {
 	updateKernelList();
 };
 
+const confirmReset = () => {
+	confirm.require({
+		message: `Are you sure you want to rese the kernel?
+
+This will reset the kernel back to its starting state, but keep all of your prompts and code cells.
+The code cells will need to be rerun.`,
+		header: 'Confirmation',
+		icon: 'pi pi-exclamation-triangle',
+		accept: () => {
+			resetKernel();
+		}
+	});
+};
+
 // Kernel Confirmation dialogs
 const confirmReconnect = () => {
 	confirm.require({
@@ -374,12 +401,10 @@ const updateKernelList = () => {
 };
 
 const onNewModelSaved = async (payload) => {
-	console.log('saved');
 	if (!props.project) {
 		toast.error('Unable to save dataset', "Can't find active an project");
 		return;
 	}
-	console.log(payload);
 	const modelId = payload.model_id;
 	await addAsset(props.project.id, ProjectAssetTypes.MODELS, modelId);
 	toast.success('Model saved successfully', 'Refresh to see the dataset in the resource explorer');
@@ -517,3 +542,10 @@ main .annotation-group {
 	color: var(--text-color-subdued);
 }
 </style>
+
+// Overwrite style on primevue dialog message to allow line breaks
+<style>
+.p-confirm-dialog-message {
+	white-space: pre-wrap;
+}
+</style>