gci-chatbot-ai 1.0.25 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -3
- package/dist/gci-chatbot-ai.js +4 -4
- package/dist/gci-chatbot-ai.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,69 @@
|
|
|
1
|
-
|
|
1
|
+
# ChatbotComponent - Vue AI Chat Component
|
|
2
|
+
|
|
3
|
+
A Vue 3 component for AI-powered chat functionality that can be installed via npm and used in any Vue project.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install gci-chatbot-ai
|
|
9
|
+
# or
|
|
10
|
+
yarn add gci-chatbot-ai
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Basic Usage
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
<script setup lang="ts">
|
|
19
|
+
import { ChatbotComponent } from 'gci-chatbot-ai';
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<template>
|
|
23
|
+
<div>
|
|
24
|
+
<ChatbotComponent />
|
|
25
|
+
</div>
|
|
26
|
+
</template>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Custom Configuration
|
|
30
|
+
|
|
31
|
+
You can customize the API endpoint, client ID, and token:
|
|
32
|
+
|
|
33
|
+
```vue
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { ChatbotComponent } from 'gci-chatbot-ai';
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<div>
|
|
40
|
+
<ChatbotComponent client-id="your-client-id" token="your-auth-token" endpoint="https://your-custom-api-endpoint.com/chat" />
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Required Parameters
|
|
46
|
+
|
|
47
|
+
The `ChatbotComponent` component requires the following parameters:
|
|
48
|
+
- `client-id`: Your client identification string
|
|
49
|
+
- `endpoint`: The API endpoint URL for the chat service
|
|
50
|
+
- `token`: Authentication token for the API
|
|
51
|
+
|
|
52
|
+
```vue
|
|
53
|
+
<script setup lang="ts">
|
|
54
|
+
import { ChatbotComponent } from 'gci-chatbot-ai';
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<template>
|
|
58
|
+
<div>
|
|
59
|
+
<ChatbotComponent client-id="required-client-id" token="required-auth-token" endpoint="https://api.example.com/chat" />
|
|
60
|
+
</div>
|
|
61
|
+
</template>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Development
|
|
65
|
+
|
|
66
|
+
### Project Setup
|
|
2
67
|
|
|
3
68
|
```sh
|
|
4
69
|
npm install
|
|
@@ -10,10 +75,26 @@ npm install
|
|
|
10
75
|
npm run dev
|
|
11
76
|
```
|
|
12
77
|
|
|
13
|
-
###
|
|
78
|
+
### Build for Production
|
|
14
79
|
|
|
15
80
|
```sh
|
|
16
81
|
npm run build
|
|
17
82
|
```
|
|
18
83
|
|
|
19
|
-
|
|
84
|
+
## Features
|
|
85
|
+
|
|
86
|
+
- Easy integration with Vue 3 projects
|
|
87
|
+
- Customizable AI chat functionality
|
|
88
|
+
- TypeScript support
|
|
89
|
+
- Lightweight and performant
|
|
90
|
+
|
|
91
|
+
## Configuration
|
|
92
|
+
|
|
93
|
+
The component uses the following dependencies:
|
|
94
|
+
- Vue 3
|
|
95
|
+
- @ai-sdk/vue
|
|
96
|
+
- ai (for AI transport)
|
|
97
|
+
|
|
98
|
+
## License
|
|
99
|
+
|
|
100
|
+
MIT
|
package/dist/gci-chatbot-ai.js
CHANGED
|
@@ -6684,7 +6684,7 @@ const El = Vn("x", [
|
|
|
6684
6684
|
__name: "ChatbotComponent",
|
|
6685
6685
|
props: {
|
|
6686
6686
|
clientId: { type: String, default: "" },
|
|
6687
|
-
endpoint: { type: String, default: "" },
|
|
6687
|
+
endpoint: { type: String, default: "https://ai-chat-backend.dev02.dtsmart.dev/api/chat" },
|
|
6688
6688
|
token: { type: String, default: "" }
|
|
6689
6689
|
},
|
|
6690
6690
|
emits: ["update:modelValue"],
|
|
@@ -6699,10 +6699,10 @@ const El = Vn("x", [
|
|
|
6699
6699
|
"Don't hesitate—I'm just a question away!"
|
|
6700
6700
|
], d = new zl({
|
|
6701
6701
|
transport: new Fn({
|
|
6702
|
-
api:
|
|
6702
|
+
api: r == null ? void 0 : r.endpoint,
|
|
6703
6703
|
body: {
|
|
6704
|
-
client_id: r.clientId,
|
|
6705
|
-
mcp_token: r.token
|
|
6704
|
+
client_id: r == null ? void 0 : r.clientId,
|
|
6705
|
+
mcp_token: r == null ? void 0 : r.token
|
|
6706
6706
|
}
|
|
6707
6707
|
})
|
|
6708
6708
|
}), y = async (h) => {
|
|
@@ -80,4 +80,4 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
|
|
|
80
80
|
*
|
|
81
81
|
* This source code is licensed under the ISC license.
|
|
82
82
|
* See the LICENSE file in the root directory of this source tree.
|
|
83
|
-
*/const dl=kn("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),pl={class:"z-[1000] w-fit flex flex-col items-end relative gci-chatbot"},fl={key:0,class:"ai-card chat-popup transition-all duration-7"},gl={class:"flex items-center justify-between"},ml={key:0,class:"chat-empty-state"},hl={class:"chat-empty-heading"},Il={class:"chat-empty-greeting"},yl={key:0,class:"flex justify-end"},vl={class:"message-user"},Ml={key:1,class:"message-assistant"},_l={key:1,src:xn,alt:"",class:"loading-message"},Nl=["disabled"],bl={class:"chat-actions-content"},Al=g.defineComponent({__name:"ChatbotComponent",props:{clientId:{type:String,default:""},endpoint:{type:String,default:""},token:{type:String,default:""}},emits:["update:modelValue"],setup(e,{emit:t}){const r=e;let n;const o=g.ref(""),s=g.ref(!1),i=g.ref(null),a=g.ref(!1),u=g.ref(0),c=g.ref(!0),l=["Ask me anything you're curious about, and I will help you understand it clearly.","Have questions? I’m here to help make things easier.","Need clarity? Let me explain it in simple terms.","I can assist you with anything you're unsure about.","Don't hesitate—I'm just a question away!"],d=new sl({transport:new jn({api:
|
|
83
|
+
*/const dl=kn("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),pl={class:"z-[1000] w-fit flex flex-col items-end relative gci-chatbot"},fl={key:0,class:"ai-card chat-popup transition-all duration-7"},gl={class:"flex items-center justify-between"},ml={key:0,class:"chat-empty-state"},hl={class:"chat-empty-heading"},Il={class:"chat-empty-greeting"},yl={key:0,class:"flex justify-end"},vl={class:"message-user"},Ml={key:1,class:"message-assistant"},_l={key:1,src:xn,alt:"",class:"loading-message"},Nl=["disabled"],bl={class:"chat-actions-content"},Al=g.defineComponent({__name:"ChatbotComponent",props:{clientId:{type:String,default:""},endpoint:{type:String,default:"https://ai-chat-backend.dev02.dtsmart.dev/api/chat"},token:{type:String,default:""}},emits:["update:modelValue"],setup(e,{emit:t}){const r=e;let n;const o=g.ref(""),s=g.ref(!1),i=g.ref(null),a=g.ref(!1),u=g.ref(0),c=g.ref(!0),l=["Ask me anything you're curious about, and I will help you understand it clearly.","Have questions? I’m here to help make things easier.","Need clarity? Let me explain it in simple terms.","I can assist you with anything you're unsure about.","Don't hesitate—I'm just a question away!"],d=new sl({transport:new jn({api:r==null?void 0:r.endpoint,body:{client_id:r==null?void 0:r.clientId,mcp_token:r==null?void 0:r.token}})}),v=async I=>{try{if(!o.value.trim())return;const h=o.value.trim();o.value="",a.value=!0,I.preventDefault(),await d.sendMessage({text:h})}catch(h){console.error(h)}finally{a.value=!1}},m=()=>{s.value=!s.value},N=()=>{s.value=!1,d.messages=[]};return g.watch(()=>d.messages,async()=>{var I;await g.nextTick(),(I=i.value)==null||I.scrollTo({top:i.value.scrollHeight,behavior:"smooth"})},{deep:!0}),g.onMounted(()=>{n=window.setInterval(()=>{l.length&&(c.value=!1,setTimeout(()=>{u.value=(u.value+1)%l.length,c.value=!0},300))},6e3)}),g.onUnmounted(()=>{n&&clearInterval(n)}),(I,h)=>{var A;return g.openBlock(),g.createElementBlock(g.Fragment,null,[s.value?(g.openBlock(),g.createElementBlock("div",{key:0,class:"bg-[#ffffff00] absolute w-full h-full",onClick:h[0]||(h[0]=b=>s.value=!1)})):g.createCommentVNode("",!0),g.createElementVNode("div",pl,[s.value?(g.openBlock(),g.createElementBlock("div",fl,[g.createElementVNode("div",gl,[h[2]||(h[2]=g.createElementVNode("p",{class:"ai-hello"},"Hi, I’m Boko AI",-1)),g.createElementVNode("button",{class:"ai-close",onClick:N},[g.createVNode(g.unref(dl))])]),g.createElementVNode("div",{ref_key:"scrollRef",ref:i,class:"chat-popup-message"},[g.unref(d).messages.length===0?(g.openBlock(),g.createElementBlock("div",ml,[g.createElementVNode("div",hl,[g.createElementVNode("p",Il," Hello "+g.toDisplayString(e.clientId),1),h[3]||(h[3]=g.createElementVNode("p",{class:"chat-empty-title"}," How Can I Help You Today ? ",-1))]),h[4]||(h[4]=g.createElementVNode("p",{class:"chat-empty-description"}," I’m Boko, your friendly assistant. ",-1)),h[5]||(h[5]=g.createElementVNode("p",{class:"chat-empty-description"}," Here to help — anytime you’re ready! ",-1))])):g.createCommentVNode("",!0),(g.openBlock(!0),g.createElementBlock(g.Fragment,null,g.renderList(g.unref(d).messages,(b,f)=>(g.openBlock(),g.createElementBlock("div",{key:b.id??f,class:"mb-3"},[(g.openBlock(!0),g.createElementBlock(g.Fragment,null,g.renderList(b==null?void 0:b.parts,(w,D)=>(g.openBlock(),g.createElementBlock(g.Fragment,{key:`${b.id}-${w.type}-${D}`},[(w==null?void 0:w.type)==="text"?(g.openBlock(),g.createElementBlock(g.Fragment,{key:0},[b.role==="user"?(g.openBlock(),g.createElementBlock("div",yl,[g.createElementVNode("div",vl,[g.createElementVNode("div",null,g.toDisplayString(w==null?void 0:w.text),1)])])):(g.openBlock(),g.createElementBlock("div",Ml,[g.createElementVNode("div",null,g.toDisplayString(w==null?void 0:w.text),1)]))],64)):g.createCommentVNode("",!0)],64))),128))]))),128)),a.value?(g.openBlock(),g.createElementBlock("img",_l)):g.createCommentVNode("",!0)],512),g.createElementVNode("form",{onSubmit:v,class:"ai-input-wrap"},[g.withDirectives(g.createElementVNode("input",{class:"ai-input","onUpdate:modelValue":h[1]||(h[1]=b=>o.value=b),placeholder:"Ask me anything…"},null,512),[[g.vModelText,o.value]]),g.createElementVNode("button",{class:"ai-send",disabled:!o.value||((A=o.value)==null?void 0:A.length)==0||a.value},[g.createVNode(g.unref(ll),{class:"w-5 h-5 text-white"})],8,Nl)],32)])):g.createCommentVNode("",!0),g.createElementVNode("div",{class:"chat-actions",onClick:m},[g.createVNode(g.Transition,{name:"fade-slide"},{default:g.withCtx(()=>[g.withDirectives(g.createElementVNode("div",bl,[...h[6]||(h[6]=[g.createElementVNode("div",{class:"chat-actions-tooltip bg-tooltip-chatbot"},[g.createElementVNode("span",{class:"tooltip-arrow"},[g.createElementVNode("svg",{width:"15",height:"23",viewBox:"0 0 15 23",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[g.createElementVNode("path",{d:"M14.5547 22.3335V0.000163078L0 9.19624L14.5547 22.3335Z",fill:"currentColor"})])]),g.createElementVNode("div",{class:"tooltip-header"},[g.createElementVNode("div",{class:"flex justify-start items-center"},[g.createElementVNode("p",{class:"tooltip-label"},"DigiAI"),g.createElementVNode("span",null,[g.createElementVNode("img",{src:Zn,alt:""})])]),g.createElementVNode("div",{class:"flex justify-start items-center"},[g.createElementVNode("p",{class:"tooltip-label"},"Try Now"),g.createElementVNode("span",null,[g.createElementVNode("svg",{width:"14",height:"15",viewBox:"0 0 14 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[g.createElementVNode("path",{d:"M5.25003 3.82617L8.75 7.32617L5.25 10.8262",stroke:"#9970E2","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})])])])]),g.createElementVNode("div",{class:"flex-center-box"},[g.createElementVNode("p",{class:"tooltip-label-bot"}," Have questions? I’m here to help make things easier. ")])],-1)])],512),[[g.vShow,c.value&&!s.value]])]),_:1}),g.createVNode(g.Transition,{name:"fade-slide"},{default:g.withCtx(()=>[...h[7]||(h[7]=[g.createElementVNode("div",{class:"chat-float"},[g.createElementVNode("img",{src:Pn,alt:""})],-1)])]),_:1})])])],64)}}});oe.ChatbotComponent=Al,Object.defineProperty(oe,Symbol.toStringTag,{value:"Module"})});
|