feat(ui): update select object info tooltip

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -2453,9 +2453,14 @@
             "saveAs": "Save As",
             "cancel": "Cancel",
             "process": "Process",
-            "help1": "Select a single target object. Add <Bold>Include</Bold> and <Bold>Exclude</Bold> points to indicate which parts of the layer are part of the target object.",
-            "help2": "Start with one <Bold>Include</Bold> point within the target object. Add more points to refine the selection. Fewer points typically produce better results.",
-            "help3": "Invert the selection to select everything except the target object.",
+            "desc": "Select a single target object. After selection is complete, click <Bold>Apply</Bold> to discard everything outside the selected area, or save the selection as a new layer.",
+            "visualModeDesc": "Visual mode uses box and point inputs to select an object.",
+            "visualMode1": "Click and drag to draw a box around the object you want to select. You may get better results by drawing the box a bit larger or smaller than the object.",
+            "visualMode2": "Click to add a green <Bold>include</Bold> point, or shift-click to add a red <Bold>exclude</Bold> point to tell the model what to include or exclude.",
+            "visualMode3": "Points can be used to refine a box selection or used independently.",
+            "promptModeDesc": "Prompt mode uses text input to select an object.",
+            "promptMode1": "Type a brief description of the object you want to select.",
+            "promptMode2": "Use simple language, avoiding complex descriptions or multiple objects.",
             "clickToAdd": "Click on the layer to add a point",
             "dragToMove": "Drag a point to move it",
             "clickToRemove": "Click on a point to remove it",

invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObjectInfoTooltip.tsx

@@ -1,7 +1,7 @@
 import { Flex, Icon, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import { PiInfoBold } from 'react-icons/pi';
 
 const Bold = (props: PropsWithChildren) => (
@@ -10,24 +10,35 @@ const Bold = (props: PropsWithChildren) => (
   </Text>
 );
 
-const SelectObjectHelpTooltipContent = memo(() => {
-  const { t } = useTranslation();
+const components = { Bold: <Bold /> };
 
+const SelectObjectHelpTooltipContent = memo(() => {
   return (
     <Flex gap={3} flexDir="column">
       <Text>
-        <Trans i18nKey="controlLayers.selectObject.help1" components={{ Bold: <Bold /> }} />
-      </Text>
-      <Text>
-        <Trans i18nKey="controlLayers.selectObject.help2" components={{ Bold: <Bold /> }} />
+        <Trans i18nKey="controlLayers.selectObject.desc" components={components} />
       </Text>
+      <UnorderedList>
+        <ListItem>
+          <Trans i18nKey="controlLayers.selectObject.visualMode1" components={components} />
+        </ListItem>
+        <ListItem>
+          <Trans i18nKey="controlLayers.selectObject.visualMode2" components={components} />
+        </ListItem>
+        <ListItem>
+          <Trans i18nKey="controlLayers.selectObject.visualMode3" components={components} />
+        </ListItem>
+      </UnorderedList>
       <Text>
-        <Trans i18nKey="controlLayers.selectObject.help3" />
+        <Trans i18nKey="controlLayers.selectObject.promptModeDesc" components={components} />
       </Text>
       <UnorderedList>
-        <ListItem>{t('controlLayers.selectObject.clickToAdd')}</ListItem>
-        <ListItem>{t('controlLayers.selectObject.dragToMove')}</ListItem>
-        <ListItem>{t('controlLayers.selectObject.clickToRemove')}</ListItem>
+        <ListItem>
+          <Trans i18nKey="controlLayers.selectObject.promptMode1" components={components} />
+        </ListItem>
+        <ListItem>
+          <Trans i18nKey="controlLayers.selectObject.promptMode2" components={components} />
+        </ListItem>
       </UnorderedList>
     </Flex>
   );
@@ -37,7 +48,7 @@ SelectObjectHelpTooltipContent.displayName = 'SelectObjectHelpTooltipContent';
 
 export const SelectObjectInfoTooltip = memo(() => {
   return (
-    <Tooltip label={<SelectObjectHelpTooltipContent />}>
+    <Tooltip label={<SelectObjectHelpTooltipContent />} minW={420}>
       <Flex alignItems="center">
         <Icon as={PiInfoBold} color="base.500" />
       </Flex>