astro-tractstack 2.0.15 → 2.0.16

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

@@ -1,512 +0,0 @@
-import { useState, useCallback } from 'react';
-import prompts from '@/constants/prompts.json';
-import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
-import { AiPanePreview } from './AiPanePreview';
-import { CopyInputStep } from './steps/CopyInputStep';
-import { parseAiPane } from '@/utils/compositor/aiPaneParser';
-import { classNames } from '@/utils/helpers';
-import type { TemplatePane } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
-
-interface AiPaneGeneratorProps {
-  ownerId: string;
-  onComplete: (pane: TemplatePane) => void;
-  onCancel: () => void;
-  config?: BrandConfig;
-}
-
-type GenerationStep = 'input' | 'preview' | 'loading';
-type CopyMode = 'prompt' | 'raw';
-
-interface GenerationResponse {
-  success: boolean;
-  data?: {
-    response: string | object;
-  };
-  error?: string;
-}
-
-const harmonyOptions = [
-  'Analogous',
-  'Monochromatic',
-  'Complementary',
-  'Triadic',
-];
-const themeOptions = ['Light', 'Dark', 'Bright', 'Muted', 'Pastel', 'Earthy'];
-
-export function AiPaneGenerator({
-  ownerId,
-  onComplete,
-  onCancel,
-  config,
-}: AiPaneGeneratorProps) {
-  const [currentStep, setCurrentStep] = useState<GenerationStep>('input');
-  const [selectedLayout] = useState<string>('Text Only');
-  const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
-  const [copyPrompt, setCopyPrompt] = useState('');
-  const [rawCopy, setRawCopy] = useState('');
-  const [generatedShell, setGeneratedShell] = useState<string | null>(null);
-  const [generatedCopy, setGeneratedCopy] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const [selectedHarmony, setSelectedHarmony] = useState<string>(
-    harmonyOptions[0]
-  );
-  const [baseColor, setBaseColor] = useState<string>('');
-  const [accentColor, setAccentColor] = useState<string>('');
-  const [selectedTheme, setSelectedTheme] = useState<string>(themeOptions[0]);
-  const [additionalNotes, setAdditionalNotes] = useState<string>('');
-
-  const [isInjectMode, setIsInjectMode] = useState(false);
-  const [injectShell, setInjectShell] = useState('');
-  const [injectCopy, setInjectCopy] = useState('');
-
-  const callAskLemurAPI = useCallback(
-    async (
-      prompt: string,
-      context: string,
-      expectJson: boolean
-    ): Promise<string> => {
-      const goBackend =
-        import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-      const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
-
-      const requestBody = {
-        prompt: prompt,
-        input_text: context,
-        final_model: '',
-        temperature: 0.5,
-        max_tokens: 2000,
-      };
-
-      const response = await fetch(`${goBackend}/api/v1/aai/askLemur`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Tenant-ID': tenantId,
-        },
-        credentials: 'include',
-        body: JSON.stringify(requestBody),
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('AskLemur API Error Response:', errorText);
-        let backendError = `API call failed: ${response.status} ${response.statusText}`;
-        try {
-          const errorJson = JSON.parse(errorText);
-          if (errorJson && errorJson.error) {
-            backendError = errorJson.error;
-          }
-        } catch (e) {
-          /* Ignore */
-        }
-        throw new Error(backendError);
-      }
-
-      const result = (await response.json()) as GenerationResponse;
-
-      if (!result.success || !result.data?.response) {
-        throw new Error(
-          result.error || 'Generation failed to return valid response.'
-        );
-      }
-
-      let rawResponseData = result.data.response;
-
-      if (expectJson && typeof rawResponseData === 'object') {
-        return JSON.stringify(rawResponseData);
-      }
-
-      if (typeof rawResponseData === 'string') {
-        let responseString = rawResponseData;
-        try {
-          if (
-            responseString.startsWith('```json') &&
-            responseString.endsWith('```')
-          ) {
-            responseString = responseString.slice(7, -3).trim();
-          } else if (
-            responseString.startsWith('```html') &&
-            responseString.endsWith('```')
-          ) {
-            responseString = responseString.slice(7, -3).trim();
-          }
-        } catch (e) {
-          /* Ignore stripping errors */
-        }
-        return responseString;
-      }
-
-      throw new Error('Unexpected response format received from API.');
-    },
-    []
-  );
-
-  const handleGenerate = useCallback(async () => {
-    setError(null);
-    setCurrentStep('loading');
-    setGeneratedShell(null);
-    setGeneratedCopy(null);
-
-    let designInput = `Generate a design using a **${selectedHarmony.toLowerCase()}** color scheme with a **${selectedTheme.toLowerCase()}** theme.`;
-    if (baseColor) {
-      designInput += ` Base the colors around **${baseColor}**.`;
-    }
-    if (accentColor) {
-      designInput += ` Use **${accentColor}** as an accent color.`;
-    }
-    if (additionalNotes) {
-      designInput += ` Refine the design with these additional notes: "${additionalNotes}"`;
-    }
-
-    try {
-      const shellPromptDetails = prompts.aiPaneShellPrompt;
-      const copyPromptDetails = prompts.aiPaneCopyPrompt;
-
-      if (
-        !shellPromptDetails?.user_template ||
-        !copyPromptDetails?.user_template
-      ) {
-        throw new Error('AI prompts not found or incomplete in prompts.json');
-      }
-
-      const formattedShellPrompt = shellPromptDetails.user_template
-        .replace('{{DESIGN_INPUT}}', designInput)
-        .replace('{{LAYOUT_TYPE}}', selectedLayout);
-
-      const shellResult = await callAskLemurAPI(
-        formattedShellPrompt,
-        shellPromptDetails.system || '',
-        true
-      );
-      setGeneratedShell(shellResult);
-
-      const copyInputContent = copyMode === 'prompt' ? copyPrompt : rawCopy;
-      const formattedCopyPrompt = copyPromptDetails.user_template
-        .replace('{{COPY_INPUT}}', copyInputContent)
-        .replace('{{DESIGN_INPUT}}', designInput)
-        .replace('{{LAYOUT_TYPE}}', selectedLayout)
-        .replace('{{SHELL_JSON}}', shellResult);
-
-      const copyResult = await callAskLemurAPI(
-        formattedCopyPrompt,
-        copyPromptDetails.system || '',
-        false
-      );
-      setGeneratedCopy(copyResult);
-
-      setCurrentStep('preview');
-    } catch (err: any) {
-      console.error('AI Pane Generation Error:', err);
-      setError(err.message || 'Failed to generate AI pane.');
-      setCurrentStep('input');
-    }
-  }, [
-    selectedHarmony,
-    baseColor,
-    accentColor,
-    selectedTheme,
-    additionalNotes,
-    selectedLayout,
-    copyMode,
-    copyPrompt,
-    rawCopy,
-    callAskLemurAPI,
-  ]);
-
-  const handleInject = useCallback(() => {
-    setError(null);
-    if (!injectShell || !injectCopy) {
-      setError('Both Shell JSON and Copy HTML must be provided.');
-      return;
-    }
-    try {
-      const shellResponse = JSON.parse(injectShell);
-      const copyResponse = JSON.parse(injectCopy);
-
-      const shellPayloadString = JSON.stringify(shellResponse?.data?.response);
-      const copyPayloadString = copyResponse?.data?.response;
-
-      if (
-        !shellPayloadString ||
-        shellPayloadString === 'null' ||
-        typeof copyPayloadString !== 'string'
-      ) {
-        throw new Error(
-          'Payloads are in an unexpected format. Could not find "data.response".'
-        );
-      }
-
-      const pane = parseAiPane(
-        shellPayloadString,
-        copyPayloadString,
-        selectedLayout
-      );
-      onComplete(pane);
-    } catch (err: any) {
-      console.error('Payload Injection Error:', err);
-      setError(err.message || 'Failed to parse payloads. Check JSON format.');
-    }
-  }, [injectShell, injectCopy, selectedLayout, onComplete]);
-
-  const handleBack = () => {
-    setError(null);
-    if (currentStep === 'preview') {
-      setCurrentStep('input');
-    } else if (currentStep === 'input') {
-      if (isInjectMode) {
-        setIsInjectMode(false);
-      } else {
-        onCancel();
-      }
-    } else if (currentStep === 'loading') {
-      setCurrentStep('input');
-    }
-  };
-
-  if (currentStep === 'loading') {
-    return (
-      <div className="flex min-h-[200px] 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-gray-400"></div>
-        <p className="text-sm text-gray-500">Generating AI Pane...</p>
-        <button
-          type="button"
-          onClick={handleBack}
-          className="mt-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-        >
-          Cancel
-        </button>
-      </div>
-    );
-  }
-
-  if (currentStep === 'preview' && generatedShell && generatedCopy) {
-    return (
-      <AiPanePreview
-        shellJson={generatedShell}
-        copyHtml={generatedCopy}
-        layout={selectedLayout}
-        ownerId={ownerId}
-        onComplete={onComplete}
-        onBack={handleBack}
-      />
-    );
-  }
-
-  if (currentStep === 'input') {
-    if (isInjectMode) {
-      return (
-        <div className="space-y-6 p-4">
-          <div>
-            <label
-              htmlFor="shell-json"
-              className="block text-lg font-bold text-gray-800"
-            >
-              Shell JSON Payload
-            </label>
-            <textarea
-              id="shell-json"
-              value={injectShell}
-              onChange={(e) => setInjectShell(e.target.value)}
-              placeholder="Paste raw API response for ShellJson here..."
-              rows={8}
-              className="mt-2 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-            />
-          </div>
-
-          <div>
-            <label
-              htmlFor="copy-html"
-              className="block text-lg font-bold text-gray-800"
-            >
-              Copy HTML Payload
-            </label>
-            <textarea
-              id="copy-html"
-              value={injectCopy}
-              onChange={(e) => setInjectCopy(e.target.value)}
-              placeholder="Paste raw API response for copyHtml here..."
-              rows={8}
-              className="mt-2 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-            />
-          </div>
-
-          {error && <p className="text-sm text-red-600">{error}</p>}
-
-          <div className="flex justify-between pt-4">
-            <button
-              type="button"
-              onClick={handleBack}
-              className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-            >
-              Back to Generator
-            </button>
-            <button
-              type="button"
-              onClick={handleInject}
-              disabled={!injectShell || !injectCopy}
-              className={`rounded-md border border-transparent px-4 py-2 text-sm font-bold text-white shadow-sm ${
-                !injectShell || !injectCopy
-                  ? 'cursor-not-allowed bg-gray-400'
-                  : 'bg-cyan-600 hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2'
-              }`}
-            >
-              Create from Payloads
-            </button>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="space-y-6 p-4">
-        <div>
-          <label className="block text-lg font-bold text-gray-800">
-            Color Harmony
-          </label>
-          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
-            {harmonyOptions.map((option) => (
-              <div key={option} className="flex items-center space-x-2">
-                <input
-                  type="radio"
-                  id={`harmony-${option}`}
-                  name="harmonyOptions"
-                  value={option}
-                  checked={selectedHarmony === option}
-                  onChange={(e) => setSelectedHarmony(e.target.value)}
-                  className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
-                />
-                <label
-                  htmlFor={`harmony-${option}`}
-                  className="text-sm font-bold text-gray-700"
-                >
-                  {option}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div>
-            <ColorPickerCombo
-              title="Base Color (Optional)"
-              config={config!}
-              defaultColor={baseColor}
-              onColorChange={setBaseColor}
-              allowNull={true}
-            />
-          </div>
-          <div>
-            <ColorPickerCombo
-              title="Accent Color (Optional)"
-              config={config!}
-              defaultColor={accentColor}
-              onColorChange={setAccentColor}
-              allowNull={true}
-            />
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-lg font-bold text-gray-800">
-            Theme / Mood
-          </label>
-          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
-            {themeOptions.map((option) => (
-              <div key={option} className="flex items-center space-x-2">
-                <input
-                  type="radio"
-                  id={`theme-${option}`}
-                  name="themeOptions"
-                  value={option}
-                  checked={selectedTheme === option}
-                  onChange={(e) => setSelectedTheme(e.target.value)}
-                  className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
-                />
-                <label
-                  htmlFor={`theme-${option}`}
-                  className="text-sm font-bold text-gray-700"
-                >
-                  {option}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <label
-            htmlFor="additional-notes"
-            className="block text-lg 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="additional-notes"
-            value={additionalNotes}
-            onChange={(e) => setAdditionalNotes(e.target.value)}
-            placeholder="Enter additional notes..."
-            rows={3}
-            className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
-          />
-        </div>
-
-        <CopyInputStep
-          copyMode={copyMode}
-          onCopyModeChange={setCopyMode}
-          promptValue={copyPrompt}
-          onPromptValueChange={setCopyPrompt}
-          copyValue={rawCopy}
-          onCopyValueChange={setRawCopy}
-        />
-
-        {error && <p className="text-sm text-red-600">{error}</p>}
-
-        <div className="flex justify-between pt-4">
-          <button
-            type="button"
-            onClick={handleBack}
-            className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={handleGenerate}
-            disabled={copyMode === 'prompt' ? !copyPrompt : !rawCopy}
-            className={classNames(
-              `rounded-md border border-transparent px-4 py-2 text-sm font-bold shadow-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2`,
-              (copyMode === 'prompt' && !copyPrompt) ||
-                (copyMode === `raw` && !rawCopy)
-                ? 'cursor-not-allowed bg-gray-300 text-gray-500'
-                : 'bg-cyan-600 text-white hover:bg-cyan-700'
-            )}
-          >
-            Generate Pane
-          </button>
-        </div>
-
-        <div className="border-t border-gray-200 pt-4 text-center">
-          <button
-            type="button"
-            onClick={() => {
-              setError(null);
-              setIsInjectMode(true);
-            }}
-            className="text-sm text-cyan-600 hover:text-cyan-800 hover:underline"
-          >
-            Direct Inject Payload
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return null;
-}

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

@@ -1,107 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import type { TemplatePane } from '@/types/compositorTypes';
-import { parseAiPane } from '@/utils/compositor/aiPaneParser';
-
-interface AiPanePreviewProps {
-  shellJson: string;
-  copyHtml: string;
-  layout: string;
-  ownerId: string;
-  onComplete: (pane: TemplatePane) => void;
-  onBack: () => void;
-}
-
-export function AiPanePreview({
-  shellJson,
-  copyHtml,
-  layout,
-  onComplete,
-  onBack,
-}: AiPanePreviewProps) {
-  const [error, setError] = useState<string | null>(null);
-  const [hasCompleted, setHasCompleted] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    setError(null);
-    setHasCompleted(false);
-    setIsLoading(true);
-    let isActive = true;
-
-    if (shellJson && copyHtml) {
-      try {
-        const pane = parseAiPane(shellJson, copyHtml, layout);
-        if (isActive && !hasCompleted) {
-          onComplete(pane);
-          setHasCompleted(true);
-          setIsLoading(false);
-        }
-      } catch (err: any) {
-        console.error('Error parsing AI Pane:', err);
-        if (isActive) {
-          setError(err.message || 'Failed to parse generated content.');
-          setIsLoading(false);
-        }
-      }
-    } else {
-      // Handle case where inputs might be initially empty
-      setIsLoading(false);
-    }
-
-    return () => {
-      isActive = false;
-    };
-  }, [shellJson, copyHtml, layout, onComplete, hasCompleted]);
-
-  const displayContent = useMemo(() => {
-    if (isLoading) {
-      return (
-        <div className="p-4 text-center text-gray-500">
-          <div className="mx-auto mb-2 h-8 w-8 animate-spin rounded-full border-b-2 border-gray-400"></div>
-          <p className="text-sm">Processing...</p>
-        </div>
-      );
-    }
-    if (error) {
-      return (
-        <div className="p-4 text-center text-red-600">
-          <p className="font-semibold">Error:</p>
-          <p className="mt-1 text-sm">{error}</p>
-        </div>
-      );
-    }
-    if (hasCompleted) {
-      return (
-        <div className="p-4 text-center text-green-700">
-          <p className="font-semibold">Pane Applied Successfully!</p>
-          <p className="mt-1 text-sm">
-            You can now go back or continue editing.
-          </p>
-        </div>
-      );
-    }
-    // Fallback/initial state before useEffect runs if needed
-    return (
-      <div className="p-4 text-center text-gray-500">
-        <p className="text-sm">Preparing...</p>
-      </div>
-    );
-  }, [isLoading, error, hasCompleted]);
-
-  return (
-    <div className="flex h-full flex-col p-4">
-      <div className="relative mb-4 flex min-h-[200px] flex-grow items-center justify-center overflow-auto rounded border bg-gray-50">
-        {displayContent}
-      </div>
-      <div className="flex flex-shrink-0 justify-start">
-        <button
-          onClick={onBack}
-          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-          type="button"
-        >
-          Back
-        </button>
-      </div>
-    </div>
-  );
-}

package/templates/src/utils/aai/getTitleSlug.ts

@@ -1,72 +0,0 @@
-import { findUniqueSlug } from '@/utils/helpers';
-
-interface TitleSlugResponse {
-  title: string;
-  slug: string;
-}
-
-export async function getTitleSlug(
-  markdownContent: string,
-  existingSlugs: string[]
-): Promise<TitleSlugResponse | null> {
-  if (
-    !markdownContent ||
-    markdownContent.trim() === '...' ||
-    markdownContent.trim().length === 0
-  ) {
-    return null;
-  }
-
-  try {
-    const backendUrl =
-      import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-    const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
-
-    const response = await fetch(`${backendUrl}/api/v1/aai/askLemur`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Tenant-ID': tenantId,
-      },
-      credentials: 'include',
-      body: JSON.stringify({
-        prompt: `Generate a concise title (maximum 40-50 characters) and a URL-friendly slug (lowercase, only letters, numbers, and dashes, no spaces) that captures the essence of this markdown content. Return only a JSON object with "title" and "slug" keys. 
-
-Example response format:
-{
-  "title": "Short Descriptive Title",
-  "slug": "short-descriptive-title"
-}`,
-        input_text: markdownContent,
-        final_model: '',
-      }),
-    });
-
-    if (response.ok) {
-      const data = await response.json();
-      if (data.success && data.data?.response) {
-        let titleData;
-        try {
-          if (typeof data.data.response === 'string') {
-            titleData = JSON.parse(data.data.response);
-          } else {
-            titleData = data.data.response;
-          }
-
-          if (titleData.title && titleData.slug) {
-            return {
-              title: findUniqueSlug(titleData.title, existingSlugs),
-              slug: findUniqueSlug(titleData.slug, existingSlugs),
-            };
-          }
-        } catch (parseError) {
-          console.error('Error parsing title data:', parseError);
-        }
-      }
-    }
-  } catch (error) {
-    console.error('Error generating title:', error);
-  }
-
-  return null;
-}