@askdialog/dialog-react 0.1.1-beta.0
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 +264 -0
- package/dist/components/DialogProductBlock/DialogBlockHeader.d.ts +7 -0
- package/dist/components/DialogProductBlock/DialogBlockSuggestions.d.ts +11 -0
- package/dist/components/DialogProductBlock/DialogBlockSuggestionsContainer.d.ts +12 -0
- package/dist/components/DialogProductBlock/DialogBlockSuggestionsSkeleton.d.ts +2 -0
- package/dist/components/DialogProductBlock/DialogInput.d.ts +11 -0
- package/dist/components/DialogProductBlock/DialogProductBlock.d.ts +11 -0
- package/dist/components/DialogProductBlock/ThemeProvider.d.ts +8 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/dialog-react.css +1 -0
- package/dist/dialog-react.js +247 -0
- package/dist/dialog-react.umd.cjs +1 -0
- package/dist/icons/AiStarsIcon.d.ts +6 -0
- package/dist/icons/ArrowIcon.d.ts +6 -0
- package/dist/main.d.ts +1 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
# @askdialog/dialog-react
|
|
2
|
+
|
|
3
|
+
React component library for Dialog AI-powered product assistance.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @askdialog/dialog-react @askdialog/dialog-sdk
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @askdialog/dialog-react @askdialog/dialog-sdk
|
|
11
|
+
# or
|
|
12
|
+
yarn add @askdialog/dialog-react @askdialog/dialog-sdk
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Dialog } from '@askdialog/dialog-sdk';
|
|
19
|
+
import { DialogInput, DialogProductBlock } from '@askdialog/dialog-react';
|
|
20
|
+
import '@askdialog/dialog-react/style.css';
|
|
21
|
+
|
|
22
|
+
const client = new Dialog({
|
|
23
|
+
apiKey: 'your-api-key',
|
|
24
|
+
locale: 'en',
|
|
25
|
+
callbacks: {
|
|
26
|
+
addToCart: () => Promise.resolve(),
|
|
27
|
+
getProduct: () => Promise.resolve({
|
|
28
|
+
// Product data
|
|
29
|
+
}),
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
function App() {
|
|
34
|
+
return (
|
|
35
|
+
<DialogProductBlock
|
|
36
|
+
client={client}
|
|
37
|
+
productId="product-123"
|
|
38
|
+
productTitle="Product Name"
|
|
39
|
+
/>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Available Components
|
|
45
|
+
|
|
46
|
+
### DialogProductBlock
|
|
47
|
+
|
|
48
|
+
Full-featured dialog component with suggestions and input.
|
|
49
|
+
|
|
50
|
+
**Props:**
|
|
51
|
+
- `client` (Dialog) - Dialog SDK client instance (required)
|
|
52
|
+
- `productId` (string) - Product ID (required)
|
|
53
|
+
- `productTitle` (string) - Product title (required)
|
|
54
|
+
- `selectedVariantId` (string, optional) - Selected variant ID
|
|
55
|
+
- `enableInput` (boolean, optional) - Enable input field (default: true)
|
|
56
|
+
|
|
57
|
+
**Example:**
|
|
58
|
+
```tsx
|
|
59
|
+
<DialogProductBlock
|
|
60
|
+
client={client}
|
|
61
|
+
productId="9403924119882"
|
|
62
|
+
productTitle="Blizzard King All-Mountain Snowboard"
|
|
63
|
+
selectedVariantId="variant-123"
|
|
64
|
+
enableInput={true}
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### DialogInput
|
|
69
|
+
|
|
70
|
+
Standalone input component for asking questions.
|
|
71
|
+
|
|
72
|
+
**Props:**
|
|
73
|
+
- `client` (Dialog) - Dialog SDK client instance (required)
|
|
74
|
+
- `productId` (string) - Product ID (required)
|
|
75
|
+
- `productTitle` (string) - Product title (required)
|
|
76
|
+
- `placeholder` (string, optional) - Input placeholder text
|
|
77
|
+
- `selectedVariantId` (string, optional) - Selected variant ID
|
|
78
|
+
|
|
79
|
+
**Example:**
|
|
80
|
+
```tsx
|
|
81
|
+
<DialogInput
|
|
82
|
+
client={client}
|
|
83
|
+
productId="9403924119882"
|
|
84
|
+
productTitle="Product Name"
|
|
85
|
+
placeholder="Ask something about this product..."
|
|
86
|
+
/>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Theming
|
|
90
|
+
|
|
91
|
+
The components use CSS variables for theming. You can customize the theme through the Dialog SDK client:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
const client = new Dialog({
|
|
95
|
+
apiKey: 'your-api-key',
|
|
96
|
+
theme: {
|
|
97
|
+
backgroundColor: 'pink',
|
|
98
|
+
primaryColor: 'pink',
|
|
99
|
+
ctaTextColor: 'white',
|
|
100
|
+
ctaBorderType: 'rounded',
|
|
101
|
+
capitalizeCtas: true,
|
|
102
|
+
fontFamily: 'Arial',
|
|
103
|
+
highlightProductName: true,
|
|
104
|
+
title: {
|
|
105
|
+
fontSize: '22px',
|
|
106
|
+
color: 'purple',
|
|
107
|
+
},
|
|
108
|
+
description: {
|
|
109
|
+
color: 'blue',
|
|
110
|
+
fontSize: '18px',
|
|
111
|
+
},
|
|
112
|
+
content: {
|
|
113
|
+
color: 'green',
|
|
114
|
+
fontSize: '10px',
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
});
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Development
|
|
121
|
+
|
|
122
|
+
This section is for contributors working on the library itself.
|
|
123
|
+
|
|
124
|
+
### Prerequisites
|
|
125
|
+
|
|
126
|
+
- Node.js >= 22
|
|
127
|
+
- pnpm >= 10
|
|
128
|
+
|
|
129
|
+
### Setup
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
# From monorepo root
|
|
133
|
+
pnpm install
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Development Workflows
|
|
137
|
+
|
|
138
|
+
#### Daily Development
|
|
139
|
+
|
|
140
|
+
Work on components with instant feedback:
|
|
141
|
+
|
|
142
|
+
```bash
|
|
143
|
+
# From monorepo root
|
|
144
|
+
pnpm dev:react-example
|
|
145
|
+
# Opens react-example app at http://localhost:5173
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
**What happens:**
|
|
149
|
+
- The example app runs with Vite dev server
|
|
150
|
+
- Components are resolved from **source files** (`packages/react/src/`) via alias
|
|
151
|
+
- Changes to components are immediately reflected (HMR enabled)
|
|
152
|
+
- No rebuild required
|
|
153
|
+
|
|
154
|
+
#### Testing Built Library
|
|
155
|
+
|
|
156
|
+
Test the library as consumers would receive it from npm:
|
|
157
|
+
|
|
158
|
+
```bash
|
|
159
|
+
# Step 1: Build the library
|
|
160
|
+
pnpm build:react
|
|
161
|
+
|
|
162
|
+
# Step 2: Run example app against built dist/
|
|
163
|
+
cd packages/react-example
|
|
164
|
+
pnpm dev:test-dist
|
|
165
|
+
# Or from root: TEST_DIST=true pnpm dev:react-example
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
**When to use:**
|
|
169
|
+
- Before creating a pull request
|
|
170
|
+
- After modifying build configuration
|
|
171
|
+
- To verify the build works correctly
|
|
172
|
+
- Before publishing a new version
|
|
173
|
+
|
|
174
|
+
### Build Commands
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
# Build the library only
|
|
178
|
+
pnpm build:react
|
|
179
|
+
|
|
180
|
+
# Build all packages in the monorepo
|
|
181
|
+
pnpm build
|
|
182
|
+
|
|
183
|
+
# Clean dist folder
|
|
184
|
+
pnpm --filter @askdialog/dialog-react clean
|
|
185
|
+
|
|
186
|
+
# Lint code
|
|
187
|
+
pnpm --filter @askdialog/dialog-react lint
|
|
188
|
+
|
|
189
|
+
# Fix linting issues
|
|
190
|
+
pnpm --filter @askdialog/dialog-react lint:fix
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### Project Structure
|
|
194
|
+
|
|
195
|
+
```
|
|
196
|
+
packages/react/
|
|
197
|
+
├── src/
|
|
198
|
+
│ ├── main.ts # Library entry point
|
|
199
|
+
│ ├── components/ # Exported components
|
|
200
|
+
│ │ ├── index.ts # Component barrel export
|
|
201
|
+
│ │ └── DialogProductBlock/
|
|
202
|
+
│ │ ├── DialogProductBlock.tsx
|
|
203
|
+
│ │ ├── DialogProductBlock.css
|
|
204
|
+
│ │ ├── DialogInput.tsx
|
|
205
|
+
│ │ ├── DialogInput.css
|
|
206
|
+
│ │ ├── ThemeProvider.tsx
|
|
207
|
+
│ │ └── ...
|
|
208
|
+
│ └── icons/ # Icon components
|
|
209
|
+
├── dist/ # Build output (gitignored)
|
|
210
|
+
├── package.json
|
|
211
|
+
├── vite.config.ts # Library build configuration
|
|
212
|
+
└── project.json # Nx configuration
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### Testing the Package
|
|
216
|
+
|
|
217
|
+
#### Full Integration Test
|
|
218
|
+
|
|
219
|
+
Test the package in a real React project:
|
|
220
|
+
|
|
221
|
+
```bash
|
|
222
|
+
# 1. Build and pack
|
|
223
|
+
cd packages/react
|
|
224
|
+
pnpm build
|
|
225
|
+
pnpm pack
|
|
226
|
+
|
|
227
|
+
# 2. Create test project
|
|
228
|
+
cd /tmp
|
|
229
|
+
pnpm create vite test-dialog --template react-ts
|
|
230
|
+
cd test-dialog
|
|
231
|
+
pnpm install
|
|
232
|
+
|
|
233
|
+
# 3. Install from tarball
|
|
234
|
+
pnpm add /path/to/askdialog-dialog-react-*.tgz
|
|
235
|
+
|
|
236
|
+
# 4. Test imports and functionality
|
|
237
|
+
pnpm dev
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### Publishing
|
|
241
|
+
|
|
242
|
+
```bash
|
|
243
|
+
# From monorepo root
|
|
244
|
+
pnpm publish:react
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
**Pre-publish checklist:**
|
|
248
|
+
- [ ] All tests pass
|
|
249
|
+
- [ ] Version updated in `package.json`
|
|
250
|
+
- [ ] Tested with built library (`pnpm dev:test-dist`)
|
|
251
|
+
- [ ] Tarball inspected with `pnpm pack`
|
|
252
|
+
- [ ] CHANGELOG updated
|
|
253
|
+
|
|
254
|
+
## TypeScript
|
|
255
|
+
|
|
256
|
+
This package includes TypeScript type definitions. The types are automatically available when you install the package.
|
|
257
|
+
|
|
258
|
+
## React Version
|
|
259
|
+
|
|
260
|
+
This package requires React 19 or higher as a peer dependency.
|
|
261
|
+
|
|
262
|
+
## License
|
|
263
|
+
|
|
264
|
+
[Your License Here]
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { Dialog, Suggestion } from '@askdialog/dialog-sdk';
|
|
3
|
+
interface DialogBlockSuggestionsProps {
|
|
4
|
+
client: Dialog;
|
|
5
|
+
questions: Suggestion["questions"];
|
|
6
|
+
productId: string;
|
|
7
|
+
productTitle: string;
|
|
8
|
+
selectedVariantId?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const DialogBlockSuggestions: FC<DialogBlockSuggestionsProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { Dialog, Suggestion } from '@askdialog/dialog-sdk';
|
|
3
|
+
interface DialogBlockSuggestionsContainerProps {
|
|
4
|
+
client: Dialog;
|
|
5
|
+
questions: Suggestion["questions"] | undefined;
|
|
6
|
+
isLoading: boolean;
|
|
7
|
+
productId: string;
|
|
8
|
+
productTitle: string;
|
|
9
|
+
selectedVariantId?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const DialogBlockSuggestionsContainer: FC<DialogBlockSuggestionsContainerProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { Dialog } from '@askdialog/dialog-sdk';
|
|
3
|
+
interface DialogInputProps {
|
|
4
|
+
client: Dialog;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
productId: string;
|
|
7
|
+
productTitle: string;
|
|
8
|
+
selectedVariantId?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const DialogInput: FC<DialogInputProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { Dialog } from '@askdialog/dialog-sdk';
|
|
3
|
+
interface DialogProductBlockProps {
|
|
4
|
+
client: Dialog;
|
|
5
|
+
productId: string;
|
|
6
|
+
productTitle: string;
|
|
7
|
+
selectedVariantId?: string;
|
|
8
|
+
enableInput?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare const DialogProductBlock: FC<DialogProductBlockProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.dialog-block-header-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:left;flex:1}.dialog-block-suggestions-item-icon path{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item,.dialog-block-suggestions-skeleton-item:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-right:35px}.dialog-input-submit{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);right:4px;border:unset}.dialog-input-submit:disabled{opacity:.5}.dialog-block-container{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container>*{box-sizing:border-box}
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
import { jsxs as d, jsx as o, Fragment as m } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as L, useState as k, useEffect as b, useMemo as p } from "react";
|
|
3
|
+
const y = ({
|
|
4
|
+
title: e = "Your expert",
|
|
5
|
+
description: n = "A question about this product?"
|
|
6
|
+
}) => /* @__PURE__ */ d("div", { className: "dialog-block-header-container", children: [
|
|
7
|
+
/* @__PURE__ */ o("div", { className: "dialog-block-title", children: e }),
|
|
8
|
+
/* @__PURE__ */ o("div", { className: "dialog-block-description", children: n })
|
|
9
|
+
] }), v = ({ color: e = "#181825" }) => /* @__PURE__ */ d(
|
|
10
|
+
"svg",
|
|
11
|
+
{
|
|
12
|
+
width: "20",
|
|
13
|
+
height: "20",
|
|
14
|
+
viewBox: "0 0 20 20",
|
|
15
|
+
fill: "none",
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
17
|
+
children: [
|
|
18
|
+
/* @__PURE__ */ d("g", { clipPath: "url(#clip0_466_934)", children: [
|
|
19
|
+
/* @__PURE__ */ o(
|
|
20
|
+
"path",
|
|
21
|
+
{
|
|
22
|
+
d: "M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",
|
|
23
|
+
stroke: e,
|
|
24
|
+
strokeWidth: "1.5",
|
|
25
|
+
strokeLinecap: "round",
|
|
26
|
+
strokeLinejoin: "round"
|
|
27
|
+
}
|
|
28
|
+
),
|
|
29
|
+
/* @__PURE__ */ o(
|
|
30
|
+
"path",
|
|
31
|
+
{
|
|
32
|
+
d: "M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",
|
|
33
|
+
stroke: e,
|
|
34
|
+
strokeWidth: "1.5",
|
|
35
|
+
strokeLinecap: "round",
|
|
36
|
+
strokeLinejoin: "round"
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
] }),
|
|
40
|
+
/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ o("rect", { width: "20", height: "20", fill: "white" }) }) })
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
), w = ({
|
|
44
|
+
client: e,
|
|
45
|
+
questions: n,
|
|
46
|
+
productId: l,
|
|
47
|
+
productTitle: s,
|
|
48
|
+
selectedVariantId: a
|
|
49
|
+
}) => {
|
|
50
|
+
const r = (i) => {
|
|
51
|
+
e.sendProductMessage({
|
|
52
|
+
productId: l,
|
|
53
|
+
productTitle: s,
|
|
54
|
+
selectedVariantId: a,
|
|
55
|
+
question: i,
|
|
56
|
+
fromQuestionSuggestion: !0
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
return /* @__PURE__ */ o(m, { children: n.map((i) => /* @__PURE__ */ d(
|
|
60
|
+
"button",
|
|
61
|
+
{
|
|
62
|
+
className: "dialog-block-suggestions-item",
|
|
63
|
+
onClick: () => r(i.question),
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ o(v, { color: e.theme.primaryColor }),
|
|
66
|
+
/* @__PURE__ */ o("span", { className: "dialog-block-suggestions-item-label", children: i.question })
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
i.question
|
|
70
|
+
)) });
|
|
71
|
+
}, S = () => /* @__PURE__ */ d(m, { children: [
|
|
72
|
+
/* @__PURE__ */ o("div", { className: "dialog-block-suggestions-skeleton-item" }),
|
|
73
|
+
/* @__PURE__ */ o("div", { className: "dialog-block-suggestions-skeleton-item" }),
|
|
74
|
+
/* @__PURE__ */ o("div", { className: "dialog-block-suggestions-skeleton-item" })
|
|
75
|
+
] }), N = ({
|
|
76
|
+
client: e,
|
|
77
|
+
questions: n,
|
|
78
|
+
isLoading: l,
|
|
79
|
+
productId: s,
|
|
80
|
+
productTitle: a,
|
|
81
|
+
selectedVariantId: r
|
|
82
|
+
}) => /* @__PURE__ */ o("div", { className: "dialog-block-suggestions-container", children: l || !n ? /* @__PURE__ */ o(S, {}) : /* @__PURE__ */ o(
|
|
83
|
+
w,
|
|
84
|
+
{
|
|
85
|
+
client: e,
|
|
86
|
+
questions: n,
|
|
87
|
+
productId: s,
|
|
88
|
+
productTitle: a,
|
|
89
|
+
selectedVariantId: r
|
|
90
|
+
}
|
|
91
|
+
) }), P = ({ color: e = "#ffffff" }) => /* @__PURE__ */ o(
|
|
92
|
+
"svg",
|
|
93
|
+
{
|
|
94
|
+
width: "20",
|
|
95
|
+
height: "20",
|
|
96
|
+
viewBox: "0 0 20 20",
|
|
97
|
+
fill: "none",
|
|
98
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
99
|
+
children: /* @__PURE__ */ o(
|
|
100
|
+
"path",
|
|
101
|
+
{
|
|
102
|
+
d: "M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",
|
|
103
|
+
stroke: e,
|
|
104
|
+
strokeWidth: "1.5",
|
|
105
|
+
strokeLinecap: "round",
|
|
106
|
+
strokeLinejoin: "round"
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
), x = ({
|
|
111
|
+
client: e,
|
|
112
|
+
placeholder: n = "Ask anything...",
|
|
113
|
+
productId: l,
|
|
114
|
+
productTitle: s,
|
|
115
|
+
selectedVariantId: a
|
|
116
|
+
}) => {
|
|
117
|
+
const r = L(null), [i, t] = k(""), g = () => {
|
|
118
|
+
var c;
|
|
119
|
+
(c = r.current) == null || c.focus();
|
|
120
|
+
}, u = () => {
|
|
121
|
+
const c = i;
|
|
122
|
+
c.trim() && (e.sendProductMessage({
|
|
123
|
+
productId: l,
|
|
124
|
+
productTitle: s,
|
|
125
|
+
selectedVariantId: a,
|
|
126
|
+
question: c,
|
|
127
|
+
fromQuestionSuggestion: !0
|
|
128
|
+
}), t(""));
|
|
129
|
+
};
|
|
130
|
+
return /* @__PURE__ */ d("div", { className: "dialog-input-wrapper", onClick: g, children: [
|
|
131
|
+
/* @__PURE__ */ o(
|
|
132
|
+
"input",
|
|
133
|
+
{
|
|
134
|
+
id: "dialog-ask-anything-input-ai-input",
|
|
135
|
+
ref: r,
|
|
136
|
+
value: i,
|
|
137
|
+
onChange: (c) => t(c.target.value),
|
|
138
|
+
className: "dialog-ask-anything-input-ai-input",
|
|
139
|
+
placeholder: n,
|
|
140
|
+
onKeyDown: (c) => {
|
|
141
|
+
c.key === "Enter" && u();
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
),
|
|
145
|
+
/* @__PURE__ */ o(
|
|
146
|
+
"button",
|
|
147
|
+
{
|
|
148
|
+
id: "send-message-button-ai-input",
|
|
149
|
+
className: "dialog-input-submit",
|
|
150
|
+
disabled: !i.trim(),
|
|
151
|
+
onClick: u,
|
|
152
|
+
children: /* @__PURE__ */ o(P, { color: e.theme.ctaTextColor })
|
|
153
|
+
}
|
|
154
|
+
)
|
|
155
|
+
] });
|
|
156
|
+
}, f = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), j = (e) => {
|
|
157
|
+
if (!e) return;
|
|
158
|
+
const n = document.body;
|
|
159
|
+
Object.keys(e).forEach((l) => {
|
|
160
|
+
const s = l, a = f(l);
|
|
161
|
+
if (e[s] !== void 0) {
|
|
162
|
+
if (typeof e[s] == "object") {
|
|
163
|
+
Object.keys(e[s]).forEach(
|
|
164
|
+
(r) => {
|
|
165
|
+
var t;
|
|
166
|
+
const i = r;
|
|
167
|
+
if (i !== void 0) {
|
|
168
|
+
const g = f(r), u = e[s];
|
|
169
|
+
n.style.setProperty(
|
|
170
|
+
`--dialog-theme-${a}-${g}`,
|
|
171
|
+
(t = u[i]) == null ? void 0 : t.toString()
|
|
172
|
+
);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
);
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
if (s === "ctaBorderType") {
|
|
179
|
+
const r = e[s] === "rounded" ? "24px" : "0";
|
|
180
|
+
n.style.setProperty(`--dialog-theme-${a}`, r);
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
n.style.setProperty(
|
|
184
|
+
`--dialog-theme-${a}`,
|
|
185
|
+
e[s].toString()
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
});
|
|
189
|
+
}, B = ({ theme: e, children: n }) => (b(() => {
|
|
190
|
+
e && j(e);
|
|
191
|
+
}, [e]), /* @__PURE__ */ o(m, { children: n })), F = ({
|
|
192
|
+
client: e,
|
|
193
|
+
productId: n,
|
|
194
|
+
productTitle: l,
|
|
195
|
+
selectedVariantId: s,
|
|
196
|
+
enableInput: a = !0
|
|
197
|
+
}) => {
|
|
198
|
+
const [r, i] = k(!0), [t, g] = k(
|
|
199
|
+
void 0
|
|
200
|
+
), u = p(
|
|
201
|
+
() => t == null ? void 0 : t.assistantName,
|
|
202
|
+
[t]
|
|
203
|
+
), C = p(
|
|
204
|
+
() => t == null ? void 0 : t.description,
|
|
205
|
+
[t]
|
|
206
|
+
), c = p(
|
|
207
|
+
() => t == null ? void 0 : t.inputPlaceholder,
|
|
208
|
+
[t]
|
|
209
|
+
);
|
|
210
|
+
return b(() => {
|
|
211
|
+
(async () => {
|
|
212
|
+
try {
|
|
213
|
+
const h = await e.getSuggestions(n);
|
|
214
|
+
g(h), i(!1);
|
|
215
|
+
} catch (h) {
|
|
216
|
+
console.error("error", h);
|
|
217
|
+
}
|
|
218
|
+
})();
|
|
219
|
+
}, [e, n]), /* @__PURE__ */ o(B, { theme: e.theme, children: /* @__PURE__ */ d("div", { id: "dialog-instant", className: "dialog-block-container", children: [
|
|
220
|
+
/* @__PURE__ */ o(y, { title: u, description: C }),
|
|
221
|
+
/* @__PURE__ */ o(
|
|
222
|
+
N,
|
|
223
|
+
{
|
|
224
|
+
client: e,
|
|
225
|
+
questions: t == null ? void 0 : t.questions,
|
|
226
|
+
isLoading: r,
|
|
227
|
+
productId: n,
|
|
228
|
+
productTitle: l,
|
|
229
|
+
selectedVariantId: s
|
|
230
|
+
}
|
|
231
|
+
),
|
|
232
|
+
a && /* @__PURE__ */ o(
|
|
233
|
+
x,
|
|
234
|
+
{
|
|
235
|
+
client: e,
|
|
236
|
+
placeholder: c,
|
|
237
|
+
productId: n,
|
|
238
|
+
productTitle: l,
|
|
239
|
+
selectedVariantId: s
|
|
240
|
+
}
|
|
241
|
+
)
|
|
242
|
+
] }) });
|
|
243
|
+
};
|
|
244
|
+
export {
|
|
245
|
+
x as DialogInput,
|
|
246
|
+
F as DialogProductBlock
|
|
247
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["dialog-react"]={},d["react/jsx-runtime"],d.React))})(this,(function(d,e,g){"use strict";const b=({title:o="Your expert",description:t="A question about this product?"})=>e.jsxs("div",{className:"dialog-block-header-container",children:[e.jsx("div",{className:"dialog-block-title",children:o}),e.jsx("div",{className:"dialog-block-description",children:t})]}),y=({color:o="#181825"})=>e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[e.jsx("path",{d:"M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),e.jsx("defs",{children:e.jsx("clipPath",{id:"clip0_466_934",children:e.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),L=({client:o,questions:t,productId:l,productTitle:n,selectedVariantId:c})=>{const r=i=>{o.sendProductMessage({productId:l,productTitle:n,selectedVariantId:c,question:i,fromQuestionSuggestion:!0})};return e.jsx(e.Fragment,{children:t.map(i=>e.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>r(i.question),children:[e.jsx(y,{color:o.theme.primaryColor}),e.jsx("span",{className:"dialog-block-suggestions-item-label",children:i.question})]},i.question))})},v=()=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),S=({client:o,questions:t,isLoading:l,productId:n,productTitle:c,selectedVariantId:r})=>e.jsx("div",{className:"dialog-block-suggestions-container",children:l||!t?e.jsx(v,{}):e.jsx(L,{client:o,questions:t,productId:n,productTitle:c,selectedVariantId:r})}),w=({color:o="#ffffff"})=>e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),k=({client:o,placeholder:t="Ask anything...",productId:l,productTitle:n,selectedVariantId:c})=>{const r=g.useRef(null),[i,s]=g.useState(""),h=()=>{var a;(a=r.current)==null||a.focus()},u=()=>{const a=i;a.trim()&&(o.sendProductMessage({productId:l,productTitle:n,selectedVariantId:c,question:a,fromQuestionSuggestion:!0}),s(""))},p=a=>{a.key==="Enter"&&u()};return e.jsxs("div",{className:"dialog-input-wrapper",onClick:h,children:[e.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:r,value:i,onChange:a=>s(a.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:t,onKeyDown:p}),e.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!i.trim(),onClick:u,children:e.jsx(w,{color:o.theme.ctaTextColor})})]})},C=o=>o.replace(/([A-Z])/g,"-$1").toLowerCase(),N=o=>{if(!o)return;const t=document.body;Object.keys(o).forEach(l=>{const n=l,c=C(l);if(o[n]!==void 0){if(typeof o[n]=="object"){Object.keys(o[n]).forEach(r=>{var s;const i=r;if(i!==void 0){const h=C(r),u=o[n];t.style.setProperty(`--dialog-theme-${c}-${h}`,(s=u[i])==null?void 0:s.toString())}});return}if(n==="ctaBorderType"){const r=o[n]==="rounded"?"24px":"0";t.style.setProperty(`--dialog-theme-${c}`,r);return}t.style.setProperty(`--dialog-theme-${c}`,o[n].toString())}})},m=({theme:o,children:t})=>(g.useEffect(()=>{o&&N(o)},[o]),e.jsx(e.Fragment,{children:t})),P=({client:o,productId:t,productTitle:l,selectedVariantId:n,enableInput:c=!0})=>{const[r,i]=g.useState(!0),[s,h]=g.useState(void 0),u=g.useMemo(()=>s==null?void 0:s.assistantName,[s]),p=g.useMemo(()=>s==null?void 0:s.description,[s]),a=g.useMemo(()=>s==null?void 0:s.inputPlaceholder,[s]);return g.useEffect(()=>{(async()=>{try{const f=await o.getSuggestions(t);h(f),i(!1)}catch(f){console.error("error",f)}})()},[o,t]),e.jsx(m,{theme:o.theme,children:e.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",children:[e.jsx(b,{title:u,description:p}),e.jsx(S,{client:o,questions:s==null?void 0:s.questions,isLoading:r,productId:t,productTitle:l,selectedVariantId:n}),c&&e.jsx(k,{client:o,placeholder:a,productId:t,productTitle:l,selectedVariantId:n})]})})};d.DialogInput=k,d.DialogProductBlock=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@askdialog/dialog-react",
|
|
3
|
+
"version": "0.1.1-beta.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/dialog-react.umd.js",
|
|
7
|
+
"module": "./dist/dialog-react.js",
|
|
8
|
+
"types": "./dist/main.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/main.d.ts",
|
|
12
|
+
"require": "./dist/dialog-react.umd.js",
|
|
13
|
+
"import": "./dist/dialog-react.js",
|
|
14
|
+
"default": "./dist/dialog-react.js"
|
|
15
|
+
},
|
|
16
|
+
"./style.css": "./dist/dialog-react.css"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist"
|
|
20
|
+
],
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"@askdialog/dialog-sdk": "1.0.26-beta.2",
|
|
23
|
+
"react": "^19.0.0",
|
|
24
|
+
"react-dom": "^19.0.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@types/react": "^19.2.7",
|
|
28
|
+
"@types/react-dom": "^19.2.3",
|
|
29
|
+
"@askdialog/dialog-sdk": "1.0.26-beta.2"
|
|
30
|
+
},
|
|
31
|
+
"author": "Dialog",
|
|
32
|
+
"publishConfig": {
|
|
33
|
+
"access": "public"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [
|
|
36
|
+
"dialog",
|
|
37
|
+
"dialog-react",
|
|
38
|
+
"dialog-sdk",
|
|
39
|
+
"react components"
|
|
40
|
+
],
|
|
41
|
+
"scripts": {
|
|
42
|
+
"clean": "rm -rf dist",
|
|
43
|
+
"build": "pnpm run clean && vite build",
|
|
44
|
+
"lint": "eslint .",
|
|
45
|
+
"lint:fix": "eslint . --fix"
|
|
46
|
+
}
|
|
47
|
+
}
|