vue-qi-dialog-box-sdk/dist/vue-qi-dialog-box-sdk.es.js

A Vue.js SDK for Q&A with image upload functionality

import { defineComponent as K, inject as U, ref as m, computed as T, createElementBlock as l, openBlock as u, createElementVNode as n, Fragment as D, renderList as A, normalizeClass as B, createCommentVNode as R, toDisplayString as S, withDirectives as L, withKeys as z, vModelText as F } from "vue";
import N from "axios";
const Q = { class: "qa-container" }, V = { class: "qa-messages" }, j = {
  key: 0,
  class: "user-avatar"
}, $ = {
  key: 1,
  class: "bot-avatar"
}, P = { class: "message-text" }, G = {
  key: 0,
  class: "user-image"
}, H = ["src"], J = { class: "qa-input-area" }, W = /* @__PURE__ */ K({
  __name: "QAClient",
  props: {
    apiEndpoint: {},
    apiKey: {},
    mockMode: { type: Boolean },
    initialMessages: {}
  },
  emits: ["messageSent", "responseReceived", "error"],
  setup(i, { emit: g }) {
    const a = i, e = U("$qaSdkOptions");
    a.apiEndpoint || e != null && e.apiEndpoint, a.apiKey || (e == null || e.apiKey), a.mockMode ?? (e == null || e.mockMode), e == null || e.mockResponseDelay;
    const r = m(null), c = m(""), d = m([]), h = m(!1), v = T(() => ({
      apiEndpoint: a.apiEndpoint || (e == null ? void 0 : e.apiEndpoint) || "",
      apiKey: a.apiKey || (e == null ? void 0 : e.apiKey) || "",
      mockMode: a.mockMode || ((e == null ? void 0 : e.mockMode) ?? !1)
    })), y = () => Math.random().toString(36).substring(2, 10), f = async () => {
      var t, p, _, k;
      if (!c.value.trim() && !((p = (t = r.value) == null ? void 0 : t.files) != null && p.length)) return;
      const s = {
        id: y(),
        type: "user",
        text: c.value.trim() || "Image upload",
        timestamp: /* @__PURE__ */ new Date()
      };
      if ((k = (_ = r.value) == null ? void 0 : _.files) != null && k.length) {
        const q = r.value.files[0], M = new FileReader();
        M.onload = (C) => {
          var w;
          s.imageUrl = (w = C.target) == null ? void 0 : w.result, d.value.push(s);
        }, M.readAsDataURL(q);
      } else
        d.value.push(s);
      c.value = "", r.value = null, await I(s);
    }, x = (o) => {
      var t;
      (t = o.target.files) != null && t.length && f();
    }, I = async (o) => {
      var s;
      h.value = !0;
      try {
        let t = "";
        v.value.mockMode ? (await new Promise((p) => setTimeout(p, 1e3)), t = E(o)) : t = ((s = (await N.post(
          v.value.apiEndpoint,
          {
            question: o.text,
            image: o.imageUrl
          },
          {
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${v.value.apiKey}`
            }
          }
        )).data) == null ? void 0 : s.answer) || "No response received", d.value.push({
          id: y(),
          type: "bot",
          text: t,
          timestamp: /* @__PURE__ */ new Date()
        });
      } catch (t) {
        console.error("Error processing message:", t), d.value.push({
          id: y(),
          type: "bot",
          text: "An error occurred while processing your request.",
          timestamp: /* @__PURE__ */ new Date()
        });
      } finally {
        h.value = !1;
      }
    }, E = (o) => {
      if (o.imageUrl)
        return "I received your image. This looks like a very interesting question about the image content.";
      const s = [
        "That's a great question! Let me think...",
        "I need a bit more information to answer that.",
        "Based on my knowledge, the answer is...",
        "I'm not sure, but I'll do my best to find out!",
        "Interesting! Let me analyze this..."
      ];
      return s[Math.floor(Math.random() * s.length)];
    };
    return (o, s) => (u(), l("div", Q, [
      n("div", V, [
        (u(!0), l(D, null, A(d.value, (t) => (u(), l("div", {
          key: t.id,
          class: "message"
        }, [
          n("div", {
            class: B(["message-content", t.type === "user" ? "user-message" : "bot-message"])
          }, [
            t.type === "user" ? (u(), l("div", j, s[1] || (s[1] = [
              n("i", { class: "fas fa-user" }, null, -1)
            ]))) : (u(), l("div", $, s[2] || (s[2] = [
              n("i", { class: "fas fa-robot" }, null, -1)
            ]))),
            n("div", P, [
              t.type === "user" && t.imageUrl ? (u(), l("div", G, [
                n("img", {
                  src: t.imageUrl,
                  alt: "User uploaded image"
                }, null, 8, H)
              ])) : R("", !0),
              n("div", null, S(t.text), 1)
            ])
          ], 2)
        ]))), 128))
      ]),
      n("div", J, [
        n("input", {
          type: "file",
          onChange: x,
          accept: "image/*",
          ref_key: "fileInput",
          ref: r
        }, null, 544),
        L(n("input", {
          type: "text",
          "onUpdate:modelValue": s[0] || (s[0] = (t) => c.value = t),
          onKeyup: z(f, ["enter"]),
          placeholder: "Type your question..."
        }, null, 544), [
          [F, c.value]
        ]),
        n("button", { onClick: f }, "Send")
      ])
    ]));
  }
}), X = (i, g) => {
  const a = i.__vccOpts || i;
  for (const [e, r] of g)
    a[e] = r;
  return a;
}, Y = /* @__PURE__ */ X(W, [["__scopeId", "data-v-b08e358d"]]);
function Z(i) {
  return i.component("QAClient", Y), i;
}
const ee = {
  install: Z
};
export {
  Y as QAClient,
  ee as default,
  Z as install
};