feat: add App zum Doc branding and chat components#283
Open
felixevers wants to merge 8 commits into
Open
Conversation
Add AppZumDocLogo and AppZumDocBadge branding components alongside a standalone chat widget set: ChatLayout, ChatThread, ChatConversationList, ChatConversationRow, ChatThreadHeader, ChatMessageList, ChatMessageBubble, ChatMessageCard, ChatAttachmentCard, ChatComposer, ChatQuickReplyChip, ChatSystemLine and ChatDateDivider, with stories for each. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
Deploying hightide with
|
| Latest commit: |
72cb89d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a4eabf74.hightide-7id.pages.dev |
| Branch Preview URL: | https://claude-app-zum-doc-component.hightide-7id.pages.dev |
Style chat components via class names with className forwarding, drop the default border and rounding on ChatLayout, and render action buttons only when their handler is provided (onBack/onCall/onAddContact on ChatThreadHeader, onCamera/onAttachment on ChatComposer, onCreate and the toggleable built-in SearchBar on ChatConversationList). ChatLayout gains a listPosition option and tablet/desktop responsive sidebar widths. AppZumDocLogo gains a loading animation that fills both logo parts clockwise. TimeDisplay gains a time-only mode used for chat timestamps. Add unit tests for the chat and App zum Doc branding components. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
Keep version 0.15.0 and stack the 0.15.0 changelog entry on top of the 0.14.3/0.14.4 entries from main. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
Remove the stray dot at the hidden front stroke's path end by widening the dash gap and holding the offset past the dash boundary. Switch both fills to ease-in and retime the front window (33%-73%) so the front part sweeps through the teal opening at the center left exactly when the back part's tip arrives there. Restore the -webkit- prefixed wave keyframes from main alongside prefixed azd fill keyframes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
DasProffi
reviewed
Jul 6, 2026
Autoprefixer generates the -webkit- prefixed keyframes and animation declarations in the published CSS. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
Keep version 0.15.0 and import chat.css alongside the new date picker theme files. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
Autoprefixer generates all -webkit- keyframes and animation declarations in the published CSS, so the source keyframes stay plain. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
Drop the slow and fast loading-animation story variants for the helpwave and App zum Doc logos. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds the App zum Doc specific components from the chat design handoff, built on hightide's existing primitives and theming (semantic colors, class-based CSS with
classNameforwarding on every component, dark mode support).Branding
AppZumDocLogo— the official App zum Doc logo as an inline SVG with configurablefrontColor,backColor,size(sm/md/lg), and ananimateprop:loadingfills both logo parts clockwise (each part drawn as a clipped stroke, timed so the front part sweeps through the back part's opening at the center left exactly when the back part's tip arrives there), pluspulseandbounceAppZumDocBadge— logo + wordmark badge mirroringHelpwaveBadgeChat widgets (all standalone)
ChatMessageBubble— incoming/outgoing bubbles with asymmetric radii, inline timestamp, and optional read receipt rowChatMessageCard— structured message card (appointment proposal, prescription request, referral) with icon tile, title, subtitle, status badge, body, and action footerChatAttachmentCard— file icon, filename, metadata; download button rendered only whenonDownloadis setChatComposer— controlled/uncontrolled input with enter-to-send and round send button; camera and attachment buttons rendered only whenonCamera/onAttachmentare setChatQuickReplyChip— outlined pill button with active stateChatSystemLine— centered confirmation line with iconChatDateDivider— centered date pillChatConversationRow—AvatarWithStatuspresence, timestamp, preview, sent indicator, unread count pill,selected/unreadstatesChatConversationList— optionaltitle, optional create button (onCreate), toggleable built-inSearchBar(hasSearch,onSearch), andheader/footerslots around a scrollable row areaChatThreadHeader— avatar presence, title, subtitle; back/call/add-contact buttons rendered only whenonBack/onCall/onAddContactare set, plusleading/trailingslotsChatLayout
ChatLayout— two-pane layout (conversation list + open thread) designed to be nested intoAppPage; no default border or rounding (style viaclassName);listPositionoption (left/right); responsive: single pane below the tablet breakpoint driven byisConversationOpen, fixed-width sidebar at tablet and desktop widthsChatThread— thread column withheaderandfooterslots around a scrollableChatMessageList(with optional auto scroll)Supporting changes
TimeDisplaygains atimemode rendering only the localized time, used for chat timestampsmain(0.14.4); version bumped to 0.15.0Stories & tests
BrandingandChat, including a fully interactiveChatLayoutcomposition (conversation switching, sending messages, mobile back navigation, list position control) and logo loading-animation storiesVerification
npm run build,npm run lint(no new warnings), andnpm run test(198 passing) are green🤖 Generated with Claude Code
https://claude.ai/code/session_01AqYGuFVGFH73aWaiCkuj6s