+
+
+ {/* Custom popup notification */}
+ {showPopup && (
+
+ );
+};
+
+export default StarBoardButton;
\ No newline at end of file
diff --git a/src/components/auth/CryptoDebug.tsx b/src/components/auth/CryptoDebug.tsx
new file mode 100644
index 0000000..6c60065
--- /dev/null
+++ b/src/components/auth/CryptoDebug.tsx
@@ -0,0 +1,265 @@
+import React, { useState } from 'react';
+import { CryptoAuthService } from '../../lib/auth/cryptoAuthService';
+import * as crypto from '../../lib/auth/crypto';
+
+const CryptoDebug: React.FC = () => {
+ const [testResults, setTestResults] = useState
+ {popupMessage}
+
+ )}
+
+
+ );
+};
+
+export default CryptoDebug;
\ No newline at end of file
diff --git a/src/components/auth/CryptoLogin.tsx b/src/components/auth/CryptoLogin.tsx
new file mode 100644
index 0000000..4a4899e
--- /dev/null
+++ b/src/components/auth/CryptoLogin.tsx
@@ -0,0 +1,279 @@
+import React, { useState, useEffect } from 'react';
+import { CryptoAuthService } from '../../lib/auth/cryptoAuthService';
+import { useAuth } from '../../context/AuthContext';
+import { useNotifications } from '../../context/NotificationContext';
+import { checkBrowserSupport, isSecureContext } from '../../lib/utils/browser';
+
+interface CryptoLoginProps {
+ onSuccess?: () => void;
+ onCancel?: () => void;
+}
+
+/**
+ * WebCryptoAPI-based authentication component
+ */
+const CryptoLogin: React.FCCryptographic Authentication Debug
+ +
+ setTestUsername(e.target.value)}
+ placeholder="Test username"
+ className="debug-input"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Debug Results:
+ {testResults.length === 0 ? ( +No test results yet. Click "Run Crypto Test" to start.
+ ) : ( +
+ {testResults.map((result, index) => (
+
+ )}
+
+ {result}
+
+ ))}
+
+
+ );
+ }
+
+ if (!browserSupport.secure) {
+ return (
+ Browser Not Supported
+Your browser does not support the required features for cryptographic authentication.
+Please use a modern browser with WebCryptoAPI support.
+ {onCancel && ( + + )} +
+
+ );
+ }
+
+ return (
+ Secure Context Required
+Cryptographic authentication requires a secure context (HTTPS).
+Please access this application over HTTPS.
+ {onCancel && ( + + )} +
+
+ );
+};
+
+export default CryptoLogin;
\ No newline at end of file
diff --git a/src/components/auth/CryptoTest.tsx b/src/components/auth/CryptoTest.tsx
new file mode 100644
index 0000000..ebc3cee
--- /dev/null
+++ b/src/components/auth/CryptoTest.tsx
@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import { CryptoAuthService } from '../../lib/auth/cryptoAuthService';
+import { checkBrowserSupport, isSecureContext } from '../../lib/utils/browser';
+import * as crypto from '../../lib/auth/crypto';
+
+/**
+ * Test component to verify WebCryptoAPI authentication
+ */
+const CryptoTest: React.FC = () => {
+ const [testResults, setTestResults] = useState{isRegistering ? 'Create Cryptographic Account' : 'Cryptographic Sign In'}
+ + {/* Show existing users if available */} + {existingUsers.length > 0 && !isRegistering && ( +
+
+ )}
+
+ Available Accounts with Valid Keys
+
+ {existingUsers.map((user) => (
+
+ ))}
+
+
+
+
+
+
+ + {isRegistering + ? 'Create a new account using WebCryptoAPI for secure authentication.' + : existingUsers.length > 0 + ? 'Select an account above or enter a different username to sign in.' + : 'Sign in using your cryptographic credentials.' + } +
+
+ ✓ ECDSA P-256 Key Pairs
+ ✓ Challenge-Response Authentication
+ ✓ Secure Key Storage
+
+
+
+
+
+ {onCancel && (
+
+ )}
+
+
+ );
+};
+
+export default CryptoTest;
\ No newline at end of file
diff --git a/src/components/auth/LinkDevice.tsx b/src/components/auth/LinkDevice.tsx
new file mode 100644
index 0000000..695d804
--- /dev/null
+++ b/src/components/auth/LinkDevice.tsx
@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { createAccountLinkingConsumer } from '../../lib/auth/linking'
+import { useAuth } from '../../context/AuthContext'
+import { useNotifications } from '../../context/NotificationContext'
+
+const LinkDevice: React.FC = () => {
+ const [username, setUsername] = useState('')
+ const [displayPin, setDisplayPin] = useState('')
+ const [view, setView] = useState<'enter-username' | 'show-pin' | 'load-filesystem'>('enter-username')
+ const [accountLinkingConsumer, setAccountLinkingConsumer] = useStateWebCryptoAPI Authentication Test
+ +
+
+
+
+
+
+
+
+
+ Test Results:
+ {testResults.length === 0 ? ( +No test results yet. Click "Run Tests" to start.
+ ) : ( +
+ {testResults.map((result, index) => (
+
+ )}
+
+ {result}
+
+ ))}
+
+
+ What's Being Tested:
+-
+
- Browser WebCryptoAPI support +
- Secure context (HTTPS) +
- ECDSA P-256 key pair generation +
- Public key export/import +
- Data signing and verification +
- User registration with cryptographic keys +
- User login with challenge-response +
- Credential verification +
+ {view === 'enter-username' && (
+ <>
+
+ )
+}
+
+export default LinkDevice
\ No newline at end of file
diff --git a/src/components/auth/Loading.tsx b/src/components/auth/Loading.tsx
new file mode 100644
index 0000000..d877aed
--- /dev/null
+++ b/src/components/auth/Loading.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface LoadingProps {
+ message?: string;
+}
+
+const Loading: React.FCLink a New Device
+ + + )} + + {view === 'show-pin' && ( +
+
+ )}
+
+ {view === 'load-filesystem' && (
+ Enter this PIN on your other device
+{displayPin}
+
+
+ )}
+ Loading your filesystem...
+Please wait while we connect to your account.
+
+
+ );
+};
+
+export default Loading;
\ No newline at end of file
diff --git a/src/components/auth/LoginButton.tsx b/src/components/auth/LoginButton.tsx
new file mode 100644
index 0000000..fedfa84
--- /dev/null
+++ b/src/components/auth/LoginButton.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
+import { useNotifications } from '../../context/NotificationContext';
+import CryptoLogin from './CryptoLogin';
+
+interface LoginButtonProps {
+ className?: string;
+}
+
+const LoginButton: React.FC
+
+
+ {message}
+
+
+ )}
+
+ );
+};
+
+export default LoginButton;
\ No newline at end of file
diff --git a/src/components/auth/Profile.tsx b/src/components/auth/Profile.tsx
new file mode 100644
index 0000000..63d38b1
--- /dev/null
+++ b/src/components/auth/Profile.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { useAuth } from '../../context/AuthContext';
+import { clearSession } from '../../lib/init';
+
+interface ProfileProps {
+ onLogout?: () => void;
+}
+
+export const Profile: React.FC
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/auth/ProtectedRoute.tsx b/src/components/auth/ProtectedRoute.tsx
new file mode 100644
index 0000000..06daeb9
--- /dev/null
+++ b/src/components/auth/ProtectedRoute.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useAuth } from '../../../src/context/AuthContext';
+
+interface ProtectedRouteProps {
+ children: React.ReactNode;
+}
+
+export const ProtectedRoute: React.FC
+
+
+ Welcome, {session.username}!
+
+
+
+
+ {!session.backupCreated && (
+
+
+ )}
+ Remember to back up your encryption keys to prevent data loss!
+
+
+ );
+ }
+
+ // For board routes, we'll allow access even if not authenticated
+ // The auth button in the toolbar will handle authentication
+ return <>{children};
+};
\ No newline at end of file
diff --git a/src/components/auth/Register.tsx b/src/components/auth/Register.tsx
new file mode 100644
index 0000000..9ae42b0
--- /dev/null
+++ b/src/components/auth/Register.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { register } from '../../lib/auth/account'
+
+const Register: React.FC = () => {
+ const [username, setUsername] = useState('')
+ const [checkingUsername, setCheckingUsername] = useState(false)
+ const [initializingFilesystem, setInitializingFilesystem] = useState(false)
+ const [error, setError] = useStateChecking authentication...
+
+
+ )
+}
+
+export default Register
\ No newline at end of file
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
new file mode 100644
index 0000000..4bd695e
--- /dev/null
+++ b/src/context/AuthContext.tsx
@@ -0,0 +1,171 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import type FileSystem from '@oddjs/odd/fs/index';
+import { Session, SessionError } from '../lib/auth/types';
+import { AuthService } from '../lib/auth/authService';
+import { saveSession, clearStoredSession } from '../lib/auth/sessionPersistence';
+
+interface AuthContextType {
+ session: Session;
+ setSession: (updatedSession: PartialCreate an Account
+ + +
+
+ );
+ }
+
+ if (session.error) {
+ return (
+
+
+ Loading authentication system...
+
+
+ );
+ }
+
+ return (
+
+
+ Authentication Error
+{session.error}
+
+ navigate('/')} />
+
+ );
+};
\ No newline at end of file
diff --git a/src/routes/Board.tsx b/src/routes/Board.tsx
index 8351194..3cf0992 100644
--- a/src/routes/Board.tsx
+++ b/src/routes/Board.tsx
@@ -48,6 +48,9 @@ import "react-cmdk/dist/cmdk.css"
import "@/css/style.css"
const collections: Collection[] = [GraphLayoutCollection]
+import { useAuth } from "../context/AuthContext"
+import { updateLastVisited } from "../lib/starredBoards"
+import { captureBoardScreenshot } from "../lib/screenshotService"
// Default to production URL if env var isn't available
export const WORKER_URL = "https://jeffemmett-canvas.jeffemmett.workers.dev"
@@ -77,6 +80,7 @@ const customTools = [
export function Board() {
const { slug } = useParams<{ slug: string }>()
const roomId = slug || "default-room"
+ const { session } = useAuth()
const storeConfig = useMemo(
() => ({
@@ -84,8 +88,13 @@ export function Board() {
assets: multiplayerAssetStore,
shapeUtils: [...defaultShapeUtils, ...customShapeUtils],
bindingUtils: [...defaultBindingUtils],
+ // Add user information to the presence system
+ user: session.authed ? {
+ id: session.username,
+ name: session.username,
+ } : undefined,
}),
- [roomId],
+ [roomId, session.authed, session.username],
)
const store = useSync(storeConfig)
@@ -111,6 +120,88 @@ export function Board() {
watchForLockedShapes(editor)
}, [editor])
+ // Update presence when session changes
+ useEffect(() => {
+ if (!editor || !session.authed || !session.username) return
+
+ // The presence should automatically update through the useSync configuration
+ // when the session changes, but we can also try to force an update
+ }, [editor, session.authed, session.username])
+
+ // Update TLDraw user preferences when editor is available and user is authenticated
+ useEffect(() => {
+ if (!editor) return
+
+ try {
+ if (session.authed && session.username) {
+ // Update the user preferences in TLDraw
+ editor.user.updateUserPreferences({
+ id: session.username,
+ name: session.username,
+ });
+ } else {
+ // Set default user preferences when not authenticated
+ editor.user.updateUserPreferences({
+ id: 'user-1',
+ name: 'User 1',
+ });
+ }
+ } catch (error) {
+ console.error('Error updating TLDraw user preferences from Board component:', error);
+ }
+
+ // Cleanup function to reset preferences when user logs out
+ return () => {
+ if (editor) {
+ try {
+ editor.user.updateUserPreferences({
+ id: 'user-1',
+ name: 'User 1',
+ });
+ } catch (error) {
+ console.error('Error resetting TLDraw user preferences:', error);
+ }
+ }
+ };
+ }, [editor, session.authed, session.username]);
+
+ // Track board visit for starred boards
+ useEffect(() => {
+ if (session.authed && session.username && roomId) {
+ updateLastVisited(session.username, roomId);
+ }
+ }, [session.authed, session.username, roomId]);
+
+ // Capture screenshots when board content changes
+ useEffect(() => {
+ if (!editor || !roomId || !store.store) return;
+
+ // Get current shapes to detect changes
+ const currentShapes = editor.getCurrentPageShapes();
+ const currentShapeCount = currentShapes.length;
+
+ // Create a simple hash of the content for change detection
+ const currentContentHash = currentShapes.length > 0
+ ? currentShapes.map(shape => `${shape.id}-${shape.type}`).sort().join('|')
+ : '';
+
+ // Debounced screenshot capture only when content actually changes
+ const timeoutId = setTimeout(async () => {
+ const newShapes = editor.getCurrentPageShapes();
+ const newShapeCount = newShapes.length;
+ const newContentHash = newShapes.length > 0
+ ? newShapes.map(shape => `${shape.id}-${shape.type}`).sort().join('|')
+ : '';
+
+ // Only capture if content actually changed
+ if (newShapeCount !== currentShapeCount || newContentHash !== currentContentHash) {
+ await captureBoardScreenshot(editor, roomId);
+ }
+ }, 3000); // Wait 3 seconds to ensure changes are complete
+
+ return () => clearTimeout(timeoutId);
+ }, [editor, roomId, store.store?.getSnapshot()]); // Still trigger on store changes to detect them
+
return (
+
+ );
+ }
+
+ if (!session.authed) {
+ return (
+ Loading dashboard...
+
+
+ );
+ }
+
+ return (
+
+
+ Authentication Required
+Please log in to access your dashboard.
+ Go Home +
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/shapes/PromptShapeUtil.tsx b/src/shapes/PromptShapeUtil.tsx
index 0ca554f..7de8b4c 100644
--- a/src/shapes/PromptShapeUtil.tsx
+++ b/src/shapes/PromptShapeUtil.tsx
@@ -6,7 +6,7 @@ import {
TLShape,
} from "tldraw"
import { getEdge } from "@/propagators/tlgraph"
-import { llm } from "@/utils/llmUtils"
+import { llm, getApiKey } from "@/utils/llmUtils"
import { isShapeOfType } from "@/propagators/utils"
import React, { useState } from "react"
@@ -89,10 +89,15 @@ export class PromptShape extends BaseBoxShapeUtilMy Dashboard
+Welcome back, {session.username}!
+
+
+
+
+
+
+
+ {isLoading ? (
+ Starred Boards
+ {starredBoards.length} board{starredBoards.length !== 1 ? 's' : ''} +Loading starred boards...
+ ) : starredBoards.length === 0 ? (
+
+
+ ) : (
+ ⭐
+ No starred boards yet
+Star boards you want to save for quick access.
+ Browse Boards +
+ {starredBoards.map((board) => {
+ const screenshot = getBoardScreenshot(board.slug);
+ return (
+
+ )}
+
+ {screenshot && (
+
+ );
+ })}
+
+ 
+
+ )}
+
+
+
+
+ {board.title}
+ +
+
+
+ /{board.slug}
+
+
+ Starred: {formatDate(board.starredAt)}
+
+ {board.lastVisited && (
+
+ Last visited: {formatDate(board.lastVisited)}
+
+ )}
+
+
+
+ Open Board
+
+
+
-
-
-
+
diff --git a/src/ui/overrides.tsx b/src/ui/overrides.tsx
index 1c42d86..342049d 100644
--- a/src/ui/overrides.tsx
+++ b/src/ui/overrides.tsx
@@ -19,7 +19,7 @@ import { EmbedShape, IEmbedShape } from "@/shapes/EmbedShapeUtil"
import { moveToSlide } from "@/slides/useSlides"
import { ISlideShape } from "@/shapes/SlideShapeUtil"
import { getEdge } from "@/propagators/tlgraph"
-import { llm } from "@/utils/llmUtils"
+import { llm, getApiKey } from "@/utils/llmUtils"
export const overrides: TLUiOverrides = {
tools(editor, tools) {
@@ -333,14 +333,23 @@ export const overrides: TLUiOverrides = {
kbd: "alt+g",
readonlyOk: true,
onSelect: () => {
+
const selectedShapes = editor.getSelectedShapes()
+
+
if (selectedShapes.length > 0) {
const selectedShape = selectedShapes[0] as TLArrowShape
+
+
if (selectedShape.type !== "arrow") {
+
return
}
const edge = getEdge(selectedShape, editor)
+
+
if (!edge) {
+
return
}
const sourceShape = editor.getShape(edge.from)
@@ -348,11 +357,15 @@ export const overrides: TLUiOverrides = {
sourceShape && sourceShape.type === "geo"
? (sourceShape as TLGeoShape).props.text
: ""
- llm(
- `Instruction: ${edge.text}
- ${sourceText ? `Context: ${sourceText}` : ""}`,
- localStorage.getItem("openai_api_key") || "",
- (partialResponse: string) => {
+
+
+ const prompt = `Instruction: ${edge.text}
+ ${sourceText ? `Context: ${sourceText}` : ""}`;
+
+
+ try {
+ llm(prompt, (partialResponse: string) => {
+
editor.updateShape({
id: edge.to,
type: "geo",
@@ -361,8 +374,13 @@ export const overrides: TLUiOverrides = {
text: partialResponse,
},
})
- },
- )
+
+ })
+ } catch (error) {
+ console.error("Error calling LLM:", error);
+ }
+ } else {
+
}
},
},
diff --git a/src/utils/llmUtils.ts b/src/utils/llmUtils.ts
index 802aa13..fd766e6 100644
--- a/src/utils/llmUtils.ts
+++ b/src/utils/llmUtils.ts
@@ -1,33 +1,283 @@
import OpenAI from "openai";
+import Anthropic from "@anthropic-ai/sdk";
+import { makeRealSettings } from "@/lib/settings";
export async function llm(
- //systemPrompt: string,
userPrompt: string,
- apiKey: string,
- onToken: (partialResponse: string, done: boolean) => void,
+ onToken: (partialResponse: string, done?: boolean) => void,
) {
- if (!apiKey) {
- throw new Error("No API key found")
+ // Validate the callback function
+ if (typeof onToken !== 'function') {
+ throw new Error("onToken must be a function");
}
- //console.log("System Prompt:", systemPrompt);
- //console.log("User Prompt:", userPrompt);
+
+ // Auto-migrate old format API keys if needed
+ await autoMigrateAPIKeys();
+
+ // Get current settings and available API keys
+ let settings;
+ try {
+ settings = makeRealSettings.get()
+ } catch (e) {
+ settings = null;
+ }
+
+ // Fallback to direct localStorage if makeRealSettings fails
+ if (!settings) {
+ try {
+ const rawSettings = localStorage.getItem("openai_api_key");
+ if (rawSettings) {
+ settings = JSON.parse(rawSettings);
+ }
+ } catch (e) {
+ // Continue with default settings
+ }
+ }
+
+ // Default settings if everything fails
+ if (!settings) {
+ settings = {
+ provider: 'openai',
+ models: { openai: 'gpt-4o', anthropic: 'claude-3-5-sonnet-20241022' },
+ keys: { openai: '', anthropic: '', google: '' }
+ };
+ }
+
+ const availableKeys = settings.keys || {}
+
+ // Determine which provider to use based on available keys
+ let provider: string | null = null
+ let apiKey: string | null = null
+
+ // Check if we have a preferred provider with a valid key
+ if (settings.provider && availableKeys[settings.provider as keyof typeof availableKeys] && availableKeys[settings.provider as keyof typeof availableKeys].trim() !== '') {
+ provider = settings.provider
+ apiKey = availableKeys[settings.provider as keyof typeof availableKeys]
+ } else {
+ // Fallback: use the first available provider with a valid key
+ for (const [key, value] of Object.entries(availableKeys)) {
+ if (typeof value === 'string' && value.trim() !== '') {
+ provider = key
+ apiKey = value
+ break
+ }
+ }
+ }
+
+ if (!provider || !apiKey) {
+ // Try to get keys directly from localStorage as fallback
+ try {
+ const directSettings = localStorage.getItem("openai_api_key");
+ if (directSettings) {
+ // Check if it's the old format (just a string)
+ if (directSettings.startsWith('sk-') && !directSettings.startsWith('{')) {
+ // This is an old format OpenAI key, use it
+ provider = 'openai';
+ apiKey = directSettings;
+ } else {
+ // Try to parse as JSON
+ try {
+ const parsed = JSON.parse(directSettings);
+ if (parsed.keys) {
+ for (const [key, value] of Object.entries(parsed.keys)) {
+ if (typeof value === 'string' && value.trim() !== '') {
+ provider = key;
+ apiKey = value;
+ break;
+ }
+ }
+ }
+ } catch (parseError) {
+ // If it's not JSON and starts with sk-, treat as old format OpenAI key
+ if (directSettings.startsWith('sk-')) {
+ provider = 'openai';
+ apiKey = directSettings;
+ }
+ }
+ }
+ }
+ } catch (e) {
+ // Continue with error handling
+ }
+
+ if (!provider || !apiKey) {
+ throw new Error("No valid API key found for any provider")
+ }
+ }
+
+ const model = settings.models[provider] || getDefaultModel(provider)
let partial = "";
- const openai = new OpenAI({
- apiKey,
- dangerouslyAllowBrowser: true,
- });
- const stream = await openai.chat.completions.create({
- model: "gpt-4o",
- messages: [
- { role: "system", content: 'You are a helpful assistant.' },
- { role: "user", content: userPrompt },
- ],
- stream: true,
- });
- for await (const chunk of stream) {
- partial += chunk.choices[0]?.delta?.content || "";
- onToken(partial, false);
+
+ try {
+ if (provider === 'openai') {
+ const openai = new OpenAI({
+ apiKey,
+ dangerouslyAllowBrowser: true,
+ });
+
+ const stream = await openai.chat.completions.create({
+ model: model,
+ messages: [
+ { role: "system", content: 'You are a helpful assistant.' },
+ { role: "user", content: userPrompt },
+ ],
+ stream: true,
+ });
+
+ for await (const chunk of stream) {
+ const content = chunk.choices[0]?.delta?.content || "";
+ partial += content;
+ onToken(partial, false);
+ }
+ } else if (provider === 'anthropic') {
+ const anthropic = new Anthropic({
+ apiKey,
+ dangerouslyAllowBrowser: true,
+ });
+
+ const stream = await anthropic.messages.create({
+ model: model,
+ max_tokens: 4096,
+ messages: [
+ { role: "user", content: userPrompt }
+ ],
+ stream: true,
+ });
+
+ for await (const chunk of stream) {
+ if (chunk.type === 'content_block_delta' && chunk.delta.type === 'text_delta') {
+ const content = chunk.delta.text || "";
+ partial += content;
+ onToken(partial, false);
+ }
+ }
+ } else {
+ throw new Error(`Unsupported provider: ${provider}`)
+ }
+
+ onToken(partial, true);
+
+ } catch (error) {
+ throw error;
+ }
+}
+
+// Auto-migration function that runs automatically
+async function autoMigrateAPIKeys() {
+ try {
+ const raw = localStorage.getItem("openai_api_key");
+
+ if (!raw) {
+ return; // No key to migrate
+ }
+
+ // Check if it's already in new format
+ if (raw.startsWith('{')) {
+ try {
+ const parsed = JSON.parse(raw);
+ if (parsed.keys && (parsed.keys.openai || parsed.keys.anthropic)) {
+ return; // Already migrated
+ }
+ } catch (e) {
+ // Continue with migration
+ }
+ }
+
+ // If it's old format (starts with sk-)
+ if (raw.startsWith('sk-')) {
+ // Determine which provider this key belongs to
+ let provider = 'openai';
+ if (raw.startsWith('sk-ant-')) {
+ provider = 'anthropic';
+ }
+
+ const newSettings = {
+ provider: provider,
+ models: {
+ openai: 'gpt-4o',
+ anthropic: 'claude-3-5-sonnet-20241022',
+ google: 'gemini-1.5-flash'
+ },
+ keys: {
+ openai: provider === 'openai' ? raw : '',
+ anthropic: provider === 'anthropic' ? raw : '',
+ google: ''
+ },
+ prompts: {
+ system: 'You are a helpful assistant.'
+ }
+ };
+
+ localStorage.setItem("openai_api_key", JSON.stringify(newSettings));
+ }
+
+ } catch (e) {
+ // Silently handle migration errors
+ }
+}
+
+// Helper function to get default model for a provider
+function getDefaultModel(provider: string): string {
+ switch (provider) {
+ case 'openai':
+ return 'gpt-4o'
+ case 'anthropic':
+ return 'claude-3-5-sonnet-20241022'
+ default:
+ return 'gpt-4o'
+ }
+}
+
+// Helper function to get API key from settings for a specific provider
+export function getApiKey(provider: string = 'openai'): string {
+ try {
+ const settings = localStorage.getItem("openai_api_key")
+
+ if (settings) {
+ try {
+ const parsed = JSON.parse(settings)
+
+ if (parsed.keys && parsed.keys[provider]) {
+ const key = parsed.keys[provider];
+ return key;
+ }
+ // Fallback to old format
+ if (typeof settings === 'string' && provider === 'openai') {
+ return settings;
+ }
+ } catch (e) {
+ // Fallback to old format
+ if (typeof settings === 'string' && provider === 'openai') {
+ return settings;
+ }
+ }
+ }
+ return ""
+ } catch (e) {
+ return ""
+ }
+}
+
+// Helper function to get the first available API key from any provider
+export function getFirstAvailableApiKey(): string | null {
+ try {
+ const settings = localStorage.getItem("openai_api_key")
+ if (settings) {
+ const parsed = JSON.parse(settings)
+ if (parsed.keys) {
+ for (const [key, value] of Object.entries(parsed.keys)) {
+ if (typeof value === 'string' && value.trim() !== '') {
+ return value
+ }
+ }
+ }
+ // Fallback to old format
+ if (typeof settings === 'string' && settings.trim() !== '') {
+ return settings
+ }
+ }
+ return null
+ } catch (e) {
+ return null
}
- //console.log("Generated:", partial);
- onToken(partial, true);
}
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
index 3d5b463..10fc862 100644
--- a/vercel.json
+++ b/vercel.json
@@ -25,7 +25,11 @@
"destination": "/"
},
{
- "source": "/presentations/resilience",
+ "source": "/presentations",
+ "destination": "/resilience"
+ },
+ {
+ "source": "/dashboard",
"destination": "/"
}
],
+ {PROVIDERS.map((provider) => (
+
+ handleKeyChange(provider.id, value)}
+ />
+ {apiKeys[provider.id] && !validateKey(provider.id, apiKeys[provider.id]) && (
+
+ ))}
+
+
+
+
+ {provider.models[0]}
+
+
+
+ Invalid API key format
+
+ )}
+
+ {provider.help && (
+
+ Learn more about {provider.name} setup →
+
+ )}
+
+
+
+ Note: API keys are stored locally in your browser.
+ Make sure to use keys with appropriate usage limits for your needs.
+
+