feat!: release v2 (#6545)

Co-authored-by: Artur <145776561+arturict@users.noreply.github.com>
Co-authored-by: arturict <arturict@users.noreply.github.com>
Co-authored-by: Thomas <thomas@ajnart.fr>
Co-authored-by: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
Co-authored-by: Danura30082 <danura30082+github@gmail.com>
Co-authored-by: Kushie <122986913+kushiemoon-dev@users.noreply.github.com>
Co-authored-by: ajnart <thomas@ajnart.fr>
Co-authored-by: ajnart <thomas@ajnart.dev>
Co-authored-by: chenjun <chenjun@foxmail.com>
Co-authored-by: Wikibear <wikibear@users.noreply.github.com>
Co-authored-by: Bergasha <bergasha@gmail.com>
Co-authored-by: leafyelin <43306196+leafyelin@users.noreply.github.com>
Co-authored-by: Lucas Araujo <lucas.lra@gmail.com>
Co-authored-by: GreenMonito <86085570+GreenMonito@users.noreply.github.com>
Co-authored-by: Nerdy-Technician <roffo@nerdy-technician.social>
Co-authored-by: Jun <34545896+jcstrong@users.noreply.github.com>
Co-authored-by: Edmond Abraham <54119952+gitedmond@users.noreply.github.com>
Co-authored-by: thrawnx <tight.bulb9384@fastmail.com>
Co-authored-by: Chris <58918656+nordada@users.noreply.github.com>
Co-authored-by: yi111 <153097222+Yi-111-a@users.noreply.github.com>
Co-authored-by: Yanis <naamaneyanis@gmail.com>
Co-authored-by: Wikibear <me@sej.de>
Co-authored-by: alessiottavo <93441886+alessiottavo@users.noreply.github.com>

apps/nextjs/src/components/assistant/assistant-runtime-controls.tsx

@@ -0,0 +1,395 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useMemo, useState } from "react";
+import {
+  Badge,
+  Box,
+  Button,
+  Combobox,
+  Divider,
+  Group,
+  Loader,
+  Popover,
+  Progress,
+  SegmentedControl,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+  UnstyledButton,
+  useCombobox,
+} from "@mantine/core";
+import {
+  IconBattery1,
+  IconBattery3,
+  IconBatteryFilled,
+  IconBatteryOff,
+  IconCheck,
+  IconPhoto,
+} from "@tabler/icons-react";
+
+import { useTimeAgo } from "@homarr/common";
+import { assistantReasoningModes } from "@homarr/definitions";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
+
+import classes from "./assistant-panel.module.css";
+import type { AssistantConversationControls } from "./assistant-conversation-controls";
+import { useAssistantPreferences } from "./assistant-context";
+import type { AssistantPendingAction } from "./assistant-pending-action";
+import type { AssistantReasoningMode, AssistantRuntimeModelOption } from "./assistant-preferences";
+import { resolveAssistantReasoningDisplayMode } from "./assistant-preferences";
+import { getAssistantProviderQuotaLevel } from "./assistant-provider-quota";
+
+type ComposerProps = AssistantConversationControls & {
+  pendingAction: AssistantPendingAction | undefined;
+  compact?: boolean;
+};
+
+const getModelProviderLabel = (modelId: string, fallback: string) => {
+  const separator = modelId.indexOf("/");
+  if (separator <= 0) return fallback;
+  const provider = modelId
+    .slice(0, separator)
+    .replace(/^[^\p{L}\p{N}]+/u, "")
+    .replaceAll(/[-_]/gu, " ");
+  if (!provider) return fallback;
+  return `${provider.charAt(0).toLocaleUpperCase()}${provider.slice(1)}`;
+};
+
+const formatCompactModelNumber = (value: number) =>
+  new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 }).format(value);
+
+export const RuntimeControls = ({
+  compact = false,
+  modelId,
+  models,
+  modelOptionsLoading,
+  reasoning,
+  onModelChange,
+  onReasoningChange,
+}: ComposerProps) => {
+  const t = useI18n("assistant");
+  const { provider: assistantProvider } = useAssistantPreferences();
+  const [modelSearch, setModelSearch] = useState("");
+  const selectedModel = models.find((model) => model.id === modelId);
+  const displayedReasoning = resolveAssistantReasoningDisplayMode({ provider: assistantProvider, modelId, reasoning });
+  const reasoningIsForced = displayedReasoning === "max";
+  let reasoningLabel = "Max";
+  if (!reasoningIsForced) reasoningLabel = t(`runtime.reasoning.${displayedReasoning}`);
+  let reasoningControl: ReactNode;
+  if (reasoningIsForced) {
+    reasoningControl = (
+      <Badge size="sm" variant="light" color="gray">
+        Max
+      </Badge>
+    );
+  } else {
+    reasoningControl = (
+      <SegmentedControl
+        className={classes.reasoningSegmentedControl}
+        value={reasoning}
+        onChange={(value) => {
+          if (assistantReasoningModes.includes(value as AssistantReasoningMode)) {
+            onReasoningChange(value as AssistantReasoningMode);
+          }
+        }}
+        size="xs"
+        fullWidth
+        data={assistantReasoningModes.map((mode) => ({
+          value: mode,
+          label: t(`runtime.reasoning.${mode}`),
+        }))}
+      />
+    );
+  }
+  const normalizedModelSearch = modelSearch.trim().toLocaleLowerCase();
+  const visibleModels =
+    normalizedModelSearch.length === 0
+      ? models
+      : models.filter(
+          (model) =>
+            model.name.toLocaleLowerCase().includes(normalizedModelSearch) ||
+            model.id.toLocaleLowerCase().includes(normalizedModelSearch),
+        );
+  const groupedModels = visibleModels.reduce((groups, model) => {
+    const provider = getModelProviderLabel(model.id, t("runtime.otherModels"));
+    const providerModels = groups.get(provider);
+    if (providerModels) providerModels.push(model);
+    else groups.set(provider, [model]);
+    return groups;
+  }, new Map<string, AssistantRuntimeModelOption[]>());
+  const modelCombobox = useCombobox({
+    onDropdownOpen: () => {
+      modelCombobox.selectActiveOption();
+      requestAnimationFrame(() => modelCombobox.focusSearchInput());
+    },
+    onDropdownClose: () => {
+      modelCombobox.resetSelectedOption();
+      setModelSearch("");
+    },
+  });
+
+  const selectModel = (value: string) => {
+    if (!models.some((model) => model.id === value)) return;
+    onModelChange(value);
+    modelCombobox.closeDropdown();
+  };
+
+  return (
+    <Combobox store={modelCombobox} onOptionSubmit={selectModel} withinPortal position="top-start" width={340}>
+      <Combobox.Target>
+        {compact ? (
+          <Button
+            className={classes.composerModelButton}
+            classNames={{ label: classes.runtimeSelectorName }}
+            variant="subtle"
+            color="gray"
+            size="compact-sm"
+            type="button"
+            disabled={modelOptionsLoading || models.length === 0}
+            onClick={() => modelCombobox.toggleDropdown()}
+            aria-label={`${t("runtime.model")}: ${selectedModel?.name ?? t("runtime.noModels")}. ${t("runtime.thinking")}: ${reasoningLabel}`}
+            aria-expanded={modelCombobox.dropdownOpened}
+          >
+            {modelOptionsLoading && <Loader size="xs" />}
+            <Text component="span" size="sm" fw={300}>
+              {selectedModel?.name ?? t("runtime.model")}
+            </Text>{" "}
+            <Text component="span" size="sm" fw={300} c="dimmed">
+              {reasoningLabel}
+            </Text>
+          </Button>
+        ) : (
+          <UnstyledButton
+            className={classes.runtimeSelectorTrigger}
+            type="button"
+            disabled={modelOptionsLoading || models.length === 0}
+            onClick={() => modelCombobox.toggleDropdown()}
+            aria-label={`${t("runtime.model")}: ${selectedModel?.name ?? t("runtime.noModels")}. ${t("runtime.thinking")}: ${reasoningLabel}`}
+            aria-expanded={modelCombobox.dropdownOpened}
+          >
+            <Group gap="xs" wrap="nowrap">
+              {modelOptionsLoading && <Loader size={12} />}
+              <Text className={classes.runtimeSelectorName} size="xs" fw={400} lineClamp={1}>
+                {selectedModel?.name ?? t("runtime.model")}
+              </Text>
+              <Badge className={classes.runtimeSelectorEffort} size="xs" variant="light" color="gray">
+                {reasoningLabel}
+              </Badge>
+              <Combobox.Chevron size="xs" />
+            </Group>
+          </UnstyledButton>
+        )}
+      </Combobox.Target>
+      <Combobox.Dropdown className={classes.modelDropdown}>
+        <Combobox.Search
+          value={modelSearch}
+          onChange={(event) => {
+            setModelSearch(event.currentTarget.value);
+            modelCombobox.updateSelectedOptionIndex();
+          }}
+          placeholder={t("runtime.searchModels")}
+          aria-label={t("runtime.searchModels")}
+          size="xs"
+        />
+        <Combobox.Options className={classes.modelOptions}>
+          {[...groupedModels.entries()].map(([provider, providerModels]) => (
+            <Combobox.Group key={provider} label={provider}>
+              {providerModels.map((model) => (
+                <Combobox.Option
+                  className={classes.modelOption}
+                  key={model.id}
+                  value={model.id}
+                  active={model.id === modelId}
+                >
+                  <Group gap="xs" wrap="nowrap">
+                    <Divider
+                      className={classes.modelOptionDivider}
+                      orientation="vertical"
+                      data-active={model.id === modelId || undefined}
+                    />
+                    <Stack gap={1} className={classes.modelOptionText}>
+                      <Text size="sm" fw={model.id === modelId ? 650 : 500} lineClamp={1}>
+                        {model.name}
+                      </Text>
+                      <Text size="xs" className={classes.modelOptionDescription} lineClamp={1}>
+                        {model.description?.trim() || model.id}
+                      </Text>
+                    </Stack>
+                    <Group className={classes.modelOptionMeta} gap={4} wrap="nowrap">
+                      {model.inputModalities.includes("image") && (
+                        <Tooltip label={t("runtime.imageInput")}>
+                          <IconPhoto size={14} aria-label={t("runtime.imageInput")} />
+                        </Tooltip>
+                      )}
+                      {model.contextLength && (
+                        <Badge size="xs" variant="light" color="gray">
+                          {formatCompactModelNumber(model.contextLength)}
+                        </Badge>
+                      )}
+                      {model.id === modelId && <IconCheck size={15} className={classes.runtimeOptionCheck} />}
+                    </Group>
+                  </Group>
+                </Combobox.Option>
+              ))}
+            </Combobox.Group>
+          ))}
+          {visibleModels.length === 0 && <Combobox.Empty>{t("runtime.noModels")}</Combobox.Empty>}
+        </Combobox.Options>
+        <Divider />
+        <Box className={classes.reasoningSelector}>
+          <Text size="xs" fw={650} mb={5}>
+            {t("runtime.thinking")}
+          </Text>
+          {reasoningControl}
+        </Box>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+};
+
+const providerQuotaIcons = {
+  ok: IconBatteryFilled,
+  warning: IconBattery3,
+  bad: IconBattery1,
+  dead: IconBatteryOff,
+};
+
+const providerQuotaColors = {
+  ok: "green",
+  warning: "yellow",
+  bad: "orange",
+  dead: "red",
+} as const;
+
+export const HomarrProviderQuota = () => {
+  const t = useI18n("assistant");
+  const locale = useCurrentIntlLocale();
+  const preferences = useAssistantPreferences();
+  const quota = preferences.quota;
+  const resetAt = useMemo(() => new Date(quota?.resetsAt ?? Date.now()), [quota?.resetsAt]);
+  const resetRelative = useTimeAgo(resetAt, 30_000);
+  if (preferences.provider !== "homarr") return null;
+
+  const level = preferences.quota ? getAssistantProviderQuotaLevel(preferences.quota) : "dead";
+  const Icon = providerQuotaIcons[level];
+  const color = providerQuotaColors[level];
+  const percentage = preferences.quota
+    ? Math.min(100, Math.max(0, (preferences.quota.remaining / Math.max(preferences.quota.limit, 1)) * 100))
+    : 0;
+  let label = t("providerQuota.signInRequired");
+  if (preferences.providerUser && !quota) label = t("providerQuota.loading");
+  if (preferences.providerUser && quota) {
+    label = t("providerQuota.remainingLabel", {
+      remaining: quota.remaining,
+      limit: quota.limit,
+    });
+  }
+  const resetTime = quota ? (
+    <time dateTime={quota.resetsAt} title={new Date(quota.resetsAt).toLocaleString(locale)}>
+      {new Date(quota.resetsAt).toLocaleTimeString(locale, {
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZoneName: "short",
+      })}
+    </time>
+  ) : null;
+  let quotaContent: ReactNode;
+  if (!preferences.providerUser) {
+    quotaContent = (
+      <>
+        <Text size="sm" c="dimmed">
+          {t("providerQuota.signInDescription")}
+        </Text>
+        <Button
+          size="compact-sm"
+          loading={preferences.quotaLoading}
+          onClick={() => void preferences.signInToProvider().catch(() => undefined)}
+        >
+          {t("providerQuota.signIn")}
+        </Button>
+      </>
+    );
+  } else if (quota) {
+    quotaContent = (
+      <>
+        <Box>
+          <Group justify="space-between" gap="xs" mb={5}>
+            <Text size="xs" c="dimmed">
+              {t("providerQuota.dailyAllowance")}
+            </Text>
+            <Text size="xs" fw={650}>
+              {quota.remaining} / {quota.limit}
+            </Text>
+          </Group>
+          <Progress value={percentage} color={color} size="sm" aria-label={label} />
+        </Box>
+        <Text size="xs" c="dimmed">
+          {t.rich("providerQuota.reset", {
+            relative: resetRelative,
+            time: () => resetTime,
+          })}
+        </Text>
+        <Text size="xs" c="dimmed">
+          {t("providerQuota.toolCalls")}
+        </Text>
+      </>
+    );
+  } else {
+    quotaContent = (
+      <Button
+        variant="light"
+        size="compact-sm"
+        loading={preferences.quotaLoading}
+        onClick={() => void preferences.refreshQuota()}
+      >
+        {t("providerQuota.retry")}
+      </Button>
+    );
+  }
+
+  return (
+    <Popover position="top" width={290} shadow="md" withinPortal>
+      <Popover.Target>
+        <UnstyledButton className={classes.providerQuotaTrigger} data-level={level} type="button" aria-label={label}>
+          {preferences.quotaLoading && !preferences.quota ? <Loader size={14} /> : <Icon size={16} aria-hidden />}
+          <Text component="span" size="xs" fw={650}>
+            {preferences.quota?.remaining ?? "–"}
+          </Text>
+        </UnstyledButton>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Stack gap="sm">
+          <Group justify="space-between" wrap="nowrap">
+            <Group gap="xs" wrap="nowrap">
+              <ThemeIcon color={color} variant="light" size="sm" radius="xl">
+                <Icon size={15} aria-hidden />
+              </ThemeIcon>
+              <Box>
+                <Text size="sm" fw={700}>
+                  {t("providerQuota.title")}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  {preferences.providerUser?.name || t("providerQuota.communityWorkshop")}
+                </Text>
+              </Box>
+            </Group>
+            {preferences.quota && (
+              <Badge color={color} variant="light" size="sm">
+                {t(`providerQuota.level.${level}`)}
+              </Badge>
+            )}
+          </Group>
+
+          {quotaContent}
+          {preferences.quotaError && (
+            <Text size="xs" c="red">
+              {preferences.quotaError}
+            </Text>
+          )}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};