Fix/prompt-studio-UI {Adding new suggestions}

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

@@ -32,4 +32,9 @@
 
 .rpv-default-layout__container {
     border: 0 !important;
-}
+}
+
+.doc-main-title{
+    color: darkgray;
+    font-weight: 600;
+}

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

@@ -171,15 +171,20 @@ function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
           />
         </div>
         <Space>
+          <div>
+            {selectedDoc ? (
+              <Typography.Text className="doc-main-title" ellipsis>
+                {selectedDoc}
+              </Typography.Text>
+            ) : null}
+          </div>
           <div>
             <Tooltip title="Manage Documents">
               <Button
                 className="doc-manager-btn"
                 onClick={() => setOpenManageDocsModal(true)}
               >
-                <Typography.Text ellipsis>
-                  {selectedDoc || "No Document Selected"}
-                </Typography.Text>
+                <Typography.Text ellipsis>{"Manage Documents"}</Typography.Text>
               </Button>
             </Tooltip>
           </div>

frontend/src/components/custom-tools/document-parser/DocumentParser.jsx

@@ -57,9 +57,27 @@ function DocumentParser({
       value = event.target.value;
     }
 
-    if (!value && name === "prompt_key") {
+    if (name === "prompt_key") {
       // Return if the prompt or the prompt key is empty
-      return;
+      if (!value) {
+        return;
+      }
+      if (!isValidJsonKey(value)) {
+        handleUpdateStatus(
+          isUpdateStatus,
+          promptId,
+          promptStudioUpdateStatus.validationError
+        );
+        return;
+      }
+    }
+
+    function isValidJsonKey(key) {
+      // Check for Prompt-Key
+      // Allowed case, contains alphanumeric characters and underscores,
+      // and doesn't start with a number.
+      const regex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+      return regex.test(key);
     }
 
     const index = promptsAndNotes.findIndex(
@@ -149,7 +167,6 @@ function DocumentParser({
     if (!isUpdate) {
       return;
     }
-
     setUpdateStatus({
       promptId: promptId,
       status: value,

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

@@ -14,4 +14,8 @@
 .edit-text-display-hover:hover {
     border: 1px solid #bdbdbd;
     border-radius: 4px;
-}
+}
+
+.input-header-text {
+    font-weight: bold;
+}

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

@@ -5,7 +5,6 @@ import debounce from "lodash/debounce";
 
 import "./EditableText.css";
 import { useCustomToolStore } from "../../../store/custom-tool-store";
-
 function EditableText({
   isEditing,
   setIsEditing,
@@ -92,7 +91,7 @@ function EditableText({
 
   return (
     <Input
-      className="font-size-12 width-100"
+      className="font-size-14 width-100 input-header-text"
       value={text}
       onChange={handleTextChange}
       placeholder="Enter Key"

frontend/src/components/custom-tools/prompt-card/PromptCard.css

@@ -70,7 +70,7 @@
 }
 
 .prompt-card-result {
-    padding-top: 12px;  
+    padding-top: 12px;
     background-color: #FFF8E6;
     border-radius: 0px 0px 8px 8px;
 }
@@ -112,4 +112,4 @@
 
 .assertion-comp .ant-collapse-content-box {
     padding: 0px !important;
-}
+}

frontend/src/components/custom-tools/prompt-card/PromptCard.jsx

@@ -610,7 +610,7 @@ function PromptCard({
           >
             <Space direction="vertical" className="width-100" ref={divRef}>
               <Row>
-                <Col span={16}>
+                <Col span={12}>
                   <EditableText
                     isEditing={isEditingTitle}
                     setIsEditing={setIsEditingTitle}
@@ -622,7 +622,7 @@ function PromptCard({
                     placeHolder={updatePlaceHolder}
                   />
                 </Col>
-                <Col span={8} className="display-flex-right">
+                <Col span={12} className="display-flex-right">
                   {isCoverageLoading && (
                     <Tag
                       icon={<LoadingOutlined spin />}
@@ -654,6 +654,16 @@ function PromptCard({
                           Done
                         </Tag>
                       )}
+                      {updateStatus?.status ===
+                        promptStudioUpdateStatus.validationError && (
+                        <Tag
+                          icon={<CheckCircleOutlined />}
+                          color="error"
+                          className="display-flex-align-center"
+                        >
+                          Invalid JSON Key
+                        </Tag>
+                      )}
                     </>
                   )}
                   <Tooltip title="Edit">

frontend/src/helpers/GetStaticData.js

@@ -230,6 +230,7 @@ const endpointType = {
 const promptStudioUpdateStatus = {
   isUpdating: "IS_UPDATING",
   done: "DONE",
+  validationError: "VALIDATION_ERROR",
 };
 
 const getTimeForLogs = () => {