[OPIK-319]: prompt library improvements; (#579)

* [OPIK-351]: use commit instead of id;

* [OPIK-387]: add autorefresh to prompts;

* [OPIK-351]: update the notification for copying a commit;

* [OPIK-349]: add use this prompt code snippets;

* [OPIK-349]: remove the autofocus for use this prompt modal;

* [OPIK-351]: add a refetchInterval to commit history;

---------

Co-authored-by: Sasha <aliaksandr@comet.com>

apps/opik-frontend/src/components/pages/PromptPage/PromptTab/CommitHistory.tsx

@@ -27,7 +27,7 @@ const CommitHistory = ({
     await copy(versionId);
 
     toast({
-      description: "ID successfully copied to clipboard",
+      description: "Commit successfully copied to clipboard",
     });
   };
 
@@ -49,13 +49,13 @@ const CommitHistory = ({
           >
             <div className="flex items-center gap-2">
               <GitCommitVertical className="mt-auto size-4 shrink-0 text-muted-slate" />
-              <span className="comet-body-s truncate">{version.id}</span>
+              <span className="comet-body-s truncate">{version.commit}</span>
               {hoveredVersionId == version.id && (
                 <TooltipWrapper content="Copy code">
                   <Button
                     size="icon-xxs"
                     variant="minimal"
-                    onClick={() => handleCopyClick(version.id)}
+                    onClick={() => handleCopyClick(version.commit)}
                   >
                     <Copy className="size-3 shrink-0" />
                   </Button>

apps/opik-frontend/src/components/pages/PromptPage/PromptTab/CommitsTab.tsx

@@ -15,6 +15,7 @@ import IdCell from "@/components/shared/DataTableCells/IdCell";
 import { formatDate } from "@/lib/date";
 import { convertColumnDataToColumn } from "@/lib/table";
 import CodeCell from "@/components/shared/DataTableCells/CodeCell";
+import { keepPreviousData } from "@tanstack/react-query";
 
 interface CommitsTabInterface {
   prompt?: PromptWithLatestVersion;
@@ -26,7 +27,7 @@ export const COMMITS_DEFAULT_COLUMNS = convertColumnDataToColumn<
 >(
   [
     {
-      id: "id",
+      id: "commit",
       label: "Prompt commit",
       type: COLUMN_TYPE.string,
       cell: IdCell as never,
@@ -64,6 +65,8 @@ const CommitsTab = ({ prompt }: CommitsTabInterface) => {
     },
     {
       enabled: !!prompt?.id,
+      placeholderData: keepPreviousData,
+      refetchInterval: 30000,
     },
   );
 

apps/opik-frontend/src/components/pages/PromptPage/PromptTab/PromptTab.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Pencil } from "lucide-react";
+import { Info, Pencil } from "lucide-react";
 import { PromptWithLatestVersion } from "@/types/prompts";
 import Loader from "@/components/shared/Loader/Loader";
 import usePromptVersionsById from "@/api/prompts/usePromptVersionsById";
@@ -34,6 +34,7 @@ const PromptTab = ({ prompt }: PromptTabInterface) => {
     },
     {
       enabled: !!prompt?.id,
+      refetchInterval: 30000,
     },
   );
 
@@ -73,10 +74,10 @@ const PromptTab = ({ prompt }: PromptTabInterface) => {
     <>
       <div>
         <div className="flex w-full items-center">
-          {/*<Button variant="outline" onClick={() => setOpenUseThisPrompt(true)}>*/}
-          {/*  <Info className="mr-2 size-4" />*/}
-          {/*  Use this prompt*/}
-          {/*</Button>*/}
+          <Button variant="outline" onClick={() => setOpenUseThisPrompt(true)}>
+            <Info className="mr-2 size-4" />
+            Use this prompt
+          </Button>
 
           <Button
             className="ml-auto"

apps/opik-frontend/src/components/pages/PromptPage/PromptTab/UseThisPromptDialog.tsx

@@ -6,23 +6,57 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import CodeHighlighter from "@/components/shared/CodeHighlighter/CodeHighlighter";
 
 type UseThisPromptDialogProps = {
   open: boolean;
   setOpen: (open: boolean) => void;
 };
 
+const CREATING_PROMPT = `import opik
+
+# Create a new Prompt instance
+prompt = opik.Prompt(
+  name="greeting_prompt",
+  prompt="Hello, {name}! Welcome to {location}. How can I assist you today?"
+)
+
+# Format the prompt with the given parameters
+formatted_prompt = prompt.format(name="Alice", location="Wonderland")
+print(formatted_prompt)
+`;
+
+const GETTING_PROMPT = `import opik
+
+client = opik.Opik()
+
+# Get the most recent version of a prompt
+prompt = client.get_prompt(name="greeting_prompt")
+
+# Format the prompt with the given parameters
+formatted_prompt = prompt.format(name="Alice", location="Wonderland")
+print(formatted_prompt)
+`;
+
 const UseThisPromptDialog: React.FunctionComponent<
   UseThisPromptDialogProps
 > = ({ open, setOpen }) => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="h-[90vh] w-[90vw]">
+      <DialogContent
+        className="w-[90vw]"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
         <DialogHeader>
           <DialogTitle>Use this prompt</DialogTitle>
         </DialogHeader>
 
-        <div className="size-full overflow-y-auto"></div>
+        <div className="flex flex-col gap-2">
+          <div className="comet-body-accented mt-4">Creating a prompt</div>
+          <CodeHighlighter data={CREATING_PROMPT} />
+          <div className="comet-body-accented mt-4">Getting a prompt</div>
+          <CodeHighlighter data={GETTING_PROMPT} />
+        </div>
       </DialogContent>
     </Dialog>
   );

apps/opik-frontend/src/components/pages/PromptsPage/PromptsPage.tsx

@@ -79,6 +79,7 @@ const PromptsPage: React.FunctionComponent = () => {
     },
     {
       placeholderData: keepPreviousData,
+      refetchInterval: 30000,
     },
   );
 

apps/opik-frontend/src/types/prompts.ts

@@ -17,4 +17,5 @@ export interface PromptVersion {
   id: string;
   created_at: string;
   template: string;
+  commit: string;
 }