Release 3.0.5

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}

app/(protected)/settings/keys/page-client.tsx

@@ -71,6 +71,9 @@ export default function ApiKeys() {
                       onClick={() => {
                         if (typeof window === "undefined") return null;
                         window.localStorage.removeItem(vendor.value);
+                        setVendorKeys((prevKeys) =>
+                          prevKeys.filter((key) => key.value !== vendor.value)
+                        );
                         toast.success("API Key removed");
                       }}
                       className="text-destructive"

app/api/api-key/route.ts

@@ -1,6 +1,6 @@
 import { authOptions } from "@/lib/auth/options";
 import prisma from "@/lib/prisma";
-import { generateApiKey, hashApiKey } from "@/lib/utils";
+import { generateApiKey, hashApiKey, authApiKey } from "@/lib/utils";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { NextRequest, NextResponse } from "next/server";
@@ -9,6 +9,14 @@ import { NextRequest, NextResponse } from "next/server";
 export async function POST(req: NextRequest) {
   const projectId = req.nextUrl.searchParams.get("project_id") as string;
   const teamId = req.nextUrl.searchParams.get("team_id") as string;
+  // if user is generating an api key for their project through the api
+  const projectGenApiKey = req.headers.get("x-api-key");
+  if (projectGenApiKey !== null) {
+    const response = await authApiKey(projectGenApiKey, true);
+    if (response.status !== 200) {
+      return response;
+    }
+  }
 
   if (!projectId && !teamId) {
     return NextResponse.json(

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

@@ -116,7 +116,7 @@ export default function LLMChat({
   }, [initialPrompt]);
 
   return (
-    <Card className="w-[450px] h-[600px] p-1 relative group/card">
+    <Card className="w-[530px] h-[600px] p-1 relative group/card">
       <div className="overflow-y-scroll h-[535px]">
         {localLLM.settings.messages.map((message, i) => (
           <Message
@@ -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={() => {
@@ -204,6 +210,12 @@ export default function LLMChat({
             Add message
           </Button>
           <ImportMessages setMessages={setMessages} className="mt-2" />
+          {(cost || latency) && (
+            <div className="absolute bottom-[10px] right-4 flex flex-col gap-1 bg-muted rounded-md p-1 w-[130px]">
+              <p className="text-xs">{`Cost: ${cost}`}</p>
+              <p className="text-xs break-all">{`Latency: ${latency}ms`}</p>
+            </div>
+          )}
         </div>
       </div>
       <div className="absolute -top-6 -left-3">
@@ -658,12 +670,6 @@ export default function LLMChat({
           {!busy && <LucideChevronRight className="ml-2 h-4 w-4" />}
         </Button>
       )}
-      {(cost || latency) && (
-        <div className="absolute bottom-14 right-4 flex flex-col gap-2 bg-primary-foreground rounded-md p-2 w-[115px] shadow-md">
-          <p className="text-xs">{`Cost: ${cost}`}</p>
-          <p className="text-xs break-all">{`Latency: ${latency}ms`}</p>
-        </div>
-      )}
     </Card>
   );
 }

components/project/dataset/create.tsx

@@ -54,7 +54,7 @@ export function CreateDataset({
           Create Dataset <PlusIcon className="ml-2" />
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="z-[920] sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Create Dataset</DialogTitle>
           <DialogDescription>