From 460975239ca4a0adc45da8db2a382e1364cfdda2 Mon Sep 17 00:00:00 2001
From: Anthony Powell <apowell@arize.com>
Date: Mon, 13 Jan 2025 19:27:36 -0500
Subject: [PATCH] feat(prompts): Add "Clone Prompt" flow to prompts UI (#5993)

* feat(prompts): Implement ClonePromptMutation

* feat(prompts): Add Clone prompt flow to prompts UI

* chore(prompts): Fix storybook build

* Add prompt clone tests

* Revalidate clone dialog on change

* Fix invocation parameter list display

* Reduce number of db writes during prompt clone

* Improve prompt clone test readability

* Fix prompt clone error handling

* Tweak error utils to ignore single quotes

* Properly display error messages for prompt save and clone mutations

* Fix prompt clone error message display

* Fix test

* Fix test
---
 app/.storybook/main.ts                        |  15 ++
 app/schema.graphql                            |   7 +
 .../UpsertPromptFromTemplateDialog.tsx        |   9 +-
 app/src/pages/prompt/ClonePromptDialog.tsx    | 188 ++++++++++++++++++
 .../prompt/PromptInvocationParameters.tsx     |   7 +-
 app/src/pages/prompt/PromptLayout.tsx         |  48 ++++-
 .../ClonePromptDialogMutation.graphql.ts      |  94 +++++++++
 .../PromptLayout__main.graphql.ts             |  41 +++-
 .../promptLoaderQuery.graphql.ts              |   6 +-
 app/src/utils/__tests__/errorUtils.test.ts    |   4 +-
 app/src/utils/errorUtils.ts                   |   4 +-
 .../server/api/mutations/prompt_mutations.py  |  62 +++++-
 .../api/mutations/test_prompt_mutations.py    | 183 +++++++++++++++++
 13 files changed, 634 insertions(+), 34 deletions(-)
 create mode 100644 app/src/pages/prompt/ClonePromptDialog.tsx
 create mode 100644 app/src/pages/prompt/__generated__/ClonePromptDialogMutation.graphql.ts

diff --git a/app/.storybook/main.ts b/app/.storybook/main.ts
index c84ff85b54..939023b206 100644
--- a/app/.storybook/main.ts
+++ b/app/.storybook/main.ts
@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
 import { resolve } from "path";
 
 const config: StorybookConfig = {
@@ -16,5 +17,19 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgen: "react-docgen-typescript",
   },
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    return mergeConfig(config, {
+      // customize the Vite config here
+      optimizeDeps: {
+        include: ["@storybook/addon-interactions"],
+      },
+      resolve: {
+        alias: {
+          "@phoenix": resolve(__dirname, "../src"),
+        },
+      },
+    });
+  },
 };
 export default config;
diff --git a/app/schema.graphql b/app/schema.graphql
index d10b656c49..5e7f09782c 100644
--- a/app/schema.graphql
+++ b/app/schema.graphql
@@ -215,6 +215,12 @@ input ClearProjectInput {
   endTime: DateTime
 }
 
+input ClonePromptInput {
+  name: String!
+  description: String = null
+  promptId: GlobalID!
+}
+
 type Cluster {
   """The ID of the cluster"""
   id: ID!
@@ -1207,6 +1213,7 @@ type Mutation {
   createChatPrompt(input: CreateChatPromptInput!): Prompt!
   createChatPromptVersion(input: CreateChatPromptVersionInput!): Prompt!
   deletePrompt(input: DeletePromptInput!): Query!
+  clonePrompt(input: ClonePromptInput!): Prompt!
   deletePromptVersionTag(input: DeletePromptVersionTagInput!): PromptVersionTagMutationPayload!
   setPromptVersionTag(input: SetPromptVersionTagInput!): PromptVersionTagMutationPayload!
   createSpanAnnotations(input: [CreateSpanAnnotationInput!]!): SpanAnnotationMutationPayload!
diff --git a/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx b/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx
index 2394dbba88..1bd8860fb5 100644
--- a/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx
+++ b/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx
@@ -14,6 +14,7 @@ import {
   SavePromptForm,
   SavePromptSubmitHandler,
 } from "@phoenix/pages/playground/SavePromptForm";
+import { getErrorMessagesFromRelayMutationError } from "@phoenix/utils/errorUtils";
 
 type UpsertPromptFromTemplateProps = {
   instanceId: number;
@@ -109,10 +110,10 @@ export const UpsertPromptFromTemplateDialog = ({
           setDialog(null);
         },
         onError: (error) => {
-          // eslint-disable-next-line no-console
-          console.error(error);
+          const message = getErrorMessagesFromRelayMutationError(error);
           notifyError({
             title: "Error creating prompt",
+            message: message?.[0],
           });
           setDialog(null);
         },
@@ -161,10 +162,10 @@ export const UpsertPromptFromTemplateDialog = ({
           setDialog(null);
         },
         onError: (error) => {
-          // eslint-disable-next-line no-console
-          console.error(error);
+          const message = getErrorMessagesFromRelayMutationError(error);
           notifyError({
             title: "Error updating prompt",
+            message: message?.[0],
           });
           setDialog(null);
         },
diff --git a/app/src/pages/prompt/ClonePromptDialog.tsx b/app/src/pages/prompt/ClonePromptDialog.tsx
new file mode 100644
index 0000000000..0188305ac5
--- /dev/null
+++ b/app/src/pages/prompt/ClonePromptDialog.tsx
@@ -0,0 +1,188 @@
+import React, { Suspense } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { graphql, useMutation } from "react-relay";
+import { useNavigate } from "react-router";
+
+import { Dialog, TextArea } from "@arizeai/components";
+
+import {
+  Button,
+  FieldError,
+  Flex,
+  Input,
+  Label,
+  Loading,
+  Text,
+  TextField,
+  View,
+} from "@phoenix/components";
+import { useNotifySuccess } from "@phoenix/contexts/NotificationContext";
+import { ClonePromptDialogMutation } from "@phoenix/pages/prompt/__generated__/ClonePromptDialogMutation.graphql";
+import { getErrorMessagesFromRelayMutationError } from "@phoenix/utils/errorUtils";
+
+export const ClonePromptDialog = ({
+  promptId,
+  promptName,
+  promptDescription,
+  setDialog,
+}: {
+  promptId: string;
+  promptName: string;
+  promptDescription?: string;
+  setDialog: (dialog: React.ReactNode | null) => void;
+}) => {
+  const notifySuccess = useNotifySuccess();
+  const navigate = useNavigate();
+  const [clonePrompt, isClonePending] = useMutation<ClonePromptDialogMutation>(
+    graphql`
+      mutation ClonePromptDialogMutation($input: ClonePromptInput!) {
+        clonePrompt(input: $input) {
+          id
+        }
+      }
+    `
+  );
+  const form = useForm({
+    disabled: isClonePending,
+    reValidateMode: "onBlur",
+    mode: "onChange",
+    defaultValues: {
+      name: `${promptName} (Clone)`,
+      description: promptDescription,
+    },
+  });
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, errors },
+    setError,
+  } = form;
+  const onSubmit = handleSubmit((data) => {
+    clonePrompt({
+      variables: {
+        input: {
+          promptId,
+          name: data.name,
+          description: data.description,
+        },
+      },
+      onCompleted: (data) => {
+        setDialog(null);
+        notifySuccess({
+          title: "Prompt cloned successfully",
+          action: {
+            text: "View Prompt",
+            onClick: () => {
+              navigate(`/prompts/${data.clonePrompt.id}`);
+            },
+          },
+        });
+      },
+      onError: (error) => {
+        const message = getErrorMessagesFromRelayMutationError(error);
+        if (message?.[0]?.includes("already exists")) {
+          setError("name", {
+            message: message?.[0],
+          });
+        } else {
+          setError("root", {
+            message: message?.[0],
+          });
+        }
+      },
+    });
+  });
+  return (
+    <Dialog title="Clone Prompt">
+      <Suspense fallback={<Loading />}>
+        <View padding="size-200">
+          <form onSubmit={onSubmit}>
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: { message: "Name is required", value: true },
+                validate: {
+                  unique: (value) => {
+                    if (value.trim() === promptName.trim()) {
+                      return "Name must be different from the original prompt name";
+                    }
+                    return true;
+                  },
+                },
+              }}
+              render={({
+                field: { onChange, onBlur, value, disabled },
+                fieldState: { error },
+              }) => (
+                <TextField isInvalid={!!error?.message}>
+                  <Label>Name</Label>
+                  <Input
+                    name="name"
+                    type="text"
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    value={value}
+                    disabled={disabled}
+                  />
+                  {!error && (
+                    <Text slot="description">
+                      A name for the cloned prompt.
+                    </Text>
+                  )}
+                  <FieldError>{error?.message}</FieldError>
+                </TextField>
+              )}
+            />
+            <Controller
+              control={control}
+              name="description"
+              render={({
+                field: { onChange, onBlur, value, disabled },
+                fieldState: { error },
+              }) => (
+                <TextField isInvalid={!!error?.message}>
+                  <Label>Description</Label>
+                  <TextArea
+                    name="description"
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    value={value}
+                    height={100}
+                    isDisabled={disabled}
+                  />
+                  {!error && (
+                    <Text slot="description">
+                      A description for the cloned prompt.
+                    </Text>
+                  )}
+                  <FieldError>{error?.message}</FieldError>
+                </TextField>
+              )}
+            />
+            {errors?.root && (
+              <Text color="danger">{errors?.root?.message}</Text>
+            )}
+            <Flex direction="row" justifyContent="end" gap="size-100">
+              <Button
+                variant="default"
+                onPress={() => setDialog(null)}
+                isDisabled={isClonePending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                isDisabled={!isValid}
+                isPending={isClonePending}
+              >
+                Clone
+              </Button>
+            </Flex>
+          </form>
+        </View>
+      </Suspense>
+    </Dialog>
+  );
+};
diff --git a/app/src/pages/prompt/PromptInvocationParameters.tsx b/app/src/pages/prompt/PromptInvocationParameters.tsx
index dddfe38ecb..3ed4a803b3 100644
--- a/app/src/pages/prompt/PromptInvocationParameters.tsx
+++ b/app/src/pages/prompt/PromptInvocationParameters.tsx
@@ -5,6 +5,7 @@ import isObject from "lodash/isObject";
 import { List, ListItem } from "@arizeai/components";
 
 import { Flex, Text, View } from "@phoenix/components";
+import { safelyStringifyJSON } from "@phoenix/utils/jsonUtils";
 
 import { PromptInvocationParameters__main$key } from "./__generated__/PromptInvocationParameters__main.graphql";
 
@@ -15,11 +16,15 @@ function PromptInvocationParameterItem({
   keyName: string;
   value: unknown;
 }) {
+  const { json, stringifyError } = safelyStringifyJSON(value);
+  if (stringifyError) {
+    return null;
+  }
   return (
     <View paddingStart="size-100" paddingEnd="size-100">
       <Flex direction="row" justifyContent="space-between">
         <Text weight="heavy">{keyName}</Text>
-        <Text>{String(value)}</Text>
+        <Text>{json}</Text>
       </Flex>
     </View>
   );
diff --git a/app/src/pages/prompt/PromptLayout.tsx b/app/src/pages/prompt/PromptLayout.tsx
index d95b20a524..44d66c1cd1 100644
--- a/app/src/pages/prompt/PromptLayout.tsx
+++ b/app/src/pages/prompt/PromptLayout.tsx
@@ -1,12 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import { useFragment } from "react-relay";
 import { Outlet, useLocation, useNavigate } from "react-router";
 import { graphql } from "relay-runtime";
 import { css } from "@emotion/react";
 
-import { Counter, TabPane, Tabs } from "@arizeai/components";
+import { Counter, DialogContainer, TabPane, Tabs } from "@arizeai/components";
 
 import { Button, Flex, Heading, Icon, Icons, View } from "@phoenix/components";
+import { ClonePromptDialog } from "@phoenix/pages/prompt/ClonePromptDialog";
 
 import { PromptLayout__main$key } from "./__generated__/PromptLayout__main.graphql";
 import { usePromptIdLoader } from "./usePromptIdLoader";
@@ -40,6 +41,7 @@ const mainCSS = css`
 `;
 
 export function PromptLayout() {
+  const [dialog, setDialog] = useState<React.ReactNode | null>(null);
   const loaderData = usePromptIdLoader();
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -53,6 +55,9 @@ export function PromptLayout() {
   const data = useFragment<PromptLayout__main$key>(
     graphql`
       fragment PromptLayout__main on Prompt {
+        id
+        name
+        description
         promptVersions {
           edges {
             node {
@@ -80,15 +85,33 @@ export function PromptLayout() {
           alignItems="center"
         >
           <Heading level={1}>{loaderData.prompt.name}</Heading>
-          <Button
-            size="S"
-            icon={<Icon svg={<Icons.Edit2Outline />} />}
-            onPress={() => {
-              navigate(`/prompts/${loaderData.prompt.id}/playground`);
-            }}
-          >
-            Edit in Playground
-          </Button>
+          <Flex direction="row" gap="size-100">
+            <Button
+              size="S"
+              icon={<Icon svg={<Icons.DuplicateIcon />} />}
+              onPress={() => {
+                setDialog(
+                  <ClonePromptDialog
+                    promptId={data.id}
+                    promptName={data.name}
+                    promptDescription={data.description ?? undefined}
+                    setDialog={setDialog}
+                  />
+                );
+              }}
+            >
+              Clone
+            </Button>
+            <Button
+              size="S"
+              icon={<Icon svg={<Icons.Edit2Outline />} />}
+              onPress={() => {
+                navigate(`/prompts/${loaderData.prompt.id}/playground`);
+              }}
+            >
+              Edit in Playground
+            </Button>
+          </Flex>
         </Flex>
       </View>
       <Tabs
@@ -118,6 +141,9 @@ export function PromptLayout() {
           <Outlet />
         </TabPane>
       </Tabs>
+      <DialogContainer onDismiss={() => setDialog(null)}>
+        {dialog}
+      </DialogContainer>
     </main>
   );
 }
diff --git a/app/src/pages/prompt/__generated__/ClonePromptDialogMutation.graphql.ts b/app/src/pages/prompt/__generated__/ClonePromptDialogMutation.graphql.ts
new file mode 100644
index 0000000000..5de4489572
--- /dev/null
+++ b/app/src/pages/prompt/__generated__/ClonePromptDialogMutation.graphql.ts
@@ -0,0 +1,94 @@
+/**
+ * @generated SignedSource<<a7ef9cb86aac8b9de53eb2761e20863a>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Mutation } from 'relay-runtime';
+export type ClonePromptInput = {
+  description?: string | null;
+  name: string;
+  promptId: string;
+};
+export type ClonePromptDialogMutation$variables = {
+  input: ClonePromptInput;
+};
+export type ClonePromptDialogMutation$data = {
+  readonly clonePrompt: {
+    readonly id: string;
+  };
+};
+export type ClonePromptDialogMutation = {
+  response: ClonePromptDialogMutation$data;
+  variables: ClonePromptDialogMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "Prompt",
+    "kind": "LinkedField",
+    "name": "clonePrompt",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ClonePromptDialogMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ClonePromptDialogMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "6ad0382f6acd0f00125307c887c0f4f2",
+    "id": null,
+    "metadata": {},
+    "name": "ClonePromptDialogMutation",
+    "operationKind": "mutation",
+    "text": "mutation ClonePromptDialogMutation(\n  $input: ClonePromptInput!\n) {\n  clonePrompt(input: $input) {\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "081b8cf05c35b46579fe5cbb85f7a761";
+
+export default node;
diff --git a/app/src/pages/prompt/__generated__/PromptLayout__main.graphql.ts b/app/src/pages/prompt/__generated__/PromptLayout__main.graphql.ts
index b6acaa3771..5df7029456 100644
--- a/app/src/pages/prompt/__generated__/PromptLayout__main.graphql.ts
+++ b/app/src/pages/prompt/__generated__/PromptLayout__main.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fbcae6784dfd22eaf4ee4e96cff8ecb7>>
+ * @generated SignedSource<<9bb0b567dbba35e8d71a077f77a57bf4>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -11,6 +11,9 @@
 import { Fragment, ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type PromptLayout__main$data = {
+  readonly description: string | null;
+  readonly id: string;
+  readonly name: string;
   readonly promptVersions: {
     readonly edges: ReadonlyArray<{
       readonly node: {
@@ -25,12 +28,35 @@ export type PromptLayout__main$key = {
   readonly " $fragmentSpreads": FragmentRefs<"PromptLayout__main">;
 };
 
-const node: ReaderFragment = {
+const node: ReaderFragment = (function(){
+var v0 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+};
+return {
   "argumentDefinitions": [],
   "kind": "Fragment",
   "metadata": null,
   "name": "PromptLayout__main",
   "selections": [
+    (v0/*: any*/),
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "description",
+      "storageKey": null
+    },
     {
       "alias": null,
       "args": null,
@@ -55,13 +81,7 @@ const node: ReaderFragment = {
               "name": "node",
               "plural": false,
               "selections": [
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "id",
-                  "storageKey": null
-                }
+                (v0/*: any*/)
               ],
               "storageKey": null
             }
@@ -75,7 +95,8 @@ const node: ReaderFragment = {
   "type": "Prompt",
   "abstractKey": null
 };
+})();
 
-(node as any).hash = "7453bb448124e048413aab16f34c6543";
+(node as any).hash = "6431d40ed67848e82e6dd5e826d11ed3";
 
 export default node;
diff --git a/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts b/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts
index 184f80634c..5f9c3c58f0 100644
--- a/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts
+++ b/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<60ccf8f08469c9fcb69a2797544f248e>>
+ * @generated SignedSource<<f55203b218e955ee7772e267e78ee5e1>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -403,12 +403,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "0de49f33093ebbbc83e2372aa75b87a0",
+    "cacheID": "5b506b654454de1c35bd0b2e7fdd6f7f",
     "id": null,
     "metadata": {},
     "name": "promptLoaderQuery",
     "operationKind": "query",
-    "text": "query promptLoaderQuery(\n  $id: GlobalID!\n) {\n  prompt: node(id: $id) {\n    __typename\n    id\n    ... on Prompt {\n      name\n      ...PromptIndexPage__main\n      ...PromptVersionsPageContent__main\n      ...PromptLayout__main\n    }\n  }\n}\n\nfragment PromptChatMessagesCard__main on PromptVersion {\n  template {\n    __typename\n    ... on PromptChatTemplate {\n      messages {\n        __typename\n        ... on JSONPromptMessage {\n          role\n          jsonContent: content\n        }\n        ... on TextPromptMessage {\n          role\n          content\n        }\n      }\n    }\n    ... on PromptStringTemplate {\n      template\n    }\n  }\n  templateType\n  templateFormat\n}\n\nfragment PromptCodeExportCard__main on PromptVersion {\n  invocationParameters\n  modelName\n  modelProvider\n  outputSchema {\n    definition\n  }\n  tools {\n    definition\n  }\n  template {\n    __typename\n    ... on PromptChatTemplate {\n      messages {\n        __typename\n        ... on JSONPromptMessage {\n          role\n          jsonContent: content\n        }\n        ... on TextPromptMessage {\n          role\n          content\n        }\n      }\n    }\n    ... on PromptStringTemplate {\n      template\n    }\n  }\n  templateFormat\n  templateType\n}\n\nfragment PromptIndexPage__aside on Prompt {\n  description\n  ...PromptLatestVersionsListFragment\n}\n\nfragment PromptIndexPage__main on Prompt {\n  promptVersions {\n    edges {\n      node {\n        ...PromptInvocationParameters__main\n        ...PromptChatMessagesCard__main\n        ...PromptCodeExportCard__main\n        ...PromptModelConfigurationCard__main\n      }\n    }\n  }\n  ...PromptIndexPage__aside\n}\n\nfragment PromptInvocationParameters__main on PromptVersion {\n  invocationParameters\n}\n\nfragment PromptLatestVersionsListFragment on Prompt {\n  latestVersions: promptVersions(first: 5) {\n    edges {\n      version: node {\n        id\n        description\n        createdAt\n      }\n    }\n  }\n}\n\nfragment PromptLayout__main on Prompt {\n  promptVersions {\n    edges {\n      node {\n        id\n      }\n    }\n  }\n}\n\nfragment PromptModelConfigurationCard__main on PromptVersion {\n  ...PromptInvocationParameters__main\n  ...PromptTools__main\n  ...PromptOutputSchemaFragment\n}\n\nfragment PromptOutputSchemaFragment on PromptVersion {\n  outputSchema {\n    definition\n  }\n}\n\nfragment PromptTools__main on PromptVersion {\n  tools {\n    definition\n  }\n}\n\nfragment PromptVersionTagsList_data on PromptVersion {\n  tags {\n    id\n    name\n  }\n}\n\nfragment PromptVersionsList__main on Prompt {\n  promptVersions {\n    edges {\n      version: node {\n        id\n        description\n        createdAt\n        ...PromptVersionTagsList_data\n      }\n    }\n  }\n}\n\nfragment PromptVersionsPageContent__main on Prompt {\n  ...PromptVersionsList__main\n}\n"
+    "text": "query promptLoaderQuery(\n  $id: GlobalID!\n) {\n  prompt: node(id: $id) {\n    __typename\n    id\n    ... on Prompt {\n      name\n      ...PromptIndexPage__main\n      ...PromptVersionsPageContent__main\n      ...PromptLayout__main\n    }\n  }\n}\n\nfragment PromptChatMessagesCard__main on PromptVersion {\n  template {\n    __typename\n    ... on PromptChatTemplate {\n      messages {\n        __typename\n        ... on JSONPromptMessage {\n          role\n          jsonContent: content\n        }\n        ... on TextPromptMessage {\n          role\n          content\n        }\n      }\n    }\n    ... on PromptStringTemplate {\n      template\n    }\n  }\n  templateType\n  templateFormat\n}\n\nfragment PromptCodeExportCard__main on PromptVersion {\n  invocationParameters\n  modelName\n  modelProvider\n  outputSchema {\n    definition\n  }\n  tools {\n    definition\n  }\n  template {\n    __typename\n    ... on PromptChatTemplate {\n      messages {\n        __typename\n        ... on JSONPromptMessage {\n          role\n          jsonContent: content\n        }\n        ... on TextPromptMessage {\n          role\n          content\n        }\n      }\n    }\n    ... on PromptStringTemplate {\n      template\n    }\n  }\n  templateFormat\n  templateType\n}\n\nfragment PromptIndexPage__aside on Prompt {\n  description\n  ...PromptLatestVersionsListFragment\n}\n\nfragment PromptIndexPage__main on Prompt {\n  promptVersions {\n    edges {\n      node {\n        ...PromptInvocationParameters__main\n        ...PromptChatMessagesCard__main\n        ...PromptCodeExportCard__main\n        ...PromptModelConfigurationCard__main\n      }\n    }\n  }\n  ...PromptIndexPage__aside\n}\n\nfragment PromptInvocationParameters__main on PromptVersion {\n  invocationParameters\n}\n\nfragment PromptLatestVersionsListFragment on Prompt {\n  latestVersions: promptVersions(first: 5) {\n    edges {\n      version: node {\n        id\n        description\n        createdAt\n      }\n    }\n  }\n}\n\nfragment PromptLayout__main on Prompt {\n  id\n  name\n  description\n  promptVersions {\n    edges {\n      node {\n        id\n      }\n    }\n  }\n}\n\nfragment PromptModelConfigurationCard__main on PromptVersion {\n  ...PromptInvocationParameters__main\n  ...PromptTools__main\n  ...PromptOutputSchemaFragment\n}\n\nfragment PromptOutputSchemaFragment on PromptVersion {\n  outputSchema {\n    definition\n  }\n}\n\nfragment PromptTools__main on PromptVersion {\n  tools {\n    definition\n  }\n}\n\nfragment PromptVersionTagsList_data on PromptVersion {\n  tags {\n    id\n    name\n  }\n}\n\nfragment PromptVersionsList__main on Prompt {\n  promptVersions {\n    edges {\n      version: node {\n        id\n        description\n        createdAt\n        ...PromptVersionTagsList_data\n      }\n    }\n  }\n}\n\nfragment PromptVersionsPageContent__main on Prompt {\n  ...PromptVersionsList__main\n}\n"
   }
 };
 })();
diff --git a/app/src/utils/__tests__/errorUtils.test.ts b/app/src/utils/__tests__/errorUtils.test.ts
index 4520662dc9..22308383d9 100644
--- a/app/src/utils/__tests__/errorUtils.test.ts
+++ b/app/src/utils/__tests__/errorUtils.test.ts
@@ -6,10 +6,10 @@ import {
 describe("getErrorMessagesFromRelayMutationError", () => {
   it("should extract error messages from a Relay mutation error", () => {
     const error = new Error(
-      "Error fetching GraphQL query 'MutationName' with variables '{'input':{'var1': 'test'}': [{'message':'Actual Error Message','locations':[{'line':4,'column':3}],'path':['responsePath']}]"
+      `Error fetching GraphQL query "MutationName" with variables {"input":{"var1":"test"}: [{"message":"Actual Error Message 'with quotes'","locations":[{"line":4,"column":3}],"path":["responsePath"]}]`
     );
     const result = getErrorMessagesFromRelayMutationError(error);
-    expect(result).toEqual(["Actual Error Message"]);
+    expect(result).toEqual(["Actual Error Message 'with quotes'"]);
   });
 
   it("should return an empty array if no error messages are found", () => {
diff --git a/app/src/utils/errorUtils.ts b/app/src/utils/errorUtils.ts
index 89976cc8af..283d584ee0 100644
--- a/app/src/utils/errorUtils.ts
+++ b/app/src/utils/errorUtils.ts
@@ -9,13 +9,13 @@ const isErrorWithMessage = (error: unknown): error is { message: string } => {
 /**
  * Regex to match an error message in a Relay mutation error.
  * See example below where "Actual Error Message" is the error message.
- * Matches the string after the first occurrence of "message": " and before the next occurrence of " with double or single quotes.
+ * Matches the string after the first occurrence of "message": " and before the next occurrence of " with double quotes.
  * @example
  * ```
  * "Error fetching GraphQL query 'MutationName' with variables '{'input':{'var1': 'test'}': [{'message':'Actual Error Message','locations':[{'line':4,'column':3}],'path':['responsePath']}]"
  * ```*
  */
-const mutationErrorRegex = /['"']message['"']:\s*['"']([^'"']+)['"']/g;
+const mutationErrorRegex = /["]message["]:\s*["]([^""]+)["]/g;
 /**
  * Extracts the error messages from a Relay mutation error.
  * A relay mutation error contains a message property which is a large string with various information.
diff --git a/src/phoenix/server/api/mutations/prompt_mutations.py b/src/phoenix/server/api/mutations/prompt_mutations.py
index 4f2037ae12..2ec83df94b 100644
--- a/src/phoenix/server/api/mutations/prompt_mutations.py
+++ b/src/phoenix/server/api/mutations/prompt_mutations.py
@@ -3,8 +3,9 @@
 import strawberry
 from fastapi import Request
 from pydantic import ValidationError
-from sqlalchemy import delete
+from sqlalchemy import delete, select
 from sqlalchemy.exc import IntegrityError as PostgreSQLIntegrityError
+from sqlalchemy.orm import joinedload
 from sqlean.dbapi2 import IntegrityError as SQLiteIntegrityError  # type: ignore[import-untyped]
 from strawberry.relay.types import GlobalID
 from strawberry.types import Info
@@ -43,6 +44,13 @@ class DeletePromptInput:
     prompt_id: GlobalID
 
 
+@strawberry.input
+class ClonePromptInput:
+    name: str
+    description: Optional[str] = None
+    prompt_id: GlobalID
+
+
 @strawberry.type
 class PromptMutationMixin:
     @strawberry.mutation
@@ -193,3 +201,55 @@ async def delete_prompt(self, info: Info[Context, None], input: DeletePromptInpu
 
             await session.commit()
         return Query()
+
+    @strawberry.mutation
+    async def clone_prompt(self, info: Info[Context, None], input: ClonePromptInput) -> Prompt:
+        prompt_id = from_global_id_with_expected_type(
+            global_id=input.prompt_id, expected_type_name=Prompt.__name__
+        )
+        async with info.context.db() as session:
+            # Load prompt with all versions
+            stmt = (
+                select(models.Prompt)
+                .options(joinedload(models.Prompt.prompt_versions))
+                .where(models.Prompt.id == prompt_id)
+            )
+            prompt = await session.scalar(stmt)
+
+            if not prompt:
+                raise NotFound(f"Prompt with ID '{input.prompt_id}' not found")
+
+            # Create new prompt
+            new_prompt = models.Prompt(
+                name=input.name,
+                description=input.description,
+                source_prompt_id=prompt_id,
+            )
+
+            # Create copies of all versions
+            new_versions = [
+                models.PromptVersion(
+                    prompt_id=new_prompt.id,
+                    user_id=version.user_id,
+                    description=version.description,
+                    template_type=version.template_type,
+                    template_format=version.template_format,
+                    template=version.template,
+                    invocation_parameters=version.invocation_parameters,
+                    tools=version.tools,
+                    output_schema=version.output_schema,
+                    model_provider=version.model_provider,
+                    model_name=version.model_name,
+                )
+                for version in prompt.prompt_versions
+            ]
+            # Add all version copies to the new prompt
+            new_prompt.prompt_versions = new_versions
+
+            session.add(new_prompt)
+
+            try:
+                await session.commit()
+            except (PostgreSQLIntegrityError, SQLiteIntegrityError):
+                raise Conflict(f"A prompt named '{input.name}' already exists")
+        return to_gql_prompt_from_orm(new_prompt)
diff --git a/tests/unit/server/api/mutations/test_prompt_mutations.py b/tests/unit/server/api/mutations/test_prompt_mutations.py
index a7ce1691c1..8c52024a05 100644
--- a/tests/unit/server/api/mutations/test_prompt_mutations.py
+++ b/tests/unit/server/api/mutations/test_prompt_mutations.py
@@ -11,6 +11,7 @@ class TestPromptMutations:
     CREATE_CHAT_PROMPT_MUTATION = """
       mutation CreateChatPromptMutation($input: CreateChatPromptInput!) {
         createChatPrompt(input: $input) {
+          id
           name
           description
           createdAt
@@ -18,6 +19,7 @@ class TestPromptMutations:
             edges {
               promptVersion: node {
                 id
+                createdAt
                 description
                 user {
                   id
@@ -52,6 +54,7 @@ class TestPromptMutations:
     CREATE_CHAT_PROMPT_VERSION_MUTATION = """
       mutation CreateChatPromptVersionMutation($input: CreateChatPromptVersionInput!) {
         createChatPromptVersion(input: $input) {
+          id
           name
           description
           promptVersions {
@@ -89,6 +92,49 @@ class TestPromptMutations:
         }
       }
     """
+    CLONE_PROMPT_MUTATION = """
+      mutation ClonePromptMutation($input: ClonePromptInput!) {
+        clonePrompt(input: $input) {
+          id
+          name
+          description
+          createdAt
+          promptVersions {
+            edges {
+              promptVersion: node {
+                id
+                createdAt
+                description
+                user {
+                  id
+                }
+                templateType
+                templateFormat
+                template {
+                  ... on PromptChatTemplate {
+                    messages {
+                      ... on TextPromptMessage {
+                        role
+                        content
+                      }
+                    }
+                  }
+                }
+                invocationParameters
+                tools {
+                  definition
+                }
+                outputSchema {
+                  definition
+                }
+                modelName
+                modelProvider
+              }
+            }
+          }
+        }
+      }
+    """
 
     @pytest.mark.parametrize(
         "variables",
@@ -236,6 +282,7 @@ async def test_create_chat_prompt_succeeds_with_valid_input(
         data = result.data["createChatPrompt"]
         assert data.pop("name") == "prompt-name"
         assert data.pop("description") == "prompt-description"
+        assert isinstance(data.pop("id"), str)
         assert isinstance(data.pop("createdAt"), str)
         prompt_version = data.pop("promptVersions")["edges"][0]["promptVersion"]
         assert not data
@@ -254,6 +301,7 @@ async def test_create_chat_prompt_succeeds_with_valid_input(
         assert prompt_version.pop("tools") == expected_tools
         expected_output_schema = variables["input"]["promptVersion"].get("outputSchema")
         assert prompt_version.pop("outputSchema") == expected_output_schema
+        assert isinstance(prompt_version.pop("createdAt"), str)
         assert isinstance(prompt_version.pop("id"), str)
 
         # Verify messages
@@ -587,6 +635,7 @@ async def test_create_chat_prompt_version_succeeds_with_valid_input(
         data = result.data["createChatPromptVersion"]
         assert data.pop("name") == "prompt-name"
         assert data.pop("description") == "prompt-description"
+        assert isinstance(data.pop("id"), str)
         versions = data.pop("promptVersions")["edges"]
         assert len(versions) == 2
         latest_prompt_version = versions[0]["promptVersion"]
@@ -790,3 +839,137 @@ async def test_create_chat_prompt_version_fails_with_invalid_input(
         result = await gql_client.execute(self.CREATE_CHAT_PROMPT_VERSION_MUTATION, variables)
         assert len(result.errors) == 1
         assert result.data is None
+
+    @pytest.mark.parametrize(
+        "variables, initial_prompt_variables",
+        [
+            pytest.param(
+                {
+                    "input": {
+                        "name": "prompt-name (copy)",
+                        "description": "new prompt-description",
+                        "promptId": str(GlobalID("Prompt", "1")),
+                    }
+                },
+                {
+                    "input": {
+                        "name": "prompt-name",
+                        "description": "prompt-description",
+                        "promptVersion": {
+                            "description": "initial-version",
+                            "templateType": "CHAT",
+                            "templateFormat": "MUSTACHE",
+                            "template": {"messages": [{"role": "USER", "content": "initial"}]},
+                            "invocationParameters": {"temperature": 0.4},
+                            "modelProvider": "openai",
+                            "modelName": "o1-mini",
+                        },
+                    }
+                },
+                id="with-valid-input",
+            ),
+        ],
+    )
+    async def test_clone_prompt_succeeds_with_valid_input(
+        self,
+        db: DbSessionFactory,
+        gql_client: AsyncGraphQLClient,
+        variables: dict[str, Any],
+        initial_prompt_variables: dict[str, Any],
+    ) -> None:
+        # create initial prompt
+        create_prompt_result = await gql_client.execute(
+            self.CREATE_CHAT_PROMPT_MUTATION, initial_prompt_variables
+        )
+        assert not create_prompt_result.errors
+        assert create_prompt_result.data is not None
+
+        # clone prompt
+        result = await gql_client.execute(self.CLONE_PROMPT_MUTATION, variables)
+
+        created_prompt = create_prompt_result.data["createChatPrompt"]
+        created_prompt_version = created_prompt["promptVersions"]["edges"][0]["promptVersion"]
+
+        # assert prompt and prompt versions were cloned
+        # prompt id, prompt version ids, dates, should be different
+        # everything else should be the same
+        assert result.data is not None
+        data = result.data["clonePrompt"]
+        assert data.pop("id") != created_prompt["id"]
+        assert data.pop("name") != created_prompt["name"]
+        assert data.pop("createdAt") is not None
+        assert data.pop("description") != created_prompt["description"]
+        cloned_prompt_version = data["promptVersions"]["edges"][0].pop("promptVersion")
+        assert cloned_prompt_version.pop("id") != created_prompt_version["id"]
+        assert cloned_prompt_version.pop("description") == created_prompt_version["description"]
+        assert cloned_prompt_version.pop("createdAt") is not None
+        assert cloned_prompt_version.pop("user") is None
+        assert cloned_prompt_version.pop("templateType") == created_prompt_version["templateType"]
+        assert (
+            cloned_prompt_version.pop("templateFormat") == created_prompt_version["templateFormat"]
+        )
+        assert (
+            cloned_prompt_version.pop("invocationParameters")
+            == created_prompt_version["invocationParameters"]
+        )
+        assert cloned_prompt_version.pop("modelProvider") == created_prompt_version["modelProvider"]
+        assert cloned_prompt_version.pop("modelName") == created_prompt_version["modelName"]
+        assert cloned_prompt_version.pop("template") == created_prompt_version["template"]
+        assert cloned_prompt_version.pop("tools") == created_prompt_version["tools"]
+        assert cloned_prompt_version.pop("outputSchema") == created_prompt_version["outputSchema"]
+        assert not data["promptVersions"]["edges"][0]
+        assert not cloned_prompt_version
+        assert data.pop("promptVersions") is not None
+        assert not data
+
+    @pytest.mark.parametrize(
+        "variables, initial_prompt_variables",
+        [
+            pytest.param(
+                {
+                    "input": {
+                        "name": "prompt-name",
+                        "description": "new prompt-description",
+                        "promptId": str(GlobalID("Prompt", "1")),
+                    }
+                },
+                {
+                    "input": {
+                        "name": "prompt-name",
+                        "description": "prompt-description",
+                        "promptVersion": {
+                            "description": "initial-version",
+                            "templateType": "CHAT",
+                            "templateFormat": "MUSTACHE",
+                            "template": {"messages": [{"role": "USER", "content": "initial"}]},
+                            "invocationParameters": {"temperature": 0.4},
+                            "modelProvider": "openai",
+                            "modelName": "o1-mini",
+                        },
+                    }
+                },
+                id="with-duplicate-name",
+            ),
+        ],
+    )
+    async def test_clone_prompt_fails_with_duplicate_name(
+        self,
+        db: DbSessionFactory,
+        gql_client: AsyncGraphQLClient,
+        variables: dict[str, Any],
+        initial_prompt_variables: dict[str, Any],
+    ) -> None:
+        # create initial prompt
+        create_prompt_result = await gql_client.execute(
+            self.CREATE_CHAT_PROMPT_MUTATION, initial_prompt_variables
+        )
+        assert not create_prompt_result.errors
+
+        # clone prompt
+        result = await gql_client.execute(self.CLONE_PROMPT_MUTATION, variables)
+        assert len(result.errors) == 1
+        assert (
+            f"A prompt named '{variables['input']['name']}' already exists"
+            in result.errors[0].message
+        )
+        assert result.data is None