+
+
+Video element
+
+
+
+ Your browser does not support the video tag.
+
+Audio element
+
+
+
+ Your browser does not support the audio tag.
+
+Image
+There might be infinite number of possible examples with all supported tags and their attributes. It doesn't make so much sense to demonstrate all of them here.
+You should go take a look to the documentation
+`,
+ };
+};
+
+const attachmentIcon = `
+ `;
+export const exampleCustomRendererWithDomBuilderJson: ChatItem = {
+ messageId: new Date().getTime().toString(),
+ type: ChatItemType.ANSWER,
+ canBeVoted: true,
+ body: `Your Refactor analysis is ready! You can review it by opening the Markdown file: [file_name](#hello-pdf)
+ You can also ask me any follow-up questions that you have or adjust any part by generating a revised analysis.`,
+ customRenderer: [
+ {
+ type: 'blockquote',
+ events: {
+ click: (e: Event) => {
+ console.log('Hello!', e);
+ },
+ },
+
+ children: [
+ {
+ type: 'table',
+ children: [
+ {
+ type: 'tr',
+ children: [
+ {
+ type: 'td',
+ attributes: {
+ style: 'min-width: 30px; width: 30px;',
+ },
+ children: [
+ {
+ type: 'img',
+ attributes: {
+ src: `data:image/svg+xml;base64,${window.btoa(attachmentIcon)}`,
+ },
+ },
+ ],
+ },
+ {
+ type: 'td',
+ children: [
+ {
+ type: 'strong',
+ children: ['Refactor_analysis_[id] .pdf'],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+};
+
+export const exampleDownloadFile: ChatItem = {
+ messageId: new Date().getTime().toString(),
+ type: ChatItemType.ANSWER,
+ canBeVoted: true,
+ body: `Your Refactor analysis is ready! You can review it by opening the Markdown file: [file_name](#hello-pdf)
+ You can also ask me any follow-up questions that you have or adjust any part by generating a revised analysis.`,
+ fileList: {
+ fileTreeTitle: 'Report',
+ rootFolderTitle: '',
+ filePaths: ['Refactor_analysis_[id] .pdf'],
+ },
+};
+
+export const exampleInformationCard = (
+ statusType: null | Status,
+ statusBody: string | null,
+ snap?: boolean,
+): ChatItem => {
+ return {
+ messageId: generateUID(),
+ snapToTop: snap === true,
+ type: ChatItemType.ANSWER,
+ informationCard: {
+ title: 'Information card',
+ description: 'With a description below the title.',
+ icon: MynahIcons.BUG,
+ content: {
+ body: sampleList2 as string,
+ },
+ status:
+ statusType === null || statusBody === null
+ ? {}
+ : {
+ status: statusType,
+ icon:
+ statusType === 'warning'
+ ? MynahIcons.WARNING
+ : statusType === 'error'
+ ? MynahIcons.ERROR
+ : MynahIcons.THUMBS_UP,
+ body: statusBody,
+ },
+ },
+ };
+};
+
+export const exampleBorderedCard = (): ChatItem => {
+ return {
+ messageId: generateUID(),
+ type: ChatItemType.ANSWER,
+ border: true,
+ header: {
+ padding: true,
+ iconForegroundStatus: 'warning',
+ icon: MynahIcons.INFO,
+ body: '### /dev is going away soon!',
+ },
+ body: `With agentic coding, you can now ask me any coding question directly in the chat instead of using /dev.
+
+You can ask me to do things like:
+1. Create a project
+2. Add a feature
+3. Modify your files
+
+Try it out by typing your request in the chat!`,
+ };
+};
+
+export const exampleConfirmationButtons: ChatItem = {
+ type: ChatItemType.ANSWER,
+ messageId: new Date().getTime().toString(),
+ body: 'This example shows some buttons with the `position` prop set to `outside`. Now we can use them to, for example, ask for confirmation! Does that make sense?',
+ buttons: [
+ {
+ id: 'confirmation-buttons-cancel',
+ text: `Cancel`,
+ status: 'error',
+ icon: MynahIcons.CANCEL_CIRCLE,
+ position: 'outside',
+ },
+ {
+ id: 'confirmation-buttons-confirm',
+ text: `Confirm`,
+ status: 'success',
+ icon: MynahIcons.OK_CIRCLED,
+ position: 'outside',
+ },
+ ],
+};
+
+export const exampleButtons: ChatItem = {
+ type: ChatItemType.ANSWER,
+ messageId: new Date().getTime().toString(),
+ body: 'This is a card with actions inside!',
+ buttons: [
+ {
+ text: 'With Icon',
+ id: 'action-1',
+ status: 'info',
+ icon: MynahIcons.CHAT,
+ },
+ {
+ text: 'Default',
+ description: 'This has no status set!',
+ id: 'action-2',
+ },
+ {
+ text: 'Disabled',
+ description: 'This is disabled for some reason!',
+ id: 'action-3',
+ disabled: true,
+ },
+ {
+ text: 'Primary hover (with flash)',
+ fillState: 'hover',
+ id: 'action-3',
+ flash: 'infinite',
+ status: 'primary',
+ },
+ {
+ text: 'Primary',
+ description: 'This is colored!',
+ id: 'action-3',
+ status: 'primary',
+ },
+ {
+ text: 'Main hover (with flash)',
+ fillState: 'hover',
+ id: 'action-3',
+ flash: 'infinite',
+ icon: MynahIcons.PROGRESS,
+ status: 'main',
+ },
+ {
+ text: 'Main',
+ description: 'This is more colored!',
+ id: 'action-3',
+ status: 'main',
+ },
+ {
+ text: 'Clear',
+ description: 'This is clear!',
+ id: 'action-3',
+ status: 'clear',
+ },
+ ],
+};
+
+export const exampleStatusButtons: ChatItem = {
+ type: ChatItemType.ANSWER,
+ messageId: new Date().getTime().toString(),
+ body: 'These are buttons with statuses',
+ buttons: [
+ {
+ text: 'Proceed',
+ id: 'proceed',
+ icon: MynahIcons.OK,
+ status: 'success',
+ flash: 'infinite',
+ },
+ {
+ text: 'Caution',
+ id: 'caution',
+ icon: MynahIcons.WARNING,
+ status: 'warning',
+ },
+ {
+ text: 'Cancel',
+ id: 'cancel',
+ icon: MynahIcons.CANCEL,
+ status: 'error',
+ },
+ {
+ text: 'Change Folder',
+ id: 'change-folder',
+ icon: MynahIcons.REFRESH,
+ status: 'info',
+ },
+ {
+ text: 'Change Folder',
+ id: 'change-folder',
+ icon: MynahIcons.REFRESH,
+ status: 'info',
+ },
+
+ // External buttons
+ {
+ text: 'Proceed',
+ id: 'proceed',
+ fillState: 'hover',
+ position: 'outside',
+ icon: MynahIcons.OK,
+ status: 'success',
+ flash: 'infinite',
+ },
+ {
+ text: 'Caution',
+ fillState: 'hover',
+ position: 'outside',
+ id: 'caution',
+ icon: MynahIcons.WARNING,
+ status: 'warning',
+ },
+ {
+ text: 'Cancel',
+ fillState: 'hover',
+ position: 'outside',
+ id: 'cancel',
+ icon: MynahIcons.CANCEL,
+ status: 'error',
+ },
+ {
+ text: 'Change Folder',
+ fillState: 'hover',
+ position: 'outside',
+ id: 'change-folder',
+ icon: MynahIcons.REFRESH,
+ status: 'info',
+ },
+ ],
+};
+
+export const exampleVoteChatItem: ChatItem = {
+ messageId: new Date().getTime().toString(),
+ type: ChatItemType.ANSWER,
+ canBeVoted: true,
+ body: 'This chat item can be voted.',
+};
+
+export const sampleHeaderTypes: ChatItem[] = [
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ icon: {
+ name: 'javascript',
+ base64Svg:
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjEyIDAuMjRINC44MlY1QzQuODIgNi4wMjY2NyA0LjU4IDYuNzczMzMgNC4xIDcuMjRDMy42NiA3LjY2NjY3IDMgNy44OCAyLjEyIDcuODhDMS45MiA3Ljg4IDEuNyA3Ljg2NjY3IDEuNDYgNy44NEMxLjIyIDcuOCAxLjAyNjY3IDcuNzQ2NjcgMC44OCA3LjY4TDEuMDYgNi4zMkMxLjMxMzMzIDYuNDQgMS42MDY2NyA2LjUgMS45NCA2LjVDMi4zMTMzMyA2LjUgMi41OTMzMyA2LjQgMi43OCA2LjJDMy4wMDY2NyA1Ljk2IDMuMTIgNS41NiAzLjEyIDVWMC4yNFpNNi4zMiA2QzYuNTYgNi4xMzMzMyA2Ljg0IDYuMjQ2NjcgNy4xNiA2LjM0QzcuNTIgNi40NDY2NyA3Ljg2IDYuNSA4LjE4IDYuNUM4LjU4IDYuNSA4Ljg4IDYuNDMzMzMgOS4wOCA2LjNDOS4yOCA2LjE1MzMzIDkuMzggNS45NTMzMyA5LjM4IDUuN0M5LjM4IDUuNDQ2NjcgOS4yODY2NyA1LjI0NjY3IDkuMSA1LjFDOC45MTMzMyA0Ljk0IDguNTg2NjcgNC43OCA4LjEyIDQuNjJDNi43NDY2NyA0LjE0IDYuMDYgMy4zOTMzMyA2LjA2IDIuMzhDNi4wNiAxLjcxMzMzIDYuMzEzMzMgMS4xNzMzMyA2LjgyIDAuNzU5OTk5QzcuMzQgMC4zMzMzMzMgOC4wNDY2NyAwLjEyIDguOTQgMC4xMkM5LjY0NjY3IDAuMTIgMTAuMjkzMyAwLjI0NjY2NyAxMC44OCAwLjVMMTAuNSAxLjg4TDEwLjM4IDEuODJDMTAuMTQgMS43MjY2NyA5Ljk0NjY3IDEuNjYgOS44IDEuNjJDOS41MiAxLjU0IDkuMjMzMzMgMS41IDguOTQgMS41QzguNTggMS41IDguMyAxLjU3MzMzIDguMSAxLjcyQzcuOTEzMzMgMS44NTMzMyA3LjgyIDIuMDMzMzMgNy44MiAyLjI2QzcuODIgMi40ODY2NyA3LjkyNjY3IDIuNjczMzMgOC4xNCAyLjgyQzguMyAyLjk0IDguNjQ2NjcgMy4xMDY2NyA5LjE4IDMuMzJDOS44NDY2NyAzLjU3MzMzIDEwLjMzMzMgMy44OCAxMC42NCA0LjI0QzEwLjk2IDQuNiAxMS4xMiA1LjA0IDExLjEyIDUuNTZDMTEuMTIgNi4yMjY2NyAxMC44NjY3IDYuNzY2NjcgMTAuMzYgNy4xOEM5LjgxMzMzIDcuNjQ2NjcgOS4wNDY2NyA3Ljg4IDguMDYgNy44OEM3LjY3MzMzIDcuODggNy4yNjY2NyA3LjgyNjY3IDYuODQgNy43MkM2LjUwNjY3IDcuNjUzMzMgNi4yMDY2NyA3LjU2IDUuOTQgNy40NEw2LjMyIDZaIiBmaWxsPSIjQ0JDQjQxIi8+Cjwvc3ZnPgo=',
+ },
+ status: {
+ icon: MynahIcons.PROGRESS,
+ text: 'Working',
+ status: 'warning',
+ },
+ buttons: [
+ {
+ id: 'stop',
+ status: 'clear',
+ icon: MynahIcons.STOP,
+ },
+ ],
+ fileList: {
+ fileTreeTitle: '',
+ filePaths: ['package.json'],
+ details: {
+ 'package.json': {
+ icon: null,
+ label: 'Creating',
+ changes: {
+ added: 36,
+ deleted: 0,
+ total: 36,
+ },
+ },
+ },
+ },
+ },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ buttons: [
+ {
+ id: 'undo-all',
+ status: 'clear',
+ position: 'outside',
+ keepCardAfterClick: false,
+ icon: MynahIcons.UNDO,
+ text: 'Undo all changes',
+ },
+ ],
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ icon: 'code-block',
+ status: {
+ icon: MynahIcons.OK,
+ text: 'Accepted',
+ status: 'success',
+ },
+ fileList: {
+ hideFileCount: true,
+ fileTreeTitle: '',
+ filePaths: ['package.json'],
+ details: {
+ 'package.json': {
+ icon: null,
+ label: 'Created',
+ changes: {
+ added: 36,
+ deleted: 0,
+ total: 36,
+ },
+ },
+ },
+ },
+ },
+ },
+
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ muted: true,
+ header: {
+ icon: 'code-block',
+ status: {
+ icon: MynahIcons.OK,
+ text: 'Accepted',
+ status: 'success',
+ },
+ fileList: {
+ hideFileCount: true,
+ fileTreeTitle: '',
+ filePaths: ['package.json'],
+ details: {
+ 'package.json': {
+ icon: null,
+ label: 'Created',
+ changes: {
+ added: 36,
+ deleted: 0,
+ total: 36,
+ },
+ },
+ },
+ },
+ },
+ },
+
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ muted: true,
+ header: {
+ icon: 'code-block',
+ status: {
+ icon: MynahIcons.CANCEL,
+ text: 'Rejected',
+ },
+ fileList: {
+ hideFileCount: true,
+ fileTreeTitle: '',
+ filePaths: ['package.json'],
+ details: {
+ 'package.json': {
+ icon: null,
+ label: 'Created',
+ changes: {
+ added: 36,
+ deleted: 0,
+ total: 36,
+ },
+ },
+ },
+ },
+ },
+ },
+
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ muted: true,
+ header: {
+ icon: 'code-block',
+ status: {
+ icon: MynahIcons.ERROR,
+ text: 'Error',
+ status: 'error',
+ description: 'There was an error while creating the file.',
+ },
+ fileList: {
+ hideFileCount: true,
+ fileTreeTitle: '',
+ filePaths: ['package.json'],
+ details: {
+ 'package.json': {
+ icon: null,
+ label: 'Created',
+ changes: {
+ added: 36,
+ deleted: 0,
+ total: 36,
+ },
+ },
+ },
+ },
+ },
+ },
+
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ messageId: generateUID(),
+ header: {
+ icon: 'code-block',
+ buttons: [
+ {
+ icon: 'cancel',
+ status: 'clear',
+ id: 'reject-file-change-on-header-card',
+ },
+ {
+ icon: 'ok',
+ status: 'clear',
+ id: 'accept-file-change-on-header-card',
+ },
+ ],
+ fileList: {
+ hideFileCount: true,
+ fileTreeTitle: '',
+ filePaths: ['package.json'],
+ details: {
+ 'package.json': {
+ icon: null,
+ label: 'Created',
+ changes: {
+ added: 36,
+ deleted: 0,
+ total: 36,
+ },
+ },
+ },
+ },
+ },
+ body: `
+\`\`\`bash
+hello
+\`\`\`
+\`\`\`diff-typescript
+const mynahUI = new MynahUI({
+tabs: {
+ 'tab-1': {
+ isSelected: true,
+ store: {
+ tabTitle: 'Chat',
+ chatItems: [
+ {
+ type: ChatItemType.ANSWER,
+ body: 'Welcome to our chat!',
+ messageId: 'welcome-message'
+ },
+ ],
+- promptInputPlaceholder: 'Write your question',
++ promptInputPlaceholder: 'Type your question',
+ }
+ }
+},
+- onChatPrompt: () => {},
++ onChatPrompt: (tabId: string, prompt: ChatPrompt) => {
++ mynahUI.addChatItem(tabId, {
++ type: ChatItemType.PROMPT,
++ messageId: new Date().getTime().toString(),
++ body: prompt.escapedPrompt
++ });
++ // call your genAI action
++ }
+});
+\`\`\`
+ `,
+ codeBlockActions: {
+ copy: null,
+ 'insert-to-cursor': null,
+ },
+ },
+
+ {
+ fullWidth: true,
+ padding: false,
+ type: ChatItemType.ANSWER,
+ header: {
+ icon: MynahIcons.SHELL,
+ body: 'Terminal command',
+ status: {
+ icon: MynahIcons.PROGRESS,
+ },
+ buttons: [
+ {
+ status: 'clear',
+ icon: MynahIcons.STOP,
+ id: 'stop-bash-command',
+ },
+ ],
+ },
+ body: `
+\`\`\`bash
+mkdir -p src/ lalalaaaa
+\`\`\`
+`,
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+ {
+ fullWidth: true,
+ padding: false,
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Shell',
+ status: {
+ position: 'left',
+ icon: MynahIcons.WARNING,
+ status: 'warning',
+ description: 'This command may cause\nsignificant data loss or damage.',
+ },
+ buttons: [
+ {
+ status: 'clear',
+ icon: 'play',
+ text: 'Run',
+ id: 'run-bash-command',
+ },
+ {
+ status: 'dimmed-clear',
+ icon: 'cancel',
+ text: 'Reject',
+ id: 'reject-bash-command',
+ },
+ ],
+ },
+ body: `
+\`\`\`bash
+mkdir -p src/ lalalaaaa
+\`\`\`
+`,
+ quickSettings: {
+ type: 'select',
+ messageId: '1',
+ tabId: 'hello',
+ description: '',
+ descriptionLink: {
+ id: 'button-id',
+ destination: 'Built-in',
+ text: 'More control, modify the commands',
+ },
+ options: [
+ { id: 'option1', label: 'Ask to Run', selected: true, value: 'Destructive' },
+ { id: 'option2', label: 'Auto run', value: 'Destructive' },
+ ],
+ onChange: (selectedOptions: any) => {
+ console.log('Selected options:', selectedOptions);
+ },
+ },
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+ {
+ fullWidth: true,
+ padding: false,
+ type: ChatItemType.ANSWER,
+ header: {
+ icon: MynahIcons.CODE_BLOCK,
+ body: 'Terminal command',
+ buttons: [
+ {
+ status: 'clear',
+ icon: 'play',
+ id: 'run-bash-command',
+ },
+ ],
+ },
+ body: `
+\`\`\`bash
+mkdir -p src/ lalalaaaa
+\`\`\`
+`,
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+
+ {
+ fullWidth: true,
+ padding: false,
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Shell',
+ status: {
+ position: 'left',
+ icon: MynahIcons.WARNING,
+ status: 'warning',
+ description: 'This command may cause\nsignificant data loss or damage.',
+ },
+ buttons: [
+ {
+ status: 'clear',
+ icon: 'play',
+ text: 'Run',
+ id: 'run-bash-command',
+ },
+ {
+ status: 'dimmed-clear',
+ icon: 'cancel',
+ text: 'Reject',
+ id: 'reject-bash-command',
+ },
+ ],
+ },
+ body: `
+\`\`\`bash
+mkdir -p src/ lalalaaaa
+\`\`\`
+`,
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+
+ {
+ type: ChatItemType.DIRECTIVE,
+ body: `Starting with a directive with normal text.`,
+ },
+
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ buttons: [
+ {
+ icon: 'undo',
+ text: 'Undo',
+ status: 'clear',
+ id: 'undo-change', // Or whatever ID you have
+ },
+ ],
+ fileList: {
+ hideFileCount: true,
+ fileTreeTitle: '',
+ filePaths: ['maze_game.py'],
+ details: {
+ 'maze_game.py': {
+ description: 'Hello!',
+ icon: null,
+ changes: {
+ added: 131,
+ deleted: 0,
+ },
+ },
+ },
+ },
+ },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ status: 'error',
+ body: 'To avoid errors, do not make weird things in the system!',
+ header: {
+ icon: 'cancel',
+ iconForegroundStatus: 'error',
+ body: '##### Error on something!',
+ },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ // status: '',
+ body: 'To avoid warnings, do not make weird things in the system!',
+ header: {
+ status: {
+ icon: 'warning',
+ status: 'warning',
+ position: 'left',
+ description: 'There is an error!',
+ },
+ body: '##### Warning on something!',
+ buttons: [
+ {
+ id: 'accept-warning',
+ text: 'Accept',
+ status: 'clear',
+ icon: 'ok',
+ },
+ ],
+ },
+ },
+ {
+ fullWidth: true,
+ padding: false,
+ type: ChatItemType.ANSWER,
+ wrapCodes: true,
+ header: {
+ icon: MynahIcons.CODE_BLOCK,
+ body: 'Terminal command',
+ buttons: [
+ {
+ status: 'clear',
+ icon: 'play',
+ text: 'Run',
+ id: 'run-bash-command',
+ },
+ {
+ status: 'dimmed-clear',
+ icon: 'cancel',
+ text: 'Reject',
+ id: 'cancel-bash-command',
+ },
+ ],
+ },
+ body: `
+\`\`\`bash
+mkdir -p src/ lalalaaaa sad fbnsafsdaf sdakjfsd sadf asdkljf basdkjfh ksajhf kjsadhf dskjkj hasdklf askdjfh kj sadhfksdaf
+\`\`\`
+`,
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ icon: 'progress',
+ body: 'Reading',
+ fileList: {
+ filePaths: ['package.json', 'README.md'],
+ details: {
+ 'package.json': {
+ visibleName: 'package.json',
+ description: 'package.json',
+ },
+ 'README.md': {
+ visibleName: 'README.md',
+ description: 'README.md',
+ },
+ },
+ renderAsPills: true,
+ },
+ },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ icon: 'eye',
+ body: '5 files read',
+ fileList: {
+ filePaths: [
+ 'package.json',
+ 'README.md',
+ 'webpack.config.js',
+ 'src/app.ts',
+ 'src/components/Button/Button.tsx',
+ ],
+ details: {
+ 'package.json': {
+ visibleName: 'package.json',
+ description: 'package.json',
+ },
+ 'README.md': {
+ visibleName: 'README.md',
+ description: 'README.md',
+ },
+ 'webpack.config.js': {
+ visibleName: 'webpack.config.js',
+ description: 'webpack.config.js',
+ },
+ 'src/app.ts': {
+ visibleName: 'app.ts',
+ description: 'src/app.ts',
+ },
+ 'src/components/Button/Button.tsx': {
+ visibleName: 'Button.tsx',
+ description: 'src/components/Button/Button.tsx',
+ },
+ },
+ renderAsPills: true,
+ },
+ },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ icon: 'progress',
+ body: 'Listing',
+ fileList: {
+ filePaths: ['src/components/ui', 'src/components/forms'],
+ details: {
+ 'src/components/ui': {
+ visibleName: 'ui',
+ description: 'src/components/ui',
+ clickable: false,
+ },
+ 'src/components/forms': {
+ visibleName: 'forms',
+ description: 'src/components/forms',
+ clickable: false,
+ },
+ },
+ renderAsPills: true,
+ },
+ },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ icon: 'check-list',
+ body: '5 directories listed',
+ fileList: {
+ filePaths: [
+ 'src/components/ui',
+ 'src/components/forms',
+ 'src/components/layout',
+ 'src/utils/helpers',
+ 'src/utils/validation',
+ ],
+ details: {
+ 'src/components/ui': {
+ visibleName: 'ui',
+ description: 'src/components/ui',
+ clickable: false,
+ },
+ 'src/components/forms': {
+ visibleName: 'forms',
+ description: 'src/components/forms',
+ clickable: false,
+ },
+ 'src/components/layout': {
+ visibleName: 'layout',
+ description: 'src/components/layout',
+ clickable: false,
+ },
+ 'src/utils/helpers': {
+ visibleName: 'helpers',
+ description: 'src/components/helpers',
+ clickable: false,
+ },
+ 'src/utils/validation': {
+ visibleName: 'validation',
+ description: 'src/components/validation',
+ clickable: false,
+ },
+ },
+ renderAsPills: true,
+ },
+ },
+ },
+ {
+ type: ChatItemType.ANSWER,
+ fullWidth: true,
+ padding: false,
+ header: {
+ icon: 'search',
+ body: 'Searched for `*.md` in',
+ fileList: {
+ filePaths: ['src/docs'],
+ details: {
+ ['src/docs']: {
+ visibleName: 'docs',
+ description: 'src/docs',
+ clickable: false,
+ },
+ },
+ renderAsPills: true,
+ },
+ status: {
+ text: '5 results found',
+ },
+ },
+ },
+];
+
+export const mcpToolRunSampleCardInit: ChatItem =
+ // Summary Card
+ {
+ padding: false,
+ type: ChatItemType.ANSWER,
+ summary: {
+ content: {
+ padding: false,
+ wrapCodes: true,
+ header: {
+ icon: MynahIcons.TOOLS,
+ fileList: {
+ hideFileCount: true,
+ fileTreeTitle: '',
+ filePaths: ['Running'],
+ details: {
+ Running: {
+ description: 'Work in progress!',
+ icon: null,
+ labelIcon: 'progress',
+ labelIconForegroundStatus: 'info',
+ label: 'Filesystem tool search-files',
+ },
+ },
+ },
+ },
+ },
+ collapsedContent: [
+ {
+ fullWidth: true,
+ padding: false,
+ muted: true,
+ wrapCodes: true,
+ header: {
+ body: 'Parameters',
+ },
+ body: `
+\`\`\`json
+{
+"query": "user:zakiyav",
+"perPage": 100,
+"page": 1
+}
+\`\`\`
+ `,
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+ ],
+ },
+ };
+export const mcpToolRunSampleCard: ChatItem =
+ // Summary Card
+ {
+ padding: false,
+ type: ChatItemType.ANSWER,
+ summary: {
+ content: {
+ padding: false,
+ wrapCodes: true,
+ header: {
+ icon: MynahIcons.TOOLS,
+ body: 'Ran Filesystem tool search-files',
+ fileList: null,
+ buttons: [
+ {
+ status: 'clear',
+ icon: 'play',
+ text: 'Run',
+ id: 'run-bash-command',
+ },
+ {
+ status: 'dimmed-clear',
+ icon: 'cancel',
+ text: 'Reject',
+ id: 'reject-bash-command',
+ },
+ ],
+ },
+ quickSettings: {
+ type: 'select',
+ messageId: '1',
+ tabId: 'hello',
+ description: '',
+ descriptionLink: {
+ id: 'button-id',
+ destination: 'Built-in',
+ text: 'Auto-approve settings',
+ },
+ options: [
+ { id: 'option1', label: 'Ask to Run', selected: true, value: 'Destructive' },
+ { id: 'option2', label: 'Auto run', value: 'Destructive' },
+ ],
+ onChange: (selectedOptions: any) => {
+ console.log('Selected options:', selectedOptions);
+ },
+ },
+ },
+ collapsedContent: [
+ {
+ fullWidth: true,
+ padding: false,
+ muted: true,
+ wrapCodes: true,
+ header: {
+ body: 'Parameters',
+ },
+ body: `
+\`\`\`json
+{
+"query": "user:zakiyav",
+"perPage": 100,
+"page": 1
+}
+\`\`\`
+ `,
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+ {
+ fullWidth: true,
+ padding: false,
+ muted: true,
+ wrapCodes: false,
+ header: {
+ body: 'Results',
+ },
+ body: `
+\`\`\`json
+{
+ "total_count": 1,
+ "incomplete_results": false,
+ "items": [
+ {
+ "id": 69836433,
+ "node_id": "MDasflJlcG9zaXRvcasdnk2OTgzN",
+ "name": "Repo1",
+ "full_name": "zakiyav/Repo1",
+ "private": true,
+ "owner": {
+ "login": "zakiyav",
+ "id": 5873805510,
+ "node_id": "MasDQgb6VjXNlcjQ5MzU1sfasMTA=",
+ "avatar_url": "https://avatars.githubus?v=4",
+ "url": "https://api.github.com/users/zakiyav",
+ "html_url": "https://github.com/zakiyav",
+ "type": "User"
+ }
+ "default_branch": "master"
+ }
+ ]
+}
+\`\`\`
+ `,
+ codeBlockActions: { copy: null, 'insert-to-cursor': null },
+ },
+ ],
+ },
+ };
+
+export const sampleMCPList: DetailedList = {
+ selectable: 'clickable',
+ header: {
+ title: 'MCP Servers',
+ status: {},
+ description:
+ '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".',
+ actions: [
+ {
+ id: 'add-new-mcp',
+ icon: 'plus',
+ status: 'clear',
+ description: 'Add new MCP',
+ },
+ {
+ id: 'refresh-mcp-list',
+ icon: 'refresh',
+ status: 'clear',
+ description: 'Refresh MCP servers',
+ },
+ ],
+ },
+ textDirection: 'row',
+ list: [
+ {
+ groupName: 'Active',
+ children: [
+ {
+ title: 'Built-in',
+ icon: 'ok-circled',
+ status: {
+ description: '8 available tools',
+ icon: 'tools',
+ text: '8',
+ },
+ iconForegroundStatus: 'success',
+ actions: [
+ {
+ id: 'open-mcp-xx',
+ icon: 'right-open',
+ },
+ ],
+ },
+ {
+ title: 'Filesystem',
+ icon: 'ok-circled',
+ status: {
+ icon: 'tools',
+ description: '26 available tools',
+ text: '26',
+ },
+ iconForegroundStatus: 'success',
+ actions: [
+ {
+ id: 'open-mcp-xx',
+ icon: 'right-open',
+ },
+ ],
+ },
+ {
+ title: 'Git',
+ icon: 'cancel-circle',
+ iconForegroundStatus: 'error',
+ description: 'Configuration is broken',
+ groupActions: false,
+ actions: [
+ {
+ id: 'open-mcp-xx',
+ text: 'Fix configuration',
+ icon: 'pencil',
+ },
+ {
+ id: 'open-mcp-xx',
+ disabled: true,
+ icon: 'right-open',
+ },
+ ],
+ },
+ {
+ title: 'Github',
+ icon: 'progress',
+ iconForegroundStatus: 'info',
+ groupActions: false,
+ actions: [
+ {
+ id: 'open-mcp-xx',
+ icon: 'right-open',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ groupName: 'Disabled',
+ children: [
+ {
+ title: 'Redis',
+ icon: 'block',
+ groupActions: false,
+ actions: [
+ {
+ id: 'mcp-enable-tool',
+ icon: MynahIcons.OK,
+ text: 'Enable',
+ },
+ {
+ id: 'mcp-delete-tool',
+ icon: MynahIcons.TRASH,
+ text: 'Delete',
+ confirmation: {
+ cancelButtonText: 'Cancel',
+ confirmButtonText: 'Delete',
+ title: 'Delete Filesystem MCP server',
+ description:
+ 'This configuration will be deleted and no longer available in Q. \n\n **This cannot be undone.**',
+ },
+ },
+ {
+ id: 'open-mcp-xx',
+ disabled: true,
+ icon: 'right-open',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ filterOptions: [],
+ filterActions: [],
+};
+
+export const sampleMCPDetails = (title: string): DetailedList => {
+ return {
+ header: {
+ title: `MCP: ${title}`,
+ status: {
+ title: 'Detail of the issue',
+ icon: 'cancel-circle',
+ status: 'error',
+ },
+ description:
+ '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](#)',
+ actions: [
+ {
+ icon: 'pencil',
+ text: 'Edit setup',
+ id: 'mcp-edit-setup',
+ },
+ {
+ icon: 'ellipsis-h',
+ id: 'mcp-details-menu',
+ items: [
+ {
+ id: 'mcp-disable-tool',
+ text: `Disable ${title}`,
+ icon: 'block',
+ },
+ {
+ id: 'mcp-delete-tool',
+ confirmation: {
+ cancelButtonText: 'Cancel',
+ confirmButtonText: 'Delete',
+ title: 'Delete Filesystem MCP server',
+ description:
+ 'This configuration will be deleted and no longer available in Q. \n\n This cannot be undone.',
+ },
+ text: `Delete ${title}`,
+ icon: 'trash',
+ },
+ ],
+ },
+ ],
+ },
+ list: [],
+ filterActions: [
+ {
+ id: 'cancel-mcp',
+ text: 'Cancel',
+ },
+ {
+ id: 'save-mcp',
+ text: 'Save',
+ status: 'primary',
+ },
+ ],
+ filterOptions: [
+ {
+ type: 'select',
+ id: 'auto-approve',
+ title: 'Auto Approve',
+ options: [
+ {
+ label: 'Yes',
+ value: 'yes',
+ },
+ {
+ label: 'No',
+ value: 'no',
+ },
+ ],
+ selectTooltip: 'Permission for this tool is not configurable yet',
+ mandatory: true,
+ disabled: true,
+ hideMandatoryIcon: true,
+ boldTitle: true,
+ },
+ {
+ type: 'select',
+ id: 'tool_name',
+ title: 'Tool Name',
+ value: 'alwaysAllow',
+ options: [
+ {
+ label: 'Ask',
+ value: 'ask',
+ description: 'Ask for your approval each time this tool is run',
+ },
+ {
+ label: 'Always Allow',
+ value: 'alwaysAllow',
+ description: 'Always allow this tool to run without asking for approval',
+ },
+ {
+ label: 'Deny',
+ value: 'deny',
+ description: 'Never run this tool',
+ },
+ ],
+ boldTitle: true,
+ mandatory: true,
+ hideMandatoryIcon: true,
+ },
+ {
+ type: 'select',
+ id: 'transport',
+ title: 'Transport',
+ options: [
+ {
+ label: 'Yes',
+ value: 'yes',
+ },
+ {
+ label: 'No',
+ value: 'no',
+ },
+ ],
+ },
+ {
+ type: 'textinput',
+ title: 'Command',
+ id: 'command',
+ },
+ {
+ type: 'numericinput',
+ title: 'Timeout',
+ description: 'Seconds',
+ id: 'timeout',
+ },
+ {
+ // Add mandatory field
+ id: 'args-pillbox',
+ type: 'pillbox',
+ title: 'Arguments - pillbox',
+ placeholder: 'Type arguments and press Enter',
+ value: '-y,@modelcontextprotocol/server-filesystem,/Users/username/Desktop,/path/to/other/allowed/dir',
+ },
+ {
+ id: 'args',
+ type: 'list',
+ title: 'Arguments',
+ mandatory: false,
+ items: [
+ {
+ id: 'arg_key',
+ type: 'textinput',
+ },
+ ],
+ value: [
+ {
+ persistent: true,
+ value: {
+ arg_key: '-y',
+ },
+ },
+ {
+ value: {
+ arg_key: '@modelcontextprotocol/server-filesystem',
+ },
+ },
+ {
+ value: {
+ arg_key: '/Users/username/Desktop',
+ },
+ },
+ {
+ value: {
+ arg_key: '/path/to/other/allowed/dir',
+ },
+ },
+ ],
+ },
+ {
+ id: 'env_variables',
+ type: 'list',
+ title: 'Environment variables',
+ items: [
+ {
+ id: 'env_var_name',
+ title: 'Name',
+ type: 'textinput',
+ },
+ {
+ id: 'env_var_value',
+ title: 'Value',
+ type: 'textinput',
+ },
+ ],
+ value: [
+ {
+ value: {
+ env_var_name: 'some_env',
+ env_var_value: 'AJSKJLE!@)(UD',
+ },
+ },
+ {
+ value: {
+ env_var_name: 'some_other_env',
+ env_var_value: '12kjlkj!dddaa',
+ },
+ },
+ ],
+ },
+ ],
+ };
+};
+
+export const sampleRulesList: DetailedList = {
+ selectable: 'clickable',
+ list: [
+ {
+ children: [
+ {
+ id: 'README',
+ icon: MynahIcons.CHECK_LIST,
+ description: 'README',
+ actions: [{ id: 'README.md', icon: MynahIcons.OK, status: 'clear' }],
+ },
+ ],
+ },
+ {
+ groupName: '.amazonq/rules',
+ childrenIndented: true,
+ icon: MynahIcons.FOLDER,
+ actions: [{ id: 'java-expert.md', icon: MynahIcons.OK, status: 'clear' }],
+ children: [
+ {
+ id: 'java-expert.md',
+ icon: MynahIcons.CHECK_LIST,
+ description: 'java-expert',
+ actions: [{ id: 'java-expert.md', icon: MynahIcons.OK, status: 'clear' }],
+ },
+ ],
+ },
+ ],
+};
diff --git a/mynah-ui/example/src/samples/sample-diff-applied.md b/mynah-ui/example/src/samples/sample-diff-applied.md
new file mode 100644
index 0000000000..639cbef76f
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-diff-applied.md
@@ -0,0 +1,28 @@
+```typescript
+const mynahUI = new MynahUI({
+ tabs: {
+ 'tab-1': {
+ isSelected: true,
+ store: {
+ tabTitle: 'Chat',
+ chatItems: [
+ {
+ type: ChatItemType.ANSWER,
+ body: 'Welcome to our chat!',
+ messageId: 'welcome-message'
+ },
+ ],
+ promptInputPlaceholder: 'Type your question',
+ }
+ }
+ },
+ onChatPrompt: (tabId: string, prompt: ChatPrompt) => {
+ mynahUI.addChatItem(tabId, {
+ type: ChatItemType.PROMPT,
+ messageId: new Date().getTime().toString(),
+ body: prompt.escapedPrompt
+ });
+ // call your genAI action
+ }
+});
+```
\ No newline at end of file
diff --git a/mynah-ui/example/src/samples/sample-diff.md b/mynah-ui/example/src/samples/sample-diff.md
new file mode 100644
index 0000000000..1b6813f263
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-diff.md
@@ -0,0 +1,34 @@
+### Refactoring process on `index.ts`
+
+Changes will be applied _between line 42 and 70_.
+
+```diff-typescript
+const mynahUI = new MynahUI({
+ tabs: {
+ 'tab-1': {
+ isSelected: true,
+ store: {
+ tabTitle: 'Chat',
+ chatItems: [
+ {
+ type: ChatItemType.ANSWER,
+ body: 'Welcome to our chat!',
+ messageId: 'welcome-message'
+ },
+ ],
+- promptInputPlaceholder: 'Write your question',
++ promptInputPlaceholder: 'Type your question',
+ }
+ }
+ },
+- onChatPrompt: () => {},
++ onChatPrompt: (tabId: string, prompt: ChatPrompt) => {
++ mynahUI.addChatItem(tabId, {
++ type: ChatItemType.PROMPT,
++ messageId: new Date().getTime().toString(),
++ body: prompt.escapedPrompt
++ });
++ // call your genAI action
++ }
+});
+```
\ No newline at end of file
diff --git a/mynah-ui/example/src/samples/sample-list-0.md b/mynah-ui/example/src/samples/sample-list-0.md
new file mode 100644
index 0000000000..7ac8da4157
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-list-0.md
@@ -0,0 +1 @@
+This is a list below with some code and bolds inside
\ No newline at end of file
diff --git a/mynah-ui/example/src/samples/sample-list-1.md b/mynah-ui/example/src/samples/sample-list-1.md
new file mode 100644
index 0000000000..ecb20e7855
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-list-1.md
@@ -0,0 +1,6 @@
+This is a list below with some code and bolds inside
+
+- **Bold** Text with some `inline code`.
+- Also with some code blocks ```const a = 5;```
+
+End of the list.
\ No newline at end of file
diff --git a/mynah-ui/example/src/samples/sample-list-2.md b/mynah-ui/example/src/samples/sample-list-2.md
new file mode 100644
index 0000000000..9bbad813b6
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-list-2.md
@@ -0,0 +1,12 @@
+This is a list below with some code and bolds inside
+
+- **Bold** Text with some `inline code`.
+- Also with some code blocks ```const a = 5;```
+
+End of the list.
+
+List with numbers.
+1. **Item1** This is the first list item.
+2. **Item2** This is the second list item.
+3. **Item3** This is the third list item.
+4. **Item4** This is the fourth list item. And it also has a [LINK](#) inside.
\ No newline at end of file
diff --git a/mynah-ui/example/src/samples/sample-list-3.md b/mynah-ui/example/src/samples/sample-list-3.md
new file mode 100644
index 0000000000..f873703276
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-list-3.md
@@ -0,0 +1,28 @@
+This is a list below with some code and bolds inside
+
+- **Bold** Text with some `inline code`.
+- Also with some code blocks ```const a = 5;```
+
+End of the list.
+
+List with numbers.
+1. **Item1** This is the first list item.
+2. **Item2** This is the second list item.
+3. **Item3** This is the third list item.
+4. **Item4** This is the fourth list item. And it also has a [LINK](#) inside.
+
+Nested List with numbers.
+1. **Item1** This is the first list item.
+ - Test 1
+ - Test 2
+ - Test 3 some `inline code example (code without pre)` and right after that we want to show a real code block:
+ ```javascript
+ this is a block code;
+ and also a new line;
+ and another line;
+ ```
+ And after that we're still on the same 3rd level item.
+
+2. **Item2** This is the second list item.
+3. **Item3** This is the third list item.
+4. **Item4** This is the fourth list item. And it also has a [LINK](#) inside.
\ No newline at end of file
diff --git a/mynah-ui/example/src/samples/sample-list-4.md b/mynah-ui/example/src/samples/sample-list-4.md
new file mode 100644
index 0000000000..10024fc704
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-list-4.md
@@ -0,0 +1,39 @@
+This is a list below with some code and bolds inside
+
+- **Bold** Text with some `inline code`.
+- Also with some code blocks ```const a = 5;```
+
+End of the list.
+
+List with numbers.
+1. **Item1** This is the first list item.
+2. **Item2** This is the second list item.
+3. **Item3** This is the third list item.
+4. **Item4** This is the fourth list item. And it also has a [LINK](#) inside.
+
+Nested List with numbers.
+1. **Item1** This is the first list item.
+ - Test 1
+ - Test 2
+ - Test 3 some `inline code example (code without pre)` and right after that we want to show a real code block:
+ ```javascript
+ this is a block code;
+ and also a new line;
+ and another line;
+ ```
+ And after that we're still on the same 3rd level item.
+
+2. **Item2** This is the second list item.
+3. **Item3** This is the third list item.
+4. **Item4** This is the fourth list item. And it also has a [LINK](#) inside.
+
+To create a code **block** in Markdown, you would use the triple backticks (\`\`\`) with following syntax:
+
+> \`\`\`
+> let a = 5;
+> console.log(a);
+> a = a + 5;
+> console.log(a);
+> \`\`\`
+
+The asterisk `*` creates an unordered list item, and the double asterisks `**text**` wrap the text you want to make bold. [[1]](https://aasiyaonize.hashnode.dev/markdown-and-restructured)
diff --git a/mynah-ui/example/src/samples/sample-table.md b/mynah-ui/example/src/samples/sample-table.md
new file mode 100644
index 0000000000..15a3bd3608
--- /dev/null
+++ b/mynah-ui/example/src/samples/sample-table.md
@@ -0,0 +1,10 @@
+# Project Features Overview
+
+| Feature | Description | Priority | Status |
+|:------------------|--------------------------------------------------|:----------:|-------------:|
+| User Authentication | Implement secure login and registration | High | In Progress |
+| Dashboard | Create a user dashboard with key metrics | Medium | Planned |
+| Reporting | Generate monthly performance reports | Low | Not Started |
+| Notifications | Add email and push notifications for updates | Medium | In Progress |
+| API Integration | Integrate third-party APIs for data enrichment | High | Completed |
+| User Feedback | Collect and analyze user feedback | Low | Not Started |
diff --git a/mynah-ui/example/src/styles/styles.scss b/mynah-ui/example/src/styles/styles.scss
new file mode 100644
index 0000000000..7fba707f01
--- /dev/null
+++ b/mynah-ui/example/src/styles/styles.scss
@@ -0,0 +1,581 @@
+@import 'variables';
+
+// Since mynah-ui css custom properties are mapped to VSCode theme ones by default
+// here are some sample VSCode themes applied.
+@import 'themes/light+.scss';
+@import 'themes/light+tweaked.scss';
+@import 'themes/light-orange.scss';
+@import 'themes/light-quiet.scss';
+@import 'themes/light-solarized.scss';
+@import 'themes/dark-plus.scss';
+@import 'themes/dark+tweaked.scss';
+@import 'themes/dark-abyss.scss';
+@import 'themes/dark-ayu-mirage.scss';
+@import 'themes/dark-dracula.scss';
+@import 'themes/dark-solarized.scss';
+
+html,
+body {
+ width: 100vw;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ display: block;
+ overflow: hidden;
+ background-color: var(--mynah-color-bg);
+ color: var(--mynah-color-text-default);
+}
+.mynah-extension-showcase-grid {
+ &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--mynah-color-syntax-bg);
+ z-index: var(--mynah-z-0);
+ opacity: 0.25;
+ pointer-events: none;
+ }
+ transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
+ display: grid;
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 2fr 3fr 2fr;
+ height: 100%;
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
+ overflow: hidden;
+ gap: var(--mynah-sizing-5);
+ padding: var(--mynah-sizing-5);
+ position: relative;
+
+ > * {
+ overflow: hidden;
+ padding: var(--mynah-sizing-5);
+ box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.15);
+ border-radius: var(--mynah-card-radius);
+ background-color: var(--mynah-card-bg) !important;
+ border: var(--mynah-border-width) solid var(--mynah-color-border-default);
+ z-index: var(--mynah-z-1);
+ &:not(#header-var):before {
+ padding-bottom: var(--mynah-sizing-5);
+ font-size: 130%;
+ font-weight: 800;
+ opacity: 0.75;
+ }
+ }
+
+ #header-bar {
+ grid-row-start: 1;
+ grid-column-start: 1;
+
+ grid-row-end: 1;
+ grid-column-end: -1;
+
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: flex-start;
+ gap: var(--mynah-sizing-2);
+ padding: var(--mynah-sizing-2);
+
+ label {
+ cursor: pointer;
+ padding: var(--mynah-sizing-3) var(--mynah-sizing-2);
+ border-radius: var(--mynah-input-radius);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--mynah-sizing-2);
+ &:before {
+ transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
+ color: var(--mynah-color-button-reverse);
+ content: '';
+ display: block;
+ position: absolute;
+ right: var(--mynah-sizing-1);
+ width: var(--mynah-sizing-6);
+ height: var(--mynah-sizing-6);
+ border-radius: var(--mynah-sizing-3);
+ background-color: var(--mynah-color-status-success);
+ }
+ &:after {
+ transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
+ background-color: var(--mynah-color-button-reverse);
+ content: '';
+ display: block;
+ -webkit-mask-image: var(--mynah-ui-icon-ok);
+ mask-image: var(--mynah-ui-icon-ok);
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-position: center center;
+ mask-position: center center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ width: var(--mynah-sizing-4);
+ height: var(--mynah-sizing-4);
+ }
+ }
+ }
+
+ #theme-editor {
+ &:before {
+ content: 'Theme Builder';
+ }
+ grid-row-start: 2;
+ grid-column-start: 1;
+
+ grid-row-end: 2;
+ grid-column-end: 1;
+ overflow: hidden;
+
+ display: flex;
+ flex-flow: column nowrap;
+ }
+
+ #mynah-ui-panel {
+ &:before {
+ content: 'Mynah UI (Example)';
+ }
+ grid-row-start: 2;
+ grid-column-start: 2;
+ grid-row-end: 2;
+ grid-column-end: 3;
+ position: relative;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
+ align-items: stretch;
+
+ > #amzn-mynah-website-wrapper {
+ max-width: var(--mynah-max-width);
+ box-shadow: 0 5px 20px -15px rgba(0, 0, 0, 0.5);
+ border-radius: var(--mynah-input-radius);
+ background-color: var(--mynah-color-bg);
+ border: var(--mynah-border-width) solid var(--mynah-color-border-default);
+ position: relative;
+ display: flex;
+ flex-flow: row nowrap;
+ flex: 1;
+ height: 100%;
+ box-sizing: border-box;
+ overflow: hidden;
+ margin: 0 auto;
+ width: 100%;
+ }
+ }
+
+ #console {
+ &:before {
+ content: 'Console';
+ }
+ border: var(--mynah-border-width) solid var(--mynah-color-border-default);
+ display: flex;
+ flex-flow: column nowrap;
+ box-sizing: border-box;
+ min-height: 100%;
+ max-height: 100%;
+ max-height: 80px;
+ overflow: hidden;
+ grid-row-start: 2;
+ grid-column-start: 3;
+ grid-row-end: 2;
+ grid-column-end: 3;
+ z-index: 9;
+
+ #console-content {
+ flex: 1;
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: relative;
+ font-family: monospace;
+ display: flex;
+ font-size: 80%;
+ flex-flow: column-reverse nowrap;
+ gap: var(--mynah-sizing-3);
+ color: var(--mynah-color-syntax-code);
+ background-color: var(--mynah-card-bg);
+ padding: var(--mynah-sizing-4);
+
+ > p {
+ margin-block-start: 0;
+ margin-block-end: 0;
+ position: relative;
+ padding-left: var(--mynah-sizing-6);
+
+ &::first-letter {
+ text-transform: capitalize;
+ }
+
+ &:before {
+ content: '>>';
+ color: var(--mynah-color-syntax-attr);
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+
+ b {
+ color: var(--mynah-color-syntax-property);
+ font-weight: 500;
+ }
+ }
+ }
+ }
+}
+
+.mynah-ui-example-input-main-wrapper {
+ display: flex;
+ flex-flow: column nowrap;
+ gap: var(--mynah-sizing-5);
+ overflow: hidden;
+ flex: 1;
+ overflow-x: hidden;
+ overflow-y: auto;
+ color: var(--mynah-color-text-default);
+ > .mynah-ui-example-input-items-wrapper {
+ order: 100;
+ display: flex;
+ flex-flow: column nowrap;
+ gap: var(--mynah-sizing-5);
+ overflow: hidden;
+ flex-shrink: 0;
+ }
+ > h1 {
+ margin: 0;
+ }
+ > p {
+ order: 10;
+ }
+}
+
+.mynah-ui-example-input-buttons-wrapper {
+ display: flex;
+ flex-flow: row wrap;
+ gap: var(--mynah-sizing-2);
+ overflow: hidden;
+ padding-bottom: var(--mynah-sizing-5);
+ flex-shrink: 0;
+ > button > span {
+ white-space: nowrap;
+ }
+ > .config-operation {
+ &.hidden {
+ opacity: 0;
+ visibility: hidden;
+ display: none;
+ }
+ }
+}
+
+.mynah-ui-example-input {
+ display: flex;
+ flex-flow: column nowrap;
+ gap: var(--mynah-sizing-3);
+ &-category {
+ &-sizing {
+ order: 10;
+ }
+ &-border-style {
+ order: 20;
+ }
+ &-font-size {
+ order: 30;
+ }
+ &-font-family {
+ order: 40;
+ }
+ &-text-color {
+ order: 50;
+ }
+ &-syntax-color {
+ order: 60;
+ }
+ &-status-color {
+ order: 70;
+ }
+ &-background-color {
+ order: 80;
+ }
+ &-shadow {
+ order: 90;
+ }
+ &-radius {
+ order: 100;
+ }
+ &-transition {
+ order: 110;
+ }
+ &-other {
+ order: 1000;
+ }
+ }
+ > h1 {
+ padding-top: var(--mynah-sizing-6);
+ margin: 0;
+ text-transform: capitalize;
+ }
+ & > &-title-wrapper {
+ display: flex;
+ flex-flow: column nowrap;
+ gap: var(--mynah-sizing-1);
+ h4 {
+ margin: 0;
+ text-transform: capitalize;
+ }
+ span {
+ font-style: italic;
+ font-size: 90%;
+ color: var(--mynah-color-text-weak);
+ }
+ }
+ & > &-wrapper {
+ display: flex;
+ flex-flow: row nowrap;
+ gap: var(--mynah-sizing-2);
+ position: relative;
+ &:has(select) {
+ > select {
+ padding-right: var(--mynah-sizing-5);
+ }
+ &:after {
+ content: '';
+ -webkit-mask-image: var(--mynah-ui-icon-down-open);
+ mask-image: var(--mynah-ui-icon-down-open);
+ background-color: currentColor;
+ opacity: 0.5;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-position: center center;
+ mask-position: center center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ position: absolute;
+ right: var(--mynah-sizing-3);
+ top: 50%;
+ margin-top: calc(-1 * var(--mynah-sizing-2));
+ width: var(--mynah-sizing-4);
+ height: var(--mynah-sizing-4);
+ }
+ }
+ > input[type='text'],
+ > input[type='number'] {
+ flex: 1;
+ }
+ > select {
+ appearance: none;
+ min-width: 70px;
+ cursor: pointer;
+ &#theme-selector {
+ max-width: 140px;
+ }
+ }
+
+ > small,
+ > input,
+ > select {
+ &[type='color'],
+ &[type='range'] {
+ padding: var(--mynah-sizing-1);
+ width: 100px;
+ min-width: 100px;
+ max-width: 100px;
+ outline: none;
+ }
+
+ background-color: var(--mynah-card-bg);
+ color: var(--mynah-color-text-input);
+ border-radius: var(--mynah-input-radius);
+ padding: var(--mynah-sizing-3);
+ border: var(--mynah-border-width) solid var(--mynah-color-border-default);
+ }
+
+ > small {
+ border: none;
+ padding: 0 !important;
+ }
+
+ > input[type='range'] {
+ border: none;
+ -webkit-appearance: none;
+ appearance: none;
+ background: transparent;
+ cursor: pointer;
+
+ &:focus {
+ outline: none;
+ }
+
+ &::-webkit-slider-runnable-track {
+ background-color: var(--mynah-color-border-default);
+ border-radius: 0.5rem;
+ height: var(--mynah-sizing-2);
+ }
+
+ &::-webkit-slider-thumb {
+ outline: none;
+ -webkit-appearance: none;
+ appearance: none;
+ margin-top: calc(-1 * var(--mynah-sizing-2));
+ background-color: var(--mynah-color-button);
+ height: var(--mynah-sizing-6);
+ width: var(--mynah-sizing-6);
+ border-radius: var(--mynah-sizing-3);
+ }
+ }
+ }
+}
+
+.ver-div {
+ height: 30px;
+ border: var(--mynah-border-width) solid var(--mynah-color-border-default);
+}
+
+input.hidden {
+ // visibility: hidden;
+ display: none;
+ opacity: 0;
+}
+
+@media only screen and (max-width: 1280px) {
+ #theme-editor-enabled,
+ label[for='theme-editor-enabled'] {
+ display: none !important;
+ }
+ .mynah-extension-showcase-grid {
+ grid-template-columns: 4fr 3fr !important;
+
+ #theme-editor {
+ display: none;
+ visibility: hidden;
+ }
+
+ #mynah-ui-panel {
+ grid-column-start: 1;
+ grid-column-end: 2;
+ }
+
+ #console {
+ grid-column-start: 2;
+ grid-column-end: 2;
+ }
+ }
+}
+
+@media only screen and (max-width: 860px) {
+ #console-enabled,
+ label[for='console-enabled'] {
+ display: none !important;
+ }
+ .mynah-extension-showcase-grid {
+ grid-template-columns: 100% !important;
+ padding: 0;
+ gap: 0;
+
+ #header-bar {
+ padding: var(--mynah-sizing-2);
+ box-shadow: none;
+ border-radius: 0;
+ border: none;
+ }
+
+ #theme-editor {
+ display: none;
+ }
+
+ #mynah-ui-panel {
+ #amzn-mynah-website-wrapper {
+ border-radius: 0;
+ border: none;
+ .mynah-nav-tabs-wrapper {
+ > .mynah-tabs-container > span:first-child > label {
+ border-top-left-radius: initial;
+ }
+ }
+ }
+ grid-column-start: 1;
+ grid-column-end: 1;
+ border-radius: 0;
+ padding: 0;
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ &:before {
+ display: none;
+ }
+ }
+
+ #console {
+ display: none;
+ }
+ }
+}
+
+html:not([theme^='base']) {
+ label[for='theme-editor-enabled'] {
+ display: none !important;
+ }
+}
+html:not([theme^='base']) .mynah-extension-showcase-grid,
+#theme-editor-enabled:not(:checked) ~ .mynah-extension-showcase-grid {
+ grid-template-columns: 1fr 2fr 2fr;
+ #theme-editor {
+ display: none;
+ visibility: hidden;
+ }
+
+ #mynah-ui-panel {
+ grid-column-start: 1;
+ }
+
+ #header-bar {
+ label[for='theme-editor-enabled'] {
+ &:before {
+ background-color: var(--mynah-color-text-weak);
+ }
+ &:after {
+ -webkit-mask-image: var(--mynah-ui-icon-minus);
+ mask-image: var(--mynah-ui-icon-minus);
+ }
+ }
+ }
+}
+#console-enabled:not(:checked) {
+ & ~ .mynah-extension-showcase-grid {
+ grid-template-columns: 2fr 2fr 1fr;
+ #console {
+ display: none;
+ visibility: hidden;
+ }
+
+ #mynah-ui-panel {
+ grid-column-end: -1;
+ }
+
+ #header-bar {
+ label[for='console-enabled'] {
+ &:before {
+ background-color: var(--mynah-color-text-weak);
+ }
+ &:after {
+ -webkit-mask-image: var(--mynah-ui-icon-minus);
+ mask-image: var(--mynah-ui-icon-minus);
+ }
+ }
+ }
+ }
+}
+
+html:not([theme^='base']) #console-enabled:not(:checked) ~ .mynah-extension-showcase-grid,
+#theme-editor-enabled:not(:checked) + #console-enabled:not(:checked) ~ .mynah-extension-showcase-grid {
+ #console {
+ display: none;
+ visibility: hidden;
+ }
+
+ #mynah-ui-panel {
+ grid-column-end: -1;
+ }
+}
diff --git a/mynah-ui/example/src/styles/themes/dark+tweaked.scss b/mynah-ui/example/src/styles/themes/dark+tweaked.scss
new file mode 100644
index 0000000000..abb20071d0
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/dark+tweaked.scss
@@ -0,0 +1,825 @@
+html[theme='dark+tweaked']:root {
+ font-size: 13px !important;
+ --text-link-decoration: none;
+ --vscode-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+ --vscode-font-weight: normal;
+ --vscode-font-size: 13px;
+ --vscode-editor-font-family: Menlo, Monaco, 'Courier New', monospace;
+ --vscode-editor-font-weight: normal;
+ --vscode-editor-font-size: 12px;
+ --vscode-foreground: #cccccc;
+ --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
+ --vscode-errorForeground: #f48771;
+ --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
+ --vscode-icon-foreground: rgba(255, 255, 255, 0.27);
+ --vscode-focusBorder: #007fd4;
+ --vscode-textLink-foreground: #3794ff;
+ --vscode-textLink-activeForeground: #3794ff;
+ --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+ --vscode-textPreformat-foreground: #d7ba7d;
+ --vscode-textPreformat-background: rgba(255, 255, 255, 0.1);
+ --vscode-textBlockQuote-background: #222222;
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+ --vscode-sash-hoverBorder: #007fd4;
+ --vscode-badge-background: #4d4d4d;
+ --vscode-badge-foreground: #ffffff;
+ --vscode-activityWarningBadge-foreground: #000000;
+ --vscode-activityWarningBadge-background: #cca700;
+ --vscode-activityErrorBadge-foreground: #000000;
+ --vscode-activityErrorBadge-background: #f14c4c;
+ --vscode-scrollbar-shadow: rgba(0, 0, 0, 0.13);
+ --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-progressBar-background: #0e70c0;
+ --vscode-chart-line: #236b8e;
+ --vscode-chart-axis: rgba(191, 191, 191, 0.4);
+ --vscode-chart-guide: rgba(191, 191, 191, 0.2);
+ --vscode-editor-background: #1e1e1e;
+ --vscode-editor-foreground: #d4d4d4;
+ --vscode-editorStickyScroll-background: #1e1e1e;
+ --vscode-editorStickyScrollHover-background: #2a2d2e;
+ --vscode-editorStickyScroll-shadow: rgba(0, 0, 0, 0.13);
+ --vscode-editorWidget-background: #252526;
+ --vscode-editorWidget-foreground: #cccccc;
+ --vscode-editorWidget-border: #454545;
+ --vscode-editorError-foreground: #f14c4c;
+ --vscode-editorWarning-foreground: #cca700;
+ --vscode-editorInfo-foreground: #3794ff;
+ --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+ --vscode-editorLink-activeForeground: #4e94ce;
+ --vscode-editor-selectionBackground: #264f78;
+ --vscode-editor-inactiveSelectionBackground: #3a3d41;
+ --vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);
+ --vscode-editor-compositionBorder: #ffffff;
+ --vscode-editor-findMatchBackground: #515c6a;
+ --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+ --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+ --vscode-editorHoverWidget-background: #252526;
+ --vscode-editorHoverWidget-foreground: #cccccc;
+ --vscode-editorHoverWidget-border: #454545;
+ --vscode-editorHoverWidget-statusBarBackground: #2c2c2d;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(77, 77, 77, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.1);
+ --vscode-editorLightBulb-foreground: #ffcc00;
+ --vscode-editorLightBulbAutoFix-foreground: #75beff;
+ --vscode-editorLightBulbAi-foreground: #ffcc00;
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.2);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #1b1b1b;
+ --vscode-diffEditor-unchangedRegionForeground: #cccccc;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.13);
+ --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+ --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+ --vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
+ --vscode-breadcrumb-background: #20252b;
+ --vscode-breadcrumb-focusForeground: #e0e0e0;
+ --vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
+ --vscode-breadcrumbPicker-background: #252526;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-problemsErrorIcon-foreground: #f14c4c;
+ --vscode-problemsWarningIcon-foreground: #cca700;
+ --vscode-problemsInfoIcon-foreground: #3794ff;
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #676767;
+ --vscode-minimap-selectionHighlight: #264f78;
+ --vscode-minimap-infoHighlight: #3794ff;
+ --vscode-minimap-warningHighlight: #cca700;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);
+ --vscode-charts-foreground: #cccccc;
+ --vscode-charts-lines: rgba(204, 204, 204, 0.5);
+ --vscode-charts-red: #f14c4c;
+ --vscode-charts-blue: #3794ff;
+ --vscode-charts-yellow: #cca700;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #89d185;
+ --vscode-charts-purple: #b180d7;
+ --vscode-input-background: #3c3c3c;
+ --vscode-input-foreground: #cccccc;
+ --vscode-inputOption-activeBorder: #007acc;
+ --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+ --vscode-inputOption-activeBackground: rgba(0, 127, 212, 0.4);
+ --vscode-inputOption-activeForeground: #ffffff;
+ --vscode-input-placeholderForeground: rgba(204, 204, 204, 0.5);
+ --vscode-inputValidation-infoBackground: #063b49;
+ --vscode-inputValidation-infoBorder: #007acc;
+ --vscode-inputValidation-warningBackground: #352a05;
+ --vscode-inputValidation-warningBorder: #b89500;
+ --vscode-inputValidation-errorBackground: #5a1d1d;
+ --vscode-inputValidation-errorBorder: #be1100;
+ --vscode-dropdown-background: #3c3c3c;
+ --vscode-dropdown-foreground: #f0f0f0;
+ --vscode-dropdown-border: #3c3c3c;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #0e639c;
+ --vscode-button-hoverBackground: #1177bb;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #3a3d41;
+ --vscode-button-secondaryHoverBackground: #45494e;
+ --vscode-radio-activeForeground: #ffffff;
+ --vscode-radio-activeBackground: rgba(0, 127, 212, 0.4);
+ --vscode-radio-activeBorder: #007acc;
+ --vscode-radio-inactiveBorder: rgba(255, 255, 255, 0.2);
+ --vscode-radio-inactiveHoverBackground: rgba(90, 93, 94, 0.5);
+ --vscode-checkbox-background: #3c3c3c;
+ --vscode-checkbox-selectBackground: #252526;
+ --vscode-checkbox-foreground: #f0f0f0;
+ --vscode-checkbox-border: #3c3c3c;
+ --vscode-checkbox-selectBorder: rgba(255, 255, 255, 0.27);
+ --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
+ --vscode-keybindingLabel-foreground: #cccccc;
+ --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
+ --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+ --vscode-list-focusOutline: #007fd4;
+ --vscode-list-activeSelectionBackground: #04395e;
+ --vscode-list-activeSelectionForeground: #ffffff;
+ --vscode-list-inactiveSelectionBackground: #37373d;
+ --vscode-list-hoverBackground: #2a2d2e;
+ --vscode-list-dropBackground: #383b3d;
+ --vscode-list-dropBetweenBackground: rgba(255, 255, 255, 0.27);
+ --vscode-list-highlightForeground: #2aaaff;
+ --vscode-list-focusHighlightForeground: #2aaaff;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #f88070;
+ --vscode-list-warningForeground: #cca700;
+ --vscode-listFilterWidget-background: #252526;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.13);
+ --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
+ --vscode-list-deemphasizedForeground: #8c8c8c;
+ --vscode-tree-indentGuidesStroke: rgba(255, 255, 255, 0.07);
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(255, 255, 255, 0.03);
+ --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-editorActionList-background: #252526;
+ --vscode-editorActionList-foreground: #cccccc;
+ --vscode-editorActionList-focusForeground: #ffffff;
+ --vscode-editorActionList-focusBackground: #04395e;
+ --vscode-menu-foreground: #f0f0f0;
+ --vscode-menu-background: #3c3c3c;
+ --vscode-menu-selectionForeground: #ffffff;
+ --vscode-menu-selectionBackground: #04395e;
+ --vscode-menu-separatorBackground: #606060;
+ --vscode-quickInput-background: #252526;
+ --vscode-quickInput-foreground: #cccccc;
+ --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
+ --vscode-pickerGroup-foreground: #3794ff;
+ --vscode-pickerGroup-border: #3f3f46;
+ --vscode-quickInputList-focusForeground: #ffffff;
+ --vscode-quickInputList-focusBackground: #04395e;
+ --vscode-search-resultsInfoForeground: rgba(204, 204, 204, 0.65);
+ --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
+ --vscode-editor-lineHighlightBackground: rgba(28, 46, 62, 0.4);
+ --vscode-editor-lineHighlightBorder: rgba(0, 0, 0, 0);
+ --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editorCursor-foreground: #cfa738;
+ --vscode-editorCursor-background: #57430e;
+ --vscode-editorMultiCursor-primary\.foreground: #cfa738;
+ --vscode-editorMultiCursor-primary\.background: #57430e;
+ --vscode-editorMultiCursor-secondary\.foreground: #cfa738;
+ --vscode-editorMultiCursor-secondary\.background: #57430e;
+ --vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16);
+ --vscode-editorLineNumber-foreground: #3a3a3a;
+ --vscode-editorIndentGuide-background: rgba(255, 255, 255, 0.05);
+ --vscode-editorIndentGuide-activeBackground: rgba(255, 255, 255, 0.2);
+ --vscode-editorIndentGuide-background1: rgba(255, 255, 255, 0.05);
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: rgba(255, 255, 255, 0.2);
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+ --vscode-editorLineNumber-activeForeground: #afafaf;
+ --vscode-editorRuler-foreground: rgba(255, 255, 255, 0.07);
+ --vscode-editorCodeLens-foreground: #999999;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #888888;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #1e1e1e;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+ --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #cca700;
+ --vscode-editorOverviewRuler-infoForeground: #3794ff;
+ --vscode-editorBracketHighlight-foreground1: #ffd700;
+ --vscode-editorBracketHighlight-foreground2: #da70d6;
+ --vscode-editorBracketHighlight-foreground3: #179fff;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #cca700;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-diffEditor-unchangedRegionShadow: #000000;
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-actionBar-toggledBackground: rgba(0, 127, 212, 0.4);
+ --vscode-symbolIcon-arrayForeground: #cccccc;
+ --vscode-symbolIcon-booleanForeground: #cccccc;
+ --vscode-symbolIcon-classForeground: #ee9d28;
+ --vscode-symbolIcon-colorForeground: #cccccc;
+ --vscode-symbolIcon-constantForeground: #cccccc;
+ --vscode-symbolIcon-constructorForeground: #b180d7;
+ --vscode-symbolIcon-enumeratorForeground: #ee9d28;
+ --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
+ --vscode-symbolIcon-eventForeground: #ee9d28;
+ --vscode-symbolIcon-fieldForeground: #75beff;
+ --vscode-symbolIcon-fileForeground: #cccccc;
+ --vscode-symbolIcon-folderForeground: #cccccc;
+ --vscode-symbolIcon-functionForeground: #b180d7;
+ --vscode-symbolIcon-interfaceForeground: #75beff;
+ --vscode-symbolIcon-keyForeground: #cccccc;
+ --vscode-symbolIcon-keywordForeground: #cccccc;
+ --vscode-symbolIcon-methodForeground: #b180d7;
+ --vscode-symbolIcon-moduleForeground: #cccccc;
+ --vscode-symbolIcon-namespaceForeground: #cccccc;
+ --vscode-symbolIcon-nullForeground: #cccccc;
+ --vscode-symbolIcon-numberForeground: #cccccc;
+ --vscode-symbolIcon-objectForeground: #cccccc;
+ --vscode-symbolIcon-operatorForeground: #cccccc;
+ --vscode-symbolIcon-packageForeground: #cccccc;
+ --vscode-symbolIcon-propertyForeground: #cccccc;
+ --vscode-symbolIcon-referenceForeground: #cccccc;
+ --vscode-symbolIcon-snippetForeground: #cccccc;
+ --vscode-symbolIcon-stringForeground: #cccccc;
+ --vscode-symbolIcon-structForeground: #cccccc;
+ --vscode-symbolIcon-textForeground: #cccccc;
+ --vscode-symbolIcon-typeParameterForeground: #cccccc;
+ --vscode-symbolIcon-unitForeground: #cccccc;
+ --vscode-symbolIcon-variableForeground: #75beff;
+ --vscode-peekViewTitle-background: #007acc;
+ --vscode-peekViewTitleLabel-foreground: #ffffff;
+ --vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
+ --vscode-peekView-border: rgba(0, 122, 204, 0);
+ --vscode-peekViewResult-background: #1b1b1b;
+ --vscode-peekViewResult-lineForeground: #bbbbbb;
+ --vscode-peekViewResult-fileForeground: #ffffff;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #ffffff;
+ --vscode-peekViewEditor-background: #181818;
+ --vscode-peekViewEditorGutter-background: #1b1b1b;
+ --vscode-peekViewEditorStickyScroll-background: #181818;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);
+ --vscode-editor-foldBackground: rgba(38, 79, 120, 0.3);
+ --vscode-editor-foldPlaceholderForeground: #808080;
+ --vscode-editorGutter-foldingControlForeground: rgba(255, 255, 255, 0.27);
+ --vscode-editorSuggestWidget-background: #252526;
+ --vscode-editorSuggestWidget-border: #454545;
+ --vscode-editorSuggestWidget-foreground: #d4d4d4;
+ --vscode-editorSuggestWidget-selectedForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedBackground: #04395e;
+ --vscode-editorSuggestWidget-highlightForeground: #2aaaff;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #2aaaff;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(212, 212, 212, 0.5);
+ --vscode-inlineEdit-originalBackground: rgba(255, 0, 0, 0.04);
+ --vscode-inlineEdit-modifiedBackground: rgba(156, 204, 44, 0.06);
+ --vscode-inlineEdit-originalChangedLineBackground: rgba(255, 0, 0, 0.16);
+ --vscode-inlineEdit-originalChangedTextBackground: rgba(255, 0, 0, 0.16);
+ --vscode-inlineEdit-modifiedChangedLineBackground: rgba(155, 185, 85, 0.14);
+ --vscode-inlineEdit-modifiedChangedTextBackground: rgba(156, 204, 44, 0.14);
+ --vscode-inlineEdit-gutterIndicator\.primaryForeground: #ffffff;
+ --vscode-inlineEdit-gutterIndicator\.primaryBorder: #0e639c;
+ --vscode-inlineEdit-gutterIndicator\.primaryBackground: rgba(14, 99, 156, 0.4);
+ --vscode-inlineEdit-gutterIndicator\.secondaryForeground: #ffffff;
+ --vscode-inlineEdit-gutterIndicator\.secondaryBorder: #3a3d41;
+ --vscode-inlineEdit-gutterIndicator\.secondaryBackground: #3a3d41;
+ --vscode-inlineEdit-gutterIndicator\.successfulForeground: #ffffff;
+ --vscode-inlineEdit-gutterIndicator\.successfulBorder: #0e639c;
+ --vscode-inlineEdit-gutterIndicator\.successfulBackground: #0e639c;
+ --vscode-inlineEdit-gutterIndicator\.background: rgba(30, 30, 30, 0.5);
+ --vscode-inlineEdit-originalBorder: rgba(255, 0, 0, 0.2);
+ --vscode-inlineEdit-modifiedBorder: rgba(156, 204, 44, 0.2);
+ --vscode-inlineEdit-tabWillAcceptModifiedBorder: rgba(156, 204, 44, 0.2);
+ --vscode-inlineEdit-tabWillAcceptOriginalBorder: rgba(255, 0, 0, 0.2);
+ --vscode-editorMarkerNavigationError-background: #f14c4c;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #cca700;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #3794ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #1e1e1e;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
+ --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.72);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorHoverWidget-highlightForeground: #2aaaff;
+ --vscode-editor-placeholder\.foreground: rgba(255, 255, 255, 0.34);
+ --vscode-tab-activeBackground: #20252b;
+ --vscode-tab-unfocusedActiveBackground: #20252b;
+ --vscode-tab-inactiveBackground: #1e1e1e;
+ --vscode-tab-unfocusedInactiveBackground: #1e1e1e;
+ --vscode-tab-activeForeground: #ffffff;
+ --vscode-tab-inactiveForeground: #949494;
+ --vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, 0.5);
+ --vscode-tab-unfocusedInactiveForeground: rgba(148, 148, 148, 0.5);
+ --vscode-tab-hoverBackground: #20252b;
+ --vscode-tab-unfocusedHoverBackground: #1e1e1e;
+ --vscode-tab-border: #181818;
+ --vscode-tab-lastPinnedBorder: rgba(255, 255, 255, 0.07);
+ --vscode-tab-activeBorderTop: #3a83d0;
+ --vscode-tab-unfocusedActiveBorderTop: rgba(58, 131, 208, 0.5);
+ --vscode-tab-selectedBorderTop: #3a83d0;
+ --vscode-tab-selectedBackground: #20252b;
+ --vscode-tab-selectedForeground: #ffffff;
+ --vscode-tab-dragAndDropBorder: #ffffff;
+ --vscode-tab-activeModifiedBorder: rgba(255, 60, 0, 0.53);
+ --vscode-tab-inactiveModifiedBorder: rgba(255, 60, 0, 0.27);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(255, 60, 0, 0.27);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(255, 60, 0, 0.13);
+ --vscode-editorPane-background: rgba(0, 0, 0, 0.27);
+ --vscode-editorGroupHeader-tabsBackground: #1e1e1e;
+ --vscode-editorGroupHeader-noTabsBackground: #1e1e1e;
+ --vscode-editorGroup-border: #181818;
+ --vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-editorGroup-dropIntoPromptForeground: #cccccc;
+ --vscode-editorGroup-dropIntoPromptBackground: #252526;
+ --vscode-sideBySideEditor-horizontalBorder: #181818;
+ --vscode-sideBySideEditor-verticalBorder: #181818;
+ --vscode-banner-background: #04395e;
+ --vscode-banner-foreground: #ffffff;
+ --vscode-banner-iconForeground: #3794ff;
+ --vscode-statusBar-foreground: #646464;
+ --vscode-statusBar-noFolderForeground: #646464;
+ --vscode-statusBar-background: #181818;
+ --vscode-statusBar-noFolderBackground: #252526;
+ --vscode-statusBar-border: #181818;
+ --vscode-statusBar-focusBorder: #646464;
+ --vscode-statusBar-noFolderBorder: #181818;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #646464;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #646464;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #646464;
+ --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);
+ --vscode-statusBarItem-prominentHoverForeground: #646464;
+ --vscode-statusBarItem-prominentHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-errorBackground: #c72e0f;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #646464;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #7a6400;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #646464;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #181818;
+ --vscode-activityBar-foreground: #949494;
+ --vscode-activityBar-inactiveForeground: rgba(148, 148, 148, 0.4);
+ --vscode-activityBar-border: #181818;
+ --vscode-activityBar-activeBorder: #3a83d0;
+ --vscode-activityBar-activeBackground: rgba(58, 131, 208, 0.07);
+ --vscode-activityBar-dropBorder: #949494;
+ --vscode-activityBarBadge-background: #007acc;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-activityBarTop-foreground: #e7e7e7;
+ --vscode-activityBarTop-activeBorder: #e7e7e7;
+ --vscode-activityBarTop-inactiveForeground: rgba(231, 231, 231, 0.6);
+ --vscode-activityBarTop-dropBorder: #e7e7e7;
+ --vscode-panel-background: #1b1b1b;
+ --vscode-panel-border: #181818;
+ --vscode-panelTitle-activeForeground: #e7e7e7;
+ --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
+ --vscode-panelTitle-activeBorder: #e7e7e7;
+ --vscode-panelTitleBadge-background: #007acc;
+ --vscode-panelTitleBadge-foreground: #ffffff;
+ --vscode-panel-dropBorder: #e7e7e7;
+ --vscode-panelSection-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: #181818;
+ --vscode-panelStickyScroll-background: #1b1b1b;
+ --vscode-panelStickyScroll-shadow: rgba(0, 0, 0, 0.13);
+ --vscode-profileBadge-background: #4d4d4d;
+ --vscode-profileBadge-foreground: #ffffff;
+ --vscode-statusBarItem-remoteBackground: #181818;
+ --vscode-statusBarItem-remoteForeground: #646464;
+ --vscode-statusBarItem-remoteHoverForeground: #646464;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #646464;
+ --vscode-statusBarItem-offlineHoverForeground: #646464;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #007acc;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #1b1b1b;
+ --vscode-sideBar-foreground: rgba(255, 255, 255, 0.53);
+ --vscode-sideBar-border: #181818;
+ --vscode-sideBarTitle-background: #1b1b1b;
+ --vscode-sideBarTitle-foreground: #bbbbbb;
+ --vscode-sideBar-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-sideBarSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-sideBarSectionHeader-foreground: rgba(255, 255, 255, 0.53);
+ --vscode-sideBarStickyScroll-background: #1b1b1b;
+ --vscode-sideBarStickyScroll-shadow: rgba(0, 0, 0, 0.13);
+ --vscode-titleBar-activeForeground: #cccccc;
+ --vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-titleBar-activeBackground: #181818;
+ --vscode-titleBar-inactiveBackground: rgba(24, 24, 24, 0.6);
+ --vscode-titleBar-border: #181818;
+ --vscode-menubar-selectionForeground: #cccccc;
+ --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+ --vscode-commandCenter-foreground: #cccccc;
+ --vscode-commandCenter-activeForeground: #cccccc;
+ --vscode-commandCenter-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-commandCenter-background: rgba(255, 255, 255, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+ --vscode-commandCenter-border: rgba(204, 204, 204, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(204, 204, 204, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(204, 204, 204, 0.15);
+ --vscode-notifications-foreground: #cccccc;
+ --vscode-notifications-background: #252526;
+ --vscode-notificationLink-foreground: #3794ff;
+ --vscode-notificationCenterHeader-background: #303031;
+ --vscode-notifications-border: #303031;
+ --vscode-notificationsErrorIcon-foreground: #f14c4c;
+ --vscode-notificationsWarningIcon-foreground: #cca700;
+ --vscode-notificationsInfoIcon-foreground: #3794ff;
+ --vscode-debugToolBar-background: #333333;
+ --vscode-debugIcon-startForeground: #89d185;
+ --vscode-inlineChat-foreground: #cccccc;
+ --vscode-inlineChat-background: #252526;
+ --vscode-inlineChat-border: #454545;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.13);
+ --vscode-inlineChatInput-border: #454545;
+ --vscode-inlineChatInput-focusBorder: #007fd4;
+ --vscode-inlineChatInput-placeholderForeground: rgba(204, 204, 204, 0.5);
+ --vscode-inlineChatInput-background: #3c3c3c;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.1);
+ --vscode-editorOverviewRuler-inlineChatInserted: rgba(156, 204, 44, 0.12);
+ --vscode-editorMinimap-inlineChatInserted: rgba(156, 204, 44, 0.12);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-editorOverviewRuler-inlineChatRemoved: rgba(255, 0, 0, 0.12);
+ --vscode-editorWatermark-foreground: rgba(212, 212, 212, 0.6);
+ --vscode-extensionButton-background: #0e639c;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #1177bb;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #0e639c;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: #1177bb;
+ --vscode-extensionIcon-verifiedForeground: #3794ff;
+ --vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);
+ --vscode-chat-requestBackground: rgba(30, 30, 30, 0.62);
+ --vscode-chat-slashCommandBackground: rgba(52, 65, 75, 0.56);
+ --vscode-chat-slashCommandForeground: #40a6ff;
+ --vscode-chat-avatarBackground: #1f1f1f;
+ --vscode-chat-avatarForeground: #cccccc;
+ --vscode-chat-editedFileForeground: #e2c08d;
+ --vscode-commentsView-resolvedIcon: rgba(204, 204, 204, 0.5);
+ --vscode-commentsView-unresolvedIcon: #007fd4;
+ --vscode-editorCommentsWidget-replyInputBackground: #007acc;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #007fd4;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(0, 127, 212, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(0, 127, 212, 0.1);
+ --vscode-notebook-cellBorderColor: #37373d;
+ --vscode-notebook-focusedEditorBorder: #007fd4;
+ --vscode-notebookStatusSuccessIcon-foreground: #89d185;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;
+ --vscode-notebookStatusErrorIcon-foreground: #f48771;
+ --vscode-notebookStatusRunningIcon-foreground: #cccccc;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #37373d;
+ --vscode-notebook-selectedCellBorder: #37373d;
+ --vscode-notebook-focusedCellBorder: #007fd4;
+ --vscode-notebook-inactiveFocusedCellBorder: #37373d;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+ --vscode-notebook-cellInsertionIndicator: #007fd4;
+ --vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-notebook-cellEditorBackground: #1b1b1b;
+ --vscode-notebook-editorBackground: rgba(0, 0, 0, 0.27);
+ --vscode-editorGutter-modifiedBackground: #1b81a8;
+ --vscode-editorGutter-addedBackground: #487e02;
+ --vscode-editorGutter-deletedBackground: #f14c4c;
+ --vscode-minimapGutter-modifiedBackground: #1b81a8;
+ --vscode-minimapGutter-addedBackground: #487e02;
+ --vscode-minimapGutter-deletedBackground: #f14c4c;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);
+ --vscode-editorGutter-itemGlyphForeground: #d4d4d4;
+ --vscode-editorGutter-itemBackground: #37373d;
+ --vscode-terminal-foreground: #cccccc;
+ --vscode-terminal-selectionBackground: #264f78;
+ --vscode-terminal-inactiveSelectionBackground: rgba(38, 79, 120, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #1b81a8;
+ --vscode-terminalCommandDecoration-errorBackground: #f14c4c;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: #181818;
+ --vscode-terminalOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-terminal-findMatchBackground: #515c6a;
+ --vscode-terminal-hoverHighlightBackground: rgba(38, 79, 120, 0.13);
+ --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-terminal-initialHintForeground: rgba(255, 255, 255, 0.34);
+ --vscode-scmGraph-historyItemRefColor: #3794ff;
+ --vscode-scmGraph-historyItemRemoteRefColor: #b180d7;
+ --vscode-scmGraph-historyItemBaseRefColor: #ea5c00;
+ --vscode-scmGraph-historyItemHoverDefaultLabelForeground: #cccccc;
+ --vscode-scmGraph-historyItemHoverDefaultLabelBackground: #4d4d4d;
+ --vscode-scmGraph-historyItemHoverLabelForeground: #ffffff;
+ --vscode-scmGraph-historyItemHoverAdditionsForeground: #81b88b;
+ --vscode-scmGraph-historyItemHoverDeletionsForeground: #c74e39;
+ --vscode-scmGraph-foreground1: #ffb000;
+ --vscode-scmGraph-foreground2: #dc267f;
+ --vscode-scmGraph-foreground3: #994f00;
+ --vscode-scmGraph-foreground4: #40b0a6;
+ --vscode-scmGraph-foreground5: #b66dff;
+ --vscode-editorGutter-commentRangeForeground: #37373d;
+ --vscode-editorOverviewRuler-commentForeground: #37373d;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #37373d;
+ --vscode-editorGutter-commentGlyphForeground: #d4d4d4;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #d4d4d4;
+ --vscode-ports-iconRunningProcessForeground: #181818;
+ --vscode-settings-headerForeground: #e7e7e7;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(231, 231, 231, 0.7);
+ --vscode-settings-modifiedItemIndicator: #0c7d9d;
+ --vscode-settings-headerBorder: #181818;
+ --vscode-settings-sashBorder: #181818;
+ --vscode-settings-dropdownBackground: #3c3c3c;
+ --vscode-settings-dropdownForeground: #f0f0f0;
+ --vscode-settings-dropdownBorder: #3c3c3c;
+ --vscode-settings-dropdownListBorder: #454545;
+ --vscode-settings-checkboxBackground: #3c3c3c;
+ --vscode-settings-checkboxForeground: #f0f0f0;
+ --vscode-settings-checkboxBorder: #3c3c3c;
+ --vscode-settings-textInputBackground: #3c3c3c;
+ --vscode-settings-textInputForeground: #cccccc;
+ --vscode-settings-numberInputBackground: #3c3c3c;
+ --vscode-settings-numberInputForeground: #cccccc;
+ --vscode-settings-focusedRowBackground: rgba(42, 45, 46, 0.6);
+ --vscode-settings-rowHoverBackground: rgba(42, 45, 46, 0.3);
+ --vscode-settings-focusedRowBorder: #007fd4;
+ --vscode-keybindingTable-headerBackground: rgba(204, 204, 204, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-debugExceptionWidget-border: #a31515;
+ --vscode-debugExceptionWidget-background: #420b0d;
+ --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+ --vscode-multiDiffEditor-headerBackground: #262626;
+ --vscode-multiDiffEditor-background: #1e1e1e;
+ --vscode-minimap-chatEditHighlight: rgba(30, 30, 30, 0.6);
+ --vscode-gauge-background: #007acc;
+ --vscode-gauge-foreground: rgba(0, 122, 204, 0.3);
+ --vscode-gauge-warningBackground: #b89500;
+ --vscode-gauge-warningForeground: rgba(184, 149, 0, 0.3);
+ --vscode-gauge-errorBackground: #be1100;
+ --vscode-gauge-errorForeground: rgba(190, 17, 0, 0.3);
+ --vscode-interactive-activeCodeBorder: rgba(0, 122, 204, 0);
+ --vscode-interactive-inactiveCodeBorder: #37373d;
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #f14c4c;
+ --vscode-testing-messagePeekBorder: #3794ff;
+ --vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);
+ --vscode-testing-messagePeekHeaderBackground: rgba(55, 148, 255, 0.1);
+ --vscode-testing-coveredBackground: rgba(156, 204, 44, 0.2);
+ --vscode-testing-coveredBorder: rgba(156, 204, 44, 0.15);
+ --vscode-testing-coveredGutterBackground: rgba(156, 204, 44, 0.12);
+ --vscode-testing-uncoveredBranchBackground: #781212;
+ --vscode-testing-uncoveredBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-uncoveredBorder: rgba(255, 0, 0, 0.15);
+ --vscode-testing-uncoveredGutterBackground: rgba(255, 0, 0, 0.3);
+ --vscode-testing-coverCountBadgeBackground: #4d4d4d;
+ --vscode-testing-coverCountBadgeForeground: #ffffff;
+ --vscode-testing-message\.error\.badgeBackground: #f14c4c;
+ --vscode-testing-message\.error\.badgeBorder: #f14c4c;
+ --vscode-testing-message\.error\.badgeForeground: #000000;
+ --vscode-testing-message\.info\.decorationForeground: rgba(212, 212, 212, 0.5);
+ --vscode-testing-iconErrored\.retired: rgba(241, 76, 76, 0.7);
+ --vscode-testing-iconFailed\.retired: rgba(241, 76, 76, 0.7);
+ --vscode-testing-iconPassed\.retired: rgba(115, 201, 145, 0.7);
+ --vscode-testing-iconQueued\.retired: rgba(204, 167, 0, 0.7);
+ --vscode-testing-iconUnset\.retired: rgba(132, 132, 132, 0.7);
+ --vscode-testing-iconSkipped\.retired: rgba(132, 132, 132, 0.7);
+ --vscode-statusBar-debuggingBackground: #cc6633;
+ --vscode-statusBar-debuggingForeground: #646464;
+ --vscode-statusBar-debuggingBorder: #181818;
+ --vscode-commandCenter-debuggingBackground: rgba(204, 102, 51, 0.26);
+ --vscode-debugTokenExpression-name: #c586c0;
+ --vscode-debugTokenExpression-type: #4a90e2;
+ --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+ --vscode-debugTokenExpression-string: #ce9178;
+ --vscode-debugTokenExpression-boolean: #4e94ce;
+ --vscode-debugTokenExpression-number: #b5cea8;
+ --vscode-debugTokenExpression-error: #f48771;
+ --vscode-debugView-exceptionLabelForeground: #cccccc;
+ --vscode-debugView-exceptionLabelBackground: #6c2022;
+ --vscode-debugView-stateLabelForeground: #cccccc;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #3794ff;
+ --vscode-debugConsole-warningForeground: #cca700;
+ --vscode-debugConsole-errorForeground: #f48771;
+ --vscode-debugConsole-sourceForeground: #cccccc;
+ --vscode-debugConsoleInputIcon-foreground: #cccccc;
+ --vscode-debugIcon-pauseForeground: #75beff;
+ --vscode-debugIcon-stopForeground: #f48771;
+ --vscode-debugIcon-disconnectForeground: #f48771;
+ --vscode-debugIcon-restartForeground: #89d185;
+ --vscode-debugIcon-stepOverForeground: #75beff;
+ --vscode-debugIcon-stepIntoForeground: #75beff;
+ --vscode-debugIcon-stepOutForeground: #75beff;
+ --vscode-debugIcon-continueForeground: #75beff;
+ --vscode-debugIcon-stepBackForeground: #75beff;
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
+ --vscode-mergeEditor-changeBase\.background: #4b1818;
+ --vscode-mergeEditor-changeBase\.word\.background: #6f1313;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, 0.48);
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-extensionIcon-starForeground: #ff8e00;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #d758b3;
+ --vscode-extensionIcon-privateForeground: rgba(255, 255, 255, 0.38);
+ --vscode-terminal-ansiBlack: #000000;
+ --vscode-terminal-ansiRed: #cd3131;
+ --vscode-terminal-ansiGreen: #0dbc79;
+ --vscode-terminal-ansiYellow: #e5e510;
+ --vscode-terminal-ansiBlue: #2472c8;
+ --vscode-terminal-ansiMagenta: #bc3fbc;
+ --vscode-terminal-ansiCyan: #11a8cd;
+ --vscode-terminal-ansiWhite: #e5e5e5;
+ --vscode-terminal-ansiBrightBlack: #666666;
+ --vscode-terminal-ansiBrightRed: #f14c4c;
+ --vscode-terminal-ansiBrightGreen: #23d18b;
+ --vscode-terminal-ansiBrightYellow: #f5f543;
+ --vscode-terminal-ansiBrightBlue: #3b8eea;
+ --vscode-terminal-ansiBrightMagenta: #d670d6;
+ --vscode-terminal-ansiBrightCyan: #29b8db;
+ --vscode-terminal-ansiBrightWhite: #e5e5e5;
+ --vscode-simpleFindWidget-sashBorder: #454545;
+ --vscode-terminalStickyScrollHover-background: #2a2d2e;
+ --vscode-terminalCommandGuide-foreground: #37373d;
+ --vscode-terminalSymbolIcon-flagForeground: #ee9d28;
+ --vscode-terminalSymbolIcon-aliasForeground: #b180d7;
+ --vscode-terminalSymbolIcon-optionValueForeground: #75beff;
+ --vscode-terminalSymbolIcon-methodForeground: #b180d7;
+ --vscode-terminalSymbolIcon-argumentForeground: #75beff;
+ --vscode-terminalSymbolIcon-optionForeground: #ee9d28;
+ --vscode-terminalSymbolIcon-fileForeground: #cccccc;
+ --vscode-terminalSymbolIcon-folderForeground: #cccccc;
+ --vscode-welcomePage-tileBackground: #252526;
+ --vscode-welcomePage-tileHoverBackground: #2c2c2d;
+ --vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+ --vscode-welcomePage-progress\.background: #3c3c3c;
+ --vscode-welcomePage-progress\.foreground: #3794ff;
+ --vscode-walkthrough-stepTitle\.foreground: #ffffff;
+ --vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.4);
+ --vscode-profiles-sashBorder: #181818;
+ --vscode-gitDecoration-addedResourceForeground: #81b88b;
+ --vscode-gitDecoration-modifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-deletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-renamedResourceForeground: #73c991;
+ --vscode-gitDecoration-untrackedResourceForeground: #73c991;
+ --vscode-gitDecoration-ignoredResourceForeground: #4b4b4b;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-conflictingResourceForeground: #e4676b;
+ --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+ --vscode-git-blame\.editorDecorationForeground: #969696;
+ --vscode-gitlens-gutterBackgroundColor: rgba(255, 255, 255, 0.07);
+ --vscode-gitlens-gutterForegroundColor: #bebebe;
+ --vscode-gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+ --vscode-gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+ --vscode-gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+ --vscode-gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+ --vscode-gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+ --vscode-gitlens-openAutolinkedIssueIconColor: #3fb950;
+ --vscode-gitlens-closedAutolinkedIssueIconColor: #a371f7;
+ --vscode-gitlens-closedPullRequestIconColor: #f85149;
+ --vscode-gitlens-openPullRequestIconColor: #3fb950;
+ --vscode-gitlens-mergedPullRequestIconColor: #a371f7;
+ --vscode-gitlens-unpublishedChangesIconColor: #35b15e;
+ --vscode-gitlens-unpublishedCommitIconColor: #35b15e;
+ --vscode-gitlens-unpulledChangesIconColor: #b15e35;
+ --vscode-gitlens-decorations\.addedForegroundColor: #81b88b;
+ --vscode-gitlens-decorations\.copiedForegroundColor: #73c991;
+ --vscode-gitlens-decorations\.deletedForegroundColor: #c74e39;
+ --vscode-gitlens-decorations\.ignoredForegroundColor: #4b4b4b;
+ --vscode-gitlens-decorations\.modifiedForegroundColor: #e2c08d;
+ --vscode-gitlens-decorations\.untrackedForegroundColor: #73c991;
+ --vscode-gitlens-decorations\.renamedForegroundColor: #73c991;
+ --vscode-gitlens-decorations\.branchAheadForegroundColor: #35b15e;
+ --vscode-gitlens-decorations\.branchBehindForegroundColor: #b15e35;
+ --vscode-gitlens-decorations\.branchDivergedForegroundColor: #d8af1b;
+ --vscode-gitlens-decorations\.branchUpToDateForegroundColor: rgba(255, 255, 255, 0.53);
+ --vscode-gitlens-decorations\.branchUnpublishedForegroundColor: rgba(255, 255, 255, 0.53);
+ --vscode-gitlens-decorations\.branchMissingUpstreamForegroundColor: #c74e39;
+ --vscode-gitlens-decorations\.statusMergingOrRebasingConflictForegroundColor: #c74e39;
+ --vscode-gitlens-decorations\.statusMergingOrRebasingForegroundColor: #d8af1b;
+ --vscode-gitlens-decorations\.workspaceRepoMissingForegroundColor: #909090;
+ --vscode-gitlens-decorations\.workspaceCurrentForegroundColor: #35b15e;
+ --vscode-gitlens-decorations\.workspaceRepoOpenForegroundColor: #35b15e;
+ --vscode-gitlens-decorations\.worktreeHasUncommittedChangesForegroundColor: #e2c08d;
+ --vscode-gitlens-decorations\.worktreeMissingForegroundColor: #c74e39;
+ --vscode-gitlens-graphLane1Color: #15a0bf;
+ --vscode-gitlens-graphLane2Color: #0669f7;
+ --vscode-gitlens-graphLane3Color: #8e00c2;
+ --vscode-gitlens-graphLane4Color: #c517b6;
+ --vscode-gitlens-graphLane5Color: #d90171;
+ --vscode-gitlens-graphLane6Color: #cd0101;
+ --vscode-gitlens-graphLane7Color: #f25d2e;
+ --vscode-gitlens-graphLane8Color: #f2ca33;
+ --vscode-gitlens-graphLane9Color: #7bd938;
+ --vscode-gitlens-graphLane10Color: #2ece9d;
+ --vscode-gitlens-graphChangesColumnAddedColor: #347d39;
+ --vscode-gitlens-graphChangesColumnDeletedColor: #c93c37;
+ --vscode-gitlens-graphMinimapMarkerHeadColor: #05e617;
+ --vscode-gitlens-graphScrollMarkerHeadColor: #05e617;
+ --vscode-gitlens-graphMinimapMarkerUpstreamColor: #09ae17;
+ --vscode-gitlens-graphScrollMarkerUpstreamColor: #09ae17;
+ --vscode-gitlens-graphMinimapMarkerHighlightsColor: #fbff0a;
+ --vscode-gitlens-graphScrollMarkerHighlightsColor: #fbff0a;
+ --vscode-gitlens-graphMinimapMarkerLocalBranchesColor: #3087cf;
+ --vscode-gitlens-graphScrollMarkerLocalBranchesColor: #3087cf;
+ --vscode-gitlens-graphMinimapMarkerPullRequestsColor: #c76801;
+ --vscode-gitlens-graphScrollMarkerPullRequestsColor: #c76801;
+ --vscode-gitlens-graphMinimapMarkerRemoteBranchesColor: #2b5e88;
+ --vscode-gitlens-graphScrollMarkerRemoteBranchesColor: #2b5e88;
+ --vscode-gitlens-graphMinimapMarkerStashesColor: #b34db3;
+ --vscode-gitlens-graphScrollMarkerStashesColor: #b34db3;
+ --vscode-gitlens-graphMinimapMarkerTagsColor: #6b562e;
+ --vscode-gitlens-graphScrollMarkerTagsColor: #6b562e;
+ --vscode-gitlens-launchpadIndicatorMergeableColor: #3fb950;
+ --vscode-gitlens-launchpadIndicatorMergeableHoverColor: #3fb950;
+ --vscode-gitlens-launchpadIndicatorBlockedColor: #c74e39;
+ --vscode-gitlens-launchpadIndicatorBlockedHoverColor: #c74e39;
+ --vscode-gitlens-launchpadIndicatorAttentionColor: #d8af1b;
+ --vscode-gitlens-launchpadIndicatorAttentionHoverColor: #d8af1b;
+}
diff --git a/mynah-ui/example/src/styles/themes/dark-abyss.scss b/mynah-ui/example/src/styles/themes/dark-abyss.scss
new file mode 100644
index 0000000000..b1cfde2f4a
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/dark-abyss.scss
@@ -0,0 +1,603 @@
+html[theme='dark-abyss']:root {
+ --vscode-foreground: #cccccc;
+ --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
+ --vscode-errorForeground: #f48771;
+ --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
+ --vscode-icon-foreground: #c5c5c5;
+ --vscode-focusBorder: #596f99;
+ --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+ --vscode-textLink-foreground: #3794ff;
+ --vscode-textLink-activeForeground: #3794ff;
+ --vscode-textPreformat-foreground: #d7ba7d;
+ --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-input-background: #181f2f;
+ --vscode-input-foreground: #cccccc;
+ --vscode-inputOption-activeBorder: #1d4a87;
+ --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+ --vscode-inputOption-activeBackground: rgba(89, 111, 153, 0.4);
+ --vscode-inputOption-activeForeground: #ffffff;
+ --vscode-input-placeholderForeground: rgba(204, 204, 204, 0.5);
+ --vscode-inputValidation-infoBackground: #051336;
+ --vscode-inputValidation-infoBorder: #384078;
+ --vscode-inputValidation-warningBackground: #5b7e7a;
+ --vscode-inputValidation-warningBorder: #5b7e7a;
+ --vscode-inputValidation-errorBackground: #a22d44;
+ --vscode-inputValidation-errorBorder: #ab395b;
+ --vscode-dropdown-background: #181f2f;
+ --vscode-dropdown-foreground: #f0f0f0;
+ --vscode-dropdown-border: #181f2f;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #2b3c5d;
+ --vscode-button-hoverBackground: #344870;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #3a3d41;
+ --vscode-button-secondaryHoverBackground: #45494e;
+ --vscode-badge-background: #0063a5;
+ --vscode-badge-foreground: #ffffff;
+ --vscode-scrollbar-shadow: rgba(81, 94, 145, 0.67);
+ --vscode-scrollbarSlider-background: rgba(31, 34, 48, 0.67);
+ --vscode-scrollbarSlider-hoverBackground: rgba(59, 63, 81, 0.53);
+ --vscode-scrollbarSlider-activeBackground: rgba(59, 63, 81, 0.53);
+ --vscode-progressBar-background: #0063a5;
+ --vscode-editorError-foreground: #f14c4c;
+ --vscode-editorWarning-foreground: #cca700;
+ --vscode-editorInfo-foreground: #3794ff;
+ --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+ --vscode-sash-hoverBorder: #596f99;
+ --vscode-editor-background: #000c18;
+ --vscode-editor-foreground: #6688cc;
+ --vscode-editorStickyScroll-background: #000c18;
+ --vscode-editorStickyScrollHover-background: #2a2d2e;
+ --vscode-editorWidget-background: #262641;
+ --vscode-editorWidget-foreground: #cccccc;
+ --vscode-editorWidget-border: #454545;
+ --vscode-quickInput-background: #262641;
+ --vscode-quickInput-foreground: #cccccc;
+ --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
+ --vscode-pickerGroup-foreground: #596f99;
+ --vscode-pickerGroup-border: #596f99;
+ --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
+ --vscode-keybindingLabel-foreground: #cccccc;
+ --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
+ --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+ --vscode-editor-selectionBackground: #770811;
+ --vscode-editor-inactiveSelectionBackground: rgba(119, 8, 17, 0.5);
+ --vscode-editor-selectionHighlightBackground: rgba(86, 6, 12, 0.6);
+ --vscode-editor-findMatchBackground: #515c6a;
+ --vscode-editor-findMatchHighlightBackground: rgba(238, 238, 238, 0.27);
+ --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+ --vscode-searchEditor-findMatchBackground: rgba(238, 238, 238, 0.18);
+ --vscode-search-resultsInfoForeground: rgba(204, 204, 204, 0.65);
+ --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+ --vscode-editorHoverWidget-background: #000c38;
+ --vscode-editorHoverWidget-foreground: #cccccc;
+ --vscode-editorHoverWidget-border: #004c18;
+ --vscode-editorHoverWidget-statusBarBackground: #000f43;
+ --vscode-editorLink-activeForeground: #0063a5;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(0, 99, 165, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(0, 99, 165, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(0, 99, 165, 0.1);
+ --vscode-editorLightBulb-foreground: #ffcc00;
+ --vscode-editorLightBulbAutoFix-foreground: #75beff;
+ --vscode-diffEditor-insertedTextBackground: rgba(49, 149, 138, 0.33);
+ --vscode-diffEditor-removedTextBackground: rgba(137, 47, 70, 0.53);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #3e3e3e;
+ --vscode-diffEditor-unchangedRegionForeground: #a3a2a2;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);
+ --vscode-list-focusOutline: #596f99;
+ --vscode-list-activeSelectionBackground: #08286b;
+ --vscode-list-activeSelectionForeground: #ffffff;
+ --vscode-list-inactiveSelectionBackground: #152037;
+ --vscode-list-hoverBackground: #061940;
+ --vscode-list-dropBackground: #041d52;
+ --vscode-list-highlightForeground: #0063a5;
+ --vscode-list-focusHighlightForeground: #0063a5;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #f88070;
+ --vscode-list-warningForeground: #cca700;
+ --vscode-listFilterWidget-background: #262641;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-list-filterMatchBackground: rgba(238, 238, 238, 0.27);
+ --vscode-tree-indentGuidesStroke: #585858;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(88, 88, 88, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-list-deemphasizedForeground: #8c8c8c;
+ --vscode-checkbox-background: #181f2f;
+ --vscode-checkbox-selectBackground: #262641;
+ --vscode-checkbox-foreground: #f0f0f0;
+ --vscode-checkbox-border: #181f2f;
+ --vscode-checkbox-selectBorder: #c5c5c5;
+ --vscode-quickInputList-focusForeground: #ffffff;
+ --vscode-quickInputList-focusBackground: #08286b;
+ --vscode-menu-foreground: #f0f0f0;
+ --vscode-menu-background: #181f2f;
+ --vscode-menu-selectionForeground: #ffffff;
+ --vscode-menu-selectionBackground: #08286b;
+ --vscode-menu-separatorBackground: #606060;
+ --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+ --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+ --vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
+ --vscode-breadcrumb-background: #000c18;
+ --vscode-breadcrumb-focusForeground: #e0e0e0;
+ --vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
+ --vscode-breadcrumbPicker-background: #262641;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #676767;
+ --vscode-minimap-selectionHighlight: #750000;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #cca700;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(31, 34, 48, 0.33);
+ --vscode-minimapSlider-hoverBackground: rgba(59, 63, 81, 0.27);
+ --vscode-minimapSlider-activeBackground: rgba(59, 63, 81, 0.27);
+ --vscode-problemsErrorIcon-foreground: #f14c4c;
+ --vscode-problemsWarningIcon-foreground: #cca700;
+ --vscode-problemsInfoIcon-foreground: #3794ff;
+ --vscode-charts-foreground: #cccccc;
+ --vscode-charts-lines: rgba(204, 204, 204, 0.5);
+ --vscode-charts-red: #f14c4c;
+ --vscode-charts-blue: #3794ff;
+ --vscode-charts-yellow: #cca700;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #89d185;
+ --vscode-charts-purple: #b180d7;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #cccccc;
+ --vscode-symbolIcon-booleanForeground: #cccccc;
+ --vscode-symbolIcon-classForeground: #ee9d28;
+ --vscode-symbolIcon-colorForeground: #cccccc;
+ --vscode-symbolIcon-constantForeground: #cccccc;
+ --vscode-symbolIcon-constructorForeground: #b180d7;
+ --vscode-symbolIcon-enumeratorForeground: #ee9d28;
+ --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
+ --vscode-symbolIcon-eventForeground: #ee9d28;
+ --vscode-symbolIcon-fieldForeground: #75beff;
+ --vscode-symbolIcon-fileForeground: #cccccc;
+ --vscode-symbolIcon-folderForeground: #cccccc;
+ --vscode-symbolIcon-functionForeground: #b180d7;
+ --vscode-symbolIcon-interfaceForeground: #75beff;
+ --vscode-symbolIcon-keyForeground: #cccccc;
+ --vscode-symbolIcon-keywordForeground: #cccccc;
+ --vscode-symbolIcon-methodForeground: #b180d7;
+ --vscode-symbolIcon-moduleForeground: #cccccc;
+ --vscode-symbolIcon-namespaceForeground: #cccccc;
+ --vscode-symbolIcon-nullForeground: #cccccc;
+ --vscode-symbolIcon-numberForeground: #cccccc;
+ --vscode-symbolIcon-objectForeground: #cccccc;
+ --vscode-symbolIcon-operatorForeground: #cccccc;
+ --vscode-symbolIcon-packageForeground: #cccccc;
+ --vscode-symbolIcon-propertyForeground: #cccccc;
+ --vscode-symbolIcon-referenceForeground: #cccccc;
+ --vscode-symbolIcon-snippetForeground: #cccccc;
+ --vscode-symbolIcon-stringForeground: #cccccc;
+ --vscode-symbolIcon-structForeground: #cccccc;
+ --vscode-symbolIcon-textForeground: #cccccc;
+ --vscode-symbolIcon-typeParameterForeground: #cccccc;
+ --vscode-symbolIcon-unitForeground: #cccccc;
+ --vscode-symbolIcon-variableForeground: #75beff;
+ --vscode-actionBar-toggledBackground: rgba(89, 111, 153, 0.4);
+ --vscode-editorHoverWidget-highlightForeground: #0063a5;
+ --vscode-editor-lineHighlightBackground: #082050;
+ --vscode-editor-lineHighlightBorder: #282828;
+ --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-editor-symbolHighlightBackground: rgba(238, 238, 238, 0.27);
+ --vscode-editorCursor-foreground: #ddbb88;
+ --vscode-editorWhitespace-foreground: #103050;
+ --vscode-editorLineNumber-foreground: #406385;
+ --vscode-editorIndentGuide-background: #002952;
+ --vscode-editorIndentGuide-activeBackground: #204972;
+ --vscode-editorIndentGuide-background1: #002952;
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: #204972;
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+ --vscode-editorLineNumber-activeForeground: #80a2c2;
+ --vscode-editorRuler-foreground: #5a5a5a;
+ --vscode-editorCodeLens-foreground: #999999;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #888888;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #000c18;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+ --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #cca700;
+ --vscode-editorOverviewRuler-infoForeground: #3794ff;
+ --vscode-editorBracketHighlight-foreground1: #ffd700;
+ --vscode-editorBracketHighlight-foreground2: #da70d6;
+ --vscode-editorBracketHighlight-foreground3: #179fff;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #bd9b03;
+ --vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(119, 8, 17, 0.3);
+ --vscode-editorGutter-foldingControlForeground: #c5c5c5;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
+ --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.72);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: #10192c;
+ --vscode-peekViewTitleLabel-foreground: #ffffff;
+ --vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
+ --vscode-peekView-border: #2b2b4a;
+ --vscode-peekViewResult-background: #060621;
+ --vscode-peekViewResult-lineForeground: #bbbbbb;
+ --vscode-peekViewResult-fileForeground: #ffffff;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #ffffff;
+ --vscode-peekViewEditor-background: #10192c;
+ --vscode-peekViewEditorGutter-background: #10192c;
+ --vscode-peekViewEditorStickyScroll-background: #10192c;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(238, 238, 238, 0.27);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(238, 238, 238, 0.2);
+ --vscode-editorMarkerNavigationError-background: #ab395b;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(171, 57, 91, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #5b7e7a;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(91, 126, 122, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #3794ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #060621;
+ --vscode-editorSuggestWidget-background: #262641;
+ --vscode-editorSuggestWidget-border: #454545;
+ --vscode-editorSuggestWidget-foreground: #6688cc;
+ --vscode-editorSuggestWidget-selectedForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedBackground: #08286b;
+ --vscode-editorSuggestWidget-highlightForeground: #0063a5;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #0063a5;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(102, 136, 204, 0.5);
+ --vscode-tab-activeBackground: #000c18;
+ --vscode-tab-unfocusedActiveBackground: #000c18;
+ --vscode-tab-inactiveBackground: #10192c;
+ --vscode-tab-unfocusedInactiveBackground: #10192c;
+ --vscode-tab-activeForeground: #ffffff;
+ --vscode-tab-inactiveForeground: rgba(255, 255, 255, 0.5);
+ --vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, 0.5);
+ --vscode-tab-unfocusedInactiveForeground: rgba(255, 255, 255, 0.25);
+ --vscode-tab-border: #2b2b4a;
+ --vscode-tab-lastPinnedBorder: #2b3c5d;
+ --vscode-tab-activeModifiedBorder: #3399cc;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+ --vscode-editorPane-background: #000c18;
+ --vscode-editorGroupHeader-tabsBackground: #1c1c2a;
+ --vscode-editorGroupHeader-noTabsBackground: #000c18;
+ --vscode-editorGroup-border: #2b2b4a;
+ --vscode-editorGroup-dropBackground: rgba(37, 55, 93, 0.67);
+ --vscode-editorGroup-dropIntoPromptForeground: #cccccc;
+ --vscode-editorGroup-dropIntoPromptBackground: #262641;
+ --vscode-sideBySideEditor-horizontalBorder: #2b2b4a;
+ --vscode-sideBySideEditor-verticalBorder: #2b2b4a;
+ --vscode-panel-background: #000c18;
+ --vscode-panel-border: #2b2b4a;
+ --vscode-panelTitle-activeForeground: #e7e7e7;
+ --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
+ --vscode-panelTitle-activeBorder: #e7e7e7;
+ --vscode-panel-dropBorder: #e7e7e7;
+ --vscode-panelSection-dropBackground: rgba(37, 55, 93, 0.67);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: #2b2b4a;
+ --vscode-banner-background: #08286b;
+ --vscode-banner-foreground: #ffffff;
+ --vscode-banner-iconForeground: #3794ff;
+ --vscode-statusBar-foreground: #ffffff;
+ --vscode-statusBar-noFolderForeground: #ffffff;
+ --vscode-statusBar-background: #10192c;
+ --vscode-statusBar-noFolderBackground: #10192c;
+ --vscode-statusBar-focusBorder: #ffffff;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #ffffff;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #ffffff;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #ffffff;
+ --vscode-statusBarItem-prominentBackground: #0063a5;
+ --vscode-statusBarItem-prominentHoverForeground: #ffffff;
+ --vscode-statusBarItem-prominentHoverBackground: rgba(0, 99, 165, 0.87);
+ --vscode-statusBarItem-errorBackground: #c72e0f;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #7a6400;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #051336;
+ --vscode-activityBar-foreground: #ffffff;
+ --vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.4);
+ --vscode-activityBar-activeBorder: #ffffff;
+ --vscode-activityBar-dropBorder: #ffffff;
+ --vscode-activityBarBadge-background: #007acc;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-profileBadge-background: #4d4d4d;
+ --vscode-profileBadge-foreground: #ffffff;
+ --vscode-statusBarItem-remoteBackground: #0063a5;
+ --vscode-statusBarItem-remoteForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #007acc;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #060621;
+ --vscode-sideBar-dropBackground: rgba(37, 55, 93, 0.67);
+ --vscode-sideBarSectionHeader-background: #10192c;
+ --vscode-titleBar-activeForeground: #cccccc;
+ --vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-titleBar-activeBackground: #10192c;
+ --vscode-titleBar-inactiveBackground: rgba(16, 25, 44, 0.6);
+ --vscode-menubar-selectionForeground: #cccccc;
+ --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+ --vscode-notifications-foreground: #cccccc;
+ --vscode-notifications-background: #262641;
+ --vscode-notificationLink-foreground: #3794ff;
+ --vscode-notificationCenterHeader-background: #313155;
+ --vscode-notifications-border: #313155;
+ --vscode-notificationsErrorIcon-foreground: #f14c4c;
+ --vscode-notificationsWarningIcon-foreground: #cca700;
+ --vscode-notificationsInfoIcon-foreground: #3794ff;
+ --vscode-commandCenter-foreground: #cccccc;
+ --vscode-commandCenter-activeForeground: #cccccc;
+ --vscode-commandCenter-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-commandCenter-background: rgba(255, 255, 255, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+ --vscode-commandCenter-border: rgba(204, 204, 204, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(204, 204, 204, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(204, 204, 204, 0.15);
+ --vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);
+ --vscode-chat-slashCommandBackground: #0063a5;
+ --vscode-chat-slashCommandForeground: #ffffff;
+ --vscode-simpleFindWidget-sashBorder: #454545;
+ --vscode-commentsView-resolvedIcon: rgba(204, 204, 204, 0.5);
+ --vscode-commentsView-unresolvedIcon: #596f99;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #596f99;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(89, 111, 153, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(89, 111, 153, 0.1);
+ --vscode-editorGutter-commentRangeForeground: #152037;
+ --vscode-editorOverviewRuler-commentForeground: #152037;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #152037;
+ --vscode-editorGutter-commentGlyphForeground: #6688cc;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #6688cc;
+ --vscode-debugToolBar-background: #051336;
+ --vscode-debugIcon-startForeground: #89d185;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
+ --vscode-mergeEditor-changeBase\.background: #4b1818;
+ --vscode-mergeEditor-changeBase\.word\.background: #6f1313;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, 0.48);
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #e7e7e7;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(231, 231, 231, 0.7);
+ --vscode-settings-modifiedItemIndicator: #0c7d9d;
+ --vscode-settings-headerBorder: #2b2b4a;
+ --vscode-settings-sashBorder: #2b2b4a;
+ --vscode-settings-dropdownBackground: #181f2f;
+ --vscode-settings-dropdownForeground: #f0f0f0;
+ --vscode-settings-dropdownBorder: #181f2f;
+ --vscode-settings-dropdownListBorder: #454545;
+ --vscode-settings-checkboxBackground: #181f2f;
+ --vscode-settings-checkboxForeground: #f0f0f0;
+ --vscode-settings-checkboxBorder: #181f2f;
+ --vscode-settings-textInputBackground: #181f2f;
+ --vscode-settings-textInputForeground: #cccccc;
+ --vscode-settings-numberInputBackground: #181f2f;
+ --vscode-settings-numberInputForeground: #cccccc;
+ --vscode-settings-focusedRowBackground: rgba(6, 25, 64, 0.6);
+ --vscode-settings-rowHoverBackground: rgba(6, 25, 64, 0.3);
+ --vscode-settings-focusedRowBorder: #596f99;
+ --vscode-terminal-foreground: #cccccc;
+ --vscode-terminal-selectionBackground: #770811;
+ --vscode-terminal-inactiveSelectionBackground: rgba(119, 8, 17, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #1b81a8;
+ --vscode-terminalCommandDecoration-errorBackground: #f14c4c;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: #2b2b4a;
+ --vscode-terminal-findMatchBackground: #515c6a;
+ --vscode-terminal-hoverHighlightBackground: rgba(38, 79, 120, 0.13);
+ --vscode-terminal-findMatchHighlightBackground: rgba(238, 238, 238, 0.27);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(37, 55, 93, 0.67);
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #f14c4c;
+ --vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #f14c4c;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(102, 136, 204, 0.5);
+ --vscode-welcomePage-tileBackground: #262641;
+ --vscode-welcomePage-tileHoverBackground: #2e2e4e;
+ --vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+ --vscode-welcomePage-progress\.background: #181f2f;
+ --vscode-welcomePage-progress\.foreground: #3794ff;
+ --vscode-walkthrough-stepTitle\.foreground: #ffffff;
+ --vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.4);
+ --vscode-inlineChat-background: #262641;
+ --vscode-inlineChat-border: #454545;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-inlineChat-regionHighlight: rgba(38, 79, 120, 0.25);
+ --vscode-inlineChatInput-border: #454545;
+ --vscode-inlineChatInput-focusBorder: #596f99;
+ --vscode-inlineChatInput-placeholderForeground: rgba(204, 204, 204, 0.5);
+ --vscode-inlineChatInput-background: #181f2f;
+ --vscode-inlineChatDiff-inserted: rgba(49, 149, 138, 0.17);
+ --vscode-inlineChatDiff-removed: rgba(137, 47, 70, 0.27);
+ --vscode-debugExceptionWidget-border: #ab395b;
+ --vscode-debugExceptionWidget-background: #051336;
+ --vscode-ports-iconRunningProcessForeground: #80a2c2;
+ --vscode-statusBar-debuggingBackground: #10192c;
+ --vscode-statusBar-debuggingForeground: #ffffff;
+ --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: #1b81a8;
+ --vscode-editorGutter-addedBackground: #487e02;
+ --vscode-editorGutter-deletedBackground: #f14c4c;
+ --vscode-minimapGutter-modifiedBackground: #1b81a8;
+ --vscode-minimapGutter-addedBackground: #487e02;
+ --vscode-minimapGutter-deletedBackground: #f14c4c;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: #152037;
+ --vscode-notebook-focusedEditorBorder: #596f99;
+ --vscode-notebookStatusSuccessIcon-foreground: #89d185;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;
+ --vscode-notebookStatusErrorIcon-foreground: #f48771;
+ --vscode-notebookStatusRunningIcon-foreground: #cccccc;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #152037;
+ --vscode-notebook-selectedCellBorder: #152037;
+ --vscode-notebook-focusedCellBorder: #596f99;
+ --vscode-notebook-inactiveFocusedCellBorder: #152037;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+ --vscode-notebook-cellInsertionIndicator: #596f99;
+ --vscode-notebookScrollbarSlider-background: rgba(31, 34, 48, 0.67);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(59, 63, 81, 0.53);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(59, 63, 81, 0.53);
+ --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-notebook-cellEditorBackground: #060621;
+ --vscode-notebook-editorBackground: #000c18;
+ --vscode-keybindingTable-headerBackground: rgba(204, 204, 204, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-debugTokenExpression-name: #c586c0;
+ --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+ --vscode-debugTokenExpression-string: #ce9178;
+ --vscode-debugTokenExpression-boolean: #4e94ce;
+ --vscode-debugTokenExpression-number: #b5cea8;
+ --vscode-debugTokenExpression-error: #f48771;
+ --vscode-debugView-exceptionLabelForeground: #cccccc;
+ --vscode-debugView-exceptionLabelBackground: #6c2022;
+ --vscode-debugView-stateLabelForeground: #cccccc;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #3794ff;
+ --vscode-debugConsole-warningForeground: #cca700;
+ --vscode-debugConsole-errorForeground: #f48771;
+ --vscode-debugConsole-sourceForeground: #cccccc;
+ --vscode-debugConsoleInputIcon-foreground: #cccccc;
+ --vscode-debugIcon-pauseForeground: #75beff;
+ --vscode-debugIcon-stopForeground: #f48771;
+ --vscode-debugIcon-disconnectForeground: #f48771;
+ --vscode-debugIcon-restartForeground: #89d185;
+ --vscode-debugIcon-stepOverForeground: #75beff;
+ --vscode-debugIcon-stepIntoForeground: #75beff;
+ --vscode-debugIcon-stepOutForeground: #75beff;
+ --vscode-debugIcon-continueForeground: #75beff;
+ --vscode-debugIcon-stepBackForeground: #75beff;
+ --vscode-scm-providerBorder: #454545;
+ --vscode-extensionButton-background: #2b3c5d;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #344870;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #5f8b3b;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: rgba(95, 139, 59, 0.73);
+ --vscode-extensionIcon-starForeground: #ff8e00;
+ --vscode-extensionIcon-verifiedForeground: #3794ff;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #d758b3;
+ --vscode-terminal-ansiBlack: #111111;
+ --vscode-terminal-ansiRed: #ff9da4;
+ --vscode-terminal-ansiGreen: #d1f1a9;
+ --vscode-terminal-ansiYellow: #ffeead;
+ --vscode-terminal-ansiBlue: #bbdaff;
+ --vscode-terminal-ansiMagenta: #ebbbff;
+ --vscode-terminal-ansiCyan: #99ffff;
+ --vscode-terminal-ansiWhite: #cccccc;
+ --vscode-terminal-ansiBrightBlack: #333333;
+ --vscode-terminal-ansiBrightRed: #ff7882;
+ --vscode-terminal-ansiBrightGreen: #b8f171;
+ --vscode-terminal-ansiBrightYellow: #ffe580;
+ --vscode-terminal-ansiBrightBlue: #80baff;
+ --vscode-terminal-ansiBrightMagenta: #d778ff;
+ --vscode-terminal-ansiBrightCyan: #78ffff;
+ --vscode-terminal-ansiBrightWhite: #ffffff;
+ --vscode-interactive-activeCodeBorder: #2b2b4a;
+ --vscode-interactive-inactiveCodeBorder: #152037;
+ --vscode-gitDecoration-addedResourceForeground: #81b88b;
+ --vscode-gitDecoration-modifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-deletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-renamedResourceForeground: #73c991;
+ --vscode-gitDecoration-untrackedResourceForeground: #73c991;
+ --vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-conflictingResourceForeground: #e4676b;
+ --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+}
diff --git a/mynah-ui/example/src/styles/themes/dark-ayu-mirage.scss b/mynah-ui/example/src/styles/themes/dark-ayu-mirage.scss
new file mode 100644
index 0000000000..84288fdc32
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/dark-ayu-mirage.scss
@@ -0,0 +1,638 @@
+html[theme='dark-ayu-mirage']:root {
+ --vscode-foreground: #707a8c;
+ --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
+ --vscode-errorForeground: #ff6666;
+ --vscode-descriptionForeground: #707a8c;
+ --vscode-icon-foreground: #707a8c;
+ --vscode-focusBorder: rgba(255, 204, 102, 0.7);
+ --vscode-selection-background: rgba(64, 159, 255, 0.25);
+ --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+ --vscode-textLink-foreground: #ffcc66;
+ --vscode-textLink-activeForeground: #ffcc66;
+ --vscode-textPreformat-foreground: #cccac2;
+ --vscode-textBlockQuote-background: #1c212b;
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+ --vscode-widget-shadow: rgba(18, 21, 28, 0.7);
+ --vscode-input-background: #242936;
+ --vscode-input-foreground: #cccac2;
+ --vscode-input-border: rgba(112, 122, 140, 0.27);
+ --vscode-inputOption-activeBorder: rgba(255, 204, 102, 0.3);
+ --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+ --vscode-inputOption-activeBackground: rgba(255, 204, 102, 0.2);
+ --vscode-inputOption-activeForeground: #ffcc66;
+ --vscode-input-placeholderForeground: rgba(112, 122, 140, 0.5);
+ --vscode-inputValidation-infoBackground: #1f2430;
+ --vscode-inputValidation-infoBorder: #5ccfe6;
+ --vscode-inputValidation-warningBackground: #1f2430;
+ --vscode-inputValidation-warningBorder: #ffd173;
+ --vscode-inputValidation-errorBackground: #242936;
+ --vscode-inputValidation-errorBorder: #ff6666;
+ --vscode-dropdown-background: #242936;
+ --vscode-dropdown-foreground: #707a8c;
+ --vscode-dropdown-border: rgba(112, 122, 140, 0.27);
+ --vscode-button-foreground: #805500;
+ --vscode-button-separator: rgba(128, 85, 0, 0.4);
+ --vscode-button-background: #ffcc66;
+ --vscode-button-hoverBackground: #fac761;
+ --vscode-button-secondaryForeground: #cccac2;
+ --vscode-button-secondaryBackground: rgba(112, 122, 140, 0.2);
+ --vscode-button-secondaryHoverBackground: rgba(112, 122, 140, 0.5);
+ --vscode-badge-background: rgba(255, 204, 102, 0.2);
+ --vscode-badge-foreground: #ffcc66;
+ --vscode-scrollbar-shadow: rgba(23, 27, 36, 0);
+ --vscode-scrollbarSlider-background: rgba(112, 122, 140, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(112, 122, 140, 0.6);
+ --vscode-scrollbarSlider-activeBackground: rgba(112, 122, 140, 0.7);
+ --vscode-progressBar-background: #ffcc66;
+ --vscode-editorError-foreground: #ff6666;
+ --vscode-editorWarning-foreground: #ffcc66;
+ --vscode-editorInfo-foreground: #3794ff;
+ --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+ --vscode-sash-hoverBorder: rgba(255, 204, 102, 0.7);
+ --vscode-editor-background: #242936;
+ --vscode-editor-foreground: #cccac2;
+ --vscode-editorStickyScroll-background: #242936;
+ --vscode-editorStickyScrollHover-background: #2a2d2e;
+ --vscode-editorWidget-background: #1f2430;
+ --vscode-editorWidget-foreground: #707a8c;
+ --vscode-editorWidget-border: #171b24;
+ --vscode-quickInput-background: #1f2430;
+ --vscode-quickInput-foreground: #707a8c;
+ --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
+ --vscode-pickerGroup-foreground: rgba(112, 122, 140, 0.5);
+ --vscode-pickerGroup-border: #171b24;
+ --vscode-keybindingLabel-background: rgba(112, 122, 140, 0.1);
+ --vscode-keybindingLabel-foreground: #cccac2;
+ --vscode-keybindingLabel-border: rgba(204, 202, 194, 0.1);
+ --vscode-keybindingLabel-bottomBorder: rgba(204, 202, 194, 0.1);
+ --vscode-editor-selectionBackground: rgba(64, 159, 255, 0.25);
+ --vscode-editor-inactiveSelectionBackground: rgba(64, 159, 255, 0.13);
+ --vscode-editor-selectionHighlightBackground: rgba(135, 217, 108, 0.15);
+ --vscode-editor-selectionHighlightBorder: rgba(135, 217, 108, 0);
+ --vscode-editor-findMatchBackground: #695380;
+ --vscode-editor-findMatchHighlightBackground: rgba(105, 83, 128, 0.4);
+ --vscode-editor-findRangeHighlightBackground: rgba(105, 83, 128, 0.25);
+ --vscode-editor-findMatchBorder: #695380;
+ --vscode-editor-findMatchHighlightBorder: rgba(92, 70, 114, 0.4);
+ --vscode-searchEditor-findMatchBackground: rgba(105, 83, 128, 0.26);
+ --vscode-searchEditor-findMatchBorder: rgba(92, 70, 114, 0.26);
+ --vscode-search-resultsInfoForeground: rgba(112, 122, 140, 0.65);
+ --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+ --vscode-editorHoverWidget-background: #1f2430;
+ --vscode-editorHoverWidget-foreground: #707a8c;
+ --vscode-editorHoverWidget-border: #171b24;
+ --vscode-editorHoverWidget-statusBarBackground: #252b3a;
+ --vscode-editorLink-activeForeground: #ffcc66;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(255, 204, 102, 0.02);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(255, 204, 102, 0.02);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(255, 204, 102, 0.02);
+ --vscode-editorLightBulb-foreground: #ffcc00;
+ --vscode-editorLightBulbAutoFix-foreground: #75beff;
+ --vscode-diffEditor-insertedTextBackground: rgba(135, 217, 108, 0.12);
+ --vscode-diffEditor-removedTextBackground: rgba(242, 121, 131, 0.12);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: #171b24;
+ --vscode-diffEditor-unchangedRegionBackground: #3e3e3e;
+ --vscode-diffEditor-unchangedRegionForeground: #a3a2a2;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);
+ --vscode-list-focusBackground: rgba(99, 117, 153, 0.15);
+ --vscode-list-focusForeground: #cccac2;
+ --vscode-list-focusOutline: rgba(99, 117, 153, 0.15);
+ --vscode-list-activeSelectionBackground: rgba(99, 117, 153, 0.15);
+ --vscode-list-activeSelectionForeground: #cccac2;
+ --vscode-list-inactiveSelectionBackground: rgba(105, 117, 140, 0.12);
+ --vscode-list-inactiveSelectionForeground: #707a8c;
+ --vscode-list-hoverBackground: rgba(99, 117, 153, 0.15);
+ --vscode-list-dropBackground: #062f4a;
+ --vscode-list-highlightForeground: #ffcc66;
+ --vscode-list-focusHighlightForeground: #ffcc66;
+ --vscode-list-invalidItemForeground: rgba(112, 122, 140, 0.3);
+ --vscode-list-errorForeground: #ff6666;
+ --vscode-list-warningForeground: #cca700;
+ --vscode-listFilterWidget-background: #1c212b;
+ --vscode-listFilterWidget-outline: #ffcc66;
+ --vscode-listFilterWidget-noMatchesOutline: #ff6666;
+ --vscode-listFilterWidget-shadow: rgba(18, 21, 28, 0.7);
+ --vscode-list-filterMatchBackground: rgba(92, 70, 114, 0.4);
+ --vscode-list-filterMatchBorder: rgba(105, 83, 128, 0.4);
+ --vscode-tree-indentGuidesStroke: rgba(138, 145, 153, 0.35);
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(138, 145, 153, 0.14);
+ --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(112, 122, 140, 0.04);
+ --vscode-list-deemphasizedForeground: #ff6666;
+ --vscode-checkbox-background: #242936;
+ --vscode-checkbox-selectBackground: #1f2430;
+ --vscode-checkbox-foreground: #707a8c;
+ --vscode-checkbox-border: rgba(112, 122, 140, 0.27);
+ --vscode-checkbox-selectBorder: #707a8c;
+ --vscode-quickInputList-focusForeground: #cccac2;
+ --vscode-quickInputList-focusBackground: rgba(99, 117, 153, 0.15);
+ --vscode-menu-foreground: #707a8c;
+ --vscode-menu-background: #242936;
+ --vscode-menu-selectionForeground: #cccac2;
+ --vscode-menu-selectionBackground: rgba(99, 117, 153, 0.15);
+ --vscode-menu-separatorBackground: #606060;
+ --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+ --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(135, 217, 108, 0.2);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+ --vscode-breadcrumb-foreground: rgba(112, 122, 140, 0.8);
+ --vscode-breadcrumb-background: #242936;
+ --vscode-breadcrumb-focusForeground: #7e8797;
+ --vscode-breadcrumb-activeSelectionForeground: #7e8797;
+ --vscode-breadcrumbPicker-background: #1f2430;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: #695380;
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #695380;
+ --vscode-minimap-selectionOccurrenceHighlight: #676767;
+ --vscode-minimap-selectionHighlight: rgba(64, 159, 255, 0.25);
+ --vscode-minimap-errorHighlight: #ff6666;
+ --vscode-minimap-warningHighlight: #ffcc66;
+ --vscode-minimap-background: #242936;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(112, 122, 140, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(112, 122, 140, 0.3);
+ --vscode-minimapSlider-activeBackground: rgba(112, 122, 140, 0.35);
+ --vscode-problemsErrorIcon-foreground: #ff6666;
+ --vscode-problemsWarningIcon-foreground: #ffcc66;
+ --vscode-problemsInfoIcon-foreground: #3794ff;
+ --vscode-charts-foreground: #707a8c;
+ --vscode-charts-lines: rgba(112, 122, 140, 0.5);
+ --vscode-charts-red: #ff6666;
+ --vscode-charts-blue: #3794ff;
+ --vscode-charts-yellow: #ffcc66;
+ --vscode-charts-orange: #695380;
+ --vscode-charts-green: #89d185;
+ --vscode-charts-purple: #b180d7;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #707a8c;
+ --vscode-symbolIcon-booleanForeground: #707a8c;
+ --vscode-symbolIcon-classForeground: #ee9d28;
+ --vscode-symbolIcon-colorForeground: #707a8c;
+ --vscode-symbolIcon-constantForeground: #707a8c;
+ --vscode-symbolIcon-constructorForeground: #b180d7;
+ --vscode-symbolIcon-enumeratorForeground: #ee9d28;
+ --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
+ --vscode-symbolIcon-eventForeground: #ee9d28;
+ --vscode-symbolIcon-fieldForeground: #75beff;
+ --vscode-symbolIcon-fileForeground: #707a8c;
+ --vscode-symbolIcon-folderForeground: #707a8c;
+ --vscode-symbolIcon-functionForeground: #b180d7;
+ --vscode-symbolIcon-interfaceForeground: #75beff;
+ --vscode-symbolIcon-keyForeground: #707a8c;
+ --vscode-symbolIcon-keywordForeground: #707a8c;
+ --vscode-symbolIcon-methodForeground: #b180d7;
+ --vscode-symbolIcon-moduleForeground: #707a8c;
+ --vscode-symbolIcon-namespaceForeground: #707a8c;
+ --vscode-symbolIcon-nullForeground: #707a8c;
+ --vscode-symbolIcon-numberForeground: #707a8c;
+ --vscode-symbolIcon-objectForeground: #707a8c;
+ --vscode-symbolIcon-operatorForeground: #707a8c;
+ --vscode-symbolIcon-packageForeground: #707a8c;
+ --vscode-symbolIcon-propertyForeground: #707a8c;
+ --vscode-symbolIcon-referenceForeground: #707a8c;
+ --vscode-symbolIcon-snippetForeground: #707a8c;
+ --vscode-symbolIcon-stringForeground: #707a8c;
+ --vscode-symbolIcon-structForeground: #707a8c;
+ --vscode-symbolIcon-textForeground: #707a8c;
+ --vscode-symbolIcon-typeParameterForeground: #707a8c;
+ --vscode-symbolIcon-unitForeground: #707a8c;
+ --vscode-symbolIcon-variableForeground: #75beff;
+ --vscode-actionBar-toggledBackground: rgba(255, 204, 102, 0.2);
+ --vscode-editorHoverWidget-highlightForeground: #ffcc66;
+ --vscode-editor-lineHighlightBackground: #1a1f29;
+ --vscode-editor-lineHighlightBorder: #282828;
+ --vscode-editor-rangeHighlightBackground: rgba(105, 83, 128, 0.2);
+ --vscode-editor-symbolHighlightBackground: rgba(105, 83, 128, 0.4);
+ --vscode-editorCursor-foreground: #ffcc66;
+ --vscode-editorWhitespace-foreground: rgba(138, 145, 153, 0.4);
+ --vscode-editorLineNumber-foreground: rgba(138, 145, 153, 0.4);
+ --vscode-editorIndentGuide-background: rgba(138, 145, 153, 0.18);
+ --vscode-editorIndentGuide-activeBackground: rgba(138, 145, 153, 0.35);
+ --vscode-editorIndentGuide-background1: rgba(138, 145, 153, 0.18);
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: rgba(138, 145, 153, 0.35);
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+ --vscode-editorLineNumber-activeForeground: rgba(138, 145, 153, 0.8);
+ --vscode-editorRuler-foreground: rgba(138, 145, 153, 0.18);
+ --vscode-editorCodeLens-foreground: rgba(184, 207, 230, 0.5);
+ --vscode-editorBracketMatch-background: rgba(138, 145, 153, 0.3);
+ --vscode-editorBracketMatch-border: rgba(138, 145, 153, 0.3);
+ --vscode-editorOverviewRuler-border: #171b24;
+ --vscode-editorGutter-background: #242936;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+ --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: #ff6666;
+ --vscode-editorOverviewRuler-warningForeground: #ffcc66;
+ --vscode-editorOverviewRuler-infoForeground: #3794ff;
+ --vscode-editorBracketHighlight-foreground1: #ffd700;
+ --vscode-editorBracketHighlight-foreground2: #da70d6;
+ --vscode-editorBracketHighlight-foreground3: #179fff;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #bd9b03;
+ --vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+ --vscode-editorOverviewRuler-bracketMatchForeground: rgba(138, 145, 153, 0.7);
+ --vscode-editor-foldBackground: rgba(64, 159, 255, 0.07);
+ --vscode-editorGutter-foldingControlForeground: #707a8c;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(128, 191, 255, 0.08);
+ --vscode-editor-wordHighlightStrongBackground: rgba(135, 217, 108, 0.08);
+ --vscode-editor-wordHighlightTextBackground: rgba(128, 191, 255, 0.08);
+ --vscode-editor-wordHighlightBorder: rgba(128, 191, 255, 0.5);
+ --vscode-editor-wordHighlightStrongBorder: rgba(135, 217, 108, 0.5);
+ --vscode-editor-wordHighlightTextBorder: rgba(128, 191, 255, 0.5);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(128, 191, 255, 0.4);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(135, 217, 108, 0.4);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: rgba(99, 117, 153, 0.15);
+ --vscode-peekViewTitleLabel-foreground: #cccac2;
+ --vscode-peekViewTitleDescription-foreground: #707a8c;
+ --vscode-peekView-border: rgba(99, 117, 153, 0.15);
+ --vscode-peekViewResult-background: #1f2430;
+ --vscode-peekViewResult-lineForeground: #707a8c;
+ --vscode-peekViewResult-fileForeground: #cccac2;
+ --vscode-peekViewResult-selectionBackground: rgba(99, 117, 153, 0.15);
+ --vscode-peekViewResult-selectionForeground: #ffffff;
+ --vscode-peekViewEditor-background: #1f2430;
+ --vscode-peekViewEditorGutter-background: #1f2430;
+ --vscode-peekViewEditorStickyScroll-background: #1f2430;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(105, 83, 128, 0.4);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(105, 83, 128, 0.4);
+ --vscode-peekViewEditor-matchHighlightBorder: rgba(92, 70, 114, 0.4);
+ --vscode-editorMarkerNavigationError-background: #ff6666;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(255, 102, 102, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #ffcc66;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(255, 204, 102, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #3794ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #1c212b;
+ --vscode-editorSuggestWidget-background: #1c212b;
+ --vscode-editorSuggestWidget-border: #171b24;
+ --vscode-editorSuggestWidget-foreground: #cccac2;
+ --vscode-editorSuggestWidget-selectedForeground: #cccac2;
+ --vscode-editorSuggestWidget-selectedBackground: rgba(99, 117, 153, 0.15);
+ --vscode-editorSuggestWidget-highlightForeground: #ffcc66;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #ffcc66;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(204, 202, 194, 0.5);
+ --vscode-tab-activeBackground: #242936;
+ --vscode-tab-unfocusedActiveBackground: #242936;
+ --vscode-tab-inactiveBackground: #1f2430;
+ --vscode-tab-unfocusedInactiveBackground: #1f2430;
+ --vscode-tab-activeForeground: #cccac2;
+ --vscode-tab-inactiveForeground: #707a8c;
+ --vscode-tab-unfocusedActiveForeground: #707a8c;
+ --vscode-tab-unfocusedInactiveForeground: #707a8c;
+ --vscode-tab-border: #171b24;
+ --vscode-tab-lastPinnedBorder: rgba(138, 145, 153, 0.35);
+ --vscode-tab-activeBorder: #242936;
+ --vscode-tab-unfocusedActiveBorder: rgba(36, 41, 54, 0.5);
+ --vscode-tab-activeBorderTop: #ffcc66;
+ --vscode-tab-unfocusedActiveBorderTop: #707a8c;
+ --vscode-tab-activeModifiedBorder: #3399cc;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+ --vscode-editorPane-background: #242936;
+ --vscode-editorGroupHeader-tabsBackground: #1f2430;
+ --vscode-editorGroupHeader-tabsBorder: #171b24;
+ --vscode-editorGroupHeader-noTabsBackground: #1f2430;
+ --vscode-editorGroup-border: #171b24;
+ --vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-editorGroup-dropIntoPromptForeground: #707a8c;
+ --vscode-editorGroup-dropIntoPromptBackground: #1f2430;
+ --vscode-sideBySideEditor-horizontalBorder: #171b24;
+ --vscode-sideBySideEditor-verticalBorder: #171b24;
+ --vscode-panel-background: #1f2430;
+ --vscode-panel-border: #171b24;
+ --vscode-panelTitle-activeForeground: #cccac2;
+ --vscode-panelTitle-inactiveForeground: #707a8c;
+ --vscode-panelTitle-activeBorder: #ffcc66;
+ --vscode-panelInput-border: rgba(112, 122, 140, 0.27);
+ --vscode-panel-dropBorder: #cccac2;
+ --vscode-panelSection-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: #171b24;
+ --vscode-banner-background: rgba(99, 117, 153, 0.15);
+ --vscode-banner-foreground: #cccac2;
+ --vscode-banner-iconForeground: #3794ff;
+ --vscode-statusBar-foreground: #707a8c;
+ --vscode-statusBar-noFolderForeground: #707a8c;
+ --vscode-statusBar-background: #1f2430;
+ --vscode-statusBar-noFolderBackground: #1c212b;
+ --vscode-statusBar-border: #171b24;
+ --vscode-statusBar-focusBorder: #707a8c;
+ --vscode-statusBar-noFolderBorder: #171b24;
+ --vscode-statusBarItem-activeBackground: rgba(112, 122, 140, 0.2);
+ --vscode-statusBarItem-focusBorder: #707a8c;
+ --vscode-statusBarItem-hoverBackground: rgba(112, 122, 140, 0.2);
+ --vscode-statusBarItem-hoverForeground: #707a8c;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #707a8c;
+ --vscode-statusBarItem-prominentBackground: #171b24;
+ --vscode-statusBarItem-prominentHoverForeground: #707a8c;
+ --vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.19);
+ --vscode-statusBarItem-errorBackground: #d60000;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #707a8c;
+ --vscode-statusBarItem-errorHoverBackground: rgba(112, 122, 140, 0.2);
+ --vscode-statusBarItem-warningBackground: #d68f00;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #707a8c;
+ --vscode-statusBarItem-warningHoverBackground: rgba(112, 122, 140, 0.2);
+ --vscode-activityBar-background: #242936;
+ --vscode-activityBar-foreground: rgba(112, 122, 140, 0.8);
+ --vscode-activityBar-inactiveForeground: rgba(112, 122, 140, 0.6);
+ --vscode-activityBar-border: #171b24;
+ --vscode-activityBar-activeBorder: #ffcc66;
+ --vscode-activityBar-dropBorder: rgba(112, 122, 140, 0.8);
+ --vscode-activityBarBadge-background: #ffcc66;
+ --vscode-activityBarBadge-foreground: #805500;
+ --vscode-profileBadge-background: #4d4d4d;
+ --vscode-profileBadge-foreground: #ffffff;
+ --vscode-statusBarItem-remoteBackground: #ffcc66;
+ --vscode-statusBarItem-remoteForeground: #805500;
+ --vscode-statusBarItem-remoteHoverForeground: #707a8c;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(112, 122, 140, 0.2);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #805500;
+ --vscode-statusBarItem-offlineHoverForeground: #707a8c;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(112, 122, 140, 0.2);
+ --vscode-extensionBadge-remoteBackground: #ffcc66;
+ --vscode-extensionBadge-remoteForeground: #805500;
+ --vscode-sideBar-background: #1f2430;
+ --vscode-sideBar-border: #171b24;
+ --vscode-sideBarTitle-foreground: #707a8c;
+ --vscode-sideBar-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-sideBarSectionHeader-background: #1f2430;
+ --vscode-sideBarSectionHeader-foreground: #707a8c;
+ --vscode-sideBarSectionHeader-border: #171b24;
+ --vscode-titleBar-activeForeground: #cccac2;
+ --vscode-titleBar-inactiveForeground: #707a8c;
+ --vscode-titleBar-activeBackground: #1f2430;
+ --vscode-titleBar-inactiveBackground: #1f2430;
+ --vscode-titleBar-border: #171b24;
+ --vscode-menubar-selectionForeground: #cccac2;
+ --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+ --vscode-notifications-foreground: #707a8c;
+ --vscode-notifications-background: #1f2430;
+ --vscode-notificationLink-foreground: #ffcc66;
+ --vscode-notificationCenterHeader-background: #282f3f;
+ --vscode-notifications-border: #282f3f;
+ --vscode-notificationsErrorIcon-foreground: #ff6666;
+ --vscode-notificationsWarningIcon-foreground: #ffcc66;
+ --vscode-notificationsInfoIcon-foreground: #3794ff;
+ --vscode-commandCenter-foreground: #cccac2;
+ --vscode-commandCenter-activeForeground: #cccac2;
+ --vscode-commandCenter-inactiveForeground: #707a8c;
+ --vscode-commandCenter-background: rgba(255, 255, 255, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+ --vscode-commandCenter-border: rgba(204, 202, 194, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(204, 202, 194, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(112, 122, 140, 0.25);
+ --vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);
+ --vscode-chat-slashCommandBackground: rgba(255, 204, 102, 0.2);
+ --vscode-chat-slashCommandForeground: #ffcc66;
+ --vscode-simpleFindWidget-sashBorder: #454545;
+ --vscode-commentsView-resolvedIcon: rgba(204, 204, 204, 0.5);
+ --vscode-commentsView-unresolvedIcon: rgba(99, 117, 153, 0.15);
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: rgba(99, 117, 153, 0.15);
+ --vscode-editorCommentsWidget-rangeBackground: rgba(99, 117, 153, 0.01);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(99, 117, 153, 0.01);
+ --vscode-editorGutter-commentRangeForeground: #2c3240;
+ --vscode-editorOverviewRuler-commentForeground: #2c3240;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #2c3240;
+ --vscode-editorGutter-commentGlyphForeground: #cccac2;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #cccac2;
+ --vscode-debugToolBar-background: #1c212b;
+ --vscode-debugIcon-startForeground: #89d185;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
+ --vscode-mergeEditor-changeBase\.background: #4b1818;
+ --vscode-mergeEditor-changeBase\.word\.background: #6f1313;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, 0.48);
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #cccac2;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(204, 202, 194, 0.7);
+ --vscode-settings-modifiedItemIndicator: #80bfff;
+ --vscode-settings-headerBorder: #171b24;
+ --vscode-settings-sashBorder: #171b24;
+ --vscode-settings-dropdownBackground: #242936;
+ --vscode-settings-dropdownForeground: #707a8c;
+ --vscode-settings-dropdownBorder: rgba(112, 122, 140, 0.27);
+ --vscode-settings-dropdownListBorder: #171b24;
+ --vscode-settings-checkboxBackground: #242936;
+ --vscode-settings-checkboxForeground: #707a8c;
+ --vscode-settings-checkboxBorder: rgba(112, 122, 140, 0.27);
+ --vscode-settings-textInputBackground: #242936;
+ --vscode-settings-textInputForeground: #cccac2;
+ --vscode-settings-textInputBorder: rgba(112, 122, 140, 0.27);
+ --vscode-settings-numberInputBackground: #242936;
+ --vscode-settings-numberInputForeground: #cccac2;
+ --vscode-settings-numberInputBorder: rgba(112, 122, 140, 0.27);
+ --vscode-settings-focusedRowBackground: rgba(99, 117, 153, 0.09);
+ --vscode-settings-rowHoverBackground: rgba(99, 117, 153, 0.04);
+ --vscode-settings-focusedRowBorder: rgba(255, 204, 102, 0.7);
+ --vscode-terminal-background: #1f2430;
+ --vscode-terminal-foreground: #cccac2;
+ --vscode-terminal-selectionBackground: rgba(64, 159, 255, 0.25);
+ --vscode-terminal-inactiveSelectionBackground: rgba(64, 159, 255, 0.13);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #1b81a8;
+ --vscode-terminalCommandDecoration-errorBackground: #f14c4c;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: #171b24;
+ --vscode-terminal-findMatchBackground: #695380;
+ --vscode-terminal-hoverHighlightBackground: rgba(38, 79, 120, 0.13);
+ --vscode-terminal-findMatchHighlightBackground: rgba(105, 83, 128, 0.4);
+ --vscode-terminalOverviewRuler-findMatchForeground: #695380;
+ --vscode-terminal-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-terminal-tab\.activeBorder: #242936;
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #ff6666;
+ --vscode-testing-peekHeaderBackground: rgba(255, 102, 102, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #ff6666;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(204, 202, 194, 0.5);
+ --vscode-welcomePage-tileBackground: #1f2430;
+ --vscode-welcomePage-tileHoverBackground: #252b3a;
+ --vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+ --vscode-welcomePage-progress\.background: #1a1f29;
+ --vscode-welcomePage-progress\.foreground: #ffcc66;
+ --vscode-walkthrough-stepTitle\.foreground: #ffffff;
+ --vscode-walkThrough-embeddedEditorBackground: #1c212b;
+ --vscode-inlineChat-background: #1f2430;
+ --vscode-inlineChat-border: #171b24;
+ --vscode-inlineChat-shadow: rgba(18, 21, 28, 0.7);
+ --vscode-inlineChat-regionHighlight: rgba(38, 79, 120, 0.25);
+ --vscode-inlineChatInput-border: #171b24;
+ --vscode-inlineChatInput-focusBorder: rgba(255, 204, 102, 0.7);
+ --vscode-inlineChatInput-placeholderForeground: rgba(112, 122, 140, 0.5);
+ --vscode-inlineChatInput-background: #242936;
+ --vscode-inlineChatDiff-inserted: rgba(135, 217, 108, 0.06);
+ --vscode-inlineChatDiff-removed: rgba(242, 121, 131, 0.06);
+ --vscode-debugExceptionWidget-border: #171b24;
+ --vscode-debugExceptionWidget-background: #1c212b;
+ --vscode-ports-iconRunningProcessForeground: #ffcc66;
+ --vscode-statusBar-debuggingBackground: #f29e74;
+ --vscode-statusBar-debuggingForeground: #242936;
+ --vscode-statusBar-debuggingBorder: #171b24;
+ --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: rgba(128, 191, 255, 0.8);
+ --vscode-editorGutter-addedBackground: rgba(135, 217, 108, 0.8);
+ --vscode-editorGutter-deletedBackground: rgba(242, 121, 131, 0.8);
+ --vscode-minimapGutter-modifiedBackground: #80bfff;
+ --vscode-minimapGutter-addedBackground: #87d96c;
+ --vscode-minimapGutter-deletedBackground: #f27983;
+ --vscode-editorOverviewRuler-modifiedForeground: #80bfff;
+ --vscode-editorOverviewRuler-addedForeground: #87d96c;
+ --vscode-editorOverviewRuler-deletedForeground: #f27983;
+ --vscode-debugIcon-breakpointForeground: #f29e74;
+ --vscode-debugIcon-breakpointDisabledForeground: rgba(242, 158, 116, 0.5);
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: rgba(105, 117, 140, 0.12);
+ --vscode-notebook-focusedEditorBorder: rgba(255, 204, 102, 0.7);
+ --vscode-notebookStatusSuccessIcon-foreground: #89d185;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;
+ --vscode-notebookStatusErrorIcon-foreground: #ff6666;
+ --vscode-notebookStatusRunningIcon-foreground: #707a8c;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: rgba(105, 117, 140, 0.12);
+ --vscode-notebook-selectedCellBorder: rgba(105, 117, 140, 0.12);
+ --vscode-notebook-focusedCellBorder: rgba(255, 204, 102, 0.7);
+ --vscode-notebook-inactiveFocusedCellBorder: rgba(105, 117, 140, 0.12);
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+ --vscode-notebook-cellInsertionIndicator: rgba(255, 204, 102, 0.7);
+ --vscode-notebookScrollbarSlider-background: rgba(112, 122, 140, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(112, 122, 140, 0.6);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(112, 122, 140, 0.7);
+ --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-notebook-cellEditorBackground: #1f2430;
+ --vscode-notebook-editorBackground: #242936;
+ --vscode-keybindingTable-headerBackground: rgba(112, 122, 140, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(112, 122, 140, 0.04);
+ --vscode-searchEditor-textInputBorder: rgba(112, 122, 140, 0.27);
+ --vscode-debugTokenExpression-name: #c586c0;
+ --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+ --vscode-debugTokenExpression-string: #ce9178;
+ --vscode-debugTokenExpression-boolean: #4e94ce;
+ --vscode-debugTokenExpression-number: #b5cea8;
+ --vscode-debugTokenExpression-error: #f48771;
+ --vscode-debugView-exceptionLabelForeground: #707a8c;
+ --vscode-debugView-exceptionLabelBackground: #6c2022;
+ --vscode-debugView-stateLabelForeground: #707a8c;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #3794ff;
+ --vscode-debugConsole-warningForeground: #ffcc66;
+ --vscode-debugConsole-errorForeground: #ff6666;
+ --vscode-debugConsole-sourceForeground: #707a8c;
+ --vscode-debugConsoleInputIcon-foreground: #ffcc66;
+ --vscode-debugIcon-pauseForeground: #75beff;
+ --vscode-debugIcon-stopForeground: #f48771;
+ --vscode-debugIcon-disconnectForeground: #f48771;
+ --vscode-debugIcon-restartForeground: #89d185;
+ --vscode-debugIcon-stepOverForeground: #75beff;
+ --vscode-debugIcon-stepIntoForeground: #75beff;
+ --vscode-debugIcon-stepOutForeground: #75beff;
+ --vscode-debugIcon-continueForeground: #75beff;
+ --vscode-debugIcon-stepBackForeground: #75beff;
+ --vscode-scm-providerBorder: #454545;
+ --vscode-extensionButton-background: #ffcc66;
+ --vscode-extensionButton-foreground: #805500;
+ --vscode-extensionButton-hoverBackground: #fac761;
+ --vscode-extensionButton-separator: rgba(128, 85, 0, 0.4);
+ --vscode-extensionButton-prominentBackground: #ffcc66;
+ --vscode-extensionButton-prominentForeground: #805500;
+ --vscode-extensionButton-prominentHoverBackground: #fac761;
+ --vscode-extensionIcon-starForeground: #ff8e00;
+ --vscode-extensionIcon-verifiedForeground: #ffcc66;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #d758b3;
+ --vscode-terminal-ansiBlack: #171b24;
+ --vscode-terminal-ansiRed: #ed8274;
+ --vscode-terminal-ansiGreen: #87d96c;
+ --vscode-terminal-ansiYellow: #facc6e;
+ --vscode-terminal-ansiBlue: #6dcbfa;
+ --vscode-terminal-ansiMagenta: #dabafa;
+ --vscode-terminal-ansiCyan: #90e1c6;
+ --vscode-terminal-ansiWhite: #c7c7c7;
+ --vscode-terminal-ansiBrightBlack: #686868;
+ --vscode-terminal-ansiBrightRed: #f28779;
+ --vscode-terminal-ansiBrightGreen: #d5ff80;
+ --vscode-terminal-ansiBrightYellow: #ffd173;
+ --vscode-terminal-ansiBrightBlue: #73d0ff;
+ --vscode-terminal-ansiBrightMagenta: #dfbfff;
+ --vscode-terminal-ansiBrightCyan: #95e6cb;
+ --vscode-terminal-ansiBrightWhite: #ffffff;
+ --vscode-interactive-activeCodeBorder: rgba(99, 117, 153, 0.15);
+ --vscode-interactive-inactiveCodeBorder: rgba(105, 117, 140, 0.12);
+ --vscode-gitDecoration-addedResourceForeground: #81b88b;
+ --vscode-gitDecoration-modifiedResourceForeground: rgba(128, 191, 255, 0.7);
+ --vscode-gitDecoration-deletedResourceForeground: rgba(242, 121, 131, 0.7);
+ --vscode-gitDecoration-renamedResourceForeground: #73c991;
+ --vscode-gitDecoration-untrackedResourceForeground: rgba(135, 217, 108, 0.7);
+ --vscode-gitDecoration-ignoredResourceForeground: rgba(112, 122, 140, 0.5);
+ --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-conflictingResourceForeground: #ff0000;
+ --vscode-gitDecoration-submoduleResourceForeground: rgba(223, 191, 255, 0.7);
+}
diff --git a/mynah-ui/example/src/styles/themes/dark-dracula.scss b/mynah-ui/example/src/styles/themes/dark-dracula.scss
new file mode 100644
index 0000000000..6a47f156de
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/dark-dracula.scss
@@ -0,0 +1,617 @@
+html[theme='dark-dracula']:root {
+ --vscode-foreground: #f8f8f2;
+ --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
+ --vscode-errorForeground: #ff5555;
+ --vscode-descriptionForeground: rgba(248, 248, 242, 0.7);
+ --vscode-icon-foreground: #c5c5c5;
+ --vscode-focusBorder: #6272a4;
+ --vscode-selection-background: #bd93f9;
+ --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+ --vscode-textLink-foreground: #3794ff;
+ --vscode-textLink-activeForeground: #3794ff;
+ --vscode-textPreformat-foreground: #d7ba7d;
+ --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-input-background: #282a36;
+ --vscode-input-foreground: #f8f8f2;
+ --vscode-input-border: #191a21;
+ --vscode-inputOption-activeBorder: #bd93f9;
+ --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+ --vscode-inputOption-activeBackground: rgba(98, 114, 164, 0.4);
+ --vscode-inputOption-activeForeground: #ffffff;
+ --vscode-input-placeholderForeground: #6272a4;
+ --vscode-inputValidation-infoBackground: #063b49;
+ --vscode-inputValidation-infoBorder: #ff79c6;
+ --vscode-inputValidation-warningBackground: #352a05;
+ --vscode-inputValidation-warningBorder: #ffb86c;
+ --vscode-inputValidation-errorBackground: #5a1d1d;
+ --vscode-inputValidation-errorBorder: #ff5555;
+ --vscode-dropdown-background: #343746;
+ --vscode-dropdown-foreground: #f8f8f2;
+ --vscode-dropdown-border: #191a21;
+ --vscode-button-foreground: #f8f8f2;
+ --vscode-button-separator: rgba(248, 248, 242, 0.4);
+ --vscode-button-background: #44475a;
+ --vscode-button-hoverBackground: #52556c;
+ --vscode-button-secondaryForeground: #f8f8f2;
+ --vscode-button-secondaryBackground: #282a36;
+ --vscode-button-secondaryHoverBackground: #343746;
+ --vscode-badge-background: #44475a;
+ --vscode-badge-foreground: #f8f8f2;
+ --vscode-scrollbar-shadow: #000000;
+ --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-progressBar-background: #ff79c6;
+ --vscode-editorError-foreground: #ff5555;
+ --vscode-editorWarning-foreground: #8be9fd;
+ --vscode-editorInfo-foreground: #3794ff;
+ --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+ --vscode-sash-hoverBorder: #6272a4;
+ --vscode-editor-background: #282a36;
+ --vscode-editor-foreground: #f8f8f2;
+ --vscode-editorStickyScroll-background: #282a36;
+ --vscode-editorStickyScrollHover-background: #2a2d2e;
+ --vscode-editorWidget-background: #21222c;
+ --vscode-editorWidget-foreground: #f8f8f2;
+ --vscode-editorWidget-border: #454545;
+ --vscode-quickInput-background: #21222c;
+ --vscode-quickInput-foreground: #f8f8f2;
+ --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
+ --vscode-pickerGroup-foreground: #8be9fd;
+ --vscode-pickerGroup-border: #bd93f9;
+ --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
+ --vscode-keybindingLabel-foreground: #cccccc;
+ --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
+ --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+ --vscode-editor-selectionBackground: #44475a;
+ --vscode-editor-inactiveSelectionBackground: rgba(68, 71, 90, 0.5);
+ --vscode-editor-selectionHighlightBackground: #424450;
+ --vscode-editor-findMatchBackground: rgba(255, 184, 108, 0.5);
+ --vscode-editor-findMatchHighlightBackground: rgba(255, 255, 255, 0.25);
+ --vscode-editor-findRangeHighlightBackground: rgba(68, 71, 90, 0.46);
+ --vscode-searchEditor-findMatchBackground: rgba(255, 255, 255, 0.17);
+ --vscode-search-resultsInfoForeground: rgba(248, 248, 242, 0.65);
+ --vscode-editor-hoverHighlightBackground: rgba(139, 233, 253, 0.31);
+ --vscode-editorHoverWidget-background: #282a36;
+ --vscode-editorHoverWidget-foreground: #f8f8f2;
+ --vscode-editorHoverWidget-border: #6272a4;
+ --vscode-editorHoverWidget-statusBarBackground: #303241;
+ --vscode-editorLink-activeForeground: #8be9fd;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(68, 71, 90, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(68, 71, 90, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(68, 71, 90, 0.1);
+ --vscode-editorLightBulb-foreground: #ffcc00;
+ --vscode-editorLightBulbAutoFix-foreground: #75beff;
+ --vscode-diffEditor-insertedTextBackground: rgba(80, 250, 123, 0.13);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 85, 85, 0.31);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #3e3e3e;
+ --vscode-diffEditor-unchangedRegionForeground: #a3a2a2;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);
+ --vscode-list-focusBackground: rgba(68, 71, 90, 0.46);
+ --vscode-list-focusOutline: #6272a4;
+ --vscode-list-activeSelectionBackground: #44475a;
+ --vscode-list-activeSelectionForeground: #f8f8f2;
+ --vscode-list-inactiveSelectionBackground: rgba(68, 71, 90, 0.46);
+ --vscode-list-hoverBackground: rgba(68, 71, 90, 0.46);
+ --vscode-list-dropBackground: #44475a;
+ --vscode-list-highlightForeground: #8be9fd;
+ --vscode-list-focusHighlightForeground: #8be9fd;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #ff5555;
+ --vscode-list-warningForeground: #ffb86c;
+ --vscode-listFilterWidget-background: #343746;
+ --vscode-listFilterWidget-outline: #424450;
+ --vscode-listFilterWidget-noMatchesOutline: #ff5555;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-list-filterMatchBackground: rgba(255, 255, 255, 0.25);
+ --vscode-tree-indentGuidesStroke: #585858;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(88, 88, 88, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(248, 248, 242, 0.04);
+ --vscode-list-deemphasizedForeground: #8c8c8c;
+ --vscode-checkbox-background: #343746;
+ --vscode-checkbox-selectBackground: #21222c;
+ --vscode-checkbox-foreground: #f8f8f2;
+ --vscode-checkbox-border: #191a21;
+ --vscode-checkbox-selectBorder: #c5c5c5;
+ --vscode-quickInputList-focusForeground: #f8f8f2;
+ --vscode-quickInputList-focusBackground: #44475a;
+ --vscode-menu-foreground: #f8f8f2;
+ --vscode-menu-background: #343746;
+ --vscode-menu-selectionForeground: #f8f8f2;
+ --vscode-menu-selectionBackground: #44475a;
+ --vscode-menu-separatorBackground: #606060;
+ --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+ --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: #282a36;
+ --vscode-editor-snippetTabstopHighlightBorder: #6272a4;
+ --vscode-editor-snippetFinalTabstopHighlightBackground: #282a36;
+ --vscode-editor-snippetFinalTabstopHighlightBorder: #50fa7b;
+ --vscode-breadcrumb-foreground: #6272a4;
+ --vscode-breadcrumb-background: #282a36;
+ --vscode-breadcrumb-focusForeground: #f8f8f2;
+ --vscode-breadcrumb-activeSelectionForeground: #f8f8f2;
+ --vscode-breadcrumbPicker-background: #191a21;
+ --vscode-merge-currentHeaderBackground: rgba(80, 250, 123, 0.56);
+ --vscode-merge-currentContentBackground: rgba(80, 250, 123, 0.23);
+ --vscode-merge-incomingHeaderBackground: rgba(189, 147, 249, 0.56);
+ --vscode-merge-incomingContentBackground: rgba(189, 147, 249, 0.23);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: #50fa7b;
+ --vscode-editorOverviewRuler-incomingContentForeground: #bd93f9;
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: #ffb86c;
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #676767;
+ --vscode-minimap-selectionHighlight: #264f78;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #8be9fd;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);
+ --vscode-problemsErrorIcon-foreground: #ff5555;
+ --vscode-problemsWarningIcon-foreground: #8be9fd;
+ --vscode-problemsInfoIcon-foreground: #3794ff;
+ --vscode-charts-foreground: #f8f8f2;
+ --vscode-charts-lines: rgba(248, 248, 242, 0.5);
+ --vscode-charts-red: #ff5555;
+ --vscode-charts-blue: #3794ff;
+ --vscode-charts-yellow: #8be9fd;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #89d185;
+ --vscode-charts-purple: #b180d7;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #f8f8f2;
+ --vscode-symbolIcon-booleanForeground: #f8f8f2;
+ --vscode-symbolIcon-classForeground: #ee9d28;
+ --vscode-symbolIcon-colorForeground: #f8f8f2;
+ --vscode-symbolIcon-constantForeground: #f8f8f2;
+ --vscode-symbolIcon-constructorForeground: #b180d7;
+ --vscode-symbolIcon-enumeratorForeground: #ee9d28;
+ --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
+ --vscode-symbolIcon-eventForeground: #ee9d28;
+ --vscode-symbolIcon-fieldForeground: #75beff;
+ --vscode-symbolIcon-fileForeground: #f8f8f2;
+ --vscode-symbolIcon-folderForeground: #f8f8f2;
+ --vscode-symbolIcon-functionForeground: #b180d7;
+ --vscode-symbolIcon-interfaceForeground: #75beff;
+ --vscode-symbolIcon-keyForeground: #f8f8f2;
+ --vscode-symbolIcon-keywordForeground: #f8f8f2;
+ --vscode-symbolIcon-methodForeground: #b180d7;
+ --vscode-symbolIcon-moduleForeground: #f8f8f2;
+ --vscode-symbolIcon-namespaceForeground: #f8f8f2;
+ --vscode-symbolIcon-nullForeground: #f8f8f2;
+ --vscode-symbolIcon-numberForeground: #f8f8f2;
+ --vscode-symbolIcon-objectForeground: #f8f8f2;
+ --vscode-symbolIcon-operatorForeground: #f8f8f2;
+ --vscode-symbolIcon-packageForeground: #f8f8f2;
+ --vscode-symbolIcon-propertyForeground: #f8f8f2;
+ --vscode-symbolIcon-referenceForeground: #f8f8f2;
+ --vscode-symbolIcon-snippetForeground: #f8f8f2;
+ --vscode-symbolIcon-stringForeground: #f8f8f2;
+ --vscode-symbolIcon-structForeground: #f8f8f2;
+ --vscode-symbolIcon-textForeground: #f8f8f2;
+ --vscode-symbolIcon-typeParameterForeground: #f8f8f2;
+ --vscode-symbolIcon-unitForeground: #f8f8f2;
+ --vscode-symbolIcon-variableForeground: #75beff;
+ --vscode-actionBar-toggledBackground: rgba(98, 114, 164, 0.4);
+ --vscode-editorHoverWidget-highlightForeground: #8be9fd;
+ --vscode-editor-lineHighlightBorder: #44475a;
+ --vscode-editor-rangeHighlightBackground: rgba(189, 147, 249, 0.08);
+ --vscode-editor-symbolHighlightBackground: rgba(255, 255, 255, 0.25);
+ --vscode-editorCursor-foreground: #aeafad;
+ --vscode-editorWhitespace-foreground: rgba(255, 255, 255, 0.1);
+ --vscode-editorLineNumber-foreground: #6272a4;
+ --vscode-editorIndentGuide-background: rgba(255, 255, 255, 0.1);
+ --vscode-editorIndentGuide-activeBackground: rgba(255, 255, 255, 0.27);
+ --vscode-editorIndentGuide-background1: rgba(255, 255, 255, 0.1);
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: rgba(255, 255, 255, 0.27);
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+ --vscode-editorLineNumber-activeForeground: #c6c6c6;
+ --vscode-editorRuler-foreground: rgba(255, 255, 255, 0.1);
+ --vscode-editorCodeLens-foreground: #6272a4;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #888888;
+ --vscode-editorOverviewRuler-border: #191a21;
+ --vscode-editorGutter-background: #282a36;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+ --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 85, 85, 0.5);
+ --vscode-editorOverviewRuler-warningForeground: rgba(255, 184, 108, 0.5);
+ --vscode-editorOverviewRuler-infoForeground: rgba(139, 233, 253, 0.5);
+ --vscode-editorBracketHighlight-foreground1: #f8f8f2;
+ --vscode-editorBracketHighlight-foreground2: #ff79c6;
+ --vscode-editorBracketHighlight-foreground3: #8be9fd;
+ --vscode-editorBracketHighlight-foreground4: #50fa7b;
+ --vscode-editorBracketHighlight-foreground5: #bd93f9;
+ --vscode-editorBracketHighlight-foreground6: #ffb86c;
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: #ff5555;
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #bd9b03;
+ --vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(33, 34, 44, 0.5);
+ --vscode-editorGutter-foldingControlForeground: #c5c5c5;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(139, 233, 253, 0.31);
+ --vscode-editor-wordHighlightStrongBackground: rgba(80, 250, 123, 0.31);
+ --vscode-editor-wordHighlightTextBackground: rgba(139, 233, 253, 0.31);
+ --vscode-editorOverviewRuler-wordHighlightForeground: #8be9fd;
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: #50fa7b;
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: #ffb86c;
+ --vscode-peekViewTitle-background: #191a21;
+ --vscode-peekViewTitleLabel-foreground: #f8f8f2;
+ --vscode-peekViewTitleDescription-foreground: #6272a4;
+ --vscode-peekView-border: #44475a;
+ --vscode-peekViewResult-background: #21222c;
+ --vscode-peekViewResult-lineForeground: #f8f8f2;
+ --vscode-peekViewResult-fileForeground: #f8f8f2;
+ --vscode-peekViewResult-selectionBackground: #44475a;
+ --vscode-peekViewResult-selectionForeground: #f8f8f2;
+ --vscode-peekViewEditor-background: #282a36;
+ --vscode-peekViewEditorGutter-background: #282a36;
+ --vscode-peekViewEditorStickyScroll-background: #282a36;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(241, 250, 140, 0.5);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(241, 250, 140, 0.5);
+ --vscode-editorMarkerNavigationError-background: #ff5555;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(255, 85, 85, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #8be9fd;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(139, 233, 253, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #3794ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #21222c;
+ --vscode-editorSuggestWidget-background: #21222c;
+ --vscode-editorSuggestWidget-border: #454545;
+ --vscode-editorSuggestWidget-foreground: #f8f8f2;
+ --vscode-editorSuggestWidget-selectedForeground: #f8f8f2;
+ --vscode-editorSuggestWidget-selectedBackground: #44475a;
+ --vscode-editorSuggestWidget-highlightForeground: #8be9fd;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #8be9fd;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(248, 248, 242, 0.5);
+ --vscode-tab-activeBackground: #282a36;
+ --vscode-tab-unfocusedActiveBackground: #282a36;
+ --vscode-tab-inactiveBackground: #21222c;
+ --vscode-tab-unfocusedInactiveBackground: #21222c;
+ --vscode-tab-activeForeground: #f8f8f2;
+ --vscode-tab-inactiveForeground: #6272a4;
+ --vscode-tab-unfocusedActiveForeground: rgba(248, 248, 242, 0.5);
+ --vscode-tab-unfocusedInactiveForeground: rgba(98, 114, 164, 0.5);
+ --vscode-tab-border: #191a21;
+ --vscode-tab-lastPinnedBorder: #585858;
+ --vscode-tab-activeBorderTop: rgba(255, 121, 198, 0.5);
+ --vscode-tab-unfocusedActiveBorderTop: rgba(255, 121, 198, 0.25);
+ --vscode-tab-activeModifiedBorder: #3399cc;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+ --vscode-editorPane-background: #282a36;
+ --vscode-editorGroupHeader-tabsBackground: #191a21;
+ --vscode-editorGroupHeader-noTabsBackground: #282a36;
+ --vscode-editorGroup-border: #bd93f9;
+ --vscode-editorGroup-dropBackground: rgba(68, 71, 90, 0.44);
+ --vscode-editorGroup-dropIntoPromptForeground: #f8f8f2;
+ --vscode-editorGroup-dropIntoPromptBackground: #21222c;
+ --vscode-sideBySideEditor-horizontalBorder: #bd93f9;
+ --vscode-sideBySideEditor-verticalBorder: #bd93f9;
+ --vscode-panel-background: #282a36;
+ --vscode-panel-border: #bd93f9;
+ --vscode-panelTitle-activeForeground: #f8f8f2;
+ --vscode-panelTitle-inactiveForeground: #6272a4;
+ --vscode-panelTitle-activeBorder: #ff79c6;
+ --vscode-panelInput-border: #191a21;
+ --vscode-panel-dropBorder: #f8f8f2;
+ --vscode-panelSection-dropBackground: rgba(68, 71, 90, 0.44);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: #bd93f9;
+ --vscode-banner-background: #44475a;
+ --vscode-banner-foreground: #f8f8f2;
+ --vscode-banner-iconForeground: #3794ff;
+ --vscode-statusBar-foreground: #f8f8f2;
+ --vscode-statusBar-noFolderForeground: #f8f8f2;
+ --vscode-statusBar-background: #191a21;
+ --vscode-statusBar-noFolderBackground: #191a21;
+ --vscode-statusBar-focusBorder: #f8f8f2;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #f8f8f2;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #f8f8f2;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #f8f8f2;
+ --vscode-statusBarItem-prominentBackground: #ff5555;
+ --vscode-statusBarItem-prominentHoverForeground: #f8f8f2;
+ --vscode-statusBarItem-prominentHoverBackground: #ffb86c;
+ --vscode-statusBarItem-errorBackground: #cc0000;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #f8f8f2;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #04bde7;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #f8f8f2;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #343746;
+ --vscode-activityBar-foreground: #f8f8f2;
+ --vscode-activityBar-inactiveForeground: #6272a4;
+ --vscode-activityBar-activeBorder: rgba(255, 121, 198, 0.5);
+ --vscode-activityBar-activeBackground: rgba(189, 147, 249, 0.06);
+ --vscode-activityBar-dropBorder: #f8f8f2;
+ --vscode-activityBarBadge-background: #ff79c6;
+ --vscode-activityBarBadge-foreground: #f8f8f2;
+ --vscode-profileBadge-background: #4d4d4d;
+ --vscode-profileBadge-foreground: #ffffff;
+ --vscode-statusBarItem-remoteBackground: #bd93f9;
+ --vscode-statusBarItem-remoteForeground: #282a36;
+ --vscode-statusBarItem-remoteHoverForeground: #f8f8f2;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #282a36;
+ --vscode-statusBarItem-offlineHoverForeground: #f8f8f2;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #ff79c6;
+ --vscode-extensionBadge-remoteForeground: #f8f8f2;
+ --vscode-sideBar-background: #21222c;
+ --vscode-sideBarTitle-foreground: #f8f8f2;
+ --vscode-sideBar-dropBackground: rgba(68, 71, 90, 0.44);
+ --vscode-sideBarSectionHeader-background: #282a36;
+ --vscode-sideBarSectionHeader-border: #191a21;
+ --vscode-titleBar-activeForeground: #f8f8f2;
+ --vscode-titleBar-inactiveForeground: #6272a4;
+ --vscode-titleBar-activeBackground: #21222c;
+ --vscode-titleBar-inactiveBackground: #191a21;
+ --vscode-menubar-selectionForeground: #f8f8f2;
+ --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+ --vscode-notifications-foreground: #f8f8f2;
+ --vscode-notifications-background: #21222c;
+ --vscode-notificationLink-foreground: #3794ff;
+ --vscode-notificationCenterHeader-background: #2b2c39;
+ --vscode-notifications-border: #2b2c39;
+ --vscode-notificationsErrorIcon-foreground: #ff5555;
+ --vscode-notificationsWarningIcon-foreground: #8be9fd;
+ --vscode-notificationsInfoIcon-foreground: #3794ff;
+ --vscode-commandCenter-foreground: #f8f8f2;
+ --vscode-commandCenter-activeForeground: #f8f8f2;
+ --vscode-commandCenter-inactiveForeground: #6272a4;
+ --vscode-commandCenter-background: rgba(255, 255, 255, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+ --vscode-commandCenter-border: rgba(248, 248, 242, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(248, 248, 242, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(98, 114, 164, 0.25);
+ --vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);
+ --vscode-chat-slashCommandBackground: #44475a;
+ --vscode-chat-slashCommandForeground: #f8f8f2;
+ --vscode-simpleFindWidget-sashBorder: #454545;
+ --vscode-commentsView-resolvedIcon: rgba(204, 204, 204, 0.5);
+ --vscode-commentsView-unresolvedIcon: #6272a4;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #6272a4;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(98, 114, 164, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(98, 114, 164, 0.1);
+ --vscode-editorGutter-commentRangeForeground: #343746;
+ --vscode-editorOverviewRuler-commentForeground: #343746;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #343746;
+ --vscode-editorGutter-commentGlyphForeground: #f8f8f2;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #f8f8f2;
+ --vscode-debugToolBar-background: #21222c;
+ --vscode-debugIcon-startForeground: #89d185;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
+ --vscode-mergeEditor-changeBase\.background: #4b1818;
+ --vscode-mergeEditor-changeBase\.word\.background: #6f1313;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, 0.48);
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(80, 250, 123, 0.23);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(189, 147, 249, 0.23);
+ --vscode-settings-headerForeground: #f8f8f2;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(248, 248, 242, 0.7);
+ --vscode-settings-modifiedItemIndicator: #ffb86c;
+ --vscode-settings-headerBorder: #bd93f9;
+ --vscode-settings-sashBorder: #bd93f9;
+ --vscode-settings-dropdownBackground: #21222c;
+ --vscode-settings-dropdownForeground: #f8f8f2;
+ --vscode-settings-dropdownBorder: #191a21;
+ --vscode-settings-dropdownListBorder: #454545;
+ --vscode-settings-checkboxBackground: #21222c;
+ --vscode-settings-checkboxForeground: #f8f8f2;
+ --vscode-settings-checkboxBorder: #191a21;
+ --vscode-settings-textInputBackground: #21222c;
+ --vscode-settings-textInputForeground: #f8f8f2;
+ --vscode-settings-textInputBorder: #191a21;
+ --vscode-settings-numberInputBackground: #21222c;
+ --vscode-settings-numberInputForeground: #f8f8f2;
+ --vscode-settings-numberInputBorder: #191a21;
+ --vscode-settings-focusedRowBackground: rgba(68, 71, 90, 0.28);
+ --vscode-settings-rowHoverBackground: rgba(68, 71, 90, 0.14);
+ --vscode-settings-focusedRowBorder: #6272a4;
+ --vscode-terminal-background: #282a36;
+ --vscode-terminal-foreground: #f8f8f2;
+ --vscode-terminal-selectionBackground: #44475a;
+ --vscode-terminal-inactiveSelectionBackground: rgba(68, 71, 90, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #1b81a8;
+ --vscode-terminalCommandDecoration-errorBackground: #f14c4c;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: #bd93f9;
+ --vscode-terminal-findMatchBackground: rgba(255, 184, 108, 0.5);
+ --vscode-terminal-hoverHighlightBackground: rgba(139, 233, 253, 0.16);
+ --vscode-terminal-findMatchHighlightBackground: rgba(255, 255, 255, 0.25);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(68, 71, 90, 0.44);
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #ff5555;
+ --vscode-testing-peekHeaderBackground: rgba(255, 85, 85, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #ff5555;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(248, 248, 242, 0.5);
+ --vscode-welcomePage-tileBackground: #21222c;
+ --vscode-welcomePage-tileHoverBackground: #282935;
+ --vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+ --vscode-welcomePage-progress\.background: #282a36;
+ --vscode-welcomePage-progress\.foreground: #3794ff;
+ --vscode-walkthrough-stepTitle\.foreground: #ffffff;
+ --vscode-walkThrough-embeddedEditorBackground: #21222c;
+ --vscode-inlineChat-background: #21222c;
+ --vscode-inlineChat-border: #454545;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-inlineChat-regionHighlight: #343746;
+ --vscode-inlineChatInput-border: #454545;
+ --vscode-inlineChatInput-focusBorder: #6272a4;
+ --vscode-inlineChatInput-placeholderForeground: #6272a4;
+ --vscode-inlineChatInput-background: #282a36;
+ --vscode-inlineChatDiff-inserted: rgba(80, 250, 123, 0.06);
+ --vscode-inlineChatDiff-removed: rgba(255, 85, 85, 0.16);
+ --vscode-debugExceptionWidget-border: #a31515;
+ --vscode-debugExceptionWidget-background: #420b0d;
+ --vscode-ports-iconRunningProcessForeground: #bd93f9;
+ --vscode-statusBar-debuggingBackground: #ff5555;
+ --vscode-statusBar-debuggingForeground: #191a21;
+ --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: rgba(139, 233, 253, 0.5);
+ --vscode-editorGutter-addedBackground: rgba(80, 250, 123, 0.5);
+ --vscode-editorGutter-deletedBackground: rgba(255, 85, 85, 0.5);
+ --vscode-minimapGutter-modifiedBackground: rgba(139, 233, 253, 0.5);
+ --vscode-minimapGutter-addedBackground: rgba(80, 250, 123, 0.5);
+ --vscode-minimapGutter-deletedBackground: rgba(255, 85, 85, 0.5);
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(139, 233, 253, 0.5);
+ --vscode-editorOverviewRuler-addedForeground: rgba(80, 250, 123, 0.5);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(255, 85, 85, 0.5);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: rgba(68, 71, 90, 0.46);
+ --vscode-notebook-focusedEditorBorder: #6272a4;
+ --vscode-notebookStatusSuccessIcon-foreground: #89d185;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;
+ --vscode-notebookStatusErrorIcon-foreground: #ff5555;
+ --vscode-notebookStatusRunningIcon-foreground: #f8f8f2;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: rgba(68, 71, 90, 0.46);
+ --vscode-notebook-selectedCellBorder: rgba(68, 71, 90, 0.46);
+ --vscode-notebook-focusedCellBorder: #6272a4;
+ --vscode-notebook-inactiveFocusedCellBorder: rgba(68, 71, 90, 0.46);
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+ --vscode-notebook-cellInsertionIndicator: #6272a4;
+ --vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-notebook-cellEditorBackground: #21222c;
+ --vscode-notebook-editorBackground: #282a36;
+ --vscode-keybindingTable-headerBackground: rgba(248, 248, 242, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(248, 248, 242, 0.04);
+ --vscode-searchEditor-textInputBorder: #191a21;
+ --vscode-debugTokenExpression-name: #c586c0;
+ --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+ --vscode-debugTokenExpression-string: #ce9178;
+ --vscode-debugTokenExpression-boolean: #4e94ce;
+ --vscode-debugTokenExpression-number: #b5cea8;
+ --vscode-debugTokenExpression-error: #f48771;
+ --vscode-debugView-exceptionLabelForeground: #f8f8f2;
+ --vscode-debugView-exceptionLabelBackground: #6c2022;
+ --vscode-debugView-stateLabelForeground: #f8f8f2;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #3794ff;
+ --vscode-debugConsole-warningForeground: #8be9fd;
+ --vscode-debugConsole-errorForeground: #ff5555;
+ --vscode-debugConsole-sourceForeground: #f8f8f2;
+ --vscode-debugConsoleInputIcon-foreground: #f8f8f2;
+ --vscode-debugIcon-pauseForeground: #75beff;
+ --vscode-debugIcon-stopForeground: #f48771;
+ --vscode-debugIcon-disconnectForeground: #f48771;
+ --vscode-debugIcon-restartForeground: #89d185;
+ --vscode-debugIcon-stepOverForeground: #75beff;
+ --vscode-debugIcon-stepIntoForeground: #75beff;
+ --vscode-debugIcon-stepOutForeground: #75beff;
+ --vscode-debugIcon-continueForeground: #75beff;
+ --vscode-debugIcon-stepBackForeground: #75beff;
+ --vscode-scm-providerBorder: #454545;
+ --vscode-extensionButton-background: #44475a;
+ --vscode-extensionButton-foreground: #f8f8f2;
+ --vscode-extensionButton-hoverBackground: #52556c;
+ --vscode-extensionButton-separator: rgba(248, 248, 242, 0.4);
+ --vscode-extensionButton-prominentBackground: rgba(80, 250, 123, 0.56);
+ --vscode-extensionButton-prominentForeground: #f8f8f2;
+ --vscode-extensionButton-prominentHoverBackground: rgba(80, 250, 123, 0.38);
+ --vscode-extensionIcon-starForeground: #ff8e00;
+ --vscode-extensionIcon-verifiedForeground: #3794ff;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #d758b3;
+ --vscode-terminal-ansiBlack: #21222c;
+ --vscode-terminal-ansiRed: #ff5555;
+ --vscode-terminal-ansiGreen: #50fa7b;
+ --vscode-terminal-ansiYellow: #f1fa8c;
+ --vscode-terminal-ansiBlue: #bd93f9;
+ --vscode-terminal-ansiMagenta: #ff79c6;
+ --vscode-terminal-ansiCyan: #8be9fd;
+ --vscode-terminal-ansiWhite: #f8f8f2;
+ --vscode-terminal-ansiBrightBlack: #6272a4;
+ --vscode-terminal-ansiBrightRed: #ff6e6e;
+ --vscode-terminal-ansiBrightGreen: #69ff94;
+ --vscode-terminal-ansiBrightYellow: #ffffa5;
+ --vscode-terminal-ansiBrightBlue: #d6acff;
+ --vscode-terminal-ansiBrightMagenta: #ff92df;
+ --vscode-terminal-ansiBrightCyan: #a4ffff;
+ --vscode-terminal-ansiBrightWhite: #ffffff;
+ --vscode-interactive-activeCodeBorder: #44475a;
+ --vscode-interactive-inactiveCodeBorder: rgba(68, 71, 90, 0.46);
+ --vscode-gitDecoration-addedResourceForeground: #81b88b;
+ --vscode-gitDecoration-modifiedResourceForeground: #8be9fd;
+ --vscode-gitDecoration-deletedResourceForeground: #ff5555;
+ --vscode-gitDecoration-renamedResourceForeground: #73c991;
+ --vscode-gitDecoration-untrackedResourceForeground: #50fa7b;
+ --vscode-gitDecoration-ignoredResourceForeground: #6272a4;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-conflictingResourceForeground: #ffb86c;
+ --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+}
diff --git a/mynah-ui/example/src/styles/themes/dark-plus.scss b/mynah-ui/example/src/styles/themes/dark-plus.scss
new file mode 100644
index 0000000000..b620426745
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/dark-plus.scss
@@ -0,0 +1,611 @@
+html[theme='dark-plus']:root {
+ --vscode-foreground: #cccccc;
+ --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
+ --vscode-errorForeground: #f48771;
+ --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
+ --vscode-icon-foreground: #c5c5c5;
+ --vscode-focusBorder: #007fd4;
+ --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+ --vscode-textLink-foreground: #3794ff;
+ --vscode-textLink-activeForeground: #3794ff;
+ --vscode-textPreformat-foreground: #d7ba7d;
+ --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-widget-border: #303031;
+ --vscode-input-background: #3c3c3c;
+ --vscode-input-foreground: #cccccc;
+ --vscode-inputOption-activeBorder: #007acc;
+ --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+ --vscode-inputOption-activeBackground: rgba(0, 127, 212, 0.4);
+ --vscode-inputOption-activeForeground: #ffffff;
+ --vscode-input-placeholderForeground: #a6a6a6;
+ --vscode-inputValidation-infoBackground: #063b49;
+ --vscode-inputValidation-infoBorder: #007acc;
+ --vscode-inputValidation-warningBackground: #352a05;
+ --vscode-inputValidation-warningBorder: #b89500;
+ --vscode-inputValidation-errorBackground: #5a1d1d;
+ --vscode-inputValidation-errorBorder: #be1100;
+ --vscode-dropdown-background: #3c3c3c;
+ --vscode-dropdown-foreground: #f0f0f0;
+ --vscode-dropdown-border: #3c3c3c;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #0e639c;
+ --vscode-button-hoverBackground: #1177bb;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #3a3d41;
+ --vscode-button-secondaryHoverBackground: #45494e;
+ --vscode-badge-background: #4d4d4d;
+ --vscode-badge-foreground: #ffffff;
+ --vscode-scrollbar-shadow: #000000;
+ --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-progressBar-background: #0e70c0;
+ --vscode-editorError-foreground: #f14c4c;
+ --vscode-editorWarning-foreground: #cca700;
+ --vscode-editorInfo-foreground: #3794ff;
+ --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+ --vscode-sash-hoverBorder: #007fd4;
+ --vscode-editor-background: #1e1e1e;
+ --vscode-editor-foreground: #d4d4d4;
+ --vscode-editorStickyScroll-background: #1e1e1e;
+ --vscode-editorStickyScrollHover-background: #2a2d2e;
+ --vscode-editorWidget-background: #252526;
+ --vscode-editorWidget-foreground: #cccccc;
+ --vscode-editorWidget-border: #454545;
+ --vscode-quickInput-background: #252526;
+ --vscode-quickInput-foreground: #cccccc;
+ --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
+ --vscode-pickerGroup-foreground: #3794ff;
+ --vscode-pickerGroup-border: #3f3f46;
+ --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
+ --vscode-keybindingLabel-foreground: #cccccc;
+ --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
+ --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+ --vscode-editor-selectionBackground: #264f78;
+ --vscode-editor-inactiveSelectionBackground: #3a3d41;
+ --vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);
+ --vscode-editor-findMatchBackground: #515c6a;
+ --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+ --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
+ --vscode-search-resultsInfoForeground: rgba(204, 204, 204, 0.65);
+ --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+ --vscode-editorHoverWidget-background: #252526;
+ --vscode-editorHoverWidget-foreground: #cccccc;
+ --vscode-editorHoverWidget-border: #454545;
+ --vscode-editorHoverWidget-statusBarBackground: #2c2c2d;
+ --vscode-editorLink-activeForeground: #4e94ce;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(77, 77, 77, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.1);
+ --vscode-editorLightBulb-foreground: #ffcc00;
+ --vscode-editorLightBulbAutoFix-foreground: #75beff;
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.2);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #3e3e3e;
+ --vscode-diffEditor-unchangedRegionForeground: #a3a2a2;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);
+ --vscode-list-focusOutline: #007fd4;
+ --vscode-list-activeSelectionBackground: #04395e;
+ --vscode-list-activeSelectionForeground: #ffffff;
+ --vscode-list-activeSelectionIconForeground: #ffffff;
+ --vscode-list-inactiveSelectionBackground: #37373d;
+ --vscode-list-hoverBackground: #2a2d2e;
+ --vscode-list-dropBackground: #383b3d;
+ --vscode-list-highlightForeground: #2aaaff;
+ --vscode-list-focusHighlightForeground: #2aaaff;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #f88070;
+ --vscode-list-warningForeground: #cca700;
+ --vscode-listFilterWidget-background: #252526;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
+ --vscode-tree-indentGuidesStroke: #585858;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(88, 88, 88, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-list-deemphasizedForeground: #8c8c8c;
+ --vscode-checkbox-background: #3c3c3c;
+ --vscode-checkbox-selectBackground: #252526;
+ --vscode-checkbox-foreground: #f0f0f0;
+ --vscode-checkbox-border: #6b6b6b;
+ --vscode-checkbox-selectBorder: #c5c5c5;
+ --vscode-quickInputList-focusForeground: #ffffff;
+ --vscode-quickInputList-focusIconForeground: #ffffff;
+ --vscode-quickInputList-focusBackground: #04395e;
+ --vscode-menu-border: #454545;
+ --vscode-menu-foreground: #cccccc;
+ --vscode-menu-background: #252526;
+ --vscode-menu-selectionForeground: #ffffff;
+ --vscode-menu-selectionBackground: #04395e;
+ --vscode-menu-separatorBackground: #454545;
+ --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+ --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+ --vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
+ --vscode-breadcrumb-background: #1e1e1e;
+ --vscode-breadcrumb-focusForeground: #e0e0e0;
+ --vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
+ --vscode-breadcrumbPicker-background: #252526;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #676767;
+ --vscode-minimap-selectionHighlight: #264f78;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #cca700;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);
+ --vscode-problemsErrorIcon-foreground: #f14c4c;
+ --vscode-problemsWarningIcon-foreground: #cca700;
+ --vscode-problemsInfoIcon-foreground: #3794ff;
+ --vscode-charts-foreground: #cccccc;
+ --vscode-charts-lines: rgba(204, 204, 204, 0.5);
+ --vscode-charts-red: #f14c4c;
+ --vscode-charts-blue: #3794ff;
+ --vscode-charts-yellow: #cca700;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #89d185;
+ --vscode-charts-purple: #b180d7;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #cccccc;
+ --vscode-symbolIcon-booleanForeground: #cccccc;
+ --vscode-symbolIcon-classForeground: #ee9d28;
+ --vscode-symbolIcon-colorForeground: #cccccc;
+ --vscode-symbolIcon-constantForeground: #cccccc;
+ --vscode-symbolIcon-constructorForeground: #b180d7;
+ --vscode-symbolIcon-enumeratorForeground: #ee9d28;
+ --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
+ --vscode-symbolIcon-eventForeground: #ee9d28;
+ --vscode-symbolIcon-fieldForeground: #75beff;
+ --vscode-symbolIcon-fileForeground: #cccccc;
+ --vscode-symbolIcon-folderForeground: #cccccc;
+ --vscode-symbolIcon-functionForeground: #b180d7;
+ --vscode-symbolIcon-interfaceForeground: #75beff;
+ --vscode-symbolIcon-keyForeground: #cccccc;
+ --vscode-symbolIcon-keywordForeground: #cccccc;
+ --vscode-symbolIcon-methodForeground: #b180d7;
+ --vscode-symbolIcon-moduleForeground: #cccccc;
+ --vscode-symbolIcon-namespaceForeground: #cccccc;
+ --vscode-symbolIcon-nullForeground: #cccccc;
+ --vscode-symbolIcon-numberForeground: #cccccc;
+ --vscode-symbolIcon-objectForeground: #cccccc;
+ --vscode-symbolIcon-operatorForeground: #cccccc;
+ --vscode-symbolIcon-packageForeground: #cccccc;
+ --vscode-symbolIcon-propertyForeground: #cccccc;
+ --vscode-symbolIcon-referenceForeground: #cccccc;
+ --vscode-symbolIcon-snippetForeground: #cccccc;
+ --vscode-symbolIcon-stringForeground: #cccccc;
+ --vscode-symbolIcon-structForeground: #cccccc;
+ --vscode-symbolIcon-textForeground: #cccccc;
+ --vscode-symbolIcon-typeParameterForeground: #cccccc;
+ --vscode-symbolIcon-unitForeground: #cccccc;
+ --vscode-symbolIcon-variableForeground: #75beff;
+ --vscode-actionBar-toggledBackground: #383a49;
+ --vscode-editorHoverWidget-highlightForeground: #2aaaff;
+ --vscode-editor-lineHighlightBorder: #282828;
+ --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editorCursor-foreground: #aeafad;
+ --vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16);
+ --vscode-editorLineNumber-foreground: #858585;
+ --vscode-editorIndentGuide-background: #404040;
+ --vscode-editorIndentGuide-activeBackground: #707070;
+ --vscode-editorIndentGuide-background1: #404040;
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: #707070;
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+ --vscode-editorLineNumber-activeForeground: #c6c6c6;
+ --vscode-editorRuler-foreground: #5a5a5a;
+ --vscode-editorCodeLens-foreground: #999999;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #888888;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #1e1e1e;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+ --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #cca700;
+ --vscode-editorOverviewRuler-infoForeground: #3794ff;
+ --vscode-editorBracketHighlight-foreground1: #ffd700;
+ --vscode-editorBracketHighlight-foreground2: #da70d6;
+ --vscode-editorBracketHighlight-foreground3: #179fff;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #bd9b03;
+ --vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(38, 79, 120, 0.3);
+ --vscode-editorGutter-foldingControlForeground: #c5c5c5;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
+ --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.72);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: #252526;
+ --vscode-peekViewTitleLabel-foreground: #ffffff;
+ --vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
+ --vscode-peekView-border: #3794ff;
+ --vscode-peekViewResult-background: #252526;
+ --vscode-peekViewResult-lineForeground: #bbbbbb;
+ --vscode-peekViewResult-fileForeground: #ffffff;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #ffffff;
+ --vscode-peekViewEditor-background: #001f33;
+ --vscode-peekViewEditorGutter-background: #001f33;
+ --vscode-peekViewEditorStickyScroll-background: #001f33;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);
+ --vscode-editorMarkerNavigationError-background: #f14c4c;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #cca700;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #3794ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #1e1e1e;
+ --vscode-editorSuggestWidget-background: #252526;
+ --vscode-editorSuggestWidget-border: #454545;
+ --vscode-editorSuggestWidget-foreground: #d4d4d4;
+ --vscode-editorSuggestWidget-selectedForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedIconForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedBackground: #04395e;
+ --vscode-editorSuggestWidget-highlightForeground: #2aaaff;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #2aaaff;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(212, 212, 212, 0.5);
+ --vscode-tab-activeBackground: #1e1e1e;
+ --vscode-tab-unfocusedActiveBackground: #1e1e1e;
+ --vscode-tab-inactiveBackground: #2d2d2d;
+ --vscode-tab-unfocusedInactiveBackground: #2d2d2d;
+ --vscode-tab-activeForeground: #ffffff;
+ --vscode-tab-inactiveForeground: rgba(255, 255, 255, 0.5);
+ --vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, 0.5);
+ --vscode-tab-unfocusedInactiveForeground: rgba(255, 255, 255, 0.25);
+ --vscode-tab-border: #252526;
+ --vscode-tab-lastPinnedBorder: rgba(204, 204, 204, 0.2);
+ --vscode-tab-activeModifiedBorder: #3399cc;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+ --vscode-editorPane-background: #1e1e1e;
+ --vscode-editorGroupHeader-tabsBackground: #252526;
+ --vscode-editorGroupHeader-noTabsBackground: #1e1e1e;
+ --vscode-editorGroup-border: #444444;
+ --vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-editorGroup-dropIntoPromptForeground: #cccccc;
+ --vscode-editorGroup-dropIntoPromptBackground: #252526;
+ --vscode-sideBySideEditor-horizontalBorder: #444444;
+ --vscode-sideBySideEditor-verticalBorder: #444444;
+ --vscode-panel-background: #1e1e1e;
+ --vscode-panel-border: rgba(128, 128, 128, 0.35);
+ --vscode-panelTitle-activeForeground: #e7e7e7;
+ --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
+ --vscode-panelTitle-activeBorder: #e7e7e7;
+ --vscode-panel-dropBorder: #e7e7e7;
+ --vscode-panelSection-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: rgba(128, 128, 128, 0.35);
+ --vscode-banner-background: #04395e;
+ --vscode-banner-foreground: #ffffff;
+ --vscode-banner-iconForeground: #3794ff;
+ --vscode-statusBar-foreground: #ffffff;
+ --vscode-statusBar-noFolderForeground: #ffffff;
+ --vscode-statusBar-background: #007acc;
+ --vscode-statusBar-noFolderBackground: #68217a;
+ --vscode-statusBar-focusBorder: #ffffff;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #ffffff;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #ffffff;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #ffffff;
+ --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);
+ --vscode-statusBarItem-prominentHoverForeground: #ffffff;
+ --vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+ --vscode-statusBarItem-errorBackground: #c72e0f;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #7a6400;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #333333;
+ --vscode-activityBar-foreground: #ffffff;
+ --vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.4);
+ --vscode-activityBar-activeBorder: #ffffff;
+ --vscode-activityBar-dropBorder: #ffffff;
+ --vscode-activityBarBadge-background: #007acc;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-profileBadge-background: #4d4d4d;
+ --vscode-profileBadge-foreground: #ffffff;
+ --vscode-statusBarItem-remoteBackground: #16825d;
+ --vscode-statusBarItem-remoteForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #007acc;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #252526;
+ --vscode-sideBarTitle-foreground: #bbbbbb;
+ --vscode-sideBar-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0);
+ --vscode-sideBarSectionHeader-border: rgba(204, 204, 204, 0.2);
+ --vscode-titleBar-activeForeground: #cccccc;
+ --vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-titleBar-activeBackground: #3c3c3c;
+ --vscode-titleBar-inactiveBackground: rgba(60, 60, 60, 0.6);
+ --vscode-menubar-selectionForeground: #cccccc;
+ --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+ --vscode-notificationCenter-border: #303031;
+ --vscode-notificationToast-border: #303031;
+ --vscode-notifications-foreground: #cccccc;
+ --vscode-notifications-background: #252526;
+ --vscode-notificationLink-foreground: #3794ff;
+ --vscode-notificationCenterHeader-background: #303031;
+ --vscode-notifications-border: #303031;
+ --vscode-notificationsErrorIcon-foreground: #f14c4c;
+ --vscode-notificationsWarningIcon-foreground: #cca700;
+ --vscode-notificationsInfoIcon-foreground: #3794ff;
+ --vscode-commandCenter-foreground: #cccccc;
+ --vscode-commandCenter-activeForeground: #cccccc;
+ --vscode-commandCenter-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-commandCenter-background: rgba(255, 255, 255, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+ --vscode-commandCenter-border: rgba(204, 204, 204, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(204, 204, 204, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(204, 204, 204, 0.15);
+ --vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);
+ --vscode-chat-slashCommandBackground: #4d4d4d;
+ --vscode-chat-slashCommandForeground: #ffffff;
+ --vscode-simpleFindWidget-sashBorder: #454545;
+ --vscode-commentsView-resolvedIcon: rgba(204, 204, 204, 0.5);
+ --vscode-commentsView-unresolvedIcon: #007fd4;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #007fd4;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(0, 127, 212, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(0, 127, 212, 0.1);
+ --vscode-editorGutter-commentRangeForeground: #37373d;
+ --vscode-editorOverviewRuler-commentForeground: #37373d;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #37373d;
+ --vscode-editorGutter-commentGlyphForeground: #d4d4d4;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #d4d4d4;
+ --vscode-debugToolBar-background: #333333;
+ --vscode-debugIcon-startForeground: #89d185;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
+ --vscode-mergeEditor-changeBase\.background: #4b1818;
+ --vscode-mergeEditor-changeBase\.word\.background: #6f1313;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, 0.48);
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #e7e7e7;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(231, 231, 231, 0.7);
+ --vscode-settings-modifiedItemIndicator: #0c7d9d;
+ --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-dropdownBackground: #3c3c3c;
+ --vscode-settings-dropdownForeground: #f0f0f0;
+ --vscode-settings-dropdownBorder: #3c3c3c;
+ --vscode-settings-dropdownListBorder: #454545;
+ --vscode-settings-checkboxBackground: #3c3c3c;
+ --vscode-settings-checkboxForeground: #f0f0f0;
+ --vscode-settings-checkboxBorder: #6b6b6b;
+ --vscode-settings-textInputBackground: #3c3c3c;
+ --vscode-settings-textInputForeground: #cccccc;
+ --vscode-settings-numberInputBackground: #3c3c3c;
+ --vscode-settings-numberInputForeground: #cccccc;
+ --vscode-settings-focusedRowBackground: rgba(42, 45, 46, 0.6);
+ --vscode-settings-rowHoverBackground: rgba(42, 45, 46, 0.3);
+ --vscode-settings-focusedRowBorder: #007fd4;
+ --vscode-terminal-foreground: #cccccc;
+ --vscode-terminal-selectionBackground: #264f78;
+ --vscode-terminal-inactiveSelectionBackground: #3a3d41;
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #1b81a8;
+ --vscode-terminalCommandDecoration-errorBackground: #f14c4c;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: rgba(128, 128, 128, 0.35);
+ --vscode-terminal-findMatchBackground: #515c6a;
+ --vscode-terminal-hoverHighlightBackground: rgba(38, 79, 120, 0.13);
+ --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(83, 89, 93, 0.5);
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #f14c4c;
+ --vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #f14c4c;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(212, 212, 212, 0.5);
+ --vscode-welcomePage-tileBackground: #252526;
+ --vscode-welcomePage-tileHoverBackground: #2c2c2d;
+ --vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+ --vscode-welcomePage-progress\.background: #3c3c3c;
+ --vscode-welcomePage-progress\.foreground: #3794ff;
+ --vscode-walkthrough-stepTitle\.foreground: #ffffff;
+ --vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.4);
+ --vscode-inlineChat-background: #252526;
+ --vscode-inlineChat-border: #454545;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-inlineChat-regionHighlight: rgba(38, 79, 120, 0.25);
+ --vscode-inlineChatInput-border: #454545;
+ --vscode-inlineChatInput-focusBorder: #007fd4;
+ --vscode-inlineChatInput-placeholderForeground: #a6a6a6;
+ --vscode-inlineChatInput-background: #3c3c3c;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.1);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-debugExceptionWidget-border: #a31515;
+ --vscode-debugExceptionWidget-background: #420b0d;
+ --vscode-ports-iconRunningProcessForeground: #369432;
+ --vscode-statusBar-debuggingBackground: #cc6633;
+ --vscode-statusBar-debuggingForeground: #ffffff;
+ --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: #1b81a8;
+ --vscode-editorGutter-addedBackground: #487e02;
+ --vscode-editorGutter-deletedBackground: #f14c4c;
+ --vscode-minimapGutter-modifiedBackground: #1b81a8;
+ --vscode-minimapGutter-addedBackground: #487e02;
+ --vscode-minimapGutter-deletedBackground: #f14c4c;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: #37373d;
+ --vscode-notebook-focusedEditorBorder: #007fd4;
+ --vscode-notebookStatusSuccessIcon-foreground: #89d185;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;
+ --vscode-notebookStatusErrorIcon-foreground: #f48771;
+ --vscode-notebookStatusRunningIcon-foreground: #cccccc;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #37373d;
+ --vscode-notebook-selectedCellBorder: #37373d;
+ --vscode-notebook-focusedCellBorder: #007fd4;
+ --vscode-notebook-inactiveFocusedCellBorder: #37373d;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+ --vscode-notebook-cellInsertionIndicator: #007fd4;
+ --vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-notebook-cellEditorBackground: #252526;
+ --vscode-notebook-editorBackground: #1e1e1e;
+ --vscode-keybindingTable-headerBackground: rgba(204, 204, 204, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-debugTokenExpression-name: #c586c0;
+ --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+ --vscode-debugTokenExpression-string: #ce9178;
+ --vscode-debugTokenExpression-boolean: #4e94ce;
+ --vscode-debugTokenExpression-number: #b5cea8;
+ --vscode-debugTokenExpression-error: #f48771;
+ --vscode-debugView-exceptionLabelForeground: #cccccc;
+ --vscode-debugView-exceptionLabelBackground: #6c2022;
+ --vscode-debugView-stateLabelForeground: #cccccc;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #3794ff;
+ --vscode-debugConsole-warningForeground: #cca700;
+ --vscode-debugConsole-errorForeground: #f48771;
+ --vscode-debugConsole-sourceForeground: #cccccc;
+ --vscode-debugConsoleInputIcon-foreground: #cccccc;
+ --vscode-debugIcon-pauseForeground: #75beff;
+ --vscode-debugIcon-stopForeground: #f48771;
+ --vscode-debugIcon-disconnectForeground: #f48771;
+ --vscode-debugIcon-restartForeground: #89d185;
+ --vscode-debugIcon-stepOverForeground: #75beff;
+ --vscode-debugIcon-stepIntoForeground: #75beff;
+ --vscode-debugIcon-stepOutForeground: #75beff;
+ --vscode-debugIcon-continueForeground: #75beff;
+ --vscode-debugIcon-stepBackForeground: #75beff;
+ --vscode-scm-providerBorder: #454545;
+ --vscode-extensionButton-background: #0e639c;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #1177bb;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #0e639c;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: #1177bb;
+ --vscode-extensionIcon-starForeground: #ff8e00;
+ --vscode-extensionIcon-verifiedForeground: #3794ff;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #d758b3;
+ --vscode-terminal-ansiBlack: #000000;
+ --vscode-terminal-ansiRed: #cd3131;
+ --vscode-terminal-ansiGreen: #0dbc79;
+ --vscode-terminal-ansiYellow: #e5e510;
+ --vscode-terminal-ansiBlue: #2472c8;
+ --vscode-terminal-ansiMagenta: #bc3fbc;
+ --vscode-terminal-ansiCyan: #11a8cd;
+ --vscode-terminal-ansiWhite: #e5e5e5;
+ --vscode-terminal-ansiBrightBlack: #666666;
+ --vscode-terminal-ansiBrightRed: #f14c4c;
+ --vscode-terminal-ansiBrightGreen: #23d18b;
+ --vscode-terminal-ansiBrightYellow: #f5f543;
+ --vscode-terminal-ansiBrightBlue: #3b8eea;
+ --vscode-terminal-ansiBrightMagenta: #d670d6;
+ --vscode-terminal-ansiBrightCyan: #29b8db;
+ --vscode-terminal-ansiBrightWhite: #e5e5e5;
+ --vscode-interactive-activeCodeBorder: #3794ff;
+ --vscode-interactive-inactiveCodeBorder: #37373d;
+ --vscode-gitDecoration-addedResourceForeground: #81b88b;
+ --vscode-gitDecoration-modifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-deletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-renamedResourceForeground: #73c991;
+ --vscode-gitDecoration-untrackedResourceForeground: #73c991;
+ --vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-conflictingResourceForeground: #e4676b;
+ --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+}
diff --git a/mynah-ui/example/src/styles/themes/dark-solarized.scss b/mynah-ui/example/src/styles/themes/dark-solarized.scss
new file mode 100644
index 0000000000..9f0cfb4064
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/dark-solarized.scss
@@ -0,0 +1,605 @@
+html[theme='dark-solarized']:root {
+ --vscode-foreground: #cccccc;
+ --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
+ --vscode-errorForeground: #ffeaea;
+ --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
+ --vscode-icon-foreground: #c5c5c5;
+ --vscode-focusBorder: rgba(42, 161, 152, 0.6);
+ --vscode-selection-background: rgba(42, 161, 152, 0.6);
+ --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+ --vscode-textLink-foreground: #3794ff;
+ --vscode-textLink-activeForeground: #3794ff;
+ --vscode-textPreformat-foreground: #d7ba7d;
+ --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-input-background: #003847;
+ --vscode-input-foreground: #93a1a1;
+ --vscode-inputOption-activeBorder: rgba(42, 161, 152, 0.6);
+ --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+ --vscode-inputOption-activeBackground: rgba(42, 161, 152, 0.24);
+ --vscode-inputOption-activeForeground: #ffffff;
+ --vscode-input-placeholderForeground: rgba(147, 161, 161, 0.67);
+ --vscode-inputValidation-infoBackground: #052730;
+ --vscode-inputValidation-infoBorder: #363b5f;
+ --vscode-inputValidation-warningBackground: #5d5938;
+ --vscode-inputValidation-warningBorder: #9d8a5e;
+ --vscode-inputValidation-errorBackground: #571b26;
+ --vscode-inputValidation-errorBorder: #a92049;
+ --vscode-dropdown-background: #00212b;
+ --vscode-dropdown-foreground: #f0f0f0;
+ --vscode-dropdown-border: rgba(42, 161, 152, 0.6);
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: rgba(42, 161, 152, 0.6);
+ --vscode-button-hoverBackground: rgba(50, 193, 181, 0.6);
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #3a3d41;
+ --vscode-button-secondaryHoverBackground: #45494e;
+ --vscode-badge-background: #047aa6;
+ --vscode-badge-foreground: #ffffff;
+ --vscode-scrollbar-shadow: #000000;
+ --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-progressBar-background: #047aa6;
+ --vscode-editorError-foreground: #f14c4c;
+ --vscode-editorWarning-foreground: #cca700;
+ --vscode-editorInfo-foreground: #3794ff;
+ --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+ --vscode-sash-hoverBorder: rgba(42, 161, 152, 0.6);
+ --vscode-editor-background: #002b36;
+ --vscode-editor-foreground: #839496;
+ --vscode-editorStickyScroll-background: #002b36;
+ --vscode-editorStickyScrollHover-background: #2a2d2e;
+ --vscode-editorWidget-background: #00212b;
+ --vscode-editorWidget-foreground: #cccccc;
+ --vscode-editorWidget-border: #454545;
+ --vscode-quickInput-background: #00212b;
+ --vscode-quickInput-foreground: #cccccc;
+ --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
+ --vscode-pickerGroup-foreground: rgba(42, 161, 152, 0.6);
+ --vscode-pickerGroup-border: rgba(42, 161, 152, 0.6);
+ --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
+ --vscode-keybindingLabel-foreground: #cccccc;
+ --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
+ --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+ --vscode-editor-selectionBackground: #274642;
+ --vscode-editor-inactiveSelectionBackground: rgba(39, 70, 66, 0.5);
+ --vscode-editor-selectionHighlightBackground: rgba(0, 90, 111, 0.67);
+ --vscode-editor-findMatchBackground: #515c6a;
+ --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+ --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
+ --vscode-search-resultsInfoForeground: rgba(204, 204, 204, 0.65);
+ --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+ --vscode-editorHoverWidget-background: #004052;
+ --vscode-editorHoverWidget-foreground: #cccccc;
+ --vscode-editorHoverWidget-border: #454545;
+ --vscode-editorHoverWidget-statusBarBackground: #004d62;
+ --vscode-editorLink-activeForeground: #4e94ce;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(4, 122, 166, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(4, 122, 166, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(4, 122, 166, 0.1);
+ --vscode-editorLightBulb-foreground: #ffcc00;
+ --vscode-editorLightBulbAutoFix-foreground: #75beff;
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.2);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #3e3e3e;
+ --vscode-diffEditor-unchangedRegionForeground: #a3a2a2;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);
+ --vscode-list-focusOutline: rgba(42, 161, 152, 0.6);
+ --vscode-list-activeSelectionBackground: #005a6f;
+ --vscode-list-activeSelectionForeground: #ffffff;
+ --vscode-list-inactiveSelectionBackground: rgba(0, 68, 84, 0.53);
+ --vscode-list-hoverBackground: rgba(0, 68, 84, 0.67);
+ --vscode-list-dropBackground: rgba(0, 68, 84, 0.53);
+ --vscode-list-highlightForeground: #1ebcc5;
+ --vscode-list-focusHighlightForeground: #1ebcc5;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #f88070;
+ --vscode-list-warningForeground: #cca700;
+ --vscode-listFilterWidget-background: #00212b;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
+ --vscode-tree-indentGuidesStroke: #585858;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(88, 88, 88, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-list-deemphasizedForeground: #8c8c8c;
+ --vscode-checkbox-background: #00212b;
+ --vscode-checkbox-selectBackground: #00212b;
+ --vscode-checkbox-foreground: #f0f0f0;
+ --vscode-checkbox-border: rgba(42, 161, 152, 0.6);
+ --vscode-checkbox-selectBorder: #c5c5c5;
+ --vscode-quickInputList-focusForeground: #ffffff;
+ --vscode-quickInputList-focusBackground: #005a6f;
+ --vscode-menu-foreground: #f0f0f0;
+ --vscode-menu-background: #00212b;
+ --vscode-menu-selectionForeground: #ffffff;
+ --vscode-menu-selectionBackground: #005a6f;
+ --vscode-menu-separatorBackground: #606060;
+ --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+ --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+ --vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
+ --vscode-breadcrumb-background: #002b36;
+ --vscode-breadcrumb-focusForeground: #e0e0e0;
+ --vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
+ --vscode-breadcrumbPicker-background: #00212b;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #676767;
+ --vscode-minimap-selectionHighlight: #274642;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #cca700;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);
+ --vscode-problemsErrorIcon-foreground: #f14c4c;
+ --vscode-problemsWarningIcon-foreground: #cca700;
+ --vscode-problemsInfoIcon-foreground: #3794ff;
+ --vscode-charts-foreground: #cccccc;
+ --vscode-charts-lines: rgba(204, 204, 204, 0.5);
+ --vscode-charts-red: #f14c4c;
+ --vscode-charts-blue: #3794ff;
+ --vscode-charts-yellow: #cca700;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #89d185;
+ --vscode-charts-purple: #b180d7;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #cccccc;
+ --vscode-symbolIcon-booleanForeground: #cccccc;
+ --vscode-symbolIcon-classForeground: #ee9d28;
+ --vscode-symbolIcon-colorForeground: #cccccc;
+ --vscode-symbolIcon-constantForeground: #cccccc;
+ --vscode-symbolIcon-constructorForeground: #b180d7;
+ --vscode-symbolIcon-enumeratorForeground: #ee9d28;
+ --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
+ --vscode-symbolIcon-eventForeground: #ee9d28;
+ --vscode-symbolIcon-fieldForeground: #75beff;
+ --vscode-symbolIcon-fileForeground: #cccccc;
+ --vscode-symbolIcon-folderForeground: #cccccc;
+ --vscode-symbolIcon-functionForeground: #b180d7;
+ --vscode-symbolIcon-interfaceForeground: #75beff;
+ --vscode-symbolIcon-keyForeground: #cccccc;
+ --vscode-symbolIcon-keywordForeground: #cccccc;
+ --vscode-symbolIcon-methodForeground: #b180d7;
+ --vscode-symbolIcon-moduleForeground: #cccccc;
+ --vscode-symbolIcon-namespaceForeground: #cccccc;
+ --vscode-symbolIcon-nullForeground: #cccccc;
+ --vscode-symbolIcon-numberForeground: #cccccc;
+ --vscode-symbolIcon-objectForeground: #cccccc;
+ --vscode-symbolIcon-operatorForeground: #cccccc;
+ --vscode-symbolIcon-packageForeground: #cccccc;
+ --vscode-symbolIcon-propertyForeground: #cccccc;
+ --vscode-symbolIcon-referenceForeground: #cccccc;
+ --vscode-symbolIcon-snippetForeground: #cccccc;
+ --vscode-symbolIcon-stringForeground: #cccccc;
+ --vscode-symbolIcon-structForeground: #cccccc;
+ --vscode-symbolIcon-textForeground: #cccccc;
+ --vscode-symbolIcon-typeParameterForeground: #cccccc;
+ --vscode-symbolIcon-unitForeground: #cccccc;
+ --vscode-symbolIcon-variableForeground: #75beff;
+ --vscode-actionBar-toggledBackground: rgba(42, 161, 152, 0.24);
+ --vscode-editorHoverWidget-highlightForeground: #1ebcc5;
+ --vscode-editor-lineHighlightBackground: #073642;
+ --vscode-editor-lineHighlightBorder: #282828;
+ --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editorCursor-foreground: #d30102;
+ --vscode-editorWhitespace-foreground: rgba(147, 161, 161, 0.5);
+ --vscode-editorLineNumber-foreground: #858585;
+ --vscode-editorIndentGuide-background: rgba(147, 161, 161, 0.5);
+ --vscode-editorIndentGuide-activeBackground: rgba(195, 225, 225, 0.5);
+ --vscode-editorIndentGuide-background1: rgba(147, 161, 161, 0.5);
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: rgba(195, 225, 225, 0.5);
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+ --vscode-editorLineNumber-activeForeground: #949494;
+ --vscode-editorRuler-foreground: #5a5a5a;
+ --vscode-editorCodeLens-foreground: #999999;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #888888;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #002b36;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+ --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #cca700;
+ --vscode-editorOverviewRuler-infoForeground: #3794ff;
+ --vscode-editorBracketHighlight-foreground1: #cdcdcd;
+ --vscode-editorBracketHighlight-foreground2: #b58900;
+ --vscode-editorBracketHighlight-foreground3: #d33682;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #bd9b03;
+ --vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(39, 70, 66, 0.3);
+ --vscode-editorGutter-foldingControlForeground: #c5c5c5;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(0, 68, 84, 0.67);
+ --vscode-editor-wordHighlightStrongBackground: rgba(0, 90, 111, 0.67);
+ --vscode-editor-wordHighlightTextBackground: rgba(0, 68, 84, 0.67);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: #00212b;
+ --vscode-peekViewTitleLabel-foreground: #ffffff;
+ --vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
+ --vscode-peekView-border: #2b2b4a;
+ --vscode-peekViewResult-background: #00212b;
+ --vscode-peekViewResult-lineForeground: #bbbbbb;
+ --vscode-peekViewResult-fileForeground: #ffffff;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #ffffff;
+ --vscode-peekViewEditor-background: #10192c;
+ --vscode-peekViewEditorGutter-background: #10192c;
+ --vscode-peekViewEditorStickyScroll-background: #10192c;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(119, 68, 170, 0.25);
+ --vscode-editorMarkerNavigationError-background: #ab395b;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(171, 57, 91, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #5b7e7a;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(91, 126, 122, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #3794ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #002b36;
+ --vscode-editorSuggestWidget-background: #00212b;
+ --vscode-editorSuggestWidget-border: #454545;
+ --vscode-editorSuggestWidget-foreground: #839496;
+ --vscode-editorSuggestWidget-selectedForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedBackground: #005a6f;
+ --vscode-editorSuggestWidget-highlightForeground: #1ebcc5;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #1ebcc5;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(131, 148, 150, 0.5);
+ --vscode-tab-activeBackground: #002b37;
+ --vscode-tab-unfocusedActiveBackground: #002b37;
+ --vscode-tab-inactiveBackground: #004052;
+ --vscode-tab-unfocusedInactiveBackground: #004052;
+ --vscode-tab-activeForeground: #d6dbdb;
+ --vscode-tab-inactiveForeground: #93a1a1;
+ --vscode-tab-unfocusedActiveForeground: rgba(214, 219, 219, 0.5);
+ --vscode-tab-unfocusedInactiveForeground: rgba(147, 161, 161, 0.5);
+ --vscode-tab-border: #003847;
+ --vscode-tab-lastPinnedBorder: rgba(42, 161, 152, 0.27);
+ --vscode-tab-activeModifiedBorder: #3399cc;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+ --vscode-editorPane-background: #002b36;
+ --vscode-editorGroupHeader-tabsBackground: #004052;
+ --vscode-editorGroupHeader-noTabsBackground: #002b36;
+ --vscode-editorGroup-border: #00212b;
+ --vscode-editorGroup-dropBackground: rgba(42, 161, 152, 0.27);
+ --vscode-editorGroup-dropIntoPromptForeground: #cccccc;
+ --vscode-editorGroup-dropIntoPromptBackground: #00212b;
+ --vscode-sideBySideEditor-horizontalBorder: #00212b;
+ --vscode-sideBySideEditor-verticalBorder: #00212b;
+ --vscode-panel-background: #002b36;
+ --vscode-panel-border: #2b2b4a;
+ --vscode-panelTitle-activeForeground: #e7e7e7;
+ --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
+ --vscode-panelTitle-activeBorder: #e7e7e7;
+ --vscode-panel-dropBorder: #e7e7e7;
+ --vscode-panelSection-dropBackground: rgba(42, 161, 152, 0.27);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: #2b2b4a;
+ --vscode-banner-background: #005a6f;
+ --vscode-banner-foreground: #ffffff;
+ --vscode-banner-iconForeground: #3794ff;
+ --vscode-statusBar-foreground: #93a1a1;
+ --vscode-statusBar-noFolderForeground: #93a1a1;
+ --vscode-statusBar-background: #00212b;
+ --vscode-statusBar-noFolderBackground: #00212b;
+ --vscode-statusBar-focusBorder: #93a1a1;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #93a1a1;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #93a1a1;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #93a1a1;
+ --vscode-statusBarItem-prominentBackground: #003847;
+ --vscode-statusBarItem-prominentHoverForeground: #93a1a1;
+ --vscode-statusBarItem-prominentHoverBackground: #003847;
+ --vscode-statusBarItem-errorBackground: #ff2626;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #93a1a1;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #7a6400;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #93a1a1;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #003847;
+ --vscode-activityBar-foreground: #ffffff;
+ --vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.4);
+ --vscode-activityBar-activeBorder: #ffffff;
+ --vscode-activityBar-dropBorder: #ffffff;
+ --vscode-activityBarBadge-background: #007acc;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-profileBadge-background: #4d4d4d;
+ --vscode-profileBadge-foreground: #ffffff;
+ --vscode-statusBarItem-remoteBackground: rgba(42, 161, 152, 0.6);
+ --vscode-statusBarItem-remoteForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverForeground: #93a1a1;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverForeground: #93a1a1;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #007acc;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #00212b;
+ --vscode-sideBarTitle-foreground: #93a1a1;
+ --vscode-sideBar-dropBackground: rgba(42, 161, 152, 0.27);
+ --vscode-sideBarSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-titleBar-activeForeground: #cccccc;
+ --vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-titleBar-activeBackground: #002c39;
+ --vscode-titleBar-inactiveBackground: rgba(0, 44, 57, 0.6);
+ --vscode-menubar-selectionForeground: #cccccc;
+ --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+ --vscode-notifications-foreground: #cccccc;
+ --vscode-notifications-background: #00212b;
+ --vscode-notificationLink-foreground: #3794ff;
+ --vscode-notificationCenterHeader-background: #002b38;
+ --vscode-notifications-border: #002b38;
+ --vscode-notificationsErrorIcon-foreground: #f14c4c;
+ --vscode-notificationsWarningIcon-foreground: #cca700;
+ --vscode-notificationsInfoIcon-foreground: #3794ff;
+ --vscode-commandCenter-foreground: #cccccc;
+ --vscode-commandCenter-activeForeground: #cccccc;
+ --vscode-commandCenter-inactiveForeground: rgba(204, 204, 204, 0.6);
+ --vscode-commandCenter-background: rgba(255, 255, 255, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+ --vscode-commandCenter-border: rgba(204, 204, 204, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(204, 204, 204, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(204, 204, 204, 0.15);
+ --vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);
+ --vscode-chat-slashCommandBackground: #047aa6;
+ --vscode-chat-slashCommandForeground: #ffffff;
+ --vscode-simpleFindWidget-sashBorder: #454545;
+ --vscode-commentsView-resolvedIcon: rgba(204, 204, 204, 0.5);
+ --vscode-commentsView-unresolvedIcon: rgba(42, 161, 152, 0.6);
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: rgba(42, 161, 152, 0.6);
+ --vscode-editorCommentsWidget-rangeBackground: rgba(42, 161, 152, 0.06);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(42, 161, 152, 0.06);
+ --vscode-editorGutter-commentRangeForeground: #003845;
+ --vscode-editorOverviewRuler-commentForeground: #003845;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #003845;
+ --vscode-editorGutter-commentGlyphForeground: #839496;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #839496;
+ --vscode-debugToolBar-background: #00212b;
+ --vscode-debugIcon-startForeground: #89d185;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
+ --vscode-mergeEditor-changeBase\.background: #4b1818;
+ --vscode-mergeEditor-changeBase\.word\.background: #6f1313;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, 0.48);
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #e7e7e7;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(231, 231, 231, 0.7);
+ --vscode-settings-modifiedItemIndicator: #0c7d9d;
+ --vscode-settings-headerBorder: #2b2b4a;
+ --vscode-settings-sashBorder: #2b2b4a;
+ --vscode-settings-dropdownBackground: #00212b;
+ --vscode-settings-dropdownForeground: #f0f0f0;
+ --vscode-settings-dropdownBorder: rgba(42, 161, 152, 0.6);
+ --vscode-settings-dropdownListBorder: #454545;
+ --vscode-settings-checkboxBackground: #00212b;
+ --vscode-settings-checkboxForeground: #f0f0f0;
+ --vscode-settings-checkboxBorder: rgba(42, 161, 152, 0.6);
+ --vscode-settings-textInputBackground: #003847;
+ --vscode-settings-textInputForeground: #93a1a1;
+ --vscode-settings-numberInputBackground: #003847;
+ --vscode-settings-numberInputForeground: #93a1a1;
+ --vscode-settings-focusedRowBackground: rgba(0, 68, 84, 0.4);
+ --vscode-settings-rowHoverBackground: rgba(0, 68, 84, 0.2);
+ --vscode-settings-focusedRowBorder: rgba(42, 161, 152, 0.6);
+ --vscode-terminal-foreground: #cccccc;
+ --vscode-terminal-selectionBackground: #274642;
+ --vscode-terminal-inactiveSelectionBackground: rgba(39, 70, 66, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #1b81a8;
+ --vscode-terminalCommandDecoration-errorBackground: #f14c4c;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: #2b2b4a;
+ --vscode-terminal-findMatchBackground: #515c6a;
+ --vscode-terminal-hoverHighlightBackground: rgba(38, 79, 120, 0.13);
+ --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(42, 161, 152, 0.27);
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #f14c4c;
+ --vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #f14c4c;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(131, 148, 150, 0.5);
+ --vscode-welcomePage-tileBackground: #00212b;
+ --vscode-welcomePage-tileHoverBackground: #002734;
+ --vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+ --vscode-welcomePage-progress\.background: #003847;
+ --vscode-welcomePage-progress\.foreground: #3794ff;
+ --vscode-walkthrough-stepTitle\.foreground: #ffffff;
+ --vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.4);
+ --vscode-inlineChat-background: #00212b;
+ --vscode-inlineChat-border: #454545;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.36);
+ --vscode-inlineChat-regionHighlight: rgba(38, 79, 120, 0.25);
+ --vscode-inlineChatInput-border: #454545;
+ --vscode-inlineChatInput-focusBorder: rgba(42, 161, 152, 0.6);
+ --vscode-inlineChatInput-placeholderForeground: rgba(147, 161, 161, 0.67);
+ --vscode-inlineChatInput-background: #003847;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.1);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-debugExceptionWidget-border: #ab395b;
+ --vscode-debugExceptionWidget-background: #00212b;
+ --vscode-ports-iconRunningProcessForeground: #369432;
+ --vscode-statusBar-debuggingBackground: #00212b;
+ --vscode-statusBar-debuggingForeground: #93a1a1;
+ --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: #1b81a8;
+ --vscode-editorGutter-addedBackground: #487e02;
+ --vscode-editorGutter-deletedBackground: #f14c4c;
+ --vscode-minimapGutter-modifiedBackground: #1b81a8;
+ --vscode-minimapGutter-addedBackground: #487e02;
+ --vscode-minimapGutter-deletedBackground: #f14c4c;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: rgba(0, 68, 84, 0.53);
+ --vscode-notebook-focusedEditorBorder: rgba(42, 161, 152, 0.6);
+ --vscode-notebookStatusSuccessIcon-foreground: #89d185;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;
+ --vscode-notebookStatusErrorIcon-foreground: #ffeaea;
+ --vscode-notebookStatusRunningIcon-foreground: #cccccc;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: rgba(0, 68, 84, 0.53);
+ --vscode-notebook-selectedCellBorder: rgba(0, 68, 84, 0.53);
+ --vscode-notebook-focusedCellBorder: rgba(42, 161, 152, 0.6);
+ --vscode-notebook-inactiveFocusedCellBorder: rgba(0, 68, 84, 0.53);
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+ --vscode-notebook-cellInsertionIndicator: rgba(42, 161, 152, 0.6);
+ --vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+ --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+ --vscode-notebook-cellEditorBackground: #00212b;
+ --vscode-notebook-editorBackground: #002b36;
+ --vscode-keybindingTable-headerBackground: rgba(204, 204, 204, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04);
+ --vscode-debugTokenExpression-name: #c586c0;
+ --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+ --vscode-debugTokenExpression-string: #ce9178;
+ --vscode-debugTokenExpression-boolean: #4e94ce;
+ --vscode-debugTokenExpression-number: #b5cea8;
+ --vscode-debugTokenExpression-error: #f48771;
+ --vscode-debugView-exceptionLabelForeground: #cccccc;
+ --vscode-debugView-exceptionLabelBackground: #6c2022;
+ --vscode-debugView-stateLabelForeground: #cccccc;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #3794ff;
+ --vscode-debugConsole-warningForeground: #cca700;
+ --vscode-debugConsole-errorForeground: #ffeaea;
+ --vscode-debugConsole-sourceForeground: #cccccc;
+ --vscode-debugConsoleInputIcon-foreground: #cccccc;
+ --vscode-debugIcon-pauseForeground: #75beff;
+ --vscode-debugIcon-stopForeground: #f48771;
+ --vscode-debugIcon-disconnectForeground: #f48771;
+ --vscode-debugIcon-restartForeground: #89d185;
+ --vscode-debugIcon-stepOverForeground: #75beff;
+ --vscode-debugIcon-stepIntoForeground: #75beff;
+ --vscode-debugIcon-stepOutForeground: #75beff;
+ --vscode-debugIcon-continueForeground: #75beff;
+ --vscode-debugIcon-stepBackForeground: #75beff;
+ --vscode-scm-providerBorder: #454545;
+ --vscode-extensionButton-background: rgba(42, 161, 152, 0.6);
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: rgba(50, 193, 181, 0.6);
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: rgba(42, 161, 152, 0.6);
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: rgba(50, 193, 181, 0.6);
+ --vscode-extensionIcon-starForeground: #ff8e00;
+ --vscode-extensionIcon-verifiedForeground: #3794ff;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #d758b3;
+ --vscode-terminal-ansiBlack: #073642;
+ --vscode-terminal-ansiRed: #dc322f;
+ --vscode-terminal-ansiGreen: #859900;
+ --vscode-terminal-ansiYellow: #b58900;
+ --vscode-terminal-ansiBlue: #268bd2;
+ --vscode-terminal-ansiMagenta: #d33682;
+ --vscode-terminal-ansiCyan: #2aa198;
+ --vscode-terminal-ansiWhite: #eee8d5;
+ --vscode-terminal-ansiBrightBlack: #002b36;
+ --vscode-terminal-ansiBrightRed: #cb4b16;
+ --vscode-terminal-ansiBrightGreen: #586e75;
+ --vscode-terminal-ansiBrightYellow: #657b83;
+ --vscode-terminal-ansiBrightBlue: #839496;
+ --vscode-terminal-ansiBrightMagenta: #6c71c4;
+ --vscode-terminal-ansiBrightCyan: #93a1a1;
+ --vscode-terminal-ansiBrightWhite: #fdf6e3;
+ --vscode-interactive-activeCodeBorder: #2b2b4a;
+ --vscode-interactive-inactiveCodeBorder: rgba(0, 68, 84, 0.53);
+ --vscode-gitDecoration-addedResourceForeground: #81b88b;
+ --vscode-gitDecoration-modifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-deletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-renamedResourceForeground: #73c991;
+ --vscode-gitDecoration-untrackedResourceForeground: #73c991;
+ --vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
+ --vscode-gitDecoration-conflictingResourceForeground: #e4676b;
+ --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+}
diff --git a/mynah-ui/example/src/styles/themes/light+.scss b/mynah-ui/example/src/styles/themes/light+.scss
new file mode 100644
index 0000000000..4b0ea819e1
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/light+.scss
@@ -0,0 +1,624 @@
+html:root {
+ font-size: 13px !important;
+ --vscode-foreground: #616161;
+ --vscode-disabledForeground: rgba(97, 97, 97, 0.5);
+ --vscode-errorForeground: #a1260d;
+ --vscode-descriptionForeground: #717171;
+ --vscode-icon-foreground: #424242;
+ --vscode-focusBorder: #fafbfc;
+ --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);
+ --vscode-textLink-foreground: #006ab1;
+ --vscode-textLink-activeForeground: #006ab1;
+ --vscode-textPreformat-foreground: #a31515;
+ --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(220, 220, 220, 0.4);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-input-background: #ffffff;
+ --vscode-input-foreground: #616161;
+ --vscode-input-border: #e1e4e8;
+ --vscode-inputOption-activeBorder: #007acc;
+ --vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-inputOption-activeBackground: rgba(250, 251, 252, 0.2);
+ --vscode-inputOption-activeForeground: #000000;
+ --vscode-input-placeholderForeground: rgba(97, 97, 97, 0.5);
+ --vscode-inputValidation-infoBackground: #d6ecf2;
+ --vscode-inputValidation-infoBorder: #007acc;
+ --vscode-inputValidation-warningBackground: #f6f5d2;
+ --vscode-inputValidation-warningBorder: #b89500;
+ --vscode-inputValidation-errorBackground: #f2dede;
+ --vscode-inputValidation-errorBorder: #be1100;
+ --vscode-dropdown-background: #ffffff;
+ --vscode-dropdown-foreground: #616161;
+ --vscode-dropdown-border: #cecece;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #007acc;
+ --vscode-button-hoverBackground: #0062a3;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #5f6a79;
+ --vscode-button-secondaryHoverBackground: #4c5561;
+ --vscode-badge-background: #c4c4c4;
+ --vscode-badge-foreground: #333333;
+ --vscode-scrollbar-shadow: rgba(0, 0, 0, 0);
+ --vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-progressBar-background: #0e70c0;
+ --vscode-editorError-foreground: #e51400;
+ --vscode-editorWarning-foreground: #bf8803;
+ --vscode-editorInfo-foreground: #1a85ff;
+ --vscode-editorHint-foreground: #6c6c6c;
+ --vscode-sash-hoverBorder: #fafbfc;
+ --vscode-editor-background: #ffffff;
+ --vscode-editor-foreground: #24292e;
+ --vscode-editorStickyScroll-background: #ffffff;
+ --vscode-editorStickyScrollHover-background: #f0f0f0;
+ --vscode-editorWidget-background: #f3f3f3;
+ --vscode-editorWidget-foreground: #616161;
+ --vscode-editorWidget-border: #c8c8c8;
+ --vscode-quickInput-background: #f3f3f3;
+ --vscode-quickInput-foreground: #616161;
+ --vscode-quickInputTitle-background: rgba(0, 0, 0, 0.06);
+ --vscode-pickerGroup-foreground: #0066bf;
+ --vscode-pickerGroup-border: #cccedb;
+ --vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4);
+ --vscode-keybindingLabel-foreground: #555555;
+ --vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4);
+ --vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
+ --vscode-editor-selectionBackground: #add6ff;
+ --vscode-editor-inactiveSelectionBackground: rgba(173, 214, 255, 0.5);
+ --vscode-editor-selectionHighlightBackground: rgba(219, 237, 255, 0.6);
+ --vscode-editor-findMatchBackground: #a8ac94;
+ --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
+ --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
+ --vscode-search-resultsInfoForeground: #616161;
+ --vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
+ --vscode-editorHoverWidget-background: #f3f3f3;
+ --vscode-editorHoverWidget-foreground: #616161;
+ --vscode-editorHoverWidget-border: #c8c8c8;
+ --vscode-editorHoverWidget-statusBarBackground: #e7e7e7;
+ --vscode-editorLink-activeForeground: #0000ff;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(196, 196, 196, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(196, 196, 196, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(196, 196, 196, 0.1);
+ --vscode-editorLightBulb-foreground: #ddb100;
+ --vscode-editorLightBulbAutoFix-foreground: #007acc;
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.25);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #e4e4e4;
+ --vscode-diffEditor-unchangedRegionForeground: #4d4c4c;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(184, 184, 184, 0.16);
+ --vscode-list-focusOutline: #fafbfc;
+ --vscode-list-activeSelectionBackground: #0060c0;
+ --vscode-list-activeSelectionForeground: #ffffff;
+ --vscode-list-activeSelectionIconForeground: #ffffff;
+ --vscode-list-inactiveSelectionBackground: #e4e6f1;
+ --vscode-list-hoverBackground: #f0f0f0;
+ --vscode-list-dropBackground: #d6ebff;
+ --vscode-list-highlightForeground: #0066bf;
+ --vscode-list-focusHighlightForeground: #9dddff;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #b01011;
+ --vscode-list-warningForeground: #855f00;
+ --vscode-listFilterWidget-background: #f3f3f3;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
+ --vscode-tree-indentGuidesStroke: #a8a8a8;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(168, 168, 168, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-list-deemphasizedForeground: #8e8e90;
+ --vscode-checkbox-background: #ffffff;
+ --vscode-checkbox-selectBackground: #f3f3f3;
+ --vscode-checkbox-foreground: #616161;
+ --vscode-checkbox-border: #cecece;
+ --vscode-checkbox-selectBorder: #424242;
+ --vscode-quickInputList-focusForeground: #ffffff;
+ --vscode-quickInputList-focusIconForeground: #ffffff;
+ --vscode-quickInputList-focusBackground: #0060c0;
+ --vscode-menu-foreground: #616161;
+ --vscode-menu-background: #ffffff;
+ --vscode-menu-selectionForeground: #ffffff;
+ --vscode-menu-selectionBackground: #0060c0;
+ --vscode-menu-separatorBackground: #d4d4d4;
+ --vscode-toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-toolbar-activeBackground: rgba(166, 166, 166, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
+ --vscode-breadcrumb-foreground: #646464;
+ --vscode-breadcrumb-background: #e1e4e8;
+ --vscode-breadcrumb-focusForeground: #000000;
+ --vscode-breadcrumb-activeSelectionForeground: #000000;
+ --vscode-breadcrumbPicker-background: #f3f3f3;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;
+ --vscode-minimap-selectionHighlight: #add6ff;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #bf8803;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(100, 100, 100, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3);
+ --vscode-problemsErrorIcon-foreground: #e51400;
+ --vscode-problemsWarningIcon-foreground: #bf8803;
+ --vscode-problemsInfoIcon-foreground: #1a85ff;
+ --vscode-charts-foreground: #616161;
+ --vscode-charts-lines: rgba(97, 97, 97, 0.5);
+ --vscode-charts-red: #e51400;
+ --vscode-charts-blue: #1a85ff;
+ --vscode-charts-yellow: #bf8803;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #388a34;
+ --vscode-charts-purple: #652d90;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #616161;
+ --vscode-symbolIcon-booleanForeground: #616161;
+ --vscode-symbolIcon-classForeground: #d67e00;
+ --vscode-symbolIcon-colorForeground: #616161;
+ --vscode-symbolIcon-constantForeground: #616161;
+ --vscode-symbolIcon-constructorForeground: #652d90;
+ --vscode-symbolIcon-enumeratorForeground: #d67e00;
+ --vscode-symbolIcon-enumeratorMemberForeground: #007acc;
+ --vscode-symbolIcon-eventForeground: #d67e00;
+ --vscode-symbolIcon-fieldForeground: #007acc;
+ --vscode-symbolIcon-fileForeground: #616161;
+ --vscode-symbolIcon-folderForeground: #616161;
+ --vscode-symbolIcon-functionForeground: #652d90;
+ --vscode-symbolIcon-interfaceForeground: #007acc;
+ --vscode-symbolIcon-keyForeground: #616161;
+ --vscode-symbolIcon-keywordForeground: #616161;
+ --vscode-symbolIcon-methodForeground: #652d90;
+ --vscode-symbolIcon-moduleForeground: #616161;
+ --vscode-symbolIcon-namespaceForeground: #616161;
+ --vscode-symbolIcon-nullForeground: #616161;
+ --vscode-symbolIcon-numberForeground: #616161;
+ --vscode-symbolIcon-objectForeground: #616161;
+ --vscode-symbolIcon-operatorForeground: #616161;
+ --vscode-symbolIcon-packageForeground: #616161;
+ --vscode-symbolIcon-propertyForeground: #616161;
+ --vscode-symbolIcon-referenceForeground: #616161;
+ --vscode-symbolIcon-snippetForeground: #616161;
+ --vscode-symbolIcon-stringForeground: #616161;
+ --vscode-symbolIcon-structForeground: #616161;
+ --vscode-symbolIcon-textForeground: #616161;
+ --vscode-symbolIcon-typeParameterForeground: #616161;
+ --vscode-symbolIcon-unitForeground: #616161;
+ --vscode-symbolIcon-variableForeground: #007acc;
+ --vscode-actionBar-toggledBackground: rgba(250, 251, 252, 0.2);
+ --vscode-editorHoverWidget-highlightForeground: #0066bf;
+ --vscode-editor-lineHighlightBorder: #eeeeee;
+ --vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editorCursor-foreground: #000000;
+ --vscode-editorWhitespace-foreground: rgba(51, 51, 51, 0.2);
+ --vscode-editorLineNumber-foreground: #bbbbbb;
+ --vscode-editorIndentGuide-background: #eeeeee;
+ --vscode-editorIndentGuide-activeBackground: #a8a8a8;
+ --vscode-editorIndentGuide-background1: #eeeeee;
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: #a8a8a8;
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #0b216f;
+ --vscode-editorLineNumber-activeForeground: #575757;
+ --vscode-editorRuler-foreground: #d3d3d3;
+ --vscode-editorCodeLens-foreground: #919191;
+ --vscode-editorBracketMatch-background: #f1f8ff;
+ --vscode-editorBracketMatch-border: #c8e1ff;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #ffffff;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
+ --vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #bf8803;
+ --vscode-editorOverviewRuler-infoForeground: #1a85ff;
+ --vscode-editorBracketHighlight-foreground1: #0431fa;
+ --vscode-editorBracketHighlight-foreground2: #319331;
+ --vscode-editorBracketHighlight-foreground3: #7b3814;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #cea33d;
+ --vscode-editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(173, 214, 255, 0.3);
+ --vscode-editorGutter-foldingControlForeground: #424242;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: #f3f3f3;
+ --vscode-peekViewTitleLabel-foreground: #000000;
+ --vscode-peekViewTitleDescription-foreground: #616161;
+ --vscode-peekView-border: #1a85ff;
+ --vscode-peekViewResult-background: #f3f3f3;
+ --vscode-peekViewResult-lineForeground: #646465;
+ --vscode-peekViewResult-fileForeground: #1e1e1e;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #6c6c6c;
+ --vscode-peekViewEditor-background: #f2f8fc;
+ --vscode-peekViewEditorGutter-background: #f2f8fc;
+ --vscode-peekViewEditorStickyScroll-background: #f2f8fc;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(0, 0, 0, 0.07);
+ --vscode-editorMarkerNavigationError-background: #e51400;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #bf8803;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #1a85ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #ffffff;
+ --vscode-editorSuggestWidget-background: #f3f3f3;
+ --vscode-editorSuggestWidget-border: #c8c8c8;
+ --vscode-editorSuggestWidget-foreground: #24292e;
+ --vscode-editorSuggestWidget-selectedForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedIconForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedBackground: #0060c0;
+ --vscode-editorSuggestWidget-highlightForeground: #0066bf;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #9dddff;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(36, 41, 46, 0.5);
+ --vscode-tab-activeBackground: #ffffff;
+ --vscode-tab-unfocusedActiveBackground: #ffffff;
+ --vscode-tab-inactiveBackground: #fafbfc;
+ --vscode-tab-unfocusedInactiveBackground: #fafbfc;
+ --vscode-tab-activeForeground: #000000;
+ --vscode-tab-inactiveForeground: rgba(0, 0, 0, 0.67);
+ --vscode-tab-unfocusedActiveForeground: rgba(0, 0, 0, 0.93);
+ --vscode-tab-unfocusedInactiveForeground: rgba(0, 0, 0, 0.6);
+ --vscode-tab-border: #e1e4e8;
+ --vscode-tab-lastPinnedBorder: #a8a8a8;
+ --vscode-tab-activeBorderTop: #e36209;
+ --vscode-tab-unfocusedActiveBorderTop: rgba(9, 158, 227, 0.53);
+ --vscode-tab-activeModifiedBorder: #33aaee;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25);
+ --vscode-editorPane-background: #e7eaeb;
+ --vscode-editorGroupHeader-tabsBackground: #f2f4f5;
+ --vscode-editorGroupHeader-tabsBorder: #e1e4e8;
+ --vscode-editorGroupHeader-noTabsBackground: #ffffff;
+ --vscode-editorGroup-border: #e7e7e7;
+ --vscode-editorGroup-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-editorGroup-dropIntoPromptForeground: #616161;
+ --vscode-editorGroup-dropIntoPromptBackground: #f3f3f3;
+ --vscode-sideBySideEditor-horizontalBorder: #e7e7e7;
+ --vscode-sideBySideEditor-verticalBorder: #e7e7e7;
+ --vscode-panel-background: #ffffff;
+ --vscode-panel-border: rgba(128, 128, 128, 0.35);
+ --vscode-panelTitle-activeForeground: #424242;
+ --vscode-panelTitle-inactiveForeground: rgba(66, 66, 66, 0.75);
+ --vscode-panelTitle-activeBorder: #424242;
+ --vscode-panelInput-border: #e1e4e8;
+ --vscode-panel-dropBorder: #424242;
+ --vscode-panelSection-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: rgba(128, 128, 128, 0.35);
+ --vscode-banner-background: #004386;
+ --vscode-banner-foreground: #ffffff;
+ --vscode-banner-iconForeground: #1a85ff;
+ --vscode-statusBar-foreground: #444444;
+ --vscode-statusBar-noFolderForeground: #24292e;
+ --vscode-statusBar-background: #f2f4f5;
+ --vscode-statusBar-noFolderBackground: #fafbfc;
+ --vscode-statusBar-border: #e1e4e8;
+ --vscode-statusBar-focusBorder: #444444;
+ --vscode-statusBar-noFolderBorder: #e1e4e8;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #444444;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #444444;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #444444;
+ --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0);
+ --vscode-statusBarItem-prominentHoverForeground: #444444;
+ --vscode-statusBarItem-prominentHoverBackground: #dddddd;
+ --vscode-statusBarItem-errorBackground: #611708;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #444444;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #725102;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #444444;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #f2f4f5;
+ --vscode-activityBar-foreground: #8e979c;
+ --vscode-activityBar-inactiveForeground: rgba(142, 151, 156, 0.4);
+ --vscode-activityBar-border: #e1e4e8;
+ --vscode-activityBar-activeBorder: #8e979c;
+ --vscode-activityBar-activeBackground: #e3e4e4;
+ --vscode-activityBar-dropBorder: #8e979c;
+ --vscode-activityBarBadge-background: #54a3ff;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-profileBadge-background: #c4c4c4;
+ --vscode-profileBadge-foreground: #333333;
+ --vscode-statusBarItem-remoteBackground: rgba(0, 0, 0, 0);
+ --vscode-statusBarItem-remoteForeground: #444444;
+ --vscode-statusBarItem-remoteHoverForeground: #444444;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #444444;
+ --vscode-statusBarItem-offlineHoverForeground: #444444;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #54a3ff;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #fafbfc;
+ --vscode-sideBar-foreground: #586069;
+ --vscode-sideBar-border: #e1e4e8;
+ --vscode-sideBarTitle-foreground: #24292e;
+ --vscode-sideBar-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-sideBarSectionHeader-background: #f1f2f3;
+ --vscode-sideBarSectionHeader-foreground: #24292e;
+ --vscode-titleBar-activeForeground: #444444;
+ --vscode-titleBar-inactiveForeground: rgba(68, 68, 68, 0.6);
+ --vscode-titleBar-activeBackground: #f2f4f5;
+ --vscode-titleBar-inactiveBackground: rgba(242, 244, 245, 0.6);
+ --vscode-titleBar-border: #e1e4e8;
+ --vscode-menubar-selectionForeground: #444444;
+ --vscode-menubar-selectionBackground: rgba(184, 184, 184, 0.31);
+ --vscode-notifications-foreground: #616161;
+ --vscode-notifications-background: #f3f3f3;
+ --vscode-notificationLink-foreground: #006ab1;
+ --vscode-notificationCenterHeader-background: #e7e7e7;
+ --vscode-notifications-border: #e7e7e7;
+ --vscode-notificationsErrorIcon-foreground: #e51400;
+ --vscode-notificationsWarningIcon-foreground: #bf8803;
+ --vscode-notificationsInfoIcon-foreground: #1a85ff;
+ --vscode-commandCenter-foreground: #444444;
+ --vscode-commandCenter-activeForeground: #444444;
+ --vscode-commandCenter-inactiveForeground: rgba(68, 68, 68, 0.6);
+ --vscode-commandCenter-background: rgba(0, 0, 0, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
+ --vscode-commandCenter-border: rgba(68, 68, 68, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(68, 68, 68, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(68, 68, 68, 0.15);
+ --vscode-chat-requestBorder: rgba(0, 0, 0, 0.1);
+ --vscode-chat-slashCommandBackground: #c4c4c4;
+ --vscode-chat-slashCommandForeground: #333333;
+ --vscode-simpleFindWidget-sashBorder: #c8c8c8;
+ --vscode-commentsView-resolvedIcon: rgba(97, 97, 97, 0.5);
+ --vscode-commentsView-unresolvedIcon: #fafbfc;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #fafbfc;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(250, 251, 252, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(250, 251, 252, 0.1);
+ --vscode-editorGutter-commentRangeForeground: #d5d8e9;
+ --vscode-editorOverviewRuler-commentForeground: #d5d8e9;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #d5d8e9;
+ --vscode-editorGutter-commentGlyphForeground: #24292e;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #24292e;
+ --vscode-debugToolBar-background: #f3f3f3;
+ --vscode-debugIcon-startForeground: #388a34;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.4);
+ --vscode-mergeEditor-changeBase\.background: #ffcccc;
+ --vscode-mergeEditor-changeBase\.word\.background: #ffa3a3;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #444444;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(68, 68, 68, 0.7);
+ --vscode-settings-modifiedItemIndicator: #66afe0;
+ --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-dropdownBackground: #ffffff;
+ --vscode-settings-dropdownForeground: #616161;
+ --vscode-settings-dropdownBorder: #cecece;
+ --vscode-settings-dropdownListBorder: #c8c8c8;
+ --vscode-settings-checkboxBackground: #ffffff;
+ --vscode-settings-checkboxForeground: #616161;
+ --vscode-settings-checkboxBorder: #cecece;
+ --vscode-settings-textInputBackground: #ffffff;
+ --vscode-settings-textInputForeground: #616161;
+ --vscode-settings-textInputBorder: #e1e4e8;
+ --vscode-settings-numberInputBackground: #ffffff;
+ --vscode-settings-numberInputForeground: #616161;
+ --vscode-settings-numberInputBorder: #e1e4e8;
+ --vscode-settings-focusedRowBackground: rgba(240, 240, 240, 0.6);
+ --vscode-settings-rowHoverBackground: rgba(240, 240, 240, 0.3);
+ --vscode-settings-focusedRowBorder: #fafbfc;
+ --vscode-terminal-foreground: #333333;
+ --vscode-terminal-selectionBackground: #add6ff;
+ --vscode-terminal-inactiveSelectionBackground: rgba(173, 214, 255, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #2090d3;
+ --vscode-terminalCommandDecoration-errorBackground: #e51400;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: rgba(128, 128, 128, 0.35);
+ --vscode-terminal-findMatchBackground: #a8ac94;
+ --vscode-terminal-hoverHighlightBackground: rgba(173, 214, 255, 0.07);
+ --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #e51400;
+ --vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #e51400;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(36, 41, 46, 0.5);
+ --vscode-welcomePage-tileBackground: #f3f3f3;
+ --vscode-welcomePage-tileHoverBackground: #dbdbdb;
+ --vscode-welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
+ --vscode-welcomePage-progress\.background: #ffffff;
+ --vscode-welcomePage-progress\.foreground: #006ab1;
+ --vscode-walkthrough-stepTitle\.foreground: #000000;
+ --vscode-walkThrough-embeddedEditorBackground: #f4f4f4;
+ --vscode-inlineChat-background: #f3f3f3;
+ --vscode-inlineChat-border: #c8c8c8;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-inlineChat-regionHighlight: rgba(173, 214, 255, 0.15);
+ --vscode-inlineChatInput-border: #c8c8c8;
+ --vscode-inlineChatInput-focusBorder: #fafbfc;
+ --vscode-inlineChatInput-placeholderForeground: rgba(97, 97, 97, 0.5);
+ --vscode-inlineChatInput-background: #ffffff;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.13);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-debugExceptionWidget-border: #a31515;
+ --vscode-debugExceptionWidget-background: #f1dfde;
+ --vscode-ports-iconRunningProcessForeground: rgba(0, 0, 0, 0);
+ --vscode-statusBar-debuggingBackground: #fafbfc;
+ --vscode-statusBar-debuggingForeground: #24292e;
+ --vscode-statusBar-debuggingBorder: #e1e4e8;
+ --vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: #2090d3;
+ --vscode-editorGutter-addedBackground: #48985d;
+ --vscode-editorGutter-deletedBackground: #e51400;
+ --vscode-minimapGutter-modifiedBackground: #2090d3;
+ --vscode-minimapGutter-addedBackground: #48985d;
+ --vscode-minimapGutter-deletedBackground: #e51400;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: #e4e6f1;
+ --vscode-notebook-focusedEditorBorder: #fafbfc;
+ --vscode-notebookStatusSuccessIcon-foreground: #388a34;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #388a34;
+ --vscode-notebookStatusErrorIcon-foreground: #a1260d;
+ --vscode-notebookStatusRunningIcon-foreground: #616161;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #e4e6f1;
+ --vscode-notebook-selectedCellBorder: #e4e6f1;
+ --vscode-notebook-focusedCellBorder: #fafbfc;
+ --vscode-notebook-inactiveFocusedCellBorder: #e4e6f1;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
+ --vscode-notebook-cellInsertionIndicator: #fafbfc;
+ --vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-notebook-cellEditorBackground: #fafbfc;
+ --vscode-notebook-editorBackground: #e7eaeb;
+ --vscode-keybindingTable-headerBackground: rgba(97, 97, 97, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-searchEditor-textInputBorder: #e1e4e8;
+ --vscode-debugTokenExpression-name: #9b46b0;
+ --vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8);
+ --vscode-debugTokenExpression-string: #a31515;
+ --vscode-debugTokenExpression-boolean: #0000ff;
+ --vscode-debugTokenExpression-number: #098658;
+ --vscode-debugTokenExpression-error: #e51400;
+ --vscode-debugView-exceptionLabelForeground: #ffffff;
+ --vscode-debugView-exceptionLabelBackground: #a31515;
+ --vscode-debugView-stateLabelForeground: #616161;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #1a85ff;
+ --vscode-debugConsole-warningForeground: #bf8803;
+ --vscode-debugConsole-errorForeground: #a1260d;
+ --vscode-debugConsole-sourceForeground: #616161;
+ --vscode-debugConsoleInputIcon-foreground: #616161;
+ --vscode-debugIcon-pauseForeground: #007acc;
+ --vscode-debugIcon-stopForeground: #a1260d;
+ --vscode-debugIcon-disconnectForeground: #a1260d;
+ --vscode-debugIcon-restartForeground: #388a34;
+ --vscode-debugIcon-stepOverForeground: #007acc;
+ --vscode-debugIcon-stepIntoForeground: #007acc;
+ --vscode-debugIcon-stepOutForeground: #007acc;
+ --vscode-debugIcon-continueForeground: #007acc;
+ --vscode-debugIcon-stepBackForeground: #007acc;
+ --vscode-scm-providerBorder: #c8c8c8;
+ --vscode-extensionButton-background: #007acc;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #0062a3;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #007acc;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: #0062a3;
+ --vscode-extensionIcon-starForeground: #df6100;
+ --vscode-extensionIcon-verifiedForeground: #006ab1;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #b51e78;
+ --vscode-terminal-ansiBlack: #000000;
+ --vscode-terminal-ansiRed: #cd3131;
+ --vscode-terminal-ansiGreen: #00bc00;
+ --vscode-terminal-ansiYellow: #949800;
+ --vscode-terminal-ansiBlue: #0451a5;
+ --vscode-terminal-ansiMagenta: #bc05bc;
+ --vscode-terminal-ansiCyan: #0598bc;
+ --vscode-terminal-ansiWhite: #555555;
+ --vscode-terminal-ansiBrightBlack: #666666;
+ --vscode-terminal-ansiBrightRed: #cd3131;
+ --vscode-terminal-ansiBrightGreen: #14ce14;
+ --vscode-terminal-ansiBrightYellow: #795e26;
+ --vscode-terminal-ansiBrightBlue: #0451a5;
+ --vscode-terminal-ansiBrightMagenta: #bc05bc;
+ --vscode-terminal-ansiBrightCyan: #0598bc;
+ --vscode-terminal-ansiBrightWhite: #a5a5a5;
+ --vscode-interactive-activeCodeBorder: #1a85ff;
+ --vscode-interactive-inactiveCodeBorder: #e4e6f1;
+ --vscode-gitDecoration-addedResourceForeground: #587c0c;
+ --vscode-gitDecoration-modifiedResourceForeground: #0073c0;
+ --vscode-gitDecoration-deletedResourceForeground: #a00000;
+ --vscode-gitDecoration-renamedResourceForeground: #007100;
+ --vscode-gitDecoration-untrackedResourceForeground: #66a500;
+ --vscode-gitDecoration-ignoredResourceForeground: #8e8e90;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #895503;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-conflictingResourceForeground: #ff0000;
+ --vscode-gitDecoration-submoduleResourceForeground: #1258a7;
+}
diff --git a/mynah-ui/example/src/styles/themes/light+tweaked.scss b/mynah-ui/example/src/styles/themes/light+tweaked.scss
new file mode 100644
index 0000000000..8ea13b9d68
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/light+tweaked.scss
@@ -0,0 +1,828 @@
+html[theme='light+tweaked']:root {
+ --vscode-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+ --vscode-font-weight: normal;
+ --vscode-font-size: 13px;
+ --vscode-editor-font-family: Menlo, Monaco, 'Courier New', monospace;
+ --vscode-editor-font-weight: normal;
+ --vscode-editor-font-size: 12px;
+ --text-link-decoration: none;
+ --vscode-foreground: #616161;
+ --vscode-disabledForeground: rgba(97, 97, 97, 0.5);
+ --vscode-errorForeground: #a1260d;
+ --vscode-descriptionForeground: #717171;
+ --vscode-icon-foreground: #424242;
+ --vscode-focusBorder: #fafbfc;
+ --vscode-textLink-foreground: #006ab1;
+ --vscode-textLink-activeForeground: #006ab1;
+ --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);
+ --vscode-textPreformat-foreground: #a31515;
+ --vscode-textPreformat-background: rgba(0, 0, 0, 0.1);
+ --vscode-textBlockQuote-background: #f2f2f2;
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(220, 220, 220, 0.4);
+ --vscode-sash-hoverBorder: #fafbfc;
+ --vscode-badge-background: #c4c4c4;
+ --vscode-badge-foreground: #333333;
+ --vscode-activityWarningBadge-foreground: #ffffff;
+ --vscode-activityWarningBadge-background: #bf8803;
+ --vscode-activityErrorBadge-foreground: #ffffff;
+ --vscode-activityErrorBadge-background: #e51400;
+ --vscode-scrollbar-shadow: rgba(0, 0, 0, 0);
+ --vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-progressBar-background: #0e70c0;
+ --vscode-chart-line: #236b8e;
+ --vscode-chart-axis: rgba(0, 0, 0, 0.6);
+ --vscode-chart-guide: rgba(0, 0, 0, 0.2);
+ --vscode-editor-background: #ffffff;
+ --vscode-editor-foreground: #24292e;
+ --vscode-editorStickyScroll-background: #ffffff;
+ --vscode-editorStickyScrollHover-background: #f0f0f0;
+ --vscode-editorStickyScroll-shadow: rgba(0, 0, 0, 0);
+ --vscode-editorWidget-background: #f3f3f3;
+ --vscode-editorWidget-foreground: #616161;
+ --vscode-editorWidget-border: #c8c8c8;
+ --vscode-editorError-foreground: #e51400;
+ --vscode-editorWarning-foreground: #bf8803;
+ --vscode-editorInfo-foreground: #1a85ff;
+ --vscode-editorHint-foreground: #6c6c6c;
+ --vscode-editorLink-activeForeground: #0000ff;
+ --vscode-editor-selectionBackground: #add6ff;
+ --vscode-editor-inactiveSelectionBackground: rgba(173, 214, 255, 0.5);
+ --vscode-editor-selectionHighlightBackground: rgba(219, 237, 255, 0.6);
+ --vscode-editor-compositionBorder: #000000;
+ --vscode-editor-findMatchBackground: #a8ac94;
+ --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
+ --vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
+ --vscode-editorHoverWidget-background: #f3f3f3;
+ --vscode-editorHoverWidget-foreground: #616161;
+ --vscode-editorHoverWidget-border: #c8c8c8;
+ --vscode-editorHoverWidget-statusBarBackground: #e7e7e7;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(196, 196, 196, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(196, 196, 196, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(196, 196, 196, 0.1);
+ --vscode-editorLightBulb-foreground: #ddb100;
+ --vscode-editorLightBulbAutoFix-foreground: #007acc;
+ --vscode-editorLightBulbAi-foreground: #ddb100;
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.25);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #fafbfc;
+ --vscode-diffEditor-unchangedRegionForeground: #616161;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(184, 184, 184, 0.16);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-toolbar-activeBackground: rgba(166, 166, 166, 0.31);
+ --vscode-breadcrumb-foreground: #646464;
+ --vscode-breadcrumb-background: #e1e4e8;
+ --vscode-breadcrumb-focusForeground: #000000;
+ --vscode-breadcrumb-activeSelectionForeground: #000000;
+ --vscode-breadcrumbPicker-background: #f3f3f3;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-problemsErrorIcon-foreground: #e51400;
+ --vscode-problemsWarningIcon-foreground: #bf8803;
+ --vscode-problemsInfoIcon-foreground: #1a85ff;
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;
+ --vscode-minimap-selectionHighlight: #add6ff;
+ --vscode-minimap-infoHighlight: #1a85ff;
+ --vscode-minimap-warningHighlight: #bf8803;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(100, 100, 100, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3);
+ --vscode-charts-foreground: #616161;
+ --vscode-charts-lines: rgba(97, 97, 97, 0.5);
+ --vscode-charts-red: #e51400;
+ --vscode-charts-blue: #1a85ff;
+ --vscode-charts-yellow: #bf8803;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #388a34;
+ --vscode-charts-purple: #652d90;
+ --vscode-input-background: #ffffff;
+ --vscode-input-foreground: #616161;
+ --vscode-input-border: #e1e4e8;
+ --vscode-inputOption-activeBorder: #007acc;
+ --vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-inputOption-activeBackground: rgba(250, 251, 252, 0.2);
+ --vscode-inputOption-activeForeground: #000000;
+ --vscode-input-placeholderForeground: rgba(97, 97, 97, 0.5);
+ --vscode-inputValidation-infoBackground: #d6ecf2;
+ --vscode-inputValidation-infoBorder: #007acc;
+ --vscode-inputValidation-warningBackground: #f6f5d2;
+ --vscode-inputValidation-warningBorder: #b89500;
+ --vscode-inputValidation-errorBackground: #f2dede;
+ --vscode-inputValidation-errorBorder: #be1100;
+ --vscode-dropdown-background: #ffffff;
+ --vscode-dropdown-foreground: #616161;
+ --vscode-dropdown-border: #cecece;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #007acc;
+ --vscode-button-hoverBackground: #0062a3;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #5f6a79;
+ --vscode-button-secondaryHoverBackground: #4c5561;
+ --vscode-radio-activeForeground: #000000;
+ --vscode-radio-activeBackground: rgba(250, 251, 252, 0.2);
+ --vscode-radio-activeBorder: #007acc;
+ --vscode-radio-inactiveBorder: rgba(0, 0, 0, 0.2);
+ --vscode-radio-inactiveHoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-checkbox-background: #ffffff;
+ --vscode-checkbox-selectBackground: #f3f3f3;
+ --vscode-checkbox-foreground: #616161;
+ --vscode-checkbox-border: #cecece;
+ --vscode-checkbox-selectBorder: #424242;
+ --vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4);
+ --vscode-keybindingLabel-foreground: #555555;
+ --vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4);
+ --vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
+ --vscode-list-focusOutline: #fafbfc;
+ --vscode-list-activeSelectionBackground: #0060c0;
+ --vscode-list-activeSelectionForeground: #ffffff;
+ --vscode-list-activeSelectionIconForeground: #ffffff;
+ --vscode-list-inactiveSelectionBackground: #e4e6f1;
+ --vscode-list-hoverBackground: #f0f0f0;
+ --vscode-list-dropBackground: #d6ebff;
+ --vscode-list-dropBetweenBackground: #424242;
+ --vscode-list-highlightForeground: #0066bf;
+ --vscode-list-focusHighlightForeground: #9dddff;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #b01011;
+ --vscode-list-warningForeground: #855f00;
+ --vscode-listFilterWidget-background: #f3f3f3;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
+ --vscode-list-deemphasizedForeground: #8e8e90;
+ --vscode-tree-indentGuidesStroke: #a8a8a8;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(168, 168, 168, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-editorActionList-background: #f3f3f3;
+ --vscode-editorActionList-foreground: #616161;
+ --vscode-editorActionList-focusForeground: #ffffff;
+ --vscode-editorActionList-focusBackground: #0060c0;
+ --vscode-menu-foreground: #616161;
+ --vscode-menu-background: #ffffff;
+ --vscode-menu-selectionForeground: #ffffff;
+ --vscode-menu-selectionBackground: #0060c0;
+ --vscode-menu-separatorBackground: #d4d4d4;
+ --vscode-quickInput-background: #f3f3f3;
+ --vscode-quickInput-foreground: #616161;
+ --vscode-quickInputTitle-background: rgba(0, 0, 0, 0.06);
+ --vscode-pickerGroup-foreground: #0066bf;
+ --vscode-pickerGroup-border: #cccedb;
+ --vscode-quickInputList-focusForeground: #ffffff;
+ --vscode-quickInputList-focusIconForeground: #ffffff;
+ --vscode-quickInputList-focusBackground: #0060c0;
+ --vscode-search-resultsInfoForeground: #616161;
+ --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
+ --vscode-editor-lineHighlightBorder: #eeeeee;
+ --vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editorCursor-foreground: #000000;
+ --vscode-editorMultiCursor-primary\.foreground: #000000;
+ --vscode-editorMultiCursor-secondary\.foreground: #000000;
+ --vscode-editorWhitespace-foreground: rgba(51, 51, 51, 0.2);
+ --vscode-editorLineNumber-foreground: #bbbbbb;
+ --vscode-editorIndentGuide-background: #eeeeee;
+ --vscode-editorIndentGuide-activeBackground: #a8a8a8;
+ --vscode-editorIndentGuide-background1: #eeeeee;
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: #a8a8a8;
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #0b216f;
+ --vscode-editorLineNumber-activeForeground: #575757;
+ --vscode-editorRuler-foreground: #d3d3d3;
+ --vscode-editorCodeLens-foreground: #919191;
+ --vscode-editorBracketMatch-background: #f1f8ff;
+ --vscode-editorBracketMatch-border: #c8e1ff;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #ffffff;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
+ --vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #bf8803;
+ --vscode-editorOverviewRuler-infoForeground: #1a85ff;
+ --vscode-editorBracketHighlight-foreground1: #0431fa;
+ --vscode-editorBracketHighlight-foreground2: #319331;
+ --vscode-editorBracketHighlight-foreground3: #7b3814;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #bf8803;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-diffEditor-unchangedRegionShadow: rgba(115, 115, 115, 0.75);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-actionBar-toggledBackground: rgba(250, 251, 252, 0.2);
+ --vscode-symbolIcon-arrayForeground: #616161;
+ --vscode-symbolIcon-booleanForeground: #616161;
+ --vscode-symbolIcon-classForeground: #d67e00;
+ --vscode-symbolIcon-colorForeground: #616161;
+ --vscode-symbolIcon-constantForeground: #616161;
+ --vscode-symbolIcon-constructorForeground: #652d90;
+ --vscode-symbolIcon-enumeratorForeground: #d67e00;
+ --vscode-symbolIcon-enumeratorMemberForeground: #007acc;
+ --vscode-symbolIcon-eventForeground: #d67e00;
+ --vscode-symbolIcon-fieldForeground: #007acc;
+ --vscode-symbolIcon-fileForeground: #616161;
+ --vscode-symbolIcon-folderForeground: #616161;
+ --vscode-symbolIcon-functionForeground: #652d90;
+ --vscode-symbolIcon-interfaceForeground: #007acc;
+ --vscode-symbolIcon-keyForeground: #616161;
+ --vscode-symbolIcon-keywordForeground: #616161;
+ --vscode-symbolIcon-methodForeground: #652d90;
+ --vscode-symbolIcon-moduleForeground: #616161;
+ --vscode-symbolIcon-namespaceForeground: #616161;
+ --vscode-symbolIcon-nullForeground: #616161;
+ --vscode-symbolIcon-numberForeground: #616161;
+ --vscode-symbolIcon-objectForeground: #616161;
+ --vscode-symbolIcon-operatorForeground: #616161;
+ --vscode-symbolIcon-packageForeground: #616161;
+ --vscode-symbolIcon-propertyForeground: #616161;
+ --vscode-symbolIcon-referenceForeground: #616161;
+ --vscode-symbolIcon-snippetForeground: #616161;
+ --vscode-symbolIcon-stringForeground: #616161;
+ --vscode-symbolIcon-structForeground: #616161;
+ --vscode-symbolIcon-textForeground: #616161;
+ --vscode-symbolIcon-typeParameterForeground: #616161;
+ --vscode-symbolIcon-unitForeground: #616161;
+ --vscode-symbolIcon-variableForeground: #007acc;
+ --vscode-peekViewTitle-background: #f3f3f3;
+ --vscode-peekViewTitleLabel-foreground: #000000;
+ --vscode-peekViewTitleDescription-foreground: #616161;
+ --vscode-peekView-border: #1a85ff;
+ --vscode-peekViewResult-background: #f3f3f3;
+ --vscode-peekViewResult-lineForeground: #646465;
+ --vscode-peekViewResult-fileForeground: #1e1e1e;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #6c6c6c;
+ --vscode-peekViewEditor-background: #f2f8fc;
+ --vscode-peekViewEditorGutter-background: #f2f8fc;
+ --vscode-peekViewEditorStickyScroll-background: #f2f8fc;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(0, 0, 0, 0.07);
+ --vscode-editor-foldBackground: rgba(173, 214, 255, 0.3);
+ --vscode-editor-foldPlaceholderForeground: #808080;
+ --vscode-editorGutter-foldingControlForeground: #424242;
+ --vscode-editorSuggestWidget-background: #f3f3f3;
+ --vscode-editorSuggestWidget-border: #c8c8c8;
+ --vscode-editorSuggestWidget-foreground: #24292e;
+ --vscode-editorSuggestWidget-selectedForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedIconForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedBackground: #0060c0;
+ --vscode-editorSuggestWidget-highlightForeground: #0066bf;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #9dddff;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(36, 41, 46, 0.5);
+ --vscode-inlineEdit-originalBackground: rgba(255, 0, 0, 0.04);
+ --vscode-inlineEdit-modifiedBackground: rgba(156, 204, 44, 0.07);
+ --vscode-inlineEdit-originalChangedLineBackground: rgba(255, 0, 0, 0.16);
+ --vscode-inlineEdit-originalChangedTextBackground: rgba(255, 0, 0, 0.16);
+ --vscode-inlineEdit-modifiedChangedLineBackground: rgba(155, 185, 85, 0.14);
+ --vscode-inlineEdit-modifiedChangedTextBackground: rgba(156, 204, 44, 0.18);
+ --vscode-inlineEdit-gutterIndicator\.primaryForeground: #ffffff;
+ --vscode-inlineEdit-gutterIndicator\.primaryBorder: #007acc;
+ --vscode-inlineEdit-gutterIndicator\.primaryBackground: rgba(0, 122, 204, 0.5);
+ --vscode-inlineEdit-gutterIndicator\.secondaryForeground: #ffffff;
+ --vscode-inlineEdit-gutterIndicator\.secondaryBorder: #5f6a79;
+ --vscode-inlineEdit-gutterIndicator\.secondaryBackground: #5f6a79;
+ --vscode-inlineEdit-gutterIndicator\.successfulForeground: #ffffff;
+ --vscode-inlineEdit-gutterIndicator\.successfulBorder: #007acc;
+ --vscode-inlineEdit-gutterIndicator\.successfulBackground: #007acc;
+ --vscode-inlineEdit-gutterIndicator\.background: rgba(95, 95, 95, 0.09);
+ --vscode-inlineEdit-originalBorder: rgba(255, 0, 0, 0.2);
+ --vscode-inlineEdit-modifiedBorder: rgba(62, 81, 18, 0.25);
+ --vscode-inlineEdit-tabWillAcceptModifiedBorder: rgba(62, 81, 18, 0.25);
+ --vscode-inlineEdit-tabWillAcceptOriginalBorder: rgba(255, 0, 0, 0.2);
+ --vscode-editorMarkerNavigationError-background: #e51400;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #bf8803;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #1a85ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #ffffff;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorHoverWidget-highlightForeground: #0066bf;
+ --vscode-editor-placeholder\.foreground: rgba(0, 0, 0, 0.47);
+ --vscode-tab-activeBackground: #ffffff;
+ --vscode-tab-unfocusedActiveBackground: #ffffff;
+ --vscode-tab-inactiveBackground: #fafbfc;
+ --vscode-tab-unfocusedInactiveBackground: #fafbfc;
+ --vscode-tab-activeForeground: #000000;
+ --vscode-tab-inactiveForeground: rgba(0, 0, 0, 0.67);
+ --vscode-tab-unfocusedActiveForeground: rgba(0, 0, 0, 0.93);
+ --vscode-tab-unfocusedInactiveForeground: rgba(0, 0, 0, 0.6);
+ --vscode-tab-border: #e1e4e8;
+ --vscode-tab-lastPinnedBorder: #a8a8a8;
+ --vscode-tab-activeBorderTop: #e36209;
+ --vscode-tab-unfocusedActiveBorderTop: rgba(9, 158, 227, 0.53);
+ --vscode-tab-selectedBorderTop: #e36209;
+ --vscode-tab-selectedBackground: #ffffff;
+ --vscode-tab-selectedForeground: #000000;
+ --vscode-tab-dragAndDropBorder: #000000;
+ --vscode-tab-activeModifiedBorder: #33aaee;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25);
+ --vscode-editorPane-background: #e7eaeb;
+ --vscode-editorGroupHeader-tabsBackground: #f2f4f5;
+ --vscode-editorGroupHeader-tabsBorder: #e1e4e8;
+ --vscode-editorGroupHeader-noTabsBackground: #ffffff;
+ --vscode-editorGroup-border: #e7e7e7;
+ --vscode-editorGroup-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-editorGroup-dropIntoPromptForeground: #616161;
+ --vscode-editorGroup-dropIntoPromptBackground: #f3f3f3;
+ --vscode-sideBySideEditor-horizontalBorder: #e7e7e7;
+ --vscode-sideBySideEditor-verticalBorder: #e7e7e7;
+ --vscode-banner-background: #004386;
+ --vscode-banner-foreground: #ffffff;
+ --vscode-banner-iconForeground: #1a85ff;
+ --vscode-statusBar-foreground: #444444;
+ --vscode-statusBar-noFolderForeground: #24292e;
+ --vscode-statusBar-background: #f2f4f5;
+ --vscode-statusBar-noFolderBackground: #fafbfc;
+ --vscode-statusBar-border: #e1e4e8;
+ --vscode-statusBar-focusBorder: #444444;
+ --vscode-statusBar-noFolderBorder: #e1e4e8;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #444444;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #444444;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #444444;
+ --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0);
+ --vscode-statusBarItem-prominentHoverForeground: #444444;
+ --vscode-statusBarItem-prominentHoverBackground: #dddddd;
+ --vscode-statusBarItem-errorBackground: #611708;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #444444;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #725102;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #444444;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #f2f4f5;
+ --vscode-activityBar-foreground: #8e979c;
+ --vscode-activityBar-inactiveForeground: rgba(142, 151, 156, 0.4);
+ --vscode-activityBar-border: #e1e4e8;
+ --vscode-activityBar-activeBorder: #8e979c;
+ --vscode-activityBar-activeBackground: #e3e4e4;
+ --vscode-activityBar-dropBorder: #8e979c;
+ --vscode-activityBarBadge-background: #54a3ff;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-activityBarTop-foreground: #424242;
+ --vscode-activityBarTop-activeBorder: #424242;
+ --vscode-activityBarTop-inactiveForeground: rgba(66, 66, 66, 0.75);
+ --vscode-activityBarTop-dropBorder: #424242;
+ --vscode-panel-background: #ffffff;
+ --vscode-panel-border: rgba(128, 128, 128, 0.35);
+ --vscode-panelTitle-activeForeground: #424242;
+ --vscode-panelTitle-inactiveForeground: rgba(66, 66, 66, 0.75);
+ --vscode-panelTitle-activeBorder: #424242;
+ --vscode-panelTitleBadge-background: #54a3ff;
+ --vscode-panelTitleBadge-foreground: #ffffff;
+ --vscode-panelInput-border: #e1e4e8;
+ --vscode-panel-dropBorder: #424242;
+ --vscode-panelSection-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: rgba(128, 128, 128, 0.35);
+ --vscode-panelStickyScroll-background: #ffffff;
+ --vscode-panelStickyScroll-shadow: rgba(0, 0, 0, 0);
+ --vscode-profileBadge-background: #c4c4c4;
+ --vscode-profileBadge-foreground: #333333;
+ --vscode-statusBarItem-remoteBackground: rgba(0, 0, 0, 0);
+ --vscode-statusBarItem-remoteForeground: #444444;
+ --vscode-statusBarItem-remoteHoverForeground: #444444;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #444444;
+ --vscode-statusBarItem-offlineHoverForeground: #444444;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #54a3ff;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #fafbfc;
+ --vscode-sideBar-foreground: #586069;
+ --vscode-sideBar-border: #e1e4e8;
+ --vscode-sideBarTitle-background: #fafbfc;
+ --vscode-sideBarTitle-foreground: #24292e;
+ --vscode-sideBar-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-sideBarSectionHeader-background: #f1f2f3;
+ --vscode-sideBarSectionHeader-foreground: #24292e;
+ --vscode-sideBarStickyScroll-background: #fafbfc;
+ --vscode-sideBarStickyScroll-shadow: rgba(0, 0, 0, 0);
+ --vscode-titleBar-activeForeground: #444444;
+ --vscode-titleBar-inactiveForeground: rgba(68, 68, 68, 0.6);
+ --vscode-titleBar-activeBackground: #f2f4f5;
+ --vscode-titleBar-inactiveBackground: rgba(242, 244, 245, 0.6);
+ --vscode-titleBar-border: #e1e4e8;
+ --vscode-menubar-selectionForeground: #444444;
+ --vscode-menubar-selectionBackground: rgba(184, 184, 184, 0.31);
+ --vscode-commandCenter-foreground: #444444;
+ --vscode-commandCenter-activeForeground: #444444;
+ --vscode-commandCenter-inactiveForeground: rgba(68, 68, 68, 0.6);
+ --vscode-commandCenter-background: rgba(0, 0, 0, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
+ --vscode-commandCenter-border: rgba(68, 68, 68, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(68, 68, 68, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(68, 68, 68, 0.15);
+ --vscode-notifications-foreground: #616161;
+ --vscode-notifications-background: #f3f3f3;
+ --vscode-notificationLink-foreground: #006ab1;
+ --vscode-notificationCenterHeader-background: #e7e7e7;
+ --vscode-notifications-border: #e7e7e7;
+ --vscode-notificationsErrorIcon-foreground: #e51400;
+ --vscode-notificationsWarningIcon-foreground: #bf8803;
+ --vscode-notificationsInfoIcon-foreground: #1a85ff;
+ --vscode-debugToolBar-background: #f3f3f3;
+ --vscode-debugIcon-startForeground: #388a34;
+ --vscode-inlineChat-foreground: #616161;
+ --vscode-inlineChat-background: #f3f3f3;
+ --vscode-inlineChat-border: #c8c8c8;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-inlineChatInput-border: #c8c8c8;
+ --vscode-inlineChatInput-focusBorder: #fafbfc;
+ --vscode-inlineChatInput-placeholderForeground: rgba(97, 97, 97, 0.5);
+ --vscode-inlineChatInput-background: #ffffff;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.13);
+ --vscode-editorOverviewRuler-inlineChatInserted: rgba(156, 204, 44, 0.2);
+ --vscode-editorMinimap-inlineChatInserted: rgba(156, 204, 44, 0.2);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-editorOverviewRuler-inlineChatRemoved: rgba(255, 0, 0, 0.16);
+ --vscode-editorWatermark-foreground: rgba(36, 41, 46, 0.68);
+ --vscode-extensionButton-background: #007acc;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #0062a3;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #007acc;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: #0062a3;
+ --vscode-extensionIcon-verifiedForeground: #006ab1;
+ --vscode-chat-requestBorder: rgba(0, 0, 0, 0.1);
+ --vscode-chat-requestBackground: rgba(255, 255, 255, 0.62);
+ --vscode-chat-slashCommandBackground: rgba(210, 236, 255, 0.6);
+ --vscode-chat-slashCommandForeground: #306ca2;
+ --vscode-chat-avatarBackground: #f2f2f2;
+ --vscode-chat-avatarForeground: #616161;
+ --vscode-chat-editedFileForeground: #895503;
+ --vscode-commentsView-resolvedIcon: rgba(97, 97, 97, 0.5);
+ --vscode-commentsView-unresolvedIcon: #fafbfc;
+ --vscode-editorCommentsWidget-replyInputBackground: #f3f3f3;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #fafbfc;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(250, 251, 252, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(250, 251, 252, 0.1);
+ --vscode-notebook-cellBorderColor: #e4e6f1;
+ --vscode-notebook-focusedEditorBorder: #fafbfc;
+ --vscode-notebookStatusSuccessIcon-foreground: #388a34;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #388a34;
+ --vscode-notebookStatusErrorIcon-foreground: #a1260d;
+ --vscode-notebookStatusRunningIcon-foreground: #616161;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #e4e6f1;
+ --vscode-notebook-selectedCellBorder: #e4e6f1;
+ --vscode-notebook-focusedCellBorder: #fafbfc;
+ --vscode-notebook-inactiveFocusedCellBorder: #e4e6f1;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
+ --vscode-notebook-cellInsertionIndicator: #fafbfc;
+ --vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-notebook-cellEditorBackground: #fafbfc;
+ --vscode-notebook-editorBackground: #e7eaeb;
+ --vscode-editorGutter-modifiedBackground: #2090d3;
+ --vscode-editorGutter-addedBackground: #48985d;
+ --vscode-editorGutter-deletedBackground: #e51400;
+ --vscode-minimapGutter-modifiedBackground: #2090d3;
+ --vscode-minimapGutter-addedBackground: #48985d;
+ --vscode-minimapGutter-deletedBackground: #e51400;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6);
+ --vscode-editorGutter-itemGlyphForeground: #24292e;
+ --vscode-editorGutter-itemBackground: #d5d8e9;
+ --vscode-terminal-foreground: #333333;
+ --vscode-terminal-selectionBackground: #add6ff;
+ --vscode-terminal-inactiveSelectionBackground: rgba(173, 214, 255, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #2090d3;
+ --vscode-terminalCommandDecoration-errorBackground: #e51400;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: rgba(128, 128, 128, 0.35);
+ --vscode-terminalOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-terminal-findMatchBackground: #a8ac94;
+ --vscode-terminal-hoverHighlightBackground: rgba(173, 214, 255, 0.07);
+ --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(38, 119, 203, 0.18);
+ --vscode-terminal-initialHintForeground: rgba(0, 0, 0, 0.47);
+ --vscode-scmGraph-historyItemRefColor: #1a85ff;
+ --vscode-scmGraph-historyItemRemoteRefColor: #652d90;
+ --vscode-scmGraph-historyItemBaseRefColor: #ea5c00;
+ --vscode-scmGraph-historyItemHoverDefaultLabelForeground: #616161;
+ --vscode-scmGraph-historyItemHoverDefaultLabelBackground: #c4c4c4;
+ --vscode-scmGraph-historyItemHoverLabelForeground: #ffffff;
+ --vscode-scmGraph-historyItemHoverAdditionsForeground: #587c0c;
+ --vscode-scmGraph-historyItemHoverDeletionsForeground: #ad0707;
+ --vscode-scmGraph-foreground1: #ffb000;
+ --vscode-scmGraph-foreground2: #dc267f;
+ --vscode-scmGraph-foreground3: #994f00;
+ --vscode-scmGraph-foreground4: #40b0a6;
+ --vscode-scmGraph-foreground5: #b66dff;
+ --vscode-editorGutter-commentRangeForeground: #d5d8e9;
+ --vscode-editorOverviewRuler-commentForeground: #d5d8e9;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #d5d8e9;
+ --vscode-editorGutter-commentGlyphForeground: #24292e;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #24292e;
+ --vscode-ports-iconRunningProcessForeground: rgba(0, 0, 0, 0);
+ --vscode-settings-headerForeground: #444444;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(68, 68, 68, 0.7);
+ --vscode-settings-modifiedItemIndicator: #66afe0;
+ --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-dropdownBackground: #ffffff;
+ --vscode-settings-dropdownForeground: #616161;
+ --vscode-settings-dropdownBorder: #cecece;
+ --vscode-settings-dropdownListBorder: #c8c8c8;
+ --vscode-settings-checkboxBackground: #ffffff;
+ --vscode-settings-checkboxForeground: #616161;
+ --vscode-settings-checkboxBorder: #cecece;
+ --vscode-settings-textInputBackground: #ffffff;
+ --vscode-settings-textInputForeground: #616161;
+ --vscode-settings-textInputBorder: #e1e4e8;
+ --vscode-settings-numberInputBackground: #ffffff;
+ --vscode-settings-numberInputForeground: #616161;
+ --vscode-settings-numberInputBorder: #e1e4e8;
+ --vscode-settings-focusedRowBackground: rgba(240, 240, 240, 0.6);
+ --vscode-settings-rowHoverBackground: rgba(240, 240, 240, 0.3);
+ --vscode-settings-focusedRowBorder: #fafbfc;
+ --vscode-keybindingTable-headerBackground: rgba(97, 97, 97, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-debugExceptionWidget-border: #a31515;
+ --vscode-debugExceptionWidget-background: #f1dfde;
+ --vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45);
+ --vscode-multiDiffEditor-headerBackground: #fafbfc;
+ --vscode-multiDiffEditor-background: #ffffff;
+ --vscode-multiDiffEditor-border: #cccccc;
+ --vscode-minimap-chatEditHighlight: rgba(255, 255, 255, 0.6);
+ --vscode-gauge-background: #007acc;
+ --vscode-gauge-foreground: rgba(0, 122, 204, 0.3);
+ --vscode-gauge-warningBackground: #b89500;
+ --vscode-gauge-warningForeground: rgba(184, 149, 0, 0.3);
+ --vscode-gauge-errorBackground: #be1100;
+ --vscode-gauge-errorForeground: rgba(190, 17, 0, 0.3);
+ --vscode-interactive-activeCodeBorder: #007acc;
+ --vscode-interactive-inactiveCodeBorder: #e4e6f1;
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #e51400;
+ --vscode-testing-messagePeekBorder: #1a85ff;
+ --vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);
+ --vscode-testing-messagePeekHeaderBackground: rgba(26, 133, 255, 0.1);
+ --vscode-testing-coveredBackground: rgba(156, 204, 44, 0.25);
+ --vscode-testing-coveredBorder: rgba(156, 204, 44, 0.19);
+ --vscode-testing-coveredGutterBackground: rgba(156, 204, 44, 0.15);
+ --vscode-testing-uncoveredBranchBackground: #ff9999;
+ --vscode-testing-uncoveredBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-uncoveredBorder: rgba(255, 0, 0, 0.15);
+ --vscode-testing-uncoveredGutterBackground: rgba(255, 0, 0, 0.3);
+ --vscode-testing-coverCountBadgeBackground: #c4c4c4;
+ --vscode-testing-coverCountBadgeForeground: #333333;
+ --vscode-testing-message\.error\.badgeBackground: #e51400;
+ --vscode-testing-message\.error\.badgeBorder: #e51400;
+ --vscode-testing-message\.error\.badgeForeground: #ffffff;
+ --vscode-testing-message\.info\.decorationForeground: rgba(36, 41, 46, 0.5);
+ --vscode-testing-iconErrored\.retired: rgba(241, 76, 76, 0.7);
+ --vscode-testing-iconFailed\.retired: rgba(241, 76, 76, 0.7);
+ --vscode-testing-iconPassed\.retired: rgba(115, 201, 145, 0.7);
+ --vscode-testing-iconQueued\.retired: rgba(204, 167, 0, 0.7);
+ --vscode-testing-iconUnset\.retired: rgba(132, 132, 132, 0.7);
+ --vscode-testing-iconSkipped\.retired: rgba(132, 132, 132, 0.7);
+ --vscode-searchEditor-textInputBorder: #e1e4e8;
+ --vscode-statusBar-debuggingBackground: #fafbfc;
+ --vscode-statusBar-debuggingForeground: #24292e;
+ --vscode-statusBar-debuggingBorder: #e1e4e8;
+ --vscode-commandCenter-debuggingBackground: rgba(250, 251, 252, 0.26);
+ --vscode-debugTokenExpression-name: #9b46b0;
+ --vscode-debugTokenExpression-type: #4a90e2;
+ --vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8);
+ --vscode-debugTokenExpression-string: #a31515;
+ --vscode-debugTokenExpression-boolean: #0000ff;
+ --vscode-debugTokenExpression-number: #098658;
+ --vscode-debugTokenExpression-error: #e51400;
+ --vscode-debugView-exceptionLabelForeground: #ffffff;
+ --vscode-debugView-exceptionLabelBackground: #a31515;
+ --vscode-debugView-stateLabelForeground: #616161;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #1a85ff;
+ --vscode-debugConsole-warningForeground: #bf8803;
+ --vscode-debugConsole-errorForeground: #a1260d;
+ --vscode-debugConsole-sourceForeground: #616161;
+ --vscode-debugConsoleInputIcon-foreground: #616161;
+ --vscode-debugIcon-pauseForeground: #007acc;
+ --vscode-debugIcon-stopForeground: #a1260d;
+ --vscode-debugIcon-disconnectForeground: #a1260d;
+ --vscode-debugIcon-restartForeground: #388a34;
+ --vscode-debugIcon-stepOverForeground: #007acc;
+ --vscode-debugIcon-stepIntoForeground: #007acc;
+ --vscode-debugIcon-stepOutForeground: #007acc;
+ --vscode-debugIcon-continueForeground: #007acc;
+ --vscode-debugIcon-stepBackForeground: #007acc;
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.4);
+ --vscode-mergeEditor-changeBase\.background: #ffcccc;
+ --vscode-mergeEditor-changeBase\.word\.background: #ffa3a3;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-extensionIcon-starForeground: #df6100;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #b51e78;
+ --vscode-extensionIcon-privateForeground: rgba(0, 0, 0, 0.38);
+ --vscode-terminal-ansiBlack: #000000;
+ --vscode-terminal-ansiRed: #cd3131;
+ --vscode-terminal-ansiGreen: #107c10;
+ --vscode-terminal-ansiYellow: #949800;
+ --vscode-terminal-ansiBlue: #0451a5;
+ --vscode-terminal-ansiMagenta: #bc05bc;
+ --vscode-terminal-ansiCyan: #0598bc;
+ --vscode-terminal-ansiWhite: #555555;
+ --vscode-terminal-ansiBrightBlack: #666666;
+ --vscode-terminal-ansiBrightRed: #cd3131;
+ --vscode-terminal-ansiBrightGreen: #14ce14;
+ --vscode-terminal-ansiBrightYellow: #795e26;
+ --vscode-terminal-ansiBrightBlue: #0451a5;
+ --vscode-terminal-ansiBrightMagenta: #bc05bc;
+ --vscode-terminal-ansiBrightCyan: #0598bc;
+ --vscode-terminal-ansiBrightWhite: #a5a5a5;
+ --vscode-simpleFindWidget-sashBorder: #c8c8c8;
+ --vscode-terminalStickyScrollHover-background: #f0f0f0;
+ --vscode-terminalCommandGuide-foreground: #e4e6f1;
+ --vscode-terminalSymbolIcon-flagForeground: #d67e00;
+ --vscode-terminalSymbolIcon-aliasForeground: #652d90;
+ --vscode-terminalSymbolIcon-optionValueForeground: #007acc;
+ --vscode-terminalSymbolIcon-methodForeground: #652d90;
+ --vscode-terminalSymbolIcon-argumentForeground: #007acc;
+ --vscode-terminalSymbolIcon-optionForeground: #d67e00;
+ --vscode-terminalSymbolIcon-fileForeground: #616161;
+ --vscode-terminalSymbolIcon-folderForeground: #616161;
+ --vscode-welcomePage-tileBackground: #f3f3f3;
+ --vscode-welcomePage-tileHoverBackground: #dbdbdb;
+ --vscode-welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
+ --vscode-welcomePage-progress\.background: #ffffff;
+ --vscode-welcomePage-progress\.foreground: #006ab1;
+ --vscode-walkthrough-stepTitle\.foreground: #000000;
+ --vscode-walkThrough-embeddedEditorBackground: #f4f4f4;
+ --vscode-profiles-sashBorder: rgba(128, 128, 128, 0.35);
+ --vscode-gitDecoration-addedResourceForeground: #587c0c;
+ --vscode-gitDecoration-modifiedResourceForeground: #0073c0;
+ --vscode-gitDecoration-deletedResourceForeground: #a00000;
+ --vscode-gitDecoration-renamedResourceForeground: #007100;
+ --vscode-gitDecoration-untrackedResourceForeground: #66a500;
+ --vscode-gitDecoration-ignoredResourceForeground: #8e8e90;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #895503;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-conflictingResourceForeground: #ff0000;
+ --vscode-gitDecoration-submoduleResourceForeground: #1258a7;
+ --vscode-git-blame\.editorDecorationForeground: #969696;
+ --vscode-gitlens-gutterBackgroundColor: rgba(0, 0, 0, 0.05);
+ --vscode-gitlens-gutterForegroundColor: #747474;
+ --vscode-gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+ --vscode-gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+ --vscode-gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+ --vscode-gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+ --vscode-gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+ --vscode-gitlens-openAutolinkedIssueIconColor: #1a7f37;
+ --vscode-gitlens-closedAutolinkedIssueIconColor: #8250df;
+ --vscode-gitlens-closedPullRequestIconColor: #cf222e;
+ --vscode-gitlens-openPullRequestIconColor: #1a7f37;
+ --vscode-gitlens-mergedPullRequestIconColor: #8250df;
+ --vscode-gitlens-unpublishedChangesIconColor: #35b15e;
+ --vscode-gitlens-unpublishedCommitIconColor: #35b15e;
+ --vscode-gitlens-unpulledChangesIconColor: #b15e35;
+ --vscode-gitlens-decorations\.addedForegroundColor: #587c0c;
+ --vscode-gitlens-decorations\.copiedForegroundColor: #007100;
+ --vscode-gitlens-decorations\.deletedForegroundColor: #a00000;
+ --vscode-gitlens-decorations\.ignoredForegroundColor: #8e8e90;
+ --vscode-gitlens-decorations\.modifiedForegroundColor: #0073c0;
+ --vscode-gitlens-decorations\.untrackedForegroundColor: #66a500;
+ --vscode-gitlens-decorations\.renamedForegroundColor: #007100;
+ --vscode-gitlens-decorations\.branchAheadForegroundColor: #35b15e;
+ --vscode-gitlens-decorations\.branchBehindForegroundColor: #b15e35;
+ --vscode-gitlens-decorations\.branchDivergedForegroundColor: #d8af1b;
+ --vscode-gitlens-decorations\.branchUpToDateForegroundColor: #586069;
+ --vscode-gitlens-decorations\.branchUnpublishedForegroundColor: #586069;
+ --vscode-gitlens-decorations\.branchMissingUpstreamForegroundColor: #ad0707;
+ --vscode-gitlens-decorations\.statusMergingOrRebasingConflictForegroundColor: #ad0707;
+ --vscode-gitlens-decorations\.statusMergingOrRebasingForegroundColor: #d8af1b;
+ --vscode-gitlens-decorations\.workspaceRepoMissingForegroundColor: #949494;
+ --vscode-gitlens-decorations\.workspaceCurrentForegroundColor: #35b15e;
+ --vscode-gitlens-decorations\.workspaceRepoOpenForegroundColor: #35b15e;
+ --vscode-gitlens-decorations\.worktreeHasUncommittedChangesForegroundColor: #895503;
+ --vscode-gitlens-decorations\.worktreeMissingForegroundColor: #ad0707;
+ --vscode-gitlens-graphLane1Color: #15a0bf;
+ --vscode-gitlens-graphLane2Color: #0669f7;
+ --vscode-gitlens-graphLane3Color: #8e00c2;
+ --vscode-gitlens-graphLane4Color: #c517b6;
+ --vscode-gitlens-graphLane5Color: #d90171;
+ --vscode-gitlens-graphLane6Color: #cd0101;
+ --vscode-gitlens-graphLane7Color: #f25d2e;
+ --vscode-gitlens-graphLane8Color: #f2ca33;
+ --vscode-gitlens-graphLane9Color: #7bd938;
+ --vscode-gitlens-graphLane10Color: #2ece9d;
+ --vscode-gitlens-graphChangesColumnAddedColor: #2da44e;
+ --vscode-gitlens-graphChangesColumnDeletedColor: #cf222e;
+ --vscode-gitlens-graphMinimapMarkerHeadColor: #04c814;
+ --vscode-gitlens-graphScrollMarkerHeadColor: #04c814;
+ --vscode-gitlens-graphMinimapMarkerUpstreamColor: #8cd993;
+ --vscode-gitlens-graphScrollMarkerUpstreamColor: #8cd993;
+ --vscode-gitlens-graphMinimapMarkerHighlightsColor: #f5cc00;
+ --vscode-gitlens-graphScrollMarkerHighlightsColor: #f5cc00;
+ --vscode-gitlens-graphMinimapMarkerLocalBranchesColor: #3095e8;
+ --vscode-gitlens-graphScrollMarkerLocalBranchesColor: #3095e8;
+ --vscode-gitlens-graphMinimapMarkerPullRequestsColor: #ff8f18;
+ --vscode-gitlens-graphScrollMarkerPullRequestsColor: #ff8f18;
+ --vscode-gitlens-graphMinimapMarkerRemoteBranchesColor: #67ace4;
+ --vscode-gitlens-graphScrollMarkerRemoteBranchesColor: #67ace4;
+ --vscode-gitlens-graphMinimapMarkerStashesColor: #e467e4;
+ --vscode-gitlens-graphScrollMarkerStashesColor: #e467e4;
+ --vscode-gitlens-graphMinimapMarkerTagsColor: #d2a379;
+ --vscode-gitlens-graphScrollMarkerTagsColor: #d2a379;
+ --vscode-gitlens-launchpadIndicatorMergeableColor: #42c954;
+ --vscode-gitlens-launchpadIndicatorMergeableHoverColor: #42c954;
+ --vscode-gitlens-launchpadIndicatorBlockedColor: #ad0707;
+ --vscode-gitlens-launchpadIndicatorBlockedHoverColor: #ad0707;
+ --vscode-gitlens-launchpadIndicatorAttentionColor: #cc9b15;
+ --vscode-gitlens-launchpadIndicatorAttentionHoverColor: #cc9b15;
+}
diff --git a/mynah-ui/example/src/styles/themes/light-orange.scss b/mynah-ui/example/src/styles/themes/light-orange.scss
new file mode 100644
index 0000000000..3a76519d72
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/light-orange.scss
@@ -0,0 +1,638 @@
+html[theme='light-orange']:root {
+ --vscode-foreground: #434343;
+ --vscode-disabledForeground: rgba(97, 97, 97, 0.5);
+ --vscode-errorForeground: #ff0000;
+ --vscode-descriptionForeground: #2e2e2e;
+ --vscode-icon-foreground: #424242;
+ --vscode-focusBorder: #ffffff;
+ --vscode-selection-background: rgba(255, 102, 0, 0.28);
+ --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);
+ --vscode-textLink-foreground: #006ab1;
+ --vscode-textLink-activeForeground: #006ab1;
+ --vscode-textPreformat-foreground: #a31515;
+ --vscode-textBlockQuote-background: rgba(255, 0, 0, 0);
+ --vscode-textBlockQuote-border: rgba(255, 0, 0, 0);
+ --vscode-textCodeBlock-background: rgba(255, 0, 0, 0);
+ --vscode-widget-shadow: #dddddd;
+ --vscode-input-background: #ffffff;
+ --vscode-input-foreground: #222222;
+ --vscode-input-border: #bfbfbf;
+ --vscode-inputOption-activeBorder: #007acc;
+ --vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-inputOption-activeBackground: #e7e7e7;
+ --vscode-inputOption-activeForeground: #000000;
+ --vscode-input-placeholderForeground: rgba(67, 67, 67, 0.5);
+ --vscode-inputValidation-infoBackground: #d6ecf2;
+ --vscode-inputValidation-infoBorder: #007acc;
+ --vscode-inputValidation-warningBackground: #f6f5d2;
+ --vscode-inputValidation-warningBorder: #b89500;
+ --vscode-inputValidation-errorBackground: #f2dede;
+ --vscode-inputValidation-errorBorder: #be1100;
+ --vscode-dropdown-background: #ffffff;
+ --vscode-dropdown-listBackground: #ffffff;
+ --vscode-dropdown-foreground: #222222;
+ --vscode-dropdown-border: #bfbfbf;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #ff6600;
+ --vscode-button-hoverBackground: #ff6600;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #5f6a79;
+ --vscode-button-secondaryHoverBackground: #4c5561;
+ --vscode-badge-background: #ff6600;
+ --vscode-badge-foreground: #ffffff;
+ --vscode-scrollbar-shadow: #dddddd;
+ --vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-progressBar-background: #0e70c0;
+ --vscode-editorError-foreground: #e51400;
+ --vscode-editorWarning-foreground: #bf8803;
+ --vscode-editorInfo-foreground: #1a85ff;
+ --vscode-editorHint-foreground: #6c6c6c;
+ --vscode-sash-hoverBorder: #ffffff;
+ --vscode-editor-background: #ffffff;
+ --vscode-editor-foreground: #000000;
+ --vscode-editorStickyScroll-background: #ffffff;
+ --vscode-editorStickyScrollHover-background: #f0f0f0;
+ --vscode-editorWidget-background: #f2f2f2;
+ --vscode-editorWidget-foreground: #434343;
+ --vscode-editorWidget-border: #c8c8c8;
+ --vscode-quickInput-background: #f2f2f2;
+ --vscode-quickInput-foreground: #434343;
+ --vscode-quickInputTitle-background: rgba(0, 0, 0, 0.06);
+ --vscode-pickerGroup-foreground: #0066bf;
+ --vscode-pickerGroup-border: #cccedb;
+ --vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4);
+ --vscode-keybindingLabel-foreground: #555555;
+ --vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4);
+ --vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
+ --vscode-editor-selectionBackground: rgba(255, 102, 0, 0.27);
+ --vscode-editor-inactiveSelectionBackground: rgba(255, 102, 0, 0.13);
+ --vscode-editor-selectionHighlightBackground: rgba(255, 134, 53, 0.16);
+ --vscode-editor-findMatchBackground: #a8ac94;
+ --vscode-editor-findMatchHighlightBackground: rgba(255, 102, 0, 0.27);
+ --vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
+ --vscode-searchEditor-findMatchBackground: rgba(255, 102, 0, 0.18);
+ --vscode-search-resultsInfoForeground: #434343;
+ --vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
+ --vscode-editorHoverWidget-background: #f2f2f2;
+ --vscode-editorHoverWidget-foreground: #434343;
+ --vscode-editorHoverWidget-border: #c8c8c8;
+ --vscode-editorHoverWidget-statusBarBackground: #e6e6e6;
+ --vscode-editorLink-activeForeground: #0000ff;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(255, 102, 0, 0.1);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(255, 102, 0, 0.1);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(255, 102, 0, 0.1);
+ --vscode-editorLightBulb-foreground: #ddb100;
+ --vscode-editorLightBulbAutoFix-foreground: #007acc;
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.25);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #e4e4e4;
+ --vscode-diffEditor-unchangedRegionForeground: #4d4c4c;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(184, 184, 184, 0.16);
+ --vscode-list-focusBackground: rgba(222, 220, 222, 0.67);
+ --vscode-list-focusForeground: #000000;
+ --vscode-list-focusOutline: #ffffff;
+ --vscode-list-activeSelectionBackground: #cedeef;
+ --vscode-list-activeSelectionForeground: #ff6600;
+ --vscode-list-activeSelectionIconForeground: #ffffff;
+ --vscode-list-inactiveSelectionBackground: #dbdbdb;
+ --vscode-list-inactiveSelectionForeground: #ff6600;
+ --vscode-list-inactiveFocusBackground: #dbdbdb;
+ --vscode-list-hoverBackground: #f0f0f0;
+ --vscode-list-hoverForeground: #ff6600;
+ --vscode-list-dropBackground: #dedcde;
+ --vscode-list-highlightForeground: #2e2e2e;
+ --vscode-list-focusHighlightForeground: #2e2e2e;
+ --vscode-list-invalidItemForeground: #2e2e2e;
+ --vscode-list-errorForeground: #2e2e2e;
+ --vscode-list-warningForeground: #2e2e2e;
+ --vscode-listFilterWidget-background: #f2f2f2;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: #dddddd;
+ --vscode-list-filterMatchBackground: rgba(255, 102, 0, 0.27);
+ --vscode-tree-indentGuidesStroke: #a9a9a9;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(169, 169, 169, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(67, 67, 67, 0.04);
+ --vscode-list-deemphasizedForeground: #8e8e90;
+ --vscode-checkbox-background: #ffffff;
+ --vscode-checkbox-selectBackground: #f2f2f2;
+ --vscode-checkbox-foreground: #222222;
+ --vscode-checkbox-border: #bfbfbf;
+ --vscode-checkbox-selectBorder: #424242;
+ --vscode-quickInputList-focusForeground: #ff6600;
+ --vscode-quickInputList-focusIconForeground: #ffffff;
+ --vscode-quickInputList-focusBackground: #cedeef;
+ --vscode-menu-foreground: #222222;
+ --vscode-menu-background: #ffffff;
+ --vscode-menu-selectionForeground: #ffffff;
+ --vscode-menu-selectionBackground: #ff6600;
+ --vscode-menu-separatorBackground: #d4d4d4;
+ --vscode-toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-toolbar-activeBackground: rgba(166, 166, 166, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
+ --vscode-breadcrumb-foreground: rgba(67, 67, 67, 0.8);
+ --vscode-breadcrumb-background: #ffffff;
+ --vscode-breadcrumb-focusForeground: #363636;
+ --vscode-breadcrumb-activeSelectionForeground: #363636;
+ --vscode-breadcrumbPicker-background: #f2f2f2;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;
+ --vscode-minimap-selectionHighlight: #add6ff;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #bf8803;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(100, 100, 100, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3);
+ --vscode-problemsErrorIcon-foreground: #e51400;
+ --vscode-problemsWarningIcon-foreground: #bf8803;
+ --vscode-problemsInfoIcon-foreground: #1a85ff;
+ --vscode-charts-foreground: #434343;
+ --vscode-charts-lines: rgba(67, 67, 67, 0.5);
+ --vscode-charts-red: #e51400;
+ --vscode-charts-blue: #1a85ff;
+ --vscode-charts-yellow: #bf8803;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #388a34;
+ --vscode-charts-purple: #652d90;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #434343;
+ --vscode-symbolIcon-booleanForeground: #434343;
+ --vscode-symbolIcon-classForeground: #d67e00;
+ --vscode-symbolIcon-colorForeground: #434343;
+ --vscode-symbolIcon-constantForeground: #434343;
+ --vscode-symbolIcon-constructorForeground: #652d90;
+ --vscode-symbolIcon-enumeratorForeground: #d67e00;
+ --vscode-symbolIcon-enumeratorMemberForeground: #007acc;
+ --vscode-symbolIcon-eventForeground: #d67e00;
+ --vscode-symbolIcon-fieldForeground: #007acc;
+ --vscode-symbolIcon-fileForeground: #434343;
+ --vscode-symbolIcon-folderForeground: #434343;
+ --vscode-symbolIcon-functionForeground: #652d90;
+ --vscode-symbolIcon-interfaceForeground: #007acc;
+ --vscode-symbolIcon-keyForeground: #434343;
+ --vscode-symbolIcon-keywordForeground: #434343;
+ --vscode-symbolIcon-methodForeground: #652d90;
+ --vscode-symbolIcon-moduleForeground: #434343;
+ --vscode-symbolIcon-namespaceForeground: #434343;
+ --vscode-symbolIcon-nullForeground: #434343;
+ --vscode-symbolIcon-numberForeground: #434343;
+ --vscode-symbolIcon-objectForeground: #434343;
+ --vscode-symbolIcon-operatorForeground: #434343;
+ --vscode-symbolIcon-packageForeground: #434343;
+ --vscode-symbolIcon-propertyForeground: #434343;
+ --vscode-symbolIcon-referenceForeground: #434343;
+ --vscode-symbolIcon-snippetForeground: #434343;
+ --vscode-symbolIcon-stringForeground: #434343;
+ --vscode-symbolIcon-structForeground: #434343;
+ --vscode-symbolIcon-textForeground: #434343;
+ --vscode-symbolIcon-typeParameterForeground: #434343;
+ --vscode-symbolIcon-unitForeground: #434343;
+ --vscode-symbolIcon-variableForeground: #007acc;
+ --vscode-actionBar-toggledBackground: #e7e7e7;
+ --vscode-editorHoverWidget-highlightForeground: #2e2e2e;
+ --vscode-editor-lineHighlightBackground: #f1f1f1;
+ --vscode-editor-lineHighlightBorder: #eeeeee;
+ --vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-editor-symbolHighlightBackground: rgba(255, 102, 0, 0.27);
+ --vscode-editorCursor-foreground: #000000;
+ --vscode-editorWhitespace-foreground: #ececec;
+ --vscode-editorLineNumber-foreground: #a8a8a8;
+ --vscode-editorIndentGuide-background: #e5e5e5;
+ --vscode-editorIndentGuide-activeBackground: #d7d8d7;
+ --vscode-editorIndentGuide-background1: #e5e5e5;
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: #d7d8d7;
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #0b216f;
+ --vscode-editorLineNumber-activeForeground: #585858;
+ --vscode-editorRuler-foreground: #d3d3d3;
+ --vscode-editorCodeLens-foreground: #919191;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #b9b9b9;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #ffffff;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
+ --vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #bf8803;
+ --vscode-editorOverviewRuler-infoForeground: #1a85ff;
+ --vscode-editorBracketHighlight-foreground1: #0431fa;
+ --vscode-editorBracketHighlight-foreground2: #319331;
+ --vscode-editorBracketHighlight-foreground3: #7b3814;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #cea33d;
+ --vscode-editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(255, 102, 0, 0.08);
+ --vscode-editorGutter-foldingControlForeground: #424242;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: #f3f3f3;
+ --vscode-peekViewTitleLabel-foreground: #000000;
+ --vscode-peekViewTitleDescription-foreground: #616161;
+ --vscode-peekView-border: #1a85ff;
+ --vscode-peekViewResult-background: #f3f3f3;
+ --vscode-peekViewResult-lineForeground: #646465;
+ --vscode-peekViewResult-fileForeground: #1e1e1e;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #6c6c6c;
+ --vscode-peekViewEditor-background: #f2f8fc;
+ --vscode-peekViewEditorGutter-background: #f2f8fc;
+ --vscode-peekViewEditorStickyScroll-background: #f2f8fc;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(245, 216, 2, 0.87);
+ --vscode-editorMarkerNavigationError-background: #e51400;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #bf8803;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #1a85ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #ffffff;
+ --vscode-editorSuggestWidget-background: #f2f2f2;
+ --vscode-editorSuggestWidget-border: #c8c8c8;
+ --vscode-editorSuggestWidget-foreground: #000000;
+ --vscode-editorSuggestWidget-selectedForeground: #ff6600;
+ --vscode-editorSuggestWidget-selectedIconForeground: #ffffff;
+ --vscode-editorSuggestWidget-selectedBackground: #cedeef;
+ --vscode-editorSuggestWidget-highlightForeground: #2e2e2e;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #2e2e2e;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(0, 0, 0, 0.5);
+ --vscode-tab-activeBackground: #ffffff;
+ --vscode-tab-unfocusedActiveBackground: #f7f7f6;
+ --vscode-tab-inactiveBackground: #ffffff;
+ --vscode-tab-unfocusedInactiveBackground: #e9e9e8;
+ --vscode-tab-activeForeground: #434343;
+ --vscode-tab-inactiveForeground: #686969;
+ --vscode-tab-unfocusedActiveForeground: #434343;
+ --vscode-tab-unfocusedInactiveForeground: #686969;
+ --vscode-tab-border: #dad9d9;
+ --vscode-tab-lastPinnedBorder: #a9a9a9;
+ --vscode-tab-activeBorder: #e1e2e2;
+ --vscode-tab-unfocusedActiveBorder: #e1e2e2;
+ --vscode-tab-activeBorderTop: #e2e2e2;
+ --vscode-tab-unfocusedActiveBorderTop: rgba(226, 226, 226, 0.7);
+ --vscode-tab-activeModifiedBorder: #33aaee;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25);
+ --vscode-editorPane-background: #ffffff;
+ --vscode-editorGroup-emptyBackground: #f7f7f6;
+ --vscode-editorGroupHeader-tabsBackground: #ffffff;
+ --vscode-editorGroupHeader-tabsBorder: #ffffff;
+ --vscode-editorGroupHeader-noTabsBackground: #e9e9e8;
+ --vscode-editorGroupHeader-border: #ffffff;
+ --vscode-editorGroup-border: #e1e2e2;
+ --vscode-editorGroup-dropBackground: rgba(255, 102, 0, 0.27);
+ --vscode-editorGroup-dropIntoPromptForeground: #434343;
+ --vscode-editorGroup-dropIntoPromptBackground: #f2f2f2;
+ --vscode-sideBySideEditor-horizontalBorder: #e1e2e2;
+ --vscode-sideBySideEditor-verticalBorder: #e1e2e2;
+ --vscode-panel-background: #ffffff;
+ --vscode-panel-border: rgba(128, 128, 128, 0.35);
+ --vscode-panelTitle-activeForeground: #ff6600;
+ --vscode-panelTitle-inactiveForeground: rgba(255, 102, 0, 0.75);
+ --vscode-panelTitle-activeBorder: #000000;
+ --vscode-panelInput-border: #dddddd;
+ --vscode-panel-dropBorder: #ff6600;
+ --vscode-panelSection-dropBackground: rgba(255, 102, 0, 0.27);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: rgba(128, 128, 128, 0.35);
+ --vscode-banner-background: #699ace;
+ --vscode-banner-foreground: #ff6600;
+ --vscode-banner-iconForeground: #1a85ff;
+ --vscode-statusBar-foreground: #3e0001;
+ --vscode-statusBar-noFolderForeground: #3e0001;
+ --vscode-statusBar-background: rgba(255, 102, 0, 0.2);
+ --vscode-statusBar-noFolderBackground: #ededed;
+ --vscode-statusBar-border: rgba(255, 102, 0, 0.43);
+ --vscode-statusBar-focusBorder: #3e0001;
+ --vscode-statusBar-noFolderBorder: rgba(255, 102, 0, 0.43);
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #3e0001;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #3e0001;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #3e0001;
+ --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);
+ --vscode-statusBarItem-prominentHoverForeground: #3e0001;
+ --vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+ --vscode-statusBarItem-errorBackground: #990000;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #3e0001;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #725102;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #3e0001;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #ffffff;
+ --vscode-activityBar-foreground: #ff6600;
+ --vscode-activityBar-inactiveForeground: #686969;
+ --vscode-activityBar-border: #ffffff;
+ --vscode-activityBar-activeBorder: #000000;
+ --vscode-activityBar-activeBackground: #ffffff;
+ --vscode-activityBar-dropBorder: #ff6600;
+ --vscode-activityBarBadge-background: #ff6600;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-profileBadge-background: #c4c4c4;
+ --vscode-profileBadge-foreground: #333333;
+ --vscode-statusBarItem-remoteBackground: #ff6600;
+ --vscode-statusBarItem-remoteForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverForeground: #3e0001;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverForeground: #3e0001;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #ff6600;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #ffffff;
+ --vscode-sideBar-foreground: #000000;
+ --vscode-sideBar-border: rgba(255, 102, 0, 0.28);
+ --vscode-sideBarTitle-foreground: #000000;
+ --vscode-sideBar-dropBackground: #f9f5f5;
+ --vscode-sideBarSectionHeader-background: rgba(255, 102, 0, 0.2);
+ --vscode-sideBarSectionHeader-foreground: #3e0001;
+ --vscode-sideBarSectionHeader-border: #ff6600;
+ --vscode-titleBar-activeForeground: #3e0001;
+ --vscode-titleBar-inactiveForeground: #acacab;
+ --vscode-titleBar-activeBackground: rgba(255, 102, 0, 0.2);
+ --vscode-titleBar-inactiveBackground: #f7f7f6;
+ --vscode-titleBar-border: #ffffff;
+ --vscode-menubar-selectionForeground: #ffffff;
+ --vscode-menubar-selectionBackground: #ff6600;
+ --vscode-notifications-foreground: #434343;
+ --vscode-notifications-background: #f2f2f2;
+ --vscode-notificationLink-foreground: #006ab1;
+ --vscode-notificationCenterHeader-background: #e6e6e6;
+ --vscode-notifications-border: #e6e6e6;
+ --vscode-notificationsErrorIcon-foreground: #e51400;
+ --vscode-notificationsWarningIcon-foreground: #bf8803;
+ --vscode-notificationsInfoIcon-foreground: #1a85ff;
+ --vscode-commandCenter-foreground: #3e0001;
+ --vscode-commandCenter-activeForeground: #ffffff;
+ --vscode-commandCenter-inactiveForeground: #acacab;
+ --vscode-commandCenter-background: rgba(0, 0, 0, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
+ --vscode-commandCenter-border: rgba(62, 0, 1, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(62, 0, 1, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(172, 172, 171, 0.25);
+ --vscode-chat-requestBorder: rgba(0, 0, 0, 0.1);
+ --vscode-chat-slashCommandBackground: #ff6600;
+ --vscode-chat-slashCommandForeground: #ffffff;
+ --vscode-simpleFindWidget-sashBorder: #c8c8c8;
+ --vscode-commentsView-resolvedIcon: rgba(97, 97, 97, 0.5);
+ --vscode-commentsView-unresolvedIcon: #ffffff;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #ffffff;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(255, 255, 255, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(255, 255, 255, 0.1);
+ --vscode-editorGutter-commentRangeForeground: #d0d0d0;
+ --vscode-editorOverviewRuler-commentForeground: #d0d0d0;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #d0d0d0;
+ --vscode-editorGutter-commentGlyphForeground: #000000;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #000000;
+ --vscode-debugToolBar-background: #f3f3f3;
+ --vscode-debugIcon-startForeground: #388a34;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.4);
+ --vscode-mergeEditor-changeBase\.background: #ffcccc;
+ --vscode-mergeEditor-changeBase\.word\.background: #ffa3a3;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #444444;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(68, 68, 68, 0.7);
+ --vscode-settings-modifiedItemIndicator: #66afe0;
+ --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-dropdownBackground: #ffffff;
+ --vscode-settings-dropdownForeground: #222222;
+ --vscode-settings-dropdownBorder: #bfbfbf;
+ --vscode-settings-dropdownListBorder: #c8c8c8;
+ --vscode-settings-checkboxBackground: #ffffff;
+ --vscode-settings-checkboxForeground: #222222;
+ --vscode-settings-checkboxBorder: #bfbfbf;
+ --vscode-settings-textInputBackground: #ffffff;
+ --vscode-settings-textInputForeground: #222222;
+ --vscode-settings-textInputBorder: #bfbfbf;
+ --vscode-settings-numberInputBackground: #ffffff;
+ --vscode-settings-numberInputForeground: #222222;
+ --vscode-settings-numberInputBorder: #bfbfbf;
+ --vscode-settings-focusedRowBackground: rgba(240, 240, 240, 0.6);
+ --vscode-settings-rowHoverBackground: rgba(240, 240, 240, 0.3);
+ --vscode-settings-focusedRowBorder: #ffffff;
+ --vscode-terminal-foreground: #333333;
+ --vscode-terminal-selectionBackground: rgba(255, 102, 0, 0.27);
+ --vscode-terminal-inactiveSelectionBackground: rgba(255, 102, 0, 0.13);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #2090d3;
+ --vscode-terminalCommandDecoration-errorBackground: #e51400;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: rgba(128, 128, 128, 0.35);
+ --vscode-terminal-findMatchBackground: #a8ac94;
+ --vscode-terminal-hoverHighlightBackground: rgba(173, 214, 255, 0.07);
+ --vscode-terminal-findMatchHighlightBackground: rgba(255, 102, 0, 0.27);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(255, 102, 0, 0.27);
+ --vscode-terminal-tab\.activeBorder: #e1e2e2;
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #e51400;
+ --vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #e51400;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(0, 0, 0, 0.5);
+ --vscode-welcomePage-background: #ffffff;
+ --vscode-welcomePage-tileBackground: #f2f2f2;
+ --vscode-welcomePage-tileHoverBackground: #dadada;
+ --vscode-welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
+ --vscode-welcomePage-progress\.background: #ffffff;
+ --vscode-welcomePage-progress\.foreground: #006ab1;
+ --vscode-walkthrough-stepTitle\.foreground: #000000;
+ --vscode-walkThrough-embeddedEditorBackground: #f4f4f4;
+ --vscode-inlineChat-background: #f2f2f2;
+ --vscode-inlineChat-border: #c8c8c8;
+ --vscode-inlineChat-shadow: #dddddd;
+ --vscode-inlineChat-regionHighlight: rgba(173, 214, 255, 0.15);
+ --vscode-inlineChatInput-border: #c8c8c8;
+ --vscode-inlineChatInput-focusBorder: #ffffff;
+ --vscode-inlineChatInput-placeholderForeground: rgba(67, 67, 67, 0.5);
+ --vscode-inlineChatInput-background: #ffffff;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.13);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-debugExceptionWidget-border: #a31515;
+ --vscode-debugExceptionWidget-background: #f1dfde;
+ --vscode-ports-iconRunningProcessForeground: #ff6600;
+ --vscode-statusBar-debuggingBackground: #ededed;
+ --vscode-statusBar-debuggingForeground: #3e0001;
+ --vscode-statusBar-debuggingBorder: rgba(255, 102, 0, 0.43);
+ --vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: #2090d3;
+ --vscode-editorGutter-addedBackground: #48985d;
+ --vscode-editorGutter-deletedBackground: #e51400;
+ --vscode-minimapGutter-modifiedBackground: #2090d3;
+ --vscode-minimapGutter-addedBackground: #48985d;
+ --vscode-minimapGutter-deletedBackground: #e51400;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: #dbdbdb;
+ --vscode-notebook-focusedEditorBorder: #ffffff;
+ --vscode-notebookStatusSuccessIcon-foreground: #388a34;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #388a34;
+ --vscode-notebookStatusErrorIcon-foreground: #ff0000;
+ --vscode-notebookStatusRunningIcon-foreground: #434343;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #dbdbdb;
+ --vscode-notebook-selectedCellBorder: #dbdbdb;
+ --vscode-notebook-focusedCellBorder: #ffffff;
+ --vscode-notebook-inactiveFocusedCellBorder: #dbdbdb;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
+ --vscode-notebook-cellInsertionIndicator: #ffffff;
+ --vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-notebook-cellEditorBackground: #ffffff;
+ --vscode-notebook-editorBackground: #ffffff;
+ --vscode-keybindingTable-headerBackground: rgba(67, 67, 67, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(67, 67, 67, 0.04);
+ --vscode-searchEditor-textInputBorder: #bfbfbf;
+ --vscode-debugTokenExpression-name: #9b46b0;
+ --vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8);
+ --vscode-debugTokenExpression-string: #a31515;
+ --vscode-debugTokenExpression-boolean: #0000ff;
+ --vscode-debugTokenExpression-number: #098658;
+ --vscode-debugTokenExpression-error: #e51400;
+ --vscode-debugView-exceptionLabelForeground: #ffffff;
+ --vscode-debugView-exceptionLabelBackground: #a31515;
+ --vscode-debugView-stateLabelForeground: #434343;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #1a85ff;
+ --vscode-debugConsole-warningForeground: #bf8803;
+ --vscode-debugConsole-errorForeground: #ff0000;
+ --vscode-debugConsole-sourceForeground: #434343;
+ --vscode-debugConsoleInputIcon-foreground: #434343;
+ --vscode-debugIcon-pauseForeground: #007acc;
+ --vscode-debugIcon-stopForeground: #a1260d;
+ --vscode-debugIcon-disconnectForeground: #a1260d;
+ --vscode-debugIcon-restartForeground: #388a34;
+ --vscode-debugIcon-stepOverForeground: #007acc;
+ --vscode-debugIcon-stepIntoForeground: #007acc;
+ --vscode-debugIcon-stepOutForeground: #007acc;
+ --vscode-debugIcon-continueForeground: #007acc;
+ --vscode-debugIcon-stepBackForeground: #007acc;
+ --vscode-scm-providerBorder: #c8c8c8;
+ --vscode-extensionButton-background: #ff6600;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #ff6600;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #ff6600;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: #ff6600;
+ --vscode-extensionIcon-starForeground: #df6100;
+ --vscode-extensionIcon-verifiedForeground: #006ab1;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #b51e78;
+ --vscode-terminal-ansiBlack: #000000;
+ --vscode-terminal-ansiRed: #cd3131;
+ --vscode-terminal-ansiGreen: #00bc00;
+ --vscode-terminal-ansiYellow: #949800;
+ --vscode-terminal-ansiBlue: #0451a5;
+ --vscode-terminal-ansiMagenta: #bc05bc;
+ --vscode-terminal-ansiCyan: #0598bc;
+ --vscode-terminal-ansiWhite: #555555;
+ --vscode-terminal-ansiBrightBlack: #666666;
+ --vscode-terminal-ansiBrightRed: #cd3131;
+ --vscode-terminal-ansiBrightGreen: #14ce14;
+ --vscode-terminal-ansiBrightYellow: #b5ba00;
+ --vscode-terminal-ansiBrightBlue: #0451a5;
+ --vscode-terminal-ansiBrightMagenta: #bc05bc;
+ --vscode-terminal-ansiBrightCyan: #0598bc;
+ --vscode-terminal-ansiBrightWhite: #a5a5a5;
+ --vscode-interactive-activeCodeBorder: #1a85ff;
+ --vscode-interactive-inactiveCodeBorder: #dbdbdb;
+ --vscode-gitDecoration-addedResourceForeground: #587c0c;
+ --vscode-gitDecoration-modifiedResourceForeground: #895503;
+ --vscode-gitDecoration-deletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-renamedResourceForeground: #007100;
+ --vscode-gitDecoration-untrackedResourceForeground: #007100;
+ --vscode-gitDecoration-ignoredResourceForeground: #8e8e90;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #895503;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-conflictingResourceForeground: #ad0707;
+ --vscode-gitDecoration-submoduleResourceForeground: #1258a7;
+}
diff --git a/mynah-ui/example/src/styles/themes/light-quiet.scss b/mynah-ui/example/src/styles/themes/light-quiet.scss
new file mode 100644
index 0000000000..123dd6383d
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/light-quiet.scss
@@ -0,0 +1,605 @@
+html[theme='light-quiet']:root {
+ --vscode-foreground: #616161;
+ --vscode-disabledForeground: rgba(97, 97, 97, 0.5);
+ --vscode-errorForeground: #f1897f;
+ --vscode-descriptionForeground: #717171;
+ --vscode-icon-foreground: #424242;
+ --vscode-focusBorder: #9769dc;
+ --vscode-selection-background: #c9d0d9;
+ --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);
+ --vscode-textLink-foreground: #006ab1;
+ --vscode-textLink-activeForeground: #006ab1;
+ --vscode-textPreformat-foreground: #a31515;
+ --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(220, 220, 220, 0.4);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-input-background: #ffffff;
+ --vscode-input-foreground: #616161;
+ --vscode-inputOption-activeBorder: #adafb7;
+ --vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-inputOption-activeBackground: rgba(151, 105, 220, 0.2);
+ --vscode-inputOption-activeForeground: #000000;
+ --vscode-input-placeholderForeground: rgba(97, 97, 97, 0.5);
+ --vscode-inputValidation-infoBackground: #f2fcff;
+ --vscode-inputValidation-infoBorder: #4ec1e5;
+ --vscode-inputValidation-warningBackground: #fffee2;
+ --vscode-inputValidation-warningBorder: #ffe055;
+ --vscode-inputValidation-errorBackground: #ffeaea;
+ --vscode-inputValidation-errorBorder: #f1897f;
+ --vscode-dropdown-background: #f5f5f5;
+ --vscode-dropdown-foreground: #616161;
+ --vscode-dropdown-border: #cecece;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #705697;
+ --vscode-button-hoverBackground: #5a4579;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #5f6a79;
+ --vscode-button-secondaryHoverBackground: #4c5561;
+ --vscode-badge-background: rgba(112, 86, 151, 0.67);
+ --vscode-badge-foreground: #333333;
+ --vscode-scrollbar-shadow: #dddddd;
+ --vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-progressBar-background: #705697;
+ --vscode-editorError-foreground: #e51400;
+ --vscode-editorWarning-foreground: #bf8803;
+ --vscode-editorInfo-foreground: #1a85ff;
+ --vscode-editorHint-foreground: #6c6c6c;
+ --vscode-sash-hoverBorder: #9769dc;
+ --vscode-editor-background: #f5f5f5;
+ --vscode-editor-foreground: #333333;
+ --vscode-editorStickyScroll-background: #f5f5f5;
+ --vscode-editorStickyScrollHover-background: #f0f0f0;
+ --vscode-editorWidget-background: #f3f3f3;
+ --vscode-editorWidget-foreground: #616161;
+ --vscode-editorWidget-border: #c8c8c8;
+ --vscode-quickInput-background: #f3f3f3;
+ --vscode-quickInput-foreground: #616161;
+ --vscode-quickInputTitle-background: rgba(0, 0, 0, 0.06);
+ --vscode-pickerGroup-foreground: #a6b39b;
+ --vscode-pickerGroup-border: #749351;
+ --vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4);
+ --vscode-keybindingLabel-foreground: #555555;
+ --vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4);
+ --vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
+ --vscode-editor-selectionBackground: #c9d0d9;
+ --vscode-editor-inactiveSelectionBackground: rgba(201, 208, 217, 0.5);
+ --vscode-editor-selectionHighlightBackground: rgba(224, 228, 234, 0.6);
+ --vscode-editor-findMatchBackground: #bf9cac;
+ --vscode-editor-findMatchHighlightBackground: rgba(237, 201, 216, 0.6);
+ --vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
+ --vscode-searchEditor-findMatchBackground: rgba(237, 201, 216, 0.4);
+ --vscode-search-resultsInfoForeground: #616161;
+ --vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
+ --vscode-editorHoverWidget-background: #f3f3f3;
+ --vscode-editorHoverWidget-foreground: #616161;
+ --vscode-editorHoverWidget-border: #c8c8c8;
+ --vscode-editorHoverWidget-statusBarBackground: #e7e7e7;
+ --vscode-editorLink-activeForeground: #0000ff;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(112, 86, 151, 0.07);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(112, 86, 151, 0.07);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(112, 86, 151, 0.07);
+ --vscode-editorLightBulb-foreground: #ddb100;
+ --vscode-editorLightBulbAutoFix-foreground: #007acc;
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.25);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #e4e4e4;
+ --vscode-diffEditor-unchangedRegionForeground: #4d4c4c;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(184, 184, 184, 0.16);
+ --vscode-list-focusOutline: #9769dc;
+ --vscode-list-activeSelectionBackground: #c4d9b1;
+ --vscode-list-activeSelectionForeground: #6c6c6c;
+ --vscode-list-inactiveSelectionBackground: #d3dbcd;
+ --vscode-list-hoverBackground: #e0e0e0;
+ --vscode-list-dropBackground: #d6ebff;
+ --vscode-list-highlightForeground: #9769dc;
+ --vscode-list-focusHighlightForeground: #9769dc;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #b01011;
+ --vscode-list-warningForeground: #855f00;
+ --vscode-listFilterWidget-background: #f3f3f3;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-list-filterMatchBackground: rgba(237, 201, 216, 0.6);
+ --vscode-tree-indentGuidesStroke: #a9a9a9;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(169, 169, 169, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-list-deemphasizedForeground: #8e8e90;
+ --vscode-checkbox-background: #f5f5f5;
+ --vscode-checkbox-selectBackground: #f3f3f3;
+ --vscode-checkbox-foreground: #616161;
+ --vscode-checkbox-border: #cecece;
+ --vscode-checkbox-selectBorder: #424242;
+ --vscode-quickInputList-focusForeground: #6c6c6c;
+ --vscode-quickInputList-focusBackground: #cadeb9;
+ --vscode-menu-foreground: #616161;
+ --vscode-menu-background: #f5f5f5;
+ --vscode-menu-selectionForeground: #6c6c6c;
+ --vscode-menu-selectionBackground: #c4d9b1;
+ --vscode-menu-separatorBackground: #d4d4d4;
+ --vscode-toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-toolbar-activeBackground: rgba(166, 166, 166, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
+ --vscode-breadcrumb-foreground: rgba(97, 97, 97, 0.8);
+ --vscode-breadcrumb-background: #f5f5f5;
+ --vscode-breadcrumb-focusForeground: #4e4e4e;
+ --vscode-breadcrumb-activeSelectionForeground: #4e4e4e;
+ --vscode-breadcrumbPicker-background: #f3f3f3;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;
+ --vscode-minimap-selectionHighlight: #c9d0d9;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #bf8803;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(100, 100, 100, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3);
+ --vscode-problemsErrorIcon-foreground: #e51400;
+ --vscode-problemsWarningIcon-foreground: #bf8803;
+ --vscode-problemsInfoIcon-foreground: #1a85ff;
+ --vscode-charts-foreground: #616161;
+ --vscode-charts-lines: rgba(97, 97, 97, 0.5);
+ --vscode-charts-red: #e51400;
+ --vscode-charts-blue: #1a85ff;
+ --vscode-charts-yellow: #bf8803;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #388a34;
+ --vscode-charts-purple: #652d90;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #616161;
+ --vscode-symbolIcon-booleanForeground: #616161;
+ --vscode-symbolIcon-classForeground: #d67e00;
+ --vscode-symbolIcon-colorForeground: #616161;
+ --vscode-symbolIcon-constantForeground: #616161;
+ --vscode-symbolIcon-constructorForeground: #652d90;
+ --vscode-symbolIcon-enumeratorForeground: #d67e00;
+ --vscode-symbolIcon-enumeratorMemberForeground: #007acc;
+ --vscode-symbolIcon-eventForeground: #d67e00;
+ --vscode-symbolIcon-fieldForeground: #007acc;
+ --vscode-symbolIcon-fileForeground: #616161;
+ --vscode-symbolIcon-folderForeground: #616161;
+ --vscode-symbolIcon-functionForeground: #652d90;
+ --vscode-symbolIcon-interfaceForeground: #007acc;
+ --vscode-symbolIcon-keyForeground: #616161;
+ --vscode-symbolIcon-keywordForeground: #616161;
+ --vscode-symbolIcon-methodForeground: #652d90;
+ --vscode-symbolIcon-moduleForeground: #616161;
+ --vscode-symbolIcon-namespaceForeground: #616161;
+ --vscode-symbolIcon-nullForeground: #616161;
+ --vscode-symbolIcon-numberForeground: #616161;
+ --vscode-symbolIcon-objectForeground: #616161;
+ --vscode-symbolIcon-operatorForeground: #616161;
+ --vscode-symbolIcon-packageForeground: #616161;
+ --vscode-symbolIcon-propertyForeground: #616161;
+ --vscode-symbolIcon-referenceForeground: #616161;
+ --vscode-symbolIcon-snippetForeground: #616161;
+ --vscode-symbolIcon-stringForeground: #616161;
+ --vscode-symbolIcon-structForeground: #616161;
+ --vscode-symbolIcon-textForeground: #616161;
+ --vscode-symbolIcon-typeParameterForeground: #616161;
+ --vscode-symbolIcon-unitForeground: #616161;
+ --vscode-symbolIcon-variableForeground: #007acc;
+ --vscode-actionBar-toggledBackground: rgba(151, 105, 220, 0.2);
+ --vscode-editorHoverWidget-highlightForeground: #9769dc;
+ --vscode-editor-lineHighlightBackground: #e4f6d4;
+ --vscode-editor-lineHighlightBorder: #eeeeee;
+ --vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-editor-symbolHighlightBackground: rgba(237, 201, 216, 0.6);
+ --vscode-editorCursor-foreground: #54494b;
+ --vscode-editorWhitespace-foreground: #aaaaaa;
+ --vscode-editorLineNumber-foreground: #6d705b;
+ --vscode-editorIndentGuide-background: rgba(170, 170, 170, 0.38);
+ --vscode-editorIndentGuide-activeBackground: rgba(119, 119, 119, 0.69);
+ --vscode-editorIndentGuide-background1: rgba(170, 170, 170, 0.38);
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: rgba(119, 119, 119, 0.69);
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #0b216f;
+ --vscode-editorLineNumber-activeForeground: #9769dc;
+ --vscode-editorRuler-foreground: #d3d3d3;
+ --vscode-editorCodeLens-foreground: #919191;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #b9b9b9;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #f5f5f5;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
+ --vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #bf8803;
+ --vscode-editorOverviewRuler-infoForeground: #1a85ff;
+ --vscode-editorBracketHighlight-foreground1: #0431fa;
+ --vscode-editorBracketHighlight-foreground2: #319331;
+ --vscode-editorBracketHighlight-foreground3: #7b3814;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #cea33d;
+ --vscode-editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(201, 208, 217, 0.3);
+ --vscode-editorGutter-foldingControlForeground: #424242;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: #f2f8fc;
+ --vscode-peekViewTitleLabel-foreground: #000000;
+ --vscode-peekViewTitleDescription-foreground: #616161;
+ --vscode-peekView-border: #705697;
+ --vscode-peekViewResult-background: #f2f8fc;
+ --vscode-peekViewResult-lineForeground: #646465;
+ --vscode-peekViewResult-fileForeground: #1e1e1e;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #6c6c6c;
+ --vscode-peekViewEditor-background: #f2f8fc;
+ --vscode-peekViewEditorGutter-background: #f2f8fc;
+ --vscode-peekViewEditorStickyScroll-background: #f2f8fc;
+ --vscode-peekViewResult-matchHighlightBackground: #93c6d6;
+ --vscode-peekViewEditor-matchHighlightBackground: #c2dfe3;
+ --vscode-editorMarkerNavigationError-background: #e51400;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #bf8803;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #1a85ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #f5f5f5;
+ --vscode-editorSuggestWidget-background: #f3f3f3;
+ --vscode-editorSuggestWidget-border: #c8c8c8;
+ --vscode-editorSuggestWidget-foreground: #333333;
+ --vscode-editorSuggestWidget-selectedForeground: #6c6c6c;
+ --vscode-editorSuggestWidget-selectedBackground: #cadeb9;
+ --vscode-editorSuggestWidget-highlightForeground: #9769dc;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #9769dc;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(51, 51, 51, 0.5);
+ --vscode-tab-activeBackground: #f5f5f5;
+ --vscode-tab-unfocusedActiveBackground: #f5f5f5;
+ --vscode-tab-inactiveBackground: #ececec;
+ --vscode-tab-unfocusedInactiveBackground: #ececec;
+ --vscode-tab-activeForeground: #333333;
+ --vscode-tab-inactiveForeground: rgba(51, 51, 51, 0.7);
+ --vscode-tab-unfocusedActiveForeground: rgba(51, 51, 51, 0.7);
+ --vscode-tab-unfocusedInactiveForeground: rgba(51, 51, 51, 0.35);
+ --vscode-tab-border: #f3f3f3;
+ --vscode-tab-lastPinnedBorder: #c9d0d9;
+ --vscode-tab-activeModifiedBorder: #33aaee;
+ --vscode-tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25);
+ --vscode-editorPane-background: #f5f5f5;
+ --vscode-editorGroupHeader-tabsBackground: #f3f3f3;
+ --vscode-editorGroupHeader-noTabsBackground: #f5f5f5;
+ --vscode-editorGroup-border: #e7e7e7;
+ --vscode-editorGroup-dropBackground: rgba(201, 208, 217, 0.53);
+ --vscode-editorGroup-dropIntoPromptForeground: #616161;
+ --vscode-editorGroup-dropIntoPromptBackground: #f3f3f3;
+ --vscode-sideBySideEditor-horizontalBorder: #e7e7e7;
+ --vscode-sideBySideEditor-verticalBorder: #e7e7e7;
+ --vscode-panel-background: #f5f5f5;
+ --vscode-panel-border: rgba(128, 128, 128, 0.35);
+ --vscode-panelTitle-activeForeground: #424242;
+ --vscode-panelTitle-inactiveForeground: rgba(66, 66, 66, 0.75);
+ --vscode-panelTitle-activeBorder: #424242;
+ --vscode-panelInput-border: #dddddd;
+ --vscode-panel-dropBorder: #424242;
+ --vscode-panelSection-dropBackground: rgba(201, 208, 217, 0.53);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: rgba(128, 128, 128, 0.35);
+ --vscode-banner-background: #89b262;
+ --vscode-banner-foreground: #6c6c6c;
+ --vscode-banner-iconForeground: #1a85ff;
+ --vscode-statusBar-foreground: #ffffff;
+ --vscode-statusBar-noFolderForeground: #ffffff;
+ --vscode-statusBar-background: #705697;
+ --vscode-statusBar-noFolderBackground: #705697;
+ --vscode-statusBar-focusBorder: #ffffff;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #ffffff;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #ffffff;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #ffffff;
+ --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);
+ --vscode-statusBarItem-prominentHoverForeground: #ffffff;
+ --vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+ --vscode-statusBarItem-errorBackground: #c72516;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #725102;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #ededf5;
+ --vscode-activityBar-foreground: #705697;
+ --vscode-activityBar-inactiveForeground: rgba(112, 86, 151, 0.4);
+ --vscode-activityBar-activeBorder: #705697;
+ --vscode-activityBar-dropBorder: #705697;
+ --vscode-activityBarBadge-background: #705697;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-profileBadge-background: #c4c4c4;
+ --vscode-profileBadge-foreground: #333333;
+ --vscode-statusBarItem-remoteBackground: #4e3c69;
+ --vscode-statusBarItem-remoteForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #705697;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #f2f2f2;
+ --vscode-sideBar-dropBackground: rgba(201, 208, 217, 0.53);
+ --vscode-sideBarSectionHeader-background: #ede8ef;
+ --vscode-titleBar-activeForeground: #333333;
+ --vscode-titleBar-inactiveForeground: rgba(51, 51, 51, 0.6);
+ --vscode-titleBar-activeBackground: #c4b7d7;
+ --vscode-titleBar-inactiveBackground: rgba(196, 183, 215, 0.6);
+ --vscode-menubar-selectionForeground: #333333;
+ --vscode-menubar-selectionBackground: rgba(184, 184, 184, 0.31);
+ --vscode-notifications-foreground: #616161;
+ --vscode-notifications-background: #f3f3f3;
+ --vscode-notificationLink-foreground: #006ab1;
+ --vscode-notificationCenterHeader-background: #e7e7e7;
+ --vscode-notifications-border: #e7e7e7;
+ --vscode-notificationsErrorIcon-foreground: #e51400;
+ --vscode-notificationsWarningIcon-foreground: #bf8803;
+ --vscode-notificationsInfoIcon-foreground: #1a85ff;
+ --vscode-commandCenter-foreground: #333333;
+ --vscode-commandCenter-activeForeground: #333333;
+ --vscode-commandCenter-inactiveForeground: rgba(51, 51, 51, 0.6);
+ --vscode-commandCenter-background: rgba(0, 0, 0, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
+ --vscode-commandCenter-border: rgba(51, 51, 51, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(51, 51, 51, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(51, 51, 51, 0.15);
+ --vscode-chat-requestBorder: rgba(0, 0, 0, 0.1);
+ --vscode-chat-slashCommandBackground: rgba(112, 86, 151, 0.67);
+ --vscode-chat-slashCommandForeground: #333333;
+ --vscode-simpleFindWidget-sashBorder: #c8c8c8;
+ --vscode-commentsView-resolvedIcon: rgba(97, 97, 97, 0.5);
+ --vscode-commentsView-unresolvedIcon: #9769dc;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #9769dc;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(151, 105, 220, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(151, 105, 220, 0.1);
+ --vscode-editorGutter-commentRangeForeground: #c8d2c0;
+ --vscode-editorOverviewRuler-commentForeground: #c8d2c0;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #c8d2c0;
+ --vscode-editorGutter-commentGlyphForeground: #333333;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #333333;
+ --vscode-debugToolBar-background: #f3f3f3;
+ --vscode-debugIcon-startForeground: #388a34;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.4);
+ --vscode-mergeEditor-changeBase\.background: #ffcccc;
+ --vscode-mergeEditor-changeBase\.word\.background: #ffa3a3;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #444444;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(68, 68, 68, 0.7);
+ --vscode-settings-modifiedItemIndicator: #66afe0;
+ --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);
+ --vscode-settings-dropdownBackground: #f5f5f5;
+ --vscode-settings-dropdownForeground: #616161;
+ --vscode-settings-dropdownBorder: #cecece;
+ --vscode-settings-dropdownListBorder: #c8c8c8;
+ --vscode-settings-checkboxBackground: #f5f5f5;
+ --vscode-settings-checkboxForeground: #616161;
+ --vscode-settings-checkboxBorder: #cecece;
+ --vscode-settings-textInputBackground: #ffffff;
+ --vscode-settings-textInputForeground: #616161;
+ --vscode-settings-numberInputBackground: #ffffff;
+ --vscode-settings-numberInputForeground: #616161;
+ --vscode-settings-focusedRowBackground: rgba(224, 224, 224, 0.6);
+ --vscode-settings-rowHoverBackground: rgba(224, 224, 224, 0.3);
+ --vscode-settings-focusedRowBorder: #9769dc;
+ --vscode-terminal-foreground: #333333;
+ --vscode-terminal-selectionBackground: #c9d0d9;
+ --vscode-terminal-inactiveSelectionBackground: rgba(201, 208, 217, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #2090d3;
+ --vscode-terminalCommandDecoration-errorBackground: #e51400;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: rgba(128, 128, 128, 0.35);
+ --vscode-terminal-findMatchBackground: #bf9cac;
+ --vscode-terminal-hoverHighlightBackground: rgba(173, 214, 255, 0.07);
+ --vscode-terminal-findMatchHighlightBackground: rgba(237, 201, 216, 0.6);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(201, 208, 217, 0.53);
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #e51400;
+ --vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #e51400;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(51, 51, 51, 0.5);
+ --vscode-welcomePage-tileBackground: #f0f0f7;
+ --vscode-welcomePage-tileHoverBackground: #dbdbdb;
+ --vscode-welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
+ --vscode-welcomePage-progress\.background: #ffffff;
+ --vscode-welcomePage-progress\.foreground: #006ab1;
+ --vscode-walkthrough-stepTitle\.foreground: #000000;
+ --vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.08);
+ --vscode-inlineChat-background: #f3f3f3;
+ --vscode-inlineChat-border: #c8c8c8;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-inlineChat-regionHighlight: rgba(173, 214, 255, 0.15);
+ --vscode-inlineChatInput-border: #c8c8c8;
+ --vscode-inlineChatInput-focusBorder: #9769dc;
+ --vscode-inlineChatInput-placeholderForeground: rgba(97, 97, 97, 0.5);
+ --vscode-inlineChatInput-background: #ffffff;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.13);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-debugExceptionWidget-border: #a31515;
+ --vscode-debugExceptionWidget-background: #f1dfde;
+ --vscode-ports-iconRunningProcessForeground: #749351;
+ --vscode-statusBar-debuggingBackground: #705697;
+ --vscode-statusBar-debuggingForeground: #ffffff;
+ --vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: #2090d3;
+ --vscode-editorGutter-addedBackground: #48985d;
+ --vscode-editorGutter-deletedBackground: #e51400;
+ --vscode-minimapGutter-modifiedBackground: #2090d3;
+ --vscode-minimapGutter-addedBackground: #48985d;
+ --vscode-minimapGutter-deletedBackground: #e51400;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: #d3dbcd;
+ --vscode-notebook-focusedEditorBorder: #9769dc;
+ --vscode-notebookStatusSuccessIcon-foreground: #388a34;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #388a34;
+ --vscode-notebookStatusErrorIcon-foreground: #f1897f;
+ --vscode-notebookStatusRunningIcon-foreground: #616161;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #d3dbcd;
+ --vscode-notebook-selectedCellBorder: #d3dbcd;
+ --vscode-notebook-focusedCellBorder: #9769dc;
+ --vscode-notebook-inactiveFocusedCellBorder: #d3dbcd;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
+ --vscode-notebook-cellInsertionIndicator: #9769dc;
+ --vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-notebook-cellEditorBackground: #f2f2f2;
+ --vscode-notebook-editorBackground: #f5f5f5;
+ --vscode-keybindingTable-headerBackground: rgba(97, 97, 97, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-debugTokenExpression-name: #9b46b0;
+ --vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8);
+ --vscode-debugTokenExpression-string: #a31515;
+ --vscode-debugTokenExpression-boolean: #0000ff;
+ --vscode-debugTokenExpression-number: #098658;
+ --vscode-debugTokenExpression-error: #e51400;
+ --vscode-debugView-exceptionLabelForeground: #ffffff;
+ --vscode-debugView-exceptionLabelBackground: #a31515;
+ --vscode-debugView-stateLabelForeground: #616161;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #1a85ff;
+ --vscode-debugConsole-warningForeground: #bf8803;
+ --vscode-debugConsole-errorForeground: #f1897f;
+ --vscode-debugConsole-sourceForeground: #616161;
+ --vscode-debugConsoleInputIcon-foreground: #616161;
+ --vscode-debugIcon-pauseForeground: #007acc;
+ --vscode-debugIcon-stopForeground: #a1260d;
+ --vscode-debugIcon-disconnectForeground: #a1260d;
+ --vscode-debugIcon-restartForeground: #388a34;
+ --vscode-debugIcon-stepOverForeground: #007acc;
+ --vscode-debugIcon-stepIntoForeground: #007acc;
+ --vscode-debugIcon-stepOutForeground: #007acc;
+ --vscode-debugIcon-continueForeground: #007acc;
+ --vscode-debugIcon-stepBackForeground: #007acc;
+ --vscode-scm-providerBorder: #c8c8c8;
+ --vscode-extensionButton-background: #705697;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #5a4579;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #705697;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: #5a4579;
+ --vscode-extensionIcon-starForeground: #df6100;
+ --vscode-extensionIcon-verifiedForeground: #006ab1;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #b51e78;
+ --vscode-terminal-ansiBlack: #000000;
+ --vscode-terminal-ansiRed: #cd3131;
+ --vscode-terminal-ansiGreen: #00bc00;
+ --vscode-terminal-ansiYellow: #949800;
+ --vscode-terminal-ansiBlue: #0451a5;
+ --vscode-terminal-ansiMagenta: #bc05bc;
+ --vscode-terminal-ansiCyan: #0598bc;
+ --vscode-terminal-ansiWhite: #555555;
+ --vscode-terminal-ansiBrightBlack: #666666;
+ --vscode-terminal-ansiBrightRed: #cd3131;
+ --vscode-terminal-ansiBrightGreen: #14ce14;
+ --vscode-terminal-ansiBrightYellow: #b5ba00;
+ --vscode-terminal-ansiBrightBlue: #0451a5;
+ --vscode-terminal-ansiBrightMagenta: #bc05bc;
+ --vscode-terminal-ansiBrightCyan: #0598bc;
+ --vscode-terminal-ansiBrightWhite: #a5a5a5;
+ --vscode-interactive-activeCodeBorder: #705697;
+ --vscode-interactive-inactiveCodeBorder: #d3dbcd;
+ --vscode-gitDecoration-addedResourceForeground: #587c0c;
+ --vscode-gitDecoration-modifiedResourceForeground: #895503;
+ --vscode-gitDecoration-deletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-renamedResourceForeground: #007100;
+ --vscode-gitDecoration-untrackedResourceForeground: #007100;
+ --vscode-gitDecoration-ignoredResourceForeground: #8e8e90;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #895503;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-conflictingResourceForeground: #ad0707;
+ --vscode-gitDecoration-submoduleResourceForeground: #1258a7;
+}
diff --git a/mynah-ui/example/src/styles/themes/light-solarized.scss b/mynah-ui/example/src/styles/themes/light-solarized.scss
new file mode 100644
index 0000000000..849bcd44a4
--- /dev/null
+++ b/mynah-ui/example/src/styles/themes/light-solarized.scss
@@ -0,0 +1,607 @@
+html[theme='light-solarized']:root {
+ --vscode-foreground: #616161;
+ --vscode-disabledForeground: rgba(97, 97, 97, 0.5);
+ --vscode-errorForeground: #a1260d;
+ --vscode-descriptionForeground: #717171;
+ --vscode-icon-foreground: #424242;
+ --vscode-focusBorder: #b49471;
+ --vscode-selection-background: rgba(135, 139, 145, 0.5);
+ --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);
+ --vscode-textLink-foreground: #006ab1;
+ --vscode-textLink-activeForeground: #006ab1;
+ --vscode-textPreformat-foreground: #a31515;
+ --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+ --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+ --vscode-textCodeBlock-background: rgba(220, 220, 220, 0.4);
+ --vscode-widget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-input-background: #ddd6c1;
+ --vscode-input-foreground: #586e75;
+ --vscode-inputOption-activeBorder: #d3af86;
+ --vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-inputOption-activeBackground: rgba(180, 148, 113, 0.2);
+ --vscode-inputOption-activeForeground: #000000;
+ --vscode-input-placeholderForeground: rgba(88, 110, 117, 0.67);
+ --vscode-inputValidation-infoBackground: #d6ecf2;
+ --vscode-inputValidation-infoBorder: #007acc;
+ --vscode-inputValidation-warningBackground: #f6f5d2;
+ --vscode-inputValidation-warningBorder: #b89500;
+ --vscode-inputValidation-errorBackground: #f2dede;
+ --vscode-inputValidation-errorBorder: #be1100;
+ --vscode-dropdown-background: #eee8d5;
+ --vscode-dropdown-foreground: #616161;
+ --vscode-dropdown-border: #d3af86;
+ --vscode-button-foreground: #ffffff;
+ --vscode-button-separator: rgba(255, 255, 255, 0.4);
+ --vscode-button-background: #ac9d57;
+ --vscode-button-hoverBackground: #8b7e44;
+ --vscode-button-secondaryForeground: #ffffff;
+ --vscode-button-secondaryBackground: #5f6a79;
+ --vscode-button-secondaryHoverBackground: #4c5561;
+ --vscode-badge-background: rgba(181, 137, 0, 0.67);
+ --vscode-badge-foreground: #333333;
+ --vscode-scrollbar-shadow: #dddddd;
+ --vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-progressBar-background: #b58900;
+ --vscode-editorError-foreground: #e51400;
+ --vscode-editorWarning-foreground: #bf8803;
+ --vscode-editorInfo-foreground: #1a85ff;
+ --vscode-editorHint-foreground: #6c6c6c;
+ --vscode-sash-hoverBorder: #b49471;
+ --vscode-editor-background: #fdf6e3;
+ --vscode-editor-foreground: #657b83;
+ --vscode-editorStickyScroll-background: #fdf6e3;
+ --vscode-editorStickyScrollHover-background: #f0f0f0;
+ --vscode-editorWidget-background: #eee8d5;
+ --vscode-editorWidget-foreground: #616161;
+ --vscode-editorWidget-border: #c8c8c8;
+ --vscode-quickInput-background: #eee8d5;
+ --vscode-quickInput-foreground: #616161;
+ --vscode-quickInputTitle-background: rgba(0, 0, 0, 0.06);
+ --vscode-pickerGroup-foreground: rgba(42, 161, 152, 0.6);
+ --vscode-pickerGroup-border: rgba(42, 161, 152, 0.6);
+ --vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4);
+ --vscode-keybindingLabel-foreground: #555555;
+ --vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4);
+ --vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
+ --vscode-editor-selectionBackground: #eee8d5;
+ --vscode-editor-inactiveSelectionBackground: rgba(238, 232, 213, 0.5);
+ --vscode-editor-selectionHighlightBackground: rgba(243, 239, 225, 0.6);
+ --vscode-editor-findMatchBackground: #a8ac94;
+ --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
+ --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
+ --vscode-search-resultsInfoForeground: #616161;
+ --vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
+ --vscode-editorHoverWidget-background: #ccc4b0;
+ --vscode-editorHoverWidget-foreground: #616161;
+ --vscode-editorHoverWidget-border: #c8c8c8;
+ --vscode-editorHoverWidget-statusBarBackground: #c5bba5;
+ --vscode-editorLink-activeForeground: #0000ff;
+ --vscode-editorInlayHint-foreground: #969696;
+ --vscode-editorInlayHint-background: rgba(181, 137, 0, 0.07);
+ --vscode-editorInlayHint-typeForeground: #969696;
+ --vscode-editorInlayHint-typeBackground: rgba(181, 137, 0, 0.07);
+ --vscode-editorInlayHint-parameterForeground: #969696;
+ --vscode-editorInlayHint-parameterBackground: rgba(181, 137, 0, 0.07);
+ --vscode-editorLightBulb-foreground: #ddb100;
+ --vscode-editorLightBulbAutoFix-foreground: #007acc;
+ --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.25);
+ --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+ --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
+ --vscode-diffEditor-unchangedRegionBackground: #e4e4e4;
+ --vscode-diffEditor-unchangedRegionForeground: #4d4c4c;
+ --vscode-diffEditor-unchangedCodeBackground: rgba(184, 184, 184, 0.16);
+ --vscode-list-focusOutline: #b49471;
+ --vscode-list-activeSelectionBackground: #dfca88;
+ --vscode-list-activeSelectionForeground: #6c6c6c;
+ --vscode-list-inactiveSelectionBackground: #d1cbb8;
+ --vscode-list-hoverBackground: rgba(223, 202, 136, 0.27);
+ --vscode-list-dropBackground: #d6ebff;
+ --vscode-list-highlightForeground: #b58900;
+ --vscode-list-focusHighlightForeground: #b58900;
+ --vscode-list-invalidItemForeground: #b89500;
+ --vscode-list-errorForeground: #b01011;
+ --vscode-list-warningForeground: #855f00;
+ --vscode-listFilterWidget-background: #eee8d5;
+ --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+ --vscode-listFilterWidget-noMatchesOutline: #be1100;
+ --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
+ --vscode-tree-indentGuidesStroke: #a9a9a9;
+ --vscode-tree-inactiveIndentGuidesStroke: rgba(169, 169, 169, 0.4);
+ --vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
+ --vscode-tree-tableOddRowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-list-deemphasizedForeground: #8e8e90;
+ --vscode-checkbox-background: #eee8d5;
+ --vscode-checkbox-selectBackground: #eee8d5;
+ --vscode-checkbox-foreground: #616161;
+ --vscode-checkbox-border: #d3af86;
+ --vscode-checkbox-selectBorder: #424242;
+ --vscode-quickInputList-focusForeground: #6c6c6c;
+ --vscode-quickInputList-focusBackground: rgba(223, 202, 136, 0.4);
+ --vscode-menu-foreground: #616161;
+ --vscode-menu-background: #eee8d5;
+ --vscode-menu-selectionForeground: #6c6c6c;
+ --vscode-menu-selectionBackground: #dfca88;
+ --vscode-menu-separatorBackground: #d4d4d4;
+ --vscode-toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
+ --vscode-toolbar-activeBackground: rgba(166, 166, 166, 0.31);
+ --vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
+ --vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
+ --vscode-breadcrumb-foreground: rgba(97, 97, 97, 0.8);
+ --vscode-breadcrumb-background: #fdf6e3;
+ --vscode-breadcrumb-focusForeground: #4e4e4e;
+ --vscode-breadcrumb-activeSelectionForeground: #4e4e4e;
+ --vscode-breadcrumbPicker-background: #eee8d5;
+ --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+ --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+ --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+ --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+ --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+ --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+ --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+ --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+ --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+ --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-minimap-findMatchHighlight: #d18616;
+ --vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;
+ --vscode-minimap-selectionHighlight: #eee8d5;
+ --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+ --vscode-minimap-warningHighlight: #bf8803;
+ --vscode-minimap-foregroundOpacity: #000000;
+ --vscode-minimapSlider-background: rgba(100, 100, 100, 0.2);
+ --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+ --vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3);
+ --vscode-problemsErrorIcon-foreground: #e51400;
+ --vscode-problemsWarningIcon-foreground: #bf8803;
+ --vscode-problemsInfoIcon-foreground: #1a85ff;
+ --vscode-charts-foreground: #616161;
+ --vscode-charts-lines: rgba(97, 97, 97, 0.5);
+ --vscode-charts-red: #e51400;
+ --vscode-charts-blue: #1a85ff;
+ --vscode-charts-yellow: #bf8803;
+ --vscode-charts-orange: #d18616;
+ --vscode-charts-green: #388a34;
+ --vscode-charts-purple: #652d90;
+ --vscode-diffEditor-move\.border: rgba(139, 139, 139, 0.61);
+ --vscode-diffEditor-moveActive\.border: #ffa500;
+ --vscode-symbolIcon-arrayForeground: #616161;
+ --vscode-symbolIcon-booleanForeground: #616161;
+ --vscode-symbolIcon-classForeground: #d67e00;
+ --vscode-symbolIcon-colorForeground: #616161;
+ --vscode-symbolIcon-constantForeground: #616161;
+ --vscode-symbolIcon-constructorForeground: #652d90;
+ --vscode-symbolIcon-enumeratorForeground: #d67e00;
+ --vscode-symbolIcon-enumeratorMemberForeground: #007acc;
+ --vscode-symbolIcon-eventForeground: #d67e00;
+ --vscode-symbolIcon-fieldForeground: #007acc;
+ --vscode-symbolIcon-fileForeground: #616161;
+ --vscode-symbolIcon-folderForeground: #616161;
+ --vscode-symbolIcon-functionForeground: #652d90;
+ --vscode-symbolIcon-interfaceForeground: #007acc;
+ --vscode-symbolIcon-keyForeground: #616161;
+ --vscode-symbolIcon-keywordForeground: #616161;
+ --vscode-symbolIcon-methodForeground: #652d90;
+ --vscode-symbolIcon-moduleForeground: #616161;
+ --vscode-symbolIcon-namespaceForeground: #616161;
+ --vscode-symbolIcon-nullForeground: #616161;
+ --vscode-symbolIcon-numberForeground: #616161;
+ --vscode-symbolIcon-objectForeground: #616161;
+ --vscode-symbolIcon-operatorForeground: #616161;
+ --vscode-symbolIcon-packageForeground: #616161;
+ --vscode-symbolIcon-propertyForeground: #616161;
+ --vscode-symbolIcon-referenceForeground: #616161;
+ --vscode-symbolIcon-snippetForeground: #616161;
+ --vscode-symbolIcon-stringForeground: #616161;
+ --vscode-symbolIcon-structForeground: #616161;
+ --vscode-symbolIcon-textForeground: #616161;
+ --vscode-symbolIcon-typeParameterForeground: #616161;
+ --vscode-symbolIcon-unitForeground: #616161;
+ --vscode-symbolIcon-variableForeground: #007acc;
+ --vscode-actionBar-toggledBackground: rgba(180, 148, 113, 0.2);
+ --vscode-editorHoverWidget-highlightForeground: #b58900;
+ --vscode-editor-lineHighlightBackground: #eee8d5;
+ --vscode-editor-lineHighlightBorder: #eeeeee;
+ --vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-editorCursor-foreground: #657b83;
+ --vscode-editorWhitespace-foreground: rgba(88, 110, 117, 0.5);
+ --vscode-editorLineNumber-foreground: #237893;
+ --vscode-editorIndentGuide-background: rgba(88, 110, 117, 0.5);
+ --vscode-editorIndentGuide-activeBackground: rgba(8, 30, 37, 0.5);
+ --vscode-editorIndentGuide-background1: rgba(88, 110, 117, 0.5);
+ --vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground1: rgba(8, 30, 37, 0.5);
+ --vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorActiveLineNumber-foreground: #0b216f;
+ --vscode-editorLineNumber-activeForeground: #567983;
+ --vscode-editorRuler-foreground: #d3d3d3;
+ --vscode-editorCodeLens-foreground: #919191;
+ --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+ --vscode-editorBracketMatch-border: #b9b9b9;
+ --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+ --vscode-editorGutter-background: #fdf6e3;
+ --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
+ --vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47);
+ --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+ --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+ --vscode-editorOverviewRuler-warningForeground: #bf8803;
+ --vscode-editorOverviewRuler-infoForeground: #1a85ff;
+ --vscode-editorBracketHighlight-foreground1: #0431fa;
+ --vscode-editorBracketHighlight-foreground2: #319331;
+ --vscode-editorBracketHighlight-foreground3: #7b3814;
+ --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
+ --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+ --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+ --vscode-editorUnicodeHighlight-border: #cea33d;
+ --vscode-editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08);
+ --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+ --vscode-editor-foldBackground: rgba(238, 232, 213, 0.3);
+ --vscode-editorGutter-foldingControlForeground: #424242;
+ --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+ --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25);
+ --vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.25);
+ --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+ --vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+ --vscode-peekViewTitle-background: #eee8d5;
+ --vscode-peekViewTitleLabel-foreground: #000000;
+ --vscode-peekViewTitleDescription-foreground: #616161;
+ --vscode-peekView-border: #b58900;
+ --vscode-peekViewResult-background: #eee8d5;
+ --vscode-peekViewResult-lineForeground: #646465;
+ --vscode-peekViewResult-fileForeground: #1e1e1e;
+ --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+ --vscode-peekViewResult-selectionForeground: #6c6c6c;
+ --vscode-peekViewEditor-background: #fffbf2;
+ --vscode-peekViewEditorGutter-background: #fffbf2;
+ --vscode-peekViewEditorStickyScroll-background: #fffbf2;
+ --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+ --vscode-peekViewEditor-matchHighlightBackground: rgba(119, 68, 170, 0.25);
+ --vscode-editorMarkerNavigationError-background: #e51400;
+ --vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);
+ --vscode-editorMarkerNavigationWarning-background: #bf8803;
+ --vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);
+ --vscode-editorMarkerNavigationInfo-background: #1a85ff;
+ --vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
+ --vscode-editorMarkerNavigation-background: #fdf6e3;
+ --vscode-editorSuggestWidget-background: #eee8d5;
+ --vscode-editorSuggestWidget-border: #c8c8c8;
+ --vscode-editorSuggestWidget-foreground: #657b83;
+ --vscode-editorSuggestWidget-selectedForeground: #6c6c6c;
+ --vscode-editorSuggestWidget-selectedBackground: rgba(223, 202, 136, 0.4);
+ --vscode-editorSuggestWidget-highlightForeground: #b58900;
+ --vscode-editorSuggestWidget-focusHighlightForeground: #b58900;
+ --vscode-editorSuggestWidgetStatus-foreground: rgba(101, 123, 131, 0.5);
+ --vscode-tab-activeBackground: #fdf6e3;
+ --vscode-tab-unfocusedActiveBackground: #fdf6e3;
+ --vscode-tab-inactiveBackground: #d3cbb7;
+ --vscode-tab-unfocusedInactiveBackground: #d3cbb7;
+ --vscode-tab-activeForeground: #333333;
+ --vscode-tab-inactiveForeground: #586e75;
+ --vscode-tab-unfocusedActiveForeground: rgba(51, 51, 51, 0.7);
+ --vscode-tab-unfocusedInactiveForeground: rgba(88, 110, 117, 0.5);
+ --vscode-tab-border: #ddd6c1;
+ --vscode-tab-lastPinnedBorder: #fdf6e3;
+ --vscode-tab-activeModifiedBorder: #cb4b16;
+ --vscode-tab-inactiveModifiedBorder: rgba(203, 75, 22, 0.5);
+ --vscode-tab-unfocusedActiveModifiedBorder: rgba(203, 75, 22, 0.7);
+ --vscode-tab-unfocusedInactiveModifiedBorder: rgba(203, 75, 22, 0.25);
+ --vscode-editorPane-background: #fdf6e3;
+ --vscode-editorGroupHeader-tabsBackground: #d9d2c2;
+ --vscode-editorGroupHeader-noTabsBackground: #fdf6e3;
+ --vscode-editorGroup-border: #ddd6c1;
+ --vscode-editorGroup-dropBackground: rgba(221, 214, 193, 0.67);
+ --vscode-editorGroup-dropIntoPromptForeground: #616161;
+ --vscode-editorGroup-dropIntoPromptBackground: #eee8d5;
+ --vscode-sideBySideEditor-horizontalBorder: #ddd6c1;
+ --vscode-sideBySideEditor-verticalBorder: #ddd6c1;
+ --vscode-panel-background: #fdf6e3;
+ --vscode-panel-border: #ddd6c1;
+ --vscode-panelTitle-activeForeground: #424242;
+ --vscode-panelTitle-inactiveForeground: rgba(66, 66, 66, 0.75);
+ --vscode-panelTitle-activeBorder: #424242;
+ --vscode-panelInput-border: #dddddd;
+ --vscode-panel-dropBorder: #424242;
+ --vscode-panelSection-dropBackground: rgba(221, 214, 193, 0.67);
+ --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-panelSection-border: #ddd6c1;
+ --vscode-banner-background: #c6a435;
+ --vscode-banner-foreground: #6c6c6c;
+ --vscode-banner-iconForeground: #1a85ff;
+ --vscode-statusBar-foreground: #586e75;
+ --vscode-statusBar-noFolderForeground: #586e75;
+ --vscode-statusBar-background: #eee8d5;
+ --vscode-statusBar-noFolderBackground: #eee8d5;
+ --vscode-statusBar-focusBorder: #586e75;
+ --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+ --vscode-statusBarItem-focusBorder: #586e75;
+ --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-hoverForeground: #586e75;
+ --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+ --vscode-statusBarItem-prominentForeground: #586e75;
+ --vscode-statusBarItem-prominentBackground: #ddd6c1;
+ --vscode-statusBarItem-prominentHoverForeground: #586e75;
+ --vscode-statusBarItem-prominentHoverBackground: rgba(221, 214, 193, 0.6);
+ --vscode-statusBarItem-errorBackground: #611708;
+ --vscode-statusBarItem-errorForeground: #ffffff;
+ --vscode-statusBarItem-errorHoverForeground: #586e75;
+ --vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-warningBackground: #725102;
+ --vscode-statusBarItem-warningForeground: #ffffff;
+ --vscode-statusBarItem-warningHoverForeground: #586e75;
+ --vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-activityBar-background: #ddd6c1;
+ --vscode-activityBar-foreground: #584c27;
+ --vscode-activityBar-inactiveForeground: rgba(88, 76, 39, 0.4);
+ --vscode-activityBar-activeBorder: #584c27;
+ --vscode-activityBar-dropBorder: #584c27;
+ --vscode-activityBarBadge-background: #b58900;
+ --vscode-activityBarBadge-foreground: #ffffff;
+ --vscode-profileBadge-background: #c4c4c4;
+ --vscode-profileBadge-foreground: #333333;
+ --vscode-statusBarItem-remoteBackground: #ac9d57;
+ --vscode-statusBarItem-remoteForeground: #ffffff;
+ --vscode-statusBarItem-remoteHoverForeground: #586e75;
+ --vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-statusBarItem-offlineBackground: #6c1717;
+ --vscode-statusBarItem-offlineForeground: #ffffff;
+ --vscode-statusBarItem-offlineHoverForeground: #586e75;
+ --vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);
+ --vscode-extensionBadge-remoteBackground: #b58900;
+ --vscode-extensionBadge-remoteForeground: #ffffff;
+ --vscode-sideBar-background: #eee8d5;
+ --vscode-sideBarTitle-foreground: #586e75;
+ --vscode-sideBar-dropBackground: rgba(221, 214, 193, 0.67);
+ --vscode-sideBarSectionHeader-background: rgba(128, 128, 128, 0.2);
+ --vscode-titleBar-activeForeground: #333333;
+ --vscode-titleBar-inactiveForeground: rgba(51, 51, 51, 0.6);
+ --vscode-titleBar-activeBackground: #eee8d5;
+ --vscode-titleBar-inactiveBackground: rgba(238, 232, 213, 0.6);
+ --vscode-menubar-selectionForeground: #333333;
+ --vscode-menubar-selectionBackground: rgba(184, 184, 184, 0.31);
+ --vscode-notifications-foreground: #616161;
+ --vscode-notifications-background: #eee8d5;
+ --vscode-notificationLink-foreground: #006ab1;
+ --vscode-notificationCenterHeader-background: #e7dfc5;
+ --vscode-notifications-border: #e7dfc5;
+ --vscode-notificationsErrorIcon-foreground: #e51400;
+ --vscode-notificationsWarningIcon-foreground: #bf8803;
+ --vscode-notificationsInfoIcon-foreground: #1a85ff;
+ --vscode-commandCenter-foreground: #333333;
+ --vscode-commandCenter-activeForeground: #333333;
+ --vscode-commandCenter-inactiveForeground: rgba(51, 51, 51, 0.6);
+ --vscode-commandCenter-background: rgba(0, 0, 0, 0.05);
+ --vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
+ --vscode-commandCenter-border: rgba(51, 51, 51, 0.2);
+ --vscode-commandCenter-activeBorder: rgba(51, 51, 51, 0.3);
+ --vscode-commandCenter-inactiveBorder: rgba(51, 51, 51, 0.15);
+ --vscode-chat-requestBorder: rgba(0, 0, 0, 0.1);
+ --vscode-chat-slashCommandBackground: rgba(181, 137, 0, 0.67);
+ --vscode-chat-slashCommandForeground: #333333;
+ --vscode-simpleFindWidget-sashBorder: #c8c8c8;
+ --vscode-commentsView-resolvedIcon: rgba(97, 97, 97, 0.5);
+ --vscode-commentsView-unresolvedIcon: #b49471;
+ --vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
+ --vscode-editorCommentsWidget-unresolvedBorder: #b49471;
+ --vscode-editorCommentsWidget-rangeBackground: rgba(180, 148, 113, 0.1);
+ --vscode-editorCommentsWidget-rangeActiveBackground: rgba(180, 148, 113, 0.1);
+ --vscode-editorGutter-commentRangeForeground: #c9c2ac;
+ --vscode-editorOverviewRuler-commentForeground: #c9c2ac;
+ --vscode-editorOverviewRuler-commentUnresolvedForeground: #c9c2ac;
+ --vscode-editorGutter-commentGlyphForeground: #657b83;
+ --vscode-editorGutter-commentUnresolvedGlyphForeground: #657b83;
+ --vscode-debugToolBar-background: #ddd6c1;
+ --vscode-debugIcon-startForeground: #388a34;
+ --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45);
+ --vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45);
+ --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+ --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.4);
+ --vscode-mergeEditor-changeBase\.background: #ffcccc;
+ --vscode-mergeEditor-changeBase\.word\.background: #ffa3a3;
+ --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+ --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
+ --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
+ --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+ --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+ --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+ --vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
+ --vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
+ --vscode-settings-headerForeground: #444444;
+ --vscode-settings-settingsHeaderHoverForeground: rgba(68, 68, 68, 0.7);
+ --vscode-settings-modifiedItemIndicator: #66afe0;
+ --vscode-settings-headerBorder: #ddd6c1;
+ --vscode-settings-sashBorder: #ddd6c1;
+ --vscode-settings-dropdownBackground: #eee8d5;
+ --vscode-settings-dropdownForeground: #616161;
+ --vscode-settings-dropdownBorder: #d3af86;
+ --vscode-settings-dropdownListBorder: #c8c8c8;
+ --vscode-settings-checkboxBackground: #eee8d5;
+ --vscode-settings-checkboxForeground: #616161;
+ --vscode-settings-checkboxBorder: #d3af86;
+ --vscode-settings-textInputBackground: #ddd6c1;
+ --vscode-settings-textInputForeground: #586e75;
+ --vscode-settings-numberInputBackground: #ddd6c1;
+ --vscode-settings-numberInputForeground: #586e75;
+ --vscode-settings-focusedRowBackground: rgba(223, 202, 136, 0.16);
+ --vscode-settings-rowHoverBackground: rgba(223, 202, 136, 0.08);
+ --vscode-settings-focusedRowBorder: #b49471;
+ --vscode-terminal-background: #fdf6e3;
+ --vscode-terminal-foreground: #333333;
+ --vscode-terminal-selectionBackground: #eee8d5;
+ --vscode-terminal-inactiveSelectionBackground: rgba(238, 232, 213, 0.5);
+ --vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
+ --vscode-terminalCommandDecoration-successBackground: #2090d3;
+ --vscode-terminalCommandDecoration-errorBackground: #e51400;
+ --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+ --vscode-terminal-border: #ddd6c1;
+ --vscode-terminal-findMatchBackground: #a8ac94;
+ --vscode-terminal-hoverHighlightBackground: rgba(173, 214, 255, 0.07);
+ --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+ --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+ --vscode-terminal-dropBackground: rgba(221, 214, 193, 0.67);
+ --vscode-testing-iconFailed: #f14c4c;
+ --vscode-testing-iconErrored: #f14c4c;
+ --vscode-testing-iconPassed: #73c991;
+ --vscode-testing-runAction: #73c991;
+ --vscode-testing-iconQueued: #cca700;
+ --vscode-testing-iconUnset: #848484;
+ --vscode-testing-iconSkipped: #848484;
+ --vscode-testing-peekBorder: #e51400;
+ --vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);
+ --vscode-testing-message\.error\.decorationForeground: #e51400;
+ --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+ --vscode-testing-message\.info\.decorationForeground: rgba(101, 123, 131, 0.5);
+ --vscode-welcomePage-tileBackground: #eee8d5;
+ --vscode-welcomePage-tileHoverBackground: #e1d7b5;
+ --vscode-welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
+ --vscode-welcomePage-progress\.background: #ddd6c1;
+ --vscode-welcomePage-progress\.foreground: #006ab1;
+ --vscode-walkthrough-stepTitle\.foreground: #000000;
+ --vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.08);
+ --vscode-inlineChat-background: #eee8d5;
+ --vscode-inlineChat-border: #c8c8c8;
+ --vscode-inlineChat-shadow: rgba(0, 0, 0, 0.16);
+ --vscode-inlineChat-regionHighlight: rgba(173, 214, 255, 0.15);
+ --vscode-inlineChatInput-border: #c8c8c8;
+ --vscode-inlineChatInput-focusBorder: #b49471;
+ --vscode-inlineChatInput-placeholderForeground: rgba(88, 110, 117, 0.67);
+ --vscode-inlineChatInput-background: #ddd6c1;
+ --vscode-inlineChatDiff-inserted: rgba(156, 204, 44, 0.13);
+ --vscode-inlineChatDiff-removed: rgba(255, 0, 0, 0.1);
+ --vscode-debugExceptionWidget-border: #ab395b;
+ --vscode-debugExceptionWidget-background: #ddd6c1;
+ --vscode-ports-iconRunningProcessForeground: rgba(42, 161, 152, 0.6);
+ --vscode-statusBar-debuggingBackground: #eee8d5;
+ --vscode-statusBar-debuggingForeground: #586e75;
+ --vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
+ --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+ --vscode-editorGutter-modifiedBackground: #2090d3;
+ --vscode-editorGutter-addedBackground: #48985d;
+ --vscode-editorGutter-deletedBackground: #e51400;
+ --vscode-minimapGutter-modifiedBackground: #2090d3;
+ --vscode-minimapGutter-addedBackground: #48985d;
+ --vscode-minimapGutter-deletedBackground: #e51400;
+ --vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6);
+ --vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6);
+ --vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6);
+ --vscode-debugIcon-breakpointForeground: #e51400;
+ --vscode-debugIcon-breakpointDisabledForeground: #848484;
+ --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+ --vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;
+ --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+ --vscode-notebook-cellBorderColor: #d1cbb8;
+ --vscode-notebook-focusedEditorBorder: #b49471;
+ --vscode-notebookStatusSuccessIcon-foreground: #388a34;
+ --vscode-notebookEditorOverviewRuler-runningCellForeground: #388a34;
+ --vscode-notebookStatusErrorIcon-foreground: #a1260d;
+ --vscode-notebookStatusRunningIcon-foreground: #616161;
+ --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+ --vscode-notebook-selectedCellBackground: #d1cbb8;
+ --vscode-notebook-selectedCellBorder: #d1cbb8;
+ --vscode-notebook-focusedCellBorder: #b49471;
+ --vscode-notebook-inactiveFocusedCellBorder: #d1cbb8;
+ --vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
+ --vscode-notebook-cellInsertionIndicator: #b49471;
+ --vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4);
+ --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+ --vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+ --vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
+ --vscode-notebook-cellEditorBackground: #f7f0e0;
+ --vscode-notebook-editorBackground: #fdf6e3;
+ --vscode-keybindingTable-headerBackground: rgba(97, 97, 97, 0.04);
+ --vscode-keybindingTable-rowsBackground: rgba(97, 97, 97, 0.04);
+ --vscode-debugTokenExpression-name: #9b46b0;
+ --vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8);
+ --vscode-debugTokenExpression-string: #a31515;
+ --vscode-debugTokenExpression-boolean: #0000ff;
+ --vscode-debugTokenExpression-number: #098658;
+ --vscode-debugTokenExpression-error: #e51400;
+ --vscode-debugView-exceptionLabelForeground: #ffffff;
+ --vscode-debugView-exceptionLabelBackground: #a31515;
+ --vscode-debugView-stateLabelForeground: #616161;
+ --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+ --vscode-debugView-valueChangedHighlight: #569cd6;
+ --vscode-debugConsole-infoForeground: #1a85ff;
+ --vscode-debugConsole-warningForeground: #bf8803;
+ --vscode-debugConsole-errorForeground: #a1260d;
+ --vscode-debugConsole-sourceForeground: #616161;
+ --vscode-debugConsoleInputIcon-foreground: #616161;
+ --vscode-debugIcon-pauseForeground: #007acc;
+ --vscode-debugIcon-stopForeground: #a1260d;
+ --vscode-debugIcon-disconnectForeground: #a1260d;
+ --vscode-debugIcon-restartForeground: #388a34;
+ --vscode-debugIcon-stepOverForeground: #007acc;
+ --vscode-debugIcon-stepIntoForeground: #007acc;
+ --vscode-debugIcon-stepOutForeground: #007acc;
+ --vscode-debugIcon-continueForeground: #007acc;
+ --vscode-debugIcon-stepBackForeground: #007acc;
+ --vscode-scm-providerBorder: #c8c8c8;
+ --vscode-extensionButton-background: #ac9d57;
+ --vscode-extensionButton-foreground: #ffffff;
+ --vscode-extensionButton-hoverBackground: #8b7e44;
+ --vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
+ --vscode-extensionButton-prominentBackground: #b58900;
+ --vscode-extensionButton-prominentForeground: #ffffff;
+ --vscode-extensionButton-prominentHoverBackground: rgba(88, 76, 39, 0.67);
+ --vscode-extensionIcon-starForeground: #df6100;
+ --vscode-extensionIcon-verifiedForeground: #006ab1;
+ --vscode-extensionIcon-preReleaseForeground: #1d9271;
+ --vscode-extensionIcon-sponsorForeground: #b51e78;
+ --vscode-terminal-ansiBlack: #073642;
+ --vscode-terminal-ansiRed: #dc322f;
+ --vscode-terminal-ansiGreen: #859900;
+ --vscode-terminal-ansiYellow: #b58900;
+ --vscode-terminal-ansiBlue: #268bd2;
+ --vscode-terminal-ansiMagenta: #d33682;
+ --vscode-terminal-ansiCyan: #2aa198;
+ --vscode-terminal-ansiWhite: #eee8d5;
+ --vscode-terminal-ansiBrightBlack: #002b36;
+ --vscode-terminal-ansiBrightRed: #cb4b16;
+ --vscode-terminal-ansiBrightGreen: #586e75;
+ --vscode-terminal-ansiBrightYellow: #657b83;
+ --vscode-terminal-ansiBrightBlue: #839496;
+ --vscode-terminal-ansiBrightMagenta: #6c71c4;
+ --vscode-terminal-ansiBrightCyan: #93a1a1;
+ --vscode-terminal-ansiBrightWhite: #fdf6e3;
+ --vscode-interactive-activeCodeBorder: #b58900;
+ --vscode-interactive-inactiveCodeBorder: #d1cbb8;
+ --vscode-gitDecoration-addedResourceForeground: #587c0c;
+ --vscode-gitDecoration-modifiedResourceForeground: #895503;
+ --vscode-gitDecoration-deletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-renamedResourceForeground: #007100;
+ --vscode-gitDecoration-untrackedResourceForeground: #007100;
+ --vscode-gitDecoration-ignoredResourceForeground: #8e8e90;
+ --vscode-gitDecoration-stageModifiedResourceForeground: #895503;
+ --vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;
+ --vscode-gitDecoration-conflictingResourceForeground: #ad0707;
+ --vscode-gitDecoration-submoduleResourceForeground: #1258a7;
+}
diff --git a/mynah-ui/example/src/styles/variables.scss b/mynah-ui/example/src/styles/variables.scss
new file mode 100644
index 0000000000..ecae089a39
--- /dev/null
+++ b/mynah-ui/example/src/styles/variables.scss
@@ -0,0 +1,6 @@
+:root {
+ font-size: 14px !important;
+ --mynah-font-family: system-ui;
+ --skeleton-default: var(--mynah-color-text-weak);
+ --skeleton-selected: var(--mynah-color-button);
+}
diff --git a/mynah-ui/example/src/theme-builder/base-theme-dark-config.json b/mynah-ui/example/src/theme-builder/base-theme-dark-config.json
new file mode 100644
index 0000000000..fd22ae6c02
--- /dev/null
+++ b/mynah-ui/example/src/theme-builder/base-theme-dark-config.json
@@ -0,0 +1,451 @@
+{
+ "--mynah-max-width": {
+ "type": "measurement",
+ "description": "Max width for mynah-ui container",
+ "units": ["px", "rem", "vw", ""],
+ "unit": "px",
+ "category": "sizing",
+ "value": "2560"
+ },
+ "--mynah-sizing-base": {
+ "type": "measurement",
+ "description": "Base spacing value used on paddings, margins etc.",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "category": "sizing",
+ "value": "0.2"
+ },
+ "--mynah-chat-wrapper-spacing": {
+ "type": "text",
+ "description": "Chat wrapper spacing value used on paddings and the distance between cards",
+ "category": "sizing",
+ "value": "var(--mynah-sizing-4)"
+ },
+ "--mynah-font-family": {
+ "type": "text",
+ "description": "Base font-family",
+ "category": "font-family",
+ "value": "system-ui, -apple-system, sans-serif"
+ },
+ "--mynah-syntax-code-font-family": {
+ "type": "text",
+ "description": "Code blocks' font-family",
+ "category": "font-family",
+ "value": "monospace"
+ },
+ "--mynah-color-text-default": {
+ "type": "color",
+ "description": "Default text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#cad2f2"
+ },
+ "--mynah-color-text-alternate": {
+ "type": "color",
+ "description": "Default text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-color-text-strong": {
+ "type": "color",
+ "description": "Strong text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-color-text-weak": {
+ "type": "color",
+ "description": "Light text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#84889a"
+ },
+ "--mynah-color-text-link": {
+ "type": "color",
+ "description": "Link text color",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#98a8ec"
+ },
+ "--mynah-color-text-input": {
+ "type": "color",
+ "description": "Input text color used in input fields",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#ebebeb"
+ },
+ "--mynah-color-light": {
+ "type": "color",
+ "description": "Light shade text color used in various places",
+ "category": "text-color",
+ "alpha": "5",
+ "value": "#000000"
+ },
+ "--mynah-color-highlight": {
+ "type": "color",
+ "description": "Highlighted text background color",
+ "category": "text-color",
+ "alpha": "25",
+ "value": "#d0d4e7"
+ },
+ "--mynah-color-highlight-text": {
+ "type": "color",
+ "description": "Highlighted text foreground/text color",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#222849"
+ },
+ "--mynah-color-border-default": {
+ "type": "color",
+ "description": "Default border color used in several places",
+ "category": "border-style",
+ "alpha": "15",
+ "value": "#8797d9"
+ },
+ "--mynah-button-border-width": {
+ "type": "measurement",
+ "description": "Button border width",
+ "units": ["px", "rem", ""],
+ "unit": "px",
+ "category": "border-style",
+ "value": "1"
+ },
+ "--mynah-border-width": {
+ "type": "measurement",
+ "description": "Default border width used in several places",
+ "units": ["px", "rem", ""],
+ "unit": "px",
+ "category": "border-style",
+ "value": "1"
+ },
+ "--mynah-color-syntax-variable": {
+ "type": "color",
+ "description": "Variable color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#9b46b0"
+ },
+ "--mynah-color-syntax-function": {
+ "type": "color",
+ "description": "Function declaration color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#6b89ff"
+ },
+ "--mynah-color-syntax-operator": {
+ "type": "color",
+ "description": "Operator color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#9b46b0"
+ },
+ "--mynah-color-syntax-attr-value": {
+ "type": "color",
+ "description": "Attribute value color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#b3beff"
+ },
+ "--mynah-color-syntax-attr": {
+ "type": "color",
+ "description": "Attribute color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#e68484"
+ },
+ "--mynah-color-syntax-property": {
+ "type": "color",
+ "description": "Property color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#0598bc"
+ },
+ "--mynah-color-syntax-comment": {
+ "type": "color",
+ "description": "Comment color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#31c99b"
+ },
+ "--mynah-color-syntax-code": {
+ "type": "color",
+ "description": "Default code text color inside code blocks and inline code",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#d4d8e8"
+ },
+ "--mynah-color-syntax-bg": {
+ "type": "color",
+ "description": "Default background color of code blocks and inline code",
+ "category": "syntax-color",
+ "alpha": "40",
+ "value": "#495697"
+ },
+ "--mynah-color-status-info": {
+ "type": "color",
+ "description": "Info color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#4593b5"
+ },
+ "--mynah-color-status-success": {
+ "type": "color",
+ "description": "Success color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#49bc8a"
+ },
+ "--mynah-color-status-warning": {
+ "type": "color",
+ "description": "Warning color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#eec58c"
+ },
+ "--mynah-color-status-error": {
+ "type": "color",
+ "description": "Error color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#ea3e7a"
+ },
+ "--mynah-color-bg": {
+ "type": "color",
+ "description": "Main background color ",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#292f47"
+ },
+ "--mynah-color-tab-active": {
+ "type": "color",
+ "description": "Tab active background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#333a57"
+ },
+ "--mynah-color-toggle": {
+ "type": "color",
+ "description": "Toggle background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#fafbfc"
+ },
+ "--mynah-color-toggle-reverse": {
+ "type": "color",
+ "description": "Toggle foreground/text color",
+ "category": "background-color",
+ "alpha": "50",
+ "value": "#000000"
+ },
+ "--mynah-color-button": {
+ "type": "color",
+ "description": "Button background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#5e6a9c"
+ },
+ "--mynah-color-button-reverse": {
+ "type": "color",
+ "description": "Button foreground/text color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-color-alternate": {
+ "type": "color",
+ "description": "Alternative background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#5f6a79"
+ },
+ "--mynah-color-alternate-reverse": {
+ "type": "color",
+ "description": "Alternative foreground/text color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-card-bg": {
+ "type": "color",
+ "description": "Card background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#333a57"
+ },
+ "--mynah-card-bg-alternate": {
+ "type": "color",
+ "description": "Card alternate background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#5e6a9c"
+ },
+ "--mynah-shadow-button": {
+ "type": "text",
+ "description": "Button shadows",
+ "category": "shadow",
+ "value": "0 5px 10px -10px rgba(0, 0, 0, 0.25)"
+ },
+ "--mynah-shadow-card": {
+ "type": "text",
+ "description": "Card shadow",
+ "category": "shadow",
+ "value": "0 20px 25px -20px rgba(0, 0, 0, 0.5)"
+ },
+ "--mynah-shadow-overlay": {
+ "type": "text",
+ "description": "Overlay shadows (notification, bottom popup etc.)",
+ "category": "shadow",
+ "value": "0 10px 35px -10px rgba(0, 0, 0, 0.75)"
+ },
+ "--mynah-syntax-code-font-size": {
+ "type": "measurement",
+ "description": "Code block font size used code blocks (not the inline codes!)",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "0.9"
+ },
+ "--mynah-syntax-code-line-height": {
+ "type": "measurement",
+ "description": "Line height for texts inside cards",
+ "category": "font-size",
+ "units": ["px", "rem", "em", ""],
+ "unit": "rem",
+ "value": "1.25"
+ },
+ "--mynah-font-size-xxsmall": {
+ "type": "measurement",
+ "description": "The smallest font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "0.75"
+ },
+ "--mynah-font-size-xsmall": {
+ "type": "measurement",
+ "description": "Extra small font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "0.85"
+ },
+ "--mynah-font-size-small": {
+ "type": "measurement",
+ "description": "Small font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "0.95"
+ },
+ "--mynah-font-size-medium": {
+ "type": "measurement",
+ "description": "Medium font size used on several places and the default font size in general which will follow the :root font size",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "1"
+ },
+ "--mynah-font-size-large": {
+ "type": "measurement",
+ "description": "Large font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "1.125"
+ },
+ "--mynah-line-height": {
+ "type": "measurement",
+ "description": "Line height for texts inside cards",
+ "category": "font-size",
+ "units": ["px", "rem", "em", ""],
+ "unit": "rem",
+ "value": "1.25"
+ },
+ "--mynah-card-radius": {
+ "type": "measurement",
+ "description": "Border radius used on all Cards",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "var(--mynah-sizing-5)"
+ },
+ "--mynah-card-radius-corner": {
+ "type": "measurement",
+ "description": "Border radius used on all Chat card edge bottom corner",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "0"
+ },
+ "--mynah-button-radius": {
+ "type": "measurement",
+ "description": "Border radius used on buttons and follow up pills",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "var(--mynah-sizing-5)"
+ },
+ "--mynah-input-radius": {
+ "type": "measurement",
+ "description": "Border radius used on inputs",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "var(--mynah-sizing-2)"
+ },
+ "--mynah-main-wrapper-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 350ms cubic-bezier(0.83, 0, 0.17, 1)"
+ },
+ "--mynah-bottom-panel-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 450ms cubic-bezier(0.25, 1, 0, 1)"
+ },
+ "--mynah-short-rev-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 280ms cubic-bezier(0.35, 1, 0, 1)"
+ },
+ "--mynah-very-short-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 300ms cubic-bezier(0.25, 1, 0, 1)"
+ },
+ "--mynah-very-long-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 1000ms cubic-bezier(0.25, 1, 0, 1)"
+ },
+ "--mynah-short-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 300ms cubic-bezier(0.85, 0.15, 0, 1)"
+ },
+ "--mynah-short-transition-rev": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 280ms cubic-bezier(0.35, 1, 0, 1)"
+ },
+ "--mynah-short-transition-rev-opacity": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "opacity 350ms cubic-bezier(0.35, 1, 0, 1)"
+ },
+ "--mynah-text-flow-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is the transition animation for text flows during a stream update",
+ "value": "all 400ms cubic-bezier(0.35, 1.2, 0, 1), transform 400ms cubic-bezier(0.2, 1.05, 0, 1)"
+ }
+}
diff --git a/mynah-ui/example/src/theme-builder/base-theme-light-config.json b/mynah-ui/example/src/theme-builder/base-theme-light-config.json
new file mode 100644
index 0000000000..d0a8598c4e
--- /dev/null
+++ b/mynah-ui/example/src/theme-builder/base-theme-light-config.json
@@ -0,0 +1,472 @@
+{
+ "--mynah-max-width": {
+ "type": "measurement",
+ "description": "Max width for mynah-ui container",
+ "units": ["px", "rem", "vw", ""],
+ "unit": "px",
+ "category": "sizing",
+ "value": "2560"
+ },
+ "--mynah-sizing-base": {
+ "type": "measurement",
+ "description": "Base spacing value used on paddings, margins etc.",
+ "units": ["px", "rem", ""],
+ "unit": "px",
+ "category": "sizing",
+ "value": "4"
+ },
+ "--mynah-chat-wrapper-spacing": {
+ "type": "text",
+ "description": "Chat wrapper spacing value used on paddings and the distance between cards",
+ "category": "sizing",
+ "value": "var(--mynah-sizing-4)"
+ },
+ "--mynah-font-family": {
+ "type": "text",
+ "description": "Base font-family",
+ "category": "font-family",
+ "value": "system-ui, -apple-system, sans-serif"
+ },
+ "--mynah-syntax-code-font-family": {
+ "type": "text",
+ "description": "Code blocks' font-family",
+ "category": "font-family",
+ "value": "consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono Courier New, monospace"
+ },
+ "--mynah-color-text-default": {
+ "type": "color",
+ "description": "Default text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#597688"
+ },
+ "--mynah-color-text-alternate": {
+ "type": "color",
+ "description": "Alternate text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-color-text-strong": {
+ "type": "color",
+ "description": "Strong text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#296689"
+ },
+ "--mynah-color-text-weak": {
+ "type": "color",
+ "description": "Light text color used in various places",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#bacad8"
+ },
+ "--mynah-color-text-link": {
+ "type": "color",
+ "description": "Link text color",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#006ab1"
+ },
+ "--mynah-color-text-input-border": {
+ "type": "color",
+ "description": "Border of the chat input textbox, when it does not have focus",
+ "category": "border-style",
+ "alpha": "100",
+ "value": "#fafcff"
+ },
+ "--mynah-color-text-input-border-focused": {
+ "type": "color",
+ "description": "Border of the chat input textbox, when it has focus",
+ "category": "border-style",
+ "alpha": "100",
+ "value": "#e6e8eb"
+ },
+ "--mynah-color-text-input": {
+ "type": "color",
+ "description": "Input text color used in input fields",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#517185"
+ },
+ "--mynah-color-text-input-placeholder": {
+ "type": "color",
+ "description": "Link text color",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#bacad8"
+ },
+ "--mynah-color-light": {
+ "type": "color",
+ "description": "Light shade text color used in various places",
+ "category": "text-color",
+ "alpha": "5",
+ "value": "#000000"
+ },
+ "--mynah-color-highlight": {
+ "type": "color",
+ "description": "Highlighted text background color",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#fff3d6"
+ },
+ "--mynah-color-highlight-text": {
+ "type": "color",
+ "description": "Highlighted text foreground/text color",
+ "category": "text-color",
+ "alpha": "100",
+ "value": "#886411"
+ },
+ "--mynah-color-border-default": {
+ "type": "color",
+ "description": "Default border color used in several places",
+ "category": "border-style",
+ "alpha": "100",
+ "value": "#e6e8eb"
+ },
+ "--mynah-button-border-width": {
+ "type": "measurement",
+ "description": "Button border width",
+ "units": ["px", "rem", ""],
+ "unit": "px",
+ "category": "border-style",
+ "value": "1"
+ },
+ "--mynah-border-width": {
+ "type": "measurement",
+ "description": "Default border width used in several places",
+ "units": ["px", "rem", ""],
+ "unit": "px",
+ "category": "border-style",
+ "value": "1"
+ },
+ "--mynah-color-syntax-variable": {
+ "type": "color",
+ "description": "Variable color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#7e009e"
+ },
+ "--mynah-color-syntax-function": {
+ "type": "color",
+ "description": "Function declaration color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#4dc9ff"
+ },
+ "--mynah-color-syntax-operator": {
+ "type": "color",
+ "description": "Operator color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#e60086"
+ },
+ "--mynah-color-syntax-attr-value": {
+ "type": "color",
+ "description": "Attribute value color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#007acc"
+ },
+ "--mynah-color-syntax-attr": {
+ "type": "color",
+ "description": "Attribute color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#dc0450"
+ },
+ "--mynah-color-syntax-property": {
+ "type": "color",
+ "description": "Property color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#00d1e0"
+ },
+ "--mynah-color-syntax-comment": {
+ "type": "color",
+ "description": "Comment color inside code blocks",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#0c923f"
+ },
+ "--mynah-color-syntax-code": {
+ "type": "color",
+ "description": "Default code text color inside code blocks and inline code",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#0051a8"
+ },
+ "--mynah-color-syntax-bg": {
+ "type": "color",
+ "description": "Default background color of code blocks and inline code",
+ "category": "syntax-color",
+ "alpha": "100",
+ "value": "#fafcff"
+ },
+ "--mynah-color-status-info": {
+ "type": "color",
+ "description": "Info color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#28a7e6"
+ },
+ "--mynah-color-status-success": {
+ "type": "color",
+ "description": "Success color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#36e281"
+ },
+ "--mynah-color-status-warning": {
+ "type": "color",
+ "description": "Warning color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#eca14b"
+ },
+ "--mynah-color-status-error": {
+ "type": "color",
+ "description": "Error color",
+ "category": "status-color",
+ "alpha": "100",
+ "value": "#e60063"
+ },
+ "--mynah-color-bg": {
+ "type": "color",
+ "description": "Main background color ",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#fafcff"
+ },
+ "--mynah-color-tab-active": {
+ "type": "color",
+ "description": "Tab active background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-color-toggle": {
+ "type": "color",
+ "description": "Toggle background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#fafbfc"
+ },
+ "--mynah-color-toggle-reverse": {
+ "type": "color",
+ "description": "Toggle foreground/text color",
+ "category": "background-color",
+ "alpha": "50",
+ "value": "#000000"
+ },
+ "--mynah-color-button": {
+ "type": "color",
+ "description": "Button background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#1e9ddc"
+ },
+ "--mynah-color-button-reverse": {
+ "type": "color",
+ "description": "Button foreground/text color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-color-alternate": {
+ "type": "color",
+ "description": "Alternative background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#5f6a79"
+ },
+ "--mynah-color-alternate-reverse": {
+ "type": "color",
+ "description": "Alternative foreground/text color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-card-bg": {
+ "type": "color",
+ "description": "Card background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#ffffff"
+ },
+ "--mynah-card-bg-alternate": {
+ "type": "color",
+ "description": "Card alternate background color",
+ "category": "background-color",
+ "alpha": "100",
+ "value": "#a1b6d3"
+ },
+ "--mynah-shadow-button": {
+ "type": "text",
+ "description": "Button shadows",
+ "category": "shadow",
+ "value": "0 5px 10px -10px rgba(0, 0, 0, 0.25)"
+ },
+ "--mynah-shadow-card": {
+ "type": "text",
+ "description": "Card shadow",
+ "category": "shadow",
+ "value": "0 10px 20px -15px rgba(0, 0, 0, 0.25)"
+ },
+ "--mynah-shadow-overlay": {
+ "type": "text",
+ "description": "Overlay shadows (notification, bottom popup etc.)",
+ "category": "shadow",
+ "value": "0 7px 27px -12px rgba(0, 0, 0, 0.35)"
+ },
+ "--mynah-syntax-code-font-size": {
+ "type": "measurement",
+ "description": "Code block font size used code blocks (not the inline codes!)",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "1"
+ },
+ "--mynah-syntax-code-line-height": {
+ "type": "measurement",
+ "description": "Line height for texts inside cards",
+ "category": "font-size",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "118%"
+ },
+ "--mynah-font-size-xxsmall": {
+ "type": "measurement",
+ "description": "The smallest font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "0.825"
+ },
+ "--mynah-font-size-xsmall": {
+ "type": "measurement",
+ "description": "Extra small font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "0.875"
+ },
+ "--mynah-font-size-small": {
+ "type": "measurement",
+ "description": "Small font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "0.925"
+ },
+ "--mynah-font-size-medium": {
+ "type": "measurement",
+ "description": "Medium font size used on several places and the default font size in general which will follow the :root font size",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "1"
+ },
+ "--mynah-font-size-large": {
+ "type": "measurement",
+ "description": "Large font size used on several places",
+ "category": "font-size",
+ "units": ["px", "rem", ""],
+ "unit": "rem",
+ "value": "1.125"
+ },
+ "--mynah-line-height": {
+ "type": "measurement",
+ "description": "Line height for texts inside cards",
+ "category": "font-size",
+ "units": ["px", "rem", "em", ""],
+ "unit": "rem",
+ "value": "1.25"
+ },
+ "--mynah-card-radius": {
+ "type": "measurement",
+ "description": "Border radius used on all Cards",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "var(--mynah-sizing-5)"
+ },
+ "--mynah-card-radius-corner": {
+ "type": "measurement",
+ "description": "Border radius used on all Chat card edge bottom corner",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "px",
+ "value": "0"
+ },
+ "--mynah-button-radius": {
+ "type": "measurement",
+ "description": "Border radius used on buttons and follow up pills",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "var(--mynah-sizing-4)"
+ },
+ "--mynah-input-radius": {
+ "type": "measurement",
+ "description": "Border radius used on inputs",
+ "category": "radius",
+ "units": ["px", "rem", "em", ""],
+ "unit": "",
+ "value": "var(--mynah-sizing-2)"
+ },
+ "--mynah-main-wrapper-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 350ms cubic-bezier(0.83, 0, 0.17, 1)"
+ },
+ "--mynah-bottom-panel-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 450ms cubic-bezier(0.25, 1, 0, 1)"
+ },
+ "--mynah-short-rev-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 280ms cubic-bezier(0.35, 1, 0, 1)"
+ },
+ "--mynah-very-short-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 300ms cubic-bezier(0.25, 1, 0, 1)"
+ },
+ "--mynah-very-long-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 1000ms cubic-bezier(0.25, 1, 0, 1)"
+ },
+ "--mynah-short-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 300ms cubic-bezier(0.85, 0.15, 0, 1)"
+ },
+ "--mynah-short-transition-rev": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "all 280ms cubic-bezier(0.35, 1, 0, 1)"
+ },
+ "--mynah-short-transition-rev-opacity": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is a transition animation used in several places",
+ "value": "opacity 350ms cubic-bezier(0.35, 1, 0, 1)"
+ },
+ "--mynah-text-flow-transition": {
+ "type": "text",
+ "category": "transition",
+ "description": "This is the transition animation for text flows during a stream update",
+ "value": "all 400ms cubic-bezier(0.35, 1.2, 0, 1), transform 400ms cubic-bezier(0.2, 1.05, 0, 1)"
+ }
+}
diff --git a/mynah-ui/example/src/theme-builder/theme-builder.ts b/mynah-ui/example/src/theme-builder/theme-builder.ts
new file mode 100644
index 0000000000..966389b4c7
--- /dev/null
+++ b/mynah-ui/example/src/theme-builder/theme-builder.ts
@@ -0,0 +1,396 @@
+import * as BaseConfigLight from './base-theme-light-config.json';
+import * as BaseConfigDark from './base-theme-dark-config.json';
+interface ConfigItem {
+ type: 'measurement' | 'text' | 'color';
+ description?: string;
+ units?: string[];
+ unit?: string;
+ category?: string;
+ alpha?: string;
+ value: string;
+}
+const categories = [
+ 'sizing',
+ 'border-style',
+ 'font-size',
+ 'font-family',
+ 'text-color',
+ 'syntax-color',
+ 'status-color',
+ 'background-color',
+ 'shadow',
+ 'radius',
+ 'transition',
+];
+
+export class ThemeBuilder {
+ private themeSelector: HTMLSelectElement = document.querySelector('#theme-selector') as HTMLSelectElement;
+ private mainWrapper: HTMLElement = document.createElement('div');
+ private inputsWrapper: HTMLElement = document.createElement('div');
+ private buttonsWrapper: HTMLElement = document.createElement('div');
+ private baseThemeType: 'light' | 'dark' = 'light';
+ private currentConfig: Record = structuredClone(BaseConfigLight) as any;
+ constructor(selector: string | HTMLElement) {
+ delete this.currentConfig.default;
+ this.themeSelector.addEventListener('change', (e) => {
+ if (this.themeSelector.value.match('base-')) {
+ this.baseThemeType = this.themeSelector.value.replace('base-', '') as 'light' | 'dark';
+ if (this.baseThemeType === 'light') {
+ this.currentConfig = structuredClone(BaseConfigLight) as any;
+ } else {
+ this.currentConfig = structuredClone(BaseConfigDark) as any;
+ }
+ this.inputsWrapper.innerHTML = '';
+ this.fillInputWrapper();
+ this.buildCssValues();
+ } else if (this.themeSelector.value.match('dark-')) {
+ document.querySelector('body')?.classList.add('vscode-dark');
+ } else {
+ document.querySelector('body')?.classList.remove('vscode-dark');
+ }
+ document.querySelector('html')?.setAttribute('theme', this.themeSelector.value);
+ });
+ this.mainWrapper.classList.add('mynah-ui-example-input-main-wrapper');
+ this.inputsWrapper.classList.add('mynah-ui-example-input-items-wrapper');
+ this.buttonsWrapper.classList.add('mynah-ui-example-input-buttons-wrapper');
+ let parentWrapper: HTMLElement;
+ if (typeof selector === 'string') {
+ parentWrapper = document.querySelector(selector) ?? (document.querySelector('body') as HTMLElement);
+ } else {
+ parentWrapper = selector;
+ }
+
+ this.mainWrapper.insertAdjacentElement('beforeend', this.inputsWrapper);
+ parentWrapper.insertAdjacentElement('beforeend', this.buttonsWrapper);
+ parentWrapper.insertAdjacentElement('beforeend', this.mainWrapper);
+
+ this.mainWrapper.insertAdjacentHTML(
+ 'beforeend',
+ `
+
+ First, please select one of the Custom Theme s from the themes list on the header bar.
+ After that you'll see the changes whenever you adjust one of the options below.
+ For measurement values (or anything other than colors) you can use current custom properties like the sizings.
+ First select (No Unit) option for the unit and then you can type any string into the value field.
+ And you can use custom properties as usual like var(--mynah-sizing-1) and the sizing values goes from 1 to 18 .
+
+ `,
+ );
+
+ this.fillInputWrapper();
+
+ const uploadThemeConfigFilePicker = document.createElement('input');
+ uploadThemeConfigFilePicker.setAttribute('type', 'file');
+ uploadThemeConfigFilePicker.setAttribute('accept', '.mynahuitc');
+ uploadThemeConfigFilePicker.classList.add('hidden');
+ uploadThemeConfigFilePicker.classList.add('config-operation');
+ uploadThemeConfigFilePicker.classList.add('fill-state-always');
+ uploadThemeConfigFilePicker.addEventListener('change', async () => {
+ const file = uploadThemeConfigFilePicker.files?.item(0);
+ if (file) {
+ const text = await file.text();
+ try {
+ this.currentConfig = JSON.parse(text);
+ this.inputsWrapper.innerHTML = '';
+ this.fillInputWrapper();
+ this.buildCssValues();
+ uploadThemeConfigFilePicker.value = '';
+ } catch (err) {
+ console.warn("Coudln't read the JSON content");
+ }
+ }
+ });
+
+ const downloadThemeConfigButton = document.createElement('button');
+ downloadThemeConfigButton.innerHTML = 'Download Config ';
+ downloadThemeConfigButton.classList.add('mynah-button');
+ downloadThemeConfigButton.classList.add('config-operation');
+ downloadThemeConfigButton.classList.add('fill-state-always');
+ downloadThemeConfigButton.addEventListener('click', () => {
+ download('mynah-ui-theme.mynahuitc', JSON.stringify(this.currentConfig));
+ });
+
+ const resetThemeConfigButton = document.createElement('button');
+ resetThemeConfigButton.innerHTML = 'Reset ';
+ resetThemeConfigButton.classList.add('mynah-button');
+ resetThemeConfigButton.classList.add('config-operation');
+ resetThemeConfigButton.classList.add('fill-state-always');
+ resetThemeConfigButton.addEventListener('click', () => {
+ this.currentConfig = structuredClone(
+ this.baseThemeType === 'light' ? BaseConfigLight : BaseConfigDark,
+ ) as any;
+ this.inputsWrapper.innerHTML = '';
+ this.fillInputWrapper();
+ this.buildCssValues();
+ });
+
+ const uploadThemeConfigButton = document.createElement('button');
+ uploadThemeConfigButton.innerHTML = 'Upload Config ';
+ uploadThemeConfigButton.classList.add('mynah-button');
+ uploadThemeConfigButton.classList.add('config-operation');
+ uploadThemeConfigButton.classList.add('fill-state-always');
+ uploadThemeConfigButton.addEventListener('click', () => {
+ uploadThemeConfigFilePicker.click();
+ });
+
+ const downloadThemeButton = document.createElement('button');
+ downloadThemeButton.innerHTML = 'Download Theme (CSS) ';
+ downloadThemeButton.classList.add('mynah-button');
+ downloadThemeButton.classList.add('config-operation');
+ downloadThemeButton.classList.add('fill-state-always');
+ downloadThemeButton.addEventListener('click', () => {
+ download(
+ 'mynah-ui-theme.css',
+ `:root {
+ ${this.getCssCustomVars()}
+ }`,
+ );
+ });
+ this.buttonsWrapper.insertAdjacentElement('beforeend', uploadThemeConfigFilePicker);
+ this.buttonsWrapper.insertAdjacentElement('beforeend', uploadThemeConfigButton);
+ this.buttonsWrapper.insertAdjacentElement('beforeend', downloadThemeConfigButton);
+ this.buttonsWrapper.insertAdjacentElement('beforeend', downloadThemeButton);
+ this.buttonsWrapper.insertAdjacentElement('beforeend', resetThemeConfigButton);
+
+ this.buildCssValues();
+ }
+
+ private fillInputWrapper = () => {
+ categories.forEach((category) => {
+ this.inputsWrapper.insertAdjacentHTML(
+ 'beforeend',
+ `
+
+
${category}
+
+ `,
+ );
+ });
+
+ Object.keys(this.currentConfig).forEach((themeConfigKey: string) => {
+ const themeConfigItem = this.currentConfig[themeConfigKey] as ConfigItem;
+ switch (themeConfigItem.type) {
+ case 'text':
+ this.inputsWrapper.insertAdjacentElement(
+ 'beforeend',
+ themeInputText(themeConfigKey, themeConfigItem, (value) => {
+ this.currentConfig[themeConfigKey].value = value;
+ this.buildCssValues();
+ }),
+ );
+ break;
+ case 'measurement':
+ this.inputsWrapper.insertAdjacentElement(
+ 'beforeend',
+ themeInputMeasurement(themeConfigKey, themeConfigItem, (value, unit) => {
+ this.currentConfig[themeConfigKey].value = value;
+ this.currentConfig[themeConfigKey].unit = unit;
+ this.buildCssValues();
+ }),
+ );
+ break;
+ case 'color':
+ this.inputsWrapper.insertAdjacentElement(
+ 'beforeend',
+ themeInputColor(themeConfigKey, themeConfigItem, (hex, alpha) => {
+ this.currentConfig[themeConfigKey].value = hex;
+ this.currentConfig[themeConfigKey].alpha = alpha;
+ this.buildCssValues();
+ }),
+ );
+ break;
+ }
+ });
+ };
+
+ private buildCssValues = () => {
+ (document.querySelector('#custom-style') as HTMLElement).innerHTML = `
+ html[theme="base-${this.baseThemeType}"]:root {
+ font-size: 13px;
+ ${this.getCssCustomVars()}
+ }
+ `;
+ };
+
+ private getCssCustomVars = (): string =>
+ Object.keys(this.currentConfig)
+ .map((configKey) => {
+ const configItem = this.currentConfig[configKey];
+ let value = configItem.value;
+ switch (configItem.type) {
+ case 'measurement':
+ value = value + configItem.unit;
+ break;
+ case 'color':
+ value = getColorValue(value, configItem.alpha ?? '100');
+ break;
+ }
+ return `${configKey}: ${value};`;
+ })
+ .join('\n');
+}
+
+const getCleanTitle = (title: string): string => {
+ return title.replace('--mynah-', '').split('-').join(' ');
+};
+
+const getColorValue = (hex: string, alpha: string): string => {
+ const realAlpha = parseInt(alpha);
+ if (realAlpha === 100) {
+ return hex;
+ } else {
+ let hexToUse = hex.length === 4 ? hex[0] + hex.slice(1, 4).repeat(2) : hex;
+ var r = parseInt(hexToUse.slice(1, 3), 16),
+ g = parseInt(hexToUse.slice(3, 5), 16),
+ b = parseInt(hexToUse.slice(5, 7), 16);
+
+ return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + (parseInt(alpha) / 100).toString() + ')';
+ }
+};
+
+const themeInputText = (
+ title: string,
+ configItem: ConfigItem,
+ onValueChange: (value: string) => void,
+): HTMLDivElement => {
+ const element = document.createElement('div');
+ element.classList.add('mynah-ui-example-input');
+ element.classList.add(`mynah-ui-example-input-category-${configItem.category ?? 'other'}`);
+
+ element.innerHTML = `
+
${getCleanTitle(title)}
+ ${configItem.description ?? ''}
+ `;
+
+ const inputElement = document.createElement('input');
+ inputElement.setAttribute('type', 'text');
+ inputElement.setAttribute('value', configItem.value);
+ inputElement.addEventListener('change', (e) => {
+ onValueChange(inputElement.value);
+ });
+
+ const inputElementWrapper = document.createElement('div');
+ inputElementWrapper.classList.add('mynah-ui-example-input-wrapper');
+ inputElementWrapper.insertAdjacentElement('beforeend', inputElement);
+
+ element.insertAdjacentElement('beforeend', inputElementWrapper);
+
+ return element as HTMLDivElement;
+};
+
+const themeInputMeasurement = (
+ title: string,
+ configItem: ConfigItem,
+ onValueChange: (value: string, unit: string) => void,
+): HTMLDivElement => {
+ const element = document.createElement('div');
+ element.classList.add('mynah-ui-example-input');
+ element.classList.add(`mynah-ui-example-input-category-${configItem.category ?? 'other'}`);
+
+ element.innerHTML = `
+
${getCleanTitle(title)}
+ ${configItem.description ?? ''}
+ `;
+
+ const selectElement = document.createElement('select');
+ configItem.units?.forEach((unitKey) => {
+ selectElement.insertAdjacentHTML(
+ 'beforeend',
+ `
+ ${unitKey !== '' ? unitKey : '?'}
+ `,
+ );
+ });
+ selectElement.addEventListener('change', (e) => {
+ inputElement.setAttribute('type', selectElement.value === '' ? 'text' : 'number');
+ onValueChange(inputElement.value, selectElement.value);
+ });
+
+ const inputElement = document.createElement('input');
+ inputElement.setAttribute('type', configItem.unit === '' ? 'text' : 'number');
+ inputElement.setAttribute('value', configItem.value);
+ inputElement.addEventListener('change', (e) => {
+ onValueChange(inputElement.value, selectElement.value);
+ });
+
+ const inputElementWrapper = document.createElement('div');
+ inputElementWrapper.classList.add('mynah-ui-example-input-wrapper');
+ inputElementWrapper.insertAdjacentElement('beforeend', inputElement);
+ inputElementWrapper.insertAdjacentElement('beforeend', selectElement);
+
+ element.insertAdjacentElement('beforeend', inputElementWrapper);
+
+ return element as HTMLDivElement;
+};
+
+const themeInputColor = (
+ title: string,
+ configItem: ConfigItem,
+ onValueChange: (hex: string, alpha: string) => void,
+): HTMLDivElement => {
+ const element = document.createElement('div');
+ element.classList.add('mynah-ui-example-input');
+ element.classList.add(`mynah-ui-example-input-category-${configItem.category ?? 'other'}`);
+ const splittedValue = {
+ hex: configItem.value,
+ alpha: configItem.alpha ?? '100',
+ };
+
+ element.innerHTML = `
+
${getCleanTitle(title)}
+ ${configItem.description ?? ''}
+ `;
+
+ const alphaSlider = document.createElement('input');
+ alphaSlider.setAttribute('type', 'range');
+ alphaSlider.setAttribute('min', '0');
+ alphaSlider.setAttribute('max', '100');
+ alphaSlider.setAttribute('value', splittedValue.alpha ?? '100');
+ alphaSlider.addEventListener('change', (e) => {
+ onValueChange(inputElement.value, alphaSlider.value);
+ (inputElementLabelWrapper.querySelector('small[type="range"] > b') as HTMLElement).innerHTML =
+ `${alphaSlider.value}%`;
+ });
+
+ const inputElement = document.createElement('input');
+ inputElement.setAttribute('type', 'color');
+ inputElement.setAttribute('value', splittedValue.hex);
+ inputElement.addEventListener('change', (e) => {
+ onValueChange(inputElement.value, alphaSlider.value);
+ (inputElementLabelWrapper.querySelector('small[type="color"] > b') as HTMLElement).innerHTML =
+ inputElement.value;
+ });
+
+ const inputElementLabelWrapper = document.createElement('div');
+ inputElementLabelWrapper.classList.add('mynah-ui-example-input-wrapper');
+ inputElementLabelWrapper.insertAdjacentHTML(
+ 'beforeend',
+ `
+ Color: ${configItem.value}
+ Alpha: ${configItem.alpha ?? 100}%
+ `,
+ );
+
+ const inputElementWrapper = document.createElement('div');
+ inputElementWrapper.classList.add('mynah-ui-example-input-wrapper');
+ inputElementWrapper.insertAdjacentElement('beforeend', inputElement);
+ inputElementWrapper.insertAdjacentElement('beforeend', alphaSlider);
+
+ element.insertAdjacentElement('beforeend', inputElementLabelWrapper);
+ element.insertAdjacentElement('beforeend', inputElementWrapper);
+
+ return element as HTMLDivElement;
+};
+
+const download = (filename: string, text: string) => {
+ var element = document.createElement('a');
+ element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+ element.setAttribute('download', filename);
+
+ element.style.display = 'none';
+ document.body.appendChild(element);
+
+ element.click();
+
+ document.body.removeChild(element);
+};
diff --git a/mynah-ui/example/tsconfig.json b/mynah-ui/example/tsconfig.json
new file mode 100644
index 0000000000..01fc7a4171
--- /dev/null
+++ b/mynah-ui/example/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "esModuleInterop": true,
+ "module": "commonjs",
+ "target": "ES2019",
+ "lib": ["ES2020", "es5", "es6", "dom"],
+ "outDir": "out",
+ "sourceMap": true,
+ "strict": true,
+ "resolveJsonModule": true,
+ "typeRoots": ["./node_modules/@types"],
+ "strictPropertyInitialization": false
+ },
+ "exclude": ["build", "out", "node_modules", ".vscode-test"]
+}
diff --git a/mynah-ui/example/webpack.config.js b/mynah-ui/example/webpack.config.js
new file mode 100644
index 0000000000..887fc2e27d
--- /dev/null
+++ b/mynah-ui/example/webpack.config.js
@@ -0,0 +1,58 @@
+'use strict';
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+/**@type {import('webpack').Configuration}*/
+const config = {
+ target: 'web',
+ entry: './src/main.ts',
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'main.js',
+ library: 'mynahWeb',
+ libraryTarget: 'var',
+ devtoolModuleFilenameTemplate: '../[resource-path]',
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'src/index.html',
+ }),
+ ],
+ devtool: 'source-map',
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
+ experiments: { asyncWebAssembly: true },
+ module: {
+ rules: [
+ { test: /\.md$/, use: ['raw-loader'] },
+ {
+ test: /\.scss$/,
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ importLoaders: 1,
+ modules: {
+ mode: 'icss', // Enable ICSS (Interoperable CSS)
+ },
+ },
+ },
+ 'sass-loader',
+ ],
+ },
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: 'ts-loader',
+ },
+ ],
+ },
+ ],
+ },
+};
+module.exports = config;
diff --git a/mynah-ui/jest.config.js b/mynah-ui/jest.config.js
new file mode 100644
index 0000000000..6dd15d1d82
--- /dev/null
+++ b/mynah-ui/jest.config.js
@@ -0,0 +1,12 @@
+const jestConfig = {
+ testEnvironment: 'jsdom',
+ preset: 'ts-jest',
+ modulePathIgnorePatterns: ['/ui-tests/'],
+ moduleNameMapper: {
+ '\\.svg$': 'jest-svg-transformer',
+ '^.+\\.(css|less|scss)$': 'babel-jest',
+ },
+ setupFiles: ['/test-config/config.js', 'core-js'], // Polyfill things like structuredClone
+};
+
+module.exports = jestConfig;
diff --git a/mynah-ui/package.json b/mynah-ui/package.json
new file mode 100644
index 0000000000..7900891315
--- /dev/null
+++ b/mynah-ui/package.json
@@ -0,0 +1,109 @@
+{
+ "name": "@aws/mynah-ui",
+ "displayName": "AWS Mynah UI",
+ "version": "4.36.5",
+ "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
+ "publisher": "Amazon Web Services",
+ "license": "Apache License 2.0",
+ "readme": "README.md",
+ "main": "./dist/main.js",
+ "private": true,
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/aws/mynah-ui"
+ },
+ "scripts": {
+ "clean": "npm run clean:dist && npm run clean:node",
+ "clean:dist": "find . -name 'dist' -type d -prune -exec rm -rf '{}' +",
+ "clean:node": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
+ "build": "webpack --config webpack.config.js --mode production",
+ "packdemo": "cd ./example && npm run pack",
+ "watch": "webpack --config webpack.config.js --mode development --watch",
+ "watch:example": "cd ./example && npm run watch",
+ "watch:web": "run-p watch watch:example serve:example",
+ "serve:example": "live-server --port=9000 example/dist",
+ "start:example": "cd ./example && npm install && npm run build && cd .. && npm run watch:web",
+ "dev": "npm ci && npm run build && cd ./ui-tests && npm install && cd .. && npm run start:example",
+ "lint-fix": "npx eslint \"./**\" --fix",
+ "lint": "npx eslint \"./**\"",
+ "format:check": "npx prettier --check .",
+ "format:write": "npx prettier --write .",
+ "docker:clean": "docker rm -f mynah-ui-e2e-container || true",
+ "docker:build": "node scripts/docker-build.js",
+ "docker:run": "docker run --name mynah-ui-e2e-container -e WEBKIT_FORCE_COMPLEX_TEXT=0 -e WEBKIT_DISABLE_COMPOSITING_MODE=1 mynah-ui-e2e",
+ "docker:run:chromium": "docker run -e BROWSER=chromium --name mynah-ui-e2e-container mynah-ui-e2e",
+ "docker:run:webkit": "docker run -e BROWSER=webkit -e WEBKIT_FORCE_COMPLEX_TEXT=0 -e WEBKIT_DISABLE_COMPOSITING_MODE=1 --name mynah-ui-e2e-container mynah-ui-e2e",
+ "docker:extract": "docker cp mynah-ui-e2e-container:/app/ui-tests/__results__ ./ui-tests/ && docker cp mynah-ui-e2e-container:/app/ui-tests/__snapshots__ ./ui-tests/__results__/__snapshots__",
+ "playwright:setup": "node scripts/setup-playwright.js",
+ "playwright:version": "node scripts/get-playwright-version.js",
+ "playwright:pre-test": "node scripts/pre-test-setup.js",
+ "tests:e2e": "npm run docker:clean && npm run docker:build && npm run docker:run",
+ "tests:e2e:chromium": "npm run docker:clean && npm run docker:build && npm run docker:run:chromium",
+ "tests:e2e:webkit": "npm run docker:clean && npm run docker:build && npm run docker:run:webkit",
+ "tests:e2e:webkit:local": "npm run playwright:pre-test && cd ui-tests && npm run e2e:webkit",
+ "tests:webkit:check": "node scripts/test-webkit.js",
+ "tests:e2e:local": "npm run playwright:pre-test && cd ui-tests && npm run e2e",
+ "tests:e2e:trace": "cd ./ui-tests && npm run trace",
+ "tests:unit": "jest --collect-coverage",
+ "api-docs": "npx typedoc src/main.ts --out ./api-docs",
+ "api-doc-deploy": "npx typedoc src/main.ts --out ./example/dist/api-doc"
+ },
+ "dependencies": {
+ "escape-html": "^1.0.3",
+ "highlight.js": "^11.11.0",
+ "just-clone": "^6.2.0",
+ "marked": "^14.1.0",
+ "sanitize-html": "^2.12.1",
+ "unescape-html": "^1.1.0"
+ },
+ "peerDependencies": {
+ "escape-html": "^1.0.3",
+ "highlight.js": "^11.11.0",
+ "just-clone": "^6.2.0",
+ "marked": "^14.1.0",
+ "sanitize-html": "^2.12.1",
+ "unescape-html": "^1.1.0"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.23.5",
+ "@types/eslint": "^8.44.3",
+ "@types/eslint-scope": "3.7.0",
+ "@types/estree": "0.0.49",
+ "@types/glob": "7.1.3",
+ "@types/jest": "^29.5.5",
+ "@types/json-schema": "7.0.7",
+ "@types/minimatch": "^5.1.2",
+ "@types/node": "17.0.29",
+ "@types/sanitize-html": "^2.11.0",
+ "@typescript-eslint/eslint-plugin": "^5.34.0",
+ "@typescript-eslint/parser": "^5.62.0",
+ "babel-jest": "^29.7.0",
+ "core-js": "^3.33.3",
+ "css-loader": "6.6.0",
+ "eslint": "^8.22.0",
+ "eslint-config-standard-with-typescript": "22.0.0",
+ "eslint-plugin-header": "^3.1.1",
+ "eslint-plugin-import": "2.26.0",
+ "eslint-plugin-n": "15.2.5",
+ "eslint-plugin-no-null": "^1.0.2",
+ "eslint-plugin-prettier": "^5.0.0",
+ "eslint-plugin-promise": "6.0.0",
+ "husky": "^9.1.6",
+ "jest": "^29.7.0",
+ "jest-environment-jsdom": "^29.7.0",
+ "jest-svg-transformer": "^1.0.0",
+ "npm-run-all": "^4.1.5",
+ "prettier": "^3.0.3",
+ "sass": "1.49.8",
+ "sass-loader": "12.6.0",
+ "style-loader": "3.3.1",
+ "svg-url-loader": "^8.0.0",
+ "ts-jest": "^29.1.1",
+ "ts-loader": "^9.4.4",
+ "ts-node": "^10.9.1",
+ "typedoc": "^0.25.13",
+ "typescript": "^5.1.6",
+ "webpack": "5.94.0",
+ "webpack-cli": "4.7.2"
+ }
+}
diff --git a/mynah-ui/scripts/docker-build.js b/mynah-ui/scripts/docker-build.js
new file mode 100755
index 0000000000..38acc8c15a
--- /dev/null
+++ b/mynah-ui/scripts/docker-build.js
@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+/**
+ * Script to build Docker image with detected Playwright version
+ */
+
+const { execSync } = require('child_process');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function buildDockerImage() {
+ try {
+ const version = getPlaywrightVersion();
+ console.log(`Building Docker image with Playwright version: ${version}`);
+
+ // Use the detected version or fallback to latest
+ // Add 'v' prefix for version numbers, but not for 'latest'
+ const dockerVersion = version === 'latest' ? 'latest' : `v${version}`;
+
+ const buildCommand = `docker build --build-arg PLAYWRIGHT_VERSION=${dockerVersion} -t mynah-ui-e2e .`;
+
+ console.log(`Executing: ${buildCommand}`);
+ execSync(buildCommand, { stdio: 'inherit' });
+
+ console.log('Docker image built successfully!');
+ } catch (error) {
+ console.error('Error building Docker image:', error.message);
+ process.exit(1);
+ }
+}
+
+// If called directly, run the build
+if (require.main === module) {
+ buildDockerImage();
+}
+
+module.exports = { buildDockerImage };
diff --git a/mynah-ui/scripts/docker-health-check.js b/mynah-ui/scripts/docker-health-check.js
new file mode 100644
index 0000000000..9f8864f32d
--- /dev/null
+++ b/mynah-ui/scripts/docker-health-check.js
@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+/**
+ * Docker health check script to verify browser installations
+ */
+
+const { execSync } = require('child_process');
+
+function healthCheck() {
+ try {
+ console.log('=== Docker Health Check ===');
+
+ // Check if we're in Docker
+ console.log('Environment: Docker Container');
+
+ // Check Playwright installation
+ console.log('\n1. Checking Playwright...');
+ execSync('npx playwright --version', { stdio: 'inherit' });
+
+ // Check browser installations
+ console.log('\n2. Checking browsers...');
+ execSync('npx playwright install --dry-run', { stdio: 'inherit' });
+
+ // Test WebKit specifically
+ console.log('\n3. Testing WebKit launch...');
+ execSync('npx playwright test --list --project=webkit | head -5', {
+ stdio: 'inherit',
+ shell: true,
+ });
+
+ console.log('\n=== Health Check Passed ===');
+ return true;
+ } catch (error) {
+ console.error('Health check failed:', error.message);
+ return false;
+ }
+}
+
+// If called directly, run the health check
+if (require.main === module) {
+ const success = healthCheck();
+ process.exit(success ? 0 : 1);
+}
+
+module.exports = { healthCheck };
diff --git a/mynah-ui/scripts/get-playwright-version.js b/mynah-ui/scripts/get-playwright-version.js
new file mode 100755
index 0000000000..aafcbcd028
--- /dev/null
+++ b/mynah-ui/scripts/get-playwright-version.js
@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+/**
+ * Script to detect and return the appropriate Playwright version
+ * Priority: local installation > package.json > latest
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+function getPlaywrightVersion() {
+ try {
+ // 1. Try to get locally installed version
+ try {
+ const localVersion = execSync('playwright --version', { encoding: 'utf8', stdio: 'pipe' });
+ const versionMatch = localVersion.match(/Version (\d+\.\d+\.\d+)/);
+ if (versionMatch) {
+ console.log(`Found local Playwright version: ${versionMatch[1]}`);
+ return versionMatch[1];
+ }
+ } catch (error) {
+ console.log('No local Playwright installation found');
+ }
+
+ // 2. Try to get version from ui-tests package.json
+ const uiTestsPackagePath = path.join(__dirname, '../ui-tests/package.json');
+ if (fs.existsSync(uiTestsPackagePath)) {
+ const packageJson = JSON.parse(fs.readFileSync(uiTestsPackagePath, 'utf8'));
+
+ // Check both playwright and @playwright/test dependencies
+ const playwrightVersion = packageJson.devDependencies?.playwright || packageJson.dependencies?.playwright;
+ const playwrightTestVersion =
+ packageJson.devDependencies?.['@playwright/test'] || packageJson.dependencies?.['@playwright/test'];
+
+ // Prefer @playwright/test version if available, otherwise use playwright
+ const version = playwrightTestVersion || playwrightVersion;
+
+ if (version) {
+ // Remove ^ or ~ prefix and get clean version
+ const cleanVersion = version.replace(/[\^~]/, '');
+ const sourcePackage = playwrightTestVersion ? '@playwright/test' : 'playwright';
+ console.log(`Found ${sourcePackage} version in ui-tests package.json: ${cleanVersion}`);
+ return cleanVersion;
+ }
+ }
+
+ // 3. Fallback to latest
+ console.log('No specific version found, using latest');
+ return 'latest';
+ } catch (error) {
+ console.error('Error detecting Playwright version:', error.message);
+ return 'latest';
+ }
+}
+
+// If called directly, output the version
+if (require.main === module) {
+ console.log(getPlaywrightVersion());
+}
+
+module.exports = { getPlaywrightVersion };
diff --git a/mynah-ui/scripts/pre-test-setup.js b/mynah-ui/scripts/pre-test-setup.js
new file mode 100755
index 0000000000..95afb63b0c
--- /dev/null
+++ b/mynah-ui/scripts/pre-test-setup.js
@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+
+/**
+ * Pre-test setup script that ensures Playwright is properly configured
+ * This runs before tests to guarantee version consistency
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function checkPlaywrightInstallation() {
+ const uiTestsPath = path.join(__dirname, '../ui-tests');
+ const nodeModulesPath = path.join(uiTestsPath, 'node_modules');
+ const playwrightPath = path.join(nodeModulesPath, '@playwright');
+
+ return fs.existsSync(playwrightPath);
+}
+
+function getInstalledPlaywrightVersion() {
+ try {
+ const uiTestsPath = path.join(__dirname, '../ui-tests');
+ const packageLockPath = path.join(uiTestsPath, 'package-lock.json');
+
+ if (fs.existsSync(packageLockPath)) {
+ const packageLock = JSON.parse(fs.readFileSync(packageLockPath, 'utf8'));
+ return (
+ packageLock.packages?.['node_modules/@playwright/test']?.version ||
+ packageLock.packages?.['node_modules/playwright']?.version ||
+ null
+ );
+ }
+ return null;
+ } catch (error) {
+ console.warn('Could not read package-lock.json:', error.message);
+ return null;
+ }
+}
+
+function preTestSetup() {
+ console.log('🔍 Running pre-test setup...');
+
+ try {
+ const expectedVersion = getPlaywrightVersion();
+ console.log(`📋 Expected Playwright version: ${expectedVersion}`);
+
+ const isInstalled = checkPlaywrightInstallation();
+ const installedVersion = getInstalledPlaywrightVersion();
+
+ console.log(`📦 Playwright installed: ${isInstalled}`);
+ console.log(`📦 Installed version: ${installedVersion || 'unknown'}`);
+
+ // Check if we need to install/update
+ const needsSetup = !isInstalled || (expectedVersion !== 'latest' && installedVersion !== expectedVersion);
+
+ if (needsSetup) {
+ console.log('🔧 Setting up Playwright...');
+
+ // Run setup with target directory
+ const { setupPlaywright } = require('./setup-playwright');
+ const uiTestsPath = path.join(__dirname, '../ui-tests');
+ setupPlaywright(uiTestsPath);
+ } else {
+ console.log('✅ Playwright is already properly configured');
+ }
+
+ console.log('🎉 Pre-test setup completed successfully!');
+ } catch (error) {
+ console.error('❌ Pre-test setup failed:', error.message);
+ process.exit(1);
+ }
+}
+
+// If called directly, run the setup
+if (require.main === module) {
+ preTestSetup();
+}
+
+module.exports = { preTestSetup };
diff --git a/mynah-ui/scripts/setup-playwright.js b/mynah-ui/scripts/setup-playwright.js
new file mode 100755
index 0000000000..ddfe885f7b
--- /dev/null
+++ b/mynah-ui/scripts/setup-playwright.js
@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+/**
+ * Script to setup Playwright with version-agnostic approach
+ * This ensures consistent versions across local and Docker environments
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function setupPlaywright(targetDir = null) {
+ try {
+ const version = getPlaywrightVersion();
+ console.log(`Setting up Playwright version: ${version}`);
+
+ // Determine target directory
+ const uiTestsPath = targetDir || path.join(__dirname, '../ui-tests');
+
+ // Ensure target directory exists
+ if (!fs.existsSync(uiTestsPath)) {
+ throw new Error(`Target directory does not exist: ${uiTestsPath}`);
+ }
+
+ const installCommand =
+ version === 'latest'
+ ? 'npm install @playwright/test@latest playwright@latest --save-dev'
+ : `npm install @playwright/test@${version} playwright@${version} --save-dev`;
+
+ console.log(`Installing Playwright in ${uiTestsPath}...`);
+ execSync(installCommand, {
+ stdio: 'inherit',
+ cwd: uiTestsPath,
+ });
+
+ // Install Playwright browsers with dependencies
+ console.log('Installing Playwright browsers with dependencies...');
+ execSync('npx playwright install --with-deps', {
+ stdio: 'inherit',
+ cwd: uiTestsPath,
+ });
+
+ console.log('Playwright setup completed successfully!');
+ return true;
+ } catch (error) {
+ console.error('Error setting up Playwright:', error.message);
+ throw error; // Re-throw to allow caller to handle
+ }
+}
+
+// If called directly, run the setup
+if (require.main === module) {
+ try {
+ setupPlaywright();
+ } catch (error) {
+ process.exit(1);
+ }
+}
+
+module.exports = { setupPlaywright };
diff --git a/mynah-ui/scripts/test-webkit.js b/mynah-ui/scripts/test-webkit.js
new file mode 100644
index 0000000000..eed2a940f2
--- /dev/null
+++ b/mynah-ui/scripts/test-webkit.js
@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+/**
+ * Script to test WebKit browser availability and functionality
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+
+function testWebKit() {
+ try {
+ console.log('Testing WebKit browser availability...');
+
+ const uiTestsPath = path.join(__dirname, '../ui-tests');
+
+ // Check if WebKit is installed
+ console.log('Checking WebKit installation...');
+ execSync('npx playwright install webkit --with-deps', {
+ stdio: 'inherit',
+ cwd: uiTestsPath,
+ });
+
+ // Run a simple WebKit test
+ console.log('Running WebKit test...');
+ execSync('npx playwright test --project=webkit --grep "should render initial data"', {
+ stdio: 'inherit',
+ cwd: uiTestsPath,
+ });
+
+ console.log('WebKit test completed successfully!');
+ return true;
+ } catch (error) {
+ console.error('WebKit test failed:', error.message);
+ return false;
+ }
+}
+
+// If called directly, run the test
+if (require.main === module) {
+ const success = testWebKit();
+ process.exit(success ? 0 : 1);
+}
+
+module.exports = { testWebKit };
diff --git a/mynah-ui/src/__test__/components/chat-item/chat-item-relevance-vote-coverage.spec.ts b/mynah-ui/src/__test__/components/chat-item/chat-item-relevance-vote-coverage.spec.ts
new file mode 100644
index 0000000000..1a82a91cf5
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/chat-item-relevance-vote-coverage.spec.ts
@@ -0,0 +1,59 @@
+import { ChatItemRelevanceVote } from '../../../components/chat-item/chat-item-relevance-vote';
+import { MynahEventNames, RelevancyVoteType } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { Config } from '../../../helper/config';
+import testIds from '../../../helper/test-ids';
+
+jest.mock('../../../helper/config');
+jest.mock('../../../helper/events');
+
+describe('ChatItemRelevanceVote Coverage Tests', () => {
+ let relevanceVote: ChatItemRelevanceVote;
+ let mockGlobalEvents: jest.Mocked;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+
+ (Config.getInstance as jest.Mock).mockReturnValue({
+ config: {
+ texts: {
+ feedbackThanks: 'Thank you!',
+ feedbackReportButtonLabel: 'Report',
+ },
+ componentClasses: {},
+ test: true,
+ },
+ });
+
+ mockGlobalEvents = {
+ dispatch: jest.fn(),
+ addListener: jest.fn().mockReturnValue('listener-id'),
+ removeListener: jest.fn(),
+ } as any;
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue(mockGlobalEvents);
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should handle downvote', () => {
+ relevanceVote = new ChatItemRelevanceVote({
+ tabId: 'tab-1',
+ messageId: 'msg-1',
+ });
+ document.body.appendChild(relevanceVote.render);
+
+ const downvoteInput = relevanceVote.render.querySelector(
+ `[data-testid="${testIds.chatItem.vote.downvote}"]`,
+ ) as HTMLInputElement;
+ downvoteInput.checked = true;
+ downvoteInput.dispatchEvent(new Event('change'));
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CARD_VOTE, {
+ messageId: 'msg-1',
+ tabId: 'tab-1',
+ vote: RelevancyVoteType.DOWN,
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/chat-item/chat-item-relevance-vote.spec.ts b/mynah-ui/src/__test__/components/chat-item/chat-item-relevance-vote.spec.ts
new file mode 100644
index 0000000000..6f6192efce
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/chat-item-relevance-vote.spec.ts
@@ -0,0 +1,187 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+ ChatItemRelevanceVote,
+ ChatItemRelevanceVoteProps,
+} from '../../../components/chat-item/chat-item-relevance-vote';
+import { MynahEventNames, RelevancyVoteType } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { Config } from '../../../helper/config';
+import testIds from '../../../helper/test-ids';
+
+// Mock dependencies
+jest.mock('../../../helper/config');
+jest.mock('../../../helper/events');
+
+describe('ChatItemRelevanceVote Component', () => {
+ let relevanceVote: ChatItemRelevanceVote;
+ let mockConfig: jest.Mocked;
+ let mockGlobalEvents: jest.Mocked;
+
+ const mockTexts = {
+ feedbackThanks: 'Thank you for your feedback!',
+ feedbackReportButtonLabel: 'Report an issue',
+ };
+
+ const defaultProps: ChatItemRelevanceVoteProps = {
+ tabId: 'test-tab-123',
+ messageId: 'test-message-456',
+ classNames: ['custom-class'],
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+
+ // Setup Config mock
+ mockConfig = {
+ config: {
+ texts: mockTexts,
+ componentClasses: {},
+ test: true,
+ },
+ } as any;
+ (Config.getInstance as jest.Mock).mockReturnValue(mockConfig);
+
+ // Setup GlobalEvents mock
+ mockGlobalEvents = {
+ dispatch: jest.fn(),
+ addListener: jest.fn().mockReturnValue('listener-id-123'),
+ removeListener: jest.fn(),
+ } as any;
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue(mockGlobalEvents);
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ jest.clearAllTimers();
+ });
+
+ describe('Constructor', () => {
+ it('should create relevance vote component with required props', () => {
+ const minimalProps: ChatItemRelevanceVoteProps = {
+ tabId: 'tab-1',
+ messageId: 'msg-1',
+ };
+
+ relevanceVote = new ChatItemRelevanceVote(minimalProps);
+
+ expect(relevanceVote).toBeDefined();
+ expect(relevanceVote.props).toEqual(minimalProps);
+ expect(relevanceVote.render).toBeDefined();
+ });
+
+ it('should handle undefined classNames', () => {
+ const propsWithoutClassNames: ChatItemRelevanceVoteProps = {
+ tabId: 'tab-1',
+ messageId: 'msg-1',
+ };
+
+ relevanceVote = new ChatItemRelevanceVote(propsWithoutClassNames);
+
+ expect(relevanceVote).toBeDefined();
+ expect(relevanceVote.render.classList.contains('mynah-card-votes-wrapper')).toBe(true);
+ });
+ });
+
+ describe('Upvote Functionality', () => {
+ beforeEach(() => {
+ relevanceVote = new ChatItemRelevanceVote(defaultProps);
+ document.body.appendChild(relevanceVote.render);
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('should handle upvote change event', () => {
+ const upvoteInput = relevanceVote.render.querySelector(
+ `[data-testid="${testIds.chatItem.vote.upvote}"]`,
+ ) as HTMLInputElement;
+
+ upvoteInput.checked = true;
+ upvoteInput.dispatchEvent(new Event('change'));
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CARD_VOTE, {
+ messageId: 'test-message-456',
+ tabId: 'test-tab-123',
+ vote: RelevancyVoteType.UP,
+ });
+ });
+
+ it('should replace content with thanks message after upvote', () => {
+ const upvoteInput = relevanceVote.render.querySelector(
+ `[data-testid="${testIds.chatItem.vote.upvote}"]`,
+ ) as HTMLInputElement;
+
+ upvoteInput.checked = true;
+ upvoteInput.dispatchEvent(new Event('change'));
+
+ const thanksElement = relevanceVote.render.querySelector(`[data-testid="${testIds.chatItem.vote.thanks}"]`);
+ expect(thanksElement).toBeDefined();
+ expect(thanksElement?.innerHTML).toBe('Thank you for your feedback!');
+ });
+
+ it('should remove component after timeout for upvote', () => {
+ const removeSpy = jest.spyOn(relevanceVote.render, 'remove');
+ const upvoteInput = relevanceVote.render.querySelector(
+ `[data-testid="${testIds.chatItem.vote.upvote}"]`,
+ ) as HTMLInputElement;
+
+ upvoteInput.checked = true;
+ upvoteInput.dispatchEvent(new Event('change'));
+
+ expect(removeSpy).not.toHaveBeenCalled();
+
+ // Fast-forward time by 3500ms
+ jest.advanceTimersByTime(3500);
+
+ expect(removeSpy).toHaveBeenCalled();
+ });
+ });
+
+ describe('Downvote Functionality', () => {
+ beforeEach(() => {
+ relevanceVote = new ChatItemRelevanceVote(defaultProps);
+ document.body.appendChild(relevanceVote.render);
+ });
+
+ it('should handle downvote change event', () => {
+ const downvoteInput = relevanceVote.render.querySelector(
+ `[data-testid="${testIds.chatItem.vote.downvote}"]`,
+ ) as HTMLInputElement;
+
+ downvoteInput.checked = true;
+ downvoteInput.dispatchEvent(new Event('change'));
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CARD_VOTE, {
+ messageId: 'test-message-456',
+ tabId: 'test-tab-123',
+ vote: RelevancyVoteType.DOWN,
+ });
+ });
+
+ it('should replace content with thanks message and report button after downvote', () => {
+ const downvoteInput = relevanceVote.render.querySelector(
+ `[data-testid="${testIds.chatItem.vote.downvote}"]`,
+ ) as HTMLInputElement;
+
+ downvoteInput.checked = true;
+ downvoteInput.dispatchEvent(new Event('change'));
+
+ const thanksElement = relevanceVote.render.querySelector(`[data-testid="${testIds.chatItem.vote.thanks}"]`);
+ const reportButton = relevanceVote.render.querySelector(
+ `[data-testid="${testIds.chatItem.vote.reportButton}"]`,
+ );
+
+ expect(thanksElement).toBeDefined();
+ expect(thanksElement?.innerHTML).toBe('Thank you for your feedback!');
+ expect(reportButton).toBeDefined();
+ expect(reportButton?.textContent).toBe('Report an issue');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-edge-cases.spec.ts b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-edge-cases.spec.ts
new file mode 100644
index 0000000000..ed0f9a725d
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-edge-cases.spec.ts
@@ -0,0 +1,327 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PromptTopBar } from '../../../../../components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar';
+import { QuickActionCommand } from '../../../../../static';
+import { MynahIcons } from '../../../../../components/icon';
+
+// Mock the global events
+jest.mock('../../../../../helper/events', () => ({
+ MynahUIGlobalEvents: {
+ getInstance: jest.fn(() => ({
+ addListener: jest.fn(),
+ dispatch: jest.fn(),
+ })),
+ },
+ cancelEvent: jest.fn(),
+}));
+
+// Mock the overlay component
+jest.mock('../../../../../components/overlay', () => {
+ const mockClose = jest.fn();
+ const mockUpdateContent = jest.fn();
+ const mockOverlay = jest.fn().mockImplementation(() => ({
+ close: mockClose,
+ updateContent: mockUpdateContent,
+ }));
+
+ return {
+ Overlay: mockOverlay,
+ OverlayHorizontalDirection: {
+ START_TO_RIGHT: 'start-to-right',
+ END_TO_LEFT: 'end-to-left',
+ },
+ OverlayVerticalDirection: {
+ TO_TOP: 'to-top',
+ },
+ };
+});
+
+describe('PromptTopBar Edge Cases', () => {
+ let promptTopBar: PromptTopBar;
+
+ const basicContextItems: QuickActionCommand[] = [
+ {
+ id: 'context-1',
+ command: '@file1',
+ description: 'First context item',
+ icon: MynahIcons.FILE,
+ },
+ {
+ id: 'context-2',
+ command: '@file2',
+ description: 'Second context item',
+ icon: MynahIcons.FILE,
+ },
+ ];
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ jest.useRealTimers();
+ });
+
+ describe('Context Tooltip', () => {
+ it('should show tooltip with icon when context item has icon', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill') as HTMLElement;
+
+ // Create a proper mouse event with target
+ const mouseEvent = new MouseEvent('mouseenter');
+ Object.defineProperty(mouseEvent, 'target', {
+ value: contextPill,
+ enumerable: true,
+ });
+
+ (promptTopBar as any).showContextTooltip(mouseEvent, basicContextItems[0]);
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should show tooltip without icon when context item has no icon', () => {
+ const contextItemWithoutIcon: QuickActionCommand = {
+ id: 'no-icon',
+ command: '@noicon',
+ description: 'No icon item',
+ };
+
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [contextItemWithoutIcon],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill') as HTMLElement;
+
+ const mouseEvent = new MouseEvent('mouseenter');
+ Object.defineProperty(mouseEvent, 'target', {
+ value: contextPill,
+ enumerable: true,
+ });
+
+ (promptTopBar as any).showContextTooltip(mouseEvent, contextItemWithoutIcon);
+
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should show tooltip without description when context item has no description', () => {
+ const contextItemWithoutDescription: QuickActionCommand = {
+ id: 'no-desc',
+ command: '@nodesc',
+ icon: MynahIcons.FILE,
+ };
+
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [contextItemWithoutDescription],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill') as HTMLElement;
+
+ const mouseEvent = new MouseEvent('mouseenter');
+ Object.defineProperty(mouseEvent, 'target', {
+ value: contextPill,
+ enumerable: true,
+ });
+
+ (promptTopBar as any).showContextTooltip(mouseEvent, contextItemWithoutDescription);
+
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should clear existing tooltip timeout when showing new tooltip', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill') as HTMLElement;
+
+ const mouseEvent = new MouseEvent('mouseenter');
+ Object.defineProperty(mouseEvent, 'target', {
+ value: contextPill,
+ enumerable: true,
+ });
+
+ // Set up a tooltip timeout
+ (promptTopBar as any).contextTooltipTimeout = setTimeout(() => {}, 1000);
+ const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+ // Show tooltip
+ (promptTopBar as any).showContextTooltip(mouseEvent, basicContextItems[0]);
+
+ expect(clearTimeoutSpy).toHaveBeenCalled();
+ });
+
+ it('should hide tooltip and clear timeout', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+
+ // Set up a tooltip timeout
+ (promptTopBar as any).contextTooltipTimeout = setTimeout(() => {}, 1000);
+ const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+ // Create a mock tooltip
+ const mockTooltip = { close: jest.fn() };
+ (promptTopBar as any).contextTooltip = mockTooltip;
+
+ (promptTopBar as any).hideContextTooltip();
+
+ expect(clearTimeoutSpy).toHaveBeenCalled();
+ expect(mockTooltip.close).toHaveBeenCalled();
+ expect((promptTopBar as any).contextTooltip).toBeNull();
+ });
+ });
+
+ describe('Responsive Behavior', () => {
+ beforeEach(() => {
+ // Mock DOM measurements
+ Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+ configurable: true,
+ value: 100,
+ });
+ });
+
+ it('should recalculate visible items based on container width', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ // Mock container width
+ Object.defineProperty(promptTopBar.render, 'offsetWidth', {
+ value: 800,
+ });
+
+ // Mock querySelectorAll to return mock elements
+ const mockPills = Array.from({ length: 2 }, () => ({
+ offsetWidth: 80,
+ }));
+
+ jest.spyOn(promptTopBar.render, 'querySelectorAll').mockReturnValue(mockPills as any);
+
+ // Spy on the update method
+ const updateSpy = jest.spyOn(promptTopBar, 'update');
+
+ (promptTopBar as any).recalculateVisibleItems();
+
+ // Should not call update if visibleCount doesn't change
+ expect(updateSpy).not.toHaveBeenCalled();
+ });
+
+ it('should handle width increase scenario', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ // Set initial visible count with overflow
+ promptTopBar.visibleCount = 1;
+
+ // Mock container with large width
+ Object.defineProperty(promptTopBar.render, 'offsetWidth', {
+ value: 1200,
+ });
+
+ // Mock overflow button
+ const mockOverflowButton = { offsetWidth: 50 };
+ Object.defineProperty(promptTopBar, 'overflowButton', {
+ value: mockOverflowButton,
+ });
+
+ // Mock querySelectorAll to return mock elements
+ const mockPills = Array.from({ length: 1 }, () => ({
+ offsetWidth: 80,
+ }));
+
+ jest.spyOn(promptTopBar.render, 'querySelectorAll').mockReturnValue(mockPills as any);
+
+ // Spy on the update method
+ const updateSpy = jest.spyOn(promptTopBar, 'update');
+
+ (promptTopBar as any).recalculateVisibleItems();
+
+ // Should call update when visibleCount changes
+ expect(updateSpy).toHaveBeenCalled();
+ });
+
+ it('should handle width decrease scenario', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ // Mock container with small width
+ Object.defineProperty(promptTopBar.render, 'offsetWidth', {
+ value: 300,
+ });
+
+ // Mock querySelectorAll to return mock elements
+ const mockPills = Array.from({ length: 2 }, () => ({
+ offsetWidth: 200,
+ }));
+
+ jest.spyOn(promptTopBar.render, 'querySelectorAll').mockReturnValue(mockPills as any);
+
+ // Spy on the update method
+ const updateSpy = jest.spyOn(promptTopBar, 'update');
+
+ (promptTopBar as any).recalculateVisibleItems();
+
+ // Should call update when visibleCount changes
+ expect(updateSpy).toHaveBeenCalled();
+ });
+
+ it('should return early when no context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [],
+ });
+
+ const updateSpy = jest.spyOn(promptTopBar, 'update');
+
+ (promptTopBar as any).recalculateVisibleItems();
+
+ expect(updateSpy).not.toHaveBeenCalled();
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-overflow-detailed.spec.ts b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-overflow-detailed.spec.ts
new file mode 100644
index 0000000000..a1a5f16499
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-overflow-detailed.spec.ts
@@ -0,0 +1,302 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PromptTopBar } from '../../../../../components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar';
+import { QuickActionCommand } from '../../../../../static';
+import { MynahIcons } from '../../../../../components/icon';
+
+// Mock the global events
+jest.mock('../../../../../helper/events', () => ({
+ MynahUIGlobalEvents: {
+ getInstance: jest.fn(() => ({
+ addListener: jest.fn(),
+ dispatch: jest.fn(),
+ })),
+ },
+ cancelEvent: jest.fn(),
+}));
+
+// Mock the overlay component
+const mockUpdateContent = jest.fn();
+const mockClose = jest.fn();
+
+jest.mock('../../../../../components/overlay', () => ({
+ Overlay: jest.fn().mockImplementation(() => ({
+ close: mockClose,
+ updateContent: mockUpdateContent,
+ })),
+ OverlayHorizontalDirection: {
+ START_TO_RIGHT: 'start-to-right',
+ END_TO_LEFT: 'end-to-left',
+ },
+ OverlayVerticalDirection: {
+ TO_TOP: 'to-top',
+ },
+}));
+
+// Mock the detailed list wrapper
+const mockDetailedListUpdate = jest.fn();
+
+jest.mock('../../../../../components/detailed-list/detailed-list', () => ({
+ DetailedListWrapper: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ update: mockDetailedListUpdate,
+ })),
+}));
+
+describe('PromptTopBar Overflow Detailed Tests', () => {
+ let promptTopBar: PromptTopBar;
+ let mockOnContextItemRemove: jest.Mock;
+
+ const manyContextItems: QuickActionCommand[] = Array.from({ length: 10 }, (_, i) => ({
+ id: `context-${i}`,
+ command: `@file${i}`,
+ description: `Context item ${i}`,
+ icon: MynahIcons.FILE,
+ }));
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnContextItemRemove = jest.fn();
+ jest.clearAllMocks();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ });
+
+ describe('Overflow Overlay Generation', () => {
+ it('should generate overflow overlay children', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ // Set visible count to create overflow
+ promptTopBar.visibleCount = 5;
+
+ const overlayChildren = promptTopBar.generateOverflowOverlayChildren();
+
+ expect(overlayChildren).toBeDefined();
+ expect(overlayChildren.classList.contains('mynah-chat-prompt-quick-picks-overlay-wrapper')).toBe(true);
+ });
+
+ it('should create detailed list wrapper on first call', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.visibleCount = 5;
+
+ // First call to create the wrapper
+ promptTopBar.generateOverflowOverlayChildren();
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ expect(DetailedListWrapper).toHaveBeenCalled();
+ });
+
+ it('should update detailed list wrapper on subsequent calls', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.visibleCount = 5;
+
+ // First call to create the wrapper
+ promptTopBar.generateOverflowOverlayChildren();
+
+ // Set up the overflowListContainer property manually for testing
+ (promptTopBar as any).overflowListContainer = {
+ update: mockDetailedListUpdate,
+ };
+
+ // Change visible count to update overflow items
+ promptTopBar.visibleCount = 3;
+
+ // Call again to trigger update path
+ promptTopBar.generateOverflowOverlayChildren();
+
+ expect(mockDetailedListUpdate).toHaveBeenCalled();
+ });
+
+ it('should close overlay when no overflow items remain', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ });
+
+ promptTopBar.visibleCount = 5;
+
+ // Create overlay first
+ promptTopBar.showOverflowOverlay(new Event('click'));
+
+ // Set up the overflowOverlay property manually for testing
+ (promptTopBar as any).overflowOverlay = { close: mockClose };
+
+ // Set up the overflowListContainer property manually for testing
+ (promptTopBar as any).overflowListContainer = {
+ update: mockDetailedListUpdate,
+ };
+
+ // Set visible count to show all items (no overflow)
+ promptTopBar.visibleCount = 10;
+
+ // Generate overlay children again
+ promptTopBar.generateOverflowOverlayChildren();
+
+ expect(mockClose).toHaveBeenCalled();
+ });
+ });
+
+ describe('Overflow Item Handling', () => {
+ it('should handle item click in overflow list', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.visibleCount = 5;
+ promptTopBar.generateOverflowOverlayChildren();
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ const detailedListCall = DetailedListWrapper.mock.calls[0];
+ const detailedListProps = detailedListCall[0];
+
+ // Simulate item click
+ const testItem = { id: 'context-5', title: '@file5' };
+ detailedListProps.onItemClick(testItem);
+
+ expect(mockOnContextItemRemove).toHaveBeenCalled();
+ });
+
+ it('should handle item action click in overflow list', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.visibleCount = 5;
+ promptTopBar.generateOverflowOverlayChildren();
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ const detailedListCall = DetailedListWrapper.mock.calls[0];
+ const detailedListProps = detailedListCall[0];
+
+ // Simulate item action click
+ const testItem = { id: 'context-5', title: '@file5' };
+ detailedListProps.onItemActionClick({}, testItem);
+
+ expect(mockOnContextItemRemove).toHaveBeenCalled();
+ });
+
+ it('should handle item click with title instead of id', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [
+ {
+ command: '@noId',
+ description: 'Item without ID',
+ },
+ ],
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.visibleCount = 0;
+ promptTopBar.generateOverflowOverlayChildren();
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ const detailedListCall = DetailedListWrapper.mock.calls[0];
+ const detailedListProps = detailedListCall[0];
+
+ // Simulate item click with title but no id
+ const testItem = { title: '@noId' };
+ detailedListProps.onItemClick(testItem);
+
+ expect(mockOnContextItemRemove).toHaveBeenCalled();
+ });
+
+ it('should not remove item when item id and title are null', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.visibleCount = 5;
+ promptTopBar.generateOverflowOverlayChildren();
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ const detailedListCall = DetailedListWrapper.mock.calls[0];
+ const detailedListProps = detailedListCall[0];
+
+ // Simulate item click with null item
+ detailedListProps.onItemClick({ id: null, title: null });
+
+ expect(mockOnContextItemRemove).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Overflow Item Conversion', () => {
+ it('should convert overflow items to detailed list group format', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: manyContextItems,
+ });
+
+ promptTopBar.visibleCount = 5;
+
+ const overflowItems = promptTopBar.getOverflowItemsAsDetailedListGroup();
+
+ expect(overflowItems).toBeDefined();
+ expect(overflowItems.length).toBeGreaterThan(0);
+
+ // Check that items have remove actions
+ const firstGroup = overflowItems[0];
+ if (firstGroup.children != null && firstGroup.children.length > 0) {
+ const firstChild = firstGroup.children[0];
+ expect(firstChild.actions).toBeDefined();
+ expect(firstChild.actions?.[0].id).toBe('remove');
+ }
+ });
+
+ it('should handle empty overflow items', () => {
+ // Mock the convertQuickActionCommandGroupsToDetailedListGroups function
+ jest.mock('../../../../../helper/quick-pick-data-handler', () => ({
+ convertQuickActionCommandGroupsToDetailedListGroups: jest.fn().mockReturnValue([]),
+ }));
+
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [],
+ });
+
+ // Mock the implementation to return an empty array
+ jest.spyOn(promptTopBar, 'getOverflowContextItems').mockReturnValue([]);
+
+ const overflowItems = promptTopBar.getOverflowItemsAsDetailedListGroup();
+
+ // Since we're mocking the return value, we can assert it's an empty array
+ expect(Array.isArray(overflowItems)).toBe(true);
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-overflow.spec.ts b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-overflow.spec.ts
new file mode 100644
index 0000000000..df5b28255d
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar-overflow.spec.ts
@@ -0,0 +1,27 @@
+import { PromptTopBar } from '../../../../../components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar';
+
+jest.mock('../../../../../helper/events', () => ({
+ MynahUIGlobalEvents: { getInstance: () => ({ addListener: jest.fn() }) },
+}));
+
+jest.mock('../../../../../components/overlay', () => ({
+ Overlay: jest.fn(() => ({ close: jest.fn() })),
+ OverlayHorizontalDirection: { END_TO_LEFT: 'end-to-left' },
+ OverlayVerticalDirection: { TO_TOP: 'to-top' },
+}));
+
+jest.mock('../../../../../components/detailed-list/detailed-list', () => ({
+ DetailedListWrapper: jest.fn(() => ({ render: document.createElement('div') })),
+}));
+
+jest.mock('../../../../../components/chat-item/prompt-input/prompt-top-bar/top-bar-button', () => ({
+ TopBarButton: jest.fn(() => ({ render: document.createElement('div') })),
+}));
+
+describe('PromptTopBar Overflow', () => {
+ it('should show overflow overlay', () => {
+ const promptTopBar = new PromptTopBar({ tabId: 'test', title: 'Test' });
+ promptTopBar.showOverflowOverlay(new Event('click'));
+ expect(jest.requireMock('../../../../../components/overlay').Overlay).toHaveBeenCalled();
+ });
+});
diff --git a/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar.spec.ts b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar.spec.ts
new file mode 100644
index 0000000000..d286e103cd
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar.spec.ts
@@ -0,0 +1,880 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PromptTopBar } from '../../../../../components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar';
+import { QuickActionCommand, ChatItemButton, MynahEventNames } from '../../../../../static';
+import { MynahIcons } from '../../../../../components/icon';
+import { MynahUIGlobalEvents } from '../../../../../helper/events';
+
+// Mock the cancelEvent function
+jest.mock('../../../../../helper/events', () => {
+ const originalModule = jest.requireActual('../../../../../helper/events');
+ return {
+ ...originalModule,
+ cancelEvent: jest.fn(),
+ MynahUIGlobalEvents: {
+ getInstance: jest.fn(() => ({
+ addListener: jest.fn(),
+ dispatch: jest.fn(),
+ })),
+ },
+ };
+});
+
+// Mock the overlay component
+jest.mock('../../../../../components/overlay', () => ({
+ Overlay: jest.fn().mockImplementation(() => ({
+ close: jest.fn(),
+ updateContent: jest.fn(),
+ })),
+ OverlayHorizontalDirection: {
+ START_TO_RIGHT: 'start-to-right',
+ END_TO_LEFT: 'end-to-left',
+ },
+ OverlayVerticalDirection: {
+ TO_TOP: 'to-top',
+ },
+}));
+
+// Mock the detailed list wrapper
+jest.mock('../../../../../components/detailed-list/detailed-list', () => ({
+ DetailedListWrapper: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ update: jest.fn(),
+ })),
+}));
+
+// Mock the top bar button
+jest.mock('../../../../../components/chat-item/prompt-input/prompt-top-bar/top-bar-button', () => ({
+ TopBarButton: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ update: jest.fn(),
+ onTopBarButtonOverlayChanged: jest.fn(),
+ })),
+}));
+
+describe('PromptTopBar Component', () => {
+ let promptTopBar: PromptTopBar;
+ let mockOnTopBarTitleClick: jest.Mock;
+ let mockOnContextItemAdd: jest.Mock;
+ let mockOnContextItemRemove: jest.Mock;
+ let mockGlobalEvents: any;
+
+ const basicContextItems: QuickActionCommand[] = [
+ {
+ id: 'context-1',
+ command: '@file1',
+ description: 'First context item',
+ icon: MynahIcons.FILE,
+ },
+ {
+ id: 'context-2',
+ command: '@file2',
+ description: 'Second context item',
+ icon: MynahIcons.FILE,
+ },
+ ];
+
+ const basicTopBarButton: ChatItemButton = {
+ id: 'top-bar-button',
+ text: 'Action',
+ icon: MynahIcons.PLUS,
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnTopBarTitleClick = jest.fn();
+ mockOnContextItemAdd = jest.fn();
+ mockOnContextItemRemove = jest.fn();
+
+ mockGlobalEvents = {
+ addListener: jest.fn(),
+ dispatch: jest.fn(),
+ };
+
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue(mockGlobalEvents);
+
+ jest.clearAllMocks();
+ jest.clearAllTimers();
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.runOnlyPendingTimers();
+ jest.useRealTimers();
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create prompt top bar with basic props', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ expect(promptTopBar.render).toBeDefined();
+ expect(promptTopBar.render.classList.contains('mynah-prompt-input-top-bar')).toBe(true);
+ });
+
+ it('should have correct test ID', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const topBar = document.body.querySelector('[data-testid*="prompt-top-bar"]');
+ expect(topBar).toBeDefined();
+ });
+
+ it('should register for global events', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ expect(mockGlobalEvents.addListener).toHaveBeenCalledWith(
+ MynahEventNames.CONTEXT_PINNED,
+ expect.any(Function),
+ );
+ expect(mockGlobalEvents.addListener).toHaveBeenCalledWith(
+ MynahEventNames.ROOT_RESIZE,
+ expect.any(Function),
+ );
+ });
+
+ it('should set up resize observer', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ expect(mockGlobalEvents.addListener).toHaveBeenCalledWith(
+ MynahEventNames.ROOT_RESIZE,
+ expect.any(Function),
+ );
+ });
+
+ it('should calculate visible count from context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ expect(promptTopBar.visibleCount).toBe(2);
+ });
+
+ it('should handle empty context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [],
+ });
+
+ expect(promptTopBar.visibleCount).toBe(0);
+ });
+
+ it('should handle undefined context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ expect(promptTopBar.visibleCount).toBe(0);
+ });
+ });
+
+ describe('Hidden State', () => {
+ it('should be hidden when title is null', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ });
+
+ expect(promptTopBar.isHidden()).toBe(true);
+ expect(promptTopBar.render.classList.contains('hidden')).toBe(true);
+ });
+
+ it('should be hidden when title is empty string', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: '',
+ });
+
+ expect(promptTopBar.isHidden()).toBe(true);
+ expect(promptTopBar.render.classList.contains('hidden')).toBe(true);
+ });
+
+ it('should not be hidden when title is provided', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ expect(promptTopBar.isHidden()).toBe(false);
+ expect(promptTopBar.render.classList.contains('hidden')).toBe(false);
+ });
+ });
+
+ describe('Title Generation', () => {
+ it('should generate title button when title is provided', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ onTopBarTitleClick: mockOnTopBarTitleClick,
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const titleButton = document.body.querySelector('button');
+ expect(titleButton).toBeDefined();
+ expect(titleButton?.textContent).toContain('Test Title');
+ });
+
+ it('should handle title click', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ onTopBarTitleClick: mockOnTopBarTitleClick,
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ // Instead of clicking the button directly, call the onTopBarTitleClick callback
+ (promptTopBar as any).props.onTopBarTitleClick();
+
+ expect(mockOnTopBarTitleClick).toHaveBeenCalled();
+ });
+
+ it('should return empty string when title is null', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ });
+
+ const titleElement = promptTopBar.generateTitle();
+ expect(titleElement).toBe('');
+ });
+
+ it('should update existing title button', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Original Title',
+ });
+
+ // Generate title first time
+ promptTopBar.generateTitle();
+
+ // Update title
+ promptTopBar.update({ title: 'Updated Title' });
+
+ expect(promptTopBar.render).toBeDefined();
+ });
+ });
+
+ describe('Context Pills', () => {
+ it('should generate context pills for context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPills = document.body.querySelectorAll('.pinned-context-pill:not(.overflow-button)');
+ expect(contextPills.length).toBe(2);
+ });
+
+ it('should render context pill with correct content', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill');
+ expect(contextPill?.textContent).toContain('file1');
+ });
+
+ it('should handle context pill click to remove', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [...basicContextItems],
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill') as HTMLElement;
+ contextPill.click();
+
+ expect(mockOnContextItemRemove).toHaveBeenCalledWith(basicContextItems[0]);
+ });
+
+ it('should show context tooltip on hover', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill') as HTMLElement;
+
+ // Trigger mouseenter
+ const mouseEnterEvent = new MouseEvent('mouseenter');
+ contextPill.dispatchEvent(mouseEnterEvent);
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should hide context tooltip on mouseleave', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill') as HTMLElement;
+
+ // Trigger mouseenter then mouseleave
+ contextPill.dispatchEvent(new MouseEvent('mouseenter'));
+ contextPill.dispatchEvent(new MouseEvent('mouseleave'));
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../../../components/overlay');
+ expect(Overlay).not.toHaveBeenCalled();
+ });
+
+ it('should return empty array when no context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ const contextPills = promptTopBar.generateContextPills();
+ expect(contextPills).toEqual([]);
+ });
+
+ it('should handle context items without icon', () => {
+ const contextItemWithoutIcon: QuickActionCommand = {
+ id: 'no-icon',
+ command: '@noicon',
+ description: 'No icon item',
+ };
+
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [contextItemWithoutIcon],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill');
+ expect(contextPill).toBeDefined();
+ });
+
+ it('should strip @ symbol from command in label', () => {
+ const contextItemWithAt: QuickActionCommand = {
+ id: 'with-at',
+ command: '@filename',
+ description: 'File with @ symbol',
+ };
+
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [contextItemWithAt],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ const contextPill = document.body.querySelector('.pinned-context-pill .label');
+ expect(contextPill?.textContent).toBe('filename');
+ });
+ });
+
+ describe('Visible and Overflow Items', () => {
+ it('should get visible context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ promptTopBar.visibleCount = 1;
+ const visibleItems = promptTopBar.getVisibleContextItems();
+
+ expect(visibleItems.length).toBe(1);
+ expect(visibleItems[0]).toBe(basicContextItems[0]);
+ });
+
+ it('should get overflow context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ promptTopBar.visibleCount = 1;
+ const overflowItems = promptTopBar.getOverflowContextItems();
+
+ expect(overflowItems.length).toBe(1);
+ expect(overflowItems[0]).toBe(basicContextItems[1]);
+ });
+
+ it('should return empty array for visible items when no context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ const visibleItems = promptTopBar.getVisibleContextItems();
+ expect(visibleItems).toEqual([]);
+ });
+
+ it('should return empty array for overflow items when no context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ const overflowItems = promptTopBar.getOverflowContextItems();
+ expect(overflowItems).toEqual([]);
+ });
+
+ it('should calculate overflow count correctly', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ promptTopBar.visibleCount = 1;
+ const overflowCount = promptTopBar.getOverflowCount();
+
+ expect(overflowCount).toBe(1);
+ });
+
+ it('should return 0 overflow count when no context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ const overflowCount = promptTopBar.getOverflowCount();
+ expect(overflowCount).toBe(0);
+ });
+ });
+
+ describe('Overflow Pill', () => {
+ it('should generate overflow pill when there are overflow items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ promptTopBar.visibleCount = 1;
+ const overflowPill = promptTopBar.generateOverflowPill();
+
+ expect(overflowPill).not.toBe('');
+ });
+
+ it('should return empty string when no overflow items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ promptTopBar.visibleCount = 2;
+ const overflowPill = promptTopBar.generateOverflowPill();
+
+ expect(overflowPill).toBe('');
+ });
+
+ it('should show correct overflow count in pill', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [...basicContextItems, ...basicContextItems], // 4 items
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ promptTopBar.visibleCount = 2;
+ promptTopBar.update();
+
+ const overflowPill = document.body.querySelector('.overflow-button');
+ expect(overflowPill?.textContent).toBe('+2');
+ });
+
+ it('should handle overflow pill click', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [...basicContextItems, ...basicContextItems],
+ });
+ document.body.appendChild(promptTopBar.render);
+
+ promptTopBar.visibleCount = 2;
+ promptTopBar.update();
+
+ const overflowPill = document.body.querySelector('.overflow-button') as HTMLElement;
+ overflowPill.click();
+
+ const { Overlay } = jest.requireMock('../../../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should update existing overflow pill', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [...basicContextItems, ...basicContextItems],
+ });
+
+ promptTopBar.visibleCount = 2;
+
+ // Generate overflow pill first time
+ promptTopBar.generateOverflowPill();
+
+ // Generate again (should update existing)
+ promptTopBar.visibleCount = 1;
+ const overflowPill = promptTopBar.generateOverflowPill();
+
+ expect(overflowPill).not.toBe('');
+ });
+ });
+
+ describe('Context Item Management', () => {
+ it('should add context pill', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ onContextItemAdd: mockOnContextItemAdd,
+ });
+
+ const newContextItem: QuickActionCommand = {
+ id: 'new-context',
+ command: '@newfile',
+ description: 'New context item',
+ };
+
+ promptTopBar.addContextPill(newContextItem);
+
+ expect(mockOnContextItemAdd).toHaveBeenCalledWith(newContextItem);
+ });
+
+ it('should not add duplicate context pill', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [...basicContextItems],
+ onContextItemAdd: mockOnContextItemAdd,
+ });
+
+ // Try to add existing item
+ promptTopBar.addContextPill(basicContextItems[0]);
+
+ expect(mockOnContextItemAdd).not.toHaveBeenCalled();
+ });
+
+ it('should remove context pill by id', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [...basicContextItems],
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.removeContextPill('context-1');
+
+ expect(mockOnContextItemRemove).toHaveBeenCalledWith(basicContextItems[0]);
+ });
+
+ it('should remove context pill by command when id is not available', () => {
+ const contextItemWithoutId: QuickActionCommand = {
+ command: '@noId',
+ description: 'No ID item',
+ };
+
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [contextItemWithoutId],
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.removeContextPill('@noId');
+
+ expect(mockOnContextItemRemove).toHaveBeenCalledWith(contextItemWithoutId);
+ });
+
+ it('should not remove non-existent context pill', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [...basicContextItems],
+ onContextItemRemove: mockOnContextItemRemove,
+ });
+
+ promptTopBar.removeContextPill('non-existent');
+
+ expect(mockOnContextItemRemove).not.toHaveBeenCalled();
+ });
+
+ it('should handle context pinned global event', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [],
+ onContextItemAdd: mockOnContextItemAdd,
+ });
+
+ // Get the context pinned listener
+ const contextPinnedCall = mockGlobalEvents.addListener.mock.calls.find(
+ (call: any) => call[0] === MynahEventNames.CONTEXT_PINNED,
+ );
+ const contextPinnedListener = contextPinnedCall[1];
+
+ const newContextItem: QuickActionCommand = {
+ id: 'pinned-context',
+ command: '@pinned',
+ description: 'Pinned context item',
+ };
+
+ // Simulate context pinned event
+ contextPinnedListener({
+ tabId: 'test-tab',
+ contextItem: newContextItem,
+ });
+
+ expect(mockOnContextItemAdd).toHaveBeenCalledWith(newContextItem);
+ });
+
+ it('should ignore context pinned event for different tab', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [],
+ onContextItemAdd: mockOnContextItemAdd,
+ });
+
+ const contextPinnedCall = mockGlobalEvents.addListener.mock.calls.find(
+ (call: any) => call[0] === MynahEventNames.CONTEXT_PINNED,
+ );
+ const contextPinnedListener = contextPinnedCall[1];
+
+ const newContextItem: QuickActionCommand = {
+ id: 'pinned-context',
+ command: '@pinned',
+ description: 'Pinned context item',
+ };
+
+ // Simulate context pinned event for different tab
+ contextPinnedListener({
+ tabId: 'different-tab',
+ contextItem: newContextItem,
+ });
+
+ expect(mockOnContextItemAdd).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Update Functionality', () => {
+ it('should update context items', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+
+ // Mock the recalculateVisibleItems method to do nothing
+ const recalculateSpy = jest
+ .spyOn(promptTopBar as any, 'recalculateVisibleItems')
+ .mockImplementation(() => {});
+
+ promptTopBar.update({
+ contextItems: basicContextItems,
+ });
+
+ // Verify that recalculateVisibleItems was called
+ expect(recalculateSpy).toHaveBeenCalled();
+ });
+
+ it('should update title', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Original Title',
+ });
+
+ promptTopBar.update({
+ title: 'Updated Title',
+ });
+
+ expect(promptTopBar.render).toBeDefined();
+ });
+
+ it('should update top bar button', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ topBarButton: basicTopBarButton,
+ });
+
+ const updatedButton: ChatItemButton = {
+ id: 'updated-button',
+ text: 'Updated Action',
+ icon: MynahIcons.REFRESH,
+ };
+
+ promptTopBar.update({
+ topBarButton: updatedButton,
+ });
+
+ expect(promptTopBar.topBarButton.update).toHaveBeenCalledWith({
+ topBarButton: updatedButton,
+ });
+ });
+
+ it('should toggle hidden class based on title', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ expect(promptTopBar.render.classList.contains('hidden')).toBe(false);
+
+ promptTopBar.update({ title: '' });
+
+ expect(promptTopBar.render.classList.contains('hidden')).toBe(true);
+ });
+
+ it('should recalculate visible items when context items change', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: [basicContextItems[0]],
+ });
+
+ const recalculateSpy = jest.spyOn(promptTopBar as any, 'recalculateVisibleItems');
+
+ promptTopBar.update({
+ contextItems: basicContextItems,
+ });
+
+ expect(recalculateSpy).toHaveBeenCalled();
+ });
+
+ it('should recalculate visible items when title changes', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Original Title',
+ contextItems: basicContextItems,
+ });
+
+ const recalculateSpy = jest.spyOn(promptTopBar as any, 'recalculateVisibleItems');
+
+ promptTopBar.update({
+ title: 'Updated Title',
+ });
+
+ expect(recalculateSpy).toHaveBeenCalled();
+ });
+ });
+
+ describe('Top Bar Button Integration', () => {
+ it('should update top bar button overlay', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ topBarButton: basicTopBarButton,
+ });
+
+ const overlayData = {
+ list: [
+ {
+ groupName: 'Test Group',
+ children: [{ id: 'item-1', title: 'Test Item' }],
+ },
+ ],
+ };
+
+ promptTopBar.updateTopBarButtonOverlay(overlayData);
+
+ expect(promptTopBar.topBarButton.onTopBarButtonOverlayChanged).toHaveBeenCalledWith(overlayData);
+ });
+ });
+
+ describe('Resize Handling', () => {
+ it('should handle resize events', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ const resizeCall = mockGlobalEvents.addListener.mock.calls.find(
+ (call: any) => call[0] === MynahEventNames.ROOT_RESIZE,
+ );
+ const resizeListener = resizeCall[1];
+
+ const recalculateSpy = jest.spyOn(promptTopBar as any, 'recalculateVisibleItems');
+
+ // Simulate resize event
+ resizeListener();
+
+ expect(recalculateSpy).toHaveBeenCalled();
+ });
+ });
+
+ describe('Timeout Handling', () => {
+ it('should trigger recalculation after timeout', () => {
+ const recalculateSpy = jest.fn();
+
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ contextItems: basicContextItems,
+ });
+
+ // Mock the recalculateVisibleItems method
+ (promptTopBar as any).recalculateVisibleItems = recalculateSpy;
+
+ // Fast-forward the timeout
+ jest.advanceTimersByTime(100);
+
+ expect(recalculateSpy).toHaveBeenCalled();
+ });
+ });
+
+ describe('Custom Class Names', () => {
+ it('should apply custom class names', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ classNames: ['custom-class-1', 'custom-class-2'],
+ });
+
+ expect(promptTopBar.render.classList.contains('custom-class-1')).toBe(true);
+ expect(promptTopBar.render.classList.contains('custom-class-2')).toBe(true);
+ });
+
+ it('should handle undefined class names', () => {
+ promptTopBar = new PromptTopBar({
+ tabId: 'test-tab',
+ title: 'Test Title',
+ });
+
+ expect(promptTopBar.render.classList.contains('mynah-prompt-input-top-bar')).toBe(true);
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/top-bar-button-overlay.spec.ts b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/top-bar-button-overlay.spec.ts
new file mode 100644
index 0000000000..e556196e9d
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/top-bar-button-overlay.spec.ts
@@ -0,0 +1,281 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+ TopBarButton,
+ TopBarButtonOverlayProps,
+} from '../../../../../components/chat-item/prompt-input/prompt-top-bar/top-bar-button';
+import { ChatItemButton, DetailedList } from '../../../../../static';
+import { MynahIcons } from '../../../../../components/icon';
+
+// Mock the overlay component
+const mockUpdateContent = jest.fn();
+const mockClose = jest.fn();
+
+jest.mock('../../../../../components/overlay', () => ({
+ Overlay: jest.fn().mockImplementation(() => ({
+ close: mockClose,
+ updateContent: mockUpdateContent,
+ })),
+ OverlayHorizontalDirection: {
+ END_TO_LEFT: 'end-to-left',
+ },
+ OverlayVerticalDirection: {
+ TO_TOP: 'to-top',
+ },
+}));
+
+// Mock the detailed list wrapper
+const mockDetailedListUpdate = jest.fn();
+
+jest.mock('../../../../../components/detailed-list/detailed-list', () => ({
+ DetailedListWrapper: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ update: mockDetailedListUpdate,
+ })),
+}));
+
+describe('TopBarButton Overlay Functionality', () => {
+ let topBarButton: TopBarButton;
+ let mockOnKeyPress: jest.Mock;
+ let mockOnGroupClick: jest.Mock;
+ let mockOnItemClick: jest.Mock;
+ let mockOnClose: jest.Mock;
+
+ const basicButton: ChatItemButton = {
+ id: 'test-button',
+ text: 'Test Button',
+ icon: MynahIcons.PLUS,
+ };
+
+ const basicOverlayData: TopBarButtonOverlayProps = {
+ tabId: 'test-tab',
+ topBarButtonOverlay: {
+ list: [
+ {
+ groupName: 'Test Group',
+ children: [
+ {
+ id: 'item-1',
+ title: 'Test Item 1',
+ description: 'Description 1',
+ },
+ ],
+ },
+ ],
+ },
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnKeyPress = jest.fn();
+ mockOnGroupClick = jest.fn();
+ mockOnItemClick = jest.fn();
+ mockOnClose = jest.fn();
+ jest.clearAllMocks();
+
+ // Mock window event listeners
+ global.addEventListener = jest.fn();
+ global.removeEventListener = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ });
+
+ describe('Overlay Creation and Updates', () => {
+ it('should create overlay with event handlers', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ const overlayData: TopBarButtonOverlayProps = {
+ ...basicOverlayData,
+ events: {
+ onKeyPress: mockOnKeyPress,
+ onGroupClick: mockOnGroupClick,
+ onItemClick: mockOnItemClick,
+ onClose: mockOnClose,
+ },
+ };
+
+ topBarButton.showOverlay(overlayData);
+
+ const { Overlay } = jest.requireMock('../../../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ expect(global.addEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
+ });
+
+ it('should update existing overlay content', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ // Show overlay first time
+ topBarButton.showOverlay(basicOverlayData);
+
+ // Show overlay second time (should update existing)
+ const updatedOverlayData: TopBarButtonOverlayProps = {
+ ...basicOverlayData,
+ topBarButtonOverlay: {
+ list: [
+ {
+ groupName: 'Updated Group',
+ children: [{ id: 'updated-item', title: 'Updated Item' }],
+ },
+ ],
+ },
+ };
+
+ topBarButton.showOverlay(updatedOverlayData);
+
+ expect(mockUpdateContent).toHaveBeenCalled();
+ });
+
+ it('should handle overlay close callback', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ const overlayData: TopBarButtonOverlayProps = {
+ ...basicOverlayData,
+ events: {
+ onClose: mockOnClose,
+ },
+ };
+
+ topBarButton.showOverlay(overlayData);
+
+ const overlayCall = jest.requireMock('../../../../../components/overlay').Overlay.mock.calls[0];
+ const overlayProps = overlayCall[0];
+
+ // Simulate overlay close
+ overlayProps.onClose();
+
+ expect(mockOnClose).toHaveBeenCalled();
+ expect(global.removeEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
+ });
+ });
+
+ describe('Detailed List Wrapper', () => {
+ it('should create detailed list wrapper on first call', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ const overlayData: TopBarButtonOverlayProps = {
+ ...basicOverlayData,
+ events: {
+ onGroupClick: mockOnGroupClick,
+ onItemClick: mockOnItemClick,
+ },
+ };
+
+ topBarButton.showOverlay(overlayData);
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ expect(DetailedListWrapper).toHaveBeenCalled();
+ });
+
+ it('should update detailed list wrapper on subsequent calls', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ // First call to create the wrapper
+ topBarButton.showOverlay(basicOverlayData);
+
+ // Set up the overlayData property manually for testing
+ (topBarButton as any).overlayData = basicOverlayData;
+ (topBarButton as any).checklistSelectorContainer = {
+ update: mockDetailedListUpdate,
+ };
+
+ // Call getItemGroups directly to trigger the update path
+ (topBarButton as any).getItemGroups();
+
+ expect(mockDetailedListUpdate).toHaveBeenCalled();
+ });
+
+ it('should handle group action click with null group name', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ const overlayData: TopBarButtonOverlayProps = {
+ ...basicOverlayData,
+ events: {
+ onGroupClick: mockOnGroupClick,
+ },
+ };
+
+ topBarButton.showOverlay(overlayData);
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ const detailedListCall = DetailedListWrapper.mock.calls[0];
+ const detailedListProps = detailedListCall[0];
+
+ // Simulate group action click with null group name
+ detailedListProps.onGroupActionClick({}, null);
+
+ expect(mockOnGroupClick).not.toHaveBeenCalled();
+ });
+
+ it('should handle item action click with null item', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ const overlayData: TopBarButtonOverlayProps = {
+ ...basicOverlayData,
+ events: {
+ onItemClick: mockOnItemClick,
+ },
+ };
+
+ topBarButton.showOverlay(overlayData);
+
+ const { DetailedListWrapper } = jest.requireMock('../../../../../components/detailed-list/detailed-list');
+ const detailedListCall = DetailedListWrapper.mock.calls[0];
+ const detailedListProps = detailedListCall[0];
+
+ // Simulate item action click with null item
+ detailedListProps.onItemActionClick({}, null);
+
+ expect(mockOnItemClick).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Overlay Content Updates', () => {
+ it('should update overlay content when topBarButtonOverlay changes', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ // Show overlay first
+ topBarButton.showOverlay(basicOverlayData);
+
+ // Set up the overlay property manually for testing
+ (topBarButton as any).overlay = { updateContent: mockUpdateContent };
+
+ const updatedOverlay: DetailedList = {
+ list: [
+ {
+ groupName: 'New Group',
+ children: [{ id: 'new-item', title: 'New Item' }],
+ },
+ ],
+ };
+
+ topBarButton.onTopBarButtonOverlayChanged(updatedOverlay);
+
+ expect(mockUpdateContent).toHaveBeenCalled();
+ });
+
+ it('should not update overlay content when overlay is not shown', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ // Set up the overlayData property manually for testing
+ (topBarButton as any).overlayData = basicOverlayData;
+
+ const updatedOverlay: DetailedList = {
+ list: [
+ {
+ groupName: 'New Group',
+ children: [{ id: 'new-item', title: 'New Item' }],
+ },
+ ],
+ };
+
+ // Should not throw error when overlay is not shown
+ expect(() => topBarButton.onTopBarButtonOverlayChanged(updatedOverlay)).not.toThrow();
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/top-bar-button.spec.ts b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/top-bar-button.spec.ts
new file mode 100644
index 0000000000..0eea43a9f1
--- /dev/null
+++ b/mynah-ui/src/__test__/components/chat-item/prompt-input/prompt-top-bar/top-bar-button.spec.ts
@@ -0,0 +1,136 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TopBarButton } from '../../../../../components/chat-item/prompt-input/prompt-top-bar/top-bar-button';
+import { ChatItemButton } from '../../../../../static';
+import { MynahIcons } from '../../../../../components/icon';
+
+// Mock the overlay component
+jest.mock('../../../../../components/overlay', () => ({
+ Overlay: jest.fn().mockImplementation(() => ({
+ close: jest.fn(),
+ updateContent: jest.fn(),
+ })),
+ OverlayHorizontalDirection: {
+ END_TO_LEFT: 'end-to-left',
+ },
+ OverlayVerticalDirection: {
+ TO_TOP: 'to-top',
+ },
+}));
+
+// Mock the detailed list wrapper
+jest.mock('../../../../../components/detailed-list/detailed-list', () => ({
+ DetailedListWrapper: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ update: jest.fn(),
+ })),
+}));
+
+describe('TopBarButton Component', () => {
+ let topBarButton: TopBarButton;
+ let mockOnTopBarButtonClick: jest.Mock;
+
+ const basicButton: ChatItemButton = {
+ id: 'test-button',
+ text: 'Test Button',
+ icon: MynahIcons.PLUS,
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnTopBarButtonClick = jest.fn();
+ jest.clearAllMocks();
+
+ // Mock window event listeners
+ global.addEventListener = jest.fn();
+ global.removeEventListener = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create top bar button with basic props', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ expect(topBarButton.render).toBeDefined();
+ expect(topBarButton.render.classList.contains('top-bar-button')).toBe(true);
+ });
+
+ it('should create top bar button without button prop', () => {
+ topBarButton = new TopBarButton({});
+
+ expect(topBarButton.render).toBeDefined();
+ });
+
+ it('should have correct test ID', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+ document.body.appendChild(topBarButton.render);
+
+ const button = document.body.querySelector('[data-testid*="top-bar-button"]');
+ expect(button).toBeDefined();
+ });
+
+ it('should have contenteditable false attribute', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ expect(topBarButton.render.getAttribute('contenteditable')).toBe('false');
+ });
+ });
+
+ describe('Button Click Handling', () => {
+ it('should handle button click', () => {
+ topBarButton = new TopBarButton({
+ topBarButton: basicButton,
+ onTopBarButtonClick: mockOnTopBarButtonClick,
+ });
+ document.body.appendChild(topBarButton.render);
+
+ const buttonElement = document.body.querySelector('button') as HTMLElement;
+ buttonElement.click();
+
+ expect(mockOnTopBarButtonClick).toHaveBeenCalledWith(basicButton);
+ });
+
+ it('should not call callback when topBarButton is null', () => {
+ topBarButton = new TopBarButton({
+ onTopBarButtonClick: mockOnTopBarButtonClick,
+ });
+ document.body.appendChild(topBarButton.render);
+
+ const buttonElement = document.body.querySelector('button') as HTMLElement;
+ buttonElement.click();
+
+ expect(mockOnTopBarButtonClick).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Update Functionality', () => {
+ it('should update button properties', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ const updatedButton: ChatItemButton = {
+ id: 'updated-button',
+ text: 'Updated Button',
+ icon: MynahIcons.REFRESH,
+ };
+
+ topBarButton.update({ topBarButton: updatedButton });
+
+ expect(topBarButton.render).toBeDefined();
+ });
+
+ it('should handle update with null button', () => {
+ topBarButton = new TopBarButton({ topBarButton: basicButton });
+
+ topBarButton.update({});
+
+ expect(topBarButton.render).toBeDefined();
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/detailed-list/detailed-list-item.spec.ts b/mynah-ui/src/__test__/components/detailed-list/detailed-list-item.spec.ts
new file mode 100644
index 0000000000..9aa7f60d77
--- /dev/null
+++ b/mynah-ui/src/__test__/components/detailed-list/detailed-list-item.spec.ts
@@ -0,0 +1,975 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DetailedListItemWrapper } from '../../../components/detailed-list/detailed-list-item';
+import { DetailedListItem } from '../../../static';
+import { MynahIcons } from '../../../components/icon';
+
+// Mock the overlay component
+jest.mock('../../../components/overlay', () => ({
+ Overlay: jest.fn().mockImplementation(() => ({
+ close: jest.fn(),
+ })),
+ OverlayHorizontalDirection: {
+ CENTER: 'center',
+ END_TO_LEFT: 'end-to-left',
+ },
+ OverlayVerticalDirection: {
+ TO_TOP: 'to-top',
+ CENTER: 'center',
+ },
+}));
+
+describe('DetailedListItemWrapper Component', () => {
+ let detailedListItem: DetailedListItemWrapper;
+ let mockOnSelect: jest.Mock;
+ let mockOnClick: jest.Mock;
+ let mockOnActionClick: jest.Mock;
+
+ const basicListItem: DetailedListItem = {
+ id: 'item-1',
+ title: 'Test Item',
+ description: 'This is a test item description',
+ };
+
+ const itemWithIcon: DetailedListItem = {
+ id: 'item-2',
+ title: 'Item with Icon',
+ description: 'Item with icon description',
+ icon: MynahIcons.OK,
+ iconForegroundStatus: 'success',
+ };
+
+ const itemWithStatus: DetailedListItem = {
+ id: 'item-3',
+ title: 'Item with Status',
+ description: 'Item with status description',
+ status: {
+ status: 'warning',
+ text: 'Warning',
+ icon: MynahIcons.WARNING,
+ description: 'This is a warning status',
+ },
+ };
+
+ const itemWithActions: DetailedListItem = {
+ id: 'item-4',
+ title: 'Item with Actions',
+ description: 'Item with actions description',
+ actions: [
+ {
+ id: 'action-1',
+ text: 'Edit',
+ icon: MynahIcons.PENCIL,
+ description: 'Edit this item',
+ },
+ {
+ id: 'action-2',
+ text: 'Delete',
+ icon: MynahIcons.CANCEL,
+ description: 'Delete this item',
+ status: 'error',
+ },
+ ],
+ };
+
+ const itemWithChildren: DetailedListItem = {
+ id: 'item-5',
+ title: 'Item with Children',
+ description: 'Item with children description',
+ children: [
+ {
+ groupName: 'Child Group',
+ children: [{ id: 'child-1', title: 'Child Item 1' }],
+ },
+ ],
+ };
+
+ const disabledItem: DetailedListItem = {
+ id: 'item-6',
+ title: 'Disabled Item',
+ description: 'This item is disabled',
+ disabled: true,
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnSelect = jest.fn();
+ mockOnClick = jest.fn();
+ mockOnActionClick = jest.fn();
+ jest.clearAllMocks();
+ jest.clearAllTimers();
+ jest.useFakeTimers();
+
+ // Mock scrollIntoView
+ Element.prototype.scrollIntoView = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.runOnlyPendingTimers();
+ jest.useRealTimers();
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create detailed list item with basic props', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+
+ expect(detailedListItem.render).toBeDefined();
+ expect(detailedListItem.render.classList.contains('mynah-detailed-list-item')).toBe(true);
+ });
+
+ it('should render item title', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const title = document.body.querySelector('.mynah-detailed-list-item-name');
+ expect(title?.textContent).toBe(basicListItem.title);
+ });
+
+ it('should render item description', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const description = document.body.querySelector('.mynah-detailed-list-item-description');
+ // The description is processed by markdown parser and wrapped in bdi with
+ expect(description?.innerHTML).toContain('This is a test item description');
+ });
+
+ it('should use name when title is not provided', () => {
+ const itemWithName: DetailedListItem = {
+ id: 'item-name',
+ name: 'Item Name',
+ description: 'Description',
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithName });
+ document.body.appendChild(detailedListItem.render);
+
+ const title = document.body.querySelector('.mynah-detailed-list-item-name');
+ expect(title?.textContent).toBe(itemWithName.name);
+ });
+
+ it('should have correct test ID', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const item = document.body.querySelector('[data-testid*="quick-pick-item"]');
+ expect(item).toBeDefined();
+ });
+ });
+
+ describe('Icon Rendering', () => {
+ it('should render icon when provided', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithIcon });
+ document.body.appendChild(detailedListItem.render);
+
+ const iconContainer = document.body.querySelector('.mynah-detailed-list-icon');
+ expect(iconContainer).toBeDefined();
+
+ const icon = iconContainer?.querySelector('.mynah-icon');
+ expect(icon).toBeDefined();
+ });
+
+ it('should not render icon container when icon is not provided', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const iconContainer = document.body.querySelector('.mynah-detailed-list-icon');
+ expect(iconContainer).toBeNull();
+ });
+
+ it('should apply icon foreground status', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithIcon });
+ document.body.appendChild(detailedListItem.render);
+
+ const icon = document.body.querySelector('.mynah-icon');
+ expect(icon).toBeDefined();
+ });
+ });
+
+ describe('Status Rendering', () => {
+ it('should render status when provided', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatus });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status');
+ expect(status).toBeDefined();
+ expect(status?.classList.contains('status-warning')).toBe(true);
+ });
+
+ it('should render status text', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatus });
+ document.body.appendChild(detailedListItem.render);
+
+ const statusText = document.body.querySelector('.mynah-detailed-list-item-status span');
+ expect(statusText?.textContent).toBe(itemWithStatus.status?.text);
+ });
+
+ it('should render status icon', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatus });
+ document.body.appendChild(detailedListItem.render);
+
+ const statusIcon = document.body.querySelector('.mynah-detailed-list-item-status .mynah-icon');
+ expect(statusIcon).toBeDefined();
+ });
+
+ it('should show tooltip on status hover when description is provided', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatus });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status') as HTMLElement;
+
+ // Trigger mouseover
+ const mouseOverEvent = new MouseEvent('mouseover');
+ Object.defineProperty(mouseOverEvent, 'currentTarget', {
+ value: status,
+ enumerable: true,
+ });
+ status.dispatchEvent(mouseOverEvent);
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(350);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should hide tooltip on mouseleave', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatus });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status') as HTMLElement;
+
+ // Trigger mouseover then mouseleave
+ status.dispatchEvent(new MouseEvent('mouseover'));
+ status.dispatchEvent(new MouseEvent('mouseleave'));
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(350);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).not.toHaveBeenCalled();
+ });
+
+ it('should handle status without description', () => {
+ const itemWithStatusNoDesc: DetailedListItem = {
+ id: 'item-status-no-desc',
+ title: 'Item',
+ status: {
+ status: 'info',
+ text: 'Info',
+ icon: MynahIcons.INFO,
+ },
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatusNoDesc });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status');
+ expect(status).toBeDefined();
+ });
+ });
+
+ describe('Actions Rendering', () => {
+ it('should render single action as button', () => {
+ const itemWithSingleAction: DetailedListItem = {
+ id: 'single-action',
+ title: 'Single Action Item',
+ actions: itemWithActions.actions != null ? [itemWithActions.actions[0]] : [],
+ };
+
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithSingleAction,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const actionsContainer = document.body.querySelector('.mynah-detailed-list-item-actions');
+ expect(actionsContainer).toBeDefined();
+
+ const actionButton = actionsContainer?.querySelector('button');
+ expect(actionButton).toBeDefined();
+ });
+
+ it('should render multiple actions as menu when groupActions is not false', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const actionsContainer = document.body.querySelector('.mynah-detailed-list-item-actions');
+ expect(actionsContainer).toBeDefined();
+
+ const menuButton = actionsContainer?.querySelector('[data-testid*="action-menu"]');
+ expect(menuButton).toBeDefined();
+ });
+
+ it('should render multiple actions as individual buttons when groupActions is false', () => {
+ const itemWithUngroupedActions: DetailedListItem = {
+ ...itemWithActions,
+ groupActions: false,
+ };
+
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithUngroupedActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const actionsContainer = document.body.querySelector('.mynah-detailed-list-item-actions');
+ expect(actionsContainer).toBeDefined();
+
+ const actionButtons = actionsContainer?.querySelectorAll('button');
+ expect(actionButtons?.length).toBe(2);
+ });
+
+ it('should handle action click', () => {
+ const itemWithSingleAction: DetailedListItem = {
+ id: 'single-action',
+ title: 'Single Action Item',
+ actions: itemWithActions.actions != null ? [itemWithActions.actions[0]] : [],
+ };
+
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithSingleAction,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const actionButton = document.body.querySelector('.mynah-detailed-list-item-actions button') as HTMLElement;
+ actionButton.click();
+
+ expect(mockOnActionClick).toHaveBeenCalledWith(itemWithActions.actions?.[0], itemWithSingleAction);
+ });
+
+ it('should show action menu overlay when menu button is clicked', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const menuButton = document.body.querySelector('[data-testid*="action-menu"]') as HTMLElement;
+ if (menuButton != null) {
+ menuButton.click();
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ } else {
+ // If no menu button found, it means actions are rendered individually
+ const actionButtons = document.body.querySelectorAll('.mynah-detailed-list-item-actions button');
+ expect(actionButtons.length).toBeGreaterThan(0);
+ }
+ });
+ });
+
+ describe('Children Indicator', () => {
+ it('should render arrow icon when item has children', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithChildren });
+ document.body.appendChild(detailedListItem.render);
+
+ const arrowIcon = document.body.querySelector('.mynah-detailed-list-item-arrow-icon');
+ expect(arrowIcon).toBeDefined();
+
+ const icon = arrowIcon?.querySelector('.mynah-icon');
+ expect(icon).toBeDefined();
+ });
+
+ it('should not render arrow icon when item has no children', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const arrowIcon = document.body.querySelector('.mynah-detailed-list-item-arrow-icon');
+ expect(arrowIcon).toBeNull();
+ });
+
+ it('should not render arrow icon when children array is empty', () => {
+ const itemWithEmptyChildren: DetailedListItem = {
+ id: 'empty-children',
+ title: 'Empty Children',
+ children: [],
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithEmptyChildren });
+ document.body.appendChild(detailedListItem.render);
+
+ const arrowIcon = document.body.querySelector('.mynah-detailed-list-item-arrow-icon');
+ expect(arrowIcon).toBeNull();
+ });
+ });
+
+ describe('Click Handling', () => {
+ it('should handle select click when selectable', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: basicListItem,
+ onSelect: mockOnSelect,
+ selectable: true,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ detailedListItem.render.click();
+
+ expect(mockOnSelect).toHaveBeenCalledWith(basicListItem);
+ });
+
+ it('should handle click when clickable', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: basicListItem,
+ onClick: mockOnClick,
+ clickable: true,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ detailedListItem.render.click();
+
+ expect(mockOnClick).toHaveBeenCalledWith(basicListItem);
+ });
+
+ it('should not handle clicks when item is disabled', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: disabledItem,
+ onSelect: mockOnSelect,
+ onClick: mockOnClick,
+ selectable: true,
+ clickable: true,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ detailedListItem.render.click();
+
+ expect(mockOnSelect).not.toHaveBeenCalled();
+ expect(mockOnClick).not.toHaveBeenCalled();
+ });
+
+ it('should prevent mousedown event', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const mouseDownEvent = new MouseEvent('mousedown', { bubbles: true });
+ const preventDefaultSpy = jest.spyOn(mouseDownEvent, 'preventDefault');
+ const stopPropagationSpy = jest.spyOn(mouseDownEvent, 'stopPropagation');
+
+ detailedListItem.render.dispatchEvent(mouseDownEvent);
+
+ expect(preventDefaultSpy).toHaveBeenCalled();
+ expect(stopPropagationSpy).toHaveBeenCalled();
+ });
+
+ it('should not call callbacks when they are not provided', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: basicListItem,
+ selectable: true,
+ clickable: true,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ // Should not throw error
+ detailedListItem.render.click();
+ expect(detailedListItem.render).toBeDefined();
+ });
+ });
+
+ describe('Focus Management', () => {
+ it('should set focus with target-command class', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ detailedListItem.setFocus(true, false);
+
+ expect(detailedListItem.render.classList.contains('target-command')).toBe(true);
+ });
+
+ it('should remove focus by removing target-command class', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ detailedListItem.setFocus(true, false);
+ detailedListItem.setFocus(false, false);
+
+ expect(detailedListItem.render.classList.contains('target-command')).toBe(false);
+ });
+
+ it('should scroll into view when requested', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const scrollIntoViewSpy = jest.spyOn(detailedListItem.render, 'scrollIntoView');
+
+ detailedListItem.setFocus(true, true);
+
+ expect(scrollIntoViewSpy).toHaveBeenCalledWith(true);
+ });
+
+ it('should not scroll into view when not requested', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const scrollIntoViewSpy = jest.spyOn(detailedListItem.render, 'scrollIntoView');
+
+ detailedListItem.setFocus(true, false);
+
+ expect(scrollIntoViewSpy).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Item Retrieval', () => {
+ it('should return the list item', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+
+ const retrievedItem = detailedListItem.getItem();
+
+ expect(retrievedItem).toBe(basicListItem);
+ });
+ });
+
+ describe('Attributes', () => {
+ it('should set correct attributes for enabled selectable item', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: basicListItem,
+ selectable: true,
+ clickable: false,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ expect(detailedListItem.render.getAttribute('disabled')).toBe('false');
+ expect(detailedListItem.render.getAttribute('selectable')).toBe('true');
+ expect(detailedListItem.render.getAttribute('clickable')).toBe('false');
+ });
+
+ it('should set correct attributes for disabled item', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: disabledItem,
+ selectable: true,
+ clickable: true,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ expect(detailedListItem.render.getAttribute('disabled')).toBe('true');
+ });
+
+ it('should set correct attributes for clickable item', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: basicListItem,
+ selectable: false,
+ clickable: true,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ expect(detailedListItem.render.getAttribute('clickable')).toBe('true');
+ });
+ });
+
+ describe('Text Direction', () => {
+ it('should apply row text direction by default', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const textContainer = document.body.querySelector('.mynah-detailed-list-item-text');
+ expect(textContainer?.classList.contains('mynah-detailed-list-item-text-direction-row')).toBe(true);
+ });
+
+ it('should apply column text direction when specified', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: basicListItem,
+ textDirection: 'column',
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const textContainer = document.body.querySelector('.mynah-detailed-list-item-text');
+ expect(textContainer?.classList.contains('mynah-detailed-list-item-text-direction-column')).toBe(true);
+ });
+
+ it('should apply description text direction', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: basicListItem,
+ descriptionTextDirection: 'rtl',
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const description = document.body.querySelector('.mynah-detailed-list-item-description');
+ expect(description?.classList.contains('rtl')).toBe(true);
+ });
+
+ it('should use ltr as default description text direction', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: basicListItem });
+ document.body.appendChild(detailedListItem.render);
+
+ const description = document.body.querySelector('.mynah-detailed-list-item-description');
+ expect(description?.classList.contains('ltr')).toBe(true);
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle item without title or name', () => {
+ const itemWithoutTitle: DetailedListItem = {
+ id: 'no-title',
+ description: 'Only description',
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithoutTitle });
+ document.body.appendChild(detailedListItem.render);
+
+ const title = document.body.querySelector('.mynah-detailed-list-item-name');
+ expect(title).toBeNull();
+ });
+
+ it('should handle item without description', () => {
+ const itemWithoutDescription: DetailedListItem = {
+ id: 'no-desc',
+ title: 'Only title',
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithoutDescription });
+ document.body.appendChild(detailedListItem.render);
+
+ const description = document.body.querySelector('.mynah-detailed-list-item-description');
+ expect(description).toBeNull();
+ });
+
+ it('should handle empty actions array', () => {
+ const itemWithEmptyActions: DetailedListItem = {
+ id: 'empty-actions',
+ title: 'Empty Actions',
+ actions: [],
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithEmptyActions });
+ document.body.appendChild(detailedListItem.render);
+
+ // Empty actions array still creates the container but with no buttons
+ const actionsContainer = document.body.querySelector('.mynah-detailed-list-item-actions');
+ if (actionsContainer != null) {
+ const buttons = actionsContainer.querySelectorAll('button');
+ expect(buttons.length).toBe(0);
+ } else {
+ expect(actionsContainer).toBeNull();
+ }
+ });
+
+ it('should handle markdown in description', () => {
+ const itemWithMarkdown: DetailedListItem = {
+ id: 'markdown',
+ title: 'Markdown Item',
+ description: '**Bold text** and *italic text*',
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithMarkdown });
+ document.body.appendChild(detailedListItem.render);
+
+ const description = document.body.querySelector('.mynah-detailed-list-item-description');
+ expect(description?.innerHTML).toContain('');
+ expect(description?.innerHTML).toContain('');
+ });
+
+ it('should handle special characters in description', () => {
+ const itemWithSpecialChars: DetailedListItem = {
+ id: 'special-chars',
+ title: 'Special Characters',
+ description: 'Text with spaces and\nnew lines',
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithSpecialChars });
+ document.body.appendChild(detailedListItem.render);
+
+ const description = document.body.querySelector('.mynah-detailed-list-item-description');
+ expect(description?.innerHTML).toContain(' ');
+ });
+ });
+
+ describe('Tooltip Management', () => {
+ it('should hide tooltip when hideTooltip is called', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatus });
+
+ // Simulate showing tooltip
+ detailedListItem.hideTooltip();
+
+ // Should not throw error
+ expect(detailedListItem.render).toBeDefined();
+ });
+
+ it('should clear timeout when hiding tooltip', () => {
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithStatus });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status') as HTMLElement;
+
+ // Start showing tooltip
+ status.dispatchEvent(new MouseEvent('mouseover'));
+
+ // Hide before timeout completes
+ detailedListItem.hideTooltip();
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(350);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).not.toHaveBeenCalled();
+ });
+
+ it('should not show tooltip when content is empty', () => {
+ const itemWithEmptyStatusDesc: DetailedListItem = {
+ id: 'empty-status-desc',
+ title: 'Item',
+ status: {
+ status: 'info',
+ text: 'Info',
+ // No description property at all
+ },
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithEmptyStatusDesc });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status') as HTMLElement;
+
+ // Should not have mouseover event handler when no description
+ expect(status).toBeDefined();
+
+ // Manually trigger mouseover to test - should not create overlay
+ const mouseOverEvent = new MouseEvent('mouseover');
+ Object.defineProperty(mouseOverEvent, 'currentTarget', {
+ value: status,
+ enumerable: true,
+ });
+
+ // This should not trigger tooltip since there's no description
+ expect(status).toBeDefined();
+ });
+
+ it('should handle tooltip with undefined content', () => {
+ const itemWithUndefinedStatusDesc: DetailedListItem = {
+ id: 'undefined-status-desc',
+ title: 'Item',
+ status: {
+ status: 'info',
+ text: 'Info',
+ description: undefined,
+ },
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithUndefinedStatusDesc });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status') as HTMLElement;
+
+ // Should not have mouseover event handler
+ expect(status).toBeDefined();
+ });
+
+ it('should handle tooltip with whitespace-only content', () => {
+ const itemWithWhitespaceStatusDesc: DetailedListItem = {
+ id: 'whitespace-status-desc',
+ title: 'Item',
+ status: {
+ status: 'info',
+ text: 'Info',
+ description: ' \n\t ', // Only whitespace characters
+ },
+ };
+
+ detailedListItem = new DetailedListItemWrapper({ listItem: itemWithWhitespaceStatusDesc });
+ document.body.appendChild(detailedListItem.render);
+
+ const status = document.body.querySelector('.mynah-detailed-list-item-status') as HTMLElement;
+
+ // Trigger mouseover
+ const mouseOverEvent = new MouseEvent('mouseover');
+ Object.defineProperty(mouseOverEvent, 'currentTarget', {
+ value: status,
+ enumerable: true,
+ });
+ status.dispatchEvent(mouseOverEvent);
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(350);
+
+ // The current implementation will create overlay even for whitespace-only content
+ // because it checks content.trim() !== undefined (which is always true)
+ // This is actually a bug in the implementation, but we test the current behavior
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+ });
+
+ describe('Action Menu Overlay', () => {
+ it('should hide action menu overlay', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ // Show menu first
+ const menuButton = document.body.querySelector('[data-testid*="action-menu"]') as HTMLElement;
+ if (menuButton != null) {
+ menuButton.click();
+
+ // Now test hiding - this should be called internally when action is clicked
+ const actionButton = document.body.querySelector(
+ '.mynah-detailed-list-item-actions button',
+ ) as HTMLElement;
+ if (actionButton != null) {
+ actionButton.click();
+ expect(mockOnActionClick).toHaveBeenCalled();
+ }
+ }
+ });
+
+ it('should handle action button creation with all properties', () => {
+ const itemWithComplexAction: DetailedListItem = {
+ id: 'complex-action',
+ title: 'Complex Action Item',
+ actions: [
+ {
+ id: 'complex-action-1',
+ text: 'Complex Action',
+ icon: MynahIcons.PENCIL,
+ description: 'This is a complex action',
+ disabled: false,
+ status: 'warning',
+ confirmation: {
+ title: 'Confirm Action',
+ description: 'Are you sure?',
+ confirmButtonText: 'Yes',
+ cancelButtonText: 'No',
+ },
+ },
+ ],
+ groupActions: false,
+ };
+
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithComplexAction,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const actionButton = document.body.querySelector('.mynah-detailed-list-item-actions button') as HTMLElement;
+ expect(actionButton).toBeDefined();
+
+ // The button should be created with all properties, but clicking might not trigger
+ // the callback due to confirmation dialog or other button component behavior
+ expect(actionButton).toBeDefined();
+ });
+
+ it('should create action menu overlay with correct structure', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ // Trigger the menu button click to create overlay
+ const menuButton = document.body.querySelector('[data-testid*="action-menu"]') as HTMLElement;
+ if (menuButton != null) {
+ menuButton.click();
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).toHaveBeenCalledWith(
+ expect.objectContaining({
+ background: true,
+ closeOnOutsideClick: true,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ children: expect.arrayContaining([
+ expect.objectContaining({
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-actions-overlay'],
+ }),
+ ]),
+ }),
+ );
+ }
+ });
+
+ it('should trigger menu button click and show overlay', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ // Find the menu button (ellipsis button)
+ const menuButton = document.body.querySelector('[data-testid*="action-menu"]') as HTMLElement;
+
+ if (menuButton != null) {
+ // Click the menu button to trigger the overlay
+ const clickEvent = new MouseEvent('click', { bubbles: true });
+ menuButton.dispatchEvent(clickEvent);
+
+ // Verify overlay was created
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ } else {
+ // If no menu button, actions are rendered individually
+ const actionButtons = document.body.querySelectorAll('.mynah-detailed-list-item-actions button');
+ expect(actionButtons.length).toBeGreaterThan(0);
+ }
+ });
+
+ it('should handle action menu with no actions', () => {
+ const itemWithNoActions: DetailedListItem = {
+ id: 'no-actions',
+ title: 'No Actions Item',
+ };
+
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithNoActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ const actionsContainer = document.body.querySelector('.mynah-detailed-list-item-actions');
+ expect(actionsContainer).toBeNull();
+ });
+
+ it('should handle single action without grouping', () => {
+ const itemWithSingleAction: DetailedListItem = {
+ id: 'single-action',
+ title: 'Single Action Item',
+ actions: [
+ {
+ id: 'single-action-1',
+ text: 'Single Action',
+ icon: MynahIcons.PENCIL,
+ },
+ ],
+ };
+
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithSingleAction,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ // Should render as individual button, not menu
+ const actionButton = document.body.querySelector('.mynah-detailed-list-item-actions button') as HTMLElement;
+ expect(actionButton).toBeDefined();
+
+ const menuButton = document.body.querySelector('[data-testid*="action-menu"]');
+ expect(menuButton).toBeNull();
+ });
+
+ it('should handle action menu overlay close', () => {
+ detailedListItem = new DetailedListItemWrapper({
+ listItem: itemWithActions,
+ onActionClick: mockOnActionClick,
+ });
+ document.body.appendChild(detailedListItem.render);
+
+ // Show the menu first
+ const menuButton = document.body.querySelector('[data-testid*="action-menu"]') as HTMLElement;
+ if (menuButton != null) {
+ menuButton.click();
+
+ // Now simulate clicking an action in the overlay which should close it
+ // This tests the hideActionMenuOverlay method
+ expect(detailedListItem.render).toBeDefined();
+ }
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/detailed-list/detailed-list-sheet.spec.ts b/mynah-ui/src/__test__/components/detailed-list/detailed-list-sheet.spec.ts
new file mode 100644
index 0000000000..fb071ac126
--- /dev/null
+++ b/mynah-ui/src/__test__/components/detailed-list/detailed-list-sheet.spec.ts
@@ -0,0 +1,653 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DetailedListSheet, DetailedListSheetProps } from '../../../components/detailed-list/detailed-list-sheet';
+import { DetailedList, ChatItemButton, MynahEventNames } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { MynahIcons } from '../../../components/icon';
+
+// Mock the global events
+jest.mock('../../../helper/events', () => ({
+ MynahUIGlobalEvents: {
+ getInstance: jest.fn(() => ({
+ dispatch: jest.fn(),
+ })),
+ },
+}));
+
+// Mock the detailed list wrapper
+jest.mock('../../../components/detailed-list/detailed-list', () => ({
+ DetailedListWrapper: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ update: jest.fn(),
+ })),
+}));
+
+describe('DetailedListSheet Component', () => {
+ let detailedListSheet: DetailedListSheet;
+ let mockDispatch: jest.Mock;
+ let mockOnFilterValueChange: jest.Mock;
+ let mockOnKeyPress: jest.Mock;
+ let mockOnItemSelect: jest.Mock;
+ let mockOnItemClick: jest.Mock;
+ let mockOnBackClick: jest.Mock;
+ let mockOnTitleActionClick: jest.Mock;
+ let mockOnActionClick: jest.Mock;
+ let mockOnFilterActionClick: jest.Mock;
+ let mockOnClose: jest.Mock;
+
+ const basicDetailedList: DetailedList = {
+ header: {
+ title: 'Test Sheet',
+ description: 'Test sheet description',
+ icon: MynahIcons.INFO,
+ },
+ list: [
+ {
+ groupName: 'Test Group',
+ children: [
+ {
+ id: 'item-1',
+ title: 'Test Item 1',
+ description: 'Description 1',
+ },
+ ],
+ },
+ ],
+ };
+
+ const detailedListWithActions: DetailedList = {
+ header: {
+ title: 'Sheet with Actions',
+ description: 'Sheet with header actions',
+ actions: [
+ {
+ id: 'header-action-1',
+ text: 'Header Action',
+ icon: MynahIcons.PENCIL,
+ },
+ ],
+ },
+ list: basicDetailedList.list,
+ };
+
+ const detailedListWithStatus: DetailedList = {
+ header: {
+ title: 'Sheet with Status',
+ description: 'Sheet with status',
+ status: {
+ status: 'warning',
+ title: 'Warning Status',
+ description: 'This is a warning',
+ icon: MynahIcons.WARNING,
+ },
+ },
+ list: basicDetailedList.list,
+ };
+
+ beforeEach(() => {
+ mockDispatch = jest.fn();
+ mockOnFilterValueChange = jest.fn();
+ mockOnKeyPress = jest.fn();
+ mockOnItemSelect = jest.fn();
+ mockOnItemClick = jest.fn();
+ mockOnBackClick = jest.fn();
+ mockOnTitleActionClick = jest.fn();
+ mockOnActionClick = jest.fn();
+ mockOnFilterActionClick = jest.fn();
+ mockOnClose = jest.fn();
+
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue({
+ dispatch: mockDispatch,
+ });
+
+ jest.clearAllMocks();
+
+ // Mock window event listeners
+ global.addEventListener = jest.fn();
+ global.removeEventListener = jest.fn();
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create detailed list sheet with basic props', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ expect(detailedListSheet).toBeDefined();
+ expect(detailedListSheet.props).toBeDefined();
+ expect(detailedListSheet.detailedListWrapper).toBeDefined();
+ });
+
+ it('should create detailed list wrapper without header', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const { DetailedListWrapper } = jest.requireMock('../../../components/detailed-list/detailed-list');
+ expect(DetailedListWrapper).toHaveBeenCalledWith(
+ expect.objectContaining({
+ detailedList: expect.objectContaining({
+ header: undefined,
+ }),
+ }),
+ );
+ });
+
+ it('should pass event handlers to detailed list wrapper', () => {
+ const props: DetailedListSheetProps = {
+ detailedList: basicDetailedList,
+ events: {
+ onFilterValueChange: mockOnFilterValueChange,
+ onItemSelect: mockOnItemSelect,
+ onItemClick: mockOnItemClick,
+ onActionClick: mockOnActionClick,
+ onFilterActionClick: mockOnFilterActionClick,
+ },
+ };
+
+ detailedListSheet = new DetailedListSheet(props);
+
+ const { DetailedListWrapper } = jest.requireMock('../../../components/detailed-list/detailed-list');
+ expect(DetailedListWrapper).toHaveBeenCalledWith(
+ expect.objectContaining({
+ onFilterValueChange: mockOnFilterValueChange,
+ onItemSelect: mockOnItemSelect,
+ onItemClick: mockOnItemClick,
+ onItemActionClick: mockOnActionClick,
+ onFilterActionClick: mockOnFilterActionClick,
+ }),
+ );
+ });
+
+ it('should store props reference', () => {
+ const props: DetailedListSheetProps = {
+ detailedList: basicDetailedList,
+ events: {
+ onKeyPress: mockOnKeyPress,
+ },
+ };
+
+ detailedListSheet = new DetailedListSheet(props);
+
+ expect(detailedListSheet.props).toBe(props);
+ });
+ });
+
+ describe('Sheet Opening', () => {
+ it('should dispatch open sheet event', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ detailedListSheet.open();
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ fullScreen: true,
+ title: basicDetailedList.header?.title,
+ description: basicDetailedList.header?.description,
+ children: expect.any(Array),
+ }),
+ );
+ });
+
+ it('should dispatch open sheet with back button when requested', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ detailedListSheet.open(true);
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ showBackButton: true,
+ }),
+ );
+ });
+
+ it('should dispatch open sheet with header actions', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: detailedListWithActions });
+
+ detailedListSheet.open();
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ actions: detailedListWithActions.header?.actions,
+ }),
+ );
+ });
+
+ it('should dispatch open sheet with status', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: detailedListWithStatus });
+
+ detailedListSheet.open();
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ status: detailedListWithStatus.header?.status,
+ }),
+ );
+ });
+
+ it('should add keydown event listener', () => {
+ detailedListSheet = new DetailedListSheet({
+ detailedList: basicDetailedList,
+ events: { onKeyPress: mockOnKeyPress },
+ });
+
+ detailedListSheet.open();
+
+ expect(global.addEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
+ });
+
+ it('should handle sheet close callback', () => {
+ detailedListSheet = new DetailedListSheet({
+ detailedList: basicDetailedList,
+ events: { onClose: mockOnClose },
+ });
+
+ detailedListSheet.open();
+
+ // Get the onClose callback from the dispatch call
+ const dispatchCall = mockDispatch.mock.calls[0];
+ const sheetProps = dispatchCall[1];
+
+ // Simulate sheet close
+ sheetProps.onClose();
+
+ expect(mockOnClose).toHaveBeenCalled();
+ expect(global.removeEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
+ });
+
+ it('should handle title action click', () => {
+ detailedListSheet = new DetailedListSheet({
+ detailedList: detailedListWithActions,
+ events: { onTitleActionClick: mockOnTitleActionClick },
+ });
+
+ detailedListSheet.open();
+
+ // Get the onActionClick callback from the dispatch call
+ const dispatchCall = mockDispatch.mock.calls[0];
+ const sheetProps = dispatchCall[1];
+
+ const testAction: ChatItemButton = { id: 'test-action', text: 'Test' };
+ sheetProps.onActionClick(testAction);
+
+ expect(mockOnTitleActionClick).toHaveBeenCalledWith(testAction);
+ });
+
+ it('should handle back button click', () => {
+ detailedListSheet = new DetailedListSheet({
+ detailedList: basicDetailedList,
+ events: { onBackClick: mockOnBackClick },
+ });
+
+ detailedListSheet.open();
+
+ // Get the onBack callback from the dispatch call
+ const dispatchCall = mockDispatch.mock.calls[0];
+ const sheetProps = dispatchCall[1];
+
+ sheetProps.onBack();
+
+ expect(mockOnBackClick).toHaveBeenCalled();
+ });
+ });
+
+ describe('Keyboard Event Handling', () => {
+ it('should handle keydown events', () => {
+ detailedListSheet = new DetailedListSheet({
+ detailedList: basicDetailedList,
+ events: { onKeyPress: mockOnKeyPress },
+ });
+
+ detailedListSheet.open();
+
+ // Get the keydown handler from addEventListener call
+ const addEventListenerCall = (global.addEventListener as jest.Mock).mock.calls.find(
+ (call) => call[0] === 'keydown',
+ );
+ const keydownHandler = addEventListenerCall[1];
+
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+ keydownHandler(keyEvent);
+
+ expect(mockOnKeyPress).toHaveBeenCalledWith(keyEvent);
+ });
+
+ it('should not throw error when onKeyPress is not provided', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ detailedListSheet.open();
+
+ // Get the keydown handler
+ const addEventListenerCall = (global.addEventListener as jest.Mock).mock.calls.find(
+ (call) => call[0] === 'keydown',
+ );
+ const keydownHandler = addEventListenerCall[1];
+
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+
+ // Should not throw error
+ expect(() => keydownHandler(keyEvent)).not.toThrow();
+ });
+ });
+
+ describe('Sheet Updates', () => {
+ it('should update sheet header', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ header: {
+ title: 'Updated Title',
+ description: 'Updated description',
+ },
+ };
+
+ detailedListSheet.update(updatedList);
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.UPDATE_SHEET,
+ expect.objectContaining({
+ title: 'Updated Title',
+ description: 'Updated description',
+ }),
+ );
+ });
+
+ it('should update sheet with back button', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ header: {
+ title: 'Updated Title',
+ },
+ };
+
+ detailedListSheet.update(updatedList, true);
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.UPDATE_SHEET,
+ expect.objectContaining({
+ showBackButton: true,
+ }),
+ );
+ });
+
+ it('should update sheet with status', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ header: {
+ title: 'Updated Title',
+ status: {
+ status: 'error',
+ title: 'Error Status',
+ description: 'Something went wrong',
+ },
+ },
+ };
+
+ detailedListSheet.update(updatedList);
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.UPDATE_SHEET,
+ expect.objectContaining({
+ status: updatedList.header?.status,
+ }),
+ );
+ });
+
+ it('should update sheet with actions', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ header: {
+ title: 'Updated Title',
+ actions: [{ id: 'new-action', text: 'New Action', icon: MynahIcons.REFRESH }],
+ },
+ };
+
+ detailedListSheet.update(updatedList);
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.UPDATE_SHEET,
+ expect.objectContaining({
+ actions: updatedList.header?.actions,
+ }),
+ );
+ });
+
+ it('should update detailed list wrapper', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ header: {
+ title: 'Updated Title',
+ },
+ list: [
+ {
+ groupName: 'Updated Group',
+ children: [{ id: 'new-item', title: 'New Item' }],
+ },
+ ],
+ };
+
+ detailedListSheet.update(updatedList);
+
+ expect(detailedListSheet.detailedListWrapper.update).toHaveBeenCalledWith(
+ expect.objectContaining({
+ header: undefined, // Header should be removed for wrapper
+ list: updatedList.list,
+ }),
+ );
+ });
+
+ it('should merge props when updating', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const partialUpdate: DetailedList = {
+ list: [
+ {
+ groupName: 'New Group',
+ children: [{ id: 'new-item', title: 'New Item' }],
+ },
+ ],
+ };
+
+ detailedListSheet.update(partialUpdate);
+
+ // Should merge with existing props
+ expect(detailedListSheet.props.detailedList.header?.title).toBe(basicDetailedList.header?.title);
+ expect(detailedListSheet.props.detailedList.list).toBe(partialUpdate.list);
+ });
+
+ it('should not dispatch update sheet when header is not provided', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ list: [
+ {
+ groupName: 'Updated Group',
+ children: [{ id: 'item', title: 'Item' }],
+ },
+ ],
+ };
+
+ detailedListSheet.update(updatedList);
+
+ // Should only call wrapper update, not sheet update
+ expect(mockDispatch).not.toHaveBeenCalledWith(MynahEventNames.UPDATE_SHEET, expect.anything());
+ });
+
+ it('should handle update with null header', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ header: null as any,
+ list: [
+ {
+ groupName: 'Updated Group',
+ children: [{ id: 'item', title: 'Item' }],
+ },
+ ],
+ };
+
+ detailedListSheet.update(updatedList);
+
+ // Should not dispatch sheet update for null header
+ expect(mockDispatch).not.toHaveBeenCalledWith(MynahEventNames.UPDATE_SHEET, expect.anything());
+ });
+
+ it('should handle update with undefined showBackButton', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ header: {
+ title: 'Updated Title',
+ },
+ };
+
+ detailedListSheet.update(updatedList, undefined);
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.UPDATE_SHEET,
+ expect.objectContaining({
+ showBackButton: undefined,
+ }),
+ );
+ });
+ });
+
+ describe('Sheet Closing', () => {
+ it('should dispatch close sheet event', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ detailedListSheet.close();
+
+ expect(mockDispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET);
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle detailed list without header', () => {
+ const listWithoutHeader: DetailedList = {
+ list: [
+ {
+ groupName: 'Group',
+ children: [{ id: 'item', title: 'Item' }],
+ },
+ ],
+ };
+
+ detailedListSheet = new DetailedListSheet({ detailedList: listWithoutHeader });
+
+ detailedListSheet.open();
+
+ expect(mockDispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ title: undefined,
+ description: undefined,
+ }),
+ );
+ });
+
+ it('should handle empty events object', () => {
+ detailedListSheet = new DetailedListSheet({
+ detailedList: basicDetailedList,
+ events: {},
+ });
+
+ detailedListSheet.open();
+
+ // Should not throw error
+ expect(detailedListSheet).toBeDefined();
+ });
+
+ it('should handle undefined events', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ detailedListSheet.open();
+
+ // Should not throw error
+ expect(detailedListSheet).toBeDefined();
+ });
+
+ it('should handle update without header', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ const updatedList: DetailedList = {
+ list: [{ groupName: 'Group', children: [] }],
+ };
+
+ detailedListSheet.update(updatedList);
+
+ // Should only update wrapper
+ expect(detailedListSheet.detailedListWrapper.update).toHaveBeenCalled();
+ });
+
+ it('should handle empty update', () => {
+ detailedListSheet = new DetailedListSheet({ detailedList: basicDetailedList });
+
+ detailedListSheet.update({});
+
+ // Should not throw error
+ expect(detailedListSheet).toBeDefined();
+ });
+ });
+
+ describe('Legacy Support', () => {
+ it('should handle tabId prop for backwards compatibility', () => {
+ const propsWithTabId: DetailedListSheetProps = {
+ tabId: 'legacy-tab-id',
+ detailedList: basicDetailedList,
+ };
+
+ detailedListSheet = new DetailedListSheet(propsWithTabId);
+
+ expect(detailedListSheet.props.tabId).toBe('legacy-tab-id');
+ });
+ });
+
+ describe('Event Handler Integration', () => {
+ it('should handle all event types', () => {
+ const allEvents: DetailedListSheetProps['events'] = {
+ onFilterValueChange: mockOnFilterValueChange,
+ onKeyPress: mockOnKeyPress,
+ onItemSelect: mockOnItemSelect,
+ onItemClick: mockOnItemClick,
+ onBackClick: mockOnBackClick,
+ onTitleActionClick: mockOnTitleActionClick,
+ onActionClick: mockOnActionClick,
+ onFilterActionClick: mockOnFilterActionClick,
+ onClose: mockOnClose,
+ };
+
+ detailedListSheet = new DetailedListSheet({
+ detailedList: detailedListWithActions,
+ events: allEvents,
+ });
+
+ detailedListSheet.open();
+
+ // Verify all handlers are properly set up
+ const { DetailedListWrapper } = jest.requireMock('../../../components/detailed-list/detailed-list');
+ expect(DetailedListWrapper).toHaveBeenCalledWith(
+ expect.objectContaining({
+ onFilterValueChange: mockOnFilterValueChange,
+ onItemSelect: mockOnItemSelect,
+ onItemClick: mockOnItemClick,
+ onItemActionClick: mockOnActionClick,
+ onFilterActionClick: mockOnFilterActionClick,
+ }),
+ );
+
+ expect(global.addEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/detailed-list/detailed-list.spec.ts b/mynah-ui/src/__test__/components/detailed-list/detailed-list.spec.ts
new file mode 100644
index 0000000000..09b767c7c1
--- /dev/null
+++ b/mynah-ui/src/__test__/components/detailed-list/detailed-list.spec.ts
@@ -0,0 +1,926 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DetailedListWrapper } from '../../../components/detailed-list/detailed-list';
+import { DetailedList } from '../../../static';
+import { MynahIcons } from '../../../components/icon';
+
+// Mock the form items wrapper
+jest.mock('../../../components/chat-item/chat-item-form-items', () => ({
+ ChatItemFormItemsWrapper: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ getAllValues: jest.fn(() => ({ filter1: 'value1' })),
+ isFormValid: jest.fn(() => true),
+ })),
+}));
+
+describe('DetailedListWrapper Component', () => {
+ let detailedListWrapper: DetailedListWrapper;
+ let mockOnFilterValueChange: jest.Mock;
+ let mockOnGroupActionClick: jest.Mock;
+ let mockOnGroupClick: jest.Mock;
+ let mockOnItemSelect: jest.Mock;
+ let mockOnItemClick: jest.Mock;
+ let mockOnFilterActionClick: jest.Mock;
+
+ const basicDetailedList: DetailedList = {
+ list: [
+ {
+ groupName: 'Test Group',
+ children: [
+ {
+ id: 'item-1',
+ title: 'Test Item 1',
+ description: 'Description 1',
+ },
+ {
+ id: 'item-2',
+ title: 'Test Item 2',
+ description: 'Description 2',
+ },
+ ],
+ },
+ ],
+ };
+
+ const detailedListWithHeader: DetailedList = {
+ header: {
+ title: 'Test Header',
+ description: 'Test header description',
+ icon: MynahIcons.INFO,
+ status: {
+ status: 'success',
+ title: 'Success Status',
+ description: 'Everything is working',
+ icon: MynahIcons.OK,
+ },
+ },
+ list: basicDetailedList.list,
+ };
+
+ const detailedListWithFilters: DetailedList = {
+ filterOptions: [
+ {
+ id: 'filter1',
+ type: 'select',
+ title: 'Filter 1',
+ options: [
+ { value: 'option1', label: 'Option 1' },
+ { value: 'option2', label: 'Option 2' },
+ ],
+ },
+ ],
+ filterActions: [
+ {
+ id: 'apply-filter',
+ text: 'Apply',
+ icon: MynahIcons.OK,
+ },
+ ],
+ list: basicDetailedList.list,
+ };
+
+ const detailedListWithGroupActions: DetailedList = {
+ list: [
+ {
+ groupName: 'Group with Actions',
+ icon: MynahIcons.FOLDER,
+ actions: [
+ {
+ id: 'group-action-1',
+ text: 'Group Action',
+ icon: MynahIcons.PENCIL,
+ },
+ ],
+ children: [
+ {
+ id: 'item-1',
+ title: 'Item 1',
+ description: 'Description 1',
+ },
+ ],
+ },
+ ],
+ };
+
+ const largeDetailedList: DetailedList = {
+ list: [
+ {
+ groupName: 'Large Group',
+ children: Array.from({ length: 250 }, (_, i) => ({
+ id: `item-${i}`,
+ title: `Item ${i}`,
+ description: `Description ${i}`,
+ })),
+ },
+ ],
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnFilterValueChange = jest.fn();
+ mockOnGroupActionClick = jest.fn();
+ mockOnGroupClick = jest.fn();
+ mockOnItemSelect = jest.fn();
+ mockOnItemClick = jest.fn();
+ mockOnFilterActionClick = jest.fn();
+ jest.clearAllMocks();
+
+ // Mock scrollIntoView
+ Element.prototype.scrollIntoView = jest.fn();
+
+ // Mock requestAnimationFrame
+ global.requestAnimationFrame = jest.fn((cb) => {
+ const timestamp = 0;
+ cb(timestamp);
+ return 0;
+ });
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create detailed list wrapper with basic props', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+
+ expect(detailedListWrapper.render).toBeDefined();
+ expect(detailedListWrapper.render.classList.contains('mynah-detailed-list')).toBe(true);
+ });
+
+ it('should have correct test ID', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const wrapper = document.body.querySelector('[data-testid*="quick-picks-wrapper"]');
+ expect(wrapper).toBeDefined();
+ });
+
+ it('should render list items', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const items = document.body.querySelectorAll('.mynah-detailed-list-item');
+ expect(items.length).toBe(2);
+ });
+
+ it('should render group names', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupTitle = document.body.querySelector('.mynah-detailed-list-group-title');
+ expect(groupTitle?.textContent).toContain('Test Group');
+ });
+
+ it('should have proper component structure', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const header = document.body.querySelector('.mynah-detailed-list-header-wrapper');
+ const filters = document.body.querySelector('.mynah-detailed-list-filters-wrapper');
+ const groups = document.body.querySelector('.mynah-detailed-list-item-groups-wrapper');
+ const filterActions = document.body.querySelector('.mynah-detailed-list-filter-actions-wrapper');
+
+ expect(header).toBeDefined();
+ expect(filters).toBeDefined();
+ expect(groups).toBeDefined();
+ expect(filterActions).toBeDefined();
+ });
+ });
+
+ describe('Header Rendering', () => {
+ it('should render header when provided', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: detailedListWithHeader });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const headerWrapper = document.body.querySelector('.mynah-detailed-list-header-wrapper');
+ expect(headerWrapper).toBeDefined();
+ expect(headerWrapper?.textContent).toContain('Test Header');
+ });
+
+ it('should render header description', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: detailedListWithHeader });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const headerWrapper = document.body.querySelector('.mynah-detailed-list-header-wrapper');
+ expect(headerWrapper?.textContent).toContain('Test header description');
+ });
+
+ it('should render header status when provided', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: detailedListWithHeader });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const statusCard = document.body.querySelector('[data-testid*="sheet-description"]');
+ expect(statusCard).toBeDefined();
+ });
+
+ it('should not render header when not provided', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const headerWrapper = document.body.querySelector('.mynah-detailed-list-header-wrapper');
+ expect(headerWrapper?.textContent?.trim()).toBe('');
+ });
+
+ it('should handle header without status', () => {
+ const headerWithoutStatus: DetailedList = {
+ header: {
+ title: 'Header Without Status',
+ description: 'Just description',
+ icon: MynahIcons.INFO,
+ },
+ list: basicDetailedList.list,
+ };
+
+ detailedListWrapper = new DetailedListWrapper({ detailedList: headerWithoutStatus });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const headerWrapper = document.body.querySelector('.mynah-detailed-list-header-wrapper');
+ expect(headerWrapper?.textContent).toContain('Header Without Status');
+
+ // Should not have status card
+ const statusCard = document.body.querySelector('[data-testid*="sheet-description"]');
+ expect(statusCard).toBeNull();
+ });
+
+ it('should handle header with null status', () => {
+ const headerWithNullStatus: DetailedList = {
+ header: {
+ title: 'Header With Null Status',
+ description: 'Description',
+ status: null as any,
+ },
+ list: basicDetailedList.list,
+ };
+
+ detailedListWrapper = new DetailedListWrapper({ detailedList: headerWithNullStatus });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const headerWrapper = document.body.querySelector('.mynah-detailed-list-header-wrapper');
+ expect(headerWrapper?.textContent).toContain('Header With Null Status');
+ });
+ });
+
+ describe('Filter Rendering', () => {
+ it('should render filters when provided', () => {
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: detailedListWithFilters,
+ onFilterValueChange: mockOnFilterValueChange,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const filtersWrapper = document.body.querySelector('.mynah-detailed-list-filters-wrapper');
+ expect(filtersWrapper).toBeDefined();
+ expect(filtersWrapper?.children.length).toBeGreaterThan(0);
+ });
+
+ it('should render filter actions when provided', () => {
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: detailedListWithFilters,
+ onFilterActionClick: mockOnFilterActionClick,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const filterActionsWrapper = document.body.querySelector('.mynah-detailed-list-filter-actions-wrapper');
+ expect(filterActionsWrapper).toBeDefined();
+ });
+
+ it('should not render filters when not provided', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const filtersWrapper = document.body.querySelector('.mynah-detailed-list-filters-wrapper');
+ expect(filtersWrapper?.textContent?.trim()).toBe('');
+ });
+
+ it('should handle filter action click', () => {
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: detailedListWithFilters,
+ onFilterActionClick: mockOnFilterActionClick,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // Simulate filter action click through the button wrapper
+ // This would normally be triggered by the ChatItemButtonsWrapper
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+ });
+
+ describe('Group Functionality', () => {
+ it('should render group with icon', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: detailedListWithGroupActions });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupTitle = document.body.querySelector('.mynah-detailed-list-group-title');
+ const icon = groupTitle?.querySelector('.mynah-icon');
+ expect(icon).toBeDefined();
+ });
+
+ it('should render group actions', () => {
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: detailedListWithGroupActions,
+ onGroupActionClick: mockOnGroupActionClick,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupTitle = document.body.querySelector('.mynah-detailed-list-group-title');
+ expect(groupTitle).toBeDefined();
+ });
+
+ it('should handle group click when clickable', () => {
+ const clickableList: DetailedList = {
+ ...detailedListWithGroupActions,
+ selectable: 'clickable',
+ };
+
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: clickableList,
+ onGroupClick: mockOnGroupClick,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupTitle = document.body.querySelector('.mynah-detailed-list-group-title') as HTMLElement;
+ expect(groupTitle?.classList.contains('mynah-group-title-clickable')).toBe(true);
+
+ groupTitle.click();
+ expect(mockOnGroupClick).toHaveBeenCalledWith('Group with Actions');
+ });
+
+ it('should not make group clickable when selectable is not clickable', () => {
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: detailedListWithGroupActions,
+ onGroupClick: mockOnGroupClick,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupTitle = document.body.querySelector('.mynah-detailed-list-group-title');
+ expect(groupTitle?.classList.contains('mynah-group-title-clickable')).toBe(false);
+ });
+
+ it('should render groups without names', () => {
+ const listWithoutGroupName: DetailedList = {
+ list: [
+ {
+ children: [{ id: 'item-1', title: 'Item 1' }],
+ },
+ ],
+ };
+
+ detailedListWrapper = new DetailedListWrapper({ detailedList: listWithoutGroupName });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupTitle = document.body.querySelector('.mynah-detailed-list-group-title');
+ expect(groupTitle).toBeNull();
+
+ const items = document.body.querySelectorAll('.mynah-detailed-list-item');
+ expect(items.length).toBe(1);
+ });
+
+ it('should handle indented children', () => {
+ const listWithIndentedChildren: DetailedList = {
+ list: [
+ {
+ groupName: 'Parent Group',
+ childrenIndented: true,
+ children: [{ id: 'item-1', title: 'Indented Item' }],
+ },
+ ],
+ };
+
+ detailedListWrapper = new DetailedListWrapper({ detailedList: listWithIndentedChildren });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const itemsBlock = document.body.querySelector('.mynah-detailed-list-items-block');
+ expect(itemsBlock?.classList.contains('indented')).toBe(true);
+ });
+ });
+
+ describe('Virtualization', () => {
+ it('should create blocks for large lists', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const itemsBlocks = document.body.querySelectorAll('.mynah-detailed-list-items-block');
+ expect(itemsBlocks.length).toBeGreaterThan(1); // Should be chunked into multiple blocks
+ });
+
+ it('should set minimum height for virtualized blocks', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const itemsBlocks = document.body.querySelectorAll('.mynah-detailed-list-items-block');
+ const firstBlock = itemsBlocks[0] as HTMLElement;
+ expect(firstBlock.style.minHeight).toBeTruthy();
+ });
+
+ it('should handle scroll events for virtualization', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupsContainer = document.body.querySelector(
+ '.mynah-detailed-list-item-groups-wrapper',
+ ) as HTMLElement;
+
+ // Mock scroll properties
+ Object.defineProperty(groupsContainer, 'offsetHeight', { value: 400 });
+ Object.defineProperty(groupsContainer, 'scrollTop', { value: 200 });
+
+ // Trigger scroll event
+ groupsContainer.dispatchEvent(new Event('scroll'));
+
+ // Should not throw error
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+
+ it('should render first 5 blocks immediately', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const itemsBlocks = document.body.querySelectorAll('.mynah-detailed-list-items-block');
+ let renderedBlocks = 0;
+
+ itemsBlocks.forEach((block, index) => {
+ if (block.children.length > 0) {
+ renderedBlocks++;
+ }
+ });
+
+ expect(renderedBlocks).toBeGreaterThan(0);
+ });
+
+ it('should handle virtualization with blocks entering viewport', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupsContainer = document.body.querySelector(
+ '.mynah-detailed-list-item-groups-wrapper',
+ ) as HTMLElement;
+ const itemsBlocks = document.body.querySelectorAll('.mynah-detailed-list-items-block');
+
+ // Mock properties for a block that should be rendered
+ Object.defineProperty(groupsContainer, 'offsetHeight', { value: 400 });
+ Object.defineProperty(groupsContainer, 'scrollTop', { value: 0 });
+
+ // Mock a block that's in viewport but not rendered
+ const testBlock = itemsBlocks[6] as HTMLElement; // Beyond first 5
+ if (testBlock != null) {
+ Object.defineProperty(testBlock, 'offsetTop', { value: 100 });
+ Object.defineProperty(testBlock, 'offsetHeight', { value: 200 });
+
+ // Clear the block first
+ testBlock.innerHTML = '';
+
+ // Trigger scroll to render it
+ groupsContainer.dispatchEvent(new Event('scroll'));
+
+ expect(detailedListWrapper.render).toBeDefined();
+ }
+ });
+
+ it('should handle virtualization with blocks leaving viewport', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupsContainer = document.body.querySelector(
+ '.mynah-detailed-list-item-groups-wrapper',
+ ) as HTMLElement;
+ const itemsBlocks = document.body.querySelectorAll('.mynah-detailed-list-items-block');
+
+ // Mock properties for a block that should be cleared
+ Object.defineProperty(groupsContainer, 'offsetHeight', { value: 400 });
+ Object.defineProperty(groupsContainer, 'scrollTop', { value: 2000 }); // Scrolled far down
+
+ // Mock a block that's out of viewport
+ const testBlock = itemsBlocks[0] as HTMLElement;
+ if (testBlock != null) {
+ Object.defineProperty(testBlock, 'offsetTop', { value: 0 });
+ Object.defineProperty(testBlock, 'offsetHeight', { value: 200 });
+
+ // Trigger scroll to clear it
+ groupsContainer.dispatchEvent(new Event('scroll'));
+
+ expect(detailedListWrapper.render).toBeDefined();
+ }
+ });
+ });
+
+ describe('Item Selection and Navigation', () => {
+ it('should handle item selection', () => {
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: basicDetailedList,
+ onItemSelect: mockOnItemSelect,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const firstItem = document.body.querySelector('.mynah-detailed-list-item') as HTMLElement;
+ firstItem.click();
+
+ expect(mockOnItemSelect).toHaveBeenCalled();
+ });
+
+ it('should handle item click', () => {
+ const clickableList: DetailedList = {
+ ...basicDetailedList,
+ selectable: 'clickable',
+ };
+
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: clickableList,
+ onItemClick: mockOnItemClick,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const firstItem = document.body.querySelector('.mynah-detailed-list-item') as HTMLElement;
+ firstItem.click();
+
+ expect(mockOnItemClick).toHaveBeenCalled();
+ });
+
+ it('should change target up', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // Should not throw error
+ detailedListWrapper.changeTarget('up');
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+
+ it('should change target down', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ detailedListWrapper.changeTarget('down');
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+
+ it('should change target with snap on last and first', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ detailedListWrapper.changeTarget('up', true);
+ detailedListWrapper.changeTarget('down', true);
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+
+ it('should change target with scroll into view', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ detailedListWrapper.changeTarget('down', false, true);
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+
+ it('should get target element', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+ detailedListWrapper.changeTarget('down', false, true);
+
+ const targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement).toBeDefined();
+ expect(targetElement?.id).toBe('item-1');
+ });
+
+ it('should return null when no selectable elements', () => {
+ const emptyList: DetailedList = { list: [] };
+ detailedListWrapper = new DetailedListWrapper({ detailedList: emptyList });
+
+ const targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement).toBeNull();
+ });
+
+ it('should handle navigation with disabled items', () => {
+ const listWithDisabledItems: DetailedList = {
+ list: [
+ {
+ groupName: 'Mixed Group',
+ children: [
+ { id: 'item-1', title: 'Enabled Item' },
+ { id: 'item-2', title: 'Disabled Item', disabled: true },
+ { id: 'item-3', title: 'Another Enabled Item' },
+ ],
+ },
+ ],
+ };
+
+ detailedListWrapper = new DetailedListWrapper({ detailedList: listWithDisabledItems });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // Should only include enabled items in navigation
+ detailedListWrapper.changeTarget('down');
+ const targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement?.disabled).not.toBe(true);
+ });
+
+ it('should handle navigation wrapping from first to last', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // First select the first item
+ detailedListWrapper.changeTarget('down');
+
+ // Go up from first item (should wrap to last)
+ detailedListWrapper.changeTarget('up', false);
+ const targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement?.id).toBe('item-2'); // Should wrap to last item
+ });
+
+ it('should handle navigation wrapping from last to first', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // First select an item
+ detailedListWrapper.changeTarget('down');
+ // Move to last item
+ detailedListWrapper.changeTarget('down');
+ // Then go down (should wrap to first)
+ detailedListWrapper.changeTarget('down', false);
+ const targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement?.id).toBe('item-1'); // Should wrap to first item
+ });
+
+ it('should handle navigation with snap at boundaries', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // First select the first item
+ detailedListWrapper.changeTarget('down');
+
+ // Go up with snap (should stay at first)
+ detailedListWrapper.changeTarget('up', true);
+ let targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement?.id).toBe('item-1');
+
+ // Move to last item
+ detailedListWrapper.changeTarget('down');
+ // Go down with snap (should stay at last)
+ detailedListWrapper.changeTarget('down', true);
+ targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement?.id).toBe('item-2');
+ });
+ });
+
+ describe('Update Functionality', () => {
+ it('should update header', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const updatedList: DetailedList = {
+ header: {
+ title: 'Updated Header',
+ description: 'Updated description',
+ },
+ };
+
+ detailedListWrapper.update(updatedList);
+
+ const headerWrapper = document.body.querySelector('.mynah-detailed-list-header-wrapper');
+ expect(headerWrapper?.textContent).toContain('Updated Header');
+ });
+
+ it('should update filters', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const updatedList: DetailedList = {
+ filterOptions: [
+ {
+ id: 'new-filter',
+ type: 'textinput',
+ title: 'New Filter',
+ },
+ ],
+ };
+
+ detailedListWrapper.update(updatedList);
+
+ const filtersWrapper = document.body.querySelector('.mynah-detailed-list-filters-wrapper');
+ expect(filtersWrapper).toBeDefined();
+ });
+
+ it('should update filter actions', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const updatedList: DetailedList = {
+ filterActions: [
+ {
+ id: 'new-action',
+ text: 'New Action',
+ icon: MynahIcons.REFRESH,
+ },
+ ],
+ };
+
+ detailedListWrapper.update(updatedList);
+
+ const filterActionsWrapper = document.body.querySelector('.mynah-detailed-list-filter-actions-wrapper');
+ expect(filterActionsWrapper).toBeDefined();
+ });
+
+ it('should update list items', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const updatedList: DetailedList = {
+ list: [
+ {
+ groupName: 'Updated Group',
+ children: [{ id: 'new-item', title: 'New Item', description: 'New description' }],
+ },
+ ],
+ };
+
+ detailedListWrapper.update(updatedList);
+
+ const groupTitle = document.body.querySelector('.mynah-detailed-list-group-title');
+ expect(groupTitle?.textContent).toContain('Updated Group');
+
+ const items = document.body.querySelectorAll('.mynah-detailed-list-item');
+ expect(items.length).toBe(1);
+ });
+
+ it('should preserve scroll position when requested', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupsContainer = document.body.querySelector(
+ '.mynah-detailed-list-item-groups-wrapper',
+ ) as HTMLElement;
+ Object.defineProperty(groupsContainer, 'scrollTop', { value: 100, writable: true });
+
+ const updatedList: DetailedList = {
+ list: [
+ {
+ groupName: 'Updated Large Group',
+ children: Array.from({ length: 50 }, (_, i) => ({
+ id: `updated-item-${i}`,
+ title: `Updated Item ${i}`,
+ })),
+ },
+ ],
+ };
+
+ detailedListWrapper.update(updatedList, true);
+
+ expect(requestAnimationFrame).toHaveBeenCalled();
+ });
+
+ it('should reset scroll position when not preserving', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: largeDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const updatedList: DetailedList = {
+ list: [
+ {
+ groupName: 'New Group',
+ children: [{ id: 'new-item', title: 'New Item' }],
+ },
+ ],
+ };
+
+ detailedListWrapper.update(updatedList, false);
+
+ const groupsContainer = document.body.querySelector(
+ '.mynah-detailed-list-item-groups-wrapper',
+ ) as HTMLElement;
+ expect(groupsContainer).toBeDefined();
+ });
+
+ it('should update selectable property', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const updatedList: DetailedList = {
+ selectable: 'clickable',
+ list: basicDetailedList.list,
+ };
+
+ detailedListWrapper.update(updatedList);
+
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty list', () => {
+ const emptyList: DetailedList = { list: [] };
+ detailedListWrapper = new DetailedListWrapper({ detailedList: emptyList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const items = document.body.querySelectorAll('.mynah-detailed-list-item');
+ expect(items.length).toBe(0);
+ });
+
+ it('should handle list with empty groups', () => {
+ const listWithEmptyGroups: DetailedList = {
+ list: [
+ { groupName: 'Empty Group', children: [] },
+ { groupName: 'Another Empty Group', children: undefined },
+ ],
+ };
+
+ detailedListWrapper = new DetailedListWrapper({ detailedList: listWithEmptyGroups });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groups = document.body.querySelectorAll('.mynah-detailed-list-group');
+ expect(groups.length).toBe(2);
+
+ const items = document.body.querySelectorAll('.mynah-detailed-list-item');
+ expect(items.length).toBe(0);
+ });
+
+ it('should handle null/undefined list', () => {
+ const nullList: DetailedList = { list: undefined };
+ detailedListWrapper = new DetailedListWrapper({ detailedList: nullList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const groupsWrapper = document.body.querySelector('.mynah-detailed-list-item-groups-wrapper');
+ expect(groupsWrapper?.textContent?.trim()).toBe('');
+ });
+
+ it('should handle update with partial data', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: detailedListWithHeader });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // Update with only some properties
+ detailedListWrapper.update({});
+
+ // Should not throw error
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+
+ it('should handle navigation with no selectable elements', () => {
+ const emptyList: DetailedList = { list: [] };
+ detailedListWrapper = new DetailedListWrapper({ detailedList: emptyList });
+
+ // Should not throw error
+ detailedListWrapper.changeTarget('up');
+ detailedListWrapper.changeTarget('down');
+ expect(detailedListWrapper.render).toBeDefined();
+ });
+
+ it('should handle getTargetElement with negative index', () => {
+ detailedListWrapper = new DetailedListWrapper({ detailedList: basicDetailedList });
+ document.body.appendChild(detailedListWrapper.render);
+
+ // Manually set a negative index to test Math.max
+ (detailedListWrapper as any).activeTargetElementIndex = -1;
+
+ const targetElement = detailedListWrapper.getTargetElement();
+ expect(targetElement).toBeDefined(); // Should use Math.max(index, 0)
+ });
+
+ it('should handle filter options with empty array', () => {
+ const listWithEmptyFilters: DetailedList = {
+ filterOptions: [],
+ list: basicDetailedList.list,
+ };
+
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: listWithEmptyFilters,
+ onFilterValueChange: mockOnFilterValueChange,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const filtersWrapper = document.body.querySelector('.mynah-detailed-list-filters-wrapper');
+ expect(filtersWrapper?.textContent?.trim()).toBe('');
+ });
+
+ it('should handle filter options with null', () => {
+ const listWithNullFilters: DetailedList = {
+ filterOptions: null,
+ list: basicDetailedList.list,
+ };
+
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: listWithNullFilters,
+ onFilterValueChange: mockOnFilterValueChange,
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const filtersWrapper = document.body.querySelector('.mynah-detailed-list-filters-wrapper');
+ expect(filtersWrapper?.textContent?.trim()).toBe('');
+ });
+ });
+
+ describe('Text Direction', () => {
+ it('should pass text direction to items', () => {
+ const listWithTextDirection: DetailedList = {
+ ...basicDetailedList,
+ textDirection: 'column',
+ };
+
+ detailedListWrapper = new DetailedListWrapper({
+ detailedList: listWithTextDirection,
+ descriptionTextDirection: 'rtl',
+ });
+ document.body.appendChild(detailedListWrapper.render);
+
+ const textContainer = document.body.querySelector('.mynah-detailed-list-item-text');
+ expect(textContainer?.classList.contains('mynah-detailed-list-item-text-direction-column')).toBe(true);
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/feedback-form/feedback-form-comment.spec.ts b/mynah-ui/src/__test__/components/feedback-form/feedback-form-comment.spec.ts
new file mode 100644
index 0000000000..d51eeca6fb
--- /dev/null
+++ b/mynah-ui/src/__test__/components/feedback-form/feedback-form-comment.spec.ts
@@ -0,0 +1,216 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FeedbackFormComment } from '../../../components/feedback-form/feedback-form-comment';
+import { Config } from '../../../helper/config';
+import testIds from '../../../helper/test-ids';
+
+// Mock Config
+jest.mock('../../../helper/config');
+
+describe('FeedbackFormComment Component', () => {
+ let feedbackFormComment: FeedbackFormComment;
+ let mockOnChange: jest.Mock;
+ let mockConfig: jest.Mocked;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+
+ // Setup Config mock to enable test mode
+ mockConfig = {
+ config: {
+ test: true,
+ },
+ } as any;
+ (Config.getInstance as jest.Mock).mockReturnValue(mockConfig);
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ });
+
+ describe('Constructor', () => {
+ it('should create feedback form comment with default props', () => {
+ feedbackFormComment = new FeedbackFormComment({});
+
+ expect(feedbackFormComment.render).toBeDefined();
+ expect(feedbackFormComment.render.tagName).toBe('TEXTAREA');
+ expect(feedbackFormComment.render.classList.contains('mynah-feedback-form-comment')).toBe(true);
+ expect(feedbackFormComment.render.getAttribute('data-testid')).toBe(testIds.feedbackForm.comment);
+ });
+
+ it('should create feedback form comment with initial comment', () => {
+ const initComment = 'Initial feedback comment';
+ feedbackFormComment = new FeedbackFormComment({ initComment });
+
+ expect(feedbackFormComment.render.value).toBe(initComment);
+ expect(feedbackFormComment.getComment()).toBe(initComment);
+ });
+
+ it('should create feedback form comment with onChange callback', () => {
+ feedbackFormComment = new FeedbackFormComment({ onChange: mockOnChange });
+
+ expect(feedbackFormComment.render).toBeDefined();
+ expect(mockOnChange).not.toHaveBeenCalled();
+ });
+
+ it('should create feedback form comment with both initial comment and onChange', () => {
+ const initComment = 'Test comment';
+ feedbackFormComment = new FeedbackFormComment({
+ initComment,
+ onChange: mockOnChange,
+ });
+
+ expect(feedbackFormComment.render.value).toBe(initComment);
+ expect(feedbackFormComment.getComment()).toBe(initComment);
+ expect(mockOnChange).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Event Handling', () => {
+ it('should call onChange when keyup event is triggered', () => {
+ feedbackFormComment = new FeedbackFormComment({ onChange: mockOnChange });
+ document.body.appendChild(feedbackFormComment.render);
+
+ const testValue = 'New comment text';
+ feedbackFormComment.render.value = testValue;
+
+ const keyupEvent = new KeyboardEvent('keyup', { key: 'a' });
+ feedbackFormComment.render.dispatchEvent(keyupEvent);
+
+ expect(mockOnChange).toHaveBeenCalledWith(testValue);
+ expect(mockOnChange).toHaveBeenCalledTimes(1);
+ });
+
+ it('should call onChange multiple times for multiple keyup events', () => {
+ feedbackFormComment = new FeedbackFormComment({ onChange: mockOnChange });
+ document.body.appendChild(feedbackFormComment.render);
+
+ // First keyup
+ feedbackFormComment.render.value = 'First';
+ feedbackFormComment.render.dispatchEvent(new KeyboardEvent('keyup', { key: 'a' }));
+
+ // Second keyup
+ feedbackFormComment.render.value = 'First Second';
+ feedbackFormComment.render.dispatchEvent(new KeyboardEvent('keyup', { key: 'b' }));
+
+ expect(mockOnChange).toHaveBeenCalledTimes(2);
+ expect(mockOnChange).toHaveBeenNthCalledWith(1, 'First');
+ expect(mockOnChange).toHaveBeenNthCalledWith(2, 'First Second');
+ });
+
+ it('should not throw error when onChange is not provided and keyup is triggered', () => {
+ feedbackFormComment = new FeedbackFormComment({});
+ document.body.appendChild(feedbackFormComment.render);
+
+ feedbackFormComment.render.value = 'Test value';
+
+ expect(() => {
+ feedbackFormComment.render.dispatchEvent(new KeyboardEvent('keyup', { key: 'a' }));
+ }).not.toThrow();
+ });
+
+ it('should handle empty string values in onChange', () => {
+ feedbackFormComment = new FeedbackFormComment({ onChange: mockOnChange });
+ document.body.appendChild(feedbackFormComment.render);
+
+ feedbackFormComment.render.value = '';
+ feedbackFormComment.render.dispatchEvent(new KeyboardEvent('keyup', { key: 'Backspace' }));
+
+ expect(mockOnChange).toHaveBeenCalledWith('');
+ });
+ });
+
+ describe('Methods', () => {
+ beforeEach(() => {
+ feedbackFormComment = new FeedbackFormComment({ initComment: 'Initial comment' });
+ });
+
+ it('should return current comment value with getComment', () => {
+ expect(feedbackFormComment.getComment()).toBe('Initial comment');
+
+ feedbackFormComment.render.value = 'Updated comment';
+ expect(feedbackFormComment.getComment()).toBe('Updated comment');
+ });
+
+ it('should clear comment value with clear method', () => {
+ expect(feedbackFormComment.getComment()).toBe('Initial comment');
+
+ feedbackFormComment.clear();
+
+ expect(feedbackFormComment.getComment()).toBe('');
+ expect(feedbackFormComment.render.value).toBe('');
+ });
+
+ it('should clear empty comment without issues', () => {
+ feedbackFormComment = new FeedbackFormComment({});
+
+ expect(feedbackFormComment.getComment()).toBe('');
+
+ feedbackFormComment.clear();
+
+ expect(feedbackFormComment.getComment()).toBe('');
+ });
+ });
+
+ describe('DOM Structure', () => {
+ it('should have correct HTML attributes', () => {
+ const initComment = 'Test comment';
+ feedbackFormComment = new FeedbackFormComment({ initComment });
+
+ expect(feedbackFormComment.render.tagName).toBe('TEXTAREA');
+ expect(feedbackFormComment.render.getAttribute('data-testid')).toBe(testIds.feedbackForm.comment);
+ expect(feedbackFormComment.render.classList.contains('mynah-feedback-form-comment')).toBe(true);
+ expect(feedbackFormComment.render.value).toBe(initComment);
+ });
+
+ it('should be focusable', () => {
+ feedbackFormComment = new FeedbackFormComment({});
+ document.body.appendChild(feedbackFormComment.render);
+
+ feedbackFormComment.render.focus();
+ expect(document.activeElement).toBe(feedbackFormComment.render);
+ });
+
+ it('should handle special characters in initial comment', () => {
+ const specialComment = 'Comment with "quotes" and & symbols';
+ feedbackFormComment = new FeedbackFormComment({ initComment: specialComment });
+
+ expect(feedbackFormComment.getComment()).toBe(specialComment);
+ expect(feedbackFormComment.render.value).toBe(specialComment);
+ });
+ });
+
+ describe('Integration with onChange', () => {
+ it('should trigger onChange with correct value after programmatic value change', () => {
+ feedbackFormComment = new FeedbackFormComment({ onChange: mockOnChange });
+ document.body.appendChild(feedbackFormComment.render);
+
+ // Simulate user typing
+ const newValue = 'User typed this';
+ feedbackFormComment.render.value = newValue;
+ feedbackFormComment.render.dispatchEvent(new KeyboardEvent('keyup'));
+
+ expect(mockOnChange).toHaveBeenCalledWith(newValue);
+ });
+
+ it('should work with onChange callback that modifies external state', () => {
+ let externalState = '';
+ const stateUpdater = (value: string): void => {
+ externalState = value.toUpperCase();
+ };
+
+ feedbackFormComment = new FeedbackFormComment({ onChange: stateUpdater });
+ document.body.appendChild(feedbackFormComment.render);
+
+ feedbackFormComment.render.value = 'test input';
+ feedbackFormComment.render.dispatchEvent(new KeyboardEvent('keyup'));
+
+ expect(externalState).toBe('TEST INPUT');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/feedback-form/feedback-form-coverage-simple.spec.ts b/mynah-ui/src/__test__/components/feedback-form/feedback-form-coverage-simple.spec.ts
new file mode 100644
index 0000000000..a12ee2e453
--- /dev/null
+++ b/mynah-ui/src/__test__/components/feedback-form/feedback-form-coverage-simple.spec.ts
@@ -0,0 +1,301 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FeedbackForm } from '../../../components/feedback-form/feedback-form';
+import { MynahEventNames, FeedbackPayload, ChatItemFormItem } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { Config } from '../../../helper/config';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import testIds from '../../../helper/test-ids';
+
+// Mock dependencies
+jest.mock('../../../helper/config');
+jest.mock('../../../helper/tabs-store');
+jest.mock('../../../helper/events');
+
+describe('FeedbackForm Simple Coverage Tests', () => {
+ let feedbackForm: FeedbackForm;
+ let mockConfig: jest.Mocked;
+ let mockGlobalEvents: jest.Mocked;
+ let mockTabsStore: jest.Mocked;
+
+ const mockFeedbackOptions = [
+ { value: 'helpful', label: 'Helpful' },
+ { value: 'not-helpful', label: 'Not Helpful' },
+ { value: 'inaccurate', label: 'Inaccurate' },
+ ];
+
+ const mockTexts = {
+ feedbackFormOptionsLabel: 'How was this response?',
+ feedbackFormCommentLabel: 'Tell us more (optional)',
+ feedbackFormTitle: 'Feedback',
+ feedbackFormDescription: 'Help us improve',
+ submit: 'Submit',
+ cancel: 'Cancel',
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+
+ // Setup Config mock
+ mockConfig = {
+ config: {
+ feedbackOptions: mockFeedbackOptions,
+ texts: mockTexts,
+ test: true,
+ componentClasses: {},
+ },
+ } as any;
+ (Config.getInstance as jest.Mock).mockReturnValue(mockConfig);
+
+ // Setup GlobalEvents mock
+ mockGlobalEvents = {
+ addListener: jest.fn(),
+ dispatch: jest.fn(),
+ } as any;
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue(mockGlobalEvents);
+
+ // Setup TabsStore mock
+ mockTabsStore = {
+ getTabDataStore: jest.fn().mockReturnValue({ tabId: 'test-tab' }),
+ } as any;
+ (MynahUITabsStore.getInstance as jest.Mock).mockReturnValue(mockTabsStore);
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ });
+
+ describe('InitPayload Comment Optional Chaining Coverage', () => {
+ it('should handle undefined comment in initPayload', () => {
+ const initPayload: FeedbackPayload = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ selectedOption: 'helpful',
+ // comment is undefined - this tests the optional chaining on line 51
+ };
+
+ expect(() => {
+ feedbackForm = new FeedbackForm({ initPayload });
+ }).not.toThrow();
+
+ expect(feedbackForm).toBeDefined();
+ });
+
+ it('should handle null comment in initPayload', () => {
+ const initPayload: any = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ selectedOption: 'helpful',
+ comment: null, // This tests the optional chaining
+ };
+
+ expect(() => {
+ feedbackForm = new FeedbackForm({ initPayload });
+ }).not.toThrow();
+
+ expect(feedbackForm).toBeDefined();
+ });
+ });
+
+ describe('Custom Form Data Optional Chaining Coverage', () => {
+ it('should handle custom form data with undefined title and description', () => {
+ feedbackForm = new FeedbackForm();
+
+ const customFormData = {
+ formItems: [{ id: 'input1', type: 'textinput' }] as ChatItemFormItem[],
+ // title and description are undefined - tests optional chaining on lines 118-125
+ };
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+
+ expect(() => {
+ callback(eventData);
+ }).not.toThrow();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: undefined,
+ description: undefined,
+ }),
+ );
+ });
+
+ it('should handle custom form data with null values', () => {
+ feedbackForm = new FeedbackForm();
+
+ const customFormData: any = {
+ title: null,
+ description: null,
+ formItems: [{ id: 'input1', type: 'textinput' }] as ChatItemFormItem[],
+ };
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+
+ expect(() => {
+ callback(eventData);
+ }).not.toThrow();
+ });
+ });
+
+ describe('Comment Change Coverage', () => {
+ it('should handle comment changes through the feedback comment component', () => {
+ feedbackForm = new FeedbackForm();
+
+ // Get the comment component from the form items
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+ const commentTextarea = formItems.find(
+ (item) =>
+ item.getAttribute != null && item.getAttribute('data-testid') === testIds.feedbackForm.comment,
+ ) as unknown as HTMLTextAreaElement;
+
+ expect(commentTextarea).toBeDefined();
+
+ // Simulate typing in the comment field
+ document.body.appendChild(commentTextarea);
+ commentTextarea.value = 'Test comment';
+ commentTextarea.dispatchEvent(new KeyboardEvent('keyup'));
+
+ // Submit the form to verify the comment was captured
+ const buttonsContainer = feedbackForm.defaultFeedbackFormItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ submitButton.click();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.FEEDBACK_SET,
+ expect.objectContaining({
+ comment: 'Test comment',
+ }),
+ );
+ });
+ });
+
+ describe('Edge Cases for Better Coverage', () => {
+ it('should handle empty custom form data', () => {
+ feedbackForm = new FeedbackForm();
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData: {},
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+
+ expect(() => {
+ callback(eventData);
+ }).not.toThrow();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ children: [],
+ }),
+ );
+ });
+
+ it('should handle form with both messageId and customFormData (messageId takes precedence)', () => {
+ feedbackForm = new FeedbackForm();
+
+ const eventData = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ customFormData: {
+ title: 'Custom Title',
+ description: 'Custom Description',
+ },
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ // When messageId is present, it should use the default feedback form
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: mockTexts.feedbackFormTitle,
+ description: mockTexts.feedbackFormDescription,
+ children: feedbackForm.defaultFeedbackFormItems,
+ }),
+ );
+ });
+
+ it('should handle multiple form submissions', () => {
+ feedbackForm = new FeedbackForm();
+
+ const buttonsContainer = feedbackForm.defaultFeedbackFormItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ // Submit multiple times
+ submitButton.click();
+ submitButton.click();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledTimes(4); // 2 FEEDBACK_SET + 2 CLOSE_SHEET
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.FEEDBACK_SET, expect.any(Object));
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+ });
+
+ it('should handle close method multiple times', () => {
+ feedbackForm = new FeedbackForm();
+
+ // Call close multiple times
+ feedbackForm.close();
+ feedbackForm.close();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+ });
+ });
+
+ describe('Constructor Variations Coverage', () => {
+ it('should create feedback form without props', () => {
+ feedbackForm = new FeedbackForm();
+ expect(feedbackForm).toBeDefined();
+ expect(feedbackForm.defaultFeedbackFormItems).toHaveLength(4);
+ });
+
+ it('should create feedback form with empty props', () => {
+ feedbackForm = new FeedbackForm({});
+ expect(feedbackForm).toBeDefined();
+ expect(feedbackForm.defaultFeedbackFormItems).toHaveLength(4);
+ });
+
+ it('should create feedback form with partial initPayload', () => {
+ const initPayload: Partial = {
+ messageId: 'msg-123',
+ // Other fields are undefined
+ };
+
+ feedbackForm = new FeedbackForm({ initPayload: initPayload as FeedbackPayload });
+ expect(feedbackForm).toBeDefined();
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/feedback-form/feedback-form-integration.spec.ts b/mynah-ui/src/__test__/components/feedback-form/feedback-form-integration.spec.ts
new file mode 100644
index 0000000000..da2d837a33
--- /dev/null
+++ b/mynah-ui/src/__test__/components/feedback-form/feedback-form-integration.spec.ts
@@ -0,0 +1,423 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FeedbackForm } from '../../../components/feedback-form/feedback-form';
+import { FeedbackFormComment } from '../../../components/feedback-form/feedback-form-comment';
+import { MynahEventNames, FeedbackPayload } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { Config } from '../../../helper/config';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import testIds from '../../../helper/test-ids';
+
+// Mock dependencies
+jest.mock('../../../helper/config');
+jest.mock('../../../helper/tabs-store');
+jest.mock('../../../helper/events');
+
+describe('FeedbackForm Integration Tests', () => {
+ let feedbackForm: FeedbackForm;
+ let mockConfig: jest.Mocked;
+ let mockGlobalEvents: jest.Mocked;
+ let mockTabsStore: jest.Mocked;
+
+ const mockFeedbackOptions = [
+ { value: 'helpful', label: 'Helpful' },
+ { value: 'not-helpful', label: 'Not Helpful' },
+ { value: 'inaccurate', label: 'Inaccurate' },
+ ];
+
+ const mockTexts = {
+ feedbackFormOptionsLabel: 'How was this response?',
+ feedbackFormCommentLabel: 'Tell us more (optional)',
+ feedbackFormTitle: 'Feedback',
+ feedbackFormDescription: 'Help us improve',
+ submit: 'Submit',
+ cancel: 'Cancel',
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+
+ // Setup Config mock
+ mockConfig = {
+ config: {
+ feedbackOptions: mockFeedbackOptions,
+ texts: mockTexts,
+ test: true, // Enable test mode for testId attributes
+ componentClasses: {}, // Add componentClasses to prevent Select component errors
+ },
+ } as any;
+ (Config.getInstance as jest.Mock).mockReturnValue(mockConfig);
+
+ // Setup GlobalEvents mock
+ mockGlobalEvents = {
+ addListener: jest.fn(),
+ dispatch: jest.fn(),
+ } as any;
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue(mockGlobalEvents);
+
+ // Setup TabsStore mock
+ mockTabsStore = {
+ getTabDataStore: jest.fn().mockReturnValue({ tabId: 'test-tab' }),
+ } as any;
+ (MynahUITabsStore.getInstance as jest.Mock).mockReturnValue(mockTabsStore);
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ });
+
+ describe('Complete Feedback Flow', () => {
+ it('should handle complete feedback submission flow', () => {
+ // Create feedback form
+ feedbackForm = new FeedbackForm();
+
+ // Simulate showing feedback form
+ const showFeedbackData = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ };
+
+ const showFeedbackCallback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ showFeedbackCallback(showFeedbackData);
+
+ // Verify form was opened
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: mockTexts.feedbackFormTitle,
+ description: mockTexts.feedbackFormDescription,
+ }),
+ );
+
+ // Get the form items
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+
+ // Find comment textarea
+ const commentTextarea = formItems.find(
+ (item) =>
+ item.getAttribute != null && item.getAttribute('data-testid') === testIds.feedbackForm.comment,
+ ) as unknown as HTMLTextAreaElement;
+
+ expect(commentTextarea).toBeDefined();
+
+ // Simulate user typing in comment
+ document.body.appendChild(commentTextarea);
+ commentTextarea.value = 'This is my feedback comment';
+ commentTextarea.dispatchEvent(new KeyboardEvent('keyup'));
+
+ // Find and click submit button
+ const buttonsContainer = formItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ expect(buttonsContainer).toBeDefined();
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ expect(submitButton).toBeDefined();
+
+ submitButton.click();
+
+ // Verify feedback was submitted
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.FEEDBACK_SET,
+ expect.objectContaining({
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ selectedOption: 'helpful', // Default first option
+ comment: 'This is my feedback comment',
+ }),
+ );
+
+ // Verify form was closed
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+ });
+
+ it('should handle feedback cancellation flow', () => {
+ feedbackForm = new FeedbackForm();
+
+ // Simulate showing feedback form
+ const showFeedbackData = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ };
+
+ const showFeedbackCallback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ showFeedbackCallback(showFeedbackData);
+
+ // Get form items and add comment
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+ const commentTextarea = formItems.find(
+ (item) =>
+ item.getAttribute != null && item.getAttribute('data-testid') === testIds.feedbackForm.comment,
+ ) as unknown as HTMLTextAreaElement;
+
+ document.body.appendChild(commentTextarea);
+ commentTextarea.value = 'This comment should be cleared';
+ commentTextarea.dispatchEvent(new KeyboardEvent('keyup'));
+
+ // Find and click cancel button
+ const buttonsContainer = formItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ expect(buttonsContainer).toBeDefined();
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const cancelButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.cancelButton}"]`,
+ ) as HTMLButtonElement;
+
+ expect(cancelButton).toBeDefined();
+
+ cancelButton.click();
+
+ // Verify form was closed without submitting feedback
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+
+ // Verify FEEDBACK_SET was not called
+ expect(mockGlobalEvents.dispatch).not.toHaveBeenCalledWith(
+ MynahEventNames.FEEDBACK_SET,
+ expect.any(Object),
+ );
+ });
+
+ it('should handle feedback form with initial payload', () => {
+ const initPayload: FeedbackPayload = {
+ messageId: 'existing-msg',
+ tabId: 'existing-tab',
+ selectedOption: 'not-helpful',
+ comment: 'Initial comment',
+ };
+
+ feedbackForm = new FeedbackForm({ initPayload });
+
+ // Get comment component and verify initial value
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+ const commentTextarea = formItems.find(
+ (item) =>
+ item.getAttribute != null && item.getAttribute('data-testid') === testIds.feedbackForm.comment,
+ ) as unknown as HTMLTextAreaElement;
+
+ expect(commentTextarea.value).toBe('Initial comment');
+
+ // Submit the form
+ const buttonsContainer = formItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ submitButton.click();
+
+ // Verify the initial payload values are used
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.FEEDBACK_SET,
+ expect.objectContaining({
+ selectedOption: 'not-helpful',
+ comment: 'Initial comment',
+ }),
+ );
+ });
+ });
+
+ describe('Comment Component Integration', () => {
+ it('should properly integrate comment component with feedback form', () => {
+ feedbackForm = new FeedbackForm();
+
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+ const commentTextarea = formItems.find(
+ (item) =>
+ item.getAttribute != null && item.getAttribute('data-testid') === testIds.feedbackForm.comment,
+ ) as unknown as HTMLTextAreaElement;
+
+ // Verify comment component is properly integrated
+ expect(commentTextarea).toBeDefined();
+ expect(commentTextarea.tagName).toBe('TEXTAREA');
+ expect(commentTextarea.classList.contains('mynah-feedback-form-comment')).toBe(true);
+
+ // Test comment functionality
+ document.body.appendChild(commentTextarea);
+ commentTextarea.value = 'Test comment';
+
+ // Create a FeedbackFormComment instance to test methods
+ const commentComponent = new FeedbackFormComment({
+ initComment: 'Test comment',
+ });
+
+ expect(commentComponent.getComment()).toBe('Test comment');
+
+ commentComponent.clear();
+ expect(commentComponent.getComment()).toBe('');
+ });
+
+ it('should handle comment changes and form submission together', () => {
+ let capturedComment = '';
+
+ // Create comment component with onChange
+ const commentComponent = new FeedbackFormComment({
+ onChange: (comment) => {
+ capturedComment = comment;
+ },
+ });
+
+ document.body.appendChild(commentComponent.render);
+
+ // Simulate user typing
+ commentComponent.render.value = 'User feedback';
+ commentComponent.render.dispatchEvent(new KeyboardEvent('keyup'));
+
+ expect(capturedComment).toBe('User feedback');
+
+ // Test clearing
+ commentComponent.clear();
+ expect(commentComponent.getComment()).toBe('');
+ });
+ });
+
+ describe('Form State Management', () => {
+ it('should maintain form state throughout interaction', () => {
+ feedbackForm = new FeedbackForm();
+
+ // Show feedback form
+ const showFeedbackData = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ };
+
+ const showFeedbackCallback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ showFeedbackCallback(showFeedbackData);
+
+ // Modify form state
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+ const commentTextarea = formItems.find(
+ (item) =>
+ item.getAttribute != null && item.getAttribute('data-testid') === testIds.feedbackForm.comment,
+ ) as unknown as HTMLTextAreaElement;
+
+ document.body.appendChild(commentTextarea);
+ commentTextarea.value = 'Modified comment';
+ commentTextarea.dispatchEvent(new KeyboardEvent('keyup'));
+
+ // Submit form
+ const buttonsContainer = formItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ submitButton.click();
+
+ // Verify state was maintained and submitted
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.FEEDBACK_SET,
+ expect.objectContaining({
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ comment: 'Modified comment',
+ }),
+ );
+ });
+
+ it('should reset form state after close', () => {
+ const initPayload: FeedbackPayload = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ selectedOption: 'not-helpful',
+ comment: 'Some comment',
+ };
+
+ feedbackForm = new FeedbackForm({ initPayload });
+
+ // Close the form
+ feedbackForm.close();
+
+ // Verify close event was dispatched
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+
+ // Verify form items are reset
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+ const commentTextarea = formItems.find(
+ (item) =>
+ item.getAttribute != null && item.getAttribute('data-testid') === testIds.feedbackForm.comment,
+ ) as unknown as HTMLTextAreaElement;
+
+ expect(commentTextarea.value).toBe('');
+ });
+ });
+
+ describe('Error Handling', () => {
+ it('should handle missing tab data gracefully', () => {
+ // Override the mock for this specific test
+ mockTabsStore.getTabDataStore.mockReturnValueOnce(undefined as any);
+
+ feedbackForm = new FeedbackForm();
+
+ const customFormData = {
+ title: 'Custom Form',
+ formItems: [{ id: 'input1', type: 'textinput' }] as any[],
+ };
+
+ const eventData = {
+ tabId: 'invalid-tab',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+
+ // Should not throw error
+ expect(() => {
+ callback(eventData);
+ }).not.toThrow();
+
+ // Should open sheet with empty children
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ children: [],
+ }),
+ );
+ });
+
+ it('should handle form submission without comment gracefully', () => {
+ feedbackForm = new FeedbackForm();
+
+ const formItems = feedbackForm.defaultFeedbackFormItems;
+ const buttonsContainer = formItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ // Submit without adding comment
+ expect(() => {
+ submitButton.click();
+ }).not.toThrow();
+
+ // Should submit with empty comment
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.FEEDBACK_SET,
+ expect.objectContaining({
+ comment: '',
+ }),
+ );
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/feedback-form/feedback-form.spec.ts b/mynah-ui/src/__test__/components/feedback-form/feedback-form.spec.ts
new file mode 100644
index 0000000000..021d2d161a
--- /dev/null
+++ b/mynah-ui/src/__test__/components/feedback-form/feedback-form.spec.ts
@@ -0,0 +1,449 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FeedbackForm } from '../../../components/feedback-form/feedback-form';
+import { MynahEventNames, FeedbackPayload, ChatItemButton, ChatItemFormItem } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { Config } from '../../../helper/config';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import testIds from '../../../helper/test-ids';
+
+// Mock dependencies
+jest.mock('../../../helper/config');
+jest.mock('../../../helper/tabs-store');
+jest.mock('../../../helper/events');
+
+describe('FeedbackForm Component', () => {
+ let feedbackForm: FeedbackForm;
+ let mockConfig: jest.Mocked;
+ let mockGlobalEvents: jest.Mocked;
+ let mockTabsStore: jest.Mocked;
+
+ const mockFeedbackOptions = [
+ { value: 'helpful', label: 'Helpful' },
+ { value: 'not-helpful', label: 'Not Helpful' },
+ { value: 'inaccurate', label: 'Inaccurate' },
+ ];
+
+ const mockTexts = {
+ feedbackFormOptionsLabel: 'How was this response?',
+ feedbackFormCommentLabel: 'Tell us more (optional)',
+ feedbackFormTitle: 'Feedback',
+ feedbackFormDescription: 'Help us improve',
+ submit: 'Submit',
+ cancel: 'Cancel',
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+
+ // Setup Config mock
+ mockConfig = {
+ config: {
+ feedbackOptions: mockFeedbackOptions,
+ texts: mockTexts,
+ test: true, // Enable test mode for testId attributes
+ componentClasses: {}, // Add componentClasses to prevent Select component errors
+ },
+ } as any;
+ (Config.getInstance as jest.Mock).mockReturnValue(mockConfig);
+
+ // Setup GlobalEvents mock
+ mockGlobalEvents = {
+ addListener: jest.fn(),
+ dispatch: jest.fn(),
+ } as any;
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue(mockGlobalEvents);
+
+ // Setup TabsStore mock
+ mockTabsStore = {
+ getTabDataStore: jest.fn().mockReturnValue({ tabId: 'test-tab' }),
+ } as any;
+ (MynahUITabsStore.getInstance as jest.Mock).mockReturnValue(mockTabsStore);
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.clearAllMocks();
+ });
+
+ describe('Constructor', () => {
+ it('should create feedback form with default configuration', () => {
+ feedbackForm = new FeedbackForm();
+
+ expect(feedbackForm).toBeDefined();
+ expect(feedbackForm.defaultFeedbackFormItems).toBeDefined();
+ expect(feedbackForm.defaultFeedbackFormItems).toHaveLength(4);
+ });
+
+ it('should create feedback form with initial payload', () => {
+ const initPayload: FeedbackPayload = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ selectedOption: 'helpful',
+ comment: 'Great response!',
+ };
+
+ feedbackForm = new FeedbackForm({ initPayload });
+
+ expect(feedbackForm).toBeDefined();
+ });
+
+ it('should register event listener for SHOW_FEEDBACK_FORM', () => {
+ feedbackForm = new FeedbackForm();
+
+ expect(mockGlobalEvents.addListener).toHaveBeenCalledWith(
+ MynahEventNames.SHOW_FEEDBACK_FORM,
+ expect.any(Function),
+ );
+ });
+
+ it('should initialize with first feedback option as default', () => {
+ feedbackForm = new FeedbackForm();
+
+ // The constructor should set the default selected option to the first option
+ expect(mockConfig.config.feedbackOptions[0].value).toBe('helpful');
+ });
+ });
+
+ describe('Event Handling', () => {
+ beforeEach(() => {
+ feedbackForm = new FeedbackForm();
+ });
+
+ it('should handle SHOW_FEEDBACK_FORM event with messageId', () => {
+ const eventData = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ };
+
+ // Get the registered callback
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: mockTexts.feedbackFormTitle,
+ description: mockTexts.feedbackFormDescription,
+ children: expect.any(Array),
+ }),
+ );
+ });
+
+ it('should handle SHOW_FEEDBACK_FORM event with custom form data', () => {
+ const customFormData = {
+ title: 'Custom Title',
+ description: 'Custom Description',
+ buttons: [{ id: 'btn1', text: 'Custom Button' }] as ChatItemButton[],
+ formItems: [{ id: 'item1', type: 'textinput' }] as ChatItemFormItem[],
+ };
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: 'Custom Title',
+ description: 'Custom Description',
+ }),
+ );
+ });
+
+ it('should handle SHOW_FEEDBACK_FORM event without messageId or customFormData', () => {
+ const eventData = {
+ tabId: 'tab-456',
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: undefined,
+ description: undefined,
+ children: [],
+ }),
+ );
+ });
+ });
+
+ describe('Form Submission', () => {
+ beforeEach(() => {
+ feedbackForm = new FeedbackForm();
+ });
+
+ it('should dispatch FEEDBACK_SET event when submit button is clicked', () => {
+ // Get the buttons container
+ const buttonsContainer = feedbackForm.defaultFeedbackFormItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ expect(buttonsContainer).toBeDefined();
+
+ // Find submit button within the container
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ expect(submitButton).toBeDefined();
+
+ // Simulate button click
+ submitButton.click();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.FEEDBACK_SET,
+ expect.objectContaining({
+ selectedOption: 'helpful', // Default first option
+ messageId: '',
+ tabId: '',
+ comment: '',
+ }),
+ );
+ });
+
+ it('should close form after submission', () => {
+ const buttonsContainer = feedbackForm.defaultFeedbackFormItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const submitButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.submitButton}"]`,
+ ) as HTMLButtonElement;
+
+ submitButton.click();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+ });
+ });
+
+ describe('Form Cancellation', () => {
+ beforeEach(() => {
+ feedbackForm = new FeedbackForm();
+ });
+
+ it('should close form when cancel button is clicked', () => {
+ const buttonsContainer = feedbackForm.defaultFeedbackFormItems.find((item) =>
+ item.classList?.contains('mynah-feedback-form-buttons-container'),
+ );
+
+ expect(buttonsContainer).toBeDefined();
+
+ document.body.appendChild(buttonsContainer as HTMLElement);
+ const cancelButton = buttonsContainer?.querySelector(
+ `[data-testid="${testIds.feedbackForm.cancelButton}"]`,
+ ) as HTMLButtonElement;
+
+ expect(cancelButton).toBeDefined();
+
+ cancelButton.click();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+ });
+ });
+
+ describe('Close Method', () => {
+ beforeEach(() => {
+ feedbackForm = new FeedbackForm();
+ });
+
+ it('should reset form state when closed', () => {
+ feedbackForm.close();
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+ });
+
+ it('should clear comment and reset selected option on close', () => {
+ // Set some initial state
+ const initPayload: FeedbackPayload = {
+ messageId: 'msg-123',
+ tabId: 'tab-456',
+ selectedOption: 'not-helpful',
+ comment: 'Some comment',
+ };
+
+ feedbackForm = new FeedbackForm({ initPayload });
+ feedbackForm.close();
+
+ // After close, the form should be reset to defaults
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.CLOSE_SHEET, {});
+ });
+ });
+
+ describe('Custom Form Handling', () => {
+ beforeEach(() => {
+ feedbackForm = new FeedbackForm();
+ });
+
+ it('should handle custom form with form items', () => {
+ const customFormData = {
+ title: 'Custom Form',
+ formItems: [{ id: 'input1', type: 'textinput', title: 'Name' }] as ChatItemFormItem[],
+ };
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: 'Custom Form',
+ }),
+ );
+ });
+
+ it('should handle custom form with buttons', () => {
+ const customFormData = {
+ title: 'Custom Form',
+ buttons: [{ id: 'submit', text: 'Submit Form' }] as ChatItemButton[],
+ };
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ tabId: 'tab-456',
+ title: 'Custom Form',
+ }),
+ );
+ });
+
+ it('should return empty array when tab data store is undefined', () => {
+ // Override the mock for this specific test
+ mockTabsStore.getTabDataStore.mockReturnValueOnce(undefined as any);
+
+ feedbackForm = new FeedbackForm();
+
+ const customFormData = {
+ title: 'Custom Form',
+ formItems: [{ id: 'input1', type: 'textinput' }] as ChatItemFormItem[],
+ };
+
+ const eventData = {
+ tabId: 'invalid-tab',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(
+ MynahEventNames.OPEN_SHEET,
+ expect.objectContaining({
+ children: [],
+ }),
+ );
+ });
+ });
+
+ describe('Form Items Structure', () => {
+ beforeEach(() => {
+ feedbackForm = new FeedbackForm();
+ });
+
+ it('should have correct structure for default feedback form items', () => {
+ const items = feedbackForm.defaultFeedbackFormItems;
+
+ expect(items).toHaveLength(4);
+
+ // First item should be the select wrapper
+ expect(items[0].classList.contains('mynah-form-input-wrapper')).toBe(true);
+
+ // Second item should be the comment label
+ expect(items[1].tagName).toBe('SPAN');
+ expect(items[1].textContent).toBe(mockTexts.feedbackFormCommentLabel);
+
+ // Third item should be the comment textarea
+ expect(items[2].tagName).toBe('TEXTAREA');
+ expect(items[2].getAttribute('data-testid')).toBe(testIds.feedbackForm.comment);
+
+ // Fourth item should be the buttons container
+ expect(items[3].classList.contains('mynah-feedback-form-buttons-container')).toBe(true);
+ });
+
+ it('should have submit and cancel buttons in buttons container', () => {
+ const buttonsContainer = feedbackForm.defaultFeedbackFormItems[3];
+
+ expect(buttonsContainer.classList.contains('mynah-feedback-form-buttons-container')).toBe(true);
+
+ // Append to DOM to query for buttons
+ document.body.appendChild(buttonsContainer);
+
+ const cancelButton = buttonsContainer.querySelector(`[data-testid="${testIds.feedbackForm.cancelButton}"]`);
+ const submitButton = buttonsContainer.querySelector(`[data-testid="${testIds.feedbackForm.submitButton}"]`);
+
+ expect(cancelButton).toBeDefined();
+ expect(submitButton).toBeDefined();
+ expect(cancelButton?.textContent).toBe(mockTexts.cancel);
+ expect(submitButton?.textContent).toBe(mockTexts.submit);
+ });
+ });
+
+ describe('Event Dispatching', () => {
+ beforeEach(() => {
+ feedbackForm = new FeedbackForm();
+ });
+
+ it('should dispatch custom form action click events', () => {
+ const customFormData = {
+ buttons: [{ id: 'custom-action', text: 'Custom Action' }] as ChatItemButton[],
+ };
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData,
+ };
+
+ // Trigger the show feedback form event
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ // Verify that the form was opened
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.OPEN_SHEET, expect.any(Object));
+ });
+
+ it('should handle form change events', () => {
+ const customFormData = {
+ formItems: [{ id: 'input1', type: 'textinput' }] as ChatItemFormItem[],
+ };
+
+ const eventData = {
+ tabId: 'tab-456',
+ customFormData,
+ };
+
+ const callback = (mockGlobalEvents.addListener as jest.Mock).mock.calls[0][1];
+ callback(eventData);
+
+ // The form should be created and ready to handle form change events
+ expect(mockGlobalEvents.dispatch).toHaveBeenCalledWith(MynahEventNames.OPEN_SHEET, expect.any(Object));
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/feedback-form/index.spec.ts b/mynah-ui/src/__test__/components/feedback-form/index.spec.ts
new file mode 100644
index 0000000000..04a0a0454b
--- /dev/null
+++ b/mynah-ui/src/__test__/components/feedback-form/index.spec.ts
@@ -0,0 +1,10 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Export all feedback form tests for easier importing
+export * from './feedback-form.spec';
+export * from './feedback-form-comment.spec';
+export * from './feedback-form-integration.spec';
+export * from './feedback-form-coverage-simple.spec';
diff --git a/mynah-ui/src/__test__/components/form-items/checkbox.spec.ts b/mynah-ui/src/__test__/components/form-items/checkbox.spec.ts
new file mode 100644
index 0000000000..54f469b983
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/checkbox.spec.ts
@@ -0,0 +1,227 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Checkbox, CheckboxInternal, CheckboxProps } from '../../../components/form-items/checkbox';
+import { MynahIcons } from '../../../components/icon';
+import { DomBuilder } from '../../../helper/dom';
+
+describe('Checkbox Component', () => {
+ let checkbox: CheckboxInternal;
+ let mockOnChange: jest.Mock;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('CheckboxInternal', () => {
+ it('should create checkbox with default props', () => {
+ checkbox = new CheckboxInternal({});
+
+ expect(checkbox.render).toBeDefined();
+ expect(checkbox.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ expect(checkbox.getValue()).toBe('false');
+ });
+
+ it('should create checkbox with initial value true', () => {
+ checkbox = new CheckboxInternal({ value: 'true' });
+
+ expect(checkbox.getValue()).toBe('true');
+ });
+
+ it('should create checkbox with label', () => {
+ const label = 'Test Checkbox';
+ checkbox = new CheckboxInternal({ label });
+
+ document.body.appendChild(checkbox.render);
+ const labelElement = document.body.querySelector('.mynah-form-input-radio-label');
+ expect(labelElement?.textContent).toContain(label);
+ });
+
+ it('should create checkbox with title', () => {
+ const title = 'Checkbox Title';
+ checkbox = new CheckboxInternal({ title });
+
+ document.body.appendChild(checkbox.render);
+ const titleElement = document.body.querySelector('.mynah-form-input-label');
+ expect(titleElement?.textContent).toBe(title);
+ });
+
+ it('should create checkbox with custom icon', () => {
+ checkbox = new CheckboxInternal({ icon: MynahIcons.CANCEL });
+
+ document.body.appendChild(checkbox.render);
+ const iconElement = document.body.querySelector('.mynah-icon');
+ expect(iconElement).toBeDefined();
+ });
+
+ it('should create checkbox with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ checkbox = new CheckboxInternal({ classNames: customClasses });
+
+ expect(checkbox.render.querySelector('.custom-class-1')).toBeDefined();
+ expect(checkbox.render.querySelector('.custom-class-2')).toBeDefined();
+ });
+
+ it('should create checkbox with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value', 'aria-label': 'test-checkbox' };
+ checkbox = new CheckboxInternal({ attributes });
+
+ document.body.appendChild(checkbox.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.getAttribute('data-test')).toBe('test-value');
+ expect(container?.getAttribute('aria-label')).toBe('test-checkbox');
+ });
+
+ it('should create checkbox with test IDs', () => {
+ const wrapperTestId = 'wrapper-test-id';
+ const optionTestId = 'option-test-id';
+ checkbox = new CheckboxInternal({ wrapperTestId, optionTestId });
+
+ document.body.appendChild(checkbox.render);
+ const wrapper = document.body.querySelector(`[data-testid="${wrapperTestId}"]`);
+ const option = document.body.querySelector(`[data-testid="${optionTestId}"]`);
+ expect(wrapper).toBeDefined();
+ expect(option).toBeDefined();
+ });
+
+ it('should handle setValue method', () => {
+ checkbox = new CheckboxInternal({});
+
+ checkbox.setValue('true');
+ expect(checkbox.getValue()).toBe('true');
+
+ checkbox.setValue('false');
+ expect(checkbox.getValue()).toBe('false');
+ });
+
+ it('should handle setEnabled method', () => {
+ checkbox = new CheckboxInternal({});
+ document.body.appendChild(checkbox.render);
+
+ const checkboxInput = document.body.querySelector('.as-checkbox') as HTMLInputElement;
+ const wrapper = document.body.querySelector('.mynah-form-input') as HTMLElement;
+
+ // Test disabling
+ checkbox.setEnabled(false);
+ expect(checkboxInput.hasAttribute('disabled')).toBe(true);
+ expect(wrapper.hasAttribute('disabled')).toBe(true);
+
+ // Test enabling
+ checkbox.setEnabled(true);
+ expect(checkboxInput.hasAttribute('disabled')).toBe(false);
+ expect(wrapper.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('should trigger onChange when clicked', () => {
+ checkbox = new CheckboxInternal({ onChange: mockOnChange });
+ document.body.appendChild(checkbox.render);
+
+ const label = document.body.querySelector('.mynah-form-input-radio-label') as HTMLElement;
+
+ // Click to check
+ label.click();
+ expect(mockOnChange).toHaveBeenCalledWith('true');
+ expect(checkbox.getValue()).toBe('true');
+
+ // Click to uncheck
+ label.click();
+ expect(mockOnChange).toHaveBeenCalledWith('false');
+ expect(checkbox.getValue()).toBe('false');
+ });
+
+ it('should prevent event propagation on click', () => {
+ checkbox = new CheckboxInternal({ onChange: mockOnChange });
+ document.body.appendChild(checkbox.render);
+
+ const label = document.body.querySelector('.mynah-form-input-radio-label') as HTMLElement;
+ const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+
+ const preventDefaultSpy = jest.spyOn(clickEvent, 'preventDefault');
+ const stopPropagationSpy = jest.spyOn(clickEvent, 'stopPropagation');
+
+ label.dispatchEvent(clickEvent);
+
+ expect(preventDefaultSpy).toHaveBeenCalled();
+ expect(stopPropagationSpy).toHaveBeenCalled();
+ });
+
+ it('should handle description element', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ checkbox = new CheckboxInternal({ description: descriptionElement });
+ document.body.appendChild(checkbox.render);
+
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should handle optional property', () => {
+ checkbox = new CheckboxInternal({ optional: true });
+
+ // The optional property is passed but doesn't affect rendering in current implementation
+ expect(checkbox.render).toBeDefined();
+ });
+ });
+
+ describe('Checkbox Factory', () => {
+ it('should create CheckboxInternal by default', () => {
+ const checkboxFactory = new Checkbox({});
+ expect(checkboxFactory).toBeInstanceOf(CheckboxInternal);
+ });
+
+ it('should have abstract methods', () => {
+ const checkboxFactory = new Checkbox({});
+ expect(typeof checkboxFactory.setValue).toBe('function');
+ expect(typeof checkboxFactory.getValue).toBe('function');
+ expect(typeof checkboxFactory.setEnabled).toBe('function');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty props object', () => {
+ checkbox = new CheckboxInternal({});
+ expect(checkbox.render).toBeDefined();
+ expect(checkbox.getValue()).toBe('false');
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: CheckboxProps = {
+ title: undefined,
+ label: undefined,
+ description: undefined,
+ onChange: undefined,
+ };
+
+ checkbox = new CheckboxInternal(props);
+ expect(checkbox.render).toBeDefined();
+ });
+
+ it('should handle multiple rapid clicks', () => {
+ checkbox = new CheckboxInternal({ onChange: mockOnChange });
+ document.body.appendChild(checkbox.render);
+
+ const label = document.body.querySelector('.mynah-form-input-radio-label') as HTMLElement;
+
+ // Rapid clicks
+ label.click();
+ label.click();
+ label.click();
+
+ expect(mockOnChange).toHaveBeenCalledTimes(3);
+ expect(mockOnChange).toHaveBeenNthCalledWith(1, 'true');
+ expect(mockOnChange).toHaveBeenNthCalledWith(2, 'false');
+ expect(mockOnChange).toHaveBeenNthCalledWith(3, 'true');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/form-item-list.spec.ts b/mynah-ui/src/__test__/components/form-items/form-item-list.spec.ts
new file mode 100644
index 0000000000..c2ccc239a2
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/form-item-list.spec.ts
@@ -0,0 +1,389 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FormItemList, FormItemListInternal, FormItemListProps } from '../../../components/form-items/form-item-list';
+import { SingularFormItem, ListItemEntry } from '../../../static';
+import { DomBuilder } from '../../../helper/dom';
+
+// Mock the generateUID helper
+jest.mock('../../../helper/guid', () => ({
+ generateUID: jest.fn(() => 'test-row-id'),
+}));
+
+// Mock the ChatItemFormItemsWrapper
+jest.mock('../../../components/chat-item/chat-item-form-items', () => ({
+ ChatItemFormItemsWrapper: jest.fn().mockImplementation((props) => ({
+ render: document.createElement('div'),
+ getAllValues: jest.fn(() => ({ field1: 'value1', field2: 'value2' })),
+ enableAll: jest.fn(),
+ disableAll: jest.fn(),
+ })),
+}));
+
+describe('FormItemList Component', () => {
+ let formItemList: FormItemListInternal;
+ let mockOnChange: jest.Mock;
+
+ const testFormItems: SingularFormItem[] = [
+ {
+ id: 'field1',
+ type: 'textinput',
+ title: 'Field 1',
+ description: 'Description for field 1',
+ },
+ {
+ id: 'field2',
+ type: 'textinput',
+ title: 'Field 2',
+ },
+ ];
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ jest.clearAllMocks();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('FormItemListInternal', () => {
+ it('should create form item list with default props', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ expect(formItemList.render).toBeDefined();
+ expect(formItemList.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ });
+
+ it('should create form item list with label', () => {
+ const label = 'Test Form List';
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ label,
+ });
+
+ document.body.appendChild(formItemList.render);
+ const labelElement = document.body.querySelector('.mynah-form-input-label');
+ expect(labelElement?.textContent).toBe(label);
+ });
+
+ it('should create form item list with description', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ description: descriptionElement,
+ });
+
+ document.body.appendChild(formItemList.render);
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should create form item list with wrapper test ID', () => {
+ const wrapperTestId = 'wrapper-test-id';
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ wrapperTestId,
+ });
+
+ document.body.appendChild(formItemList.render);
+ const wrapper = document.body.querySelector(`[data-testid="${wrapperTestId}"]`);
+ expect(wrapper).toBeDefined();
+ });
+
+ it('should create form item list with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ classNames: customClasses,
+ });
+
+ // Note: classNames are not currently used in the implementation
+ expect(formItemList.render).toBeDefined();
+ });
+
+ it('should create form item list with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value' };
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ attributes,
+ });
+
+ // Note: attributes are not currently used in the implementation
+ expect(formItemList.render).toBeDefined();
+ });
+
+ it('should initialize with one empty row by default', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ document.body.appendChild(formItemList.render);
+ const rows = document.body.querySelectorAll('.mynah-form-item-list-row');
+
+ // Should have header row + 1 data row
+ expect(rows.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('should initialize with provided values', () => {
+ const initialValues: ListItemEntry[] = [
+ { value: { field1: 'value1', field2: 'value2' } },
+ { value: { field1: 'value3', field2: 'value4' } },
+ ];
+
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ value: initialValues,
+ });
+
+ document.body.appendChild(formItemList.render);
+ const rows = document.body.querySelectorAll('.mynah-form-item-list-row');
+
+ // Should have header row + 2 data rows
+ expect(rows.length).toBeGreaterThanOrEqual(2);
+ });
+
+ it('should have add button', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ document.body.appendChild(formItemList.render);
+ const addButton = document.body.querySelector('.mynah-form-item-list-add-button');
+ expect(addButton).toBeDefined();
+ });
+
+ it('should have remove buttons for each row', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ document.body.appendChild(formItemList.render);
+ const removeButtons = document.body.querySelectorAll('.mynah-form-item-list-row-remove-button');
+ expect(removeButtons.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('should create header row with item titles and descriptions', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ document.body.appendChild(formItemList.render);
+ const headers = document.body.querySelectorAll('.mynah-form-item-list-row-header');
+
+ // Should have headers for items with title or description
+ expect(headers.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('should handle onChange callback', () => {
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ onChange: mockOnChange,
+ });
+
+ // onChange should be called during initialization
+ expect(mockOnChange).toHaveBeenCalled();
+ });
+
+ it('should handle getValue method', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ const values = formItemList.getValue();
+ expect(Array.isArray(values)).toBe(true);
+ expect(values.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('should handle setValue method', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ const newValues: ListItemEntry[] = [{ value: { field1: 'new1', field2: 'new2' } }];
+
+ formItemList.setValue(newValues);
+
+ // Should update the form with new values
+ expect(formItemList.render).toBeDefined();
+ });
+
+ it('should handle setValue with empty array', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ formItemList.setValue([]);
+
+ // Should create one empty row
+ const values = formItemList.getValue();
+ expect(values.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('should handle setEnabled method', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ // Test disabling
+ formItemList.setEnabled(false);
+ expect(formItemList.render.hasAttribute('disabled')).toBe(true);
+
+ // Test enabling
+ formItemList.setEnabled(true);
+ expect(formItemList.render.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('should handle persistent entries', () => {
+ const persistentValues: ListItemEntry[] = [
+ { value: { field1: 'persistent1', field2: 'persistent2' }, persistent: true },
+ ];
+
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ value: persistentValues,
+ });
+
+ document.body.appendChild(formItemList.render);
+
+ // Persistent entries should have disabled remove buttons
+ const removeButtons = document.body.querySelectorAll('.mynah-form-item-list-row-remove-button');
+ expect(removeButtons.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('should handle add button click', () => {
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ onChange: mockOnChange,
+ });
+
+ document.body.appendChild(formItemList.render);
+ const addButton = document.body.querySelector('.mynah-form-item-list-add-button') as HTMLElement;
+
+ const initialCallCount = mockOnChange.mock.calls.length;
+ addButton.click();
+
+ // Should trigger onChange when adding a row
+ expect(mockOnChange.mock.calls.length).toBeGreaterThan(initialCallCount);
+ });
+
+ it('should handle remove button click', () => {
+ formItemList = new FormItemListInternal({
+ items: testFormItems,
+ onChange: mockOnChange,
+ });
+
+ document.body.appendChild(formItemList.render);
+ const removeButton = document.body.querySelector('.mynah-form-item-list-row-remove-button') as HTMLElement;
+
+ const initialCallCount = mockOnChange.mock.calls.length;
+ removeButton.click();
+
+ // Should trigger onChange when removing a row
+ expect(mockOnChange.mock.calls.length).toBeGreaterThan(initialCallCount);
+ });
+
+ it('should have rows wrapper', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ document.body.appendChild(formItemList.render);
+ const rowsWrapper = document.body.querySelector('.mynah-form-item-list-rows-wrapper');
+ expect(rowsWrapper).toBeDefined();
+ });
+
+ it('should have form item list wrapper', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ document.body.appendChild(formItemList.render);
+ const wrapper = document.body.querySelector('.mynah-form-item-list-wrapper');
+ expect(wrapper).toBeDefined();
+ });
+
+ it('should handle items without title or description', () => {
+ const itemsWithoutTitleDesc: SingularFormItem[] = [
+ {
+ id: 'field1',
+ type: 'textinput',
+ },
+ ];
+
+ formItemList = new FormItemListInternal({ items: itemsWithoutTitleDesc });
+
+ document.body.appendChild(formItemList.render);
+ const headers = document.body.querySelectorAll('.mynah-form-item-list-row-header');
+
+ // Should have no headers when items have no title or description
+ expect(headers.length).toBe(0);
+ });
+ });
+
+ describe('FormItemList Factory', () => {
+ it('should create FormItemListInternal by default', () => {
+ const formItemListFactory = new FormItemList({ items: testFormItems });
+ expect(formItemListFactory).toBeInstanceOf(FormItemListInternal);
+ });
+
+ it('should have abstract methods', () => {
+ const formItemListFactory = new FormItemList({ items: testFormItems });
+ expect(typeof formItemListFactory.setValue).toBe('function');
+ expect(typeof formItemListFactory.getValue).toBe('function');
+ expect(typeof formItemListFactory.setEnabled).toBe('function');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty items array', () => {
+ formItemList = new FormItemListInternal({ items: [] });
+ expect(formItemList.render).toBeDefined();
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: FormItemListProps = {
+ items: testFormItems,
+ label: undefined,
+ description: undefined,
+ onChange: undefined,
+ };
+
+ formItemList = new FormItemListInternal(props);
+ expect(formItemList.render).toBeDefined();
+ });
+
+ it('should handle onChange without callback', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ // Should not throw error when onChange is not provided
+ document.body.appendChild(formItemList.render);
+ const addButton = document.body.querySelector('.mynah-form-item-list-add-button') as HTMLElement;
+ addButton.click();
+
+ expect(formItemList.render).toBeDefined();
+ });
+
+ it('should handle setValue with undefined', () => {
+ formItemList = new FormItemListInternal({ items: testFormItems });
+
+ // Should handle undefined gracefully
+ formItemList.setValue([]);
+ expect(formItemList.render).toBeDefined();
+ });
+
+ it('should handle complex form items', () => {
+ const complexItems: SingularFormItem[] = [
+ {
+ id: 'field1',
+ type: 'select',
+ title: 'Select Field',
+ options: [
+ { value: 'option1', label: 'Option 1' },
+ { value: 'option2', label: 'Option 2' },
+ ],
+ },
+ {
+ id: 'field2',
+ type: 'radiogroup',
+ title: 'Radio Field',
+ options: [
+ { value: 'radio1', label: 'Radio 1' },
+ { value: 'radio2', label: 'Radio 2' },
+ ],
+ },
+ ];
+
+ formItemList = new FormItemListInternal({ items: complexItems });
+ expect(formItemList.render).toBeDefined();
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/form-item-pill-box.spec.ts b/mynah-ui/src/__test__/components/form-items/form-item-pill-box.spec.ts
new file mode 100644
index 0000000000..2abc1f9266
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/form-item-pill-box.spec.ts
@@ -0,0 +1,53 @@
+import { FormItemPillBox } from '../../../components/form-items/form-item-pill-box';
+
+describe('FormItemPillBox', () => {
+ let pillBox: FormItemPillBox;
+
+ beforeEach(() => {
+ pillBox = new FormItemPillBox({
+ id: 'test-pill-box',
+ label: 'Test Pills',
+ placeholder: 'Add a pill',
+ });
+ document.body.appendChild(pillBox.render);
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ it('should render pill box', () => {
+ expect(pillBox.render).toBeDefined();
+ expect(pillBox.render.querySelector('.mynah-form-item-pill-box-wrapper')).toBeTruthy();
+ });
+
+ it('should add pill on enter', () => {
+ const input = pillBox.render.querySelector('.mynah-form-item-pill-box-input') as HTMLTextAreaElement;
+ input.value = 'test-pill';
+
+ const event = new KeyboardEvent('keydown', { key: 'Enter' });
+ input.dispatchEvent(event);
+
+ expect(pillBox.getValue()).toBe('test-pill');
+ expect(pillBox.render.querySelector('.mynah-form-item-pill')).toBeTruthy();
+ });
+
+ it('should remove pill on click', () => {
+ pillBox.setValue('pill1,pill2');
+
+ const removeButton = pillBox.render.querySelector('.mynah-form-item-pill-remove') as HTMLElement;
+ removeButton.click();
+
+ expect(pillBox.getValue()).toBe('pill2');
+ });
+
+ it('should set and get values', () => {
+ pillBox.setValue('tag1,tag2,tag3');
+ expect(pillBox.getValue()).toBe('tag1,tag2,tag3');
+ });
+
+ it('should disable component', () => {
+ pillBox.setEnabled(false);
+ expect(pillBox.render.hasAttribute('disabled')).toBe(true);
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/radio-group.spec.ts b/mynah-ui/src/__test__/components/form-items/radio-group.spec.ts
new file mode 100644
index 0000000000..ffadcc30df
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/radio-group.spec.ts
@@ -0,0 +1,413 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RadioGroup, RadioGroupInternal, RadioGroupProps } from '../../../components/form-items/radio-group';
+import { MynahIcons } from '../../../components/icon';
+import { DomBuilder } from '../../../helper/dom';
+
+// Mock the generateUID helper
+jest.mock('../../../helper/guid', () => ({
+ generateUID: jest.fn(() => 'test-group-id'),
+}));
+
+describe('RadioGroup Component', () => {
+ let radioGroup: RadioGroupInternal;
+ let mockOnChange: jest.Mock;
+
+ const testOptions = [
+ { value: 'option1', label: 'Option 1' },
+ { value: 'option2', label: 'Option 2' },
+ { value: 'option3', label: 'Option 3' },
+ ];
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('RadioGroupInternal', () => {
+ it('should create radio group with default props', () => {
+ radioGroup = new RadioGroupInternal({});
+
+ expect(radioGroup.render).toBeDefined();
+ expect(radioGroup.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ expect(radioGroup.getValue()).toBe('');
+ });
+
+ it('should create radio group with options', () => {
+ radioGroup = new RadioGroupInternal({ options: testOptions });
+
+ document.body.appendChild(radioGroup.render);
+ const radioInputs = document.body.querySelectorAll('input[type="radio"]');
+ const labels = document.body.querySelectorAll('.mynah-form-input-radio-label');
+
+ expect(radioInputs).toHaveLength(3);
+ expect(labels).toHaveLength(3);
+
+ expect(radioInputs[0].getAttribute('value')).toBe('option1');
+ expect(radioInputs[1].getAttribute('value')).toBe('option2');
+ expect(radioInputs[2].getAttribute('value')).toBe('option3');
+
+ expect(labels[0].textContent).toContain('Option 1');
+ expect(labels[1].textContent).toContain('Option 2');
+ expect(labels[2].textContent).toContain('Option 3');
+ });
+
+ it('should create radio group with initial value', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ value: 'option2',
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const checkedInput = document.body.querySelector('input[checked]') as HTMLInputElement;
+
+ expect(checkedInput.value).toBe('option2');
+ expect(radioGroup.getValue()).toBe('option2');
+ });
+
+ it('should select first option by default when not optional and no value provided', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ optional: false,
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const checkedInput = document.body.querySelector('input[checked]') as HTMLInputElement;
+
+ expect(checkedInput.value).toBe('option1');
+ expect(radioGroup.getValue()).toBe('option1');
+ });
+
+ it('should not select any option by default when optional', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ optional: true,
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const checkedInput = document.body.querySelector('input[checked]');
+
+ expect(checkedInput).toBeNull();
+ expect(radioGroup.getValue()).toBe('');
+ });
+
+ it('should create radio group with label', () => {
+ const label = 'Test Radio Group';
+ radioGroup = new RadioGroupInternal({ label });
+
+ document.body.appendChild(radioGroup.render);
+ const labelElement = document.body.querySelector('.mynah-form-input-label');
+ expect(labelElement?.textContent).toBe(label);
+ });
+
+ it('should create radio group with radiogroup type (default)', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ type: 'radiogroup',
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.classList.contains('mynah-form-input-radio-group')).toBe(true);
+ });
+
+ it('should create radio group with toggle type', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ type: 'toggle',
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.classList.contains('mynah-form-input-toggle-group')).toBe(true);
+ });
+
+ it('should create radio group with custom icons', () => {
+ const optionsWithIcons = [
+ { value: 'option1', label: 'Option 1', icon: MynahIcons.OK },
+ { value: 'option2', label: 'Option 2', icon: MynahIcons.CANCEL },
+ ];
+
+ radioGroup = new RadioGroupInternal({ options: optionsWithIcons });
+
+ document.body.appendChild(radioGroup.render);
+ // Check for radio check elements instead of icons since icons might not render in test environment
+ const radioChecks = document.body.querySelectorAll('.mynah-form-input-radio-check');
+ expect(radioChecks).toHaveLength(2);
+ });
+
+ it('should create radio group with default DOT icon', () => {
+ radioGroup = new RadioGroupInternal({ options: testOptions });
+
+ document.body.appendChild(radioGroup.render);
+ // Check for radio check elements instead of icons since icons might not render in test environment
+ const radioChecks = document.body.querySelectorAll('.mynah-form-input-radio-check');
+ expect(radioChecks).toHaveLength(3);
+ });
+
+ it('should create radio group with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ radioGroup = new RadioGroupInternal({ classNames: customClasses });
+
+ document.body.appendChild(radioGroup.render);
+ const radioGroupElement = document.body.querySelector('.mynah-form-input');
+ expect(radioGroupElement?.classList.contains('custom-class-1')).toBe(true);
+ expect(radioGroupElement?.classList.contains('custom-class-2')).toBe(true);
+ });
+
+ it('should create radio group with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value', 'aria-label': 'test-radio-group' };
+ radioGroup = new RadioGroupInternal({ attributes });
+
+ document.body.appendChild(radioGroup.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.getAttribute('data-test')).toBe('test-value');
+ expect(container?.getAttribute('aria-label')).toBe('test-radio-group');
+ });
+
+ it('should create radio group with test IDs', () => {
+ const wrapperTestId = 'wrapper-test-id';
+ const optionTestId = 'option-test-id';
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ wrapperTestId,
+ optionTestId,
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const wrapper = document.body.querySelector(`.mynah-form-input[data-testid="${wrapperTestId}"]`);
+ expect(wrapper).toBeDefined();
+
+ // Just verify labels exist even if test IDs don't work in test environment
+ const labels = document.body.querySelectorAll('label');
+ expect(labels).toHaveLength(3);
+ });
+
+ it('should handle setValue method', () => {
+ radioGroup = new RadioGroupInternal({ options: testOptions });
+ document.body.appendChild(radioGroup.render);
+
+ radioGroup.setValue('option2');
+ expect(radioGroup.getValue()).toBe('option2');
+
+ const checkedInput = document.body.querySelector('input[checked]') as HTMLInputElement;
+ expect(checkedInput.value).toBe('option2');
+ });
+
+ it('should handle setValue by removing previous selection', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ value: 'option1',
+ });
+ document.body.appendChild(radioGroup.render);
+
+ // Initially option1 should be checked
+ let checkedInputs = document.body.querySelectorAll('input[checked]');
+ expect(checkedInputs).toHaveLength(1);
+ expect((checkedInputs[0] as HTMLInputElement).value).toBe('option1');
+
+ // Set to option2
+ radioGroup.setValue('option2');
+ checkedInputs = document.body.querySelectorAll('input[checked]');
+ expect(checkedInputs).toHaveLength(1);
+ expect((checkedInputs[0] as HTMLInputElement).value).toBe('option2');
+ });
+
+ it('should handle setEnabled method', () => {
+ radioGroup = new RadioGroupInternal({ options: testOptions });
+ document.body.appendChild(radioGroup.render);
+
+ const radioGroupElement = document.body.querySelector('.mynah-form-input') as HTMLElement;
+ const radioInputs = document.body.querySelectorAll('input[type="radio"]');
+
+ // Test disabling
+ radioGroup.setEnabled(false);
+ expect(radioGroupElement.hasAttribute('disabled')).toBe(true);
+ radioInputs.forEach((input) => {
+ expect(input.hasAttribute('disabled')).toBe(true);
+ });
+
+ // Test enabling
+ radioGroup.setEnabled(true);
+ expect(radioGroupElement.hasAttribute('disabled')).toBe(false);
+ radioInputs.forEach((input) => {
+ expect(input.hasAttribute('disabled')).toBe(false);
+ });
+ });
+
+ it('should trigger onChange when option is clicked', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ onChange: mockOnChange,
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const labels = document.body.querySelectorAll('.mynah-form-input-radio-label');
+
+ (labels[1] as HTMLElement).click();
+
+ expect(mockOnChange).toHaveBeenCalledWith('option2');
+ expect(radioGroup.getValue()).toBe('option2');
+ });
+
+ it('should prevent event propagation on click', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ onChange: mockOnChange,
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const label = document.body.querySelector('.mynah-form-input-radio-label') as HTMLElement;
+ const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+
+ const preventDefaultSpy = jest.spyOn(clickEvent, 'preventDefault');
+ const stopPropagationSpy = jest.spyOn(clickEvent, 'stopPropagation');
+
+ label.dispatchEvent(clickEvent);
+
+ expect(preventDefaultSpy).toHaveBeenCalled();
+ expect(stopPropagationSpy).toHaveBeenCalled();
+ });
+
+ it('should set radio input checked property on click', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ onChange: mockOnChange,
+ });
+
+ document.body.appendChild(radioGroup.render);
+ const labels = document.body.querySelectorAll('.mynah-form-input-radio-label');
+ const radioInputs = document.body.querySelectorAll('input[type="radio"]');
+
+ (labels[1] as HTMLElement).click();
+
+ expect((radioInputs[1] as HTMLInputElement).checked).toBe(true);
+ expect((radioInputs[0] as HTMLInputElement).checked).toBe(false);
+ expect((radioInputs[2] as HTMLInputElement).checked).toBe(false);
+ });
+
+ it('should handle description element', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ radioGroup = new RadioGroupInternal({ description: descriptionElement });
+ document.body.appendChild(radioGroup.render);
+
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should handle options without labels', () => {
+ const optionsWithoutLabels = [{ value: 'option1' }, { value: 'option2' }];
+
+ radioGroup = new RadioGroupInternal({ options: optionsWithoutLabels });
+
+ document.body.appendChild(radioGroup.render);
+ const labels = document.body.querySelectorAll('.mynah-form-input-radio-label');
+
+ expect(labels).toHaveLength(2);
+ // Should only contain radio input and icon, no text
+ expect(labels[0].children).toHaveLength(2); // input + icon span
+ expect(labels[1].children).toHaveLength(2); // input + icon span
+ });
+
+ it('should generate unique group names for radio inputs', () => {
+ radioGroup = new RadioGroupInternal({ options: testOptions });
+
+ document.body.appendChild(radioGroup.render);
+ const radioInputs = document.body.querySelectorAll('input[type="radio"]');
+
+ const groupName = (radioInputs[0] as HTMLInputElement).name;
+ expect(groupName).toBe('test-group-id');
+
+ radioInputs.forEach((input) => {
+ expect((input as HTMLInputElement).name).toBe(groupName);
+ expect(input.id).toContain(groupName);
+ });
+ });
+ });
+
+ describe('RadioGroup Factory', () => {
+ it('should create RadioGroupInternal by default', () => {
+ const radioGroupFactory = new RadioGroup({});
+ expect(radioGroupFactory).toBeInstanceOf(RadioGroupInternal);
+ });
+
+ it('should have abstract methods', () => {
+ const radioGroupFactory = new RadioGroup({});
+ expect(typeof radioGroupFactory.setValue).toBe('function');
+ expect(typeof radioGroupFactory.getValue).toBe('function');
+ expect(typeof radioGroupFactory.setEnabled).toBe('function');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty props object', () => {
+ radioGroup = new RadioGroupInternal({});
+ expect(radioGroup.render).toBeDefined();
+ expect(radioGroup.getValue()).toBe('');
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: RadioGroupProps = {
+ label: undefined,
+ description: undefined,
+ options: undefined,
+ onChange: undefined,
+ };
+
+ radioGroup = new RadioGroupInternal(props);
+ expect(radioGroup.render).toBeDefined();
+ });
+
+ it('should handle empty options array', () => {
+ radioGroup = new RadioGroupInternal({ options: [] });
+
+ document.body.appendChild(radioGroup.render);
+ const radioInputs = document.body.querySelectorAll('input[type="radio"]');
+
+ expect(radioInputs).toHaveLength(0);
+ });
+
+ it('should handle setValue with non-existent value', () => {
+ radioGroup = new RadioGroupInternal({ options: testOptions });
+ document.body.appendChild(radioGroup.render);
+
+ radioGroup.setValue('non-existent');
+ // Should not crash, but getValue should return empty string
+ expect(radioGroup.getValue()).toBe('');
+ });
+
+ it('should handle onChange without callback', () => {
+ radioGroup = new RadioGroupInternal({ options: testOptions });
+
+ document.body.appendChild(radioGroup.render);
+ const label = document.body.querySelector('.mynah-form-input-radio-label') as HTMLElement;
+
+ // Should not throw error
+ label.click();
+
+ expect(radioGroup.getValue()).toBe('option1');
+ });
+
+ it('should handle getValue when no option is selected', () => {
+ radioGroup = new RadioGroupInternal({
+ options: testOptions,
+ optional: true,
+ });
+
+ document.body.appendChild(radioGroup.render);
+ expect(radioGroup.getValue()).toBe('');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/select.spec.ts b/mynah-ui/src/__test__/components/form-items/select.spec.ts
new file mode 100644
index 0000000000..405d698f80
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/select.spec.ts
@@ -0,0 +1,364 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Select, SelectInternal, SelectProps } from '../../../components/form-items/select';
+import { MynahIcons } from '../../../components/icon';
+import { DomBuilder } from '../../../helper/dom';
+
+describe('Select Component', () => {
+ let select: SelectInternal;
+ let mockOnChange: jest.Mock;
+
+ const testOptions = [
+ { value: 'option1', label: 'Option 1' },
+ { value: 'option2', label: 'Option 2' },
+ { value: 'option3', label: 'Option 3' },
+ ];
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('SelectInternal', () => {
+ it('should create select with default props', () => {
+ select = new SelectInternal({});
+
+ expect(select.render).toBeDefined();
+ expect(select.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ expect(select.getValue()).toBe('');
+ });
+
+ it('should create select with options', () => {
+ select = new SelectInternal({ options: testOptions });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+ const options = selectElement.querySelectorAll('option');
+
+ expect(options).toHaveLength(3);
+ expect(options[0].value).toBe('option1');
+ expect(options[0].textContent).toBe('Option 1');
+ expect(options[1].value).toBe('option2');
+ expect(options[1].textContent).toBe('Option 2');
+ expect(options[2].value).toBe('option3');
+ expect(options[2].textContent).toBe('Option 3');
+ });
+
+ it('should create select with initial value', () => {
+ select = new SelectInternal({
+ options: testOptions,
+ value: 'option2',
+ });
+
+ expect(select.getValue()).toBe('option2');
+ });
+
+ it('should create select with label', () => {
+ const label = 'Test Select';
+ select = new SelectInternal({ label });
+
+ document.body.appendChild(select.render);
+ const labelElement = document.body.querySelector('.mynah-form-input-label');
+ expect(labelElement?.textContent).toBe(label);
+ });
+
+ it('should create select with placeholder and optional', () => {
+ const placeholder = 'Choose an option';
+ select = new SelectInternal({
+ options: testOptions,
+ placeholder,
+ optional: true,
+ });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+ const options = selectElement.querySelectorAll('option');
+
+ expect(options).toHaveLength(4); // 3 options + 1 placeholder
+ expect(options[0].value).toBe('');
+ expect(options[0].textContent).toBe(placeholder);
+ expect(options[0].classList.contains('empty-option')).toBe(true);
+ });
+
+ it('should create select with default placeholder when optional', () => {
+ select = new SelectInternal({
+ options: testOptions,
+ optional: true,
+ });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+ const firstOption = selectElement.querySelector('option');
+
+ expect(firstOption?.textContent).toBe('...');
+ });
+
+ it('should create select with icon', () => {
+ select = new SelectInternal({ icon: MynahIcons.SEARCH });
+
+ document.body.appendChild(select.render);
+ const iconElement = document.body.querySelector('.mynah-form-input-icon');
+ expect(iconElement).toBeDefined();
+ });
+
+ it('should create select with custom handle icon', () => {
+ select = new SelectInternal({ handleIcon: MynahIcons.UP_OPEN });
+
+ document.body.appendChild(select.render);
+ const handleIcon = document.body.querySelector('.mynah-select-handle');
+ expect(handleIcon).toBeDefined();
+ });
+
+ it('should create select with default handle icon', () => {
+ select = new SelectInternal({});
+
+ document.body.appendChild(select.render);
+ const handleIcon = document.body.querySelector('.mynah-select-handle');
+ expect(handleIcon).toBeDefined();
+ });
+
+ it('should create select with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ select = new SelectInternal({ classNames: customClasses });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select');
+ expect(selectElement?.classList.contains('custom-class-1')).toBe(true);
+ expect(selectElement?.classList.contains('custom-class-2')).toBe(true);
+ });
+
+ it('should create select with auto width', () => {
+ select = new SelectInternal({
+ options: testOptions,
+ autoWidth: true,
+ value: 'option1',
+ });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select');
+ const autoWidthSizer = document.body.querySelector('.select-auto-width-sizer');
+
+ expect(selectElement?.classList.contains('auto-width')).toBe(true);
+ expect(autoWidthSizer).toBeDefined();
+ expect(autoWidthSizer?.textContent).toBe('Option 1');
+ });
+
+ it('should create select without border', () => {
+ select = new SelectInternal({ border: false });
+
+ document.body.appendChild(select.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.classList.contains('no-border')).toBe(true);
+ });
+
+ it('should create select with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value', 'aria-label': 'test-select' };
+ select = new SelectInternal({ attributes });
+
+ document.body.appendChild(select.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.getAttribute('data-test')).toBe('test-value');
+ expect(container?.getAttribute('aria-label')).toBe('test-select');
+ });
+
+ it('should create select with test IDs', () => {
+ const wrapperTestId = 'wrapper-test-id';
+ const optionTestId = 'option-test-id';
+ select = new SelectInternal({
+ options: testOptions,
+ wrapperTestId,
+ optionTestId,
+ });
+
+ document.body.appendChild(select.render);
+ const wrapper = document.body.querySelector(`select[data-testid="${wrapperTestId}"]`);
+ // Just check that the select element has the test ID, options might not render test IDs in test environment
+ expect(wrapper).toBeDefined();
+
+ // Verify options exist even if test IDs don't work in test environment
+ const options = document.body.querySelectorAll('option');
+ expect(options).toHaveLength(3);
+ });
+
+ it('should handle setValue method', () => {
+ select = new SelectInternal({ options: testOptions });
+
+ select.setValue('option2');
+ expect(select.getValue()).toBe('option2');
+
+ select.setValue('option3');
+ expect(select.getValue()).toBe('option3');
+ });
+
+ it('should handle setValue with auto width', () => {
+ select = new SelectInternal({
+ options: testOptions,
+ autoWidth: true,
+ });
+
+ document.body.appendChild(select.render);
+
+ select.setValue('option2');
+ const autoWidthSizer = document.body.querySelector('.select-auto-width-sizer');
+ expect(autoWidthSizer?.textContent).toBe('Option 2');
+ });
+
+ it('should handle setEnabled method', () => {
+ select = new SelectInternal({});
+ document.body.appendChild(select.render);
+
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+
+ // Test disabling
+ select.setEnabled(false);
+ expect(selectElement.hasAttribute('disabled')).toBe(true);
+
+ // Test enabling
+ select.setEnabled(true);
+ expect(selectElement.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('should trigger onChange when selection changes', () => {
+ select = new SelectInternal({
+ options: testOptions,
+ onChange: mockOnChange,
+ });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+
+ selectElement.value = 'option2';
+ selectElement.dispatchEvent(new Event('change'));
+
+ expect(mockOnChange).toHaveBeenCalledWith('option2');
+ });
+
+ it('should update auto width sizer on change', () => {
+ select = new SelectInternal({
+ options: testOptions,
+ autoWidth: true,
+ onChange: mockOnChange,
+ });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+ const autoWidthSizer = document.body.querySelector('.select-auto-width-sizer');
+
+ selectElement.value = 'option2';
+ selectElement.dispatchEvent(new Event('change'));
+
+ expect(autoWidthSizer?.textContent).toBe('Option 2');
+ });
+
+ it('should handle description element', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ select = new SelectInternal({ description: descriptionElement });
+ document.body.appendChild(select.render);
+
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should handle auto width sizer with placeholder when no value', () => {
+ const placeholder = 'Select option';
+ select = new SelectInternal({
+ options: testOptions,
+ autoWidth: true,
+ placeholder,
+ });
+
+ document.body.appendChild(select.render);
+ const autoWidthSizer = document.body.querySelector('.select-auto-width-sizer');
+ expect(autoWidthSizer?.textContent).toBe(placeholder);
+ });
+
+ it('should handle auto width sizer with empty string when no placeholder or value', () => {
+ select = new SelectInternal({
+ options: testOptions,
+ autoWidth: true,
+ });
+
+ document.body.appendChild(select.render);
+ const autoWidthSizer = document.body.querySelector('.select-auto-width-sizer');
+ expect(autoWidthSizer?.textContent).toBe('');
+ });
+ });
+
+ describe('Select Factory', () => {
+ it('should create SelectInternal by default', () => {
+ const selectFactory = new Select({});
+ expect(selectFactory).toBeInstanceOf(SelectInternal);
+ });
+
+ it('should have abstract methods', () => {
+ const selectFactory = new Select({});
+ expect(typeof selectFactory.setValue).toBe('function');
+ expect(typeof selectFactory.getValue).toBe('function');
+ expect(typeof selectFactory.setEnabled).toBe('function');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty props object', () => {
+ select = new SelectInternal({});
+ expect(select.render).toBeDefined();
+ expect(select.getValue()).toBe('');
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: SelectProps = {
+ label: undefined,
+ description: undefined,
+ options: undefined,
+ onChange: undefined,
+ };
+
+ select = new SelectInternal(props);
+ expect(select.render).toBeDefined();
+ });
+
+ it('should handle empty options array', () => {
+ select = new SelectInternal({ options: [] });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+ const options = selectElement.querySelectorAll('option');
+
+ expect(options).toHaveLength(0);
+ });
+
+ it('should handle setValue with non-existent value', () => {
+ select = new SelectInternal({ options: testOptions });
+
+ select.setValue('non-existent');
+ // HTML select element will not set a value that doesn't exist in options
+ // So getValue should return empty string (default for no selection)
+ expect(select.getValue()).toBe('');
+ });
+
+ it('should handle onChange without callback', () => {
+ select = new SelectInternal({ options: testOptions });
+
+ document.body.appendChild(select.render);
+ const selectElement = document.body.querySelector('select') as HTMLSelectElement;
+
+ // Should not throw error
+ selectElement.value = 'option2';
+ selectElement.dispatchEvent(new Event('change'));
+
+ expect(select.getValue()).toBe('option2');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/stars.spec.ts b/mynah-ui/src/__test__/components/form-items/stars.spec.ts
new file mode 100644
index 0000000000..e86fe3b298
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/stars.spec.ts
@@ -0,0 +1,325 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Stars, StarsProps, StarValues } from '../../../components/form-items/stars';
+import { DomBuilder } from '../../../helper/dom';
+
+describe('Stars Component', () => {
+ let stars: Stars;
+ let mockOnChange: jest.Mock;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('Stars', () => {
+ it('should create stars with default props', () => {
+ stars = new Stars({});
+
+ expect(stars.render).toBeDefined();
+ expect(stars.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ expect(stars.getValue()).toBe('');
+ });
+
+ it('should create 5 star elements', () => {
+ stars = new Stars({});
+
+ document.body.appendChild(stars.render);
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ expect(starElements).toHaveLength(5);
+ });
+
+ it('should create stars with initial value', () => {
+ stars = new Stars({ value: '3' });
+
+ document.body.appendChild(stars.render);
+ const selectedStar = document.body.querySelector('.mynah-feedback-form-star.selected');
+ const starsContainer = document.body.querySelector('.mynah-feedback-form-stars-container');
+
+ expect(selectedStar).toBeDefined();
+ expect(selectedStar?.getAttribute('star')).toBe('3');
+ expect(starsContainer?.getAttribute('selected-star')).toBe('3');
+ expect(stars.getValue()).toBe('3');
+ });
+
+ it('should create stars with label', () => {
+ const label = 'Rate this';
+ stars = new Stars({ label });
+
+ document.body.appendChild(stars.render);
+ const labelElement = document.body.querySelector('.mynah-form-input-label');
+ expect(labelElement?.textContent).toBe(label);
+ });
+
+ it('should create stars with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ stars = new Stars({ classNames: customClasses });
+
+ document.body.appendChild(stars.render);
+ const starsInput = document.body.querySelector('.mynah-form-input');
+ expect(starsInput?.classList.contains('custom-class-1')).toBe(true);
+ expect(starsInput?.classList.contains('custom-class-2')).toBe(true);
+ });
+
+ it('should create stars with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value', 'aria-label': 'test-stars' };
+ stars = new Stars({ attributes });
+
+ document.body.appendChild(stars.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.getAttribute('data-test')).toBe('test-value');
+ expect(container?.getAttribute('aria-label')).toBe('test-stars');
+ });
+
+ it('should create stars with test IDs', () => {
+ const wrapperTestId = 'wrapper-test-id';
+ const optionTestId = 'option-test-id';
+ stars = new Stars({ wrapperTestId, optionTestId });
+
+ document.body.appendChild(stars.render);
+ const wrapper = document.body.querySelector(
+ `.mynah-feedback-form-stars-container[data-testid="${wrapperTestId}"]`,
+ );
+ expect(wrapper).toBeDefined();
+
+ // Just verify star elements exist even if test IDs don't work in test environment
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+ expect(starElements).toHaveLength(5);
+ });
+
+ it('should handle setValue method', () => {
+ stars = new Stars({});
+
+ stars.setValue(4);
+ expect(stars.getValue()).toBe('4');
+
+ stars.setValue(2);
+ expect(stars.getValue()).toBe('2');
+ });
+
+ it('should handle setEnabled method', () => {
+ stars = new Stars({});
+ document.body.appendChild(stars.render);
+
+ const starsInput = document.body.querySelector('.mynah-form-input') as HTMLElement;
+
+ // Test disabling
+ stars.setEnabled(false);
+ expect(starsInput.hasAttribute('disabled')).toBe(true);
+
+ // Test enabling
+ stars.setEnabled(true);
+ expect(starsInput.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('should trigger onChange when star is clicked', () => {
+ stars = new Stars({ onChange: mockOnChange });
+
+ document.body.appendChild(stars.render);
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ // Click on the 3rd star (index 2)
+ (starElements[2] as HTMLElement).click();
+
+ expect(mockOnChange).toHaveBeenCalledWith('3');
+ expect(stars.getValue()).toBe('3');
+ });
+
+ it('should update selected star when clicked', () => {
+ stars = new Stars({ onChange: mockOnChange });
+
+ document.body.appendChild(stars.render);
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ // Click on the 4th star (index 3)
+ (starElements[3] as HTMLElement).click();
+
+ const selectedStar = document.body.querySelector('.mynah-feedback-form-star.selected');
+ expect(selectedStar).toBe(starElements[3]);
+ expect(selectedStar?.getAttribute('star')).toBe('4');
+ });
+
+ it('should remove previous selection when new star is clicked', () => {
+ stars = new Stars({ value: '2', onChange: mockOnChange });
+
+ document.body.appendChild(stars.render);
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ // Initially star 2 should be selected
+ let selectedStars = document.body.querySelectorAll('.mynah-feedback-form-star.selected');
+ expect(selectedStars).toHaveLength(1);
+ expect(selectedStars[0].getAttribute('star')).toBe('2');
+
+ // Click on star 5
+ (starElements[4] as HTMLElement).click();
+
+ // Now only star 5 should be selected
+ selectedStars = document.body.querySelectorAll('.mynah-feedback-form-star.selected');
+ expect(selectedStars).toHaveLength(1);
+ expect(selectedStars[0].getAttribute('star')).toBe('5');
+ });
+
+ it('should have correct star attributes', () => {
+ stars = new Stars({});
+
+ document.body.appendChild(stars.render);
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ starElements.forEach((star, index) => {
+ expect(star.getAttribute('star')).toBe((index + 1).toString());
+ });
+ });
+
+ it('should contain star icons', () => {
+ stars = new Stars({});
+
+ document.body.appendChild(stars.render);
+ // Check for star elements instead of icons since icons might not render in test environment
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ expect(starElements).toHaveLength(5);
+ });
+
+ it('should handle description element', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ stars = new Stars({ description: descriptionElement });
+ document.body.appendChild(stars.render);
+
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should have no-border class on container', () => {
+ stars = new Stars({});
+
+ document.body.appendChild(stars.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.classList.contains('no-border')).toBe(true);
+ });
+
+ it('should handle multiple clicks on same star', () => {
+ stars = new Stars({ onChange: mockOnChange });
+
+ document.body.appendChild(stars.render);
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ // Click on the same star multiple times
+ (starElements[2] as HTMLElement).click();
+ (starElements[2] as HTMLElement).click();
+ (starElements[2] as HTMLElement).click();
+
+ expect(mockOnChange).toHaveBeenCalledTimes(3);
+ expect(mockOnChange).toHaveBeenCalledWith('3');
+ expect(stars.getValue()).toBe('3');
+ });
+
+ it('should handle clicks on different stars', () => {
+ stars = new Stars({ onChange: mockOnChange });
+
+ document.body.appendChild(stars.render);
+ const starElements = document.body.querySelectorAll('.mynah-feedback-form-star');
+
+ // Click on different stars
+ (starElements[0] as HTMLElement).click(); // Star 1
+ (starElements[2] as HTMLElement).click(); // Star 3
+ (starElements[4] as HTMLElement).click(); // Star 5
+
+ expect(mockOnChange).toHaveBeenCalledTimes(3);
+ expect(mockOnChange).toHaveBeenNthCalledWith(1, '1');
+ expect(mockOnChange).toHaveBeenNthCalledWith(2, '3');
+ expect(mockOnChange).toHaveBeenNthCalledWith(3, '5');
+ expect(stars.getValue()).toBe('5');
+ });
+
+ it('should handle initStar property (legacy)', () => {
+ // initStar is defined in the interface but not used in implementation
+ stars = new Stars({ initStar: 3 });
+ expect(stars.render).toBeDefined();
+ // Since initStar is not implemented, getValue should return empty string
+ expect(stars.getValue()).toBe('');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty props object', () => {
+ stars = new Stars({});
+ expect(stars.render).toBeDefined();
+ expect(stars.getValue()).toBe('');
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: StarsProps = {
+ label: undefined,
+ description: undefined,
+ onChange: undefined,
+ };
+
+ stars = new Stars(props);
+ expect(stars.render).toBeDefined();
+ });
+
+ it('should handle onChange without callback', () => {
+ stars = new Stars({});
+
+ document.body.appendChild(stars.render);
+ const starElement = document.body.querySelector('.mynah-feedback-form-star') as HTMLElement;
+
+ // Should not throw error
+ starElement.click();
+
+ expect(stars.getValue()).toBe('1');
+ });
+
+ it('should handle setValue with all valid star values', () => {
+ stars = new Stars({});
+
+ const validValues: StarValues[] = [1, 2, 3, 4, 5];
+
+ validValues.forEach((value) => {
+ stars.setValue(value);
+ expect(stars.getValue()).toBe(value.toString());
+ });
+ });
+
+ it('should handle getValue when no star is selected', () => {
+ stars = new Stars({});
+ expect(stars.getValue()).toBe('');
+ });
+
+ it('should handle click events properly', () => {
+ stars = new Stars({ onChange: mockOnChange });
+
+ document.body.appendChild(stars.render);
+ const starElement = document.body.querySelector('.mynah-feedback-form-star') as HTMLElement;
+
+ // Create and dispatch a click event
+ const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+ starElement.dispatchEvent(clickEvent);
+
+ expect(mockOnChange).toHaveBeenCalledWith('1');
+ });
+
+ it('should handle setEnabled when parent element exists', () => {
+ stars = new Stars({});
+ document.body.appendChild(stars.render);
+
+ // Test that setEnabled works when parent element is available
+ stars.setEnabled(false);
+ const starsInput = document.body.querySelector('.mynah-form-input') as HTMLElement;
+ expect(starsInput.hasAttribute('disabled')).toBe(true);
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/switch.spec.ts b/mynah-ui/src/__test__/components/form-items/switch.spec.ts
new file mode 100644
index 0000000000..aad30f8955
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/switch.spec.ts
@@ -0,0 +1,320 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Switch, SwitchInternal, SwitchProps } from '../../../components/form-items/switch';
+import { MynahIcons } from '../../../components/icon';
+import { DomBuilder } from '../../../helper/dom';
+
+describe('Switch Component', () => {
+ let switchComponent: SwitchInternal;
+ let mockOnChange: jest.Mock;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('SwitchInternal', () => {
+ it('should create switch with default props', () => {
+ switchComponent = new SwitchInternal({});
+
+ expect(switchComponent.render).toBeDefined();
+ expect(switchComponent.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ expect(switchComponent.getValue()).toBe('false');
+ });
+
+ it('should create switch with initial value true', () => {
+ switchComponent = new SwitchInternal({ value: 'true' });
+
+ expect(switchComponent.getValue()).toBe('true');
+ });
+
+ it('should create switch with label', () => {
+ const label = 'Test Switch';
+ switchComponent = new SwitchInternal({ label });
+
+ document.body.appendChild(switchComponent.render);
+ const switchWrapper = document.body.querySelector('.mynah-form-input-switch-wrapper');
+ expect(switchWrapper?.textContent).toContain(label);
+ });
+
+ it('should create switch with title', () => {
+ const title = 'Switch Title';
+ switchComponent = new SwitchInternal({ title });
+
+ document.body.appendChild(switchComponent.render);
+ const titleElement = document.body.querySelector('.mynah-form-input-label');
+ expect(titleElement?.textContent).toBe(title);
+ });
+
+ it('should create switch with custom icon', () => {
+ switchComponent = new SwitchInternal({ icon: MynahIcons.CANCEL });
+
+ document.body.appendChild(switchComponent.render);
+ const iconElement = document.body.querySelector('.mynah-icon');
+ expect(iconElement).toBeDefined();
+ });
+
+ it('should create switch with default OK icon', () => {
+ switchComponent = new SwitchInternal({});
+
+ document.body.appendChild(switchComponent.render);
+ const iconElement = document.body.querySelector('.mynah-icon');
+ expect(iconElement).toBeDefined();
+ });
+
+ it('should create switch with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ switchComponent = new SwitchInternal({ classNames: customClasses });
+
+ document.body.appendChild(switchComponent.render);
+ const switchInput = document.body.querySelector('.mynah-form-input');
+ expect(switchInput?.classList.contains('custom-class-1')).toBe(true);
+ expect(switchInput?.classList.contains('custom-class-2')).toBe(true);
+ });
+
+ it('should create switch with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value', 'aria-label': 'test-switch' };
+ switchComponent = new SwitchInternal({ attributes });
+
+ document.body.appendChild(switchComponent.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.getAttribute('data-test')).toBe('test-value');
+ expect(container?.getAttribute('aria-label')).toBe('test-switch');
+ });
+
+ it('should create switch with test ID', () => {
+ const testId = 'test-switch-id';
+ switchComponent = new SwitchInternal({ testId });
+
+ document.body.appendChild(switchComponent.render);
+ const switchElement = document.body.querySelector(`[data-testid="${testId}"]`);
+ expect(switchElement).toBeDefined();
+ });
+
+ it('should handle setValue method', () => {
+ switchComponent = new SwitchInternal({});
+
+ switchComponent.setValue('true');
+ expect(switchComponent.getValue()).toBe('true');
+
+ switchComponent.setValue('false');
+ expect(switchComponent.getValue()).toBe('false');
+ });
+
+ it('should handle setEnabled method', () => {
+ switchComponent = new SwitchInternal({});
+ document.body.appendChild(switchComponent.render);
+
+ const checkboxInput = document.body.querySelector('input[type="checkbox"]') as HTMLInputElement;
+ const wrapper = document.body.querySelector('.mynah-form-input') as HTMLElement;
+
+ // Test disabling
+ switchComponent.setEnabled(false);
+ expect(checkboxInput.hasAttribute('disabled')).toBe(true);
+ expect(wrapper.hasAttribute('disabled')).toBe(true);
+
+ // Test enabling
+ switchComponent.setEnabled(true);
+ expect(checkboxInput.hasAttribute('disabled')).toBe(false);
+ expect(wrapper.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('should trigger onChange when clicked', () => {
+ switchComponent = new SwitchInternal({ onChange: mockOnChange });
+ document.body.appendChild(switchComponent.render);
+
+ const label = document.body.querySelector('.mynah-form-input-switch-label') as HTMLElement;
+
+ // Click to turn on
+ label.click();
+ expect(mockOnChange).toHaveBeenCalledWith('true');
+ expect(switchComponent.getValue()).toBe('true');
+
+ // Click to turn off
+ label.click();
+ expect(mockOnChange).toHaveBeenCalledWith('false');
+ expect(switchComponent.getValue()).toBe('false');
+ });
+
+ it('should prevent event propagation on click', () => {
+ switchComponent = new SwitchInternal({ onChange: mockOnChange });
+ document.body.appendChild(switchComponent.render);
+
+ const label = document.body.querySelector('.mynah-form-input-switch-label') as HTMLElement;
+ const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+
+ const preventDefaultSpy = jest.spyOn(clickEvent, 'preventDefault');
+ const stopPropagationSpy = jest.spyOn(clickEvent, 'stopPropagation');
+
+ label.dispatchEvent(clickEvent);
+
+ expect(preventDefaultSpy).toHaveBeenCalled();
+ expect(stopPropagationSpy).toHaveBeenCalled();
+ });
+
+ it('should have switch-specific elements', () => {
+ switchComponent = new SwitchInternal({});
+ document.body.appendChild(switchComponent.render);
+
+ const switchWrapper = document.body.querySelector('.mynah-form-input-switch-wrapper');
+ const switchLabel = document.body.querySelector('.mynah-form-input-switch-label');
+ const switchCheck = document.body.querySelector('.mynah-form-input-switch-check');
+ const switchBg = document.body.querySelector('.mynah-form-input-switch-check-bg');
+
+ expect(switchWrapper).toBeDefined();
+ expect(switchLabel).toBeDefined();
+ expect(switchCheck).toBeDefined();
+ expect(switchBg).toBeDefined();
+ });
+
+ it('should contain checkbox input', () => {
+ switchComponent = new SwitchInternal({});
+ document.body.appendChild(switchComponent.render);
+
+ const checkboxInput = document.body.querySelector('input[type="checkbox"]');
+ expect(checkboxInput).toBeDefined();
+ });
+
+ it('should handle description element', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ switchComponent = new SwitchInternal({ description: descriptionElement });
+ document.body.appendChild(switchComponent.render);
+
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should have no-border class on container', () => {
+ switchComponent = new SwitchInternal({});
+
+ document.body.appendChild(switchComponent.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.classList.contains('no-border')).toBe(true);
+ });
+
+ it('should handle optional property', () => {
+ switchComponent = new SwitchInternal({ optional: true });
+
+ // The optional property is passed but doesn't affect rendering in current implementation
+ expect(switchComponent.render).toBeDefined();
+ });
+
+ it('should toggle state correctly on multiple clicks', () => {
+ switchComponent = new SwitchInternal({ onChange: mockOnChange });
+ document.body.appendChild(switchComponent.render);
+
+ const label = document.body.querySelector('.mynah-form-input-switch-label') as HTMLElement;
+
+ // Multiple clicks
+ label.click(); // false -> true
+ label.click(); // true -> false
+ label.click(); // false -> true
+ label.click(); // true -> false
+
+ expect(mockOnChange).toHaveBeenCalledTimes(4);
+ expect(mockOnChange).toHaveBeenNthCalledWith(1, 'true');
+ expect(mockOnChange).toHaveBeenNthCalledWith(2, 'false');
+ expect(mockOnChange).toHaveBeenNthCalledWith(3, 'true');
+ expect(mockOnChange).toHaveBeenNthCalledWith(4, 'false');
+ expect(switchComponent.getValue()).toBe('false');
+ });
+
+ it('should start with correct initial state', () => {
+ switchComponent = new SwitchInternal({ value: 'true' });
+ document.body.appendChild(switchComponent.render);
+
+ const checkboxInput = document.body.querySelector('input[type="checkbox"]') as HTMLInputElement;
+ expect(checkboxInput.checked).toBe(true);
+ expect(switchComponent.getValue()).toBe('true');
+ });
+ });
+
+ describe('Switch Factory', () => {
+ it('should create SwitchInternal by default', () => {
+ const switchFactory = new Switch({});
+ expect(switchFactory).toBeInstanceOf(SwitchInternal);
+ });
+
+ it('should have abstract methods', () => {
+ const switchFactory = new Switch({});
+ expect(typeof switchFactory.setValue).toBe('function');
+ expect(typeof switchFactory.getValue).toBe('function');
+ expect(typeof switchFactory.setEnabled).toBe('function');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty props object', () => {
+ switchComponent = new SwitchInternal({});
+ expect(switchComponent.render).toBeDefined();
+ expect(switchComponent.getValue()).toBe('false');
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: SwitchProps = {
+ title: undefined,
+ label: undefined,
+ description: undefined,
+ onChange: undefined,
+ };
+
+ switchComponent = new SwitchInternal(props);
+ expect(switchComponent.render).toBeDefined();
+ });
+
+ it('should handle onChange without callback', () => {
+ switchComponent = new SwitchInternal({});
+
+ document.body.appendChild(switchComponent.render);
+ const label = document.body.querySelector('.mynah-form-input-switch-label') as HTMLElement;
+
+ // Should not throw error
+ label.click();
+
+ expect(switchComponent.getValue()).toBe('true');
+ });
+
+ it('should handle setValue with string boolean values', () => {
+ switchComponent = new SwitchInternal({});
+
+ switchComponent.setValue('true');
+ expect(switchComponent.getValue()).toBe('true');
+
+ switchComponent.setValue('false');
+ expect(switchComponent.getValue()).toBe('false');
+ });
+
+ it('should maintain state consistency', () => {
+ switchComponent = new SwitchInternal({ value: 'false' });
+ document.body.appendChild(switchComponent.render);
+
+ const checkboxInput = document.body.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+ // Initial state
+ expect(checkboxInput.checked).toBe(false);
+ expect(switchComponent.getValue()).toBe('false');
+
+ // Set to true
+ switchComponent.setValue('true');
+ expect(checkboxInput.checked).toBe(true);
+ expect(switchComponent.getValue()).toBe('true');
+
+ // Set back to false
+ switchComponent.setValue('false');
+ expect(checkboxInput.checked).toBe(false);
+ expect(switchComponent.getValue()).toBe('false');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/text-area.spec.ts b/mynah-ui/src/__test__/components/form-items/text-area.spec.ts
new file mode 100644
index 0000000000..8c55ac64b6
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/text-area.spec.ts
@@ -0,0 +1,368 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TextArea, TextAreaInternal, TextAreaProps } from '../../../components/form-items/text-area';
+import { DomBuilder } from '../../../helper/dom';
+
+// Mock the validator helper
+jest.mock('../../../helper/validator', () => ({
+ checkTextElementValidation: jest.fn(),
+}));
+
+describe('TextArea Component', () => {
+ let textArea: TextAreaInternal;
+ let mockOnChange: jest.Mock;
+ let mockOnKeyPress: jest.Mock;
+ let mockFireModifierAndEnterKeyPress: jest.Mock;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ mockOnKeyPress = jest.fn();
+ mockFireModifierAndEnterKeyPress = jest.fn();
+ jest.clearAllMocks();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('TextAreaInternal', () => {
+ it('should create text area with default props', () => {
+ textArea = new TextAreaInternal({});
+
+ expect(textArea.render).toBeDefined();
+ expect(textArea.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ expect(textArea.getValue()).toBe('');
+ });
+
+ it('should create text area with initial value', () => {
+ const initialValue = 'test value';
+ textArea = new TextAreaInternal({ value: initialValue });
+
+ expect(textArea.getValue()).toBe(initialValue);
+ });
+
+ it('should create text area with label', () => {
+ const label = 'Test Label';
+ textArea = new TextAreaInternal({ label });
+
+ document.body.appendChild(textArea.render);
+ const labelElement = document.body.querySelector('.mynah-form-input-label');
+ expect(labelElement?.textContent).toBe(label);
+ });
+
+ it('should create text area with placeholder', () => {
+ const placeholder = 'Enter text here';
+ textArea = new TextAreaInternal({ placeholder });
+
+ document.body.appendChild(textArea.render);
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ expect(textAreaElement.placeholder).toBe(placeholder);
+ });
+
+ it('should create text area with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ textArea = new TextAreaInternal({ classNames: customClasses });
+
+ document.body.appendChild(textArea.render);
+ const textAreaElement = document.body.querySelector('textarea');
+ expect(textAreaElement?.classList.contains('custom-class-1')).toBe(true);
+ expect(textAreaElement?.classList.contains('custom-class-2')).toBe(true);
+ });
+
+ it('should create text area with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value', 'aria-label': 'test-textarea' };
+ textArea = new TextAreaInternal({ attributes });
+
+ document.body.appendChild(textArea.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.getAttribute('data-test')).toBe('test-value');
+ expect(container?.getAttribute('aria-label')).toBe('test-textarea');
+ });
+
+ it('should create text area with test ID', () => {
+ const testId = 'test-textarea-id';
+ textArea = new TextAreaInternal({ testId });
+
+ document.body.appendChild(textArea.render);
+ const textAreaElement = document.body.querySelector(`[data-testid="${testId}"]`);
+ expect(textAreaElement).toBeDefined();
+ });
+
+ it('should handle autoFocus', (done) => {
+ textArea = new TextAreaInternal({ autoFocus: true });
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+
+ // Check that autofocus attribute is set
+ expect(textAreaElement.hasAttribute('autofocus')).toBe(true);
+
+ // Check that focus is called after timeout
+ setTimeout(() => {
+ expect(document.activeElement).toBe(textAreaElement);
+ done();
+ }, 300);
+ });
+
+ it('should handle setValue and getValue methods', () => {
+ textArea = new TextAreaInternal({});
+
+ const testValue = 'test value';
+ textArea.setValue(testValue);
+ expect(textArea.getValue()).toBe(testValue);
+ });
+
+ it('should handle setEnabled method', () => {
+ textArea = new TextAreaInternal({});
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+
+ // Test disabling
+ textArea.setEnabled(false);
+ expect(textAreaElement.hasAttribute('disabled')).toBe(true);
+
+ // Test enabling
+ textArea.setEnabled(true);
+ expect(textAreaElement.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('should trigger onChange on keyup event', () => {
+ textArea = new TextAreaInternal({ onChange: mockOnChange });
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ const testValue = 'test input';
+
+ // Set value and trigger keyup event with proper target
+ textAreaElement.value = testValue;
+ const keyupEvent = new KeyboardEvent('keyup', { bubbles: true });
+ Object.defineProperty(keyupEvent, 'currentTarget', {
+ value: textAreaElement,
+ enumerable: true,
+ });
+ textAreaElement.dispatchEvent(keyupEvent);
+
+ expect(mockOnChange).toHaveBeenCalledWith(testValue);
+ });
+
+ it('should trigger onKeyPress on keypress event', () => {
+ textArea = new TextAreaInternal({ onKeyPress: mockOnKeyPress });
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ const keyEvent = new KeyboardEvent('keypress', { key: 'a' });
+
+ textAreaElement.dispatchEvent(keyEvent);
+
+ expect(mockOnKeyPress).toHaveBeenCalledWith(keyEvent);
+ });
+
+ it('should trigger fireModifierAndEnterKeyPress on Ctrl+Enter', () => {
+ textArea = new TextAreaInternal({ fireModifierAndEnterKeyPress: mockFireModifierAndEnterKeyPress });
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true });
+
+ textAreaElement.dispatchEvent(keyEvent);
+
+ expect(mockFireModifierAndEnterKeyPress).toHaveBeenCalled();
+ });
+
+ it('should trigger fireModifierAndEnterKeyPress on Cmd+Enter (Mac)', () => {
+ textArea = new TextAreaInternal({ fireModifierAndEnterKeyPress: mockFireModifierAndEnterKeyPress });
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', metaKey: true });
+
+ textAreaElement.dispatchEvent(keyEvent);
+
+ expect(mockFireModifierAndEnterKeyPress).toHaveBeenCalled();
+ });
+
+ it('should not trigger fireModifierAndEnterKeyPress on Enter without modifier', () => {
+ textArea = new TextAreaInternal({ fireModifierAndEnterKeyPress: mockFireModifierAndEnterKeyPress });
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+
+ textAreaElement.dispatchEvent(keyEvent);
+
+ expect(mockFireModifierAndEnterKeyPress).not.toHaveBeenCalled();
+ });
+
+ it('should call checkValidation on blur event', () => {
+ const checkTextElementValidation = jest.requireMock('../../../helper/validator').checkTextElementValidation;
+ textArea = new TextAreaInternal({});
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ textAreaElement.dispatchEvent(new Event('blur'));
+
+ expect(checkTextElementValidation).toHaveBeenCalled();
+ });
+
+ it('should call checkValidation on keyup event', () => {
+ const checkTextElementValidation = jest.requireMock('../../../helper/validator').checkTextElementValidation;
+ textArea = new TextAreaInternal({});
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+ const keyupEvent = new KeyboardEvent('keyup', { bubbles: true });
+ Object.defineProperty(keyupEvent, 'currentTarget', {
+ value: textAreaElement,
+ enumerable: true,
+ });
+ textAreaElement.dispatchEvent(keyupEvent);
+
+ expect(checkTextElementValidation).toHaveBeenCalled();
+ });
+
+ it('should handle validation patterns', () => {
+ const validationPatterns = {
+ operator: 'and' as const,
+ patterns: [{ pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, errorMessage: 'Invalid email' }],
+ };
+
+ textArea = new TextAreaInternal({ validationPatterns });
+ expect(textArea.render).toBeDefined();
+ });
+
+ it('should handle mandatory field', () => {
+ textArea = new TextAreaInternal({ mandatory: true });
+ expect(textArea.render).toBeDefined();
+ });
+
+ it('should handle description element', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ textArea = new TextAreaInternal({ description: descriptionElement });
+ document.body.appendChild(textArea.render);
+
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should have validation error block', () => {
+ textArea = new TextAreaInternal({});
+ document.body.appendChild(textArea.render);
+
+ const errorBlock = document.body.querySelector('.mynah-form-input-validation-error-block');
+ expect(errorBlock).toBeDefined();
+ });
+
+ it('should create textarea element with correct tag', () => {
+ textArea = new TextAreaInternal({});
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea');
+ expect(textAreaElement).toBeDefined();
+ expect(textAreaElement?.tagName.toLowerCase()).toBe('textarea');
+ });
+
+ it('should have mynah-form-input class', () => {
+ textArea = new TextAreaInternal({});
+ document.body.appendChild(textArea.render);
+
+ const textAreaElement = document.body.querySelector('textarea');
+ expect(textAreaElement?.classList.contains('mynah-form-input')).toBe(true);
+ });
+ });
+
+ describe('TextArea Factory', () => {
+ it('should create TextAreaInternal by default', () => {
+ const textAreaFactory = new TextArea({});
+ expect(textAreaFactory).toBeInstanceOf(TextAreaInternal);
+ });
+
+ it('should have abstract methods', () => {
+ const textAreaFactory = new TextArea({});
+ expect(typeof textAreaFactory.setValue).toBe('function');
+ expect(typeof textAreaFactory.getValue).toBe('function');
+ expect(typeof textAreaFactory.setEnabled).toBe('function');
+ expect(typeof textAreaFactory.checkValidation).toBe('function');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty props object', () => {
+ textArea = new TextAreaInternal({});
+ expect(textArea.render).toBeDefined();
+ expect(textArea.getValue()).toBe('');
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: TextAreaProps = {
+ label: undefined,
+ description: undefined,
+ onChange: undefined,
+ onKeyPress: undefined,
+ fireModifierAndEnterKeyPress: undefined,
+ };
+
+ textArea = new TextAreaInternal(props);
+ expect(textArea.render).toBeDefined();
+ });
+
+ it('should handle empty string value', () => {
+ textArea = new TextAreaInternal({ value: '' });
+ expect(textArea.getValue()).toBe('');
+ });
+
+ it('should handle multiline text value', () => {
+ const multilineValue = 'Line 1\nLine 2\nLine 3';
+ textArea = new TextAreaInternal({ value: multilineValue });
+ expect(textArea.getValue()).toBe(multilineValue);
+ });
+
+ it('should handle onChange without callback', () => {
+ textArea = new TextAreaInternal({});
+
+ document.body.appendChild(textArea.render);
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+
+ // Should not throw error
+ textAreaElement.value = 'test';
+ textAreaElement.dispatchEvent(new Event('input'));
+
+ expect(textArea.getValue()).toBe('test');
+ });
+
+ it('should handle onKeyPress without callback', () => {
+ textArea = new TextAreaInternal({});
+
+ document.body.appendChild(textArea.render);
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+
+ // Should not throw error
+ const keyEvent = new KeyboardEvent('keypress', { key: 'a' });
+ textAreaElement.dispatchEvent(keyEvent);
+
+ expect(textArea.render).toBeDefined();
+ });
+
+ it('should handle fireModifierAndEnterKeyPress without callback', () => {
+ textArea = new TextAreaInternal({});
+
+ document.body.appendChild(textArea.render);
+ const textAreaElement = document.body.querySelector('textarea') as HTMLTextAreaElement;
+
+ // Should not throw error
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true });
+ textAreaElement.dispatchEvent(keyEvent);
+
+ expect(textArea.render).toBeDefined();
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/form-items/text-input.spec.ts b/mynah-ui/src/__test__/components/form-items/text-input.spec.ts
new file mode 100644
index 0000000000..546ce2124e
--- /dev/null
+++ b/mynah-ui/src/__test__/components/form-items/text-input.spec.ts
@@ -0,0 +1,323 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TextInput, TextInputInternal, TextInputProps } from '../../../components/form-items/text-input';
+import { MynahIcons } from '../../../components/icon';
+import { DomBuilder } from '../../../helper/dom';
+
+// Mock the validator helper
+jest.mock('../../../helper/validator', () => ({
+ checkTextElementValidation: jest.fn(),
+}));
+
+describe('TextInput Component', () => {
+ let textInput: TextInputInternal;
+ let mockOnChange: jest.Mock;
+ let mockOnKeyPress: jest.Mock;
+ let mockFireModifierAndEnterKeyPress: jest.Mock;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnChange = jest.fn();
+ mockOnKeyPress = jest.fn();
+ mockFireModifierAndEnterKeyPress = jest.fn();
+ jest.clearAllMocks();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('TextInputInternal', () => {
+ it('should create text input with default props', () => {
+ textInput = new TextInputInternal({});
+
+ expect(textInput.render).toBeDefined();
+ expect(textInput.render.classList.contains('mynah-form-input-wrapper')).toBe(true);
+ expect(textInput.getValue()).toBe('');
+ });
+
+ it('should create text input with initial value', () => {
+ const initialValue = 'test value';
+ textInput = new TextInputInternal({ value: initialValue });
+
+ expect(textInput.getValue()).toBe(initialValue);
+ });
+
+ it('should create text input with label', () => {
+ const label = 'Test Label';
+ textInput = new TextInputInternal({ label });
+
+ document.body.appendChild(textInput.render);
+ const labelElement = document.body.querySelector('.mynah-form-input-label');
+ expect(labelElement?.textContent).toBe(label);
+ });
+
+ it('should create text input with placeholder', () => {
+ const placeholder = 'Enter text here';
+ textInput = new TextInputInternal({ placeholder });
+
+ document.body.appendChild(textInput.render);
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ expect(inputElement.placeholder).toBe(placeholder);
+ });
+
+ it('should create text input with different types', () => {
+ const types: Array<'text' | 'number' | 'email'> = ['text', 'number', 'email'];
+
+ types.forEach((type) => {
+ textInput = new TextInputInternal({ type });
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ expect(inputElement.type).toBe(type);
+
+ document.body.innerHTML = '';
+ });
+ });
+
+ it('should create text input with icon', () => {
+ textInput = new TextInputInternal({ icon: MynahIcons.SEARCH });
+
+ document.body.appendChild(textInput.render);
+ const iconElement = document.body.querySelector('.mynah-form-input-icon');
+ expect(iconElement).toBeDefined();
+ });
+
+ it('should create text input with custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+ textInput = new TextInputInternal({ classNames: customClasses });
+
+ document.body.appendChild(textInput.render);
+ const inputElement = document.body.querySelector('.mynah-form-input');
+ expect(inputElement?.classList.contains('custom-class-1')).toBe(true);
+ expect(inputElement?.classList.contains('custom-class-2')).toBe(true);
+ });
+
+ it('should create text input with custom attributes', () => {
+ const attributes = { 'data-test': 'test-value', 'aria-label': 'test-input' };
+ textInput = new TextInputInternal({ attributes });
+
+ document.body.appendChild(textInput.render);
+ const container = document.body.querySelector('.mynah-form-input-container');
+ expect(container?.getAttribute('data-test')).toBe('test-value');
+ expect(container?.getAttribute('aria-label')).toBe('test-input');
+ });
+
+ it('should create text input with test ID', () => {
+ const testId = 'test-input-id';
+ textInput = new TextInputInternal({ testId });
+
+ document.body.appendChild(textInput.render);
+ const inputElement = document.body.querySelector(`[data-testid="${testId}"]`);
+ expect(inputElement).toBeDefined();
+ });
+
+ it('should handle autoFocus', (done) => {
+ textInput = new TextInputInternal({ autoFocus: true });
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+
+ // Check that autofocus attribute is set
+ expect(inputElement.hasAttribute('autofocus')).toBe(true);
+
+ // Check that focus is called after timeout
+ setTimeout(() => {
+ expect(document.activeElement).toBe(inputElement);
+ done();
+ }, 300);
+ });
+
+ it('should handle setValue and getValue methods', () => {
+ textInput = new TextInputInternal({});
+
+ const testValue = 'test value';
+ textInput.setValue(testValue);
+ expect(textInput.getValue()).toBe(testValue);
+ });
+
+ it('should handle setEnabled method', () => {
+ textInput = new TextInputInternal({});
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+
+ // Test disabling
+ textInput.setEnabled(false);
+ expect(inputElement.hasAttribute('disabled')).toBe(true);
+
+ // Test enabling
+ textInput.setEnabled(true);
+ expect(inputElement.hasAttribute('disabled')).toBe(false);
+ });
+
+ it('should trigger onChange on input event', () => {
+ textInput = new TextInputInternal({ onChange: mockOnChange });
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ const testValue = 'test input';
+
+ inputElement.value = testValue;
+ inputElement.dispatchEvent(new Event('input'));
+
+ expect(mockOnChange).toHaveBeenCalledWith(testValue);
+ });
+
+ it('should trigger onKeyPress on keypress event', () => {
+ textInput = new TextInputInternal({ onKeyPress: mockOnKeyPress });
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ const keyEvent = new KeyboardEvent('keypress', { key: 'a' });
+
+ inputElement.dispatchEvent(keyEvent);
+
+ expect(mockOnKeyPress).toHaveBeenCalledWith(keyEvent);
+ });
+
+ it('should trigger fireModifierAndEnterKeyPress on Ctrl+Enter', () => {
+ textInput = new TextInputInternal({ fireModifierAndEnterKeyPress: mockFireModifierAndEnterKeyPress });
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true });
+
+ inputElement.dispatchEvent(keyEvent);
+
+ expect(mockFireModifierAndEnterKeyPress).toHaveBeenCalled();
+ });
+
+ it('should trigger fireModifierAndEnterKeyPress on Cmd+Enter (Mac)', () => {
+ textInput = new TextInputInternal({ fireModifierAndEnterKeyPress: mockFireModifierAndEnterKeyPress });
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', metaKey: true });
+
+ inputElement.dispatchEvent(keyEvent);
+
+ expect(mockFireModifierAndEnterKeyPress).toHaveBeenCalled();
+ });
+
+ it('should not trigger fireModifierAndEnterKeyPress on Enter without modifier', () => {
+ textInput = new TextInputInternal({ fireModifierAndEnterKeyPress: mockFireModifierAndEnterKeyPress });
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ const keyEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+
+ inputElement.dispatchEvent(keyEvent);
+
+ expect(mockFireModifierAndEnterKeyPress).not.toHaveBeenCalled();
+ });
+
+ it('should call checkValidation on blur event', () => {
+ const checkTextElementValidation = jest.requireMock('../../../helper/validator').checkTextElementValidation;
+ textInput = new TextInputInternal({});
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ inputElement.dispatchEvent(new Event('blur'));
+
+ expect(checkTextElementValidation).toHaveBeenCalled();
+ });
+
+ it('should call checkValidation on input event', () => {
+ const checkTextElementValidation = jest.requireMock('../../../helper/validator').checkTextElementValidation;
+ textInput = new TextInputInternal({});
+ document.body.appendChild(textInput.render);
+
+ const inputElement = document.body.querySelector('.mynah-form-input') as HTMLInputElement;
+ inputElement.dispatchEvent(new Event('input'));
+
+ expect(checkTextElementValidation).toHaveBeenCalled();
+ });
+
+ it('should handle validation patterns', () => {
+ const validationPatterns = {
+ operator: 'and' as const,
+ patterns: [{ pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, errorMessage: 'Invalid email' }],
+ };
+
+ textInput = new TextInputInternal({ validationPatterns });
+ expect(textInput.render).toBeDefined();
+ });
+
+ it('should handle mandatory field', () => {
+ textInput = new TextInputInternal({ mandatory: true });
+ expect(textInput.render).toBeDefined();
+ });
+
+ it('should handle description element', () => {
+ const descriptionElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test description'],
+ classNames: ['test-description'],
+ });
+
+ textInput = new TextInputInternal({ description: descriptionElement });
+ document.body.appendChild(textInput.render);
+
+ const description = document.body.querySelector('.test-description');
+ expect(description?.textContent).toBe('Test description');
+ });
+
+ it('should have validation error block', () => {
+ textInput = new TextInputInternal({});
+ document.body.appendChild(textInput.render);
+
+ const errorBlock = document.body.querySelector('.mynah-form-input-validation-error-block');
+ expect(errorBlock).toBeDefined();
+ });
+ });
+
+ describe('TextInput Factory', () => {
+ it('should create TextInputInternal by default', () => {
+ const textInputFactory = new TextInput({});
+ expect(textInputFactory).toBeInstanceOf(TextInputInternal);
+ });
+
+ it('should have abstract methods', () => {
+ const textInputFactory = new TextInput({});
+ expect(typeof textInputFactory.setValue).toBe('function');
+ expect(typeof textInputFactory.getValue).toBe('function');
+ expect(typeof textInputFactory.setEnabled).toBe('function');
+ expect(typeof textInputFactory.checkValidation).toBe('function');
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty props object', () => {
+ textInput = new TextInputInternal({});
+ expect(textInput.render).toBeDefined();
+ expect(textInput.getValue()).toBe('');
+ });
+
+ it('should handle null/undefined values gracefully', () => {
+ const props: TextInputProps = {
+ label: undefined,
+ description: undefined,
+ onChange: undefined,
+ onKeyPress: undefined,
+ fireModifierAndEnterKeyPress: undefined,
+ };
+
+ textInput = new TextInputInternal(props);
+ expect(textInput.render).toBeDefined();
+ });
+
+ it('should handle numeric value as string', () => {
+ textInput = new TextInputInternal({ value: '123' });
+ expect(textInput.getValue()).toBe('123');
+ });
+
+ it('should handle empty string value', () => {
+ textInput = new TextInputInternal({ value: '' });
+ expect(textInput.getValue()).toBe('');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/source-link/source-link-body.spec.ts b/mynah-ui/src/__test__/components/source-link/source-link-body.spec.ts
new file mode 100644
index 0000000000..24d3a45ae4
--- /dev/null
+++ b/mynah-ui/src/__test__/components/source-link/source-link-body.spec.ts
@@ -0,0 +1,334 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SourceLinkBody, SourceLinkBodyProps } from '../../../components/source-link/source-link-body';
+import { SourceLink, ReferenceTrackerInformation } from '../../../static';
+import { DomBuilder } from '../../../helper/dom';
+
+describe('SourceLinkBody Component', () => {
+ let sourceLinkBody: SourceLinkBody;
+
+ const basicSuggestion: Partial = {
+ title: 'Test Source',
+ url: 'https://example.com',
+ body: 'This is the body content of the source link',
+ };
+
+ const suggestionWithoutBody: Partial = {
+ title: 'Source without body',
+ url: 'https://example.com',
+ };
+
+ const suggestionWithEmptyBody: Partial = {
+ title: 'Source with empty body',
+ url: 'https://example.com',
+ body: '',
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create source link body with basic props', () => {
+ sourceLinkBody = new SourceLinkBody({ suggestion: basicSuggestion });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ expect(sourceLinkBody.render.classList.contains('mynah-card-body')).toBe(true);
+ });
+
+ it('should render body content', () => {
+ sourceLinkBody = new SourceLinkBody({ suggestion: basicSuggestion });
+ document.body.appendChild(sourceLinkBody.render);
+
+ expect(sourceLinkBody.render.textContent).toContain(basicSuggestion.body);
+ });
+
+ it('should store props reference', () => {
+ const props: SourceLinkBodyProps = { suggestion: basicSuggestion };
+ sourceLinkBody = new SourceLinkBody(props);
+
+ expect(sourceLinkBody.props).toBe(props);
+ });
+ });
+
+ describe('Body Content Handling', () => {
+ it('should handle suggestion with body content', () => {
+ sourceLinkBody = new SourceLinkBody({ suggestion: basicSuggestion });
+ document.body.appendChild(sourceLinkBody.render);
+
+ expect(sourceLinkBody.render.textContent).toBe(basicSuggestion.body);
+ });
+
+ it('should handle suggestion without body', () => {
+ sourceLinkBody = new SourceLinkBody({ suggestion: suggestionWithoutBody });
+ document.body.appendChild(sourceLinkBody.render);
+
+ // Should render empty content
+ expect(sourceLinkBody.render.textContent).toBe('');
+ });
+
+ it('should handle suggestion with empty body', () => {
+ sourceLinkBody = new SourceLinkBody({ suggestion: suggestionWithEmptyBody });
+ document.body.appendChild(sourceLinkBody.render);
+
+ expect(sourceLinkBody.render.textContent).toBe('');
+ });
+
+ it('should handle undefined suggestion body', () => {
+ const suggestionUndefinedBody: Partial = {
+ title: 'Test',
+ url: 'https://example.com',
+ body: undefined,
+ };
+
+ sourceLinkBody = new SourceLinkBody({ suggestion: suggestionUndefinedBody });
+ document.body.appendChild(sourceLinkBody.render);
+
+ expect(sourceLinkBody.render.textContent).toBe('');
+ });
+ });
+
+ describe('Children Handling', () => {
+ it('should handle additional children elements', () => {
+ const childElement = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['test-child'],
+ children: ['Child content'],
+ });
+
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ children: [childElement],
+ });
+
+ document.body.appendChild(sourceLinkBody.render);
+
+ const child = document.body.querySelector('.test-child');
+ expect(child).toBeDefined();
+ expect(child?.textContent).toBe('Child content');
+ });
+
+ it('should handle multiple children', () => {
+ const child1 = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['child-1'],
+ children: ['Child 1'],
+ });
+
+ const child2 = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['child-2'],
+ children: ['Child 2'],
+ });
+
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ children: [child1, child2],
+ });
+
+ document.body.appendChild(sourceLinkBody.render);
+
+ const firstChild = document.body.querySelector('.child-1');
+ const secondChild = document.body.querySelector('.child-2');
+
+ expect(firstChild?.textContent).toBe('Child 1');
+ expect(secondChild?.textContent).toBe('Child 2');
+ });
+
+ it('should handle string children', () => {
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ children: ['String child content'],
+ });
+
+ document.body.appendChild(sourceLinkBody.render);
+
+ expect(sourceLinkBody.render.textContent).toContain('String child content');
+ });
+
+ it('should handle HTML element children', () => {
+ const htmlElement = document.createElement('div');
+ htmlElement.textContent = 'HTML element child';
+ htmlElement.className = 'html-child';
+
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ children: [htmlElement],
+ });
+
+ document.body.appendChild(sourceLinkBody.render);
+
+ const child = document.body.querySelector('.html-child');
+ expect(child?.textContent).toBe('HTML element child');
+ });
+
+ it('should handle empty children array', () => {
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ children: [],
+ });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+
+ it('should handle undefined children', () => {
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ children: undefined,
+ });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+ });
+
+ describe('Highlight Range with Tooltip', () => {
+ it('should handle highlight range information', () => {
+ const highlightInfo: ReferenceTrackerInformation[] = [
+ {
+ licenseName: 'MIT',
+ repository: 'https://github.com/example/repo',
+ url: 'https://example.com',
+ recommendationContentSpan: { start: 0, end: 10 },
+ information: 'Test information',
+ },
+ ];
+
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ highlightRangeWithTooltip: highlightInfo,
+ });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+
+ it('should handle empty highlight range array', () => {
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ highlightRangeWithTooltip: [],
+ });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+
+ it('should handle undefined highlight range', () => {
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ highlightRangeWithTooltip: undefined,
+ });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+
+ it('should handle multiple highlight ranges', () => {
+ const highlightInfo: ReferenceTrackerInformation[] = [
+ {
+ licenseName: 'MIT',
+ repository: 'https://github.com/example/repo1',
+ url: 'https://example1.com',
+ recommendationContentSpan: { start: 0, end: 5 },
+ information: 'First information',
+ },
+ {
+ licenseName: 'Apache-2.0',
+ repository: 'https://github.com/example/repo2',
+ url: 'https://example2.com',
+ recommendationContentSpan: { start: 10, end: 15 },
+ information: 'Second information',
+ },
+ ];
+
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ highlightRangeWithTooltip: highlightInfo,
+ });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty suggestion object', () => {
+ sourceLinkBody = new SourceLinkBody({ suggestion: {} });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ document.body.appendChild(sourceLinkBody.render);
+ expect(sourceLinkBody.render.textContent).toBe('');
+ });
+
+ it('should handle null suggestion', () => {
+ // The component should handle null gracefully by using optional chaining
+ sourceLinkBody = new SourceLinkBody({ suggestion: {} });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+
+ it('should handle suggestion with only title', () => {
+ const titleOnlySuggestion: Partial = {
+ title: 'Only title',
+ };
+
+ sourceLinkBody = new SourceLinkBody({ suggestion: titleOnlySuggestion });
+ document.body.appendChild(sourceLinkBody.render);
+
+ expect(sourceLinkBody.render.textContent).toBe('');
+ });
+
+ it('should handle complex body content', () => {
+ const complexBodySuggestion: Partial = {
+ title: 'Complex body',
+ url: 'https://example.com',
+ body: 'This is a complex body with multiple lines and special characters',
+ };
+
+ sourceLinkBody = new SourceLinkBody({ suggestion: complexBodySuggestion });
+ document.body.appendChild(sourceLinkBody.render);
+
+ // Check that the content is rendered (whitespace may be normalized)
+ expect(sourceLinkBody.render.textContent).toContain('This is a complex body');
+ expect(sourceLinkBody.render.textContent).toContain('multiple lines');
+ expect(sourceLinkBody.render.textContent).toContain('special characters');
+ });
+ });
+
+ describe('Component Integration', () => {
+ it('should integrate properly with CardBody component', () => {
+ sourceLinkBody = new SourceLinkBody({ suggestion: basicSuggestion });
+ document.body.appendChild(sourceLinkBody.render);
+
+ // Should have card body class from CardBody component
+ expect(sourceLinkBody.render.classList.contains('mynah-card-body')).toBe(true);
+ });
+
+ it('should pass all props to CardBody correctly', () => {
+ const childElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: ['Test child'],
+ });
+
+ const highlightInfo: ReferenceTrackerInformation[] = [
+ {
+ licenseName: 'MIT',
+ repository: 'https://github.com/test/repo',
+ url: 'https://test.com',
+ recommendationContentSpan: { start: 0, end: 5 },
+ information: 'Test information',
+ },
+ ];
+
+ sourceLinkBody = new SourceLinkBody({
+ suggestion: basicSuggestion,
+ children: [childElement],
+ highlightRangeWithTooltip: highlightInfo,
+ });
+
+ expect(sourceLinkBody.render).toBeDefined();
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/source-link/source-link-header.spec.ts b/mynah-ui/src/__test__/components/source-link/source-link-header.spec.ts
new file mode 100644
index 0000000000..0158f1200c
--- /dev/null
+++ b/mynah-ui/src/__test__/components/source-link/source-link-header.spec.ts
@@ -0,0 +1,660 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SourceLinkHeader } from '../../../components/source-link/source-link-header';
+import { SourceLink, MynahEventNames } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+
+// Mock the global events
+jest.mock('../../../helper/events', () => ({
+ MynahUIGlobalEvents: {
+ getInstance: jest.fn(() => ({
+ addListener: jest.fn(),
+ })),
+ },
+}));
+
+// Mock the overlay component
+jest.mock('../../../components/overlay', () => ({
+ Overlay: jest.fn().mockImplementation(() => ({
+ close: jest.fn(),
+ })),
+ OverlayHorizontalDirection: {
+ START_TO_RIGHT: 'start-to-right',
+ },
+ OverlayVerticalDirection: {
+ TO_TOP: 'to-top',
+ },
+}));
+
+describe('SourceLinkHeader Component', () => {
+ let sourceLinkHeader: SourceLinkHeader;
+ let mockOnClick: jest.Mock;
+
+ const basicSourceLink: SourceLink = {
+ title: 'Test Source Link',
+ url: 'https://example.com/test/path',
+ };
+
+ const sourceWithBody: SourceLink = {
+ title: 'Source with Body',
+ url: 'https://github.com/user/repo/blob/main/file.js',
+ body: 'This source has body content for preview',
+ };
+
+ const sourceWithMetadata: SourceLink = {
+ title: 'GitHub Repository',
+ url: 'https://github.com/example/awesome-repo',
+ metadata: {
+ github: {
+ stars: 1500,
+ forks: 250,
+ isOfficialDoc: true,
+ lastActivityDate: Date.now() - 86400000, // 1 day ago
+ score: 95,
+ },
+ },
+ };
+
+ const sourceWithComplexMetadata: SourceLink = {
+ title: 'Stack Overflow Question',
+ url: 'https://stackoverflow.com/questions/12345/test-question',
+ metadata: {
+ stackoverflow: {
+ answerCount: 8,
+ isAccepted: true,
+ score: 42,
+ lastActivityDate: Date.now() - 3600000, // 1 hour ago
+ },
+ github: {
+ stars: 500,
+ forks: 75,
+ },
+ },
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ mockOnClick = jest.fn();
+ jest.clearAllMocks();
+ jest.clearAllTimers();
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ jest.runOnlyPendingTimers();
+ jest.useRealTimers();
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create source link header with basic props', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+
+ expect(sourceLinkHeader.render).toBeDefined();
+ expect(sourceLinkHeader.render.classList.contains('mynah-source-link-header')).toBe(true);
+ });
+
+ it('should render source link title', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const title = document.body.querySelector('.mynah-source-link-title');
+ expect(title?.textContent).toContain(basicSourceLink.title);
+ });
+
+ it('should render source link URL with correct href', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const titleLink = document.body.querySelector('.mynah-source-link-title');
+ const urlLink = document.body.querySelector('.mynah-source-link-url');
+
+ expect(titleLink?.getAttribute('href')).toBe(basicSourceLink.url);
+ expect(urlLink?.getAttribute('href')).toBe(basicSourceLink.url);
+ });
+
+ it('should have target="_blank" for external links', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const titleLink = document.body.querySelector('.mynah-source-link-title');
+ const urlLink = document.body.querySelector('.mynah-source-link-url');
+
+ expect(titleLink?.getAttribute('target')).toBe('_blank');
+ expect(urlLink?.getAttribute('target')).toBe('_blank');
+ });
+
+ it('should render external link icon', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const expandIcon = document.body.querySelector('.mynah-source-link-expand-icon');
+ expect(expandIcon).toBeDefined();
+ });
+
+ it('should have correct test IDs', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const wrapper = document.body.querySelector('[data-testid*="link-wrapper"]');
+ const link = document.body.querySelector('[data-testid*="link"]');
+
+ expect(wrapper).toBeDefined();
+ expect(link).toBeDefined();
+ });
+ });
+
+ describe('URL Processing', () => {
+ it('should process URL correctly by removing protocol', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ expect(urlElement?.innerHTML).toContain('example.com');
+ expect(urlElement?.innerHTML).toContain('test');
+ expect(urlElement?.innerHTML).toContain('path');
+ });
+
+ it('should handle HTTPS URLs', () => {
+ const httpsSource: SourceLink = {
+ title: 'HTTPS Source',
+ url: 'https://secure.example.com/path',
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: httpsSource });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ expect(urlElement?.innerHTML).toContain('secure.example.com');
+ expect(urlElement?.innerHTML).not.toContain('https://');
+ });
+
+ it('should handle HTTP URLs', () => {
+ const httpSource: SourceLink = {
+ title: 'HTTP Source',
+ url: 'http://example.com/path',
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: httpSource });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ expect(urlElement?.innerHTML).toContain('example.com');
+ expect(urlElement?.innerHTML).not.toContain('http://');
+ });
+
+ it('should handle URLs with trailing slash', () => {
+ const trailingSlashSource: SourceLink = {
+ title: 'Trailing Slash',
+ url: 'https://example.com/path/',
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: trailingSlashSource });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ expect(urlElement?.innerHTML).toContain('example.com');
+ expect(urlElement?.innerHTML).toContain('path');
+ });
+
+ it('should wrap URL parts in spans', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ const spans = urlElement?.querySelectorAll('span');
+
+ expect(spans?.length).toBeGreaterThan(0);
+ });
+
+ it('should set origin attribute', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header');
+ expect(header?.getAttribute('origin')).toBeDefined();
+ });
+ });
+
+ describe('Click Handling', () => {
+ it('should handle onClick for title link', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: basicSourceLink,
+ onClick: mockOnClick,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const titleLink = document.body.querySelector('.mynah-source-link-title') as HTMLElement;
+ titleLink.click();
+
+ expect(mockOnClick).toHaveBeenCalled();
+ });
+
+ it('should handle onClick for URL link', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: basicSourceLink,
+ onClick: mockOnClick,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlLink = document.body.querySelector('.mynah-source-link-url') as HTMLElement;
+ urlLink.click();
+
+ expect(mockOnClick).toHaveBeenCalled();
+ });
+
+ it('should handle auxclick (middle click) for title link', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: basicSourceLink,
+ onClick: mockOnClick,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const titleLink = document.body.querySelector('.mynah-source-link-title') as HTMLElement;
+ const auxClickEvent = new MouseEvent('auxclick', { button: 1 });
+ titleLink.dispatchEvent(auxClickEvent);
+
+ expect(mockOnClick).toHaveBeenCalled();
+ });
+
+ it('should handle auxclick for URL link', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: basicSourceLink,
+ onClick: mockOnClick,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlLink = document.body.querySelector('.mynah-source-link-url') as HTMLElement;
+ const auxClickEvent = new MouseEvent('auxclick', { button: 1 });
+ urlLink.dispatchEvent(auxClickEvent);
+
+ expect(mockOnClick).toHaveBeenCalled();
+ });
+
+ it('should not add click handlers when onClick is not provided', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const titleLink = document.body.querySelector('.mynah-source-link-title') as HTMLElement;
+ titleLink.click();
+
+ // Should not throw error
+ expect(sourceLinkHeader.render).toBeDefined();
+ });
+ });
+
+ describe('Metadata Rendering', () => {
+ it('should render metadata when provided', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaBlock = document.body.querySelector('.mynah-title-meta-block');
+ expect(metaBlock).toBeDefined();
+ });
+
+ it('should not render metadata when not provided', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaBlock = document.body.querySelector('.mynah-title-meta-block');
+ expect(metaBlock).toBeNull();
+ });
+
+ it('should render accepted answer icon', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithComplexMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const approvedAnswer = document.body.querySelector('.approved-answer');
+ expect(approvedAnswer).toBeDefined();
+ });
+
+ it('should render stars count', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaItems = document.body.querySelectorAll('.mynah-title-meta-block-item-text');
+ const starsItem = Array.from(metaItems).find((item) => item.textContent?.includes('contributors'));
+ expect(starsItem).toBeDefined();
+ expect(starsItem?.textContent).toContain('1500');
+ });
+
+ it('should render forks count', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaItems = document.body.querySelectorAll('.mynah-title-meta-block-item-text');
+ const forksItem = Array.from(metaItems).find((item) => item.textContent?.includes('forks'));
+ expect(forksItem).toBeDefined();
+ expect(forksItem?.textContent).toContain('250');
+ });
+
+ it('should render answer count', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithComplexMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaItems = document.body.querySelectorAll('.mynah-title-meta-block-item-text');
+ const answerItem = Array.from(metaItems).find((item) => item.textContent === '8');
+ expect(answerItem).toBeDefined();
+ });
+
+ it('should render score', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithComplexMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaItems = document.body.querySelectorAll('.mynah-title-meta-block-item-text');
+ const scoreItem = Array.from(metaItems).find((item) => item.textContent === '42');
+ expect(scoreItem).toBeDefined();
+ });
+
+ it('should render last activity date', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaItems = document.body.querySelectorAll('.mynah-title-meta-block-item');
+ // Check that we have meta items (the date formatting might vary)
+ expect(metaItems.length).toBeGreaterThan(0);
+
+ // Check for calendar icon which indicates date item
+ const calendarIcon = document.body.querySelector('.mynah-title-meta-block-item .mynah-icon');
+ expect(calendarIcon).toBeDefined();
+ });
+
+ it('should handle multiple metadata sources', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithComplexMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaBlock = document.body.querySelector('.mynah-title-meta-block');
+ const metaItems = metaBlock?.querySelectorAll('.mynah-title-meta-block-item');
+
+ expect(metaItems?.length).toBeGreaterThan(1);
+ });
+
+ it('should handle empty metadata object', () => {
+ const sourceWithEmptyMetadata: SourceLink = {
+ title: 'Empty Metadata',
+ url: 'https://example.com',
+ metadata: {},
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: sourceWithEmptyMetadata });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaBlock = document.body.querySelector('.mynah-title-meta-block');
+ expect(metaBlock).toBeDefined();
+
+ const metaItems = metaBlock?.querySelectorAll('.mynah-title-meta-block-item');
+ expect(metaItems?.length).toBe(0);
+ });
+ });
+
+ describe('Preview Functionality', () => {
+ it('should show preview on hover when showCardOnHover is true', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: sourceWithBody,
+ showCardOnHover: true,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header') as HTMLElement;
+
+ // Trigger mouseenter
+ const mouseEnterEvent = new MouseEvent('mouseenter');
+ header.dispatchEvent(mouseEnterEvent);
+
+ // Fast-forward timer
+ jest.advanceTimersByTime(500);
+
+ // Overlay should be created (mocked)
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should hide preview on mouseleave', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: sourceWithBody,
+ showCardOnHover: true,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header') as HTMLElement;
+
+ // Trigger mouseenter then mouseleave
+ header.dispatchEvent(new MouseEvent('mouseenter'));
+ header.dispatchEvent(new MouseEvent('mouseleave'));
+
+ // Timer should be cleared
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).not.toHaveBeenCalled();
+ });
+
+ it('should show preview on focus', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: sourceWithBody,
+ showCardOnHover: true,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header') as HTMLElement;
+
+ // Trigger focus
+ const focusEvent = new FocusEvent('focus');
+ header.dispatchEvent(focusEvent);
+
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).toHaveBeenCalled();
+ });
+
+ it('should hide preview on blur', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: sourceWithBody,
+ showCardOnHover: true,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header') as HTMLElement;
+
+ // Trigger focus then blur
+ header.dispatchEvent(new FocusEvent('focus'));
+ header.dispatchEvent(new FocusEvent('blur'));
+
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).not.toHaveBeenCalled();
+ });
+
+ it('should not show preview when source has no body', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: basicSourceLink,
+ showCardOnHover: true,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header') as HTMLElement;
+ header.dispatchEvent(new MouseEvent('mouseenter'));
+
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).not.toHaveBeenCalled();
+ });
+
+ it('should not add hover events when showCardOnHover is false', () => {
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: sourceWithBody,
+ showCardOnHover: false,
+ });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header') as HTMLElement;
+ header.dispatchEvent(new MouseEvent('mouseenter'));
+
+ jest.advanceTimersByTime(500);
+
+ const { Overlay } = jest.requireMock('../../../components/overlay');
+ expect(Overlay).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('Global Events', () => {
+ it('should register for root focus events', () => {
+ const mockAddListener = jest.fn();
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue({
+ addListener: mockAddListener,
+ });
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+
+ expect(mockAddListener).toHaveBeenCalledWith(MynahEventNames.ROOT_FOCUS, expect.any(Function));
+ });
+
+ it('should hide preview on root focus loss', () => {
+ const mockAddListener = jest.fn();
+ let focusCallback: ((data: { focusState: boolean }) => void) | undefined;
+
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue({
+ addListener: (event: string, callback: any) => {
+ if (event === MynahEventNames.ROOT_FOCUS) {
+ focusCallback = callback;
+ }
+ mockAddListener(event, callback);
+ },
+ });
+
+ sourceLinkHeader = new SourceLinkHeader({
+ sourceLink: sourceWithBody,
+ showCardOnHover: true,
+ });
+
+ // Simulate showing preview
+ document.body.appendChild(sourceLinkHeader.render);
+ const header = document.body.querySelector('.mynah-source-link-header') as HTMLElement;
+ header.dispatchEvent(new MouseEvent('mouseenter'));
+ jest.advanceTimersByTime(500);
+
+ // Simulate root focus loss
+ if (focusCallback != null) {
+ focusCallback({ focusState: false });
+ }
+
+ // Should hide preview (tested through mock)
+ expect(mockAddListener).toHaveBeenCalled();
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty URL', () => {
+ const emptyUrlSource: SourceLink = {
+ title: 'Empty URL',
+ url: '',
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: emptyUrlSource });
+ expect(sourceLinkHeader.render).toBeDefined();
+ });
+
+ it('should handle URL without protocol', () => {
+ const noProtocolSource: SourceLink = {
+ title: 'No Protocol',
+ url: 'example.com/path',
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: noProtocolSource });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ expect(urlElement?.innerHTML).toContain('example.com');
+ });
+
+ it('should handle very long URLs', () => {
+ const longUrlSource: SourceLink = {
+ title: 'Long URL',
+ url: 'https://example.com/very/long/path/with/many/segments/that/goes/on/and/on',
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: longUrlSource });
+ expect(sourceLinkHeader.render).toBeDefined();
+ });
+
+ it('should handle special characters in URL', () => {
+ const specialCharSource: SourceLink = {
+ title: 'Special Chars',
+ url: 'https://example.com/path?query=test¶m=value#section',
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: specialCharSource });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ expect(urlElement?.innerHTML).toContain('example.com');
+ });
+
+ it('should handle metadata with undefined values', () => {
+ const undefinedMetadataSource: SourceLink = {
+ title: 'Undefined Metadata',
+ url: 'https://example.com',
+ metadata: {
+ test: {
+ stars: undefined,
+ forks: undefined,
+ answerCount: undefined,
+ isAccepted: undefined,
+ score: undefined,
+ lastActivityDate: undefined,
+ },
+ },
+ };
+
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: undefinedMetadataSource });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const metaBlock = document.body.querySelector('.mynah-title-meta-block');
+ expect(metaBlock).toBeDefined();
+ });
+ });
+
+ describe('Component Structure', () => {
+ it('should have proper DOM structure', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ // Should have main header
+ const header = document.body.querySelector('.mynah-source-link-header');
+ expect(header).toBeDefined();
+
+ // Should have thumbnail
+ const thumbnail = header?.querySelector('.mynah-source-thumbnail');
+ expect(thumbnail).toBeDefined();
+
+ // Should have title wrapper
+ const titleWrapper = header?.querySelector('.mynah-source-link-title-wrapper');
+ expect(titleWrapper).toBeDefined();
+
+ // Should have title and URL links
+ const title = titleWrapper?.querySelector('.mynah-source-link-title');
+ const url = titleWrapper?.querySelector('.mynah-source-link-url');
+ expect(title).toBeDefined();
+ expect(url).toBeDefined();
+ });
+
+ it('should maintain proper accessibility attributes', () => {
+ sourceLinkHeader = new SourceLinkHeader({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkHeader.render);
+
+ const titleLink = document.body.querySelector('.mynah-source-link-title');
+ const urlLink = document.body.querySelector('.mynah-source-link-url');
+
+ expect(titleLink?.getAttribute('href')).toBeTruthy();
+ expect(titleLink?.getAttribute('target')).toBe('_blank');
+ expect(urlLink?.getAttribute('href')).toBeTruthy();
+ expect(urlLink?.getAttribute('target')).toBe('_blank');
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/components/source-link/source-link.spec.ts b/mynah-ui/src/__test__/components/source-link/source-link.spec.ts
new file mode 100644
index 0000000000..7c5aa1817b
--- /dev/null
+++ b/mynah-ui/src/__test__/components/source-link/source-link.spec.ts
@@ -0,0 +1,265 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SourceLinkCard } from '../../../components/source-link/source-link';
+import { SourceLink } from '../../../static';
+
+describe('SourceLinkCard Component', () => {
+ let sourceLinkCard: SourceLinkCard;
+
+ const basicSourceLink: SourceLink = {
+ title: 'Test Source Link',
+ url: 'https://example.com/test',
+ id: 'test-id',
+ };
+
+ const sourceWithBody: SourceLink = {
+ title: 'Source with Body',
+ url: 'https://example.com/with-body',
+ body: 'This is the body content of the source link',
+ type: 'documentation',
+ };
+
+ const sourceWithMetadata: SourceLink = {
+ title: 'Source with Metadata',
+ url: 'https://github.com/example/repo',
+ metadata: {
+ github: {
+ stars: 150,
+ forks: 25,
+ isOfficialDoc: true,
+ lastActivityDate: Date.now() - 86400000, // 1 day ago
+ },
+ },
+ };
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('Basic Functionality', () => {
+ it('should create source link card with basic props', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+
+ expect(sourceLinkCard.render).toBeDefined();
+ expect(sourceLinkCard.render.classList.contains('mynah-card')).toBe(true);
+ });
+
+ it('should render source link header', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header');
+ expect(header).toBeDefined();
+ });
+
+ it('should render source link title', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const title = document.body.querySelector('.mynah-source-link-title');
+ expect(title?.textContent).toContain(basicSourceLink.title);
+ });
+
+ it('should render source link URL', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const urlElement = document.body.querySelector('.mynah-source-link-url');
+ expect(urlElement?.getAttribute('href')).toBe(basicSourceLink.url);
+ });
+
+ it('should have correct test ID', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const cardElement = document.body.querySelector('[data-testid*="link-preview-overlay-card"]');
+ expect(cardElement).toBeDefined();
+ });
+ });
+
+ describe('Source Link with Body', () => {
+ it('should render body when provided', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: sourceWithBody });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const cardBody = document.body.querySelector('.mynah-card-body');
+ expect(cardBody).toBeDefined();
+ });
+
+ it('should not render body when not provided', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const cardBody = document.body.querySelector('.mynah-card-body');
+ expect(cardBody).toBeNull();
+ });
+
+ it('should display body content correctly', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: sourceWithBody });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const cardBody = document.body.querySelector('.mynah-card-body');
+ expect(cardBody?.textContent).toContain(sourceWithBody.body);
+ });
+ });
+
+ describe('Compact Mode', () => {
+ it('should handle compact flat mode', () => {
+ sourceLinkCard = new SourceLinkCard({
+ sourceLink: basicSourceLink,
+ compact: 'flat',
+ });
+
+ expect(sourceLinkCard.render).toBeDefined();
+ });
+
+ it('should handle compact true mode', () => {
+ sourceLinkCard = new SourceLinkCard({
+ sourceLink: basicSourceLink,
+ compact: true,
+ });
+
+ expect(sourceLinkCard.render).toBeDefined();
+ });
+ });
+
+ describe('Card Properties', () => {
+ it('should create card with no border', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkCard.render);
+
+ // Card should not have border class
+ const card = document.body.querySelector('.mynah-card');
+ expect(card?.classList.contains('mynah-card-border')).toBe(false);
+ });
+
+ it('should create card with no background', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+ document.body.appendChild(sourceLinkCard.render);
+
+ // Card should not have background class
+ const card = document.body.querySelector('.mynah-card');
+ expect(card?.classList.contains('mynah-card-background')).toBe(false);
+ });
+ });
+
+ describe('Complex Source Links', () => {
+ it('should handle source link with metadata', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: sourceWithMetadata });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const header = document.body.querySelector('.mynah-source-link-header');
+ expect(header).toBeDefined();
+ });
+
+ it('should handle source link with all properties', () => {
+ const complexSource: SourceLink = {
+ title: 'Complex Source',
+ url: 'https://example.com/complex',
+ body: 'Complex body content',
+ type: 'api-doc',
+ id: 'complex-id',
+ metadata: {
+ stackoverflow: {
+ score: 42,
+ answerCount: 5,
+ isAccepted: true,
+ lastActivityDate: Date.now() - 3600000, // 1 hour ago
+ },
+ },
+ };
+
+ sourceLinkCard = new SourceLinkCard({ sourceLink: complexSource });
+ document.body.appendChild(sourceLinkCard.render);
+
+ expect(sourceLinkCard.render).toBeDefined();
+
+ const title = document.body.querySelector('.mynah-source-link-title');
+ expect(title?.textContent).toContain(complexSource.title);
+
+ const cardBody = document.body.querySelector('.mynah-card-body');
+ expect(cardBody).toBeDefined();
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('should handle empty source link', () => {
+ const emptySource: SourceLink = {
+ title: '',
+ url: '',
+ };
+
+ sourceLinkCard = new SourceLinkCard({ sourceLink: emptySource });
+ expect(sourceLinkCard.render).toBeDefined();
+ });
+
+ it('should handle source link with undefined body', () => {
+ const sourceWithUndefinedBody: SourceLink = {
+ title: 'Test',
+ url: 'https://example.com',
+ body: undefined,
+ };
+
+ sourceLinkCard = new SourceLinkCard({ sourceLink: sourceWithUndefinedBody });
+ document.body.appendChild(sourceLinkCard.render);
+
+ const cardBody = document.body.querySelector('.mynah-card-body');
+ expect(cardBody).toBeNull();
+ });
+
+ it('should handle source link with empty metadata', () => {
+ const sourceWithEmptyMetadata: SourceLink = {
+ title: 'Test',
+ url: 'https://example.com',
+ metadata: {},
+ };
+
+ sourceLinkCard = new SourceLinkCard({ sourceLink: sourceWithEmptyMetadata });
+ expect(sourceLinkCard.render).toBeDefined();
+ });
+
+ it('should handle source link with null metadata', () => {
+ const sourceWithNullMetadata: SourceLink = {
+ title: 'Test',
+ url: 'https://example.com',
+ metadata: undefined,
+ };
+
+ sourceLinkCard = new SourceLinkCard({ sourceLink: sourceWithNullMetadata });
+ expect(sourceLinkCard.render).toBeDefined();
+ });
+ });
+
+ describe('Component Structure', () => {
+ it('should have proper component hierarchy', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: sourceWithBody });
+ document.body.appendChild(sourceLinkCard.render);
+
+ // Should have card wrapper
+ const card = document.body.querySelector('.mynah-card');
+ expect(card).toBeDefined();
+
+ // Should have header
+ const header = card?.querySelector('.mynah-source-link-header');
+ expect(header).toBeDefined();
+
+ // Should have body
+ const body = card?.querySelector('.mynah-card-body');
+ expect(body).toBeDefined();
+ });
+
+ it('should maintain source link reference', () => {
+ sourceLinkCard = new SourceLinkCard({ sourceLink: basicSourceLink });
+
+ // The component should store the source link reference
+ expect((sourceLinkCard as any).sourceLink).toBe(basicSourceLink);
+ });
+ });
+});
diff --git a/mynah-ui/src/__test__/main.spec.ts b/mynah-ui/src/__test__/main.spec.ts
new file mode 100644
index 0000000000..9d4d7d6c9e
--- /dev/null
+++ b/mynah-ui/src/__test__/main.spec.ts
@@ -0,0 +1,99 @@
+import { ChatItemType, MynahUI, MynahUIDataModel } from '../main';
+
+const testTabId = 'tab-1';
+let testMynahUI: MynahUI;
+afterEach(() => {
+ // Clear the dom and store between tests
+ document.body.innerHTML = '';
+ testMynahUI.updateStore(testTabId, {
+ loadingChat: false,
+ chatItems: [],
+ });
+});
+
+describe('mynah-ui', () => {
+ it('render chat items', () => {
+ const testTabId = 'tab-1';
+ testMynahUI = new MynahUI({
+ tabs: {
+ [testTabId]: {
+ isSelected: true,
+ store: {
+ loadingChat: false,
+ },
+ },
+ },
+ });
+
+ testMynahUI.addChatItem(testTabId, { type: ChatItemType.PROMPT, body: 'What is a react hook' });
+ testMynahUI.addChatItem(testTabId, { type: ChatItemType.ANSWER_STREAM });
+ testMynahUI.updateLastChatAnswer(testTabId, { body: 'Just a function.' });
+ testMynahUI.addChatItem(testTabId, {
+ type: ChatItemType.ANSWER,
+ followUp: {
+ text: 'Suggested follow up',
+ options: [
+ {
+ pillText: 'Follow up one',
+ prompt: 'Follow up one',
+ },
+ ],
+ },
+ });
+ const cardElements = document.body.querySelectorAll('.mynah-chat-item-card');
+ expect(cardElements).toHaveLength(3);
+ expect(cardElements[0].textContent).toBe('What is a react hook');
+ expect(cardElements[1].textContent).toContain('Just a function.');
+ expect(cardElements[2].textContent).toContain('Suggested follow up');
+ expect(cardElements[2].textContent).toContain('Follow up one');
+ });
+
+ it('loading state', () => {
+ const testMynahUI = new MynahUI({
+ tabs: {
+ [testTabId]: {
+ isSelected: true,
+ store: {
+ loadingChat: false,
+ },
+ },
+ },
+ });
+
+ testMynahUI.addChatItem(testTabId, { type: ChatItemType.PROMPT, body: 'What is python' });
+ // Still generating an answer
+ testMynahUI.addChatItem(testTabId, { type: ChatItemType.ANSWER_STREAM });
+ testMynahUI.updateStore(testTabId, {
+ loadingChat: true,
+ });
+
+ const cardElements = document.body.querySelectorAll('.mynah-chat-item-card');
+ expect(cardElements).toHaveLength(2);
+
+ expect(cardElements[0].textContent).toBe('What is python');
+ expect(cardElements[1].textContent).toBe('Amazon Q is generating your answer...');
+ });
+
+ it('does not break on data store extension', () => {
+ const testMynahUI = new MynahUI({
+ tabs: {
+ [testTabId]: {
+ isSelected: true,
+ store: {
+ loadingChat: false,
+ },
+ },
+ },
+ });
+
+ type ExtendedDataModel = MynahUIDataModel & { someOtherProperty: boolean };
+ const props: ExtendedDataModel = { someOtherProperty: true };
+
+ try {
+ testMynahUI.updateStore(testTabId, props);
+ } catch (e) {
+ console.log(e);
+ expect(true).toBe(false);
+ }
+ });
+});
diff --git a/mynah-ui/src/components/__test__/button.spec.ts b/mynah-ui/src/components/__test__/button.spec.ts
new file mode 100644
index 0000000000..5df68b107c
--- /dev/null
+++ b/mynah-ui/src/components/__test__/button.spec.ts
@@ -0,0 +1,82 @@
+import { Button } from '../button';
+
+describe('button', () => {
+ it('label', () => {
+ const mockOnClickHandler = jest.fn();
+ const testButton = new Button({
+ label: 'Test button',
+ onClick: mockOnClickHandler,
+ });
+
+ expect(testButton.render).toBeDefined();
+ expect(testButton.render.querySelector('span')?.textContent).toBe('Test button');
+
+ testButton.updateLabel('Updated label');
+ expect(testButton.render.textContent).toBe('Updated label');
+ });
+
+ it('attributes', () => {
+ const mockOnClickHandler = jest.fn();
+ const testButton = new Button({
+ label: 'Test button',
+ attributes: {
+ id: 'test-id',
+ },
+ onClick: mockOnClickHandler,
+ });
+
+ expect(testButton.render.id).toBe('test-id');
+ });
+
+ it('primary style', () => {
+ const mockOnClickHandler = jest.fn();
+ const testButton = new Button({
+ label: 'Test button',
+ primary: false,
+ onClick: mockOnClickHandler,
+ });
+ const testButton2 = new Button({
+ label: 'Test button',
+ primary: true,
+ onClick: mockOnClickHandler,
+ });
+
+ expect(testButton.render.classList.contains('mynah-button-secondary')).toBeTruthy();
+ expect(testButton2.render.classList.contains('mynah-button-secondary')).toBeFalsy();
+ });
+
+ it('enabled', () => {
+ const mockOnClickHandler = jest.fn();
+ const testButton = new Button({
+ label: 'Test button',
+ onClick: mockOnClickHandler,
+ });
+
+ expect(testButton.render.disabled).toBeFalsy();
+ testButton.setEnabled(false);
+ expect(testButton.render.disabled).toBeTruthy();
+ });
+
+ it('event handlers', () => {
+ const mockOnClickHandler = jest.fn();
+ const mockMouseOverHandler = jest.fn();
+ const testButton = new Button({
+ label: 'Test button',
+ attributes: {
+ id: 'test-id',
+ },
+ onClick: mockOnClickHandler,
+ additionalEvents: {
+ mouseenter: mockMouseOverHandler,
+ },
+ });
+
+ document.body.appendChild(testButton.render);
+ const testButtonElement = document.querySelector('#test-id') as HTMLElement;
+ testButtonElement?.click();
+ expect(mockOnClickHandler).toHaveBeenCalledTimes(1);
+
+ testButtonElement.dispatchEvent(new Event('mouseenter'));
+ expect(mockMouseOverHandler).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-buttons.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-buttons.spec.ts
new file mode 100644
index 0000000000..3c520c7130
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-buttons.spec.ts
@@ -0,0 +1,46 @@
+import { ChatItemButtonsWrapper } from '../../chat-item/chat-item-buttons';
+import { ChatItemButton } from '../../../static';
+
+describe('ChatItemButtonsWrapper', () => {
+ it('should render empty wrapper when no buttons provided', () => {
+ const buttonsWrapper = new ChatItemButtonsWrapper({
+ buttons: null,
+ });
+
+ expect(buttonsWrapper.render).toBeDefined();
+ expect(buttonsWrapper.render.classList.contains('mynah-chat-item-buttons-container')).toBe(true);
+ });
+
+ it('should render with buttons array', () => {
+ const buttons: ChatItemButton[] = [
+ {
+ id: 'test-button',
+ text: 'Test Button',
+ description: 'Test button description',
+ },
+ ];
+
+ const buttonsWrapper = new ChatItemButtonsWrapper({
+ buttons,
+ tabId: 'test-tab',
+ });
+
+ expect(buttonsWrapper.render).toBeDefined();
+ expect(buttonsWrapper.render.classList.contains('mynah-chat-item-buttons-container')).toBe(true);
+ });
+
+ it('should apply custom class names', () => {
+ const customClasses = ['custom-class-1', 'custom-class-2'];
+
+ const buttonsWrapper = new ChatItemButtonsWrapper({
+ buttons: [],
+ tabId: 'test-tab',
+ classNames: customClasses,
+ });
+
+ expect(buttonsWrapper.render).toBeDefined();
+ customClasses.forEach((className) => {
+ expect(buttonsWrapper.render.classList.contains(className)).toBe(true);
+ });
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-card-content.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-card-content.spec.ts
new file mode 100644
index 0000000000..364a2fec5d
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-card-content.spec.ts
@@ -0,0 +1,107 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChatItemCardContent, ChatItemCardContentProps } from '../../chat-item/chat-item-card-content';
+import { Config } from '../../../helper/config';
+
+// Mock Config
+jest.mock('../../../helper/config', () => ({
+ Config: {
+ getInstance: jest.fn(),
+ },
+}));
+
+describe('ChatItemCardContent Animation Speed', () => {
+ const mockGetInstance = Config.getInstance as jest.MockedFunction;
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+
+ mockGetInstance.mockReturnValue({
+ // @ts-expect-error
+ config: {
+ typewriterStackTime: 100,
+ typewriterMaxWordTime: 20,
+ disableTypewriterAnimation: false,
+ },
+ });
+
+ document.body.innerHTML = '
';
+ });
+
+ describe('Animation Configuration', () => {
+ it('should use fast animation settings', () => {
+ mockGetInstance.mockReturnValue({
+ // @ts-expect-error
+ config: {
+ typewriterStackTime: 100,
+ typewriterMaxWordTime: 20,
+ disableTypewriterAnimation: false,
+ },
+ });
+
+ const props: ChatItemCardContentProps = {
+ body: 'Test content',
+ renderAsStream: true,
+ };
+
+ const cardContent = new ChatItemCardContent(props);
+ expect(mockGetInstance).toHaveBeenCalled();
+ expect(cardContent).toBeDefined();
+ });
+
+ it('should disable animation when configured', () => {
+ mockGetInstance.mockReturnValue({
+ // @ts-expect-error
+ config: {
+ disableTypewriterAnimation: true,
+ },
+ });
+
+ const props: ChatItemCardContentProps = {
+ body: 'Test content',
+ renderAsStream: true,
+ };
+
+ const cardContent = new ChatItemCardContent(props);
+ expect(mockGetInstance).toHaveBeenCalled();
+ expect(cardContent).toBeDefined();
+ });
+ });
+
+ describe('Stream Ending', () => {
+ it('should end stream and call animation state change', () => {
+ const onAnimationStateChange = jest.fn();
+ const props: ChatItemCardContentProps = {
+ body: 'Test content',
+ renderAsStream: true,
+ onAnimationStateChange,
+ };
+
+ const cardContent = new ChatItemCardContent(props);
+ cardContent.endStream();
+
+ expect(onAnimationStateChange).toHaveBeenCalledWith(false);
+ });
+ });
+
+ describe('Default Values', () => {
+ it('should use defaults when config is empty', () => {
+ mockGetInstance.mockReturnValue({
+ // @ts-expect-error
+ config: {},
+ });
+
+ const props: ChatItemCardContentProps = {
+ body: 'Test content',
+ renderAsStream: true,
+ };
+
+ const cardContent = new ChatItemCardContent(props);
+ expect(mockGetInstance).toHaveBeenCalled();
+ expect(cardContent).toBeDefined();
+ });
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-card.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-card.spec.ts
new file mode 100644
index 0000000000..1a79a7c08d
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-card.spec.ts
@@ -0,0 +1,244 @@
+import { ChatItemCard } from '../../chat-item/chat-item-card';
+import { ChatItemType } from '../../../static';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+
+// Mock the tabs store
+jest.mock('../../../helper/tabs-store', () => ({
+ MynahUITabsStore: {
+ getInstance: jest.fn(() => ({
+ getTabDataStore: jest.fn(() => ({
+ subscribe: jest.fn(),
+ getValue: jest.fn(() => ({})),
+ })),
+ })),
+ },
+}));
+
+// Mock global events
+jest.mock('../../../helper/events', () => ({
+ MynahUIGlobalEvents: {
+ getInstance: jest.fn(() => ({
+ dispatch: jest.fn(),
+ })),
+ },
+}));
+
+describe('ChatItemCard', () => {
+ let mockDispatch: jest.Mock;
+
+ beforeEach(() => {
+ mockDispatch = jest.fn();
+ (MynahUIGlobalEvents.getInstance as jest.Mock).mockReturnValue({
+ dispatch: mockDispatch,
+ });
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should render basic chat item card', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ body: 'Test content',
+ },
+ });
+
+ expect(card.render).toBeDefined();
+ });
+
+ describe('Pills functionality', () => {
+ it('should render pills when renderAsPills is true', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ icon: 'progress',
+ body: 'Reading',
+ fileList: {
+ filePaths: ['file1.ts', 'file2.ts'],
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const pillElements = card.render.querySelectorAll('.mynah-chat-item-tree-file-pill');
+ expect(pillElements.length).toBe(2);
+ });
+
+ it('should include icon in customRenderer when pills are enabled', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ icon: 'eye',
+ body: 'Files read',
+ fileList: {
+ filePaths: ['test.json'],
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const iconElement = card.render.querySelector('.mynah-ui-icon-eye');
+ expect(iconElement).toBeTruthy();
+ });
+
+ it('should render pills with correct file names', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Processing',
+ fileList: {
+ filePaths: ['package.json', 'tsconfig.json'],
+ details: {
+ 'package.json': {
+ visibleName: 'package',
+ },
+ 'tsconfig.json': {
+ visibleName: 'tsconfig',
+ },
+ },
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const pillElements = card.render.querySelectorAll('.mynah-chat-item-tree-file-pill');
+ expect(pillElements[0].textContent).toBe('package');
+ expect(pillElements[1].textContent).toBe('tsconfig');
+ });
+
+ it('should apply deleted styling to deleted files', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Changes',
+ fileList: {
+ filePaths: ['deleted.ts', 'normal.ts'],
+ deletedFiles: ['deleted.ts'],
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const deletedPill = card.render.querySelector('.mynah-chat-item-tree-file-pill-deleted');
+ expect(deletedPill).toBeTruthy();
+ expect(deletedPill?.textContent).toBe('deleted.ts');
+ });
+
+ it('should not dispatch click events when clickable is false', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Files',
+ fileList: {
+ filePaths: ['test.js'],
+ details: {
+ 'test.js': {
+ clickable: false,
+ },
+ },
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const pillElement = card.render.querySelector('.mynah-chat-item-tree-file-pill') as HTMLElement;
+ pillElement?.click();
+
+ expect(mockDispatch).not.toHaveBeenCalled();
+ });
+ });
+
+ it('should not render pills when renderAsPills is false', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Files',
+ fileList: {
+ filePaths: ['file1.ts'],
+ renderAsPills: false,
+ },
+ },
+ },
+ });
+
+ const pillElements = card.render.querySelectorAll('.mynah-chat-item-tree-file-pill');
+ expect(pillElements.length).toBe(0);
+ });
+
+ it('should fall back to file path when visibleName is not provided', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Files',
+ fileList: {
+ filePaths: ['src/components/test.ts'],
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const pillElement = card.render.querySelector('.mynah-chat-item-tree-file-pill');
+ expect(pillElement?.textContent).toBe('src/components/test.ts');
+ });
+
+ it('should handle empty filePaths array', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'No files',
+ fileList: {
+ filePaths: [],
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const pillElements = card.render.querySelectorAll('.mynah-chat-item-tree-file-pill');
+ expect(pillElements.length).toBe(0);
+ });
+
+ it('should parse markdown in header body for pills', () => {
+ const card = new ChatItemCard({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ header: {
+ body: 'Reading `inline code` text',
+ fileList: {
+ filePaths: ['test.js'],
+ renderAsPills: true,
+ },
+ },
+ },
+ });
+
+ const codeElement = card.render.querySelector('.mynah-inline-code');
+ expect(codeElement).toBeTruthy();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-followup.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-followup.spec.ts
new file mode 100644
index 0000000000..92f9ffbe42
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-followup.spec.ts
@@ -0,0 +1,18 @@
+import { ChatItemFollowUpContainer } from '../../chat-item/chat-item-followup';
+import { ChatItemType } from '../../../static';
+
+describe('ChatItemFollowUpContainer', () => {
+ it('should render followup container', () => {
+ const container = new ChatItemFollowUpContainer({
+ tabId: 'test-tab',
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ followUp: {
+ options: [],
+ },
+ },
+ });
+
+ expect(container.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-form-items.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-form-items.spec.ts
new file mode 100644
index 0000000000..12757f851e
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-form-items.spec.ts
@@ -0,0 +1,12 @@
+import { ChatItemFormItemsWrapper } from '../../chat-item/chat-item-form-items';
+
+describe('ChatItemFormItemsWrapper', () => {
+ it('should render form items wrapper', () => {
+ const wrapper = new ChatItemFormItemsWrapper({
+ tabId: 'test-tab',
+ chatItem: {},
+ });
+
+ expect(wrapper.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-information-card.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-information-card.spec.ts
new file mode 100644
index 0000000000..2ae9d3c6de
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-information-card.spec.ts
@@ -0,0 +1,33 @@
+import { ChatItemInformationCard } from '../../chat-item/chat-item-information-card';
+
+// Mock the ChatItemCard component
+jest.mock('../../chat-item/chat-item-card', () => ({
+ ChatItemCard: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ })),
+}));
+
+// Mock the TitleDescriptionWithIcon component
+jest.mock('../../title-description-with-icon', () => ({
+ TitleDescriptionWithIcon: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ })),
+}));
+
+describe('ChatItemInformationCard', () => {
+ it('should render information card with basic properties', () => {
+ const card = new ChatItemInformationCard({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ informationCard: {
+ title: 'Test Information',
+ content: {
+ body: 'Test content',
+ },
+ },
+ });
+
+ expect(card.render).toBeDefined();
+ expect(card.render.classList.contains('mynah-chat-item-information-card')).toBe(true);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-relevance-vote.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-relevance-vote.spec.ts
new file mode 100644
index 0000000000..e19982857f
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-relevance-vote.spec.ts
@@ -0,0 +1,32 @@
+import { ChatItemRelevanceVote } from '../../chat-item/chat-item-relevance-vote';
+
+// Mock the global events
+jest.mock('../../../helper/events', () => ({
+ MynahUIGlobalEvents: {
+ getInstance: jest.fn(() => ({
+ dispatch: jest.fn(),
+ addListener: jest.fn().mockReturnValue('mock-listener-id'),
+ removeListener: jest.fn(),
+ })),
+ },
+}));
+
+describe('ChatItemRelevanceVote', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('should render relevance vote component', () => {
+ const vote = new ChatItemRelevanceVote({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ });
+
+ expect(vote.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-source-links.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-source-links.spec.ts
new file mode 100644
index 0000000000..404798d12e
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-source-links.spec.ts
@@ -0,0 +1,27 @@
+import { ChatItemSourceLinksContainer } from '../../chat-item/chat-item-source-links';
+
+// Mock the Card component
+jest.mock('../../card/card', () => ({
+ Card: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ })),
+}));
+
+// Mock the SourceLinkHeader component
+jest.mock('../../source-link/source-link-header', () => ({
+ SourceLinkHeader: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ })),
+}));
+
+describe('ChatItemSourceLinksContainer', () => {
+ it('should not render when relatedContent is undefined', () => {
+ const container = new ChatItemSourceLinksContainer({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ title: 'Related Links',
+ });
+
+ expect(container.render).toBeUndefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-tabbed-card.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-tabbed-card.spec.ts
new file mode 100644
index 0000000000..17c02c5fbc
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-tabbed-card.spec.ts
@@ -0,0 +1,79 @@
+import { ChatItemTabbedCard } from '../../chat-item/chat-item-tabbed-card';
+
+// Mock the ChatItemCard component
+jest.mock('../../chat-item/chat-item-card', () => ({
+ ChatItemCard: jest.fn().mockImplementation((props) => ({
+ render: document.createElement('div'),
+ props,
+ clearContent: jest.fn(),
+ updateCardStack: jest.fn(),
+ })),
+}));
+
+// Mock the Tab component
+jest.mock('../../tabs', () => ({
+ Tab: jest.fn().mockImplementation(() => ({
+ render: document.createElement('div'),
+ })),
+}));
+
+describe('ChatItemTabbedCard', () => {
+ it('should render tabbed card with multiple tabs', () => {
+ const tabbedCard = [
+ {
+ label: 'Tab 1',
+ value: 'tab1',
+ content: {
+ body: 'Content 1',
+ },
+ },
+ {
+ label: 'Tab 2',
+ value: 'tab2',
+ content: {
+ body: 'Content 2',
+ },
+ },
+ ];
+
+ const card = new ChatItemTabbedCard({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ tabbedCard,
+ });
+
+ expect(card.render).toBeDefined();
+
+ // Check that the first tab's content is rendered by default
+ expect(card.contentCard.props.chatItem.body).toBe('Content 1');
+ });
+
+ it('should render tabbed card with selected tab', () => {
+ const tabbedCard = [
+ {
+ label: 'Tab 1',
+ value: 'tab1',
+ content: {
+ body: 'Content 1',
+ },
+ },
+ {
+ label: 'Tab 2',
+ value: 'tab2',
+ selected: true,
+ content: {
+ body: 'Content 2',
+ },
+ },
+ ];
+
+ const card = new ChatItemTabbedCard({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ tabbedCard,
+ });
+
+ // Check that the selected tab's content is rendered
+ expect(card.contentCard.props.chatItem.body).toBe('Content 2');
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-tree-file.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-file.spec.ts
new file mode 100644
index 0000000000..54c984f615
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-file.spec.ts
@@ -0,0 +1,15 @@
+import { ChatItemTreeFile } from '../../chat-item/chat-item-tree-file';
+
+describe('ChatItemTreeFile', () => {
+ it('should render tree file with basic properties', () => {
+ const treeFile = new ChatItemTreeFile({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ filePath: '/src/test.ts',
+ originalFilePath: '/src/test.ts',
+ fileName: 'test.ts',
+ });
+
+ expect(treeFile.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view-license.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view-license.spec.ts
new file mode 100644
index 0000000000..f38de1f1e8
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view-license.spec.ts
@@ -0,0 +1,12 @@
+import { ChatItemTreeViewLicense } from '../../chat-item/chat-item-tree-view-license';
+
+describe('ChatItemTreeViewLicense', () => {
+ it('should render tree view license', () => {
+ const license = new ChatItemTreeViewLicense({
+ referenceSuggestionLabel: 'Test Reference',
+ references: [],
+ });
+
+ expect(license.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view-wrapper.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view-wrapper.spec.ts
new file mode 100644
index 0000000000..dc45c969d8
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view-wrapper.spec.ts
@@ -0,0 +1,17 @@
+import { ChatItemTreeViewWrapper } from '../../chat-item/chat-item-tree-view-wrapper';
+
+describe('ChatItemTreeViewWrapper', () => {
+ it('should render tree view wrapper', () => {
+ const wrapper = new ChatItemTreeViewWrapper({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ files: [],
+ deletedFiles: [],
+ referenceSuggestionLabel: 'Test Reference',
+ references: [],
+ onRootCollapsedStateChange: jest.fn(),
+ });
+
+ expect(wrapper.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view.spec.ts
new file mode 100644
index 0000000000..e41e5e8bfb
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-item-tree-view.spec.ts
@@ -0,0 +1,21 @@
+import { ChatItemTreeView } from '../../chat-item/chat-item-tree-view';
+
+describe('ChatItemTreeView', () => {
+ it('should render tree view with file node', () => {
+ const fileNode = {
+ type: 'file' as const,
+ name: 'test.ts',
+ filePath: '/src/test.ts',
+ originalFilePath: '/src/test.ts',
+ deleted: false,
+ };
+
+ const treeView = new ChatItemTreeView({
+ tabId: 'test-tab',
+ messageId: 'test-message',
+ node: fileNode,
+ });
+
+ expect(treeView.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-command.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-command.spec.ts
new file mode 100644
index 0000000000..77e3e69dc4
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-command.spec.ts
@@ -0,0 +1,49 @@
+import { ChatPromptInputCommand } from '../../chat-item/chat-prompt-input-command';
+
+describe('chat-prompt-input-command', () => {
+ it('renders with command text', () => {
+ const command = new ChatPromptInputCommand({
+ command: 'test-command',
+ onRemoveClick: () => {},
+ });
+
+ expect(command.render.querySelector('.mynah-chat-prompt-input-command-text')).toBeDefined();
+ expect(command.render.classList.contains('hidden')).toBe(false);
+ });
+
+ it('handles empty command', () => {
+ const command = new ChatPromptInputCommand({
+ command: '',
+ onRemoveClick: () => {},
+ });
+
+ expect(command.render.classList.contains('hidden')).toBe(true);
+ });
+
+ it('handles remove click', () => {
+ let removeClicked = false;
+ const command = new ChatPromptInputCommand({
+ command: 'test-command',
+ onRemoveClick: () => {
+ removeClicked = true;
+ },
+ });
+
+ const textElement = command.render.querySelector('.mynah-chat-prompt-input-command-text') as HTMLElement;
+ textElement.click();
+ expect(removeClicked).toBe(true);
+ });
+
+ it('sets command text', () => {
+ const command = new ChatPromptInputCommand({
+ command: 'initial',
+ onRemoveClick: () => {},
+ });
+
+ command.setCommand('new-command');
+ expect(command.render.classList.contains('hidden')).toBe(false);
+
+ command.setCommand('');
+ expect(command.render.classList.contains('hidden')).toBe(true);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-info.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-info.spec.ts
new file mode 100644
index 0000000000..65b0eb9eac
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-info.spec.ts
@@ -0,0 +1,108 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { MynahEventNames } from '../../../static';
+import { ChatPromptInputInfo } from '../../chat-item/chat-prompt-input-info';
+
+describe('chat-prompt-input-info', () => {
+ it('renders with info text', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputInfo: 'Test info message',
+ },
+ }) as string;
+
+ const info = new ChatPromptInputInfo({
+ tabId: testTabId,
+ });
+
+ expect(info.render.querySelector('.mynah-chat-prompt-input-info')).toBeDefined();
+ expect(info.render.textContent).toContain('Test info message');
+ });
+
+ it('handles empty info', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputInfo: '',
+ },
+ }) as string;
+
+ const info = new ChatPromptInputInfo({
+ tabId: testTabId,
+ });
+
+ expect(info.render.children.length).toBe(0);
+ });
+
+ it('updates info text', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputInfo: 'Initial info',
+ },
+ }) as string;
+
+ const info = new ChatPromptInputInfo({
+ tabId: testTabId,
+ });
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: {
+ promptInputInfo: 'Updated info',
+ },
+ });
+
+ expect(info.render.textContent).toContain('Updated info');
+ });
+
+ it('clears info when set to null', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputInfo: 'Initial info',
+ },
+ }) as string;
+
+ const info = new ChatPromptInputInfo({
+ tabId: testTabId,
+ });
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: {
+ promptInputInfo: '',
+ },
+ });
+
+ expect(info.render.children.length).toBe(0);
+ });
+
+ it('handles link clicks', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputInfo: 'Test link ',
+ },
+ }) as string;
+
+ let linkClicked = false;
+ const originalDispatch = MynahUIGlobalEvents.getInstance().dispatch;
+ MynahUIGlobalEvents.getInstance().dispatch = (eventName: string) => {
+ if (eventName === MynahEventNames.INFO_LINK_CLICK) {
+ linkClicked = true;
+ }
+ };
+
+ const info = new ChatPromptInputInfo({
+ tabId: testTabId,
+ });
+
+ const link = info.render.querySelector('a') as HTMLElement;
+ if (link != null) {
+ link.click();
+ expect(linkClicked).toBe(true);
+ }
+
+ MynahUIGlobalEvents.getInstance().dispatch = originalDispatch;
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-sticky-card.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-sticky-card.spec.ts
new file mode 100644
index 0000000000..fcea1008af
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input-sticky-card.spec.ts
@@ -0,0 +1,86 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { ChatPromptInputStickyCard } from '../../chat-item/chat-prompt-input-sticky-card';
+
+describe('chat-prompt-input-sticky-card', () => {
+ it('renders with sticky card data', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputStickyCard: {
+ body: 'Test sticky card content',
+ messageId: 'test-message',
+ },
+ },
+ }) as string;
+
+ const stickyCard = new ChatPromptInputStickyCard({
+ tabId: testTabId,
+ });
+
+ expect(stickyCard.render.querySelector('.mynah-chat-prompt-input-sticky-card')).toBeDefined();
+ expect(stickyCard.render.textContent).toContain('Test sticky card content');
+ });
+
+ it('handles null sticky card', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputStickyCard: null,
+ },
+ }) as string;
+
+ const stickyCard = new ChatPromptInputStickyCard({
+ tabId: testTabId,
+ });
+
+ expect(stickyCard.render.children.length).toBe(0);
+ });
+
+ it('updates sticky card content', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputStickyCard: {
+ body: 'Initial content',
+ },
+ },
+ }) as string;
+
+ const stickyCard = new ChatPromptInputStickyCard({
+ tabId: testTabId,
+ });
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: {
+ promptInputStickyCard: {
+ body: 'Updated content',
+ },
+ },
+ });
+
+ expect(stickyCard.render.textContent).toContain('Updated content');
+ });
+
+ it('clears sticky card when set to null', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputStickyCard: {
+ body: 'Initial content',
+ },
+ },
+ }) as string;
+
+ const stickyCard = new ChatPromptInputStickyCard({
+ tabId: testTabId,
+ });
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: {
+ promptInputStickyCard: null,
+ },
+ });
+
+ expect(stickyCard.render.children.length).toBe(0);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-prompt-input.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input.spec.ts
new file mode 100644
index 0000000000..af3c9f8175
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-prompt-input.spec.ts
@@ -0,0 +1,32 @@
+import { ChatPromptInput } from '../../chat-item/chat-prompt-input';
+
+// Mock the tabs store
+jest.mock('../../../helper/tabs-store', () => ({
+ MynahUITabsStore: {
+ getInstance: jest.fn(() => ({
+ getTabDataStore: jest.fn(() => ({
+ subscribe: jest.fn(),
+ getValue: jest.fn((key: string) => {
+ // Return appropriate string values for string-expected keys
+ if (key === 'promptInputText' || key === 'promptInputLabel' || key === 'promptInputInfo') {
+ return '';
+ }
+ // Return false for boolean keys
+ return false;
+ }),
+ updateStore: jest.fn(),
+ })),
+ addListenerToDataStore: jest.fn(),
+ })),
+ },
+}));
+
+describe('ChatPromptInput', () => {
+ it('should render chat prompt input', () => {
+ const input = new ChatPromptInput({
+ tabId: 'test-tab',
+ });
+
+ expect(input.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/chat-wrapper.spec.ts b/mynah-ui/src/components/__test__/chat-item/chat-wrapper.spec.ts
new file mode 100644
index 0000000000..7705eafa8a
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/chat-wrapper.spec.ts
@@ -0,0 +1,32 @@
+import { ChatWrapper } from '../../chat-item/chat-wrapper';
+
+// Mock the tabs store
+jest.mock('../../../helper/tabs-store', () => ({
+ MynahUITabsStore: {
+ getInstance: jest.fn(() => ({
+ getTabDataStore: jest.fn(() => ({
+ subscribe: jest.fn(),
+ getValue: jest.fn((key: string) => {
+ // Return appropriate string values for string-expected keys
+ if (key === 'promptInputInfo' || key === 'promptInputLabel' || key === 'promptInputText') {
+ return '';
+ }
+ // Return empty object for other keys
+ return {};
+ }),
+ updateStore: jest.fn(),
+ })),
+ addListenerToDataStore: jest.fn(),
+ })),
+ },
+}));
+
+describe('ChatWrapper', () => {
+ it('should render chat wrapper', () => {
+ const wrapper = new ChatWrapper({
+ tabId: 'test-tab',
+ });
+
+ expect(wrapper.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-attachment.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-attachment.spec.ts
new file mode 100644
index 0000000000..bcb88f89e0
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-attachment.spec.ts
@@ -0,0 +1,64 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { PromptAttachment } from '../../chat-item/prompt-input/prompt-attachment';
+
+describe('prompt-attachment', () => {
+ it('renders code attachment', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptAttachment({
+ tabId: testTabId,
+ });
+
+ attachment.updateAttachment('console.log("test");', 'code');
+ expect(attachment.render.querySelector('.outer-container')).toBeDefined();
+ expect(attachment.lastAttachmentContent).toContain('console.log("test");');
+ });
+
+ it('handles markdown attachment', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptAttachment({
+ tabId: testTabId,
+ });
+
+ attachment.updateAttachment('# Test Markdown', 'markdown');
+ expect(attachment.lastAttachmentContent).toContain('# Test Markdown');
+ });
+
+ it('clears attachment', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptAttachment({
+ tabId: testTabId,
+ });
+
+ attachment.updateAttachment('test content', 'code');
+ expect(attachment.lastAttachmentContent).not.toBe('');
+
+ attachment.clear();
+ expect(attachment.lastAttachmentContent).toBe('');
+ });
+
+ it('handles empty attachment', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptAttachment({
+ tabId: testTabId,
+ });
+
+ attachment.updateAttachment(undefined, 'code');
+ expect(attachment.lastAttachmentContent).toBe('');
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-input-send-button.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-input-send-button.spec.ts
new file mode 100644
index 0000000000..8810b708c5
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-input-send-button.spec.ts
@@ -0,0 +1,49 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { PromptInputSendButton } from '../../chat-item/prompt-input/prompt-input-send-button';
+
+describe('prompt-input-send-button', () => {
+ it('renders with correct attributes', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputDisabledState: false,
+ },
+ }) as string;
+
+ let clicked = false;
+ const sendButton = new PromptInputSendButton({
+ tabId: testTabId,
+ onClick: () => {
+ clicked = true;
+ },
+ });
+
+ expect(sendButton.render.querySelector('[data-testid="prompt-input-send-button"]')).toBeDefined();
+ expect(sendButton.render.getAttribute('disabled')).toBe(null);
+
+ sendButton.render.click();
+ expect(clicked).toBe(true);
+ });
+
+ it('handles disabled state changes', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputDisabledState: true,
+ },
+ }) as string;
+
+ const sendButton = new PromptInputSendButton({
+ tabId: testTabId,
+ onClick: () => {},
+ });
+
+ expect(sendButton.render.getAttribute('disabled')).toBe('disabled');
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: { promptInputDisabledState: false },
+ });
+
+ expect(sendButton.render.getAttribute('disabled')).toBe(null);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-input-stop-button.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-input-stop-button.spec.ts
new file mode 100644
index 0000000000..8e4b4995d3
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-input-stop-button.spec.ts
@@ -0,0 +1,61 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { PromptInputStopButton } from '../../chat-item/prompt-input/prompt-input-stop-button';
+
+describe('prompt-input-stop-button', () => {
+ it('renders with correct visibility states', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ cancelButtonWhenLoading: false,
+ loadingChat: false,
+ },
+ }) as string;
+
+ let clicked = false;
+ const stopButton = new PromptInputStopButton({
+ tabId: testTabId,
+ onClick: () => {
+ clicked = true;
+ },
+ });
+
+ expect(stopButton.render.classList.contains('hidden')).toBe(true);
+
+ stopButton.render.click();
+ expect(clicked).toBe(true);
+ });
+
+ it('shows when loading and cancel button enabled', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ cancelButtonWhenLoading: true,
+ loadingChat: true,
+ },
+ }) as string;
+
+ const stopButton = new PromptInputStopButton({
+ tabId: testTabId,
+ onClick: () => {},
+ });
+
+ expect(stopButton.render.classList.contains('hidden')).toBe(false);
+ });
+
+ it('hides when not loading', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ cancelButtonWhenLoading: true,
+ loadingChat: false,
+ },
+ }) as string;
+
+ const stopButton = new PromptInputStopButton({
+ tabId: testTabId,
+ onClick: () => {},
+ });
+
+ expect(stopButton.render.classList.contains('hidden')).toBe(true);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-options.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-options.spec.ts
new file mode 100644
index 0000000000..935bfcdbb2
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-options.spec.ts
@@ -0,0 +1,60 @@
+import { PromptOptions } from '../../chat-item/prompt-input/prompt-options';
+
+describe('prompt-options', () => {
+ it('renders with filter options', () => {
+ const filterOptions = [
+ {
+ id: 'test-select',
+ type: 'select' as const,
+ title: 'Test Select',
+ options: [
+ { value: 'option1', label: 'Option 1' },
+ { value: 'option2', label: 'Option 2' },
+ ],
+ },
+ ];
+
+ const promptOptions = new PromptOptions({
+ filterOptions,
+ buttons: [],
+ onFiltersChange: () => {},
+ });
+
+ expect(promptOptions.render.querySelector('[data-testid="prompt-input-options"]')).toBeDefined();
+ expect(promptOptions.render.querySelector('select')).toBeDefined();
+ });
+
+ it('renders with buttons', () => {
+ const buttons = [
+ {
+ id: 'test-button',
+ text: 'Test Button',
+ status: 'info' as const,
+ },
+ ];
+
+ let clickedButtonId = '';
+ const promptOptions = new PromptOptions({
+ filterOptions: [],
+ buttons,
+ onButtonClick: (buttonId) => {
+ clickedButtonId = buttonId;
+ },
+ });
+
+ const button = promptOptions.render.querySelector('button');
+ expect(button).toBeDefined();
+
+ button?.click();
+ expect(clickedButtonId).toBe('test-button');
+ });
+
+ it('handles empty options', () => {
+ const promptOptions = new PromptOptions({
+ filterOptions: [],
+ buttons: [],
+ });
+
+ expect(promptOptions.render.children.length).toBeGreaterThanOrEqual(0);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-progress.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-progress.spec.ts
new file mode 100644
index 0000000000..7650012263
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-progress.spec.ts
@@ -0,0 +1,81 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { PromptInputProgress } from '../../chat-item/prompt-input/prompt-progress';
+
+describe('prompt-input-progress', () => {
+ it('renders with progress data', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputProgress: {
+ value: 75,
+ text: 'Processing request...',
+ actions: [
+ {
+ id: 'cancel',
+ text: 'Cancel',
+ },
+ ],
+ },
+ },
+ }) as string;
+
+ const progressInput = new PromptInputProgress({
+ tabId: testTabId,
+ });
+
+ expect(progressInput.render.querySelector('[data-testid="prompt-input-progress-wrapper"]')).toBeDefined();
+ });
+
+ it('handles progress updates', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputProgress: null,
+ },
+ }) as string;
+
+ const progressInput = new PromptInputProgress({
+ tabId: testTabId,
+ });
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: {
+ promptInputProgress: {
+ value: 50,
+ text: 'Updated progress',
+ },
+ },
+ });
+
+ expect(progressInput.render).toBeDefined();
+ });
+
+ it('handles action clicks', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputProgress: {
+ value: 25,
+ text: 'Loading...',
+ actions: [
+ {
+ id: 'stop',
+ text: 'Stop',
+ },
+ ],
+ },
+ },
+ }) as string;
+
+ const originalDispatch = MynahUIGlobalEvents.getInstance().dispatch;
+ MynahUIGlobalEvents.getInstance().dispatch = () => {};
+
+ const progressInput = new PromptInputProgress({
+ tabId: testTabId,
+ });
+ expect(progressInput).toBeDefined();
+
+ MynahUIGlobalEvents.getInstance().dispatch = originalDispatch;
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-text-attachment.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-text-attachment.spec.ts
new file mode 100644
index 0000000000..cb6032ad86
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-text-attachment.spec.ts
@@ -0,0 +1,80 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { PromptTextAttachment } from '../../chat-item/prompt-input/prompt-text-attachment';
+
+describe('prompt-text-attachment', () => {
+ it('renders with content', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptTextAttachment({
+ tabId: testTabId,
+ content: 'test content',
+ type: 'markdown',
+ });
+
+ expect(attachment.render.querySelector('.mynah-chat-prompt-attachment')).toBeDefined();
+ });
+
+ it('handles code type', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptTextAttachment({
+ tabId: testTabId,
+ content: 'console.log("test");',
+ type: 'code',
+ });
+
+ expect(attachment.render.querySelector('.mynah-chat-prompt-attachment')).toBeDefined();
+ });
+
+ it('handles remove click', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptTextAttachment({
+ tabId: testTabId,
+ content: 'test content',
+ type: 'markdown',
+ });
+
+ expect(attachment.render).toBeDefined();
+ });
+
+ it('clears content', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptTextAttachment({
+ tabId: testTabId,
+ content: 'test content',
+ type: 'markdown',
+ });
+
+ attachment.clear();
+ expect(attachment.render).toBeDefined();
+ });
+
+ it('handles empty content', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const attachment = new PromptTextAttachment({
+ tabId: testTabId,
+ content: '',
+ type: 'markdown',
+ });
+
+ expect(attachment.render).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-text-input.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-text-input.spec.ts
new file mode 100644
index 0000000000..fc4c5ad1ba
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-text-input.spec.ts
@@ -0,0 +1,306 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { PromptTextInput } from '../../chat-item/prompt-input/prompt-text-input';
+import { Config } from '../../../helper/config';
+
+describe('prompt-text-input', () => {
+ it('renders with correct attributes', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputPlaceholder: 'Enter your prompt...',
+ promptInputDisabledState: false,
+ },
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input');
+ expect(inputElement?.getAttribute('placeholder')).toBe('Enter your prompt...');
+ expect(inputElement?.getAttribute('contenteditable')).toBe('plaintext-only');
+ expect(inputElement?.getAttribute('maxlength')).toBe('4000');
+ });
+
+ it('handles disabled state', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputDisabledState: true,
+ },
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input');
+ expect(inputElement?.getAttribute('disabled')).toBe('disabled');
+ expect(inputElement?.getAttribute('contenteditable')).toBe('plaintext-only');
+ expect(inputElement?.getAttribute('disabled')).toBe('disabled');
+ });
+
+ it('handles focus and blur events', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ let focused = false;
+ let blurred = false;
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ onFocus: () => {
+ focused = true;
+ },
+ onBlur: () => {
+ blurred = true;
+ },
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input') as HTMLElement;
+
+ inputElement.dispatchEvent(new FocusEvent('focus'));
+ expect(focused).toBe(true);
+
+ inputElement.dispatchEvent(new FocusEvent('blur'));
+ expect(blurred).toBe(true);
+ });
+
+ it('handles input events', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ let inputCalled = false;
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ onInput: () => {
+ inputCalled = true;
+ },
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input') as HTMLElement;
+ inputElement.dispatchEvent(new Event('input'));
+ expect(inputCalled).toBe(true);
+ });
+
+ it('updates placeholder text', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputPlaceholder: 'Initial placeholder',
+ },
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: {
+ promptInputPlaceholder: 'Updated placeholder',
+ },
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input');
+ expect(inputElement?.getAttribute('placeholder')).toBe('Updated placeholder');
+ });
+
+ it('handles paste events', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input') as HTMLElement;
+
+ inputElement.dispatchEvent(new Event('paste'));
+ expect(textInput).toBeDefined();
+ });
+
+ it('manages text input value and clearing', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ // Test that methods exist and can be called
+ textInput.updateTextInputValue('test value');
+ textInput.clear();
+ expect(textInput.getTextInputValue()).toBe('');
+ });
+
+ it('handles focus and blur methods', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ Config.getInstance().config.autoFocus = true;
+ textInput.focus();
+ textInput.blur();
+
+ expect(textInput).toBeDefined();
+ });
+
+ it('updates max length', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ textInput.updateTextInputMaxLength(2000);
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input');
+ expect(inputElement?.getAttribute('maxlength')).toBe('2000');
+ });
+
+ it('inserts context items', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ const contextItem = {
+ command: 'test-command',
+ description: 'Test command',
+ };
+
+ textInput.insertContextItem(contextItem, 0);
+ expect(textInput.getUsedContext()).toBeDefined();
+ });
+
+ it('deletes text range', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ textInput.updateTextInputValue('hello world');
+ textInput.deleteTextRange(0, 5);
+ expect(textInput).toBeDefined();
+ });
+
+ it('inserts end space', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ textInput.updateTextInputValue('test');
+ textInput.insertEndSpace();
+ expect(textInput).toBeDefined();
+ });
+
+ it('handles keydown events', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ let keydownCalled = false;
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {
+ keydownCalled = true;
+ },
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input') as HTMLElement;
+ inputElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+ expect(keydownCalled).toBe(true);
+ });
+
+ it('handles disabled state changes', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {
+ promptInputDisabledState: false,
+ },
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ MynahUITabsStore.getInstance().updateTab(testTabId, {
+ store: {
+ promptInputDisabledState: true,
+ },
+ });
+
+ const inputElement = textInput.render.querySelector('.mynah-chat-prompt-input');
+ expect(inputElement?.getAttribute('disabled')).toBe('disabled');
+ });
+
+ it('gets cursor position', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const textInput = new PromptTextInput({
+ tabId: testTabId,
+ initMaxLength: 1000,
+ onKeydown: () => {},
+ });
+
+ expect(textInput.getCursorPos()).toBe(0);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-top-bar-button.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-top-bar-button.spec.ts
new file mode 100644
index 0000000000..cedde5dba3
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-top-bar-button.spec.ts
@@ -0,0 +1,52 @@
+import { TopBarButton } from '../../chat-item/prompt-input/prompt-top-bar/top-bar-button';
+
+describe('top-bar-button', () => {
+ it('renders without button', () => {
+ const topBarButton = new TopBarButton({
+ topBarButton: undefined,
+ onTopBarButtonClick: undefined,
+ });
+
+ expect(topBarButton.render).toBeDefined();
+ });
+
+ it('renders with button', () => {
+ const button = {
+ id: 'test-button',
+ text: 'Test Button',
+ status: 'info' as const,
+ };
+
+ let buttonClicked = false;
+ const topBarButton = new TopBarButton({
+ topBarButton: button,
+ onTopBarButtonClick: () => {
+ buttonClicked = true;
+ },
+ });
+
+ expect(topBarButton.render.classList.contains('hidden')).toBe(false);
+
+ const buttonElement = topBarButton.render.querySelector('.mynah-button') as HTMLElement;
+ if (buttonElement != null) {
+ buttonElement.click();
+ expect(buttonClicked).toBe(true);
+ }
+ });
+
+ it('handles different button states', () => {
+ const button = {
+ id: 'test-button',
+ text: 'Test Button',
+ status: 'success' as const,
+ };
+
+ const topBarButton = new TopBarButton({
+ topBarButton: button,
+ onTopBarButtonClick: () => {},
+ });
+
+ expect(topBarButton.render.classList.contains('hidden')).toBe(false);
+ expect(topBarButton.render.querySelector('.mynah-button')).toBeDefined();
+ });
+});
diff --git a/mynah-ui/src/components/__test__/chat-item/prompt-top-bar.spec.ts b/mynah-ui/src/components/__test__/chat-item/prompt-top-bar.spec.ts
new file mode 100644
index 0000000000..b90d1fcecf
--- /dev/null
+++ b/mynah-ui/src/components/__test__/chat-item/prompt-top-bar.spec.ts
@@ -0,0 +1,102 @@
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { PromptTopBar } from '../../chat-item/prompt-input/prompt-top-bar/prompt-top-bar';
+
+describe('prompt-top-bar', () => {
+ it('renders with title', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ let titleClicked = false;
+ const topBar = new PromptTopBar({
+ tabId: testTabId,
+ title: 'Test Title',
+ onTopBarTitleClick: () => {
+ titleClicked = true;
+ },
+ });
+
+ expect(topBar.render.querySelector('[data-testid="prompt-input-top-bar"]')).toBeDefined();
+
+ const titleButton = topBar.render.querySelector('button');
+ titleButton?.click();
+ expect(titleClicked).toBe(true);
+ });
+
+ it('renders with context items', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const contextItems = [
+ {
+ command: 'test-context',
+ description: 'Test Context Item',
+ },
+ ];
+
+ const topBar = new PromptTopBar({
+ tabId: testTabId,
+ contextItems,
+ onContextItemAdd: () => {},
+ onContextItemRemove: () => {},
+ });
+
+ expect(topBar.render.querySelector('.mynah-prompt-input-top-bar')).toBeDefined();
+ });
+
+ it('renders with top bar button', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const topBarButton = {
+ id: 'test-button',
+ text: 'Test Button',
+ };
+
+ const topBar = new PromptTopBar({
+ tabId: testTabId,
+ topBarButton,
+ onTopBarButtonClick: () => {},
+ });
+
+ expect(topBar.topBarButton).toBeDefined();
+ });
+
+ it('handles hidden state', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const topBar = new PromptTopBar({
+ tabId: testTabId,
+ });
+
+ expect(topBar.render.classList.contains('hidden')).toBe(true);
+ });
+
+ it('shows when title or context items provided', () => {
+ const testTabId = MynahUITabsStore.getInstance().addTab({
+ isSelected: true,
+ store: {},
+ }) as string;
+
+ const topBar = new PromptTopBar({
+ tabId: testTabId,
+ title: 'Test Title',
+ contextItems: [
+ {
+ command: 'test',
+ description: 'Test',
+ },
+ ],
+ });
+
+ expect(topBar.render.classList.contains('hidden')).toBe(false);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/feedback-form/feedback-form.spec.ts b/mynah-ui/src/components/__test__/feedback-form/feedback-form.spec.ts
new file mode 100644
index 0000000000..65a2f20947
--- /dev/null
+++ b/mynah-ui/src/components/__test__/feedback-form/feedback-form.spec.ts
@@ -0,0 +1,71 @@
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { MynahEventNames } from '../../../static';
+import { FeedbackForm } from '../../feedback-form/feedback-form';
+
+describe('feedback form', () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('submit', () => {
+ const testFeedbackForm = new FeedbackForm({
+ initPayload: {
+ selectedOption: 'buggy-code',
+ comment: 'test comment',
+ messageId: 'test-message-id',
+ tabId: 'test-tab-id',
+ },
+ });
+
+ const spyDispatch = jest.spyOn(MynahUIGlobalEvents.getInstance(), 'dispatch');
+
+ // Actually render the portal
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.SHOW_FEEDBACK_FORM, {
+ messageId: 'test-message-id',
+ tabId: 'test-tab-id',
+ });
+
+ const submitButtonElement =
+ testFeedbackForm.defaultFeedbackFormItems[
+ testFeedbackForm.defaultFeedbackFormItems.length - 1
+ ].querySelectorAll('button')[1];
+ expect(submitButtonElement.textContent).toBe('Submit');
+ submitButtonElement.click();
+ expect(spyDispatch).toHaveBeenCalledTimes(4);
+ expect(spyDispatch).toHaveBeenNthCalledWith(1, MynahEventNames.SHOW_FEEDBACK_FORM, {
+ messageId: 'test-message-id',
+ tabId: 'test-tab-id',
+ });
+ });
+
+ it('cancel', () => {
+ const testFeedbackForm = new FeedbackForm({
+ initPayload: {
+ selectedOption: 'buggy-code',
+ comment: 'test comment',
+ messageId: 'test-message-id',
+ tabId: 'test-tab-id',
+ },
+ });
+
+ const spyDispatch = jest.spyOn(MynahUIGlobalEvents.getInstance(), 'dispatch');
+
+ // Actually render the portal
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.SHOW_FEEDBACK_FORM, {
+ messageId: 'test-message-id',
+ tabId: 'test-tab-id',
+ });
+
+ const cancelButtonElement =
+ testFeedbackForm.defaultFeedbackFormItems[
+ testFeedbackForm.defaultFeedbackFormItems.length - 1
+ ].querySelectorAll('button')[0];
+ expect(cancelButtonElement.textContent).toBe('Cancel');
+ cancelButtonElement.click();
+ expect(spyDispatch).toHaveBeenCalledTimes(4);
+ expect(spyDispatch).toHaveBeenNthCalledWith(1, MynahEventNames.SHOW_FEEDBACK_FORM, {
+ messageId: 'test-message-id',
+ tabId: 'test-tab-id',
+ });
+ });
+});
diff --git a/mynah-ui/src/components/__test__/notification.spec.ts b/mynah-ui/src/components/__test__/notification.spec.ts
new file mode 100644
index 0000000000..9122df7b23
--- /dev/null
+++ b/mynah-ui/src/components/__test__/notification.spec.ts
@@ -0,0 +1,23 @@
+import { Notification } from '../notification';
+
+describe('notification', () => {
+ it('notify', () => {
+ const mockClickHandler = jest.fn();
+ const mockCloseHandler = jest.fn();
+ const testNotification = new Notification({
+ title: 'test notification title',
+ content: 'test notification content',
+ onNotificationClick: mockClickHandler,
+ onNotificationHide: mockCloseHandler,
+ });
+ testNotification.notify();
+ const notificationElement: HTMLDivElement | null = document.body.querySelector('.mynah-notification');
+ expect(notificationElement?.querySelector('h3')?.textContent).toBe('test notification title');
+ expect(notificationElement?.querySelector('.mynah-notification-content')?.textContent).toBe(
+ 'test notification content',
+ );
+ notificationElement?.click();
+ expect(mockClickHandler).toHaveBeenCalledTimes(1);
+ expect(mockCloseHandler).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/mynah-ui/src/components/__test__/syntax-highlighter.spec.ts b/mynah-ui/src/components/__test__/syntax-highlighter.spec.ts
new file mode 100644
index 0000000000..080813f737
--- /dev/null
+++ b/mynah-ui/src/components/__test__/syntax-highlighter.spec.ts
@@ -0,0 +1,38 @@
+import { SyntaxHighlighter } from '../syntax-highlighter';
+
+describe('syntax-highlighter', () => {
+ it('render', () => {
+ const testSyntaxHighlighter = new SyntaxHighlighter({
+ codeStringWithMarkup: 'alert("hello");\n',
+ language: 'js',
+ block: true,
+ });
+
+ expect(testSyntaxHighlighter.render.outerHTML.replace('\n', '')).toBe(
+ '',
+ );
+ });
+
+ it('should show buttons if showCopyButtons true and related events are connected', () => {
+ const testSyntaxHighlighter = new SyntaxHighlighter({
+ codeStringWithMarkup: 'alert("hello");\n',
+ language: 'typescript',
+ codeBlockActions: {
+ copy: {
+ id: 'copy',
+ label: 'Copy',
+ },
+ 'insert-at-cursor': {
+ id: 'insert-at-cursor',
+ label: 'Insert at cursor',
+ },
+ },
+ onCopiedToClipboard: () => {},
+ onCodeBlockAction: () => {},
+ block: true,
+ });
+ expect(testSyntaxHighlighter.render.querySelectorAll('button')?.length).toBe(3);
+ expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[1]?.textContent).toBe('Copy');
+ expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[2]?.textContent).toBe('Insert at cursor');
+ });
+});
diff --git a/mynah-ui/src/components/__test__/toggle.spec.ts b/mynah-ui/src/components/__test__/toggle.spec.ts
new file mode 100644
index 0000000000..052560c020
--- /dev/null
+++ b/mynah-ui/src/components/__test__/toggle.spec.ts
@@ -0,0 +1,67 @@
+import { Tab } from '../tabs';
+
+describe('toggle (tabs)', () => {
+ it('items', () => {
+ const testToggle = new Tab({
+ options: [
+ {
+ label: 'label1',
+ value: 'value1',
+ },
+ {
+ label: 'label2',
+ value: 'value2',
+ },
+ ],
+ direction: 'horizontal',
+ name: 'testToggle',
+ value: 'value2',
+ });
+
+ expect(testToggle.render.textContent).toContain('label1');
+ expect(testToggle.render.textContent).toContain('label2');
+ expect(
+ (testToggle.render.children[0].querySelector('input') as HTMLInputElement).getAttribute('checked'),
+ ).toBeNull();
+ // Second item should be currently selected
+ expect((testToggle.render.children[1].querySelector('input') as HTMLInputElement).getAttribute('checked')).toBe(
+ 'checked',
+ );
+ });
+
+ it('event handler', () => {
+ const mockOnChangeHandler = jest.fn();
+ const mockOnRemoveHandler = jest.fn();
+
+ const testToggle = new Tab({
+ options: [],
+ direction: 'horizontal',
+ name: 'testToggle',
+ onChange: mockOnChangeHandler,
+ onRemove: mockOnRemoveHandler,
+ });
+
+ testToggle.addOption({
+ label: 'label1',
+ value: 'value1',
+ });
+ testToggle.addOption({
+ label: 'label2',
+ value: 'value2',
+ });
+ testToggle.setValue('value2');
+
+ // Try to click and select the first item
+ document.body.appendChild(testToggle.render as HTMLElement);
+ const firstItemElement = document.querySelector('span[key="testToggle-value1"]') as HTMLElement;
+ (firstItemElement.querySelector('input') as HTMLInputElement).click();
+ expect(mockOnChangeHandler).toHaveBeenCalledTimes(1);
+ expect(mockOnChangeHandler).toHaveBeenCalledWith('value1');
+
+ // Try to click the remove button on the second item
+ const secondItemElement = document.querySelector('span[key="testToggle-value2"]') as HTMLInputElement;
+ (secondItemElement.querySelector('button') as HTMLButtonElement).click();
+ expect(mockOnRemoveHandler).toHaveBeenCalledTimes(1);
+ expect(mockOnRemoveHandler).toHaveBeenCalledWith('value2', expect.anything());
+ });
+});
diff --git a/mynah-ui/src/components/background.ts b/mynah-ui/src/components/background.ts
new file mode 100644
index 0000000000..5f18f79f78
--- /dev/null
+++ b/mynah-ui/src/components/background.ts
@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { StyleLoader } from '../helper/style-loader';
+
+export class GradientBackground {
+ render: ExtendedHTMLElement;
+ constructor() {
+ StyleLoader.getInstance().load('components/_background.scss');
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-ui-gradient-background'],
+ innerHTML: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ });
+ }
+}
diff --git a/mynah-ui/src/components/button.ts b/mynah-ui/src/components/button.ts
new file mode 100644
index 0000000000..04b3c98544
--- /dev/null
+++ b/mynah-ui/src/components/button.ts
@@ -0,0 +1,297 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+ DomBuilder,
+ DomBuilderEventHandler,
+ DomBuilderEventHandlerWithOptions,
+ DomBuilderObject,
+ ExtendedHTMLElement,
+ GenericEvents,
+} from '../helper/dom';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from './overlay';
+import { Card } from './card/card';
+import { CardBody } from './card/card-body';
+import { Config } from '../helper/config';
+import { cancelEvent } from '../helper/events';
+import escapeHTML from 'escape-html';
+import unescapeHTML from 'unescape-html';
+import { parseMarkdown } from '../helper/marked';
+import { StyleLoader } from '../helper/style-loader';
+import { Icon } from './icon';
+
+const TOOLTIP_DELAY = 350;
+export interface ButtonProps {
+ classNames?: string[];
+ attributes?: Record;
+ icon?: HTMLElement | ExtendedHTMLElement;
+ testId?: string;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ confirmation?: {
+ confirmButtonText: string;
+ cancelButtonText: string;
+ title: string;
+ description?: string;
+ };
+ tooltip?: string;
+ tooltipVerticalDirection?: OverlayVerticalDirection;
+ tooltipHorizontalDirection?: OverlayHorizontalDirection;
+ children?: Array;
+ disabled?: boolean;
+ hidden?: boolean;
+ primary?: boolean;
+ border?: boolean;
+ status?: 'main' | 'primary' | 'info' | 'success' | 'warning' | 'error' | 'clear' | 'dimmed-clear';
+ fillState?: 'hover' | 'always';
+ additionalEvents?: Partial>;
+ onClick: (e: Event) => void;
+ onHover?: (e: Event) => void;
+}
+export abstract class ButtonAbstract {
+ render: ExtendedHTMLElement;
+ updateLabel = (label: HTMLElement | ExtendedHTMLElement | string): void => {};
+
+ setHidden = (hidden: boolean): void => {};
+
+ setEnabled = (enabled: boolean): void => {};
+
+ hideTooltip = (): void => {};
+}
+
+class ButtonInternal extends ButtonAbstract {
+ render: ExtendedHTMLElement;
+ private readonly props: ButtonProps;
+ private tooltipOverlay: Overlay | null;
+ private tooltipTimeout: ReturnType;
+ constructor(props: ButtonProps) {
+ StyleLoader.getInstance().load('components/_button.scss');
+ super();
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'button',
+ classNames: [
+ 'mynah-button',
+ ...(props.primary === false ? ['mynah-button-secondary'] : []),
+ ...(props.border === true ? ['mynah-button-border'] : []),
+ ...(props.hidden === true ? ['hidden'] : []),
+ ...[`fill-state-${props.fillState ?? 'always'}`],
+ ...(props.status != null ? [`status-${props.status}`] : []),
+ ...(props.classNames !== undefined ? props.classNames : []),
+ ],
+ testId: props.testId,
+ attributes: {
+ ...(props.disabled === true ? { disabled: 'disabled' } : {}),
+ tabindex: '0',
+ ...props.attributes,
+ },
+ events: {
+ ...props.additionalEvents,
+ click: (e) => {
+ this.hideTooltip();
+ cancelEvent(e);
+ if (this.props.disabled !== true) {
+ if (this.props.confirmation != null) {
+ const confirmationOverlay = new Overlay({
+ onClose: () => {},
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-button-confirmation-dialog-container'],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-button-confirmation-dialog-header'],
+ children: [
+ new Icon({ icon: 'warning' }).render,
+ {
+ type: 'h4',
+ children: [this.props.confirmation.title],
+ },
+ new Button({
+ icon: new Icon({ icon: 'cancel' }).render,
+ onClick: () => {
+ confirmationOverlay.close();
+ },
+ primary: false,
+ status: 'clear',
+ }).render,
+ ],
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-button-confirmation-dialog-body'],
+ innerHTML: parseMarkdown(this.props.confirmation.description ?? ''),
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-button-confirmation-dialog-buttons'],
+ children: [
+ new Button({
+ label: this.props.confirmation.cancelButtonText,
+ onClick: () => {
+ confirmationOverlay.close();
+ },
+ primary: false,
+ status: 'clear',
+ }).render,
+ new Button({
+ label: this.props.confirmation.confirmButtonText,
+ onClick: () => {
+ confirmationOverlay.close();
+ props.onClick(e);
+ },
+ primary: true,
+ }).render,
+ ],
+ },
+ ],
+ },
+ ],
+ background: true,
+ closeOnOutsideClick: false,
+ dimOutside: true,
+ horizontalDirection: OverlayHorizontalDirection.CENTER,
+ verticalDirection: OverlayVerticalDirection.CENTER,
+ referencePoint: { top: window.innerHeight / 2, left: window.innerWidth / 2 },
+ });
+ } else {
+ props.onClick(e);
+ }
+ }
+ },
+ mouseover: (e) => {
+ cancelEvent(e);
+ if (this.props.onHover != null) {
+ this.props.onHover(e);
+ }
+ const textContentSpan: HTMLSpanElement | null = this.render.querySelector('.mynah-button-label');
+ let tooltipText;
+ if (
+ props.label != null &&
+ typeof props.label === 'string' &&
+ textContentSpan != null &&
+ textContentSpan.offsetWidth < textContentSpan.scrollWidth
+ ) {
+ tooltipText = parseMarkdown(props.label ?? '', { includeLineBreaks: true });
+ }
+ if (props.tooltip !== undefined) {
+ if (tooltipText != null) {
+ tooltipText += '\n\n';
+ } else {
+ tooltipText = '';
+ }
+ tooltipText += parseMarkdown(props.tooltip ?? '', { includeLineBreaks: true });
+ }
+ if (tooltipText != null) {
+ this.showTooltip(tooltipText);
+ }
+ },
+ mouseleave: this.hideTooltip,
+ },
+ children: [
+ ...(props.icon !== undefined ? [props.icon] : []),
+ ...this.getButtonLabelDomBuilderObject(props.label),
+ ...(props.children ?? []),
+ ],
+ });
+ }
+
+ private readonly getButtonLabelDomBuilderObject = (
+ label?: HTMLElement | ExtendedHTMLElement | string,
+ ): DomBuilderObject[] => {
+ if (label !== undefined) {
+ if (typeof label !== 'string') {
+ return [{ type: 'span', classNames: ['mynah-button-label'], children: [label] }];
+ } else {
+ return [
+ {
+ type: 'span',
+ classNames: ['mynah-button-label'],
+ innerHTML: parseMarkdown(unescapeHTML(escapeHTML(label)), { inline: true }),
+ },
+ ];
+ }
+ }
+ return [];
+ };
+
+ private readonly showTooltip = (content: string): void => {
+ if (content.trim() !== undefined) {
+ clearTimeout(this.tooltipTimeout);
+ this.tooltipTimeout = setTimeout(() => {
+ const elm: HTMLElement = this.render;
+ this.tooltipOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: this.props.tooltipVerticalDirection ?? OverlayVerticalDirection.TO_TOP,
+ horizontalDirection:
+ this.props.tooltipHorizontalDirection ?? OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ new Card({
+ border: false,
+ children: [
+ new CardBody({
+ body: content,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ }, TOOLTIP_DELAY);
+ }
+ };
+
+ public readonly hideTooltip = (): void => {
+ clearTimeout(this.tooltipTimeout);
+ if (this.tooltipOverlay !== null) {
+ this.tooltipOverlay?.close();
+ this.tooltipOverlay = null;
+ }
+ };
+
+ public readonly updateLabel = (label: HTMLElement | ExtendedHTMLElement | string): void => {
+ (this.render.querySelector('.mynah-button-label') as ExtendedHTMLElement).replaceWith(
+ DomBuilder.getInstance().build(this.getButtonLabelDomBuilderObject(label)[0]),
+ );
+ };
+
+ public readonly setEnabled = (enabled: boolean): void => {
+ this.props.disabled = !enabled;
+ if (enabled) {
+ this.render.removeAttribute('disabled');
+ } else {
+ this.render.setAttribute('disabled', 'disabled');
+ }
+ };
+
+ public readonly setHidden = (hidden: boolean): void => {
+ this.props.hidden = hidden;
+ if (hidden) {
+ this.render.classList.add('hidden');
+ } else {
+ this.render.classList.remove('hidden');
+ }
+ };
+}
+
+export class Button extends ButtonAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: ButtonProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.Button ?? ButtonInternal)(props);
+ }
+
+ updateLabel = (label: HTMLElement | ExtendedHTMLElement | string): void => {};
+
+ setEnabled = (enabled: boolean): void => {};
+
+ setHidden = (hidden: boolean): void => {};
+
+ hideTooltip = (): void => {};
+}
diff --git a/mynah-ui/src/components/card/card-body.ts b/mynah-ui/src/components/card/card-body.ts
new file mode 100644
index 0000000000..089c1ccbb9
--- /dev/null
+++ b/mynah-ui/src/components/card/card-body.ts
@@ -0,0 +1,364 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { cleanupElement, DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import {
+ CodeBlockActions,
+ OnCodeBlockActionFunction,
+ OnCopiedToClipboardFunction,
+ ReferenceTrackerInformation,
+} from '../../static';
+import unescapeHTML from 'unescape-html';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+import { SyntaxHighlighter } from '../syntax-highlighter';
+import { generateUID } from '../../helper/guid';
+import { Config } from '../../helper/config';
+import { parseMarkdown } from '../../helper/marked';
+import { StyleLoader } from '../../helper/style-loader';
+import { escapeHtml } from '../../helper/sanitize';
+
+const PREVIEW_DELAY = 500;
+
+export const highlightersWithTooltip = {
+ start: {
+ markupStart: ' `marker-index=${markerIndex}`,
+ markupEnd: ' reference-tracker>',
+ },
+ end: {
+ markup: ' ',
+ },
+};
+
+export const PARTS_CLASS_NAME = 'typewriter-part';
+export const PARTS_CLASS_NAME_VISIBLE = 'typewriter';
+
+export interface CardBodyProps {
+ body?: string;
+ testId?: string;
+ children?: Array;
+ childLocation?: 'above-body' | 'below-body';
+ highlightRangeWithTooltip?: ReferenceTrackerInformation[] | null;
+ hideCodeBlockLanguage?: boolean;
+ wrapCode?: boolean;
+ unlimitedCodeBlockHeight?: boolean;
+ codeBlockActions?: CodeBlockActions;
+ useParts?: boolean;
+ codeBlockStartIndex?: number;
+ processChildren?: boolean;
+ classNames?: string[];
+ onLinkClick?: (url: string, e: MouseEvent) => void;
+ onCopiedToClipboard?: OnCopiedToClipboardFunction;
+ onCodeBlockAction?: OnCodeBlockActionFunction;
+}
+export class CardBody {
+ render: ExtendedHTMLElement;
+ props: CardBodyProps;
+ nextCodeBlockIndex: number = 0;
+ codeBlockStartIndex: number = 0;
+ private highlightRangeTooltip: Overlay | null;
+ private highlightRangeTooltipTimeout: ReturnType;
+ constructor(props: CardBodyProps) {
+ StyleLoader.getInstance().load('components/card/_card.scss');
+ this.codeBlockStartIndex = props.codeBlockStartIndex ?? 0;
+ this.props = props;
+ const bodyChildren = this.getContentBodyChildren(this.props);
+ const childList = [
+ ...bodyChildren,
+ ...(this.props.children != null
+ ? this.props.processChildren === true
+ ? this.props.children.map((node, index) => {
+ const processedNode = this.processNode(node as HTMLElement);
+ processedNode.setAttribute?.('render-index', (bodyChildren.length + index).toString());
+ cleanupElement(processedNode);
+ return processedNode;
+ })
+ : this.props.children.map((node, index): HTMLElement => {
+ (node as HTMLElement)?.setAttribute?.(
+ 'render-index',
+ (bodyChildren.length + index).toString(),
+ );
+ return node as HTMLElement;
+ })
+ : []),
+ ];
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: this.props.testId,
+ classNames: ['mynah-card-body', ...(this.props.classNames ?? [])],
+ children: this.props.childLocation === 'above-body' ? childList.reverse() : childList,
+ });
+ cleanupElement(this.render);
+
+ Array.from(this.render.querySelectorAll('mark[reference-tracker]')).forEach((highlightRangeElement) => {
+ highlightRangeElement.addEventListener('mouseenter', (e) => {
+ const index = parseInt((e.target as HTMLElement).getAttribute('marker-index') ?? '0');
+ if (props.highlightRangeWithTooltip?.[index] !== undefined) {
+ this.showHighlightRangeTooltip(e as MouseEvent, props.highlightRangeWithTooltip[index].information);
+ }
+ });
+ highlightRangeElement.addEventListener('mouseleave', this.hideHighlightRangeTooltip);
+ });
+ }
+
+ private readonly processNode = (node: HTMLElement): HTMLElement => {
+ let elementFromNode: HTMLElement = node;
+ if (
+ this.props.useParts === true &&
+ elementFromNode.nodeType === Node.TEXT_NODE &&
+ elementFromNode.textContent?.trim() !== ''
+ ) {
+ elementFromNode = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['mynah-ui-animation-text-content'],
+ children: elementFromNode.textContent?.split(' ').map((textPart) =>
+ DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: [PARTS_CLASS_NAME],
+ children: [escapeHtml(textPart), ' '],
+ }),
+ ),
+ });
+ } else {
+ if (elementFromNode.tagName?.toLowerCase() === 'a') {
+ const url = elementFromNode.getAttribute('href') ?? '';
+ return DomBuilder.getInstance().build({
+ type: 'a',
+ classNames: this.props.useParts === true ? [PARTS_CLASS_NAME] : [],
+ events: {
+ click: (e: MouseEvent) => {
+ if (this.props.onLinkClick !== undefined) {
+ this.props.onLinkClick(url, e);
+ }
+ },
+ auxclick: (e: MouseEvent) => {
+ if (this.props.onLinkClick !== undefined) {
+ this.props.onLinkClick(url, e);
+ }
+ },
+ },
+ attributes: { href: elementFromNode.getAttribute('href') ?? '', target: '_blank' },
+ innerHTML: elementFromNode.innerHTML,
+ });
+ }
+ if (
+ (elementFromNode.tagName?.toLowerCase() === 'pre' && elementFromNode.querySelector('code') !== null) ||
+ elementFromNode.tagName?.toLowerCase() === 'code'
+ ) {
+ const isBlockCode =
+ elementFromNode.tagName?.toLowerCase() === 'pre' ||
+ elementFromNode.innerHTML.match(/\r|\n/) !== null;
+ const codeElement =
+ elementFromNode.tagName?.toLowerCase() === 'pre'
+ ? elementFromNode.querySelector('code')
+ : elementFromNode;
+ const snippetLanguage = Array.from(codeElement?.classList ?? [])
+ .find((className) => className.match('language-'))
+ ?.replace('language-', '');
+ const codeString = codeElement?.innerHTML ?? '';
+
+ const highlighter = new SyntaxHighlighter({
+ codeStringWithMarkup: unescapeHTML(codeString),
+ language: snippetLanguage?.trim() !== '' ? snippetLanguage : '',
+ hideLanguage: this.props.hideCodeBlockLanguage,
+ wrapCodeBlock: this.props.wrapCode,
+ unlimitedHeight: this.props.unlimitedCodeBlockHeight,
+ codeBlockActions: !isBlockCode
+ ? undefined
+ : {
+ ...Config.getInstance().config.codeBlockActions,
+ ...this.props.codeBlockActions,
+ },
+ block: isBlockCode,
+ index: isBlockCode ? this.nextCodeBlockIndex : undefined,
+ onCopiedToClipboard:
+ this.props.onCopiedToClipboard != null
+ ? (type, text, codeBlockIndex) => {
+ if (this.props.onCopiedToClipboard != null) {
+ this.props.onCopiedToClipboard(
+ type,
+ text,
+ this.getReferenceTrackerInformationFromElement(highlighter),
+ this.codeBlockStartIndex + (codeBlockIndex ?? 0),
+ this.nextCodeBlockIndex,
+ );
+ }
+ }
+ : undefined,
+ onCodeBlockAction:
+ this.props.onCodeBlockAction != null
+ ? (actionId, data, type, text, refTracker, codeBlockIndex) => {
+ this.props.onCodeBlockAction?.(
+ actionId,
+ data,
+ type,
+ text,
+ this.getReferenceTrackerInformationFromElement(highlighter),
+ this.codeBlockStartIndex + (codeBlockIndex ?? 0),
+ this.nextCodeBlockIndex,
+ );
+ }
+ : undefined,
+ }).render;
+ if (this.props.useParts === true) {
+ highlighter.classList.add(PARTS_CLASS_NAME);
+ }
+ if (isBlockCode) {
+ ++this.nextCodeBlockIndex;
+ }
+ return highlighter;
+ }
+
+ elementFromNode.childNodes?.forEach((child) => {
+ elementFromNode.replaceChild(this.processNode(child as HTMLElement), child);
+ });
+ }
+ return elementFromNode;
+ };
+
+ private readonly getReferenceTrackerInformationFromElement = (
+ element: ExtendedHTMLElement | HTMLElement,
+ ): ReferenceTrackerInformation[] => {
+ // cloning the element
+ // since we're gonna inject some unique items
+ // to get the start indexes
+ const codeElement = element.querySelector('code')?.cloneNode(true) as HTMLElement;
+
+ if (codeElement !== undefined) {
+ const markerElements = codeElement.querySelectorAll('mark[reference-tracker]');
+ if (markerElements.length > 0) {
+ return (Array.from(markerElements) as HTMLElement[]).map((mark: HTMLElement, index: number) => {
+ // Generating a unique identifier element
+ // to get the start index of it inside the code block
+ const startIndexText = `__MARK${index}_${generateUID()}_START__`;
+ const startIndexTextElement = DomBuilder.getInstance().build({
+ type: 'span',
+ innerHTML: startIndexText,
+ });
+ // Injecting that unique identifier for the start index inside the current mark element
+ mark.insertAdjacentElement('afterbegin', startIndexTextElement);
+ // finding that text inside the code element's inner text
+ // to get the startIndex
+ const startIndex = codeElement.innerText.indexOf(startIndexText);
+
+ // when we get the start index, we need to remove the element
+ // to get the next one's start index properly
+ // we don't need to calculate the end index because it will be available
+ startIndexTextElement.remove();
+
+ // find the original reference tracker information
+ const originalRefTrackerInfo =
+ this.props.highlightRangeWithTooltip?.[parseInt(mark.getAttribute('marker-index') ?? '0')];
+ return {
+ ...originalRefTrackerInfo,
+ recommendationContentSpan: {
+ start: startIndex,
+ end:
+ startIndex +
+ ((originalRefTrackerInfo?.recommendationContentSpan?.end ?? 0) -
+ (originalRefTrackerInfo?.recommendationContentSpan?.start ?? 0)),
+ },
+ };
+ }) as ReferenceTrackerInformation[];
+ }
+ }
+
+ return [];
+ };
+
+ private readonly showHighlightRangeTooltip = (e: MouseEvent, tooltipText: string): void => {
+ clearTimeout(this.highlightRangeTooltipTimeout);
+ this.highlightRangeTooltipTimeout = setTimeout(() => {
+ this.highlightRangeTooltip = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: (e.currentTarget ?? e.target) as HTMLElement,
+ removeOtherOverlays: true,
+ dimOutside: false,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-ui-syntax-highlighter-highlight-tooltip'],
+ children: [
+ new CardBody({
+ body: tooltipText,
+ }).render,
+ ],
+ },
+ ],
+ });
+ }, PREVIEW_DELAY);
+ };
+
+ private readonly hideHighlightRangeTooltip = (): void => {
+ clearTimeout(this.highlightRangeTooltipTimeout);
+ if (this.highlightRangeTooltip !== null) {
+ this.highlightRangeTooltip?.close();
+ this.highlightRangeTooltip = null;
+ }
+ };
+
+ private readonly getContentBodyChildren = (
+ props: CardBodyProps,
+ ): Array => {
+ if (props.body != null && props.body.trim() !== '') {
+ let incomingBody = props.body;
+ if (
+ props.body !== undefined &&
+ props.highlightRangeWithTooltip !== undefined &&
+ (props.highlightRangeWithTooltip?.length ?? -1) > 0
+ ) {
+ props.highlightRangeWithTooltip?.forEach((highlightRangeWithTooltip, index) => {
+ if (
+ incomingBody !== undefined &&
+ highlightRangeWithTooltip.recommendationContentSpan !== undefined
+ ) {
+ const generatedStartMarkup = `${highlightersWithTooltip.start.markupStart}${highlightersWithTooltip.start.markupAttributes(index.toString())}${highlightersWithTooltip.start.markupEnd}`;
+ let calculatedStartIndex =
+ highlightRangeWithTooltip.recommendationContentSpan.start +
+ index * (generatedStartMarkup.length + highlightersWithTooltip.end.markup.length);
+ let calculatedEndIndex =
+ calculatedStartIndex +
+ generatedStartMarkup.length -
+ highlightRangeWithTooltip.recommendationContentSpan.start +
+ highlightRangeWithTooltip.recommendationContentSpan.end;
+ if (calculatedEndIndex > incomingBody.length) {
+ calculatedStartIndex = incomingBody.length - 1;
+ }
+ if (calculatedEndIndex > incomingBody.length) {
+ calculatedEndIndex = incomingBody.length - 1;
+ }
+ incomingBody =
+ incomingBody.slice(0, calculatedStartIndex) +
+ generatedStartMarkup +
+ incomingBody.slice(calculatedStartIndex);
+ incomingBody =
+ incomingBody.slice(0, calculatedEndIndex) +
+ highlightersWithTooltip.end.markup +
+ incomingBody.slice(calculatedEndIndex);
+ }
+ });
+ }
+
+ return [
+ ...Array.from(
+ DomBuilder.getInstance().build({
+ type: 'div',
+ innerHTML: `${parseMarkdown(incomingBody, { includeLineBreaks: true })}`,
+ }).childNodes,
+ ).map((node, index) => {
+ const processedNode = this.processNode(node as HTMLElement);
+ processedNode.setAttribute?.('render-index', index.toString());
+ cleanupElement(processedNode);
+ return processedNode;
+ }),
+ ];
+ }
+
+ return [];
+ };
+}
diff --git a/mynah-ui/src/components/card/card.ts b/mynah-ui/src/components/card/card.ts
new file mode 100644
index 0000000000..43c4bbe5b6
--- /dev/null
+++ b/mynah-ui/src/components/card/card.ts
@@ -0,0 +1,147 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { StyleLoader } from '../../helper/style-loader';
+import { EngagementType, Status } from '../../static';
+
+/**
+ * We'll not consider it as an engagement if the total spend time is lower than below constant and won't trigger the event
+ */
+const ENGAGEMENT_DURATION_LIMIT = 3000;
+
+/**
+ * This 6(px) and 300(ms) are coming from a behavioral research and browser reaction to input devices to count the action as a mouse movement or a click event
+ */
+const ENGAGEMENT_MIN_SELECTION_DISTANCE = 6;
+const ENGAGEMENT_MIN_CLICK_DURATION = 300;
+export interface CardProps extends Partial {
+ border?: boolean;
+ background?: boolean;
+ status?: Status;
+ padding?: 'small' | 'medium' | 'large' | 'none';
+ children?: Array;
+ onCardEngaged?: (engagement: {
+ engagementDurationTillTrigger: number;
+ engagementType: EngagementType;
+ totalMouseDistanceTraveled: {
+ x: number;
+ y: number;
+ };
+ selectionDistanceTraveled?: { x: number; y: number; selectedText?: string | undefined };
+ }) => void;
+}
+export class Card {
+ render: ExtendedHTMLElement;
+ private readonly props: CardProps;
+ private engagementStartTime: number = -1;
+ private totalMouseDistanceTraveled: { x: number; y: number } = { x: 0, y: 0 };
+ private previousMousePosition!: { x: number; y: number };
+ private mouseDownInfo!: { x: number; y: number; time: number };
+ constructor(props: CardProps) {
+ StyleLoader.getInstance().load('components/card/_card.scss');
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: this.props.testId,
+ classNames: [
+ 'mynah-card',
+ `padding-${props.padding ?? 'medium'}`,
+ `status-${props.status ?? 'default'}`,
+ props.border !== false ? 'border' : '',
+ props.background !== false ? 'background' : '',
+ ...(props.classNames ?? []),
+ ],
+ persistent: props.persistent,
+ innerHTML: props.innerHTML,
+ children: [...(props.children ?? [])],
+ events: {
+ ...props.events,
+ ...(props.onCardEngaged !== undefined
+ ? {
+ mouseenter: (e) => {
+ if (this.engagementStartTime === -1) {
+ this.engagementStartTime = new Date().getTime();
+ this.previousMousePosition = { x: e.clientX, y: e.clientY };
+ this.totalMouseDistanceTraveled = { x: 0, y: 0 };
+ }
+ },
+ mousemove: (e) => {
+ if (this.engagementStartTime === -1) {
+ this.engagementStartTime = new Date().getTime();
+ }
+ this.totalMouseDistanceTraveled = {
+ x:
+ this.totalMouseDistanceTraveled.x +
+ Math.abs(e.clientX - this.previousMousePosition.x),
+ y:
+ this.totalMouseDistanceTraveled.y +
+ Math.abs(e.clientY - this.previousMousePosition.y),
+ };
+ this.previousMousePosition = { x: e.clientX, y: e.clientY };
+ },
+ mousedown: (e) => {
+ this.mouseDownInfo = { x: e.clientX, y: e.clientY, time: new Date().getTime() };
+ },
+ mouseup: (e) => {
+ const mouseUpInfo = { x: e.clientX, y: e.clientY, time: new Date().getTime() };
+ if (
+ this.mouseDownInfo !== undefined &&
+ (Math.abs(this.mouseDownInfo.x - mouseUpInfo.x) > ENGAGEMENT_MIN_SELECTION_DISTANCE ||
+ Math.abs(this.mouseDownInfo.y - mouseUpInfo.y) >
+ ENGAGEMENT_MIN_SELECTION_DISTANCE) &&
+ mouseUpInfo.time - this.mouseDownInfo.time > ENGAGEMENT_MIN_CLICK_DURATION
+ ) {
+ this.handleEngagement({
+ x: Math.abs(this.mouseDownInfo.x - mouseUpInfo.x),
+ y: Math.abs(this.mouseDownInfo.y - mouseUpInfo.y),
+ selectedText: window?.getSelection()?.toString(),
+ });
+ }
+ },
+ mouseleave: () => {
+ const engagementEndTime = new Date().getTime();
+ if (
+ this.engagementStartTime !== -1 &&
+ engagementEndTime - this.engagementStartTime > ENGAGEMENT_DURATION_LIMIT
+ ) {
+ this.handleEngagement();
+ } else {
+ this.resetEngagement();
+ }
+ },
+ }
+ : {}),
+ },
+ attributes: props.attributes,
+ });
+ }
+
+ private readonly resetEngagement = (): void => {
+ this.engagementStartTime = -1;
+ this.totalMouseDistanceTraveled = { x: 0, y: 0 };
+ this.previousMousePosition = { x: 0, y: 0 };
+ this.mouseDownInfo = { x: 0, y: 0, time: -1 };
+ };
+
+ private readonly handleEngagement = (interactionDistanceTraveled?: {
+ x: number;
+ y: number;
+ selectedText?: string;
+ }): void => {
+ if (this.props.onCardEngaged !== undefined) {
+ this.props.onCardEngaged({
+ engagementDurationTillTrigger: new Date().getTime() - this.engagementStartTime,
+ engagementType:
+ interactionDistanceTraveled !== undefined ? EngagementType.INTERACTION : EngagementType.TIME,
+ totalMouseDistanceTraveled: this.totalMouseDistanceTraveled,
+ selectionDistanceTraveled:
+ Boolean(interactionDistanceTraveled?.x ?? 0) && Boolean(interactionDistanceTraveled?.y)
+ ? interactionDistanceTraveled
+ : undefined,
+ });
+ }
+ this.resetEngagement();
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-buttons.ts b/mynah-ui/src/components/chat-item/chat-item-buttons.ts
new file mode 100644
index 0000000000..a78457fc4a
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-buttons.ts
@@ -0,0 +1,120 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import testIds from '../../helper/test-ids';
+import { ChatItemButton } from '../../static';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { OverlayHorizontalDirection } from '../overlay';
+import { ChatItemFormItemsWrapper } from './chat-item-form-items';
+
+export interface ChatItemButtonsWrapperProps {
+ tabId?: string;
+ classNames?: string[];
+ buttons: ChatItemButton[] | null;
+ formItems?: ChatItemFormItemsWrapper | null;
+ onActionClick?: (action: ChatItemButton, e?: Event) => void;
+ onAllButtonsDisabled?: () => void;
+}
+export class ChatItemButtonsWrapper {
+ private readonly props: ChatItemButtonsWrapperProps;
+ private readonly actions: Record<
+ string,
+ {
+ data: ChatItemButton;
+ element: Button;
+ }
+ > = {};
+
+ render: ExtendedHTMLElement;
+ constructor(props: ChatItemButtonsWrapperProps) {
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.buttons.wrapper,
+ classNames: ['mynah-chat-item-buttons-container', ...(this.props.classNames ?? [])],
+ children: this.props.buttons?.map((chatActionAction) => {
+ const actionItem = new Button({
+ testId: testIds.chatItem.buttons.button,
+ label: chatActionAction.text,
+ fillState: chatActionAction.fillState,
+ tooltip: chatActionAction.description,
+ tooltipHorizontalDirection: OverlayHorizontalDirection.CENTER,
+ icon: chatActionAction.icon != null ? new Icon({ icon: chatActionAction.icon }).render : undefined,
+ primary: chatActionAction.status === 'primary',
+ border: chatActionAction.status !== 'primary',
+ classNames: [
+ ...(chatActionAction.flash != null
+ ? ['mynah-button-flash-by-parent-focus', `animate-${chatActionAction.flash}`]
+ : ['']),
+ ],
+ ...(chatActionAction.flash != null
+ ? {
+ onHover: (e) => {
+ if (e.target != null) {
+ (e.target as HTMLButtonElement).classList.remove(
+ 'mynah-button-flash-by-parent-focus',
+ );
+ }
+ },
+ }
+ : {}),
+ attributes: {
+ 'action-id': chatActionAction.id,
+ },
+ status: chatActionAction.status,
+ onClick: (e) => {
+ if (e.target != null) {
+ (e.target as HTMLButtonElement).classList.remove('mynah-button-flash-by-parent-focus');
+ }
+ if (props.formItems != null) {
+ props.formItems.disableAll();
+ } else {
+ this.disableAll();
+ }
+ if (this.props.onActionClick != null) {
+ this.props.onActionClick(chatActionAction, e);
+ }
+ },
+ });
+ if (chatActionAction.disabled === true) {
+ actionItem.setEnabled(false);
+ }
+ this.actions[chatActionAction.id] = {
+ data: chatActionAction,
+ element: actionItem,
+ };
+ return actionItem.render;
+ }),
+ });
+ if (props.formItems != null) {
+ this.handleValidationChange(props.formItems.isFormValid());
+ props.formItems.onValidationChange = (isValid) => {
+ this.handleValidationChange(isValid);
+ };
+ props.formItems.onAllFormItemsDisabled = () => {
+ this.disableAll();
+ };
+ }
+ }
+
+ private readonly handleValidationChange = (isFormValid: boolean): void => {
+ Object.keys(this.actions).forEach((chatActionId) => {
+ if (this.actions[chatActionId].data.waitMandatoryFormItems !== false) {
+ this.actions[chatActionId].element.setEnabled(isFormValid);
+ }
+ });
+ };
+
+ private readonly disableAll = (): void => {
+ Object.keys(this.actions).forEach((chatActionId) => {
+ if (this.actions[chatActionId].data.disabled !== false) {
+ this.actions[chatActionId].element.setEnabled(false);
+ }
+ });
+ this.props.onAllButtonsDisabled?.();
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-card-content.ts b/mynah-ui/src/components/chat-item/chat-item-card-content.ts
new file mode 100644
index 0000000000..fa56e116ef
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-card-content.ts
@@ -0,0 +1,215 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilderObject, ExtendedHTMLElement, getTypewriterPartsCss } from '../../helper/dom';
+import {
+ CardRenderDetails,
+ ChatItem,
+ CodeBlockActions,
+ OnCodeBlockActionFunction,
+ OnCopiedToClipboardFunction,
+ ReferenceTrackerInformation,
+} from '../../static';
+import { CardBody } from '../card/card-body';
+import { generateUID } from '../../helper/guid';
+import { Config } from '../../helper/config';
+export interface ChatItemCardContentProps {
+ body?: string | null;
+ testId?: string;
+ renderAsStream?: boolean;
+ classNames?: string[];
+ unlimitedCodeBlockHeight?: boolean;
+ hideCodeBlockLanguage?: boolean;
+ wrapCode?: boolean;
+ codeReference?: ReferenceTrackerInformation[] | null;
+ onAnimationStateChange?: (isAnimating: boolean) => void;
+ contentProperties?: {
+ codeBlockActions?: CodeBlockActions;
+ onLinkClick?: (url: string, e: MouseEvent) => void;
+ onCopiedToClipboard?: OnCopiedToClipboardFunction;
+ onCodeBlockAction?: OnCodeBlockActionFunction;
+ };
+ children?: Array;
+}
+export class ChatItemCardContent {
+ private props: ChatItemCardContentProps;
+ render: ExtendedHTMLElement;
+ contentBody: CardBody | null = null;
+ private readonly updateStack: Array> = [];
+ private typewriterItemIndex: number = 0;
+ private readonly typewriterId: string = `typewriter-card-${generateUID()}`;
+ private lastAnimationDuration: number = 0;
+ private updateTimer: ReturnType | undefined;
+ private isStreamActive: boolean = true;
+ constructor(props: ChatItemCardContentProps) {
+ this.props = props;
+ this.contentBody = this.getCardContent();
+ this.render = this.contentBody.render;
+
+ if ((this.props.renderAsStream ?? false) && (this.props.body ?? '').trim() !== '') {
+ this.updateCardStack({});
+ }
+ }
+
+ private readonly getCardContent = (): CardBody => {
+ return new CardBody({
+ body: this.props.body ?? '',
+ hideCodeBlockLanguage: this.props.hideCodeBlockLanguage,
+ wrapCode: this.props.wrapCode,
+ unlimitedCodeBlockHeight: this.props.unlimitedCodeBlockHeight,
+ testId: this.props.testId,
+ useParts: this.props.renderAsStream,
+ classNames: [this.typewriterId, ...(this.props.classNames ?? [])],
+ highlightRangeWithTooltip: this.props.codeReference,
+ children: this.props.children,
+ ...this.props.contentProperties,
+ });
+ };
+
+ private readonly updateCard = (): void => {
+ if (this.updateTimer === undefined && this.updateStack.length > 0) {
+ const updateWith: Partial | undefined = this.updateStack.shift();
+ if (updateWith !== undefined) {
+ this.props = {
+ ...this.props,
+ ...updateWith,
+ };
+
+ const newCardContent = this.getCardContent();
+ const upcomingWords = Array.from(newCardContent.render.querySelectorAll('.typewriter-part') ?? []);
+ for (let i = 0; i < upcomingWords.length; i++) {
+ upcomingWords[i].setAttribute('index', i.toString());
+ }
+ // How many new words will be added
+ const newWordsCount = upcomingWords.length - this.typewriterItemIndex;
+
+ // For each stack, without exceeding 500ms in total
+ // we're setting each words delay time according to the count of them.
+ const stackTime = Config.getInstance().config.typewriterStackTime ?? 100;
+ const maxWordTime = Config.getInstance().config.typewriterMaxWordTime ?? 20;
+ const disableAnimation = Config.getInstance().config.disableTypewriterAnimation ?? false;
+ const shouldAnimate = !disableAnimation && this.isStreamActive;
+ const timeForEach = shouldAnimate ? Math.min(maxWordTime, Math.floor(stackTime / newWordsCount)) : 0;
+
+ // Generate animator style and inject into render
+ // CSS animations ~100 times faster then js timeouts/intervals
+ if (shouldAnimate) {
+ newCardContent.render.insertAdjacentElement(
+ 'beforeend',
+ getTypewriterPartsCss(
+ this.typewriterId,
+ this.typewriterItemIndex,
+ upcomingWords.length,
+ timeForEach,
+ ),
+ );
+ }
+
+ this.props.onAnimationStateChange?.(shouldAnimate);
+ if (this.contentBody == null) {
+ this.contentBody = newCardContent;
+ this.render = this.contentBody.render;
+ }
+ this.updateDOMContent(newCardContent);
+ this.lastAnimationDuration = shouldAnimate ? timeForEach * newWordsCount : 0;
+
+ // If there is another set
+ // call the same function to check after current stack totally shown
+ this.updateTimer = setTimeout(() => {
+ this.updateTimer = undefined;
+ // Only signal animation end if no more updates are queued
+ this.props.onAnimationStateChange?.(this.updateStack.length > 0);
+ this.updateCard();
+ }, this.lastAnimationDuration);
+ }
+ }
+ };
+
+ public readonly updateCardStack = (updateWith: Partial): void => {
+ this.updateStack.push(updateWith);
+ this.updateCard();
+ };
+
+ public readonly endStream = (): void => {
+ this.isStreamActive = false;
+ this.flushRemainingUpdates();
+ };
+
+ private readonly updateDOMContent = (newCardContent: CardBody): void => {
+ const upcomingWords = Array.from(newCardContent.render.querySelectorAll('.typewriter-part') ?? []);
+ for (let i = 0; i < upcomingWords.length; i++) {
+ upcomingWords[i].setAttribute('index', i.toString());
+ }
+
+ if (this.contentBody == null) {
+ this.contentBody = newCardContent;
+ this.render = this.contentBody.render;
+ }
+ Array.from(newCardContent.render.childNodes).forEach((node) => {
+ const newElm = node as HTMLElement;
+ const currIndex = (node as HTMLElement).getAttribute('render-index');
+ const oldElm = this.render.querySelector(`[render-index="${currIndex ?? ''}"]`);
+ if (oldElm == null) {
+ this.render.insertChild('beforeend', node as HTMLElement);
+ } else if (newElm.innerHTML !== oldElm.innerHTML) {
+ if (newElm.classList.contains('mynah-syntax-highlighter')) {
+ const newPreElm = newElm.querySelector('pre');
+ if (newPreElm?.childNodes != null) {
+ const oldElmPre = oldElm.querySelector('pre');
+ if (oldElmPre != null) {
+ oldElmPre.replaceChildren(...Array.from(newPreElm.childNodes));
+ if (
+ !newElm.classList.contains('mynah-inline-code') &&
+ !newElm.classList.contains('no-max') &&
+ oldElmPre.scrollHeight > oldElmPre.clientHeight
+ ) {
+ oldElm.classList.add('max-height-exceed');
+ }
+ }
+ }
+ } else {
+ oldElm.replaceWith(newElm);
+ }
+ }
+ });
+ this.contentBody = newCardContent;
+ this.typewriterItemIndex = upcomingWords.length;
+ };
+
+ private readonly flushRemainingUpdates = (): void => {
+ if (this.updateTimer != null) {
+ clearTimeout(this.updateTimer);
+ this.updateTimer = undefined;
+ }
+
+ // Clean up all animation styles
+ const existingAnimationStyles = this.render.querySelectorAll(
+ `style[data-typewriter="${this.typewriterId}"], style[type="text/css"]`,
+ );
+ existingAnimationStyles.forEach((style) => {
+ if (style.innerHTML.includes(this.typewriterId)) {
+ style.remove();
+ }
+ });
+
+ // Batch all updates into final props
+ if (this.updateStack.length > 0) {
+ const finalProps = this.updateStack.reduce((acc, update) => ({ ...acc, ...update }), this.props);
+ this.updateStack.length = 0; // Clear array efficiently
+
+ this.props = finalProps;
+ const newCardContent = this.getCardContent();
+ this.updateDOMContent(newCardContent);
+ }
+
+ this.props.onAnimationStateChange?.(false);
+ };
+
+ public readonly getRenderDetails = (): CardRenderDetails => {
+ return {
+ totalNumberOfCodeBlocks: this.contentBody?.nextCodeBlockIndex ?? 0,
+ };
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-card.ts b/mynah-ui/src/components/chat-item/chat-item-card.ts
new file mode 100644
index 0000000000..2399a98c8b
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-card.ts
@@ -0,0 +1,1219 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChatItemBodyRenderer, DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent, MynahUIGlobalEvents } from '../../helper/events';
+import { MynahUITabsStore } from '../../helper/tabs-store';
+import { CardRenderDetails, ChatItem, ChatItemType, MynahEventNames } from '../../static';
+import { CardBody, CardBodyProps } from '../card/card-body';
+import { Icon, MynahIcons } from '../icon';
+import { ChatItemFollowUpContainer } from './chat-item-followup';
+import { ChatItemSourceLinksContainer } from './chat-item-source-links';
+import { ChatItemRelevanceVote } from './chat-item-relevance-vote';
+import { ChatItemTreeViewWrapper } from './chat-item-tree-view-wrapper';
+import { Config } from '../../helper/config';
+import { ChatItemFormItemsWrapper } from './chat-item-form-items';
+import { ChatItemButtonsWrapper, ChatItemButtonsWrapperProps } from './chat-item-buttons';
+import { cleanHtml, escapeHtml } from '../../helper/sanitize';
+import { chatItemHasContent } from '../../helper/chat-item';
+import { Card } from '../card/card';
+import { ChatItemCardContent, ChatItemCardContentProps } from './chat-item-card-content';
+import testIds from '../../helper/test-ids';
+import { ChatItemInformationCard } from './chat-item-information-card';
+import { ChatItemTabbedCard } from './chat-item-tabbed-card';
+import { MoreContentIndicator } from '../more-content-indicator';
+import { Button } from '../button';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+import { marked } from 'marked';
+import { parseMarkdown } from '../../helper/marked';
+import { DropdownWrapper } from '../dropdown-form/dropdown-wrapper';
+
+const TOOLTIP_DELAY = 350;
+export interface ChatItemCardProps {
+ tabId: string;
+ initVisibility?: boolean;
+ chatItem: ChatItem;
+ inline?: boolean;
+ small?: boolean;
+ onAnimationStateChange?: (isAnimating: boolean) => void;
+}
+export class ChatItemCard {
+ readonly props: ChatItemCardProps;
+ render: ExtendedHTMLElement;
+ private tooltipOverlay: Overlay | null;
+ private tooltipTimeout: ReturnType;
+ private readonly card: Card | null = null;
+ private readonly updateStack: Array> = [];
+ private readonly initialSpinner: ExtendedHTMLElement[] | null = null;
+ private cardFooter: ExtendedHTMLElement | null = null;
+ private cardHeader: ExtendedHTMLElement | null = null;
+ private cardTitle: ExtendedHTMLElement | null = null;
+ private informationCard: ChatItemInformationCard | null = null;
+ private summary: {
+ wrapper: ExtendedHTMLElement;
+ visibleContent: ChatItemCard;
+ collapsedContent: ExtendedHTMLElement;
+ stateIcon: Icon;
+ showSummary: boolean;
+ } | null = null;
+
+ private tabbedCard: ChatItemTabbedCard | null = null;
+ private cardIcon: Icon | null = null;
+ private contentBody: ChatItemCardContent | null = null;
+ private chatAvatar: ExtendedHTMLElement;
+ private chatFormItems: ChatItemFormItemsWrapper | null = null;
+ private customRendererWrapper: CardBody | null = null;
+ private chatButtonsInside: ChatItemButtonsWrapper | null = null;
+ private chatButtonsOutside: ChatItemButtonsWrapper | null = null;
+ private fileTreeWrapper: ChatItemTreeViewWrapper | null = null;
+ private fileTreeWrapperCollapsedState: boolean | null = null;
+ private followUps: ChatItemFollowUpContainer | null = null;
+ private readonly moreContentIndicator: MoreContentIndicator | null = null;
+ private isMoreContentExpanded: boolean = false;
+ private votes: ChatItemRelevanceVote | null = null;
+ private footer: ChatItemCard | null = null;
+ private header: ChatItemCard | null = null;
+ constructor(props: ChatItemCardProps) {
+ this.props = {
+ ...props,
+ chatItem: {
+ ...props.chatItem,
+ fullWidth: props.chatItem.fullWidth,
+ padding:
+ props.chatItem.padding != null
+ ? props.chatItem.padding
+ : props.chatItem.type !== ChatItemType.DIRECTIVE,
+ },
+ };
+ this.chatAvatar = this.getChatAvatar();
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .subscribe('showChatAvatars', (value: boolean) => {
+ if (value && this.canShowAvatar()) {
+ this.chatAvatar = this.getChatAvatar();
+ this.render.insertChild('afterbegin', this.chatAvatar);
+ } else {
+ this.chatAvatar.remove();
+ }
+ });
+ if (this.props.chatItem.type === ChatItemType.ANSWER_STREAM) {
+ this.initialSpinner = [
+ DomBuilder.getInstance().build({
+ type: 'div',
+ persistent: true,
+ classNames: ['mynah-chat-items-spinner', 'text-shimmer'],
+ children: [{ type: 'div', children: [Config.getInstance().config.texts.spinnerText] }],
+ }),
+ ];
+ }
+
+ this.cardTitle = this.getCardTitle();
+ this.cardHeader = this.getCardHeader();
+ this.cardFooter = this.getCardFooter();
+ this.card = new Card({
+ testId: testIds.chatItem.card,
+ children: this.initialSpinner ?? [],
+ background:
+ this.props.inline !== true &&
+ this.props.chatItem.type !== ChatItemType.DIRECTIVE &&
+ !(
+ this.props.chatItem.fullWidth !== true &&
+ (this.props.chatItem.type === ChatItemType.ANSWER ||
+ this.props.chatItem.type === ChatItemType.ANSWER_STREAM)
+ ),
+ border:
+ (this.props.inline !== true &&
+ this.props.chatItem.type !== ChatItemType.DIRECTIVE &&
+ !(
+ this.props.chatItem.fullWidth !== true &&
+ (this.props.chatItem.type === ChatItemType.ANSWER ||
+ this.props.chatItem.type === ChatItemType.ANSWER_STREAM)
+ )) ||
+ // Auto border for warning/info headers
+ this.props.chatItem.border === true,
+ padding:
+ (this.props.inline === true ||
+ this.props.chatItem.padding === false ||
+ (this.props.chatItem.fullWidth !== true &&
+ (this.props.chatItem.type === ChatItemType.ANSWER ||
+ this.props.chatItem.type === ChatItemType.ANSWER_STREAM))) &&
+ // Exception: warning/info headers should have padding
+ !(this.props.chatItem.header?.padding === true)
+ ? 'none'
+ : undefined,
+ });
+ this.updateCardContent();
+ this.render = this.generateCard();
+
+ /**
+ * Generate/update more content indicator if available
+ */
+ this.moreContentIndicator = new MoreContentIndicator({
+ icon: MynahIcons.DOWN_OPEN,
+ border: false,
+ onClick: () => {
+ if (this.isMoreContentExpanded) {
+ this.isMoreContentExpanded = false;
+ this.render.addClass('mynah-chat-item-collapsed');
+ this.moreContentIndicator?.update({ icon: MynahIcons.DOWN_OPEN });
+ } else {
+ this.isMoreContentExpanded = true;
+ this.render.removeClass('mynah-chat-item-collapsed');
+ this.moreContentIndicator?.update({ icon: MynahIcons.UP_OPEN });
+ }
+ },
+ testId: testIds.chatItem.moreContentIndicator,
+ });
+ this.render.insertChild('beforeend', this.moreContentIndicator.render);
+
+ if (this.props.chatItem.autoCollapse === true) {
+ this.render.addClass('mynah-chat-item-collapsed');
+ }
+
+ if (this.props.chatItem.type === ChatItemType.ANSWER_STREAM && (this.props.chatItem.body ?? '').trim() !== '') {
+ this.updateCardStack({});
+ }
+ }
+
+ private readonly getCardFooter = (): ExtendedHTMLElement => {
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-card-footer', 'mynah-card-inner-order-70'],
+ });
+ };
+
+ private readonly getCardHeader = (): ExtendedHTMLElement => {
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-card-header', 'mynah-card-inner-order-5'],
+ });
+ };
+
+ private readonly getCardTitle = (): ExtendedHTMLElement => {
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-card-title', 'mynah-card-inner-order-3'],
+ });
+ };
+
+ private readonly generateCard = (): ExtendedHTMLElement => {
+ const generatedCard = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: `${testIds.chatItem.type.any}-${this.props.chatItem.type ?? ChatItemType.ANSWER}`,
+ classNames: this.getCardClasses(),
+ attributes: {
+ messageId: this.props.chatItem.messageId ?? 'unknown',
+ },
+ children: [
+ ...(this.canShowAvatar() &&
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('showChatAvatars') === true
+ ? [this.chatAvatar]
+ : []),
+ ...(this.card != null ? [this.card?.render] : []),
+ ...(this.chatButtonsOutside != null ? [this.chatButtonsOutside?.render] : []),
+ ...(this.props.chatItem.followUp?.text !== undefined
+ ? [new ChatItemFollowUpContainer({ tabId: this.props.tabId, chatItem: this.props.chatItem }).render]
+ : []),
+ ],
+ });
+
+ setTimeout(() => {
+ this.setMaxHeightClass(this.card?.render);
+ generatedCard.addClass('reveal');
+ }, 50);
+
+ return generatedCard;
+ };
+
+ private readonly setMaxHeightClass = (elm?: ExtendedHTMLElement): void => {
+ if (elm != null) {
+ if (this.props.chatItem.autoCollapse === true && elm.scrollHeight > window.innerHeight / 4) {
+ this.render?.addClass('mynah-chat-item-auto-collapse');
+ } else {
+ this.render?.removeClass('mynah-chat-item-auto-collapse');
+ }
+ }
+ };
+
+ private readonly getCardClasses = (): string[] => {
+ return [
+ ...(this.props.chatItem.hoverEffect !== undefined ? ['mynah-chat-item-hover-effect'] : []),
+ ...(this.props.chatItem.shimmer === true ? ['text-shimmer'] : []),
+ ...(this.props.chatItem.icon !== undefined ? ['mynah-chat-item-card-has-icon'] : []),
+ ...(this.props.chatItem.fullWidth === true ||
+ this.props.chatItem.type === ChatItemType.ANSWER ||
+ this.props.chatItem.type === ChatItemType.ANSWER_STREAM
+ ? ['full-width']
+ : []),
+ ...(this.props.chatItem.padding === false ? ['no-padding'] : []),
+
+ ...(this.props.inline === true ? ['mynah-ui-chat-item-inline-card'] : []),
+ ...(this.props.chatItem.muted === true ? ['muted'] : []),
+ ...(this.props.small === true ? ['mynah-ui-chat-item-small-card'] : []),
+ ...(this.props.initVisibility === true ? ['reveal'] : []),
+ `mynah-chat-item-card-status-${this.props.chatItem.status ?? 'default'}`,
+ `mynah-chat-item-card-content-horizontal-align-${this.props.chatItem.contentHorizontalAlignment ?? 'default'}`,
+ 'mynah-chat-item-card',
+ `mynah-chat-item-${this.props.chatItem.type ?? ChatItemType.ANSWER}`,
+ ...(!chatItemHasContent(this.props.chatItem) ? ['mynah-chat-item-empty'] : []),
+ ];
+ };
+
+ private readonly getFilePillsCustomRenderer = (): ChatItem['customRenderer'] => {
+ const header = this.props.chatItem.header;
+ if (header?.fileList == null) return [];
+
+ const customRenderer: ChatItemBodyRenderer[] = [];
+
+ // Add icon if present
+ if (header.icon != null) {
+ customRenderer.push({
+ type: 'i' as const,
+ classNames: [
+ 'mynah-ui-icon',
+ `mynah-ui-icon-${header.icon as MynahIcons}`,
+ 'mynah-chat-item-card-icon-inline',
+ `icon-status-${header.iconStatus ?? 'none'}`,
+ ],
+ });
+ }
+
+ // Add body text if present
+ if (header.body != null && header.body !== '') {
+ // Parse markdown to handle inline code
+ const parsedHtml = parseMarkdown(header.body, { includeLineBreaks: true });
+
+ // Create a temporary div to extract text content while preserving inline code
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = parsedHtml;
+
+ // Convert to ChatItemBodyRenderer format
+ const processNode = (node: Node): Array => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ return [node.textContent ?? ''];
+ } else if (node.nodeType === Node.ELEMENT_NODE) {
+ const element = node as HTMLElement;
+ if (element.tagName.toLowerCase() === 'code') {
+ return [
+ {
+ type: 'code' as const,
+ classNames: ['mynah-syntax-highlighter', 'mynah-inline-code'],
+ children: [element.textContent ?? ''],
+ },
+ ];
+ } else {
+ // For other elements, process their children
+ const children: Array = [];
+ Array.from(element.childNodes).forEach((child) => {
+ children.push(...processNode(child));
+ });
+ return children;
+ }
+ }
+ return [''];
+ };
+
+ const children: Array = [];
+ Array.from(tempDiv.childNodes).forEach((node) => {
+ children.push(...processNode(node));
+ });
+
+ customRenderer.push({
+ type: 'span' as const,
+ children,
+ });
+ }
+
+ // Add file pills
+ const filePills =
+ header.fileList.filePaths?.map((filePath) => {
+ const fileName = header.fileList?.details?.[filePath]?.visibleName ?? filePath;
+ const isDeleted = header.fileList?.deletedFiles?.includes(filePath) === true;
+ const description = header.fileList?.details?.[filePath]?.description;
+
+ return {
+ type: 'span' as const,
+ classNames: [
+ 'mynah-chat-item-tree-file-pill',
+ ...(isDeleted ? ['mynah-chat-item-tree-file-pill-deleted'] : []),
+ ],
+ children: [fileName],
+ events: {
+ click: () => {
+ if (header.fileList?.details?.[filePath]?.clickable === false) {
+ return;
+ }
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FILE_CLICK, {
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ filePath,
+ deleted: isDeleted,
+ });
+ },
+ ...(description !== undefined
+ ? {
+ mouseover: (e: MouseEvent) => {
+ this.showTooltip(description, e.target as HTMLElement);
+ },
+ mouseleave: () => {
+ this.hideTooltip();
+ },
+ }
+ : {}),
+ },
+ };
+ }) ?? [];
+
+ customRenderer.push(...filePills);
+
+ return customRenderer;
+ };
+
+ private readonly updateCardContent = (): void => {
+ if (MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId) === undefined) {
+ return;
+ }
+
+ const bodyEvents: Partial = {
+ onLinkClick: (url: string, e: MouseEvent) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.LINK_CLICK, {
+ messageId: this.props.chatItem.messageId,
+ link: url,
+ event: e,
+ });
+ },
+ onCopiedToClipboard: (type, text, referenceTrackerInformation, codeBlockIndex) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.COPY_CODE_TO_CLIPBOARD, {
+ messageId: this.props.chatItem.messageId,
+ type,
+ text,
+ referenceTrackerInformation,
+ codeBlockIndex,
+ totalCodeBlocks:
+ (this.contentBody?.getRenderDetails().totalNumberOfCodeBlocks ?? 0) +
+ (this.customRendererWrapper?.nextCodeBlockIndex ?? 0),
+ });
+ },
+ ...(Object.keys(Config.getInstance().config.codeBlockActions ?? {}).length > 0 ||
+ Object.keys(this.props.chatItem.codeBlockActions ?? {}).length > 0
+ ? {
+ codeBlockActions: {
+ ...Config.getInstance().config.codeBlockActions,
+ ...this.props.chatItem.codeBlockActions,
+ },
+ onCodeBlockAction: (actionId, data, type, text, referenceTrackerInformation, codeBlockIndex) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CODE_BLOCK_ACTION, {
+ actionId,
+ data,
+ messageId: this.props.chatItem.messageId,
+ type,
+ text,
+ referenceTrackerInformation,
+ codeBlockIndex,
+ totalCodeBlocks:
+ (this.contentBody?.getRenderDetails().totalNumberOfCodeBlocks ?? 0) +
+ (this.customRendererWrapper?.nextCodeBlockIndex ?? 0),
+ });
+ },
+ }
+ : {}),
+ };
+
+ if (chatItemHasContent(this.props.chatItem)) {
+ this.initialSpinner?.[0]?.remove();
+ }
+
+ // If no data is provided for the header
+ // skip removing and checking it
+ if (this.props.chatItem.canBeDismissed === true || this.props.chatItem.title != null) {
+ if (this.cardTitle != null) {
+ this.cardTitle.remove();
+ this.cardTitle = null;
+ }
+ this.cardTitle = this.getCardTitle();
+ if (this.props.chatItem.title != null) {
+ this.cardTitle?.insertChild(
+ 'beforeend',
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-card-title-text'],
+ children: [escapeHtml(this.props.chatItem.title)],
+ }),
+ );
+ }
+
+ if (this.props.chatItem.canBeDismissed === true) {
+ this.cardTitle?.insertChild(
+ 'beforeend',
+ new Button({
+ icon: new Icon({ icon: 'cancel' }).render,
+ onClick: () => {
+ this.render.remove();
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CARD_DISMISS, {
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ });
+ if (this.props.chatItem.messageId !== undefined) {
+ const currentChatItems: ChatItem[] = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('chatItems');
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .updateStore(
+ {
+ chatItems: [
+ ...currentChatItems.map((chatItem) =>
+ this.props.chatItem.messageId !== chatItem.messageId
+ ? chatItem
+ : { type: ChatItemType.ANSWER, messageId: chatItem.messageId },
+ ),
+ ],
+ },
+ true,
+ );
+ }
+ },
+ primary: false,
+ status: 'clear',
+ testId: testIds.chatItem.dismissButton,
+ }).render,
+ );
+ }
+ this.card?.render.insertChild('afterbegin', this.cardTitle);
+ }
+
+ // Handle data updates with the update structure of the chat item itself
+ if (this.props.chatItem.header === null) {
+ this.cardHeader?.remove();
+ this.cardHeader = null;
+ this.header?.render.remove();
+ this.header = null;
+ } else if (this.props.chatItem.header != null) {
+ if (this.cardHeader != null && this.header != null) {
+ if (this.props.chatItem.header.fileList?.renderAsPills === true) {
+ this.cardHeader?.remove();
+ this.cardHeader = this.getCardHeader();
+ this.card?.render.insertChild('beforeend', this.cardHeader);
+ this.header = null;
+ } else {
+ this.header.updateCardStack({
+ ...this.props.chatItem.header,
+ status: undefined,
+ type: ChatItemType.ANSWER,
+ messageId: this.props.chatItem.messageId,
+ } satisfies ChatItem);
+ }
+ }
+ if (this.header === null) {
+ this.cardHeader?.remove();
+ this.cardHeader = this.getCardHeader();
+ this.card?.render.insertChild('beforeend', this.cardHeader);
+
+ this.header = new ChatItemCard({
+ tabId: this.props.tabId,
+ small: true,
+ initVisibility: true,
+ inline: true,
+ chatItem: {
+ ...this.props.chatItem.header,
+ status: undefined,
+ type: ChatItemType.ANSWER,
+ messageId: this.props.chatItem.messageId,
+ ...(this.props.chatItem.header.fileList?.renderAsPills === true
+ ? {
+ customRenderer: this.getFilePillsCustomRenderer(),
+ body: null,
+ fileList: null,
+ icon: undefined,
+ }
+ : {}),
+ },
+ });
+ this.cardHeader.insertChild('beforeend', this.header.render);
+ }
+
+ if (this.props.chatItem.header.status != null) {
+ // Remove existing status before adding new one
+ this.cardHeader?.querySelector('.mynah-chat-item-card-header-status')?.remove();
+ this.cardHeader?.insertAdjacentElement(
+ this.props.chatItem.header.status.position === 'left' ? 'afterbegin' : 'beforeend',
+ DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: [
+ 'mynah-chat-item-card-header-status',
+ `status-${this.props.chatItem.header.status.status ?? 'default'}`,
+ ],
+ children: [
+ ...(this.props.chatItem.header.status.icon != null
+ ? [new Icon({ icon: this.props.chatItem.header.status.icon }).render]
+ : []),
+ ...(this.props.chatItem.header.status.text != null
+ ? [
+ {
+ type: 'span',
+ classNames: ['mynah-chat-item-card-header-status-text'],
+ children: [escapeHtml(this.props.chatItem.header.status.text)],
+ },
+ ]
+ : []),
+ ],
+ ...(this.props.chatItem.header.status?.description != null
+ ? {
+ events: {
+ mouseover: (e) => {
+ cancelEvent(e);
+ const tooltipText = marked(
+ this.props.chatItem?.header?.status?.description ?? '',
+ { breaks: true },
+ ) as string;
+ this.showTooltip(tooltipText, e.target ?? e.currentTarget);
+ },
+ mouseleave: this.hideTooltip,
+ },
+ }
+ : {}),
+ }),
+ );
+ }
+ }
+
+ /**
+ * Generate card icon if available
+ */
+ if (this.props.chatItem.icon != null) {
+ if (this.cardIcon != null) {
+ this.cardIcon.render.remove();
+ this.cardIcon = null;
+ }
+ this.cardIcon = new Icon({
+ icon: this.props.chatItem.icon,
+ status: this.props.chatItem.iconForegroundStatus,
+ subtract: this.props.chatItem.iconStatus != null,
+ classNames: [
+ 'mynah-chat-item-card-icon',
+ 'mynah-card-inner-order-10',
+ `icon-status-${this.props.chatItem.iconStatus ?? 'none'}`,
+ ],
+ });
+ this.card?.render.insertChild('beforeend', this.cardIcon.render);
+ }
+
+ /**
+ * Generate contentBody if available
+ */
+ if (this.props.chatItem.body != null && this.props.chatItem.body !== '') {
+ const updatedCardContentBodyProps: ChatItemCardContentProps = {
+ body: this.props.chatItem.body ?? '',
+ hideCodeBlockLanguage: this.props.chatItem.padding === false,
+ wrapCode: this.props.chatItem.wrapCodes,
+ unlimitedCodeBlockHeight: this.props.chatItem.autoCollapse,
+ classNames: ['mynah-card-inner-order-20'],
+ renderAsStream:
+ this.props.chatItem.type === ChatItemType.ANSWER_STREAM ||
+ this.props.chatItem.type === ChatItemType.DIRECTIVE,
+ codeReference: this.props.chatItem.codeReference ?? undefined,
+ onAnimationStateChange: (isAnimating) => {
+ if (isAnimating) {
+ this.render?.addClass('typewriter-animating');
+ } else {
+ this.render?.removeClass('typewriter-animating');
+ this.props.onAnimationStateChange?.(isAnimating);
+ }
+ },
+ children:
+ this.props.chatItem.relatedContent !== undefined
+ ? [
+ new ChatItemSourceLinksContainer({
+ messageId: this.props.chatItem.messageId ?? 'unknown',
+ tabId: this.props.tabId,
+ relatedContent: this.props.chatItem.relatedContent?.content,
+ title: this.props.chatItem.relatedContent?.title,
+ }).render,
+ ]
+ : [],
+ contentProperties: bodyEvents,
+ };
+ if (this.contentBody != null) {
+ this.contentBody.updateCardStack(updatedCardContentBodyProps);
+ } else {
+ this.contentBody = new ChatItemCardContent(updatedCardContentBodyProps);
+ this.card?.render.insertChild('beforeend', this.contentBody.render);
+ }
+ } else if (this.props.chatItem.body === null) {
+ this.contentBody?.render.remove();
+ this.contentBody = null;
+ }
+
+ /**
+ * Generate customRenderer if available
+ */
+ if (this.customRendererWrapper != null) {
+ this.customRendererWrapper.render.remove();
+ this.customRendererWrapper = null;
+ }
+ if (this.props.chatItem.customRenderer != null) {
+ const customRendererContent: Partial = {};
+
+ if (typeof this.props.chatItem.customRenderer === 'object') {
+ customRendererContent.children = Array.isArray(this.props.chatItem.customRenderer)
+ ? this.props.chatItem.customRenderer
+ : [this.props.chatItem.customRenderer];
+ } else if (typeof this.props.chatItem.customRenderer === 'string') {
+ customRendererContent.innerHTML = cleanHtml(this.props.chatItem.customRenderer);
+ }
+
+ this.customRendererWrapper = new CardBody({
+ body: customRendererContent.innerHTML,
+ children: customRendererContent.children,
+ classNames: ['mynah-card-inner-order-30'],
+ processChildren: true,
+ useParts: true,
+ codeBlockStartIndex: this.contentBody?.getRenderDetails().totalNumberOfCodeBlocks ?? 0,
+ ...bodyEvents,
+ });
+
+ this.card?.render.insertChild('beforeend', this.customRendererWrapper.render);
+ }
+
+ /**
+ * Generate form items if available
+ */
+ if (this.chatFormItems != null) {
+ this.chatFormItems.render.remove();
+ this.chatFormItems = null;
+ }
+ if (this.props.chatItem.formItems != null) {
+ this.chatFormItems = new ChatItemFormItemsWrapper({
+ classNames: ['mynah-card-inner-order-40'],
+ tabId: this.props.tabId,
+ chatItem: this.props.chatItem,
+ onModifierEnterPress(formData, tabId) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FORM_MODIFIER_ENTER_PRESS, {
+ formData,
+ tabId,
+ });
+ },
+ onTextualItemKeyPress(event, itemId, formData, tabId, disableAllCallback) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FORM_TEXTUAL_ITEM_KEYPRESS, {
+ event,
+ formData,
+ itemId,
+ tabId,
+ callback: (disableAll?: boolean) => {
+ if (disableAll === true) {
+ disableAllCallback();
+ }
+ },
+ });
+ },
+ onFormChange(formData, isValid, tabId) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FORM_CHANGE, {
+ formData,
+ isValid,
+ tabId,
+ });
+ },
+ });
+ this.card?.render.insertChild('beforeend', this.chatFormItems.render);
+ }
+
+ /**
+ * Generate file tree if available
+ */
+ if (this.fileTreeWrapper != null) {
+ this.fileTreeWrapper.render.remove();
+ this.fileTreeWrapper = null;
+ }
+ if (this.props.chatItem.fileList != null && this.props.chatItem.header?.fileList?.renderAsPills !== true) {
+ const { filePaths = [], deletedFiles = [], actions, details, flatList } = this.props.chatItem.fileList;
+ const referenceSuggestionLabel = this.props.chatItem.body ?? '';
+ this.fileTreeWrapper = new ChatItemTreeViewWrapper({
+ tabId: this.props.tabId,
+ classNames: ['mynah-card-inner-order-50'],
+ messageId: this.props.chatItem.messageId ?? '',
+ cardTitle: this.props.chatItem.fileList.fileTreeTitle,
+ rootTitle: this.props.chatItem.fileList.rootFolderTitle,
+ rootStatusIcon: this.props.chatItem.fileList.rootFolderStatusIcon,
+ rootIconForegroundStatus: this.props.chatItem.fileList.rootFolderStatusIconForegroundStatus,
+ rootLabel: this.props.chatItem.fileList.rootFolderLabel,
+ folderIcon: this.props.chatItem.fileList.folderIcon,
+ hideFileCount: this.props.chatItem.fileList.hideFileCount ?? false,
+ collapsed:
+ this.fileTreeWrapperCollapsedState != null
+ ? this.fileTreeWrapperCollapsedState
+ : this.props.chatItem.fileList.collapsed != null
+ ? this.props.chatItem.fileList.collapsed
+ : false,
+ files: filePaths,
+ deletedFiles,
+ flatList,
+ actions,
+ details,
+ references: this.props.chatItem.codeReference ?? [],
+ referenceSuggestionLabel,
+ onRootCollapsedStateChange: (isRootCollapsed) => {
+ this.fileTreeWrapperCollapsedState = isRootCollapsed;
+ },
+ });
+ this.card?.render.insertChild('beforeend', this.fileTreeWrapper.render);
+ } else {
+ this.fileTreeWrapperCollapsedState = null;
+ }
+
+ /**
+ * Generate information card if available
+ */
+ if (this.informationCard != null) {
+ this.informationCard.render.remove();
+ this.informationCard = null;
+ }
+ if (this.props.chatItem.informationCard != null) {
+ this.informationCard = new ChatItemInformationCard({
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ classNames: ['mynah-card-inner-order-55'],
+ informationCard: this.props.chatItem.informationCard ?? {},
+ });
+ this.card?.render.insertChild('beforeend', this.informationCard.render);
+ }
+
+ /**
+ * Generate summary content if available
+ */
+ if (this.props.chatItem.summary === null && this.summary != null) {
+ this.summary.stateIcon?.render.remove();
+ this.summary.collapsedContent.remove();
+ this.summary.visibleContent.render.remove();
+ this.summary.wrapper.remove();
+ this.summary = null;
+ }
+ if (this.props.chatItem.summary != null) {
+ if (this.summary === null) {
+ const showSummary = !(this.props.chatItem.summary.isCollapsed !== false);
+ const collapsedContent = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-card-summary-collapsed-content'],
+ children: [],
+ });
+ const visibleContent = new ChatItemCard({
+ tabId: this.props.tabId,
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ ...this.props.chatItem.summary.content,
+ messageId: this.props.chatItem.messageId,
+ },
+ });
+ const stateIcon = new Icon({ icon: showSummary ? 'down-open' : 'right-open' });
+ this.summary = {
+ showSummary,
+ stateIcon,
+ collapsedContent,
+ visibleContent,
+ wrapper: DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: [
+ 'mynah-chat-item-card-summary',
+ 'mynah-card-inner-order-65',
+ ...(showSummary ? ['show-summary'] : []),
+ ],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-chat-item-card-summary-content'],
+ children: [
+ new Button({
+ classNames: ['mynah-chat-item-summary-button'],
+ status: 'clear',
+ primary: false,
+ onClick: () => {
+ if (this.summary != null) {
+ this.summary.showSummary = !this.summary.showSummary;
+ if (this.summary.showSummary) {
+ this.summary.wrapper.addClass('show-summary');
+ this.summary.stateIcon?.update('down-open');
+ } else {
+ this.summary.wrapper.removeClass('show-summary');
+ this.summary.stateIcon?.update('right-open');
+ }
+ }
+ },
+ icon: stateIcon.render,
+ }).render,
+ visibleContent.render,
+ ],
+ },
+ collapsedContent,
+ ],
+ }),
+ };
+ }
+
+ if (this.props.chatItem.summary.content != null) {
+ this.summary.visibleContent.updateCardStack(this.props.chatItem.summary.content);
+ }
+ if (this.props.chatItem.summary.collapsedContent != null) {
+ this.summary.collapsedContent.update({
+ children: this.props.chatItem.summary.collapsedContent?.map(
+ (summaryChatItem) =>
+ new ChatItemCard({
+ tabId: this.props.tabId,
+ chatItem: {
+ type: ChatItemType.ANSWER,
+ ...summaryChatItem,
+ messageId: this.props.chatItem.messageId,
+ },
+ }).render,
+ ),
+ });
+ }
+ if (this.props.chatItem.summary.isCollapsed != null) {
+ this.summary.showSummary = !this.props.chatItem.summary.isCollapsed;
+ if (this.summary.showSummary) {
+ this.summary.wrapper.addClass('show-summary');
+ this.summary.stateIcon?.update('down-open');
+ } else {
+ this.summary.wrapper.removeClass('show-summary');
+ this.summary.stateIcon?.update('right-open');
+ }
+ }
+
+ this.card?.render.insertChild('beforeend', this.summary.wrapper);
+ }
+
+ /**
+ * Generate buttons if available
+ */
+ if (this.chatButtonsInside != null) {
+ this.chatButtonsInside.render.remove();
+ this.chatButtonsInside = null;
+ }
+ if (this.chatButtonsOutside != null) {
+ this.chatButtonsOutside.render.remove();
+ this.chatButtonsOutside = null;
+ }
+ if (this.props.chatItem.buttons != null) {
+ const insideButtons = this.props.chatItem.buttons.filter(
+ (button) => button.position == null || button.position === 'inside',
+ );
+ const outsideButtons = this.props.chatItem.buttons.filter((button) => button.position === 'outside');
+
+ const chatButtonProps: ChatItemButtonsWrapperProps = {
+ tabId: this.props.tabId,
+ classNames: ['mynah-card-inner-order-60'],
+ formItems: this.chatFormItems,
+ buttons: [],
+ onActionClick: (action) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.BODY_ACTION_CLICKED, {
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ actionId: action.id,
+ actionText: action.text,
+ ...(this.chatFormItems !== null ? { formItemValues: this.chatFormItems.getAllValues() } : {}),
+ });
+
+ if (action.keepCardAfterClick === false) {
+ this.render.remove();
+ if (this.props.chatItem.messageId !== undefined) {
+ const currentChatItems: ChatItem[] = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('chatItems');
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .updateStore(
+ {
+ chatItems: [
+ ...currentChatItems.map((chatItem) =>
+ this.props.chatItem.messageId !== chatItem.messageId
+ ? chatItem
+ : { type: ChatItemType.ANSWER, messageId: chatItem.messageId },
+ ),
+ ],
+ },
+ true,
+ );
+ }
+ }
+ },
+ };
+
+ if (insideButtons.length > 0) {
+ this.chatButtonsInside = new ChatItemButtonsWrapper({ ...chatButtonProps, buttons: insideButtons });
+ this.card?.render.insertChild('beforeend', this.chatButtonsInside.render);
+ }
+ if (outsideButtons.length > 0) {
+ this.chatButtonsOutside = new ChatItemButtonsWrapper({ ...chatButtonProps, buttons: outsideButtons });
+ this.render?.insertChild('beforeend', this.chatButtonsOutside.render);
+ }
+ }
+
+ /**
+ * Generate tabbed card if available
+ */
+ if (this.tabbedCard != null) {
+ this.tabbedCard.render.remove();
+ this.tabbedCard = null;
+ }
+ if (this.props.chatItem.tabbedContent != null) {
+ this.tabbedCard = new ChatItemTabbedCard({
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ tabbedCard: this.props.chatItem.tabbedContent,
+ classNames: ['mynah-card-inner-order-55'],
+ });
+ this.card?.render.insertChild('beforeend', this.tabbedCard.render);
+ }
+
+ /**
+ * Clear footer block
+ */
+ if (this.cardFooter != null) {
+ this.cardFooter.remove();
+ this.cardFooter = null;
+ }
+
+ if (
+ this.props.chatItem.footer != null ||
+ this.props.chatItem.canBeVoted === true ||
+ this.shouldShowQuickSettings()
+ ) {
+ this.cardFooter = this.getCardFooter();
+ this.card?.render.insertChild('beforeend', this.cardFooter);
+
+ /**
+ * Generate footer if available
+ */
+ if (this.footer != null) {
+ this.footer.render.remove();
+ this.footer = null;
+ }
+ if (this.props.chatItem.footer != null) {
+ this.footer = new ChatItemCard({
+ tabId: this.props.tabId,
+ small: true,
+ inline: true,
+ chatItem: {
+ ...this.props.chatItem.footer,
+ type: ChatItemType.ANSWER,
+ messageId: this.props.chatItem.messageId,
+ },
+ });
+ this.cardFooter.insertChild('beforeend', this.footer.render);
+ }
+
+ /**
+ * Generate votes if available
+ */
+ if (this.votes !== null) {
+ this.votes.render.remove();
+ this.votes = null;
+ }
+ if (this.props.chatItem.canBeVoted === true && this.props.chatItem.messageId !== undefined) {
+ this.votes = new ChatItemRelevanceVote({
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ });
+ this.cardFooter.insertChild('beforeend', this.votes.render);
+ }
+
+ /**
+ * Add QuickSettings to footer if available
+ */
+ if (this.props.chatItem.quickSettings != null) {
+ const dropdownContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-dropdown-list-container'],
+ children: [
+ new DropdownWrapper({
+ dropdownProps: this.props.chatItem.quickSettings,
+ }).render,
+ ],
+ });
+ this.cardFooter.insertChild('beforeend', dropdownContainer);
+ }
+ }
+
+ /**
+ * Generate/update followups if available
+ */
+ if (this.followUps !== null) {
+ this.followUps.render.remove();
+ this.followUps = null;
+ }
+ if (this.props.chatItem.followUp != null) {
+ this.followUps = new ChatItemFollowUpContainer({ tabId: this.props.tabId, chatItem: this.props.chatItem });
+ this.render?.insertChild('beforeend', this.followUps.render);
+ }
+ };
+
+ private readonly getChatAvatar = (): ExtendedHTMLElement =>
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-card-icon-wrapper'],
+ children: [
+ new Icon({ icon: this.props.chatItem.type === ChatItemType.PROMPT ? MynahIcons.USER : MynahIcons.Q })
+ .render,
+ ],
+ });
+
+ private readonly canShowAvatar = (): boolean =>
+ this.props.chatItem.type === ChatItemType.ANSWER_STREAM ||
+ (this.props.inline !== true && chatItemHasContent({ ...this.props.chatItem, followUp: undefined }));
+
+ private readonly shouldShowQuickSettings = (): boolean => {
+ return this.props.chatItem.quickSettings != null;
+ };
+
+ private readonly showTooltip = (content: string, elm: HTMLElement): void => {
+ if (content.trim() !== undefined) {
+ clearTimeout(this.tooltipTimeout);
+ this.tooltipTimeout = setTimeout(() => {
+ this.tooltipOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.CENTER,
+ children: [
+ new Card({
+ border: false,
+ children: [
+ new CardBody({
+ body: content,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ }, TOOLTIP_DELAY);
+ }
+ };
+
+ public readonly hideTooltip = (): void => {
+ clearTimeout(this.tooltipTimeout);
+ if (this.tooltipOverlay !== null) {
+ this.tooltipOverlay?.close();
+ this.tooltipOverlay = null;
+ }
+ };
+
+ public readonly updateCard = (): void => {
+ if (this.updateStack.length > 0) {
+ const updateWith: Partial | undefined = this.updateStack.shift();
+ if (updateWith !== undefined) {
+ // Update item inside the store
+ if (this.props.chatItem.messageId != null) {
+ const currentTabChatItems = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ ?.getStore()?.chatItems;
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .updateStore(
+ {
+ chatItems: currentTabChatItems?.map((chatItem: ChatItem) => {
+ if (chatItem.messageId === this.props.chatItem.messageId) {
+ return {
+ ...this.props.chatItem,
+ ...updateWith,
+ };
+ }
+ return chatItem;
+ }),
+ },
+ true,
+ );
+ }
+
+ this.props.chatItem = {
+ ...this.props.chatItem,
+ ...updateWith,
+ };
+
+ this.render?.update({
+ ...(this.props.chatItem.messageId != null
+ ? {
+ attributes: {
+ messageid: this.props.chatItem.messageId,
+ },
+ }
+ : {}),
+ classNames: [
+ ...this.getCardClasses(),
+ 'reveal',
+ ...(this.isMoreContentExpanded ? [] : ['mynah-chat-item-collapsed']),
+ ],
+ });
+ this.updateCardContent();
+ this.updateCard();
+ this.setMaxHeightClass(this.card?.render);
+ }
+ }
+ };
+
+ public readonly updateCardStack = (updateWith: Partial): void => {
+ this.updateStack.push(updateWith);
+ this.updateCard();
+ };
+
+ public readonly clearContent = (): void => {
+ this.cardHeader?.remove();
+ this.cardHeader = null;
+
+ this.contentBody?.render.remove();
+ this.contentBody = null;
+
+ this.chatButtonsInside?.render.remove();
+ this.chatButtonsInside = null;
+
+ this.customRendererWrapper?.render.remove();
+ this.customRendererWrapper = null;
+
+ this.fileTreeWrapper?.render.remove();
+ this.fileTreeWrapper = null;
+
+ this.followUps?.render.remove();
+ this.followUps = null;
+
+ this.cardFooter?.remove();
+ this.cardFooter = null;
+
+ this.chatFormItems?.render.remove();
+ this.chatFormItems = null;
+
+ this.informationCard?.render.remove();
+ this.informationCard = null;
+
+ this.tabbedCard?.render.remove();
+ this.tabbedCard = null;
+ };
+
+ public readonly getRenderDetails = (): CardRenderDetails => {
+ return {
+ totalNumberOfCodeBlocks:
+ (this.contentBody?.getRenderDetails().totalNumberOfCodeBlocks ?? 0) +
+ (this.customRendererWrapper?.nextCodeBlockIndex ?? 0),
+ };
+ };
+
+ public readonly endStream = (): void => {
+ this.contentBody?.endStream();
+ };
+
+ public readonly cleanFollowupsAndRemoveIfEmpty = (): boolean => {
+ this.followUps?.render?.remove();
+ this.followUps = null;
+ if (
+ !chatItemHasContent({
+ ...this.props.chatItem,
+ followUp: undefined,
+ })
+ ) {
+ this.render.remove();
+ return true;
+ }
+ return false;
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-followup.ts b/mynah-ui/src/components/chat-item/chat-item-followup.ts
new file mode 100644
index 0000000000..2c92c110e9
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-followup.ts
@@ -0,0 +1,109 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { MynahUIGlobalEvents } from '../../helper/events';
+import testIds from '../../helper/test-ids';
+import { ChatItem, MynahEventNames } from '../../static';
+import { Button } from '../button';
+import { Icon } from '../icon';
+
+export interface ChatItemFollowUpProps {
+ tabId: string;
+ chatItem: ChatItem;
+}
+export class ChatItemFollowUpContainer {
+ private readonly props: ChatItemFollowUpProps;
+ render: ExtendedHTMLElement;
+ private readonly itemAddListenerId: string;
+ private followupOptions: Button[];
+ constructor(props: ChatItemFollowUpProps) {
+ this.props = props;
+ this.props.chatItem = props.chatItem;
+ this.followupOptions = (this.props.chatItem.followUp?.options ?? []).map(
+ (followUpOption) =>
+ new Button({
+ testId: testIds.chatItem.chatItemFollowup.optionButton,
+ classNames: ['mynah-chat-item-followup-question-option'],
+ status: followUpOption.status,
+ label: followUpOption.pillText,
+ tooltip: followUpOption.description,
+ disabled: followUpOption.disabled,
+ border: true,
+ primary: false,
+ ...(followUpOption.icon != null ? { icon: new Icon({ icon: followUpOption.icon }).render } : {}),
+ onClick: () => {
+ MynahUIGlobalEvents.getInstance().removeListener(
+ MynahEventNames.CHAT_ITEM_ADD,
+ this.itemAddListenerId,
+ );
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FOLLOW_UP_CLICKED, {
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ followUpOption,
+ });
+ if ((this.render.parentElement as ExtendedHTMLElement)?.hasClass('mynah-chat-item-empty')) {
+ this.render.parentElement?.remove();
+ } else {
+ this.render.remove();
+ }
+ },
+ }),
+ );
+ this.itemAddListenerId = MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.CHAT_ITEM_ADD,
+ (data) => {
+ if (data.tabId === this.props.tabId) {
+ this.render.remove();
+ this.followupOptions.forEach((option) => option.hideTooltip());
+ this.followupOptions = [];
+ MynahUIGlobalEvents.getInstance().removeListener(
+ MynahEventNames.CHAT_ITEM_ADD,
+ this.itemAddListenerId,
+ );
+ }
+ },
+ );
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.chatItemFollowup.wrapper,
+ classNames: ['mynah-chat-item-followup-question'],
+ children: [
+ {
+ type: 'div',
+ testId: testIds.chatItem.chatItemFollowup.title,
+ classNames: ['mynah-chat-item-followup-question-text'],
+ children: [this.props.chatItem.followUp?.text ?? ''],
+ },
+ {
+ type: 'div',
+ testId: testIds.chatItem.chatItemFollowup.optionsWrapper,
+ classNames: ['mynah-chat-item-followup-question-options-wrapper'],
+ children: this.followupOptions.map((option) => option.render),
+ },
+ ],
+ });
+
+ Array.from(this.render.getElementsByTagName('a')).forEach((a) => {
+ const url = a.href;
+
+ a.onclick = (event: MouseEvent) => {
+ this.handleLinkClick(url, event);
+ };
+ a.onauxclick = (event: MouseEvent) => {
+ this.handleLinkClick(url, event);
+ };
+ });
+ }
+
+ private readonly handleLinkClick = (url: string, event?: MouseEvent): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.LINK_CLICK, {
+ tabId: this.props.tabId,
+ messageId: this.props.chatItem.messageId,
+ link: url,
+ event,
+ });
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-form-items.ts b/mynah-ui/src/components/chat-item/chat-item-form-items.ts
new file mode 100644
index 0000000000..52d183f710
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-form-items.ts
@@ -0,0 +1,425 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import testIds from '../../helper/test-ids';
+import { isMandatoryItemValid, isTextualFormItemValid } from '../../helper/validator';
+import { ChatItem, ChatItemFormItem, TextBasedFormItem } from '../../static';
+import { Card } from '../card/card';
+import { CardBody } from '../card/card-body';
+import { Checkbox } from '../form-items/checkbox';
+import { FormItemList } from '../form-items/form-item-list';
+import { FormItemPillBox } from '../form-items/form-item-pill-box';
+import { RadioGroup } from '../form-items/radio-group';
+import { Select } from '../form-items/select';
+import { Stars } from '../form-items/stars';
+import { Switch } from '../form-items/switch';
+import { TextArea } from '../form-items/text-area';
+import { TextInput } from '../form-items/text-input';
+import { Icon, MynahIcons } from '../icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+const TOOLTIP_DELAY = 350;
+export interface ChatItemFormItemsWrapperProps {
+ tabId: string;
+ chatItem: Partial;
+ classNames?: string[];
+ onModifierEnterPress?: (formData: Record, tabId: string) => void;
+ onTextualItemKeyPress?: (
+ event: KeyboardEvent,
+ itemId: string,
+ formData: Record,
+ tabId: string,
+ disableAllCallback: () => void,
+ ) => void;
+ onFormChange?: (formData: Record, isValid: boolean, tabId: string) => void;
+}
+export class ChatItemFormItemsWrapper {
+ private readonly props: ChatItemFormItemsWrapperProps;
+ private readonly options: Record<
+ string,
+ Select | TextArea | TextInput | RadioGroup | Stars | Checkbox | FormItemList | FormItemPillBox
+ > = {};
+ private readonly validationItems: Record = {};
+ private isValid: boolean = false;
+ private tooltipOverlay: Overlay | null;
+ private tooltipTimeout: ReturnType;
+ onValidationChange?: (isValid: boolean) => void;
+ onAllFormItemsDisabled?: () => void;
+
+ render: ExtendedHTMLElement;
+ constructor(props: ChatItemFormItemsWrapperProps) {
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.chatItemForm.wrapper,
+ classNames: ['mynah-chat-item-form-items-container', ...(this.props.classNames ?? [])],
+ children: this.props.chatItem.formItems?.map((chatItemOption) => {
+ const title = `${chatItemOption.mandatory === true && chatItemOption.hideMandatoryIcon !== true ? '* ' : ''}${chatItemOption.title ?? ''}`;
+ let chatOption:
+ | Select
+ | RadioGroup
+ | TextArea
+ | Stars
+ | TextInput
+ | Checkbox
+ | FormItemList
+ | undefined;
+ const label: ExtendedHTMLElement = DomBuilder.getInstance().build({
+ type: 'div',
+ children: [title],
+ });
+ if (chatItemOption.boldTitle === true) {
+ label.addClass('.mynah-ui-form-item-bold-label');
+ }
+ if (chatItemOption.mandatory === true) {
+ if (chatItemOption.hideMandatoryIcon !== true) {
+ // Add the mandatory class to the existing label
+ label.addClass('mynah-ui-form-item-mandatory-title');
+ label.update({
+ testId: testIds.chatItem.chatItemForm.title,
+ children: [new Icon({ icon: MynahIcons.ASTERISK }).render, chatItemOption.title ?? ''],
+ });
+ }
+ // Since the field is mandatory, default the selected value to the first option
+ if (chatItemOption.type === 'select' && chatItemOption.value === undefined) {
+ chatItemOption.value = chatItemOption.options?.[0]?.value;
+ }
+ }
+ let description;
+ if (chatItemOption.description != null) {
+ description = DomBuilder.getInstance().build({
+ type: 'span',
+ testId: testIds.chatItem.chatItemForm.description,
+ classNames: ['mynah-ui-form-item-description'],
+ children: [chatItemOption.description],
+ });
+ }
+ const fireModifierAndEnterKeyPress = (): void => {
+ if (
+ (chatItemOption as TextBasedFormItem).checkModifierEnterKeyPress === true &&
+ this.isFormValid()
+ ) {
+ this.props.onModifierEnterPress?.(this.getAllValues(), props.tabId);
+ }
+ };
+ const value = chatItemOption.value?.toString();
+ switch (chatItemOption.type) {
+ case 'list':
+ chatOption = new FormItemList({
+ wrapperTestId: testIds.chatItem.chatItemForm.itemList,
+ label,
+ description,
+ items: chatItemOption.items,
+ value: chatItemOption.value,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'select':
+ chatOption = new Select({
+ wrapperTestId: testIds.chatItem.chatItemForm.itemSelectWrapper,
+ optionTestId: testIds.chatItem.chatItemForm.itemSelect,
+ label,
+ border: chatItemOption.border,
+ autoWidth: chatItemOption.autoWidth,
+ description,
+ value,
+ icon: chatItemOption.icon,
+ options: chatItemOption.options,
+ optional: chatItemOption.mandatory !== true,
+ placeholder: chatItemOption.placeholder ?? Config.getInstance().config.texts.pleaseSelect,
+ tooltip: chatItemOption.selectTooltip ?? '',
+ ...this.getHandlers(chatItemOption),
+ });
+ if (chatItemOption.disabled === true) {
+ chatOption.setEnabled(false);
+ }
+ break;
+ case 'radiogroup':
+ case 'toggle':
+ chatOption = new RadioGroup({
+ type: chatItemOption.type,
+ wrapperTestId: testIds.chatItem.chatItemForm.itemRadioWrapper,
+ optionTestId: testIds.chatItem.chatItemForm.itemRadio,
+ label,
+ description,
+ value,
+ options: chatItemOption.options,
+ optional: chatItemOption.mandatory !== true,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'checkbox':
+ chatOption = new Checkbox({
+ wrapperTestId: testIds.chatItem.chatItemForm.itemToggleWrapper,
+ optionTestId: testIds.chatItem.chatItemForm.itemToggleOption,
+ title: label,
+ label: chatItemOption.label,
+ icon: chatItemOption.icon,
+ description,
+ value: value as 'true' | 'false',
+ optional: chatItemOption.mandatory !== true,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'switch':
+ chatOption = new Switch({
+ testId: testIds.chatItem.chatItemForm.itemSwitch,
+ title: label,
+ label: chatItemOption.label,
+ icon: chatItemOption.icon,
+ description,
+ value: value as 'true' | 'false',
+ optional: chatItemOption.mandatory !== true,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'textarea':
+ chatOption = new TextArea({
+ testId: testIds.chatItem.chatItemForm.itemTextArea,
+ label,
+ autoFocus: chatItemOption.autoFocus,
+ description,
+ fireModifierAndEnterKeyPress,
+ onKeyPress: (event) => {
+ this.handleTextualItemKeyPressEvent(event, chatItemOption.id);
+ },
+ value,
+ mandatory: chatItemOption.mandatory,
+ validationPatterns: chatItemOption.validationPatterns,
+ placeholder: chatItemOption.placeholder,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'textinput':
+ chatOption = new TextInput({
+ testId: testIds.chatItem.chatItemForm.itemInput,
+ label,
+ autoFocus: chatItemOption.autoFocus,
+ description,
+ icon: chatItemOption.icon,
+ fireModifierAndEnterKeyPress,
+ onKeyPress: (event) => {
+ this.handleTextualItemKeyPressEvent(event, chatItemOption.id);
+ },
+ value,
+ mandatory: chatItemOption.mandatory,
+ validationPatterns: chatItemOption.validationPatterns,
+ validateOnChange: chatItemOption.validateOnChange,
+ placeholder: chatItemOption.placeholder,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'numericinput':
+ chatOption = new TextInput({
+ testId: testIds.chatItem.chatItemForm.itemInput,
+ label,
+ autoFocus: chatItemOption.autoFocus,
+ description,
+ icon: chatItemOption.icon,
+ fireModifierAndEnterKeyPress,
+ onKeyPress: (event) => {
+ this.handleTextualItemKeyPressEvent(event, chatItemOption.id);
+ },
+ value,
+ mandatory: chatItemOption.mandatory,
+ validationPatterns: chatItemOption.validationPatterns,
+ type: 'number',
+ placeholder: chatItemOption.placeholder,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'email':
+ chatOption = new TextInput({
+ testId: testIds.chatItem.chatItemForm.itemInput,
+ label,
+ autoFocus: chatItemOption.autoFocus,
+ description,
+ icon: chatItemOption.icon,
+ fireModifierAndEnterKeyPress,
+ onKeyPress: (event) => {
+ this.handleTextualItemKeyPressEvent(event, chatItemOption.id);
+ },
+ value,
+ mandatory: chatItemOption.mandatory,
+ validationPatterns: chatItemOption.validationPatterns,
+ type: 'email',
+ placeholder: chatItemOption.placeholder,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'pillbox':
+ chatOption = new FormItemPillBox({
+ id: chatItemOption.id,
+ wrapperTestId: testIds.chatItem.chatItemForm.itemInput,
+ label,
+ description,
+ value,
+ placeholder: chatItemOption.placeholder,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ case 'stars':
+ chatOption = new Stars({
+ wrapperTestId: testIds.chatItem.chatItemForm.itemStarsWrapper,
+ optionTestId: testIds.chatItem.chatItemForm.itemStars,
+ label,
+ description,
+ value,
+ ...this.getHandlers(chatItemOption),
+ });
+ break;
+ default:
+ break;
+ }
+
+ if (chatOption != null) {
+ this.options[chatItemOption.id] = chatOption;
+ if (chatItemOption.tooltip != null) {
+ chatOption.render.update({
+ events: {
+ mouseover: (e) => {
+ cancelEvent(e);
+ if (chatItemOption.tooltip != null && chatOption?.render != null) {
+ let tooltipToShow = chatItemOption.tooltip;
+ if (
+ (chatItemOption.type === 'checkbox' || chatItemOption.type === 'switch') &&
+ chatItemOption.alternateTooltip != null &&
+ chatOption.getValue() === 'false'
+ ) {
+ tooltipToShow = chatItemOption.alternateTooltip;
+ }
+ this.showTooltip(tooltipToShow, chatOption.render);
+ }
+ },
+ mouseleave: this.hideTooltip,
+ },
+ });
+ }
+ return chatOption.render;
+ }
+ return null;
+ }) as ExtendedHTMLElement[],
+ });
+ this.isFormValid();
+ }
+
+ private readonly showTooltip = (content: string, elm: HTMLElement | ExtendedHTMLElement): void => {
+ if (content.trim() !== undefined) {
+ clearTimeout(this.tooltipTimeout);
+ this.tooltipTimeout = setTimeout(() => {
+ this.tooltipOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ new Card({
+ border: false,
+ children: [
+ new CardBody({
+ body: content,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ }, TOOLTIP_DELAY);
+ }
+ };
+
+ public readonly hideTooltip = (): void => {
+ clearTimeout(this.tooltipTimeout);
+ if (this.tooltipOverlay !== null) {
+ this.tooltipOverlay?.close();
+ this.tooltipOverlay = null;
+ }
+ };
+
+ private readonly getHandlers = (chatItemOption: ChatItemFormItem): Object => {
+ if (
+ chatItemOption.mandatory === true ||
+ (['textarea', 'textinput', 'numericinput', 'email', 'pillbox'].includes(chatItemOption.type) &&
+ (chatItemOption as TextBasedFormItem).validationPatterns != null)
+ ) {
+ // Set initial validation status
+ this.validationItems[chatItemOption.id] = this.isItemValid(
+ (chatItemOption.value as string) ?? '',
+ chatItemOption,
+ );
+ return {
+ onChange: (value: string | number) => {
+ this.props.onFormChange?.(this.getAllValues(), this.isFormValid(), this.props.tabId);
+ this.validationItems[chatItemOption.id] = this.isItemValid(value.toString(), chatItemOption);
+ this.isFormValid();
+ },
+ };
+ }
+ return {
+ onChange: () => {
+ this.props.onFormChange?.(this.getAllValues(), this.isFormValid(), this.props.tabId);
+ },
+ };
+ };
+
+ private readonly handleTextualItemKeyPressEvent = (event: KeyboardEvent, itemId: string): void => {
+ this.isFormValid() &&
+ this.props.onTextualItemKeyPress?.(event, itemId, this.getAllValues(), this.props.tabId, this.disableAll);
+ };
+
+ private readonly isItemValid = (value: string, chatItemOption: ChatItemFormItem): boolean => {
+ let validationState = true;
+ if (chatItemOption.mandatory === true) {
+ validationState = isMandatoryItemValid(value ?? '');
+ }
+ if (
+ (chatItemOption.type === 'textarea' || chatItemOption.type === 'textinput') &&
+ chatItemOption.validationPatterns != null
+ ) {
+ validationState =
+ validationState &&
+ isTextualFormItemValid(
+ value ?? '',
+ chatItemOption.validationPatterns ?? { patterns: [] },
+ chatItemOption.mandatory,
+ ).isValid;
+ }
+
+ return validationState;
+ };
+
+ isFormValid = (): boolean => {
+ const currentValidationStatus = Object.keys(this.validationItems).reduce((prev, curr) => {
+ return prev && this.validationItems[curr];
+ }, true);
+
+ if (this.isValid !== currentValidationStatus && this.onValidationChange !== undefined) {
+ this.onValidationChange(currentValidationStatus);
+ }
+ this.isValid = currentValidationStatus;
+ return currentValidationStatus;
+ };
+
+ disableAll = (): void => {
+ Object.keys(this.options).forEach((chatOptionId) => this.options[chatOptionId].setEnabled(false));
+ this.onAllFormItemsDisabled?.();
+ };
+
+ enableAll = (): void => {
+ Object.keys(this.options).forEach((chatOptionId) => this.options[chatOptionId].setEnabled(true));
+ };
+
+ getAllValues = (): Record>> => {
+ const valueMap: Record>> = {};
+ Object.keys(this.options).forEach((chatOptionId) => {
+ valueMap[chatOptionId] = this.options[chatOptionId].getValue();
+ });
+ return valueMap;
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-information-card.ts b/mynah-ui/src/components/chat-item/chat-item-information-card.ts
new file mode 100644
index 0000000000..fe33944658
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-information-card.ts
@@ -0,0 +1,75 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { ChatItemContent, ChatItemType } from '../../static';
+import { ChatItemCard } from './chat-item-card';
+import { TitleDescriptionWithIcon } from '../title-description-with-icon';
+import { StyleLoader } from '../../helper/style-loader';
+
+export interface ChatItemInformationCardProps {
+ tabId: string;
+ testId?: string;
+ messageId: string | undefined;
+ classNames?: string[];
+ informationCard: NonNullable['informationCard']>;
+}
+
+export class ChatItemInformationCard {
+ render: ExtendedHTMLElement;
+
+ constructor(props: ChatItemInformationCardProps) {
+ StyleLoader.getInstance().load('components/chat/_chat-item-card-information-card.scss');
+
+ const mainContent = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-information-card-main'],
+ children: [
+ new TitleDescriptionWithIcon({
+ classNames: ['mynah-chat-item-information-card-header-container'],
+ icon: props.informationCard.icon,
+ title: props.informationCard.title,
+ description: props.informationCard.description,
+ testId: `${props.testId ?? ''}-header`,
+ }).render,
+ ],
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: props.testId,
+ classNames: [
+ 'mynah-chat-item-information-card',
+ ...(props.classNames ?? []),
+ Object.keys(props.informationCard.status ?? {}).length > 0 ? 'has-footer' : '',
+ ],
+ children: [mainContent],
+ });
+
+ mainContent.insertChild(
+ 'beforeend',
+ new ChatItemCard({
+ tabId: props.tabId,
+ small: true,
+ inline: true,
+ chatItem: {
+ ...props.informationCard.content,
+ type: ChatItemType.ANSWER,
+ messageId: props.messageId,
+ },
+ }).render,
+ );
+
+ if (props.informationCard.status != null) {
+ const statusFooter = new TitleDescriptionWithIcon({
+ testId: `${props.testId ?? ''}-footer`,
+ classNames: [
+ 'mynah-chat-item-information-card-footer',
+ ...(props.informationCard.status.status != null
+ ? [`status-${props.informationCard.status.status}`]
+ : []),
+ ],
+ icon: props.informationCard.status.icon,
+ description: props.informationCard.status.body,
+ }).render;
+ this.render.insertChild('beforeend', statusFooter);
+ }
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-relevance-vote.ts b/mynah-ui/src/components/chat-item/chat-item-relevance-vote.ts
new file mode 100644
index 0000000000..62f28221c6
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-relevance-vote.ts
@@ -0,0 +1,142 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FeedbackPayload, MynahEventNames, RelevancyVoteType } from '../../static';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { Icon, MynahIcons } from '../icon';
+import { MynahUIGlobalEvents } from '../../helper/events';
+import { Button } from '../button';
+import { Config } from '../../helper/config';
+import testIds from '../../helper/test-ids';
+
+const THANKS_REMOVAL_DURATION = 3500;
+export interface ChatItemRelevanceVoteProps {
+ tabId: string;
+ classNames?: string[];
+ messageId: string;
+}
+export class ChatItemRelevanceVote {
+ private readonly votingId: string;
+ private sendFeedbackListenerId: string | undefined;
+ render: ExtendedHTMLElement;
+ props: ChatItemRelevanceVoteProps;
+ constructor(props: ChatItemRelevanceVoteProps) {
+ this.props = props;
+ this.votingId = `${this.props.tabId}-${this.props.messageId}`;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-card-votes-wrapper', ...(this.props.classNames ?? [])],
+ testId: testIds.chatItem.vote.wrapper,
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-card-vote'],
+ children: [
+ {
+ type: 'input',
+ testId: testIds.chatItem.vote.upvote,
+ events: {
+ change: (e: Event) => {
+ this.handleVoteChange(RelevancyVoteType.UP);
+ },
+ },
+ attributes: {
+ type: 'radio',
+ id: `${this.votingId}-vote-up`,
+ name: `${this.votingId}-vote`,
+ value: 'up',
+ },
+ classNames: ['mynah-vote-radio', 'mynah-vote-up-radio'],
+ },
+ {
+ type: 'input',
+ testId: testIds.chatItem.vote.downvote,
+ events: {
+ change: (e: Event) => {
+ this.handleVoteChange(RelevancyVoteType.DOWN);
+ },
+ },
+ attributes: {
+ type: 'radio',
+ id: `${this.votingId}-vote-down`,
+ name: `${this.votingId}-vote`,
+ value: 'down',
+ },
+ classNames: ['mynah-vote-radio', 'mynah-vote-down-radio'],
+ },
+ {
+ type: 'label',
+ testId: testIds.chatItem.vote.upvoteLabel,
+ attributes: { for: `${this.votingId}-vote-up` },
+ classNames: ['mynah-vote-label', 'mynah-vote-up'],
+ children: [new Icon({ icon: MynahIcons.THUMBS_UP }).render],
+ },
+ {
+ type: 'label',
+ testId: testIds.chatItem.vote.downvoteLabel,
+ attributes: { for: `${this.votingId}-vote-down` },
+ classNames: ['mynah-vote-label', 'mynah-vote-down'],
+ children: [new Icon({ icon: MynahIcons.THUMBS_DOWN }).render],
+ },
+ ],
+ },
+ ],
+ });
+ }
+
+ private readonly handleVoteChange = (vote: RelevancyVoteType): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CARD_VOTE, {
+ messageId: this.props.messageId,
+ tabId: this.props.tabId,
+ vote,
+ });
+ const newChildren = [
+ DomBuilder.getInstance().build({
+ type: 'span',
+ testId: testIds.chatItem.vote.thanks,
+ innerHTML: Config.getInstance().config.texts.feedbackThanks,
+ }),
+ ...(vote === RelevancyVoteType.DOWN
+ ? [
+ new Button({
+ testId: testIds.chatItem.vote.reportButton,
+ label: Config.getInstance().config.texts.feedbackReportButtonLabel,
+ onClick: () => {
+ if (this.sendFeedbackListenerId === undefined) {
+ this.sendFeedbackListenerId = MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.FEEDBACK_SET,
+ (data: FeedbackPayload) => {
+ if (
+ data.messageId === this.props.messageId &&
+ data.tabId === this.props.tabId
+ ) {
+ MynahUIGlobalEvents.getInstance().removeListener(
+ MynahEventNames.FEEDBACK_SET,
+ this.sendFeedbackListenerId as string,
+ );
+ this.render.remove();
+ }
+ },
+ );
+ }
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.SHOW_FEEDBACK_FORM, {
+ tabId: this.props.tabId,
+ messageId: this.props.messageId,
+ });
+ },
+ primary: false,
+ }).render,
+ ]
+ : []),
+ ];
+ this.render.replaceChildren(...newChildren);
+
+ if (vote === RelevancyVoteType.UP) {
+ setTimeout(() => {
+ this.render.remove();
+ }, THANKS_REMOVAL_DURATION);
+ }
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-source-links.ts b/mynah-ui/src/components/chat-item/chat-item-source-links.ts
new file mode 100644
index 0000000000..e5115579dd
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-source-links.ts
@@ -0,0 +1,99 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { MynahUIGlobalEvents } from '../../helper/events';
+import testIds from '../../helper/test-ids';
+import { MynahEventNames, SourceLink } from '../../static';
+import { Button } from '../button';
+import { Card } from '../card/card';
+import { Icon, MynahIcons } from '../icon';
+import { SourceLinkHeader } from '../source-link/source-link-header';
+
+const MAX_ITEMS = 1;
+export interface ChatItemSourceLinksContainerProps {
+ tabId: string;
+ messageId: string;
+ title?: string;
+ relatedContent?: SourceLink[];
+}
+export class ChatItemSourceLinksContainer {
+ private readonly props: ChatItemSourceLinksContainerProps;
+ private readonly showMoreButtonBlock: Button;
+ render: ExtendedHTMLElement;
+ chatAvatar: ExtendedHTMLElement;
+ constructor(props: ChatItemSourceLinksContainerProps) {
+ this.props = props;
+ this.showMoreButtonBlock = new Button({
+ testId: testIds.chatItem.relatedLinks.showMore,
+ classNames: ['mynah-chat-item-card-related-content-show-more'],
+ primary: false,
+ icon: new Icon({ icon: MynahIcons.DOWN_OPEN }).render,
+ onClick: () => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.SHOW_MORE_WEB_RESULTS_CLICK, {
+ messageId: this.props.messageId,
+ });
+ this.showMoreButtonBlock.render.remove();
+ this.render.addClass('expanded');
+ },
+ label: 'Show more',
+ });
+
+ if (this.props.relatedContent !== undefined) {
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.relatedLinks.wrapper,
+ classNames: [
+ 'mynah-chat-item-card-related-content',
+ this.props.relatedContent !== undefined && this.props.relatedContent.length <= MAX_ITEMS
+ ? 'expanded'
+ : '',
+ ],
+ children: [
+ ...(this.props.title !== undefined
+ ? [
+ {
+ type: 'span',
+ testId: testIds.chatItem.relatedLinks.title,
+ classNames: ['mynah-chat-item-card-related-content-title'],
+ children: [this.props.title],
+ },
+ ]
+ : []),
+ ...this.props.relatedContent.map((sourceLink) =>
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-card-related-content-item'],
+ children: [
+ new Card({
+ background: false,
+ border: false,
+ padding: 'none',
+ children: [
+ new SourceLinkHeader({
+ sourceLink,
+ showCardOnHover: true,
+ onClick: (e) => {
+ MynahUIGlobalEvents.getInstance().dispatch(
+ MynahEventNames.SOURCE_LINK_CLICK,
+ {
+ messageId: this.props.messageId,
+ link: sourceLink.url,
+ event: e,
+ },
+ );
+ },
+ }).render,
+ ],
+ }).render,
+ ],
+ }),
+ ),
+ this.showMoreButtonBlock.render,
+ ],
+ });
+ }
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-tabbed-card.ts b/mynah-ui/src/components/chat-item/chat-item-tabbed-card.ts
new file mode 100644
index 0000000000..2f91cfb324
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-tabbed-card.ts
@@ -0,0 +1,87 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { ChatItemContent, ChatItemType, MynahEventNames } from '../../static';
+import { Tab, ToggleOption } from '../tabs';
+import { ChatItemCard } from './chat-item-card';
+import testIds from '../../helper/test-ids';
+import { emptyChatItemContent } from '../../helper/chat-item';
+import { MynahUIGlobalEvents } from '../../helper/events';
+import { StyleLoader } from '../../helper/style-loader';
+
+export interface ChatItemTabbedCardProps {
+ tabId: string;
+ messageId: string | undefined;
+ tabbedCard: NonNullable['tabbedContent']>;
+ classNames?: string[];
+}
+
+export class ChatItemTabbedCard {
+ contentCard: ChatItemCard;
+ render: ExtendedHTMLElement;
+ props: ChatItemTabbedCardProps;
+
+ constructor(props: ChatItemTabbedCardProps) {
+ StyleLoader.getInstance().load('components/chat/_chat-item-card-tabbed-card.scss');
+ this.props = props;
+ const toggleGroup = new Tab({
+ options: props.tabbedCard,
+ direction: 'horizontal',
+ name: `tabbed-card-toggle-${props.messageId ?? props.tabId}`,
+ value: this.getTabOfSelectedOrGivenValue().value,
+ testId: testIds.chatItem.tabbedCard.tabs,
+ onChange: (value) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.TABBED_CONTENT_SWITCH, {
+ tabId: this.props.tabId,
+ messageId: this.props.messageId,
+ contentTabId: value,
+ });
+ this.contentCard.clearContent();
+ this.contentCard.updateCardStack({
+ ...emptyChatItemContent,
+ ...this.getTabOfSelectedOrGivenValue(value).content,
+ });
+ },
+ });
+
+ const selectedTabContent = (props.tabbedCard.find((tab) => tab.selected) ?? props.tabbedCard[0])?.content;
+ this.contentCard = new ChatItemCard({
+ tabId: props.tabId,
+ chatItem: {
+ messageId: props.messageId,
+ type: ChatItemType.ANSWER,
+ ...selectedTabContent,
+ },
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-tabbed-card-wrapper', ...(props.classNames ?? '')],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-tabbed-card-contents'],
+ children: [this.contentCard.render],
+ },
+ ...(props.tabbedCard.length > 1
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-tabbed-card-tabs'],
+ children: [toggleGroup.render],
+ },
+ ]
+ : []),
+ ],
+ });
+ }
+
+ private readonly getTabOfSelectedOrGivenValue = (
+ value?: string,
+ ): ToggleOption & {
+ content: ChatItemContent;
+ } => {
+ return (
+ this.props.tabbedCard.find((tab) => (value != null ? tab.value === value : tab.selected)) ??
+ this.props.tabbedCard[0]
+ );
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-tree-file.ts b/mynah-ui/src/components/chat-item/chat-item-tree-file.ts
new file mode 100644
index 0000000000..84471f9f87
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-tree-file.ts
@@ -0,0 +1,261 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { MynahUIGlobalEvents, cancelEvent } from '../../helper/events';
+import { FileNodeAction, MynahEventNames, TreeNodeDetails } from '../../static';
+import { Button } from '../button';
+import { Card } from '../card/card';
+import { CardBody } from '../card/card-body';
+import { Icon, MynahIcons, MynahIconsType } from '../icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+import testIds from '../../helper/test-ids';
+import { parseMarkdown } from '../../helper/marked';
+
+export interface ChatItemTreeFileProps {
+ tabId: string;
+ messageId: string;
+ filePath: string;
+ originalFilePath: string;
+ fileName: string;
+ icon?: MynahIcons | MynahIconsType | null;
+ deleted?: boolean;
+ details?: TreeNodeDetails;
+ actions?: FileNodeAction[];
+}
+
+const PREVIEW_DELAY = 250;
+export class ChatItemTreeFile {
+ render: ExtendedHTMLElement;
+ private readonly props: ChatItemTreeFileProps;
+ private fileTooltip: Overlay | null;
+ private fileTooltipTimeout: ReturnType;
+ constructor(props: ChatItemTreeFileProps) {
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.fileTree.file,
+ classNames: [
+ 'mynah-chat-item-tree-view-file-item',
+ 'mynah-button',
+ 'mynah-button-secondary',
+ this.props.details?.clickable === false ? 'mynah-chat-item-tree-view-not-clickable' : '',
+ this.props.details?.status != null
+ ? `mynah-chat-item-tree-view-file-item-status-${this.props.details?.status}`
+ : '',
+ ],
+ events: {
+ click: () => {
+ this.hideTooltip();
+ if (this.props.details?.clickable !== false) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FILE_CLICK, {
+ tabId: this.props.tabId,
+ messageId: this.props.messageId,
+ filePath: this.props.originalFilePath,
+ deleted: this.props.deleted,
+ fileDetails: this.props.details,
+ });
+ }
+ },
+ mouseover: (e) => {
+ cancelEvent(e);
+ const textContentSpan: HTMLSpanElement | null = this.render.querySelector(
+ '.mynah-chat-item-tree-view-file-item-title-text',
+ );
+ let tooltipText;
+ if (textContentSpan != null && textContentSpan.offsetWidth < textContentSpan.scrollWidth) {
+ tooltipText = parseMarkdown(this.props.fileName, { includeLineBreaks: true });
+ }
+ if (this.props.details?.description != null) {
+ if (tooltipText != null) {
+ tooltipText += '\n\n';
+ } else {
+ tooltipText = '';
+ }
+ tooltipText += parseMarkdown(this.props.details?.description ?? '', {
+ includeLineBreaks: true,
+ });
+ }
+ if (tooltipText != null) {
+ this.showTooltip(
+ tooltipText,
+ undefined,
+ OverlayHorizontalDirection.START_TO_RIGHT,
+ textContentSpan,
+ );
+ }
+ },
+ mouseleave: this.hideTooltip,
+ },
+ children: [
+ ...(this.props.icon != null && this.props.details?.icon === undefined
+ ? [
+ {
+ type: 'span',
+ classNames: ['mynah-chat-single-file-icon'],
+ children: [new Icon({ icon: this.props.icon }).render],
+ },
+ ]
+ : []),
+ {
+ type: 'div',
+ classNames: [
+ 'mynah-chat-item-tree-view-file-item-title',
+ this.props.deleted === true ? 'mynah-chat-item-tree-view-file-item-deleted' : '',
+ ],
+ children: [
+ ...(this.props.details?.icon !== null
+ ? [
+ new Icon({
+ icon: this.props.details?.icon ?? MynahIcons.FILE,
+ status: this.props.details?.iconForegroundStatus,
+ }).render,
+ ]
+ : []),
+ {
+ type: 'span',
+ classNames: ['mynah-chat-item-tree-view-file-item-title-text'],
+ children: [this.props.details?.visibleName ?? this.props.fileName],
+ },
+ ],
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-chat-item-tree-view-file-item-details'],
+ children:
+ this.props.details != null
+ ? [
+ ...(this.props.details.changes != null
+ ? [
+ {
+ type: 'span',
+ classNames: ['mynah-chat-item-tree-view-file-item-details-changes'],
+ children: [
+ ...(this.props.details.changes.added != null
+ ? [
+ {
+ type: 'span',
+ classNames: ['changes-added'],
+ children: [`+${this.props.details.changes.added}`],
+ },
+ ]
+ : []),
+ ...(this.props.details.changes.deleted != null
+ ? [
+ {
+ type: 'span',
+ classNames: ['changes-deleted'],
+ children: [`-${this.props.details.changes.deleted}`],
+ },
+ ]
+ : []),
+ ...(this.props.details.changes.total != null
+ ? [
+ {
+ type: 'span',
+ classNames: ['changes-total'],
+ children: [`${this.props.details.changes.total}`],
+ },
+ ]
+ : []),
+ ],
+ },
+ ]
+ : []),
+ ...(this.props.details?.labelIcon != null
+ ? [
+ new Icon({
+ icon: this.props.details?.labelIcon,
+ status: this.props.details?.labelIconForegroundStatus,
+ }).render,
+ ]
+ : []),
+ ...(this.props.details.label != null
+ ? [
+ {
+ type: 'span',
+ classNames: ['mynah-chat-item-tree-view-file-item-details-text'],
+ children: [this.props.details.label],
+ },
+ ]
+ : []),
+ ]
+ : [],
+ },
+ ...(this.props.actions !== undefined
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-chat-item-tree-view-file-item-actions'],
+ children: this.props.actions.map(
+ (action: FileNodeAction) =>
+ new Button({
+ testId: testIds.chatItem.fileTree.fileAction,
+ icon: new Icon({ icon: action.icon }).render,
+ ...(action.label !== undefined ? { label: action.label } : {}),
+ attributes: {
+ title: action.description ?? '',
+ },
+ classNames: ['mynah-icon-button', action.status ?? ''],
+ primary: false,
+ onClick: (e) => {
+ cancelEvent(e);
+ this.hideTooltip();
+ MynahUIGlobalEvents.getInstance().dispatch(
+ MynahEventNames.FILE_ACTION_CLICK,
+ {
+ tabId: this.props.tabId,
+ messageId: this.props.messageId,
+ filePath: this.props.originalFilePath,
+ actionName: action.name,
+ },
+ );
+ },
+ }).render,
+ ),
+ },
+ ]
+ : []),
+ ],
+ });
+ }
+
+ private readonly showTooltip = (
+ content: string,
+ vDir?: OverlayVerticalDirection,
+ hDir?: OverlayHorizontalDirection,
+ elm?: null | HTMLElement | ExtendedHTMLElement,
+ ): void => {
+ if (content.trim() !== '') {
+ clearTimeout(this.fileTooltipTimeout);
+ this.fileTooltipTimeout = setTimeout(() => {
+ clearTimeout(this.fileTooltipTimeout);
+ this.fileTooltip = new Overlay({
+ testId: testIds.chatItem.fileTree.fileTooltipWrapper,
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm ?? this.render,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: vDir ?? OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: hDir ?? OverlayHorizontalDirection.CENTER,
+ children: [
+ new Card({
+ border: false,
+ children: [
+ new CardBody({
+ body: content,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ }, PREVIEW_DELAY);
+ }
+ };
+
+ public readonly hideTooltip = (): void => {
+ if (this.fileTooltipTimeout != null) {
+ clearTimeout(this.fileTooltipTimeout);
+ }
+ this.fileTooltip?.close();
+ this.fileTooltip = null;
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-tree-view-license.ts b/mynah-ui/src/components/chat-item/chat-item-tree-view-license.ts
new file mode 100644
index 0000000000..55b76837ff
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-tree-view-license.ts
@@ -0,0 +1,52 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import testIds from '../../helper/test-ids';
+import { ReferenceTrackerInformation } from '../../static';
+import { CardBody } from '../card/card-body';
+import { CollapsibleContent } from '../collapsible-content';
+
+export interface ChatItemTreeViewLicenseProps {
+ referenceSuggestionLabel: string;
+ references: ReferenceTrackerInformation[];
+}
+
+export class ChatItemTreeViewLicense {
+ render: ExtendedHTMLElement;
+
+ constructor(props: ChatItemTreeViewLicenseProps) {
+ // If no references are found then just return an empty div
+ if (props.references.length === 0) {
+ this.render = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['empty'],
+ });
+ return;
+ }
+
+ this.render = new CollapsibleContent({
+ title: Config.getInstance().config.texts.codeSuggestionWithReferenceTitle,
+ testId: testIds.chatItem.fileTree.license,
+ classNames: ['mynah-chat-item-tree-view-license'],
+ children: [this.buildDropdownChildren(props.references)],
+ }).render;
+ }
+
+ private readonly buildDropdownChildren = (references: ReferenceTrackerInformation[]): ExtendedHTMLElement =>
+ DomBuilder.getInstance().build({
+ type: 'ul',
+ classNames: ['mynah-chat-item-tree-view-license-container'],
+ children: references.map((ref) => ({
+ type: 'li',
+ children: [
+ new CardBody({
+ body: ref.information,
+ }).render,
+ ],
+ })),
+ });
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-tree-view-wrapper.ts b/mynah-ui/src/components/chat-item/chat-item-tree-view-wrapper.ts
new file mode 100644
index 0000000000..6eba75a5e6
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-tree-view-wrapper.ts
@@ -0,0 +1,126 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import testIds from '../../helper/test-ids';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { fileListToTree } from '../../helper/file-tree';
+import { FileNodeAction, ReferenceTrackerInformation, Status, TreeNodeDetails } from '../../static';
+import { MynahIcons, MynahIconsType } from '../icon';
+import { ChatItemTreeFile } from './chat-item-tree-file';
+import { ChatItemTreeView } from './chat-item-tree-view';
+import { ChatItemTreeViewLicense } from './chat-item-tree-view-license';
+
+export interface ChatItemTreeViewWrapperProps {
+ tabId: string;
+ messageId: string;
+ files: string[];
+ cardTitle?: string;
+ classNames?: string[];
+ rootTitle?: string;
+ rootLabel?: string;
+ rootStatusIcon?: MynahIcons | MynahIconsType;
+ rootIconForegroundStatus?: Status;
+ deletedFiles: string[];
+ flatList?: boolean;
+ folderIcon?: MynahIcons | MynahIconsType | null;
+ actions?: Record;
+ details?: Record;
+ hideFileCount?: boolean;
+ collapsed?: boolean;
+ referenceSuggestionLabel: string;
+ references: ReferenceTrackerInformation[];
+ onRootCollapsedStateChange: (isCollapsed: boolean) => void;
+}
+
+export class ChatItemTreeViewWrapper {
+ render: ExtendedHTMLElement;
+
+ constructor(props: ChatItemTreeViewWrapperProps) {
+ const license = new ChatItemTreeViewLicense({
+ referenceSuggestionLabel: props.referenceSuggestionLabel,
+ references: props.references,
+ }).render;
+
+ const tree =
+ props.files.length === 1 && props.rootTitle == null
+ ? new ChatItemTreeFile({
+ filePath: props.files[0],
+ fileName: props.files[0],
+ originalFilePath: props.files[0],
+ tabId: props.tabId,
+ messageId: props.messageId,
+ deleted: props.deletedFiles.includes(props.files[0]),
+ details: props.details != null ? props.details[props.files[0]] : undefined,
+ actions: props.actions != null ? props.actions[props.files[0]] : undefined,
+ icon: MynahIcons.PAPER_CLIP,
+ }).render
+ : new ChatItemTreeView({
+ messageId: props.messageId,
+ folderIcon: props.folderIcon,
+ tabId: props.tabId,
+ node: fileListToTree(
+ props.files,
+ props.deletedFiles,
+ props.actions,
+ props.details,
+ props.rootTitle,
+ props.rootStatusIcon,
+ props.rootIconForegroundStatus,
+ props.rootLabel,
+ ),
+ hideFileCount: props.hideFileCount,
+ collapsed: props.collapsed,
+ onRootCollapsedStateChange: props.onRootCollapsedStateChange,
+ }).render;
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.fileTree.wrapper,
+ classNames: [
+ 'mynah-chat-item-tree-view-wrapper',
+ props.flatList === true ? 'mynah-chat-item-tree-view-flat-list' : '',
+ ...(props.classNames ?? []),
+ ],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-chat-item-tree-view-wrapper-container'],
+ children: [
+ ...(props.cardTitle !== ''
+ ? [
+ {
+ type: 'div',
+ testId: testIds.chatItem.fileTree.title,
+ classNames: ['mynah-chat-item-tree-view-wrapper-title'],
+ children: [
+ {
+ type: 'h4',
+ children: [
+ `${props.cardTitle ?? Config.getInstance().config.texts.codeSuggestions}`,
+ ],
+ },
+ ...(props.hideFileCount !== true
+ ? [
+ {
+ type: 'span',
+ children: [
+ `${(props.files?.length ?? 0) + (props.deletedFiles?.length ?? 0)} ${Config.getInstance().config.texts.files}`,
+ ],
+ },
+ ]
+ : []),
+ ],
+ },
+ ]
+ : []),
+ license,
+ tree,
+ ],
+ },
+ ],
+ });
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/chat-item-tree-view.ts b/mynah-ui/src/components/chat-item/chat-item-tree-view.ts
new file mode 100644
index 0000000000..3f9b5a4160
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-item-tree-view.ts
@@ -0,0 +1,163 @@
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import { TreeNode } from '../../helper/file-tree';
+import testIds from '../../helper/test-ids';
+import { Button } from '../button';
+import { Icon, MynahIcons, MynahIconsType } from '../icon';
+import { ChatItemTreeFile } from './chat-item-tree-file';
+
+export interface ChatItemTreeViewProps {
+ node: TreeNode;
+ depth?: number;
+ tabId: string;
+ messageId: string;
+ hideFileCount?: boolean;
+ collapsed?: boolean;
+ folderIcon?: MynahIcons | MynahIconsType | null;
+ onRootCollapsedStateChange?: (isCollapsed: boolean) => void;
+}
+
+export class ChatItemTreeView {
+ private readonly props: ChatItemTreeViewProps;
+ private readonly node: TreeNode;
+ private readonly folderIcon: MynahIcons | MynahIconsType | null;
+ private isOpen: boolean;
+ private readonly depth: number;
+ private readonly tabId: string;
+ private readonly messageId: string;
+ private readonly hideFileCount: boolean;
+ render: ExtendedHTMLElement;
+
+ constructor(props: ChatItemTreeViewProps) {
+ this.props = props;
+ this.node = props.node;
+ this.folderIcon = props.folderIcon === null ? null : (props.folderIcon ?? MynahIcons.FOLDER);
+ this.tabId = props.tabId;
+ this.messageId = props.messageId;
+ this.hideFileCount = props.hideFileCount ?? false;
+ this.isOpen = !(props.collapsed ?? false);
+ this.depth = props.depth ?? 0;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: this.getClassNames(),
+ children: [...(this.node.type === 'folder' ? this.buildFolderNode() : this.buildFileNode())],
+ });
+ }
+
+ getClassNames(): string[] {
+ return [
+ 'mynah-chat-item-tree-view',
+ this.node.type === 'file'
+ ? 'mynah-chat-tree-view-file'
+ : `mynah-chat-tree-view-folder-${this.isOpen ? 'open' : 'closed'}`,
+ ];
+ }
+
+ updateTree(): void {
+ this.render.update({
+ classNames: this.getClassNames(),
+ children: [...(this.node.type === 'folder' ? this.buildFolderNode() : this.buildFileNode())],
+ });
+ }
+
+ buildFolderChildren(): ExtendedHTMLElement[] {
+ if (this.node.type !== 'folder') return [];
+
+ const folderChildren = this.isOpen
+ ? this.node.children.map((childNode) =>
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-folder-child'],
+ children: [
+ new ChatItemTreeView({
+ folderIcon: this.folderIcon,
+ node: childNode,
+ depth: this.depth + 1,
+ tabId: this.tabId,
+ hideFileCount: this.hideFileCount,
+ messageId: this.messageId,
+ }).render,
+ ],
+ }),
+ )
+ : [];
+ return folderChildren;
+ }
+
+ buildFolderNode(): ExtendedHTMLElement[] {
+ if (this.node.type !== 'folder') return [];
+ const folderItem = new Button({
+ testId: testIds.chatItem.fileTree.folder,
+ icon: new Icon({ icon: this.isOpen ? MynahIcons.DOWN_OPEN : MynahIcons.RIGHT_OPEN }).render,
+ classNames: ['mynah-chat-item-tree-view-button', this.depth === 0 ? 'mynah-chat-item-tree-view-root' : ''],
+ label: DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-item-tree-view-button-title'],
+ children: [
+ ...(this.folderIcon !== null ? [new Icon({ icon: this.folderIcon }).render] : []),
+ {
+ type: 'span',
+ children: [this.node.name],
+ },
+ ...(this.node.details != null
+ ? [
+ ...(this.node.details.icon != null
+ ? [
+ new Icon({
+ icon: this.node.details?.icon,
+ status: this.node.details?.iconForegroundStatus,
+ }).render,
+ ]
+ : []),
+ ...(this.node.details.label != null
+ ? [
+ {
+ type: 'span',
+ classNames: ['mynah-chat-item-tree-view-button-weak-title'],
+ children: [this.node.details.label],
+ },
+ ]
+ : []),
+ ]
+ : []),
+ ...(this.hideFileCount
+ ? []
+ : [
+ {
+ type: 'span',
+ classNames: ['mynah-chat-item-tree-view-button-weak-title'],
+ children: [`${this.node.children.length} ${Config.getInstance().config.texts.files}`],
+ },
+ ]),
+ ],
+ }),
+ primary: false,
+ onClick: (e) => {
+ cancelEvent(e);
+ this.isOpen = !this.isOpen;
+ this.props.onRootCollapsedStateChange?.(!this.isOpen);
+ this.updateTree();
+ },
+ }).render;
+ const childrenItems = this.buildFolderChildren();
+ return [folderItem, ...childrenItems];
+ }
+
+ buildFileNode(): ExtendedHTMLElement[] {
+ if (this.node.type !== 'file') return [];
+
+ const fileItem = new ChatItemTreeFile({
+ fileName: this.node.name,
+ filePath: this.node.filePath,
+ originalFilePath: this.node.originalFilePath,
+ tabId: this.tabId,
+ messageId: this.messageId,
+ details: this.node.details,
+ deleted: this.node.deleted,
+ actions: this.node.actions,
+ }).render;
+
+ return [fileItem];
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/chat-prompt-input-command.ts b/mynah-ui/src/components/chat-item/chat-prompt-input-command.ts
new file mode 100644
index 0000000000..d1d0f9de9b
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-prompt-input-command.ts
@@ -0,0 +1,42 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import testIds from '../../helper/test-ids';
+
+export interface ChatPromptInputCommandProps {
+ command: string;
+ onRemoveClick: () => void;
+}
+export class ChatPromptInputCommand {
+ render: ExtendedHTMLElement;
+ private readonly props: ChatPromptInputCommandProps;
+ private readonly promptTextInputCommand: ExtendedHTMLElement;
+ constructor(props: ChatPromptInputCommandProps) {
+ this.props = props;
+ this.promptTextInputCommand = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['mynah-chat-prompt-input-command-text'],
+ events: {
+ click: this.props.onRemoveClick,
+ },
+ });
+ this.render = DomBuilder.getInstance().build({
+ type: 'span',
+ testId: testIds.prompt.selectedCommand,
+ classNames: ['mynah-chat-prompt-input-command-wrapper', this.props.command === '' ? 'hidden' : ''],
+ children: [this.promptTextInputCommand],
+ });
+ }
+
+ setCommand = (command: string): void => {
+ if (command.trim() === '') {
+ this.render.addClass('hidden');
+ } else {
+ this.render.removeClass('hidden');
+ }
+ this.promptTextInputCommand.innerText = command;
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-prompt-input-info.ts b/mynah-ui/src/components/chat-item/chat-prompt-input-info.ts
new file mode 100644
index 0000000000..d6c9714241
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-prompt-input-info.ts
@@ -0,0 +1,62 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { MynahUITabsStore } from '../../helper/tabs-store';
+import { CardBody } from '../card/card-body';
+import { MynahUIGlobalEvents } from '../../helper/events';
+import { MynahEventNames } from '../../static';
+import testIds from '../../helper/test-ids';
+
+export interface ChatPromptInputInfoProps {
+ tabId: string;
+}
+export class ChatPromptInputInfo {
+ render: ExtendedHTMLElement;
+ constructor(props: ChatPromptInputInfoProps) {
+ MynahUITabsStore.getInstance().addListenerToDataStore(props.tabId, 'promptInputInfo', (newInfo: string) => {
+ if (newInfo != null && newInfo.trim() !== '') {
+ this.render.update({
+ children: [
+ new CardBody({
+ testId: testIds.prompt.footerInfoBody,
+ onLinkClick: this.linkClick,
+ body: newInfo ?? '',
+ }).render,
+ ],
+ });
+ } else {
+ this.render.clear();
+ }
+ });
+
+ const footerInfo = MynahUITabsStore.getInstance().getTabDataStore(props.tabId)?.getValue('promptInputInfo');
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.footerInfo,
+ classNames: ['mynah-chat-prompt-input-info'],
+ children:
+ footerInfo != null && footerInfo.trim() !== ''
+ ? [
+ new CardBody({
+ testId: testIds.prompt.footerInfoBody,
+ onLinkClick: this.linkClick,
+ body:
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(props.tabId)
+ ?.getValue('promptInputInfo') ?? '',
+ }).render,
+ ]
+ : [],
+ });
+ }
+
+ private readonly linkClick = (url: string, e: MouseEvent): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.INFO_LINK_CLICK, {
+ link: url,
+ event: e,
+ });
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-prompt-input-sticky-card.ts b/mynah-ui/src/components/chat-item/chat-prompt-input-sticky-card.ts
new file mode 100644
index 0000000000..91b3342e3b
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-prompt-input-sticky-card.ts
@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { MynahUITabsStore } from '../../helper/tabs-store';
+import testIds from '../../helper/test-ids';
+import { ChatItemType } from '../../static';
+import { ChatItemCard } from './chat-item-card';
+
+export interface ChatPromptInputStickyCardProps {
+ tabId: string;
+}
+export class ChatPromptInputStickyCard {
+ render: ExtendedHTMLElement;
+ constructor(props: ChatPromptInputStickyCardProps) {
+ MynahUITabsStore.getInstance().addListenerToDataStore(props.tabId, 'promptInputStickyCard', (newChatItem) => {
+ if (newChatItem === null) {
+ this.render.clear();
+ } else {
+ this.render.update({
+ children: [
+ new ChatItemCard({
+ inline: true,
+ small: true,
+ chatItem: {
+ ...newChatItem,
+ messageId: newChatItem.messageId ?? 'sticky-card',
+ type: ChatItemType.ANSWER,
+ },
+ tabId: props.tabId,
+ }).render,
+ ],
+ });
+ }
+ });
+
+ const initChatItemForStickyCard = MynahUITabsStore.getInstance()
+ .getTabDataStore(props.tabId)
+ ?.getValue('promptInputStickyCard');
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.stickyCard,
+ classNames: ['mynah-chat-prompt-input-sticky-card'],
+ children:
+ initChatItemForStickyCard !== null
+ ? [
+ new ChatItemCard({
+ inline: true,
+ small: true,
+ chatItem: {
+ ...initChatItemForStickyCard,
+ messageId: initChatItemForStickyCard.messageId ?? 'sticky-card',
+ type: ChatItemType.ANSWER,
+ },
+ tabId: props.tabId,
+ }).render,
+ ]
+ : [],
+ });
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/chat-prompt-input.ts b/mynah-ui/src/components/chat-item/chat-prompt-input.ts
new file mode 100644
index 0000000000..3550446cb1
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-prompt-input.ts
@@ -0,0 +1,1112 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import {
+ ChatItemButton,
+ ChatPrompt,
+ DetailedList,
+ FilterOption,
+ KeyMap,
+ MynahEventNames,
+ PromptAttachmentType,
+ QuickActionCommand,
+ QuickActionCommandGroup,
+ QuickActionCommandsHeader,
+} from '../../static';
+import { TitleDescriptionWithIcon } from '../title-description-with-icon';
+import { MynahUIGlobalEvents, cancelEvent } from '../../helper/events';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+import { MynahUITabsStore } from '../../helper/tabs-store';
+import escapeHTML from 'escape-html';
+import { escapeHtml } from '../../helper/sanitize';
+import { ChatPromptInputCommand } from './chat-prompt-input-command';
+import { PromptAttachment } from './prompt-input/prompt-attachment';
+import { PromptInputSendButton } from './prompt-input/prompt-input-send-button';
+import { PromptTextInput } from './prompt-input/prompt-text-input';
+import { Config } from '../../helper/config';
+import testIds from '../../helper/test-ids';
+import { PromptInputProgress } from './prompt-input/prompt-progress';
+import { CardBody } from '../card/card-body';
+import {
+ convertDetailedListItemToQuickActionCommand,
+ convertQuickActionCommandGroupsToDetailedListGroups,
+ filterQuickPickItems,
+ MARK_CLOSE,
+ MARK_OPEN,
+} from '../../helper/quick-pick-data-handler';
+import { DetailedListWrapper } from '../detailed-list/detailed-list';
+import { PromptOptions } from './prompt-input/prompt-options';
+import { PromptInputStopButton } from './prompt-input/prompt-input-stop-button';
+import { PromptTopBar } from './prompt-input/prompt-top-bar/prompt-top-bar';
+import { TopBarButtonOverlayProps } from './prompt-input/prompt-top-bar/top-bar-button';
+import { Button } from '../button';
+import { Icon, MynahIcons } from '../icon';
+
+// 96 extra is added as a threshold to allow for attachments
+// We ignore this for the textual character limit
+export const MAX_USER_INPUT_THRESHOLD = 96;
+export const MAX_USER_INPUT = (): number => {
+ return Config.getInstance().config.maxUserInput - MAX_USER_INPUT_THRESHOLD;
+};
+
+// The amount of characters in the prompt input necessary for the warning to show
+export const INPUT_LENGTH_WARNING_THRESHOLD = (): number => {
+ return Config.getInstance().config.userInputLengthWarningThreshold;
+};
+
+export interface ChatPromptInputProps {
+ tabId: string;
+ onStopChatResponse?: (tabId: string) => void;
+}
+
+interface UserPrompt {
+ inputText: string;
+ codeAttachment: string;
+}
+
+export class ChatPromptInput {
+ render: ExtendedHTMLElement;
+ private readonly props: ChatPromptInputProps;
+ private readonly attachmentWrapper: ExtendedHTMLElement;
+ private readonly promptTextInput: PromptTextInput;
+ private readonly contextSelectorButton: Button;
+ private readonly promptTextInputCommand: ChatPromptInputCommand;
+ private readonly sendButton: PromptInputSendButton;
+ private readonly stopButton: PromptInputStopButton;
+ private readonly progressIndicator: PromptInputProgress;
+ private readonly promptAttachment: PromptAttachment;
+ private readonly promptOptions: PromptOptions;
+ private readonly promptTopBar: PromptTopBar;
+ private readonly chatPrompt: ExtendedHTMLElement;
+ private quickPickItemsSelectorContainer: DetailedListWrapper | null;
+ private promptTextInputLabel: ExtendedHTMLElement;
+ private remainingCharsOverlay: Overlay | null;
+ /**
+ * Preserves cursor position when `@` key is pressed
+ */
+ private quickPickTriggerIndex: number;
+ /**
+ * Preserves selection range when `@` key is pressed
+ */
+ private quickPickTriggerRange?: Range;
+ private quickPickType: 'quick-action' | 'context';
+ private quickPickItemGroups: QuickActionCommandGroup[];
+ private topBarTitleClicked: boolean = false;
+ private filteredQuickPickItemGroups: QuickActionCommandGroup[];
+ private searchTerm: string = '';
+ private quickPick: Overlay;
+ private quickPickOpen: boolean = false;
+ private selectedCommand: string = '';
+ private readonly userPromptHistory: UserPrompt[] = [];
+ private userPromptHistoryIndex: number = -1;
+ private lastUnsentUserPrompt: UserPrompt;
+ private readonly markerRemovalRegex = new RegExp(`${MARK_OPEN}|${MARK_CLOSE}`, 'g');
+ constructor(props: ChatPromptInputProps) {
+ this.props = props;
+ this.promptTextInputCommand = new ChatPromptInputCommand({
+ command: '',
+ onRemoveClick: () => {
+ this.selectedCommand = '';
+ this.promptTextInputCommand.setCommand('');
+ },
+ });
+
+ this.promptTextInput = new PromptTextInput({
+ initMaxLength: MAX_USER_INPUT(),
+ tabId: this.props.tabId,
+ children: [this.promptTextInputCommand.render],
+ onKeydown: this.handleInputKeydown,
+ onInput: () => this.updateAvailableCharactersIndicator(),
+ onFocus: () => {
+ this.render.addClass('input-has-focus');
+ this.handleInputFocus();
+ },
+ onBlur: () => {
+ if (this.render.hasClass('awaits-confirmation')) {
+ this.promptTextInputCommand.setCommand('');
+ this.selectedCommand = '';
+ this.promptTextInput.updateTextInputPlaceholder(
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptInputPlaceholder'),
+ );
+ this.promptTextInput.updateTextInputMaxLength(Config.getInstance().config.maxUserInput);
+ if (Config.getInstance().config.autoFocus) {
+ this.promptTextInput.focus();
+ }
+ this.render.removeClass('awaits-confirmation');
+ }
+ this.render.removeClass('input-has-focus');
+ this.remainingCharsOverlay?.close();
+ },
+ });
+ const initText = MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('promptInputText');
+ if (initText != null && initText.trim() !== '') {
+ this.promptTextInput.updateTextInputValue(initText);
+ }
+ this.sendButton = new PromptInputSendButton({
+ tabId: this.props.tabId,
+ onClick: () => {
+ this.sendPrompt();
+ },
+ });
+ this.stopButton = new PromptInputStopButton({
+ tabId: this.props.tabId,
+ onClick: () => {
+ if (this.props.onStopChatResponse != null) {
+ this.props.onStopChatResponse(this.props.tabId);
+ }
+ },
+ });
+ this.progressIndicator = new PromptInputProgress({
+ tabId: this.props.tabId,
+ });
+
+ this.promptAttachment = new PromptAttachment({
+ tabId: this.props.tabId,
+ });
+
+ this.promptOptions = new PromptOptions({
+ filterOptions: MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptInputOptions'),
+ buttons: MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('promptInputButtons'),
+ onFiltersChange: (formData) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.PROMPT_INPUT_OPTIONS_CHANGE, {
+ tabId: this.props.tabId,
+ optionsValues: formData,
+ });
+ },
+ onButtonClick: (buttonId) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.PROMPT_INPUT_BUTTON_CLICK, {
+ tabId: this.props.tabId,
+ buttonId,
+ });
+ },
+ });
+
+ this.promptTopBar = new PromptTopBar({
+ tabId: this.props.tabId,
+ title: MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('promptTopBarTitle'),
+ topBarButton: MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptTopBarButton'),
+ contextItems: MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptTopBarContextItems'),
+ onTopBarTitleClick: () => {
+ this.onContextSelectorButtonClick(true);
+ },
+ onContextItemAdd: (contextItem: QuickActionCommand) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.TOP_BAR_ITEM_ADD, {
+ tabId: this.props.tabId,
+ contextItem,
+ });
+ },
+ onContextItemRemove: (contextItem: QuickActionCommand) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.TOP_BAR_ITEM_REMOVE, {
+ tabId: this.props.tabId,
+ contextItem,
+ });
+ },
+ onTopBarButtonClick: (button: ChatItemButton) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.TOP_BAR_BUTTON_CLICK, {
+ tabId: this.props.tabId,
+ button,
+ });
+ },
+ });
+
+ this.attachmentWrapper = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.attachmentWrapper,
+ classNames: ['mynah-chat-prompt-attachment-wrapper'],
+ children: [this.promptAttachment.render],
+ });
+
+ const noContextCommands =
+ (
+ (MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('contextCommands') as QuickActionCommandGroup[]) ?? []
+ ).length === 0;
+
+ this.contextSelectorButton = new Button({
+ icon: new Icon({ icon: MynahIcons.AT }).render,
+ status: 'clear',
+ disabled: noContextCommands,
+ classNames: noContextCommands || !this.promptTopBar.isHidden() ? ['hidden'] : [],
+ primary: false,
+ onClick: () => {
+ this.onContextSelectorButtonClick();
+ },
+ });
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'contextCommands',
+ (contextCommands) => {
+ if (contextCommands?.length > 0 && this.promptTopBar.isHidden()) {
+ this.contextSelectorButton.setEnabled(true);
+ this.contextSelectorButton.render.removeClass('hidden');
+ } else {
+ this.contextSelectorButton.setEnabled(false);
+ this.contextSelectorButton.render.addClass('hidden');
+ }
+ },
+ );
+ this.chatPrompt = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-prompt'],
+ children: [
+ this.progressIndicator.render,
+ this.chatPrompt,
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-input-wrapper'],
+ children: [
+ this.promptTopBar.render,
+ this.promptTextInput.render,
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-button-wrapper'],
+ children: [
+ this.promptOptions.render,
+ this.contextSelectorButton.render,
+ this.stopButton.render,
+ this.sendButton.render,
+ ],
+ },
+ ],
+ },
+ this.attachmentWrapper,
+ ],
+ });
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptInputText',
+ (promptInputText: string) => {
+ if (this.promptTextInput.getTextInputValue() !== promptInputText) {
+ this.promptTextInput.clear();
+ this.promptTextInput.updateTextInputValue(promptInputText);
+ setTimeout(() => {
+ this.promptTextInput.focus();
+ }, 750);
+ }
+ },
+ );
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptInputOptions',
+ (newFilterOptions: FilterOption[]) => {
+ this.promptOptions.update(newFilterOptions);
+ },
+ );
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptInputButtons',
+ (newButtons: ChatItemButton[]) => {
+ this.promptOptions.update(undefined, newButtons);
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptTopBarContextItems',
+ (newCommands: QuickActionCommand[]) => {
+ this.promptTopBar.update({ contextItems: newCommands });
+ },
+ );
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptTopBarTitle',
+ (newTitle: string) => {
+ this.promptTopBar.update({ title: newTitle });
+
+ if (!this.promptTopBar.isHidden()) {
+ this.contextSelectorButton.setEnabled(false);
+ this.contextSelectorButton.render.addClass('hidden');
+ }
+ },
+ );
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptTopBarButton',
+ (newButton: ChatItemButton) => {
+ this.promptTopBar.update({ topBarButton: newButton });
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptInputLabel',
+ (promptInputLabel: string) => {
+ const newDetails = this.getPromptInputTextLabel(promptInputLabel);
+ if (this.promptTextInputLabel != null) {
+ this.promptTextInputLabel.replaceWith(newDetails);
+ } else {
+ this.promptTextInputLabel = newDetails;
+ }
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'promptInputVisible',
+ (promptInputVisible?: boolean) => {
+ if (promptInputVisible === false) {
+ this.render.addClass('hidden');
+ } else {
+ this.render.removeClass('hidden');
+ }
+ },
+ );
+
+ this.promptTextInputLabel = this.getPromptInputTextLabel(
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('promptInputLabel'),
+ );
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.wrapper,
+ classNames: [
+ 'mynah-chat-prompt-wrapper',
+ MynahUITabsStore.getInstance().getTabDataStore(props.tabId).getValue('promptInputVisible') === false
+ ? 'hidden'
+ : '',
+ ],
+ children: [this.promptTextInputLabel, this.chatPrompt],
+ });
+
+ MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.ADD_ATTACHMENT,
+ (data: { textToAdd?: string; tabId?: string; type?: PromptAttachmentType }) => {
+ if (this.props.tabId === data.tabId) {
+ // Code snippet will have a limit of MAX_USER_INPUT - MAX_USER_INPUT_THRESHOLD - current prompt text length
+ // If exceeding that, we will crop it
+ const textInputLength = this.promptTextInput.getTextInputValue().trim().length;
+ const currentSelectedCodeMaxLength = MAX_USER_INPUT() - textInputLength;
+ const croppedAttachmentContent = (data.textToAdd ?? '')?.slice(0, currentSelectedCodeMaxLength);
+ this.promptAttachment.updateAttachment(croppedAttachmentContent, data.type);
+ // Also update the limit on prompt text given the selected code
+ this.promptTextInput.updateTextInputMaxLength(
+ Math.max(MAX_USER_INPUT_THRESHOLD, MAX_USER_INPUT() - croppedAttachmentContent.length),
+ );
+ this.updateAvailableCharactersIndicator();
+
+ // When code is attached, focus to the input with a delay
+ // Delay is necessary for the render updates
+ setTimeout(() => {
+ this.promptTextInput.focus();
+ }, 100);
+ }
+ },
+ );
+
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.REMOVE_ATTACHMENT, () => {
+ this.promptTextInput.updateTextInputMaxLength(MAX_USER_INPUT());
+ this.promptAttachment.clear();
+ // Update the limit on prompt text given the selected code
+ this.updateAvailableCharactersIndicator();
+ });
+
+ MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.RESET_TOP_BAR_CLICKED,
+ (data: { tabId: string }) => {
+ if (this.props.tabId === data.tabId) {
+ // Reset trigger source to prompt-input after context is inserted
+ this.topBarTitleClicked = false;
+ }
+ },
+ );
+ }
+
+ private readonly onContextSelectorButtonClick = (topBarTitleClicked?: boolean): void => {
+ this.searchTerm = '';
+ this.quickPickType = 'context';
+ this.quickPickItemGroups =
+ (MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('contextCommands') as QuickActionCommandGroup[]) ?? [];
+ this.quickPickTriggerIndex = this.promptTextInput.getCursorPos();
+ this.quickPickTriggerRange = window.getSelection()?.getRangeAt(0);
+ this.filteredQuickPickItemGroups = [...this.quickPickItemGroups];
+ if (topBarTitleClicked !== true) {
+ this.promptTextInput.insertEndSpace();
+ }
+ this.openQuickPick(topBarTitleClicked);
+ };
+
+ private readonly updateAvailableCharactersIndicator = (): void => {
+ const characterAmount =
+ MAX_USER_INPUT() -
+ Math.max(
+ 0,
+ this.promptTextInput.promptTextInputMaxLength - this.promptTextInput.getTextInputValue().trim().length,
+ );
+ const charTextElm = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['mynah-chat-prompt-chars-indicator'],
+ innerHTML: `${characterAmount}/${MAX_USER_INPUT()}`,
+ });
+
+ // Re(render) if the overlay is not in the DOM, else update
+ if (this.remainingCharsOverlay == null || this.remainingCharsOverlay.render.parentNode == null) {
+ this.remainingCharsOverlay = new Overlay({
+ testId: testIds.prompt.remainingCharsIndicator,
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: this.chatPrompt,
+ dimOutside: false,
+ verticalDirection: OverlayVerticalDirection.TO_BOTTOM,
+ horizontalDirection: OverlayHorizontalDirection.END_TO_LEFT,
+ children: [charTextElm],
+ });
+ } else {
+ this.remainingCharsOverlay.updateContent([charTextElm]);
+ }
+
+ // Set the visibility based on whether the threshold is hit
+ if (characterAmount >= INPUT_LENGTH_WARNING_THRESHOLD()) {
+ this.remainingCharsOverlay.toggleHidden(false);
+ } else {
+ this.remainingCharsOverlay.toggleHidden(true);
+ }
+ };
+
+ private readonly handleInputKeydown = (e: KeyboardEvent): void => {
+ const navigationalKeys = [KeyMap.ARROW_UP, KeyMap.ARROW_DOWN] as string[];
+
+ if (e.key === KeyMap.ESCAPE && this.render.hasClass('awaits-confirmation')) {
+ this.promptTextInput.blur();
+ }
+ if (!this.quickPickOpen) {
+ if (e.key === KeyMap.BACKSPACE || e.key === KeyMap.DELETE) {
+ if (this.selectedCommand !== '' && this.promptTextInput.getTextInputValue() === '') {
+ cancelEvent(e);
+ this.clearTextArea(true);
+ }
+ } else if (
+ e.key === KeyMap.ENTER &&
+ ((!e.isComposing && !e.shiftKey && !e.ctrlKey) || (e.isComposing && e.shiftKey))
+ ) {
+ cancelEvent(e);
+ this.sendPrompt();
+ } else if (
+ (this.selectedCommand === '' &&
+ e.key === KeyMap.SLASH &&
+ this.promptTextInput.getTextInputValue() === '') ||
+ (e.key === KeyMap.AT && this.promptTextInput.promptTextInputMaxLength > 0)
+ ) {
+ const quickPickContextItems =
+ (MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('contextCommands') as QuickActionCommandGroup[]) ?? [];
+ const quickPickCommandItems =
+ (MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('quickActionCommands') as QuickActionCommandGroup[]) ?? [];
+ this.searchTerm = '';
+ this.quickPickType = e.key === KeyMap.AT ? 'context' : 'quick-action';
+ this.quickPickItemGroups =
+ this.quickPickType === 'context' ? quickPickContextItems : quickPickCommandItems;
+ this.quickPickTriggerRange = window.getSelection()?.getRangeAt(0);
+ this.quickPickTriggerIndex = this.quickPickType === 'context' ? this.promptTextInput.getCursorPos() : 1;
+ this.filteredQuickPickItemGroups = [...this.quickPickItemGroups];
+ this.openQuickPick();
+ } else if (navigationalKeys.includes(e.key)) {
+ const cursorPosition = this.promptTextInput.getCursorPosition();
+
+ // Only enter history navigation if:
+ // 1. Going up and there's history to go up to, or we're at the beginning of history navigation
+ // 2. Going down and we're not already at the bottom of history
+ const shouldNavigateUp =
+ cursorPosition.isAtTheBeginning &&
+ e.key === KeyMap.ARROW_UP &&
+ (this.userPromptHistoryIndex > 0 || this.userPromptHistoryIndex === -1) &&
+ this.userPromptHistory.length > 0;
+ const shouldNavigateDown =
+ cursorPosition.isAtTheEnd &&
+ e.key === KeyMap.ARROW_DOWN &&
+ this.userPromptHistoryIndex !== -1 &&
+ this.userPromptHistoryIndex < this.userPromptHistory.length;
+
+ if (shouldNavigateUp || shouldNavigateDown) {
+ if (
+ this.userPromptHistoryIndex === -1 ||
+ this.userPromptHistoryIndex === this.userPromptHistory.length
+ ) {
+ this.lastUnsentUserPrompt = {
+ inputText: this.promptTextInput.getTextInputValue(),
+ codeAttachment: this.promptAttachment?.lastAttachmentContent ?? '',
+ };
+ }
+
+ if (this.userPromptHistoryIndex === -1) {
+ this.userPromptHistoryIndex = this.userPromptHistory.length;
+ }
+
+ if (e.key === KeyMap.ARROW_UP) {
+ // Check if the cursor is on the first line or not
+ this.userPromptHistoryIndex = Math.max(0, this.userPromptHistoryIndex - 1);
+ } else if (e.key === KeyMap.ARROW_DOWN) {
+ // Check if the cursor is on the last line or not
+ this.userPromptHistoryIndex = Math.min(
+ this.userPromptHistory.length,
+ this.userPromptHistoryIndex + 1,
+ );
+ }
+
+ let codeAttachment = '';
+ if (this.userPromptHistoryIndex === this.userPromptHistory.length) {
+ this.promptTextInput.updateTextInputValue(
+ escapeHtml(this.lastUnsentUserPrompt.inputText ?? ''),
+ );
+ codeAttachment = this.lastUnsentUserPrompt.codeAttachment ?? '';
+ } else {
+ this.promptTextInput.updateTextInputValue(
+ escapeHtml(this.userPromptHistory[this.userPromptHistoryIndex].inputText),
+ );
+ codeAttachment = this.userPromptHistory[this.userPromptHistoryIndex].codeAttachment ?? '';
+ }
+ codeAttachment = codeAttachment.trim();
+ if (codeAttachment.length > 0) {
+ // the way we mark code in our example mynah client
+ if (codeAttachment.startsWith('~~~~~~~~~~') && codeAttachment.endsWith('~~~~~~~~~~')) {
+ codeAttachment = codeAttachment
+ .replace(/^~~~~~~~~~~/, '')
+ .replace(/~~~~~~~~~~$/, '')
+ .trim();
+ } else if (codeAttachment.startsWith('```') && codeAttachment.endsWith('```')) {
+ // the way code is marked in VScode and JetBrains extensions
+ codeAttachment = codeAttachment.replace(/^```/, '').replace(/```$/, '').trim();
+ }
+ this.promptAttachment.updateAttachment(codeAttachment, 'code');
+ } else {
+ this.promptAttachment.clear();
+ }
+ }
+ }
+ } else {
+ const blockedKeys = [
+ KeyMap.ENTER,
+ KeyMap.ESCAPE,
+ KeyMap.SPACE,
+ KeyMap.TAB,
+ KeyMap.AT,
+ KeyMap.BACK_SLASH,
+ KeyMap.SLASH,
+ KeyMap.ALT,
+ ] as string[];
+ if (blockedKeys.includes(e.key)) {
+ // Close quick pick overlay when space is pressed
+ if (e.key === KeyMap.SPACE) {
+ this.quickPick?.close();
+ return;
+ }
+ e.preventDefault();
+ if (e.key === KeyMap.ESCAPE) {
+ if (this.quickPickType === 'quick-action') {
+ this.clearTextArea(true);
+ }
+ this.quickPick?.close();
+ } else if (e.key === KeyMap.ENTER || e.key === KeyMap.TAB) {
+ this.searchTerm = '';
+ const targetDetailedListItem = this.quickPickItemsSelectorContainer?.getTargetElement();
+ if (targetDetailedListItem != null) {
+ const commandToSend = convertDetailedListItemToQuickActionCommand(targetDetailedListItem);
+ if (this.quickPickType === 'context') {
+ if (commandToSend.command !== '') {
+ // Add context item to top bar if Alt-Enter is pressed on an item
+ this.handleContextCommandSelection(commandToSend, e.altKey);
+ } else {
+ // Otherwise pass the given text by user
+ const command = this.promptTextInput
+ .getTextInputValue()
+ .substring(this.quickPickTriggerIndex, this.promptTextInput.getCursorPos());
+ this.handleContextCommandSelection({ command });
+ }
+ } else {
+ switch (e.key) {
+ case KeyMap.TAB:
+ this.handleQuickActionCommandSelection(commandToSend, 'tab');
+ break;
+ case KeyMap.ENTER:
+ this.handleQuickActionCommandSelection(commandToSend, 'enter');
+ break;
+ }
+ }
+ }
+ }
+ } else if (navigationalKeys.includes(e.key)) {
+ cancelEvent(e);
+ this.quickPickItemsSelectorContainer?.changeTarget(
+ e.key === KeyMap.ARROW_UP ? 'up' : 'down',
+ true,
+ true,
+ );
+ } else {
+ if (this.quickPick != null) {
+ if (this.promptTextInput.getTextInputValue() === '') {
+ this.quickPick.close();
+ } else {
+ if (e.key === KeyMap.ARROW_LEFT || e.key === KeyMap.ARROW_RIGHT) {
+ cancelEvent(e);
+ } else {
+ this.filteredQuickPickItemGroups = [];
+ // In case the prompt is an incomplete regex
+ try {
+ if (e.key === KeyMap.BACKSPACE) {
+ const isAllSelected =
+ window.getSelection()?.toString() === this.promptTextInput.getTextInputValue();
+ if (this.searchTerm === '' || isAllSelected) {
+ this.quickPick.close();
+ } else {
+ this.searchTerm = this.searchTerm.slice(0, -1);
+ }
+ } else if (!e.ctrlKey && !e.metaKey && e.key.length === 1) {
+ this.searchTerm += e.key.toLowerCase();
+ }
+ this.filteredQuickPickItemGroups = filterQuickPickItems(
+ [...this.quickPickItemGroups],
+ this.searchTerm,
+ );
+ } catch (e) {}
+ if (this.filteredQuickPickItemGroups.length > 0) {
+ this.quickPick.toggleHidden(false);
+ this.quickPick.updateContent([
+ this.getQuickPickItemGroups(this.filteredQuickPickItemGroups),
+ ]);
+ } else {
+ // If there's no matching action, hide the command selector overlay
+ this.quickPick.toggleHidden(true);
+ }
+ }
+ }
+ }
+ }
+ }
+ };
+
+ private readonly tabBarTitleOverlayKeyPressHandler = (e: KeyboardEvent): void => {
+ if (e.key === KeyMap.ARROW_UP || e.key === KeyMap.ARROW_DOWN) {
+ cancelEvent(e);
+ this.quickPickItemsSelectorContainer?.changeTarget(e.key === KeyMap.ARROW_UP ? 'up' : 'down', true, true);
+ } else if (e.key === KeyMap.ENTER) {
+ const detailedListItem = this.quickPickItemsSelectorContainer?.getTargetElement();
+ if (detailedListItem != null) {
+ const quickPickCommand: QuickActionCommand =
+ convertDetailedListItemToQuickActionCommand(detailedListItem);
+ this.handleContextCommandSelection(quickPickCommand);
+ }
+ } else if (e.key === KeyMap.ESCAPE) {
+ this.quickPick.close();
+ if (Config.getInstance().config.autoFocus) {
+ this.promptTextInput.focus();
+ }
+ }
+ };
+
+ private readonly openQuickPick = (topBarTitleClicked?: boolean): void => {
+ this.topBarTitleClicked = topBarTitleClicked === true;
+
+ this.quickPickItemsSelectorContainer = null;
+
+ if (this.topBarTitleClicked) {
+ window.addEventListener('keydown', this.tabBarTitleOverlayKeyPressHandler);
+ }
+
+ if (this.quickPickItemGroups.length > 0) {
+ this.quickPick = new Overlay({
+ closeOnOutsideClick: true,
+ referenceElement: this.render.querySelector('.mynah-chat-prompt') as ExtendedHTMLElement,
+ dimOutside: false,
+ stretchWidth: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ onClose: () => {
+ this.quickPickOpen = false;
+ window.removeEventListener('keydown', this.tabBarTitleOverlayKeyPressHandler);
+ },
+ children: [this.getQuickPickItemGroups(this.filteredQuickPickItemGroups)],
+ });
+
+ this.quickPickOpen = true;
+ }
+ };
+
+ private readonly handleInputFocus = (): void => {
+ // Show the character limit warning overlay if the threshold is hit
+ this.updateAvailableCharactersIndicator();
+
+ const inputValue = this.promptTextInput.getTextInputValue();
+ if (inputValue.startsWith('/')) {
+ const quickPickItems = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('quickActionCommands') as QuickActionCommandGroup[];
+ this.quickPickItemGroups = [...quickPickItems];
+ this.quickPickTriggerIndex = 1;
+ const restorePreviousFilteredQuickPickItemGroups: QuickActionCommandGroup[] = [];
+ this.quickPickItemGroups.forEach((quickPickGroup: QuickActionCommandGroup) => {
+ const newQuickPickCommandGroup = { ...quickPickGroup };
+ try {
+ const searchTerm = inputValue.substring(this.quickPickTriggerIndex).match(/\S*/gi)?.[0];
+ const promptRegex = new RegExp(searchTerm ?? '', 'gi');
+ newQuickPickCommandGroup.commands = newQuickPickCommandGroup.commands.filter((command) =>
+ command.command.match(promptRegex),
+ );
+ if (newQuickPickCommandGroup.commands.length > 0) {
+ restorePreviousFilteredQuickPickItemGroups.push(newQuickPickCommandGroup);
+ }
+ } catch (e) {
+ // In case the prompt is an incomplete regex
+ }
+ });
+
+ this.filteredQuickPickItemGroups = [...restorePreviousFilteredQuickPickItemGroups];
+ this.openQuickPick();
+ }
+ };
+
+ private readonly getQuickPickItemGroups = (quickPickGroupList: QuickActionCommandGroup[]): ExtendedHTMLElement => {
+ const detailedListItemsGroup = convertQuickActionCommandGroupsToDetailedListGroups(quickPickGroupList);
+ if (this.quickPickItemsSelectorContainer == null) {
+ const pinContextHint = Config.getInstance().config.texts.pinContextHint;
+ this.quickPickItemsSelectorContainer = new DetailedListWrapper({
+ descriptionTextDirection: 'rtl',
+ detailedList: {
+ list: detailedListItemsGroup,
+ selectable: true,
+ ...(this.topBarTitleClicked
+ ? {
+ filterOptions: [
+ {
+ type: 'textinput',
+ icon: MynahIcons.SEARCH,
+ id: 'search',
+ placeholder: 'Search context',
+ autoFocus: true,
+ },
+ ],
+ }
+ : !this.promptTopBar.isHidden() && this.quickPickType === 'context' && pinContextHint !== ''
+ ? {
+ header: {
+ description: pinContextHint,
+ },
+ }
+ : {}),
+ },
+ ...(this.topBarTitleClicked
+ ? {
+ onFilterValueChange: (filterValues) => {
+ const searchTerm = filterValues?.search ?? '';
+ if (searchTerm.length > 0) {
+ this.filteredQuickPickItemGroups = filterQuickPickItems(
+ [...this.quickPickItemGroups],
+ searchTerm,
+ this.topBarTitleClicked,
+ );
+ } else {
+ this.filteredQuickPickItemGroups = [...this.quickPickItemGroups];
+ }
+ const results = convertQuickActionCommandGroupsToDetailedListGroups(
+ this.filteredQuickPickItemGroups,
+ );
+ const emptyResults =
+ results.length === 0 || (results.length === 1 && results[0].children?.length === 0);
+ this.quickPickItemsSelectorContainer?.update({
+ list: emptyResults ? [{ groupName: 'No matches found' }] : results,
+ });
+ },
+ }
+ : {}),
+ onGroupActionClick: (action) => {
+ this.promptTextInput.deleteTextRange(
+ this.quickPickTriggerIndex,
+ this.promptTextInput.getCursorPos(),
+ );
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.QUICK_COMMAND_GROUP_ACTION_CLICK, {
+ tabId: this.props.tabId,
+ actionId: action.id,
+ });
+ },
+ onItemSelect: (detailedListItem) => {
+ const quickPickCommand: QuickActionCommand =
+ convertDetailedListItemToQuickActionCommand(detailedListItem);
+ if (this.quickPickType === 'context') {
+ this.handleContextCommandSelection(quickPickCommand);
+ } else {
+ this.handleQuickActionCommandSelection(quickPickCommand, 'click');
+ }
+ },
+ });
+ } else {
+ this.quickPickItemsSelectorContainer.update({
+ list: detailedListItemsGroup,
+ });
+ }
+
+ const headerInfo: QuickActionCommandsHeader = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('quickActionCommandsHeader');
+ let headerComponent = new TitleDescriptionWithIcon({
+ ...headerInfo,
+ classNames: ['mynah-chat-prompt-quick-picks-header', `status-${headerInfo.status ?? 'default'}`],
+ }).render;
+
+ // const subscriptionId =
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'quickActionCommandsHeader',
+ (newHeader: QuickActionCommandsHeader) => {
+ const newHeaderComponent = new TitleDescriptionWithIcon({
+ ...newHeader,
+ classNames: ['mynah-chat-prompt-quick-picks-header', `status-${newHeader.status ?? 'default'}`],
+ }).render;
+
+ headerComponent.replaceWith(newHeaderComponent);
+ headerComponent = newHeaderComponent;
+ },
+ );
+
+ // Only show header if it has meaningful content
+ const hasHeaderContent =
+ headerInfo != null &&
+ ((headerInfo.title != null && headerInfo.title.trim() !== '') ||
+ (headerInfo.description != null && headerInfo.description.trim() !== '') ||
+ headerInfo.icon != null);
+
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-prompt-quick-picks-overlay-wrapper'],
+ children: [
+ ...(this.quickPickType === 'quick-action' && hasHeaderContent ? [headerComponent] : []),
+ this.quickPickItemsSelectorContainer.render,
+ ],
+ });
+ };
+
+ private readonly handleQuickActionCommandSelection = (
+ dirtyQuickActionCommand: QuickActionCommand,
+ method: 'enter' | 'tab' | 'space' | 'click',
+ ): void => {
+ const quickActionCommand = {
+ ...dirtyQuickActionCommand,
+ command: dirtyQuickActionCommand.command.replace(this.markerRemovalRegex, ''),
+ };
+
+ this.selectedCommand = quickActionCommand.command;
+ this.promptTextInput.updateTextInputValue('');
+ if (quickActionCommand.placeholder !== undefined) {
+ this.promptTextInputCommand.setCommand(this.selectedCommand);
+ this.promptTextInput.updateTextInputPlaceholder(quickActionCommand.placeholder);
+ if (Config.getInstance().config.autoFocus) {
+ this.promptTextInput.focus();
+ }
+ } else if (method === 'enter' || method === 'click') {
+ this.sendPrompt();
+ } else {
+ this.promptTextInputCommand.setCommand(this.selectedCommand);
+ this.promptTextInput.updateTextInputPlaceholder(Config.getInstance().config.texts.commandConfirmation);
+ this.promptTextInput.updateTextInputMaxLength(0);
+ this.render.addClass('awaits-confirmation');
+ }
+ this.quickPick.close();
+ };
+
+ private readonly handleContextCommandSelection = (
+ dirtyContextCommand: QuickActionCommand,
+ topBarHotKey?: boolean,
+ ): void => {
+ const contextCommand: QuickActionCommand = {
+ ...dirtyContextCommand,
+ command: dirtyContextCommand.command.replace(this.markerRemovalRegex, ''),
+ };
+ // Check if the selected command has children
+ if (contextCommand.children?.[0] != null) {
+ // If user types '@fi', and then selects a command with children (ex: file command), remove 'fi' from prompt
+ if (!this.topBarTitleClicked) {
+ this.promptTextInput.deleteTextRange(
+ this.quickPickTriggerIndex + 1,
+ this.promptTextInput.getCursorPos(),
+ );
+ }
+ this.quickPickItemGroups = [...contextCommand.children];
+ this.quickPick.updateContent([this.getQuickPickItemGroups(contextCommand.children)]);
+ } else {
+ if (this.quickPickTriggerRange != null) {
+ // Restore cursor position so element is inserted in correct position
+ this.promptTextInput.restoreRange(this.quickPickTriggerRange);
+ }
+ this.quickPick.close();
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CONTEXT_SELECTED, {
+ contextItem: contextCommand,
+ tabId: this.props.tabId,
+ promptInputCallback: (insert: boolean) => {
+ if (insert) {
+ // Add command to top bar if top bar is visible, and either top bar title was clicked or topBarHotKey used
+ if (!this.promptTopBar.isHidden() && (this.topBarTitleClicked || topBarHotKey === true)) {
+ this.promptTopBar.addContextPill(contextCommand);
+ // If user types `@foo` to add context but used topBarHotKey, remove `@foo` from prompt
+ if (topBarHotKey === true && !this.topBarTitleClicked) {
+ this.promptTextInput.deleteTextRange(
+ this.quickPickTriggerIndex,
+ this.promptTextInput.getCursorPos(),
+ );
+ }
+ } else {
+ this.promptTextInput.insertContextItem(
+ {
+ ...contextCommand,
+ },
+ this.quickPickTriggerIndex,
+ this.promptTopBar.isHidden(),
+ );
+ }
+ } else {
+ this.promptTextInput.deleteTextRange(
+ this.quickPickTriggerIndex,
+ this.promptTextInput.getCursorPos(),
+ );
+ }
+ },
+ });
+ }
+ };
+
+ private readonly sendPrompt = (): void => {
+ const quickPickItems = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('quickActionCommands') as QuickActionCommandGroup[];
+ const currentInputValue = this.promptTextInput.getTextInputValue();
+ if (currentInputValue !== '' || this.selectedCommand.trim() !== '') {
+ let selectedCommand = this.selectedCommand;
+
+ // Catching cases where user could send a prompt with quick action command but the command is not be selected correctly
+ if (selectedCommand === '') {
+ for (const quickPickItem of quickPickItems) {
+ if (selectedCommand !== '') break;
+ const matchedCommand = quickPickItem.commands.find(
+ (item) => item.disabled === false && currentInputValue.startsWith(item.command),
+ );
+ if (matchedCommand !== undefined) {
+ selectedCommand = matchedCommand.command;
+ }
+ }
+ }
+
+ const attachmentContent: string | undefined = this.promptAttachment?.lastAttachmentContent;
+
+ // Trim prompt text with command selectedCommand exists
+ const promptText =
+ this.selectedCommand === '' && selectedCommand !== ''
+ ? currentInputValue.replace(selectedCommand, '') + (attachmentContent ?? '')
+ : currentInputValue + (attachmentContent ?? '');
+ const context: QuickActionCommand[] = this.promptTextInput.getUsedContext();
+
+ let escapedPrompt = escapeHTML(promptText);
+ context?.forEach((cmd) => {
+ if (cmd.command !== '') {
+ // Escape special regex characters in the command
+ const escapedCmd = cmd.command.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ // Replace all occurrences of @command with **@command**
+ escapedPrompt = escapedPrompt.replace(new RegExp(`@${escapedCmd}`, 'g'), ` **@${cmd.command}**`);
+ }
+ });
+
+ const promptData: { tabId: string; prompt: ChatPrompt } = {
+ tabId: this.props.tabId,
+ prompt: {
+ prompt: promptText,
+ escapedPrompt,
+ context,
+ options: this.promptOptions.getOptionValues() ?? {},
+ ...(selectedCommand !== '' ? { command: selectedCommand } : {}),
+ },
+ };
+ this.clearTextArea();
+
+ if (currentInputValue !== '') {
+ this.userPromptHistory.push({
+ inputText: escapeHtml(currentInputValue),
+ codeAttachment: escapeHtml(attachmentContent ?? ''),
+ });
+ }
+
+ this.lastUnsentUserPrompt = {
+ inputText: '',
+ codeAttachment: '',
+ };
+
+ this.userPromptHistoryIndex = -1;
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CHAT_PROMPT, promptData);
+ }
+ };
+
+ private readonly getPromptInputTextLabel = (promptInputLabel?: string): ExtendedHTMLElement =>
+ DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.label,
+ classNames: ['mynah-chat-prompt-input-label'],
+ children:
+ promptInputLabel != null && promptInputLabel.trim() !== ''
+ ? [
+ new CardBody({
+ body: promptInputLabel,
+ }).render,
+ ]
+ : [],
+ });
+
+ public readonly clearTextArea = (keepAttachment?: boolean): void => {
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).updateStore({
+ promptInputText: '',
+ });
+ this.selectedCommand = '';
+ this.promptTextInput.clear();
+ this.promptTextInput.updateTextInputMaxLength(MAX_USER_INPUT());
+ this.promptTextInputCommand.setCommand('');
+ if (keepAttachment !== true) {
+ this.attachmentWrapper.clear();
+ this.promptAttachment.clear();
+ }
+ this.updateAvailableCharactersIndicator();
+ };
+
+ public readonly getCursorPosition = (): number => {
+ return this.promptTextInput.getCursorPos();
+ };
+
+ public readonly addAttachment = (attachmentContent: string, type?: PromptAttachmentType): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.ADD_ATTACHMENT, {
+ textToAdd: attachmentContent,
+ tabId: this.props.tabId,
+ type,
+ });
+ };
+
+ public readonly openTopBarButtonItemOverlay = (data: TopBarButtonOverlayProps): void => {
+ this.promptTopBar.topBarButton.showOverlay(data);
+ };
+
+ public readonly updateTopBarButtonItemOverlay = (data: DetailedList): void => {
+ this.promptTopBar.topBarButton.onTopBarButtonOverlayChanged(data);
+ };
+
+ public readonly closeTopBarButtonItemOverlay = (): void => {
+ this.promptTopBar.topBarButton.closeOverlay();
+ };
+
+ public readonly destroy = (): void => {
+ this.promptTextInput.destroy();
+ };
+
+ public readonly getCurrentTriggerSource = (): 'top-bar' | 'prompt-input' => {
+ return this.topBarTitleClicked ? 'top-bar' : 'prompt-input';
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/chat-wrapper.ts b/mynah-ui/src/components/chat-item/chat-wrapper.ts
new file mode 100644
index 0000000000..898eb4705b
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/chat-wrapper.ts
@@ -0,0 +1,594 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement, DomBuilderObject } from '../../helper/dom';
+import { generateUID } from '../../helper/guid';
+import { MynahUITabsStore } from '../../helper/tabs-store';
+import {
+ CardRenderDetails,
+ ChatItem,
+ ChatItemType,
+ DetailedList,
+ PromptAttachmentType,
+ TabHeaderDetails,
+ MynahEventNames,
+ QuickActionCommandGroup,
+ QuickActionCommand,
+} from '../../static';
+import { ChatItemCard } from './chat-item-card';
+import { ChatPromptInput } from './chat-prompt-input';
+import { ChatPromptInputInfo } from './chat-prompt-input-info';
+import { ChatPromptInputStickyCard } from './chat-prompt-input-sticky-card';
+import testIds from '../../helper/test-ids';
+import { TitleDescriptionWithIcon } from '../title-description-with-icon';
+import { GradientBackground } from '../background';
+import { MoreContentIndicator } from '../more-content-indicator';
+import { StyleLoader } from '../../helper/style-loader';
+import { Icon } from '../icon';
+import { cancelEvent, MynahUIGlobalEvents } from '../../helper/events';
+import { TopBarButtonOverlayProps } from './prompt-input/prompt-top-bar/top-bar-button';
+
+export const CONTAINER_GAP = 12;
+export interface ChatWrapperProps {
+ onStopChatResponse?: (tabId: string) => void;
+ tabId: string;
+}
+export class ChatWrapper {
+ private readonly props: ChatWrapperProps;
+ private readonly chatItemsContainer: ExtendedHTMLElement;
+ private readonly promptInputElement: ExtendedHTMLElement;
+ private readonly promptInput: ChatPromptInput;
+ private readonly footerSpacer: ExtendedHTMLElement;
+ private readonly headerSpacer: ExtendedHTMLElement;
+ private readonly promptInfo: ExtendedHTMLElement;
+ private readonly promptStickyCard: ExtendedHTMLElement;
+ private canObserveIntersection: boolean = false;
+ private observer: IntersectionObserver | null;
+ private activeConversationGroup: ExtendedHTMLElement;
+ private tabHeaderDetails: ExtendedHTMLElement;
+ private tabModeSwitchTimeout: ReturnType | null;
+ private lastStreamingChatItemCard: ChatItemCard | null;
+ private lastStreamingChatItemMessageId: string | null;
+ private allRenderedChatItems: Record = {};
+ render: ExtendedHTMLElement;
+ private readonly dragOverlayContent: HTMLElement;
+ private readonly dragBlurOverlay: HTMLElement;
+ private dragOverlayVisibility: boolean = true;
+ private imageContextFeatureEnabled: boolean = false;
+
+ constructor(props: ChatWrapperProps) {
+ StyleLoader.getInstance().load('components/chat/_chat-wrapper.scss');
+
+ this.props = props;
+ this.footerSpacer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-wrapper-footer-spacer'],
+ });
+ this.headerSpacer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-wrapper-header-spacer'],
+ });
+
+ /*
+ The IDE controls image-related functionality through the imageContextEnabled feature flag.
+ When this flag is set to true, the language server adds the Image option to the available context types.
+
+ Users can add images to the context in Mynah UI through three methods:
+
+ 1) Using the context command menu (image option in the context menu added by the language server)
+ 2) Typing the @image: command
+ 3) Dragging and dropping images
+
+ To maintain consistency, we've implemented a centralized feature flag that controls the visibility
+ of all three image-adding methods. This ensures that image functionality is either entirely available
+ or unavailable across for an IDE.
+ */
+
+ const contextCommandsRaw = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('contextCommands');
+ const contextCommands = Array.isArray(contextCommandsRaw) ? contextCommandsRaw : [];
+ this.imageContextFeatureEnabled = contextCommands.some((group) =>
+ group.commands.some((cmd: QuickActionCommand) => cmd.command.toLowerCase() === 'image'),
+ );
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'chatItems',
+ (chatItems: ChatItem[]) => {
+ const chatItemToInsert: ChatItem = chatItems[chatItems.length - 1];
+ if (Object.keys(this.allRenderedChatItems).length === chatItems.length) {
+ const lastItem = this.chatItemsContainer.children.item(
+ Array.from(this.chatItemsContainer.children).length - 1,
+ );
+ if (lastItem != null && chatItemToInsert != null) {
+ const newChatItemCard = new ChatItemCard({
+ tabId: this.props.tabId,
+ chatItem: chatItemToInsert,
+ });
+ if (chatItemToInsert.messageId !== undefined) {
+ this.allRenderedChatItems[chatItemToInsert.messageId] = newChatItemCard;
+ }
+ lastItem.replaceWith(newChatItemCard.render);
+ }
+ } else if (chatItems.length > 0) {
+ if (Object.keys(this.allRenderedChatItems).length === 0) {
+ chatItems.forEach((chatItem) => {
+ this.insertChatItem(chatItem);
+ });
+ } else {
+ this.insertChatItem(chatItemToInsert);
+ }
+ } else {
+ this.chatItemsContainer.clear(true);
+ this.chatItemsContainer.insertChild('beforeend', this.getNewConversationGroupElement());
+ this.allRenderedChatItems = {};
+ }
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'loadingChat',
+ (loadingChat: boolean) => {
+ if (loadingChat) {
+ this.render.addClass('loading');
+ } else {
+ this.render.removeClass('loading');
+ }
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'tabHeaderDetails',
+ (tabHeaderDetails: TabHeaderDetails) => {
+ this.render.addClass('tab-mode-switch-animation');
+ if (this.tabModeSwitchTimeout != null) {
+ clearTimeout(this.tabModeSwitchTimeout);
+ }
+ this.tabModeSwitchTimeout = setTimeout(() => {
+ this.render.removeClass('tab-mode-switch-animation');
+ this.tabModeSwitchTimeout = null;
+ if (tabHeaderDetails == null) {
+ this.tabHeaderDetails.clear();
+ }
+ }, 750);
+
+ if (tabHeaderDetails != null) {
+ // Update view
+ const newDetails = new TitleDescriptionWithIcon({
+ testId: testIds.chat.header,
+ classNames: ['mynah-ui-tab-header-details'],
+ ...tabHeaderDetails,
+ }).render;
+ if (this.tabHeaderDetails != null) {
+ this.tabHeaderDetails.replaceWith(newDetails);
+ } else {
+ this.tabHeaderDetails = newDetails;
+ }
+
+ this.render.addClass('show-tab-header-details');
+ } else {
+ this.render.removeClass('show-tab-header-details');
+ }
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'compactMode',
+ (compactMode: boolean) => {
+ this.render.addClass('tab-mode-switch-animation');
+ if (this.tabModeSwitchTimeout != null) {
+ clearTimeout(this.tabModeSwitchTimeout);
+ }
+ this.tabModeSwitchTimeout = setTimeout(() => {
+ this.render.removeClass('tab-mode-switch-animation');
+ this.tabModeSwitchTimeout = null;
+ }, 750);
+
+ if (compactMode) {
+ this.render.addClass('compact-mode');
+ } else {
+ this.render.removeClass('compact-mode');
+ }
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ props.tabId,
+ 'contextCommands',
+ (contextCommands: QuickActionCommandGroup[]) => {
+ // Feature flag for image context command
+ this.imageContextFeatureEnabled = contextCommands?.some((group) =>
+ group.commands.some((cmd: QuickActionCommand) => cmd.command.toLowerCase() === 'image'),
+ );
+ },
+ );
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'tabBackground',
+ (tabBackground: boolean) => {
+ if (tabBackground) {
+ this.render.addClass('with-background');
+ } else {
+ this.render.removeClass('with-background');
+ }
+ },
+ );
+
+ this.chatItemsContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chat.chatItemsContainer,
+ classNames: ['mynah-chat-items-container'],
+ persistent: true,
+ children: [this.getNewConversationGroupElement()],
+ });
+
+ this.tabHeaderDetails = new TitleDescriptionWithIcon({
+ classNames: ['mynah-ui-tab-header-details'],
+ ...MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('tabHeaderDetails'),
+ }).render;
+
+ this.promptInfo = new ChatPromptInputInfo({ tabId: this.props.tabId }).render;
+ this.promptStickyCard = new ChatPromptInputStickyCard({ tabId: this.props.tabId }).render;
+ if (Config.getInstance().config.showPromptField) {
+ this.promptInput = new ChatPromptInput({
+ tabId: this.props.tabId,
+ onStopChatResponse: this.props?.onStopChatResponse,
+ });
+ this.promptInputElement = this.promptInput.render;
+ }
+
+ // Always-present drag overlays (hidden by default, shown by style)
+ const dragOverlayIcon = Config.getInstance().config.dragOverlayIcon;
+ const dragOverlayText = Config.getInstance().config.texts.dragOverlayText;
+ const dragOverlayChildren: Array = [];
+ if (dragOverlayIcon !== undefined) {
+ dragOverlayChildren.push(new Icon({ icon: dragOverlayIcon }).render);
+ }
+ if (dragOverlayText !== undefined) {
+ dragOverlayChildren.push({ type: 'span', children: [dragOverlayText] } satisfies DomBuilderObject);
+ }
+ this.dragOverlayContent = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-drag-overlay-content'],
+ children: dragOverlayChildren,
+ });
+ this.dragBlurOverlay = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-drag-blur-overlay'],
+ });
+ // Set display:none initially
+ this.setDragOverlayVisible(false);
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chat.wrapper,
+ classNames: [
+ 'mynah-chat-wrapper',
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('tabHeaderDetails') != null
+ ? 'show-tab-header-details'
+ : '',
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('compactMode') === true
+ ? 'compact-mode'
+ : '',
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('tabBackground') === true
+ ? 'with-background'
+ : '',
+ ],
+ attributes: {
+ 'mynah-tab-id': this.props.tabId,
+ },
+ persistent: true,
+ events: {
+ dragenter: (e: DragEvent) => {
+ if (!this.imageContextFeatureEnabled) return;
+ cancelEvent(e);
+ if (e.dataTransfer?.types.includes('Files') === true) {
+ this.setDragOverlayVisible(true);
+ }
+ },
+ dragover: (e: DragEvent) => {
+ if (!this.imageContextFeatureEnabled) return;
+ cancelEvent(e);
+ },
+ dragleave: (e: DragEvent) => {
+ if (!this.imageContextFeatureEnabled) return;
+ cancelEvent(e);
+ if (e.relatedTarget === null || !this.render.contains(e.relatedTarget as Node)) {
+ this.setDragOverlayVisible(false);
+ }
+ },
+ drop: (e: DragEvent) => {
+ if (!this.imageContextFeatureEnabled) return;
+ cancelEvent(e);
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.RESET_TOP_BAR_CLICKED, {
+ tabId: this.props.tabId,
+ });
+ const files = Array.from(e.dataTransfer?.files ?? []);
+ files.filter((file) => file.type.startsWith('image/'));
+ // Get the current cursor position of prompt input
+ const cursorPosition = this.getPromptInputCursorPosition();
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FILES_DROPPED, {
+ tabId: this.props.tabId,
+ insertPosition: cursorPosition,
+ files,
+ });
+ this.setDragOverlayVisible(false);
+ },
+ dragend: (e: DragEvent) => {
+ if (!this.imageContextFeatureEnabled) return;
+ this.setDragOverlayVisible(false);
+ },
+ },
+ children: [
+ {
+ type: 'style',
+ children: [
+ `
+ .mynah-nav-tabs-wrapper[selected-tab="${this.props.tabId}"] ~ .mynah-ui-tab-contents-wrapper > .mynah-chat-wrapper[mynah-tab-id="${this.props.tabId}"]{
+ visibility: visible;
+ position: relative;
+ left: initial;
+ opacity: 1;
+ }
+ .mynah-nav-tabs-wrapper[selected-tab="${this.props.tabId}"] ~ .mynah-ui-tab-contents-wrapper > .mynah-chat-wrapper:not([mynah-tab-id="${this.props.tabId}"]) * {
+ pointer-events: none !important;
+ }
+ `,
+ ],
+ },
+ new GradientBackground().render,
+ this.headerSpacer,
+ this.tabHeaderDetails,
+ this.chatItemsContainer,
+ new MoreContentIndicator({
+ border: false,
+ onClick: () => {
+ this.chatItemsContainer.scrollTop = this.chatItemsContainer.scrollHeight;
+ },
+ }).render,
+ this.promptStickyCard,
+ this.promptInputElement,
+ this.footerSpacer,
+ this.promptInfo,
+ this.dragBlurOverlay,
+ this.dragOverlayContent,
+ ],
+ });
+
+ const initChatItems = MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('chatItems');
+ if (initChatItems.length > 0) {
+ initChatItems.forEach((chatItem: ChatItem) => this.insertChatItem(chatItem));
+ }
+ }
+
+ private readonly getNewConversationGroupElement = (): ExtendedHTMLElement => {
+ this.activeConversationGroup?.querySelector('.intersection-observer')?.remove();
+ this.activeConversationGroup = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chat.conversationContainer,
+ classNames: ['mynah-chat-items-conversation-container'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['intersection-observer'],
+ },
+ ],
+ });
+ if (this.observer == null && IntersectionObserver != null) {
+ this.observer = new IntersectionObserver((entries) => {
+ if (this.canObserveIntersection) {
+ if (!entries[0].isIntersecting) {
+ this.render?.addClass('more-content');
+ } else if (this.canObserveIntersection) {
+ this.canObserveIntersection = false;
+ this.render?.removeClass('more-content');
+ const previousObserverElement =
+ this.activeConversationGroup.querySelector('.intersection-observer');
+ if (previousObserverElement != null) {
+ this.observer?.unobserve(previousObserverElement);
+ }
+ }
+ }
+ });
+ } else {
+ const previousObserverElement = this.activeConversationGroup.querySelector('.intersection-observer');
+ if (previousObserverElement != null) {
+ this.observer?.unobserve(previousObserverElement);
+ }
+ }
+ setTimeout(() => {
+ this.canObserveIntersection = true;
+ }, 500);
+ this.canObserveIntersection = false;
+ this.render?.removeClass('more-content');
+ this.observer?.observe(this.activeConversationGroup.querySelector('.intersection-observer') as HTMLSpanElement);
+ return this.activeConversationGroup;
+ };
+
+ private readonly removeEmptyCardsAndFollowups = (): void => {
+ Object.keys(this.allRenderedChatItems).forEach((messageId) => {
+ if (this.allRenderedChatItems[messageId].cleanFollowupsAndRemoveIfEmpty()) {
+ // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+ delete this.allRenderedChatItems[messageId];
+ }
+ });
+ };
+
+ private readonly insertChatItem = (chatItem: ChatItem): void => {
+ this.removeEmptyCardsAndFollowups();
+ const currentMessageId: string =
+ chatItem.messageId != null && chatItem.messageId !== '' ? chatItem.messageId : `TEMP_${generateUID()}`;
+ const chatItemCard = new ChatItemCard({
+ tabId: this.props.tabId,
+ chatItem: {
+ ...chatItem,
+ messageId: currentMessageId,
+ },
+ });
+
+ // When a new card appears, we're cleaning the last streaming card vars, since it is not the last anymore
+ if (this.lastStreamingChatItemMessageId != null) {
+ this.endStreamWithMessageId(this.lastStreamingChatItemMessageId, {});
+ }
+
+ if (chatItem.type === ChatItemType.ANSWER_STREAM) {
+ // Update the lastStreaming variables with the new one
+ this.lastStreamingChatItemMessageId = currentMessageId;
+ this.lastStreamingChatItemCard = chatItemCard;
+ }
+
+ if (chatItem.type === ChatItemType.PROMPT) {
+ this.chatItemsContainer.insertChild('beforeend', this.getNewConversationGroupElement());
+ }
+
+ // Add to render
+ this.activeConversationGroup.insertChild('beforeend', chatItemCard.render);
+
+ // Add to all rendered chat items map
+ this.allRenderedChatItems[currentMessageId] = chatItemCard;
+
+ if (chatItem.type === ChatItemType.PROMPT || chatItem.type === ChatItemType.SYSTEM_PROMPT) {
+ // Make sure we align to top when there is a new prompt.
+ // Only if it is a PROMPT!
+ // Check css application
+ this.chatItemsContainer.addClass('set-scroll');
+ }
+
+ setTimeout(() => {
+ // remove css class which allows us to snap automatically
+ this.chatItemsContainer.removeClass('set-scroll');
+ }, 100);
+ };
+
+ private readonly checkLastAnswerStreamChange = (updateWith: Partial): void => {
+ // If the new type is not a stream anymore
+ // Clear lastStremingMessage variables.
+ if (
+ updateWith.type !== undefined &&
+ updateWith.type !== null &&
+ updateWith.type !== ChatItemType.ANSWER_STREAM &&
+ updateWith.type !== ChatItemType.ANSWER_PART
+ ) {
+ this.lastStreamingChatItemCard = null;
+ this.lastStreamingChatItemMessageId = null;
+ }
+ };
+
+ public updateLastChatAnswer = (updateWith: Partial): void => {
+ if (this.lastStreamingChatItemCard != null) {
+ this.lastStreamingChatItemCard.updateCardStack(updateWith);
+ if (updateWith.messageId != null && updateWith.messageId !== '') {
+ if (
+ this.lastStreamingChatItemMessageId != null &&
+ this.lastStreamingChatItemMessageId !== updateWith.messageId
+ ) {
+ const renderChatItemInMap = this.allRenderedChatItems[this.lastStreamingChatItemMessageId];
+ if (renderChatItemInMap != null) {
+ this.allRenderedChatItems[updateWith.messageId] = renderChatItemInMap;
+ if (this.lastStreamingChatItemMessageId != null) {
+ // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+ delete this.allRenderedChatItems[this.lastStreamingChatItemMessageId];
+ }
+ }
+ }
+ this.lastStreamingChatItemMessageId = updateWith.messageId;
+ }
+
+ this.checkLastAnswerStreamChange(updateWith);
+ }
+ };
+
+ public getLastStreamingMessageId = (): string | null => {
+ return this.lastStreamingChatItemMessageId;
+ };
+
+ public getChatItem = (
+ messageId: string,
+ ):
+ | {
+ chatItem: ChatItem;
+ render: ExtendedHTMLElement | HTMLElement;
+ renderDetails: CardRenderDetails;
+ }
+ | undefined => {
+ if (this.allRenderedChatItems[messageId]?.render !== undefined) {
+ return {
+ chatItem: this.allRenderedChatItems[messageId].props.chatItem,
+ render: this.allRenderedChatItems[messageId].render,
+ renderDetails: this.allRenderedChatItems[messageId].getRenderDetails(),
+ };
+ }
+ };
+
+ public endStreamWithMessageId = (messageId: string, updateWith: Partial): void => {
+ if (this.allRenderedChatItems[messageId]?.render !== undefined) {
+ this.allRenderedChatItems[messageId].render.addClass('stream-ended');
+
+ // End typewriter animation stream to flush remaining updates instantly
+ this.allRenderedChatItems[messageId].endStream();
+
+ this.updateChatAnswerWithMessageId(messageId, updateWith);
+
+ // If the last streaming chat answer is the same with the messageId
+ if (this.lastStreamingChatItemMessageId === messageId) {
+ this.lastStreamingChatItemCard = null;
+ this.lastStreamingChatItemMessageId = null;
+ }
+ }
+ };
+
+ public updateChatAnswerWithMessageId = (messageId: string, updateWith: Partial): void => {
+ if (this.allRenderedChatItems[messageId]?.render !== undefined) {
+ this.allRenderedChatItems[messageId].updateCardStack(updateWith);
+
+ // If the last streaming chat answer is the same with the messageId
+ if (this.lastStreamingChatItemMessageId === messageId) {
+ this.checkLastAnswerStreamChange(updateWith);
+ }
+ }
+ };
+
+ public addAttachmentToPrompt = (textToAdd: string, type?: PromptAttachmentType): void => {
+ this.promptInput.addAttachment(textToAdd, type);
+ };
+
+ public openTopBarButtonItemOverlay = (data: TopBarButtonOverlayProps): void => {
+ this.promptInput.openTopBarButtonItemOverlay(data);
+ };
+
+ public updateTopBarButtonItemOverlay = (data: DetailedList): void => {
+ this.promptInput.updateTopBarButtonItemOverlay(data);
+ };
+
+ public closeTopBarButtonItemOverlay = (): void => {
+ this.promptInput.closeTopBarButtonItemOverlay();
+ };
+
+ public getPromptInputCursorPosition = (): number => {
+ return this.promptInput.getCursorPosition();
+ };
+
+ public destroy = (): void => {
+ if (this.observer != null) {
+ this.observer.disconnect();
+ this.observer = null;
+ }
+ };
+
+ public getCurrentTriggerSource(): 'top-bar' | 'prompt-input' {
+ return this.promptInput?.getCurrentTriggerSource?.() ?? 'prompt-input';
+ }
+
+ public setDragOverlayVisible(visible: boolean): void {
+ if (this.dragOverlayVisibility === visible) return;
+ this.dragOverlayVisibility = visible;
+ this.dragOverlayContent.style.display = visible ? 'flex' : 'none';
+ this.dragBlurOverlay.style.display = visible ? 'block' : 'none';
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-attachment.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-attachment.ts
new file mode 100644
index 0000000000..7e4ec8745d
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-attachment.ts
@@ -0,0 +1,71 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../../helper/dom';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { PromptAttachmentType } from '../../../static';
+import { PromptTextAttachment } from './prompt-text-attachment';
+
+export interface PromptAttachmentProps {
+ tabId: string;
+}
+
+export class PromptAttachment {
+ render: ExtendedHTMLElement;
+ lastAttachmentContent: string = '';
+ private readonly props: PromptAttachmentProps;
+ private attachmentItem: PromptTextAttachment | undefined;
+ constructor(props: PromptAttachmentProps) {
+ this.props = props;
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['outer-container'],
+ persistent: true,
+ });
+ }
+
+ public readonly updateAttachment = (attachmentContent: string | undefined, type?: PromptAttachmentType): void => {
+ if (this.attachmentItem !== undefined) {
+ this.attachmentItem.clear();
+ }
+ this.render.clear();
+ this.lastAttachmentContent =
+ attachmentContent != null
+ ? type === 'code'
+ ? `
+~~~~~~~~~~
+${attachmentContent}
+~~~~~~~~~~`
+ : `
+${attachmentContent}
+`
+ : '';
+ if (attachmentContent !== undefined && attachmentContent !== '') {
+ this.attachmentItem = new PromptTextAttachment({
+ tabId: this.props.tabId,
+ content: attachmentContent,
+ type: type ?? 'markdown',
+ });
+ this.render.insertChild('afterbegin', this.attachmentItem.render);
+ const isCodeOverflowVertically =
+ (this.render.getBoundingClientRect()?.height ?? 0) <
+ (this.render.getElementsByTagName('code')?.[0]?.getBoundingClientRect()?.height ?? 0);
+ if (isCodeOverflowVertically) {
+ this.render.children[0].classList.add('vertical-overflow');
+ }
+ }
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId)?.updateStore({
+ selectedCodeSnippet: attachmentContent,
+ });
+ };
+
+ public readonly clear = (): void => {
+ this.lastAttachmentContent = '';
+ if (this.attachmentItem !== undefined) {
+ this.attachmentItem.clear();
+ }
+ this.attachmentItem = undefined;
+ this.render.clear();
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId)?.updateStore({
+ selectedCodeSnippet: undefined,
+ });
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-input-send-button.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-input-send-button.ts
new file mode 100644
index 0000000000..0a94e8eb9c
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-input-send-button.ts
@@ -0,0 +1,48 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import testIds from '../../../helper/test-ids';
+import { Button } from '../../button';
+import { Icon, MynahIcons } from '../../icon';
+
+export interface SendButtonProps {
+ tabId: string;
+ onClick: () => void;
+}
+
+export class PromptInputSendButton {
+ render: ExtendedHTMLElement;
+ private readonly props: SendButtonProps;
+ constructor(props: SendButtonProps) {
+ this.props = props;
+
+ const initialDisabledState = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptInputDisabledState') as boolean;
+
+ this.render = new Button({
+ testId: testIds.prompt.send,
+ classNames: ['mynah-chat-prompt-button'],
+ attributes: {
+ ...(initialDisabledState ? { disabled: 'disabled' } : {}),
+ tabindex: '0',
+ },
+ icon: new Icon({ icon: MynahIcons.ENTER }).render,
+ primary: false,
+ border: false,
+ status: 'clear',
+ onClick: () => {
+ this.props.onClick();
+ },
+ }).render;
+
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .subscribe('promptInputDisabledState', (isDisabled: boolean) => {
+ if (isDisabled) {
+ this.render.setAttribute('disabled', 'disabled');
+ } else {
+ this.render.removeAttribute('disabled');
+ }
+ });
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-input-stop-button.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-input-stop-button.ts
new file mode 100644
index 0000000000..f724c6a602
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-input-stop-button.ts
@@ -0,0 +1,61 @@
+import { Config } from '../../../helper/config';
+import { ExtendedHTMLElement } from '../../../helper/dom';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import testIds from '../../../helper/test-ids';
+import { Button } from '../../button';
+import { Icon, MynahIcons } from '../../icon';
+import { OverlayHorizontalDirection } from '../../overlay';
+
+export interface PromptInputStopButtonPrompts {
+ tabId: string;
+ onClick: () => void;
+}
+
+export class PromptInputStopButton {
+ render: ExtendedHTMLElement;
+ private readonly props: PromptInputStopButtonPrompts;
+ constructor(props: PromptInputStopButtonPrompts) {
+ this.props = props;
+ const tabStore = MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId);
+
+ MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.props.tabId,
+ 'cancelButtonWhenLoading',
+ (isVisible) => {
+ this.checkVisibilityState(isVisible, tabStore.getValue('loadingChat'));
+ },
+ );
+ MynahUITabsStore.getInstance().addListenerToDataStore(this.props.tabId, 'loadingChat', (isLoading) => {
+ this.checkVisibilityState(tabStore.getValue('cancelButtonWhenLoading'), isLoading);
+ });
+
+ this.render = new Button({
+ testId: testIds.prompt.send,
+ classNames: ['mynah-chat-prompt-stop-button', 'hidden'],
+ attributes: {
+ tabindex: '0',
+ },
+ label: Config.getInstance().config.texts.stopGenerating,
+ icon: new Icon({ icon: MynahIcons.STOP }).render,
+ primary: false,
+ border: false,
+ tooltip:
+ Config.getInstance().config.texts.stopGeneratingTooltip ??
+ Config.getInstance().config.texts.stopGenerating,
+ tooltipHorizontalDirection: OverlayHorizontalDirection.END_TO_LEFT,
+ status: 'clear',
+ onClick: () => {
+ this.props.onClick();
+ },
+ }).render;
+ this.checkVisibilityState(tabStore.getValue('cancelButtonWhenLoading'), tabStore.getValue('loadingChat'));
+ }
+
+ private readonly checkVisibilityState = (isVisible: boolean, loadingState: boolean): void => {
+ if (isVisible && loadingState) {
+ this.render.removeClass('hidden');
+ } else {
+ this.render.addClass('hidden');
+ }
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-options.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-options.ts
new file mode 100644
index 0000000000..2da3a8f7da
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-options.ts
@@ -0,0 +1,83 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../../helper/dom';
+import { ChatItemButton, FilterOption } from '../../../static';
+import testIds from '../../../helper/test-ids';
+import { ChatItemFormItemsWrapper } from '../chat-item-form-items';
+import { Button } from '../../button';
+import { Icon } from '../../icon';
+import { OverlayHorizontalDirection, OverlayVerticalDirection } from '../../overlay';
+
+export interface PromptOptionsProps {
+ classNames?: string[];
+ filterOptions: FilterOption[];
+ buttons: ChatItemButton[];
+ onFiltersChange?: (filterFormData: Record, isValid: boolean) => void;
+ onButtonClick?: (buttonId: string) => void;
+}
+
+export class PromptOptions {
+ render: ExtendedHTMLElement;
+ private readonly props: PromptOptionsProps;
+ private formItemsWrapper: ChatItemFormItemsWrapper;
+ constructor(props: PromptOptionsProps) {
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.options,
+ classNames: ['mynah-prompt-input-options', ...(this.props.classNames ?? [])],
+ children: this.getFilterOptionsWrapper(),
+ });
+ }
+
+ private readonly getFilterOptionsWrapper = (): Array => {
+ let result: Array = [''];
+ if (this.props.filterOptions?.length > 0) {
+ this.formItemsWrapper = new ChatItemFormItemsWrapper({
+ tabId: '',
+ chatItem: {
+ formItems: this.props.filterOptions,
+ },
+ onFormChange: this.props.onFiltersChange,
+ });
+ result = [this.formItemsWrapper.render];
+ }
+ if (this.props.buttons?.length > 0) {
+ this.props.buttons.forEach((button: ChatItemButton) => {
+ result.push(
+ new Button({
+ onClick: () => {
+ this.props.onButtonClick?.(button.id);
+ },
+ border: false,
+ primary: false,
+ status: button.status,
+ label: button.text,
+ disabled: button.disabled,
+ tooltip: button.description,
+ fillState: 'always',
+ tooltipHorizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ tooltipVerticalDirection: OverlayVerticalDirection.TO_TOP,
+ ...(button.icon != null ? { icon: new Icon({ icon: button.icon }).render } : {}),
+ }).render,
+ );
+ });
+ }
+
+ return result; // [ '' ];
+ };
+
+ public readonly update = (filterOptions?: FilterOption[], buttons?: ChatItemButton[]): void => {
+ if (filterOptions != null) {
+ this.props.filterOptions = filterOptions;
+ }
+ if (buttons != null) {
+ this.props.buttons = buttons;
+ }
+ this.render.update({
+ children: this.getFilterOptionsWrapper(),
+ });
+ };
+
+ public readonly getOptionValues = (): Record>> => {
+ return this.formItemsWrapper?.getAllValues() ?? {};
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-progress.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-progress.ts
new file mode 100644
index 0000000000..5cb0d824e6
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-progress.ts
@@ -0,0 +1,49 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+import { cancelEvent, MynahUIGlobalEvents } from '../../../helper/events';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import testIds from '../../../helper/test-ids';
+import { MynahEventNames, ProgressField } from '../../../static';
+import { ProgressIndicator } from '../../progress';
+
+export interface PromptInputProgressProps {
+ tabId: string;
+}
+
+export class PromptInputProgress {
+ render: ExtendedHTMLElement;
+ private readonly progressIndicator: ProgressIndicator;
+ private progressData: ProgressField;
+ private readonly props: PromptInputProgressProps;
+ constructor(props: PromptInputProgressProps) {
+ this.props = props;
+ this.progressData =
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('promptInputProgress') ?? {};
+ this.progressIndicator = new ProgressIndicator({
+ testId: testIds.prompt.progress,
+ classNames: ['mynah-prompt-input-progress-field'],
+ ...this.progressData,
+ onActionClick: (action, e) => {
+ if (e != null) {
+ cancelEvent(e);
+ }
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.PROMPT_PROGRESS_ACTION_CLICK, {
+ tabId: this.props.tabId,
+ actionId: action.id,
+ actionText: action.text,
+ });
+ },
+ });
+ this.render = this.progressIndicator.render;
+
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .subscribe('promptInputProgress', (progressData) => {
+ this.progressData = progressData;
+ if (this.progressData === null) {
+ this.progressIndicator.update(null);
+ } else {
+ this.progressIndicator.update(this.progressData);
+ }
+ });
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-text-attachment.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-text-attachment.ts
new file mode 100644
index 0000000000..6f77d75625
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-text-attachment.ts
@@ -0,0 +1,107 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../../overlay';
+import { Icon, MynahIcons } from '../../icon';
+import { Button } from '../../button';
+import { MynahUIGlobalEvents, cancelEvent } from '../../../helper/events';
+import { MynahEventNames, PromptAttachmentType } from '../../../static';
+import { Card } from '../../card/card';
+import { CardBody } from '../../card/card-body';
+import { SyntaxHighlighter } from '../../syntax-highlighter';
+import testIds from '../../../helper/test-ids';
+
+export interface PromptTextAttachmentProps {
+ tabId: string;
+ content: string;
+ type: PromptAttachmentType;
+}
+
+export class PromptTextAttachment {
+ render: ExtendedHTMLElement;
+ private readonly props: PromptTextAttachmentProps;
+ private previewOverlay: Overlay | undefined;
+ constructor(props: PromptTextAttachmentProps) {
+ this.props = props;
+ this.render = new Card({
+ testId: testIds.prompt.attachment,
+ padding: 'none',
+ border: false,
+ events: {
+ mouseenter: () => {
+ this.showPreviewOverLay();
+ },
+ mouseleave: () => {
+ this.closePreviewOverLay();
+ },
+ },
+ classNames: ['mynah-prompt-attachment-container'],
+ children: [
+ new CardBody({
+ ...(this.props.type === 'markdown'
+ ? { body: this.props.content }
+ : {
+ children: [
+ new SyntaxHighlighter({
+ block: true,
+ codeStringWithMarkup: this.props.content,
+ }).render,
+ ],
+ }),
+ }).render,
+ new Button({
+ testId: testIds.prompt.attachmentRemove,
+ classNames: ['code-snippet-close-button'],
+ onClick: (e) => {
+ cancelEvent(e);
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.REMOVE_ATTACHMENT, this.props.tabId);
+ this.closePreviewOverLay();
+ },
+ icon: new Icon({ icon: MynahIcons.CANCEL }).render,
+ primary: false,
+ }).render,
+ ],
+ }).render;
+ }
+
+ private readonly showPreviewOverLay = (): void => {
+ this.previewOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: this.render,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ new Card({
+ border: false,
+ classNames: ['mynah-prompt-input-snippet-attachment-overlay'],
+ children: [
+ new CardBody({
+ ...(this.props.type === 'markdown'
+ ? { body: this.props.content }
+ : {
+ children: [
+ new SyntaxHighlighter({
+ block: true,
+ codeStringWithMarkup: this.props.content,
+ }).render,
+ ],
+ }),
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ };
+
+ private readonly closePreviewOverLay = (): void => {
+ if (this.previewOverlay !== undefined) {
+ this.previewOverlay.close();
+ this.previewOverlay = undefined;
+ }
+ };
+
+ public readonly clear = (): void => {
+ this.closePreviewOverLay();
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-text-input.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-text-input.ts
new file mode 100644
index 0000000000..cea69fe84d
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-text-input.ts
@@ -0,0 +1,773 @@
+import { Config } from '../../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../../helper/dom';
+import { MynahUIGlobalEvents } from '../../../helper/events';
+import { MynahUITabsStore } from '../../../helper/tabs-store';
+import { MynahEventNames, QuickActionCommand, QuickActionCommandGroup } from '../../../static';
+import { MAX_USER_INPUT } from '../chat-prompt-input';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../../overlay';
+import { Card } from '../../card/card';
+import { CardBody } from '../../card/card-body';
+import testIds from '../../../helper/test-ids';
+import { generateUID } from '../../../main';
+import { Icon, MynahIcons } from '../../icon';
+import { escapeHtml } from '../../../helper/sanitize';
+
+const PREVIEW_DELAY = 500;
+const IMAGE_CONTEXT_SELECT_KEYWORD = '@image:';
+export interface PromptTextInputProps {
+ tabId: string;
+ initMaxLength: number;
+ children?: ExtendedHTMLElement[];
+ onKeydown: (e: KeyboardEvent) => void;
+ onInput?: (e: KeyboardEvent) => void;
+ onFocus?: () => void;
+ onBlur?: () => void;
+}
+
+export class PromptTextInput {
+ render: ExtendedHTMLElement;
+ promptTextInputMaxLength: number;
+ private lastCursorIndex: number = 0;
+ private readonly props: PromptTextInputProps;
+ private readonly promptTextInput: ExtendedHTMLElement;
+ private promptInputOverlay: Overlay | null = null;
+ private keydownSupport: boolean = true;
+ private readonly selectedContext: Record = {};
+ private contextTooltip: Overlay | null;
+ private contextTooltipTimeout: ReturnType;
+ private mutationObserver: MutationObserver | null = null;
+
+ constructor(props: PromptTextInputProps) {
+ this.props = props;
+ this.promptTextInputMaxLength = props.initMaxLength;
+
+ const initialDisabledState = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptInputDisabledState') as boolean;
+
+ this.promptTextInput = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.input,
+ classNames: ['mynah-chat-prompt-input', 'empty'],
+ innerHTML: '',
+ attributes: {
+ contenteditable: 'plaintext-only',
+ ...(initialDisabledState ? { disabled: 'disabled' } : {}),
+ tabindex: '0',
+ rows: '1',
+ maxlength: MAX_USER_INPUT().toString(),
+ type: 'text',
+ placeholder: MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptInputPlaceholder'),
+ ...(Config.getInstance().config.autoFocus ? { autofocus: 'autofocus' } : {}),
+ },
+ events: {
+ keypress: (e: KeyboardEvent) => {
+ if (!this.keydownSupport) {
+ this.props.onKeydown(e);
+ }
+ },
+ keydown: (e: KeyboardEvent) => {
+ if (e.key !== '') {
+ this.keydownSupport = true;
+ this.props.onKeydown(e);
+ } else {
+ this.keydownSupport = false;
+ }
+ this.hideContextTooltip();
+ },
+ keyup: (e: KeyboardEvent) => {
+ this.lastCursorIndex = this.updateCursorPos();
+
+ // Check if image command exists in context commands to make the feature consistent
+ const contextCommands = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('contextCommands') as QuickActionCommandGroup[] | undefined;
+ const hasImageCommand = contextCommands?.some((group) =>
+ group.commands.some((cmd) => cmd.command.toLowerCase() === 'image'),
+ );
+
+ if (hasImageCommand ?? false) {
+ const text = this.promptTextInput.textContent ?? '';
+ if (text.includes(IMAGE_CONTEXT_SELECT_KEYWORD)) {
+ // Dispatch event to open file system
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.OPEN_FILE_SYSTEM, {
+ tabId: this.props.tabId,
+ type: 'image',
+ insertPosition: this.lastCursorIndex - IMAGE_CONTEXT_SELECT_KEYWORD.length,
+ });
+
+ // Remove the trigger text
+ const selection = window.getSelection();
+ if (selection?.rangeCount != null) {
+ const range = selection.getRangeAt(0);
+ const textNodes = Array.from(this.promptTextInput.childNodes).filter(
+ (node): node is Text => node.nodeType === Node.TEXT_NODE,
+ );
+
+ // Find the node containing "@image:"
+ for (const node of textNodes) {
+ const nodeText = node.textContent ?? '';
+ const imageTagIndex = nodeText.indexOf(IMAGE_CONTEXT_SELECT_KEYWORD);
+
+ if (imageTagIndex !== -1) {
+ // Create a range that selects "@image:"
+ range.setStart(node, imageTagIndex);
+ range.setEnd(node, imageTagIndex + IMAGE_CONTEXT_SELECT_KEYWORD.length);
+ range.deleteContents();
+ break;
+ }
+ }
+ }
+ }
+ }
+ },
+ input: (e: KeyboardEvent) => {
+ if (this.props.onInput !== undefined) {
+ this.props.onInput(e);
+ }
+ this.removeContextPlaceholderOverlay();
+ this.checkIsEmpty();
+ },
+ focus: () => {
+ if (typeof this.props.onFocus !== 'undefined') {
+ this.props.onFocus();
+ }
+ this.lastCursorIndex = this.updateCursorPos();
+ },
+ blur: () => {
+ if (typeof this.props.onBlur !== 'undefined') {
+ this.props.onBlur();
+ }
+ },
+ paste: (e: ClipboardEvent): void => {
+ // Prevent the default paste behavior
+ e.preventDefault();
+
+ // Get plain text from clipboard
+ const text = e.clipboardData?.getData('text/plain');
+ if (text != null) {
+ // Insert text at cursor position
+ const selection = window.getSelection();
+ if (selection?.rangeCount != null) {
+ const range = selection.getRangeAt(0);
+ range.deleteContents();
+ range.insertNode(document.createTextNode(text));
+
+ // Move cursor to end of inserted text
+ range.collapse(false);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ }
+
+ // Check if input is empty and trigger input event
+ this.checkIsEmpty();
+ if (this.props.onInput != null) {
+ this.props.onInput(new KeyboardEvent('input'));
+ }
+ }
+ },
+ },
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.inputWrapper,
+ classNames: ['mynah-chat-prompt-input-inner-wrapper', 'no-text'],
+ children: [...(this.props.children ?? []), this.promptTextInput],
+ });
+
+ // Set up MutationObserver to detect context span removals
+ this.setupContextRemovalObserver();
+
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .subscribe('promptInputDisabledState', (isDisabled: boolean) => {
+ if (isDisabled) {
+ this.promptTextInput.setAttribute('disabled', 'disabled');
+ this.promptTextInput.setAttribute('contenteditable', 'false');
+ this.promptTextInput.blur();
+ } else {
+ // Enable the input field and focus on it
+ this.promptTextInput.removeAttribute('disabled');
+ this.promptTextInput.setAttribute('contenteditable', 'plaintext-only');
+ if (Config.getInstance().config.autoFocus && document.hasFocus()) {
+ this.promptTextInput.focus();
+ }
+ }
+ });
+
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .subscribe('promptInputPlaceholder', (placeholderText: string) => {
+ if (placeholderText !== undefined) {
+ this.promptTextInput.update({
+ attributes: {
+ placeholder: placeholderText,
+ },
+ });
+ }
+ });
+
+ MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.ADD_CUSTOM_CONTEXT,
+ (data: { tabId: string; contextCommands: QuickActionCommand[]; insertPosition?: number }) => {
+ if (data.tabId === this.props.tabId) {
+ let insertPos = data.insertPosition ?? this.lastCursorIndex;
+ data.contextCommands.forEach((command) => {
+ this.insertContextItem(command, insertPos);
+ insertPos = this.getCursorPos();
+ });
+ this.focus();
+ }
+ },
+ );
+
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.TAB_FOCUS, (data) => {
+ if (data.tabId === this.props.tabId) {
+ this.promptTextInput.focus();
+ }
+ });
+
+ this.clear();
+ }
+
+ private readonly setupContextRemovalObserver = (): void => {
+ if (MutationObserver != null) {
+ this.mutationObserver = new MutationObserver((mutations) => {
+ let contextRemoved = false;
+ const removedContextIds: string[] = [];
+
+ mutations.forEach((mutation) => {
+ if (mutation.type === 'childList') {
+ mutation.removedNodes.forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ const element = node as Element;
+ if (element.classList.contains('context')) {
+ const contextId = element.getAttribute('context-tmp-id');
+ if (contextId != null && contextId !== '') {
+ removedContextIds.push(contextId);
+ contextRemoved = true;
+ }
+ }
+ // Also check for context spans within removed nodes
+ const contextSpans = element.querySelectorAll('.context');
+ contextSpans.forEach((span) => {
+ const contextId = span.getAttribute('context-tmp-id');
+ if (contextId != null && contextId !== '') {
+ removedContextIds.push(contextId);
+ contextRemoved = true;
+ }
+ });
+ }
+ });
+ }
+ });
+
+ if (contextRemoved) {
+ this.handleContextRemoval(removedContextIds);
+ }
+ });
+
+ this.mutationObserver.observe(this.promptTextInput, {
+ childList: true,
+ subtree: true,
+ });
+ }
+ };
+
+ private readonly handleContextRemoval = (removedContextIds: string[]): void => {
+ const currentCustomContext =
+ (MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('customContextCommand') as QuickActionCommand[]) ?? [];
+ const removedContexts: QuickActionCommand[] = [];
+
+ // Find the removed contexts from our selectedContext map
+ removedContextIds.forEach((contextId) => {
+ const removedContext = this.selectedContext[contextId];
+ if (removedContext != null) {
+ removedContexts.push(removedContext);
+ }
+ });
+
+ // Clean up the selectedContext map by creating a new object without the removed keys
+ const updatedSelectedContext = Object.fromEntries(
+ Object.entries(this.selectedContext).filter(([key]) => !removedContextIds.includes(key)),
+ );
+ Object.assign(this.selectedContext, updatedSelectedContext);
+
+ // Remove the contexts from the data store
+ if (removedContexts.length > 0) {
+ const updatedCustomContext = currentCustomContext.filter((context) => {
+ return !removedContexts.some(
+ (removed) =>
+ removed.command === context.command &&
+ removed.icon === context.icon &&
+ removed.description === context.description,
+ );
+ });
+
+ MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).updateStore({
+ customContextCommand: updatedCustomContext,
+ });
+ }
+ };
+
+ public readonly restoreRange = (range: Range): void => {
+ const selection = window.getSelection();
+ if (selection != null) {
+ selection.removeAllRanges();
+ selection.addRange(range);
+ this.updateCursorPos();
+ }
+ };
+
+ private readonly updateCursorPos = (): number => {
+ const selection = window.getSelection();
+ if (selection == null || selection.rangeCount === 0) return 0;
+
+ const range = selection.getRangeAt(0);
+ const container = this.promptTextInput;
+
+ // If the selection is not within our container, return 0
+ if (!container.contains(range.commonAncestorContainer)) return 0;
+
+ // Get the range from start of container to cursor position
+ const preCaretRange = range.cloneRange();
+ preCaretRange.selectNodeContents(container);
+ preCaretRange.setEnd(range.endContainer, range.endOffset);
+
+ return preCaretRange.toString().length;
+ };
+
+ private readonly checkIsEmpty = (): void => {
+ if (
+ this.promptTextInput.textContent === '' &&
+ this.promptTextInput.querySelectorAll('span.context').length === 0
+ ) {
+ this.promptTextInput.addClass('empty');
+ this.render.addClass('no-text');
+ } else {
+ this.promptTextInput.removeClass('empty');
+ this.render.removeClass('no-text');
+ }
+ };
+
+ private readonly removeContextPlaceholderOverlay = (): void => {
+ this.promptInputOverlay?.close();
+ this.promptInputOverlay?.render.remove();
+ this.promptInputOverlay = null;
+ };
+
+ private readonly insertElementToGivenPosition = (
+ element: HTMLElement | Text,
+ position: number,
+ endPosition?: number,
+ maintainCursor: boolean = false,
+ ): void => {
+ const selection = window.getSelection();
+ if (this.promptTextInput.childNodes.length === 0) {
+ this.promptTextInput.insertChild('beforeend', element as HTMLElement);
+
+ const spaceNode = document.createTextNode('\u00A0');
+ element.parentNode?.insertBefore(spaceNode, element.nextSibling);
+
+ if (!maintainCursor && selection != null) {
+ const range = document.createRange();
+ range.setStartAfter(spaceNode);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ this.lastCursorIndex = this.updateCursorPos();
+ }
+ return;
+ }
+
+ if (
+ selection == null ||
+ (selection.focusNode?.isSameNode(this.promptTextInput) === false &&
+ selection.focusNode?.parentElement?.isSameNode(this.promptTextInput) === false)
+ ) {
+ this.promptTextInput.insertChild('beforeend', element as HTMLElement);
+ return;
+ }
+
+ // Store original cursor position if we need to maintain it
+ const originalRange = maintainCursor ? selection.getRangeAt(0).cloneRange() : null;
+
+ const range = document.createRange();
+ let currentPos = 0;
+ let inserted = false;
+
+ // Find the correct text node and offset
+ for (const node of this.promptTextInput.childNodes) {
+ const length = node.textContent?.length ?? 0;
+
+ if (currentPos + length >= position) {
+ if (node.nodeType === Node.TEXT_NODE || node.nodeName === 'BR') {
+ const offset = Math.min(position - currentPos, length);
+ range.setStart(node, offset);
+
+ if (endPosition != null) {
+ let endNode = node;
+ let endOffset = Math.min(endPosition - currentPos, length);
+
+ if (endPosition > currentPos + length) {
+ let endPos = currentPos + length;
+ for (
+ let i = Array.from(this.promptTextInput.childNodes).indexOf(node) + 1;
+ i < this.promptTextInput.childNodes.length;
+ i++
+ ) {
+ const nextNode = this.promptTextInput.childNodes[i];
+ const nextLength = nextNode.textContent?.length ?? 0;
+
+ if (endPos + nextLength >= endPosition) {
+ endNode = nextNode;
+ endOffset = endPosition - endPos;
+ break;
+ }
+ endPos += nextLength;
+ }
+ }
+
+ range.setEnd(endNode, endOffset);
+ range.deleteContents();
+ }
+
+ range.insertNode(element);
+
+ if (endPosition != null) {
+ const spaceNode = document.createTextNode('\u00A0');
+ range.setStartAfter(element);
+ range.insertNode(spaceNode);
+ range.setStartAfter(spaceNode);
+ element = spaceNode;
+ } else {
+ range.setStartAfter(element);
+ }
+ inserted = true;
+ break;
+ }
+ }
+ currentPos += length;
+ }
+
+ // Fallback: if nothing was inserted, insert at the end
+ if (!inserted) {
+ this.promptTextInput.insertChild('beforeend', element as HTMLElement);
+ }
+
+ if (!maintainCursor) {
+ // Only modify cursor position if maintainCursor is false
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ // Update lastCursorIndex with new cursor position so getCursorPos is accurate
+ this.lastCursorIndex = this.updateCursorPos();
+ } else if (originalRange != null) {
+ // Restore original cursor position
+ selection.removeAllRanges();
+ selection.addRange(originalRange);
+ }
+ };
+
+ private readonly moveCursorToEnd = (): void => {
+ const range = document.createRange();
+ range.selectNodeContents(this.promptTextInput);
+ range.collapse(false);
+ const selection = window.getSelection();
+ if (selection != null) {
+ selection.removeAllRanges();
+ selection.addRange(range);
+ }
+ };
+
+ private readonly showContextTooltip = (e: MouseEvent, contextItem: QuickActionCommand): void => {
+ clearTimeout(this.contextTooltipTimeout);
+ this.contextTooltipTimeout = setTimeout(() => {
+ const elm: HTMLElement = e.target as HTMLElement;
+ this.contextTooltip = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.contextTooltip,
+ classNames: ['mynah-chat-prompt-context-tooltip'],
+ children: [
+ ...(contextItem.icon !== undefined
+ ? [
+ new Icon({
+ icon: contextItem.icon,
+ }).render,
+ ]
+ : []),
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-context-tooltip-container'],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-context-tooltip-name'],
+ children: [escapeHtml(contextItem.command)],
+ },
+ ...(contextItem.description !== undefined
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-context-tooltip-description'],
+ children: [escapeHtml(contextItem.description ?? '')],
+ },
+ ]
+ : []),
+ ],
+ },
+ ],
+ }),
+ ],
+ });
+ }, PREVIEW_DELAY);
+ };
+
+ private readonly hideContextTooltip = (): void => {
+ if (this.contextTooltipTimeout !== null) {
+ clearTimeout(this.contextTooltipTimeout);
+ }
+ if (this.contextTooltip != null) {
+ this.contextTooltip.close();
+ this.contextTooltip = null;
+ }
+ };
+
+ public readonly insertContextItem = (
+ contextItem: QuickActionCommand,
+ position: number,
+ topBarHidden?: boolean,
+ ): void => {
+ const temporaryId = generateUID();
+ this.selectedContext[temporaryId] = contextItem;
+ const contextSpanElement = DomBuilder.getInstance().build({
+ type: 'span',
+ children: [
+ ...(topBarHidden !== true
+ ? [new Icon({ icon: MynahIcons.PIN, classNames: ['hover-icon'] }).render]
+ : []),
+ new Icon({ icon: contextItem.icon ?? MynahIcons.AT }).render,
+ { type: 'span', classNames: ['at-char'], innerHTML: '@' },
+ escapeHtml(contextItem.command.replace(/^@?(.*)$/, '$1')),
+ ],
+ classNames: ['context', topBarHidden === true ? 'no-hover' : ''],
+ attributes: {
+ 'context-tmp-id': temporaryId,
+ contenteditable: 'false',
+ },
+ events: {
+ mouseenter: (e) => {
+ this.showContextTooltip(e, contextItem);
+ },
+ mouseleave: () => {
+ this.hideContextTooltip();
+ },
+ click: () => {
+ this.hideContextTooltip();
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CONTEXT_PINNED, {
+ tabId: this.props.tabId,
+ contextItem,
+ });
+ },
+ },
+ });
+ this.insertElementToGivenPosition(contextSpanElement, position, this.getCursorPos());
+
+ if (contextItem.placeholder != null) {
+ this.promptInputOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: true,
+ referenceElement: contextSpanElement ?? this.render,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ new Card({
+ border: false,
+ children: [
+ new CardBody({
+ body: contextItem.placeholder,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ }
+
+ this.checkIsEmpty();
+ };
+
+ public readonly getCursorPos = (): number => this.lastCursorIndex;
+
+ public readonly clear = (): void => {
+ this.promptTextInput.innerHTML = '';
+ const defaultPlaceholder = MynahUITabsStore.getInstance()
+ .getTabDataStore(this.props.tabId)
+ .getValue('promptInputPlaceholder');
+ this.updateTextInputPlaceholder(defaultPlaceholder);
+ this.removeContextPlaceholderOverlay();
+ this.checkIsEmpty();
+ };
+
+ public readonly focus = (): void => {
+ if (Config.getInstance().config.autoFocus) {
+ this.promptTextInput.focus();
+ }
+ this.moveCursorToEnd();
+ };
+
+ public readonly blur = (): void => {
+ this.promptTextInput.blur();
+ this.checkIsEmpty();
+ };
+
+ public readonly getTextInputValue = (withInputLineBreaks?: boolean): string => {
+ if (withInputLineBreaks === true) {
+ return (this.promptTextInput.innerText ?? '').trim();
+ }
+ return (this.promptTextInput.textContent ?? '').trim();
+ };
+
+ public readonly updateTextInputValue = (value: string): void => {
+ // Escape HTML to prevent XSS when setting text content
+ this.promptTextInput.innerText = escapeHtml(value);
+ this.checkIsEmpty();
+ };
+
+ public readonly insertEndSpace = (): void => {
+ this.promptTextInput.insertAdjacentHTML('beforeend', ' ');
+ };
+
+ public readonly updateTextInputMaxLength = (maxLength: number): void => {
+ this.promptTextInputMaxLength = maxLength;
+ this.promptTextInput.update({
+ attributes: {
+ maxlength: maxLength.toString(),
+ },
+ });
+ };
+
+ public readonly updateTextInputPlaceholder = (text: string): void => {
+ this.promptTextInput.update({
+ attributes: {
+ placeholder: text,
+ },
+ });
+ };
+
+ public readonly deleteTextRange = (position: number, endPosition: number): void => {
+ const selection = window.getSelection();
+ if (selection == null) return;
+
+ const range = document.createRange();
+ let currentPos = 0;
+ let startNode = null;
+ let startOffset = 0;
+ let endNode = null;
+ let endOffset = 0;
+
+ // Find start and end positions
+ for (const node of this.promptTextInput.childNodes) {
+ const length = node.textContent?.length ?? 0;
+
+ // Find start position
+ if (startNode == null && currentPos + length >= position) {
+ startNode = node;
+ startOffset = position - currentPos;
+ }
+
+ // Find end position
+ if (currentPos + length >= endPosition) {
+ endNode = node;
+ endOffset = endPosition - currentPos;
+ break;
+ }
+
+ currentPos += length;
+ }
+
+ // If we found both positions, delete the range
+ if (startNode != null && endNode != null) {
+ range.setStart(startNode, startOffset);
+ range.setEnd(endNode, endOffset);
+ range.deleteContents();
+ }
+
+ this.checkIsEmpty();
+ };
+
+ /**
+ * Returns the cursorLine, totalLines and if the cursor is at the beginning or end of the whole text
+ * @returns {cursorLine: number, totalLines: number, isAtTheBeginning: boolean, isAtTheEnd: boolean}
+ */
+ public readonly getCursorPosition = (): {
+ cursorLine: number;
+ totalLines: number;
+ isAtTheBeginning: boolean;
+ isAtTheEnd: boolean;
+ } => {
+ const lineHeight = parseFloat(
+ window.getComputedStyle(this.promptTextInput, null).getPropertyValue('line-height'),
+ );
+ let isAtTheBeginning = false;
+ let isAtTheEnd = false;
+ let cursorLine = -1;
+ const cursorElm = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['cursor'],
+ }) as HTMLSpanElement;
+ this.insertElementToGivenPosition(cursorElm, this.getCursorPos(), undefined, true);
+ cursorLine = Math.floor((cursorElm.offsetTop + cursorElm.offsetHeight) / lineHeight) ?? 0;
+ if (cursorLine <= 1 && (cursorElm?.offsetLeft ?? 0) === 0) {
+ isAtTheBeginning = true;
+ }
+
+ const eolElm = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['eol'],
+ }) as HTMLSpanElement;
+ this.promptTextInput.insertChild('beforeend', eolElm);
+ const totalLines = Math.floor((eolElm.offsetTop + eolElm.offsetHeight) / lineHeight) ?? 0;
+ if (cursorElm.offsetLeft === eolElm.offsetLeft && cursorElm.offsetTop === eolElm.offsetTop) {
+ isAtTheEnd = true;
+ }
+
+ cursorElm.remove();
+ eolElm.remove();
+
+ return {
+ cursorLine,
+ totalLines,
+ isAtTheBeginning,
+ isAtTheEnd,
+ };
+ };
+
+ public readonly getUsedContext = (): QuickActionCommand[] => {
+ return Array.from(this.promptTextInput.querySelectorAll('span.context')).map((context) => {
+ return this.selectedContext[context.getAttribute('context-tmp-id') ?? ''] ?? {};
+ });
+ };
+
+ public readonly destroy = (): void => {
+ if (this.mutationObserver != null) {
+ this.mutationObserver.disconnect();
+ this.mutationObserver = null;
+ }
+ };
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar.ts
new file mode 100644
index 0000000000..ce71e8c5c6
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar.ts
@@ -0,0 +1,446 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../../../helper/dom';
+import { MynahUIGlobalEvents } from '../../../../helper/events';
+import { convertQuickActionCommandGroupsToDetailedListGroups } from '../../../../helper/quick-pick-data-handler';
+import testIds from '../../../../helper/test-ids';
+import {
+ ChatItemButton,
+ DetailedList,
+ DetailedListItemGroup,
+ MynahEventNames,
+ QuickActionCommand,
+} from '../../../../static';
+import { Button } from '../../../button';
+import { DetailedListWrapper } from '../../../detailed-list/detailed-list';
+import { Icon, MynahIcons } from '../../../icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../../../overlay';
+import { TopBarButton } from './top-bar-button';
+
+const PREVIEW_DELAY = 500;
+
+export interface PromptTopBarProps {
+ classNames?: string[];
+ tabId: string;
+ contextItems?: QuickActionCommand[];
+ title?: string;
+
+ onTopBarTitleClick?: () => void;
+ onContextItemAdd?: (contextItems: QuickActionCommand) => void;
+ onContextItemRemove?: (contextItems: QuickActionCommand) => void;
+
+ topBarButton?: ChatItemButton;
+ onTopBarButtonClick?: (action: ChatItemButton) => void;
+}
+
+export class PromptTopBar {
+ render: ExtendedHTMLElement;
+ visibleCount: number;
+ overflowOverlay?: Overlay;
+ topBarButton: TopBarButton;
+ overflowListContainer: DetailedListWrapper;
+ private contextTooltip: Overlay | null;
+ private contextTooltipTimeout: ReturnType;
+ private readonly props: PromptTopBarProps;
+ private titleButton: Button;
+ private overflowButton: ExtendedHTMLElement;
+
+ constructor(props: PromptTopBarProps) {
+ this.props = props;
+ this.visibleCount = this.props.contextItems != null ? this.props.contextItems?.length : 0;
+
+ this.topBarButton = new TopBarButton({
+ topBarButton: this.props.topBarButton,
+ onTopBarButtonClick: this.props.onTopBarButtonClick,
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.topBar,
+ classNames: [
+ 'mynah-prompt-input-top-bar',
+ ...(this.props.classNames ?? []),
+ this.isHidden() ? 'hidden' : '',
+ ],
+ children: [
+ this.generateTitle(),
+ ...this.generateContextPills(),
+ this.generateOverflowPill(),
+ this.topBarButton.render,
+ ],
+ });
+
+ // Add resize observer to handle responsive behavior
+ this.setupResizeObserver();
+
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.CONTEXT_PINNED, (data) => {
+ if (data.tabId === props.tabId) {
+ this.addContextPill(data.contextItem);
+ }
+ });
+
+ // Use setTimeout to ensure the DOM is fully rendered before measuring
+ // TODO: Switch to an IntersectionObserver
+ setTimeout(() => {
+ this.recalculateVisibleItems();
+ }, 100);
+ }
+
+ update(newProps?: Partial): void {
+ if (newProps?.contextItems != null) {
+ this.props.contextItems = newProps.contextItems;
+ }
+ if (newProps?.title != null) {
+ this.props.title = newProps.title;
+ }
+
+ if (newProps?.topBarButton != null) {
+ this.topBarButton.update({ topBarButton: newProps.topBarButton });
+ }
+
+ this.render.update({
+ children: [
+ this.generateTitle(),
+ ...this.generateContextPills(),
+ this.generateOverflowPill(),
+ this.topBarButton.render,
+ ],
+ });
+
+ if (this.isHidden()) {
+ this.render.addClass('hidden');
+ } else {
+ this.render.removeClass('hidden');
+ }
+
+ if (newProps?.contextItems != null || newProps?.title != null) {
+ this.recalculateVisibleItems();
+ }
+ }
+
+ updateTopBarButtonOverlay(topBarButtonOverlay: DetailedList): void {
+ this.topBarButton.onTopBarButtonOverlayChanged(topBarButtonOverlay);
+ }
+
+ isHidden(): boolean {
+ return this.props.title == null || this.props.title.length === 0;
+ }
+
+ generateTitle(): ExtendedHTMLElement | string {
+ const { title } = this.props;
+ if (title == null) {
+ return '';
+ }
+ if (this.titleButton == null) {
+ this.titleButton = new Button({
+ onClick: () => {
+ this.props.onTopBarTitleClick?.();
+ },
+ primary: false,
+ status: 'clear',
+ border: false,
+ label: title,
+ hidden: title == null,
+ });
+ } else {
+ this.titleButton.updateLabel(title);
+ }
+ return this.titleButton.render;
+ }
+
+ getVisibleContextItems(): QuickActionCommand[] {
+ return this.props.contextItems?.slice(0, this.visibleCount) ?? [];
+ }
+
+ getOverflowContextItems(): QuickActionCommand[] {
+ return this.props.contextItems?.slice(this.visibleCount) ?? [];
+ }
+
+ generateContextPills(): Array {
+ if (this.props.contextItems != null && this.props.contextItems?.length > 0) {
+ return this.getVisibleContextItems().map((contextItem) => {
+ return DomBuilder.getInstance().build({
+ type: 'span',
+ testId: testIds.prompt.topBarContextPill,
+ children: [
+ new Icon({ icon: MynahIcons.CANCEL, classNames: ['hover-icon'] }).render,
+ new Icon({ icon: contextItem.icon ?? MynahIcons.AT }).render,
+ {
+ type: 'span',
+ classNames: ['label'],
+ children: [`${contextItem.command.replace(/^@?(.*)$/, '$1')}`],
+ },
+ ],
+ classNames: ['pinned-context-pill'],
+ attributes: {
+ contenteditable: 'false',
+ },
+ events: {
+ mouseenter: (e) => {
+ this.showContextTooltip(e, contextItem);
+ },
+ mouseleave: (e) => {
+ this.hideContextTooltip();
+ },
+ click: (e) => {
+ this.hideContextTooltip();
+ this.removeContextPill(contextItem.id ?? contextItem.command);
+ },
+ },
+ });
+ });
+ }
+ return [];
+ }
+
+ private readonly showContextTooltip = (e: MouseEvent, contextItem: QuickActionCommand): void => {
+ clearTimeout(this.contextTooltipTimeout);
+ this.contextTooltipTimeout = setTimeout(() => {
+ const elm: HTMLElement = e.target as HTMLElement;
+
+ this.contextTooltip = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.topBarContextTooltip,
+ classNames: ['mynah-chat-prompt-context-tooltip'],
+ children: [
+ ...(contextItem.icon !== undefined
+ ? [
+ new Icon({
+ icon: contextItem.icon,
+ }).render,
+ ]
+ : []),
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-context-tooltip-container'],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-context-tooltip-name'],
+ children: [contextItem.command],
+ },
+ ...(contextItem.description !== undefined
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-chat-prompt-context-tooltip-description'],
+ children: [contextItem.description],
+ },
+ ]
+ : []),
+ ],
+ },
+ ],
+ }),
+ ],
+ });
+ }, PREVIEW_DELAY);
+ };
+
+ private readonly hideContextTooltip = (): void => {
+ if (this.contextTooltipTimeout !== null) {
+ clearTimeout(this.contextTooltipTimeout);
+ }
+ if (this.contextTooltip != null) {
+ this.contextTooltip.close();
+ this.contextTooltip = null;
+ }
+ };
+
+ removeContextPill(id: string): void {
+ const itemToRemove = this.props.contextItems?.find((item) => (item.id ?? item.command) === id);
+ if (itemToRemove != null) {
+ this.props.contextItems = this.props.contextItems?.filter((item) => (item.id ?? item.command) !== id);
+ this.props.onContextItemRemove?.(itemToRemove);
+ this.update();
+ this.recalculateVisibleItems();
+ this.overflowOverlay?.updateContent([this.generateOverflowOverlayChildren()]);
+ }
+ }
+
+ addContextPill(contextItem: QuickActionCommand): void {
+ if (this.props.contextItems?.find(({ id }) => id != null && id === contextItem.id) == null) {
+ this.props.contextItems?.push(contextItem);
+ this.props.onContextItemAdd?.(contextItem);
+ this.update();
+ this.recalculateVisibleItems();
+ }
+ }
+
+ getOverflowCount(): number {
+ return (this.props.contextItems?.length ?? 0) - this.visibleCount;
+ }
+
+ generateOverflowPill(): ExtendedHTMLElement | string {
+ if (this.getOverflowCount() <= 0) {
+ return '';
+ }
+ if (this.overflowButton == null) {
+ this.overflowButton = DomBuilder.getInstance().build({
+ type: 'span',
+ testId: testIds.prompt.topBarOverflowPill,
+ children: [`+${this.getOverflowCount()}`],
+ classNames: ['pinned-context-pill', 'overflow-button'],
+ attributes: {
+ contenteditable: 'false',
+ },
+ events: {
+ click: (e: Event) => {
+ this.showOverflowOverlay(e);
+ },
+ },
+ });
+ } else {
+ this.overflowButton.update({
+ children: [`+${this.getOverflowCount()}`],
+ });
+ }
+
+ return this.overflowButton;
+ }
+
+ showOverflowOverlay(e: Event): void {
+ if (this.overflowOverlay == null) {
+ this.overflowOverlay = new Overlay({
+ testId: testIds.prompt.topBarOverflowOverlay,
+ background: true,
+ closeOnOutsideClick: true,
+ referenceElement: this.overflowButton,
+ removeIfReferenceElementRemoved: false,
+ dimOutside: false,
+ onClose: () => {
+ this.overflowOverlay = undefined;
+ },
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.END_TO_LEFT,
+ children: [this.generateOverflowOverlayChildren()],
+ });
+ } else {
+ this.overflowOverlay.updateContent([this.generateOverflowOverlayChildren()]);
+ }
+ }
+
+ generateOverflowOverlayChildren(): ExtendedHTMLElement {
+ const overflowItems = this.getOverflowItemsAsDetailedListGroup();
+ if (this.overflowListContainer == null) {
+ this.overflowListContainer = new DetailedListWrapper({
+ detailedList: { list: overflowItems, selectable: 'clickable' },
+ onItemActionClick: (_, item) => {
+ const itemId = item?.id ?? item?.title;
+ if (itemId != null) {
+ this.removeContextPill(itemId);
+ }
+ },
+ onItemClick: (item) => {
+ const itemId = item.id ?? item.title;
+ if (itemId != null) {
+ this.removeContextPill(itemId);
+ }
+ },
+ });
+ } else {
+ if (overflowItems.length === 0 || overflowItems[0].children?.length === 0) {
+ this.overflowOverlay?.close();
+ } else {
+ this.overflowListContainer.update({ list: overflowItems });
+ }
+ }
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-prompt-quick-picks-overlay-wrapper'],
+ children: [this.overflowListContainer.render],
+ });
+ }
+
+ getOverflowItemsAsDetailedListGroup(): DetailedListItemGroup[] {
+ return convertQuickActionCommandGroupsToDetailedListGroups([{ commands: this.getOverflowContextItems() }]).map(
+ (group) => ({
+ ...group,
+ children: group.children?.map((child) => ({
+ ...child,
+ actions: [{ icon: MynahIcons.CANCEL, id: 'remove' }],
+ })),
+ }),
+ );
+ }
+
+ private setupResizeObserver(): void {
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.ROOT_RESIZE, () => {
+ this.recalculateVisibleItems();
+ });
+ }
+
+ // Sets visibleContextItems based on container width. Pills that don't fit will be moved into context overflow.
+ // As width increases, move items back from context overflow into row of displayed pills.
+ private recalculateVisibleItems(): void {
+ const { contextItems } = this.props;
+ if (contextItems == null || contextItems.length === 0) return;
+
+ const containerWidth = this.render.offsetWidth;
+ const titleWidth = this.titleButton != null ? this.titleButton.render.offsetWidth + 8 : 0; // 8px for margin/padding
+ const topBarButtonWidth = this.topBarButton != null ? this.topBarButton.render.offsetWidth + 8 : 0;
+
+ // Available width for context pills
+ const availableWidth = containerWidth - titleWidth - topBarButtonWidth - 16; // 16px for container padding
+
+ // Check if we need to handle width increase scenario
+ const shouldCheckForExpansion = this.getOverflowCount() > 0;
+ if (shouldCheckForExpansion) {
+ // Try to add one more item from overflow if we have at least 100px of extra space
+ const extraSpaceNeeded = 100; // Maximum width for a pill to be brought back
+
+ // Calculate current used width
+ let currentUsedWidth = 0;
+ const currentPills = Array.from(this.render.querySelectorAll('.pinned-context-pill'));
+ currentPills.forEach((pill) => {
+ currentUsedWidth += (pill as HTMLElement).offsetWidth + 8; // 8px for gap
+ });
+
+ // Check if we have enough space to bring back an item from overflow
+ const remainingWidth = availableWidth - currentUsedWidth;
+ if (remainingWidth >= extraSpaceNeeded && this.getOverflowCount() > 0) {
+ // We have enough space to bring back at least one item
+ this.visibleCount++;
+
+ // Rebuild the component with the new visible items
+ this.update();
+ return; // Exit early as we've updated the component
+ }
+ }
+
+ // Handle width decrease scenario
+ // Get all context pills
+ const contextPills = Array.from(this.render.querySelectorAll('.pinned-context-pill:not(.overflow-button)'));
+
+ // Calculate how many pills can fit
+ let usedWidth = 0;
+ let visibleCount = 0;
+
+ for (let i = 0; i < contextPills.length; i++) {
+ const pill = contextPills[i] as HTMLElement;
+ usedWidth += pill.offsetWidth + 8; // 8px for gap
+
+ if (usedWidth > availableWidth) {
+ break;
+ }
+
+ visibleCount++;
+ }
+ // If we need to adjust the visible items
+ if (this.visibleCount !== visibleCount) {
+ this.visibleCount = visibleCount;
+
+ // Rebuild the component with the new visible items
+
+ this.update();
+ }
+ }
+}
diff --git a/mynah-ui/src/components/chat-item/prompt-input/prompt-top-bar/top-bar-button.ts b/mynah-ui/src/components/chat-item/prompt-input/prompt-top-bar/top-bar-button.ts
new file mode 100644
index 0000000000..1a64e74c36
--- /dev/null
+++ b/mynah-ui/src/components/chat-item/prompt-input/prompt-top-bar/top-bar-button.ts
@@ -0,0 +1,137 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../../../helper/dom';
+import testIds from '../../../../helper/test-ids';
+import { DetailedList, DetailedListItem, ChatItemButton } from '../../../../static';
+import { Button } from '../../../button';
+import { DetailedListWrapper } from '../../../detailed-list/detailed-list';
+import { Icon } from '../../../icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../../../overlay';
+
+export interface TopBarButtonOverlayProps {
+ tabId: string;
+ topBarButtonOverlay: DetailedList;
+ events?: {
+ onKeyPress?: (e: KeyboardEvent) => void;
+ onGroupClick?: (groupName: string) => void;
+ onItemClick?: (detailedListItem: DetailedListItem) => void;
+ onClose?: () => void;
+ };
+}
+
+export interface TopBarButtonProps {
+ topBarButton?: ChatItemButton;
+ onTopBarButtonClick?: (action: ChatItemButton) => void;
+}
+
+export class TopBarButton {
+ render: ExtendedHTMLElement;
+ private readonly props: TopBarButtonProps;
+ private overlay?: Overlay;
+ private checklistSelectorContainer: DetailedListWrapper;
+ private overlayData: TopBarButtonOverlayProps;
+ private topBarButton: Button;
+ private keyPressHandler: (e: KeyboardEvent) => void;
+
+ constructor(props: TopBarButtonProps) {
+ this.props = props;
+
+ this.render = DomBuilder.getInstance().build({
+ testId: testIds.prompt.topBarButton,
+ type: 'span',
+ children: this.getTopBarButtonChildren(),
+ classNames: ['top-bar-button'],
+ attributes: {
+ contenteditable: 'false',
+ },
+ });
+ }
+
+ update(newProps: TopBarButtonProps): void {
+ if (newProps.topBarButton != null) {
+ this.props.topBarButton = newProps.topBarButton;
+ }
+ this.render.update({
+ children: this.getTopBarButtonChildren(),
+ });
+ }
+
+ closeOverlay(): void {
+ this.overlay?.close();
+ }
+
+ showOverlay(topBarButtonOverlay: TopBarButtonOverlayProps): void {
+ this.overlayData = topBarButtonOverlay;
+
+ if (this.overlay == null) {
+ this.keyPressHandler = (e: KeyboardEvent): void => {
+ this.overlayData.events?.onKeyPress?.(e);
+ };
+
+ this.overlay = new Overlay({
+ testId: testIds.prompt.topBarActionOverlay,
+ background: true,
+ closeOnOutsideClick: true,
+ referenceElement: this.topBarButton.render,
+ dimOutside: false,
+ onClose: () => {
+ this.overlay = undefined;
+ this.overlayData.events?.onClose?.();
+ window.removeEventListener('keydown', this.keyPressHandler);
+ },
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.END_TO_LEFT,
+ children: [this.getItemGroups()],
+ });
+ window.addEventListener('keydown', this.keyPressHandler);
+ } else {
+ this.overlay.updateContent([this.getItemGroups()]);
+ }
+ }
+
+ getTopBarButtonChildren(): Array {
+ this.topBarButton = new Button({
+ onClick: () => {
+ if (this.props.topBarButton != null) this.props.onTopBarButtonClick?.(this.props.topBarButton);
+ },
+ primary: false,
+ status: 'clear',
+ border: false,
+ icon: this.props.topBarButton?.icon ? new Icon({ icon: this.props.topBarButton.icon }).render : undefined,
+ label: this.props.topBarButton?.text ?? '',
+ hidden: this.props.topBarButton == null,
+ });
+
+ return [this.topBarButton.render];
+ }
+
+ private readonly getItemGroups = (): ExtendedHTMLElement => {
+ if (this.checklistSelectorContainer == null) {
+ this.checklistSelectorContainer = new DetailedListWrapper({
+ detailedList: this.overlayData.topBarButtonOverlay,
+ onGroupClick: this.overlayData.events?.onGroupClick,
+ onGroupActionClick: (_, groupName) => {
+ if (groupName != null) this.overlayData.events?.onGroupClick?.(groupName);
+ },
+ onItemClick: this.overlayData.events?.onItemClick,
+ onItemActionClick: (_, detailedListItem) => {
+ if (detailedListItem != null) this.overlayData.events?.onItemClick?.(detailedListItem);
+ },
+ });
+ } else {
+ this.checklistSelectorContainer?.update(this.overlayData.topBarButtonOverlay, true);
+ }
+
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-chat-prompt-quick-picks-overlay-wrapper'],
+ children: [this.checklistSelectorContainer.render],
+ });
+ };
+
+ onTopBarButtonOverlayChanged(topBarButtonOverlay: DetailedList): void {
+ this.overlayData.topBarButtonOverlay = topBarButtonOverlay;
+ if (this.overlay != null) {
+ this.overlay.updateContent([this.getItemGroups()]);
+ }
+ }
+}
diff --git a/mynah-ui/src/components/collapsible-content.ts b/mynah-ui/src/components/collapsible-content.ts
new file mode 100644
index 0000000000..611d1d0a67
--- /dev/null
+++ b/mynah-ui/src/components/collapsible-content.ts
@@ -0,0 +1,93 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// eslint-disable @typescript-eslint/restrict-template-expressions
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../helper/dom';
+import { generateUID } from '../helper/guid';
+import { StyleLoader } from '../helper/style-loader';
+import { Icon, MynahIcons } from './icon';
+
+interface CollapsibleContentProps {
+ title: string | ExtendedHTMLElement | HTMLElement | DomBuilderObject;
+ testId?: string;
+ children: Array;
+ classNames?: string[];
+ initialCollapsedState?: boolean;
+ onCollapseStateChange?: (collapsed: boolean) => void;
+}
+export class CollapsibleContent {
+ render: ExtendedHTMLElement;
+ private readonly props: Required;
+ private readonly uid: string;
+ private icon: ExtendedHTMLElement;
+ constructor(props: CollapsibleContentProps) {
+ StyleLoader.getInstance().load('components/_collapsible-content.scss');
+ this.uid = generateUID();
+ this.props = {
+ initialCollapsedState: true,
+ onCollapseStateChange: () => {},
+ testId: 'mynah-ui-collapsible-content',
+ classNames: [],
+ ...props,
+ };
+ this.icon = new Icon({
+ icon: this.props.initialCollapsedState ? MynahIcons.RIGHT_OPEN : MynahIcons.DOWN_OPEN,
+ }).render;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: this.props.testId,
+ classNames: ['mynah-collapsible-content-wrapper', ...this.props.classNames],
+ children: [
+ {
+ type: 'input',
+ classNames: ['mynah-collapsible-content-checkbox'],
+ attributes: {
+ type: 'checkbox',
+ name: this.uid,
+ id: this.uid,
+ ...(this.props.initialCollapsedState ? { checked: 'checked' } : {}),
+ },
+ events: {
+ change: (e) => {
+ const val = e.currentTarget.checked;
+ const newIcon = new Icon({
+ icon: val === true ? MynahIcons.RIGHT_OPEN : MynahIcons.DOWN_OPEN,
+ }).render;
+ this.icon.replaceWith(newIcon);
+ this.icon = newIcon;
+ this.props.onCollapseStateChange(val);
+ },
+ },
+ },
+ {
+ type: 'label',
+ classNames: ['mynah-collapsible-content-label'],
+ attributes: {
+ for: this.uid,
+ },
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-collapsible-content-label-title-wrapper'],
+ children: [
+ this.icon,
+ {
+ type: 'span',
+ classNames: ['mynah-collapsible-content-label-title-text'],
+ children: [this.props.title],
+ },
+ ],
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-collapsible-content-label-content-wrapper'],
+ children: this.props.children,
+ },
+ ],
+ },
+ ],
+ });
+ }
+}
diff --git a/mynah-ui/src/components/detailed-list/detailed-list-item.ts b/mynah-ui/src/components/detailed-list/detailed-list-item.ts
new file mode 100644
index 0000000000..28cbd9a0e4
--- /dev/null
+++ b/mynah-ui/src/components/detailed-list/detailed-list-item.ts
@@ -0,0 +1,292 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import testIds from '../../helper/test-ids';
+import { ChatItemButton, DetailedListItem } from '../../static';
+import { Button } from '../button';
+import { Icon, MynahIcons } from '../icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+import { parseMarkdown } from '../../helper/marked';
+import { Card } from '../card/card';
+import { CardBody } from '../card/card-body';
+
+const TOOLTIP_DELAY = 350;
+
+export interface DetailedListItemWrapperProps {
+ listItem: DetailedListItem;
+ descriptionTextDirection?: 'ltr' | 'rtl';
+ onSelect?: (detailedListItem: DetailedListItem) => void;
+ onClick?: (detailedListItem: DetailedListItem) => void;
+ onActionClick?: (action: ChatItemButton, detailedListItem?: DetailedListItem) => void;
+ onShowActionMenuOverlay?: () => void;
+ selectable?: boolean;
+ clickable?: boolean;
+ textDirection?: 'row' | 'column';
+}
+
+export class DetailedListItemWrapper {
+ render: ExtendedHTMLElement;
+ private tooltipOverlay: Overlay | null;
+ private tooltipTimeout: ReturnType;
+ private readonly props: DetailedListItemWrapperProps;
+ private actionMenuOverlay: Overlay | undefined;
+
+ constructor(props: DetailedListItemWrapperProps) {
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.quickPickItem,
+ classNames: ['mynah-detailed-list-item'],
+ attributes: {
+ disabled: this.props.listItem.disabled ?? 'false',
+ selectable: this.props.selectable ?? 'true',
+ clickable: this.props.clickable ?? 'false',
+ },
+ events: {
+ // Prevent mousedown from stealing focus from the input
+ mousedown: (e) => {
+ cancelEvent(e);
+ },
+ click: (e) => {
+ cancelEvent(e);
+ if (this.props.listItem.disabled !== true && this.props.selectable !== false) {
+ this.props.onSelect?.(this.props.listItem);
+ }
+ if (this.props.listItem.disabled !== true && this.props.clickable !== false) {
+ this.props.onClick?.(this.props.listItem);
+ }
+ },
+ },
+ children: [
+ ...(this.props.listItem.icon != null
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-detailed-list-icon'],
+ children: [
+ new Icon({
+ icon: this.props.listItem.icon,
+ status: this.props.listItem.iconForegroundStatus,
+ }).render,
+ ],
+ },
+ ]
+ : []),
+ {
+ type: 'div',
+ classNames: [
+ 'mynah-detailed-list-item-text',
+ 'mynah-detailed-list-item-text-direction-' + (this.props.textDirection ?? 'row'),
+ ],
+ children: [
+ ...(this.props.listItem.title != null || this.props.listItem.name != null
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-name'],
+ innerHTML: this.props.listItem.title ?? this.props.listItem.name,
+ },
+ ]
+ : []),
+ ...(this.props.listItem.description != null
+ ? [
+ {
+ type: 'div',
+ classNames: [
+ 'mynah-detailed-list-item-description',
+ this.props.descriptionTextDirection ?? 'ltr',
+ ],
+ innerHTML: `${parseMarkdown(this.props.listItem.description.replace(/ /g, ' ').replace(/\n\s*\n/g, ' '), { includeLineBreaks: false, inline: true })} `,
+ },
+ ]
+ : []),
+ ],
+ },
+ ...(this.props.listItem.children != null && this.props.listItem.children.length > 0
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-arrow-icon'],
+ children: [new Icon({ icon: 'right-open' }).render],
+ },
+ ]
+ : []),
+ ...(this.props.listItem.status != null
+ ? [
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: [
+ 'mynah-detailed-list-item-status',
+ `status-${this.props.listItem.status.status ?? 'default'}`,
+ ],
+ children: [
+ ...(this.props.listItem.status.text != null
+ ? [{ type: 'span', children: [this.props.listItem.status.text] }]
+ : []),
+ ...(this.props.listItem.status.icon != null
+ ? [new Icon({ icon: this.props.listItem.status.icon }).render]
+ : []),
+ ],
+ ...(this.props.listItem.status.description != null
+ ? {
+ events: {
+ mouseover: (e) => {
+ cancelEvent(e);
+ this.showTooltip(
+ e.currentTarget,
+ parseMarkdown(this.props.listItem.status?.description ?? '', {
+ includeLineBreaks: true,
+ }),
+ );
+ },
+ mouseleave: this.hideTooltip,
+ },
+ }
+ : {}),
+ }),
+ ]
+ : []),
+ ...(this.props.listItem.actions != null
+ ? this.props.listItem.groupActions !== false && this.props.listItem.actions.length > 1
+ ? [
+ {
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-actions'],
+ children: [
+ new Button({
+ testId: testIds.detailedList.actionMenu,
+ icon: new Icon({ icon: MynahIcons.ELLIPSIS }).render,
+ primary: false,
+ onClick: (e) => {
+ cancelEvent(e);
+ this.showActionMenuOverlay(this.props.listItem);
+ },
+ }).render,
+ ],
+ },
+ ]
+ : [
+ {
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-actions'],
+ children: this.props.listItem.actions.map((action) =>
+ this.getActionButton(
+ action,
+ this.props.listItem.groupActions === false,
+ this.props.listItem,
+ ),
+ ),
+ },
+ ]
+ : []),
+ ],
+ });
+ }
+
+ private readonly showTooltip = (elm: HTMLElement, content: string): void => {
+ if (content.trim() !== undefined) {
+ clearTimeout(this.tooltipTimeout);
+ this.tooltipTimeout = setTimeout(() => {
+ this.tooltipOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: false,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.CENTER,
+ children: [
+ new Card({
+ border: false,
+ children: [
+ new CardBody({
+ body: content,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ }, TOOLTIP_DELAY);
+ }
+ };
+
+ public readonly hideTooltip = (): void => {
+ clearTimeout(this.tooltipTimeout);
+ if (this.tooltipOverlay !== null) {
+ this.tooltipOverlay?.close();
+ this.tooltipOverlay = null;
+ }
+ };
+
+ public readonly setFocus = (isFocused: boolean, scrollIntoView: boolean): void => {
+ if (isFocused) {
+ this.render.addClass('target-command');
+ if (scrollIntoView) {
+ this.render.scrollIntoView(true);
+ }
+ } else {
+ this.render.removeClass('target-command');
+ }
+ };
+
+ public readonly getItem = (): DetailedListItem => {
+ return this.props.listItem;
+ };
+
+ private readonly showActionMenuOverlay = (listItem?: DetailedListItem): void => {
+ this.props.onShowActionMenuOverlay?.();
+ this.actionMenuOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: true,
+ referenceElement: this.render,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.CENTER,
+ horizontalDirection: OverlayHorizontalDirection.END_TO_LEFT,
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-actions-overlay'],
+ children: this.props.listItem.actions?.map((action) =>
+ this.getActionButton(action, true, listItem),
+ ),
+ },
+ ],
+ });
+ };
+
+ private getActionButton(
+ action: ChatItemButton,
+ showText?: boolean,
+ listItem?: DetailedListItem,
+ ): ExtendedHTMLElement {
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-actions-item'],
+ children: [
+ new Button({
+ testId: testIds.detailedList.action,
+ icon: action.icon ? new Icon({ icon: action.icon }).render : undefined,
+ ...(showText === true ? { label: action.text } : {}),
+ tooltip: action.description,
+ disabled: action.disabled,
+ primary: false,
+ border: false,
+ confirmation: action.confirmation,
+ status: action.status,
+ onClick: (e) => {
+ cancelEvent(e);
+ this.props.onActionClick?.(action, listItem);
+ this.hideActionMenuOverlay();
+ },
+ }).render,
+ ],
+ });
+ }
+
+ private readonly hideActionMenuOverlay = (): void => {
+ if (this.actionMenuOverlay !== undefined) {
+ this.actionMenuOverlay.close();
+ this.actionMenuOverlay = undefined;
+ }
+ };
+}
diff --git a/mynah-ui/src/components/detailed-list/detailed-list-sheet.ts b/mynah-ui/src/components/detailed-list/detailed-list-sheet.ts
new file mode 100644
index 0000000000..23f49c4f4e
--- /dev/null
+++ b/mynah-ui/src/components/detailed-list/detailed-list-sheet.ts
@@ -0,0 +1,85 @@
+import { MynahUIGlobalEvents } from '../../helper/events';
+import { ChatItemButton, DetailedList, DetailedListItem, MynahEventNames } from '../../static';
+import { SheetProps } from '../sheet';
+import { DetailedListWrapper } from './detailed-list';
+
+export interface DetailedListSheetProps {
+ tabId?: string; // TODO: remove this in new major version, still here for backwards compatibility
+ detailedList: DetailedList;
+ events?: {
+ onFilterValueChange?: (filterValues: Record, isValid: boolean) => void;
+ onKeyPress?: (e: KeyboardEvent) => void;
+ onItemSelect?: (detailedListItem: DetailedListItem) => void;
+ onItemClick?: (detailedListItem: DetailedListItem) => void;
+ onBackClick?: () => void;
+ onTitleActionClick?: (action: ChatItemButton) => void;
+ onActionClick?: (action: ChatItemButton, listItem?: DetailedListItem) => void;
+ onFilterActionClick?: (action: ChatItemButton, filterValues?: Record, isValid?: boolean) => void;
+ onClose?: () => void;
+ };
+}
+
+export class DetailedListSheet {
+ props: DetailedListSheetProps;
+ detailedListWrapper: DetailedListWrapper;
+ private readonly keyPressHandler: (e: KeyboardEvent) => void;
+
+ constructor(props: DetailedListSheetProps) {
+ this.props = props;
+ // To prevent the header from being shown in the detailed list wrapper
+ const detailedListCopy: DetailedList = { ...props.detailedList, header: undefined };
+ this.detailedListWrapper = new DetailedListWrapper({
+ detailedList: detailedListCopy,
+ onFilterValueChange: props.events?.onFilterValueChange,
+ onItemSelect: props.events?.onItemSelect,
+ onItemClick: props.events?.onItemClick,
+ onItemActionClick: props.events?.onActionClick,
+ onFilterActionClick: props.events?.onFilterActionClick,
+ });
+ this.keyPressHandler = (e: KeyboardEvent) => {
+ this.props.events?.onKeyPress?.(e);
+ };
+ }
+
+ open = (showBackButton?: boolean): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.OPEN_SHEET, {
+ fullScreen: true,
+ title: this.props.detailedList.header?.title,
+ description: this.props.detailedList.header?.description,
+ status: this.props.detailedList.header?.status,
+ actions: this.props.detailedList.header?.actions,
+ children: [this.detailedListWrapper.render],
+ showBackButton,
+ onClose: () => {
+ this.props.events?.onClose?.();
+ window.removeEventListener('keydown', this.keyPressHandler);
+ },
+ onActionClick: (action: ChatItemButton) => {
+ this.props.events?.onTitleActionClick?.(action);
+ },
+ onBack: () => {
+ this.props.events?.onBackClick?.();
+ },
+ } satisfies Partial);
+
+ window.addEventListener('keydown', this.keyPressHandler);
+ };
+
+ update = (detailedList: DetailedList, showBackButton?: boolean): void => {
+ this.props.detailedList = { ...this.props.detailedList, ...detailedList };
+ if (detailedList.header != null) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.UPDATE_SHEET, {
+ title: this.props.detailedList.header?.title,
+ description: this.props.detailedList.header?.description,
+ status: this.props.detailedList.header?.status,
+ showBackButton,
+ actions: this.props.detailedList.header?.actions,
+ } satisfies Partial);
+ }
+ this.detailedListWrapper.update({ ...this.props.detailedList, header: undefined });
+ };
+
+ close = (): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CLOSE_SHEET);
+ };
+}
diff --git a/mynah-ui/src/components/detailed-list/detailed-list.ts b/mynah-ui/src/components/detailed-list/detailed-list.ts
new file mode 100644
index 0000000000..80382fd605
--- /dev/null
+++ b/mynah-ui/src/components/detailed-list/detailed-list.ts
@@ -0,0 +1,403 @@
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import testIds from '../../helper/test-ids';
+import { ChatItemButton, DetailedList, DetailedListItem, DetailedListItemGroup } from '../../static';
+import { CardBody } from '../card/card-body';
+import { Icon } from '../icon';
+import { ChatItemButtonsWrapper } from '../chat-item/chat-item-buttons';
+import { DetailedListItemWrapper } from './detailed-list-item';
+import { chunkArray } from '../../helper/quick-pick-data-handler';
+import { ChatItemFormItemsWrapper } from '../chat-item/chat-item-form-items';
+import { TitleDescriptionWithIcon } from '../title-description-with-icon';
+import { generateUID } from '../../main';
+import { Card } from '../card/card';
+import { cancelEvent } from '../../helper/events';
+
+export interface DetailedListWrapperProps {
+ detailedList: DetailedList;
+ descriptionTextDirection?: 'ltr' | 'rtl';
+ onFilterValueChange?: (filterValues: Record, isValid: boolean) => void;
+ onGroupActionClick?: (action: ChatItemButton, groupName?: string) => void;
+ onGroupClick?: (groupName: string) => void;
+ onItemSelect?: (detailedListItem: DetailedListItem) => void;
+ onItemClick?: (detailedListItem: DetailedListItem) => void;
+ onItemActionClick?: (action: ChatItemButton, detailedListItem?: DetailedListItem) => void;
+ onFilterActionClick?: (action: ChatItemButton, filterValues?: Record, isValid?: boolean) => void;
+}
+
+export class DetailedListWrapper {
+ render: ExtendedHTMLElement;
+ private readonly detailedListItemGroupsContainer: ExtendedHTMLElement;
+ private filterForm: ChatItemFormItemsWrapper;
+ private readonly filtersContainer: ExtendedHTMLElement;
+ private readonly filterActionsContainer: ExtendedHTMLElement;
+ private readonly headerContainer: ExtendedHTMLElement;
+ private readonly props: DetailedListWrapperProps;
+ private detailedListItemsBlockData: Array<{
+ data: DetailedListItem[];
+ element: ExtendedHTMLElement;
+ }> = [];
+
+ private activeTargetElementIndex: number = -1;
+ private allSelectableDetailedListElements: DetailedListItemWrapper[] = [];
+ constructor(props: DetailedListWrapperProps) {
+ this.props = props;
+ this.headerContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-detailed-list-header-wrapper'],
+ children: this.getHeader(),
+ });
+ this.filtersContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-detailed-list-filters-wrapper'],
+ children: this.getFilters(),
+ });
+ this.filterActionsContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-detailed-list-filter-actions-wrapper'],
+ children: this.getFilterActions(),
+ });
+ this.detailedListItemGroupsContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-detailed-list-item-groups-wrapper'],
+ children: this.getDetailedListItemGroups(),
+ events: {
+ scroll: this.handleScroll,
+ },
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.quickPicksWrapper,
+ classNames: ['mynah-detailed-list'],
+ children: [
+ this.headerContainer,
+ this.filtersContainer,
+ this.detailedListItemGroupsContainer,
+ this.filterActionsContainer,
+ ],
+ });
+ }
+
+ /**
+ * Handles scroll events to implement virtualization for the detailed list:
+ *
+ * 1. Initially creating empty placeholder blocks with appropriate height for each chunk of list items
+ * 2. On scroll, determining which blocks are visible in the viewport (or near it)
+ * 3. Dynamically rendering content only for visible blocks by:
+ * - Adding DOM elements for blocks entering the viewport
+ * - Removing DOM elements for blocks that are no longer visible
+ *
+ */
+ private readonly handleScroll = (): void => {
+ const wrapperOffsetHeight = this.detailedListItemGroupsContainer.offsetHeight;
+ const wrapperScrollTop = this.detailedListItemGroupsContainer.scrollTop;
+ const buffer = wrapperOffsetHeight;
+
+ this.detailedListItemsBlockData.forEach((itemsBlock) => {
+ const itemBlockTop = itemsBlock.element.offsetTop;
+ const itemBlockBottom = itemBlockTop + itemsBlock.element.offsetHeight;
+ const hasChildren = itemsBlock.element.childNodes.length > 0;
+
+ const isVisible =
+ itemBlockTop < wrapperScrollTop + wrapperOffsetHeight + buffer &&
+ itemBlockBottom > wrapperScrollTop - buffer;
+
+ if (!hasChildren && isVisible) {
+ // Block is visible but not rendered yet - add DOM elements
+ itemsBlock.element.update({
+ children: this.getDetailedListItemElements(itemsBlock.data),
+ });
+ } else if (hasChildren && !isVisible) {
+ // Block has children but is no longer visible - remove DOM elements
+ itemsBlock.element.clear();
+ }
+ });
+ };
+
+ private readonly getHeader = (): Array => {
+ if (this.props.detailedList.header != null) {
+ return [
+ new TitleDescriptionWithIcon({
+ description: DomBuilder.getInstance().build({
+ type: 'div',
+ children: [
+ this.props.detailedList.header.description ?? '',
+ ...(this.props.detailedList.header.status != null
+ ? [
+ new Card({
+ testId: testIds.sheet.description,
+ border: true,
+ padding: 'medium',
+ status: this.props.detailedList.header.status?.status,
+ children: [
+ new TitleDescriptionWithIcon({
+ description: this.props.detailedList.header.status?.description,
+ title: this.props.detailedList.header.status?.title,
+ icon: this.props.detailedList.header.status?.icon,
+ }).render,
+ ],
+ }).render,
+ ]
+ : []),
+ ],
+ }),
+ icon: this.props.detailedList.header.icon,
+ title: this.props.detailedList.header.title,
+ }).render,
+ ];
+ }
+ return [''];
+ };
+
+ private readonly getFilters = (): Array => {
+ if (this.props.detailedList.filterOptions != null && this.props.detailedList.filterOptions.length > 0) {
+ this.filterForm = new ChatItemFormItemsWrapper({
+ tabId: '',
+ chatItem: {
+ formItems: this.props.detailedList.filterOptions,
+ },
+ onFormChange: this.props.onFilterValueChange,
+ });
+ return [this.filterForm.render];
+ }
+ return [''];
+ };
+
+ private readonly getFilterActions = (): ExtendedHTMLElement[] => {
+ return [
+ new ChatItemButtonsWrapper({
+ onActionClick: (action) => {
+ this.props.onFilterActionClick?.(
+ action,
+ this.filterForm?.getAllValues(),
+ this.filterForm?.isFormValid(),
+ );
+ },
+ buttons: this.props.detailedList.filterActions ?? [],
+ }).render,
+ ];
+ };
+
+ private readonly getDetailedListItemGroups = (): Array => {
+ const groups = this.props.detailedList.list?.map((detailedListGroup: DetailedListItemGroup) => {
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.quickPicksGroup,
+ classNames: ['mynah-detailed-list-group'],
+ children: [
+ ...(detailedListGroup.groupName !== undefined
+ ? [
+ DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.prompt.quickPicksGroupTitle,
+ classNames: [
+ 'mynah-detailed-list-group-title',
+ this.props.onGroupClick != null &&
+ this.props.detailedList.selectable === 'clickable'
+ ? 'mynah-group-title-clickable'
+ : '',
+ ],
+ children: [
+ ...(detailedListGroup.icon != null
+ ? [new Icon({ icon: detailedListGroup.icon }).render]
+ : []),
+ new CardBody({
+ body: detailedListGroup.groupName,
+ }).render,
+ new ChatItemButtonsWrapper({
+ buttons: (detailedListGroup.actions ?? []).map((action) => ({
+ id: action.id,
+ status: action.status,
+ icon: action.icon,
+ text: action.text,
+ disabled: false,
+ })),
+ onActionClick: (action) => {
+ this.props.onGroupActionClick?.(action, detailedListGroup.groupName);
+ },
+ }).render,
+ ],
+ events: {
+ click: (e) => {
+ if (
+ this.props.onGroupClick != null &&
+ detailedListGroup.groupName != null &&
+ this.props.detailedList.selectable === 'clickable'
+ ) {
+ cancelEvent(e);
+ this.props.onGroupClick(detailedListGroup.groupName);
+ }
+ },
+ },
+ }),
+ ]
+ : []),
+ ...chunkArray(detailedListGroup.children ?? [], 100).map((detailedListItemPart, index) => {
+ const itemBlockKey = generateUID();
+ const detailedListItemBlock = DomBuilder.getInstance().build({
+ type: 'div',
+ attributes: {
+ key: itemBlockKey,
+ style: `min-height: calc(${detailedListItemPart.length} * (var(--mynah-sizing-8) + var(--mynah-sizing-half)));`,
+ },
+ classNames: [
+ 'mynah-detailed-list-items-block',
+ detailedListGroup.groupName !== undefined && detailedListGroup.childrenIndented === true
+ ? 'indented'
+ : '',
+ ],
+ children: index < 5 ? this.getDetailedListItemElements(detailedListItemPart) : [],
+ });
+ this.detailedListItemsBlockData.push({
+ data: detailedListItemPart,
+ element: detailedListItemBlock,
+ });
+ return detailedListItemBlock;
+ }),
+ ],
+ });
+ });
+ return groups ?? [''];
+ };
+
+ private readonly getDetailedListItemElements = (detailedListItems: DetailedListItem[]): ExtendedHTMLElement[] => {
+ return detailedListItems.map((detailedListItem) => {
+ const detailedListItemElement = new DetailedListItemWrapper({
+ listItem: detailedListItem,
+ onSelect: this.props.onItemSelect,
+ onClick: this.props.onItemClick,
+ onShowActionMenuOverlay: () => {
+ this.setFocus(detailedListItem);
+ },
+ onActionClick: this.props.onItemActionClick,
+ selectable:
+ this.props.detailedList.selectable !== false && this.props.detailedList.selectable !== 'clickable',
+ clickable: this.props.detailedList.selectable === 'clickable',
+ textDirection: this.props.detailedList.textDirection,
+ descriptionTextDirection: this.props.descriptionTextDirection,
+ });
+ if (detailedListItem.disabled !== true) {
+ this.allSelectableDetailedListElements.push(detailedListItemElement);
+ }
+ return detailedListItemElement.render;
+ });
+ };
+
+ public readonly changeTarget = (
+ direction: 'up' | 'down',
+ snapOnLastAndFirst?: boolean,
+ scrollIntoView?: boolean,
+ ): void => {
+ if (this.allSelectableDetailedListElements.length === 0) return;
+
+ const lastIndex = this.allSelectableDetailedListElements.length - 1;
+ let nextElementIndex = this.activeTargetElementIndex;
+
+ // Handle initial selection when no item is selected
+ if (nextElementIndex === -1) {
+ nextElementIndex = direction === 'up' ? lastIndex : 0;
+ this.setFocusByIndex(nextElementIndex, scrollIntoView);
+ return;
+ }
+
+ // Calculate next index based on direction
+ if (direction === 'up') {
+ nextElementIndex =
+ nextElementIndex > 0 ? nextElementIndex - 1 : snapOnLastAndFirst === true ? 0 : lastIndex;
+ } else {
+ nextElementIndex =
+ nextElementIndex < lastIndex ? nextElementIndex + 1 : snapOnLastAndFirst === true ? lastIndex : 0;
+ }
+
+ this.setFocusByIndex(nextElementIndex, scrollIntoView);
+ };
+
+ private readonly setFocus = (detailedListItem: DetailedListItem): void => {
+ // Only remove focus from current item if one is selected
+ if (this.activeTargetElementIndex >= 0) {
+ this.allSelectableDetailedListElements[this.activeTargetElementIndex].setFocus(false, false);
+ }
+ const selectedItemIndex = this.allSelectableDetailedListElements.findIndex(
+ (item) => item.getItem().id === detailedListItem.id,
+ );
+
+ this.activeTargetElementIndex = selectedItemIndex;
+ this.allSelectableDetailedListElements[this.activeTargetElementIndex].setFocus(true, false);
+ };
+
+ private readonly setFocusByIndex = (index: number, scrollIntoView?: boolean): void => {
+ // Only remove focus from current item if one is selected
+ if (this.activeTargetElementIndex >= 0) {
+ this.allSelectableDetailedListElements[this.activeTargetElementIndex].setFocus(
+ false,
+ scrollIntoView === true,
+ );
+ }
+
+ this.activeTargetElementIndex = index;
+ this.allSelectableDetailedListElements[this.activeTargetElementIndex].setFocus(true, scrollIntoView === true);
+ };
+
+ public readonly getTargetElement = (): DetailedListItem | null => {
+ if (this.allSelectableDetailedListElements.length === 0 || this.activeTargetElementIndex < 0) {
+ return null;
+ }
+
+ return this.allSelectableDetailedListElements[this.activeTargetElementIndex].getItem();
+ };
+
+ public readonly update = (detailedList: DetailedList, preserveScrollPosition?: boolean): void => {
+ if (detailedList.header != null) {
+ this.props.detailedList.header = detailedList.header;
+ this.headerContainer.update({
+ children: this.getHeader(),
+ });
+ }
+
+ if (detailedList.filterOptions != null) {
+ this.props.detailedList.filterOptions = detailedList.filterOptions;
+ this.filtersContainer.update({
+ children: this.getFilters(),
+ });
+ }
+
+ if (detailedList.filterActions != null) {
+ this.props.detailedList.filterActions = detailedList.filterActions;
+ this.filterActionsContainer.update({
+ children: this.getFilterActions(),
+ });
+ }
+
+ if (detailedList.list != null) {
+ // Save current scroll position if preserveScrollPosition is true
+ const scrollTop = preserveScrollPosition === true ? this.detailedListItemGroupsContainer.scrollTop : 0;
+ if (detailedList.selectable != null) {
+ this.props.detailedList.selectable = detailedList.selectable;
+ }
+
+ // Clear and recreate the list structure
+ this.detailedListItemsBlockData = [];
+ this.detailedListItemGroupsContainer.clear();
+ this.activeTargetElementIndex = -1;
+ this.allSelectableDetailedListElements = [];
+ this.props.detailedList.list = detailedList.list;
+
+ // Update with new content
+ this.detailedListItemGroupsContainer.update({
+ children: this.getDetailedListItemGroups(),
+ });
+
+ // Restore scroll position after DOM update if preserveScrollPosition is true
+ if (preserveScrollPosition === true) {
+ // Use requestAnimationFrame to ensure the DOM has been updated
+ requestAnimationFrame(() => {
+ // Set the scroll position
+ this.detailedListItemGroupsContainer.scrollTop = scrollTop;
+
+ // Trigger the virtualization logic using the existing handler
+ this.handleScroll();
+ });
+ }
+ }
+ };
+}
diff --git a/mynah-ui/src/components/dropdown-form/base-dropdown.ts b/mynah-ui/src/components/dropdown-form/base-dropdown.ts
new file mode 100644
index 0000000000..b08c907b44
--- /dev/null
+++ b/mynah-ui/src/components/dropdown-form/base-dropdown.ts
@@ -0,0 +1,394 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { Button } from '../button';
+import { Icon, MynahIcons } from '../icon';
+import { generateUID } from '../../helper/guid';
+import { MynahUIGlobalEvents } from '../../helper/events';
+import { MynahEventNames, MynahPortalNames } from '../../static';
+import testIds from '../../helper/test-ids';
+
+export interface BaseDropdownProps {
+ description?: string;
+ descriptionLink?: {
+ id: string;
+ text: string;
+ destination: string;
+ onClick?: () => void;
+ };
+ items: T[];
+ onChange?: (selectedItems: T[]) => void;
+ tabId?: string;
+ messageId?: string;
+ classNames?: string[];
+}
+
+export abstract class BaseDropdown {
+ render: ExtendedHTMLElement;
+ protected readonly props: BaseDropdownProps;
+ protected readonly tabId: string;
+ protected readonly messageId: string;
+ protected dropdownContent: ExtendedHTMLElement | null = null;
+ protected dropdownPortal: ExtendedHTMLElement | null = null;
+ protected readonly uid: string;
+ protected isOpen = false;
+ protected selectedItems: T[] = [];
+ protected dropdownIcon: ExtendedHTMLElement;
+ protected readonly sheetOpenListenerId: string | null = null;
+
+ // Abstract methods that subclasses must implement
+ protected abstract createItemElement(item: T): ExtendedHTMLElement;
+ protected abstract handleItemSelection(item: T): void;
+ protected abstract getItemSelectionState(item: T): boolean;
+ protected abstract getDisplayLabel(): string;
+
+ // Helper method to get CSS variable values with calc() support
+ protected getCSSVariableValue(variableName: string, fallback: number): number {
+ const value = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+
+ if (value.length > 0) {
+ let numericValue: number;
+
+ if (value.includes('calc(')) {
+ // For calc expressions, create a temporary element to get the computed value
+ const tempDiv = document.createElement('div');
+ tempDiv.style.position = 'absolute';
+ tempDiv.style.visibility = 'hidden';
+ tempDiv.style.width = value;
+ document.body.appendChild(tempDiv);
+ const computedWidth = getComputedStyle(tempDiv).width;
+ document.body.removeChild(tempDiv);
+ numericValue = parseFloat(computedWidth.replace(/px$/, ''));
+ } else {
+ // Remove 'px' suffix if present and parse the numeric value
+ const cleanValue = value.replace(/px$/, '');
+ numericValue = parseFloat(cleanValue);
+ }
+
+ return isNaN(numericValue) ? fallback : numericValue;
+ }
+
+ return fallback;
+ }
+
+ constructor(props: BaseDropdownProps) {
+ this.props = props;
+ this.uid = generateUID();
+
+ // Initialize messageId + tabId
+ this.tabId = props.tabId ?? '';
+ this.messageId = props.messageId ?? '';
+
+ // Initialize selected items
+ this.selectedItems = this.getInitialSelection();
+
+ // Initialize the dropdown icon
+ this.dropdownIcon = new Icon({ icon: MynahIcons.DOWN_OPEN }).render;
+
+ // Create the main dropdown button with the selected item's label if available
+ const initialLabel = this.getDisplayLabel();
+ const dropdownButton = new Button({
+ label: initialLabel,
+ icon: this.dropdownIcon,
+ onClick: this.toggleDropdown,
+ primary: false,
+ status: 'dimmed-clear',
+ classNames: ['mynah-dropdown-list-button'],
+ testId: testIds.dropdownList.button,
+ }).render;
+
+ // Create the main container (without dropdown content)
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.dropdownList.wrapper,
+ classNames: ['mynah-dropdown-list-wrapper', ...(props.classNames ?? [])],
+ attributes: {
+ id: this.uid,
+ },
+ children: [dropdownButton],
+ });
+
+ // Add click outside listener to close dropdown (use capture phase to catch events before stopPropagation)
+ document.addEventListener('click', this.handleClickOutside, true);
+ }
+
+ protected getInitialSelection(): T[] {
+ // Default implementation - subclasses can override if needed
+ return [];
+ }
+
+ protected readonly updateUI = (): void => {
+ // Update dropdown items (if dropdown is open)
+ if (this.dropdownContent != null) {
+ const itemElements = this.dropdownContent.querySelectorAll('[data-item-id]');
+
+ Array.from(itemElements).forEach((element) => {
+ const itemElement = element as ExtendedHTMLElement;
+ const itemId = itemElement.getAttribute('data-item-id');
+ if (itemId == null) return;
+
+ const item = this.props.items.find((item) => this.getItemId(item) === itemId);
+ if (item == null) return;
+
+ // Replace the entire element with updated version
+ const updatedElement = this.createItemElement(item);
+ itemElement.replaceWith(updatedElement);
+ });
+ }
+
+ // Update button label
+ const buttonLabel = this.render.querySelector('.mynah-dropdown-list-button .mynah-button-label');
+ if (buttonLabel != null) {
+ buttonLabel.innerHTML = this.getDisplayLabel();
+ }
+ };
+
+ protected abstract getItemId(item: T): string;
+
+ protected readonly onLinkClick = (buttonId: string): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.DROPDOWN_LINK_CLICK, {
+ tabId: this.props.tabId,
+ actionId: buttonId,
+ destination: this.props.descriptionLink?.destination,
+ });
+ };
+
+ protected readonly toggleDropdown = (e: Event): void => {
+ e.stopPropagation();
+ this.isOpen = !this.isOpen;
+ this.isOpen ? this.openDropdown() : this.closeDropdown();
+ };
+
+ protected readonly openDropdown = (): void => {
+ // Create the dropdown content
+ this.dropdownContent = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-dropdown-list-content', 'open'],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-dropdown-list-options'],
+ children: this.props.items.map((item) => this.createItemElement(item)),
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-dropdown-list-footer'],
+ children: [
+ ...((this.props.description != null && this.props.description.trim() !== '') ||
+ this.props.descriptionLink != null
+ ? [
+ {
+ type: 'p',
+ testId: testIds.dropdownList.description,
+ classNames: ['mynah-dropdown-list-description'],
+ children: [
+ ...(this.props.description != null && this.props.description.trim() !== ''
+ ? [this.props.description]
+ : []),
+ ...(this.props.descriptionLink != null
+ ? (() => {
+ const descriptionLink = this.props.descriptionLink;
+ return [
+ {
+ type: 'button',
+ classNames: ['mynah-dropdown-list-description-link'],
+ events: {
+ click: (e: Event) => {
+ e.stopPropagation();
+ this.onLinkClick(descriptionLink.id);
+ },
+ },
+ children: [descriptionLink.text],
+ },
+ ];
+ })()
+ : []),
+ ],
+ },
+ ]
+ : []),
+ ],
+ },
+ ],
+ });
+
+ // Create portal container
+ this.dropdownPortal = DomBuilder.getInstance().createPortal(
+ `${MynahPortalNames.SHEET}-dropdown-${this.uid}`,
+ {
+ type: 'div',
+ testId: testIds.dropdownList.portal,
+ classNames: ['mynah-dropdown-list-portal'],
+ events: {
+ click: (event: MouseEvent) => {
+ // Prevent closing when clicking inside the dropdown
+ event.stopPropagation();
+ },
+ },
+ children: [this.dropdownContent],
+ },
+ 'beforeend',
+ );
+
+ // Position the dropdown and add scroll listeners
+ this.updateDropdownPosition();
+ window.addEventListener('scroll', this.updateDropdownPosition, true);
+ window.addEventListener('resize', this.updateDropdownPosition);
+
+ // Update the icon to UP_OPEN when the dropdown is open
+ this.dropdownIcon.replaceWith(new Icon({ icon: MynahIcons.UP_OPEN }).render);
+ this.dropdownIcon = this.render.querySelector(
+ '.mynah-dropdown-list-button .mynah-ui-icon',
+ ) as ExtendedHTMLElement;
+ };
+
+ protected readonly isElementVisible = (element: Element): boolean => {
+ const rect = element.getBoundingClientRect();
+
+ // Check viewport bounds first (quick check)
+ const viewportHeight = window.innerHeight ?? document.documentElement.clientHeight;
+ const viewportWidth = window.innerWidth ?? document.documentElement.clientWidth;
+ if (rect.bottom < 0 || rect.top > viewportHeight || rect.right < 0 || rect.left > viewportWidth) {
+ return false;
+ }
+
+ // Check parent containers with overflow
+ for (let parent = element.parentElement; parent != null; parent = parent.parentElement) {
+ const parentStyle = window.getComputedStyle(parent);
+ const hasOverflow = ['overflow', 'overflowX', 'overflowY'].some(
+ (prop) => parentStyle[prop as any] !== 'visible',
+ );
+
+ if (hasOverflow) {
+ const parentRect = parent.getBoundingClientRect();
+ if (
+ rect.bottom < parentRect.top ||
+ rect.top > parentRect.bottom ||
+ rect.right < parentRect.left ||
+ rect.left > parentRect.right
+ ) {
+ return false;
+ }
+ }
+ }
+
+ return true;
+ };
+
+ protected readonly updateDropdownPosition = (): void => {
+ if (this.dropdownPortal == null) return;
+
+ // Close dropdown if button is not visible
+ if (!this.isElementVisible(this.render)) {
+ this.isOpen = false;
+ this.closeDropdown();
+ return;
+ }
+
+ // Calculate position using CSS variables
+ const buttonRect = this.render.getBoundingClientRect();
+ const dropdownWidth = this.getCSSVariableValue('--mynah-dropdown-width', 250);
+ const dropdownMargin = this.getCSSVariableValue('--mynah-dropdown-margin', 4);
+
+ // Position dropdown below button with margin
+ const calculatedTop = buttonRect.bottom + dropdownMargin;
+
+ // Align with chat item card if present, otherwise align with button
+ const chatItemCard = this.render.closest('.mynah-chat-item-card');
+ const calculatedLeft =
+ chatItemCard != null
+ ? chatItemCard.getBoundingClientRect().right - dropdownWidth
+ : buttonRect.right - dropdownWidth;
+
+ // Update position
+ this.dropdownPortal.style.top = `${calculatedTop}px`;
+ this.dropdownPortal.style.left = `${calculatedLeft}px`;
+ };
+
+ protected readonly closeDropdown = (): void => {
+ // Remove scroll and resize listeners
+ window.removeEventListener('scroll', this.updateDropdownPosition, true);
+ window.removeEventListener('resize', this.updateDropdownPosition);
+
+ // Remove the portal
+ if (this.dropdownPortal != null) {
+ this.dropdownPortal.remove();
+ this.dropdownPortal = null;
+ }
+ this.dropdownContent = null;
+
+ // Update the icon to DOWN_OPEN when the dropdown is closed
+ this.dropdownIcon.replaceWith(new Icon({ icon: MynahIcons.DOWN_OPEN }).render);
+ this.dropdownIcon = this.render.querySelector(
+ '.mynah-dropdown-list-button .mynah-ui-icon',
+ ) as ExtendedHTMLElement;
+ };
+
+ protected readonly handleClickOutside = (e: MouseEvent): void => {
+ if (!this.isOpen) return;
+
+ const target = e.target as Node;
+
+ // Don't close if clicking inside the dropdown portal
+ if (this.dropdownPortal?.contains(target) ?? false) {
+ return;
+ }
+
+ // Don't close if clicking on this dropdown's button
+ if (this.render.contains(target)) {
+ return;
+ }
+
+ // Close the dropdown for any other click
+ this.isOpen = false;
+ this.closeDropdown();
+ this.dispatchChangeEvent();
+ };
+
+ public readonly getSelectedItems = (): T[] => {
+ return [...this.selectedItems];
+ };
+
+ public readonly setSelectedItems = (itemIds: string[]): void => {
+ this.selectedItems = this.props.items.filter((item) => itemIds.includes(this.getItemId(item)));
+ this.updateUI();
+ };
+
+ protected readonly dispatchChangeEvent = (): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.DROPDOWN_OPTION_CHANGE, {
+ value: this.selectedItems,
+ messageId: this.messageId,
+ tabId: this.tabId,
+ });
+
+ // Also trigger onChange callback if provided
+ if (this.props.onChange != null) {
+ this.props.onChange(this.selectedItems);
+ }
+ };
+
+ public readonly destroy = (): void => {
+ document.removeEventListener('click', this.handleClickOutside, true);
+
+ // Remove sheet open listener if it exists
+ if (this.sheetOpenListenerId != null) {
+ MynahUIGlobalEvents.getInstance().removeListener(MynahEventNames.OPEN_SHEET, this.sheetOpenListenerId);
+ }
+
+ // Remove scroll and resize listeners if dropdown is open
+ if (this.isOpen) {
+ window.removeEventListener('scroll', this.updateDropdownPosition, true);
+ window.removeEventListener('resize', this.updateDropdownPosition);
+ }
+
+ // Clean up portal if it exists
+ if (this.dropdownPortal != null) {
+ this.dropdownPortal.remove();
+ this.dropdownPortal = null;
+ }
+ this.dropdownContent = null;
+ };
+}
diff --git a/mynah-ui/src/components/dropdown-form/dropdown-list.ts b/mynah-ui/src/components/dropdown-form/dropdown-list.ts
new file mode 100644
index 0000000000..bd30c60855
--- /dev/null
+++ b/mynah-ui/src/components/dropdown-form/dropdown-list.ts
@@ -0,0 +1,98 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { StyleLoader } from '../../helper/style-loader';
+import { Icon, MynahIcons } from '../icon';
+import { DropdownListOption, DropdownListProps } from '../../static';
+import testIds from '../../helper/test-ids';
+import { BaseDropdown, BaseDropdownProps } from './base-dropdown';
+
+export class DropdownList extends BaseDropdown {
+ constructor(props: DropdownListProps) {
+ // Handle backward compatibility - support both 'options' and 'items'
+ const normalizedProps: BaseDropdownProps = {
+ ...props,
+ items: props.options ?? [], // Map 'options' to 'items' for base class
+ };
+
+ super(normalizedProps);
+
+ // Load the specific CSS for dropdown list
+ StyleLoader.getInstance().load('components/_dropdown-list.scss');
+ }
+
+ protected getInitialSelection(): DropdownListOption[] {
+ // Initialize selected items from options that have selected: true
+ return this.props.items.filter((option) => option.selected ?? false);
+ }
+
+ protected createItemElement(option: DropdownListOption): ExtendedHTMLElement {
+ const isSelected = this.getItemSelectionState(option);
+
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.dropdownList.option,
+ classNames: ['mynah-dropdown-list-option', ...(isSelected ? ['selected'] : [])],
+ attributes: {
+ 'data-item-id': option.id,
+ },
+ events: {
+ click: (e) => {
+ e.stopPropagation();
+ this.handleItemSelection(option);
+ },
+ },
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-dropdown-list-checkbox'],
+ children: [
+ ...(isSelected
+ ? [new Icon({ icon: MynahIcons.OK, classNames: ['mynah-dropdown-list-check-icon'] }).render]
+ : []),
+ ],
+ },
+ {
+ type: 'span',
+ testId: testIds.dropdownList.optionLabel,
+ classNames: ['mynah-dropdown-list-option-label'],
+ children: [option.label],
+ },
+ ],
+ });
+ }
+
+ protected handleItemSelection(option: DropdownListOption): void {
+ // Select only this option (single selection behavior)
+ this.selectedItems = [option];
+
+ // Update UI, close dropdown and dispatch event
+ this.updateUI();
+ this.isOpen = false;
+ this.closeDropdown();
+ this.dispatchChangeEvent();
+ }
+
+ protected getItemSelectionState(option: DropdownListOption): boolean {
+ return this.selectedItems.some((selectedOption) => selectedOption.id === option.id);
+ }
+
+ protected getDisplayLabel(): string {
+ return this.selectedItems.length > 0 ? this.selectedItems[0].label : '';
+ }
+
+ protected getItemId(option: DropdownListOption): string {
+ return option.id;
+ }
+
+ public readonly getSelectedOptions = (): DropdownListOption[] => {
+ return this.getSelectedItems();
+ };
+
+ public readonly setSelectedOptions = (optionIds: string[]): void => {
+ this.setSelectedItems(optionIds);
+ };
+}
diff --git a/mynah-ui/src/components/dropdown-form/dropdown-wrapper.ts b/mynah-ui/src/components/dropdown-form/dropdown-wrapper.ts
new file mode 100644
index 0000000000..0e8a5df5d2
--- /dev/null
+++ b/mynah-ui/src/components/dropdown-form/dropdown-wrapper.ts
@@ -0,0 +1,68 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { DropdownFactoryProps, DropdownListOption } from '../../static';
+import { DropdownList } from './dropdown-list';
+import testIds from '../../helper/test-ids';
+
+export interface DropdownWrapperProps {
+ dropdownProps: DropdownFactoryProps;
+ classNames?: string[];
+}
+
+export class DropdownWrapper {
+ private readonly props: DropdownWrapperProps;
+ private dropdown: DropdownList | null = null;
+
+ render: ExtendedHTMLElement;
+
+ constructor(props: DropdownWrapperProps) {
+ this.props = props;
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.dropdownList.wrapper,
+ classNames: ['mynah-dropdown-wrapper', ...(this.props.classNames ?? [])],
+ children: [this.createDropdownComponent()],
+ });
+ }
+
+ private readonly createDropdownComponent = (): ExtendedHTMLElement => {
+ const { dropdownProps } = this.props;
+
+ // For now, all types use DropdownList
+ // Future implementations can add specific components for radio, checkbox, etc.
+ switch (dropdownProps.type) {
+ case 'select':
+ case 'radio':
+ case 'checkbox':
+ default:
+ this.dropdown = new DropdownList({
+ description: dropdownProps.description,
+ descriptionLink: dropdownProps.descriptionLink,
+ options: dropdownProps.options,
+ onChange: dropdownProps.onChange,
+ tabId: dropdownProps.tabId,
+ messageId: dropdownProps.messageId,
+ classNames: dropdownProps.classNames,
+ });
+ return this.dropdown.render;
+ }
+ };
+
+ public readonly getSelectedItems = (): DropdownListOption[] => {
+ return this.dropdown?.getSelectedItems() ?? [];
+ };
+
+ public readonly setSelectedItems = (itemIds: string[]): void => {
+ this.dropdown?.setSelectedItems(itemIds);
+ };
+
+ public readonly destroy = (): void => {
+ this.dropdown?.destroy();
+ this.dropdown = null;
+ };
+}
diff --git a/mynah-ui/src/components/feedback-form/feedback-form-comment.ts b/mynah-ui/src/components/feedback-form/feedback-form-comment.ts
new file mode 100644
index 0000000000..a0413a95b7
--- /dev/null
+++ b/mynah-ui/src/components/feedback-form/feedback-form-comment.ts
@@ -0,0 +1,38 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import testIds from '../../helper/test-ids';
+
+export interface FeedbackFormCommentProps {
+ onChange?: (comment: string) => void;
+ initComment?: string;
+}
+export class FeedbackFormComment {
+ render: ExtendedHTMLElement;
+
+ constructor(props: FeedbackFormCommentProps) {
+ this.render = DomBuilder.getInstance().build({
+ type: 'textarea',
+ testId: testIds.feedbackForm.comment,
+ events: {
+ keyup: (e: InputEvent) => {
+ if (props.onChange !== undefined) {
+ props.onChange(this.render.value);
+ }
+ },
+ },
+ classNames: ['mynah-feedback-form-comment'],
+ });
+
+ // Set the initial value after creating the element
+ this.render.value = props.initComment ?? '';
+ }
+
+ getComment = (): string => this.render.value;
+ clear = (): void => {
+ this.render.value = '';
+ };
+}
diff --git a/mynah-ui/src/components/feedback-form/feedback-form.ts b/mynah-ui/src/components/feedback-form/feedback-form.ts
new file mode 100644
index 0000000000..272f8c1f20
--- /dev/null
+++ b/mynah-ui/src/components/feedback-form/feedback-form.ts
@@ -0,0 +1,253 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChatItem, ChatItemButton, ChatItemFormItem, FeedbackPayload, MynahEventNames } from '../../static';
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { Button } from '../button';
+import { FeedbackFormComment } from './feedback-form-comment';
+import { cancelEvent, MynahUIGlobalEvents } from '../../helper/events';
+import { Config } from '../../helper/config';
+import { Select } from '../form-items/select';
+import testIds from '../../helper/test-ids';
+import { MynahUITabsStore } from '../../helper/tabs-store';
+import { ChatItemFormItemsWrapper } from '../chat-item/chat-item-form-items';
+import { ChatItemButtonsWrapper } from '../chat-item/chat-item-buttons';
+
+export interface FeedbackFormProps {
+ initPayload?: FeedbackPayload;
+}
+export class FeedbackForm {
+ private readonly feedbackOptionsWrapper: Select;
+ private readonly feedbackComment: FeedbackFormComment;
+ private readonly feedbackSubmitButton: Button;
+ public readonly defaultFeedbackFormItems: ExtendedHTMLElement[];
+ private feedbackPayload: FeedbackPayload = { messageId: '', selectedOption: '', tabId: '', comment: '' };
+ private chatFormItems: ChatItemFormItemsWrapper | null = null;
+ private chatButtons: ChatItemButtonsWrapper | null = null;
+
+ constructor(props?: FeedbackFormProps) {
+ this.feedbackPayload = {
+ selectedOption: Config.getInstance().config.feedbackOptions[0].value,
+ messageId: '',
+ tabId: '',
+ comment: '',
+ ...props?.initPayload,
+ };
+
+ this.feedbackOptionsWrapper = new Select({
+ wrapperTestId: testIds.feedbackForm.optionsSelectWrapper,
+ optionTestId: testIds.feedbackForm.optionsSelect,
+ options: Config.getInstance().config.feedbackOptions,
+ onChange: (val) => {
+ this.feedbackPayload.selectedOption = val;
+ },
+ label: Config.getInstance().config.texts.feedbackFormOptionsLabel,
+ });
+
+ this.feedbackComment = new FeedbackFormComment({
+ onChange: (comment: string) => {
+ this.feedbackPayload.comment = comment;
+ },
+ initComment: this.feedbackPayload?.comment,
+ });
+
+ this.feedbackSubmitButton = new Button({
+ testId: testIds.feedbackForm.submitButton,
+ label: Config.getInstance().config.texts.submit,
+ primary: true,
+ onClick: () => {
+ this.onFeedbackSet(this.feedbackPayload);
+ this.close();
+ },
+ });
+
+ this.defaultFeedbackFormItems = [
+ this.feedbackOptionsWrapper.render,
+ DomBuilder.getInstance().build({
+ type: 'span',
+ children: [Config.getInstance().config.texts.feedbackFormCommentLabel],
+ }),
+ this.feedbackComment.render,
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-feedback-form-buttons-container'],
+ children: [
+ new Button({
+ testId: testIds.feedbackForm.cancelButton,
+ primary: false,
+ label: Config.getInstance().config.texts.cancel,
+ onClick: () => {
+ this.close();
+ },
+ }).render,
+ this.feedbackSubmitButton.render,
+ ],
+ }),
+ ];
+
+ MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.SHOW_FEEDBACK_FORM,
+ (data: {
+ messageId?: string;
+ tabId: string;
+ customFormData?: {
+ title?: string;
+ description?: string;
+ buttons?: ChatItemButton[];
+ formItems?: ChatItemFormItem[];
+ };
+ }) => {
+ const title =
+ data.messageId !== undefined
+ ? Config.getInstance().config.texts.feedbackFormTitle
+ : data.customFormData !== undefined
+ ? data.customFormData.title
+ : undefined;
+
+ const description =
+ data.messageId !== undefined
+ ? Config.getInstance().config.texts.feedbackFormDescription
+ : data.customFormData !== undefined
+ ? data.customFormData.description
+ : undefined;
+
+ const defaultOrCustomChatItems =
+ data.messageId !== undefined
+ ? this.defaultFeedbackFormItems
+ : data.customFormData !== undefined
+ ? this.getFormItems({
+ tabId: data.tabId,
+ title: data.customFormData?.title,
+ description: data.customFormData?.description,
+ onFormDisabled: () => {
+ this.close();
+ },
+ onFormAction: () => {
+ this.close();
+ },
+ onCloseButtonClick: (e) => {
+ cancelEvent(e);
+ this.close();
+ },
+ chatItem: data.customFormData,
+ })
+ : [];
+
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.OPEN_SHEET, {
+ tabId: data.tabId,
+ title,
+ description,
+ children: defaultOrCustomChatItems,
+ });
+ if (data.messageId !== undefined) {
+ this.feedbackPayload.messageId = data.messageId;
+ }
+ this.feedbackPayload.tabId = data.tabId;
+ },
+ );
+ }
+
+ private readonly onFeedbackSet = (feedbackData: FeedbackPayload): void => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FEEDBACK_SET, feedbackData);
+ };
+
+ close = (): void => {
+ this.feedbackComment.clear();
+ this.feedbackOptionsWrapper.setValue(Config.getInstance().config.feedbackOptions[0].value);
+ this.feedbackPayload = {
+ messageId: '',
+ selectedOption: Config.getInstance().config.feedbackOptions[0].value,
+ tabId: '',
+ comment: '',
+ };
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CLOSE_SHEET, {});
+ };
+
+ private readonly getFormItems = (data: {
+ tabId: string;
+ chatItem: Partial;
+ title?: string;
+ description?: string;
+ onFormAction?: (actionName: string, formData: Record>>) => void;
+ onFormDisabled?: () => void;
+ onCloseButtonClick?: (e: Event) => void;
+ }): Array => {
+ if (MynahUITabsStore.getInstance().getTabDataStore(data.tabId) === undefined) {
+ return [];
+ }
+ if (this.chatFormItems !== null) {
+ this.chatFormItems.render.remove();
+ this.chatFormItems = null;
+ }
+ if (data.chatItem.formItems !== undefined) {
+ this.chatFormItems = new ChatItemFormItemsWrapper({
+ tabId: data.tabId,
+ chatItem: data.chatItem,
+ onModifierEnterPress(formData, tabId) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FORM_MODIFIER_ENTER_PRESS, {
+ formData,
+ tabId,
+ });
+ },
+ onTextualItemKeyPress(event, itemId, formData, tabId, disableAllCallback) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FORM_TEXTUAL_ITEM_KEYPRESS, {
+ event,
+ formData,
+ itemId,
+ tabId,
+ callback: (disableAll?: boolean) => {
+ if (disableAll === true) {
+ disableAllCallback();
+ }
+ },
+ });
+ },
+ onFormChange(formData, isValid, tabId) {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FORM_CHANGE, {
+ formData,
+ isValid,
+ tabId,
+ });
+ },
+ });
+ }
+
+ if (this.chatButtons !== null) {
+ this.chatButtons.render.remove();
+ this.chatButtons = null;
+ }
+ if (data.chatItem.buttons !== undefined) {
+ this.chatButtons = new ChatItemButtonsWrapper({
+ tabId: data.tabId,
+ formItems: this.chatFormItems,
+ buttons: data.chatItem.buttons,
+ onAllButtonsDisabled: data.onFormDisabled,
+ onActionClick: (action, e) => {
+ if (e !== undefined) {
+ cancelEvent(e);
+ }
+
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.CUSTOM_FORM_ACTION_CLICK, {
+ tabId: data.tabId,
+ id: action.id,
+ text: action.text,
+ ...(this.chatFormItems !== null ? { formItemValues: this.chatFormItems.getAllValues() } : {}),
+ });
+
+ if (data.onFormAction !== undefined) {
+ data.onFormAction(
+ action.id,
+ this.chatFormItems !== null ? this.chatFormItems.getAllValues() : {},
+ );
+ }
+ },
+ });
+ }
+ return [
+ ...(this.chatFormItems !== null ? [this.chatFormItems.render] : []),
+ ...(this.chatButtons !== null ? [this.chatButtons.render] : []),
+ ];
+ };
+}
diff --git a/mynah-ui/src/components/form-items/checkbox.ts b/mynah-ui/src/components/form-items/checkbox.ts
new file mode 100644
index 0000000000..57cc6bc580
--- /dev/null
+++ b/mynah-ui/src/components/form-items/checkbox.ts
@@ -0,0 +1,140 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import { StyleLoader } from '../../helper/style-loader';
+import { Icon, MynahIcons, MynahIconsType } from '../icon';
+
+export interface CheckboxProps {
+ classNames?: string[];
+ attributes?: Record;
+ title?: HTMLElement | ExtendedHTMLElement | string;
+ label?: string;
+ description?: ExtendedHTMLElement;
+ value?: 'true' | 'false';
+ optional?: boolean;
+ icon?: MynahIcons | MynahIconsType;
+ onChange?: (value: 'true' | 'false') => void;
+ wrapperTestId?: string;
+ optionTestId?: string;
+}
+
+export abstract class CheckboxAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: 'true' | 'false'): void => {};
+ getValue = (): 'true' | 'false' => 'false';
+ setEnabled = (enabled: boolean): void => {};
+}
+export class CheckboxInternal extends CheckboxAbstract {
+ private readonly checkboxWrapper: ExtendedHTMLElement;
+ private readonly checkboxItem: ExtendedHTMLElement;
+ render: ExtendedHTMLElement;
+ constructor(props: CheckboxProps) {
+ StyleLoader.getInstance().load('components/_form-input.scss');
+ super();
+ this.checkboxItem = DomBuilder.getInstance().build({
+ type: 'input',
+ classNames: ['as-checkbox'],
+ attributes: {
+ type: 'checkbox',
+ },
+ });
+ this.checkboxItem.checked = props.value === 'true';
+
+ this.checkboxWrapper = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: props.wrapperTestId,
+ classNames: ['mynah-form-input', ...(props.classNames ?? [])],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-form-input-radio-wrapper'],
+ children: [
+ {
+ type: 'label',
+ testId: props.optionTestId,
+ classNames: ['mynah-form-input-radio-label'],
+ events: {
+ click: (e) => {
+ cancelEvent(e);
+ const checkState = (!this.checkboxItem.checked).toString() as 'true' | 'false';
+ this.setValue(checkState);
+ props.onChange?.(checkState);
+ },
+ },
+ children: [
+ this.checkboxItem,
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-radio-check'],
+ children: [new Icon({ icon: props.icon ?? MynahIcons.OK }).render],
+ },
+ ...(props.label != null
+ ? [
+ {
+ type: 'span',
+ children: [props.label],
+ },
+ ]
+ : []),
+ ],
+ },
+ ],
+ },
+ ],
+ });
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.title != null ? [props.title] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ {
+ type: 'div',
+ classNames: ['mynah-form-input-container', 'mynah-form-input-radio-group', 'no-border'],
+ ...(props.attributes !== undefined ? { attributes: props.attributes } : {}),
+ children: [this.checkboxWrapper],
+ },
+ ],
+ });
+ }
+
+ setValue = (value: 'true' | 'false'): void => {
+ this.checkboxItem.checked = value === 'true';
+ };
+
+ getValue = (): 'true' | 'false' => {
+ return this.checkboxItem.checked.toString() as 'true' | 'false';
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.checkboxWrapper.removeAttribute('disabled');
+ this.checkboxItem.removeAttribute('disabled');
+ } else {
+ this.checkboxWrapper.setAttribute('disabled', 'disabled');
+ this.checkboxItem.setAttribute('disabled', 'disabled');
+ }
+ };
+}
+
+export class Checkbox extends CheckboxAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: CheckboxProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.Checkbox ?? CheckboxInternal)(props);
+ }
+
+ setValue = (value: 'true' | 'false'): void => {};
+ getValue = (): 'true' | 'false' => 'false';
+ setEnabled = (enabled: boolean): void => {};
+}
diff --git a/mynah-ui/src/components/form-items/form-item-list.ts b/mynah-ui/src/components/form-items/form-item-list.ts
new file mode 100644
index 0000000000..ab58076221
--- /dev/null
+++ b/mynah-ui/src/components/form-items/form-item-list.ts
@@ -0,0 +1,263 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import { generateUID } from '../../helper/guid';
+import { StyleLoader } from '../../helper/style-loader';
+import { ListItemEntry, SingularFormItem } from '../../static';
+import { Button } from '../button';
+import { ChatItemFormItemsWrapper } from '../chat-item/chat-item-form-items';
+import { Icon, MynahIcons } from '../icon';
+
+export interface FormItemListProps {
+ items: SingularFormItem[];
+ value?: ListItemEntry[];
+ classNames?: string[];
+ attributes?: Record;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ description?: ExtendedHTMLElement;
+ wrapperTestId?: string;
+ onChange?: (values: Array>>>) => void;
+}
+
+export abstract class FormItemListAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: ListItemEntry[]): void => {};
+ getValue = (): Array> => [];
+ setEnabled = (enabled: boolean): void => {};
+}
+
+export class FormItemListInternal extends FormItemListAbstract {
+ private readonly rowWrapper: ExtendedHTMLElement;
+ private readonly addButton: ExtendedHTMLElement;
+ private readonly props: FormItemListProps;
+ private readonly rows: Map = new Map();
+ render: ExtendedHTMLElement;
+
+ constructor(props: FormItemListProps) {
+ StyleLoader.getInstance().load('components/form-items/_form-item-list.scss');
+ super();
+ this.props = props;
+
+ this.rowWrapper = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-list-rows-wrapper'],
+ children: [
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-list-row'],
+ children: [
+ ...this.props.items
+ .filter((item) => item.description != null || item.title != null)
+ .map((item) =>
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-list-row-header'],
+ children: [
+ ...(item.title !== undefined
+ ? [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(item.title !== undefined ? [item.title] : [])],
+ },
+ ]
+ : []),
+ ...(item.description !== undefined
+ ? [
+ {
+ type: 'span',
+ classNames: ['mynah-ui-form-item-description'],
+ children: [
+ ...(item.description !== undefined ? [item.description] : []),
+ ],
+ },
+ ]
+ : []),
+ ],
+ }),
+ ),
+ new Button({
+ classNames: ['mynah-form-item-list-row-remove-all-button'],
+ primary: false,
+ disabled: true,
+ onClick: (e) => {
+ // Maybe remove all?
+ },
+ icon: new Icon({ icon: MynahIcons.CANCEL }).render,
+ }).render,
+ ],
+ }),
+ ],
+ });
+
+ this.addButton = new Button({
+ classNames: ['mynah-form-item-list-add-button'],
+ primary: false,
+ label: Config.getInstance().config.texts.add,
+ onClick: (e) => {
+ cancelEvent(e);
+ this.addRow();
+ },
+ icon: new Icon({ icon: MynahIcons.PLUS }).render,
+ }).render;
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.label !== undefined ? [props.label] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ {
+ type: 'div',
+ classNames: ['mynah-form-item-list-wrapper'],
+ testId: props.wrapperTestId,
+ children: [this.rowWrapper, this.addButton],
+ },
+ ],
+ });
+
+ // Initialize with existing values or add an empty row
+ if (props.value != null && props.value.length > 0) {
+ props.value?.forEach((entry) => this.addRow(entry));
+ } else {
+ this.addRow();
+ }
+ }
+
+ private addRow(entry?: ListItemEntry): void {
+ const rowId = generateUID();
+ const formItems: SingularFormItem[] = [];
+
+ // Create form items container
+ const formItemsContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-list-row-items-container'],
+ });
+
+ // Create remove button
+ const removeButton = new Button({
+ classNames: ['mynah-form-item-list-row-remove-button'],
+ primary: false,
+ disabled: entry?.persistent,
+ onClick: (e) => {
+ cancelEvent(e);
+ this.removeRow(rowId);
+ },
+ icon: new Icon({ icon: MynahIcons.CANCEL }).render,
+ }).render;
+
+ // Create form items
+ this.props.items.forEach((item) => {
+ item = { ...item, title: undefined, description: undefined };
+ formItems.push({
+ ...item,
+ value: entry?.value[item.id] as any,
+ });
+
+ const value = entry?.value[item.id];
+ if (value != null) {
+ item.value = value;
+ }
+ });
+
+ // Create form render
+ const newForm = new ChatItemFormItemsWrapper({
+ tabId: '',
+ chatItem: {
+ formItems,
+ },
+ onFormChange: (formData: Record) => {
+ // this.formData = formData;
+ this.props.onChange?.(this.getValue());
+ },
+ });
+ formItemsContainer.appendChild(newForm.render);
+
+ // Create row container and add it to the wrapper
+ const rowContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-list-row'],
+ attributes: {
+ 'data-row-id': rowId,
+ },
+ children: [formItemsContainer, removeButton],
+ });
+ this.rowWrapper.appendChild(rowContainer);
+
+ // Store the row reference
+ this.rows.set(rowId, { rowElm: rowContainer, rowForm: newForm });
+ this.props.onChange?.(this.getValue());
+ }
+
+ private removeRow(rowId: string): void {
+ const row = this.rows.get(rowId);
+ if (row != null) {
+ row.rowElm.remove();
+ this.rows.delete(rowId);
+ this.props.onChange?.(this.getValue());
+ }
+ }
+
+ setValue = (value: ListItemEntry[]): void => {
+ // Clear existing rows
+ this.rows.forEach((row) => row.rowElm.remove());
+ this.rows.clear();
+
+ // Add new rows
+ if (value.length > 0) {
+ value.forEach((entry) => this.addRow(entry));
+ } else {
+ this.addRow();
+ }
+ };
+
+ getValue = (): Array> => {
+ const values: Array> = [];
+ this.rows.forEach((row) => values.push(row.rowForm.getAllValues() as Record));
+ return values;
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.render.removeAttribute('disabled');
+ this.rows.forEach((row) => {
+ row.rowForm.enableAll();
+ });
+ } else {
+ this.render.setAttribute('disabled', 'disabled');
+ this.rows.forEach((row) => {
+ row.rowForm.disableAll();
+ });
+ }
+ };
+
+ isFormValid = (): boolean => {
+ let isValid = true;
+ this.rows.forEach((row) => {
+ isValid = isValid && row.rowForm.isFormValid();
+ });
+ return isValid;
+ };
+}
+
+export class FormItemList extends FormItemListAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: FormItemListProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.FormItemList ?? FormItemListInternal)(props);
+ }
+
+ setValue = (value: ListItemEntry[]): void => {};
+ getValue = (): Array> => [];
+ setEnabled = (enabled: boolean): void => {};
+}
diff --git a/mynah-ui/src/components/form-items/form-item-pill-box.ts b/mynah-ui/src/components/form-items/form-item-pill-box.ts
new file mode 100644
index 0000000000..a5ad2b0925
--- /dev/null
+++ b/mynah-ui/src/components/form-items/form-item-pill-box.ts
@@ -0,0 +1,201 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import { StyleLoader } from '../../helper/style-loader';
+
+export interface FormItemPillBoxProps {
+ id: string;
+ value?: string;
+ classNames?: string[];
+ attributes?: Record;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ description?: ExtendedHTMLElement;
+ placeholder?: string;
+ wrapperTestId?: string;
+ onChange?: (value: string) => void;
+ disabled?: boolean;
+}
+
+export abstract class FormItemPillBoxAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+}
+
+export class FormItemPillBoxInternal extends FormItemPillBoxAbstract {
+ private readonly props: FormItemPillBoxProps;
+ private readonly pillsContainer: ExtendedHTMLElement;
+ private readonly input: ExtendedHTMLElement;
+ private readonly wrapper: ExtendedHTMLElement;
+ private pills: string[] = [];
+ render: ExtendedHTMLElement;
+
+ constructor(props: FormItemPillBoxProps) {
+ StyleLoader.getInstance().load('components/form-items/_form-item-pill-box.scss');
+ super();
+ this.props = props;
+
+ // Create pills container
+ this.pillsContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-pill-box-pills-container'],
+ });
+
+ // Create input field
+ this.input = DomBuilder.getInstance().build({
+ type: 'textarea',
+ classNames: ['mynah-form-item-pill-box-input'],
+ attributes: {
+ placeholder: props.placeholder ?? 'Type and press Enter to add a tag',
+ rows: '1',
+ },
+ events: {
+ keydown: (e: KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ cancelEvent(e);
+ const value = (this.input as unknown as HTMLTextAreaElement).value.trim();
+ if (value !== '') {
+ this.addPill(value);
+ (this.input as unknown as HTMLTextAreaElement).value = '';
+ this.notifyChange();
+ }
+ }
+ },
+ },
+ });
+
+ // Create wrapper
+ this.wrapper = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-pill-box-wrapper'],
+ children: [this.pillsContainer, this.input],
+ });
+
+ // Create main container
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper', ...(props.classNames ?? [])],
+ attributes: props.attributes,
+ testId: props.wrapperTestId,
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.label !== undefined ? [props.label] : [])],
+ },
+ ...(props.description !== undefined ? [props.description] : []),
+ this.wrapper,
+ ],
+ });
+
+ // Initialize with existing value
+ if (props.value != null) {
+ this.setValue(props.value);
+ }
+
+ // Set initial disabled state
+ if (props.disabled === true) {
+ this.setEnabled(false);
+ }
+ }
+
+ private addPill(text: string): void {
+ if (text === '' || this.pills.includes(text)) {
+ return;
+ }
+
+ this.pills.push(text);
+
+ const pill = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-item-pill'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-item-pill-text'],
+ children: [text],
+ },
+ {
+ type: 'span',
+ classNames: ['mynah-form-item-pill-remove'],
+ children: ['×'],
+ events: {
+ click: (e) => {
+ cancelEvent(e);
+ pill.remove();
+ this.pills = this.pills.filter((p) => p !== text);
+ this.notifyChange();
+ },
+ },
+ },
+ ],
+ });
+
+ this.pillsContainer.appendChild(pill);
+ }
+
+ private notifyChange(): void {
+ if (this.props.onChange != null) {
+ this.props.onChange(this.getValue());
+ }
+ }
+
+ setValue = (value: string): void => {
+ // Clear existing pills
+ this.pillsContainer.innerHTML = '';
+ this.pills = [];
+
+ // Add new pills
+ if (value !== '') {
+ const pillValues = value
+ .split(/[,\n]+/)
+ .map((v) => v.trim())
+ .filter((v) => v);
+ pillValues.forEach((pill) => this.addPill(pill));
+ }
+ };
+
+ getValue = (): string => {
+ return this.pills.join(',');
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.render.removeAttribute('disabled');
+ (this.input as unknown as HTMLTextAreaElement).disabled = false;
+ } else {
+ this.render.setAttribute('disabled', 'disabled');
+ (this.input as unknown as HTMLTextAreaElement).disabled = true;
+ }
+ };
+}
+
+export class FormItemPillBox extends FormItemPillBoxAbstract {
+ render: ExtendedHTMLElement;
+ private readonly instance: FormItemPillBoxAbstract;
+
+ constructor(props: FormItemPillBoxProps) {
+ super();
+ const InternalClass = Config.getInstance().config.componentClasses.FormItemPillBox ?? FormItemPillBoxInternal;
+ this.instance = new InternalClass(props);
+ this.render = this.instance.render;
+ }
+
+ setValue = (value: string): void => {
+ this.instance.setValue(value);
+ };
+
+ getValue = (): string => {
+ return this.instance.getValue();
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ this.instance.setEnabled(enabled);
+ };
+}
diff --git a/mynah-ui/src/components/form-items/radio-group.ts b/mynah-ui/src/components/form-items/radio-group.ts
new file mode 100644
index 0000000000..74fd4c8181
--- /dev/null
+++ b/mynah-ui/src/components/form-items/radio-group.ts
@@ -0,0 +1,169 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import { generateUID } from '../../helper/guid';
+import { StyleLoader } from '../../helper/style-loader';
+import { Icon, MynahIcons, MynahIconsType } from '../icon';
+
+interface SelectOption {
+ value: string;
+ label?: string;
+ icon?: MynahIcons | MynahIconsType;
+}
+
+export interface RadioGroupProps {
+ type?: 'radiogroup' | 'toggle';
+ classNames?: string[];
+ attributes?: Record;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ description?: ExtendedHTMLElement;
+ value?: string;
+ optional?: boolean;
+ options?: SelectOption[];
+ onChange?: (value: string) => void;
+ wrapperTestId?: string;
+ optionTestId?: string;
+}
+
+export abstract class RadioGroupAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+}
+export class RadioGroupInternal extends RadioGroupAbstract {
+ private readonly radioGroupElement: ExtendedHTMLElement;
+ private readonly groupName: string = generateUID();
+ render: ExtendedHTMLElement;
+ constructor(props: RadioGroupProps) {
+ StyleLoader.getInstance().load('components/_form-input.scss');
+ super();
+ // Only add vertical classes for radiogroup type
+ const isRadioGroup = props.type === 'radiogroup';
+ this.radioGroupElement = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: props.wrapperTestId,
+ classNames: [
+ 'mynah-form-input',
+ ...(props.classNames ?? []),
+ ...(isRadioGroup ? ['mynah-form-input-vertical'] : []),
+ ],
+ children: props.options?.map((option, index) => ({
+ type: 'div',
+ classNames: [
+ 'mynah-form-input-radio-wrapper',
+ ...(isRadioGroup ? ['mynah-form-input-radio-wrapper-vertical'] : []),
+ ],
+ children: [
+ {
+ type: 'label',
+ testId: props.optionTestId,
+ classNames: ['mynah-form-input-radio-label'],
+ events: {
+ click: (e) => {
+ cancelEvent(e);
+ e.currentTarget.querySelector('input').checked = true;
+ this.setValue(option.value);
+ props.onChange?.(option.value);
+ },
+ },
+ children: [
+ {
+ type: 'input',
+ attributes: {
+ type: 'radio',
+ id: `${this.groupName}_${option.value}`,
+ name: this.groupName,
+ value: option.value,
+ ...((props.value !== undefined && props.value === option.value) ||
+ (props.optional !== true && props.value === undefined && index === 0)
+ ? { checked: 'checked' }
+ : {}),
+ },
+ },
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-radio-check'],
+ children: [new Icon({ icon: option.icon ?? MynahIcons.DOT }).render],
+ },
+ ...(option.label != null
+ ? [
+ {
+ type: 'span',
+ children: [option.label],
+ },
+ ]
+ : []),
+ ],
+ },
+ ],
+ })) as DomBuilderObject[],
+ });
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.label != null ? [props.label] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ {
+ type: 'div',
+ classNames: [
+ 'mynah-form-input-container',
+ `mynah-form-input-${props.type === 'radiogroup' ? 'radio' : 'toggle'}-group`,
+ 'no-border',
+ ],
+ ...(props.attributes !== undefined ? { attributes: props.attributes } : {}),
+ children: [this.radioGroupElement],
+ },
+ ],
+ });
+ }
+
+ setValue = (value: string): void => {
+ this.radioGroupElement.querySelector('[checked]')?.removeAttribute('checked');
+ this.radioGroupElement.querySelector(`[id="${this.groupName}_${value}"]`)?.setAttribute('checked', 'checked');
+ };
+
+ getValue = (): string => {
+ return (
+ this.radioGroupElement.querySelector('[checked]')?.getAttribute('id')?.replace(`${this.groupName}_`, '') ??
+ ''
+ );
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.radioGroupElement.removeAttribute('disabled');
+ this.radioGroupElement
+ .querySelectorAll('input')
+ .forEach((inputElm) => inputElm.removeAttribute('disabled'));
+ } else {
+ this.radioGroupElement.setAttribute('disabled', 'disabled');
+ this.radioGroupElement
+ .querySelectorAll('input')
+ .forEach((inputElm) => inputElm.setAttribute('disabled', 'disabled'));
+ }
+ };
+}
+
+export class RadioGroup extends RadioGroupAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: RadioGroupProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.RadioGroup ?? RadioGroupInternal)(props);
+ }
+
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+}
diff --git a/mynah-ui/src/components/form-items/select.ts b/mynah-ui/src/components/form-items/select.ts
new file mode 100644
index 0000000000..fe4104bf59
--- /dev/null
+++ b/mynah-ui/src/components/form-items/select.ts
@@ -0,0 +1,261 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { StyleLoader } from '../../helper/style-loader';
+import { Icon, MynahIcons, MynahIconsType } from '../icon';
+import { Card } from '../card/card';
+import { CardBody } from '../card/card-body';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+
+const TOOLTIP_DELAY = 350;
+
+interface SelectOption {
+ value: string;
+ label: string;
+ description?: string;
+}
+
+export interface SelectProps {
+ classNames?: string[];
+ attributes?: Record;
+ handleIcon?: MynahIcons | MynahIconsType;
+ border?: boolean;
+ icon?: MynahIcons | MynahIconsType;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ description?: ExtendedHTMLElement;
+ value?: string;
+ optional?: boolean;
+ autoWidth?: boolean;
+ options?: SelectOption[];
+ placeholder?: string;
+ onChange?: (value: string) => void;
+ wrapperTestId?: string;
+ optionTestId?: string;
+ tooltip?: string;
+}
+
+export abstract class SelectAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+}
+
+export class SelectInternal {
+ private readonly props: SelectProps;
+ private readonly selectElement: ExtendedHTMLElement;
+ private readonly autoWidthSizer: ExtendedHTMLElement;
+ private readonly selectContainer: ExtendedHTMLElement;
+ private tooltipOverlay: Overlay | null = null;
+ private tooltipTimeout: ReturnType | null = null;
+ render: ExtendedHTMLElement;
+ constructor(props: SelectProps) {
+ this.props = props;
+ StyleLoader.getInstance().load('components/_form-input.scss');
+ this.autoWidthSizer = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: ['select-auto-width-sizer'],
+ children: [
+ this.props.options?.find((option) => option.value === this.props.value)?.label ??
+ this.props.placeholder ??
+ '',
+ ],
+ });
+ this.selectElement = DomBuilder.getInstance().build({
+ type: 'select',
+ testId: props.wrapperTestId,
+ classNames: [
+ 'mynah-form-input',
+ ...(props.classNames ?? []),
+ ...(props.autoWidth === true ? ['auto-width'] : []),
+ ],
+ events: {
+ change: (e) => {
+ const value = (e.currentTarget as HTMLSelectElement).value;
+ if (props.onChange !== undefined) {
+ props.onChange(value);
+ }
+ this.autoWidthSizer.update({
+ children: [
+ this.props.options?.find((option) => option.value === value)?.label ??
+ this.props.placeholder ??
+ '',
+ ],
+ });
+ },
+ },
+ children: [
+ ...(props.optional === true
+ ? [
+ {
+ label: props.placeholder ?? '...',
+ value: '',
+ description: undefined,
+ },
+ ]
+ : []),
+ ...(props.options ?? []),
+ ].flatMap((option) => {
+ const mainOption = {
+ type: 'option',
+ testId: props.optionTestId,
+ classNames: option.value === '' ? ['empty-option'] : [],
+ attributes: {
+ value: option.value,
+ ...(option.description != null && option.description.trim() !== ''
+ ? { 'data-description': option.description }
+ : {}),
+ },
+ children: [option.label],
+ };
+
+ // Add disabled description option if description exists
+ if (option.description != null && option.description.trim() !== '') {
+ return [
+ mainOption,
+ {
+ type: 'option',
+ testId: props.optionTestId,
+ classNames: ['description-option'],
+ attributes: {
+ value: '',
+ disabled: 'disabled',
+ },
+ children: [` ${option.description}`],
+ },
+ ];
+ }
+
+ return [mainOption];
+ }) as DomBuilderObject[],
+ });
+ if (props.value !== undefined) {
+ this.selectElement.value = props.value;
+ }
+ this.selectContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-container', ...(props.border === false ? ['no-border'] : [])],
+ ...(props.attributes !== undefined ? { attributes: props.attributes } : {}),
+ children: [
+ ...(props.icon ? [new Icon({ icon: props.icon, classNames: ['mynah-form-input-icon'] }).render] : []),
+ ...(props.autoWidth !== undefined ? [this.autoWidthSizer] : []),
+ this.selectElement,
+ new Icon({ icon: props.handleIcon ?? MynahIcons.DOWN_OPEN, classNames: ['mynah-select-handle'] })
+ .render,
+ ],
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.label !== undefined ? [props.label] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ this.selectContainer,
+ ],
+ });
+
+ // Add tooltip functionality if tooltip is provided
+ if (props.tooltip != null && props.tooltip.trim() !== '') {
+ this.selectContainer.update({
+ events: {
+ mouseenter: () => {
+ if (props.tooltip != null && props.tooltip.trim() !== '') {
+ this.showTooltip(props.tooltip);
+ }
+ },
+ mouseleave: () => {
+ this.hideTooltip();
+ },
+ },
+ });
+ }
+ }
+
+ setValue = (value: string): void => {
+ this.selectElement.value = value;
+ this.autoWidthSizer.update({
+ children: [
+ this.props.options?.find((option) => option.value === value)?.label ?? this.props.placeholder ?? '',
+ ],
+ });
+ };
+
+ getValue = (): string => {
+ return this.selectElement.value;
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.selectElement.removeAttribute('disabled');
+ } else {
+ this.selectElement.setAttribute('disabled', 'disabled');
+ }
+ };
+
+ private readonly showTooltip = (content: string): void => {
+ if (content.trim() !== '') {
+ // Clear any existing timeout
+ if (this.tooltipTimeout !== null) {
+ clearTimeout(this.tooltipTimeout);
+ }
+
+ this.tooltipTimeout = setTimeout(() => {
+ this.tooltipOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: this.selectContainer,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ new Card({
+ border: false,
+ children: [
+ new CardBody({
+ body: content,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+ }, TOOLTIP_DELAY);
+ }
+ };
+
+ private readonly hideTooltip = (): void => {
+ // Clear any pending timeout
+ if (this.tooltipTimeout !== null) {
+ clearTimeout(this.tooltipTimeout);
+ this.tooltipTimeout = null;
+ }
+
+ // Close existing tooltip
+ if (this.tooltipOverlay !== null) {
+ this.tooltipOverlay.close();
+ this.tooltipOverlay = null;
+ }
+ };
+}
+
+export class Select extends SelectAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: SelectProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.Select ?? SelectInternal)(props);
+ }
+
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+}
diff --git a/mynah-ui/src/components/form-items/stars.ts b/mynah-ui/src/components/form-items/stars.ts
new file mode 100644
index 0000000000..1b6b1a564a
--- /dev/null
+++ b/mynah-ui/src/components/form-items/stars.ts
@@ -0,0 +1,102 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { StyleLoader } from '../../helper/style-loader';
+import { Icon, MynahIcons } from '../icon';
+
+export type StarValues = 1 | 2 | 3 | 4 | 5;
+export interface StarsProps {
+ classNames?: string[];
+ attributes?: Record;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ description?: ExtendedHTMLElement;
+ value?: string;
+ onChange?: (value: string) => void;
+ initStar?: StarValues;
+ wrapperTestId?: string;
+ optionTestId?: string;
+}
+export class Stars {
+ private readonly starsContainer: ExtendedHTMLElement;
+ render: ExtendedHTMLElement;
+
+ constructor(props: StarsProps) {
+ StyleLoader.getInstance().load('components/_form-input.scss');
+ this.starsContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: props.wrapperTestId,
+ classNames: ['mynah-feedback-form-stars-container'],
+ attributes: { ...(props.value !== undefined && { 'selected-star': props.value?.toString() ?? '1' }) },
+ children: Array(5)
+ .fill(undefined)
+ .map((n, index) =>
+ DomBuilder.getInstance().build({
+ type: 'div',
+ testId: props.optionTestId,
+ classNames: [
+ 'mynah-feedback-form-star',
+ ...(props.value === (index + 1).toString() ? ['selected'] : []),
+ ],
+ events: {
+ click: (e: MouseEvent) => {
+ (this.starsContainer.querySelector('.selected') as ExtendedHTMLElement)?.removeClass(
+ 'selected',
+ );
+ (e.currentTarget as ExtendedHTMLElement).addClass('selected');
+ if (props.onChange !== undefined) {
+ props.onChange((index + 1).toString());
+ }
+ this.setValue((index + 1) as StarValues);
+ },
+ },
+ attributes: { star: (index + 1).toString() },
+ children: [new Icon({ icon: MynahIcons.STAR }).render],
+ }),
+ ),
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.label !== undefined ? [props.label] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ {
+ type: 'div',
+ classNames: ['mynah-form-input-container', 'no-border'],
+ ...(props.attributes !== undefined ? { attributes: props.attributes } : {}),
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-form-input', ...(props.classNames ?? [])],
+ children: [this.starsContainer],
+ },
+ ],
+ },
+ ],
+ });
+ }
+
+ setValue = (star: StarValues): void => {
+ this.starsContainer.setAttribute('selected-star', star.toString());
+ };
+
+ getValue = (): string => {
+ return this.starsContainer.getAttribute('selected-star') ?? '';
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.starsContainer.parentElement?.removeAttribute('disabled');
+ } else {
+ this.starsContainer.parentElement?.setAttribute('disabled', 'disabled');
+ }
+ };
+}
diff --git a/mynah-ui/src/components/form-items/switch.ts b/mynah-ui/src/components/form-items/switch.ts
new file mode 100644
index 0000000000..81361a88a6
--- /dev/null
+++ b/mynah-ui/src/components/form-items/switch.ts
@@ -0,0 +1,139 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import { StyleLoader } from '../../helper/style-loader';
+import { Icon, MynahIcons, MynahIconsType } from '../icon';
+
+export interface SwitchProps {
+ classNames?: string[];
+ attributes?: Record;
+ title?: HTMLElement | ExtendedHTMLElement | string;
+ label?: string;
+ description?: ExtendedHTMLElement;
+ value?: 'true' | 'false';
+ optional?: boolean;
+ icon?: MynahIcons | MynahIconsType;
+ onChange?: (value: 'true' | 'false') => void;
+ testId?: string;
+}
+
+export abstract class SwitchAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: 'true' | 'false'): void => {};
+ getValue = (): 'true' | 'false' => 'false';
+ setEnabled = (enabled: boolean): void => {};
+}
+export class SwitchInternal extends SwitchAbstract {
+ private readonly checkboxWrapper: ExtendedHTMLElement;
+ private readonly checkboxItem: ExtendedHTMLElement;
+ render: ExtendedHTMLElement;
+ constructor(props: SwitchProps) {
+ StyleLoader.getInstance().load('components/_form-input.scss');
+ StyleLoader.getInstance().load('components/form-items/_switch.scss');
+ super();
+ this.checkboxItem = DomBuilder.getInstance().build({
+ type: 'input',
+ attributes: {
+ type: 'checkbox',
+ },
+ });
+ this.checkboxItem.checked = props.value === 'true';
+
+ this.checkboxWrapper = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: props.testId,
+ classNames: ['mynah-form-input', ...(props.classNames ?? [])],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-form-input-switch-wrapper'],
+ children: [
+ {
+ type: 'label',
+ classNames: ['mynah-form-input-switch-label'],
+ events: {
+ click: (e) => {
+ cancelEvent(e);
+ const checkState = (!this.checkboxItem.checked).toString() as 'true' | 'false';
+ this.setValue(checkState);
+ props.onChange?.(checkState);
+ },
+ },
+ children: [
+ this.checkboxItem,
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-switch-check'],
+ children: [new Icon({ icon: props.icon ?? MynahIcons.OK }).render],
+ },
+ { type: 'div', classNames: ['mynah-form-input-switch-check-bg'] },
+ ],
+ },
+ ...(props.label != null
+ ? [
+ {
+ type: 'span',
+ children: [props.label],
+ },
+ ]
+ : []),
+ ],
+ },
+ ],
+ });
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.title != null ? [props.title] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ {
+ type: 'div',
+ classNames: ['mynah-form-input-container', 'no-border'],
+ ...(props.attributes !== undefined ? { attributes: props.attributes } : {}),
+ children: [this.checkboxWrapper],
+ },
+ ],
+ });
+ }
+
+ setValue = (value: 'true' | 'false'): void => {
+ this.checkboxItem.checked = value === 'true';
+ };
+
+ getValue = (): 'true' | 'false' => {
+ return this.checkboxItem.checked.toString() as 'true' | 'false';
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.checkboxWrapper.removeAttribute('disabled');
+ this.checkboxItem.removeAttribute('disabled');
+ } else {
+ this.checkboxWrapper.setAttribute('disabled', 'disabled');
+ this.checkboxItem.setAttribute('disabled', 'disabled');
+ }
+ };
+}
+
+export class Switch extends SwitchAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: SwitchProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.Switch ?? SwitchInternal)(props);
+ }
+
+ setValue = (value: 'true' | 'false'): void => {};
+ getValue = (): 'true' | 'false' => 'false';
+ setEnabled = (enabled: boolean): void => {};
+}
diff --git a/mynah-ui/src/components/form-items/text-area.ts b/mynah-ui/src/components/form-items/text-area.ts
new file mode 100644
index 0000000000..7c596ecd81
--- /dev/null
+++ b/mynah-ui/src/components/form-items/text-area.ts
@@ -0,0 +1,156 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { StyleLoader } from '../../helper/style-loader';
+import { checkTextElementValidation } from '../../helper/validator';
+import { ValidationPattern } from '../../static';
+
+export interface TextAreaProps {
+ classNames?: string[];
+ attributes?: Record;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ autoFocus?: boolean;
+ description?: ExtendedHTMLElement;
+ mandatory?: boolean;
+ fireModifierAndEnterKeyPress?: () => void;
+ placeholder?: string;
+ validationPatterns?: {
+ operator?: 'and' | 'or';
+ patterns: ValidationPattern[];
+ };
+ value?: string;
+ onChange?: (value: string) => void;
+ onKeyPress?: (event: KeyboardEvent) => void;
+ testId?: string;
+}
+
+export abstract class TextAreaAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+ checkValidation = (): void => {};
+}
+export class TextAreaInternal extends TextAreaAbstract {
+ private readonly inputElement: ExtendedHTMLElement;
+ private readonly validationErrorBlock: ExtendedHTMLElement;
+ private readonly props: TextAreaProps;
+ private readyToValidate: boolean = false;
+ render: ExtendedHTMLElement;
+ constructor(props: TextAreaProps) {
+ StyleLoader.getInstance().load('components/_form-input.scss');
+ super();
+ this.props = props;
+ this.validationErrorBlock = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-validation-error-block'],
+ });
+ this.inputElement = DomBuilder.getInstance().build({
+ type: 'textarea',
+ testId: this.props.testId,
+ classNames: ['mynah-form-input', ...(this.props.classNames ?? [])],
+ attributes: {
+ ...(this.props.placeholder !== undefined
+ ? {
+ placeholder: this.props.placeholder,
+ }
+ : {}),
+ ...(this.props.autoFocus === true
+ ? {
+ autofocus: 'autofocus',
+ }
+ : {}),
+ },
+ events: {
+ blur: (e) => {
+ this.readyToValidate = true;
+ this.checkValidation();
+ },
+ // TODO: change this to 'input' event?
+ keyup: (e) => {
+ if (this.props.onChange !== undefined) {
+ this.props.onChange((e.currentTarget as HTMLTextAreaElement).value);
+ }
+ this.checkValidation();
+ },
+ keydown: (e: KeyboardEvent) => {
+ if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+ this.props.fireModifierAndEnterKeyPress?.();
+ }
+ },
+ keypress: (e: KeyboardEvent) => {
+ this.props.onKeyPress?.(e);
+ },
+ },
+ });
+ this.inputElement.value = props.value ?? '';
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.label !== undefined ? [props.label] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ {
+ type: 'div',
+ classNames: ['mynah-form-input-container'],
+ ...(props.attributes !== undefined ? { attributes: props.attributes } : {}),
+ children: [this.inputElement],
+ },
+ this.validationErrorBlock,
+ ],
+ });
+
+ if (this.props.autoFocus === true) {
+ setTimeout(() => {
+ this.inputElement.focus();
+ }, 250);
+ }
+ }
+
+ setValue = (value: string): void => {
+ this.inputElement.value = value;
+ };
+
+ getValue = (): string => {
+ return this.inputElement.value;
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.inputElement.removeAttribute('disabled');
+ } else {
+ this.inputElement.setAttribute('disabled', 'disabled');
+ }
+ };
+
+ checkValidation = (): void =>
+ checkTextElementValidation(
+ this.inputElement,
+ this.props.validationPatterns,
+ this.validationErrorBlock,
+ this.readyToValidate,
+ this.props.mandatory,
+ );
+}
+
+export class TextArea extends TextAreaAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: TextAreaProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.TextArea ?? TextAreaInternal)(props);
+ }
+
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+ checkValidation = (): void => {};
+}
diff --git a/mynah-ui/src/components/form-items/text-input.ts b/mynah-ui/src/components/form-items/text-input.ts
new file mode 100644
index 0000000000..dfd8fa55bb
--- /dev/null
+++ b/mynah-ui/src/components/form-items/text-input.ts
@@ -0,0 +1,173 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { StyleLoader } from '../../helper/style-loader';
+import { checkTextElementValidation } from '../../helper/validator';
+import { ValidationPattern } from '../../static';
+import { Icon, MynahIcons, MynahIconsType } from '../icon';
+
+export interface TextInputProps {
+ classNames?: string[];
+ attributes?: Record;
+ label?: HTMLElement | ExtendedHTMLElement | string;
+ autoFocus?: boolean;
+ description?: ExtendedHTMLElement;
+ icon?: MynahIcons | MynahIconsType;
+ mandatory?: boolean;
+ fireModifierAndEnterKeyPress?: () => void;
+ placeholder?: string;
+ type?: 'text' | 'number' | 'email';
+ validationPatterns?: {
+ operator?: 'and' | 'or';
+ patterns: ValidationPattern[];
+ };
+ validateOnChange?: boolean;
+ value?: string;
+ onChange?: (value: string) => void;
+ onKeyPress?: (event: KeyboardEvent) => void;
+ testId?: string;
+}
+
+export abstract class TextInputAbstract {
+ render: ExtendedHTMLElement;
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+ checkValidation = (): void => {};
+}
+export class TextInputInternal extends TextInputAbstract {
+ private readonly inputElement: ExtendedHTMLElement;
+ private readonly validationErrorBlock: ExtendedHTMLElement;
+ private readonly props: TextInputProps;
+ private readyToValidate: boolean = false;
+ private touched: boolean = false;
+ render: ExtendedHTMLElement;
+ constructor(props: TextInputProps) {
+ StyleLoader.getInstance().load('components/_form-input.scss');
+ super();
+ this.props = props;
+ this.validationErrorBlock = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-validation-error-block'],
+ });
+ this.inputElement = DomBuilder.getInstance().build({
+ type: 'input',
+ testId: this.props.testId,
+ classNames: ['mynah-form-input', ...(this.props.classNames ?? [])],
+ attributes: {
+ type: props.type ?? 'text',
+ ...(this.props.placeholder !== undefined
+ ? {
+ placeholder: this.props.placeholder,
+ }
+ : {}),
+ ...(this.props.autoFocus === true
+ ? {
+ autofocus: 'autofocus',
+ }
+ : {}),
+ },
+ events: {
+ blur: (e) => {
+ // Only show validation error if user changed the input
+ if (this.touched) {
+ this.readyToValidate = true;
+ }
+ this.checkValidation();
+ },
+ input: (e) => {
+ if (this.props.onChange !== undefined) {
+ this.props.onChange((e.currentTarget as HTMLInputElement).value);
+ }
+ if (props.validateOnChange === true) {
+ this.readyToValidate = true;
+ }
+ this.touched = true;
+ this.checkValidation();
+ },
+ keydown: (e: KeyboardEvent) => {
+ if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+ this.props.fireModifierAndEnterKeyPress?.();
+ }
+ },
+ keypress: (e: KeyboardEvent) => {
+ this.props.onKeyPress?.(e);
+ },
+ },
+ });
+ this.inputElement.value = props.value?.toString() ?? '';
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-form-input-wrapper'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-form-input-label'],
+ children: [...(props.label !== undefined ? [props.label] : [])],
+ },
+ ...[props.description !== undefined ? props.description : ''],
+ {
+ type: 'div',
+ classNames: ['mynah-form-input-container'],
+ ...(props.attributes !== undefined ? { attributes: props.attributes } : {}),
+ children: [
+ ...(props.icon
+ ? [new Icon({ icon: props.icon, classNames: ['mynah-form-input-icon'] }).render]
+ : []),
+ this.inputElement,
+ ],
+ },
+ this.validationErrorBlock,
+ ],
+ });
+
+ if (this.props.autoFocus === true) {
+ setTimeout(() => {
+ this.inputElement.focus();
+ }, 250);
+ }
+ }
+
+ setValue = (value: string): void => {
+ this.inputElement.value = value;
+ };
+
+ getValue = (): string => {
+ return this.inputElement.value;
+ };
+
+ setEnabled = (enabled: boolean): void => {
+ if (enabled) {
+ this.inputElement.removeAttribute('disabled');
+ } else {
+ this.inputElement.setAttribute('disabled', 'disabled');
+ }
+ };
+
+ checkValidation = (): void =>
+ checkTextElementValidation(
+ this.inputElement,
+ this.props.validationPatterns,
+ this.validationErrorBlock,
+ this.readyToValidate,
+ this.props.mandatory,
+ );
+}
+
+export class TextInput extends TextInputAbstract {
+ render: ExtendedHTMLElement;
+
+ constructor(props: TextInputProps) {
+ super();
+ return new (Config.getInstance().config.componentClasses.TextInput ?? TextInputInternal)(props);
+ }
+
+ setValue = (value: string): void => {};
+ getValue = (): string => '';
+ setEnabled = (enabled: boolean): void => {};
+ checkValidation = (): void => {};
+}
diff --git a/mynah-ui/src/components/icon.ts b/mynah-ui/src/components/icon.ts
new file mode 100644
index 0000000000..ee953b9291
--- /dev/null
+++ b/mynah-ui/src/components/icon.ts
@@ -0,0 +1,147 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { StyleLoader } from '../helper/style-loader';
+import { MynahUIIconImporter } from './icon/icon-importer';
+import '../styles/components/_icon.scss';
+import { Status } from '../static';
+
+export enum MynahIcons {
+ Q = 'q',
+ AT = 'at',
+ MENU = 'menu',
+ MINUS = 'minus',
+ MINUS_CIRCLE = 'minus-circled',
+ SEARCH = 'search',
+ PLUS = 'plus',
+ PAPER_CLIP = 'paper-clip',
+ PIN = 'pin',
+ LIST_ADD = 'list-add',
+ TABS = 'tabs',
+ CHAT = 'chat',
+ LINK = 'link',
+ FOLDER = 'folder',
+ FILE = 'file',
+ FLASH = 'flash',
+ DOC = 'doc',
+ DOT = 'dot',
+ EXTERNAL = 'external',
+ CANCEL = 'cancel',
+ CANCEL_CIRCLE = 'cancel-circle',
+ CALENDAR = 'calendar',
+ COMMENT = 'comment',
+ MEGAPHONE = 'megaphone',
+ MAGIC = 'magic',
+ NOTIFICATION = 'notification',
+ EYE = 'eye',
+ ELLIPSIS = 'ellipsis',
+ ELLIPSIS_H = 'ellipsis-h',
+ OK = 'ok',
+ UP_OPEN = 'up-open',
+ DOWN_OPEN = 'down-open',
+ RIGHT_OPEN = 'right-open',
+ LEFT_OPEN = 'left-open',
+ RESIZE_FULL = 'resize-full',
+ RESIZE_SMALL = 'resize-small',
+ BLOCK = 'block',
+ OK_CIRCLED = 'ok-circled',
+ INFO = 'info',
+ WARNING = 'warning',
+ ERROR = 'error',
+ THUMBS_UP = 'thumbs-up',
+ THUMBS_DOWN = 'thumbs-down',
+ STAR = 'star',
+ STACK = 'stack',
+ LIGHT_BULB = 'light-bulb',
+ ENVELOPE_SEND = 'envelope-send',
+ ENTER = 'enter',
+ REFRESH = 'refresh',
+ PROGRESS = 'progress',
+ SCROLL_DOWN = 'scroll-down',
+ USER = 'user',
+ PLAY = 'play',
+ PAUSE = 'pause',
+ STOP = 'stop',
+ PENCIL = 'pencil',
+ CODE_BLOCK = 'code-block',
+ COPY = 'copy',
+ CURSOR_INSERT = 'cursor-insert',
+ TEXT_SELECT = 'text-select',
+ TOOLS = 'tools',
+ REVERT = 'revert',
+ UNDO = 'undo',
+ ROCKET = 'rocket',
+ ASTERISK = 'asterisk',
+ BUG = 'bug',
+ CHECK_LIST = 'check-list',
+ DEPLOY = 'deploy',
+ SHELL = 'shell',
+ HELP = 'help',
+ MESSAGE = 'message',
+ MCP = 'mcp',
+ TRASH = 'trash',
+ TRANSFORM = 'transform',
+ HISTORY = 'history',
+ IMAGE = 'image',
+}
+
+export interface CustomIcon {
+ name: string;
+ base64Svg: string;
+}
+
+export type MynahIconsType = `${MynahIcons}`;
+
+export interface IconProps {
+ icon: MynahIcons | MynahIconsType | CustomIcon;
+ subtract?: boolean;
+ classNames?: string[];
+ status?: Status;
+}
+export class Icon {
+ render: ExtendedHTMLElement;
+ props: IconProps;
+ constructor(props: IconProps) {
+ this.props = props;
+ StyleLoader.getInstance().load('components/_icon.scss');
+ MynahUIIconImporter.getInstance();
+
+ // Determine if the icon is a custom icon or a predefined one
+ const iconName = this.getIconName();
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'i',
+ classNames: [
+ 'mynah-ui-icon',
+ `mynah-ui-icon-${iconName}${props.subtract === true ? '-subtract' : ''}`,
+ ...(props.status !== undefined ? [`status-${props.status}`] : []),
+ ...(props.classNames !== undefined ? props.classNames : []),
+ ],
+ });
+ }
+
+ private readonly getIconName = (): string => {
+ // If it's a custom icon, register it first
+ if (this.isCustomIcon(this.props.icon)) {
+ MynahUIIconImporter.getInstance().addCustomIcon(this.props.icon);
+ }
+
+ return this.isCustomIcon(this.props.icon) ? this.props.icon.name : this.props.icon;
+ };
+
+ private isCustomIcon(icon: MynahIcons | MynahIconsType | CustomIcon): icon is CustomIcon {
+ return typeof icon === 'object' && 'base64Svg' in icon && 'name' in icon;
+ }
+
+ public update = (icon: MynahIcons | MynahIconsType | CustomIcon): void => {
+ const oldIconName = this.getIconName();
+ this.render.removeClass(`mynah-ui-icon-${oldIconName}${this.props.subtract === true ? '-subtract' : ''}`);
+
+ this.props.icon = icon;
+ const newIconName = this.getIconName();
+ this.render.addClass(`mynah-ui-icon-${newIconName}${this.props.subtract === true ? '-subtract' : ''}`);
+ };
+}
diff --git a/mynah-ui/src/components/icon/icon-importer.ts b/mynah-ui/src/components/icon/icon-importer.ts
new file mode 100644
index 0000000000..445f6c44e3
--- /dev/null
+++ b/mynah-ui/src/components/icon/icon-importer.ts
@@ -0,0 +1,244 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder } from '../../helper/dom';
+import { CustomIcon, MynahIcons } from '../icon';
+// ICONS
+import Q from './icons/q.svg';
+import DOT from './icons/dot.svg';
+import AT from './icons/at.svg';
+import MENU from './icons/menu.svg';
+import MINUS from './icons/minus.svg';
+import MINUS_CIRCLE from './icons/minus-circled.svg';
+import SEARCH from './icons/search.svg';
+import PLUS from './icons/plus.svg';
+import PAPER_CLIP from './icons/paper-clip.svg';
+import LIST_ADD from './icons/list-add.svg';
+import TABS from './icons/tabs.svg';
+import PENCIL from './icons/pencil.svg';
+import FOLDER from './icons/folder.svg';
+import FILE from './icons/file.svg';
+import FLASH from './icons/flash.svg';
+import CHAT from './icons/chat.svg';
+import COMMENT from './icons/comment.svg';
+import LINK from './icons/link.svg';
+import DOC from './icons/doc.svg';
+import EXTERNAL from './icons/external.svg';
+import CANCEL from './icons/cancel.svg';
+import CANCEL_CIRCLE from './icons/cancel-circle.svg';
+import CALENDAR from './icons/calendar.svg';
+import MEGAPHONE from './icons/megaphone.svg';
+import MAGIC from './icons/magic.svg';
+import NOTIFICATION from './icons/notification.svg';
+import EYE from './icons/eye.svg';
+import ELLIPSIS from './icons/ellipsis.svg';
+import ELLIPSIS_H from './icons/ellipsis-h.svg';
+import OK from './icons/ok.svg';
+import UP_OPEN from './icons/up-open.svg';
+import DOWN_OPEN from './icons/down-open.svg';
+import RIGHT_OPEN from './icons/right-open.svg';
+import LEFT_OPEN from './icons/left-open.svg';
+import RESIZE_FULL from './icons/resize-full.svg';
+import RESIZE_SMALL from './icons/resize-small.svg';
+import BLOCK from './icons/block.svg';
+import OK_CIRCLED from './icons/ok-circled.svg';
+import INFO from './icons/info.svg';
+import WARNING from './icons/warning.svg';
+import ERROR from './icons/error.svg';
+import THUMBS_UP from './icons/thumbs-up.svg';
+import THUMBS_DOWN from './icons/thumbs-down.svg';
+import PIN from './icons/pin.svg';
+import STAR from './icons/star.svg';
+import STACK from './icons/stack.svg';
+import LIGHT_BULB from './icons/light-bulb.svg';
+import ENVELOPE_SEND from './icons/envelope-send.svg';
+import ENTER from './icons/enter.svg';
+import REFRESH from './icons/refresh.svg';
+import PROGRESS from './icons/progress.svg';
+import SCROLL_DOWN from './icons/scroll-down.svg';
+import USER from './icons/user.svg';
+import PLAY from './icons/play.svg';
+import PAUSE from './icons/pause.svg';
+import STOP from './icons/stop.svg';
+import CODE_BLOCK from './icons/code-block.svg';
+import COPY from './icons/copy.svg';
+import CURSOR_INSERT from './icons/cursor-insert.svg';
+import TEXT_SELECT from './icons/text-select.svg';
+import TOOLS from './icons/tools.svg';
+import REVERT from './icons/revert.svg';
+import UNDO from './icons/undo.svg';
+import ROCKET from './icons/rocket.svg';
+import ASTERISK from './icons/asterisk.svg';
+import BUG from './icons/bug.svg';
+import CHECK_LIST from './icons/check-list.svg';
+import DEPLOY from './icons/deploy.svg';
+import SHELL from './icons/shell.svg';
+import HELP from './icons/help.svg';
+import HISTORY from './icons/history.svg';
+import MESSAGE from './icons/message.svg';
+import MCP from './icons/mcp.svg';
+import TRASH from './icons/trash.svg';
+import TRANSFORM from './icons/transform.svg';
+import IMAGE from './icons/image.svg';
+
+export class MynahUIIconImporter {
+ private static instance: MynahUIIconImporter;
+ private readonly customIcons: Map = new Map();
+ private readonly portalId = 'mynah-ui-icons';
+ private readonly defaultIconMappings = {
+ Q,
+ DOT,
+ AT,
+ MENU,
+ MINUS,
+ MINUS_CIRCLE,
+ SEARCH,
+ PLUS,
+ PAPER_CLIP,
+ LIST_ADD,
+ FOLDER,
+ FILE,
+ FLASH,
+ TABS,
+ PENCIL,
+ CHAT,
+ LINK,
+ DOC,
+ EXTERNAL,
+ CANCEL,
+ CANCEL_CIRCLE,
+ CALENDAR,
+ COMMENT,
+ MEGAPHONE,
+ MAGIC,
+ NOTIFICATION,
+ EYE,
+ ELLIPSIS,
+ ELLIPSIS_H,
+ OK,
+ UP_OPEN,
+ DOWN_OPEN,
+ RIGHT_OPEN,
+ LEFT_OPEN,
+ RESIZE_FULL,
+ RESIZE_SMALL,
+ BLOCK,
+ OK_CIRCLED,
+ INFO,
+ WARNING,
+ ERROR,
+ THUMBS_UP,
+ THUMBS_DOWN,
+ STAR,
+ STACK,
+ LIGHT_BULB,
+ ENVELOPE_SEND,
+ ENTER,
+ REFRESH,
+ PROGRESS,
+ SCROLL_DOWN,
+ USER,
+ PLAY,
+ PAUSE,
+ STOP,
+ CODE_BLOCK,
+ COPY,
+ CURSOR_INSERT,
+ TEXT_SELECT,
+ TOOLS,
+ REVERT,
+ UNDO,
+ ROCKET,
+ ASTERISK,
+ BUG,
+ CHECK_LIST,
+ DEPLOY,
+ SHELL,
+ HELP,
+ MESSAGE,
+ MCP,
+ TRASH,
+ TRANSFORM,
+ HISTORY,
+ IMAGE,
+ PIN,
+ };
+
+ private constructor() {
+ this.initializeDefaultIcons();
+ }
+
+ private cleanupExistingPortal(): void {
+ const existingPortal = document.getElementById(this.portalId);
+ if (existingPortal != null) {
+ existingPortal.remove();
+ }
+ }
+
+ private initializeDefaultIcons(): void {
+ this.createIconStyles(this.defaultIconMappings);
+ }
+
+ public addCustomIcon(customIcon: CustomIcon): void {
+ // If icon already exists with same content, no need to proceed
+ if (this.customIcons.get(customIcon.name) === customIcon.base64Svg) {
+ return;
+ }
+
+ this.customIcons.set(customIcon.name, customIcon.base64Svg);
+
+ // Recreate all styles including both default and custom icons
+ this.cleanupExistingPortal();
+ this.createIconStyles({
+ ...this.defaultIconMappings,
+ ...Object.fromEntries(this.customIcons),
+ });
+ }
+
+ private createIconStyles(iconMappings: Record): void {
+ DomBuilder.getInstance().createPortal(
+ 'mynah-ui-icons',
+ {
+ type: 'style',
+ attributes: {
+ type: 'text/css',
+ },
+ children: [
+ `
+ ${Object.keys(iconMappings)
+ .map((iconKey) => {
+ // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+ const iconName = MynahIcons[iconKey as keyof typeof MynahIcons] || iconKey;
+ return `
+ :root{
+ --mynah-ui-icon-${iconName}: url(${iconMappings[iconKey]});
+ }
+ .mynah-ui-icon-${iconName} {
+ -webkit-mask-image: var(--mynah-ui-icon-${iconName});
+ mask-image: var(--mynah-ui-icon-${iconName});
+ }
+ .mynah-ui-icon-${iconName}-subtract {
+ -webkit-mask-image: linear-gradient(#000000, #000000), var(--mynah-ui-icon-${iconName});
+ mask-image: linear-gradient(#000000, #000000), var(--mynah-ui-icon-${iconName});
+ mask-composite: subtract;
+ }`;
+ })
+ .join('')}
+ `,
+ ],
+ },
+ 'beforebegin',
+ );
+ }
+
+ public static getInstance = (): MynahUIIconImporter => {
+ if (MynahUIIconImporter.instance === undefined) {
+ MynahUIIconImporter.instance = new MynahUIIconImporter();
+ }
+
+ return MynahUIIconImporter.instance;
+ };
+}
diff --git a/mynah-ui/src/components/icon/icons/asterisk.svg b/mynah-ui/src/components/icon/icons/asterisk.svg
new file mode 100644
index 0000000000..b91dc2dce0
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/asterisk.svg
@@ -0,0 +1,2 @@
+
+
+
+ Layer 1
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/block.svg b/mynah-ui/src/components/icon/icons/block.svg
new file mode 100644
index 0000000000..47b8db5daa
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/block.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/bug.svg b/mynah-ui/src/components/icon/icons/bug.svg
new file mode 100644
index 0000000000..1834ede465
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/bug.svg
@@ -0,0 +1,7 @@
+
+
+ Layer 1
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/calendar.svg b/mynah-ui/src/components/icon/icons/calendar.svg
new file mode 100644
index 0000000000..83f3e142ff
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/calendar.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/cancel-circle.svg b/mynah-ui/src/components/icon/icons/cancel-circle.svg
new file mode 100644
index 0000000000..840b6c15d7
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/cancel-circle.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/cancel.svg b/mynah-ui/src/components/icon/icons/cancel.svg
new file mode 100644
index 0000000000..4923bbfdb9
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/cancel.svg
@@ -0,0 +1,7 @@
+
+
+ Layer 1
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/chat.svg b/mynah-ui/src/components/icon/icons/chat.svg
new file mode 100644
index 0000000000..6d664dcf90
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/chat.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/check-list.svg b/mynah-ui/src/components/icon/icons/check-list.svg
new file mode 100644
index 0000000000..966c6cf6e3
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/check-list.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/code-block.svg b/mynah-ui/src/components/icon/icons/code-block.svg
new file mode 100644
index 0000000000..2c81a2a974
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/code-block.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Layer 1
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/comment.svg b/mynah-ui/src/components/icon/icons/comment.svg
new file mode 100644
index 0000000000..4f24d7572e
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/comment.svg
@@ -0,0 +1,4 @@
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/copy.svg b/mynah-ui/src/components/icon/icons/copy.svg
new file mode 100644
index 0000000000..c28e4fcfba
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/copy.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/cursor-insert.svg b/mynah-ui/src/components/icon/icons/cursor-insert.svg
new file mode 100644
index 0000000000..a7415322cd
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/cursor-insert.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/deploy.svg b/mynah-ui/src/components/icon/icons/deploy.svg
new file mode 100644
index 0000000000..1110b633ce
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/deploy.svg
@@ -0,0 +1,7 @@
+
+
+ Layer 1
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/doc.svg b/mynah-ui/src/components/icon/icons/doc.svg
new file mode 100644
index 0000000000..d76f68303a
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/doc.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/dot.svg b/mynah-ui/src/components/icon/icons/dot.svg
new file mode 100644
index 0000000000..be4da4335e
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/dot.svg
@@ -0,0 +1,7 @@
+
+
+ Layer 1
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/down-open.svg b/mynah-ui/src/components/icon/icons/down-open.svg
new file mode 100644
index 0000000000..5dbfcb2454
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/down-open.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/ellipsis-h.svg b/mynah-ui/src/components/icon/icons/ellipsis-h.svg
new file mode 100644
index 0000000000..7ca0ad15fa
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/ellipsis-h.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/ellipsis.svg b/mynah-ui/src/components/icon/icons/ellipsis.svg
new file mode 100644
index 0000000000..4fa6ab651b
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/ellipsis.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/enter.svg b/mynah-ui/src/components/icon/icons/enter.svg
new file mode 100644
index 0000000000..a72172ec7d
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/enter.svg
@@ -0,0 +1,7 @@
+
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/envelope-send.svg b/mynah-ui/src/components/icon/icons/envelope-send.svg
new file mode 100644
index 0000000000..349a988d33
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/envelope-send.svg
@@ -0,0 +1,6 @@
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/error.svg b/mynah-ui/src/components/icon/icons/error.svg
new file mode 100644
index 0000000000..553dd11011
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/error.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/external.svg b/mynah-ui/src/components/icon/icons/external.svg
new file mode 100644
index 0000000000..5fee174858
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/external.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/eye.svg b/mynah-ui/src/components/icon/icons/eye.svg
new file mode 100644
index 0000000000..67979791e6
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/eye.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/file.svg b/mynah-ui/src/components/icon/icons/file.svg
new file mode 100644
index 0000000000..2f57827e2e
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/file.svg
@@ -0,0 +1,7 @@
+
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/flash.svg b/mynah-ui/src/components/icon/icons/flash.svg
new file mode 100644
index 0000000000..b8108fd1f3
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/flash.svg
@@ -0,0 +1,2 @@
+
+ionicons-v5-m
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/help.svg b/mynah-ui/src/components/icon/icons/help.svg
new file mode 100644
index 0000000000..ed0bd5bffd
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/help.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/history.svg b/mynah-ui/src/components/icon/icons/history.svg
new file mode 100644
index 0000000000..67a20c6144
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/history.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/image.svg b/mynah-ui/src/components/icon/icons/image.svg
new file mode 100644
index 0000000000..e79497ee17
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/image.svg
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/info.svg b/mynah-ui/src/components/icon/icons/info.svg
new file mode 100644
index 0000000000..15476ec154
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/info.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/left-open.svg b/mynah-ui/src/components/icon/icons/left-open.svg
new file mode 100644
index 0000000000..68bd6d3813
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/left-open.svg
@@ -0,0 +1,11 @@
+
+ Created with Fabric.js 5.2.4
+
+
+ Layer 1
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/light-bulb.svg b/mynah-ui/src/components/icon/icons/light-bulb.svg
new file mode 100644
index 0000000000..35b5fde483
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/light-bulb.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/link.svg b/mynah-ui/src/components/icon/icons/link.svg
new file mode 100644
index 0000000000..5ddea6a879
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/link.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/list-add.svg b/mynah-ui/src/components/icon/icons/list-add.svg
new file mode 100644
index 0000000000..c8fd254c17
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/list-add.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/magic.svg b/mynah-ui/src/components/icon/icons/magic.svg
new file mode 100644
index 0000000000..1ef439356b
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/magic.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/mcp.svg b/mynah-ui/src/components/icon/icons/mcp.svg
new file mode 100644
index 0000000000..4feb8401e8
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/mcp.svg
@@ -0,0 +1,10 @@
+
+
+
+ Layer 1
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/megaphone.svg b/mynah-ui/src/components/icon/icons/megaphone.svg
new file mode 100644
index 0000000000..c8a49cda7d
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/megaphone.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/menu.svg b/mynah-ui/src/components/icon/icons/menu.svg
new file mode 100644
index 0000000000..01f3fea1df
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/menu.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/message.svg b/mynah-ui/src/components/icon/icons/message.svg
new file mode 100644
index 0000000000..cb4e61e775
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/message.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/minus-circled.svg b/mynah-ui/src/components/icon/icons/minus-circled.svg
new file mode 100644
index 0000000000..a8c88b5751
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/minus-circled.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/minus.svg b/mynah-ui/src/components/icon/icons/minus.svg
new file mode 100644
index 0000000000..5e704b959f
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/minus.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/notification.svg b/mynah-ui/src/components/icon/icons/notification.svg
new file mode 100644
index 0000000000..d2053b30a1
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/notification.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/ok-circled.svg b/mynah-ui/src/components/icon/icons/ok-circled.svg
new file mode 100644
index 0000000000..5f72af1fd7
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/ok-circled.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/ok.svg b/mynah-ui/src/components/icon/icons/ok.svg
new file mode 100644
index 0000000000..ce9f236674
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/ok.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/paper-clip.svg b/mynah-ui/src/components/icon/icons/paper-clip.svg
new file mode 100644
index 0000000000..ade8ce957e
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/paper-clip.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/pause.svg b/mynah-ui/src/components/icon/icons/pause.svg
new file mode 100644
index 0000000000..dcb67d3509
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/pause.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/pencil.svg b/mynah-ui/src/components/icon/icons/pencil.svg
new file mode 100644
index 0000000000..7cf4ff0f27
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/pencil.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/pin.svg b/mynah-ui/src/components/icon/icons/pin.svg
new file mode 100644
index 0000000000..3039879e98
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/pin.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/play.svg b/mynah-ui/src/components/icon/icons/play.svg
new file mode 100644
index 0000000000..4cf02a3a4f
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/play.svg
@@ -0,0 +1,7 @@
+
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/plus.svg b/mynah-ui/src/components/icon/icons/plus.svg
new file mode 100644
index 0000000000..873f4facc8
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/plus.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/progress.svg b/mynah-ui/src/components/icon/icons/progress.svg
new file mode 100644
index 0000000000..7b1291f168
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/progress.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/q.svg b/mynah-ui/src/components/icon/icons/q.svg
new file mode 100644
index 0000000000..068ba16a77
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/q.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/refresh.svg b/mynah-ui/src/components/icon/icons/refresh.svg
new file mode 100644
index 0000000000..c455505a39
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/refresh.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/resize-full.svg b/mynah-ui/src/components/icon/icons/resize-full.svg
new file mode 100644
index 0000000000..40e34946df
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/resize-full.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/resize-small.svg b/mynah-ui/src/components/icon/icons/resize-small.svg
new file mode 100644
index 0000000000..bbd78784ca
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/resize-small.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/revert.svg b/mynah-ui/src/components/icon/icons/revert.svg
new file mode 100644
index 0000000000..27fc9c5955
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/revert.svg
@@ -0,0 +1,6 @@
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/right-open.svg b/mynah-ui/src/components/icon/icons/right-open.svg
new file mode 100644
index 0000000000..efaf299fee
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/right-open.svg
@@ -0,0 +1,14 @@
+
+Created with Fabric.js 5.2.4
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/rocket.svg b/mynah-ui/src/components/icon/icons/rocket.svg
new file mode 100644
index 0000000000..65f6fbb3e0
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/rocket.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/scroll-down.svg b/mynah-ui/src/components/icon/icons/scroll-down.svg
new file mode 100644
index 0000000000..a25ba154c5
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/scroll-down.svg
@@ -0,0 +1,7 @@
+
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/search.svg b/mynah-ui/src/components/icon/icons/search.svg
new file mode 100644
index 0000000000..f9af16220e
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/search.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/shell.svg b/mynah-ui/src/components/icon/icons/shell.svg
new file mode 100644
index 0000000000..db314aea5f
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/shell.svg
@@ -0,0 +1,7 @@
+
+
+ Layer 1
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/stack.svg b/mynah-ui/src/components/icon/icons/stack.svg
new file mode 100644
index 0000000000..026cbb43f6
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/stack.svg
@@ -0,0 +1,7 @@
+
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/star.svg b/mynah-ui/src/components/icon/icons/star.svg
new file mode 100644
index 0000000000..d024a0171c
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/star.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/stop.svg b/mynah-ui/src/components/icon/icons/stop.svg
new file mode 100644
index 0000000000..b1cd51149d
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/stop.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/tabs.svg b/mynah-ui/src/components/icon/icons/tabs.svg
new file mode 100644
index 0000000000..75090e666f
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/tabs.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/text-select.svg b/mynah-ui/src/components/icon/icons/text-select.svg
new file mode 100644
index 0000000000..fb060b8c73
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/text-select.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/thumbs-down.svg b/mynah-ui/src/components/icon/icons/thumbs-down.svg
new file mode 100644
index 0000000000..6638bcd88f
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/thumbs-down.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/thumbs-up.svg b/mynah-ui/src/components/icon/icons/thumbs-up.svg
new file mode 100644
index 0000000000..d759c595e2
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/thumbs-up.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/tools.svg b/mynah-ui/src/components/icon/icons/tools.svg
new file mode 100644
index 0000000000..723c1de3f9
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/tools.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/transform.svg b/mynah-ui/src/components/icon/icons/transform.svg
new file mode 100644
index 0000000000..c44cd2cfcd
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/transform.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/trash.svg b/mynah-ui/src/components/icon/icons/trash.svg
new file mode 100644
index 0000000000..1acda43692
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/trash.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/icon/icons/undo.svg b/mynah-ui/src/components/icon/icons/undo.svg
new file mode 100644
index 0000000000..8788e7c80e
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/undo.svg
@@ -0,0 +1,7 @@
+
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/up-open.svg b/mynah-ui/src/components/icon/icons/up-open.svg
new file mode 100644
index 0000000000..fd5365cc96
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/up-open.svg
@@ -0,0 +1,7 @@
+
+
+
+ Layer 1
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/icon/icons/user.svg b/mynah-ui/src/components/icon/icons/user.svg
new file mode 100644
index 0000000000..6e59672044
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/user.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
diff --git a/mynah-ui/src/components/icon/icons/warning.svg b/mynah-ui/src/components/icon/icons/warning.svg
new file mode 100644
index 0000000000..17b8f92a33
--- /dev/null
+++ b/mynah-ui/src/components/icon/icons/warning.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/mynah-ui/src/components/more-content-indicator.ts b/mynah-ui/src/components/more-content-indicator.ts
new file mode 100644
index 0000000000..cb66007c39
--- /dev/null
+++ b/mynah-ui/src/components/more-content-indicator.ts
@@ -0,0 +1,55 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// eslint-disable @typescript-eslint/restrict-template-expressions
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { Icon, MynahIcons, MynahIconsType } from './icon';
+import { Button } from './button';
+import { StyleLoader } from '../helper/style-loader';
+
+interface MoreContentIndicatorProps {
+ icon?: MynahIcons | MynahIconsType;
+ border?: boolean;
+ testId?: string;
+ onClick: () => void;
+}
+export class MoreContentIndicator {
+ render: ExtendedHTMLElement;
+ private props: MoreContentIndicatorProps;
+ private button: Button;
+ private readonly uid: string;
+ private readonly icon: ExtendedHTMLElement;
+ constructor(props: MoreContentIndicatorProps) {
+ StyleLoader.getInstance().load('components/_more-content-indicator.scss');
+ this.props = props;
+ this.button = this.getButton();
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['more-content-indicator'],
+ testId: props.testId,
+ children: [this.button.render],
+ });
+ }
+
+ private readonly getButton = (): Button => {
+ return new Button({
+ icon: new Icon({ icon: this.props.icon ?? MynahIcons.SCROLL_DOWN }).render,
+ primary: false,
+ fillState: 'hover',
+ border: this.props.border !== false,
+ onClick: this.props.onClick,
+ });
+ };
+
+ public update = (props: Partial): void => {
+ this.props = {
+ ...this.props,
+ ...props,
+ };
+ const newButton = this.getButton();
+ this.button.render.replaceWith(newButton.render);
+ this.button = newButton;
+ };
+}
diff --git a/mynah-ui/src/components/navigation-tab-bar-buttons.ts b/mynah-ui/src/components/navigation-tab-bar-buttons.ts
new file mode 100644
index 0000000000..2d28d17080
--- /dev/null
+++ b/mynah-ui/src/components/navigation-tab-bar-buttons.ts
@@ -0,0 +1,178 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { MynahUIGlobalEvents } from '../helper/events';
+import { MynahUITabsStore } from '../helper/tabs-store';
+import testIds from '../helper/test-ids';
+import { MynahEventNames, TabBarAction, TabBarMainAction } from '../static';
+import { Button } from './button';
+import { Icon } from './icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from './overlay';
+
+export interface TabBarButtonsWrapperProps {
+ onButtonClick?: (selectedTabId: string, buttonId: string) => void;
+}
+export class TabBarButtonsWrapper {
+ render: ExtendedHTMLElement;
+ private selectedTabId: string;
+ private tabBarButtonsSubscription: { subsId: string | null; tabId: string } | null = null;
+ private readonly props: TabBarButtonsWrapperProps;
+
+ constructor(props?: TabBarButtonsWrapperProps) {
+ this.props = props ?? {};
+ this.selectedTabId = MynahUITabsStore.getInstance().getSelectedTabId();
+ this.handleTabBarButtonsChange();
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.tabBar.buttonsWrapper,
+ persistent: true,
+ classNames: ['mynah-nav-tabs-bar-buttons-wrapper'],
+ children: this.getTabsBarButtonsRender(this.selectedTabId),
+ });
+
+ MynahUITabsStore.getInstance().addListener('selectedTabChange', (selectedTabId) => {
+ this.selectedTabId = selectedTabId;
+ this.handleTabBarButtonsChange();
+ this.render.clear();
+ this.render.update({
+ children: this.getTabsBarButtonsRender(selectedTabId),
+ });
+ });
+ }
+
+ private readonly handleTabBarButtonsChange = (): void => {
+ if (this.tabBarButtonsSubscription?.subsId != null) {
+ MynahUITabsStore.getInstance().removeListenerFromDataStore(
+ this.tabBarButtonsSubscription.tabId,
+ this.tabBarButtonsSubscription.subsId,
+ 'tabBarButtons',
+ );
+ }
+ this.tabBarButtonsSubscription = {
+ subsId: MynahUITabsStore.getInstance().addListenerToDataStore(
+ this.selectedTabId,
+ 'tabBarButtons',
+ (tabBarButtons) => {
+ this.render.clear();
+ this.render.update({
+ children: this.getTabsBarButtonsRender(this.selectedTabId, tabBarButtons),
+ });
+ },
+ ),
+ tabId: this.selectedTabId,
+ };
+ };
+
+ private readonly getTabsBarButtonsRender = (
+ selectedTabId: string,
+ givenTabBarButtons?: TabBarMainAction[],
+ ): ExtendedHTMLElement[] => {
+ let tabBarButtons = Config.getInstance().config.tabBarButtons ?? [];
+ if (givenTabBarButtons != null) {
+ tabBarButtons = givenTabBarButtons;
+ } else {
+ const tabBarButtonsFromTabStore = MynahUITabsStore.getInstance()
+ .getTabDataStore(selectedTabId)
+ ?.getValue('tabBarButtons');
+ if (tabBarButtonsFromTabStore != null && tabBarButtonsFromTabStore.length > 0) {
+ tabBarButtons = tabBarButtonsFromTabStore;
+ }
+ }
+ return tabBarButtons.map(
+ (tabBarButton: TabBarMainAction) =>
+ new TabBarButtonWithMultipleOptions({
+ onButtonClick: (tabBarAction) => {
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.TAB_BAR_BUTTON_CLICK, {
+ tabId: selectedTabId,
+ buttonId: tabBarAction.id,
+ });
+ if (this.props.onButtonClick != null) {
+ this.props.onButtonClick(selectedTabId, tabBarAction.id);
+ }
+ },
+ tabBarActionButton: tabBarButton,
+ }).render,
+ );
+ };
+}
+
+interface TabBarButtonWithMultipleOptionsProps {
+ onButtonClick: (action: TabBarAction) => void;
+ tabBarActionButton: TabBarMainAction;
+}
+export class TabBarButtonWithMultipleOptions {
+ render: ExtendedHTMLElement;
+ private buttonOptionsOverlay: Overlay | undefined;
+ private readonly props: TabBarButtonWithMultipleOptionsProps;
+
+ constructor(props: TabBarButtonWithMultipleOptionsProps) {
+ this.props = props;
+ this.render = new Button({
+ testId:
+ this.props.tabBarActionButton.items != null && this.props.tabBarActionButton.items?.length > 0
+ ? testIds.tabBar.menuButton
+ : testIds.tabBar.button,
+ label: this.props.tabBarActionButton.text,
+ tooltip: this.props.tabBarActionButton.description,
+ // confirmation: this.props.tabBarActionButton.confirmation,
+ disabled: this.props.tabBarActionButton.disabled,
+ tooltipVerticalDirection: OverlayVerticalDirection.TO_BOTTOM,
+ tooltipHorizontalDirection: OverlayHorizontalDirection.CENTER,
+ icon:
+ this.props.tabBarActionButton.icon != null
+ ? new Icon({ icon: this.props.tabBarActionButton.icon }).render
+ : undefined,
+ primary: false,
+ onClick: () => {
+ if (this.props.tabBarActionButton.items != null && this.props.tabBarActionButton.items?.length > 0) {
+ this.showButtonOptionsOverlay(this.props.tabBarActionButton.items);
+ } else {
+ this.props.onButtonClick(this.props.tabBarActionButton);
+ }
+ },
+ }).render;
+ }
+
+ private readonly showButtonOptionsOverlay = (items: TabBarAction[]): void => {
+ this.buttonOptionsOverlay = new Overlay({
+ background: true,
+ closeOnOutsideClick: true,
+ referenceElement: this.render,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_BOTTOM,
+ horizontalDirection: OverlayHorizontalDirection.END_TO_LEFT,
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-nav-tabs-bar-buttons-wrapper-overlay'],
+ children: items.map(
+ (item) =>
+ new Button({
+ testId: testIds.tabBar.menuOption,
+ confirmation: item.confirmation,
+ label: item.text,
+ icon: item.icon != null ? new Icon({ icon: item.icon }).render : undefined,
+ primary: false,
+ onClick: () => {
+ this.hideButtonOptionsOverlay();
+ this.props.onButtonClick(item);
+ },
+ }).render,
+ ),
+ },
+ ],
+ });
+ };
+
+ private readonly hideButtonOptionsOverlay = (): void => {
+ if (this.buttonOptionsOverlay !== undefined) {
+ this.buttonOptionsOverlay.close();
+ this.buttonOptionsOverlay = undefined;
+ }
+ };
+}
diff --git a/mynah-ui/src/components/navigation-tabs.ts b/mynah-ui/src/components/navigation-tabs.ts
new file mode 100644
index 0000000000..dfc867741b
--- /dev/null
+++ b/mynah-ui/src/components/navigation-tabs.ts
@@ -0,0 +1,281 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { cancelEvent } from '../helper/events';
+import { MynahUITabsStore } from '../helper/tabs-store';
+import { MynahUITabStoreTab } from '../static';
+import { Button } from './button';
+import { Card } from './card/card';
+import { CardBody } from './card/card-body';
+import { Icon, MynahIcons } from './icon';
+import { TabBarButtonsWrapper } from './navigation-tab-bar-buttons';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from './overlay';
+import { Tab, ToggleOption } from './tabs';
+import { DEFAULT_TIMEOUT } from './notification';
+import testIds from '../helper/test-ids';
+import { StyleLoader } from '../helper/style-loader';
+
+export interface TabsProps {
+ onChange?: (selectedTabId: string) => void;
+ noMoreTabsTooltip?: string;
+ onBeforeTabRemove?: (tabId: string) => boolean;
+ maxTabsTooltipDuration?: number;
+}
+export class Tabs {
+ render: ExtendedHTMLElement;
+ private tabIdTitleSubscriptions: Record = {};
+ private tabIdChatItemsSubscriptions: Record = {};
+ private toggleGroup: Tab;
+ private maxReachedOverlay: Overlay | undefined;
+ private closeConfirmationOverlay: Overlay | undefined;
+ private readonly props: TabsProps;
+
+ constructor(props: TabsProps) {
+ StyleLoader.getInstance().load('components/_nav-tabs.scss');
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.tabBar.wrapper,
+ persistent: true,
+ classNames: ['mynah-nav-tabs-wrapper'],
+ events: {
+ dblclick: (e) => {
+ cancelEvent(e);
+ if (MynahUITabsStore.getInstance().tabsLength() < Config.getInstance().config.maxTabs) {
+ MynahUITabsStore.getInstance().addTab();
+ }
+ },
+ },
+ children: [
+ ...this.getTabsRender(MynahUITabsStore.getInstance().getSelectedTabId()),
+ new TabBarButtonsWrapper().render,
+ ],
+ });
+
+ MynahUITabsStore.getInstance().addListener('add', (tabId, tabData) => {
+ this.assignListener(tabId);
+ this.toggleGroup.addOption({
+ value: tabId,
+ label: tabData?.store?.tabTitle,
+ selected: tabData?.isSelected,
+ });
+ this.render.setAttribute('selected-tab', tabId);
+ });
+ MynahUITabsStore.getInstance().addListener('remove', (tabId, newSelectedTab?: MynahUITabStoreTab) => {
+ this.removeListenerAssignments(tabId);
+ this.toggleGroup.removeOption(tabId);
+ if (newSelectedTab !== undefined) {
+ this.toggleGroup.snapToOption(MynahUITabsStore.getInstance().getSelectedTabId());
+ }
+ this.render.setAttribute('selected-tab', MynahUITabsStore.getInstance().getSelectedTabId());
+ });
+ MynahUITabsStore.getInstance().addListener('selectedTabChange', (selectedTabId) => {
+ this.render.setAttribute('selected-tab', selectedTabId);
+ this.toggleGroup.setValue(selectedTabId);
+ });
+ }
+
+ private readonly getTabOptionsFromTabStoreData = (): ToggleOption[] => {
+ const tabs = MynahUITabsStore.getInstance().getAllTabs();
+ return Object.keys(tabs).map((tabId: string) => {
+ const tabOption = {
+ value: tabId,
+ label: tabs[tabId].store?.tabTitle,
+ icon: tabs[tabId].store?.tabIcon,
+ pinned: tabs[tabId].store?.pinned,
+ selected: tabs[tabId].isSelected,
+ };
+ return tabOption;
+ });
+ };
+
+ private readonly getTabsRender = (selectedTabId?: string): ExtendedHTMLElement[] => {
+ const tabs = this.getTabOptionsFromTabStoreData();
+ tabs.forEach((tab) => {
+ this.assignListener(tab.value);
+ });
+ this.toggleGroup = new Tab({
+ testId: testIds.tabBar.tabsWrapper,
+ onChange: (selectedTabId: string) => {
+ MynahUITabsStore.getInstance().selectTab(selectedTabId);
+ if (this.props.onChange !== undefined) {
+ this.props.onChange(selectedTabId);
+ }
+ },
+ onRemove: (selectedTabId, domElement: ExtendedHTMLElement) => {
+ if (this.props.onBeforeTabRemove !== undefined && !this.props.onBeforeTabRemove(selectedTabId)) {
+ this.showCloseTabConfirmationOverLay(domElement, selectedTabId);
+ } else {
+ MynahUITabsStore.getInstance().removeTab(selectedTabId);
+ }
+ },
+ name: 'mynah-main-tabs',
+ options: tabs,
+ value: selectedTabId,
+ });
+ return [
+ this.toggleGroup.render,
+ new Button({
+ testId: testIds.tabBar.tabAddButton,
+ classNames: ['mynah-tabs-close-button'],
+ additionalEvents: {
+ mouseenter: (e) => {
+ if (MynahUITabsStore.getInstance().tabsLength() === Config.getInstance().config.maxTabs) {
+ this.showMaxReachedOverLay(
+ e.currentTarget,
+ this.props.noMoreTabsTooltip ?? Config.getInstance().config.texts.noMoreTabsTooltip,
+ this.props.maxTabsTooltipDuration,
+ );
+ }
+ },
+ mouseleave: () => {
+ this.hideMaxReachedOverLay();
+ },
+ },
+ onClick: (e) => {
+ cancelEvent(e);
+ if (MynahUITabsStore.getInstance().tabsLength() < Config.getInstance().config.maxTabs) {
+ MynahUITabsStore.getInstance().addTab();
+ }
+ },
+ icon: new Icon({ icon: MynahIcons.PLUS }).render,
+ primary: false,
+ }).render,
+ ];
+ };
+
+ private readonly showMaxReachedOverLay = (elm: HTMLElement, markdownText: string, duration?: number): void => {
+ this.maxReachedOverlay = new Overlay({
+ testId: testIds.tabBar.maxTabsReachedOverlay,
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_BOTTOM,
+ horizontalDirection: OverlayHorizontalDirection.CENTER,
+ children: [
+ new Card({
+ border: false,
+ classNames: ['mynah-nav-tabs-max-reached-overlay'],
+ children: [
+ new CardBody({
+ body: markdownText,
+ }).render,
+ ],
+ }).render,
+ ],
+ });
+
+ if (duration !== undefined && duration !== -1) {
+ setTimeout(() => {
+ this.hideMaxReachedOverLay();
+ }, duration);
+ } else if (duration === undefined) {
+ setTimeout(() => {
+ this.hideMaxReachedOverLay();
+ }, DEFAULT_TIMEOUT);
+ }
+ };
+
+ private readonly hideMaxReachedOverLay = (): void => {
+ if (this.maxReachedOverlay !== undefined) {
+ this.maxReachedOverlay.close();
+ this.maxReachedOverlay = undefined;
+ }
+ };
+
+ private readonly showCloseTabConfirmationOverLay = (elm: HTMLElement, selectedTabId: string): void => {
+ this.closeConfirmationOverlay = new Overlay({
+ testId: testIds.tabBar.tabCloseConfirmationOverlay,
+ background: true,
+ closeOnOutsideClick: true,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_BOTTOM,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [
+ new Card({
+ border: false,
+ classNames: ['mynah-nav-tabs-close-confirmation-overlay'],
+ children: [
+ new CardBody({
+ testId: testIds.tabBar.tabCloseConfirmationBody,
+ body:
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(selectedTabId)
+ .getValue('tabCloseConfirmationMessage') ??
+ Config.getInstance().config.texts.tabCloseConfirmationMessage,
+ }).render,
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-nav-tabs-close-confirmation-buttons-wrapper'],
+ children: [
+ new Button({
+ testId: testIds.tabBar.tabCloseConfirmationCancelButton,
+ onClick: () => {
+ this.hideshowCloseTabConfirmationOverLay();
+ },
+ label:
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(selectedTabId)
+ .getValue('tabCloseConfirmationKeepButton') ??
+ Config.getInstance().config.texts.tabCloseConfirmationKeepButton,
+ }).render,
+ new Button({
+ testId: testIds.tabBar.tabCloseConfirmationAcceptButton,
+ onClick: () => {
+ MynahUITabsStore.getInstance().removeTab(selectedTabId);
+ this.hideshowCloseTabConfirmationOverLay();
+ },
+ classNames: ['mynah-nav-tabs-close-confirmation-close-button'],
+ label:
+ MynahUITabsStore.getInstance()
+ .getTabDataStore(selectedTabId)
+ .getValue('tabCloseConfirmationCloseButton') ??
+ Config.getInstance().config.texts.tabCloseConfirmationCloseButton,
+ }).render,
+ ],
+ }),
+ ],
+ }).render,
+ ],
+ });
+ };
+
+ private readonly hideshowCloseTabConfirmationOverLay = (): void => {
+ if (this.closeConfirmationOverlay !== undefined) {
+ this.closeConfirmationOverlay.close();
+ this.closeConfirmationOverlay = undefined;
+ }
+ };
+
+ private readonly assignListener = (tabId: string): void => {
+ this.tabIdTitleSubscriptions[tabId] =
+ MynahUITabsStore.getInstance().addListenerToDataStore(tabId, 'tabTitle', (title) => {
+ this.toggleGroup.updateOptionTitle(tabId, title);
+ }) ?? '';
+ this.tabIdChatItemsSubscriptions[tabId] =
+ MynahUITabsStore.getInstance().addListenerToDataStore(tabId, 'chatItems', () => {
+ this.toggleGroup.updateOptionIndicator(tabId, true);
+ }) ?? '';
+ };
+
+ private readonly removeListenerAssignments = (tabId: string): void => {
+ MynahUITabsStore.getInstance().removeListenerFromDataStore(
+ tabId,
+ this.tabIdTitleSubscriptions[tabId],
+ 'tabTitle',
+ );
+ MynahUITabsStore.getInstance().removeListenerFromDataStore(
+ tabId,
+ this.tabIdChatItemsSubscriptions[tabId],
+ 'chatItems',
+ );
+ };
+}
diff --git a/mynah-ui/src/components/no-tabs.ts b/mynah-ui/src/components/no-tabs.ts
new file mode 100644
index 0000000000..7cbf3db507
--- /dev/null
+++ b/mynah-ui/src/components/no-tabs.ts
@@ -0,0 +1,70 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { cancelEvent } from '../helper/events';
+import { MynahUITabsStore } from '../helper/tabs-store';
+import { Button } from './button';
+import { Icon, MynahIcons } from './icon';
+import testIds from '../helper/test-ids';
+import { parseMarkdown } from '../helper/marked';
+import { StyleLoader } from '../helper/style-loader';
+
+export class NoTabs {
+ render: ExtendedHTMLElement;
+ constructor() {
+ StyleLoader.getInstance().load('components/_no-tabs.scss');
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.noTabs.wrapper,
+ persistent: true,
+ classNames: [
+ 'mynah-no-tabs-wrapper',
+ ...(MynahUITabsStore.getInstance().tabsLength() > 0 ? ['hidden'] : []),
+ ],
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-no-tabs-icon-wrapper'],
+ children: [new Icon({ icon: MynahIcons.TABS }).render],
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-no-tabs-info'],
+ innerHTML: parseMarkdown(Config.getInstance().config.texts.noTabsOpen ?? ''),
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-no-tabs-buttons-wrapper'],
+ children: [
+ new Button({
+ testId: testIds.noTabs.newTabButton,
+ onClick: (e) => {
+ cancelEvent(e);
+ if (MynahUITabsStore.getInstance().tabsLength() < Config.getInstance().config.maxTabs) {
+ MynahUITabsStore.getInstance().addTab();
+ }
+ },
+ status: 'main',
+ icon: new Icon({ icon: MynahIcons.PLUS }).render,
+ label: Config.getInstance().config.texts.openNewTab,
+ }).render,
+ ],
+ },
+ ],
+ });
+
+ MynahUITabsStore.getInstance().addListener('add', () => {
+ this.render.addClass('hidden');
+ });
+
+ MynahUITabsStore.getInstance().addListener('remove', () => {
+ if (MynahUITabsStore.getInstance().tabsLength() === 0) {
+ this.render.removeClass('hidden');
+ }
+ });
+ }
+}
diff --git a/mynah-ui/src/components/notification.ts b/mynah-ui/src/components/notification.ts
new file mode 100644
index 0000000000..74484c0013
--- /dev/null
+++ b/mynah-ui/src/components/notification.ts
@@ -0,0 +1,121 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilderObject, DS, ExtendedHTMLElement } from '../helper/dom';
+import { cancelEvent } from '../helper/events';
+import { NotificationType } from '../static';
+import { Icon, MynahIcons } from './icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection, OVERLAY_MARGIN } from './overlay';
+import testIds from '../helper/test-ids';
+import { StyleLoader } from '../helper/style-loader';
+
+type NotificationContentType = string | ExtendedHTMLElement | HTMLElement | DomBuilderObject;
+
+export const DEFAULT_TIMEOUT = 5000;
+
+export interface NotificationProps {
+ duration?: number;
+ type?: NotificationType;
+ title?: string;
+ content: NotificationContentType | NotificationContentType[];
+ onNotificationClick?: () => void;
+ onNotificationHide?: () => void;
+}
+
+export class Notification {
+ private notificationOverlay!: Overlay;
+ private readonly duration;
+ private readonly type;
+ private readonly props;
+
+ constructor(props: NotificationProps) {
+ StyleLoader.getInstance().load('components/_notification.scss');
+ this.duration = props.duration ?? DEFAULT_TIMEOUT;
+ this.type = props.type ?? NotificationType.INFO;
+ this.props = props;
+ }
+
+ public notify(): void {
+ this.notificationOverlay = new Overlay({
+ referencePoint: {
+ left: Math.max(document.documentElement.clientWidth ?? 0, window.innerWidth ?? 0),
+ top: this.getNextCalculatedTop(),
+ },
+ dimOutside: false,
+ closeOnOutsideClick: false,
+ horizontalDirection: OverlayHorizontalDirection.TO_LEFT,
+ verticalDirection: OverlayVerticalDirection.TO_BOTTOM,
+ onClose: this.props.onNotificationHide,
+ children: [
+ {
+ type: 'div',
+ testId: testIds.notification.wrapper,
+ classNames: [
+ 'mynah-notification',
+ this.props.onNotificationClick != null ? 'mynah-notification-clickable' : '',
+ ],
+ events: {
+ click: (e) => {
+ cancelEvent(e);
+ if (this.props.onNotificationClick != null) {
+ this.props.onNotificationClick();
+ this.notificationOverlay?.close();
+ }
+ },
+ },
+ children: [
+ new Icon({ icon: this.type.toString() as MynahIcons }).render,
+ {
+ type: 'div',
+ classNames: ['mynah-notification-container'],
+ children: [
+ {
+ type: 'h3',
+ testId: testIds.notification.title,
+ classNames: ['mynah-notification-title'],
+ children: [this.props.title ?? ''],
+ },
+ {
+ type: 'div',
+ testId: testIds.notification.content,
+ classNames: ['mynah-notification-content'],
+ children: this.getChildren(this.props.content),
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ });
+
+ if (this.duration !== -1) {
+ setTimeout(() => {
+ this.notificationOverlay?.close();
+ }, this.duration);
+ }
+ }
+
+ /**
+ * Calculates the top according to the previously shown and still visible notifications
+ * @returns number
+ */
+ private readonly getNextCalculatedTop = (): number => {
+ const prevNotifications = DS('.mynah-notification');
+ if (prevNotifications.length > 0) {
+ const prevNotificationRectangle = prevNotifications[prevNotifications.length - 1].getBoundingClientRect();
+ return prevNotificationRectangle.top + prevNotificationRectangle.height + OVERLAY_MARGIN;
+ }
+ return 0;
+ };
+
+ private readonly getChildren = (
+ content: NotificationContentType | NotificationContentType[],
+ ): NotificationContentType[] => {
+ if (content instanceof Array) {
+ return content;
+ }
+ return [content];
+ };
+}
diff --git a/mynah-ui/src/components/overlay.ts b/mynah-ui/src/components/overlay.ts
new file mode 100644
index 0000000000..78b910e22a
--- /dev/null
+++ b/mynah-ui/src/components/overlay.ts
@@ -0,0 +1,323 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* eslint-disable @typescript-eslint/brace-style */
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../helper/dom';
+import { generateUID } from '../helper/guid';
+import { StyleLoader } from '../helper/style-loader';
+import { MynahPortalNames } from '../static';
+
+export const OVERLAY_MARGIN = 8;
+/**
+ * The horizontal creation direction of the overlay
+ */
+export enum OverlayHorizontalDirection {
+ /**
+ * starts from the left edge of the reference element and opens to left
+ */
+ TO_LEFT = 'horizontal-direction-to-left',
+ /**
+ * starts from the right edge of the reference element and opens to left
+ */
+ END_TO_LEFT = 'horizontal-direction-from-end-to-left',
+ /**
+ * starts from the right edge of the reference element and opens to right
+ */
+ TO_RIGHT = 'horizontal-direction-to-right',
+ /**
+ * starts from the left edge of the reference element and opens to right
+ */
+ START_TO_RIGHT = 'horizontal-direction-from-start-to-right',
+ /**
+ * starts and opens at the center of the reference element
+ */
+ CENTER = 'horizontal-direction-at-center',
+}
+
+/**
+ * The vertical creation direction of the overlay
+ */
+export enum OverlayVerticalDirection {
+ /**
+ * starts from the bottom edge of the reference element and opens to bottom
+ */
+ TO_BOTTOM = 'vertical-direction-to-bottom',
+ /**
+ * starts from the top edge of the reference element and opens to bottom
+ */
+ START_TO_BOTTOM = 'vertical-direction-from-start-to-bottom',
+ /**
+ * starts from the top edge of the reference element and opens to top
+ */
+ TO_TOP = 'vertical-direction-to-top',
+ /**
+ * starts from the bottom edge of the reference element and opens to top
+ */
+ END_TO_TOP = 'vertical-direction-from-end-to-top',
+ /**
+ * starts and opens at the center of the reference element
+ */
+ CENTER = 'vertical-direction-at-center',
+}
+
+export interface OverlayProps {
+ testId?: string;
+ referenceElement?: HTMLElement | ExtendedHTMLElement;
+ removeIfReferenceElementRemoved?: boolean;
+ referencePoint?: { top: number; left: number };
+ children: Array;
+ horizontalDirection?: OverlayHorizontalDirection;
+ verticalDirection?: OverlayVerticalDirection;
+ stretchWidth?: boolean;
+ dimOutside?: boolean;
+ closeOnOutsideClick?: boolean;
+ background?: boolean;
+ onClose?: () => void;
+ removeOtherOverlays?: boolean;
+}
+export class Overlay {
+ render: ExtendedHTMLElement;
+ private readonly container: ExtendedHTMLElement;
+ private readonly innerContainer: ExtendedHTMLElement;
+ private readonly guid = generateUID();
+ private readonly onClose;
+
+ constructor(props: OverlayProps) {
+ StyleLoader.getInstance().load('components/_overlay.scss');
+ const horizontalDirection = props.horizontalDirection ?? OverlayHorizontalDirection.TO_RIGHT;
+ const verticalDirection = props.verticalDirection ?? OverlayVerticalDirection.START_TO_BOTTOM;
+ this.onClose = props.onClose;
+ const dimOutside = props.dimOutside !== false;
+ const closeOnOutsideClick = props.closeOnOutsideClick !== false;
+
+ const calculatedTop = this.getCalculatedTop(verticalDirection, props.referenceElement, props.referencePoint);
+ const calculatedLeft = this.getCalculatedLeft(
+ horizontalDirection,
+ props.referenceElement,
+ props.referencePoint,
+ );
+ const calculatedWidth = props.stretchWidth === true ? this.getCalculatedWidth(props.referenceElement) : 0;
+
+ this.innerContainer = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-overlay-inner-container'],
+ children: props.children,
+ });
+
+ this.container = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: [
+ 'mynah-overlay-container',
+ horizontalDirection,
+ verticalDirection,
+ props.background !== false ? 'background' : '',
+ ],
+ attributes: {
+ style: `top: ${calculatedTop}px; left: ${calculatedLeft}px; ${calculatedWidth !== 0 ? `width: ${calculatedWidth}px;` : ''}`,
+ },
+ children: [this.innerContainer],
+ });
+
+ if (props.removeOtherOverlays === true) {
+ DomBuilder.getInstance().removeAllPortals(MynahPortalNames.OVERLAY);
+ }
+
+ // this is a portal that goes over all the other items
+ // to make it as an overlay item
+ this.render = DomBuilder.getInstance().createPortal(
+ `${MynahPortalNames.OVERLAY}-${this.guid}`,
+ {
+ type: 'div',
+ testId: props.testId,
+ attributes: { id: `mynah-overlay-${this.guid}` },
+ classNames: [
+ 'mynah-overlay',
+ ...(dimOutside ? ['mynah-overlay-dim-outside'] : []),
+ ...(closeOnOutsideClick ? ['mynah-overlay-close-on-outside-click'] : []),
+ ],
+ events: {
+ click: closeOnOutsideClick
+ ? (event: MouseEvent) => {
+ // Only close if the click is outside the overlay
+ if (event.target === event.currentTarget) {
+ this.close();
+ }
+ }
+ : () => {},
+ },
+ children: [this.container],
+ },
+ 'beforeend',
+ );
+
+ // Screen edge fixes
+ const winHeight = Math.max(document.documentElement.clientHeight ?? 0, window.innerHeight ?? 0);
+ const winWidth = Math.max(document.documentElement.clientWidth ?? 0, window.innerWidth ?? 0);
+ const lastContainerRect = this.container.getBoundingClientRect();
+ const effectiveTop = parseFloat(this.container.style.top ?? '0');
+ const effectiveLeft = parseFloat(this.container.style.left ?? '0');
+
+ // Vertical edge
+ // Check top exceeding
+ if (lastContainerRect.top < OVERLAY_MARGIN) {
+ this.container.style.top = `${effectiveTop + (OVERLAY_MARGIN - lastContainerRect.top)}px`;
+ } // Check bottom exceeding
+ else if (lastContainerRect.top + lastContainerRect.height + OVERLAY_MARGIN > winHeight) {
+ this.container.style.top = `${effectiveTop - (lastContainerRect.top + lastContainerRect.height + OVERLAY_MARGIN - winHeight)}px`;
+ }
+
+ // Horizontal edge
+ // Check left exceeding
+ if (lastContainerRect.left < OVERLAY_MARGIN) {
+ this.container.style.left = `${effectiveLeft + (OVERLAY_MARGIN - lastContainerRect.left)}px`;
+ } // Check right exceeding
+ else if (lastContainerRect.left + lastContainerRect.width + OVERLAY_MARGIN > winWidth) {
+ this.container.style.left = `${effectiveLeft - (lastContainerRect.left + lastContainerRect.width + OVERLAY_MARGIN - winWidth)}px`;
+ }
+
+ this.preventTransformBlur();
+
+ // Check if reference element is still on dom tree
+ if (
+ MutationObserver != null &&
+ props.removeIfReferenceElementRemoved !== false &&
+ props.referenceElement != null
+ ) {
+ const observer = new MutationObserver(() => {
+ if (!document.contains(props.referenceElement as HTMLElement)) {
+ this.close();
+ observer.disconnect();
+ }
+ });
+
+ // Observe the document body for any subtree modifications
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+ }
+
+ // we need to delay the class toggle
+ // to avoid the skipping of the transition comes from css
+ // for a known js-css relation problem
+ setTimeout(() => {
+ this.render.addClass('mynah-overlay-open');
+
+ if (closeOnOutsideClick) {
+ window.addEventListener('blur', this.windowBlurHandler.bind(this));
+ window.addEventListener('resize', this.windowBlurHandler.bind(this));
+ }
+ }, 10);
+ }
+
+ /**
+ * Applying a transform with a fractional pixel value causes bluriness on certain displays.
+ *
+ * Since transform uses --overlayTopPos which is a percentage of the overlay's height, and the height can be a fractional
+ * pixel value if line-height is fractional, this function rounds --overlayTopPos to an integer pixel value to prevent bluriness.
+ */
+ private readonly preventTransformBlur = (): void => {
+ if (ResizeObserver != null) {
+ const observer = new ResizeObserver(() => {
+ const lastContainerRect = this.container.getBoundingClientRect();
+ const height = lastContainerRect.height;
+
+ const style = getComputedStyle(this.container);
+ const shiftPercent = parseFloat(style.getPropertyValue('--overlayTopPos'));
+
+ const shiftPixels = Math.round((height * shiftPercent) / 100);
+
+ this.container.style.transform = `translate3d(var(--overlayLeftPos), ${shiftPixels}px, 0)`;
+ });
+
+ observer.observe(this.container);
+ }
+ };
+
+ close = (): void => {
+ this.render.removeClass('mynah-overlay-open');
+ // In this timeout, we're waiting the close animation to be ended
+ setTimeout(() => {
+ this.render.remove();
+ }, 250);
+ if (this.onClose !== undefined) {
+ this.onClose();
+ }
+ };
+
+ private readonly windowBlurHandler = (): void => {
+ this.close();
+ window.removeEventListener('blur', this.windowBlurHandler.bind(this));
+ window.removeEventListener('resize', this.windowBlurHandler.bind(this));
+ };
+
+ private readonly getCalculatedLeft = (
+ horizontalDirection: OverlayHorizontalDirection,
+ referenceElement?: HTMLElement | ExtendedHTMLElement,
+ referencePoint?: { top?: number; left: number },
+ ): number => {
+ const referenceRectangle =
+ referenceElement !== undefined
+ ? referenceElement.getBoundingClientRect()
+ : referencePoint !== undefined
+ ? { left: referencePoint.left, width: 0 }
+ : { left: 0, width: 0 };
+
+ switch (horizontalDirection.toString()) {
+ case OverlayHorizontalDirection.TO_RIGHT:
+ return referenceRectangle.left + referenceRectangle.width + OVERLAY_MARGIN;
+ case OverlayHorizontalDirection.START_TO_RIGHT:
+ return referenceRectangle.left;
+ case OverlayHorizontalDirection.TO_LEFT:
+ return referenceRectangle.left - OVERLAY_MARGIN;
+ case OverlayHorizontalDirection.END_TO_LEFT:
+ return referenceRectangle.left + referenceRectangle.width;
+ case OverlayHorizontalDirection.CENTER:
+ return referenceRectangle.left + referenceRectangle.width / 2;
+ default:
+ return 0;
+ }
+ };
+
+ private readonly getCalculatedWidth = (referenceElement?: HTMLElement | ExtendedHTMLElement): number => {
+ return referenceElement !== undefined ? referenceElement.getBoundingClientRect().width : 0;
+ };
+
+ private readonly getCalculatedTop = (
+ verticalDirection: OverlayVerticalDirection,
+ referenceElement?: HTMLElement | ExtendedHTMLElement,
+ referencePoint?: { top: number; left?: number },
+ ): number => {
+ const referenceRectangle =
+ referenceElement !== undefined
+ ? referenceElement.getBoundingClientRect()
+ : referencePoint !== undefined
+ ? { top: referencePoint.top, height: 0 }
+ : { top: 0, height: 0 };
+
+ switch (verticalDirection.toString()) {
+ case OverlayVerticalDirection.TO_BOTTOM:
+ return referenceRectangle.top + referenceRectangle.height + OVERLAY_MARGIN;
+ case OverlayVerticalDirection.START_TO_BOTTOM:
+ return referenceRectangle.top;
+ case OverlayVerticalDirection.TO_TOP:
+ return referenceRectangle.top - OVERLAY_MARGIN;
+ case OverlayVerticalDirection.END_TO_TOP:
+ return referenceRectangle.top + referenceRectangle.height;
+ case OverlayVerticalDirection.CENTER:
+ return referenceRectangle.top + referenceRectangle.height / 2;
+ default:
+ return referenceRectangle.top;
+ }
+ };
+
+ public updateContent = (children: Array): void => {
+ this.innerContainer.update({ children });
+ };
+
+ public toggleHidden = (hidden: boolean): void => {
+ this.render.hidden = hidden;
+ };
+}
diff --git a/mynah-ui/src/components/progress.ts b/mynah-ui/src/components/progress.ts
new file mode 100644
index 0000000000..52301ba915
--- /dev/null
+++ b/mynah-ui/src/components/progress.ts
@@ -0,0 +1,116 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// eslint-disable @typescript-eslint/restrict-template-expressions
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { ChatItemButton, ProgressField } from '../static';
+import { ChatItemButtonsWrapper } from './chat-item/chat-item-buttons';
+import { StyleLoader } from '../helper/style-loader';
+
+interface ProgressIndicatorProps extends ProgressField {
+ testId?: string;
+ classNames?: string[];
+ onClick?: () => void;
+ onActionClick?: (actionName: ChatItemButton, e?: Event) => void;
+}
+export class ProgressIndicator {
+ render: ExtendedHTMLElement;
+ private readonly wrapper: ExtendedHTMLElement;
+ private readonly text: ExtendedHTMLElement;
+ private readonly valueText: ExtendedHTMLElement;
+ private readonly valueBar: ExtendedHTMLElement;
+ private buttonsWrapper: ChatItemButtonsWrapper;
+ private props: ProgressIndicatorProps;
+ constructor(props: ProgressIndicatorProps) {
+ StyleLoader.getInstance().load('components/_progress.scss');
+ this.props = props;
+ this.wrapper = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-progress-indicator-wrapper'],
+ });
+ this.text = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-progress-indicator-text'],
+ });
+ this.valueText = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-progress-indicator-value-text'],
+ });
+ this.valueBar = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-progress-indicator-value-bar'],
+ });
+ this.buttonsWrapper = this.getButtonsWrapper();
+ this.wrapper.update({
+ children: [this.valueBar, this.text, this.valueText, this.buttonsWrapper.render],
+ });
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: this.props.testId,
+ classNames: [
+ 'mynah-progress-indicator',
+ ...(this.props.classNames ?? []),
+ ...(this.isEmpty() ? ['no-content'] : []),
+ ],
+ children: [this.wrapper],
+ });
+
+ this.update(props);
+ }
+
+ private readonly getButtonsWrapper = (): ChatItemButtonsWrapper => {
+ const newButtons = new ChatItemButtonsWrapper({
+ buttons: this.props.actions ?? [],
+ onActionClick: this.props.onActionClick ?? ((action) => {}),
+ });
+ if (this.buttonsWrapper != null) {
+ this.buttonsWrapper.render.replaceWith(newButtons.render);
+ }
+ return newButtons;
+ };
+
+ public isEmpty = (): boolean =>
+ this.props.actions == null && this.props.text == null && this.props.valueText == null;
+
+ public update = (props: Partial | null): void => {
+ if (props === null) {
+ this.props.actions = undefined;
+ this.props.status = undefined;
+ this.props.text = undefined;
+ this.props.value = undefined;
+ this.props.valueText = undefined;
+ }
+ this.props = {
+ ...this.props,
+ ...props,
+ };
+ this.valueBar.update({
+ attributes: {
+ style: `width: ${this.props.value === -1 ? 100 : Math.min(100, this.props.value ?? 0)}%;`,
+ },
+ });
+ this.text.update({
+ children: [this.props.text ?? ''],
+ });
+ this.valueText.update({
+ children: [this.props.valueText ?? ''],
+ });
+ if (props?.actions !== undefined) {
+ this.buttonsWrapper = this.getButtonsWrapper();
+ }
+ this.wrapper.update({
+ attributes: {
+ ...(this.props.value === -1 ? { indeterminate: 'true' } : {}),
+ 'progress-status': this.props.status ?? 'default',
+ },
+ });
+ if (this.isEmpty()) {
+ this.render?.addClass('no-content');
+ } else {
+ this.render?.removeClass('no-content');
+ }
+ };
+}
diff --git a/mynah-ui/src/components/sheet.ts b/mynah-ui/src/components/sheet.ts
new file mode 100644
index 0000000000..c59dda679d
--- /dev/null
+++ b/mynah-ui/src/components/sheet.ts
@@ -0,0 +1,246 @@
+/*!
+ * Copyright 2025 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import testIds from '../helper/test-ids';
+import {
+ ChatItemButton,
+ DomBuilder,
+ DomBuilderObject,
+ ExtendedHTMLElement,
+ MynahEventNames,
+ MynahIcons,
+ MynahPortalNames,
+ Status,
+ TabBarAction,
+ TabBarMainAction,
+} from '../main';
+import { cancelEvent, MynahUIGlobalEvents } from '../helper/events';
+import { Button } from './button';
+import { Icon, MynahIconsType } from './icon';
+import { CardBody } from './card/card-body';
+import { StyleLoader } from '../helper/style-loader';
+import { TabBarButtonWithMultipleOptions } from './navigation-tab-bar-buttons';
+import { Card } from './card/card';
+import { TitleDescriptionWithIcon } from './title-description-with-icon';
+import { parseMarkdown } from '../helper/marked';
+
+export interface SheetProps {
+ title?: string;
+ children?: Array;
+ fullScreen?: boolean;
+ showBackButton?: boolean;
+ description?: string;
+ status?: {
+ icon?: MynahIcons | MynahIconsType;
+ title?: string;
+ description?: string;
+ status?: Status;
+ };
+ actions?: TabBarAction[];
+ onClose: () => void;
+ onBack: () => void;
+ onActionClick?: (action: TabBarAction) => void;
+}
+
+export class Sheet {
+ private backButton: Button;
+ private sheetTitle: ExtendedHTMLElement;
+ private sheetTitleActions: ExtendedHTMLElement;
+ private sheetStatus: ExtendedHTMLElement;
+ private sheetDescription: ExtendedHTMLElement;
+ sheetContainer: ExtendedHTMLElement;
+ sheetWrapper: ExtendedHTMLElement;
+ onClose: () => void;
+ onBack: () => void;
+ onActionClick: ((action: ChatItemButton) => void) | undefined;
+
+ constructor() {
+ StyleLoader.getInstance().load('components/_sheet.scss');
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.OPEN_SHEET, (data: SheetProps) => {
+ if (this.sheetWrapper === undefined) {
+ this.sheetWrapper = DomBuilder.getInstance().createPortal(
+ MynahPortalNames.SHEET,
+ {
+ type: 'div',
+ testId: testIds.sheet.wrapper,
+ attributes: {
+ id: 'mynah-sheet-wrapper',
+ },
+ },
+ 'afterbegin',
+ );
+ }
+
+ this.sheetWrapper.clear();
+ this.onClose = data.onClose;
+ this.onBack = data.onBack;
+ this.onActionClick = data.onActionClick;
+ this.backButton = new Button({
+ icon: new Icon({ icon: 'left-open' }).render,
+ status: 'clear',
+ classNames: ['mynah-sheet-back-button'],
+ primary: false,
+ border: false,
+ hidden: data.showBackButton !== true,
+ onClick: this.onBack,
+ });
+ this.sheetTitle = this.getTitle(data.title);
+ this.sheetDescription = this.getDescription(data.description);
+ this.sheetStatus = this.getStatus(data.status);
+ this.sheetTitleActions = this.getTitleActions(data.actions);
+
+ this.sheetWrapper.update({
+ children: [
+ DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-sheet', data.fullScreen === true ? 'mynah-sheet-fullscreen' : ''],
+ events: {
+ click: (e) => {
+ if (
+ e.target != null &&
+ !(e.target as HTMLElement).classList.contains('mynah-ui-clickable-item')
+ ) {
+ cancelEvent(e);
+ }
+ },
+ },
+ children: [
+ {
+ type: 'div',
+ classNames: ['mynah-sheet-header'],
+ children: [
+ this.backButton.render,
+ this.sheetTitle,
+ this.sheetTitleActions,
+ new Button({
+ testId: testIds.sheet.closeButton,
+ primary: false,
+ onClick: (e) => {
+ cancelEvent(e);
+ this.close();
+ },
+ icon: new Icon({ icon: MynahIcons.CANCEL }).render,
+ }).render,
+ ],
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-sheet-body'],
+ children: [this.sheetStatus, this.sheetDescription, ...(data.children ?? [])],
+ },
+ ],
+ }),
+ ],
+ });
+
+ setTimeout(() => {
+ this.show();
+ }, 5);
+ });
+
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.CLOSE_SHEET, () => {
+ this.close();
+ });
+
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.UPDATE_SHEET, (data: SheetProps) => {
+ if (data.showBackButton != null) {
+ this.backButton.setHidden(!data.showBackButton);
+ }
+ if (data.title != null) {
+ const newTitle = this.getTitle(data.title);
+ this.sheetTitle.replaceWith(newTitle);
+ this.sheetTitle = newTitle;
+ }
+ if (data.status != null) {
+ const newStatus = this.getStatus(data.status);
+ this.sheetStatus.replaceWith(newStatus);
+ this.sheetStatus = newStatus;
+ }
+ if (data.description != null) {
+ const newDescription = this.getDescription(data.description);
+ this.sheetDescription.replaceWith(newDescription);
+ this.sheetDescription = newDescription;
+ }
+ if (data.actions != null) {
+ const newActions = this.getTitleActions(data.actions);
+ this.sheetTitleActions.replaceWith(newActions);
+ this.sheetTitleActions = newActions;
+ }
+ });
+ }
+
+ private readonly getTitle = (title?: string): ExtendedHTMLElement => {
+ return DomBuilder.getInstance().build({
+ type: 'h4',
+ testId: testIds.sheet.title,
+ children: [title ?? ''],
+ });
+ };
+
+ private readonly getTitleActions = (actions?: ChatItemButton[]): ExtendedHTMLElement => {
+ return DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.sheet.title,
+ classNames: ['mynah-sheet-header-actions-container'],
+ children: actions?.map((actionItem: TabBarMainAction) => {
+ return new TabBarButtonWithMultipleOptions({
+ onButtonClick: (tabBarAction) => {
+ this.onActionClick?.(tabBarAction);
+ },
+ tabBarActionButton: actionItem,
+ }).render;
+ }),
+ });
+ };
+
+ private readonly getDescription = (description?: string): ExtendedHTMLElement =>
+ new CardBody({
+ testId: testIds.sheet.description,
+ body: description ?? '',
+ }).render;
+
+ private readonly getStatus = (status?: {
+ icon?: MynahIcons | MynahIconsType;
+ title?: string;
+ description?: string;
+ status?: Status;
+ }): ExtendedHTMLElement =>
+ status?.title != null || status?.description != null
+ ? new Card({
+ testId: testIds.sheet.description,
+ border: true,
+ padding: 'medium',
+ classNames: ['mynah-sheet-header-status'],
+ status: status?.status,
+ children: [
+ ...(status.title != null
+ ? [
+ new TitleDescriptionWithIcon({
+ title:
+ status?.title != null
+ ? DomBuilder.getInstance().build({
+ classNames: ['mynah-sheet-header-status-title'],
+ type: 'div',
+ innerHTML: parseMarkdown(status.title, { includeLineBreaks: false }),
+ })
+ : undefined,
+ icon: status?.icon,
+ }).render,
+ ]
+ : []),
+ ...(status.description != null ? [new CardBody({ body: status.description }).render] : []),
+ ],
+ }).render
+ : DomBuilder.getInstance().build({ type: 'span' });
+
+ close = (): void => {
+ this.sheetWrapper.removeClass('mynah-sheet-show');
+ this.onClose?.();
+ };
+
+ show = (): void => {
+ this.sheetWrapper.addClass('mynah-sheet-show');
+ };
+}
diff --git a/mynah-ui/src/components/source-link/source-link-body.ts b/mynah-ui/src/components/source-link/source-link-body.ts
new file mode 100644
index 0000000000..49c0ba08c1
--- /dev/null
+++ b/mynah-ui/src/components/source-link/source-link-body.ts
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { ReferenceTrackerInformation, SourceLink } from '../../static';
+import { CardBody } from '../card/card-body';
+
+export interface SourceLinkBodyProps {
+ suggestion: Partial;
+ children?: Array;
+ highlightRangeWithTooltip?: ReferenceTrackerInformation[];
+}
+export class SourceLinkBody {
+ render: ExtendedHTMLElement;
+ props: SourceLinkBodyProps;
+ constructor(props: SourceLinkBodyProps) {
+ this.props = props;
+ this.render = new CardBody({
+ highlightRangeWithTooltip: props.highlightRangeWithTooltip,
+ body: this.props.suggestion.body ?? '',
+ children: this.props.children,
+ }).render;
+ }
+}
diff --git a/mynah-ui/src/components/source-link/source-link-header.ts b/mynah-ui/src/components/source-link/source-link-header.ts
new file mode 100644
index 0000000000..1a3c45803d
--- /dev/null
+++ b/mynah-ui/src/components/source-link/source-link-header.ts
@@ -0,0 +1,231 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getTimeDiff } from '../../helper/date-time';
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { MynahUIGlobalEvents } from '../../helper/events';
+import testIds from '../../helper/test-ids';
+import { getOrigin } from '../../helper/url';
+import { MynahEventNames, SourceLink, SourceLinkMetaData } from '../../static';
+import { Icon, MynahIcons } from '../icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
+import { SourceLinkCard } from './source-link';
+
+const PREVIEW_DELAY = 500;
+export interface SourceLinkHeaderProps {
+ sourceLink: SourceLink;
+ showCardOnHover?: boolean;
+ onClick?: (e?: MouseEvent) => void;
+}
+export class SourceLinkHeader {
+ private sourceLinkPreview: Overlay | null;
+ private sourceLinkPreviewTimeout: ReturnType;
+ render: ExtendedHTMLElement;
+ constructor(props: SourceLinkHeaderProps) {
+ const splitUrl = props.sourceLink.url.replace(/^(http|https):\/\//, '').split('/');
+ if (splitUrl[splitUrl.length - 1].trim() === '') {
+ splitUrl.pop();
+ }
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.ROOT_FOCUS, (data: { focusState: boolean }) => {
+ if (!data.focusState) {
+ this.hideLinkPreview();
+ }
+ });
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.relatedLinks.linkWrapper,
+ classNames: ['mynah-source-link-header'],
+ ...(props.showCardOnHover === true
+ ? {
+ events: {
+ mouseenter: (e) => {
+ this.showLinkPreview(e, props.sourceLink);
+ },
+ mouseleave: this.hideLinkPreview,
+ focus: (e) => {
+ this.showLinkPreview(e, props.sourceLink);
+ },
+ blur: this.hideLinkPreview,
+ },
+ }
+ : {}),
+ attributes: {
+ origin: getOrigin(props.sourceLink.url),
+ },
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-source-thumbnail'],
+ },
+ {
+ type: 'div',
+ classNames: ['mynah-source-link-title-wrapper'],
+ children: [
+ {
+ type: 'a',
+ classNames: ['mynah-source-link-title'],
+ events: {
+ ...(props.onClick !== undefined && {
+ click: props.onClick,
+ auxclick: props.onClick,
+ }),
+ },
+ attributes: { href: props.sourceLink.url, target: '_blank' },
+ children: [
+ props.sourceLink.title,
+ {
+ type: 'div',
+ classNames: ['mynah-source-link-expand-icon'],
+ children: [new Icon({ icon: MynahIcons.EXTERNAL }).render],
+ },
+ ],
+ },
+ {
+ type: 'a',
+ testId: testIds.chatItem.relatedLinks.link,
+ classNames: ['mynah-source-link-url'],
+ events: {
+ ...(props.onClick !== undefined && {
+ click: props.onClick,
+ auxclick: props.onClick,
+ }),
+ },
+ attributes: { href: props.sourceLink.url, target: '_blank' },
+ innerHTML: splitUrl.map((urlPart) => `${urlPart} `).join(''),
+ },
+ ...(props.sourceLink.metadata != null
+ ? [this.getSourceMetaBlock(props.sourceLink.metadata)]
+ : []),
+ ],
+ },
+ ],
+ });
+ }
+
+ private readonly getSourceMetaBlock = (metadataUnion?: Record): DomBuilderObject => {
+ const metaItems: any[] = [];
+ if (metadataUnion !== null && metadataUnion !== undefined) {
+ Object.keys(metadataUnion).forEach((metadataKey) => {
+ const metadata = metadataUnion[metadataKey];
+ if (metadata.isAccepted === true) {
+ metaItems.push({
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item', 'approved-answer'],
+ children: [new Icon({ icon: MynahIcons.OK }).render],
+ });
+ }
+
+ if (metadata.lastActivityDate !== undefined) {
+ metaItems.push({
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item'],
+ children: [
+ new Icon({ icon: MynahIcons.CALENDAR }).render,
+ {
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item-text'],
+ children: [getTimeDiff(new Date().getTime() - metadata.lastActivityDate, 2)],
+ },
+ ],
+ });
+ }
+
+ if (metadata.answerCount !== undefined) {
+ metaItems.push({
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item'],
+ children: [
+ new Icon({ icon: MynahIcons.CHAT }).render,
+ {
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item-text'],
+ children: [metadata.answerCount.toString()],
+ },
+ ],
+ });
+ }
+
+ if (metadata.stars !== undefined) {
+ metaItems.push({
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item'],
+ children: [
+ new Icon({ icon: MynahIcons.STAR }).render,
+ {
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item-text'],
+ children: [`${metadata.stars.toString()} contributors`],
+ },
+ ],
+ });
+ }
+
+ if (metadata.forks !== undefined) {
+ metaItems.push({
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item'],
+ children: [
+ new Icon({ icon: MynahIcons.DOWN_OPEN }).render,
+ {
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item-text'],
+ children: [`${metadata.forks.toString()} forks`],
+ },
+ ],
+ });
+ }
+
+ if (metadata.score !== undefined) {
+ metaItems.push({
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item'],
+ children: [
+ new Icon({ icon: MynahIcons.THUMBS_UP }).render,
+ {
+ type: 'span',
+ classNames: ['mynah-title-meta-block-item-text'],
+ children: [`${metadata.score.toString()}`],
+ },
+ ],
+ });
+ }
+ });
+ }
+
+ return {
+ type: 'span',
+ classNames: ['mynah-title-meta-block'],
+ children: metaItems,
+ };
+ };
+
+ private readonly showLinkPreview = (e: MouseEvent, sourceLink: SourceLink): void => {
+ if (sourceLink.body !== undefined) {
+ clearTimeout(this.sourceLinkPreviewTimeout);
+ this.sourceLinkPreviewTimeout = setTimeout(() => {
+ const elm: HTMLElement = e.target as HTMLElement;
+ this.sourceLinkPreview = new Overlay({
+ testId: testIds.chatItem.relatedLinks.linkPreviewOverlay,
+ background: true,
+ closeOnOutsideClick: false,
+ referenceElement: elm,
+ dimOutside: false,
+ removeOtherOverlays: true,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+ children: [new SourceLinkCard({ sourceLink }).render],
+ });
+ }, PREVIEW_DELAY);
+ }
+ };
+
+ private readonly hideLinkPreview = (): void => {
+ clearTimeout(this.sourceLinkPreviewTimeout);
+ if (this.sourceLinkPreview !== null) {
+ this.sourceLinkPreview?.close();
+ this.sourceLinkPreview = null;
+ }
+ };
+}
diff --git a/mynah-ui/src/components/source-link/source-link.ts b/mynah-ui/src/components/source-link/source-link.ts
new file mode 100644
index 0000000000..0a0e5a677f
--- /dev/null
+++ b/mynah-ui/src/components/source-link/source-link.ts
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ExtendedHTMLElement } from '../../helper/dom';
+import testIds from '../../helper/test-ids';
+import { SourceLink } from '../../static';
+import { Card } from '../card/card';
+import { SourceLinkBody } from './source-link-body';
+import { SourceLinkHeader } from './source-link-header';
+
+export interface SourceLinkCardProps {
+ sourceLink: SourceLink;
+ compact?: 'flat' | true;
+}
+export class SourceLinkCard {
+ private readonly sourceLink: SourceLink;
+ render: ExtendedHTMLElement;
+ constructor(props: SourceLinkCardProps) {
+ this.sourceLink = props.sourceLink;
+ this.render = new Card({
+ testId: testIds.chatItem.relatedLinks.linkPreviewOverlayCard,
+ border: false,
+ background: false,
+ children: [
+ new SourceLinkHeader({
+ sourceLink: this.sourceLink,
+ }).render,
+ ...(this.sourceLink.body !== undefined
+ ? [new SourceLinkBody({ suggestion: this.sourceLink }).render]
+ : []),
+ ],
+ }).render;
+ }
+}
diff --git a/mynah-ui/src/components/spinner/logo-base.svg b/mynah-ui/src/components/spinner/logo-base.svg
new file mode 100644
index 0000000000..c06f1b8768
--- /dev/null
+++ b/mynah-ui/src/components/spinner/logo-base.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Layer 1
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/spinner/logo-text.svg b/mynah-ui/src/components/spinner/logo-text.svg
new file mode 100644
index 0000000000..6fd3e56178
--- /dev/null
+++ b/mynah-ui/src/components/spinner/logo-text.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Layer 1
+
+
+
+
\ No newline at end of file
diff --git a/mynah-ui/src/components/spinner/spinner.ts b/mynah-ui/src/components/spinner/spinner.ts
new file mode 100644
index 0000000000..7138f70a10
--- /dev/null
+++ b/mynah-ui/src/components/spinner/spinner.ts
@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { StyleLoader } from '../../helper/style-loader';
+import LOGO_BASE from './logo-base.svg';
+import LOGO_TEXT from './logo-text.svg';
+
+export class Spinner {
+ render: ExtendedHTMLElement;
+ constructor() {
+ StyleLoader.getInstance().load('components/_spinner.scss');
+ const portal =
+ DomBuilder.getInstance().getPortal('mynah-ui-icons') ??
+ DomBuilder.getInstance().createPortal(
+ 'mynah-ui-icons',
+ {
+ type: 'style',
+ attributes: {
+ type: 'text/css',
+ },
+ },
+ 'beforebegin',
+ );
+ portal.insertAdjacentText(
+ 'beforeend',
+ `
+ :root{
+ --mynah-ui-spinner-base: url(${LOGO_BASE});
+ --mynah-ui-spinner-text: url(${LOGO_TEXT});
+ }
+ `,
+ );
+
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ classNames: ['mynah-ui-spinner-container'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-part', 'backdrop'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-mask', 'base'],
+ },
+ ],
+ },
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-part', 'semi-backdrop'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-mask', 'base'],
+ },
+ ],
+ },
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-part'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-mask', 'base'],
+ },
+ ],
+ },
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-part'],
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-ui-spinner-logo-mask', 'text'],
+ },
+ ],
+ },
+ ],
+ });
+ }
+}
diff --git a/mynah-ui/src/components/syntax-highlighter.ts b/mynah-ui/src/components/syntax-highlighter.ts
new file mode 100644
index 0000000000..f0899e45e6
--- /dev/null
+++ b/mynah-ui/src/components/syntax-highlighter.ts
@@ -0,0 +1,271 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+
+import { CodeBlockActions, CodeSelectionType, OnCodeBlockActionFunction } from '../static';
+import { Button } from './button';
+import { Icon, MynahIcons } from './icon';
+import { cancelEvent } from '../helper/events';
+import { highlightersWithTooltip } from './card/card-body';
+import escapeHTML from 'escape-html';
+import { copyToClipboard } from '../helper/chat-item';
+import testIds from '../helper/test-ids';
+import unescapeHTML from 'unescape-html';
+import hljs from 'highlight.js';
+import { mergeHTMLPlugin } from '../helper/merge-html-plugin';
+import { MoreContentIndicator } from './more-content-indicator';
+import { StyleLoader } from '../helper/style-loader';
+
+export interface SyntaxHighlighterProps {
+ codeStringWithMarkup: string;
+ language?: string;
+ showLineNumbers?: boolean;
+ block?: boolean;
+ wrapCodeBlock?: boolean;
+ startingLineNumber?: number;
+ index?: number;
+ codeBlockActions?: CodeBlockActions;
+ hideLanguage?: boolean;
+ unlimitedHeight?: boolean;
+ onCopiedToClipboard?: (type?: CodeSelectionType, text?: string, codeBlockIndex?: number) => void;
+ onCodeBlockAction?: OnCodeBlockActionFunction;
+}
+
+const DEFAULT_LANGUAGE = 'c';
+
+export class SyntaxHighlighter {
+ private readonly props: SyntaxHighlighterProps;
+ private readonly codeBlockButtons: ExtendedHTMLElement[] = [];
+ render: ExtendedHTMLElement;
+
+ constructor(props: SyntaxHighlighterProps) {
+ StyleLoader.getInstance().load('components/_syntax-highlighter.scss');
+ this.props = props;
+
+ hljs.addPlugin(mergeHTMLPlugin);
+ hljs.configure({ ignoreUnescapedHTML: true });
+
+ // To ensure we are not leaving anything unescaped before escaping i.e to prevent double escaping
+ let escapedCodeBlock = escapeHTML(unescapeHTML(props.codeStringWithMarkup));
+
+ // Convert reference tracker escaped markups back to original incoming from the parent
+ escapedCodeBlock = escapedCodeBlock
+ .replace(
+ new RegExp(escapeHTML(highlightersWithTooltip.start.markupStart), 'g'),
+ highlightersWithTooltip.start.markupStart,
+ )
+ .replace(
+ new RegExp(escapeHTML(highlightersWithTooltip.start.markupEnd), 'g'),
+ highlightersWithTooltip.start.markupEnd,
+ )
+ .replace(
+ new RegExp(escapeHTML(highlightersWithTooltip.end.markup), 'g'),
+ highlightersWithTooltip.end.markup,
+ );
+
+ const codeElement = DomBuilder.getInstance().build({
+ type: 'code',
+ classNames: [
+ ...(props.language != null
+ ? [`language-${props.language.replace('diff-', '')}`]
+ : [(props.block ?? false) ? DEFAULT_LANGUAGE : 'language-plaintext']),
+ ...(props.showLineNumbers === true ? ['line-numbers'] : []),
+ ],
+ innerHTML: escapedCodeBlock,
+ });
+ hljs.highlightElement(codeElement);
+
+ // Overlay another code element for diffs, as highlight.js doesn't allow multiple language styles
+ const diffOverlay = DomBuilder.getInstance().build({
+ type: 'code',
+ classNames: ['diff', 'language-diff'],
+ innerHTML: escapedCodeBlock,
+ });
+ hljs.highlightElement(diffOverlay);
+
+ const preElement = DomBuilder.getInstance().build({
+ type: 'pre',
+ testId: testIds.chatItem.syntaxHighlighter.codeBlock,
+ children: [codeElement, props.language?.match('diff') != null ? diffOverlay : ''],
+ events: {
+ copy: (e) => {
+ cancelEvent(e);
+ const selectedCode = this.getSelectedCodeContextMenu();
+ if (selectedCode.code.length > 0) {
+ copyToClipboard(selectedCode.code, (): void => {
+ this.onCopiedToClipboard(selectedCode.code, selectedCode.type);
+ });
+ }
+ },
+ },
+ });
+
+ if (props.codeBlockActions != null) {
+ Object.keys(props.codeBlockActions).forEach((actionId: string) => {
+ const validAction =
+ props.codeBlockActions?.[actionId]?.acceptedLanguages == null ||
+ props.language == null ||
+ props.codeBlockActions?.[actionId]?.acceptedLanguages?.find(
+ (acceptedLang) => props.language === acceptedLang,
+ ) != null
+ ? props.codeBlockActions?.[actionId]
+ : undefined;
+ if (validAction != null) {
+ this.codeBlockButtons.push(
+ new Button({
+ testId: testIds.chatItem.syntaxHighlighter.button,
+ icon: validAction.icon != null ? new Icon({ icon: validAction.icon }).render : undefined,
+ label: validAction.label,
+ attributes: { title: validAction.description ?? '' },
+ primary: false,
+ classNames: [
+ ...(props.codeBlockActions?.[actionId]?.flash != null
+ ? [
+ 'mynah-button-flash-by-parent-focus',
+ `animate-${props.codeBlockActions?.[actionId]?.flash ?? 'infinite'}`,
+ ]
+ : ['']),
+ ],
+ ...(props.codeBlockActions?.[actionId]?.flash != null
+ ? {
+ onHover: (e) => {
+ if (e.target != null) {
+ (e.target as HTMLButtonElement).classList.remove(
+ 'mynah-button-flash-by-parent-focus',
+ );
+ }
+ },
+ }
+ : {}),
+ onClick: (e) => {
+ cancelEvent(e);
+ if (e.target != null) {
+ (e.target as HTMLButtonElement).classList.remove(
+ 'mynah-button-flash-by-parent-focus',
+ );
+ }
+ const selectedCode = this.getSelectedCode();
+ if (this.props?.onCodeBlockAction !== undefined) {
+ this.props.onCodeBlockAction(
+ validAction.id,
+ validAction.data,
+ selectedCode.type,
+ selectedCode.code,
+ undefined,
+ this.props?.index,
+ );
+ }
+ },
+ additionalEvents: { mousedown: cancelEvent },
+ }).render,
+ );
+ }
+ });
+ }
+
+ const moreContentIndicator = new MoreContentIndicator({
+ icon: MynahIcons.DOWN_OPEN,
+ border: false,
+ onClick: () => {
+ if (this.render.hasClass('no-max')) {
+ this.render.removeClass('no-max');
+ moreContentIndicator.update({
+ icon: MynahIcons.DOWN_OPEN,
+ });
+ } else {
+ this.render.addClass('no-max');
+ moreContentIndicator.update({
+ icon: MynahIcons.UP_OPEN,
+ });
+ }
+ },
+ });
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: testIds.chatItem.syntaxHighlighter.wrapper,
+ classNames: [
+ 'mynah-syntax-highlighter',
+ ...(props.block !== true ? ['mynah-inline-code'] : []),
+ ...(props.wrapCodeBlock === true ? ['wrap-code-block'] : []),
+ ...(props.unlimitedHeight === true ? ['no-max'] : []),
+ ],
+ children: [
+ preElement,
+ ...(props.showLineNumbers === true
+ ? [
+ {
+ type: 'span',
+ testId: testIds.chatItem.syntaxHighlighter.lineNumbers,
+ classNames: ['line-numbers-rows'],
+ children: preElement.innerHTML
+ .split(/\n/)
+ .slice(0, -1)
+ .map((n: string, i: number) => ({
+ type: 'span',
+ innerHTML: String(i + (props.startingLineNumber ?? 1)),
+ })),
+ },
+ ]
+ : []),
+ ...(this.props.block === true
+ ? [
+ ...(this.props.unlimitedHeight !== true ? [moreContentIndicator.render] : []),
+ {
+ type: 'div',
+ testId: testIds.chatItem.syntaxHighlighter.buttonsWrapper,
+ classNames: ['mynah-syntax-highlighter-copy-buttons'],
+ children: [
+ ...this.codeBlockButtons,
+ ...(props.language != null && this.props.hideLanguage !== true
+ ? [
+ {
+ type: 'span',
+ testId: testIds.chatItem.syntaxHighlighter.language,
+ classNames: ['mynah-syntax-highlighter-language'],
+ children: [props.language.replace('diff-', '')],
+ },
+ ]
+ : []),
+ ],
+ },
+ ]
+ : []),
+ ],
+ });
+
+ setTimeout(() => {
+ if (
+ this.props.block === true &&
+ this.props.unlimitedHeight !== true &&
+ preElement.scrollHeight > preElement.clientHeight
+ ) {
+ this.render.addClass('max-height-exceed');
+ }
+ }, 100);
+ }
+
+ private readonly getSelectedCodeContextMenu = (): {
+ code: string;
+ type: CodeSelectionType;
+ } => ({
+ code: document.getSelection()?.toString() ?? '',
+ type: 'selection',
+ });
+
+ private readonly getSelectedCode = (): {
+ code: string;
+ type: CodeSelectionType;
+ } => ({
+ code: this.render.querySelector('pre')?.innerText ?? '',
+ type: 'block',
+ });
+
+ private readonly onCopiedToClipboard = (textToSendClipboard: string, type?: CodeSelectionType): void => {
+ if (this.props?.onCopiedToClipboard != null) {
+ this.props?.onCopiedToClipboard(type, textToSendClipboard, this.props.index);
+ }
+ };
+}
diff --git a/mynah-ui/src/components/tabs.ts b/mynah-ui/src/components/tabs.ts
new file mode 100644
index 0000000000..acbc637c05
--- /dev/null
+++ b/mynah-ui/src/components/tabs.ts
@@ -0,0 +1,288 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// eslint-disable @typescript-eslint/restrict-template-expressions
+import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
+import { cancelEvent } from '../helper/events';
+import { StyleLoader } from '../helper/style-loader';
+import { Button } from './button';
+import { Icon, MynahIcons, MynahIconsType } from './icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from './overlay';
+
+export interface ToggleOption {
+ label?: ExtendedHTMLElement | string | HTMLElement;
+ icon?: MynahIcons | MynahIconsType | null;
+ pinned?: boolean;
+ disabled?: boolean;
+ selected?: boolean;
+ value: string;
+ disabledTooltip?: string | ExtendedHTMLElement;
+}
+interface TabItemRenderProps extends ToggleOption {
+ wrapperTestId?: string;
+ optionTestId?: string;
+ labelTestId?: string;
+ closeButtonTestId?: string;
+ name: string;
+ onChange?: (selectedValue: string) => void;
+ onRemove?: (selectedValue: string, domElement: ExtendedHTMLElement) => void;
+}
+class TabItem {
+ render: ExtendedHTMLElement;
+ private readonly props: TabItemRenderProps;
+ private disabledTooltip?: Overlay;
+ private disabledTooltipTimer: ReturnType;
+ constructor(props: TabItemRenderProps) {
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'span',
+ classNames: [...(this.props.pinned === true ? ['mynah-tab-item-pinned'] : [''])],
+ testId: props.wrapperTestId,
+ attributes: {
+ key: `${this.props.name}-${this.props.value}`,
+ title: (this.props.label as string) ?? '',
+ },
+ events: {
+ ...(this.props.disabled === true && this.props.disabledTooltip !== undefined
+ ? {
+ mouseenter: () => {
+ this.disabledTooltipTimer = setTimeout(() => {
+ this.disabledTooltip = new Overlay({
+ children: [
+ {
+ type: 'span',
+ classNames: ['mynah-tabs-disabled-tooltip-container'],
+ children: [this.props.disabledTooltip ?? ''],
+ },
+ ],
+ closeOnOutsideClick: false,
+ dimOutside: false,
+ referenceElement: this.render,
+ horizontalDirection: OverlayHorizontalDirection.CENTER,
+ verticalDirection: OverlayVerticalDirection.TO_TOP,
+ });
+ }, 500);
+ },
+ mouseleave: () => {
+ clearTimeout(this.disabledTooltipTimer);
+ if (this.disabledTooltip !== undefined) {
+ this.disabledTooltip.close();
+ setTimeout(() => {
+ this.disabledTooltip = undefined;
+ }, 50);
+ }
+ },
+ }
+ : {}),
+ },
+ children: [
+ {
+ type: 'input',
+ testId: props.optionTestId,
+ classNames: ['mynah-tab-item'],
+ attributes: {
+ type: 'radio',
+ id: `${this.props.name}-${this.props.value}`,
+ value: this.props.value,
+ name: this.props.name,
+ ...(this.props.selected === true ? { checked: 'checked' } : {}),
+ ...(this.props.disabled === true ? { disabled: 'disabled' } : {}),
+ },
+ events: {
+ change: () => {
+ if (this.props.onChange != null) {
+ this.props.onChange(this.props.value);
+ }
+ },
+ },
+ },
+ {
+ type: 'label',
+ testId: props.labelTestId,
+ classNames: ['mynah-tab-item-label'],
+ attributes: {
+ for: `${this.props.name}-${this.props.value}`,
+ },
+ events: {
+ dblclick: (e) => {
+ cancelEvent(e);
+ },
+ auxclick: (e) => {
+ // only close on middle click
+ if (e.button === 1 && this.props.onRemove !== undefined && this.props.pinned !== true) {
+ this.props.onRemove(this.props.value, this.render);
+ }
+ },
+ },
+ children: [
+ this.props.icon != null ? new Icon({ icon: props.icon as MynahIcons }).render : '',
+ {
+ type: 'span',
+ classNames: ['mynah-tab-item-label-text'],
+ children: [this.props.label ?? ''],
+ },
+ this.props.onRemove !== undefined && this.props.pinned !== true
+ ? new Button({
+ testId: this.props.closeButtonTestId,
+ classNames: ['mynah-tabs-close-button'],
+ onClick: () => {
+ if (this.props.onRemove !== undefined) {
+ this.props.onRemove(this.props.value, this.render);
+ }
+ },
+ icon: new Icon({ icon: MynahIcons.CANCEL }).render,
+ primary: false,
+ }).render
+ : '',
+ ],
+ },
+ ],
+ });
+ }
+}
+export interface TabProps {
+ testId?: string;
+ options: ToggleOption[];
+ direction?: 'horizontal' | 'vertical';
+ value?: string | null;
+ name: string;
+ disabled?: boolean;
+ onChange?: (selectedValue: string) => void;
+ onRemove?: (selectedValue: string, domElement: ExtendedHTMLElement) => void;
+}
+export class Tab {
+ render: ExtendedHTMLElement;
+ private readonly props: TabProps;
+ private currentValue?: string | null;
+
+ constructor(props: TabProps) {
+ StyleLoader.getInstance().load('components/_tab.scss');
+ this.props = { direction: 'horizontal', ...props };
+ this.currentValue = this.props.value;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: this.props.testId,
+ classNames: ['mynah-tabs-container', `mynah-tabs-direction-${this.props.direction as string}`],
+ attributes: props.disabled === true ? { disabled: 'disabled' } : {},
+ children: this.getChildren(props.value),
+ events: {
+ wheel: {
+ handler: this.transformScroll,
+ options: { passive: true },
+ },
+ },
+ });
+ }
+
+ private readonly transformScroll = (e: WheelEvent): void => {
+ if (e.deltaY === 0) {
+ return;
+ }
+ this.render.scrollLeft += e.deltaY;
+ };
+
+ private readonly getChildren = (value?: string | null): any[] => [
+ ...this.props.options.map((option) => {
+ return new TabItem({
+ ...option,
+ selected: value === option.value,
+ name: this.props.name,
+ onChange: this.updateSelectionRender,
+ onRemove: this.props.onRemove,
+ ...(this.props.testId != null
+ ? {
+ wrapperTestId: `${this.props.testId}-option-wrapper`,
+ optionTestId: `${this.props.testId}-option`,
+ labelTestId: `${this.props.testId}-option-label`,
+ closeButtonTestId: `${this.props.testId}-option-close-button`,
+ }
+ : {}),
+ }).render;
+ }),
+ ];
+
+ private readonly updateSelectionRender = (value: string): void => {
+ if (this.props.onChange !== undefined) {
+ this.props.onChange(value);
+ }
+ };
+
+ setValue = (value: string): void => {
+ if (value !== this.getValue()) {
+ this.currentValue = value;
+ const elmToCheck = this.render.querySelector(`#${this.props.name}-${value}`);
+ if (elmToCheck !== undefined) {
+ (elmToCheck as HTMLInputElement).click();
+ (elmToCheck as HTMLInputElement).checked = true;
+ ((elmToCheck as HTMLInputElement).nextSibling as HTMLLabelElement).classList.remove('indication');
+ }
+ }
+ };
+
+ addOption = (option: ToggleOption): void => {
+ this.props.options.push(option);
+ this.render.appendChild(
+ new TabItem({
+ ...option,
+ name: this.props.name,
+ onChange: this.updateSelectionRender,
+ onRemove: this.props.onRemove,
+ ...(this.props.testId != null
+ ? {
+ wrapperTestId: `${this.props.testId}-options-wrapper`,
+ optionTestId: `${this.props.testId}-option`,
+ labelTestId: `${this.props.testId}-option-label`,
+ closeButtonTestId: `${this.props.testId}-option-close-button`,
+ }
+ : {}),
+ }).render,
+ );
+ if (option.selected === true) {
+ this.setValue(option.value);
+ this.snapToOption(option.value);
+ }
+ };
+
+ removeOption = (value: string): void => {
+ this.props.options = this.props.options.filter((option) => option.value !== value);
+ const elmToCheck = this.render.querySelector(`span[key="${this.props.name}-${value}"]`);
+ if (elmToCheck !== undefined) {
+ elmToCheck?.remove();
+ }
+ };
+
+ updateOptionTitle = (value: string, title: string): void => {
+ this.props.options = this.props.options.filter((option) => option.value !== value);
+ const elmToCheck = this.render.querySelector(
+ `span[key="${this.props.name}-${value}"] .mynah-tab-item-label-text`,
+ );
+ if (elmToCheck !== undefined) {
+ (elmToCheck as HTMLSpanElement).innerHTML = title;
+ }
+ };
+
+ updateOptionIndicator = (value: string, indication: boolean): void => {
+ this.props.options = this.props.options.filter((option) => option.value !== value);
+ const elmToCheck: HTMLLabelElement | null = this.render.querySelector(
+ `label[for="${this.props.name}-${value}"]`,
+ );
+ if (elmToCheck !== null) {
+ if (indication && value !== this.getValue()) {
+ elmToCheck.classList.add('indication');
+ } else {
+ elmToCheck.classList.remove('indication');
+ }
+ }
+ };
+
+ snapToOption = (value: string): void => {
+ const elmToCheck = this.render.querySelector(`#${this.props.name}-${value}`);
+ if (elmToCheck !== undefined) {
+ this.render.scrollLeft = (elmToCheck?.parentNode as HTMLElement).offsetLeft;
+ }
+ };
+
+ getValue = (): string | undefined | null => this.currentValue;
+}
diff --git a/mynah-ui/src/components/title-description-with-icon.ts b/mynah-ui/src/components/title-description-with-icon.ts
new file mode 100644
index 0000000000..e8c1c196c5
--- /dev/null
+++ b/mynah-ui/src/components/title-description-with-icon.ts
@@ -0,0 +1,70 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// eslint-disable @typescript-eslint/restrict-template-expressions
+import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../helper/dom';
+import { StyleLoader } from '../helper/style-loader';
+import { Icon, MynahIcons, MynahIconsType } from './icon';
+
+interface TitleDescriptionWithIconProps {
+ title?: string | ExtendedHTMLElement | HTMLElement | DomBuilderObject;
+ description?: string | ExtendedHTMLElement | HTMLElement | DomBuilderObject;
+ icon?: MynahIcons | MynahIconsType;
+ testId?: string;
+ classNames?: string[];
+}
+export class TitleDescriptionWithIcon {
+ render: ExtendedHTMLElement;
+ private readonly props: TitleDescriptionWithIconProps;
+ constructor(props: TitleDescriptionWithIconProps) {
+ StyleLoader.getInstance().load('components/_title-description-icon.scss');
+ this.props = props;
+ this.render = DomBuilder.getInstance().build({
+ type: 'div',
+ testId: props.testId,
+ // Apply icon wrapper styles only if icon is provided
+ classNames: [
+ ...(this.props.icon !== undefined ? ['mynah-ui-title-description-icon-wrapper'] : []),
+ ...(this.props.classNames ?? []),
+ ],
+ children: [
+ ...(this.props.icon !== undefined
+ ? [
+ {
+ type: 'div',
+ testId: `${props.testId ?? ''}-icon`,
+ classNames: ['mynah-ui-title-description-icon-icon'],
+ children: [
+ new Icon({
+ icon: this.props.icon,
+ }).render,
+ ],
+ },
+ ]
+ : []),
+ ...(this.props.title !== undefined
+ ? [
+ {
+ type: 'div',
+ testId: `${props.testId ?? ''}-title`,
+ classNames: ['mynah-ui-title-description-icon-title'],
+ children: [this.props.title],
+ },
+ ]
+ : []),
+ ...(this.props.description !== undefined
+ ? [
+ {
+ type: 'div',
+ testId: `${props.testId ?? ''}-description`,
+ classNames: ['mynah-ui-title-description-icon-description'],
+ children: [this.props.description],
+ },
+ ]
+ : []),
+ ],
+ });
+ }
+}
diff --git a/mynah-ui/src/global.d.ts b/mynah-ui/src/global.d.ts
new file mode 100644
index 0000000000..851eed0353
--- /dev/null
+++ b/mynah-ui/src/global.d.ts
@@ -0,0 +1,8 @@
+declare module '*.svg' {
+ const content: string;
+ export default content;
+}
+declare module '*.scss';
+declare const require: {
+ context: (directory: string, useSubdirectories?: boolean, regExp?: RegExp) => any;
+};
diff --git a/mynah-ui/src/helper/__test__/date-time.spec.ts b/mynah-ui/src/helper/__test__/date-time.spec.ts
new file mode 100644
index 0000000000..1447e22c86
--- /dev/null
+++ b/mynah-ui/src/helper/__test__/date-time.spec.ts
@@ -0,0 +1,38 @@
+import { getTimeDiff } from '../date-time';
+
+describe('date-time', () => {
+ describe('getTimeDiff', () => {
+ it('minutes', () => {
+ expect(getTimeDiff(0)).toEqual('1min');
+ expect(getTimeDiff(60000)).toEqual('1min');
+ expect(getTimeDiff(60000, { minutes: false })).toEqual('');
+ expect(getTimeDiff(120000)).toEqual('2min');
+ expect(getTimeDiff(180000)).toEqual('3min');
+ });
+ it('hours', () => {
+ expect(getTimeDiff(3_600_000)).toEqual('1hr');
+ expect(getTimeDiff(3_600_000, { hours: false })).toEqual('');
+ expect(getTimeDiff(7_200_000)).toEqual('2hr');
+ });
+ it('days', () => {
+ expect(getTimeDiff(86_400_000)).toEqual('1da');
+ expect(getTimeDiff(86_400_000, { days: false })).toEqual('');
+ expect(getTimeDiff(172_800_000)).toEqual('2da');
+ });
+ it('weeks', () => {
+ expect(getTimeDiff(604_800_000)).toEqual('1we');
+ expect(getTimeDiff(604_800_000, { weeks: false })).toEqual('');
+ expect(getTimeDiff(1_209_600_000)).toEqual('2we');
+ });
+ it('months', () => {
+ expect(getTimeDiff(2_592_000_000)).toEqual('1mo');
+ expect(getTimeDiff(2_592_000_000, { months: false })).toEqual('');
+ expect(getTimeDiff(5_184_000_000)).toEqual('2mo');
+ });
+ it('years', () => {
+ expect(getTimeDiff(31_104_000_000)).toEqual('1yr');
+ expect(getTimeDiff(31_104_000_000, { years: false })).toEqual('');
+ expect(getTimeDiff(62_208_000_000)).toEqual('2yr');
+ });
+ });
+});
diff --git a/mynah-ui/src/helper/__test__/dom.spec.ts b/mynah-ui/src/helper/__test__/dom.spec.ts
new file mode 100644
index 0000000000..106c77a899
--- /dev/null
+++ b/mynah-ui/src/helper/__test__/dom.spec.ts
@@ -0,0 +1,266 @@
+import { MynahPortalNames } from '../../static';
+import { DomBuilder, DomBuilderObject, DomBuilderObjectFilled } from '../dom';
+
+describe('dom', () => {
+ describe('DomBuilder', () => {
+ it('build a basic element', () => {
+ const mockDomBuilderObject: DomBuilderObject = {
+ type: 'div',
+ attributes: { id: '#testDiv1', draggable: 'true' },
+ classNames: ['test-class-1', 'test-class-2'],
+ innerHTML: 'innerHTML string',
+ };
+ const resultElement = DomBuilder.getInstance().build(mockDomBuilderObject);
+ expect(resultElement.id).toBe('#testDiv1');
+ expect(resultElement.draggable).toBe(true);
+ expect(Object.values(resultElement.classList)).toEqual(['test-class-1', 'test-class-2']);
+ expect(resultElement.innerHTML).toBe('innerHTML string');
+ });
+
+ it('build an element with children', () => {
+ const domBuilder = DomBuilder.getInstance();
+ const mockChildElementBuilderObject: DomBuilderObject = {
+ type: 'span',
+ attributes: { id: '#childSpan1' },
+ };
+ const childElement = domBuilder.build(mockChildElementBuilderObject);
+
+ const mockDomBuilderObject: DomBuilderObject = {
+ type: 'div',
+ attributes: { id: '#testDiv1', draggable: 'true' },
+ classNames: ['test-class-1', 'test-class-2'],
+ children: [childElement],
+ };
+ const resultElement = domBuilder.build(mockDomBuilderObject);
+ expect(resultElement.childNodes).toHaveLength(1);
+ expect(resultElement.children[0].outerHTML).toBe('
';
+
+ const domBuilder = DomBuilder.getInstance();
+ domBuilder.createPortal(
+ 'testPortal',
+ {
+ type: 'div',
+ attributes: {
+ id: '#wrapper1',
+ },
+ classNames: ['wrapper-class-1'],
+ },
+ 'afterbegin',
+ );
+
+ expect(document.body.children).toHaveLength(2);
+ expect(document.body.children[0].outerHTML).toBe('
');
+ expect(document.body.children[1].outerHTML).toBe('
');
+ });
+
+ it('getPortal', () => {
+ document.body.innerHTML = '
';
+
+ const domBuilder = DomBuilder.getInstance();
+ domBuilder.createPortal(
+ 'testPortal',
+ {
+ type: 'div',
+ attributes: {
+ id: '#wrapper1',
+ },
+ classNames: ['wrapper-class-1'],
+ },
+ 'afterbegin',
+ );
+
+ expect(domBuilder.getPortal('testPortal')?.id).toBe('#wrapper1');
+ });
+
+ it('removePortal', () => {
+ document.body.innerHTML = '
';
+
+ const domBuilder = DomBuilder.getInstance();
+ domBuilder.createPortal(
+ 'testPortal',
+ {
+ type: 'div',
+ attributes: {
+ id: '#wrapper1',
+ },
+ classNames: ['wrapper-class-1'],
+ },
+ 'afterbegin',
+ );
+
+ domBuilder.removePortal('testPortal');
+
+ expect(document.body.children).toHaveLength(1);
+ expect(document.body.children[0].outerHTML).toBe('
');
+ });
+
+ it('removeAllPortals', () => {
+ document.body.innerHTML = '
';
+
+ const domBuilder = DomBuilder.getInstance();
+ domBuilder.createPortal(
+ 'wrapper1',
+ {
+ type: 'div',
+ attributes: {
+ id: '#wrapper1',
+ },
+ classNames: ['wrapper-class-1'],
+ },
+ 'afterbegin',
+ );
+ domBuilder.createPortal(
+ 'wrapper2',
+ {
+ type: 'div',
+ attributes: {
+ id: '#wrapper2',
+ },
+ classNames: ['wrapper-class-2'],
+ },
+ 'afterbegin',
+ );
+
+ expect(document.body.children).toHaveLength(3);
+ expect(document.body.children[0].outerHTML).toBe('
');
+ expect(document.body.children[1].outerHTML).toBe('
');
+ expect(document.body.children[2].outerHTML).toBe('
');
+
+ domBuilder.removeAllPortals(MynahPortalNames.WRAPPER);
+
+ expect(document.body.children).toHaveLength(1);
+ expect(document.body.children[0].outerHTML).toBe('
');
+ });
+ });
+});
diff --git a/mynah-ui/src/helper/__test__/events.spec.ts b/mynah-ui/src/helper/__test__/events.spec.ts
new file mode 100644
index 0000000000..bc828058c4
--- /dev/null
+++ b/mynah-ui/src/helper/__test__/events.spec.ts
@@ -0,0 +1,38 @@
+import { MynahEventNames } from '../../static';
+import { MynahUIGlobalEvents } from '../events';
+
+describe('events', () => {
+ it('addListener', () => {
+ const mockData = 'mockData';
+ const mockCopyToClipBoardEventHandler = jest.fn();
+ MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.COPY_CODE_TO_CLIPBOARD,
+ mockCopyToClipBoardEventHandler,
+ );
+ const mockCardVoteEventHandler = jest.fn();
+ MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.CARD_VOTE, mockCardVoteEventHandler);
+
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.COPY_CODE_TO_CLIPBOARD, mockData);
+
+ // Only COPY_CODE_TO_CLIPBOARD event's handler should have been called
+ expect(mockCardVoteEventHandler.mock.calls).toHaveLength(0);
+ expect(mockCopyToClipBoardEventHandler.mock.calls).toHaveLength(1);
+ expect(mockCopyToClipBoardEventHandler.mock.calls[0][0]).toBe(mockData);
+ });
+
+ it('removeListener', () => {
+ const mockData = 'mockData';
+ const mockCopyToClipBoardEventHandler = jest.fn();
+ const mockEventListenerId = MynahUIGlobalEvents.getInstance().addListener(
+ MynahEventNames.COPY_CODE_TO_CLIPBOARD,
+ mockCopyToClipBoardEventHandler,
+ );
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.COPY_CODE_TO_CLIPBOARD, mockData);
+ MynahUIGlobalEvents.getInstance().removeListener(MynahEventNames.COPY_CODE_TO_CLIPBOARD, mockEventListenerId);
+ MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.COPY_CODE_TO_CLIPBOARD, mockData);
+
+ // Should only have been called once
+ expect(mockCopyToClipBoardEventHandler.mock.calls).toHaveLength(1);
+ expect(mockCopyToClipBoardEventHandler.mock.calls[0][0]).toBe(mockData);
+ });
+});
diff --git a/mynah-ui/src/helper/__test__/file-tree.spec.ts b/mynah-ui/src/helper/__test__/file-tree.spec.ts
new file mode 100644
index 0000000000..ae5be99775
--- /dev/null
+++ b/mynah-ui/src/helper/__test__/file-tree.spec.ts
@@ -0,0 +1,42 @@
+import { TreeNode, fileListToTree } from '../file-tree';
+
+describe('file tree', () => {
+ it('fileListToTree', () => {
+ const modifiedFilePaths = ['project/src/hello.js'];
+ const deletedFilePaths = ['project/src/goodbye.js'];
+ const correctTreeNode: TreeNode = {
+ name: 'Changes',
+ type: 'folder',
+ children: [
+ {
+ name: 'project',
+ type: 'folder',
+ children: [
+ {
+ name: 'src',
+ type: 'folder',
+ children: [
+ {
+ name: 'hello.js',
+ type: 'file',
+ filePath: 'project/src/hello.js',
+ originalFilePath: 'project/src/hello.js',
+ deleted: false,
+ },
+ {
+ name: 'goodbye.js',
+ type: 'file',
+ filePath: 'project/src/goodbye.js',
+ originalFilePath: 'project/src/goodbye.js',
+ deleted: true,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+
+ expect(fileListToTree(modifiedFilePaths, deletedFilePaths)).toEqual(correctTreeNode);
+ });
+});
diff --git a/mynah-ui/src/helper/__test__/guid.spec.ts b/mynah-ui/src/helper/__test__/guid.spec.ts
new file mode 100644
index 0000000000..91f6cbff37
--- /dev/null
+++ b/mynah-ui/src/helper/__test__/guid.spec.ts
@@ -0,0 +1,35 @@
+import { generateUID } from '../guid';
+
+describe('generateUID', () => {
+ it('should generate a unique identifier', () => {
+ const uid1 = generateUID();
+ const uid2 = generateUID();
+
+ expect(uid1).toBeDefined();
+ expect(uid2).toBeDefined();
+ expect(uid1).not.toBe(uid2);
+ expect(typeof uid1).toBe('string');
+ expect(typeof uid2).toBe('string');
+ });
+
+ it('should generate UIDs of consistent format', () => {
+ const uid = generateUID();
+
+ // Should be a string with some length
+ expect(uid.length).toBeGreaterThan(0);
+
+ // Should contain alphanumeric characters
+ expect(uid).toMatch(/^[a-zA-Z0-9]+$/);
+ });
+
+ it('should generate different UIDs on multiple calls', () => {
+ const uids = new Set();
+
+ // Generate 100 UIDs and ensure they're all unique
+ for (let i = 0; i < 100; i++) {
+ uids.add(generateUID());
+ }
+
+ expect(uids.size).toBe(100);
+ });
+});
diff --git a/mynah-ui/src/helper/__test__/security.spec.ts b/mynah-ui/src/helper/__test__/security.spec.ts
new file mode 100644
index 0000000000..68d036be61
--- /dev/null
+++ b/mynah-ui/src/helper/__test__/security.spec.ts
@@ -0,0 +1,207 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { cleanHtml, escapeHtml } from '../sanitize';
+import { DomBuilder } from '../dom';
+
+describe('Security - XSS Prevention', () => {
+ let domBuilder: DomBuilder;
+
+ beforeEach(() => {
+ domBuilder = DomBuilder.getInstance();
+ document.body.innerHTML = '';
+ });
+
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ describe('cleanHtml', () => {
+ it('should remove script tags', () => {
+ const malicious = 'Safe content
';
+ const sanitized = cleanHtml(malicious);
+
+ expect(sanitized).not.toContain('';
+ const sanitized = cleanHtml(malicious);
+
+ expect(sanitized).toContain('Hello Security Team ');
+ expect(sanitized).not.toContain('';
+ const escaped = escapeHtml(unsafe);
+
+ expect(escaped).toBe('<script>alert("XSS")</script>');
+ });
+
+ it('should escape all dangerous characters', () => {
+ const unsafe = '& < > " \' /';
+ const escaped = escapeHtml(unsafe);
+
+ expect(escaped).toBe('& < > " ' /');
+ });
+ });
+
+ describe('DOM Builder Security', () => {
+ it('should sanitize innerHTML in build method', () => {
+ const maliciousContent = 'Safe content
';
+
+ const element = domBuilder.build({
+ type: 'div',
+ innerHTML: maliciousContent,
+ });
+
+ expect(element.innerHTML).not.toContain('Updated content
';
+
+ const updatedElement = domBuilder.update(initialElement, {
+ innerHTML: maliciousContent,
+ });
+
+ expect(updatedElement.innerHTML).not.toContain('';
+
+ const element = domBuilder.build({
+ type: 'div',
+ innerHTML: maliciousMarkdown,
+ });
+
+ // The content should be treated as plain text, not parsed as markdown
+ expect(element.innerHTML).not.toContain('';
+
+ const element = domBuilder.build({
+ type: 'div',
+ innerHTML: maliciousCustomContent,
+ });
+
+ expect(element.innerHTML).toContain('Title ');
+ expect(element.innerHTML).not.toContain(' 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+