Skip to content

Commit 8e7d83b

Browse files
PhineasePhinease
authored
🐛 adding memory box at the front of the list, improving user experience
2 parents 4d9519e + 412518f commit 8e7d83b

File tree

2 files changed

+158
-148
lines changed

2 files changed

+158
-148
lines changed

‎frontend/app/[locale]/chat/internal/memory/memoryManageModal.tsx‎

Lines changed: 130 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -149,56 +149,54 @@ const MemoryManageModal: React.FC<MemoryManageModalProps> = ({
149149
if (memory.addingMemoryKey !== groupKey) return null;
150150

151151
return (
152-
<List.Item className="border-b border-gray-100">
153-
<div className="flex items-center w-full gap-3 mb-4">
154-
<Input.TextArea
155-
value={memory.newMemoryContent}
156-
onChange={(e) => memory.setNewMemoryContent(e.target.value)}
157-
placeholder={t("memoryManageModal.inputPlaceholder")}
158-
maxLength={500}
159-
showCount
160-
onPressEnter={memory.confirmAddingMemory}
161-
disabled={memory.isAddingMemory}
162-
className="flex-1"
163-
autoSize={{ minRows: 2, maxRows: 5 }}
164-
/>
165-
<Button
166-
type="primary"
167-
variant="outlined"
168-
size="small"
169-
shape="circle"
170-
color="red"
171-
className={memory.isAddingMemory ? "" : "hover:!bg-red-50"}
172-
icon={<X className={"size-4"} />}
173-
onClick={memory.cancelAddingMemory}
174-
disabled={memory.isAddingMemory}
175-
style={{
176-
border: "none",
177-
backgroundColor: "transparent",
178-
boxShadow: "none",
179-
}}
180-
/>
181-
<Button
182-
type="primary"
183-
variant="outlined"
184-
size="small"
185-
shape="circle"
186-
color="green"
187-
className={
188-
!memory.newMemoryContent.trim() ? "" : "hover:!bg-green-50"
189-
}
190-
icon={<Check className={"size-4"} />}
191-
onClick={memory.confirmAddingMemory}
192-
loading={memory.isAddingMemory}
193-
disabled={!memory.newMemoryContent.trim()}
194-
style={{
195-
border: "none",
196-
backgroundColor: "transparent",
197-
boxShadow: "none",
198-
}}
199-
/>
200-
</div>
201-
</List.Item>
152+
<div className="flex items-center w-full gap-3 mb-4">
153+
<Input.TextArea
154+
value={memory.newMemoryContent}
155+
onChange={(e) => memory.setNewMemoryContent(e.target.value)}
156+
placeholder={t("memoryManageModal.inputPlaceholder")}
157+
maxLength={500}
158+
showCount
159+
onPressEnter={memory.confirmAddingMemory}
160+
disabled={memory.isAddingMemory}
161+
className="flex-1"
162+
autoSize={{ minRows: 2, maxRows: 5 }}
163+
/>
164+
<Button
165+
type="primary"
166+
variant="outlined"
167+
size="small"
168+
shape="circle"
169+
color="red"
170+
className={memory.isAddingMemory ? "" : "hover:!bg-red-50"}
171+
icon={<X className={"size-4"} />}
172+
onClick={memory.cancelAddingMemory}
173+
disabled={memory.isAddingMemory}
174+
style={{
175+
border: "none",
176+
backgroundColor: "transparent",
177+
boxShadow: "none",
178+
}}
179+
/>
180+
<Button
181+
type="primary"
182+
variant="outlined"
183+
size="small"
184+
shape="circle"
185+
color="green"
186+
className={
187+
!memory.newMemoryContent.trim() ? "" : "hover:!bg-green-50"
188+
}
189+
icon={<Check className={"size-4"} />}
190+
onClick={memory.confirmAddingMemory}
191+
loading={memory.isAddingMemory}
192+
disabled={!memory.newMemoryContent.trim()}
193+
style={{
194+
border: "none",
195+
backgroundColor: "transparent",
196+
boxShadow: "none",
197+
}}
198+
/>
199+
</div>
202200
);
203201
};
204202

@@ -263,7 +261,9 @@ const MemoryManageModal: React.FC<MemoryManageModalProps> = ({
263261
shape="round"
264262
color="green"
265263
title={t("memoryManageModal.addMemory")}
266-
onClick={() => memory.startAddingMemory(g.key)}
264+
onClick={() => {
265+
memory.startAddingMemory(g.key);
266+
}}
267267
icon={<MessageSquarePlus className="size-4" />}
268268
className="hover:!bg-green-50"
269269
style={{
@@ -303,41 +303,46 @@ const MemoryManageModal: React.FC<MemoryManageModalProps> = ({
303303
</p>
304304
</div>
305305
) : (
306-
<List
307-
className="memory-modal-list"
308-
dataSource={g.items}
309-
style={{
310-
maxHeight: "35vh",
311-
overflowY: "auto",
312-
scrollbarGutter: "stable",
313-
}}
314-
size="small"
315-
locale={{ emptyText: renderEmptyState(g.key) }}
316-
renderItem={(item) => (
317-
<List.Item
318-
actions={[
319-
<Button
320-
key="delete"
321-
type="text"
322-
size="small"
323-
title={t("memoryManageModal.deleteMemory")}
324-
danger
325-
style={{ background: "transparent" }}
326-
icon={<Eraser className="size-4" />}
327-
onClick={() =>
328-
memory.handleDeleteMemory(item.id, g.key)
329-
}
330-
/>,
331-
]}
332-
>
333-
<div className="flex flex-col text-sm pl-2">
334-
{item.memory}
335-
</div>
336-
</List.Item>
306+
<div>
307+
{memory.addingMemoryKey === g.key && (
308+
<div className="border border-gray-200 rounded-md p-3 mb-3 bg-blue-50">
309+
{renderAddMemoryInput(g.key)}
310+
</div>
337311
)}
338-
>
339-
{renderAddMemoryInput(g.key)}
340-
</List>
312+
<List
313+
className="memory-modal-list"
314+
dataSource={g.items}
315+
style={{
316+
maxHeight: memory.addingMemoryKey === g.key ? "calc(35vh - 80px)" : "35vh",
317+
overflowY: "auto",
318+
scrollbarGutter: "stable",
319+
}}
320+
size="small"
321+
locale={{ emptyText: renderEmptyState(g.key) }}
322+
renderItem={(item) => (
323+
<List.Item
324+
actions={[
325+
<Button
326+
key="delete"
327+
type="text"
328+
size="small"
329+
title={t("memoryManageModal.deleteMemory")}
330+
danger
331+
style={{ background: "transparent" }}
332+
icon={<Eraser className="size-4" />}
333+
onClick={() =>
334+
memory.handleDeleteMemory(item.id, g.key)
335+
}
336+
/>,
337+
]}
338+
>
339+
<div className="flex flex-col text-sm pl-2">
340+
{item.memory}
341+
</div>
342+
</List.Item>
343+
)}
344+
/>
345+
</div>
341346
)}
342347
</div>
343348
))}
@@ -435,42 +440,47 @@ const MemoryManageModal: React.FC<MemoryManageModalProps> = ({
435440
),
436441
collapsible: disabled ? "disabled" : undefined,
437442
children: (
438-
<List
439-
className="memory-modal-list"
440-
dataSource={g.items}
441-
style={{
442-
maxHeight: "35vh",
443-
overflowY: "auto",
444-
scrollbarGutter: "stable",
445-
}}
446-
size="small"
447-
locale={{ emptyText: renderEmptyState(g.key) }}
448-
renderItem={(item) => (
449-
<List.Item
450-
actions={[
451-
<Button
452-
key="delete"
453-
type="text"
454-
size="small"
455-
title={t("memoryManageModal.deleteMemory")}
456-
danger
457-
style={{ background: "transparent" }}
458-
icon={<Eraser className="size-4" />}
459-
disabled={disabled}
460-
onClick={() =>
461-
memory.handleDeleteMemory(item.id, g.key)
462-
}
463-
/>,
464-
]}
465-
>
466-
<div className="flex flex-col text-sm pl-2">
467-
{item.memory}
468-
</div>
469-
</List.Item>
443+
<div>
444+
{memory.addingMemoryKey === g.key && (
445+
<div className="border border-gray-200 rounded-md p-3 mb-3 bg-blue-50">
446+
{renderAddMemoryInput(g.key)}
447+
</div>
470448
)}
471-
>
472-
{renderAddMemoryInput(g.key)}
473-
</List>
449+
<List
450+
className="memory-modal-list"
451+
dataSource={g.items}
452+
style={{
453+
maxHeight: memory.addingMemoryKey === g.key ? "calc(35vh - 80px)" : "35vh",
454+
overflowY: "auto",
455+
scrollbarGutter: "stable",
456+
}}
457+
size="small"
458+
locale={{ emptyText: renderEmptyState(g.key) }}
459+
renderItem={(item) => (
460+
<List.Item
461+
actions={[
462+
<Button
463+
key="delete"
464+
type="text"
465+
size="small"
466+
title={t("memoryManageModal.deleteMemory")}
467+
danger
468+
style={{ background: "transparent" }}
469+
icon={<Eraser className="size-4" />}
470+
disabled={disabled}
471+
onClick={() =>
472+
memory.handleDeleteMemory(item.id, g.key)
473+
}
474+
/>,
475+
]}
476+
>
477+
<div className="flex flex-col text-sm pl-2">
478+
{item.memory}
479+
</div>
480+
</List.Item>
481+
)}
482+
/>
483+
</div>
474484
),
475485
showArrow: true,
476486
className: "memory-modal-panel",

0 commit comments

Comments
 (0)