Enhance LLM API Pricing Calculator with new features #3197
Conversation
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`.
|
@shouryamaanjain is attempting to deploy a commit to the Helicone Team on Vercel. A member of the Team first needs to authorize it. |
Summary
🔍 Fume is reviewing this PR! 🔗 Track the review progress here: |
|
bifrost/app/layout.tsx line 14 import { PHProvider } from "./providers";
import dynamic from "next/dynamic";
import Script from "next/script";
import Head from "next/head";
import { Layout } from "./components/Layout";
const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
ssr: false,
});
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {The PR suggests deleting PostHogPageView.tsx but it is still being used here. Please provide an alternative implementation for PostHog tracking before deletion. |
![fumedev[bot]](https://avatars.githubusercontent.com/in/662476?s=60&v=4){kind=small}
| @@ -433,6 +435,16 @@ Optimize your AI API costs:`; | |||
| > | |||
There was a problem hiding this comment.
Tooltip implementation needs to be completed for provider selection, model selection, cost breakdown sections, and share/contribution buttons. Additionally, ARIA labels for help icons and keyboard navigation for tooltips should be implemented for better accessibility.
|
bifrost/app/llm-cost/ModelPriceCalculator.tsx line 758 </div>
<CalculatorInfo model={model} provider={provider} />
</div>
);
}Add tooltips for: 1. Provider/Model filters 2. Sort buttons 3. Share button 4. Cost breakdown sections |
|
bifrost/app/llm-cost/CalculatorInfo.tsx line 756 </p>
</div>
</div>
</section>
<section className="bg-white p-6 rounded-lg shadow-sm border border-slate-200 mt-8">
<h3 className="text-2xl font-semibold mb-6 text-slate-700">
Tips on using the LLM API Pricing Calculator
</h3>
<ul className="space-y-4">
<li className="flex items-start">
<svgDark mode implementation is incomplete. Need to add dark: variants for text, background, border colors, and components like buttons and cards. |
import NavBar from "@/components/layout/navbar";
import Footer from "@/components/layout/footer";
import "@mintlify/mdx/dist/styles.css";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { PHProvider } from "./providers";
import dynamic from "next/dynamic";
import Script from "next/script";
import Head from "next/head";
import { Layout } from "./components/Layout";
const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
ssr: false,To remove providers.tsx and PostHogPageView.tsx, update this file by: 1) Remove PHProvider import and wrap, 2) Remove PostHogPageView dynamic import and component, 3) Update body element to not use PHProvider |
import NavBar from "@/components/layout/navbar";
import Footer from "@/components/layout/footer";
import "@mintlify/mdx/dist/styles.css";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { PHProvider } from "./providers";
import dynamic from "next/dynamic";
import Script from "next/script";
import Head from "next/head";
import { Layout } from "./components/Layout";
const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
ssr: false,BLOCKING: This PR deletes providers.tsx but PHProvider is still used here and in the JSX. Need to: 1. Remove PHProvider import 2. Remove PHProvider wrapper in JSX 3. Remove PostHogPageView import and usage before the app can build and UI changes can be tested. |
import NavBar from "@/components/layout/navbar";
import Footer from "@/components/layout/footer";
import "@mintlify/mdx/dist/styles.css";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { PHProvider } from "./providers";
import dynamic from "next/dynamic";
import Script from "next/script";
import Head from "next/head";
import { Layout } from "./components/Layout";
const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
ssr: false,BLOCKING: Cannot delete providers.tsx and PostHogPageView.tsx until their usages are removed: 1. Remove PHProvider import here 2. Remove PostHogPageView dynamic import on line 15 3. Remove PHProvider wrapper around body (line 75) 4. Remove PostHogPageView component (line 79) |
Testing
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Delete
bifrost/app/providers.tsxandbifrost/app/PostHogPageView.tsx.Add tooltips, help icons, and dark mode to
bifrost/app/llm-cost/CalculatorInfo.tsxandbifrost/app/llm-cost/ModelPriceCalculator.tsx.Tooltips and Help Icons
CalculatorInfo.tsxandModelPriceCalculator.tsx.Dark Mode
CalculatorInfo.tsxandModelPriceCalculator.tsx.