Merge pull request #123 from Azure-Samples/prompty-ui-changes

Prompty UI changes

src/api/agents/product/product.prompty

@@ -8,19 +8,22 @@ model:
   configuration:
     type: azure_openai
     azure_deployment: gpt-35-turbo
+    api_version: 2023-07-01-preview
   parameters:
-    stream: false
+    max_tokens: 1500
 sample:
   context: Can you use a selection of sports and outdoor cooking gear as context?
 ---
 system:
+
 You are an AI assistant who helps people find information from a search index.
 You can take context and create number of specialized queries to make to the
 search index return the most relevant information for a writer to use when
 writing marketing articles.
 
 # Context
 Use the follow contex to provide a set of specialized queries to the search index:
+
 {{context}}
 
 # Response format
@@ -37,6 +40,9 @@ queries:
   "outdoor clothing stores",
 ]
 
+This only an example of the output structure. You should make sure to use the context the user gives you
+to generate the queries.
+
 # Output format
 Only output the full array of specialized queries to make to the search index. Limit
 yoursef to 5 queries.

src/api/agents/product/product.py

@@ -4,6 +4,7 @@
 from azure.identity import DefaultAzureCredential, get_bearer_token_provider
 from prompty.tracer import trace
 import prompty
+import prompty.azure
 from openai import AzureOpenAI
 from dotenv import load_dotenv
 from pathlib import Path
@@ -86,7 +87,7 @@ def retrieve_products(items: List[Dict[str, any]], index_name: str) -> str:
 @trace
 def find_products(context: str) -> Dict[str, any]:
     # Get product queries
-    queries = prompty.execute("product.prompty", inputs={context: context})
+    queries = prompty.execute("product.prompty", inputs={"context":context})
     qs = json.loads(queries)
     # Generate embeddings
     items = generate_embeddings(qs)

src/api/agents/researcher/researcher.prompty

@@ -10,6 +10,7 @@ model:
   configuration: 
     type: azure_openai
     azure_deployment: gpt-35-turbo
+    api_version: 2023-07-01-preview
   parameters:
     tools: ${file:functions.json}
 sample:

src/api/agents/researcher/researcher.py

@@ -87,7 +87,7 @@ def execute(instructions: str, feedback: str = "No feedback"):
     }
 
     fns: List[ToolCall] = prompty.execute(
-        "researcher.prompty", inputs={instructions: instructions, feedback: feedback}
+        "researcher.prompty", inputs={"instructions": instructions, "feedback": feedback}
     )
 
     research = []

src/web/src/App.tsx

@@ -6,24 +6,45 @@ import Task from './components/task';
 
 function App() {
   return (
-    <main className="p-12">
-
-      <div className="text-center text-3xl mt-8">Welcome to the Contoso Creative Writer</div>
-      <br></br>
-      <hr className="border-2 border-zinc-300" />
-      <br></br>
-      <span className="text-center text-1xl mt-8 ">This tool will help you write articles for the Contoso blog. Enter the required information and then click "Start Work". To watch the steps in the agent workflow complete, select the debug button in the button corner of the screen. The result will begin writing once the agent completed the tasks to write the article.</span>
-      <br></br>
-      <Task />
-      <hr className="border-2 border-zinc-300" />
-      <div className="text-center text-2xl mt-8">Article Result</div>
-      <Article />
-      <Toolbar />
-      <div className="fixed right-0 bottom-0 mr-12 mb-2 text-zinc-300">
+    <main className="p-8 flex flex-col min-h-screen">
+      {/* Header Section */}
+      <header className="text-center my-6">
+        <h1 className="text-4xl font-bold text-gray-800">Contoso Creative Writer</h1>
+        <p className="text-xl text-gray-600 mt-2">
+          This tool helps you write articles for the Contoso blog.
+
+        </p>
+        <hr className="border-2 border-gray-300 my-6" />
+      </header>
+
+      {/* Main Content Wrapper */}
+      <div className="flex flex-col lg:flex-row lg:space-x-8 mt-8">
+        {/* Task Section - Left Aligned */}
+        <div className="lg:w-1/3 bg-gray-100 p-6 rounded shadow-md">
+          <h3 className="text-2xl text-gray-800 mb-4">Create Your Article</h3>
+          <Task />
+          <div className="text-center mt-4">
+            <Toolbar />
+          </div>
+        </div>
+
+        {/* Article Section - Right Aligned */}
+        <section className="lg:w-2/3 flex-grow mt-8 lg:mt-0">
+          <div className="bg-white shadow-md rounded p-6">
+            <h2 className="text-3xl text-gray-800 mb-4">Your Article</h2>
+            <Article />
+          </div>
+        </section>
+      </div>
+
+      {/* Version Number */}
+      <div className="fixed right-0 bottom-0 mr-6 mb-2 text-gray-400">
         {version}
       </div>
     </main>
   );
 }
 
 export default App;
+
+

src/web/src/app.css

@@ -4,4 +4,24 @@
 
 p {
   text-align: left;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+}
+
+main {
+  background-color: #f9fafb;
+}
+
+header, footer {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+section {
+  max-width: 800px;
+  margin: 0 auto;
 }

src/web/src/components/task.tsx

@@ -149,7 +149,7 @@ export const Task = () => {
         </button>
         <button
           type="button"
-          className="flex flex-row gap-3 items-center rounded-md bg-blue-100 px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+          className="flex flex-row gap-3 items-center rounded-md bg-indigo-100 px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
           onClick={startWork}
         >
           <PaperAirplaneIcon className="w-6" />