@dori-ai/dori-side-widget 1.13.111 → 1.13.112

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
@@ -1,199 +1,199 @@
1
- # Dori Chat Widget
2
-
3
- A modern, responsive chat widget built with React and Chakra UI, designed for seamless integration into any website. The widget provides an AI-powered chat experience with e-commerce capabilities, perfect for customer support and sales assistance.
4
-
5
- ## 🚀 Features
6
-
7
- - **AI-Powered Chat**: Intelligent conversation capabilities with natural language processing
8
- - **E-commerce Integration**: Product recommendations, shopping cart, and checkout flows
9
- - **Responsive Design**: Mobile-first approach that works on all devices
10
- - **Persian/Farsi Support**: Full RTL support with Persian UI elements
11
- - **Customizable**: Easy to customize colors, branding, and behavior
12
- - **Shadow DOM**: Isolated styling that won't conflict with your website
13
- - **TypeScript**: Built with TypeScript for better development experience
14
-
15
- ## 📦 Installation
16
-
17
- ### Quick Start
18
-
19
- Add this HTML structure to your page:
20
-
21
- ```html
22
- <div id="dori-react-widget-host"></div>
23
- <script
24
- id="dori-react-widget"
25
- data-sharing-id="your-sharing-id"
26
- src="https://cdn.jsdelivr.net/npm/dori-chat-widget@latest/dist/widget.js"
27
- ></script>
28
- ```
29
-
30
- ## 🎨 Customization
31
-
32
- ### Styling
33
-
34
- The widget automatically adapts to your website's design while maintaining its own identity. You can customize:
35
-
36
- - **Colors**: Primary and accent colors
37
- - **Branding**: Logo and company information
38
- - **Messages**: Welcome text and default responses
39
- - **Behavior**: Chat flow and interaction patterns
40
-
41
-
42
- ## 🔧 Development
43
-
44
- ### Local Development
45
-
46
- 1. Clone the repository:
47
- ```bash
48
- git clone <repository-url>
49
- cd my-app
50
- ```
51
-
52
- 2. Install dependencies:
53
- ```bash
54
- npm install
55
- ```
56
-
57
- 3. Start development server:
58
- ```bash
59
- npm run dev
60
- ```
61
-
62
- 4. Open your browser to `http://localhost:3000`
63
-
64
- ### Building for Production
65
-
66
- ```bash
67
- npm run build
68
- ```
69
-
70
- This will create a `dist` folder with the production-ready widget files.
71
-
72
- ### Scoped NPM Publish (`@dori-ai/dori-side-widget`)
73
-
74
- Use these scripts to publish the scoped package with branch-safe tags:
75
-
76
- ```bash
77
- # From dev branch -> publishes tag "dev" with auto dev timestamp version
78
- npm run publish:dev:scoped
79
-
80
- # From main branch -> publishes tag "latest" with package.json version
81
- npm run publish:prod:scoped
82
- ```
83
-
84
- Dry-run checks:
85
-
86
- ```bash
87
- npm run publish:dev:dry
88
- npm run publish:prod:dry
89
- ```
90
-
91
- #### From CI (npm trusted publishing)
92
-
93
- `.github/workflows/publish.yml` runs the same script on a clean runner and
94
- authenticates with a per-run OIDC token instead of an npm token, so nothing
95
- secret lives on a laptop:
96
-
97
- ```bash
98
- gh workflow run publish.yml -f channel=dev --ref dev -R DoriService/dori-side-widget
99
- gh workflow run publish.yml -f channel=prod --ref main -R DoriService/dori-side-widget
100
- ```
101
-
102
- The prod run aligns `package.json` with the highest version on the registry,
103
- bumps the patch, publishes `@latest` and commits the bump back to `main`. Pull
104
- before a local prod publish afterwards or the next bump collides. The
105
- trusted-publisher entry on npmjs.com is keyed on the workflow filename;
106
- renaming `publish.yml` breaks CI publishing until it is updated.
107
-
108
- CI releases carry no npm provenance: npm only accepts a provenance bundle from
109
- a public source repository, and this repo is private.
110
-
111
- ### Development vs Production
112
-
113
- - **Development**: `npm run dev` - Uses direct DOM rendering for easier debugging
114
- - **Production**: `npm run build` - Creates optimized bundle with shadow DOM isolation
115
-
116
- ## 📱 Widget Components
117
-
118
- ### Core Features
119
-
120
- - **Welcome Screen**: Initial greeting with animated logo
121
- - **Chat Interface**: Full-featured chat with message history
122
- - **Product Recommendations**: AI-powered product suggestions
123
- - **Shopping Cart**: Integrated e-commerce functionality
124
- - **Responsive Design**: Works seamlessly on all devices
125
-
126
- ### Technical Architecture
127
-
128
- - **React 19**: Latest React with modern hooks and features
129
- - **Chakra UI**: Consistent, accessible component library
130
- - **TypeScript**: Full type safety and better development experience
131
- - **Shadow DOM**: Isolated styling and DOM structure
132
- - **Vite**: Fast build tooling and development server
133
-
134
- ## 🌐 Browser Support
135
-
136
- - Chrome 88+
137
- - Firefox 85+
138
- - Safari 14+
139
- - Edge 88+
140
-
141
- ## 📊 Analytics & Tracking
142
-
143
- The widget automatically tracks:
144
- - Conversation sessions
145
- - User interactions
146
- - Product recommendations
147
- - Conversion metrics
148
-
149
- All data is associated with your `data-sharing-id` for easy analysis.
150
-
151
- ## 🔒 Security & Privacy
152
-
153
- - **Isolated Environment**: Widget runs in shadow DOM for security
154
- - **No Cross-Site Scripting**: Secure communication protocols
155
- - **Data Privacy**: User data is handled according to privacy standards
156
- - **GDPR Compliant**: Built with privacy regulations in mind
157
-
158
- ## 🚀 Performance
159
-
160
- - **Lightweight**: Optimized bundle size for fast loading
161
- - **Lazy Loading**: Components load only when needed
162
- - **Efficient Rendering**: React 19 optimizations for smooth performance
163
- - **CDN Delivery**: Fast global distribution via jsDelivr
164
-
165
- ## 📞 Support
166
-
167
- For technical support or questions:
168
- - Open an issue in the repository
169
- - Contact support at support@dori.com
170
- - Check the documentation for common solutions
171
-
172
- ## 📄 License
173
-
174
- This project is licensed under the MIT License.
175
-
176
- ## 🤝 Contributing
177
-
178
- We welcome contributions! Please feel free to:
179
- - Submit bug reports
180
- - Request new features
181
- - Contribute code improvements
182
- - Improve documentation
183
-
184
- ## 🔄 Updates
185
-
186
- The widget automatically updates when you use the `@latest` tag. For version-specific deployments, use:
187
-
188
- ```html
189
- <div id="dori-react-widget-host"></div>
190
- <script
191
- id="dori-react-widget"
192
- data-sharing-id="your-id"
193
- src="https://cdn.jsdelivr.net/npm/dori-chat-widget@1.0.0/dist/widget.js"
194
- ></script>
195
- ```
196
-
197
- ---
198
-
199
- **Dori Chat Widget** - Making customer support smarter and more engaging.
1
+ # Dori Chat Widget
2
+
3
+ A modern, responsive chat widget built with React and Chakra UI, designed for seamless integration into any website. The widget provides an AI-powered chat experience with e-commerce capabilities, perfect for customer support and sales assistance.
4
+
5
+ ## 🚀 Features
6
+
7
+ - **AI-Powered Chat**: Intelligent conversation capabilities with natural language processing
8
+ - **E-commerce Integration**: Product recommendations, shopping cart, and checkout flows
9
+ - **Responsive Design**: Mobile-first approach that works on all devices
10
+ - **Persian/Farsi Support**: Full RTL support with Persian UI elements
11
+ - **Customizable**: Easy to customize colors, branding, and behavior
12
+ - **Shadow DOM**: Isolated styling that won't conflict with your website
13
+ - **TypeScript**: Built with TypeScript for better development experience
14
+
15
+ ## 📦 Installation
16
+
17
+ ### Quick Start
18
+
19
+ Add this HTML structure to your page:
20
+
21
+ ```html
22
+ <div id="dori-react-widget-host"></div>
23
+ <script
24
+ id="dori-react-widget"
25
+ data-sharing-id="your-sharing-id"
26
+ src="https://cdn.jsdelivr.net/npm/dori-chat-widget@latest/dist/widget.js"
27
+ ></script>
28
+ ```
29
+
30
+ ## 🎨 Customization
31
+
32
+ ### Styling
33
+
34
+ The widget automatically adapts to your website's design while maintaining its own identity. You can customize:
35
+
36
+ - **Colors**: Primary and accent colors
37
+ - **Branding**: Logo and company information
38
+ - **Messages**: Welcome text and default responses
39
+ - **Behavior**: Chat flow and interaction patterns
40
+
41
+
42
+ ## 🔧 Development
43
+
44
+ ### Local Development
45
+
46
+ 1. Clone the repository:
47
+ ```bash
48
+ git clone <repository-url>
49
+ cd my-app
50
+ ```
51
+
52
+ 2. Install dependencies:
53
+ ```bash
54
+ npm install
55
+ ```
56
+
57
+ 3. Start development server:
58
+ ```bash
59
+ npm run dev
60
+ ```
61
+
62
+ 4. Open your browser to `http://localhost:3000`
63
+
64
+ ### Building for Production
65
+
66
+ ```bash
67
+ npm run build
68
+ ```
69
+
70
+ This will create a `dist` folder with the production-ready widget files.
71
+
72
+ ### Scoped NPM Publish (`@dori-ai/dori-side-widget`)
73
+
74
+ Use these scripts to publish the scoped package with branch-safe tags:
75
+
76
+ ```bash
77
+ # From dev branch -> publishes tag "dev" with auto dev timestamp version
78
+ npm run publish:dev:scoped
79
+
80
+ # From main branch -> publishes tag "latest" with package.json version
81
+ npm run publish:prod:scoped
82
+ ```
83
+
84
+ Dry-run checks:
85
+
86
+ ```bash
87
+ npm run publish:dev:dry
88
+ npm run publish:prod:dry
89
+ ```
90
+
91
+ #### From CI (npm trusted publishing)
92
+
93
+ `.github/workflows/publish.yml` runs the same script on a clean runner and
94
+ authenticates with a per-run OIDC token instead of an npm token, so nothing
95
+ secret lives on a laptop:
96
+
97
+ ```bash
98
+ gh workflow run publish.yml -f channel=dev --ref dev -R DoriService/dori-side-widget
99
+ gh workflow run publish.yml -f channel=prod --ref main -R DoriService/dori-side-widget
100
+ ```
101
+
102
+ The prod run aligns `package.json` with the highest version on the registry,
103
+ bumps the patch, publishes `@latest` and commits the bump back to `main`. Pull
104
+ before a local prod publish afterwards or the next bump collides. The
105
+ trusted-publisher entry on npmjs.com is keyed on the workflow filename;
106
+ renaming `publish.yml` breaks CI publishing until it is updated.
107
+
108
+ CI releases carry no npm provenance: npm only accepts a provenance bundle from
109
+ a public source repository, and this repo is private.
110
+
111
+ ### Development vs Production
112
+
113
+ - **Development**: `npm run dev` - Uses direct DOM rendering for easier debugging
114
+ - **Production**: `npm run build` - Creates optimized bundle with shadow DOM isolation
115
+
116
+ ## 📱 Widget Components
117
+
118
+ ### Core Features
119
+
120
+ - **Welcome Screen**: Initial greeting with animated logo
121
+ - **Chat Interface**: Full-featured chat with message history
122
+ - **Product Recommendations**: AI-powered product suggestions
123
+ - **Shopping Cart**: Integrated e-commerce functionality
124
+ - **Responsive Design**: Works seamlessly on all devices
125
+
126
+ ### Technical Architecture
127
+
128
+ - **React 19**: Latest React with modern hooks and features
129
+ - **Chakra UI**: Consistent, accessible component library
130
+ - **TypeScript**: Full type safety and better development experience
131
+ - **Shadow DOM**: Isolated styling and DOM structure
132
+ - **Vite**: Fast build tooling and development server
133
+
134
+ ## 🌐 Browser Support
135
+
136
+ - Chrome 88+
137
+ - Firefox 85+
138
+ - Safari 14+
139
+ - Edge 88+
140
+
141
+ ## 📊 Analytics & Tracking
142
+
143
+ The widget automatically tracks:
144
+ - Conversation sessions
145
+ - User interactions
146
+ - Product recommendations
147
+ - Conversion metrics
148
+
149
+ All data is associated with your `data-sharing-id` for easy analysis.
150
+
151
+ ## 🔒 Security & Privacy
152
+
153
+ - **Isolated Environment**: Widget runs in shadow DOM for security
154
+ - **No Cross-Site Scripting**: Secure communication protocols
155
+ - **Data Privacy**: User data is handled according to privacy standards
156
+ - **GDPR Compliant**: Built with privacy regulations in mind
157
+
158
+ ## 🚀 Performance
159
+
160
+ - **Lightweight**: Optimized bundle size for fast loading
161
+ - **Lazy Loading**: Components load only when needed
162
+ - **Efficient Rendering**: React 19 optimizations for smooth performance
163
+ - **CDN Delivery**: Fast global distribution via jsDelivr
164
+
165
+ ## 📞 Support
166
+
167
+ For technical support or questions:
168
+ - Open an issue in the repository
169
+ - Contact support at support@dori.com
170
+ - Check the documentation for common solutions
171
+
172
+ ## 📄 License
173
+
174
+ This project is licensed under the MIT License.
175
+
176
+ ## 🤝 Contributing
177
+
178
+ We welcome contributions! Please feel free to:
179
+ - Submit bug reports
180
+ - Request new features
181
+ - Contribute code improvements
182
+ - Improve documentation
183
+
184
+ ## 🔄 Updates
185
+
186
+ The widget automatically updates when you use the `@latest` tag. For version-specific deployments, use:
187
+
188
+ ```html
189
+ <div id="dori-react-widget-host"></div>
190
+ <script
191
+ id="dori-react-widget"
192
+ data-sharing-id="your-id"
193
+ src="https://cdn.jsdelivr.net/npm/dori-chat-widget@1.0.0/dist/widget.js"
194
+ ></script>
195
+ ```
196
+
197
+ ---
198
+
199
+ **Dori Chat Widget** - Making customer support smarter and more engaging.