3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update API key modal and footer links to use Together AI

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-22 20:29:47 +01:00
parent 3731e3f476
commit 62645297c8
4 changed files with 89 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/api-key-modal.tsx
+42 -30
View File
@@ -1,43 +1,53 @@
"use client"
"use client";
import type React from "react"
import { useState, useEffect } from "react"
import { Key, ExternalLink, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import type React from "react";
import { useState, useEffect } from "react";
import { Key, ExternalLink, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";
import { TOGETHER_LINK } from "@/lib/utils";
interface ApiKeyModalProps {
isOpen: boolean
onClose: () => void
onSubmit: (key: string) => void
isOpen: boolean;
onClose: () => void;
onSubmit: (key: string) => void;
}
export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
const [apiKey, setApiKey] = useState("")
const [isLoading, setIsLoading] = useState(false)
const [existingKey, setExistingKey] = useState<string | null>(null)
const [apiKey, setApiKey] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [existingKey, setExistingKey] = useState<string | null>(null);
useEffect(() => {
if (typeof window !== "undefined" && isOpen) {
const storedKey = localStorage.getItem("together_api_key")
setExistingKey(storedKey)
if (storedKey && apiKey === "") {
setApiKey(storedKey)
}
const storedKey = localStorage.getItem("together_api_key");
setExistingKey(storedKey);
setApiKey((current) => {
if (storedKey && current === "") {
return storedKey;
}
return current;
});
}
}, [isOpen])
}, [isOpen]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!apiKey.trim()) return
e.preventDefault();
if (!apiKey.trim()) return;
setIsLoading(true)
await new Promise((resolve) => setTimeout(resolve, 500))
setIsLoading(false)
onSubmit(apiKey.trim())
setApiKey("")
}
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
setIsLoading(false);
onSubmit(apiKey.trim());
setApiKey("");
};
return (
<Dialog open={isOpen} onOpenChange={onClose}>
@@ -50,7 +60,9 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
</div>
<DialogTitle className="text-xl text-center text-white">
{existingKey ? "Update your API key" : "Add your API key to continue"}
{existingKey
? "Update your API key"
: "Add your API key to continue"}
</DialogTitle>
<DialogDescription className="text-center text-muted-foreground">
@@ -70,7 +82,7 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
/>
<a
href="https://together.ai"
href={TOGETHER_LINK}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-indigo hover:text-indigo-light flex items-center gap-1.5 transition-colors"
@@ -106,5 +118,5 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
</div>
</DialogContent>
</Dialog>
)
);
}