Rename OneShot to Ask, update Black style

app/frontend/src/components/GPT4VSettings/GPT4VSettings.tsx

@@ -38,7 +38,6 @@ export const GPT4VSettings = ({ updateGPT4VInputs, updateUseGPT4V, isUseGPT4V, g
             {useGPT4V && (
                 <Dropdown
                     selectedKey={vectorFieldOption}
-                    className={styles.oneshotSettingsSeparator}
                     label="GPT-4 Turbo with Vision Inputs"
                     options={[
                         {

app/frontend/src/components/VectorSettings/VectorSettings.tsx

@@ -54,7 +54,6 @@ export const VectorSettings = ({ updateRetrievalMode, updateVectorFields, showIm
     return (
         <Stack className={styles.container} tokens={{ childrenGap: 10 }}>
             <Dropdown
-                className={styles.oneshotSettingsSeparator}
                 label="Retrieval mode"
                 options={[
                     { key: "hybrid", text: "Vectors + Text (Hybrid)", selected: retrievalMode == RetrievalMode.Hybrid, data: RetrievalMode.Hybrid },

app/frontend/src/index.tsx

@@ -51,7 +51,7 @@ const router = createHashRouter([
             },
             {
                 path: "qa",
-                lazy: () => import("./pages/oneshot/OneShot")
+                lazy: () => import("./pages/ask/Ask")
             },
             {
                 path: "*",

app/frontend/src/pages/oneshot/OneShot.module.css → app/frontend/src/pages/ask/Ask.module.css

@@ -1,18 +1,18 @@
-.oneshotContainer {
+.askContainer {
     display: flex;
     flex: 1;
     flex-direction: column;
     align-items: center;
 }
 
-.oneshotTopSection {
+.askTopSection {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
 }
 
-.oneshotBottomSection {
+.askBottomSection {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
@@ -22,40 +22,40 @@
     margin-top: 20px;
 }
 
-.oneshotTitle {
+.askTitle {
     font-size: 4rem;
     font-weight: 600;
     margin-top: 130px;
 }
 
 @media only screen and (max-width: 800px) {
-    .oneshotTitle {
+    .askTitle {
         font-size: 3rem;
         font-weight: 600;
         margin-top: 0;
     }
 }
 
-.oneshotQuestionInput {
+.askQuestionInput {
     max-width: 800px;
     width: 100%;
     padding-left: 10px;
     padding-right: 10px;
 }
 
-.oneshotAnswerContainer {
+.askAnswerContainer {
     max-width: 800px;
     width: 100%;
     padding-left: 10px;
     padding-right: 10px;
 }
 
-.oneshotAnalysisPanel {
+.askAnalysisPanel {
     width: 600px;
     margin-left: 20px;
 }
 
-.oneshotSettingsSeparator {
+.askSettingsSeparator {
     margin-top: 15px;
 }
 

app/frontend/src/pages/oneshot/OneShot.tsx → app/frontend/src/pages/ask/Ask.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Checkbox, Panel, DefaultButton, Spinner, TextField, SpinButton, IDropdownOption, Dropdown } from "@fluentui/react";
 
-import styles from "./OneShot.module.css";
+import styles from "./Ask.module.css";
 
 import { askApi, configApi, ChatAppResponse, ChatAppRequest, RetrievalMode, VectorFieldOptions, GPT4VInput } from "../../api";
 import { Answer, AnswerError } from "../../components/Answer";
@@ -167,11 +167,11 @@ export function Component(): JSX.Element {
     };
 
     return (
-        <div className={styles.oneshotContainer}>
-            <div className={styles.oneshotTopSection}>
+        <div className={styles.askContainer}>
+            <div className={styles.askTopSection}>
                 <SettingsButton className={styles.settingsButton} onClick={() => setIsConfigPanelOpen(!isConfigPanelOpen)} />
-                <h1 className={styles.oneshotTitle}>Ask your data</h1>
-                <div className={styles.oneshotQuestionInput}>
+                <h1 className={styles.askTitle}>Ask your data</h1>
+                <div className={styles.askQuestionInput}>
                     <QuestionInput
                         placeholder="Example: Does my plan cover annual eye exams?"
                         disabled={isLoading}
@@ -180,11 +180,11 @@ export function Component(): JSX.Element {
                     />
                 </div>
             </div>
-            <div className={styles.oneshotBottomSection}>
+            <div className={styles.askBottomSection}>
                 {isLoading && <Spinner label="Generating answer" />}
                 {!lastQuestionRef.current && <ExampleList onExampleClicked={onExampleClicked} useGPT4V={useGPT4V} />}
                 {!isLoading && answer && !error && (
-                    <div className={styles.oneshotAnswerContainer}>
+                    <div className={styles.askAnswerContainer}>
                         <Answer
                             answer={answer}
                             isStreaming={false}
@@ -195,13 +195,13 @@ export function Component(): JSX.Element {
                     </div>
                 )}
                 {error ? (
-                    <div className={styles.oneshotAnswerContainer}>
+                    <div className={styles.askAnswerContainer}>
                         <AnswerError error={error.toString()} onRetry={() => makeApiRequest(lastQuestionRef.current)} />
                     </div>
                 ) : null}
                 {activeAnalysisPanelTab && answer && (
                     <AnalysisPanel
-                        className={styles.oneshotAnalysisPanel}
+                        className={styles.askAnalysisPanel}
                         activeCitation={activeCitation}
                         onActiveTabChanged={x => onToggleTab(x)}
                         citationHeight="600px"
@@ -221,30 +221,30 @@ export function Component(): JSX.Element {
                 isFooterAtBottom={true}
             >
                 <TextField
-                    className={styles.oneshotSettingsSeparator}
+                    className={styles.askSettingsSeparator}
                     defaultValue={promptTemplate}
                     label="Override prompt template"
                     multiline
                     autoAdjustHeight
                     onChange={onPromptTemplateChange}
                 />
                 <SpinButton
-                    className={styles.oneshotSettingsSeparator}
+                    className={styles.askSettingsSeparator}
                     label="Retrieve this many search results:"
                     min={1}
                     max={50}
                     defaultValue={retrieveCount.toString()}
                     onChange={onRetrieveCountChange}
                 />
-                <TextField className={styles.oneshotSettingsSeparator} label="Exclude category" onChange={onExcludeCategoryChanged} />
+                <TextField className={styles.askSettingsSeparator} label="Exclude category" onChange={onExcludeCategoryChanged} />
                 <Checkbox
-                    className={styles.oneshotSettingsSeparator}
+                    className={styles.askSettingsSeparator}
                     checked={useSemanticRanker}
                     label="Use semantic ranker for retrieval"
                     onChange={onUseSemanticRankerChange}
                 />
                 <Checkbox
-                    className={styles.oneshotSettingsSeparator}
+                    className={styles.askSettingsSeparator}
                     checked={useSemanticCaptions}
                     label="Use query-contextual summaries instead of whole documents"
                     onChange={onUseSemanticCaptionsChange}
@@ -270,7 +270,7 @@ export function Component(): JSX.Element {
 
                 {useLogin && (
                     <Checkbox
-                        className={styles.oneshotSettingsSeparator}
+                        className={styles.askSettingsSeparator}
                         checked={useOidSecurityFilter || requireAccessControl}
                         label="Use oid security filter"
                         disabled={!isLoggedIn(client) || requireAccessControl}
@@ -279,7 +279,7 @@ export function Component(): JSX.Element {
                 )}
                 {useLogin && (
                     <Checkbox
-                        className={styles.oneshotSettingsSeparator}
+                        className={styles.askSettingsSeparator}
                         checked={useGroupsSecurityFilter || requireAccessControl}
                         label="Use groups security filter"
                         disabled={!isLoggedIn(client) || requireAccessControl}
@@ -292,4 +292,4 @@ export function Component(): JSX.Element {
     );
 }
 
-Component.displayName = "OneShot";
+Component.displayName = "Ask";

docs/customization.md

@@ -75,7 +75,7 @@ The UI provides a "Developer Settings" menu for customizing the approaches, like
 Those settings are passed in the "context" field of the request to the backend, and are not saved permanently.
 However, if you find a setting that you do want to make permanent, there are two approaches:
 
-1. Change the defaults in the frontend. You'll find the defaults in `Chat.tsx` and `OneShot.tsx` (for Ask). For example, this line of code sets the default retrieval mode to Hybrid:
+1. Change the defaults in the frontend. You'll find the defaults in `Chat.tsx` and `Ask.tsx`. For example, this line of code sets the default retrieval mode to Hybrid:
 
 ```typescript
 const [retrievalMode, setRetrievalMode] = useState<RetrievalMode>(RetrievalMode.Hybrid);