From 42be38b185660f2861b6ea89c1214368ef24e2eb Mon Sep 17 00:00:00 2001
From: "Dina Berry (personal)" <dfberry@users.noreply.github.com>
Date: Tue, 24 Oct 2023 08:00:35 -0700
Subject: [PATCH] fix: fix tooltips for style and const (#87)

* fix: fix for style and const

* fix: add edit

* fix: add changes as requested
---
 packages/webapp/src/i18n/tooltips.ts          |  33 ++++
 packages/webapp/src/pages/chat/Chat.tsx       |  18 +-
 packages/webapp/src/pages/oneshot/OneShot.tsx | 173 ++++++++++--------
 3 files changed, 138 insertions(+), 86 deletions(-)
 create mode 100644 packages/webapp/src/i18n/tooltips.ts

diff --git a/packages/webapp/src/i18n/tooltips.ts b/packages/webapp/src/i18n/tooltips.ts
new file mode 100644
index 00000000..d5fc5210
--- /dev/null
+++ b/packages/webapp/src/i18n/tooltips.ts
@@ -0,0 +1,33 @@
+// Keep values less than 20 words.
+// Don't add links to the tooltips.
+export const toolTipText = {
+  approaches: 'Retrieve first uses Azure Search. Read first uses LangChain.',
+  promptTemplate: "Allows user to override the chatbot's prompt.",
+  promptTemplatePrefix:
+    "Allows user to provide a prefix to the chatbot's prompt. For example, `Answer the following question as if I were in high school.`",
+  promptTemplateSuffix:
+    "Allows user to provide a suffix to the chatbot's prompt. For example, `Return the first 50 words.`",
+  retrieveNumber: 'Number of results affecting final answer',
+  excludeCategory: 'Example categories include ...',
+  useSemanticRanker:
+    'Semantic ranker is a machine learning model to improve the relevance and accuracy of search results.',
+  useQueryContextSummaries:
+    'Can improve the relevance and accuracy of search results by providing a more concise and focused summary of the most relevant information related to the query or context.',
+  suggestFollowupQuestions: 'Provide follow-up questions to continue conversation.',
+  retrievalMode:
+    "The retrieval mode choices determine how the chatbot retrieves and ranks responses based on semantic similarity to the user's query. `Vectors + Text (Hybrid)` uses a combination of vector embeddings and text matching, `Vectors` uses only vector embeddings, and `Text` uses only text matching.",
+  streamChat:
+    'Continuously deliver responses as they are generated or wait until all responses are generated before delivering them.',
+};
+
+// beak: triangle color
+// beakCurtain: outer edge
+// calloutMain: content center
+// No style to control text color
+export const toolTipTextCalloutProps = {
+  styles: {
+    beak: { background: '#D3D3D3' },
+    beakCurtain: { background: '#D3D3D3' },
+    calloutMain: { background: '#D3D3D3' },
+  },
+};
diff --git a/packages/webapp/src/pages/chat/Chat.tsx b/packages/webapp/src/pages/chat/Chat.tsx
index b826ddc8..b49ed83d 100644
--- a/packages/webapp/src/pages/chat/Chat.tsx
+++ b/packages/webapp/src/pages/chat/Chat.tsx
@@ -5,6 +5,7 @@ import { SettingsButton } from '../../components/SettingsButton/index.js';
 import { Checkbox, DefaultButton, Dropdown, Panel, SpinButton, TextField, TooltipHost } from '@fluentui/react';
 import type { IDropdownOption } from '@fluentui/react/lib-commonjs/Dropdown';
 import 'chat-component';
+import { toolTipText, toolTipTextCalloutProps } from '../../i18n/tooltips.js';
 
 const Chat = () => {
   const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
@@ -105,9 +106,8 @@ const Chat = () => {
         onRenderFooterContent={() => <DefaultButton onClick={() => setIsConfigPanelOpen(false)}>Close</DefaultButton>}
         isFooterAtBottom={true}
       >
-        <TooltipHost content="Allows user to customize the chatbot's behavior by providing initial context.">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.promptTemplate}>
           <TextField
-            id="promptTemplate"
             className={styles.chatSettingsSeparator}
             defaultValue={promptTemplate}
             label="Override prompt template"
@@ -117,7 +117,7 @@ const Chat = () => {
           />
         </TooltipHost>
 
-        <TooltipHost content="Number of results affecting final answer.">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.retrieveNumber}>
           <SpinButton
             className={styles.chatSettingsSeparator}
             label="Retrieve this many search results:"
@@ -127,14 +127,14 @@ const Chat = () => {
             onChange={onRetrieveCountChange}
           />
         </TooltipHost>
-        <TooltipHost content="Example categories include ...">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.excludeCategory}>
           <TextField
             className={styles.chatSettingsSeparator}
             label="Exclude category"
             onChange={onExcludeCategoryChanged}
           />
         </TooltipHost>
-        <TooltipHost content="Semantic ranker is a machine learning model to improve the relevance and accuracy of search results.">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.useSemanticRanker}>
           <Checkbox
             className={styles.chatSettingsSeparator}
             checked={useSemanticRanker}
@@ -142,7 +142,7 @@ const Chat = () => {
             onChange={onUseSemanticRankerChange}
           />
         </TooltipHost>
-        <TooltipHost content="Can improve the relevance and accuracy of search results by providing a more concise and focused summary of the most relevant Info12Regularrmation related to the query or context.">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.useQueryContextSummaries}>
           <Checkbox
             className={styles.chatSettingsSeparator}
             checked={useSemanticCaptions}
@@ -151,7 +151,7 @@ const Chat = () => {
             disabled={!useSemanticRanker}
           />
         </TooltipHost>
-        <TooltipHost content="Provide follow-up questions to continue conversation.">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.suggestFollowupQuestions}>
           <Checkbox
             className={styles.chatSettingsSeparator}
             checked={useSuggestFollowupQuestions}
@@ -159,7 +159,7 @@ const Chat = () => {
             onChange={onUseSuggestFollowupQuestionsChange}
           />
         </TooltipHost>
-        <TooltipHost content="The retrieval mode choices determine how the chatbot retrieves and ranks responses based on semantic similarity to the user's query. `Vectors + Text (Hybrid)` uses a combination of vector embeddings and text matching, `Vectors` uses only vector embeddings, and `Text` uses only text matching.">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.retrievalMode}>
           <Dropdown
             className={styles.chatSettingsSeparator}
             label="Retrieval mode"
@@ -182,7 +182,7 @@ const Chat = () => {
             onChange={onRetrievalModeChange}
           />
         </TooltipHost>
-        <TooltipHost content="Continuously deliver responses as they are generated or wait until all responses are generated before delivering them.">
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.streamChat}>
           <Checkbox
             className={styles.chatSettingsSeparator}
             checked={useStream}
diff --git a/packages/webapp/src/pages/oneshot/OneShot.tsx b/packages/webapp/src/pages/oneshot/OneShot.tsx
index b13e5a07..1bdcc50d 100644
--- a/packages/webapp/src/pages/oneshot/OneShot.tsx
+++ b/packages/webapp/src/pages/oneshot/OneShot.tsx
@@ -6,6 +6,7 @@ import {
   Panel,
   SpinButton,
   TextField,
+  TooltipHost,
   type IChoiceGroupOption,
   type IDropdownOption,
 } from '@fluentui/react';
@@ -17,6 +18,7 @@ import { Approaches, RetrievalMode, apiBaseUrl } from '../../api/index.js';
 import { SettingsButton } from '../../components/SettingsButton/SettingsButton.jsx';
 
 import 'chat-component';
+import { toolTipText, toolTipTextCalloutProps } from '../../i18n/tooltips.js';
 
 export function Component(): JSX.Element {
   const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
@@ -125,93 +127,110 @@ export function Component(): JSX.Element {
         onRenderFooterContent={() => <DefaultButton onClick={() => setIsConfigPanelOpen(false)}>Close</DefaultButton>}
         isFooterAtBottom={true}
       >
-        <ChoiceGroup
-          className={styles.oneshotSettingsSeparator}
-          label="Approach"
-          options={approaches}
-          defaultSelectedKey={approach}
-          onChange={onApproachChange}
-        />
-
-        {(approach === Approaches.RetrieveThenRead || approach === Approaches.ReadDecomposeAsk) && (
-          <TextField
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.approaches}>
+          <ChoiceGroup
             className={styles.oneshotSettingsSeparator}
-            defaultValue={promptTemplate}
-            label="Override prompt template"
-            multiline
-            autoAdjustHeight
-            onChange={onPromptTemplateChange}
+            label="Approach"
+            options={approaches}
+            defaultSelectedKey={approach}
+            onChange={onApproachChange}
           />
-        )}
+        </TooltipHost>
 
-        {approach === Approaches.ReadRetrieveRead && (
-          <>
-            <TextField
-              className={styles.oneshotSettingsSeparator}
-              defaultValue={promptTemplatePrefix}
-              label="Override prompt prefix template"
-              multiline
-              autoAdjustHeight
-              onChange={onPromptTemplatePrefixChange}
-            />
+        {(approach === Approaches.RetrieveThenRead || approach === Approaches.ReadDecomposeAsk) && (
+          <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.promptTemplate}>
             <TextField
               className={styles.oneshotSettingsSeparator}
-              defaultValue={promptTemplateSuffix}
-              label="Override prompt suffix template"
+              defaultValue={promptTemplate}
+              label="Override prompt template"
               multiline
               autoAdjustHeight
-              onChange={onPromptTemplateSuffixChange}
+              onChange={onPromptTemplateChange}
             />
-          </>
+          </TooltipHost>
         )}
 
-        <SpinButton
-          className={styles.oneshotSettingsSeparator}
-          label="Retrieve this many search results:"
-          min={1}
-          max={50}
-          defaultValue={retrieveCount.toString()}
-          onChange={onRetrieveCountChange}
-        />
-        <TextField
-          className={styles.oneshotSettingsSeparator}
-          label="Exclude category"
-          onChange={onExcludeCategoryChanged}
-        />
-        <Checkbox
-          className={styles.oneshotSettingsSeparator}
-          checked={useSemanticRanker}
-          label="Use semantic ranker for retrieval"
-          onChange={onUseSemanticRankerChange}
-        />
-        <Checkbox
-          className={styles.oneshotSettingsSeparator}
-          checked={useSemanticCaptions}
-          label="Use query-contextual summaries instead of whole documents"
-          onChange={onUseSemanticCaptionsChange}
-          disabled={!useSemanticRanker}
-        />
-        <Dropdown
-          className={styles.oneshotSettingsSeparator}
-          label="Retrieval mode"
-          options={[
-            {
-              key: 'hybrid',
-              text: 'Vectors + Text (Hybrid)',
-              selected: retrievalMode == RetrievalMode.Hybrid,
-              data: RetrievalMode.Hybrid,
-            },
-            {
-              key: 'vectors',
-              text: 'Vectors',
-              selected: retrievalMode == RetrievalMode.Vectors,
-              data: RetrievalMode.Vectors,
-            },
-            { key: 'text', text: 'Text', selected: retrievalMode == RetrievalMode.Text, data: RetrievalMode.Text },
-          ]}
-          required
-          onChange={onRetrievalModeChange}
-        />
+        {approach === Approaches.ReadRetrieveRead && (
+          <>
+            <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.promptTemplatePrefix}>
+              <TextField
+                className={styles.oneshotSettingsSeparator}
+                defaultValue={promptTemplatePrefix}
+                label="Override prompt prefix template"
+                multiline
+                autoAdjustHeight
+                onChange={onPromptTemplatePrefixChange}
+              />
+            </TooltipHost>
+            <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.promptTemplateSuffix}>
+              <TextField
+                className={styles.oneshotSettingsSeparator}
+                defaultValue={promptTemplateSuffix}
+                label="Override prompt suffix template"
+                multiline
+                autoAdjustHeight
+                onChange={onPromptTemplateSuffixChange}
+              />
+            </TooltipHost>
+          </>
+        )}
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.retrieveNumber}>
+          <SpinButton
+            className={styles.oneshotSettingsSeparator}
+            label="Retrieve this many search results:"
+            min={1}
+            max={50}
+            defaultValue={retrieveCount.toString()}
+            onChange={onRetrieveCountChange}
+          />
+        </TooltipHost>
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.excludeCategory}>
+          <TextField
+            className={styles.oneshotSettingsSeparator}
+            label="Exclude category"
+            onChange={onExcludeCategoryChanged}
+          />
+        </TooltipHost>
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.useSemanticRanker}>
+          <Checkbox
+            className={styles.oneshotSettingsSeparator}
+            checked={useSemanticRanker}
+            label="Use semantic ranker for retrieval"
+            onChange={onUseSemanticRankerChange}
+          />
+        </TooltipHost>
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.useQueryContextSummaries}>
+          <Checkbox
+            className={styles.oneshotSettingsSeparator}
+            checked={useSemanticCaptions}
+            label="Use query-contextual summaries instead of whole documents"
+            onChange={onUseSemanticCaptionsChange}
+            disabled={!useSemanticRanker}
+          />
+        </TooltipHost>
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.retrievalMode}>
+          <Dropdown
+            className={styles.oneshotSettingsSeparator}
+            label="Retrieval mode"
+            options={[
+              {
+                key: 'hybrid',
+                text: 'Vectors + Text (Hybrid)',
+                selected: retrievalMode == RetrievalMode.Hybrid,
+                data: RetrievalMode.Hybrid,
+              },
+              {
+                key: 'vectors',
+                text: 'Vectors',
+                selected: retrievalMode == RetrievalMode.Vectors,
+                data: RetrievalMode.Vectors,
+              },
+              { key: 'text', text: 'Text', selected: retrievalMode == RetrievalMode.Text, data: RetrievalMode.Text },
+            ]}
+            required
+            onChange={onRetrievalModeChange}
+          />
+        </TooltipHost>
       </Panel>
     </div>
   );