Skip to content

Commit 42eac3d

Browse files
robertpiosikrobertpiosik
committed
Rename PromptNotice component to PromptAttachments and add support for displaying file counts and token counts
- the issue is that values (number of files and token count) doesn't show up synchronously in `packages/ui/src/components/editor/prompt/PromptNotice/PromptNotice.tsx` - rename `packages/ui/src/components/editor/prompt/PromptNotice/PromptNotice.tsx` to 'prompt attachments' - place warning in translations - make translations requried props - keep showing web configurations when not connected ├── apps │ └── editor │ └── src │ └── views │ └── prompt │ ├── backend │ │ └── prompt-view-provider.ts │ ├── frontend │ │ ├── Main │ │ │ ├── Main.tsx │ │ │ └── MainView │ │ │ └── MainView.tsx │ │ ├── Prompt.tsx │ │ ├── hooks │ │ │ ├── use-editor-sync.ts │ │ │ └── use-prompt │ │ │ └── use-prompt.ts │ │ └── i18n │ │ └── translations │ │ ├── main.ts │ │ └── selected-files.ts │ └── types │ └── messages.ts └── packages └── ui └── src └── components └── editor └── prompt ├── PromptAttachments │ ├── PromptAttachments.module.scss │ ├── PromptAttachments.stories.tsx │ ├── PromptAttachments.tsx │ └── index.ts └── PromptNotice └── PromptNotice.tsx
1 parent 2fb950f commit 42eac3d

8 files changed

Lines changed: 121 additions & 130 deletions

File tree

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

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styles from './MainView.module.scss'
22
import { Configurations as UiConfigurations } from '@ui/components/editor/prompt/Configurations'
33
import { PromptField as UiPromptField } from '@ui/components/editor/common/prompts/PromptField'
4-
import { PromptNotice as UiPromptNotice } from '@ui/components/editor/prompt/PromptNotice'
4+
import { PromptAttachments as UiPromptAttachments } from '@ui/components/editor/prompt/PromptAttachments'
55
import { Separator as UiSeparator } from '@ui/components/editor/prompt/Separator'
66
import { WebConfiguration } from '@shared/types/web-configuration'
77
import { Responses as UiResponses } from '@ui/components/editor/prompt/Responses'
@@ -364,70 +364,70 @@ export const MainView: React.FC<Props> = (props) => {
364364
/>
365365
</div>
366366

367-
<UiPromptNotice
368-
warning={
369-
context_is_empty_warning
370-
? t('common.context-is-empty')
371-
: undefined
372-
}
367+
<UiPromptAttachments
373368
token_count={props.selected_files_token_count}
374369
files_count={
375370
context_is_empty_warning ? undefined : props.selected_files.length
376371
}
377372
translations={{
373+
warning: context_is_empty_warning
374+
? t('common.context-is-empty')
375+
: undefined,
378376
attaching_files: t('selected-files.attaching-files')
379377
}}
380378
/>
381379

382380
<UiSeparator height={6} />
383381

384-
{props.target == TARGET.WEB &&
385-
(props.is_connected ? (
386-
<UiConfigurations
387-
configurations={web_configurations}
388-
disable_invocation={
389-
context_is_empty_warning || !props.is_connected
390-
}
391-
on_create={(params) => {
392-
props.on_create_web_configuration(params)
393-
}}
394-
on_configuration_click={(id) => {
395-
props.initialize_chats({
396-
web_configuration_name: id,
397-
show_quick_pick: false
398-
})
399-
}}
400-
on_edit={(id) => props.on_web_configuration_edit(id)}
401-
on_reorder={(reordered) => {
402-
const new_web_configurations = reordered.map((c) => {
403-
return props.web_configurations.find(
404-
(p, i) => (p.name ?? `unnamed-${i}`) == c.id
405-
)!
406-
})
407-
props.on_web_configurations_reorder(new_web_configurations)
408-
}}
409-
on_delete={(id) => {
410-
props.on_delete_web_configuration(id)
411-
}}
412-
on_toggle_pinned={(id) => {
413-
props.on_toggle_web_configuration_pinned(id)
414-
}}
415-
selected_configuration_id={
416-
props.selected_web_configuration_name
417-
}
418-
translations={{
419-
empty: t('configurations.empty'),
420-
add_new: t('action.add-new'),
421-
pin: t('action.pin'),
422-
unpin: t('action.unpin'),
423-
insert: t('action.insert-configuration'),
424-
edit: t('action.edit'),
425-
delete: t('action.delete')
426-
}}
427-
/>
428-
) : (
382+
{props.target == TARGET.WEB && !props.is_connected && (
383+
<>
429384
<UiBrowserExtensionMessage />
430-
))}
385+
<UiSeparator height={6} />
386+
</>
387+
)}
388+
389+
{props.target == TARGET.WEB && (
390+
<UiConfigurations
391+
configurations={web_configurations}
392+
disable_invocation={
393+
context_is_empty_warning || !props.is_connected
394+
}
395+
on_create={(params) => {
396+
props.on_create_web_configuration(params)
397+
}}
398+
on_configuration_click={(id) => {
399+
props.initialize_chats({
400+
web_configuration_name: id,
401+
show_quick_pick: false
402+
})
403+
}}
404+
on_edit={(id) => props.on_web_configuration_edit(id)}
405+
on_reorder={(reordered) => {
406+
const new_web_configurations = reordered.map((c) => {
407+
return props.web_configurations.find(
408+
(p, i) => (p.name ?? `unnamed-${i}`) == c.id
409+
)!
410+
})
411+
props.on_web_configurations_reorder(new_web_configurations)
412+
}}
413+
on_delete={(id) => {
414+
props.on_delete_web_configuration(id)
415+
}}
416+
on_toggle_pinned={(id) => {
417+
props.on_toggle_web_configuration_pinned(id)
418+
}}
419+
selected_configuration_id={props.selected_web_configuration_name}
420+
translations={{
421+
empty: t('configurations.empty'),
422+
add_new: t('action.add-new'),
423+
pin: t('action.pin'),
424+
unpin: t('action.unpin'),
425+
insert: t('action.insert-configuration'),
426+
edit: t('action.edit'),
427+
delete: t('action.delete')
428+
}}
429+
/>
430+
)}
431431

432432
{props.target == TARGET.API && (
433433
<UiConfigurations

‎packages/ui/src/components/editor/prompt/Configurations/Configurations.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040
.configurations__item__left__icon,
4141
.configurations__item__left__text {
42-
opacity: var(--disabled-opacity);
42+
opacity: var(--dimmed-opacity);
4343
}
4444
}
4545

packages/ui/src/components/editor/prompt/PromptNotice/PromptNotice.module.scss renamed to packages/ui/src/components/editor/prompt/PromptAttachments/PromptAttachments.module.scss

File renamed without changes.

packages/ui/src/components/editor/prompt/PromptNotice/PromptNotice.stories.tsx renamed to packages/ui/src/components/editor/prompt/PromptAttachments/PromptAttachments.stories.tsx

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,36 @@
1-
import { PromptNotice } from './PromptNotice'
1+
import { PromptAttachments } from './PromptAttachments'
22

33
export default {
4-
component: PromptNotice
4+
component: PromptAttachments
55
}
66

77
export const Default = () => {
88
return (
9-
<PromptNotice
10-
warning="Select context to edit"
9+
<PromptAttachments
1110
token_count={12500}
1211
files_count={5}
1312
translations={{
13+
warning: 'Select context to edit',
1414
attaching_files: 'Attaching {files} files'
1515
}}
1616
/>
1717
)
1818
}
1919

2020
export const OnlyWarning = () => {
21-
return <PromptNotice warning="Select context to edit" />
21+
return (
22+
<PromptAttachments
23+
translations={{
24+
warning: 'Select context to edit',
25+
attaching_files: 'Attaching {files} files'
26+
}}
27+
/>
28+
)
2229
}
2330

2431
export const OnlyFiles = () => {
2532
return (
26-
<PromptNotice
33+
<PromptAttachments
2734
token_count={12500}
2835
files_count={5}
2936
translations={{

‎packages/ui/src/components/editor/prompt/PromptAttachments/PromptAttachments.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react'
2+
import styles from './PromptAttachments.module.scss'
3+
import { display_token_count } from '@shared/utils/display-token-count'
4+
5+
type Props = {
6+
token_count?: number
7+
files_count?: number
8+
translations: {
9+
warning?: string
10+
attaching_files: string
11+
}
12+
}
13+
14+
export const PromptAttachments: React.FC<Props> = (props) => {
15+
if (!props.translations.warning && props.files_count === undefined) {
16+
return null
17+
}
18+
19+
return (
20+
<>
21+
{props.translations.warning && (
22+
<div className={`${styles.notice} ${styles.warning}`}>
23+
<span className={styles.icon}>
24+
<span className="codicon codicon-warning" />
25+
</span>
26+
<label className={styles.label}>
27+
<span>{props.translations.warning}</span>
28+
</label>
29+
</div>
30+
)}
31+
{props.files_count !== undefined && (
32+
<div className={`${styles.notice} ${styles.files}`}>
33+
<span className={styles.icon}>
34+
<span className="codicon codicon-attach" />
35+
</span>
36+
<label className={styles.label}>
37+
<span>
38+
{props.translations.attaching_files.replace(
39+
'{files}',
40+
String(props.files_count)
41+
)}
42+
</span>
43+
{(props.token_count ?? 0) > 0 && (
44+
<span className={styles.tokens}>
45+
{display_token_count(props.token_count ?? 0)}
46+
</span>
47+
)}
48+
</label>
49+
</div>
50+
)}
51+
</>
52+
)
53+
}

‎packages/ui/src/components/editor/prompt/PromptAttachments/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './PromptAttachments'

‎packages/ui/src/components/editor/prompt/PromptNotice/PromptNotice.tsx‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎packages/ui/src/components/editor/prompt/PromptNotice/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)