Help and Support SwiftUI Block

A search field sits on top. As the person types, Top questions becomes Results with a count beside it, matching every word against the questions, answers and the keywords you give; when nothing matches it says "No articles match" with the words and suggests contacting you. A clear button empties the field. Each question opens in place: the chevron turns, the answer appears under it and, when the article has a URL, a "Read the full article" link opens it. Contact us lists Chat with us with an Online or Away chip and your reply time or return time, Email with your address, which opens Mail, Call with the number and hours, and Report a problem. That opens a sheet with a category (Bug, Account, Billing, Other), a description, Include diagnostics and Send, which shows a spinner, then a checkmark and closes the sheet; a thrown error stays in the sheet under the button. The version and build close the block; tapping them copies them and shows "Copied" for a moment. Pass nil for the articles while they load and the questions card shows grey shapes.

Notes

• HelpSupport(articles:contact:version:onChat:onReport:). Only articles is required; every other part appears when you pass it. It is a section: no navigation stack, background, padding or scroll view of its own, so place it in your own column, such as a ScrollView with .padding(.horizontal, 20) and .scrollDismissesKeyboard(.interactively). The report form is a sheet the block presents.
• articles is a list of HelpSupport.Article, most asked first: an id, the question, a short answer, an optional url to the full article and keywords the search should also match ("backup", "refund"). An empty list hides the search and the questions. Article.samples is the four questions from the preview.
• contact is a HelpSupport.Contact: chat as an Availability (.online(reply:) or .away(back:), each with an optional line such as "Replies in a few minutes"), an email, a phone and its hours. Each part left out hides its row, and the card goes when there is nothing to show. Chat with us also needs onChat, which opens your chat screen.
• Email and Call open mailto: and tel: URLs with the environment's openURL. Leave phone out on devices that can't call.
• onReport receives a HelpSupport.Report: its category, the trimmed message and, when Include diagnostics is on (the default), Diagnostics with the app version, iOS version and device model. It is async throws. Send is enabled once the description has text. Throw to keep the sheet open with a LocalizedError's errorDescription, or "Your report didn't send. Try again." A CancellationError goes back to rest quietly. The sheet can't be swiped away while a report sends. Nil hides Report a problem.
• version defaults to HelpSupport.appVersion, the main bundle's short version and build ("2.4 (318)"). Pass your own string, or nil to hide the line.
• Haptics: a selection tick on the report category, success when the version copies or a report sends and an error when one fails.
• VoiceOver reads each question with Expanded or Collapsed and a hint, the answer as text, Read the full article as a link, Chat with us with its availability, and the version with "Copies the version". It announces "Version copied", "Report sent" and failures. Every target is at least 44 points tall. At accessibility sizes the rows wrap their notes and the report categories stack.
• Reduce Motion turns the answers, the search results and the sheet's states into short fades.
• HelpSupportExample at the end of HelpSupport.swift is the Help page from the preview: the sample questions, chat online, email, a phone line with its hours, version 2.4 (318) and a report that takes a moment and sends. Pass wrapsInNavigationStack: false to push it in your own stack. The States preview shows the loading layout with chat away, and a block with only email.

Theming

• Reads SPTheme from @Environment(\.spTheme) and requires the design-system item.
• The search field is 52 points on fill with radius.md and a 1 point separator hairline that turns to textPrimary while focused; its prompt is type.body, the glass textSecondary and the clear button textTertiary.
• Cards are color.surface with radius.lg; rows are 16 points in from the edge (space.lg) with SPHairline dividers in separator. Groups sit 24 points apart (space.xl) under type.headline titles, with the result count in type.footnote and textSecondary.
• Questions and row titles are type.body in textPrimary; answers type.subhead in textSecondary; Read the full article type.subhead semibold in textPrimary; notes type.footnote in textSecondary; symbols textSecondary; chevrons and arrows textTertiary.
• The Online chip is success on a 14% tint with a success dot; Away is textSecondary on fill with a textTertiary dot.
• The report sheet sits on color.bg with a type.title3 title. Categories are capsules, the chosen one textPrimary with surface text, the others fill. The description field matches the search field. Send is accent with accentOn text in type.headline and radius.md, the block's primary action; the diagnostics switch takes the accent tint. Errors are type.footnote in danger.
• The version line is type.caption with monospaced digits in textTertiary, and "Copied" in textSecondary.
• Answers and results move with motion.smooth, small changes with motion.snappy; both become short fades under Reduce Motion.