Improvements to prompt playground (#272)

* fixing static text area, fixing overlap

* creating custo ui for playground taces

* fetching traces on dialog open

* fixes

* fixes

* fixes

---------

Co-authored-by: Karthik Kalyanaraman <[email protected]>

app/(protected)/project/[project_id]/playground/page.tsx

@@ -94,7 +94,7 @@ export default function Page() {
           settings page.
         </Link>
       </span>
-      <div className="flex flex-row flex-wrap lg:grid lg:grid-cols-3 gap-8 w-full">
+      <div className="flex flex-row flex-wrap gap-8 w-full">
         {llms.map((llm: ChatInterface) => (
           <LLMChat
             key={llm.id}

components/playground/common.tsx

@@ -72,6 +72,14 @@ export function ExpandingTextArea({
     };
   }, []);
 
+  useEffect(() => {
+    const textarea = textAreaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [value]);
+
   const handleChange = (event: any) => {
     const textarea = event.target;
     onChange(textarea.value);
@@ -81,10 +89,10 @@ export function ExpandingTextArea({
   };
 
   return (
-    <div className="relative w-[290px]">
+    <div className="relative min-w-[350px]">
       <textarea
         disabled={busy}
-        className="rounded-md text-sm w-[290px] bg-background pr-10 pt-5"
+        className="rounded-md text-sm w-[350px] bg-background pr-10 pt-5"
         ref={textAreaRef}
         defaultValue={value}
         onChange={handleChange}
@@ -177,20 +185,19 @@ export function Message({
           </div>
           <div
             onClick={() => setEditing(true)}
-            className="min-w-[290px] min-h-6"
+            className="min-w-[350px] min-h-6"
           >
             {!editing && (
               <p
                 className={cn(
-                  "w-[290px] text-sm break-all",
+                  "w-[350px] text-sm break-all",
                   !message.content && "text-muted-foreground"
                 )}
               >
                 {message.content || "click to edit"}
               </p>
             )}
             {editing && (
-              <div>
                 <ExpandingTextArea
                   onChange={(value: string) => {
                     setMessage({ ...message, content: value });
@@ -200,7 +207,6 @@ export function Message({
                   saveButtonRef={saveButtonRef}
                   handleSave={setDialogOpen}
                 />
-              </div>
             )}
           </div>
         </div>
@@ -246,7 +252,7 @@ export function AddLLMChat({ onAdd }: { onAdd: (vendor: string) => void }) {
   }, [busy, vendor]);
 
   return (
-    <div className="w-[450px] h-[600px] rounded-lg border border-dashed border-muted-foreground flex flex-col items-center justify-center gap-4">
+    <div className="w-[530px] h-[600px] rounded-lg border border-dashed border-muted-foreground flex flex-col items-center justify-center gap-4">
       <div className="flex items-center gap-2">
         <LLMPicker setVendor={setVendor} />
         <Button

components/playground/import-trace-conversation.tsx

@@ -8,9 +8,6 @@ import { useEffect, useState } from "react";
 import { useBottomScrollListener } from "react-bottom-scroll-listener";
 import { useQuery } from "react-query";
 import { toast } from "sonner";
-import { ConversationRow } from "../project/traces/conversation-row";
-import TraceRowSkeleton from "../shared/row-skeleton";
-import { SetupInstructions } from "../shared/setup-instructions";
 import { Spinner } from "../shared/spinner";
 import { Button } from "../ui/button";
 
@@ -54,7 +51,7 @@ export default function ImportTraceConversation({
         pageSize: PAGE_SIZE,
         projectId: project_id,
         filters: {
-          operation: "AND",
+          operation: "OR",
           filters: [
             {
               key: "langtrace.service.type",
@@ -91,7 +88,6 @@ export default function ImportTraceConversation({
 
       if (currentData.length > 0) {
         const updatedData = [...currentData, ...newData];
-
         setCurrentData(updatedData);
       } else {
         setCurrentData(newData);
@@ -111,8 +107,75 @@ export default function ImportTraceConversation({
     enabled: enableFetch,
   });
 
+  const parseTraceData = (trace: any) => {
+    let model = "";
+    let promptFinal: string = "";
+    let responseFinal: string = "";
+
+    for (const span of trace) {
+      if (span.attributes) {
+        const attributes = JSON.parse(span.attributes);
+
+        if (span.events) {
+          const events: any[] = JSON.parse(span.events);
+
+          const promptEvent = events.find(
+            (event: any) => event.name === "gen_ai.content.prompt"
+          );
+          if (promptEvent?.attributes?.["gen_ai.prompt"]) {
+            const promptJSONString = promptEvent.attributes["gen_ai.prompt"];
+            const promptsJSON = JSON.parse(promptJSONString);
+            promptFinal = promptsJSON[0].content || "";
+          }
+
+          const responseEvent = events.find(
+            (event: any) => event.name === "gen_ai.content.completion"
+          );
+          if (responseEvent?.attributes?.["gen_ai.completion"]) {
+            const responseJSONString =
+              responseEvent.attributes["gen_ai.completion"];
+            const responseJSON = JSON.parse(responseJSONString);
+            responseFinal = responseJSON[0].content || "";
+          }
+        }
+
+        if (!model) {
+          model =
+            attributes["gen_ai.response.model"] ||
+            attributes["gen_ai.request.model"] ||
+            attributes["llm.model"] ||
+            "";
+        }
+      }
+    }
+
+    return { model, promptFinal, responseFinal };
+  };
+
+  const handleRowClick = (promptFinal: string, responseFinal: string) => {
+    if (promptFinal.length && responseFinal.length) {
+      const inputMessage = { role: "user", content: promptFinal };
+      const outputMessage = { role: "assistant", content: responseFinal };
+
+      setMessages([inputMessage, outputMessage]);
+      setOpenDialog(false);
+    }
+  };
+
   return (
-    <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+    <Dialog
+      open={openDialog}
+      onOpenChange={(isOpen) => {
+        setOpenDialog(isOpen);
+        if (isOpen) {
+          setShowLoader(true);
+          setCurrentData([]);
+          setPage(1);
+          setTotalPages(1);
+          setEnableFetch(true);
+        }
+      }}
+    >
       <DialogTrigger>
         <Button
           type="button"
@@ -132,19 +195,12 @@ export default function ImportTraceConversation({
           <Label htmlFor="name" className="text-left text-lg mb-4">
             Select a conversation to import
           </Label>
-          <div className="grid grid-cols-12 items-center p-3 bg-muted">
-            <p className="ml-10 text-xs font-medium">
-              Time <span>&#8595;</span> 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>
-            <p className="text-xs font-medium col-span-2">Output</p>
-            <p className="text-xs font-medium">User ID</p>
-            <p className="text-xs font-medium">Input / Output / Total Tokens</p>
-            <p className="text-xs font-medium">Token Cost</p>
-            <p className="text-xs font-medium">Duration(ms)</p>
+          <div className="grid grid-cols-13 items-center p-3 bg-muted">
+            <p className="col-span-2 text-xs font-medium">Model</p>
+            <p className="col-span-5 text-xs font-medium">Input</p>
+            <p className="col-span-5 text-xs font-medium">Output</p>
           </div>
+
           {fetchTraces.isLoading || !fetchTraces?.data || !currentData ? (
             <PageSkeleton />
           ) : (
@@ -155,17 +211,23 @@ export default function ImportTraceConversation({
               {!fetchTraces.isLoading &&
                 fetchTraces?.data &&
                 currentData?.map((trace: any, i: number) => {
+                  const { model, promptFinal, responseFinal } =
+                    parseTraceData(trace);
+
                   return (
-                    <div key={i} className="px-3">
-                      <ConversationRow
-                        trace={trace}
-                        utcTime={false}
-                        importTrace={true}
-                        setMessages={(messages: any[]) => {
-                          setMessages(messages);
-                          setOpenDialog(false);
-                        }}
-                      />{" "}
+                    <div
+                      key={i}
+                      className="px-3 py-4 hover:bg-accent cursor-pointer grid grid-cols-12 items-center gap-y-4 gap-x-4"
+                      onClick={() => handleRowClick(promptFinal, responseFinal)}
+                    >
+                      <p className="col-span-2 text-xs">{model}</p>
+
+                      <p className="col-span-4 text-xs overflow-hidden max-h-[3.5rem] line-clamp-3 break-words">
+                        {promptFinal}
+                      </p>
+                      <p className="col-span-5 text-xs overflow-hidden max-h-[3.5rem] line-clamp-3 break-words">
+                        {responseFinal}
+                      </p>
                     </div>
                   );
                 })}
@@ -186,7 +248,6 @@ export default function ImportTraceConversation({
                       No traces available. Get started by setting up Langtrace
                       in your application.
                     </p>
-                    <SetupInstructions project_id={project_id} />
                   </div>
                 )}
             </div>
@@ -201,7 +262,11 @@ function PageSkeleton() {
   return (
     <div className="flex flex-col gap-3 rounded-md border border-muted max-h-screen">
       {Array.from({ length: 3 }).map((_, index) => (
-        <TraceRowSkeleton key={index} />
+        <div key={index} className="px-3 py-2 grid grid-cols-12 items-center">
+          <div className="col-span-3 bg-muted h-4 w-full rounded-sm" />
+          <div className="col-span-4 bg-muted h-4 w-full rounded-sm" />
+          <div className="col-span-5 bg-muted h-4 w-full rounded-sm" />
+        </div>
       ))}
     </div>
   );

components/playground/llmchat.tsx

@@ -133,11 +133,17 @@ export default function LLMChat({
               );
               setLocalLLM({
                 ...localLLM,
-                settings: { ...localLLM.settings, messages: localNewMessages },
+                settings: {
+                  ...localLLM.settings,
+                  messages: localNewMessages,
+                },
               });
               setLLM({
                 ...localLLM,
-                settings: { ...localLLM.settings, messages: localNewMessages },
+                settings: {
+                  ...localLLM.settings,
+                  messages: localNewMessages,
+                },
               });
             }}
             onRemove={() => {

components/project/traces/traces-table.tsx

@@ -1,4 +1,3 @@
-import { Info } from "@/components/shared/info";
 import { SetupInstructions } from "@/components/shared/setup-instructions";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -23,6 +22,7 @@ import { HOW_TO_GROUP_RELATED_OPERATIONS } from "@/lib/constants";
 import { PropertyFilter } from "@/lib/services/query_builder_service";
 import { Trace } from "@/lib/trace_util";
 import { cn } from "@/lib/utils";
+import { CircularProgress } from "@mui/material";
 import { ResetIcon } from "@radix-ui/react-icons";
 import {
   ColumnDef,
@@ -224,7 +224,7 @@ export function TracesTable<TData, TValue>({
               <p
                 className={cn(
                   "text-sm font-semibold",
-                  !profileMode ? "text-orange-600" : "text-muted"
+                  !profileMode ? "text-orange-600" : "text-muted-foreground"
                 )}
               >
                 debugging
@@ -237,7 +237,7 @@ export function TracesTable<TData, TValue>({
               <p
                 className={cn(
                   "text-sm font-semibold",
-                  profileMode ? "text-orange-600" : "text-muted"
+                  profileMode ? "text-orange-500" : "text-muted-foreground"
                 )}
               >
                 prompt engineering
@@ -296,10 +296,12 @@ export function TracesTable<TData, TValue>({
         {loading && <TableSkeleton />}
         {!loading && (!data || data.length === 0) && (
           <div className="flex flex-col gap-3 items-center justify-center p-4">
-            <p className="text-muted-foreground text-sm mb-3">
-              No traces available. Get started by setting up Langtrace in your
-              application.
-            </p>
+            <div className="flex gap-2">
+              <CircularProgress size={15} />
+              <p className="text-orange-500 text-sm mb-3">
+                Looking for new traces...
+              </p>
+            </div>
             <SetupInstructions project_id={project_id} />
           </div>
         )}

components/project/traces/traces.tsx

@@ -54,7 +54,8 @@ export default function Traces({ email }: { email: string }) {
       setExpandedView(expanded === "true");
 
       const group = window.localStorage.getItem("preferences.group");
-      setGroup(group === "true");
+      // Default group to true if not set
+      setGroup(group === "false" ? false : true);
     }
   }, [filters]);