From a3e0f3d4f4232968d74c92c226cfdda43426f3ba Mon Sep 17 00:00:00 2001
From: jagadeeswaran-zipstack <jagadeeswaran@zipstack.com>
Date: Thu, 5 Sep 2024 00:45:24 +0530
Subject: [PATCH 1/2] added disabled view for disabled prompts

---
 .../src/components/custom-tools/prompt-card/PromptCard.css | 7 ++++++-
 .../custom-tools/prompt-card/PromptCardItems.jsx           | 4 +++-
 .../components/custom-tools/prompt-card/PromptOutput.jsx   | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/custom-tools/prompt-card/PromptCard.css b/frontend/src/components/custom-tools/prompt-card/PromptCard.css
index 2203e2200..05249bd7a 100644
--- a/frontend/src/components/custom-tools/prompt-card/PromptCard.css
+++ b/frontend/src/components/custom-tools/prompt-card/PromptCard.css
@@ -218,10 +218,15 @@
 }
 
 .prompt-output-llm-bg {
-  background-color: #DDDDDD;
+  background-color: #dddddd;
   padding: 10px;
 }
 
 .prompt-output-title {
   font-size: 18px;
 }
+
+.card-disabled {
+  opacity: 0.7;
+  filter: grayscale(100%);
+}
diff --git a/frontend/src/components/custom-tools/prompt-card/PromptCardItems.jsx b/frontend/src/components/custom-tools/prompt-card/PromptCardItems.jsx
index b57b2748b..587b0eb79 100644
--- a/frontend/src/components/custom-tools/prompt-card/PromptCardItems.jsx
+++ b/frontend/src/components/custom-tools/prompt-card/PromptCardItems.jsx
@@ -164,7 +164,9 @@ function PromptCardItems({
   }, [llmProfiles, selectedLlmProfileId, enabledProfiles]);
 
   return (
-    <Card className="prompt-card">
+    <Card
+      className={`prompt-card ${!promptDetails?.active && "card-disabled"}`}
+    >
       <div className="prompt-card-div prompt-card-bg-col1 prompt-card-rad">
         <Space direction="vertical" className="width-100" ref={divRef}>
           <Header
diff --git a/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx b/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx
index 936f10509..3e4739238 100644
--- a/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx
+++ b/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx
@@ -123,7 +123,7 @@ function PromptOutput({
 
   if (
     (singlePassExtractMode || isSimplePromptStudio) &&
-    (promptDetails?.active || isSimplePromptStudio) &&
+    isSimplePromptStudio &&
     (firstResult?.output ||
       firstResult?.output === 0 ||
       spsLoading[selectedDoc?.document_id])

From d2fae147ddf7e5e3b4723385023b287b6eb79197 Mon Sep 17 00:00:00 2001
From: jagadeeswaran-zipstack <jagadeeswaran@zipstack.com>
Date: Thu, 5 Sep 2024 10:39:17 +0530
Subject: [PATCH 2/2] formatted seconds to min-sec

---
 .../custom-tools/prompt-card/PromptOutput.jsx  |  3 ++-
 frontend/src/helpers/GetStaticData.js          | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx b/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx
index 3e4739238..625307219 100644
--- a/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx
+++ b/frontend/src/components/custom-tools/prompt-card/PromptOutput.jsx
@@ -25,6 +25,7 @@ import CheckableTag from "antd/es/tag/CheckableTag";
 import {
   displayPromptResult,
   formatNumberWithCommas,
+  formatTimeMinuteSeconds,
   getFormattedTotalCost,
 } from "../../../helpers/GetStaticData";
 import { SpinnerLoader } from "../../widgets/spinner-loader/SpinnerLoader";
@@ -211,7 +212,7 @@ function PromptOutput({
                     </Typography.Text>
                     <Typography.Text className="prompt-cost-item">
                       Time:
-                      {timers[tokenUsageId] || 0}s
+                      {formatTimeMinuteSeconds(timers[tokenUsageId]) || 0}
                     </Typography.Text>
                     <Typography.Text className="prompt-cost-item">
                       Cost: $
diff --git a/frontend/src/helpers/GetStaticData.js b/frontend/src/helpers/GetStaticData.js
index f0a0fe0a0..aa9364ced 100644
--- a/frontend/src/helpers/GetStaticData.js
+++ b/frontend/src/helpers/GetStaticData.js
@@ -518,6 +518,23 @@ const formatNumberWithCommas = (number) => {
     : formattedIntegerPart;
 };
 
+// utils/formatTime.js
+const formatTimeMinuteSeconds = (seconds) => {
+  if (!seconds) {
+    return `0s`;
+  }
+
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  // Pad single-digit seconds with leading zero
+  const formattedSeconds = secs < 10 ? `0${secs}` : secs;
+
+  if (seconds < 60) {
+    return `${formattedSeconds}s`;
+  }
+  return `${mins}m ${formattedSeconds}s`;
+};
+
 export {
   CONNECTOR_TYPE_MAP,
   O_AUTH_PROVIDERS,
@@ -563,4 +580,5 @@ export {
   getDocIdFromKey,
   displayURL,
   formatNumberWithCommas,
+  formatTimeMinuteSeconds,
 };