show account balance, empty state for ai chat interface

src/components/AiChatInterface.tsx

@@ -130,6 +130,12 @@ export default function AIChatInterface({
   return (
     <div className="flex flex-col h-[calc(100vh-60px)] max-w-2xl mx-auto p-4 bg-gray-100">
       <div className="flex-1 overflow-y-auto space-y-4 mb-4">
+        {messages.length === 0 && (
+          <div className="text-gray-500 text-xl text-center mt-[30vh] flex flex-col items-center">
+            <div>Submit a prompt to get started!</div>
+            <div className="text-6xl mt-4">↓</div>
+          </div>
+        )}
         {messages.map((message, index) => (
           <AiChatMessage key={index} message={message} />
         ))}

src/components/HeaderLogin.tsx

@@ -11,13 +11,15 @@ import { Link, useLocation, useRouter } from "wouter"
 import { User } from "lucide-react"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { useAccountBalance } from "@/hooks/use-account-balance"
 
 export const HeaderLogin: React.FC = () => {
   const [, setLocation] = useLocation()
   const session = useGlobalStore((s) => s.session)
   const isLoggedIn = Boolean(session)
   const setSession = useGlobalStore((s) => s.setSession)
   const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const { data: accountBalance } = useAccountBalance()
 
   if (!isLoggedIn) {
     return (
@@ -52,7 +54,7 @@ export const HeaderLogin: React.FC = () => {
   }
 
   return (
-    <div className="flex justify-end">
+    <div className="flex justify-end items-center">
       <DropdownMenu>
         <DropdownMenuTrigger>
           <Avatar className="w-8 h-8">
@@ -65,6 +67,11 @@ export const HeaderLogin: React.FC = () => {
           </Avatar>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
+          <DropdownMenuItem className="text-gray-500 text-xs" disabled>
+            AI Usage $
+            {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
+            $5.00
+          </DropdownMenuItem>
           <DropdownMenuItem onClick={() => setLocation("/dashboard")}>
             Dashboard
           </DropdownMenuItem>

src/hooks/use-account-balance.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "react-query"
+import { useAxios } from "./use-axios"
+
+interface AccountBalance {
+  monthly_ai_budget_used_usd: number
+}
+
+export const useAccountBalance = () => {
+  const axios = useAxios()
+
+  return useQuery<AccountBalance, Error>(
+    "accountBalance",
+    async () => {
+      const { data } = await axios.get("/accounts/get_account_balance")
+      return data.account_balance
+    },
+    {
+      refetchInterval: 60000, // Refetch every minute
+    }
+  )
+}

src/hooks/use-ai-api.ts

@@ -1,15 +1,23 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import { useMemo } from "react"
+import { useGlobalStore } from "./use-global-store"
 
 export const useAiApi = ({
   streaming = false,
 }: { streaming?: boolean } = {}) => {
+  const sessionToken = useGlobalStore((state) => state.session?.token)
   const anthropic = useMemo(
     () =>
       new Anthropic({
-        // apiKey: "{REPLACE_ON_SERVER}",
-        apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,
+        apiKey: "{REPLACE_ON_SERVER}",
+        // apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,
         // baseURL: `${window.location.origin}/ai`,
+        baseURL: import.meta.env.VITE_SNIPPETS_API_URL
+          ? `${import.meta.env.VITE_SNIPPETS_API_URL}/anthropic`
+          : "/api/anthropic",
+        defaultHeaders: {
+          Authorization: `Bearer ${sessionToken}`,
+        },
         dangerouslyAllowBrowser: true,
       }),
     [],