Skip to content

Commit c743107

Browse files
robertpiosikrobertpiosik
committed
Refactor the response history list items from buttons to divs containing clickable content and a separate remove button wrapper, and update the intelligent update instructions for clarity
1 parent 127082e commit c743107

3 files changed

Lines changed: 125 additions & 87 deletions

File tree

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

Lines changed: 58 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,17 @@
1818

1919
&__item {
2020
display: flex;
21-
align-items: center;
22-
justify-content: space-between;
23-
gap: 4px;
24-
padding: 3px 8px;
25-
width: 100%;
2621
position: relative;
22+
width: 100%;
2723

28-
& .responses__item__remove {
24+
& .responses__item__remove-wrapper {
2925
visibility: hidden;
3026
}
3127

3228
&:hover {
3329
background-color: var(--vscode-list-hoverBackground);
3430

35-
& .responses__item__remove {
31+
& .responses__item__remove-wrapper {
3632
visibility: visible;
3733
}
3834
}
@@ -44,64 +40,78 @@
4440
}
4541
}
4642

47-
&__instructions {
48-
text-align: left;
49-
font-size: 12px;
50-
white-space: nowrap;
51-
overflow: hidden;
52-
text-overflow: ellipsis;
53-
54-
&__new-indicator {
55-
transform: translateY(2px);
56-
margin-left: -2px;
57-
font-size: 12px !important;
58-
}
59-
60-
&__manual-entry {
61-
font-style: italic;
62-
padding-right: 1px;
63-
}
64-
}
65-
66-
&__right {
43+
&__content {
6744
display: flex;
6845
align-items: center;
46+
justify-content: space-between;
6947
gap: 4px;
70-
flex-shrink: 0;
71-
font-size: 11px;
72-
}
73-
74-
&__date {
75-
flex-shrink: 0;
76-
color: var(--vscode-descriptionForeground);
77-
}
78-
79-
&__stats {
80-
display: flex;
81-
gap: 2px;
82-
flex-shrink: 0;
83-
84-
&--added {
85-
color: var(--vscode-gitDecoration-addedResourceForeground);
48+
padding: 3px 8px;
49+
width: 100%;
50+
cursor: pointer;
51+
52+
&__instructions {
53+
text-align: left;
54+
font-size: 12px;
55+
white-space: nowrap;
56+
overflow: hidden;
57+
text-overflow: ellipsis;
58+
59+
&__new-indicator {
60+
transform: translateY(2px);
61+
margin-left: -2px;
62+
font-size: 12px !important;
63+
}
64+
65+
&__manual-entry {
66+
font-style: italic;
67+
padding-right: 1px;
68+
}
8669
}
8770

88-
&--removed {
89-
color: var(--vscode-gitDecoration-deletedResourceForeground);
71+
&__right {
72+
display: flex;
73+
align-items: center;
74+
gap: 4px;
75+
flex-shrink: 0;
76+
font-size: 11px;
77+
78+
&__date {
79+
flex-shrink: 0;
80+
color: var(--vscode-descriptionForeground);
81+
}
82+
83+
&__stats {
84+
display: flex;
85+
gap: 2px;
86+
flex-shrink: 0;
87+
88+
&__added {
89+
color: var(--vscode-gitDecoration-addedResourceForeground);
90+
}
91+
92+
&__removed {
93+
color: var(--vscode-gitDecoration-deletedResourceForeground);
94+
}
95+
}
9096
}
9197
}
9298

93-
&__remove {
99+
&__remove-wrapper {
94100
position: absolute;
95101
display: flex;
96102
height: 100%;
97103
align-items: center;
98104
right: 4px;
99105
background: linear-gradient(
100106
to left,
101-
var(--vscode-list-hoverBackground) 50%,
107+
var(--vscode-list-hoverBackground) 56%,
102108
transparent
103109
);
104110
padding-left: 10px;
111+
}
112+
113+
&__remove {
114+
display: flex;
105115

106116
> span {
107117
opacity: var(--dimmed-opacity);
@@ -112,7 +122,7 @@
112122
}
113123
}
114124

115-
&:hover &__remove {
125+
&:hover &__remove-wrapper {
116126
visibility: visible;
117127
}
118128
}

‎packages/ui/src/components/editor/panel/Responses/Responses.tsx‎

Lines changed: 66 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -35,65 +35,93 @@ export const Responses: React.FC<Props> = (props) => {
3535
return (
3636
<div className={styles.responses}>
3737
{props.response_history.map((item) => (
38-
<button
38+
<div
3939
key={item.created_at}
4040
className={cn(styles['responses__item'], {
4141
[styles['responses__item--selected']]:
4242
props.response_history.length > 1 &&
4343
props.selected_history_item_created_at == item.created_at
4444
})}
4545
title={item.raw_instructions}
46-
onClick={() => {
47-
props.on_response_history_item_click(item)
48-
props.on_selected_history_item_change(item.created_at)
49-
}}
5046
>
51-
<div className={styles.responses__item__instructions}>
52-
{item.lines_added === undefined &&
53-
item.lines_removed === undefined && (
47+
<div
48+
role="button"
49+
tabIndex={0}
50+
className={styles.responses__item__content}
51+
onClick={() => {
52+
props.on_response_history_item_click(item)
53+
props.on_selected_history_item_change(item.created_at)
54+
}}
55+
onKeyDown={(e) => {
56+
if (e.key == 'Enter') {
57+
e.preventDefault()
58+
props.on_response_history_item_click(item)
59+
props.on_selected_history_item_change(item.created_at)
60+
}
61+
}}
62+
>
63+
<div className={styles.responses__item__content__instructions}>
64+
{item.lines_added === undefined &&
65+
item.lines_removed === undefined && (
66+
<span
67+
className={`codicon codicon-circle-filled ${styles['responses__item__content__instructions__new-indicator']}`}
68+
/>
69+
)}
70+
{item.raw_instructions ? (
71+
<span>{item.raw_instructions}</span>
72+
) : (
5473
<span
55-
className={`codicon codicon-circle-filled ${styles['responses__item__instructions__new-indicator']}`}
56-
/>
74+
className={
75+
styles[
76+
'responses__item__content__instructions__manual-entry'
77+
]
78+
}
79+
>
80+
Added manually
81+
</span>
5782
)}
58-
{item.raw_instructions ? (
59-
<span>{item.raw_instructions}</span>
60-
) : (
61-
<span
62-
className={
63-
styles['responses__item__instructions__manual-entry']
64-
}
65-
>
66-
Added manually
83+
</div>
84+
<div className={styles['responses__item__content__right']}>
85+
{item.lines_added !== undefined &&
86+
item.lines_removed !== undefined && (
87+
<div
88+
className={styles['responses__item__content__right__stats']}
89+
>
90+
<span
91+
className={
92+
styles['responses__item__content__right__stats__added']
93+
}
94+
>
95+
+{item.lines_added}
96+
</span>
97+
<span
98+
className={
99+
styles[
100+
'responses__item__content__right__stats__removed'
101+
]
102+
}
103+
>
104+
-{item.lines_removed}
105+
</span>
106+
</div>
107+
)}
108+
<span className={styles['responses__item__content__right__date']}>
109+
{dayjs(item.created_at).fromNow()}
67110
</span>
68-
)}
111+
</div>
69112
</div>
70-
<div className={styles['responses__item__right']}>
71-
{item.lines_added !== undefined &&
72-
item.lines_removed !== undefined && (
73-
<div className={styles['responses__item__stats']}>
74-
<span className={styles['responses__item__stats--added']}>
75-
+{item.lines_added}
76-
</span>
77-
<span className={styles['responses__item__stats--removed']}>
78-
-{item.lines_removed}
79-
</span>
80-
</div>
81-
)}
82-
<span className={styles['responses__item__date']}>
83-
{dayjs(item.created_at).fromNow()}
84-
</span>
113+
<div className={styles['responses__item__remove-wrapper']}>
85114
<button
86115
className={styles['responses__item__remove']}
87-
onClick={(e) => {
88-
e.stopPropagation()
116+
onClick={() => {
89117
props.on_response_history_item_remove(item.created_at)
90118
}}
91119
title="Reject"
92120
>
93121
<span className="codicon codicon-close" />
94122
</button>
95123
</div>
96-
</button>
124+
</div>
97125
))}
98126
</div>
99127
)

‎packages/vscode/src/constants/instructions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ export const code_completion_instructions_for_panel = (
1313
}. Always refer to the symbol "<missing_text>" as "cursor position" and "replacement" as "completion".`
1414

1515
export const intelligent_update_instructions =
16-
"User requested refactor of a file. Please show me the full code of the updated <file>, without explanations or any other text. I have a disability which means I can't type and need to be able to copy and paste the full code."
16+
"User requested refactor of a file. Print file in full because I have a disability which means I can't type and need to be able to just copy and paste."

0 commit comments

Comments
 (0)