From 79e380371963f6714f673554df86f3258acdf89c Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Wed, 20 Mar 2024 08:44:19 +0100
Subject: [PATCH] feat: system prompt for playground page

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 .../src/managers/playgroundV2Manager.ts       |  8 +-
 packages/backend/src/studio-api-impl.ts       |  9 ++-
 packages/frontend/src/pages/Playground.svelte | 77 +++++++++++++------
 packages/shared/src/StudioAPI.ts              |  7 +-
 4 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/packages/backend/src/managers/playgroundV2Manager.ts b/packages/backend/src/managers/playgroundV2Manager.ts
index cf46e1475..c43ed32c9 100644
--- a/packages/backend/src/managers/playgroundV2Manager.ts
+++ b/packages/backend/src/managers/playgroundV2Manager.ts
@@ -87,7 +87,7 @@ export class PlaygroundV2Manager extends Publisher<PlaygroundV2[]> implements Di
    * @param userInput the user input
    * @param options the model configuration
    */
-  async submit(playgroundId: string, userInput: string, options?: ModelOptions): Promise<void> {
+  async submit(playgroundId: string, userInput: string, systemPrompt: string, options?: ModelOptions): Promise<void> {
     const playground = this.#playgrounds.get(playgroundId);
     if (playground === undefined) throw new Error('Playground not found.');
 
@@ -122,8 +122,12 @@ export class PlaygroundV2Manager extends Publisher<PlaygroundV2[]> implements Di
       apiKey: 'dummy',
     });
 
+    const messages = this.getFormattedMessages(playground.id);
+    if (systemPrompt) {
+      messages.push({ role: 'system', content: systemPrompt });
+    }
     const response = await client.chat.completions.create({
-      messages: this.getFormattedMessages(playground.id),
+      messages,
       stream: true,
       model: modelInfo.file.file,
       ...options,
diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
index 170b96313..fb93dd9f0 100644
--- a/packages/backend/src/studio-api-impl.ts
+++ b/packages/backend/src/studio-api-impl.ts
@@ -72,8 +72,13 @@ export class StudioApiImpl implements StudioAPI {
     return this.playgroundV2.getPlaygrounds();
   }
 
-  submitPlaygroundMessage(containerId: string, userInput: string, options?: ModelOptions): Promise<void> {
-    return this.playgroundV2.submit(containerId, userInput, options);
+  submitPlaygroundMessage(
+    containerId: string,
+    userInput: string,
+    systemPrompt: string,
+    options?: ModelOptions,
+  ): Promise<void> {
+    return this.playgroundV2.submit(containerId, userInput, systemPrompt, options);
   }
 
   async getPlaygroundConversations(): Promise<Conversation[]> {
diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
index 3575bb787..cad1def13 100644
--- a/packages/frontend/src/pages/Playground.svelte
+++ b/packages/frontend/src/pages/Playground.svelte
@@ -14,6 +14,7 @@ import { playgrounds } from '../stores/playgrounds-v2';
 import { catalog } from '../stores/catalog';
 import Button from '../lib/button/Button.svelte';
 import { afterUpdate } from 'svelte';
+import ContentDetailsLayout from '../lib/ContentDetailsLayout.svelte';
 
 export let playgroundId: string;
 let prompt: string;
@@ -22,6 +23,9 @@ let scrollable: Element;
 let lastIsUserMessage = false;
 let errorMsg = '';
 
+// settings
+let systemPrompt: string = '';
+
 $: conversation = $conversations.find(conversation => conversation.id === playgroundId);
 $: playground = $playgrounds.find(playground => playground.id === playgroundId);
 $: model = $catalog.models.find(model => model.id === playground?.modelId);
@@ -63,7 +67,7 @@ function getMessageParagraphs(message: ChatMessage): string[] {
 function askPlayground() {
   errorMsg = '';
   sendEnabled = false;
-  studioClient.submitPlaygroundMessage(playgroundId, prompt).catch((err: unknown) => {
+  studioClient.submitPlaygroundMessage(playgroundId, prompt, systemPrompt, {}).catch((err: unknown) => {
     errorMsg = String(err);
     sendEnabled = true;
   });
@@ -101,30 +105,55 @@ function elapsedTime(msg: AssistantChat): string {
     <svelte:fragment slot="subtitle">{model?.name}</svelte:fragment>
     <svelte:fragment slot="content">
       <div class="flex flex-col w-full h-full">
-        <div bind:this="{scrollable}" aria-label="conversation" class="w-full h-full overflow-auto">
-          {#if conversation?.messages}
-            <ul class="p-4">
-              {#each conversation?.messages as message}
-                <li class="m-4">
-                  <div class="text-lg" class:text-right="{isAssistantChat(message)}">{roleNames[message.role]}</div>
-                  <div
-                    class="p-4 rounded-md"
-                    class:bg-charcoal-400="{isUserChat(message)}"
-                    class:bg-charcoal-900="{isAssistantChat(message)}"
-                    class:ml-8="{isAssistantChat(message)}"
-                    class:mr-8="{isUserChat(message)}">
-                    {#each getMessageParagraphs(message) as paragraph}
-                      <p>{paragraph}</p>
-                    {/each}
-                  </div>
-                  {#if isAssistantChat(message)}
-                    <div class="text-sm text-gray-400 text-right" aria-label="elapsed">{elapsedTime(message)} s</div>
+        <div class="h-full overflow-auto" bind:this="{scrollable}">
+          <ContentDetailsLayout detailsTitle="Settings" detailsLabel="settings">
+            <svelte:fragment slot="content">
+              <div class="flex flex-col w-full h-full">
+                <div aria-label="conversation" class="w-full h-full">
+                  {#if conversation?.messages}
+                    <ul class="p-4">
+                      {#each conversation?.messages as message}
+                        <li class="m-4">
+                          <div class="text-lg" class:text-right="{isAssistantChat(message)}">
+                            {roleNames[message.role]}
+                          </div>
+                          <div
+                            class="p-4 rounded-md"
+                            class:bg-charcoal-400="{isUserChat(message)}"
+                            class:bg-charcoal-900="{isAssistantChat(message)}"
+                            class:ml-8="{isAssistantChat(message)}"
+                            class:mr-8="{isUserChat(message)}">
+                            {#each getMessageParagraphs(message) as paragraph}
+                              <p>{paragraph}</p>
+                            {/each}
+                          </div>
+                          {#if isAssistantChat(message)}
+                            <div class="text-sm text-gray-400 text-right" aria-label="elapsed">
+                              {elapsedTime(message)} s
+                            </div>
+                          {/if}
+                          <div></div>
+                        </li>
+                      {/each}
+                    </ul>
                   {/if}
-                  <div></div>
-                </li>
-              {/each}
-            </ul>
-          {/if}
+                </div>
+              </div>
+            </svelte:fragment>
+            <svelte:fragment slot="details">
+              <div class="bg-charcoal-600 w-full rounded-md text-xs p-4">
+                <div class="mb-4">System Prompt</div>
+                <div class="w-full">
+                  <textarea
+                    bind:value="{systemPrompt}"
+                    class="w-full outline-none bg-charcoal-500 rounded-sm text-gray-700 placeholder-gray-700"
+                    rows="4"
+                    placeholder="Provide system prompt to define general context, instructions or guidelines to be used with each query"
+                  ></textarea>
+                </div>
+              </div>
+            </svelte:fragment>
+          </ContentDetailsLayout>
         </div>
         {#if errorMsg}
           <div class="text-red-500 text-sm p-2">{errorMsg}</div>
diff --git a/packages/shared/src/StudioAPI.ts b/packages/shared/src/StudioAPI.ts
index 508fca256..356e97e7f 100644
--- a/packages/shared/src/StudioAPI.ts
+++ b/packages/shared/src/StudioAPI.ts
@@ -137,7 +137,12 @@ export abstract class StudioAPI {
    * @param userInput the user input, e.g. 'What is the capital of France ?'
    * @param options the options for the model, e.g. temperature
    */
-  abstract submitPlaygroundMessage(containerId: string, userInput: string, options?: ModelOptions): Promise<void>;
+  abstract submitPlaygroundMessage(
+    containerId: string,
+    userInput: string,
+    systemPrompt: string,
+    options?: ModelOptions,
+  ): Promise<void>;
 
   /**
    * Return the conversations