fluency-v8-components 1.3.4 → 1.3.6

package/src/components/charts/WorkflowChart.vue

@@ -0,0 +1,520 @@
+<template>
+  <div class="pt-2 overflow-x-auto">
+    <div :id="`decision-chart-${id}`" />
+  </div>
+  <Slideout
+    :open="slideout"
+    :title="slideoutTitle"
+    @close="closeSlideout"
+    @hide="closeSlideout"
+  >
+    <template #content>
+      <FormSection sectionName="Details">
+        <div class="px-4">
+          <FormCol fieldName="Name">
+            <GreyInput readonly :value="slideoutData.name" />
+          </FormCol>
+          <FormCol fieldName="Type">
+            <GreyInput readonly :value="slideoutData.type" />
+          </FormCol>
+          <FormCol fieldName="Started At">
+            <GreyInput readonly :value="slideoutData.started_at" />
+          </FormCol>
+          <FormCol fieldName="Ended At">
+            <GreyInput readonly :value="slideoutData.ended_at" />
+          </FormCol>
+          <FormCol fieldName="Time Taken (ms)">
+            <GreyInput
+              readonly
+              :value="`${getTimeTaken(
+                slideoutData.started_at,
+                slideoutData.ended_at
+              )}`"
+            />
+          </FormCol>
+          <FormCol
+            v-if="slideoutData.type === 'response'"
+            fieldName="Response ID"
+          >
+            <div class="row">
+              <GreyInput readonly :value="slideoutData.span_data.response_id" />
+              <LinkIcon
+                class="icon-lg cursor-pointer icon-skyblue hover:opacity-75 m-1"
+                @click="routeToResponse(slideoutData.span_data.response_id)"
+              />
+            </div>
+          </FormCol>
+        </div>
+      </FormSection>
+      <FormSection
+        v-if="slideoutData?.span_data?.input && slideoutData?.span_data?.output"
+        sectionName="Results"
+      >
+        <div class="px-4">
+          <FormCol fieldName="Input">
+            <CodeEditor
+              class="p-3 !h-60"
+              v-model="slideoutData.span_data.input"
+              :fontSize="`${fontSize ? fontSize : '12px'}`"
+              :isFPL="false"
+            />
+          </FormCol>
+          <FormCol fieldName="Output">
+            <CodeEditor
+              class="p-3 !h-60"
+              v-model="slideoutData.span_data.output"
+              :fontSize="`${fontSize ? fontSize : '12px'}`"
+              :isFPL="false"
+            />
+          </FormCol>
+        </div>
+      </FormSection>
+    </template>
+  </Slideout>
+</template>
+<script>
+import * as d3 from "d3";
+import {
+  FormCol,
+  FormSection,
+  GreyInput,
+  Slideout,
+  CodeEditor,
+} from "@/components";
+import { agentIcon, bulbIcon, codeIcon } from "@/constants/icon-svg.js";
+import { colors, getAColorByHash } from "@/constants/colors";
+import { LinkIcon } from "@heroicons/vue/20/solid";
+import { adjustText } from "@/constants/font-map";
+import { formatReadableTime } from "@/utils/formatOutput";
+import moment from "moment";
+
+const boxWidth = 225;
+const boxHeight = 43;
+const boxSpacing = 10;
+const boxSpacingHorizontal = 60;
+const normalOpacity = 0.8;
+const selectedOpacity = 1;
+const rounding = 10;
+const topPadding = 10;
+const leftPadding = 10;
+const textLeftPadding = 10;
+const textTopPadding = 6;
+const textSize = 14;
+const iconSize = 24;
+// props and emits
+export default {
+  components: {
+    Slideout,
+    FormCol,
+    FormSection,
+    GreyInput,
+    CodeEditor,
+    LinkIcon,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    fontSize: {
+      type: String,
+      default: "12px",
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+    id: {
+      type: String,
+      default: "id",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+      selected: null,
+      slideout: false,
+      slideoutTitle: "Hello World",
+      slideoutData: {},
+      depth: 0,
+      maxLeaf: 0,
+    };
+  },
+  computed: {
+    chartData() {
+      // preprocess the data
+      return this.data;
+    },
+    height() {
+      if (this.maxLeaf > 0) {
+        return (
+          topPadding +
+          this.maxLeaf * (boxHeight + boxSpacing) +
+          boxHeight +
+          textTopPadding
+        );
+      }
+      return 100;
+    },
+    width() {
+      if (this.depth > 0) {
+        return (
+          leftPadding +
+          this.depth * (boxWidth + boxSpacingHorizontal) +
+          boxWidth +
+          textLeftPadding
+        );
+      }
+      return 100;
+    },
+  },
+  watch: {
+    id: {
+      handler(newVal) {
+        this.getMaxDepthAndY(this.chartData);
+        this.drawChart();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.initializeChart();
+    this.getMaxDepthAndY(this.chartData);
+    this.drawChart();
+  },
+  methods: {
+    initializeChart() {
+      if (this.svg) return;
+      this.svg = d3
+        .select(`#decision-chart-${this.id}`)
+        .append("svg")
+        .attr("width", this.width)
+        .attr("height", this.height);
+    },
+    drawChart() {
+      const mainFontColor = colors[this.theme].text;
+      const backgroundColor = colors[this.theme].canvas;
+
+      const handle = this;
+      // update height and width
+      this.svg.attr("width", this.width);
+      this.svg.attr("height", this.height);
+      this.svg
+        .selectAll("g.decisionChart")
+        .data(this.chartData, (d) => d.id)
+        .join(
+          (enter) => enterChart(enter),
+          (update) => updateChart(update),
+          (exit) => exitChart(exit)
+        );
+
+      function enterChart(enter) {
+        const boxes = enter.append("g").attr("class", "decisionChart");
+        drawBoxes(boxes, 0);
+      }
+      function updateChart(update) {
+        // do something
+      }
+      function exitChart(exit) {
+        exit.call((g) =>
+          g.transition().duration(200).style("opacity", 0).remove()
+        );
+      }
+
+      function drawBoxes(handler, columnIndex) {
+        // draw the background box
+        handler
+          .append("rect")
+          .attr("class", "dataBox")
+          .attr("id", (d) => d.id)
+          .attr("width", boxWidth)
+          .attr("height", boxHeight)
+          .attr(
+            "x",
+            (d) => leftPadding + columnIndex * (boxWidth + boxSpacingHorizontal)
+          )
+          .attr("y", (d, i) => topPadding + d.y * (boxHeight + boxSpacing))
+          .attr("fill", backgroundColor)
+          .attr("stroke", (d) => {
+            if (d.type === "agent") return colors[handle.theme].info;
+            if (d.type === "function") return colors[handle.theme].active;
+            if (d.type === "response") return colors[handle.theme].active2;
+            return colors[handle.theme].inactive;
+          })
+          .attr("stroke-width", 1.5)
+          .attr("rx", rounding)
+          .attr("ry", rounding)
+          .attr("opacity", 0)
+          .on("mouseover", (event, d) => {
+            const target = event.target;
+            d3.select(target)
+              .style("cursor", "pointer")
+              .attr("stroke-width", 2)
+              .attr("opacity", selectedOpacity);
+          })
+          .on("mouseout", (event, d) => {
+            d3.select(event.target)
+              .attr("stroke-width", 1.5)
+              .attr("opacity", normalOpacity);
+          })
+          .on("click", (event, d) => {
+            handle.slideoutTitle = d.name;
+            handle.slideoutData = d;
+            handle.slideout = true;
+          })
+          .transition()
+          .duration(500)
+          .attr("opacity", normalOpacity);
+
+        // draw icon
+        handler
+          .append("path")
+          .attr("fill", (d) =>
+            d.type === "response" ? colors[handle.theme].active2 : mainFontColor
+          )
+          .attr("transform", (d, i) => {
+            return (
+              "translate(" +
+              (leftPadding +
+                7 +
+                columnIndex * (boxWidth + boxSpacingHorizontal)) +
+              "," +
+              (topPadding + 9 + d.y * (boxHeight + boxSpacing)) +
+              ")"
+            );
+          })
+          .attr("d", (d, i) => {
+            if (d.type === "agent") return agentIcon.path;
+            if (d.type === "function") return codeIcon.path;
+            if (d.type === "response") return bulbIcon.path;
+            return "";
+          })
+          .attr("opacity", 0)
+          .transition()
+          .duration(700)
+          .attr("opacity", 1);
+
+        // draw text
+        handler
+          .append("text")
+          .attr(
+            "x",
+            (d) =>
+              leftPadding +
+              iconSize +
+              textLeftPadding +
+              columnIndex * (boxWidth + boxSpacingHorizontal)
+          )
+          .attr(
+            "y",
+            (d, i) =>
+              topPadding + textTopPadding + d.y * (boxHeight + boxSpacing)
+          )
+          .attr("text-anchor", "start")
+          .attr("dominant-baseline", "hanging")
+          .attr("fill", mainFontColor)
+          .text((d) => {
+            return adjustText(d.name, 1150);
+          })
+          .attr("font-size", textSize)
+          .attr("font-family", "sans-serif")
+          .attr("font-weight", "400")
+          .attr("pointer-events", "none")
+          .attr("user-select", "none")
+          .attr("opacity", 0)
+          .transition()
+          .duration(700)
+          .attr("opacity", 1);
+
+        // draw description text
+        handler
+          .append("text")
+          .attr(
+            "x",
+            (d) =>
+              leftPadding +
+              iconSize +
+              textLeftPadding +
+              columnIndex * (boxWidth + boxSpacingHorizontal)
+          )
+          .attr(
+            "y",
+            (d, i) =>
+              topPadding + textTopPadding + 17 + d.y * (boxHeight + boxSpacing)
+          )
+          .attr("text-anchor", "start")
+          .attr("dominant-baseline", "hanging")
+          .attr("fill", mainFontColor)
+          .text((d) => {
+            const type = d.type.charAt(0).toUpperCase() + d.type.slice(1);
+            const took = formatReadableTime(
+              handle.getTimeTaken(d.started_at, d.ended_at)
+            );
+            return `${type} - [took: ${took}]`;
+          })
+          .attr("font-size", textSize)
+          .attr("font-family", "sans-serif")
+          .attr("font-weight", "400")
+          .attr("pointer-events", "none")
+          .attr("user-select", "none")
+          .attr("opacity", 0)
+          .transition()
+          .duration(700)
+          .attr("opacity", 1);
+
+        handler
+          .append("circle")
+          .attr("id", (d) => d.id + "_circ_back")
+          .attr(
+            "cx",
+            columnIndex * (boxWidth + boxSpacingHorizontal) +
+              boxWidth +
+              leftPadding
+          )
+          .attr(
+            "cy",
+            (d, i) =>
+              topPadding + d.y * (boxHeight + boxSpacing) + boxHeight / 2
+          )
+          .attr("r", (d) => (d.children.length ? 4 : 0))
+          .attr("fill", backgroundColor)
+          .attr("stroke", (d) => {
+            if (d.type === "agent") return colors[handle.theme].info;
+            if (d.type === "function") return colors[handle.theme].active;
+            return colors[handle.theme].inactive;
+          })
+          .attr("stroke-width", 2)
+          .attr("opacity", 0)
+          .transition()
+          .duration(700)
+          .attr("opacity", 1);
+
+        // draw the decision lines
+        if (columnIndex) {
+          handler
+            .append("circle")
+            .attr("id", (d) => d.id + "_circ_front")
+            .attr(
+              "cx",
+              columnIndex * (boxWidth + boxSpacingHorizontal) + leftPadding
+            )
+            .attr(
+              "cy",
+              (d, i) =>
+                topPadding + d.y * (boxHeight + boxSpacing) + boxHeight / 2
+            )
+            .attr("r", 4)
+            .attr("fill", backgroundColor)
+            .attr("stroke", (d) => {
+              if (d.type === "agent") return colors[handle.theme].info;
+              if (d.type === "function") return colors[handle.theme].active;
+              if (d.type === "response") return colors[handle.theme].active2;
+              return colors[handle.theme].inactive;
+            })
+            .attr("stroke-width", 2)
+            .attr("opacity", 0)
+            .transition()
+            .duration(700)
+            .attr("opacity", 1);
+
+          connectionLines(
+            handler,
+            handler.data(),
+            handle.svg.selectAll("circle")
+          );
+        }
+
+        // draw the children
+        handler.each(function (d) {
+          const g = d3.select(this);
+
+          g.selectAll(`g.decisionChartChild${columnIndex + 1}`)
+            .data(d.children, (d) => d.id)
+            .join(
+              (enter) => enterActions(enter, columnIndex + 1),
+              (update) => updateActions(update, columnIndex + 1),
+              (exit) => exitActions(exit, columnIndex + 1)
+            );
+        });
+      }
+
+      function enterActions(enter, columnIndex) {
+        const boxes = enter
+          .append("g")
+          .attr("class", `decisionChartChild${columnIndex}`);
+        drawBoxes(boxes, columnIndex);
+      }
+      function updateActions(update, columnIndex) {
+        // do something
+      }
+      function exitActions(exit) {
+        exit.call((g) =>
+          g.transition().duration(2000).style("opacity", 0).remove()
+        );
+      }
+
+      function connectionLines(handle, data, circles) {
+        const links = data.map((d) => {
+          const source = circles
+            .nodes()
+            .find((c) => c.id === `${d.parent_id}_circ_back`);
+          const target = circles
+            .nodes()
+            .find((c) => c.id === `${d.id}_circ_front`);
+          return d3.linkHorizontal()({
+            source: [source.cx.baseVal.value, source.cy.baseVal.value],
+            target: [target.cx.baseVal.value, target.cy.baseVal.value],
+          });
+        });
+
+        handle
+          .append("path")
+          .attr("id", (d) => {
+            return d.parent_id + "-" + d.id;
+          })
+          .transition()
+          .duration(500)
+          .attr("d", (d, i) => links[i])
+          .attr("fill", "none")
+          .attr("stroke", (d, i) =>
+            getAColorByHash("green", d.parent_id + d.id)
+          )
+          .attr("stroke-width", 2)
+          .attr("opacity", 1);
+      }
+    },
+    getMaxDepthAndY(nodes) {
+      let maxDepth = 0;
+      let maxY = 0;
+
+      function traverse(node) {
+        if (node.depth > maxDepth) {
+          maxDepth = node.depth;
+        }
+        if (node.y > maxY) {
+          maxY = node.y;
+        }
+        node.children.forEach(traverse);
+      }
+
+      nodes.forEach(traverse);
+      this.depth = maxDepth;
+      this.maxLeaf = maxY;
+    },
+    getTimeTaken(startedAt, endedAt) {
+      const start = moment(startedAt);
+      const end = moment(endedAt);
+      return end.diff(start, "milliseconds");
+    },
+    closeSlideout() {
+      setTimeout(() => {
+        this.slideoutData = {};
+      }, 700);
+      this.slideout = false;
+    },
+    routeToResponse(responseID) {
+      window.open(`https://platform.openai.com/logs/${responseID}`, "_blank");
+    },
+  },
+};
+</script>

package/src/components/common/AutoCompleteSearchBar.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="relative">
+    <div class="row justify-between items-center pt-2">
+      <div class="flex-grow">
+        <Combobox v-model="newVal">
+          <ComboboxInput
+            v-model="newVal"
+            placeholder="Search"
+            @input="onChange"
+            @keyup.enter="emits('search', newVal)"
+            class="w-full dark:dark-bg"
+          />
+          <transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="transform scale-95 opacity-0"
+            enter-to-class="transform scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-out"
+            leave-from-class="transform scale-100 opacity-100"
+            leave-to-class="transform scale-95 opacity-0"
+          >
+            <ComboboxOptions
+              v-if="dict.length"
+              class="absolute z-10 max-h-56 w-full overflow-auto bg-slate-100 dark:dark-bg p-1 text-base shadow-lg ring-1 ring-black/5 sm:text-md"
+            >
+              <ComboboxOption
+                v-for="dict in localDict"
+                :key="dict"
+                :value="`${curr} ${dict}`"
+                v-slot="{ active }"
+              >
+                <li :class="{ 'bg-gray-300 dark:dark-bg-hover': active }">
+                  {{ dict }}
+                </li>
+              </ComboboxOption>
+            </ComboboxOptions>
+          </transition>
+        </Combobox>
+      </div>
+
+      <TextButton class="ml-4" text="Search" @click="emits('search', newVal)">
+        <MagnifyingGlassIcon class="w-5 h-5 mr-1" />
+      </TextButton>
+
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import { TextButton } from "@/components";
+import { MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from "@headlessui/vue";
+
+// props and emits
+const props = defineProps({
+  str: String,
+  dict: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emits = defineEmits(["search"]);
+// states
+const newVal = ref(props.str);
+const localDict = ref([]);
+// computed
+const curr = computed(() => {
+  const lastIndex = newVal.value.lastIndexOf(" ");
+  return lastIndex === -1 ? "" : newVal.value.slice(0, lastIndex);
+});
+
+watch(
+  () => props.str,
+  (val) => {
+    newVal.value = val;
+  }
+);
+
+function onChange(event) {
+  newVal.value = event.target.value;
+  filterResults(newVal.value);
+}
+
+function filterResults(val) {
+  if (!val) {
+    localDict.value = props.dict.slice(0, 100);
+  } else {
+    const lastWord = val.split(" ").pop();
+    localDict.value = props.dict
+      .filter((item) => item.toLowerCase().includes(lastWord.toLowerCase()))
+      .slice(0, 100);
+  }
+}
+</script>

package/src/components/common/AutoRefreshButton.vue

@@ -0,0 +1,53 @@
+<template>
+  <IconButton
+    class="relative"
+    color="blue"
+    :tooltip="formatTime()"
+    @click="refresh"
+  >
+    <ArrowPathIcon class="icon-lg mx-1" />
+  </IconButton>
+</template>
+<script setup>
+import { ArrowPathIcon } from "@heroicons/vue/20/solid";
+import { IconButton } from "@/components";
+import { ref } from "vue";
+// props ane emits
+const props = defineProps({
+  interval: {
+    type: Number,
+    default: 0,
+  },
+  refreshing: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["refresh"]);
+// states
+const timer = ref(props.interval);
+// mounted
+tick();
+
+// function defs
+function refresh() {
+  timer.value = props.interval;
+  emits("refresh");
+}
+
+function formatTime() {
+  return `Refresh in ${timer.value}s`;
+}
+
+function tick() {
+  timer.value -= 1;
+  setTimeout(() => {
+    if (timer.value > 0) {
+      tick();
+    } else {
+      refresh();
+      tick();
+    }
+  }, 1000);
+}
+</script>