astro-tractstack 2.0.43 → 2.0.45

package/templates/src/components/edit/pane/AiRestylePaneModal.tsx

@@ -0,0 +1,230 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { Dialog } from '@ark-ui/react';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
+import { getCtx } from '@/stores/nodes';
+import { selectionStore } from '@/stores/selection';
+import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
+import prompts from '@/constants/prompts.json';
+import { TractStackAPI } from '@/utils/api';
+import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+
+const callAskLemurAPI = async (
+  prompt: string,
+  context: string,
+  expectJson: boolean,
+  isSandboxMode: boolean
+): Promise<string> => {
+  const tenantId =
+    (window as any).TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
+  const api = new TractStackAPI(tenantId);
+
+  const requestBody = {
+    prompt,
+    input_text: context,
+    final_model: '',
+    temperature: 0.5,
+    max_tokens: 2000,
+  };
+
+  let resultData: any;
+
+  if (isSandboxMode) {
+    const response = await fetch(`/api/sandbox`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+      },
+      credentials: 'include',
+      body: JSON.stringify({ action: 'askLemur', payload: requestBody }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Sandbox API failed: ${response.status} ${errorText}`);
+    }
+
+    const json = await response.json();
+    if (!json.success) {
+      throw new Error(json.error || 'Sandbox generation failed');
+    }
+    resultData = json.data;
+  } else {
+    const response = await api.post('/api/v1/aai/askLemur', requestBody);
+    if (!response.success || !response.data?.response) {
+      throw new Error(response.error || 'AI generation failed');
+    }
+    resultData = response.data;
+  }
+
+  let raw = resultData.response;
+  if (typeof raw === 'string') {
+    if (raw.startsWith('```json')) raw = raw.slice(7, -3).trim();
+  }
+  if (expectJson && typeof raw === 'object') return JSON.stringify(raw);
+  return raw;
+};
+
+interface AiRestylePaneModalProps {
+  isSandboxMode?: boolean;
+}
+
+export const AiRestylePaneModal = ({
+  isSandboxMode = false,
+}: AiRestylePaneModalProps) => {
+  const ctx = getCtx();
+  const { isAiRestyleModalOpen, paneToRestyleId } = useStore(selectionStore);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
+    harmony: 'Analogous',
+    baseColor: '',
+    accentColor: '',
+    theme: 'Light',
+    additionalNotes: '',
+  });
+
+  const handleClose = () => {
+    if (loading) return;
+    selectionStore.setKey('isAiRestyleModalOpen', false);
+    selectionStore.setKey('paneToRestyleId', null);
+    setError(null);
+  };
+
+  const handleGenerate = async () => {
+    if (!paneToRestyleId) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const childIds = ctx.getChildNodeIDs(paneToRestyleId);
+      const nodesMap = ctx.allNodes.get();
+      const gridNode = childIds.find(
+        (id) => nodesMap.get(id)?.nodeType === 'GridLayoutNode'
+      );
+      const isGrid = !!gridNode;
+
+      const promptConfig = isGrid
+        ? prompts.aiPromptsIndex.find((p) => p.layout === 'grid')
+        : prompts.aiPromptsIndex.find((p) => p.layout === 'standard');
+
+      if (!promptConfig) throw new Error('No suitable prompt found');
+
+      let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
+      if (aiDesignConfig.baseColor)
+        designInput += ` Base around **${aiDesignConfig.baseColor}**.`;
+      if (aiDesignConfig.accentColor)
+        designInput += ` Accent with **${aiDesignConfig.accentColor}**.`;
+      if (aiDesignConfig.additionalNotes)
+        designInput += ` Notes: "${aiDesignConfig.additionalNotes}"`;
+
+      const shellPromptKey = promptConfig.prompts.shell as keyof typeof prompts;
+      const shellPromptDetails = prompts[shellPromptKey] as any;
+
+      const formattedPrompt = shellPromptDetails.user_template
+        .replace('{{DESIGN_INPUT}}', designInput)
+        .replace('{{COPY_INPUT}}', 'A generic content section')
+        .replace('{{LAYOUT_TYPE}}', 'Text Only');
+
+      const resultStr = await callAskLemurAPI(
+        formattedPrompt,
+        shellPromptDetails.system || '',
+        true,
+        isSandboxMode
+      );
+
+      let dummyCopy: string | string[] = '';
+      if (isGrid) {
+        dummyCopy = ['', ''];
+      }
+
+      const hydratedTemplate = parseAiPane(resultStr, dummyCopy, 'Text Only');
+
+      ctx.applyShellToPane(paneToRestyleId, hydratedTemplate);
+      handleClose();
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'Failed to restyle pane');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isAiRestyleModalOpen) return null;
+
+  return (
+    <Dialog.Root
+      open={isAiRestyleModalOpen}
+      onOpenChange={(e) => !e.open && handleClose()}
+    >
+      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black bg-opacity-75" />
+      <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Content className="flex max-w-2xl flex-col rounded-lg bg-white shadow-2xl">
+          <div className="flex items-center justify-between border-b p-4">
+            <h3 className="flex items-center gap-2 text-lg font-bold">
+              <SparklesIcon className="h-5 w-5 text-purple-600" />
+              Re-Color Pane
+            </h3>
+            <button
+              onClick={handleClose}
+              disabled={loading}
+              className="rounded-full p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-50"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <form className="p-6" onSubmit={(e) => e.preventDefault()}>
+            <div className={loading ? 'pointer-events-none opacity-50' : ''}>
+              <AiDesignStep
+                designConfig={aiDesignConfig}
+                onDesignConfigChange={setAiDesignConfig}
+              />
+            </div>
+
+            {error && (
+              <div className="mt-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+
+            <div className="mt-8 flex justify-end gap-3">
+              <button
+                type="button"
+                onClick={handleClose}
+                disabled={loading}
+                className="rounded-lg px-4 py-2 font-bold text-gray-600 hover:bg-gray-100 disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleGenerate}
+                disabled={loading}
+                className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-2 font-bold text-white shadow transition-all hover:from-purple-500 hover:to-indigo-500 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-75"
+              >
+                {loading ? (
+                  <>
+                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                    Generating...
+                  </>
+                ) : (
+                  <>
+                    <SparklesIcon className="h-5 w-5" />
+                    Apply Re-Color
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};

package/templates/src/components/edit/pane/RestylePaneModal.tsx

@@ -211,7 +211,8 @@ export const RestylePaneModal = () => {
       (entry: DesignLibraryEntry) =>
         (selectedCategory === 'all' || entry.category === selectedCategory) &&
         entry.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
-        entry.markdownCount === targetMarkdownCount
+        entry.markdownCount === targetMarkdownCount &&
+        !entry.locked
     );
   }, [designLibrary, selectedCategory, searchTerm, targetMarkdownCount]);
 
@@ -350,14 +351,15 @@ export const RestylePaneModal = () => {
     <Dialog.Root
       open={isRestyleModalOpen}
       onOpenChange={handleDialogStateChange}
-      modal={false}
+      modal={true}
+      preventScroll={true}
     >
-      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black/70" />
+      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black bg-opacity-75" />
       <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
         <Dialog.Content
           ref={contentRef}
-          className="flex flex-col rounded-lg bg-white shadow-2xl"
-          style={{ maxHeight: '90vw', width: '90vw' }}
+          className="flex max-w-5xl flex-col rounded-lg bg-white shadow-2xl xl:max-w-7xl"
+          style={{ maxHeight: '90vh', width: '90vw' }}
         >
           <header className="flex items-center justify-between border-b p-4">
             <Dialog.Title className="text-xl font-bold">

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

@@ -1,4 +1,5 @@
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import { findClosestTailwindColor } from '@/utils/compositor/tailwindColors';
 
 export interface AiDesignConfig {
   harmony: string;
@@ -11,6 +12,7 @@ export interface AiDesignConfig {
 interface AiDesignStepProps {
   designConfig: AiDesignConfig;
   onDesignConfigChange: (newConfig: AiDesignConfig) => void;
+  idPrefix?: string;
 }
 
 const harmonyOptions = [
@@ -24,6 +26,7 @@ const themeOptions = ['Light', 'Dark', 'Bright', 'Muted', 'Pastel', 'Earthy'];
 export const AiDesignStep = ({
   designConfig,
   onDesignConfigChange,
+  idPrefix = '',
 }: AiDesignStepProps) => {
   const updateField = <K extends keyof AiDesignConfig>(
     field: K,
@@ -32,11 +35,22 @@ export const AiDesignStep = ({
     onDesignConfigChange({ ...designConfig, [field]: value });
   };
 
+  const handleColorChange = (
+    field: 'baseColor' | 'accentColor',
+    color: string
+  ) => {
+    if (!color) {
+      updateField(field, '');
+      return;
+    }
+    const closest = findClosestTailwindColor(color);
+    if (closest) {
+      updateField(field, `${closest.name}-${closest.shade}`);
+    }
+  };
+
   return (
-    <div className="space-y-6 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-bold text-gray-800">
-        2. Configure AI Design
-      </label>
+    <div className="space-y-6">
       <div>
         <label className="block text-base font-bold text-gray-800">
           Color Harmony
@@ -46,15 +60,15 @@ export const AiDesignStep = ({
             <div key={option} className="flex items-center space-x-2">
               <input
                 type="radio"
-                id={`harmony-${option}`}
-                name="harmonyOptions"
+                id={`${idPrefix}harmony-${option}`}
+                name={`${idPrefix}harmonyOptions`}
                 value={option}
                 checked={designConfig.harmony === option}
                 onChange={(e) => updateField('harmony', e.target.value)}
                 className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
               />
               <label
-                htmlFor={`harmony-${option}`}
+                htmlFor={`${idPrefix}harmony-${option}`}
                 className="text-sm font-bold text-gray-700"
               >
                 {option}
@@ -69,7 +83,7 @@ export const AiDesignStep = ({
           <ColorPickerCombo
             title="Base Color (Optional)"
             defaultColor={designConfig.baseColor}
-            onColorChange={(color) => updateField('baseColor', color)}
+            onColorChange={(color) => handleColorChange('baseColor', color)}
             allowNull={true}
           />
         </div>
@@ -77,7 +91,7 @@ export const AiDesignStep = ({
           <ColorPickerCombo
             title="Accent Color (Optional)"
             defaultColor={designConfig.accentColor}
-            onColorChange={(color) => updateField('accentColor', color)}
+            onColorChange={(color) => handleColorChange('accentColor', color)}
             allowNull={true}
           />
         </div>
@@ -92,15 +106,15 @@ export const AiDesignStep = ({
             <div key={option} className="flex items-center space-x-2">
               <input
                 type="radio"
-                id={`theme-${option}`}
-                name="themeOptions"
+                id={`${idPrefix}theme-${option}`}
+                name={`${idPrefix}themeOptions`}
                 value={option}
                 checked={designConfig.theme === option}
                 onChange={(e) => updateField('theme', e.target.value)}
                 className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
               />
               <label
-                htmlFor={`theme-${option}`}
+                htmlFor={`${idPrefix}theme-${option}`}
                 className="text-sm font-bold text-gray-700"
               >
                 {option}
@@ -112,7 +126,7 @@ export const AiDesignStep = ({
 
       <div>
         <label
-          htmlFor="additional-notes"
+          htmlFor={`${idPrefix}additional-notes`}
           className="block text-base font-bold text-gray-800"
         >
           Additional Design Notes (Optional)
@@ -122,7 +136,7 @@ export const AiDesignStep = ({
           texture".
         </p>
         <textarea
-          id="additional-notes"
+          id={`${idPrefix}additional-notes`}
           value={designConfig.additionalNotes}
           onChange={(e) => updateField('additionalNotes', e.target.value)}
           placeholder="Enter additional notes..."