in gui/frontend/src/components/Chat/ChatOptions.tsx [105:619]
public render(): ComponentChild {
const { savedState, connectionVersion, currentSchema, genAiStatus } = this.props;
const { options, sectionStates, chatQueryHistory } = savedState;
const tables: ITag[] = [];
if (options?.tables) {
options.tables.forEach((table) => {
const fullyQualifiedTableName = `${table.schemaName}.${table.tableName}`;
tables.push({ id: fullyQualifiedTableName, caption: fullyQualifiedTableName });
});
}
const documents: IDictionary[] = [];
if (options?.documents) {
options.documents.forEach((doc) => {
documents.push({ title: doc.title, segment: doc.segment });
});
}
const schemaSection = sectionStates?.get("schemaSection") ?? {};
const historySection = sectionStates?.get("historySection") ?? {};
const tablesSection = sectionStates?.get("tablesSection") ?? {};
//const metadataSection = sectionStates?.get("metadataSection") ?? {};
const docsSection = sectionStates?.get("docsSection") ?? {};
const modelSection = sectionStates?.get("modelSection") ?? {};
const advancedModelSection = sectionStates?.get("advancedModelSection") ?? {};
const promptSection = sectionStates?.get("promptSection") ?? {};
const languageSection = sectionStates?.get("languageSection") ?? {};
const modelOptions = options?.modelOptions;
const languageSupportEnabled = genAiStatus?.languageSupport;
const modelDropdownItems = [
<DropdownItem id="default" caption="Default" />,
<DropdownItem id="llama3-8b-instruct-v1"
caption="llama3-8b-instruct-v1" />,
<DropdownItem id="mistral-7b-instruct-v1"
caption="mistral-7b-instruct-v1" />,
];
if ((connectionVersion ?? 0) >= 90301) {
modelDropdownItems.push(
<DropdownItem id="mistral-7b-instruct-v3"
caption="mistral-7b-instruct-v3" />,
<DropdownItem id="llama3.1-8b-instruct-v1"
caption="llama3.1-8b-instruct-v1" />,
<DropdownItem id="llama3.2-1b-instruct-v1"
caption="llama3.2-1b-instruct-v1" />,
<DropdownItem id="llama3.2-3b-instruct-v1"
caption="llama3.2-3b-instruct-v1" />,
);
}
modelDropdownItems.push(
<DropdownItem id="cohere.command-r-08-2024"
caption="cohere.command-r-08-2024 (added cost)" />,
<DropdownItem id="cohere.command-r-plus-08-2024"
caption="cohere.command-r-plus-08-2024 (added cost)" />,
<DropdownItem id="meta.llama-3.1-405b-instruct"
caption="meta.llama-3.1-405b-instruct (added cost)" />,
<DropdownItem id="meta.llama-3.2-90b-vision-instruct"
caption="meta.llama-3.2-90b-vision-instruct (added cost)" />,
<DropdownItem id="meta.llama-3.3-70b-instruct"
caption="meta.llama-3.3-70b-instruct (added cost)" />,
);
return (
<Container className={this.getEffectiveClassNames(["chatOptionsPanel"])} orientation={Orientation.TopDown}>
<Container className="header"
orientation={Orientation.TopDown}
mainAlignment={ContentAlignment.Start}
crossAlignment={ContentAlignment.Center}>
<Container className="title"
orientation={Orientation.LeftToRight}
mainAlignment={ContentAlignment.Stretch}
crossAlignment={ContentAlignment.Center}
>
<Icon src={Assets.lakehouse.chatOptionsIcon} />
<Label>HeatWave Chat</Label>
</Container>
<Label>AI Profile Editor</Label>
</Container>
<Accordion
sectionClosedSize={16}
sections={[
{
id: "schemaSection",
caption: "Schema Scope",
stretch: false,
minSize: 44,
maxSize: 44,
expanded: schemaSection.expanded ?? true,
initialSize: schemaSection.size ?? 54,
dimmed: false,
content: [
<Container className="scopeMultiItemRow" orientation={Orientation.LeftToRight}>
<Dropdown className="scopeSchema"
selection={options?.schemaName ?? "schemaDropdownAllSchemas"}
onSelect={this.handleSchemaChange}>
<DropdownItem id="schemaDropdownAllSchemas" caption="All Database Schemas" />
{options?.schemaName !== undefined &&
<DropdownItem id={options?.schemaName} caption={options?.schemaName} />}
{currentSchema !== undefined && currentSchema !== ""
&& (options?.schemaName === undefined
|| currentSchema !== options?.schemaName) &&
<DropdownItem id={currentSchema} caption={currentSchema} />}
</Dropdown>
</Container>,
],
},
/*{
id: "preambleSection",
caption: "Preamble",
stretch: false,
minSize: 54,
maxSize: 120,
expanded: preambleSection.expanded ?? false,
initialSize: preambleSection.size ?? 54,
dimmed: false,
content: [
<Container className="scopeMultiItemRow" orientation={Orientation.LeftToRight}>
<Input className="scopePreamble" multiLine={true} multiLineCount={3}
value={options?.preamble ?? ""}
spellCheck={false}
onChange={this.handlePreambleChange} />
</Container>,
],
},*/
{
id: "historySection",
caption: "History",
stretch: false,
minSize: 125,
maxSize: 126,
expanded: historySection.expanded ?? true,
initialSize: historySection.size ?? 125,
dimmed: false,
content: [
<Container className="scopeMultiItemRow" orientation={Orientation.LeftToRight}>
<TreeGrid
options={{
index: "param",
layout: "fitDataStretch",
showHeader: true,
rowHeight: 20,
}}
columns={[{
title: "User",
field: "userMessage",
editable: false,
tooltip: true,
formatter: this.historyMessageColumnFormatter,
}, {
title: "Chatbot",
field: "chatBotMessage",
editable: false,
tooltip: true,
formatter: this.historyMessageColumnFormatter,
}, {
title: "ChatQueryId",
field: "chatQueryId",
editable: false,
visible: false,
}]}
tableData={options?.chatHistory ?? []}
/>
<Dialog
ref={this.#dialogRef}
id="historyEditDialog"
className="historyEditDialog"
onClose={this.closeEditTextDialog}
caption={
<>
<Icon src={Codicon.EditorLayout} />
<Label>Edit chat history</Label>
</>
}
content={
<Input ref={this.#dialogRef}
id="historyEdit"
multiLine={true}
autoFocus={true}
multiLineCount={5}
className="historyEdit"
value={chatQueryHistory?.updatedText}
onChange={this.handleHistoryValueChange}
/>
}
actions={{
end: [
<Button
caption="Save"
id="ok"
key="ok"
onClick={this.handleDlgEditActionClick}
/>,
<Button
caption="Cancel"
id="cancel"
key="cancel"
onClick={this.handleDlgEditActionClick}
/>,
],
}}
{...this.unhandledProperties}
>
</Dialog>
</Container>,
],
},
{
id: "tablesSection",
caption: "Database Tables",
stretch: false,
minSize: 106,
maxSize: 136,
expanded: tablesSection.expanded ?? true,
initialSize: tablesSection.size ?? 40,
dimmed: false,
content: [
<Container className="scopeMultiItemRow" orientation={Orientation.TopDown}>
<TagInput className="scopeTables" removable={true} tags={tables}
onRemove={this.removeVectorTable} />
<Toggle id="lockTableListToggle"
caption="Lock table list" checkState={options?.lockTableList ?? false
? CheckState.Checked : CheckState.Unchecked}
onChange={this.toggleLockTableList} />
</Container>,
],
},
/*{
id: "metadataSection",
caption: "Limit by Metadata",
stretch: false,
minSize: 96,
maxSize: 120,
expanded: metadataSection.expanded ?? false,
initialSize: metadataSection.size ?? 96,
dimmed: false,
content: [
<Container className="scopeMultiItemRow" orientation={Orientation.LeftToRight}>
<TreeGrid
options={{
index: "param",
layout: "fitDataStretch",
showHeader: true,
rowHeight: 20,
}}
columns={[{
title: "Param",
field: "param",
editable: false,
}, {
title: "Value",
field: "value",
editable: true,
}]}
tableData={[
{ param: "title", value: "" },
{ param: "creationDate", value: "" },
]}
/>
</Container>,
],
},*/
{
id: "docsSection",
caption: "Matched Documents",
stretch: false,
minSize: 80,
maxSize: 180,
expanded: docsSection.expanded ?? true,
initialSize: docsSection.size ?? 120,
dimmed: false,
content: [
<Container className="scopeMultiItemRow" orientation={Orientation.LeftToRight}>
<TreeGrid
options={{
index: "title",
layout: "fitDataStretch",
showHeader: true,
}}
columns={[{
title: "Title",
field: "title",
editable: false,
tooltip: true,
}, {
title: "Segment",
field: "segment",
editable: false,
tooltip: true,
}]}
tableData={documents}
onFormatRow={(row: RowComponent): void => {
row.getElement().style.height = "20px";
}} />
</Container>,
],
},
{
id: "modelSection",
caption: "Model Options",
stretch: false,
minSize: 76,
maxSize: 76,
expanded: modelSection.expanded ?? true,
initialSize: modelSection.size ?? 76,
dimmed: false,
content: [
<Container className="scopeMultiItemColumn" orientation={Orientation.TopDown}
mainAlignment={ContentAlignment.Start} crossAlignment={ContentAlignment.Stretch}>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Model:" />
<Dropdown className="scopeModel"
selection={savedState.options?.modelOptions?.modelId ?? "default"}
onSelect={this.handleModelIdChange}>
{modelDropdownItems}
</Dropdown>
</Container>
{languageSupportEnabled &&
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Language:" />
<Dropdown className="scopeModel"
selection={savedState.options?.modelOptions?.language ?? "en"}
onSelect={this.handleModelLanguageChange}>
<DropdownItem caption="English" id="en" />
<DropdownItem caption="German" id="de" />
<DropdownItem caption="French" id="fr" />
<DropdownItem caption="Spanish" id="es" />
<DropdownItem caption="Portuguese" id="pt" />
<DropdownItem caption="Italian" id="it" />
<DropdownItem caption="Dutch" id="nl" />
<DropdownItem caption="Czech" id="cs" />
<DropdownItem caption="Polish" id="pl" />
<DropdownItem caption="Persian" id="fa" />
<DropdownItem caption="Hindi" id="hi" />
<DropdownItem caption="Bengali" id="bn" />
<DropdownItem caption="Urdu" id="ur" />
<DropdownItem caption="Brazilian Portuguese" id="pt-BR" />
<DropdownItem caption="Chinese" id="zh" />
<DropdownItem caption="Arabic" id="ar" />
<DropdownItem caption="Hebrew" id="he" />
<DropdownItem caption="Tibetan" id="bo" />
<DropdownItem caption="Turkish" id="tr" />
<DropdownItem caption="Japanese" id="ja" />
<DropdownItem caption="Korean" id="ko" />
<DropdownItem caption="Vietnamese" id="vi" />
<DropdownItem caption="Khmer" id="km" />
<DropdownItem caption="Thai" id="th" />
<DropdownItem caption="Lao" id="lo" />
<DropdownItem caption="Indonesian" id="id" />
<DropdownItem caption="Malay" id="ms" />
<DropdownItem caption="Tagalog" id="tl" />
</Dropdown>
</Container>}
</Container>,
],
},
{
id: "advancedModelSection",
caption: "Advanced Model Options",
stretch: false,
minSize: 190,
maxSize: 190,
expanded: advancedModelSection.expanded ?? false,
initialSize: modelSection.size ?? 190,
dimmed: false,
content: [
<Container className="scopeMultiItemColumn" orientation={Orientation.TopDown}
mainAlignment={ContentAlignment.Start} crossAlignment={ContentAlignment.Stretch}>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Temperature:" />
<Input id="temperature"
value={String(modelOptions?.temperature !== undefined
? modelOptions.temperature : "")}
onBlur={this.handleModelOptionChange} />
<Label className="infoLbl" caption="(0.0 - 5.0)" />
</Container>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Max Tokens:" />
<Input id="maxTokens"
value={String(modelOptions?.maxTokens !== undefined
? modelOptions.maxTokens : "")}
onBlur={this.handleModelOptionChange} />
<Label className="infoLbl" caption="(1 - 4096)" />
</Container>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Top k:" />
<Input id="topK"
value={String(modelOptions?.topK !== undefined
? modelOptions?.topK : "")}
onBlur={this.handleModelOptionChange} />
<Label className="infoLbl" caption="(0 - 500)" />
</Container>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Top p:" />
<Input id="topP"
value={String(modelOptions?.topP !== undefined
? modelOptions.topP : "")}
onBlur={this.handleModelOptionChange} />
<Label className="infoLbl" caption="(0.0 - 1.0)" />
</Container>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Repeat Penalty:" />
<Input id="repeatPenalty"
value={String(modelOptions?.repeatPenalty !== undefined
? modelOptions.repeatPenalty : "")}
onBlur={this.handleModelOptionChange} />
<Label className="infoLbl" caption="(0.0 - 1.0)" />
</Container>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Stop Sequences:" />
<Input id="stopSequences"
value={String(modelOptions?.stopSequences || "")}
multiLine={true} multiLineCount={2}
onBlur={this.handleModelOptionChange} />
</Container>
</Container>,
],
},
{
id: "promptSection",
caption: "Review Generated Prompt",
stretch: false,
minSize: 120,
maxSize: 200,
expanded: promptSection.expanded ?? false,
initialSize: promptSection.size ?? 54,
dimmed: false,
content: [
<Container className="scopeMultiItemColumn" orientation={Orientation.TopDown}>
<Input className="generatedPrompt" multiLine={true} multiLineCount={5}
value={options?.prompt ?? ""}
spellCheck={false}
onChange={this.handlePreambleChange} />
<Toggle id="returnPromptToggle"
caption="Capture generated prompt" checkState={options?.returnPrompt ?? false
? CheckState.Checked : CheckState.Unchecked}
onChange={this.toggleReturnPrompt} />
</Container>,
],
},
{
id: "languageSection",
caption: "Language Settings",
stretch: false,
minSize: 94,
maxSize: 94,
expanded: languageSection.expanded ?? false,
initialSize: languageSection.size ?? 94,
dimmed: false,
content: [
<Container className="scopeMultiItemColumn" orientation={Orientation.TopDown}
mainAlignment={ContentAlignment.Start} crossAlignment={ContentAlignment.Stretch}>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Translation:" />
<Dropdown className="scopeLanguage"
selection={savedState.options?.languageOptions?.language ?? "noTranslation"}
onSelect={this.handleTranslationLanguageChange}
disabled={savedState.options?.modelOptions?.language !== "en" &&
savedState.options?.modelOptions?.language !== undefined
}>
<DropdownItem id={"noTranslation"} caption={"No translation"} />
<DropdownItem id={"English"} caption={"English"} />
<DropdownItem id={"German"} caption={"German"} />
<DropdownItem id={"Spanish"} caption={"Spanish"} />
<DropdownItem id={"Portuguese"} caption={"Portuguese"} />
<DropdownItem id={"Japanese"} caption={"Japanese"} />
<DropdownItem id={"Italian"} caption={"Italian"} />
</Dropdown>
</Container>
<Container className="scopeLabeledItem" orientation={Orientation.LeftToRight}>
<Label className="scopeLabel" caption="Translation Model:" />
<Dropdown className="scopeModel"
selection={savedState.options?.languageOptions?.modelId ??
"mistral-7b-instruct-v1"}
onSelect={this.handleLanguageModelIdChange}>
<DropdownItem id={"mistral-7b-instruct-v1"} caption={"Mistral"} />
</Dropdown>
</Container>
<Toggle id="translateUserPromptToggle"
caption="Only translate answers" checkState={
options?.languageOptions?.translateUserPrompt ?? true
? CheckState.Unchecked : CheckState.Checked}
onChange={this.toggleTranslateUserPrompt} />
</Container>,
],
},
]}
onSectionExpand={this.handleSectionExpand}
/>
<Container className="scopeControls" orientation={Orientation.LeftToRight}
mainAlignment={ContentAlignment.End}>
<Button
caption="Save"
className="saveChatOptionsBtn"
onClick={this.handleSaveOptionsBtnClick}
/>
<Button
caption="Load"
className="loadChatOptionsBtn"
onClick={this.handleLoadOptionsBtnClick}
/>
<Button
caption="Start New Chat"
className="startNewChatBtn"
onClick={this.handleStartNewChatClick}
/>
</Container>
</Container>
);
}