colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
123 Commits 1 Branch 0 Tags
b5e245e0fb938ac05cb2239f20cecb140fbfb5cf
Commit Graph

2 Commits

Author SHA1 Message Date
colinislit
b5e245e0fb feat(swift): voeg scrolling functionaliteit toe aan chat (E2.S3) 
E2.S3 - ChatPanel scrolling (5 SP)
- Scrollable message list met refs (scrollContainerRef, messagesEndRef)
- Auto-scroll naar laatste message bij nieuwe berichten
- Scroll-lock detection (100px threshold)
- "Scroll naar beneden" button tijdens scroll-lock
- Initial scroll to bottom bij mount

Scrolling Logic:
- useRef voor scroll container en messages end tracking
- useState voor isScrolledUp en showScrollButton state
- handleScroll() detecteert wanneer user omhoog scrollt
- scrollToBottom() met smooth/auto behavior support
- Auto-scroll alleen wanneer NIET scrolled up (scroll-lock)

Scroll Button:
- ArrowDown icon (Lucide)
- Positioned absolute bottom-4 right-4
- Shadow + hover effects, smooth transitions
- Verschijnt alleen bij scroll-lock en messages present
- Aria-label voor accessibility

Testing:
- 12 demo messages voor scrolling behavior test
- Conversatie flow: notitie, zoeken, overdracht
- Scroll threshold: 100px vanaf bottom

Components Updated:
- components/swift/chat/chat-panel.tsx (+68 regels)

Epic 2 Progress: 3/5 stories compleet (10 SP / 13 SP = 77%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2025-12-27 14:00:47 +01:00
colinislit
e3ff72cd9c feat(swift): voeg chat messages en styling toe (E2.S1-S2) 
E2.S1 - Store uitbreiding (2 SP)
- ChatMessage, ChatAction, ChatMessageType types toegevoegd
- chatMessages[], isStreaming, pendingAction state
- addChatMessage, updateLastMessage, clearChat, setStreaming actions

E2.S2 - ChatMessage component (3 SP)
- Herbruikbare ChatMessage component met 4 message types
- MESSAGE_STYLES config (user/assistant/system/error)
- User: amber bubble rechts, rounded-tr-sm
- Assistant: slate bubble links, rounded-tl-sm
- System: centered, transparent, italic
- Error: red bubble links
- Optional timestamp support (NL locale)
- Demo messages in ChatPanel voor testing

Components Created:
- components/swift/chat/chat-message.tsx (77 regels)
- components/swift/chat/chat-panel.tsx (102 regels)

Store Updated:
- stores/swift-store.ts (+87 regels) - Chat state en actions

Epic 2 Progress: 2/5 stories compleet (5 SP / 13 SP = 38%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2025-12-27 13:55:35 +01:00