Spezi Chat

https://github.com/stanfordspezi/spezichat
Admin
Spezi Chat provides UI components for building chat-based applications with support for text input,...
Tokens:1,829
Snippets:27
Trust Score:9.8
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic ChatView Example

Source: https://github.com/stanfordspezi/spezichat/blob/main/Sources/SpeziChat/SpeziChat.docc/SpeziChat.md

Demonstrates how to use ChatView to display a chat with export functionality. The export format is set to PDF.

```swift
struct ChatTestView: View {
    @State private var chat: Chat = [
        ChatEntity(role: .assistant, content: "Assistant Message!")
    ]

    
    var body: some View {
        ChatView($chat, exportFormat: .pdf)
            .navigationTitle("SpeziChat")
    }
}
```

--------------------------------

### MessageView Examples

Source: https://github.com/stanfordspezi/spezichat/blob/main/Sources/SpeziChat/SpeziChat.docc/SpeziChat.md

Illustrates how to use MessageView to display individual chat messages from different roles (user, assistant, hidden).

```swift
struct MessageViewTestView: View {
    var body: some View {
        VStack {
            MessageView(ChatEntity(role: .user, content: "User Message!"))
            MessageView(ChatEntity(role: .assistant, content: "Assistant Message!"))
            MessageView(ChatEntity(role: .hidden(type: .unknown), content: "System Message (hidden)!"))
        }
            .padding()
    }
}
```

--------------------------------

### Basic MessagesView Example

Source: https://github.com/stanfordspezi/spezichat/blob/main/Sources/SpeziChat/SpeziChat.docc/SpeziChat.md

Shows a basic implementation of MessagesView to display a list of chat entities. The view automatically scrolls to the newest message.

```swift
struct MessagesViewTestView: View {
    @State private var chat: Chat = [
        ChatEntity(role: .user, content: "User Message!"),
        ChatEntity(role: .assistant, content: "Assistant Message!")
    ]

    
    var body: some View {
        MessagesView($chat)
    }
}
```

--------------------------------

### MessageInputView Example

Source: https://github.com/stanfordspezi/spezichat/blob/main/Sources/SpeziChat/SpeziChat.docc/SpeziChat.md

Demonstrates the usage of MessageInputView for handling user text or speech input. It shows how to attach messages to a chat binding and handle input view height changes.

```swift
struct MessageInputTestView: View {
    @State private var chat: Chat = []
    @State private var disableInput = false
    
    
    var body: some View {
        VStack {
            Spacer()
            MessageInputView($chat, messagePlaceholder: "TestMessage")
                .disabled(disableInput)
                /// Get the height of the `MessageInputView` via a SwiftUI `PreferenceKey`
                /// Indicates the height of the input message field, necessary for properly shifting other view content.
                .onPreferenceChange(MessageInputViewHeightKey.self) { newValue in
                    let messageInputHeight: CGFloat = newValue
                    // ...
                }
        }
    }
}
```

--------------------------------

### Integrate MessageInputView in SwiftUI

Source: https://github.com/stanfordspezi/spezichat/blob/main/README.md

Demonstrates how to integrate the MessageInputView into a SwiftUI view. It shows how to bind the chat data and handle preference changes for the input view's height.

```swift
struct MessageInputTestView: View {
    @State private var chat: Chat = []
    @State private var disableInput = false
    
    
    var body: some View {
        VStack {
            Spacer()
            MessageInputView($chat, messagePlaceholder: "TestMessage")
                .disabled(disableInput)
                /// Get the height of the `MessageInputView` via a SwiftUI `PreferenceKey`
                .onPreferenceChange(MessageInputViewHeightKey.self) { newValue in
                    let messageInputHeight: CGFloat = newValue
                    // ...
                }
        }
    }
}
```

--------------------------------

### Display a List of Chat Messages

Source: https://github.com/stanfordspezi/spezichat/blob/main/README.md

Use MessagesView to display a list of chat entities. The view automatically scrolls to the newest message.

```swift
struct MessagesViewTestView: View {
    @State private var chat: Chat = [
        ChatEntity(role: .user, content: "User Message!"),
        ChatEntity(role: .assistant, content: "Assistant Message!")
    ]


    var body: some View {
        MessagesView($chat)
    }
}
```
Tokens:
Raw