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

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

(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("axios")):typeof define=="function"&&define.amd?define(["exports","vue","axios"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VueQADialogBox={},o.Vue,o.axios))})(this,function(o,e,B){"use strict";const w={class:"qa-container"},V={class:"qa-messages"},N={key:0,class:"user-avatar"},I={key:1,class:"bot-avatar"},q={class:"message-text"},T={key:0,class:"user-image"},C=["src"],K={class:"qa-input-area"},y=((r,k)=>{const a=r.__vccOpts||r;for(const[t,l]of k)a[t]=l;return a})(e.defineComponent({__name:"QAClient",props:{apiEndpoint:{},apiKey:{},mockMode:{type:Boolean},initialMessages:{}},emits:["messageSent","responseReceived","error"],setup(r,{emit:k}){const a=r,t=e.inject("$qaSdkOptions");a.apiEndpoint||t!=null&&t.apiEndpoint,a.apiKey||(t==null||t.apiKey),a.mockMode??(t==null||t.mockMode),t==null||t.mockResponseDelay;const l=e.ref(null),c=e.ref(""),d=e.ref([]),g=e.ref(!1),p=e.computed(()=>({apiEndpoint:a.apiEndpoint||(t==null?void 0:t.apiEndpoint)||"",apiKey:a.apiKey||(t==null?void 0:t.apiKey)||"",mockMode:a.mockMode||((t==null?void 0:t.mockMode)??!1)})),u=()=>Math.random().toString(36).substring(2,10),f=async()=>{var n,m,_,E;if(!c.value.trim()&&!((m=(n=l.value)==null?void 0:n.files)!=null&&m.length))return;const s={id:u(),type:"user",text:c.value.trim()||"Image upload",timestamp:new Date};if((E=(_=l.value)==null?void 0:_.files)!=null&&E.length){const S=l.value.files[0],x=new FileReader;x.onload=Q=>{var M;s.imageUrl=(M=Q.target)==null?void 0:M.result,d.value.push(s)},x.readAsDataURL(S)}else d.value.push(s);c.value="",l.value=null,await D(s)},A=i=>{var n;(n=i.target.files)!=null&&n.length&&f()},D=async i=>{var s;g.value=!0;try{let n="";p.value.mockMode?(await new Promise(m=>setTimeout(m,1e3)),n=v(i)):n=((s=(await B.post(p.value.apiEndpoint,{question:i.text,image:i.imageUrl},{headers:{"Content-Type":"application/json",Authorization:`Bearer ${p.value.apiKey}`}})).data)==null?void 0:s.answer)||"No response received",d.value.push({id:u(),type:"bot",text:n,timestamp:new Date})}catch(n){console.error("Error processing message:",n),d.value.push({id:u(),type:"bot",text:"An error occurred while processing your request.",timestamp:new Date})}finally{g.value=!1}},v=i=>{if(i.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(i,s)=>(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,n=>(e.openBlock(),e.createElementBlock("div",{key:n.id,class:"message"},[e.createElementVNode("div",{class:e.normalizeClass(["message-content",n.type==="user"?"user-message":"bot-message"])},[n.type==="user"?(e.openBlock(),e.createElementBlock("div",N,s[1]||(s[1]=[e.createElementVNode("i",{class:"fas fa-user"},null,-1)]))):(e.openBlock(),e.createElementBlock("div",I,s[2]||(s[2]=[e.createElementVNode("i",{class:"fas fa-robot"},null,-1)]))),e.createElementVNode("div",q,[n.type==="user"&&n.imageUrl?(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("img",{src:n.imageUrl,alt:"User uploaded image"},null,8,C)])):e.createCommentVNode("",!0),e.createElementVNode("div",null,e.toDisplayString(n.text),1)])],2)]))),128))]),e.createElementVNode("div",K,[e.createElementVNode("input",{type:"file",onChange:A,accept:"image/*",ref_key:"fileInput",ref:l},null,544),e.withDirectives(e.createElementVNode("input",{type:"text","onUpdate:modelValue":s[0]||(s[0]=n=>c.value=n),onKeyup:e.withKeys(f,["enter"]),placeholder:"Type your question..."},null,544),[[e.vModelText,c.value]]),e.createElementVNode("button",{onClick:f},"Send")])]))}}),[["__scopeId","data-v-b08e358d"]]);function h(r){return r.component("QAClient",y),r}const U={install:h};o.QAClient=y,o.default=U,o.install=h,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});