(({ messages, i
diff --git a/components/chat.tsx b/components/chat.tsx
index 04e27ac6..76fe8753 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -15,9 +15,11 @@ import { useUIState, useAIState } from 'ai/rsc'
import MobileIconsBar from './mobile-icons-bar'
import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
import SettingsView from "@/components/settings/settings-view";
-import { MapDataProvider, useMapData } from './map/map-data-context'; // Add this and useMapData
-import { updateDrawingContext } from '@/lib/actions/chat'; // Import the server action
-import dynamic from 'next/dynamic'
+import { MapDataProvider, useMapData } from './map/map-data-context';
+import { updateDrawingContext, getChat } from '@/lib/actions/chat';
+import { getSupabaseBrowserClient } from '@/lib/supabase/browser-client'
+import { type AIMessage, type Chat as ChatType } from '@/lib/types'
+import { nanoid } from 'nanoid'
import { HeaderSearchButton } from './header-search-button'
type ChatProps = {
@@ -27,7 +29,7 @@ type ChatProps = {
export function Chat({ id }: ChatProps) {
const router = useRouter()
const path = usePathname()
- const [messages] = useUIState()
+ const [messages, setMessages] = useUIState()
const [aiState] = useAIState()
const [isMobile, setIsMobile] = useState(false)
const { activeView } = useProfileToggle();
@@ -37,6 +39,8 @@ export function Chat({ id }: ChatProps) {
const [isSubmitting, setIsSubmitting] = useState(false)
const [suggestions, setSuggestions] = useState
(null)
const chatPanelRef = useRef(null);
+ const [onlineUsers, setOnlineUsers] = useState([]);
+ const [chatData, setChatData] = useState(null);
const handleAttachment = () => {
chatPanelRef.current?.handleAttachmentClick();
@@ -46,23 +50,26 @@ export function Chat({ id }: ChatProps) {
chatPanelRef.current?.submitForm();
};
+ useEffect(() => {
+ async function fetchChatData() {
+ if (id) {
+ const chat = await getChat(id);
+ setChatData(chat);
+ }
+ }
+ fetchChatData();
+ }, [id]);
+
useEffect(() => {
setShowEmptyScreen(messages.length === 0)
}, [messages])
useEffect(() => {
- // Check if device is mobile
const checkMobile = () => {
setIsMobile(window.innerWidth < 768)
}
-
- // Initial check
checkMobile()
-
- // Add event listener for window resize
window.addEventListener('resize', checkMobile)
-
- // Cleanup
return () => window.removeEventListener('resize', checkMobile)
}, [])
@@ -74,12 +81,10 @@ export function Chat({ id }: ChatProps) {
useEffect(() => {
if (aiState.messages[aiState.messages.length - 1]?.type === 'response') {
- // Refresh the page to chat history updates
router.refresh()
}
}, [aiState, router])
- // Get mapData to access drawnFeatures
const { mapData } = useMapData();
useEffect(() => {
@@ -91,7 +96,7 @@ export function Chat({ id }: ChatProps) {
// useEffect to call the server action when drawnFeatures changes
useEffect(() => {
- if (id && mapData.drawnFeatures && mapData.cameraState) {
+ if (id && mapData.drawnFeatures && mapData.drawnFeatures.length > 0) {
console.log('Chat.tsx: drawnFeatures changed, calling updateDrawingContext', mapData.drawnFeatures);
updateDrawingContext(id, {
drawnFeatures: mapData.drawnFeatures,
@@ -100,14 +105,47 @@ export function Chat({ id }: ChatProps) {
}
}, [id, mapData.drawnFeatures, mapData.cameraState]);
- // Mobile layout
+ useEffect(() => {
+ if (!id) return;
+
+ const supabase = getSupabaseBrowserClient();
+ const channel = supabase.channel(`chat-${id}`);
+
+ const subscription = channel
+ .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: `chat_id=eq.${id}` },
+ (payload) => {
+ const newMessage = payload.new as AIMessage;
+ setMessages((prevMessages: AIMessage[]) => {
+ if (prevMessages.some((m: AIMessage) => m.id === newMessage.id)) {
+ return prevMessages;
+ }
+ return [...prevMessages, newMessage];
+ });
+ })
+ .on('presence', { event: 'sync' }, () => {
+ const newState = channel.presenceState();
+ const users = Object.keys(newState).map(key => (newState[key][0] as any).user_id);
+ setOnlineUsers(users);
+ })
+ .subscribe(async (status) => {
+ if (status === 'SUBSCRIBED') {
+ await channel.track({ user_id: 'user-placeholder', online_at: new Date().toISOString() });
+ }
+ });
+
+ return () => {
+ supabase.removeChannel(channel);
+ };
+ }, [id, messages, setMessages]);
+
+
if (isMobile) {
return (
- {/* Add Provider */}
+
- {activeView ? : }
+ {activeView ? : }
@@ -117,7 +155,9 @@ export function Chat({ id }: ChatProps) {
ref={chatPanelRef}
messages={messages}
input={input}
- setInput={setInput}
+ setInput={setInput}
+ chatId={id || ''}
+ shareableLink={chatData?.sharePath || ''}
onSuggestionsChange={setSuggestions}
/>
@@ -161,9 +201,8 @@ export function Chat({ id }: ChatProps) {
);
}
- // Desktop layout
return (
-
{/* Add Provider */}
+
{/* This is the new div for scrolling */}
@@ -173,9 +212,12 @@ export function Chat({ id }: ChatProps) {
) : (
<>
@@ -216,9 +258,9 @@ export function Chat({ id }: ChatProps) {
- {activeView ? : }
+ {activeView ? : }
+ Credits:
+ {loading ? (
+
+ ) : (
+
+ {credits !== null ? credits.toLocaleString() : '0'}
+
+ )}
+
+ );
+}
diff --git a/components/credits/credits-provider.tsx b/components/credits/credits-provider.tsx
new file mode 100644
index 00000000..f3a64c95
--- /dev/null
+++ b/components/credits/credits-provider.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { useCurrentUser } from '@/lib/auth/use-current-user';
+
+interface CreditsContextType {
+ credits: number | null;
+ loading: boolean;
+ refreshCredits: () => Promise;
+}
+
+const CreditsContext = React.createContext(undefined);
+
+export function CreditsProvider({ children }: { children: React.ReactNode }) {
+ const { user } = useCurrentUser();
+ const [credits, setCredits] = React.useState(null);
+ const [loading, setLoading] = React.useState(false);
+
+ const fetchCredits = React.useCallback(async () => {
+ if (!user) {
+ setCredits(null);
+ setLoading(false);
+ return;
+ }
+ setLoading(true);
+ try {
+ const response = await fetch('/api/user/credits');
+ if (response.ok) {
+ const data = await response.json();
+ setCredits(data.credits);
+ } else {
+ console.error("Failed to fetch credits", response.statusText);
+ }
+ } catch (error) {
+ console.error("Failed to fetch credits", error);
+ } finally {
+ setLoading(false);
+ }
+ }, [user]);
+
+ React.useEffect(() => {
+ fetchCredits();
+ }, [fetchCredits]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useCredits() {
+ const context = React.useContext(CreditsContext);
+ if (context === undefined) {
+ throw new Error('useCredits must be used within a CreditsProvider');
+ }
+ return context;
+}
diff --git a/components/credits/purchase-credits-popup.tsx b/components/credits/purchase-credits-popup.tsx
new file mode 100644
index 00000000..c8808d9f
--- /dev/null
+++ b/components/credits/purchase-credits-popup.tsx
@@ -0,0 +1,149 @@
+'use client';
+
+import * as React from 'react';
+import {
+ Dialog,
+ DialogContent,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useCurrentUser } from '@/lib/auth/use-current-user';
+import { Check, Loader2 } from 'lucide-react';
+import { TIER_CONFIGS, TIERS } from '@/lib/utils/subscription';
+import { Badge } from '@/components/ui/badge';
+import { useCredits } from './credits-provider';
+import { toast } from 'sonner';
+
+const COOLDOWN_DAYS = 7;
+const STORAGE_KEY = 'purchase_credits_popup_shown_date';
+
+export function PurchaseCreditsPopup() {
+ const { user } = useCurrentUser();
+ const { refreshCredits } = useCredits();
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [loading, setLoading] = React.useState(false);
+
+ React.useEffect(() => {
+ if (!user) return;
+
+ // Delay slightly to not interfere with initial load
+ const timer = setTimeout(() => {
+ setIsOpen(true);
+ }, 2000);
+
+ return () => clearTimeout(timer);
+ }, [user]);
+
+ const handleUpgrade = async (tier: string) => {
+ setLoading(true);
+ try {
+ // Call backend to process Stripe payment and add credits
+ const response = await fetch('/api/user/upgrade', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ tier }),
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to upgrade tier');
+ }
+
+ const data = await response.json();
+
+ // Refresh credits after successful purchase
+ await refreshCredits();
+
+ toast.success(`Credits added: ${data.creditsAdded} credits`);
+ setIsOpen(false);
+ } catch (error) {
+ console.error('Upgrade error:', error);
+ toast.error('Failed to process upgrade. Please try again.');
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ const standardTier = TIER_CONFIGS[TIERS.STANDARD];
+ const freeTier = TIER_CONFIGS[TIERS.FREE];
+
+ return (
+
+ );
+}
diff --git a/components/header.tsx b/components/header.tsx
index 644ba8c0..3561d17d 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -4,8 +4,8 @@ import Image from 'next/image'
import { useCalendarToggle } from './calendar-toggle-context'
import { ModeToggle } from './mode-toggle'
import { cn } from '@/lib/utils'
-import HistoryContainer from './history-container'
import { Button } from '@/components/ui/button'
+import { History } from './history'
import {
Search,
CircleUserRound,
@@ -15,10 +15,16 @@ import {
} from 'lucide-react'
import { MapToggle } from './map-toggle'
import { ProfileToggle } from './profile-toggle'
+import { UsageSidebar } from './usage-sidebar'
+import { useState } from 'react'
export const Header = () => {
const { toggleCalendar } = useCalendarToggle()
+ const [isUsageOpen, setIsUsageOpen] = useState(false)
+
return (
+ <>
+ setIsUsageOpen(false)} />
+
)
}
diff --git a/components/history-item.tsx b/components/history-item.tsx
index 12f101b0..4cd233f5 100644
--- a/components/history-item.tsx
+++ b/components/history-item.tsx
@@ -3,11 +3,11 @@
import React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
-import type { Chat as DrizzleChat } from '@/lib/actions/chat-db';
+import { type Chat } from '@/lib/types';
import { cn } from '@/lib/utils'
type HistoryItemProps = {
- chat: DrizzleChat & { path: string };
+ chat: Chat & { path: string };
}
const formatDateWithTime = (date: Date | string) => {
diff --git a/components/history-list.tsx b/components/history-list.tsx
index 5713bd2e..1943ff82 100644
--- a/components/history-list.tsx
+++ b/components/history-list.tsx
@@ -2,31 +2,13 @@ import React, { cache } from 'react';
import HistoryItem from './history-item';
import { ClearHistory } from './clear-history';
import { getChats } from '@/lib/actions/chat';
-
-// Define the type for the chat data returned by getChats
-type ChatData = {
- userId: string;
- id: string;
- title: string;
- createdAt: Date;
- visibility: string | null;
-};
-
-// Define the Chat type expected by HistoryItem
-type Chat = {
- userId: string;
- id: string;
- title: string;
- createdAt: Date;
- visibility: string | null;
- path: string;
-};
+import { type Chat } from '@/lib/types';
type HistoryListProps = {
userId?: string;
};
-const loadChats = cache(async (userId?: string): Promise => {
+const loadChats = cache(async (userId?: string): Promise => {
return await getChats(userId);
});
@@ -52,12 +34,12 @@ export async function HistoryList({ userId }: HistoryListProps) {
No search history
) : (
- chats.map((chat: ChatData) => (
+ chats.map((chat: Chat) => (
))
diff --git a/components/history.tsx b/components/history.tsx
index 621c8f9e..855380f1 100644
--- a/components/history.tsx
+++ b/components/history.tsx
@@ -6,33 +6,40 @@ import {
SheetTrigger
} from '@/components/ui/sheet'
import { Button } from '@/components/ui/button'
-import { ChevronLeft, Menu } from 'lucide-react'
+import { Sprout, Menu } from 'lucide-react'
import { cn } from '@/lib/utils'
import { History as HistoryIcon } from 'lucide-react'
import { ChatHistoryClient } from './sidebar/chat-history-client' // Updated import
import { Suspense } from 'react'
import { HistorySkeleton } from './history-skelton'
+import { CreditsDisplay } from './credits/credits-display'
type HistoryProps = {
location: 'sidebar' | 'header'
+ children?: React.ReactNode
}
-export function History({ location }: HistoryProps) {
+export function History({ location, children }: HistoryProps) {
return (
-
+ {children ? (
+ children
+ ) : (
+
+ )}
-
+
+
diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx
index bde08487..3c12e16c 100644
--- a/components/mobile-icons-bar.tsx
+++ b/components/mobile-icons-bar.tsx
@@ -12,13 +12,16 @@ import {
TentTree,
Paperclip,
ArrowRight,
- Plus
+ Plus,
+ Sprout
} from 'lucide-react'
import { History } from '@/components/history'
import { MapToggle } from './map-toggle'
import { ModeToggle } from './mode-toggle'
import { ProfileToggle } from './profile-toggle'
import { useCalendarToggle } from './calendar-toggle-context'
+import { UsageSidebar } from './usage-sidebar'
+import { useState } from 'react'
interface MobileIconsBarProps {
onAttachmentClick: () => void;
@@ -29,6 +32,7 @@ export const MobileIconsBar: React.FC = ({ onAttachmentClic
const [, setMessages] = useUIState()
const { clearChat } = useActions()
const { toggleCalendar } = useCalendarToggle()
+ const [isUsageOpen, setIsUsageOpen] = useState(false)
const handleNewChat = async () => {
setMessages([])
@@ -48,18 +52,21 @@ export const MobileIconsBar: React.FC = ({ onAttachmentClic
-
-
-
+
+ setIsUsageOpen(false)} />
-
+
+
+
)
diff --git a/components/settings/components/settings.tsx b/components/settings/components/settings.tsx
index 0d201916..7d2ce56a 100644
--- a/components/settings/components/settings.tsx
+++ b/components/settings/components/settings.tsx
@@ -11,7 +11,6 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
import { FormProvider, UseFormReturn } from "react-hook-form"; import React from "react";
import { Loader2, Save, RotateCcw } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
-// Or, if the file does not exist, create it as shown below.
import { SystemPromptForm } from "./system-prompt-form"
import { ModelSelectionForm } from "./model-selection-form"
import { UserManagementForm } from './user-management-form';
@@ -23,7 +22,6 @@ import { useToast } from "@/components/ui/hooks/use-toast"
import { getSystemPrompt, saveSystemPrompt } from "../../../lib/actions/chat"
import { getSelectedModel, saveSelectedModel } from "../../../lib/actions/users"
-// Define the form schema
const settingsFormSchema = z.object({
systemPrompt: z
.string()
@@ -40,31 +38,28 @@ const settingsFormSchema = z.object({
z.object({
id: z.string(),
email: z.string().email(),
- role: z.enum(["admin", "editor", "viewer"]),
+ role: z.enum(["owner", "collaborator"]),
}),
),
newUserEmail: z.string().email().optional(),
- newUserRole: z.enum(["admin", "editor", "viewer"]).optional(),
+ newUserRole: z.enum(["owner", "collaborator"]).optional(),
})
export type SettingsFormValues = z.infer
-// Default values
const defaultValues: Partial = {
systemPrompt:
"You are a planetary copilot, an AI assistant designed to help users with information about planets, space exploration, and astronomy. Provide accurate, educational, and engaging responses about our solar system and beyond.",
- selectedModel: "Grok 4.2",
- users: [
- { id: "1", email: "admin@example.com", role: "admin" },
- { id: "2", email: "user@example.com", role: "editor" },
- ],
+ selectedModel: "gpt-4o",
+ users: [],
}
interface SettingsProps {
initialTab?: string;
+ chatId: string;
}
-export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
+export function Settings({ initialTab = "system-prompt", chatId }: SettingsProps) {
const { toast } = useToast()
const router = useRouter()
const [isLoading, setIsLoading] = useState(false)
@@ -75,7 +70,6 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
setCurrentTab(initialTab);
}, [initialTab]);
- // TODO: Replace 'anonymous' with actual user ID from session/auth context
const userId = 'anonymous';
const form = useForm({
@@ -104,7 +98,6 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
setIsLoading(true)
try {
- // Save the system prompt and selected model
const [promptSaveResult, modelSaveResult] = await Promise.all([
saveSystemPrompt(userId, data.systemPrompt),
saveSelectedModel(data.selectedModel),
@@ -117,18 +110,15 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
throw new Error(modelSaveResult.error);
}
+ await new Promise((resolve) => setTimeout(resolve, 200))
console.log("Submitted data:", data)
- // Success notification
toast({
title: "Settings updated",
description: "Your settings have been saved successfully.",
})
- // Refresh the page to reflect changes
- // router.refresh(); // Consider if refresh is needed or if optimistic update is enough
} catch (error: any) {
- // Error notification
toast({
title: "Something went wrong",
description: error.message || "Your settings could not be saved. Please try again.",
@@ -191,7 +181,7 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
-
+
diff --git a/components/settings/components/user-management-form.tsx b/components/settings/components/user-management-form.tsx
index 2f9521df..f338a9a6 100644
--- a/components/settings/components/user-management-form.tsx
+++ b/components/settings/components/user-management-form.tsx
@@ -9,14 +9,15 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { Trash2, Edit3, UserPlus, Loader2 } from 'lucide-react';
import { useToast } from '@/components/ui/hooks/use-toast';
-import { addUser } from '@/lib/actions/users';
+import { inviteUserToChat } from '@/lib/actions/collaboration';
import type { SettingsFormValues } from './settings';
interface UserManagementFormProps {
form: UseFormReturn;
+ chatId: string;
}
-export function UserManagementForm({ form }: UserManagementFormProps) {
+export function UserManagementForm({ form, chatId }: UserManagementFormProps) {
const { fields, append, remove } = useFieldArray({
control: form.control,
name: "users",
@@ -24,15 +25,11 @@ export function UserManagementForm({ form }: UserManagementFormProps) {
const { toast } = useToast();
const [isAddingUser, setIsAddingUser] = useState(false);
- // const watchNewUserEmail = form.watch("newUserEmail", ""); // Not strictly needed for logic below
- // const watchNewUserRole = form.watch("newUserRole", "viewer"); // Not strictly needed for logic below
-
const handleAddUser = async () => {
setIsAddingUser(true);
const newUserEmail = form.getValues("newUserEmail");
- const newUserRole = form.getValues("newUserRole") || "viewer"; // Ensure role has a default
+ const newUserRole = form.getValues("newUserRole") as 'owner' | 'collaborator';
- // Client-side validation first
if (!newUserEmail) {
form.setError("newUserEmail", { type: "manual", message: "Email is required." });
setIsAddingUser(false);
@@ -43,27 +40,22 @@ export function UserManagementForm({ form }: UserManagementFormProps) {
setIsAddingUser(false);
return;
}
- // Client-side check if user already exists in the local list
- if (fields.some(user => user.email === newUserEmail)) {
- form.setError("newUserEmail", { type: "manual", message: "User with this email already exists locally." });
- setIsAddingUser(false);
- return;
- }
- // Clear any previous local errors for newUserEmail if client checks pass
+
form.clearErrors("newUserEmail");
try {
- const result = await addUser('default-user', { email: newUserEmail, role: newUserRole });
+ const result = await inviteUserToChat(chatId, newUserEmail, newUserRole);
if (result.error) {
toast({ title: 'Error adding user', description: result.error, variant: 'destructive' });
- form.setError("newUserEmail", { type: "manual", message: result.error }); // Show server error on field
- } else if (result.user) {
- toast({ title: 'User Added', description: `${result.user.email} was successfully added.` });
- append(result.user); // Add user with ID from server
+ form.setError("newUserEmail", { type: "manual", message: result.error });
+ } else {
+ toast({ title: 'User Invited', description: `${newUserEmail} was successfully invited.` });
+ // We don't append here because the user needs to accept the invite.
+ // We can add a "pending invitations" section in the future.
form.resetField("newUserEmail");
- form.resetField("newUserRole"); // Or set to default: form.setValue("newUserRole", "viewer");
- form.clearErrors("newUserEmail"); // Clear any previous errors
+ form.resetField("newUserRole");
+ form.clearErrors("newUserEmail");
}
} catch (error) {
console.error("Failed to add user:", error);
@@ -77,7 +69,7 @@ export function UserManagementForm({ form }: UserManagementFormProps) {
User Management
- Add, remove, or edit user access and roles.
+ Invite users to collaborate on this chat.
@@ -99,7 +91,7 @@ export function UserManagementForm({ form }: UserManagementFormProps) {
(
Role
@@ -110,9 +102,8 @@ export function UserManagementForm({ form }: UserManagementFormProps) {
- Admin
- Editor
- Viewer
+ Owner
+ Collaborator
@@ -122,7 +113,7 @@ export function UserManagementForm({ form }: UserManagementFormProps) {
+
)
diff --git a/components/sidebar/chat-history-client.tsx b/components/sidebar/chat-history-client.tsx
index 9190dea7..e45a3ba9 100644
--- a/components/sidebar/chat-history-client.tsx
+++ b/components/sidebar/chat-history-client.tsx
@@ -18,8 +18,9 @@ import {
} from '@/components/ui/alert-dialog';
import { toast } from 'sonner';
import { Spinner } from '@/components/ui/spinner';
+import { Zap, ChevronDown, ChevronUp } from 'lucide-react';
import HistoryItem from '@/components/history-item'; // Adjust path if HistoryItem is moved or renamed
-import type { Chat as DrizzleChat } from '@/lib/actions/chat-db'; // Use the Drizzle-based Chat type
+import type { Chat as DrizzleChat } from '@/lib/types';
interface ChatHistoryClientProps {
// userId is no longer passed as prop; API route will use authenticated user
@@ -31,6 +32,7 @@ export function ChatHistoryClient({}: ChatHistoryClientProps) {
const [error, setError] = useState
(null);
const [isClearPending, startClearTransition] = useTransition();
const [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false);
+ const [isCreditsVisible, setIsCreditsVisible] = useState(false);
const router = useRouter();
useEffect(() => {
diff --git a/components/usage-sidebar.tsx b/components/usage-sidebar.tsx
new file mode 100644
index 00000000..4e24b7fb
--- /dev/null
+++ b/components/usage-sidebar.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+} from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Zap, RefreshCw, LayoutPanelLeft, X } from 'lucide-react';
+
+interface UsageSidebarProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export function UsageSidebar({ isOpen, onClose }: UsageSidebarProps) {
+ const [usage, setUsage] = useState([]);
+ const [credits, setCredits] = useState(0);
+
+ useEffect(() => {
+ if (isOpen) {
+ // Mock data for now as per the screenshot
+ setUsage([
+ { details: 'Efficiently Fix Pull Request ...', date: '2026-01-17 08:05', change: -418 },
+ { details: 'Fix Build and Add Parallel S...', date: '2026-01-16 06:10', change: -482 },
+ { details: 'How to Add a Feature to a ...', date: '2026-01-14 10:42', change: -300 },
+ ]);
+ setCredits(0);
+ }
+ }, [isOpen]);
+
+ return (
+
+
+
+
+
Usage
+
+
+
+
+
+ Free
+
+
+
+
+
+
+
+ Credits
+
+
{credits}
+
+
+ Free credits
+ 0
+
+
+
+
+
+
+
+ Daily refresh credits
+
+
300
+
+
Refresh to 300 at 00:00 every day
+
+
+
+
+
+
+
+ Website usage & billing
+
+
+
+
+
+
+
+ Details
+ Date
+ Credits change
+
+
+
+ {usage.map((item, i) => (
+
+ {item.details}
+ {item.date}
+ {item.change}
+
+ ))}
+
+
+
+
