Ts/llm thought output for release (#3565)

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

@@ -58,12 +58,12 @@ const props = defineProps<{
  contextLanguage: string;
 }>();
 
-const emit = defineEmits(['llm-output']);
+const emit = defineEmits(['llm-output', 'llm-thought-output']);
 
 const questionString = ref('');
 const kernelStatus = ref<string>('');
-
 const showAssistant = ref(true);
+const thoughts = ref();
 
 // FIXME: If the language is changed here it should mutate the beaker instance in the parent component
 
@@ -80,6 +80,10 @@ const submitQuestion = () => {
  message.register('code_cell', (data) => {
  emit('llm-output', data);
  });
+ message.register('llm_thought', (data) => {
+ thoughts.value = data;
+ emit('llm-thought-output', data);
+ });
 };
 </script>
 

packages/client/hmi-client/src/components/llm/tera-notebook-jupyter-thought-output.vue

@@ -0,0 +1,31 @@
+<template>
+ <p v-if="showThoughts" class="thought-bubble">
+ {{ thought }}
+ </p>
+ <Button
+ v-if="thought"
+ link
+ :label="`${showThoughts ? 'Hide' : 'Show'} thoughts`"
+ @click="() => (showThoughts = !showThoughts)"
+ />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import Button from 'primevue/button';
+
+const props = defineProps<{
+ llmThought?: any;
+}>();
+const showThoughts = ref(false);
+const thought = computed(() => props?.llmThought?.content?.thought ?? '');
+</script>
+
+<style scoped>
+.thought-bubble {
+ border: 1px solid var(--surface-border-light);
+ border-radius: var(--border-radius);
+ padding: var(--gap-small);
+ margin-top: var(--gap-small);
+}
+</style>

packages/client/hmi-client/src/components/workflow/ops/decapodes/tera-decapodes-drilldown.vue

@@ -31,8 +31,10 @@
  :defaultOptions="sampleAgentQuestions"
  :context-language="contextLanguage"
  @llm-output="(data: any) => appendCode(data, 'code')"
+ @llm-thought-output="(data: any) => (llmThought = data)"
  />
  </Suspense>
+ <tera-notebook-jupyter-thought-output :llm-thought="llmThought" />
  <v-ace-editor
  v-model:value="codeText"
  @init="initializeEditor"
@@ -65,6 +67,8 @@ import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
+import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
+
 import { KernelSessionManager } from '@/services/jupyter';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
@@ -114,6 +118,7 @@ const initializeEditor = (editorInstance: any) => {
  editor = editorInstance;
 };
 const codeText = ref();
+const llmThought = ref();
 
 const buildJupyterContext = () => ({
  context: 'decapodes',

packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue

@@ -81,12 +81,16 @@
  @click="runCode"
  />
  </div>
- <tera-notebook-jupyter-input
- :kernelManager="kernelManager"
- :defaultOptions="sampleAgentQuestions"
- @llm-output="appendCode"
- :context-language="contextLanguage"
- />
+ <div class="toolbar">
+ <tera-notebook-jupyter-input
+ :kernelManager="kernelManager"
+ :defaultOptions="sampleAgentQuestions"
+ @llm-output="appendCode"
+ @llm-thought-output="(data: any) => (llmThought = data)"
+ :context-language="contextLanguage"
+ />
+ <tera-notebook-jupyter-thought-output :llm-thought="llmThought" />
+ </div>
  <v-ace-editor
  v-model:value="code"
  @init="initializeAceEditor"
@@ -158,6 +162,8 @@ import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
 import Image from 'primevue/image';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
+import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
+
 import { saveCodeToState } from '@/services/notebook';
 import { getImages, addImage, deleteImages } from '@/services/image';
 import { ModelComparisonOperationState } from './model-comparison-operation';
@@ -185,6 +191,7 @@ const isLoadingStructuralComparisons = ref(false);
 const structuralComparisons = ref<string[]>([]);
 const llmAnswer = ref('');
 const code = ref(props.node.state.notebookHistory?.[0]?.code ?? '');
+const llmThought = ref();
 const isKernelReady = ref(false);
 const modelsToCompare = ref<Model[]>([]);
 const contextLanguage = ref<string>('python3');
@@ -403,6 +410,9 @@ ul {
  gap: var(--gap-small);
  position: relative;
 }
+.toolbar {
+ padding-left: var(--gap-medium);
+}
 
 .toolbar-right-side {
  position: absolute;

packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config.vue

@@ -233,14 +233,18 @@
  @click="runFromCode"
  />
  </div>
- <Suspense>
- <tera-notebook-jupyter-input
- :kernel-manager="kernelManager"
- :defaultOptions="sampleAgentQuestions"
- :context-language="contextLanguage"
- @llm-output="(data: any) => appendCode(data, 'code')"
- />
- </Suspense>
+ <div class="toolbar">
+ <Suspense>
+ <tera-notebook-jupyter-input
+ :kernel-manager="kernelManager"
+ :defaultOptions="sampleAgentQuestions"
+ :context-language="contextLanguage"
+ @llm-output="(data: any) => appendCode(data, 'code')"
+ @llm-thought-output="(data: any) => (llmThought = data)"
+ />
+ </Suspense>
+ <tera-notebook-jupyter-thought-output :llm-thought="llmThought" />
+ </div>
  <v-ace-editor
  v-model:value="codeText"
  @init="initializeEditor"
@@ -345,6 +349,7 @@ import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-mo
 import TeraModelSemanticTables from '@/components/model/tera-model-semantic-tables.vue';
 import teraModelIntervention from '@/components/model/petrinet/tera-model-intervention.vue';
 import TeraModal from '@/components/widgets/tera-modal.vue';
+import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
 
 import { FatalError } from '@/api/api';
 import TeraInitialTable from '@/components/model/petrinet/tera-initial-table.vue';
@@ -437,6 +442,7 @@ const buildJupyterContext = () => {
 const codeText = ref(
  '# This environment contains the variable "model_config" to be read and updated'
 );
+const llmThought = ref();
 const notebookResponse = ref();
 const executeResponse = ref({
  status: OperatorStatus.DEFAULT,
@@ -1042,6 +1048,9 @@ onUnmounted(() => {
  display: flex;
  align-items: center;
 }
+.toolbar {
+ padding-left: var(--gap-medium);
+}
 
 :deep(.p-datatable-loading-overlay.p-component-overlay) {
  background-color: #fff;

packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue

@@ -26,14 +26,18 @@
  @click="runFromCodeWrapper"
  />
  </div>
- <Suspense>
- <tera-notebook-jupyter-input
- :kernel-manager="kernelManager"
- :default-options="sampleAgentQuestions"
- :context-language="contextLanguage"
- @llm-output="(data: any) => appendCode(data, 'code')"
- />
- </Suspense>
+ <div class="toolbar">
+ <Suspense>
+ <tera-notebook-jupyter-input
+ :kernel-manager="kernelManager"
+ :default-options="sampleAgentQuestions"
+ :context-language="contextLanguage"
+ @llm-output="(data: any) => appendCode(data, 'code')"
+ @llm-thought-output="(data: any) => (llmThought = data)"
+ />
+ </Suspense>
+ <tera-notebook-jupyter-thought-output :llm-thought="llmThought" />
+ </div>
  <v-ace-editor
  v-model:value="codeText"
  @init="initializeAceEditor"
@@ -110,6 +114,7 @@ import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraModelTemplateEditor from '@/components/model-template/tera-model-template-editor.vue';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
+import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
 
 import { KernelSessionManager } from '@/services/jupyter';
 import { getModelIdFromModelConfigurationId } from '@/services/model-configurations';
@@ -168,6 +173,8 @@ const contextLanguage = ref<string>('python3');
 const defaultCodeText =
  '# This environment contains the variable "model" \n# which is displayed on the right';
 const codeText = ref(defaultCodeText);
+const llmThought = ref();
+
 const executeResponse = ref({
  status: OperatorStatus.DEFAULT,
  name: '',
@@ -401,8 +408,7 @@ onUnmounted(() => {
  position: relative;
 }
 
-.notebook-section:deep(main .notebook-toolbar),
-.notebook-section:deep(main .ai-assistant) {
+.notebook-section:deep(main .toolbar) {
  padding-left: var(--gap-medium);
 }
 .toolbar-right-side {

packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-mira.vue

@@ -42,13 +42,16 @@
  </div>
  <div :tabName="StratifyTabs.Notebook">
  <tera-drilldown-section class="notebook-section">
- <tera-notebook-jupyter-input
- :kernel-manager="kernelManager"
- :default-options="[]"
- :context-language="'python3'"
- @llm-output="(data: any) => processLLMOutput(data)"
- />
-
+ <div class="toolbar">
+ <tera-notebook-jupyter-input
+ :kernel-manager="kernelManager"
+ :default-options="[]"
+ :context-language="'python3'"
+ @llm-output="(data: any) => processLLMOutput(data)"
+ @llm-thought-output="(data: any) => (llmThought = data)"
+ />
+ <tera-notebook-jupyter-thought-output :llm-thought="llmThought" />
+ </div>
  <v-ace-editor
  v-model:value="codeText"
  @init="initialize"
@@ -130,6 +133,7 @@ import TeraModelSemanticTables from '@/components/model/tera-model-semantic-tabl
 import TeraSaveModelModal from '@/page/project/components/tera-save-model-modal.vue';
 import TeraStratificationGroupForm from '@/components/workflow/ops/stratify-mira/tera-stratification-group-form.vue';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
+import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
 
 import { createModel, getModel } from '@/services/model';
 import { WorkflowNode, OperatorStatus } from '@/types/workflow';
@@ -196,6 +200,7 @@ const kernelManager = new KernelSessionManager();
 
 let editor: VAceEditorInstance['_editor'] | null;
 const codeText = ref('');
+const llmThought = ref();
 
 const updateStratifyGroupForm = (config: StratifyGroup) => {
  const state = _.cloneDeep(props.node.state);
@@ -495,8 +500,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.notebook-section:deep(main .notebook-toolbar),
-.notebook-section:deep(main .ai-assistant) {
+.notebook-section:deep(main .toolbar) {
  padding-left: var(--gap-medium);
 }