From 292c9cec0aca9fab4ca2860efab55da597e9c866 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <105607645+karthikscale3@users.noreply.github.com>
Date: Wed, 22 May 2024 14:55:56 -0700
Subject: [PATCH] Release 1.4.5 (#121)

* Pagination bug

* Bug fix

* chore: add docker cmd

* Compatibility fixes for SDK version 2.0.0 (#69)

* Pagination bug

* Bug fix

* Fix for schema changes

* Render tool calling

* Support for Langgraph, Qdrant & Groq  (#73)

* Pagination bug

* Bug fix

* Add langgraph support

* QDrant support

* Add Groq support

* update README

* update README

* feat: optimise docker image for self host setup

* adding api access to traces endpoint

* clean up

* refactor

* feat: add clickhouse db create on app start (#79)

* docs: add railway deploy, fix sdk badges (#81)

* untrack .env

* Revert "untrack .env"

This reverts commit 4551d7eb33a22b4ba94be8eb1e20d620c6e0a567.

* Playground and Prompt Management (#83)

* Pagination bug

* Bug fix

* Playground - basic implementation

* Playground - streaming and nonstreaming

* Move playground inside project

* API key flow

* Api key

* Playground refactor

* Add chat hookup

* anthropic streaming support

* Bug fixes to openai playground

* Anthropic bugfixes

* Anthropic bugfix

* Cohere first iteration

* Cohere role fixes

* Cohere api fix

* Parallel running

* Playground cost calculation non streaming

* playground - streaming token calculation

* latency and cost

* Support for Groq

* Add model name

* Prompt management views

* Remove current promptset flow

* Prompt management API hooks

* Prompt registry final

* Playground bugfixes

* Bug fix playground

* Rearrange project nav

* Fix playground

* Fix prompts

* Bugfixes

* Minor fix

* Prompt versioning bugfix

* Bugfix

* fix: clickhouse table find queries (#82)

* Fix to surface multiple LLM requests inside LLM View (#84)

* Pagination bug

* Bug fix

* Fix for surfacing multiple LLM requests in LLMView

* Minor bugfixes (#86)

* Pagination bug

* Bug fix

* Bugfixes

* api to fetch promptset with prompt filters

* bug fixes

* fix invalid redirect

* fix invalid status code

* Project Switcher (#90)

* Pagination bug

* Bug fix

* Project switcher

* Feat: dataset download (#60)

* API: download dataset

* API: Download dataset

* updated download-dataset api

* Updated: download_dataset api

* Updated download dataset API

* Updated Download API: changed Response to Next Response, add a condition to ensure max page size is 500

* updated the download-dataset API: fixed the format and removed redundant lines of code

* Updated download_daatset API: file name and removed 'id' param

* Added the Download dataset button.

* Merged developemnt into my branch

* Updated button size

* Fixes

---------

Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com>

* Update prompt registry with instructions to fetch prompts (#91)

* Pagination bug

* Bug fix

* Update prompt registry

* Minor bugfix (#94)

* Pagination bug

* Bug fix

* Minor bugfix

* chore: update github repo badges

* optimizing token count function

* Add GPT4-O Pricing and Playground (#98)

* Pagination bug

* Bug fix

* Add GPT4-O support

* Add GPT4-O support

* Update cost

* Dylan/s3en 2234 add perplexity support to playground (#89)

* adding perplexity to playground types

* adding ui stuff:'

* adding perplexity chat api

* fixing perplexity model dropdown

---------

Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com>

* api changes

* add api access to get api and fix all bugs

* bug fix

* bug fix

* updating descriptions to optional

* prio python

* cleanup and fixes

* more bug fixes

* more fixes

* remove console log

* updating trace_service functions

* add migration

* add format function, updating from day to hour

* adding dropwdown menu

* updating query key

* updating query keys v2

* clean up

* fix bug

* Minor bugfix (#102)

* Pagination bug

* Bug fix

* Minor bugfix

* fixes

* Bug fixes to Evaluations  (#111)

* Pagination bug

* Bug fix

* Bug fixes to evals v2

* Minor fix

* upgrading tiktoken, adding omni to pricing (#110)

Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com>

* Update package

* Dataset bugfix (#113)

* Pagination bug

* Bug fix

* Dataset bugfix

* Minor linking fix (#114)

* Pagination bug

* Bug fix

* Dataset bugfix

* Minor fix

* api bug fix (#116)

* fixing dropdown color (#117)

* Support for Image inputs (#119)

* Pagination bug

* Bug fix

* Support image inputs

* Bug fix Spans with status_code = "ERROR" (#120)

* Pagination bug

* Bug fix

* Support image inputs

* Bug fixes

* Dylan/s3en 2265 save prompt and model settings directly from playground (#99)

* bug fixes, adding save prompt button in playground

* adding save prompt dialog

* adding create registry dialog

* working registry selection

* Adding new prompt to exist registry

* storing

* button padding fix

* refactor, adding combobox

* increasing dropdwon width

---------

Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com>

---------

Co-authored-by: Darshit Suratwala <darshit@scale3labs.com>
Co-authored-by: darshit-s3 <119623510+darshit-s3@users.noreply.github.com>
Co-authored-by: dylan <dylan@scale3labs.com>
Co-authored-by: dylanzuber-scale3 <116033320+dylanzuber-scale3@users.noreply.github.com>
Co-authored-by: Rohit Kadhe <rohit@scale3labs.com>
Co-authored-by: Rohit Kadhe <113367036+rohit-kadhe@users.noreply.github.com>
Co-authored-by: MayuriS24 <159064413+MayuriS24@users.noreply.github.com>
---
 .../[project_id]/prompts/[prompt_id]/page.tsx |   8 +-
 components/evaluate/evaluation-table.tsx      |  26 +-
 components/playground/common.tsx              |  93 ++-
 .../playground/prompt-registry-dialog.tsx     | 206 +++++++
 components/project/dataset/create.tsx         |   5 +
 components/project/traces/logs-view.tsx       |  10 +-
 components/project/traces/trace-row.tsx       |  44 +-
 components/project/traces/traces.tsx          |   4 +-
 components/shared/create-prompt-dialog.tsx    | 543 ++++++++++--------
 lib/utils.ts                                  |  20 +
 package-lock.json                             |  12 +
 package.json                                  |   1 +
 12 files changed, 683 insertions(+), 289 deletions(-)
 create mode 100644 components/playground/prompt-registry-dialog.tsx

diff --git a/app/(protected)/project/[project_id]/prompts/[prompt_id]/page.tsx b/app/(protected)/project/[project_id]/prompts/[prompt_id]/page.tsx
index 99a5cc95..167d8831 100644
--- a/app/(protected)/project/[project_id]/prompts/[prompt_id]/page.tsx
+++ b/app/(protected)/project/[project_id]/prompts/[prompt_id]/page.tsx
@@ -20,6 +20,7 @@ export default function Page() {
   const router = useRouter();
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [selectedPrompt, setSelectedPrompt] = useState<Prompt>();
+  const [createDialogOpen, setCreateDialogOpen] = useState<boolean>(false);
   const [live, setLive] = useState<boolean>(false);
   const queryClient = useQueryClient();
 
@@ -72,6 +73,8 @@ export default function Page() {
           <CreatePromptDialog
             promptsetId={promptsetId}
             version={prompts.length + 1}
+            open={createDialogOpen}
+            setOpen={setCreateDialogOpen}
           />
         </div>
       </div>
@@ -93,11 +96,15 @@ export default function Page() {
               currentPrompt={selectedPrompt}
               promptsetId={promptsetId}
               version={prompts.length + 1}
+              open={createDialogOpen}
+              setOpen={setCreateDialogOpen}
             />
           ) : (
             <CreatePromptDialog
               promptsetId={promptsetId}
               version={prompts.length + 1}
+              open={createDialogOpen}
+              setOpen={setCreateDialogOpen}
             />
           )}
         </div>
@@ -247,7 +254,6 @@ function PageLoading() {
           <ChevronLeft className="w-6 h-6 mr-2" />
           Back
         </Button>
-        <CreatePromptDialog promptsetId={""} disabled={true} />
       </div>
       <div className="flex gap-4 w-full h-screen">
         <Skeleton className="w-[340px] h-screen" />
diff --git a/components/evaluate/evaluation-table.tsx b/components/evaluate/evaluation-table.tsx
index 9f86b601..46af7b3f 100644
--- a/components/evaluate/evaluation-table.tsx
+++ b/components/evaluate/evaluation-table.tsx
@@ -164,17 +164,21 @@ export default function EvaluationTable({
       !currentData ? (
         <EvaluationTableSkeleton />
       ) : (
-        currentData.map((span: any, i: number) => (
-          <EvaluationRow
-            key={i}
-            page={i + 1}
-            span={span}
-            projectId={projectId}
-            testId={test.id}
-            onCheckedChange={onCheckedChange}
-            selectedData={selectedData}
-          />
-        ))
+        currentData.map((span: any, i: number) => {
+          if (span.status_code !== "ERROR") {
+            return (
+              <EvaluationRow
+                key={i}
+                page={i + 1}
+                span={span}
+                projectId={projectId}
+                testId={test.id}
+                onCheckedChange={onCheckedChange}
+                selectedData={selectedData}
+              />
+            );
+          }
+        })
       )}
       {showLoader && (
         <div className="flex justify-center py-8">
diff --git a/components/playground/common.tsx b/components/playground/common.tsx
index e68fef71..6d31b5f8 100644
--- a/components/playground/common.tsx
+++ b/components/playground/common.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import PromptRegistryDialog from "@/components/playground/prompt-registry-dialog";
 import LLMPicker from "@/components/shared/llm-picker";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
@@ -9,6 +12,8 @@ import {
 import { cn } from "@/lib/utils";
 import { MinusCircleIcon, PlusIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { useQuery } from "react-query";
+import { toast } from "sonner";
 
 export function RoleBadge({
   role,
@@ -34,15 +39,24 @@ export function ExpandingTextArea({
   value,
   onChange,
   setFocusing,
+  saveButtonRef,
+  handleSave,
 }: {
   value: string;
   onChange: any;
   setFocusing?: any;
+  saveButtonRef: React.RefObject<HTMLButtonElement>;
+  handleSave: (open: boolean) => void;
 }) {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   const handleClickOutside = (event: any) => {
-    if (textAreaRef.current && !textAreaRef.current.contains(event.target)) {
+    if (
+      textAreaRef.current &&
+      !textAreaRef.current.contains(event.target) &&
+      saveButtonRef.current &&
+      !saveButtonRef.current.contains(event.target)
+    ) {
       setFocusing(false);
     }
   };
@@ -63,13 +77,25 @@ export function ExpandingTextArea({
   };
 
   return (
-    <textarea
-      className="rounded-md text-sm w-[290px] bg-background"
-      ref={textAreaRef}
-      defaultValue={value}
-      onChange={handleChange}
-      style={{ overflowY: "auto", resize: "none", height: "auto" }}
-    />
+    <div className="relative w-[290px]">
+      <textarea
+        className="rounded-md text-sm w-[290px] bg-background pr-10"
+        ref={textAreaRef}
+        defaultValue={value}
+        onChange={handleChange}
+        style={{ overflowY: "auto", resize: "none", height: "auto" }}
+      />
+      <div className="absolute right-2 bottom-2 py-2">
+        <Button
+          className="text-sm px-6"
+          size={"icon"}
+          onClick={() => handleSave(true)}
+          ref={saveButtonRef}
+        >
+          Save
+        </Button>
+      </div>
+    </div>
   );
 }
 
@@ -107,6 +133,34 @@ export function Message({
     }
   };
   const [editing, setEditing] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedPromptRegistry, setSelectedPromptRegistry] =
+    useState<any>(null);
+  const saveButtonRef = useRef<HTMLButtonElement>(null);
+  const [currentPrompt, setCurrentPrompt] = useState<any>(undefined);
+
+  useQuery({
+    queryKey: ["fetch-prompts-query", selectedPromptRegistry?.id],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/promptset?promptset_id=${selectedPromptRegistry?.id}`
+      );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error?.message || "Failed to fetch tests");
+      }
+      const result = await response.json();
+      setCurrentPrompt(result?.promptsets?.prompts[0] || undefined);
+      return result;
+    },
+    enabled: !!selectedPromptRegistry,
+    onError: (error) => {
+      toast.error("Failed to fetch prompts", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    },
+  });
+
   return (
     <>
       <div className="flex items-center justify-between cursor-pointer group hover:bg-muted rounded-md p-4">
@@ -129,13 +183,17 @@ export function Message({
               </p>
             )}
             {editing && (
-              <ExpandingTextArea
-                onChange={(value: string) => {
-                  setMessage({ ...message, content: value });
-                }}
-                value={message.content}
-                setFocusing={setEditing}
-              />
+              <div>
+                <ExpandingTextArea
+                  onChange={(value: string) => {
+                    setMessage({ ...message, content: value });
+                  }}
+                  value={message.content}
+                  setFocusing={setEditing}
+                  saveButtonRef={saveButtonRef}
+                  handleSave={setDialogOpen}
+                />
+              </div>
             )}
           </div>
         </div>
@@ -151,6 +209,11 @@ export function Message({
         </Button>
       </div>
       <Separator />
+      <PromptRegistryDialog
+        openDialog={dialogOpen}
+        setOpenDialog={setDialogOpen}
+        passedPrompt={message.content}
+      />
     </>
   );
 }
diff --git a/components/playground/prompt-registry-dialog.tsx b/components/playground/prompt-registry-dialog.tsx
new file mode 100644
index 00000000..b6a99253
--- /dev/null
+++ b/components/playground/prompt-registry-dialog.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { CreatePromptset } from "@/components/project/dataset/create";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { usePathname } from "next/navigation";
+import * as React from "react";
+import { useQuery } from "react-query";
+import { toast } from "sonner";
+import CreatePromptDialog from "../shared/create-prompt-dialog";
+
+import { Promptset } from "@prisma/client";
+
+export interface PromptRegistryDialogProps {
+  openDialog?: boolean;
+  setOpenDialog: (open: boolean) => void;
+  passedPrompt: string;
+}
+
+export default function PromptRegistryDialog({
+  openDialog = false,
+  setOpenDialog,
+  passedPrompt,
+}: PromptRegistryDialogProps) {
+  const [selectedPromptsetId, setSelectedPromptsetId] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [prompts, setPrompts] = React.useState([]);
+
+  const fetchPrompts = async () => {
+    setBusy(true);
+    try {
+      const response = await fetch(
+        `/api/promptset?promptset_id=${selectedPromptsetId}`
+      );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error?.message || "Failed to fetch prompts");
+      }
+      const result = await response.json();
+      setPrompts(result?.promptsets?.prompts || []);
+      setBusy(false);
+    } catch (error) {
+      toast.error("Failed to fetch prompts", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Save to Registry</DialogTitle>
+          <DialogDescription>
+            Save the selected prompt to a registry.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="name" className="text-left">
+            Select a registry
+          </Label>
+          <PromptRegistryCombobox
+            selectedPromptsetId={selectedPromptsetId}
+            setSelectedPromptsetId={setSelectedPromptsetId}
+          />
+        </div>
+        <DialogFooter>
+          <Button
+            disabled={busy || !selectedPromptsetId}
+            onClick={async () => {
+              setOpen(true);
+              setSelectedPromptsetId(selectedPromptsetId);
+              await fetchPrompts();
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+        <CreatePromptDialog
+          open={open}
+          setOpen={setOpen}
+          promptsetId={selectedPromptsetId}
+          passedPrompt={passedPrompt}
+          showButton={false}
+          version={prompts.length + 1}
+          currentPrompt={prompts[0]}
+          setOpenDialog={setOpenDialog}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function PromptRegistryCombobox({
+  selectedPromptsetId,
+  setSelectedPromptsetId,
+}: {
+  selectedPromptsetId: string;
+  setSelectedPromptsetId: (promptsetId: string) => void;
+}) {
+  const pathname = usePathname();
+  const projectId = pathname.split("/")[2];
+  const [open, setOpen] = React.useState(false);
+
+  const {
+    data: promptsets,
+    isLoading: promptsetsLoading,
+    error: promptsetsError,
+  } = useQuery({
+    queryKey: ["fetch-promptsets-query", projectId],
+    queryFn: async () => {
+      const response = await fetch(`/api/promptset?id=${projectId}`);
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error?.message || "Failed to fetch prompt sets");
+      }
+      const result = await response.json();
+
+      return result;
+    },
+    onError: (error) => {
+      toast.error("Failed to fetch prompt sets", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    },
+  });
+
+  if (promptsetsLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[250px] justify-between"
+        >
+          {selectedPromptsetId
+            ? promptsets?.promptsets?.find(
+                (promptset: Promptset) => promptset.id === selectedPromptsetId
+              )?.name
+            : "Select promptset..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandEmpty>No promptset found.</CommandEmpty>
+          <CommandGroup>
+            {promptsets?.promptsets?.map((promptset: Promptset) => (
+              <CommandItem
+                key={promptset.id}
+                value={promptset.id}
+                onSelect={(currentValue) => {
+                  setSelectedPromptsetId(currentValue);
+                  setOpen(false);
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    selectedPromptsetId === promptset.id
+                      ? "opacity-100"
+                      : "opacity-0"
+                  )}
+                />
+                {promptset.name}
+              </CommandItem>
+            ))}
+            <CommandItem>
+              <CreatePromptset variant={"ghost"} projectId={projectId} />
+            </CommandItem>
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/components/project/dataset/create.tsx b/components/project/dataset/create.tsx
index 573c7db7..2f5f1b13 100644
--- a/components/project/dataset/create.tsx
+++ b/components/project/dataset/create.tsx
@@ -160,11 +160,13 @@ export function CreateDataset({
 
 export function CreatePromptset({
   projectId,
+  onCreate,
   disabled = false,
   variant = "default",
   className = "",
 }: {
   projectId?: string;
+  onCreate?: () => void;
   disabled?: boolean;
   variant?: any;
   className?: string;
@@ -218,6 +220,9 @@ export function CreatePromptset({
                 toast("Prompt registry created!", {
                   description: "Your prompt registry has been created.",
                 });
+                if (onCreate) {
+                  onCreate();
+                }
                 setOpen(false);
                 CreatePromptsetForm.reset();
               } catch (error: any) {
diff --git a/components/project/traces/logs-view.tsx b/components/project/traces/logs-view.tsx
index a942d2b2..f6cad5f4 100644
--- a/components/project/traces/logs-view.tsx
+++ b/components/project/traces/logs-view.tsx
@@ -5,6 +5,8 @@ import { correctTimestampFormat } from "@/lib/trace_utils";
 import { cn, formatDateTime, parseNestedJsonFields } from "@/lib/utils";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useState } from "react";
+import { JsonView, allExpanded, defaultStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
 import {
   serviceTypeColor,
   vendorBadgeColor,
@@ -88,9 +90,11 @@ export const LogsView = ({
         )}
       </div>
       {!collapsed && (
-        <pre className="text-xs bg-muted p-2 rounded-md whitespace-pre-wrap">
-          {parseNestedJsonFields(span.attributes)}
-        </pre>
+        <JsonView
+          data={JSON.parse(parseNestedJsonFields(span.attributes))}
+          shouldExpandNode={allExpanded}
+          style={defaultStyles}
+        />
       )}
       <Separator />
     </div>
diff --git a/components/project/traces/trace-row.tsx b/components/project/traces/trace-row.tsx
index 0ed7084f..48891c9f 100644
--- a/components/project/traces/trace-row.tsx
+++ b/components/project/traces/trace-row.tsx
@@ -9,6 +9,8 @@ import {
 import { calculatePriceFromUsage, formatDateTime } from "@/lib/utils";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useState } from "react";
+import { JsonView, allExpanded, defaultStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
 import { HoverCell } from "../../shared/hover-cell";
 import { LLMView } from "../../shared/llm-view";
 import TraceGraph from "../../traces/trace_graph";
@@ -36,6 +38,7 @@ export const TraceRow = ({
   let userId: string = "";
   let prompts: any[] = [];
   let responses: any[] = [];
+  let events: any[] = [];
   let cost = { total: 0, input: 0, output: 0 };
   let langgraph = false;
   for (const span of trace) {
@@ -78,6 +81,10 @@ export const TraceRow = ({
         cost.output += currentcost.output;
       }
     }
+
+    if (span.events) {
+      events = JSON.parse(span.events);
+    }
   }
 
   // Sort the trace based on start_time, then end_time
@@ -115,13 +122,13 @@ export const TraceRow = ({
           </p>
         </div>
         <div className="flex items-center gap-2">
-          {traceHierarchy[0].status !== "ERROR" && (
+          {traceHierarchy[0].status_code !== "ERROR" && (
             <Separator
               orientation="vertical"
               className="bg-green-400 h-6 w-1 rounded-md"
             />
           )}
-          {traceHierarchy[0].status === "ERROR" && (
+          {traceHierarchy[0].status_code === "ERROR" && (
             <Separator
               orientation="vertical"
               className="bg-red-400 h-6 w-1 rounded-md"
@@ -198,6 +205,25 @@ export const TraceRow = ({
                 <Separator className="bg-primary h-[2px]" />
               )}
             </Button>
+            <Button
+              disabled={events.length === 0}
+              onClick={() => setSelectedTab("events")}
+              variant={"ghost"}
+              className="flex flex-col justify-between pb-0"
+            >
+              <p
+                className={
+                  selectedTab === "events"
+                    ? "text-xs text-primary font-medium"
+                    : "text-xs text-muted-foreground font-medium"
+                }
+              >
+                Events
+              </p>
+              {selectedTab === "events" && (
+                <Separator className="bg-primary h-[2px]" />
+              )}
+            </Button>
             <Button
               disabled={prompts.length === 0 || responses.length === 0}
               onClick={() => setSelectedTab("llm")}
@@ -254,6 +280,20 @@ export const TraceRow = ({
               })}
             </div>
           )}
+          {selectedTab === "events" && (
+            <div className="flex flex-col px-4 mt-2">
+              {events.map((event: any, i: number) => {
+                return (
+                  <JsonView
+                    key={i}
+                    data={event}
+                    shouldExpandNode={allExpanded}
+                    style={defaultStyles}
+                  />
+                );
+              })}
+            </div>
+          )}
           {selectedTab === "llm" && (
             <div className="flex flex-col px-4 mt-2">
               <LLMView prompts={prompts} responses={responses} />
diff --git a/components/project/traces/traces.tsx b/components/project/traces/traces.tsx
index 0d3474b0..71a609b7 100644
--- a/components/project/traces/traces.tsx
+++ b/components/project/traces/traces.tsx
@@ -172,8 +172,8 @@ export default function Traces({ email }: { email: string }) {
       </div>
       <div className="grid grid-cols-11 items-center gap-6 p-3 bg-muted">
         <p className="ml-10 text-xs font-medium">
-					Time <span>&#8595;</span> ({utcTime ? "UTC" : "Local"})
-				</p>
+          Time <span>&#8595;</span> ({utcTime ? "UTC" : "Local"})
+        </p>
         <p className="text-xs font-medium">Namespace</p>
         <p className="text-xs font-medium">Model</p>
         <p className="text-xs font-medium col-span-2">Input</p>
diff --git a/components/shared/create-prompt-dialog.tsx b/components/shared/create-prompt-dialog.tsx
index f97ca21f..2cb3ebd8 100644
--- a/components/shared/create-prompt-dialog.tsx
+++ b/components/shared/create-prompt-dialog.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import DiffView from "@/components/shared/diff-view";
 import {
   AlertDialog,
@@ -35,14 +36,24 @@ export default function CreatePromptDialog({
   promptsetId,
   currentPrompt,
   version,
+  passedPrompt,
   variant = "default",
   disabled = false,
+  open,
+  setOpen,
+  showButton = true,
+  setOpenDialog,
 }: {
   promptsetId: string;
   currentPrompt?: Prompt;
+  passedPrompt?: string;
   version?: number;
   variant?: any;
   disabled?: boolean;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  showButton?: boolean;
+  setOpenDialog?: (open: boolean) => void;
 }) {
   const schema = z.object({
     prompt: z.string(),
@@ -54,15 +65,23 @@ export default function CreatePromptDialog({
 
   const CreatePromptForm = useForm({
     resolver: zodResolver(schema),
+    defaultValues: {
+      prompt: passedPrompt || currentPrompt?.value || "",
+      note: currentPrompt?.note || "",
+      live: currentPrompt?.live || false,
+      model: currentPrompt?.model || "",
+      modelSettings: JSON.stringify(currentPrompt?.modelSettings) || "",
+    },
   });
 
   const queryClient = useQueryClient();
-  const [prompt, setPrompt] = useState<string>(currentPrompt?.value || "");
+  const [prompt, setPrompt] = useState<string>(
+    passedPrompt || currentPrompt?.value || ""
+  );
   const [variables, setVariables] = useState<string[]>(
     currentPrompt?.variables || []
   );
   const [confirmAndSaveView, setConfirmAndSaveView] = useState<boolean>(false);
-  const [open, setOpen] = useState<boolean>(false);
   const [busy, setBusy] = useState<boolean>(false);
 
   const extractVariables = (prompt: string) => {
@@ -81,167 +100,228 @@ export default function CreatePromptDialog({
   };
 
   useEffect(() => {
-    if (currentPrompt?.value) {
-      const vars = extractVariables(currentPrompt.value);
-      setVariables(vars);
+    if (passedPrompt) {
+      setPrompt(passedPrompt);
+    } else if (currentPrompt?.value) {
       setPrompt(currentPrompt.value);
     }
-  }, [currentPrompt]);
+  }, [passedPrompt, currentPrompt]);
 
   return (
-    <AlertDialog
-      open={open}
-      onOpenChange={(val) => {
-        setOpen(val);
-        CreatePromptForm.reset();
-      }}
-    >
-      <AlertDialogTrigger asChild>
-        <Button variant={variant} disabled={disabled}>
-          {currentPrompt ? "Update Prompt" : "Create Prompt"}
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent className="min-w-[1200px] min-h-[300px]">
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {confirmAndSaveView ? "Review and Save" : "Create new prompt"}
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            <Form {...CreatePromptForm}>
-              <form
-                className="flex flex-col gap-8"
-                onSubmit={CreatePromptForm.handleSubmit(async (data) => {
-                  try {
-                    setBusy(true);
-                    const payload = {
-                      value: data.prompt,
-                      variables: variables,
-                      model: data.model || "",
-                      modelSettings: data.modelSettings
-                        ? JSON.parse(data.modelSettings)
-                        : {},
-                      version: version || 1,
-                      live: data.live || false,
-                      note: data.note || "",
-                      promptsetId: promptsetId,
-                    };
-                    await fetch("/api/prompt", {
-                      method: "POST",
-                      headers: {
-                        "Content-Type": "application/json",
-                      },
-                      body: JSON.stringify(payload),
-                    });
-                    await queryClient.invalidateQueries({
-                      queryKey: ["fetch-prompts-query", promptsetId],
-                    });
-                    toast("Prompt added!", {
-                      description: "Your prompt has been added.",
-                    });
-                    setOpen(false);
-                    setBusy(false);
-                  } catch (error) {
-                    setBusy(false);
-                    toast.error("Failed to create prompt");
-                  }
-                })}
-              >
-                {!confirmAndSaveView ? (
-                  <>
-                    <FormField
-                      control={CreatePromptForm.control}
-                      name="prompt"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            Prompt{" "}
-                            <span className="text-xs font-normal">
-                              {
-                                "(Variables should be enclosed in curly braces - Ex: {variable})"
-                              }
-                            </span>
-                          </FormLabel>
-                          <FormControl>
-                            <InputLarge
-                              defaultValue={currentPrompt?.value || ""}
-                              className="h-32 text-primary"
-                              value={field.value}
-                              onChange={(e) => {
-                                setPrompt(e.target.value);
-                                const vars = extractVariables(e.target.value);
-                                setVariables(vars);
-                                field.onChange(e);
-                              }}
-                              placeholder="You are a sales assisstant and your name is {name}. You are well versed in {topic}."
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <div className="flex flex-col gap-2">
-                      <Label>Detected Variables</Label>
-                      <div className="flex flex-wrap items-center gap-2 p-2 border-2 border-muted rounded-md h-12">
-                        {variables.map((variable) => (
-                          <span
-                            key={variable}
-                            className="bg-primary text-primary-foreground px-2 py-1 rounded-md"
-                          >
-                            {variable}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    {currentPrompt && (
-                      <div className="flex flex-col gap-2">
-                        <Label>Diff View</Label>
-                        <DiffView
-                          oldString={currentPrompt.value as string}
-                          newString={prompt}
-                        />
-                      </div>
-                    )}
-                    {!currentPrompt && (
+    <>
+      <AlertDialog
+        open={open}
+        onOpenChange={(val) => {
+          if (!val) {
+            setOpen(val);
+            CreatePromptForm.reset();
+          }
+        }}
+      >
+        <AlertDialogTrigger asChild>
+          {showButton && (
+            <Button
+              variant={variant}
+              disabled={disabled}
+              onClick={() => setOpen(true)}
+            >
+              {currentPrompt ? "Update Prompt" : "Create Prompt"}
+            </Button>
+          )}
+        </AlertDialogTrigger>
+        <AlertDialogContent className="min-w-[1200px] min-h-[300px]">
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {!confirmAndSaveView ? "Review and Save" : "Create new prompt"}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              <Form {...CreatePromptForm}>
+                <form
+                  className="flex flex-col gap-8"
+                  onSubmit={CreatePromptForm.handleSubmit(async (data) => {
+                    try {
+                      setBusy(true);
+                      const payload = {
+                        value: data.prompt,
+                        variables: variables,
+                        model: data.model || "",
+                        modelSettings: data.modelSettings
+                          ? JSON.parse(data.modelSettings)
+                          : {},
+                        version: version || 1,
+                        live: data.live || false,
+                        note: data.note || "",
+                        promptsetId: promptsetId,
+                      };
+                      await fetch("/api/prompt", {
+                        method: "POST",
+                        headers: {
+                          "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify(payload),
+                      });
+                      await queryClient.invalidateQueries({
+                        queryKey: ["fetch-prompts-query", promptsetId],
+                      });
+                      toast("Prompt added!", {
+                        description: "Your prompt has been added.",
+                      });
+                      setBusy(false);
+                      setOpen(false);
+                      setOpenDialog && setOpenDialog(false);
+                    } catch (error) {
+                      setBusy(false);
+                      console.log("err", error);
+                      toast.error("Failed to create prompt");
+                    }
+                  })}
+                >
+                  {!confirmAndSaveView ? (
+                    <>
+                      <FormField
+                        control={CreatePromptForm.control}
+                        name="prompt"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              Prompt{" "}
+                              <span className="text-xs font-normal">
+                                {
+                                  "(Variables should be enclosed in curly braces - Ex: {variable})"
+                                }
+                              </span>
+                            </FormLabel>
+                            <FormControl>
+                              <InputLarge
+                                defaultValue={
+                                  passedPrompt || currentPrompt?.value || ""
+                                }
+                                className="h-32 text-primary"
+                                value={field.value}
+                                onChange={(e) => {
+                                  setPrompt(e.target.value);
+                                  const vars = extractVariables(e.target.value);
+                                  setVariables(vars);
+                                  field.onChange(e);
+                                }}
+                                placeholder="You are a sales assisstant and your name is {name}. You are well versed in {topic}."
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
                       <div className="flex flex-col gap-2">
-                        <Label>Prompt</Label>
-                        <p className="p-2 rounded-md border-2 border-muted text-primary">
-                          {prompt}
-                        </p>
-                      </div>
-                    )}
-                    <div className="flex flex-col gap-2">
-                      <Label>Variables</Label>
-                      <div className="flex flex-wrap gap-2 p-2 border-2 border-muted rounded-md min-h-12">
-                        {variables.map((variable) => {
-                          return (
+                        <Label>Detected Variables</Label>
+                        <div className="flex flex-wrap items-center gap-2 p-2 border-2 border-muted rounded-md h-12">
+                          {variables.map((variable) => (
                             <span
                               key={variable}
-                              className={
-                                "text-primary-foreground px-2 py-1 rounded-md bg-primary"
-                              }
+                              className="bg-primary text-primary-foreground px-2 py-1 rounded-md"
                             >
                               {variable}
                             </span>
-                          );
-                        })}
+                          ))}
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      {currentPrompt && (
+                        <div className="flex flex-col gap-2">
+                          <Label>Diff View</Label>
+                          <DiffView
+                            oldString={currentPrompt.value as string}
+                            newString={prompt}
+                          />
+                        </div>
+                      )}
+                      {!currentPrompt && (
+                        <div className="flex flex-col gap-2">
+                          <Label>Prompt</Label>
+                          <p className="p-2 rounded-md border-2 border-muted text-primary">
+                            {prompt}
+                          </p>
+                        </div>
+                      )}
+                      <div className="flex flex-col gap-2">
+                        <Label>Variables</Label>
+                        <div className="flex flex-wrap gap-2 p-2 border-2 border-muted rounded-md min-h-12">
+                          {variables.map((variable) => {
+                            return (
+                              <span
+                                key={variable}
+                                className={
+                                  "text-primary-foreground px-2 py-1 rounded-md bg-primary"
+                                }
+                              >
+                                {variable}
+                              </span>
+                            );
+                          })}
+                        </div>
+                      </div>
+                      <div className="flex w-full gap-2 items-center justify-between">
+                        <FormField
+                          defaultValue={currentPrompt?.note || ""}
+                          control={CreatePromptForm.control}
+                          name="note"
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              <FormLabel>Note (optional)</FormLabel>
+                              <FormControl>
+                                <InputLarge
+                                  {...field}
+                                  className="h-20 text-primary"
+                                  placeholder="Testing the prompt. Do not approve."
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          defaultValue={
+                            JSON.stringify(currentPrompt?.modelSettings) || ""
+                          }
+                          control={CreatePromptForm.control}
+                          name="modelSettings"
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              <FormLabel>Model Settings (optional)</FormLabel>
+                              <FormControl>
+                                <CodeEditor
+                                  value={field.value}
+                                  language="json"
+                                  placeholder='{ "temperature": 0.5 }'
+                                  onChange={(evn) =>
+                                    field.onChange(evn.target.value)
+                                  }
+                                  padding={15}
+                                  className="h-20 rounded-md bg-background dark:bg-background border border-muted text-primary dark:text-primary"
+                                  style={{
+                                    fontFamily:
+                                      "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+                                  }}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
                       </div>
-                    </div>
-                    <div className="flex w-full gap-2 items-center justify-between">
                       <FormField
-                        defaultValue={currentPrompt?.note || ""}
+                        defaultValue={currentPrompt?.model || ""}
                         control={CreatePromptForm.control}
-                        name="note"
+                        name="model"
                         render={({ field }) => (
-                          <FormItem className="w-full">
-                            <FormLabel>Note (optional)</FormLabel>
+                          <FormItem>
+                            <FormLabel>Model (optional)</FormLabel>
                             <FormControl>
-                              <InputLarge
+                              <Input
                                 {...field}
-                                className="h-20 text-primary"
-                                placeholder="Testing the prompt. Do not approve."
+                                className="text-primary"
+                                placeholder="gpt-3.5-turbo"
                               />
                             </FormControl>
                             <FormMessage />
@@ -249,121 +329,74 @@ export default function CreatePromptDialog({
                         )}
                       />
                       <FormField
-                        defaultValue={
-                          JSON.stringify(currentPrompt?.modelSettings) || ""
-                        }
+                        defaultValue={currentPrompt?.live || false}
                         control={CreatePromptForm.control}
-                        name="modelSettings"
+                        name="live"
                         render={({ field }) => (
-                          <FormItem className="w-full">
-                            <FormLabel>Model Settings (optional)</FormLabel>
-                            <FormControl>
-                              <CodeEditor
-                                value={field.value}
-                                language="json"
-                                placeholder='{ "temperature": 0.5 }'
-                                onChange={(evn) =>
-                                  field.onChange(evn.target.value)
+                          <FormItem className="flex items-end gap-2">
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={(checked) =>
+                                field.onChange(checked)
+                              }
+                            />
+                            <FormLabel>
+                              Mark as Live
+                              <span className="text-xs font-normal">
+                                {
+                                  " (If you are using this prompt in production using the API/SDK, marking this live will ensure that this prompt is used by default for new requests.)"
                                 }
-                                padding={15}
-                                className="h-20 rounded-md bg-background dark:bg-background border border-muted text-primary dark:text-primary"
-                                style={{
-                                  fontFamily:
-                                    "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
-                                }}
-                              />
-                            </FormControl>
+                              </span>
+                            </FormLabel>
                             <FormMessage />
                           </FormItem>
                         )}
                       />
-                    </div>
-                    <FormField
-                      defaultValue={currentPrompt?.model || ""}
-                      control={CreatePromptForm.control}
-                      name="model"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Model (optional)</FormLabel>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              className="text-primary"
-                              placeholder="gpt-3.5-turbo"
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <FormField
-                      defaultValue={currentPrompt?.live || false}
-                      control={CreatePromptForm.control}
-                      name="live"
-                      render={({ field }) => (
-                        <FormItem className="flex items-end gap-2">
-                          <Checkbox
-                            checked={field.value}
-                            onCheckedChange={(checked) =>
-                              field.onChange(checked)
-                            }
-                          />
-                          <FormLabel>
-                            Mark as Live
-                            <span className="text-xs font-normal">
-                              {
-                                " (If you are using this prompt in production using the API/SDK, marking this live will ensure that this prompt is used by default for new requests.)"
-                              }
-                            </span>
-                          </FormLabel>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <div className="flex flex-col gap-2">
-                      <Label>New Version</Label>
-                      <p className="text-primary">
-                        {version ? `Version ${version}` : "Version 1"}
-                      </p>
-                    </div>
-                  </>
-                )}
-                <AlertDialogFooter>
-                  <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
-                  {!confirmAndSaveView && (
-                    <Button
-                      type="submit"
-                      onClick={() => {
-                        if (prompt === "") {
-                          alert("Prompt cannot be empty");
-                          return;
-                        }
-                        setConfirmAndSaveView(true);
-                      }}
-                    >
-                      Continue
-                    </Button>
-                  )}
-                  {confirmAndSaveView && (
-                    <Button
-                      type="button"
-                      variant={"outline"}
-                      onClick={() => setConfirmAndSaveView(false)}
-                    >
-                      Back
-                    </Button>
-                  )}
-                  {confirmAndSaveView && (
-                    <Button disabled={busy} type="submit">
-                      Save
-                    </Button>
+                      <div className="flex flex-col gap-2">
+                        <Label>New Version</Label>
+                        <p className="text-primary">
+                          {version ? `Version ${version}` : "Version 1"}
+                        </p>
+                      </div>
+                    </>
                   )}
-                </AlertDialogFooter>
-              </form>
-            </Form>
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-      </AlertDialogContent>
-    </AlertDialog>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
+                    {!confirmAndSaveView && (
+                      <Button
+                        type="submit"
+                        onClick={() => {
+                          if (prompt === "") {
+                            alert("Prompt cannot be empty");
+                            return;
+                          }
+                          setConfirmAndSaveView(true);
+                        }}
+                      >
+                        Continue
+                      </Button>
+                    )}
+                    {confirmAndSaveView && (
+                      <Button
+                        type="button"
+                        variant={"outline"}
+                        onClick={() => setConfirmAndSaveView(false)}
+                      >
+                        Back
+                      </Button>
+                    )}
+                    {confirmAndSaveView && (
+                      <Button disabled={busy} type="submit">
+                        Save
+                      </Button>
+                    )}
+                  </AlertDialogFooter>
+                </form>
+              </Form>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }
diff --git a/lib/utils.ts b/lib/utils.ts
index effd61e2..205aabb8 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -444,6 +444,26 @@ export function safeStringify(value: any): string {
   if (typeof value === "string") {
     return value;
   }
+
+  // if its a list, check type and stringify
+  if (Array.isArray(value)) {
+    const stringifiedList = value.map((item) => {
+      if (item?.type === "text") {
+        return item?.text;
+      } else if (item?.type === "function") {
+        return prettyPrintJson.toHtml(item);
+      } else if (item?.type === "image_url") {
+        if (typeof item?.image_url === "string") {
+          return `<img src="${item?.image_url}" />`;
+        } else if (typeof item?.image_url === "object") {
+          return `<img src="${item?.image_url?.url}" />`;
+        }
+      }
+      return item;
+    });
+    return stringifiedList.join("");
+  }
+
   // If it's not a string, stringify it
   return prettyPrintJson.toHtml(value);
 }
diff --git a/package-lock.json b/package-lock.json
index 3788e87a..52d6ac46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,6 +81,7 @@
 				"react-diff-view": "^3.2.1",
 				"react-dom": "^18",
 				"react-hook-form": "^7.49.3",
+				"react-json-view-lite": "^1.4.0",
 				"react-markdown": "^9.0.1",
 				"react-query": "^3.39.3",
 				"react-syntax-highlighter": "^15.5.0",
@@ -12368,6 +12369,17 @@
 			"version": "16.13.1",
 			"license": "MIT"
 		},
+		"node_modules/react-json-view-lite": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.4.0.tgz",
+			"integrity": "sha512-wh6F6uJyYAmQ4fK0e8dSQMEWuvTs2Wr3el3sLD9bambX1+pSWUVXIz1RFaoy3TI1mZ0FqdpKq9YgbgTTgyrmXA==",
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/react-markdown": {
 			"version": "9.0.1",
 			"license": "MIT",
diff --git a/package.json b/package.json
index 5c048f95..2c8ba3d6 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,7 @@
 		"react-diff-view": "^3.2.1",
 		"react-dom": "^18",
 		"react-hook-form": "^7.49.3",
+		"react-json-view-lite": "^1.4.0",
 		"react-markdown": "^9.0.1",
 		"react-query": "^3.39.3",
 		"react-syntax-highlighter": "^15.5.0",