[Vertex AI] Align text and add close keyboard function in Sample Proj…

…ect (#12887)

FirebaseVertexAI/Sample/ChatSample/Screens/ConversationScreen.swift

@@ -94,6 +94,8 @@ struct ConversationScreen: View {
  }
 
  private func sendOrStop() {
+ focusedField = nil
+
  if viewModel.busy {
  viewModel.stop()
  } else {

FirebaseVertexAI/Sample/FunctionCallingSample/Screens/FunctionCallingScreen.swift

@@ -65,6 +65,9 @@ struct FunctionCallingScreen: View {
  }
  }
  })
+ .onTapGesture {
+ focusedField = nil
+ }
  }
  InputField("Message...", text: $userPrompt) {
  Image(systemName: viewModel.busy ? "stop.circle.fill" : "arrow.up.circle.fill")

FirebaseVertexAI/Sample/GenerativeAIMultimodalSample/Screens/PhotoReasoningScreen.swift

@@ -20,9 +20,17 @@ import SwiftUI
 struct PhotoReasoningScreen: View {
  @StateObject var viewModel = PhotoReasoningViewModel()
 
+ enum FocusedField: Hashable {
+ case message
+ }
+
+ @FocusState
+ var focusedField: FocusedField?
+
  var body: some View {
  VStack {
  MultimodalInputField(text: $viewModel.userInput, selection: $viewModel.selectedItems)
+ .focused($focusedField, equals: .message)
  .onSubmit {
  onSendTapped()
  }
@@ -47,11 +55,16 @@ struct PhotoReasoningScreen: View {
  }
  }
  .navigationTitle("Multimodal sample")
+ .onAppear {
+ focusedField = .message
+ }
  }
 
  // MARK: - Actions
 
  private func onSendTapped() {
+ focusedField = nil
+
  Task {
  await viewModel.reason()
  }

FirebaseVertexAI/Sample/GenerativeAITextSample/Screens/SummarizeScreen.swift

@@ -28,19 +28,23 @@ struct SummarizeScreen: View {
 
  var body: some View {
  VStack {
- Text("Enter some text, then tap on _Go_ to summarize it.")
- HStack(alignment: .top) {
- TextField("Enter text summarize", text: $userInput, axis: .vertical)
- .textFieldStyle(.roundedBorder)
- .onSubmit {
+ VStack(alignment: .leading) {
+ Text("Enter some text, then tap on _Go_ to summarize it.")
+ .padding(.horizontal, 6)
+ HStack(alignment: .top) {
+ TextField("Enter text summarize", text: $userInput, axis: .vertical)
+ .focused($focusedField, equals: .message)
+ .textFieldStyle(.roundedBorder)
+ .onSubmit {
+ onSummarizeTapped()
+ }
+ Button("Go") {
  onSummarizeTapped()
  }
- Button("Go") {
- onSummarizeTapped()
+ .padding(.top, 4)
  }
- .padding(.top, 4)
  }
- .padding([.horizontal, .bottom])
+ .padding(.horizontal, 16)
 
  List {
  HStack(alignment: .top) {
@@ -61,6 +65,8 @@ struct SummarizeScreen: View {
  }
 
  private func onSummarizeTapped() {
+ focusedField = nil
+
  Task {
  await viewModel.summarize(inputText: userInput)
  }

FirebaseVertexAI/Sample/GenerativeAIUIComponents/Sources/GenerativeAIUIComponents/InputField.swift

@@ -60,10 +60,10 @@ public struct InputField<Label>: View where Label: View {
  }
 
  Button(action: submit, label: label)
- .padding(.top, 4)
+ .padding(.bottom, 4)
  }
  }
- .padding(.horizontal)
+ .padding(8)
  }
 }
 

FirebaseVertexAI/Sample/GenerativeAIUIComponents/Sources/GenerativeAIUIComponents/MultimodalInputField.swift

@@ -69,7 +69,7 @@ public struct MultimodalInputField: View {
  Button(action: showChooseAttachmentTypePicker) {
  Image(systemName: "plus")
  }
- .padding(.top, 4)
+ .padding(.top, 10)
 
  VStack(alignment: .leading) {
  TextField(
@@ -110,7 +110,7 @@ public struct MultimodalInputField: View {
  Button(action: submit) {
  Text("Go")
  }
- .padding(.top, 4)
+ .padding(.top, 8)
  }
  }
  .padding(.horizontal)