feat: Add Ask Ash AI credit components
This commit is contained in:
Ashwin Kumar Sivakumar
parent
d21121cf0a
commit
d888466f19
4 changed files with 1215 additions and 0 deletions
332
src/components/AskAsh/AiGenerateButton.tsx
Normal file
332
src/components/AskAsh/AiGenerateButton.tsx
Normal file
|
|
@ -0,0 +1,332 @@
|
||||||
|
import {
|
||||||
|
Component,
|
||||||
|
Show,
|
||||||
|
createSignal,
|
||||||
|
createMemo,
|
||||||
|
splitProps,
|
||||||
|
JSX
|
||||||
|
} from 'solid-js';
|
||||||
|
import { useAiCredits, CREDIT_COSTS, GenerateRequest } from '../../hooks/useAiCredits';
|
||||||
|
|
||||||
|
// Props interface
|
||||||
|
export interface AiGenerateButtonProps {
|
||||||
|
/** The type of content to generate */
|
||||||
|
type: 'job_description' | 'interview_question' | 'resume_review';
|
||||||
|
/** Context data for generation (e.g., job title, company, etc.) */
|
||||||
|
context: Record<string, unknown>;
|
||||||
|
/** Callback when generation succeeds */
|
||||||
|
onSuccess: (content: string) => void;
|
||||||
|
/** Callback when generation fails */
|
||||||
|
onError?: (error: Error) => void;
|
||||||
|
/** Custom button text */
|
||||||
|
buttonText?: string;
|
||||||
|
/** Additional CSS classes */
|
||||||
|
class?: string;
|
||||||
|
/** Disabled state */
|
||||||
|
disabled?: boolean;
|
||||||
|
/** Whether to show the cost badge */
|
||||||
|
showCost?: boolean;
|
||||||
|
/** Custom icon element */
|
||||||
|
icon?: JSX.Element;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading spinner component
|
||||||
|
const LoadingSpinner: Component = () => (
|
||||||
|
<svg
|
||||||
|
class="animate-spin h-5 w-5 text-white"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
class="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Sparkles icon for AI button
|
||||||
|
const SparklesIcon: Component = () => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-5 w-5"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 8a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zm7-8a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0V6h-1a1 1 0 110-2h1V3a1 1 0 011-1zm0 8a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0v-1h-1a1 1 0 110-2h1v-1a1 1 0 011-1z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Credit icon
|
||||||
|
const CreditIcon: Component = () => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-4 w-4"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Warning icon
|
||||||
|
const WarningIcon: Component = () => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-5 w-5 text-amber-500"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const AiGenerateButton: Component<AiGenerateButtonProps> = (props) => {
|
||||||
|
// Split props
|
||||||
|
const [local, rest] = splitProps(props, [
|
||||||
|
'type',
|
||||||
|
'context',
|
||||||
|
'onSuccess',
|
||||||
|
'onError',
|
||||||
|
'buttonText',
|
||||||
|
'class',
|
||||||
|
'disabled',
|
||||||
|
'showCost',
|
||||||
|
'icon',
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Get credit hook
|
||||||
|
const credits = useAiCredits();
|
||||||
|
|
||||||
|
// Local state for showing insufficient credits warning
|
||||||
|
const [showWarning, setShowWarning] = createSignal(false);
|
||||||
|
|
||||||
|
// Compute cost for this operation
|
||||||
|
const cost = createMemo(() => CREDIT_COSTS[local.type] ?? 1);
|
||||||
|
|
||||||
|
// Check if user has enough credits
|
||||||
|
const hasEnoughCredits = createMemo(() => credits.hasEnoughCredits(cost()));
|
||||||
|
|
||||||
|
// Determine button state
|
||||||
|
const isDisabled = createMemo(() =>
|
||||||
|
local.disabled || credits.isGenerating() || credits.isLoading()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle button click
|
||||||
|
const handleClick = async () => {
|
||||||
|
// Clear previous errors
|
||||||
|
credits.clearErrors();
|
||||||
|
setShowWarning(false);
|
||||||
|
|
||||||
|
// Check if user has enough credits
|
||||||
|
if (!hasEnoughCredits()) {
|
||||||
|
setShowWarning(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const request: GenerateRequest = {
|
||||||
|
type: local.type,
|
||||||
|
context: local.context,
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await credits.generate(request);
|
||||||
|
|
||||||
|
if (response) {
|
||||||
|
local.onSuccess(response.content);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
const error = err instanceof Error ? err : new Error('Generation failed');
|
||||||
|
|
||||||
|
if (local.onError) {
|
||||||
|
local.onError(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show warning for insufficient credits
|
||||||
|
if (error.message.toLowerCase().includes('insufficient')) {
|
||||||
|
setShowWarning(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle buy credits click
|
||||||
|
const handleBuyCredits = () => {
|
||||||
|
// Emit event to open purchase modal
|
||||||
|
// Parent component should listen for this event
|
||||||
|
const event = new CustomEvent('open-credit-purchase-modal', {
|
||||||
|
detail: { requiredCredits: cost() },
|
||||||
|
bubbles: true,
|
||||||
|
});
|
||||||
|
document.dispatchEvent(event);
|
||||||
|
|
||||||
|
// Hide the warning
|
||||||
|
setShowWarning(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={`flex flex-col gap-2 ${local.class || ''}`}>
|
||||||
|
{/* Main button container */}
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
{/* AI Generate Button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClick}
|
||||||
|
disabled={isDisabled()}
|
||||||
|
class={`
|
||||||
|
inline-flex items-center gap-2 px-4 py-2
|
||||||
|
rounded-lg font-medium text-sm
|
||||||
|
transition-colors duration-200
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-offset-2
|
||||||
|
${hasEnoughCredits()
|
||||||
|
? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
|
||||||
|
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
||||||
|
}
|
||||||
|
${credits.isGenerating() && 'cursor-wait'}
|
||||||
|
`}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
<Show
|
||||||
|
when={!credits.isGenerating()}
|
||||||
|
fallback={<LoadingSpinner />}
|
||||||
|
>
|
||||||
|
{local.icon ?? <SparklesIcon />}
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
{credits.isGenerating()
|
||||||
|
? 'Generating...'
|
||||||
|
: (local.buttonText ?? 'Ask Ash')
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* Cost indicator badge */}
|
||||||
|
<Show when={local.showCost !== false}>
|
||||||
|
<span
|
||||||
|
class={`
|
||||||
|
inline-flex items-center gap-1
|
||||||
|
px-1.5 py-0.5 rounded text-xs font-medium
|
||||||
|
${hasEnoughCredits()
|
||||||
|
? 'bg-indigo-500/30 text-indigo-100'
|
||||||
|
: 'bg-red-500/30 text-red-100'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
title={`Costs ${cost()} credit${cost() > 1 ? 's' : ''}`}
|
||||||
|
>
|
||||||
|
<CreditIcon />
|
||||||
|
-{cost()}
|
||||||
|
</span>
|
||||||
|
</Show>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Credit meter badge */}
|
||||||
|
<div
|
||||||
|
class={`
|
||||||
|
inline-flex items-center gap-1.5 px-3 py-2
|
||||||
|
rounded-lg text-sm font-medium
|
||||||
|
transition-colors duration-200
|
||||||
|
${credits.credits() > 0
|
||||||
|
? 'bg-green-100 text-green-800 border border-green-200'
|
||||||
|
: 'bg-red-100 text-red-800 border border-red-200'
|
||||||
|
}
|
||||||
|
${credits.isLoading() && 'opacity-70'}
|
||||||
|
`}
|
||||||
|
title="Available AI credits"
|
||||||
|
>
|
||||||
|
<CreditIcon />
|
||||||
|
<Show when={!credits.isLoading()} fallback="Loading...">
|
||||||
|
<span>
|
||||||
|
{credits.credits()} credit{credits.credits() !== 1 ? 's' : ''}
|
||||||
|
</span>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Insufficient credits warning */}
|
||||||
|
<Show when={showWarning()}>
|
||||||
|
<div class="flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
||||||
|
<WarningIcon />
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-sm text-amber-800 font-medium">
|
||||||
|
Insufficient credits
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-amber-700 mt-0.5">
|
||||||
|
You need {cost()} credit{cost() > 1 ? 's' : ''} to generate this content.
|
||||||
|
You currently have {credits.credits()}.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleBuyCredits}
|
||||||
|
class="
|
||||||
|
inline-flex items-center px-3 py-1.5
|
||||||
|
bg-amber-600 text-white text-sm font-medium
|
||||||
|
rounded-md hover:bg-amber-700
|
||||||
|
transition-colors duration-200
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-1
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Buy Credits
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* Error message display */}
|
||||||
|
<Show when={credits.generationError()}>
|
||||||
|
<div class="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-5 w-5 flex-shrink-0"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>{credits.generationError()}</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => credits.clearErrors()}
|
||||||
|
class="ml-auto text-red-600 hover:text-red-800"
|
||||||
|
title="Dismiss"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="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" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* Low credits indicator (optional) */}
|
||||||
|
<Show when={credits.credits() > 0 && credits.credits() < 3 && !showWarning()}>
|
||||||
|
<p class="text-xs text-amber-600 flex items-center gap-1">
|
||||||
|
<WarningIcon />
|
||||||
|
Low on credits. Only {credits.credits()} remaining.
|
||||||
|
</p>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AiGenerateButton;
|
||||||
601
src/components/AskAsh/AskAshModal.tsx
Normal file
601
src/components/AskAsh/AskAshModal.tsx
Normal file
|
|
@ -0,0 +1,601 @@
|
||||||
|
import {
|
||||||
|
Component,
|
||||||
|
Show,
|
||||||
|
createSignal,
|
||||||
|
createMemo,
|
||||||
|
onMount,
|
||||||
|
onCleanup,
|
||||||
|
batch,
|
||||||
|
JSX
|
||||||
|
} from 'solid-js';
|
||||||
|
import { useAiCredits, CREDIT_COSTS, PurchaseResponse } from '../../hooks/useAiCredits';
|
||||||
|
|
||||||
|
// Props interface
|
||||||
|
export interface AskAshModalProps {
|
||||||
|
/** Whether the modal is open */
|
||||||
|
isOpen: boolean;
|
||||||
|
/** Callback when modal is closed */
|
||||||
|
onClose: () => void;
|
||||||
|
/** Minimum credits needed (optional) */
|
||||||
|
requiredCredits?: number;
|
||||||
|
/** Callback when purchase is successful */
|
||||||
|
onPurchaseSuccess?: (response: PurchaseResponse) => void;
|
||||||
|
/** Callback when purchase fails */
|
||||||
|
onPurchaseError?: (error: Error) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Credit package options
|
||||||
|
interface CreditPackage {
|
||||||
|
id: string;
|
||||||
|
credits: number;
|
||||||
|
price: number;
|
||||||
|
label: string;
|
||||||
|
popular?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CREDIT_PACKAGES: CreditPackage[] = [
|
||||||
|
{ id: 'small', credits: 10, price: 5, label: 'Starter' },
|
||||||
|
{ id: 'medium', credits: 50, price: 20, label: 'Pro', popular: true },
|
||||||
|
{ id: 'large', credits: 200, price: 60, label: 'Enterprise' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Payment method options
|
||||||
|
const PAYMENT_METHODS = [
|
||||||
|
{ id: 'card', label: 'Credit/Debit Card', icon: '💳' },
|
||||||
|
{ id: 'tracecoin', label: 'Tracecoin Balance', icon: '🪙' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Close icon
|
||||||
|
const CloseIcon: Component = () => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check icon
|
||||||
|
const CheckIcon: Component = () => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-5 w-5"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Sparkles icon
|
||||||
|
const SparklesIcon: Component = () => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-12 w-12"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="1.5"
|
||||||
|
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Loading spinner
|
||||||
|
const LoadingSpinner: Component<{ size?: 'sm' | 'md' | 'lg' }> = (props) => {
|
||||||
|
const sizeClass = {
|
||||||
|
sm: 'h-4 w-4',
|
||||||
|
md: 'h-5 w-5',
|
||||||
|
lg: 'h-8 w-8',
|
||||||
|
}[props.size || 'md'];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
class={`animate-spin ${sizeClass} text-current`}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
class="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AskAshModal: Component<AskAshModalProps> = (props) => {
|
||||||
|
// Get credit hook
|
||||||
|
const credits = useAiCredits();
|
||||||
|
|
||||||
|
// Local state
|
||||||
|
const [selectedPackage, setSelectedPackage] = createSignal<CreditPackage>(CREDIT_PACKAGES[1]);
|
||||||
|
const [selectedPayment, setSelectedPayment] = createSignal<string>('card');
|
||||||
|
const [step, setStep] = createSignal<'select' | 'confirm' | 'success'>('select');
|
||||||
|
const [purchaseResult, setPurchaseResult] = createSignal<PurchaseResponse | null>(null);
|
||||||
|
|
||||||
|
// Compute if user needs specific amount
|
||||||
|
const requiredAmount = createMemo(() => props.requiredCredits ?? 1);
|
||||||
|
|
||||||
|
// Compute current credit cost per operation
|
||||||
|
const operationsEstimate = createMemo(() => {
|
||||||
|
return Math.floor(selectedPackage().credits / requiredAmount());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle escape key to close modal
|
||||||
|
onMount(() => {
|
||||||
|
const handleEscape = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape' && props.isOpen && !credits.isPurchasing()) {
|
||||||
|
handleClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleEscape);
|
||||||
|
|
||||||
|
onCleanup(() => {
|
||||||
|
document.removeEventListener('keydown', handleEscape);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset state when modal opens
|
||||||
|
const resetState = () => {
|
||||||
|
batch(() => {
|
||||||
|
setSelectedPackage(CREDIT_PACKAGES[1]);
|
||||||
|
setSelectedPayment('card');
|
||||||
|
setStep('select');
|
||||||
|
setPurchaseResult(null);
|
||||||
|
credits.clearErrors();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle close
|
||||||
|
const handleClose = () => {
|
||||||
|
if (!credits.isPurchasing()) {
|
||||||
|
props.onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle backdrop click
|
||||||
|
const handleBackdropClick = (e: MouseEvent) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
handleClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle package selection
|
||||||
|
const handleSelectPackage = (pkg: CreditPackage) => {
|
||||||
|
setSelectedPackage(pkg);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle continue to confirmation
|
||||||
|
const handleContinue = () => {
|
||||||
|
setStep('confirm');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle purchase
|
||||||
|
const handlePurchase = async () => {
|
||||||
|
try {
|
||||||
|
const response = await credits.purchase({
|
||||||
|
amount: selectedPackage().credits,
|
||||||
|
payment_method: selectedPayment(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response) {
|
||||||
|
setPurchaseResult(response);
|
||||||
|
setStep('success');
|
||||||
|
|
||||||
|
if (props.onPurchaseSuccess) {
|
||||||
|
props.onPurchaseSuccess(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
const error = err instanceof Error ? err : new Error('Purchase failed');
|
||||||
|
|
||||||
|
if (props.onPurchaseError) {
|
||||||
|
props.onPurchaseError(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle done after success
|
||||||
|
const handleDone = () => {
|
||||||
|
resetState();
|
||||||
|
props.onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle buy more after success
|
||||||
|
const handleBuyMore = () => {
|
||||||
|
setStep('select');
|
||||||
|
setPurchaseResult(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Component for package card
|
||||||
|
const PackageCard: Component<{ pkg: CreditPackage }> = (pkgProps) => {
|
||||||
|
const isSelected = createMemo(() => selectedPackage().id === pkgProps.pkg.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleSelectPackage(pkgProps.pkg)}
|
||||||
|
class={`
|
||||||
|
relative p-4 rounded-xl border-2 text-left transition-all duration-200
|
||||||
|
${isSelected()
|
||||||
|
? 'border-indigo-600 bg-indigo-50'
|
||||||
|
: 'border-gray-200 hover:border-indigo-300 hover:bg-gray-50'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{/* Popular badge */}
|
||||||
|
<Show when={pkgProps.pkg.popular}>
|
||||||
|
<span class="
|
||||||
|
absolute -top-2 left-1/2 -translate-x-1/2
|
||||||
|
px-2 py-0.5 bg-indigo-600 text-white text-xs font-medium rounded-full
|
||||||
|
">
|
||||||
|
Popular
|
||||||
|
</span>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center text-center">
|
||||||
|
<span class="text-lg font-bold text-gray-900">
|
||||||
|
{pkgProps.pkg.credits} Credits
|
||||||
|
</span>
|
||||||
|
<span class="text-2xl font-bold text-indigo-600 mt-1">
|
||||||
|
${pkgProps.pkg.price}
|
||||||
|
</span>
|
||||||
|
<span class="text-xs text-gray-500 mt-1">
|
||||||
|
${(pkgProps.pkg.price / pkgProps.pkg.credits).toFixed(2)}/credit
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Selection indicator */}
|
||||||
|
<Show when={isSelected()}>
|
||||||
|
<div class="absolute top-2 right-2 text-indigo-600">
|
||||||
|
<CheckIcon />
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Component for payment method
|
||||||
|
const PaymentMethod: Component<{ method: typeof PAYMENT_METHODS[0] }> = (payProps) => {
|
||||||
|
const isSelected = createMemo(() => selectedPayment() === payProps.method.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSelectedPayment(payProps.method.id)}
|
||||||
|
class={`
|
||||||
|
flex items-center gap-3 p-3 rounded-lg border transition-all duration-200
|
||||||
|
${isSelected()
|
||||||
|
? 'border-indigo-600 bg-indigo-50'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<span class="text-2xl">{payProps.method.icon}</span>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<span class="font-medium text-gray-900">{payProps.method.label}</span>
|
||||||
|
</div>
|
||||||
|
<div class={`
|
||||||
|
w-5 h-5 rounded-full border-2 flex items-center justify-center
|
||||||
|
${isSelected() ? 'border-indigo-600' : 'border-gray-300'}
|
||||||
|
`}>
|
||||||
|
<Show when={isSelected()}>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-indigo-600" />
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Show when={props.isOpen}>
|
||||||
|
{/* Modal backdrop */}
|
||||||
|
<div
|
||||||
|
class="
|
||||||
|
fixed inset-0 z-50
|
||||||
|
bg-black/50 backdrop-blur-sm
|
||||||
|
flex items-center justify-center p-4
|
||||||
|
animate-[fadeIn_0.2s_ease-out]
|
||||||
|
"
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
>
|
||||||
|
{/* Modal content */}
|
||||||
|
<div
|
||||||
|
class={`
|
||||||
|
relative w-full max-w-lg max-h-[90vh]
|
||||||
|
bg-white rounded-2xl shadow-2xl
|
||||||
|
overflow-hidden
|
||||||
|
animate-[slideIn_0.3s_ease-out]
|
||||||
|
flex flex-col
|
||||||
|
`}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="modal-title"
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div class="flex items-center justify-between p-6 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="p-2 bg-indigo-100 rounded-lg text-indigo-600">
|
||||||
|
<SparklesIcon />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 id="modal-title" class="text-xl font-bold text-gray-900">
|
||||||
|
{step() === 'success' ? 'Purchase Complete!' : 'Buy Ask Ash Credits'}
|
||||||
|
</h2>
|
||||||
|
<Show when={step() !== 'success'}>
|
||||||
|
<p class="text-sm text-gray-500">
|
||||||
|
Power your AI-generated content
|
||||||
|
</p>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Show when={step() !== 'success' && !credits.isPurchasing()}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClose}
|
||||||
|
class="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</button>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error display */}
|
||||||
|
<Show when={credits.purchaseError()}>
|
||||||
|
<div class="mx-6 mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800">
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium">Purchase failed</p>
|
||||||
|
<p class="text-xs mt-0.5">{credits.purchaseError()}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => credits.clearErrors()}
|
||||||
|
class="text-red-600 hover:text-red-800"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="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" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* Body */}
|
||||||
|
<div class="flex-1 overflow-y-auto p-6">
|
||||||
|
{/* Step 1: Select package */}
|
||||||
|
<Show when={step() === 'select'}>
|
||||||
|
<div class="space-y-6">
|
||||||
|
{/* Current balance */}
|
||||||
|
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<span class="text-sm text-gray-600">Current balance</span>
|
||||||
|
<span class="font-medium text-gray-900">
|
||||||
|
{credits.credits()} credits
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Package selection */}
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-medium text-gray-900 mb-3">
|
||||||
|
Select a credit package
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-3 gap-3">
|
||||||
|
{CREDIT_PACKAGES.map((pkg) => (
|
||||||
|
<PackageCard pkg={pkg} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment method */}
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-medium text-gray-900 mb-3">
|
||||||
|
Payment method
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-2">
|
||||||
|
{PAYMENT_METHODS.map((method) => (
|
||||||
|
<PaymentMethod method={method} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary */}
|
||||||
|
<div class="p-4 bg-indigo-50 rounded-xl">
|
||||||
|
<div class="flex items-center justify-between text-sm">
|
||||||
|
<span class="text-indigo-900">Package</span>
|
||||||
|
<span class="font-medium text-indigo-900">
|
||||||
|
{selectedPackage().credits} credits
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-sm mt-2">
|
||||||
|
<span class="text-indigo-900">Total</span>
|
||||||
|
<span class="text-lg font-bold text-indigo-900">
|
||||||
|
${selectedPackage().price.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-indigo-700 mt-2">
|
||||||
|
Estimated {operationsEstimate()} job descriptions
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* Step 2: Confirm */}
|
||||||
|
<Show when={step() === 'confirm'}>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-full text-indigo-600 mb-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-medium text-gray-900">
|
||||||
|
Confirm your purchase
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-500 mt-1">
|
||||||
|
You're about to purchase {selectedPackage().credits} credits
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex justify-between p-3 bg-gray-50 rounded-lg">
|
||||||
|
<span class="text-gray-600">Credits</span>
|
||||||
|
<span class="font-medium">{selectedPackage().credits}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between p-3 bg-gray-50 rounded-lg">
|
||||||
|
<span class="text-gray-600">Payment method</span>
|
||||||
|
<span class="font-medium">
|
||||||
|
{PAYMENT_METHODS.find(m => m.id === selectedPayment())?.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between p-3 bg-indigo-50 rounded-lg">
|
||||||
|
<span class="text-indigo-900 font-medium">Total amount</span>
|
||||||
|
<span class="text-lg font-bold text-indigo-900">
|
||||||
|
${selectedPackage().price.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* Step 3: Success */}
|
||||||
|
<Show when={step() === 'success'}>
|
||||||
|
<div class="text-center py-4">
|
||||||
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full text-green-600 mb-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-medium text-gray-900">
|
||||||
|
Credits added!
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-500 mt-2">
|
||||||
|
You now have <strong>{purchaseResult()?.new_balance}</strong> credits available.
|
||||||
|
</p>
|
||||||
|
<Show when={purchaseResult()?.transaction_id}>
|
||||||
|
<p class="text-xs text-gray-400 mt-4">
|
||||||
|
Transaction ID: {purchaseResult()?.transaction_id}
|
||||||
|
</p>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div class="p-6 border-t border-gray-100 bg-gray-50">
|
||||||
|
<Show when={step() === 'select'}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleContinue}
|
||||||
|
class="w-full py-3 px-4 bg-indigo-600 text-white font-medium rounded-xl hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||||
|
>
|
||||||
|
Continue
|
||||||
|
</button>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<Show when={step() === 'confirm'}>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setStep('select')}
|
||||||
|
disabled={credits.isPurchasing()}
|
||||||
|
class="flex-1 py-3 px-4 bg-white text-gray-700 font-medium rounded-xl border border-gray-300 hover:bg-gray-50 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handlePurchase}
|
||||||
|
disabled={credits.isPurchasing()}
|
||||||
|
class="flex-1 py-3 px-4 bg-indigo-600 text-white font-medium rounded-xl hover:bg-indigo-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Show when={credits.isPurchasing()} fallback="Pay Now">
|
||||||
|
<LoadingSpinner size="sm" />
|
||||||
|
Processing...
|
||||||
|
</Show>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<Show when={step() === 'success'}>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleDone}
|
||||||
|
class="flex-1 py-3 px-4 bg-indigo-600 text-white font-medium rounded-xl hover:bg-indigo-700 transition-colors"
|
||||||
|
>
|
||||||
|
Done
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleBuyMore}
|
||||||
|
class="flex-1 py-3 px-4 bg-white text-gray-700 font-medium rounded-xl border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
Buy More
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// CSS animations
|
||||||
|
const style = `
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.95) translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Inject styles
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
const styleEl = document.createElement('style');
|
||||||
|
styleEl.textContent = style;
|
||||||
|
document.head.appendChild(styleEl);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AskAshModal;
|
||||||
25
src/components/AskAsh/index.ts
Normal file
25
src/components/AskAsh/index.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
// Ask Ash AI Credit System Components
|
||||||
|
// SolidJS + TypeScript frontend components for AI generation with credit system
|
||||||
|
|
||||||
|
// Components
|
||||||
|
export { AiGenerateButton, type AiGenerateButtonProps } from './AiGenerateButton';
|
||||||
|
export { AskAshModal, type AskAshModalProps } from './AskAshModal';
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
export {
|
||||||
|
useAiCredits,
|
||||||
|
type UseAiCreditsReturn,
|
||||||
|
generateContent,
|
||||||
|
purchaseCredits,
|
||||||
|
CREDIT_COSTS,
|
||||||
|
} from '../hooks/useAiCredits';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export type {
|
||||||
|
CreditBalance,
|
||||||
|
GenerateRequest,
|
||||||
|
GenerateResponse,
|
||||||
|
PurchaseRequest,
|
||||||
|
PurchaseResponse,
|
||||||
|
ApiError,
|
||||||
|
} from '../hooks/useAiCredits';
|
||||||
257
src/hooks/useAiCredits.ts
Normal file
257
src/hooks/useAiCredits.ts
Normal file
|
|
@ -0,0 +1,257 @@
|
||||||
|
import { createSignal, createResource, createEffect, Accessor } from 'solid-js';
|
||||||
|
|
||||||
|
// API base URL - can be configured via environment
|
||||||
|
const API_BASE = import.meta.env.VITE_API_BASE_URL || '';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export interface CreditBalance {
|
||||||
|
credits: number;
|
||||||
|
tracecoin_balance: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GenerateRequest {
|
||||||
|
type: 'job_description' | 'interview_question' | 'resume_review';
|
||||||
|
context: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GenerateResponse {
|
||||||
|
content: string;
|
||||||
|
credits_used: number;
|
||||||
|
remaining_credits: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PurchaseRequest {
|
||||||
|
amount: number;
|
||||||
|
payment_method: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PurchaseResponse {
|
||||||
|
success: boolean;
|
||||||
|
credits_added: number;
|
||||||
|
new_balance: number;
|
||||||
|
transaction_id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiError {
|
||||||
|
code: string;
|
||||||
|
message: string;
|
||||||
|
details?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Credit costs for different operations
|
||||||
|
export const CREDIT_COSTS: Record<string, number> = {
|
||||||
|
job_description: 1,
|
||||||
|
interview_question: 1,
|
||||||
|
resume_review: 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fetch credit balance from API
|
||||||
|
async function fetchCredits(): Promise<CreditBalance> {
|
||||||
|
const response = await fetch(`${API_BASE}/api/ai/credits`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error: ApiError = await response.json().catch(() => ({
|
||||||
|
code: 'FETCH_ERROR',
|
||||||
|
message: `Failed to fetch credits: ${response.statusText}`,
|
||||||
|
}));
|
||||||
|
throw new Error(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate AI content
|
||||||
|
export async function generateContent(
|
||||||
|
request: GenerateRequest
|
||||||
|
): Promise<GenerateResponse> {
|
||||||
|
const response = await fetch(`${API_BASE}/api/ai/generate`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error: ApiError = await response.json().catch(() => ({
|
||||||
|
code: 'GENERATE_ERROR',
|
||||||
|
message: `Failed to generate content: ${response.statusText}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (response.status === 402) {
|
||||||
|
throw new Error('Insufficient credits. Please purchase more credits to continue.');
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Purchase credits
|
||||||
|
export async function purchaseCredits(
|
||||||
|
request: PurchaseRequest
|
||||||
|
): Promise<PurchaseResponse> {
|
||||||
|
const response = await fetch(`${API_BASE}/api/ai/credits/purchase`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error: ApiError = await response.json().catch(() => ({
|
||||||
|
code: 'PURCHASE_ERROR',
|
||||||
|
message: `Failed to purchase credits: ${response.statusText}`,
|
||||||
|
}));
|
||||||
|
throw new Error(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main hook for credit management
|
||||||
|
export interface UseAiCreditsReturn {
|
||||||
|
// Credit data
|
||||||
|
credits: Accessor<number>;
|
||||||
|
tracecoinBalance: Accessor<number>;
|
||||||
|
creditResource: ReturnType<typeof createResource<CreditBalance>>;
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
isLoading: Accessor<boolean>;
|
||||||
|
isGenerating: Accessor<boolean>;
|
||||||
|
isPurchasing: Accessor<boolean>;
|
||||||
|
|
||||||
|
// Error states
|
||||||
|
error: Accessor<string | null>;
|
||||||
|
generationError: Accessor<string | null>;
|
||||||
|
purchaseError: Accessor<string | null>;
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
refetchCredits: () => void;
|
||||||
|
generate: (request: GenerateRequest) => Promise<GenerateResponse | null>;
|
||||||
|
purchase: (request: PurchaseRequest) => Promise<PurchaseResponse | null>;
|
||||||
|
clearErrors: () => void;
|
||||||
|
hasEnoughCredits: (cost?: number) => boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAiCredits(): UseAiCreditsReturn {
|
||||||
|
// Resource for fetching credits
|
||||||
|
const [creditResource, { refetch: refetchCredits }] = createResource<CreditBalance>(
|
||||||
|
fetchCredits,
|
||||||
|
{
|
||||||
|
initialValue: { credits: 0, tracecoin_balance: 0 },
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
const [isGenerating, setIsGenerating] = createSignal(false);
|
||||||
|
const [isPurchasing, setIsPurchasing] = createSignal(false);
|
||||||
|
|
||||||
|
// Error states
|
||||||
|
const [error, setError] = createSignal<string | null>(null);
|
||||||
|
const [generationError, setGenerationError] = createSignal<string | null>(null);
|
||||||
|
const [purchaseError, setPurchaseError] = createSignal<string | null>(null);
|
||||||
|
|
||||||
|
// Derived signals for credit data
|
||||||
|
const credits = () => creditResource()?.credits ?? 0;
|
||||||
|
const tracecoinBalance = () => creditResource()?.tracecoin_balance ?? 0;
|
||||||
|
const isLoading = () => creditResource.loading;
|
||||||
|
|
||||||
|
// Clear all errors
|
||||||
|
const clearErrors = () => {
|
||||||
|
setError(null);
|
||||||
|
setGenerationError(null);
|
||||||
|
setPurchaseError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check if user has enough credits
|
||||||
|
const hasEnoughCredits = (cost: number = 1): boolean => {
|
||||||
|
return credits() >= cost;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Generate AI content with error handling
|
||||||
|
const generate = async (
|
||||||
|
request: GenerateRequest
|
||||||
|
): Promise<GenerateResponse | null> => {
|
||||||
|
setIsGenerating(true);
|
||||||
|
setGenerationError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await generateContent(request);
|
||||||
|
// Refetch credits to get updated balance
|
||||||
|
refetchCredits();
|
||||||
|
return response;
|
||||||
|
} catch (err) {
|
||||||
|
const message = err instanceof Error ? err.message : 'Failed to generate content';
|
||||||
|
setGenerationError(message);
|
||||||
|
throw err;
|
||||||
|
} finally {
|
||||||
|
setIsGenerating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Purchase credits with error handling
|
||||||
|
const purchase = async (
|
||||||
|
request: PurchaseRequest
|
||||||
|
): Promise<PurchaseResponse | null> => {
|
||||||
|
setIsPurchasing(true);
|
||||||
|
setPurchaseError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await purchaseCredits(request);
|
||||||
|
// Refetch credits to get updated balance
|
||||||
|
refetchCredits();
|
||||||
|
return response;
|
||||||
|
} catch (err) {
|
||||||
|
const message = err instanceof Error ? err.message : 'Failed to purchase credits';
|
||||||
|
setPurchaseError(message);
|
||||||
|
throw err;
|
||||||
|
} finally {
|
||||||
|
setIsPurchasing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-clear resource errors
|
||||||
|
createEffect(() => {
|
||||||
|
if (creditResource.error) {
|
||||||
|
const err = creditResource.error as Error;
|
||||||
|
setError(err.message || 'Failed to load credits');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Credit data
|
||||||
|
credits,
|
||||||
|
tracecoinBalance,
|
||||||
|
creditResource,
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
isLoading,
|
||||||
|
isGenerating,
|
||||||
|
isPurchasing,
|
||||||
|
|
||||||
|
// Error states
|
||||||
|
error,
|
||||||
|
generationError,
|
||||||
|
purchaseError,
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
refetchCredits,
|
||||||
|
generate,
|
||||||
|
purchase,
|
||||||
|
clearErrors,
|
||||||
|
hasEnoughCredits,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useAiCredits;
|
||||||
Loading…
Add table
Reference in a new issue