<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/@graphai/agent_filters@0.0.8/lib/bundle.umd.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 }}
  message:
  {{ message.stream1 }}
  {{ message.stream2 }}
  </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: {
    data: {
      agent: "echoAgent",
      params: {
        text1:
          "( ⚙️🤖 ) => { /* 🚀 GraphAI in Action! */ }\n🌐🤖🔧 GraphAI → 🧠💡✨ TypeScript\n  _____           _____   _    ___   ___\n  / ____|   /\\    |_   _| | |  |__ \\ / _ \\\n | |  __   /  \\     | |   | |     ) | | | |\n | | |_ | / /\\ \\    | |   | |    / /| | | |\n | |__| |/ ____ \\  _| |_  | |   / /_| |_| |\n  \\_____/_/    \\_\\|_____| |_|  |____|\\___/\n       🤖 Empowering Agents 🚀",
        text2: "こんにちは　streamingです！！＼(^o^)／"
      }
    },
    stream1: {
      agent: "streamMockAgent",
      isResult: true,
      inputs: { message: ":data.text1" }
    },
    stream2: {
      isResult: true,
      agent: "streamMockAgent",
      inputs: { message: ":data.text2" }
    }
  }
};
const base = { stream1: "", stream2: "" };
const app = createApp({
  setup() {
    const gl = computed(() => {
      return graph_data;
    });
    const { GraphAI } = graphai;
    const { useCytoscape } = vue_cytoscape;
    const { streamAgentFilterGenerator } = graphai_agent_filters;

    const message = ref(base);
    const result = ref("");

    const outSideFunciton = (context, data) => {
      message.value[context.debugInfo.nodeId] =
        message.value[context.debugInfo.nodeId] + data;
    };
    const agentFilters = [
      {
        name: "streamAgentFilter",
        agent: streamAgentFilterGenerator(outSideFunciton)
      }
    ];
    const { updateCytoscape, cytoscapeRef } = useCytoscape(gl);

    const runGraphAI = async () => {
      message.value = { ...base };
      result.value = "";
      const graph = new GraphAI(graph_data, vanilla_agents, { agentFilters });
      graph.onLogCallback = async ({ nodeId, state }) => {
        updateCytoscape(nodeId, state);
      };
      const res = await graph.run(true);
      result.value = JSON.stringify(res);
    };

    return {
      cytoscapeRef,
      result,
      runGraphAI,
      message
    };
  }
});

app.mount("#app");