keyring-chatbot-agent-sdk-test 1.0.16 → 1.0.19

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 +54 -29
  2. package/dist/chat-widget-wc.es.js +62 -63
  3. package/dist/chat-widget-wc.umd.js +1 -1
  4. package/dist/chat-widget.es.js +36 -37
  5. package/dist/chat-widget.umd.js +1 -1
  6. package/dist/lib.d.ts +3 -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,8 @@ 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 />}
110
+ styleButtonChat={{ bottom: 100, right: 30 }}
109
111
  customSuggestions={[
110
112
  { text: 'Show my balance', icon: '💼' },
111
113
  { text: 'Swap ETH to USDC', icon: '🔄' },
@@ -168,22 +170,24 @@ function App() {
168
170
 
169
171
  ### `<ChatWidget />` Props
170
172
 
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. |
173
+ | Prop | Type | Default | Required | Description |
174
+ | ------------------- | ------------------------------------------------- | ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
175
+ | `account` | `Account` | `undefined` | No | Connected wallet. Omit when no wallet is connected. |
176
+ | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | `undefined` | \* | Called when the chatbot needs to sign/send a transaction. |
177
+ | `position` | `'bottom-right'` \| `'bottom-left'` | `'bottom-right'` | No | Corner where the floating button appears. |
178
+ | `language` | `'en'` \| `'ja'` \| `'cn'` | `'en'` | No | UI language. |
179
+ | `theme` | `ChatWidgetTheme` | `{}` | No | Visual customization (color, size, z-index). |
180
+ | `defaultOpen` | `boolean` | `false` | No | Open the chat modal on first render. |
181
+ | `rpcUrls` | `Record<number, string>` | — | No | Per-chain RPC URL overrides. Takes priority over built-in defaults for balance queries and gas estimation. |
182
+ | `onOpen` | `() => void` | — | No | Callback fired when the modal opens. |
183
+ | `onClose` | `() => void` | — | No | Callback fired when the modal closes. |
184
+ | `chatTitle` | `string` | built-in title | No | Override the title shown in the modal header. |
185
+ | `welcomeMessage` | `string` | built-in message | No | Override the first assistant message shown in the conversation. |
186
+ | `customSuggestions` | `SuggestionButtonConfig[]` | built-in list | No | Replace the default quick suggestion buttons. Each item needs `text`; `icon` is optional. |
187
+ | `buttonIcon` | `string` | built-in icon | No | Custom image URL for the floating chat button icon. |
188
+ | `chatIcon` | `string` | built-in logo | No | Custom image URL for the modal header logo. |
189
+ | `customChatButton` | `React.ReactNode` | `undefined` | No | Fully custom React element to replace the default floating chat button. Click handling is applied automatically. |
190
+ | `styleButtonChat` | `React.CSSProperties` | `undefined` | No | Custom CSS styles applied to the floating chat button container. |
187
191
 
188
192
  > \* `onTransaction` is required to execute on-chain actions (swap, send, approve, etc.). Without it, the AI can still answer questions and display information.
189
193
 
@@ -197,11 +201,24 @@ function App() {
197
201
  welcomeMessage="Ask me about swaps, balances, or NFTs."
198
202
  buttonIcon="https://your-cdn.com/button-icon.svg"
199
203
  chatIcon="https://your-cdn.com/header-logo.svg"
204
+ customChatButton={
205
+ <div
206
+ style={{
207
+ padding: 12,
208
+ background: '#5B7FFF',
209
+ borderRadius: 16,
210
+ color: '#fff',
211
+ }}
212
+ >
213
+ 💬 Chat with AI
214
+ </div>
215
+ }
200
216
  customSuggestions={[
201
217
  { text: 'Check my portfolio', icon: '📊' },
202
218
  { text: 'Swap ETH to USDC', icon: '🔄' },
203
219
  { text: 'Show trending tokens' },
204
220
  ]}
221
+ styleButtonChat={{ bottom: 100, right: 30 }}
205
222
  />
206
223
  ```
207
224
 
@@ -261,18 +278,20 @@ Simple scalar values (strings, numbers, booleans) can be set directly on the HTM
261
278
 
262
279
  Complex objects (`account`, `rpcUrls`, callbacks) are assigned as JavaScript properties on the element. Setting any property triggers an immediate re-render.
263
280
 
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 |
281
+ | Property | Type | Description |
282
+ | ------------------- | ------------------------------------------------- | ---------------------------------------------------------- |
283
+ | `account` | `{ address: string; chainId: number }` | Connected wallet info |
284
+ | `onTransaction` | `(tx: Transaction) => Promise<TransactionResult>` | Transaction signing / sending handler |
285
+ | `rpcUrls` | `Record<number, string>` | Per-chain RPC URL overrides |
286
+ | `onOpen` | `() => void` | Callback fired when the modal opens |
287
+ | `onClose` | `() => void` | Callback fired when the modal closes |
288
+ | `chatTitle` | `string` | Custom modal header title |
289
+ | `welcomeMessage` | `string` | Custom first assistant message |
290
+ | `customSuggestions` | `{ text: string; icon?: string }[]` | Custom quick suggestion buttons |
291
+ | `buttonIcon` | `string` | Custom floating button icon URL |
292
+ | `chatIcon` | `string` | Custom modal header logo URL |
293
+ | `customChatButton` | `React.ReactNode` | Fully custom element replacing the default floating button |
294
+ | `styleButtonChat` | `React.CSSProperties` | Custom CSS styles for the floating button container |
276
295
 
277
296
  Web Component method:
278
297
 
@@ -344,6 +363,12 @@ Web Component method:
344
363
  { text: 'Show trending tokens' },
345
364
  ];
346
365
 
366
+ // Optional: use a fully custom chat button (React.ReactNode)
367
+ // widget.customChatButton = yourCustomElement;
368
+
369
+ // Optional: custom style for the chat button container
370
+ // widget.styleButtonChat = { bottom: '100px', right: '30px' };
371
+
347
372
  // Clear chat history when needed
348
373
  widget.clearChat();
349
374
  </script>