Skip to content

Commit d57daff

Browse files
yash-pouranikyash-pouranik
committed
style(ui): unbox Create Collection UI to an open, floating ChatGPT-style conversational workspace
1 parent 5ed0158 commit d57daff

2 files changed

Lines changed: 190 additions & 202 deletions

File tree

‎apps/web-dashboard/src/components/CollectionCreatorAgent.jsx‎

Lines changed: 44 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -161,44 +161,37 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
161161
};
162162

163163
return (
164-
<div className="flex flex-col lg:flex-row gap-6 h-[72vh] min-h-[560px] font-sans">
164+
<div className="flex flex-col lg:flex-row gap-8 h-[calc(100vh-170px)] min-h-[580px] font-sans">
165165

166-
{/* Chat Workspace - Left */}
167-
<div
168-
className="flex flex-col flex-1 h-full rounded-xl overflow-hidden relative"
169-
style={{
170-
backgroundColor: 'var(--color-bg-card)',
171-
border: '1px solid var(--color-border)',
172-
display: 'flex',
173-
flexDirection: 'column'
174-
}}
175-
>
176-
{/* Messages Container */}
166+
{/* Open Chat Stream & Floating Composer - Left */}
167+
<div className="flex flex-col flex-1 h-full relative" style={{ display: 'flex', flexDirection: 'column' }}>
168+
169+
{/* Messages Stream (No container box) */}
177170
<div
178171
className="flex-1 overflow-y-auto custom-scrollbar"
179172
style={{
180-
padding: '1.5rem',
173+
paddingRight: '1rem',
174+
paddingBottom: '1rem',
181175
display: 'flex',
182176
flexDirection: 'column',
183-
gap: '1.25rem',
184-
backgroundColor: 'var(--color-bg-main)'
177+
gap: '1.25rem'
185178
}}
186179
>
187180
{messages.map((msg, idx) => (
188181
<div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
189182
<div
190183
style={{
191184
maxWidth: '85%',
192-
padding: '12px 18px',
193-
fontSize: '0.875rem',
185+
padding: '14px 20px',
186+
fontSize: '0.9rem',
194187
lineHeight: '1.6',
195-
borderRadius: '16px',
196-
borderBottomRightRadius: msg.role === 'user' ? '4px' : '16px',
197-
borderBottomLeftRadius: msg.role === 'assistant' ? '4px' : '16px',
198-
backgroundColor: msg.role === 'user' ? 'var(--color-primary)' : 'var(--color-bg-input)',
188+
borderRadius: '18px',
189+
borderBottomRightRadius: msg.role === 'user' ? '4px' : '18px',
190+
borderBottomLeftRadius: msg.role === 'assistant' ? '4px' : '18px',
191+
backgroundColor: msg.role === 'user' ? 'var(--color-primary)' : 'var(--color-bg-card)',
199192
color: msg.role === 'user' ? '#000' : 'var(--color-text-main)',
200193
border: msg.role === 'assistant' ? '1px solid var(--color-border)' : 'none',
201-
boxShadow: msg.role === 'assistant' ? '0 2px 8px rgba(0,0,0,0.04)' : '0 4px 14px rgba(62,207,142,0.2)',
194+
boxShadow: msg.role === 'assistant' ? '0 2px 10px rgba(0,0,0,0.06)' : '0 4px 14px rgba(62,207,142,0.25)',
202195
whiteSpace: 'pre-wrap'
203196
}}
204197
>
@@ -210,9 +203,9 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
210203
<div className="flex justify-start">
211204
<div
212205
style={{
213-
backgroundColor: 'var(--color-bg-input)',
214-
padding: '12px 18px',
215-
borderRadius: '16px',
206+
backgroundColor: 'var(--color-bg-card)',
207+
padding: '12px 20px',
208+
borderRadius: '18px',
216209
borderBottomLeftRadius: '4px',
217210
border: '1px solid var(--color-border)',
218211
display: 'flex',
@@ -221,7 +214,7 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
221214
}}
222215
>
223216
<div className="spinner-small" style={{ width: '14px', height: '14px', borderTopColor: 'var(--color-primary)' }}></div>
224-
<span style={{ fontSize: '0.825rem', color: 'var(--color-text-muted)', fontWeight: 500 }}>
217+
<span style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', fontWeight: 500 }}>
225218
AI is designing your schema...
226219
</span>
227220
</div>
@@ -230,24 +223,18 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
230223
<div ref={messagesEndRef} />
231224
</div>
232225

233-
{/* Anchored Composer - Bottom */}
234-
<div
235-
style={{
236-
padding: '1rem 1.25rem 1.25rem',
237-
borderTop: '1px solid var(--color-border)',
238-
backgroundColor: 'var(--color-bg-card)',
239-
flexShrink: 0
240-
}}
241-
>
226+
{/* Floating Bottom Composer */}
227+
<div style={{ marginTop: 'auto', paddingTop: '12px', flexShrink: 0 }}>
242228
<div
243229
style={{
244230
position: 'relative',
245231
display: 'flex',
246232
alignItems: 'flex-end',
247-
backgroundColor: 'var(--color-bg-input)',
233+
backgroundColor: 'var(--color-bg-card)',
248234
border: '1px solid var(--color-border)',
249-
borderRadius: '16px',
250-
padding: '8px 12px 8px 16px',
235+
borderRadius: '20px',
236+
padding: '10px 14px 10px 20px',
237+
boxShadow: '0 8px 32px rgba(0,0,0,0.25)',
251238
transition: 'border-color 0.2s ease, box-shadow 0.2s ease'
252239
}}
253240
>
@@ -266,10 +253,10 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
266253
border: 'none',
267254
outline: 'none',
268255
color: 'var(--color-text-main)',
269-
fontSize: '0.875rem',
256+
fontSize: '0.9rem',
270257
lineHeight: '1.5',
271258
resize: 'none',
272-
maxHeight: '120px',
259+
maxHeight: '130px',
273260
minHeight: '26px',
274261
padding: '4px 0'
275262
}}
@@ -282,17 +269,17 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
282269
display: 'flex',
283270
alignItems: 'center',
284271
justifyContent: 'center',
285-
width: '34px',
286-
height: '34px',
287-
borderRadius: '10px',
288-
backgroundColor: (inputValue.trim() && aiStatus !== 'loading' && iterationsLeft !== 0) ? 'var(--color-primary)' : 'transparent',
272+
width: '36px',
273+
height: '36px',
274+
borderRadius: '50%',
275+
backgroundColor: (inputValue.trim() && aiStatus !== 'loading' && iterationsLeft !== 0) ? 'var(--color-primary)' : 'var(--color-bg-input)',
289276
color: (inputValue.trim() && aiStatus !== 'loading' && iterationsLeft !== 0) ? '#000' : 'var(--color-text-muted)',
290-
border: 'none',
277+
border: '1px solid var(--color-border)',
291278
cursor: (inputValue.trim() && aiStatus !== 'loading' && iterationsLeft !== 0) ? 'pointer' : 'default',
292-
opacity: (!inputValue.trim() || aiStatus === 'loading' || iterationsLeft === 0) ? 0.35 : 1,
279+
opacity: (!inputValue.trim() || aiStatus === 'loading' || iterationsLeft === 0) ? 0.4 : 1,
293280
transition: 'all 0.2s ease',
294281
flexShrink: 0,
295-
marginLeft: '8px'
282+
marginLeft: '10px'
296283
}}
297284
title="Send message (Enter)"
298285
>
@@ -303,16 +290,16 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
303290
</div>
304291
</div>
305292

306-
{/* Schema Preview Panel - Right */}
293+
{/* Floating Schema Preview Panel - Right */}
307294
<div
308-
className="flex flex-col w-full lg:w-[48%] h-full rounded-xl overflow-hidden shadow-sm transition-all"
295+
className="flex flex-col w-full lg:w-[48%] h-full rounded-2xl overflow-hidden shadow-sm transition-all"
309296
style={{
310297
backgroundColor: 'var(--color-bg-card)',
311298
border: '1px solid var(--color-border)',
312299
display: 'flex'
313300
}}
314301
>
315-
<div style={{ padding: '1rem 1.5rem', borderBottom: '1px solid var(--color-border)', backgroundColor: 'var(--color-bg-card)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0 }}>
302+
<div style={{ padding: '1.1rem 1.5rem', borderBottom: '1px solid var(--color-border)', backgroundColor: 'var(--color-bg-card)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0 }}>
316303
<h3 style={{ fontSize: '0.95rem', fontWeight: 600, color: 'var(--color-text-main)', display: 'flex', alignItems: 'center', gap: '8px', margin: 0 }}>
317304
<Sparkles size={16} style={{ color: 'var(--color-primary)' }} /> Schema Preview
318305
</h3>
@@ -321,7 +308,7 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
321308
onClick={handleInsertAll}
322309
disabled={isInserting}
323310
className="btn btn-primary"
324-
style={{ opacity: isInserting ? 0.7 : 1, padding: '6px 16px', fontSize: '0.85rem' }}
311+
style={{ opacity: isInserting ? 0.7 : 1, padding: '6px 18px', fontSize: '0.85rem', borderRadius: '8px' }}
325312
>
326313
{isInserting ? (
327314
<>
@@ -333,7 +320,7 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
333320
)}
334321
</div>
335322

336-
<div className="flex-1 overflow-y-auto custom-scrollbar" style={{ padding: '1.5rem', backgroundColor: 'var(--color-bg-main)' }}>
323+
<div className="flex-1 overflow-y-auto custom-scrollbar" style={{ padding: '1.5rem', backgroundColor: 'var(--color-bg-card)' }}>
337324
{!schema || schema.length === 0 ? (
338325
<div className="h-full flex flex-col items-center justify-center text-center transition-all" style={{ color: 'var(--color-text-muted)', minHeight: '300px' }}>
339326
<div style={{ padding: '20px', borderRadius: '50%', backgroundColor: 'var(--color-bg-input)', border: '1px solid var(--color-border)', marginBottom: '16px', boxShadow: '0 8px 32px rgba(0,0,0,0.05)' }}>
@@ -347,7 +334,7 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
347334
) : (
348335
<div className="space-y-6">
349336
{insertResults && (
350-
<div style={{ padding: '1.25rem', backgroundColor: 'var(--color-bg-input)', border: '1px solid var(--color-border)', borderRadius: '8px', animation: 'fadeIn 0.3s ease-out' }}>
337+
<div style={{ padding: '1.25rem', backgroundColor: 'var(--color-bg-input)', border: '1px solid var(--color-border)', borderRadius: '10px', animation: 'fadeIn 0.3s ease-out' }}>
351338
<p style={{ fontSize: '0.85rem', fontWeight: 600, color: 'var(--color-text-main)', marginBottom: '12px' }}>Insert Results</p>
352339
<ul className="space-y-3">
353340
{insertResults.map((r, i) => (
@@ -364,20 +351,20 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
364351
)}
365352

366353
{schema.map((col, idx) => (
367-
<div key={idx} style={{ backgroundColor: 'var(--color-bg-card)', border: '1px solid var(--color-border)', borderRadius: '10px', overflow: 'hidden', animation: 'fadeIn 0.4s ease-out' }} className="transition-all hover:border-white/20 shadow-sm">
368-
<div style={{ backgroundColor: 'var(--color-bg-input)', padding: '12px 18px', borderBottom: '1px solid var(--color-border)', fontSize: '0.85rem', fontWeight: 600, color: 'var(--color-text-main)', fontFamily: 'monospace', display: 'flex', alignItems: 'center' }}>
354+
<div key={idx} style={{ backgroundColor: 'var(--color-bg-input)', border: '1px solid var(--color-border)', borderRadius: '12px', overflow: 'hidden', animation: 'fadeIn 0.4s ease-out' }} className="transition-all hover:border-white/20 shadow-sm">
355+
<div style={{ padding: '12px 18px', borderBottom: '1px solid var(--color-border)', fontSize: '0.85rem', fontWeight: 600, color: 'var(--color-text-main)', fontFamily: 'monospace', display: 'flex', alignItems: 'center' }}>
369356
<span style={{ color: 'var(--color-primary)', marginRight: '10px', fontSize: '1.1rem' }}>⛁</span>
370357
{col.collection}
371358
</div>
372359
<div>
373360
<table style={{ width: '100%', textAlign: 'left', fontSize: '0.8rem', borderCollapse: 'collapse' }}>
374361
<tbody style={{ display: 'block', width: '100%' }}>
375362
{col.fields?.map((f, i) => (
376-
<tr key={i} style={{ display: 'flex', width: '100%', borderBottom: i < col.fields.length - 1 ? '1px solid var(--color-border)' : 'none', backgroundColor: 'var(--color-bg-main)' }}>
363+
<tr key={i} style={{ display: 'flex', width: '100%', borderBottom: i < col.fields.length - 1 ? '1px solid var(--color-border)' : 'none' }}>
377364
<td style={{ padding: '12px 18px', fontFamily: 'monospace', color: 'var(--color-text-main)', width: '50%', borderRight: '1px solid var(--color-border)' }}>{f.name}</td>
378365
<td style={{ padding: '12px 18px', color: 'var(--color-text-muted)', width: '50%', display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' }}>
379366
<span className="badge" style={{
380-
backgroundColor: 'var(--color-bg-input)',
367+
backgroundColor: 'var(--color-bg-card)',
381368
border: '1px solid var(--color-border)',
382369
color: 'var(--color-text-main)',
383370
fontSize: '0.7rem',

0 commit comments

Comments
 (0)