@dori-ai/dori-pdp-widget 0.6.67 → 0.6.68

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,185 +1,185 @@
1
- # Mori 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/mori-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
- ### Publishing (`@dori-ai/dori-pdp-widget`)
73
-
74
- ```bash
75
- npm run publish:dev:scoped # any branch -> <version>-dev.<timestamp> under @dev
76
- npm run publish:prod:scoped # main only -> bumps the patch, publishes @latest
77
- npm run publish:prod:dry # shows the version a prod publish would take
78
- ```
79
-
80
- The same script runs in CI via `.github/workflows/publish.yml`, authenticated
81
- with npm trusted publishing (per-run OIDC token, no npm token anywhere):
82
-
83
- ```bash
84
- gh workflow run publish.yml -f channel=dev --ref dev -R DoriService/dori-pdp-widget
85
- gh workflow run publish.yml -f channel=prod --ref main -R DoriService/dori-pdp-widget
86
- ```
87
-
88
- The prod run aligns `package.json` with the highest version on the registry,
89
- bumps the patch, publishes `@latest` and commits the bump back to `main`. Pull
90
- before a local prod publish afterwards or the next bump collides. The
91
- trusted-publisher entry on npmjs.com is keyed on the workflow filename;
92
- renaming `publish.yml` breaks CI publishing until it is updated.
93
-
94
- CI releases carry no npm provenance: npm only accepts a provenance bundle from
95
- a public source repository, and this repo is private.
96
-
97
- ### Development vs Production
98
-
99
- - **Development**: `npm run dev` - Uses direct DOM rendering for easier debugging
100
- - **Production**: `npm run build` - Creates optimized bundle with shadow DOM isolation
101
-
102
- ## 📱 Widget Components
103
-
104
- ### Core Features
105
-
106
- - **Welcome Screen**: Initial greeting with animated logo
107
- - **Chat Interface**: Full-featured chat with message history
108
- - **Product Recommendations**: AI-powered product suggestions
109
- - **Shopping Cart**: Integrated e-commerce functionality
110
- - **Responsive Design**: Works seamlessly on all devices
111
-
112
- ### Technical Architecture
113
-
114
- - **React 19**: Latest React with modern hooks and features
115
- - **Chakra UI**: Consistent, accessible component library
116
- - **TypeScript**: Full type safety and better development experience
117
- - **Shadow DOM**: Isolated styling and DOM structure
118
- - **Vite**: Fast build tooling and development server
119
-
120
- ## 🌐 Browser Support
121
-
122
- - Chrome 88+
123
- - Firefox 85+
124
- - Safari 14+
125
- - Edge 88+
126
-
127
- ## 📊 Analytics & Tracking
128
-
129
- The widget automatically tracks:
130
- - Conversation sessions
131
- - User interactions
132
- - Product recommendations
133
- - Conversion metrics
134
-
135
- All data is associated with your `data-sharing-id` for easy analysis.
136
-
137
- ## 🔒 Security & Privacy
138
-
139
- - **Isolated Environment**: Widget runs in shadow DOM for security
140
- - **No Cross-Site Scripting**: Secure communication protocols
141
- - **Data Privacy**: User data is handled according to privacy standards
142
- - **GDPR Compliant**: Built with privacy regulations in mind
143
-
144
- ## 🚀 Performance
145
-
146
- - **Lightweight**: Optimized bundle size for fast loading
147
- - **Lazy Loading**: Components load only when needed
148
- - **Efficient Rendering**: React 19 optimizations for smooth performance
149
- - **CDN Delivery**: Fast global distribution via jsDelivr
150
-
151
- ## 📞 Support
152
-
153
- For technical support or questions:
154
- - Open an issue in the repository
155
- - Contact support at support@mori.com
156
- - Check the documentation for common solutions
157
-
158
- ## 📄 License
159
-
160
- This project is licensed under the MIT License.
161
-
162
- ## 🤝 Contributing
163
-
164
- We welcome contributions! Please feel free to:
165
- - Submit bug reports
166
- - Request new features
167
- - Contribute code improvements
168
- - Improve documentation
169
-
170
- ## 🔄 Updates
171
-
172
- The widget automatically updates when you use the `@latest` tag. For version-specific deployments, use:
173
-
174
- ```html
175
- <div id="dori-react-widget-host"></div>
176
- <script
177
- id="dori-react-widget"
178
- data-sharing-id="your-id"
179
- src="https://cdn.jsdelivr.net/npm/mori-chat-widget@1.0.0/dist/widget.js"
180
- ></script>
181
- ```
182
-
183
- ---
184
-
1
+ # Mori 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/mori-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
+ ### Publishing (`@dori-ai/dori-pdp-widget`)
73
+
74
+ ```bash
75
+ npm run publish:dev:scoped # any branch -> <version>-dev.<timestamp> under @dev
76
+ npm run publish:prod:scoped # main only -> bumps the patch, publishes @latest
77
+ npm run publish:prod:dry # shows the version a prod publish would take
78
+ ```
79
+
80
+ The same script runs in CI via `.github/workflows/publish.yml`, authenticated
81
+ with npm trusted publishing (per-run OIDC token, no npm token anywhere):
82
+
83
+ ```bash
84
+ gh workflow run publish.yml -f channel=dev --ref dev -R DoriService/dori-pdp-widget
85
+ gh workflow run publish.yml -f channel=prod --ref main -R DoriService/dori-pdp-widget
86
+ ```
87
+
88
+ The prod run aligns `package.json` with the highest version on the registry,
89
+ bumps the patch, publishes `@latest` and commits the bump back to `main`. Pull
90
+ before a local prod publish afterwards or the next bump collides. The
91
+ trusted-publisher entry on npmjs.com is keyed on the workflow filename;
92
+ renaming `publish.yml` breaks CI publishing until it is updated.
93
+
94
+ CI releases carry no npm provenance: npm only accepts a provenance bundle from
95
+ a public source repository, and this repo is private.
96
+
97
+ ### Development vs Production
98
+
99
+ - **Development**: `npm run dev` - Uses direct DOM rendering for easier debugging
100
+ - **Production**: `npm run build` - Creates optimized bundle with shadow DOM isolation
101
+
102
+ ## 📱 Widget Components
103
+
104
+ ### Core Features
105
+
106
+ - **Welcome Screen**: Initial greeting with animated logo
107
+ - **Chat Interface**: Full-featured chat with message history
108
+ - **Product Recommendations**: AI-powered product suggestions
109
+ - **Shopping Cart**: Integrated e-commerce functionality
110
+ - **Responsive Design**: Works seamlessly on all devices
111
+
112
+ ### Technical Architecture
113
+
114
+ - **React 19**: Latest React with modern hooks and features
115
+ - **Chakra UI**: Consistent, accessible component library
116
+ - **TypeScript**: Full type safety and better development experience
117
+ - **Shadow DOM**: Isolated styling and DOM structure
118
+ - **Vite**: Fast build tooling and development server
119
+
120
+ ## 🌐 Browser Support
121
+
122
+ - Chrome 88+
123
+ - Firefox 85+
124
+ - Safari 14+
125
+ - Edge 88+
126
+
127
+ ## 📊 Analytics & Tracking
128
+
129
+ The widget automatically tracks:
130
+ - Conversation sessions
131
+ - User interactions
132
+ - Product recommendations
133
+ - Conversion metrics
134
+
135
+ All data is associated with your `data-sharing-id` for easy analysis.
136
+
137
+ ## 🔒 Security & Privacy
138
+
139
+ - **Isolated Environment**: Widget runs in shadow DOM for security
140
+ - **No Cross-Site Scripting**: Secure communication protocols
141
+ - **Data Privacy**: User data is handled according to privacy standards
142
+ - **GDPR Compliant**: Built with privacy regulations in mind
143
+
144
+ ## 🚀 Performance
145
+
146
+ - **Lightweight**: Optimized bundle size for fast loading
147
+ - **Lazy Loading**: Components load only when needed
148
+ - **Efficient Rendering**: React 19 optimizations for smooth performance
149
+ - **CDN Delivery**: Fast global distribution via jsDelivr
150
+
151
+ ## 📞 Support
152
+
153
+ For technical support or questions:
154
+ - Open an issue in the repository
155
+ - Contact support at support@mori.com
156
+ - Check the documentation for common solutions
157
+
158
+ ## 📄 License
159
+
160
+ This project is licensed under the MIT License.
161
+
162
+ ## 🤝 Contributing
163
+
164
+ We welcome contributions! Please feel free to:
165
+ - Submit bug reports
166
+ - Request new features
167
+ - Contribute code improvements
168
+ - Improve documentation
169
+
170
+ ## 🔄 Updates
171
+
172
+ The widget automatically updates when you use the `@latest` tag. For version-specific deployments, use:
173
+
174
+ ```html
175
+ <div id="dori-react-widget-host"></div>
176
+ <script
177
+ id="dori-react-widget"
178
+ data-sharing-id="your-id"
179
+ src="https://cdn.jsdelivr.net/npm/mori-chat-widget@1.0.0/dist/widget.js"
180
+ ></script>
181
+ ```
182
+
183
+ ---
184
+
185
185
  **Mori Chat Widget** - Making customer support smarter and more engaging.