astro-tractstack 2.1.2 → 2.2.0

package/templates/src/components/edit/pane/steps/AiDesignStep.tsx

@@ -6,7 +6,6 @@ export interface AiDesignConfig {
   baseColor: string;
   accentColor: string;
   theme: string;
-  additionalNotes: string;
 }
 
 interface AiDesignStepProps {
@@ -78,7 +77,7 @@ export const AiDesignStep = ({
         </div>
       </div>
 
-      <div className="sm:grid-cols-2 grid grid-cols-1 gap-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div>
           <ColorPickerCombo
             title="Base Color (Optional)"
@@ -123,27 +122,6 @@ export const AiDesignStep = ({
           ))}
         </div>
       </div>
-
-      <div>
-        <label
-          htmlFor={`${idPrefix}additional-notes`}
-          className="block text-base font-bold text-gray-800"
-        >
-          Additional Design Notes (Optional)
-        </label>
-        <p className="mb-2 mt-1 text-sm text-gray-500">
-          Add specific requests like "use rounded corners", "add subtle
-          texture".
-        </p>
-        <textarea
-          id={`${idPrefix}additional-notes`}
-          value={designConfig.additionalNotes}
-          onChange={(e) => updateField('additionalNotes', e.target.value)}
-          placeholder="Enter additional notes..."
-          rows={3}
-          className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-        />
-      </div>
     </div>
   );
 };

package/templates/src/components/edit/pane/steps/AiLibraryCopyStep.tsx

@@ -0,0 +1,327 @@
+import { useState, useMemo, useEffect } from 'react';
+import { cloneDeep } from '@/utils/helpers';
+import prompts from '@/constants/prompts.json';
+import {
+  convertStorageToLiveTemplate,
+  convertTemplateToAIShell,
+} from '@/utils/compositor/designLibraryHelper';
+import { parseAiPane, parseAiCopyHtml } from '@/utils/compositor/aiPaneParser';
+import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { CopyInputStep, type CopyMode } from './CopyInputStep';
+import type { DesignLibraryEntry } from '@/types/tractstack';
+import type { TemplatePane } from '@/types/compositorTypes';
+
+interface AiLibraryCopyStepProps {
+  entry: DesignLibraryEntry;
+  onBack: () => void;
+  onCreatePane: (template: TemplatePane) => void;
+  isSandboxMode?: boolean;
+}
+
+type ColumnPresetKey = 'left' | 'right';
+
+export const AiLibraryCopyStep = ({
+  entry,
+  onBack,
+  onCreatePane,
+  isSandboxMode = false,
+}: AiLibraryCopyStepProps) => {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [copyMode, setCopyMode] = useState<CopyMode>(
+    entry.retain ? 'original' : 'prompt'
+  );
+
+  const [topic, setTopic] = useState('');
+  const [promptValue, setPromptValue] = useState('');
+  const [copyValue, setCopyValue] = useState('');
+
+  const [overallPrompt, setOverallPrompt] = useState('');
+  const [promptValueCol1, setPromptValueCol1] = useState('');
+  const [promptValueCol2, setPromptValueCol2] = useState('');
+  const [col1Copy, setCol1Copy] = useState('');
+  const [col2Copy, setCol2Copy] = useState('');
+
+  const [showAdvancedPrompts, setShowAdvancedPrompts] = useState(false);
+  const [selectedPromptId, setSelectedPromptId] = useState('');
+  const [isAiStyling, setIsAiStyling] = useState(false);
+
+  const liveTemplate = useMemo(() => {
+    return convertStorageToLiveTemplate(entry.template);
+  }, [entry]);
+
+  const isGrid = !!liveTemplate.gridLayout;
+  const layoutChoice = isGrid ? 'grid' : 'standard';
+
+  const promptOptions = useMemo(() => {
+    return prompts.aiPromptsIndex
+      .filter((p) => p.layout === layoutChoice)
+      .map((p) => ({ label: p.label, value: p.id }));
+  }, [layoutChoice]);
+
+  useEffect(() => {
+    if (promptOptions.length > 0) {
+      const currentValid = promptOptions.find(
+        (p) => p.value === selectedPromptId
+      );
+      if (!currentValid) {
+        setSelectedPromptId(promptOptions[0].value);
+      }
+    }
+  }, [promptOptions, selectedPromptId]);
+
+  useEffect(() => {
+    if (!selectedPromptId) return;
+
+    const activeConfig = prompts.aiPromptsIndex.find(
+      (p) => p.id === selectedPromptId
+    );
+    if (!activeConfig) return;
+
+    const promptKey = activeConfig.prompts.copy;
+    const copyPromptGroup = (prompts as any)[promptKey];
+    if (!copyPromptGroup) return;
+
+    const variant = activeConfig.variants
+      ? activeConfig.variants[0]
+      : 'default';
+
+    if (layoutChoice === 'standard') {
+      const baseText = copyPromptGroup[variant] || '';
+      setPromptValue(baseText);
+    } else if (layoutChoice === 'grid') {
+      const preset = copyPromptGroup.presets?.[variant];
+      if (preset) {
+        setOverallPrompt(preset.default || '');
+        setPromptValueCol1(preset.left?.prompt || '');
+        setPromptValueCol2(preset.right?.prompt || '');
+      }
+    }
+  }, [selectedPromptId, layoutChoice]);
+
+  const handleGenerate = async () => {
+    setError(null);
+    setIsGenerating(true);
+
+    try {
+      if (copyMode === 'original') {
+        onCreatePane(liveTemplate);
+        return;
+      }
+
+      const shellResult = convertTemplateToAIShell(liveTemplate);
+      const layoutType = 'Text Only';
+
+      const activeConfig = prompts.aiPromptsIndex.find(
+        (p) => p.id === selectedPromptId
+      );
+      if (!activeConfig) throw new Error('Selected prompt type not found.');
+
+      const injectTopic = (text: string) => {
+        return text.replace('{{TOPIC}}', topic.trim());
+      };
+
+      if (isGrid && liveTemplate.gridLayout) {
+        if (copyMode === 'raw') {
+          const nodes = liveTemplate.gridLayout.nodes;
+          if (nodes && nodes[0]) nodes[0].markdownBody = col1Copy;
+          if (nodes && nodes[1]) nodes[1].markdownBody = col2Copy;
+          onCreatePane(liveTemplate);
+          return;
+        }
+
+        if (copyMode === 'prompt') {
+          const copyPromptKey = activeConfig.prompts.copy;
+          const copyPromptDetails = (prompts as any)[copyPromptKey];
+
+          const preset =
+            copyPromptDetails.presets?.[activeConfig.variants[0]] ||
+            copyPromptDetails.presets?.heroDefault;
+
+          const copyResults: string[] = [];
+
+          const promptsToRun = [
+            { prompt: promptValueCol1, presetKey: 'left' as ColumnPresetKey },
+            { prompt: promptValueCol2, presetKey: 'right' as ColumnPresetKey },
+          ];
+
+          for (const item of promptsToRun) {
+            const columnPreset = preset[item.presetKey];
+            const formattedCopyPrompt = copyPromptDetails.user_template
+              .replace('{{SHELL_JSON}}', shellResult)
+              .replace('{{COPY_INPUT}}', injectTopic(overallPrompt))
+              .replace('{{COLUMN_PROMPT}}', item.prompt)
+              .replace(
+                '{{DESIGN_INPUT}}',
+                "N/A - Use the provided Shell JSON's design."
+              )
+              .replace('{{LAYOUT_TYPE}}', layoutType)
+              .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
+
+            const copyResult = await callAskLemurAPI({
+              prompt: formattedCopyPrompt,
+              context: copyPromptDetails.system || '',
+              expectJson: false,
+              isSandboxMode,
+              maxTokens: 2000,
+            });
+            copyResults.push(copyResult);
+          }
+
+          const finalPane = parseAiPane(shellResult, copyResults, layoutType);
+          onCreatePane(finalPane);
+          return;
+        }
+      }
+
+      if (!isGrid && liveTemplate.markdown) {
+        if (copyMode === 'raw') {
+          liveTemplate.markdown.markdownBody = copyValue;
+          onCreatePane(liveTemplate);
+          return;
+        }
+
+        if (copyMode === 'prompt') {
+          if (!shellResult || shellResult === '{}') {
+            throw new Error(
+              'Could not generate a valid AI shell from this design.'
+            );
+          }
+
+          const copyPromptKey = activeConfig.prompts.copy;
+          const copyPromptDetails = (prompts as any)[copyPromptKey];
+
+          const formattedCopyPrompt = copyPromptDetails.user_template
+            .replace('{{COPY_INPUT}}', injectTopic(promptValue))
+            .replace(
+              '{{DESIGN_INPUT}}',
+              "N/A - Use the provided Shell JSON's design."
+            )
+            .replace('{{LAYOUT_TYPE}}', layoutType)
+            .replace('{{SHELL_JSON}}', shellResult);
+
+          const copyResult = await callAskLemurAPI({
+            prompt: formattedCopyPrompt,
+            context: copyPromptDetails.system || '',
+            expectJson: false,
+            isSandboxMode,
+            maxTokens: 2000,
+          });
+
+          const newNodes = parseAiCopyHtml(
+            copyResult,
+            liveTemplate.markdown.id
+          );
+          const finalPane = cloneDeep(liveTemplate);
+          if (finalPane.markdown) {
+            finalPane.markdown.nodes = newNodes;
+          }
+          onCreatePane(finalPane);
+          return;
+        }
+      }
+
+      throw new Error(
+        'Template configuration mismatch. Please try a different design.'
+      );
+    } catch (err: any) {
+      console.error('Library Generation Error:', err);
+      setError(err.message || 'Failed to generate content for this design.');
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  if (isGenerating) {
+    return (
+      <div className="flex min-h-96 flex-col items-center justify-center space-y-4 p-6">
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
+        <p className="text-sm text-gray-600">Writing Content...</p>
+        <p className="text-xs text-gray-500">
+          Adapting the design to your text.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="flex items-center justify-between border-b pb-4">
+        <div>
+          <h3 className="font-bold text-gray-800">Customize Design</h3>
+          <p className="text-xs text-gray-500">
+            Selected: <span className="font-bold">{entry.title}</span>
+          </p>
+        </div>
+        <button
+          onClick={onBack}
+          className="text-xs text-gray-500 hover:text-gray-700"
+        >
+          Change Design
+        </button>
+      </div>
+
+      <CopyInputStep
+        layoutChoice={layoutChoice}
+        copyMode={copyMode}
+        onCopyModeChange={setCopyMode}
+        topic={topic}
+        onTopicChange={setTopic}
+        showAdvancedPrompts={showAdvancedPrompts}
+        onShowAdvancedPromptsChange={setShowAdvancedPrompts}
+        promptValue={promptValue}
+        onPromptValueChange={setPromptValue}
+        copyValue={copyValue}
+        onCopyValueChange={setCopyValue}
+        overallPrompt={overallPrompt}
+        onOverallPromptChange={setOverallPrompt}
+        promptValueCol1={promptValueCol1}
+        onPromptValueCol1Change={setPromptValueCol1}
+        promptValueCol2={promptValueCol2}
+        onPromptValueCol2Change={setPromptValueCol2}
+        col1Copy={col1Copy}
+        onCol1CopyChange={setCol1Copy}
+        col2Copy={col2Copy}
+        onCol2CopyChange={setCol2Copy}
+        hasRetainedContent={entry.retain}
+        showStyleToggle={false}
+        promptOptions={promptOptions}
+        selectedPromptId={selectedPromptId}
+        onSelectedPromptIdChange={setSelectedPromptId}
+        isAiStyling={isAiStyling}
+        onIsAiStylingChange={setIsAiStyling}
+      />
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      <div className="mt-4 flex justify-end border-t pt-4">
+        <button
+          onClick={handleGenerate}
+          disabled={
+            copyMode === 'prompt'
+              ? isGrid
+                ? !promptValueCol1.trim() &&
+                  !promptValueCol2.trim() &&
+                  !overallPrompt.trim()
+                : !promptValue.trim()
+              : copyMode === 'raw'
+                ? isGrid
+                  ? !col1Copy.trim() || !col2Copy.trim()
+                  : !copyValue.trim()
+                : false
+          }
+          className="rounded-md bg-cyan-600 px-6 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-gray-400"
+        >
+          {copyMode === 'original'
+            ? 'Use Original Content'
+            : '✨ Generate Pane'}
+        </button>
+      </div>
+    </div>
+  );
+};

package/templates/src/components/edit/pane/steps/AiRefineDesignStep.tsx

@@ -0,0 +1,267 @@
+import { useState } from 'react';
+import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
+import prompts from '@/constants/prompts.json';
+import { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
+import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import type { TemplatePane } from '@/types/compositorTypes';
+
+interface AiRefineDesignStepProps {
+  onBack: () => void;
+  onSuccess: () => void;
+  onUpdatePane: (template: TemplatePane) => void;
+  isSandboxMode?: boolean;
+  initialHtml: string;
+  initialCss: string;
+}
+
+export const AiRefineDesignStep = ({
+  onBack,
+  onSuccess,
+  onUpdatePane,
+  isSandboxMode = false,
+  initialHtml,
+  initialCss,
+}: AiRefineDesignStepProps) => {
+  const [prompt, setPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [reviewMode, setReviewMode] = useState(false);
+  const [previewHtml, setPreviewHtml] = useState<string>('');
+  const [pendingTemplate, setPendingTemplate] = useState<TemplatePane | null>(
+    null
+  );
+
+  const handleGenerate = async () => {
+    if (!prompt.trim()) {
+      setError('Please enter a refinement request.');
+      return;
+    }
+
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      const promptConfig = prompts.aiPaneCreativeRefinePrompt;
+      const systemPrompt = promptConfig.system;
+      let userPrompt = promptConfig.user_template;
+
+      userPrompt = userPrompt.replace('{{DESIGN_NOTES}}', prompt);
+      userPrompt = userPrompt.replace('{{CSS_INPUT}}', initialCss);
+      userPrompt = userPrompt.replace('{{HTML_INPUT}}', initialHtml);
+
+      // 1. Get RAW output from AI
+      const resultHtml = await callAskLemurAPI({
+        prompt: userPrompt,
+        context: systemPrompt,
+        expectJson: false,
+        isSandboxMode,
+        maxTokens: 4000,
+        temperature: 0.5,
+      });
+
+      // 2. Generate AST immediately
+      const htmlAst = await htmlToHtmlAst(resultHtml, '');
+
+      // 3. Construct the candidate TemplatePane
+      const candidateTemplate: TemplatePane = {
+        id: '',
+        nodeType: 'Pane',
+        parentId: '',
+        title: 'Refined Pane',
+        slug: '',
+        isDecorative: false,
+        htmlAst,
+        markdown: {
+          id: '',
+          nodeType: 'Markdown',
+          parentId: '',
+          type: 'markdown',
+          markdownId: '',
+          defaultClasses: {},
+          parentClasses: [],
+          nodes: [],
+        },
+      };
+
+      const tenantId =
+        (window as any).TRACTSTACK_CONFIG?.tenantId ||
+        import.meta.env.PUBLIC_TENANTID ||
+        'default';
+
+      const goBackend =
+        import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+      // 4. Send AST to backend to get SAFE/Sanitized HTML for preview
+      const response = await fetch(
+        `${goBackend}/api/v1/fragments/ast-preview`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Tenant-ID': tenantId,
+          },
+          body: JSON.stringify({
+            id: 'temp-refine-preview',
+            title: 'Refine Preview',
+            tree: htmlAst.tree,
+            simulateFrontend: true,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        const text = await response.text();
+        throw new Error(
+          text || `Preview generation failed: ${response.status}`
+        );
+      }
+
+      const safeHtml = await response.text();
+
+      // 5. Store SAFE HTML for display and valid Template for acceptance
+      setPendingTemplate(candidateTemplate);
+      setPreviewHtml(safeHtml);
+      setReviewMode(true);
+    } catch (err: any) {
+      console.error('Refine Generation Error:', err);
+      setError(err.message || 'Failed to refine design.');
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleAccept = () => {
+    if (pendingTemplate) {
+      onUpdatePane(pendingTemplate);
+      onSuccess();
+    }
+  };
+
+  const handleCancel = () => {
+    setReviewMode(false);
+    setPendingTemplate(null);
+    setPreviewHtml('');
+    onBack();
+  };
+
+  const handleRedo = () => {
+    setReviewMode(false);
+    setPendingTemplate(null);
+    setPreviewHtml('');
+  };
+
+  if (isGenerating) {
+    return (
+      <div className="flex min-h-96 flex-col items-center justify-center space-y-4 p-8">
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
+        <div className="text-center">
+          <p className="font-bold text-gray-900">
+            {reviewMode ? 'Compiling Design...' : 'Refining Design...'}
+          </p>
+          <p className="mt-1 text-sm text-gray-500">
+            AI is refactoring your component.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (reviewMode && previewHtml) {
+    return (
+      <div className="relative flex h-full flex-col">
+        <div className="absolute right-4 top-4 z-50 flex gap-2">
+          <button
+            onClick={handleCancel}
+            className="rounded-full border border-gray-200 bg-white p-2 text-red-500 shadow-md transition-colors hover:bg-gray-100"
+            title="Cancel"
+          >
+            <XMarkIcon className="h-6 w-6" />
+          </button>
+          <button
+            onClick={handleRedo}
+            className="rounded-full border border-gray-200 bg-white p-2 text-blue-500 shadow-md transition-colors hover:bg-gray-100"
+            title="Redo with same prompt"
+          >
+            <ArrowPathRoundedSquareIcon className="h-6 w-6" />
+          </button>
+          <button
+            onClick={handleAccept}
+            className="rounded-full border border-green-600 bg-green-500 p-2 text-white shadow-md transition-colors hover:bg-green-600"
+            title="Accept"
+          >
+            <CheckIcon className="h-6 w-6" />
+          </button>
+        </div>
+
+        <style
+          dangerouslySetInnerHTML={{
+            __html: pendingTemplate?.htmlAst?.css || '',
+          }}
+        />
+        <div
+          className="w-full flex-1 overflow-y-auto rounded-md border bg-gray-50 p-4"
+          dangerouslySetInnerHTML={{ __html: previewHtml }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="text-center">
+        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-purple-50">
+          <SparklesIcon
+            className="h-6 w-6 text-purple-600"
+            aria-hidden="true"
+          />
+        </div>
+        <h3 className="mt-2 text-lg font-bold text-gray-900">Refine Design</h3>
+        <p className="text-sm text-gray-500">
+          Modify the existing design using AI instructions.
+        </p>
+      </div>
+
+      <div>
+        <label className="block text-sm font-bold text-gray-700">
+          Refinement Instructions
+        </label>
+        <textarea
+          rows={6}
+          className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-purple-500 focus:ring-purple-500"
+          placeholder="e.g. Change the background to dark blue, make the title larger, and switch the button color to yellow."
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          disabled={isGenerating}
+        />
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-3">
+          <p className="text-sm text-red-700">{error}</p>
+        </div>
+      )}
+
+      <div className="flex justify-between border-t border-gray-100 pt-4">
+        <button
+          onClick={onBack}
+          disabled={isGenerating}
+          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleGenerate}
+          disabled={isGenerating || !prompt.trim()}
+          className="flex items-center gap-2 rounded-md bg-purple-600 px-6 py-2 text-sm font-bold text-white shadow-sm hover:bg-purple-700 disabled:bg-gray-400"
+        >
+          <SparklesIcon className="h-4 w-4" />
+          Refine
+        </button>
+      </div>
+    </div>
+  );
+};