keyring-chatbot-agent-sdk-test 1.0.13 → 1.0.17

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.
Files changed (7) hide show
  1. package/README.md +69 -42
  2. package/dist/chat-widget-wc.es.js +30 -31
  3. package/dist/chat-widget-wc.umd.js +2 -2
  4. package/dist/chat-widget.es.js +33 -34
  5. package/dist/chat-widget.umd.js +2 -2
  6. package/dist/lib.d.ts +2 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -14,7 +14,7 @@ An AI-powered Web3 chatbot SDK. Provides a floating chat widget with on-chain ca
14
14
  - **Trending tokens** — Per-chain trending data with quick-buy buttons
15
15
  - **Wrap / Unwrap** — ETH ↔ WETH and equivalents on each chain
16
16
  - **Approve token** — ERC-20 spending allowance
17
- - **Custom chat UI** — Custom title, welcome message, floating button icon, header icon, and suggestion buttons
17
+ - **Custom chat UI** — Custom title, welcome message, floating button icon, header icon, suggestion buttons, and fully custom chat button
18
18
  - **Multi-language** — English, Japanese, Chinese UI
19
19
  - **Multi-chain** — Ethereum, Optimism, BNB Chain, Polygon, Base, Arbitrum, Avalanche, Linea
20
20
  - **Full TypeScript** — Complete type declarations included
@@ -24,9 +24,9 @@ An AI-powered Web3 chatbot SDK. Provides a floating chat widget with on-chain ca
24
24
  ## Installation
25
25
 
26
26
  ```bash
27
- npm install keyring-chatbot-agent
27
+ npm install keyring-chatbot-agent-sdk-test
28
28
  # or
29
- yarn add keyring-chatbot-agent
29
+ yarn add keyring-chatbot-agent-sdk-test
30
30
  ```
31
31
 
32
32
  **Peer dependencies** (React 17, 18, or 19):
@@ -42,8 +42,11 @@ npm install react react-dom
42
42
  ### Basic example
43
43
 
44
44
  ```tsx
45
- import { ChatWidget } from 'keyring-chatbot-agent';
46
- import type { Transaction, TransactionResult } from 'keyring-chatbot-agent';
45
+ import { ChatWidget } from 'keyring-chatbot-agent-sdk-test';
46
+ import type {
47
+ Transaction,
48
+ TransactionResult,
49
+ } from 'keyring-chatbot-agent-sdk-test';
47
50
 
48
51
  function App() {
49
52
  const handleTransaction = async (
@@ -69,8 +72,11 @@ function App() {
69
72
  ### Full example
70
73
 
71
74
  ```tsx
72
- import { ChatWidget } from 'keyring-chatbot-agent';
73
- import type { Transaction, TransactionResult } from 'keyring-chatbot-agent';
75
+ import { ChatWidget } from 'keyring-chatbot-agent-sdk-test';
76
+ import type {
77
+ Transaction,
78
+ TransactionResult,
79
+ } from 'keyring-chatbot-agent-sdk-test';
74
80
 
75
81
  function App() {
76
82
  const handleTransaction = async (
@@ -100,6 +106,7 @@ function App() {
100
106
  welcomeMessage="How can I help you today?"
101
107
  buttonIcon="https://your-cdn.com/chat-button.svg"
102
108
  chatIcon="https://your-cdn.com/chat-header-logo.svg"
109
+ customChatButton={<MyCustomButton />}
103
110
  customSuggestions={[
104
111
  { text: 'Show my balance', icon: '💼' },
105
112
  { text: 'Swap ETH to USDC', icon: '🔄' },
@@ -126,8 +133,11 @@ function App() {
126
133
 
127
134
  ```tsx
128
135
  import { useSendTransaction, useAccount } from 'wagmi';
129
- import { ChatWidget } from 'keyring-chatbot-agent';
130
- import type { Transaction, TransactionResult } from 'keyring-chatbot-agent';
136
+ import { ChatWidget } from 'keyring-chatbot-agent-sdk-test';
137
+ import type {
138
+ Transaction,
139
+ TransactionResult,
140
+ } from 'keyring-chatbot-agent-sdk-test';
131
141
 
132
142
  function App() {
133
143
  const { address, chainId } = useAccount();
@@ -159,22 +169,23 @@ function App() {
159
169
 
160
170
  ### `<ChatWidget />` Props
161
171
 
162
- | Prop | Type | Default | Required | Description |
163
- | ------------------- | ------------------------------------------------- | ---------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
164
- | `account` | `Account` | `undefined` | No | Connected wallet. Omit when no wallet is connected. |
165
- | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | `undefined` | \* | Called when the chatbot needs to sign/send a transaction. |
166
- | `position` | `'bottom-right'` \| `'bottom-left'` | `'bottom-right'` | No | Corner where the floating button appears. |
167
- | `language` | `'en'` \| `'ja'` \| `'cn'` | `'en'` | No | UI language. |
168
- | `theme` | `ChatWidgetTheme` | `{}` | No | Visual customization (color, size, z-index). |
169
- | `defaultOpen` | `boolean` | `false` | No | Open the chat modal on first render. |
170
- | `rpcUrls` | `Record<number, string>` | — | No | Per-chain RPC URL overrides. Takes priority over built-in defaults for balance queries and gas estimation. |
171
- | `onOpen` | `() => void` | — | No | Callback fired when the modal opens. |
172
- | `onClose` | `() => void` | — | No | Callback fired when the modal closes. |
173
- | `chatTitle` | `string` | built-in title | No | Override the title shown in the modal header. |
174
- | `welcomeMessage` | `string` | built-in message | No | Override the first assistant message shown in the conversation. |
175
- | `customSuggestions` | `SuggestionButtonConfig[]` | built-in list | No | Replace the default quick suggestion buttons. Each item needs `text`; `icon` is optional. |
176
- | `buttonIcon` | `string` | built-in icon | No | Custom image URL for the floating chat button icon. |
177
- | `chatIcon` | `string` | built-in logo | No | Custom image URL for the modal header logo. |
172
+ | Prop | Type | Default | Required | Description |
173
+ | ------------------- | ------------------------------------------------- | ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
174
+ | `account` | `Account` | `undefined` | No | Connected wallet. Omit when no wallet is connected. |
175
+ | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | `undefined` | \* | Called when the chatbot needs to sign/send a transaction. |
176
+ | `position` | `'bottom-right'` \| `'bottom-left'` | `'bottom-right'` | No | Corner where the floating button appears. |
177
+ | `language` | `'en'` \| `'ja'` \| `'cn'` | `'en'` | No | UI language. |
178
+ | `theme` | `ChatWidgetTheme` | `{}` | No | Visual customization (color, size, z-index). |
179
+ | `defaultOpen` | `boolean` | `false` | No | Open the chat modal on first render. |
180
+ | `rpcUrls` | `Record<number, string>` | — | No | Per-chain RPC URL overrides. Takes priority over built-in defaults for balance queries and gas estimation. |
181
+ | `onOpen` | `() => void` | — | No | Callback fired when the modal opens. |
182
+ | `onClose` | `() => void` | — | No | Callback fired when the modal closes. |
183
+ | `chatTitle` | `string` | built-in title | No | Override the title shown in the modal header. |
184
+ | `welcomeMessage` | `string` | built-in message | No | Override the first assistant message shown in the conversation. |
185
+ | `customSuggestions` | `SuggestionButtonConfig[]` | built-in list | No | Replace the default quick suggestion buttons. Each item needs `text`; `icon` is optional. |
186
+ | `buttonIcon` | `string` | built-in icon | No | Custom image URL for the floating chat button icon. |
187
+ | `chatIcon` | `string` | built-in logo | No | Custom image URL for the modal header logo. |
188
+ | `customChatButton` | `React.ReactNode` | `undefined` | No | Fully custom React element to replace the default floating chat button. Click handling is applied automatically. |
178
189
 
179
190
  > \* `onTransaction` is required to execute on-chain actions (swap, send, approve, etc.). Without it, the AI can still answer questions and display information.
180
191
 
@@ -188,6 +199,18 @@ function App() {
188
199
  welcomeMessage="Ask me about swaps, balances, or NFTs."
189
200
  buttonIcon="https://your-cdn.com/button-icon.svg"
190
201
  chatIcon="https://your-cdn.com/header-logo.svg"
202
+ customChatButton={
203
+ <div
204
+ style={{
205
+ padding: 12,
206
+ background: '#5B7FFF',
207
+ borderRadius: 16,
208
+ color: '#fff',
209
+ }}
210
+ >
211
+ 💬 Chat with AI
212
+ </div>
213
+ }
191
214
  customSuggestions={[
192
215
  { text: 'Check my portfolio', icon: '📊' },
193
216
  { text: 'Swap ETH to USDC', icon: '🔄' },
@@ -210,7 +233,7 @@ type SuggestionButtonConfig = {
210
233
  You can clear the current chat history programmatically:
211
234
 
212
235
  ```tsx
213
- import { ChatWidget, clearChat } from 'keyring-chatbot-agent';
236
+ import { ChatWidget, clearChat } from 'keyring-chatbot-agent-sdk-test';
214
237
 
215
238
  function App() {
216
239
  return (
@@ -252,18 +275,19 @@ Simple scalar values (strings, numbers, booleans) can be set directly on the HTM
252
275
 
253
276
  Complex objects (`account`, `rpcUrls`, callbacks) are assigned as JavaScript properties on the element. Setting any property triggers an immediate re-render.
254
277
 
255
- | Property | Type | Description |
256
- | ------------------- | ------------------------------------------------- | ------------------------------------- |
257
- | `account` | `{ address: string; chainId: number }` | Connected wallet info |
258
- | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | Transaction signing / sending handler |
259
- | `rpcUrls` | `Record<number, string>` | Per-chain RPC URL overrides |
260
- | `onOpen` | `() => void` | Callback fired when the modal opens |
261
- | `onClose` | `() => void` | Callback fired when the modal closes |
262
- | `chatTitle` | `string` | Custom modal header title |
263
- | `welcomeMessage` | `string` | Custom first assistant message |
264
- | `customSuggestions` | `{ text: string; icon?: string }[]` | Custom quick suggestion buttons |
265
- | `buttonIcon` | `string` | Custom floating button icon URL |
266
- | `chatIcon` | `string` | Custom modal header logo URL |
278
+ | Property | Type | Description |
279
+ | ------------------- | ------------------------------------------------- | ---------------------------------------------------------- |
280
+ | `account` | `{ address: string; chainId: number }` | Connected wallet info |
281
+ | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | Transaction signing / sending handler |
282
+ | `rpcUrls` | `Record<number, string>` | Per-chain RPC URL overrides |
283
+ | `onOpen` | `() => void` | Callback fired when the modal opens |
284
+ | `onClose` | `() => void` | Callback fired when the modal closes |
285
+ | `chatTitle` | `string` | Custom modal header title |
286
+ | `welcomeMessage` | `string` | Custom first assistant message |
287
+ | `customSuggestions` | `{ text: string; icon?: string }[]` | Custom quick suggestion buttons |
288
+ | `buttonIcon` | `string` | Custom floating button icon URL |
289
+ | `chatIcon` | `string` | Custom modal header logo URL |
290
+ | `customChatButton` | `React.ReactNode` | Fully custom element replacing the default floating button |
267
291
 
268
292
  Web Component method:
269
293
 
@@ -282,7 +306,7 @@ Web Component method:
282
306
  </head>
283
307
  <body>
284
308
  <!-- 1. Load the bundle -->
285
- <script src="https://unpkg.com/keyring-chatbot-agent/dist/chat-widget-wc.umd.js"></script>
309
+ <script src="https://unpkg.com/keyring-chatbot-agent-sdk-test/dist/chat-widget-wc.umd.js"></script>
286
310
 
287
311
  <!-- 2. Place the custom element with basic attributes -->
288
312
  <chat-widget
@@ -335,6 +359,9 @@ Web Component method:
335
359
  { text: 'Show trending tokens' },
336
360
  ];
337
361
 
362
+ // Optional: use a fully custom chat button (React.ReactNode)
363
+ // widget.customChatButton = yourCustomElement;
364
+
338
365
  // Clear chat history when needed
339
366
  widget.clearChat();
340
367
  </script>
@@ -359,7 +386,7 @@ Web Component method:
359
386
  ></chat-widget>
360
387
 
361
388
  <script type="module">
362
- import 'https://unpkg.com/keyring-chatbot-agent/dist/chat-widget-wc.es.js';
389
+ import 'https://unpkg.com/keyring-chatbot-agent-sdk-test/dist/chat-widget-wc.es.js';
363
390
 
364
391
  const widget = document.getElementById('my-chat');
365
392
 
@@ -382,7 +409,7 @@ Web Component method:
382
409
  <meta charset="UTF-8" />
383
410
  <title>My dApp</title>
384
411
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.13.0/ethers.umd.min.js"></script>
385
- <script src="https://unpkg.com/keyring-chatbot-agent/dist/chat-widget-wc.umd.js"></script>
412
+ <script src="https://unpkg.com/keyring-chatbot-agent-sdk-test/dist/chat-widget-wc.umd.js"></script>
386
413
  </head>
387
414
  <body>
388
415
  <button id="connect-btn">Connect Wallet</button>
@@ -623,7 +650,7 @@ src/
623
650
 
624
651
  ```bash
625
652
  # Build a specific package name and update README/.env/package.json accordingly
626
- yarn build:package keyring-chatbot-agent
653
+ yarn build:package keyring-chatbot-agent-sdk-test
627
654
 
628
655
  # Publish current package, then auto commit + tag
629
656
  yarn publish:package