|
1 | 1 | import { useRef, useState, useEffect, useContext } from "react"; |
2 | 2 | import { useTranslation } from "react-i18next"; |
3 | 3 | import { Helmet } from "react-helmet-async"; |
4 | | -import { Checkbox, Panel, DefaultButton, TextField, ITextFieldProps, ICheckboxProps } from "@fluentui/react"; |
| 4 | +import { |
| 5 | + Checkbox, |
| 6 | + Panel, |
| 7 | + DefaultButton, |
| 8 | + TextField, |
| 9 | + ITextFieldProps, |
| 10 | + ICheckboxProps, |
| 11 | + Dropdown, |
| 12 | + IDropdownOption, |
| 13 | + IDropdownProps |
| 14 | +} from "@fluentui/react"; |
5 | 15 | import { SparkleFilled } from "@fluentui/react-icons"; |
6 | 16 | import { useId } from "@fluentui/react-hooks"; |
7 | 17 | import readNDJSONStream from "ndjson-readablestream"; |
@@ -53,6 +63,7 @@ const Chat = () => { |
53 | 63 | const [useSemanticRanker, setUseSemanticRanker] = useState<boolean>(true); |
54 | 64 | const [shouldStream, setShouldStream] = useState<boolean>(true); |
55 | 65 | const [useSemanticCaptions, setUseSemanticCaptions] = useState<boolean>(false); |
| 66 | + const [includeCategory, setIncludeCategory] = useState<string>(""); |
56 | 67 | const [excludeCategory, setExcludeCategory] = useState<string>(""); |
57 | 68 | const [useSuggestFollowupQuestions, setUseSuggestFollowupQuestions] = useState<boolean>(false); |
58 | 69 | const [vectorFieldList, setVectorFieldList] = useState<VectorFieldOptions[]>([VectorFieldOptions.Embedding]); |
@@ -184,6 +195,7 @@ const Chat = () => { |
184 | 195 | context: { |
185 | 196 | overrides: { |
186 | 197 | prompt_template: promptTemplate.length === 0 ? undefined : promptTemplate, |
| 198 | + include_category: includeCategory.length === 0 ? undefined : includeCategory, |
187 | 199 | exclude_category: excludeCategory.length === 0 ? undefined : excludeCategory, |
188 | 200 | top: retrieveCount, |
189 | 201 | temperature: temperature, |
@@ -291,6 +303,10 @@ const Chat = () => { |
291 | 303 | setShouldStream(!!checked); |
292 | 304 | }; |
293 | 305 |
|
| 306 | + const onIncludeCategoryChanged = (_ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IDropdownOption) => { |
| 307 | + setIncludeCategory((option?.key as string) || ""); |
| 308 | + }; |
| 309 | + |
294 | 310 | const onExcludeCategoryChanged = (_ev?: React.FormEvent, newValue?: string) => { |
295 | 311 | setExcludeCategory(newValue || ""); |
296 | 312 | }; |
@@ -345,6 +361,8 @@ const Chat = () => { |
345 | 361 | const rerankerScoreFieldId = useId("rerankerScoreField"); |
346 | 362 | const retrieveCountId = useId("retrieveCount"); |
347 | 363 | const retrieveCountFieldId = useId("retrieveCountField"); |
| 364 | + const includeCategoryId = useId("includeCategory"); |
| 365 | + const includeCategoryFieldId = useId("includeCategoryField"); |
348 | 366 | const excludeCategoryId = useId("excludeCategory"); |
349 | 367 | const excludeCategoryFieldId = useId("excludeCategoryField"); |
350 | 368 | const semanticRankerId = useId("semanticRanker"); |
@@ -607,6 +625,30 @@ const Chat = () => { |
607 | 625 | )} |
608 | 626 | /> |
609 | 627 |
|
| 628 | + <Dropdown |
| 629 | + id={includeCategoryFieldId} |
| 630 | + className={styles.chatSettingsSeparator} |
| 631 | + label={t("labels.includeCategory")} |
| 632 | + selectedKey={includeCategory} |
| 633 | + onChange={onIncludeCategoryChanged} |
| 634 | + aria-labelledby={includeCategoryId} |
| 635 | + options={[ |
| 636 | + { key: '', text: t("labels.includeCategoryOptions.all") }, |
| 637 | + // You can add a category key here for ingested data like below: |
| 638 | + // { key: 'categoryName', text: 'Meaningful Category Name' } |
| 639 | + // Alternatively, display the key to guide the user on what to type |
| 640 | + // in the "Exclude category" field (e.g., 'Meaningful Category Name(categoryName)'). |
| 641 | + ]} |
| 642 | + onRenderLabel={(props: IDropdownProps | undefined) => ( |
| 643 | + <HelpCallout |
| 644 | + labelId={includeCategoryId} |
| 645 | + fieldId={includeCategoryFieldId} |
| 646 | + helpText={t("helpTexts.includeCategory")} |
| 647 | + label={props?.label} |
| 648 | + /> |
| 649 | + )} |
| 650 | + /> |
| 651 | + |
610 | 652 | <TextField |
611 | 653 | id={excludeCategoryFieldId} |
612 | 654 | className={styles.chatSettingsSeparator} |
|
0 commit comments