astro-tractstack 2.0.0-rc.0

package/templates/src/components/edit/widgets/BunnyWidget.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { getCtx } from '@/stores/nodes';
+import SingleParam from '@/components/fields/SingleParam';
+import { widgetMeta } from '@/constants';
+import type { FlatNode } from '@/types/compositorTypes';
+
+interface BunnyWidgetProps {
+  node: FlatNode;
+  onUpdate: (params: string[]) => void;
+}
+
+function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
+  const [embedUrl, setEmbedUrl] = useState(
+    String(node.codeHookParams?.[0] || '')
+  );
+  const [title, setTitle] = useState(String(node.codeHookParams?.[1] || ''));
+  const [isDuplicate, setIsDuplicate] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  const widgetInfo = widgetMeta.bunny;
+
+  useEffect(() => {
+    setEmbedUrl(String(node.codeHookParams?.[0] || ''));
+    setTitle(String(node.codeHookParams?.[1] || ''));
+    validateUrl(String(node.codeHookParams?.[0] || ''));
+  }, [node]);
+
+  const checkForDuplicates = (url: string): boolean => {
+    if (!url) return false;
+
+    try {
+      const videoId = extractVideoId(url);
+      if (!videoId) return false;
+
+      const ctx = getCtx();
+      const existingVideos = ctx.getAllBunnyVideoInfo();
+
+      // Check if this video ID already exists in another node
+      return existingVideos.some(
+        (video) =>
+          video.videoId === videoId &&
+          !(node.codeHookParams?.[0] || '').includes(videoId)
+      );
+    } catch (e) {
+      console.error('Error checking for duplicates:', e);
+      return false;
+    }
+  };
+
+  const extractVideoId = (url: string): string | null => {
+    try {
+      const match = url.match(/embed\/([^/]+\/[^/?]+)/);
+      return match ? match[1] : null;
+    } catch (e) {
+      console.error('Error extracting video ID:', e);
+      return null;
+    }
+  };
+
+  // Validate URL format and check for duplicates
+  const validateUrl = (url: string): void => {
+    if (!url) {
+      setValidationError(null);
+      setIsDuplicate(false);
+      return;
+    }
+
+    const isValid = isValidUrl(url);
+    if (!isValid) {
+      setValidationError('URL should be a valid Bunny embed URL');
+      setIsDuplicate(false);
+      return;
+    }
+
+    const duplicate = checkForDuplicates(url);
+    setIsDuplicate(duplicate);
+    setValidationError(
+      duplicate ? 'This video is already used elsewhere in this page' : null
+    );
+  };
+
+  const handleEmbedUrlChange = (value: string) => {
+    setEmbedUrl(value);
+    validateUrl(value);
+    onUpdate([value, title]);
+  };
+
+  const handleTitleChange = (value: string) => {
+    setTitle(value);
+    onUpdate([embedUrl, value]);
+  };
+
+  // Validate URL format
+  const isValidUrl = (url: string): boolean => {
+    try {
+      if (!url) return false;
+      new URL(url);
+      return (
+        url.includes('//iframe.mediadelivery.net/embed/') ||
+        url.includes('//video.bunnycdn.com/')
+      );
+    } catch (e) {
+      return false;
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <SingleParam
+        label={widgetInfo.parameters[0].label}
+        value={embedUrl}
+        onChange={handleEmbedUrlChange}
+      />
+      {validationError && embedUrl && (
+        <div className="mt-1 text-xs text-red-500">{validationError}</div>
+      )}
+      {isDuplicate && (
+        <div className="rounded border border-yellow-200 bg-yellow-50 p-2 text-xs text-yellow-800">
+          Warning: This video is already used elsewhere in this page. Using the
+          same video multiple times may cause playback conflicts. Consider using
+          a single video with chapter navigation instead.
+        </div>
+      )}
+
+      <SingleParam
+        label={widgetInfo.parameters[1].label}
+        value={title}
+        onChange={handleTitleChange}
+      />
+    </div>
+  );
+}
+
+export default BunnyWidget;

package/templates/src/components/edit/widgets/IdentifyAsWidget.tsx

@@ -0,0 +1,193 @@
+import { useState, useEffect } from 'react';
+import SingleParam from '@/components/fields/SingleParam';
+import { TractStackAPI } from '@/utils/api';
+import type { FlatNode, BeliefNode } from '@/types/compositorTypes';
+
+interface IdentifyAsWidgetProps {
+  node: FlatNode;
+  onUpdate: (params: string[]) => void;
+}
+
+export default function IdentifyAsWidget({
+  node,
+  onUpdate,
+}: IdentifyAsWidgetProps) {
+  const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
+  const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
+  const [targetValues, setTargetValues] = useState<string[]>([]);
+  const [currentPrompt, setCurrentPrompt] = useState<string>('');
+
+  // Sync state with node.codeHookParams
+  useEffect(() => {
+    const params = node.codeHookParams || [];
+    const beliefTag = String(params[0] || 'BeliefTag');
+    const matchingValues = params[1] || 'TARGET_VALUE';
+    const prompt = String(params[2] || '');
+
+    // Set selected belief tag
+    if (beliefTag !== 'BeliefTag') {
+      setSelectedBeliefTag(beliefTag);
+    } else {
+      setSelectedBeliefTag('');
+    }
+
+    // Parse target values only if we have a real belief selected and real values
+    if (beliefTag !== 'BeliefTag' && matchingValues !== 'TARGET_VALUE') {
+      if (Array.isArray(matchingValues)) {
+        setTargetValues(matchingValues.map(String));
+      } else if (typeof matchingValues === 'string') {
+        setTargetValues(
+          matchingValues
+            .split(',')
+            .map((val) => val.trim())
+            .filter(Boolean)
+        );
+      }
+    } else {
+      setTargetValues([]);
+    }
+
+    setCurrentPrompt(prompt);
+  }, [node]);
+
+  // Fetch beliefs using new Go backend pattern
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const api = new TractStackAPI();
+
+        // Step 1: Get all belief IDs
+        const idsResponse = await api.get('/api/v1/nodes/beliefs');
+
+        if (!idsResponse.success) {
+          throw new Error(`Failed to fetch belief IDs: ${idsResponse.error}`);
+        }
+        const { beliefIds } = idsResponse.data;
+
+        if (!beliefIds || beliefIds.length === 0) {
+          setBeliefs([]);
+          return;
+        }
+
+        // Step 2: Get belief data by IDs
+        const beliefsResponse = await api.post('/api/v1/nodes/beliefs', {
+          beliefIds,
+        });
+
+        if (!beliefsResponse.success) {
+          throw new Error(`Failed to fetch beliefs: ${beliefsResponse.error}`);
+        }
+
+        const { beliefs } = beliefsResponse.data;
+        setBeliefs(beliefs || []);
+      } catch (error) {
+        console.error('Error fetching beliefs:', error);
+        setBeliefs([]);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleBeliefChange = (selectedValue: string) => {
+    setSelectedBeliefTag(selectedValue);
+
+    // When a belief is selected, initialize target values with ALL customValues from that belief
+    if (selectedValue) {
+      const selectedBelief = beliefs.find((b) => b.slug === selectedValue);
+      if (selectedBelief && selectedBelief.customValues) {
+        setTargetValues(selectedBelief.customValues);
+        // Update with all custom values selected by default
+        onUpdate([
+          selectedValue,
+          selectedBelief.customValues.join(','),
+          currentPrompt,
+        ]);
+      } else {
+        setTargetValues([]);
+        onUpdate([selectedValue, '', currentPrompt]);
+      }
+    } else {
+      setTargetValues([]);
+      onUpdate(['BeliefTag', 'TARGET_VALUE', currentPrompt]);
+    }
+  };
+
+  const handleTargetValueToggle = (value: string) => {
+    const newTargetValues = targetValues.includes(value)
+      ? targetValues.filter((v) => v !== value)
+      : [...targetValues, value];
+
+    setTargetValues(newTargetValues);
+    const beliefTagToUse = selectedBeliefTag || 'BeliefTag';
+    const targetParam =
+      newTargetValues.length > 0 ? newTargetValues.join(',') : 'TARGET_VALUE';
+    onUpdate([beliefTagToUse, targetParam, currentPrompt]);
+  };
+
+  const handlePromptChange = (value: string) => {
+    const sanitizedValue = value.replace(/[\n\r|]/g, '');
+    setCurrentPrompt(sanitizedValue);
+    const beliefTagToUse = selectedBeliefTag || 'BeliefTag';
+    const targetParam =
+      targetValues.length > 0 ? targetValues.join(',') : 'TARGET_VALUE';
+    onUpdate([beliefTagToUse, targetParam, sanitizedValue]);
+  };
+
+  const filteredBeliefs = beliefs.filter((b) => b.scale === 'custom');
+  const selectedBelief = beliefs.find((b) => b.slug === selectedBeliefTag);
+  const hasRealSelection = !!selectedBelief;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <select
+          value={selectedBeliefTag}
+          onChange={(e) => handleBeliefChange(e.target.value)}
+          className="flex-1 rounded-md border-0 px-2.5 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-cyan-700"
+          disabled={hasRealSelection}
+        >
+          <option value="">Select a belief</option>
+          {filteredBeliefs.map((b) => (
+            <option key={b.slug} value={b.slug}>
+              {b.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {hasRealSelection && selectedBelief && (
+        <>
+          <div className="space-y-2">
+            <label className="text-sm font-bold text-gray-700">
+              Target Values (select which options to include)
+            </label>
+            <div className="space-y-2">
+              {selectedBelief.customValues?.map((value) => (
+                <label key={value} className="flex items-center space-x-2">
+                  <input
+                    type="checkbox"
+                    checked={targetValues.includes(value)}
+                    onChange={() => handleTargetValueToggle(value)}
+                    className="rounded border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                  />
+                  <span className="text-sm text-gray-700">{value}</span>
+                </label>
+              )) || (
+                <div className="text-sm italic text-gray-500">
+                  This belief has no custom values defined.
+                </div>
+              )}
+            </div>
+          </div>
+
+          <SingleParam
+            label="Prompt"
+            value={currentPrompt}
+            onChange={handlePromptChange}
+          />
+        </>
+      )}
+    </div>
+  );
+}

package/templates/src/components/edit/widgets/SignupWidget.tsx

@@ -0,0 +1,177 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Combobox } from '@ark-ui/react';
+import { createListCollection } from '@ark-ui/react/collection';
+import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import SingleParam from '@/components/fields/SingleParam';
+import BooleanParam from '@/components/fields/BooleanParam';
+import { widgetMeta } from '@/constants';
+import { contactPersona } from '@/constants';
+import type { FlatNode } from '@/types/compositorTypes';
+
+interface SignupWidgetProps {
+  node: FlatNode;
+  onUpdate: (params: string[]) => void;
+}
+
+interface ContactPersona {
+  id: string;
+  title: string;
+  description: string;
+  disabled?: boolean;
+}
+
+// Hard coded contact personas - matches other components
+const contactPersonas: ContactPersona[] = contactPersona;
+
+function SignupWidget({ node, onUpdate }: SignupWidgetProps) {
+  const [contactPersona, setContactPersona] = useState(
+    String(node.codeHookParams?.[0] || contactPersonas[0].id)
+  );
+  const [promptText, setPromptText] = useState(
+    String(node.codeHookParams?.[1] || '')
+  );
+  const [clarifyConsent, setClarifyConsent] = useState(
+    node.codeHookParams?.[2] === 'true'
+  );
+  const [query, setQuery] = useState('');
+
+  const widgetInfo = widgetMeta.signup;
+
+  // Create collection for Combobox - filter out disabled personas
+  const collection = useMemo(() => {
+    const enabledPersonas = contactPersonas.filter(
+      (persona) => !persona.disabled
+    );
+
+    const filteredPersonas =
+      query === ''
+        ? enabledPersonas
+        : enabledPersonas.filter((persona) =>
+            persona.title.toLowerCase().includes(query.toLowerCase())
+          );
+
+    return createListCollection({
+      items: filteredPersonas,
+      itemToValue: (item) => item.id,
+      itemToString: (item) => item.title,
+    });
+  }, [query]);
+
+  // Sync local state with node prop changes
+  useEffect(() => {
+    setContactPersona(
+      String(node.codeHookParams?.[0] || contactPersonas[0].id)
+    );
+    setPromptText(String(node.codeHookParams?.[1] || ''));
+    setClarifyConsent(node.codeHookParams?.[2] === 'true');
+  }, [node]);
+
+  const handleContactPersonaChange = (details: { value: string[] }) => {
+    const value = details.value[0] || contactPersonas[0].id;
+    setContactPersona(value);
+    onUpdate([value, promptText, clarifyConsent ? 'true' : 'false']);
+  };
+
+  const handlePromptTextChange = (value: string) => {
+    setPromptText(value);
+    onUpdate([contactPersona, value, clarifyConsent ? 'true' : 'false']);
+  };
+
+  const handleClarifyConsentChange = (value: boolean) => {
+    setClarifyConsent(value);
+    onUpdate([contactPersona, promptText, value ? 'true' : 'false']);
+  };
+
+  // Get the selected persona's display name
+  const selectedPersonaTitle = useMemo(() => {
+    const selected = contactPersonas.find((p) => p.id === contactPersona);
+    return selected ? selected.title : 'Select a contact persona';
+  }, [contactPersona]);
+
+  // CSS for styling combobox items
+  const comboboxItemStyles = `
+    .persona-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .persona-item[data-highlighted] .persona-indicator {
+      color: white;
+    }
+    .persona-item[data-state="checked"] .persona-indicator {
+      display: flex;
+    }
+    .persona-item .persona-indicator {
+      display: none;
+    }
+    .persona-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div className="space-y-4">
+      <style>{comboboxItemStyles}</style>
+      <div>
+        <label className="block text-sm font-bold text-gray-700">
+          {widgetInfo.parameters[0].label}
+        </label>
+        <Combobox.Root
+          collection={collection}
+          defaultValue={[contactPersona]}
+          onValueChange={handleContactPersonaChange}
+          onInputValueChange={(details) => setQuery(details.inputValue)}
+        >
+          <div className="relative mt-1">
+            <Combobox.Input
+              className="focus:border-myblue focus:ring-myblue w-full rounded-md border border-gray-300 py-2 pl-3 pr-10 text-sm shadow-sm"
+              placeholder="Select contact persona..."
+              defaultValue={selectedPersonaTitle}
+            />
+            <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </Combobox.Trigger>
+          </div>
+          <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            {collection.items.length === 0 ? (
+              <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
+                Nothing found.
+              </div>
+            ) : (
+              collection.items.map((persona) => (
+                <Combobox.Item
+                  key={persona.id}
+                  item={persona}
+                  className="persona-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900"
+                >
+                  <span className="block truncate">{persona.title}</span>
+                  <span className="block text-sm text-gray-500">
+                    {persona.description}
+                  </span>
+                  <span className="persona-indicator text-myblue absolute inset-y-0 left-0 flex items-center pl-3">
+                    <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                  </span>
+                </Combobox.Item>
+              ))
+            )}
+          </Combobox.Content>
+        </Combobox.Root>
+      </div>
+      <SingleParam
+        label={widgetInfo.parameters[1].label}
+        value={promptText}
+        onChange={handlePromptTextChange}
+      />
+      <BooleanParam
+        label={widgetInfo.parameters[2].label}
+        value={clarifyConsent}
+        onChange={handleClarifyConsentChange}
+      />
+    </div>
+  );
+}
+
+export default SignupWidget;

package/templates/src/components/edit/widgets/ToggleWidget.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from 'react';
+import SingleParam from '@/components/fields/SingleParam';
+import { widgetMeta } from '@/constants';
+import type { FlatNode, BeliefNode } from '@/types/compositorTypes';
+
+interface ToggleWidgetProps {
+  node: FlatNode;
+  onUpdate: (params: string[]) => void;
+}
+
+export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
+  const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
+  const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
+  const [currentPrompt, setCurrentPrompt] = useState<string>('');
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // Get parameter metadata from the widgetMeta constant
+  const widgetInfo = widgetMeta.toggle;
+
+  const params = node.codeHookParams || [];
+  const beliefTag = String(params[0] || '');
+  const prompt = String(params[1] || '');
+
+  // Check if beliefTag is the placeholder value
+  const isPlaceholder = beliefTag === 'BeliefTag';
+
+  // Update local state when props change
+  useEffect(() => {
+    if (!isPlaceholder && beliefTag) {
+      setSelectedBeliefTag(beliefTag);
+    }
+    setCurrentPrompt(prompt);
+    setIsInitialized(true);
+  }, [beliefTag, prompt, isPlaceholder]);
+
+  // Fetch beliefs using new Go backend pattern
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const goBackend =
+          import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+        const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
+
+        // Step 1: Get all belief IDs
+        const idsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {
+          headers: {
+            'X-Tenant-ID': tenantId,
+          },
+        });
+
+        if (!idsResponse.ok) {
+          throw new Error(
+            `Failed to fetch belief IDs: ${idsResponse.statusText}`
+          );
+        }
+        const { beliefIds } = await idsResponse.json();
+
+        if (!beliefIds || beliefIds.length === 0) {
+          setBeliefs([]);
+          return;
+        }
+
+        // Step 2: Get belief data by IDs
+        const beliefsResponse = await fetch(
+          `${goBackend}/api/v1/nodes/beliefs`,
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            body: JSON.stringify({ beliefIds }),
+          }
+        );
+
+        if (!beliefsResponse.ok) {
+          throw new Error(
+            `Failed to fetch beliefs: ${beliefsResponse.statusText}`
+          );
+        }
+
+        const { beliefs } = await beliefsResponse.json();
+        setBeliefs(beliefs || []);
+      } catch (err) {
+        console.error('Failed to fetch beliefs:', err);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleBeliefChange = (selectedValue: string) => {
+    if (!isInitialized) return;
+    setSelectedBeliefTag(selectedValue);
+    onUpdate([selectedValue, currentPrompt]);
+  };
+
+  const handlePromptChange = (value: string) => {
+    if (!isInitialized) return;
+    // Sanitize the input value (remove newlines and pipe characters)
+    const sanitizedValue = value.replace(/[\n\r|]/g, '');
+    setCurrentPrompt(sanitizedValue);
+
+    // Use the actual selected tag (from state) or the original belief tag as fallback
+    const tagToUse = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
+    onUpdate([tagToUse, sanitizedValue]);
+  };
+
+  // Show beliefs that can be selected for the toggle
+  const filteredBeliefs = beliefs.filter(
+    (b) => b.scale === 'yn' || b.scale === 'tf'
+  );
+
+  // Find the selected belief (if any)
+  const selectedBelief = beliefs.find(
+    (b) => b.slug === (selectedBeliefTag || (isPlaceholder ? '' : beliefTag))
+  );
+
+  // Determine if we have a real selection - either from state or props
+  const hasRealSelection = !!selectedBelief || (!isPlaceholder && !!beliefTag);
+
+  // Calculate the current value to show in the select dropdown
+  const selectValue = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <select
+          value={selectValue}
+          onChange={(e) => handleBeliefChange(e.target.value)}
+          className="flex-1 rounded-md border-0 px-2.5 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-cyan-700"
+          disabled={hasRealSelection && !isPlaceholder}
+        >
+          <option value="">Select a belief</option>
+          {filteredBeliefs.map((b) => (
+            <option key={b.slug} value={b.slug}>
+              {b.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {(hasRealSelection || selectedBeliefTag) && (
+        <SingleParam
+          label={widgetInfo.parameters[1].label}
+          value={currentPrompt}
+          onChange={handlePromptChange}
+        />
+      )}
+    </div>
+  );
+}