@mevdragon/vidfarm-devcli 0.2.14 → 0.3.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.
Files changed (204) hide show
  1. package/README.md +11 -4
  2. package/SKILL.director.md +97 -0
  3. package/SKILL.platform.md +66 -6
  4. package/dist/src/cli.js +135 -1527
  5. package/package.json +5 -24
  6. package/.env.example +0 -60
  7. package/auto-create-hyperframe-templates/AUTO_CREATE_HYPERFRAME_TEMPLATES.md +0 -275
  8. package/auto-create-hyperframe-templates/extractor-system-prompt.md +0 -128
  9. package/auto-create-hyperframe-templates/input-manifest.schema.json +0 -56
  10. package/auto-create-hyperframe-templates/lambda-memory-estimator.md +0 -118
  11. package/auto-create-hyperframe-templates/production-graph.schema.json +0 -314
  12. package/auto-create-hyperframe-templates/runbook.md +0 -198
  13. package/auto-create-hyperframe-templates/scripts/create-hyperframe-template.mjs +0 -368
  14. package/auto-create-hyperframe-templates/template-plan.schema.json +0 -311
  15. package/auto-create-hyperframe-templates/template-planner-prompt.md +0 -144
  16. package/auto-create-templates/AUTO_CREATE_TEMPLATES.md +0 -599
  17. package/auto-create-templates/extractor-system-prompt.md +0 -119
  18. package/auto-create-templates/production-graph.schema.json +0 -276
  19. package/auto-create-templates/runbook.md +0 -140
  20. package/auto-create-templates/template-plan.schema.json +0 -301
  21. package/auto-create-templates/template-planner-prompt.md +0 -137
  22. package/dist/src/account-pages-legacy.js +0 -9338
  23. package/dist/src/account-pages-legacy.js.map +0 -1
  24. package/dist/src/account-pages.js +0 -52
  25. package/dist/src/account-pages.js.map +0 -1
  26. package/dist/src/app.js +0 -13711
  27. package/dist/src/app.js.map +0 -1
  28. package/dist/src/cli.js.map +0 -1
  29. package/dist/src/composition-runtime.js +0 -581
  30. package/dist/src/composition-runtime.js.map +0 -1
  31. package/dist/src/config.js +0 -140
  32. package/dist/src/config.js.map +0 -1
  33. package/dist/src/context.js +0 -492
  34. package/dist/src/context.js.map +0 -1
  35. package/dist/src/dev-app-legacy.js +0 -694
  36. package/dist/src/dev-app-legacy.js.map +0 -1
  37. package/dist/src/dev-app.js +0 -6
  38. package/dist/src/dev-app.js.map +0 -1
  39. package/dist/src/dev-serve.js.map +0 -1
  40. package/dist/src/domain.js +0 -2
  41. package/dist/src/domain.js.map +0 -1
  42. package/dist/src/editor-chat-history.js +0 -82
  43. package/dist/src/editor-chat-history.js.map +0 -1
  44. package/dist/src/editor-chat.js +0 -312
  45. package/dist/src/editor-chat.js.map +0 -1
  46. package/dist/src/editor-dark-theme.js +0 -1128
  47. package/dist/src/editor-dark-theme.js.map +0 -1
  48. package/dist/src/frontend/flockposter-cache-store.js +0 -124
  49. package/dist/src/frontend/flockposter-cache-store.js.map +0 -1
  50. package/dist/src/frontend/homepage-client.js +0 -117
  51. package/dist/src/frontend/homepage-client.js.map +0 -1
  52. package/dist/src/frontend/homepage-shared.js +0 -4
  53. package/dist/src/frontend/homepage-shared.js.map +0 -1
  54. package/dist/src/frontend/homepage-store.js +0 -28
  55. package/dist/src/frontend/homepage-store.js.map +0 -1
  56. package/dist/src/frontend/homepage-view.js +0 -260
  57. package/dist/src/frontend/homepage-view.js.map +0 -1
  58. package/dist/src/frontend/page-runtime-client.js +0 -124
  59. package/dist/src/frontend/page-runtime-client.js.map +0 -1
  60. package/dist/src/frontend/page-runtime-store.js +0 -9
  61. package/dist/src/frontend/page-runtime-store.js.map +0 -1
  62. package/dist/src/frontend/sentry.js +0 -42
  63. package/dist/src/frontend/sentry.js.map +0 -1
  64. package/dist/src/frontend/template-editor-chat.js +0 -3760
  65. package/dist/src/frontend/template-editor-chat.js.map +0 -1
  66. package/dist/src/help-page.js +0 -333
  67. package/dist/src/help-page.js.map +0 -1
  68. package/dist/src/homepage.js +0 -919
  69. package/dist/src/homepage.js.map +0 -1
  70. package/dist/src/hyperframes/composition.js +0 -180
  71. package/dist/src/hyperframes/composition.js.map +0 -1
  72. package/dist/src/index.js +0 -16
  73. package/dist/src/index.js.map +0 -1
  74. package/dist/src/instrument.js +0 -30
  75. package/dist/src/instrument.js.map +0 -1
  76. package/dist/src/lib/crypto.js +0 -45
  77. package/dist/src/lib/crypto.js.map +0 -1
  78. package/dist/src/lib/dev-log.js +0 -54
  79. package/dist/src/lib/dev-log.js.map +0 -1
  80. package/dist/src/lib/display-name.js +0 -11
  81. package/dist/src/lib/display-name.js.map +0 -1
  82. package/dist/src/lib/ids.js +0 -24
  83. package/dist/src/lib/ids.js.map +0 -1
  84. package/dist/src/lib/images.js +0 -19
  85. package/dist/src/lib/images.js.map +0 -1
  86. package/dist/src/lib/json.js +0 -15
  87. package/dist/src/lib/json.js.map +0 -1
  88. package/dist/src/lib/template-dna.js +0 -543
  89. package/dist/src/lib/template-dna.js.map +0 -1
  90. package/dist/src/lib/template-paths.js +0 -28
  91. package/dist/src/lib/template-paths.js.map +0 -1
  92. package/dist/src/lib/template-style-options.js +0 -203
  93. package/dist/src/lib/template-style-options.js.map +0 -1
  94. package/dist/src/lib/time.js +0 -7
  95. package/dist/src/lib/time.js.map +0 -1
  96. package/dist/src/lib/video-quality-harness.js +0 -60
  97. package/dist/src/lib/video-quality-harness.js.map +0 -1
  98. package/dist/src/page-runtime.js +0 -2
  99. package/dist/src/page-runtime.js.map +0 -1
  100. package/dist/src/page-shell.js +0 -1315
  101. package/dist/src/page-shell.js.map +0 -1
  102. package/dist/src/primitive-context.js +0 -299
  103. package/dist/src/primitive-context.js.map +0 -1
  104. package/dist/src/primitive-registry.js +0 -2181
  105. package/dist/src/primitive-registry.js.map +0 -1
  106. package/dist/src/primitive-sdk.js +0 -4
  107. package/dist/src/primitive-sdk.js.map +0 -1
  108. package/dist/src/primitives/remotion/html-image.js +0 -30
  109. package/dist/src/primitives/remotion/html-image.js.map +0 -1
  110. package/dist/src/primitives/remotion/media-slideshow.js +0 -60
  111. package/dist/src/primitives/remotion/media-slideshow.js.map +0 -1
  112. package/dist/src/react-page-shell.js +0 -35
  113. package/dist/src/react-page-shell.js.map +0 -1
  114. package/dist/src/ready-post-schedule-component.js +0 -1515
  115. package/dist/src/ready-post-schedule-component.js.map +0 -1
  116. package/dist/src/registry.js +0 -296
  117. package/dist/src/registry.js.map +0 -1
  118. package/dist/src/runtime.js +0 -31
  119. package/dist/src/runtime.js.map +0 -1
  120. package/dist/src/services/api-call-history.js +0 -249
  121. package/dist/src/services/api-call-history.js.map +0 -1
  122. package/dist/src/services/auth.js +0 -152
  123. package/dist/src/services/auth.js.map +0 -1
  124. package/dist/src/services/billing.js +0 -231
  125. package/dist/src/services/billing.js.map +0 -1
  126. package/dist/src/services/chat-threads.js +0 -92
  127. package/dist/src/services/chat-threads.js.map +0 -1
  128. package/dist/src/services/fork-access.js +0 -93
  129. package/dist/src/services/fork-access.js.map +0 -1
  130. package/dist/src/services/fork-manifest.js +0 -43
  131. package/dist/src/services/fork-manifest.js.map +0 -1
  132. package/dist/src/services/ghostcut.js +0 -132
  133. package/dist/src/services/ghostcut.js.map +0 -1
  134. package/dist/src/services/hyperframes.js +0 -1014
  135. package/dist/src/services/hyperframes.js.map +0 -1
  136. package/dist/src/services/job-capacity.js +0 -14
  137. package/dist/src/services/job-capacity.js.map +0 -1
  138. package/dist/src/services/job-logs.js +0 -197
  139. package/dist/src/services/job-logs.js.map +0 -1
  140. package/dist/src/services/jobs.js +0 -136
  141. package/dist/src/services/jobs.js.map +0 -1
  142. package/dist/src/services/media-processing.js +0 -743
  143. package/dist/src/services/media-processing.js.map +0 -1
  144. package/dist/src/services/primitive-media-lambda.js +0 -280
  145. package/dist/src/services/primitive-media-lambda.js.map +0 -1
  146. package/dist/src/services/providers.js +0 -2870
  147. package/dist/src/services/providers.js.map +0 -1
  148. package/dist/src/services/rate-limits.js +0 -237
  149. package/dist/src/services/rate-limits.js.map +0 -1
  150. package/dist/src/services/remotion.js +0 -688
  151. package/dist/src/services/remotion.js.map +0 -1
  152. package/dist/src/services/serverless-auth.js +0 -374
  153. package/dist/src/services/serverless-auth.js.map +0 -1
  154. package/dist/src/services/serverless-jobs.js +0 -1074
  155. package/dist/src/services/serverless-jobs.js.map +0 -1
  156. package/dist/src/services/serverless-provider-keys.js +0 -401
  157. package/dist/src/services/serverless-provider-keys.js.map +0 -1
  158. package/dist/src/services/serverless-records.js +0 -1088
  159. package/dist/src/services/serverless-records.js.map +0 -1
  160. package/dist/src/services/serverless-template-configs.js +0 -67
  161. package/dist/src/services/serverless-template-configs.js.map +0 -1
  162. package/dist/src/services/storage.js +0 -383
  163. package/dist/src/services/storage.js.map +0 -1
  164. package/dist/src/services/template-certification.js +0 -475
  165. package/dist/src/services/template-certification.js.map +0 -1
  166. package/dist/src/services/template-loader.js +0 -99
  167. package/dist/src/services/template-loader.js.map +0 -1
  168. package/dist/src/services/template-runtime-bundles.js +0 -217
  169. package/dist/src/services/template-runtime-bundles.js.map +0 -1
  170. package/dist/src/services/template-sources.js +0 -1017
  171. package/dist/src/services/template-sources.js.map +0 -1
  172. package/dist/src/services/video-normalization.js +0 -2
  173. package/dist/src/services/video-normalization.js.map +0 -1
  174. package/dist/src/services/webhooks.js +0 -62
  175. package/dist/src/services/webhooks.js.map +0 -1
  176. package/dist/src/template-editor-pages.js +0 -2491
  177. package/dist/src/template-editor-pages.js.map +0 -1
  178. package/dist/src/template-editor-shell.js +0 -2702
  179. package/dist/src/template-editor-shell.js.map +0 -1
  180. package/dist/src/template-sdk.js +0 -4
  181. package/dist/src/template-sdk.js.map +0 -1
  182. package/dist/src/worker.js +0 -17
  183. package/dist/src/worker.js.map +0 -1
  184. package/public/assets/homepage-app.js +0 -54
  185. package/public/assets/homepage-client-app.js +0 -80
  186. package/public/assets/page-runtime-client-app.js +0 -94
  187. package/readme.secret.md +0 -89
  188. package/templates/vidfarm_template_0000/README.md +0 -106
  189. package/templates/vidfarm_template_0000/SKILL.md +0 -266
  190. package/templates/vidfarm_template_0000/assets/Abel-Regular.ttf +0 -0
  191. package/templates/vidfarm_template_0000/assets/DMSerifDisplay-Regular.ttf +0 -0
  192. package/templates/vidfarm_template_0000/assets/Montserrat[wght].ttf +0 -0
  193. package/templates/vidfarm_template_0000/assets/SourceCodePro[wght].ttf +0 -0
  194. package/templates/vidfarm_template_0000/assets/TikTokSans-SemiBold.ttf +0 -0
  195. package/templates/vidfarm_template_0000/assets/Yesteryear-Regular.ttf +0 -0
  196. package/templates/vidfarm_template_0000/composition.json +0 -11
  197. package/templates/vidfarm_template_0000/src/lib/images.js +0 -221
  198. package/templates/vidfarm_template_0000/src/remotion/Root.js +0 -33
  199. package/templates/vidfarm_template_0000/src/remotion/index.js +0 -3
  200. package/templates/vidfarm_template_0000/src/sdk.js +0 -3
  201. package/templates/vidfarm_template_0000/src/style-options.js +0 -200
  202. package/templates/vidfarm_template_0000/src/template-dna.js +0 -9
  203. package/templates/vidfarm_template_0000/src/template.js +0 -1566
  204. package/templates/vidfarm_template_0000/template.config.json +0 -21
@@ -1,2702 +0,0 @@
1
- import { escapeAttribute, escapeHtml, resolveAccountDisplayName } from "./page-shell.js";
2
- export const TEMPLATE_EDITOR_SHELL_STYLES = `
3
- .editor-workbench {
4
- min-height: 100%;
5
- height: 100%;
6
- padding: 96px 0 28px 432px;
7
- overflow: hidden;
8
- min-width: 0;
9
- box-sizing: border-box;
10
- }
11
-
12
- .editor-main {
13
- min-height: 0;
14
- height: 100%;
15
- overflow-x: hidden;
16
- overflow-y: auto;
17
- overflow: auto;
18
- padding-left: 10px;
19
- }
20
-
21
- .editor-floating-nav {
22
- position: fixed;
23
- top: 20px;
24
- left: 452px;
25
- right: 20px;
26
- z-index: 60;
27
- display: flex;
28
- flex-wrap: wrap;
29
- align-items: center;
30
- gap: 10px;
31
- max-width: none;
32
- padding: 12px 14px;
33
- border: 1px solid rgba(255, 255, 255, 0.84);
34
- border-radius: 24px;
35
- background: rgba(255, 252, 247, 0.9);
36
- box-shadow: var(--shadow);
37
- backdrop-filter: blur(16px);
38
- }
39
-
40
- .editor-back-link {
41
- display: inline-flex;
42
- align-items: center;
43
- justify-content: center;
44
- min-height: 40px;
45
- padding: 0 14px;
46
- border: 1px solid rgba(191, 164, 109, 0.34);
47
- border-radius: 999px;
48
- background: #dbc17a;
49
- color: #243041;
50
- text-decoration: none;
51
- font-size: 0.9rem;
52
- font-weight: 700;
53
- white-space: nowrap;
54
- }
55
-
56
- .editor-nav-title {
57
- min-width: 0;
58
- flex: 1 1 auto;
59
- margin: 0 4px 0 2px;
60
- font-family: "Instrument Serif", serif;
61
- font-size: 1.4rem;
62
- line-height: 0.95;
63
- letter-spacing: -0.04em;
64
- color: #1f2635;
65
- overflow: hidden;
66
- text-overflow: ellipsis;
67
- white-space: nowrap;
68
- }
69
-
70
- .editor-nav-account {
71
- min-width: 0;
72
- max-width: min(42vw, 460px);
73
- margin-left: auto;
74
- color: rgba(116, 130, 156, 0.78);
75
- font-size: 0.94rem;
76
- line-height: 1.2;
77
- font-weight: 500;
78
- letter-spacing: -0.01em;
79
- overflow: hidden;
80
- text-overflow: ellipsis;
81
- white-space: nowrap;
82
- }
83
-
84
- .editor-nav-account span {
85
- color: rgba(116, 130, 156, 0.62);
86
- }
87
-
88
- .editor-right-rail {
89
- position: fixed;
90
- top: 0;
91
- left: 0;
92
- bottom: 0;
93
- z-index: 30;
94
- width: 432px;
95
- overflow: hidden;
96
- }
97
-
98
- .editor-chat-panel {
99
- height: 100%;
100
- min-width: 0;
101
- display: flex;
102
- overflow: hidden;
103
- border-right: 1px solid rgba(255, 255, 255, 0.84);
104
- background: rgba(255, 252, 247, 0.92);
105
- }
106
-
107
- .vf-editor-chat-shell,
108
- .vf-editor-chat-thread {
109
- height: 100%;
110
- min-height: 0;
111
- }
112
-
113
- .vf-editor-chat-shell {
114
- display: flex;
115
- flex-direction: column;
116
- min-height: 100%;
117
- min-width: 0;
118
- width: 100%;
119
- }
120
-
121
- .vf-editor-chat-body {
122
- flex: 1 1 auto;
123
- display: flex;
124
- min-height: 0;
125
- min-width: 0;
126
- width: 100%;
127
- }
128
-
129
- .vf-editor-chat-shell[data-layout="brainstorm"] {
130
- height: 100%;
131
- min-height: 0;
132
- }
133
-
134
- .vf-editor-chat-brainstorm-layout {
135
- position: relative;
136
- flex: 1 1 auto;
137
- display: grid;
138
- grid-template-columns: minmax(0, 1fr);
139
- min-height: 0;
140
- height: 100%;
141
- width: 100%;
142
- }
143
-
144
- .vf-editor-chat-history-pane {
145
- display: grid;
146
- grid-template-rows: auto auto minmax(0, 1fr);
147
- gap: 10px;
148
- min-height: 0;
149
- height: 100%;
150
- padding: 14px 12px 12px;
151
- background: transparent;
152
- }
153
-
154
- .vf-editor-chat-history-header {
155
- display: flex;
156
- align-items: center;
157
- justify-content: space-between;
158
- gap: 10px;
159
- }
160
-
161
- .vf-editor-chat-history-header-main {
162
- display: flex;
163
- align-items: center;
164
- gap: 10px;
165
- min-width: 0;
166
- }
167
-
168
- .vf-editor-chat-history-kicker {
169
- color: #8d99ae;
170
- font-size: 0.72rem;
171
- font-weight: 800;
172
- letter-spacing: 0.18em;
173
- text-transform: uppercase;
174
- }
175
-
176
- .vf-editor-chat-new-thread-sidebar {
177
- justify-self: start;
178
- min-height: 34px;
179
- padding: 0 12px;
180
- border-radius: 999px;
181
- }
182
-
183
- .vf-editor-chat-history-close,
184
- .vf-editor-chat-history-toggle,
185
- .vf-editor-chat-back-button {
186
- all: unset;
187
- display: inline-flex;
188
- align-items: center;
189
- justify-content: center;
190
- min-height: 34px;
191
- padding: 0 12px;
192
- border: 1px solid rgba(191, 164, 109, 0.28);
193
- border-radius: 999px;
194
- background: rgba(255, 255, 255, 0.88);
195
- color: #243041;
196
- font-size: 0.8rem;
197
- font-weight: 800;
198
- line-height: 1;
199
- white-space: nowrap;
200
- }
201
-
202
- .vf-editor-chat-history-close {
203
- display: none;
204
- width: 34px;
205
- min-width: 34px;
206
- padding: 0;
207
- font-size: 1rem;
208
- }
209
-
210
- .vf-editor-chat-history-toggle {
211
- display: none;
212
- }
213
-
214
- .vf-editor-chat-thread-list-sidebar {
215
- display: flex;
216
- flex-direction: column;
217
- align-items: stretch;
218
- gap: 8px;
219
- margin-top: 4px;
220
- min-height: 0;
221
- overflow-y: auto;
222
- overflow-x: hidden;
223
- padding: 2px 2px 6px 0;
224
- }
225
-
226
- .vf-editor-chat-thread-list-sidebar::-webkit-scrollbar {
227
- width: 6px;
228
- }
229
-
230
- .vf-editor-chat-thread-list-sidebar::-webkit-scrollbar-thumb {
231
- border-radius: 999px;
232
- background: rgba(191, 164, 109, 0.42);
233
- }
234
-
235
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip {
236
- display: flex;
237
- width: 100%;
238
- max-width: none;
239
- min-width: 0;
240
- padding: 6px 6px 6px 8px;
241
- border-radius: 14px;
242
- background: rgba(255, 255, 255, 0.78);
243
- }
244
-
245
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-main {
246
- display: block;
247
- flex: 1 1 auto;
248
- width: 100%;
249
- max-width: none;
250
- padding: 1px 0;
251
- }
252
-
253
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-title {
254
- font-size: 0.8rem;
255
- }
256
-
257
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-tracers {
258
- font-size: 0.64rem;
259
- }
260
-
261
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
262
- border-left: 0;
263
- display: grid;
264
- grid-template-rows: auto minmax(0, 1fr) auto;
265
- }
266
-
267
- .vf-editor-chat-brainstorm-topbar {
268
- display: flex;
269
- align-items: center;
270
- justify-content: space-between;
271
- gap: 12px;
272
- }
273
-
274
- .vf-editor-chat-brainstorm-topbar-left {
275
- display: flex;
276
- align-items: center;
277
- gap: 10px;
278
- min-width: 0;
279
- }
280
-
281
- .vf-editor-chat-brainstorm-title {
282
- color: #1f2635;
283
- font-family: "Instrument Serif", serif;
284
- font-size: 1.8rem;
285
- line-height: 0.96;
286
- letter-spacing: -0.05em;
287
- }
288
-
289
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-header {
290
- padding: 10px 12px 8px;
291
- }
292
-
293
- .vf-editor-chat-mobile-fab,
294
- .vf-editor-chat-minimize {
295
- display: none;
296
- }
297
-
298
- .vf-editor-chat-thread {
299
- flex: 1 1 auto;
300
- min-height: 0;
301
- min-width: 0;
302
- display: flex;
303
- flex-direction: column;
304
- overflow: hidden;
305
- background:
306
- radial-gradient(circle at top right, rgba(219, 193, 122, 0.12), transparent 26%),
307
- linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(252, 247, 238, 0.94));
308
- }
309
-
310
- .vf-editor-chat-header {
311
- min-width: 0;
312
- padding: 8px 8px 6px;
313
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
314
- background: rgba(255, 251, 244, 0.76);
315
- backdrop-filter: blur(12px);
316
- }
317
-
318
- .vf-editor-chat-header-row {
319
- display: flex;
320
- align-items: center;
321
- justify-content: flex-start;
322
- gap: 10px;
323
- }
324
-
325
- .vf-editor-chat-header-titles {
326
- flex: 1 1 auto;
327
- min-width: 0;
328
- }
329
-
330
- .vf-editor-chat-header-title {
331
- color: #8d99ae;
332
- font-size: 0.78rem;
333
- font-weight: 800;
334
- letter-spacing: 0.16em;
335
- text-transform: uppercase;
336
- }
337
-
338
- .vf-editor-chat-header-subtitle {
339
- margin-top: 4px;
340
- color: #334155;
341
- font-size: 0.92rem;
342
- font-weight: 700;
343
- line-height: 1.3;
344
- }
345
-
346
- .vf-editor-chat-new-thread {
347
- all: unset;
348
- display: inline-flex;
349
- align-items: center;
350
- justify-content: center;
351
- min-height: 30px;
352
- padding: 0 10px;
353
- border-radius: 12px;
354
- border: 1px solid rgba(191, 164, 109, 0.34);
355
- background: rgba(255, 255, 255, 0.92);
356
- color: #243041;
357
- font-size: 0.78rem;
358
- font-weight: 700;
359
- white-space: nowrap;
360
- }
361
-
362
- .vf-editor-chat-history-icon {
363
- all: unset;
364
- display: inline-flex;
365
- align-items: center;
366
- justify-content: center;
367
- width: 32px;
368
- height: 32px;
369
- min-width: 32px;
370
- border-radius: 999px;
371
- border: 1px solid rgba(191, 164, 109, 0.34);
372
- background: rgba(255, 255, 255, 0.92);
373
- color: #5c6a82;
374
- cursor: pointer;
375
- }
376
-
377
- .vf-editor-chat-history-icon[aria-pressed="true"] {
378
- border-color: rgba(219, 193, 122, 0.9);
379
- background: rgba(219, 193, 122, 0.16);
380
- color: #8a6b1b;
381
- }
382
-
383
- .vf-editor-chat-history-icon svg {
384
- width: 18px;
385
- height: 18px;
386
- }
387
-
388
- .vf-editor-chat-history-panel {
389
- display: flex;
390
- flex-direction: column;
391
- min-height: 0;
392
- height: 100%;
393
- padding: 0;
394
- }
395
-
396
- .vf-editor-chat-history-panel .vf-editor-chat-thread-list {
397
- display: flex;
398
- flex-direction: column;
399
- flex-wrap: nowrap;
400
- gap: 6px;
401
- margin: 0;
402
- padding: 4px 0 16px;
403
- width: 100%;
404
- max-width: none;
405
- overflow-y: auto;
406
- overflow-x: hidden;
407
- }
408
-
409
- .vf-editor-chat-history-panel .vf-editor-chat-thread-chip {
410
- display: flex;
411
- align-items: center;
412
- gap: 8px;
413
- width: 100%;
414
- max-width: none;
415
- min-width: 0;
416
- padding: 8px 10px;
417
- border-radius: 12px;
418
- }
419
-
420
- .vf-editor-chat-history-panel .vf-editor-chat-thread-chip-main {
421
- display: block;
422
- flex: 1 1 auto;
423
- min-width: 0;
424
- }
425
-
426
- .vf-editor-chat-thread-list {
427
- display: flex;
428
- flex-wrap: nowrap;
429
- gap: 4px;
430
- margin-top: 8px;
431
- width: 100%;
432
- max-width: 100%;
433
- min-width: 0;
434
- overflow-x: auto;
435
- overflow-y: hidden;
436
- padding: 0 4px 5px 0;
437
- overscroll-behavior-x: contain;
438
- scrollbar-width: thin;
439
- -webkit-overflow-scrolling: touch;
440
- }
441
-
442
- .vf-editor-chat-thread-list::-webkit-scrollbar {
443
- height: 6px;
444
- }
445
-
446
- .vf-editor-chat-thread-list::-webkit-scrollbar-thumb {
447
- border-radius: 999px;
448
- background: rgba(191, 164, 109, 0.42);
449
- }
450
-
451
- .vf-editor-chat-tracer-bar {
452
- display: grid;
453
- gap: 8px;
454
- margin-top: 10px;
455
- padding-top: 10px;
456
- border-top: 1px solid rgba(191, 164, 109, 0.12);
457
- }
458
-
459
- .vf-editor-chat-tracer-bar-head {
460
- display: flex;
461
- align-items: center;
462
- justify-content: space-between;
463
- gap: 8px;
464
- }
465
-
466
- .vf-editor-chat-tracer-label {
467
- color: #8d99ae;
468
- font-size: 0.72rem;
469
- font-weight: 800;
470
- letter-spacing: 0.14em;
471
- text-transform: uppercase;
472
- }
473
-
474
- .vf-editor-chat-tracer-add {
475
- all: unset;
476
- display: inline-flex;
477
- align-items: center;
478
- justify-content: center;
479
- min-height: 28px;
480
- padding: 0 10px;
481
- border-radius: 999px;
482
- border: 1px solid rgba(191, 164, 109, 0.34);
483
- background: rgba(255, 255, 255, 0.92);
484
- color: #243041;
485
- font-size: 0.74rem;
486
- font-weight: 700;
487
- white-space: nowrap;
488
- }
489
-
490
- .vf-editor-chat-tracer-list {
491
- display: flex;
492
- flex-wrap: wrap;
493
- gap: 6px;
494
- }
495
-
496
- .vf-editor-chat-tracer-chip {
497
- display: inline-flex;
498
- align-items: center;
499
- gap: 6px;
500
- min-height: 30px;
501
- padding: 0 4px 0 10px;
502
- border-radius: 999px;
503
- border: 1px solid rgba(191, 164, 109, 0.24);
504
- background: rgba(255, 255, 255, 0.84);
505
- }
506
-
507
- .vf-editor-chat-tracer-chip[data-active="true"] {
508
- border-color: rgba(219, 193, 122, 0.82);
509
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.22), rgba(255, 255, 255, 0.92));
510
- }
511
-
512
- .vf-editor-chat-tracer-chip-button,
513
- .vf-editor-chat-tracer-chip-remove {
514
- all: unset;
515
- color: inherit;
516
- }
517
-
518
- .vf-editor-chat-tracer-chip-button {
519
- display: inline-flex;
520
- align-items: center;
521
- min-width: 0;
522
- font-size: 0.74rem;
523
- font-weight: 800;
524
- color: #334155;
525
- }
526
-
527
- .vf-editor-chat-tracer-chip-text {
528
- display: inline-block;
529
- max-width: 184px;
530
- overflow: hidden;
531
- text-overflow: ellipsis;
532
- white-space: nowrap;
533
- }
534
-
535
- .vf-editor-chat-tracer-chip-remove {
536
- display: inline-flex;
537
- align-items: center;
538
- justify-content: center;
539
- width: 18px;
540
- height: 18px;
541
- border-radius: 999px;
542
- color: #617087;
543
- font-size: 0.9rem;
544
- line-height: 1;
545
- }
546
-
547
- .vf-editor-chat-tracer-help {
548
- color: #617087;
549
- font-size: 0.72rem;
550
- line-height: 1.45;
551
- }
552
-
553
- .vf-editor-chat-thread-chip {
554
- display: inline-flex;
555
- align-items: center;
556
- gap: 2px;
557
- flex: 0 0 auto;
558
- width: auto;
559
- max-width: 184px;
560
- min-width: 0;
561
- padding: 0 4px;
562
- border: 1px solid rgba(191, 164, 109, 0.16);
563
- border-radius: 8px;
564
- background: rgba(255, 255, 255, 0.75);
565
- color: #243041;
566
- transition:
567
- border-color 140ms ease,
568
- background 140ms ease;
569
- }
570
-
571
- .vf-editor-chat-thread-chip[data-active="true"] {
572
- border-color: rgba(219, 193, 122, 0.82);
573
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.22), rgba(255, 255, 255, 0.92));
574
- }
575
-
576
- .vf-editor-chat-thread-chip-main {
577
- all: unset;
578
- display: inline-block;
579
- flex: 0 1 auto;
580
- min-width: 0;
581
- width: auto;
582
- max-width: 148px;
583
- padding: 3px 0;
584
- margin: 0;
585
- border: 0;
586
- border-radius: 0;
587
- background: transparent;
588
- text-align: left;
589
- color: inherit;
590
- box-shadow: none;
591
- min-height: 0;
592
- appearance: none;
593
- -webkit-appearance: none;
594
- font: inherit;
595
- outline: none;
596
- }
597
-
598
- .vf-editor-chat-thread-menu-wrap {
599
- position: relative;
600
- display: inline-flex;
601
- flex: 0 0 auto;
602
- }
603
-
604
- .vf-editor-chat-thread-chip-menu {
605
- all: unset;
606
- display: inline-flex;
607
- align-items: center;
608
- justify-content: center;
609
- flex: 0 0 auto;
610
- width: 20px;
611
- min-width: 20px;
612
- height: 20px;
613
- padding: 0;
614
- border: 0;
615
- border-radius: 999px;
616
- background: transparent;
617
- color: #617087;
618
- box-shadow: none;
619
- font-size: 0.72rem;
620
- font-weight: 900;
621
- line-height: 1;
622
- opacity: 0.8;
623
- }
624
-
625
- .vf-editor-chat-thread-chip-menu:hover {
626
- background: rgba(219, 193, 122, 0.18);
627
- opacity: 1;
628
- }
629
-
630
- .vf-editor-chat-thread-menu {
631
- position: fixed;
632
- z-index: 1000;
633
- display: grid;
634
- gap: 2px;
635
- min-width: 138px;
636
- padding: 6px;
637
- border: 1px solid rgba(191, 164, 109, 0.28);
638
- border-radius: 10px;
639
- background: rgba(255, 252, 247, 0.98);
640
- box-shadow: 0 14px 34px rgba(37, 45, 61, 0.16);
641
- }
642
-
643
- .vf-editor-chat-thread-menu button {
644
- all: unset;
645
- padding: 8px 9px;
646
- border-radius: 7px;
647
- color: #324156;
648
- font-size: 0.76rem;
649
- font-weight: 800;
650
- white-space: nowrap;
651
- }
652
-
653
- .vf-editor-chat-thread-menu button:hover {
654
- background: rgba(219, 193, 122, 0.16);
655
- }
656
-
657
- .vf-editor-chat-thread-menu button[data-danger="true"] {
658
- color: #8d4a3b;
659
- }
660
-
661
- .vf-editor-chat-thread-chip-title {
662
- display: block;
663
- max-width: 100%;
664
- overflow: hidden;
665
- text-overflow: ellipsis;
666
- white-space: nowrap;
667
- font-size: 0.74rem;
668
- font-weight: 800;
669
- line-height: 1.2;
670
- }
671
-
672
- .vf-editor-chat-thread-chip-tracers,
673
- .vf-editor-chat-thread-chip-preview,
674
- .vf-editor-chat-thread-empty {
675
- display: block;
676
- overflow: hidden;
677
- text-overflow: ellipsis;
678
- white-space: nowrap;
679
- color: #617087;
680
- font-size: 0.68rem;
681
- line-height: 1.25;
682
- }
683
-
684
- .vf-editor-chat-thread-chip-tracers {
685
- max-width: 100%;
686
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
687
- font-size: 0.62rem;
688
- }
689
-
690
- .vf-editor-chat-empty h2,
691
- .vf-editor-chat-disabled h2 {
692
- margin: 0;
693
- font-family: inherit;
694
- font-size: 1.35rem;
695
- line-height: 1.08;
696
- letter-spacing: -0.03em;
697
- color: #1f2635;
698
- }
699
-
700
- .vf-editor-chat-kicker {
701
- color: #8d99ae;
702
- font-size: 0.75rem;
703
- font-weight: 700;
704
- letter-spacing: 0.18em;
705
- text-transform: uppercase;
706
- }
707
-
708
- .vf-editor-chat-viewport {
709
- min-height: 0;
710
- flex: 1 1 0;
711
- overflow: auto;
712
- overscroll-behavior: contain;
713
- padding: 8px 8px 10px;
714
- }
715
-
716
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
717
- height: 100%;
718
- align-self: stretch;
719
- }
720
-
721
- .vf-editor-chat-empty,
722
- .vf-editor-chat-disabled {
723
- display: grid;
724
- gap: 8px;
725
- margin: 0;
726
- padding: 12px;
727
- border: 1px solid rgba(191, 164, 109, 0.18);
728
- border-radius: 10px;
729
- background: rgba(255, 255, 255, 0.86);
730
- box-shadow: 0 10px 20px rgba(15, 23, 42, 0.035);
731
- }
732
-
733
- .vf-editor-chat-empty p,
734
- .vf-editor-chat-disabled p {
735
- color: #617087;
736
- line-height: 1.7;
737
- }
738
-
739
- .vf-editor-chat-empty-prompts {
740
- display: grid;
741
- gap: 6px;
742
- margin-top: 2px;
743
- }
744
-
745
- .vf-editor-chat-empty-prompts div {
746
- padding: 8px 10px;
747
- border: 1px solid rgba(141, 153, 174, 0.22);
748
- border-radius: 8px;
749
- background: rgba(248, 250, 252, 0.84);
750
- color: #334155;
751
- font-size: 0.78rem;
752
- line-height: 1.35;
753
- }
754
-
755
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-empty,
756
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-disabled {
757
- padding: 16px;
758
- border-radius: 16px;
759
- }
760
-
761
- .vf-editor-chat-message {
762
- display: flex;
763
- flex-direction: column;
764
- align-items: flex-start;
765
- gap: 6px;
766
- min-width: 0;
767
- margin-bottom: 14px;
768
- }
769
-
770
- .vf-editor-chat-message.is-user {
771
- align-items: flex-end;
772
- }
773
-
774
- .vf-editor-chat-message-meta {
775
- font-size: 0.72rem;
776
- font-weight: 700;
777
- letter-spacing: 0.12em;
778
- text-transform: uppercase;
779
- color: #8d99ae;
780
- }
781
-
782
- .vf-editor-chat-message.is-user .vf-editor-chat-message-meta {
783
- text-align: right;
784
- }
785
-
786
- .vf-editor-chat-bubble {
787
- display: grid;
788
- justify-items: start;
789
- gap: 8px;
790
- max-width: min(100%, 340px);
791
- width: auto;
792
- min-width: 0;
793
- padding: 10px 12px;
794
- border-radius: 10px;
795
- border: 1px solid rgba(191, 164, 109, 0.18);
796
- background: rgba(255, 255, 255, 0.9);
797
- box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
798
- }
799
-
800
- .vf-editor-chat-bubble[data-pending="true"] {
801
- background:
802
- linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 248, 240, 0.96)),
803
- linear-gradient(90deg, rgba(219, 193, 122, 0.08), rgba(255, 255, 255, 0.4), rgba(219, 193, 122, 0.08));
804
- }
805
-
806
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble {
807
- align-self: flex-start;
808
- border-top-left-radius: 4px;
809
- }
810
-
811
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
812
- align-self: flex-end;
813
- border-top-right-radius: 4px;
814
- max-width: min(82%, 340px);
815
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.32), rgba(255, 255, 255, 0.94));
816
- }
817
-
818
- .vf-editor-chat-viewport .vf-editor-chat-message-attachment-thumb,
819
- .vf-editor-chat-composer-images .vf-editor-chat-message-attachment-thumb {
820
- width: min(220px, 100%);
821
- max-width: min(220px, 100%);
822
- }
823
-
824
- .vf-editor-chat-message-body {
825
- display: block;
826
- width: 100%;
827
- color: #334155;
828
- line-height: 1.6;
829
- font-size: 0.92rem;
830
- white-space: pre-wrap;
831
- word-break: break-word;
832
- overflow-wrap: break-word;
833
- text-align: left;
834
- }
835
-
836
- .vf-editor-chat-message-body p + p {
837
- margin-top: 0.8em;
838
- }
839
-
840
- .vf-editor-chat-message-body a {
841
- color: #8a6b1b;
842
- text-decoration: underline;
843
- text-underline-offset: 0.16em;
844
- word-break: break-word;
845
- }
846
-
847
- .vf-editor-chat-message-body strong {
848
- font-weight: 800;
849
- color: #243041;
850
- }
851
-
852
- .vf-editor-chat-message-body em {
853
- font-style: italic;
854
- }
855
-
856
- .vf-editor-chat-message-body code {
857
- padding: 0.08rem 0.32rem;
858
- border-radius: 0.35rem;
859
- background: rgba(36, 48, 65, 0.08);
860
- color: #243041;
861
- font-size: 0.88em;
862
- font-family: "SFMono-Regular", "Menlo", monospace;
863
- }
864
-
865
- .vf-editor-chat-message-body pre {
866
- margin: 0;
867
- padding: 10px 11px;
868
- border-radius: 10px;
869
- background: rgba(36, 48, 65, 0.06);
870
- overflow: auto;
871
- }
872
-
873
- .vf-editor-chat-message-body pre code {
874
- padding: 0;
875
- background: transparent;
876
- font-size: 0.82em;
877
- white-space: pre-wrap;
878
- }
879
-
880
- .vf-editor-chat-message-body ul,
881
- .vf-editor-chat-message-body ol {
882
- margin: 0;
883
- padding-left: 1.2rem;
884
- }
885
-
886
- .vf-editor-chat-message-body li + li {
887
- margin-top: 0.28rem;
888
- }
889
-
890
- .vf-editor-chat-http-list {
891
- display: grid;
892
- gap: 6px;
893
- width: 100%;
894
- }
895
-
896
- .vf-editor-chat-json-list {
897
- display: grid;
898
- gap: 8px;
899
- width: 100%;
900
- }
901
-
902
- .vf-editor-chat-json-card {
903
- width: min(100%, 860px);
904
- border-radius: 12px;
905
- border: 1px solid rgba(191, 164, 109, 0.18);
906
- background: rgba(251, 247, 238, 0.92);
907
- overflow: hidden;
908
- }
909
-
910
- .vf-editor-chat-json-card-head {
911
- display: flex;
912
- align-items: flex-start;
913
- justify-content: space-between;
914
- gap: 12px;
915
- padding: 10px 12px;
916
- }
917
-
918
- .vf-editor-chat-json-card-kicker {
919
- color: #8a6b1b;
920
- font-size: 0.64rem;
921
- font-weight: 800;
922
- letter-spacing: 0.08em;
923
- text-transform: uppercase;
924
- }
925
-
926
- .vf-editor-chat-json-card-title {
927
- color: #243041;
928
- font-size: 0.92rem;
929
- font-weight: 800;
930
- line-height: 1.3;
931
- }
932
-
933
- .vf-editor-chat-json-card-actions {
934
- display: inline-flex;
935
- align-items: center;
936
- gap: 8px;
937
- flex: 0 0 auto;
938
- }
939
-
940
- .vf-editor-chat-json-card-action {
941
- all: unset;
942
- display: inline-flex;
943
- align-items: center;
944
- justify-content: center;
945
- min-height: 30px;
946
- padding: 0 11px;
947
- border-radius: 999px;
948
- background: rgba(255, 255, 255, 0.92);
949
- color: #617087;
950
- font-size: 0.76rem;
951
- font-weight: 800;
952
- cursor: pointer;
953
- }
954
-
955
- .vf-editor-chat-json-card-action.is-strong {
956
- background: rgba(225, 201, 136, 0.36);
957
- color: #7a5d19;
958
- }
959
-
960
- .vf-editor-chat-json-card-body {
961
- padding: 0 12px 12px;
962
- }
963
-
964
- .vf-editor-chat-json-state {
965
- padding: 12px;
966
- border-radius: 10px;
967
- background: rgba(255, 255, 255, 0.9);
968
- color: #526179;
969
- font-size: 0.78rem;
970
- }
971
-
972
- .vf-editor-chat-json-state.is-error {
973
- color: #a14444;
974
- }
975
-
976
- .vf-editor-chat-json-viewer {
977
- border-radius: 12px;
978
- border: 1px solid rgba(191, 164, 109, 0.16);
979
- background: rgba(255, 255, 255, 0.9);
980
- overflow: hidden;
981
- }
982
-
983
- .vf-editor-chat-json-toolbar {
984
- display: flex;
985
- align-items: center;
986
- justify-content: space-between;
987
- gap: 12px;
988
- padding: 10px 12px;
989
- border-bottom: 1px solid rgba(191, 164, 109, 0.12);
990
- background: rgba(250, 245, 236, 0.88);
991
- }
992
-
993
- .vf-editor-chat-json-file,
994
- .vf-editor-chat-json-copy-state {
995
- color: #617087;
996
- font-size: 0.7rem;
997
- font-weight: 700;
998
- line-height: 1.35;
999
- }
1000
-
1001
- .vf-editor-chat-json-copy-state[data-state="done"] {
1002
- color: #2f7d4f;
1003
- }
1004
-
1005
- .vf-editor-chat-json-copy-state[data-state="error"] {
1006
- color: #a14444;
1007
- }
1008
-
1009
- .vf-editor-chat-json-scroll {
1010
- max-height: 320px;
1011
- overflow: auto;
1012
- padding: 10px 0;
1013
- }
1014
-
1015
- .vf-editor-chat-json-toggle-row {
1016
- display: flex;
1017
- align-items: flex-start;
1018
- gap: 2px;
1019
- }
1020
-
1021
- .vf-editor-chat-json-toggle-icon {
1022
- all: unset;
1023
- display: inline-flex;
1024
- align-items: center;
1025
- justify-content: center;
1026
- width: 24px;
1027
- min-width: 24px;
1028
- height: 26px;
1029
- margin-left: 6px;
1030
- color: #7b879b;
1031
- cursor: pointer;
1032
- }
1033
-
1034
- .vf-editor-chat-json-toggle-icon svg {
1035
- width: 14px;
1036
- height: 14px;
1037
- transition: transform 120ms ease;
1038
- }
1039
-
1040
- .vf-editor-chat-json-line {
1041
- position: relative;
1042
- display: flex;
1043
- align-items: flex-start;
1044
- width: 100%;
1045
- min-height: 24px;
1046
- box-sizing: border-box;
1047
- padding-right: 12px;
1048
- }
1049
-
1050
- .vf-editor-chat-json-line:hover {
1051
- background: rgba(138, 107, 27, 0.05);
1052
- }
1053
-
1054
- .vf-editor-chat-json-line-text {
1055
- display: block;
1056
- width: 100%;
1057
- color: #2c3748;
1058
- font-size: 0.78rem;
1059
- line-height: 1.5;
1060
- white-space: pre-wrap;
1061
- word-break: break-word;
1062
- user-select: text;
1063
- font-family: "SFMono-Regular", "Menlo", monospace;
1064
- }
1065
-
1066
- .vf-editor-chat-json-copy {
1067
- all: unset;
1068
- position: absolute;
1069
- left: 0;
1070
- top: 3px;
1071
- width: 20px;
1072
- height: 20px;
1073
- border-radius: 6px;
1074
- background: rgba(255, 255, 255, 0.96);
1075
- color: #7b879b;
1076
- opacity: 0;
1077
- box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
1078
- cursor: pointer;
1079
- transition: opacity 120ms ease, color 120ms ease;
1080
- }
1081
-
1082
- .vf-editor-chat-json-line:hover .vf-editor-chat-json-copy,
1083
- .vf-editor-chat-json-copy:focus-visible {
1084
- opacity: 1;
1085
- }
1086
-
1087
- .vf-editor-chat-json-copy:hover {
1088
- color: #8a6b1b;
1089
- }
1090
-
1091
- .vf-editor-chat-json-copy svg {
1092
- width: 14px;
1093
- height: 14px;
1094
- margin: 3px;
1095
- }
1096
-
1097
- .vf-editor-chat-http-card {
1098
- width: 100%;
1099
- border-radius: 8px;
1100
- border: 1px solid rgba(191, 164, 109, 0.18);
1101
- background: rgba(248, 244, 235, 0.82);
1102
- overflow: hidden;
1103
- }
1104
-
1105
- .vf-editor-chat-http-card-header {
1106
- all: unset;
1107
- display: flex;
1108
- align-items: center;
1109
- gap: 6px;
1110
- min-width: 0;
1111
- width: 100%;
1112
- box-sizing: border-box;
1113
- padding: 6px 8px;
1114
- cursor: pointer;
1115
- }
1116
-
1117
- .vf-editor-chat-http-pill,
1118
- .vf-editor-chat-http-status {
1119
- display: inline-flex;
1120
- align-items: center;
1121
- min-height: 18px;
1122
- padding: 0 6px;
1123
- border-radius: 999px;
1124
- font-size: 0.62rem;
1125
- font-weight: 800;
1126
- letter-spacing: 0.04em;
1127
- background: rgba(255, 255, 255, 0.92);
1128
- color: #3f4a5d;
1129
- flex: 0 0 auto;
1130
- }
1131
-
1132
- .vf-editor-chat-http-status[data-error="true"] {
1133
- color: #a33c32;
1134
- background: rgba(245, 213, 208, 0.92);
1135
- }
1136
-
1137
- .vf-editor-chat-http-status[data-success="true"] {
1138
- color: #1f6a3a;
1139
- background: rgba(214, 240, 222, 0.96);
1140
- }
1141
-
1142
- .vf-editor-chat-http-url {
1143
- min-width: 0;
1144
- flex: 1 1 auto;
1145
- color: #526179;
1146
- font-size: 0.68rem;
1147
- line-height: 1.25;
1148
- white-space: nowrap;
1149
- overflow: hidden;
1150
- text-overflow: ellipsis;
1151
- }
1152
-
1153
- .vf-editor-chat-http-expand {
1154
- display: inline-flex;
1155
- align-items: center;
1156
- justify-content: center;
1157
- width: 16px;
1158
- min-width: 16px;
1159
- height: 16px;
1160
- border-radius: 999px;
1161
- background: rgba(255, 255, 255, 0.92);
1162
- color: #617087;
1163
- font-size: 0.8rem;
1164
- line-height: 1;
1165
- flex: 0 0 auto;
1166
- }
1167
-
1168
- .vf-editor-chat-http-card-body {
1169
- display: grid;
1170
- gap: 6px;
1171
- padding: 0 8px 8px;
1172
- }
1173
-
1174
- .vf-editor-chat-http-card-body.is-modal {
1175
- padding: 14px;
1176
- gap: 10px;
1177
- }
1178
-
1179
- .vf-editor-chat-http-modal-backdrop {
1180
- position: fixed;
1181
- inset: 0;
1182
- z-index: 120;
1183
- display: flex;
1184
- align-items: center;
1185
- justify-content: center;
1186
- padding: 18px;
1187
- background: rgba(31, 38, 53, 0.42);
1188
- backdrop-filter: blur(8px);
1189
- }
1190
-
1191
- .vf-editor-chat-http-modal-backdrop[hidden] {
1192
- display: none;
1193
- }
1194
-
1195
- .vf-editor-chat-http-modal {
1196
- width: min(860px, calc(100vw - 36px));
1197
- max-height: min(82vh, 920px);
1198
- overflow: auto;
1199
- border-radius: 18px;
1200
- border: 1px solid rgba(191, 164, 109, 0.2);
1201
- background: rgba(255, 251, 244, 0.98);
1202
- box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
1203
- }
1204
-
1205
- .vf-editor-chat-http-modal-header {
1206
- display: flex;
1207
- align-items: flex-start;
1208
- justify-content: space-between;
1209
- gap: 10px;
1210
- padding: 14px;
1211
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1212
- position: sticky;
1213
- top: 0;
1214
- background: rgba(255, 251, 244, 0.98);
1215
- }
1216
-
1217
- .vf-editor-chat-http-modal-header-main {
1218
- display: flex;
1219
- align-items: center;
1220
- gap: 8px;
1221
- min-width: 0;
1222
- flex-wrap: wrap;
1223
- }
1224
-
1225
- .vf-editor-chat-http-modal-url {
1226
- min-width: 0;
1227
- color: #334155;
1228
- font-size: 0.78rem;
1229
- line-height: 1.4;
1230
- word-break: break-word;
1231
- overflow-wrap: anywhere;
1232
- flex: 1 1 320px;
1233
- }
1234
-
1235
- .vf-editor-chat-http-modal-close {
1236
- all: unset;
1237
- display: inline-flex;
1238
- align-items: center;
1239
- justify-content: center;
1240
- width: 30px;
1241
- min-width: 30px;
1242
- height: 30px;
1243
- border-radius: 999px;
1244
- background: rgba(36, 48, 65, 0.08);
1245
- color: #617087;
1246
- font-size: 1.2rem;
1247
- line-height: 1;
1248
- cursor: pointer;
1249
- }
1250
-
1251
- .vf-editor-chat-http-note,
1252
- .vf-editor-chat-http-label {
1253
- color: #7b879b;
1254
- font-size: 0.68rem;
1255
- font-weight: 800;
1256
- letter-spacing: 0.08em;
1257
- text-transform: uppercase;
1258
- }
1259
-
1260
- .vf-editor-chat-http-block {
1261
- display: grid;
1262
- gap: 4px;
1263
- }
1264
-
1265
- .vf-editor-chat-http-pre {
1266
- margin: 0;
1267
- padding: 6px 7px;
1268
- border-radius: 6px;
1269
- background: rgba(255, 255, 255, 0.9);
1270
- color: #334155;
1271
- font-size: 0.66rem;
1272
- line-height: 1.4;
1273
- white-space: pre-wrap;
1274
- word-break: break-word;
1275
- overflow-wrap: anywhere;
1276
- max-height: 180px;
1277
- overflow: auto;
1278
- }
1279
-
1280
- .vf-editor-chat-message-status,
1281
- .vf-editor-chat-runtime-status {
1282
- display: inline-flex;
1283
- align-items: center;
1284
- gap: 8px;
1285
- color: #8a6b1b;
1286
- font-size: 0.78rem;
1287
- font-weight: 700;
1288
- line-height: 1.35;
1289
- }
1290
-
1291
- .vf-editor-chat-status-dot {
1292
- width: 8px;
1293
- height: 8px;
1294
- border-radius: 999px;
1295
- background: #dbc17a;
1296
- box-shadow: 0 0 0 6px rgba(219, 193, 122, 0.14);
1297
- animation: vf-editor-chat-pulse 1.35s ease-in-out infinite;
1298
- }
1299
-
1300
- .vf-editor-chat-message-loading {
1301
- display: inline-flex;
1302
- align-items: center;
1303
- gap: 5px;
1304
- min-height: 18px;
1305
- }
1306
-
1307
- .vf-editor-chat-message-loading span {
1308
- width: 7px;
1309
- height: 7px;
1310
- border-radius: 999px;
1311
- background: rgba(141, 153, 174, 0.72);
1312
- animation: vf-editor-chat-bounce 1s ease-in-out infinite;
1313
- }
1314
-
1315
- .vf-editor-chat-message-loading span:nth-child(2) {
1316
- animation-delay: 120ms;
1317
- }
1318
-
1319
- .vf-editor-chat-message-loading span:nth-child(3) {
1320
- animation-delay: 240ms;
1321
- }
1322
-
1323
- .vf-editor-chat-message-attachments,
1324
- .vf-editor-chat-composer-attachments {
1325
- display: flex;
1326
- flex-wrap: wrap;
1327
- gap: 8px;
1328
- }
1329
-
1330
- .vf-editor-chat-message-attachments {
1331
- flex-direction: column;
1332
- align-items: flex-start;
1333
- width: 100%;
1334
- min-width: 0;
1335
- }
1336
-
1337
- .vf-editor-chat-message-attachment-row {
1338
- display: grid;
1339
- gap: 8px;
1340
- width: fit-content;
1341
- max-width: 100%;
1342
- min-width: 0;
1343
- }
1344
-
1345
- .vf-editor-chat-message-preview-link {
1346
- display: inline-flex;
1347
- width: fit-content;
1348
- max-width: 100%;
1349
- text-decoration: none;
1350
- }
1351
-
1352
- .vf-editor-chat-message-thumb-button {
1353
- all: unset;
1354
- position: relative;
1355
- display: inline-flex;
1356
- width: fit-content;
1357
- max-width: 100%;
1358
- cursor: zoom-in;
1359
- }
1360
-
1361
- .vf-editor-chat-message-thumb-button.is-image {
1362
- flex: 0 0 86px;
1363
- width: 86px;
1364
- height: 86px;
1365
- border-radius: 8px;
1366
- overflow: hidden;
1367
- background: rgba(255, 255, 255, 0.96);
1368
- }
1369
-
1370
- .vf-editor-chat-message-attachment-thumb {
1371
- width: min(240px, 100%);
1372
- max-width: 100%;
1373
- max-height: 180px;
1374
- border-radius: 12px;
1375
- object-fit: contain;
1376
- border: 1px solid rgba(191, 164, 109, 0.22);
1377
- }
1378
-
1379
- .vf-editor-chat-message-thumb-button.is-image .vf-editor-chat-message-attachment-thumb {
1380
- width: 86px;
1381
- max-width: 86px;
1382
- height: 86px;
1383
- max-height: 86px;
1384
- border-radius: 8px;
1385
- object-fit: cover;
1386
- }
1387
-
1388
- .vf-editor-chat-message-image-rail {
1389
- display: flex;
1390
- gap: 8px;
1391
- width: 100%;
1392
- max-width: 100%;
1393
- min-width: 0;
1394
- overflow-x: auto;
1395
- overflow-y: hidden;
1396
- padding: 1px 2px 5px;
1397
- scrollbar-width: thin;
1398
- }
1399
-
1400
- .vf-editor-chat-message-thumb-fallback {
1401
- display: flex;
1402
- align-items: center;
1403
- justify-content: center;
1404
- box-sizing: border-box;
1405
- width: 86px;
1406
- height: 86px;
1407
- padding: 8px;
1408
- border: 1px dashed rgba(141, 153, 174, 0.5);
1409
- border-radius: 8px;
1410
- background: rgba(248, 244, 235, 0.9);
1411
- color: #7b879b;
1412
- font-size: 0.66rem;
1413
- font-weight: 800;
1414
- line-height: 1.15;
1415
- text-align: center;
1416
- }
1417
-
1418
- .vf-editor-chat-message-video-thumb {
1419
- background: rgba(255, 255, 255, 0.96);
1420
- }
1421
-
1422
- .vf-editor-chat-message-video-play {
1423
- position: absolute;
1424
- left: 50%;
1425
- top: 50%;
1426
- width: 38px;
1427
- height: 38px;
1428
- transform: translate(-50%, -50%);
1429
- display: inline-flex;
1430
- align-items: center;
1431
- justify-content: center;
1432
- border-radius: 999px;
1433
- background: rgba(18, 24, 34, 0.74);
1434
- box-shadow: 0 10px 26px rgba(12, 18, 28, 0.24);
1435
- pointer-events: none;
1436
- }
1437
-
1438
- .vf-editor-chat-message-video-play::before {
1439
- content: "";
1440
- display: block;
1441
- width: 0;
1442
- height: 0;
1443
- margin-left: 3px;
1444
- border-top: 8px solid transparent;
1445
- border-bottom: 8px solid transparent;
1446
- border-left: 12px solid #fff8ee;
1447
- }
1448
-
1449
- .vf-editor-chat-media-modal-backdrop {
1450
- position: fixed;
1451
- inset: 0;
1452
- z-index: 125;
1453
- display: flex;
1454
- align-items: center;
1455
- justify-content: center;
1456
- padding: 20px;
1457
- background: rgba(31, 38, 53, 0.58);
1458
- backdrop-filter: blur(10px);
1459
- }
1460
-
1461
- .vf-editor-chat-media-modal {
1462
- width: min(920px, calc(100vw - 40px));
1463
- max-height: min(88vh, 980px);
1464
- overflow: hidden;
1465
- border-radius: 20px;
1466
- border: 1px solid rgba(191, 164, 109, 0.24);
1467
- background: rgba(255, 251, 244, 0.99);
1468
- box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
1469
- }
1470
-
1471
- .vf-editor-chat-json-modal {
1472
- width: min(1080px, calc(100vw - 40px));
1473
- max-height: min(88vh, 980px);
1474
- overflow: hidden;
1475
- border-radius: 20px;
1476
- border: 1px solid rgba(191, 164, 109, 0.24);
1477
- background: rgba(255, 251, 244, 0.99);
1478
- box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
1479
- }
1480
-
1481
- .vf-editor-chat-json-modal-body {
1482
- padding: 18px;
1483
- max-height: calc(88vh - 76px);
1484
- background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 242, 231, 0.96));
1485
- }
1486
-
1487
- .vf-editor-chat-json-modal-body .vf-editor-chat-json-scroll {
1488
- max-height: calc(88vh - 164px);
1489
- }
1490
-
1491
- .vf-editor-chat-doc-viewer {
1492
- max-height: calc(88vh - 164px);
1493
- overflow: auto;
1494
- padding: 16px 18px;
1495
- border-radius: 12px;
1496
- border: 1px solid rgba(191, 164, 109, 0.16);
1497
- background: rgba(255, 255, 255, 0.92);
1498
- }
1499
-
1500
- .vf-editor-chat-doc-viewer.is-inline {
1501
- max-height: 320px;
1502
- }
1503
-
1504
- .vf-editor-chat-doc-pre {
1505
- margin: 0;
1506
- white-space: pre-wrap;
1507
- word-break: break-word;
1508
- color: #2c3748;
1509
- font-size: 0.8rem;
1510
- line-height: 1.55;
1511
- font-family: "SFMono-Regular", "Menlo", monospace;
1512
- }
1513
-
1514
- .vf-editor-chat-doc-markdown {
1515
- color: #334155;
1516
- font-size: 0.92rem;
1517
- line-height: 1.65;
1518
- }
1519
-
1520
- .vf-editor-chat-doc-markdown > :first-child {
1521
- margin-top: 0;
1522
- }
1523
-
1524
- .vf-editor-chat-doc-markdown > :last-child {
1525
- margin-bottom: 0;
1526
- }
1527
-
1528
- .vf-editor-chat-doc-markdown h1,
1529
- .vf-editor-chat-doc-markdown h2,
1530
- .vf-editor-chat-doc-markdown h3 {
1531
- color: #243041;
1532
- line-height: 1.2;
1533
- margin: 0 0 0.7rem;
1534
- }
1535
-
1536
- .vf-editor-chat-doc-markdown p,
1537
- .vf-editor-chat-doc-markdown ul,
1538
- .vf-editor-chat-doc-markdown ol,
1539
- .vf-editor-chat-doc-markdown blockquote,
1540
- .vf-editor-chat-doc-markdown pre {
1541
- margin: 0 0 0.85rem;
1542
- }
1543
-
1544
- .vf-editor-chat-doc-markdown ul,
1545
- .vf-editor-chat-doc-markdown ol {
1546
- padding-left: 1.2rem;
1547
- }
1548
-
1549
- .vf-editor-chat-doc-markdown blockquote {
1550
- margin-left: 0;
1551
- padding-left: 0.9rem;
1552
- border-left: 3px solid rgba(191, 164, 109, 0.34);
1553
- color: #617087;
1554
- }
1555
-
1556
- .vf-editor-chat-doc-markdown a {
1557
- color: #8a6b1b;
1558
- text-decoration: underline;
1559
- text-underline-offset: 0.16em;
1560
- word-break: break-word;
1561
- }
1562
-
1563
- .vf-editor-chat-media-modal-header {
1564
- display: flex;
1565
- align-items: center;
1566
- justify-content: space-between;
1567
- gap: 12px;
1568
- padding: 14px 16px;
1569
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1570
- }
1571
-
1572
- .vf-editor-chat-media-modal-link {
1573
- min-width: 0;
1574
- flex: 1 1 auto;
1575
- color: #8a6b1b;
1576
- font-size: 0.92rem;
1577
- font-weight: 700;
1578
- line-height: 1.35;
1579
- word-break: break-word;
1580
- overflow-wrap: anywhere;
1581
- }
1582
-
1583
- .vf-editor-chat-media-modal-actions {
1584
- display: inline-flex;
1585
- align-items: center;
1586
- gap: 8px;
1587
- flex: 0 0 auto;
1588
- }
1589
-
1590
- .vf-editor-chat-media-modal-control {
1591
- all: unset;
1592
- display: inline-flex;
1593
- align-items: center;
1594
- justify-content: center;
1595
- width: 32px;
1596
- min-width: 32px;
1597
- height: 32px;
1598
- border-radius: 999px;
1599
- background: rgba(36, 48, 65, 0.08);
1600
- color: #617087;
1601
- font-size: 1.2rem;
1602
- line-height: 1;
1603
- cursor: pointer;
1604
- }
1605
-
1606
- a.vf-editor-chat-media-modal-control {
1607
- text-decoration: none;
1608
- }
1609
-
1610
- .vf-editor-chat-media-modal-control:hover,
1611
- .vf-editor-chat-media-modal-control:focus-visible {
1612
- background: rgba(138, 107, 27, 0.14);
1613
- color: #8a6b1b;
1614
- }
1615
-
1616
- .vf-editor-chat-media-modal-control[data-state="done"] {
1617
- background: rgba(56, 142, 91, 0.14);
1618
- color: #2f7d4f;
1619
- }
1620
-
1621
- .vf-editor-chat-media-modal-control[data-state="error"] {
1622
- background: rgba(161, 68, 68, 0.12);
1623
- color: #a14444;
1624
- }
1625
-
1626
- .vf-editor-chat-media-modal-control svg {
1627
- width: 18px;
1628
- height: 18px;
1629
- }
1630
-
1631
- .vf-editor-chat-media-modal-body {
1632
- display: flex;
1633
- align-items: center;
1634
- justify-content: center;
1635
- padding: 18px;
1636
- max-height: calc(88vh - 76px);
1637
- background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 242, 231, 0.96));
1638
- }
1639
-
1640
- .vf-editor-chat-media-modal-image,
1641
- .vf-editor-chat-media-modal-video {
1642
- width: auto;
1643
- max-width: 100%;
1644
- max-height: calc(88vh - 112px);
1645
- border-radius: 16px;
1646
- border: 1px solid rgba(191, 164, 109, 0.18);
1647
- background: rgba(255, 255, 255, 0.96);
1648
- object-fit: contain;
1649
- }
1650
-
1651
- .vf-editor-upload-drawer-backdrop {
1652
- position: fixed;
1653
- inset: 0;
1654
- z-index: 124;
1655
- background: transparent;
1656
- pointer-events: none;
1657
- }
1658
-
1659
- .vf-editor-upload-drawer {
1660
- box-sizing: border-box;
1661
- width: min(420px, 100vw);
1662
- height: 100vh;
1663
- display: grid;
1664
- grid-template-rows: auto auto minmax(0, 1fr) auto;
1665
- border-right: 1px solid rgba(191, 164, 109, 0.24);
1666
- background: rgba(255, 251, 244, 0.99);
1667
- box-shadow: 24px 0 48px rgba(15, 23, 42, 0.22);
1668
- pointer-events: auto;
1669
- }
1670
-
1671
- .vf-editor-upload-header,
1672
- .vf-editor-upload-footer {
1673
- display: flex;
1674
- align-items: center;
1675
- justify-content: space-between;
1676
- gap: 10px;
1677
- padding: 14px;
1678
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1679
- }
1680
-
1681
- .vf-editor-upload-footer {
1682
- border-top: 1px solid rgba(191, 164, 109, 0.14);
1683
- border-bottom: 0;
1684
- }
1685
-
1686
- .vf-editor-upload-footer-confirm {
1687
- display: inline-flex;
1688
- align-items: center;
1689
- gap: 10px;
1690
- color: #7b879b;
1691
- font-size: 0.78rem;
1692
- font-weight: 850;
1693
- }
1694
-
1695
- .vf-editor-upload-title {
1696
- color: #243041;
1697
- font-size: 1rem;
1698
- font-weight: 800;
1699
- }
1700
-
1701
- .vf-editor-upload-subtitle {
1702
- margin-top: 2px;
1703
- color: #7b879b;
1704
- font-size: 0.76rem;
1705
- font-weight: 700;
1706
- }
1707
-
1708
- .vf-editor-upload-close,
1709
- .vf-editor-upload-file-actions button,
1710
- .vf-editor-upload-file-actions a {
1711
- all: unset;
1712
- display: inline-flex;
1713
- align-items: center;
1714
- justify-content: center;
1715
- width: 30px;
1716
- min-width: 30px;
1717
- height: 30px;
1718
- border-radius: 8px;
1719
- background: rgba(36, 48, 65, 0.08);
1720
- color: #617087;
1721
- font-size: 0.94rem;
1722
- font-weight: 800;
1723
- text-decoration: none;
1724
- cursor: pointer;
1725
- }
1726
-
1727
- .vf-editor-upload-tabs {
1728
- display: grid;
1729
- grid-template-columns: repeat(3, minmax(0, 1fr));
1730
- gap: 6px;
1731
- padding: 10px 12px;
1732
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1733
- }
1734
-
1735
- .vf-editor-upload-tabs button,
1736
- .vf-editor-upload-browser button,
1737
- .vf-editor-upload-footer button,
1738
- .vf-editor-upload-popconfirm button,
1739
- .vf-editor-upload-more {
1740
- all: unset;
1741
- box-sizing: border-box;
1742
- display: inline-flex;
1743
- align-items: center;
1744
- justify-content: center;
1745
- min-height: 30px;
1746
- padding: 0 10px;
1747
- border: 1px solid rgba(191, 164, 109, 0.24);
1748
- border-radius: 8px;
1749
- background: rgba(255, 255, 255, 0.86);
1750
- color: #4b5568;
1751
- font-size: 0.76rem;
1752
- font-weight: 800;
1753
- cursor: pointer;
1754
- }
1755
-
1756
- .vf-editor-upload-tabs button[data-active="true"],
1757
- .vf-editor-upload-confirm {
1758
- background: #d7b84f;
1759
- border-color: rgba(138, 107, 27, 0.36);
1760
- color: #243041;
1761
- }
1762
-
1763
- .vf-editor-upload-footer button:disabled,
1764
- .vf-editor-upload-more:disabled {
1765
- opacity: 0.52;
1766
- cursor: not-allowed;
1767
- }
1768
-
1769
- .vf-editor-upload-more {
1770
- width: 100%;
1771
- }
1772
-
1773
- .vf-editor-upload-body {
1774
- display: grid;
1775
- align-content: start;
1776
- gap: 10px;
1777
- min-height: 0;
1778
- overflow: auto;
1779
- padding: 12px;
1780
- }
1781
-
1782
- .vf-editor-upload-status {
1783
- padding: 9px 10px;
1784
- border-radius: 8px;
1785
- background: rgba(36, 48, 65, 0.07);
1786
- color: #4b5568;
1787
- font-size: 0.76rem;
1788
- font-weight: 800;
1789
- }
1790
-
1791
- .vf-editor-upload-status[data-tone="error"] {
1792
- background: rgba(155, 45, 45, 0.08);
1793
- color: #8b1e1e;
1794
- }
1795
-
1796
- .vf-editor-upload-drop {
1797
- all: unset;
1798
- display: grid;
1799
- gap: 4px;
1800
- place-items: center;
1801
- min-height: 66px;
1802
- padding: 10px 12px;
1803
- border: 1px dashed rgba(138, 107, 27, 0.36);
1804
- border-radius: 10px;
1805
- background: rgba(255, 255, 255, 0.78);
1806
- color: #243041;
1807
- font-size: 0.92rem;
1808
- font-weight: 850;
1809
- cursor: pointer;
1810
- }
1811
-
1812
- .vf-editor-upload-drop span {
1813
- color: #7b879b;
1814
- font-size: 0.74rem;
1815
- font-weight: 700;
1816
- }
1817
-
1818
- .vf-editor-upload-browser {
1819
- display: grid;
1820
- gap: 8px;
1821
- }
1822
-
1823
- .vf-editor-upload-browser-toolbar {
1824
- display: grid;
1825
- grid-template-columns: minmax(0, 1fr) auto;
1826
- align-items: center;
1827
- gap: 6px;
1828
- }
1829
-
1830
- .vf-editor-upload-browser-toolbar button:disabled {
1831
- opacity: 0.5;
1832
- cursor: not-allowed;
1833
- }
1834
-
1835
- .vf-editor-upload-breadcrumb {
1836
- display: flex;
1837
- align-items: center;
1838
- min-width: 0;
1839
- overflow-x: auto;
1840
- gap: 2px;
1841
- padding-bottom: 1px;
1842
- color: #7b879b;
1843
- font-size: 0.78rem;
1844
- font-weight: 850;
1845
- }
1846
-
1847
- .vf-editor-upload-breadcrumb button {
1848
- all: unset;
1849
- flex: 0 0 auto;
1850
- max-width: 120px;
1851
- padding: 3px 7px;
1852
- border-radius: 6px;
1853
- overflow: hidden;
1854
- text-overflow: ellipsis;
1855
- white-space: nowrap;
1856
- color: #4b5568;
1857
- cursor: pointer;
1858
- }
1859
-
1860
- .vf-editor-upload-breadcrumb-segment {
1861
- display: inline-flex;
1862
- align-items: center;
1863
- gap: 2px;
1864
- min-width: 0;
1865
- }
1866
-
1867
- .vf-editor-upload-folder-grid {
1868
- display: grid;
1869
- gap: 6px;
1870
- }
1871
-
1872
- .vf-editor-upload-folder-row {
1873
- position: relative;
1874
- display: grid;
1875
- grid-template-columns: minmax(0, 1fr) auto;
1876
- align-items: center;
1877
- gap: 10px;
1878
- padding: 9px 10px;
1879
- border: 1px solid rgba(191, 164, 109, 0.18);
1880
- border-radius: 8px;
1881
- background: rgba(255, 255, 255, 0.72);
1882
- }
1883
-
1884
- .vf-editor-upload-folder-open {
1885
- justify-content: flex-start !important;
1886
- gap: 10px;
1887
- min-width: 0;
1888
- border: 0 !important;
1889
- background: transparent !important;
1890
- padding: 0 !important;
1891
- color: #243041 !important;
1892
- }
1893
-
1894
- .vf-editor-upload-folder-open span:last-child {
1895
- min-width: 0;
1896
- overflow: hidden;
1897
- text-overflow: ellipsis;
1898
- white-space: nowrap;
1899
- }
1900
-
1901
- .vf-editor-upload-folder-icon {
1902
- position: relative;
1903
- display: inline-flex;
1904
- align-items: center;
1905
- justify-content: center;
1906
- width: 34px;
1907
- min-width: 34px;
1908
- height: 25px;
1909
- border-radius: 4px;
1910
- background: #dbc17a;
1911
- box-shadow: inset 0 -1px 0 rgba(138, 107, 27, 0.18);
1912
- }
1913
-
1914
- .vf-editor-upload-folder-icon::before {
1915
- content: "";
1916
- position: absolute;
1917
- left: 4px;
1918
- top: -6px;
1919
- width: 16px;
1920
- height: 8px;
1921
- border-radius: 4px 4px 0 0;
1922
- background: #e4cd88;
1923
- }
1924
-
1925
- .vf-editor-upload-folder-menu-button {
1926
- width: auto;
1927
- min-width: 34px;
1928
- padding-left: 9px !important;
1929
- padding-right: 9px !important;
1930
- }
1931
-
1932
- .vf-editor-upload-folder-menu {
1933
- position: absolute;
1934
- right: 8px;
1935
- top: calc(100% - 2px);
1936
- z-index: 3;
1937
- display: grid;
1938
- gap: 4px;
1939
- min-width: 132px;
1940
- padding: 6px;
1941
- border: 1px solid rgba(191, 164, 109, 0.2);
1942
- border-radius: 10px;
1943
- background: #fffbf4;
1944
- box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
1945
- }
1946
-
1947
- .vf-editor-upload-folder-menu button {
1948
- justify-content: flex-start;
1949
- }
1950
-
1951
- .vf-editor-upload-folder-menu button[data-danger="true"] {
1952
- color: #8b1e1e;
1953
- }
1954
-
1955
- .vf-editor-upload-folder-dialog {
1956
- display: grid;
1957
- gap: 9px;
1958
- padding: 10px;
1959
- border: 1px solid rgba(191, 164, 109, 0.22);
1960
- border-radius: 10px;
1961
- background: rgba(255, 255, 255, 0.86);
1962
- box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
1963
- }
1964
-
1965
- .vf-editor-upload-folder-dialog-title {
1966
- color: #243041;
1967
- font-size: 0.82rem;
1968
- font-weight: 850;
1969
- }
1970
-
1971
- .vf-editor-upload-folder-dialog-copy {
1972
- color: #4b5568;
1973
- font-size: 0.78rem;
1974
- font-weight: 750;
1975
- line-height: 1.35;
1976
- overflow-wrap: anywhere;
1977
- }
1978
-
1979
- .vf-editor-upload-folder-dialog input {
1980
- box-sizing: border-box;
1981
- width: 100%;
1982
- height: 34px;
1983
- padding: 0 9px;
1984
- border: 1px solid rgba(191, 164, 109, 0.24);
1985
- border-radius: 8px;
1986
- background: #fff;
1987
- color: #243041;
1988
- font-size: 0.8rem;
1989
- font-weight: 750;
1990
- }
1991
-
1992
- .vf-editor-upload-folder-dialog-actions {
1993
- display: flex;
1994
- justify-content: flex-end;
1995
- gap: 6px;
1996
- }
1997
-
1998
- .vf-editor-upload-folder-dialog-actions button {
1999
- all: unset;
2000
- box-sizing: border-box;
2001
- display: inline-flex;
2002
- align-items: center;
2003
- justify-content: center;
2004
- min-height: 30px;
2005
- padding: 0 10px;
2006
- border: 1px solid rgba(191, 164, 109, 0.24);
2007
- border-radius: 8px;
2008
- background: rgba(255, 255, 255, 0.86);
2009
- color: #4b5568;
2010
- font-size: 0.76rem;
2011
- font-weight: 800;
2012
- cursor: pointer;
2013
- }
2014
-
2015
- .vf-editor-upload-folder-dialog-actions button[data-danger="true"] {
2016
- border-color: rgba(155, 45, 45, 0.22);
2017
- background: rgba(155, 45, 45, 0.08);
2018
- color: #8b1e1e;
2019
- }
2020
-
2021
- .vf-editor-upload-list {
2022
- display: grid;
2023
- gap: 8px;
2024
- }
2025
-
2026
- .vf-editor-upload-file-card {
2027
- position: relative;
2028
- display: grid;
2029
- grid-template-columns: minmax(0, 1fr) auto;
2030
- align-items: center;
2031
- gap: 8px;
2032
- min-width: 0;
2033
- padding: 8px;
2034
- border: 1px solid rgba(191, 164, 109, 0.18);
2035
- border-radius: 10px;
2036
- background: rgba(255, 255, 255, 0.82);
2037
- }
2038
-
2039
- .vf-editor-upload-file-card[data-selected="true"] {
2040
- border-color: rgba(138, 107, 27, 0.72);
2041
- background: rgba(255, 248, 226, 0.94);
2042
- box-shadow: inset 0 0 0 2px rgba(215, 184, 79, 0.44);
2043
- }
2044
-
2045
- .vf-editor-upload-file-select {
2046
- all: unset;
2047
- display: grid;
2048
- grid-template-columns: auto minmax(0, 1fr);
2049
- align-items: center;
2050
- gap: 9px;
2051
- min-width: 0;
2052
- cursor: pointer;
2053
- }
2054
-
2055
- .vf-editor-upload-file-thumb,
2056
- .vf-editor-upload-file-icon {
2057
- width: 44px;
2058
- min-width: 44px;
2059
- height: 44px;
2060
- border-radius: 8px;
2061
- border: 1px solid rgba(191, 164, 109, 0.2);
2062
- background: rgba(252, 248, 240, 0.94);
2063
- }
2064
-
2065
- .vf-editor-upload-file-thumb {
2066
- object-fit: cover;
2067
- }
2068
-
2069
- .vf-editor-upload-file-icon {
2070
- display: inline-flex;
2071
- align-items: center;
2072
- justify-content: center;
2073
- color: #617087;
2074
- font-weight: 850;
2075
- }
2076
-
2077
- .vf-editor-upload-file-main {
2078
- display: grid;
2079
- gap: 3px;
2080
- min-width: 0;
2081
- }
2082
-
2083
- .vf-editor-upload-file-name,
2084
- .vf-editor-upload-file-meta {
2085
- min-width: 0;
2086
- overflow: hidden;
2087
- text-overflow: ellipsis;
2088
- white-space: nowrap;
2089
- }
2090
-
2091
- .vf-editor-upload-file-name {
2092
- color: #243041;
2093
- font-size: 0.8rem;
2094
- font-weight: 850;
2095
- }
2096
-
2097
- .vf-editor-upload-file-meta {
2098
- color: #7b879b;
2099
- font-size: 0.7rem;
2100
- font-weight: 700;
2101
- }
2102
-
2103
- .vf-editor-upload-file-actions {
2104
- display: inline-flex;
2105
- align-items: center;
2106
- gap: 4px;
2107
- }
2108
-
2109
- .vf-editor-upload-file-actions svg {
2110
- width: 18px;
2111
- height: 18px;
2112
- fill: none;
2113
- stroke: currentColor;
2114
- stroke-width: 2;
2115
- stroke-linecap: round;
2116
- stroke-linejoin: round;
2117
- }
2118
-
2119
- .vf-editor-upload-selection-indicator {
2120
- display: inline-flex;
2121
- align-items: center;
2122
- justify-content: center;
2123
- width: 26px;
2124
- min-width: 26px;
2125
- height: 26px;
2126
- border: 2px solid rgba(123, 135, 155, 0.42);
2127
- border-radius: 7px;
2128
- color: #243041;
2129
- font-size: 0.9rem;
2130
- font-weight: 900;
2131
- background: rgba(255, 255, 255, 0.82);
2132
- }
2133
-
2134
- .vf-editor-upload-selection-indicator[data-selected="true"] {
2135
- border-color: rgba(138, 107, 27, 0.72);
2136
- background: #d7b84f;
2137
- }
2138
-
2139
- .vf-editor-upload-popconfirm {
2140
- position: absolute;
2141
- right: 8px;
2142
- top: calc(100% - 2px);
2143
- z-index: 2;
2144
- display: grid;
2145
- gap: 6px;
2146
- min-width: 180px;
2147
- padding: 8px;
2148
- border: 1px solid rgba(191, 164, 109, 0.2);
2149
- border-radius: 10px;
2150
- background: #fffbf4;
2151
- box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
2152
- color: #4b5568;
2153
- font-size: 0.76rem;
2154
- font-weight: 800;
2155
- }
2156
-
2157
- .vf-editor-upload-popconfirm button[data-danger="true"] {
2158
- border-color: rgba(155, 45, 45, 0.22);
2159
- background: rgba(155, 45, 45, 0.08);
2160
- color: #8b1e1e;
2161
- }
2162
-
2163
- .vf-editor-upload-empty {
2164
- padding: 20px 10px;
2165
- border: 1px dashed rgba(191, 164, 109, 0.24);
2166
- border-radius: 10px;
2167
- color: #7b879b;
2168
- font-size: 0.8rem;
2169
- font-weight: 800;
2170
- text-align: center;
2171
- }
2172
-
2173
- .vf-editor-chat-attachment {
2174
- display: inline-flex;
2175
- align-items: center;
2176
- gap: 8px;
2177
- min-height: 32px;
2178
- padding: 0 10px;
2179
- border-radius: 999px;
2180
- border: 1px solid rgba(191, 164, 109, 0.24);
2181
- background: rgba(252, 248, 240, 0.98);
2182
- color: #4b5568;
2183
- max-width: 100%;
2184
- }
2185
-
2186
- .vf-editor-chat-attachment-name {
2187
- display: inline-flex;
2188
- min-width: 0;
2189
- overflow: hidden;
2190
- text-overflow: ellipsis;
2191
- white-space: nowrap;
2192
- font-size: 0.78rem;
2193
- font-weight: 700;
2194
- }
2195
-
2196
- .vf-editor-chat-attachment-remove {
2197
- display: inline-flex;
2198
- align-items: center;
2199
- justify-content: center;
2200
- width: 18px;
2201
- height: 18px;
2202
- padding: 0;
2203
- border: 0;
2204
- border-radius: 999px;
2205
- background: rgba(36, 48, 65, 0.08);
2206
- color: #617087;
2207
- cursor: pointer;
2208
- box-shadow: none;
2209
- min-height: 0;
2210
- }
2211
-
2212
- .vf-editor-chat-footer {
2213
- padding: 0;
2214
- border-top: 1px solid rgba(191, 164, 109, 0.14);
2215
- background: rgba(255, 251, 244, 0.9);
2216
- backdrop-filter: blur(16px);
2217
- }
2218
-
2219
- .vf-editor-chat-composer {
2220
- display: grid;
2221
- gap: 6px;
2222
- padding: 4px 6px;
2223
- border: 0;
2224
- border-radius: 0;
2225
- background: rgba(255, 255, 255, 0.92);
2226
- box-shadow: none;
2227
- }
2228
-
2229
- .vf-editor-chat-composer-attachments-strip {
2230
- display: flex;
2231
- gap: 8px;
2232
- overflow-x: auto;
2233
- overflow-y: hidden;
2234
- padding-bottom: 2px;
2235
- scrollbar-width: thin;
2236
- }
2237
-
2238
- .vf-editor-chat-composer-attachment-item {
2239
- display: flex;
2240
- align-items: center;
2241
- gap: 8px;
2242
- flex: 0 0 auto;
2243
- min-width: 0;
2244
- max-width: 190px;
2245
- padding: 6px 8px;
2246
- border: 1px solid rgba(191, 164, 109, 0.22);
2247
- border-radius: 12px;
2248
- background: rgba(252, 248, 240, 0.94);
2249
- }
2250
-
2251
- .vf-editor-chat-composer-attachment-thumb,
2252
- .vf-editor-chat-composer-attachment-file {
2253
- width: 42px;
2254
- min-width: 42px;
2255
- height: 42px;
2256
- border-radius: 8px;
2257
- border: 1px solid rgba(191, 164, 109, 0.2);
2258
- background: rgba(255, 255, 255, 0.92);
2259
- }
2260
-
2261
- .vf-editor-chat-composer-attachment-thumb {
2262
- object-fit: cover;
2263
- }
2264
-
2265
- .vf-editor-chat-composer-attachment-file {
2266
- display: inline-flex;
2267
- align-items: center;
2268
- justify-content: center;
2269
- color: #617087;
2270
- font-size: 0.82rem;
2271
- font-weight: 800;
2272
- }
2273
-
2274
- .vf-editor-chat-composer-attachment-meta {
2275
- min-width: 0;
2276
- flex: 1 1 auto;
2277
- }
2278
-
2279
- .vf-editor-chat-composer-attachment-name {
2280
- display: block;
2281
- overflow: hidden;
2282
- text-overflow: ellipsis;
2283
- white-space: nowrap;
2284
- color: #334155;
2285
- font-size: 0.76rem;
2286
- font-weight: 700;
2287
- line-height: 1.2;
2288
- }
2289
-
2290
- .vf-editor-chat-composer-attachment-remove {
2291
- all: unset;
2292
- display: inline-flex;
2293
- align-items: center;
2294
- justify-content: center;
2295
- width: 16px;
2296
- min-width: 16px;
2297
- height: 16px;
2298
- padding: 0;
2299
- border: 0;
2300
- border-radius: 999px;
2301
- background: transparent;
2302
- color: #7b879b;
2303
- box-shadow: none;
2304
- font-size: 0.95rem;
2305
- line-height: 1;
2306
- }
2307
-
2308
- .vf-editor-chat-composer-row {
2309
- display: grid;
2310
- grid-template-columns: auto minmax(0, 1fr) auto;
2311
- align-items: flex-start;
2312
- gap: 6px;
2313
- }
2314
-
2315
- .vf-editor-chat-attach-button,
2316
- .vf-editor-chat-send-button {
2317
- all: unset;
2318
- display: inline-flex;
2319
- align-items: center;
2320
- justify-content: center;
2321
- min-height: 32px;
2322
- height: 32px;
2323
- border-radius: 8px;
2324
- border: 1px solid rgba(191, 164, 109, 0.34);
2325
- background: rgba(255, 255, 255, 0.92);
2326
- color: #243041;
2327
- font-weight: 700;
2328
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
2329
- }
2330
-
2331
- .vf-editor-chat-attach-button {
2332
- width: 32px;
2333
- min-width: 32px;
2334
- padding: 0;
2335
- font-size: 1.1rem;
2336
- line-height: 1;
2337
- }
2338
-
2339
- .vf-editor-chat-send-button {
2340
- padding: 0 12px;
2341
- background: #dbc17a;
2342
- }
2343
-
2344
- .vf-editor-chat-attach-button:disabled,
2345
- .vf-editor-chat-send-button:disabled,
2346
- .vf-editor-chat-new-thread:disabled {
2347
- opacity: 0.58;
2348
- cursor: not-allowed;
2349
- }
2350
-
2351
- .vf-editor-chat-input {
2352
- all: unset;
2353
- display: block;
2354
- width: 100%;
2355
- min-height: 96px;
2356
- max-height: 180px;
2357
- padding: 10px 0;
2358
- background: transparent;
2359
- box-shadow: none;
2360
- color: #243041;
2361
- font-size: 0.88rem;
2362
- line-height: 1.45;
2363
- resize: none;
2364
- border: 0;
2365
- }
2366
-
2367
- .vf-editor-chat-input:focus {
2368
- border: 0;
2369
- box-shadow: none;
2370
- }
2371
-
2372
- .vf-editor-chat-input::placeholder {
2373
- color: #7b879b;
2374
- }
2375
-
2376
- .vf-editor-chat-error {
2377
- margin: 10px 10px 0;
2378
- padding: 12px 14px;
2379
- border-radius: 10px;
2380
- border: 1px solid rgba(155, 45, 45, 0.18);
2381
- background: rgba(155, 45, 45, 0.08);
2382
- color: #8b1e1e;
2383
- font-size: 0.88rem;
2384
- }
2385
-
2386
- @keyframes vf-editor-chat-bounce {
2387
- 0%, 80%, 100% {
2388
- transform: translateY(0);
2389
- opacity: 0.55;
2390
- }
2391
- 40% {
2392
- transform: translateY(-3px);
2393
- opacity: 1;
2394
- }
2395
- }
2396
-
2397
- @keyframes vf-editor-chat-pulse {
2398
- 0%, 100% {
2399
- box-shadow: 0 0 0 0 rgba(219, 193, 122, 0.26);
2400
- }
2401
- 50% {
2402
- box-shadow: 0 0 0 6px rgba(219, 193, 122, 0.08);
2403
- }
2404
- }
2405
-
2406
- @media (max-width: 1180px) {
2407
- .editor-workbench {
2408
- padding-top: 0;
2409
- padding-right: 0;
2410
- padding-bottom: 18px;
2411
- }
2412
-
2413
- .editor-main {
2414
- overflow-x: hidden;
2415
- overflow-y: auto;
2416
- }
2417
-
2418
- .editor-floating-nav {
2419
- position: sticky;
2420
- top: 16px;
2421
- left: auto;
2422
- max-width: none;
2423
- margin: 0 0 16px;
2424
- }
2425
-
2426
- .editor-right-rail {
2427
- position: static;
2428
- width: auto;
2429
- height: 45vh;
2430
- min-height: 240px;
2431
- margin-top: 18px;
2432
- }
2433
-
2434
- .vf-editor-chat-thread-chip {
2435
- max-width: 180px;
2436
- }
2437
-
2438
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble,
2439
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
2440
- max-width: min(100%, 340px);
2441
- }
2442
- }
2443
-
2444
- @media (max-width: 1024px) {
2445
- .editor-workbench {
2446
- padding-bottom: 12px;
2447
- }
2448
-
2449
- .editor-floating-nav {
2450
- top: 8px;
2451
- grid-template-columns: auto minmax(0, 1fr) auto;
2452
- gap: 8px;
2453
- padding: 8px;
2454
- border-radius: 18px;
2455
- flex-wrap: nowrap;
2456
- }
2457
-
2458
- .editor-nav-title {
2459
- min-width: 0;
2460
- overflow: hidden;
2461
- text-overflow: ellipsis;
2462
- white-space: nowrap;
2463
- }
2464
-
2465
- .editor-nav-account {
2466
- display: none;
2467
- }
2468
-
2469
- .editor-right-rail {
2470
- position: fixed !important;
2471
- inset: 0;
2472
- z-index: 110;
2473
- width: 100%;
2474
- height: 100svh;
2475
- min-height: 0;
2476
- margin: 0;
2477
- border-radius: 0;
2478
- overflow: visible;
2479
- pointer-events: none;
2480
- }
2481
-
2482
- .editor-chat-panel {
2483
- height: 100%;
2484
- border-left: 0;
2485
- background: transparent;
2486
- pointer-events: none;
2487
- }
2488
-
2489
- .vf-editor-chat-shell {
2490
- height: 100%;
2491
- min-height: 0;
2492
- pointer-events: none;
2493
- }
2494
-
2495
- .vf-editor-chat-shell[data-mobile-open="true"] {
2496
- pointer-events: auto;
2497
- }
2498
-
2499
- .vf-editor-chat-mobile-fab {
2500
- all: unset;
2501
- position: fixed;
2502
- right: 18px;
2503
- bottom: calc(18px + env(safe-area-inset-bottom));
2504
- z-index: 2;
2505
- display: inline-flex;
2506
- align-items: center;
2507
- justify-content: center;
2508
- width: 58px;
2509
- height: 58px;
2510
- border-radius: 999px;
2511
- border: 1px solid rgba(255, 255, 255, 0.86);
2512
- background:
2513
- radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.36), transparent 30%),
2514
- linear-gradient(180deg, #e2c675, #c79f3b);
2515
- color: #243041;
2516
- box-shadow:
2517
- 0 18px 36px rgba(102, 82, 43, 0.24),
2518
- 0 0 0 1px rgba(102, 82, 43, 0.14) inset;
2519
- pointer-events: auto;
2520
- transition:
2521
- transform 160ms ease,
2522
- opacity 160ms ease,
2523
- box-shadow 160ms ease;
2524
- }
2525
-
2526
- .vf-editor-chat-mobile-fab:active {
2527
- transform: translateY(1px) scale(0.98);
2528
- }
2529
-
2530
- .vf-editor-chat-mobile-fab svg {
2531
- width: 29px;
2532
- height: 29px;
2533
- fill: none;
2534
- stroke: currentColor;
2535
- stroke-width: 1.9;
2536
- stroke-linecap: round;
2537
- stroke-linejoin: round;
2538
- }
2539
-
2540
- .vf-editor-chat-shell[data-mobile-open="true"] .vf-editor-chat-mobile-fab {
2541
- opacity: 0;
2542
- transform: scale(0.86);
2543
- pointer-events: none;
2544
- }
2545
-
2546
- .vf-editor-chat-thread {
2547
- position: fixed;
2548
- inset: 0;
2549
- z-index: 1;
2550
- display: none;
2551
- width: 100%;
2552
- height: 100svh;
2553
- border-radius: 0;
2554
- background:
2555
- radial-gradient(circle at top right, rgba(219, 193, 122, 0.12), transparent 30%),
2556
- linear-gradient(180deg, rgba(255, 252, 247, 0.99), rgba(252, 247, 238, 0.98));
2557
- box-shadow: none;
2558
- pointer-events: auto;
2559
- }
2560
-
2561
- .vf-editor-chat-shell[data-mobile-open="true"] .vf-editor-chat-thread {
2562
- display: flex;
2563
- }
2564
-
2565
- .vf-editor-chat-minimize {
2566
- all: unset;
2567
- display: inline-flex;
2568
- align-items: center;
2569
- justify-content: center;
2570
- flex: 0 0 auto;
2571
- width: 34px;
2572
- height: 34px;
2573
- border-radius: 999px;
2574
- border: 1px solid rgba(191, 164, 109, 0.24);
2575
- background: rgba(255, 255, 255, 0.9);
2576
- color: #617087;
2577
- font-size: 1.35rem;
2578
- line-height: 1;
2579
- }
2580
-
2581
- .vf-editor-chat-header-row {
2582
- align-items: flex-start;
2583
- justify-content: flex-start;
2584
- gap: 8px;
2585
- }
2586
-
2587
- .vf-editor-chat-header-row > div:first-child {
2588
- flex: 1 1 auto;
2589
- min-width: 0;
2590
- }
2591
-
2592
- .vf-editor-chat-new-thread,
2593
- .vf-editor-chat-minimize {
2594
- flex: 0 0 auto;
2595
- }
2596
-
2597
- .vf-editor-chat-header,
2598
- .vf-editor-chat-tracer-bar,
2599
- .vf-editor-chat-footer {
2600
- padding-left: 12px;
2601
- padding-right: 12px;
2602
- }
2603
-
2604
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble,
2605
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
2606
- max-width: 100%;
2607
- }
2608
-
2609
- .vf-editor-chat-thread-chip {
2610
- max-width: 72vw;
2611
- }
2612
-
2613
- .vf-editor-chat-shell[data-layout="brainstorm"] {
2614
- pointer-events: auto;
2615
- }
2616
-
2617
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-mobile-fab {
2618
- display: none;
2619
- }
2620
-
2621
- .vf-editor-chat-shell[data-layout="brainstorm"] .editor-chat-panel,
2622
- .vf-editor-chat-shell[data-layout="brainstorm"] {
2623
- background: transparent;
2624
- }
2625
-
2626
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-brainstorm-layout {
2627
- grid-template-columns: minmax(0, 1fr);
2628
- }
2629
-
2630
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
2631
- position: relative;
2632
- inset: auto;
2633
- display: grid;
2634
- grid-template-rows: auto minmax(0, 1fr) auto;
2635
- width: 100%;
2636
- height: 100%;
2637
- min-height: 0;
2638
- border-radius: 0;
2639
- }
2640
-
2641
-
2642
- .vf-editor-chat-history-close,
2643
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
2644
- display: inline-flex;
2645
- }
2646
-
2647
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
2648
- padding-left: 12px;
2649
- padding-right: 12px;
2650
- }
2651
- }
2652
-
2653
- @media (min-width: 1025px) {
2654
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
2655
- display: none;
2656
- }
2657
- }
2658
- `;
2659
- export const TEMPLATE_EDITOR_SHELL_SCRIPT = `
2660
- document.addEventListener("click", async (event) => {
2661
- const target = event.target;
2662
- if (!(target instanceof HTMLElement)) {
2663
- return;
2664
- }
2665
- const button = target.closest("[data-editor-copy]");
2666
- if (!(button instanceof HTMLButtonElement)) {
2667
- return;
2668
- }
2669
- const value = button.getAttribute("data-editor-copy") || "";
2670
- if (!value) {
2671
- return;
2672
- }
2673
- try {
2674
- await navigator.clipboard.writeText(value);
2675
- button.setAttribute("data-copied", "true");
2676
- const original = button.textContent || "";
2677
- button.textContent = "Copied";
2678
- window.setTimeout(() => {
2679
- button.textContent = original;
2680
- button.setAttribute("data-copied", "false");
2681
- }, 1200);
2682
- } catch {}
2683
- });
2684
- `;
2685
- export function renderTemplateEditorChrome(input) {
2686
- const email = input.account?.email?.trim() || "";
2687
- const displayName = resolveAccountDisplayName(input.account);
2688
- const accountMeta = email
2689
- ? `<div class="editor-nav-account">${escapeHtml(displayName)} <span>(${escapeHtml(email)})</span></div>`
2690
- : "";
2691
- return `
2692
- <nav class="editor-floating-nav" aria-label="Editor workspace">
2693
- <a class="editor-back-link" href="${escapeAttribute(input.backHref)}">Back to Studio</a>
2694
- <div class="editor-nav-title">${escapeHtml(input.templateTitle)}</div>
2695
- ${accountMeta}
2696
- </nav>
2697
- <aside class="editor-right-rail" aria-label="Layer copilot panel">
2698
- <div class="editor-chat-panel" data-template-editor-chat-root></div>
2699
- </aside>
2700
- `;
2701
- }
2702
- //# sourceMappingURL=template-editor-shell.js.map