feat: promote assistant configuration

apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.tsx

@@ -10,6 +10,7 @@ import {
   Card,
   Divider,
   Group,
+  Image,
   LoadingOverlay,
   PasswordInput,
   Select,
@@ -18,7 +19,6 @@ import {
   Switch,
   Text,
   TextInput,
-  Title,
   Tooltip,
 } from "@mantine/core";
 import {
@@ -26,7 +26,6 @@ import {
   IconDatabaseSearch,
   IconKey,
   IconPlus,
-  IconRobot,
   IconShieldLock,
   IconTool,
   IconTrash,
@@ -41,7 +40,16 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 type HeaderEntry = { id: number; name: string; value: string };
 
-export const AssistantSettings = () => {
+const ProviderIcon = ({ providerId, size = 20 }: { providerId: AssistantProvider; size?: number }) => {
+  const iconUrl = assistantProviderPresets[providerId].iconUrl;
+  return iconUrl ? (
+    <Image src={iconUrl} alt="" aria-hidden w={size} h={size} fit="contain" />
+  ) : (
+    <IconWorld size={size} aria-hidden />
+  );
+};
+
+export const AssistantConfiguration = () => {
   const t = useScopedI18n("management.page.settings.section.assistant");
   const utils = clientApi.useUtils();
   const { data: configuration, isLoading } = clientApi.assistant.getAdminConfiguration.useQuery();
@@ -200,12 +208,6 @@ export const AssistantSettings = () => {
 
   return (
     <Stack>
-      <Group gap="sm">
-        <IconRobot size={26} />
-        <Title order={2}>{t("title")}</Title>
-      </Group>
-      <Text c="dimmed">{t("description")}</Text>
-
       <Card pos="relative" withBorder>
         <LoadingOverlay visible={pending} />
         <Stack gap="lg">
@@ -234,6 +236,13 @@ export const AssistantSettings = () => {
               data={providerOptions}
               searchable
               allowDeselect={false}
+              leftSection={<ProviderIcon providerId={provider} />}
+              renderOption={({ option }) => (
+                <Group gap="sm" wrap="nowrap">
+                  <ProviderIcon providerId={option.value as AssistantProvider} />
+                  <Text size="sm">{option.label}</Text>
+                </Group>
+              )}
             />
             <TextInput
               label={t("baseUrl.title")}

apps/nextjs/src/app/[locale]/manage/assistant/page.tsx

@@ -0,0 +1,39 @@
+import { notFound } from "next/navigation";
+import { Stack, Text, Title } from "@mantine/core";
+
+import { auth } from "@homarr/auth/next";
+import { getScopedI18n } from "@homarr/translation/server";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { AssistantConfiguration } from "./_components/assistant-configuration";
+
+export async function generateMetadata() {
+  const t = await getScopedI18n("management.page.settings.section.assistant");
+  return {
+    title: `${t("title")} • Homarr`,
+  };
+}
+
+export default async function AssistantPage() {
+  const session = await auth();
+
+  if (!session?.user.permissions.includes("admin")) {
+    notFound();
+  }
+
+  const t = await getScopedI18n("management.page.settings.section.assistant");
+  return (
+    <>
+      <DynamicBreadcrumb />
+      <Stack>
+        <div>
+          <Title order={1}>{t("title")}</Title>
+          <Text c="dimmed" maw="70ch">
+            {t("description")}
+          </Text>
+        </div>
+        <AssistantConfiguration />
+      </Stack>
+    </>
+  );
+}

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -21,6 +21,7 @@ import {
   IconMailForward,
   IconPhotoFilled,
   IconPointerFilled,
+  IconRobot,
   IconSearch,
   IconSettingsFilled,
   IconUserFilled,
@@ -198,6 +199,12 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
         },
       ],
     },
+    {
+      label: t("items.assistant"),
+      href: "/manage/assistant",
+      icon: IconRobot,
+      hidden: !session?.user.permissions.includes("admin"),
+    },
     {
       label: t("items.settings"),
       href: "/manage/settings",