feat: add prompt preview renderer

Author: Randoooom

Makefile

@@ -28,10 +28,10 @@ dashboard_setup:
 dashboard_protoc: dashboard_setup
 	pnpm run -C dashboard protoc
 
-dashboard_build: dashboard_protoc
+dashboard_build: lib_build dashboard_protoc
 	pnpm run -C dashboard build
 
-dashboard: cleanup docker_network oidc-server-mock postgres_database postgres_backend dashboard_protoc
+dashboard: cleanup docker_network oidc-server-mock postgres_database postgres_backend lib_build dashboard_protoc
 		NUXT_PUBLIC_FEEDBACK_FUSION_ENDPOINT="http://localhost:8000" \
 		FEEDBACK_FUSION_OIDC_PROVIDER_AUTHORIZATION_URL="http://localhost:5151/connect/authorize" \
 		FEEDBACK_FUSION_OIDC_PROVIDER_TOKEN_URL="http://localhost:5151/connect/token" \

dashboard/Dockerfile

@@ -4,6 +4,7 @@ RUN apt-get update && apt-get install -y protobuf-compiler libprotobuf-dev make
 
 COPY ./dashboard/ ./dashboard
 COPY ./proto ./proto
+COPY ./lib ./lib
 COPY ./Makefile .
 
 RUN make dashboard_build

dashboard/components/prompt/preview.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-expansion-panels>
+    <v-expansion-panel :title="$t('prompt.preview')">
+      <v-expansion-panel-text>
+        <v-tabs bg-color="primary" v-model="tab">
+          <v-tab value="preview">
+            {{ $t("prompt.preview") }}
+          </v-tab>
+
+          <v-tab value="code">
+            {{ $t("prompt.code") }}
+          </v-tab>
+        </v-tabs>
+
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item value="preview">
+            <div class="d-flex justify-center align-center">
+              <feedback-fusion-prompt
+                :baseUrl="config.public.feedbackFusionEndpoint"
+                :promptId="prompt"
+                class="mt-4 mb-4"
+                style="width: 500px; max-width: 95vw"
+              />
+            </div>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item value="code">
+            <pre>
+              <code>
+              &lt;feedback-fusion-prompt
+                baseUrl="{{ config.public.feedbackFusionEndpoint }}"
+                promptId="{{ prompt }}"
+                class="mt-4 mb-4"
+                style="width: 500px; max-width: 95vw"
+              /&gt;
+              </code>
+            </pre>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script setup lang="ts">
+import { defineProps, useRuntimeConfig, ref } from "#imports";
+import "@onelitefeathernet/feedback-fusion";
+
+const config = useRuntimeConfig();
+const tab = ref("preview");
+
+const props = defineProps({
+  prompt: String,
+});
+</script>

dashboard/i18n/locales/en.json

@@ -19,7 +19,11 @@
     "title": "Title",
     "delete": "Are you sure you want to delete the prompt? This will also delete all fields and gathered data.",
     "description": "description",
-    "create": "Create new prompt"
+    "create": "Create new prompt",
+    "active": "active",
+    "disabled": "disabled",
+    "preview": "Preview",
+    "code": "Code"
   },
   "target": {
     "delete": "Are you sure you want to delete the target? This will also delete all prompts and gathered data.",

dashboard/nuxt.config.ts

@@ -30,6 +30,9 @@ export default defineNuxtConfig({
       alwaysRedirect: true,
     },
   },
+  build: {
+    transpile: ["@onelitefeathernet/feedback-fusion"],
+  },
   oidc: {
     middleware: {
       globalMiddlewareEnabled: true,
@@ -67,6 +70,9 @@ export default defineNuxtConfig({
   },
   vuetify: {
     vuetifyOptions: {
+      theme: {
+        defaultTheme: "dark",
+      },
       labComponents: true,
     },
   },

dashboard/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@nuxtjs/i18n": "^9.1.1",
+    "@onelitefeathernet/feedback-fusion": "link:../lib",
     "@pinia/nuxt": "0.9.0",
     "@protobuf-ts/grpcweb-transport": "^2.9.4",
     "@protobuf-ts/plugin": "^2.9.4",
@@ -28,11 +29,13 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@lit/localize": "^0.12.2",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
+    "lit": "^3.2.1",
     "prettier": "^3.4.2",
     "protoc": "^1.1.3",
     "sass": "^1.83.0",

dashboard/pages/target/[target]/prompt/[prompt]/index.vue

@@ -9,7 +9,13 @@
     :deleteMessage="$t('prompt.delete')"
   >
     <template #title="{ instance }">
-      {{ instance?.title }}
+      {{ instance?.title }} -
+      <v-chip
+        v-if="instance?.active"
+        color="success"
+        :text="$t('prompt.active')"
+      />
+      <v-chip v-else color="error" :text="$t('prompt.disabled')" />
     </template>
 
     <template #subtitle="{ instance }">
@@ -22,6 +28,8 @@
         :target="route.params.target"
         :prompt="instance.id"
       />
+
+      <PromptPreview class="mt-8" :prompt="route.params.prompt" />
     </template>
   </InstanceCard>
 </template>

dashboard/pnpm-lock.yaml

@@ -9,9 +9,9 @@
   "module": "dist/src/index.js",
   "exports": {
     ".": {
+      "browser": "./dist/src/index.min.js",
       "import": "./dist/src/index.js",
-      "require": "./dist/src/index.js",
-      "browser": "./dist/src/index.min.js"
+      "require": "./dist/src/index.js"
     }
   },
   "scripts": {