Compare commits
6 Commits
70b831557f
...
codex/ios-
| Author | SHA1 | Date | |
|---|---|---|---|
| 188c460826 | |||
| 90278020f5 | |||
| cafe4bb9ae | |||
| ba6fc9c660 | |||
| fa429dcbb3 | |||
| 05989e9fae |
3
Tiltfile
3
Tiltfile
@@ -1,5 +1,8 @@
|
||||
update_settings(max_parallel_updates=4)
|
||||
|
||||
load('ext://dotenv', 'dotenv')
|
||||
dotenv() # defaults to .env in the current directory
|
||||
|
||||
local_resource(
|
||||
"server",
|
||||
cmd="npm ci --no-audit --no-fund",
|
||||
|
||||
@@ -4,8 +4,9 @@ public struct SplitView: View {
|
||||
@State private var viewModel = SybilViewModel()
|
||||
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
|
||||
|
||||
public init() {
|
||||
@MainActor public init() {
|
||||
SybilFontRegistry.registerIfNeeded()
|
||||
SybilTheme.applySystemAppearance()
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
@@ -25,7 +26,6 @@ public struct SplitView: View {
|
||||
} else {
|
||||
NavigationSplitView {
|
||||
SybilSidebarView(viewModel: viewModel)
|
||||
.navigationTitle("Sybil")
|
||||
} detail: {
|
||||
SybilWorkspaceView(viewModel: viewModel)
|
||||
}
|
||||
@@ -34,6 +34,7 @@ public struct SplitView: View {
|
||||
}
|
||||
}
|
||||
.font(.sybil(.body))
|
||||
.preferredColorScheme(.dark)
|
||||
.task {
|
||||
await viewModel.bootstrap()
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ struct SybilChatTranscriptView: View {
|
||||
var body: some View {
|
||||
ScrollViewReader { proxy in
|
||||
ScrollView {
|
||||
LazyVStack(alignment: .leading, spacing: 24) {
|
||||
LazyVStack(alignment: .leading, spacing: 26) {
|
||||
if isLoading && messages.isEmpty {
|
||||
Text("Loading messages…")
|
||||
.font(.sybil(.footnote))
|
||||
@@ -25,6 +25,7 @@ struct SybilChatTranscriptView: View {
|
||||
|
||||
ForEach(messages) { message in
|
||||
MessageBubble(message: message, isSending: isSending)
|
||||
.frame(maxWidth: .infinity)
|
||||
.id(message.id)
|
||||
}
|
||||
|
||||
@@ -86,10 +87,8 @@ private struct MessageBubble: View {
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
HStack(alignment: .top) {
|
||||
if isUser {
|
||||
Spacer(minLength: 44)
|
||||
}
|
||||
HStack(alignment: .top, spacing: 0) {
|
||||
leadingSpacer
|
||||
|
||||
if let toolCallMetadata {
|
||||
ToolCallActivityChip(
|
||||
@@ -113,13 +112,11 @@ private struct MessageBubble: View {
|
||||
Markdown(message.content)
|
||||
.tint(SybilTheme.primary)
|
||||
.foregroundStyle(isUser ? SybilTheme.text : SybilTheme.text.opacity(0.95))
|
||||
.markdownTextStyle {
|
||||
FontSize(15)
|
||||
}
|
||||
.markdownTheme(.sybilReadable)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, isUser ? 14 : 2)
|
||||
.padding(.vertical, isUser ? 11 : 2)
|
||||
.padding(.vertical, isUser ? 13 : 2)
|
||||
.background(
|
||||
Group {
|
||||
if isUser {
|
||||
@@ -138,12 +135,24 @@ private struct MessageBubble: View {
|
||||
.frame(maxWidth: isUser ? 420 : nil, alignment: isUser ? .trailing : .leading)
|
||||
}
|
||||
|
||||
trailingSpacer
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: isUser ? .trailing : .leading)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var leadingSpacer: some View {
|
||||
if isUser {
|
||||
Spacer(minLength: 44)
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var trailingSpacer: some View {
|
||||
if !isUser {
|
||||
Spacer(minLength: 0)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: isUser ? .trailing : .leading)
|
||||
}
|
||||
}
|
||||
|
||||
private struct ToolCallActivityChip: View {
|
||||
@@ -224,6 +233,7 @@ private struct ToolCallActivityChip: View {
|
||||
Text(summary)
|
||||
.font(.sybil(.subheadline))
|
||||
.foregroundStyle(isFailed ? SybilTheme.danger.opacity(0.96) : SybilTheme.text.opacity(0.94))
|
||||
.lineSpacing(3)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
|
||||
HStack(spacing: 6) {
|
||||
|
||||
165
ios/Packages/Sybil/Sources/Sybil/SybilMarkdownTheme.swift
Normal file
165
ios/Packages/Sybil/Sources/Sybil/SybilMarkdownTheme.swift
Normal file
@@ -0,0 +1,165 @@
|
||||
import MarkdownUI
|
||||
import SwiftUI
|
||||
|
||||
@MainActor
|
||||
extension Theme {
|
||||
static let sybilReadable: Theme = {
|
||||
SybilFontRegistry.registerIfNeeded()
|
||||
|
||||
return Theme()
|
||||
.text {
|
||||
FontFamily(.custom("Inter"))
|
||||
FontSize(15)
|
||||
ForegroundColor(SybilTheme.text)
|
||||
}
|
||||
.code {
|
||||
FontFamilyVariant(.monospaced)
|
||||
FontSize(.em(0.88))
|
||||
BackgroundColor(SybilTheme.surfaceStrong.opacity(0.78))
|
||||
}
|
||||
.strong {
|
||||
FontWeight(.semibold)
|
||||
}
|
||||
.link {
|
||||
ForegroundColor(SybilTheme.accent)
|
||||
}
|
||||
.heading1 { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.18))
|
||||
.markdownMargin(top: .em(1.1), bottom: .em(0.5))
|
||||
.markdownTextStyle {
|
||||
FontWeight(.semibold)
|
||||
FontSize(.em(1.45))
|
||||
}
|
||||
}
|
||||
.heading2 { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.18))
|
||||
.markdownMargin(top: .em(1.0), bottom: .em(0.45))
|
||||
.markdownTextStyle {
|
||||
FontWeight(.semibold)
|
||||
FontSize(.em(1.25))
|
||||
}
|
||||
}
|
||||
.heading3 { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.18))
|
||||
.markdownMargin(top: .em(0.9), bottom: .em(0.4))
|
||||
.markdownTextStyle {
|
||||
FontWeight(.semibold)
|
||||
FontSize(.em(1.12))
|
||||
}
|
||||
}
|
||||
.heading4 { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.18))
|
||||
.markdownMargin(top: .em(0.85), bottom: .em(0.35))
|
||||
.markdownTextStyle {
|
||||
FontWeight(.semibold)
|
||||
}
|
||||
}
|
||||
.heading5 { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.18))
|
||||
.markdownMargin(top: .em(0.8), bottom: .em(0.35))
|
||||
.markdownTextStyle {
|
||||
FontWeight(.semibold)
|
||||
FontSize(.em(0.92))
|
||||
}
|
||||
}
|
||||
.heading6 { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.18))
|
||||
.markdownMargin(top: .em(0.8), bottom: .em(0.35))
|
||||
.markdownTextStyle {
|
||||
FontWeight(.semibold)
|
||||
FontSize(.em(0.86))
|
||||
}
|
||||
}
|
||||
.paragraph { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.36))
|
||||
.markdownMargin(top: .zero, bottom: .em(0.82))
|
||||
}
|
||||
.blockquote { configuration in
|
||||
HStack(alignment: .top, spacing: 10) {
|
||||
RoundedRectangle(cornerRadius: 2)
|
||||
.fill(SybilTheme.primary.opacity(0.55))
|
||||
.frame(width: 3)
|
||||
configuration.label
|
||||
.markdownTextStyle {
|
||||
ForegroundColor(SybilTheme.textMuted)
|
||||
}
|
||||
}
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.markdownMargin(top: .em(0.25), bottom: .em(0.9))
|
||||
}
|
||||
.codeBlock { configuration in
|
||||
ScrollView(.horizontal) {
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.28))
|
||||
.markdownTextStyle {
|
||||
FontFamilyVariant(.monospaced)
|
||||
FontSize(.em(0.88))
|
||||
}
|
||||
.padding(12)
|
||||
}
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(SybilTheme.surfaceStrong.opacity(0.82))
|
||||
)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.stroke(SybilTheme.border.opacity(0.72), lineWidth: 1)
|
||||
)
|
||||
.markdownMargin(top: .em(0.2), bottom: .em(1))
|
||||
}
|
||||
.list { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.markdownMargin(top: .em(0.08), bottom: .em(0.78))
|
||||
}
|
||||
.listItem { configuration in
|
||||
configuration.label
|
||||
.markdownMargin(top: .em(0.28))
|
||||
}
|
||||
.table { configuration in
|
||||
configuration.label
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.markdownTableBorderStyle(.init(color: SybilTheme.border.opacity(0.85)))
|
||||
.markdownTableBackgroundStyle(
|
||||
.alternatingRows(
|
||||
SybilTheme.surface.opacity(0.72),
|
||||
SybilTheme.surfaceStrong.opacity(0.62)
|
||||
)
|
||||
)
|
||||
.markdownMargin(top: .em(0.2), bottom: .em(1))
|
||||
}
|
||||
.tableCell { configuration in
|
||||
configuration.label
|
||||
.markdownTextStyle {
|
||||
if configuration.row == 0 {
|
||||
FontWeight(.semibold)
|
||||
}
|
||||
BackgroundColor(nil)
|
||||
}
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
.relativeLineSpacing(.em(0.30))
|
||||
.padding(.vertical, 7)
|
||||
.padding(.horizontal, 11)
|
||||
}
|
||||
.thematicBreak {
|
||||
Divider()
|
||||
.overlay(SybilTheme.border.opacity(0.82))
|
||||
.markdownMargin(top: .em(1.2), bottom: .em(1.2))
|
||||
}
|
||||
}()
|
||||
}
|
||||
@@ -30,8 +30,8 @@ struct SybilPhoneShellView: View {
|
||||
.navigationTitle("")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .principal) {
|
||||
SybilWordmark(size: 19)
|
||||
ToolbarItem(placement: .topBarLeading) {
|
||||
SybilWordmark(size: 18)
|
||||
}
|
||||
}
|
||||
.navigationDestination(for: PhoneRoute.self) { route in
|
||||
|
||||
@@ -97,9 +97,7 @@ struct SybilSearchResultsView: View {
|
||||
Markdown(answer)
|
||||
.tint(SybilTheme.primary)
|
||||
.foregroundStyle(SybilTheme.text)
|
||||
.markdownTextStyle {
|
||||
FontSize(15)
|
||||
}
|
||||
.markdownTheme(.sybilReadable)
|
||||
}
|
||||
|
||||
if let answerError = search?.answerError, !answerError.isEmpty {
|
||||
@@ -180,6 +178,7 @@ private struct SearchResultCard: View {
|
||||
Text(result.title.orEmpty.orFallback(result.url))
|
||||
.font(.sybil(.headline))
|
||||
.foregroundStyle(SybilTheme.primary.opacity(0.96))
|
||||
.lineSpacing(2)
|
||||
.multilineTextAlignment(.leading)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
@@ -187,6 +186,7 @@ private struct SearchResultCard: View {
|
||||
Text(result.title.orEmpty.orFallback(result.url))
|
||||
.font(.sybil(.headline))
|
||||
.foregroundStyle(SybilTheme.primary.opacity(0.96))
|
||||
.lineSpacing(2)
|
||||
}
|
||||
|
||||
if let date = result.publishedDate, !date.isEmpty {
|
||||
@@ -202,6 +202,7 @@ private struct SearchResultCard: View {
|
||||
Text(result.url)
|
||||
.font(.sybil(.footnote))
|
||||
.foregroundStyle(SybilTheme.text.opacity(0.92))
|
||||
.lineSpacing(2)
|
||||
.lineLimit(3)
|
||||
.textSelection(.enabled)
|
||||
|
||||
@@ -210,6 +211,7 @@ private struct SearchResultCard: View {
|
||||
Text("• \(highlight)")
|
||||
.font(.sybil(.caption))
|
||||
.foregroundStyle(SybilTheme.textMuted)
|
||||
.lineSpacing(2)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,8 +18,6 @@ struct SybilSidebarView: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
VStack(alignment: .leading, spacing: 14) {
|
||||
SybilWordmark(size: 31)
|
||||
|
||||
VStack(spacing: 10) {
|
||||
sidebarActionButton(
|
||||
title: "New chat",
|
||||
@@ -174,6 +172,13 @@ struct SybilSidebarView: View {
|
||||
.padding(10)
|
||||
}
|
||||
.background(SybilTheme.panelGradient)
|
||||
.navigationTitle("")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .topBarLeading) {
|
||||
SybilWordmark(size: 18)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func sidebarActionButton(
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import CoreText
|
||||
import Foundation
|
||||
import SwiftUI
|
||||
import UIKit
|
||||
|
||||
enum SybilFontRegistry {
|
||||
static func registerIfNeeded() {
|
||||
@@ -78,6 +79,23 @@ enum SybilTheme {
|
||||
static let userBubble = Color(red: 0.29, green: 0.13, blue: 0.65)
|
||||
static let danger = Color(red: 0.96, green: 0.32, blue: 0.40)
|
||||
|
||||
@MainActor static func applySystemAppearance() {
|
||||
let navAppearance = UINavigationBarAppearance()
|
||||
navAppearance.configureWithOpaqueBackground()
|
||||
navAppearance.backgroundColor = UIColor(red: 0.02, green: 0.02, blue: 0.05, alpha: 1)
|
||||
navAppearance.shadowColor = UIColor(red: 0.24, green: 0.20, blue: 0.38, alpha: 0.9)
|
||||
navAppearance.titleTextAttributes = [
|
||||
.foregroundColor: UIColor(red: 0.96, green: 0.94, blue: 1.0, alpha: 1)
|
||||
]
|
||||
navAppearance.largeTitleTextAttributes = navAppearance.titleTextAttributes
|
||||
|
||||
UINavigationBar.appearance().prefersLargeTitles = false
|
||||
UINavigationBar.appearance().standardAppearance = navAppearance
|
||||
UINavigationBar.appearance().compactAppearance = navAppearance
|
||||
UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
|
||||
UINavigationBar.appearance().compactScrollEdgeAppearance = navAppearance
|
||||
}
|
||||
|
||||
static var backgroundGradient: LinearGradient {
|
||||
LinearGradient(
|
||||
colors: [
|
||||
|
||||
@@ -3,13 +3,8 @@ 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
|
||||
@@ -18,7 +13,7 @@ struct SybilWorkspaceView: View {
|
||||
}
|
||||
|
||||
private var showsHeader: Bool {
|
||||
!isCompact || viewModel.errorMessage != nil
|
||||
viewModel.errorMessage != nil
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
@@ -55,20 +50,17 @@ struct SybilWorkspaceView: View {
|
||||
composerBar
|
||||
}
|
||||
}
|
||||
.navigationTitle(isCompact ? "" : viewModel.selectedTitle)
|
||||
.navigationTitle(viewModel.selectedTitle)
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbarRole(.editor)
|
||||
.toolbar {
|
||||
if isCompact {
|
||||
ToolbarItem(placement: .principal) {
|
||||
Text(viewModel.selectedTitle)
|
||||
.font(.sybil(.headline, weight: .semibold))
|
||||
.foregroundStyle(SybilTheme.text)
|
||||
.lineLimit(1)
|
||||
}
|
||||
}
|
||||
|
||||
if isCompact && !viewModel.isSearchMode && !isSettingsSelected {
|
||||
if !isSettingsSelected {
|
||||
ToolbarItem(placement: .topBarTrailing) {
|
||||
compactProviderModelMenu
|
||||
if viewModel.isSearchMode {
|
||||
searchModeChip
|
||||
} else {
|
||||
providerModelMenu
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -83,30 +75,6 @@ struct SybilWorkspaceView: View {
|
||||
|
||||
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))
|
||||
@@ -119,7 +87,7 @@ struct SybilWorkspaceView: View {
|
||||
.background(SybilTheme.panelGradient.opacity(0.58))
|
||||
}
|
||||
|
||||
private var compactProviderModelMenu: some View {
|
||||
private var providerModelMenu: some View {
|
||||
Menu {
|
||||
Text("\(viewModel.provider.displayName) • \(viewModel.model)")
|
||||
.font(.sybil(.caption))
|
||||
@@ -163,57 +131,22 @@ struct SybilWorkspaceView: View {
|
||||
.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)
|
||||
private var searchModeChip: some View {
|
||||
Label("Search", systemImage: "globe")
|
||||
.font(.sybil(.caption, weight: .medium))
|
||||
.foregroundStyle(SybilTheme.text)
|
||||
.foregroundStyle(SybilTheme.accent)
|
||||
.padding(.horizontal, 10)
|
||||
.padding(.vertical, 7)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(SybilTheme.surface.opacity(0.78))
|
||||
Capsule()
|
||||
.fill(SybilTheme.accent.opacity(0.10))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.stroke(SybilTheme.border.opacity(0.88), lineWidth: 1)
|
||||
Capsule()
|
||||
.stroke(SybilTheme.accent.opacity(0.24), 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(
|
||||
|
||||
Reference in New Issue
Block a user