19 }
20
21 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
22 console.log("Original messages:", JSON.stringify(messages, null, 2));
23 console.log("Images received:", JSON.stringify(images, null, 2));
24
25 // Check if API key is available
26 if (!anthropicApiKey) {
27 return Response.json({
28 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
29 }, { status: 400 });
30 }
31
32 let apiKey;
33 if (!anthropicApiKey) {
34 return Response.json({
35 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
36 }, { status: 400 });
37 } else if (anthropicApiKey === Deno.env.get("PASSWORD")) {
38 apiKey = Deno.env.get("PROVIDED_ANTHROPIC_API_KEY");
39 } else {
40 apiKey = anthropicApiKey;
41 }
42
43 const anthropic = createAnthropic({
44 apiKey,
45 });
46
10
11async function loader({ bearerToken }: { bearerToken: string }) {
12 const data = await (await fetch("/api/projects-loader", {
13 headers: {
14 "Authorization": "Bearer " + bearerToken,
4export function Login() {
5 const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
6 const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
7
8 return (
11 <div className="text-center mb-8">
12 <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2 tracking-tight">Login to OpenTownie</h2>
13 <p className="text-sm sm:text-base text-gray-600 mb-4">Enter your API keys to get started</p>
14 </div>
15
20 <a
21 target="_blank"
22 href="https://www.val.town/settings/api"
23 className="text-indigo-600 hover:text-indigo-800 font-medium flex items-center transition-colors duration-200"
24 >
25 Val Town API Token
26 <svg
27 xmlns="http://www.w3.org/2000/svg"
78 <label className="block text-sm font-medium text-gray-700">
79 <div className="flex items-center mb-1">
80 <span>Anthropic API Key</span>
81 <a
82 href="https://console.anthropic.com/settings/keys"
91 <input
92 type="password"
93 value={anthropicApiKey}
94 onChange={(e: any) => setAnthropicApiKey(e.target.value)}
95 placeholder="sk-ant-xxxxx"
96 autoComplete="off"
124
125 <div className="text-center text-xs text-gray-500 mt-6 bg-gray-50 p-3 rounded-lg">
126 Your API keys are stored locally in your browser and never stored on our servers.
127 </div>
128 </div>
236 ];
237
238 // Capitalize first letter
239 if (num >= 0 && num <= 10) {
240 const word = words[num];
32
33 try {
34 const response = await fetch("/api/create-project", {
35 method: "POST",
36 headers: {
43
44 try {
45 const response = await fetch("/api/create-branch", {
46 method: "POST",
47 headers: {
8import { ChatMessages } from "./ChatMessages.tsx";
9import { ChatInput } from "./ChatInput.tsx";
10import { ApiKeyWarning } from "./ApiKeyWarning.tsx";
11import { processFiles } from "./ImageUpload.tsx";
12import { Preview } from "./Preview.tsx";
15 project,
16 bearerToken,
17 anthropicApiKey,
18 setProject,
19}: {
20 project: any;
21 bearerToken: string;
22 anthropicApiKey: string;
23 setProject: (project: any) => void;
24}) {
57 project,
58 branchId,
59 anthropicApiKey,
60 bearerToken,
61 selectedFiles,
170
171 <div className="p-6 flex flex-col h-full w-full">
172 <ApiKeyWarning show={!anthropicApiKey} />
173
174 <div className="flex flex-col lg:flex-row gap-4">
37 setIsLoadingBranches(true);
38 try {
39 const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
40 headers: {
41 "Authorization": `Bearer ${bearerToken}`,
107 const fetchBranches = async () => {
108 try {
109 const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
110 headers: {
111 "Authorization": `Bearer ${bearerToken}`,
3 { bearerToken, projectId, branchId }: { bearerToken: string; projectId: string; branchId?: string },
4) {
5 const url = new URL("/api/project-files", window.location.origin);
6 url.searchParams.append("projectId", projectId);
7 if (branchId) {
2import React from "https://esm.sh/react@18.2.0?dev";
3
4interface ApiKeyWarningProps {
5 show: boolean;
6}
7
8export function ApiKeyWarning({ show }: ApiKeyWarningProps) {
9 if (!show) return null;
10
11 return (
12 <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 rounded">
13 <p className="font-bold">Anthropic API Key Missing</p>
14 <p>Please log out and add your Anthropic API key to use this app.</p>
15 </div>
16 );
