@@ -102,7 +102,61 @@ public struct AsyncCodeBlock: View {
102102 return " Hold ⌥ for full suggestion "
103103 }
104104
105- @ScaledMetric var ellipsisPadding : CGFloat = 5
105+
106+ @ScaledMetric var keyPadding : Double = 3.0
107+
108+ @ViewBuilder
109+ func keyBackground( content: ( ) -> some View ) -> some View {
110+ content ( )
111+ . padding ( . horizontal, keyPadding)
112+ . background (
113+ RoundedRectangle ( cornerRadius: 2 )
114+ . stroke ( foregroundColor, lineWidth: 1 )
115+ . foregroundColor ( . clear)
116+ . frame (
117+ minWidth: fontHeight,
118+ minHeight: fontHeight,
119+ maxHeight: fontHeight
120+ )
121+ )
122+ }
123+
124+ @ViewBuilder
125+ var optionKey : some View {
126+ keyBackground {
127+ Image ( systemName: " option " )
128+ . resizable ( )
129+ . renderingMode ( . template)
130+ . scaledToFit ( )
131+ . frame ( height: font. capHeight)
132+ }
133+ }
134+
135+ @ViewBuilder
136+ var popoverContent : some View {
137+ HStack {
138+ if isExpanded {
139+ Text ( " Press " )
140+ optionKey
141+ keyBackground {
142+ Text ( " tab " )
143+ . font ( . init( font) )
144+ }
145+ Text ( " to accept full suggestion " )
146+ } else {
147+ Text ( " Hold " )
148+ optionKey
149+ Text ( " for full suggestion " )
150+ }
151+ }
152+ . padding ( 8 )
153+ . font ( . body)
154+ . fixedSize ( )
155+ }
156+
157+ @ScaledMetric var iconPadding : CGFloat = 9.0
158+ @ScaledMetric var iconSpacing : CGFloat = 6.0
159+ @ScaledMetric var optionPadding : CGFloat = 0.5
106160
107161 @ViewBuilder
108162 var contentView : some View {
@@ -116,30 +170,39 @@ public struct AsyncCodeBlock: View {
116170 . foregroundColor ( foregroundTextColor)
117171 . lineSpacing ( lineSpacing) // This only has effect if a line wraps
118172 if lines. count > 1 {
119- Image ( systemName: " ellipsis " )
120- . renderingMode ( . template)
121- . foregroundColor ( foregroundTextColor)
122- . padding ( . horizontal, ellipsisPadding)
123- . background (
124- RoundedRectangle ( cornerRadius: 12 )
125- . fill ( Color . gray. opacity ( isExpanded ? 0.1 : 0.4 ) )
126- . frame ( height: fontHeight * 0.75 )
127- )
128- . popover ( isPresented: $isHovering) {
129- Text ( hintText)
130- . font ( . body)
131- . padding ( 8 )
132- . fixedSize ( )
133- }
134- . task {
135- isHovering = !completionHintShown
136- completionHintShown = true
137- }
173+ HStack ( spacing: iconSpacing) {
174+ Image ( " CopilotLogo " )
175+ . resizable ( )
176+ . renderingMode ( . template)
177+ . scaledToFit ( )
178+ Image ( systemName: " option " )
179+ . resizable ( )
180+ . renderingMode ( . template)
181+ . scaledToFit ( )
182+ . padding ( . vertical, optionPadding)
183+ }
184+ . frame ( height: lineHeight * 0.7 )
185+ . padding ( . horizontal, iconPadding)
186+ . background (
187+ Capsule ( )
188+ . fill ( foregroundColor. opacity ( isExpanded ? 0.1 : 0.2 ) )
189+ . frame ( height: lineHeight)
190+ )
191+ . frame ( height: lineHeight) // Moves popover attachment
192+ . popover ( isPresented: $isHovering) {
193+ popoverContent
194+ }
195+ . task {
196+ isHovering = !completionHintShown
197+ completionHintShown = true
198+ }
138199 }
139200 }
140- . background ( currentLineBackgroundColor ?? backgroundColor)
201+ . frame ( height: lineHeight)
202+ . background (
203+ HalfCapsule ( ) . fill ( currentLineBackgroundColor ?? backgroundColor)
204+ )
141205 . padding ( . leading, firstLineIndent)
142- . frame ( minHeight: lineHeight)
143206 . onHover { hovering in
144207 guard hovering != isHovering else { return }
145208 withAnimation {
0 commit comments