276 lines
10 KiB
Swift
276 lines
10 KiB
Swift
import Observation
|
|
import SwiftUI
|
|
|
|
struct SybilWorkspaceView: View {
|
|
@Bindable var viewModel: SybilViewModel
|
|
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
|
|
@FocusState private var composerFocused: Bool
|
|
|
|
private var isCompact: Bool {
|
|
horizontalSizeClass == .compact
|
|
}
|
|
|
|
private var isSettingsSelected: Bool {
|
|
if case .settings = viewModel.selectedItem {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
private var showsHeader: Bool {
|
|
!isCompact || viewModel.errorMessage != nil
|
|
}
|
|
|
|
var body: some View {
|
|
VStack(spacing: 0) {
|
|
if showsHeader {
|
|
header
|
|
|
|
Divider()
|
|
.overlay(SybilTheme.border)
|
|
}
|
|
|
|
Group {
|
|
if isSettingsSelected {
|
|
SybilSettingsView(viewModel: viewModel)
|
|
} else if viewModel.isSearchMode {
|
|
SybilSearchResultsView(
|
|
search: viewModel.selectedSearch,
|
|
isLoading: viewModel.isLoadingSelection,
|
|
isRunning: viewModel.isSending
|
|
)
|
|
} else {
|
|
SybilChatTranscriptView(
|
|
messages: viewModel.displayedMessages,
|
|
isLoading: viewModel.isLoadingSelection,
|
|
isSending: viewModel.isSending
|
|
)
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
|
|
if viewModel.showsComposer {
|
|
Divider()
|
|
.overlay(SybilTheme.border)
|
|
composerBar
|
|
}
|
|
}
|
|
.navigationTitle(isCompact ? "" : viewModel.selectedTitle)
|
|
.toolbar {
|
|
if isCompact {
|
|
ToolbarItem(placement: .principal) {
|
|
Text(viewModel.selectedTitle)
|
|
.font(.sybil(.headline, weight: .semibold))
|
|
.foregroundStyle(SybilTheme.text)
|
|
.lineLimit(1)
|
|
}
|
|
}
|
|
|
|
if isCompact && !viewModel.isSearchMode && !isSettingsSelected {
|
|
ToolbarItem(placement: .topBarTrailing) {
|
|
compactProviderModelMenu
|
|
}
|
|
}
|
|
}
|
|
.background(SybilTheme.background)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
|
|
}
|
|
|
|
private var header: some View {
|
|
VStack(alignment: .leading, spacing: 12) {
|
|
if !isCompact {
|
|
HStack(alignment: .top, spacing: 12) {
|
|
Spacer()
|
|
|
|
if !viewModel.isSearchMode && !isSettingsSelected {
|
|
providerControls
|
|
} else if viewModel.isSearchMode {
|
|
Label("Search mode", systemImage: "globe")
|
|
.font(.sybil(.caption, weight: .medium))
|
|
.foregroundStyle(SybilTheme.accent)
|
|
.padding(.horizontal, 10)
|
|
.padding(.vertical, 7)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 10)
|
|
.fill(SybilTheme.accent.opacity(0.10))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 10)
|
|
.stroke(SybilTheme.accent.opacity(0.24), lineWidth: 1)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
if let error = viewModel.errorMessage {
|
|
Text(error)
|
|
.font(.sybil(.footnote))
|
|
.foregroundStyle(SybilTheme.danger)
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
}
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.vertical, 12)
|
|
.background(SybilTheme.panelGradient.opacity(0.58))
|
|
}
|
|
|
|
private var compactProviderModelMenu: some View {
|
|
Menu {
|
|
Text("\(viewModel.provider.displayName) • \(viewModel.model)")
|
|
.font(.sybil(.caption))
|
|
|
|
Divider()
|
|
|
|
ForEach(Provider.allCases, id: \.self) { candidate in
|
|
Menu(candidate.displayName) {
|
|
let models = viewModel.modelOptions(for: candidate)
|
|
if models.isEmpty {
|
|
Text("No models")
|
|
} else {
|
|
ForEach(models, id: \.self) { candidateModel in
|
|
Button {
|
|
viewModel.setProvider(candidate, model: candidateModel)
|
|
} label: {
|
|
if viewModel.provider == candidate && viewModel.model == candidateModel {
|
|
Label(candidateModel, systemImage: "checkmark")
|
|
} else {
|
|
Text(candidateModel)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} label: {
|
|
Image(systemName: "ellipsis")
|
|
.font(.system(size: 18, weight: .semibold))
|
|
.foregroundStyle(SybilTheme.text)
|
|
.frame(width: 34, height: 34)
|
|
.background(
|
|
Circle()
|
|
.fill(SybilTheme.surface.opacity(0.78))
|
|
)
|
|
.overlay(
|
|
Circle()
|
|
.stroke(SybilTheme.border.opacity(0.82), lineWidth: 1)
|
|
)
|
|
}
|
|
.accessibilityLabel("Provider and model")
|
|
}
|
|
|
|
private var providerControls: some View {
|
|
HStack(spacing: 8) {
|
|
Menu {
|
|
ForEach(Provider.allCases, id: \.self) { candidate in
|
|
Button(candidate.displayName) {
|
|
viewModel.setProvider(candidate)
|
|
}
|
|
}
|
|
} label: {
|
|
Label(viewModel.provider.displayName, systemImage: "chevron.down")
|
|
.labelStyle(.titleAndIcon)
|
|
.font(.sybil(.caption, weight: .medium))
|
|
.foregroundStyle(SybilTheme.text)
|
|
.padding(.horizontal, 10)
|
|
.padding(.vertical, 7)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 10)
|
|
.fill(SybilTheme.surface.opacity(0.78))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 10)
|
|
.stroke(SybilTheme.border.opacity(0.88), lineWidth: 1)
|
|
)
|
|
)
|
|
}
|
|
|
|
Menu {
|
|
ForEach(viewModel.providerModelOptions, id: \.self) { model in
|
|
Button(model) {
|
|
viewModel.setModel(model)
|
|
}
|
|
}
|
|
} label: {
|
|
Label(viewModel.model, systemImage: "chevron.down")
|
|
.labelStyle(.titleAndIcon)
|
|
.font(.sybil(.caption, weight: .medium))
|
|
.foregroundStyle(SybilTheme.text)
|
|
.lineLimit(1)
|
|
.padding(.horizontal, 10)
|
|
.padding(.vertical, 7)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 10)
|
|
.fill(SybilTheme.surface.opacity(0.78))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 10)
|
|
.stroke(SybilTheme.border.opacity(0.88), lineWidth: 1)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
private var composerBar: some View {
|
|
HStack(alignment: .bottom, spacing: 10) {
|
|
TextField(
|
|
viewModel.isSearchMode ? "Search the web" : "Message Sybil",
|
|
text: $viewModel.composer,
|
|
axis: .vertical
|
|
)
|
|
.focused($composerFocused)
|
|
.textInputAutocapitalization(.sentences)
|
|
.autocorrectionDisabled(false)
|
|
.lineLimit(1 ... 6)
|
|
.submitLabel(.send)
|
|
.onSubmit {
|
|
Task {
|
|
await viewModel.sendComposer()
|
|
}
|
|
}
|
|
.padding(.horizontal, 12)
|
|
.padding(.vertical, 10)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 12)
|
|
.fill(SybilTheme.composerGradient)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 12)
|
|
.stroke(SybilTheme.primary.opacity(0.34), lineWidth: 1)
|
|
)
|
|
)
|
|
.foregroundStyle(SybilTheme.text)
|
|
|
|
Button {
|
|
Task {
|
|
await viewModel.sendComposer()
|
|
}
|
|
} label: {
|
|
Image(systemName: viewModel.isSearchMode ? "magnifyingglass" : "arrow.up")
|
|
.font(.system(size: 17, weight: .semibold))
|
|
.frame(width: 40, height: 40)
|
|
.background(
|
|
Circle()
|
|
.fill(
|
|
viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending
|
|
? AnyShapeStyle(SybilTheme.surface)
|
|
: AnyShapeStyle(SybilTheme.primaryGradient)
|
|
)
|
|
)
|
|
.foregroundStyle(viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending ? SybilTheme.textMuted : SybilTheme.text)
|
|
}
|
|
.buttonStyle(.plain)
|
|
.disabled(viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending)
|
|
}
|
|
.padding(.horizontal, 14)
|
|
.padding(.vertical, 12)
|
|
.background(
|
|
LinearGradient(
|
|
colors: [
|
|
SybilTheme.background.opacity(0.18),
|
|
SybilTheme.background.opacity(0.96)
|
|
],
|
|
startPoint: .top,
|
|
endPoint: .bottom
|
|
)
|
|
)
|
|
}
|
|
}
|