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="space-y-2">
12 <label className="block text-sm font-medium text-gray-700">
13 <a target="_blank" href="https://www.val.town/settings/api" className="underline hover:text-slate-400">
14 Val Town API Token
15 </a>
16 {""}(with <code>projects:write</code> and <code>users:read</code> permission)
26 </div>
27 <div className="space-y-2">
28 <label className="block text-sm font-medium text-gray-700">Anthropic API Key</label>
29 <input
30 type="password"
31 value={anthropicApiKey}
32 onChange={(e: any) => setAnthropicApiKey(e.target.value)}
33 placeholder="sk-ant-xxxxx"
34 autoComplete="off"
5const app = new Hono();
6
7app.route("/api", backend);
8app.get("/frontend/*", c => {
9 return serveFile(c.req.path, import.meta.url);
236 ];
237
238 // Capitalize first letter
239 if (num >= 0 && num <= 10) {
240 const word = words[num];
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";
12
14 project,
15 bearerToken,
16 anthropicApiKey,
17 setProject,
18}: {
19 project: any;
20 bearerToken: string;
21 anthropicApiKey: string;
22 setProject: (project: any) => void;
23}) {
56 project,
57 branchId,
58 anthropicApiKey,
59 bearerToken,
60 selectedFiles,
169
170 <div className="p-6 flex flex-col h-full w-full">
171 <ApiKeyWarning show={!anthropicApiKey} />
172
173 <ChatMessages
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}`,
16export function App() {
17 const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
18 const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
19 const [projectJSON, setProjectJSON] = useLocalStorage("project", "");
20 const [project, setProject_] = useState(safeParse(projectJSON));
27 function handleLogout() {
28 setBearerToken("");
29 // Keep the anthropic API key in case the user wants to reuse it
30 }
31
46 <Chat
47 bearerToken={bearerToken}
48 anthropicApiKey={anthropicApiKey}
49 project={project}
50 setProject={setProject}
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 );
