Skip to content

Commit b42c136

Browse files
dogusatadogusata
committed
feat: updated splash loader and more detailed list structures
1 parent 8b30496 commit b42c136

25 files changed

+266
-90
lines changed

‎example/src/main.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,15 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
155155
onFilterActionClick: (action, filterValues?: Record<string, any>, isValid?: boolean) => {
156156
Log(`Filter action clicked: <b>${action.id}</b>`);
157157
Log(`Filters: <b>${JSON.stringify(filterValues ?? {})}</b>`);
158+
if (action.id === 'cancel-mcp') {
159+
mcpSheet.update(sampleMCPList, false);
160+
} else if (action.id === 'save-mcp') {
161+
mynahUI.toggleSplashLoader(true, 'Saving **the MCP**');
162+
setTimeout(() => {
163+
mynahUI.toggleSplashLoader(false);
164+
mcpSheet.update(sampleMCPList, false);
165+
}, 3000);
166+
}
158167
},
159168
onKeyPress: (e) => {
160169
Log('Key pressed');
@@ -227,7 +236,7 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
227236
mynahUI.toggleSplashLoader(true, 'Showing splash loader...');
228237
setTimeout(() => {
229238
mynahUI.toggleSplashLoader(false);
230-
}, 10000);
239+
}, 5000);
231240
} else if (buttonId === 'custom-data-check') {
232241
// Use for custom temporary checks
233242
mynahUI.addChatItem(tabId, {

‎example/src/samples/sample-data.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -815,14 +815,13 @@ _To send the form, mandatory items should be filled._`,
815815
value: [
816816
{
817817
persistent: true,
818-
values: {
818+
value: {
819819
[itemId1]: 'some_env',
820820
[itemId2]: 'AJSKJLE!@)(UD',
821821
},
822822
},
823823
{
824-
persistent: false,
825-
values: {
824+
value: {
826825
[itemId1]: 'some_other_env',
827826
[itemId2]: '12kjlkj!dddaa',
828827
},
@@ -1850,6 +1849,7 @@ export const sampleMCPList: DetailedList = {
18501849
selectable: 'clickable',
18511850
header: {
18521851
title: 'MCP Servers',
1852+
status: {},
18531853
description:
18541854
'Q automatically uses any MCP servers that have been added, so you don\'t have to add them as context. All MCPs are defaulted to "Ask before running".',
18551855
actions: [
@@ -1955,7 +1955,7 @@ export const sampleMCPList: DetailedList = {
19551955
cancelButtonText: 'Cancel',
19561956
confirmButtonText: 'Delete',
19571957
title:'Delete Filesystem MCP server',
1958-
description: 'This configuration will be deleted and no longer available in Q. \n\n This cannot be undone.'
1958+
description: 'This configuration will be deleted and no longer available in Q. \n\n **This cannot be undone.**'
19591959
}
19601960
},
19611961
{
@@ -1976,6 +1976,11 @@ export const sampleMCPDetails = (title: string): DetailedList => {
19761976
return {
19771977
header: {
19781978
title: `MCP: ${title}`,
1979+
status: {
1980+
title: 'Detail of the issue',
1981+
icon: 'cancel-circle',
1982+
status: 'error'
1983+
},
19791984
description:
19801985
'Extend the capabilities of Q with [MCP servers](#). Q automatically uses any MCP server that has been added. All MCPs are defaulted to "Ask before running". [Learn more](#)',
19811986
actions: [
@@ -2061,25 +2066,22 @@ export const sampleMCPDetails = (title: string): DetailedList => {
20612066
value: [
20622067
{
20632068
persistent: true,
2064-
values: {
2069+
value: {
20652070
'arg_key': '-y',
20662071
},
20672072
},
20682073
{
2069-
persistent: false,
2070-
values: {
2074+
value: {
20712075
'arg_key': '@modelcontextprotocol/server-filesystem',
20722076
},
20732077
},
20742078
{
2075-
persistent: false,
2076-
values: {
2079+
value: {
20772080
'arg_key': '/Users/username/Desktop',
20782081
},
20792082
},
20802083
{
2081-
persistent: false,
2082-
values: {
2084+
value: {
20832085
'arg_key': '/path/to/other/allowed/dir',
20842086
},
20852087
},
@@ -2103,15 +2105,13 @@ export const sampleMCPDetails = (title: string): DetailedList => {
21032105
],
21042106
value: [
21052107
{
2106-
persistent: true,
2107-
values: {
2108+
value: {
21082109
'env_var_name': 'some_env',
21092110
'env_var_value': 'AJSKJLE!@)(UD',
21102111
},
21112112
},
21122113
{
2113-
persistent: false,
2114-
values: {
2114+
value: {
21152115
'env_var_name': 'some_other_env',
21162116
'env_var_value': '12kjlkj!dddaa',
21172117
},

‎src/components/card/card.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55
import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
66
import { StyleLoader } from '../../helper/style-loader';
7-
import { EngagementType } from '../../static';
7+
import { EngagementType, Status } from '../../static';
88

99
/**
1010
* We'll not consider it as an engagement if the total spend time is lower than below constant and won't trigger the event
@@ -19,6 +19,7 @@ const ENGAGEMENT_MIN_CLICK_DURATION = 300;
1919
export interface CardProps extends Partial<DomBuilderObject> {
2020
border?: boolean;
2121
background?: boolean;
22+
status?: Status;
2223
padding?: 'small' | 'medium' | 'large' | 'none';
2324
children?: Array<HTMLElement | ExtendedHTMLElement | string>;
2425
onCardEngaged?: (engagement: {
@@ -47,6 +48,7 @@ export class Card {
4748
classNames: [
4849
'mynah-card',
4950
`padding-${props.padding ?? 'medium'}`,
51+
`status-${props.status ?? 'default'}`,
5052
props.border !== false ? 'border' : '',
5153
props.background !== false ? 'background' : '',
5254
...(props.classNames ?? [])

‎src/components/chat-item/chat-item-form-items.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export class ChatItemFormItemsWrapper {
8989
label,
9090
description,
9191
items: chatItemOption.items,
92-
entries: chatItemOption.value,
92+
value: chatItemOption.value,
9393
...(this.getHandlers(chatItemOption))
9494
});
9595
break;
@@ -348,8 +348,12 @@ export class ChatItemFormItemsWrapper {
348348
this.onAllFormItemsDisabled?.();
349349
};
350350

351-
getAllValues = (): Record<string, string | string[]> => {
352-
const valueMap: Record<string, string | string[]> = {};
351+
enableAll = (): void => {
352+
Object.keys(this.options).forEach(chatOptionId => this.options[chatOptionId].setEnabled(true));
353+
};
354+
355+
getAllValues = (): Record<string, string | Array<Record<string, string>>> => {
356+
const valueMap: Record<string, string | Array<Record<string, string>>> = {};
353357
Object.keys(this.options).forEach(chatOptionId => {
354358
valueMap[chatOptionId] = this.options[chatOptionId].getValue();
355359
});

‎src/components/chat-item/prompt-input/prompt-options.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export class PromptOptions {
7777
});
7878
};
7979

80-
public readonly getOptionValues = (): Record<string, string | string[]> => {
80+
public readonly getOptionValues = (): Record<string, string | Array<Record<string, string>>> => {
8181
return this.formItemsWrapper?.getAllValues() ?? {};
8282
};
8383
}

‎src/components/detailed-list/detailed-list-sheet.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export class DetailedListSheet {
4646
fullScreen: true,
4747
title: this.props.detailedList.header?.title,
4848
description: this.props.detailedList.header?.description,
49+
status: this.props.detailedList.header?.status,
4950
actions: this.props.detailedList.header?.actions,
5051
children: [ this.detailedListWrapper.render ],
5152
showBackButton,
@@ -70,6 +71,7 @@ export class DetailedListSheet {
7071
MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.UPDATE_SHEET, {
7172
title: this.props.detailedList.header?.title,
7273
description: this.props.detailedList.header?.description,
74+
status: this.props.detailedList.header?.status,
7375
showBackButton,
7476
actions: this.props.detailedList.header?.actions
7577
} satisfies Partial<SheetProps>);

‎src/components/detailed-list/detailed-list.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { chunkArray } from '../../helper/quick-pick-data-handler';
99
import { ChatItemFormItemsWrapper } from '../chat-item/chat-item-form-items';
1010
import { TitleDescriptionWithIcon } from '../title-description-with-icon';
1111
import { generateUID } from '../../main';
12+
import { Card } from '../card/card';
1213

1314
export interface DetailedListWrapperProps {
1415
detailedList: DetailedList;
@@ -95,7 +96,25 @@ export class DetailedListWrapper {
9596
private readonly getHeader = (): Array<ExtendedHTMLElement | string> => {
9697
if (this.props.detailedList.header != null) {
9798
return [ new TitleDescriptionWithIcon({
98-
description: this.props.detailedList.header.description,
99+
description: DomBuilder.getInstance().build({
100+
type: 'div',
101+
children: [
102+
this.props.detailedList.header.description ?? '',
103+
...(this.props.detailedList.header.status != null
104+
? [ new Card({
105+
testId: testIds.sheet.description,
106+
border: true,
107+
padding: 'medium',
108+
status: this.props.detailedList.header.status?.status,
109+
children: [ new TitleDescriptionWithIcon({
110+
description: this.props.detailedList.header.status?.description,
111+
title: this.props.detailedList.header.status?.title,
112+
icon: this.props.detailedList.header.status?.icon
113+
}).render ],
114+
}).render ]
115+
: [])
116+
]
117+
}),
99118
icon: this.props.detailedList.header.icon,
100119
title: this.props.detailedList.header.title,
101120
}).render ];

‎src/components/feedback-form/feedback-form.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ export class FeedbackForm {
162162
chatItem: Partial<ChatItem>;
163163
title?: string;
164164
description?: string;
165-
onFormAction?: (actionName: string, formData: Record<string, string | string[]>) => void;
165+
onFormAction?: (actionName: string, formData: Record<string, string | Array<Record<string, string>>>) => void;
166166
onFormDisabled?: () => void;
167167
onCloseButtonClick?: (e: Event) => void;
168168
}): Array<ExtendedHTMLElement | HTMLElement | string | DomBuilderObject> => {

‎src/components/form-items/checkbox.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export class CheckboxInternal extends CheckboxAbstract {
9393
classNames: [ 'mynah-form-input-label' ],
9494
children: [ ...(props.title != null ? [ props.title ] : []) ]
9595
},
96+
...[ props.description !== undefined ? props.description : '' ],
9697
{
9798
type: 'div',
9899
classNames: [ 'mynah-form-input-container', 'mynah-form-input-radio-group', 'no-border' ],
@@ -101,7 +102,6 @@ export class CheckboxInternal extends CheckboxAbstract {
101102
this.checkboxWrapper,
102103
]
103104
},
104-
...[ props.description !== undefined ? props.description : '' ]
105105
]
106106
});
107107
}

0 commit comments

Comments
 (0)