feat(requests): add dismissible warning for stream_usage missing

Helicone · Jul 7, 2024 · 43c431b · 43c431b
1 parent 9186e86
commit 43c431b
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/web/components/templates/requestsV2/requestsPageV2.tsx b/web/components/templates/requestsV2/requestsPageV2.tsx
@@ -234,6 +234,8 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
     );
   });
 
+  const [isWarningHidden, setIsWarningHidden] = useLocalStorage("isStreamWarningHidden", false);
+
   useEffect(() => {
     if (initialRequestId && selectedData === undefined) {
       const fetchRequest = async () => {
@@ -581,8 +583,8 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
 
   return (
     <div>
-      {requestWithoutStream && (
-        <div className="alert alert-warning">
+      {requestWithoutStream && !isWarningHidden && (
+        <div className="alert alert-warning flex justify-between items-center">
           <p className="text-yellow-800">
             We are unable to calculate your cost accurately because the
             &#39;stream_usage&#39; option is not included in your message.
@@ -595,6 +597,19 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
             </a>{" "}
             for more information.
           </p>
+          <button
+            onClick={() => setIsWarningHidden(true)}
+            className="text-yellow-800 hover:text-yellow-900"
+          >
+            <span className="sr-only">Close</span>
+            <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
         </div>
       )}
       {!isCached && userId === undefined && (