604 lines
21 KiB
Swift
604 lines
21 KiB
Swift
import MarkdownUI
|
|
import SwiftUI
|
|
|
|
struct SybilChatTranscriptView: View {
|
|
var messages: [Message]
|
|
var isLoading: Bool
|
|
var isSending: Bool
|
|
var topContentInset: CGFloat = 0
|
|
var bottomContentInset: CGFloat = 0
|
|
var bottomPinRequestID: Int = 0
|
|
|
|
@State private var hasTrackedToolCallMessages = false
|
|
@State private var knownToolCallMessageIDs: Set<String> = []
|
|
|
|
private let bottomAnchorID = "sybil-chat-transcript-bottom-anchor"
|
|
private var renderItems: [TranscriptRenderItem] {
|
|
buildTranscriptRenderItems(from: messages)
|
|
}
|
|
private var toolCallMessageIDs: Set<String> {
|
|
Set(messages.compactMap { $0.toolCallMetadata == nil ? nil : $0.id })
|
|
}
|
|
private var enteringToolCallMessageIDs: Set<String> {
|
|
guard hasTrackedToolCallMessages else { return [] }
|
|
return toolCallMessageIDs.subtracting(knownToolCallMessageIDs)
|
|
}
|
|
private var toolCallMessageIDSignature: String {
|
|
toolCallMessageIDs.sorted().joined(separator: "|")
|
|
}
|
|
|
|
var body: some View {
|
|
ScrollViewReader { proxy in
|
|
ScrollView {
|
|
LazyVStack(alignment: .leading, spacing: 26) {
|
|
if isLoading && messages.isEmpty {
|
|
Text("Loading messages…")
|
|
.font(.sybil(.footnote))
|
|
.foregroundStyle(SybilTheme.textMuted)
|
|
.padding(.top, 24)
|
|
}
|
|
|
|
ForEach(renderItems) { item in
|
|
switch item {
|
|
case let .message(message):
|
|
MessageBubble(message: message, isSending: isSending)
|
|
.frame(maxWidth: .infinity)
|
|
case let .toolGroup(id, messages):
|
|
ToolCallStackView(
|
|
groupID: id,
|
|
messages: messages,
|
|
entryAnimationIDs: enteringToolCallMessageIDs
|
|
)
|
|
.frame(maxWidth: .infinity)
|
|
.id(id)
|
|
}
|
|
}
|
|
|
|
Color.clear
|
|
.frame(height: 18 + bottomContentInset)
|
|
.id(bottomAnchorID)
|
|
}
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.padding(.horizontal, 14)
|
|
.padding(.top, 18 + topContentInset)
|
|
}
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.scrollDismissesKeyboard(.interactively)
|
|
.onAppear {
|
|
syncKnownToolCallMessageIDs()
|
|
scrollToBottom(with: proxy, animated: false)
|
|
}
|
|
.onChange(of: toolCallMessageIDSignature) { _, _ in
|
|
syncKnownToolCallMessageIDs()
|
|
}
|
|
.onChange(of: bottomPinRequestID) { _, _ in
|
|
scrollToBottom(with: proxy, animated: true)
|
|
}
|
|
}
|
|
}
|
|
|
|
private func scrollToBottom(with proxy: ScrollViewProxy, animated: Bool) {
|
|
let action = {
|
|
proxy.scrollTo(bottomAnchorID, anchor: .bottom)
|
|
}
|
|
|
|
if animated {
|
|
withAnimation(.easeOut(duration: 0.18), action)
|
|
} else {
|
|
action()
|
|
}
|
|
}
|
|
|
|
private func syncKnownToolCallMessageIDs() {
|
|
guard !toolCallMessageIDs.isEmpty else { return }
|
|
knownToolCallMessageIDs.formUnion(toolCallMessageIDs)
|
|
hasTrackedToolCallMessages = true
|
|
}
|
|
}
|
|
|
|
enum TranscriptRenderItem: Identifiable {
|
|
case message(Message)
|
|
case toolGroup(id: String, messages: [Message])
|
|
|
|
var id: String {
|
|
switch self {
|
|
case let .message(message):
|
|
return message.id
|
|
case let .toolGroup(id, _):
|
|
return "tool-group-\(id)"
|
|
}
|
|
}
|
|
}
|
|
|
|
func buildTranscriptRenderItems(from messages: [Message]) -> [TranscriptRenderItem] {
|
|
var items: [TranscriptRenderItem] = []
|
|
var toolRun: [Message] = []
|
|
|
|
func flushToolRun() {
|
|
guard !toolRun.isEmpty else { return }
|
|
if toolRun.count == 1, let message = toolRun.first {
|
|
items.append(.message(message))
|
|
} else if let first = toolRun.first {
|
|
items.append(.toolGroup(id: first.id, messages: toolRun))
|
|
}
|
|
toolRun.removeAll(keepingCapacity: true)
|
|
}
|
|
|
|
for message in messages {
|
|
if message.toolCallMetadata != nil {
|
|
toolRun.append(message)
|
|
} else {
|
|
flushToolRun()
|
|
items.append(.message(message))
|
|
}
|
|
}
|
|
|
|
flushToolRun()
|
|
return items
|
|
}
|
|
|
|
private struct MessageBubble: View {
|
|
var message: Message
|
|
var isSending: Bool
|
|
|
|
private var toolCallMetadata: ToolCallMetadata? {
|
|
message.toolCallMetadata
|
|
}
|
|
|
|
private var isUser: Bool {
|
|
message.role == .user
|
|
}
|
|
|
|
private var isPendingAssistant: Bool {
|
|
message.id.hasPrefix("temp-assistant-") &&
|
|
isSending &&
|
|
message.content.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
|
|
}
|
|
|
|
var body: some View {
|
|
HStack(alignment: .top, spacing: 0) {
|
|
leadingSpacer
|
|
|
|
if let toolCallMetadata {
|
|
ToolCallActivityChip(
|
|
metadata: toolCallMetadata,
|
|
fallbackContent: message.content,
|
|
createdAt: message.createdAt
|
|
)
|
|
} else {
|
|
VStack(alignment: .leading, spacing: 8) {
|
|
if !message.attachments.isEmpty {
|
|
SybilAttachmentListView(
|
|
attachments: message.attachments,
|
|
tone: isUser ? .user : .assistant
|
|
)
|
|
}
|
|
|
|
if isPendingAssistant {
|
|
HStack(spacing: 8) {
|
|
ProgressView()
|
|
.controlSize(.small)
|
|
.tint(SybilTheme.primary)
|
|
Text("Thinking…")
|
|
.font(.sybil(.footnote))
|
|
.foregroundStyle(SybilTheme.textMuted)
|
|
}
|
|
.padding(.vertical, 2)
|
|
} else if !message.content.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
Markdown(message.content)
|
|
.tint(SybilTheme.primary)
|
|
.foregroundStyle(isUser ? SybilTheme.text : SybilTheme.text.opacity(0.95))
|
|
.markdownTheme(.sybilReadable)
|
|
}
|
|
}
|
|
.padding(.horizontal, isUser ? 14 : 2)
|
|
.padding(.vertical, isUser ? 13 : 2)
|
|
.textSelection(.enabled)
|
|
.background(
|
|
Group {
|
|
if isUser {
|
|
RoundedRectangle(cornerRadius: 16)
|
|
.fill(SybilTheme.userBubbleGradient)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 16)
|
|
.stroke(SybilTheme.primary.opacity(0.45), lineWidth: 1)
|
|
)
|
|
} else {
|
|
RoundedRectangle(cornerRadius: 0)
|
|
.fill(Color.clear)
|
|
}
|
|
}
|
|
)
|
|
.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)
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct ToolCallStackView: View {
|
|
private struct CardLayout {
|
|
var x: CGFloat
|
|
var y: CGFloat
|
|
var scale: CGFloat
|
|
var opacity: Double
|
|
var zIndex: Double
|
|
}
|
|
|
|
var groupID: String
|
|
var messages: [Message]
|
|
var entryAnimationIDs: Set<String>
|
|
|
|
@Environment(\.accessibilityReduceMotion) private var reduceMotion
|
|
@State private var isExpanded = false
|
|
|
|
private let visibleCollapsedLimit = 4
|
|
private let cardHeight: CGFloat = 62
|
|
private let expandedGap: CGFloat = 10
|
|
private let collapsedStepX: CGFloat = 11
|
|
private let collapsedStepY: CGFloat = 10
|
|
private let toggleSize: CGFloat = 32
|
|
private let toggleGap: CGFloat = 12
|
|
|
|
private var animation: Animation? {
|
|
reduceMotion ? nil : .easeInOut(duration: 0.34)
|
|
}
|
|
|
|
private var visibleCollapsedCount: Int {
|
|
min(messages.count, visibleCollapsedLimit)
|
|
}
|
|
|
|
private var hiddenCount: Int {
|
|
max(0, messages.count - visibleCollapsedLimit)
|
|
}
|
|
|
|
private var containerHeight: CGFloat {
|
|
if isExpanded {
|
|
return cardHeight + CGFloat(max(0, messages.count - 1)) * (cardHeight + expandedGap)
|
|
}
|
|
return cardHeight + CGFloat(max(0, visibleCollapsedCount - 1)) * collapsedStepY
|
|
}
|
|
|
|
private var accessibilityLabel: String {
|
|
"\(messages.count) tool \(messages.count == 1 ? "call" : "calls")"
|
|
}
|
|
|
|
var body: some View {
|
|
HStack(alignment: .top, spacing: 0) {
|
|
GeometryReader { geometry in
|
|
let cardWidth = max(220, min(520, geometry.size.width - toggleSize - toggleGap))
|
|
let toggleX = cardWidth + toggleGap
|
|
|
|
ZStack(alignment: .topLeading) {
|
|
ForEach(Array(messages.enumerated()), id: \.element.id) { index, message in
|
|
let layout = layout(for: index)
|
|
let depth = messages.count - index - 1
|
|
let isHidden = !isExpanded && depth >= visibleCollapsedLimit
|
|
let shouldAnimateEntry = entryAnimationIDs.contains(message.id) && !isHidden
|
|
|
|
ToolCallStackCard(
|
|
message: message,
|
|
cardHeight: cardHeight,
|
|
compactLayout: true,
|
|
animateEntry: shouldAnimateEntry
|
|
)
|
|
.frame(width: cardWidth, height: cardHeight, alignment: .topLeading)
|
|
.scaleEffect(layout.scale, anchor: .topLeading)
|
|
.opacity(layout.opacity)
|
|
.offset(x: layout.x, y: layout.y)
|
|
.zIndex(layout.zIndex)
|
|
.allowsHitTesting(!isHidden)
|
|
.accessibilityHidden(isHidden)
|
|
}
|
|
|
|
if !isExpanded && hiddenCount > 0 {
|
|
Text("+\(hiddenCount)")
|
|
.font(.sybil(.caption2, weight: .semibold))
|
|
.foregroundStyle(SybilTheme.accent.opacity(0.95))
|
|
.padding(.horizontal, 7)
|
|
.padding(.vertical, 3)
|
|
.background(
|
|
Capsule()
|
|
.fill(Color.black.opacity(0.58))
|
|
.overlay(
|
|
Capsule()
|
|
.stroke(SybilTheme.accent.opacity(0.34), lineWidth: 1)
|
|
)
|
|
)
|
|
.offset(x: max(0, cardWidth - 56), y: containerHeight - 13)
|
|
.transition(.opacity)
|
|
}
|
|
|
|
Button {
|
|
withAnimation(animation) {
|
|
isExpanded.toggle()
|
|
}
|
|
} label: {
|
|
Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
|
|
.font(.system(size: 14, weight: .bold))
|
|
.foregroundStyle(SybilTheme.accent.opacity(0.95))
|
|
.frame(width: toggleSize, height: toggleSize)
|
|
.background(
|
|
Circle()
|
|
.fill(
|
|
LinearGradient(
|
|
colors: [
|
|
Color(red: 0.06, green: 0.08, blue: 0.15).opacity(0.96),
|
|
Color(red: 0.03, green: 0.04, blue: 0.10).opacity(0.96)
|
|
],
|
|
startPoint: .top,
|
|
endPoint: .bottom
|
|
)
|
|
)
|
|
.overlay(
|
|
Circle()
|
|
.stroke(SybilTheme.accent.opacity(0.38), lineWidth: 1)
|
|
)
|
|
.shadow(color: Color.black.opacity(0.30), radius: 10, x: 0, y: 6)
|
|
)
|
|
}
|
|
.buttonStyle(.plain)
|
|
.accessibilityLabel("\(isExpanded ? "Collapse" : "Expand") \(accessibilityLabel)")
|
|
.offset(x: toggleX, y: 8)
|
|
.zIndex(Double(messages.count + 2))
|
|
}
|
|
.frame(width: cardWidth + toggleSize + toggleGap, height: containerHeight, alignment: .topLeading)
|
|
.animation(animation, value: isExpanded)
|
|
}
|
|
.frame(height: containerHeight)
|
|
|
|
Spacer(minLength: 0)
|
|
}
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
}
|
|
|
|
private func layout(for index: Int) -> CardLayout {
|
|
if isExpanded {
|
|
return CardLayout(
|
|
x: 0,
|
|
y: CGFloat(index) * (cardHeight + expandedGap),
|
|
scale: 1,
|
|
opacity: 1,
|
|
zIndex: Double(messages.count - index)
|
|
)
|
|
}
|
|
|
|
let depth = messages.count - index - 1
|
|
let visibleDepth = min(depth, visibleCollapsedLimit - 1)
|
|
let isHidden = depth >= visibleCollapsedLimit
|
|
return CardLayout(
|
|
x: CGFloat(visibleDepth) * collapsedStepX,
|
|
y: CGFloat(visibleDepth) * collapsedStepY,
|
|
scale: max(0.88, 1 - CGFloat(visibleDepth) * 0.035),
|
|
opacity: isHidden ? 0 : max(0.34, 1 - Double(visibleDepth) * 0.22),
|
|
zIndex: isHidden ? 0 : Double(visibleCollapsedCount - visibleDepth)
|
|
)
|
|
}
|
|
}
|
|
|
|
private struct ToolCallStackCard: View {
|
|
var message: Message
|
|
var cardHeight: CGFloat
|
|
var compactLayout: Bool
|
|
var animateEntry: Bool
|
|
|
|
@Environment(\.accessibilityReduceMotion) private var reduceMotion
|
|
@State private var entryAnimationArmed = false
|
|
@State private var didEnter = false
|
|
|
|
private var isPreparingEntry: Bool {
|
|
(animateEntry || entryAnimationArmed) && !didEnter
|
|
}
|
|
|
|
var body: some View {
|
|
Group {
|
|
if let metadata = message.toolCallMetadata {
|
|
ToolCallActivityChip(
|
|
metadata: metadata,
|
|
fallbackContent: message.content,
|
|
createdAt: message.createdAt,
|
|
compactLayout: compactLayout
|
|
)
|
|
}
|
|
}
|
|
.frame(height: cardHeight, alignment: .top)
|
|
.scaleEffect(isPreparingEntry ? 1.025 : 1, anchor: .topLeading)
|
|
.offset(y: isPreparingEntry ? -8 : 0)
|
|
.rotation3DEffect(.degrees(isPreparingEntry ? 3 : 0), axis: (x: 1, y: 0, z: 0), anchor: .top)
|
|
.opacity(isPreparingEntry ? 0.72 : 1)
|
|
.onAppear {
|
|
guard !didEnter, !entryAnimationArmed else { return }
|
|
guard animateEntry else {
|
|
didEnter = true
|
|
return
|
|
}
|
|
entryAnimationArmed = true
|
|
if reduceMotion {
|
|
didEnter = true
|
|
} else {
|
|
withAnimation(.easeOut(duration: 0.32).delay(0.03)) {
|
|
didEnter = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct ToolCallActivityChip: View {
|
|
enum VisualState {
|
|
case initiated
|
|
case completed
|
|
case failed
|
|
}
|
|
|
|
var metadata: ToolCallMetadata
|
|
var fallbackContent: String
|
|
var createdAt: Date
|
|
var compactLayout: Bool = false
|
|
|
|
private var summary: String {
|
|
if let text = metadata.summary?.trimmingCharacters(in: .whitespacesAndNewlines), !text.isEmpty {
|
|
return text
|
|
}
|
|
if (metadata.status ?? "").lowercased() == "failed",
|
|
let error = metadata.error?.trimmingCharacters(in: .whitespacesAndNewlines),
|
|
!error.isEmpty {
|
|
return "Tool failed: \(error)"
|
|
}
|
|
if let preview = metadata.resultPreview?.trimmingCharacters(in: .whitespacesAndNewlines), !preview.isEmpty {
|
|
return preview
|
|
}
|
|
if !fallbackContent.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
|
|
return fallbackContent
|
|
}
|
|
return "Ran tool '\(metadata.toolName ?? "unknown_tool")'."
|
|
}
|
|
|
|
private var toolLabel: String {
|
|
let raw = metadata.toolName?.trimmingCharacters(in: .whitespacesAndNewlines) ?? ""
|
|
guard !raw.isEmpty else { return "Tool call" }
|
|
return raw
|
|
.replacingOccurrences(of: "_", with: " ")
|
|
.split(separator: " ")
|
|
.map { word in
|
|
word.prefix(1).uppercased() + word.dropFirst()
|
|
}
|
|
.joined(separator: " ")
|
|
}
|
|
|
|
private var iconName: String {
|
|
let name = (metadata.toolName ?? "").lowercased()
|
|
if name.contains("search") {
|
|
return "globe"
|
|
}
|
|
if name.contains("url") || name.contains("fetch") || name.contains("http") {
|
|
return "link"
|
|
}
|
|
return "wrench.and.screwdriver"
|
|
}
|
|
|
|
private var isFailed: Bool {
|
|
visualState == .failed
|
|
}
|
|
|
|
private var visualState: VisualState {
|
|
switch (metadata.status ?? "").lowercased() {
|
|
case "failed":
|
|
return .failed
|
|
case "initiated":
|
|
return .initiated
|
|
default:
|
|
return .completed
|
|
}
|
|
}
|
|
|
|
private var detailLabel: String {
|
|
var pieces: [String] = [stateLabel]
|
|
if let durationMs = metadata.durationMs, durationMs > 0 {
|
|
pieces.append("\(durationMs) ms")
|
|
}
|
|
pieces.append(createdAt.sybilShortTimeLabel)
|
|
return pieces.joined(separator: " • ")
|
|
}
|
|
|
|
var body: some View {
|
|
HStack(alignment: .top, spacing: 11) {
|
|
ZStack {
|
|
RoundedRectangle(cornerRadius: 9)
|
|
.fill(iconColor.opacity(0.13))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 9)
|
|
.stroke(iconColor.opacity(0.34), lineWidth: 1)
|
|
)
|
|
Image(systemName: iconName)
|
|
.font(.system(size: 14, weight: .semibold))
|
|
.foregroundStyle(iconColor)
|
|
}
|
|
.frame(width: 30, height: 30)
|
|
|
|
VStack(alignment: .leading, spacing: 4) {
|
|
Text(summary)
|
|
.font(.sybil(.subheadline))
|
|
.foregroundStyle(isFailed ? SybilTheme.danger.opacity(0.96) : SybilTheme.text.opacity(0.94))
|
|
.lineSpacing(3)
|
|
.lineLimit(compactLayout ? 1 : nil)
|
|
.truncationMode(.tail)
|
|
.fixedSize(horizontal: false, vertical: !compactLayout)
|
|
|
|
HStack(spacing: 6) {
|
|
Text(toolLabel)
|
|
.font(.sybil(.caption2, weight: .semibold))
|
|
.foregroundStyle(iconColor.opacity(0.90))
|
|
.lineLimit(1)
|
|
|
|
Text(detailLabel)
|
|
.font(.sybil(.caption2))
|
|
.foregroundStyle(SybilTheme.textMuted)
|
|
.lineLimit(1)
|
|
}
|
|
}
|
|
}
|
|
.textSelection(.enabled)
|
|
.padding(.horizontal, 12)
|
|
.padding(.vertical, 10)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 12)
|
|
.fill(backgroundGradient)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 12)
|
|
.stroke(iconColor.opacity(0.34), lineWidth: 1)
|
|
)
|
|
)
|
|
.frame(maxWidth: 520, alignment: .leading)
|
|
}
|
|
|
|
private var stateLabel: String {
|
|
switch visualState {
|
|
case .failed:
|
|
return "Failed"
|
|
case .initiated:
|
|
return "Running"
|
|
case .completed:
|
|
return "Completed"
|
|
}
|
|
}
|
|
|
|
private var iconColor: Color {
|
|
switch visualState {
|
|
case .failed:
|
|
return SybilTheme.danger
|
|
case .initiated:
|
|
return SybilTheme.warning
|
|
case .completed:
|
|
return SybilTheme.accent
|
|
}
|
|
}
|
|
|
|
private var backgroundGradient: LinearGradient {
|
|
switch visualState {
|
|
case .failed:
|
|
return SybilTheme.failedToolCallGradient
|
|
case .initiated:
|
|
return SybilTheme.runningToolCallGradient
|
|
case .completed:
|
|
return SybilTheme.toolCallGradient
|
|
}
|
|
}
|
|
}
|