@navsi.ai/sdk 1.0.2 → 1.0.3
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
CHANGED
|
@@ -19,6 +19,9 @@ For **Next.js** projects, ensure `next` is installed (optional peer dependency):
|
|
|
19
19
|
|
|
20
20
|
## Quick Start
|
|
21
21
|
|
|
22
|
+
> **Zero-config styling** — All widget styles are auto-injected at runtime.
|
|
23
|
+
> You do **not** need to import any CSS file.
|
|
24
|
+
|
|
22
25
|
```tsx
|
|
23
26
|
import { ChatbotProvider, ChatbotWidget } from '@navsi.ai/sdk';
|
|
24
27
|
|
|
@@ -35,6 +38,89 @@ function App() {
|
|
|
35
38
|
}
|
|
36
39
|
```
|
|
37
40
|
|
|
41
|
+
### Overriding Default Styles
|
|
42
|
+
|
|
43
|
+
The SDK auto-injects its styles in a `<style>` tag at the top of `<head>`. Any CSS you add in your own stylesheet will automatically take precedence. All widget classes are prefixed `navsi-chatbot-*`.
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
/* Example: custom toggle button */
|
|
47
|
+
.navsi-chatbot-toggle {
|
|
48
|
+
background: #e11d48;
|
|
49
|
+
box-shadow: 0 4px 16px rgba(225, 29, 72, 0.4);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Example: custom chat window size */
|
|
53
|
+
.navsi-chatbot-window {
|
|
54
|
+
width: 420px;
|
|
55
|
+
height: 600px;
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### Available CSS Classes
|
|
60
|
+
|
|
61
|
+
| Class Name | Element |
|
|
62
|
+
| ------------------------------------ | ------------------------------------ |
|
|
63
|
+
| `.navsi-chatbot-container` | Root fixed-position container |
|
|
64
|
+
| `.navsi-chatbot-toggle` | Floating open/close button |
|
|
65
|
+
| `.navsi-chatbot-window` | Chat window panel |
|
|
66
|
+
| `.navsi-chatbot-header` | Window header bar |
|
|
67
|
+
| `.navsi-chatbot-header-left` | Header left section (title + status) |
|
|
68
|
+
| `.navsi-chatbot-title` | Header title text |
|
|
69
|
+
| `.navsi-chatbot-status` | Connection status text |
|
|
70
|
+
| `.navsi-chatbot-clear` | "Clear" chat button |
|
|
71
|
+
| `.navsi-chatbot-mode-toggle` | Ask/Action mode toggle container |
|
|
72
|
+
| `.navsi-chatbot-mode-button` | Individual mode button |
|
|
73
|
+
| `.navsi-chatbot-mode-active` | Active mode button |
|
|
74
|
+
| `.navsi-chatbot-lang-toggle` | Language toggle container |
|
|
75
|
+
| `.navsi-chatbot-lang-button` | Individual language button |
|
|
76
|
+
| `.navsi-chatbot-lang-active` | Active language button |
|
|
77
|
+
| `.navsi-chatbot-messages` | Messages scroll area |
|
|
78
|
+
| `.navsi-chatbot-message` | Individual message wrapper |
|
|
79
|
+
| `.navsi-chatbot-message-user` | User message bubble |
|
|
80
|
+
| `.navsi-chatbot-message-assistant` | Assistant message bubble |
|
|
81
|
+
| `.navsi-chatbot-message-content` | Message content (markdown) |
|
|
82
|
+
| `.navsi-chatbot-message-paragraph` | Paragraph inside assistant message |
|
|
83
|
+
| `.navsi-chatbot-message-list` | Bullet list inside assistant message |
|
|
84
|
+
| `.navsi-chatbot-message-list-item` | List item inside assistant message |
|
|
85
|
+
| `.navsi-chatbot-welcome` | Welcome screen container |
|
|
86
|
+
| `.navsi-chatbot-welcome-icon` | Welcome emoji icon |
|
|
87
|
+
| `.navsi-chatbot-welcome-text` | Welcome message text |
|
|
88
|
+
| `.navsi-chatbot-welcome-hint` | Welcome hint/subtitle |
|
|
89
|
+
| `.navsi-chatbot-input-area` | Input area container |
|
|
90
|
+
| `.navsi-chatbot-input` | Text input field |
|
|
91
|
+
| `.navsi-chatbot-send-button` | Send button |
|
|
92
|
+
| `.navsi-chatbot-voice-button` | Voice input button |
|
|
93
|
+
| `.navsi-chatbot-voice-button-active` | Voice button while recording |
|
|
94
|
+
| `.navsi-chatbot-stop-button` | Stop execution button |
|
|
95
|
+
| `.navsi-chatbot-error` | Error banner |
|
|
96
|
+
| `.navsi-chatbot-error-close` | Error dismiss button |
|
|
97
|
+
| `.navsi-chatbot-voice-error` | Voice error message |
|
|
98
|
+
| `.navsi-chatbot-voice-transcript` | Live voice transcript |
|
|
99
|
+
| `.navsi-chatbot-voice-indicator` | Header voice indicator |
|
|
100
|
+
| `.navsi-chatbot-banner` | Execution status banner |
|
|
101
|
+
| `.navsi-chatbot-pill` | Progress step pill |
|
|
102
|
+
| `.navsi-chatbot-progress-container` | Progress bar wrapper |
|
|
103
|
+
| `.navsi-chatbot-progress-bar` | Progress bar track |
|
|
104
|
+
| `.navsi-chatbot-progress-fill` | Progress bar fill |
|
|
105
|
+
| `.navsi-chatbot-typing` | Typing dots indicator |
|
|
106
|
+
|
|
107
|
+
#### CSS Custom Properties
|
|
108
|
+
|
|
109
|
+
You can also set these CSS variables on `.navsi-chatbot-container` (or let the `theme` config set them automatically):
|
|
110
|
+
|
|
111
|
+
| Variable | Default | Description |
|
|
112
|
+
| ----------------------- | ----------------- | ------------------------------------- |
|
|
113
|
+
| `--navsi-primary` | `#2563eb` | Primary brand colour |
|
|
114
|
+
| `--navsi-primary-hover` | `#1d4ed8` | Primary hover colour |
|
|
115
|
+
| `--navsi-bg` | `#ffffff` | Window background |
|
|
116
|
+
| `--navsi-text` | `#1f2937` | Text colour |
|
|
117
|
+
| `--navsi-font` | System font stack | Font family |
|
|
118
|
+
| `--navsi-radius` | `12px` | Border radius (window, bubbles) |
|
|
119
|
+
| `--navsi-radius-sm` | `6px` | Small border radius (inputs, buttons) |
|
|
120
|
+
| `--navsi-window-width` | `360px` | Chat window width |
|
|
121
|
+
| `--navsi-window-height` | `520px` | Chat window height |
|
|
122
|
+
| `--navsi-button-size` | `56px` | Toggle button size |
|
|
123
|
+
|
|
38
124
|
### With Configuration Fetching
|
|
39
125
|
|
|
40
126
|
For a complete setup with widget configuration from your server:
|