astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,217 @@
+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="max-h-[60vh] 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

@@ -0,0 +1,109 @@
+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>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+interface AddPaneNewCustomCopyProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const AddPaneNewCustomCopy = ({
+  value: initialValue,
+  onChange,
+}: AddPaneNewCustomCopyProps) => {
+  const [localValue, setLocalValue] = useState(initialValue);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setLocalValue(e.target.value);
+  };
+
+  const handleBlur = () => {
+    onChange(localValue);
+  };
+
+  return (
+    <div className="w-full rounded-lg bg-white shadow">
+      <div className="p-6">
+        <textarea
+          value={localValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder="Enter your markdown here..."
+          className="h-48 w-full rounded-md border bg-gray-50 p-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500"
+          spellCheck={false}
+        />
+        <div className="mt-2 text-sm text-gray-500">
+          Use markdown formatting: # for headings, * for lists, etc.
+        </div>
+      </div>
+    </div>
+  );
+};