<script src="
https://cdn.jsdelivr.net/npm/vue@3.5.12/dist/vue.global.min.js
"></script>
<script src="https://cdn.jsdelivr.net/npm/graphai@0.5.18/lib/bundle.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@graphai/vanilla@0.1.8/lib/bundle.umd.min.js"></script>

<script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>

<script src="
https://cdn.jsdelivr.net/npm/cytoscape@3.30.3/dist/cytoscape.min.js
"></script>

<script src="
https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.4/cytoscape-klay.min.js
"></script>

<script src="
https://cdn.jsdelivr.net/npm/@receptron/graphai_vue_cytoscape@0.0.12/lib/bundle.umd.js
"></script>
<div id="app">
  <pre>
  result:
  {{ result }}
  </pre>
  <button type="button" @click="runGraphAI">run</button>
  <div ref="cytoscapeRef" style="width:100%; height: 200px;"></div>
</div>

const { createApp, ref, computed } = Vue;

const graph_data = {
  version: 0.5,
  nodes: {
    test: {
      agent: "echoAgent",
      params: {
        text: "hello"
      }
    },
    test2: {
      agent: "copyAgent",
      params: {
        namedKey: "text"
      },
      inputs: { text: ":test.text" }
    }
  }
};

const app = createApp({
  setup() {
    const gl = computed(() => {
      return graph_data;
    });
    const { GraphAI } = graphai;
    const { useCytoscape } = vue_cytoscape;
    //console.log(gl);
    const { updateCytoscape, cytoscapeRef } = useCytoscape(gl);

    const result = ref("");
    const runGraphAI = async () => {
      const graph = new GraphAI(graph_data, vanilla_agents);
      graph.onLogCallback = async ({ nodeId, state }) => {
        // logs.value.push({ nodeId, state, inputs, result, errorMessage });
        updateCytoscape(nodeId, state);
        console.log(nodeId, state);
      };
      const res = await graph.run(true);

      result.value = JSON.stringify(res);
    };
    const myButton = ref();
    return {
      cytoscapeRef,
      result,
      runGraphAI
    };
  }
});

app.mount("#app");