Swiftui Scrollview -Verhalten in Chatgpt wie UI ⇐ IOS

[Anonymous]

Ich versuche, das Chat -Verhalten der beliebten AI -Chat -Assistenten wie Chatgpt, LE -Chat oder Verwirrung in iOS mit Swiftui zu mikeln. Wenn es bereits ein aktives Frage- und Antwortpaar gibt, das sichtbar ist, sollte dieses Paar nach oben scrollen, damit das neue Frage und das Antwortpaar sichtbar sind. Das Scrollen nach unten wird immer noch alle vorherigen Paare enthüllen. Wenn Sie eine andere Nachricht senden, werden alles erneut aufgedreht, sodass nur das neue Paar sichtbar ist. Sobald die Tastatur angezeigt wird, scrollen Sie nach unten. Aber ich möchte, dass die Scrollview die Tastatur ignoriert und überhaupt nicht scrollt, um die Größe zu ändern. Aber ich bin ein bisschen verloren in den anderen Optionen, die ich versuchen könnte. Perhaps using something like Swift Introspect to access the underlying UIScrollView, but I'm also unsure about what properties to modify there to handle this issue.
Below are a video showing the issue and the code used to demo the issue and implementing my current chat behavior.
The video below shows the issue:

Code aus dem Video:

Code: Select all

struct DemoView: View {

struct Message: Identifiable {

let id: UUID
let content: String
}

@State private var messages: [Message] = []
@State private var scrollPosition: UUID?
@State private var message = ""

var body: some View {
NavigationStack {
VStack {
GeometryReader { geometryProxy in
let scrollViewHeight = geometryProxy.size.height

ScrollView {
VStack(alignment: .leading, spacing: 10) {
ForEach(messages) { message in
VStack {
VStack(alignment: .trailing) {
Text(message.content)
.multilineTextAlignment(.leading)
.padding(.bottom, 20)
.frame(maxWidth: .infinity, alignment: .trailing)
}

VStack(alignment: .leading) {
Text("Assistant reply")
.multilineTextAlignment(.leading)
.padding(.bottom, 20)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
.frame(
minHeight: message.id == messages.last?.id ? scrollViewHeight : 0,
alignment: .top
)
}
}
.frame(maxWidth: .infinity)
.padding(.horizontal, 20)
.ignoresSafeArea(.keyboard, edges: .bottom)
}
.scrollPosition(id: $scrollPosition, anchor: .bottom)
}
.safeAreaInset(edge: .bottom) {
VStack {
TextField("Ask anything...", text: $message)
.multilineTextAlignment(.leading)
.font(.body)
.onSubmit {
guard !message.isEmpty else {
return
}

let id = UUID()

messages.append(Message(id: id, content: message))
message = ""

withAnimation {
scrollPosition = id
}
}
}
.contentShape(Rectangle())
.frame(maxWidth: .infinity)
.padding(16)
.background(.gray)
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
}
}
.padding(16)
}
}
}