astro-tractstack 2.0.14 → 2.0.16

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/components/edit/pane/PageGen.tsx

@@ -1,485 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import { Dialog } from '@ark-ui/react/dialog';
-import { Portal } from '@ark-ui/react/portal';
-import {
-  RadioGroup,
-  type RadioGroup as RadioGroupNamespace,
-} from '@ark-ui/react/radio-group';
-import CheckCircleIcon from '@heroicons/react/20/solid/CheckCircleIcon';
-import {
-  formatPrompt,
-  pagePrompts,
-  pagePromptsDetails,
-} from '@/constants/prompts.json';
-import {
-  parsePageMarkdown,
-  createPagePanes,
-} from '@/utils/compositor/processMarkdown';
-import PageCreationPreview from './PageGen_preview';
-import type { NodesContext } from '@/stores/nodes';
-import type { StoryFragmentNode, PageDesign } from '@/types/compositorTypes';
-
-type PromptType = keyof typeof pagePrompts;
-
-interface GenerationResponse {
-  success: boolean;
-  data?: {
-    response: string;
-  };
-  error?: string;
-}
-
-type GenerationStatus = 'idle' | 'generating' | 'success' | 'error';
-
-interface PageCreationGenProps {
-  nodeId: string;
-  ctx: NodesContext;
-}
-
-export const PageCreationGen = ({ nodeId, ctx }: PageCreationGenProps) => {
-  const [selectedPromptType, setSelectedPromptType] =
-    useState<PromptType>('landing');
-  const [customizedPrompt, setCustomizedPrompt] = useState(
-    pagePrompts[selectedPromptType]
-  );
-  const [referenceContext, setReferenceContext] = useState('');
-  const [additionalInstructions, setAdditionalInstructions] = useState('');
-  const [showPreview, setShowPreview] = useState(false);
-  const [isApplying, setIsApplying] = useState(false);
-
-  const [generationStatus, setGenerationStatus] =
-    useState<GenerationStatus>('idle');
-  const [error, setError] = useState<string | null>(null);
-  const [generatedContent, setGeneratedContent] = useState<string | null>(null);
-  const [showModal, setShowModal] = useState(false);
-
-  const [showProgressModal, setShowProgressModal] = useState(false);
-  const [progressValue, setProgressValue] = useState(0);
-  const [progressTotal, setProgressTotal] = useState(0);
-
-  const [activeDesign, setActiveDesign] = useState<PageDesign | null>(null);
-
-  const dialogButtonRef = useRef<HTMLButtonElement>(null);
-
-  const handlePromptTypeChange = (
-    details: RadioGroupNamespace.ValueChangeDetails
-  ) => {
-    if (!details.value) return;
-    const type = details.value as PromptType;
-    setSelectedPromptType(type);
-    setCustomizedPrompt(pagePrompts[type]);
-  };
-
-  const handleGenerate = async () => {
-    setShowModal(true);
-    setGenerationStatus('generating');
-    setError(null);
-
-    const finalPrompt = `${formatPrompt}
-
-Writing Style Instructions:
-${customizedPrompt}
-
-Additional Instructions:
-${additionalInstructions}`;
-
-    try {
-      const goBackend =
-        import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-      const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
-
-      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({
-          prompt: finalPrompt,
-          input_text: referenceContext,
-          final_model: '',
-          temperature: 0.7,
-          max_tokens: 4000,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Generation failed');
-      }
-
-      const result = (await response.json()) as GenerationResponse;
-
-      if (!result.success || !result.data?.response) {
-        throw new Error(result.error || 'Generation failed');
-      }
-
-      setGeneratedContent(result.data.response);
-      setGenerationStatus('success');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-      setGenerationStatus('error');
-    }
-  };
-
-  const handleModalClose = (details: { open: boolean }) => {
-    if (generationStatus === 'generating') {
-      return;
-    }
-    if (generationStatus === 'success' && !details.open) {
-      setShowModal(false);
-      setShowPreview(true);
-      return;
-    }
-    setShowModal(false);
-    setGenerationStatus('idle');
-  };
-
-  const handlePreviewApply = (markdownContent: string, design: PageDesign) => {
-    if (isApplying) return;
-    setGeneratedContent(markdownContent);
-    setActiveDesign(design);
-    setIsApplying(true);
-  };
-
-  useEffect(() => {
-    if (isApplying && generatedContent && activeDesign) {
-      const applyDesignAsync = async () => {
-        setShowProgressModal(true);
-        setProgressValue(0);
-        setProgressTotal(0);
-
-        const onProgress = (current: number, total: number) => {
-          setProgressValue(current);
-          setProgressTotal(total);
-        };
-
-        try {
-          await ctx.applyAtomicUpdate(async (tmpCtx) => {
-            const processedPage = parsePageMarkdown(generatedContent);
-            const paneIds = await createPagePanes(
-              processedPage,
-              activeDesign,
-              tmpCtx,
-              true,
-              nodeId,
-              onProgress
-            );
-
-            const storyfragment = tmpCtx.allNodes
-              .get()
-              .get(nodeId) as StoryFragmentNode;
-            if (storyfragment) {
-              storyfragment.paneIds = paneIds;
-              storyfragment.isChanged = true;
-              tmpCtx.modifyNodes([storyfragment]);
-            }
-          });
-
-          setTimeout(() => {
-            setShowPreview(false);
-            setShowProgressModal(false);
-            setIsApplying(false);
-          }, 500);
-        } catch (error) {
-          console.error('Error applying design:', error);
-          setError('An error occurred while applying the design.');
-          setShowProgressModal(false);
-          setIsApplying(false);
-        }
-      };
-
-      applyDesignAsync();
-    }
-  }, [isApplying, generatedContent, activeDesign]);
-
-  const dialogStyles = `
-    [data-part="backdrop"] {
-      background-color: rgba(0, 0, 0, 0.3);
-    }
-    [data-part="content"] {
-      max-width: 32rem;
-      background-color: white;
-      border-radius: 0.5rem;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-      padding: 1.5rem;
-    }
-    [data-part="title"] {
-      font-size: 1.125rem;
-      font-weight: bold;
-      color: #1f2937;
-      margin-bottom: 0.5rem;
-    }
-  `;
-
-  const radioGroupStyles = `
-    .radio-item[data-highlighted] {
-      outline: none;
-    }
-    .radio-item[data-state="checked"] {
-      background-color: #efefef;
-      color: white;
-    }
-    .radio-item[data-state="checked"] .radio-description {
-      color: black;
-    }
-    .radio-item[data-state="checked"] .check-icon {
-      display: flex;
-    }
-    .radio-item .check-icon {
-      display: none;
-    }
-  `;
-
-  return (
-    <>
-      <style>{dialogStyles}</style>
-      <style>{radioGroupStyles}</style>
-
-      {showPreview && generatedContent ? (
-        <PageCreationPreview
-          markdownContent={generatedContent}
-          onComplete={handlePreviewApply}
-          onBack={() => setShowPreview(false)}
-          isApplying={isApplying}
-        />
-      ) : (
-        <div className="p-0.5 shadow-inner">
-          <div className="w-full rounded-md bg-white p-6">
-            <h2 className="font-action mb-6 text-2xl font-bold text-gray-900">
-              Generate Page Content with AI
-            </h2>
-            <div className="space-y-8">
-              <div className="w-full">
-                <RadioGroup.Root
-                  defaultValue={selectedPromptType}
-                  onValueChange={handlePromptTypeChange}
-                >
-                  <RadioGroup.Label className="mb-4 block text-sm font-bold text-gray-900">
-                    Select Page Type
-                  </RadioGroup.Label>
-                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                    {Object.entries(pagePromptsDetails).map(
-                      ([key, details]) => (
-                        <RadioGroup.Item
-                          key={key}
-                          value={key}
-                          className="radio-item relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none"
-                        >
-                          <div className="flex w-full items-center justify-between">
-                            <div className="flex items-center">
-                              <RadioGroup.ItemControl className="hidden" />
-                              <RadioGroup.ItemText>
-                                <div className="text-sm">
-                                  <p className="font-bold text-black">
-                                    {details.title}
-                                  </p>
-                                  <span className="radio-description inline text-gray-500">
-                                    {details.description}
-                                  </span>
-                                </div>
-                              </RadioGroup.ItemText>
-                            </div>
-                            <div className="check-icon shrink-0 text-white">
-                              <CheckCircleIcon className="h-6 w-6" />
-                            </div>
-                          </div>
-                          <RadioGroup.ItemHiddenInput />
-                        </RadioGroup.Item>
-                      )
-                    )}
-                  </div>
-                </RadioGroup.Root>
-              </div>
-
-              <div>
-                <label
-                  htmlFor="customPrompt"
-                  className="mb-2 block text-sm font-bold text-gray-900"
-                >
-                  Customize Writing Style (Optional)
-                </label>
-                <textarea
-                  id="customPrompt"
-                  rows={6}
-                  className="w-full rounded-md border-gray-300 p-3.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-                  value={customizedPrompt}
-                  onChange={(e) => setCustomizedPrompt(e.target.value)}
-                  maxLength={1000}
-                />
-              </div>
-
-              <div>
-                <label
-                  htmlFor="referenceContext"
-                  className="block text-sm font-bold text-gray-900"
-                >
-                  Reference Content &ndash; copy and paste dump here; no
-                  formatting required...
-                </label>
-                <textarea
-                  id="referenceContext"
-                  rows={8}
-                  className="w-full rounded-md border-gray-300 p-3.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-                  value={referenceContext}
-                  onChange={(e) => setReferenceContext(e.target.value)}
-                  maxLength={200000}
-                  placeholder="Paste your reference content here..."
-                />
-              </div>
-
-              <div>
-                <label
-                  htmlFor="additionalInstructions"
-                  className="mb-2 block text-sm font-bold text-gray-900"
-                >
-                  Additional Instructions (Optional)
-                </label>
-                <textarea
-                  id="additionalInstructions"
-                  rows={4}
-                  className="w-full rounded-md border-gray-300 p-3.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-                  value={additionalInstructions}
-                  onChange={(e) => setAdditionalInstructions(e.target.value)}
-                  maxLength={2000}
-                  placeholder="Any additional instructions or requirements..."
-                />
-              </div>
-
-              <div className="flex items-center justify-end pt-4">
-                <div className="flex gap-4">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      ctx.setPanelMode(nodeId, 'add', 'DEFAULT');
-                      ctx.notifyNode('root');
-                    }}
-                    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
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleGenerate}
-                    disabled={
-                      !referenceContext.trim() ||
-                      generationStatus === 'generating'
-                    }
-                    className={`rounded-md px-4 py-2 text-sm font-bold text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 ${
-                      referenceContext.trim() &&
-                      generationStatus !== 'generating'
-                        ? 'bg-cyan-600 hover:bg-cyan-700'
-                        : 'cursor-not-allowed bg-gray-300'
-                    }`}
-                  >
-                    {generationStatus === 'generating'
-                      ? 'Generating...'
-                      : 'Generate Content'}
-                  </button>
-                </div>
-              </div>
-            </div>
-            <Dialog.Root
-              open={showModal}
-              onOpenChange={handleModalClose}
-              modal={true}
-            >
-              <Portal>
-                <Dialog.Backdrop />
-                <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
-                  <Dialog.Content className="w-full max-w-md overflow-hidden text-left align-middle">
-                    <Dialog.Title>
-                      {generationStatus === 'error'
-                        ? 'Generation Error'
-                        : generationStatus === 'success'
-                          ? 'Content Generated'
-                          : 'Generating Content'}
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      {generationStatus === 'error' ? (
-                        <p className="text-sm text-red-600">{error}</p>
-                      ) : generationStatus === 'success' ? (
-                        <div className="space-y-4">
-                          <p className="text-sm text-gray-600">
-                            Content has been generated successfully!
-                          </p>
-                          <div className="max-h-60 overflow-y-auto rounded-md bg-gray-50 p-3">
-                            <pre className="whitespace-pre-wrap text-sm text-gray-800">
-                              {generatedContent}
-                            </pre>
-                          </div>
-                        </div>
-                      ) : (
-                        <div className="flex items-center gap-3">
-                          <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-cyan-600"></div>
-                          <p className="text-sm text-gray-500">
-                            Generating your page content...
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                    <div className="mt-4">
-                      <button
-                        ref={dialogButtonRef}
-                        type="button"
-                        className="inline-flex justify-center rounded-md border border-transparent bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-offset-2"
-                        onClick={() => {
-                          if (generationStatus === 'success') {
-                            setShowModal(false);
-                            setShowPreview(true);
-                          } else if (generationStatus === 'error') {
-                            setShowModal(false);
-                            setGenerationStatus('idle');
-                          }
-                        }}
-                        disabled={generationStatus === 'generating'}
-                      >
-                        {generationStatus === 'error'
-                          ? 'Try Again'
-                          : generationStatus === 'success'
-                            ? 'Continue'
-                            : 'Cancel'}
-                      </button>
-                    </div>
-                  </Dialog.Content>
-                </Dialog.Positioner>
-              </Portal>
-            </Dialog.Root>
-          </div>
-        </div>
-      )}
-
-      <Dialog.Root open={showProgressModal} modal={true}>
-        <Portal>
-          <Dialog.Backdrop className="fixed inset-0 bg-black/75" />
-          <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <Dialog.Content className="w-full max-w-md overflow-hidden rounded-lg bg-white p-6 text-left align-middle shadow-xl">
-              <Dialog.Title className="text-lg font-bold text-gray-900">
-                Applying Design
-              </Dialog.Title>
-              <div className="mt-4 space-y-2">
-                <p className="text-sm text-gray-500">
-                  Creating page panes... {progressValue} of {progressTotal}
-                </p>
-                <div className="h-2.5 w-full rounded-full bg-gray-200">
-                  <div
-                    className="h-2.5 rounded-full bg-cyan-600 transition-all duration-300"
-                    style={{
-                      width: `${
-                        progressTotal > 0
-                          ? (progressValue / progressTotal) * 100
-                          : 0
-                      }%`,
-                    }}
-                  ></div>
-                </div>
-              </div>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </>
-  );
-};
-
-export default PageCreationGen;