Every screen, flow, block and app template in SwiftPieces Pro, for good.All of Pro, $199 once.$199 once.Get Pro

Screen · AI

Chat SwiftUI Screen

A clean SwiftUI chat interface built for AI apps. It has message bubbles, a composer and suggestion chips, and a layout that works with any model you connect.

A complete AI chat: replies stream from your AsyncStream with a smoothing reveal, a composer whose send button morphs to stop, suggestion blocks under a display headline on an empty thread, message actions and follow-scroll with a Latest pill.

  • SwiftUI
  • iOS 17.0+
  • ai-chat-screen
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • Replies stream from your AsyncStream with a smoothing reveal
  • A composer whose send button morphs to stop
  • Suggestion chips on an empty thread, and message actions
  • Follow-scroll with a Latest pill
  • An error state when your stream throws

In the Build Kit

Neon (style), Prism (style), AI Assistant (brief), AI Assistant (recipe). Your agent builds around this screen in the same design.

Used in

AI Assistant (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

Hand the screen your thread and an onSend that returns an AsyncStream<String>; it appends the user message and an assistant reply, moves the reply through thinking, streaming and done (or error), and reveals tokens at an even cadence that speeds up with the backlog, so bursty providers still read as one smooth stream. The composer grows with the draft and its send button morphs into stop while generating; stop cancels the task and keeps what arrived. An empty thread shows suggestion chips and a quiet prompt; long-pressing a message offers copy, retry and delete. The list follows new tokens until the user scrolls up, then a "Latest" pill offers the way back.

Notes

  • States per reply: thinking (breathing dots), streaming (text with the smoothing reveal), done, error(String) (inline card with a retry that re-runs the preceding prompt into the same row).
  • Following: a downward finger movement unpins the list; coming within 24 pt of the bottom re-pins it. The pill appears only when unpinned and more than 80 pt from the end.
  • Retry and delete are context-menu actions, so they carry VoiceOver for free; rows combine into one element labeled "You" or "Assistant".
  • Haptics: a soft impact on send, .error when a reply fails. Reduce Motion snaps text in without the reveal and replaces springs with ease-outs. Reduce Transparency swaps the glass composer for an opaque surface.
  • Persist messages yourself; the screen only mutates the binding. The stream is cancelled if the screen disappears.
  • AIChatScreenExample at the end of AIChatScreen.swift is the screen shown in the preview; copy it as a starting point.

Theming

  • Reads SPTheme from @Environment(\.spTheme), so install the design-system item with it. Set .environment(\.spTheme, YourTheme()) once at the root.
  • tint defaults to color.accent and colors the user bubble, send button, thinking dots and empty-state glyph; bubble text and the send glyph use color.accentOn.
  • The ground is color.bg, the composer uses spGlass, chips and the idle send button use color.fill, and the error card uses color.warning.
  • Text uses type.body, type.subhead, type.footnote and type.title3; bubbles and the composer take radius.lg, the error card radius.md.

03

Keep building

Pieces that work well next to this one.