[FEAT] Prompt Studio Public Share & Clone

backend/backend/public_urls.py

@@ -22,6 +22,7 @@
 
 path_prefix = settings.PATH_PREFIX
 api_path_prefix = settings.API_DEPLOYMENT_PATH_PREFIX
+share_path_prefix = settings.PUBLIC_PATH_PREFIX
 
 urlpatterns = [
     path(f"{path_prefix}/", include("account.urls")),
@@ -47,10 +48,16 @@
 
 
 try:
-    import pluggable_apps.platform_admin.urls  # noqa: F401
+    import pluggable_apps.platform_admin.urls  # noqa # pylint: disable=unused-import
+    import pluggable_apps.public_shares_share_controller.urls  # noqa # pylint: disable=unused-import
 
     urlpatterns += [
         path(f"{path_prefix}/", include("pluggable_apps.platform_admin.urls")),
+        # Public Sharing
+        path(
+            f"{share_path_prefix}/",
+            include("pluggable_apps.public_shares.share_controller.urls"),
+        ),
     ]
 except ImportError:
     pass

backend/backend/urls.py

@@ -84,7 +84,7 @@
 # Subscription urls
 try:
 
-    import pluggable_apps.subscription.urls  # noqa # pylint: disable=unused-import
+    import pluggable_apps.subscription.urls  # noqa  # pylint: disable=unused-import
 
     urlpatterns += [
         path("", include("pluggable_apps.subscription.urls")),
@@ -93,10 +93,32 @@
     pass
 
 try:
-    import pluggable_apps.manual_review.urls  # noqa: F401
+    import pluggable_apps.manual_review.urls  # noqa # pylint: disable=unused-import
 
     urlpatterns += [
         path("manual_review/", include("pluggable_apps.manual_review.urls")),
     ]
 except ImportError:
     pass
+
+# Public share urls
+try:
+
+    import pluggable_apps.public_shares.share_manager.urls  # noqa # pylint: disable=unused-import
+
+    urlpatterns += [
+        path("", include("pluggable_apps.public_shares.share_manager.urls")),
+    ]
+except ImportError:
+    pass
+
+# Clone urls
+try:
+
+    import pluggable_apps.clone.urls  # noqa # pylint: disable=unused-import
+
+    urlpatterns += [
+        path("", include("pluggable_apps.clone.urls")),
+    ]
+except ImportError:
+    pass

frontend/src/components/custom-tools/combined-output/CombinedOutput.jsx

@@ -135,7 +135,6 @@ function CombinedOutput({ docId, setFilledFields }) {
         "X-CSRFToken": sessionDetails?.csrfToken,
       },
     };
-
     return axiosPrivate(requestOptions)
       .then((res) => res)
       .catch((err) => {

frontend/src/components/custom-tools/custom-synonyms/CustomSynonyms.jsx

@@ -37,7 +37,7 @@ function CustomSynonyms() {
   const [rows, setRows] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const { sessionDetails } = useSessionStore();
-  const { details, updateCustomTool } = useCustomToolStore();
+  const { details, updateCustomTool, isPublicSource } = useCustomToolStore();
   const { setAlertDetails } = useAlertStore();
   const axiosPrivate = useAxiosPrivate();
   const handleException = useExceptionHandler();
@@ -96,7 +96,7 @@ function CustomSynonyms() {
             handleConfirm={() => handleDelete(index)}
             content="The word, along with its corresponding synonyms, will be permanently deleted."
           >
-            <Button size="small" type="text">
+            <Button size="small" disabled={isPublicSource} type="text">
               <DeleteOutlined className="cus-syn-del" />
             </Button>
           </ConfirmModal>
@@ -213,6 +213,7 @@ function CustomSynonyms() {
             type="primary"
             icon={<PlusOutlined />}
             onClick={handleAddRow}
+            disabled={isPublicSource}
           >
             Rows
           </CustomButton>
@@ -223,6 +224,7 @@ function CustomSynonyms() {
               type="primary"
               onClick={handleSave}
               loading={isLoading}
+              disabled={isPublicSource}
             >
               Save
             </CustomButton>

frontend/src/components/custom-tools/document-manager/DocumentManager.jsx

@@ -21,6 +21,7 @@ import { ManageDocsModal } from "../manage-docs-modal/ManageDocsModal";
 import { PdfViewer } from "../pdf-viewer/PdfViewer";
 import { TextViewerPre } from "../text-viewer-pre/TextViewerPre";
 import usePostHogEvents from "../../../hooks/usePostHogEvents";
+import { useParams } from "react-router-dom";
 
 const items = [
   {
@@ -63,7 +64,13 @@ try {
 } catch {
   // The component will remain null of it is not available
 }
-
+let publicDocumentApi;
+try {
+  publicDocumentApi =
+    require("../../../plugins/prompt-studio-public-share/helpers/PublicShareAPIs").publicDocumentApi;
+} catch {
+  // The component will remain null of it is not available
+}
 function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
   const [openManageDocsModal, setOpenManageDocsModal] = useState(false);
   const [page, setPage] = useState(1);
@@ -85,10 +92,12 @@ function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
     indexDocs,
     isSinglePassExtractLoading,
     isSimplePromptStudio,
+    isPublicSource,
   } = useCustomToolStore();
   const { sessionDetails } = useSessionStore();
   const axiosPrivate = useAxiosPrivate();
   const { setPostHogCustomEvent } = usePostHogEvents();
+  const { id } = useParams();
 
   useEffect(() => {
     if (isSimplePromptStudio) {
@@ -186,15 +195,36 @@ function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
   };
 
   const getDocuments = async (viewType) => {
+    let url = `/api/v1/unstract/${sessionDetails?.orgId}/prompt-studio/file/${details?.tool_id}?document_id=${selectedDoc?.document_id}&view_type=${viewType}`;
+    if (isPublicSource) {
+      url = publicDocumentApi(id, selectedDoc?.document_id, viewType);
+    }
     const requestOptions = {
+      url,
       method: "GET",
-      url: `/api/v1/unstract/${sessionDetails?.orgId}/prompt-studio/file/${details?.tool_id}?document_id=${selectedDoc?.document_id}&view_type=${viewType}`,
     };
-
-    return axiosPrivate(requestOptions)
-      .then((res) => res)
+    handleLoadingStateUpdate(viewType, true);
+    axiosPrivate(requestOptions)
+      .then((res) => {
+        const data = res?.data?.data;
+        if (viewType === viewTypes.original) {
+          const base64String = data || "";
+          const blob = base64toBlob(base64String);
+          setFileUrl(URL.createObjectURL(blob));
+          return;
+        }
+
+        if (viewType === viewTypes?.extract) {
+          setExtractTxt(data);
+        }
+      })
       .catch((err) => {
-        throw err;
+        if (err?.response?.status === 404) {
+          setErrorMessage(viewType);
+        }
+      })
+      .finally(() => {
+        handleLoadingStateUpdate(viewType, false);
       });
   };
 

frontend/src/components/custom-tools/editable-text/EditableText.jsx

@@ -25,6 +25,7 @@ function EditableText({
     indexDocs,
     selectedDoc,
     isSinglePassExtractLoading,
+    isPublicSource,
   } = useCustomToolStore();
 
   useEffect(() => {
@@ -90,7 +91,9 @@ function EditableText({
         onBlur={handleBlur}
         onClick={() => setIsEditing(true)}
         disabled={
-          disableLlmOrDocChange.includes(promptId) || isSinglePassExtractLoading
+          disableLlmOrDocChange.includes(promptId) ||
+          isSinglePassExtractLoading ||
+          isPublicSource
         }
       />
     );
@@ -114,7 +117,8 @@ function EditableText({
       disabled={
         disableLlmOrDocChange.includes(promptId) ||
         indexDocs.includes(selectedDoc?.document_id) ||
-        isSinglePassExtractLoading
+        isSinglePassExtractLoading ||
+        isPublicSource
       }
     />
   );

frontend/src/components/custom-tools/header-title/HeaderTitle.css

@@ -0,0 +1,12 @@
+.custom-tools-name {
+    padding: 0px 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left:auto;
+}
+.custom-tools-header {
+    display: flex;
+    justify-content: space-between;
+    margin-right: auto;
+}

frontend/src/components/custom-tools/header-title/HeaderTitle.jsx

@@ -0,0 +1,34 @@
+import { ArrowLeftOutlined, EditOutlined } from "@ant-design/icons";
+import { Button, Typography } from "antd";
+import { useNavigate } from "react-router-dom";
+
+import { useCustomToolStore } from "../../../store/custom-tool-store";
+import { useSessionStore } from "../../../store/session-store";
+import "./HeaderTitle.css";
+
+function HeaderTitle() {
+  const navigate = useNavigate();
+  const { details } = useCustomToolStore();
+  const { sessionDetails } = useSessionStore();
+
+  return (
+    <div className="custom-tools-header">
+      <div>
+        <Button
+          size="small"
+          type="text"
+          onClick={() => navigate(`/${sessionDetails?.orgName}/tools`)}
+        >
+          <ArrowLeftOutlined />
+        </Button>
+      </div>
+      <div className="custom-tools-name">
+        <Typography.Text strong>{details?.tool_name}</Typography.Text>
+        <Button size="small" type="text" disabled>
+          <EditOutlined />
+        </Button>
+      </div>
+    </div>
+  );
+}
+export { HeaderTitle };

frontend/src/components/custom-tools/header/Header.jsx

@@ -1,14 +1,9 @@
-import {
-  ArrowLeftOutlined,
-  EditOutlined,
-  SettingOutlined,
-} from "@ant-design/icons";
+import { SettingOutlined } from "@ant-design/icons";
 import { Button, Tooltip, Typography } from "antd";
 import PropTypes from "prop-types";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import "./Header.css";
 
+import { HeaderTitle } from "../header-title/HeaderTitle.jsx";
 import { ExportToolIcon } from "../../../assets";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
@@ -18,21 +13,36 @@ import { useSessionStore } from "../../../store/session-store";
 import { CustomButton } from "../../widgets/custom-button/CustomButton";
 import { ExportTool } from "../export-tool/ExportTool";
 import usePostHogEvents from "../../../hooks/usePostHogEvents";
+import "./Header.css";
 
 let SinglePassToggleSwitch;
+let CloneButton;
+let PromptShareButton;
 try {
   SinglePassToggleSwitch =
     require("../../../plugins/single-pass-toggle-switch/SinglePassToggleSwitch").SinglePassToggleSwitch;
 } catch {
   // The variable will remain undefined if the component is not available.
 }
-function Header({ setOpenSettings, handleUpdateTool }) {
+try {
+  PromptShareButton =
+    require("../../../plugins/prompt-studio-public-share/public-share-btn/PromptShareButton.jsx").PromptShareButton;
+  CloneButton =
+    require("../../../plugins/prompt-studio-clone/clone-btn/CloneButton.jsx").CloneButton;
+} catch {
+  // The variable will remain undefined if the component is not available.
+}
+function Header({
+  setOpenSettings,
+  handleUpdateTool,
+  setOpenShareModal,
+  setOpenCloneModal,
+}) {
   const [isExportLoading, setIsExportLoading] = useState(false);
-  const { details } = useCustomToolStore();
+  const { details, isPublicSource } = useCustomToolStore();
   const { sessionDetails } = useSessionStore();
   const { setAlertDetails } = useAlertStore();
   const axiosPrivate = useAxiosPrivate();
-  const navigate = useNavigate();
   const handleException = useExceptionHandler();
   const [userList, setUserList] = useState([]);
   const [openExportToolModal, setOpenExportToolModal] = useState(false);
@@ -138,23 +148,15 @@ function Header({ setOpenSettings, handleUpdateTool }) {
 
   return (
     <div className="custom-tools-header-layout">
-      <div>
-        <Button
-          size="small"
-          type="text"
-          onClick={() => navigate(`/${sessionDetails?.orgName}/tools`)}
-        >
-          <ArrowLeftOutlined />
-        </Button>
-      </div>
-      <div className="custom-tools-name">
-        <Typography.Text strong>{details?.tool_name}</Typography.Text>
-      </div>
-      <div>
-        <Button size="small" type="text" disabled>
-          <EditOutlined />
-        </Button>
-      </div>
+      {isPublicSource ? (
+        <div>
+          <Typography.Text className="custom-tools-name" strong>
+            {details?.tool_name}
+          </Typography.Text>
+        </div>
+      ) : (
+        <HeaderTitle />
+      )}
       <div className="custom-tools-header-btns">
         {SinglePassToggleSwitch && (
           <SinglePassToggleSwitch handleUpdateTool={handleUpdateTool} />
@@ -167,13 +169,18 @@ function Header({ setOpenSettings, handleUpdateTool }) {
             />
           </Tooltip>
         </div>
+        {CloneButton && <CloneButton setOpenCloneModal={setOpenCloneModal} />}
+        {PromptShareButton && (
+          <PromptShareButton setOpenShareModal={setOpenShareModal} />
+        )}
         <div className="custom-tools-header-v-divider" />
         <div>
           <Tooltip title="Export as tool">
             <CustomButton
               type="primary"
               onClick={() => handleShare(true)}
               loading={isExportLoading}
+              disabled={isPublicSource}
             >
               <ExportToolIcon />
             </CustomButton>
@@ -195,6 +202,8 @@ function Header({ setOpenSettings, handleUpdateTool }) {
 Header.propTypes = {
   setOpenSettings: PropTypes.func.isRequired,
   handleUpdateTool: PropTypes.func.isRequired,
+  setOpenCloneModal: PropTypes.func.isRequired,
+  setOpenShareModal: PropTypes.func.isRequired,
 };
 
 export { Header };