FIX: Prompt Card UI Fixes (#323)

* fixed color of run button when disabled * UI fixes in prompt card * Tag ellipsis implementation in document manager --------- Co-authored-by: jagadeeswaran-zipstack <jagadeeswaran@zipstack.com> Co-authored-by: Neha <115609453+nehabagdia@users.noreply.github.com>
Zipstack · May 8, 2024 · c163a3f · c163a3f
1 parent d9fd735
commit c163a3f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx b/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx
@@ -113,7 +113,13 @@ function ManageDocsModal({
       return;
     }
 
-    return <Tag color={color}>{indexMessage?.message}</Tag>;
+    return (
+      <Tooltip title={indexMessage?.message || ""}>
+        <Tag color={color}>
+          <div className="tag-max-width ellipsis">{indexMessage?.message}</div>
+        </Tag>
+      </Tooltip>
+    );
   };
 
   const failedSummary = (
@@ -384,7 +390,9 @@ function ManageDocsModal({
                 </Tooltip>
               )}
             </div>
-            <div>{infoIndex(indexMessages?.[item?.document_name])}</div>
+            <div className="center">
+              {infoIndex(indexMessages?.[item?.document_name])}
+            </div>
           </Space>
         ),
         delete: (

diff --git a/frontend/src/components/custom-tools/prompt-card/PromptCard.css b/frontend/src/components/custom-tools/prompt-card/PromptCard.css
@@ -121,3 +121,7 @@
 .prompt-card-action-button.ant-btn-text:disabled > .assertion-icon > path {
   fill: rgba(0, 0, 0, 0.25);
 }
+
+.tag-max-width {
+  max-width: 150px;
+}
diff --git a/frontend/src/components/custom-tools/prompt-card/PromptCard.jsx b/frontend/src/components/custom-tools/prompt-card/PromptCard.jsx
@@ -647,15 +647,21 @@ function PromptCard({
                 </Col>
                 <Col span={12} className="display-flex-right">
                   {progressMsg?.message && (
-                    <Tag
-                      icon={isCoverageLoading && <LoadingOutlined spin />}
-                      color={
-                        progressMsg?.level === "ERROR" ? "error" : "processing"
-                      }
-                      className="display-flex-align-center"
-                    >
-                      {progressMsg?.message}
-                    </Tag>
+                    <Tooltip title={progressMsg?.message || ""}>
+                      <Tag
+                        icon={isCoverageLoading && <LoadingOutlined spin />}
+                        color={
+                          progressMsg?.level === "ERROR"
+                            ? "error"
+                            : "processing"
+                        }
+                        className="display-flex-align-center"
+                      >
+                        <div className="tag-max-width ellipsis">
+                          {progressMsg?.message}
+                        </div>
+                      </Tag>
+                    </Tooltip>
                   )}
                   {updateStatus?.promptId === promptDetails?.prompt_id && (
                     <>
@@ -731,9 +737,7 @@ function PromptCard({
                             promptDetails?.prompt_id &&
                             updateStatus?.status ===
                               promptStudioUpdateStatus.isUpdating) ||
-                          disableLlmOrDocChange.includes(
-                            promptDetails?.prompt_id
-                          ) ||
+                          disableLlmOrDocChange?.length > 0 ||
                           indexDocs.includes(selectedDoc?.document_id)
                         }
                       >

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -131,3 +131,9 @@ body {
   font-size: 16px;
   font-weight: bold;
 }
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}