Add provider-aware model selector with manual entry toggle

.github/workflows/pr-check.yml

@@ -11,7 +11,7 @@ concurrency:
 
 jobs:
   build:
-    name: Build playground
+    name: Build playground (20.x)
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,10 +20,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'

.github/workflows/test.yml

@@ -23,10 +23,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'

e2e/app.spec.ts

@@ -33,9 +33,6 @@ test.describe('App Loading', () => {
     // Preview header should be visible
     await expect(page.getByText('Preview').first()).toBeVisible();
 
-    // Download PDF button should be present
-    await expect(page.getByRole('button', { name: 'Download PDF' })).toBeVisible();
-
     // Preview content area should have rendered HTML
     const previewContent = page.locator('.main-container-agreement');
     await expect(previewContent).toBeVisible();
@@ -66,3 +63,27 @@ test.describe('Dark Mode', () => {
     expect(newTheme).not.toBe(initialTheme);
   });
 });
+
+test.describe('Output Modal', () => {
+  test('should display Download PDF button in Output modal', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('.app-spinner-container')).toBeHidden({ timeout: 30000 });
+
+    // Click fullscreen icon to open Output modal
+    const fullscreenIcon = page.locator('[data-icon="fullscreen"]').or(page.locator('svg').filter({ hasText: /fullscreen/i })).first();
+
+    // If fullscreen icon exists, click it
+    if (await fullscreenIcon.isVisible()) {
+      await fullscreenIcon.click();
+
+      // Wait for modal to appear
+      await expect(page.getByRole('dialog')).toBeVisible();
+
+      // Download PDF button should be present in modal
+      await expect(page.getByRole('button', { name: 'Download PDF' })).toBeVisible();
+
+      // Close modal
+      await page.keyboard.press('Escape');
+    }
+  });
+});

src/AgreementHtml.tsx

@@ -1,13 +1,45 @@
 
 import { LoadingOutlined } from "@ant-design/icons";
-import { Spin } from "antd";
+import { Spin, Button } from "antd";
 import useAppStore from "./store/store";
 import FullScreenModal from "./components/FullScreenModal";
+import { useRef, useState } from "react";
+import html2pdf from "html2pdf.js";
 
 function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boolean }) {
   const agreementHtml = useAppStore((state) => state.agreementHtml);
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
+  const downloadRef = useRef<HTMLDivElement>(null);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownloadPdf = async () => {
+    const element = downloadRef.current;
+    if (!element) return;
+
+    try {
+      setIsDownloading(true);
+      const options = {
+        margin: 10,
+        filename: 'agreement.pdf',
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: {
+          scale: 2,
+          useCORS: true,
+          allowTaint: true,
+          logging: true,
+        },
+        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+      } as const;
+
+      await html2pdf().set(options).from(element).save();
+    } catch (error) {
+      console.error("PDF generation failed:", error);
+      alert("Failed to generate PDF. Please check the console.");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
 
   return (
     <div
@@ -28,12 +60,24 @@ function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boole
           display: "flex",
           textAlign: "center",
           color: textColor,
+          justifyContent: "space-between",
+          alignItems: "center",
         }}
       >
         <h2 style={{ flexGrow: 1, textAlign: "center", paddingLeft: "34px", color: textColor }}>
           Preview Output
         </h2>
-        {!isModal && <FullScreenModal />}
+        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+          {isModal && (
+            <Button
+              onClick={() => void handleDownloadPdf()}
+              loading={isDownloading}
+            >
+              Download PDF
+            </Button>
+          )}
+          {!isModal && <FullScreenModal />}
+        </div>
       </div>
       <p style={{ textAlign: "center", color: textColor }}>
         The result of merging the JSON data with the template.
@@ -44,6 +88,7 @@ function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boole
         </div>
       ) : (
         <div
+          ref={downloadRef}
           className="agreement"
           dangerouslySetInnerHTML={{ __html: agreementHtml }}
           style={{ flex: 1, color: textColor, backgroundColor: backgroundColor }}

src/components/AIConfigPopup.tsx

@@ -2,6 +2,53 @@ import { useState, useEffect, useMemo } from 'react';
 import { AIConfigPopupProps } from '../types/components/AIAssistant.types';
 import useAppStore from '../store/store';
 
+const PROVIDER_MODEL_OPTIONS: Record<string, string[]> = {
+  openai: [
+    'gpt-4.1',
+    'gpt-4.1-mini',
+    'gpt-4o',
+    'gpt-4o-mini',
+    'o3-mini',
+    'o1',
+  ],
+  anthropic: [
+    'claude-3.7-sonnet',
+    'claude-3.7-opus',
+    'claude-3.5-sonnet',
+    'claude-3.5-haiku',
+  ],
+  google: [
+    'gemini-2.0-pro-exp-02-05',
+    'gemini-2.0-flash-exp',
+    'gemini-1.5-pro',
+    'gemini-1.5-flash',
+  ],
+  mistral: [
+    'mistral-large-latest',
+    'mistral-medium-latest',
+    'mistral-small-latest',
+    'codestral-latest',
+    'ministral-3b-latest',
+  ],
+  openrouter: [
+    'openai/gpt-4.1',
+    'openai/gpt-4o',
+    'anthropic/claude-3.7-sonnet',
+    'meta-llama/llama-3.3-70b-instruct',
+    'google/gemini-2.0-pro-exp-02-05',
+    'qwen/qwen-2.5-72b-instruct',
+    'mistralai/mistral-large-latest',
+  ],
+  ollama: [
+    'llama3',
+    'llama3.2',
+    'phi3',
+    'qwen2.5:7b',
+    'qwen2.5:14b',
+    'tinyllama',
+  ],
+};
+
 const AIConfigPopup = ({ isOpen, onClose, onSave }: AIConfigPopupProps) => {
   const { backgroundColor } = useAppStore((state) => ({
     backgroundColor: state.backgroundColor,
@@ -47,6 +94,7 @@ const AIConfigPopup = ({ isOpen, onClose, onSave }: AIConfigPopupProps) => {
 
   const [provider, setProvider] = useState<string>('');
   const [model, setModel] = useState<string>('');
+  const [modelMode, setModelMode] = useState<'preset' | 'manual'>('preset');
   const [apiKey, setApiKey] = useState<string>('');
   const [customEndpoint, setCustomEndpoint] = useState<string>('');
   const [showAdvancedSettings, setShowAdvancedSettings] = useState<boolean>(false);
@@ -69,7 +117,11 @@ const AIConfigPopup = ({ isOpen, onClose, onSave }: AIConfigPopupProps) => {
       const savedEnableInlineSuggestions = localStorage.getItem('aiEnableInlineSuggestions') !== 'false';
 
       if (savedProvider) setProvider(savedProvider);
-      if (savedModel) setModel(savedModel);
+      if (savedModel) {
+        setModel(savedModel);
+        const presets = savedProvider ? PROVIDER_MODEL_OPTIONS[savedProvider] || [] : [];
+        setModelMode(presets.includes(savedModel) ? 'preset' : 'manual');
+      }
       if (savedApiKey) setApiKey(savedApiKey);
       if (savedCustomEndpoint) setCustomEndpoint(savedCustomEndpoint);
       if (savedMaxTokens) setMaxTokens(savedMaxTokens);
@@ -127,6 +179,7 @@ const AIConfigPopup = ({ isOpen, onClose, onSave }: AIConfigPopupProps) => {
       // Reset all state variables to default
       setProvider('');
       setModel('');
+      setModelMode('preset');
       setApiKey('');
       setCustomEndpoint('');
       setMaxTokens('');
@@ -174,7 +227,15 @@ const AIConfigPopup = ({ isOpen, onClose, onSave }: AIConfigPopupProps) => {
             </label>
             <select
               value={provider}
-              onChange={(e) => setProvider(e.target.value)}
+              onChange={(e) => {
+                const nextProvider = e.target.value;
+                setProvider(nextProvider);
+                setModel('');
+                setModelMode('preset');
+                if (nextProvider !== 'openai-compatible') {
+                  setCustomEndpoint('');
+                }
+              }}
               className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.select}`}
             >
               <option value="">Select a provider</option>
@@ -208,30 +269,77 @@ const AIConfigPopup = ({ isOpen, onClose, onSave }: AIConfigPopupProps) => {
 
           <div>
             <label className={`block text-sm font-medium ${theme.label} mb-1`}>
-              Model Name
+              Model
             </label>
-            <input
-              type="text"
-              value={model}
-              onChange={(e) => setModel(e.target.value)}
-              placeholder="Enter model name"
-              className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.input}`}
-            />
+            {provider && (PROVIDER_MODEL_OPTIONS[provider] || []).length > 0 ? (
+              modelMode === 'preset' ? (
+                <select
+                  value={model}
+                  onChange={(e) => {
+                    if (e.target.value === '__manual__') {
+                      setModelMode('manual');
+                      setModel('');
+                    } else {
+                      setModel(e.target.value);
+                    }
+                  }}
+                  className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.select}`}
+                >
+                  <option value="">Select a model</option>
+                  {(PROVIDER_MODEL_OPTIONS[provider] || []).map((m) => (
+                    <option key={m} value={m}>{m}</option>
+                  ))}
+                  <option value="__manual__">Manual entry…</option>
+                </select>
+              ) : (
+                <input
+                  type="text"
+                  value={model}
+                  onChange={(e) => setModel(e.target.value)}
+                  placeholder="Enter custom model name"
+                  className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.input}`}
+                  onBlur={() => {
+                    // If user cleared manual input, fall back to preset mode for clarity
+                    if (!model) {
+                      setModelMode('preset');
+                    }
+                  }}
+                />
+              )
+            ) : (
+              <input
+                type="text"
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                placeholder="Enter model name"
+                className={`w-full p-2 border rounded-lg focus:outline-none focus:ring-2 ${theme.input}`}
+              />
+            )}
+            {!provider && (
+              <div className={`mt-1 text-xs ${theme.helpText}`}>
+                Select a provider to see suggested models, or type a custom one.
+              </div>
+            )}
+            {provider && (PROVIDER_MODEL_OPTIONS[provider] || []).length === 0 && (
+              <div className={`mt-1 text-xs ${theme.helpText}`}>
+                No presets available for this provider. Enter a custom model name.
+              </div>
+            )}
+
             {provider && (
               <div className={`mt-1 text-xs ${theme.helpText}`}>
-                {provider === 'openai' && 'Example: gpt-5, gpt-5-mini'}
-                {provider === 'anthropic' && 'Example: claude-opus-4-1-20250805, claude-sonnet-4-5-20250929'}
-                {provider === 'google' && 'Example: gemini-3-pro, gemini-2.5-flash'}
-                {provider === 'mistral' && 'Example: mistral-large-latest, mistral-medium-latest'}
-                {provider === 'openrouter' && 'Example: openai/gpt-5, meta-llama/llama-3.3-70b-instruct'}
-                {/* ADD THIS BLOCK FOR OLLAMA */}
+                {provider === 'openai' && 'Examples: gpt-4.1, gpt-4.1-mini, gpt-4o, gpt-4o-mini, o3-mini, o1'}
+                {provider === 'anthropic' && 'Examples: claude-3.7-sonnet, claude-3.7-opus, claude-3.5-sonnet, claude-3.5-haiku'}
+                {provider === 'google' && 'Examples: gemini-2.0-pro-exp-02-05, gemini-2.0-flash-exp, gemini-1.5-pro, gemini-1.5-flash'}
+                {provider === 'mistral' && 'Examples: mistral-large-latest, mistral-medium-latest, mistral-small-latest, codestral-latest, ministral-3b-latest'}
+                {provider === 'openrouter' && 'Examples: openai/gpt-4.1, openai/gpt-4o, anthropic/claude-3.7-sonnet, meta-llama/llama-3.3-70b-instruct, google/gemini-2.0-pro-exp-02-05, qwen/qwen-2.5-72b-instruct'}
                 {provider === 'ollama' && (
                   <span className="text-orange-500 font-bold">
                     ⚠️ Must run: <code>OLLAMA_ORIGINS="*" ollama serve</code>
-                    <br/>Example models: tinyllama, qwen2.5:0.5b, llama3
+                    <br/>Examples: llama3, qwen2.5:0.5b, tinyllama
                   </span>
                 )}
-
+                {provider === 'openai-compatible' && 'Enter the model name supported by your custom endpoint'}
               </div>
             )}
           </div>