astro-tractstack 2.0.11 → 2.0.13

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

@@ -1,107 +0,0 @@
-import { useState } from 'react';
-import { AddPanePanel_newAICopy_modal } from './AddPanePanel_newAICopy_modal';
-import { panePrompts, contextPanePrompts } from '@/constants/prompts.json';
-
-interface AddPaneNewAICopyProps {
-  onChange: (value: string) => void;
-  isContextPane: boolean;
-}
-
-export const AddPanePanel_newAICopy = ({
-  onChange,
-  isContextPane,
-}: AddPaneNewAICopyProps) => {
-  const [customizedPrompt, setCustomizedPrompt] = useState(
-    isContextPane
-      ? contextPanePrompts.shortformcontext
-      : panePrompts.shortformcontext
-  );
-  const [referenceContext, setReferenceContext] = useState('');
-  const [additionalInstructions, setAdditionalInstructions] = useState('');
-  const [showModal, setShowModal] = useState(false);
-
-  const handleGenerate = () => {
-    setShowModal(true);
-  };
-
-  const handleModalClose = () => {
-    setShowModal(false);
-  };
-
-  const handleContentGenerated = (content: string) => {
-    onChange(content);
-    setShowModal(false);
-  };
-
-  return (
-    <div className="w-full rounded-lg bg-white shadow">
-      <div className="space-y-6 p-6">
-        <div>
-          <label className="mb-2 block text-sm font-bold text-gray-900">
-            Customize Writing Style (Optional)
-          </label>
-          <textarea
-            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 className="block text-sm font-bold text-gray-900">
-            Reference Content &ndash; copy and paste dump here; no formatting
-            required...
-          </label>
-          <textarea
-            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 className="mb-2 block text-sm font-bold text-gray-900">
-            Additional Instructions (Optional)
-          </label>
-          <textarea
-            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 justify-end">
-          <button
-            onClick={handleGenerate}
-            disabled={!referenceContext.trim()}
-            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()
-                ? 'bg-cyan-600 hover:bg-cyan-700'
-                : 'cursor-not-allowed bg-gray-300'
-            }`}
-          >
-            Generate Content
-          </button>
-        </div>
-      </div>
-
-      <AddPanePanel_newAICopy_modal
-        show={showModal}
-        onClose={handleModalClose}
-        prompt={customizedPrompt}
-        referenceContext={referenceContext}
-        additionalInstructions={additionalInstructions}
-        onChange={handleContentGenerated}
-        isContextPane={isContextPane}
-      />
-    </div>
-  );
-};

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

@@ -1,217 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-import { Dialog } from '@ark-ui/react/dialog';
-import { Portal } from '@ark-ui/react/portal';
-import { paneFormatPrompt, formatPrompt } from '@/constants/prompts.json';
-
-type GenerationStatus = 'idle' | 'generating' | 'success' | 'error';
-
-interface AddPaneNewAICopyModalProps {
-  show: boolean;
-  onClose: () => void;
-  prompt: string;
-  referenceContext: string;
-  additionalInstructions: string;
-  onChange: (value: string) => void;
-  isContextPane: boolean;
-}
-
-export const AddPanePanel_newAICopy_modal = ({
-  show,
-  onClose,
-  prompt,
-  referenceContext,
-  additionalInstructions,
-  onChange,
-  isContextPane,
-}: AddPaneNewAICopyModalProps) => {
-  const [generationStatus, setGenerationStatus] =
-    useState<GenerationStatus>('idle');
-  const [error, setError] = useState<string | null>(null);
-  const [generatedContent, setGeneratedContent] = useState<string | null>(null);
-  const dialogButtonRef = useRef<HTMLButtonElement>(null);
-
-  const handleModalClose = (details: { open: boolean }) => {
-    if (generationStatus === 'generating') {
-      return;
-    }
-    if (generationStatus === 'success' && generatedContent && !details.open) {
-      onChange(generatedContent);
-      onClose();
-      setGenerationStatus('idle');
-      setGeneratedContent(null);
-      setError(null);
-      return;
-    }
-    onClose();
-    setGenerationStatus('idle');
-  };
-
-  const handleButtonClick = () => {
-    if (generationStatus === 'success' && generatedContent) {
-      onChange(generatedContent);
-      onClose();
-      setGenerationStatus('idle');
-      setGeneratedContent(null);
-      setError(null);
-    } else if (generationStatus === 'error') {
-      onClose();
-      setGenerationStatus('idle');
-    }
-  };
-
-  const handleGenerate = async () => {
-    setGenerationStatus('generating');
-    setError(null);
-
-    const finalPrompt = `${isContextPane ? formatPrompt : paneFormatPrompt}
-
-Writing Style Instructions:
-${prompt}
-
-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: 'anthropic/claude-3-5-sonnet',
-          temperature: 0.7,
-          max_tokens: 4000,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Generation failed');
-      }
-
-      const result = await response.json();
-
-      if (!result.success || !result.data?.response) {
-        throw new Error(result.error || 'Generation failed');
-      }
-
-      let content = result.data.response;
-      if (typeof content === 'object') {
-        content = JSON.stringify(content, null, 2);
-      }
-
-      setGeneratedContent(content);
-      setGenerationStatus('success');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-      setGenerationStatus('error');
-    }
-  };
-
-  useEffect(() => {
-    if (show && generationStatus === 'idle') {
-      handleGenerate();
-    }
-  }, [show]);
-
-  const dialogStyles = `
-    [data-part="backdrop"] {
-      background-color: rgba(0, 0, 0, 0.3);
-    }
-    [data-part="content"] {
-      background-color: white;
-      border-radius: 1rem;
-      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;
-      max-width: 42rem;
-      width: 100%;
-    }
-    [data-part="title"] {
-      font-size: 1.125rem;
-      font-weight: bold;
-      color: #1f2937;
-    }
-  `;
-
-  return (
-    <>
-      <style>{dialogStyles}</style>
-      <Dialog.Root open={show} onOpenChange={handleModalClose}>
-        <Portal>
-          <Dialog.Backdrop className="fixed inset-0" />
-          <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <Dialog.Content className="overflow-hidden text-left">
-              <Dialog.Title className="text-lg font-bold leading-6 text-gray-900">
-                {generationStatus === 'error'
-                  ? 'Generation Error'
-                  : generationStatus === 'success'
-                    ? 'Content Generated'
-                    : 'Generating Content'}
-              </Dialog.Title>
-
-              <div className="mt-4">
-                {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! Click "Apply
-                      Content" to use this content with your selected design.
-                    </p>
-                    <div className="overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-4">
-                      <pre className="whitespace-pre-wrap font-mono 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 content...
-                    </p>
-                  </div>
-                )}
-              </div>
-
-              <div className="mt-6 flex justify-end gap-3">
-                {generationStatus !== 'generating' && (
-                  <button
-                    type="button"
-                    className="rounded-md border border-gray-300 bg-gray-100 px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2"
-                    onClick={() => {
-                      onClose();
-                      setGenerationStatus('idle');
-                    }}
-                  >
-                    Cancel
-                  </button>
-                )}
-                <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 disabled:cursor-not-allowed disabled:bg-gray-300"
-                  onClick={handleButtonClick}
-                  disabled={generationStatus === 'generating'}
-                >
-                  {generationStatus === 'error'
-                    ? 'Try Again'
-                    : generationStatus === 'success'
-                      ? 'Apply Content'
-                      : 'Please Wait...'}
-                </button>
-              </div>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </>
-  );
-};

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

@@ -1,109 +0,0 @@
-import { RadioGroup } from '@ark-ui/react/radio-group';
-import CheckCircleIcon from '@heroicons/react/24/outline/CheckCircleIcon';
-import { hasAssemblyAIStore } from '@/stores/storykeep';
-
-export type CopyMode = 'design' | 'ai' | 'custom' | 'blank';
-
-interface AddPaneNewCopyModeProps {
-  selected: CopyMode;
-  onChange: (mode: CopyMode) => void;
-}
-
-export const AddPaneNewCopyMode = ({
-  selected,
-  onChange,
-}: AddPaneNewCopyModeProps) => {
-  const hasAssemblyAI = hasAssemblyAIStore.get();
-
-  const baseModesConfig = [
-    {
-      id: 'design',
-      name: 'Quick start',
-      description: 'Use pre-designed copy templates',
-    },
-    {
-      id: 'custom',
-      name: 'Provide your own Copy',
-      description: 'Write your own markdown content',
-    },
-    {
-      id: 'blank',
-      name: 'Blank',
-      description: 'Start with a styled blank slate',
-    },
-  ];
-
-  const aiModeConfig = {
-    id: 'ai',
-    name: 'Write with AI',
-    description: 'Let AI help write your content',
-  };
-
-  // Include "ai" mode only if hasAssemblyAI is true
-  const modes = hasAssemblyAI
-    ? [baseModesConfig[0], aiModeConfig, ...baseModesConfig.slice(1)]
-    : baseModesConfig;
-
-  // Custom styles for the radio group component
-  const radioGroupStyles = `
-    .radio-control[data-state="unchecked"] .radio-dot {
-      background-color: #d1d5db; /* gray-300 */
-    }
-    .radio-control[data-state="checked"] .radio-dot {
-      background-color: #0891b2; /* bg-cyan-600 */
-    }
-    .radio-control[data-state="checked"] {
-      border-color: #0891b2; /* bg-cyan-600 */
-    }
-    .radio-item[data-state="checked"] {
-      background-color: #0891b2; /* bg-cyan-600 */
-      color: white;
-    }
-    .radio-item:hover:not([data-state="checked"]) {
-      background-color: #f3f4f6; /* bg-gray-100 */
-    }
-  `;
-
-  return (
-    <div className="w-full pr-4">
-      <style>{radioGroupStyles}</style>
-      <div className="max-w-4xl">
-        <RadioGroup.Root
-          defaultValue={selected}
-          onValueChange={(details) => {
-            if (details.value) {
-              onChange(details.value as CopyMode);
-            }
-          }}
-        >
-          <RadioGroup.Label className="sr-only">Copy Mode</RadioGroup.Label>
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-            {modes.map((mode) => (
-              <RadioGroup.Item
-                key={mode.id}
-                value={mode.id}
-                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.ItemText>
-                      <div className="text-sm">
-                        <p className="font-bold">{mode.name}</p>
-                        <span className="inline">{mode.description}</span>
-                      </div>
-                    </RadioGroup.ItemText>
-                  </div>
-                  <div className="hidden shrink-0 data-[state=checked]:block">
-                    <CheckCircleIcon className="h-6 w-6" />
-                  </div>
-                </div>
-                <RadioGroup.ItemControl className="hidden" />
-                <RadioGroup.ItemHiddenInput />
-              </RadioGroup.Item>
-            ))}
-          </div>
-        </RadioGroup.Root>
-      </div>
-    </div>
-  );
-};