|
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