view prompt and reponse

nbonamy · Jan 17, 2024 · 5a51786 · 5a51786
1 parent 07e5532
commit 5a51786
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/public/js/code-viewer.vue b/public/js/code-viewer.vue
@@ -2,17 +2,59 @@
   <div class="modal-card" style="width: 800px; margin: 0 auto;">
     <header class="modal-card-head"><p class="modal-card-title">{{ title }}</p></header>
     <section class="modal-card-body">
-      <pre>{{ code }}</pre>
+      <pre>{{ formattedCode }}</pre>
     </section>
     <footer class="modal-card-foot">
-      <b-button label="Close" @click="$parent.close()" />
+      <b-button label="Close" @click="$parent.close()"></b-button>
+      <b-button label="Prompt" @click="showPrompt()" v-if="hasPrompt"></b-button>
+      <b-button label="Response" @click="showResponse()" v-if="hasResponse"></b-button>
     </footer>
   </div>
 </template>
 
 <script>
 export default {
-  props: [ 'code', 'title' ],
+  name: 'CodeViewer',
+  props: [ 'code', 'title', 'asText' ],
+  computed: {
+    formattedCode() {
+      let formatted = JSON.stringify(this.code, null, 2)
+      if (this.asText) {
+        formatted = formatted.replace(/\\n/g, '\n')
+        formatted = formatted.slice(1, -1).trim()
+      }
+      return formatted
+    },
+    hasPrompt() {
+      let prompt = this.code['prompt'] ?? this.code['question']
+      return prompt != null && prompt.length > 0
+    },
+    hasResponse() {
+      let response = this.code['response'] ?? this.code['answer']
+      return response != null && response.length > 0
+    }
+  },
+  methods: {
+    showPrompt() {
+      this.showAsText('Prompt', this.code['prompt'] ?? this.code['question'])
+    },
+    showResponse() {
+      this.showAsText('Response', this.code['response'] ?? this.code['answer'])
+    },
+    showAsText(title, str) {
+      this.$buefy.modal.open({
+        parent: this,
+        trapFocus: true,
+        hasModalCard: true,
+        component: CodeViewer,
+        props: {
+          title: title,
+          asText: true,
+          code: str,
+        },
+      })
+    }
+  }
 }
 </script>
 

diff --git a/public/js/index.js b/public/js/index.js
@@ -146,7 +146,7 @@ var vm = new Vue({
         component: CodeViewer,
         props: {
           title: 'Chain',
-          code: JSON.stringify(response, null, 2),
+          code: response,
         },
       })
     },

diff --git a/public/js/step.vue b/public/js/step.vue
@@ -52,7 +52,7 @@ export default {
         component: CodeViewer,
         props: {
           title: this.title,
-          code: JSON.stringify(clone, null, 2),
+          code: clone,
         },
       })
     },