Minor bug fixes

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

@@ -2,6 +2,7 @@
 
 import { AddLLMChat } from "@/components/playground/common";
 import LLMChat from "@/components/playground/llmchat";
+import HowTo from "@/components/shared/how-to";
 import {
   AnthropicModel,
   AnthropicSettings,
@@ -86,6 +87,7 @@ export default function Page() {
 
   return (
     <div className="px-12 py-6 flex flex-col gap-8">
+      <HowTo link="https://docs.langtrace.ai/features/playground" />
       <span className="text-sm font-semibold">
         Note: Dont forget to add your LLM provider API keys in the{" "}
         <Link href="/settings/keys" className="underline text-blue-400">

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

@@ -1,5 +1,6 @@
 "use client";
 import CreatePromptDialog from "@/components/shared/create-prompt-dialog";
+import HowTo from "@/components/shared/how-to";
 import { PromptInstructions } from "@/components/shared/setup-instructions";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
@@ -54,6 +55,7 @@ export default function Page() {
   if (!selectedPrompt)
     return (
       <div className="p-12 flex flex-col gap-2">
+        <HowTo link="https://docs.langtrace.ai/features/manage_prompts" />
         <Button
           className="w-fit"
           variant={"outline"}
@@ -82,6 +84,7 @@ export default function Page() {
   else
     return (
       <div className="px-12 py-12 flex flex-col gap-4">
+        <HowTo link="https://docs.langtrace.ai/features/manage_prompts" />
         <div className="flex gap-4 items-center">
           <Button
             className="w-fit"

app/(protected)/project/[project_id]/prompts/prompt-management.tsx

@@ -3,6 +3,7 @@
 import { CreatePromptset } from "@/components/project/dataset/create";
 import { EditPromptSet } from "@/components/project/dataset/edit";
 import CardLoading from "@/components/shared/card-skeleton";
+import HowTo from "@/components/shared/how-to";
 import {
   Card,
   CardDescription,
@@ -53,6 +54,7 @@ export default function PromptManagement({ email }: { email: string }) {
   } else {
     return (
       <div className="w-full py-12 px-12 flex flex-col gap-4">
+        <HowTo link="https://docs.langtrace.ai/features/manage_prompts" />
         <div className="w-fit">
           <CreatePromptset projectId={projectId} />
         </div>

components/playground/import-trace-conversation.tsx

@@ -124,7 +124,7 @@ export default function ImportTraceConversation({
           Import Traced Conversation
         </Button>
       </DialogTrigger>
-      <DialogContent className="w-full max-w-6xl h-[600px] overflow-y-hidden">
+      <DialogContent className="w-full max-w-6xl h-[600px] overflow-y-scroll">
         <div className="flex flex-col gap-2">
           <Label htmlFor="name" className="text-left text-lg mb-4">
             Select a conversation to import

components/shared/how-to.tsx

@@ -0,0 +1,17 @@
+import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { Button } from "../ui/button";
+
+export default function HowTo({ link }: { link: string }) {
+  return (
+    <Link href={link} target="_blank">
+      <Button
+        className="absolute top-40 right-24 text-muted-foreground"
+        variant={"outline"}
+      >
+        How to use this
+        <QuestionMarkCircledIcon className="w-6 h-6 ml-2 text-muted-foreground" />
+      </Button>
+    </Link>
+  );
+}

components/shared/setup-instructions.tsx

@@ -103,7 +103,6 @@ export function SetupInstructions({ project_id }: { project_id: string }) {
   );
 }
 
-
 export function PromptInstructions({ id }: { id: string }) {
   const [sdk, setSdk] = useState("python");
 
@@ -116,12 +115,11 @@ export function PromptInstructions({ id }: { id: string }) {
     <div className="flex flex-col gap-6 border rounded-md p-4">
       <div className="flex flex-row items-center gap-3">
         <Button
-          disabled={true}
           onClick={() => setSdk("python")}
           variant={sdk === "python" ? "default" : "ghost"}
           size={"sm"}
         >
-          Python (Coming Soon)
+          Python
         </Button>
         <Button
           onClick={() => setSdk("typescript")}
@@ -162,15 +160,15 @@ const prompt = Langtrace.getPromptFromRegistry('${id}')
             onClick={() => {
               copyToClipboard(
                 `
-from langtrace_python_sdk.utils import (get_prompt_from_registry)
+                from langtrace_python_sdk import get_prompt_from_registry
 
-prompt = get_prompt_from_registry('${id}')
+                prompt = get_prompt_from_registry('${id}')
 `
               );
             }}
           >
-            {`
-from langtrace_python_sdk.utils import (get_prompt_from_registry)
+            {`// Must precede any llm module imports
+from langtrace_python_sdk import get_prompt_from_registry
 
 prompt = get_prompt_from_registry('${id}')
 `}