@termix-it/vue-tool 1.0.0
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 +650 -0
- package/dist/adapters/EthersV5Adapter.d.ts +20 -0
- package/dist/adapters/EthersV5Adapter.d.ts.map +1 -0
- package/dist/adapters/EthersV6Adapter.d.ts +20 -0
- package/dist/adapters/EthersV6Adapter.d.ts.map +1 -0
- package/dist/components/AP2PaymentFlow.vue.d.ts +44 -0
- package/dist/components/AP2PaymentFlow.vue.d.ts.map +1 -0
- package/dist/components/ChatInterface.vue.d.ts +67 -0
- package/dist/components/ChatInterface.vue.d.ts.map +1 -0
- package/dist/components/ChatWidget.vue.d.ts +80 -0
- package/dist/components/ChatWidget.vue.d.ts.map +1 -0
- package/dist/components/FunctionCallDisplay.vue.d.ts +38 -0
- package/dist/components/FunctionCallDisplay.vue.d.ts.map +1 -0
- package/dist/components/PaymentApprovalModal.vue.d.ts +46 -0
- package/dist/components/PaymentApprovalModal.vue.d.ts.map +1 -0
- package/dist/components/SourcesBadge.vue.d.ts +20 -0
- package/dist/components/SourcesBadge.vue.d.ts.map +1 -0
- package/dist/components/WalletConnect.vue.d.ts +24 -0
- package/dist/components/WalletConnect.vue.d.ts.map +1 -0
- package/dist/components/WalletIndicator.vue.d.ts +33 -0
- package/dist/components/WalletIndicator.vue.d.ts.map +1 -0
- package/dist/components/index.d.ts +14 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/composables/index.d.ts +10 -0
- package/dist/composables/index.d.ts.map +1 -0
- package/dist/composables/useAP2Payment.d.ts +96 -0
- package/dist/composables/useAP2Payment.d.ts.map +1 -0
- package/dist/composables/useDI.d.ts +75 -0
- package/dist/composables/useDI.d.ts.map +1 -0
- package/dist/composables/useInternalDI.d.ts +23 -0
- package/dist/composables/useInternalDI.d.ts.map +1 -0
- package/dist/composables/useToast.d.ts +14 -0
- package/dist/composables/useToast.d.ts.map +1 -0
- package/dist/core/container.d.ts +99 -0
- package/dist/core/container.d.ts.map +1 -0
- package/dist/core/index.d.ts +4 -0
- package/dist/core/index.d.ts.map +1 -0
- package/dist/core/internal-container.d.ts +26 -0
- package/dist/core/internal-container.d.ts.map +1 -0
- package/dist/core/tokens.d.ts +44 -0
- package/dist/core/tokens.d.ts.map +1 -0
- package/dist/core/types.d.ts +104 -0
- package/dist/core/types.d.ts.map +1 -0
- package/dist/executors/AP2Executor.d.ts +20 -0
- package/dist/executors/AP2Executor.d.ts.map +1 -0
- package/dist/executors/APIExecutor.d.ts +35 -0
- package/dist/executors/APIExecutor.d.ts.map +1 -0
- package/dist/executors/ContractExecutor.d.ts +41 -0
- package/dist/executors/ContractExecutor.d.ts.map +1 -0
- package/dist/executors/ExecutorRegistry.d.ts +99 -0
- package/dist/executors/ExecutorRegistry.d.ts.map +1 -0
- package/dist/executors/FiatExecutor.d.ts +31 -0
- package/dist/executors/FiatExecutor.d.ts.map +1 -0
- package/dist/executors/base/BaseExecutor.d.ts +87 -0
- package/dist/executors/base/BaseExecutor.d.ts.map +1 -0
- package/dist/executors/base/index.d.ts +2 -0
- package/dist/executors/base/index.d.ts.map +1 -0
- package/dist/executors/index.d.ts +7 -0
- package/dist/executors/index.d.ts.map +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +17473 -0
- package/dist/index.js.map +1 -0
- package/dist/interfaces/IAPIClient.d.ts +179 -0
- package/dist/interfaces/IAPIClient.d.ts.map +1 -0
- package/dist/interfaces/IEthersAdapter.d.ts +116 -0
- package/dist/interfaces/IEthersAdapter.d.ts.map +1 -0
- package/dist/interfaces/IExecutor.d.ts +64 -0
- package/dist/interfaces/IExecutor.d.ts.map +1 -0
- package/dist/interfaces/IRenderer.d.ts +117 -0
- package/dist/interfaces/IRenderer.d.ts.map +1 -0
- package/dist/interfaces/index.d.ts +5 -0
- package/dist/interfaces/index.d.ts.map +1 -0
- package/dist/lib/markdown.d.ts +21 -0
- package/dist/lib/markdown.d.ts.map +1 -0
- package/dist/lib/utils.d.ts +72 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/renderers/AP2Renderer.d.ts +12 -0
- package/dist/renderers/AP2Renderer.d.ts.map +1 -0
- package/dist/renderers/APIRenderer.d.ts +12 -0
- package/dist/renderers/APIRenderer.d.ts.map +1 -0
- package/dist/renderers/BaseRenderer.d.ts +16 -0
- package/dist/renderers/BaseRenderer.d.ts.map +1 -0
- package/dist/renderers/ContractRenderer.d.ts +14 -0
- package/dist/renderers/ContractRenderer.d.ts.map +1 -0
- package/dist/renderers/FiatRenderer.d.ts +12 -0
- package/dist/renderers/FiatRenderer.d.ts.map +1 -0
- package/dist/renderers/RendererRegistry.d.ts +78 -0
- package/dist/renderers/RendererRegistry.d.ts.map +1 -0
- package/dist/renderers/index.d.ts +12 -0
- package/dist/renderers/index.d.ts.map +1 -0
- package/dist/services/api.d.ts +55 -0
- package/dist/services/api.d.ts.map +1 -0
- package/dist/services/functionCallExecutor.d.ts +32 -0
- package/dist/services/functionCallExecutor.d.ts.map +1 -0
- package/dist/services/moonpayService.d.ts +82 -0
- package/dist/services/moonpayService.d.ts.map +1 -0
- package/dist/services/toolCallProcessor.d.ts +12 -0
- package/dist/services/toolCallProcessor.d.ts.map +1 -0
- package/dist/services/walletService.d.ts +250 -0
- package/dist/services/walletService.d.ts.map +1 -0
- package/dist/style.css +1 -0
- package/dist/types/index.d.ts +109 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/moonpay.d.ts +31 -0
- package/dist/types/moonpay.d.ts.map +1 -0
- package/package.json +87 -0
package/README.md
ADDED
|
@@ -0,0 +1,650 @@
|
|
|
1
|
+
# TermiX Frontend SDK (Vue) - Easy to Use
|
|
2
|
+
|
|
3
|
+
TermiX offers a library of out-of-the-box Vue 3 components that enable your dApp to support intelligent AI conversations and Web3 workflows in minutes. These components are highly customizable and can even be fully white-labeled. This means you have access to out-of-the-box natural language interaction, smart contract calls, MCP tool integration, and more.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🤖 **AI Chat Interface**: Ready-to-use chat component with real-time streaming responses
|
|
8
|
+
- 🔧 **Highly Configurable**: Extensive props for customization and theming
|
|
9
|
+
- 🛠️ **Function Calls**: Automatic AI function calling with REST API and smart contract execution
|
|
10
|
+
- 📚 **Knowledge Base**: Built-in knowledge base search and reference display
|
|
11
|
+
- 🎨 **Tailwind CSS**: Beautiful, responsive UI with customizable styling
|
|
12
|
+
- ⚡ **ReAct Pattern**: Support for reasoning and acting patterns in AI responses
|
|
13
|
+
- 🔗 **Smart Contracts**: Direct blockchain interaction through MetaMask and web3
|
|
14
|
+
- 📱 **Responsive**: Works seamlessly on desktop and mobile devices
|
|
15
|
+
- 🚀 **TypeScript**: Full TypeScript support with comprehensive type definitions
|
|
16
|
+
- 🌊 **Real-time Streaming**: Server-Sent Events (SSE) support for live chat responses
|
|
17
|
+
- 🪝 **Request Hooks**: `beforeCallApiFunc` hook for intercepting and modifying API requests
|
|
18
|
+
- 🔐 **HMAC Utilities**: Built-in HMAC signing and verification functions for secure API authentication
|
|
19
|
+
- 💳 **AP2 Payment**: Built-in AP2 payment flow support with mandate signing
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @termix-it/vue-tool
|
|
25
|
+
# or
|
|
26
|
+
yarn add @termix-it/vue-tool
|
|
27
|
+
# or
|
|
28
|
+
pnpm add @termix-it/vue-tool
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
After installation, you'll have access to:
|
|
32
|
+
- ✅ ChatInterface component with AI chat capabilities
|
|
33
|
+
- ✅ ChatWidget component for floating chat button
|
|
34
|
+
- ✅ PaymentApprovalModal component for AP2 payments
|
|
35
|
+
- ✅ Built-in styles (import separately)
|
|
36
|
+
- ✅ TypeScript support with full type definitions
|
|
37
|
+
- ✅ Automatic knowledge base integration
|
|
38
|
+
- ✅ Function calling (REST APIs & smart contracts)
|
|
39
|
+
- ✅ Real-time streaming support
|
|
40
|
+
- ✅ AP2 Payment composable
|
|
41
|
+
|
|
42
|
+
## Peer Dependencies
|
|
43
|
+
|
|
44
|
+
This library requires the following peer dependencies to be installed in your project:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm install vue ethers
|
|
48
|
+
# or
|
|
49
|
+
yarn add vue ethers
|
|
50
|
+
# or
|
|
51
|
+
pnpm add vue ethers
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Required peer dependencies:**
|
|
55
|
+
|
|
56
|
+
```json
|
|
57
|
+
{
|
|
58
|
+
"vue": "^3.3.0",
|
|
59
|
+
"ethers": "^5.7.0 || ^6.15.0"
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Ethers.js Version Compatibility
|
|
64
|
+
|
|
65
|
+
This library supports both **ethers v5** and **ethers v6** through an internal compatibility layer. You can use either version in your project:
|
|
66
|
+
|
|
67
|
+
- **ethers v5**: `npm install ethers@^5.7.0`
|
|
68
|
+
- **ethers v6**: `npm install ethers@^6.15.0`
|
|
69
|
+
|
|
70
|
+
The library will automatically detect which version you have installed and adapt accordingly. All Web3-related functionality (smart contract calls, wallet connections, etc.) works seamlessly with both versions.
|
|
71
|
+
|
|
72
|
+
## Quick Start
|
|
73
|
+
|
|
74
|
+
### Minimal Setup
|
|
75
|
+
|
|
76
|
+
The absolute minimum code needed to get started:
|
|
77
|
+
|
|
78
|
+
```vue
|
|
79
|
+
<script setup lang="ts">
|
|
80
|
+
import { ChatInterface } from '@termix-it/vue-tool';
|
|
81
|
+
import '@termix-it/vue-tool/style.css';
|
|
82
|
+
</script>
|
|
83
|
+
|
|
84
|
+
<template>
|
|
85
|
+
<ChatInterface
|
|
86
|
+
project-id="your-project-id"
|
|
87
|
+
ai-config-id="your-ai-config-id"
|
|
88
|
+
/>
|
|
89
|
+
</template>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Basic Usage with Common Options
|
|
93
|
+
|
|
94
|
+
```vue
|
|
95
|
+
<script setup lang="ts">
|
|
96
|
+
import { ChatInterface } from '@termix-it/vue-tool';
|
|
97
|
+
import '@termix-it/vue-tool/style.css';
|
|
98
|
+
|
|
99
|
+
const handleMessageSent = (message) => console.log('Sent:', message);
|
|
100
|
+
const handleResponseReceived = (message) => console.log('Received:', message);
|
|
101
|
+
const handleError = (error) => console.error('Error:', error);
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<template>
|
|
105
|
+
<div style="height: 100vh">
|
|
106
|
+
<ChatInterface
|
|
107
|
+
project-id="your-project-id"
|
|
108
|
+
ai-config-id="your-ai-config-id"
|
|
109
|
+
authorization="Bearer your-jwt-token"
|
|
110
|
+
:enable-streaming-mode="true"
|
|
111
|
+
:show-header="false"
|
|
112
|
+
placeholder="Type your message..."
|
|
113
|
+
@message-sent="handleMessageSent"
|
|
114
|
+
@response-received="handleResponseReceived"
|
|
115
|
+
@error="handleError"
|
|
116
|
+
/>
|
|
117
|
+
</div>
|
|
118
|
+
</template>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
**Note:**
|
|
122
|
+
- You need to import styles separately: `import '@termix-it/vue-tool/style.css'`
|
|
123
|
+
- All styles are scoped with `.termix-` prefix to prevent conflicts
|
|
124
|
+
- The API base URL is built into the SDK and defaults to `https://dashboard.termix.ai`
|
|
125
|
+
|
|
126
|
+
## Chat Widget Component
|
|
127
|
+
|
|
128
|
+
The `ChatWidget` component provides a floating chat button with a popup dialog, perfect for customer service or help functionality. The widget includes its own header, so you typically don't need to enable `showHeader` on the ChatInterface inside it.
|
|
129
|
+
|
|
130
|
+
### Basic Widget Usage
|
|
131
|
+
|
|
132
|
+
```vue
|
|
133
|
+
<script setup lang="ts">
|
|
134
|
+
import { ChatWidget, ChatInterface } from '@termix-it/vue-tool';
|
|
135
|
+
import '@termix-it/vue-tool/style.css';
|
|
136
|
+
|
|
137
|
+
const handleWidgetOpenChange = (open: boolean) => {
|
|
138
|
+
console.log('Widget open:', open);
|
|
139
|
+
};
|
|
140
|
+
</script>
|
|
141
|
+
|
|
142
|
+
<template>
|
|
143
|
+
<div style="position: relative; height: 100vh">
|
|
144
|
+
<!-- Your main content -->
|
|
145
|
+
<div>Your application content</div>
|
|
146
|
+
|
|
147
|
+
<!-- Fixed positioned chat widget -->
|
|
148
|
+
<div style="position: fixed; bottom: 24px; right: 24px">
|
|
149
|
+
<ChatWidget
|
|
150
|
+
title="AI Assistant"
|
|
151
|
+
:default-open="false"
|
|
152
|
+
@open-change="handleWidgetOpenChange"
|
|
153
|
+
>
|
|
154
|
+
<ChatInterface
|
|
155
|
+
project-id="your-project-id"
|
|
156
|
+
ai-config-id="your-ai-config-id"
|
|
157
|
+
authorization="Bearer your-token"
|
|
158
|
+
:enable-streaming-mode="true"
|
|
159
|
+
:show-header="false"
|
|
160
|
+
/>
|
|
161
|
+
</ChatWidget>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</template>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### ChatWidget Props
|
|
168
|
+
|
|
169
|
+
| Prop | Type | Default | Description |
|
|
170
|
+
|------|------|---------|-------------|
|
|
171
|
+
| `buttonIcon` | `string` | `undefined` | Custom button icon URL |
|
|
172
|
+
| `title` | `string` | `"AI Assistant"` | Dialog header title |
|
|
173
|
+
| `class` | `string` | `""` | CSS classes for the widget container |
|
|
174
|
+
| `style` | `Record<string, string>` | `undefined` | Inline styles for the widget container |
|
|
175
|
+
| `buttonClassName` | `string` | `""` | CSS classes for the chat button |
|
|
176
|
+
| `buttonStyle` | `Record<string, string>` | `undefined` | Inline styles for the chat button |
|
|
177
|
+
| `dialogClassName` | `string` | `""` | CSS classes for the dialog |
|
|
178
|
+
| `dialogStyle` | `Record<string, string>` | `undefined` | Inline styles for the dialog |
|
|
179
|
+
| `defaultOpen` | `boolean` | `false` | Whether dialog is open by default |
|
|
180
|
+
|
|
181
|
+
### ChatWidget Events
|
|
182
|
+
|
|
183
|
+
| Event | Payload | Description |
|
|
184
|
+
|-------|---------|-------------|
|
|
185
|
+
| `openChange` | `boolean` | Emitted when dialog open state changes |
|
|
186
|
+
|
|
187
|
+
## Configuration
|
|
188
|
+
|
|
189
|
+
### Chat Header
|
|
190
|
+
|
|
191
|
+
The ChatInterface component includes an optional header that displays the AI model name and personality. Control it with the `showHeader` prop:
|
|
192
|
+
|
|
193
|
+
```vue
|
|
194
|
+
<ChatInterface
|
|
195
|
+
:show-header="true"
|
|
196
|
+
personality-name="AI Assistant"
|
|
197
|
+
:show-usage-info="true"
|
|
198
|
+
...
|
|
199
|
+
/>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
The header features:
|
|
203
|
+
- Blue gradient background with white text
|
|
204
|
+
- Model and personality name display
|
|
205
|
+
- Optional usage cost display (when `showUsageInfo` is true)
|
|
206
|
+
- Automatically hidden by default for cleaner integration
|
|
207
|
+
|
|
208
|
+
### Required Props
|
|
209
|
+
|
|
210
|
+
| Prop | Type | Description |
|
|
211
|
+
|------|------|-------------|
|
|
212
|
+
| `projectId` | `string` | Your Termix project identifier |
|
|
213
|
+
| `aiConfigId` | `string` | AI configuration identifier |
|
|
214
|
+
|
|
215
|
+
### Authentication & API
|
|
216
|
+
|
|
217
|
+
| Prop | Type | Default | Description |
|
|
218
|
+
|------|------|---------|-------------|
|
|
219
|
+
| `authorization` | `string` | `undefined` | Authorization header value (e.g., 'Bearer token') |
|
|
220
|
+
| `apiHeaders` | `Record<string, string>` | `{}` | Additional headers for API requests |
|
|
221
|
+
| `restExecuteHeader` | `Record<string, string>` | `undefined` | Custom headers object for REST execution (deprecated) |
|
|
222
|
+
| `restExecuteHeaders` | `DomainHeaderConfig[]` | `undefined` | Domain-specific headers for REST execute requests |
|
|
223
|
+
| `proxyMode` | `boolean` | `false` | Enable proxy mode to route third-party REST API requests through backend proxy |
|
|
224
|
+
|
|
225
|
+
### UI Configuration
|
|
226
|
+
|
|
227
|
+
| Prop | Type | Default | Description |
|
|
228
|
+
|------|------|---------|-------------|
|
|
229
|
+
| `placeholder` | `string` | `"Type your message..."` | Input placeholder text |
|
|
230
|
+
| `personalityName` | `string` | `undefined` | Optional override for personality name (overrides API config value) |
|
|
231
|
+
|
|
232
|
+
### Feature Toggles
|
|
233
|
+
|
|
234
|
+
| Prop | Type | Default | Description |
|
|
235
|
+
|------|------|---------|-------------|
|
|
236
|
+
| `enableStreamingMode` | `boolean` | `false` | Enable real-time streaming responses via SSE |
|
|
237
|
+
| `showHeader` | `boolean` | `false` | Show/hide the chat header with title and model info |
|
|
238
|
+
| `showUsageInfo` | `boolean` | `false` | Show token usage and cost information |
|
|
239
|
+
| `showTimestamp` | `boolean` | `false` | Show message timestamps |
|
|
240
|
+
| `maxKnowledgeResults` | `number` | `3` | Maximum knowledge base results to show |
|
|
241
|
+
|
|
242
|
+
**Note:** The following features are now always enabled and cannot be disabled:
|
|
243
|
+
- Knowledge base integration
|
|
244
|
+
- Function calls (REST API and smart contracts)
|
|
245
|
+
- ReAct pattern (reasoning and acting)
|
|
246
|
+
- Knowledge references display
|
|
247
|
+
|
|
248
|
+
### Styling Props
|
|
249
|
+
|
|
250
|
+
| Prop | Type | Description |
|
|
251
|
+
|------|------|-------------|
|
|
252
|
+
| `className` | `string` | Additional CSS classes for the main container |
|
|
253
|
+
| `style` | `CSSProperties` | Inline styles for the main container |
|
|
254
|
+
| `messagesClassName` | `string` | CSS classes for the messages area |
|
|
255
|
+
| `messagesStyle` | `CSSProperties` | Inline styles for the messages area |
|
|
256
|
+
| `inputClassName` | `string` | CSS classes for the input field |
|
|
257
|
+
| `inputStyle` | `CSSProperties` | Inline styles for the input field |
|
|
258
|
+
|
|
259
|
+
### Events
|
|
260
|
+
|
|
261
|
+
| Event | Payload | Description |
|
|
262
|
+
|-------|---------|-------------|
|
|
263
|
+
| `messageSent` | `Message` | Emitted when user sends a message |
|
|
264
|
+
| `responseReceived` | `Message` | Emitted when AI responds |
|
|
265
|
+
| `functionExecuted` | `FunctionCall, ExecutionResult` | Emitted when a function is executed |
|
|
266
|
+
| `error` | `any` | Emitted when an error occurs |
|
|
267
|
+
| `messagesChange` | `Message[]` | Emitted when messages array changes (for controlled mode) |
|
|
268
|
+
|
|
269
|
+
### Hooks
|
|
270
|
+
|
|
271
|
+
| Prop | Type | Description |
|
|
272
|
+
|------|------|-------------|
|
|
273
|
+
| `beforeCallApiFunc` | `(request: ApiRequest) => Promise<ApiRequest>` | Optional async hook called before API executor makes a request. Allows modification of the request object. |
|
|
274
|
+
|
|
275
|
+
## Controlled Messages Mode
|
|
276
|
+
|
|
277
|
+
You can use `v-model:messages` to control the messages state externally:
|
|
278
|
+
|
|
279
|
+
```vue
|
|
280
|
+
<script setup lang="ts">
|
|
281
|
+
import { ref } from 'vue';
|
|
282
|
+
import { ChatInterface } from '@termix-it/vue-tool';
|
|
283
|
+
import type { Message } from '@termix-it/vue-tool';
|
|
284
|
+
|
|
285
|
+
const messages = ref<Message[]>([]);
|
|
286
|
+
</script>
|
|
287
|
+
|
|
288
|
+
<template>
|
|
289
|
+
<ChatInterface
|
|
290
|
+
project-id="your-project-id"
|
|
291
|
+
ai-config-id="your-ai-config-id"
|
|
292
|
+
v-model:messages="messages"
|
|
293
|
+
/>
|
|
294
|
+
</template>
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
## Streaming Mode
|
|
298
|
+
|
|
299
|
+
The ChatInterface supports real-time streaming responses using Server-Sent Events (SSE). When enabled, messages appear character by character as they are received from the server.
|
|
300
|
+
|
|
301
|
+
### Basic Streaming Setup
|
|
302
|
+
|
|
303
|
+
```vue
|
|
304
|
+
<ChatInterface
|
|
305
|
+
project-id="your-project-id"
|
|
306
|
+
ai-config-id="your-ai-config-id"
|
|
307
|
+
authorization="Bearer your-token"
|
|
308
|
+
:enable-streaming-mode="true"
|
|
309
|
+
/>
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
### Streaming vs Regular Mode
|
|
313
|
+
|
|
314
|
+
| Feature | Regular Mode | Streaming Mode |
|
|
315
|
+
|---------|-------------|----------------|
|
|
316
|
+
| Endpoint | `/chat` | `/chat/stream` |
|
|
317
|
+
| Response | Complete message | Character-by-character |
|
|
318
|
+
| Usage Info | Available | Limited (cost not tracked) |
|
|
319
|
+
| Visual Feedback | Loading spinner | Real-time typing |
|
|
320
|
+
| Network | Single request | SSE connection |
|
|
321
|
+
|
|
322
|
+
## Advanced Usage
|
|
323
|
+
|
|
324
|
+
### Custom Headers for REST API Calls
|
|
325
|
+
|
|
326
|
+
```vue
|
|
327
|
+
<script setup lang="ts">
|
|
328
|
+
const customHeaders = { "X-API-Key": "your-key", "X-Custom": "value" };
|
|
329
|
+
</script>
|
|
330
|
+
|
|
331
|
+
<template>
|
|
332
|
+
<ChatInterface
|
|
333
|
+
project-id="your-project-id"
|
|
334
|
+
ai-config-id="your-ai-config-id"
|
|
335
|
+
authorization="Bearer your-token"
|
|
336
|
+
:rest-execute-header="customHeaders"
|
|
337
|
+
/>
|
|
338
|
+
</template>
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
### Domain-Specific Headers
|
|
342
|
+
|
|
343
|
+
For more granular control, use `restExecuteHeaders` to specify different headers for different domains:
|
|
344
|
+
|
|
345
|
+
```vue
|
|
346
|
+
<script setup lang="ts">
|
|
347
|
+
const domainHeaders = [
|
|
348
|
+
{ domain: 'api.example.com', headers: { 'X-API-Key': 'key1' } },
|
|
349
|
+
{ domain: 'other-api.com', headers: { 'Authorization': 'Bearer token2' } },
|
|
350
|
+
{ domain: '*', headers: { 'X-Default': 'value' } } // fallback for all other domains
|
|
351
|
+
];
|
|
352
|
+
</script>
|
|
353
|
+
|
|
354
|
+
<template>
|
|
355
|
+
<ChatInterface
|
|
356
|
+
project-id="your-project-id"
|
|
357
|
+
ai-config-id="your-ai-config-id"
|
|
358
|
+
:rest-execute-headers="domainHeaders"
|
|
359
|
+
/>
|
|
360
|
+
</template>
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
### beforeCallApiFunc Hook
|
|
364
|
+
|
|
365
|
+
The `beforeCallApiFunc` hook allows you to intercept and modify API requests before they are sent:
|
|
366
|
+
|
|
367
|
+
```vue
|
|
368
|
+
<script setup lang="ts">
|
|
369
|
+
import { ChatInterface, hmacSign } from '@termix-it/vue-tool';
|
|
370
|
+
import type { ApiRequest } from '@termix-it/vue-tool';
|
|
371
|
+
|
|
372
|
+
const handleBeforeApiCall = async (request: ApiRequest): Promise<ApiRequest> => {
|
|
373
|
+
const timestamp = Date.now().toString();
|
|
374
|
+
const message = `${request.method}:${request.url}:${timestamp}`;
|
|
375
|
+
const signature = await hmacSign('your-secret-key', message);
|
|
376
|
+
|
|
377
|
+
return {
|
|
378
|
+
...request,
|
|
379
|
+
headers: {
|
|
380
|
+
...request.headers,
|
|
381
|
+
'X-Timestamp': timestamp,
|
|
382
|
+
'X-Signature': signature,
|
|
383
|
+
},
|
|
384
|
+
};
|
|
385
|
+
};
|
|
386
|
+
</script>
|
|
387
|
+
|
|
388
|
+
<template>
|
|
389
|
+
<ChatInterface
|
|
390
|
+
project-id="your-project-id"
|
|
391
|
+
ai-config-id="your-ai-config-id"
|
|
392
|
+
:before-call-api-func="handleBeforeApiCall"
|
|
393
|
+
/>
|
|
394
|
+
</template>
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
### Function Call Handling
|
|
398
|
+
|
|
399
|
+
```vue
|
|
400
|
+
<script setup lang="ts">
|
|
401
|
+
import type { FunctionCall, ExecutionResult } from '@termix-it/vue-tool';
|
|
402
|
+
|
|
403
|
+
const handleFunctionExecuted = (functionCall: FunctionCall, result: ExecutionResult) => {
|
|
404
|
+
console.log('Function executed:', functionCall.name);
|
|
405
|
+
|
|
406
|
+
if (functionCall.metadata?.type === 'contract' && result.success) {
|
|
407
|
+
if (result.data?.transactionHash) {
|
|
408
|
+
console.log('Transaction hash:', result.data.transactionHash);
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
if (functionCall.metadata?.type === 'api') {
|
|
413
|
+
console.log('API call result:', result.data);
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
</script>
|
|
417
|
+
|
|
418
|
+
<template>
|
|
419
|
+
<ChatInterface
|
|
420
|
+
project-id="your-project-id"
|
|
421
|
+
ai-config-id="your-ai-config-id"
|
|
422
|
+
@function-executed="handleFunctionExecuted"
|
|
423
|
+
/>
|
|
424
|
+
</template>
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
## AP2 Payment Integration
|
|
428
|
+
|
|
429
|
+
The library includes built-in support for AP2 payments with the `useAP2Payment` composable and `PaymentApprovalModal` component.
|
|
430
|
+
|
|
431
|
+
### Using the Payment Composable
|
|
432
|
+
|
|
433
|
+
```vue
|
|
434
|
+
<script setup lang="ts">
|
|
435
|
+
import { useAP2Payment, PaymentApprovalModal } from '@termix-it/vue-tool';
|
|
436
|
+
|
|
437
|
+
const {
|
|
438
|
+
pendingPayment,
|
|
439
|
+
isPaymentModalOpen,
|
|
440
|
+
approvePayment,
|
|
441
|
+
rejectPayment,
|
|
442
|
+
clearPayment,
|
|
443
|
+
} = useAP2Payment({
|
|
444
|
+
projectId: 'your-project-id',
|
|
445
|
+
authorization: 'Bearer your-token',
|
|
446
|
+
});
|
|
447
|
+
</script>
|
|
448
|
+
|
|
449
|
+
<template>
|
|
450
|
+
<PaymentApprovalModal
|
|
451
|
+
v-if="isPaymentModalOpen && pendingPayment"
|
|
452
|
+
:mandate="pendingPayment"
|
|
453
|
+
@approve="approvePayment"
|
|
454
|
+
@reject="rejectPayment"
|
|
455
|
+
@close="clearPayment"
|
|
456
|
+
/>
|
|
457
|
+
</template>
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
## TypeScript Support
|
|
461
|
+
|
|
462
|
+
Full TypeScript support with exported types:
|
|
463
|
+
|
|
464
|
+
```typescript
|
|
465
|
+
import type {
|
|
466
|
+
Message,
|
|
467
|
+
ToolCall,
|
|
468
|
+
KnowledgeContext,
|
|
469
|
+
FunctionCall,
|
|
470
|
+
ExecutionResult,
|
|
471
|
+
ChatInterfaceProps,
|
|
472
|
+
APIConfig,
|
|
473
|
+
ApiRequest,
|
|
474
|
+
BeforeCallApiFunc,
|
|
475
|
+
HmacAlgorithm,
|
|
476
|
+
WalletState,
|
|
477
|
+
UseAP2PaymentReturn,
|
|
478
|
+
UseAP2PaymentOptions,
|
|
479
|
+
PaymentMandate
|
|
480
|
+
} from '@termix-it/vue-tool';
|
|
481
|
+
```
|
|
482
|
+
|
|
483
|
+
### Type Definitions
|
|
484
|
+
|
|
485
|
+
```typescript
|
|
486
|
+
interface Message {
|
|
487
|
+
id: string;
|
|
488
|
+
role: 'user' | 'assistant' | 'system';
|
|
489
|
+
content: string;
|
|
490
|
+
timestamp: Date;
|
|
491
|
+
usage?: {
|
|
492
|
+
promptTokens?: number;
|
|
493
|
+
completionTokens?: number;
|
|
494
|
+
totalTokens?: number;
|
|
495
|
+
cost: number;
|
|
496
|
+
};
|
|
497
|
+
knowledgeContext?: KnowledgeContext[];
|
|
498
|
+
toolCalls?: ToolCall[];
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
interface FunctionCall {
|
|
502
|
+
name: string;
|
|
503
|
+
parameters: Record<string, any>;
|
|
504
|
+
metadata?: {
|
|
505
|
+
type?: 'api' | 'contract' | 'fiat' | 'ap2' | 'unknown';
|
|
506
|
+
description?: string;
|
|
507
|
+
method?: string;
|
|
508
|
+
path?: string;
|
|
509
|
+
baseUrl?: string;
|
|
510
|
+
contractName?: string;
|
|
511
|
+
contractAddress?: string;
|
|
512
|
+
chainName?: string;
|
|
513
|
+
};
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
interface ExecutionResult {
|
|
517
|
+
success: boolean;
|
|
518
|
+
type: 'api' | 'contract' | 'fiat' | 'ap2' | 'payment' | 'wallet' | 'error';
|
|
519
|
+
data?: any;
|
|
520
|
+
error?: string;
|
|
521
|
+
metadata?: Record<string, any>;
|
|
522
|
+
}
|
|
523
|
+
```
|
|
524
|
+
|
|
525
|
+
## Exported Components and Utilities
|
|
526
|
+
|
|
527
|
+
```typescript
|
|
528
|
+
// Main components
|
|
529
|
+
export { ChatInterface } from './components/ChatInterface.vue';
|
|
530
|
+
export { ChatWidget } from './components/ChatWidget.vue';
|
|
531
|
+
export { PaymentApprovalModal } from './components/PaymentApprovalModal.vue';
|
|
532
|
+
|
|
533
|
+
// Composables
|
|
534
|
+
export { useAP2Payment } from './composables/useAP2Payment';
|
|
535
|
+
|
|
536
|
+
// Utilities
|
|
537
|
+
export { hmacSign, hmacVerify, hmacSignBase64 } from './lib/utils';
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
## HMAC Utilities
|
|
541
|
+
|
|
542
|
+
The SDK provides built-in HMAC utilities for secure API request signing:
|
|
543
|
+
|
|
544
|
+
```typescript
|
|
545
|
+
import { hmacSign, hmacVerify, hmacSignBase64 } from '@termix-it/vue-tool';
|
|
546
|
+
|
|
547
|
+
// Generate hex signature
|
|
548
|
+
const signature = await hmacSign('your-secret-key', 'message to sign');
|
|
549
|
+
// Returns: "a1b2c3d4e5..." (hex string)
|
|
550
|
+
|
|
551
|
+
// Generate base64 signature
|
|
552
|
+
const base64Sig = await hmacSignBase64('your-secret-key', 'message to sign');
|
|
553
|
+
// Returns: "oWLDMtRT..." (base64 string)
|
|
554
|
+
|
|
555
|
+
// Verify signature
|
|
556
|
+
const isValid = await hmacVerify('your-secret-key', 'message', 'a1b2c3...');
|
|
557
|
+
// Returns: true or false
|
|
558
|
+
|
|
559
|
+
// With custom algorithm (SHA-256, SHA-384, SHA-512)
|
|
560
|
+
const sha512Sig = await hmacSign('secret', 'message', 'SHA-512');
|
|
561
|
+
```
|
|
562
|
+
|
|
563
|
+
## Styling
|
|
564
|
+
|
|
565
|
+
### Importing Styles
|
|
566
|
+
|
|
567
|
+
You must import styles separately:
|
|
568
|
+
|
|
569
|
+
```typescript
|
|
570
|
+
import '@termix-it/vue-tool/style.css';
|
|
571
|
+
```
|
|
572
|
+
|
|
573
|
+
### Using Inline Styles
|
|
574
|
+
|
|
575
|
+
Both `ChatInterface` and `ChatWidget` support inline styles:
|
|
576
|
+
|
|
577
|
+
```vue
|
|
578
|
+
<ChatInterface
|
|
579
|
+
project-id="your-project-id"
|
|
580
|
+
ai-config-id="your-ai-config-id"
|
|
581
|
+
:style="{
|
|
582
|
+
height: '600px',
|
|
583
|
+
borderRadius: '12px',
|
|
584
|
+
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
|
|
585
|
+
}"
|
|
586
|
+
:messages-style="{ backgroundColor: '#f9f9f9' }"
|
|
587
|
+
:input-style="{ fontSize: '16px', padding: '12px 16px' }"
|
|
588
|
+
/>
|
|
589
|
+
```
|
|
590
|
+
|
|
591
|
+
## Development
|
|
592
|
+
|
|
593
|
+
### Running the Test App
|
|
594
|
+
|
|
595
|
+
A test application with **interactive control panel** is included for development and testing:
|
|
596
|
+
|
|
597
|
+
```bash
|
|
598
|
+
# From the vue-tool directory
|
|
599
|
+
npm run example
|
|
600
|
+
# or
|
|
601
|
+
pnpm example
|
|
602
|
+
```
|
|
603
|
+
|
|
604
|
+
This will start a Vite dev server with hot reload.
|
|
605
|
+
|
|
606
|
+
**Features:**
|
|
607
|
+
- Control Panel - Real-time property adjustment for all component props
|
|
608
|
+
- Live Preview - Test both ChatInterface and ChatWidget components
|
|
609
|
+
- Hot Reload - Changes to source code are reflected immediately
|
|
610
|
+
- No Code Editing - Configure everything through the UI
|
|
611
|
+
|
|
612
|
+
### Building the Library
|
|
613
|
+
|
|
614
|
+
```bash
|
|
615
|
+
# Build for production
|
|
616
|
+
npm run build
|
|
617
|
+
|
|
618
|
+
# Build for development (with dev API URL)
|
|
619
|
+
npm run build:dev
|
|
620
|
+
|
|
621
|
+
# Watch mode - rebuild on changes
|
|
622
|
+
npm run dev
|
|
623
|
+
npm run dev:local
|
|
624
|
+
```
|
|
625
|
+
|
|
626
|
+
### Type Checking
|
|
627
|
+
|
|
628
|
+
```bash
|
|
629
|
+
npm run type-check
|
|
630
|
+
```
|
|
631
|
+
|
|
632
|
+
## License
|
|
633
|
+
|
|
634
|
+
MIT
|
|
635
|
+
|
|
636
|
+
## Support
|
|
637
|
+
|
|
638
|
+
For issues and questions, please use the GitHub issue tracker.
|
|
639
|
+
|
|
640
|
+
## Publishing
|
|
641
|
+
|
|
642
|
+
```bash
|
|
643
|
+
# Publish the package
|
|
644
|
+
npm publish --access public
|
|
645
|
+
|
|
646
|
+
# Update version
|
|
647
|
+
npm version patch # 1.0.0 -> 1.0.1
|
|
648
|
+
npm version minor # 1.0.0 -> 1.1.0
|
|
649
|
+
npm version major # 1.0.0 -> 2.0.0
|
|
650
|
+
```
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { IEthersAdapter, EthersProvider, EthersSigner, EthersContract, EthersInterface } from '../interfaces/IEthersAdapter';
|
|
2
|
+
|
|
3
|
+
export declare class EthersV5Adapter implements IEthersAdapter {
|
|
4
|
+
getVersion(): number;
|
|
5
|
+
isV6(): boolean;
|
|
6
|
+
isV5(): boolean;
|
|
7
|
+
createBrowserProvider(ethereum: any): EthersProvider;
|
|
8
|
+
getSigner(provider: EthersProvider): Promise<EthersSigner>;
|
|
9
|
+
createContract(address: string, abi: any[], signerOrProvider: EthersSigner | EthersProvider): EthersContract;
|
|
10
|
+
createInterface(abi: any[]): EthersInterface;
|
|
11
|
+
getAddress(address: string): string;
|
|
12
|
+
isAddress(address: string): boolean;
|
|
13
|
+
formatUnits(value: bigint | string, decimals?: number): string;
|
|
14
|
+
parseUnits(value: string, decimals?: number): bigint;
|
|
15
|
+
formatEther(wei: bigint | string): string;
|
|
16
|
+
parseEther(ether: string): bigint;
|
|
17
|
+
getAbiCoder(): any;
|
|
18
|
+
toBigInt(value: any): bigint;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=EthersV5Adapter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EthersV5Adapter.d.ts","sourceRoot":"","sources":["../../src/adapters/EthersV5Adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EACL,cAAc,EACd,cAAc,EACd,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,8BAA8B,CAAC;AAEtC,qBACa,eAAgB,YAAW,cAAc;IACpD,UAAU,IAAI,MAAM;IAIpB,IAAI,IAAI,OAAO;IAIf,IAAI,IAAI,OAAO;IAIf,qBAAqB,CAAC,QAAQ,EAAE,GAAG,GAAG,cAAc;IAK9C,SAAS,CAAC,QAAQ,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC;IAKhE,cAAc,CACZ,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,GAAG,EAAE,EACV,gBAAgB,EAAE,YAAY,GAAG,cAAc,GAC9C,cAAc;IAIjB,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,eAAe;IAK5C,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;IAKnC,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAKnC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,GAAE,MAAW,GAAG,MAAM;IAKlE,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAW,GAAG,MAAM;IAMxD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM;IAKzC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMjC,WAAW,IAAI,GAAG;IAKlB,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM;CAU7B"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { IEthersAdapter, EthersProvider, EthersSigner, EthersContract, EthersInterface } from '../interfaces/IEthersAdapter';
|
|
2
|
+
|
|
3
|
+
export declare class EthersV6Adapter implements IEthersAdapter {
|
|
4
|
+
getVersion(): number;
|
|
5
|
+
isV6(): boolean;
|
|
6
|
+
isV5(): boolean;
|
|
7
|
+
createBrowserProvider(ethereum: any): EthersProvider;
|
|
8
|
+
getSigner(provider: EthersProvider): Promise<EthersSigner>;
|
|
9
|
+
createContract(address: string, abi: any[], signerOrProvider: EthersSigner | EthersProvider): EthersContract;
|
|
10
|
+
createInterface(abi: any[]): EthersInterface;
|
|
11
|
+
getAddress(address: string): string;
|
|
12
|
+
isAddress(address: string): boolean;
|
|
13
|
+
formatUnits(value: bigint | string, decimals?: number): string;
|
|
14
|
+
parseUnits(value: string, decimals?: number): bigint;
|
|
15
|
+
formatEther(wei: bigint | string): string;
|
|
16
|
+
parseEther(ether: string): bigint;
|
|
17
|
+
getAbiCoder(): any;
|
|
18
|
+
toBigInt(value: any): bigint;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=EthersV6Adapter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EthersV6Adapter.d.ts","sourceRoot":"","sources":["../../src/adapters/EthersV6Adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EACL,cAAc,EACd,cAAc,EACd,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,8BAA8B,CAAC;AAEtC,qBACa,eAAgB,YAAW,cAAc;IACpD,UAAU,IAAI,MAAM;IAIpB,IAAI,IAAI,OAAO;IAIf,IAAI,IAAI,OAAO;IAIf,qBAAqB,CAAC,QAAQ,EAAE,GAAG,GAAG,cAAc;IAK9C,SAAS,CAAC,QAAQ,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC;IAIhE,cAAc,CACZ,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,GAAG,EAAE,EACV,gBAAgB,EAAE,YAAY,GAAG,cAAc,GAC9C,cAAc;IAIjB,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,eAAe;IAK5C,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;IAKnC,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAKnC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,GAAE,MAAW,GAAG,MAAM;IAKlE,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAW,GAAG,MAAM;IAKxD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM;IAKzC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAKjC,WAAW,IAAI,GAAG;IAKlB,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM;CAM7B"}
|