Skip to content

Commit 391343e

Browse files
robertpiosikrobertpiosik
committed
Add tooltips to status bar actions and prompt attachments
- below prompt field, there is 'agentic search' and 'cear context' buttons: show tooltips above: 'Select context files' and 'Clear context' - in status bar, target colors more directly because the tooltip gets poisoned - [Changes]align clear context tooltip to right (allow more granural placement configuration through props of status bar) - when [Pasted text] is set, tooltip is not on the same vertical alignment as the 'select context files' one on the left - rename 'select context files' to 'find context files', keep it similarly short in other languages - [Fragment] keep other languages short as pl/en ├── apps │ └── editor │ └── src │ └── views │ └── prompt │ ├── backend │ │ └── prompt-view-provider.ts │ ├── frontend │ │ ├── Main │ │ │ ├── Main.tsx │ │ │ └── MainView │ │ │ ├── MainView.tsx │ │ │ ├── components │ │ │ │ └── PromptAttachments │ │ │ │ ├── PromptAttachments.tsx │ │ │ │ └── index.ts │ │ │ └── hooks │ │ │ └── use-last-choice-tooltip.ts │ │ ├── Prompt.tsx │ │ ├── hooks │ │ │ └── use-prompt │ │ │ └── use-prompt.ts │ │ └── i18n │ │ └── translations │ │ ├── index.ts │ │ ├── main.ts │ │ ├── prompt-field.ts │ │ └── selected-files.ts │ └── types │ └── messages.ts └── packages ├── shared │ └── src │ └── utils │ └── display-token-count.ts └── ui └── src └── components └── editor ├── common │ ├── Tooltip │ │ ├── Tooltip.module.scss │ │ ├── Tooltip.tsx │ │ └── index.ts │ └── prompts │ └── PromptField │ ├── PromptField.module.scss │ ├── PromptField.tsx │ ├── components │ │ ├── Footer │ │ │ ├── Footer.module.scss │ │ │ ├── Footer.tsx │ │ │ └── index.ts │ │ └── Tabs │ │ ├── Tabs.module.scss │ │ ├── Tabs.tsx │ │ └── index.ts │ └── index.ts └── prompt-view └── StatusBar ├── StatusBar.module.scss ├── StatusBar.tsx └── index.ts
1 parent 68ec4cf commit 391343e

7 files changed

Lines changed: 77 additions & 12 deletions

File tree

‎apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,8 @@ export const MainView: React.FC<Props> = (props) => {
379379
attaching_file: t('selected-files.attaching-file'),
380380
attaching_files: t('selected-files.attaching-files'),
381381
agentic_search: t('selected-files.agentic-search'),
382-
clear_context: t('selected-files.clear-context')
382+
clear_context: t('selected-files.clear-context'),
383+
find_context_files: t('selected-files.find-context-files')
383384
}}
384385
/>
385386
)

‎apps/editor/src/views/prompt/frontend/Main/MainView/components/PromptAttachments/PromptAttachments.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type Props = {
1111
attaching_files: string
1212
agentic_search: string
1313
clear_context: string
14+
find_context_files: string
1415
}
1516
is_alt_pressed?: boolean
1617
on_agentic_search: () => void
@@ -40,13 +41,15 @@ export const PromptAttachments: React.FC<Props> = (props) => {
4041
id: 'agentic-search',
4142
icon: 'codicon-search-sparkle',
4243
label: props.translations.agentic_search,
44+
tooltip: props.translations.find_context_files,
4345
keycap: props.is_alt_pressed ? 'F' : undefined,
4446
on_click: props.on_agentic_search
4547
},
4648
{
4749
id: 'clear-context',
4850
icon: 'codicon-clear-all',
49-
title: props.translations.clear_context,
51+
tooltip: props.translations.clear_context,
52+
tooltip_align: 'right',
5053
keycap: props.is_alt_pressed ? 'X' : undefined,
5154
on_click: props.on_clear_context
5255
}

‎apps/editor/src/views/prompt/frontend/i18n/translations/selected-files.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,5 +88,23 @@ export const selected_files = {
8888
cs: 'Vymazat kontext',
8989
hu: 'Környezet törlése',
9090
bg: 'Изчистване на контекста'
91+
},
92+
'selected-files.find-context-files': {
93+
en: 'Find relevant files',
94+
pl: 'Znajdź odpowiednie pliki',
95+
'zh-cn': '查找相关文件',
96+
ja: '関連ファイルを検索',
97+
'zh-tw': '尋找相關檔案',
98+
de: 'Relevante Dateien finden',
99+
es: 'Buscar archivos relevantes',
100+
fr: 'Trouver des fichiers pertinents',
101+
'pt-br': 'Encontrar arquivos relevantes',
102+
ru: 'Найти релевантные файлы',
103+
ko: '관련 파일 찾기',
104+
it: 'Trova file rilevanti',
105+
tr: 'İlgili dosyaları bul',
106+
cs: 'Najít relevantní soubory',
107+
hu: 'Releváns fájlok keresése',
108+
bg: 'Намиране на подходящи файлове'
91109
}
92110
} as const

‎packages/ui/src/components/editor/common/Tooltip/Tooltip.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
transform: translateY(calc(-100% + 1px));
5858
}
5959
&.tooltip--align-center {
60-
transform: translateX(-50%) translateY(calc(-100% - 5px));
60+
transform: translateX(-50%) translateY(calc(-100% + 1px));
6161
}
6262
}
6363

‎packages/ui/src/components/editor/common/prompts/PromptField/components/Footer/Footer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,7 @@ export const Footer: React.FC<Props> = (props) => {
287287
<Tooltip
288288
message={props.props.translations.edit_format}
289289
align="center"
290+
translate={{ y: -6 }}
290291
/>
291292
)}
292293
{!props.is_alt_pressed && (

‎packages/ui/src/components/editor/prompt-view/StatusBar/StatusBar.module.scss‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
justify-content: space-between;
77
height: var(--height);
88
padding: 0 0 0 6px;
9-
overflow: hidden;
109
margin: 0 20px;
1110

1211
@include modern-ui {
@@ -33,11 +32,14 @@
3332
}
3433

3534
.theme-default {
36-
color: var(--cwc-text-color);
3735
background-color: var(--cwc-bg-tertiary);
3836
--theme-description-color: var(--cwc-text-color-dimmed);
3937

40-
.action {
38+
> .content {
39+
color: var(--cwc-text-color);
40+
}
41+
42+
.action > span {
4143
color: var(--vscode-textLink-foreground);
4244
}
4345

@@ -47,50 +49,70 @@
4749
}
4850

4951
.theme-warning {
50-
color: var(--cwc-yellow-foreground);
5152
background-color: var(--cwc-yellow-background);
5253
--theme-description-color: var(--cwc-yellow-foreground-dimmed);
5354

55+
> .content,
56+
.action > span {
57+
color: var(--cwc-yellow-foreground);
58+
}
59+
5460
.action:hover {
5561
background-color: var(--cwc-yellow-background);
5662
}
5763
}
5864

5965
.theme-success {
60-
color: var(--cwc-green-foreground);
6166
background-color: var(--cwc-green-background);
6267
--theme-description-color: var(--cwc-green-foreground-dimmed);
6368

69+
> .content,
70+
.action > span {
71+
color: var(--cwc-green-foreground);
72+
}
73+
6474
.action:hover {
6575
background-color: var(--cwc-green-background);
6676
}
6777
}
6878

6979
.theme-error {
70-
color: var(--cwc-red-foreground);
7180
background-color: var(--cwc-red-background);
7281
--theme-description-color: var(--cwc-red-foreground-dimmed);
7382

83+
> .content,
84+
.action > span {
85+
color: var(--cwc-red-foreground);
86+
}
87+
7488
.action:hover {
7589
background-color: var(--cwc-red-background);
7690
}
7791
}
7892

7993
.theme-blue {
80-
color: var(--cwc-blue-foreground);
8194
background-color: var(--cwc-blue-background);
8295
--theme-description-color: var(--cwc-blue-foreground-dimmed);
8396

97+
> .content,
98+
.action > span {
99+
color: var(--cwc-blue-foreground);
100+
}
101+
84102
.action:hover {
85103
background-color: var(--cwc-blue-background);
86104
}
87105
}
88106

89107
.theme-purple {
90-
color: var(--cwc-purple-foreground);
91108
background-color: var(--cwc-purple-background);
92109
--theme-description-color: var(--cwc-purple-foreground-dimmed);
93110

111+
> .content,
112+
.action > span {
113+
color: var(--cwc-purple-foreground);
114+
}
115+
94116
.action:hover {
95117
background-color: var(--cwc-purple-background);
96118
}
@@ -136,6 +158,8 @@
136158
.actions {
137159
display: flex;
138160
height: 100%;
161+
border-top-right-radius: inherit;
162+
border-bottom-right-radius: inherit;
139163
}
140164

141165
.action {
@@ -146,13 +170,16 @@
146170
cursor: pointer;
147171
white-space: nowrap;
148172
padding: 0 5px 0 4px;
173+
position: relative;
149174

150175
&.no-label {
151176
padding: 0 4px;
152177
}
153178

154179
&.last {
155180
padding: 0 7px 0 4px;
181+
border-top-right-radius: inherit;
182+
border-bottom-right-radius: inherit;
156183
}
157184

158185
&:hover {

‎packages/ui/src/components/editor/prompt-view/StatusBar/StatusBar.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
import React from 'react'
1+
import React, { useState } from 'react'
22
import cn from 'classnames'
33
import styles from './StatusBar.module.scss'
44
import { KeycapWrapper } from '../KeycapWrapper'
5+
import { Tooltip } from '../../common/Tooltip'
56

67
export type StatusBarAction = {
78
id: string
89
icon: string
910
label?: string
1011
title?: string
12+
tooltip?: string
13+
tooltip_align?: 'left' | 'center' | 'right'
1114
keycap?: string
1215
on_click: (e: React.MouseEvent) => void
1316
}
@@ -25,6 +28,7 @@ export type Props = {
2528

2629
export const StatusBar: React.FC<Props> = (props) => {
2730
const theme = props.theme ?? 'default'
31+
const [hovered_action, set_hovered_action] = useState<string | null>(null)
2832

2933
return (
3034
<div
@@ -67,7 +71,18 @@ export const StatusBar: React.FC<Props> = (props) => {
6771
})}
6872
onClick={action.on_click}
6973
title={action.title}
74+
onMouseEnter={() => set_hovered_action(action.id)}
75+
onMouseLeave={() => set_hovered_action(null)}
7076
>
77+
{hovered_action == action.id && action.tooltip && (
78+
<Tooltip
79+
message={action.tooltip}
80+
position="top"
81+
align={action.tooltip_align || 'center'}
82+
offset={6}
83+
translate={{ y: -7 }}
84+
/>
85+
)}
7186
<span className={cn('codicon', action.icon)} />
7287
{action.label && <span>{action.label}</span>}
7388
</div>

0 commit comments

Comments
 (0)