Skip to content

THEMING.md

Latest commit

 

History

History
131 lines (95 loc) · 4.07 KB

THEMING.md

File metadata and controls

131 lines (95 loc) · 4.07 KB
Raw

Theming

SwiftDBAI's chat interface is customizable through ChatViewConfiguration. Pass it via the .chatViewConfiguration() view modifier -- it propagates through the entire view hierarchy via SwiftUI environment.

Built-in Presets

Default

The standard look. Blue user bubbles, system-colored assistant bubbles, standard fonts.

DataChatView(databasePath: path, model: myLLM)
// .chatViewConfiguration(.default) is implicit

Default

Dark

Muted colors for dark backgrounds. Dark gray bubbles, light text, black background.

DataChatView(databasePath: path, model: myLLM)
    .chatViewConfiguration(.dark)

Dark

Compact

Smaller fonts, tighter padding, no SQL disclosure. Good for embedded or secondary views.

DataChatView(databasePath: path, model: myLLM)
    .chatViewConfiguration(.compact)

Compact

Custom Configuration

Start from any preset and override what you need:

var config = ChatViewConfiguration.default
config.userBubbleColor = .purple
config.userTextColor = .white
config.accentColor = .purple
config.inputPlaceholder = "Search GitHub repos..."
config.emptyStateTitle = "Explore GitHub Data"
config.emptyStateSubtitle = "Ask about stars, forks, languages, and trends"
config.emptyStateIcon = "star.circle"

DataChatView(databasePath: path, model: myLLM)
    .chatViewConfiguration(config)
Custom empty state Custom with results
Custom empty Custom results

Available Properties

Colors

Property Default Description
userBubbleColor .accentColor Background of user message bubbles
userTextColor .white Text color in user bubbles
assistantBubbleColor System secondary Background of assistant bubbles
assistantTextColor .primary Text color in assistant bubbles
backgroundColor .clear Overall chat view background
inputBarBackgroundColor .clear Input bar area background
accentColor .accentColor Send button and interactive elements
errorColor .red Error message icon and border

Typography

Property Default Description
messageFont .body Chat message text
summaryFont .body Natural language summary
sqlFont .caption monospaced SQL query display
inputFont .body Text input field

Layout & Content

Property Default Description
messagePadding 14 Padding inside message bubbles
bubbleCornerRadius 16 Corner radius of bubbles
showTimestamps false Show timestamps on messages
showSQLDisclosure true Show the "</> SQL Query" expandable section
inputPlaceholder "Ask about your data..." Placeholder text in input field
emptyStateTitle "Ask a question about your data" Title when no messages
emptyStateSubtitle "Try something like..." Subtitle when no messages
emptyStateIcon "bubble.left.and.text.bubble.right" SF Symbol for empty state

Avatar

Property Default Description
assistantAvatarIcon nil SF Symbol for assistant avatar (e.g. "sparkles", "person.crop.circle.fill")
assistantAvatarColor .accentColor Background color of the avatar circle

When set, a circular avatar appears next to every assistant message:

config.assistantAvatarIcon = "sparkles"
config.assistantAvatarColor = .purple

Custom with avatar

Works with All Presentation Modes

The configuration propagates through sheets, navigation, and UIKit bridges:

// Sheet
.sheet(isPresented: $show) {
    DataChatSheet(databasePath: path, model: myLLM)
        .chatViewConfiguration(.dark)
}

// UIKit
let vc = DataChatViewController(databasePath: path, model: myLLM)
// Configuration can be set on the rootView before presenting

Sheet presentation