@agentiffai/design 1.5.2 → 1.5.4
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/dist/WorkflowStatusBadge-47sYxc2F.d.cts +208 -0
- package/dist/WorkflowStatusBadge-47sYxc2F.d.ts +208 -0
- package/dist/index.cjs +12191 -11055
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +169 -116
- package/dist/index.d.ts +169 -116
- package/dist/index.js +12062 -10927
- package/dist/index.js.map +1 -1
- package/dist/workflow/index.cjs +1511 -92
- package/dist/workflow/index.cjs.map +1 -1
- package/dist/workflow/index.d.cts +189 -183
- package/dist/workflow/index.d.ts +189 -183
- package/dist/workflow/index.js +1513 -95
- package/dist/workflow/index.js.map +1 -1
- package/package.json +1 -1
- package/public/assets/avatar-transparent-bg.png +0 -0
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* WorkflowCard Component
|
|
5
|
+
*
|
|
6
|
+
* A card for displaying available workflows in a list.
|
|
7
|
+
* Used for browsing and activating workflows, showing
|
|
8
|
+
* integrations and input requirements.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
interface WorkflowIntegration {
|
|
12
|
+
/** Icon URL or path */
|
|
13
|
+
icon: string;
|
|
14
|
+
/** Integration name for alt text */
|
|
15
|
+
name: string;
|
|
16
|
+
/** Whether this integration is connected */
|
|
17
|
+
connected?: boolean;
|
|
18
|
+
/** Whether this integration is optional (softer visual when not connected) */
|
|
19
|
+
optional?: boolean;
|
|
20
|
+
}
|
|
21
|
+
interface WorkflowCardProps {
|
|
22
|
+
/** Unique identifier for the workflow */
|
|
23
|
+
id: string;
|
|
24
|
+
/** Workflow name */
|
|
25
|
+
name: string;
|
|
26
|
+
/** Workflow description */
|
|
27
|
+
description?: string;
|
|
28
|
+
/** List of required integrations */
|
|
29
|
+
integrations?: WorkflowIntegration[];
|
|
30
|
+
/** Whether the workflow needs setup (not yet provisioned) */
|
|
31
|
+
needsSetup?: boolean;
|
|
32
|
+
/** Estimated cost per run (e.g., "~$0.15") */
|
|
33
|
+
estimatedCostPerRun?: string;
|
|
34
|
+
/** Click handler */
|
|
35
|
+
onClick?: () => void;
|
|
36
|
+
/** Whether the card is disabled */
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/** Optional className for styling */
|
|
39
|
+
className?: string;
|
|
40
|
+
}
|
|
41
|
+
declare const WorkflowCard: React__default.FC<WorkflowCardProps>;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* WorkflowErrorAlert Component
|
|
45
|
+
*
|
|
46
|
+
* Displays workflow execution errors with inline, banner, or modal variants.
|
|
47
|
+
*
|
|
48
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
49
|
+
*/
|
|
50
|
+
|
|
51
|
+
interface WorkflowErrorAlertProps {
|
|
52
|
+
/** Error object or message */
|
|
53
|
+
error: Error | string;
|
|
54
|
+
/** Optional error code */
|
|
55
|
+
errorCode?: string;
|
|
56
|
+
/** Timestamp of the error */
|
|
57
|
+
timestamp?: string;
|
|
58
|
+
/** Visual variant */
|
|
59
|
+
variant?: 'inline' | 'banner' | 'modal';
|
|
60
|
+
/** Severity level */
|
|
61
|
+
severity?: 'error' | 'warning' | 'info';
|
|
62
|
+
/** Whether the error can be retried */
|
|
63
|
+
retryable?: boolean;
|
|
64
|
+
/** Callback when retry is clicked */
|
|
65
|
+
onRetry?: () => void;
|
|
66
|
+
/** Callback when dismiss is clicked */
|
|
67
|
+
onDismiss?: () => void;
|
|
68
|
+
/** Whether to show details section */
|
|
69
|
+
showDetails?: boolean;
|
|
70
|
+
/** Stack trace to display */
|
|
71
|
+
stackTrace?: string;
|
|
72
|
+
/** Custom title */
|
|
73
|
+
title?: string;
|
|
74
|
+
/** Custom className */
|
|
75
|
+
className?: string;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* WorkflowErrorAlert component for displaying workflow errors
|
|
79
|
+
*
|
|
80
|
+
* Features:
|
|
81
|
+
* - Inline, banner, and modal variants
|
|
82
|
+
* - Severity levels (error/warning/info)
|
|
83
|
+
* - Error code and timestamp display
|
|
84
|
+
* - Expandable stack trace
|
|
85
|
+
* - Retry and dismiss actions
|
|
86
|
+
* - Accessible error reporting
|
|
87
|
+
*/
|
|
88
|
+
declare const WorkflowErrorAlert: React__default.FC<WorkflowErrorAlertProps>;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* WorkflowProgressBar Component
|
|
92
|
+
*
|
|
93
|
+
* Displays workflow execution progress with linear or circular variants.
|
|
94
|
+
*
|
|
95
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
96
|
+
*/
|
|
97
|
+
|
|
98
|
+
interface WorkflowProgressBarProps {
|
|
99
|
+
/** Progress percentage (0-100), or undefined for indeterminate */
|
|
100
|
+
progress?: number;
|
|
101
|
+
/** Optional message to display */
|
|
102
|
+
message?: string;
|
|
103
|
+
/** Status affects the color */
|
|
104
|
+
status?: 'pending' | 'running' | 'completed' | 'failed' | 'timeout';
|
|
105
|
+
/** Visual variant */
|
|
106
|
+
variant?: 'linear' | 'circular';
|
|
107
|
+
/** Size of the progress bar */
|
|
108
|
+
size?: 'sm' | 'md' | 'lg';
|
|
109
|
+
/** Whether to show percentage text */
|
|
110
|
+
showPercentage?: boolean;
|
|
111
|
+
/** Whether to animate progress changes */
|
|
112
|
+
animated?: boolean;
|
|
113
|
+
/** Custom className */
|
|
114
|
+
className?: string;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* WorkflowProgressBar component for showing workflow execution progress
|
|
118
|
+
*
|
|
119
|
+
* Features:
|
|
120
|
+
* - Linear and circular variants
|
|
121
|
+
* - Determinate and indeterminate modes
|
|
122
|
+
* - Color-coded status (gray/blue/green/red/orange)
|
|
123
|
+
* - Size options (sm/md/lg)
|
|
124
|
+
* - Optional percentage display
|
|
125
|
+
* - Smooth animations
|
|
126
|
+
* - Progress message support
|
|
127
|
+
*/
|
|
128
|
+
declare const WorkflowProgressBar: React__default.FC<WorkflowProgressBarProps>;
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* WorkflowResultPanel Component
|
|
132
|
+
*
|
|
133
|
+
* Displays workflow execution results with JSON/formatted/table views.
|
|
134
|
+
*
|
|
135
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
136
|
+
*/
|
|
137
|
+
|
|
138
|
+
interface WorkflowResultPanelProps {
|
|
139
|
+
/** Output data to display */
|
|
140
|
+
outputData: unknown;
|
|
141
|
+
/** Visual variant */
|
|
142
|
+
variant?: 'json' | 'formatted' | 'table';
|
|
143
|
+
/** Whether the panel can be collapsed */
|
|
144
|
+
collapsible?: boolean;
|
|
145
|
+
/** Default expanded state */
|
|
146
|
+
defaultExpanded?: boolean;
|
|
147
|
+
/** Maximum height of content area */
|
|
148
|
+
maxHeight?: string;
|
|
149
|
+
/** Callback when download is clicked */
|
|
150
|
+
onDownload?: () => void;
|
|
151
|
+
/** Callback when copy is clicked */
|
|
152
|
+
onCopy?: () => void;
|
|
153
|
+
/** Custom title */
|
|
154
|
+
title?: string;
|
|
155
|
+
/** Custom className */
|
|
156
|
+
className?: string;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* WorkflowResultPanel component for displaying workflow results
|
|
160
|
+
*
|
|
161
|
+
* Features:
|
|
162
|
+
* - JSON, formatted, and table view variants
|
|
163
|
+
* - Collapsible content
|
|
164
|
+
* - Download and copy actions
|
|
165
|
+
* - Maximum height with scrolling
|
|
166
|
+
* - Empty state handling
|
|
167
|
+
* - Syntax highlighting for JSON
|
|
168
|
+
*/
|
|
169
|
+
declare const WorkflowResultPanel: React__default.FC<WorkflowResultPanelProps>;
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* WorkflowStatusBadge Component
|
|
173
|
+
*
|
|
174
|
+
* Displays workflow execution status with color coding.
|
|
175
|
+
*
|
|
176
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
177
|
+
*/
|
|
178
|
+
|
|
179
|
+
interface WorkflowStatusBadgeProps {
|
|
180
|
+
/** Workflow execution status */
|
|
181
|
+
status: 'pending' | 'running' | 'completed' | 'failed' | 'timeout';
|
|
182
|
+
/** Size of the badge */
|
|
183
|
+
size?: 'sm' | 'md' | 'lg';
|
|
184
|
+
/** Whether to show status icon */
|
|
185
|
+
showIcon?: boolean;
|
|
186
|
+
/** Whether to show status label */
|
|
187
|
+
showLabel?: boolean;
|
|
188
|
+
/** Whether to animate the icon */
|
|
189
|
+
animated?: boolean;
|
|
190
|
+
/** Custom status label text */
|
|
191
|
+
label?: string;
|
|
192
|
+
/** Custom className */
|
|
193
|
+
className?: string;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* WorkflowStatusBadge component for showing workflow execution status
|
|
197
|
+
*
|
|
198
|
+
* Features:
|
|
199
|
+
* - Color-coded status badges (gray/blue/green/red/orange)
|
|
200
|
+
* - Status icons with optional animations
|
|
201
|
+
* - Size options (sm/md/lg)
|
|
202
|
+
* - Optional status labels
|
|
203
|
+
* - Spinning animation for running state
|
|
204
|
+
* - Pulse animation for pending state
|
|
205
|
+
*/
|
|
206
|
+
declare const WorkflowStatusBadge: React__default.FC<WorkflowStatusBadgeProps>;
|
|
207
|
+
|
|
208
|
+
export { type WorkflowCardProps as W, type WorkflowIntegration as a, WorkflowCard as b, type WorkflowErrorAlertProps as c, WorkflowErrorAlert as d, type WorkflowProgressBarProps as e, WorkflowProgressBar as f, type WorkflowResultPanelProps as g, WorkflowResultPanel as h, type WorkflowStatusBadgeProps as i, WorkflowStatusBadge as j };
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* WorkflowCard Component
|
|
5
|
+
*
|
|
6
|
+
* A card for displaying available workflows in a list.
|
|
7
|
+
* Used for browsing and activating workflows, showing
|
|
8
|
+
* integrations and input requirements.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
interface WorkflowIntegration {
|
|
12
|
+
/** Icon URL or path */
|
|
13
|
+
icon: string;
|
|
14
|
+
/** Integration name for alt text */
|
|
15
|
+
name: string;
|
|
16
|
+
/** Whether this integration is connected */
|
|
17
|
+
connected?: boolean;
|
|
18
|
+
/** Whether this integration is optional (softer visual when not connected) */
|
|
19
|
+
optional?: boolean;
|
|
20
|
+
}
|
|
21
|
+
interface WorkflowCardProps {
|
|
22
|
+
/** Unique identifier for the workflow */
|
|
23
|
+
id: string;
|
|
24
|
+
/** Workflow name */
|
|
25
|
+
name: string;
|
|
26
|
+
/** Workflow description */
|
|
27
|
+
description?: string;
|
|
28
|
+
/** List of required integrations */
|
|
29
|
+
integrations?: WorkflowIntegration[];
|
|
30
|
+
/** Whether the workflow needs setup (not yet provisioned) */
|
|
31
|
+
needsSetup?: boolean;
|
|
32
|
+
/** Estimated cost per run (e.g., "~$0.15") */
|
|
33
|
+
estimatedCostPerRun?: string;
|
|
34
|
+
/** Click handler */
|
|
35
|
+
onClick?: () => void;
|
|
36
|
+
/** Whether the card is disabled */
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/** Optional className for styling */
|
|
39
|
+
className?: string;
|
|
40
|
+
}
|
|
41
|
+
declare const WorkflowCard: React__default.FC<WorkflowCardProps>;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* WorkflowErrorAlert Component
|
|
45
|
+
*
|
|
46
|
+
* Displays workflow execution errors with inline, banner, or modal variants.
|
|
47
|
+
*
|
|
48
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
49
|
+
*/
|
|
50
|
+
|
|
51
|
+
interface WorkflowErrorAlertProps {
|
|
52
|
+
/** Error object or message */
|
|
53
|
+
error: Error | string;
|
|
54
|
+
/** Optional error code */
|
|
55
|
+
errorCode?: string;
|
|
56
|
+
/** Timestamp of the error */
|
|
57
|
+
timestamp?: string;
|
|
58
|
+
/** Visual variant */
|
|
59
|
+
variant?: 'inline' | 'banner' | 'modal';
|
|
60
|
+
/** Severity level */
|
|
61
|
+
severity?: 'error' | 'warning' | 'info';
|
|
62
|
+
/** Whether the error can be retried */
|
|
63
|
+
retryable?: boolean;
|
|
64
|
+
/** Callback when retry is clicked */
|
|
65
|
+
onRetry?: () => void;
|
|
66
|
+
/** Callback when dismiss is clicked */
|
|
67
|
+
onDismiss?: () => void;
|
|
68
|
+
/** Whether to show details section */
|
|
69
|
+
showDetails?: boolean;
|
|
70
|
+
/** Stack trace to display */
|
|
71
|
+
stackTrace?: string;
|
|
72
|
+
/** Custom title */
|
|
73
|
+
title?: string;
|
|
74
|
+
/** Custom className */
|
|
75
|
+
className?: string;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* WorkflowErrorAlert component for displaying workflow errors
|
|
79
|
+
*
|
|
80
|
+
* Features:
|
|
81
|
+
* - Inline, banner, and modal variants
|
|
82
|
+
* - Severity levels (error/warning/info)
|
|
83
|
+
* - Error code and timestamp display
|
|
84
|
+
* - Expandable stack trace
|
|
85
|
+
* - Retry and dismiss actions
|
|
86
|
+
* - Accessible error reporting
|
|
87
|
+
*/
|
|
88
|
+
declare const WorkflowErrorAlert: React__default.FC<WorkflowErrorAlertProps>;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* WorkflowProgressBar Component
|
|
92
|
+
*
|
|
93
|
+
* Displays workflow execution progress with linear or circular variants.
|
|
94
|
+
*
|
|
95
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
96
|
+
*/
|
|
97
|
+
|
|
98
|
+
interface WorkflowProgressBarProps {
|
|
99
|
+
/** Progress percentage (0-100), or undefined for indeterminate */
|
|
100
|
+
progress?: number;
|
|
101
|
+
/** Optional message to display */
|
|
102
|
+
message?: string;
|
|
103
|
+
/** Status affects the color */
|
|
104
|
+
status?: 'pending' | 'running' | 'completed' | 'failed' | 'timeout';
|
|
105
|
+
/** Visual variant */
|
|
106
|
+
variant?: 'linear' | 'circular';
|
|
107
|
+
/** Size of the progress bar */
|
|
108
|
+
size?: 'sm' | 'md' | 'lg';
|
|
109
|
+
/** Whether to show percentage text */
|
|
110
|
+
showPercentage?: boolean;
|
|
111
|
+
/** Whether to animate progress changes */
|
|
112
|
+
animated?: boolean;
|
|
113
|
+
/** Custom className */
|
|
114
|
+
className?: string;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* WorkflowProgressBar component for showing workflow execution progress
|
|
118
|
+
*
|
|
119
|
+
* Features:
|
|
120
|
+
* - Linear and circular variants
|
|
121
|
+
* - Determinate and indeterminate modes
|
|
122
|
+
* - Color-coded status (gray/blue/green/red/orange)
|
|
123
|
+
* - Size options (sm/md/lg)
|
|
124
|
+
* - Optional percentage display
|
|
125
|
+
* - Smooth animations
|
|
126
|
+
* - Progress message support
|
|
127
|
+
*/
|
|
128
|
+
declare const WorkflowProgressBar: React__default.FC<WorkflowProgressBarProps>;
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* WorkflowResultPanel Component
|
|
132
|
+
*
|
|
133
|
+
* Displays workflow execution results with JSON/formatted/table views.
|
|
134
|
+
*
|
|
135
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
136
|
+
*/
|
|
137
|
+
|
|
138
|
+
interface WorkflowResultPanelProps {
|
|
139
|
+
/** Output data to display */
|
|
140
|
+
outputData: unknown;
|
|
141
|
+
/** Visual variant */
|
|
142
|
+
variant?: 'json' | 'formatted' | 'table';
|
|
143
|
+
/** Whether the panel can be collapsed */
|
|
144
|
+
collapsible?: boolean;
|
|
145
|
+
/** Default expanded state */
|
|
146
|
+
defaultExpanded?: boolean;
|
|
147
|
+
/** Maximum height of content area */
|
|
148
|
+
maxHeight?: string;
|
|
149
|
+
/** Callback when download is clicked */
|
|
150
|
+
onDownload?: () => void;
|
|
151
|
+
/** Callback when copy is clicked */
|
|
152
|
+
onCopy?: () => void;
|
|
153
|
+
/** Custom title */
|
|
154
|
+
title?: string;
|
|
155
|
+
/** Custom className */
|
|
156
|
+
className?: string;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* WorkflowResultPanel component for displaying workflow results
|
|
160
|
+
*
|
|
161
|
+
* Features:
|
|
162
|
+
* - JSON, formatted, and table view variants
|
|
163
|
+
* - Collapsible content
|
|
164
|
+
* - Download and copy actions
|
|
165
|
+
* - Maximum height with scrolling
|
|
166
|
+
* - Empty state handling
|
|
167
|
+
* - Syntax highlighting for JSON
|
|
168
|
+
*/
|
|
169
|
+
declare const WorkflowResultPanel: React__default.FC<WorkflowResultPanelProps>;
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* WorkflowStatusBadge Component
|
|
173
|
+
*
|
|
174
|
+
* Displays workflow execution status with color coding.
|
|
175
|
+
*
|
|
176
|
+
* @see specs/015-restyle-ai-chat/spec.md
|
|
177
|
+
*/
|
|
178
|
+
|
|
179
|
+
interface WorkflowStatusBadgeProps {
|
|
180
|
+
/** Workflow execution status */
|
|
181
|
+
status: 'pending' | 'running' | 'completed' | 'failed' | 'timeout';
|
|
182
|
+
/** Size of the badge */
|
|
183
|
+
size?: 'sm' | 'md' | 'lg';
|
|
184
|
+
/** Whether to show status icon */
|
|
185
|
+
showIcon?: boolean;
|
|
186
|
+
/** Whether to show status label */
|
|
187
|
+
showLabel?: boolean;
|
|
188
|
+
/** Whether to animate the icon */
|
|
189
|
+
animated?: boolean;
|
|
190
|
+
/** Custom status label text */
|
|
191
|
+
label?: string;
|
|
192
|
+
/** Custom className */
|
|
193
|
+
className?: string;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* WorkflowStatusBadge component for showing workflow execution status
|
|
197
|
+
*
|
|
198
|
+
* Features:
|
|
199
|
+
* - Color-coded status badges (gray/blue/green/red/orange)
|
|
200
|
+
* - Status icons with optional animations
|
|
201
|
+
* - Size options (sm/md/lg)
|
|
202
|
+
* - Optional status labels
|
|
203
|
+
* - Spinning animation for running state
|
|
204
|
+
* - Pulse animation for pending state
|
|
205
|
+
*/
|
|
206
|
+
declare const WorkflowStatusBadge: React__default.FC<WorkflowStatusBadgeProps>;
|
|
207
|
+
|
|
208
|
+
export { type WorkflowCardProps as W, type WorkflowIntegration as a, WorkflowCard as b, type WorkflowErrorAlertProps as c, WorkflowErrorAlert as d, type WorkflowProgressBarProps as e, WorkflowProgressBar as f, type WorkflowResultPanelProps as g, WorkflowResultPanel as h, type WorkflowStatusBadgeProps as i, WorkflowStatusBadge as j };
|