Skip to content

Commit 91bff11

Browse files
robertpiosikrobertpiosik
committed
Standardize context keyword display format and refine keyword component styling in the chat input
1 parent 478c66d commit 91bff11

4 files changed

Lines changed: 65 additions & 43 deletions

File tree

‎packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -141,36 +141,64 @@
141141
transparent
142142
);
143143
border-radius: var(--border-radius-4px);
144-
padding: 0 var(--padding-4px) 0 var(--padding-3px);
145144
display: inline-flex;
146145
align-items: center;
147-
gap: var(--padding-3px);
148146
line-height: 1.2;
149147
transform: translateY(1.5px);
150148

151149
&__icon {
152150
display: flex;
151+
padding: 0 var(--padding-3px);
152+
border-radius: var(--border-radius-4px);
153+
position: relative;
154+
z-index: 1;
155+
cursor: pointer;
153156

154157
&::before {
155158
font-family: 'codicon';
156159
font-size: var(--font-size-12px);
157160
transition: none;
161+
border-radius: var(--border-radius-4px);
162+
}
163+
164+
&:hover {
165+
background-color: color-mix(
166+
in srgb,
167+
var(--vscode-charts-blue) 30%,
168+
transparent
169+
);
158170
}
159171
}
160172

173+
&__text {
174+
border-radius: var(--border-radius-4px);
175+
padding-right: var(--padding-4px);
176+
padding-left: var(--padding-4px);
177+
margin-left: -4px;
178+
}
179+
161180
&:hover &__icon::before {
162181
content: '\ea76';
163-
cursor: pointer;
164182
}
165183

166184
&--file &__icon::before {
167185
content: '\ea7b';
168186
}
169187

170-
&--file {
188+
&--file &__text {
171189
cursor: pointer;
172190
}
173191

192+
&--file &__text {
193+
&:hover {
194+
background-color: color-mix(
195+
in srgb,
196+
var(--vscode-charts-blue) 30%,
197+
transparent
198+
);
199+
}
200+
}
201+
174202
&--changes &__icon::before {
175203
content: '\ebdb';
176204
}
@@ -186,7 +214,16 @@
186214
&--selection-error {
187215
background-color: color-mix(
188216
in srgb,
189-
var(--vscode-charts-red) 20%,
217+
var(--vscode-charts-red) 30%,
218+
transparent
219+
);
220+
}
221+
222+
// hover on close icon of selection error
223+
&--selection-error &__icon:hover {
224+
background-color: color-mix(
225+
in srgb,
226+
var(--vscode-charts-red) 40%,
190227
transparent
191228
);
192229
}

‎packages/ui/src/components/editor/panel/ChatInput/utils/get-display-text.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ export const get_display_text = (
2222
}
2323
if (changes_keyword) {
2424
const branch_name = changes_keyword.substring('#Changes:'.length)
25-
return `Changes: ${branch_name}`
25+
return `Diff with ${branch_name}`
2626
}
2727
if (saved_context_keyword) {
28-
return `Context: ${context_name}`
28+
return `Context "${context_name}"`
2929
}
3030
return match
3131
}

‎packages/ui/src/components/editor/panel/ChatInput/utils/get-highlighted-text.tsx‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
import cn from 'classnames'
22
import styles from '../ChatInput.module.scss'
33

4-
const escape_html = (str: string): string =>
5-
str
6-
.replace(/&/g, '&')
7-
.replace(/</g, '&lt;')
8-
.replace(/>/g, '&gt;')
9-
.replace(/"/g, '&quot;')
10-
.replace(/'/g, '&#039;')
11-
124
const process_text_part_for_files = (
135
text: string,
146
context_file_paths: string[]
@@ -26,17 +18,17 @@ const process_text_part_for_files = (
2618
return `<span class="${cn(
2719
styles['keyword'],
2820
styles['keyword--file']
29-
)}" contentEditable="false" data-type="file-keyword" title="${escape_html(
30-
file_path
31-
)}"><span class="${styles['keyword__icon']}"></span><span class="${
21+
)}" contentEditable="false" data-type="file-keyword" title="${file_path}"><span class="${
22+
styles['keyword__icon']
23+
}"></span><span class="${
3224
styles['keyword__text']
33-
}">${escape_html(filename)}</span></span>`
25+
}">${filename}</span></span>`
3426
}
3527
// If not a context file, return with backticks
36-
return `\`${escape_html(file_path)}\``
28+
return `\`${file_path}\``
3729
}
3830
// part at even index is regular text
39-
return escape_html(part)
31+
return part
4032
})
4133
.join('')
4234
}
@@ -63,15 +55,11 @@ export const get_highlighted_text = (params: {
6355
return `<span class="${cn(
6456
styles['keyword'],
6557
styles['keyword--saved-context']
66-
)}" contentEditable="false" data-type="saved-context-keyword" data-context-type="${escape_html(
67-
context_type
68-
)}" data-context-name="${escape_html(
69-
context_name
70-
)}" title="Context: ${escape_html(context_name)}"><span class="${
58+
)}" contentEditable="false" data-type="saved-context-keyword" data-context-type="${context_type}" data-context-name="${context_name}" title="Context &quot;${context_name}&quot;"><span class="${
7159
styles['keyword__icon']
7260
}"></span><span class="${
7361
styles['keyword__text']
74-
}">Context: ${escape_html(context_name)}</span></span>`
62+
}">Context "${context_name}"</span></span>`
7563
}
7664
return process_text_part_for_files(part, params.context_file_paths)
7765
})
@@ -86,24 +74,25 @@ export const get_highlighted_text = (params: {
8674

8775
return parts
8876
.map((part) => {
89-
if (part === '#Selection') {
77+
if (part == '#Selection') {
9078
const className = cn(styles['keyword'], styles['keyword--selection'], {
9179
[styles['keyword--selection-error']]: !params.has_active_selection
9280
})
93-
return `<span class="${className}" contentEditable="false" data-type="selection-keyword" title="Selection"><span class="${styles['keyword__icon']}"></span><span class="${styles['keyword__text']}">Selection</span></span>`
81+
const title = !params.has_active_selection
82+
? 'Missing text selection'
83+
: ''
84+
return `<span class="${className}" contentEditable="false" data-type="selection-keyword" title="${title}"><span class="${styles['keyword__icon']}"></span><span class="${styles['keyword__text']}">Selection</span></span>`
9485
}
9586
if (part && /^#Changes:[^\s,;:!?]+$/.test(part)) {
9687
const branch_name = part.substring('#Changes:'.length)
9788
return `<span class="${cn(
9889
styles['keyword'],
9990
styles['keyword--changes']
100-
)}" contentEditable="false" data-type="changes-keyword" data-branch-name="${escape_html(
101-
branch_name
102-
)}" title="Diff with ${escape_html(branch_name)}"><span class="${
91+
)}" contentEditable="false" data-type="changes-keyword" data-branch-name="${branch_name}"><span class="${
10392
styles['keyword__icon']
10493
}"></span><span class="${
10594
styles['keyword__text']
106-
}">Changes: ${escape_html(branch_name)}</span></span>`
95+
}">Diff with ${branch_name}</span></span>`
10796
}
10897
const saved_context_match = part.match(
10998
/^#SavedContext:(WorkspaceState|JSON)\s+"([^"]+)"$/
@@ -114,15 +103,11 @@ export const get_highlighted_text = (params: {
114103
return `<span class="${cn(
115104
styles['keyword'],
116105
styles['keyword--saved-context']
117-
)}" contentEditable="false" data-type="saved-context-keyword" data-context-type="${escape_html(
118-
context_type
119-
)}" data-context-name="${escape_html(
120-
context_name
121-
)}" title="Context: ${escape_html(context_name)}"><span class="${
106+
)}" contentEditable="false" data-type="saved-context-keyword" data-context-type="${context_type}" data-context-name="${context_name}" title="Context &quot;${context_name}&quot;"><span class="${
122107
styles['keyword__icon']
123108
}"></span><span class="${
124109
styles['keyword__text']
125-
}">Context: ${escape_html(context_name)}</span></span>`
110+
}">Context "${context_name}"</span></span>`
126111
}
127112

128113
return process_text_part_for_files(part, params.context_file_paths)

‎packages/ui/src/components/editor/panel/ChatInput/utils/position-mapping.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ export const map_display_pos_to_raw_pos = (
2727
is_replacement_match = true
2828
} else if (changes_keyword) {
2929
const branch_name = changes_keyword.substring('#Changes:'.length)
30-
display_match_length = `Changes: ${branch_name}`.length
30+
display_match_length = `Diff with ${branch_name}`.length
3131
is_replacement_match = true
3232
} else if (selection_keyword) {
3333
display_match_length = 'Selection'.length
3434
is_replacement_match = true
3535
} else if (saved_context_keyword) {
36-
display_match_length = `Context: ${context_name}`.length
36+
display_match_length = `Context "${context_name}"`.length
3737
is_replacement_match = true
3838
}
3939

@@ -98,13 +98,13 @@ export const map_raw_pos_to_display_pos = (
9898
is_replacement_match = true
9999
} else if (changes_keyword) {
100100
const branch_name = changes_keyword.substring('#Changes:'.length)
101-
display_match_length = `Changes: ${branch_name}`.length
101+
display_match_length = `Diff with ${branch_name}`.length
102102
is_replacement_match = true
103103
} else if (selection_keyword) {
104104
display_match_length = 'Selection'.length
105105
is_replacement_match = true
106106
} else if (saved_context_keyword) {
107-
display_match_length = `Context: ${context_name}`.length
107+
display_match_length = `Context "${context_name}"`.length
108108
is_replacement_match = true
109109
}
110110

0 commit comments

Comments
 (0)