@@ -250,80 +250,99 @@ struct ChatPanelInputArea: View {
250250
251251 var body : some View {
252252 HStack {
253- // clear button
254- Button ( action: {
255- chat. clear ( )
256- } ) {
257- Group {
258- if #available( macOS 13 . 0 , * ) {
259- Image ( systemName: " eraser.line.dashed.fill " )
260- } else {
261- Image ( systemName: " trash.fill " )
262- }
263- }
264- . padding ( 6 )
265- . background {
266- Circle ( ) . fill ( Color ( nsColor: . controlBackgroundColor) )
267- }
268- . overlay {
269- Circle ( )
270- . stroke ( Color ( nsColor: . controlColor) , lineWidth: 1 )
271- }
272- }
273- . buttonStyle ( . plain)
253+ clearButton
254+ textEditor
255+ }
256+ . onAppear {
257+ isInputAreaFocused = true
258+ }
259+ . padding ( 8 )
260+ . background ( . ultraThickMaterial)
261+ }
274262
275- HStack ( spacing: 0 ) {
276- Group {
277- if #available( macOS 13 . 0 , * ) {
278- TextField ( " Type a message " , text: $typedMessage, axis: . vertical)
279- } else {
280- TextEditor ( text: $typedMessage)
281- . frame ( height: 42 , alignment: . leading)
282- . font ( . body)
283- . background ( Color . clear)
284- }
285- }
286- . focused ( $isInputAreaFocused)
287- . lineLimit ( 3 )
288- . multilineTextAlignment ( . leading)
289- . textFieldStyle ( . plain)
290- . padding ( 8 )
291-
292- Button ( action: {
293- if typedMessage. isEmpty { return }
294- chat. send ( typedMessage)
295- typedMessage = " "
296- } ) {
297- Image ( systemName: " paperplane.fill " )
298- . padding ( 8 )
263+ var clearButton : some View {
264+ Button ( action: {
265+ chat. clear ( )
266+ } ) {
267+ Group {
268+ if #available( macOS 13 . 0 , * ) {
269+ Image ( systemName: " eraser.line.dashed.fill " )
270+ } else {
271+ Image ( systemName: " trash.fill " )
299272 }
300- . buttonStyle ( . plain)
301- . disabled ( chat. isReceivingMessage)
302- . keyboardShortcut ( KeyEquivalent . return, modifiers: [ ] )
303273 }
304- . frame ( maxWidth : . infinity )
274+ . padding ( 6 )
305275 . background {
306- RoundedRectangle ( cornerRadius: 6 )
307- . fill ( Color ( nsColor: . controlBackgroundColor) )
276+ Circle ( ) . fill ( Color ( nsColor: . controlBackgroundColor) )
308277 }
309278 . overlay {
310- RoundedRectangle ( cornerRadius : 6 )
279+ Circle ( )
311280 . stroke ( Color ( nsColor: . controlColor) , lineWidth: 1 )
312281 }
313- . background {
314- Button ( action: {
315- typedMessage += " \n "
316- } ) {
317- EmptyView ( )
318- }
319- . keyboardShortcut ( KeyEquivalent . return, modifiers: [ . shift] )
282+ }
283+ . buttonStyle ( . plain)
284+ }
285+
286+ var textEditor : some View {
287+ HStack ( spacing: 0 ) {
288+ ZStack ( alignment: . center) {
289+ // a hack to support dynamic height of TextEditor
290+ Text ( typedMessage. isEmpty ? " Hi " : typedMessage) . opacity ( 0 )
291+ . font ( . system( size: 14 ) )
292+ . frame ( maxWidth: . infinity, maxHeight: 400 )
293+ . overlay ( alignment: . leadingFirstTextBaseline) {
294+ Text ( " Write something.. " )
295+ . foregroundColor ( . secondary)
296+ . font ( . system( size: 14 ) )
297+ . opacity ( typedMessage. isEmpty ? 1 : 0 )
298+ }
299+ . padding ( . top, 0 )
300+ . padding ( . bottom, 3 )
301+ . padding ( . horizontal, 4 )
302+
303+ CustomTextEditor (
304+ text: $typedMessage,
305+ font: . systemFont( ofSize: 14 ) ,
306+ onSubmit: { submitText ( ) }
307+ )
320308 }
309+ . focused ( $isInputAreaFocused)
310+ . padding ( 8 )
311+ . fixedSize ( horizontal: false , vertical: true )
312+
313+ Button ( action: {
314+ submitText ( )
315+ } ) {
316+ Image ( systemName: " paperplane.fill " )
317+ . padding ( 8 )
318+ }
319+ . buttonStyle ( . plain)
320+ . disabled ( chat. isReceivingMessage)
321+ . keyboardShortcut ( KeyEquivalent . return, modifiers: [ ] )
321322 }
322- . onAppear {
323- isInputAreaFocused = true
323+ . frame ( maxWidth: . infinity)
324+ . background {
325+ RoundedRectangle ( cornerRadius: 6 )
326+ . fill ( Color ( nsColor: . controlBackgroundColor) )
324327 }
325- . padding ( 8 )
326- . background ( . ultraThickMaterial)
328+ . overlay {
329+ RoundedRectangle ( cornerRadius: 6 )
330+ . stroke ( Color ( nsColor: . controlColor) , lineWidth: 1 )
331+ }
332+ . background {
333+ Button ( action: {
334+ typedMessage += " \n "
335+ } ) {
336+ EmptyView ( )
337+ }
338+ . keyboardShortcut ( KeyEquivalent . return, modifiers: [ . shift] )
339+ }
340+ }
341+
342+ func submitText( ) {
343+ if typedMessage. isEmpty { return }
344+ chat. send ( typedMessage)
345+ typedMessage = " "
327346 }
328347}
329348
@@ -386,6 +405,9 @@ struct RoundedCorners: Shape {
386405struct GlobalChatSwitchToggleStyle : ToggleStyle {
387406 func makeBody( configuration: Configuration ) -> some View {
388407 HStack ( spacing: 4 ) {
408+ Text ( configuration. isOn ? " Shared Conversation " : " Local Conversation " )
409+ . foregroundStyle ( . tertiary)
410+
389411 RoundedRectangle ( cornerRadius: 10 , style: . circular)
390412 . foregroundColor ( configuration. isOn ? Color . indigo : . gray. opacity ( 0.5 ) )
391413 . frame ( width: 30 , height: 20 , alignment: . center)
@@ -411,9 +433,6 @@ struct GlobalChatSwitchToggleStyle: ToggleStyle {
411433 RoundedRectangle ( cornerRadius: 10 , style: . circular)
412434 . stroke ( . black. opacity ( 0.2 ) , lineWidth: 1 )
413435 }
414-
415- Text ( configuration. isOn ? " Global Chat " : " File Chat " )
416- . foregroundStyle ( . tertiary)
417436 }
418437 }
419438}
0 commit comments