169 lines
4.6 KiB
Markdown
169 lines
4.6 KiB
Markdown
# Phase 8: Grouped Chat UI — Detailed Implementation Plan
|
|
|
|
## Overview
|
|
|
|
Add UI for organizing chat sessions into collapsible groups.
|
|
|
|
**Data available:**
|
|
- `SessionEntry.groupSlug` — null for ungrouped, string for grouped
|
|
- `GroupEntry` — `{ name, slug, description, createdAt, updatedAt, sessionCount }`
|
|
- `useChatGroups()` hook — `{ groups, createGroup, updateGroup, deleteGroup, moveSession }`
|
|
|
|
---
|
|
|
|
## Phase 8.1: Grouped SessionList UI
|
|
|
|
**File:** `src/apps/officer-web/Screens/Dashboard/ChatHistory/Screen.tsx`
|
|
|
|
### Changes
|
|
|
|
1. **Import `useChatGroups`** alongside `useChatSessions`
|
|
|
|
2. **Group sessions by `groupSlug`:**
|
|
```ts
|
|
const ungrouped = sessions.filter(s => !s.groupSlug);
|
|
const grouped = groups.map(g => ({
|
|
...g,
|
|
sessions: sessions.filter(s => s.groupSlug === g.slug)
|
|
}));
|
|
```
|
|
|
|
3. **Add collapsible state:**
|
|
```ts
|
|
const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
|
|
const toggleGroup = (slug: string) => {
|
|
setCollapsed(prev => {
|
|
const next = new Set(prev);
|
|
next.has(slug) ? next.delete(slug) : next.add(slug);
|
|
return next;
|
|
});
|
|
};
|
|
```
|
|
|
|
4. **Render structure:**
|
|
```
|
|
Header (Sessions + New Chat button + Create Group button)
|
|
├─ Ungrouped sessions (flat list)
|
|
├─ Group 1 header (collapsible, with count badge)
|
|
│ └─ Group 1 sessions (hidden if collapsed)
|
|
├─ Group 2 header
|
|
│ └─ Group 2 sessions
|
|
└─ ...
|
|
```
|
|
|
|
5. **Group header component:**
|
|
```tsx
|
|
<div className="flex items-center gap-2 px-3 py-2 cursor-pointer" onClick={() => toggleGroup(slug)}>
|
|
<ChevronRight className={`h-4 w-4 transition-transform ${!collapsed.has(slug) ? 'rotate-90' : ''}`} />
|
|
<Folder className="h-4 w-4 text-duck-teal" />
|
|
<span className="font-medium">{group.name}</span>
|
|
<span className="text-xs text-duck-dark/40">({group.sessionCount})</span>
|
|
</div>
|
|
```
|
|
|
|
6. **Session item:** Add group indicator badge if grouped
|
|
|
|
---
|
|
|
|
## Phase 8.2: Group Management UI
|
|
|
|
### 8.2.1: Create Group Dialog
|
|
|
|
**File:** New component `src/apps/officer-web/Screens/Dashboard/ChatHistory/CreateGroupDialog.tsx`
|
|
|
|
**Trigger:** Button in SessionList header (next to "New Chat")
|
|
|
|
**Fields:**
|
|
- Name (required) — auto-generates slug
|
|
- Description (optional)
|
|
|
|
**Slug generation:**
|
|
```ts
|
|
const toSlug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
|
|
```
|
|
|
|
**On submit:** Call `createGroup(name, slug, description)`
|
|
|
|
### 8.2.2: Group Context Menu
|
|
|
|
**File:** Update `Screen.tsx`
|
|
|
|
**On group header right-click or "..." button:**
|
|
- Rename group → inline edit or dialog
|
|
- Delete group → confirmation dialog ("Sessions will be ungrouped")
|
|
|
|
### 8.2.3: Session Context Menu
|
|
|
|
**File:** Update `Screen.tsx`
|
|
|
|
**On session right-click or "..." button:**
|
|
- Move to group → submenu with group list + "Ungrouped"
|
|
- Rename session (existing)
|
|
- Delete session (existing)
|
|
|
|
**Implementation:** Use `moveSession(sessionId, groupSlug)` from `useChatGroups`
|
|
|
|
---
|
|
|
|
## Phase 8.3: Widget Updates (Optional)
|
|
|
|
**File:** `src/apps/officer-web/Screens/Dashboard/ChatHistory/Widget.tsx`
|
|
|
|
Simpler version — just show recent sessions, no grouping. Or:
|
|
- Show 3 most recent ungrouped
|
|
- Show group names with expand link to full view
|
|
|
|
**Decision:** Keep Widget simple for now, grouping only in full SessionList.
|
|
|
|
---
|
|
|
|
## Implementation Order
|
|
|
|
1. **8.1.1** — Add `useChatGroups` import and group sessions by slug
|
|
2. **8.1.2** — Add collapsible state and group headers
|
|
3. **8.1.3** — Style group headers with icons and counts
|
|
4. **8.2.1** — Create Group dialog
|
|
5. **8.2.2** — Group context menu (rename/delete)
|
|
6. **8.2.3** — Session context menu (move to group)
|
|
|
|
---
|
|
|
|
## Files to Create/Modify
|
|
|
|
| File | Action |
|
|
|------|--------|
|
|
| `ChatHistory/Screen.tsx` | Major update — grouping logic, collapsible UI, context menus |
|
|
| `ChatHistory/CreateGroupDialog.tsx` | New — create group form |
|
|
| `ChatHistory/GroupContextMenu.tsx` | New — rename/delete group actions |
|
|
| `ChatHistory/SessionContextMenu.tsx` | New — move/rename/delete session actions |
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Sessions without groupSlug appear in "Ungrouped" section
|
|
- [ ] Sessions with groupSlug appear under correct group
|
|
- [ ] Groups are collapsible (click header to toggle)
|
|
- [ ] Group session counts are accurate
|
|
- [ ] Create group dialog opens and creates group
|
|
- [ ] Slug is auto-generated from name
|
|
- [ ] Rename group works (inline or dialog)
|
|
- [ ] Delete group moves sessions to ungrouped
|
|
- [ ] Move session to group works
|
|
- [ ] Move session to ungrouped works
|
|
- [ ] UI updates immediately after all operations
|
|
|
|
---
|
|
|
|
## Estimated Effort
|
|
|
|
- **8.1 (Grouped UI):** ~1-2 hours
|
|
- **8.2 (Group Management):** ~2-3 hours
|
|
- **8.3 (Widget):** Skip for now
|
|
|
|
**Total:** ~3-5 hours
|
|
|
|
---
|
|
|
|
Ready to implement?
|