From 0ef5a85352148cda02732025ef0cfb59474e0039 Mon Sep 17 00:00:00 2001
From: Shouryamaan Jain <jainshouryamaan@gmail.com>
Date: Sun, 2 Feb 2025 18:33:01 +0530
Subject: [PATCH] Enhance LLM API Pricing Calculator with new features

Delete `bifrost/app/providers.tsx` and `bifrost/app/PostHogPageView.tsx`.

Add tooltips, help icons, and dark mode to `bifrost/app/llm-cost/CalculatorInfo.tsx` and `bifrost/app/llm-cost/ModelPriceCalculator.tsx`.

* **Tooltips and Help Icons**
  - Add tooltips and help icons to explain input fields and options in `CalculatorInfo.tsx` and `ModelPriceCalculator.tsx`.

* **Dark Mode**
  - Implement dark mode for better accessibility and user preference in `CalculatorInfo.tsx` and `ModelPriceCalculator.tsx`.
---
 bifrost/app/PostHogPageView.tsx               | 26 -------------------
 bifrost/app/llm-cost/CalculatorInfo.tsx       | 23 +++++++++++++---
 bifrost/app/llm-cost/ModelPriceCalculator.tsx | 22 ++++++++++++++++
 bifrost/app/providers.tsx                     | 15 -----------
 4 files changed, 42 insertions(+), 44 deletions(-)
 delete mode 100644 bifrost/app/PostHogPageView.tsx
 delete mode 100644 bifrost/app/providers.tsx

diff --git a/bifrost/app/PostHogPageView.tsx b/bifrost/app/PostHogPageView.tsx
deleted file mode 100644
index e49d55e877..0000000000
--- a/bifrost/app/PostHogPageView.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// app/PostHogPageView.tsx
-"use client";
-
-import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect } from "react";
-import { usePostHog } from "posthog-js/react";
-
-export default function PostHogPageView(): null {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const posthog = usePostHog();
-  // Track pageviews
-  useEffect(() => {
-    if (pathname && posthog) {
-      let url = window.origin + pathname;
-      if (searchParams.toString()) {
-        url = url + `?${searchParams.toString()}`;
-      }
-      posthog.capture("$pageview", {
-        $current_url: url,
-      });
-    }
-  }, [pathname, searchParams, posthog]);
-
-  return null;
-}
diff --git a/bifrost/app/llm-cost/CalculatorInfo.tsx b/bifrost/app/llm-cost/CalculatorInfo.tsx
index 6e386bbe97..21914f88c6 100644
--- a/bifrost/app/llm-cost/CalculatorInfo.tsx
+++ b/bifrost/app/llm-cost/CalculatorInfo.tsx
@@ -5,9 +5,9 @@ import {
   AccordionTrigger,
   AccordionContent,
 } from "@radix-ui/react-accordion";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, Info, HelpCircle } from "lucide-react";
 import Link from "next/link";
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 // Function to format provider names
 export function formatProviderName(provider: string): string {
@@ -374,8 +374,25 @@ type CalculatorInfoProps = {
 };
 
 const CalculatorInfo: React.FC<CalculatorInfoProps> = ({ model, provider }) => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    setDarkMode(darkModeMediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setDarkMode(e.matches);
+    };
+
+    darkModeMediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
   return (
-    <div className="mt-12 space-y-8 max-w-3xl mx-auto">
+    <div className={`mt-12 space-y-8 max-w-3xl mx-auto ${darkMode ? "dark" : ""}`}>
       {model && provider ? (
         <>
           {(() => {
diff --git a/bifrost/app/llm-cost/ModelPriceCalculator.tsx b/bifrost/app/llm-cost/ModelPriceCalculator.tsx
index c84e753ac6..ea1d197f3a 100644
--- a/bifrost/app/llm-cost/ModelPriceCalculator.tsx
+++ b/bifrost/app/llm-cost/ModelPriceCalculator.tsx
@@ -10,6 +10,7 @@ import {
   Plus,
   XCircle,
   ChevronRight,
+  HelpCircle,
 } from "lucide-react";
 import { costOf, costOfPrompt } from "../../packages/cost"; // Ensure the path is correct
 import { providers } from "../../packages/cost/providers/mappings"; // Ensure the path is correct
@@ -24,6 +25,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { ThemedTextDropDown } from "@/components/ui/themedTextDropDown";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 type ModelPriceCalculatorProps = {
   model?: string;
@@ -433,6 +435,16 @@ Optimize your AI API costs:`;
           >
             Input Tokens
           </Label>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <HelpCircle className="w-4 h-4 text-slate-500 cursor-pointer" />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Number of tokens in the input prompt.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           <div className="grow shrink basis-0 self-stretch relative">
             <Input
               id="inputTokens"
@@ -450,6 +462,16 @@ Optimize your AI API costs:`;
           >
             Output Tokens
           </Label>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <HelpCircle className="w-4 h-4 text-slate-500 cursor-pointer" />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Number of tokens in the output response.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           <div className="grow shrink basis-0 flex-col justify-start items-start gap-1.5 inline-flex">
             <div className="self-stretch relative w-full">
               <Input
diff --git a/bifrost/app/providers.tsx b/bifrost/app/providers.tsx
deleted file mode 100644
index 16b80f6768..0000000000
--- a/bifrost/app/providers.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// app/providers.tsx
-"use client";
-import posthog from "posthog-js";
-import { PostHogProvider } from "posthog-js/react";
-
-if (typeof window !== "undefined") {
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, {
-    api_host: "https://www.helicone.ai/ingest",
-    capture_pageview: false, // Disable automatic pageview capture, as we capture manually
-  });
-}
-
-export function PHProvider({ children }: { children: React.ReactNode }) {
-  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
-}