Skip to content

Commit 3a4e9ee

Browse files
github-actions[bot]Marfuen
github-actions[bot]
and
Marfuen
authored
chore(context-hub): enhance array item addition logic and UI feedback (#1843)
Co-authored-by: Mariano Fuentes <[email protected]>
1 parent cb19833 commit 3a4e9ee

File tree

2 files changed

+104
-49
lines changed

2 files changed

+104
-49
lines changed

‎apps/app/src/app/(app)/[orgId]/settings/context-hub/components/table/ContextColumns.tsx‎

Lines changed: 103 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -117,12 +117,22 @@ function EditableAnswerCell({ context }: { context: Context }) {
117117

118118
// Add new item to array
119119
const addArrayItem = () => {
120-
if (arrayValue && arrayValue.length > 0) {
121-
// Clone the structure of the first item with empty values
122-
const template = Object.keys(arrayValue[0]).reduce(
123-
(acc, key) => ({ ...acc, [key]: '' }),
124-
{},
125-
);
120+
if (arrayValue) {
121+
let template: Record<string, string>;
122+
if (arrayValue.length > 0) {
123+
// Clone the structure of the first item with empty values
124+
template = Object.keys(arrayValue[0]).reduce((acc, key) => ({ ...acc, [key]: '' }), {});
125+
} else {
126+
// For empty arrays, infer structure from question or use default
127+
if (
128+
context.question.toLowerCase().includes('c-suite') ||
129+
context.question.toLowerCase().includes('executive')
130+
) {
131+
template = { name: '', title: '' };
132+
} else {
133+
template = { name: '', value: '' };
134+
}
135+
}
126136
setArrayValue([...arrayValue, template]);
127137
}
128138
};
@@ -137,37 +147,44 @@ function EditableAnswerCell({ context }: { context: Context }) {
137147
if (isEditing) {
138148
// Render array editor (like cSuite)
139149
if (arrayValue) {
140-
const keys = arrayValue.length > 0 ? Object.keys(arrayValue[0]) : [];
141150
return (
142151
<div className="flex flex-col gap-3">
143152
<div className="space-y-2">
144-
{arrayValue.map((item, index) => (
145-
<div key={index} className="flex items-center gap-2 p-2 rounded-md bg-muted/30">
146-
{keys.map((key) => (
147-
<input
148-
key={key}
149-
type="text"
150-
value={item[key] || ''}
151-
onChange={(e) => updateArrayItem(index, key, e.target.value)}
152-
placeholder={key}
153-
className="flex-1 px-2 py-1 text-sm rounded border border-input bg-background"
154-
disabled={status === 'executing'}
155-
/>
156-
))}
157-
{arrayValue.length > 1 && (
158-
<Button
159-
type="button"
160-
variant="ghost"
161-
size="icon"
162-
className="h-7 w-7 text-muted-foreground hover:text-destructive"
163-
onClick={() => removeArrayItem(index)}
164-
disabled={status === 'executing'}
165-
>
166-
<Trash2 className="h-3.5 w-3.5" />
167-
</Button>
168-
)}
169-
</div>
170-
))}
153+
{arrayValue.length === 0 && (
154+
<p className="text-sm text-muted-foreground italic">
155+
No items. Click "Add Item" to start.
156+
</p>
157+
)}
158+
{arrayValue.map((item, index) => {
159+
const keys = Object.keys(item);
160+
return (
161+
<div key={index} className="flex items-center gap-2 p-2 rounded-md bg-muted/30">
162+
{keys.map((key) => (
163+
<input
164+
key={key}
165+
type="text"
166+
value={item[key] || ''}
167+
onChange={(e) => updateArrayItem(index, key, e.target.value)}
168+
placeholder={key}
169+
className="flex-1 px-2 py-1 text-sm rounded border border-input bg-background"
170+
disabled={status === 'executing'}
171+
/>
172+
))}
173+
{arrayValue.length > 1 && (
174+
<Button
175+
type="button"
176+
variant="ghost"
177+
size="icon"
178+
className="h-7 w-7 text-muted-foreground hover:text-destructive"
179+
onClick={() => removeArrayItem(index)}
180+
disabled={status === 'executing'}
181+
>
182+
<Trash2 className="h-3.5 w-3.5" />
183+
</Button>
184+
)}
185+
</div>
186+
);
187+
})}
171188
</div>
172189
<Button
173190
type="button"
@@ -180,11 +197,25 @@ function EditableAnswerCell({ context }: { context: Context }) {
180197
+ Add Item
181198
</Button>
182199
<div className="flex items-center gap-2">
183-
<Button size="sm" variant="outline" onClick={handleCancel} disabled={status === 'executing'}>
200+
<Button
201+
size="sm"
202+
variant="outline"
203+
onClick={handleCancel}
204+
disabled={status === 'executing'}
205+
>
184206
Cancel
185207
</Button>
186-
<Button size="sm" variant="default" onClick={handleSave} disabled={status === 'executing'}>
187-
{status === 'executing' ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Check className="h-4 w-4 mr-1" />}
208+
<Button
209+
size="sm"
210+
variant="default"
211+
onClick={handleSave}
212+
disabled={status === 'executing'}
213+
>
214+
{status === 'executing' ? (
215+
<Loader2 className="h-4 w-4 animate-spin mr-1" />
216+
) : (
217+
<Check className="h-4 w-4 mr-1" />
218+
)}
188219
Save
189220
</Button>
190221
</div>
@@ -213,11 +244,25 @@ function EditableAnswerCell({ context }: { context: Context }) {
213244
))}
214245
</div>
215246
<div className="flex items-center gap-2">
216-
<Button size="sm" variant="outline" onClick={handleCancel} disabled={status === 'executing'}>
247+
<Button
248+
size="sm"
249+
variant="outline"
250+
onClick={handleCancel}
251+
disabled={status === 'executing'}
252+
>
217253
Cancel
218254
</Button>
219-
<Button size="sm" variant="default" onClick={handleSave} disabled={status === 'executing'}>
220-
{status === 'executing' ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Check className="h-4 w-4 mr-1" />}
255+
<Button
256+
size="sm"
257+
variant="default"
258+
onClick={handleSave}
259+
disabled={status === 'executing'}
260+
>
261+
{status === 'executing' ? (
262+
<Loader2 className="h-4 w-4 animate-spin mr-1" />
263+
) : (
264+
<Check className="h-4 w-4 mr-1" />
265+
)}
221266
Save
222267
</Button>
223268
</div>
@@ -236,11 +281,25 @@ function EditableAnswerCell({ context }: { context: Context }) {
236281
disabled={status === 'executing'}
237282
/>
238283
<div className="flex items-center gap-2">
239-
<Button size="sm" variant="outline" onClick={handleCancel} disabled={status === 'executing'}>
284+
<Button
285+
size="sm"
286+
variant="outline"
287+
onClick={handleCancel}
288+
disabled={status === 'executing'}
289+
>
240290
Cancel
241291
</Button>
242-
<Button size="sm" variant="default" onClick={handleSave} disabled={status === 'executing'}>
243-
{status === 'executing' ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Check className="h-4 w-4 mr-1" />}
292+
<Button
293+
size="sm"
294+
variant="default"
295+
onClick={handleSave}
296+
disabled={status === 'executing'}
297+
>
298+
{status === 'executing' ? (
299+
<Loader2 className="h-4 w-4 animate-spin mr-1" />
300+
) : (
301+
<Check className="h-4 w-4 mr-1" />
302+
)}
244303
Save
245304
</Button>
246305
</div>
@@ -315,11 +374,7 @@ function DeleteCell({ context }: { context: Context }) {
315374
return (
316375
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
317376
<AlertDialogTrigger asChild>
318-
<Button
319-
variant="ghost"
320-
size="icon"
321-
className="text-destructive hover:bg-destructive/10"
322-
>
377+
<Button variant="ghost" size="icon" className="text-destructive hover:bg-destructive/10">
323378
<Trash2 className="h-4 w-4" />
324379
</Button>
325380
</AlertDialogTrigger>

‎apps/portal/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"moduleResolution": "bundler",
1616
"resolveJsonModule": true,
1717
"isolatedModules": true,
18-
"jsx": "react-jsx",
18+
"jsx": "preserve",
1919
"incremental": true,
2020
"plugins": [
2121
{

0 commit comments

Comments
 (0)