@aganzefelicite/responsekit-react 0.1.0 → 0.2.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 +28 -10
- package/dist/index.cjs +255 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +79 -1
- package/dist/index.d.ts +79 -1
- package/dist/index.js +250 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +97 -0
- package/package.json +13 -3
package/dist/styles.css
CHANGED
|
@@ -106,3 +106,100 @@
|
|
|
106
106
|
}
|
|
107
107
|
@keyframes rk-spin { to { transform: rotate(360deg); } }
|
|
108
108
|
.rk-empty { color: var(--rk-muted); font-size: 0.85rem; }
|
|
109
|
+
|
|
110
|
+
/* Widget — floating, draggable, resizable panel */
|
|
111
|
+
.rk-widget {
|
|
112
|
+
--rk-fg: #1a1a1a;
|
|
113
|
+
--rk-muted: #6b7280;
|
|
114
|
+
--rk-border: #e5e7eb;
|
|
115
|
+
--rk-bg: #ffffff;
|
|
116
|
+
--rk-accent: #2563eb;
|
|
117
|
+
--rk-radius: 14px;
|
|
118
|
+
position: fixed;
|
|
119
|
+
z-index: 2147483000;
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-direction: column;
|
|
122
|
+
min-width: 300px;
|
|
123
|
+
min-height: 360px;
|
|
124
|
+
background: var(--rk-bg);
|
|
125
|
+
color: var(--rk-fg);
|
|
126
|
+
border: 1px solid var(--rk-border);
|
|
127
|
+
border-radius: var(--rk-radius);
|
|
128
|
+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.rk-widget-header {
|
|
134
|
+
display: flex;
|
|
135
|
+
align-items: center;
|
|
136
|
+
justify-content: space-between;
|
|
137
|
+
gap: 8px;
|
|
138
|
+
padding: 10px 12px;
|
|
139
|
+
background: var(--rk-accent);
|
|
140
|
+
color: #fff;
|
|
141
|
+
cursor: grab;
|
|
142
|
+
touch-action: none;
|
|
143
|
+
user-select: none;
|
|
144
|
+
}
|
|
145
|
+
.rk-widget-header:active { cursor: grabbing; }
|
|
146
|
+
.rk-widget-title { font-size: 0.95rem; font-weight: 600; }
|
|
147
|
+
.rk-widget-header-actions { display: flex; align-items: center; gap: 6px; }
|
|
148
|
+
.rk-widget-close {
|
|
149
|
+
border: none;
|
|
150
|
+
background: rgba(255, 255, 255, 0.15);
|
|
151
|
+
color: #fff;
|
|
152
|
+
width: 26px;
|
|
153
|
+
height: 26px;
|
|
154
|
+
border-radius: 6px;
|
|
155
|
+
font-size: 1.1rem;
|
|
156
|
+
line-height: 1;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
}
|
|
159
|
+
.rk-widget-close:hover { background: rgba(255, 255, 255, 0.28); }
|
|
160
|
+
|
|
161
|
+
.rk-widget-body {
|
|
162
|
+
flex: 1;
|
|
163
|
+
min-height: 0;
|
|
164
|
+
overflow: auto;
|
|
165
|
+
display: flex;
|
|
166
|
+
flex-direction: column;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.rk-widget-resize {
|
|
170
|
+
position: absolute;
|
|
171
|
+
right: 0;
|
|
172
|
+
bottom: 0;
|
|
173
|
+
width: 18px;
|
|
174
|
+
height: 18px;
|
|
175
|
+
cursor: nwse-resize;
|
|
176
|
+
touch-action: none;
|
|
177
|
+
background:
|
|
178
|
+
linear-gradient(135deg, transparent 50%, var(--rk-muted) 50%, var(--rk-muted) 60%, transparent 60%,
|
|
179
|
+
transparent 72%, var(--rk-muted) 72%, var(--rk-muted) 82%, transparent 82%);
|
|
180
|
+
opacity: 0.5;
|
|
181
|
+
}
|
|
182
|
+
.rk-widget-resize:hover { opacity: 0.9; }
|
|
183
|
+
|
|
184
|
+
.rk-widget-launcher {
|
|
185
|
+
position: fixed;
|
|
186
|
+
right: 24px;
|
|
187
|
+
bottom: 24px;
|
|
188
|
+
z-index: 2147483000;
|
|
189
|
+
display: inline-flex;
|
|
190
|
+
align-items: center;
|
|
191
|
+
justify-content: center;
|
|
192
|
+
width: 56px;
|
|
193
|
+
height: 56px;
|
|
194
|
+
border: none;
|
|
195
|
+
border-radius: 50%;
|
|
196
|
+
background: var(--rk-accent, #2563eb);
|
|
197
|
+
color: #fff;
|
|
198
|
+
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
|
|
199
|
+
cursor: pointer;
|
|
200
|
+
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
201
|
+
}
|
|
202
|
+
.rk-widget-launcher:hover {
|
|
203
|
+
transform: translateY(-2px);
|
|
204
|
+
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.5);
|
|
205
|
+
}
|
package/package.json
CHANGED
|
@@ -1,16 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aganzefelicite/responsekit-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Render your AI backend's responses as interactive React UI: AiRenderer, AiStream, useChat.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "aganzefelicite",
|
|
7
|
-
"keywords": [
|
|
7
|
+
"keywords": [
|
|
8
|
+
"react",
|
|
9
|
+
"ai",
|
|
10
|
+
"sse",
|
|
11
|
+
"streaming",
|
|
12
|
+
"renderer",
|
|
13
|
+
"analytics",
|
|
14
|
+
"charts"
|
|
15
|
+
],
|
|
8
16
|
"type": "module",
|
|
9
17
|
"sideEffects": false,
|
|
10
18
|
"publishConfig": {
|
|
11
19
|
"access": "public"
|
|
12
20
|
},
|
|
13
|
-
"files": [
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
14
24
|
"main": "./dist/index.cjs",
|
|
15
25
|
"module": "./dist/index.js",
|
|
16
26
|
"types": "./dist/index.d.ts",
|