chore: merge the rest of the nodes back into this structure, and make sure that start and end nodes are not deletable.

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx

@@ -8,6 +8,10 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import useFlowStore from '../VisProgStores';
+import { useState } from 'react';
+import { RealtimeTextField, TextField } from '../../../../components/TextField';
+import duplicateIndices from '../../../../utils/duplicateIndices';
 
 /**
  * The default data dot a Trigger node
@@ -18,12 +22,12 @@ import styles from '../../VisProg.module.css';
 export type TriggerNodeData = {
   label: string;
   droppable: boolean;
-  TriggerList: string[];
+  triggerType: unknown;
+  triggers: [unknown];
   hasReduce: boolean;
 };
 
 
-
 export type TriggerNode = Node<TriggerNodeData>
 
 
@@ -37,21 +41,28 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
  * @returns React.JSX.Element
  */
 export default function TriggerNode(props: NodeProps<Node>) {
-  const label_input_id = `Trigger_${props.id}_label_input`;
-  const data = props.data as TriggerNodeData;
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeTrigger}`}>
-        <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
-        </div>
-        {data.TriggerList.map((Trigger) => (<div>{Trigger}</div>))}
-        <Handle type="target" position={Position.Right} id="phase"/>
-      </div>
-    </>
-  );
+  const data = props.data as TriggerNodeData
+  const {updateNodeData} = useFlowStore();
+
+  const setKeywords = (keywords: Keyword[]) => {
+    updateNodeData(props.id, {...data, triggers: keywords});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
+      {data.triggerType === "emotion" && (
+        <div className={"flex-row gap-md"}>Emotion?</div>
+      )}
+      {data.triggerType === "keywords" && (
+        <Keywords
+          keywords={[{id: "test", keyword: " test"}]}
+          setKeywords={setKeywords}
+        />
+      )}
+      <Handle type="source" position={Position.Right} id="TriggerSource"/>
+    </div>
+  </>;
 }
 
 /**
@@ -66,7 +77,7 @@ export function TriggerReduce(node: Node, nodes: Node[]) {
   const data = node.data as TriggerNodeData;
     return {
       label: data.label,
-      list: data.TriggerList,
+      list: data.triggers,
     }
 }
 
@@ -75,4 +86,91 @@ export function TriggerConnects(thisNode: Node, otherNode: Node, isThisSource: b
   if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
     console.warn("Impossible node connection called in EndConnects")
   }
+}
+
+
+export type EmotionTriggerNodeProps = {
+  type: "emotion";
+  value: string;
+}
+
+type Keyword = { id: string, keyword: string };
+
+export type KeywordTriggerNodeProps = {
+  type: "keywords";
+  value: Keyword[];
+}
+
+export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
+
+function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
+  const [input, setInput] = useState("");
+
+  const text_input_id = "keyword_adder_input";
+
+  return <div className={"flex-row gap-md"}>
+    <label htmlFor={text_input_id}>New Keyword:</label>
+    <RealtimeTextField
+      id={text_input_id}
+      value={input}
+      setValue={setInput}
+      onCommit={() => {
+        if (!input) return;
+        addKeyword(input);
+        setInput("");
+      }}
+      placeholder={"..."}
+      className={"flex-1"}
+    />
+  </div>;
+}
+
+function Keywords({
+  keywords,
+  setKeywords,
+}: {
+  keywords: Keyword[];
+  setKeywords: (keywords: Keyword[]) => void;
+}) {
+  type Interpolatable = string | number | boolean | bigint | null | undefined;
+
+  const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
+
+  /** Indices of duplicates in the keyword array. */
+  const [duplicates, setDuplicates] = useState<number[]>([]);
+
+  function replace(id: string, value: string) {
+    value = value.trim();
+    const newKeywords = value === ""
+      ? keywords.filter((kw) => kw.id != id)
+      : keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  function add(value: string) {
+    value = value.trim();
+    if (value === "") return;
+    const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  return <>
+    <span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
+    {[...keywords].map(({id, keyword}, index) => {
+      return <div key={id} className={"flex-row gap-md"}>
+        <label htmlFor={inputElementId(id)}>Keyword:</label>
+        <TextField
+          id={inputElementId(id)}
+          value={keyword}
+          setValue={(val) => replace(id, val)}
+          placeholder={"..."}
+          className={"flex-1"}
+          invalid={duplicates.includes(index)}
+        />
+      </div>;
+    })}
+    <KeywordAdder addKeyword={add} />
+  </>;
 }