|
1 | 1 | import { useContext, useEffect, useRef, useState } from "react";
|
2 | 2 | import { useTranslation } from "react-i18next";
|
3 | 3 | import { Helmet } from "react-helmet-async";
|
4 |
| -import { Checkbox, Panel, DefaultButton, Spinner, TextField, ICheckboxProps, ITextFieldProps } from "@fluentui/react"; |
| 4 | +import { |
| 5 | + Checkbox, |
| 6 | + Panel, |
| 7 | + DefaultButton, |
| 8 | + Spinner, |
| 9 | + TextField, |
| 10 | + ICheckboxProps, |
| 11 | + ITextFieldProps, |
| 12 | + Dropdown, |
| 13 | + IDropdownOption, |
| 14 | + IDropdownProps |
| 15 | +} from "@fluentui/react"; |
5 | 16 | import { useId } from "@fluentui/react-hooks";
|
6 | 17 |
|
7 | 18 | import styles from "./Ask.module.css";
|
@@ -38,6 +49,7 @@ export function Component(): JSX.Element {
|
38 | 49 | const [useSemanticCaptions, setUseSemanticCaptions] = useState<boolean>(false);
|
39 | 50 | const [useGPT4V, setUseGPT4V] = useState<boolean>(false);
|
40 | 51 | const [gpt4vInput, setGPT4VInput] = useState<GPT4VInput>(GPT4VInput.TextAndImages);
|
| 52 | + const [includeCategory, setIncludeCategory] = useState<string>(""); |
41 | 53 | const [excludeCategory, setExcludeCategory] = useState<string>("");
|
42 | 54 | const [question, setQuestion] = useState<string>("");
|
43 | 55 | const [vectorFieldList, setVectorFieldList] = useState<VectorFieldOptions[]>([VectorFieldOptions.Embedding, VectorFieldOptions.ImageEmbedding]);
|
@@ -120,6 +132,7 @@ export function Component(): JSX.Element {
|
120 | 132 | prompt_template: promptTemplate.length === 0 ? undefined : promptTemplate,
|
121 | 133 | prompt_template_prefix: promptTemplatePrefix.length === 0 ? undefined : promptTemplatePrefix,
|
122 | 134 | prompt_template_suffix: promptTemplateSuffix.length === 0 ? undefined : promptTemplateSuffix,
|
| 135 | + include_category: includeCategory.length === 0 ? undefined : includeCategory, |
123 | 136 | exclude_category: excludeCategory.length === 0 ? undefined : excludeCategory,
|
124 | 137 | top: retrieveCount,
|
125 | 138 | temperature: temperature,
|
@@ -181,6 +194,10 @@ export function Component(): JSX.Element {
|
181 | 194 | setUseSemanticCaptions(!!checked);
|
182 | 195 | };
|
183 | 196 |
|
| 197 | + const onIncludeCategoryChanged = (_ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IDropdownOption) => { |
| 198 | + setIncludeCategory((option?.key as string) || ""); |
| 199 | + }; |
| 200 | + |
184 | 201 | const onExcludeCategoryChanged = (_ev?: React.FormEvent, newValue?: string) => {
|
185 | 202 | setExcludeCategory(newValue || "");
|
186 | 203 | };
|
@@ -228,6 +245,8 @@ export function Component(): JSX.Element {
|
228 | 245 | const rerankerScoreFieldId = useId("rerankerScoreField");
|
229 | 246 | const retrieveCountId = useId("retrieveCount");
|
230 | 247 | const retrieveCountFieldId = useId("retrieveCountField");
|
| 248 | + const includeCategoryId = useId("includeCategory"); |
| 249 | + const includeCategoryFieldId = useId("includeCategoryField"); |
231 | 250 | const excludeCategoryId = useId("excludeCategory");
|
232 | 251 | const excludeCategoryFieldId = useId("excludeCategoryField");
|
233 | 252 | const semanticRankerId = useId("semanticRanker");
|
@@ -407,6 +426,24 @@ export function Component(): JSX.Element {
|
407 | 426 | )}
|
408 | 427 | />
|
409 | 428 |
|
| 429 | + <Dropdown |
| 430 | + id={includeCategoryFieldId} |
| 431 | + className={styles.chatSettingsSeparator} |
| 432 | + label={t("labels.includeCategory")} |
| 433 | + selectedKey={includeCategory} |
| 434 | + onChange={onIncludeCategoryChanged} |
| 435 | + aria-labelledby={includeCategoryId} |
| 436 | + options={[{ key: "", text: t("labels.includeCategoryOptions.all") }]} |
| 437 | + onRenderLabel={(props: IDropdownProps | undefined) => ( |
| 438 | + <HelpCallout |
| 439 | + labelId={includeCategoryId} |
| 440 | + fieldId={includeCategoryFieldId} |
| 441 | + helpText={t("helpTexts.includeCategory")} |
| 442 | + label={props?.label} |
| 443 | + /> |
| 444 | + )} |
| 445 | + /> |
| 446 | + |
410 | 447 | <TextField
|
411 | 448 | id={excludeCategoryFieldId}
|
412 | 449 | className={styles.chatSettingsSeparator}
|
|
0 commit comments