keyring-chatbot-agent-sdk-test 1.0.16 → 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 +47 -29
  2. package/dist/chat-widget-wc.es.js +4 -5
  3. package/dist/chat-widget-wc.umd.js +1 -1
  4. package/dist/chat-widget.es.js +4 -5
  5. package/dist/chat-widget.umd.js +1 -1
  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
@@ -106,6 +106,7 @@ function App() {
106
106
  welcomeMessage="How can I help you today?"
107
107
  buttonIcon="https://your-cdn.com/chat-button.svg"
108
108
  chatIcon="https://your-cdn.com/chat-header-logo.svg"
109
+ customChatButton={<MyCustomButton />}
109
110
  customSuggestions={[
110
111
  { text: 'Show my balance', icon: '💼' },
111
112
  { text: 'Swap ETH to USDC', icon: '🔄' },
@@ -168,22 +169,23 @@ function App() {
168
169
 
169
170
  ### `<ChatWidget />` Props
170
171
 
171
- | Prop | Type | Default | Required | Description |
172
- | ------------------- | ------------------------------------------------- | ---------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
173
- | `account` | `Account` | `undefined` | No | Connected wallet. Omit when no wallet is connected. |
174
- | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | `undefined` | \* | Called when the chatbot needs to sign/send a transaction. |
175
- | `position` | `'bottom-right'` \| `'bottom-left'` | `'bottom-right'` | No | Corner where the floating button appears. |
176
- | `language` | `'en'` \| `'ja'` \| `'cn'` | `'en'` | No | UI language. |
177
- | `theme` | `ChatWidgetTheme` | `{}` | No | Visual customization (color, size, z-index). |
178
- | `defaultOpen` | `boolean` | `false` | No | Open the chat modal on first render. |
179
- | `rpcUrls` | `Record<number, string>` | — | No | Per-chain RPC URL overrides. Takes priority over built-in defaults for balance queries and gas estimation. |
180
- | `onOpen` | `() => void` | — | No | Callback fired when the modal opens. |
181
- | `onClose` | `() => void` | — | No | Callback fired when the modal closes. |
182
- | `chatTitle` | `string` | built-in title | No | Override the title shown in the modal header. |
183
- | `welcomeMessage` | `string` | built-in message | No | Override the first assistant message shown in the conversation. |
184
- | `customSuggestions` | `SuggestionButtonConfig[]` | built-in list | No | Replace the default quick suggestion buttons. Each item needs `text`; `icon` is optional. |
185
- | `buttonIcon` | `string` | built-in icon | No | Custom image URL for the floating chat button icon. |
186
- | `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. |
187
189
 
188
190
  > \* `onTransaction` is required to execute on-chain actions (swap, send, approve, etc.). Without it, the AI can still answer questions and display information.
189
191
 
@@ -197,6 +199,18 @@ function App() {
197
199
  welcomeMessage="Ask me about swaps, balances, or NFTs."
198
200
  buttonIcon="https://your-cdn.com/button-icon.svg"
199
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
+ }
200
214
  customSuggestions={[
201
215
  { text: 'Check my portfolio', icon: '📊' },
202
216
  { text: 'Swap ETH to USDC', icon: '🔄' },
@@ -261,18 +275,19 @@ Simple scalar values (strings, numbers, booleans) can be set directly on the HTM
261
275
 
262
276
  Complex objects (`account`, `rpcUrls`, callbacks) are assigned as JavaScript properties on the element. Setting any property triggers an immediate re-render.
263
277
 
264
- | Property | Type | Description |
265
- | ------------------- | ------------------------------------------------- | ------------------------------------- |
266
- | `account` | `{ address: string; chainId: number }` | Connected wallet info |
267
- | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | Transaction signing / sending handler |
268
- | `rpcUrls` | `Record<number, string>` | Per-chain RPC URL overrides |
269
- | `onOpen` | `() => void` | Callback fired when the modal opens |
270
- | `onClose` | `() => void` | Callback fired when the modal closes |
271
- | `chatTitle` | `string` | Custom modal header title |
272
- | `welcomeMessage` | `string` | Custom first assistant message |
273
- | `customSuggestions` | `{ text: string; icon?: string }[]` | Custom quick suggestion buttons |
274
- | `buttonIcon` | `string` | Custom floating button icon URL |
275
- | `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 |
276
291
 
277
292
  Web Component method:
278
293
 
@@ -344,6 +359,9 @@ Web Component method:
344
359
  { text: 'Show trending tokens' },
345
360
  ];
346
361
 
362
+ // Optional: use a fully custom chat button (React.ReactNode)
363
+ // widget.customChatButton = yourCustomElement;
364
+
347
365
  // Clear chat history when needed
348
366
  widget.clearChat();
349
367
  </script>