Add saving to the prompt engineering exercise

Author: BenjaminDerProgrammierer

workshop-ui/package-lock.json

@@ -28,6 +28,7 @@
     "react-dom": "^19.1.1",
     "react-highlight": "^0.15.0",
     "react-markdown": "^10.1.0",
+    "react-qr-code": "^2.0.18",
     "remark-gfm": "^4.0.1",
     "zod": "^3.25.76"
   },

workshop-ui/package.json

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getAppSessionFromRequest, validateAppSession } from '@/lib/session';
+import { readPrompt } from '@/lib/promptService';
+
+/** 
+ * @route   GET /api/system-prompts/[id]
+ * @desc    Get a system prompt by ID
+ * @response 200 { message: string, url: string } or 400 { error: string } or 401 { error: string } or 501 { error: string }
+ * @access  Protected (any authenticated user/workshop)
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    // Validate authentication
+    const nextResponse = NextResponse.next();
+    const appSession = await getAppSessionFromRequest(request, nextResponse);
+    if (!await validateAppSession(appSession)) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { id } = await params;
+    if (!id) {
+      return NextResponse.json({ error: 'Invalid Request' }, { status: 400 });
+    }
+    // Get system prompt
+    const prompt = await readPrompt(id);
+    if (!prompt || !prompt.content) {
+      return NextResponse.json({ error: 'Prompt not found' }, { status: 404 });
+    }
+
+    return NextResponse.json({ prompt }, { status: 200 });
+  } catch (error) {
+    console.error('Error fetching system prompt:', error);
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}

workshop-ui/src/app/api/system-prompts/[id]/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { generateMetadata } from '@/lib/promptService';
+import { getAppSessionFromRequest, validateAppSession } from '@/lib/session';
+
+/** 
+ * @route   POST /api/system-prompts/save
+ * @desc    Save the current system prompt to Azure Blob Storage
+ * @body    { prompt: string }
+ * @response 200 { message: string, url: string } or 400 { error: string } or 401 { error: string } or 501 { error: string }
+ * @access  Protected (any authenticated user/workshop)
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    // Validate authentication
+    const nextResponse = NextResponse.next();
+    const appSession = await getAppSessionFromRequest(request, nextResponse);
+    if (!await validateAppSession(appSession)) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { id } = body;
+    if (!id) {
+      return NextResponse.json({ error: 'Invalid Request' }, { status: 400 });
+    }
+    await generateMetadata(id);
+
+    return NextResponse.json({ message: 'System prompt saved successfully', id }, { status: 200 });
+  } catch (error) {
+    console.error('Error generating metadata:', error);
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}

workshop-ui/src/app/api/system-prompts/metadata/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { savePromptToBlobStorage } from '@/lib/promptService';
+import { getAppSessionFromRequest, validateAppSession } from '@/lib/session';
+
+/** 
+ * @route   POST /api/system-prompts/save
+ * @desc    Save the current system prompt to Azure Blob Storage
+ * @body    { prompt: string }
+ * @response 200 { message: string, url: string } or 400 { error: string } or 401 { error: string } or 501 { error: string }
+ * @access  Protected (any authenticated user/workshop)
+ */
+export async function POST(
+  request: NextRequest,
+) {
+  try {
+    // Validate authentication
+    const nextResponse = NextResponse.next();
+    const appSession = await getAppSessionFromRequest(request, nextResponse);
+    if (!await validateAppSession(appSession)) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { prompt } = body;
+
+    if (!prompt || typeof prompt !== 'string' || prompt.trim().length === 0) {
+      return NextResponse.json({ error: 'Invalid prompt' }, { status: 400 });
+    }
+
+    const { id } = await savePromptToBlobStorage(prompt);
+    if (!id) {
+      return NextResponse.json({ error: 'Failed to save prompt' }, { status: 500 });
+    }
+
+    return NextResponse.json({ message: 'System prompt saved successfully', id }, { status: 200 });
+  } catch (error) {
+    console.error('Error saving system prompt:', error);
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}

workshop-ui/src/app/api/system-prompts/save/route.ts

@@ -198,6 +198,10 @@
   align-items: center;
   justify-content: center;
 
+  svg {
+    flex: none;
+  }
+
   &:disabled {
     background-color: #ccc;
     cursor: not-allowed;
@@ -219,6 +223,17 @@
     width: 100%;
     border-radius: 0;
 
+    &:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+  }
+
+    &.saveButton {
+    background-color: #ffc107;
+    width: 100%;
+    border-radius: 0;
+
     &:disabled {
       background-color: #ccc;
       cursor: not-allowed;
@@ -245,4 +260,24 @@
       color: #721c24;
     }
   }
+}
+
+.qrContainer {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .qrCode {
+    background: #fff;
+    padding: 12px;
+    border-radius: 8px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  }
+
+  .qrLabel {
+    font-size: 12px;
+    color: #666;
+    margin-top: 8px;
+  }
 }