astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,258 @@
+import {
+  useState,
+  useCallback,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { ulid } from 'ulid';
+import { getCtx } from '@/stores/nodes';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import ActionBuilderField from '@/components/form/ActionBuilderField';
+import { fullContentMapStore } from '@/stores/storykeep';
+import { cloneDeep } from '@/utils/helpers';
+import { GOTO_TARGETS } from '@/constants';
+import {
+  PaneConfigMode,
+  type ImpressionNode,
+  type PaneNode,
+} from '@/types/compositorTypes';
+
+interface PaneImpressionPanelProps {
+  nodeId: string;
+  setMode: Dispatch<SetStateAction<PaneConfigMode>>;
+}
+
+const validateGotoAction = (value: string): boolean => {
+  if (!value.startsWith('(goto (')) return false;
+
+  try {
+    const match = value.match(/\(goto\s+\(([^)]+)\)/);
+    if (!match) return false;
+
+    const parts = match[1].split(' ').filter(Boolean);
+    if (parts.length === 0) return false;
+
+    const target = parts[0];
+    const targetConfig = GOTO_TARGETS[target];
+    if (!targetConfig) return false;
+
+    // For targets with subcommands
+    if (targetConfig.subcommands) {
+      if (parts.length < 2) return false;
+      return targetConfig.subcommands.includes(parts[1]);
+    }
+
+    // For targets requiring parameters
+    if (targetConfig.requiresParam) {
+      if (parts.length < 2) return false;
+
+      // For targets requiring two parameters
+      if (targetConfig.requiresSecondParam) {
+        return parts.length >= 3;
+      }
+
+      return true;
+    }
+
+    // For simple targets (like 'home')
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const validateImpression = (impression: Partial<ImpressionNode>): boolean => {
+  return !!(
+    impression.title?.trim() &&
+    impression.body?.trim() &&
+    impression.buttonText?.trim() &&
+    impression.actionsLisp?.trim() &&
+    validateGotoAction(impression.actionsLisp.trim())
+  );
+};
+
+const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
+  const ctx = getCtx();
+  const allNodes = ctx.allNodes.get();
+  const paneNode = cloneDeep(allNodes.get(nodeId)) as PaneNode;
+  const impressionNode = Array.from(allNodes.values()).find(
+    (node): node is ImpressionNode =>
+      node.nodeType === 'Impression' && node.parentId === nodeId
+  );
+  if (!paneNode) return null;
+
+  // Local state for form values
+  const [formData, setFormData] = useState({
+    title: impressionNode?.title || '',
+    body: impressionNode?.body || '',
+    buttonText: impressionNode?.buttonText || '',
+    actionsLisp: impressionNode?.actionsLisp || '',
+  });
+
+  const updateStore = useCallback(
+    (data: Partial<ImpressionNode>) => {
+      const ctx = getCtx();
+      let node: ImpressionNode;
+      if (impressionNode) {
+        // Update existing impression
+        node = {
+          ...cloneDeep(impressionNode),
+          tagName: 'impression',
+          ...data,
+          isChanged: true,
+        };
+        ctx.modifyNodes([node]);
+      } else {
+        // Create new impression linked to this Pane
+        node = {
+          id: ulid(),
+          tagName: 'impression',
+          nodeType: 'Impression',
+          parentId: nodeId,
+          ...data,
+          isChanged: true,
+        } as ImpressionNode;
+        ctx.addTemplateImpressionNode(nodeId, node);
+      }
+      ctx.modifyNodes([
+        {
+          ...paneNode,
+          isChanged: true,
+        },
+      ]);
+    },
+    [nodeId, impressionNode]
+  );
+
+  const handleInputChange = (field: keyof typeof formData, value: string) => {
+    const newData = { ...formData, [field]: value };
+    setFormData(newData);
+
+    if (field === 'actionsLisp') {
+      if (validateImpression(newData)) {
+        updateStore(newData);
+      }
+    }
+  };
+
+  const handleBlur = () => {
+    const newData = {
+      title: formData.title.trim(),
+      body: formData.body.trim(),
+      buttonText: formData.buttonText.trim(),
+      actionsLisp: formData.actionsLisp.trim(),
+    };
+
+    if (validateImpression(newData)) {
+      updateStore(newData);
+    }
+  };
+
+  const handleRemove = () => {
+    if (impressionNode?.id && impressionNode?.parentId) {
+      const ctx = getCtx();
+      ctx.deleteNode(impressionNode.id);
+      ctx.modifyNodes([
+        {
+          ...paneNode,
+          isChanged: true,
+        },
+      ]);
+      setMode(PaneConfigMode.DEFAULT);
+    }
+  };
+
+  const commonInputClass =
+    'block w-full rounded-md border-0 px-2.5 py-1.5 text-myblack ring-1 ring-inset ring-mygreen placeholder:text-mydarkgrey focus:ring-2 focus:ring-inset focus:ring-myorange xs:text-sm xs:leading-6';
+  const isValid = validateImpression(formData);
+
+  return (
+    <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6 shadow-inner">
+      <div className="px-3.5">
+        <div className="mb-4 flex justify-between">
+          <h3 className="text-lg font-bold">Impression Settings</h3>
+          <button
+            onClick={() => setMode(PaneConfigMode.DEFAULT)}
+            className="text-myblue hover:text-black"
+          >
+            ← Go Back
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-mydarkgrey block text-sm">Title</label>
+            <input
+              type="text"
+              value={formData.title}
+              onChange={(e) => handleInputChange('title', e.target.value)}
+              onBlur={handleBlur}
+              placeholder="Enter impression title"
+              className={commonInputClass}
+            />
+          </div>
+
+          <div>
+            <label className="text-mydarkgrey block text-sm">Body</label>
+            <textarea
+              value={formData.body}
+              onChange={(e) => handleInputChange('body', e.target.value)}
+              onBlur={handleBlur}
+              placeholder="Enter impression body text"
+              className={`${commonInputClass} min-h-[100px]`}
+            />
+          </div>
+
+          <div>
+            <label className="text-mydarkgrey block text-sm">Button Text</label>
+            <input
+              type="text"
+              value={formData.buttonText}
+              onChange={(e) => handleInputChange('buttonText', e.target.value)}
+              onBlur={handleBlur}
+              placeholder="Enter button text"
+              className={commonInputClass}
+            />
+          </div>
+
+          <div className="relative">
+            <label className="text-mydarkgrey block text-sm">Actions</label>
+            <ActionBuilderField
+              value={formData.actionsLisp}
+              onChange={(value) => handleInputChange('actionsLisp', value)}
+              contentMap={fullContentMapStore.get()}
+            />
+          </div>
+
+          <div className="flex items-center gap-2 pt-2">
+            {isValid ? (
+              <div className="flex items-center gap-1 text-green-600">
+                <CheckIcon className="h-5 w-5" />
+                <span>Valid impression configuration</span>
+              </div>
+            ) : (
+              <div className="text-mydarkgrey">
+                All fields are required and action must be fully configured
+              </div>
+            )}
+          </div>
+
+          {impressionNode && (
+            <div className="mt-6 border-t border-gray-200 pt-6">
+              <button
+                onClick={handleRemove}
+                className="flex items-center gap-2 rounded-md bg-red-100 px-4 py-2 text-red-700 hover:bg-red-200"
+              >
+                <XMarkIcon className="h-5 w-5" />
+                Remove Impression
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PaneImpressionPanel;

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

@@ -0,0 +1,268 @@
+import {
+  useState,
+  useCallback,
+  useEffect,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { getCtx } from '@/stores/nodes';
+import { cloneDeep } from '@/utils/helpers';
+import {
+  PaneConfigMode,
+  type PaneNode,
+  type BeliefNode,
+} from '@/types/compositorTypes';
+import MagicPathBuilder from '@/components/form/MagicPathBuilder';
+
+type PathsType = Record<string, string[]>;
+
+interface PaneMagicPathPanelProps {
+  nodeId: string;
+  setMode: Dispatch<SetStateAction<PaneConfigMode>>;
+}
+
+const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
+  const [heldPaths, setHeldPaths] = useState<PathsType>({});
+  const [withheldPaths, setWithheldPaths] = useState<PathsType>({});
+  const [availableBeliefs, setAvailableBeliefs] = useState<BeliefNode[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  //const [isCreatingBelief, setIsCreatingBelief] = useState(false);
+
+  const ctx = getCtx();
+  const allNodes = ctx.allNodes.get();
+  const paneNode = allNodes.get(nodeId) as PaneNode | undefined;
+
+  if (!paneNode) return null;
+
+  // Initialize state from node data
+  useEffect(() => {
+    setHeldPaths((paneNode.heldBeliefs as PathsType) || {});
+    setWithheldPaths((paneNode.withheldBeliefs as PathsType) || {});
+  }, [paneNode.heldBeliefs, paneNode.withheldBeliefs]);
+
+  const fetchBeliefs = async () => {
+    try {
+      setIsLoading(true);
+      const goBackend =
+        import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+      const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
+
+      // Get all belief IDs first
+      const idsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': tenantId,
+        },
+      });
+
+      if (!idsResponse.ok) throw new Error('Failed to fetch belief IDs');
+
+      const idsResult = await idsResponse.json();
+      // CORRECTED: The key from the backend is "beliefIds", not "beliefs"
+      if (!idsResult.beliefIds || idsResult.beliefIds.length === 0) {
+        setAvailableBeliefs([]);
+        setIsLoading(false);
+        return;
+      }
+
+      // Get full belief data
+      const beliefsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': tenantId,
+        },
+        // CORRECTED: Pass the array from the correct key "beliefIds"
+        body: JSON.stringify({ beliefIds: idsResult.beliefIds }),
+      });
+
+      if (!beliefsResponse.ok) throw new Error('Failed to fetch beliefs');
+
+      const beliefsResult = await beliefsResponse.json();
+      if (beliefsResult.beliefs) {
+        setAvailableBeliefs(beliefsResult.beliefs);
+      } else {
+        throw new Error('Failed to fetch beliefs');
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'An error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Fetch available beliefs
+  useEffect(() => {
+    fetchBeliefs();
+  }, []);
+
+  // Handle updating store
+  const updateStore = useCallback(
+    (updatedHeldPaths: PathsType, updatedWithheldPaths: PathsType) => {
+      const ctx = getCtx();
+      const allNodes = ctx.allNodes.get();
+      const updatedNode = cloneDeep(allNodes.get(nodeId)) as PaneNode;
+
+      updatedNode.heldBeliefs = updatedHeldPaths;
+      updatedNode.withheldBeliefs = updatedWithheldPaths;
+      updatedNode.isChanged = true;
+
+      const currentPanelState = ctx.activePaneMode.get();
+
+      ctx.modifyNodes([updatedNode]);
+
+      setTimeout(() => {
+        // Only restore if it was a PATH mode
+        if (
+          currentPanelState.panel === 'settings' &&
+          currentPanelState.mode === 'PATH'
+        ) {
+          ctx.setPanelMode(nodeId, 'settings', PaneConfigMode.PATH);
+        }
+      }, 0);
+    },
+    [nodeId]
+  );
+
+  // Handle updating held beliefs
+  const handleHeldPathsChange = useCallback(
+    (newPaths: PathsType) => {
+      setHeldPaths(newPaths);
+      updateStore(newPaths, withheldPaths);
+    },
+    [withheldPaths, updateStore]
+  );
+
+  // Handle updating withheld beliefs
+  const handleWithheldPathsChange = useCallback(
+    (newPaths: PathsType) => {
+      setWithheldPaths(newPaths);
+      updateStore(heldPaths, newPaths);
+    },
+    [heldPaths, updateStore]
+  );
+
+  // Handle saving custom values for a belief
+  const handleSaveCustomValue = useCallback(
+    async (beliefId: string, customValues: string[]) => {
+      try {
+        const belief = availableBeliefs.find((b) => b.id === beliefId);
+        if (!belief) throw new Error('Belief not found');
+
+        const updatedBelief = {
+          ...belief,
+          customValues,
+        };
+
+        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/nodes/beliefs/${beliefId}`,
+          {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            body: JSON.stringify(updatedBelief),
+          }
+        );
+
+        if (!response.ok) throw new Error('Failed to save custom values');
+
+        const result = await response.json();
+        if (!result) {
+          throw new Error('Failed to save custom values');
+        }
+
+        // Update available beliefs with new custom values
+        setAvailableBeliefs((prev) =>
+          prev.map((b) => (b.id === beliefId ? { ...b, customValues } : b))
+        );
+      } catch (error) {
+        setError(error instanceof Error ? error.message : 'An error occurred');
+      }
+    },
+    [availableBeliefs]
+  );
+
+  if (isLoading) {
+    return (
+      <div className="p-4">
+        <p>Loading available beliefs...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md bg-red-50 p-4 text-red-700">
+        <p>Error: {error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6 shadow-inner">
+      <div className="px-3.5">
+        <div className="mb-4 flex justify-between">
+          <h3 className="text-lg font-bold">Magic Paths</h3>
+          <div className="space-x-2">
+            <button
+              onClick={() => setMode(PaneConfigMode.DEFAULT)}
+              className="text-cyan-700 hover:text-black"
+            >
+              ← Go Back
+            </button>
+          </div>
+        </div>
+
+        <div className="flex w-full flex-wrap gap-8">
+          <div className="min-w-[400px] flex-1">
+            <MagicPathBuilder
+              paths={heldPaths}
+              setPaths={handleHeldPathsChange}
+              availableBeliefs={availableBeliefs}
+              isShowCondition={true}
+              onSaveCustomValue={handleSaveCustomValue}
+            />
+          </div>
+
+          <div className="min-w-[400px] flex-1">
+            <MagicPathBuilder
+              paths={withheldPaths}
+              setPaths={handleWithheldPathsChange}
+              availableBeliefs={availableBeliefs}
+              isShowCondition={false}
+              onSaveCustomValue={handleSaveCustomValue}
+            />
+          </div>
+        </div>
+
+        <div className="mt-4 text-sm text-gray-600">
+          <p>Conditions control content visibility based on visitor beliefs:</p>
+          <ul className="ml-5 mt-2 list-disc">
+            <li>
+              Show Conditions display content when matching beliefs are held
+            </li>
+            <li>
+              Hide Conditions prevent content display when matching beliefs are
+              held
+            </li>
+            <li>Use Match Any Value (*) to match any value for a belief</li>
+            <li>
+              For custom beliefs, you can edit available values using the check
+              icon
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PaneMagicPathPanel;