feat: Add web version with working settings menu and API key configuration

- Created web-compatible settings service (webSettingsService.ts)
- Added WebSettingsModal component with API key input functionality
- Created WebApp component for web-only functionality
- Updated geminiService to work with web settings
- Added web build script and configuration
- Enhanced docs/index.html with modern styling and loading indicator
- Added comprehensive documentation for web version
- All web functionality works without Electron dependencies
- Settings menu allows pasting API keys with validation
- Custom prompts management in web version
- Responsive design with Material-UI components

Author: involvex

.github/workflows/auto-version.yml

@@ -119,7 +119,7 @@ jobs:
         run: |
           sudo apt-get update && sudo apt-get install -y jq
           COMMITS=$(git log -10 --pretty=format:"%s" | jq -R -s -c '.')
-          PROMPT="Write concise, user-friendly release notes for these commits: $COMMITS"
+          PROMPT="Write detailedrelease notes for these commits: $COMMITS"
           # Use jq to build the JSON payload safely
           jq -n --arg prompt "$PROMPT" \
             '{contents: [{parts: [{text: $prompt}]}]}' > payload.json

App.tsx

@@ -0,0 +1,343 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { generateChatResponses } from './services/geminiService';
+import {
+  Button, Select, MenuItem, Checkbox, FormControlLabel, Snackbar, AppBar, Toolbar, Typography, IconButton, Container, Paper, Box, Modal, CssBaseline
+} from '@mui/material';
+import type { SavedMessageSet } from './types';
+import WebSettingsModal from './src/components/WebSettingsModal';
+import { webSettingsService, type WebAppConfig } from './services/webSettingsService';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+type CustomPromptType = string | { prompt: string; label?: string; type?: string };
+
+// Minimal ErrorBoundary for runtime safety
+class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean }> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() { return { hasError: true }; }
+  render() { return this.state.hasError ? <div>Something went wrong.</div> : this.props.children; }
+}
+
+function WebApp() {
+  // --- State ---
+  const [selectedCustomPrompt] = useState<CustomPromptType>('');
+  const hotkeyHints = [
+    { key: 'Ctrl+Alt+S', label: 'Screenshot' },
+    { key: 'Ctrl+Alt+G', label: 'Generate' },
+    { key: 'Ctrl+Alt+F', label: 'Funnier' },
+    { key: 'Ctrl+Alt+N', label: 'New Image' }
+  ];
+  const [autoGenerate, setAutoGenerate] = useState(() => {
+    const saved = localStorage.getItem('autoGenerate');
+    return saved !== null ? JSON.parse(saved) : true;
+  });
+  const [notification, setNotification] = useState<string | undefined>(undefined);
+  const [isDragging, setIsDragging] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [customButtonLabel, setCustomButtonLabel] = useState('Custom Action');
+  const [customActionEnabled, setCustomActionEnabled] = useState(true);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Add missing state for screenshotUrl, responses, error, isLoading
+  const [screenshotUrl, setScreenshotUrl] = useState<string | undefined>(undefined);
+  const [responses, setResponses] = useState<any>(undefined);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // --- Handlers ---
+  const triggerFileInput = useCallback(() => {
+    if (fileInputRef.current) fileInputRef.current.click();
+  }, []);
+
+  const handleGeneration = useCallback(
+    async (
+      makeItFunnier = false,
+      imageUrl?: string,
+      customPromptId?: string,
+      messageCount = 5
+    ) => {
+      setIsLoading(true);
+      setError(undefined);
+      setResponses(undefined);
+      const funninessLevel = makeItFunnier ? 2 : 1;
+      const customPrompt = customPromptId || (typeof selectedCustomPrompt === 'string' ? selectedCustomPrompt : selectedCustomPrompt.prompt);
+      const imageToUse = imageUrl ?? screenshotUrl ?? undefined;
+      try {
+        const response = await generateChatResponses(imageToUse || '', makeItFunnier, customPrompt, messageCount);
+        setResponses(response);
+      } catch (err: any) {
+        setError(err?.message || 'Failed to generate chat messages');
+      } finally {
+        setIsLoading(false);
+      }
+    }, [selectedCustomPrompt, screenshotUrl]);
+
+  const processImageFile = useCallback(
+    (fileOrUrl: File | string | undefined, _autoGen: boolean) => {
+      let imageUrl: string | undefined = undefined;
+      if (!fileOrUrl) {
+        setError('No image selected');
+        return;
+      }
+      if (typeof fileOrUrl === 'string') {
+        imageUrl = fileOrUrl;
+      } else {
+        imageUrl = URL.createObjectURL(fileOrUrl);
+      }
+      setScreenshotUrl(imageUrl);
+      setError(undefined);
+      setResponses(undefined);
+    }, []);
+
+  const handleFileChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      processImageFile(file, autoGenerate);
+    }
+  }, [processImageFile, autoGenerate]);
+
+  const handleDrop = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    setIsDragging(false);
+    const files = event.dataTransfer.files;
+    if (files.length > 0) {
+      processImageFile(files[0], autoGenerate);
+    }
+  }, [processImageFile, autoGenerate]);
+
+  const handleDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const resetSelection = useCallback(() => {
+    setScreenshotUrl(undefined);
+    setResponses(undefined);
+    setError(undefined);
+  }, []);
+
+  const handleConfigUpdate = useCallback((config: WebAppConfig) => {
+    if (typeof config.customActionEnabled === 'boolean') {
+      setCustomActionEnabled(config.customActionEnabled);
+    }
+    if (typeof config.customButtonLabel === 'string') {
+      setCustomButtonLabel(config.customButtonLabel);
+    }
+  }, []);
+
+  // Load config on mount
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const config = await webSettingsService.getConfig();
+        if (typeof config.customActionEnabled === 'boolean') {
+          setCustomActionEnabled(config.customActionEnabled);
+        }
+        if (typeof config.customButtonLabel === 'string') {
+          setCustomButtonLabel(config.customButtonLabel);
+        }
+      } catch (error) {
+        console.error('Failed to load config:', error);
+      }
+    };
+    loadConfig();
+  }, []);
+
+  // Save autoGenerate to localStorage
+  useEffect(() => {
+    localStorage.setItem('autoGenerate', JSON.stringify(autoGenerate));
+  }, [autoGenerate]);
+
+  const theme = createTheme({
+    palette: {
+      mode: 'dark',
+      primary: {
+        main: '#00bcd4',
+      },
+      secondary: {
+        main: '#f50057',
+      },
+    },
+  });
+
+  return (
+    <ErrorBoundary>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box sx={{ flexGrow: 1 }}>
+          <AppBar position="static" sx={{ backgroundColor: 'grey.900' }}>
+            <Toolbar>
+              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                New World Chat AI
+              </Typography>
+              <IconButton
+                color="inherit"
+                title="Settings"
+                onClick={() => setShowSettings(true)}
+              >
+                <span role="img" aria-label="settings">⚙️</span>
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+
+          <Container maxWidth="lg" sx={{ mt: 4 }}>
+            <Paper 
+              elevation={3} 
+              sx={{ 
+                p: 3, 
+                backgroundColor: 'grey.800',
+                border: isDragging ? '2px dashed #00bcd4' : '2px dashed transparent',
+                transition: 'border 0.2s ease-in-out'
+              }}
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+            >
+              <Box sx={{ textAlign: 'center', mb: 3 }}>
+                <Typography variant="h5" component="h1" gutterBottom>
+                  New World Chat AI
+                </Typography>
+                <Typography variant="body1" color="text.secondary" gutterBottom>
+                  Upload an image or drag and drop to generate chat messages
+                </Typography>
+              </Box>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center' }}>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  onChange={handleFileChange}
+                  style={{ display: 'none' }}
+                  aria-label="Select image file"
+                />
+                
+                <Button
+                  variant="contained"
+                  onClick={triggerFileInput}
+                  sx={{ mb: 2 }}
+                >
+                  📸 Select Image
+                </Button>
+
+                {screenshotUrl && (
+                  <Box sx={{ mt: 2, textAlign: 'center' }}>
+                    <img 
+                      src={screenshotUrl} 
+                      alt="Screenshot" 
+                      style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '8px' }}
+                    />
+                    <Box sx={{ mt: 2, display: 'flex', gap: 1, justifyContent: 'center', flexWrap: 'wrap' }}>
+                      <Button
+                        variant="contained"
+                        onClick={() => handleGeneration()}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? 'Generating...' : 'Generate Chat Messages'}
+                      </Button>
+                      <Button
+                        variant="outlined"
+                        onClick={() => handleGeneration(true)}
+                        disabled={isLoading}
+                      >
+                        Make it Funnier
+                      </Button>
+                      <Button
+                        variant="outlined"
+                        onClick={resetSelection}
+                      >
+                        New Image
+                      </Button>
+                    </Box>
+                  </Box>
+                )}
+
+                {error && (
+                  <Typography color="error" sx={{ mt: 2 }}>
+                    {error}
+                  </Typography>
+                )}
+
+                {responses && responses.chatMessages && (
+                  <Box sx={{ mt: 3, width: '100%' }}>
+                    <Typography variant="h6" gutterBottom>
+                      Generated Messages:
+                    </Typography>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                      {responses.chatMessages.map((message: any, index: number) => (
+                        <Paper 
+                          key={index} 
+                          sx={{ 
+                            p: 2, 
+                            backgroundColor: 'grey.700',
+                            cursor: 'pointer',
+                            '&:hover': { backgroundColor: 'grey.600' }
+                          }}
+                          onClick={() => {
+                            navigator.clipboard.writeText(message.text || message.message || message);
+                            setNotification('Message copied to clipboard!');
+                          }}
+                        >
+                          <Typography variant="body1">
+                            {message.text || message.message || message}
+                          </Typography>
+                        </Paper>
+                      ))}
+                    </Box>
+                  </Box>
+                )}
+
+                <Box sx={{ mt: 3, textAlign: 'center' }}>
+                  <Typography variant="body2" color="text.secondary">
+                    Hotkeys: {hotkeyHints.map(hint => `${hint.key} - ${hint.label}`).join(', ')}
+                  </Typography>
+                </Box>
+
+                                 <FormControlLabel
+                   control={
+                     <Checkbox
+                       id="auto-generate-web"
+                       checked={autoGenerate}
+                       onChange={(e) => setAutoGenerate(e.target.checked)}
+                     />
+                   }
+                   label="Auto-generate on paste"
+                 />
+              </Box>
+            </Paper>
+
+            {/* Settings Modal */}
+            <WebSettingsModal
+              isOpen={showSettings}
+              onClose={() => setShowSettings(false)}
+              onConfigUpdate={handleConfigUpdate}
+              autoGenerate={autoGenerate}
+              setAutoGenerate={setAutoGenerate}
+              customButtonLabel={customButtonLabel}
+              setCustomButtonLabel={setCustomButtonLabel}
+              customActionEnabled={customActionEnabled}
+              setCustomActionEnabled={setCustomActionEnabled}
+            />
+
+            {/* Notification */}
+            <Snackbar
+              open={!!notification}
+              autoHideDuration={3000}
+              onClose={() => setNotification(undefined)}
+              message={notification}
+            />
+          </Container>
+        </Box>
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default WebApp; 

WebApp.tsx

@@ -414,6 +414,7 @@
     "v8_use_siphash": 1,
     "want_separate_host_toolset": 1,
     "nodedir": "C:\\Users\\lukas\\.electron-gyp\\29.4.6",
+    "python": "C:\\Program Files\\Python313\\python.exe",
     "standalone_static_library": 1,
     "msbuild_path": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\MSBuild\\Current\\Bin\\MSBuild.exe",
     "build_from_source": "true",