You can set the config from the constructor parameters while creating a new instance of mynah-ui.
Note: You cannot set it on runtime. It is getting used just once during the initialization.
...
interface ConfigModel {
// Do not forget that you have to provide all of them
// Config allows partial set of texts
texts: {
mainTitle?: string;
feedbackFormTitle?: string;
feedbackFormOptionsLabel?: string;
feedbackFormCommentLabel?: string;
feedbackThanks?: string;
feedbackReportButtonLabel?: string;
codeSuggestions?: string;
files?: string;
insertAtCursorLabel?: string;
copy?: string;
showMore?: string;
save?: string;
cancel?: string;
submit?: string;
pleaseSelect?: string;
stopGenerating?: string;
copyToClipboard?: string;
noMoreTabsTooltip?: string;
codeSuggestionWithReferenceTitle?: string;
spinnerText?: string;
tabCloseConfirmationMessage?: string;
tabCloseConfirmationKeepButton?: string;
tabCloseConfirmationCloseButton?: string;
noTabsOpen: string; // Supports markdown
openNewTab: string;
};
// Options to show up on the overlay feedback form
// after user clicks to downvote on a chat item
// and clicks 'Report' again
feedbackOptions: Array<{
label: string;
value: string;
}>;
tabBarButtons?: TabBarMainAction[]; // Tab bar buttons will be shown on the right of the tab
maxUserInput: number; // max number of chars for the input field
codeInsertToCursorEnabled?: boolean; // show or hide copy buttons on code blocks system wide
codeCopyToClipboardEnabled?: boolean; // show or hide insert to cursor buttons on code blocks system wide
autoFocus: boolean; // auto focuses to input panel after every action
maxTabs: number; // set 1 to hide tabs panel
showPromptField: boolean; // shows prompt field (default: true)
}
...You can put buttons on the right of the tab bar also with some inner buttons inside a menu. You can do it in two different ways. If you want the buttons globally available for every tab you can use the tabBarButtons in the config. If you want them set individually for different tabs check the DATAMODEL Documentation.
const mynahUI = new MynahUI({
...
config: {
...
tabBarButtons: [
{
id: 'clear',
description: 'Clear messages in this tab',
icon: MynahIcons.REFRESH,
},
{
id: 'multi',
icon: MynahIcons.ELLIPSIS,
items: [
{
id: 'menu-action-1',
text: 'Menu action 1!',
icon: MynahIcons.CHAT,
},
{
id: 'menu-action-2',
text: 'Menu action 2!',
icon: MynahIcons.CODE_BLOCK,
},
{
id: 'menu-action-3',
text: 'Menu action 3!'
}
]
}
]
}
...
});
All static texts will be shown on UI. Please take a look at each image to identify which text blongs to which item on UI.
Default tab title text if it is not set through store data for that tab.
Feedback type options to be shown on feedback form. defaults:
...
feedbackOptions: [
{
value: 'inaccurate-response',
label: 'Inaccurate response',
},
{
value: 'harmful-content',
label: 'Harmful content'
},
{
value: 'overlap',
label: 'Overlaps with existing content'
},
{
value: 'incorrect-syntax',
label: 'Incorrect syntax'
},
{
value: 'buggy-code',
label: 'Buggy code'
},
{
value: 'low-quality',
label: 'Low quality'
},
{
value: 'other',
label: 'Other'
}
],
...
Maximum number of tabs user/system can open in a single instance of mynah-ui.
default: 1000
An important note here is that if you provide 1 to maxTabs, it will not show the tab bar at all. However you still need to add a tab then initially to show a content.
And finally, if you try to add tabs more than given maxTabs amount while initializing the MynahUI with Constructor Properties, it will only generate the tabs till it reaches the maxTabs limit.
Assume that you've provided 1 for maxTabs.
Just auto focus to prompt input field after every response arrival or initialization.
default: true
Max number of chars user can insert into the prompt field. But, as might know you can also add code attachments under the prompt field. A treshold of 96 chars will be automatically reduced from the maxUserInput.
So beware that if you want 4000 chars exact, you need to give 4096 to the config.
default: 4096
These two parameters allow you to make copy and insert buttons disabled system wide. If you want to disable it specifically for a message you can do it through ChatItem object. Please see DATAMODEL Documentation.
With this parameter, you can add global code block actions to the code blocks. But, you can override them through ChatItem Data Model.
If you want to show that action only for certain coding languages, you can set the array for acceptedLanguages parameter. Keep in mind that it will check an exact mathc. If the incoming language is same with one of the acceptedLanguages list, it will show the action.
{
codeBlockActions: {
...(codeCopyToClipboardEnabled !== false
? {
copy: {
id: 'copy',
label: texts.copy,
icon: MynahIcons.COPY
}
}
: {}),
...(codeInsertToCursorEnabled !== false
? {
'insert-to-cursor': {
id: 'insert-to-cursor',
label: texts.insertAtCursorLabel,
icon: MynahIcons.CURSOR_INSERT
}
}
: {}),
}
}
Show or hide the prompt input field completely. You may want to hide the prompt field by setting showPromptField to false to make the chat work one way only. Just to provide answers or information.
default: true
If you set showPromptField to false
