From 4a8d0f46711f48dab8f2b1c9bd37ed645da33e3e Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Thu, 26 Sep 2024 10:58:59 -0400
Subject: [PATCH] add button to learn more about supported models

---
 invokeai/frontend/web/public/locales/en.json      |  1 +
 .../modelManagerV2/subpanels/InstallModels.tsx    | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 4227eed23c2..f10b98e20c3 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -711,6 +711,7 @@
         "installAll": "Install All",
         "installRepo": "Install Repo",
         "ipAdapters": "IP Adapters",
+        "learnMoreAboutSupportedModels": "Learn more about the models we support",
         "load": "Load",
         "localOnly": "local only",
         "manual": "Manual",
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
index 90f3a578da7..754dab8c782 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
@@ -1,9 +1,10 @@
-import { Box, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { Box, Button, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { StarterModelsForm } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm';
 import { atom } from 'nanostores';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiInfoBold } from 'react-icons/pi';
 
 import { HuggingFaceForm } from './AddModelPanel/HuggingFaceFolder/HuggingFaceForm';
 import { InstallModelForm } from './AddModelPanel/InstallModelForm';
@@ -19,9 +20,19 @@ export const InstallModels = memo(() => {
     $installModelsTab.set(index);
   }, []);
 
+  const onClickLearnMore = useCallback(() => {
+    window.open('https://support.invoke.ai/support/solutions/articles/151000170961-supported-models');
+  }, []);
+
   return (
     <Flex layerStyle="first" borderRadius="base" w="full" h="full" flexDir="column" gap={4}>
-      <Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
+        <Button alignItems="center" variant="link" leftIcon={<PiInfoBold />} onClick={onClickLearnMore}>
+          <Text variant="subtext">{t('modelManager.learnMoreAboutSupportedModels')}</Text>
+        </Button>
+      </Flex>
+
       <Tabs variant="collapse" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>
         <TabList>
           <Tab>{t('modelManager.urlOrLocalPath')}</Tab>